/* =========================================================================
   MyPetGevity — design system
   Brand core: logo orange + logo black + white, extended with warm neutrals.
   ========================================================================= */

:root{
  /* ── brand core (from the mark) ───────────────────────────────── */
  --orange:      #F2900D;
  --orange-hi:   #FFB13C;
  --orange-dk:   #A85F00;
  --orange-wash: #FFE7C2;

  /* ── the science layer: deep petrol, a second dark ground ─────── */
  --petrol:      #0F3A44;
  --petrol-hi:   #17505E;
  --petrol-wash: #D4E4E6;

  /* ── the pop: used sparingly, for doodles and highlights ──────── */
  --coral:       #E8593F;
  --coral-wash:  #FBDDD5;

  /* ── warm grounded neutrals ───────────────────────────────────── */
  --ink:        #14110E;
  --ink-soft:   #2A231C;
  --ink-deep:   #0A0806;
  --canvas:     #FFF9F0;
  --butter:     #FFE7B8;
  --cream:      #FFF1DA;
  --bone:       #F6EBDA;
  --sand:       #F0E2CD;
  --sage:       #DCE6DB;
  --muted:      #574D42;
  --muted-2:    #6A5F50;
  --line:       rgba(20,17,14,.13);
  --line-2:     rgba(20,17,14,.22);

  --on-dark:       #FFF6E9;
  --on-dark-muted: #A8998A;
  --line-dark:     rgba(255,246,233,.18);

  /* ── type ─────────────────────────────────────────────────────── */
  --display: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
  --body:    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "Martian Mono", ui-monospace, Consolas, monospace;

  /* ── geometry: rounder, chunkier ──────────────────────────────── */
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 32px;
  --r-pill: 999px;
  --wrap: 1220px;
  --gut: clamp(20px, 5vw, 56px);
  --sec: clamp(64px, 9vw, 132px);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.02; letter-spacing:-.02em; margin:0; text-wrap:balance; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:4px; }

/* ------------------------------------------------------------- utilities */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:900px; }
.section{ padding-block:var(--sec); }
.section--tight{ padding-block:clamp(48px,6vw,88px); }
.dark{ background:var(--ink); color:var(--on-dark); }
.dark h1,.dark h2,.dark h3,.dark h4{ color:var(--on-dark); }
.bg-bone{ background:var(--bone); }
.bg-cream{ background:var(--cream); }
.bg-sand{ background:var(--sand); }
.center{ text-align:center; }

.center .lede{ margin-inline:auto; }

.eyebrow{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--orange-dk);
  display:block; margin-bottom:16px;
}
.dark .eyebrow{ color:var(--orange-hi); }

.h-xl{ font-size:clamp(37px,5.9vw,68px); }
.h-lg{ font-size:clamp(30px,4.3vw,50px); }
.h-md{ font-size:clamp(23px,2.9vw,34px); }
.h-sm{ font-size:clamp(19px,2vw,23px); letter-spacing:-.015em; }
.lede{ font-size:clamp(16.5px,1.5vw,20px); line-height:1.58; color:var(--muted); max-width:64ch; }
.dark .lede{ color:var(--on-dark-muted); }
.fine{ font-size:13.5px; line-height:1.62; color:var(--muted-2); }
.mono{ font-family:var(--mono); }
.accent{ color:var(--orange); }
.stack > * + *{ margin-top:22px; }
.stack-sm > * + *{ margin-top:12px; }

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-size:15.5px; font-weight:600;
  padding:15px 30px; border-radius:var(--r-pill); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap; text-align:center;
  transition:transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--orange); color:var(--ink); border-color:var(--orange); }
.btn--primary:hover{ background:var(--orange-hi); border-color:var(--orange-hi); }
.btn--ink{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); }
.btn--ink:hover{ background:var(--ink-soft); border-color:var(--ink-soft); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); }
.dark .btn--ghost{ color:var(--on-dark); border-color:var(--line-dark); }
.dark .btn--ghost:hover{ border-color:var(--on-dark); }
.btn--sm{ padding:11px 22px; font-size:14.5px; }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15.5px;
  text-decoration:none; color:var(--ink); border-bottom:1.5px solid var(--orange);
  padding-bottom:3px; transition:gap .16s ease; align-self:flex-start;
}
.link-arrow:hover{ gap:13px; }
.dark .link-arrow{ color:var(--on-dark); }

/* ------------------------------------------------------------------- nav */
.masthead{
  position:sticky; top:0; z-index:60; background:rgba(255,249,240,.93);
  backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line);
}
.masthead__in{ display:flex; align-items:center; gap:24px; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.brand__mark{ width:32px; height:31px; flex:none; }
.brand__name{ font-family:var(--display); font-weight:800; font-size:20.5px; letter-spacing:-.035em; }
.brand__name em{ font-style:normal; color:var(--orange); }

.nav{ display:flex; align-items:center; gap:1px; margin-left:auto; }
.nav a{
  text-decoration:none; font-size:14.6px; font-weight:500; color:var(--ink-soft);
  padding:9px 11px; border-radius:var(--r-pill); white-space:nowrap; transition:background-color .15s ease,color .15s ease;
}
.nav a:hover{ background:var(--sand); }
.nav a[aria-current="page"]{ color:var(--orange-dk); font-weight:650; }

.burger{
  display:none; margin-left:auto; width:44px; height:44px; border-radius:var(--r-pill);
  border:1.5px solid var(--line-2); background:transparent; cursor:pointer;
  align-items:center; justify-content:center;
}
.burger span{ display:block; width:18px; height:1.8px; background:var(--ink); position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.8px; background:var(--ink); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

.mobilenav{ display:none; border-top:1px solid var(--line); background:var(--canvas); padding:14px var(--gut) 30px; }
.mobilenav.is-open{ display:block; }
.mnav-link{ display:block; text-decoration:none; font-size:17px; font-weight:600; padding:13px 0; border-bottom:1px solid var(--line); }
.mobilenav .btn-row{ margin-top:22px; flex-direction:column; }

@media (max-width: 1180px){
  .nav, .masthead .btn--nav{ display:none; }
  .burger{ display:flex; }
}

/* ----------------------------------------------------------------- cards */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:30px; display:flex; flex-direction:column;
}
.card--flat{ background:var(--bone); border-color:transparent; }
.card--ink{ background:var(--ink-soft); border-color:var(--line-dark); color:var(--on-dark); }
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 1180px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 1000px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 700px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,76px); align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------ tick lists */
.ticks li{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; font-size:15.4px; line-height:1.5; }
.ticks li + li{ border-top:1px solid var(--line); }
.dark .ticks li + li{ border-top-color:var(--line-dark); }
.tick{ flex:none; width:19px; height:19px; margin-top:3px; }
.tick circle{ fill:var(--orange-wash); }
.tick path{ stroke:var(--orange-dk); stroke-width:2.1; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.dark .tick circle{ fill:rgba(242,144,13,.22); }
.dark .tick path{ stroke:var(--orange-hi); }
.ticks--muted .tick circle{ fill:rgba(22,18,16,.07); }
.ticks--muted .tick path{ stroke:var(--muted); }
.ticks--muted li{ color:var(--muted); }

/* ------------------------------------------------------------------ hero */
.hero{ position:relative; overflow:hidden; background:var(--ink); color:var(--on-dark); }
.hero__glow{
  position:absolute; inset:auto -10% -45% 30%; height:70vh; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(242,144,13,.30), transparent 70%);
}
.hero__paw{ position:absolute; top:-40px; right:-60px; width:min(46vw,520px); opacity:.055; pointer-events:none; }
.hero__in{ position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(36px,5vw,70px);
  align-items:center; padding-block:clamp(58px,8vw,104px); }
@media (max-width: 940px){ .hero__in{ grid-template-columns:1fr; } }

.hero h1{ font-size:clamp(37px,5.6vw,64px); letter-spacing:-.032em; }
.hero h1 em{ font-style:normal; color:var(--orange); }
.hero__proof{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 28px; max-width:470px; border-top:1px solid var(--line-dark);
  margin-top:40px; padding-top:24px; }
.hero__proof div{ padding:0; }
.hero__proof b{ display:block; font-family:var(--display); font-size:27px; font-weight:700; letter-spacing:-.03em; }
.hero__proof span{ font-family:var(--mono); font-size:10.8px; letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark-muted); }

/* -------------------------------------------------------- protocol spine */
.spine{
  background:var(--canvas); color:var(--ink); border-radius:var(--r-l); padding:30px 30px 26px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
}
.spine__head{ display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line); padding-bottom:15px; margin-bottom:6px; }
.spine__head b{ font-family:var(--display); font-size:17px; letter-spacing:-.02em; }
.spine__head span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.spine__row{ display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:center; padding:11px 0; position:relative; }
.spine__row + .spine__row{ border-top:1px solid var(--line); }
.spine__m{ font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--muted-2); letter-spacing:.04em; }
.spine__bar{ height:9px; border-radius:var(--r-pill); background:var(--sand); overflow:hidden; }
.spine__fill{ display:block; height:100%; border-radius:var(--r-pill); background:var(--orange);
  width:0; transition:width .9s cubic-bezier(.22,1,.36,1); }
.is-lit .spine__fill{ width:var(--w,100%); }
.spine__label{ font-size:13.6px; margin-top:7px; font-weight:500; }
.spine__label b{ font-weight:650; }
.spine__flag{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--orange-dk); background:var(--orange-wash);
  padding:3px 9px; border-radius:var(--r-pill); display:inline-block; }
.spine__foot{ font-size:12.6px; color:var(--muted-2); border-top:1px solid var(--line); padding-top:14px; margin-top:12px; }
@media (prefers-reduced-motion: reduce){ .spine__fill{ transition:none; } }

/* --------------------------------------------------------- program cards */
.prog{ position:relative; overflow:hidden; }
.prog__ix{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--muted-2); }
.prog__icon{ width:46px; height:46px; margin:18px 0 20px; }
.prog h3{ font-size:26px; }
.prog__for{ color:var(--muted); font-size:15.4px; margin-top:12px; line-height:1.55; flex:1; }
.prog__meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.chip{ font-family:var(--mono); font-size:10.6px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 11px; border-radius:var(--r-pill); background:var(--sand); color:var(--ink-soft); }
.dark .chip{ background:rgba(248,242,232,.11); color:var(--on-dark); }
.chip--accent{ background:var(--orange-wash); color:var(--orange-dk); }
.prog .link-arrow{ margin-top:24px; }

/* ------------------------------------------------------------- rail (6mo) */
.rail{ display:grid; grid-template-columns:repeat(6,1fr); gap:2px; margin-top:14px; }
.rail__cell{ background:#fff; border:1px solid var(--line); padding:16px 14px; }
.rail__cell:first-child{ border-radius:var(--r-m) 0 0 var(--r-m); }
.rail__cell:last-child{ border-radius:0 var(--r-m) var(--r-m) 0; }
.rail__cell--mark{ background:var(--ink); border-color:var(--ink); color:var(--on-dark); }
.rail__m{ font-family:var(--mono); font-size:10.6px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.rail__cell--mark .rail__m{ color:var(--orange-hi); }
.rail__t{ font-size:13.8px; font-weight:600; margin-top:9px; line-height:1.35; }
@media (max-width: 860px){ .rail{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .rail__cell,.rail__cell:first-child,.rail__cell:last-child{ border-radius:var(--r-s); } }

/* -------------------------------------------------------- peptide library */
.pep{ background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:20px 20px 18px; }
.pep__abbr{ font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:-.01em; }
.pep__full{ font-size:12.6px; color:var(--muted-2); margin-top:4px; line-height:1.4; }
.pep__focus{ font-size:13.8px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line); line-height:1.48; }
.pep-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width: 1000px){ .pep-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .pep-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ form */
.field{ display:block; margin-bottom:18px; }
.field__label{ display:block; font-size:13.4px; font-weight:600; letter-spacing:.01em; margin-bottom:7px; }
.field__hint{ font-weight:400; color:var(--muted-2); }
.input, select.input, textarea.input{
  width:100%; background:#fff; border:1.5px solid var(--line-2); border-radius:var(--r-s);
  padding:13px 15px; font-size:16px; transition:border-color .15s ease, box-shadow .15s ease;
}
.input:hover{ border-color:var(--muted-2); }
.input:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(242,144,13,.18); }
textarea.input{ min-height:96px; resize:vertical; }
select.input{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:44px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width: 620px){ .field-row{ grid-template-columns:1fr; } }

.pick{ display:block; cursor:pointer; position:relative; }
.pick input{ position:absolute; opacity:0; width:0; height:0; }
.pick__box{
  display:block; border:1.5px solid var(--line-2); border-radius:var(--r-m);
  padding:20px 20px 20px 56px; background:#fff; height:100%;
  transition:border-color .15s ease, background-color .15s ease;
}
.pick__box::before{
  content:""; position:absolute; left:20px; top:22px; width:22px; height:22px;
  border:1.5px solid var(--line-2); border-radius:6px; background:#fff; transition:all .15s ease;
}
.pick__box::after{
  content:""; position:absolute; left:26px; top:29px; width:10px; height:6px;
  border-left:2.2px solid var(--ink); border-bottom:2.2px solid var(--ink);
  transform:rotate(-45deg) scale(.4); opacity:0; transition:all .15s ease;
}
.pick:hover .pick__box{ border-color:var(--muted-2); }
.pick input:checked ~ .pick__box{ border-color:var(--orange); background:var(--orange-wash); }
.pick input:checked ~ .pick__box::before{ background:var(--orange); border-color:var(--orange); }
.pick input:checked ~ .pick__box::after{ opacity:1; transform:rotate(-45deg) scale(1); }
.pick input:focus-visible ~ .pick__box{ outline:3px solid var(--orange); outline-offset:3px; }
.pick__t{ display:block; font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.25; }
.pick__d{ display:block; font-size:14px; color:var(--muted); margin-top:6px; line-height:1.5; }
.pick input:checked ~ .pick__box .pick__d{ color:var(--ink-soft); }

.check{ display:flex; gap:11px; align-items:flex-start; font-size:14.6px; line-height:1.5; padding:7px 0; cursor:pointer; }
.check input{ flex:none; width:19px; height:19px; margin-top:2px; accent-color:var(--orange); }

/* --------------------------------------------------------------- pricing */
.price{ display:flex; flex-direction:column; position:relative; }
.price--hot{ border-color:var(--ink); border-width:2px; }
.price__flag{ position:absolute; top:-13px; left:28px; background:var(--orange); color:var(--ink);
  font-family:var(--mono); font-size:10.4px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:5px 13px; border-radius:var(--r-pill); }
.price__name{ font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-.02em;
  min-height:2.2em; display:flex; align-items:flex-start; }
.price__sub{ font-size:13.6px; color:var(--muted); margin-top:5px; }
.price__amt{ font-family:var(--display); font-size:46px; font-weight:700; letter-spacing:-.04em;
  margin:20px 0 2px; line-height:1; }
.price__amt small{ font-family:var(--body); font-size:15px; font-weight:500; letter-spacing:0; color:var(--muted); }
.price__was{ font-size:13.6px; color:var(--muted-2); }
.price__was s{ opacity:.75; }
.price__was b{ color:var(--orange-dk); }
.price ul{ margin:22px 0 26px; }
.price .btn{ margin-top:auto; }

/* ----------------------------------------------------------------- modal */
.modal{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:flex-start; justify-content:center; padding:24px 16px;
  background:rgba(13,10,8,.62); backdrop-filter:blur(4px); overflow-y:auto;
}
.modal.is-open{ display:flex; }
.modal__panel{
  background:var(--canvas); border-radius:var(--r-l); width:100%; max-width:760px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.5); overflow:hidden; position:relative;
  animation:pop .3s cubic-bezier(.22,1,.36,1);
}
@keyframes pop{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .modal__panel{ animation:none; } }
.modal__x{
  position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:var(--r-pill);
  border:1px solid var(--line-dark); background:rgba(248,242,232,.12); color:var(--on-dark);
  cursor:pointer; font-size:19px; line-height:1; display:grid; place-items:center;
}
.modal__x:hover{ background:rgba(248,242,232,.24); }
.modal__head{ background:var(--ink); color:var(--on-dark); padding:32px 34px 30px; }
.modal__head .eyebrow{ margin-bottom:14px; }
.modal__head h2{ font-size:clamp(25px,3.6vw,34px); }
.modal__who{ font-family:var(--mono); font-size:12.4px; color:var(--on-dark-muted); margin-top:14px; letter-spacing:.03em; }
.modal__body{ padding:30px 34px 34px; }
@media (max-width:560px){ .modal__head{ padding:28px 22px 24px; } .modal__body{ padding:24px 22px 28px; } }

.rec{ background:var(--ink-soft); border-radius:var(--r-m); padding:22px 24px; margin-top:22px; }
.rec__k{ font-family:var(--mono); font-size:10.6px; letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark-muted); }
.rec__v{ font-family:var(--display); font-size:clamp(24px,3.4vw,32px); font-weight:700; letter-spacing:-.03em; color:var(--orange-hi); margin-top:8px; }
.rec__n{ font-size:14px; color:var(--on-dark-muted); margin-top:10px; line-height:1.55; }

.callout{ border-left:3px solid var(--orange); padding:4px 0 4px 20px; margin:24px 0; }
.callout b{ font-family:var(--display); font-size:19px; letter-spacing:-.02em; display:block; margin-bottom:7px; }

.note{ background:var(--sand); border-radius:var(--r-m); padding:18px 20px; font-size:13.6px; line-height:1.6; color:var(--ink-soft); }
.note b{ font-weight:650; }

/* ------------------------------------------------------------ steps/flow */
.steps{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
.step{ display:flex; align-items:center; gap:9px; font-size:13.4px; font-weight:600;
  padding:9px 16px 9px 10px; border-radius:var(--r-pill); background:var(--bone); color:var(--muted); }
.step b{ font-family:var(--mono); font-size:11px; width:22px; height:22px; border-radius:var(--r-pill);
  background:#fff; color:var(--muted-2); display:grid; place-items:center; }
.step.is-active{ background:var(--ink); color:var(--on-dark); }
.step.is-active b{ background:var(--orange); color:var(--ink); }
.step.is-done b{ background:var(--orange-wash); color:var(--orange-dk); }

.panel{ display:none; }
.panel.is-active{ display:block; }

.fieldset{ border:1px solid var(--line); border-radius:var(--r-l); padding:28px 30px; background:#fff; margin-bottom:22px; }
.fieldset > legend{ font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.02em; padding:0 10px; margin-left:-10px; }
.fieldset__hint{ font-size:14px; color:var(--muted); margin:8px 0 22px; }
@media (max-width:560px){ .fieldset{ padding:22px 20px; } }

.alert{ display:none; background:#FFF3E0; border:1.5px solid var(--orange); border-radius:var(--r-m);
  padding:18px 20px; font-size:14.6px; line-height:1.58; margin:20px 0; }
.alert.is-shown{ display:block; }
.alert b{ display:block; font-family:var(--display); font-size:17px; margin-bottom:6px; letter-spacing:-.02em; }

/* ------------------------------------------------------------ testimonial */
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:30px; display:flex; flex-direction:column; }
.quote__stars{ display:flex; gap:3px; margin-bottom:16px; }
.quote__stars svg{ width:15px; height:15px; fill:var(--orange); }
.quote p{ font-size:16.4px; line-height:1.6; flex:1; }
.quote__by{ display:flex; align-items:center; gap:13px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.avatar{ width:44px; height:44px; border-radius:var(--r-pill); background:var(--orange-wash); color:var(--orange-dk);
  font-family:var(--display); font-weight:700; font-size:16px; display:grid; place-items:center; flex:none; }
.quote__n{ font-weight:650; font-size:15px; }
.quote__d{ font-family:var(--mono); font-size:11.4px; color:var(--muted-2); letter-spacing:.04em; margin-top:2px; }

/* ------------------------------------------------------------------- faq */
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-size:19px; font-weight:650; letter-spacing:-.02em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:8px; top:31px; width:11px; height:11px;
  border-right:2px solid var(--orange-dk); border-bottom:2px solid var(--orange-dk);
  transform:rotate(45deg); transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(-135deg); top:34px; }
.faq p{ padding:0 40px 24px 0; color:var(--muted); font-size:15.8px; }

/* ---------------------------------------------------------------- footer */
.foot{ background:var(--ink); color:var(--on-dark); padding-block:clamp(52px,7vw,84px) 34px; }
.foot__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; padding-bottom:44px; border-bottom:1px solid var(--line-dark); }
@media (max-width: 900px){ .foot__top{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .foot__top{ grid-template-columns:1fr; } }
.foot h4{ font-family:var(--mono); font-size:10.8px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--orange-hi); margin-bottom:16px; }
.foot li{ margin-bottom:10px; }
.foot a{ text-decoration:none; font-size:14.6px; color:var(--on-dark-muted); transition:color .15s ease; }
.foot a:hover{ color:var(--on-dark); }
.foot__legal{ padding-top:28px; display:grid; gap:16px; }
.foot__legal p{ font-size:12.4px; line-height:1.65; color:var(--on-dark-muted); max-width:none; }
.foot__legal b{ color:var(--on-dark); font-weight:600; }
.foot__brand p{ font-size:14.6px; color:var(--on-dark-muted); margin-top:16px; max-width:34ch; }

/* -------------------------------------------------------------- reveal fx */
.rv{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* --------------------------------------------------------------- helpers */
.hr{ height:1px; background:var(--line); border:0; margin:0; }
.dark .hr{ background:var(--line-dark); }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{ font-family:var(--mono); font-size:11.2px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:7px 14px; color:var(--ink-soft);
  text-decoration:none; transition:all .15s ease; }
.tag:hover{ border-color:var(--ink); background:var(--ink); color:var(--on-dark); }
.pagehead{ background:var(--ink); color:var(--on-dark); padding-block:clamp(52px,7vw,92px); position:relative; overflow:hidden; }
.pagehead__paw{ position:absolute; top:-30px; right:-40px; width:min(38vw,380px); opacity:.06; }
.pagehead h1{ font-size:clamp(34px,5vw,58px); position:relative; }
.pagehead .lede{ margin-top:20px; position:relative; }
.pagehead .eyebrow{ position:relative; }

/* cross variant of the tick glyph — used for "not included" rows */
.tick--x circle{ fill:rgba(22,18,16,.07); }
.tick--x path{ stroke:var(--muted-2); }


/* ═══════════════════════════════════════════════════════════════════════
   SECTION GROUNDS — the page steps through colour instead of one texture
   ═══════════════════════════════════════════════════════════════════════ */
.bg-butter{ background:var(--butter); }
.bg-sage{ background:var(--sage); }

/* second dark ground. Defined after .dark so it wins when both are set. */
.petrol{ background:var(--petrol); color:var(--on-dark); }
.petrol h1,.petrol h2,.petrol h3,.petrol h4{ color:var(--on-dark); }
.petrol .eyebrow{ color:var(--orange-hi); }
.petrol .lede{ color:#B6C9CC; }
.petrol .chip{ background:rgba(255,246,233,.13); color:var(--on-dark); }
.petrol .card{ background:var(--petrol-hi); border-color:var(--line-dark); color:var(--on-dark); }

/* ── colour-blocked cards ─────────────────────────────────────────────── */
.card--butter{ background:var(--butter); border-color:transparent; }
.card--sage{   background:var(--sage);   border-color:transparent; }
.card--coral{  background:var(--coral-wash); border-color:transparent; }
.card--cream{  background:var(--cream);  border-color:transparent; }

/* ── buttons: chunkier, with a real press ────────────────────────────── */
.btn{ font-weight:700; letter-spacing:-.01em; padding:16px 32px; border-width:2px; }
.btn--primary{ box-shadow:0 4px 0 0 var(--orange-dk); }
.btn--primary:hover{ box-shadow:0 6px 0 0 var(--orange-dk); }
.btn--primary:active{ box-shadow:0 1px 0 0 var(--orange-dk); transform:translateY(3px); }
.btn--ink{ box-shadow:0 4px 0 0 #000; }
.btn--ink:hover{ box-shadow:0 6px 0 0 #000; }
.btn--ink:active{ box-shadow:0 1px 0 0 #000; transform:translateY(3px); }
.btn--sm{ padding:11px 22px; }
@media (prefers-reduced-motion: reduce){
  .btn:hover{ transform:none; }
  .btn--primary:hover,.btn--ink:hover{ box-shadow:0 4px 0 0 currentColor; }
}

/* ── hand-drawn accents ──────────────────────────────────────────────── */
.doodle{ position:absolute; pointer-events:none; color:var(--coral); }
.doodle path,.doodle line{ stroke:currentColor; fill:none; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.doodle--paw path{ fill:currentColor; stroke:none; }
.has-doodles{ position:relative; }

/* underline scribble behind a word */
.scribble{ position:relative; display:inline-block; }
.scribble svg{ position:absolute; left:-2%; bottom:-.22em; width:104%; height:.42em; color:var(--coral); overflow:visible; }
.scribble svg path{ stroke:currentColor; fill:none; stroke-width:7; stroke-linecap:round; }

/* ── program cards get their own colour, like the reference boards ───── */
.prog--cog{   background:var(--petrol-wash); border-color:transparent; }
.prog--ortho{ background:var(--butter);      border-color:transparent; }
.prog--lon{   background:var(--coral-wash);  border-color:transparent; }
.prog--cog .chip,.prog--ortho .chip,.prog--lon .chip{ background:rgba(20,17,14,.09); }
.prog--cog .chip--accent,.prog--ortho .chip--accent,.prog--lon .chip--accent{
  background:var(--ink); color:var(--orange-hi); }

/* ── rail markers pick up petrol, not only ink ───────────────────────── */
.rail__cell--mark{ background:var(--petrol); border-color:var(--petrol); }
.rail__cell--mark .rail__m{ color:var(--orange-hi); }

/* ── the spine bar reads as a dosing chart, not a progress bar ───────── */
.spine__bar{ background:var(--sand); }
.spine__fill{ background:var(--orange); }

/* ── quotes: alternate fills so the row is not three white boxes ─────── */
.quote:nth-child(1){ background:var(--butter); border-color:transparent; }
.quote:nth-child(2){ background:var(--sage);   border-color:transparent; }
.quote:nth-child(3){ background:var(--coral-wash); border-color:transparent; }
.quote:nth-child(2) .avatar{ background:#fff; color:var(--petrol); }
.quote:nth-child(3) .avatar{ background:#fff; color:var(--coral); }

/* ── price cards: the recommended one is a solid block, not an outline ─ */
.price--hot{ background:var(--ink); border-color:var(--ink); color:var(--on-dark); }
.price--hot .price__name,.price--hot .price__amt{ color:var(--on-dark); }
.price--hot .price__sub,.price--hot .price__was{ color:var(--on-dark-muted); }
.price--hot .price__was b{ color:var(--orange-hi); }
.price--hot .ticks li + li{ border-top-color:var(--line-dark); }
.price--hot .tick circle{ fill:rgba(242,144,13,.24); }
.price--hot .tick path{ stroke:var(--orange-hi); }
.price--hot .price__flag{ background:var(--orange); color:var(--ink); }


/* ═══════════════════════════════════════════════════════════════════════
   PHOTOGRAPHY
   ═══════════════════════════════════════════════════════════════════════ */
.shot{ display:block; width:100%; height:100%; object-fit:cover; }
.frame{ border-radius:var(--r-l); overflow:hidden; background:var(--sand); position:relative; }
.frame--tall{ aspect-ratio:3/4; }
.frame--wide{ aspect-ratio:16/10; }
.frame--square{ aspect-ratio:1/1; }

/* hero: photograph leads, a small card overlaps its corner */
.hero__media{ position:relative; }
.hero__media .frame{ box-shadow:0 40px 80px -40px rgba(0,0,0,.75); }
.hero__media .shot{ object-position:56% 42%; }
.floatcard{
  position:absolute; left:-22px; bottom:-26px; background:var(--canvas); color:var(--ink);
  border-radius:var(--r-m); padding:18px 22px; box-shadow:0 20px 44px -18px rgba(0,0,0,.5);
  max-width:320px; white-space:nowrap;
}
.floatcard b{ display:block; font-family:var(--display); font-size:17px; letter-spacing:-.02em; }
.floatcard span{
  display:block; font-family:var(--mono); font-size:9px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-2); margin-top:7px; line-height:1.9;
}
.floatcard span em{ font-style:normal; color:var(--orange-dk); font-weight:700; }
@media (max-width: 940px){
  .floatcard{ left:14px; bottom:14px; }
  .hero__media{ margin-top:8px; }
}

/* programme cards lead with a photograph */
.prog{ padding:0; overflow:hidden; }
.prog .frame{ border-radius:0; }
.prog__body{ padding:26px 28px 28px; display:flex; flex-direction:column; flex:1; }
.prog__icon{ display:none; }

/* a photograph set into a colour block, one side bleeding to the edge */
.inset{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--r-l); overflow:hidden; }
.inset__copy{ padding:clamp(28px,4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.inset__media{ min-height:300px; }
@media (max-width: 780px){
  .inset{ grid-template-columns:1fr; }
  .inset__media{ min-height:240px; order:-1; }
}


/* the FAQ keeps a short measure but stays on the page's left gutter */
.faq{ max-width:820px; }

/* the pointer arrow needs room to its left; below that it just clips */
@media (max-width: 1080px){ .doodle{ display:none; } }