/* Accanto Branding - design system and page styles. Ported from the prototype's src/new_style.css. Fonts are enqueued separately from fonts.css. */ /* ── Accanto Branding · design tokens ───────────────────────────────── */ :root{ --black:#0B0B0C; --ink:#111113; --white:#F1F0EC; --yellow:#FFE600; --blue:#1B36F0; --red:#F0402A; --muted:rgba(241,240,236,.56); --faint:rgba(241,240,236,.34); --line:rgba(241,240,236,.16); --pad:clamp(20px,4vw,72px); --display:Anton,"Arial Narrow",Impact,sans-serif; --body:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif; --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} /* Original base, restored. Horizontal clipping stays on ALONE: with overflow-x on both html and body, body becomes its own scroll container, window.scrollY stops moving and ScrollTrigger dies. */ html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:hidden} body{margin:0;background:#0b0b0c;color:#f1f0ec;font-family:Archivo,"Helvetica Neue",Helvetica,sans-serif;font-size:16px;line-height:1.6} a{color:inherit;text-decoration:none} a:hover{color:#1b36f0} img{display:block;max-width:100%} ::selection{background:#1b36f0;color:#fff} :focus-visible{outline:2px solid #1b36f0;outline-offset:4px} @keyframes accanto-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @keyframes accanto-hint{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(9px);opacity:1}} /* Anton's capitals fill .867em of the em box, so no display line-height ever drops below 1 — under ~.875 the caps collide with the line above. */ .display{ font-family:var(--display);font-weight:400;text-transform:uppercase; letter-spacing:-.005em;line-height:1;margin:0; } .eyebrow{ font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--muted);margin:0; } .lede{font-size:clamp(16px,1.25vw,20px);line-height:1.55;color:var(--muted);margin:0;max-width:46ch} /* Spacing lives in classes, never inline: these elements are animated and GSAP owns their style attribute. */ .eyebrow--lead{margin-bottom:clamp(24px,3.8vh,50px)} .eyebrow--tight{margin-bottom:20px} .lede--after{margin-top:clamp(30px,4.6vh,58px)} /* line-mask reveal. Padding keeps descenders and commas from being clipped by the overflow, and the negative margin cancels it in flow. */ .mask{display:block;padding-bottom:.09em;margin-bottom:-.09em; clip-path:inset(0 -100vw 0 -100vw)} .mask > span{display:block;will-change:transform} .section{padding:clamp(92px,13vh,180px) var(--pad)} .wrap{max-width:1640px;margin:0 auto} .rule{height:1px;background:var(--line);border:0;margin:0} /* ── nav ─────────────────────────────────────────────────────────────── */ .nav{ position:fixed;top:0;left:0;right:0;z-index:90; display:flex;align-items:center;justify-content:space-between;gap:24px; padding:16px var(--pad);border-bottom:1px solid transparent; transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s var(--ease); } .nav.is-stuck{background:rgba(11,11,12,.76);backdrop-filter:blur(16px);border-bottom-color:var(--line)} .brand{font-family:var(--display);font-size:clamp(17px,1.6vw,24px);letter-spacing:.02em;line-height:1;white-space:nowrap} .brand:hover{color:var(--yellow)} .nav-right{display:flex;align-items:center;gap:clamp(14px,2vw,32px)} .nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,32px)} .nav-links a{font-size:11px;font-weight:600;letter-spacing:.16em;transition:color .3s} .nav-links a:hover{color:var(--yellow)} .nav-cta{ display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px; background:var(--yellow);color:var(--black);font-size:11px;font-weight:700;letter-spacing:.14em; transition:transform .4s var(--ease),background .3s;white-space:nowrap; } .nav-cta:hover{background:var(--white);transform:translateY(-2px)} .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer} .burger span{display:block;width:24px;height:2px;background:var(--white);transition:transform .35s var(--ease),opacity .25s} .menu{ position:fixed;top:0;left:0;right:0;z-index:89;background:var(--ink); padding:96px var(--pad) 44px;display:flex;flex-direction:column;gap:2px; transform:translateY(-102%);transition:transform .6s var(--ease);pointer-events:none; } .menu.is-open{transform:translateY(0);pointer-events:auto} .menu a{font-family:var(--display);font-size:clamp(30px,8.4vw,52px);text-transform:uppercase;line-height:1.12} .menu a:hover{color:var(--yellow)} .menu .menu-mail{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--muted);margin-top:22px} /* ── hero ────────────────────────────────────────────────────────────── */ .hero{ min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; padding:132px var(--pad) clamp(36px,6vh,68px);position:relative;overflow:hidden; } .hero-glow{ position:absolute;inset:auto -10% -40% 30%;height:70vh;pointer-events:none; background:radial-gradient(60% 60% at 50% 50%,rgba(27,54,240,.26),rgba(11,11,12,0) 70%); } .hero-inner{position:relative;max-width:1640px;margin:0 auto;width:100%} .hero-title{font-size:clamp(44px,8.7vw,158px);line-height:1;letter-spacing:-.012em} .hero-title .accent{color:var(--yellow)} .hero-foot{ display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:32px;margin-top:clamp(34px,5.5vh,68px); } .scroll-cue{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--muted)} .scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(var(--yellow),transparent);font-style:normal} /* ── statement / crossed-out language ────────────────────────────────── */ .statement{font-size:clamp(38px,7.2vw,126px);line-height:1.02;letter-spacing:-.01em} .statement .row{display:block} .statement .dim{color:var(--faint)} .strike{position:relative;display:inline-block;color:var(--faint)} .strike::after{ content:"";position:absolute;left:-.03em;right:-.03em;top:54%;height:.065em; background:var(--yellow);transform:scaleX(0);transform-origin:left center; } .swap{display:inline-block;color:var(--yellow)} /* ── marquee ─────────────────────────────────────────────────────────── */ .marquee{background:var(--yellow);color:var(--black);padding:16px 0;overflow:hidden;white-space:nowrap} .marquee-track{display:inline-flex;width:max-content;will-change:transform} .marquee-track span{font-family:var(--display);font-size:clamp(26px,3.9vw,58px);text-transform:uppercase;padding-right:34px;line-height:1.1} /* ── work (large, image-led, minimal chrome) ─────────────────────────── */ .work-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:clamp(44px,7vh,86px)} .work-head h2{font-size:clamp(38px,5.4vw,104px)} .work-item{display:block;margin-bottom:clamp(56px,9vh,132px)} .work-item:last-child{margin-bottom:0} .work-media{position:relative;overflow:hidden;background:#141416;aspect-ratio:16/9} .work-media img{width:100%;height:100%;object-fit:cover;will-change:transform} .work-item.is-tall .work-media{aspect-ratio:4/3} .work-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;margin-top:20px} .work-name{font-family:var(--display);font-size:clamp(26px,3.5vw,60px);text-transform:uppercase;line-height:1;transition:color .35s} .work-item:hover .work-name{color:var(--yellow)} .work-meta{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--muted)} .grid-2,.grid-3{display:grid;gap:clamp(20px,3vw,52px);margin-top:clamp(20px,3vw,52px)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-2 .work-item,.grid-3 .work-item{margin-bottom:0} .grid-2 .work-media{aspect-ratio:4/3} .grid-3 .work-media{aspect-ratio:4/5} .work-item.is-wide .work-media{aspect-ratio:21/9} .nav-links a.is-active{color:var(--yellow)} /* ── solutions (Landor blue) ─────────────────────────────────────────── */ .solutions{background:var(--blue);color:#fff} .solutions .eyebrow{color:rgba(255,255,255,.7)} .sol-head{margin-bottom:clamp(46px,7vh,90px)} .sol-head h2{font-size:clamp(38px,5.8vw,110px);line-height:1} .sol-row{ display:grid;grid-template-columns:92px minmax(0,1fr) minmax(0,430px); gap:clamp(14px,3vw,52px);align-items:baseline; padding:clamp(24px,3.2vw,44px) 0;border-top:1px solid rgba(255,255,255,.3); } .sol-row:last-child{border-bottom:1px solid rgba(255,255,255,.3)} .sol-num{font-size:12px;font-weight:700;letter-spacing:.18em;opacity:.72} .sol-name{font-family:var(--display);font-size:clamp(32px,5.2vw,92px);text-transform:uppercase;line-height:1} .sol-desc{font-size:15px;line-height:1.6;color:rgba(255,255,255,.88);margin:0} /* ── studio ──────────────────────────────────────────────────────────── */ .studio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(30px,6vw,90px)} .studio-grid h2{font-size:clamp(38px,5.4vw,100px)} .studio-copy{display:flex;flex-direction:column;gap:24px;justify-content:flex-end} .studio-copy p{margin:0;max-width:52ch} .studio-copy .big{font-size:clamp(17px,1.5vw,25px);line-height:1.45;color:var(--white)} .studio-copy .small{font-size:15px;line-height:1.65;color:var(--muted)} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(20px,3vw,46px);margin-top:clamp(52px,8vh,100px);border-top:1px solid var(--line);padding-top:clamp(28px,4vh,52px)} .stat-n{font-family:var(--display);font-size:clamp(38px,4.6vw,78px);line-height:1;color:var(--yellow)} .stat-l{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--muted);margin-top:8px} /* ── contact ─────────────────────────────────────────────────────────── */ .contact{padding:clamp(96px,15vh,200px) var(--pad)} .contact h2{font-size:clamp(40px,7.4vw,140px);line-height:1.02} .contact .accent{color:var(--yellow)} .contact-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:clamp(38px,6vh,72px)} .pill{ display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:999px; background:var(--yellow);color:var(--black);font-size:12px;font-weight:700;letter-spacing:.14em; transition:transform .45s var(--ease),background .3s; } .pill:hover{background:var(--white);transform:translateY(-3px)} .pill-ghost{background:transparent;color:var(--white);border:1px solid var(--line)} .pill-ghost:hover{background:var(--white);color:var(--black)} /* ── footer ──────────────────────────────────────────────────────────── */ .footer{background:var(--ink);padding:clamp(58px,8vh,96px) var(--pad) 30px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,5vw,70px)} .footer h3{font-family:var(--display);font-size:clamp(26px,2.6vw,40px);text-transform:uppercase;line-height:1;margin:0 0 14px} .footer .col-t{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--faint);margin:0 0 16px} .footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .footer li a,.footer .c-item{font-size:13px;color:var(--muted);transition:color .3s} .footer .lede{font-size:14px} .footer li a:hover{color:var(--yellow)} .footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:clamp(44px,6vh,76px);padding-top:22px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.1em;color:var(--faint)} .to-top:hover{color:var(--yellow)} /* ── responsive ──────────────────────────────────────────────────────── */ @media (max-width:1024px){ .nav-links{display:none} .burger{display:flex} .sol-row{grid-template-columns:72px minmax(0,1fr);row-gap:14px} .sol-desc{grid-column:2/-1} .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:1024px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:760px){ .nav-cta{display:none} .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)} .grid-2 .work-media,.grid-3 .work-media,.work-item.is-wide .work-media{aspect-ratio:4/3} .work-media{aspect-ratio:4/3} .footer-grid{grid-template-columns:1fr;gap:34px} .hero{padding-top:118px} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} .mask > span{transform:none!important} } /* ── motion: pre-animation states ──────────────────────────────────── Held in CSS so nothing flashes before GSAP boots. `.no-anim` is the failsafe the script applies if the libraries never load, or when the visitor prefers reduced motion. */ [data-hero-line],[data-line]{transform:translateY(115%)} /* Once GSAP is driving, the CSS transform must get out of the way: GSAP reads whatever transform is computed as the element's base offset, so leaving translateY(115%) here makes it add its own 115% on top. */ html.gsap-ready [data-hero-line], html.gsap-ready [data-line]{transform:none} [data-hero-el],[data-fade],[data-sol-row]{opacity:0} .strike::after{transition:transform .75s var(--ease)} .strike.is-struck::after{transform:scaleX(1)} .swap{opacity:0;transform:translateY(.24em);transition:opacity .5s ease,transform .8s var(--ease)} .swap.is-in{opacity:1;transform:none} html.no-anim [data-hero-line], html.no-anim [data-hero-el], html.no-anim [data-line], html.no-anim [data-fade], html.no-anim [data-sol-row], html.no-anim .swap{transform:none!important;opacity:1!important} html.no-anim .work-media{clip-path:none!important} html.no-anim .strike::after{transform:scaleX(1)!important} /* ── page shells ──────────────────────────────────────────────────── */ /* The prototype nested every page inside the home page's light wrapper, so subpages had to restate the dark ground. Here owns it, and only the front page needs the light wrapper its sections paint over. */ body.home{background:#f1f0ec;color:#0b0b0c} .section--tight{padding-top:0} .page-head{padding:clamp(132px,19vh,210px) var(--pad) clamp(34px,5vh,62px)} .page-head .wrap{max-width:1640px;margin:0 auto} .page-title{font-size:clamp(40px,7.2vw,128px);line-height:1;letter-spacing:-.012em} .page-title .accent{color:var(--yellow)} .work-all{margin-top:clamp(40px,6vh,74px)} /* ── portfolio filters ───────────────────────────────────────────────── */ .filters-wrap{padding:0 var(--pad)} .filters-wrap .wrap{max-width:1640px;margin:0 auto} .facet{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:15px 0;border-top:1px solid var(--line)} .facet-label{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--faint);width:112px;flex:none} .chip{ border:1px solid var(--line);background:none;color:var(--muted);font-family:inherit; font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; padding:8px 15px;border-radius:999px;cursor:pointer; transition:color .25s,border-color .25s,background .25s; } .chip:hover{color:var(--white);border-color:rgba(241,240,236,.5)} .chip.is-on{background:var(--yellow);border-color:var(--yellow);color:var(--black)} .filter-count{font-size:11px;letter-spacing:.16em;color:var(--faint);margin:18px 0 0;text-transform:uppercase} .work-empty{padding:clamp(50px,9vh,110px) 0;color:var(--muted);font-size:15px} /* ── case study ──────────────────────────────────────────────────────── */ .case-hero{position:relative;height:min(84vh,880px);overflow:hidden;background:#141416} .case-hero > img{width:100%;height:100%;object-fit:cover} .case-hero-in{ position:absolute;left:0;right:0;bottom:0;padding:clamp(80px,14vh,150px) var(--pad) clamp(34px,5vh,60px); background:linear-gradient(transparent,rgba(11,11,12,.55) 45%,rgba(11,11,12,.94)); } .case-hero-in .wrap{max-width:1640px;margin:0 auto} .case-name{font-size:clamp(42px,8.6vw,146px);line-height:1;letter-spacing:-.012em} .case-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px} .tag{border:1px solid rgba(241,240,236,.3);border-radius:999px;padding:7px 14px;font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--white);text-transform:uppercase} .tag--solid{background:var(--yellow);border-color:var(--yellow);color:var(--black)} .cs{padding:clamp(66px,10vh,128px) var(--pad);border-top:1px solid var(--line)} .cs-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(22px,5vw,84px);max-width:1640px;margin:0 auto;align-items:start} .cs--wide .cs-grid{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vh,52px)} .cs-num{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--faint)} .cs-h{font-family:var(--display);font-size:clamp(26px,3.3vw,52px);text-transform:uppercase;line-height:1;margin:11px 0 0} .cs-body > p{font-size:clamp(16px,1.3vw,21px);line-height:1.6;margin:0 0 18px;max-width:78ch;color:var(--white)} .cs-body > p:last-child{margin-bottom:0} /* No `ch` here. It resolves against the element's own font, and at 46px Anton a 20ch cap turns a real-length quote into a tall narrow ribbon with half the row empty. Cap it in px and let it run wide. */ .cs-quote{font-family:var(--display);font-size:clamp(21px,2.15vw,36px);line-height:1.18;text-transform:uppercase;margin:0;max-width:min(100%,1180px)} .cs-cite{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--faint);margin-top:20px;text-transform:uppercase} /* Sections with no sourced copy yet. Visible on purpose: the structure is there, the claim is not invented. */ .cs-todo{border:1px dashed rgba(241,240,236,.25);border-radius:10px;padding:20px 22px;max-width:62ch} .cs-todo b{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--yellow);text-transform:uppercase;margin-bottom:8px} .cs-todo span{font-size:14px;line-height:1.6;color:var(--faint)} .built-list{columns:3;column-gap:clamp(24px,4vw,66px);margin:0;padding:0;list-style:none} .built-list li{break-inside:avoid;padding:13px 0;border-bottom:1px solid var(--line)} .built-t{font-size:15px;font-weight:600} .built-d{font-size:14px;line-height:1.55;color:var(--muted);margin-top:5px} .palette{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 30px;padding:0;list-style:none} .sw{width:132px} .sw i{display:block;height:76px;border-radius:8px;border:1px solid var(--line)} .sw b{display:block;font-size:12px;font-weight:600;margin-top:9px} .sw span{display:block;font-size:11px;color:var(--faint);letter-spacing:.08em;font-variant-numeric:tabular-nums} .sys-item{margin:0 0 18px} .sys-item dt{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--faint);text-transform:uppercase} .sys-item dd{margin:7px 0 0;font-size:15px;line-height:1.6;color:var(--white);max-width:62ch} /* The boards are up to 1700px native with annotation type on them, so every one runs the full width of the section. `height:auto` keeps each at its own aspect ratio, nothing is cropped, and nothing is left sitting in half a row with dead space beside it. */ .gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,56px)} .gallery figure{margin:0} .gallery img{width:100%;height:auto;display:block;background:#141416} .gallery figcaption{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--faint);margin-top:11px;text-transform:uppercase} .case-next{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:18px;padding:clamp(50px,8vh,100px) var(--pad);border-top:1px solid var(--line)} .case-next a{font-family:var(--display);font-size:clamp(28px,4.4vw,74px);text-transform:uppercase;line-height:1} .case-next a:hover{color:var(--yellow)} /* ── industries ──────────────────────────────────────────────────────── */ .ind{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,430px);gap:clamp(14px,3vw,50px);align-items:baseline;padding:clamp(26px,3.4vw,46px) 0;border-top:1px solid var(--line)} .ind:last-child{border-bottom:1px solid var(--line)} .ind-num{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--faint)} .ind-name{font-family:var(--display);font-size:clamp(30px,4.6vw,80px);text-transform:uppercase;line-height:1;transition:color .3s} .ind:hover .ind-name{color:var(--yellow)} .ind-desc{display:block;font-size:15px;line-height:1.6;color:var(--muted);margin:0} .ind-count{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--faint);margin-top:12px;text-transform:uppercase} @media (max-width:1024px){ .cs-grid{grid-template-columns:minmax(0,1fr);gap:22px} .built-list{columns:2} .ind{grid-template-columns:70px minmax(0,1fr);row-gap:12px} .ind-meta{grid-column:2/-1} } @media (max-width:760px){ .built-list{columns:1} .gallery{grid-template-columns:minmax(0,1fr)} /* Label on its own line, chips still flow and wrap — stacking one chip per row pushed the work itself below two screens of filters. */ .facet{align-items:flex-start;gap:9px} .facet-label{width:100%;margin-bottom:3px} .case-hero{height:min(70vh,620px)} } /* ── inverted sections (About runs black / white / black) ────────────── */ .invert{background:var(--white);color:var(--black)} .invert .eyebrow{color:#6d6d68} .invert .lede{color:#4c4c48} .invert .rule{background:rgba(11,11,12,.14)} .invert .belief{border-top-color:rgba(11,11,12,.14)} .invert .belief p{color:#4c4c48} .invert .pair{border-bottom-color:rgba(11,11,12,.14)} .invert .pairs{border-top-color:rgba(11,11,12,.14)} .invert .pair-ask{color:rgba(11,11,12,.42)} .invert .pair-need{color:var(--black)} .invert .pairs-head span{color:#6d6d68} /* ── the throughline device ──────────────────────────────────────────── */ .pairs-head{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);gap:clamp(10px,2vw,30px);margin-bottom:6px} .pairs-head span{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)} .pairs-head span:nth-child(2){text-align:center} .pairs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .pair{ display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr); gap:clamp(10px,2vw,30px);align-items:baseline; padding:clamp(15px,2.1vw,26px) 0;border-bottom:1px solid var(--line); } .pair-ask,.pair-need{font-family:var(--display);font-size:clamp(19px,2.7vw,42px);text-transform:uppercase;line-height:1.04} .pair-ask{ color:var(--faint);text-decoration:line-through; text-decoration-color:var(--yellow);text-decoration-thickness:.055em; } .pair-need{color:var(--white)} .pair-arrow{text-align:center;color:var(--yellow);font-size:clamp(15px,1.8vw,24px);line-height:1.3} /* ── about ───────────────────────────────────────────────────────────── */ .about-lead{font-size:clamp(38px,7.4vw,136px);line-height:1;letter-spacing:-.014em} .about-lead .accent{color:var(--yellow)} .belief{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,5vw,84px);padding:clamp(28px,4.6vh,60px) 0;border-top:1px solid var(--line)} .belief:last-child{border-bottom:1px solid var(--line)} .belief h3{font-family:var(--display);font-size:clamp(23px,3.1vw,50px);text-transform:uppercase;line-height:1.04;margin:0;letter-spacing:-.005em} .belief p{margin:0;font-size:16px;line-height:1.62;color:var(--muted);max-width:54ch} .about-close{font-size:clamp(36px,6.6vw,118px);line-height:1} /* ── services (Landor: blue field, huge white type) ──────────────────── */ .svc-page{background:var(--blue);color:#fff} .svc-page .eyebrow{color:rgba(255,255,255,.72)} .svc-page .lede{color:rgba(255,255,255,.86)} .svc-head{padding:clamp(132px,19vh,210px) var(--pad) clamp(30px,5vh,58px)} .svc-head .wrap{max-width:1640px;margin:0 auto} .svc-list{padding:0 var(--pad) clamp(80px,12vh,150px)} .svc-list .wrap{max-width:1640px;margin:0 auto} .svc-row{ display:grid;grid-template-columns:104px minmax(0,1fr) minmax(0,392px); gap:clamp(12px,3vw,48px);align-items:baseline; padding:clamp(22px,3vw,42px) 0;border-top:1px solid rgba(255,255,255,.32); } .svc-row:last-child{border-bottom:1px solid rgba(255,255,255,.32)} .svc-num{font-size:12px;font-weight:700;letter-spacing:.18em;opacity:.72} .svc-name{font-family:var(--display);font-size:clamp(38px,6.6vw,118px);text-transform:uppercase;line-height:1;transition:opacity .3s} .svc-row:hover .svc-name{opacity:.66} .svc-meta{display:block} .svc-line{display:block;font-size:15px;line-height:1.55;color:rgba(255,255,255,.9)} .svc-go{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;margin-top:12px;text-transform:uppercase} .pill-dark{background:#fff;color:var(--blue)} .pill-dark:hover{background:var(--black);color:#fff} /* ── individual service ──────────────────────────────────────────────── */ .sd-head{padding:clamp(132px,19vh,205px) var(--pad) clamp(30px,4.6vh,54px)} .sd-head .wrap{max-width:1640px;margin:0 auto} .sd-title{font-size:clamp(46px,9.4vw,168px);line-height:1;letter-spacing:-.014em} .sd-impact{font-size:clamp(18px,1.9vw,30px);line-height:1.42;max-width:34ch;margin:clamp(22px,3.4vh,40px) 0 0} .sd-media{padding:0 var(--pad)} .sd-media .wrap{max-width:1640px;margin:0 auto} .sd-media .work-media{aspect-ratio:21/9} .includes{columns:2;column-gap:clamp(24px,4vw,66px);margin:0;padding:0;list-style:none} .includes li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600} /* ── contact ─────────────────────────────────────────────────────────── */ .ct-head{padding:clamp(132px,19vh,210px) var(--pad) clamp(20px,3vh,40px)} .ct-head .wrap{max-width:1640px;margin:0 auto} .ct-q{font-size:clamp(46px,9.6vw,172px);line-height:.98;letter-spacing:-.015em} .ct-q .accent{color:var(--yellow)} .ct-body{padding:clamp(30px,5vh,60px) var(--pad) clamp(90px,13vh,160px)} .ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(30px,6vw,96px);max-width:1640px;margin:0 auto;align-items:start} .form{display:grid;gap:22px;max-width:620px;margin-top:clamp(30px,4.4vh,52px)} .field label{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;margin-bottom:7px} .field input,.field textarea,.field select{ width:100%;background:transparent;border:0;border-bottom:1px solid var(--line); color:var(--white);font-family:inherit;font-size:16px;padding:11px 0;outline:none;border-radius:0; transition:border-color .3s; } .field textarea{resize:vertical;min-height:104px;line-height:1.55} .field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--yellow)} .field input::placeholder,.field textarea::placeholder{color:rgba(241,240,236,.28)} .form-note{font-size:12px;line-height:1.6;color:var(--faint);margin:0;max-width:52ch} .ct-aside dt{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--faint);text-transform:uppercase} .ct-aside dd{margin:6px 0 22px;font-size:16px} .ct-aside dd a:hover{color:var(--yellow)} .form-sent{border:1px solid var(--yellow);border-radius:10px;padding:18px 20px;color:var(--white);font-size:14px;line-height:1.6} @media (max-width:1024px){ .belief{grid-template-columns:minmax(0,1fr);gap:14px} .svc-row{grid-template-columns:76px minmax(0,1fr);row-gap:12px} .svc-meta{grid-column:2/-1} .ct-grid{grid-template-columns:minmax(0,1fr)} } @media (max-width:760px){ .includes{columns:1} .pairs-head,.pair{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:8px} .sd-media .work-media{aspect-ratio:4/3} } /* ══ Site chrome ══════════════════════════════════════════════════════ Header, menu overlay and footer. In the prototype all of this was inline styles on the markup, with the breakpoints re-applied as inline styles by a resize handler. Here it is ordinary CSS with ordinary media queries, and setupNav() only touches the handful of properties it actually themes (background, border colour, ink, and the CTA colours). */ /* ── header ──────────────────────────────────────────────────────────── */ .site-header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px clamp(20px,4vw,64px);border-bottom:1px solid transparent;transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;pointer-events:auto} .site-brand{font-family:var(--display);font-size:26px;letter-spacing:.01em;color:var(--white);line-height:1} .site-brand:hover{color:inherit} .site-nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,38px)} .site-nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,38px);margin:0;padding:0;list-style:none} .site-nav-links a{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--white)} .site-nav-links a:hover{opacity:.62} .site-nav-links .current-menu-item > a{opacity:.62} .site-cta{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;font-size:16px;transition:background .4s ease,color .4s ease} .site-cta:hover{background:var(--red);color:#fff} /* ── burger ──────────────────────────────────────────────────────────── */ .site-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer} .site-burger span{display:block;width:24px;height:2px;background:var(--white);transition:transform .3s ease,opacity .3s ease} .site-burger.is-open span:first-child{transform:translateY(3.5px) rotate(45deg)} .site-burger.is-open span:last-child{transform:translateY(-3.5px) rotate(-45deg)} /* ── menu overlay ────────────────────────────────────────────────────── */ .site-menu{position:fixed;top:0;left:0;right:0;z-index:59;display:flex;flex-direction:column;gap:6px;background:var(--black);color:var(--white);padding:96px clamp(20px,6vw,48px) 40px;transform:translateY(-102%);transition:transform .5s var(--ease);pointer-events:none} .site-menu.is-open{transform:translateY(0);pointer-events:auto} .site-menu a{font-family:var(--display);font-size:clamp(30px,9vw,44px);line-height:1.18;text-transform:uppercase;color:var(--white)} .site-menu a:hover{color:var(--yellow)} .site-menu .menu-mail{margin-top:22px;font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:none;color:var(--muted)} /* ── footer ──────────────────────────────────────────────────────────── */ .site-footer{background:var(--blue);color:#fff;padding:clamp(50px,8vh,92px) clamp(20px,4vw,64px) 34px} .site-footer a:hover{color:var(--yellow)} .site-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(28px,4vw,64px);max-width:1560px;margin:0 auto} .site-footer-brand{display:flex;flex-direction:column;gap:18px;max-width:34ch} .site-footer-brand .wordmark{font-family:var(--display);font-size:36px;line-height:1} .site-footer-brand p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.8)} .site-footer-col{display:flex;flex-direction:column;gap:12px} .site-footer-col ul{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none} .site-footer-col .col-title{font-size:10px;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.6);margin-bottom:4px} .site-footer-col a{font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase} .site-footer-col .plain{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none} .site-footer-col span.plain{color:rgba(255,255,255,.8)} .site-footer-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;max-width:1560px;margin:clamp(40px,7vh,80px) auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.28)} .site-footer-base span{font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.7)} .site-footer-base a{font-size:11px;font-weight:600;letter-spacing:.16em} /* ── chrome breakpoints (these replace setupResponsive's inline styles) ─ */ @media (max-width:1023px){ .site-nav-links{display:none} .site-burger{display:flex} } /* ══ Front page ═══════════════════════════════════════════════════════ Promoted out of the prototype's inline styles. [data-band], [data-par] and [data-tiles] are driven by home.js, so only the static layout lives here. */ /* ── hero ────────────────────────────────────────────────────────────── */ .home-hero{position:relative;height:240vh;background:var(--black)} .home-hero-stick{position:sticky;top:0;height:100vh;overflow:hidden} .home-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .home-hero-type{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:22px;padding:0 clamp(20px,4vw,64px) clamp(56px,9vh,110px);will-change:transform,opacity} .home-hero-eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted)} .home-hero h1{margin:0;font-family:var(--display);font-size:clamp(46px,9.4vw,180px);line-height:1;letter-spacing:-.005em;text-transform:uppercase;color:var(--white)} .home-hero h1 span{display:block;color:var(--yellow)} .home-hero-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px} .home-hero-foot p{margin:0;max-width:46ch;font-size:clamp(14px,1.1vw,17px);line-height:1.6;color:var(--muted)} .home-hero-cta{display:flex;align-items:center;gap:14px;color:var(--white)} .home-hero-cta span:first-child{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);font-size:17px;transition:background .3s ease,color .3s ease} .home-hero-cta:hover span:first-child{background:var(--white);color:var(--black)} .home-hero-cta span:last-child{font-size:11px;font-weight:600;letter-spacing:.18em} /* ── marquee ─────────────────────────────────────────────────────────── */ .home-marquee{overflow:hidden;background:var(--blue);color:#fff;padding:18px 0;white-space:nowrap} .home-marquee-track{display:inline-flex;animation:accanto-marquee 26s linear infinite} .home-marquee-track span{font-family:var(--display);font-size:clamp(22px,2.6vw,42px);letter-spacing:.02em;text-transform:uppercase;padding-right:.4em} /* ── positioning ─────────────────────────────────────────────────────── */ .home-section{padding:clamp(70px,12vh,150px) clamp(20px,4vw,64px)} .home-section--light{background:var(--white);color:var(--black)} .home-section--dark{background:var(--black);color:var(--white)} .home-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,5vw,90px);max-width:1560px;margin:0 auto} .home-eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;opacity:.55;margin-bottom:18px} .home-h2{margin:0;font-family:var(--display);font-size:clamp(34px,5.4vw,96px);line-height:1;letter-spacing:-.008em;text-transform:uppercase} .home-body{display:flex;flex-direction:column;gap:20px} .home-body p{margin:0;font-size:clamp(14px,1.1vw,17px);line-height:1.65;color:#4c4c48} .home-section--dark .home-body p{color:var(--muted)} .home-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} .home-pills span{border:1px solid rgba(11,11,12,.2);border-radius:999px;padding:8px 16px;font-size:10px;font-weight:600;letter-spacing:.16em} /* ── home service rows ───────────────────────────────────────────────── */ .home-rows{max-width:1560px;margin:0 auto;border-top:1px solid rgba(11,11,12,.12)} .home-row{display:grid;grid-template-columns:70px minmax(180px,1fr) 2fr 60px;align-items:center;gap:clamp(14px,2vw,34px);padding:clamp(22px,3vw,40px) clamp(10px,1.5vw,22px);border-bottom:1px solid rgba(11,11,12,.12);color:inherit;transition:background .3s ease,color .3s ease} .home-row:hover{background:var(--blue);color:#fff} .home-row:hover .home-row-desc{color:rgba(255,255,255,.82)} .home-row-num{font-size:11px;font-weight:600;letter-spacing:.14em;opacity:.5} .home-row-name{font-family:var(--display);font-size:clamp(24px,2.8vw,46px);line-height:1.05;text-transform:uppercase} .home-row-desc{font-size:14px;line-height:1.6;color:#4c4c48} .home-row-arrow{justify-self:end;font-size:18px} /* ── craft ───────────────────────────────────────────────────────────── */ .home-craft{position:relative;min-height:112vh;background:var(--black);overflow:hidden} .home-craft canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .home-craft-in{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,7vh,90px);min-height:112vh;padding:clamp(70px,12vh,150px) clamp(20px,4vw,64px);pointer-events:none} .home-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px)} .home-layer{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--line);opacity:.32;transition:opacity .45s ease,transform .45s ease,border-color .45s ease} .home-layer span:nth-child(1){font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--faint)} .home-layer span:nth-child(2){font-family:var(--display);font-size:clamp(18px,1.9vw,30px);text-transform:uppercase;color:var(--white)} .home-layer span:nth-child(3){font-size:12px;line-height:1.5;color:var(--muted)} /* ── bands ───────────────────────────────────────────────────────────── */ .home-work-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;max-width:1560px;margin:0 auto clamp(30px,5vh,60px)} .home-all{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.16em} .home-all span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(11,11,12,.2);font-size:15px;transition:background .3s ease,color .3s ease} .home-all:hover span{background:var(--blue);color:#fff} .band{display:block;position:relative;aspect-ratio:21/8;transform-origin:50% 50%;will-change:transform;overflow:hidden} .band-img{position:absolute;inset:-18% 0} .band-img img{display:block;width:100%;height:100%;object-fit:cover} .band-tint{position:absolute;inset:0} .band-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px} .band-label b{font-family:var(--display);font-size:clamp(40px,6.4vw,116px);line-height:1;letter-spacing:.01em;font-weight:400;color:#fff;text-transform:uppercase;text-shadow:0 6px 40px rgba(0,0,0,.45)} .band-label i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.34em;color:rgba(255,255,255,.8)} .band-num{position:absolute;top:clamp(14px,1.4vw,22px);left:clamp(16px,1.6vw,26px);font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.78)} .band-sector{position:absolute;bottom:clamp(14px,1.4vw,22px);left:clamp(16px,1.6vw,26px);font-size:10px;font-weight:600;letter-spacing:.18em;color:rgba(255,255,255,.78)} .band-cap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,3vw,60px);align-items:start;background:#fff;padding:clamp(26px,3.2vw,50px) clamp(20px,4vw,64px) clamp(30px,3.6vw,56px);border-bottom:1px solid rgba(11,11,12,.1)} .band-cap h3{margin:0;font-family:var(--display);font-size:clamp(30px,4.2vw,74px);line-height:1;letter-spacing:-.01em;text-transform:uppercase;color:var(--black)} .band-cap .band-cap-meta{font-size:11px;font-weight:600;letter-spacing:.16em;opacity:.55} .band-cap p{margin:0;font-size:clamp(14px,1.15vw,17px);line-height:1.6;color:#4c4c48} .band-cap .band-more{display:inline-flex;align-items:center;gap:12px;background:var(--blue);color:#fff;padding:15px 26px;font-size:11px;font-weight:600;letter-spacing:.16em;transition:background .3s ease} .band-cap .band-more:hover{background:var(--black);color:#fff} .band-cap > div{display:flex;flex-direction:column;gap:10px} .band-cap > div:last-child{align-items:flex-start;gap:clamp(18px,2vw,28px);max-width:56ch} /* ── featured ────────────────────────────────────────────────────────── */ .home-featured{position:relative;background:var(--blue);color:#fff;overflow:hidden} .home-featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));min-height:88vh} .home-featured-copy{display:flex;flex-direction:column;justify-content:center;gap:26px;padding:clamp(60px,10vh,120px) clamp(20px,4vw,64px)} .home-featured-copy h2{margin:0;font-family:var(--display);font-size:clamp(50px,7vw,132px);line-height:1;text-transform:uppercase} .home-featured-copy p{margin:0;max-width:42ch;font-size:16px;line-height:1.6;color:rgba(255,255,255,.82)} .home-featured-media{position:relative;min-height:60vh;overflow:hidden} /* ── closing CTA ─────────────────────────────────────────────────────── */ .home-cta{position:relative;background:var(--white);color:var(--black);padding:clamp(70px,12vh,150px) clamp(20px,4vw,64px)} .home-cta-bar{height:10px;background:var(--yellow);margin-bottom:clamp(40px,7vh,80px)} .home-cta-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:34px;max-width:1560px;margin:0 auto} .home-cta-circle{display:grid;place-items:center;width:clamp(80px,9vw,124px);height:clamp(80px,9vw,124px);border-radius:50%;background:var(--blue);color:#fff;font-size:26px;transition:background .3s ease} .home-cta-circle:hover{background:var(--black);color:#fff} @media (max-width:1023px){ .home-legend{grid-template-columns:repeat(2,1fr)} .home-row{grid-template-columns:52px 1fr 40px;grid-template-areas:'num name arrow' '. desc desc'} .home-row-num{grid-area:num}.home-row-name{grid-area:name} .home-row-desc{grid-area:desc}.home-row-arrow{grid-area:arrow} } @media (max-width:759px){ .home-hero{height:180vh} .band{aspect-ratio:4/3} .home-legend{grid-template-columns:1fr} } /* ── testimonial cite ─────────────────────────────────────────────── */ .cs-cite{display:flex;align-items:center;gap:14px;margin-top:22px} .cs-avatar{flex:0 0 auto;display:block;width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--white)} .cs-avatar img{width:100%;height:100%;object-fit:cover;display:block} .cs-cite-name{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}