/* =========================================================
   Curious Cloud Studios — website styles (v3)
   Direction: Cuberto's clarity × Lusion's 3D.
   Brand: Cloud Cut guidelines v1.0 — Teal #008F9C, Ink #19232A,
   Paper #F6F3EC, Figtree. Small text stays Ink on Paper.
   ========================================================= */

@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Variable.ttf") format("truetype"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Italic-Variable.ttf") format("truetype"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root {
  --teal: #008F9C;
  --ink: #19232A;
  --paper: #F6F3EC;
  --white: #FFFFFF;
  --paper-2: #EAE6DC;
  --teal-50: #EAF5F6;
  --teal-100: #D3ECEE;
  --teal-200: #A8D9DE;
  --teal-300: #4FB7C0;
  --teal-700: #00737D;
  --ink-2: #39444B;
  --ink-3: #24323A;
  --muted: #5B666C;
  --muted-d: #A9B3B8;          /* muted text on ink */
  --line: rgba(25, 35, 42, .1);
  --line-2: rgba(25, 35, 42, .2);
  --line-d: rgba(246, 243, 236, .14);

  --font: "Figtree", Arial, sans-serif;
  --code: ui-monospace, SFMono-Regular, Menlo, monospace;
  --container: 1360px;
  --gutter: clamp(20px, 5vw, 72px);
  --nav-h: clamp(84px, 9vw, 116px);
  --r-lg: clamp(24px, 3vw, 44px);
  --r-md: clamp(20px, 2vw, 30px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 2px 6px rgba(25, 35, 42, .04), 0 30px 60px -26px rgba(0, 90, 98, .3);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
body.is-loading { overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--teal); color: var(--white); }
:focus-visible { outline: 2.5px solid var(--teal); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 400; padding: 10px 18px; border-radius: 99px; background: var(--ink); color: var(--paper); font-weight: 700; transition: top .3s var(--ease); }
.skip:focus { top: 16px; }
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.i { width: 18px; height: 18px; flex: none; }
.t { color: var(--teal); }

.label { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.label b { font-weight: 700; letter-spacing: .04em; color: var(--teal); }
.label--light { color: var(--muted-d); }
.label--light b { color: var(--teal-300); }

/* line masks for big headings (animated by JS) */
.mline { display: block; overflow: hidden; padding: 0 .08em .08em; margin: 0 -.08em -.08em; }
.mline > span { display: inline-block; }
.ln-mask { padding-bottom: .06em; margin-bottom: -.06em; }

/* text-roll links (Cuberto) */
.roll { display: inline-block; height: 1.3em; line-height: 1.3; overflow: hidden; vertical-align: top; }
.roll > span { display: inline-block; text-shadow: 0 1.3em currentColor; transition: transform .55s var(--ease); }
.roll:hover > span { transform: translateY(-1.3em); }

/* ---------- Buttons ---------- */
.btn { --h: 56px; display: inline-flex; align-items: center; gap: 14px; height: var(--h); padding: 0 7px 0 26px; border-radius: 999px; font-size: 16px; font-weight: 700; white-space: nowrap; transition: background-color .3s, color .3s, box-shadow .3s; }
.btn__ico { display: grid; place-items: center; flex: none; width: calc(var(--h) - 14px); height: calc(var(--h) - 14px); border-radius: 50%; background: var(--teal); color: var(--white); transition: transform .55s var(--ease); }
.btn__ico .i { width: 18px; height: 18px; }
.btn:hover .btn__ico { transform: rotate(-45deg); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #0D1519; }
.btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--sm { --h: 46px; padding-right: 18px; font-size: 15px; }
.btn--lg { --h: 62px; padding-left: 30px; font-size: 17px; }

/* ---------- Cursor (Cuberto) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), opacity .3s; }
.cursor.is-on { opacity: 1; }
.cursor.is-hover { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.cursor.is-hidden { opacity: 0; }
.cursor-label { position: fixed; left: 0; top: 0; z-index: 301; pointer-events: none; }
.cursor-label span { display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 700; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .35); transform: scale(0); transition: transform .5s var(--ease); }
.cursor-label.is-on span { transform: scale(1); }

/* =========================================================
   LOADER — Cloud window
   ========================================================= */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--teal); color: var(--paper); animation: loaderFailsafe .6s 9s forwards; }
.loader.is-built { background: transparent; }
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; } }
html:not(.js) .loader { display: none; }
.loader__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__tag { position: absolute; top: clamp(22px, 3.4vw, 40px); margin: 0; font-size: clamp(22px, 2.6vw, 38px); font-style: italic; font-weight: 700; letter-spacing: -.01em; line-height: 1; opacity: 0; }
.loader__tag--a { left: var(--gutter); color: var(--paper); }
.loader__tag--b { right: var(--gutter); color: var(--ink); }
.loader__count { position: absolute; left: calc(var(--gutter) - .04em); bottom: clamp(8px, 1.6vw, 20px); display: flex; align-items: flex-start; color: var(--paper); opacity: 0; }
.odo { display: flex; align-items: flex-start; height: 1em; overflow: hidden; font-size: clamp(96px, 15vw, 240px); font-weight: 700; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.odo__col { display: flex; flex-direction: column; transition: transform .55s var(--ease); }
.odo__col i { display: block; height: 1em; font-style: normal; }
.loader__pct { margin-top: .4em; font-size: clamp(20px, 2.2vw, 34px); font-weight: 700; }
.loader__name { position: absolute; right: var(--gutter); bottom: clamp(22px, 3vw, 40px); font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); opacity: 0; }

/* =========================================================
   NAV + DOCK + MENU
   ========================================================= */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; transition: transform .8s var(--ease); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__inner { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.nav__logo { flex: none; width: clamp(190px, 17vw, 250px); margin-left: -1.4%; color: var(--teal); } /* SVG viewBox includes the brand clear space */
.nav__logo svg { width: 100%; height: auto; }
.nav__links { display: flex; gap: clamp(20px, 2.4vw, 36px); margin-left: auto; font-size: 16px; font-weight: 500; }
.nav__menu { display: none; align-items: center; gap: 10px; height: 46px; margin-left: auto; padding: 0 16px 0 20px; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 700; }
.nav__menu i { position: relative; width: 16px; height: 8px; }
.nav__menu i::before, .nav__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease); }
.nav__menu i::before { top: 0; }
.nav__menu i::after { bottom: 0; }
.nav__menu[aria-expanded="true"] i::before { transform: translateY(3px) rotate(45deg); }
.nav__menu[aria-expanded="true"] i::after { transform: translateY(-3px) rotate(-45deg); }

.dock { white-space: nowrap; position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 99px; background: rgba(25, 35, 42, .92); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(246, 243, 236, .12), 0 18px 44px -14px rgba(0, 0, 0, .45); transform: translate(-50%, 170%); transition: transform .8s var(--ease); }
.dock.is-on { transform: translate(-50%, 0); }
.dock__home { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--teal-300); transition: background-color .3s; }
.dock__home svg { width: 30px; }
.dock__home:hover { background: rgba(246, 243, 236, .1); }
.dock__link { padding: 12px 16px; border-radius: 99px; color: var(--paper); font-size: 15px; font-weight: 500; transition: background-color .3s; }
.dock__link:hover, .dock__link.is-active { background: rgba(246, 243, 236, .12); }
.dock__cta { margin-left: 4px; padding: 12px 20px; border-radius: 99px; background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 700; transition: background-color .3s; }
.dock__cta:hover { background: var(--white); }

.menu { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: calc(var(--nav-h) + 16px) var(--gutter) max(40px, env(safe-area-inset-bottom)); background: var(--ink); color: var(--paper); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease), visibility 0s .8s; }
.menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .8s var(--ease), visibility 0s; }
.menu__links a { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-d); font-size: clamp(42px, 12vw, 76px); font-style: italic; font-weight: 700; line-height: 1.08; }
.menu__links small { font-size: 13px; font-style: normal; color: var(--teal-300); letter-spacing: .06em; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.menu__foot a { font-size: 18px; font-weight: 700; border-bottom: 2px solid var(--teal); }
body.menu-open .nav__logo { color: var(--white); }

/* =========================================================
   HERO — centred headline + 3D cloud stage
   ========================================================= */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(12px, 3vh, 40px)); text-align: center; }
.hero__kicker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 99px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; animation: pulse 2.2s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.hero__title { margin-top: clamp(16px, 2.4vw, 28px); font-size: clamp(58px, 12vw, 196px); font-style: italic; font-weight: 700; line-height: .98; letter-spacing: -.025em; }
.hero__line { display: block; }
.hero__line--teal { color: var(--teal); }
.hero__sub { max-width: 34em; margin: clamp(18px, 2.4vw, 30px) auto 0; font-size: clamp(16px, 1.35vw, 19px); color: var(--ink-2); }
.hero__stage-wrap { margin-top: clamp(36px, 5vw, 64px); }
.hero__stage { position: relative; height: min(88vh, 820px); min-height: 440px; margin: 0 clamp(8px, 1vw, 16px); overflow: hidden; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 50% 0%, #26363F, var(--ink) 70%); transform-origin: 50% 0; will-change: transform; touch-action: pan-y; }
.hero__stage canvas { display: block; width: 100%; height: 100%; }
.hero__hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 8px 16px; border-radius: 99px; background: rgba(246, 243, 236, .1); color: var(--paper); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.hero__fallback { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 4%; }
.hero__fallback svg { width: 22%; color: var(--teal); }
.hero__fallback svg:nth-child(2) { color: var(--paper); transform: translateY(-18%); }
.hero__stage.no-webgl canvas { display: none; }
.hero__stage.no-webgl .hero__fallback { display: flex; }
.hero__marks { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero__marks i { font-size: 22px; font-style: normal; font-weight: 300; line-height: 1; }

.reel { margin-top: clamp(80px, 9vw, 140px); padding: 0 clamp(8px, 1vw, 16px); }
.reel__card { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: var(--ink); }
.reel__card video { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   HERO EASTER EGG — appears after lots of pushing
   ========================================================= */
.hero__egg { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--paper); pointer-events: none; visibility: hidden; }
.hero__egg.is-on { visibility: visible; }
.hero__egg-title { font-size: clamp(40px, 6.4vw, 104px); font-style: italic; font-weight: 700; line-height: 1.02; letter-spacing: -.02em; text-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.hero__egg-sub { margin-top: 16px; font-size: clamp(17px, 1.6vw, 22px); color: #D9E1E4; }
.hero__egg-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; margin-top: 28px; padding: 0 22px; border-radius: 99px; background: var(--paper); color: var(--ink); font-weight: 700; pointer-events: auto; }
.hero__egg-btn .i { animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* =========================================================
   WHY CURIOUS CLOUD (Cuberto "Why")
   ========================================================= */
.why { padding: clamp(96px, 11vw, 170px) 0 clamp(48px, 6vw, 90px); }
.why__head { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); gap: 24px 48px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.why__head .label { align-self: start; margin-top: 8px; }
.why__lede { max-width: 26em; font-size: clamp(22px, 2.3vw, 34px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.why__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.tile { grid-column: span 2; display: flex; flex-direction: column; min-height: clamp(220px, 20vw, 290px); padding: clamp(22px, 2.4vw, 34px); border-radius: var(--r-md); transition: translate .6s var(--ease); }
.tile:hover { translate: 0 -6px; }
.tile--wide { grid-column: span 3; }
.tile--teal { background: var(--teal-50); }
.tile--paper { background: var(--paper-2); }
.tile__ico { width: 30px; height: 30px; color: var(--ink); transition: transform .8s var(--ease); }
.tile:hover .tile__ico { transform: rotate(-12deg) scale(1.1); }
.tile__num { margin-top: auto; font-size: clamp(64px, 7vw, 108px); font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tile__cap { margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.tile__text { max-width: 14em; margin-top: auto; font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }

/* =========================================================
   STUDIO — a question turns into an answer (particles)
   ========================================================= */
.statement { position: relative; }
.statement__pin { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 40px 0; overflow: hidden; }
.statement__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; width: 100%; }
.statement__title { margin-top: 22px; font-size: clamp(52px, 8vw, 132px); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.statement__line2 > span { color: var(--teal); }
.statement__lede { max-width: 26em; margin-top: 28px; font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-2); }
.statement__meter { display: flex; align-items: center; gap: 14px; margin-top: 36px; font-size: 24px; font-weight: 700; }
.statement__meter i { position: relative; flex: 0 1 240px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line-2); }
.statement__meter b { position: absolute; inset: 0; background: var(--teal); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.statement__meter span:last-child { color: var(--teal); }
.statement__stage { position: relative; justify-self: center; width: min(100%, 76vh); aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-lg); background: radial-gradient(70% 70% at 50% 45%, var(--white), var(--paper-2)); cursor: crosshair; touch-action: pan-y; }
.statement__stage canvas { display: block; width: 100%; height: 100%; }
.statement__tag { position: absolute; left: 50%; bottom: 18px; padding: 7px 14px; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 80px); padding-top: 32px; border-top: 1px solid var(--line-2); }
.principles b { font-size: 15px; color: var(--teal); }
.principles h3 { margin: 12px 0 10px; font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -.015em; }
.principles p { max-width: 24em; color: var(--muted); }

/* =========================================================
   SERVICES — Cuberto: cards open and turn ink as they arrive
   ========================================================= */
.services { padding: clamp(80px, 9vw, 140px) 0; }
.services__head { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; margin-bottom: clamp(48px, 6vw, 80px); }
.services__intro { max-width: 24em; font-size: clamp(22px, 2.3vw, 34px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.svc-list { display: flex; flex-direction: column; gap: 10px; }
.svc { --glow: 0; position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); }
.svc::before { content: ""; position: absolute; z-index: 0; right: -12%; bottom: -60%; width: 70%; height: 170%; background: radial-gradient(closest-side, rgba(0, 143, 156, .55), transparent); opacity: var(--glow); pointer-events: none; }
.svc__head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(28px, 3.2vw, 46px) clamp(28px, 3.6vw, 56px); }
.svc__title { font-size: clamp(28px, 3.4vw, 50px); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.svc__n { font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; opacity: .45; }
.svc__body { position: static; height: 0; overflow: hidden; }
.svc__inner { position: relative; z-index: 2; max-width: min(520px, 48%); min-height: clamp(250px, 25vw, 340px); padding: 0 clamp(28px, 3.6vw, 56px) clamp(30px, 3.6vw, 52px); }
.svc__desc { font-size: 17px; line-height: 1.6; opacity: .86; }
.svc__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 16px; font-weight: 500; }
.svc__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); color: var(--ink); transition: transform .5s var(--ease); }
.svc__ico .i { width: 16px; height: 16px; }
.svc__cta:hover .svc__ico { transform: rotate(45deg) scale(1.08); }
/* the illustration sits on the right of an open card */
.svc__art { --t: clamp(92px, 8.6vw, 124px); --b: clamp(24px, 3vw, 44px); position: absolute; z-index: 1; top: var(--t); right: clamp(24px, 3vw, 48px); height: calc(100% - var(--t) - var(--b)); width: auto; max-width: 46%; aspect-ratio: 4 / 3; opacity: 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }

/* ---------- Service illustrations (each one shows the service at work) ---------- */
.viz { overflow: hidden; container-type: inline-size; isolation: isolate; border-radius: 22px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4cqw); } }
@keyframes pop { 0%, 48% { transform: scale(0); } 56%, 90% { transform: scale(1); } 98%, 100% { transform: scale(0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes drift { from { transform: translateX(-4%); } to { transform: translateX(16%); } }
/* UX/UI: a screen goes from wireframe to finished UI, then gets tapped */
.viz--ux { background: var(--teal-50); }
.viz--ux::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 143, 156, .26) 1px, transparent 1.5px); background-size: 3cqw 3cqw; }
.ux-phone { position: absolute; left: 50%; top: 5.5cqw; width: 31cqw; height: 64cqw; transform: translateX(-50%); display: flex; flex-direction: column; gap: 1.8cqw; padding: 6.4cqw 2.6cqw 2.6cqw; border-radius: 5.4cqw; background: var(--white); box-shadow: 0 0 0 .7cqw var(--white), 0 0 0 1cqw rgba(25, 35, 42, .08), 0 3cqw 7cqw -2cqw rgba(0, 90, 98, .38); }
.ux-phone::before { content: ""; position: absolute; top: 2cqw; left: 50%; width: 8cqw; height: 1.8cqw; margin-left: -4cqw; border-radius: 2cqw; background: var(--ink); }
.ux-b { position: relative; flex: none; border-radius: 1.8cqw; }
.ux-b::before, .ux-b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ux-b::before { border: .32cqw dashed rgba(25, 35, 42, .3); opacity: 0; animation: uxWire 7s var(--ease) infinite; animation-delay: calc(var(--d) * .16s); }
.ux-b::after { animation: uxFill 7s var(--ease) infinite; animation-delay: calc(var(--d) * .16s); }
@keyframes uxWire { 0%, 14% { opacity: 1; } 24%, 84% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes uxFill { 0%, 14% { opacity: 0; transform: scale(.94); } 24%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: scale(.97); } }
.ux-b--title { height: 4.4cqw; }
.ux-b--title::after { background: linear-gradient(var(--ink), var(--ink)) 0 0 / 62% 2cqw no-repeat, linear-gradient(#BCC5C9, #BCC5C9) 0 100% / 40% 1.1cqw no-repeat; border-radius: .6cqw; }
.ux-b--hero { height: 19cqw; }
.ux-b--hero::after { background: linear-gradient(150deg, var(--teal-300), var(--teal)); }
.ux-cloud { position: absolute; z-index: 2; width: 60%; left: 20%; top: 24%; color: var(--white); animation: uxFill 7s var(--ease) infinite; animation-delay: .25s; }
.ux-b--row { height: 8.4cqw; }
.ux-b--row::after { background: linear-gradient(var(--teal-100), var(--teal-100)) 1.4cqw 50% / 5.6cqw 5.6cqw no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) 8.8cqw 2.2cqw / 12cqw 1.3cqw no-repeat, linear-gradient(#C7D0D3, #C7D0D3) 8.8cqw 5cqw / 8cqw 1cqw no-repeat, var(--white); box-shadow: 0 .8cqw 2.4cqw -.6cqw rgba(0, 90, 98, .24); }
.ux-b--row + .ux-b--row::after { background: linear-gradient(var(--paper), var(--paper)) 1.4cqw 50% / 5.6cqw 5.6cqw no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) 8.8cqw 2.2cqw / 10cqw 1.3cqw no-repeat, linear-gradient(#C7D0D3, #C7D0D3) 8.8cqw 5cqw / 11cqw 1cqw no-repeat, var(--white); }
.ux-b--cta { height: 6.4cqw; margin-top: auto; overflow: hidden; border-radius: 5cqw; }
.ux-b--cta::after { content: "Book now"; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 700 2.2cqw var(--font); }
.ux-ripple { position: absolute; z-index: 2; left: 50%; top: 50%; width: 6cqw; height: 6cqw; margin: -3cqw 0 0 -3cqw; border-radius: 50%; background: rgba(0, 143, 156, .7); opacity: 0; animation: uxRipple 7s var(--ease) infinite; }
@keyframes uxRipple { 0%, 60% { opacity: 0; transform: scale(.2); } 62% { opacity: .9; transform: scale(.4); } 74%, 100% { opacity: 0; transform: scale(4); } }
.ux-cursor { position: absolute; z-index: 3; left: 15cqw; top: 58cqw; width: 4.6cqw; color: var(--ink); filter: drop-shadow(0 .6cqw .8cqw rgba(0, 0, 0, .2)); animation: uxCursor 7s var(--ease) infinite; }
.ux-cursor svg { width: 100%; height: auto; fill: currentColor; stroke: var(--white); stroke-width: 1.4; }
@keyframes uxCursor { 0%, 30% { transform: translate(26cqw, 6cqw); } 56% { transform: translate(0, 0) scale(1); } 61% { transform: translate(0, 0) scale(.82); } 66%, 84% { transform: translate(0, 0) scale(1); } 100% { transform: translate(26cqw, 6cqw); } }
.ux-chip { position: absolute; display: flex; align-items: center; gap: 1.2cqw; padding: 1.3cqw 2.2cqw; border-radius: 5cqw; background: var(--white); box-shadow: 0 1.2cqw 3cqw -1.2cqw rgba(0, 90, 98, .35); font: 600 2.2cqw var(--font); color: var(--ink-2); animation: bob 5s ease-in-out infinite; }
.ux-chip i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--teal); }
.ux-chip--a { left: 5cqw; top: 14cqw; }
.ux-chip--b { right: 4.5cqw; top: 30cqw; animation-delay: -1.6s; }
.ux-chip--c { left: 6cqw; bottom: 12cqw; animation-delay: -3.2s; }
/* Web: code types on the left, the page appears on the right */
.viz--web { background: linear-gradient(160deg, var(--paper), #E9E3D6); }
.web-win { position: absolute; left: 6cqw; right: 6cqw; top: 6.5cqw; bottom: 11cqw; display: flex; flex-direction: column; overflow: hidden; border-radius: 2.6cqw; background: var(--white); box-shadow: 0 3cqw 8cqw -3cqw rgba(25, 35, 42, .4); }
.web-bar { flex: none; display: flex; align-items: center; gap: 1cqw; height: 6cqw; padding: 0 2.2cqw; border-bottom: 1px solid var(--line); }
.web-bar i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--line-2); }
.web-bar i:first-child { background: var(--teal); }
.web-url { margin: 0 auto; padding: .6cqw 3.2cqw; border-radius: 2cqw; background: var(--paper); font: 500 1.8cqw var(--code); color: var(--muted); }
.web-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 40% 1fr; }
.web-code { display: flex; flex-direction: column; gap: 1.5cqw; padding: 2.8cqw 2.4cqw; background: var(--ink); }
.web-code span { display: block; flex: none; width: var(--w); height: 1.2cqw; margin-left: var(--x, 0); border-radius: 1cqw; background: var(--c, var(--teal)); animation: typeLine 6s steps(7) infinite both; animation-delay: calc(var(--d) * .2s); }
@keyframes typeLine { 0% { width: 0; } 22%, 84% { width: var(--w); } 94%, 100% { width: 0; } }
.web-prev { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqw; padding: 2.4cqw 2.8cqw 2.8cqw; color: var(--ink); }
.web-nav { display: flex; align-items: center; gap: 1.2cqw; width: 100%; margin-bottom: .6cqw; }
.web-nav b { width: 6cqw; height: 1.6cqw; border-radius: 1cqw; background: var(--teal); }
.web-nav i { width: 3.4cqw; height: 1cqw; border-radius: 1cqw; background: #D3D9DB; }
.web-nav i:first-of-type { margin-left: auto; }
.web-h, .web-sub, .web-btn, .web-img { animation: webIn 6s var(--ease) infinite both; }
.web-h { margin: 0; font: italic 700 4.6cqw/1.05 var(--font); letter-spacing: -.02em; }
.web-sub { margin: 0; font: 500 1.9cqw/1.3 var(--font); color: var(--muted); animation-delay: .12s; }
.web-btn { padding: 1cqw 2.2cqw; border-radius: 3cqw; background: var(--ink); color: var(--paper); font: 700 1.8cqw var(--font); animation-delay: .24s; }
.web-img { position: relative; align-self: stretch; flex: 1; overflow: hidden; border-radius: 1.8cqw; background: linear-gradient(160deg, var(--teal-200), var(--teal)); animation-delay: .36s; }
.web-img svg { position: absolute; left: 14%; top: 22%; width: 52%; color: var(--white); animation: drift 6s ease-in-out infinite alternate; }
@keyframes webIn { 0%, 30% { opacity: 0; translate: 0 1.6cqw; } 42%, 86% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; } }
.web-badges { position: absolute; left: 6cqw; bottom: 3cqw; display: flex; gap: 1.4cqw; }
.web-badges span { display: inline-flex; align-items: center; gap: .9cqw; padding: 1cqw 2cqw 1cqw 1.2cqw; border-radius: 4cqw; background: var(--white); box-shadow: 0 1cqw 2.4cqw -1cqw rgba(25, 35, 42, .35); color: var(--ink); font: 700 1.9cqw var(--font); animation: pop 6s var(--ease) infinite both; animation-delay: .1s; }
.web-badges span + span { animation-delay: .25s; }
.web-badges svg { width: 2.8cqw; height: 2.8cqw; padding: .5cqw; border-radius: 50%; background: var(--teal); color: var(--white); }
/* Mobile: a swipeable app with a confirmation toast */
.viz--mobile { background: linear-gradient(150deg, var(--teal-300), var(--teal) 55%, var(--teal-700)); }
.viz--mobile::before { content: ""; position: absolute; width: 80cqw; height: 80cqw; left: 34cqw; top: -26cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .26), transparent); }
.mb-badge { position: absolute; left: 4cqw; top: 4cqw; z-index: 3; padding: 1cqw 2.2cqw; border-radius: 3cqw; background: var(--ink); color: var(--paper); font: 700 1.9cqw var(--font); letter-spacing: .04em; }
.mb-phone { position: absolute; top: 9cqw; width: 28cqw; height: 58cqw; padding: 1cqw; border-radius: 5.2cqw; background: var(--ink); box-shadow: 0 3cqw 8cqw -2cqw rgba(0, 0, 0, .45); }
.mb-phone--back { left: 19cqw; transform: rotate(-9deg) translateY(4cqw); }
.mb-phone--front { left: 47cqw; transform: rotate(5deg); }
.mb-screen { position: relative; height: 100%; overflow: hidden; padding: 5.4cqw 2.2cqw 2.2cqw; border-radius: 4.3cqw; background: var(--paper); color: var(--ink); }
.mb-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.4cqw; font: italic 700 2.7cqw var(--font); }
.mb-top i { width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--teal-100); }
.mb-row { height: 6cqw; margin-bottom: 1.6cqw; border-radius: 1.6cqw; background: linear-gradient(90deg, #E6E8E6 25%, #F8F7F3 50%, #E6E8E6 75%) 0 0 / 200% 100%; animation: shimmer 1.8s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.mb-stack { position: relative; height: 29cqw; margin-top: 4cqw; }
.mb-card { position: absolute; inset: 0; border-radius: 3cqw; box-shadow: 0 1.2cqw 3cqw -1cqw rgba(0, 90, 98, .35); }
.mb-card.c1 { z-index: 3; overflow: hidden; background: linear-gradient(160deg, var(--teal-300), var(--teal)); animation: swipe 4.6s var(--ease) infinite; }
.mb-card.c1 svg { position: absolute; width: 64%; left: 18%; top: 16%; color: var(--white); }
.mb-card.c1 span { position: absolute; left: 2.2cqw; bottom: 2cqw; color: var(--white); font: 700 2cqw var(--font); }
.mb-card.c1 em { position: absolute; right: 2cqw; top: 1.6cqw; color: var(--white); font-style: normal; font-size: 2.8cqw; animation: like 4.6s var(--ease) infinite; }
.mb-card.c2 { z-index: 2; background: var(--teal-200); transform: translateY(-2cqw) scale(.93); animation: deck 4.6s var(--ease) infinite; }
.mb-card.c3 { z-index: 1; background: var(--ink); transform: translateY(-4cqw) scale(.86); }
@keyframes swipe { 0%, 38% { transform: none; opacity: 1; } 56% { transform: translateX(120%) rotate(16deg); opacity: 0; } 57% { transform: translateY(-2cqw) scale(.93); opacity: 0; } 72%, 100% { transform: none; opacity: 1; } }
@keyframes deck { 0%, 38% { transform: translateY(-2cqw) scale(.93); } 56% { transform: none; } 57%, 100% { transform: translateY(-2cqw) scale(.93); } }
@keyframes like { 0%, 36% { transform: scale(1); } 44% { transform: scale(1.6); } 52%, 100% { transform: scale(1); } }
.mb-lines { display: flex; flex-direction: column; gap: 1.2cqw; margin-top: 3cqw; }
.mb-lines i { height: 1.4cqw; width: 70%; border-radius: 1cqw; background: var(--ink); opacity: .85; }
.mb-lines i + i { width: 46%; opacity: .25; }
.mb-tabs { position: absolute; left: 2.2cqw; right: 2.2cqw; bottom: 2.2cqw; display: flex; align-items: center; justify-content: space-around; height: 6.4cqw; border-radius: 3.2cqw; background: var(--white); box-shadow: 0 .8cqw 2.4cqw -1cqw rgba(0, 90, 98, .3); }
.mb-tabs i { width: 2.4cqw; height: 2.4cqw; border-radius: .8cqw; background: #CBD3D5; }
.mb-tabs i.on { background: var(--teal); }
.mb-toast { position: absolute; z-index: 5; left: 1.6cqw; right: 1.6cqw; top: 1.4cqw; display: flex; align-items: center; gap: 1cqw; padding: 1.3cqw 1.6cqw; border-radius: 2.4cqw; background: var(--ink); color: var(--paper); font: 700 1.65cqw var(--font); white-space: nowrap; animation: toast 4.6s var(--ease) infinite; }
.mb-toast svg { width: 3cqw; flex: none; color: var(--teal-300); }
@keyframes toast { 0%, 58% { transform: translateY(-170%); opacity: 0; } 66%, 92% { transform: none; opacity: 1; } 100% { transform: translateY(-170%); opacity: 0; } }
/* Graphic: a logo is constructed from circles, then colours and type pop in */
.viz--graphic { background: var(--white); color: var(--ink); }
.viz--graphic::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(25, 35, 42, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 35, 42, .06) 1px, transparent 1px); background-size: 5cqw 5cqw; }
.gr-label { position: absolute; left: 4cqw; top: 4cqw; font: 500 1.9cqw var(--code); color: var(--muted); }
.gr-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.gr-guides circle, .gr-guides line { fill: none; stroke: var(--teal); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: grGuide 8s var(--ease) infinite; }
.gr-guides circle:nth-child(2) { animation-delay: .12s; }
.gr-guides circle:nth-child(3) { animation-delay: .24s; }
@keyframes grGuide { 0%, 3% { opacity: 0; transform: scale(.5); } 16%, 62% { opacity: .65; transform: none; } 74%, 100% { opacity: 0; transform: none; } }
.gr-shape { fill: var(--teal); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: grDraw 8s var(--ease) infinite; }
@keyframes grDraw { 0%, 12% { stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; } 38% { stroke-dashoffset: 0; fill-opacity: 0; } 52%, 86% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 1; } 96%, 100% { stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 0; } }
.gr-handles line { stroke: var(--ink); stroke-width: 1; }
.gr-handles rect { fill: var(--white); stroke: var(--ink); stroke-width: 1.2; }
.gr-handles circle { fill: var(--ink); }
.gr-handles { opacity: 0; animation: grHandles 8s var(--ease) infinite; }
@keyframes grHandles { 0%, 34% { opacity: 0; } 42%, 60% { opacity: 1; } 70%, 100% { opacity: 0; } }
.gr-sw { position: absolute; left: 4cqw; bottom: 4.5cqw; display: flex; gap: 1.4cqw; }
.gr-sw i { width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: var(--teal); box-shadow: 0 .6cqw 1.6cqw -.6cqw rgba(0, 0, 0, .3); animation: pop 8s var(--ease) infinite both; }
.gr-sw i:nth-child(2) { background: var(--ink); animation-delay: .1s; }
.gr-sw i:nth-child(3) { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); animation-delay: .2s; }
.gr-type { position: absolute; right: 4.5cqw; bottom: 3.5cqw; text-align: right; font: italic 700 11cqw/0.9 var(--font); letter-spacing: -.03em; }
.gr-type small { display: block; margin-top: 1cqw; font: 500 1.7cqw var(--code); font-style: normal; letter-spacing: 0; color: var(--muted); }
/* AI animation: a prompt is typed, the frame resolves from noise and plays */
.viz--ai { display: flex; flex-direction: column; gap: 2.4cqw; padding: 3.6cqw; background: #10181D; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ai-prompt { display: flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 1.6cqw 1.6cqw 2.4cqw; border-radius: 3cqw; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font: 400 2.05cqw var(--code); }
.ai-spark { color: var(--teal-300); }
.ai-text { display: inline-block; overflow: hidden; white-space: nowrap; width: 44ch; animation: aiType 9s steps(44) infinite both; }
@keyframes aiType { 0% { width: 0; } 22%, 92% { width: 44ch; } 100% { width: 0; } }
.ai-caret { width: .25cqw; height: 2.8cqw; margin-left: -1cqw; background: var(--teal-300); animation: blink 1s steps(1) infinite; }
.ai-go { margin-left: auto; padding: .9cqw 2cqw; border-radius: 2cqw; background: var(--teal); color: var(--white); font: 700 1.8cqw var(--font); white-space: nowrap; }
.ai-frame { position: relative; flex: 1; overflow: hidden; border-radius: 2.4cqw; }
.ai-scene { position: absolute; inset: 0; background: linear-gradient(180deg, #004950 0%, var(--teal) 46%, var(--teal-200) 80%, var(--paper) 100%); animation: aiFocus 9s var(--ease) infinite; }
@keyframes aiFocus { 0%, 22% { filter: blur(2.4cqw) saturate(.3); } 46%, 100% { filter: blur(0) saturate(1); } }
.ai-sun { position: absolute; left: 58%; top: 44%; width: 16cqw; height: 16cqw; border-radius: 50%; background: radial-gradient(circle, var(--white), rgba(246, 243, 236, .7) 50%, transparent 70%); }
.ai-cloud { position: absolute; left: -32cqw; top: 12%; width: 30cqw; color: var(--white); animation: aiDrift 10s linear infinite; }
.ai-cloud--2 { top: 36%; width: 17cqw; opacity: .75; animation-duration: 14s; animation-delay: -6s; }
@keyframes aiDrift { to { transform: translateX(130cqw); } }
.ai-city { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: radial-gradient(circle, var(--teal-200) .22cqw, transparent .34cqw) 0 0 / 2.2cqw 2.6cqw, var(--ink); clip-path: polygon(0 100%, 0 55%, 6% 55%, 6% 30%, 12% 30%, 12% 48%, 17% 48%, 17% 12%, 23% 12%, 23% 40%, 29% 40%, 29% 25%, 33% 25%, 33% 50%, 40% 50%, 40% 8%, 44% 8%, 44% 0, 47% 0, 47% 8%, 50% 8%, 50% 45%, 56% 45%, 56% 22%, 62% 22%, 62% 52%, 68% 52%, 68% 30%, 73% 30%, 73% 15%, 78% 15%, 78% 42%, 84% 42%, 84% 26%, 90% 26%, 90% 50%, 95% 50%, 95% 35%, 100% 35%, 100% 100%); }
.ai-noise { position: absolute; inset: 0; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .55 0 0 0 0 .58 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 22cqw; animation: aiNoise 9s var(--ease) infinite, aiJitter .24s steps(3) infinite; }
@keyframes aiNoise { 0%, 20% { opacity: .95; } 44%, 100% { opacity: 0; } }
@keyframes aiJitter { 33% { background-position: 7cqw 3cqw; } 66% { background-position: -4cqw 9cqw; } }
.ai-badge { position: absolute; left: 1.8cqw; top: 1.8cqw; display: flex; align-items: center; gap: 1cqw; padding: .8cqw 1.6cqw; border-radius: 2cqw; background: rgba(25, 35, 42, .7); font: 500 1.65cqw var(--code); color: var(--white); }
.ai-badge i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--teal-300); animation: blink 1.2s steps(1) infinite; }
.ai-strip { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1cqw; height: 6.6cqw; flex: none; }
.ai-strip i { border-radius: 1cqw; background: linear-gradient(180deg, #004950, var(--teal) 55%, var(--teal-200)); opacity: .55; }
.ai-strip i:nth-child(even) { background: linear-gradient(180deg, var(--teal-700), var(--teal-300) 60%, var(--paper)); }
.ai-head { position: absolute; top: -1cqw; bottom: -1cqw; left: 0; width: .45cqw; border-radius: 1cqw; background: var(--paper); box-shadow: 0 0 1.6cqw var(--teal-300); animation: aiHead 9s linear infinite; }
@keyframes aiHead { 0%, 24% { left: 0; } 100% { left: 100%; } }


/* =========================================================
   WORK — ink panel, two staggered columns
   ========================================================= */
.work { margin: 0 clamp(8px, 1vw, 16px); padding: clamp(96px, 10vw, 160px) 0; border-radius: var(--r-lg); background: var(--ink); color: var(--paper); }
.work__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.work__title { margin-top: 20px; font-size: clamp(56px, 9vw, 150px); font-weight: 700; letter-spacing: -.035em; line-height: .98; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(246, 243, 236, .25); color: var(--paper); font-size: 15px; font-weight: 500; transition: background-color .3s, color .3s, box-shadow .3s; }
.filter:hover { box-shadow: inset 0 0 0 1.5px var(--paper); }
.filter sup { font-size: 11px; font-weight: 700; opacity: .6; }
.filter[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: none; }
.work__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); margin-top: clamp(56px, 7vw, 100px); }
.work__col { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 96px); }
.work__col + .work__col { padding-top: clamp(80px, 14vw, 240px); }
.wcard__btn { display: block; width: 100%; text-align: left; border-radius: var(--r-md); }
.wcard__media { position: relative; aspect-ratio: var(--ar, 4 / 5); overflow: hidden; border-radius: var(--r-md); background: var(--ink-3); transform: translateZ(0); }
.wcard__media > .art, .wcard__media > img, .wcard__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .8s; }
.wcard:hover .wcard__media > * { transform: scale(1.04); }
/* brand-tinted images until hover (Lusion duotone) */
.wcard__media.is-tinted img, .wcard__media.is-tinted video { filter: grayscale(1) contrast(1.08); }
.wcard__media.is-tinted::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--teal); mix-blend-mode: color; transition: opacity .8s; pointer-events: none; }
.wcard:hover .wcard__media.is-tinted img, .wcard:hover .wcard__media.is-tinted video { filter: none; }
.wcard:hover .wcard__media.is-tinted::after { opacity: 0; }
.wcard__flag { position: absolute; left: 18px; top: 18px; z-index: 2; padding: 6px 12px; border-radius: 99px; background: var(--paper); color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wcard__title { margin-top: 22px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -.015em; }
.wcard__story { margin-top: 4px; font-size: 16px; color: var(--muted-d); }
.work__note { margin-top: clamp(64px, 8vw, 120px); text-align: center; color: var(--muted-d); }
.work__note a { margin-left: 6px; font-weight: 700; color: var(--paper); text-decoration: underline; text-decoration-color: var(--teal-300); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* generated placeholder covers — brand palette only */
.art { overflow: hidden; container-type: inline-size; }
.art--ux { background: var(--teal-50); }
.art--ux .a1, .art--ux .a2, .art--ux .a3 { position: absolute; border-radius: 3cqw; background: var(--white); box-shadow: 0 3cqw 6cqw -3cqw rgba(0, 90, 98, .45); }
.art--ux .a1 { left: 10%; top: 18%; width: 56%; height: 52%; background: linear-gradient(var(--ink), var(--ink)) 6cqw 6cqw / 40% 3cqw no-repeat, linear-gradient(#C7D0D3, #C7D0D3) 6cqw 12cqw / 60% 2cqw no-repeat, linear-gradient(160deg, var(--teal-300), var(--teal)) 6cqw 19cqw / calc(100% - 12cqw) 40% no-repeat, var(--white); }
.art--ux .a2 { right: 8%; top: 40%; width: 40%; height: 26%; background: radial-gradient(circle closest-side, var(--white) 0 52%, transparent 53% 98%, var(--white) 100%) 50% 50% / 16cqw 16cqw no-repeat, conic-gradient(var(--teal) 0 68%, var(--teal-100) 0) 50% 50% / 16cqw 16cqw no-repeat, var(--white); }
.art--ux .a3 { left: 18%; bottom: 14%; width: 36%; height: 8%; border-radius: 99px; background: var(--ink); }
.art--web { background: var(--teal); }
.art--web .w1 { position: absolute; left: 10%; right: 10%; top: 16%; bottom: -6%; border-radius: 2.4cqw 2.4cqw 0 0; background: linear-gradient(var(--paper), var(--paper)) 0 0 / 100% 6cqw no-repeat, linear-gradient(var(--ink), var(--ink)) 7cqw 14cqw / 56% 4cqw no-repeat, linear-gradient(var(--ink), var(--ink)) 7cqw 20cqw / 36% 4cqw no-repeat, linear-gradient(var(--teal), var(--teal)) 7cqw 29cqw / 22% 5cqw no-repeat, linear-gradient(160deg, var(--teal-200), var(--teal)) 7cqw 40cqw / calc(100% - 14cqw) 60% no-repeat, var(--white); }
.art--mobile { background: var(--paper-2); }
.art--mobile .m1, .art--mobile .m2 { position: absolute; top: 16%; width: 30%; aspect-ratio: 9 / 19; padding: 1.3cqw; border-radius: 5.5cqw; background: var(--ink); }
.art--mobile .m1 { left: 18%; transform: rotate(-8deg); }
.art--mobile .m2 { left: 50%; transform: rotate(6deg) translateY(4%); }
.art--mobile .m1::after, .art--mobile .m2::after { content: ""; display: block; height: 100%; border-radius: 4.4cqw; background: linear-gradient(170deg, var(--teal-300), var(--teal) 70%); }
.art--mobile .m2::after { background: linear-gradient(var(--teal), var(--teal)) 3cqw 30% / 60% 22% no-repeat, linear-gradient(var(--paper), var(--paper)) 3cqw 60% / 72% 8% no-repeat, linear-gradient(var(--paper), var(--paper)) 3cqw 72% / 50% 8% no-repeat, var(--ink); }
.art--brand { background: var(--paper); color: var(--teal); }
.art--brand svg { position: absolute; left: 50%; top: 44%; width: 60%; transform: translate(-50%, -50%); }
.art--brand .sw { position: absolute; left: 8%; bottom: 8%; display: flex; gap: 2cqw; }
.art--brand .sw i { width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--teal); }
.art--brand .sw i:nth-child(2) { background: var(--ink); }
.art--brand .sw i:nth-child(3) { background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); }
.art--brand b { position: absolute; right: 8%; bottom: 6%; color: var(--ink); font: italic 700 12cqw/1 var(--font); }
.art--ai { background: radial-gradient(circle at 70% 26%, rgba(79, 183, 192, .55), transparent 38%), radial-gradient(circle at 26% 76%, rgba(0, 143, 156, .85), transparent 52%), #10181D; color: var(--white); }
.art--ai svg { position: absolute; left: 16%; top: 34%; width: 58%; filter: drop-shadow(0 0 5cqw rgba(79, 183, 192, .6)); }
.art--ai span { position: absolute; color: var(--teal-300); font-size: 8cqw; }
.art--ai span:nth-of-type(1) { left: 72%; top: 18%; }
.art--ai span:nth-of-type(2) { left: 82%; top: 62%; font-size: 5cqw; }
.art--social { background: var(--teal-100); }
.art--social i { position: absolute; top: 24%; width: 34%; aspect-ratio: 4 / 5; border-radius: 3cqw; box-shadow: 0 3cqw 6cqw -3cqw rgba(25, 35, 42, .45); }
.art--social i:nth-child(1) { left: 8%; background: var(--teal); transform: rotate(-7deg); }
.art--social i:nth-child(2) { left: 33%; top: 18%; z-index: 2; background: var(--ink); transform: rotate(2deg); }
.art--social i:nth-child(3) { left: 58%; background: var(--paper); transform: rotate(8deg); }
.art--social i:nth-child(2)::after { content: "Ask. Explore."; position: absolute; left: 10%; right: 10%; bottom: 10%; color: var(--paper); font: italic 700 4.4cqw/1.1 var(--font); }

/* =========================================================
   TRUSTED BY OUR CLIENTS — Cuberto: a messy pile that deals into a grid
   ========================================================= */
.trust { padding: clamp(110px, 12vw, 190px) 0 clamp(70px, 8vw, 120px); overflow: hidden; }
.trust__title { text-align: center; font-size: clamp(44px, 6.4vw, 104px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.trust__deck { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; max-width: 1120px; margin: clamp(48px, 6vw, 80px) auto 0; }
.tcard { grid-column: span 2; position: relative; }
.tcard:nth-child(4) { grid-column: 2 / span 2; }
.tcard:nth-child(5) { grid-column: 4 / span 2; }
.tcard__in { position: relative; display: flex; flex-direction: column; height: 100%; min-height: clamp(300px, 26vw, 360px); padding: clamp(24px, 2.6vw, 38px); border-radius: 6px; background: var(--teal-50); box-shadow: 0 1px 0 rgba(25, 35, 42, .04), 0 24px 44px -26px rgba(25, 35, 42, .4); cursor: grab; user-select: none; -webkit-user-select: none; }
.tcard:nth-child(even) .tcard__in { background: var(--paper-2); }
.tcard__in:active { cursor: grabbing; }
.tcard__q { width: 34px; height: 34px; color: var(--teal-200); }
.tcard:nth-child(even) .tcard__q { color: rgba(0, 143, 156, .45); }
.tcard__quote { margin-top: 18px; font-size: 17px; line-height: 1.55; }
.tcard__by { margin-top: auto; padding-top: 22px; }
.tcard__by::before { content: ""; display: block; width: 44px; height: 1px; margin-bottom: 16px; background: var(--line-2); }
.tcard__by img { max-height: 30px; width: auto; margin-bottom: 8px; }
.tcard__name { font-weight: 700; }
.tcard__role { font-size: 14px; color: var(--muted); }
.tcard__flag { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 99px; background: var(--white); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.trust__hint { margin-top: 40px; text-align: center; font-size: 14px; color: var(--muted); }

/* =========================================================
   PROCESS — a cloud travels from question to launch
   ========================================================= */
.journey { position: relative; }
/* the pinned stage is exactly one screen tall; the bottom padding keeps it clear of the floating dock */
.journey__pin { height: 100vh; height: 100svh; padding: clamp(16px, 4vh, 48px) 0 92px; overflow: hidden; }
.journey__fit { display: flex; flex-direction: column; gap: clamp(10px, 2.4vh, 32px); transform-origin: 50% 0; }
.journey__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; }
.journey__title { margin-top: 12px; font-size: clamp(36px, min(6vw, 8.5vh), 96px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.journey__hint { font-size: 15px; color: var(--muted); }
.journey__map { position: relative; width: 100%; max-width: min(1400px, calc(130vh + 80px)); margin: 0 auto; padding: 0 clamp(22px, 2.4vw, 40px); }
.journey__svg { display: block; width: 100%; height: auto; overflow: visible; }
.journey__track { fill: none; stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 12; }
.journey__line { fill: none; stroke: var(--teal); stroke-width: 5; stroke-linecap: round; }
.journey__dots circle { fill: var(--paper); stroke: #BFC6C9; stroke-width: 3; transition: fill .4s, stroke .4s; }
.journey__dots circle.is-done { fill: var(--teal); stroke: var(--teal); }
.journey__cloud { color: var(--teal); filter: drop-shadow(0 6px 10px rgba(0, 90, 98, .35)); }
.journey__cloud use { fill: currentColor; }
.journey__stops { position: absolute; inset: 0 clamp(22px, 2.4vw, 40px); pointer-events: none; }
.journey__stop { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; border-radius: 14px; color: var(--muted); font-size: clamp(14px, 1.3vw, 18px); font-style: italic; font-weight: 700; white-space: nowrap; pointer-events: auto; transform: translate(-50%, 18px); transition: color .3s, background-color .3s, box-shadow .3s; }
.journey__stop.is-up { transform: translate(-50%, calc(-100% - 18px)); }
.journey__stop:first-child { transform: translate(-28%, 18px); }
.journey__stop:first-child.is-up { transform: translate(-28%, calc(-100% - 18px)); }
.journey__stop:last-child { transform: translate(-72%, 18px); }
.journey__stop:last-child.is-up { transform: translate(-72%, calc(-100% - 18px)); }
.journey__stop b { font-size: 11px; font-style: normal; letter-spacing: .12em; opacity: .8; }
.journey__stop:hover { color: var(--ink); }
.journey__stop.is-active { background: var(--white); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(0, 90, 98, .45); }
.journey__stop.is-active b { color: var(--teal); }
.journey__panels { display: grid; }
.jp { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(16px, min(2.6vw, 3.4vh), 36px); border-radius: var(--r-md); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .45s, transform .6s var(--ease), visibility 0s .45s; }
.jp.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s, transform .6s var(--ease), visibility 0s; }
.jp__n { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--teal); }
.jp h3 { margin: 6px 0 10px; font-size: clamp(30px, 3.2vw, 48px); font-style: italic; font-weight: 700; letter-spacing: -.01em; }
.jp p { max-width: 30em; color: var(--muted); }
.jp__art { position: relative; height: clamp(96px, min(15vw, 20vh), 200px); overflow: hidden; border-radius: 18px; background: var(--paper); }
/* Ask: questions bubble up */
.jp__art--ask .bubble { position: absolute; bottom: -40px; padding: 8px 14px; border-radius: 16px 16px 16px 4px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 700; font-style: italic; white-space: nowrap; }
.jp__art--ask .b1 { left: 12%; background: var(--teal); font-size: 22px; }
.jp__art--ask .b2 { left: 34%; }
.jp__art--ask .b3 { left: 58%; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.jp__art--ask .b4 { left: 30%; background: var(--teal); }
.jp.is-active .jp__art--ask .bubble { animation: rise 4.2s ease-in infinite; }
.jp__art--ask .b2 { animation-delay: -1s !important; } .jp__art--ask .b3 { animation-delay: -2.1s !important; } .jp__art--ask .b4 { animation-delay: -3.1s !important; }
@keyframes rise { 0% { transform: translateY(0) scale(.8); opacity: 0; } 15% { opacity: 1; transform: translateY(-40px) scale(1); } 100% { transform: translateY(-260px) scale(1); opacity: 0; } }
/* Shape: wireframe draws in */
.jp__art--shape, .jp__art--design { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 22% 1fr 26%; gap: 8px; padding: 16px; }
.jp__art--shape i, .jp__art--design i { border-radius: 8px; }
.jp__art--shape i { border: 2px dashed #B3BCC0; }
.jp__art--shape i:nth-child(1), .jp__art--design i:nth-child(1) { grid-column: 1 / -1; }
.jp__art--shape i:nth-child(2), .jp__art--design i:nth-child(2) { grid-column: 1 / 3; }
.jp__art--shape i:nth-child(5), .jp__art--design i:nth-child(5) { grid-column: 2 / -1; }
.jp.is-active .jp__art--shape i { animation: popIn .6s var(--ease) both; }
.jp__art--shape i:nth-child(2) { animation-delay: .1s !important; } .jp__art--shape i:nth-child(3) { animation-delay: .2s !important; } .jp__art--shape i:nth-child(4) { animation-delay: .3s !important; } .jp__art--shape i:nth-child(5) { animation-delay: .4s !important; }
@keyframes popIn { from { opacity: 0; transform: scale(.85); } }
/* Design: colour floods in */
.jp__art--design i { background: var(--paper-2); }
.jp.is-active .jp__art--design i { animation: fillIn .7s var(--ease) both; }
.jp__art--design i:nth-child(1) { --c: var(--ink); } .jp__art--design i:nth-child(2) { --c: var(--teal); animation-delay: .15s !important; } .jp__art--design i:nth-child(3) { --c: var(--teal-200); animation-delay: .3s !important; } .jp__art--design i:nth-child(4) { --c: var(--white); animation-delay: .45s !important; } .jp__art--design i:nth-child(5) { --c: var(--teal-300); animation-delay: .6s !important; }
@keyframes fillIn { from { background: var(--paper-2); } to { background: var(--c); } }
.jp__art--design i { background: var(--c); }
.jp__art--design .sw { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; }
.jp__art--design .sw b { width: 18px; height: 18px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px var(--white); }
.jp__art--design .sw b:nth-child(2) { background: var(--ink); } .jp__art--design .sw b:nth-child(3) { background: var(--paper); }
/* Build: code types itself */
.jp__art--build { background: var(--ink); }
.jp__art--build code { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.jp__art--build i { display: block; width: var(--w); height: 10px; margin-left: var(--x, 0); border-radius: 6px; background: var(--teal-300); }
.jp__art--build i:nth-child(2n) { background: var(--paper); opacity: .8; }
.jp.is-active .jp__art--build i { animation: type 2.6s steps(6) infinite; }
.jp__art--build i:nth-child(2) { animation-delay: .25s !important; } .jp__art--build i:nth-child(3) { animation-delay: .5s !important; } .jp__art--build i:nth-child(4) { animation-delay: .75s !important; } .jp__art--build i:nth-child(5) { animation-delay: 1s !important; } .jp__art--build i:nth-child(6) { animation-delay: 1.25s !important; }
@keyframes type { 0% { width: 0; } 40%, 100% { width: var(--w); } }
/* Launch: the cloud lifts off */
.jp__art--launch { background: linear-gradient(180deg, #DDF0F1, var(--paper)); }
.jp__art--launch svg { position: absolute; left: 50%; top: 50%; width: 120px; color: var(--teal); transform: translate(-50%, -50%); }
.jp.is-active .jp__art--launch svg { animation: lift 2.4s var(--ease) infinite; }
@keyframes lift { 0% { transform: translate(-50%, 40%); opacity: 0; } 30% { transform: translate(-50%, -50%); opacity: 1; } 80% { transform: translate(-50%, -60%); opacity: 1; } 100% { transform: translate(-50%, -180%); opacity: 0; } }
.jp__art--launch i { position: absolute; bottom: -20px; width: 2px; height: 60px; border-radius: 2px; background: var(--teal-200); }
.jp__art--launch i:nth-of-type(1) { left: 40%; } .jp__art--launch i:nth-of-type(2) { left: 50%; height: 90px; } .jp__art--launch i:nth-of-type(3) { left: 60%; }
.jp.is-active .jp__art--launch i { animation: speed 1s linear infinite; }
@keyframes speed { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-160px); opacity: 0; } }
.jp__art--launch .live { position: absolute; right: 14px; top: 14px; padding: 6px 12px; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; }
.jp.is-active .jp__art--launch .live { animation: popIn .6s .5s var(--ease) both; }

/* =========================================================
   FAQ — Cuberto accordion on ink
   ========================================================= */
.faq { margin: 0 clamp(8px, 1vw, 16px); padding: clamp(96px, 10vw, 160px) 0; border-radius: var(--r-lg); background: var(--ink); color: var(--paper); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq__title { margin-top: 18px; font-size: clamp(64px, 9vw, 150px); font-weight: 700; letter-spacing: -.04em; line-height: .95; }
.faq__list { border-top: 1px solid var(--line-d); }
.faq__item { border-bottom: 1px solid var(--line-d); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; padding: 26px 0; text-align: left; color: var(--paper); font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; transition: color .3s; }
.faq__q:hover { color: var(--teal-300); }
.faq__q i { position: relative; flex: none; width: 20px; height: 20px; transition: transform .5s var(--ease); }
.faq__q i::before, .faq__q i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: currentColor; }
.faq__q i::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] i { transform: rotate(45deg); }
.faq__a { height: 0; overflow: hidden; }
.faq__a > div { max-width: 46em; padding: 0 48px 28px 0; color: #C9D2D6; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding: clamp(80px, 9vw, 140px) 0 clamp(120px, 12vw, 200px); }
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact__intro { position: sticky; top: 120px; }
.contact__title { margin-top: 20px; font-size: clamp(52px, 8vw, 128px); font-style: italic; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.contact__lede { max-width: 26em; margin-top: 24px; font-size: 18px; color: var(--muted); }
.contact__direct { display: flex; flex-direction: column; gap: 18px; margin-top: 40px; }
.contact__direct li { display: flex; flex-direction: column; gap: 4px; }
.contact__direct a { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(19px, 1.8vw, 24px); font-weight: 700; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.brief { position: relative; padding: clamp(24px, 3.2vw, 48px); border-radius: var(--r-md); background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.field { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0 0 26px; padding: 0; border: 0; }
.field > label, .field legend { padding: 0; font-size: 14.5px; font-weight: 700; }
.field legend { margin-bottom: 10px; }
.input { width: 100%; height: 54px; padding: 0 18px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--paper); outline: none; font-size: 16.5px; transition: border-color .25s, box-shadow .25s, background-color .25s; }
.input:focus { border-color: var(--teal); background: var(--white); box-shadow: 0 0 0 4px rgba(0, 143, 156, .15); }
.field--idea > label { font-size: clamp(26px, 2.4vw, 34px); font-style: italic; font-weight: 700; }
.field--idea textarea { height: auto; min-height: 0; padding: 6px 0 12px; border: 0; border-bottom: 2px solid var(--line-2); border-radius: 0; background: transparent; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; line-height: 1.35; resize: none; box-shadow: none; }
.field--idea textarea:focus { border-color: var(--teal); background: transparent; box-shadow: none; }
.field.has-error .input { border-color: #B42318; }
.field__err { font-size: 14px; font-weight: 500; color: #B42318; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: 14.5px; font-weight: 500; transition: background-color .25s, color .25s, box-shadow .25s; }
.chip:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); box-shadow: inset 0 -3px 0 var(--teal); }
.chip input:focus-visible + span { outline: 2.5px solid var(--teal); outline-offset: 2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.brief__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 8px; }
.brief__note { font-size: 14.5px; color: var(--muted); }
.brief__done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 12px 0; }
.brief__done-cloud { width: 120px; color: var(--teal); }
.brief__done h3 { font-size: clamp(26px, 2.6vw, 34px); font-style: italic; font-weight: 700; }
.brief__done p { color: var(--muted); }
.brief__done a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); }
.brief.is-sent > :not(.brief__done) { display: none; }

/* =========================================================
   FOOTER — Cuberto-style glow panel (with nested clouds) + info
   ========================================================= */
.footer { overflow: hidden; background: var(--ink); color: var(--paper); }
.footer__cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(130px, 15vw, 230px) 0 clamp(120px, 13vw, 210px); text-align: center; }
.footer__cta::before { content: ""; position: absolute; z-index: -2; left: 50%; bottom: -30%; width: 120%; height: 110%; background: radial-gradient(closest-side, rgba(0, 143, 156, .55), rgba(0, 143, 156, .12) 55%, transparent); transform: translateX(-50%); }
.footer__bubbles { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fb { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 22px 22px 22px 6px; background: rgba(0, 143, 156, .16); box-shadow: inset 0 0 0 1px rgba(79, 183, 192, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #CFEFF1; font-size: clamp(14px, 1.15vw, 17px); font-style: italic; font-weight: 700; white-space: nowrap; cursor: pointer; pointer-events: auto; will-change: transform, opacity; transition: background-color .3s, color .3s; }
.fb--r { border-radius: 22px 22px 6px 22px; }
.fb--paper { background: var(--paper); box-shadow: none; color: var(--ink); }
.fb--teal { background: var(--teal); box-shadow: none; color: var(--white); }
.fb:hover { background: var(--paper); color: var(--ink); }
.fb::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .6; }
.footer__cta-in { position: relative; }
.footer__big { font-size: clamp(52px, 8vw, 132px); font-style: italic; font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
.footer__big .t { color: var(--teal-300); }
.footer__sub { max-width: 30em; margin: 24px auto 0; font-size: 18px; color: #D0D8DB; }
.footer__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--white); }
.btn--line { padding-right: 26px; color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(246, 243, 236, .4); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--paper); }
.footer__info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; padding-top: clamp(48px, 6vw, 80px); padding-bottom: 48px; border-top: 1px solid var(--line-d); }
.footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer__pill { display: inline-flex; align-items: center; height: 56px; padding: 0 26px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(246, 243, 236, .4); font-size: clamp(17px, 1.6vw, 22px); font-weight: 500; transition: background-color .3s, color .3s; }
.footer__pill:hover { background: var(--paper); color: var(--ink); }
.footer__line { font-size: 14px; color: var(--muted-d); }
.footer__line span { margin-right: 10px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #7F8B91; }
.footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 56px; align-content: start; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; text-align: right; }
.footer__nav .roll { justify-self: end; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding-top: 28px; padding-bottom: 110px; border-top: 1px solid var(--line-d); }
.footer__logo { flex: none; width: 240px; margin-left: -1.4%; color: var(--white); }
.footer__logo svg { width: 100%; height: auto; }
.footer__copy { font-size: 14px; color: var(--muted-d); }
.footer__social { display: flex; gap: 8px; margin-left: auto; }
.footer__social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(246, 243, 236, .08); font-size: 13px; font-weight: 700; transition: background-color .3s; }
.footer__social a:hover { background: var(--teal); }
.footer__up { display: grid; place-items: center; width: 52px; height: 52px; margin-left: auto; border-radius: 50%; background: var(--teal); color: var(--white); transition: transform .5s var(--ease); }
.footer__social:not([hidden]) + .footer__up { margin-left: 0; }
.footer__up:hover { transform: translateY(-4px); }

/* =========================================================
   DRAWER
   ========================================================= */
.drawer { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(25, 35, 42, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.drawer__panel { position: relative; width: min(780px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: clamp(20px, 3.6vw, 52px); background: var(--paper); outline: none; }
.drawer__close { position: sticky; top: 0; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; margin: 0 0 -48px auto; border-radius: 50%; background: var(--ink); color: var(--paper); }
.case__cover { position: relative; aspect-ratio: var(--car, 16 / 10); overflow: hidden; border-radius: 22px; margin-bottom: 30px; background: var(--paper-2); }
.case__cover > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case h2 { margin: 12px 0 16px; font-size: clamp(32px, 4vw, 52px); font-weight: 700; letter-spacing: -.025em; line-height: 1.04; }
.case__summary { font-size: 19px; color: var(--ink-2); }
.case__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 30px 0; padding: 20px 0; border-block: 1px solid var(--line); }
.case__facts dt { margin-bottom: 4px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.case__facts dd { margin: 0; font-weight: 700; }
.case__block { margin-bottom: 26px; }
.case__block h3 { margin-bottom: 6px; font-size: 22px; font-weight: 700; }
.case__block p { color: var(--ink-2); }
.case__gallery { display: grid; gap: 14px; margin: 30px 0; }
.case__gallery img, .case__gallery video { width: 100%; border-radius: 18px; }
.case__status { display: inline-block; margin-left: 8px; padding: 4px 10px; border-radius: 99px; background: var(--teal-50); color: var(--ink); font-size: 11px; vertical-align: 1px; }
.case__facts { row-gap: 20px; }
.case__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 44px; padding: 0; list-style: none; }
.case__stats li { padding: 22px 20px 20px; border-radius: 18px; background: var(--white); }
.case__stats b { display: block; color: var(--teal); font: italic 700 clamp(34px, 4.2vw, 50px)/1 var(--font); letter-spacing: -.03em; }
.case__stats span { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.case__block { margin: 40px 0 0; }
.case__block p + p { margin-top: 12px; }
.case__block p + .case__list { margin-top: 16px; }
.case__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.case__list li { position: relative; padding-left: 22px; color: var(--ink-2); }
.case__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.case__list b { color: var(--ink); font-weight: 700; }
.case__fig { margin: 32px 0 0; overflow: hidden; border-radius: 18px; background: var(--paper-2); }
.case__fig img, .case__fig video { display: block; width: 100%; height: auto; }
.case__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.case__pair .case__fig { margin: 0; }
.case__pair .case__fig > * { aspect-ratio: 1126 / 720; object-fit: cover; }
.case__quote { margin: 44px 0 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--teal); color: var(--ink); font: italic 700 clamp(22px, 2.6vw, 30px)/1.25 var(--font); letter-spacing: -.015em; }
/* wireframe / design slider */
.cmp-wrap { margin: 32px 0 0; }
.cmp__cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.cmp__cap span:nth-child(2) { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.cmp { --pos: 50%; position: relative; aspect-ratio: var(--ar, 16 / 10); overflow: hidden; border-radius: 18px; background: var(--paper-2); -webkit-user-select: none; user-select: none; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp__after { clip-path: inset(0 0 0 var(--pos)); }
.cmp__bar { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 2px; margin-left: -1px; background: var(--white); pointer-events: none; }
.cmp__bar i { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: 0 10px 26px -8px rgba(25, 35, 42, .5); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.cmp:active .cmp__bar i { transform: translate(-50%, -50%) scale(.92); }
.cmp__bar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmp__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.cmp__range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 400px; }
.cmp__range::-moz-range-thumb { width: 2px; height: 400px; border: 0; }
.cmp:has(.cmp__range:focus-visible) .cmp__bar i { outline: 3px solid var(--teal); outline-offset: 3px; }
.case__note { margin: 24px 0; padding: 16px 18px; border-radius: 16px; background: var(--teal-50); font-size: 15.5px; }
.case__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.nav__links a.is-current { color: var(--teal); }
.ab-hero { padding-bottom: clamp(60px, 7vw, 110px); }
.ab-hero .hero__title { font-size: clamp(46px, 8.6vw, 144px); }
.ab-logo { position: relative; isolation: isolate; margin: clamp(48px, 6vw, 80px) clamp(8px, 1vw, 16px) 0; padding: clamp(56px, 7vw, 110px) var(--gutter) clamp(32px, 4vw, 52px); overflow: hidden; border-radius: var(--r-lg); background: var(--teal); color: var(--white); text-align: center; }
.ab-logo::before { content: ""; position: absolute; z-index: -1; inset: -20%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent 70%); }
.ab-logo__frame { position: relative; width: min(860px, 100%); margin: 0 auto; text-align: left; }
.ab-logo__art { position: relative; }
.ab-logo__mark { display: block; width: 100%; height: auto; color: var(--white); }
.ab-dot { position: absolute; z-index: 2; width: 0; height: 0; }
.ab-dot i { position: absolute; left: -17px; top: -17px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 14px; font-style: normal; font-weight: 700; cursor: pointer; transition: transform .4s var(--ease), background-color .3s; }
.ab-dot i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: pulse 2.2s var(--ease) infinite; }
.ab-dot.is-on i { transform: scale(1.15); background: var(--paper); color: var(--ink); }
.ab-call { position: absolute; z-index: 3; width: min(280px, 46vw); padding: 14px 16px; border-radius: 16px; background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.45; box-shadow: 0 20px 40px -18px rgba(0, 40, 44, .55); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; }
.ab-call b { margin-right: 6px; color: var(--teal); }
.ab-call--1 { left: 38.8%; top: calc(52% + 28px); }
.ab-call--2 { left: calc(71% - 140px); top: calc(30% + 28px); }
.ab-call--3 { left: 33%; top: calc(12% + 28px); }
.ab-logo.show-1 .ab-call--1, .ab-logo.show-2 .ab-call--2, .ab-logo.show-3 .ab-call--3 { opacity: 1; transform: none; }
.ab-logo__note { display: inline-block; margin-top: 28px; padding: 7px 14px; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ab-story { padding: clamp(96px, 11vw, 170px) 0 clamp(60px, 7vw, 100px); }
.ab-story__grid { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: 24px 48px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.ab-story__grid .label { align-self: start; margin-top: 8px; }
.ab-story__lede { font-size: clamp(24px, 2.8vw, 42px); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
.ab-story__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; font-size: 17px; color: var(--muted); }
.ab-principles { padding: clamp(60px, 7vw, 110px) 0 clamp(96px, 10vw, 160px); }
.ab-principles__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ab-principles__side { position: sticky; top: 120px; }
.ab-principles__title { margin-top: 18px; font-size: clamp(40px, 5.4vw, 84px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.ab-rules li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 32px 0; border-top: 1px solid var(--line-2); }
.ab-rules span { padding-top: 12px; font-size: 15px; font-weight: 700; color: var(--teal); }
.ab-rules h3 { font-size: clamp(28px, 3vw, 44px); font-style: italic; font-weight: 700; letter-spacing: -.015em; }
.ab-rules p { max-width: 30em; margin-top: 10px; font-size: 17.5px; color: var(--muted); }
.ab-traits { margin: 0 clamp(8px, 1vw, 16px); padding: clamp(96px, 10vw, 160px) 0; border-radius: var(--r-lg); background: var(--ink); color: var(--paper); }
.traits-list { margin-top: 32px; border-top: 1px solid var(--line-d); }
.trait { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: center; gap: 24px; padding: clamp(8px, 1.2vw, 16px) 0; border-bottom: 1px solid var(--line-d); }
.trait__word { position: relative; display: inline-block; font-size: clamp(50px, 9.4vw, 156px); font-style: italic; font-weight: 700; line-height: 1.08; letter-spacing: -.03em; white-space: nowrap; }
.trait__line { color: transparent; -webkit-text-stroke: 1.5px rgba(246, 243, 236, .35); }
.trait__fill { position: absolute; left: 0; top: 0; color: var(--teal-300); clip-path: inset(0 100% 0 0); transition: color .4s; }
.trait:hover .trait__fill { color: var(--paper); }
.trait__desc { font-size: 17px; color: var(--muted-d); opacity: .5; transition: opacity .5s, color .5s; }
.trait.is-lit .trait__desc { opacity: 1; color: var(--paper); }
.ab-services { padding: clamp(96px, 10vw, 160px) 0 clamp(70px, 7vw, 110px); }
.ab-services__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 40px; }
.ab-services__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ab-svc { display: flex; flex-direction: column; gap: 10px; min-height: 240px; padding: 24px; border-radius: var(--r-md); background: var(--paper-2); transition: background-color .4s, color .4s, translate .5s var(--ease); }
.ab-svc:nth-child(even) { background: var(--teal-50); }
.ab-svc h3 { margin-top: auto; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ab-svc p { font-size: 15px; color: var(--muted); transition: color .4s; }
.ab-svc:hover { translate: 0 -6px; background: var(--ink); color: var(--paper); }
.ab-svc:hover p { color: var(--muted-d); }
.ab-svc:hover .tile__ico { color: var(--teal-300); }
@media (max-width: 1100px) { .ab-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ab-call { position: static; display: block; width: auto; margin-top: 10px; opacity: 1; transform: none; box-shadow: none; }
  .ab-logo__note { display: none; }
  .ab-dot i { left: -13px; top: -13px; width: 26px; height: 26px; font-size: 12px; }
  .ab-story__grid, .ab-principles__grid, .trait { grid-template-columns: 1fr; }
  .ab-story__cols { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .ab-principles__side { position: static; }
  .trait { gap: 4px; padding: 14px 0; }
  .trait__desc { opacity: 1; color: var(--muted-d); }
  .ab-services__grid { grid-template-columns: 1fr 1fr; }
  .ab-svc { min-height: 190px; }
}
@media (max-width: 480px) { .ab-services__grid { grid-template-columns: 1fr; } .ab-svc { min-height: 0; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .why__grid .tile { grid-column: span 3; }
  .why__grid .tile--wide { grid-column: span 3; }
  .why__grid .tile:nth-child(3) { grid-column: span 6; }
}
@media (max-width: 900px) {
  :root { --nav-h: 80px; }
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__logo { width: min(200px, 54vw); }
  .hero__stage { height: 78vh; min-height: 420px; }
  .hero__marks i:nth-child(2), .hero__marks i:nth-child(4) { display: none; }
  .why__head, .services__head { grid-template-columns: 1fr; }
  .statement__pin { align-items: flex-start; padding-top: 72px; }
  .statement__grid { grid-template-columns: 1fr; gap: 20px; }
  .statement__title { font-size: clamp(44px, 12vw, 72px); }
  .statement__lede { margin-top: 14px; font-size: 16px; }
  .statement__meter { margin-top: 16px; }
  .statement__stage { width: min(100%, 52vh); }
  .principles { grid-template-columns: 1fr; }
  .svc__inner { max-width: none; min-height: 0; }
  .svc__art { position: relative; top: auto; right: auto; height: auto; max-width: none; width: auto; margin: 0 clamp(20px, 5vw, 28px) clamp(20px, 5vw, 28px); }
  .work__cols { grid-template-columns: 1fr; }
  .work__col + .work__col { padding-top: 0; }
  .work__col { gap: 56px; }
  .work__cols .work__col:first-child { margin-bottom: 56px; }
  .trust__deck { grid-template-columns: 1fr 1fr; }
  .tcard, .tcard:nth-child(4), .tcard:nth-child(5) { grid-column: auto; }
  .tcard:nth-child(5) { grid-column: 1 / -1; }
  .journey__hint { display: none; }
  .jp { grid-template-columns: 1fr; gap: 14px; }
  .jp__art { height: clamp(84px, 13vh, 110px); }
  .jp p { font-size: 15px; }
  .faq__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__intro { position: static; }
  .footer__nav { text-align: left; }
  .footer__nav .roll { justify-self: start; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .dock__link--wide { display: none; }
  .dock__link { padding: 12px 12px; }
  .hero__kicker { font-size: 12.5px; }
  .loader__name { display: none; }
  .why__grid .tile, .why__grid .tile--wide, .why__grid .tile:nth-child(3) { grid-column: span 6; min-height: 180px; }
  .trust__deck { grid-template-columns: 1fr; }
  .tcard:nth-child(5) { grid-column: auto; }
  .tcard__in { min-height: 0; }
  .journey__stop { padding: 6px 8px; font-size: 13px; }
  .journey__stop b { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .case__facts { grid-template-columns: 1fr 1fr; }
  .case__stats { grid-template-columns: 1fr; gap: 8px; }
  .case__stats li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
  .case__stats b { flex: 0 0 auto; min-width: 2.6em; font-size: 34px; }
  .case__stats span { margin-top: 0; }
  .case__pair { grid-template-columns: 1fr; }
  .cmp__cap span:nth-child(2) { display: none; }
  .footer__logo { width: 200px; }
  .footer__up { margin-left: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pulse::after, .hero__egg-btn .i { animation: none !important; }
  .svc { background: var(--ink) !important; color: var(--paper) !important; }
  .svc__body { height: auto !important; }
  .svc__art { opacity: 1 !important; }
  .viz *, .viz *::before, .viz *::after { animation: none !important; }
  .jp { position: static; opacity: 1; visibility: visible; transform: none; }
  .journey__pin { height: auto; padding-bottom: clamp(48px, 8vh, 96px); }
  .journey__fit { transform: none !important; }
  .journey__panels { gap: 12px; }
  .faq__a { height: auto; }
}