/* ===========================================================
   JEWELER MOMENTUM
   Modern product-marketing, not editorial. Bold geometric sans,
   centred hero with a pill badge, paired pill buttons, cards with
   soft borders, a dark stat band, generous rounding throughout.
   Gold stays the accent; black carries the primary actions.
   =========================================================== */
:root{
  /* ---- surface ----------------------------------------------------------
     Everything is faintly cooled toward the sea. Pure grey reads as office;
     a green-blue cast reads as water. */
  --bg:        #FFFFFF;
  --soft:      #F1F7F5;   /* mint-cooled band */
  --soft-2:    #E3EEEA;

  /* ---- deep emerald: the dark sections --------------------------------- */
  --ink:       #06302B;
  --ink-2:     #0C3F38;   /* cards sitting on ink */

  --text:      #1F2A27;
  --muted:     #5A6A65;   /* 5.7:1 on white, 5.2:1 on the mint band */
  --muted-ink: #9FC4B8;   /* 7.6:1 on emerald */

  /* ---- emerald: the primary action ------------------------------------- */
  --emerald:      #0E7C5F;   /* 5.2:1 both ways — button fill AND small text */
  --emerald-lit:  #3FD6A4;   /* on ink only */
  --emerald-wash: #E4F4EE;
  --emerald-edge: #C3E6DA;

  /* ---- sapphire: the second accent ------------------------------------- */
  --sapphire:      #11658F;  /* ocean blue — 6.4:1 on white */
  --sapphire-lit:  #6CC2F0;  /* on ink only */
  --sapphire-wash: #E6F2F9;
  --sapphire-edge: #C4DEEE;

  /* ---- aquamarine: highlights, flow, water ----------------------------- */
  --aqua:      #0E8FA6;      /* 4.6:1 on white */
  --aqua-lit:  #5FD9E8;
  --aqua-wash: #E3F5F8;

  /* ---- gold: the mark, and nothing much else --------------------------- */
  --gold:      #A8834A;
  --gold-text: #7C5F33;
  --gold-lit:  #E0BE7E;

  --line:      #DFE8E4;
  --line-ink:  rgba(255,255,255,.14);

  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --s-1:.4rem; --s-2:.75rem; --s-3:1.15rem; --s-4:1.9rem;
  --s-5:3rem; --s-6:4.5rem; --s-7:6.5rem;
  /* square throughout — no rounding anywhere, including the buttons */
  --r-sm:0; --r:0; --r-lg:0; --r-xl:0; --r-pill:0;
  --ease:cubic-bezier(.22,.8,.3,1);
  --shadow:0 1px 2px rgba(6,48,43,.05), 0 8px 24px -12px rgba(6,48,43,.14);
  --shadow-lg:0 2px 4px rgba(6,48,43,.06), 0 24px 56px -24px rgba(6,48,43,.26);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
.container{width:min(100% - 2rem, 72rem); margin-inline:auto}
.narrow{width:min(100% - 2rem, 48rem); margin-inline:auto}
.skip{position:absolute;left:-9999px}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1rem}
:focus-visible{outline:2px solid var(--emerald); outline-offset:3px}

/* ---------- type: tight, bold, geometric ---------- */
h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:800;
  letter-spacing:-.035em; line-height:1.04; text-wrap:balance}
h1{font-size:clamp(2.6rem,5.6vw,4.4rem)}
h2{font-size:clamp(2rem,3.9vw,3.1rem); line-height:1.07}
h3{font-size:clamp(1.15rem,1.5vw,1.3rem); line-height:1.25; letter-spacing:-.02em; font-weight:700}
h1 em,h2 em{font-style:normal; color:var(--emerald)}
.on-ink h1 em,.on-ink h2 em{color:var(--emerald-lit)}
p{margin:0}
.lede{font-size:clamp(1.0625rem,1.3vw,1.1875rem); line-height:1.6; color:var(--muted); max-width:56ch}
.body{margin-top:var(--s-3); max-width:62ch; color:var(--muted)}
.body b,.lede b{color:var(--ink); font-weight:700}
.micro{font-size:.8125rem; color:var(--muted)}
b,strong{font-weight:700; color:var(--ink)}

/* ---------- the pill badge above a headline ---------- */
.badge{display:inline-flex; align-items:center; gap:.5rem; margin:0 0 var(--s-4);
  padding:.45rem .95rem; border-radius:var(--r-pill);
  background:var(--emerald-wash); border:1px solid var(--emerald-edge);
  font-size:.8125rem; font-weight:600; color:var(--emerald); letter-spacing:-.005em}
.badge .dot{width:.4rem;height:.4rem;background:var(--emerald);flex:none}
.on-ink .badge{background:rgba(63,214,164,.13); border-color:rgba(63,214,164,.3); color:var(--emerald-lit)}
.eyebrow{margin:0 0 var(--s-3); font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--emerald)}
.on-ink .eyebrow{color:var(--emerald-lit)}

/* ---------- buttons: pills, paired ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  text-decoration:none; font-family:var(--sans); font-size:.9375rem; font-weight:700;
  letter-spacing:-.01em; padding:.95rem 1.75rem; min-height:52px;
  border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease)}
.btn-primary{background:var(--emerald); color:#fff}
.btn-primary:hover{background:#0A6A50; transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); background:var(--soft)}
.on-ink .btn-primary{background:var(--emerald-lit); color:#042520}
.on-ink .btn-primary:hover{background:#5FE6B8}
.on-ink .btn-ghost{color:#fff; border-color:rgba(255,255,255,.3)}
.on-ink .btn-ghost:hover{background:rgba(255,255,255,.08); border-color:#fff}
.btn .arw{transition:transform .22s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btns{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--s-4)}
.centred .btns{justify-content:center}

/* ---------- layout ---------- */
.section{padding:clamp(3.5rem, 4.6vw, 4.75rem) 0}
.band{background:var(--soft)}
.on-ink{background:var(--ink); color:var(--muted-ink)}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:#fff}
.on-ink .lede,.on-ink .body{color:var(--muted-ink)}
.on-ink b,.on-ink strong{color:#fff}
.on-ink .micro{color:#8C938799}
/* a dark block that floats inside the white page, like the references */
.inset{border-radius:var(--r-xl); margin-inline:auto;
  width:min(100% - 2rem, 76rem); padding:var(--s-6) 0}
.centred{text-align:center}
.centred .lede{margin-inline:auto}
.centred .body{margin-inline:auto}
.head{max-width:40ch}
.centred .head{margin-inline:auto}

/* ---------- header ---------- */
.header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease)}
.header.stuck{border-bottom-color:var(--line)}
.header-in{display:flex; align-items:center; gap:var(--s-4); min-height:76px}
.brand{display:flex; align-items:center; gap:.55rem; margin-right:auto;
  text-decoration:none; min-height:44px}
.brand img{height:30px; width:auto; flex:none}
.brand .lock{display:grid; line-height:1}
.brand .thin{font-size:.5rem; font-weight:700; letter-spacing:.34em;
  text-transform:uppercase; color:var(--muted)}
.brand .word{font-size:1.12rem; font-weight:800; letter-spacing:-.025em;
  color:var(--ink); margin-top:.2rem}
.nav{display:none; gap:.4rem; align-items:center}
@media (min-width:900px){.nav{display:flex}}
.nav a{text-decoration:none; font-size:.9375rem; font-weight:600; color:var(--muted);
  padding:.55rem .85rem; min-height:40px;
  display:inline-flex; align-items:center; transition:background .2s var(--ease), color .2s var(--ease)}
.nav a:hover{background:var(--soft); color:var(--ink)}
.header .btn{padding:.7rem 1.3rem; min-height:44px; font-size:.875rem}

/* ---------- hero ---------- */
.hero{padding:var(--s-6) 0 var(--s-5); text-align:center; position:relative; overflow:hidden}
.hero h1{max-width:17ch; margin-inline:auto}
.hero .lede{margin-top:var(--s-4); font-size:clamp(1.0625rem,1.35vw,1.21rem)}
.hero-note{margin-top:var(--s-3); font-size:.8125rem; color:var(--muted)}
.hero-sweep{position:absolute; left:50%; top:-12%; translate:-50% 0; width:min(90vw,980px); height:auto;
  opacity:.05; pointer-events:none; z-index:0}
.hero > .container{position:relative; z-index:1}

/* ---------- logo / name strip ---------- */
.strip{margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--line)}
.strip-k{font-size:.8125rem; font-weight:600; color:var(--muted); margin-bottom:var(--s-3)}
.strip-list{display:flex; flex-wrap:wrap; gap:.6rem var(--s-4); justify-content:center;
  list-style:none; margin:0; padding:0}
.strip-list li{font-size:.9375rem; font-weight:700; color:var(--ink); opacity:.55;
  letter-spacing:-.015em}

/* ---------- cards ---------- */
.cards{display:grid; gap:var(--s-3); margin-top:var(--s-5)}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.c3,.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.c3,.c4,.c2{grid-template-columns:1fr}}
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s-4); min-width:0; display:grid; gap:.6rem; align-content:start;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease)}
.card:hover{border-color:#D3D3CA; box-shadow:var(--shadow); transform:translateY(-2px)}
.band .card{background:var(--bg)}
.card p{font-size:.9375rem; line-height:1.55; color:var(--muted)}
.card .ico{width:38px;height:38px; display:grid; place-items:center;
  background:var(--emerald-wash); color:var(--emerald); margin-bottom:.35rem}
.cards .card:nth-child(3n+2) .ico{background:var(--sapphire-wash); color:var(--sapphire)}
.cards .card:nth-child(3n) .ico{background:var(--aqua-wash); color:var(--aqua)}
.card .ico svg{width:19px;height:19px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.on-ink .card{background:var(--ink-2); border-color:var(--line-ink)}
.on-ink .card p{color:var(--muted-ink)}
.on-ink .card .ico{background:rgba(63,214,164,.13); color:var(--emerald-lit)}
.card .n{font-size:.75rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--emerald)}
.on-ink .card .n{color:var(--emerald-lit)}

/* ---------- stat band ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); margin-top:var(--s-5);
  border-top:1px solid var(--line-ink)}
.stats > div{padding:var(--s-4) var(--s-3); border-right:1px solid var(--line-ink); min-width:0}
.stats > div:last-child{border-right:0}
.stats .k{font-size:.75rem; font-weight:600; color:var(--muted-ink); line-height:1.35}
.stats .v{margin-top:var(--s-3); font-size:clamp(2.1rem,3.8vw,3rem); font-weight:800;
  letter-spacing:-.04em; color:#fff; line-height:1}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}
  .stats > div:nth-child(2n){border-right:0}
  .stats > div:nth-child(-n+2){border-bottom:1px solid var(--line-ink)}}

/* ---------- quote / VOC cards ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-3); margin-top:var(--s-5)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s-4); font-size:1.0625rem; font-weight:600; line-height:1.45;
  color:var(--ink); letter-spacing:-.015em; min-width:0}
.quote::before{content:"“"; display:block; font-size:2.4rem; line-height:.7;
  color:var(--aqua); margin-bottom:.5rem; font-weight:800}

/* ---------- checklists ---------- */
.ticks,.crosses{list-style:none; margin:var(--s-3) 0 0; padding:0; display:grid; gap:.7rem}
.ticks li,.crosses li{position:relative; padding-left:2rem; line-height:1.5;
  font-size:.9688rem; color:var(--muted)}
.ticks li::before{content:""; position:absolute; left:0; top:.1rem; width:1.1rem; height:1.1rem;
  background:var(--emerald-wash);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C5F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:.8rem; background-position:center; background-repeat:no-repeat}
.crosses li::before{content:""; position:absolute; left:0; top:.1rem; width:1.1rem; height:1.1rem;
  background:var(--soft-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362675E' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  background-size:.72rem; background-position:center; background-repeat:no-repeat}
.on-ink .ticks li,.on-ink .crosses li{color:var(--muted-ink)}

/* ---------- split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); margin-top:var(--s-5); align-items:start}
.split > *{min-width:0}
@media (max-width:860px){.split{grid-template-columns:1fr; gap:var(--s-4)}}
.panel{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-4)}
.panel h3{margin-bottom:var(--s-2)}
.panel.dim{background:var(--soft)}

/* ---------- figure ---------- */
.figure{margin:var(--s-5) 0 0; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-4)}
.band .figure,.on-ink .figure{background:var(--bg)}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line);
  font-size:.9375rem; line-height:1.6; color:var(--muted)}
.figure figcaption b{color:var(--ink)}

/* ---------- proof ---------- */
.claim .v{font-size:clamp(2.4rem,4vw,3.2rem); font-weight:800; letter-spacing:-.045em;
  color:var(--emerald); line-height:1; display:block}
.card.claim:nth-child(2) .v{color:var(--sapphire)}
.card.claim:nth-child(3) .v{color:var(--aqua-text)}
.claim .k{margin-top:.45rem; font-size:.8125rem; font-weight:700; color:var(--ink);
  letter-spacing:-.01em}
.claim p{margin-top:.35rem}
.note{margin-top:var(--s-4); font-size:.8125rem; line-height:1.65; color:var(--muted); max-width:72ch}
.centred .note{margin-inline:auto}
.note b{color:var(--ink)}

/* ---------- five Cs ---------- */
.fives{list-style:none; margin:var(--s-5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-3)}
.fives li{background:var(--ink-2); border:1px solid var(--line-ink); border-radius:var(--r);
  padding:var(--s-3); display:grid; gap:.35rem; align-content:start; min-width:0}
.fives .n{font-size:.6875rem; font-weight:700; letter-spacing:.14em; color:var(--emerald-lit)}
.fives b{font-size:1.0625rem; font-weight:700; color:#fff; letter-spacing:-.02em}
.fives span:last-child{font-size:.8125rem; line-height:1.45; color:var(--muted-ink)}
@media (max-width:980px){.fives{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.fives{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{margin-top:var(--s-5); display:grid; gap:.6rem}
.faq details{background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .2s var(--ease)}
.faq details[open]{border-color:#D3D3CA}
.faq summary{list-style:none; cursor:pointer; padding:var(--s-3) 3rem var(--s-3) var(--s-4);
  position:relative; min-height:56px; display:flex; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:1.3rem; top:50%; width:.85rem; height:.85rem;
  translate:0 -50%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C5F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
.faq details[open] summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C5F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.faq details > div{padding:0 3rem var(--s-4) var(--s-4)}
.faq p{color:var(--muted); line-height:1.6; font-size:.9688rem}

/* ---------- cta block ---------- */
.cta{border-radius:var(--r-xl); color:var(--muted-ink);
  background:linear-gradient(145deg,#06302B 0%,#0A463C 52%,#0B4A58 100%);
  padding:var(--s-6) var(--s-4); text-align:center}
.cta h2{color:#fff; max-width:22ch; margin-inline:auto}
.cta .lede{color:var(--muted-ink); margin-inline:auto; margin-top:var(--s-4)}

/* ---------- footer ---------- */
.footer{padding:var(--s-6) 0 var(--s-5); border-top:1px solid var(--line)}
.foot-in{display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; justify-content:space-between}
.foot-links{display:flex; gap:var(--s-3); flex-wrap:wrap}
.footer a{color:var(--muted); text-decoration:none; font-size:.875rem; font-weight:600;
  padding:.5rem .25rem; display:inline-flex; align-items:center; min-height:40px}
.footer a:hover{color:var(--ink)}
.colophon{margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line);
  font-size:.75rem; color:var(--muted); max-width:62ch; line-height:1.6}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none} *{animation:none!important;transition:none!important}
}
/* the hero is centred but isn't tagged .centred, so its button row needs
   the same treatment explicitly */
.hero .btns{justify-content:center}
.hero .badge{margin-inline:auto}

/* ===========================================================
   ILLUSTRATIONS
   Flat, geometric, two-tone. These carry the momentum argument,
   so they get real space — but they stay diagrams, never clip art.
   Each one has a stacked text fallback below 760px, because a
   960-unit viewBox squeezed into 375px makes the labels illegible.
   =========================================================== */
.illus{margin:var(--s-5) 0 0; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-4) var(--s-4) var(--s-3)}
.band .illus,.on-ink .illus{background:var(--bg)}
.on-ink .illus{border-color:transparent}
.illus svg{display:block; width:100%; height:auto}
.illus figcaption{margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--line);
  font-size:.9375rem; line-height:1.6; color:var(--muted); text-align:center}
.illus figcaption b{color:var(--ink)}
.illus-sm{display:none}
@media (max-width:760px){
  /* `.illus svg` is (0,1,1) and out-specifies a bare `.illus-lg` (0,1,0), so the
     SVG kept rendering next to its own fallback. Match the element too. */
  .illus svg.illus-lg,.illus-lg{display:none}
  .illus .illus-sm,.illus-sm{display:block}
  .illus{padding:var(--s-3); border:0; background:transparent}
  .band .illus{background:transparent}
}
/* the flow dashes creep along the pipe — momentum, literally */
@keyframes jm-flow{to{stroke-dashoffset:-56}}
.jm-flow{animation:jm-flow 1.8s linear infinite}
@keyframes jm-orbit{to{stroke-dashoffset:-1000}}
.jm-orbit{animation:jm-orbit 14s linear infinite}
@media (prefers-reduced-motion:reduce){.jm-flow,.jm-orbit{animation:none}}

/* the stepped funnel */
.funnel-rows{display:grid; gap:var(--s-3); margin-top:var(--s-5)}
.frow{display:grid; grid-template-columns:7.5rem 1fr auto; align-items:center;
  gap:var(--s-3); min-width:0}
.frow .fk{font-size:.8125rem; font-weight:700; color:var(--muted); letter-spacing:-.01em}
.frow .fbar{height:2.9rem; border-radius:var(--r-sm); background:var(--aqua-wash);
  border:1px solid #BFE4EC; min-width:3rem}
.frow .fbar.solid{background:var(--emerald); border-color:var(--emerald)}
.frow .fv{font-size:1.25rem; font-weight:800; letter-spacing:-.03em; color:var(--ink);
  white-space:nowrap}
@media (max-width:620px){
  .frow{grid-template-columns:1fr auto; gap:.5rem var(--s-3)}
  .frow .fk{grid-column:1/-1}
  .frow .fbar{height:2.2rem}
}
/* the inputs and outputs sit outside the bars: ad spend and order value are
   different units from a lead count, so putting them on the same scale would
   imply a proportion that doesn't exist. */
.fnote{text-align:center; font-size:.9375rem; color:var(--muted); margin:var(--s-4) auto 0}
.funnel-rows + .fnote{margin-top:var(--s-3)}

/* ===========================================================
   COLOUR ATMOSPHERE
   White sections with nothing in them read as a spreadsheet. The
   reference sites all sit their hero on a wash and alternate tinted
   bands down the page, so the page has a temperature.
   =========================================================== */
.hero{
  background:
    radial-gradient(70% 58% at 50% -8%,  rgba(14,143,166,.16) 0%, rgba(14,143,166,0) 62%),
    radial-gradient(46% 42% at 12% 18%,  rgba(14,124,95,.13)  0%, rgba(14,124,95,0)  70%),
    radial-gradient(46% 44% at 88% 12%,  rgba(26,84,149,.11)  0%, rgba(26,84,149,0)  70%);
}
/* the mark behind the hero is a gold file; tint it to the sea and drop it back
   so it reads as texture rather than a second logo */
.hero-sweep{opacity:.07; filter:hue-rotate(118deg) saturate(.6)}

/* bands alternate mint and sky rather than repeating one grey */
.band{background:linear-gradient(180deg, var(--soft) 0%, #EAF4F1 100%)}
.band-sky{background:linear-gradient(180deg, #F2F7FC 0%, #E8F1FB 100%)}
.band-sky .panel,.band-sky .card,.band-sky .quote,.band-sky .faq details{background:var(--bg)}

/* the dark blocks get depth instead of flat near-black */
.on-ink{background:linear-gradient(160deg,#06302B 0%,#073A33 48%,#07414A 100%)}

/* the stat figures pick up the three stones in turn */
.stats > div:nth-child(1) .v{color:var(--emerald-lit)}
.stats > div:nth-child(2) .v{color:#fff}
.stats > div:nth-child(3) .v{color:var(--aqua-lit)}
.stats > div:nth-child(4) .v{color:var(--sapphire-lit)}

/* quote cards cycle their rule colour so the row isn't monotone */
.quotes .quote{border-top:3px solid var(--emerald)}
.quotes .quote:nth-child(2){border-top-color:var(--sapphire)}
.quotes .quote:nth-child(3){border-top-color:var(--aqua)}

/* the "what it is" panel reads as the positive one */
.panel.lift{background:linear-gradient(170deg,var(--emerald-wash) 0%,#FFFFFF 70%);
  border-color:var(--emerald-edge)}
/* .cta is a dark block but carries its own class, so the .on-ink overrides
   never reached it — its emphasis was dark emerald on dark emerald (2.1:1). */
.cta h2 em{color:var(--emerald-lit)}
.cta .badge{background:rgba(63,214,164,.13); border-color:rgba(63,214,164,.3); color:var(--emerald-lit)}
.cta .btn-primary{background:var(--emerald-lit); color:#042520}
.cta .btn-primary:hover{background:#5FE6B8}
/* --aqua is a fill tone (3.8:1 on white — fine for graphics, which need 3:1,
   but not for small text). Anything small and aqua uses this instead. */
:root{--aqua-text:#0B7C8C}

/* ---- more blue, and a dark block that leans ocean rather than forest -------
   One of the three dark sections carries the problem (dependency), so it gets
   the cooler end of the palette. The rest stay emerald. */
.on-ink.blue{background:linear-gradient(160deg,#052A33 0%,#073A4C 50%,#0B4A63 100%)}
.on-ink.blue .eyebrow,.on-ink.blue h2 em{color:var(--sapphire-lit)}
.on-ink.blue .badge{background:rgba(108,194,240,.13); border-color:rgba(108,194,240,.3); color:var(--sapphire-lit)}
.on-ink.blue .card .n{color:var(--sapphire-lit)}
.on-ink.blue .btn-primary{background:var(--sapphire-lit); color:#042028}
.on-ink.blue .btn-primary:hover{background:#95D5F7}

/* stronger blue in the hero wash and the sky bands */
.hero{
  background:
    radial-gradient(74% 60% at 50% -8%, rgba(17,101,143,.20) 0%, rgba(17,101,143,0) 64%),
    radial-gradient(46% 42% at 10% 20%, rgba(14,124,95,.15)  0%, rgba(14,124,95,0)  70%),
    radial-gradient(50% 46% at 92% 10%, rgba(14,143,166,.17) 0%, rgba(14,143,166,0) 70%);
}
.band-sky{background:linear-gradient(180deg,#EFF6FA 0%,#E2EFF7 100%)}
.cta{background:linear-gradient(145deg,#06302B 0%,#073F45 50%,#0A4D68 100%)}

/* square the SVG geometry too, so the diagrams match the page */
.illus svg rect,.figure svg rect{rx:0}

/* ---- blue is an ACCENT, not a surface --------------------------------------
   Every background goes back to the green family. Blue survives only in
   elements: a stat figure, a card rule, an icon tile, an emphasised word. */
.on-ink{background:linear-gradient(160deg,#06302B 0%,#073A33 48%,#07414A 100%)}
.cta{background:linear-gradient(145deg,#06302B 0%,#07413A 52%,#084A49 100%)}
.band{background:linear-gradient(180deg,#F1F7F5 0%,#E9F3EF 100%)}
.band-alt{background:linear-gradient(180deg,#F4F8F6 0%,#EDF4F2 100%)}
.band-alt .panel,.band-alt .card,.band-alt .quote,.band-alt .faq details{background:var(--bg)}
.hero{
  background:
    radial-gradient(72% 58% at 50% -8%, rgba(14,124,95,.17)  0%, rgba(14,124,95,0)  64%),
    radial-gradient(48% 44% at 10% 20%, rgba(14,143,166,.15) 0%, rgba(14,143,166,0) 70%),
    radial-gradient(44% 40% at 92% 12%, rgba(17,101,143,.10) 0%, rgba(17,101,143,0) 72%);
}
/* blue, where it still earns its place */
.stats > div:nth-child(4) .v{color:var(--sapphire-lit)}
.quotes .quote:nth-child(2){border-top-color:var(--sapphire)}
.cards .card:nth-child(3n+2) .ico{background:var(--sapphire-wash); color:var(--sapphire)}
.card.claim:nth-child(2) .v{color:var(--sapphire)}

/* ---- the takeoff story ---------------------------------------------------- */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; list-style:none;
  margin:var(--s-4) 0 0; padding:0}
.chips li{padding:.5rem 1rem; border:1px solid var(--line); background:var(--bg);
  font-size:.875rem; font-weight:600; color:var(--text); letter-spacing:-.01em}
.chips li:nth-child(3n+1){border-color:var(--emerald-edge); background:var(--emerald-wash)}
.chips li:nth-child(3n+2){border-color:var(--sapphire-edge); background:var(--sapphire-wash)}
.chips li:nth-child(3n){border-color:#BFE4EC; background:var(--aqua-wash)}
.chips-k{margin-top:var(--s-5); text-align:center; font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* the one-line claim that carries a section */
.pull{margin:var(--s-5) auto 0; max-width:34ch; text-align:center;
  font-size:clamp(1.3rem,2.3vw,1.75rem); font-weight:800; line-height:1.22;
  letter-spacing:-.03em; color:var(--ink);
  border-top:3px solid var(--emerald); padding-top:var(--s-4)}
.on-ink .pull{color:#fff; border-top-color:var(--emerald-lit)}

/* ---- kicker labels removed -------------------------------------------------
   Every section used to open with a tracked-out small-caps label ("The idea
   behind it", "For independent jewelers"). They're gone; headlines carry their
   own sections now. Sections need a little more air at the top without them,
   and the chip row needs its own spacing since its label became a sentence. */
.head h2{margin-top:0}
.hero h1{margin-top:var(--s-2)}
.chips{margin-top:var(--s-3)}
.chips + .body{margin-top:var(--s-4)}
.strip-k{font-size:.875rem; font-weight:500; letter-spacing:0; text-transform:none;
  color:var(--muted)}

/* ---- CENTRING BUG --------------------------------------------------------
   These were written as descendant selectors (`.centred .head`), but the
   elements carry BOTH classes — <div class="head centred"> — so nothing
   matched. The blocks kept their max-width and got no auto margins, which
   left them hugging the left edge with their text centred inside. Match the
   compound form too. */
.centred .head, .head.centred,
.centred .lede, .lede.centred,
.centred .body, .body.centred,
.centred .note, .note.centred,
.centred .funnel-rows, .centred .fnote{margin-inline:auto}
.hero .lede, .hero .hero-note{margin-inline:auto}

/* ---- video (hero) ----------------------------------------------------------
   Wistia custom element. The :not(:defined) rule holds a 16:9 box and shows the
   blurred swatch until the element upgrades, so nothing below it jumps. */
.vid-anchor{margin:var(--s-5) auto 0; max-width:44rem; aspect-ratio:16/9}
.vidslot{border:1px solid var(--line); background:var(--ink); height:100%}

/* docked: follows you down the page once the video is actually playing */
.vidslot.docked{position:fixed; z-index:60; right:clamp(12px,2vw,28px);
  bottom:clamp(12px,2vw,28px); width:clamp(280px,26vw,380px); height:auto;
  box-shadow:0 18px 48px rgba(6,48,43,.34); animation:vidDock .28s ease both}
@keyframes vidDock{from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none}}
.vid-undock{position:absolute; top:-11px; right:-11px; width:28px; height:28px;
  display:grid; place-items:center; cursor:pointer; padding:0;
  background:var(--ink); color:#fff; border:1px solid var(--line-ink);
  font-size:1rem; line-height:1}
.vid-undock[hidden]{display:none}
.vid-undock:hover{background:var(--emerald)}
.vidslot{position:relative}
wistia-player[media-id='wtsfkpvnjc']:not(:defined){display:block; padding-top:56.25%;
  background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/wtsfkpvnjc/swatch');
  filter:blur(5px)}

/* the gold analogy sits inside a dark section, so it needs its own skin */
.gold-an{margin-top:var(--s-6); background:var(--ink-2); border-color:var(--line-ink)}
.gold-an h3{color:#fff; margin-bottom:var(--s-2)}
.gold-an .body{color:var(--muted-ink); max-width:none}
.gold-an .body b{color:#fff}
.on-ink .split .panel{background:var(--ink-2); border-color:var(--line-ink)}
.on-ink .split .panel h3{color:var(--emerald-lit)}

/* ---- jeweler marquee -------------------------------------------------------
   Two identical sets slide left; when the first has fully exited the second is
   exactly where the first began, so the loop is seamless. The duplicate is
   aria-hidden so a screen reader hears each name once. Hover and keyboard
   focus pause it, and reduced-motion gets a static wrapped list instead. */
.marquee{margin-top:var(--s-3); overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex; width:max-content; animation:jm-marquee 70s linear infinite}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-set{display:flex; align-items:center; list-style:none; margin:0; padding:0}
.marquee-set li{padding:0 var(--s-4); white-space:nowrap;
  font-size:1rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); opacity:.5;
  position:relative}
.marquee-set li::after{content:""; position:absolute; right:0; top:50%; translate:0 -50%;
  width:4px; height:4px; background:var(--emerald); opacity:.55}
@keyframes jm-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none; mask-image:none}
  .marquee-track{animation:none; width:100%; flex-wrap:wrap; justify-content:center}
  .marquee-set{flex-wrap:wrap; justify-content:center; gap:.35rem 0}
  .marquee-set[aria-hidden="true"]{display:none}
  .marquee-set li{padding:.2rem var(--s-3)}
  .marquee-set li::after{display:none}
}
/* a lede above a figure, so the chart states its own point of view before
   anyone has to infer it from the axis */
.fig-lede{margin:0 0 var(--s-4); padding:0 0 var(--s-3); border-top:0;
  border-bottom:1px solid var(--line); font-size:.9375rem; line-height:1.6; color:var(--muted)}
.fig-lede b{color:var(--ink)}

/* ---- middleman comparison --------------------------------------------------
   The JAXXON "fair pricing" device: two stacked columns, one padded by a cut
   that never reaches the customer. Heights are proportional to real dollars,
   so the picture can't say anything the numbers don't. */
/* align at the TOP: bottom-aligning let a longer caption under one column
   push its bar out of line with the other, which breaks the comparison. */
.cutout{margin-top:var(--s-5); display:grid; grid-template-columns:1fr 1fr;
  gap:var(--s-5); align-items:start; max-width:40rem; margin-inline:auto}
@media (max-width:620px){.cutout{gap:var(--s-4)}}
.cut-col{display:grid; justify-items:center; gap:var(--s-3); min-width:0;
  grid-template-rows:auto 230px auto auto}
.cut-total{font-size:1.35rem; font-weight:800; letter-spacing:-.03em; color:var(--ink)}
.cut-total span{display:block; font-size:.75rem; font-weight:600; color:var(--muted);
  letter-spacing:0; margin-top:.1rem}
.cut-stack{width:100%; max-width:11rem; display:grid; align-content:end}
.cut-seg{display:grid; place-items:center; text-align:center; padding:.4rem;
  font-size:.75rem; font-weight:700; line-height:1.25}
.cut-fee{background:var(--soft-2); color:var(--muted); border:1px solid var(--line);
  border-bottom:0}
.cut-ads{background:var(--emerald); color:#fff}
.cut-label{font-size:.875rem; font-weight:700; color:var(--ink); text-align:center}
.cut-sub{font-size:.8125rem; color:var(--muted); text-align:center; line-height:1.45}
.cut-note{margin-top:var(--s-4); text-align:center; font-size:.8125rem;
  color:var(--muted); line-height:1.6; max-width:52ch; margin-inline:auto}
.cut-note b{color:var(--ink)}
/* the plane picture is the argument now — it gets room to breathe */
.illus.planes{padding:0; overflow:hidden; border:1px solid var(--line)}
.illus.planes svg{display:block}
.illus.planes figcaption{margin:0; padding:var(--s-3) var(--s-4) var(--s-4);
  border-top:1px solid var(--line)}
@media (max-width:760px){.illus.planes{border:0; padding:0}
  .illus.planes figcaption{padding:var(--s-3) 0 0}}

/* `.illus.planes svg` (0,2,1) ties with `.illus svg.illus-lg` (0,2,1) and, being
   later in the file, was winning — so the phone rendered the wide SVG *and* its
   text fallback. Out-specify it rather than relying on source order. */
@media (max-width:760px){
  .illus.planes svg.illus-lg,
  .illus svg.illus-lg{display:none !important}
}

/* ---- animated plane figure ------------------------------------------------- */
.planes-head{display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center;
  justify-content:space-between; padding:var(--s-4) var(--s-4) var(--s-3)}
.planes-k{font-size:.9375rem; color:var(--muted)}
.planes-k b{color:var(--ink)}
.seg{display:flex; border:1px solid var(--line); flex:none}
.seg-b{appearance:none; background:transparent; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.8125rem; font-weight:700; color:var(--muted);
  padding:.6rem 1rem; min-height:40px; transition:background .2s var(--ease), color .2s var(--ease)}
.seg-b + .seg-b{border-left:1px solid var(--line)}
.seg-b:hover{color:var(--ink); background:var(--soft)}
.seg-b.is-on{background:var(--emerald); color:#fff}

.planes-readout{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3) var(--s-4);
  padding:var(--s-4); border-top:1px solid var(--line)}
.pr-row{display:grid; gap:.1rem; min-width:0; padding-left:.9rem;
  border-left:3px solid var(--line)}
.pr-row.pr-win{border-left-color:var(--emerald)}
.pr-k{font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted)}
.pr-v{font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800; letter-spacing:-.04em;
  color:var(--ink); font-variant-numeric:tabular-nums}
.pr-win .pr-v{color:var(--emerald)}
.pr-s{font-size:.8125rem; color:var(--muted)}
.pr-gap{grid-column:1/-1; padding-top:var(--s-3); border-top:1px solid var(--line);
  font-size:.9375rem; color:var(--muted)}
.pr-gap b{color:var(--ink); font-variant-numeric:tabular-nums}
@media (max-width:620px){.planes-readout{grid-template-columns:1fr}}
@media (max-width:760px){
  .planes-head{padding:0 0 var(--s-3)}
  .planes-readout{padding:var(--s-4) 0 0}
}

/* ---- compounding curve ----------------------------------------------------
   Deliberately unnumbered on the y-axis. The claim is the SHAPE of a loop that
   feeds itself; putting figures on it would turn an explanation into a revenue
   projection, which is not something anyone can honestly make for a store they
   haven't seen. */
.illus.compound{padding:0; overflow:hidden; border:1px solid var(--line); margin-top:var(--s-4)}
.illus.compound svg{display:block}
.illus.compound figcaption{margin:0; padding:var(--s-3) var(--s-4) var(--s-4);
  border-top:1px solid var(--line)}
@media (max-width:760px){
  .illus.compound{border:0; padding:0}
  .illus.compound figcaption{padding:var(--s-3) 0 0}
}
/* draw both lines in, then fade the callouts up along the curve */
#cFlat,#cCurve{stroke-dasharray:1200; stroke-dashoffset:1200}
.illus.compound.go #cFlat{animation:cDraw 1.6s var(--ease) forwards}
.illus.compound.go #cCurve{animation:cDraw 2.2s var(--ease) .25s forwards}
#cHead,#cEnd{opacity:0}
.illus.compound.go #cHead{animation:cPop .5s var(--ease) 1.0s forwards}
.illus.compound.go #cEnd{animation:cPop .5s var(--ease) 2.5s forwards}
.cd{opacity:0}
.illus.compound.go .cd{animation:cPop .5s var(--ease) forwards}
.illus.compound.go .cd:nth-child(1){animation-delay:1.1s}
.illus.compound.go .cd:nth-child(2){animation-delay:1.6s}
.illus.compound.go .cd:nth-child(3){animation-delay:2.1s}
@keyframes cDraw{to{stroke-dashoffset:0}}
/* opacity ONLY — a CSS transform here overrides the SVG transform attribute
   that positions each callout, which collapsed all three onto the origin. */
@keyframes cPop{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  #cFlat,#cCurve{stroke-dashoffset:0}
  .cd,#cHead,#cEnd{opacity:1}
  .illus.compound.go #cFlat,.illus.compound.go #cCurve,.illus.compound.go .cd{animation:none}
}

/* the compounding explainer — this figure needs its argument made in words
   before the curve can mean anything */
.cmp-intro{padding:var(--s-5) var(--s-5) var(--s-4)}
.cmp-intro h3{font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.03em; margin-bottom:var(--s-3)}
.cmp-intro h3 em{font-style:normal; color:var(--emerald)}
.cmp-intro .body{max-width:62ch; margin-top:var(--s-3)}
.cmp-steps{list-style:none; margin:var(--s-4) 0 0; padding:0; display:grid; gap:.75rem;
  max-width:62ch}
.cmp-steps li{display:grid; grid-template-columns:1.9rem 1fr; gap:.85rem; align-items:start}
.cmp-steps span{width:1.9rem; height:1.9rem; display:grid; place-items:center;
  background:var(--emerald-wash); color:var(--emerald);
  font-size:.8125rem; font-weight:800; line-height:1}
.cmp-steps li:last-child span{background:var(--emerald); color:#fff}
.cmp-steps p{font-size:.9688rem; line-height:1.5; color:var(--muted)}
.cmp-steps p b{color:var(--ink)}
@media (max-width:760px){.cmp-intro{padding:0 0 var(--s-4)}}

/* measuring rules appear only once the planes have landed */
.measure{opacity:0; transition:opacity .5s var(--ease) .15s}
.planes.landed .measure{opacity:1}
.pr-verdict{grid-column:1/-1; padding-top:var(--s-4); margin-top:var(--s-3);
  border-top:2px solid var(--emerald); display:grid; gap:var(--s-3); justify-items:start}
.pr-verdict p{font-size:.9688rem; line-height:1.6; color:var(--muted); max-width:70ch}
.pr-verdict b{color:var(--ink)}
.seg-b.replay{border:1px solid var(--line); padding:.55rem 1.1rem}

/* ===========================================================
   THE FIVE Cs WALKTHROUGH
   One customer — Sarah — carried through all five stages, so the
   page shows a system working rather than a funnel leaking. Each
   stage is its own small scene; a driver advances them.
   =========================================================== */
.walk{border:1px solid var(--line); background:var(--bg); margin-top:var(--s-5)}
.walk-nav{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(5,1fr); border-bottom:1px solid var(--line)}
.walk-nav li{min-width:0}
.walk-tab{appearance:none; width:100%; background:transparent; border:0; cursor:pointer;
  font-family:var(--sans); text-align:left; padding:var(--s-3) var(--s-3) calc(var(--s-3) + 4px);
  position:relative; display:grid; gap:.15rem; min-height:64px;
  transition:background .2s var(--ease)}
.walk-nav li + li .walk-tab{border-left:1px solid var(--line)}
.walk-tab:hover{background:var(--soft)}
.walk-tab .wn{font-size:.6875rem; font-weight:800; letter-spacing:.14em; color:var(--muted)}
.walk-tab .wt{font-size:.9375rem; font-weight:700; letter-spacing:-.02em; color:var(--muted)}
.walk-tab[aria-selected="true"] .wn{color:var(--emerald)}
.walk-tab[aria-selected="true"] .wt{color:var(--ink)}
.walk-tab::after{content:""; position:absolute; left:0; bottom:0; height:4px; width:0;
  background:var(--emerald)}
.walk-tab[aria-selected="true"]::after{width:100%}
.walk-tab.is-timing::after{animation:wTick var(--wdur,6s) linear forwards}
@keyframes wTick{from{width:0} to{width:100%}}
@media (max-width:760px){
  .walk-nav{grid-template-columns:repeat(5,1fr)}
  .walk-tab{padding:var(--s-2) .4rem calc(var(--s-2) + 4px); min-height:52px}
  .walk-tab .wt{display:none}
  .walk-tab .wn{font-size:.625rem; text-align:center}
}
.walk-stage{position:relative; min-height:25rem; overflow:hidden}
@media (max-width:620px){.walk-stage{min-height:27rem}}
.wpanel{position:absolute; inset:0; padding:var(--s-5) var(--s-4);
  display:grid; grid-template-columns:1fr 20rem; gap:var(--s-5); align-items:center;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease)}
.wpanel.is-on{opacity:1; visibility:visible}
@media (max-width:860px){.wpanel{grid-template-columns:1fr; gap:var(--s-4); align-content:start;
  padding:var(--s-4) var(--s-3); overflow-y:auto}}
.wcopy h3{font-size:clamp(1.3rem,2.2vw,1.75rem); letter-spacing:-.03em; margin-bottom:var(--s-2)}
.wcopy p{font-size:.9688rem; line-height:1.6; color:var(--muted); max-width:42ch}
.wcopy p b{color:var(--ink)}
.wsarah{display:flex; align-items:center; gap:.6rem; margin-top:var(--s-3);
  padding-top:var(--s-3); border-top:1px solid var(--line)}
.wav{width:34px; height:34px; flex:none; background:var(--emerald); color:#fff;
  display:grid; place-items:center; font-size:.875rem; font-weight:800}
.wsarah > span:not(.wav){font-size:.8125rem; color:var(--muted); line-height:1.4}
.wsarah .wav{color:#fff; font-size:.875rem}
.wsarah b{color:var(--ink)}
.wart{min-width:0; display:grid; place-items:center}

/* --- C1 Curiosity: the wheel turns, leads come off it ---------------------- */
.c-wheel{position:relative; width:100%; max-width:19rem; aspect-ratio:1}
.c-wheel svg{width:100%; height:auto}
.c-ring{animation:wSpin 9s linear infinite; transform-origin:50% 50%}
@keyframes wSpin{to{transform:rotate(360deg)}}
.leadfeed{list-style:none; margin:0; padding:0; display:grid; gap:.4rem; width:100%}
.leadfeed li{border:1px solid var(--line); background:var(--bg); padding:.55rem .7rem;
  display:grid; grid-template-columns:auto 1fr; gap:.55rem; align-items:center;
  animation:wIn .45s var(--ease) both}
.leadfeed li.is-sarah{border-color:var(--emerald); background:var(--emerald-wash)}
.leadfeed .dot{width:7px;height:7px;background:var(--emerald);flex:none}
.leadfeed .lt{font-size:.8125rem; line-height:1.35; color:var(--muted); min-width:0}
.leadfeed .lt b{color:var(--ink)}
@keyframes wIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}

/* --- C2 Conversation: the call that books it ------------------------------ */
.chat{display:grid; gap:.45rem; width:100%; max-width:19rem}
.bub{padding:.6rem .8rem; font-size:.8125rem; line-height:1.4; max-width:85%;
  opacity:0; animation:wIn .4s var(--ease) both}
.bub.out{background:var(--emerald); color:#fff; justify-self:start}
.bub.in{background:var(--soft-2); color:var(--text); justify-self:end}
.is-on .bub:nth-child(1){animation-delay:.3s}
.is-on .bub:nth-child(2){animation-delay:1.1s}
.is-on .bub:nth-child(3){animation-delay:1.9s}
.is-on .bub:nth-child(4){animation-delay:2.7s}

/* --- C4 Creation: the ring gets made -------------------------------------- */
.make{width:100%; max-width:17rem; display:grid; gap:var(--s-3); justify-items:center}
.make svg{width:9.5rem; height:auto}
.mk-band,.mk-prong,.mk-stone{opacity:0}
.is-on .mk-band{animation:wIn .5s var(--ease) .2s both}
.is-on .mk-prong{animation:wIn .5s var(--ease) .9s both}
.is-on .mk-stone{animation:mkDrop .6s var(--ease) 1.5s both}
@keyframes mkDrop{from{opacity:0; transform:translateY(-22px) scale(.7)} to{opacity:1; transform:none}}
.mk-steps{display:flex; gap:.3rem; flex-wrap:wrap; justify-content:center}
.mk-steps span{font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:.25rem .5rem; background:var(--soft-2); opacity:.45}
.is-on .mk-steps span{animation:mkLit .4s var(--ease) both}
.is-on .mk-steps span:nth-child(1){animation-delay:.3s}
.is-on .mk-steps span:nth-child(2){animation-delay:.9s}
.is-on .mk-steps span:nth-child(3){animation-delay:1.5s}
.is-on .mk-steps span:nth-child(4){animation-delay:2.1s}
@keyframes mkLit{to{opacity:1; background:var(--emerald-wash); color:var(--emerald)}}

/* ---- figure framing: input vs output, and a shared legend ----------------- */
.fig-kind{font-size:.6875rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--emerald); margin-bottom:.35rem}
.fig-legend{list-style:none; margin:0; padding:0 var(--s-4) var(--s-3);
  display:flex; flex-wrap:wrap; gap:.4rem var(--s-4)}
.fig-legend li{display:flex; align-items:center; gap:.5rem;
  font-size:.8125rem; font-weight:500; color:var(--muted); line-height:1.35}
.fig-legend b{color:var(--ink); font-weight:700}
.fig-legend .sw{width:20px; height:4px; flex:none}
.fig-legend .sw-win{background:var(--emerald)}
.fig-legend .sw-grey{background:#A9B7B1}
@media (max-width:760px){.fig-legend{padding:0 0 var(--s-3)}}

/* --- C1 Curiosity: leads arrive, then we pick one out ---------------------- */
/* the entry animation uses fill:both, which pins opacity to 1 and outranks a
   plain declaration — it has to be cancelled before the dim can apply */
.leadfeed.focused li{animation:none; opacity:.22; transform:scale(.97);
  transition:opacity .5s var(--ease), transform .5s var(--ease)}
.leadfeed.focused li.is-sarah{animation:none; opacity:1; transform:scale(1.04);
  box-shadow:0 0 0 2px var(--emerald), 0 10px 26px -14px rgba(6,48,43,.5)}
.feed-pick{margin-top:.6rem; font-size:.8125rem; font-weight:700; color:var(--emerald);
  text-align:center; opacity:0; transition:opacity .5s var(--ease)}
.leadfeed.focused ~ .feed-pick{opacity:1}

/* --- C2 Conversation: one bubble at a time, with a typing beat ------------- */
.typing{display:inline-flex; gap:.22rem; padding:.6rem .75rem; background:var(--soft-2);
  justify-self:end; opacity:0; animation:wIn .3s var(--ease) both}
.typing i{width:5px; height:5px; background:var(--muted); display:block;
  animation:tDot 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
@keyframes tDot{0%,60%,100%{opacity:.3} 30%{opacity:1}}
.is-on .typing{animation-delay:.6s}
.is-on .typing.t2{animation-delay:2.2s}

/* --- C3 Calendar: real appointments, landing one by one -------------------- */
.cal2{width:100%; max-width:21rem; border:1px solid var(--line); overflow:hidden}
.cal2-h{padding:.5rem .7rem; border-bottom:1px solid var(--line); background:var(--soft);
  font-size:.6875rem; font-weight:800; letter-spacing:.12em; color:var(--muted)}
.cal2-l{list-style:none; margin:0; padding:0}
.cal2-l li{display:grid; grid-template-columns:4.6rem 1fr; gap:.6rem; align-items:center;
  padding:.5rem .7rem; border-bottom:1px solid var(--line); font-size:.8125rem;
  opacity:0; animation:wSlide .4s var(--ease) both}
.cal2-l li:last-child{border-bottom:0}
.cal2-l .when{font-weight:800; color:var(--muted); font-size:.75rem; letter-spacing:-.01em}
.cal2-l .who{color:var(--text); min-width:0}
.cal2-l .who b{color:var(--ink)}
.cal2-l li.mine{background:var(--emerald-wash); border-left:3px solid var(--emerald)}
.cal2-l li.mine .when{color:var(--emerald)}
@keyframes wSlide{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}
.is-on .cal2-l li:nth-child(1){animation-delay:.3s}
.is-on .cal2-l li:nth-child(2){animation-delay:.8s}
.is-on .cal2-l li:nth-child(3){animation-delay:1.3s}
.is-on .cal2-l li:nth-child(4){animation-delay:1.8s}
.is-on .cal2-l li:nth-child(5){animation-delay:2.3s}
.is-on .cal2-l li:nth-child(6){animation-delay:2.8s}

/* --- C4 Creation: somebody at the bench ------------------------------------ */
.bench{width:100%; max-width:16rem}
.bench svg{width:100%; max-width:13rem; height:auto; margin:0 auto; display:block}
.bz-arm{transform-origin:70px 104px}
.is-on .bz-arm{animation:bzWork 1.5s ease-in-out .4s infinite}
@keyframes bzWork{0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-7deg)}}
.bz-spark{opacity:0; transform-origin:center}
.is-on .bz-spark{animation:bzSpark 1.5s ease-out .4s infinite}
@keyframes bzSpark{0%{opacity:0; transform:scale(.4)} 35%{opacity:1; transform:scale(1)} 70%,100%{opacity:0; transform:scale(1.5)}}
.bz-stone{opacity:0}
.is-on .bz-stone{animation:wIn .6s var(--ease) 1.8s both}

/* --- C5 Compounding: it branches ------------------------------------------- */
.tree{width:100%; max-width:20rem}
.tree svg{width:100%; height:auto}
.tr-line{stroke-dasharray:160; stroke-dashoffset:160}
.is-on .tr-line{animation:cDraw .7s var(--ease) both}
.is-on .tr-l1{animation-delay:.6s} .is-on .tr-l2{animation-delay:.85s}
.is-on .tr-l3{animation-delay:1.5s} .is-on .tr-l4{animation-delay:1.7s}
.is-on .tr-l5{animation-delay:1.9s}
.tr-node{opacity:0}
.is-on .tr-node{animation:wIn .4s var(--ease) both}
.is-on .tr-n0{animation-delay:.2s}
.is-on .tr-n1{animation-delay:1.2s} .is-on .tr-n2{animation-delay:1.4s}
.is-on .tr-n3{animation-delay:2.1s} .is-on .tr-n4{animation-delay:2.3s}
.is-on .tr-n5{animation-delay:2.5s}
@media (prefers-reduced-motion:reduce){
  .bz-arm,.bz-spark,.cal2-l li,.tr-line,.tr-node,.typing i{animation:none!important}
  .cal2-l li,.tr-node,.bz-stone{opacity:1}
  .tr-line{stroke-dashoffset:0}
}

/* ---- real work -------------------------------------------------------------
   These are actual pieces that sold through the system, so they earn room.
   Square crops keep the grid honest across mixed source ratios. */
.workgrid{list-style:none; margin:var(--s-5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-2)}
.workgrid li{margin:0; min-width:0; aspect-ratio:1; overflow:hidden; background:var(--soft-2)}
.workgrid img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease)}
.workgrid li:hover img{transform:scale(1.05)}
@media (max-width:860px){.workgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.workgrid{grid-template-columns:repeat(2,1fr)}}
.work-ps{margin:var(--s-4) auto 0; max-width:60ch; text-align:center;
  font-size:.9375rem; line-height:1.6; color:var(--muted)}
.work-ps b{color:var(--ink)}

/* the finished ring, alongside the bench animation */
/* `height:auto` is load-bearing: the width/height HTML attributes act as a
   presentational hint, so with only `width` set in CSS the browser used the
   attribute height (1500px) and ignored aspect-ratio — which blew the panel
   open to five times the height of the stage. */
.bench-shot{width:100%; max-width:11.5rem; height:auto; aspect-ratio:3/2;
  object-fit:cover; display:block; margin:0 auto var(--s-3)}
@media (max-width:860px){.bench-shot{max-width:10rem}}

/* ---- let the figures out of the reading column -----------------------------
   `.narrow` caps at 48rem so prose stays readable, but the charts and the
   plane animation were inheriting that cap and rendering at two-thirds width
   on a wide screen. Break them out to the full container, centred on the
   viewport, while the text around them stays narrow. */
.narrow > .illus,
.narrow > .cutout,
.narrow > .figure{
  position:relative; left:50%; transform:translateX(-50%);
  width:min(100vw - 2rem, 72rem); max-width:none;
}
@media (max-width:860px){
  .narrow > .illus,
  .narrow > .cutout,
  .narrow > .figure{
    position:static; left:auto; transform:none; width:100%;
  }
}

/* ===========================================================
   GRAND HERO
   Real work flanking the headline, dissolving into white toward
   the centre so the type always sits on clean ground. Decorative
   only: aria-hidden, empty alt, and it disappears entirely below
   1100px where there are no side margins to fill.
   =========================================================== */
.hero{padding-block:var(--s-7) var(--s-4)}
.hero-flank{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  display:none}
@media (min-width:1100px){.hero-flank{display:block}}
.hf-side{position:absolute; top:-4%; bottom:-4%; width:26vw; max-width:26rem;
  display:grid; grid-template-rows:repeat(3,1fr); gap:1.1rem; padding:1.1rem}
.hf-l{left:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 8%,transparent 66%);
  mask-image:linear-gradient(90deg,#000 0%,#000 8%,transparent 66%)}
.hf-r{right:0;
  -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 8%,transparent 66%);
  mask-image:linear-gradient(270deg,#000 0%,#000 8%,transparent 66%)}
.hf-side img{width:100%; height:100%; object-fit:cover; display:block;
  opacity:.34; filter:saturate(.75)}
/* stagger them so it reads as a wall, not a column */
.hf-l img:nth-child(2){transform:translateX(14%) scale(.92)}
.hf-r img:nth-child(2){transform:translateX(-14%) scale(.92)}
/* and fade the whole thing out vertically so it never fights the header or
   the video slot below */
/* belt and braces: a white wash centred on the type, so the headline never
   has to compete with whatever happens to be in the photograph behind it */
.hero-flank::before{content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(58% 62% at 50% 42%, #FFFFFF 0%, rgba(255,255,255,.92) 48%,
    rgba(255,255,255,0) 74%)}
.hero-flank::after{content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 22%,
    rgba(255,255,255,0) 62%,#FFFFFF 100%)}
@media (prefers-reduced-motion:no-preference){
  .hf-side img{animation:hfIn 1.1s var(--ease) both}
  .hf-side img:nth-child(2){animation-delay:.12s}
  .hf-side img:nth-child(3){animation-delay:.24s}
  @keyframes hfIn{from{opacity:0; transform:scale(1.04)} to{opacity:.34}}
  .hf-l img:nth-child(2){animation-name:hfInL}
  .hf-r img:nth-child(2){animation-name:hfInR}
  @keyframes hfInL{from{opacity:0; transform:translateX(14%) scale(.96)} to{opacity:.34; transform:translateX(14%) scale(.92)}}
  @keyframes hfInR{from{opacity:0; transform:translateX(-14%) scale(.96)} to{opacity:.34; transform:translateX(-14%) scale(.92)}}
}
/* the headline gets more room to be big now that it has company */
@media (min-width:1100px){
  .hero h1{font-size:clamp(3.4rem,5.4vw,5.6rem); max-width:19ch}
  .hero .lede{max-width:52ch}
}


/* the range sits in flow between the copy and the video, and the video slot
   rides up over its lower slopes */

/* ---- headline measure -----------------------------------------------------
   `.head{max-width:40ch}` resolved `ch` against the wrapper's 17px body font,
   so it capped at ~498px — which put 50px headlines on three and four lines.
   The measure belongs on the heading itself, in rem. */
.head{max-width:none}
.head h2,.head h1{max-width:min(100%, 44rem); margin-inline:auto}
.head .lede{max-width:min(100%, 40rem)}
.cta h2{max-width:min(100%, 40rem)}
.cmp-intro h3{max-width:min(100%, 38rem)}


/* the ranges were washed out to nothing; let them actually read */
.hs-left{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 96%);
  mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 96%)}
.hs-right{-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 46%,transparent 96%);
  mask-image:linear-gradient(270deg,#000 0%,#000 46%,transparent 96%)}
.hero-scene::before{background:radial-gradient(42% 50% at 50% 38%, #FFFFFF 0%,
  rgba(255,255,255,.9) 42%, rgba(255,255,255,0) 78%)}
.hero-scene::after{background:linear-gradient(180deg,#FFFFFF 0%,rgba(255,255,255,.25) 12%,
  rgba(255,255,255,0) 34%,rgba(255,255,255,0) 82%,#FFFFFF 100%)}

/* ---- the curve's steps, keyed to its markers -------------------------------
   The floating labels explained too little and the prose explained it too far
   from the picture. Numbered markers on the curve, numbered steps beneath. */
.cmp-keys{list-style:none; margin:var(--s-4) 0 0; padding:var(--s-4) var(--s-4) 0;
  border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--s-4)}
@media (max-width:980px){.cmp-keys{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cmp-keys{grid-template-columns:1fr; padding-inline:0}}
.cmp-keys li{display:grid; grid-template-columns:1.75rem 1fr; gap:.7rem; align-items:start;
  min-width:0}
.cmp-keys span{width:1.75rem; height:1.75rem; display:grid; place-items:center;
  background:var(--emerald); color:#fff; font-size:.8125rem; font-weight:800; line-height:1}
.cmp-keys li:last-child span{background:var(--ink)}
.cmp-keys p{font-size:.875rem; line-height:1.5; color:var(--muted)}
.cmp-keys p b{color:var(--ink)}

/* the ranges run the full height of the hero, tallest against the outer edge
   and falling away toward the middle — the gap between them is where the
   headline lives */
.hs-side{top:0; bottom:0}
.hs-left{width:34vw; max-width:34rem}
.hs-right{width:34vw; max-width:34rem}
.hs-left{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 97%);
  mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 97%)}
.hs-right{-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 52%,transparent 97%);
  mask-image:linear-gradient(270deg,#000 0%,#000 52%,transparent 97%)}
.hero-scene::after{background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,
  rgba(255,255,255,.2) 10%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 84%,#FFFFFF 100%)}

/* ===========================================================
   HERO SCENE — structural rules
   (Restored a second time. A bulk CSS purge removed this block
   because its reduced-motion clause named a character animation;
   without position:absolute the two ranges stacked in flow and
   pushed the hero to 2000px. No character references now.)
   =========================================================== */
.hero{position:relative; overflow:hidden}
.hero > .container{position:relative; z-index:2}
.hero-scene{position:absolute; inset:0; z-index:0; pointer-events:none; display:none}
@media (min-width:1100px){.hero-scene{display:block}}
.hs-side{position:absolute; top:0; bottom:0; width:34vw; max-width:34rem}
.hs-side svg{width:100%; height:100%; display:block}
.hs-left{left:0}
.hs-right{right:0}
.hero-scene::before{content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(40% 48% at 50% 38%, #FFFFFF 0%, rgba(255,255,255,.9) 42%,
    rgba(255,255,255,0) 78%)}
.hero-scene::after{content:""; position:absolute; inset:0; z-index:1}
@media (prefers-reduced-motion:no-preference){
  .hs-side{animation:hfIn 1.2s var(--ease) both}
  .hs-right{animation-delay:.15s}
}

/* ---- legal pages ---------------------------------------------------------- */
.legal{padding-block:var(--s-4) var(--s-5)}
.legal-kicker{font-size:.6875rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--emerald); margin-bottom:var(--s-2)}
.legal h1{font-size:clamp(2.2rem,4vw,3.2rem); margin-bottom:var(--s-3)}
.legal h2{font-size:clamp(1.15rem,1.8vw,1.4rem); margin:var(--s-5) 0 var(--s-2);
  letter-spacing:-.02em}
.legal h3{font-size:1rem; margin:var(--s-4) 0 var(--s-2)}
.legal p{margin-top:var(--s-3); color:var(--muted); line-height:1.7; max-width:68ch}
.legal .lede{color:var(--muted)}
.legal ul{margin:var(--s-3) 0 0; padding-left:1.1rem; max-width:68ch}
.legal li{margin-bottom:.5rem; color:var(--muted); line-height:1.65}
.legal b{color:var(--ink)}
.legal a{color:var(--emerald); text-underline-offset:3px}
/* the two notice styles: a build-time flag, and a real reader-facing callout */
.legal-flag{margin-top:var(--s-4); padding:var(--s-3) var(--s-4);
  background:#FFF7E6; border-left:4px solid var(--gold)}
.legal-flag p{margin:0; color:var(--gold-text)}
.legal-flag b{color:#6A4F28}
.legal-call{margin-top:var(--s-4); padding:var(--s-4);
  background:var(--emerald-wash); border-left:4px solid var(--emerald)}
.legal-call p{margin:0; color:var(--text)}

/* ---- the path -------------------------------------------------------------
   Five stages from seeing the ad to making the sale. A horizontal chain on
   desktop, a vertical one on phones; each stage lights up in sequence when the
   chain scrolls into view, so it reads as a journey rather than a list. */
.path{list-style:none; margin:var(--s-6) auto 0; padding:0; max-width:none;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative}
.path li{position:relative; padding:0 var(--s-3); border-left:1px solid var(--line);
  opacity:.34; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease}
.path li:first-child{border-left:0; padding-left:0}
.path li:last-child{padding-right:0}
.path li.lit{opacity:1; transform:none}
.path span{width:2.25rem; height:2.25rem; display:grid; place-items:center;
  background:var(--emerald-wash); color:var(--emerald-text,var(--emerald));
  font-size:.8125rem; font-weight:800; line-height:1; margin-bottom:var(--s-3);
  transition:background .4s ease, color .4s ease}
.path li.lit span{background:var(--emerald); color:#fff}
.path li.you span{background:var(--gold-text,#7C5F33); color:#fff}
.path h3{font-size:1.0625rem; line-height:1.3; letter-spacing:-.015em;
  color:var(--ink); margin:0 0 .5rem}
.path li.you h3{color:var(--emerald-text,var(--emerald))}
.path p{font-size:.9375rem; line-height:1.55; color:var(--text); margin:0}
@media (max-width:900px){
  .path{grid-template-columns:1fr; gap:0}
  .path li{border-left:0; border-top:1px solid var(--line); padding:var(--s-4) 0 var(--s-4) 3.25rem}
  .path li:first-child{border-top:0; padding-top:0}
  .path li:last-child{padding-right:0}
  .path span{position:absolute; left:0; top:var(--s-4); margin:0; width:2rem; height:2rem; font-size:.75rem}
  .path li:first-child span{top:0}
  .path h3{font-size:1rem}
}
@media (prefers-reduced-motion: reduce){
  .path li{transition:none}
}

/* ---- booking -------------------------------------------------------------
   The GHL calendar embed. form_embed.js posts the content height back and
   resizes the iframe, so the min-height here is only a holding size that stops
   the page jumping while the widget loads. */
.booking{margin:var(--s-5) auto 0; max-width:46rem; background:#fff;
  border:1px solid var(--line); padding:var(--s-3)}
.booking iframe{display:block; width:100%; min-height:720px; border:0; overflow:hidden}
.booking-note{margin-top:var(--s-4); color:var(--muted-ink)}
@media (max-width:560px){
  .booking{padding:var(--s-2)}
  .booking iframe{min-height:820px}
}

/* ---- booking page --------------------------------------------------------- */
.book-points{list-style:none; margin:var(--s-5) auto 0; padding:0; max-width:44rem;
  display:grid; gap:0}
.book-points li{padding:var(--s-3) 0; border-bottom:1px solid var(--line);
  font-size:1rem; line-height:1.55; color:var(--text)}
.book-points li:last-child{border-bottom:0}
.book-points b{color:var(--ink)}