/* ============================================================ CONCRETE — service DETAIL pages ("THE ROOM IGNITES") One page per discipline. The ignite-rings field (rings.js) fills the background, tinted the discipline's colour (--ig). Real, crawlable SEO content sits over it, breathing that one colour. Shared across web.html, brand.html, … — each page sets its own --ig. ============================================================ */ /* kill the rubber-band bounce so overscrolling up/down never reveals a wrong-colour gutter (a single base colour can't match the gradient field at BOTH ends — so we stop the bounce instead) */ html{ overscroll-behavior:none; background:transparent; } /* transparent = keep body-bg propagation so the morphs stay visible */ /* whole page = the purple field (viewport-fixed so it's stable while scrolling) */ .sd-page{ color:#e9e6df; min-height:100vh; overscroll-behavior:none; /* solid dark base + the fixed field on top. Because html has NO background this whole thing propagates to the canvas — which keeps it BEHIND the z-index:-1 morph layer. Never put a real background on or the field buries the morphs. The base only shows if the fixed field ever fails to cover. */ background-color:#0e0b1e; background-image:radial-gradient(ellipse 130% 100% at 50% 26%, var(--ig2), color-mix(in srgb, var(--ig2) 50%, #0b0a14) 80%); background-attachment:fixed; } .sd-page main{ position:relative; z-index:1; transform-origin:center top; animation:contentIn 940ms cubic-bezier(.22,.68,.2,1) both; } /* startup: the content rushes up from the depths — small → full size (no blur; it stays crisp) */ @keyframes contentIn{ from{ opacity:0; transform:scale(0.6); } to{ opacity:1; transform:scale(1); } } @media (prefers-reduced-motion: reduce){ .sd-page main{ animation:none; } } /* ===== scrollytelling (scroll.js) — each block plays its beat as it enters view ===== */ /* base: rise + fade in */ .reveal{ opacity:0; transform:translateY(42px); transition:opacity .78s cubic-bezier(.2,.7,.2,1), transform .78s cubic-bezier(.2,.7,.2,1); } .reveal.in{ opacity:1; transform:none; } /* capabilities: the card rises, then its case-file seal + number STAMP down a beat later (overshoot) */ .cap.reveal .cap-seal, .cap.reveal .cap-no{ opacity:0; transform:scale(1.55); transition:opacity .5s ease, transform .55s cubic-bezier(.2,1.55,.35,1); } .cap.reveal.in .cap-seal, .cap.reveal.in .cap-no{ opacity:1; transform:none; transition-delay:.24s; } /* proof: the retailer number ticks up (JS); tabular figures so the width doesn't jitter */ .pb-big .cup{ font-variant-numeric:tabular-nums; } /* process cards: NO startup reveal — they sit at their resting stagger and only respond to scroll (the --pary parallax below) */ /* proof shot: gentle scroll-linked parallax inside its frame (scaled up so the drift never shows an edge) */ .pb-shot img{ transform:scale(1.09) translateY(var(--par,0)); will-change:transform; } @media (prefers-reduced-motion: reduce){ .reveal, .cap.reveal .cap-seal, .cap.reveal .cap-no{ opacity:1 !important; transform:none !important; animation:none !important; } .pb-shot img{ transform:none !important; } } /* ---- liquid field (blob.js): noise-driven SVG blobs in the discipline colour. They are a HERO treatment only — anchored to the top of the page and faded out before the body copy, so the text always sits on the clean purple field below. ---- */ .liquid-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; } .blobs-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; /* GPU-composited CSS filter instead of the SVG feGaussianBlur (#blobGlow), which Safari renders on the CPU and re-runs every morph frame → severe lag. The old feMerge layered a soft glow UNDER a SHARP copy of the shape, so keep that shape/glow split: a LIGHT blur keeps the morphing blob defined, and a wide drop-shadow in the discipline colour restores the halo. blur(46px) alone erased the sharp core → formless mush. */ filter:blur(3px) drop-shadow(0 0 46px var(--ig)); will-change:transform; } /* transient intro rings — over the morphs, under the content; rings.js fades + removes them */ .intro-rings{ position:fixed; inset:0; z-index:0; width:100%; height:100%; display:block; pointer-events:none; } .grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .sd-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,6vw,72px); } /* ---- hero ---- */ .sd-hero{ padding:clamp(150px,22vh,240px) 0 clamp(40px,7vh,84px); } .sd-kicker{ font-family:var(--mono); font-size:clamp(11px,1.2vw,13px); letter-spacing:.26em; text-transform:uppercase; color:var(--ig); margin:0 0 20px; } .sd-kicker a{ color:inherit; text-decoration:none; opacity:.7; } .sd-kicker a:hover{ opacity:1; } .sd-title{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(48px,10vw,140px); line-height:.9; letter-spacing:.006em; color:#fff; margin:0; text-shadow:none; } .sd-lead{ max-width:40ch; margin:26px 0 0; font-size:clamp(18px,2.3vw,28px); line-height:1.4; color:#f1ede4; text-shadow:0 1px 20px rgba(8,6,12,.6); } /* ---- body: two columns — copy on the left, proof on the right ---- */ .sd-body{ padding:clamp(36px,6vh,80px) 0 clamp(56px,9vh,120px); } .sd-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(36px,5vw,80px); align-items:start; } .sd-main{ display:grid; gap:clamp(38px,6vh,66px); } .sd-sec{ display:grid; gap:15px; } .sd-sec h2{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(22px,3.2vw,36px); line-height:1; letter-spacing:.012em; color:#fff; margin:0; } .sd-sec p{ margin:0; color:#f0ece3; font-size:clamp(15px,1.6vw,19px); line-height:1.6; text-shadow:0 1px 14px rgba(8,6,12,.6); } .sd-do{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:13px; } .sd-do li{ position:relative; padding-left:26px; color:#f2eee5; font-size:clamp(15px,1.55vw,18px); line-height:1.5; text-shadow:0 1px 12px rgba(8,6,12,.55); } .sd-do li::before{ content:''; position:absolute; left:2px; top:.6em; width:9px; height:9px; border-radius:2px; background:var(--ig); } /* ---- the proof card (right column, sticky) → the case study ---- */ .sd-aside{ position:sticky; top:clamp(90px,12vh,130px); } .sd-proof{ display:grid; gap:0; text-decoration:none; color:inherit; overflow:hidden; border:1px solid color-mix(in srgb,var(--ig) 42%, rgba(255,255,255,.12)); border-radius:18px; background:linear-gradient(155deg, color-mix(in srgb,var(--ig) 14%, rgba(20,16,18,.6)), rgba(255,255,255,.02)); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:border-color .25s, transform .25s; } .sd-proof:hover{ border-color:var(--ig); transform:translateY(-3px); } .sd-proof > *{ padding:0 clamp(20px,2.4vw,28px); } .sd-proof .pf-k{ display:block; padding-top:clamp(20px,2.6vw,28px); font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ig); } .sd-proof .pf-h{ display:block; margin:12px 0 0; font-family:var(--disp); text-transform:uppercase; font-size:clamp(21px,2.6vw,30px); line-height:1.04; color:#fff; } .sd-proof .pf-p{ display:block; margin:13px 0 0; color:#c8c5bc; font-size:clamp(14px,1.5vw,17px); line-height:1.55; } .sd-proof .pf-go{ display:block; margin-top:18px; padding-top:16px; padding-bottom:clamp(20px,2.6vw,28px); border-top:1px solid color-mix(in srgb,var(--ig) 28%, rgba(255,255,255,.1)); font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ig); } /* ---- other disciplines strip ---- */ .sd-next{ border-top:1px solid rgba(239,239,236,.12); margin-top:clamp(40px,7vh,90px); padding-top:clamp(28px,4vh,46px); } .sd-next .sd-k{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#d6d1c7; margin:0 0 18px; text-shadow:0 1px 12px rgba(8,6,12,.6); } .sd-next-row{ display:flex; flex-wrap:wrap; gap:12px clamp(18px,2.6vw,34px); } .sd-next-row a{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(16px,2vw,24px); letter-spacing:.012em; color:rgba(255,255,255,.55); text-decoration:none; transition:color .2s; text-shadow:0 1px 12px rgba(8,6,12,.55); } .sd-next-row a:hover{ color:#fff; } .sd-next-row a.on{ color:#fff; } .sd-next{ border-top:1px solid rgba(255,255,255,.22); } @media (max-width:820px){ .sd-grid{ grid-template-columns:1fr; } .sd-aside{ position:static; } } @media (prefers-reduced-motion: reduce){ .sd-proof:hover{ transform:none; } } /* on detail pages the footer has no background of its own — the page's liquid field runs through it */ .sd-page .thedoor, .sd-page .door-stage, .sd-page .foot-doc{ background:transparent; } /* ============================================================ SERVICES DETAIL — conversion layout (hero → 3 caps → BIG proof → approach → CTA → nav). Content sits on dark-glass panels so it reads as OBJECTS on the field, not text floating in it. Three type sizes only: hero title (huge) → proof verdict / section heads (big) → body. ============================================================ */ /* shared dark-glass surface — translucent near-black, blur-behind, faint border */ .glass{ background:linear-gradient(158deg, rgba(12,9,15,.74), rgba(12,9,15,.52)); border:1px solid rgba(255,255,255,.1); border-radius:18px; -webkit-backdrop-filter:blur(14px) saturate(1.08); backdrop-filter:blur(14px) saturate(1.08); } .sd-eyebrow{ font-family:var(--mono); font-size:clamp(11px,1.2vw,13px); letter-spacing:.22em; text-transform:uppercase; color:var(--ig); margin:0 0 clamp(16px,2.4vh,26px); text-shadow:0 1px 10px rgba(0,0,0,.5); } /* section header — real

, the mid tier of the type hierarchy */ .sd-head{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(26px,4vw,52px); line-height:1; letter-spacing:.01em; color:#fff; margin:0 0 clamp(20px,2.8vh,32px); text-shadow:none; } .sd-page .ar{ display:inline-block; } /* 1 · hero — tightened, promise + one proof stat */ /* first screen = hero + marquee together fill one viewport: hero grows, marquee rests at the foot */ .hero-screen{ min-height:100svh; display:flex; flex-direction:column; } .sd-hero{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; padding:clamp(96px,12vh,150px) 0 clamp(24px,3vh,44px); } .hero-screen .sd-trust{ flex:none; } /* marquee pinned to the bottom of the first screen */ .sd-hero-stat{ display:grid; gap:3px; padding:clamp(20px,2.1vw,30px) clamp(22px,2.3vw,34px); text-align:right; text-decoration:none; color:inherit; transition:transform .25s, border-color .25s; } .sd-hero-stat:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--ig) 55%, rgba(255,255,255,.14)); } .hs-num{ font-family:var(--disp); font-size:clamp(54px,7vw,108px); line-height:.84; color:var(--ig); } .hs-lbl{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(15px,1.5vw,20px); letter-spacing:.01em; color:#fff; } .hs-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:#c4bfd0; margin-top:7px; } /* 2 · capabilities — 3 category cards, each backed by its real tech logos. Now sits AFTER the proof, so it answers "what exactly" once they're sold. Big top = new act; tight bottom → the mini-cases. */ .sd-caps{ padding:clamp(56px,8vh,104px) 0 clamp(28px,4vh,50px); } .cap-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.5vw,20px); } .cap{ padding:clamp(24px,2.4vw,34px); display:flex; flex-direction:column; } /* the anchor = an inked case-file seal: wobbly double-ring + the stamped number, pressed askew */ .cap-stamp{ position:relative; width:clamp(60px,5.8vw,76px); height:clamp(60px,5.8vw,76px); margin-bottom:clamp(16px,2.3vh,26px); display:grid; place-items:center; color:var(--ig); } .cap-seal{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .cap-no{ position:relative; font-family:var(--disp); font-size:clamp(22px,2.3vw,30px); line-height:1; color:var(--ig); } .cap:nth-child(1) .cap-stamp{ transform:rotate(-5deg); } .cap:nth-child(2) .cap-stamp{ transform:rotate(3.5deg); } .cap:nth-child(3) .cap-stamp{ transform:rotate(-2deg); } .cap h3{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(18px,1.9vw,23px); line-height:1.08; letter-spacing:.01em; color:#fff; margin:0 0 9px; min-height:2.16em; } /* min-height lines the bodies up despite 1- vs 2-line titles */ .cap p{ margin:0; color:#d9d4e3; font-size:clamp(14px,1.45vw,16px); line-height:1.5; } /* the tech row — real tools, mono/dim/uniform, pinned to the card foot so the rows line up across cards. grouped under their category (not a pile); only the card NUMBER ignites — logos stay mono texture. */ .cap-tech{ list-style:none; margin:0; margin-top:auto; padding-top:clamp(18px,2.4vh,26px); border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,1.5vw,22px); } .cap-tech li{ display:flex; align-items:center; } .cap-tech img{ height:clamp(23px,2.4vw,27px); width:auto; max-width:104px; object-fit:contain; opacity:.52; filter:brightness(0) invert(1); /* any brand logo → uniform mono-white, no sponsor-wall colour */ transition:opacity .3s; } .cap:hover .cap-tech img{ opacity:.72; } /* 3 · proof — the loudest block on the page */ .sd-proofblock{ padding:clamp(48px,7vh,96px) 0 clamp(16px,2.4vh,32px); } /* proof leads the page now — comfortable top under the fold, tight bottom into What We Build */ /* ── flagship proof — single column: headline → full-width frame → sub + testimonial 2-up → CTA ── */ .pb-panel{ padding:clamp(24px,3vw,46px); overflow:hidden; display:flex; flex-direction:column; gap:clamp(22px,3.2vh,38px); } .pb-step{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ig); margin-bottom:clamp(10px,1.5vh,16px); text-shadow:0 1px 10px rgba(8,6,12,.5); } .pb-big{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(34px,5.4vw,80px); line-height:.92; letter-spacing:.006em; color:#fff; margin:0; max-width:16ch; } .pb-big em{ font-style:normal; color:var(--ig); } /* verdict-first hierarchy: the web RESULT is the loudest line, the descriptor a quiet sub */ .pb-verdict{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(40px,7vw,104px); line-height:.9; letter-spacing:.004em; color:#fff; margin:0; } .pb-verdict em{ font-style:normal; color:var(--ig); } .pb-desc{ margin:clamp(12px,1.8vh,18px) 0 0; max-width:50ch; color:#c8c3d4; font-size:clamp(14px,1.5vw,18px); line-height:1.5; } .sd-page .hud .btn{ background:rgba(10,8,14,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } /* the frame holds the real Jagiya shot, full width — shows the whole image, no crop, no letterbox gaps */ .pb-browser{ display:block; text-decoration:none; color:inherit; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#0c090f; box-shadow:0 44px 92px -34px rgba(0,0,0,.66); transition:border-color .3s, transform .3s; } .pb-browser:hover{ border-color:color-mix(in srgb,var(--ig) 55%, rgba(255,255,255,.14)); transform:translateY(-3px); } .pb-view{ display:block; position:relative; overflow:hidden; background:#0c090f; font-size:0; } .pb-view img{ display:block; width:100%; height:auto; } /* full image, no crop */ /* the read beneath the frame: sub copy | testimonial, side by side so the column keeps structure */ /* the testimonial is the whole foot now — a big, prominent pull-quote spanning the panel */ .pb-foot{ padding-top:clamp(26px,3.6vh,46px); border-top:1px solid rgba(255,255,255,.12); } .pb-cta{ --a1:var(--ig); align-self:flex-start; } .pb-q{ margin:0; } .pb-q .stars{ color:var(--ig); font-size:17px; letter-spacing:3px; } .pb-q p{ margin:clamp(14px,2vh,20px) 0 clamp(18px,2.6vh,26px); color:#f6f4fb; font-size:clamp(23px,3.1vw,40px); line-height:1.24; letter-spacing:-.006em; max-width:none; } .pb-q cite{ display:flex; align-items:center; gap:11px; font-style:normal; font-family:var(--sans); font-size:13px; letter-spacing:.04em; color:#c4bfd0; } .pb-q cite img{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; } /* track record — mini web cases beneath the flagship proof (turns one case into a body of work) */ .pb-more{ margin-top:clamp(18px,2.4vw,32px); } .pb-more-k{ font-family:var(--mono); font-size:clamp(11px,1.2vw,13px); letter-spacing:.2em; text-transform:uppercase; color:#c8c3d2; margin:0 0 clamp(12px,1.6vw,18px); text-shadow:0 1px 10px rgba(8,6,12,.5); } .pb-more-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,20px); } .pb-mini{ display:grid; gap:6px; align-content:start; padding:clamp(18px,1.9vw,24px); text-decoration:none; color:inherit; transition:transform .25s, border-color .25s; } .pb-mini:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--ig) 52%, rgba(255,255,255,.14)); } .pm-shot{ display:block; border-radius:11px; overflow:hidden; margin-bottom:clamp(12px,1.5vw,17px); border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.25); } .pm-shot img{ width:100%; height:auto; display:block; } .pm-c{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ig); } .pm-v{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(19px,2.2vw,28px); line-height:1.05; letter-spacing:.008em; color:#fff; margin-top:2px; } .pm-s{ margin-top:5px; color:#d5d0df; font-size:clamp(13px,1.4vw,15px); line-height:1.45; } .pm-go{ color:var(--ig); } @media (max-width:820px){ .pb-more-row{ grid-template-columns:1fr; } } .pb-viewall{ margin-top:clamp(24px,3.2vh,42px); display:flex; justify-content:center; } /* More Work — the mini-cases, now their own section after What We Build (tight top, follows the cards) */ .sd-morework{ padding:clamp(16px,2.4vh,30px) 0 clamp(24px,3.4vh,44px); } /* (no end CTA — the footer "Let's talk" bot is the call to action) */ /* 5 · PROCESS — a case-trail: start node → overlapping staggered cards on a dashed line → finish node. big top space marks a new act after the proof cluster (varied vertical rhythm). */ .sd-process{ padding:clamp(88px,13vh,156px) 0 clamp(44px,6vh,82px); } /* node — short dash — cards — short dash — node, centred (not stretched across the page) */ .journey{ position:relative; margin-top:clamp(28px,5vh,58px); padding:clamp(104px,13vh,136px) clamp(16px,4vw,40px); display:flex; align-items:center; justify-content:center; overflow-x:auto; overflow-y:hidden; } .jn-node{ flex:none; position:relative; display:flex; align-items:center; z-index:2; } .jn-dot{ width:15px; height:15px; border-radius:50%; background:var(--ig); border:2px solid rgba(255,255,255,.88); box-shadow:0 2px 10px rgba(0,0,0,.45); } .jn-cap{ position:absolute; top:50%; transform:translateY(-50%); width:max-content; font-family:var(--mono); font-size:clamp(11px,1.2vw,13px); text-transform:uppercase; letter-spacing:.09em; line-height:1.4; color:#eae7f0; text-shadow:0 1px 10px rgba(8,6,12,.6); } .jn-start .jn-cap{ right:calc(100% + 14px); text-align:right; } /* label sits OUTBOARD, left of the start dot */ .jn-finish .jn-cap{ left:calc(100% + 14px); text-align:left; } /* and right of the finish dot — never over a card */ .jn-dash{ flex:none; width:clamp(22px,3.5vw,44px); height:0; border-top:2px dashed rgba(255,255,255,.42); } .jn-track{ flex:none; position:relative; z-index:1; list-style:none; margin:0; padding:0; display:flex; align-items:center; } .jn-card{ flex:none; width:clamp(184px,16vw,214px); margin-left:clamp(-13px,-0.8vw,-5px); padding:clamp(17px,1.5vw,23px); position:relative; z-index:1; transform:translateY(calc(var(--sy,0px) + var(--pary,0px))) rotate(var(--rot,0deg)); box-shadow:0 22px 44px -20px rgba(0,0,0,.5); transition:transform .25s, box-shadow .25s; } .jn-card:first-child{ margin-left:0; } .jn-card:nth-child(odd){ --sy:-22px; } .jn-card:nth-child(even){ --sy:22px; } .jn-card:nth-child(1){ --rot:-3deg; } /* hand-placed tilt per card */ .jn-card:nth-child(2){ --rot:2.6deg; } .jn-card:nth-child(3){ --rot:-2deg; } .jn-card:nth-child(4){ --rot:3deg; } .jn-card:nth-child(5){ --rot:-2.4deg; } .jn-card:hover{ z-index:6; transform:translateY(calc(var(--sy,0px) + var(--pary,0px))) rotate(0deg) scale(1.05); } /* straighten + lift on hover (keeps its parallax offset) */ .jn-no{ font-family:var(--disp); font-size:clamp(22px,2.2vw,30px); color:var(--ig); line-height:1; } .jn-wk{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:#a9a4b8; margin:4px 0 11px; } .jn-card h3{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(15px,1.5vw,19px); line-height:1.06; letter-spacing:.008em; color:#fff; margin:0 0 12px; } .jn-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; } .jn-card ul li{ position:relative; padding-left:14px; font-size:clamp(12px,1.2vw,13.5px); color:#d4cfdf; line-height:1.4; } .jn-card ul li::before{ content:''; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:1px; background:var(--ig); } @media (max-width:820px){ /* mobile = a vertical timeline: a connecting line down the left with a node dot per step; cards sit to the right of it, inset from the screen edges (not full-bleed). */ .journey{ flex-direction:column; align-items:stretch; overflow-x:visible; padding:20px clamp(18px,6vw,34px); gap:12px; } .jn-dash, .jn-node{ display:none; } .jn-track{ position:relative; flex-direction:column; align-items:stretch; gap:clamp(18px,3vh,30px); padding:0 0 0 30px; } /* the connecting line — accent, fading downward */ .jn-track::before{ content:''; position:absolute; left:9px; top:24px; bottom:24px; width:2px; border-radius:2px; background:linear-gradient(180deg, var(--ig) 0%, color-mix(in srgb, var(--ig) 26%, transparent) 100%); } /* kill the per-card scroll drift (--pary) here — on the vertical stack it overlapped the cards */ .jn-card{ width:auto; margin-left:0; --sy:0; --rot:0deg; transform:none; position:relative; } /* node dot, centred on the line + level with the step number */ .jn-card::before{ content:''; position:absolute; left:-26px; top:26px; width:12px; height:12px; border-radius:50%; background:var(--ig); border:2px solid rgba(255,255,255,.9); box-shadow:0 0 0 4px color-mix(in srgb, var(--ig) 20%, transparent); } } /* 6 · FAQ — a flip-through file: intro on the left, a physical stack of question cards on the right */ .sd-faq{ padding:clamp(66px,8.4vh,116px) 0 clamp(58px,7.2vh,98px); } .faq-grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,5vw,70px); align-items:center; } .faq-sub{ margin:clamp(14px,2vh,20px) 0 0; color:#dcd7e6; font-size:clamp(15px,1.6vw,18px); line-height:1.5; max-width:36ch; } .faq-nav{ display:flex; align-items:center; gap:16px; margin-top:clamp(22px,3vh,32px); } .faq-btn{ width:48px; height:48px; border-radius:50%; border:1.6px solid color-mix(in srgb,var(--ig) 60%, rgba(255,255,255,.55)); background:rgba(10,8,14,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .2s, color .2s, border-color .2s, transform .2s; } .faq-btn:hover{ background:var(--ig); color:#0a0608; border-color:var(--ig); transform:translateY(-2px); } .faq-count{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:#eae7f0; text-shadow:0 1px 10px rgba(8,6,12,.6); } .faq-deck{ position:relative; height:clamp(280px,31vw,336px); perspective:1500px; } .faq-card{ position:absolute; inset:0; padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; cursor:pointer; border-bottom:3px solid var(--ig); backface-visibility:hidden; transition:transform .5s cubic-bezier(.34,.08,.24,1), opacity .5s; will-change:transform; } .faq-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(14px,2vh,22px); } .faq-tag{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ig); } .faq-more{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8d8899; } .faq-card h3{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(20px,2.4vw,32px); line-height:1.05; letter-spacing:.008em; color:#fff; margin:0 0 clamp(12px,2vh,18px); } .faq-card p{ margin:0; color:#dcd7e6; font-size:clamp(14px,1.55vw,17px); line-height:1.55; } @media (max-width:820px){ .faq-grid{ grid-template-columns:1fr; gap:24px; } .faq-deck{ height:clamp(300px,82vw,360px); } } /* ============================================================ CONVERSION SECTIONS — trust strip, mid-page CTA, what-happens-next, team, self-proof. Same dark-glass language, restrained: no price on the page, no badges, no urgency. Real crawlable DOM. ============================================================ */ /* 1b · trust strip — a FULL-BLEED band: label left, monochrome logo wall right. Edge-to-edge hairlines + a faint darker strip break the container width right after the tall hero — that shape change is the rhythm, no motion needed (Shape A). */ /* an auto-scrolling client marquee — logos sit on a CLEAN DARK panel (not over the morph) so the credibility glance actually reads; edges fade into that dark, not into the background */ .sd-trust{ padding:clamp(22px,3vh,42px) 0; } .marquee{ overflow:hidden; -webkit-mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee-track{ list-style:none; margin:0; padding:0; display:flex; align-items:center; width:max-content; gap:clamp(40px,5.2vw,76px); animation:trust-scroll 48s linear infinite; } .marquee:hover .marquee-track{ animation-play-state:paused; } .marquee-track li{ flex:none; display:flex; align-items:center; justify-content:center; } /* cap BOTH axes → wide wordmarks and tall marks land at the same optical size, mono-white; dim but READABLE */ .marquee-track img{ height:clamp(20px,2.2vw,27px); max-width:130px; width:auto; object-fit:contain; opacity:.9; filter:brightness(0) invert(1); transition:opacity .3s; } .marquee-track li:hover img{ opacity:1; } @keyframes trust-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* -50% = one full set → seamless */ @media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } } /* 5b · what happens next — three de-risk steps in glass */ .sd-next-steps{ padding:clamp(44px,6vh,82px) 0 clamp(28px,3.8vh,50px); } .ns-sub{ margin:0 0 clamp(28px,4vh,48px); max-width:52ch; color:#d5d0df; font-size:clamp(15px,1.6vw,19px); line-height:1.5; } .ns-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.5vw,20px); counter-reset:none; } .ns-step{ padding:clamp(24px,2.4vw,34px); display:flex; flex-direction:column; position:relative; } /* the step icons reuse the What-You-Get inked seal; hand-placed tilt per card, same as the capability stamps */ .ns-step:nth-child(1) .ns-stamp{ transform:rotate(-4deg); } .ns-step:nth-child(2) .ns-stamp{ transform:rotate(3.2deg); } .ns-step:nth-child(3) .ns-stamp{ transform:rotate(-2.4deg); } .ns-step h3{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(18px,1.9vw,23px); line-height:1.08; letter-spacing:.01em; color:#fff; margin:0 0 9px; } .ns-step p{ margin:0; color:#d9d4e3; font-size:clamp(14px,1.45vw,16px); line-height:1.5; } /* 6b · who you'll work with — Shape E: left-weighted copy, photo bleeds to the right edge. Big top padding sets it apart as a new act (varied vertical rhythm). */ .sd-team{ padding:clamp(60px,7.4vh,102px) 0 clamp(44px,6vh,84px); } /* generous breathing room above the team block */ .tm-wrap{ display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,0.82fr); gap:clamp(28px,4.5vw,72px); align-items:center; } .tm-lead{ margin:clamp(6px,1vh,12px) 0 0; max-width:46ch; color:#e2dded; font-size:clamp(15px,1.6vw,19px); line-height:1.5; } .tm-names{ margin:clamp(20px,2.6vh,30px) 0 0; display:flex; flex-wrap:wrap; gap:clamp(10px,1.2vw,16px); } .tm-names span{ font-family:var(--sans); font-size:clamp(13px,1.4vw,16px); letter-spacing:.04em; color:#fff; padding:clamp(9px,1vw,13px) clamp(14px,1.5vw,20px); border:1px solid rgba(255,255,255,.14); border-radius:100px; background:rgba(12,9,15,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } /* the photo sits in the same dark-glass frame as the proof shot — a real candid, not a stock headshot. negative right margin (matched to the container padding) pulls it to the viewport edge = edge-break. */ .tm-photo{ margin:0 0 0 clamp(-72px,-6vw,-20px); padding:clamp(8px,0.8vw,12px); overflow:hidden; box-shadow:0 28px 66px rgba(0,0,0,.42); } .tm-photo img{ display:block; width:100%; height:auto; border-radius:12px; } @media (max-width:860px){ .sd-hero-grid{ grid-template-columns:1fr; align-items:start; } .sd-hero-stat{ text-align:left; justify-items:start; } .cap-grid{ grid-template-columns:1fr; } .cta-panel{ flex-direction:column; align-items:flex-start; } .ns-grid{ grid-template-columns:1fr; } .pb-foot{ grid-template-columns:1fr; gap:clamp(22px,5vh,34px); } .tm-wrap{ grid-template-columns:1fr; align-items:start; } .tm-photo{ margin:0; order:2; } /* drop the edge bleed; heading reads first on mobile */ .tm-copy{ order:1; } }