/* ============================================================== FAAYAH PRODUCTS PVT LTD Editorial design system — warm ivory, flat, 1px borders, Cormorant Garamond headings, Inter body. No shadows. ============================================================== */ /* ---------- 01 · Tokens ---------- */ :root{ --bg:#F7F4EE; --bg-2:#EFEAE2; --bg-3:#E7E0D4; --white:#FCFBF8; --ink:#2B2A28; --ink-2:#6B6863; --ink-3:#928D85; --accent:#A88558; --accent-2:#8A6B42; --line:#DDD6CB; --line-2:#CDC4B5; --dark:#35302A; --dark-2:#413A32; --on-dark:#F4EFE6; --on-dark-2:rgba(244,239,230,.72); --serif:"Cormorant Garamond","Times New Roman",serif; --olive:#6E7255; --walnut:#5C4632; --sans:"Inter","Helvetica Neue",Arial,sans-serif; --d1:clamp(2.2rem,1.6rem + 2.9vw,3.9rem); /* hero */ --d2:clamp(1.7rem,1.4rem + 1.5vw,2.55rem); /* section heading */ --d3:clamp(1.35rem,1.2rem + .7vw,1.75rem); /* sub heading */ --d4:clamp(1.1rem,1.03rem + .35vw,1.3rem); /* card heading */ --body:clamp(.86rem,.83rem + .12vw,.94rem); --micro:.66rem; --gut:clamp(1.25rem,5vw,5.5rem); --sec:clamp(3.5rem,6.5vw,7rem); --sec-sm:clamp(2.75rem,5vw,5rem); --max:1440px; --nav-h:62px; --ease:cubic-bezier(.25,.6,.3,1); --out:cubic-bezier(.16,1,.3,1); } /* ---------- 02 · Reset ---------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--sans);font-size:var(--body);font-weight:400; line-height:1.85;letter-spacing:.005em; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.lock{overflow:hidden;} img,svg,video{display:block;max-width:100%;} img{height:auto;background:var(--bg-3);} h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;line-height:1.16;letter-spacing:-.005em;} p{margin:0 0 1.15em;} p:last-child{margin-bottom:0;} a{color:inherit;text-decoration:none;} ul,ol{margin:0;padding:0;list-style:none;} button,input,select,textarea{font:inherit;color:inherit;} button{background:none;border:0;cursor:pointer;} strong{font-weight:600;} ::selection{background:var(--accent);color:#fff;} :focus-visible{outline:1.5px solid var(--accent);outline-offset:3px;} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .skip{position:absolute;top:-80px;left:1rem;z-index:999;background:var(--ink);color:#fff;padding:.7rem 1.1rem;font-size:.75rem;transition:top .2s;} .skip:focus{top:.75rem;} /* ---------- 03 · Layout ---------- */ .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);} .wrap--narrow{max-width:900px;} .wrap--wide{max-width:1720px;} .sec{padding-block:var(--sec);} .sec--sm{padding-block:var(--sec-sm);} .sec--t0{padding-top:0;} .sec--b0{padding-bottom:0;} .bg{background:var(--bg);} .bg2{background:var(--bg-2);} .bg3{background:var(--bg-3);} .bg-olive{background:var(--olive);color:#F6F5EE;} .bg-olive h2,.bg-olive h3{color:#F6F5EE;} .bg-olive p{color:rgba(246,245,238,.78);} .white{background:var(--white);} .dark{background:var(--dark);color:var(--on-dark);} .dark h1,.dark h2,.dark h3,.dark h4{color:var(--on-dark);} .dark p{color:var(--on-dark-2);} .line-t{border-top:1px solid var(--line);} .line-b{border-bottom:1px solid var(--line);} .dark .line-t{border-top-color:rgba(244,239,230,.16);} .grid{display:grid;gap:clamp(1.5rem,3.5vw,4rem);} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4.5vw,5.5rem);align-items:center;} .split--60{grid-template-columns:1.25fr 1fr;} .split--40{grid-template-columns:1fr 1.25fr;} .split--textLead{grid-template-columns:.85fr 1.15fr;} .split--imgLg{grid-template-columns:.95fr 1.05fr;} .split--imgSm{grid-template-columns:.78fr 1.5fr;} .split--imgSmR{grid-template-columns:1.18fr .82fr;} .split--top{align-items:start;} .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);} .cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.35rem);} .cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.3vw,1.15rem);} .center{text-align:center;} .mx{margin-inline:auto;} .stack>*+*{margin-top:1.4rem;} .stack-lg>*+*{margin-top:clamp(2rem,4vw,3.25rem);} .rowend{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;} /* ---------- 04 · Type ---------- */ .eyebrow{ display:block;font-family:var(--sans);font-size:var(--micro);font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:1.35rem; } .eyebrow--muted{color:var(--ink-3);} .dark .eyebrow{color:#C9A874;} .d1{font-size:var(--d1);line-height:1.1;font-weight:300;} .d2{font-size:var(--d2);line-height:1.2;} .d3{font-size:var(--d3);line-height:1.28;} .d4{font-size:var(--d4);line-height:1.35;} .lead{font-size:clamp(.92rem,.88rem + .2vw,1.02rem);line-height:1.9;color:var(--ink-2);} .body{color:var(--ink-2);} .small{font-size:.8rem;color:var(--ink-2);line-height:1.8;text-align:left;} .micro{font-family:var(--sans);font-size:var(--micro);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);} .mw-xs{max-width:30ch;} .mw-sm{max-width:40ch;} .mw{max-width:50ch;} .mw-lg{max-width:64ch;} .acc-txt{color:var(--accent);} .rule{width:100%;height:1px;background:var(--line);border:0;margin:0;} .rule--sm{width:48px;background:var(--accent);} .dark .rule{background:rgba(244,239,230,.18);} /* ---------- 05 · Buttons & links ---------- */ .btn{ display:inline-flex;align-items:center;gap:.8rem; font-family:var(--sans);font-size:.68rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase; padding:1.05rem 1.9rem;border:1px solid var(--ink);color:var(--ink);background:transparent; transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); } /* .btn's own display:inline-flex has the same specificity as the browser's built-in [hidden]{display:none} and sits later in the cascade, so it silently wins and a hidden .btn button still shows. This was making every hidden/shown button pair in the video-capture modal (and any other .btn using [hidden] to toggle) render all at once regardless of state — force it back off explicitly. */ .btn[hidden]{display:none!important;} .btn svg{transition:transform .45s var(--out);} .btn:hover{background:var(--ink);color:var(--bg);} .btn:hover svg{transform:translateX(4px);} .btn--accent{background:var(--accent);border-color:var(--accent);color:#fff;} .btn--accent:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff;} .btn--light{border-color:rgba(244,239,230,.48);color:var(--on-dark);} .btn--light:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink);} .btn--sm{padding:.8rem 1.4rem;font-size:.64rem;} .btn:disabled{opacity:.45;pointer-events:none;} .tlink{ display:inline-flex;align-items:center;gap:.75rem; font-family:var(--sans);font-size:var(--micro);font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--ink); padding-bottom:.5rem;position:relative; } .tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line-2);transition:background .35s,width .45s var(--out);} .tlink:hover{color:var(--accent);} .tlink:hover::after{background:var(--accent);} .tlink svg{transition:transform .45s var(--out);} .tlink:hover svg{transform:translateX(4px);} .dark .tlink{color:var(--on-dark);} .dark .tlink::after{background:rgba(244,239,230,.38);} .dark .tlink:hover{color:#C9A874;} .dark .tlink:hover::after{background:#C9A874;} /* ---------- 06 · Header ---------- */ .hdr{position:sticky;top:0;z-index:100;background:var(--dark);border-bottom:1px solid rgba(244,239,230,.14);} .hdr__in{ max-width:var(--max);margin-inline:auto;padding-inline:var(--gut); min-height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:2rem; transition:min-height .4s var(--ease); } .logo{display:flex;align-items:center;gap:.6rem;flex:none;} .logo__img{height:32px;filter:brightness(1.08);width:auto;flex:none;background:none;object-fit:contain;transition:height .4s var(--ease);} .hdr.solid .logo__img{height:30px;} .logo__tx{display:flex;flex-direction:column;gap:.35rem;} .logo__w{font-family:var(--serif);font-size:1.18rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;line-height:1;color:var(--on-dark);} .logo__r{display:none;} .logo__s{display:none;} .mainnav{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,2.1rem);} .mainnav a{font-family:var(--sans);font-size:.72rem;font-weight:500;color:rgba(244,239,230,.8);padding:.4rem 0;position:relative;white-space:nowrap;transition:color .3s;} .mainnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--out);} .mainnav a:hover{color:var(--on-dark);} .mainnav a:hover::after,.mainnav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;} .mainnav a[aria-current="page"]{color:var(--on-dark);} .hdr.solid .hdr__in{min-height:56px;} /* ---------- 06b · Employee login link ---------- */ .emplogin{flex:none;margin-left:.5rem;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--on-dark);white-space:nowrap;padding:.55rem .95rem;border:1px solid rgba(244,239,230,.3);border-radius:999px;transition:border-color .3s,background .3s,color .3s;} .emplogin:hover{border-color:var(--accent);background:rgba(168,133,88,.12);color:var(--accent);} @media (max-width:520px){ .emplogin{font-size:.68rem;padding:.45rem .7rem;} } /* Hamburger: mobile/tablet only, desktop uses the visible mainnav */ .menu{display:none;} @media (max-width:1080px){ .menu{display:block;} } .menu{width:38px;height:38px;position:relative;flex:none;margin-right:-6px;} .menu i{position:absolute;left:9px;width:20px;height:1px;background:#fff;transition:transform .4s var(--out),opacity .25s,background .4s;} .menu i:nth-child(1){top:14px;} .menu i:nth-child(2){top:19px;} .menu i:nth-child(3){top:24px;} .menu.on i:nth-child(1){transform:translateY(5px) rotate(45deg);} .menu.on i:nth-child(2){opacity:0;} .menu.on i:nth-child(3){transform:translateY(-5px) rotate(-45deg);} .drawer{ position:fixed;inset:0;z-index:99;background:var(--bg); padding:calc(var(--nav-h) + 1.5rem) var(--gut) 3rem;overflow-y:auto; opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s; } .drawer.on{opacity:1;visibility:visible;} .drawer__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,5vw,5rem);max-width:var(--max);margin-inline:auto;} .drawer__list{border-top:1px solid var(--line);} .drawer__list a{ display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem; font-family:var(--serif);font-size:clamp(1.5rem,3.5vw,2.4rem);font-weight:400; padding:clamp(.65rem,1.4vw,1rem) 0;border-bottom:1px solid var(--line); opacity:0;transform:translateY(8px);transition:color .3s,padding-left .4s var(--out); } .drawer.on .drawer__list a{animation:dr .5s var(--out) forwards;} .drawer__list a:hover{color:var(--accent);padding-left:.6rem;} .drawer__list a span{font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;color:var(--ink-3);font-weight:500;} .drawer__aside{align-self:end;} .drawer__aside p{font-size:.82rem;color:var(--ink-2);} /* ---------- 07 · Hero ---------- */ .hero{position:relative;width:100%;height:calc(100svh - var(--nav-h));min-height:460px;display:flex;align-items:center;overflow:hidden;background:#16100D;} .hero__img{position:absolute;inset:0;z-index:0;} .hero__img img,.hero__img video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;} .hero__txt{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(2rem,4vw,4rem);} .hero__in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);} .hero h3{color:#FDFBF7;font-size:var(--d1);max-width:20ch;font-weight:300;line-height:0.8;} .hero p{color:rgba(253,251,247,.76);max-width:40ch;font-size:.1.15rem;line-height:1.95;margin-top:42px;} .hero .btn{margin-top:2.25rem;} .hero__in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);} .phero{position:relative;min-height:min(60vh,520px);display:flex;align-items:center;overflow:hidden;background:var(--dark);} .phero__bg{position:absolute;inset:0;} .phero__bg img{width:100%;height:100%;object-fit:cover;} .phero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,32,26,.58),rgba(38,32,26,.4) 48%,rgba(38,32,26,.66));} .phero__in{position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);} .phero h1{color:#fff;font-size:clamp(2.1rem,1.6rem + 2.3vw,3.5rem);font-weight:300;} .phero p{color:rgba(255,255,255,.78);max-width:46ch;margin-top:1.1rem;font-size:.92rem;} /* ---------- 07b · Plain (imageless) hero, split composition ---------- */ .phero--split{ min-height:min(48vh,420px); background:radial-gradient(120% 140% at 8% 12%,rgba(168,133,88,.22),transparent 55%),linear-gradient(135deg,var(--dark) 55%,#241d17 100%); } .phero--split::after{ content:attr(data-mark);position:absolute;right:clamp(-1rem,2vw,3rem);bottom:clamp(-3rem,-4vw,-1rem); font-family:var(--serif);font-weight:300;font-size:clamp(9rem,7rem + 14vw,20rem);line-height:1; color:rgba(244,239,230,.05);pointer-events:none;user-select:none;z-index:1; } .phero--split .phero__in{ display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:end; padding-block:clamp(2.5rem,5vw,3.5rem); } .phero--split .phero__l{position:relative;} .phero--split .phero__l::before{content:"";display:block;width:46px;height:2px;background:var(--accent);margin-bottom:1.4rem;} .phero--split h1{max-width:15ch;} .phero--split .phero__r{border-left:1px solid rgba(244,239,230,.2);padding-left:clamp(1.25rem,2.5vw,2rem);padding-bottom:.2rem;} .phero--split .phero__r p{margin-top:0;max-width:38ch;} .phero--split .crumb{margin-top:1.1rem;} .crumb{display:flex;gap:.6rem;align-items:center;font-family:var(--sans);font-size:.7rem;color:rgba(255,255,255,.62);margin-top:1.15rem;} .crumb a:hover{color:#fff;} .crumb i{font-style:normal;opacity:.5;} /* ---------- 08 · Logo strip ---------- */ .strip{border-top:1px solid var(--line);border-left:1px solid var(--line);display:grid;grid-template-columns:repeat(6,1fr);background:var(--white);} .strip__c{ border-right:1px solid var(--line);border-bottom:1px solid var(--line); aspect-ratio:16/8;display:grid;place-items:center;padding:1.1rem; } .strip__c:hover{background:var(--bg-2);} .strip__m{ font-family:var(--serif);font-size:clamp(.82rem,1.15vw,1.05rem);font-weight:500; letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--ink);line-height:1.3; transition:color .4s var(--ease); } .strip__c:hover .strip__m{color:var(--accent);} .strip__m em{display:block;font-family:var(--sans);font-style:normal;font-size:.5rem;letter-spacing:.2em;color:var(--ink-3);margin-top:.45rem;font-weight:500;} .strip__c img{max-height:54px;max-width:76%;width:auto;object-fit:contain;background:none;mix-blend-mode:multiply;filter:grayscale(1);opacity:.62;transition:opacity .45s var(--ease),filter .45s var(--ease);} .strip__c:hover img{opacity:1;filter:grayscale(0);} .strip__c:hover img{transform:scale(1.04);} /* ---------- 08b · Stat row ---------- */ .statrow{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);} .statrow__i{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;padding:clamp(2rem,3.5vw,3.25rem) 1rem;border-right:1px solid var(--line);} .statrow__i:last-child{border-right:0;} .statrow__g{width:24px;height:24px;color:var(--accent);} .statrow__g svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;} .statrow__n{font-family:var(--serif);font-size:clamp(1.5rem,1.15rem + 1.3vw,2.1rem);line-height:1;letter-spacing:.01em;} .statrow__l{font-family:var(--sans);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);} /* ---------- 08c · Industry tile row ---------- */ .tilerow{display:grid;grid-template-columns:repeat(4,1fr);} .tilerow__i{position:relative;min-height:clamp(260px,26vw,380px);display:flex;align-items:flex-end;overflow:hidden;background:var(--dark);} .tilerow__i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out);} .tilerow__i::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,24,18,.42) 0%,rgba(30,24,18,.62) 55%,rgba(30,24,18,.86) 100%);transition:background .5s var(--ease);} .tilerow__i:hover img{transform:scale(1.05);} .tilerow__i:hover::after{background:linear-gradient(180deg,rgba(30,24,18,.3) 0%,rgba(30,24,18,.52) 55%,rgba(30,24,18,.82) 100%);} .tilerow__b{position:relative;z-index:2;padding:clamp(1.25rem,2vw,2rem);color:var(--on-dark);} .tilerow__t{display:block;font-family:var(--sans);font-size:var(--micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.75rem;} .tilerow__x{display:block;font-size:.82rem;line-height:1.7;color:rgba(244,239,230,.76);max-width:24ch;} .tilerow__r{display:block;width:26px;height:1px;background:var(--accent);margin-top:1.1rem;transition:width .5s var(--out);} .tilerow__i:hover .tilerow__r{width:46px;} /* ---------- 08d · Brand line ---------- */ .brandline{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;} .brandline__i{display:grid;place-items:center;padding:clamp(1rem,2.5vw,2rem);border-right:1px solid var(--line);} .brandline__i:last-child{border-right:0;} .brandline__i img{max-height:58px;max-width:72%;width:auto;object-fit:contain;background:none;transition:transform .45s var(--out);} .brandline__i:hover img{transform:scale(1.05);} /* ---------- 08d2 · Logo marquee ---------- */ .mq{position:relative;overflow:hidden;padding-block:clamp(1.5rem,3vw,2.5rem); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .mq__t{display:flex;align-items:center;gap:clamp(1.5rem,3vw,3rem);width:max-content;animation:mqrun 46s linear infinite;} .mq:hover .mq__t{animation-play-state:paused;} .mq__i{flex:none;display:grid;place-items:center;width:170px;height:76px;} .mq__i img{max-height:56px;max-width:130px;width:auto;object-fit:contain;background:none;} @keyframes mqrun{from{transform:translateX(0);}to{transform:translateX(-33.3333%);}} /* ---------- 08e · Brand wall ---------- */ .wall{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);} .wall__c{ border-right:1px solid var(--line);border-bottom:1px solid var(--line); aspect-ratio:4/3;display:grid;place-items:center;padding:clamp(1.1rem,2.4vw,2.25rem); position:relative;cursor:pointer;transition:background .45s var(--ease); } .wall__c:hover,.wall__c:focus-visible{background:var(--bg-2);} .wall__c img{max-height:66px;max-width:74%;width:auto;object-fit:contain;background:none; mix-blend-mode:multiply;filter:grayscale(1);opacity:.66;transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--out);} .wall__c:hover img,.wall__c:focus-visible img{opacity:1;filter:grayscale(0);transform:scale(1.06);} .wall__c--empty{cursor:default;background:var(--bg);} .wall__c--empty:hover{background:var(--bg);} .wall__n{position:absolute;left:0;right:0;bottom:.7rem;text-align:center;font-family:var(--sans);font-size:.58rem; letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);opacity:0;transition:opacity .4s var(--ease);} .wall__c:hover .wall__n{opacity:1;} /* footer marks: monochrome until hover */ .fgrid__c img{mix-blend-mode:multiply;filter:grayscale(1);opacity:.62;transition:opacity .45s var(--ease),filter .45s var(--ease);} .fgrid__c:hover img{opacity:1;filter:grayscale(0);} /* ---------- 08f · Reels ---------- */ /* Single horizontal row, however many reels there are — it never wraps to a second row. Overflow scrolls sideways (touch/trackpad/drag) and is also driven by the prev/next arrow buttons in .reelsNav. */ [data-reels]{position:relative;} .reels{display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;scroll-behavior:smooth; -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:.15rem .1rem;} .reels::-webkit-scrollbar{display:none;} .reel{position:relative;aspect-ratio:9/16;overflow:hidden;padding:0;border:1px solid var(--line); background:var(--dark);cursor:pointer;display:block;flex:0 0 auto; width:clamp(84px,10vw,120px);scroll-snap-align:start; transition:border-color .4s var(--ease),transform .5s var(--out);} .reels{scroll-snap-type:x proximity;} .reel:hover,.reel:focus-visible{border-color:var(--accent);transform:translateY(-2px);} .reel img,.reel video{width:100%;height:100%;object-fit:cover;display:block;background:var(--dark);} .reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,16,13,0) 55%,rgba(22,16,13,.68) 100%);} .reel__play{position:absolute;inset:0;margin:auto;width:26px;height:26px;z-index:2; display:grid;place-items:center;border:1px solid rgba(253,251,247,.55);border-radius:50%; color:#FDFBF7;background:rgba(22,16,13,.28);transition:background .35s,transform .45s var(--out);} .reel__play svg{width:11px;height:11px;margin-left:1px;} .reel:hover .reel__play{background:var(--accent);border-color:var(--accent);transform:scale(1.08);} .reel__t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.4rem .45rem; font-family:var(--sans);font-size:.58rem;font-weight:500;line-height:1.3;color:#FDFBF7;text-align:left;} .reels__empty{font-size:.85rem;color:var(--ink-3);padding:2rem 0;} .reels__empty code{font-family:ui-monospace,Menlo,monospace;font-size:.8em;background:var(--bg-2);padding:.15em .4em;} .reelsNav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px; border-radius:50%;background:var(--white);border:1px solid var(--line);display:grid;place-items:center; cursor:pointer;box-shadow:0 4px 14px rgba(22,16,13,.14);transition:background .3s,border-color .3s,opacity .3s; color:var(--ink);} .reelsNav svg{width:15px;height:15px;} .reelsNav:hover{background:var(--accent);border-color:var(--accent);color:#FDFBF7;} .reelsNav--prev{left:-4px;} .reelsNav--next{right:-4px;} .reelsNav[hidden]{display:none;} @media (max-width:640px){ .reelsNav{width:28px;height:28px;} .reelsNav svg{width:12px;height:12px;} .reelsNav--prev{left:-2px;} .reelsNav--next{right:-2px;} } .rlb{position:fixed;inset:0;z-index:220;display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:clamp(.5rem,2vw,2rem);padding:clamp(1rem,3vw,2.5rem); background:radial-gradient(120% 100% at 50% 0%,rgba(38,30,24,.94) 0%,rgba(10,8,6,.98) 70%); opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;} .rlb.on{opacity:1;visibility:visible;} .rlb__stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem;min-width:0;} .rlb__stage video{max-height:82svh;max-width:100%;width:auto;aspect-ratio:9/16;object-fit:contain; background:#0A0806;border-radius:2px;} .rlb__cap{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(253,251,247,.72);text-align:center;} .rlb__x{position:absolute;top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem);z-index:3; width:42px;height:42px;border:1px solid rgba(253,251,247,.3);color:#FDFBF7;display:grid;place-items:center; transition:background .3s,border-color .3s;} .rlb__x:hover{background:rgba(253,251,247,.12);border-color:#FDFBF7;} .rlb__nav{width:clamp(38px,4vw,52px);height:clamp(38px,4vw,52px);border:1px solid rgba(253,251,247,.28); color:#FDFBF7;display:grid;place-items:center;flex:none;transition:background .3s,border-color .3s;} .rlb__nav:hover{background:var(--accent);border-color:var(--accent);} .rlb__nav[hidden]{display:none;} /* ---------- 09 · Icon row ---------- */ .iconrow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .iconrow__i{ display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem; padding:clamp(1.6rem,2.8vw,2.4rem) .75rem;border-right:1px solid var(--line); position:relative;transition:background .4s var(--ease); } .iconrow__i:last-child{border-right:0;} .iconrow__i::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .5s var(--out);} .iconrow__i:hover{background:var(--white);} .iconrow__i:hover::after,.iconrow__i.on::after{transform:scaleX(1);} .iconrow__g{width:34px;height:34px;color:var(--ink);transition:color .4s var(--ease),transform .5s var(--out);} .iconrow__g svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;} .iconrow__i:hover .iconrow__g{color:var(--accent);transform:translateY(-2px);} .iconrow__t{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.02em;color:var(--ink);line-height:1.4;} .iconrow--dark{border-color:rgba(244,239,230,.18);} .iconrow--dark .iconrow__i{border-right-color:rgba(244,239,230,.18);} .iconrow--dark .iconrow__g,.iconrow--dark .iconrow__t{color:var(--on-dark);} .iconrow--dark .iconrow__i:hover{background:rgba(244,239,230,.06);} /* ---------- 10 · Figures ---------- */ .fig{position:relative;overflow:hidden;background:var(--bg-3);} .collage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(.6rem,1.3vw,1.1rem);} .collage-grid .fig{cursor:zoom-in;} .collage-grid button{padding:0;border:0;background:none;display:block;width:100%;height:100%;} .role-tag{display:block;margin-top:.5rem;} .fig img{width:100%;height:100%;object-fit:cover;} .r-4x5{aspect-ratio:4/5;} .r-3x4{aspect-ratio:3/4;} .r-1x1{aspect-ratio:1/1;} .r-4x3{aspect-ratio:4/3;} .r-3x2{aspect-ratio:3/2;} .r-16x9{aspect-ratio:16/9;} .r-16x10{aspect-ratio:16/10;} .r-21x9{aspect-ratio:21/9;} .r-2x1{aspect-ratio:2/1;} .fig__cap{margin-top:.9rem;font-family:var(--sans);font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);} .zoom{cursor:zoom-in;padding:0;border:0;width:100%;display:block;} .zoom img{transition:transform 1.1s var(--out);} .zoom:hover img{transform:scale(1.035);} /* Offset / editorial compositions */ .offset{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,1.75rem);align-items:center;} .offset__a{grid-column:1/8;} .offset__b{grid-column:8/13;align-self:end;margin-bottom:clamp(-4rem,-5vw,-2rem);} .offset__t{grid-column:1/6;} .offset__wide{grid-column:6/13;} /* Category tiles with image + subcategories */ .catTile{display:flex;flex-direction:column;} .catTile__img{border-radius:2px;margin-bottom:1rem;background:var(--bg-3);} .catTile h3{margin-top:.2rem;} .catTile__subs{list-style:none;margin:.5rem 0 0;padding:0;font-size:.72rem;letter-spacing:.02em;color:var(--ink-3);} .catTile__subs li{line-height:1.7;} /* Mosaic / balanced photo collage */ .mosaic{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(.75rem,1.3vw,1.15rem);aspect-ratio:21/10;} .mosaic__big{grid-row:1/3;} .mosaic button{padding:0;border:0;cursor:zoom-in;overflow:hidden;background:var(--bg-3);position:relative;display:block;width:100%;height:100%;} .mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--out);} .mosaic button:hover img{transform:scale(1.035);} /* ---------- 11 · Cards ---------- */ .card{ background:var(--white);border:1px solid var(--line); padding:clamp(1.75rem,3vw,2.75rem); display:flex;flex-direction:column;gap:.85rem; transition:border-color .45s var(--ease),background .45s var(--ease); } .card:hover{border-color:var(--line-2);} .card--center{align-items:center;text-align:center;} .card__g{width:30px;height:30px;color:var(--accent);margin-bottom:.5rem;} .card__g svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;} .card h3{font-size:var(--d4);} .card p{font-size:.82rem;color:var(--ink-2);line-height:1.8;margin:0;} .card--dark{background:var(--dark);border-color:var(--dark);color:var(--on-dark);} .card--dark p{color:var(--on-dark-2);} .card--plain{background:transparent;} .arrow-list{display:grid;gap:.9rem;} .arrow-list li{display:flex;gap:.9rem;align-items:baseline;font-size:.86rem;color:var(--ink-2);} .arrow-list li::before{content:"";flex:none;width:14px;height:1px;background:var(--accent);transform:translateY(-.35em);} .dark .arrow-list li{color:var(--on-dark-2);} .num-list{display:grid;} .num-list li{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(1.1rem,2vw,1.65rem) 0;border-bottom:1px solid var(--line);align-items:baseline;} .num-list li:first-child{border-top:1px solid var(--line);} .num-list b{font-family:var(--serif);font-size:1.05rem;font-weight:500;color:var(--accent);letter-spacing:.06em;} .num-list h3{font-size:var(--d4);margin-bottom:.4rem;} .num-list p{font-size:.83rem;color:var(--ink-2);margin:0;line-height:1.8;} .dark .num-list li{border-color:rgba(244,239,230,.16);} .dark .num-list p{color:var(--on-dark-2);} /* Editorial link card (image + caption) */ .ecard{display:block;} .ecard__m{overflow:hidden;background:var(--bg-3);} .ecard__m img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--out);} .ecard:hover .ecard__m img{transform:scale(1.035);} .ecard__b{padding-top:1.35rem;} .ecard__i{font-family:var(--sans);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.6rem;} .ecard h3{font-size:var(--d3);} .ecard p{font-size:.83rem;color:var(--ink-2);margin:.6rem 0 0;line-height:1.8;max-width:42ch;} .ecard__go{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.1rem;font-family:var(--sans);font-size:var(--micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);} .ecard:hover .ecard__go{color:var(--accent);} /* Brand card */ .bcard{ display:block;width:100%;text-align:left;padding:0;cursor:pointer; background:var(--white);border:1px solid var(--line); transition:border-color .45s var(--ease); } .bcard:hover,.bcard:focus-visible{border-color:var(--accent);} .bcard__l{aspect-ratio:16/9;display:grid;place-items:center;padding:1.5rem;border-bottom:1px solid var(--line);} .bcard__b{padding:1.35rem 1.5rem 1.6rem;display:grid;gap:.45rem;} .bcard__c{font-family:var(--sans);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);} .bcard__t{font-family:var(--serif);font-size:1.2rem;line-height:1.2;} .bcard__x{font-size:.8rem;color:var(--ink-2);line-height:1.75;} /* Job row */ .job{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;padding:clamp(1.35rem,2.6vw,2.1rem) 0;border-bottom:1px solid var(--line);transition:padding-left .45s var(--out);} .job:first-child{border-top:1px solid var(--line);} .job:hover{padding-left:clamp(.6rem,1.4vw,1.2rem);} .job h3{font-size:var(--d3);} .job p{font-size:.83rem;color:var(--ink-2);margin:.55rem 0 0;max-width:56ch;} .job__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem;} .tag{font-family:var(--sans);font-size:.58rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:.38rem .7rem;border:1px solid var(--line-2);color:var(--ink-2);} .tag--accent{border-color:var(--accent);color:var(--accent);} .go{width:34px;height:34px;border:1px solid var(--line-2);display:grid;place-items:center;flex:none;transition:background .4s,border-color .4s,color .4s;} .job:hover .go,.ecard:hover .go{background:var(--accent);border-color:var(--accent);color:#fff;} /* ---------- 12 · Triptych (mission / vision) ---------- */ .tript{display:grid;grid-template-columns:1fr 1fr 1fr;} .tript__p{background:var(--dark);color:var(--on-dark);padding:clamp(1.75rem,3.5vw,3.25rem);display:flex;flex-direction:column;justify-content:center;} .tript__p h3{font-size:var(--d4);color:var(--on-dark);} .tript__p p{color:var(--on-dark-2);font-size:.84rem;line-height:1.85;margin:.9rem 0 0;} .tript__m{overflow:hidden;background:var(--bg-3);} .tript__m img{width:100%;height:100%;object-fit:cover;} /* ---------- 13 · Notice bar ---------- */ .bar{background:var(--bg-3);border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.15rem,2.5vw,2.25rem);align-items:center;padding:clamp(1.35rem,2.6vw,2rem) clamp(1.35rem,3vw,2.5rem);} .bar__g{width:46px;height:46px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);flex:none;} .bar__g svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;} .bar p{margin:0;font-size:.9rem;line-height:1.7;} .bar p b{font-family:var(--serif);font-weight:500;font-size:1.05rem;display:block;} /* ---------- 14 · Marquee-free brand line ---------- */ .kv{display:grid;grid-template-columns:13rem 1fr;gap:1.25rem;padding:1rem 0;border-bottom:1px solid var(--line);align-items:start;} .kv:first-child{border-top:1px solid var(--line);} .kv__k{font-family:var(--sans);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);padding-top:.35rem;} .kv__v{font-size:.92rem;line-height:1.8;} .kv__v a:hover{color:var(--accent);} .kv__v small{display:block;font-size:.78rem;color:var(--ink-2);margin-top:.35rem;} .dark .kv{border-color:rgba(244,239,230,.16);} .dark .kv__k{color:var(--on-dark-2);} /* ---------- 15 · Accordion ---------- */ .acc{border-top:1px solid var(--line);} .acc__i{border-bottom:1px solid var(--line);} .acc__b{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;padding:clamp(1.15rem,2.2vw,1.7rem) 0;text-align:left;transition:color .35s;} .acc__b:hover{color:var(--accent);} .acc__t{font-family:var(--serif);font-size:clamp(1.02rem,.95rem + .38vw,1.28rem);line-height:1.4;} .acc__x{width:16px;height:16px;position:relative;margin-top:.5em;flex:none;} .acc__x::before,.acc__x::after{content:"";position:absolute;background:var(--accent);transition:transform .45s var(--out),opacity .3s;} .acc__x::before{left:0;top:50%;width:100%;height:1px;transform:translateY(-50%);} .acc__x::after{top:0;left:50%;height:100%;width:1px;transform:translateX(-50%);} .acc__i.on .acc__x::after{transform:translateX(-50%) rotate(90deg);opacity:0;} .acc__p{max-height:0;overflow:hidden;transition:max-height .5s var(--out);} .acc__pi{padding-bottom:1.6rem;font-size:.86rem;line-height:1.9;color:var(--ink-2);max-width:70ch;} /* ---------- 16 · Forms ---------- */ .form{display:grid;gap:clamp(1.1rem,2vw,1.5rem);} .fg2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.1rem,2vw,1.5rem);} .f{display:grid;gap:.5rem;} .f--full{grid-column:1/-1;} .f label{font-family:var(--sans);font-size:var(--micro);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);} .f label .rq{color:var(--accent);} .f input,.f select,.f textarea{ width:100%;background:var(--white);border:1px solid var(--line);border-radius:0; padding:.85rem 1rem;font-family:var(--sans);font-size:.88rem;color:var(--ink); transition:border-color .35s var(--ease); } .f input::placeholder,.f textarea::placeholder{color:#B3AFA6;} .f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--accent);} .f textarea{resize:vertical;min-height:112px;line-height:1.7;} .f select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.2rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23A88555' stroke-width='1.1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;} .f.err input,.f.err select,.f.err textarea{border-color:#B4453A;} .f__e{font-size:.72rem;color:#B4453A;} .drop{position:relative;display:block;border:1px dashed var(--line-2);background:var(--white);padding:1.6rem;text-align:center;cursor:pointer;transition:border-color .35s,background .35s;} .drop:hover,.drop.on{border-color:var(--accent);background:var(--bg-2);} .drop input{position:absolute;width:1px;height:1px;opacity:0;} .drop__l{font-size:.86rem;} .drop__h{font-size:.74rem;color:var(--ink-3);margin-top:.35rem;} .drop__n{font-size:.78rem;color:var(--accent);margin-top:.55rem;word-break:break-all;} .fnote{font-size:.75rem;color:var(--ink-3);line-height:1.75;} .fstatus{display:none;padding:.9rem 1.1rem;border:1px solid var(--line);border-left:2px solid var(--accent);background:var(--white);font-size:.85rem;} .fstatus.on{display:block;} .fstatus.bad{border-left-color:#B4453A;} .panel{background:var(--bg-2);border:1px solid var(--line);padding:clamp(1.5rem,3.5vw,3rem);} /* ---------- 16b · "Verify It's You" gate (email OTP, end of form) ---------- */ .otp-box{ background:var(--bg-2);border:1px solid var(--line);border-left:2px solid var(--accent); padding:1.4rem 1.5rem;gap:.9rem;margin-top:.4rem; } .otp-box__head{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:.3rem;} .otp-box__badge{ flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem; background:var(--white);border:1px solid var(--line);color:var(--accent); } .otp-box__title{font-family:var(--serif,inherit);font-weight:500;font-size:1.05rem;margin:0 0 .3rem;color:var(--ink);} .otp-box__sub{font-size:.8rem;color:var(--ink-3);line-height:1.65;margin:0;max-width:52ch;} .otp-box__row{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;} .otp-box__msg{font-size:.78rem;color:var(--ink-3);line-height:1.6;} .otp-box__msg.bad{color:#B4453A;} .otp-box__label{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.55rem;} .otp-box__code{margin-top:.15rem;} .otp-box__code-row{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;} .otp-box__code input{ width:9.5em;background:var(--white);border:1px solid var(--line);border-radius:0; padding:.8rem 1rem;font-family:var(--sans);font-size:.95rem;letter-spacing:.32em;color:var(--ink); transition:border-color .35s var(--ease); } .otp-box__code input:focus{outline:none;border-color:var(--accent);} .otp-box__resend{display:flex;align-items:center;gap:.7rem;margin-top:.6rem;} .otp-box__timer{font-size:.72rem;color:var(--ink-3);} .otp-box--verified{border-color:var(--olive);border-left-color:var(--olive);background:rgba(110,114,85,.08);} .otp-box--verified .otp-box__badge{border-color:var(--olive);color:var(--olive);} .otp-box__ok{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--olive);font-weight:500;} .otp-box__ok svg{flex:none;width:15px;height:11px;} .otp-box__change{background:none;border:0;padding:0;font-size:.72rem;color:var(--ink-3);text-decoration:underline;cursor:pointer;} .otp-box__change:hover{color:var(--accent);} .otp-box button[disabled]{opacity:.55;cursor:default;} .otp-box__row[hidden],.otp-box__code[hidden],.otp-box__ok[hidden]{display:none;} .cap{display:grid;gap:1.1rem;} .cap__stage{position:relative;aspect-ratio:4/3;background:var(--bg-3);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;} .cap__stage video,.cap__stage img{width:100%;height:100%;object-fit:cover;display:none;grid-area:1/1;} .cap__stage.live video{display:block;} .cap__stage.shot img{display:block;} .cap__ph{position:absolute;text-align:center;color:var(--ink-3);font-size:.82rem;padding:1.5rem;max-width:40ch;line-height:1.8;} .cap__stage.live .cap__ph,.cap__stage.shot .cap__ph{display:none;} .cap__tabs{display:inline-flex;border:1px solid var(--line-2);background:var(--white);} .cap__tab{padding:.6rem 1.15rem;font-family:var(--sans);font-size:var(--micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);transition:background .35s,color .35s;} .cap__tab.on{background:var(--ink);color:var(--bg);} .cap__acts{display:flex;flex-wrap:wrap;gap:.55rem;} .done{display:none;padding:clamp(2rem,4vw,3.25rem);background:var(--white);border:1px solid var(--line);border-left:2px solid var(--accent);} .done.on{display:block;animation:fu .6s var(--out) both;} .done__g{width:42px;height:42px;border:1px solid var(--accent);border-radius:50%;color:var(--accent);display:grid;place-items:center;margin-bottom:1.35rem;} .done h2{font-size:var(--d3);margin-bottom:.75rem;} .done p{color:var(--ink-2);max-width:48ch;font-size:.88rem;} .done__r{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);font-family:var(--sans);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);} /* ---------- 17 · Modal & lightbox ---------- */ .modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(1rem,3vw,2.5rem);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;} .modal.on{opacity:1;visibility:visible;} .modal__s{position:absolute;inset:0;background:rgba(43,42,40,.62);} .modal__p{position:relative;background:var(--bg);border:1px solid var(--line);width:min(880px,100%);max-height:88vh;overflow-y:auto;transform:translateY(12px);transition:transform .5s var(--out);} .modal.on .modal__p{transform:none;} .modal__x{position:absolute;top:.9rem;right:.9rem;z-index:3;width:36px;height:36px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s;} .modal__x:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);} .modal__m{aspect-ratio:2/1;overflow:hidden;background:var(--bg-3);} .modal__m img{width:100%;height:100%;object-fit:cover;} .modal__b{padding:clamp(1.5rem,3.5vw,2.75rem);} .lb{position:fixed;inset:0;z-index:200;background:rgba(43,42,40,.94);display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;} .lb.on{opacity:1;visibility:visible;} .lb img{max-width:min(1280px,93vw);max-height:84vh;object-fit:contain;} .lb__x{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);width:42px;height:42px;border:1px solid rgba(255,255,255,.3);color:#fff;display:grid;place-items:center;transition:background .3s;} .lb__x:hover{background:rgba(255,255,255,.12);} .lb__c{position:absolute;bottom:clamp(1rem,3vw,2rem);left:0;right:0;text-align:center;color:rgba(255,255,255,.6);font-family:var(--sans);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;} /* ---------- 17c · Video Capture Modal ---------- */ [data-video-modal]{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(1rem,3vw,2.5rem);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;} [data-video-modal].on{opacity:1;visibility:visible;} [data-video-modal] .modal__s{position:absolute;inset:0;background:rgba(43,42,40,.62);} [data-video-modal] .modal__p{position:relative;background:var(--bg);border:1px solid var(--line);width:min(780px,100%);max-height:88vh;overflow-y:auto;transform:translateY(12px);transition:transform .5s var(--out);} [data-video-modal].on .modal__p{transform:none;} [data-video-modal] .modal__x{position:absolute;top:.9rem;right:.9rem;z-index:3;width:36px;height:36px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s;cursor:pointer;} [data-video-modal] .modal__x:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);} [data-video-modal] .modal__b{padding:clamp(2rem,3.5vw,3rem);} [data-video-element]{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--dark);border-radius:2px;display:block;} [data-video-canvas]{display:none;} .video-capture__stage video[data-playback]{width:100%;height:100%;object-fit:contain;background:var(--dark);} .video-capture{display:grid;gap:1.5rem;} .video-capture__header{border-bottom:1px solid var(--line);padding-bottom:1.5rem;} .video-capture__header h3{font-size:var(--d3);margin-bottom:.5rem;} .video-capture__header p{font-size:.88rem;color:var(--ink-2);max-width:48ch;} .video-capture__stage{position:relative;aspect-ratio:16/9;background:var(--dark);border:1px solid var(--line);overflow:hidden;border-radius:2px;margin:1.5rem 0;} /* Recording-in-progress indicator: red pulsing dot + elapsed timer, overlaid on the live camera stage so it's unmistakable that recording has actually started. */ .video-capture__stage .rec-indicator{position:absolute;top:.85rem;left:.85rem;z-index:2;display:none;align-items:center;gap:.5rem;padding:.4rem .75rem;background:rgba(20,16,14,.68);border-radius:999px;backdrop-filter:blur(2px);} .video-capture__stage.is-recording .rec-indicator{display:flex;} .rec-indicator__dot{width:9px;height:9px;border-radius:50%;background:#E0362B;animation:fy-rec-pulse 1.2s ease-in-out infinite;} .rec-indicator__label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;} .rec-indicator__time{font-size:.72rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;opacity:.85;} @keyframes fy-rec-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.8);}} .video-capture__controls{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0;} [data-record-btn],[data-stop-btn],[data-retake-btn],[data-submit-video-btn]{padding:.85rem 1.6rem;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-radius:2px;transition:all .3s var(--ease);} [data-record-btn]{background:#D6362B;border:1px solid #D6362B;color:#fff;} [data-record-btn]:hover:not(:disabled){background:#B92C22;border-color:#B92C22;} [data-record-btn]:disabled{opacity:.5;cursor:not-allowed;} [data-record-btn] .rec-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#fff;margin-right:.55em;vertical-align:middle;} [data-stop-btn]{background:#8C221A;border:1px solid #8C221A;color:#fff;} [data-stop-btn]:hover{background:#711B14;border-color:#711B14;} [data-submit-video-btn]{background:var(--accent);border:1px solid var(--accent);color:#fff;width:100%;padding:1rem 1.6rem;order:5;margin-top:.25rem;} [data-submit-video-btn]:hover{background:var(--accent-2);border-color:var(--accent-2);} [data-retake-btn]{background:transparent;border:1px solid var(--ink-3);color:var(--ink-2);} [data-retake-btn]:hover{border-color:var(--ink);color:var(--ink);} .video-capture__hint{font-size:.78rem;color:var(--ink-3);display:flex;gap:.5rem;align-items:flex-start;margin:.75rem 0;} .video-capture__hint svg{width:16px;height:16px;flex:none;margin-top:.15em;color:var(--accent);} /* Custom playback player (replaces native