/* Luke Inglis — lukeminglis.com
   Values lifted 1:1 from design/Luke Inglis - Production.dc.html.
   No media queries anywhere: layout is clamp() + auto-fit only. Do not add any. */

/* ---------- Fonts ----------
   Archivo ships from Google as a single variable font (wght axis 100-900, latin
   subset, 35KB). One file covers 400/500/600/700, so this is one request instead
   of four and ~105KB smaller than self-hosting the weights separately. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/archivo-variable.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --paper:#f7f6f3;
  --ink:#141614;
  --green:#0f5450;
  --green-hover:#0a3b38;
  --body-grey:#3d4240;
  --muted:#5f6663;
  --light-grey:#6b7270;
  --card-white:#ffffff;
  --stone:#eceae4;

  --hairline:rgba(20,22,20,0.09);
  --rule:rgba(20,22,20,0.16);
  --rule-accordion:rgba(20,22,20,0.14);
  --rule-stone:rgba(20,22,20,0.2);
  --card-border:rgba(20,22,20,0.1);
  --callbar-border:rgba(20,22,20,0.12);

  --on-dark-rule:rgba(247,246,243,0.18);
  --on-dark-body:rgba(247,246,243,0.72);
  --on-dark-muted:rgba(247,246,243,0.6);
  --on-dark-faint:rgba(247,246,243,0.5);
  --on-dark-answer:rgba(247,246,243,0.65);
  --field-fill:rgba(247,246,243,0.06);
  --field-border:rgba(247,246,243,0.28);

  --font:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;

  --pad-x:clamp(20px,5vw,80px);
  --wrap:1120px;
}

/* ---------- Base ---------- */
/* The prototype's runtime (design/support.js) applied this globally, and the design
   depends on it: the hero CTA is width:100% with padding:0 40px, which overflows its
   column under content-box. */
*,*::before,*::after{box-sizing:border-box}

html,body{overflow-x:clip}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-hover)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* Author rules like .form{display:grid} outrank the UA sheet's [hidden]{display:none},
   so the form/success toggle needs this to actually hide anything. */
[hidden]{display:none !important}

details summary::-webkit-details-marker{display:none}
details summary{list-style:none;cursor:pointer}
details[open] .plus{transform:rotate(45deg)}
details[open] .arrow{transform:rotate(90deg)}

.wrap{max-width:var(--wrap);margin:0 auto}

/* Scroll reveal — gated on .js-reveal so the page is fully visible without JS */
html.js-reveal [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);
}
html.js-reveal [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.js-reveal [data-reveal]{opacity:1;transform:none;transition:none}
  .plus,.arrow,.callbar{transition:none}
}

/* ---------- Header ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(14px,2vw,22px) var(--pad-x);
  font:500 clamp(14px,1.2vw,16px)/1 var(--font);
  letter-spacing:-0.01em;
}
.site-header__tel{font:inherit;color:var(--green);min-height:44px;display:flex;align-items:center}

/* ---------- Hero ---------- */
.hero{
  min-height:min(88svh,900px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(24px,6vw,40px) var(--pad-x) clamp(56px,8vw,100px);
}
.hero__title{
  margin:0;max-width:1040px;
  font:600 clamp(40px,7.4vw,88px)/1.03 var(--font);
  letter-spacing:-0.038em;text-wrap:balance;
}
.hero__sub{
  margin:clamp(20px,2.4vw,32px) 0 0;max-width:560px;
  font:400 clamp(17px,1.7vw,21px)/1.5 var(--font);color:var(--muted);
}
.hero__cta{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:clamp(32px,4vw,48px);width:100%;max-width:360px;
}
.btn-primary{
  display:flex;align-items:center;justify-content:center;width:100%;height:60px;padding:0 40px;
  border-radius:999px;background:var(--green);color:var(--paper);
  font:500 clamp(17px,1.6vw,19px)/1 var(--font);letter-spacing:-0.01em;
}
.btn-primary:hover{color:var(--paper)}
.hero__caption{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font:400 clamp(14px,1.2vw,15px)/1.5 var(--font);color:var(--light-grey);
}
.hero__formlink{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  color:var(--green);text-decoration:underline;text-underline-offset:3px;
}

/* ---------- Bio ---------- */
.bio{padding:clamp(48px,7vw,88px) var(--pad-x);border-top:1px solid var(--hairline)}
.bio__inner{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,72px);align-items:flex-end}
.bio__photo{
  flex:0 0 auto;display:block;
  width:clamp(150px,22vw,320px);height:clamp(188px,27.5vw,400px);
}
.bio__photo img{
  width:100%;height:100%;object-fit:cover;border-radius:4px;display:block;
}
.bio__text{flex:1 1 280px;min-width:260px}
.bio__name{margin:0;font:600 clamp(30px,4vw,48px)/1.06 var(--font);letter-spacing:-0.035em}
.bio__where{
  margin:10px 0 0;font:500 clamp(13px,1.1vw,15px)/1 var(--font);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--green);
}
.bio__body{
  margin:clamp(18px,2.2vw,28px) 0 0;max-width:520px;
  font:400 clamp(17px,1.7vw,21px)/1.55 var(--font);color:var(--body-grey);
}

/* ---------- Problems ---------- */
.problems{padding:clamp(48px,7vw,88px) var(--pad-x) clamp(56px,8vw,96px);border-top:1px solid var(--hairline)}
.problems__title{
  margin:0;max-width:820px;
  font:600 clamp(30px,4vw,48px)/1.08 var(--font);letter-spacing:-0.032em;text-wrap:balance;
}
.problems__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(4px,3vw,40px);margin-top:clamp(28px,4vw,56px);
}
.tile{padding:clamp(18px,2vw,22px) 0 0;border-top:1px solid var(--rule)}
.tile__head{margin:0;font:500 clamp(21px,2.2vw,26px)/1.22 var(--font);letter-spacing:-0.025em}
.tile__body{
  margin:12px 0 clamp(4px,2vw,0px);
  font:400 clamp(16px,1.4vw,17px)/1.55 var(--font);color:var(--muted);
}
.tile:last-child .tile__body{margin-bottom:0}
.lead{color:var(--green)}

/* ---------- How it works ---------- */
.how{padding:clamp(56px,8vw,96px) var(--pad-x);border-top:1px solid var(--hairline)}
.how__head{display:flex;flex-wrap:wrap;gap:10px 32px;align-items:baseline;justify-content:space-between}
.how__title{margin:0;font:600 clamp(30px,4vw,48px)/1.06 var(--font);letter-spacing:-0.035em}
.how__note{margin:0;font:400 clamp(16px,1.5vw,19px)/1.5 var(--font);color:var(--light-grey)}
/* Two flex halves each holding a 2-up auto-fit grid: 4-up wide, 2x2 mid, 1-up narrow.
   A single auto-fit grid cannot do this without an awkward 3+1. */
.split{display:flex;flex-wrap:wrap;gap:clamp(4px,3vw,40px);margin-top:clamp(28px,4vw,56px)}
.split__half{
  flex:1 1 470px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(4px,3vw,40px);
}
.step{padding:clamp(18px,2vw,22px) 0 0;border-top:1px solid var(--rule)}
.step__num{font:500 15px/1 var(--font);color:var(--green)}
.step__title{margin:16px 0 0;font:500 clamp(20px,2vw,24px)/1.25 var(--font);letter-spacing:-0.02em}
.step__body{
  margin:10px 0 clamp(4px,2vw,0px);
  font:400 clamp(16px,1.4vw,17px)/1.55 var(--font);color:var(--muted);
}
.split__half:last-child .step:last-child .step__body{margin-bottom:0}

/* ---------- Pricing ---------- */
.pricing{padding:clamp(56px,8vw,96px) var(--pad-x) clamp(28px,4vw,48px);border-top:1px solid var(--hairline)}
.pricing__head{display:flex;flex-wrap:wrap;gap:clamp(12px,3vw,100px);align-items:flex-end}
.pricing__title{margin:0;flex:1 1 300px;font:600 clamp(30px,4vw,48px)/1.06 var(--font);letter-spacing:-0.035em}
.pricing__intro{
  margin:0;flex:1 1 380px;max-width:480px;
  font:400 clamp(16px,1.5vw,19px)/1.55 var(--font);color:var(--muted);
}
.eyebrow{
  margin:clamp(32px,4.5vw,56px) 0 20px;
  font:500 clamp(12px,1.1vw,14px)/1 var(--font);
  letter-spacing:0.16em;text-transform:uppercase;color:var(--light-grey);
}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,1.6vw,20px)}
/* No card is highlighted or badged as recommended — deliberate. */
.card{
  background:var(--card-white);border:1px solid var(--card-border);border-radius:8px;
  padding:clamp(24px,2.6vw,32px);
}
.card__name{margin:0;font:500 clamp(22px,2vw,24px)/1.2 var(--font);letter-spacing:-0.02em}
.card__price{margin:8px 0 18px;font:600 clamp(30px,3.2vw,40px)/1 var(--font);letter-spacing:-0.035em}
.card__for{margin:0 0 18px;font:400 clamp(16px,1.4vw,17px)/1.5 var(--font);color:var(--ink)}
.card__features{
  display:flex;flex-direction:column;gap:12px;padding-top:18px;
  border-top:1px solid var(--card-border);
  font:400 clamp(16px,1.4vw,17px)/1.45 var(--font);color:var(--body-grey);
}
.footnote{margin:18px 0 0;font:400 clamp(15px,1.3vw,16px)/1.5 var(--font);color:var(--light-grey)}

/* ---------- Care plans ---------- */
.care{padding:clamp(28px,4vw,56px) var(--pad-x) clamp(56px,8vw,96px)}
.care .eyebrow{margin:0 0 clamp(8px,2vw,22px)}
.plan{border-top:1px solid var(--rule-accordion)}
.plan--last{border-bottom:1px solid var(--rule-accordion)}
.plan__summary{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 24px;padding:clamp(18px,2.2vw,24px) 0;min-height:44px;
}
.plan__name{font:500 clamp(21px,2.2vw,26px)/1.18 var(--font);letter-spacing:-0.025em}
.plan__right{display:flex;align-items:baseline;gap:16px}
.plan__price{font:600 clamp(24px,2.4vw,28px)/1 var(--font);letter-spacing:-0.03em}
.plan__per{font:400 clamp(14px,1.2vw,15px)/1 var(--font);color:var(--light-grey)}
.plus{font:400 24px/1 var(--font);color:var(--green);transition:transform .2s ease}
.plan__desc{flex:1 1 100%;font:400 clamp(15px,1.4vw,17px)/1.4 var(--font);color:var(--light-grey)}
.plan__body{
  padding:0 0 clamp(20px,2.6vw,26px);
  font:400 clamp(16px,1.4vw,17px)/1.5 var(--font);color:var(--body-grey);
}
.plan__body--grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px clamp(24px,3vw,40px);max-width:820px;
}
.plan__body--col{display:flex;flex-direction:column;gap:12px;max-width:720px}
.plan__body strong{font-weight:500}
.full{grid-column:1 / -1}

/* ---------- Guarantees ---------- */
.guarantees{
  padding:clamp(56px,8vw,88px) var(--pad-x) clamp(56px,8vw,96px);
  background:var(--stone);border-top:1px solid var(--hairline);
}
.guarantees__title{margin:0;font:600 clamp(30px,4vw,48px)/1.06 var(--font);letter-spacing:-0.035em}
.split--guarantees{margin-top:clamp(24px,3.6vw,48px)}
.split--guarantees .split__half{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.guarantee{padding:clamp(18px,2vw,22px) 0 0;border-top:1px solid var(--rule-stone)}
.guarantee__head{margin:0;font:500 clamp(19px,1.9vw,22px)/1.25 var(--font);letter-spacing:-0.02em}
.guarantee__body{
  margin:10px 0 clamp(4px,2vw,0px);
  font:400 clamp(16px,1.4vw,17px)/1.55 var(--font);color:var(--muted);
}
.split--guarantees .split__half:last-child .guarantee:last-child .guarantee__body{margin-bottom:0}

/* ---------- FAQ ---------- */
.faq{padding:clamp(56px,8vw,96px) var(--pad-x);border-top:1px solid var(--hairline)}
.faq__inner{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,80px)}
.faq__title{margin:0;flex:1 1 280px;font:600 clamp(30px,4vw,48px)/1.06 var(--font);letter-spacing:-0.035em}
.faq__list{flex:2 1 520px;min-width:280px}
.faq__item{border-top:1px solid var(--rule-accordion)}
.faq__item--last{border-bottom:1px solid var(--rule-accordion)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(16px,2vw,22px) 0;min-height:44px;
  font:500 clamp(18px,1.8vw,21px)/1.35 var(--font);letter-spacing:-0.015em;
}
.faq__a{
  margin:0;padding:0 0 clamp(16px,2vw,22px);max-width:600px;
  font:400 clamp(16px,1.5vw,18px)/1.6 var(--font);color:var(--muted);
}

/* ---------- Close (dark) ---------- */
.close{
  min-height:min(72svh,700px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(72px,10vw,120px) var(--pad-x) clamp(56px,7vw,72px);
  background:var(--ink);color:var(--paper);
}
.close__inner{width:100%}
.close__title{margin:0;max-width:820px;font:600 clamp(36px,5.2vw,64px)/1.05 var(--font);letter-spacing:-0.038em}
.close__contact{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:12px clamp(24px,4vw,48px);margin-top:clamp(32px,4.5vw,48px);
}
.close__phone{
  font:600 clamp(32px,4.4vw,52px)/1.1 var(--font);letter-spacing:-0.035em;
  color:var(--paper);padding:6px 0;
}
.close__phone:hover{color:var(--paper)}
.close__email{
  display:inline-flex;align-items:center;min-height:44px;
  font:400 clamp(19px,2vw,24px)/1.3 var(--font);color:var(--on-dark-body);padding:8px 0;
}
.close__email:hover{color:var(--paper)}

.msg{
  margin-top:clamp(32px,4.5vw,48px);
  border-top:1px solid var(--on-dark-rule);border-bottom:1px solid var(--on-dark-rule);
  max-width:760px;
}
.msg__summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,2.2vw,22px) 0;min-height:44px;
  font:500 clamp(17px,1.6vw,19px)/1.4 var(--font);color:var(--paper);
}
.arrow{font:400 22px/1 var(--font);color:var(--paper);transition:transform .2s ease}

/* ---------- Form ---------- */
.form{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px 20px;padding:4px 0 clamp(24px,3vw,32px);
}
.field{
  display:flex;flex-direction:column;gap:8px;
  font:400 15px/1.3 var(--font);color:var(--on-dark-body);
}
.field__optional{display:flex;align-items:baseline;gap:6px}
.field__optional span{color:var(--on-dark-muted)}
.input{
  height:52px;padding:0 16px;border-radius:6px;
  border:1px solid var(--field-border);background:var(--field-fill);
  color:var(--paper);font:400 17px/1 var(--font);
}
.textarea{
  padding:14px 16px;border-radius:6px;
  border:1px solid var(--field-border);background:var(--field-fill);
  color:var(--paper);font:400 17px/1.5 var(--font);resize:vertical;
}
.input::placeholder,.textarea::placeholder{color:var(--on-dark-muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.btn-send{
  height:56px;padding:0 32px;border:none;border-radius:999px;
  background:var(--paper);color:var(--ink);
  font:500 17px/1 var(--font);letter-spacing:-0.01em;cursor:pointer;
}
.btn-send[disabled]{opacity:.6;cursor:default}
.form__note{font:400 15px/1.5 var(--font);color:var(--on-dark-muted)}
.form__error{
  grid-column:1 / -1;margin:0;
  font:400 16px/1.55 var(--font);color:var(--paper);
}
.form__error a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}

.sent{padding:8px 0 clamp(24px,3vw,32px)}
.sent__head{
  margin:0;font:500 clamp(20px,2vw,24px)/1.35 var(--font);
  letter-spacing:-0.02em;color:var(--paper);
}
.sent__body{margin:10px 0 0;font:400 17px/1.55 var(--font);color:var(--on-dark-answer)}
.sent__body a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}

.footer-line{
  margin:clamp(36px,5vw,56px) 0 0;padding-top:26px;
  border-top:1px solid var(--on-dark-rule);
  font:400 clamp(15px,1.3vw,16px)/1.6 var(--font);color:var(--on-dark-faint);
}

/* ---------- Sticky call bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(247,246,243,0.94);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--callbar-border);
  transform:translateY(120%);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.callbar__btn{
  display:flex;align-items:center;justify-content:center;height:52px;
  border-radius:999px;background:var(--green);color:var(--paper);
  font:500 17px/1 var(--font);letter-spacing:-0.01em;
}
.callbar__btn:hover{color:var(--paper)}