/* ============================================================
   WOXAL aurora-dark design system
   ============================================================ */

:root{
  --bg:        #08060f;
  --bg-soft:   #0d0a18;
  --surface:   #131022;
  --line:      rgba(185,166,240,.16);
  --line-soft: rgba(185,166,240,.08);

  --purple:    #967ae6;
  --lavender:  #b9a6f0;
  --cream:     #f2eefc;
  --indigo:    #4b3fbf;
  --teal:      #2ec4d4;
  --amber:     #e59433;
  --hot:       #ff6e50;

  --ink:       #f2eefc;
  --ink-dim:   rgba(242,238,252,.62);
  --ink-faint: rgba(242,238,252,.60);

  --holo: linear-gradient(100deg, #b9a6f0, #967ae6 30%, #4bc4d4 62%, #e59433 100%);

  --font-head: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-word: "Josefin Sans", sans-serif;

  --pad: clamp(1.25rem, 4vw, 3.5rem);

  /* One vertical scale. Every vertical value on the page resolves to a step below,
     so the page rhythm is retuned here and nowhere else. */
  --s-1: .3rem;
  --s-2: .5rem;
  --s-3: .8rem;
  --s-4: 1.1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.6rem;
  --s-8: 3.4rem;
  --nav-h: 5rem;                            /* fixed-nav clearance for a page's first block */

  /* One clamp per role, floor to ceiling, so the rhythm is the same everywhere and
     simply scales with the viewport. No breakpoint redefines these. */
  --sy: clamp(3.5rem, 7vw, 7rem);           /* section padding, no multipliers anywhere */
  --sy-head: clamp(2rem, 4vw, 3.5rem);      /* section heading block down to its content */
  --sy-card: 1.2rem;                        /* between cards in a grid: tight, same at every width */
  --sy-row: clamp(1.6rem, 3vw, 2.6rem);     /* inside divider-separated rows: services, FAQ */
  --sy-block: clamp(2.6rem, 5vw, 4.5rem);   /* between sub-blocks inside one section */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  background:#08060f; /* overscroll rubber-band stays dark */
  color-scheme:dark;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--purple); color:var(--bg); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2a2244; border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:var(--purple); }

/* film grain unifies the aurora / halftone textures site-wide */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:150;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; }
img, svg{ display:block; }

:focus-visible{ outline:2px solid var(--lavender); outline-offset:3px; border-radius:2px; }

section[id], main[id]{ scroll-margin-top:4.5rem; }

.container{
  width:min(1320px, 100%);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ============ shared type ============ */

.eyebrow{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--lavender);
}
.eyebrow-num{
  font-family:var(--font-word);
  font-weight:300;
  font-size:.78rem;
  color:currentColor;
  opacity:.55;
  margin-left:.35rem;
}
.eyebrow-num::before{ content:"/ "; opacity:.6; }
.eyebrow-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--holo);
  flex:none;
  margin-top:.22em; /* optically centers on the first line even when the eyebrow wraps */
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(150,122,230,.5); }
  50%{ box-shadow:0 0 0 6px rgba(150,122,230,0); }
}

.section-title{
  font-family:var(--font-head);
  font-size:clamp(2rem, 4.6vw, 3.4rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.02em;
  text-transform:uppercase;
  max-width:18ch;
  text-wrap:balance;
}

.section-head{
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
  margin-bottom:var(--sy-head);
}

.holo{
  font-style:normal;
  background:var(--holo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% 100%;
  animation:holo-shift 7s ease-in-out infinite alternate;
}
@keyframes holo-shift{
  from{ background-position:0% 50%; }
  to{ background-position:100% 50%; }
}
/* The holo gradient only signals emphasis while it stays rare. It was running on
   every section title, 12 uses in all, which flattened it into decoration. It is
   kept for the hero, Results and the closing Contact title. To give it back to a
   section, delete that section's selector from the list below. */
.work .section-title em.holo,
.reality .section-title em.holo,
.services .section-title em.holo,
.testimonials .section-title em.holo,
.faq .section-title em.holo{
  background:none;
  color:var(--ink);
  animation:none;
}

.holo-dark{
  font-style:normal;
  background:linear-gradient(100deg, #5636c9, #7c5bd9 35%, #0e8a99 70%, #b0640a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ============ buttons ============ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  font-family:var(--font-head);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:var(--s-4) 2.1rem;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  position:relative;
  transition:transform .3s var(--ease-out), background .3s, color .3s, border-color .3s, box-shadow .3s;
  will-change:transform;
}
.btn-fill{
  background:var(--cream);
  color:var(--bg);
}
.btn-fill:hover{
  background:var(--purple);
  color:var(--cream);
  box-shadow:0 8px 40px rgba(150,122,230,.35);
}
.btn-ghost{
  border-color:var(--line);
  color:var(--ink);
}
.btn-ghost:hover{
  border-color:var(--purple);
  color:var(--lavender);
}
.btn-small{ padding:var(--s-3) 1.4rem; font-size:.7rem; }


/* ============ loader ============ */

.loader{
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--bg);
  display:grid;
  place-items:center;
  transition:opacity .38s ease, visibility .38s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader-icon{
  height:120px;
  opacity:0;
  animation:loader-in .5s var(--ease-out) forwards;
}
@keyframes loader-in{
  from{ opacity:0; transform:translateY(10px) scale(.94); }
  to{ opacity:1; transform:none; }
}

/* ============ brand marks ============ */

.brand-icon, .brand-word{
  display:block;
  flex:none;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
}
.brand-icon{
  aspect-ratio:.835;
  background:var(--purple);
  -webkit-mask-image:url("assets/brand/woxal-icon.png");
  mask-image:url("assets/brand/woxal-icon.png");
}
.brand-word{
  aspect-ratio:6.919;
  background:var(--lavender);
  -webkit-mask-image:url("assets/brand/woxal-wordmark.png");
  mask-image:url("assets/brand/woxal-wordmark.png");
}

/* ============ cursor glow ============ */

.cursor-glow{
  position:fixed;
  width:520px; height:520px;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(circle, rgba(150,122,230,.09) 0%, transparent 60%);
  left:0; top:0;
  transform:translate(-999px,-999px) translate(-50%,-50%);
  will-change:transform;
}

/* ============ nav ============ */

.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  gap:var(--s-7);
  padding:var(--s-4) var(--pad);
  transition:background .4s, backdrop-filter .4s, padding .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,6,15,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line-soft);
  padding-block:var(--s-3);
}
.nav-progress{
  position:absolute;
  left:0; bottom:-1px;
  height:2px;
  width:100%;
  background:var(--holo);
  transform:scaleX(0);
  transform-origin:left;
  opacity:0;
  transition:opacity .4s;
}
.nav.scrolled .nav-progress{ opacity:1; }
.nav-brand{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  margin-right:auto;
}
.nav-icon{ height:30px; transition:background .3s; }
.nav-word{ height:15px; transition:background .3s; }
.nav-brand:hover .nav-icon, .nav-brand:hover .nav-word{ background:var(--lavender); }
.nav-links{ display:flex; gap:2.2rem; }
.nav-links a{
  font-size:.82rem;
  font-weight:400;
  color:var(--ink-dim);
  letter-spacing:.06em;
  position:relative;
  transition:color .3s;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-5px;
  width:100%; height:1px;
  background:var(--holo);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); transform-origin:left; }

.nav-burger{
  display:none;
  flex-direction:column;
  gap:var(--s-1);
  background:none;
  border:none;
  cursor:pointer;
  padding:var(--s-2);
}
.nav-burger span{
  width:26px; height:1.5px;
  background:var(--ink);
  transition:transform .3s var(--ease-out), opacity .3s;
}
.nav-burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(8,6,15,.96);
  backdrop-filter:blur(20px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--s-5);
  padding:var(--pad);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s, visibility .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu a{
  font-family:var(--font-head);
  font-size:clamp(1.8rem, 8vw, 2.6rem);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--ink);
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.mobile-menu.open a{ opacity:1; transform:none; }
.mobile-menu.open a:nth-child(1){ transition-delay:.05s; }
.mobile-menu.open a:nth-child(2){ transition-delay:.1s; }
.mobile-menu.open a:nth-child(3){ transition-delay:.15s; }
.mobile-menu.open a:nth-child(4){ transition-delay:.2s; }
.mobile-menu.open a:nth-child(5){ transition-delay:.25s; }
.mobile-menu a:hover{ color:var(--purple); }

/* ============ hero ============ */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* the cue lives in the bottom padding, so that padding has to be big enough to
     hold it or the hero grows past 100svh and the cue falls below the fold */
  padding:calc(var(--nav-h) + var(--s-5)) var(--pad) calc(var(--s-8) + 2.6rem);
  overflow:hidden;
}
.aurora{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.9;
  /* low-res buffer + bilinear upscale does the softening, no CSS blur (GPU-heavy) */
}
.halftone{
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(242,238,252,.10) 1px, transparent 1.5px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 60% 40%, black 0%, transparent 70%);
  mask-image:radial-gradient(ellipse 90% 80% at 60% 40%, black 0%, transparent 70%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:2;
  width:min(1320px, 100%);
  margin-inline:auto;
}


.hero-title{
  font-family:var(--font-head);
  font-size:clamp(2.6rem, 7.4vw, 5.8rem);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.hero-title strong{ font-weight:700; }

.line{ display:block; overflow:hidden; padding-block:.04em; }
.line-inner{
  display:inline-block;
  transform:translateY(110%);
  animation:line-up 1s var(--ease-out) forwards;
}
.line:nth-child(1) .line-inner{ animation-delay:.55s; }
.line:nth-child(2) .line-inner{ animation-delay:.67s; }
.line:nth-child(3) .line-inner{ animation-delay:.79s; }
.line:nth-child(4) .line-inner{ animation-delay:.91s; }
@keyframes line-up{ to{ transform:translateY(0); } }

.hero-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-8);
  margin-top:var(--s-7);
  opacity:0;
  animation:fade-up 1s var(--ease-out) 1.25s forwards;
}
@keyframes fade-up{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:none; }
}
.hero-sub{
  max-width:52ch;
  font-size:clamp(1.05rem, 1.35vw, 1.22rem);
  line-height:1.5;
  color:rgba(242,238,252,.80);
}
.hero-ctas{ display:flex; gap:1rem; flex:none; flex-wrap:wrap; }

.hero-scroll{
  position:absolute;
  bottom:2.2rem;
  left:var(--pad);
  z-index:2;
  display:flex;
  align-items:center;
  gap:var(--s-4);
  font-size:.68rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-faint);
  opacity:0;
  animation:fade-up 1s ease 1.8s forwards;
}
.hero-scroll-line{
  width:56px; height:1px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
.hero-scroll-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--holo);
  transform:translateX(-100%);
  animation:scroll-slide 2.2s ease-in-out infinite;
}
@keyframes scroll-slide{
  0%{ transform:translateX(-100%); }
  60%,100%{ transform:translateX(100%); }
}

/* ============ clients ============ */

@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.clients{
  padding:var(--s-8) var(--pad);
  text-align:center;
  border-top:1px solid var(--line-soft);
}
.clients-label{
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:var(--sy-head);
}
.clients-marquee{
  /* Full bleed. Negative margins cancel .clients' own gutter, which reaches the
     viewport edge without 100vw and so without the scrollbar overflow that
     comes with it. The fade is a fixed distance rather than a percentage: at
     12% a wide screen spent nearly 200px a side fading before a logo appeared. */
  width:auto;
  margin-inline:calc(var(--pad) * -1);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 56px, black calc(100% - 56px), transparent);
  mask-image:linear-gradient(90deg, transparent, black 56px, black calc(100% - 56px), transparent);
  padding-block:var(--s-1);
}
.clients-track{
  display:flex;
  width:max-content;
  animation:marquee 22s linear infinite;
}
.clients-group{
  display:flex;
  align-items:center;
  gap:clamp(4rem, 9vw, 9rem);
  padding-right:clamp(4rem, 9vw, 9rem);
  flex:none;
}
.client-logo{
  display:block;
  height:calc(var(--h, 44px) * var(--logo-scale, 1));
  aspect-ratio:var(--ar, 3);
  flex:none;
  background:rgba(248,246,255,.88);
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
  transition:background .4s;
  animation:logo-float 5.8s ease-in-out infinite alternate;
}
.client-logo:hover{ background:var(--lavender); }
.client-logo:nth-child(4n+1){ animation-delay:0s;    animation-duration:5.4s; }
.client-logo:nth-child(4n+2){ animation-delay:-1.7s; animation-duration:6.3s; }
.client-logo:nth-child(4n+3){ animation-delay:-3.1s; animation-duration:5.1s; }
.client-logo:nth-child(4n+4){ animation-delay:-2.2s; animation-duration:6.8s; }
@keyframes logo-float{
  from{ transform:translateY(4px); }
  to{ transform:translateY(-4px); }
}

/* ============ written testimonials ============ */

.quote-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--s-5);
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(170deg, var(--surface), transparent 70%);
  padding:var(--s-6);
  transition:border-color .4s;
}
.quote-card:hover{ border-color:var(--purple); }
.quote-card blockquote{
  color:var(--ink);
  font-size:.97rem;
  line-height:1.65;
}
.quote-card blockquote::before{
  content:"“";
  display:block;
  font-family:var(--font-head);
  font-size:2.4rem;
  line-height:.6;
  color:var(--purple);
  margin-bottom:var(--s-3);
}
.quote-card figcaption{
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  padding-top:var(--s-4);
  border-top:1px solid var(--line-soft);
}
.quote-card figcaption strong{
  font-family:var(--font-head);
  font-size:.92rem;
  font-weight:600;
}
.quote-card figcaption span{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ============ 2026 reality ============ */

.reality{ padding:var(--sy) 0; }

.reality-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sy-card);
}
.reality-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(170deg, var(--surface), transparent 70%);
  padding:var(--s-6);
  position:relative;
  overflow:hidden;
  transition:border-color .4s, transform .4s var(--ease-out);
}
.reality-card:hover{ border-color:var(--purple); transform:translateY(-4px); }
.reality-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:var(--holo);
  opacity:0;
  transition:opacity .4s;
}
.reality-card:hover::before{ opacity:1; }
.reality-num{
  font-family:var(--font-word);
  font-weight:100;
  font-size:2.6rem;
  line-height:1;
  color:var(--purple);
  display:block;
  margin-bottom:var(--s-5);
}
.reality-card h3{
  font-family:var(--font-head);
  font-size:1.08rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:var(--s-3);
}
.reality-card p{
  color:var(--ink-dim);
  font-size:.93rem;
  line-height:1.65;
}

/* ============ results ============ */

.results{ padding:var(--sy) 0; border-top:1px solid var(--line-soft); }

.case-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--sy-card);
}
/* the four cases sit on one row once there is room for it */
@media (min-width: 1200px){
  .case-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
.case-card{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(170deg, var(--surface), transparent 70%);
  padding:var(--s-6);
  transition:border-color .4s, transform .4s var(--ease-out);
}
.case-card:hover{ border-color:var(--purple); transform:translateY(-4px); }
.case-brand{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.case-headline{
  font-family:var(--font-head);
  font-size:1.12rem;
  font-weight:600;
  line-height:1.3;
  text-wrap:balance;
}
.case-num{
  font-style:normal;
  display:block;
  font-size:clamp(2.6rem, 5vw, 3.4rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  margin-bottom:var(--s-1);
  background:var(--holo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-variant-numeric:tabular-nums;
}
.case-stats{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  padding-top:var(--s-1);
  border-top:1px solid var(--line-soft);
  margin-top:var(--s-1);
}
.case-stats li{
  font-size:.95rem;
  color:var(--ink-dim);
  padding-top:var(--s-2);
}
.case-stats strong{ color:var(--ink); font-weight:600; }
.case-note{
  padding-left:.9rem;
  border-left:2px solid var(--line);
  font-size:.95rem;
  line-height:1.65;
  color:var(--ink-faint);
  margin-top:auto;
}


/* ============ services ============ */

.services{ padding:var(--sy) 0; }

.services-list{ border-top:1px solid var(--line-soft); }

.service{
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:var(--s-6);
  align-items:start;
  padding:var(--sy-row) 0;
  border-bottom:1px solid var(--line-soft);
  position:relative;
  transition:padding-left .45s var(--ease-out);
}
.service::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  background:linear-gradient(90deg, rgba(150,122,230,.07), transparent 55%);
  opacity:0;
  transition:opacity .45s;
  pointer-events:none;
}
.service:hover::before{ opacity:1; }

.service-index{
  font-family:var(--font-word);
  font-weight:100;
  font-size:2.1rem;
  color:var(--ink-faint);
  line-height:1;
  padding-top:var(--s-1);
  transition:color .4s;
}
.service:hover .service-index{ color:var(--purple); }

.service-body h3{
  font-family:var(--font-head);
  font-size:clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin-bottom:var(--s-3);
  transition:color .4s;
}
.service:hover .service-body h3{ color:var(--lavender); }
.service-body p{
  color:var(--ink-dim);
  max-width:60ch;
  font-size:.98rem;
}

/* The right half of each service row was empty. The stage label fills it and
   ties the service back to the flowbar above. Hidden below 1000px, where the
   row has no spare width to give it. */
.service-stage{
  display:none;
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:.5rem;
  border-top:1px solid var(--line-soft);
  align-self:start;
  transition:color .4s, border-color .4s;
}
@media (min-width: 1000px){
  .service{ grid-template-columns:5.5rem minmax(0, 1fr) 13rem; }
  .service-stage{ display:block; }
}
.service:hover .service-stage{
  color:var(--lavender);
  border-top-color:var(--purple);
}


/* picked from the stage bar: one row at a time. Extra specificity beats [data-reveal].in */
.services-list .service.is-focus{ transform:translateY(-4px); border-bottom-color:var(--purple); }
.services-list .service:has(+ .service.is-focus){ border-bottom-color:var(--purple); }
.services-list:has(> .service.is-focus:first-child){ border-top-color:var(--purple); }
.service.is-focus::before{ opacity:1; }
.service.is-focus .service-index{ color:var(--purple); }
.service.is-focus .service-body h3{
  background:var(--holo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ============ method (light section) ============ */

.method{
  background:var(--cream);
  color:#151022;
  padding:var(--sy) 0;
  position:relative;
  border-radius:clamp(20px, 3vw, 40px);
  margin-inline:clamp(8px, 1vw, 16px);
  overflow:clip; /* clips like hidden but does NOT create a scroll container, so the dial can stay sticky */
}
.method::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(21,16,34,.07) 1px, transparent 1.5px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg, black, transparent 40%);
  mask-image:linear-gradient(180deg, black, transparent 40%);
  pointer-events:none;
}
.method .eyebrow{ color:#6a4fd0; }
.method .section-title{ color:#151022; }


.method-nav{
  display:flex;
  gap:var(--s-3);
}
.method-arrow{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(21,16,34,.2);
  background:none;
  color:#151022;
  cursor:pointer;
  transition:background .3s, border-color .3s, color .3s, opacity .3s;
}
.method-arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.method-arrow:hover:not(:disabled){ background:var(--purple); border-color:var(--purple); color:var(--cream); }
.method-arrow:focus-visible{ outline:2px solid #6a4fd0; outline-offset:3px; }
.method-arrow:disabled{ opacity:.3; cursor:default; }

/* ============ work ============ */

.work-marquee.dragging{ cursor:grabbing; }
.work-card img, .work-card video{ -webkit-user-drag:none; pointer-events:none; }


.work{ padding:var(--sy) 0; }
.work-head{ margin-bottom:var(--sy-head); }

.work-marquee{
  overflow:hidden;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
}
.work-track{
  display:flex;
  width:max-content;
  will-change:transform;
}
.work-group{
  display:flex;
  align-items:flex-start;
  gap:clamp(.9rem, 1.6vw, 1.4rem);
  padding-right:clamp(.9rem, 1.6vw, 1.4rem);
  flex:none;
}

.work-card{
  width:clamp(132px, 13vw, 186px);
  flex:none;
}
.work-row-b{ margin-top:clamp(.9rem, 1.6vw, 1.4rem); }
.work-card img,
.work-card video{
  display:block;
  width:100%;
  height:auto; /* the width/height attrs would otherwise beat aspect-ratio */
  aspect-ratio:9 / 16;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  transition:border-color .4s, transform .5s var(--ease-out);
}
.work-card:hover img,
.work-card:hover video{
  border-color:var(--purple);
  transform:translateY(-6px);
}
.work-card figcaption{
  margin-top:var(--s-4);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  transition:color .4s;
}
.work-card:hover figcaption{ color:var(--lavender); }

/* ============ why-ads-fail closer ============ */

.reality-closer{
  margin-top:var(--sy-block);
  padding-top:var(--sy-block);
  border-top:1px solid var(--line-soft);
  max-width:64ch;
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
}
.reality-closer p{ color:var(--ink-dim); }
.reality-closer-lead{
  font-family:var(--font-head);
  font-size:clamp(1.3rem, 2.6vw, 1.85rem);
  font-weight:600;
  color:var(--ink) !important;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
/* the closer reads as a statement card, light against the dark section */
.reality-panel{
  position:relative;
  isolation:isolate;
  max-width:72ch;
  margin-top:var(--sy-block);
  padding:var(--s-7);
  border:none;
  border-radius:clamp(18px, 2.4vw, 28px);
  background:var(--ink);
  color:#151022;
  overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.reality-panel p{ color:rgba(21,16,34,.72); }
.reality-panel .reality-closer-lead{ color:#151022 !important; }
.reality-closer-kicker{
  margin-top:var(--s-1);
  font-weight:600;
  color:#151022 !important;
}
/* holo bar draws itself in when the panel scrolls into view */
.reality-panel::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:var(--holo);
  background-size:200% 100%;
  transform:scaleX(0);
  transform-origin:left;
  animation:holo-shift 7s ease-in-out infinite alternate;
}
.reality-panel.in::after{
  transform:scaleX(1);
  transition:transform 1.1s var(--ease-out) .15s;
}
/* cursor-tracked warmth, desktop only */
.reality-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(150,122,230,.20), transparent 62%);
  opacity:0;
  transition:opacity .45s var(--ease-out);
  pointer-events:none;
}
.reality-panel:hover::before{ opacity:1; }
.reality-panel:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 70px rgba(8,6,15,.55);
}

/* ============ services copy ============ */

.service-kicker{
  font-style:italic;
  color:var(--lavender) !important;
  margin-bottom:var(--s-4);
  font-size:.92rem !important;
}
.service-body p + p{ margin-top:var(--s-4); }

/* ============ method intro, closer ============ */

.method-intro{
  max-width:68ch;
  margin-bottom:var(--sy-head);
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
}
.method-lede{ display:flex; flex-direction:column; gap:var(--s-4); }
.method-lede p{ color:rgba(21,16,34,.72); font-size:1rem; }

/* deliberately the inverse of .reality-panel in section 02: same radius, same width,
   same role at the end of its section. That one is a white card in a dark section,
   this one is a dark card in the cream section, so the two read as a pair and the
   whole middle of the page sits between them. */
.method-closer{
  position:relative;
  overflow:hidden;
  margin-top:var(--sy-block);
  padding:var(--s-7);
  border:none;
  border-radius:clamp(18px, 2.4vw, 28px);
  /* Inverted twin of the light statement card in the section above: there a
     cream panel sits on the dark page, here a dark panel sits on the cream
     slab. The holo moves in the heading rather than behind the whole card. */
  background:#120d20;
  color:var(--ink);
  max-width:72ch;
}
.method-closer h3{
  font-family:var(--font-head);
  font-size:clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.01em;
  /* white headline, holo only on the emphasis, so it rhymes with the light
     statement card above it where only "not luck" carries the gradient */
  color:var(--ink);
  margin-bottom:var(--s-4);
}
/* colours for this panel now live with the inverted treatment further down */

/* ============ concept map ============ */

.concept{
  margin-top:var(--sy-block);
  padding-top:var(--sy-block);
  border-top:1px solid rgba(21,16,34,.14);
}

.concept-thread{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  z-index:0;
}
.concept-thread polyline{
  fill:none;
  stroke:var(--purple);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.55;
  stroke-dasharray:var(--dash, 0);
  stroke-dashoffset:var(--dash, 0);
  transition:stroke-dashoffset 1.1s var(--ease-out);
}


.concept-payoff{
  margin-top:var(--s-5);
  padding-left:1.2rem;
  border-left:2px solid var(--purple);
  max-width:62ch;
  font-size:1rem;
  line-height:1.65;
  color:rgba(21,16,34,.82);
}

/* ============ testimonials section ============ */

.testimonials{
  padding:var(--sy) 0;
  border-top:1px solid var(--line-soft);
}
/* ---- testimonial wall -----------------------------------------------
   Five testimonials, two of them video, as ONE set of cards rather than a
   video row above a text grid. Three columns:
     A  landscape video + the short quote
     B  the portrait video on its own (it is the tall one)
     C  the two long quotes
   A and B are in the ratio 1.630 : 1, which is sqrt(ar_land / ar_port) -- the
   widths that give the two videos EQUAL VISUAL AREA despite opposite shapes,
   so neither reads as the small one. Column heights are set by their content,
   so no quote can ever be clipped. Every card carries the same frame, border
   and hover as .quote-card, which is what ties the five together. */
.proof-wall{
  display:flex;
  align-items:stretch;             /* every column runs to the tallest one */
  gap:var(--sy-card);
  margin-top:var(--sy-block);
}
.proof-col{
  display:flex;
  flex-direction:column;
  gap:var(--sy-card);
  min-width:0;
}
/* Tuned so the portrait column is wide enough for its video to actually REACH
   the shared column height -- too narrow and the video runs out of width first
   and leaves a letterbox gap instead of growing. */
.proof-col--a{ flex:1.20 1 0; }    /* landscape video + the short quote */
.proof-col--b{ flex:1    1 0; }    /* portrait video, on its own        */
.proof-col--c{ flex:1.06 1 0; }    /* the two long quotes               */

/* Stretch only ever GROWS a column (the tallest sets the height, so nothing is
   ever squeezed and no quote can be clipped). The written cards share out the
   slack, which is what lets all three columns end on the same line. */
.proof-col > .quote-card{ flex:1 1 auto; }

/* The portrait card: its video takes whatever height is left once the caption
   is placed, and scales inside that box. object-fit:contain scales to FIT, so
   the frame is never cropped -- any leftover shows as card background, and the
   column ratios above are tuned to keep that leftover near zero. */
.proof-col--b .proof-item{ height:100%; }
.proof-col--b .proof-item video{
  flex:1 1 0;
  min-height:0;
  height:auto;
  aspect-ratio:auto;               /* height now comes from the column */
  object-fit:contain;
  background:transparent;          /* leftover blends into the card */
}

/* a video testimonial, framed exactly like a written one */
.proof-item{
  display:flex;
  flex-direction:column;
  margin:0;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(170deg, var(--surface), transparent 70%);
  overflow:hidden;                 /* video corners follow the card radius */
  transition:border-color .4s;
}
.proof-item:hover{ border-color:var(--purple); }
/* full-bleed media: padding here would shave a fixed amount off both columns
   and break the 1.630 width ratio the equal-area sizing depends on */
.proof-item video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:640 / 428;
  background:#000;
}
.proof-item.is-portrait video{ aspect-ratio:720 / 1280; }

/* Custom play affordance. The markup keeps the native controls attribute so the
   videos still work without JS; script.js strips it and adds this overlay, then
   hands the controls back the moment playback starts. Sizes and aspect ratios
   above are untouched on purpose. */
.pi-media{ position:relative; display:block; }
.pi-play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border:0;
  padding:0;
  background:linear-gradient(180deg, rgba(8,6,15,0) 40%, rgba(8,6,15,.55));
  cursor:pointer;
  transition:background .35s;
}
.pi-play:hover{ background:linear-gradient(180deg, rgba(8,6,15,.15) 30%, rgba(8,6,15,.65)); }
.pi-play span{
  width:62px;
  height:62px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(12,9,22,.55);
  border:1px solid rgba(242,238,252,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background .35s, border-color .35s, transform .35s var(--ease-out);
}
.pi-play:hover span{
  background:rgba(150,122,230,.8);
  border-color:rgba(242,238,252,.9);
  transform:scale(1.07);
}
/* nudged right so the triangle reads as optically centred in the circle */
.pi-play span::after{
  content:"";
  width:0; height:0;
  margin-left:5px;
  border-left:17px solid #f2eefc;
  border-top:10.5px solid transparent;
  border-bottom:10.5px solid transparent;
}
.proof-item.is-playing .pi-play{ display:none; }
@media (max-width: 600px){
  .pi-play span{ width:54px; height:54px; }
}
.proof-item figcaption{
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  padding:var(--s-5) var(--s-6) var(--s-6);
  border-top:1px solid var(--line-soft);
}
/* identical to .quote-card figcaption strong / span */
.proof-item figcaption strong{
  font-family:var(--font-head);
  font-size:.92rem;
  font-weight:600;
}
.proof-item figcaption span{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ============ contact offer ============ */


/* ============ faq ============ */

.faq{
  padding:var(--sy) 0;
  border-top:1px solid var(--line-soft);
}


.faq-items{ border-top:1px solid var(--line-soft); }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
  cursor:pointer;
  list-style:none;
  padding:var(--sy-row) 0;
  font-family:var(--font-head);
  font-size:clamp(1rem, 1.9vw, 1.2rem);
  font-weight:500;
  transition:color .3s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--lavender); }
.faq-icon{
  position:relative;
  width:16px; height:16px;
  flex:none;
}
.faq-icon::before, .faq-icon::after{
  content:"";
  position:absolute;
  background:var(--purple);
  transition:transform .35s var(--ease-out);
}
.faq-icon::before{ left:0; top:7px; width:16px; height:2px; }
.faq-icon::after{ left:7px; top:0; width:2px; height:16px; }
.faq-item[open] .faq-icon::after{ transform:scaleY(0); }
.faq-item p{
  padding:0 0 var(--s-6);
  color:var(--ink-dim);
  max-width:60ch;
}

/* ============ contact ============ */

.contact{
  position:relative;
  padding:var(--sy) 0;
  overflow:hidden;
  border-top:1px solid var(--line-soft);
}
/* The glow sits behind the calendar rather than washing the whole section.
   The canvas bleeds past the widget on every side and is masked to an ellipse,
   so colour escapes around the edges and the calendar reads as lifted off the
   page. Everything below it, the questions included, stays on plain ground. */
.cal-stage{
  position:relative;
  isolation:isolate;
  /* .contact-inner is a flex column with align-items:center, so this wrapper
     shrinks to its content unless told otherwise, and the embed collapses to a
     narrow strip. It inherits the width the embed used to carry itself. */
  width:100%;
  max-width:1000px;
  margin-top:var(--s-3);
}
.aurora-cal{
  position:absolute;
  /* explicit width and height, not inset plus auto: a canvas is a replaced
     element, so height:auto resolves to its intrinsic buffer height and the
     glow collapses to a 140px strip instead of stretching behind the widget */
  left:-7%;
  top:-12%;
  width:114%;
  height:124%;
  opacity:.85;
  z-index:0;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 50%, #000 26%, transparent 76%);
  mask-image:radial-gradient(ellipse 70% 68% at 50% 50%, #000 26%, transparent 76%);
}
.cal-stage .cal-embed{ position:relative; z-index:1; margin-top:0; max-width:none; }
.contact .halftone{
  opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse 68% 58% at 50% 30%, black 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 68% 58% at 50% 30%, black 0%, transparent 72%);
}
.contact-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--s-6);
}
.contact-title{
  font-family:var(--font-head);
  font-size:clamp(2.4rem, 7vw, 5.4rem);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.contact .line-inner{ transform:none; animation:none; }


.cal-embed{
  width:100%;
  max-width:1000px;
  margin-top:var(--s-3);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:var(--surface); /* Cal renders dark, so don't flash white while it loads */
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.cal-embed{ min-height:620px; }
.cal-embed iframe{
  display:block;
  width:100% !important;
  border:0;
}
.cal-embed-fallback{ min-height:0; }
.cal-fallback{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-8) 1.5rem;
  text-align:center;
}
.cal-fallback-title{
  font-family:var(--font-head);
  font-size:clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--ink);
}
.cal-fallback-note{
  color:var(--ink-dim);
  font-size:.92rem;
  max-width:38ch;
  margin-bottom:var(--s-2);
}
.contact-alt{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--s-3);
  font-size:.84rem;
  color:var(--ink-faint);
}
.contact-alt a{ color:var(--ink-dim); transition:color .3s; }
.contact-alt a:hover{ color:var(--lavender); }


/* ============ legal pages ============ */

.legal{
  padding:calc(var(--sy) + var(--nav-h)) 0 var(--sy);
}
.legal-inner{ max-width:70ch; }
.legal h1{
  font-family:var(--font-head);
  font-size:clamp(2rem, 5vw, 3rem);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.02em;
  margin-bottom:var(--s-3);
}
.legal-updated{
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:var(--sy-block);
}
.legal h2{
  font-family:var(--font-head);
  font-size:1.1rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:var(--s-7) 0 var(--s-3);
}
.legal p, .legal li{ color:var(--ink-dim); }
.legal p + p{ margin-top:var(--s-4); }
.legal ul{ display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-3); padding-left:1.1rem; }
.legal li{ list-style:disc; }
.legal a{ color:var(--lavender); text-decoration:underline; text-underline-offset:3px; }
.legal-back{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  margin-top:var(--sy-block);
  font-family:var(--font-head);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lavender);
  text-decoration:none;
}

/* ============ footer ============ */

.contact::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:clamp(90px, 14vh, 190px);
  background:linear-gradient(180deg, transparent, var(--bg-soft));
  pointer-events:none;
  z-index:1;
}
.footer{
  border-top:none;
  padding:var(--sy) 0 var(--s-7);
  background:linear-gradient(180deg, var(--bg-soft), var(--bg) 55%);
}
.footer-social{
  display:flex;
  justify-content:center;
  gap:var(--s-4);
}
.footer-social a{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink-dim);
  transition:border-color .35s, color .35s, transform .35s var(--ease-out), background .35s;
}
.footer-social a:hover{
  border-color:var(--purple);
  color:var(--lavender);
  background:rgba(150,122,230,.08);
  transform:translateY(-3px);
}
.footer-social svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.footer-social .icon-dot{ fill:currentColor; stroke:none; }

.footer-bar a{ color:var(--ink-dim); transition:color .3s; }
.footer-bar a:hover{ color:var(--lavender); }
.footer-bar{
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:var(--s-5);
  margin-top:var(--sy-block);
  padding-top:var(--s-6);
  border-top:1px solid var(--line-soft);
  font-size:.75rem;
  color:var(--ink-faint);
  flex-wrap:wrap;
}
.footer-icon{ height:22px; opacity:.7; }

/* ============ reveal ============ */

[data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].in{ opacity:1; transform:none; }

/* ============ responsive ============ */


/* ============ reach diagram (why most ads don't work) ============ */

.reach{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sy-card);
  margin-top:var(--sy-card);
}
.reach-panel{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:var(--s-6);
  background:linear-gradient(170deg, rgba(19,16,34,.5), transparent 70%);
  /* failure state: desaturated warm red, wrong but not alarming */
  --rc-ad:    rgba(201,112,92,.12);
  --rc-edge:  rgba(201,112,92,.45);
  --rc-line:  rgba(201,112,92,.62);
  --rc-dot:   rgba(201,112,92,.5);
}
.reach-wide{
  /* success state: muted green, a step brighter so the contrast reads at a glance */
  border-color:rgba(87,185,138,.3);
  background:linear-gradient(170deg, rgba(87,185,138,.09), transparent 68%);
  --rc-ad:    rgba(87,185,138,.16);
  --rc-edge:  rgba(111,203,157,.6);
  --rc-line:  rgba(87,185,138,.9);
  --rc-dot:   #6fcb9d;
}
.reach-head{
  font-family:var(--font-head);
  font-size:.92rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--ink-faint);
}
.reach-wide .reach-head{ color:var(--ink); }
.reach-svg{
  display:block;
  width:100%;
  height:auto;
  margin-top:auto;
}
.reach-svg .ad{ fill:var(--rc-ad); stroke:var(--rc-edge); stroke-width:1; }
.reach-svg .dot{ fill:var(--rc-dot); }
.reach-svg .link{
  fill:none;
  stroke:var(--rc-line);
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-dasharray:420;
  stroke-dashoffset:420;
}

/* Timing contract, shared by both panels so they stay in step:
   link i starts at i*200ms and lands 550ms later. Ten links, one pass, no loop. */
.reach-panel.in .reach-svg .link{
  animation:reachDraw .55s var(--ease-out) forwards;
  animation-delay:calc(var(--i, 0) * 200ms);
}
@keyframes reachDraw{ to{ stroke-dashoffset:0; } }

/* left: every link lands on the same crowd, so it takes ten hits */
.reach-narrow .reach-svg .dots{
  transform-box:fill-box;
  transform-origin:center;
}
.reach-narrow.in .reach-svg .dots{
  animation:reachHammer 200ms ease-out 550ms 10 both;
}
@keyframes reachHammer{
  0%, 100%{ transform:scale(1); }
  40%     { transform:scale(1.055); }
}

/* right: each link lights its own pocket as it arrives */
.reach-svg .pod{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.reach-panel.in .reach-svg .pod{
  animation:reachPod .4s var(--ease-out) forwards;
  animation-delay:calc(550ms + var(--i, 0) * 200ms);
}
@keyframes reachPod{
  from{ opacity:0; transform:scale(.55); }
  to  { opacity:1; transform:scale(1); }
}

.reach-caption{
  font-size:.86rem;
  line-height:1.5;
  color:var(--ink-faint);
  padding-top:var(--s-4);
  border-top:1px solid var(--line-soft);
}
.reach-wide .reach-caption{ color:var(--ink-dim); }

/* ============ services flow bar ============ */

.flowbar{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  margin:0 0 var(--s-7);
}
.flowbar-rail, .flowbar-fill{
  position:absolute;
  top:6px;
  left:16.666%;
  right:16.666%;
  height:2px;
  border-radius:2px;
}
.flowbar-rail{ background:var(--line-soft); }
.flowbar-fill{
  background:var(--holo);
  transform:scaleX(0);
  transform-origin:left center;
  box-shadow:0 0 12px rgba(150,122,230,.55);
}
.flowbar.in .flowbar-fill{
  animation:flowTravel 1.2s var(--ease-out) .15s forwards;
}
@keyframes flowTravel{ to{ transform:scaleX(1); } }

.flownode{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-3);
  text-align:center;
  appearance:none;
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  border-radius:8px;
}
.flownode:focus-visible{ outline:2px solid var(--lavender); outline-offset:6px; }
.flownode:hover .flownode-label,
.flowbar .flownode[aria-pressed="true"] .flownode-label{ color:var(--ink); }
.flowbar .flownode[aria-pressed="true"] .flownode-dot{ box-shadow:0 0 0 6px rgba(150,122,230,.28); }
.flownode-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--line);
  position:relative;
  z-index:1;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
/* nodes light as the glow reaches them: 0ms, 600ms, 1200ms into a 1.2s travel */
.flowbar.in .flownode-dot{
  transition-delay:calc(150ms + var(--i, 0) * 600ms);
  background:var(--purple);
  border-color:var(--lavender);
  box-shadow:0 0 0 4px rgba(150,122,230,.16);
}
.flownode-label{
  font-family:var(--font-head);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  transition:color .3s;
}
.flowbar.in .flownode-label{
  transition-delay:calc(150ms + var(--i, 0) * 600ms);
  color:var(--ink-dim);
}
/* after a click the line only reaches the chosen stage; script sets its length and marks
   each node .reached as the colour passes it, so the reveal's timed delays step aside */
.flowbar.picked .flowbar-fill{ animation:none; }
.flowbar.picked .flownode-dot{
  transition-delay:0s;
  background:var(--bg);
  border-color:var(--line);
  box-shadow:none;
}
.flowbar.picked .flownode.reached .flownode-dot{
  background:var(--purple);
  border-color:var(--lavender);
  box-shadow:0 0 0 4px rgba(150,122,230,.16);
}
.flowbar.picked .flownode[aria-pressed="true"] .flownode-dot{ box-shadow:0 0 0 6px rgba(150,122,230,.28); }
.flowbar.picked .flownode-label{ transition-delay:0s; color:var(--ink-faint); }
.flowbar.picked .flownode.reached .flownode-label{ color:var(--ink-dim); }
.flowbar.picked .flownode:hover .flownode-label,
.flowbar.picked .flownode[aria-pressed="true"] .flownode-label{ color:var(--ink); }


@media (max-width: 900px){
  .nav-links, .nav-cta{ display:none; }

  /* phone: the aurora buffer stretches into hard bands, so blur it back into a
     glow and pull it right down. The page's colour comes from the holo words. */
  .aurora{
    opacity:.26;
    filter:blur(26px);
    transform:scale(1.25);
  }
  .aurora-cal{ opacity:.5; left:-4%; top:-8%; width:108%; height:116%; }
  .halftone{ opacity:.45; }
  .nav-burger{ display:flex; }

  .hero-foot{ flex-direction:column; align-items:flex-start; gap:var(--s-7); }
  /* the scroll cue joins the flow on phones: pinned to the hero's bottom it
     ended up 3px under the second CTA once the buttons stacked */
  .hero-scroll{ position:static; margin-top:var(--s-7); }

  .service{ grid-template-columns:3rem 1fr; }
  
  .service-index{ font-size:1.5rem; }

  
  


  .clients{ --logo-scale:.6; }
  .clients-group{ gap:clamp(2.5rem, 10vw, 4rem); padding-right:clamp(2.5rem, 10vw, 4rem); }

  .reality-grid, .case-grid{ grid-template-columns:1fr; }

  
  

  

  .reach{ grid-template-columns:1fr; grid-auto-rows:1fr; }
  .reach-panel{ padding:var(--s-5); gap:var(--s-4); }
  .reach-svg{ max-width:320px; align-self:center; }
  /* stays horizontal on phones: tighter type instead of stacking */
  .flownode{ gap:var(--s-2); padding-inline:.2rem; }
  .flownode-label{ font-size:.56rem; letter-spacing:.1em; line-height:1.35; }
  
  
  
  .footer-bar{ justify-content:center; text-align:center; }
}

/* ============ method: phones ============ */

/* Narrow desktop and tablets: three columns would leave the quote column far
   taller than the other two, so the videos keep the top row and the written
   quotes drop underneath, side by side.
   The flex-basis values are deliberately 40% / 24.54% -- in the same 1.630 : 1
   ratio as the grow factors, so the two videos stay exactly equal-area once
   the free space is distributed. An `auto` basis here would resolve to the
   video's intrinsic 640px and throw every column onto its own line. */
@media (max-width: 1319px){
  .proof-wall{ flex-wrap:wrap; }
  .proof-col--a{ flex:1.630 1 40%; }
  .proof-col--b{ flex:1 1 24.54%; }
  .proof-col--c{ flex:1 1 100%; flex-direction:row; }
  .proof-col--c > .quote-card{ flex:1 1 0; min-width:0; }
}

/* Lower half of that range: as the columns narrow the quote under the
   landscape video wraps taller, so the portrait needs a bigger share of the
   width to still reach the shared height rather than sit letterboxed. */
@media (max-width: 899px){
  .proof-col--a{ flex:1.15 1 36%; }
  .proof-col--b{ flex:1 1 31.3%; }
}

@media (max-width: 699px){
  
  /* one compact header: number and label stacked left, arrows right */
  
  
  
  .method-nav{ flex:none; }
  .method-arrow{ width:42px; height:42px; }

  /* the headline's forced breaks are tuned for the wide layout; on a phone
     let it wrap naturally instead of stacking into short ragged lines */
  .testimonials .section-title br{ display:none; }

  /* the stacked column has no definite height, so the stretch rules would
     collapse the portrait video to zero; put it back on its aspect ratio */
  .proof-col--b .proof-item{ height:auto; }
  .proof-col--b .proof-item video{
    flex:0 0 auto;
    height:auto;
    aspect-ratio:720 / 1280;
  }

  /* phones: one column, every card full width. The portrait is capped against
     the viewport height so it cannot run taller than the screen it plays on. */
  .proof-wall{ flex-direction:column; flex-wrap:nowrap; }
  .proof-col, .proof-col--a, .proof-col--b, .proof-col--c{
    flex:0 0 auto; width:100%; flex-direction:column;
  }
  .proof-item.is-portrait{ max-width:min(100%, 30vh, 300px); }
}

/* smallest phones (iPhone SE 1st gen, Fold folded): tighter type so a step still fits one screen */
@media (max-width: 340px), (max-width: 699px) and (max-height: 600px){
  
  
  .method-arrow{ width:38px; height:38px; }
  
  
}

/* landscape phones: short screens, so the dial gives up height to the step */


/* ============ reduced motion ============ */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .line-inner{ transform:none; }
  .hero-foot, .hero-scroll{ opacity:1; }
  [data-reveal]{ opacity:1; transform:none; }
  .loader-icon{ opacity:1; }
  .clients-track{ animation:none; width:100%; flex-wrap:wrap; justify-content:center; }
  .work-marquee{ overflow-x:auto; }
  .work-track{ transform:none !important; }
  .work-group{ flex-wrap:wrap; justify-content:center; padding-right:0; }
  .work-marquee{ -webkit-mask-image:none; mask-image:none; padding-inline:var(--pad); }
  .clients-group[aria-hidden]{ display:none; }
  .work-group[aria-hidden]{ display:none; }
  .client-logo{ animation:none; }
  .reach-svg .link{ stroke-dashoffset:0 !important; animation:none !important; }
  .reach-svg .pod{ opacity:1 !important; animation:none !important; }
  .reach-narrow .reach-svg .dots{ animation:none !important; }
  .flowbar:not(.picked) .flowbar-fill{ transform:scaleX(1) !important; }
  .flowbar-fill{ animation:none !important; }
  .flownode-dot{ background:var(--purple); border-color:var(--lavender); }
  .flownode-label{ color:var(--ink-dim); }
}


/* ============ METHOD: scroll rail ============
   Replaces the arrow carousel. Scroll drives the step on desktop; phones get a
   swipe carousel instead, because a pinned section fights the mobile address
   bar and spends four screens of scroll on the device with the least to spare. */

.method-scroller{ position:relative; }
.method-rail-col{ align-self:start; }

/* grid-template-columns is load-bearing. Without it the single auto column
   sizes to each step's longest line and the whole rail slides sideways as the
   steps change. Same reason .method-pin-in carries width:100% below. */
/* Sticky at its own content height, never 100svh. A full-screen pin inside a
   cream slab leaves a whole screen of empty cream around a small block. This
   sticks just below the nav and only for the length of the five steps, so the
   scroll drives the rail without the section turning into an empty room. */
.method-pin{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  padding-block:clamp(1.5rem, 4vw, 2.75rem) 0;
}
.method-pin-in{
  width:100%;
  max-width:var(--container, 1320px);
  margin-inline:auto;
  padding-inline:var(--pad);
}


.method-rail{
  display:grid;
  grid-template-columns:minmax(0, 16rem) minmax(0, 1fr);
  gap:clamp(1.5rem, 4vw, 3.5rem);
  align-items:center;
}

.method-num{
  display:block;
  font-family:var(--font-word);
  font-weight:100;
  font-size:clamp(5rem, 9vw, 7.5rem);
  line-height:.9;
  color:#151022;
  margin-bottom:var(--s-5);
  font-variant-numeric:tabular-nums;
}
/* An index, not a picker. All five are visible at rest, which is the whole
   point: the old arrows never said how many steps there were. */
.method-wheel{ position:relative; }
.method-wheel-track{ display:grid; gap:2px; margin-top:var(--s-5); }
.method-wheel-item{
  padding-block:.46rem;
  display:grid;
  grid-template-columns:2.4rem minmax(0, 1fr);
  align-items:center;
  gap:.6rem;
  padding-left:.9rem;
  border-left:2px solid transparent;
  font-family:var(--font-head);
  font-size:.85rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  white-space:nowrap;
  /* weight stays fixed on state: changing it alters rendered text width,
     which reads as a wobble as the wheel turns */
  font-weight:600;
  color:rgba(21,16,34,.24);
  background:none;
  border-top:0; border-right:0; border-bottom:0;
  text-align:left;
  width:100%;
  cursor:pointer;
  transition:color .28s ease, border-color .28s ease;
}
.method-wheel-item b{
  font-family:var(--font-word);
  font-weight:300;
  font-size:1.05rem;
  letter-spacing:.04em;
}
.method-wheel-item.is-on{ color:#6a4fd0; border-left-color:#6a4fd0; }

.method-wheel-item:hover{ background:rgba(75,63,191,.05); }
.method-wheel-item.is-on{ background:rgba(75,63,191,.07); }


/* The deck. The next card is deliberately cut off: that visible slice is the
   affordance, so nothing has to tell anyone it can be dragged. Snapping and
   momentum come from the browser, which is why it cannot feel laggy. */
.method-panes{
  list-style:none;
  margin:0;
  padding:0 0 .5rem;
  display:flex;
  gap:1rem;
  overflow-x:auto;
  /* overflow-x:auto promotes the other axis from visible to auto, which lets a
     downward swipe scroll inside the deck instead of the page */
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* smoothing lives here rather than in scrollTo: smooth behaviour passed to
     scrollTo is unreliable inside a snap container, the CSS property is not */
  scroll-behavior:smooth;
}
.method-panes::-webkit-scrollbar{ display:none; }
.method-panes:focus-visible{ outline:2px solid var(--indigo); outline-offset:6px; border-radius:16px; }
.method-pane{
  flex:0 0 78%;
  scroll-snap-align:start;
  border:1px solid rgba(21,16,34,.14);
  border-radius:16px;
  background:rgba(255,255,255,.55);
  padding:clamp(1.1rem, 2.4vw, 1.6rem);
}
@media (max-width: 820px){ .method-pane{ flex:0 0 86%; } }
.method-foot{
  display:flex;
  align-items:center;
  gap:clamp(.9rem, 2vw, 1.4rem);
  margin-top:1rem;
}
.method-nav{ display:flex; gap:.5rem; }
.method-panes{ cursor:grab; }
.method-panes.is-grabbing{ cursor:grabbing; user-select:none; }
.method-panes.is-grabbing .method-pane{ pointer-events:none; }
.method-pane h3{
  font-family:var(--font-head);
  font-weight:700;
  letter-spacing:-.01em;
  font-size:clamp(1.35rem, 2.6vw, 1.9rem);
  text-transform:uppercase;
  line-height:1.16;
  margin:0 0 .85rem;
}
.method-pane p{
  color:rgba(21,16,34,.72);
  font-weight:400;
  font-size:.92rem;
  max-width:52ch;
  margin:0 0 .8rem;
}
.method-pane-head{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  margin:0 0 .6rem;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(21,16,34,.4);
}
.method-pane-head b{
  font-family:var(--font-word);
  font-weight:300;
  font-size:.95rem;
  letter-spacing:.04em;
  color:#6a4fd0;
}
.method-dots{ display:flex; gap:8px; align-items:center; }
.method-dots button{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:rgba(21,16,34,.18);
  cursor:pointer;
  transition:background .25s, transform .25s;
}
.method-dots button:hover{ background:rgba(21,16,34,.4); }
.method-dots button:focus-visible{ outline:2px solid #6a4fd0; outline-offset:3px; }
.method-dots button.is-on{ background:#6a4fd0; transform:scale(1.35); }
.method-num small{
  font-size:.26em;
  font-weight:300;
  color:rgba(21,16,34,.4);
  letter-spacing:.04em;
  margin-left:.12em;
}


@media (max-width: 760px){
  /* Desktop and phone run the same deck. The index list is dropped here because
     the dots already jump and the cards carry their own numbers, so it was two
     navigations stacked on a screen that cannot spare the height. */
  .method-pin-in{ padding-inline:0; }
  .method-pin{ padding-block:clamp(1rem, 3vw, 1.6rem) 0; }
  .method-rail{ display:block; }
  .method-wheel{ display:none; }

  .method-num{
    font-size:clamp(2.6rem, 11vw, 3.4rem);
    margin-bottom:var(--s-3);
  }
  .method-num small{ font-size:.3em; }

  .method-panes{
    gap:.7rem;
    /* same gutter system as the other sliders, so every card group on the
       page starts and ends on the same line */
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    cursor:auto;
  }
  .method-pane{
    flex:0 0 87%;
    padding:1rem 1.05rem 1.15rem;
    border-radius:14px;
  }
  .method-pane p{ max-width:none; font-size:.9rem; }
  .method-pane h3{ font-size:1.12rem; margin-bottom:.6rem; }
  .method-pane-head{ margin-bottom:.5rem; }

  .method-foot{ margin-top:.85rem; gap:.9rem; }
  .method-arrow{ width:38px; height:38px; }
  .method-arrow svg{ width:16px; height:16px; }

  .method-closer{ padding:var(--s-6); }
}

/* ============ CONCEPT BUILDER ============ */

.concept-example{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  margin:0 0 1.1rem;
  font-size:.92rem;
  font-weight:500;
  color:rgba(21,16,34,.72);
}
.concept-example span{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:#fff;
  background:var(--indigo);
  border:1px solid var(--indigo);
  border-radius:6px;
  padding:.3rem .7rem;
}

.concept-shuffle{
  font-family:var(--font-body);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.65rem 1.2rem;
  border-radius:999px;
  border:1px solid rgba(21,16,34,.26);
  background:transparent;
  color:#151022;
  cursor:pointer;
  margin-bottom:clamp(1.9rem, 4vw, 2.6rem);
  transition:background .3s, color .3s, border-color .3s;
}
.concept-shuffle:hover{ background:#151022; border-color:#151022; color:var(--cream); }

.concept-builder{ position:relative; }
.concept-thread{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  pointer-events:none;
  overflow:visible;
}
.concept-thread polyline{
  fill:none;
  stroke:rgba(150,122,230,.85);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cmb-row{
  display:grid;
  grid-template-columns:clamp(6.5rem, 11vw, 9.5rem) minmax(0, 1fr);
  gap:clamp(.8rem, 2vw, 1.6rem);
  align-items:center;
  padding:clamp(.3rem, .8vw, .5rem) 0;
  position:relative;
}
.cmb-label{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600;
  color:rgba(21,16,34,.78);
}
.cmb-chips{ display:flex; flex-wrap:wrap; gap:clamp(.38rem, .8vw, .55rem); }
.cmb-chip{
  font-family:var(--font-body);
  font-size:clamp(.84rem, 1.2vw, .92rem);
  line-height:1.3;
  padding:.5rem .95rem;
  border-radius:100px;
  border:1px solid rgba(21,16,34,.14);
  background:rgba(255,255,255,.6);
  color:rgba(21,16,34,.66);
  cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .18s, opacity .25s, box-shadow .25s;
}
.cmb-chip:hover{ border-color:var(--purple); color:#151022; transform:translateY(-1px); }
.cmb-chip:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }
.cmb-chip.is-on{
  background:var(--purple);
  border-color:var(--purple);
  color:#fff;
  font-weight:500;
  box-shadow:0 8px 20px rgba(150,122,230,.38);
}
.cmb-chip.is-off{ opacity:.34; border-style:dashed; }
.cmb-chip.is-off:hover{ opacity:.75; }
.cmb-hint{
  grid-column:2;
  font-size:.74rem;
  color:rgba(21,16,34,.4);
  margin-top:.35rem;
  font-style:italic;
}
.cmb-row.is-swapped .cmb-chips{ animation:cmb-swap .42s var(--ease-out) both; }
@keyframes cmb-swap{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

.concept-out{
  margin-top:1.5rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(21,16,34,.14);
}
.concept-out-label{
  font-size:.63rem; letter-spacing:.19em; text-transform:uppercase;
  color:rgba(21,16,34,.4);
  margin:0 0 .6rem;
}
.concept-brief{
  font-size:clamp(.95rem, 1.6vw, 1.05rem);
  line-height:1.55;
  color:#151022;
  max-width:none;
  margin:0;
}
.concept-brief strong{ font-family:var(--font-head); font-weight:700; }
.concept-brief em{
  font-style:normal;
  background:rgba(150,122,230,.22);
  padding:.05em .3em;
  border-radius:3px;
}
.concept-soph{
  margin:.75rem 0 0;
  font-size:.88rem;
  color:rgba(21,16,34,.62);
  max-width:none;
  padding-left:.8rem;
  border-left:2px solid rgba(21,16,34,.14);
}
.concept-soph b{ font-weight:700; color:#151022; }


@media (max-width: 700px){
  .cmb-row{ grid-template-columns:1fr; gap:.35rem; }
  .cmb-hint{ grid-column:1; }
  .concept-shuffle{ width:100%; }
  .concept-thread{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .method-panes{ scroll-behavior:auto; }
      
  .cmb-row.is-swapped .cmb-chips{ animation:none; }
}

/* the numeral belongs to the wheel on phones, where the wheel itself is gone */
@media (max-width: 760px){
  .method-num{ display:none; }
}

/* the closer's copy, cream on the dark panel: 7.4:1 */
.method-closer p{ color:rgba(242,238,252,.74); }
.method-closer p:last-child{ margin-bottom:0; }
/* a single holo hairline along the top edge, the only ornament it needs */
.method-closer::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:var(--holo);
  background-size:200% 100%;
  animation:holo-shift 7s ease-in-out infinite alternate;
}


/* ============ FAQ, merged under the booking ============
   Two columns via grid, never via CSS columns. Multi-column rebalances its
   flow when a details element opens, so items physically hop from one column
   to the other as you read. A grid fixes each item in place: opening one grows
   its own row and pushes the rows below it straight down. */
.faq-compact{
  margin-top:clamp(2.5rem, 6vw, 4rem);
  padding-top:clamp(1.5rem, 3.5vw, 2.25rem);
  border-top:1px solid var(--line-soft);
  text-align:left;
  max-width:1240px;
  margin-inline:auto;
  /* .contact-inner is a flex container, so the auto margins above would make
     this shrink to its own content and resize every time an answer opens.
     That was the sideways jump. */
  width:100%;
}
.faq-compact-label{
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 var(--s-4);
  text-align:left;
}
/* Two independent columns, each its own stack. A single grid shares its rows
   between both columns, so opening a question on the right grew the row and
   pushed the left column down with it. Separate containers decouple them.
   minmax(0,…) stops an open answer widening its own column. */
.faq-compact .faq-items{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:start;
  column-gap:clamp(2rem, 5vw, 4.5rem);
}
.faq-col{ min-width:0; }
@media (max-width: 820px){
  .faq-compact .faq-items{ grid-template-columns:minmax(0, 1fr); column-gap:0; }
}
.faq-compact .faq-item{
  border-bottom:1px solid var(--line-soft);
}
.faq-compact .faq-item summary{
  font-size:.95rem;
  padding:.9rem 2.5rem .9rem 0;
  line-height:1.4;
  transition:color .25s;
}
.faq-compact .faq-item[open] summary{ color:var(--lavender); }
.faq-compact .faq-item p{
  font-size:.9rem;
  line-height:1.65;
  padding:0 1.5rem .95rem 0;
  max-width:none;
}
.faq-compact .faq-icon{ right:0; }

/* ============ BOOKING BRIEF ============
   Three tiers on one cream card: the hook, the explanation that completes its
   sentence, and two asides. The hook and the body are the same size on purpose,
   separated by weight and colour rather than scale, so the colon reads as a
   line break rather than a new section. */
.brief{
  background:var(--cream);
  color:#151022;
  border-radius:clamp(18px, 2.4vw, 30px);
  padding:clamp(1.75rem, 3.4vw, 2.9rem) clamp(1.75rem, 3.4vw, 3.2rem) clamp(1.4rem, 2.6vw, 2rem);
  text-align:left;
  max-width:1240px;
  margin:0 auto;
}
.brief-hook,
.brief-body{
  font-size:clamp(1.02rem, 1.35vw, 1.16rem);
  line-height:1.65;
  margin:0;
  text-wrap:pretty;
}
.brief-hook{
  font-weight:600;
  color:#151022;
  letter-spacing:-.005em;
}
.brief-hook em{ font-style:normal; font-weight:700; }
.brief-body{
  font-family:var(--font-body);
  font-weight:400;
  letter-spacing:normal;
  color:rgba(21,16,34,.68);
  margin-top:.35rem;
}

/* who we take on: body level, not a footnote, because it is the qualifier.
   Weight is set explicitly. Left to inherit it picked up a 300 from a parent,
   and Inter Light beside Inter Regular reads as a different typeface. */
.brief-select{
  margin:clamp(1.1rem, 2.2vw, 1.5rem) 0 0;
  font-family:var(--font-body);
  font-size:clamp(1.02rem, 1.35vw, 1.16rem);
  font-weight:400;
  line-height:1.65;
  letter-spacing:normal;
  color:rgba(21,16,34,.68);
  max-width:92ch;
}

/* the markers, and the notes they point at */
.fn{
  font-size:.62em;
  font-weight:700;
  color:#6a4fd0;
  vertical-align:super;
  line-height:0;
  letter-spacing:.02em;
}
.brief-note .fn{ margin-right:.45em; }

/* a short rule, the way a printed page separates a footnote from its body */
.brief-notes{
  margin-top:clamp(1.5rem, 2.8vw, 2.1rem);
  padding-top:clamp(1rem, 2vw, 1.3rem);
  display:grid;
  gap:.35rem;
  position:relative;
}
.brief-notes::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:78px;
  height:1px;
  background:rgba(21,16,34,.28);
}
.brief-note{
  margin:0;
  font-size:.88rem;
  line-height:1.6;
  color:rgba(21,16,34,.58);
  max-width:92ch;
}

/* the instruction the old "pick a time that works" was failing to give */
.cal-cta{
  margin:clamp(2rem, 4vw, 3rem) 0 0;
  text-align:center;
  font-family:var(--font-head);
  font-size:clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--ink);
}
.contact .cal-embed{ margin-top:clamp(1.1rem, 2.4vw, 1.6rem); }

/* ============ MOBILE: density and sliders ============
   Everything below applies only on phones. Stacked card groups become
   horizontal sliders: the same content, a fraction of the scrolling, and a
   peeking next card so it is obvious there is more. */
@media (max-width: 760px){

  /* --- shared slider --- */
  .m-slider{
    display:flex;
    flex-direction:row;
    gap:.9rem;
    overflow-x:auto;
    /* overflow-x:auto promotes the other axis from visible to auto, which made
       these groups scroll vertically and swallow a downward swipe. */
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    /* the snap edge, so a snapped card keeps the page gutter instead of
       sitting flush against the screen edge */
    scroll-padding-left:var(--pad);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    /* enough room for the cards' own shadow and lift, so overflow-y:hidden has
       nothing to crop */
    padding-block:.25rem 1rem;
  }
  .m-slider::-webkit-scrollbar{ display:none; }
  .m-slider > *{ flex:0 0 86%; scroll-snap-align:start; min-width:0; }

  /* Slides opt out of the scroll reveal. An element clipped by an ancestor's
     overflow never counts as intersecting, so cards past the first screenful
     were never revealed: they sat at opacity 0, shifted 34px down, and stayed
     blank even after you swiped to them. */
  .m-slider > [data-reveal],
  .m-slider [data-reveal]{ opacity:1; transform:none; }

  /* the testimonial columns collapse so their items become the slides.
     align-items:start because a long quote would otherwise stretch the video
     card to match it, leaving a block of empty card under the caption. */
  /* every card the same size. The videos share one 4:5 frame, cropped to fill,
     so the portrait one is no longer a letterboxed sliver, and the quotes
     stretch to match instead of each finding its own height. */
  .proof-wall.m-slider{ align-items:stretch; }
  .proof-wall.m-slider .proof-item.is-portrait{ max-width:none; }
  .proof-wall.m-slider .proof-item video,
  .proof-wall.m-slider .proof-item.is-portrait video{
    aspect-ratio:4 / 5;
    object-fit:cover;
    object-position:center 24%;
  }
  .proof-wall.m-slider .quote-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .proof-wall.m-slider .proof-col{ display:contents; }
  /* With the columns collapsed the five cards become one row, so the slide
     order is set explicitly: both videos first, then the written ones.
     Desktop keeps its three-column mosaic, where left-to-right already puts
     Shemin first. */
  .proof-wall.m-slider .proof-col--b .proof-item{ order:1; }
  .proof-wall.m-slider .proof-col--a .proof-item{ order:2; }
  .proof-wall.m-slider .proof-col--c .quote-card:nth-of-type(1){ order:3; }
  .proof-wall.m-slider .proof-col--c .quote-card:nth-of-type(2){ order:4; }
  .proof-wall.m-slider .proof-col--a .quote-card{ order:5; }
  .proof-wall.m-slider .proof-item,
  .proof-wall.m-slider .quote-card{ flex:0 0 86%; scroll-snap-align:start; min-width:0; }

  .m-dots{ display:flex; gap:7px; justify-content:center; margin-top:1.1rem; }
  .m-dots button{
    width:7px; height:7px; padding:0; border:0; border-radius:50%;
    background:rgba(242,238,252,.22);
    cursor:pointer;
    transition:background .25s, transform .25s;
  }
  .m-dots button.is-on{ background:var(--purple); transform:scale(1.35); }

  /* --- the reach diagrams: same drawing, less height. The viewBox aspect is
     fixed, so the height comes off the frame and the furniture around it
     rather than by squashing the artwork. --- */
  .reach-svg{ max-height:170px; }
  .reach-panel{ padding:var(--s-5) var(--s-5) var(--s-4); gap:var(--s-3); }
  .reach-head{ font-size:.86rem; margin-bottom:var(--s-2); }
  .reach-caption{ font-size:.78rem; margin-top:var(--s-2); }
  .reach{ gap:var(--s-4); }

  /* --- the method deck gets the same snap gutter --- */
  .method-panes{ scroll-padding-left:var(--pad); }

  /* --- concept builder: tighter, still readable --- */
  .concept-builder .cmb-row{ padding:.3rem 0; gap:.3rem; }
  .cmb-label{ font-size:.74rem; letter-spacing:.12em; color:rgba(21,16,34,.78); font-weight:600; }
  .cmb-chips{ gap:.3rem; }
  .cmb-chip{ font-size:.8rem; padding:.36rem .7rem; line-height:1.25; }
  .cmb-hint{ font-size:.68rem; margin-top:.2rem; }
  .concept-example{ margin-bottom:.8rem; font-size:.86rem; }
  .concept-shuffle{ margin-bottom:1.5rem; padding:.55rem 1rem; }
  .concept-out{ margin-top:1.1rem; padding-top:.9rem; }
  .concept-out-label{ margin-bottom:.4rem; }
  .concept-payoff{ margin-top:1.1rem; }

  /* --- FAQ: the summary is a flex row, so the icon's distance from the edge is
     just its right padding. Zero it and the icon lands on the same gutter the
     question starts from, instead of floating 32px short of it. --- */
  .faq-compact .faq-item summary{ padding-right:0; gap:var(--s-4); }

  /* --- each option row scrolls instead of wrapping. Angle has eight chips and
     Format has ten, which wrapped to three or four lines each and made this
     graphic taller than the screen. One line each, swipe for the rest. --- */
  .concept-builder .cmb-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:.15rem;
    -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image:linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .concept-builder .cmb-chips::-webkit-scrollbar{ display:none; }
  .concept-builder .cmb-chip{ flex:0 0 auto; scroll-snap-align:start; }
}