/* ============================================================ GUZZO ARCHITECTS Palette sampled from the hero footage: drafting cyan for what is drawn, setting-out vermilion for what is marked on site. ============================================================ */ :root{ --canvas:#0A1016; --canvas-2:#0D141C; --panel:#121C26; --panel-2:#16222E; --accent:#E4562C; --accent-hover:#F2663C; --line:#5FC8E0; --line-muted:rgba(95,200,224,.18); --line-faint:rgba(95,200,224,.09); --text-primary:#EDF2F5; --text-secondary:#93A6B4; --text-dim:#6B7F8D; --hair:rgba(147,166,180,.22); --hair-strong:rgba(147,166,180,.42); --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8); --f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --f-body:'Spectral',Georgia,'Times New Roman',serif; --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; --gut:clamp(20px,5vw,72px); --maxw:1280px; } *{box-sizing:border-box} /* Only `clip`. An `overflow-x:hidden` fallback on the root element forces overflow-y to compute as auto, which turns into a nested scroll container and is a known cause of broken scrolling on iOS. Nothing on this page overflows sideways at any width, so the fallback bought nothing. */ html,body{overflow-x:clip} html{scroll-behavior:smooth} body{ margin:0;background:var(--canvas);color:var(--text-primary); font-family:var(--f-body);font-weight:400;font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; /* The page eases in from CSS alone. Visibility is never owned by JavaScript: if a script or a third-party resource stalls, the page still shows. */ animation:pagein .7s var(--ease) both; } @keyframes pagein{from{opacity:0}to{opacity:1}} img{max-width:100%;display:block} a{color:inherit} ::selection{background:rgba(228,86,44,.3)} h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.04;letter-spacing:-.022em;margin:0} p{margin:0} .mono{font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase} .skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:#fff;padding:12px 18px;font-family:var(--f-mono);font-size:12px} .skip:focus{left:12px;top:12px} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} /* ---------- the one fixed environment layer ---------- */ .env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .env-grid{position:absolute;left:-5%;top:-5%;width:110%;height:110%;opacity:.5; animation:envdrift 110s linear -20s infinite alternate} .env-vig{position:absolute;inset:0; background:radial-gradient(ellipse 115% 85% at 50% 42%,rgba(10,16,22,0) 30%,rgba(10,16,22,.82) 100%)} @keyframes envdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2.2%,-1.6%,0)}} /* ---------- nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:120; display:flex;align-items:center;gap:28px; padding:18px var(--gut); transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease); border-bottom:1px solid transparent} .nav.solid{background:rgba(10,16,22,.82);backdrop-filter:blur(14px);border-bottom-color:var(--hair)} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto} .brand svg{width:22px;height:22px;flex:0 0 auto} .brand-txt{font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase} .brand-txt i{font-style:normal;color:var(--text-dim);font-weight:500} .nav-links{display:flex;gap:26px;margin-left:auto;align-items:center} .nav-links a{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; text-decoration:none;color:var(--text-secondary);transition:color .35s var(--ease);position:relative;padding:4px 0} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--line); transition:right .4s var(--ease)} .nav-links a:hover{color:var(--text-primary)} .nav-links a:hover::after{right:0} /* The CTA lives inside .nav-links, so every rule here must out-rank `.nav-links a` (0,1,1) or the button silently loses its padding and colour. flex:0 0 auto also stops it being squeezed until the label overruns. */ .nav-links a.nav-cta{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;text-decoration:none;background:var(--accent);color:#fff; padding:12px 18px;flex:0 0 auto;white-space:nowrap; transition:background .35s var(--ease),transform .35s var(--ease),color .35s var(--ease)} .nav-links a.nav-cta:hover{background:var(--accent-hover);color:#fff;transform:translateY(-1px)} .nav-links a.nav-cta::after{display:none} /* the sliding underline is for text links only */ .nav-links a{white-space:nowrap} @media (max-width:900px){.nav-links a:not(.nav-cta){display:none}} @media (max-width:520px){ .nav{padding:13px 16px;gap:10px} .nav-links a.nav-cta{font-size:10px;letter-spacing:.09em;padding:11px 13px} .brand-txt{font-size:12px;letter-spacing:.14em} .brand-txt i{display:none} .brand svg{width:19px;height:19px} } /* ---------- hero ---------- */ .hero{position:relative;height:800vh;z-index:1} .stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)} .poster{position:absolute;inset:0;background-size:cover;background-position:50% 50%; transform:scale(1.02);transition:opacity .9s var(--ease)} #hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)} .stage.video-ready #hero{opacity:1} .stage.video-ready .poster{opacity:0} .stage.video-failed #hero{display:none} .scrim{position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)} .scrim-2{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(10,16,22,.72) 0%,rgba(10,16,22,0) 22%,rgba(10,16,22,0) 62%,rgba(10,16,22,.55) 100%)} /* loading ring */ .ring{position:absolute;right:var(--gut);bottom:34px;width:34px;height:34px;color:var(--line); transform:rotate(-90deg);opacity:.85;transition:opacity .5s var(--ease)} .stage.video-ready .ring{opacity:0} .ring circle{transition:stroke-dashoffset .18s linear} .cue{position:absolute;right:var(--gut);bottom:30px;display:flex;flex-direction:column;align-items:center;gap:7px; color:var(--text-secondary)} .cue-bar{width:1px;height:36px;background:linear-gradient(180deg,transparent,var(--line)); animation:cuepulse 2.6s var(--ease) -.6s infinite} @keyframes cuepulse{0%,100%{opacity:.25;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}} /* HUD readout, the technical signature in the hero */ .hud{position:absolute;left:var(--gut);bottom:32px;display:flex;gap:10px;align-items:stretch;z-index:4} .chip{background:rgba(8,12,18,.55);border:1px solid rgba(96,140,160,.3);border-radius:3px; backdrop-filter:blur(10px);padding:7px 11px;text-shadow:0 1px 3px rgba(5,5,10,.85); font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary); display:flex;gap:8px;align-items:baseline;white-space:nowrap} .chip b{font-weight:500;color:var(--line);font-variant-numeric:tabular-nums} @media (max-height:620px){.hud,.cue,.ring{display:none}} /* caption bands */ .bands{position:absolute;inset:0;z-index:3} .band{position:absolute;inset:0;opacity:0;pointer-events:none;text-shadow:var(--tshadow); display:flex;padding:clamp(86px,11vh,130px) var(--gut) clamp(90px,12vh,140px)} .band::before{content:"";position:absolute;inset:-4%;pointer-events:none;z-index:-1; opacity:calc(.25 + .75*var(--k,1)); background:radial-gradient(ellipse 74% 62% at var(--sx,50%) var(--sy,50%), rgba(5,8,14,var(--sa,.66)) 0%,rgba(5,8,14,calc(var(--sa,.66)*.67)) 46%,rgba(5,8,14,0) 76%)} .band-in{width:100%;max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;justify-content:flex-end} .b-tl .band-in{align-items:flex-start;justify-content:flex-start} .b-tc .band-in{align-items:center;justify-content:flex-start;text-align:center} .b-bl .band-in{align-items:flex-start;justify-content:flex-end} .b-bc .band-in{align-items:center;justify-content:flex-end;text-align:center} .kick{font-family:var(--f-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase; color:var(--line);margin-bottom:20px;display:flex;align-items:center;gap:12px} .kick::before{content:"";width:26px;height:1px;background:var(--line);display:block} .b-tc .kick,.b-bc .kick{justify-content:center} .line{font-family:var(--f-display);font-weight:600;letter-spacing:-.028em;line-height:1.02; font-size:clamp(2.1rem,5.4vw,4.5rem);max-width:17ch} .line-sm{font-size:clamp(1.7rem,4.1vw,3.3rem);max-width:22ch} .sub{font-family:var(--f-body);font-size:clamp(1rem,1.5vw,1.22rem);color:var(--text-secondary); margin-top:18px;max-width:46ch;line-height:1.6} .b-tc .line,.b-bc .line{margin-left:auto;margin-right:auto} .b-tc .sub,.b-bc .sub{margin-left:auto;margin-right:auto} /* split text spans */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .vis{display:block} .w{display:inline-block;white-space:pre;will-change:transform,opacity} .c{display:inline-block;white-space:pre;will-change:transform,opacity} /* (b) grid snap-align, band 1 */ .e-grid .c{--kc:clamp(0,calc((var(--k,0) - var(--th,0))*2.6),1); opacity:var(--kc); transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))} /* (f) drift-down, band 2 */ .e-drift .w{--kc:clamp(0,calc((var(--k,0) - var(--th,0))*2.8),1); opacity:var(--kc); transform:translateY(calc((1 - var(--kc))*-26px))} /* (c) blur-to-sharp, band 3 */ .e-blur{position:relative} .e-blur .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0));pointer-events:none} .e-blur .sharp{opacity:var(--k,0)} /* (g) approach-from-depth, band 4 */ .e-depth .vis{--kc:clamp(0,calc(var(--k,0)*1.25),1); opacity:var(--kc);transform:scale(calc(.84 + .16*var(--kc)))} /* (e) word rise into staged settle, band 5 */ .e-rise .w{--kc:clamp(0,calc((var(--k,0) - var(--th,0))*3),1); opacity:var(--kc); transform:translateY(calc((1 - var(--kc))*30px))} .e-rise .sub{--ks:clamp(0,calc((var(--k,0) - .6)*3.4),1); opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*16px))} .e-rise .row{--kb:clamp(0,calc((var(--k,0) - .76)*4.6),1); opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))} .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;align-items:center} .b-bc .row{justify-content:center} /* ---------- the title block ---------- The panel an architect signs a drawing in. It carries the closing words over the bright daylight ending, where a soft scrim alone would have meant either unreadable text or muddying the best frame in the film. */ .tblock{position:relative;max-width:min(680px,92%); background:rgba(8,12,18,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid var(--line-muted);border-left:2px solid var(--accent); padding:26px clamp(22px,3vw,38px) 30px; box-shadow:0 26px 70px rgba(4,8,14,.5)} .tblock .line{font-size:clamp(1.85rem,4.4vw,3.5rem);max-width:15ch} .tblock .sub{margin-top:14px;max-width:44ch} .tblock .row{margin-top:26px} .tb-head{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin-bottom:18px; font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--text-dim);text-shadow:none} .tb-head span{position:relative;padding-right:14px} .tb-head span+span::before{content:"";position:absolute;left:-14px;top:50%;width:1px;height:10px; margin-top:-5px;background:var(--hair)} .tb-head span:last-child{color:var(--line);padding-right:0} .tb-mark{position:absolute;left:-7px;top:-7px;width:12px;height:12px;pointer-events:none} .tb-mark::before,.tb-mark::after{content:"";position:absolute;background:var(--accent)} .tb-mark::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)} .tb-mark::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)} @media (max-width:620px){.tblock{max-width:100%;padding:22px 20px 26px}} .btn{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase; text-decoration:none;display:inline-block;padding:15px 26px;border:1px solid transparent; transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease); text-shadow:none;cursor:pointer} .btn-a{background:var(--accent);color:#fff} .btn-a:hover{background:var(--accent-hover);transform:translateY(-2px)} .btn-b{border-color:var(--hair-strong);color:var(--text-primary);background:transparent} .btn-b:hover{border-color:var(--line);color:var(--line);transform:translateY(-2px)} @media (pointer:coarse){.btn,.nav-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}} /* static hero, shown at the five gates */ .static-hero{display:none;position:relative;min-height:100svh;z-index:1; background-size:cover;background-position:50% 42%;overflow:hidden} .static-hero .sh-scrim{position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,16,22,.62) 0%,rgba(10,16,22,.18) 38%,rgba(10,16,22,.72) 100%)} .sh-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto; padding:150px var(--gut) 72px;display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh} .sh-in .line{max-width:15ch} /* ---------- shared section furniture ---------- */ main{position:relative;z-index:1} .sec{position:relative;padding:clamp(86px,11vh,150px) var(--gut)} .in-w{max-width:var(--maxw);margin:0 auto;position:relative} .sec-kick{font-family:var(--f-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase; color:var(--text-dim);display:flex;align-items:center;gap:12px;margin-bottom:26px} .sec-kick b{color:var(--accent);font-weight:500} .sec-kick::after{content:"";height:1px;background:var(--hair);flex:1;max-width:160px} h2.big{font-size:clamp(1.9rem,4.2vw,3.3rem);max-width:24ch;letter-spacing:-.03em} .lede{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--text-secondary);max-width:56ch;margin-top:22px;line-height:1.68} /* the signature: a dimension line that draws itself */ .dim{display:block;width:100%;height:22px;overflow:visible;margin:0} .dim path,.dim line{stroke:var(--line-muted);stroke-width:1;fill:none} .dim .rule{stroke-dasharray:var(--len,1000);stroke-dashoffset:calc(var(--len,1000) * (1 - var(--d,0)))} .dim text{font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;fill:var(--text-dim); opacity:var(--d,0);transition:opacity .4s linear} /* station marker */ .stn{position:absolute;width:16px;height:16px;opacity:0;transform:scale(.5); transition:opacity .7s var(--ease),transform .7s var(--ease)} .in .stn{opacity:1;transform:scale(1)} .stn::before,.stn::after{content:"";position:absolute;background:var(--accent)} .stn::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)} .stn::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)} /* The label reads leftward from the crosshair. Pointing it right pushed the body 13px past the viewport, which is how a decoration quietly breaks a page. */ .stn-l{font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;color:var(--text-dim); position:absolute;right:22px;top:3px;white-space:nowrap;text-align:right} @media (max-width:820px){.stn{display:none}} /* entrance choreography */ .rv{opacity:0;transform:translateY(26px); transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)} .in .rv,.rv.in{opacity:1;transform:none} .in .rv:nth-child(1){transition-delay:0s} .in .rv:nth-child(2){transition-delay:.09s} .in .rv:nth-child(3){transition-delay:.18s} .in .rv:nth-child(4){transition-delay:.27s} .in .rv:nth-child(5){transition-delay:.36s} .in .rv:nth-child(6){transition-delay:.45s} /* retire the stagger once the entrance has played, at matching specificity */ .done .rv:nth-child(1),.done .rv:nth-child(2),.done .rv:nth-child(3), .done .rv:nth-child(4),.done .rv:nth-child(5),.done .rv:nth-child(6){transition-delay:0s!important} /* ---------- A. site first ---------- */ .sf{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(34px,5vw,76px);align-items:end} @media (max-width:900px){.sf{grid-template-columns:1fr}} .sf-img{position:relative;align-self:stretch;min-height:340px;overflow:hidden;background:var(--panel)} .sf-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04); transition:transform 1.6s var(--ease)} .sf-img:hover img{transform:scale(1)} .sf-img figcaption{position:absolute;left:0;bottom:0;right:0;padding:14px 16px; background:linear-gradient(180deg,transparent,rgba(8,12,18,.88)); font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)} .pull{margin-top:44px;padding:30px 0 0;border-top:1px solid var(--hair);position:relative} .pull q{font-family:var(--f-display);font-weight:500;font-size:clamp(1.22rem,2.3vw,1.9rem); letter-spacing:-.02em;line-height:1.24;quotes:none;display:block;max-width:26ch} .contours{position:absolute;right:-10px;top:18px;width:190px;height:120px;opacity:.5;pointer-events:none} .contours path{stroke:var(--line-muted);stroke-width:1;fill:none; stroke-dasharray:var(--len,400);stroke-dashoffset:calc(var(--len,400) * (1 - var(--d,0)))} @media (max-width:620px){.contours{display:none}} /* ---------- B. setting out, the interactive moment ---------- */ .so{background:var(--canvas-2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair); position:relative;overflow:hidden} .so .in-w{display:flex;flex-direction:column;align-items:center;text-align:center} .motes{position:absolute;inset:0;pointer-events:none;opacity:0} .so.in .motes{opacity:1;transition:opacity 2s var(--ease)} .mote{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--line);opacity:.3} .so.in .mote{animation:mote 13s linear infinite} @keyframes mote{0%{transform:translate3d(0,12px,0);opacity:0} 14%{opacity:.42}86%{opacity:.42}100%{transform:translate3d(16px,-108px,0);opacity:0}} .plot{width:100%;max-width:760px;margin:40px auto 0;aspect-ratio:16/9;position:relative;max-height:60vh} .plot svg{width:100%;height:100%;display:block} .pl-grid line{stroke:var(--line);stroke-width:.5; stroke-dasharray:var(--l);stroke-dashoffset:calc(var(--l) * (1 - var(--g,0)));opacity:calc(.1 + .34*var(--g,0))} .pl-cont path{stroke:var(--line);stroke-width:1;fill:none;opacity:calc(.25 + .5*var(--c,0)); stroke-dasharray:var(--l);stroke-dashoffset:calc(var(--l) * (1 - var(--c,0)))} .pl-stake{opacity:var(--s,0);transform-box:fill-box;transform-origin:center; transform:scale(calc(.4 + .6*var(--s,0)))} .pl-stake line{stroke:var(--accent);stroke-width:1.4} .pl-house path{stroke:var(--line);stroke-width:1.6;fill:rgba(95,200,224,.07); opacity:var(--h,0);stroke-dasharray:var(--l);stroke-dashoffset:calc(var(--l) * (1 - var(--h,0)))} .pl-glow{opacity:calc(var(--h,0)*.5)} .hold{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:14px} .hold-btn{position:relative;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase; background:transparent;color:var(--text-primary);border:1px solid var(--hair-strong); padding:17px 34px;cursor:pointer;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none; transition:border-color .4s var(--ease),color .4s var(--ease)} .hold-btn span{position:relative;z-index:2} .hold-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent); transform:scaleX(var(--p,0));transform-origin:left;z-index:1} .hold-btn.on{border-color:var(--accent);color:#fff} .hold-note{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)} .read{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair); width:100%;max-width:760px;margin:34px auto 0} @media (max-width:720px){.read{grid-template-columns:repeat(2,minmax(0,1fr))}} .read div{background:var(--panel);padding:17px 15px;opacity:.32;transition:opacity .6s var(--ease)} .read div.lit{opacity:1} .read dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)} .read dd{margin:7px 0 0;font-family:var(--f-mono);font-size:clamp(1rem,2vw,1.3rem);font-weight:500; color:var(--line);font-variant-numeric:tabular-nums} .so-done{margin-top:30px;font-family:var(--f-display);font-weight:500;font-size:clamp(1.05rem,2vw,1.45rem); letter-spacing:-.015em;opacity:0;transform:translateY(12px); transition:opacity .8s var(--ease),transform .8s var(--ease)} .so-done.lit{opacity:1;transform:none} /* ---------- C. what we do ---------- */ .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);margin-top:54px} @media (max-width:900px){.cards{grid-template-columns:1fr}} .card{background:var(--panel);border:1px solid var(--hair);position:relative;overflow:hidden; transition:border-color .5s var(--ease),transform .5s var(--ease)} .card:hover{border-color:var(--line-muted);transform:translateY(-4px)} .card-im{aspect-ratio:4/3;overflow:hidden;background:var(--panel-2)} .card-im img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.5s var(--ease)} .card:hover .card-im img{transform:scale(1)} .card-bd{padding:26px 24px 30px} .card-n{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .card h3{font-size:1.3rem;margin:14px 0 12px;letter-spacing:-.018em} .card p{color:var(--text-secondary);font-size:.97rem;line-height:1.62} .card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent);opacity:0;transition:opacity .5s var(--ease)} .card:hover::after{opacity:.6} /* ---------- D. how we work ---------- */ .proc{background:var(--canvas-2);border-top:1px solid var(--hair)} .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,34px);margin-top:18px} @media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.steps{grid-template-columns:1fr}} .step{padding-top:26px;position:relative} .step-n{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--accent);display:block} .step h3{font-size:1.12rem;margin:15px 0 11px;letter-spacing:-.012em} .step p{color:var(--text-secondary);font-size:.94rem;line-height:1.6} .step::before{content:"";position:absolute;left:0;top:0;width:0;height:1px;background:var(--line-muted); transition:width .9s var(--ease)} .in .step::before{width:100%} .in .step:nth-child(2)::before{transition-delay:.12s} .in .step:nth-child(3)::before{transition-delay:.24s} .in .step:nth-child(4)::before{transition-delay:.36s} .step-dot{position:absolute;left:0;top:-3px;width:7px;height:7px;background:var(--accent); transform:scale(0) rotate(45deg);transition:transform .6s var(--ease)} .in .step-dot{transform:scale(1) rotate(45deg)} .in .step:nth-child(2) .step-dot{transition-delay:.12s} .in .step:nth-child(3) .step-dot{transition-delay:.24s} .in .step:nth-child(4) .step-dot{transition-delay:.36s} /* ---------- E. fees ---------- */ .fee-wrap{display:grid;grid-template-columns:.95fr 1.1fr;gap:clamp(34px,5vw,72px);align-items:start} @media (max-width:900px){.fee-wrap{grid-template-columns:1fr}} .fees{border:1px solid var(--hair);background:var(--panel)} .fee{display:flex;gap:18px;align-items:baseline;justify-content:space-between; padding:22px 24px;border-bottom:1px solid var(--hair);flex-wrap:wrap} .fee:last-child{border-bottom:0} .fee-l{min-width:0} .fee-l b{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--text-dim);font-weight:400} .fee-l span{display:block;font-family:var(--f-display);font-weight:500;font-size:1.05rem;margin-top:7px; letter-spacing:-.012em} .fee-v{font-family:var(--f-mono);font-size:.92rem;color:var(--line);white-space:nowrap;text-align:right} .slot{color:var(--accent);border-bottom:1px dashed rgba(228,86,44,.55);padding-bottom:1px} .fee-note{margin-top:22px;font-size:.95rem;color:var(--text-secondary)} /* ---------- F. faq ---------- */ .faq{max-width:820px;margin-top:46px} .q{border-bottom:1px solid var(--hair)} .q button{width:100%;background:none;border:0;color:inherit;text-align:left;cursor:pointer; padding:24px 46px 24px 0;position:relative;font-family:var(--f-display);font-weight:500; font-size:clamp(1.02rem,1.8vw,1.22rem);letter-spacing:-.013em;line-height:1.35} .q button::after,.q button::before{content:"";position:absolute;right:8px;top:50%;background:var(--line); transition:transform .45s var(--ease),opacity .45s var(--ease)} .q button::after{width:13px;height:1px;margin-top:-.5px} .q button::before{width:1px;height:13px;margin-top:-6.5px;right:14px} .q[aria-expanded=true] button::before,.q.open button::before{transform:scaleY(0)} .q-a{overflow:hidden;height:0;transition:height .5s var(--ease)} .q-a p{padding:0 0 26px;color:var(--text-secondary);max-width:62ch;font-size:1rem;line-height:1.7} /* ---------- G. clients ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:50px} @media (max-width:900px){.quotes{grid-template-columns:1fr}} .quote{border:1px solid var(--hair);padding:28px 26px;background:var(--panel);position:relative} .quote:nth-child(2){transform:translateY(22px)} @media (max-width:900px){.quote:nth-child(2){transform:none}} .quote .mono{color:var(--text-dim);display:block;margin-bottom:16px} .quote q{quotes:none;display:block;font-family:var(--f-display);font-weight:500;font-size:1.06rem; line-height:1.42;letter-spacing:-.014em;color:var(--text-dim);min-height:5.4em} .quote footer{margin-top:18px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--accent)} /* ---------- H. consult ---------- */ .consult{background:var(--canvas-2);border-top:1px solid var(--hair)} .consult .in-w{max-width:760px;text-align:center} .consult .lede{margin-left:auto;margin-right:auto} form{margin-top:46px;text-align:left;display:grid;gap:18px} .f2{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:620px){.f2{grid-template-columns:1fr}} label{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--text-dim);margin-bottom:9px} input,select,textarea{width:100%;background:rgba(8,12,18,.6);border:1px solid var(--hair); color:var(--text-primary);font-family:var(--f-body);font-size:16px;padding:14px 15px; transition:border-color .35s var(--ease),background .35s var(--ease)} input:hover,select:hover,textarea:hover{border-color:var(--hair-strong)} input:focus,select:focus,textarea:focus{border-color:var(--line);outline:none;background:rgba(8,12,18,.9)} textarea{resize:vertical;min-height:110px} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--line) 50%),linear-gradient(135deg,var(--line) 50%,transparent 50%); background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .f-sub{display:flex;flex-direction:column;gap:13px;align-items:flex-start;margin-top:6px} .f-note{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--text-dim);line-height:1.7;text-transform:none} .ok{display:none;border:1px solid var(--line-muted);background:rgba(95,200,224,.06);padding:30px 26px;margin-top:46px;text-align:left} .ok.show{display:block;animation:okin .7s var(--ease) both} @keyframes okin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .ok b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.3rem;margin-bottom:10px;letter-spacing:-.018em} .ok p{color:var(--text-secondary)} /* ---------- footer ---------- */ footer.site{border-top:1px solid var(--hair);padding:56px var(--gut) 40px;position:relative;z-index:1} .f-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px} @media (max-width:820px){.f-in{grid-template-columns:1fr 1fr}} @media (max-width:520px){.f-in{grid-template-columns:1fr}} .f-col h4{font-family:var(--f-mono);font-weight:400;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--text-dim);margin-bottom:16px} .f-col a,.f-col p{display:block;color:var(--text-secondary);text-decoration:none;font-size:.95rem; margin-bottom:9px;transition:color .3s var(--ease)} .f-col a:hover{color:var(--line)} .f-brand svg{width:26px;height:26px;margin-bottom:14px} .f-brand .brand-txt{font-size:15px;display:block;margin-bottom:14px} .f-tag{color:var(--text-dim);font-size:.92rem;max-width:34ch} .f-base{max-width:var(--maxw);margin:44px auto 0;padding-top:22px;border-top:1px solid var(--hair); display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap} .f-base p{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--text-dim);margin:0;max-width:62ch;line-height:1.9} /* ---------- reduced motion, honoured completely ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important} body{opacity:1!important} .rv{opacity:1;transform:none} .stn{opacity:1;transform:scale(1)} .step::before{width:100%} .step-dot{transform:scale(1) rotate(45deg)} .sf-img img,.card-im img{transform:scale(1)} .quote:nth-child(2){transform:translateY(22px)} .dim .rule{stroke-dashoffset:0} .dim text{opacity:1} .contours path{stroke-dashoffset:0} .so-done{opacity:1;transform:none} .read div{opacity:1} .motes{display:none} } @media (prefers-reduced-motion:reduce) and (max-width:900px){ .quote:nth-child(2){transform:none} } body.pinned .rv{opacity:1;transform:none} body.pinned .dim .rule{stroke-dashoffset:0} body.pinned .dim text{opacity:1} body.pinned .contours path{stroke-dashoffset:0} body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important} /* ---------- the five static-hero gates ---------- */ @media (orientation:landscape) and (pointer:coarse) and (max-height:560px){.hero{display:none}.static-hero{display:block}} @media (prefers-reduced-motion:reduce){.hero{display:none}.static-hero{display:block}} /* ---------- the portrait hero ---------- A landscape film cover-cropped into a portrait screen throws most of the frame away. So on narrow screens the film sits as a plate in the upper area, the way a drawing sits on a sheet, and the words read underneath it. Nothing is cropped. */ @media (max-width:820px) and (orientation:portrait){ .hero{height:620vh} #hero{object-fit:contain;object-position:50% 22%} .poster{background-size:contain;background-position:50% 22%;background-repeat:no-repeat;transform:none} .stage{background:var(--canvas)} .band{padding:0 var(--gut) 15vh} .band .band-in,.b-tl .band-in,.b-tc .band-in,.b-bl .band-in,.b-bc .band-in{ justify-content:flex-end;align-items:flex-start;text-align:left} /* one bottom-anchored scrim for every band: the words are always low now */ .band::before{inset:0;opacity:1; background:linear-gradient(180deg,rgba(5,8,14,0) 52%,rgba(5,8,14,.80) 72%,rgba(5,8,14,.95) 100%)} .band .line{font-size:clamp(1.72rem,7.4vw,2.6rem);max-width:14ch} .band .line-sm{font-size:clamp(1.55rem,6.4vw,2.2rem);max-width:16ch} .band .sub{font-size:1rem;max-width:34ch;margin-top:12px} .band .kick{margin-bottom:14px} .band .row{margin-top:22px} .tblock{max-width:100%;background:rgba(8,12,18,.72);padding:20px 18px 24px} .tblock .line{font-size:clamp(1.72rem,7.4vw,2.5rem)} .hud{display:none} .ring{bottom:auto;top:calc(22% + 30vw);right:18px} } /* ============================================================ INNER PAGES (about, projects, contact) Same palette, type and motion system as the home page. ============================================================ */ .page-head{position:relative;padding:clamp(120px,17vh,190px) var(--gut) clamp(52px,8vh,86px); border-bottom:1px solid var(--hair);overflow:hidden} .page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,var(--accent) 0%,var(--line-muted) 18%,transparent 60%)} .ph-in{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2} .page-head h1{font-size:clamp(2.2rem,5.6vw,4.1rem);letter-spacing:-.032em;max-width:17ch} .page-head .lede{max-width:52ch} .ph-bg{position:absolute;inset:0;z-index:0;opacity:.20; background-size:cover;background-position:50% 46%; -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%); mask-image:linear-gradient(90deg,transparent 30%,#000 100%)} .ph-scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,var(--canvas) 22%,rgba(10,16,22,.55) 70%,rgba(10,16,22,.35) 100%)} /* stage strip, used on the home page and the projects page */ .stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin-top:50px} @media (max-width:900px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.stages{grid-template-columns:1fr}} .stg{position:relative;border:1px solid var(--hair);background:var(--panel);overflow:hidden; transition:border-color .5s var(--ease),transform .5s var(--ease)} .stg:hover{border-color:var(--line-muted);transform:translateY(-4px)} .stg-im{aspect-ratio:16/9;overflow:hidden;background:var(--panel-2)} .stg-im img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease)} .stg:hover .stg-im img{transform:scale(1)} .stg-bd{padding:18px 18px 22px} .stg-n{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .stg h3{font-size:1.04rem;margin:10px 0 8px;letter-spacing:-.012em} .stg p{color:var(--text-secondary);font-size:.92rem;line-height:1.6} /* long-form project entry */ .proj{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center; padding:clamp(40px,6vh,72px) 0;border-bottom:1px solid var(--hair)} .proj:nth-child(even) .proj-im{order:2} @media (max-width:860px){.proj{grid-template-columns:1fr}.proj:nth-child(even) .proj-im{order:0}} .proj-im{overflow:hidden;border:1px solid var(--hair);background:var(--panel)} .proj-im img{width:100%;display:block;transform:scale(1.03);transition:transform 1.5s var(--ease)} .proj-im:hover img{transform:scale(1)} .proj h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:14px 0 14px;max-width:18ch} .proj p{color:var(--text-secondary);line-height:1.7;max-width:52ch} /* facts row */ .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair); border:1px solid var(--hair);margin-top:44px} @media (max-width:720px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}} .facts div{background:var(--panel);padding:20px 18px} .facts dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)} .facts dd{margin:9px 0 0;font-family:var(--f-display);font-weight:500;font-size:1.05rem;letter-spacing:-.01em} /* placeholder card for projects the studio has not supplied yet */ .ghost{border:1px dashed rgba(228,86,44,.42);background:rgba(228,86,44,.04); display:flex;align-items:center;justify-content:center;text-align:center; padding:44px 26px;min-height:200px} .ghost p{color:var(--accent);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;line-height:2;max-width:26ch} /* contact page split */ .cx{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,70px);align-items:start} @media (max-width:900px){.cx{grid-template-columns:1fr}} .cx form{margin-top:0} .cx-side{border:1px solid var(--hair);background:var(--panel);padding:28px 26px} .cx-side h3{font-size:1.1rem;margin-bottom:18px;letter-spacing:-.014em} .cx-row{padding:15px 0;border-bottom:1px solid var(--hair)} .cx-row:last-child{border-bottom:0} .cx-row dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)} .cx-row dd{margin:7px 0 0;color:var(--text-primary)} .steps-min{counter-reset:s;margin-top:26px} .steps-min li{list-style:none;position:relative;padding:0 0 20px 40px;color:var(--text-secondary);line-height:1.65} .steps-min li::before{counter-increment:s;content:"0" counter(s);position:absolute;left:0;top:1px; font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--accent)} .steps-min li b{display:block;color:var(--text-primary);font-family:var(--f-display);font-weight:500; font-size:1.02rem;margin-bottom:5px;letter-spacing:-.01em} /* spacing corrections found in the page renders */ .cx form{margin-top:34px} .cx .big{margin-bottom:0} .facts-sec{padding-bottom:0} .proj:first-child{padding-top:0} .proj:last-child{border-bottom:0} .page-head + .sec{padding-top:clamp(56px,7vh,92px)}