/* ============================================================ FRESH SYNC — sync edition Spatial typography · tone inversion · horizontal portfolio ============================================================ */ :root{ --blue:#4E6DFF; --pink:#F8B1E2; --yellow:#FFED2C; --red:#FF3217; --paper:#FFFFFF; /* live inversion theme */ --bg:#4E6DFF; --fg:#FFFFFF; --type-display:clamp(3.2rem,9.8vw,10.5rem); --type-mid:clamp(1.7rem,3.4vw,3.2rem); --type-label:1rem; --type-body:1rem; --sp-1:12px;--sp-2:24px;--sp-3:48px;--sp-4:96px; --sp-5:clamp(120px,18vh,240px); --edge:clamp(24px,5vw,96px); --gap:clamp(16px,2vw,40px); --f-display:"Viaoda Libre",serif; --f-second:"ZCOOL QingKe HuangYou",sans-serif; } *{margin:0;padding:0;box-sizing:border-box;} html.lenis,html.lenis body{height:auto;} .lenis.lenis-smooth{scroll-behavior:auto!important;} body{ font-family:var(--f-second); background:var(--bg); color:var(--fg); overflow-x:hidden; -webkit-font-smoothing:antialiased; } ::selection{background:var(--yellow);color:var(--blue);} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left;} svg{display:block;} :focus-visible{outline:3px solid var(--red);outline-offset:4px;} .hairline{border:none;border-top:1px solid color-mix(in srgb,var(--fg) 35%,transparent);} .rule{margin:0 var(--edge);} .rule--full{margin:0;} /* ---------- type voices ---------- */ h1,h2,h3,h4,h5,h6{font-weight:400;} .t-display{font-family:var(--f-display);font-weight:400;font-size:var(--type-display);line-height:.92;letter-spacing:-.02em;} /* 2026-08-24: any .t-display heading not already scoped to a smaller context (CTA sections, the store "coming soon" heading, the homepage mid-page heading) should never exceed the homepage hero title's own size */ .final .t-display,.start-small-bg .t-display,.soon .t-display{font-size:clamp(2.2rem,min(6.4vw,10vh),7rem);margin-top:.16em;} /* ---------- CSS-only entrance baseline ---------- Elements marked data-enter="rise"/"scale" are revealed by JS (initPageFadeIn in main.js), but main.js only runs once cms.js finishes fetching/failing-over — a gap of a second or more. Without this rule those elements (and anything nested inside them, e.g. the orbit's unpositioned cards) sit fully visible and unstyled during that gap, which reads as a layout glitch on load. Hiding them the instant JS is confirmed present (via the .has-js class set synchronously in ) removes that flash; the safe-reveal animation is a backstop in case main.js never runs. */ .has-js [data-enter="rise"],.has-js [data-enter="scale"]{ opacity:0; animation:enterSafeReveal 0s linear 5s forwards; } @keyframes enterSafeReveal{to{opacity:1;}} @media(prefers-reduced-motion: reduce){ .has-js [data-enter="rise"],.has-js [data-enter="scale"]{opacity:1;animation:none;} } .t-mid{font-family:var(--f-display);font-weight:400;font-size:var(--type-mid);line-height:1.05;letter-spacing:-.01em;} .t-label{font-family:var(--f-second);font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase;} .t-label--dim{opacity:.72;} .t-body{font-family:var(--f-second);font-size:var(--type-body);letter-spacing:.06em;line-height:1.85;text-transform:uppercase;max-width:36ch;} .t-body--dim{opacity:.72;} .idx{display:flex;align-items:baseline;gap:10px;font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase;} .idx::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);align-self:center;flex:0 0 auto;} .idx em{font-style:normal;opacity:.55;} /* ---------- grid ---------- */ .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gap);} .section{padding:var(--sp-5) var(--edge);position:relative;} .c-idx{grid-column:1/3;} .c-1-9{grid-column:1/10;} .c-3-8{grid-column:3/8;} .c-3-10{grid-column:3/10;} .c-8-13{grid-column:8/13;} .c-3-11{grid-column:3/12;} .c-3-12{grid-column:3/13;} .c-10-13{grid-column:10/13;} @media(max-width:900px){ .c-idx{grid-column:1/-1;margin-bottom:var(--sp-2);} .c-1-9,.c-3-8,.c-3-10,.c-3-11,.c-3-12,.c-8-13,.c-10-13{grid-column:1/-1;} } /* headline stagger */ .stagger .hl-line{display:block;overflow:hidden;} .stagger .hl-line>span{display:block;} .stagger .hl-line--in1>span{margin-left:calc(100%/8 * 1);} .stagger .hl-line--in2>span{margin-left:calc(100%/8 * 2);} @media(max-width:900px){.stagger .hl-line--in1>span,.stagger .hl-line--in2>span{margin-left:0;}} .u-accent{position:relative;white-space:nowrap;z-index:1;} .u-accent::after{ content:"";position:absolute;left:2%;right:2%;bottom:.06em;height:.09em; background:var(--yellow);z-index:-1; transform:scaleX(0);transform-origin:left; } .u-accent.is-drawn::after{transform:scaleX(1);transition:transform .9s cubic-bezier(.22,1,.36,1) .15s;} /* ---------- controls ---------- */ .link-cta{ display:inline-flex;align-items:center;gap:12px; font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase; padding-bottom:8px;border-bottom:2px solid var(--fg); } .link-cta span{transition:transform .35s cubic-bezier(.22,1,.36,1);display:inline-block;} .link-cta:hover span{transform:translateX(6px);} .link-cta i{font-style:normal;color:var(--red);} .btn-solid{ display:inline-flex;align-items:center;gap:12px; padding:18px 36px;border-radius:999px; font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase; background:var(--fg);color:var(--bg);border:2px solid var(--fg); white-space:nowrap; } /* ---------- cursor ---------- */ .cursor{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%; background:var(--red);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);display:none;} @media(pointer:fine){.cursor{display:block;}} /* ============================================================ LOADER ============================================================ */ /* White loader with a quick-fire stack of project images piling up centre-screen (2026-08-21 redesign) — images injected by initLoader from the CMS projects. */ .loader{ position:fixed;inset:0;z-index:950; background:#fff;color:var(--blue); display:flex;align-items:flex-end;justify-content:space-between; padding:var(--sp-3) var(--edge); } .loader__logo{width:min(20vw,130px);} .loader__count{font-family:var(--f-display);font-size:clamp(3rem,9vw,7rem);line-height:1;} .loader__stack{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:clamp(300px,34vw,500px);aspect-ratio:4/3;pointer-events:none;} .loader__stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border-radius:14px;opacity:0;box-shadow:0 18px 60px -18px rgba(15,25,80,.35); will-change:transform,opacity;} /* ============================================================ NAV — logo square · centred bar · right tab (inversion-aware) ============================================================ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:800; display:grid;grid-template-columns:auto 1fr auto;align-items:start; pointer-events:none; } .nav>*{pointer-events:auto;} .nav__logo{ width:118px;height:118px; background:var(--fg);color:var(--bg); display:flex;align-items:center;justify-content:center; border-radius:0 0 18px 0; transition:background .6s,color .6s; } .nav__logo svg{width:62%;transition:transform .5s cubic-bezier(.22,1,.36,1);} .nav__logo:hover svg{transform:rotate(-8deg) scale(1.06);} .nav__links{ justify-self:center; display:flex;gap:clamp(18px,3vw,46px); background:var(--fg);color:var(--bg); padding:16px 34px;border-radius:0 0 16px 16px; transition:background .6s,color .6s; } .nav__links a{font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase;position:relative;padding-bottom:4px;} .nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--yellow);transition:right .35s cubic-bezier(.22,1,.36,1);} .nav__links a:hover::after{right:0;} .nav__cta{ background:var(--fg);color:var(--bg); padding:16px 26px;border-radius:0 0 0 16px; font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase; display:flex;align-items:center;gap:8px; transition:background .35s,color .35s; } .nav__cta:hover{background:var(--red);color:#fff;} .nav__cta i{font-style:normal;} @media(max-width:900px){ .nav__links{display:none;} .nav__logo{width:84px;height:84px;} } /* ============================================================ HERO ============================================================ */ .hero{ min-height:100vh; padding:calc(var(--sp-3) + 84px) var(--edge) var(--sp-3); display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-3); } /* 2026-08-21: heading vertically centred — the hero grid row's height is set by the taller caption/image column, and the h1 centres itself against it instead of hugging the top (auto margins on the grid + align-self on the heading) */ .hero>.grid{margin-top:auto;margin-bottom:auto;} .hero .t-display{align-self:center;} .hero__welcome{margin-bottom:var(--sp-2);white-space:nowrap;} /* sized against BOTH width and viewport height so the hero (incl. CTA buttons) always fits above the fold */ .hero .t-display{font-size:clamp(2.2rem,min(6.4vw,10vh),7rem);} .hero__caption{display:flex;flex-direction:column;gap:var(--sp-2);padding-top:.5em;} .hero__caption .chip{ width:64px;height:52px;border-radius:10px; background:var(--fg);color:var(--bg); display:flex;align-items:center;justify-content:center; } .hero__caption .chip svg{width:66%;} /* Site-image slots (assets/cms.js applyImages) — a plain grey placeholder until an image is uploaded via admin.html's Images tab, at which point an is injected to fill it. */ .cms-img-slot{position:relative;overflow:hidden;border-radius:14px;background:#D9D9D9;} /* 9:16 — the native aspect of the Higgsfield video frames, so NOTHING is cropped anywhere in the journey. Width-capped by viewport height so the tall box always fits (height = width × 16/9 ≤ ~44vh). */ .hero .cms-img-slot--hero{margin-top:var(--sp-1);aspect-ratio:9/16; width:min(100%,24.75vh);} /* short viewports: compress the caption column so the CTA row stays above the fold */ @media (max-height:800px){ .hero .cms-img-slot--hero{width:min(100%,16vh);} .hero__caption{padding-top:0;} .hero__caption p{font-size:.88rem;line-height:1.5;} } /* 9:16 to match the native aspect of the uploaded CTA art (same frames as the hero slot) — the old 4:5 box + object-fit:cover cropped the image top/bottom. With the box at the image's own ratio, cover fills it edge-to-edge with nothing cut off. Width stays capped by the column; height follows. */ .final .cms-img-slot--final{aspect-ratio:9/16;width:100%;margin-top:var(--sp-2);} /* Traveling hero image (main.js initHeroImageTravel, desktop only): a body-level clone of the hero slot that drifts down to the brand-timeline media frame on scroll. z-index:-1 keeps it BEHIND all page text/content but above the body background (sections are transparent — the theme colour lives on body). */ .img-travel{position:absolute;top:0;left:0;z-index:-1;pointer-events:none; will-change:transform,filter;} /* inner carries the visual (grey box / image) plus the floating 3D physics — NO overflow clipping on the outer, or the tilt/warp would get cut off */ .img-travel__inner{position:relative;width:100%;height:100%;border-radius:14px; overflow:hidden;background:#D9D9D9;will-change:transform;} .img-travel img{width:100%;height:100%;object-fit:cover;display:block;} /* the real hero slot keeps its layout space but hands its pixels to the traveler */ .cms-img-slot.is-travel-src{visibility:hidden;} /* Arrival twin inside the brand-timeline sticky media: mirrors the canvas frame's geometry exactly (the traveler parks on these same document coordinates, so the section sliding over the traveler reveals this twin seamlessly). Sits UNDER the frame (z-index 0 vs the frame's 1) so the canvas sequence draws over it, then main.js fades it out over the first stretch of the pinned scroll. */ /* Portrait arrival (2026-08-21 user request): the image stays 4:5 through the whole journey — hero slot, traveler, and this landing spot in the Establish Creative Direction section all share the same portrait aspect. */ .img-travel-dest{position:absolute;left:70%;top:50%;transform:translate(-50%,-50%); width:calc(var(--hero-img-w,clamp(200px,16vw,280px)) * 1.4); height:calc(var(--hero-img-h,480px) * 1.4); aspect-ratio:9/16;z-index:0; border-radius:14px;overflow:hidden;background:#D9D9D9;pointer-events:none;} .img-travel-dest img{width:100%;height:100%;object-fit:cover;display:block;} .hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap;} .hero__meta{display:flex;gap:var(--sp-3);flex-wrap:wrap;} .hero__ctas{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;} /* ============================================================ STATEMENT ============================================================ */ .statement .t-mid{line-height:1.28;} .statement .t-display{font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.05;} .statement .word{opacity:.14;display:inline-block;} @media (prefers-reduced-motion: reduce){.statement .word{opacity:1;}} /* ============================================================ PATHWAY — 5 steps ============================================================ */ .path-row{ padding:var(--sp-3) 0; border-top:1px solid color-mix(in srgb,var(--fg) 35%,transparent); align-items:baseline; transition:transform .4s cubic-bezier(.22,1,.36,1); } .path-row:hover{transform:translateX(14px);} .path-row:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--fg) 35%,transparent);} .path-row__num{font-family:var(--f-display);font-size:var(--type-mid);opacity:.35;} .path-row__title{font-family:var(--f-display);font-size:var(--type-mid);line-height:1.05;} .path-row__desc{max-width:34ch;} @media(max-width:900px){.path-row__desc{margin-top:var(--sp-1);}} /* ============================================================ WORK — horizontal scroll (pinned) ============================================================ */ .work{position:relative;height:100vh;display:flex;flex-direction:column;overflow:hidden;} .work .t-display{font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.06;} .work__head{padding:calc(var(--sp-2) + 96px) var(--edge) var(--sp-2);flex:0 0 auto; display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2);} .work__head .t-display{grid-column:auto;} .work .stagger .hl-line--in1>span,.work .stagger .hl-line--in2>span{margin-left:0;} .work__stage{overflow:hidden;flex:1;min-height:0;display:flex;} .work__track{display:flex;gap:var(--sp-3);padding:0 var(--edge);width:max-content;align-items:stretch;height:100%;} .work-card{ width:min(30vw,360px);align-self:flex-start; display:flex;flex-direction:column;gap:var(--sp-2); padding-bottom:2px;cursor:pointer; } .work-card .plate{flex:none;aspect-ratio:4/3;transition:transform .4s cubic-bezier(.22,1,.36,1);} .work-card:hover .plate,.work-card:focus-visible .plate{transform:translateY(-6px);} .work-card:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:8px;} /* caption kept in the markup for aria-label + no-JS fallback, hidden visually — the grid reads as a clean row of click-through thumbnails rather than a captioned list */ .work-card__head,.work-card__tags{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .work-card--cta{ width:min(52vw,460px); justify-content:center;align-items:flex-start;gap:var(--sp-3); } .work__progress{ height:2px;margin:var(--sp-2) var(--edge) var(--sp-3);flex:0 0 auto; background:color-mix(in srgb,var(--fg) 18%,transparent); position:relative;overflow:hidden; } @media(max-width:900px){ .work{height:auto;overflow:visible;} .work__stage{display:block;} .work__track{flex-direction:column;width:auto;height:auto;padding-bottom:var(--sp-2);} .work-card{width:100%;height:auto;} .work-card .plate{flex:none;aspect-ratio:16/10;} } .work__progress i{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left;display:block;} @media(max-width:900px){ .work__track{width:auto;flex-direction:column;align-items:stretch;} .work-card,.work-card--cta{width:100%;} .work__progress{display:none;} } /* plates */ .plate{ border-radius:6px;overflow:hidden;position:relative; background:var(--blue);color:#fff; } .plate__inner{position:absolute;inset:-12%;display:flex;align-items:center;justify-content:center;will-change:transform;} .plate__inner svg{width:32%;opacity:.92;} .plate__grid{ position:absolute;inset:0; background-image: linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:64px 64px; } .plate--soft{background:#EEF1FF;color:var(--blue);} .plate--soft .plate__grid{background-image: linear-gradient(rgba(78,109,255,.13) 1px,transparent 1px), linear-gradient(90deg,rgba(78,109,255,.13) 1px,transparent 1px);} .caption-pair{display:flex;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-1);} /* ============================================================ START SMALL ============================================================ */ .start-small__card{ margin-top:var(--sp-4); border:1px solid color-mix(in srgb,var(--fg) 35%,transparent); border-radius:8px; padding:clamp(28px,4vw,64px); } .start-small__card .grid{align-items:baseline;} /* ============================================================ OPERATING MODEL — engagement rows ============================================================ */ .model-row{ padding:var(--sp-3) 0; border-top:1px solid color-mix(in srgb,var(--fg) 35%,transparent); align-items:baseline; } .model-row:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--fg) 35%,transparent);} .model-row__title{font-family:var(--f-display);font-size:var(--type-mid);line-height:1.05;} .model-row__desc{max-width:36ch;} @media(max-width:900px){.model-row__desc{margin-top:var(--sp-1);}} /* ============================================================ INSIGHTS ============================================================ */ .insight{ padding:var(--sp-2) 0; border-top:1px solid color-mix(in srgb,var(--fg) 35%,transparent); align-items:baseline; transition:transform .35s cubic-bezier(.22,1,.36,1); display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gap); } .insight:hover{transform:translateX(14px);} .insight:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--fg) 35%,transparent);} .insight__cat{grid-column:1/3;} .insight__title{grid-column:3/11;font-family:var(--f-display);font-size:clamp(1.34rem,2.2vw,1.8rem);line-height:1.15;} .insight__arrow{grid-column:11/13;justify-self:end;color:var(--red);} @media(max-width:900px){ .insight{display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;} .insight__cat{display:none;} } /* ============================================================ BRAND TIMELINE — fixed camera, scrubbed world, swapping copy ============================================================ */ .brand-timeline{position:relative;height:500vh;} .brand-timeline_sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden; background:var(--blue);color:#fff;} .brand-timeline_media{position:absolute;inset:0;width:100%;height:100%;} /* 2026-08-21 user request: the scroll-sequence frame is now the EXACT same box as the hero image — identical dimensions (JS mirrors the hero slot's measured size into --hero-img-w/h), portrait, centered in the media column — with all overlays (edge-fade masks, lighten blend, grain) removed. The traveling hero image parks on this exact spot and the sequence takes over 1:1. */ /* the landing/sequence box is the hero image's proportions scaled up 1.4× — still portrait, still centred in the media column (2026-08-21 size bump) */ .brand-timeline_frame{position:absolute;left:70%;top:50%;transform:translate(-50%,-50%); width:calc(var(--hero-img-w,clamp(200px,16vw,280px)) * 1.4); height:calc(var(--hero-img-h,480px) * 1.4); aspect-ratio:9/16;z-index:1;border-radius:14px;overflow:hidden; opacity:0;transition:opacity 1.1s ease;} .brand-timeline_frame.is-ready{opacity:1;} .brand-timeline_canvas{position:absolute;inset:0;width:100%;height:100%;display:block;} .brand-timeline_grain{display:none;position:absolute;inset:-20px;pointer-events:none;opacity:.14; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:240px 240px; animation:fs-grain .9s steps(2) infinite;} @keyframes fs-grain{ 0%{transform:translate(0,0);} 25%{transform:translate(-14px,8px);} 50%{transform:translate(10px,-12px);} 75%{transform:translate(-6px,-16px);} 100%{transform:translate(12px,10px);} } @media (prefers-reduced-motion: reduce){.brand-timeline_grain{animation:none;}} .brand-timeline_content{position:absolute;inset:0;z-index:3;} .brand-timeline_copy{position:absolute;left:var(--edge);top:50%;transform:translateY(-50%); width:min(620px,40vw);height:clamp(240px,36vh,430px);} .brand-timeline_step{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;opacity:0;visibility:hidden;} .brand-timeline_index{font-family:var(--f-second);font-size:1rem;letter-spacing:.22em; display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;opacity:.85;} .brand-timeline_index::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);} .brand-timeline_heading{font-family:var(--f-display);font-weight:400; font-size:clamp(2.7rem,5.9vw,6.1rem);line-height:.96;letter-spacing:-.02em; margin-bottom:20px;} .brand-timeline_heading .word{display:inline-block;} .brand-timeline_description{font-family:var(--f-second);font-size:clamp(1.05rem,1.55vw,1.42rem); letter-spacing:.05em;line-height:1.5;max-width:36rem;text-transform:uppercase;opacity:.88;} .brand-timeline_rail{position:absolute;right:5vw;top:50%;transform:translateY(-50%); display:flex;flex-direction:column;align-items:center;gap:20px;z-index:4;} .brand-timeline_railnum{font-family:var(--f-second);font-size:1rem;letter-spacing:.18em; opacity:.35;transition:opacity .4s;} .brand-timeline_railnum.is-active{opacity:1;} .brand-timeline_railline{position:absolute;top:0;bottom:0;left:50%;width:1px;z-index:-1; background:rgba(255,255,255,.22);} .brand-timeline_railline b{position:absolute;inset:0;background:#fff;display:block; transform:scaleY(0);transform-origin:top center;} @media(max-width:900px){ .brand-timeline{height:450vh;} .brand-timeline_frame{right:auto;left:50%;top:12vh;transform:translateX(-50%);height:auto; width:calc(100% - var(--edge)*2);aspect-ratio:16/9;max-height:42vh;} .brand-timeline_copy{left:var(--edge);right:var(--edge);width:auto; top:auto;transform:none;bottom:7vh;height:clamp(200px,32vh,340px);} .brand-timeline_rail{right:18px;} } /* reduced-motion / no-JS fallback: stacked stages */ .brand-timeline.is-static{height:auto;} .brand-timeline.is-static .brand-timeline_sticky{position:relative;height:auto;overflow:visible; padding:var(--sp-5) 0;} .brand-timeline.is-static .brand-timeline_copy{position:relative;left:auto;bottom:auto;top:auto;transform:none;height:auto; margin:0 var(--edge);min-height:0;width:auto;display:flex;flex-direction:column;gap:var(--sp-4);} .brand-timeline.is-static .brand-timeline_step{position:static;transform:none;opacity:1;visibility:visible;} .brand-timeline.is-static .brand-timeline_rail{display:none;} /* ============================================================ CLIENTS — velocity loop marquee ============================================================ */ .clients{padding:var(--sp-4) 0;overflow:hidden; border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent); border-bottom:1px solid color-mix(in srgb,var(--fg) 25%,transparent);} .clients__loop{overflow:hidden;} .clients__track{display:flex;align-items:center;width:max-content;will-change:transform;} .clients__item{display:flex;align-items:center;gap:clamp(24px,3vw,56px); padding-right:clamp(24px,3vw,56px); font-family:var(--f-display);font-size:clamp(2.2rem,5.5vw,4.6rem); line-height:1;white-space:nowrap;} .clients__item i{font-style:normal;font-size:.4em;color:var(--red);transform:translateY(-.2em);} /* client logos uploaded via the admin panel replace the text name for that item — sized well below the giant marquee type (which runs 2.2rem-4.6rem) but still comfortably legible at a glance, the way a real "worked with" logo strip reads. */ .clients__logo{height:clamp(30px,4vw,52px);width:auto;max-width:min(46vw,220px); object-fit:contain;display:block;} /* ============================================================ START SMALL — full-background panel ============================================================ */ .start-small-bg{ position:relative;isolation:isolate;color:var(--blue); min-height:86vh;display:flex;flex-direction:column;justify-content:space-between; gap:var(--sp-4);padding:var(--sp-5) var(--edge); background:#fff;} .start-small-bg .u-accent::after{background:var(--yellow);} .team-row{position:relative;z-index:2;} .team-cards{grid-column:1/13;display:flex;flex-wrap:wrap;gap:14px;} .team-card{display:flex;align-items:center;gap:14px;padding:10px 18px 10px 10px;border-radius:999px; background:#fff;border:1px solid #E7EAF6;color:var(--blue);} .team-card__thumb{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;background:#EEF1FF; display:flex;align-items:center;justify-content:center;} .team-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);} .team-card__thumb svg{width:40%;height:40%;fill:currentColor;} .team-card__body{display:flex;flex-direction:column;line-height:1.2;} .team-card__body b{font-family:var(--f-body);font-weight:400;font-size:1rem;letter-spacing:.02em;} .team-card__body span{font-size:1rem;opacity:.6;letter-spacing:.02em;} .start-small-bg__foot{position:relative;z-index:2;align-items:end;} .start-small-bg__foot .t-body{opacity:.72;} /* ============================================================ HOW WE WORK — horizontal snap cards ============================================================ */ .hiw-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory; padding:var(--sp-3) var(--edge) var(--sp-2);margin:0 calc(var(--edge)*-1); scrollbar-width:none;-webkit-overflow-scrolling:touch;} .hiw-track::-webkit-scrollbar{display:none;} .hiw-card{flex:0 0 min(340px,80vw);scroll-snap-align:start; border:1px solid color-mix(in srgb,var(--fg) 35%,transparent);border-radius:12px; padding:var(--sp-3);min-height:320px;display:flex;flex-direction:column;gap:var(--sp-2); transition:transform .35s cubic-bezier(.22,1,.36,1),background .35s,color .35s;} .hiw-card:hover{transform:translateY(-8px);background:var(--fg);color:var(--bg);} .hiw-card__num{font-family:var(--f-display);font-size:clamp(2rem,4vw,3.2rem);opacity:.35;} .hiw-card .t-body{margin-top:auto;} /* ============================================================ INSIGHTS — staggered stamp cards ============================================================ */ .icards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap); align-items:start;margin-top:var(--sp-3);} .icard{background:#fff;color:var(--blue);border-radius:12px;overflow:hidden; border:1px solid #E7EAF6; display:flex;flex-direction:column;box-shadow:0 24px 60px -30px rgba(20,30,90,.45); transition:transform .4s cubic-bezier(.22,1,.36,1);} .icard:hover{transform:translateY(-10px) rotate(-.5deg);} .icard:nth-child(2){margin-top:var(--sp-4);} .icard:nth-child(4){margin-top:var(--sp-3);} .icard__head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 0;} .icard__head--foot{padding:0 20px 18px;} .icard__chip{width:30px;color:var(--blue);} .icard__chip svg{width:100%;height:auto;} .icard__num{font-family:var(--f-display);font-size:1.5rem;} .icard__body{padding:18px 20px;display:flex;flex-direction:column;gap:10px;} .icard__body h3{font-family:var(--f-display);font-size:clamp(1.34rem,1.6vw,1.5rem);line-height:1.2;} .icard__body p{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;opacity:.78;line-height:1.8;} .icard__img{position:relative;aspect-ratio:4/3.4;background:var(--blue);color:#fff; display:flex;align-items:center;justify-content:center;margin-top:auto;} .icard--flip .icard__img{margin-top:0;} .icard--flip .icard__body{margin-top:auto;} .icard__img svg{width:34%;position:relative;z-index:1;} .icard__img .plate__grid{position:absolute;inset:0;} @media(max-width:1100px){.icards{grid-template-columns:1fr 1fr;} .icard:nth-child(2){margin-top:var(--sp-3);}.icard:nth-child(4){margin-top:0;}} @media(max-width:640px){.icards{grid-template-columns:1fr;} .icard:nth-child(2),.icard:nth-child(4){margin-top:0;}} /* ============================================================ PRICING — store-style cards ============================================================ */ /* stretch (not start): cards sharing a row get equal heights, and each card's footer is pinned to its bottom edge (margin-top:auto on the divider), so the Engagement/CTA rows of neighbouring cards always sit on the same line. */ .pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch;} /* Inverted 2026-08-21 at the user's request: blue cards on the light section. */ .price-card{position:relative;background:var(--blue);color:#fff;border-radius:20px;overflow:hidden; border:1px solid var(--blue); display:flex;flex-direction:column; transition:transform .4s cubic-bezier(.22,1,.36,1);} .price-card:hover{transform:translateY(-6px);} /* overflow must be visible on the featured card so the badge can straddle its top border (nothing else pokes outside the card, so this is safe) */ .price-card--featured{border-color:var(--yellow);overflow:visible;} /* badge straddles the card's top border instead of stacking above the content — zero layout impact, so the featured card's internals line up exactly with the other cards (this was the source of the "imbalanced cards" complaint) */ .price-card__badge{position:absolute;top:0;left:clamp(20px,2.4vw,30px); transform:translateY(-50%);z-index:2; display:inline-flex;width:fit-content;white-space:nowrap; background:var(--yellow);color:var(--blue);border-radius:999px; padding:7px 16px; font-family:var(--f-second);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;} .price-card__value{padding:0 clamp(20px,2.4vw,30px) clamp(20px,2.2vw,26px);} .price-card__headline{font-family:var(--f-display);font-size:clamp(1.06rem,1.3vw,1.24rem);line-height:1.4;margin:0;} .price-card__more .price-card__relevance{font-family:var(--f-second);font-size:.94rem;letter-spacing:.03em; line-height:1.5;opacity:.62;text-transform:none;} .price-card__for{padding:0;margin:0;display:flex;flex-direction:column;gap:4px;} .price-card__for-label{font-family:var(--f-second);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;opacity:.42;} .price-card__for-text{font-family:var(--f-second);font-size:.92rem;letter-spacing:.03em;opacity:.72;} .price-card__includes{list-style:none;margin:0;padding:0; display:flex;flex-direction:column;gap:9px;} .price-card__includes li{position:relative;padding-left:26px;font-family:var(--f-second); font-size:.94rem;letter-spacing:.02em;line-height:1.4;opacity:.85;text-transform:none;} .price-card__includes li::before{content:"✓";position:absolute;left:0;top:0;color:var(--yellow);font-weight:600;} .price-card__toggle-wrap{display:flex;align-items:center;gap:8px;flex:0 0 auto;} .price-card__toggle-label{font-family:var(--f-second);font-size:.8rem;letter-spacing:.14em; text-transform:uppercase;opacity:.5;} .price-card__top{display:flex;gap:clamp(16px,2vw,26px);padding:clamp(20px,2.4vw,30px);align-items:center;} .price-card__thumb{width:clamp(84px,8vw,112px);aspect-ratio:1;border-radius:14px;flex:0 0 auto; position:relative;overflow:hidden;background:#fff;color:var(--blue); display:flex;align-items:center;justify-content:center;} .price-card__thumb--soft{background:rgba(255,255,255,.14);color:#fff;} .price-card__thumb svg{width:46%;position:relative;z-index:1;} .price-card__thumb .plate__grid{position:absolute;inset:0;background-size:28px 28px; background-image:linear-gradient(rgba(78,109,255,.14) 1px,transparent 1px), linear-gradient(90deg,rgba(78,109,255,.14) 1px,transparent 1px);} .price-card__thumb--soft .plate__grid{background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);} .price-card__info{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;} .price-card__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;} .price-card__title{font-family:var(--f-display);font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.1;} .price-card__num{font-family:var(--f-second);font-size:1rem;letter-spacing:.2em;opacity:.4;flex:0 0 auto;} .price-card__meta{font-family:var(--f-second);font-size:1rem;letter-spacing:.18em;text-transform:uppercase;opacity:.55;} .price-card__price{font-family:var(--f-display);font-size:clamp(1.4rem,2.2vw,1.9rem);margin-top:2px;} .price-card__more{height:0;opacity:0;overflow:hidden;} .price-card__more-inner{display:flex;flex-direction:column;gap:14px; padding:0 clamp(20px,2.4vw,30px) clamp(18px,2vw,24px);} .price-card__more-inner p{font-family:var(--f-second);font-size:1rem;letter-spacing:.06em; line-height:1.8;text-transform:uppercase;opacity:.75;} .price-card__more-inner strong{font-weight:400;opacity:1;} .price-card__divider{border-top:1px solid rgba(255,255,255,.28);margin:0 clamp(20px,2.4vw,30px); margin-top:auto;/* pins the footer to the card's bottom edge (equal-height rows) */} /* one uniform footer layout for every card: Engagement line on top, action row (CTA left, Details toggle right) underneath. Previously the foot was a single wrapping row, so cards with long CTA text wrapped to two levels while short ones stayed on one — neighbouring cards looked lopsided. */ .price-card__foot{display:flex;flex-direction:column;align-items:stretch;gap:14px; padding:clamp(16px,2vw,22px) clamp(20px,2.4vw,30px);} .price-card__model{display:flex;flex-direction:row;align-items:baseline;gap:12px;} .price-card__model span{font-family:var(--f-second);font-size:1rem;letter-spacing:.18em;text-transform:uppercase;opacity:.5;} .price-card__model strong{font-family:var(--f-display);font-weight:400;font-size:1.34rem;} .price-card__actions{display:flex;gap:10px;align-items:center;justify-content:space-between;} .price-card__cta{background:#fff;color:var(--blue);border-radius:999px;padding:14px 24px; font-family:var(--f-second);font-size:1rem;letter-spacing:.18em;text-transform:uppercase; white-space:nowrap;transition:background .3s;} .price-card__cta:hover{background:var(--yellow);} .price-card__toggle{position:relative;width:48px;height:48px;border-radius:50%;flex:0 0 auto; border:1px solid rgba(255,255,255,.45);color:#fff;cursor:pointer;background:transparent; transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s;} .price-card__toggle span{position:absolute;left:50%;top:50%;width:15px;height:2px; background:currentColor;transform:translate(-50%,-50%);} .price-card__toggle span:last-child{transform:translate(-50%,-50%) rotate(90deg);} .price-card__toggle:hover{border-color:#fff;} .price-card[data-open="true"] .price-card__toggle{transform:rotate(45deg);border-color:#fff;} @media(max-width:1050px){.pricing-grid{grid-template-columns:1fr;}} @media(max-width:520px){ .price-card__actions{flex-wrap:wrap;} } /* ============================================================ FINAL + FOOTER ============================================================ */ .final{ min-height:92vh; display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-4); padding:var(--sp-5) var(--edge); } .final__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap;} .final__contact{display:flex;flex-direction:column;gap:var(--sp-1);} .footer{--fg:#FF5517;--bg:#FFFFFF;background:var(--bg);color:var(--fg);padding:var(--sp-4) var(--edge) 0;overflow:hidden;} .footer h5{font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-bottom:var(--sp-2);} .footer ul{list-style:none;display:flex;flex-direction:column;gap:12px;} .footer ul a{font-size:var(--type-label);letter-spacing:.18em;text-transform:uppercase;} .footer ul a:hover{color:var(--red);} .footer__base{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2); padding:var(--sp-3) 0 var(--sp-2);margin-top:var(--sp-4); border-top:1px solid color-mix(in srgb,var(--fg) 35%,transparent); } .footer__logo{width:120px;margin:var(--sp-3) auto var(--sp-3);color:var(--fg);} .footer__logo svg{width:100%;height:auto;} @media(max-width:900px){.footer .grid{display:flex;flex-direction:column;gap:var(--sp-3);}} .line-mask{display:block;overflow:hidden;} .word{display:inline-block;} [data-reveal]{will-change:transform;} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important;} .u-accent::after{transform:scaleX(1);} } /* ============ MULTI-PAGE COMPONENTS ============ */ /* ---------- mobile burger + fullscreen menu ---------- */ .nav__burger{display:none;background:var(--fg);color:var(--bg);width:56px;height:56px; border-radius:0 0 0 14px;position:relative;cursor:pointer;transition:background .6s;} .nav__burger span{position:absolute;left:50%;width:22px;height:2px;background:currentColor; transform:translateX(-50%);transition:transform .3s,top .3s;} .nav__burger span:first-child{top:24px;} .nav__burger span:last-child{top:32px;} @media(max-width:900px){.nav__burger{display:block;}} .menu{position:fixed;inset:0;z-index:900;background:var(--blue);color:#fff; display:none;flex-direction:column;justify-content:space-between; padding:calc(var(--sp-3) + 40px) var(--edge) var(--sp-3);} .menu.is-open{display:flex;} .menu__close{position:absolute;top:0;right:0;width:64px;height:64px;color:#fff;cursor:pointer;} .menu__close span{position:absolute;left:50%;top:50%;width:24px;height:2px;background:currentColor;} .menu__close span:first-child{transform:translate(-50%,-50%) rotate(45deg);} .menu__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);} .menu__links{display:flex;flex-direction:column;gap:6px;list-style:none;} .menu__links a{font-family:var(--f-display);font-size:clamp(2.6rem,10vw,4.6rem);line-height:1.12; display:inline-block;} .menu__links .line-mask{display:block;overflow:hidden;} .menu__meta{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-2);flex-wrap:wrap;} .menu__meta .t-label{opacity:.75;} /* ---------- subpage hero ---------- */ .hero--page{min-height:72vh;justify-content:flex-end;gap:var(--sp-3);} /* 2026-08-24: capped to the SAME size as the homepage hero title — no page heading should read larger than the homepage's own h1 */ .hero--page .t-display{font-size:clamp(2.2rem,min(6.4vw,10vh),7rem);} .hero--page .hero__intro{max-width:44ch;} @media(max-width:900px){.hero--page{min-height:64vh;}} /* ---------- work grid + case modal ---------- */ .work-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--gap);align-items:start;} @media(max-width:900px){.work-grid{grid-template-columns:1fr;}} .case-card{display:flex;flex-direction:column;gap:var(--sp-2);cursor:pointer;text-align:left;width:100%;} .case-card .plate{aspect-ratio:16/11;} .case-card:nth-child(even){margin-top:var(--sp-4);} @media(max-width:900px){.case-card:nth-child(even){margin-top:0;}} .case-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);} .case-card__title{font-family:var(--f-display);font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.12;max-width:26ch;} .case-card__tags{display:flex;flex-wrap:wrap;gap:8px 20px;} .case-card__tags span{font-size:var(--type-label);letter-spacing:.2em;text-transform:uppercase;opacity:.55;} .case-card__open{margin-top:4px;} .modal{position:fixed;inset:0;z-index:920;display:none;} .modal.is-open{display:block;} .modal__backdrop{position:absolute;inset:0;background:rgba(20,28,80,.55);cursor:pointer;} .modal__panel{position:absolute;right:0;top:0;bottom:0;width:min(760px,94vw); background:#fff;color:var(--blue);overflow-y:auto;overscroll-behavior:contain; padding:var(--sp-4) clamp(24px,4vw,64px) var(--sp-4);} .modal__close{position:sticky;top:0;float:right;width:52px;height:52px;border-radius:50%; border:1px solid #DCE1F2;background:#fff;color:var(--blue);cursor:pointer;z-index:2;} .modal__close span{position:absolute;left:50%;top:50%;width:18px;height:2px;background:currentColor;} .modal__close span:first-child{transform:translate(-50%,-50%) rotate(45deg);} .modal__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);} .modal__kicker{margin-bottom:var(--sp-2);} .modal__title{font-family:var(--f-display);font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;margin-bottom:var(--sp-2);max-width:20ch;} .modal__plate{aspect-ratio:16/9;margin:var(--sp-2) 0 var(--sp-3);} .modal__section{margin-bottom:var(--sp-3);} .modal__section h4{font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-bottom:12px;} .modal__section p{font-size:1rem;letter-spacing:.05em;line-height:1.9;text-transform:uppercase;opacity:.8;max-width:58ch;} .modal__section ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;} .modal__section ul li{font-size:var(--type-label);letter-spacing:.2em;text-transform:uppercase;opacity:.7;} .modal__cta{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-top:var(--sp-3); padding-top:var(--sp-2);border-top:1px solid #E7EAF6;} /* ---------- services ---------- */ .svc{padding:var(--sp-4) 0;border-top:1px solid color-mix(in srgb,var(--fg) 30%,transparent);} .svc:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--fg) 30%,transparent);} .svc__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3);} .svc__title{font-family:var(--f-display);font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.05;max-width:22ch;} .svc__price{font-size:var(--type-label);letter-spacing:.2em;text-transform:uppercase;opacity:.6;white-space:nowrap;} .svc__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3) var(--gap);} @media(max-width:900px){.svc__cols{grid-template-columns:1fr;}} .svc__col h4{font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-bottom:14px;} .svc__col p{font-size:1rem;letter-spacing:.05em;line-height:1.9;text-transform:uppercase;opacity:.8;} .svc__foot{margin-top:var(--sp-3);display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;} /* ---------- insights articles ---------- */ .toc{display:flex;flex-direction:column;} .article{padding:var(--sp-4) 0;border-top:1px solid #E7EAF6;scroll-margin-top:110px;} .article__kicker{margin-bottom:var(--sp-2);} .article__title{font-family:var(--f-display);font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.06;max-width:22ch;margin-bottom:var(--sp-2);} .article__body{max-width:62ch;display:flex;flex-direction:column;gap:1.2em;} .article__body p{font-size:1.05rem;letter-spacing:.04em;line-height:1.95;text-transform:uppercase;opacity:.82;} .article__body h3{font-family:var(--f-display);font-size:clamp(1.34rem,2vw,1.65rem);line-height:1.2;margin-top:.6em;} .article__foot{margin-top:var(--sp-3);display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;} /* ---------- forms ---------- */ .form{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--gap);} @media(max-width:760px){.form{grid-template-columns:1fr;}} .field{display:flex;flex-direction:column;gap:10px;} .field--wide{grid-column:1/-1;} .field label{font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase;opacity:.6;} .field input,.field select,.field textarea{ font:inherit;color:inherit;background:transparent;border:none; border-bottom:1px solid color-mix(in srgb,var(--fg) 40%,transparent); padding:10px 2px;font-size:1rem;letter-spacing:.04em;border-radius:0;-webkit-appearance:none;appearance:none;} .field select{cursor:pointer;text-transform:uppercase;font-size:1rem;letter-spacing:.12em;} .field select option{color:var(--blue);background:#fff;} .field textarea{min-height:120px;resize:vertical;line-height:1.7;} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--fg);} .form__foot{grid-column:1/-1;display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;} .form__hint{font-size:1rem;letter-spacing:.08em;text-transform:none;opacity:.72;max-width:44ch;line-height:1.8;} /* ---------- multi-step form ---------- */ .step-progress{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;margin-bottom:var(--sp-1);} .step-progress__track{width:100%;height:2px;background:color-mix(in srgb,var(--fg) 16%,transparent);border-radius:2px;overflow:hidden;} .step-progress__fill{display:block;height:100%;width:25%;background:var(--red);border-radius:2px;transition:width .5s cubic-bezier(.22,1,.36,1);} .step-progress__label{font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase;opacity:.6;} .step-progress__label em{font-style:normal;opacity:1;} .form-step{display:none;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--gap);} .form-step.is-active{display:grid;animation:stepIn .5s cubic-bezier(.22,1,.36,1);} @keyframes stepIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}} @media(max-width:760px){.form-step{grid-template-columns:1fr;}} .step-nav__back{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit;order:-1;} .step-nav [hidden]{display:none!important;} /* ---------- contact steps + faq ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);} @media(max-width:900px){.steps{grid-template-columns:1fr;}} .step{border:1px solid color-mix(in srgb,var(--fg) 30%,transparent);border-radius:12px; padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);min-height:220px;} .step__num{font-family:var(--f-display);font-size:clamp(1.8rem,3vw,2.6rem);opacity:.35;} .step h3{font-family:var(--f-display);font-size:clamp(1.34rem,1.9vw,1.55rem);line-height:1.2;} .step p{font-size:1rem;letter-spacing:.05em;line-height:1.85;text-transform:uppercase;opacity:.72;margin-top:auto;} .faq{display:flex;flex-direction:column;} .faq details{border-top:1px solid color-mix(in srgb,var(--fg) 30%,transparent);} .faq details:last-child{border-bottom:1px solid color-mix(in srgb,var(--fg) 30%,transparent);} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline; gap:var(--sp-2);padding:var(--sp-2) 0;font-family:var(--f-display); font-size:clamp(1.34rem,2vw,1.6rem);line-height:1.2;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";font-family:var(--f-second);opacity:.5;transition:transform .3s;} .faq details[open] summary::after{transform:rotate(45deg);} .faq details p{padding:0 0 var(--sp-2);font-size:1rem;letter-spacing:.05em;line-height:1.9; text-transform:uppercase;opacity:.75;max-width:60ch;} /* ---------- coming soon ---------- */ .soon{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between; padding:calc(var(--sp-4) + 90px) var(--edge) var(--sp-4);} .soon__badge{display:inline-flex;align-items:center;gap:10px;border:1px solid color-mix(in srgb,var(--fg) 45%,transparent); border-radius:999px;padding:10px 20px;font-size:var(--type-label);letter-spacing:.22em;text-transform:uppercase;width:max-content;} .soon__badge i{width:8px;height:8px;border-radius:50%;background:var(--yellow);font-style:normal;animation:pulse 1.6s infinite;} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}} .soon__list{display:flex;flex-wrap:wrap;gap:10px 28px;} .soon__list span{font-size:var(--type-label);letter-spacing:.2em;text-transform:uppercase;opacity:.6;} /* ---------- misc ---------- */ .section--tight{padding-top:var(--sp-4);} .page-label{margin-bottom:var(--sp-2);} .crumb-cta{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;} body.is-locked{overflow:hidden;} /* ---------- nav right cluster (cta + burger) ---------- */ .nav__right{display:flex;align-items:flex-start;} @media(max-width:900px){ .nav__cta{padding:16px 18px;border-radius:0;} .nav__burger{border-radius:0 0 0 14px;} } @media(max-width:520px){ .nav__cta{display:none;} } /* ---------- readable long-form text (sentence case, >=12pt) ---------- */ .t-read{font-family:var(--f-second);font-size:1.05rem;letter-spacing:.015em;line-height:1.9; text-transform:none;opacity:.88;max-width:62ch;} .svc__col p,.step p,.faq details p,.article__body p, .price-card__more-inner p,.modal__section p{ text-transform:none;letter-spacing:.015em;line-height:1.9;opacity:.85;font-size:1.02rem;} /* ============ WORK: WHEEL GALLERY (tangent cards on an arc) ============ */ .helix{position:relative;height:520vh;} .helix__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;} .helix__scene{position:absolute;inset:0;} .helix__ring{position:absolute;inset:0;} .helix__card{position:absolute;left:0;top:0;width:clamp(340px,32vw,560px);aspect-ratio:3/2; cursor:pointer;border:none;padding:0;background:none; transition:filter .45s ease;will-change:transform,opacity;transform-origin:50% 50%;} .helix__card .plate{position:absolute;inset:0;border-radius:12px; box-shadow:0 30px 80px -40px rgba(10,16,60,.35);} .helix__card .plate__inner svg{width:26%;} .helix__card.is-front .plate{box-shadow:0 46px 110px -44px rgba(10,16,60,.5);} /* "PRJ.01"-style number labels removed from the portfolio thumbnails at the user's request (2026-08-21). Kept in the DOM (and still populated by cms.js) so they can be brought back by deleting this display:none. */ .helix__num{display:none;position:absolute;top:14px;left:16px;z-index:2;font-family:var(--f-second); font-size:1rem;letter-spacing:.2em;opacity:.8;color:currentColor;} .helix.is-hovering .helix__card:not(.is-hover){filter:blur(10px) saturate(.55) brightness(.8);opacity:.3!important;} .helix__card.is-hover{filter:none;} .helix__caption{display:none;} /* z-index 300: the panel text always sits ABOVE the wheel cards (they go up to ~100); cards additionally fade as they approach the text — see initHelix. */ .helix__panel{position:absolute;left:var(--edge);top:50%;transform:translateY(-50%); width:min(460px,32vw);z-index:300;pointer-events:none;} .helix__panel .idx{margin-bottom:18px;} .helix__title{font-family:var(--f-display);font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:1.06; margin-bottom:16px;max-width:16ch;} .helix__tags{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:22px;} .helix__tags span{font-size:1rem;letter-spacing:.12em;text-transform:uppercase;opacity:.72;} .helix__open{pointer-events:auto;} .helix__progress{position:absolute;bottom:6vh;left:var(--edge);right:var(--edge);height:2px; background:color-mix(in srgb,var(--fg) 18%,transparent);z-index:5;} .helix__progress i{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(0);display:block;} .helix__hint{position:absolute;bottom:calc(6vh + 16px);right:var(--edge);z-index:5; font-size:1rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;} @media(max-width:900px), (prefers-reduced-motion: reduce){ .helix{height:auto;} .helix__stage{position:relative;height:auto;overflow:visible;padding:var(--sp-3) var(--edge) var(--sp-4);} .helix__ring{position:relative;inset:auto;display:flex;flex-direction:column;gap:var(--sp-3);} .helix__card{position:relative;width:100%;aspect-ratio:16/10;transform:none!important;opacity:1!important;} .helix__card .plate{position:relative;inset:auto;aspect-ratio:16/10;} .helix__caption{display:flex;flex-direction:column;gap:10px;padding-top:14px;text-align:left;color:var(--fg);} .helix__caption h3{font-family:var(--f-display);font-size:clamp(1.34rem,4.6vw,1.7rem);line-height:1.12;} .helix__caption span{font-size:1rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;} .helix__panel,.helix__progress,.helix__hint{display:none;} .helix.is-hovering .helix__card:not(.is-hover){filter:none;opacity:1!important;} } /* ============ WORK: CONTINUOUS ORBIT (project index, replaces the wheel) ============ All cards sit on one circle sized to stay fully inside the viewport — nothing is ever clipped or parked off-canvas. The ring turns continuously and slowly on its own (not scroll-gated); each card counter-rotates so its image stays upright. Cards are real links to /work/ — no modal involved on this page. */ .orbit{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden; display:flex;align-items:center;justify-content:center;padding-top:80px;} .orbit__field{position:relative;width:min(94vw,1040px);height:min(76vh,66vw,780px);} .orbit__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); text-align:center;width:min(60%,320px);pointer-events:none;z-index:2;} .orbit__center-title{font-family:var(--f-display);font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1.04; transition:opacity .3s ease;min-height:1.3em;} .orbit__card{position:absolute;left:0;top:0;width:clamp(130px,14vw,210px);aspect-ratio:4/3; cursor:pointer;transform-origin:50% 50%;} /* positioning (translate) lives on the .orbit__card link itself, driven every frame by JS — no CSS transition there. Scale + blur live on this inner wrapper instead, so they can transition smoothly without fighting the continuous rotation. */ .orbit__card-inner{position:absolute;inset:0;border-radius:0;overflow:hidden;background:#EEF1FF; box-shadow:0 20px 50px -24px rgba(6,10,40,.55); transition:transform .45s cubic-bezier(.22,1,.36,1),filter .4s ease,opacity .4s ease,box-shadow .4s ease;} .orbit__card-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .orbit__card-inner .plate__grid{position:absolute;inset:0;opacity:.5;} .orbit__card-label{position:absolute;left:0;right:0;bottom:-30px;text-align:center; font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75; transition:opacity .25s ease;white-space:nowrap;} .orbit__card.is-hover .orbit__card-label{opacity:0;} .orbit__card.is-hover .orbit__card-inner,.orbit__card:focus-visible .orbit__card-inner{ transform:scale(1.42);box-shadow:0 40px 96px -20px rgba(6,10,40,.8);} .orbit.is-hovering .orbit__card:not(.is-hover) .orbit__card-inner{ filter:blur(9px) saturate(.55) brightness(.82);opacity:.4;} .orbit__tag{position:absolute;bottom:6vh;left:var(--edge);z-index:2; font-size:1rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75;min-height:1.4em;} .orbit__hint{position:absolute;bottom:6vh;right:var(--edge);z-index:2; font-size:1rem;letter-spacing:.18em;text-transform:uppercase;opacity:.55;} @media(max-width:760px), (prefers-reduced-motion: reduce){ .orbit{height:auto;min-height:0;padding:var(--sp-3) var(--edge) var(--sp-4);display:block;} .orbit__field{display:flex;flex-direction:column;gap:var(--sp-2);width:100%;height:auto;} .orbit__center,.orbit__hint,.orbit__tag{display:none;} .orbit__card{position:relative;width:100%;aspect-ratio:16/10;transform:none!important;} .orbit__card-inner{border-radius:0;} .orbit__card.is-hover .orbit__card-inner{transform:none;} /* mobile has no hover-driven center title, so the label is the only place a visitor sees the project name — keep it visible here even though the desktop circular view hides it. */ .orbit__card-label{display:block;position:relative;bottom:auto;opacity:.85;text-align:left;padding-top:12px;} } /* ============ PROJECT PAGE (real page per case study, replaces the popup for /work/*) ============ */ .pp{padding:calc(96px + 6vh) var(--edge) 0;} /* Project-page footer gate. The static footer paints on first byte while the case-study content is still being fetched and built client-side, so ungated the user sees footer → blank middle → gallery popping in. The gate keys off html.has-js + body:has([data-project-page]) — page structure, not a body class — so it holds from the very first paint no matter how the page was loaded. The reveal is one CSS animation: - default: held at opacity 0 (fill:both through the delay), auto-fading in at 7s as a pure-CSS failsafe should scripts never run; - body.pp-ready (added by fadeInRoot() the moment the content renders): the higher-specificity rule swaps in the same animation with a 0.55s delay, restarting it — footer fades in just behind the showcase's own entrance, however long the data actually took to arrive. */ @keyframes ppFooterIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}} /* keyed off body.pp-loading (set in the page markup) so ANY page can opt in to the staged load — currently project.html and index.html. pp-loading is never removed; pp-ready is ADDED when the page's content/animations are actually ready, restarting the same animation with the short stagger delay. (Removing pp-loading instead would drop the animation entirely and pop the footer to full opacity — don't.) */ html.has-js body.pp-loading .footer{ animation:ppFooterIn .9s cubic-bezier(.22,.61,.36,1) 7s both;} html.has-js body.pp-loading.pp-ready .footer{ animation:ppFooterIn .9s cubic-bezier(.22,.61,.36,1) .55s both;} @media(prefers-reduced-motion:reduce){ html.has-js body.pp-loading .footer{animation:none;} } /* static "Loading case study…" placeholder — shown the instant the page paints, before cms.js/main.js hand control to initProjectPage(); a gentle pulse instead of dead static text so the wait reads as intentional */ .pp__loading-pulse{animation:ppLoadingPulse 1.5s ease-in-out infinite;opacity:.85;} /* pre-render skeleton bars (project.html): quiet placeholder shapes for the kicker/title while the case study loads — layout only, no "Loading" text */ .pp__skel-bar{display:block;background:color-mix(in srgb,var(--fg) 9%,transparent);border-radius:8px;} @keyframes ppLoadingPulse{0%,100%{opacity:.4;}50%{opacity:.95;}} @media(prefers-reduced-motion: reduce){.pp__loading-pulse{animation:none;opacity:.85;}} .pp__inner{max-width:min(94vw,1680px);margin:0 auto;padding-bottom:var(--sp-5);} .pp__back{display:inline-flex;align-items:center;gap:8px;font-size:1rem;letter-spacing:.14em; text-transform:uppercase;opacity:.75;margin-bottom:clamp(28px,5vh,54px);transition:opacity .25s;} .pp__back:hover{opacity:1;} /* 2026-08-25: case-study showcase redesign — title/tags/brief header and the pinned horizontal-pan gallery now live together inside .pp__showcase, one true full-viewport (100vh) screen on desktop: the whole opening view reads as a single full-screen takeover (title in on the same screen as the imagery) rather than a header in normal flow sitting above a separate full-height gallery. Pin/scrub is still driven off data-pp-gallery-section (now the showcase itself) by initGalleryPan() in main.js. On mobile this un-merges back into a plain stacked column (see media query below). The .pp__hero-* rules further down are now dead (no markup produces them any more) but are left in place rather than deleted, same convention as the .cmodal popup system elsewhere on this page. Each gallery slide has a fixed, standard HEIGHT with width left auto so the image renders at its own natural aspect ratio — landscape and portrait mockups sit at full size side by side with nothing cropped, instead of being forced into a uniform box and object-fit:cover-cropped to fit. */ /* 2026-08-25 (v3): the showcase is now a true full-viewport takeover that IS the top of the page on desktop. Instead of sitting below .pp's calc(96px + 6vh) navbar-clearance padding (which meant you had to scroll the title up to the viewport top before the pin engaged, and the bottom of the gallery sat below the fold until then), the clearance is moved INSIDE the section as padding-top (border-box, so it's part of the 100vh, not on top of it) and .pp's own padding-top is zeroed when a showcase is present (see the :has() rule below). Result: the section starts at y=0, spans exactly one viewport with the header clearing the floating nav, and the ScrollTrigger pin ("top top") engages immediately — the 100vh state itself is what drives the horizontal pan. Nothing can be cropped because the section never extends past the window. */ @media(min-width:901px){ .pp:has(.pp__showcase){padding-top:0;} } /* width:100vw EXPLICITLY, not auto-width + symmetric negative margins: GSAP's pin locks the pinned element's computed width inline, and with auto width it locked the PARENT'S padded content width (viewport minus 2×var(--edge)) — the section then rendered ~140px narrower than the screen while pinned, its overflow:hidden clipping the gallery at that phantom right edge and pulling the tags/progress bar inward with it. An explicit 100vw pins at true full-bleed; the single negative left margin shifts it to x=0. */ .pp__showcase{position:relative;height:100vh;width:100vw;padding-top:calc(96px + 6vh); display:flex;flex-direction:column; overflow:hidden;margin:0 0 clamp(48px,8vh,84px) calc(-1 * var(--edge));} /* asymmetric padding: title keeps the standard left edge inset, but the right side shrinks to a sliver so the tags sit at the extreme right of the full-bleed section instead of a full var(--edge) (~up to 96px) in. */ .pp__showcase .pp__head{padding:0 clamp(12px,1.5vw,24px) 0 var(--edge);flex:0 0 auto; display:grid;grid-template-columns:1fr minmax(200px,320px); gap:clamp(24px,4vw,64px);align-items:start;margin-bottom:clamp(20px,3.5vh,40px);} .pp__head-right{display:flex;justify-content:flex-end;} .pp__head .pp__tags{margin-bottom:0;flex-direction:column;align-items:flex-end;text-align:right;gap:10px;} /* 2026-08-25: title deliberately smaller than the .cmodal__title base size — in the merged 100vh showcase a display-size headline was crowding the header and pushing everything out of the viewport. Scoped under .pp so it out-specifies the .cmodal__title base rule, which appears later in this file and would otherwise win the same-specificity tie. */ .pp .pp__title{margin-bottom:0;font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.08;} .pp__brief{font-size:1.05rem;line-height:1.85;opacity:.85;max-width:56ch;margin-top:clamp(14px,2.2vh,24px);} @media(max-width:760px){ .pp__showcase .pp__head{grid-template-columns:1fr;gap:var(--sp-2);} .pp__head-right{justify-content:flex-start;} .pp__head .pp__tags{align-items:flex-start;text-align:left;} } /* 2026-08-25 (v3): the gallery stretches through ALL the height left after the header, down to the end of the screen. The stage's own padding reserves a small gap under the header and just enough room at the bottom for the progress bar, and the slides fill 100% of what remains (border-box percentage of the stage's content box) — so the images run as tall as the viewport allows and end right where the screen ends, and because their height is derived FROM the available space rather than imposed on it, the container can never crop them at any viewport size. */ .pp__gallery-stage{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;align-items:center; padding:clamp(14px,2.5vh,26px) 0 clamp(44px,7vh,68px);} /* left padding only — the first image starts at the page's edge inset, but the pan must be able to run the LAST image flush to the viewport's right edge; a right padding here was one half of the white-gap-on-the-right bug (the JS pan distance overshoot was the other). */ .pp__gallery-track{height:100%;display:flex;gap:var(--sp-2);padding:0 0 0 var(--edge); width:max-content;align-items:center;} /* 2026-08-25: 85% (not 100%) of the stage — a 15% size reduction. Because width stays auto, the width scales by the same 15% off each image's own natural aspect ratio, so nothing is cropped or distorted; the images just sit slightly smaller with a little more air around them. */ .pp__gallery-slide{flex:none;height:85%;width:auto;border-radius:12px; overflow:hidden;position:relative;background:color-mix(in srgb,var(--fg) 8%,transparent);} .pp__gallery-slide img{display:block;height:100%;width:auto;} .pp__gallery-slide--empty{width:min(56vw,600px);display:flex;align-items:center;justify-content:center;color:var(--fg);} .pp__gallery-slide--empty .plate__grid{position:absolute;inset:0;opacity:.5;} .pp__gallery-progress{position:absolute;left:var(--edge);right:clamp(12px,1.5vw,24px); bottom:clamp(20px,4vh,40px);height:2px;background:color-mix(in srgb,var(--fg) 20%,transparent);} .pp__gallery-progress i{position:absolute;inset:0;background:var(--red); transform:scaleX(0);transform-origin:left;display:block;} @media(max-width:900px){ /* the merged full-screen showcase, and the fixed-height/variable-width slides, only make sense in the pinned desktop layout — on mobile this un-merges back into a plain stacked column: normal-flow header, then each image full-width at its own natural height, nothing cropped. */ .pp__showcase{height:auto;width:auto;display:block;overflow:visible;margin:0 0 clamp(32px,6vh,56px);padding-top:0;} .pp__showcase .pp__head{padding:0;margin-bottom:clamp(28px,5vh,48px);} .pp__gallery-stage{display:block;flex:none;} .pp__gallery-track{height:auto;flex-direction:column;width:auto;padding:0;gap:var(--sp-2);align-items:stretch;} .pp__gallery-slide{width:100%;height:auto;} .pp__gallery-slide img{width:100%;height:auto;} .pp__gallery-slide--empty{width:100%;aspect-ratio:16/10;} .pp__gallery-progress{display:none;} } .pp__insights-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:16px;padding:clamp(20px,3.5vh,32px) 0; border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent); border-bottom:1px solid color-mix(in srgb,var(--fg) 18%,transparent); margin-bottom:clamp(32px,6vh,56px);} .pp__insights-cta span{font-size:1.05rem;opacity:.85;} /* hero: title/tags pinned on the left, gallery on the right — an explicit even 50/50 split (equal 1fr tracks) with a generous gap, so the text column is never squeezed down thin: at this ratio it can never fall below ~44% of the row even including the gap, comfortably over the 40% floor. */ .pp__hero-split{display:grid;grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,96px);align-items:start;margin-bottom:clamp(40px,7vh,80px);} .pp__hero-sticky{position:sticky;top:calc(96px + 6vh);align-self:start;min-width:0;} .pp__hero-sticky .cmodal__kicker{margin-bottom:22px;} .pp__hero-sticky .cmodal__title{margin-bottom:clamp(20px,3.5vh,36px);} .pp__hero-sticky .cmodal__meta{margin-bottom:0;padding-bottom:0;border-bottom:none;flex-direction:column;gap:12px;} .pp__hero-gallery{min-width:0;} .pp__hero-gallery .cmodal__gallery-rows{margin-bottom:0;} /* fallback plate shown when a project has no gallery images yet — keeps the right column always occupied so the left writeup never reads as stranded/squashed against empty space */ .pp__hero-gallery-empty{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden; background:#EEF1FF;display:flex;align-items:center;justify-content:center;color:var(--blue);} .pp__hero-gallery-empty .plate__grid{position:absolute;inset:0;opacity:.5;} @media(max-width:900px){.pp__hero-gallery-empty{aspect-ratio:16/10;}} /* smaller item cap within the sticky-hero context specifically — the same .cmodal__gallery-item class is reused lower on the page at full width, so this override only applies while nested inside .pp__hero-gallery */ .pp__hero-gallery .cmodal__gallery-item[data-shape="landscape"]{aspect-ratio:3/2;} .pp__hero-gallery .cmodal__gallery[data-cols="3"]{grid-template-columns:repeat(2,1fr);} .pp__hero-gallery .cmodal__gallery[data-cols="3"] .cmodal__gallery-item:last-child{grid-column:auto;} /* 2026-08-25: only collapse to a single stacked column on genuinely narrow (phone-width) viewports — the two-column split now holds down to 560px, since a moderately-sized (non-maximized) desktop browser window is still wide enough for both columns and shouldn't fall back to stacking. */ @media(max-width:560px){ .pp__hero-split{grid-template-columns:1fr;gap:var(--sp-3);} .pp__hero-sticky{position:relative;top:auto;margin-bottom:clamp(28px,5vh,48px);} } .pp__nav{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3); margin-top:var(--sp-4);padding-top:var(--sp-3); border-top:1px solid color-mix(in srgb,var(--fg) 20%,transparent);flex-wrap:wrap;} .pp__nav a{display:flex;flex-direction:column;gap:16px;width:min(320px,46%);transition:opacity .25s;} .pp__nav a:hover{opacity:.85;} .pp__nav a:last-child{align-items:flex-end;text-align:right;margin-left:auto;} .pp__nav-thumb{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:0; overflow:hidden;background:#EEF1FF;box-shadow:0 20px 50px -24px rgba(6,10,40,.55); transition:transform .45s cubic-bezier(.22,1,.36,1);} .pp__nav-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .pp__nav-thumb--logo{display:flex;align-items:center;justify-content:center;} .pp__nav-thumb--logo .plate__grid{position:absolute;inset:0;opacity:.5;} .pp__nav a:hover .pp__nav-thumb{transform:scale(1.04);} .pp__nav-meta{display:flex;flex-direction:column;gap:6px;} .pp__nav-meta span{font-size:1rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;} .pp__nav-meta strong{font-family:var(--f-display);font-weight:400;font-size:clamp(1.2rem,2.4vw,1.7rem);} /* 2026-08-25: suggested-projects grid — replaces the prev/next pair with a set of up to 4 other case studies. .pp__nav rules above are now dead markup-wise but kept because .pp__nav-thumb is reused by these cards. */ .pp__suggested{margin-top:var(--sp-4);padding-top:var(--sp-3); border-top:1px solid color-mix(in srgb,var(--fg) 20%,transparent);} .pp__suggested-head{display:flex;justify-content:space-between;align-items:center; gap:16px;flex-wrap:wrap;margin-bottom:var(--sp-2);} .pp__suggested-head h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,2.8vw,2.2rem);} .pp__suggested-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);} .pp__sug-card{display:flex;flex-direction:column;gap:14px;transition:opacity .25s;} .pp__sug-card:hover{opacity:.85;} .pp__sug-card:hover .pp__nav-thumb{transform:scale(1.04);} .pp__sug-meta{display:flex;flex-direction:column;gap:5px;} .pp__sug-meta span{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;} .pp__sug-meta strong{font-family:var(--f-display);font-weight:400;font-size:clamp(1.05rem,1.7vw,1.35rem);} @media(max-width:900px){.pp__suggested-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.pp__suggested-grid{grid-template-columns:1fr;}} /* 2026-08-25: case study pages now run on the "light" theme (white bg, blue text) instead of "invert" — but several .cmodal__* accents below are also reused by the always-blue .cmodal popup (dead code, kept for reference) and were hardcoded as translucent WHITE, assuming a blue backdrop. On a white page those are nearly invisible, so scope readable overrides to .pp specifically rather than touching the shared base rules. color-mix against the live --fg means these keep working automatically even if the page's theme changes again later. */ .pp .cmodal__section{border-bottom-color:color-mix(in srgb,var(--fg) 18%,transparent);} .pp .cmodal__section ul li{border-color:color-mix(in srgb,var(--fg) 35%,transparent);} .pp .cmodal__gallery-item{background:color-mix(in srgb,var(--fg) 8%,transparent);} .pp .cmodal__cta .btn-solid{background:var(--fg);color:var(--bg);border-color:var(--fg);} /* ============ CASE MODAL v2: morph takeover ============ */ .cmorph{position:fixed;z-index:938;border-radius:10px;overflow:hidden;pointer-events:none; background:var(--blue);} .cmorph .plate__grid{position:absolute;inset:0;} .cmodal{position:fixed;inset:0;z-index:940;display:none;background:var(--blue);color:#fff; overflow-y:auto;overscroll-behavior:contain;} .cmodal.is-open{display:block;} .cmodal__grid-bg{position:fixed;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:72px 72px;} .cmodal__close{position:fixed;top:22px;right:22px;z-index:5;width:58px;height:58px;border-radius:50%; border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;cursor:pointer; backdrop-filter:blur(6px);transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s;} .cmodal__close:hover{transform:rotate(90deg);background:rgba(255,255,255,.14);} .cmodal__close span{position:absolute;left:50%;top:50%;width:20px;height:2px;background:currentColor;} .cmodal__close span:first-child{transform:translate(-50%,-50%) rotate(45deg);} .cmodal__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);} .cmodal__inner{position:relative;max-width:1080px;margin:0 auto; padding:clamp(80px,14vh,140px) var(--edge) var(--sp-5);} .cmodal__kicker{display:flex;align-items:center;gap:10px;font-size:1rem;letter-spacing:.2em; text-transform:uppercase;opacity:.85;margin-bottom:22px;} .cmodal__kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow);} .cmodal__title{font-family:var(--f-display);font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1.0; letter-spacing:-.02em;max-width:18ch;margin-bottom:clamp(28px,5vh,54px);} .cmodal__title .word{display:inline-block;} .cmodal__meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:clamp(32px,6vh,64px); padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.25);} .cmodal__meta span{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;} .cmodal__section{display:grid;grid-template-columns:220px 1fr;gap:var(--sp-2) var(--sp-3); padding:clamp(24px,4vh,40px) 0;border-bottom:1px solid rgba(255,255,255,.18);} @media(max-width:760px){.cmodal__section{grid-template-columns:1fr;}} .cmodal__section h4{font-size:1rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;} .cmodal__section p{font-size:1.06rem;letter-spacing:.015em;line-height:1.95;opacity:.92;max-width:62ch;} .cmodal__section ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px;} .cmodal__section ul li{font-size:1rem;letter-spacing:.12em;text-transform:uppercase; border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 18px;} .cmodal__cta{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-top:clamp(32px,6vh,60px);} .cmodal__cta .btn-solid{background:#fff;color:var(--blue);border-color:#fff;} .cmodal__cta .link-cta{border-color:currentColor;} .cmodal [data-cm-reveal]{opacity:0;transform:translateY(26px);} /* Project gallery — a stack of rows built per-project in the admin panel (see CMS_GALLERY_LAYOUTS). Each row is either an image layout (.cmodal__gallery) or a text block (.cmodal__gallery-text). */ .cmodal__gallery-rows{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:clamp(32px,6vh,64px);} .cmodal__gallery-rows .cmodal__gallery{margin-bottom:0;} .cmodal__gallery{display:grid;gap:var(--sp-2);} .cmodal__gallery[data-cols="3"]{grid-template-columns:repeat(3,1fr);} .cmodal__gallery[data-cols="2"]{grid-template-columns:repeat(2,1fr);} .cmodal__gallery[data-cols="1"]{grid-template-columns:1fr;} .cmodal__gallery-item{position:relative;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.08);} .cmodal__gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .cmodal__gallery-item[data-shape="square"]{aspect-ratio:1/1;} .cmodal__gallery-item[data-shape="landscape"]{aspect-ratio:4/3;} .cmodal__gallery-item[data-shape="wide"]{aspect-ratio:16/9;} .cmodal__gallery-text p{font-size:1.06rem;letter-spacing:.015em;line-height:1.95;opacity:.92;max-width:62ch;} @media(max-width:760px){ .cmodal__gallery[data-cols="3"]{grid-template-columns:repeat(2,1fr);} .cmodal__gallery[data-cols="3"] .cmodal__gallery-item:last-child{grid-column:1/-1;} } @media(max-width:520px){ .cmodal__gallery[data-cols="2"],.cmodal__gallery[data-cols="3"]{grid-template-columns:1fr;} } /* ============ SERVICES v2 ============ */ .svcx{position:relative;padding:var(--sp-4) 0;} .svcx+.svcx{border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent);} .svcx__layout{display:grid;grid-template-columns:minmax(140px,.9fr) 2.2fr 1fr;gap:var(--sp-3) var(--gap);align-items:start;} @media(max-width:1000px){.svcx__layout{grid-template-columns:1fr;}} .svcx__num{font-family:var(--f-display);font-size:clamp(4rem,9vw,9rem);line-height:.8; color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--fg) 55%,transparent); position:sticky;top:120px;} @media(max-width:1000px){.svcx__num{position:static;font-size:clamp(3rem,14vw,4.5rem);}} .svcx__body{display:flex;flex-direction:column;gap:var(--sp-2);} .svcx__title{font-family:var(--f-display);font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.04;max-width:18ch;} .svcx__lede{font-size:1.08rem;letter-spacing:.015em;line-height:1.9;opacity:.85;max-width:58ch;text-transform:none;} .svcx__facets{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-1);} @media(max-width:700px){.svcx__facets{grid-template-columns:1fr;}} .svcx__facet h4{font-size:1rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:10px; display:flex;align-items:center;gap:8px;} .svcx__facet h4::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);} .svcx__facet p{font-size:1.02rem;letter-spacing:.015em;line-height:1.85;opacity:.82;text-transform:none;} .svcx__side{display:flex;flex-direction:column;gap:var(--sp-2);position:sticky;top:120px;} @media(max-width:1000px){.svcx__side{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;}} .svcx__price{border:1px solid color-mix(in srgb,var(--fg) 35%,transparent);border-radius:14px; padding:20px 22px;display:flex;flex-direction:column;gap:6px;} .svcx__price span{font-size:1rem;letter-spacing:.18em;text-transform:uppercase;opacity:.55;} .svcx__price strong{font-family:var(--f-display);font-weight:400;font-size:clamp(1.34rem,2vw,1.7rem);line-height:1.1;} .svc-index{display:flex;flex-direction:column;} .svc-index a{display:grid;grid-template-columns:64px 1fr auto;gap:var(--gap);align-items:baseline; padding:22px 0;border-top:1px solid color-mix(in srgb,var(--fg) 30%,transparent); transition:transform .35s cubic-bezier(.22,1,.36,1);} .svc-index a:last-child{border-bottom:1px solid color-mix(in srgb,var(--fg) 30%,transparent);} .svc-index a:hover{transform:translateX(14px);} .svc-index__num{font-family:var(--f-second);font-size:1rem;letter-spacing:.2em;opacity:.55;} .svc-index__title{font-family:var(--f-display);font-size:clamp(1.34rem,2.6vw,2.1rem);line-height:1.1;} .svc-index__price{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;} @media(max-width:700px){.svc-index a{grid-template-columns:44px 1fr;}.svc-index__price{display:none;}} /* ============ INSIGHTS v2: editorial ============ */ .masthead{padding:calc(var(--sp-4) + 100px) var(--edge) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);} .masthead__rule{display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap; padding-bottom:16px;border-bottom:2px solid var(--fg);} .masthead__rule span{font-size:1rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75;} /* 2026-08-24: capped to match the homepage hero title size */ .masthead__title{font-family:var(--f-display);font-size:clamp(2.2rem,min(6.4vw,10vh),7rem);line-height:.92;letter-spacing:-.02em;} .masthead__sub{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-2);flex-wrap:wrap;} .masthead__sub p{font-size:1.05rem;letter-spacing:.015em;line-height:1.85;opacity:.85;max-width:52ch;text-transform:none;} .edit-index a{display:grid;grid-template-columns:64px 200px 1fr auto;gap:var(--gap);align-items:baseline; padding:26px 0;border-top:1px solid #E7EAF6;transition:transform .35s cubic-bezier(.22,1,.36,1);} .edit-index a:hover{transform:translateX(14px);} .edit-index a:last-child{border-bottom:1px solid #E7EAF6;} .edit-index__num{font-size:1rem;letter-spacing:.2em;opacity:.5;} .edit-index__cat{font-size:1rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;} .edit-index__title{font-family:var(--f-display);font-size:clamp(1.34rem,2.4vw,2rem);line-height:1.12;} .edit-index__time{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5;white-space:nowrap;} @media(max-width:860px){.edit-index a{grid-template-columns:44px 1fr;}.edit-index__cat,.edit-index__time{display:none;}} .article__body p:first-of-type::first-letter{font-family:var(--f-display);font-size:3.4em;line-height:.8; float:left;padding:6px 12px 0 0;} .article__meta{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:var(--sp-2);} .article__meta span{font-size:1rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;} /* ============ CONTACT header: mega mail ============ */ .mega-mail{font-family:var(--f-display);font-size:clamp(1.6rem,4.6vw,4rem);line-height:1.05; letter-spacing:-.01em;display:inline-block;padding-bottom:10px;border-bottom:3px solid var(--yellow); transition:color .3s;} .mega-mail:hover{color:var(--yellow);} /* helix plates: always light for contrast on the blue stage */ .helix__card .plate{background:#EEF1FF;color:var(--blue);} .helix__card .plate .plate__grid{background-image:linear-gradient(rgba(78,109,255,.16) 1px,transparent 1px), linear-gradient(90deg,rgba(78,109,255,.16) 1px,transparent 1px);} /* split-title word spacing */ .cmodal__title .word{margin-right:.26em;} .cmodal__title .word:last-child{margin-right:0;} /* ---------- nav links at 11pt (specified exception to the 12pt floor) ---------- */ .nav__links a{font-size:11pt;} .nav__cta{font-size:11pt;} /* ============ INSIGHTS: news card grid ============ */ .news-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap);align-items:stretch;} @media(max-width:1000px){.news-grid{grid-template-columns:1fr 1fr;}} @media(max-width:640px){.news-grid{grid-template-columns:1fr;}} .news-card{background:#fff;color:var(--blue);border:1px solid #E7EAF6;border-radius:14px; overflow:hidden;display:flex;flex-direction:column;text-align:left;cursor:pointer;padding:0; box-shadow:0 24px 60px -34px rgba(20,30,90,.35); transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;} .news-card:hover{transform:translateY(-8px);box-shadow:0 34px 80px -34px rgba(20,30,90,.5);} .news-card--featured{grid-column:1/-1;flex-direction:row;} @media(max-width:900px){.news-card--featured{flex-direction:column;}} .news-card__media{position:relative;background:var(--blue);color:#fff;aspect-ratio:16/9;flex:0 0 auto;} .news-card--featured .news-card__media{flex:0 0 52%;aspect-ratio:auto;min-height:340px;} @media(max-width:900px){.news-card--featured .news-card__media{aspect-ratio:16/9;min-height:0;flex:0 0 auto;}} .news-card__media .plate__grid{position:absolute;inset:0;} .news-card__media svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;} .news-card__chip{position:absolute;top:16px;left:16px;background:#fff;color:var(--blue); border-radius:999px;padding:8px 16px;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;} .news-card__body{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;flex:1;} .news-card__title{font-family:var(--f-display);font-size:clamp(1.34rem,2vw,1.8rem);line-height:1.15;} .news-card--featured .news-card__title{font-size:clamp(1.7rem,3vw,2.7rem);max-width:18ch;} .news-card__excerpt{font-size:1.02rem;letter-spacing:.015em;line-height:1.8;opacity:.72;text-transform:none;max-width:52ch;} .news-card__meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid #EDF0FA;} .news-card__meta span{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5;} .news-card__read{margin-top:6px;align-self:flex-start;} /* ============ INSIGHTS: article reader overlay ============ */ .reader{position:fixed;inset:0;z-index:940;display:none;background:rgba(20,28,80,.45); overflow-y:auto;overscroll-behavior:contain;} .reader.is-open{display:block;} .reader__panel{position:relative;min-height:100%;background:#fff;color:var(--blue); max-width:1000px;margin:0 auto;padding:clamp(70px,12vh,120px) var(--edge) var(--sp-5); box-shadow:0 0 120px rgba(10,16,60,.4);} .reader__close{position:fixed;top:22px;right:max(22px,calc(50vw - 500px + 22px));z-index:5; width:56px;height:56px;border-radius:50%;border:1px solid #DCE1F2;background:#fff;color:var(--blue); cursor:pointer;transition:transform .35s cubic-bezier(.22,1,.36,1);} .reader__close:hover{transform:rotate(90deg);} .reader__close span{position:absolute;left:50%;top:50%;width:18px;height:2px;background:currentColor;} .reader__close span:first-child{transform:translate(-50%,-50%) rotate(45deg);} .reader__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);} .reader__meta{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:var(--sp-2);} .reader__meta span{font-size:1rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;} .reader__title{font-family:var(--f-display);font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.05; max-width:20ch;margin-bottom:var(--sp-3);} .reader__body{max-width:64ch;} .reader__foot{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid #E7EAF6; display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;} /* ============ INSIGHT PAGE (2026-09-10: one real page per essay, replaces the modal reader) ============ */ .essay{padding:calc(var(--sp-4) + 100px) var(--edge) 0;} .essay__inner{max-width:1100px;margin:0 auto;padding-bottom:var(--sp-5);} .essay__rule{display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap; padding-bottom:16px;margin-bottom:var(--sp-3);border-bottom:2px solid var(--fg);} .essay__rule span,.essay__rule a{font-size:1rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75;} .essay__rule a{display:inline-flex;gap:8px;align-items:center;opacity:1;} .essay__rule a i{font-style:normal;color:var(--red);} .essay__head{margin-bottom:var(--sp-3);} .essay__meta{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:var(--sp-2);} .essay__meta span{font-size:1rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;} .essay__title{font-family:var(--f-display);font-size:clamp(2.2rem,min(5.6vw,10vh),5.4rem);line-height:1.02; letter-spacing:-.02em;max-width:20ch;} .essay__standfirst{font-size:1.15rem;letter-spacing:.015em;line-height:1.8;opacity:.8;max-width:56ch; text-transform:none;margin-top:var(--sp-2);} .essay__cover{position:relative;aspect-ratio:16/9;width:100%;border-radius:14px;overflow:hidden; background:var(--blue);color:#fff;margin-bottom:var(--sp-4);} .essay__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .essay__cover .plate__grid{position:absolute;inset:0;} .essay__cover svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22%;} .essay__cover--skel{background:color-mix(in srgb,var(--fg) 9%,transparent);color:var(--fg);} .essay__cover--skel .plate__grid{opacity:.4;} .essay__cover .news-card__chip{top:20px;left:20px;} .essay__body{max-width:66ch;} .essay__foot{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid #E7EAF6; display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;} /* more essays: grid of the other write-ups below the article */ .essay__more{margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:2px solid var(--fg);} .essay__more-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2); flex-wrap:wrap;margin-bottom:var(--sp-3);} .essay__more-head h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.1;} .essay__more .news-grid{grid-template-columns:repeat(3,1fr);} @media(max-width:1000px){.essay__more .news-grid{grid-template-columns:1fr 1fr;}} @media(max-width:640px){.essay__more .news-grid{grid-template-columns:1fr;}} .essay__more .news-card{grid-column:auto;flex-direction:column;} .essay__more .news-card__title{font-size:clamp(1.2rem,1.7vw,1.5rem);max-width:none;} .essay__more-foot{display:flex;justify-content:center;margin-top:var(--sp-3);} .essay__more-foot .btn-solid{cursor:pointer;} @media(max-width:640px){.essay__rule span:nth-child(2){display:none;}} /* ============ RESPONSIVE PASS (2026-09-10) ============ */ /* nav — tablet + mobile: logo left, burger right, "Start a Project" lives in the menu */ @media(max-width:1024px){ .nav__links,.nav__cta{display:none;} .nav__burger{display:block;} .nav__right{grid-column:3;justify-self:end;} .nav__logo{width:84px;height:84px;} } .menu__cta{display:none;} @media(max-width:1024px){ .menu__cta{display:inline-flex;align-self:flex-start;margin-top:var(--sp-3); background:#fff;color:var(--blue);border-color:#fff;} } /* page headings (services / contact / store): the hero is a flex column and the h1's align-self:center shrink-wrapped and CENTRED the block on narrower screens, which read as a stray left indent. Headings span the row now. */ .hero>.t-display{align-self:stretch;} /* "Start Small, Dream Big" is desktop-only */ @media(max-width:1024px){.start-small-bg{display:none!important;}} @media(max-width:900px){ /* hero: everything spans the full width */ .hero__caption{padding-top:0;} .hero .t-body{max-width:none;} .hero .cms-img-slot--hero{width:100%;aspect-ratio:4/5;} .hero .cms-img-slot--hero img{width:100%;height:100%;object-fit:cover;} .hero__ctas{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;} /* brand timeline: portrait frame top-left, the 01–05 rail beside it, copy directly underneath — no dead band between image and text */ .brand-timeline_sticky{--bt-top:calc(84px + 18px);--bt-h:min(44svh,calc((100vw - var(--edge)*2 - 58px)*1.25));} .brand-timeline_frame{left:var(--edge);right:auto;top:var(--bt-top);transform:none; height:var(--bt-h);width:auto;aspect-ratio:4/5;max-height:none;} .brand-timeline_rail{right:var(--edge);left:auto;top:var(--bt-top);height:var(--bt-h); transform:none;justify-content:center;gap:16px;} .brand-timeline_copy{top:calc(var(--bt-top) + var(--bt-h) + 18px);bottom:auto;height:auto;transform:none;} .brand-timeline_step{top:0;transform:none;} .brand-timeline_index{margin-bottom:10px;} .brand-timeline_heading{font-size:clamp(2rem,8.5vw,2.7rem);margin-bottom:12px;} .brand-timeline_description{font-size:1rem;line-height:1.45;} /* work wheel → horizontal swipe row of case cards (the absolutely positioned scene gave the section no height, so the captions bled into Pricing) */ .helix__scene{position:relative;inset:auto;} .helix__stage{padding:var(--sp-3) 0 var(--sp-4);} .helix__mhead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2); padding:0 var(--edge);margin-bottom:var(--sp-2);} .helix__mhead .t-label{opacity:.6;} .helix__ring{flex-direction:row;gap:var(--sp-2);overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-padding-left:var(--edge);padding:0 var(--edge) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;} .helix__ring::-webkit-scrollbar{display:none;} .helix__card{flex:0 0 min(78vw,420px);width:min(78vw,420px);scroll-snap-align:start;aspect-ratio:auto;} .helix__card .plate{display:block;aspect-ratio:4/5;} } .helix__mhead{display:none;} @media(max-width:900px){.helix__mhead{display:flex;}} /* ============ HEADING BREATHING ROOM (2026-09-10) ============ One token for the space under every display / mid heading, on every page and every width — replaces the ad-hoc sp-3 / sp-4 / .4em mix. */ :root{--h-gap:clamp(40px,4.5vw,64px);} .section>.grid:has(>.t-mid),.section>.grid:has(>.t-display){margin-bottom:var(--h-gap)!important;} .hero--page{gap:var(--h-gap);} .masthead{gap:var(--h-gap);} .essay__head{margin-bottom:var(--h-gap);} .essay__standfirst{margin-top:clamp(20px,2.5vw,32px);} .reader__title,.article__title{margin-bottom:var(--h-gap);} @media(max-width:900px){ /* stacked grids had a 0 row-gap, so headings sat hard against the copy below */ .grid>.t-display,.grid>.t-mid{margin-bottom:var(--h-gap);} .grid>.t-body,.grid>.c-10-13{padding-top:0!important;} .hero>.grid .hero__caption{padding-top:0;} } /* ============ PRICING CARDS — simplified (2026-09-10) ============ thumb + title + meta, one-line headline, then a single footer row: the price (with its engagement label) sits where the CTA button used to be, Details toggle on the right. Engagement row + CTA button removed. */ .price-card__foot{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-2);} .price-card__price{display:flex;flex-direction:column;gap:4px;margin:0;} .price-card__price span{font-family:var(--f-second);font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;opacity:.55;} .price-card__price strong{font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.05;} .price-card__price-note{font-family:var(--f-second);font-size:.78rem!important;letter-spacing:.04em!important;text-transform:none!important;opacity:.65!important;margin-top:2px;} .price-card__info{gap:6px;} @media(max-width:900px){ /* mobile type: bigger section headings, card titles and prices; copy spans the full width */ .t-mid{font-size:clamp(2.1rem,8vw,2.8rem);} .t-body,.hero .t-body{max-width:none;} .price-card__title{font-size:clamp(1.9rem,7.4vw,2.3rem);} .price-card__headline{font-size:1.15rem;} .price-card__price strong{font-size:clamp(1.8rem,7vw,2.2rem);} .price-card__top{gap:16px;} .price-card__thumb{width:72px;} } /* ===== SLIM FOOTER (2026-09-14) ===== */ .footer--slim{padding:var(--sp-3) var(--edge) var(--sp-2);} .footer__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3);} .footer__brand{display:flex;align-items:center;gap:14px;} .footer__brand svg{width:40px;height:auto;color:var(--fg);flex:none;} .footer--slim .footer__nav{flex-direction:row;flex-wrap:wrap;gap:var(--sp-2);} .footer--slim .footer__base{margin-top:var(--sp-2);padding:var(--sp-2) 0 0;} @media(max-width:900px){.footer--slim .footer__row{flex-direction:column;align-items:flex-start;gap:var(--sp-2);}} /* ===== HOMEPAGE BRIEF FORM ===== */ .final .form--inline{margin:0;} .final .form--inline .field label{opacity:.75;} .final .form--inline .field input,.final .form--inline .field select,.final .form--inline .field textarea{border-bottom-color:color-mix(in srgb,var(--fg) 55%,transparent);} .final .form--inline .field select option{color:#1a1a1a;background:#fff;} .final .form--inline .btn-solid{background:var(--fg);color:var(--bg);border-color:var(--fg);} .final .form--inline .form__hint{opacity:.8;} .final:has(.form--inline){gap:var(--sp-3);min-height:0;} .final:has(.form--inline) .grid{margin-bottom:0;align-items:start;} .final .final__aside{grid-row:1/4;} .final .form--inline{margin-top:var(--sp-3);} @media(max-width:900px){.final .final__aside{grid-row:auto;}} /* ===== FIRST-TIME CLIENT OFFER POPUP ===== */ .offer{position:fixed;inset:0;z-index:960;display:none;align-items:center;justify-content:center;padding:var(--sp-2); background:color-mix(in srgb,var(--blue) 82%,#000 0%);color:var(--blue);} .offer.is-open{display:flex;} .offer__card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);width:min(960px,100%); background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35); opacity:0;transform:translateY(24px) scale(.98);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);} .offer.is-open .offer__card{opacity:1;transform:none;} .offer__media{background:var(--yellow);min-height:280px;} .offer__media img{display:block;width:100%;height:100%;object-fit:cover;} .offer__body{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3);justify-content:center;} .offer__title{font-family:"Viaoda Libre",serif;font-weight:400;font-size:clamp(2rem,4vw,3.2rem);line-height:1.02;letter-spacing:-.01em;} .offer__actions{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-1);} .offer__later{background:none;border:0;color:inherit;font:inherit;font-size:var(--type-label);letter-spacing:.18em;text-transform:uppercase;opacity:.6;cursor:pointer;} .offer__later:hover{opacity:1;} .offer__fine{margin-top:var(--sp-1);} .offer__close{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--blue) 30%,transparent); background:#fff;cursor:pointer;display:grid;place-items:center;} .offer__close span{position:absolute;width:18px;height:1.5px;background:var(--blue);transform:rotate(45deg);} .offer__close span+span{transform:rotate(-45deg);} @media(max-width:760px){.offer__card{grid-template-columns:1fr;max-height:92vh;overflow-y:auto;}.offer__media{min-height:0;aspect-ratio:1/1;}.offer__body{padding:var(--sp-2);}} /* ============ GO-LIVE MOBILE PASS (20260918a) ============ */ /* Clients strip: logos are white PNGs, so the band is always Fresh Sync blue whatever the page theme is doing (they vanished on the white sections). */ .clients{background:var(--blue);color:#fff;border-top-color:rgba(255,255,255,.25);border-bottom-color:rgba(255,255,255,.25);} .clients .idx em{color:#fff;} .clients__logo{height:clamp(34px,4vw,52px);} @media(max-width:900px){ .clients{padding:var(--sp-3) 0;} .clients__item{gap:28px;padding-right:28px;} .clients__logo{max-width:40vw;} } /* Any 12-col grid child positioned with an inline grid-column stacks on mobile (store page hero, CTA rows) */ @media(max-width:900px){ .grid>[style*="grid-column"]{grid-column:1/-1!important;} .form__foot{flex-wrap:wrap;} .btn-solid{max-width:100%;} } /* Offer popup — decluttered: image, heading, one line, button, tiny T&Cs. Colours are fixed so the page theme (orange/white) can't restyle the card. */ .offer__card{background:#fff;color:var(--blue);} .offer__media{position:relative;overflow:hidden;background:var(--yellow);} .offer__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;} .offer__body{gap:14px;} .offer__lead{font-family:var(--f-second);font-size:1.05rem;line-height:1.5;color:var(--blue);opacity:.8;text-transform:uppercase;letter-spacing:.04em;} .offer .btn-solid{background:var(--blue);color:#fff;border-color:var(--blue);} .offer__terms{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5;margin-top:4px;} @media(max-width:760px){ .offer{padding:16px;} .offer__card{max-height:none;overflow:visible;width:100%;} .offer__media{aspect-ratio:4/3;min-height:0;} .offer__body{padding:22px 22px 26px;} .offer__title{font-size:clamp(1.9rem,8vw,2.4rem);} .offer .btn-solid{width:100%;justify-content:center;} } @media(max-height:700px) and (max-width:760px){ .offer__media{aspect-ratio:16/9;} } @media(max-width:900px){ .grid>form[style*="grid-column"]{margin-top:var(--sp-3);} } @media(max-width:900px){ .btn-solid{white-space:normal;text-align:center;line-height:1.25;} .svcx__side,.svcx__body,.svcx__layout{min-width:0;max-width:100%;} .svcx__side .btn-solid{width:100%;justify-content:center;} } /* work page (mobile list): card image first, project name underneath — not over the image */ @media(max-width:760px), (prefers-reduced-motion: reduce){ .orbit__card{aspect-ratio:auto;display:block;} .orbit__card-inner{position:relative;inset:auto;display:block;aspect-ratio:16/10;border-radius:12px;} .orbit__card-label{padding-top:10px;font-family:var(--f-display);font-size:1.3rem;letter-spacing:0;text-transform:none;opacity:1;} .orbit__field{gap:var(--sp-3);} } /* homepage insight cards on mobile: image always first, then title, then the small head row */ @media(max-width:640px){ .icard{display:flex;flex-direction:column;} .icard__img{order:0;} .icard__body{order:1;margin-top:0;} .icard__head{order:2;padding:0 20px 18px;margin-top:auto;} .icard:nth-child(2),.icard:nth-child(4){margin-top:0;} } /* mobile section rhythm: tighter vertical spacing between sections */ @media(max-width:900px){ :root{--sp-5:56px;--sp-4:48px;--sp-3:32px;} .section{padding-top:var(--sp-5);padding-bottom:var(--sp-5);} .hero{min-height:0;padding-top:calc(84px + 24px);padding-bottom:var(--sp-4);gap:var(--sp-3);} .hero--page{min-height:0;} .statement,.final,.soon,.start-small-bg{min-height:0;} .final{gap:var(--sp-3);} .soon{padding-top:calc(84px + 24px);padding-bottom:var(--sp-4);} .clients{padding:var(--sp-3) 0;} .helix__stage{padding-top:var(--sp-3);padding-bottom:var(--sp-3);} .essay__more{margin-top:var(--sp-4);} .pp__inner,.essay__inner{padding-bottom:var(--sp-4);} .icard:nth-child(2),.icard:nth-child(4){margin-top:0;} } /* insight category chip: small corner tag, never a banner across the illustration */ .news-card__chip,.essay__cover .news-card__chip{top:12px;left:12px;padding:6px 12px;font-size:.68rem;letter-spacing:.14em;border-radius:999px;line-height:1.2;} @media(max-width:900px){ .news-card__chip,.essay__cover .news-card__chip{top:10px;left:10px;padding:5px 10px;font-size:.6rem;letter-spacing:.12em;opacity:.92;} }