/* ==========================================================================
   Convert2Athlete — Ocean Grove
   Palette derived from the C2A logo (near-black + electric blue) and the
   navy of the existing athlete-testimonial graphics.
   ========================================================================== */

:root{
  /* Ink: blue-shifted darks, not neutral black — matches the brand's navy */
  --ink:        #070A12;
  --ink-2:      #0E1322;
  --ink-3:      #151B2C;
  --line:       #232A3D;

  /* Brand blue from the logo, plus a lifted tint for text on dark */
  --blue:       #1B4FE8;
  --blue-deep:  #1540C4;
  --blue-lift:  #6E9BFF;

  --chalk:      #F2F5FB;
  --steel:      #99A3BC;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Spacing scale (density 4 — marketing page, generous but not airy) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;

  --radius:    18px;
  --radius-sm: 12px;
  --shell:     1180px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--font-display); margin:0; line-height:1.05; }
p{ margin:0; }
img{ max-width:100%; display:block; }

a{ color:inherit; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--s-3); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--blue); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--blue-lift); outline-offset:3px; border-radius:4px; }

/* ---------- Wordmark ------------------------------------------------ */
.mark{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--chalk);
}
.mark__ring{ width:28px; height:28px; color:var(--blue-lift); flex:none; }
.mark__word{
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.mark__two{ color:var(--blue-lift); }

/* ---------- Buttons -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:700; font-size:.92rem;
  letter-spacing:.02em;
  min-height:48px; padding:0 1.5rem;
  border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease), transform .2s var(--ease);
}
.btn--solid{ background:var(--blue); color:#fff; }
.btn--solid:hover{ background:var(--blue-deep); transform:translateY(-2px); }

.btn--ghost{ background:transparent; color:var(--chalk); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--blue-lift); color:var(--blue-lift); transform:translateY(-2px); }

.btn--lg{ min-height:56px; padding:0 2rem; font-size:1rem; }
.btn--full{ width:100%; }

/* ---------- Nav ------------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(7,10,18,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(7,10,18,.94); }

.nav__inner{ display:flex; align-items:center; gap:var(--s-3); min-height:76px; }

.nav__links{ display:flex; gap:1.6rem; margin-left:auto; }
.nav__links a{
  text-decoration:none; color:var(--steel); font-size:.92rem; font-weight:500;
  transition:color .2s var(--ease);
}
.nav__links a:hover{ color:var(--chalk); }

.nav__cta{ flex:none; }

.burger{
  display:none; margin-left:auto;
  width:48px; height:48px; padding:0;
  background:none; border:1.5px solid var(--line); border-radius:12px;
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ display:block; width:18px; height:2px; background:var(--chalk); transition:transform .25s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.mobilenav{
  display:flex; flex-direction:column; gap:.25rem;
  padding:var(--s-2) var(--s-3) var(--s-3);
  border-top:1px solid var(--line);
}
/* `display:flex` above outranks the UA `[hidden]{display:none}` rule,
   so the hidden state has to be restated at matching specificity. */
.mobilenav[hidden]{ display:none; }

.mobilenav a{
  text-decoration:none; color:var(--chalk);
  padding:.9rem 0; font-size:1.05rem; font-weight:500;
}
.mobilenav .btn{ margin-top:var(--s-2); }

/* ---------- Hero ----------------------------------------------------- */
.hero{ position:relative; padding:var(--s-6) 0 var(--s-5); overflow:hidden; }

.hero__arc{
  position:absolute; top:50%; left:50%;
  width:min(150vw,1180px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:0;
  opacity:.5;
}
.hero__arc svg{ width:100%; height:100%; }
.arc{
  fill:none; stroke-linecap:round;
  stroke-dasharray:38 62; stroke-dashoffset:38;
  animation:draw 1.6s var(--ease) forwards;
}
.arc--wide{  stroke:var(--blue);      stroke-width:.55; opacity:.85; transform:rotate(-52deg); transform-origin:center; }
.arc--mid{   stroke:var(--blue-lift); stroke-width:.4;  opacity:.45; transform:rotate(128deg); transform-origin:center; animation-delay:.12s; }
.arc--tight{ stroke:var(--line);      stroke-width:.6;  opacity:.9;  transform:rotate(24deg);  transform-origin:center; animation-delay:.24s; }

@keyframes draw{ from{ stroke-dashoffset:138; } to{ stroke-dashoffset:38; } }

.hero__inner{ position:relative; z-index:1; }

.eyebrow{
  font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue-lift); margin-bottom:var(--s-2);
}

.hero__title{
  font-size:clamp(2.9rem,9vw,6.4rem);
  font-weight:700; letter-spacing:-.035em;
  margin-bottom:var(--s-3);
}
.hero__line{ display:block; }
.hero__line--accent{ color:var(--blue-lift); }

.hero__lede{
  max-width:56ch; color:var(--steel); font-size:clamp(1.02rem,2.1vw,1.2rem);
  margin-bottom:var(--s-4);
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-5); }

.hero__facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s-3); margin:0;
  padding-top:var(--s-4); border-top:1px solid var(--line);
}
.hero__facts dt{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel); margin-bottom:.35rem;
}
.hero__facts dd{ margin:0; font-family:var(--font-display); font-size:1.05rem; font-weight:500; }

/* ---------- Section shell -------------------------------------------- */
.band{ padding:var(--s-6) 0; }
.band--alt{ background:var(--ink-2); }

.sechead{ max-width:62ch; margin-bottom:var(--s-5); }
.sectitle{
  font-size:clamp(2rem,4.6vw,3.2rem); font-weight:700; letter-spacing:-.03em;
  margin-bottom:var(--s-2);
}
.secnote{ color:var(--steel); font-size:1.05rem; }

/* ---------- Ticks ---------------------------------------------------- */
.ticks{ list-style:none; margin:0 0 var(--s-3); padding:0; display:grid; gap:.6rem; }
.ticks li{ position:relative; padding-left:1.6rem; color:var(--steel); font-size:.95rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:9px; height:9px; border-radius:50%;
  border:2px solid var(--blue-lift);
}
.ticks--row{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

/* ---------- Bento ---------------------------------------------------- */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); }

.tile{
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-4);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.band--alt .tile{ background:var(--ink-3); }
.tile:hover{ border-color:var(--blue-lift); transform:translateY(-4px); }

.tile--feature{ grid-row:span 2; background:var(--ink-3); border-color:var(--blue-deep); }
.tile--wide{ grid-column:span 2; }

.tile__tag{
  align-self:flex-start;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--blue); padding:.35rem .7rem; border-radius:999px;
  margin-bottom:var(--s-2);
}
.tile__title{ font-size:1.5rem; font-weight:600; letter-spacing:-.02em; margin-bottom:var(--s-2); }
.tile__body{ color:var(--steel); font-size:.98rem; margin-bottom:var(--s-3); }

.tile__price{ margin-top:auto; padding-top:var(--s-2); margin-bottom:var(--s-3); display:flex; align-items:baseline; gap:.5rem; }
.tile__price .amount{ font-family:var(--font-display); font-size:2.2rem; font-weight:700; letter-spacing:-.03em; }
.tile__price .per{ color:var(--steel); font-size:.9rem; }
.tile__price--quiet .amount{ font-size:1.5rem; color:var(--steel); }

.tile .btn{ align-self:flex-start; }

/* ---------- Method --------------------------------------------------- */
.method{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s-2);
  counter-reset:none;
}
.step{
  position:relative; padding:var(--s-4) var(--s-3);
  border-top:2px solid var(--line);
  transition:border-color .3s var(--ease);
}
.step:hover{ border-top-color:var(--blue); }
.step__num{
  font-family:var(--font-display); font-size:.9rem; font-weight:700;
  letter-spacing:.1em; color:var(--blue-lift); margin-bottom:var(--s-3);
}
.step__title{ font-size:1.4rem; font-weight:600; margin-bottom:.6rem; }
.step__body{ color:var(--steel); font-size:.95rem; }

/* ---------- Pricing -------------------------------------------------- */
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-2); align-items:start; }

.plan{
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-4);
}
.band--alt .plan{ background:var(--ink-3); }

.plan--hero{
  background:var(--ink-3);
  border-color:var(--blue);
  box-shadow:0 0 0 1px rgba(27,79,232,.35), 0 24px 60px -30px rgba(27,79,232,.7);
}
.plan__flag{
  align-self:flex-start;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--blue); padding:.35rem .7rem; border-radius:999px;
  margin-bottom:var(--s-2);
}
.plan__name{ font-size:1.25rem; font-weight:600; margin-bottom:var(--s-2); }
.plan__cost{ display:flex; align-items:baseline; gap:.3rem; margin-bottom:.4rem; }
.plan__cost .amount{ font-family:var(--font-display); font-size:2.8rem; font-weight:700; letter-spacing:-.035em; }
.plan__cost .per{ color:var(--steel); font-size:1rem; }
.plan__cost--quiet .amount{ font-size:1.9rem; color:var(--steel); }
.plan__for{ color:var(--steel); font-size:.9rem; margin-bottom:var(--s-3); }
.plan .ticks{ margin-bottom:var(--s-4); }
.plan .btn{ margin-top:auto; }

/* ---------- Booking -------------------------------------------------- */
.booktabs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s-1); margin-bottom:var(--s-3); }

.booktab{
  display:flex; flex-direction:column; gap:.2rem; text-align:left;
  min-height:64px; padding:.9rem 1.2rem;
  background:var(--ink-3); color:var(--chalk);
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-body); cursor:pointer;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.booktab:hover{ border-color:var(--blue-lift); }
.booktab.is-on{ border-color:var(--blue); background:var(--blue); }
.booktab__name{ font-weight:700; font-size:.98rem; }
.booktab__meta{ font-size:.82rem; color:var(--steel); }
.booktab.is-on .booktab__meta{ color:rgba(255,255,255,.85); }

.calwrap{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-1); overflow:hidden;
}
.calfall{ padding:var(--s-3); color:var(--steel); }
.calfall a{ color:var(--blue-lift); }

/* ---------- Gallery --------------------------------------------------
   Fixed row height so the tall tile can span two rows predictably while
   every image fills its cell via object-fit. */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:210px; gap:var(--s-2);
}

.shot{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line);
  background:var(--ink-2);
}
.shot--tall{ grid-row:span 2; grid-column:span 2; }
.shot--wide{ grid-column:span 2; }

.shot__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) contrast(1.05);
  transition:transform .5s var(--ease);
}
.shot:hover .shot__img{ transform:scale(1.04); }

.shot__cap{
  position:absolute; right:0; bottom:0; left:0;
  padding:var(--s-3) var(--s-3) var(--s-2);
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--chalk);
  background:linear-gradient(to top, rgba(7,10,18,.94) 0%, rgba(7,10,18,.55) 55%, rgba(7,10,18,0) 100%);
}

/* ---------- Coach + quote -------------------------------------------- */
.coach{ display:grid; grid-template-columns:1fr; gap:var(--s-3); align-items:start; }
/* The coach copy used to share a row with the testimonials; on its own it
   needs a reading measure rather than the full shell width. */
.coach__text{ max-width:62ch; }
.coach__body{ color:var(--steel); font-size:1.05rem; margin-bottom:var(--s-3); }

.quote{
  margin:0; padding:var(--s-4);
  background:var(--ink-3); border:1px solid var(--line);
  border-left:3px solid var(--blue); border-radius:var(--radius);
}
.quote blockquote{ margin:0 0 var(--s-3); }
.quote blockquote p{ font-size:1.06rem; line-height:1.65; margin-bottom:var(--s-2); }
.quote em{ color:var(--blue-lift); font-style:normal; font-weight:700; }
.quote figcaption{ display:flex; flex-direction:column; padding-top:var(--s-2); border-top:1px solid var(--line); }
.quote__who{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.quote__role{ color:var(--steel); font-size:.85rem; }

/* ---------- Contact -------------------------------------------------- */
.contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s-2); }
.contact__card{
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-4);
}
.contact__card--go{ background:var(--ink-3); border-color:var(--blue-deep); }
.contact__h{ font-size:1.15rem; font-weight:600; margin-bottom:var(--s-2); }
.contact__lines{ color:var(--steel); margin-bottom:var(--s-2); line-height:1.7; }
.contact__fine{ font-size:.85rem; color:var(--steel); }
.contact__card .btn{ margin-top:auto; }

.link{ color:var(--blue-lift); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s var(--ease); }
.link:hover{ border-bottom-color:var(--blue-lift); }

/* ---------- Footer --------------------------------------------------- */
.foot{ background:var(--ink-2); border-top:1px solid var(--line); padding:var(--s-5) 0 var(--s-4); }
.foot__inner{ display:flex; flex-direction:column; align-items:center; gap:var(--s-2); text-align:center; }
.foot__tag{ font-family:var(--font-display); font-size:1.05rem; color:var(--steel); }
.foot__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem; margin-top:var(--s-1); }
.foot__links a{ color:var(--steel); text-decoration:none; font-size:.92rem; }
.foot__links a:hover{ color:var(--chalk); }
.foot__legal{ margin-top:var(--s-2); font-size:.82rem; color:var(--steel); }

/* ---------- Reveal ---------------------------------------------------
   Gated behind `.js`: if the script fails to load or errors, nothing is
   ever hidden, so the page can't end up blank below the hero. */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------- Responsive ----------------------------------------------- */
/* Menu is mobile-only; stays closed if the viewport grows while it's open. */
@media (min-width:761px){
  .mobilenav{ display:none; }
}

@media (max-width:1000px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .tile--feature{ grid-row:auto; grid-column:span 2; }
  .tile--wide{ grid-column:span 2; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .coach{ grid-template-columns:1fr; gap:var(--s-4); }
}

@media (max-width:760px){
  :root{ --s-5:3rem; --s-6:4rem; }
  .nav__links,.nav__cta{ display:none; }
  .burger{ display:flex; }
  .bento{ grid-template-columns:1fr; }
  .tile--feature,.tile--wide{ grid-column:auto; }
  .gallery{ grid-template-columns:1fr; }
  .shot--tall,.shot--wide{ grid-column:auto; }
  .hero__actions .btn{ width:100%; }
}

/* ---------- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .arc{ stroke-dashoffset:38; }
}

/* ---------- First-timer note (modal) --------------------------------- */
.notewrap{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  padding:var(--s-2);
}
.notewrap[hidden]{ display:none; }

.notewrap__veil{
  position:absolute; inset:0;
  background:rgba(7,10,18,.78);
  backdrop-filter:blur(6px);
  animation:noteveil .22s var(--ease) both;
}

.note{
  position:relative;
  width:min(30rem, 100%);
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--s-4) var(--s-3) var(--s-3);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  animation:notein .26s var(--ease) both;
}
/* Brand edge along the top, echoing the blue in the logo */
.note::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, var(--blue), var(--blue-lift));
}

.note__mark{ margin-bottom:var(--s-2); }

.note__title{
  font-family:var(--font-display); font-weight:700;
  font-size:1.5rem; line-height:1.2; letter-spacing:-.01em;
  color:var(--chalk);
  margin:0 0 var(--s-1);
}
.note__body{
  font-family:var(--font-body); font-size:.98rem; line-height:1.6;
  color:var(--steel); margin:0 0 var(--s-2);
}
.note__body strong{ color:var(--chalk); font-weight:700; }
.note__body--fine{ font-size:.88rem; }

.note__actions{
  display:flex; flex-wrap:wrap; gap:var(--s-1);
  margin-top:var(--s-3);
}
.note__actions .btn{ flex:1 1 12rem; }

.note__x{
  position:absolute; top:.75rem; right:.75rem;
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:50%;
  color:var(--steel); cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease),
             background-color .2s var(--ease);
}
.note__x svg{ width:20px; height:20px; }
.note__x:hover{ color:var(--chalk); border-color:var(--line); background:var(--ink-3); }

.note :focus-visible,
.note__x:focus-visible{ outline:2px solid var(--blue-lift); outline-offset:3px; }

@keyframes notein{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to  { opacity:1; transform:none; }
}
@keyframes noteveil{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .note, .notewrap__veil{ animation:none; }
}

@media (max-width:480px){
  .note{ padding:var(--s-3) var(--s-2) var(--s-2); }
  .note__actions .btn{ flex:1 1 100%; }
}

/* ---------- Get started / contact form -------------------------------- */
.getstarted{ padding-top:calc(var(--s-6) + 1rem); }
.getstarted__head{ margin-bottom:var(--s-4); }
.getstarted__head .sectitle{ max-width:20ch; }

.formcard{
  max-width:52rem;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--s-4);
  position:relative;
  overflow:hidden;
}
.formcard::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--blue-lift));
}

/* Result banners after a submit */
.formnote{
  border-radius:var(--radius-sm);
  padding:var(--s-2) var(--s-3);
  margin-bottom:var(--s-3);
  border:1px solid var(--line);
  background:var(--ink-3);
}
.formnote[hidden]{ display:none; }
.formnote--ok{ border-color:var(--blue); }
.formnote--bad{ border-color:#7d2b3a; }
.formnote__title{
  font-family:var(--font-display); font-size:1.1rem; font-weight:700;
  color:var(--chalk); margin:0 0 .35rem;
}
.formnote__body{ font-size:.94rem; line-height:1.55; color:var(--steel); margin:0; }

.cform__group{ border:0; padding:0; margin:0 0 var(--s-3); min-width:0; }
.cform__legend{
  font-family:var(--font-display); font-weight:700;
  font-size:1.12rem; letter-spacing:-.01em; color:var(--chalk);
  padding:0; margin-bottom:var(--s-1);
}
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }

.field{ margin-bottom:var(--s-3); min-width:0; }
.cform__row .field{ margin-bottom:0; }
.field label{
  display:block;
  font-family:var(--font-body); font-weight:700; font-size:.98rem;
  color:var(--chalk); margin-bottom:.45rem;
}
.field__req{ font-weight:400; font-size:.85rem; color:var(--steel); }

.field input,
.field textarea{
  width:100%;
  font-family:var(--font-body); font-size:1rem; color:var(--chalk);
  background:var(--ink);
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  padding:.85rem 1rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:9rem; line-height:1.55; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--steel); }
.field input:hover,
.field textarea:hover{ border-color:var(--blue-lift); }
.field input:focus-visible,
.field textarea:focus-visible{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(27,79,232,.28);
}
/* Only flag invalid fields once the browser has actually validated them */
.field input:user-invalid{ border-color:#a33b4d; }

/* Checkbox list */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.check{
  display:flex; align-items:center; gap:.8rem;
  padding:.55rem .5rem; margin-left:-.5rem;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-family:var(--font-body); font-size:1rem; color:var(--chalk);
  transition:background-color .18s var(--ease);
}
.check:hover{ background:var(--ink-3); }
.check input{
  position:absolute; opacity:0; width:0; height:0;
}
.check__box{
  flex:none; width:22px; height:22px;
  border:1.5px solid var(--steel);
  border-radius:6px;
  background:var(--ink);
  position:relative;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.check__box::after{
  content:''; position:absolute;
  left:7px; top:3px; width:6px; height:11px;
  border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(.6);
  opacity:0;
  transition:opacity .16s var(--ease), transform .16s var(--ease);
}
.check input:checked + .check__box{ background:var(--blue); border-color:var(--blue); }
.check input:checked + .check__box::after{ opacity:1; transform:rotate(45deg) scale(1); }
.check input:focus-visible + .check__box{
  outline:2px solid var(--blue-lift); outline-offset:3px;
}

.cform__send{ margin-top:var(--s-2); min-width:12rem; }
.cform__fine{
  margin:var(--s-2) 0 0;
  font-size:.9rem; line-height:1.6; color:var(--steel);
}

/* Honeypot — off-screen for people, still reachable for bots */
.hp{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden;
}

@media (max-width:640px){
  .formcard{ padding:var(--s-3) var(--s-2); }
  .cform__row{ grid-template-columns:1fr; gap:var(--s-3); }
  .cform__row .field:first-child{ margin-bottom:0; }
  .cform__send{ width:100%; }
}
.cform__err{
  margin:.6rem 0 0;
  font-size:.92rem; font-weight:700; color:#ff8fa0;
}
.cform__err[hidden]{ display:none; }

/* ---------- Testimonials carousel ------------------------------------- */
/* No-JS default: every quote simply stacks and the controls stay hidden. */
.quotes__track{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--s-2);
}
.quotes__controls{ display:none; }

/* With JS we switch to a single-slide track. */
.js .quotes__viewport{ overflow:hidden; border-radius:var(--radius); }
.js .quotes__track{
  display:flex; gap:0;
  transition:transform .45s var(--ease);
  will-change:transform;
}
.js .quotes__slide{ flex:0 0 100%; min-width:0; }
/* Slides sit in a flex row, so every card matches the tallest one and the
   surrounding layout never jumps as you page through. */
.js .quotes__slide .quote{ height:100%; }

.js .quotes__controls{
  display:flex; align-items:center; justify-content:center; gap:var(--s-2);
  margin-top:var(--s-2);
}

.quotes__arrow{
  flex:none;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink-3); color:var(--chalk);
  border:1px solid var(--line); border-radius:50%;
  cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease), transform .2s var(--ease);
}
.quotes__arrow svg{ width:22px; height:22px; }
.quotes__arrow:hover{
  background:var(--blue); border-color:var(--blue); color:#fff;
  transform:translateY(-2px);
}
.quotes__arrow:focus-visible{ outline:2px solid var(--blue-lift); outline-offset:3px; }

.quotes__dots{ display:flex; align-items:center; gap:.55rem; }
.quotes__dot{
  width:10px; height:10px; padding:0;
  background:var(--line); border:0; border-radius:50%;
  cursor:pointer;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.quotes__dot:hover{ background:var(--steel); }
.quotes__dot[aria-selected="true"]{ background:var(--blue); transform:scale(1.35); }
.quotes__dot:focus-visible{ outline:2px solid var(--blue-lift); outline-offset:4px; }

@media (prefers-reduced-motion:reduce){
  .js .quotes__track{ transition:none; }
  .quotes__arrow:hover{ transform:none; }
}

@media (max-width:560px){
  .quotes__controls{ gap:var(--s-1); }
  .quotes__arrow{ width:40px; height:40px; }
}

/* Hairline between two plain bands that would otherwise run together
   (the coach section now sits directly above contact). */
.band--edge{ border-bottom:1px solid var(--line); }