/* FORM DESIGN — Public site Production baseline v14 Public layout, typography and motion styles only. */ /* ========================================================= FORM DESIGN — formdesign.io Single-file build: public site + client area + staff area. Sections are marked with banner comments. Search for "== " to jump between them. ========================================================= */ /* == Tokens ============================================== */ :root{ --paper:#F4F4F1; /* page ground */ --surface:#FFFFFF; /* raised panels, portal cards */ --muted:#EAEAE5; /* quiet fills, table heads */ --ink:#231F20; /* brand black (from the logo files) */ --ink-2:#615D5C; /* secondary text */ --ink-3:#9A9593; /* tertiary text, placeholders */ --line:rgba(35,31,32,.18); --line-strong:rgba(35,31,32,.55); --ok:#2E7D5B; --warn:#B7791F; --bad:#B3261E; --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"DM Mono","SFMono-Regular",Menlo,Consolas,monospace; --max:1440px; --gutter:clamp(1.25rem,4vw,4.5rem); --ease:cubic-bezier(.22,.61,.36,1); color-scheme:light; } /* == Base ================================================ */ *,*::before,*::after{box-sizing:border-box} [hidden]{display:none!important} /* The nav is sticky, so a jump to #services would land with the heading underneath it. scroll-padding on the scrolling element offsets every anchor jump by the bar's height — nav (4.25rem) plus a little air. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:1.0625rem;line-height:1.6; font-variation-settings:"wdth" 100; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} input,select,textarea{font:inherit;color:inherit} svg{display:block} :focus-visible{outline:2px solid var(--ink);outline-offset:3px} /* on the dark sections the focus ring is the light ink, so it is always visible (WCAG 2.4.7) */ #site :is(.cap-chapter--2,.cap-chapter--4,.cap-chapter--6,.services-intro,.contact-editorial) :focus-visible{outline-color:#f4f3ee} .skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:100} .skip:focus{left:1rem;top:1rem} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .wordmark{height:1.125rem;width:auto;fill:currentColor} .wordmark path{fill:currentColor} .lockup{width:100%;height:auto} .lockup path{fill:currentColor} .lockup line{stroke:currentColor;stroke-width:1} /* == Type roles ========================================== */ .eyebrow{ font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-2);line-height:1.4; } .display{ font-weight:300;font-variation-settings:"wdth" 100; font-size:clamp(2.75rem,6.2vw,6.25rem);line-height:1.02;letter-spacing:-.022em; text-wrap:balance; } .h2{ font-weight:400;font-size:clamp(1.75rem,3.1vw,2.875rem);line-height:1.12;letter-spacing:-.018em; text-wrap:balance;max-width:22ch; } .h3{font-weight:500;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em} .lead{font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.5;color:var(--ink-2);max-width:40ch} .prose{max-width:62ch} .prose p+p{margin-top:1em} .statement{ font-weight:300;font-size:clamp(1.375rem,2.4vw,2.125rem);line-height:1.3;letter-spacing:-.015em; max-width:34ch;text-wrap:pretty; } .mono{font-family:var(--mono);font-size:.8125rem;letter-spacing:.02em} .num{font-variant-numeric:tabular-nums} .link{ display:inline-block;border-bottom:1px solid var(--line-strong);padding-bottom:.1em; transition:border-color .2s var(--ease); } .link:hover{border-color:var(--ink)} /* == Buttons ============================================= */ .btn{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase; padding:.85rem 1.25rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper); line-height:1;white-space:nowrap; transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease); } .btn:hover{background:transparent;color:var(--ink)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)} .btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn--sm{padding:.6rem .9rem;font-size:.6875rem} .btn--quiet{border-color:transparent;background:transparent;color:var(--ink-2);padding-inline:.5rem} .btn--quiet:hover{color:var(--ink);background:var(--muted);border-color:transparent} .btn[disabled]{opacity:.45;cursor:not-allowed} /* == Navigation ========================================== */ .nav{ position:sticky;top:0;z-index:50; background:color-mix(in srgb,var(--paper) 86%,transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .nav__in{display:flex;align-items:center;gap:2.5rem;height:4.25rem} .nav__brand{display:inline-flex;align-items:center;color:var(--ink)} .nav__links{display:flex;gap:2rem;margin-left:auto} .nav__links a,.mobile-menu a{ font-size:.9375rem;letter-spacing:-.005em;position:relative;padding:.25rem 0; } .nav__links a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink); transition:right .25s var(--ease); } .nav__links a:hover::after{right:0} .nav__auth{display:flex;gap:.5rem} .nav__menu{display:none;margin-left:auto;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase} .mobile-menu{border-top:1px solid var(--line);padding:1rem var(--gutter) 1.5rem;display:grid;gap:.75rem} .mobile-menu a:not(.btn){font-size:1.375rem;font-weight:300} /* the login buttons exactly as on desktop (.nav__auth): side by side, small mono, ghost */ .mobile-menu__auth{display:flex;gap:.5rem;margin-top:.75rem} .mobile-menu__auth .btn{padding:.6rem .9rem;font-size:.6875rem;letter-spacing:.12em} @media (max-width:900px){ .nav__links,.nav__auth{display:none} .nav__menu{display:inline-block} } /* == Sections (public) =================================== */ .section{padding-block:clamp(4rem,9vw,8.5rem);border-top:1px solid var(--line)} .row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:clamp(1.5rem,4vw,5rem);row-gap:2rem;align-items:start} .row > .eyebrow{padding-top:.4rem} .stack{display:grid;gap:clamp(1.25rem,2.5vw,2.25rem)} @media (max-width:820px){.row{grid-template-columns:1fr;row-gap:1.25rem}} /* Hero — the wind-tunnel lines run the full width behind the copy, quieter where the words are; on small screens they sit below the copy */ .hero{position:relative;overflow:hidden;display:flex;flex-direction:column;padding-block:clamp(5rem,12vw,10.5rem) clamp(4rem,9vw,7.5rem)} .hero__in{position:relative;z-index:1;display:grid;gap:2rem;width:100%} .hero__title{max-width:14ch} .hero__lead{max-width:44ch} .hero__actions{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;margin-top:.5rem} @media (max-width:820px), (max-height:520px){ /* phones: the lines run behind the copy here too, faint behind the words, with the car in the space left beneath them */ .hero{padding-bottom:clamp(14rem,58vw,20rem)} } /* Client strip — the logos in a slow loop under the hero; built from the clients list, pauses on hover */ .strip{ position:relative;overflow:hidden;border-top:1px solid var(--line);padding:1.75rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } .strip__track{display:flex;width:max-content;animation:strip var(--strip-dur,70s) linear infinite;will-change:transform} .strip:hover .strip__track,.strip:focus-within .strip__track{animation-play-state:paused} .strip__set{display:flex;align-items:center;gap:clamp(3.25rem,6.5vw,6rem);padding-right:clamp(3.25rem,6.5vw,6rem)} .strip__set span{display:grid;place-items:center;height:2.6rem} .strip__logo{display:block;height:2rem;width:auto;max-width:9.5rem;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.8;transition:opacity .3s,filter .3s} /* the same treatment as the clients section */ .strip__set span:hover .strip__logo{filter:none;opacity:1} .strip__set span[data-logo="ford"] .strip__logo{height:2.8rem} .strip__set span[data-logo="gm"] .strip__logo,.strip__set span[data-logo="lotus"] .strip__logo,.strip__set span[data-logo="nissan"] .strip__logo,.strip__set span[data-logo="faraday-future"] .strip__logo{height:2.4rem} .strip__set span[data-logo="bugatti"] .strip__logo{height:2.1rem} .strip__set span[data-logo="gac"] .strip__logo{height:1.7rem} .strip__set span[data-logo="karma"] .strip__logo{height:1.6rem} .strip__set span[data-logo="slate"] .strip__logo{height:1.35rem} .strip__set span[data-logo="makkina"] .strip__logo{height:.95rem} .strip__set span[data-logo="santana"] .strip__logo{height:.9rem} @keyframes strip{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.strip__track{animation:none}} @media (max-width:640px){.strip{padding:1.25rem 0}.strip__set{gap:2.5rem;padding-right:2.5rem}.strip__set span{height:2.2rem}.strip__logo{transform:scale(.85)}} /* Services */ .caps{border-top:1px solid var(--line)} .caps__item{ display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr); column-gap:clamp(1.5rem,4vw,5rem);row-gap:.75rem; padding-block:2rem;border-bottom:1px solid var(--line); } .caps__name{font-weight:500;font-size:clamp(1.25rem,1.9vw,1.625rem);letter-spacing:-.012em;line-height:1.2} .caps__span{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:.5rem} .caps__text{color:var(--ink-2);max-width:48ch} .caps__tags{display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-content:start} .caps__tags span{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase; border:1px solid var(--line);padding:.35rem .55rem;color:var(--ink-2) } @media (max-width:820px){.caps__item{grid-template-columns:1fr}} /* Program line (this is a real sequence, so it reads left to right) */ .program{margin-top:.5rem} .program__line{ display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink);padding-top:1rem; } .program__line li{position:relative;padding-right:1rem} .program__line li::before{ content:"";position:absolute;left:0;top:calc(-1rem - 1px);width:1px;height:1.1rem;background:var(--ink) } .program__phase{font-weight:500;font-size:1rem;letter-spacing:-.01em} .program__note{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:.25rem} .program__bracket{ margin-top:2.25rem;border:1px solid var(--line-strong);border-top:0;height:.9rem;position:relative } .program__bracket span{ position:absolute;left:50%;top:100%;transform:translate(-50%,.6rem); font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--ink-2) } @media (max-width:820px){ .program__line{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--ink);padding:0 0 0 1.25rem;gap:1.25rem} .program__line li::before{left:calc(-1.25rem - 1px);top:.35rem;width:1.1rem;height:1px} .program__bracket{display:none} } /* Clients — logo wall. Each cell shows the client's SVG (embedded from logos/.svg) and falls back to the name set in type if the image cannot load. */ /* Four to a row, brick-bonded: every second row steps across by half a cell, so no logo sits directly under the one above. Nine columns, each logo two of them; only the first logo of an offset row is placed by hand. */ .clients__list{ display:grid;grid-template-columns:repeat(8,minmax(0,1fr));justify-items:center;align-items:center; gap:clamp(2rem,4vw,3.25rem) clamp(1rem,2vw,2rem); border-top:1px solid var(--line);padding-top:clamp(2.5rem,5vw,4rem); } .clients__list li{grid-column:span 2} /* 14 logos in rows of four and three, each row of three centred under the four: every logo the same distance from its neighbours */ .clients__list li:nth-child(7n+5){grid-column:2/span 2} .clients__list li{display:grid;place-items:center;width:100%;max-width:14rem;height:4.5rem;text-align:center} .clients__name{ font-weight:500;font-variation-settings:"wdth" 110;text-transform:uppercase;letter-spacing:.05em; font-size:clamp(.95rem,1.25vw,1.15rem);line-height:1.25; } .clients__logo{display:none;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; filter:grayscale(1) contrast(1.05);opacity:.8;transition:filter .25s var(--ease),opacity .25s var(--ease)} li.has-logo .clients__logo{display:block} li.has-logo .clients__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} li.has-logo:hover .clients__logo{filter:none;opacity:1} /* per-logo balance: emblems sit at a smaller height, long wordmarks get width */ .clients__list li[data-logo="ford"] .clients__logo{max-height:4.5rem} .clients__list li[data-logo="gm"] .clients__logo,.clients__list li[data-logo="lotus"] .clients__logo{max-height:3.4rem} .clients__list li[data-logo="bugatti"] .clients__logo{max-height:3.2rem} .clients__list li[data-logo="ruf"] .clients__logo{max-height:3rem} .clients__list li[data-logo="slate"] .clients__logo{max-height:2rem} .clients__list li[data-logo="gac"] .clients__logo{max-height:2.5rem} .clients__list li[data-logo="nissan"] .clients__logo,.clients__list li[data-logo="faraday-future"] .clients__logo{max-height:3.6rem} .clients__list li[data-logo="makkina"] .clients__logo{max-height:1.4rem} .clients__list li[data-logo="santana"] .clients__logo{max-height:1.3rem} @media (max-width:640px){.clients__list{grid-template-columns:repeat(2,minmax(0,1fr))}.clients__list li{height:3.5rem;max-width:10rem;grid-column:auto}.clients__list li:nth-child(7n+5){grid-column:auto}} /* The startups Form Ventures has put its resources into — a quiet row, same treatment as the clients section, sized down. */ .ventures__list{margin-top:.5rem} .ventures__list .eyebrow{margin-bottom:1.25rem} .logos--sm{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-items:start; gap:1.5rem clamp(1rem,2.5vw,2.25rem); border-top:1px solid var(--line);padding-top:1.75rem; } .logos--sm li{display:grid;place-items:center;width:100%;height:3rem;text-align:center} .logos--sm .clients__name{font-size:.95rem} .logos--sm .clients__logo{max-height:2.1rem} .logos--sm li[data-logo="powuh"] .clients__logo{max-height:2.5rem} .logos--sm li[data-logo="santana"] .clients__logo{max-height:.95rem} .logos--sm li[data-logo="fuhl"] .clients__logo{max-height:3rem} @media (max-width:640px){.logos--sm{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem}.logos--sm li{height:2.6rem}} /* Jobs — the index, and a role in full */ .jobs__filters{display:flex;gap:1.25rem;align-items:end;flex-wrap:wrap;margin-bottom:.5rem} .jobs__filter{display:grid;gap:.35rem} .jobs__filter span{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)} .jobs__filter select{border:1px solid var(--line-strong);background:var(--surface);padding:.5rem .6rem;font:inherit;font-size:.9rem;border-radius:0} .role--link{text-decoration:none;color:inherit;transition:border-color .2s var(--ease),background .2s var(--ease)} .role--link:hover{background:color-mix(in srgb,var(--muted) 55%,transparent)} .role--link:hover .btn{border-color:var(--ink)} .jobgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,17rem);gap:clamp(2rem,4vw,4rem);align-items:start} .jobsec{margin-top:2rem} .jobsec__title{font-size:1.05rem;font-weight:500;letter-spacing:-.005em;margin-bottom:.85rem} .jobsec__list{list-style:none;display:grid;gap:.6rem} .jobsec__list li{position:relative;padding-left:1.4rem;color:var(--ink-2);line-height:1.6} .jobsec__list li::before{content:"";position:absolute;left:0;top:.7em;width:.6rem;height:1px;background:var(--line-strong)} .jobsec__text{color:var(--ink-2);line-height:1.6;max-width:60ch} .jobfacts{position:sticky;top:5rem} .jobfacts .dl{grid-template-columns:1fr;row-gap:0;column-gap:0} .jobfacts .dl dt{padding-top:1rem} .jobfacts .dl dd{padding-bottom:1rem;border-bottom:1px solid var(--line);margin-top:.3rem;overflow-wrap:normal} .jobfacts .dl dt:first-of-type{padding-top:0} .jobfacts .dl dd:last-of-type{border-bottom:0;padding-bottom:0} @media (max-width:900px){.jobgrid{grid-template-columns:1fr}.jobfacts{position:static}} /* Ventures */ .ventures{background:var(--surface)} .ventures__lockup{max-width:17.6rem;color:var(--ink);display:block} .ventures__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:clamp(1.5rem,4vw,5rem);row-gap:2.5rem;align-items:start} @media (max-width:820px){.ventures__grid{grid-template-columns:1fr}.ventures__lockup{max-width:12.8rem}} /* Contact form */ .form{display:grid;gap:1.5rem;max-width:40rem} .field{display:grid;gap:.5rem} .field label{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)} .field input,.field textarea,.field select{ width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-strong); padding:.7rem 0;border-radius:0;outline:none;transition:border-color .2s var(--ease) } .field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--ink)} .field textarea{min-height:7rem;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:var(--ink-3)} .form__foot{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap} .form__note{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);letter-spacing:.02em} /* Footer as a drawing-sheet title block */ .footer{border-top:1px solid var(--ink);padding-block:3rem 2.5rem} .footer__top{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:clamp(1.5rem,4vw,5rem);row-gap:2rem;align-items:start} .footer__wordmark{height:1.9rem;color:var(--ink)} .footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem} .footer__cols :is(h4,.footer__h){font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.75rem;font-weight:400} .footer__cols li{padding:.2rem 0} .footer__cols a{border-bottom:1px solid transparent;transition:border-color .2s var(--ease)} .footer__cols a:hover{border-color:var(--ink)} .footer__legal{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(1.5rem,4vw,4rem);row-gap:1rem;align-items:start;margin-top:1.25rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-2)} .footer__rights{display:grid;gap:.4rem} /* the legal links: to the right of the copyright lines, in two columns */ .footer__legal-links{display:grid;grid-template-columns:repeat(2,auto);column-gap:clamp(1.5rem,3vw,3rem);row-gap:.4rem;justify-items:start;text-align:left} .footer__legal-links a{color:var(--ink-2);border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)} .footer__legal-links a:hover{color:var(--ink);border-color:var(--ink)} @media (max-width:700px){ .footer__legal{grid-template-columns:1fr} .footer__legal-links{grid-template-columns:repeat(2,minmax(0,1fr))} } .footer__rights > span:last-child{max-width:82ch;line-height:1.6;color:var(--ink-2)} /* ink-2 for contrast (ink-3 was 2.7:1) */ @media (max-width:820px){ .footer__top{grid-template-columns:1fr} .footer__cols{grid-template-columns:1fr 1fr} } /* == Production layout guards ============================= */ html,body{width:100%;max-width:100%;overflow-x:clip} #site{width:100%;max-width:100%;overflow-x:clip} #site img,#site video,#site canvas,#site svg{max-width:100%} /* Navigation brand: intentionally restrained. */ #site .topbar .wordmark{height:.95rem;width:auto} /* == Public editorial system ============================= */ /* Consolidated public-site design system. Source order is preserved. */ /* ============================================================ V10-A — public-site art direction branch Portal/app UI intentionally left untouched. ============================================================ */ #site { --v10a-black:#080808; --v10a-white:#f7f6f2; } #site .wrap{width:min(100% - clamp(2rem,5vw,6rem),1580px);max-width:none} #site .section{padding-block:clamp(6rem,12vw,12rem)} #site .eyebrow{font-size:.66rem;letter-spacing:.18em} #site .topbar{background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)} #site .topbar .wordmark{transition:transform .35s var(--ease)} #site .topbar:hover .wordmark{transform:scale(1.025)} /* Hero: one thought, lots of air */ #site .hero--editorial{min-height:calc(100svh - 68px);justify-content:center;padding-block:clamp(7rem,12vh,11rem) clamp(6rem,10vh,9rem);border-bottom:0} #site .hero--editorial .hero__in{gap:clamp(1.5rem,3vh,2.6rem)} #site .hero__title--xl{font-size:clamp(4.1rem,8.9vw,9.6rem);line-height:.89;letter-spacing:-.058em;max-width:10.2ch;font-weight:320} #site .hero__lead--quiet{font-size:clamp(1rem,1.35vw,1.32rem);line-height:1.55;max-width:46ch;color:color-mix(in srgb,var(--ink) 65%,transparent)} #site .hero__actions{margin-top:0} #site .hero__actions .btn{padding:.95rem 1.35rem} #site .hero__proof{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;margin-top:clamp(1rem,2vh,2rem);font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);max-width:64rem} #site .hero__proof span::before{content:'—';margin-right:.55rem;color:var(--line-strong)} #site .strip{padding:1.25rem 0;border-top:0;border-bottom:1px solid var(--line);opacity:.72} #site .strip__logo{opacity:.58;filter:grayscale(1) contrast(.9)} /* Studio: written like a film script, not a brochure */ #site .studio-story{background:var(--v10a-black);color:var(--v10a-white);border-top:0;min-height:100svh;display:flex;align-items:center} #site .studio-story .row{grid-template-columns:minmax(7rem,2fr) minmax(0,10fr)} #site .studio-story .eyebrow{color:rgba(247,246,242,.5)} #site .story-title{font-size:clamp(4.5rem,9vw,10rem);font-weight:300;letter-spacing:-.055em;line-height:.9;max-width:9ch;margin-bottom:clamp(3rem,7vw,7rem)} #site .studio-story .prose{max-width:70rem} #site .story-line{font-size:clamp(1.15rem,1.9vw,1.75rem);line-height:1.45;color:rgba(247,246,242,.63);max-width:45ch;margin-top:0!important;padding-block:.35rem} #site .story-line--hit{font-size:clamp(2.1rem,5vw,5.4rem);line-height:.96;letter-spacing:-.04em;color:var(--v10a-white);max-width:none;padding-block:.25rem} #site .story-line--turn{margin-top:clamp(2rem,4vw,4rem)!important;color:var(--v10a-white);font-size:clamp(1.45rem,2.5vw,2.5rem);max-width:30ch} #site .story-line--close{margin-top:clamp(2.5rem,5vw,5rem)!important;color:var(--v10a-white);font-size:clamp(1.7rem,3.2vw,3.4rem);line-height:1.12;max-width:28ch} /* Services: six editorial chapters */ /* No light gap between the client strip and the dark services intro: the intro carries its own padding. */ #site .services-editorial{padding-bottom:0} #site #services.services-editorial{padding-top:0} #site .services-intro{margin-bottom:clamp(5rem,10vw,10rem)!important} #site .services-intro .h2{font-size:clamp(2.6rem,5.2vw,5.9rem);line-height:.98;letter-spacing:-.045em;max-width:13ch;font-weight:350} #site .caps--editorial{border-top:0;margin-inline:0;width:100%;max-width:100%} #site .cap-chapter{display:grid;grid-template-columns:minmax(12rem,3fr) minmax(0,9fr);column-gap:clamp(2rem,7vw,9rem);min-height:72svh;align-items:center;padding:clamp(5rem,10vw,10rem) clamp(1rem,2vw,2rem);border-top:1px solid var(--line);border-bottom:0} #site .cap-meta{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;padding-top:.5rem} #site .cap-num{font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;color:var(--ink-2);margin-bottom:clamp(2rem,5vw,5rem)} #site .cap-meta .caps__name{font-size:clamp(1rem,1.35vw,1.25rem);letter-spacing:0;font-weight:500} #site .cap-meta .caps__span{font-size:.63rem;line-height:1.45} #site .cap-meta .caps__tags{margin-top:auto;padding-top:4rem;gap:.35rem .8rem} #site .cap-meta .caps__tags span{border:0;padding:0;font-size:.59rem;letter-spacing:.1em} #site .cap-content{max-width:64rem} #site .cap-campaign{font-size:clamp(3.7rem,7.6vw,8.8rem);line-height:.88;letter-spacing:-.057em;font-weight:320;text-wrap:balance;max-width:10.8ch} #site .cap-body{font-size:clamp(1.05rem,1.45vw,1.28rem);line-height:1.58;color:var(--ink-2);max-width:48ch;margin-top:clamp(2rem,4vw,4rem)} #site .cap-payoff{font-size:clamp(2rem,4.2vw,5rem);line-height:.98;letter-spacing:-.045em;margin-top:clamp(3rem,6vw,6rem);max-width:13ch} #site .cap-chapter--2 .cap-campaign{max-width:8ch} #site .cap-chapter--3 .cap-campaign{max-width:10ch} #site .cap-chapter--4,#site .cap-chapter--6{position:relative;isolation:isolate;background:transparent;color:var(--v10a-white);margin-inline:0;border-top:0} #site .cap-chapter--4::before,#site .cap-chapter--6::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--v10a-black); box-shadow:0 0 0 100vmax var(--v10a-black); clip-path:inset(0 -100vmax); pointer-events:none; } #site .cap-chapter--4 .cap-num,#site .cap-chapter--4 .caps__span,#site .cap-chapter--4 .cap-body,#site .cap-chapter--4 .caps__tags span,#site .cap-chapter--6 .cap-num,#site .cap-chapter--6 .caps__span,#site .cap-chapter--6 .cap-body,#site .cap-chapter--6 .caps__tags span{color:rgba(247,246,242,.58)} #site .cap-chapter--4 .cap-campaign{max-width:13ch;font-size:clamp(3.7rem,7vw,8.3rem)} #site .cap-chapter--6{border-bottom:1px solid rgba(247,246,242,.16)} /* Programme: quiet technical proof after the campaign chapters */ #site .program-editorial{margin-top:0!important;padding-block:clamp(7rem,12vw,12rem);align-items:start} #site .program-statement{font-size:clamp(2.7rem,5.5vw,6rem);line-height:.94;letter-spacing:-.045em;max-width:12ch;margin-bottom:clamp(4rem,8vw,8rem)} #site .program__line{border-top-color:var(--ink);gap:0} #site .program__phase{font-size:clamp(.9rem,1.2vw,1.08rem)} #site .program__bracket{margin-top:clamp(2rem,4vw,4rem)} /* 24-hour global campaign */ #site .global-campaign{background:var(--v10a-white);border-top:1px solid var(--ink);padding-block:clamp(7rem,13vw,14rem)} #site .global-campaign__inner{display:grid;grid-template-columns:1fr;gap:0} #site .global-campaign__eyebrow{margin-bottom:clamp(4rem,8vw,8rem)} #site .global-campaign__title{font-size:clamp(4rem,9.3vw,10.5rem);line-height:.87;letter-spacing:-.065em;font-weight:320;max-width:10.7ch} #site .global-campaign__title em{font-style:normal;color:var(--ink-2)} #site .dayline{margin-top:clamp(5rem,10vw,10rem);border-top:1px solid var(--ink);padding-top:.8rem} #site .dayline__axis{display:grid;grid-template-columns:repeat(4,1fr);font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;color:var(--ink-2)} #site .dayline__axis span:last-child{text-align:right} #site .dayline__shifts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:1.2rem;gap:1px;background:var(--line)} #site .dayline__shifts>div{background:var(--paper);min-height:clamp(6rem,11vw,10rem);padding:1rem;display:flex;justify-content:space-between;align-items:flex-end} #site .dayline__shifts span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--ink-2)} #site .dayline__shifts b{font-size:clamp(2rem,4vw,4rem);font-weight:320;letter-spacing:-.04em} #site .global-campaign__result{display:grid;grid-template-columns:minmax(0,7fr) minmax(18rem,5fr);gap:clamp(2rem,7vw,8rem);align-items:end;margin-top:clamp(5rem,10vw,10rem)} #site .global-campaign__three{font-size:clamp(10rem,27vw,31rem);line-height:.68;letter-spacing:-.09em;font-weight:300} #site .global-campaign__copy h3{font-size:clamp(3.5rem,7vw,8rem);line-height:.8;letter-spacing:-.055em;font-weight:320;margin-bottom:2rem} #site .global-campaign__copy>p{font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.55;color:var(--ink-2);max-width:33ch} #site .global-campaign__close{margin-top:clamp(3rem,6vw,6rem);font-size:clamp(1.5rem,2.6vw,2.7rem)!important;line-height:1.2!important;color:var(--ink)!important} /* Credibility: quieter, not salesy */ #site .clients-editorial{padding-top:clamp(8rem,14vw,14rem)} #site .clients-title{font-size:clamp(3rem,6vw,7rem);line-height:.95;letter-spacing:-.05em;max-width:12ch;font-weight:340} #site .clients__list{margin-top:clamp(4rem,8vw,8rem)} #site .clients__logo{opacity:.5;transition:opacity .35s,filter .35s,transform .35s} #site .clients__list li:hover .clients__logo{opacity:1;transform:scale(1.035)} /* Supporting sections intentionally quiet */ #site .roles-quieter{padding-block:clamp(5rem,8vw,8rem);background:color-mix(in srgb,var(--paper) 95%,var(--ink) 5%)} #site .roles-quieter .h2{font-size:clamp(2rem,3.5vw,3.8rem)} #site .section--quiet{background:color-mix(in srgb,var(--paper) 96%,var(--ink) 4%)} /* Contact becomes the closing campaign, form remains precise */ #site .contact-editorial{background:var(--v10a-black);color:var(--v10a-white);border-top:0;padding-block:clamp(8rem,14vw,15rem)} #site .contact-editorial .eyebrow,#site .contact-editorial .lead,#site .contact-editorial label,#site .contact-editorial .form__note{color:rgba(247,246,242,.6)} #site .contact-editorial .form__note{max-width:52ch;line-height:1.6} #site .contact-title{font-size:clamp(4rem,8.5vw,9.5rem);line-height:.88;letter-spacing:-.06em;max-width:9ch;font-weight:320} #site .contact-editorial .lead{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:38ch} #site .contact-editorial input,#site .contact-editorial textarea{background:transparent;color:var(--v10a-white);border-color:rgba(247,246,242,.25)} #site .contact-editorial input:focus,#site .contact-editorial textarea:focus{border-color:var(--v10a-white)} #site .contact-editorial .btn{background:var(--v10a-white);color:var(--v10a-black);border-color:var(--v10a-white)} #site .contact-editorial .btn:hover{background:transparent;color:var(--v10a-white)} @media (max-width:900px){ #site .hero__title--xl{font-size:clamp(3.7rem,15vw,7rem)} #site .studio-story .row,#site .cap-chapter,#site .global-campaign__result{grid-template-columns:1fr} #site .studio-story .row{gap:3rem} #site .story-title{font-size:clamp(4rem,16vw,7rem)} #site .cap-chapter{min-height:auto;gap:3rem;padding-block:6rem} #site .cap-meta{min-height:0} #site .cap-meta .caps__tags{margin-top:2rem;padding-top:0} #site .cap-campaign{font-size:clamp(3.2rem,13vw,6rem)} #site .cap-chapter--4,#site .cap-chapter--6{padding-inline:clamp(2rem,5vw,6rem)} #site .global-campaign__title{font-size:clamp(4rem,14vw,7rem)} #site .global-campaign__three{font-size:clamp(11rem,56vw,23rem);margin-top:2rem} #site .global-campaign__copy{margin-top:1rem} } @media (max-width:620px){ #site .section{padding-block:5rem} #site .hero--editorial{min-height:calc(100svh - 58px);padding-top:6rem} #site .hero__proof{display:none} #site .story-line--hit{font-size:clamp(2.2rem,12vw,4rem)} #site .dayline__shifts{grid-template-columns:1fr} #site .dayline__axis{display:none} #site .dayline__shifts>div{min-height:5rem} #site .global-campaign__three{font-size:50vw} } /* ============================================================ V10-B — ONE VIEWPORT. ONE VISION. Desktop public-site scroll choreography only. App / client / staff / jobs / legal views are excluded. ============================================================ */ #site{ --v10b-nav-h:68px; --v10b-scene-h:calc(100svh - var(--v10b-nav-h)); } /* Primary headlines are a graphic system: assertive, uppercase, while labels / technical metadata / body copy remain mixed case. */ #site .hero__title--xl, #site .story-title, #site .services-intro .h2, #site .cap-campaign, #site .program-statement, #site .global-campaign__title, #site .global-campaign__copy h3, #site .clients-title, #site .roles-quieter .h2, #site .ventures .h2, #site .contact-title{ text-transform:uppercase; } /* Every major proposition gets enough real estate to own the screen. */ #site .hero--editorial, #site .studio-story, #site .services-intro, #site .cap-chapter, #site .program-editorial, #site .global-campaign, #site .roles-quieter, #site .clients-editorial, #site .ventures, #site .contact-editorial{ scroll-snap-align:start; scroll-margin-top:var(--v10b-nav-h); } /* The headline-led scenes are truly viewport-sized. */ #site .hero--editorial, #site .studio-story, #site .services-intro, #site .cap-chapter, #site .program-editorial, #site .roles-quieter, #site .clients-editorial, #site .ventures, #site .contact-editorial{ min-height:var(--v10b-scene-h); } /* Services introduction is now a deliberate opening scene rather than simply the margin above the first service. */ #site .services-intro{ display:grid; align-items:center; margin-bottom:0!important; padding-block:clamp(5rem,10vh,8rem); } /* Each capability settles into the viewport. */ #site .cap-chapter{ min-height:var(--v10b-scene-h); padding-block:clamp(4.5rem,8vh,7rem); } /* Give the technical programme its own calm frame. */ #site .program-editorial{ min-height:var(--v10b-scene-h); align-content:center; padding-block:clamp(5rem,9vh,8rem); } /* Global Studio has two visual beats in one controlled scene. */ #site .global-campaign{ min-height:var(--v10b-scene-h); display:flex; align-items:center; } /* Supporting scenes still receive a clean landing point, but remain quieter than the campaign chapters. */ #site .roles-quieter, #site .clients-editorial, #site .ventures, #site .contact-editorial{ display:flex; align-items:center; } /* A small visual cue that the page is composed as scenes. */ #site .hero--editorial::after, #site .studio-story::after, #site .global-campaign::after{ content:"SCROLL"; position:absolute; right:clamp(1.25rem,2.4vw,2.5rem); bottom:clamp(1rem,2vh,1.75rem); font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; opacity:.34; writing-mode:vertical-rl; } #site .hero--editorial, #site .studio-story, #site .global-campaign{ position:relative; } /* Slightly tighten large-screen typography so statements remain completely legible within a single viewport. */ @media (min-width:901px) and (max-height:850px){ #site .hero__title--xl{font-size:clamp(3.7rem,8vw,7.7rem)} #site .story-title{font-size:clamp(3.8rem,8vw,7.6rem);margin-bottom:clamp(2rem,5vh,4rem)} #site .cap-campaign{font-size:clamp(3.2rem,6.5vw,6.7rem)} #site .cap-body{font-size:clamp(.98rem,1.15vw,1.12rem);line-height:1.48;margin-top:clamp(1.5rem,3vh,2.5rem)} #site .cap-payoff{font-size:clamp(1.8rem,3.4vw,3.7rem);margin-top:clamp(2rem,4vh,3rem)} #site .global-campaign__title{font-size:clamp(3.6rem,8vw,7.8rem)} #site .global-campaign__three{font-size:clamp(8rem,22vw,20rem)} } /* Desktop mouse / trackpad: deliberate section snapping. Touch devices stay native because forced snap can feel restrictive. */ @media (min-width:901px) and (min-height:650px) and (hover:hover) and (pointer:fine){ html.v10b-public-snap{ scroll-snap-type:y mandatory; scroll-padding-top:var(--v10b-nav-h,68px); scroll-behavior:smooth; } html.v10b-public-snap #site .hero--editorial, html.v10b-public-snap #site .studio-story, html.v10b-public-snap #site .services-intro, html.v10b-public-snap #site .cap-chapter, html.v10b-public-snap #site .program-editorial, html.v10b-public-snap #site .global-campaign, html.v10b-public-snap #site .roles-quieter, html.v10b-public-snap #site .clients-editorial, html.v10b-public-snap #site .ventures, html.v10b-public-snap #site .contact-editorial{ scroll-snap-stop:always; } } /* Reduced-motion users get the visual hierarchy without animated or forced scrolling. */ @media (prefers-reduced-motion:reduce){ html.v10b-public-snap{ scroll-snap-type:none!important; scroll-behavior:auto!important; } #site .hero--editorial::after, #site .studio-story::after, #site .global-campaign::after{ display:none; } } @media (max-width:900px), (hover:none), (pointer:coarse){ #site{--v10b-nav-h:58px} #site .hero--editorial, #site .studio-story, #site .services-intro, #site .cap-chapter, #site .program-editorial, #site .global-campaign, #site .roles-quieter, #site .clients-editorial, #site .ventures, #site .contact-editorial{ min-height:auto; scroll-snap-align:none; } #site .hero--editorial{min-height:calc(100svh - 58px)} #site .hero--editorial::after, #site .studio-story::after, #site .global-campaign::after{ display:none; } } #site{ --campaign-font:"Archivo",Arial,sans-serif; --campaign-weight:700; --campaign-size:clamp(3.45rem,6.15vw,6.65rem); --campaign-leading:.91; --campaign-tracking:-.055em; --label-font:"DM Mono",monospace; --label-size:.66rem; --label-leading:1.25; --label-tracking:.14em; } #site :is(.hero__title--xl,.story-title,.services-intro .h2,.cap-campaign,.program-statement,.global-campaign__title,.clients-title,.roles-quieter .h2,.ventures .h2,.contact-title){ font-family:var(--campaign-font)!important; font-size:var(--campaign-size)!important; font-weight:var(--campaign-weight)!important; font-style:normal!important; line-height:var(--campaign-leading)!important; letter-spacing:var(--campaign-tracking)!important; text-transform:uppercase!important; font-variation-settings:"wdth" 100,"wght" 700; } #site :is(.eyebrow,.cap-kicker,.cap-index,.services-kicker,.global-campaign__eyebrow,.program-kicker){ font-family:var(--label-font)!important; font-size:var(--label-size)!important; font-weight:400!important; line-height:var(--label-leading)!important; letter-spacing:var(--label-tracking)!important; text-transform:uppercase!important; } #site .cap-payoff,#site .global-campaign__copy h3{ font-family:var(--campaign-font)!important; font-weight:600!important; font-style:normal!important; text-transform:uppercase!important; letter-spacing:-.035em!important; line-height:.98!important; } #site .global-campaign__three,#site .global-campaign__hours strong,#site .global-campaign__math{ font-family:var(--campaign-font)!important; font-variant-numeric:tabular-nums lining-nums; } @media (min-width:901px) and (max-height:850px){ #site .hero__title--xl,#site .story-title,#site .cap-campaign,#site .global-campaign__title{ font-size:var(--campaign-size)!important; } } @media (max-width:900px){ #site{ --campaign-size:clamp(2.65rem,11.5vw,4.6rem); --campaign-leading:.92; --campaign-tracking:-.045em; --label-size:.62rem; } } @media (max-width:390px){ #site{--campaign-size:clamp(2.35rem,11vw,3.25rem)} } #site{ --h1-size:clamp(3.45rem,6.15vw,6.65rem); --h2-size:clamp(1.85rem,3vw,3.2rem); --editorial-size:clamp(1.16rem,1.55vw,1.52rem); --body-size:clamp(.98rem,1.12vw,1.08rem); } #site :is(.hero__title--xl,.story-title,.services-intro .h2,.cap-campaign,.program-statement,.global-campaign__title,.clients-title,.roles-quieter .h2,.ventures .h2,.contact-title){ font-size:var(--h1-size)!important; line-height:.91!important; } #site :is(.story-payoff,.story-close,.cap-payoff,.global-campaign__copy h3){ font-family:"Archivo",Arial,sans-serif!important; font-size:var(--h2-size)!important; font-weight:600!important; line-height:.98!important; letter-spacing:-.035em!important; text-transform:uppercase!important; } #site :is(.story-copy--studio .studio-editorial,.cap-body,.global-campaign__copy p){ font-family:"Archivo",Arial,sans-serif; font-size:var(--editorial-size)!important; font-weight:400!important; line-height:1.42!important; letter-spacing:-.012em; text-transform:none!important; } #site :is(.studio-proof,.cap-proof,.program-copy,.clients-editorial .prose,.ventures .prose,.contact-editorial .prose){ font-family:"Archivo",Arial,sans-serif; font-size:var(--body-size)!important; font-weight:400!important; line-height:1.56!important; text-transform:none!important; } #site .story-copy--studio{ max-width:72rem!important; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(18rem,.7fr); column-gap:clamp(3rem,7vw,8rem); row-gap:clamp(2.4rem,5vh,4.5rem); align-items:start; } #site .studio-editorial{max-width:34ch;color:rgba(247,246,242,.72)} #site .studio-editorial p{margin:0 0 .9em} #site .story-payoff{ align-self:end; max-width:15ch; margin:0!important; color:var(--v10a-white)!important; } #site .studio-proof{ max-width:38ch; color:rgba(247,246,242,.58)!important; } #site .studio-proof p{margin:0 0 1em} #site .story-close{ grid-column:1/-1; max-width:22ch; margin:clamp(1rem,2vh,2rem) 0 0!important; padding-top:clamp(1.5rem,3vh,2.5rem); border-top:1px solid rgba(255,255,255,.22); color:var(--v10a-white)!important; } #site .cap-body{max-width:46ch;opacity:.82} #site .cap-payoff{max-width:19ch;margin-top:clamp(2rem,4vh,3rem)!important} #site :is(.eyebrow,.cap-kicker,.cap-index,.services-kicker,.global-campaign__eyebrow,.program-kicker){opacity:.58} @media(max-width:900px){ #site{ --h1-size:clamp(2.65rem,11.5vw,4.6rem); --h2-size:clamp(1.6rem,7vw,2.5rem); --editorial-size:clamp(1.08rem,4.4vw,1.32rem); --body-size:1rem; } #site .story-copy--studio{display:block} #site .story-payoff,#site .studio-proof,#site .story-close{margin-top:2.2rem!important} #site .story-close{padding-top:1.6rem} } /* V10-E shared scene model — every major message gets the viewport. */ #site .hero--editorial,#site .studio-story,#site .services-intro,#site .cap-chapter,#site .program-editorial,#site .global-campaign,#site .roles-quieter,#site .clients-editorial,#site .ventures,#site .contact-editorial{ min-height:calc(100svh - var(--v10b-nav-h,68px))!important; scroll-margin-top:var(--v10b-nav-h,68px); position:relative; } @media (max-width:900px){ #site{--v10b-nav-h:58px} #site .hero--editorial,#site .studio-story,#site .services-intro,#site .cap-chapter,#site .program-editorial,#site .global-campaign,#site .roles-quieter,#site .clients-editorial,#site .ventures,#site .contact-editorial{ min-height:calc(100svh - 58px)!important; } } @media (prefers-reduced-motion:reduce){ html.v10b-public-snap{scroll-behavior:auto!important} } /* ============================================================ SCROLL-SCRUBBED MOTION Scroll position IS the timeline. Nothing "plays". Scrolling upward reverses every animation continuously. ============================================================ */ @media (prefers-reduced-motion:no-preference) { /* no will-change here: it held a compositor layer for every headline and paragraph on the page at once (dozens of large layers on a phone) for an effect the browser promotes on its own while it runs */ #site .ss-label { opacity: var(--ss-label,1); transform: translateY(calc((1 - var(--ss-label,1)) * 6px)); } #site .ss-headline { opacity: var(--ss-head,1); transform: translateY(calc((1 - var(--ss-head,1)) * 22px)) scale(calc(.985 + (var(--ss-head,1) * .015))); transform-origin:left center; } #site .ss-body { opacity: var(--ss-body,1); transform: translateY(calc((1 - var(--ss-body,1)) * 14px)); } #site .ss-payoff { opacity: var(--ss-payoff,1); transform: translateY(calc((1 - var(--ss-payoff,1)) * 11px)); } /* the FORM VENTURES lockup fades and rises with the section headline (its own sizing rule sets transform:none !important, so the headline motion is restated here) */ #site .ventures .ventures-lockup.ss-headline { transform: translateY(calc((1 - var(--ss-head,1)) * 22px)) scale(calc(.985 + (var(--ss-head,1) * .015))) !important; } /* ---------------- GLOBAL STUDIO ---------------- */ #site .global-campaign { --gs-line:0; --gs-axis:0; --gs-1:0; --gs-2:0; --gs-3:0; --gs-three:0; --gs-faster:0; --gs-copy:0; --gs-close:0; } #site .global-campaign .dayline { position:relative; border-top-color:transparent!important; } #site .global-campaign .dayline::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:currentColor; transform:scaleX(var(--gs-line)); transform-origin:left center; will-change:transform; } #site .global-campaign .dayline::after { content:""; position:absolute; width:7px; height:7px; top:-3px; left:0; border-radius:50%; background:currentColor; opacity:calc(var(--gs-line) * .8); transform:translateX(calc((100% - 7px) * var(--gs-line))); will-change:transform,opacity; } #site .global-campaign .dayline__axis { opacity:var(--gs-axis); transform:translateY(calc((1 - var(--gs-axis)) * 7px)); } #site .global-campaign .dayline__shifts > div { will-change:transform,opacity; } #site .global-campaign .dayline__shifts > div:nth-child(1) { opacity:var(--gs-1); transform:translateY(calc((1 - var(--gs-1)) * 15px)); } #site .global-campaign .dayline__shifts > div:nth-child(2) { opacity:var(--gs-2); transform:translateY(calc((1 - var(--gs-2)) * 15px)); } #site .global-campaign .dayline__shifts > div:nth-child(3) { opacity:var(--gs-3); transform:translateY(calc((1 - var(--gs-3)) * 15px)); } #site .global-campaign .global-campaign__three { opacity:var(--gs-three); transform: translateY(calc((1 - var(--gs-three)) * 24px)) scale(calc(.90 + (var(--gs-three) * .10))); transform-origin:left bottom; } #site .global-campaign .global-campaign__copy h3 { opacity:var(--gs-faster); transform:translateX(calc((1 - var(--gs-faster)) * -18px)); } #site .global-campaign .global-campaign__copy > p:not(.global-campaign__close) { opacity:var(--gs-copy); transform:translateY(calc((1 - var(--gs-copy)) * 10px)); } #site .global-campaign .global-campaign__close { opacity:var(--gs-close); transform:translateY(calc((1 - var(--gs-close)) * 12px)); } #site .global-campaign .global-campaign__close strong { position:relative; display:inline-block; } #site .global-campaign .global-campaign__close strong::after { content:""; position:absolute; left:0; right:0; bottom:-.18em; height:1px; background:currentColor; transform:scaleX(var(--gs-close)); transform-origin:left center; } } @media (prefers-reduced-motion:reduce) { #site .ss-label, #site .ss-headline, #site .ss-body, #site .ss-payoff, #site .global-campaign * { opacity:1!important; transform:none!important; } } /* V10-I — normal free scrolling. No snap, magnet, latch, or gesture blocking. */ html, body, html.v10b-public-snap, html.v10b-public-snap body, html.v10b-public-snap #site{ scroll-snap-type:none!important; scroll-behavior:auto!important; overflow-y:visible; } #site .hero--editorial, #site .studio-story, #site .services-intro, #site .cap-chapter, #site .program-editorial, #site .global-campaign, #site .roles-quieter, #site .clients-editorial, #site .ventures, #site .contact-editorial{ scroll-snap-align:none!important; scroll-snap-stop:normal!important; } /* Public-site motion is scroll-scrubbed only. No autonomous playback. */ #site .strip__track{will-change:transform} #site .reveal-target{opacity:inherit!important;transform:none!important;transition:none!important} #site .strip__track{ animation:strip var(--strip-dur,70s) linear infinite !important; will-change:transform; } #site .strip:hover .strip__track{ animation-play-state:paused; } @media (prefers-reduced-motion:reduce){ #site .strip__track{animation:none !important;} } #site .global-campaign__inner{display:block} #site .global-beat--claim{ min-height:clamp(360px,46vh,540px); display:flex; align-items:flex-start; padding-top:clamp(1rem,2.5vh,2.5rem); } #site .global-beat--claim .global-campaign__title{ margin:0; max-width:13ch; font-size:clamp(4.2rem,7vw,7.8rem); line-height:.89; letter-spacing:-.055em; } #site .global-beat--proof{ padding-top:clamp(.25rem,1vh,1rem); } #site .alwayson{ width:100%; } #site .alwayson__scale{ margin-left:clamp(190px,16vw,250px); margin-right:clamp(120px,10vw,170px); display:grid; grid-template-columns:repeat(4,1fr); font-family:"DM Mono",monospace; font-size:clamp(.66rem,.76vw,.82rem); letter-spacing:.09em; } #site .alwayson__scale span:nth-child(2), #site .alwayson__scale span:nth-child(3){transform:translateX(-50%)} #site .alwayson__scale span:last-child{ transform:translateX(-100%); text-align:right; } #site .alwayson__row{ display:grid; grid-template-columns:clamp(170px,14vw,220px) minmax(0,1fr) clamp(110px,9vw,160px); align-items:center; column-gap:clamp(1.25rem,2.25vw,2.75rem); margin-top:clamp(1.4rem,2.8vh,2.5rem); } #site .alwayson__name{ display:flex; flex-direction:column; gap:.4rem; font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.09em; font-size:clamp(.69rem,.8vw,.86rem); } #site .alwayson__name b{ font-family:Archivo,sans-serif; font-size:clamp(1.35rem,2vw,2rem); letter-spacing:-.035em; } #site .alwayson__status{ font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.09em; font-size:clamp(.68rem,.78vw,.84rem); opacity:.48; } #site .alwayson__status--form{ opacity:1; font-weight:700; } #site .alwayson__day{ height:clamp(72px,7vw,104px); display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1px solid currentColor; border-bottom:1px solid currentColor; } #site .alwayson__day > *{ min-width:0; } #site .alwayson__off, #site .alwayson__on, #site .alwayson__shift{ display:flex; align-items:center; justify-content:center; font-family:"DM Mono",monospace; font-size:clamp(.66rem,.76vw,.84rem); letter-spacing:.08em; text-transform:uppercase; } #site .alwayson__off{ opacity:.18; background:currentColor; } #site .alwayson__off span{ color:var(--bg,#f7f4ee); opacity:.7; } #site .alwayson__on--normal{ border-left:1px solid currentColor; border-right:1px solid currentColor; font-weight:700; } #site .alwayson__day--form{ position:relative; } #site .alwayson__shift{ justify-content:space-between; padding:0 clamp(.7rem,1.3vw,1.35rem); border-right:1px solid currentColor; } #site .alwayson__shift:last-child{ border-right:0; } #site .alwayson__shift b{ font-family:Archivo,sans-serif; font-size:clamp(1.15rem,1.6vw,1.65rem); letter-spacing:-.035em; } #site .alwayson__message{ margin:clamp(2.4rem,4.5vh,4rem) 0 0 clamp(190px,16vw,250px); max-width:44rem; font-size:clamp(1.25rem,1.8vw,1.85rem); line-height:1.25; } #site .alwayson__message strong{font-weight:700} #site .global-beat--payoff{ padding-top:clamp(2.2rem,4vh,4rem); padding-bottom:clamp(4rem,8vh,8rem); } #site .global-campaign__result{ display:grid; grid-template-columns:1fr; } #site .global-campaign__lockup{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; column-gap:clamp(1rem,2vw,2.25rem); width:100%; } #site .global-campaign__three{ display:block; margin:0; font-size:clamp(7.5rem,16vw,18rem); line-height:.72; letter-spacing:-.08em; white-space:nowrap; } #site .global-campaign__faster{ display:block; margin:0; align-self:end; padding-bottom:clamp(.35rem,.8vw,1rem); font-family:Archivo,sans-serif; font-weight:700; font-size:clamp(3.8rem,7.2vw,8.5rem); line-height:.82; letter-spacing:-.055em; text-transform:uppercase; white-space:nowrap; } #site .global-campaign__explain{ max-width:64rem; margin-top:clamp(1.5rem,2.8vh,2.75rem); font-size:clamp(1.05rem,1.3vw,1.3rem); line-height:1.5; } #site .global-campaign__close{ max-width:64rem; margin-top:clamp(3rem,5vh,5rem); font-size:clamp(1.35rem,2vw,2.1rem); line-height:1.25; } @media (min-width:801px){ #site .global-beat--claim,#site .global-beat--proof,#site .global-beat--payoff{width:100%;max-width:100%} } @media (max-width:900px){ #site .alwayson__scale{display:none} #site .alwayson__row{ grid-template-columns:1fr; row-gap:1rem; } #site .alwayson__message{ margin-left:0; } #site .global-campaign__lockup{ grid-template-columns:1fr; row-gap:.75rem; } #site .global-campaign__faster{padding-bottom:0} } @media (prefers-reduced-motion:no-preference){ #site .alwayson__row--normal{ opacity:var(--gs-axis,1); transform:translateY(calc((1 - var(--gs-axis,1)) * 12px)); } #site .alwayson__row--form{ opacity:var(--gs-1,1); transform:translateY(calc((1 - var(--gs-1,1)) * 14px)); } #site .alwayson__shift:nth-child(1){opacity:var(--gs-1,1)} #site .alwayson__shift:nth-child(2){opacity:var(--gs-2,1)} #site .alwayson__shift:nth-child(3){opacity:var(--gs-3,1)} #site .alwayson__message{ opacity:var(--gs-copy,1); transform:translateY(calc((1 - var(--gs-copy,1)) * 12px)); } #site .global-campaign__three{ opacity:var(--gs-three,1); transform:translateY(calc((1 - var(--gs-three,1)) * 24px)) scale(calc(.96 + var(--gs-three,1) * .04)); transform-origin:left bottom; } #site .global-campaign__faster{ opacity:var(--gs-faster,1); transform:translateY(calc((1 - var(--gs-faster,1)) * 20px)); } #site .global-campaign__explain{ opacity:var(--gs-copy,1); transform:translateY(calc((1 - var(--gs-copy,1)) * 14px)); } #site .global-campaign__close{ opacity:var(--gs-close,1); transform:translateY(calc((1 - var(--gs-close,1)) * 12px)); } } @media (min-width:901px){ #site .global-beat--claim,#site .global-beat--payoff{width:100%;max-width:100%} #site .global-beat--claim .global-campaign__title{ max-width:16ch; } #site .global-campaign__explain{ max-width:78rem; } #site .global-campaign__close{ max-width:78rem; } } #site .alwayson__handoff-label{ margin:clamp(1.6rem,3vh,2.8rem) 0 clamp(.2rem,1vh,.8rem) clamp(190px,16vw,250px); max-width:68rem; font-family:"DM Mono",monospace; font-size:clamp(.68rem,.8vw,.88rem); line-height:1.5; letter-spacing:.09em; text-transform:uppercase; } #site .alwayson__cities{ margin:clamp(2rem,3.5vh,3.5rem) 0 0 clamp(190px,16vw,250px); display:flex; flex-wrap:wrap; align-items:baseline; gap:.65rem clamp(1.2rem,2vw,2.5rem); max-width:70rem; font-family:"DM Mono",monospace; font-size:clamp(.68rem,.8vw,.88rem); letter-spacing:.09em; text-transform:uppercase; } #site .alwayson__cities span{ opacity:.58; } #site .alwayson__cities strong{ flex-basis:100%; margin-top:.25rem; font-family:Archivo,sans-serif; font-size:clamp(1.15rem,1.55vw,1.55rem); letter-spacing:-.025em; } #site .alwayson__message{ max-width:58rem; } @media (max-width:900px){ #site .alwayson__handoff-label, #site .alwayson__cities{ margin-left:0; } } @media (prefers-reduced-motion:no-preference){ #site .alwayson__handoff-label{ opacity:var(--gs-1,1); transform:translateY(calc((1 - var(--gs-1,1)) * 10px)); } #site .alwayson__cities{ opacity:var(--gs-copy,1); transform:translateY(calc((1 - var(--gs-copy,1)) * 10px)); } } /* Condense the Global Studio story without changing its content or handoff logic. */ #site .global-beat--claim{ min-height:clamp(285px,36vh,420px); padding-top:clamp(.5rem,1.5vh,1.5rem); } #site .global-beat--proof{ padding-top:0; } #site .alwayson__row{ margin-top:clamp(.85rem,1.6vh,1.5rem); } #site .alwayson__handoff-label{ margin-top:clamp(.8rem,1.5vh,1.4rem); margin-bottom:0; } #site .alwayson__cities{ margin-top:clamp(1rem,1.8vh,1.7rem); } #site .alwayson__message{ margin-top:clamp(1.25rem,2.2vh,2rem); } #site .global-beat--payoff{ padding-top:clamp(1rem,1.8vh,1.8rem); padding-bottom:clamp(3rem,5vh,5rem); } #site .global-campaign__explain{ margin-top:clamp(.9rem,1.6vh,1.5rem); } #site .global-campaign__close{ margin-top:clamp(1.8rem,3vh,3rem); } /* Keep the two comparison rows visually related as one graphic. */ #site .alwayson{ display:flex; flex-direction:column; } #site .alwayson__row--form{ margin-top:clamp(.65rem,1.2vh,1.1rem); } @media (max-width:900px){ #site .global-beat--claim{ min-height:auto; padding-bottom:2.5rem; } } /* Rebalance the three Global Studio beats: more breathing room after headline, much tighter diagram -> 3x payoff. */ #site .global-beat--claim{ min-height:clamp(340px,43vh,500px); padding-top:clamp(.75rem,2vh,2rem); } #site .global-beat--proof{ padding-top:clamp(1rem,2vh,2rem); } /* Pull the 3x payoff much closer to the end of the comparison graphic. */ #site .global-beat--payoff{ padding-top:clamp(.25rem,.7vh,.7rem); } /* Tighten the tail of the proof block itself so it doesn't create an artificial void before 3x FASTER. */ #site .alwayson__cities{ margin-top:clamp(.65rem,1.2vh,1.1rem); } #site .alwayson__message{ margin-top:clamp(.75rem,1.3vh,1.2rem); margin-bottom:0; } /* Keep headline measure deliberate after the copy change. */ #site .global-beat--claim .global-campaign__title{ max-width:14ch; } @media (max-width:900px){ #site .global-beat--claim{ min-height:auto; padding-bottom:clamp(3rem,7vh,5rem); } #site .global-beat--payoff{ padding-top:1rem; } } #site .global-campaign__lockup{ display:block; } #site .global-campaign__faster{ padding-bottom:0; font-size:clamp(5.5rem,11vw,12.5rem); line-height:.82; } /* Widen the editorial text frame across all service/capability sections. Left alignment stays fixed; the right edge is released to reduce wrapping and unnecessary vertical depth. */ @media (min-width:901px){ #site .services-intro .wrap, #site .cap-chapter .wrap{ width:min(calc(100% - (2 * var(--gutter, 32px))), 1580px); max-width:1580px; } #site .services-intro .h2, #site .services-intro .prose, #site .services-intro p, #site .cap-chapter .cap-campaign, #site .cap-chapter .cap-body, #site .cap-chapter .prose, #site .cap-chapter .cap-payoff{ max-width:none; } /* Headlines get the largest release; body copy remains readable but materially wider than before. */ #site .cap-chapter .cap-campaign{ width:min(100%, 19ch); } #site .cap-chapter .cap-body, #site .cap-chapter .prose{ width:min(100%, 72rem); } #site .cap-chapter .cap-payoff{ width:min(100%, 68rem); } #site .services-intro .h2{ width:min(100%, 18ch); } #site .services-intro .prose, #site .services-intro p{ width:min(100%, 72rem); } } @media (min-width:1280px){ #site .cap-chapter .cap-body, #site .cap-chapter .prose, #site .services-intro .prose, #site .services-intro p{ width:min(100%, 78rem); } } /* Match the wider editorial frame used in Services: preserve the Clients section's left edge and release the right side. */ @media (min-width:901px){ #site .clients-editorial .wrap{ width:min(calc(100% - (2 * var(--gutter, 32px))), 1580px); max-width:1580px; } #site .clients-editorial .clients-title{ max-width:none; width:min(100%, 19ch); } #site .clients-editorial .prose{ max-width:none; width:min(100%, 72rem); } #site .clients-editorial .clients-grid{ max-width:none; width:100%; } } @media (min-width:1280px){ #site .clients-editorial .prose{ width:min(100%, 78rem); } } /* Match Services + Clients: hold the Venture Arm left edge, release the right side for a wider, shallower editorial composition. */ @media (min-width:901px){ #site .ventures .wrap{ width:min(calc(100% - (2 * var(--gutter, 32px))), 1580px); max-width:1580px; } #site .ventures .h2{ max-width:none; width:min(100%, 19ch); } #site .ventures .prose, #site .ventures p{ max-width:none; width:min(100%, 72rem); } } @media (min-width:1280px){ #site .ventures .prose, #site .ventures p{ width:min(100%, 78rem); } } /* Match Services / Clients / Venture Arm: hold the New Business section's left edge and release the right side. */ @media (min-width:901px){ #site .contact-editorial .wrap{ width:min(calc(100% - (2 * var(--gutter, 32px))), 1580px); max-width:1580px; } #site .contact-editorial .contact-title{ max-width:none; width:min(100%, 19ch); } #site .contact-editorial .contact-lead, #site .contact-editorial .prose{ max-width:none; width:min(100%, 72rem); } } @media (min-width:1280px){ #site .contact-editorial .contact-lead, #site .contact-editorial .prose{ width:min(100%, 78rem); } } @media (min-width:901px){ #site .program .program-statement{ max-width:none; width:min(100%,22ch); } #site .program .program-copy{ max-width:none; width:min(100%,72rem); margin-top:clamp(1.5rem,2.5vw,2.75rem); margin-bottom:clamp(2rem,3.5vw,4rem); } #site .program .program-copy p{max-width:none;} } @media (min-width:1280px){ #site .program .program-copy{width:min(100%,78rem);} } /* Match Services / Clients / Venture / New Business: keep the Studio section's left edge fixed and release the right side so the editorial copy wraps less and occupies less vertical space. */ @media (min-width:901px){ #site .studio-story .wrap{ width:min(calc(100% - (2 * var(--gutter, 32px))), 1580px); max-width:1580px; } #site .studio-story .story-title{ max-width:none; width:min(100%, 19ch); } #site .studio-story .studio-editorial, #site .studio-story .studio-proof{ max-width:none; width:min(100%, 72rem); } #site .studio-story .story-payoff, #site .studio-story .story-close{ max-width:none; width:min(100%, 68rem); } } @media (min-width:1280px){ #site .studio-story .studio-editorial, #site .studio-story .studio-proof{ width:min(100%, 78rem); } } @media (min-width:901px){ /* Keep the campaign title deliberately compact. */ #site .studio-story .story-title{ max-width:none; width:min(100%,19ch); } /* Everything below the title gets the full Studio content width. */ #site .studio-story .story-payoff, #site .studio-story .studio-editorial, #site .studio-story .studio-proof, #site .studio-story .story-close, #site .studio-story .story-copy--studio{ max-width:none !important; width:100% !important; } #site .studio-story .studio-editorial p, #site .studio-story .studio-proof p, #site .studio-story .story-copy--studio p{ max-width:none !important; width:100% !important; } #site .studio-story .story-payoff{ margin-top:clamp(1.25rem,2.2vw,2.5rem); } } @media (min-width:901px){ #site .cap-chapter{ align-items:start !important; } #site .cap-chapter .cap-meta, #site .cap-chapter .cap-content{ align-self:start !important; } #site .cap-chapter .cap-content{ justify-content:flex-start !important; align-content:start !important; padding-top:0 !important; } #site .cap-chapter .cap-content::before{ content:attr(data-service-title); display:block; font-family:var(--font-mono, "DM Mono", monospace); font-size:clamp(.68rem,.72vw,.82rem); line-height:1.2; letter-spacing:.12em; text-transform:uppercase; margin:0 0 clamp(.8rem,1.2vw,1.25rem); opacity:.72; } #site .cap-chapter .cap-meta .caps__name{ display:none !important; } #site .cap-chapter .cap-campaign{ margin-top:0 !important; } } @media (min-width:901px){ /* Match the supplied reference composition: metadata on the left, content starts high and stays top aligned. */ #site .cap-chapter{ display:grid !important; grid-template-columns:minmax(250px, 29%) minmax(0,1fr) !important; column-gap:clamp(4rem,6vw,7rem) !important; align-items:start !important; } #site .cap-chapter .cap-meta{ align-self:start !important; padding-top:0 !important; } #site .cap-chapter .cap-content{ align-self:start !important; justify-content:flex-start !important; align-content:start !important; padding-top:0 !important; margin-top:0 !important; } /* Discipline title sits directly above the campaign headline, as in the reference image. */ #site .cap-chapter .cap-content::before{ content:attr(data-service-title); display:block; font-family:var(--font-sans, "Archivo", sans-serif); font-size:clamp(1.05rem,1.35vw,1.35rem); line-height:1.15; font-weight:500; letter-spacing:-.02em; text-transform:none; opacity:1; margin:0 0 clamp(2.2rem,3vw,3.4rem); } #site .cap-chapter .cap-meta .caps__name{ display:none !important; } #site .cap-chapter .cap-campaign{ margin:0 0 clamp(2rem,2.8vw,3rem) !important; max-width:none !important; width:min(100%, 18ch) !important; } #site .cap-chapter .cap-body{ margin-top:0 !important; max-width:none !important; width:min(100%, 72rem) !important; } /* Keep the left-side service descriptors anchored high, with tags remaining toward the bottom of each frame. */ #site .cap-chapter .caps__span{ margin-top:0 !important; } } @media (min-width:901px){ /* Tighten the three metadata lines in each service frame: number / discipline descriptor / capability list. */ #site .cap-chapter .cap-meta{ display:flex !important; flex-direction:column !important; justify-content:flex-start !important; gap:0 !important; } #site .cap-chapter .cap-num{ margin:0 0 1em !important; } #site .cap-chapter .caps__span{ margin:0 0 1em !important; } #site .cap-chapter .caps__tags{ margin:0 !important; padding:0 !important; } } /* Replace the hero line-art field with a full-bleed image carousel that sits behind the existing hero copy. */ #site .hero--editorial{ position:relative; overflow:hidden; isolation:isolate; } /* Hide the existing hero line animation/canvas only in the public hero. */ #site .hero--editorial canvas:not(.hero-model__canvas), #site .hero--editorial .surface-lines, #site .hero--editorial [data-surface-lines]{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } @media (max-width:800px){ } @media (prefers-reduced-motion:reduce){ } @media (max-width:800px){ } @media (prefers-reduced-motion:reduce){ } /* Ventures hero lockup Reduce the large FORM VENTURES identity to 50% of its previous visual size. The project/portfolio marks below are intentionally untouched. */ #site .ventures .ventures-wordmark, #site .ventures .ventures-brand, #site .ventures .ventures-lockup, #site .ventures .venture-brand{ transform:scale(.5) !important; transform-origin:left top !important; } /* Form Ventures — supplied venture identity assets */ #site .ventures .ventures-project-asset{ display:block; width:100%; height:clamp(48px,5vw,78px); object-fit:contain; object-position:left center; mix-blend-mode:multiply; } #site .ventures a:has(.ventures-project-asset), #site .ventures li:has(.ventures-project-asset), #site .ventures div:has(.ventures-project-asset){ min-width:0; } @media (max-width:700px){ #site .ventures .ventures-project-asset{ height:54px; } } /* ========================================================= PRODUCTION COMPONENT LAYER Consolidated from the approved V14 visual state. ========================================================= */ :root{ --fd-content-max:1580px; --fd-page-gutter:clamp(2rem,5vw,6rem); } /* One canonical public-site content frame. */ #site .wrap{ width:min(100% - var(--fd-page-gutter),var(--fd-content-max)); max-width:none; } /* ---------- Form Ventures ---------- */ #site .ventures #ventures-list{ display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)) !important; column-gap:clamp(28px,4vw,64px) !important; row-gap:0 !important; align-items:center !important; width:100% !important; } #site .ventures #ventures-list > li{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:86px !important; margin:0 !important; padding:0 !important; } #site .ventures #ventures-list .ventures-project-asset{ display:block !important; width:100% !important; height:64px !important; max-width:150px !important; max-height:64px !important; object-fit:contain !important; object-position:center center !important; /* the same colour and transparency as the logos in the clients section (.clients__logo): greyscale at 50%, full colour on hover */ opacity:.5 !important; filter:grayscale(1) contrast(1.05) !important; mix-blend-mode:normal !important; transition:opacity .35s, filter .35s, transform .35s; } #site .ventures #ventures-list > li:hover .ventures-project-asset{ opacity:1 !important; filter:none !important; transform:scale(1.035) } #site .ventures #ventures-list .clients__name{display:none !important} #site .ventures #ventures-list > li:nth-child(2) .ventures-project-asset, #site .ventures #ventures-list > li[data-logo="speedform"] .ventures-project-asset{ mix-blend-mode:normal !important; } #site .ventures .ventures-wordmark, #site .ventures .ventures-brand, #site .ventures .ventures-lockup, #site .ventures .venture-brand{ display:block !important; width:42% !important; /* 40% smaller than before (70% / 420 px), 27 Sep 2026 */ max-width:252px !important; margin-left:0 !important; margin-right:auto !important; transform:none !important; transform-origin:left top !important; text-align:left !important; } #site .ventures .ventures-wordmark img, #site .ventures .ventures-brand img, #site .ventures .ventures-lockup img, #site .ventures .venture-brand img{ display:block !important; width:100% !important; height:auto !important; margin:0 !important; object-position:left center !important; } @media (max-width:1000px){ #site .ventures #ventures-list{grid-template-columns:repeat(3,minmax(0,1fr)) !important} } @media (max-width:800px){ #site .ventures #ventures-list{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px 32px !important; } #site .ventures #ventures-list > li{height:72px !important} #site .ventures #ventures-list .ventures-project-asset{ height:54px !important; max-width:130px !important; max-height:54px !important; } } /* ---------- Digital Modelling dark chapter ---------- */ #site .cap-chapter--2{ position:relative; isolation:isolate; background:transparent !important; color:var(--v10a-white) !important; margin-inline:0 !important; border-top:0 !important; } #site .cap-chapter--2::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--v10a-black); box-shadow:0 0 0 100vmax var(--v10a-black); clip-path:inset(0 -100vmax); pointer-events:none; } #site .cap-chapter--2 .cap-num, #site .cap-chapter--2 .caps__span, #site .cap-chapter--2 .caps__tags, #site .cap-chapter--2 .cap-title, #site .cap-chapter--2 .cap-head, #site .cap-chapter--2 .cap-body, #site .cap-chapter--2 .cap-payoff{ color:var(--v10a-white) !important; } /* ---------- Global Studio ---------- */ #site #global-studio .global-offline-cell{ position:relative !important; overflow:hidden !important; isolation:isolate !important; } #site #global-studio .global-offline-cell::before{ content:""; position:absolute; inset:-60%; z-index:-1; background:repeating-linear-gradient( 0deg, #f4f4f4 0 12px, transparent 12px 24px ); transform:rotate(45deg); transform-origin:center; pointer-events:none; } #site #global-studio .global-offline, #site #global-studio .global-offline-cell .global-offline, #site #global-studio .alwayson__off .global-offline{ color:rgb(0,0,0) !important; -webkit-text-fill-color:rgb(0,0,0) !important; opacity:1 !important; filter:none !important; mix-blend-mode:normal !important; text-shadow:none !important; font-weight:700 !important; position:relative !important; z-index:10 !important; } /* ---------- Studio ---------- */ #site #studio.studio-global-layout{ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; padding-block:clamp(7rem,13vw,14rem) !important; padding-inline:0 !important; } #site #studio.studio-global-layout .studio-global-layout__inner{ display:grid !important; grid-template-columns:1fr !important; gap:0 !important; width:min(100%,var(--fd-content-max)) !important; max-width:var(--fd-content-max) !important; margin-inline:auto !important; padding-inline:var(--fd-page-gutter) !important; box-sizing:border-box !important; } #site #studio.studio-global-layout .eyebrow{ grid-column:1 !important; margin:0 0 clamp(4rem,8vw,8rem) 0 !important; } #site #studio.studio-global-layout .stack{ grid-column:1 !important; display:block !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } #site #studio.studio-global-layout .story-title{ width:100% !important; max-width:15ch !important; margin:0 !important; font-size:clamp(2.7rem,5.5vw,6rem) !important; line-height:.94 !important; letter-spacing:-.045em !important; font-weight:320 !important; } #site #studio.studio-global-layout .story-copy--studio{ display:flex !important; flex-direction:column !important; grid-template-columns:none !important; width:100% !important; max-width:58rem !important; margin:clamp(5rem,9vw,9rem) 0 0 !important; padding:0 !important; gap:0 !important; align-items:flex-start !important; } #site #studio.studio-global-layout .story-copy--studio p{ width:100% !important; max-width:58rem !important; margin:0 !important; font-size:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; } #site #studio.studio-global-layout .story-copy--studio p + p{margin-top:1em !important} @media (max-width:900px){ #site #studio.studio-global-layout{padding-block:clamp(5rem,12vw,8rem) !important} #site #studio.studio-global-layout .story-title{ max-width:12ch !important; font-size:clamp(2.1rem,9vw,3.5rem) !important; } #site #studio.studio-global-layout .story-copy--studio{ max-width:none !important; margin-top:4rem !important; } } /* ---------- Hero ---------- */ #site .hero--editorial{position:relative} #site .hero--editorial::after{ content:"" !important; display:block !important; position:absolute !important; inset:0 !important; z-index:2 !important; pointer-events:none !important; background:#fff !important; opacity:.36 !important; } @media (max-width:700px){ } /* ---------- Programme ---------- */ @media (max-width:820px){ #site .program .program-copy{margin-bottom:3.75rem !important} } /* ---------- Services: one mobile horizontal system ---------- */ @media (max-width:900px){ #site .caps .cap-chapter, #site .cap-chapter--1, #site .cap-chapter--2, #site .cap-chapter--3, #site .cap-chapter--4, #site .cap-chapter--5, #site .cap-chapter--6{ margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; } #site .caps .cap-chapter .cap-meta, #site .caps .cap-chapter .cap-content, #site .caps .cap-chapter .cap-copy, #site .caps .cap-chapter .cap-head, #site .caps .cap-chapter .cap-body{ margin-left:0 !important; margin-right:0 !important; } } /* V15.1 semantic/content refinements */ #site .hero--editorial::after{display:none !important;content:none !important} #site .capability-definition{ max-width:70rem; margin:clamp(2rem,4vw,4rem) 0 clamp(4rem,7vw,7rem); color:var(--ink-2); font-size:clamp(1rem,1.2vw,1.15rem); line-height:1.65; } #site .capability-definition a, #site .cap-chapter .caps__name a{ color:inherit; text-decoration:none; } #site .capability-definition a:hover, #site .cap-chapter .caps__name a:hover{ text-decoration:underline; text-underline-offset:.16em; } #site .seo-site-map{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; margin-top:2rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; } #site .seo-site-map a{color:inherit;text-decoration:none} #site .seo-site-map a:hover{text-decoration:underline;text-underline-offset:.2em} /* == Phones: the public chrome ============================ These rules were living in portal.css, which loads only when a #/ route is requested — so on the public homepage, which is most of the traffic, none of them applied. The menu button was 19px tall and the wordmark 18px. A lazily-loaded stylesheet is a performance boundary, not a place to keep rules the public pages need. Deliberately not scoped to #site: the footer is cloned into the portal views with its ids stripped, so an #site-prefixed selector stops matching the moment the clone is the one on screen. ======================================================== */ @media (max-width:900px){ .nav__in{gap:1rem} .nav__menu{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;margin-right:-.6rem;padding-inline:.6rem} .nav__brand{min-height:44px} .footer__cols li{padding:0} .footer__cols a{min-height:44px;display:flex;align-items:center} .hero__actions .link,.hero__actions .btn{min-height:44px;display:inline-flex;align-items:center} /* v16 made each service heading a link to its own page — real navigation, so it gets a real target rather than the 17px the text alone gave it */ .caps__name a{display:block;min-height:44px;display:flex;align-items:center} .seo-site-map{gap:.25rem 1.5rem} .seo-site-map a{min-height:44px;display:inline-flex;align-items:center} .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center} a,button,input,select,textarea,label,[role="button"]{touch-action:manipulation} a,button{-webkit-tap-highlight-color:transparent} input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px} } /* Section 04 and 06 images: behind the copy, across the whole dark chapter and anchored to the left of the page, with a semi-transparent black gradient between the image and the white copy (lightest on the left, where the picture shows through; darkest under the text). */ #site :is(.cap-chapter--4, .cap-chapter--6){ overflow:visible } #site .cap-figure{ position:absolute; z-index:-1; top:0; bottom:0; margin:0; left:calc(50% - 50vw); width:100vw; overflow:hidden; pointer-events:none; } #site .cap-figure img{ display:block; width:100%; height:100%; object-fit:cover; object-position:left center; background:#141414 } #site .cap-figure::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(8,8,8,.25) 0%, rgba(8,8,8,.55) 32%, rgba(8,8,8,.82) 58%, rgba(8,8,8,.88) 100%), linear-gradient(180deg, rgba(8,8,8,.35) 0%, rgba(8,8,8,0) 30%, rgba(8,8,8,0) 70%, rgba(8,8,8,.45) 100%); } /* phones: the image sits between the chapter's metadata (04, the span, the tags) and the copy, full width, uncropped and without the gradient */ @media (max-width:900px){ #site :is(.cap-chapter--4, .cap-chapter--6) > .cap-meta{ order:1 } #site :is(.cap-chapter--4, .cap-chapter--6) > .cap-figure{ order:2 } #site :is(.cap-chapter--4, .cap-chapter--6) > .cap-content{ order:3 } #site .cap-figure{ position:static; z-index:auto; grid-column:1 / -1; width:100vw; margin:0 0 0 calc(50% - 50vw); } #site .cap-figure img{ height:auto; object-fit:initial } #site .cap-figure::after{ content:none } } /* Services intro ("Six disciplines…"): inverted, black background and white copy, full-bleed like the dark chapters. */ #site .services-intro{ position:relative; isolation:isolate; color:var(--v10a-white) } #site .services-intro::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--v10a-black); box-shadow:0 0 0 100vmax var(--v10a-black); clip-path:inset(0 -100vmax); } #site .services-intro :is(.eyebrow, .h2, .capability-definition, .capability-definition p, .capability-definition strong){ color:var(--v10a-white) } #site .services-intro .capability-definition a{ color:var(--v10a-white); text-decoration-color:rgba(247,246,242,.45) } #site .services-intro .eyebrow{ color:rgba(247,246,242,.62) } /* The site header on the public app views (jobs, sign-in, invitation, legal): everything else of the home page is put away, and the views' own bars give way to the header. */ #site.site--header-only > :not(.nav){ display:none !important } /* ...and the header stays pinned to the top as on the home page. The nav's own sticky cannot work here, because its parent (#site) is only as tall as the nav; so #site itself sticks. */ #site.site--header-only{ position:sticky; top:0; z-index:50 } #view-jobs > .appbar, #view-legal > .appbar, #view-client > .appbar, #view-staff > .appbar{ display:none } /* the client and staff areas under the site header: the side menu sticks just below it */ #app .app__side{ top:calc(4.25rem + 1.25rem) } #app .app{ min-height:calc(100svh - 4.25rem) } /* the sign-in and invitation panels sit under the site header: their own wordmark goes (the header carries it) and the panel fills the screen below the header */ #app .login > .login__side > a:first-child:has(.wordmark){ display:none } /* one centred column now the streamline art has gone (Mark, 27 Sep 2026): the form sits under the header with the footer below it, no side panel */ #app .login{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:1fr auto; min-height:calc(100svh - 4.25rem); padding:0; } #app .login__side{ justify-self:center; box-sizing:content-box; width:calc(100% - 2 * var(--gutter)); max-width:26rem; min-height:0; padding:clamp(3rem,9vh,7rem) var(--gutter) clamp(4rem,10vh,8rem); gap:2rem; border:0; background:transparent; } #app .login > .footer{ grid-column:1 } #app .login__form{ max-width:none; margin-block:0 } /* the account circle that replaces "Log in" once you are signed in */ .acct{position:relative;display:inline-flex} .acct__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--ink);color:var(--paper);cursor:pointer} .acct__circle{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;font-weight:500} .acct__btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .acct__menu{position:absolute;right:0;top:calc(100% + .5rem);min-width:14rem;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);box-shadow:0 12px 30px rgba(0,0,0,.12);padding:.75rem 0;z-index:80;text-align:left} .acct__menu a{display:block;padding:.5rem 1rem;font-size:.9rem} .acct__menu a:hover{background:var(--muted)} .acct__name{padding:0 1rem;font-weight:500} .acct__sub{padding:0 1rem .6rem;margin-bottom:.4rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} .mobile-menu__auth .acct__menu{left:0;right:auto}