/* Blitxo — studio site. Started from a free animated landing page template by @jamesonc_ai. */

/* Display / heading typeface — bundled so it renders for every visitor,
   not just machines with the font installed locally. */
@font-face {
  font-family: 'Glitch Demo';
  src: url('../assets/fonts/GlitchDemo.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Body typeface: Onest (SIL Open Font License, assets/fonts/Onest-OFL.txt), hosted with the site so no visitor's
   browser has to contact Google to draw text. One variable file per character set covers weights 300–600;
   the browser downloads latin-ext only if a page uses those characters (e.g. the ₹ sign). */
@font-face {
  font-family: 'Onest';
  src: url('../assets/fonts/onest-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  src: url('../assets/fonts/onest-latin-ext.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Page owns its theme — opts out of browser Auto Dark Mode (no injected black boxes). */
  color-scheme: dark light;
  --font-display: 'Glitch Demo', 'Onest', sans-serif;
  --ink: #0a0a0c;
  --grey-4: #9b9ba3;
  --grey-6: #6f6f78;
  --lime: #acfb33;
  --navy: #101433;
  --p-deep: #1c0b3e;
  --p-mid: #4c27b8;
  --p-vio: #7b45f5;
  --p-lav: #b78aff;
  --p-pink: #ffb8e0;
  --r-slide: 28px;
  --r-card: 22px;
  --nav-h: 52px;
  /* one rhythm for every section: heading size, space around sections, heading-to-content gap */
  --fs-h2: clamp(2rem, 1.1rem + 2.9vw, 3.8rem);
  --sec-pad: clamp(96px, 15vh, 168px);
  --h-gap: clamp(32px, 5.5vh, 60px);
  font-size: clamp(14px, 1.05vw, 17px);
}
.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;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  font-family: 'Onest', 'Inter', -apple-system, sans-serif;
  background: #fff;
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* svh = the screen height with the phone's address bar showing, so a pinned scene's bottom edge is never under it */
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.dim { opacity: .5; }
.soft { opacity: .72; }  /* hero headline: gentler dim than .dim */
.btn-meet { gap: 10px; }
.meet-icon { width: 22px; height: auto; flex: none; }
.nav-cta .meet-icon { width: 18px; }

/* ---------- intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  display: grid; place-items: center;
}
.intro-glow {
  position: absolute; width: 90vmin; height: 90vmin; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    #cbb7f0 0%, #a37ae8 22%, #7b45f5 45%, #4c1fb8 62%, transparent 74%);
  filter: blur(18px);
}
.intro-star { position: relative; width: 9vmin; fill: #08050e; transform: rotate(12deg); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 18px; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; }
.nav-pill {
  display: flex; align-items: stretch; height: var(--nav-h);
  background: #fff; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(10,10,20,.08), 0 8px 28px rgba(10,10,20,.10);
  overflow: hidden;
}
/* logo mark + the name, set in the headings' display face */
.nav-logo {
  display: flex; align-items: center; gap: 9px; padding: 0 20px 0 18px;
  border-right: 1px solid #ececf0; color: var(--ink);
}
.nav-logo svg { width: 20px; flex: none; fill: var(--ink); }
.nav-name { font-family: var(--font-display); font-size: 21px; line-height: 1; letter-spacing: .01em; padding-top: 2px; }
.nav-logo:hover { background: #f6f6f8; }
.nav-item {
  display: flex; align-items: center; padding: 0 20px;
  font-size: 14px; font-weight: 500; color: #1c1c22;
  border-right: 1px solid #ececf0;
}
.nav-item:hover { background: #f6f6f8; }
.nav-cta {
  display: flex; align-items: center; gap: 8px; padding: 0 22px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 500;
  border-radius: 999px; margin: 4px;
}
/* phone menu (js/nav.js builds it): the button sits at the end of the nav bar, the sheet drops down under it.
   Both exist only on phones (see the 560px block). */
.nav-sheet { display: none; }
.nav-menu {
  all: unset; display: none;          /* (display after the reset: the phone block turns it on) */
  box-sizing: border-box; cursor: pointer; flex: none;
  width: 44px; height: 44px; margin: 4px 4px 4px 0; border-radius: 50%;
  place-items: center; color: var(--ink); transition: background .2s;
}
.nav-menu:hover { background: #f6f6f8; }
.nav-menu:focus-visible { outline: 2px solid var(--p-vio); outline-offset: -2px; }
.nav-menu svg { width: 22px; height: 22px; }
.nav-menu path { transition: opacity .2s; }
.nav-menu .nav-menu-close, .nav-menu[aria-expanded="true"] .nav-menu-open { opacity: 0; }
.nav-menu[aria-expanded="true"] .nav-menu-close { opacity: 1; }
.nav-sheet {
  position: absolute; top: calc(100% + 8px); left: 10px; right: 10px;
  padding: 6px 20px; border-radius: var(--r-card); background: #fff;
  box-shadow: 0 1px 2px rgba(10,10,20,.08), 0 18px 50px rgba(10,10,20,.18);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .22s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.nav-sheet.is-open { opacity: 1; transform: none; }
.nav-sheet[hidden] { display: none !important; }
.nav-sheet-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 58px; font-size: 18px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid #ececf0;
}
.nav-sheet-link:last-child { border-bottom: 0; }
.nav-sheet-link svg { width: 20px; height: 20px; color: var(--grey-6); }
.nav-sheet-link[aria-current="page"] { color: var(--p-vio); }
.nav-sheet-link:focus-visible { outline: 2px solid var(--p-vio); outline-offset: 2px; border-radius: 8px; }

/* ---------- shared slide ---------- */
.slide {
  position: absolute; inset: 14px;
  border-radius: var(--r-slide);
  overflow: hidden;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 28px; border-radius: 14px;
  font-size: 15px; font-weight: 500;
}
.btn-light { background: #fff; color: #17123a; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.35); }

/* ---------- hero morph panel (lives inside the showcase pin) ---------- */
.hero-backdrop {
  position: absolute; inset: 0; z-index: 4;
  background: radial-gradient(80% 60% at 50% 45%, #d3cde0 0%, #fff 70%);
}
.morph-panel {
  position: absolute; z-index: 5;
  top: 14px; left: 14px;
  width: calc(100% - 28px); height: calc(100% - 28px);
  border-radius: var(--r-slide); overflow: hidden;
  background:
    radial-gradient(60% 45% at 42% 108%, rgba(255,184,224,.55) 0%, transparent 60%),
    linear-gradient(215deg, #2a1263 0%, #3d1c96 34%, #6d3ce8 66%, #a37ae8 100%);
}
.panel-skin {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(120% 90% at 50% 30%, #c9aefc 0%, #9165f0 40%, #6a35e0 72%, #4c1fb8 100%);
}
/* full-height flex column: centred on desktop, bottom-anchored on smaller screens (no transform, so GSAP's y tweens stay clean) */
.hero-copy {
  position: absolute; left: 6.5%; top: 0; bottom: 0; z-index: 2; max-width: min(46rem, 88vw);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.hero-copy h1 {
  font-family: var(--font-display);
  color: #fff; font-size: clamp(2.2rem, 6.2vw, 4.4rem); font-weight: 400;
  letter-spacing: .01em; line-height: 1.08;
}
.hero-copy p { color: rgba(255,255,255,.82); font-size: clamp(1rem, 3.4vw, 1.25rem); line-height: 1.5; margin: 1.6rem 0 2.2rem; max-width: 24rem; font-weight: 300; }
#star-canvas { position: absolute; right: -12%; top: -6%; width: 68%; height: 115%; }

/* ---------- carousel showcase ---------- */
.showcase { height: 770vh; position: relative; background: #fff; }   /* js/main.js: the ring rests on each card */
.showcase .sticky { display: grid; place-items: center; }
.marquee {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-54%);
  overflow: hidden; white-space: nowrap; z-index: 1;
}
.marquee-track { display: inline-block; }
.marquee-track span {
  font-family: var(--font-display);
  font-size: 15vw; font-weight: 400; letter-spacing: 0; color: var(--ink);
}
.marquee-track i {
  display: inline-block; width: .35em; height: .35em; margin: 0 .18em;
  border: 3px solid var(--ink); border-radius: 50%; vertical-align: .12em;
}
.ring-stage {
  position: relative; width: 100%; height: 78vh; z-index: 2;
  perspective: 2000px; display: grid; place-items: center;
}
.ring {
  position: relative; width: 290px; height: 445px;
  transform-style: preserve-3d;
}
.card {
  position: absolute; inset: 0; border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(10,5,30,.35);
  container-type: inline-size;
  backface-visibility: hidden;   /* cards turned away don't show their text mirrored through the ring */
}
.card:nth-child(1) { transform: rotateY(0deg)   translateZ(380px); }
.card:nth-child(2) { transform: rotateY(90deg)  translateZ(380px); }
.card:nth-child(3) { transform: rotateY(180deg) translateZ(380px); }
.card:nth-child(4) { transform: rotateY(270deg) translateZ(380px); }

/* Every card reads the same way: a small product scene at the top (seen first), the problem in words at the
   bottom. Everything inside is sized in em off one base that follows the card's width (16px on the 290px
   desktop card), so the layout keeps its proportions on tablet and phone. */
.card-in {
  position: absolute; inset: 0; padding: 1.375em;
  display: flex; flex-direction: column; gap: 1em;
  font-size: 5.5172cqw; color: #fff;
}
.card-scene { position: relative; flex: none; }
.card-text { margin-top: auto; }
.card-title { font-size: 1.5em; font-weight: 600; line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; }
.card-body { margin-top: .85em; font-size: max(.8125em, 12px); line-height: 1.5; color: rgba(255,255,255,.76); }
.card-body b { font-weight: 600; color: #fff; }

/* card 1 · the thesis: the two sides on their own lines, connecting words softer, the verdict biggest */
.card-thesis { margin-top: auto; font-size: 1em; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.card-thesis > span, .card-thesis > b { display: block; }
.card-thesis .t-soft { font-weight: 400; opacity: .8; }
.card-thesis b { margin-top: .35em; font-size: 2.25em; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
/* a two-position switch: User or Business, never both */
.either {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: .25em; border-radius: 999px;
  background: rgba(30,10,80,.34); border: 1px solid rgba(255,255,255,.24);
}
.either span {
  position: relative; z-index: 1; padding: 0 1.1em;
  font-size: .875em; font-weight: 500; line-height: 2.3em; text-align: center; color: #fff;
}
.either span:first-child { color: var(--ink); }
.either i {
  position: absolute; top: .25em; bottom: .25em; left: .25em; width: calc(50% - .25em);
  border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(30,10,80,.28);
}

/* card 2 · people who signed up vs people who came back */
.coh-k { font-size: .8125em; line-height: 1.3; color: rgba(255,255,255,.62); margin-bottom: .6em; }
.coh-row { display: flex; gap: .4em; }
.coh-row + .coh-k { margin-top: 1.2em; }
.coh-row i { position: relative; width: 1.8em; height: 1.8em; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.32); }
.coh-row i::before {
  content: ''; position: absolute; inset: -1.5px; border-radius: 50%;
  background:
    radial-gradient(circle .33em at 50% 38%, rgba(20,8,48,.42) 96%, transparent 100%),
    radial-gradient(ellipse .62em .46em at 50% 100%, rgba(20,8,48,.42) 96%, transparent 100%),
    var(--tint, #b78aff);
}
.coh-row i:nth-child(7n+2)::before { --tint: #ffb8e0; }
.coh-row i:nth-child(7n+3)::before { --tint: #acfb33; }
.coh-row i:nth-child(7n+4)::before { --tint: #efe8ff; }
.coh-row i:nth-child(7n+5)::before { --tint: #9d74ff; }
.coh-row i:nth-child(7n+6)::before { --tint: #ffd8ec; }
.coh-row i:nth-child(7n+7)::before { --tint: #d4fb8f; }
.coh-back i + i::before { opacity: 0; transform: scale(.5); }   /* only one came back */

/* card 3 · the support inbox filling up */
.chat { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; }
.bub {
  max-width: 94%; padding: .55em .9em; border-radius: 1.15em 1.15em 1.15em .35em;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.1);
  font-size: .84375em; line-height: 1.3; color: rgba(255,255,255,.92);
}
.bub-typing { display: flex; gap: .3em; padding: .85em .95em; }
.bub-typing i { width: .42em; height: .42em; border-radius: 50%; background: rgba(255,255,255,.55); }

/* card 4 · a landing page with a clear button nobody clicks */
.site-win { background: #fff; border-radius: .875em; overflow: hidden; box-shadow: 0 .75em 2em rgba(38,64,0,.2); }
.site-bar { display: flex; gap: .3em; padding: .6em .75em; border-bottom: 1px solid #eef1e8; }
.site-bar i { width: .42em; height: .42em; border-radius: 50%; background: #dde2d4; }
.site-body { padding: .9em .95em 1em; }
.site-h { max-width: 14em; font-size: .8125em; font-weight: 600; line-height: 1.25; color: var(--ink); }
.site-line { display: block; height: .36em; margin-top: .55em; border-radius: .2em; background: #eceee8; }
.site-h + .site-line { margin-top: .8em; }
.site-line + .site-line { width: 68%; }
.site-cta {
  display: inline-block; margin-top: .9em; padding: .55em .9em; border-radius: .6em;
  background: var(--ink); color: #fff; font-size: .75em; font-weight: 500; line-height: 1.2;
}
.site-cursor {
  position: absolute; left: 50%; bottom: .9em; width: 1.4em;
  fill: var(--ink); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; opacity: 0;
}

.card-catalist {
  background:
    radial-gradient(70% 40% at 50% 115%, rgba(183,138,255,.45) 0%, transparent 65%),
    linear-gradient(180deg, #0b0714 0%, #170d2e 45%, #5b2fd1 100%);
}
.card-super {
  background: radial-gradient(120% 90% at 50% 30%, #c9aefc 0%, #9165f0 40%, #6a35e0 72%, #4c1fb8 100%);
}
.card-super .card-star {
  position: absolute; left: 50%; top: 46%; width: 110px;
  transform: translate(-50%,-50%); fill: #0d0618;
}
.card-lime { background: var(--lime); }
.card-lime .card-in { color: var(--ink); }
.card-lime .card-body { color: rgba(10,10,12,.72); }
.card-lime .card-body b { color: var(--ink); }
.card-analyser {
  background:
    radial-gradient(70% 45% at 50% 118%, rgba(123,69,245,.85) 0%, transparent 60%),
    linear-gradient(165deg, #0a0a0f 0%, #100a1e 60%, #2a1157 100%);
}

/* The scenes play when their card turns to face you (js/main.js sets .is-live on the ring and .is-front
   on the facing card). Without it (no JS) each scene simply shows how the story ends. */
.ring.is-live .card:not(.is-front) .coh-back i::before { opacity: 1; transform: none; transition: none; }
.ring.is-live .card.is-front .coh-back i::before {
  transition: opacity .5s ease, transform .5s ease; transition-delay: calc(.5s + var(--i, 0) * 130ms);
}
.ring.is-live .card:not(.is-front) .bub[style] { opacity: 0; transform: translateY(.7em) scale(.96); transition: none; }
.ring.is-live .card.is-front .bub[style] {
  transform-origin: 0 100%;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.9,.25,1.15); transition-delay: calc(.45s + var(--i) * .7s);
}
.ring.is-live .card.is-front .bub-typing i { animation: typing 1.2s ease-in-out 2.3s infinite; }
.ring.is-live .card.is-front .bub-typing i:nth-child(2) { animation-delay: 2.45s; }
.ring.is-live .card.is-front .bub-typing i:nth-child(3) { animation-delay: 2.6s; }
.ring.is-live .card.is-front .site-cursor { animation: visitor 4.8s cubic-bezier(.45,0,.25,1) .4s infinite; }
.ring.is-live .card.is-front .either i { animation: either-thumb 4.4s cubic-bezier(.65,0,.35,1) .6s infinite; }
.ring.is-live .card.is-front .either span:first-child { animation: either-a 4.4s ease .6s infinite; }
.ring.is-live .card.is-front .either span + span { animation: either-b 4.4s ease .6s infinite; }
.ring.is-away * { animation-play-state: paused !important; }   /* off screen: nothing keeps repainting */
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-.25em); opacity: 1; } }
/* a visitor drifts in, hovers near the button, hesitates, and leaves */
@keyframes visitor {
  0%        { opacity: 0; transform: translate(4.5em, 3.2em); }
  10%       { opacity: 1; }
  36%       { transform: translate(0, 0); }
  48%       { transform: translate(-.4em, .15em); }
  60%       { opacity: 1; transform: translate(0, 0); }
  84%, 100% { opacity: 0; transform: translate(6.5em, -5em); }
}
@keyframes either-thumb { 0%, 38% { transform: none; } 50%, 88% { transform: translateX(100%); } 100% { transform: none; } }
@keyframes either-a { 0%, 40% { color: var(--ink); } 48%, 90% { color: #fff; } 98%, 100% { color: var(--ink); } }
@keyframes either-b { 0%, 40% { color: #fff; } 48%, 90% { color: var(--ink); } 98%, 100% { color: #fff; } }

/* ---------- star wipe (carousel → sphere) ---------- */
.star-wipe {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  pointer-events: none; opacity: 0;
}
.star-wipe svg {
  width: 120px; fill: #08040e;
  transform-origin: 50% 50%;
}

/* ---------- shared section heading: one face, one size, one line-height for every section ---------- */
.section-title, .bf-title, .process-title, .who-title, .cta-head {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .01em;
  font-size: var(--fs-h2); line-height: 1.08;
}
.section-title { color: var(--ink); }

/* ---------- what we believe (sphere) ---------- */
.sphere-sec { height: 490vh; position: relative; }   /* js/main.js: ~30vh of scroll per timeline second */
.sphere-sec .sticky { perspective: 1500px; }
.dark-slide { background: #050505; transform-origin: 50% 65%; }
#sphere-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The orb stays centred. The words sit in two mirrored columns that hug it (the left column aligns right, the
   right column aligns left), so every frame balances around the orb; one frame is on screen at a time (js/main.js).
   --orb-r = the orb's radius on screen: js/sphere.js sets it from its camera, these values are the fallback.
   --colw = one side column's width, as a length the statement size can follow. */
.dark-slide {
  --orb-r: 24vh; --gap: calc(var(--orb-r) * 1.14 + 28px);
  --cols: minmax(0, 1fr) calc(var(--gap) * 2) minmax(0, 1fr);
  --colw: calc(((100vw - 28px) * .91 - var(--gap) * 2) / 2);
}
.belief-stage {
  position: absolute; inset: 0; z-index: 2; padding: 0 4.5%;
  display: grid; grid-template-columns: var(--cols); align-items: center;
}
.bf { grid-area: 1 / 1 / 2 / 4; display: grid; grid-template-columns: var(--cols); align-items: center; }
.side-l { grid-column: 1; text-align: right; }
.side-r { grid-column: 3; text-align: left; }
.bf-title { color: #fff; }
.bf-title > span { text-wrap: balance; }
.bf-title .side-r { color: rgba(255,255,255,.72); }   /* the hero's two-tone rule, as colour so fades can't undo it */
/* the three statements: one size, soft white, the words that carry each idea in full white */
.bf-1, .bf-2, .bf-3 {
  color: rgba(255,255,255,.62); font-weight: 400; line-height: 1.34; letter-spacing: -.01em;
  font-size: clamp(1.1rem, calc(var(--colw) * .066), 2.05rem);
}
.bf b { color: #fff; font-weight: 500; }
.bf-1 .side-l, .bf-3 .side-l { text-wrap: balance; }
.bf-2 .side-r > *, .bf-3 .side-r > span { display: block; }   /* one decision / one payoff per line */
.bf-2 .side-r > b { margin-bottom: .2em; }

/* narrower landscape screens: smaller orb (camera pulls back), same mirrored columns */
@media (max-aspect-ratio: 8/5), (max-width: 1000px) {
  .dark-slide { --orb-r: 18vh; }
}
/* portrait: the orb in the middle, the left column's words above it and the right column's below */
@media (max-aspect-ratio: 1/1) {
  .dark-slide {
    --rows: minmax(0, 1fr) calc(var(--gap) * 2) minmax(0, 1fr);
    --colw: calc((100vw - 28px) * .88);
  }
  .belief-stage { padding: 0 6%; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--rows); align-items: stretch; }
  .bf { grid-area: 1 / 1 / 4 / 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--rows); }
  .side-l { grid-column: 1; grid-row: 1; align-self: end; text-align: left; }
  .side-r { grid-column: 1; grid-row: 3; align-self: start; text-align: left; }
}

/* ---------- what we do ---------- */
.services { position: relative; background: #fff; padding: var(--sec-pad) 0; }
/* Between two scroll-driven scenes a plain section flies past, so this one holds still for a stretch of scroll:
   the content is sticky and the section is taller than it (the ::after below). If the content gets taller
   than the screen (a row opened on a phone), it sticks by its bottom edge instead, so nothing is cut off.
   --svc-h = the content's height, kept current by js/main.js. */
.services-pin { position: sticky; top: min(var(--sec-pad), calc(100vh - var(--svc-h, 0px) - 24px)); }
.services::after { content: ""; display: block; height: 75vh; }
.services-inner { width: min(1320px, 100% - 12vw); margin: 0 auto; }
.services-inner .section-title { margin-bottom: var(--h-gap); }

/* four clean rows: name left, one line right. Detail (best for / what you get) opens on hover or click. */
.svc-list { list-style: none; border-top: 1px solid #e6e4ec; }
.svc { position: relative; border-bottom: 1px solid #e6e4ec; }
/* open row: one flat, light lavender surface (no shadow, no border). It bleeds a little past the text
   and covers the hairlines above and below, so the open row reads as a single calm block. */
.svc-bg {
  position: absolute; inset: -1px -26px; z-index: 0; pointer-events: none;
  border-radius: var(--r-card); background: #f3eefe;
}
.svc-h { font: inherit; position: relative; z-index: 1; }
.svc-btn {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 46px;
  gap: clamp(20px, 3vw, 48px); align-items: center;
  padding: clamp(26px, 4vh, 40px) 0;
}
.svc-btn:focus-visible { outline: 2px solid var(--p-vio); outline-offset: 4px; border-radius: 10px; }
.svc-name {
  font-family: var(--font-display); color: var(--ink);
  font-size: clamp(1.45rem, 2.3vw, 2.3rem); line-height: 1.08; letter-spacing: .01em;
}
.svc-line { font-size: clamp(1.02rem, 1.35vw, 1.25rem); line-height: 1.5; color: var(--grey-6); max-width: 30rem; }
.svc-icon {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #dcd9e4; color: var(--ink);
  transition: background .25s, color .25s, border-color .25s;
}
.svc.is-open .svc-icon { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Open state stays on the plain white surface: same two columns as the row
   ("Best for" under the name, "What you get" under the line), quiet grey labels, hairline-separated list. */
.svc-more { position: relative; z-index: 1; overflow: hidden; }
/* two clear parts: "Best for" is context (softer text, under the name); "What you get" is the deliverable,
   so it sits on its own white card with a check per item (under the line) */
.svc-more-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 46px;
  gap: clamp(20px, 3vw, 48px); padding-bottom: clamp(26px, 4vh, 40px);
}
.svc-k { font-size: 13px; font-weight: 500; color: #625b76; margin-bottom: 10px; }   /* grey tuned to sit on the lavender */
.svc-best { font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; color: #4a4458; max-width: 25rem; }
.svc-get-card { background: #fff; border-radius: 16px; padding: clamp(18px, 2vw, 24px); max-width: 32rem; }
.svc-get { list-style: none; display: grid; gap: 12px; }
.svc-get li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start;
  font-size: clamp(.95rem, 1.1vw, 1.04rem); line-height: 1.5; color: var(--ink);
}
.svc-tick {
  width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; background: #f0e9fe; color: var(--p-mid);
}
.svc-tick svg { width: 13px; height: 13px; }

/* ---------- portfolio ---------- */
.portfolio { height: 420vh; position: relative; background: #050505; }   /* 4 projects: longer pin keeps the pan speed */
.portfolio .sticky { display: flex; align-items: center; }
.track { display: flex; gap: 3vw; padding-left: 4vw; }
.work {
  position: relative; flex: none; width: var(--w); height: 86vh;
  border-radius: var(--r-card); overflow: hidden;
}
/* soft shade top and bottom so the line and the title read on any cover */
.work::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* eased stops, strong enough for white text on the light studio shots */
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 14%, transparent 32%, transparent 56%, rgba(0,0,0,.3) 80%, rgba(0,0,0,.62) 100%);
}
.work img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
/* the whole card opens its case study (work/*.html); the round arrow top-right says so */
.work-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.work-link:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.work-go {
  position: absolute; top: 22px; right: 24px; z-index: 1;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.4); color: #fff;
  transition: background .25s, color .25s, border-color .25s;
}
.work-go svg { width: 20px; height: 20px; }
.work:hover .work-go, .work:focus-within .work-go { background: #fff; border-color: #fff; color: var(--ink); }
.work:hover img { transform: scale(1.03); }
.work-meta {
  position: absolute; top: 28px; left: 30px; right: 86px; z-index: 1;
  color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.45;
}
.work-title {
  position: absolute; bottom: 26px; left: 30px; right: 30px; z-index: 1;
  font-family: var(--font-display); font-weight: 400; letter-spacing: .01em;
  color: #fff; font-size: clamp(2rem, 4.2vw, 4.4rem); line-height: 1.05;
}

/* ---------- how we work (star moment) ---------- */
.star-moment { height: 440vh; position: relative; background: #000; }
.star-slide {
  background:
    radial-gradient(60% 45% at 42% 112%, rgba(255,184,224,.75) 0%, transparent 58%),
    radial-gradient(90% 80% at 60% 40%, #6d3ce8 0%, #3d1c96 45%, #1c0b3e 100%);
}
#star-canvas-2 { position: absolute; inset: 0; width: 100%; height: 100%; }
/* title top-left, the current step bottom-left, the star on the right. Nothing else. */
.process-ui {
  position: absolute; left: 4.5%; top: 13%; bottom: 10%; z-index: 2;
  width: min(42%, 34rem); display: flex; flex-direction: column; color: #fff;
}
.process-now { margin-top: auto; }
.step-marks { display: none; }
.steps { list-style: none; display: grid; gap: 2rem; }          /* still layout: all four together */
.step-title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .01em;
  font-size: clamp(1.7rem, 2.7vw, 2.8rem); line-height: 1.08;
}
.step-num { font-family: 'Onest', sans-serif; font-size: .45em; color: var(--p-lav); vertical-align: middle; margin-right: .3em; }
.step-line { margin-top: 14px; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; font-weight: 300; color: rgba(255,255,255,.85); max-width: 26rem; }
/* the step's result, read as a labelled spec row (not a link): muted label, plain white value */
.step-out {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: 22px; padding-top: 14px; max-width: 26rem;
  border-top: 1px solid rgba(255,255,255,.18);
}
.step-out-k { font-size: 13.5px; color: rgba(255,255,255,.6); }
.step-out-v { font-size: clamp(1rem, 1.2vw, 1.12rem); font-weight: 500; color: #fff; }

/* scroll-driven mode (js/main.js adds .is-live): one step in the slot at a time + the 01-04 marker */
.is-live .steps { gap: 0; }
.is-live .step { grid-area: 1 / 1; }
.is-live .step-num { display: none; }                          /* the marker above carries the number */
.is-live .step-marks {
  display: flex; gap: 10px; list-style: none; margin-bottom: 22px;
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.step-marks li {
  padding: 6px 12px; border-radius: 999px; color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.18); transition: color .35s, background .35s, border-color .35s;
}
.step-marks li.is-on { color: var(--ink); background: #fff; border-color: #fff; }

/* ---------- gallery: an endless canvas you drag in any direction (js/gallery.js sizes and places the images) ---------- */
/* its own rounded panel, inset like the other slides, so it reads as a section apart from "How we work" above */
.gallery { position: relative; height: 100vh; height: 100svh; background: #000; overflow: hidden; }
.gal-view {
  position: absolute; inset: 14px; overflow: hidden; border-radius: var(--r-slide); cursor: grab;
  background: radial-gradient(70% 45% at 50% 0%, rgba(123,69,245,.16) 0%, transparent 70%), #0b0b10;
  touch-action: pan-y;               /* on touch, sideways swipes move the gallery and up/down still scrolls the page */
  -webkit-user-select: none; user-select: none;
}
/* the edges fade into the panel, so pieces glide in and out instead of being cut */
.gal-view::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 70px 24px #0b0b10;
}
.gal-view.is-dragging { cursor: grabbing; }
.gal-view:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: -8px; }
.gal-plane { position: absolute; inset: 0; }
.gal-item {
  position: absolute; left: 0; top: 0; margin: 0;
  border-radius: 18px; overflow: hidden; background: #111;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  will-change: transform;
}
.gal-item img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
/* the one hint: a quiet pill at the bottom that fades once the gallery has been moved */
.gal-hint {
  position: absolute; left: 50%; bottom: clamp(20px, 4vh, 40px); z-index: 2; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
  background: rgba(20,20,26,.72); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: rgba(255,255,255,.86); font-size: 14px; font-weight: 500; white-space: nowrap;
  pointer-events: none; transition: opacity .6s ease;
}
.gal-hint svg { width: 16px; height: 16px; }
.gallery.is-used .gal-hint { opacity: 0; }
/* without JS: a plain grid of the same nine images */
.gallery:not(.is-live) { height: auto; padding: 12vh 6vw; }
.gallery:not(.is-live) .gal-view { position: static; cursor: auto; }
.gallery:not(.is-live) .gal-plane { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.gallery:not(.is-live) .gal-item { position: relative; }
.gallery:not(.is-live) .gal-hint { display: none; }

/* ---------- who we work with (own section, continues the gallery's black) ---------- */
/* One column, same rhythm as "What we do": headline, then full-width hairline rows.
   One left edge (headline, label, statements, message) and one right edge (circles, button). */
.who-sec {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;          /* one full screen, content centred */
  display: grid; align-items: center;
  padding: clamp(96px, 12vh, 140px) 0 clamp(64px, 9vh, 120px);
  background:
    radial-gradient(50% 60% at 8% 12%, rgba(123,69,245,.22) 0%, transparent 70%),
    radial-gradient(40% 45% at 96% 104%, rgba(255,184,224,.10) 0%, transparent 70%),
    #000;
}
.who-wrap { width: min(1320px, 100% - 12vw); margin: 0 auto; }
.who-title { color: #fff; margin-bottom: var(--h-gap); }
.who-title .soft { display: block; }               /* the break falls where the tone changes */
.who-lead { font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.who-list { list-style: none; border-top: 1px solid rgba(255,255,255,.14); }
.who-list li { border-bottom: 1px solid rgba(255,255,255,.14); }
.who-item {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center;
  gap: clamp(20px, 3vw, 48px); padding: clamp(16px, 2.6vh, 28px) 0;
}
.who-text {
  font-size: clamp(1.2rem, 1.9vw, 1.9rem); line-height: 1.3; font-weight: 300;
  color: rgba(255,255,255,.62); transition: color .3s;
}
/* the round control mirrors the service rows' icon: outline when off, solid white when ticked */
.who-check {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.26); color: #fff;
  transition: background .3s, border-color .3s, color .3s;
}
.who-check svg { opacity: 0; transition: opacity .25s; }
.who-item.is-on .who-text { color: #fff; }
.who-item.is-on .who-check { background: #fff; border-color: #fff; color: var(--ink); }
.who-item.is-on .who-check svg { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .who-item:hover .who-text { color: rgba(255,255,255,.9); }
  .who-item:hover .who-check { border-color: rgba(255,255,255,.6); }
  .who-item:not(.is-on):hover .who-check svg { opacity: .4; }   /* preview of the tick */
}
.who-item:focus-visible { outline: 2px solid var(--p-lav); outline-offset: 4px; border-radius: 10px; }
.who-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 16px 32px; margin-top: clamp(24px, 4vh, 36px);
}
.who-msg { font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.6); transition: color .3s; }
.who-msg.is-on { color: #fff; }
/* quiet outline until something is ticked, then the site's solid white button */
.who-book {
  color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.3);
  transition: background .3s, color .3s, border-color .3s;
}
.who-book.is-ready, .who-book:hover { background: #fff; color: #17123a; border-color: #fff; }

/* ---------- FAQ ---------- */
.faq { background: #fff; padding: var(--sec-pad) 0; }
.faq-inner { width: min(1320px, 100% - 12vw); margin: 0 auto; }
.faq-inner .section-title { margin-bottom: var(--h-gap); }
.faq-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 90px); align-items: stretch;
}
.faq-list { display: grid; gap: 4px; align-content: start; }
.faq-q {
  all: unset; box-sizing: border-box; position: relative; cursor: pointer;
  padding: 15px 20px; border-radius: 14px;
  font-size: 16.5px; font-weight: 500; line-height: 1.4; color: var(--grey-6); transition: color .2s;
}
.faq-q:hover { color: var(--ink); }
.faq-q[aria-selected="true"] { color: #fff; }
.faq-q:focus-visible { outline: 2px solid var(--p-vio); outline-offset: 2px; }
.faq-pill { position: absolute; inset: 0; border-radius: 14px; background: var(--ink); }
.faq-q-text { position: relative; }
.faq-card {
  position: relative; overflow: hidden; border-radius: var(--r-card); color: #fff;
  padding: clamp(30px, 4vw, 60px);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(183,138,255,.45) 0%, transparent 60%),
    radial-gradient(60% 45% at 0% 110%, rgba(255,184,224,.3) 0%, transparent 60%),
    linear-gradient(165deg, #0a0a0f 0%, #100a1e 45%, #2a1157 100%);
}
.faq-mark { position: absolute; right: -60px; bottom: -60px; width: 300px; fill: rgba(255,255,255,.05); }
.faq-stack { position: relative; display: grid; }
.faq-answer { grid-area: 1 / 1; }
.faq-empty { grid-area: 1 / 1; align-self: center; font-size: clamp(1.2rem, 1.75vw, 1.7rem); line-height: 1.45; font-weight: 300; color: rgba(255,255,255,.55); }
.faq-answer-q { font-size: 15px; font-weight: 500; color: var(--p-lav); }
.faq-answer-a { margin-top: 20px; font-size: clamp(1.2rem, 1.75vw, 1.7rem); line-height: 1.45; font-weight: 300; max-width: 34em; }
.faq-acc { list-style: none; border-top: 1px solid #e6e4ec; }
.faq-acc li { border-bottom: 1px solid #e6e4ec; }
.faq-acc h3 { font: inherit; }
.faq-acc-btn {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--ink);
}
.faq-acc-btn:focus-visible { outline: 2px solid var(--p-vio); outline-offset: 4px; border-radius: 6px; }
.faq-acc-icon {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #dcd9e4;
}
.faq-acc li.is-open .faq-acc-icon { background: var(--ink); border-color: var(--ink); color: #fff; }
.faq-acc-a { overflow: hidden; }
.faq-acc-a p { padding: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--grey-6); }

/* ---------- final CTA: the heading, then the booking calendar on a white card ---------- */
/* overflow clipped: while the panel flips in it is briefly rotated, and its corners must not widen the page */
.cta { position: relative; background: #fff; padding: 14px 14px 0; perspective: 1500px; overflow: hidden; }
.cta-panel {
  position: relative; overflow: hidden; border-radius: var(--r-slide); color: #fff;
  padding: clamp(88px, 13vh, 136px) calc(6vw - 14px) calc(6vw - 14px);
  background:
    radial-gradient(55% 40% at 46% 112%, rgba(255,184,224,.7) 0%, transparent 62%),
    radial-gradient(40% 30% at 8% -4%, rgba(183,138,255,.5) 0%, transparent 60%),
    linear-gradient(200deg, #241052 0%, #3d1c96 38%, #6d3ce8 72%, #9165f0 100%);
  transform-origin: 50% 60%;
}
.cta-head { max-width: 48rem; color: #fff; }
.cta-sub { margin-top: 18px; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; font-weight: 300; color: rgba(255,255,255,.8); }
/* the calendar card: white, so Cal's light theme sits on it cleanly; space reserved so nothing jumps */
.cta-cal {
  position: relative; margin-top: var(--h-gap); border-radius: var(--r-card); background: #fff; overflow: hidden;
  min-height: 640px; box-shadow: 0 40px 100px rgba(10,4,30,.35);
}
.cal-inline { width: 100%; min-height: 640px; overflow: auto; }
/* while Cal.id loads: the outline of a month, gently pulsing (js/booking.js removes it when the calendar is ready) */
.cal-wait {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: #fff;
  transition: opacity .5s ease;
}
.cta-cal.is-ready .cal-wait { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility 0s .5s; }
.cta-cal.is-ready .cal-wait-grid i { animation: none; }
.cal-wait-inner { display: grid; justify-items: center; gap: 22px; width: min(340px, 80%); }
.cal-wait-bar { width: 46%; height: 12px; border-radius: 6px; background: #efeaf8; }
.cal-wait-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; width: 100%; }
.cal-wait-grid i { aspect-ratio: 1; border-radius: 10px; background: #ece6f8; opacity: .45; animation: cal-pulse 1.6s ease-in-out infinite; }
.cal-wait-grid i:nth-child(3n) { animation-delay: .2s; }
.cal-wait-grid i:nth-child(3n + 1) { animation-delay: .4s; }
.cal-wait-t { font-size: 14px; color: var(--grey-6); }
/* Cal.id slow to load: offer the booking page itself (js/booking.js adds .is-slow after a few seconds) */
.cal-wait-link { display: none; font-size: 14px; font-weight: 500; color: var(--p-vio); text-decoration: underline; text-underline-offset: 3px; }
.cta-cal.is-slow .cal-wait-link { display: block; }
.cal-wait-link:focus-visible { outline: 2px solid var(--p-vio); outline-offset: 3px; border-radius: 4px; }
@keyframes cal-pulse { 50% { opacity: 1; } }   /* opacity only: the graphics chip animates it, not the page */
.cal-fallback { padding: 40px; font-size: 16px; }
.cal-fallback a { color: var(--p-vio); text-decoration: underline; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- footer: black panel, inset like the slides ---------- */
.site-foot { padding: 14px; background: #fff; }
.foot-panel {
  position: relative; overflow: hidden; border-radius: var(--r-slide); color: #fff;
  padding: clamp(40px, 7vh, 64px) calc(6vw - 14px) clamp(24px, 4vh, 36px);
  background:
    radial-gradient(45% 60% at 10% 110%, rgba(123,69,245,.28) 0%, transparent 70%),
    #050505;
}
.foot-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.foot-links a { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.72); transition: color .2s; }
.foot-links a:hover, .foot-links a:focus-visible { color: #fff; }
/* the name, set large in the headings' face, running the width of the panel */
.foot-mark {
  margin: clamp(48px, 10vh, 110px) 0 clamp(20px, 3vh, 32px);
  font-family: var(--font-display); font-weight: 400; letter-spacing: .01em;
  font-size: clamp(4.5rem, 28.8vw, 32rem); line-height: .82; color: #fff;   /* runs the width of the panel */
}
.foot-base {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16);
}
.foot-base p, .foot-base a { font-size: 13.5px; color: rgba(255,255,255,.6); }
.foot-base a:hover, .foot-base a:focus-visible, .foot-base a[aria-current] { color: #fff; }
/* ©, Privacy Policy and Cookie settings sit together on the left, Back to top on the right */
.foot-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.foot-cookie {
  all: unset; cursor: pointer; font-size: 13.5px; color: rgba(255,255,255,.6); transition: color .2s;
}
.foot-cookie:hover, .foot-cookie:focus-visible { color: #fff; }
.foot-cookie:focus-visible, .foot-base a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* ---------- cookie choices (js/consent.js): a small white card at the bottom, like the nav pill.
   No backdrop, nothing locked: the page stays fully usable behind it. Both buttons look identical. ---------- */
.cookie-banner {
  position: fixed; left: 50%; bottom: 16px; z-index: 150;
  width: min(680px, calc(100% - 24px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px;
  padding: 16px 16px 16px 24px; border-radius: var(--r-card);
  background: #fff; color: var(--ink); font-family: 'Onest', 'Inter', -apple-system, sans-serif;
  box-shadow: 0 1px 2px rgba(10,10,20,.08), 0 18px 50px rgba(10,10,20,.2);
  opacity: 0; transform: translate(-50%, 16px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.is-open { opacity: 1; transform: translate(-50%, 0); }
.cookie-banner[hidden] { display: none; }
.cookie-banner:focus { outline: none; }
.cookie-text { font-size: 14.5px; line-height: 1.5; color: #3d3b45; }
.cookie-text a {
  color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(123,69,245,.5); white-space: nowrap;
}
.cookie-text a:hover { color: var(--p-vio); }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookie-btn {
  all: unset; box-sizing: border-box; cursor: pointer; text-align: center; white-space: nowrap;
  height: 44px; min-width: 136px; padding: 0 18px; border-radius: 12px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; line-height: 44px;
  transition: background .2s;
}
.cookie-btn:hover { background: #2a2a31; }
.cookie-btn:focus-visible, .cookie-text a:focus-visible { outline: 2px solid var(--p-vio); outline-offset: 3px; border-radius: 12px; }
.cookie-text a:focus-visible { border-radius: 4px; }
@media (max-width: 640px) {
  .cookie-banner { grid-template-columns: minmax(0, 1fr); bottom: 12px; padding: 16px; gap: 12px; }
  .cookie-btn { min-width: 0; }
}

/* ---------- responsive ---------- */

/* Tablet / small laptop */
@media (max-width: 900px) {
  .nav-pill { max-width: calc(100vw - 24px); }
  .nav-item { padding: 0 14px; }
  .nav-cta { padding: 0 16px; }

  /* Hero: copy anchors bottom-left, the star keeps the upper right */
  .hero-copy { justify-content: flex-end; padding-bottom: clamp(40px, 8vh, 72px); }
  #star-canvas { right: -22%; width: 96%; opacity: .85; }
  .ring { width: 260px; height: 400px; }
  .work { width: 84vw !important; }

  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  /* service rows: name + icon on one line, the one-liner beneath, details stacked */
  .svc-btn { grid-template-columns: minmax(0, 1fr) 46px; row-gap: 10px; }
  .svc-name { grid-column: 1; grid-row: 1; }
  .svc-icon { grid-column: 2; grid-row: 1 / span 2; }
  .svc-line { grid-column: 1; grid-row: 2; }
  .svc-more-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .svc-bg { inset: -1px -14px; border-radius: 16px; }

  /* Process: title top, steps bottom, the star sits in the space between (js/main.js) */
  .process-ui { width: auto; right: 4.5%; bottom: 6%; }

  .gal-item { box-shadow: 0 12px 30px rgba(0,0,0,.5); }
}

/* Phone */
@media (max-width: 560px) {
  :root { font-size: clamp(13px, 3.6vw, 16px); }

  /* Nav: one full-width bar. Logo on the left; Book a Call and the menu button on the right.
     Services / Work / FAQ live in the menu (js/nav.js). */
  .nav { top: 10px; padding: 0 10px; }
  .nav-pill { flex: 1; max-width: none; }
  .nav-logo { margin-right: auto; border-right: 0; padding: 0 14px; gap: 8px; }
  .nav-name { font-size: 19px; }
  .nav-item { display: none; }
  .nav-cta { padding: 0 16px; font-size: 13px; }
  .nav-menu { display: grid; }
  .nav-sheet { display: block; }
  .foot-links { gap: 8px 24px; }

  /* shorter pinned scenes: the same story in fewer swipes, so the page never feels stuck */
  .showcase { height: 560vh; }
  .sphere-sec { height: 380vh; }
  .star-moment { height: 320vh; }
  .services::after { height: 40vh; }
  .card { box-shadow: 0 16px 40px rgba(10,5,30,.28); }   /* big soft shadows are costly to move in 3D */

  /* Hero: full-width copy, bottom-left; the star stays softly in the top half */
  .hero-copy { left: 6%; right: 6%; max-width: none; padding-bottom: 7vh; }
  .hero-copy p { max-width: 100%; margin: 1rem 0 1.5rem; }
  #star-canvas { right: -18%; top: -18%; width: 118%; height: 78%; opacity: .55; }

  /* Showcase carousel scaled to fit narrow screens (card contents scale with the card's width) */
  .ring { width: 74vw; height: 112vw; }

  /* Belief: orb is framed to ~60% of the width on portrait screens (js/sphere.js) */
  .dark-slide { --orb-r: 30vw; }

  .services-inner, .faq-inner, .who-wrap { width: calc(100% - 12vw); }
  .svc-icon { width: 42px; height: 42px; }

  .process-ui { left: 6%; right: 6%; top: 11%; bottom: 6%; }

  .who-item { padding: 18px 0; gap: 16px; grid-template-columns: minmax(0, 1fr) 42px; }
  .who-check { width: 42px; height: 42px; }
  .who-msg { font-size: 15px; }

  /* Portfolio: the projects stack and scroll with the page (no sideways pan here, js/main.js), each cover in the
     same 5:4 frame (it keeps every device whole), with the name and line underneath */
  .portfolio { height: auto; padding: clamp(84px, 12vh, 112px) 0 clamp(64px, 9vh, 88px); }
  .portfolio .sticky { position: static; height: auto; overflow: visible; display: block; }
  .track { flex-direction: column; gap: 52px; padding: 0 6vw; }
  .work { width: 100% !important; height: auto; display: flex; flex-direction: column; overflow: visible; border-radius: 0; }
  .work::after { display: none; }
  .work img { height: auto; aspect-ratio: 5 / 4; border-radius: var(--r-card); }
  .work:hover img { transform: none; }
  .work-title { position: static; order: 2; margin-top: 18px; font-size: 1.9rem; }
  .work-meta { position: static; order: 3; margin-top: 8px; font-size: 14.5px; color: rgba(255,255,255,.66); }
  .work-go { top: 12px; right: 12px; background: rgba(10,10,12,.35); border-color: rgba(255,255,255,.5); }

  /* Gallery: a slightly shorter panel with a narrower inset; smaller pieces (js/gallery.js); the hint says swipe */
  .gallery { height: 88vh; height: 88svh; }
  .gal-view { inset: 8px; border-radius: 20px; }
  .gal-view::after { box-shadow: inset 0 0 40px 14px #0b0b10; }
  .gal-item { border-radius: 12px; }
  .gal-hint { font-size: 13px; padding: 9px 16px; }

  /* What we do, opened: a little tighter */
  .svc-get-card { padding: 16px; }

  /* CTA: narrower inset; the calendar card runs almost edge to edge so Cal's mobile layout has room */
  .cta { padding: 8px 8px 0; }
  .cta-panel { padding: 96px 12px 12px; }
  .cta-top { padding: 0 max(0px, calc(6vw - 20px)); }   /* heading on the page's 6vw text edge */
  .cta-cal { border-radius: 16px; }
  .btn { height: 46px; padding: 0 20px; font-size: 14px; }
}

/* Avoid iOS auto-inflating text on orientation change */
html { -webkit-text-size-adjust: 100%; }

/* ---------- fallback if the animation library can't load ----------
   Every visitor gets the scroll scenes: js/main.js adds .scenes to <html> as soon as GSAP has loaded, whatever the
   device's Reduce Motion setting. Only if GSAP fails to download (a blocked or down CDN) does .scenes stay off;
   then each section sits at its natural height with its content at rest, instead of tall sections standing empty. */
html:not(.scenes) .showcase,
html:not(.scenes) .sphere-sec,
html:not(.scenes) .portfolio,
html:not(.scenes) .star-moment { height: auto; }
html:not(.scenes) .showcase .sticky,
html:not(.scenes) .sphere-sec .sticky,
html:not(.scenes) .portfolio .sticky,
html:not(.scenes) .star-moment .sticky { position: relative; top: auto; height: auto; overflow: visible; display: block; perspective: none; }
html:not(.scenes) .sphere-sec .slide,
html:not(.scenes) .star-moment .slide { position: relative; inset: auto; margin: 0 14px; }

/* hero: one screen, as it opens; then the marquee line becomes the heading over the four cards */
html:not(.scenes) .showcase .sticky { display: flex; flex-direction: column; place-items: normal; }
html:not(.scenes) .hero-backdrop { display: none; }
html:not(.scenes) .morph-panel {
  order: -1; position: relative; top: 0; left: 0; width: auto; margin: 14px;
  height: calc(100vh - 28px); height: calc(100svh - 28px);
}
html:not(.scenes) .marquee {
  position: static; transform: none; overflow: visible; white-space: normal;
  width: min(1320px, 100% - 12vw); margin: 0 auto; padding: var(--sec-pad) 0 var(--h-gap);
}
html:not(.scenes) .marquee-track { display: block; }
html:not(.scenes) .marquee-track span { display: block; max-width: 15em; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: .01em; text-wrap: balance; }
html:not(.scenes) .marquee-track span + span, html:not(.scenes) .marquee-track i { display: none; }
html:not(.scenes) .ring-stage {
  position: static; display: block; place-items: normal; width: min(1320px, 100% - 12vw); height: auto;
  margin: 0 auto; padding-bottom: var(--sec-pad); perspective: none;
}
html:not(.scenes) .ring {
  width: auto; height: auto; transform: none; transform-style: flat;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px);
}
html:not(.scenes) .card { position: relative; inset: auto; transform: none; aspect-ratio: 290 / 445; box-shadow: 0 20px 50px rgba(10,5,30,.2); }
/* the order the carousel shows them in: the thesis first */
html:not(.scenes) .card-catalist { order: 1; }
html:not(.scenes) .card-analyser { order: 2; }
html:not(.scenes) .card-lime { order: 3; }

/* what we believe: the orb, still, above the statement and its three lines */
html:not(.scenes) .dark-slide { padding: clamp(16px, 3vh, 40px) 6vw var(--sec-pad); }
html:not(.scenes) #sphere-canvas { position: relative; inset: auto; display: block; height: clamp(300px, 52vh, 520px); }
html:not(.scenes) .belief-stage {
  position: static; padding: 0; max-width: 38rem; margin: 0 auto; text-align: center;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: clamp(1.25rem, 3vh, 2rem);
}
html:not(.scenes) .bf { grid-area: auto; display: block; }
html:not(.scenes) .bf .side-l, html:not(.scenes) .bf .side-r,
html:not(.scenes) .bf-2 .side-r > *, html:not(.scenes) .bf-3 .side-r > span { display: inline; text-align: inherit; margin: 0; }
html:not(.scenes) .bf-title { margin-bottom: .5rem; text-wrap: balance; }
html:not(.scenes) .bf-1, html:not(.scenes) .bf-2, html:not(.scenes) .bf-3 { font-size: clamp(1.1rem, 1.6vw, 1.45rem); text-wrap: balance; }

/* what we do: no hold on screen (it only slows the page between two scroll scenes) */
html:not(.scenes) .services::after { display: none; }
html:not(.scenes) .services-pin { position: relative; top: auto; }

/* work: equal 5:4 covers in a grid (two across on wide screens) */
html:not(.scenes) .portfolio { padding: var(--sec-pad) 0; }
html:not(.scenes) .track {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(20px, 2vw, 28px);
  width: min(1320px, 100% - 12vw); margin: 0 auto; padding: 0; transform: none;
}
html:not(.scenes) .work { width: auto !important; height: auto; aspect-ratio: 5 / 4; }
html:not(.scenes) .work-title { font-size: clamp(2rem, 3vw, 3.2rem); }

/* how we work: the title, then all four steps side by side; the star stays in the scroll scene */
html:not(.scenes) .star-moment { padding: 14px 0; }
html:not(.scenes) #star-canvas-2 { display: none; }
html:not(.scenes) .process-ui { position: relative; inset: auto; width: auto; padding: var(--sec-pad) calc(6vw - 14px); }
html:not(.scenes) .process-now { margin-top: var(--h-gap); }
html:not(.scenes) .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.6rem clamp(24px, 3vw, 48px); }
html:not(.scenes) .step-title { font-size: clamp(1.6rem, 2.1vw, 2.3rem); }

@media (max-width: 900px) {
  html:not(.scenes) .ring { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:not(.scenes) .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  html:not(.scenes) .ring { grid-template-columns: minmax(0, 1fr); max-width: 400px; margin: 0 auto; gap: 18px; }
  html:not(.scenes) .steps { grid-template-columns: minmax(0, 1fr); }
  html:not(.scenes) .star-moment .slide, html:not(.scenes) .sphere-sec .slide { margin: 0 8px; }
  html:not(.scenes) .star-moment { padding: 8px 0; }
  html:not(.scenes) .process-ui { padding: 88px calc(6vw - 8px) 72px; }
  html:not(.scenes) .dark-slide { padding: 8px calc(6vw - 8px) 88px; }
  html:not(.scenes) #sphere-canvas { height: 380px; }
  /* phones keep the stacked cards with the name under each cover (the 560px block above) */
  html:not(.scenes) .track { gap: 52px; }
  html:not(.scenes) .work { aspect-ratio: auto; }
  html:not(.scenes) .work-title { font-size: 1.9rem; }
}