/* ======================================================================== The Creativity Lab - Systems Studio Measured tokens, own content. ======================================================================== */ :root{ --bg:#F0F0F0; --bg-alt:#E3E3E3; --dark:#181818; --darker:#0A0A0A; --ink:#000; --dim:#A6A6A6; --body:#5f5f5f; --blue:#0274DE; --blue-deep:#0000EE; --card:#FDFDFD; --r-card:20px; --r-pill:50px; --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.16,1,.3,1); --wrap-pad:40px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:auto} html.is-landed{scroll-behavior:smooth} /* smooth only for in-page anchors after the first landing: a direct hash entry must not glide to its target (main.js adds the class after load) */ body{background:var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans",sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip} img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul{list-style:none} button{font-family:inherit;cursor:pointer;border:0;background:none} .wrap{padding-left:var(--wrap-pad);padding-right:var(--wrap-pad);max-width:1600px;margin:0 auto} /* type scale (measured) */ .h2{font-size:60px;font-weight:600;line-height:1.1;letter-spacing:-.04em;color:var(--ink);max-width:900px} .h2-dim{color:var(--dim)} .h2-light{color:#fff} .blue{color:var(--blue)} /* the section label, measured: Inter 14/500 lh14 ls-.42 after a 2x12 blue bar, gap 4; rgb(79) on the light sections, rgb(166) on the dark ones, rgb(110) on the process */ .label{display:flex;align-items:center;gap:4px;font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:500; line-height:1;letter-spacing:-.03em;color:#4F4F4F;margin-bottom:16px} .label-bar{width:2px;height:12px;flex:none;background:var(--blue)} .label-light{color:#A6A6A6} .sec-sub{font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#646464;max-width:600px;margin-top:24px} .sub-light{color:#E3E3E3} /* buttons */ /* the blue pill, measured: 200x46 at r50, Inter 15/600 lh15 ls-.15, padding 8 20 */ .btn-blue{display:inline-flex;align-items:center;justify-content:center;flex:none;width:200px;height:46px;padding:8px 20px;border-radius:var(--r-pill); background:var(--blue);color:#fff;font-family:"Inter",system-ui,sans-serif;font-size:15px;font-weight:600;line-height:1;letter-spacing:-.01em;white-space:nowrap} /* the chip, on the reference: rgb(240) at r20, 5/12/5/10 padding, Inter 14/500 on one line in rgb(110), icon left */ .chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:20px;background:#F0F0F0; font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#646464} .chip svg{color:var(--blue);flex:none} /* ======================================================================== NAV (fixed, flips theme via .nav-dark) ======================================================================== */ /* the header is a column now: the bar on top, the mobile panel growing under it (see MOBILE NAVIGATION). .nav-bar carries the row that .nav used to be, so nothing above 900px moves. */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:block; padding:0;color:#fff;transition:color .35s var(--ease)} .nav-logo{display:inline-flex;align-items:center;gap:11px;font-size:18px;font-weight:700;letter-spacing:-.02em} /* One parent brand, two worlds. The wordmark is World 1's exactly: a quieter "The", the name at full weight, and the orange point that belongs to the studio, not to this world. Only the electric signal and the AI LAB capsule after it say which world you are in. The registered mark is gone: nothing verifies that claim, so it should not be on the page. Adding "The " widens the name, so the logo steps 19px -> 18px and the gap 14px -> 11px, which keeps the whole lockup within its old footprint instead of pushing the nav wider. */ .nav-name{white-space:nowrap} .nav-name .nav-the{font-weight:400;opacity:.82} .nav-name .nav-dot{color:#ed4609} /* ======================================================================== IDENTITY: CreativityLab(R) | THE LAB SIGNAL | AI LAB CreativityLab = the studio. The signal = the portal. AI LAB = the second world. main.js upgrades the markup at runtime (signal internals, SVG text with the crossbar cut, refraction layer); these rules also degrade cleanly without it. Environment: default = over dark (nav on hero/bands); .nav.nav-dark and .ft = over light. ======================================================================== */ .nav-logo{position:relative;--sig-core:#EAF3FF;--ink:#A8CBFF;--edge:rgba(170,205,255,.62);--edge2:rgba(120,170,255,.22);--vio:rgba(160,120,255,.26);--hl:rgba(225,238,255,.95);--x:0px} /* THE LAB SIGNAL: 1px optical line, tiny core, violet hairline refraction; no blob */ .nav-sep{position:relative;width:1px;height:26px;flex:none;background:linear-gradient(180deg,transparent 0%,rgba(95,168,255,0) 12%,rgba(95,168,255,.55) 38%,rgba(95,168,255,.9) 50%,rgba(95,168,255,.55) 62%,rgba(95,168,255,0) 88%,transparent); transform:translateX(var(--x));transition:transform .28s cubic-bezier(.3,.7,.3,1)} .nav-sep i.v{position:absolute;left:1px;top:0;width:1px;height:100%;background:linear-gradient(180deg,transparent 20%,rgba(150,110,255,0) 34%,rgba(160,120,255,.42) 50%,rgba(150,110,255,0) 66%,transparent 80%);opacity:.55} .nav-sep::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0%,var(--sig-core) 45%,rgba(140,190,255,.9) 100%); box-shadow:0 0 0 .5px rgba(255,255,255,.4),0 0 4px 1px rgba(140,190,255,.9),0 0 10px 2px rgba(95,150,255,.35); transition:box-shadow .3s cubic-bezier(.3,.7,.3,1),transform .3s cubic-bezier(.3,.7,.3,1)} .nav-sep .clm-trace{position:absolute;left:0;top:50%;height:1px;width:14px;margin-top:-.5px;pointer-events:none;opacity:0; background:linear-gradient(90deg,rgba(120,180,255,0),rgba(190,220,255,.95) 60%,rgba(120,180,255,0))} /* AI LAB: a small slab of optical glass, lit from above */ .nav-ailab{position:relative;isolation:isolate;display:inline-flex;align-items:center;height:29px;padding:0 11px 0 15px;border-radius:999px; font-size:11px;font-weight:600;letter-spacing:.34em;line-height:1;color:var(--ink);white-space:nowrap;text-shadow:0 0 6px rgba(90,150,255,.35); background: radial-gradient(120% 90% at 30% -20%,rgba(200,225,255,.30),rgba(200,225,255,0) 60%), linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 45%,rgba(60,110,220,.10) 75%,rgba(40,80,200,.18) 100%); box-shadow:inset 0 1px 0 rgba(220,236,255,.55),inset 0 -1px 0 rgba(0,10,40,.45),inset 0 -6px 10px -8px rgba(0,10,50,.55), 0 1px 0 rgba(120,170,255,.10),0 3px 6px -3px rgba(0,5,30,.6),0 10px 20px -14px rgba(60,120,255,.35); transition:letter-spacing .5s cubic-bezier(.3,.7,.3,1)} .nav-ailab svg{display:block;height:1em;width:auto;overflow:visible} .nav-ailab svg text{fill:currentColor;font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.34em;transition:letter-spacing .5s cubic-bezier(.3,.7,.3,1)} .nav-ailab::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none; background:linear-gradient(180deg,var(--edge) 0%,rgba(120,170,255,.42) 40%,var(--edge2) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .nav-ailab::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.95; background: linear-gradient(90deg,transparent 10%,var(--hl) 34%,rgba(255,255,255,0) 62%) top/100% 1px no-repeat, radial-gradient(60% 120% at 6% 50%,var(--vio),transparent 70%), radial-gradient(70% 55% at 32% 8%,rgba(255,255,255,.22),transparent 70%), linear-gradient(90deg,transparent 30%,rgba(120,170,255,.28) 55%,transparent 80%) bottom/100% 1px no-repeat} .nav-ailab .rf{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden} .nav-ailab .rf::before{content:"";position:absolute;top:-1px;height:1px;left:0;width:32%;border-radius:1px;opacity:0;background:linear-gradient(90deg,transparent,rgba(210,232,255,.95),transparent)} .nav-ailab .rf::after{content:"";position:absolute;inset:0;opacity:0;transform:translateX(-60%);background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.14) 48%,rgba(150,120,255,.10) 52%,transparent 66%)} /* over light: same object, quieter edge, the site's ink blue */ .nav.nav-dark .nav-logo,.ft .nav-logo{--ink:#0274DE;--edge:rgba(2,116,222,.42);--edge2:rgba(2,116,222,.12);--vio:rgba(120,90,255,.16);--hl:rgba(255,255,255,.95)} .nav.nav-dark .nav-sep,.ft .nav-sep{background:linear-gradient(180deg,transparent 0%,rgba(2,116,222,0) 12%,rgba(2,116,222,.5) 38%,rgba(2,116,222,.85) 50%,rgba(2,116,222,.5) 62%,rgba(2,116,222,0) 88%,transparent)} .nav.nav-dark .nav-sep::after,.ft .nav-sep::after{box-shadow:0 0 0 .5px rgba(2,116,222,.5),0 0 3px 1px rgba(2,116,222,.6),0 0 7px 1px rgba(2,116,222,.18)} .nav.nav-dark .nav-ailab,.ft .nav-ailab{text-shadow:none; background: radial-gradient(120% 90% at 30% -20%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%), linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 45%,rgba(2,116,222,.05) 75%,rgba(2,116,222,.11) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(2,80,180,.16),inset 0 -6px 10px -8px rgba(2,80,180,.22), 0 1px 0 rgba(255,255,255,.7),0 3px 6px -3px rgba(2,60,140,.22),0 10px 20px -14px rgba(2,60,140,.28)} /* HOVER (<=500ms): the signal brightens, one refraction crosses the glass, spacing breathes */ @media (hover:hover) and (pointer:fine){ .nav-logo:hover .nav-sep::after{box-shadow:0 0 0 .5px rgba(255,255,255,.5),0 0 4px 1.5px rgba(140,190,255,.95),0 0 10px 2px rgba(95,150,255,.4)} .nav.nav-dark .nav-logo:hover .nav-sep::after,.ft .nav-logo:hover .nav-sep::after{box-shadow:0 0 0 .5px rgba(2,116,222,.6),0 0 4px 1.5px rgba(2,116,222,.75),0 0 8px 1px rgba(2,116,222,.25)} .nav-logo:hover .nav-ailab,.nav-logo:hover .nav-ailab svg text{letter-spacing:.355em} .nav-logo:hover .nav-ailab .rf::after{animation:clmRefract .5s cubic-bezier(.4,.1,.2,1) both} } @keyframes clmRefract{0%{opacity:0;transform:translateX(-60%)}20%{opacity:1}100%{opacity:0;transform:translateX(120%)}} /* ACTIVATION, once on first appearance: 0-300 rest, 300-650 signal, 650-950 trace, 950-1200 capsule catches, then still */ .nav-logo.act .nav-sep::after{animation:clmSig 1.2s cubic-bezier(.3,.7,.3,1) .3s both} @keyframes clmSig{0%{transform:scale(.6);opacity:.4}30%{transform:scale(1.35);opacity:1;box-shadow:0 0 0 .5px rgba(255,255,255,.55),0 0 6px 2px rgba(150,195,255,1),0 0 14px 3px rgba(95,150,255,.45)}100%{transform:scale(1);opacity:1}} .nav-logo.act .nav-sep{animation:clmSigLine .9s cubic-bezier(.3,.7,.3,1) .3s both} @keyframes clmSigLine{0%{opacity:.15;transform:scaleY(.4)}60%{opacity:1;transform:scaleY(1.06)}100%{opacity:1;transform:scaleY(1)}} .nav-logo.act .clm-trace{animation:clmTrace .3s cubic-bezier(.4,.1,.2,1) .65s both} @keyframes clmTrace{0%{opacity:0;transform:translateX(0)}30%{opacity:1}100%{opacity:0;transform:translateX(16px)}} .nav-logo.act .nav-ailab .rf::before{animation:clmCatch .3s cubic-bezier(.4,.1,.2,1) .95s both} @keyframes clmCatch{0%{opacity:0;transform:translateX(0)}30%{opacity:1}100%{opacity:0;transform:translateX(105%)}} .nav-logo.act .nav-ailab::before{animation:clmEdge .55s cubic-bezier(.4,.1,.2,1) .95s both} @keyframes clmEdge{0%{filter:brightness(1)}40%{filter:brightness(1.35)}100%{filter:brightness(1)}} @media (prefers-reduced-motion:reduce){ .nav-logo,.nav-logo *,.nav-logo *::before,.nav-logo *::after{animation:none!important;transition:none!important} } /* links: every item is a 40px pill-shaped hit area on ONE vertical axis, so plain links, the active pill, the language capsule and the CTA all share the same centre line. Text-to-text rhythm stays 34px (14px padding + 6px gap). Hover = a quiet tinted pill, not a fade. */ .nav-links{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;margin-left:auto;margin-right:20px} .nav-links a{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:var(--r-pill);color:inherit;opacity:1; transition:background .28s var(--ease),color .28s var(--ease),transform .28s var(--ease)} .nav-links a:hover{background:rgba(255,255,255,.10)} .nav.nav-dark .nav-links a:hover{background:rgba(10,10,10,.06)} .nav-links a:active{transform:scale(.97)} .nav-links a:focus-visible{outline:2px solid #8FC0FF;outline-offset:2px} /* ---- Language Capsule: a tiny piece of the AI LAB operating system ---- */ .lang-cap{position:relative;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;margin-right:16px;border-radius:999px; background:rgba(10,18,32,.72);border:1px solid rgba(150,190,255,.26); -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2); box-shadow:inset 0 1px 0 rgba(190,220,255,.10); font-size:11px;font-weight:700;letter-spacing:.08em;color:#DCE8FA;cursor:pointer; overflow:hidden;isolation:isolate;transition:border-color .25s var(--ease)} /* generous touch area without growing the visual */ .lang-cap::before{content:"";position:absolute;inset:-8px} .lc-now{position:relative} .lc-dots{display:inline-flex;align-items:center;gap:3px;transition:opacity .2s var(--ease),max-width .25s var(--ease);max-width:20px} .lc-dots i{width:2.5px;height:2.5px;border-radius:50%;background:rgba(150,190,255,.4)} .lc-dots i:first-child{background:#5FA8FF;box-shadow:0 0 4px 1px rgba(95,168,255,.55)} .lc-track{position:relative;width:0;max-width:0;height:1px;background:rgba(150,190,255,.28);opacity:0; transition:max-width .28s var(--ease),width .28s var(--ease),opacity .2s var(--ease)} .lc-track i{position:absolute;top:-1.5px;left:0;width:4px;height:4px;border-radius:50%;background:#8FC0FF; box-shadow:0 0 6px 1.5px rgba(95,168,255,.75)} .lc-next{max-width:0;opacity:0;overflow:hidden;color:rgba(214,230,255,.5); transition:max-width .28s var(--ease),opacity .25s var(--ease),color .3s var(--ease),text-shadow .3s var(--ease)} /* engaged: capsule unfolds, the light crosses, the new language lights up */ .lang-cap.go .lc-dots{opacity:0;max-width:0} .lang-cap.go .lc-track{width:24px;max-width:24px;opacity:1} .lang-cap.go .lc-track i{animation:lcTravel .34s cubic-bezier(.4,.1,.3,1) .12s forwards} @keyframes lcTravel{to{left:calc(100% - 4px)}} .lang-cap.go .lc-next{max-width:26px;opacity:1} .lang-cap.lit2 .lc-next{color:#fff;text-shadow:0 0 9px rgba(95,168,255,.85)} @media (hover:hover) and (pointer:fine){ .lang-cap:hover{border-color:rgba(170,205,255,.5)} .lang-cap:hover .lc-dots i:first-child{box-shadow:0 0 6px 2px rgba(95,168,255,.8)} .lang-cap::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,transparent 32%,rgba(150,200,255,.14) 50%,transparent 68%); transform:translateX(-160%)} .lang-cap:hover::after{animation:lcSheen .7s var(--ease) forwards} @keyframes lcSheen{to{transform:translateX(160%)}} } .lang-cap:focus-visible{outline:2px solid #8FC0FF;outline-offset:2px} @media (prefers-reduced-motion:reduce){ .lang-cap.go .lc-track i,.lang-cap:hover::after{animation:none} } /* nav CTA: luminous blue optical glass, the one primary action in the nav */ @property --nav-spark{syntax:"";initial-value:120deg;inherits:false} .nav-cta{position:relative;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 24px;border-radius:var(--r-pill); background:linear-gradient(165deg,rgba(22,42,76,.82),rgba(9,17,34,.9)); -webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25); border:1px solid rgba(120,180,255,.5); box-shadow:inset 0 1px 0 rgba(200,228,255,.22),0 0 16px -5px rgba(40,130,255,.5),0 6px 20px -10px rgba(0,10,30,.5); color:#fff;font-size:15px;font-weight:600;overflow:hidden;isolation:isolate; transition:transform .3s cubic-bezier(.25,.6,.3,1),box-shadow .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)} .nav-cta-arrow{display:inline-flex} .nav-cta-arrow svg{width:14px;height:14px;fill:none;stroke:#BFD9FF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; transition:transform .3s cubic-bezier(.25,.6,.3,1)} /* the second-look detail: every few seconds one tiny light passes a short arc of the border */ .nav-cta::before{content:"";position:absolute;inset:-1px;border-radius:999px;padding:1px;pointer-events:none;opacity:0; background:conic-gradient(from var(--nav-spark),transparent 0 95%,rgba(200,228,255,.95) 97.5%,transparent 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude; animation:navSpark 6.5s linear infinite} @keyframes navSpark{ 0%,64%{opacity:0;--nav-spark:120deg} 70%{opacity:1} 86%{opacity:1;--nav-spark:300deg} 91%,100%{opacity:0;--nav-spark:320deg} } /* hover sheen surface */ .nav-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(100deg,transparent 30%,rgba(170,210,255,.16) 50%,transparent 70%);transform:translateX(-160%)} @media (hover:hover) and (pointer:fine){ .nav-cta:hover{transform:translateY(-1.5px);border-color:rgba(150,200,255,.72); background:linear-gradient(165deg,rgba(28,52,92,.86),rgba(12,22,42,.92)); box-shadow:inset 0 1px 0 rgba(200,228,255,.28),0 0 22px -4px rgba(50,140,255,.62),0 8px 24px -10px rgba(0,10,30,.55)} .nav-cta:hover .nav-cta-arrow svg{transform:translateX(3.5px)} .nav-cta:hover::after{animation:lcSheen .6s var(--ease) forwards} } .nav-cta:active{transform:scale(.985)} .nav-cta:focus-visible{outline:2px solid #8FC0FF;outline-offset:3px} @media (prefers-reduced-motion:reduce){ .nav-cta::before,.nav-cta:hover::after{animation:none} } .nav.nav-dark{color:#000} /* ---- scrolled state: the atmosphere around the nav condenses into glass ---- Two states, one nav. State 1 (top): exactly as before, weightless. State 2 (.is-glass, past ~56px): the right-hand cluster becomes a contained optical-glass capsule and the identity on the left gets a soft-edged blur field. main.js wraps the cluster in .nav-cap at runtime and toggles .is-glass with hysteresis so it never flickers. Layers: nav 100 (unchanged), capsule surfaces below their own content via z-index -1. */ .nav-cap{position:relative;display:flex;align-items:center;margin-left:auto;margin-right:-6px;padding:6px 6px 6px 22px;border-radius:999px;isolation:isolate; transition:margin .4s cubic-bezier(.32,.72,.24,1)} .nav-cap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35); border:1px solid rgba(255,255,255,.62); box-shadow:0 0 0 1px rgba(10,20,40,.045),inset 0 1px 0 rgba(255,255,255,.85),0 10px 26px -14px rgba(10,20,40,.22),0 2px 6px -3px rgba(10,20,40,.08); opacity:0;transform:scale(.985);transition:opacity .42s cubic-bezier(.32,.72,.24,1),transform .42s cubic-bezier(.32,.72,.24,1)} /* the small blue optical highlight along part of the upper edge */ .nav-cap::after{content:"";position:absolute;left:14%;right:52%;top:-1px;height:1px;z-index:0;pointer-events:none;border-radius:1px; background:linear-gradient(90deg,transparent,rgba(120,178,255,.0) 8%,rgba(140,190,255,.85) 45%,rgba(120,178,255,.0) 92%,transparent); opacity:0;transition:opacity .5s .1s cubic-bezier(.32,.72,.24,1)} .nav .nav-links,.nav .lang-cap{transition:margin .4s cubic-bezier(.32,.72,.24,1),gap .4s cubic-bezier(.32,.72,.24,1)} .nav{transition:color .35s var(--ease),transform .42s cubic-bezier(.32,.72,.24,1)} /* state 2 */ .nav.is-glass{transform:translateY(-4px)} .nav.is-glass .nav-cap{margin-right:0} .nav.is-glass .nav-cap::before{opacity:1;transform:none} .nav.is-glass .nav-cap::after{opacity:1} .nav.is-glass .nav-links{gap:0;margin-right:12px} .nav.is-glass .lang-cap{margin-right:10px} /* one-time reflection travelling ~28% along the upper border when the glass forms */ .nav-cap .nav-cap-sheen{position:absolute;top:-1px;left:0;width:26%;height:1px;z-index:1;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,rgba(210,232,255,.95),transparent)} .nav.is-glass.glass-enter .nav-cap-sheen{animation:navCapSheen .9s cubic-bezier(.4,.1,.2,1) .18s both} @keyframes navCapSheen{0%{transform:translateX(-30%);opacity:0}25%{opacity:1}100%{transform:translateX(280%);opacity:0}} /* There used to be a second plate behind the identity here: a rounded field inset -9px -22px -9px -18px, so wider than the capsule and pushed off-centre, faded in on scroll and turned near-black over dark sections. That is the offset dark shape that appeared around the logo once the page moved, and no amount of softening the capsule's own shadow could reach it, because it was never a shadow. The capsule already carries its own glass and blur, which is what keeps the wordmark readable, so the plate is gone rather than dimmed. */ .nav-logo{position:relative;isolation:isolate} /* keep the existing dark-blue CTA readable and seated in the glass: no size change */ .nav.is-glass .nav-cta{box-shadow:0 6px 18px -8px rgba(2,60,140,.45),0 0 0 1px rgba(255,255,255,.35)} /* over dark sections (homepage bands) the nav is white-on-dark: glass flips to smoked so text stays readable */ .nav.is-glass:not(.nav-dark) .nav-cap::before{background:rgba(10,14,22,.58);border-color:rgba(255,255,255,.14); box-shadow:0 0 0 1px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12),0 10px 26px -14px rgba(0,0,0,.6)} @media (prefers-reduced-motion:reduce){ .nav,.nav-cap,.nav-cap::before,.nav-cap::after,.nav .nav-links,.nav .lang-cap{transition:none} .nav.is-glass.glass-enter .nav-cap-sheen{animation:none} } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav-cap::before{background:rgba(255,255,255,.94)} } /* ======================================================================== HERO (flower pins for the whole stretch; content + next section glide over) ======================================================================== */ .hero{position:relative} .hero-bg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden} .hero-bg img{width:100%;height:100%;object-fit:cover} /* living-organism layer: media wrapper carries the cursor parallax, video fades in over the poster img */ .hero-bg-media{position:absolute;inset:0;transform:scale(1.025);will-change:transform} .hero-bg-media img{position:absolute;inset:0} .hero-bg-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease} .hero-bg-media video.live{opacity:1} .hero-bg-glow{position:absolute;left:0;top:0;width:920px;height:920px;margin:-460px 0 0 -460px;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;will-change:transform,opacity; background:radial-gradient(circle,rgba(150,195,255,.15),rgba(150,195,255,.05) 42%,rgba(150,195,255,0) 70%)} @media (prefers-reduced-motion: reduce){ .hero-bg-media{transform:none} .hero-bg-media video{display:none} .hero-bg-glow{display:none} } .hero-screen{position:relative;z-index:1;height:100vh;min-height:640px;display:flex;flex-direction:column; padding:108px var(--wrap-pad) 40px;color:#fff} .hero-title{font-size:clamp(52px,7.4vw,106px);font-weight:600;line-height:1;letter-spacing:-.04em;color:#fff;max-width:1300px} .hero-sub{margin-top:34px;font-size:20px;font-weight:500;line-height:1.4} .hero-actions{margin-top:42px;align-self:flex-start;display:inline-flex;padding:6px;gap:6px;border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .btn-hero-primary{display:inline-flex;align-items:center;height:54px;padding:0 42px;border-radius:50px 0 0 50px; background:#fff;color:#181818;font-size:16px;font-weight:700} .btn-hero-ghost{display:inline-flex;align-items:center;height:54px;padding:0 42px;border-radius:0 50px 50px 0; background:rgba(255,255,255,.16);color:#fff;font-size:16px;font-weight:600;transition:background .3s var(--ease)} .btn-hero-ghost:hover{background:rgba(255,255,255,.26)} .hero-bottom{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;padding-top:24px} /* ---- World Gate: portal to the Creative Studio (the first world) ---- */ .world-gate{position:relative;flex:0 0 auto;width:378px;height:164px;display:block;border-radius:16px; overflow:hidden;isolation:isolate;border:1px solid rgba(150,190,255,.18); box-shadow:0 10px 40px -18px rgba(0,0,0,.6); transition:border-color .45s var(--ease),box-shadow .45s var(--ease)} .world-gate img,.wg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%; transition:transform .7s var(--ease),filter .7s var(--ease)} .wg-video{opacity:0;transition:opacity 1.2s var(--ease),transform .7s var(--ease),filter .7s var(--ease)} .wg-video.on{opacity:1} .world-gate::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(4,8,18,0) 44%,rgba(4,8,18,.74) 100%)} .wg-label{position:absolute;left:14px;right:12px;bottom:11px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px} .wg-text{display:flex;flex-direction:column;gap:2px} .wg-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(190,215,255,.78)} .wg-title{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em} .wg-chip{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:#fff;font-size:15px;transition:background .35s var(--ease),transform .45s var(--ease)} @media (hover:hover) and (pointer:fine){ .world-gate:hover{border-color:rgba(255,196,130,.44); box-shadow:0 0 0 1px rgba(255,190,120,.22),0 14px 52px -16px rgba(255,170,90,.28)} .world-gate:hover img,.world-gate:hover .wg-video{transform:scale(1.055);filter:brightness(1.08)} .world-gate:hover .wg-chip{background:var(--blue);transform:translate(2px,-2px)} } .world-gate:focus-visible{outline:2px solid #8FC0FF;outline-offset:3px} /* stepping-through overlay, driven by main.js on gate click */ .ws-veil{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0; background:radial-gradient(60% 60% at 22% 78%,rgba(255,236,210,.96) 0%,rgba(200,220,255,.9) 42%,rgba(6,12,26,.97) 100%); transition:opacity .45s var(--ease)} body.ws-leaving .ws-veil{opacity:1} .hero-strip{flex:1 1 auto;display:flex;align-items:flex-end;min-width:0;transform:translateY(-18px)} @media (max-width:900px){.hero-strip{transform:translateY(-10px)}} @media (max-width:560px){ /* the concierge launcher owns the bottom-right quarter on phones: the rail hands over well before it, instead of running its labels underneath the button */ .hero-rail .hr-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 48%,transparent 76%); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 48%,transparent 76%)} .hero-strip{transform:translateY(-16px)} } @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---- Intelligence Rail: capability rail with a continuous travelling signal ---- labels above, one 1px line below; the amber beam decides which capability is "processing". States: idle .38 / upcoming .55 / active .95 (hierarchy, never everything lit at once). */ .hero-rail{flex:1 1 auto;min-width:0;position:relative} .hr-viewport{position:relative;overflow:hidden;padding:20px 0 26px; /* the right side dies out earlier than the left: the concierge launcher lives in that corner, and the rail should hand the space over instead of crowding it */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 78%,transparent 97%);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 78%,transparent 97%)} /* the infrastructure line */ .hr-viewport::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px; background:linear-gradient(90deg,transparent 0%,rgba(95,168,255,.10) 7%,rgba(95,168,255,.30) 24%, rgba(140,120,255,.38) 50%,rgba(95,168,255,.30) 76%,rgba(95,168,255,.10) 93%,transparent 100%)} /* readability: a soft midnight fade behind the moving labels, no card, no edges. The flower stays visible; only the interference right behind the words is damped. */ .hr-viewport{isolation:isolate} .hr-viewport::before{content:"";position:absolute;inset:-6px 0 0 0;z-index:-1;pointer-events:none; background:radial-gradient(70% 150% at 50% 62%,rgba(6,12,30,.78),rgba(6,12,30,.42) 55%,rgba(6,12,30,0) 82%)} /* deeper: the words sit on the brightest part of the flower */ .hr-track{display:flex;align-items:center;width:max-content;will-change:transform} .hr-cap{position:relative;display:flex;align-items:center;gap:9px;flex:none;padding:6px 2px;border-radius:6px;outline:none} .hr-cap + .hr-cap{margin-left:58px} .hr-glyph{width:19px;height:19px;flex:none;color:rgba(190,206,230,.7);overflow:visible;transition:color .32s ease} .hr-glyph line,.hr-glyph rect,.hr-glyph circle{stroke:currentColor;stroke-width:.8;fill:none;transition:color .32s ease,stroke .32s ease,fill .32s ease} .hr-glyph .f{fill:currentColor;stroke:none} .hr-name{font-size:12.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap;color:rgba(255,255,255,.74);transition:color .32s ease,transform .32s ease;will-change:transform} .hr-tech{position:absolute;left:28px;bottom:100%;margin-bottom:5px;font-size:9.5px;font-weight:500;letter-spacing:.16em;white-space:nowrap;color:rgba(168,203,255,.85); opacity:0;transform:translateY(3px);transition:opacity .32s ease .18s,transform .32s ease .18s;pointer-events:none} .hr-fiber{display:none} /* the amber node on the line under an active capability */ .hr-cap::after{content:"";position:absolute;left:50%;bottom:-15px;width:4px;height:4px;margin-left:-2px;border-radius:50%; background:#FFB46A;box-shadow:0 0 8px 2px rgba(255,140,60,.4); opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .3s ease} /* state ladder: upcoming -> active (JS drives .up/.on from the beam position) */ .hr-cap.up .hr-name{color:rgba(255,255,255,.86)} .hr-cap.up .hr-glyph{color:rgba(200,218,245,.8)} .hr-cap.on .hr-name,.hr-cap:hover .hr-name,.hr-cap:focus-visible .hr-name{color:rgba(255,255,255,.95);transform:translateY(-1px)} .hr-cap.on .hr-glyph,.hr-cap:hover .hr-glyph,.hr-cap:focus-visible .hr-glyph{color:#5FA8FF} .hr-cap.on::after,.hr-cap:hover::after,.hr-cap:focus-visible::after{opacity:1;transform:scale(1)} .hr-cap:hover,.hr-cap:focus-visible{z-index:1} .hr-cap .hr-glyph [data-g="1"]{transition-delay:0s} .hr-cap .hr-glyph [data-g="2"]{transition-delay:.07s} .hr-cap .hr-glyph [data-g="3"]{transition-delay:.15s} .hr-cap:hover .hr-tech,.hr-cap:focus-visible .hr-tech{opacity:1;transform:none} .hr-cap:focus-visible{box-shadow:0 0 0 2px rgba(120,170,255,.55)} /* cursor proximity: whole rail lifts a whisper */ .hero-rail.near .hr-name{color:rgba(255,255,255,.5)} .hero-rail.near .hr-cap.on .hr-name{color:rgba(255,255,255,.95)} /* the travelling beam: a short amber trail with a bright head, riding the line */ .hr-beam{position:absolute;bottom:9px;left:0;width:120px;height:1px;pointer-events:none;will-change:transform; background:linear-gradient(90deg,transparent,rgba(140,180,255,.0) 10%,rgba(140,180,255,.42) 70%,rgba(170,200,255,.85) 100%)} .hr-beam::before{content:"";position:absolute;right:-46px;top:0;width:92px;height:1px; background:linear-gradient(90deg,transparent,rgba(120,170,255,.55) 50%,transparent);opacity:.9} .hr-beam::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%; background:#FFB46A;box-shadow:0 0 8px 2px rgba(140,180,255,.50),0 0 3px 1px rgba(255,150,60,.65)} /* reduced motion: calm static rail, no beam (beam is JS-created) */ @media (prefers-reduced-motion:reduce){ .hr-name{color:rgba(255,255,255,.55)} } /* flower -> rail particle */ .hero-particle{position:absolute;width:3px;height:3px;border-radius:50%;pointer-events:none;opacity:0; background:#a9ccff;box-shadow:0 0 6px 1px rgba(110,165,255,.8);will-change:transform,opacity} .hero-particle.amber{background:#FFB46A;box-shadow:0 0 7px 1.5px rgba(255,150,60,.8)} /* scrub screen (per-character reveal over the pinned flower; text scrolls 1:1, never pinned). On the reference this is one full viewport (900 at 1440) with the text centred in an 1100 column at 60/600 lh60 ls-1.2: the letters arrive white over the photo, which is then washed to light beneath them. */ .hero-scrub{position:relative;z-index:1;min-height:100vh;padding:40px;display:flex;align-items:center;justify-content:center;pointer-events:none} .scrub-text{max-width:1100px;margin:0 auto;text-align:center; font-size:60px;font-weight:600;line-height:1;letter-spacing:-.02em;color:#fff} .scrub-text .sw{display:inline-block;white-space:nowrap} .scrub-text .c{display:inline-block;color:#E3E3E3;filter:blur(7px);transition:color .3s var(--ease),filter .3s var(--ease)} .scrub-text .c.on{color:#fff;filter:blur(0)} .scrub-dark .c{color:rgba(255,255,255,.28)} .scrub-dark .c.on{color:#fff} /* about lives inside the hero, over the pinned flower */ .hero .about{position:relative;z-index:1;padding:40px 0 140px;color:#fff;background:none} /* ======================================================================== SERVICES ======================================================================== */ .svc{position:relative;z-index:2;background:var(--bg-alt);padding:120px 0} /* the grid, on the reference: 677+677 with 6px gutters, every row 462 tall */ .svc-grid{margin-top:60px} /* one card = one link to its service page. White, 24px of padding, no ring, no shadow, no hover: chip, 32/600 title, 16/500 text, then the bullets at the foot. */ .svc-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;height:462px;padding:24px; background:#fff;border-radius:var(--r-card);color:#0A0A0A;cursor:pointer} .svc-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px} .svc-card h3{font-size:32px;font-weight:600;line-height:1.3;letter-spacing:-.03em;color:#0A0A0A;margin:16px 0 8px} .svc-card p{font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#646464;max-width:560px} .svc-card ul{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:4px} .svc-card li{position:relative;padding-left:12px;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#646464} .svc-card li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--blue)} /* glass frame: blurred bleed copy behind a translucent 5px glass rim with the sharp media in an inset window */ .svc-media{position:relative;border-radius:var(--r-card);overflow:hidden;height:462px;background:#0a0a0a} .svc-media img,.svc-media video{width:100%;height:100%;object-fit:cover} .gm-blur{position:absolute;inset:-20px;border-radius:16px;overflow:hidden;filter:blur(10px);opacity:.8} .gm-pane{position:absolute;inset:40px;border-radius:20px;background:rgba(255,255,255,.15)} .gm-window{position:absolute;inset:45px;border-radius:16px;overflow:hidden} /* growth card: whisper of light responds to the cursor (desktop only) */ .svc-growth .gm-window::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(60% 55% at 50% 42%,rgba(210,230,255,.16),rgba(210,230,255,0) 70%); transition:opacity .5s var(--ease)} @media (hover:hover) and (pointer:fine){ .svc-growth:hover .gm-window::after{opacity:1} .svc-growth .gm-window video{transition:filter .5s var(--ease)} .svc-growth:hover .gm-window video{filter:brightness(1.025)} } /* ======================================================================== PROCESS ======================================================================== */ .proc{background:var(--bg);padding:120px 0} .proc .label{color:#646464} .proc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:60px} /* four identical white cards, measured: 335.5x300, r20, padding 24; the step chip, the 24/600 title, and the 16/500 rgb(110) text parked at the foot. No active state, no signals, no hover. */ .proc-card{background:#fff;border-radius:var(--r-card);padding:24px;height:300px;display:flex;flex-direction:column;align-items:flex-start} .proc-card .chip{padding:4px 12px 4px 10px} .proc-card h3{font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.03em;color:#0A0A0A;margin-top:16px} .proc-card p{font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#646464;margin-top:auto;padding-top:16px} /* ======================================================================== BEFORE / AFTER ======================================================================== */ .ba{background:var(--bg-alt);padding:120px 0} .ba-title{text-align:center;margin:0 auto 60px;max-width:1000px} /* 1000px block = 35px rail | 6 | card 456 | 6 | card 456 | 6 | 35px rail, as measured */ .ba-grid{display:grid;grid-template-columns:35px 6px 1fr 6px 1fr 6px 35px;gap:0;max-width:1000px;margin:0 auto;align-items:stretch} .ba-tab-after{grid-column:1} .ba-card.ba-after{grid-column:3} .ba-card.ba-before{grid-column:5} .ba-tab-before{grid-column:7} .ba-tab{border-radius:12px} .ba-tab-after{background:var(--blue)} .ba-tab-before{background:transparent} /* the cards, measured: r20 with 6px of padding around two 16px blocks, the head (Inter 14 kicker, 24/600 title) and the r14 list in Inter 14/500 lh14, gap 12 */ .ba-card{background:#fff;border-radius:20px;padding:6px;display:flex;flex-direction:column;gap:32px} .ba-before{background:#F0F0F0} .ba-head{padding:16px;display:flex;flex-direction:column;gap:6px} .ba-kicker{font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#6e6e6e} .ba-card h3{font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.03em;color:#0a0a0a} .ba-card h3 sup{font-size:.62em;top:-.42em} .ba-list{padding:16px;border-radius:14px;display:flex;flex-direction:column;gap:12px} .ba-card li{font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:500;line-height:14px;letter-spacing:-.03em;color:#6e6e6e;padding-left:20px;position:relative} /* outlined circle icons: same grey text both sides */ .ba-card li::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;border:1px solid currentColor} .ba-after li::before{border-color:var(--blue)} .ba-before li::before{border-color:#9a9a9a} .ba-after li::after{content:"";position:absolute;left:4px;top:4px;width:4.5px;height:2.5px; border-left:1.2px solid var(--blue);border-bottom:1.2px solid var(--blue);transform:rotate(-45deg)} .ba-before li::after{content:"";position:absolute;left:4px;top:4px;width:5px;height:5px; background:linear-gradient(45deg,transparent 43%,#9a9a9a 43%,#9a9a9a 57%,transparent 57%), linear-gradient(-45deg,transparent 43%,#9a9a9a 43%,#9a9a9a 57%,transparent 57%)} /* ======================================================================== DARK BAND: FEATURED CASE ======================================================================== */ /* The section carries no top padding of its own: the sticky flower is its first child, and any padding here would push it down and leave a black slab above it where the ground shows through. The breathing room lives on the inner wrap. */ .dark{position:relative;background:var(--dark);padding:0 0 120px;overflow:clip} /* the manifest gets a full viewport over the pinned flower; the cards start at +1057 and the cases head at +1920 (its 120 of padding included), as measured */ .dark-manifest{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 0} .dark-bg img{width:100%;height:100%;object-fit:cover;opacity:.9} /* the flower fades into the ground at its foot, so the case grid below is not met by a hard horizon */ .dark-bg::after{display:none} /* no gradient foot: the image fades out by scroll (main.js), as on the reference */ .dark .wrap{position:relative} .scrub-dark{position:static;font-size:60px;max-width:1360px;margin:0 auto;display:block;padding:0} .scrub-dark .c{color:#E3E3E3} .case-feature{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} /* blue optical glass: cool tint + restrained internal bloom, the photo stays readable through it */ .cf-card{position:relative;overflow:hidden;border-radius:var(--r-card);padding:32px;min-height:560px;display:flex;flex-direction:column; background:linear-gradient(168deg,rgba(10,20,38,.62) 0%,rgba(6,12,24,.74) 100%); border:1px solid rgba(150,190,255,.14); -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);color:#fff; box-shadow:inset 0 1px 0 rgba(190,220,255,.10),inset 0 26px 50px -34px rgba(160,200,255,.16)} .cf-card::before{content:"";position:absolute;inset:-30%;pointer-events:none;opacity:.55; background:radial-gradient(44% 38% at var(--cf-x,28%) 82%, var(--cf-tint,rgba(2,116,222,.26)), transparent 72%); transition:opacity .6s var(--ease),transform .8s var(--ease)} .cf-card>*{position:relative} .cf-build{--cf-tint:rgba(2,116,222,.28);--cf-x:26%} .cf-process{--cf-tint:rgba(46,104,236,.24);--cf-x:52%} .cf-founder{--cf-tint:rgba(88,90,232,.22);--cf-x:74%} .case-feature .cf-card:hover::before{opacity:.78;transform:translate(0,-4%) scale(1.04)} .cf-card h3{font-size:34px;font-weight:600;letter-spacing:-.02em} .cf-desc{font-size:19px;line-height:1.45;margin-top:auto} .cf-row{display:flex;justify-content:space-between;align-items:center} .cf-year{font-size:15px;color:rgba(255,255,255,.7)} .cf-meta{margin-top:auto;display:flex;flex-direction:column;gap:14px} .cf-meta dt{font-size:13.5px;color:rgba(255,255,255,.5)} .cf-meta dd{font-size:16px;font-weight:600;margin-top:2px} .cf-card blockquote{font-size:26px;font-weight:500;line-height:1.35;letter-spacing:-.01em;margin-top:26px} .cf-person{display:flex;align-items:center;gap:12px;margin-top:auto} .cf-person img{width:40px;height:40px;border-radius:50%;object-fit:cover} .cf-person div{display:flex;flex-direction:column;gap:2px} .cf-person strong{font-size:16px} .cf-person span{font-size:13.5px;color:rgba(255,255,255,.65)} .cf-person .cf-loc{color:rgba(255,255,255,.45)} /* ---- AI Lab intro cards (authentic content, restrained micro-interactions) ---- */ .cf-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)} @media (hover:hover) and (pointer:fine){ /* .case-feature prefix outranks the later [data-nv-reveal].in transform reset */ .case-feature .cf-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14); box-shadow:0 18px 40px rgba(0,0,0,.28)} } .cf-eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55)} .cf-build h3{margin-top:16px} .cf-caps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;font-size:14px;font-weight:600} .cf-caps span{color:rgba(255,255,255,.75);transition:color .3s var(--ease)} .cf-caps i{font-style:normal;color:rgba(255,255,255,.3)} @media (hover:hover) and (pointer:fine){ .cf-build:hover .cf-caps span{color:#fff} .cf-build:hover .cf-caps span:nth-child(1){transition-delay:0s} .cf-build:hover .cf-caps span:nth-child(3){transition-delay:.07s} .cf-build:hover .cf-caps span:nth-child(5){transition-delay:.14s} .cf-build:hover .cf-caps span:nth-child(7){transition-delay:.21s} } .cf-brand{font-size:19px;font-weight:700;letter-spacing:-.02em} .cf-proc-main{font-size:25px;font-weight:600;letter-spacing:-.01em;margin-top:auto;line-height:1.35} .cf-proc-main i{font-style:normal;color:var(--blue);font-weight:400;margin:0 2px} .cf-proc-sub{font-size:15px;color:rgba(255,255,255,.6);margin-top:10px} .cf-progress{position:relative;display:block;height:1px;margin-top:24px;background:rgba(255,255,255,.14);overflow:hidden} .cf-progress u{position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left; transition:transform 1s var(--ease) .35s} .cf-card.in .cf-progress u{transform:scaleX(1)} .cf-steps{margin-top:24px;gap:12px} .cf-steps dt{color:var(--blue);font-weight:600;font-size:13px} .cf-steps div:last-child dt{font-size:16px;line-height:.9} .cf-steps dd{font-size:15.5px} .cf-founder blockquote{margin-top:auto;padding-bottom:26px} .cf-founder{position:relative} .cf-founder::after{content:"";position:absolute;inset:0;border-radius:var(--r-card);pointer-events:none;opacity:0; background:radial-gradient(260px 220px at var(--fx,70%) var(--fy,20%),rgba(255,255,255,.07),transparent 70%); transition:opacity .5s var(--ease)} @media (hover:hover) and (pointer:fine){ .cf-founder:hover::after{opacity:1} } .cf-person strong{display:block;font-size:14.5px} .cf-person span{font-size:12.5px;color:rgba(255,255,255,.6)} /* ======================================================================== CASE GRID (dark #181818) ======================================================================== */ /* the case heading rides on the dark band, so band and grid read as one block */ .dark-caseshead{margin-top:277px} .dark .label{color:#A6A6A6} /* the section head, on the reference: label and h2 (gap 24), then one row with the sub at the left and the action at its right foot, 32 below the h2 */ .sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px} .sec-head .label{margin-bottom:0} .dark-caseshead .sec-head{gap:24px} .sec-subrow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:24px} .dark-caseshead .sec-subrow{margin-top:32px} .sec-subrow .sec-sub{margin-top:0} /* the text link with the arrow: Inter 14/500, the arrow turned to -45deg, both settling (colour to white, arrow to 0deg) over .4s on hover */ /* the cases link sits bare on the flower and a bright bloom crosses it while scrolling (1.3:1 at its worst, measured with a 15px sweep); the same .62 plate as the glass cards makes it independent of the picture */ .txt-link{display:inline-flex;align-items:center;gap:6px;flex:none;font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:500;padding:9px 14px;border-radius:999px;background:rgba(8,12,24,.62);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.88);white-space:nowrap;transition:color .4s var(--ease)} /* the cases link sits on the flower: #A6A6A6 fell to 2.6:1 on its bright filaments, near-white holds 5.7 */ .txt-link .tl-arrow{display:inline-flex;transform:rotate(-45deg);transition:transform .4s var(--ease)} .txt-link:hover,.txt-link:focus-visible{color:#fff} .txt-link:hover .tl-arrow,.txt-link:focus-visible .tl-arrow{transform:rotate(0deg)} .txt-link--dark{color:#0A0A0A;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none} .txt-link--dark:hover,.txt-link--dark:focus-visible{color:#0274DE} .cg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cg-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;min-height:440px} /* one published case: span the row and size to content instead of leaving a half-empty grid with a 440px hole in it. No :has() needed, so this holds in every browser. */ .cg-card:only-child{grid-column:1/-1;min-height:0} .cg-card:only-child .cg-desc{padding-top:30px} .cg-top{display:flex;justify-content:space-between;gap:24px} .cg-top>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0} .cg-logo{height:22px;margin-bottom:26px;filter:brightness(0) invert(1);opacity:.9} .cg-card h3{font-size:32px;font-weight:600;letter-spacing:-.02em} .cg-tag{font-size:15px;color:rgba(255,255,255,.55);margin-top:6px} .cg-year{font-size:14px;color:rgba(255,255,255,.4);margin-top:8px} .cg-top figure{flex:0 0 215px;border-radius:12px;overflow:hidden;height:160px} .cg-top figure img,.cg-top figure video{width:100%;height:100%;object-fit:cover} .cg-desc{font-size:19px;line-height:1.45;color:rgba(255,255,255,.85);margin-top:auto;padding-top:44px;max-width:560px} .cg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .cg-chips span{padding:7px 13px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);font-size:13px;color:rgba(255,255,255,.7)} .cg-chips strong{color:#fff;font-weight:700;margin-right:4px} /* CalcAI flagship card: same skeleton as the other cases, no special hover (case cards give no hover response at all) */ .cg-wordmark{display:block;height:22px;margin-bottom:26px;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:22px;color:#fff} .cg-wordmark::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#FF8A3C;margin-left:7px;vertical-align:8px} .csl-wordmark{color:#0a0a0a} /* ======================================================================== TESTIMONIALS (darker, slider). Measured on the reference at 1440: the section is rgb(10) with 120/40 padding; a 954x568 card on rgb(24), r20, padding 32, holding a 158px visual, name 20/500, role 16/500 rgb(110), an Inter 14 tag, the quote at 28/500 lh36.4 ls-.84 and two 35px r12 arrows on rgb(36); beside it a 2x3 grid of 197x185 r20 wordmark cards on rgb(24) and rgb(10). Ours carries the studio's real Google reviews; there are no portraits, so the visual is a tile with the reviewer's initials. ======================================================================== */ .tm{background:#0A0A0A;padding:120px 0;color:#fff} .tm .label{color:#A6A6A6} .tm .sec-sub{color:#A6A6A6} .btn-white{display:inline-flex;align-items:center;justify-content:center;flex:none;width:200px;height:46px;padding:8px 20px; border-radius:50px;background:#fff;color:#181818;font-family:"Inter",system-ui,sans-serif;font-size:15px;font-weight:700; line-height:1;letter-spacing:-.01em;white-space:nowrap;transition:background .25s var(--ease)} .btn-white:hover{background:#E3E3E3} .btn-white:focus-visible{outline:2px solid #8FC0FF;outline-offset:3px} .tm-row{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:6px;margin-top:60px;align-items:start} .tm-card{position:relative;background:#181818;border-radius:20px;padding:32px;min-height:568px;display:flex;flex-direction:column} .tm-slides{flex:1 1 auto;display:flex;flex-direction:column} .tm-slide{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:40px;animation:tmIn .5s var(--ease)} .tm-slide[hidden]{display:none} @keyframes tmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .tm-person{display:flex;align-items:flex-start;gap:14px;padding-right:90px} .tm-visual{width:158px;height:158px;border-radius:12px;flex:none;display:grid;place-items:center; font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1;background:#0274DE;color:#fff} .tm-visual::before{content:attr(data-ini)} .tm-slide[data-tone="2"] .tm-visual{background:#E3E3E3;color:#0A0A0A} .tm-slide[data-tone="3"] .tm-visual{background:#242424;color:#fff} .tm-slide[data-tone="4"] .tm-visual{background:#5FA8FF;color:#0A0A0A} .tm-slide[data-tone="5"] .tm-visual{background:#0A0A0A;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .tm-who{display:flex;flex-direction:column;justify-content:space-between;min-height:158px;min-width:0} .tm-name{font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#fff} .tm-role{margin-top:2px;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#646464} .tm-tag{display:flex;align-items:center;gap:8px;font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:500; line-height:1;letter-spacing:-.03em;color:#A6A6A6} .tm-stars{font-size:12px;letter-spacing:.08em;color:#fff} .tm-quote{max-width:900px} .tm-quote p{font-size:28px;font-weight:500;line-height:1.3;letter-spacing:-.03em;color:#fff} .tm-arrows{position:absolute;right:32px;top:32px;display:flex;gap:6px} .tm-arrow{width:35px;height:35px;border-radius:12px;background:#242424;color:#fff;display:grid;place-items:center; transition:background .25s var(--ease)} .tm-arrow:hover{background:#303030} .tm-arrow:focus-visible{outline:2px solid #8FC0FF;outline-offset:2px} .tm-logos{display:grid;grid-template-columns:197px 197px;gap:6px;justify-content:center;align-content:start} .tm-logo{height:185px;border-radius:20px;background:#0A0A0A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:grid;place-items:center;padding:24px;text-align:center} .tm-logo span{font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.2;opacity:.4} .tm-logo:nth-child(1),.tm-logo:nth-child(4),.tm-logo:nth-child(5){background:#181818;box-shadow:none} .tm-logo--lit span{opacity:1} @media (max-width:1100px){ .tm-row{grid-template-columns:1fr} .tm-logos{display:none} } @media (max-width:720px){ .tm-card{padding:24px;min-height:0} .tm-arrows{position:static;order:-1;justify-content:flex-end;margin-bottom:44px} .tm-person{padding-right:0} .tm-visual{width:128px;height:128px;font-size:32px} .tm-who{min-height:128px} .tm-name{font-size:18px} .tm-quote p{font-size:24px} } @media (max-width:1100px) and (min-width:721px){ .tm-visual{width:128px;height:128px;font-size:32px} .tm-who{min-height:128px} } @media (prefers-reduced-motion:reduce){.tm-slide{animation:none}} /* ======================================================================== PRICING (white) ======================================================================== */ .pricing{background:#fff;padding:110px 0} .pr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:52px} .pr-toggle{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--r-pill);background:var(--bg);font-size:14.5px;color:#8a8a8a} .pr-toggle .on{color:#000;font-weight:600} .pr-switch{position:relative;width:46px;height:26px;border-radius:20px;background:#cfcfcf;transition:background .25s var(--ease)} .pr-switch span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)} .pr-switch.on{background:var(--blue)} .pr-switch.on span{transform:translateX(20px)} .pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch} .pr-card{background:var(--bg);border-radius:var(--r-card);padding:30px;display:flex;flex-direction:column;border:1.5px solid transparent} .pr-popular{background:#fff;border-color:var(--blue);box-shadow:0 24px 60px -30px rgba(2,116,222,.25)} .pr-pop{color:var(--blue);font-size:13.5px;font-weight:600;margin-left:10px} .pr-card .chip{align-self:flex-start;background:#fff;border-color:rgba(0,0,0,.08)} .pr-popular .chip{background:var(--bg)} /* the price line wraps rather than pushing the /maand suffix out of the card at 320 */ .pr-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-top:26px} .pr-old{font-size:22px;font-weight:600;color:#b3b3b3;text-decoration:line-through} .pr-price strong{font-size:40px;font-weight:600;letter-spacing:-.02em} .pr-per{font-size:14px;color:#8a8a8a} .pr-for{font-size:15px;color:var(--body);margin:16px 0 26px;min-height:44px} .pr-btn{display:flex;align-items:center;justify-content:center;height:54px;border-radius:var(--r-pill);background:#fff; color:var(--blue);font-size:15.5px;font-weight:700;border:1px solid rgba(0,0,0,.06);transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .pr-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(0,0,0,.25)} .pr-btn-blue{background:var(--blue);color:#fff} .pr-incl{font-size:13.5px;color:#8a8a8a;margin:28px 0 14px} .pr-card ul{display:flex;flex-direction:column;gap:11px} .pr-card li{font-size:15px;color:#333;padding-left:24px;position:relative} .pr-card li::before{content:"";position:absolute;left:2px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--blue);opacity:.85} .pr-card li::after{content:"";position:absolute;left:6px;top:7px;width:4px;height:2.5px;border-left:1.4px solid #fff;border-bottom:1.4px solid #fff;transform:rotate(-45deg)} /* ======================================================================== TEAM ======================================================================== */ /* FDR: the founder feature (replaces the fictional team grid). Warm, editorial, one real person. The orange rule between portrait and story draws downward on entry: experience flowing into the independent studio. */ .fdr{background:#F7F5F1;padding:130px 0;color:#141210} .fdr-eyebrow{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8a8378} .fdr-dot{width:6px;height:6px;border-radius:50%;background:#FF7A32;flex:none} .fdr-h{margin-top:22px;font-size:clamp(38px,3.9vw,56px);font-weight:600;letter-spacing:-.03em;line-height:1.12;color:#141210;max-width:720px} .fdr-comp{display:grid;grid-template-columns:minmax(0,42fr) 1px minmax(0,54fr);gap:0 60px;margin-top:76px;align-items:stretch} .fdr-portrait{margin:0} /* entrance per brief: fade + settle from 1.02, no big slide */ .fdr-portrait[data-nv-reveal]{transform:scale(1.02);transition-duration:.8s} .fdr-frame{display:block;border-radius:20px;overflow:hidden;aspect-ratio:3/4;background:#151310} .fdr-frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} @media (hover:hover) and (pointer:fine){ .fdr .fdr-frame:hover img{transform:scale(1.015)} } .fdr-note{margin-top:16px;font-size:15px;font-style:italic;color:#8a8378;transform:rotate(-1.2deg);transform-origin:left} /* the signature rule: draws top to bottom, ends in a small orange point */ .fdr-rule{position:relative;width:1px} .fdr-rule i{display:block;width:1px;height:100%;background:rgba(255,122,50,.55); transform:scaleY(0);transform-origin:top;transition:transform 1.1s cubic-bezier(.6,.05,.3,1) .25s} .fdr-rule::after{content:"";position:absolute;left:50%;bottom:-2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%; background:#FF7A32;opacity:0;transition:opacity .4s ease 1.3s} .fdr-portrait.in ~ .fdr-rule i{transform:scaleY(1)} .fdr-portrait.in ~ .fdr-rule::after{opacity:1} .fdr-story{max-width:560px} .fdr-name{font-size:24px;font-weight:600;letter-spacing:-.01em} .fdr-role{margin-top:7px;font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#8a8378} .fdr-text{margin-top:32px;display:flex;flex-direction:column;gap:16px} .fdr-text p{font-size:18.5px;line-height:1.62;color:#37332c} .fdr-direct{margin-top:28px;font-size:15.5px;line-height:1.65;color:#6d675e;max-width:500px} /* one warm muted label grey for the small uppercase lines on the cream founder panel. #b3ab9f and #9a938a were tints of the ground itself and measured 2.07:1 and 2.76:1 there; this reads 4.79:1 on #f6f4f0 at the same weight and tracking. */ .fdr{--fdr-label:#726B62} .fdr-exp{margin-top:46px;padding-top:26px;border-top:1px solid rgba(20,18,16,.09)} .fdr-exp-label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fdr-label)} .fdr-exp-line{margin-top:11px;font-size:15px;color:#37332c} .fdr-exp-line i{font-style:normal;color:#c9c2b6;margin:0 13px} .fdr-meta{margin-top:13px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fdr-label)} .fdr-cta-row{margin-top:46px} .fdr-q{font-size:15px;color:#6d675e} .fdr-cta{display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:6px 0;font-size:17px;font-weight:600;color:#141210; background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1.5px;transition:background-size .28s var(--ease)} .fdr-cta i{width:5px;height:5px;border-radius:50%;background:#FF7A32;flex:none;opacity:0;transform:scale(.5);transition:opacity .25s var(--ease),transform .25s var(--ease)} .fdr-cta span{font-size:13px;color:#8a8378;transition:transform .25s var(--ease)} @media (hover:hover) and (pointer:fine){ .fdr .fdr-cta:hover{background-size:100% 1.5px} .fdr .fdr-cta:hover i{opacity:1;transform:scale(1)} .fdr .fdr-cta:hover span{transform:translate(3px,-3px)} } .fdr-cta:focus-visible{outline:2px solid #FF9A5C;outline-offset:4px} @media (prefers-reduced-motion:reduce){ .fdr-rule i{transition:none;transform:scaleY(1)} .fdr-rule::after{transition:none;opacity:1} } /* ======================================================================== FAQ ======================================================================== */ .faq{background:var(--bg-alt);padding:110px 0} /* centered heading + one 638px panel holding tabs, items and the contact foot */ .faq-head{text-align:center;max-width:1000px;margin:0 auto} .faq-head .label{justify-content:center} .faq-head .sec-sub{max-width:600px;margin:14px auto 0;text-align:center} .faq-panel{max-width:638px;margin:44px auto 0;border-radius:24px;padding:16px; background:linear-gradient(180deg,#FBFBFB 0%,#F1F1F1 100%);box-shadow:0 1px 2px rgba(0,0,0,.04)} .faq-tabs{display:flex;gap:6px;margin:0 0 12px;padding:0 4px} .faq-tab{padding:8px 12px;border-radius:var(--r-pill);background:transparent;font-size:14px;font-weight:600;color:#6e6e6e;transition:background .25s var(--ease),color .25s var(--ease)} .faq-tab:hover{color:#0a0a0a} .faq-tab.on{background:var(--darker);color:#fff} .faq-list{display:flex;flex-direction:column;gap:8px} .faq-item{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05)} .faq-item[hidden]{display:none} .faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px; padding:18px 20px;font-size:18px;font-weight:500;color:#0a0a0a;cursor:pointer} .faq-item summary::-webkit-details-marker{display:none} /* chevron */ .faq-item summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-right:4px; border-right:1.8px solid var(--blue);border-bottom:1.8px solid var(--blue); transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)} .faq-item[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)} .faq-item p{padding:0 20px 20px;font-size:15px;line-height:1.6;color:#6e6e6e} .faq-foot{padding:22px 20px 6px} .faq-foot-lead{font-size:15px;line-height:1.55;color:#4f4f4f} .faq-foot-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px} .faq-person{display:flex;align-items:center;gap:10px} .faq-person img{width:40px;height:40px;border-radius:50%;object-fit:cover} .faq-person strong{display:block;font-size:14px;font-weight:600;color:#0a0a0a} .faq-person span span{font-size:13px;color:#6e6e6e} .faq-ask{padding:8px 20px;height:46px;display:inline-flex;align-items:center;font-size:15px;font-weight:600} /* ======================================================================== BLOG ======================================================================== */ .blog{background:var(--bg);padding:120px 0} .blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:60px} .blog-card{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:677/447;display:block;background:#0A0A0A} .blog-card figure{position:absolute;inset:0} .blog-card picture{position:absolute;inset:0;display:block} .blog-card img,.blog-card video{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.9,.3,1.1)} /* journal living stills: the loop sits over its own poster JPG and only fades in once it is actually playing, so there is never a black frame or a layout shift */ .blog-card figure video.jl{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease),transform .6s cubic-bezier(.2,.9,.3,1.1)} .blog-card figure video.jl.is-live{opacity:1} @media (prefers-reduced-motion:reduce){.blog-card figure video.jl{display:none}} .blog-card:hover img,.blog-card:hover video{transform:scale(1.15)} .blog-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.08) 45%)} .blog-meta{position:absolute;left:20px;right:20px;bottom:20px;z-index:1;color:#fff} .blog-metarow{display:flex;gap:12px;font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#E3E3E3;margin-bottom:12px} .blog-meta h3{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.3} /* ======================================================================== FOOTER / CTA ======================================================================== */ /* ==== FT: the quiet ending. Light architectural footer; hierarchy comes from spacing and 1px lines, never from size. ==== */ .ft{position:relative;background:#F7F7F5;color:#141412;padding:0 0 34px;overflow:clip} /* barely-there warm falloff near the CTA: only noticeable if removed */ .ft::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(46% 34% at 16% 14%,rgba(255,150,80,.05),transparent 70%)} /* the boundary between the dark world and the light ending */ .ft-edge{position:relative;height:1px;background:rgba(2,116,222,.30);overflow:hidden} .ft-edge i{position:absolute;top:0;left:-90px;width:90px;height:1px;opacity:0; background:linear-gradient(90deg,transparent,#5FA8FF 55%,#fff)} .ft.pulsed .ft-edge i{animation:ftPulse 1.5s cubic-bezier(.5,.08,.35,1) forwards} @keyframes ftPulse{0%{opacity:0;transform:translateX(0)}10%{opacity:1}86%{opacity:1}100%{opacity:0;transform:translateX(calc(100vw + 90px))}} .ft .wrap{position:relative} /* contact composition: one asymmetric grid, no cards */ .ft-contact{display:grid;grid-template-columns:minmax(0,58%) minmax(0,27%);justify-content:space-between;padding:104px 0 96px} .ft-eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8b8b85} .ft-h{font-size:clamp(34px,3.2vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1.12;color:#0f0f0d;margin-top:18px} .ft-sub{margin-top:20px;font-size:16px;line-height:1.65;color:#5f5f58} .ft-actions{margin-top:38px;display:flex;align-items:center;gap:30px} .ft-cta{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:50px; background:#0A0A0A;color:#fff;font-size:15px;font-weight:600; transition:background .25s var(--ease),transform .3s cubic-bezier(.25,.6,.3,1);will-change:transform} .ft-cta i{width:6px;height:6px;border-radius:50%;background:#FF7A32;flex:none} .ft-cta span{font-size:13px;opacity:.72;transition:transform .2s var(--ease)} .ft-cta:hover{background:#1d1d1b} .ft-cta:hover span{transform:translate(2px,-2px)} .ft-call{font-size:15px;font-weight:600;color:#141412;padding:10px 0; background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - 8px)/0 1px;transition:background-size .24s var(--ease)} .ft-call:hover{background-size:100% 1px} .ft-call span{font-size:12px;color:#8b8b85} /* direct-contact module: hairline, not a card */ .ft-direct{border-left:1px solid rgba(0,0,0,.10);padding-left:32px;padding-top:4px;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px} .ft-label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8b8b85} .ft-mail{font-size:17px;font-weight:600;color:#0f0f0d; background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1.5px;transition:background-size .28s var(--ease)} .ft-mail:hover{background-size:100% 1.5px} .ft-meta{font-size:14px;line-height:1.7;color:#6e6e66} .ft-status{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6e6e66;margin-top:4px} .ft-status i,.ft-online i{width:5px;height:5px;border-radius:50%;flex:none;animation:ftBreath 3.4s ease-in-out infinite} .ft-status i{background:#FF7A32} @keyframes ftBreath{0%,100%{opacity:1}50%{opacity:.4}} /* signature: one studio, two worlds */ .ft-worlds{padding-bottom:88px} .ft-wline{display:flex;align-items:center;gap:14px} .ft-node{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8b8b85;transition:color .2s var(--ease)} .ft-node i{width:5px;height:5px;border-radius:50%;flex:none;transition:box-shadow .25s var(--ease)} .ft-node-cs i{background:#FF7A32} .ft-node-ai i{background:#0274DE} a.ft-node:hover{color:#141412} a.ft-node-cs:hover i{box-shadow:0 0 8px 1.5px rgba(255,122,50,.5)} a.ft-node-ai:hover i{box-shadow:0 0 8px 1.5px rgba(2,116,222,.5)} .ft-rail{position:relative;flex:1;height:1px;background:rgba(0,0,0,.10)} .ft-runner{position:absolute;top:-1.5px;left:0;width:4px;height:4px;border-radius:50%;background:#b3b3ab;animation:ftRun 13s ease-in-out infinite} @keyframes ftRun{0%{left:0}50%{left:calc(100% - 4px)}100%{left:0}} .ft-caption{margin-top:14px;text-align:center;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#9a9a92} /* navigation: precise 12-column grid, small type */ .ft-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px 24px;padding:56px 0 76px;border-top:1px solid rgba(0,0,0,.08)} .ft-brand{grid-column:1/6} .ft-brand p{margin-top:16px;font-size:13.5px;line-height:1.7;color:#6e6e66;max-width:250px} .ft .nav-name{color:#0f0f0d} .ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .ft-col:nth-of-type(2){grid-column:7/9} .ft-col:nth-of-type(3){grid-column:9/11} .ft-col:nth-of-type(4){grid-column:11/13} .ft-col p{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8b8b85;margin-bottom:12px} .ft-col a{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#3f3f39;padding:2px 0;white-space:nowrap; transition:transform .2s var(--ease),color .2s var(--ease)} .ft-col a::after{content:"\2197";font-size:10px;color:#8b8b85;opacity:0;transform:translate(-3px,2px);transition:opacity .2s var(--ease),transform .2s var(--ease)} .ft-col a:hover{transform:translateX(2px);color:#0f0f0d} .ft-col a:hover::after{opacity:1;transform:none} /* bottom bar */ .ft-bottom{display:flex;align-items:center;gap:26px;padding-top:22px;border-top:1px solid rgba(0,0,0,.08);font-size:12px;color:#8b8b85} .ft-bottom nav{display:flex;gap:18px;margin-left:auto} .ft-bottom nav a{color:#8b8b85;transition:color .2s var(--ease)} .ft-bottom nav a:hover{color:#141412} .ft-online{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8b8b85} .ft-online i{background:#0274DE} @media (prefers-reduced-motion:reduce){ .ft-runner,.ft-status i,.ft-online i,.ft.pulsed .ft-edge i{animation:none} } /* ======================================================================== REVEALS (opacity 0 + y100 -> spring) ======================================================================== */ [data-nv-reveal]{opacity:0;transform:translateY(100px);transition:opacity 1.05s cubic-bezier(.2,.7,.2,1),transform 1.05s cubic-bezier(.2,.7,.2,1)} [data-nv-reveal].in{opacity:1;transform:none} [data-nv-delay="1"]{transition-delay:.12s} [data-nv-delay="2"]{transition-delay:.24s} [data-nv-delay="3"]{transition-delay:.36s} figure[data-nv-reveal]:not(.svc-media){transform:none;opacity:.5} figure[data-nv-reveal]:not(.svc-media).in{opacity:1} /* ======================================================================== RESPONSIVE ======================================================================== */ @media (max-width:1180px){ .h2{font-size:46px} .hero-title{font-size:clamp(48px,8vw,84px)} .svc-grid,.cg-grid,.blog-grid{grid-template-columns:1fr} /* founder feature: own mobile art direction (portrait 4:5, rule hidden) */ .fdr-comp{grid-template-columns:1fr;gap:44px 0;margin-top:52px} .fdr-rule{display:none} .fdr-frame{aspect-ratio:4/5} .fdr-story{max-width:none} .proc-grid{grid-template-columns:1fr 1fr} .case-feature{grid-template-columns:1fr} .cf-card{min-height:0;gap:26px} /* minmax(0,1fr), not a bare 1fr: the automatic minimum of a bare track is the card min-content, which pushed a 343px card into a 280px container and gave the page 43px of sideways scroll at 320. */ .pr-grid{grid-template-columns:minmax(0,1fr)} .pr-head,.faq-head{flex-direction:column;align-items:flex-start;gap:26px} .sec-subrow{flex-direction:column;align-items:flex-start;gap:32px} .hero-bottom{flex-direction:column;align-items:stretch} .world-gate{width:auto} .hero-strip{justify-content:space-between} .scrub-text{font-size:40px} .scrub-dark{font-size:40px} } @media (max-width:720px){ :root{--wrap-pad:20px} .h2{font-size:34px} .hero-title{font-size:44px} .hero-sub{font-size:17px} .hero-actions{flex-direction:column;border-radius:26px;align-self:stretch} .btn-hero-primary,.btn-hero-ghost{justify-content:center;border-radius:50px} .world-gate{height:118px} .wg-title{font-size:15.5px} .hero-scrub{padding:24px 12px} .scrub-text{font-size:28px} .scrub-dark{font-size:26px} .svc-card{height:auto} .svc-media{height:280px} .gm-blur{inset:-12px} .gm-pane{inset:22px;border-radius:16px} .gm-window{inset:26px;border-radius:12px} .proc-grid{grid-template-columns:1fr} .ba-grid{grid-template-columns:1fr;gap:12px} .ba-card.ba-after,.ba-card.ba-before{grid-column:1} .ba-tab{display:none} .ba-res-head{flex-direction:column;align-items:flex-start;gap:14px} .fdr{padding:96px 0} .fdr-text p{font-size:17px} .fdr-exp-line i{margin:0 9px} .cg-top{flex-direction:column} .cg-top figure{flex:none;width:100%;height:200px} .cg-desc{padding-top:26px} /* footer: art-directed stack, not shrunk columns */ .ft-contact{grid-template-columns:1fr;row-gap:52px;padding:80px 0 72px} .ft-direct{border-left:0;border-top:1px solid rgba(0,0,0,.10);padding-left:0;padding-top:30px} .ft-grid{grid-template-columns:1fr 1fr;gap:40px 24px;padding:48px 0 60px} .ft-brand{grid-column:1/3} .ft-col:nth-of-type(2){grid-column:1/2} .ft-col:nth-of-type(3){grid-column:2/3} .ft-col:nth-of-type(4){grid-column:1/2} .ft-col a{padding:12px 0} .ft-bottom nav a{padding:10px 0} .ft-bottom{flex-wrap:wrap;row-gap:12px} .ft-bottom nav{margin-left:0;width:100%} .ft-worlds{padding-bottom:68px} /* compact mobile nav: identity stays whole, language + CTA form one small glass capsule, nothing wraps and nothing leaves the viewport */ .nav{padding:calc(14px + env(safe-area-inset-top)) 16px 14px} .nav-logo{gap:8px;font-size:16px} .nav-ailab{white-space:nowrap;font-size:9px;letter-spacing:.2em;height:22px;padding:0 7px 0 10px} .nav-ailab svg text{letter-spacing:.2em} .nav-cap{padding:4px 4px 4px 8px;margin-right:-4px} .nav.is-glass .nav-cap{margin-right:0} .lang-cap{margin-right:8px;padding:0 10px;height:30px} .lang-cap .lc-dots{display:none} .nav.is-glass .lang-cap{margin-right:8px} .nav.is-glass{transform:translateY(-3px)} .nav-cta{white-space:nowrap;height:38px;padding:0 14px;font-size:14px;gap:6px} .nav-cta-arrow{display:none} .faq-tabs{flex-wrap:wrap} .nav-logo{gap:9px;font-size:17px} .nav-sep{height:20px} .nav-sep i.v{display:none} .nav-ailab{font-size:9.5px;letter-spacing:.26em;height:24px;padding:0 8px 0 11px;text-shadow:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,20,60,.22)} .nav-ailab svg text{letter-spacing:.26em} .nav-ailab::after{background:radial-gradient(60% 120% at 6% 50%,var(--vio),transparent 70%)} .hero-strip{flex-direction:column;align-items:flex-start;gap:14px} .hero-rail{width:100%;flex:none;align-self:stretch} .hr-viewport{padding-bottom:0} .hr-tech{display:none} .hr-cap + .hr-cap{margin-left:34px} .hr-glyph{width:17px;height:17px} .hr-name{font-size:11.5px;letter-spacing:.04em} } @media (prefers-reduced-motion: reduce){ [data-nv-reveal]{opacity:1;transform:none;transition:none} .hr-sig,.hero-particle{display:none} .cf-card,.cf-caps span,.cf-progress u{transition:none} .cf-card .cf-progress u,.cf-card.in .cf-progress u{transform:scaleX(1)} .cf-founder::after{display:none} .cf-card:hover{transform:none} .scrub-text .c{color:#fff;filter:none;transition:none} html,html.is-landed{scroll-behavior:auto} } /* ---- reconciliation pass (dump-spec details) ---- */ /* grain overlay over everything, barely there */ body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.02; background-image:url("data:image/svg+xml;utf8,"); background-size:256px 256px} /* about / stats block */ .about-head{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:60px} .about-head .h2{color:#fff} .about .label{color:#fff} .about-desc{color:rgba(255,255,255,.7)} .about-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:6px} .reel{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:300px;background:#070d1f;display:block;width:100%; border:1px solid rgba(170,200,255,.16);cursor:pointer;text-align:left} .reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:transform .6s var(--ease)} .reel:hover img,.reel:focus-visible img{transform:scale(1.02)} .reel:focus-visible{outline:2px solid #0274DE;outline-offset:3px} /* controlled dark overlay: the poster keeps its detail, the type gets its floor */ .reel-shade{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(7,13,31,0) 42%,rgba(7,13,31,.55) 78%,rgba(7,13,31,.82) 100%)} /* the poster stays bright; only the foot darkens under the title */ .reel-glow{position:absolute;inset:-20%;pointer-events:none;opacity:0;transition:opacity .6s var(--ease); background:radial-gradient(60% 60% at 50% 40%,rgba(2,116,222,.16),transparent 70%)} .reel:hover .reel-glow,.reel:focus-visible .reel-glow{opacity:1} .reel-tag{position:absolute;left:16px;top:14px;font-size:10.5px;font-weight:600;letter-spacing:.16em;color:#fff; padding:5px 10px;border-radius:var(--r-pill);background:rgba(8,14,32,.66);border:1px solid rgba(170,200,255,.20);backdrop-filter:blur(10px)} /* the play control: optical glass, a white triangle, one warm signal */ .reel-play{position:absolute;left:50%;top:44%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%; display:flex;align-items:center;justify-content:center;color:#fff; background:rgba(10,18,40,.38);border:1px solid rgba(170,205,255,.38);backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 0 0 1px rgba(95,168,255,.10),0 14px 34px -14px rgba(2,20,60,.8); transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)} .reel-play svg{margin-left:3px} .reel-sig{position:absolute;right:5px;top:5px;width:4px;height:4px;border-radius:50%;background:#FF7A32;opacity:.35; transition:opacity .4s var(--ease),box-shadow .4s var(--ease)} .reel:hover .reel-play,.reel:focus-visible .reel-play{background:rgba(12,22,50,.56);border-color:rgba(190,215,255,.60); box-shadow:0 0 0 1px rgba(95,168,255,.22),0 16px 38px -14px rgba(2,20,60,.9)} .reel:hover .reel-sig,.reel:focus-visible .reel-sig{opacity:1;box-shadow:0 0 7px 1.5px rgba(255,140,60,.6)} .reel-meta{position:absolute;left:18px;right:76px;bottom:16px;display:flex;flex-direction:column;gap:3px;pointer-events:none} .reel-meta strong{font-size:17px;font-weight:600;color:#fff;letter-spacing:-.01em;transition:transform .35s var(--ease)} .reel-meta em{font-style:normal;font-size:12.5px;line-height:1.45;color:rgba(232,240,252,.94)} .reel:hover .reel-meta strong,.reel:focus-visible .reel-meta strong{transform:translateY(-2px)} .reel-min{position:absolute;right:14px;bottom:14px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(10,10,10,.5); font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)} .nvp-open .reel{visibility:hidden} /* proof cards: index, metric, title, description, one quiet evidence word */ .stat-card{position:relative;overflow:hidden;border-radius:var(--r-card);padding:24px 24px 20px;color:#fff;display:flex;flex-direction:column;min-height:300px; background:linear-gradient(180deg,rgba(13,20,44,.72),rgba(9,14,32,.80));border:1px solid rgba(150,185,240,.15); transition:transform .4s var(--ease),border-color .4s var(--ease)} .stat-card::before{content:"";position:absolute;inset:-30%;pointer-events:none;opacity:.5;transition:opacity .5s var(--ease),transform .6s var(--ease); background:radial-gradient(55% 45% at var(--sc-x,50%) 0%,var(--sc-tint,rgba(2,116,222,.2)),transparent 72%)} .stat-card.st-doc{--sc-tint:rgba(2,116,222,.22);--sc-x:26%} .stat-card.st-live{--sc-tint:rgba(58,92,240,.18);--sc-x:50%} .stat-card.st-trace{--sc-tint:rgba(190,208,240,.12);--sc-x:70%} .about-grid .stat-card:hover{transform:translateY(-2px);border-color:rgba(180,210,255,.26)} .about-grid .stat-card:hover::before{opacity:.75;transform:translate(0,-4%) scale(1.05)} .st-ix{font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(190,210,240,.48);font-variant-numeric:tabular-nums} .stat-num{font-size:34px;font-weight:600;font-variant-numeric:tabular-nums;position:relative;color:#fff;margin-top:6px} .stat-card h3{font-size:16.5px;font-weight:600;line-height:1.3;margin-top:auto;position:relative;color:#fff} .stat-desc{position:relative;font-size:13px;line-height:1.55;color:rgba(205,220,244,.66);margin-top:7px} .st-ev{position:relative;margin-top:14px;display:inline-flex;align-items:center;gap:7px; font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(180,202,236,.52)} .st-dot{width:4px;height:4px;border-radius:50%;background:#FF7A32;box-shadow:0 0 5px 1px rgba(255,140,60,.45)} @media (prefers-reduced-motion:reduce){.stat-card,.stat-card::before,.reel img,.reel-meta strong{transition:none} .about-grid .stat-card:hover{transform:none}.reel:hover img{transform:none}} /* the closing row, on the reference: quote (600 wide, 24/500 lh33.6 ls-.72), under it the author at 43px with name and role beside it, and the one blue pill at the right foot */ .about-quote{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:60px} .aq-main{display:flex;flex-direction:column;align-items:flex-start;gap:24px;flex:1 1 auto;min-width:0} .aq-text{font-size:24px;font-weight:500;line-height:1.4;letter-spacing:-.03em;max-width:600px;color:#0A0A0A} .aq-who{display:flex;align-items:center;gap:10px} .aq-avatar{width:43px;height:43px;border-radius:50%;object-fit:cover;flex:none} .aq-who div{display:flex;flex-direction:column;gap:1px} .aq-who strong{font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#181818} .aq-who span{font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#4F4F4F} .aq-origin{flex:none} /* why-us ROI side bars with rotated labels */ /* track + fill: After = blue track with a white fill leaving a 25px cap, Before = 60% grey fill */ .ba-tab{position:relative;overflow:hidden} .ba-tab i{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:12px; display:flex;align-items:center;justify-content:center;transition:height 1.1s var(--spring)} .ba-tab-after i{background:#fff} .ba-tab-before i{background:#F0F0F0} .ba-grid.in .ba-tab-after i{height:calc(100% - 25px)} .ba-grid.in .ba-tab-before i{height:60%} .ba-tab em{font-style:normal;font-size:12px;font-weight:500;white-space:nowrap;transform:rotate(-90deg)} .ba-tab-after em{color:var(--blue)} .ba-tab-before em{color:#4f4f4f} /* results chips ticker */ .ba-results{max-width:1000px;margin:60px auto 0} .ba-res-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:22px} .ba-res-lead{font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#0a0a0a;max-width:520px} .ba-res-mark{font-size:14px;font-weight:500;color:#6e6e6e;white-space:nowrap} .ba-res-mark sup{font-size:.7em;top:-.3em} .ba-ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} .ba-track{display:flex;gap:6px;width:max-content;animation:ticker 30s linear infinite} .ba-track span{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:20px;background:#F0F0F0; font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#646464;white-space:nowrap} .ba-track strong{color:#0A0A0A;font-weight:500} /* button ripple hover (signature interaction) */ .btn-blue,.pr-btn,.btn-hero-primary{position:relative;overflow:hidden;isolation:isolate;transition:color .3s ease .1s} .btn-blue::after,.pr-btn::after,.btn-hero-primary::after{content:"";position:absolute;left:28px;top:calc(100% - 6px);z-index:-1; width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .55s cubic-bezier(.3,.7,.3,1)} .btn-blue::after{background:#fff} .pr-btn::after,.btn-hero-primary::after{background:var(--blue)} .btn-blue:hover::after,.pr-btn:hover::after,.btn-hero-primary:hover::after{transform:translate(-50%,-50%) scale(52)} .btn-blue:hover{background:var(--blue);color:var(--blue);transform:none;box-shadow:none} .pr-btn:hover,.btn-hero-primary:hover{color:#fff;transform:none;box-shadow:none} .pr-btn-blue::after{background:#fff} .pr-btn-blue:hover{color:var(--blue)} /* hero split pill: both halves carry the same fill, it grows from wherever the cursor enters (so moving between them reads as one wave washing across), ~480px circle, inverted colours per half. */ .hero-actions .btn-hero-primary,.hero-actions .btn-hero-ghost{ position:relative;overflow:hidden;isolation:isolate; transition:color .3s ease .05s,background .3s var(--ease)} .hero-actions .btn-hero-primary::after,.hero-actions .btn-hero-ghost::after{ content:"";position:absolute;left:var(--hx,50%);top:var(--hy,50%);z-index:-1; width:488px;height:488px;margin:-244px 0 0 -244px;border-radius:50%; transform:scale(0);transition:transform .43s cubic-bezier(.45,.02,.22,1)} .hero-actions .btn-hero-primary::after{background:var(--blue)} .hero-actions .btn-hero-ghost::after{background:#fff} .hero-actions .btn-hero-primary:hover::after,.hero-actions .btn-hero-ghost:hover::after{transform:scale(1)} .hero-actions .btn-hero-primary:hover{color:#fff} .hero-actions .btn-hero-ghost:hover{color:#0a0a0a;background:rgba(255,255,255,.16)} /* hero H1 char rise */ .hero-title .c{display:inline-block;opacity:0;transform:translateY(120px);transition:opacity .8s var(--spring),transform .8s var(--spring)} .hero-title.risen .c{opacity:1;transform:none} .hero-title .word{white-space:nowrap;display:inline-block} @media (max-width:1180px){ /* tablet: a 2x2 composition, the video card keeps its wider presence in row one */ .about-grid{grid-template-columns:1fr 1fr} .stat-card{min-height:250px} } @media (max-width:720px){ /* phone: video full width, then the proof cards as a stacked list */ .about-grid{grid-template-columns:1fr} .reel{min-height:250px} .stat-card{min-height:0;padding:20px 20px 18px} .stat-card h3{margin-top:14px} .about-quote{flex-direction:column;align-items:flex-start;gap:22px} .ba-results{margin-top:28px} } @media (prefers-reduced-motion: reduce){ .ba-track{animation:none} .hero-title .c{opacity:1;transform:none;transition:none} .btn-blue::after,.pr-btn::after,.btn-hero-primary::after{transition:none} .hero-actions .btn-hero-primary::after,.hero-actions .btn-hero-ghost::after{transition:none} .ba-tab i{transition:none} } /* ======================================================================== CONTACT PAGE (light hero + white panel + glass form) ======================================================================== */ .nav-links a.on{background:#0A0A0A;color:#fff;padding:0 18px;margin:0 -4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.18)} .nav-links a.on:hover,.nav.nav-dark .nav-links a.on:hover{background:#151515} .nav.nav-dark .nav-links a.on{background:#0A0A0A;color:#fff} /* dark contact world: the AI flower breathes behind blue optical glass */ .ctc{position:relative;background:var(--dark);padding:150px 0 120px;color:#fff;overflow:clip} .ctc-bg{position:absolute;inset:0;pointer-events:none} /* the AI flower: screen-blended so the wireframe bloom glows out of the black */ .ctc-bg img{position:absolute;right:-14%;top:-10%;width:92%;min-width:900px;opacity:.85; filter:blur(14px) saturate(1.35) brightness(1.1);mix-blend-mode:screen;transform:scale(1.05)} .ctc-bg::before{content:"";position:absolute;left:-20%;bottom:-30%;width:78%;aspect-ratio:16/9;opacity:.55; background:url("../assets/hero-flower.jpg") center/cover no-repeat; filter:blur(30px) saturate(1.3) brightness(1.05);mix-blend-mode:screen;transform:scale(1.2) rotate(10deg)} .ctc-bg i{position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,8,12,.30) 0%,rgba(6,8,12,.44) 58%,var(--dark) 100%)} .ctc .wrap{position:relative} .ctc-title{font-size:clamp(52px,7.4vw,106px);font-weight:600;line-height:1.05;letter-spacing:-.04em;color:#fff} .ctc-title .blue{color:#5FA8FF} .ctc-sub{margin-top:26px;color:rgba(255,255,255,.62)} /* wraps instead of being pushed past the wrap: four intrinsic columns plus three 60px gaps stop fitting below ~735px */ .ctc-info{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px 60px;margin:64px 0 28px} .ctc-info-col p{font-size:15px;color:rgba(255,255,255,.68)} .ctc-info-label{font-size:13.5px;color:rgba(255,255,255,.42);margin-bottom:4px} .ctc-mail{font-size:20px;font-weight:600;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.32);padding-bottom:2px;transition:border-color .25s var(--ease),color .25s var(--ease)} .ctc-mail:hover{color:#8FC0FF;border-color:#8FC0FF} .ctc-info-right{margin-left:auto} .ctc-studio{font-size:14px;font-weight:600;color:rgba(255,255,255,.62);transition:color .2s var(--ease)} .ctc-studio:hover{color:#8FC0FF} .ctc-panels{display:grid;grid-template-columns:1fr 598px;gap:24px;align-items:stretch} /* contact hero: a human hand and a robotic hand almost touching. Poster paints first (no CLS: aspect-ratio on the frame + width/height on the img), a silent loop fades in over it later; reduced-motion and Save-Data never load the video. */ .ctc-hero{position:relative;margin:56px 0 0;border-radius:32px;overflow:hidden;isolation:isolate;aspect-ratio:2400/1018;background:#050b1c; box-shadow:0 40px 90px -36px rgba(0,0,0,.75),0 0 0 1px rgba(150,190,255,.10)} .ctc-hero-media{position:absolute;inset:0} .ctc-hero-media img,.ctc-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 46%;display:block} .ctc-hero-media video{opacity:0;transition:opacity 1.4s ease} .ctc-hero-media video.live{opacity:1} .ctc-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.5px;z-index:2; background:linear-gradient(200deg,rgba(150,195,255,.55),rgba(150,195,255,0) 28%,rgba(110,77,255,0) 72%,rgba(110,77,255,.45)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .ctc-hero-veil{position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(180deg,rgba(5,11,28,.22),rgba(5,11,28,0) 26%),linear-gradient(0deg,rgba(5,11,28,.62),rgba(5,11,28,0) 36%)} .ctc-hero-cap{position:absolute;left:26px;bottom:24px;z-index:2;display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px 0 12px;border-radius:999px; font-size:12.5px;font-weight:500;letter-spacing:.01em;color:rgba(235,241,255,.88);background:rgba(13,20,56,.55); box-shadow:inset 0 0 0 1px rgba(160,190,255,.22);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)} .ctc-hero-dot{width:7px;height:7px;border-radius:50%;background:#8CC0FF;box-shadow:0 0 10px 2px rgba(120,150,255,.55)} .ctc-hero+.ctc-info{margin-top:40px} @media (max-width:900px){.ctc-hero{aspect-ratio:16/10;border-radius:26px;margin-top:44px}} @media (max-width:640px){.ctc-hero{aspect-ratio:4/3;border-radius:22px;margin-top:34px}.ctc-hero-cap{left:14px;bottom:14px;height:30px;font-size:12px} /* the info row used to overflow the viewport here; it now wraps so the hero hands off cleanly to the form */ .ctc-info{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;align-items:start;margin:36px 0 24px}.ctc-info-col:first-child{grid-column:1/-1}.ctc-info-right{margin-left:0}} @media (prefers-reduced-motion:reduce){.ctc-hero-media video{display:none}.ctc-hero-dot{box-shadow:none}} .ctc-left,.ctc-form{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-card); background:linear-gradient(168deg,rgba(10,20,38,.62) 0%,rgba(6,12,24,.74) 100%); border:1px solid rgba(150,190,255,.14); -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25); box-shadow:inset 0 1px 0 rgba(190,220,255,.10),inset 0 26px 50px -34px rgba(160,200,255,.16)} .ctc-left::before,.ctc-form::before{content:"";position:absolute;inset:-30%;z-index:-1;opacity:.5;pointer-events:none; background:radial-gradient(44% 38% at var(--cf-x,30%) 84%,rgba(2,116,222,.24),transparent 72%)} .ctc-form{--cf-x:70%} .ctc-left{padding:56px;display:flex;flex-direction:column;align-items:flex-start} .ctc-left h2{font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1.3;max-width:460px;color:#fff} .ctc-left-quote{font-size:19px;line-height:1.45;color:rgba(255,255,255,.66);margin-top:40px;max-width:420px} .ctc-person{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:48px} .ctc-person img{width:44px;height:44px;border-radius:50%;object-fit:cover} .ctc-person strong{display:block;font-size:15px;color:#fff} .ctc-person span{font-size:13px;color:rgba(255,255,255,.5)} .ctc-left .btn-blue{margin-top:26px} .ctc-form{padding:32px;display:flex;flex-direction:column;gap:20px;color-scheme:dark} .cf-field{display:flex;flex-direction:column;gap:9px} .cf-field label,.cf-radios legend{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.88)} .cf-field input,.cf-field select,.cf-field textarea{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);border-radius:20px; padding:15px 20px;font-family:inherit;font-size:15px;color:#fff;outline:none;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);width:100%;resize:vertical} .cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(255,255,255,.38)} .cf-field select:invalid,.cf-field select option[value=""]{color:rgba(255,255,255,.38)} .cf-field select option{color:#181818;background:#fff} .cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:#5FA8FF;background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(95,168,255,.22)} .cf-radios{border:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px} .cf-radios legend{margin-bottom:10px} .cf-pill{position:relative;cursor:pointer} .cf-pill input{position:absolute;opacity:0;pointer-events:none} .cf-pill span{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--r-pill); background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:13.5px;color:rgba(255,255,255,.66);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)} .cf-pill span::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);transition:background .25s var(--ease)} .cf-pill input:checked + span{background:rgba(190,215,255,.16);color:#fff;border-color:rgba(150,190,255,.4)} .cf-pill input:checked + span::before{background:#5FA8FF} .cf-pill input:focus-visible + span{box-shadow:0 0 0 3px rgba(95,168,255,.35)} .cf-submit{position:relative;overflow:hidden;isolation:isolate;align-self:stretch;height:56px;border-radius:var(--r-pill); background:#fff;color:#0A0A0A;font-size:16px;font-weight:700;transition:color .3s ease .1s} .cf-submit:hover{color:#fff} .cf-submit::after{content:"";position:absolute;left:28px;top:calc(100% - 6px);z-index:-1;width:12px;height:12px;border-radius:50%; background:var(--blue);transform:translate(-50%,-50%) scale(0);transition:transform .55s cubic-bezier(.3,.7,.3,1)} .cf-submit:hover::after{transform:translate(-50%,-50%) scale(60)} .cf-err{font-size:14px;color:#FF8A6B} .cf-note{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.42)} /* page transition: old page lifts away, new page staggers in (SPA-feel) */ /* ---- page transition: the PUSH (home -> contact) ---- Old page slides up out of the viewport while the NEXT page slides in directly beneath it, contiguous, nav travelling with each page; one ease-out curve (boundary 35% at 120ms, 67% at 240ms, 87% at 360ms, settled ~950ms). main.js prefetches the destination into a fixed iframe (on hover/touch), so on click both halves move together like one long page; when the slide has settled the browser navigates and the real document takes over in the identical resting state (html.pt-arrived skips its entrance animations). */ html.pt-lock{overflow:hidden} body.pt-out{position:fixed;inset:0;height:100vh;overflow:hidden;transition:transform .9s cubic-bezier(.2,.9,.3,1);pointer-events:none} body.pt-out.go{transform:translateY(-100vh)} .pt-next{position:fixed;inset:0;width:100vw;height:100vh;border:0;margin:0;background:var(--bg);z-index:2000;transform:translateY(100vh);pointer-events:none; transition:transform .9s cubic-bezier(.2,.9,.3,1)} .pt-next.go{transform:translateY(0)} /* CASES ARRIVE THE OTHER WAY ROUND. On noveq.framer.website a case does not push the old page up: the destination eases DOWN into its own field. Sampled off the live site frame by frame, that settle is an exponential decay with a time constant near 100ms (per-frame lerp about 0.15), visually at rest after roughly 700ms. cubic-bezier(.16,1,.3,1) over 720ms is the closest CSS equivalent; the direction is set when the preview frame is created, never mid-flight, so nothing ever slides through the viewport on a class change. */ body.pt-out.pt-pull{transition:transform .72s cubic-bezier(.16,1,.3,1)} body.pt-out.pt-pull.go{transform:translateY(100vh)} .pt-next.pt-pull{transform:translateY(-100vh);transition:transform .72s cubic-bezier(.16,1,.3,1)} .pt-next.pt-pull.go{transform:translateY(0)} /* arriving after a push: land in the resting state the preview already reached */ html.pt-arrived [data-nv-reveal],html.pt-arrived [data-nv-reveal] *,html.pt-arrived .hero-title .c, html.pt-frame [data-nv-reveal],html.pt-frame [data-nv-reveal] *,html.pt-frame .hero-title .c{transition:none!important} /* the shared layers, on arrival AND inside the warmed preview, so both show the same resting picture at the swap */ html.pt-arrived .wfn-in,html.pt-arrived .wfn-bar,html.pt-arrived .wfn-links,html.pt-arrived .wfn-right,html.pt-arrived .wfn-open,html.pt-arrived .wfn-links-pos,html.pt-arrived .wfc-eyebrow,html.pt-arrived .wfc-h1 *,html.pt-arrived .wfc-lead,html.pt-arrived .wfc-card,html.pt-arrived .wfc-card *, html.pt-arrived .wfj-w>span,html.pt-arrived .wfj-cell,html.pt-arrived .wfj-cell *,html.pt-arrived .wfj-txt, html.pt-arrived .wfk-film,html.pt-arrived .wfk-h1 .l>span,html.pt-arrived .wfk-lead,html.pt-arrived .wfk-card,html.pt-arrived .wfk-links,html.pt-arrived .wfk-trust,html.pt-arrived .cg,html.pt-arrived .cc,html.pt-arrived .cc *, html.pt-frame .wfn-in,html.pt-frame .wfn-bar,html.pt-frame .wfn-links,html.pt-frame .wfn-right,html.pt-frame .wfn-open,html.pt-frame .wfn-links-pos,html.pt-frame .wfc-eyebrow,html.pt-frame .wfc-h1 *,html.pt-frame .wfc-lead,html.pt-frame .wfc-card,html.pt-frame .wfc-card *, html.pt-frame .wfj-w>span,html.pt-frame .wfj-cell,html.pt-frame .wfj-cell *,html.pt-frame .wfj-txt, html.pt-frame .wfk-film,html.pt-frame .wfk-h1 .l>span,html.pt-frame .wfk-lead,html.pt-frame .wfk-card,html.pt-frame .wfk-links,html.pt-frame .wfk-trust,html.pt-frame .cg,html.pt-frame .cc,html.pt-frame .cc *{transition:none!important;animation:none!important} /* the first paint of the arriving document happens before main.js and the wf-* scripts run, and every entrance starts hidden (opacity 0, a translate, a masked word): for one or two frames the visitor saw the page ground with the header and nothing else, right where the preview had shown the finished page. While html.pt-arrived is set (the inline head script, before any paint; removed 250ms after the scripts have marked what is in view) every entrance is painted at rest. */ html.pt-arrived [data-nv-reveal],html.pt-arrived .hero-title .c,html.pt-arrived .wfn-in,html.pt-arrived .wfn-toggle, html.pt-arrived .wfj-w>span,html.pt-arrived .wfj-txt,html.pt-arrived .wfc-eyebrow,html.pt-arrived .wfc-lead,html.pt-arrived .wfc-card, html.pt-arrived .wfk-film,html.pt-arrived .wfk-h1 .l>span,html.pt-arrived .wfk-lead,html.pt-arrived .wfk-links,html.pt-arrived .wfk-trust,html.pt-arrived .wfk-card, html.pt-arrived .wfj-cta h2 .w>span,html.pt-arrived .wff-reveal{opacity:1!important;transform:none!important;filter:none!important} html.pt-arrived{scroll-behavior:auto} @media (prefers-reduced-motion:reduce){body.pt-out{transition:none;transform:none}.pt-next{display:none}} /* ======================================================================== CASE STUDIES PAGE (light overview: logo strip, filter bar, white cards) ======================================================================== */ .csp{background:var(--bg);padding:150px 0 120px} .csp-title{font-size:clamp(48px,7.4vw,106px);font-weight:600;line-height:1.05;letter-spacing:-.04em;color:#0a0a0a} .csp-logos{overflow:hidden;margin:72px 0 52px;opacity:.35; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .csp-logo-track{display:flex;align-items:center;gap:110px;width:max-content;animation:ticker 40s linear infinite} .csp-logo-track img{height:26px;filter:brightness(0);opacity:.8} .csp-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px} .csp-tabs{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .csp-tab{font-size:14.5px;font-weight:600;color:#4f4f4f;padding:10px 4px;border-radius:var(--r-pill);transition:color .25s var(--ease),background .25s var(--ease),padding .25s var(--ease)} .csp-tab:hover{color:#000} .csp-tab.on{background:#0A0A0A;color:#fff;padding:10px 18px} .csp-search{display:flex;align-items:center;gap:9px;background:#fff;border-radius:var(--r-pill);padding:11px 18px;color:#a6a6a6;flex:0 0 200px} .csp-search input{border:0;outline:none;background:none;font-family:inherit;font-size:14px;color:#181818;width:100%} .csp-search input::placeholder{color:#a6a6a6} .csp-search:focus-within{box-shadow:0 0 0 3px rgba(2,116,222,.16)} .csp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} /* same rule for the case-studies index while one case is published */ .csl-card:only-child{grid-column:1/-1;min-height:0} .csl-card:only-child .csl-desc{padding-top:30px} .csl-card{background:#fff;border-radius:var(--r-card);padding:26px;display:flex;flex-direction:column;min-height:440px; transition:opacity .35s var(--ease),transform .35s var(--ease)} .csl-card.hide{display:none} .csl-top{display:flex;justify-content:space-between;gap:24px} .csl-top>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0} .csl-logo{height:22px;margin-bottom:26px} .csl-card h3{font-size:32px;font-weight:600;letter-spacing:-.02em;color:#0a0a0a} .csl-tag{font-size:15px;color:#6e6e6e;margin-top:6px} .csl-year{font-size:14px;color:#a6a6a6;margin-top:8px} .csl-top figure{flex:0 0 215px;border-radius:12px;overflow:hidden;height:160px;background:#0a0a0a} .csl-top figure img,.csl-top figure video{width:100%;height:100%;object-fit:cover} .csl-desc{font-size:19px;line-height:1.45;color:#4f4f4f;margin-top:auto;padding-top:44px;max-width:560px} .csl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .csl-chips span{padding:7px 13px;border-radius:var(--r-pill);background:#F0F0F0;font-size:13px;color:#6e6e6e} .csl-chips strong{color:#0a0a0a;font-weight:700;margin-right:4px} .csp-empty{margin-top:36px;font-size:16px;color:#6e6e6e} /* ---- /journal index: the blog page grid ---- 3 columns of portrait image cards (449x487 @1440 = ratio .922), 6px gaps, r20, meta 14px + title 24px over the image; 2 columns under 1200, 1 column under 900 (original: 2 @1024, 1 @768). */ .blg .csp-title{margin-top:8px} .blg-intro{max-width:600px} .blg-bar{margin:44px 0 26px} .blg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .blg-card.blog-card{aspect-ratio:449/487;border-radius:20px} .blg-card .blog-meta{left:20px;right:20px;bottom:21px} .blg-card .blog-meta p{font-size:14px;font-weight:500;color:#e3e3e3;margin-bottom:10px} .blg-card .blog-meta h3{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.3} .blg-card.hide{display:none} @media (hover:hover) and (pointer:fine){ .blg-card.blog-card:hover img,.blg-card.blog-card:hover video{transform:scale(1.15)} } @media (max-width:1200px){.blg-grid{grid-template-columns:1fr 1fr}} @media (max-width:900px){ .blg-grid{grid-template-columns:1fr} .blg-bar{flex-direction:column;align-items:flex-start;gap:14px} .blg-bar .csp-search{flex:0 0 auto;width:180px} .blg-card .blog-meta h3{font-size:20px} } @media (max-width:1180px){ .csp-grid{grid-template-columns:1fr} .csp-bar{flex-direction:column;align-items:flex-start} .csp-search{flex:0 0 auto;width:100%} } @media (max-width:720px){ .csp{padding:130px 0 80px} .csp-title{font-size:40px} .csl-top{flex-direction:column} .csl-top figure{flex:none;width:100%;height:200px} .csl-desc{padding-top:26px} .csl-card{min-height:0} .csp-logos{margin:44px 0 36px} } @media (prefers-reduced-motion: reduce){ .csp-logo-track{animation:none} } /* ======================================================================== SCROLL SIGNAL (custom scroll-position indicator; native scrollbar hidden) A dormant fiber on the right edge; energy enters it while you scroll. Element is created by js/main.js, energy is driven via --ss-e (0..1). ======================================================================== */ html{scrollbar-width:none} html::-webkit-scrollbar{display:none;width:0;height:0} .scroll-signal{position:fixed;top:16px;bottom:16px;right:8px;width:1px;z-index:80;pointer-events:none;--ss-e:0} .ss-rail{position:absolute;inset:0;width:1px; background:linear-gradient(180deg,transparent,rgba(110,160,255,.13) 7%,rgba(110,160,255,.13) 93%,transparent)} .ss-node{position:absolute;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:rgba(150,190,255,.22);transition:background .5s ease,box-shadow .5s ease} .ss-top{top:-1px} .ss-bot{bottom:-1px} .scroll-signal.at-top .ss-top,.scroll-signal.at-bot .ss-bot{background:rgba(190,218,255,.6);box-shadow:0 0 5px rgba(110,165,255,.5)} .ss-seg{position:absolute;left:0;top:0;width:1px;height:36px;will-change:transform; background:linear-gradient(180deg,transparent,#6FA8FF 32%,#EAF3FF 50%,#6FA8FF 68%,transparent); opacity:calc(.22 + var(--ss-e)*.78)} .ss-halo{position:absolute;left:-3px;right:-3px;top:-8px;bottom:-8px;border-radius:4px;filter:blur(3px); background:linear-gradient(180deg,transparent,rgba(96,150,255,.85) 50%,transparent); opacity:calc(var(--ss-e)*.55)} .ss-dot{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%; background:#EAF4FF;box-shadow:0 0 5px 1px rgba(140,190,255,.85); opacity:calc(.3 + var(--ss-e)*.7)} /* light sections: same blue identity, a touch more pigment for contrast */ .scroll-signal.light .ss-rail{background:linear-gradient(180deg,transparent,rgba(2,116,222,.2) 7%,rgba(2,116,222,.2) 93%,transparent)} .scroll-signal.light .ss-seg{background:linear-gradient(180deg,transparent,#0274DE 32%,#5EA8F5 50%,#0274DE 68%,transparent)} .scroll-signal.light .ss-dot{background:#2f8ae6;box-shadow:0 0 4px rgba(2,116,222,.6)} .scroll-signal.light .ss-halo{background:linear-gradient(180deg,transparent,rgba(2,116,222,.5) 50%,transparent)} .scroll-signal.light .ss-node{background:rgba(2,116,222,.3)} @media (max-width:720px){ .scroll-signal{display:none} } @media (prefers-reduced-motion: reduce){ .ss-halo{display:none} .ss-seg,.ss-dot{opacity:.5} } /* ======================================================================== CASE STUDY DETAIL (project header, problem/solution/results, gallery) ======================================================================== */ a.csl-card,a.cg-card{color:inherit} a.csl-card:hover{transform:translateY(-6px)} a.csl-card:focus-visible,a.cg-card:focus-visible{outline:3px solid rgba(2,116,222,.5);outline-offset:3px} a.cg-card{transition:transform .35s var(--ease)} a.cg-card:hover{transform:translateY(-6px)} .cf-link{display:inline-block;margin-top:20px;font-size:15px;font-weight:600;color:#fff;opacity:.85;transition:opacity .25s var(--ease)} .cf-link:hover{opacity:1;color:var(--blue)} .csd{background:var(--bg);padding:150px 0 0} .csd-title{font-size:clamp(48px,7.4vw,106px);font-weight:600;line-height:1.02;letter-spacing:-.04em;color:#0a0a0a;margin-top:6px} .csd-lead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:26px} .csd-lead p{font-size:21px;line-height:1.5;color:#4f4f4f;max-width:480px} .csd-lead img{height:26px;flex:none;filter:brightness(0);opacity:.85} .csd-meta{display:flex;align-items:flex-start;gap:24px;margin:46px 0 0;padding-top:26px;border-top:1px solid rgba(10,10,10,.12)} .csd-meta>div{flex:1;min-width:0} .csd-meta dt{font-size:14.5px;color:#6e6e6e;margin-bottom:8px} .csd-meta dd{font-size:16px;color:#181818} .csd-back{white-space:nowrap;font-size:15px;font-weight:600;color:#0a0a0a;align-self:center;transition:color .25s var(--ease)} .csd-back:hover{color:var(--blue)} .csd-hero{margin-top:30px;border-radius:var(--r-card);overflow:hidden;background:#0a0a0a;aspect-ratio:1360/800} .csd-hero img,.csd-hero video{width:100%;height:100%;object-fit:cover;display:block} .csd-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px} .csd-kpi{background:#fff;border-radius:var(--r-card);padding:30px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:26px} .csd-kpi strong{font-size:44px;font-weight:600;letter-spacing:-.02em;color:#0a0a0a} .csd-kpi>span{font-size:16px;color:#4f4f4f} .csd-note{margin-top:22px;font-size:14px;color:#a6a6a6;max-width:640px} .csd-block{padding-top:110px} .csd-h{font-size:clamp(34px,4.2vw,60px);font-weight:600;line-height:1.12;letter-spacing:-.03em;color:#0a0a0a;max-width:980px;margin-top:16px} .csd-bullets{margin-top:32px;padding-left:22px;display:flex;flex-direction:column;gap:9px} .csd-bullets li{font-size:17px;color:#4f4f4f;line-height:1.5;list-style:disc} .csd-par{font-size:17px;line-height:1.6;color:#4f4f4f;max-width:620px;margin-top:26px} .csd-full{margin-top:70px;border-radius:var(--r-card);overflow:hidden;background:#0a0a0a} .csd-full img{width:100%;display:block;aspect-ratio:1360/740;object-fit:cover} .csd-gal{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:70px} .csd-gal-col{display:flex;flex-direction:column;gap:16px;min-width:0} .csd-gal img{width:100%;display:block;border-radius:var(--r-card);object-fit:cover} .csd-gal .g-tall{aspect-ratio:676/880} .csd-gal .g-mid{aspect-ratio:676/560} .csd-gal .g-short{aspect-ratio:676/440} .csd-quote{background:#fff;border-radius:var(--r-card);padding:56px;margin-top:110px} .csd-quote blockquote{font-size:clamp(24px,2.5vw,32px);font-weight:500;line-height:1.3;letter-spacing:-.015em;color:#0a0a0a;max-width:900px;margin-top:18px} .csd-person{display:flex;align-items:center;gap:14px;margin-top:36px} .csd-person i{width:46px;height:46px;border-radius:50%;background:#0A0A0A;color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:600;font-size:15px;flex:none} .csd-person strong{display:block;font-size:16px;color:#0a0a0a} .csd-person span{font-size:14.5px;color:#6e6e6e} .csd-cta{margin-top:56px;text-align:center} .csd-more{padding:120px 0 130px} .csd-more-head{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:40px} .csd-more-head .h2{max-width:none} .csd-all{white-space:nowrap;font-size:15px;font-weight:600;color:#0a0a0a;transition:color .25s var(--ease)} .csd-all:hover{color:var(--blue)} /* Journal articles reuse the .csd page frame exactly (title, lead, meta, hero, par, bullets, cta, more). A long read has many more sections than a case study, so only the section-heading step is article-scale here: same family, weight, colour and tracking, one size down the same scale. */ .csd-article .csd-block{padding-top:54px} .csd-article .csd-h{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em} .csd-article .csd-sub{font-size:19px;font-weight:600;color:#0a0a0a;margin-top:30px} .csd-article .csd-par{margin-top:18px} .csd-article .csd-hero{aspect-ratio:16/9} @media (max-width:1180px){ .csd-kpis{grid-template-columns:1fr} .csd-kpi{min-height:0} .csd-meta{flex-wrap:wrap} .csd-meta>div{flex:1 1 40%} } @media (max-width:720px){ .csd{padding:130px 0 0} .csd-title{font-size:44px} .csd-lead{flex-direction:column;align-items:flex-start;gap:20px} .csd-block{padding-top:80px} .csd-gal{grid-template-columns:1fr} .csd-quote{padding:32px} .csd-more{padding:90px 0 100px} .csd-more-head{flex-direction:column;align-items:flex-start;gap:14px} .csd-hero{aspect-ratio:4/3} } /* ============ NV VIDEO PLAYER (How We Work) ============ */ .nvp-backdrop{position:fixed;inset:0;z-index:200;background:rgba(6,8,12,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;transition:opacity .45s var(--ease)} .nvp-backdrop.on{opacity:1} .nvp-stage{position:fixed;inset:0;z-index:201;pointer-events:none} .nvp-frame{position:fixed;overflow:hidden;border-radius:var(--r-card);background:#0a0a0a;pointer-events:auto; box-shadow:0 30px 90px -20px rgba(0,0,0,.65),0 6px 24px rgba(0,0,0,.35); transition:top .55s cubic-bezier(.32,.72,.28,1),left .55s cubic-bezier(.32,.72,.28,1),width .55s cubic-bezier(.32,.72,.28,1),height .55s cubic-bezier(.32,.72,.28,1),border-radius .55s cubic-bezier(.32,.72,.28,1),opacity .3s var(--ease)} .nvp-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0a0a0a;display:block} .nvp-frame.is-expanded video{object-fit:contain} .nvp-close{position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2); background:rgba(14,16,22,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0;transition:background .3s var(--ease),border-color .3s var(--ease),opacity .35s var(--ease)} .nvp-close:hover,.nvp-close:focus-visible{background:rgba(30,34,44,.75);border-color:rgba(255,255,255,.38)} .nvp-close svg{width:15px;height:15px;display:block} .nvp-controls{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;display:flex;align-items:center;gap:10px; padding:10px 14px;border-radius:14px;background:rgba(12,14,20,.55);border:1px solid rgba(255,255,255,.12); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:translateY(6px); transition:opacity .35s var(--ease),transform .35s var(--ease)} .nvp-frame.ui-on .nvp-controls{opacity:1;transform:none} .nvp-frame.ui-on .nvp-close{opacity:1} .nvp-frame.ui-off .nvp-close{opacity:0;pointer-events:none} .nvp-btn{appearance:none;border:0;background:none;color:#fff;width:34px;height:34px;min-width:34px;border-radius:9px;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0;transition:background .25s var(--ease)} .nvp-btn:hover,.nvp-btn:focus-visible{background:rgba(255,255,255,.12)} .nvp-btn svg{width:16px;height:16px;display:block;fill:currentColor} .nvp-time{font-size:12px;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;white-space:nowrap} .nvp-track{position:relative;flex:1;height:26px;display:flex;align-items:center;cursor:pointer} .nvp-track::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;background:rgba(255,255,255,.22)} .nvp-fill{position:absolute;left:0;height:3px;border-radius:2px;background:#0274DE;width:0%;pointer-events:none} .nvp-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(2,116,222,.35); transform:translateX(-50%);pointer-events:none;left:0%} .nvp-lock,.nvp-lock body{overflow:hidden!important;height:100%} @media (max-width:720px){ .nvp-controls{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));gap:6px;padding:8px 10px} .nvp-btn{width:44px;height:44px;min-width:40px} .nvp-close{top:calc(10px + env(safe-area-inset-top,0px));right:12px;width:44px;height:44px} .nvp-time{display:none} } @media (prefers-reduced-motion:reduce){ .nvp-frame{transition:opacity .25s ease} .nvp-backdrop{transition:opacity .2s ease} } /* nav breakpoints (kept last so they win over the generic 720px block above) */ @media (max-width:900px){ .nav-links{display:none} .nav-cap{margin-left:14px} } @media (max-width:430px){ .nav-logo{font-size:15px} .nav-ailab{letter-spacing:.16em;padding:0 6px 0 9px} .nav-ailab svg text{letter-spacing:.16em} .nav-cap{margin-left:10px} .nav{padding-left:12px;padding-right:12px} .lang-cap{padding:0 9px;margin-right:6px} .nav.is-glass .lang-cap{margin-right:6px} .nav-cta{padding:0 12px;font-size:13.5px} } /* ---------- Navigation in the AI Concierge's optical glass (same tokens as /concierge/concierge.css, mode ai) ---------- Two capsules, always present: identity (left) and links + language + CTA (right). Deep midnight glass with an electric-blue rim and a violet refraction at the opposite corner over dark sections; over light sections (.nav-dark) the same glass turns luminous white with the azure rim, exactly like World 1. Type = Inter, like the concierge. */ .nav{--nv-glass:rgba(13,20,56,.58);--nv-ink:#F7F9FF;--nv-hair:rgba(190,208,255,.16);--nv-blur:blur(30px) saturate(1.4); --nv-rim:0 0 0 1px rgba(130,170,255,.42),0 0 0 2px rgba(110,77,255,.16),0 0 30px rgba(36,107,255,.28),0 18px 44px rgba(2,6,24,.5),inset 0 1px 0 rgba(170,205,255,.42),inset 0 0 0 1px rgba(255,255,255,.07); --nv-spec:radial-gradient(60% 60% at 0% 0%,rgba(70,140,255,.30),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.14),rgba(150,190,255,0) 40%),radial-gradient(60% 60% at 100% 100%,rgba(110,77,255,.24),transparent 62%); --nv-hover:rgba(95,168,255,.16)} .nav.nav-dark{--nv-glass:rgba(238,246,255,.5);--nv-ink:#0F172A;--nv-hair:rgba(15,23,42,.08);--nv-blur:blur(30px) saturate(1.45) brightness(1.12); --nv-rim:0 0 0 1px rgba(255,255,255,.85),0 0 0 2px rgba(150,200,255,.28),0 0 30px rgba(120,185,255,.32),0 18px 44px rgba(6,26,54,.16),inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.35); --nv-spec:linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.1) 30%,rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%); --nv-hover:rgba(42,143,255,.1)} /* identity capsule */ .nav-logo{height:56px;padding:0 22px 0 20px;border-radius:999px;background:var(--nv-glass);box-shadow:var(--nv-rim);-webkit-backdrop-filter:var(--nv-blur);backdrop-filter:var(--nv-blur);transition:background .35s var(--ease),box-shadow .35s var(--ease)} .nav-logo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--nv-spec);z-index:-1} .nav-logo{isolation:isolate} /* cluster capsule: the runtime wrapper (.nav-cap) is glass from the first pixel, not only after scrolling */ .nav-cap{margin-right:0;padding:6px 6px 6px 8px} .nav-cap::before{opacity:1;transform:none;background:var(--nv-glass);border:0;box-shadow:var(--nv-rim);-webkit-backdrop-filter:var(--nv-blur);backdrop-filter:var(--nv-blur);transition:background .35s var(--ease),box-shadow .35s var(--ease)} .nav-cap::after{display:none} .nav-cap .nav-cap-sheen{display:none} .nav.is-glass{transform:none} .nav.is-glass .nav-cap{margin-right:0} .nav.is-glass .nav-links{gap:2px;margin-right:12px} .nav-links{gap:2px;margin-right:12px;font-family:Inter,"Plus Jakarta Sans",sans-serif;font-size:15px;font-weight:500;letter-spacing:-.02em;color:var(--nv-ink)} .nav-links a{height:44px;padding:0 16px;color:var(--nv-ink)} .nav-links a:hover,.nav.nav-dark .nav-links a:hover{background:var(--nv-hover)} .nav-links::after{content:"";width:1px;height:22px;margin:0 6px 0 8px;background:var(--nv-hair)} .lang-cap{margin-right:10px;height:32px;background:rgba(255,255,255,.07);border-color:rgba(160,190,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} .nav.nav-dark .lang-cap{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85);color:#0F172A;box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(15,23,42,.06)} .nav.is-glass .lang-cap{margin-right:10px} /* CTA: the concierge's electric-blue capsule, white type */ .nav-cta{height:44px;padding:0 20px 0 22px;font-family:Inter,"Plus Jakarta Sans",sans-serif;font-weight:500;letter-spacing:-.02em;border:0;background:linear-gradient(135deg,#3B86FF,#246BFF);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(36,107,255,.32),0 0 0 1px rgba(160,195,255,.25)} .nav-cta-arrow svg{stroke:#fff} .nav-cta::before{inset:-1px} @media (hover:hover) and (pointer:fine){ .nav-cta:hover{transform:translateY(-1px);background:linear-gradient(135deg,#4A93FF,#2C74FF);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px rgba(36,107,255,.4),0 0 0 1px rgba(160,195,255,.4)} .nav-logo:hover{box-shadow:var(--nv-rim),0 0 40px rgba(36,107,255,.25)} } @media (max-width:1048px){ .nav-logo{height:44px;padding:0 14px 0 14px} .nav-cap{padding:4px 4px 4px 4px} .nav-links::after{display:none} .lang-cap{margin-right:6px} .nav-cta{height:36px;padding:0 14px} } /* ============================ FOOTER v2: one midnight glass card (the AI Concierge material) ============================ */ .ft.ft-glass{background:linear-gradient(180deg,#070B1B 0%,#0A1024 100%);color:#F7F9FF;padding:120px 0 40px;overflow:visible} .ft.ft-glass .wrap{max-width:1600px} .ft2{--f-hair:rgba(190,208,255,.14);--f-mute:rgba(214,224,255,.62);--f-blue:#5FA8FF;--f-vio:#8B7CFF;position:relative;isolation:isolate;display:grid;grid-template-columns:44fr 56fr;grid-template-rows:auto auto auto auto;border-radius:28px;background:rgba(13,20,56,.58); box-shadow:0 0 0 1px rgba(130,170,255,.42),0 0 0 2px rgba(110,77,255,.14),0 0 60px rgba(36,107,255,.22),0 40px 100px rgba(2,6,24,.6),inset 0 1px 0 rgba(170,205,255,.42),inset 0 0 0 1px rgba(255,255,255,.06); -webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4);overflow:hidden} .ft2::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(55% 45% at 0% 0%,rgba(70,140,255,.32),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.12),rgba(150,190,255,0) 24%),radial-gradient(60% 50% at 100% 100%,rgba(255,150,80,.16),transparent 62%),radial-gradient(45% 40% at 100% 0%,rgba(110,77,255,.18),transparent 62%)} .ft2::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;background:linear-gradient(200deg,rgba(150,195,255,.85),rgba(150,195,255,0) 28%,rgba(255,150,80,0) 70%,rgba(255,150,80,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9} .ft2>*{position:relative;padding:60px 64px} .ft2-news{grid-column:1;grid-row:1;border-right:1px solid var(--f-hair);border-bottom:1px solid var(--f-hair)} .ft2-state{grid-column:2;grid-row:1;border-bottom:1px solid var(--f-hair)} .ft2-social{grid-column:1;grid-row:2;border-right:1px solid var(--f-hair);border-bottom:1px solid var(--f-hair);padding-top:44px;padding-bottom:44px} .ft2-nav{grid-column:2;grid-row:2/4;padding-top:44px} .ft2-legal{grid-column:1;grid-row:3;border-right:1px solid var(--f-hair);padding-top:36px;padding-bottom:40px} .ft2-bar{grid-column:1/3;grid-row:4;display:flex;align-items:center;gap:0;padding:0;border-top:1px solid var(--f-hair)} .ft2 .nav-logo{--ink:#A8CBFF;height:auto;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:19px} .ft2 .nav-logo::after{display:none} .ft2-h{margin-top:56px;font-size:34px;font-weight:400;line-height:1.15;letter-spacing:-.03em;color:#F7F9FF} .ft2-sub{margin-top:18px;font-size:19px;line-height:1.5;color:var(--f-mute);letter-spacing:-.01em} .ft2-form{margin-top:30px;display:flex;align-items:center;height:56px;padding:0 5px 0 0;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(160,190,255,.26),inset 0 1px 0 rgba(255,255,255,.12);max-width:480px} .ft2-form input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0 26px;font:inherit;font-size:16px;color:#F7F9FF;outline:none} .ft2-form input::placeholder{color:var(--f-mute)} /* Live region under the subscribe field. Empty until submit, so it takes no space. */ .ft2-note{margin-top:12px;font-size:13px;line-height:1.5;letter-spacing:-.015em;color:#B9CCF5} .ft2-note:empty{display:none} .ft2-note.bad{color:#FF9C86} .ft2-form button{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 24px;border-radius:999px;background:linear-gradient(135deg,rgba(60,110,230,.55),rgba(63,42,143,.45));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(160,195,255,.35),0 0 20px rgba(36,107,255,.25);color:#fff;font-size:16px;font-weight:600;letter-spacing:-.02em;transition:box-shadow .3s var(--ease),transform .3s var(--ease)} .ft2-form button:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(160,195,255,.55),0 0 28px rgba(36,107,255,.4)} .ft2-form button i,.ft2-book i,.ft2-mail i,.ft2-orange{width:7px;height:7px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:inset 0 -1px 1px rgba(10,40,120,.35),0 0 8px rgba(95,168,255,.7)} .ft2-orange{background:radial-gradient(circle at 34% 30%,#ffd9c6 0,#ff9660 30%,#ff6a2b 58%,#d24a12 100%);box-shadow:inset 0 -1px 1px rgba(120,30,0,.35),0 0 8px rgba(255,106,43,.6);display:inline-block;margin:0 10px 0 8px;vertical-align:middle} .ft2-agree{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;color:var(--f-mute)} .ft2-agree input{appearance:none;width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(160,190,255,.4);margin:0;flex:none} .ft2-agree input:checked{background:linear-gradient(135deg,#3B86FF,#246BFF);box-shadow:none} .ft2-agree a{color:#F7F9FF;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(160,190,255,.5)} .ft2-state-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px} .ft2-lead{font-size:29px;line-height:1.35;letter-spacing:-.025em;color:var(--f-mute);font-weight:400} .ft2-lead b{color:#F7F9FF;font-weight:600} .ft2-hl{color:var(--f-vio);font-weight:500} .ft2-book{flex:none;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px;border-radius:999px;background:linear-gradient(135deg,rgba(40,74,170,.55),rgba(63,42,143,.38));box-shadow:0 0 0 1px rgba(130,170,255,.5),0 0 0 2px rgba(110,77,255,.18),0 0 30px rgba(36,107,255,.3),inset 0 1px 0 rgba(170,205,255,.4);color:#fff;font-size:16px;font-weight:600;letter-spacing:-.02em;transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .ft2-book:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(160,195,255,.75),0 0 0 2px rgba(110,77,255,.28),0 0 40px rgba(36,107,255,.45),inset 0 1px 0 rgba(170,205,255,.55)} .ft2-founder{display:flex;align-items:center;gap:14px;margin-top:44px} .ft2-founder img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(7,11,27,.9),0 0 0 3px rgba(130,170,255,.5),0 0 20px rgba(36,107,255,.35)} .ft2-founder span{display:flex;flex-direction:column;gap:2px} .ft2-founder b{font-size:17px;font-weight:600;letter-spacing:-.02em} .ft2-founder small{font-size:14px;color:var(--f-mute)} .ft2-meta{margin-top:40px;font-size:17px;color:#F7F9FF;letter-spacing:-.01em} .ft2-mail{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-size:25px;font-weight:400;letter-spacing:-.02em;color:#F7F9FF;transition:color .25s} .ft2-mail:hover{color:var(--f-blue)} .ft2-eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--f-mute)} .ft2-socials{margin-top:24px;display:flex;gap:16px} .ft2-socials a{width:50px;height:50px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(160,190,255,.3),inset 0 1px 0 rgba(255,255,255,.1);color:#F7F9FF;transition:background .25s,box-shadow .25s,transform .25s var(--ease)} .ft2-socials a:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(160,190,255,.6),0 0 18px rgba(36,107,255,.3);transform:translateY(-1px)} .ft2-socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .ft2-nav-grid{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 0} .ft2-nav-grid a{display:flex;align-items:center;justify-content:space-between;padding:0 40px 0 0;font-size:21px;letter-spacing:-.02em;color:#F7F9FF;transition:color .25s} .ft2-nav-grid a:nth-child(3n+2),.ft2-nav-grid a:nth-child(3n){padding-left:40px;border-left:1px solid var(--f-hair)} .ft2-nav-grid a span{font-size:15px;color:var(--f-mute);transition:transform .25s var(--ease),color .25s} .ft2-nav-grid a:hover{color:var(--f-blue)} .ft2-nav-grid a:hover span{transform:translate(2px,-2px);color:var(--f-blue)} .ft2-nav-grid a.ft2-cs{justify-content:flex-start;gap:0} .ft2-nav-grid a.ft2-cs span{margin-left:auto} .ft2-legal-links{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 36px;font-size:16px;letter-spacing:-.01em} .ft2-legal-links a{color:#F7F9FF;transition:color .25s} .ft2-legal-links a:hover{color:var(--f-blue)} .ft2-bar p{padding:0 40px;font-size:15px;color:var(--f-mute)} .ft2-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;margin:12px 0 12px 40px;border-radius:14px;background:linear-gradient(145deg,rgba(28,60,170,.72),rgba(63,42,143,.78)),var(--cg-flower,linear-gradient(145deg,#1B3FA8,#3F2A8F)) center/cover;box-shadow:inset 0 1px 0 rgba(170,205,255,.4),0 6px 16px rgba(36,107,255,.35),0 0 0 1px rgba(130,170,255,.35);font:600 18px/1 Inter,var(--font,"Plus Jakarta Sans"),sans-serif;letter-spacing:-.05em;color:#fff} .ft2-mark i{font-style:normal;color:#8CC0FF} .ft2-mark::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 0 2px rgba(7,11,27,.95),0 0 8px rgba(95,168,255,.7)} .ft2-bar::before{content:"";width:1px;height:100%;background:var(--f-hair);order:1;margin-left:40px} .ft2-bar p{order:2} @media (max-width:1100px){.ft2>*{padding:44px 36px}.ft2-h{font-size:30px}.ft2-lead{font-size:24px}.ft2-nav-grid{grid-template-columns:1fr 1fr}.ft2-nav-grid a:nth-child(3n),.ft2-nav-grid a:nth-child(3n+2){padding-left:0;border-left:0}.ft2-nav-grid a:nth-child(2n){padding-left:30px;border-left:1px solid var(--f-hair)}} @media (max-width:820px){.ft.ft-glass{padding:80px 0 24px}.ft2{grid-template-columns:1fr;grid-template-rows:auto}.ft2>*{grid-column:1!important;grid-row:auto!important;border-right:0!important;border-bottom:1px solid var(--f-hair);padding:36px 24px}.ft2-state-top{flex-direction:column}.ft2-lead{font-size:22px}.ft2-mail{font-size:20px}.ft2-nav-grid{grid-template-columns:1fr}.ft2-nav-grid a{padding-left:0!important;border-left:0!important;padding-right:0}.ft2-bar{flex-wrap:wrap;padding:12px 24px;border-bottom:0}.ft2-mark{margin:0}.ft2-bar::before{display:none}.ft2-bar p{padding:0 0 0 16px}} .ft2-nav-grid a{white-space:nowrap;font-size:19px;padding-right:22px} .ft2-nav-grid a:nth-child(3n+2),.ft2-nav-grid a:nth-child(3n){padding-left:28px} @media (max-width:820px){.ft2-form{max-width:100%;height:52px}.ft2-form input{padding:0 16px;font-size:15px}.ft2-form button{height:42px;padding:0 16px;font-size:15px}.ft2-h{font-size:28px}.ft2-sub{font-size:16px}.ft2-agree{font-size:13px}} /* ============================ CONTACT v2: the AI Concierge glass, expanded (two modes in one panel) ============================ */ .ctc-v2{--c-glass:rgba(13,20,56,.58);--c-hair:rgba(190,208,255,.14);--c-mute:rgba(214,224,255,.64);--c-ink:#F7F9FF;--c-blue:#5FA8FF;--c-blue2:#8CC0FF;--c-vio:#8B7CFF;--c-card:rgba(255,255,255,.065);--c-card-h:rgba(255,255,255,.11);--c-line:rgba(160,190,255,.22);--c-line-h:rgba(160,190,255,.42); --c-rim:0 0 0 1px rgba(130,170,255,.42),0 0 0 2px rgba(110,77,255,.14),0 0 46px rgba(36,107,255,.24),0 34px 90px rgba(2,6,24,.55),inset 0 1px 0 rgba(170,205,255,.42),inset 0 0 0 1px rgba(255,255,255,.06); --c-out:cubic-bezier(.2,.7,.2,1);grid-template-columns:1fr 640px;gap:24px;font-family:Inter,"Plus Jakarta Sans",sans-serif;letter-spacing:-.018em;font-feature-settings:"cv11","ss01","calt"} .ctc-v2 .ctc-left,.ctc-v2 .ctc-panel{position:relative;isolation:isolate;border-radius:32px;background:var(--c-glass);box-shadow:var(--c-rim);-webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4);color:var(--c-ink);overflow:hidden;border:0} .ctc-v2 .ctc-left::before,.ctc-v2 .ctc-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:1;background:radial-gradient(60% 40% at 0% 0%,rgba(70,140,255,.30),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.14),rgba(150,190,255,0) 22%),radial-gradient(60% 45% at 100% 100%,rgba(110,77,255,.24),transparent 62%)} .ctc-v2 .ctc-panel::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;background:linear-gradient(200deg,rgba(150,195,255,.85),rgba(150,195,255,0) 30%,rgba(110,77,255,0) 70%,rgba(110,77,255,.7));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9;transition:opacity .3s} /* left: calm, purposeful */ .ctc-v2 .ctc-left{padding:52px 52px 48px;display:flex;flex-direction:column;align-items:flex-start;gap:0} .ctc-eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-blue2)} .ctc-v2 .ctc-left h2{margin-top:22px;font-size:34px;font-weight:400;line-height:1.12;letter-spacing:-.035em;max-width:520px;color:var(--c-ink)} .ctc-left-sub{margin-top:18px;font-size:16px;line-height:1.55;color:var(--c-mute);max-width:440px} .ctc-v2 .ctc-left-quote{margin-top:40px;font-size:24px;line-height:1.3;letter-spacing:-.025em;color:var(--c-ink);font-weight:400;max-width:420px} .ctc-v2 .ctc-person{margin-top:22px;padding-top:0} .ctc-v2 .ctc-person img{width:44px;height:44px;box-shadow:0 0 0 2px rgba(13,20,56,.9),0 0 0 3px rgba(130,170,255,.5)} .ctc-v2 .ctc-person strong{font-size:15px;font-weight:600;letter-spacing:-.02em}.ctc-v2 .ctc-person span{font-size:13px;color:var(--c-mute)} .ctc-trust{list-style:none;margin:40px 0 0;padding:0;width:100%;max-width:440px} .ctc-trust li{display:grid;grid-template-columns:34px 1fr;gap:2px 10px;padding:14px 0;border-top:1px solid var(--c-hair)} .ctc-trust li:last-child{border-bottom:1px solid var(--c-hair)} .ctc-trust span{grid-row:1/3;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--c-blue2);padding-top:3px;font-variant-numeric:tabular-nums} .ctc-trust b{font-size:15px;font-weight:500;letter-spacing:-.02em;color:var(--c-ink)} .ctc-trust small{font-size:13px;color:var(--c-mute);line-height:1.45} .ctc-bookbtn,.cf-submit{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px;border-radius:14px;background:linear-gradient(135deg,rgba(60,110,230,.55),rgba(63,42,143,.45));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(160,195,255,.35),0 0 20px rgba(36,107,255,.22);color:#fff;font-size:15px;font-weight:500;letter-spacing:-.02em;transition:transform .3s var(--c-out),box-shadow .3s var(--c-out);cursor:pointer} .ctc-bookbtn:hover,.cf-submit:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(160,195,255,.6),0 0 28px rgba(36,107,255,.36)} .ctc-bookbtn i,.cf-submit i,.ctc-tab-dot{width:7px;height:7px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:inset 0 -1px 1px rgba(10,40,120,.35),0 0 8px rgba(95,168,255,.7)} .ctc-bookbtn{margin-top:34px} /* right: the panel */ .ctc-v2 .ctc-panel{padding:26px 34px 34px;display:flex;flex-direction:column;min-height:0} .ctc-tabs{position:relative;display:inline-flex;align-self:flex-start;gap:2px;padding:4px;border-radius:999px;background:var(--c-card);box-shadow:inset 0 0 0 1px var(--c-line),inset 0 1px 0 rgba(255,255,255,.1)} .ctc-tabs [role=tab]{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14.5px;font-weight:500;letter-spacing:-.02em;color:var(--c-mute);background:none;border:0;cursor:pointer;transition:color .25s;font-family:inherit} .ctc-tabs [role=tab][aria-selected=true]{color:#fff} .ctc-tabs [role=tab]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(95,168,255,.5)} .ctc-tab-sel{position:absolute;left:4px;top:4px;height:40px;width:0;border-radius:999px;background:linear-gradient(135deg,rgba(60,110,230,.6),rgba(63,42,143,.5));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(160,195,255,.35),0 0 18px rgba(36,107,255,.25);transform:translateX(var(--x,0));transition:transform .28s var(--c-out),width .28s var(--c-out)} .ctc-pane{margin-top:26px} .ctc-pane.in-fwd{animation:cpIn .26s var(--c-out) both} .ctc-pane.in-back{animation:cpBack .26s var(--c-out) both} @keyframes cpIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}} @keyframes cpBack{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}} .ctc-panel.is-book::after{background:linear-gradient(160deg,rgba(150,195,255,.5),rgba(150,195,255,0) 30%,rgba(110,77,255,0) 60%,rgba(110,77,255,.9))} /* form surfaces: embedded in the glass */ .ctc-v2 .ctc-form{padding:0;background:none;box-shadow:none;border:0;gap:22px;overflow:visible;isolation:auto;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0} .ctc-v2 .ctc-form::before{display:none} .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .ctc-v2 .cf-field{gap:8px} .ctc-v2 .cf-field label,.ctc-v2 .cf-q legend{font-size:12.5px;font-weight:500;color:var(--c-mute);letter-spacing:-.005em} .ctc-v2 .cf-q legend{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-blue2);margin-bottom:10px;padding:0} .ctc-v2 .cf-field label em,.ctc-v2 .cf-q legend em{font-style:normal;font-weight:400;color:var(--c-mute);text-transform:none;letter-spacing:0;margin-left:4px} .ctc-v2 .cf-field label small{display:block;font-size:13px;font-weight:400;color:var(--c-mute);line-height:1.5;margin-top:4px} .ctc-v2 .cf-field input,.ctc-v2 .cf-field textarea{height:48px;border:0;border-radius:14px;padding:0 14px;background:var(--c-card);box-shadow:inset 0 0 0 1px var(--c-line),inset 0 1px 0 rgba(255,255,255,.1);font:inherit;font-size:14.5px;font-weight:450;color:var(--c-ink);letter-spacing:-.016em;transition:box-shadow .2s,background .2s} .ctc-v2 .cf-field textarea{height:auto;min-height:104px;padding:12px 14px;resize:vertical} .ctc-v2 .cf-field input::placeholder,.ctc-v2 .cf-field textarea::placeholder{color:var(--c-mute)} .ctc-v2 .cf-field input:focus,.ctc-v2 .cf-field textarea:focus{outline:none;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--c-blue),0 0 0 3px rgba(110,77,255,.14)} .cf-chips{display:flex;flex-wrap:wrap;gap:8px} .cf-chip{position:relative;cursor:pointer} .cf-chip input{position:absolute;opacity:0;pointer-events:none} .cf-chip span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:14px;background:var(--c-card);box-shadow:inset 0 0 0 1px var(--c-line);font-size:14px;font-weight:500;letter-spacing:-.015em;color:var(--c-ink);transition:background .14s,box-shadow .14s} .cf-chip:hover span{background:var(--c-card-h);box-shadow:inset 0 0 0 1px var(--c-line-h)} .cf-chip input:checked+span{background:var(--c-card-h);box-shadow:inset 0 0 0 1px var(--c-blue)} .cf-chip input:checked+span::after{content:"";width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 6px rgba(95,168,255,.7)} .cf-chip input:focus-visible+span{box-shadow:inset 0 0 0 1px var(--c-blue),0 0 0 3px rgba(95,168,255,.35)} .cf-q.q-in{animation:cpIn .3s var(--c-out) both;animation-name:cqIn} @keyframes cqIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .cf-snap{padding:4px 0 2px} .cf-snap-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-blue2);margin-bottom:4px} .cf-snap-rows>div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--c-hair)} .cf-snap-rows>div:last-child{border-bottom:1px solid var(--c-hair)} .cf-snap-rows small{font-size:12.5px;color:var(--c-mute)} .cf-snap-rows b{font-size:14px;font-weight:500;letter-spacing:-.02em;color:var(--c-ink)} .cf-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .ctc-v2 .cf-submit{align-self:auto;height:48px;flex:none} .ctc-v2 .cf-submit::after{display:none} .ctc-v2 .cf-note{font-size:12.5px;line-height:1.5;color:var(--c-mute);flex:1;min-width:200px} .ctc-v2 .cf-err{font-size:13px;color:#FFB59A} .cf-done{display:flex;flex-direction:column;gap:12px;padding:20px 0 6px} .cf-done-h{font-size:34px;font-weight:400;letter-spacing:-.035em;color:var(--c-ink)} .cf-done-p{font-size:16px;line-height:1.55;color:var(--c-ink);max-width:460px} .cf-done-sub{font-size:14px;color:var(--c-mute)} .cf-done-cta{align-self:flex-start;margin-top:8px} /* booking pane */ .cb-h{font-size:30px;font-weight:400;letter-spacing:-.035em;line-height:1.1;color:var(--c-ink)} .cb-sub{margin-top:-6px;font-size:15.5px;line-height:1.55;color:var(--c-mute);max-width:480px} .cb-meta{list-style:none;margin:-4px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .cb-meta li{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:12px;background:var(--c-card);box-shadow:inset 0 0 0 1px var(--c-line);font-size:13px;font-weight:500;color:var(--c-ink)} .cb-meta li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-blue);box-shadow:0 0 6px rgba(95,168,255,.7)} .cb-days{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .cb-day span{height:auto;flex-direction:column;align-items:center;gap:1px;padding:10px 4px 9px;width:100%} .cb-day small{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-mute)} .cb-day b{font-size:19px;font-weight:500;letter-spacing:-.03em;line-height:1.1} .cb-day em{font-style:normal;font-size:11px;color:var(--c-mute)} .cb-day input:checked+span::after{display:none} .cb-embed{width:100%;min-height:640px;border:0;border-radius:20px;background:#fff} @media (max-width:1100px){.ctc-v2{grid-template-columns:1fr}.ctc-v2 .ctc-left{padding:40px 32px}.ctc-v2 .ctc-panel{padding:22px 24px 28px}} @media (max-width:820px){.ctc-v2 .ctc-left{padding:32px 22px}.ctc-v2 .ctc-panel{padding:16px 16px 22px;border-radius:26px}.ctc-tabs{align-self:stretch}.ctc-tabs [role=tab]{flex:1;justify-content:center;padding:0 10px;font-size:13.5px}.cf-row{grid-template-columns:1fr}.cb-days{grid-template-columns:repeat(4,1fr)}.cf-snap-rows>div{grid-template-columns:110px 1fr}.ctc-v2 .ctc-left h2{font-size:28px}.ctc-v2 .ctc-left-quote{font-size:20px}} @media (prefers-reduced-motion:reduce){.ctc-pane.in-fwd,.ctc-pane.in-back,.cf-q.q-in{animation:none}.ctc-tab-sel{transition:none}} .ctc-v2 fieldset{border:0;padding:0;margin:0;min-width:0} .ctc-trust b,.ctc-trust small{display:block} /* decorative social marks: no verified profile URLs exist yet, so they are not focusable (see footer markup) */ .ft2-socials .ft2-soc{width:50px;height:50px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(160,190,255,.3),inset 0 1px 0 rgba(255,255,255,.1);color:rgba(214,224,255,.5)} .ft2-socials .ft2-soc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* ============================ MOBILE NAVIGATION (<=900px) ============================ Rebuilt from umbrel.com, measured element by element. Their menu is not an overlay: the HEADER ITSELF grows. A grid wrapper animates grid-template-rows 0fr -> 1fr (the honest way to animate to an unknown height) in 500ms on the house curve, the header's glass darkens under it over 700ms, and the rows arrive one after another on a 40ms ladder that starts at 100ms. The two hamburger bars rotate into the X in place, 300ms. Closing plays the same film backwards with every row leaving at once (their delay drops to 0). Umbrel's numbers, this world's light. */ .nav-bar{display:flex;align-items:center;justify-content:space-between;padding:20px var(--wrap-pad)} .nav-burger,.nav-mmenu,.nvm-catch{display:none} @media (max-width:900px){ .nav-cap{display:none} /* open: the menu outranks the consent layer (z 9300); the catch sits over it */ .nav.is-open{z-index:9500} /* THE SURFACE: closed, the header is only its floating capsules. Open, one sheet of dark glass spans it edge to edge and everything below the bar hangs from it, exactly as the reference. */ .nav::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:rgba(4,10,32,0);border-bottom:1px solid rgba(150,190,255,0); -webkit-backdrop-filter:blur(40px) saturate(1.3);backdrop-filter:blur(40px) saturate(1.3); opacity:0;transition:background-color .7s var(--nvm-ease),border-color .7s var(--nvm-ease),opacity .35s var(--nvm-ease)} .nav.is-open::after{background:rgba(4,10,32,.82);border-bottom-color:rgba(150,190,255,.14);opacity:1} .nav{--nvm-ease:cubic-bezier(.16,1,.3,1)} /* THE BARS: 1.5px hairlines 7px apart, rotating into the X around the shared centre */ .nav-burger{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;border:0; margin-right:-6px;border-radius:50%;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} .nb-box{position:relative;display:block;width:20px;height:20px} .nb-box i{position:absolute;left:50%;top:50%;display:block;width:1.05rem;height:1.5px;border-radius:999px;background:currentColor; transition:transform .3s var(--nvm-ease)} .nb-box i:first-child{transform:translate(-50%,calc(-50% - 3.5px))} .nb-box i:last-child{transform:translate(-50%,calc(-50% + 3.5px))} .nav.is-open .nb-box i:first-child{transform:translate(-50%,-50%) rotate(45deg)} .nav.is-open .nb-box i:last-child{transform:translate(-50%,-50%) rotate(-45deg)} /* the identity capsule dissolves into the sheet: one surface, not two */ .nav.is-open .nav-logo{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .nav.is-open .nav-logo::after{display:none} /* THE PANEL: grid-template-rows is the only property that animates honestly to auto height */ .nav-mmenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--nvm-ease)} .nav.is-open .nav-mmenu{grid-template-rows:1fr} .nvm-clip{overflow:hidden} .nvm-scroll{max-height:calc(100dvh - 84px);overflow-y:auto;-webkit-overflow-scrolling:touch; padding:4px 12px calc(16px + env(safe-area-inset-bottom));color:var(--nv-ink)} /* THE ROWS: the ladder. Open staggers 100/140/180/220/260/300ms; closing drops every delay to 0 so the whole list leaves together, which is what the reference does. */ .nvm-row{opacity:0;transform:translateY(-8px);transition:opacity .5s var(--nvm-ease),transform .5s var(--nvm-ease);transition-delay:0ms!important} .nav.is-open .nvm-row{opacity:1;transform:none;transition-delay:inherit} .nav.is-open .nvm-row[data-d="1"]{transition-delay:100ms!important} .nav.is-open .nvm-row[data-d="2"]{transition-delay:140ms!important} .nav.is-open .nvm-row[data-d="3"]{transition-delay:180ms!important} .nav.is-open .nvm-row[data-d="4"]{transition-delay:220ms!important} .nav.is-open .nvm-row[data-d="5"]{transition-delay:260ms!important} .nav.is-open .nvm-row[data-d="6"]{transition-delay:300ms!important} .nvm-item{margin:4px 0;display:flex;align-items:center;gap:10px;border-radius:8px;padding:8px; color:inherit;text-decoration:none;transition:background-color .2s var(--ease);-webkit-tap-highlight-color:transparent} .nvm-item:active{background:rgba(255,255,255,.1)} /* THE TILE, built after the Glassy button component on Framer's marketplace (Adriano Reis). That page ships no live component, only a still, so the construction is read off the image rather than off real CSS: the face sits a touch darker than the ground with a vertical gradient, a bright rim runs around it and pools at the bottom edge, a soft shadow falls underneath, and the glyph is a black outline at a single weight. Pressing sinks it. */ .nvm-tile{position:relative;display:grid;place-items:center;flex:none;width:4.5rem;height:4.5rem;border-radius:20px; background:linear-gradient(180deg,#EFEFEF 0%,#E2E2E2 52%,#D4D4D4 100%);color:#0A0A0A; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5), 0 1px 2px rgba(2,8,28,.35), 0 12px 22px -8px rgba(2,8,28,.6); transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)} /* the light that rides the rim: brightest under the bottom curve, like the reference */ .nvm-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 42%)} .nvm-item:active .nvm-tile{transform:translateY(1px) scale(.97); background:linear-gradient(180deg,#E2E2E2 0%,#D6D6D6 52%,#CACACA 100%); box-shadow:inset 0 2px 4px rgba(2,8,28,.28),inset 0 0 0 1px rgba(255,255,255,.4),0 1px 2px rgba(2,8,28,.3)} .nvm-tile svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* the world tile carries World 1's mark and its orange point: the one warm thing in this menu */ .nvm-tile--w1{font:700 19px/1 Inter,sans-serif;letter-spacing:-.04em} .nvm-tile--w1 i{display:inline-block;width:5px;height:5px;margin-left:1px;border-radius:50%; background:radial-gradient(circle at 34% 30%,#ffd9c6 0,#ff9660 30%,#ff6a2b 58%,#d24a12 100%); box-shadow:0 0 8px rgba(255,106,43,.6)} .nvm-txt{display:flex;flex-direction:column;min-width:0} .nvm-t{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.02em} .nvm-s{margin-top:2px;font-size:14px;line-height:1.35;color:var(--nv-mute,rgba(214,224,255,.62))} .nvm-badge{border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;letter-spacing:0;color:#1a0d02; background:linear-gradient(180deg,#FFB073,#FF6A2B)} /* the hairline that separates the destinations from the world hand-off and the CTA */ .nvm-rule{margin:10px 8px;height:1px;background:linear-gradient(90deg,rgba(150,190,255,.20),rgba(150,190,255,0))} .nvm-foot{padding:4px 8px 0;display:flex;flex-direction:column;gap:12px} .nvm-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:16px; font-size:15px;font-weight:600;letter-spacing:-.02em;color:#fff;text-decoration:none; background:linear-gradient(135deg,#3B86FF,#246BFF); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(36,107,255,.32)} .nvm-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .nvm-cta:active{background:linear-gradient(135deg,#2E77F0,#1B5FE8)} .nvm-util{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px} .nvm-lang-slot{display:flex} .nvm-status{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--nv-mute,rgba(214,224,255,.55))} .nvm-status::before{content:"";width:4px;height:4px;border-radius:50%;background:#12b06a;box-shadow:0 0 5px rgba(18,176,106,.5)} /* an invisible catch below the panel: a tap on the page closes the menu instead of hitting it */ .nvm-catch{display:block;position:fixed;inset:0;z-index:-2;pointer-events:none;background:transparent} .nav.is-open .nvm-catch{pointer-events:auto} html.nav-locked,html.nav-locked body{overflow:hidden} } @media (max-width:900px) and (prefers-reduced-motion:reduce){ .nb-box i{transition:none} .nav-mmenu{transition:none} .nav::after{transition:none} .nvm-row{transition:none;transition-delay:0ms!important} .nav.is-open .nvm-row{transition-delay:0ms!important} } /* the hero lede's desktop line break: at phone widths it strands "die het" at a line end */ @media (max-width:900px){ .hero-sub br{display:none} } /* ---- red-team additions: quiet supporting lines, no new visual vocabulary ---- */ .ft2-worlds{margin-top:14px;font-size:13.5px;line-height:1.6;color:rgba(214,224,255,.55);max-width:36ch} .svp-proof{margin:0 0 18px;font-size:14.5px;color:var(--body,#5f5f5f)} .svp-proof a{color:var(--blue,#0274DE);font-weight:600;text-decoration:none} .svp-proof a:hover{text-decoration:underline} .blg-cta{margin-top:44px;font-size:16px;color:#454545} .blg-cta a{color:var(--blue,#0274DE);font-weight:600;text-decoration:none} .blg-cta a:hover{text-decoration:underline} /* ======================================================================== FOOTER, rebuilt on noveq.framer.website and measured at 1440. Their footer is a #0A0A0A ground holding a 1300-wide container with 70px sides. Above the columns sits a giant ghost wordmark (362px, #181818 on #0A0A0A); that block is deliberately left out here at the owner's request, so the columns become the whole footer. Columns, measured: the company block runs 610 wide from the left edge, and two link columns sit right-aligned, Navigation at x+1034 and Legal at x+1179, 61px apart. Company lines are 14/500 lh19.6 ls-.42 #A6A6A6; the newsletter title is 20/500 lh28 ls-.6 white over a 43-tall form whose button carries 17/600 in near-black on light. Navigation links are 14/600 lh14 ls-.28 white on a 22px rhythm, legal links 14/400 ls-.42 on 26px, and the closing line is 14/400 #A6A6A6. ======================================================================== */ .nq-ft{background:#0A0A0A;color:#fff;padding:100px 0 60px; --nqf-mute:#A6A6A6;--nqf-head:"Plus Jakarta Sans",Inter,sans-serif} .nq-ft .wrap{max-width:1300px} .nq-ft-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:60px} .nq-ft-company{flex:0 1 610px;min-width:0} .nq-ft-company .nav-logo{background:none!important;box-shadow:none!important;height:auto;padding:0; -webkit-backdrop-filter:none;backdrop-filter:none;color:#fff} .nq-ft-company .nav-logo::before,.nq-ft-company .nav-logo::after{display:none} .nq-ft-loc{margin-top:22px;font-family:var(--nqf-head);font-size:14px;font-weight:500;line-height:1.4; letter-spacing:-.03em;color:var(--nqf-mute)} .nq-ft .ft2-mail{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--nqf-head); font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#fff;text-decoration:none} .nq-ft .ft2-mail:hover{color:var(--nqf-mute)} .nq-ft-soc{margin-top:18px} .nq-ft .ft2-socials{display:flex;gap:8px} .nq-ft .ft2-soc{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; color:var(--nqf-mute);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .nq-ft .ft2-soc svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6} .nq-ft .ft2-founder{display:flex;align-items:center;gap:12px;margin-top:22px} .nq-ft .ft2-founder img{width:40px;height:40px;border-radius:50%;object-fit:cover} .nq-ft .ft2-founder span{display:flex;flex-direction:column;font-family:var(--nqf-head);letter-spacing:-.03em} .nq-ft .ft2-founder b{font-size:14px;font-weight:500;color:#fff} .nq-ft .ft2-founder small{font-size:12px;font-weight:500;color:var(--nqf-mute)} /* the newsletter, under the company block */ .nq-ft-news{margin-top:40px;max-width:340px} .nq-ft-news-t{font-family:var(--nqf-head);font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#fff} .nq-ft .ft2-form{display:flex;gap:6px;margin-top:14px;height:43px} .nq-ft .ft2-form input{flex:1;min-width:0;height:43px;padding:0 16px;border:0;border-radius:12px; background:rgba(255,255,255,.08);color:#fff;font-family:var(--nqf-head);font-size:14px;letter-spacing:-.03em;outline:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .nq-ft .ft2-form input::placeholder{color:var(--nqf-mute)} .nq-ft .ft2-form input:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 0 0 3px rgba(36,107,255,.45)} .nq-ft .ft2-form button{flex:none;height:43px;padding:0 22px;border:0;border-radius:12px;background:#F0F0F0; color:#181818;font-family:var(--cs-ui,Inter),sans-serif;font-size:17px;font-weight:600;letter-spacing:-.01em;cursor:pointer; transition:background .25s var(--ease)} .nq-ft .ft2-form button:hover{background:#fff} .nq-ft .ft2-form button i{display:none} .nq-ft .ft2-agree{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-family:var(--nqf-head); font-size:12px;line-height:1.5;letter-spacing:-.02em;color:var(--nqf-mute);cursor:pointer} .nq-ft .ft2-agree input{margin-top:2px;flex:none;accent-color:#246BFF} .nq-ft .ft2-agree a{color:#fff} .nq-ft-news-s{margin-top:10px;font-family:var(--nqf-head);font-size:14px;font-weight:500;line-height:1.4; letter-spacing:-.03em;color:var(--nqf-mute)} /* the two link columns, right-aligned */ .nq-ft-col{flex:none} .nq-ft-col--legal{margin-left:1px} .nq-ft-lab{font-family:var(--nqf-head);font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.03em; color:var(--nqf-mute);margin-bottom:16px} .nq-ft-links{display:flex;flex-direction:column;gap:8px} .nq-ft-links a,.nq-ft-links button{font-family:var(--cs-ui,Inter),sans-serif;font-size:14px;font-weight:600; line-height:14px;letter-spacing:-.02em;color:#fff;text-decoration:none;background:none;border:0;padding:0; text-align:left;cursor:pointer;white-space:nowrap;transition:color .25s var(--ease)} .nq-ft-links a:hover,.nq-ft-links button:hover{color:var(--nqf-mute)} .nq-ft-links a span{display:none} .nq-ft-links--legal{gap:12px} .nq-ft-links--legal a,.nq-ft-links--legal button{font-weight:400;letter-spacing:-.03em} .nq-ft-links .ft2-orange{width:6px;height:6px;border-radius:50%;display:inline-block;margin-left:6px; background:radial-gradient(circle at 34% 30%,#ffd9c6 0,#ff9660 30%,#ff6a2b 58%,#d24a12 100%)} /* the closing line */ .nq-ft-bar{display:flex;align-items:center;gap:12px;margin-top:110px; font-family:var(--cs-ui,Inter),sans-serif;font-size:14px;font-weight:400;letter-spacing:-.03em;color:var(--nqf-mute)} .nq-ft-bar .ft2-mark{font-family:var(--nqf-head);font-size:15px;font-weight:700;color:#fff} .nq-ft-bar .ft2-mark i{font-style:normal;color:#FF6A2B} @media (max-width:900px){ .nq-ft{padding:64px 0 40px} /* Stacked, the cross axis is horizontal, so align-items:flex-start sized every block to its own content instead of to the line. The brand column's intrinsic width is about 350px (the newsletter row: e-mail field plus the Inschrijven button), so on a phone it ran past the 280px line and the footer's overflow clip cut the button off. Stretching the stacked blocks to the line is what the case pages already did locally; it now holds for the whole site. */ .nq-ft-grid{flex-direction:column;align-items:stretch;gap:40px} .nq-ft-company{flex:1 1 auto} .nq-ft-news{max-width:none} .nq-ft-bar{margin-top:48px} } /* the wordmark and the closing mark still carried their light-page treatment into the dark footer */ .nq-ft-company .nav-logo, .nq-ft-company .nav-name, .nq-ft-company .nav-name .nav-the{color:#fff} .nq-ft-company .nav-ailab{color:#fff;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);box-shadow:none} .nq-ft-company .nav-ailab::after,.nq-ft-company .nav-ailab .rf{display:none} .nq-ft-bar .ft2-mark{width:auto;height:auto;background:none!important;box-shadow:none!important;border-radius:0; display:inline-flex;align-items:center;padding:0} .nq-ft-bar .ft2-mark::before,.nq-ft-bar .ft2-mark::after{display:none!important} /* ======================================================================== Glass that was drawn for the dark page, calmed down on the light one. The rim carries a 30px blue bloom and a 44px near-black drop shadow. Over midnight that reads as light caught in glass; over the light grey pages it reads as a smudge around the capsule, and the two stacked rings (1px white, 2px blue) only thicken it. Over light the capsule keeps one clean hairline and one small, honestly-placed shadow. ======================================================================== */ .nav.nav-dark{ --nv-rim:0 0 0 1px rgba(15,23,42,.07),0 1px 2px rgba(16,32,64,.06),0 10px 26px -12px rgba(16,32,64,.22), inset 0 1px 0 rgba(255,255,255,.9); } .nav.nav-dark .nav-logo:hover{box-shadow:var(--nv-rim),0 0 0 1px rgba(42,143,255,.28)} /* The dark capsule still carried the wide bloom: a 30px blue glow and a 44px near-black drop, stacked on two rings. Over midnight it reads as a haze around the logo rather than as glass. One hairline, one close highlight, one short shadow: the capsule keeps its depth and loses the halo. */ .nav{ --nv-rim:0 0 0 1px rgba(150,185,255,.28),0 1px 2px rgba(2,6,24,.4),0 8px 22px -12px rgba(2,6,24,.6), inset 0 1px 0 rgba(170,205,255,.3),inset 0 0 0 1px rgba(255,255,255,.05); } .nav .nav-logo:hover{box-shadow:var(--nv-rim),0 0 0 1px rgba(120,170,255,.45)} /* ======================================================================== 404, built on the reference and measured at 1440. Theirs is a single dark viewport: the artwork bleeds off the right edge and the bottom, the nav sits over it in its light-on-dark form, and the words hold the left third. The scale is the site's own: eyebrow 14/500, headline 106/600 at -.04em, two lines of 20/500, and a white pill with 17/700 in near-black. Ours takes the AI flower instead of theirs. ======================================================================== */ .page-404{background:#0A0A0A} .nf{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;overflow:hidden; background:#0A0A0A;color:#fff} .nf-art{position:absolute;top:0;right:0;bottom:0;width:64%;pointer-events:none} .nf-art img{width:100%;height:100%;object-fit:cover;object-position:38% 50%;display:block} /* the artwork is not a picture pasted on a panel: it dissolves into the ground on the side the words occupy, so the two never meet on a hard edge */ .nf-art::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,#0A0A0A 0%,rgba(10,10,10,.92) 18%,rgba(10,10,10,.55) 42%,rgba(10,10,10,0) 78%)} .nf-in{position:relative;z-index:1;width:100%} .nf .nf-label{font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#fff;margin-bottom:26px} .nf h1.nf-title{font-size:clamp(46px,7.4vw,106px);font-weight:600;line-height:1.1;letter-spacing:-.04em;color:#fff; margin:0 0 22px;text-wrap:balance} .nf p.nf-sub{font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:rgba(255,255,255,.82);margin:0 0 34px} .nf-cta{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 34px;border-radius:999px; background:#fff;color:#181818;font-size:17px;font-weight:700;letter-spacing:-.01em;text-decoration:none; transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .nf-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)} .nf-en{margin:22px 0 0;font-size:14px;letter-spacing:-.02em} .nf-en a{color:rgba(255,255,255,.62);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px} .nf-en a:hover{color:#fff} @media (max-width:900px){ .nf{align-items:flex-end;padding-bottom:64px} .nf-art{width:100%;height:62%;top:auto;bottom:auto;top:0} .nf-art::after{background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.6) 45%,#0A0A0A 88%)} .nf-sub{font-size:17px} .nf-cta{height:50px;padding:0 26px;font-size:16px} } @media (prefers-reduced-motion:reduce){.nf-cta{transition:none}.nf-cta:hover{transform:none}} /* The badge was shrinking below its own text. Inside the identity capsule it is a flex item, and with the default flex-shrink it gave up width until the wordmark ran past its pill: at 390 it rendered 54px wide while its content needs 69px, which is why the B of "AI LAB" sat on the border. It keeps its intrinsic width now. The wordmark beside it may shrink instead, and does not need to: the whole group fits well clear of the menu button at every width down to 320. */ .nav-ailab{flex:none} .nav-logo{flex:none;min-width:0} .nav-name{flex:none} /* The menu button draws at 36px, which is the size the design wants but under the 44px a finger needs. The hit area is extended past the paint instead of the button being made bigger, so nothing moves and the target is reachable. At 320 the identity group and the button were also touching; a little breathing room between them keeps both comfortably tappable. */ .nav-burger{position:relative} .nav-burger::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px; transform:translate(-50%,-50%);border-radius:14px} @media (max-width:360px){ .nav-bar{gap:10px} .nav-logo{padding:0 14px 0 13px} } /* ======================================================================== The two rails beside the comparison, measured off the reference at 1440. Each is a clipped tube with a rounded fill inside it: the left one a blue tube (#0274DE) whose white fill stands at 92% of its height, the right one a white tube whose grey fill reaches 59%. The fill is not a height animation; it is the inner bar sliding up from below the tube's foot, which is what lets it round its own top edge as it arrives. It rises when the comparison reveals, on the same beat as the cards. One deliberate difference from the reference: theirs labels the rails "3.2x ROI" and "1.3x ROI". Those are numbers we have not measured, so ours name the two states instead. Everything else, geometry, colour, easing, is the same. ======================================================================== */ .ba-rail{position:relative;overflow:clip;border-radius:14px;align-self:stretch; display:flex;align-items:center;justify-content:center} /* the grid already reserved a 31px column at each end for exactly this */ .ba-rail-a{grid-column:1;background:#0274DE} .ba-rail-b{grid-column:7;background:#fff;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)} .ba-fill{position:absolute;left:2px;right:2px;bottom:2px;border-radius:12px;display:block; transform:translateY(100%);transition:transform 1.15s cubic-bezier(.22,.75,.24,1)} .ba-rail-a .ba-fill{height:92%;background:#fff} .ba-rail-b .ba-fill{height:59%;background:#F0F0F0} .ba-grid.in .ba-fill{transform:translateY(0)} .ba-rail-b .ba-fill{transition-delay:.12s} .ba-rail-lab{position:relative;z-index:1;writing-mode:vertical-rl;transform:rotate(180deg); font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1;white-space:nowrap} .ba-rail-a .ba-rail-lab{color:#0F172A} .ba-rail-b .ba-rail-lab{color:#646464} @media (max-width:900px){ .ba-rail{display:none} } @media (prefers-reduced-motion:reduce){ .ba-fill{transition:none;transform:translateY(0)} } /* ======================================================================== Light glass, made legible. Over the light grey pages both capsules sat at half opacity with a 7%-black hairline, so they read as a faint smudge rather than as navigation, and text passing beneath them showed through. Treated as one system: the same ice-blue fill, the same single blue-grey edge, the same inner light line and one short contact shadow. No new effects, no second ring, no halo. The blue CTA stays the only saturated colour in the bar. Scoped to .nav-dark, which is the class the light pages carry, so the midnight variant is untouched. ======================================================================== */ .nav.nav-dark{ --nv-glass:rgba(232,241,253,.86); --nv-ink:#0B1220; --nv-rim:0 0 0 1px rgba(96,124,168,.30),0 6px 16px -8px rgba(16,32,64,.26), inset 0 1px 0 rgba(255,255,255,.92); } .nav.nav-dark .nav-cap::before{ background:rgba(232,241,253,.86); border-color:rgba(96,124,168,.30); box-shadow:0 0 0 1px rgba(96,124,168,.30),0 6px 16px -8px rgba(16,32,64,.26), inset 0 1px 0 rgba(255,255,255,.92); } /* the labels carried 500 at 15px in slate; one step deeper and one step firmer is enough to hold them against the glass without touching the typeface */ .nav.nav-dark .nav-links a{color:#0B1220;font-weight:560} /* only hover takes the accent: the current page sits in a dark pill and keeps its white label, which blue-on-black had just destroyed */ .nav.nav-dark .nav-links a:hover:not(.on){color:#0274DE} .nav.nav-dark .lang-cap{color:#0B1220} /* the badge read as blue-on-near-white on near-white: give the pill its own footing and darken the letters, without adding light */ .nav.nav-dark .nav-ailab{color:#0A63C4; background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(226,238,255,.86)); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(86,132,200,.34)} .nav.nav-dark .nav-logo:hover{box-shadow:var(--nv-rim),0 0 0 1px rgba(2,116,222,.34)} /* The service rows alternate side to side. The markup keeps a single order, card then media, so the title is always read before its picture and the stacked mobile layout needs no reshuffling; which side the text takes is decided here. Reversing every second row is what turns two-left-then-two-right into a proper left, right, left rhythm down the page. */ .svc-grid{display:block} .svc-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:stretch} .svc-row + .svc-row{margin-top:6px} .svc-row--flip{direction:rtl} .svc-row--flip > *{direction:ltr} @media (max-width:900px){ .svc-row{grid-template-columns:minmax(0,1fr);gap:14px} .svc-row--flip{direction:ltr} .svc-row + .svc-row{margin-top:14px} } /* ======================================================================== "Who we are", brought onto the light ground the reference gives it. Theirs is a light section following a dark band: the handover happens because the section carries its own pale ground and the dark one simply ends behind it. Ours sat inside the dark hero and inherited white type, which is why the same block read as a dark panel here. Measured at 1440: content 1360, headline 60/600 lh66 ls-2.4 in two tones, #181818 for the first sentence and #A6A6A6 for the rest; standfirst 16/500 at 600 wide; four equal cards 336x271 with 6px between them; inside each, the number at 32/600 ls-1.28 and its label at 18/500, with the sentence parked at the foot in 14/500 #4F4F4F; the quote 24/500 lh33.6 ls-.72 and a 200x46 blue pill closing the row. ======================================================================== */ /* The handover, measured on the reference pixel by pixel. Two things I had wrong before: there is no gradient at all (at the seam their ground is still fully blue), and there is no rounded panel edge either. What makes it graceful is that their light block's headline begins 72px ABOVE where its own ground starts, on a higher layer, so the eyebrow and the first line arrive on the blue and the pale ground meets them from below. The ground itself simply begins, flat and square. */ .hero .about{color:#0A0A0A;padding:120px 0;border-radius:0;box-shadow:none;background:none; position:relative;isolation:isolate} /* the ground is drawn as its own layer, starting 72px below where the content does, so the eyebrow and the first line of the headline sit on the flower and the pale ground meets them from underneath. Square edge, no gradient: the reference simply begins its ground here. */ /* The handover, built the way the reference builds it. Their light block carries no ground of its own and its headline begins 72px ABOVE where that ground starts, so the eyebrow and the first line arrive on the band and the pale ground meets them from underneath. There is no gradient at the seam: the band is one light blue-grey, rgb(100,120,138), and it simply stops. That tone is the condition, not a detail: dark text has to read on it. Our flower is rgb(2,26,66), near black, so the band gets a veil over exactly the 196px the content leads by, lifting it into the same light blue-grey. Below that the pale ground begins, flat and square, the way theirs does. The old rounded panel and its drop shadow, which cut the flower off on a bevel, are gone. */ /* the veil that used to lighten this band is gone: the hero now washes out to light on its own, so there is nothing dark left for the words to fight. */ .hero .about::before{content:"";position:absolute;left:0;right:0;top:196px;bottom:0;z-index:-1;background:#F0F0F0} /* the eyebrow sits lower on small screens, so the offset follows it: 164 + 72 */ @media (max-width:760px){ .hero .about::after{height:236px} .hero .about::before{top:236px} } .hero .about > .wrap{position:relative;z-index:1} .hero .about .label,.hero .about .about-head .h2{color:#181818} .hero .about .h2-dim{color:#767676} /* 60px on #F0F0F0: #A6A6A6 sat at 2.1:1, this is 4.1 */ .hero .about .about-desc{color:#4F4F4F} /* four equal cards, the way the reference sets them */ .hero .about .about-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .hero .about .reel{min-height:271px} .hero .about .stat-card{min-height:271px;background:#FBFBFB;color:#0A0A0A; box-shadow:inset 0 0 0 1px rgba(15,23,42,.05);display:flex;flex-direction:column;padding:24px} .hero .about .stat-card .stat-num{font-size:32px;font-weight:600;line-height:1.3;letter-spacing:-.04em;color:#000} .hero .about .stat-card h3{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#0A0A0A;margin-top:2px} .hero .about .stat-card .stat-desc{margin-top:auto;font-size:14px;font-weight:500;line-height:1.4; letter-spacing:-.03em;color:#4F4F4F} .hero .about .stat-card .st-ix{display:none;color:#A6A6A6} .hero .about .stat-card .st-ev{color:#3B4A6B;letter-spacing:.16em} /* the label was the dark-card tint (1.3:1 on #FBFBFB); slate ink reads at 8:1 */ /* the closing row: quote, its author, and the one blue action */ @media (max-width:1180px){ .hero .about .about-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:760px){ .hero .about{padding:64px 0 80px;border-radius:20px 20px 0 0} .hero .about .about-grid{grid-template-columns:1fr} .hero .about .aq-text{font-size:20px} } /* ======================================================================== The mobile menu, rebuilt on World 1's. Theirs is a white card that unfolds out of the header pill rather than a dark panel of tiles: the row grows from 0fr to 1fr over .42s, so the sheet grows out of the bar instead of sliding over it, the links are plain and large, and the page behind is dimmed and blurred. Timings, sizes and the stagger are World 1's own values. ======================================================================== */ .nav-mmenu{display:grid;grid-template-rows:0fr;pointer-events:auto; transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1)} .nav.is-open .nav-mmenu{grid-template-rows:1fr} .nm-in{overflow:hidden;min-height:0;background:#fff;border-radius:0 0 30px 30px; visibility:hidden;transition:visibility 0s .42s} .nav.is-open .nm-in{visibility:visible;transition:none} .nm-pad{display:flex;flex-direction:column;padding:20px 17px;border-top:1px solid rgba(16,24,40,.08)} /* Landscape phones: the sheet is taller than the viewport and .nm-in must keep overflow:hidden for the unfold, so the padded content carries the cap and the scrollport. Without it "Creative Studio" was cut in half and "Plan een gesprek" sat entirely off-screen. */ @media (max-width:900px){ .nm-pad{max-height:calc(100vh - var(--nm-top,84px));max-height:calc(100dvh - var(--nm-top,84px));overflow-y:auto; overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))} } .nm-links{display:flex;flex-direction:column;gap:20px} .nm-links a{display:flex;align-items:center;min-height:41px;padding:7px 0; font-size:20px;font-weight:600;letter-spacing:-.04em;line-height:1.3;color:#0B1220;text-decoration:none} .nm-links a:active{color:#0274DE} .nm-links .nm-world{color:#4F4F4F} .nm-foot{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px; margin-top:40px;padding-right:96px} .nm-place{font-size:14px;font-weight:700;letter-spacing:-.03em;color:#0B1220} .nm-mail{font-size:17px;font-weight:600;letter-spacing:-.03em;color:#0274DE;text-decoration:none} .nm-foot .nvm-lang-slot{position:absolute;right:0;bottom:0;display:flex} /* the items arrive a beat behind the card, on World 1's cadence */ .nm-links a,.nm-foot{opacity:0;transform:translateY(10px); transition:opacity .3s var(--ease),transform .3s var(--ease)} .nav.is-open .nm-links a,.nav.is-open .nm-foot{opacity:1;transform:none} .nav.is-open .nm-links a:nth-child(1){transition-delay:.05s} .nav.is-open .nm-links a:nth-child(2){transition-delay:.09s} .nav.is-open .nm-links a:nth-child(3){transition-delay:.13s} .nav.is-open .nm-links a:nth-child(4){transition-delay:.17s} .nav.is-open .nm-links a:nth-child(5){transition-delay:.21s} .nav.is-open .nm-foot{transition-delay:.25s} /* the header pill solidifies into the card, so bar and sheet read as one mass */ .nav.is-open .nav-bar{border-radius:30px 30px 0 0;background:#fff;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none} .nav.is-open .nav-logo,.nav.is-open .nav-cap{background:none;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none} .nav.is-open .nav-name,.nav.is-open .nav-name .nav-the{color:#0B1220} /* the world behind: dimmed and blurred, tap to close */ .nvm-catch{display:block;position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); opacity:0;pointer-events:none;transition:opacity .35s var(--ease)} .nav.is-open .nvm-catch{opacity:1;pointer-events:auto} @media (prefers-reduced-motion:reduce){ .nav-mmenu,.nm-links a,.nm-foot,.nvm-catch{transition:none} } /* Open, the sheet is white, but the button and the language capsule still wore the dark panel's colours: white bars on white, and a near-white label on a 7% white fill. Both take ink while the menu is open, and the button gets World 1's soft circle so the X reads as a control rather than two loose strokes. */ .nav.is-open .nav-burger{background:rgba(16,24,40,.06);border-radius:50%;color:#0B1220} .nav.is-open .nb-box i{background:#0B1220} .nav.is-open .nvm-lang-slot .lang-cap{color:#0B1220;background:rgba(16,24,40,.06); box-shadow:inset 0 0 0 1px rgba(16,24,40,.10)} .nav.is-open .nvm-lang-slot .lang-cap .lc-now, .nav.is-open .nvm-lang-slot .lang-cap .lc-next{color:#0B1220} /* Without the wash there is nothing to lighten the band, so the 196px the content leads by would drop the eyebrow and the first headline line onto the undimmed flower. Reduced motion gets the ground from the top instead. */ @media (prefers-reduced-motion:reduce){ .hero .about::before{top:0} } /* ======================================================================== THE CASE BLOCK, rebuilt on noveq's, measured at 1440. Their flower does not scroll with the section: it pins to the top of the viewport and the glass cards travel over it, which is the whole effect. The grid is three columns of 444 / 444 / 459 with 6px gutters; the right card is 586 tall and spans both rows, and three 294x180 stat cards fill the first two columns underneath, so 444+6+444 lands exactly on 294*3+6*2. The glass itself is almost nothing: no fill, no border, no shadow, just backdrop-filter blur(20px) and a 24px radius. Over a dark photograph the blur alone lifts the card off its ground. ======================================================================== */ .dark-bg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden;z-index:0} .dark-bg img{width:100%;height:100%;object-fit:cover;display:block} .dark .wrap{position:relative;z-index:1} /* the cases subsection sits on the plain rgb(24) ground, as on the reference: the sticky flower ends with the manifest and the cards */ .dark-caseshead,.cg2-grid{position:relative;z-index:1} .dark-bg{will-change:opacity} /* without motion the flower cannot fade, so the cases carry their own ground */ @media (prefers-reduced-motion:reduce){ .dark-caseshead::before{content:"";position:absolute;top:-120px;bottom:-60px;left:50%;width:100vw;transform:translateX(-50%);background:rgb(24,24,24);z-index:-1} .cg2-grid::before{content:"";position:absolute;top:-60px;bottom:-120px;left:50%;width:100vw;transform:translateX(-50%);background:rgb(24,24,24);z-index:-1} } .cfx{display:grid;grid-template-columns:444fr 444fr 459fr;grid-template-rows:400px 180px;gap:6px; margin-top:157px} .cfx-card{position:relative;border-radius:24px;padding:34px 34px 30px;color:#fff; /* their recipe exactly: a blur, and inside it a 20% near-black fill. The blur alone is invisible over a smooth photograph; the fill is what gives the card a body without ever turning into a panel. */ background:rgba(8,12,24,.62); /* was .2, their recipe: under our flower the ground swings from navy to rgb(173,177,188) as you scroll, and the muted lines fell to 1.1:1 at the bright spots; .62 keeps every line above 4.5 at the brightest frame */ -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); display:flex;flex-direction:column} .cfx-c{grid-column:3;grid-row:1/3} .cfx-stats{grid-column:1/3;grid-row:2;display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .cfx-stat{padding:26px 28px;justify-content:space-between} .cfx-a h3{font-family:var(--cs-head,"Plus Jakarta Sans"),sans-serif;font-size:34px;font-weight:600; line-height:1.12;letter-spacing:-.035em} .cfx-a .cfx-sub{margin-top:8px;font-size:15px;font-weight:400;letter-spacing:-.02em;color:rgba(255,255,255,.62)} .cfx-a .cfx-desc{margin-top:auto;font-size:15.5px;line-height:1.5;letter-spacing:-.015em;color:rgba(255,255,255,.82)} .cfx-row{display:flex;align-items:center;justify-content:space-between} .cfx-brand{font-family:var(--cs-head,"Plus Jakarta Sans"),sans-serif;font-size:19px;font-weight:600;letter-spacing:-.03em} .cfx-year{font-size:19px;font-weight:500;letter-spacing:-.02em;color:rgba(255,255,255,.72)} .cfx-meta{margin-top:auto;display:flex;flex-direction:column;gap:16px} .cfx-meta dt{font-size:14px;letter-spacing:-.02em;color:rgba(255,255,255,.58)} .cfx-meta dd{margin-top:3px;font-size:16px;font-weight:500;letter-spacing:-.02em;color:#fff} .cfx-c blockquote{margin-top:18px;font-family:var(--cs-head,"Plus Jakarta Sans"),sans-serif; font-size:25px;font-weight:500;line-height:1.28;letter-spacing:-.03em} .cfx-person{display:flex;align-items:center;gap:12px;margin-top:26px} .cfx-person img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none} .cfx-person div{display:flex;flex-direction:column;line-height:1.35} .cfx-person strong{font-size:15px;font-weight:600;letter-spacing:-.02em} .cfx-person span{font-size:13.5px;letter-spacing:-.015em;color:rgba(255,255,255,.66)} .cfx-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;height:56px; border-radius:999px;background:#fff;color:#181818;font-size:16px;font-weight:600;letter-spacing:-.02em; text-decoration:none;transition:background .25s var(--ease)} .cfx-cta:hover{background:rgba(255,255,255,.88)} .cfx-stat b{font-family:var(--cs-head,"Plus Jakarta Sans"),sans-serif;font-size:34px;font-weight:600; letter-spacing:-.04em;line-height:1} .cfx-stat span{font-size:14.5px;letter-spacing:-.015em;color:rgba(255,255,255,.95)} /* on the glass over the bright blue of the flower .72 fell to 2.3:1; near-white holds 5.7 */ @media (max-width:1100px){ .cfx{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto} .cfx-c{grid-column:1/3;grid-row:2} .cfx-stats{grid-column:1/3;grid-row:3} } @media (max-width:760px){ .cfx{grid-template-columns:1fr;margin-top:40px} .cfx-a,.cfx-b,.cfx-c,.cfx-stats{grid-column:1;grid-row:auto} .cfx-card{padding:26px 24px 24px} .cfx-stats{grid-template-columns:1fr} .cfx-a h3{font-size:28px} .cfx-c blockquote{font-size:21px} } /* ======================================================================== THE CASE GRID, on noveq's homepage card. Measured at 1440: a 677x450 card on rgb(36,36,36) with a 20px radius and 24px of padding, two across with the same 6px gutter the rest of their grid uses. Inside, the wordmark sits at 24,24, the product shot at 456,6 as a 215x160 tile with a 12px radius, and the type runs 32/600 for the name, 16/500 under it and 14/500 for the year. Ours carries a fourth line, the one-sentence story, in the space their description occupies. ======================================================================== */ /* the grid now lives inside the dark section, so the pinned flower stands behind it and there is no seam where one section hands over to the next */ .cg2-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:60px} .cg2-card{position:relative;display:block;min-height:450px;padding:24px;border-radius:20px; background:rgb(36,36,36);color:#fff;text-decoration:none;overflow:hidden; transition:background .3s var(--ease),transform .3s var(--ease)} .cg2-card:hover{background:rgb(43,43,43)} .cg2-kind{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase; color:rgba(255,255,255,.5)} .cg2-shot{position:absolute;top:6px;right:6px;width:215px;height:160px;border-radius:12px;overflow:hidden;margin:0;transition:width .4s var(--ease),height .4s var(--ease)} .cg2-card:hover .cg2-shot{width:245px;height:182px} /* measured on the reference: the tile grows, the card does not scale */ .cg2-shot img{width:100%;height:100%;object-fit:cover;display:block} .cg2-name{margin-top:16px;font-family:var(--cs-head,"Plus Jakarta Sans"),sans-serif;font-size:32px;font-weight:600; letter-spacing:-.035em;line-height:1.12} .cg2-sub{margin-top:6px;font-size:16px;font-weight:500;letter-spacing:-.02em;color:rgba(255,255,255,.82); max-width:380px} .cg2-year{margin-top:8px;font-size:14px;font-weight:500;letter-spacing:-.015em;color:rgba(255,255,255,.5)} .cg2-story{position:absolute;left:24px;right:24px;bottom:24px;font-size:15.5px;line-height:1.5; letter-spacing:-.015em;color:rgba(255,255,255,.72)} @media (max-width:900px){ .cg2-grid{grid-template-columns:1fr} .cg2-card{min-height:0;padding:20px} .cg2-shot{position:relative;top:auto;right:auto;width:100%;height:auto;aspect-ratio:4/3;margin-bottom:16px} .cg2-name{font-size:26px;margin-top:12px} .cg2-story{position:static;margin-top:14px} } /* ------------------------------------------------------------------------ The glass cards, retyped off the reference. Everything below is measured, not chosen: 32px of padding, and a scale that runs 32/600 for the card title, 24/500 for the quote and for the stat number, 20/500 for the description, 16/500 for secondary lines and 14/500 and 12/500 for labels. Their greys are literal too: #A6A6A6 for muted text, #E3E3E3 for the year, #F0F0F0 for the stat number. My first pass ran the title and especially the stat number far too large, which is what made the block look oversized. ------------------------------------------------------------------------ */ .cfx-card{padding:32px} .cfx-a h3{font-size:32px;font-weight:600;line-height:1.3;letter-spacing:-.03em} .cfx-a .cfx-sub{margin-top:6px;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:rgba(255,255,255,.8)} .cfx-a .cfx-desc{font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#fff} .cfx-brand{font-size:19px;font-weight:600;letter-spacing:-.03em} .cfx-year{font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#E3E3E3} .cfx-meta dt{font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:rgba(255,255,255,.8)} .cfx-meta dd{margin-top:2px;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#fff} .cfx-stars{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#fff} .cfx-star{font-size:10px;letter-spacing:.1em;line-height:1} .cfx-c blockquote{font-size:24px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#fff} .cfx-person div{gap:4px} .cfx-person strong{font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#fff} .cfx-person span{font-family:"Inter",system-ui,sans-serif;font-size:12px;font-weight:500;line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.8)} .cfx-cta{height:54px;border-radius:50px;font-family:"Inter",system-ui,sans-serif;font-size:17px;font-weight:600;line-height:1;letter-spacing:-.01em;color:#0A0A0A} .cfx-stat{padding:24px} .cfx-stat b{font-size:24px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#F0F0F0} .cfx-stat span{font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:rgba(255,255,255,.95)} /* this later rule had been undoing the .95 above */ @media (max-width:760px){ .cfx-card,.cfx-stat{padding:24px} .cfx-a h3{font-size:26px} .cfx-c blockquote{font-size:20px} } /* the case card hover, measured on theirs: the ground drops to near-black and the product tile grows from 215x160 to 245x182. They animate the tile's own size rather than scaling the image inside it, so the crop stays honest. */ .cg2-card:hover{background:rgb(10,10,10)} .cg2-card:hover .cg2-shot img{transform:none} /* the result pills, measured on theirs: 24 tall on a 25px radius over rgb(24,24,24), 10px of inset before the figure, 8px between figure and label, both at 14/500. They wrap onto a second row with a 6px gap. */ .cg2-pills{position:absolute;left:32px;right:32px;bottom:32px;display:flex;flex-wrap:wrap;gap:6px} .cg2-pill{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 10px;border-radius:25px; background:rgb(24,24,24);font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:500;line-height:1;letter-spacing:-.02em; color:rgba(255,255,255,.72);white-space:nowrap} .cg2-pill b{font-weight:500;color:#fff} .cg2-card:hover .cg2-pill{background:rgb(30,30,30)} /* the story sits above the pills rather than on the floor of the card */ .cg2-story{bottom:auto;top:284px;max-width:500px} /* the moving tile: two of the four cases have a real capture, and those play on hover the way the reference's do. Nothing is fetched until a pointer arrives, and a card without a clip simply keeps its still. */ .cg2-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; opacity:0;transition:opacity .28s var(--ease);pointer-events:none} .cg2-card.clip-on .cg2-clip{opacity:1} @media (prefers-reduced-motion:reduce){.cg2-clip{display:none}} @media (max-width:900px){ .cg2-pills{position:static;margin-top:16px} .cg2-story{position:static;top:auto;max-width:none} } /* the card's one-line story carries their description scale, not the small body size it inherited from the first pass */ .cg2-story{font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#fff} @media (max-width:900px){.cg2-story{font-size:17px}} /* The story and the pills were both pinned with absolute positions, so a card whose pills wrapped onto a third row grew upward into its own sentence. They sit in normal flow now: the card is a column, the story takes the slack, and the pills follow it. A taller pill block pushes the text up instead of colliding with it, whatever the copy length turns out to be. */ .cg2-card{display:flex;flex-direction:column} .cg2-story{position:static;margin-top:auto;max-width:500px} .cg2-pills{position:static;margin-top:14px} @media (max-width:900px){ .cg2-story{margin-top:16px;max-width:none} } /* ======================================================================== RESPONSIVE, measured on the reference at 768 and 390. Both keep a 12px side margin (content 744 / 366), set the h2 at 40/600 lh44 ls-1.6 and the h1 at 44, and run every grid in one column from the tablet down. The phone drops the section padding to 80 and the manifest, scrub and blog titles a step further. Placed after the older breakpoints so it wins the cascade. ======================================================================== */ @media (max-width:900px){ :root{--wrap-pad:12px} .hero-scrub{padding:40px var(--wrap-pad)} .h2{font-size:40px;line-height:1.1;letter-spacing:-.04em} .hero-title{font-size:44px} .hero .about .about-grid,.proc-grid,.blog-grid,.cg2-grid{grid-template-columns:1fr} .cfx{grid-template-columns:1fr} .cfx-a,.cfx-b,.cfx-c,.cfx-stats{grid-column:1;grid-row:auto} .cfx-stats{grid-template-columns:1fr} .blog-grid{gap:6px} .svc-row{gap:6px} .svc-row + .svc-row{margin-top:6px} .svc-media{height:334px} } @media (max-width:720px){ .svc,.proc,.ba,.blog,.tm{padding-top:80px;padding-bottom:80px} .svc-card{padding:24px} .svc-card h3{font-size:24px;line-height:1.3;letter-spacing:-.03em} .proc-card h3{font-size:20px;line-height:1.3;letter-spacing:-.03em} .scrub-text{font-size:32px;line-height:1;letter-spacing:-.02em} .scrub-dark{font-size:32px;line-height:1;letter-spacing:-.02em} .blog-card{aspect-ratio:auto;height:242px} .blog-meta h3{font-size:20px;line-height:1.3;letter-spacing:-.03em} } /* Skip link: off-screen until it takes focus, then the first thing a keyboard visitor sees. World 2 is a midnight theme, so it inverts World 1's colours and uses the AI LAB focus ring. */ .skip{position:absolute;left:20px;top:-60px;z-index:9000;background:var(--nq-ink,#0A1024);color:var(--nq-paper,#F0F0F0); padding:10px 16px;border-radius:30px;font-size:13px;font-weight:600;text-decoration:none;line-height:1; transition:top .18s cubic-bezier(.22,1,.36,1)} .skip:focus{top:20px;outline:none;box-shadow:0 0 0 4px rgba(64,120,255,.55)} @media (prefers-reduced-motion:reduce){.skip{transition:none}} /* The hero entrance is driven by JavaScript adding .risen. If that never arrives, because a script failed, was blocked, or is simply switched off, the headline would sit at opacity 0 for ever and the page would open on an empty hero. Where the browser can tell us there is no scripting, show the finished state instead. */ @media (scripting: none){.hero-title .c{opacity:1;transform:none} [data-nv-reveal]{opacity:1;transform:none}} /* ---- the narrowest phones (320 to 359): nothing may reach past the viewport --------------------- The testimonial card's grid column and the person row carried their content width, and the fixed 200px section button sat in a row that would not wrap. */ @media (max-width:767px){ .tm-row{grid-template-columns:minmax(0,1fr)} .tm-card,.tm-slides,.tm-slide,.tm-quote,.tm-person{min-width:0;max-width:100%} .tm-person{flex-wrap:wrap} .tm-who,.tm-who > div{min-width:0} .sec-subrow{flex-wrap:wrap;row-gap:16px} .btn-blue{max-width:100%} } @media (max-width:359px){ .tm-card{padding:20px} .tm-arrows{position:static;margin-top:12px} .faq-foot-row{flex-wrap:wrap;gap:12px} .faq-foot-row .btn-blue{width:100%} } @media (max-width:767px){.tm{overflow-x:clip}}