/* ============================================
   RAKO MEDIA — DESIGN SYSTEM
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* brand palette */
  --ink:        #202020; /* near-black */
  --paper:      #F5F5F5; /* off-white */
  --sand:       #CECCC6; /* warm grey */
  --taupe:      #B3ADA5; /* mid taupe */
  --espresso:   #342E2E; /* dark brown */
  --white:      #ffffff;

  --ink-soft:   #2c2c2c;
  --ink-line:   rgba(245,245,245,0.14);
  --paper-line: rgba(32,32,32,0.12);

  /* type */
  --display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --body: 'Inter', sans-serif;

  /* scale */
  --container: 1220px;
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* Bricolage Grotesque is pinned to its largest optical size (96).
     That's the setting where its ink traps are finest and the spacing
     tightest — the "Option 2" look. Inherited by everything below.
     Inter has no opsz axis, so this is simply ignored there.          */
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 96;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family: var(--display);
  margin:0;
  font-weight:700;
  letter-spacing:-0.02em;
  /* spreads the words evenly across lines instead of dumping one
     stray word on the last line */
  text-wrap: balance;
}
p{
  margin:0;
  /* stops a single-word widow at the end of a paragraph */
  text-wrap: pretty;
}
.h-xl, .h-lg, .h-md, .h-sm{ text-wrap: balance; }
.lede, .text-muted, .card p, .step p, .reel-label,
.faq-a-inner p, .case-prose p, .testimonial p{ text-wrap: pretty; }

.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: 24px;
}

@media (min-width: 900px){
  .container{ padding-inline: 40px; }
}

/* grain overlay */
.grain{
  position: fixed;
  inset:0;
  z-index: 9999;
  pointer-events:none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============ TYPOGRAPHY UTILITIES ============ */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--espresso);
}
.eyebrow::before{
  content:'';
  width:7px; height:7px;
  border-radius:50%;
  background: currentColor;
  display:inline-block;
}
.on-dark .eyebrow{ color: var(--sand); }

.h-xl{ font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 0.98; }
.h-lg{ font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.02; }
.h-md{ font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; }
.h-sm{ font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; }

.lede{
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--espresso);
  max-width: 640px;
}
.on-dark .lede{ color: var(--sand); }

/* The supporting line that sits opposite a section heading in a 2-column
   header. Deliberately quieter and smaller than .lede so it reads as a
   caption rather than a second headline, and flushed to the right edge so
   it anchors to the column instead of floating mid-page. Reverts to plain
   left-aligned text once the grid stacks. */
.section-intro{
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--espresso);
  opacity: .82;
  max-width: 44ch;
  margin-left: auto;
  text-align: right;
  text-wrap: pretty;
}
.on-dark .section-intro{ color: var(--sand); opacity: .9; }
@media (max-width: 760px){
  .section-intro{
    text-align: left;
    margin-left: 0;
    max-width: none;
  }
}

.text-muted{ color: var(--espresso); opacity:.72; }
.on-dark .text-muted{ color: var(--sand); opacity:.8; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 30px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-3px); }

.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--espresso); }

.btn-light{ background: var(--paper); color: var(--ink); }
.btn-light:hover{ background: var(--white); }

.btn-outline{ border-color: var(--paper-line); color: var(--ink); }
.btn-outline:hover{ border-color: var(--ink); }

.on-dark .btn-outline{ border-color: var(--ink-line); color: var(--paper); }
.on-dark .btn-outline:hover{ border-color: var(--paper); }

.btn-arrow{ font-size:18px; transition: transform .35s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

/* ============ NAV ============ */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  padding: 22px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(32,32,32,0.92);
  backdrop-filter: blur(14px);
  padding: 14px 0;
  border-color: var(--ink-line);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
.brand img{ height: 38px; width:auto; }
@media (max-width: 600px){ .brand img{ height: 32px; } }
.brand .logo-dark{ display:block; }
.brand .logo-light{ display:none; }
.site-header.is-scrolled .brand .logo-dark,
.site-header.on-dark-page .brand .logo-dark{ display:none; }
.site-header.is-scrolled .brand .logo-light,
.site-header.on-dark-page .brand .logo-light{ display:block; }

.nav-links{
  display:none;
  align-items:center;
  gap: 40px;
}
.nav-links a{
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  position:relative;
  padding: 4px 0;
}
.site-header.is-scrolled .nav-links a,
.site-header.on-dark-page .nav-links a{ color: var(--paper); }
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0;
  height:1.5px; background: currentColor;
  transition: right .35s var(--ease);
}
.nav-links a:hover::after{ right:0; }

.nav-cta{ display:none; }

@media (min-width: 900px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
}

.nav-toggle{
  display:flex;
  width: 44px; height:44px;
  align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--paper-line);
  background:none;
}
.site-header.is-scrolled .nav-toggle,
.site-header.on-dark-page .nav-toggle{ border-color: var(--ink-line); }
.nav-toggle svg{ stroke: var(--ink); }
.site-header.is-scrolled .nav-toggle svg,
.site-header.on-dark-page .nav-toggle svg{ stroke: var(--paper); }

@media (min-width:900px){ .nav-toggle{ display:none; } }

.mobile-menu{
  position: fixed;
  inset:0;
  background: var(--ink);
  z-index: 600;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 32px;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu a{
  font-family: var(--display);
  color: var(--paper);
  font-size: clamp(2rem,8vw,3rem);
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-line);
}
.mobile-close{
  position:absolute; top:26px; right:24px;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--ink-line);
  background:none;
  display:flex; align-items:center; justify-content:center;
}
.mobile-close svg{ stroke: var(--paper); }

/* ============ SECTIONS ============ */
section{ position:relative; }
.section{ padding: 82px 0; }
.section-tight{ padding: 58px 0; }
@media (max-width: 700px){
  .section{ padding: 62px 0; }
  .section-tight{ padding: 44px 0; }
}

.bg-dark{ background: var(--ink); color: var(--paper); }
.bg-paper{ background: var(--paper); color: var(--ink); }
.bg-sand{ background: var(--sand); color: var(--ink); }
.bg-espresso{ background: var(--espresso); color: var(--paper); }

/* ============ HERO ============ */
.hero{
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top: 140px;
  padding-bottom: 60px;
  position:relative;
  overflow:hidden;
}
.hero-glow{
  position:absolute;
  width: 60vw; height: 60vw;
  max-width:900px; max-height:900px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(179,173,165,0.5) 0%, rgba(179,173,165,0) 70%);
  top: -10%; right: -15%;
  pointer-events:none;
  z-index:0;
}
.hero-inner{ position:relative; z-index:1; }

/* ---- hero split: copy left, founder portrait right ---- */
.hero-split{
  display:grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items:center;
}
@media (min-width: 950px){
  .hero-split{ grid-template-columns: 1.08fr .92fr; gap: 40px; }
}
/* the h1 was sized for a full-width hero — in a split column it needs to
   come down or it stacks up into a very tall block */
.hero-split .h-xl{
  font-size: clamp(2.3rem, 4vw, 3.9rem);
  max-width: none !important;
}
.hero-split .lede{ max-width: 52ch; }

.hero-portrait{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-height: 340px;
  /* nudge down so the base of the cut-out lines up with the bottom of
     the button row in the left column */
  margin-bottom: -38px;
}
/* warm disc so the cut-out (black tee on transparent) has something to
   sit against — without it he disappears into the dark hero */
/* No backing shape and no rim light — the cut-out sits straight on the
   background. In greyscale the black tee reads as part of the dark rather
   than a missing chunk, so it needs nothing behind it. */
.hero-portrait-disc{ display: none; }

.hero-portrait img{
  position:relative;
  z-index:1;
  width: min(100%, 560px);
  height:auto;
  /* full colour, no edge treatment, nothing behind. Just the cut-out. */
}
.hero-portrait-badge{
  position:absolute;
  z-index:2;
  /* his torso sits slightly left of the frame centre, so the badge is
     offset right to land on the middle of his chest rather than the box */
  bottom: 15%;
  left: 52%;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 5px;
  background: rgba(32,32,32,.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--ink-line);
  border-radius: 100px;
  padding: 11px 22px;
  font-size: 12.5px;
  line-height:1.3;
  color: var(--sand);
  white-space: nowrap;
  text-align:center;
}
.hero-portrait-badge > span:first-of-type{
  white-space: nowrap;
}
.hero-portrait-badge strong{
  font-family: var(--display);
  font-size: 14.5px;
  color: var(--paper);
  margin-right: 4px;
}
/* a thin divider between name and role, drawn in CSS so it disappears
   cleanly when the badge wraps to two lines on small screens */
.hero-portrait-badge strong::after{
  content: ',';
  color: var(--sand);
  font-weight: 500;
}
/* the badge is a link through to the story page — most people never click
   a nav item called "My Story", but they will click a face */
a.hero-portrait-badge{
  text-decoration:none;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
a.hero-portrait-badge:hover{
  background: rgba(32,32,32,.96);
  border-color: var(--sand);
}
.badge-cta{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--paper);
}

.badge-cta .btn-arrow{ font-size:13px; transition: transform .3s var(--ease); }

/* ---- mobile hero ----
   Previously the portrait was pulled above the copy with order:-1. On a
   phone that meant a large cut-out jammed under the header, cropped at
   the hairline and shoved to the right edge, with the headline pushed
   below the fold. The words have to land first, so the portrait now sits
   in natural order: centred, small, and reading as a sign-off under the
   buttons rather than a banner over the top of everything. */
@media (max-width: 949px){
  /* tighter above the portrait so it sits closer to the buttons */
  .hero-split{ gap: 14px; }
  .hero-portrait{
    order: 0;
    justify-content: center;
    align-items: flex-start;
    min-height: 0;
    margin-bottom: 0;
  }
  .hero-portrait img{ width: min(80%, 330px); }
  .hero-portrait-disc{ width: min(78%, 320px); }
  .hero-portrait-badge{ bottom: 10%; left: 50%; font-size: 11.5px; padding: 10px 18px; }
  /* pull the stats rule up to meet the base of the cut-out, so the
     numbers read as sitting underneath him rather than floating in
     their own block further down */
  .hero-stats{ margin-top: 0; padding-top: 26px; }
}
@media (max-width: 600px){
  .hero{ padding-top: 120px; }
  .hero-portrait img{ width: min(76%, 290px); }
  .hero-portrait-disc{ width: min(74%, 282px); }
  .hero-portrait-badge{ display:none; }
}
.hero-tags{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 34px;
}
.tag{
  border:1px solid var(--ink-line);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight:600;
  color: var(--sand);
}

.hero-stats{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 24px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--ink-line);
}
@media (min-width: 700px){
  .hero-stats{ grid-template-columns: repeat(4,1fr); }
}
.hero-stat .num{
  font-family: var(--display);
  font-size: clamp(1.8rem,3vw,2.6rem);
  font-weight:700;
  white-space: nowrap;
}
/* word-units like "person" sit on the same line as the figure at the
   same size, so the stat reads as one phrase rather than a figure with
   a footnote stuck to it */
.hero-stat .num .unit{ font-size: 1em; font-weight: 700; }
/* a line break that only applies once there's room for it. On a phone the
   column is too narrow for a forced break to help, so it collapses. */
.br-wide{ display:none; }
@media (min-width: 700px){ .br-wide{ display:inline; } }

/* keeps a line unbroken on desktop, but wraps normally on phones where
   forcing one line would push the text off the side of the screen */
.nowrap-wide{ white-space: normal; }
@media (min-width: 940px){ .nowrap-wide{ white-space: nowrap; } }

.hero-stat .label{
  font-size: 13px;
  color: var(--sand);
  margin-top: 4px;
}

/* ============ MARQUEE ============ */
.marquee-wrap{
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  padding: 22px 0;
  overflow:hidden;
  background: var(--paper);
}
.on-dark .marquee-wrap{ border-color: var(--ink-line); background: var(--ink); }
.marquee-track{
  display:flex;
  width: max-content;
  animation: marquee 26s linear infinite;
  gap: 48px;
}
.marquee-track span{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem,2.6vw,2rem);
  color: var(--ink);
  white-space: nowrap;
  display:flex;
  align-items:center;
  gap: 48px;
}
.on-dark .marquee-track span{ color: var(--paper); }
.marquee-track span::after{
  content:'\2013';
  color: var(--taupe);
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============ GRID / CARDS ============ */
.grid{ display:grid; gap: 20px; }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
/* one column on phones. Two columns on a 390px screen left each card
   about 150px wide, which broke headings mid-word and turned the body
   copy into a ladder of two-word lines. */
.grid-4{ grid-template-columns: 1fr; }
@media (min-width: 620px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 700px){
  .grid-2{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 900px){
  .grid-4{ grid-template-columns: repeat(4,1fr); }
}

.card{
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 34px;
  position:relative;
  transition: transform .5s var(--ease);
}
.card:hover{ transform: translateY(-6px); }
.card-icon{
  width:44px; height:44px;
  border-radius:50%;
  background: var(--paper);
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-weight:700;
  margin-bottom: 22px;
}
.card h3{ font-size: 1.15rem; margin-bottom:10px; }
.card p{ color: var(--sand); font-size: 15px; line-height:1.6; }

.card-light{
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--paper-line);
}
.card-light p{ color: var(--espresso); opacity:.85; }
.card-light .card-icon{ background: var(--ink); color: var(--paper); }

/* numbered steps */
.step{
  display:flex;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--paper-line);
}
.on-dark .step{ border-color: var(--ink-line); }
.step:last-child{ border-bottom: 1px solid var(--paper-line); }
.on-dark .step:last-child{ border-bottom-color: var(--ink-line); }
.step-num{
  font-family: var(--display);
  font-size: 1rem;
  font-weight:700;
  color: var(--taupe);
  flex-shrink:0;
  width: 34px;
}
.step h4{ font-size: 1.05rem; margin-bottom:6px; }
.step p{ color: var(--espresso); opacity:.8; font-size: 14.5px; max-width:560px; }
.on-dark .step p{ color: var(--sand); opacity:.9; }

/* ============ CASE STUDY STAT BLOCK ============ */
.stat-block{
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  background: var(--ink);
  color: var(--paper);
}
.stat-flow{
  display:flex;
  align-items:center;
  gap: 22px;
  flex-wrap:wrap;
}
.stat-num{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem,5vw,3.6rem);
  line-height:1;
}
.stat-arrow{ font-size: 1.8rem; color: var(--taupe); }
.stat-caption{ margin-top:14px; color: var(--sand); font-size:14.5px; line-height:1.6; text-wrap: pretty; }

/* ============ TESTIMONIALS ============ */
.testimonial{
  position: relative;
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: 40px 38px 34px;
  overflow: hidden;
}
/* The quote mark is set large and low-contrast so it reads as texture
   anchoring the corner, not as a floating character with a gap under it.
   The text sits over the top of it rather than below it. */
.testimonial .quote-mark{
  position: absolute;
  top: -18px;
  left: 22px;
  font-family: var(--display);
  font-size: 8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}
.testimonial p{
  position: relative;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--espresso);
}
.testimonial .who{
  position: relative;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--paper-line);
  font-weight: 700;
  font-size: 14px;
}
.testimonial .who span{
  font-weight: 500;
  opacity: .68;
  display: block;
  font-size: 13px;
  margin-top: 3px;
}

/* ============ PRICING ============ */
.price-card{
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink-line);
  display:flex;
  flex-direction:column;
  height:100%;
  position:relative;
}
.price-card.is-featured{
  background: var(--paper);
  color: var(--ink);
  border-color: transparent;
  transform: translateY(-10px);
}
.price-badge{
  position:absolute; top:-14px; left:30px;
  background: var(--espresso);
  color: var(--paper);
  font-size:11.5px; font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding: 7px 14px;
  border-radius: 100px;
}
.price-card h3{ font-size:1.4rem; }
.price-card .count{
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight:800;
  margin: 14px 0 2px;
}
.price-card .count small{ font-size:14px; font-weight:600; opacity:.6; }
.price-card .platforms{ display:flex; gap:8px; flex-wrap:wrap; margin: 14px 0 20px; }
.price-card .platforms span{
  font-size:11.5px; font-weight:700;
  border:1px solid currentColor; opacity:.55;
  padding: 5px 10px; border-radius:100px;
}
.price-card ul{ margin: 18px 0 26px; display:flex; flex-direction:column; gap:12px; flex-grow:1; }
.price-card li{ font-size:14px; padding-left:22px; position:relative; opacity:.9; }
.price-card li::before{ content:'✓'; position:absolute; left:0; font-weight:700; color: var(--taupe); }
.price-card .cost{ font-size: 1.6rem; font-weight:800; font-family:var(--display); margin-bottom:18px; }

.standalone-card{
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background: var(--white);
}
.standalone-card .price{ font-family: var(--display); font-weight:800; font-size:1.4rem; }
.standalone-card h4{ font-size:1.15rem; }
.standalone-card p{ font-size:14px; color: var(--espresso); opacity:.8; }

/* ============ HOMEPAGE TIER SPLIT ============
   Two doors, deliberately unequal. The retainer is the offer;
   the one-off card exists so nobody bounces thinking $5,000
   is the only way in. No prices on the alt card, so the
   cheaper number never competes with the anchor. */
.tier-split{
  display:grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 22px;
  align-items: stretch;
}
/* header uses the identical column ratio so the supporting line starts
   exactly where the one-off card starts, rather than at an arbitrary 50% */
.tier-header{
  display:grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 22px;
  align-items: end;
  margin-bottom: 44px;
}
.tier-header .section-intro{
  text-align: left;
  margin-left: 0;
  max-width: 40ch;
}
@media (max-width: 900px){
  .tier-header{ grid-template-columns: 1fr; gap: 16px; margin-bottom: 30px; }
  .tier-header .section-intro{ max-width: none; }
}
.tier-card{
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: clamp(30px,4vw,44px);
  display:flex;
  flex-direction:column;
}
.tier-card-main{
  background: rgba(255,255,255,.035);
}
.tier-card-alt{
  background: transparent;
}
.tier-price{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem,4.4vw,3rem);
  line-height: 1;
  margin-top: 16px;
}
.tier-price span{
  font-size: .36em;
  font-weight: 600;
  color: var(--sand);
}
.tier-copy{
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--sand);
  max-width: 42ch;
}
.tier-alt-head{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem,1.9vw,1.42rem);
  line-height: 1.25;
  margin-top: 16px;
  max-width: 20ch;
  text-wrap: balance;
}
.tier-list{
  margin-top: 24px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.tier-list li{
  display:flex;
  flex-direction:column;
  gap: 3px;
  padding-top: 15px;
  border-top: 1px solid var(--ink-line);
}
.tier-list li:first-child{ padding-top: 0; border-top: 0; }
.tier-list strong{ font-size: 15px; font-weight: 600; }
.tier-list span{ font-size: 14px; line-height:1.55; color: var(--sand); opacity:.85; }

/* pin both buttons to the bottom so the cards line up */
.tier-btn{ margin-top: auto; align-self: flex-start; }
.tier-card-main .tier-btn{ margin-top: 34px; }
.tier-card-alt  .tier-btn{ margin-top: 30px; }

@media (max-width: 900px){
  .tier-split{ grid-template-columns: 1fr; gap: 16px; }
  .tier-copy, .tier-alt-head{ max-width: none; }
}

/* ============ FAQ ============ */
.faq-item{
  border-top: 1px solid var(--paper-line);
}
.faq-item:last-child{ border-bottom: 1px solid var(--paper-line); }
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  padding: 26px 0;
  background:none;
  border:none;
  text-align:left;
  font-family: var(--display);
  font-size: clamp(1.05rem,2vw,1.3rem);
  font-weight: 600;
  color: var(--ink);
}
.faq-plus{
  flex-shrink:0;
  width: 30px; height:30px;
  position:relative;
}
.faq-plus::before, .faq-plus::after{
  content:'';
  position:absolute;
  background: var(--ink);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.faq-plus::before{ top:50%; left:3px; right:3px; height:2px; transform:translateY(-1px); }
.faq-plus::after{ left:50%; top:3px; bottom:3px; width:2px; transform:translateX(-1px); }
.faq-item.is-open .faq-plus::after{ transform: translateX(-1px) rotate(90deg); opacity:0; }

.faq-a{
  max-height:0;
  overflow:hidden;
  transition: max-height .5s var(--ease);
}
.faq-a-inner{ padding-bottom: 28px; max-width: 720px; }
.faq-a-inner p{ color: var(--espresso); opacity:.85; font-size:15px; line-height:1.7; }

/* ============ FOOTER ============ */
.site-footer{
  background: var(--ink);
  color: var(--paper);
  padding: 80px 0 30px;
}
/* the footer sits on --ink but isn't tagged .on-dark, so muted text was
   inheriting the dark-on-dark colour and disappearing. Force it light. */
.site-footer .text-muted{
  color: var(--sand);
  opacity: .78;
}
.site-footer .eyebrow{ color: var(--sand); }
.footer-top{
  display:flex;
  flex-direction:column;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--ink-line);
}
@media (min-width: 900px){
  .footer-top{ flex-direction:row; justify-content:space-between; align-items:flex-end; }
}
.footer-cols{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 30px;
  margin-top: 50px;
}
@media (min-width:700px){ .footer-cols{ grid-template-columns: repeat(4,1fr); } }
.footer-col h5, .footer-col .footer-heading{
  font-size:12px; text-transform:uppercase; letter-spacing:.1em;
  color: var(--taupe); margin-bottom:16px; font-weight:700;
}
.footer-col a, .footer-col p{ display:block; font-size:14.5px; color: var(--sand); margin-bottom:10px; }
.footer-col a:hover{ color: var(--paper); }
.footer-bottom{
  display:flex; flex-direction:column; gap:10px;
  padding-top: 30px; font-size:13px; color: var(--taupe);
}
@media (min-width:700px){
  .footer-bottom{ flex-direction:row; justify-content:space-between; }
}

/* ============ REVEAL ANIMATION ============
   Deliberately quick and shallow. Long, deep reveals draw attention to
   themselves and leave content still arriving as the eye reaches it.
   0.5s / 14px lands before you notice it, which is the point.        */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-1{ transition-delay: .05s; }
.reveal-2{ transition-delay: .10s; }
.reveal-3{ transition-delay: .15s; }
.reveal-4{ transition-delay: .20s; }

/* media gets a touch more presence than text — a hair of scale so
   photos and video frames feel like they settle into place */
.reel .phone,
.story-video video,
.stat-block{
  transition: transform .55s var(--ease), box-shadow .5s var(--ease), opacity .45s var(--ease);
}
.reveal:not(.is-visible) .phone{ transform: translateY(0) scale(.985); }

/* ---- respect the system setting ----
   Some people get motion sick. If they've asked their OS for less
   motion, show everything immediately and stop the marquee. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============ PAGE HERO (inner pages) ============ */
.page-hero{
  padding-top: 160px;
  padding-bottom: 34px;
}
.page-hero .eyebrow{ margin-bottom: 22px; }

.divider{
  height:1px;
  background: var(--paper-line);
  border:none;
  margin: 0;
}
.on-dark .divider{ background: var(--ink-line); }

.pill-list{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  border:1px solid var(--paper-line);
  border-radius:100px;
  padding: 8px 16px;
  font-size:13px;
  font-weight:600;
}

.cta-band{
  border-radius: var(--radius-lg);
  padding: clamp(40px,6vw,80px);
  text-align:center;
  background: var(--ink);
  color: var(--paper);
}
.cta-band .h-lg{ max-width: 780px; margin-inline:auto; }
/* these blocks sit on --ink but aren't tagged .on-dark, so muted/eyebrow
   text was inheriting the dark-on-light colour and going illegible */
.cta-band .eyebrow,
.stat-block .eyebrow{ color: var(--sand); }
.cta-band .lede,
.cta-band .text-muted{ color: var(--sand); opacity:.88; }
.cta-actions{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  margin-top: 34px;
}

/* ============ PHONE FRAME VIDEO SHOWREEL ============ */
.reel-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 700px){ .reel-grid{ grid-template-columns: repeat(3,1fr); gap:24px; } }
@media (min-width: 1000px){ .reel-grid{ grid-template-columns: repeat(5,1fr); gap:20px; } }

.reel{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* partnerships variant — only three videos, so they get the full width
   and a much larger frame instead of being squashed into a corner */
.reel-grid.is-partners{
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin-inline: auto;
}
@media (min-width: 760px){
  .reel-grid.is-partners{ grid-template-columns: repeat(3, 1fr); gap: 30px; }
}
.reel-grid.is-partners .reel{ gap: 18px; }
.reel-grid.is-partners .phone{ border-radius: 30px; }
.reel-grid.is-partners .reel-sound{ width: 38px; height: 38px; right: 12px; bottom: 12px; }
.reel-grid.is-partners .reel-sound svg{ width: 19px; height: 19px; }
.reel-grid.is-partners .reel-stat{ font-size: 15px; }
.reel-grid.is-partners .reel-stat strong{ font-size: 16.5px; }

/* compact variant used for the home page teaser strip */
.reel-grid.is-compact{ gap: 14px; }
@media (min-width: 700px){ .reel-grid.is-compact{ gap: 18px; } }
.reel-grid.is-compact .reel{ gap: 10px; }
.reel-grid.is-compact .phone{ border-radius: 20px; border-width: 2px; }
.reel-grid.is-compact .phone::before{ height: 9px; top: 5px; }
.reel-grid.is-compact .reel-sound{ width: 28px; height: 28px; right: 7px; bottom: 7px; }
.reel-grid.is-compact .reel-sound svg{ width: 14px; height: 14px; }
.reel-grid.is-compact .reel-stat{ font-size: 13px; }
.reel-grid.is-compact .phone::after{ font-size: 9.5px; padding: 4px 8px; bottom: 10px; }
.phone{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  aspect-ratio: 9 / 19;
  border-radius: 26px;
  background: #000;
  border: 3px solid #3a3a3a;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  overflow:hidden;
  cursor: pointer;
  -webkit-appearance:none;
  appearance:none;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.phone:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.reel:hover .phone{
  transform: translateY(-8px);
  box-shadow: 0 26px 54px rgba(0,0,0,0.45);
}
.phone video,
.phone img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  background:#000;
}
.phone video[hidden]{ display:none; }
/* notch */
.phone::before{
  content:'';
  position:absolute;
  top: 7px; left:50%;
  transform: translateX(-50%);
  width: 34%; height: 12px;
  background: #000;
  border-radius: 100px;
  z-index: 3;
}
/* sound toggle badge */
.reel-sound{
  position:absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245,245,245,0.22);
  color: #fff;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.phone:hover .reel-sound{ background: rgba(0,0,0,0.8); transform: scale(1.06); }
.reel-sound svg{ width:17px; height:17px; }
.reel-sound .ico-sound{ display:none; }
.phone.is-playing .reel-sound .ico-muted{ display:none; }
.phone.is-playing .reel-sound .ico-sound{ display:block; }

/* subtle "tap for sound" hint, fades out once anything has been played */
.phone::after{
  content: 'Tap for sound';
  position:absolute;
  left:50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing:.04em;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 100px;
  white-space:nowrap;
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events:none;
}
.phone:hover::after{ opacity: 1; }
.phone.is-playing::after,
.reel-grid.has-played .phone::after{ opacity: 0 !important; }

/* while a reel is playing with sound, dim the others slightly */
.reel-grid.is-soloing .reel:not(.is-active) .phone{ opacity:.45; }
.reel-grid.is-soloing .reel:not(.is-active) .phone:hover{ opacity:.75; }
.phone{ transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity .4s var(--ease); }

.reel-meta{
  display:flex;
  flex-direction:column;
  gap: 5px;
  text-align:center;
  /* lift the view count clear of the phone's drop shadow */
  position: relative;
  z-index: 2;
}
.reel-stat{
  font-size: clamp(13px, 1.2vw, 15px);
  line-height:1.35;
  color: var(--espresso);
}
.reel-stat strong{
  font-weight: 800;
  color: var(--ink);
}
.on-dark .reel-stat{ color: var(--sand); }
.on-dark .reel-stat strong{ color: var(--paper); }

/* ============ CLIENT LOGO MARQUEE ============ */
.logo-marquee-section{
  padding: 56px 0 60px;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}
.logo-marquee{
  overflow: hidden;
  /* fade the edges so logos slide in and out rather than getting clipped */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track{
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(44px, 5vw, 76px);
  /* runs continuously — no pause on hover */
  animation: logo-scroll 52s linear infinite;
}

.logo-marquee-track img{
  /* files are pre-trimmed and optically normalised, so height alone is
     enough here — no per-logo fiddling needed */
  height: clamp(32px, 3.8vw, 48px);
  width: auto;
  flex-shrink: 0;
  opacity: .55;
  filter: grayscale(100%) brightness(0) invert(1);
  transition: opacity .35s var(--ease);
}
.logo-marquee-track img:hover{ opacity: .95; }

@keyframes logo-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-50% - clamp(44px, 5vw, 76px) / 2)); }
}

@media (prefers-reduced-motion: reduce){
  .logo-marquee-track{ animation: none; flex-wrap: wrap; justify-content: center; width:100%; }
}

/* ============ CLIENT LOGO STRIP (static fallback) ============ */
.logo-strip{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  align-items:center;
  justify-items:center;
  gap: 26px 20px;
}
@media (min-width: 600px){ .logo-strip{ grid-template-columns: repeat(3,1fr); gap:34px 24px; } }
@media (min-width: 900px){ .logo-strip{ grid-template-columns: repeat(5,1fr); gap:40px 28px; } }

.logo-strip img{
  /* the source files are square with the mark floating inside, so height is
     capped by a box rather than set directly — keeps them optically even */
  max-height: 78px;
  max-width: 100%;
  width:auto;
  object-fit: contain;
  opacity:.62;
  filter: grayscale(100%);
  transition: opacity .4s var(--ease), filter .4s var(--ease), transform .4s var(--ease);
}
.logo-strip img:hover{ opacity:1; transform: scale(1.04); }

/* all supplied logos are white on transparent — normalise them to a
   uniform white so the greyer ones (Carl's Jr, A1) match the rest */
.on-dark .logo-strip img{
  filter: grayscale(100%) brightness(0) invert(1);
  opacity:.6;
}
.on-dark .logo-strip img:hover{ opacity:1; }

@media (max-width: 600px){
  .logo-strip img{ max-height: 56px; }
}

/* ============ MEDIA FEATURE BLOCK (image + text) ============ */
.media-feature{
  display:grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items:center;
}
@media (min-width: 850px){
  .media-feature{ grid-template-columns: 1fr 1fr; gap: 60px; }
  .media-feature.is-reversed .media-feature-img{ order: 2; }
}
.media-feature-img{
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 4 / 3;
  background: var(--sand);
}
.media-feature-img img,
.media-feature-img video{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}

/* ============ INLINE QUOTE ============
   A client's words dropped straight into the step they're describing,
   so the proof sits next to the claim instead of in a separate section. */
.inline-quote{
  margin: 18px 0 0;
  padding: 16px 0 0 20px;
  border-left: 2px solid var(--taupe);
}
.inline-quote p{
  font-size: 14.5px;
  line-height: 1.6;
  font-style: italic;
  color: var(--sand);
}
.inline-quote cite{
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--taupe);
}

/* ============ POSITION STATEMENT ============
   A manifesto moment, so it gets room to breathe and nothing competes
   with it. Deliberately not a card — cards read as content, this reads
   as a point of view. */
.manifesto{
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.manifesto .eyebrow{
  justify-content: center;
  color: var(--espresso);
  opacity: .7;
}
.manifesto-line{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5.2vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin-top: 26px;
  color: var(--ink);
  text-wrap: balance;
}
.manifesto-sub{
  margin-top: 28px;
  max-width: 62ch;
  margin-inline: auto;
  font-size: clamp(.98rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  color: var(--espresso);
  opacity: .82;
}
@media (max-width: 600px){
  .manifesto-line br{ display: none; }
}

/* ============ CASE STUDY BODY ============ */
.case-body{
  display:grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items:start;
}
@media (min-width: 900px){
  .case-body{ grid-template-columns: 1.4fr 1fr; gap: 60px; }
}
.case-prose{ display:flex; flex-direction:column; gap:22px; }
.case-prose p{ max-width: 62ch; }

/* pull quote that breaks up the wall of text */
.pull-quote{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.24;
  letter-spacing: -.015em;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--ink);
  margin: 6px 0;
  max-width: 24ch;
}

/* sticky side rail of key facts */
.case-rail{
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: 30px;
}
@media (min-width: 900px){
  .case-rail{ position: sticky; top: 110px; }
}
.case-rail h4{
  font-size: 12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--taupe);
  margin-bottom: 18px;
}
.rail-item{
  padding: 14px 0;
  border-top: 1px solid var(--paper-line);
}
.rail-item:first-of-type{ border-top:none; padding-top:0; }
.rail-item .k{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--taupe);
  font-weight: 700;
}
.rail-item .v{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 3px;
}

/* ============ BOOKING EMBED ============ */
.booking-embed{
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 8px;
}
.booking-embed iframe{
  width: 100%;
  min-height: 720px;
  border: none;
  display: block;
}
@media (max-width: 700px){
  .booking-embed{ padding: 4px; }
  .booking-embed iframe{ min-height: 640px; }
}

/* ============ STORY / PROOF VIDEO ============ */
/* compact CTA that lives inside the story text column rather than in its
   own full-width band, so the column fills the height of the photo
   beside it instead of leaving dead space */
.story-cta{
  /* sits directly under the closing line rather than pinned to the bottom
     of the column, so the ask arrives while the reader is still reading */
  margin-top: 12px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 26px 28px 28px;
}
.story-cta .eyebrow{ color: var(--sand); }
.story-cta h2{
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.2;
  margin-top: 10px;
  text-wrap: balance;
}
.story-cta .btn{ margin-top: 20px; }

/* The photo crops itself to whatever height the text column ends up being,
   rather than the text column leaving dead space to match a fixed image.
   Done in CSS so it stays right at every screen width, and so the original
   file is never destructively cropped. */
.story-photo{
  position: relative;
  min-height: 380px;
}
/* absolutely positioned so the photo contributes nothing to the row
   height. Otherwise the image's intrinsic height still drives the grid
   row and height:100% never bites. */
.story-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  border-radius: var(--radius-lg);
  display: block;
}
@media (max-width: 699px){
  .story-photo{ min-height: 0; }
  .story-photo img{
    position: static;
    inset: auto;
    height: auto;
    aspect-ratio: 4 / 5;
  }
}

.story-video{
  margin:0;
  position:relative;
}
.story-video video{
  width:100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  border-radius: var(--radius-lg);
  display:block;
  background: var(--ink);
}
.story-video figcaption{
  margin-top: 14px;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--taupe);
}
/* Once the two columns sit side by side, lift the caption out of the flow
   so the figure measures exactly the height of the video. Without this,
   bottom-aligning the text column lines it up with the caption instead of
   the video itself. */
@media (min-width: 700px){
  .story-video figcaption{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 12px;
  }
}
@media (max-width: 849px){
  .story-video video{ aspect-ratio: 3 / 4; }
}

/* full-bleed background video (hero) */
.hero-video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  opacity:.28;
}
.hero-video + .hero-glow{ z-index:0; }

/* utility */
.mt-0{ margin-top:0 !important; }
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; }
.gap-sm{ gap:10px; } .gap-md{ gap:20px; } .gap-lg{ gap:40px; }
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.max-w-sm{ max-width:520px; }
.max-w-md{ max-width:720px; }

/* ============================================================
   AUDIT PAGE
   Built plainly so it can be restyled without fighting the code.
   Every colour comes from the brand variables at the top of this
   file, so changing those changes the audit too.
   ============================================================ */
.audit{ max-width: 780px; margin-inline: auto; }

.audit-block{ margin-bottom: 46px; }
.audit-block .eyebrow{ margin-bottom: 20px; }

.audit-items{ display:flex; flex-direction:column; gap: 2px; }

.audit-item{
  display:flex;
  align-items:flex-start;
  gap: 16px;
  padding: 17px 20px;
  border-radius: 14px;
  cursor:pointer;
  transition: background .25s var(--ease);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--espresso);
}
.audit-item:hover{ background: rgba(32,32,32,.04); }

/* custom tick box */
.audit-item input{
  appearance:none;
  -webkit-appearance:none;
  flex-shrink:0;
  width: 22px; height: 22px;
  margin: 1px 0 0;
  border: 1.5px solid var(--taupe);
  border-radius: 6px;
  cursor:pointer;
  position:relative;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.audit-item input:checked{
  background: var(--ink);
  border-color: var(--ink);
}
.audit-item input:checked::after{
  content:'';
  position:absolute;
  left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.audit-item input:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.audit-item:has(input:checked){ background: rgba(32,32,32,.05); }
.audit-item:has(input:checked) span{ color: var(--ink); }

.audit-submit{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 16px;
  margin-top: 10px;
  padding-top: 34px;
  border-top: 1px solid var(--paper-line);
}
.audit-progress{
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--taupe);
}

/* ---------- result ---------- */
.audit-result{
  max-width: 780px;
  margin-inline: auto;
  text-align:center;
}
.score-ring{
  --pct: 0%;
  width: 190px; height: 190px;
  margin: 0 auto;
  border-radius: 50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    conic-gradient(var(--ink) var(--pct), rgba(32,32,32,.10) 0);
  position:relative;
}
.score-ring::after{
  content:'';
  position:absolute;
  inset: 13px;
  border-radius:50%;
  background: var(--paper);
}
.score-num{
  position:relative; z-index:1;
  font-family: var(--display);
  font-weight: 800;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--ink);
}
.score-of{
  position:relative; z-index:1;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--taupe);
  margin-top: 4px;
}

/* ---------- email gate ---------- */
.audit-gate{
  margin-top: 44px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(30px,4vw,44px);
  text-align:left;
}
.gate-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem,2.4vw,1.7rem);
}
.gate-sub{
  margin-top: 10px;
  color: var(--sand);
  font-size: 15px;
  max-width: 54ch;
}
.gate-row{
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-top: 24px;
}
@media (min-width: 720px){
  .gate-row{ flex-direction:row; }
  .gate-row input{ flex:1; }
}
.gate-row input{
  padding: 15px 18px;
  border-radius: 100px;
  border: 1px solid var(--ink-line);
  background: rgba(245,245,245,.06);
  color: var(--paper);
  font-family: var(--body);
  font-size: 15px;
}
.gate-row input::placeholder{ color: var(--taupe); }
.gate-row input:focus{ outline:none; border-color: var(--sand); }
.gate-fine{
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--taupe);
}

/* ---------- closing CTA ---------- */
.audit-cta{
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--paper-line);
}
.audit-cta p{
  max-width: 56ch;
  margin: 0 auto 22px;
  color: var(--espresso);
  font-size: 15.5px;
}
.audit-retake{
  margin-top: 30px;
  background:none;
  border:none;
  font-size: 13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  color: var(--taupe);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.audit-retake:hover{ color: var(--ink); }