/*
  Shared stylesheet, restyled to the house funnel language:
  white ground, their navy (#2B4C6B) as the only accent, Fraunces for display,
  DM Sans for everything else, everything centred. No black blocks, no amber.
  Mobile first — over 80% of this traffic is a phone.
*/

:root{
  --paper:oklch(99.2% 0.002 250);
  --paper-2:oklch(96.8% 0.006 250);
  --ink:oklch(17% 0.016 250);
  --ink-2:oklch(43% 0.014 250);
  --ink-3:oklch(60% 0.012 250);
  --line:oklch(90% 0.008 250);
  --navy:#2B4C6B;
  --navy-hi:#1E3852;
  --navy-deep:#152838;
  --navy-soft:oklch(96% 0.020 250);
  --blue:#2456A6;          /* permit blue, focus rings */
  --bad:#B3261E;
  --ok:oklch(54% 0.125 152);
  --d:"Fraunces",Georgia,"Times New Roman",serif;
  --s:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--s);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
p{margin:0}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--d);font-weight:600;line-height:1.06;
  letter-spacing:-.025em;text-wrap:balance}

.wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
@media(min-width:700px){.wrap{padding-inline:36px}}

/* ---------- header: one white bar, licence folded in ---------- */
.cred-strip{display:none}
.bar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:11px}
.bar img{height:34px;width:auto}
.bar .midnote{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.bar .tel{font-family:var(--s);font-weight:700;font-size:15.5px;color:var(--navy);
  text-decoration:none;white-space:nowrap}
.bar .tel:hover{color:var(--navy-hi)}
@media(max-width:760px){.bar .midnote{display:none}}
@media(max-width:400px){.bar img{height:29px}}

/* ---------- hero: real photo, tint, everything centred ---------- */
.hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;text-align:center;
  padding-block:clamp(52px,9vw,104px)}
.hero>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to bottom,rgba(12,22,33,.78),rgba(12,22,33,.68) 40%,rgba(12,22,33,.88))}
.hero .kicker{font-family:var(--s);font-weight:700;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.85}
.hero h1{font-size:clamp(2.15rem,6vw,4rem);margin-top:14px;max-width:16ch;
  margin-inline:auto;text-shadow:0 2px 30px rgba(8,16,24,.4)}
.hero .sub{margin-top:16px;max-width:52ch;margin-inline:auto;
  font-size:clamp(1rem,1.7vw,1.18rem);color:rgba(255,255,255,.9)}
.hero .photo{display:none}
.ph-replace{display:none}

.hero.short{padding-block:clamp(38px,6vw,68px)}

/* two info columns, left to right, text reads left */
.duocol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);
  max-width:880px;margin:clamp(28px,4vw,44px) auto 0;text-align:left}
@media(max-width:700px){.duocol{grid-template-columns:1fr}}
.duocol .col{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:clamp(20px,3.5vw,30px);box-shadow:0 18px 44px rgba(21,40,56,.08)}
.duocol h3{font-size:1.35rem}
.duocol p{margin-top:10px;color:var(--ink-2);font-size:16px}
.duocol .btn{margin-top:16px}

/* ---------- CTA ---------- */
.btn{display:inline-block;background:var(--navy);color:#fff;font-family:var(--s);
  font-weight:700;font-size:17px;line-height:1.1;text-decoration:none;text-align:center;
  padding:17px 34px;border:0;border-radius:3px;cursor:pointer;
  box-shadow:0 10px 30px rgba(21,40,56,.25)}
.btn:hover{background:var(--navy-hi)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.btn.block{display:block;width:100%}
.hero .btn{margin-top:clamp(22px,3vw,30px)}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line);
  font-size:15px;padding:15px 22px;box-shadow:none}
.btn.ghost:hover{background:transparent;border-color:var(--ink-3)}

/* ---------- sections: centred by default ---------- */
.sec{padding-block:clamp(48px,8vw,92px);text-align:center}
.sec.on-white{background:#fff;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.sec h2{font-size:clamp(1.8rem,4.4vw,2.9rem);max-width:20ch;margin-inline:auto}
.sec .lede{margin-top:14px;max-width:56ch;margin-inline:auto;color:var(--ink-2)}
.eyebrow{font-family:var(--s);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--navy)}
.eyebrow + h2{margin-top:12px}

/* the three things that went wrong: centred, no boxes, space does the work */
.wrongs{margin-top:clamp(32px,5vw,56px);display:grid;
  gap:clamp(48px,9vw,120px);max-width:1060px;margin-inline:auto;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.wrongs{grid-template-columns:1fr;max-width:620px}}
.wrong{border:0;padding:0}
.wrong .n{font-family:var(--s);font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.wrong h3{font-size:clamp(1.35rem,3.2vw,1.8rem);margin-top:8px}
.wrong p{margin-top:8px;color:var(--ink-2);font-size:16px;max-width:44ch;margin-inline:auto}
.notthis{margin-top:clamp(30px,4.5vw,46px);font-family:var(--d);font-weight:600;
  letter-spacing:-.02em;font-size:clamp(1.6rem,4.4vw,2.4rem)}
.notthis b{color:var(--navy);font-weight:600}

/* navy section: the form floats white on their blue */
.sec.navy{background:var(--navy-deep)}
.sec.navy .eyebrow{color:#9FC4E4}
.sec.navy h2{color:#fff}
.sec.navy .lede{color:rgba(255,255,255,.75)}
.sec.navy .formbox{box-shadow:0 30px 70px rgba(4,10,16,.45);border:0}

/* ---------- form: white card, navy accents, text left inside ---------- */
.formbox{background:#fff;border:1px solid var(--line);border-radius:4px;
  max-width:620px;margin:clamp(26px,4vw,40px) auto 0;text-align:left;
  padding:clamp(22px,4vw,36px);box-shadow:0 24px 60px rgba(21,40,56,.10)}
.stepline{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:16px}
.stepline .which{font-family:var(--d);font-weight:600;font-size:20px;letter-spacing:-.02em}
.stepline .count{font-size:13px;color:var(--ink-3);font-weight:600}
.f-label{display:block;margin-top:17px;font-weight:700;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.f-label .req{color:var(--bad)}
input[type=text],input[type=tel],input[type=email],select{width:100%;margin-top:7px;
  font-family:var(--s);font-size:16.5px;padding:14px 14px;
  border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);
  -webkit-appearance:none}
input:focus,select:focus{border-color:var(--navy);outline:2px solid var(--navy);
  outline-offset:1px}
.choices{margin-top:9px;display:grid;gap:8px}
.choices.cols2{grid-template-columns:1fr 1fr}
@media(max-width:460px){.choices.cols2{grid-template-columns:1fr}}
.choices label{display:flex;align-items:center;gap:11px;padding:13px 14px;
  border:1px solid var(--line);border-radius:3px;cursor:pointer;font-size:15.5px;
  line-height:1.3;background:#fff}
.choices label:hover{border-color:var(--navy)}
.choices input{accent-color:var(--navy);width:19px;height:19px;flex:0 0 auto;margin:0}
.choices label:has(input:checked){border-color:var(--navy);background:var(--navy-soft)}
.quiet-note{margin-top:12px;font-size:13.5px;color:var(--ink-3);line-height:1.5}

/* the minimum checkbox: set apart in their navy, not a warning colour */
.minbox{margin-top:20px;background:var(--navy-soft);border:2px solid var(--navy);
  border-radius:3px;padding:15px 14px}
.minbox label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-size:15.5px;line-height:1.5;font-weight:600}
.minbox input{accent-color:var(--navy);width:20px;height:20px;flex:0 0 auto;margin-top:2px}

.f-err{margin-top:12px;color:var(--bad);font-size:14.5px;font-weight:600;min-height:1px}
.f-nav{margin-top:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.consent{margin-top:14px;font-size:12px;line-height:1.55;color:var(--ink-3)}

/* ---------- inner page heads: white, centred, navy accent ---------- */
.narrow{max-width:640px;margin-inline:auto}
.pagehead{background:#fff;border-bottom:1px solid var(--line);text-align:center;
  padding-block:clamp(38px,6vw,64px)}
.pagehead h1{font-size:clamp(2rem,5.6vw,3.2rem);max-width:20ch;margin-inline:auto}
.pagehead .sub{margin-top:14px;color:var(--ink-2);max-width:52ch;margin-inline:auto;
  font-size:17px}
.pagehead .sub b{color:var(--navy)}
.plain{text-align:center}
.plain p{margin-top:14px;color:var(--ink-2);max-width:56ch;margin-inline:auto}
.plain p b{color:var(--ink)}
.callout{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:clamp(20px,3.5vw,30px);box-shadow:0 18px 44px rgba(21,40,56,.08)}
.callout h3{font-size:1.4rem}
.callout p{margin-top:8px;color:var(--ink-2);font-size:16px}
.callout .btn{margin-top:16px}

/* video slot */
.video-slot{margin-top:20px;background:var(--navy-deep);aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);
  font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border-radius:4px;text-align:center;padding:20px}

/* scope table */
.scope{margin-top:18px;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:#fff;text-align:left}
.scope table{width:100%;border-collapse:collapse;font-size:15px}
.scope th{font-family:var(--s);text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;text-align:left;background:var(--navy-deep);color:#fff;padding:11px 13px}
.scope td{padding:10px 13px;border-top:1px solid var(--line);vertical-align:top}
.scope td:last-child{text-align:right;white-space:nowrap;font-weight:600}
.scope .total td{border-top:2px solid var(--navy);font-weight:700;font-size:16px}
.specnote{margin-top:10px;font-size:13.5px;color:var(--ink-3);line-height:1.55}

/* the visit: image band, three steps left to right */
.visitband{position:relative;isolation:isolate;color:#fff;overflow:hidden;text-align:center;
  padding-block:clamp(38px,6vw,64px)}
.visitband>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.visitband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(12,22,33,.84),rgba(12,22,33,.88))}
.visitband h2{color:#fff;font-size:clamp(1.7rem,4vw,2.6rem);max-width:20ch;margin-inline:auto}
.visit-steps{margin-top:clamp(22px,3.5vw,34px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3.5vw,44px);
  max-width:1000px;margin-inline:auto}
@media(max-width:700px){.visit-steps{grid-template-columns:1fr;gap:22px;max-width:520px}}
.visit-steps .vstep{border:0;padding:0}
.visit-steps h3{font-size:1.25rem;color:#fff}
.visit-steps p{margin-top:7px;color:rgba(255,255,255,.78);font-size:15px}

/* the confirmed-page gallery: one wide, three square */
.minigal{margin-top:clamp(22px,3.5vw,34px);display:grid;gap:clamp(10px,1.6vw,18px);
  grid-template-columns:repeat(3,1fr);max-width:960px;margin-inline:auto}
.minigal figure{margin:0;overflow:hidden;border-radius:4px;background:var(--paper-2);
  aspect-ratio:4/3}
.minigal figure.wide{grid-column:span 3;aspect-ratio:16/8}
.minigal img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:560px){
  .minigal{grid-template-columns:1fr 1fr}
  .minigal figure.wide{grid-column:span 2;aspect-ratio:16/10}
  .minigal figure:last-child{display:none}
}
.galcap{margin-top:12px;font-size:13.5px;color:var(--ink-3)}

/* ---------- footer: thin, dark, one row ---------- */
footer{background:var(--ink);color:oklch(70% 0.012 250);padding-block:16px;font-size:12.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;
  align-items:center;text-align:center}
footer a{color:oklch(82% 0.012 250);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .fine{flex:1 1 100%;font-size:10.5px;line-height:1.5;color:oklch(52% 0.012 250);
  margin-top:2px}

@media (prefers-reduced-motion: no-preference){
  .btn{transition:background .2s var(--ease)}
  .choices label{transition:border-color .15s var(--ease),background .15s var(--ease)}
}

/* GHL booking widget: three columns on desktop, wants ~1200px. Its own column, wider than .wrap. */
.wrap.cal{max-width:1240px}
.calwrap{width:100%}
.calwrap iframe{display:block;width:100%}