/* ==========================================================================
   Emunah Home Care — design system
   Direction B "Faith & Hearth"

   Every visual value is a token. Never hardcode a colour in a rule below.
   ========================================================================== */

:root{
  /* --- ground ------------------------------------------------------- */
  --green-900:#071E15;   /* hue realigned to the ramp; step widened */
  --green-850:#0A2519;
  --green-800:#0E3325;   /* primary dark ground */
  --green-700:#17422F;
  --green-600:#1E5039;

  /* --- paper -------------------------------------------------------- */
  --cream-50:#FCF8EE;
  --cream-100:#F6F0E2;   /* primary light ground */
  --cream-200:#EDE3CE;
  --cream-300:#DDD0B2;

  /* --- brass -------------------------------------------------------- */
  --brass-200:#E8CE86;   /* button hover */
  --brass-300:#D8B75F;   /* brass TEXT under ~24px, and button grounds */
  --brass-400:#C6A24A;   /* on dark ground */
  --brass-600:#7E6427;   /* on light ground — AA at small sizes */

  /* --- ink ---------------------------------------------------------- */
  --on-green:#F1E9D8;
  --on-green-dim:#C3D0C5;
  --on-cream:#16362A;
  --on-cream-dim:#4E6050;

  /* --- lines -------------------------------------------------------- */
  --rule-dark:rgba(198,162,74,.22);
  --rule-light:var(--cream-200);
  /* Decorative rules may be faint. Borders on interactive controls may NOT —
     WCAG 1.4.11 wants >=3:1 and this audience is filling forms at night.
     Use --field-line on anything a person types into or clicks. */
  --field-line:#9A8558;

  /* --- type --------------------------------------------------------- */
  --disp:"Marcellus",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* --- metrics ------------------------------------------------------ */
  --w:1280px;
  --w-narrow:820px;
  --gut:24px;
  --tap:52px;
  --r:3px;

  /* Type scale sized for a 50-70 audience reading on a phone at night.
     Body sits at 20px, not the 16px web default. When widening the
     container, hold line length with ch-based max-widths — long lines are
     harder to track back from, and that difficulty grows with age. Target
     measure stays 60-75 characters everywhere. */
  --step-2:14px;   /* fine print, legal */
  --step-1:17px;   /* card body, captions, buttons */
  --step0:20px;    /* body */
  --step1:22px;    /* lede */
  --step2:clamp(23px,2.1vw,27px);
  --step3:clamp(26px,2.8vw,34px);
  --step4:clamp(31px,3.6vw,45px);
  --step5:clamp(36px,5vw,60px);
}

/* ==========================================================================
   reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  background:var(--green-800);
  color:var(--on-green);
  font-family:var(--sans);
  font-size:var(--step0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* visible, high-contrast focus — required, audience skews older */
:focus-visible{outline:3px solid var(--brass-300);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--brass-400);color:var(--green-900);
  padding:12px 20px;font-weight:600;z-index:100}
.skip:focus{left:12px;top:12px}

/* ==========================================================================
   layout
   ========================================================================== */
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:var(--w-narrow);margin:0 auto;padding:0 var(--gut)}

.band{padding:clamp(56px,7vw,92px) 0}
.band-tight{padding:clamp(40px,5vw,64px) 0}
.band--cream{background:var(--cream-100);color:var(--on-cream)}
.band--cream-lt{background:var(--cream-50);color:var(--on-cream)}
.band--green{background:var(--green-800);color:var(--on-green)}
.band--deep{background:var(--green-850);color:var(--on-green);border-top:1px solid var(--rule-dark)}

.center{text-align:center}
.stack>*+*{margin-top:var(--s,18px)}

/* ==========================================================================
   type
   ========================================================================== */
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1.18;letter-spacing:.005em}
h1{font-size:var(--step5);line-height:1.12}
h2{font-size:var(--step4)}
h3{font-size:var(--step2)}
.lede{font-size:var(--step1);line-height:1.58;max-width:58ch}

.band--green h2,.band--deep h2{color:var(--brass-400)}
.band--cream h2,.band--cream-lt h2{color:var(--green-800)}
.band--cream h3,.band--cream-lt h3{color:var(--green-800)}

.dim{color:var(--on-green-dim)}
.band--cream .dim,.band--cream-lt .dim{color:var(--on-cream-dim)}

.kicker{
  font-family:var(--disp);
  font-size:var(--step3);
  color:var(--brass-400);
  line-height:1.3;
}
.eyebrow{
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--brass-300);
}
.band--cream .eyebrow,.band--cream-lt .eyebrow{color:var(--brass-600)}

.hairline{width:70px;height:1px;background:var(--rule-dark);border:0;margin:26px auto}
.band--cream .hairline,.band--cream-lt .hairline{background:var(--cream-300)}
.hairline--left{margin-left:0}

/* placeholder — MUST stay visibly unfinished until the client confirms.
   An invented-but-plausible fact going live is worse than an obvious blank. */
.tbc{
  display:inline-block;
  font-family:var(--sans);
  font-size:.82em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass-600);
  background:rgba(198,162,74,.13);
  border:1px dashed rgba(198,162,74,.65);
  border-radius:2px;
  padding:1px 8px;
  white-space:nowrap;
}
.band--green .tbc,.band--deep .tbc,header .tbc,footer .tbc{
  color:var(--brass-300);
  background:rgba(198,162,74,.14);
}

/* ==========================================================================
   olive branch — the signature mark, drawn from the meaning of "Emunah"
   ========================================================================== */
.branch{margin:0 auto;color:var(--brass-400);display:block}
.band--cream .branch,.band--cream-lt .branch{color:var(--brass-600)}
.branch--sm{width:130px}
.branch--md{width:clamp(190px,22vw,250px)}

/* ==========================================================================
   buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);
  padding:14px 30px;
  font-size:17px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;border-radius:var(--r);
  transition:background-color .15s,border-color .15s,color .15s;
}
.btn svg{width:19px;height:19px;flex:none}

.btn--primary{background:var(--brass-300);color:var(--green-900)}
.btn--primary:hover{background:var(--brass-200)}

.btn--line{background:transparent;color:var(--brass-300);border:1px solid rgba(216,183,95,.55)}
.btn--line:hover{background:rgba(198,162,74,.12);border-color:var(--brass-400)}

.btn--dark{background:var(--green-800);color:var(--cream-50)}
.btn--dark:hover{background:var(--green-700)}

.btn--line-dark{background:transparent;color:var(--green-800);border:1px solid var(--field-line)}
.btn--line-dark:hover{background:var(--cream-200)}

.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-row--center{justify-content:center}

/* ==========================================================================
   header
   ========================================================================== */
.site-head{
  background:var(--green-850);
  border-bottom:1px solid var(--rule-dark);
  position:sticky;top:0;z-index:40;
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:14px 0}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand .mark{width:44px;height:44px;flex:none}
.brand b{display:block;font-family:var(--logo);font-size:21px;font-weight:400;
  letter-spacing:.2em;color:var(--brass-400);line-height:1}
.brand i{display:block;font-style:normal;font-size:10px;letter-spacing:.3em;
  color:var(--on-green-dim);font-weight:600;margin-top:5px}

.nav{display:flex;align-items:center;gap:28px}
.nav a{text-decoration:none;color:var(--on-green-dim);font-size:18px;font-weight:600;
  padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--brass-300)}
.nav a[aria-current="page"]{color:var(--on-green);border-bottom-color:var(--brass-400)}

.head-cta{display:flex;align-items:center;gap:14px;flex:none}
.head-tel{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--on-green);font-size:18px;font-weight:600;white-space:nowrap;
  min-height:var(--tap);padding:0 4px}
.head-tel svg{width:18px;height:18px;color:var(--brass-300)}
.head-tel:hover{color:var(--brass-300)}

.burger{display:none;width:var(--tap);height:var(--tap);align-items:center;justify-content:center;
  color:var(--brass-400);border:1px solid var(--rule-dark);border-radius:var(--r)}
.burger svg{width:24px;height:24px}

@media(max-width:940px){
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--green-850);border-bottom:1px solid var(--rule-dark);
    padding:8px var(--gut) 20px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:15px 0;border-bottom:1px solid var(--rule-dark);font-size:var(--step1)}
  .nav a[aria-current="page"]{border-bottom-color:var(--rule-dark);color:var(--brass-400)}
  .burger{display:flex}
  .head-tel span{display:none}
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero{padding:clamp(48px,6vw,80px) 0 clamp(52px,6.5vw,84px);text-align:center}
.hero .kicker span{display:block}
.hero h1{max-width:18ch;margin:0 auto}
.hero .lede{max-width:56ch;margin:24px auto 0;color:var(--on-green-dim)}
.hero .btn-row{margin-top:34px}
.hero .meta{margin-top:38px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:rgba(195,208,197,.72);display:flex;gap:10px;flex-wrap:wrap;
  justify-content:center;align-items:center}

.hero--page{padding:clamp(42px,5vw,64px) 0 clamp(44px,5vw,66px)}
.hero--page h1{max-width:20ch}
.hero--page .lede{max-width:56ch}

/* ==========================================================================
   trust pillars
   ========================================================================== */
.pillars{display:grid;grid-template-columns:repeat(4,1fr)}
.pillar{padding:26px 24px;border-left:1px solid var(--rule-dark)}
.pillar:first-child{border-left:0;padding-left:0}
.pillar svg{width:26px;height:26px;color:var(--brass-400);margin-bottom:12px}
.pillar b{display:block;font-family:var(--disp);font-size:18px;font-weight:400}
.pillar span{display:block;font-size:17px;color:var(--on-green-dim);margin-top:4px;line-height:1.5}

@media(max-width:820px){
  .pillars{grid-template-columns:1fr 1fr}
  .pillar{border-left:0;border-top:1px solid var(--rule-dark);padding:20px 0}
  .pillar:nth-child(-n+2){border-top:0}
  .pillar:nth-child(even){padding-left:22px;border-left:1px solid var(--rule-dark)}
}
@media(max-width:460px){
  .pillars{grid-template-columns:1fr}
  .pillar:nth-child(even){padding-left:0;border-left:0}
  .pillar:nth-child(2){border-top:1px solid var(--rule-dark)}
}

/* ==========================================================================
   cards
   ========================================================================== */
.sec-head{max-width:54ch;margin:0 auto clamp(34px,4vw,48px)}
.sec-head p{margin-top:14px}
.sec-head--left{margin-left:0}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--cream-50);
  border:1px solid var(--cream-200);
  border-radius:var(--r);
  padding:28px 26px 30px;
  position:relative;
}
.card::before{content:"";position:absolute;top:0;left:26px;right:26px;height:2px;
  background:linear-gradient(90deg,var(--brass-400),transparent)}
.card .ico{width:32px;height:32px;color:var(--brass-600);margin-bottom:15px}
.card h3{margin-bottom:9px}
.card p{font-size:18px;color:var(--on-cream-dim);line-height:1.6}
.card a.more{display:inline-block;margin-top:16px;font-size:17px;font-weight:600;
  color:var(--brass-600);text-decoration:none;border-bottom:1px solid rgba(126,100,39,.35);
  padding-bottom:1px}
.card a.more:hover{border-bottom-color:var(--brass-600)}

@media(max-width:900px){.cards,.cards--2{grid-template-columns:1fr}}

/* ==========================================================================
   split / checklist
   ========================================================================== */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:center}
.split--top{align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:30px}}

.checks{display:grid}
.checks li{display:flex;gap:15px;padding:17px 0;border-bottom:1px solid var(--rule-dark);
  font-size:var(--step0);line-height:1.55}
.checks li:first-child{border-top:1px solid var(--rule-dark)}
.checks svg{flex:none;width:20px;height:20px;color:var(--brass-400);margin-top:3px}
.band--cream .checks li,.band--cream-lt .checks li{border-color:var(--cream-200)}
.band--cream .checks svg,.band--cream-lt .checks svg{color:var(--brass-600)}

/* ==========================================================================
   steps
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,38px);counter-reset:s}
.step .n{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--disp);font-size:19px;margin-bottom:16px;
  background:var(--cream-200);color:var(--green-800)}
.band--green .step .n,.band--deep .step .n{background:rgba(198,162,74,.16);color:var(--brass-400)}
.step h3{margin-bottom:7px}
.step p{font-size:18px;line-height:1.6}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:28px}}

/* ==========================================================================
   detailed service rows (services.html)
   ========================================================================== */
.srow{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);
  padding:clamp(34px,4vw,48px) 0;border-top:1px solid var(--cream-200);align-items:start}
.srow:first-of-type{border-top:0;padding-top:0}
.srow .num{font-family:var(--disp);font-size:15px;color:var(--brass-600);letter-spacing:.14em}
.srow h2{font-size:var(--step3);margin:10px 0 12px}
.srow .incl{margin-top:6px}
.srow .incl li{display:flex;gap:12px;padding:10px 0;font-size:18px;
  color:var(--on-cream-dim);line-height:1.55}
.srow .incl svg{flex:none;width:18px;height:18px;color:var(--brass-600);margin-top:4px}
@media(max-width:820px){.srow{grid-template-columns:1fr;gap:18px}}

/* ==========================================================================
   forms
   ========================================================================== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:17px;font-weight:600;color:var(--on-cream)}
.field .hint{font-size:16px;color:var(--on-cream-dim);font-weight:400}
.field .req{color:var(--brass-600)}

.field input,.field select,.field textarea{
  font:inherit;font-size:var(--step-1);
  color:var(--on-cream);
  background:var(--cream-50);
  border:1px solid var(--field-line);
  border-radius:var(--r);
  padding:15px 16px;
  min-height:var(--tap);
  width:100%;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--brass-600)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brass-600);box-shadow:0 0 0 3px rgba(126,100,39,.18);outline:none}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"]{border-color:#9B2C1E;background:#FDF3F1}
.err{font-size:16px;color:#9B2C1E;font-weight:600;min-height:0}

.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.choice{display:flex;align-items:center;gap:11px;background:var(--cream-50);
  border:1px solid var(--field-line);border-radius:var(--r);padding:12px 14px;
  min-height:var(--tap);cursor:pointer;font-size:var(--step-1)}
.choice:hover{border-color:var(--brass-600)}
.choice input{width:23px;height:23px;accent-color:var(--green-700);flex:none;min-height:0}
.choice:has(input:checked){border-color:var(--brass-600);background:var(--cream-100)}
@media(max-width:640px){.choices{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}

/* honeypot — never visible, never announced */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-note{font-size:17px;color:var(--on-cream-dim);line-height:1.6;margin-top:6px}
.form-status{margin-top:18px;padding:18px 20px;border-radius:var(--r);font-size:var(--step0);
  display:none}
.form-status.is-ok{display:block;background:#EAF2EA;border:1px solid #B9D2BC;color:#1B4527}
.form-status.is-err{display:block;background:#FDF3F1;border:1px solid #E4B7B0;color:#7E2418}

.form-panel{background:var(--cream-100);border:1px solid var(--cream-200);
  border-radius:var(--r);padding:clamp(24px,3.4vw,38px)}

/* ==========================================================================
   contact aside
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,52px);
  align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

.dl{display:grid;gap:22px}
.dl>div{display:grid;gap:4px}
.dl dt{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--brass-300)}
.dl dd{font-size:var(--step1);line-height:1.5}
.dl a{text-decoration:none;border-bottom:1px solid rgba(198,162,74,.4);padding-bottom:1px}
.dl a:hover{border-bottom-color:var(--brass-400)}

/* ==========================================================================
   quote / closing
   ========================================================================== */
.quote{font-family:var(--disp);font-size:var(--step4);line-height:1.32;color:var(--brass-400);
  max-width:20ch;margin:0 auto}
.band--cream .quote,.band--cream-lt .quote{color:var(--green-800)}

/* ==========================================================================
   footer
   ========================================================================== */
.site-foot{background:var(--green-900);border-top:1px solid var(--rule-dark);
  padding:clamp(44px,5vw,64px) 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,48px)}
.foot-grid h4{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--brass-400);font-family:var(--sans);margin-bottom:14px}
.foot-grid a{text-decoration:none;color:var(--on-green-dim);font-size:18px}
.foot-grid a:hover{color:var(--brass-400)}
.foot-grid li+li{margin-top:10px}
.foot-grid p{font-size:18px;color:var(--on-green-dim);line-height:1.6}
.foot-brand .brand{margin-bottom:16px}
.foot-bot{margin-top:38px;padding-top:22px;border-top:1px solid var(--rule-dark);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:var(--step-2);color:rgba(195,208,197,.62)}
.foot-bot a{color:inherit}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:32px}}

/* ==========================================================================
   sticky mobile call bar
   ========================================================================== */
.callbar{display:none}
@media(max-width:720px){
  body{padding-bottom:80px}
  .callbar{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--green-850);border-top:1px solid var(--rule-dark);
    padding:10px var(--gut);box-shadow:0 -6px 22px rgba(8,32,15,.45);
  }
  .callbar .btn{flex:1;min-height:54px;font-size:16px}
}

/* ==========================================================================
   progressive disclosure — optional form detail
   Required fields stay to three. Everything that helps Emunah prepare but
   isn't needed to make contact sits behind this, visible to anyone who
   wants to give more. Fewer required fields = more submissions, and the
   rest gets gathered on the callback anyway.
   ========================================================================== */
.more-fields{border-top:1px solid var(--cream-200);margin-top:26px;padding-top:8px}
.more-fields summary{
  display:flex;align-items:center;gap:11px;
  min-height:var(--tap);cursor:pointer;
  font-size:17px;font-weight:600;color:var(--brass-600);
  list-style:none;
}
.more-fields summary::-webkit-details-marker{display:none}
.more-fields summary::before{
  content:"";flex:none;width:9px;height:9px;
  border:solid currentColor;border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s;
}
.more-fields[open] summary::before{transform:rotate(-135deg) translate(-3px,-3px)}
.more-fields summary:hover{color:var(--green-800)}
.more-fields .form-grid{margin-top:16px;padding-bottom:6px}

.choices--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.choices--3{grid-template-columns:1fr}}

/* reassurance line under a submit button */
.assure-line{
  display:flex;align-items:flex-start;gap:11px;margin-top:16px;
  font-size:17px;line-height:1.5;color:var(--on-cream-dim);
}
.assure-line svg{flex:none;width:21px;height:21px;color:var(--brass-600);margin-top:2px}
.band--green .assure-line,.band--deep .assure-line{color:var(--on-green-dim)}
.band--green .assure-line svg,.band--deep .assure-line svg{color:var(--brass-400)}

/* scheduling-model cards (hourly / live-in / hybrid) */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.model{background:rgba(198,162,74,.07);border:1px solid var(--rule-dark);
  border-radius:var(--r);padding:26px 24px 28px}
.model b{display:block;font-family:var(--disp);font-size:var(--step2);
  color:var(--brass-400);font-weight:400;margin-bottom:8px}
.model p{font-size:18px;line-height:1.6;color:var(--on-green-dim)}
@media(max-width:820px){.models{grid-template-columns:1fr}}

/* ==========================================================================
   full-bleed photo hero

   The reference site (agapeelitecare.com) puts white text straight onto a
   busy photo with no scrim — the headline lands on the subject's face and is
   barely readable. The idea is right, the execution isn't. So: same big
   emotional photo, but a directional scrim guarantees the text zone stays
   dark enough for AA contrast no matter what the image does behind it.
   ========================================================================== */
.hero-big{
  position:relative;
  display:flex;align-items:center;
  min-height:min(78vh,660px);
  overflow:hidden;
  background:var(--green-850);
}
.hero-big picture,.hero-big img{position:absolute;inset:0;width:100%;height:100%}
.hero-big img{object-fit:cover;object-position:64% 50%}

/* Left-weighted scrim. Opacity where the copy sits never drops below ~.86,
   which holds contrast even against the lightest part of the photograph. */
.hero-big::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(94deg,
    rgba(10,37,25,.97) 0%,
    rgba(10,37,25,.96) 50%,
    rgba(10,37,25,.90) 62%,
    rgba(10,37,25,.42) 80%,
    rgba(10,37,25,.12) 100%);
}
.hero-big .wrap{position:relative;z-index:1}
.hero-big h1,.hero-big .kicker,.hero-big .lede,.hero-big .meta{
  text-shadow:0 1px 2px rgba(8,32,15,.5);   /* tight edge only — a wide blur
    under light-on-dark ADDS halation, which is what the scrim exists to avoid */
}

.hero-big .inner{max-width:600px;padding:clamp(52px,7vw,86px) 0}
.hero-big .branch{margin:0 0 22px}
.hero-big .kicker{margin-bottom:14px}
.hero-big .kicker span{display:block}
.hero-big h1{max-width:16ch}
.hero-big .lede{margin-top:20px;color:var(--on-green-dim);max-width:46ch}
.hero-big .btn-row{margin-top:32px}
.hero-big .meta{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--rule-dark);
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--on-green-dim);display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}

/* On narrow screens the copy spans the full width, so the scrim goes
   vertical — a horizontal one would leave text sitting on bare photo. */
@media(max-width:820px){
  .hero-big{min-height:0}
  .hero-big img{object-position:60% 45%}
  .hero-big::after{
    background:linear-gradient(178deg,
      rgba(10,37,25,.90) 0%,
      rgba(10,37,25,.93) 55%,
      rgba(10,37,25,.96) 100%);
  }
  .hero-big .inner{max-width:none;padding:44px 0 48px}
  .hero-big .branch{margin:0 auto 20px}
  .hero-big .lede{max-width:none}
}

/* ==========================================================================
   craft pass — 2026-08-15
   ========================================================================== */

/* Fallback faces with matched metrics. Without these the webfont swap
   reflows every paragraph on load, which is visible layout shift and reads
   as amateurish before a single word is read. Metrics are approximations
   for Arial/Georgia — good enough to remove most of the shift, not exact. */
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  size-adjust:107%; ascent-override:90%; descent-override:22.4%; line-gap-override:0%;
}
@font-face{
  font-family:"Marcellus Fallback";
  src:local("Georgia"),local("Times New Roman"),local("Liberation Serif");
  size-adjust:101%; ascent-override:92%; descent-override:24%; line-gap-override:0%;
}
:root{
  --disp:"Andada Pro","Marcellus Fallback",Georgia,serif;  /* headings — TRUE lowercase */
  --logo:"Cinzel","Marcellus Fallback",Georgia,serif;      /* wordmark only — small caps by design */
  --sans:"Public Sans","Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Hover states must be gated. On a touch device an ungated :hover sticks
   after a tap and the element stays in its hover state until you tap
   elsewhere — a real bug on the phones most of this traffic arrives on. */
@media (hover:none),(pointer:coarse){
  .btn:hover,.nav a:hover,.head-tel:hover,.card a.more:hover,
  .foot-grid a:hover,.dl a:hover,.choice:hover,.more-fields summary:hover,
  .field input:hover,.field select:hover,.field textarea:hover{
    background-color:revert;border-color:revert;color:revert;
  }
}

/* outline doesn't follow border-radius; box-shadow does. Keep outline as the
   forced-colors/high-contrast fallback. */
:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:0 0 0 3px var(--green-800),0 0 0 6px var(--brass-300);
}
.band--cream :focus-visible,.band--cream-lt :focus-visible,.form-panel :focus-visible{
  box-shadow:0 0 0 3px var(--cream-50),0 0 0 6px var(--brass-600);
}
@media (forced-colors:active){
  :focus-visible{outline:3px solid CanvasText;box-shadow:none}
}

/* Decorative marks must never eat a click or land in the tab order. */
.branch,.pillar svg,.card .ico,.step .n,.checks svg,.assure-line svg{
  pointer-events:none;
}

/* Section rhythm. Uniform vertical padding on every band is what makes a page
   read as a generated stack — the eye picks up the repeating beat even when
   the content differs. Give the page a cadence instead. */
.band--tall{padding:clamp(72px,9vw,124px) 0}
.band--short{padding:clamp(40px,4.5vw,60px) 0}

/* Prices, phone numbers and any figure that would otherwise jitter. */
.dl dd,.hero-big .meta,.foot-grid a[href^="tel"]{font-variant-numeric:tabular-nums}

/* Footer section headings are h2 for a correct outline (they were h4, which
   skipped levels and failed heading-order). Visual weight unchanged. */
.foot-grid .foot-h{
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-300);margin-bottom:14px;line-height:1.2;
}

/* ==========================================================================
   modern CSS pass — 2026-08-15
   Applied selectively. Deliberately NOT used: backdrop-filter (forces a GPU
   pass every scroll frame and cuts text contrast — the classic cause of janky
   scrolling on the 5-year-old phones this audience actually owns), and
   scroll-driven animations (motion sensitivity rises with age, and an
   unguarded animation-timeline can leave content permanently invisible in
   Firefox). Both are the current fashion and both are the wrong fit here.
   ========================================================================== */

/* Headline rag control. The single highest quality-per-character change on
   the list: `balance` evens line lengths on short blocks, `pretty` kills
   orphaned last words in paragraphs. Unknown values fall back to normal
   wrapping, so there is no downside anywhere. */
h1,h2,h3,.kicker,.quote,.card h3,.model b,.sec-head p,.step h3{
  text-wrap:balance;
}
p,li,.lede,.card p,.step p,.srow .incl li{
  text-wrap:pretty;
}

/* Cards in a row have titles of different lengths, so their body copy and
   "What's included" links used to sit at different heights and the row read
   as broken. Subgrid puts every card's rows on shared lines.
   Scoped with :has() to the card sets that actually share a 4-part structure;
   the two-part cards on About and Careers are left alone. */
@supports (grid-template-rows:subgrid){
  .cards:has(.card .more) .card{
    display:grid;
    grid-row:span 4;
    grid-template-rows:subgrid;
    gap:0;
    align-content:start;
  }
  .cards:has(.card .more) .card h3{margin:14px 0 9px}
  .cards:has(.card .more) .card .more{align-self:end}
}

/* The optional-details disclosure on the contact form now animates instead of
   snapping. Degrades to an instant open, which is today's behaviour. */
/* Opacity only — animating to auto height needs interpolate-size, which is
   Chromium-only, and a height animation that works for under half the
   audience is not worth the complexity. */
@supports selector(::details-content){
  .more-fields::details-content{
    opacity:0;
    transition:opacity .25s ease,content-visibility .25s allow-discrete;
  }
  .more-fields[open]::details-content{opacity:1}
}

/* Cross-document view transitions. Two lines, no JavaScript, works on a plain
   static multi-page site, and degrades to an ordinary navigation in Firefox.
   Kept to a short cross-fade — an elaborate page transition reads as "this
   site is slow" to a less web-fluent visitor. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 140ms ease both}
::view-transition-new(root){animation:vt-in 180ms ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
.site-head{view-transition-name:site-head}
.site-foot{view-transition-name:site-foot}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(*),::view-transition-new(*){animation:none}
}

/* Trims the font's half-leading so buttons and headings optically centre.
   Purely cosmetic, no layout risk where unsupported. */
@supports (text-box:trim-both cap alphabetic){
  h1,h2,.btn,.kicker{text-box:trim-both cap alphabetic}
}

/* ==========================================================================
   POLARITY INVERSION — 2026-08-15
   Cream is now the ground; deep green is punctuation.

   Why: three studies (Piepenbrock et al., Ergonomics 2013/2014, Human Factors
   2014) find a positive-polarity advantage — dark text on light — that holds
   FOR OLDER READERS TOO, and grows as text gets smaller. The mechanism is
   measured: intraocular straylight follows log(s)=c+log(1+(age/65)^4), so it
   doubles by 65 and triples by 77, and it varies INDEPENDENTLY of acuity.
   A 68-year-old with perfect corrected vision still has roughly double the
   halation of a 40-year-old. Astigmatism, which smears bright glyphs into
   streaks, affects 45.6% of adults in the Americas.

   It also matches the category: Aman (#F3EEE7), Function Health (#FEF9EF),
   Soho House, Oura and Eight Sleep are all warm-paper grounds using dark as
   SECTIONS, not as the page.

   Green keeps the hero, the closing CTA, the footer, the contact aside and
   every image scrim — so the brand still reads as Emunah.
   ========================================================================== */

body{background:var(--cream-100);color:var(--on-cream)}

h1,h2,h3{color:var(--green-800)}

/* .hero-big is a dark island but carries no band-- class, so without this it
   inherits the cream-context ink and the headline vanishes into the photo. */
.hero-big{color:var(--on-green)}
.dim{color:var(--on-cream-dim)}
.eyebrow{color:var(--brass-600)}
.branch{color:var(--brass-600)}
.hairline{background:var(--cream-300)}
.quote{color:var(--green-800)}
.kicker{color:var(--brass-600)}
.checks li{border-color:var(--cream-200)}
.checks li:first-child{border-top-color:var(--cream-200)}
.checks svg{color:var(--brass-600)}
.step .n{background:var(--cream-200);color:var(--green-800)}
.assure-line{color:var(--on-cream-dim)}
.assure-line svg{color:var(--brass-600)}
.tbc{color:var(--brass-600);background:rgba(198,162,74,.13)}
.models{margin-top:34px}
.model{background:var(--cream-50);border-color:var(--cream-200)}
.model b{color:var(--green-800)}
.model p{color:var(--on-cream-dim)}
.btn--line{color:var(--green-800);border-color:var(--field-line)}
.btn--line:hover{background:var(--cream-200);border-color:var(--brass-600)}

/* --- the dark islands ---------------------------------------------------- */
.band--green,.band--deep{color:var(--on-green)}
.band--green h2,.band--deep h2,.band--green h3,.band--deep h3,
.hero-big h2,.hero-big h3{color:var(--brass-400)}
.band--green h1,.band--deep h1,.hero-big h1{color:var(--on-green)}
.band--green .dim,.band--deep .dim,.hero-big .dim{color:var(--on-green-dim)}
.band--green .eyebrow,.band--deep .eyebrow,.hero-big .eyebrow{color:var(--brass-300)}
.band--green .branch,.band--deep .branch,.hero-big .branch{color:var(--brass-400)}
.band--green .hairline,.band--deep .hairline,.hero-big .hairline{background:var(--rule-dark)}
.band--green .quote,.band--deep .quote{color:var(--brass-400)}
.hero-big .kicker{color:var(--brass-400)}
.band--green .checks li,.band--deep .checks li{border-color:var(--rule-dark)}
.band--green .checks li:first-child,.band--deep .checks li:first-child{border-top-color:var(--rule-dark)}
.band--green .checks svg,.band--deep .checks svg{color:var(--brass-400)}
.band--green .step .n,.band--deep .step .n{background:rgba(198,162,74,.16);color:var(--brass-400)}
.band--green .assure-line,.band--deep .assure-line,.hero-big .assure-line{color:var(--on-green-dim)}
.band--green .assure-line svg,.band--deep .assure-line svg,
.hero-big .assure-line svg{color:var(--brass-400)}
.band--green .tbc,.band--deep .tbc,.hero-big .tbc,
.site-head .tbc,.site-foot .tbc{color:var(--brass-300);background:rgba(198,162,74,.14)}
.band--green .model,.band--deep .model{background:rgba(198,162,74,.07);border-color:var(--rule-dark)}
.band--green .model b,.band--deep .model b{color:var(--brass-400)}
.band--green .model p,.band--deep .model p{color:var(--on-green-dim)}
.band--green .btn--line,.band--deep .btn--line,.hero-big .btn--line{
  color:var(--brass-300);border-color:rgba(216,183,95,.55);background:transparent;
}
.band--green .btn--line:hover,.band--deep .btn--line:hover,.hero-big .btn--line:hover{
  background:rgba(198,162,74,.12);border-color:var(--brass-300);
}

/* Focus ring: cream is now the common ground, so that is the default. */
:focus-visible{box-shadow:0 0 0 3px var(--cream-50),0 0 0 6px var(--brass-600)}
.band--green :focus-visible,.band--deep :focus-visible,
.hero-big :focus-visible,.site-head :focus-visible,.site-foot :focus-visible{
  box-shadow:0 0 0 3px var(--green-800),0 0 0 6px var(--brass-300);
}

/* ==========================================================================
   spacing + polarity corrections — after looking at 1280px
   ========================================================================== */

/* The container was max-width 1280 with a 24px pad, so at a 1280px viewport —
   one of the two commonest laptop sizes — content ran effectively edge to
   edge while a 1440 screen got 80px of air. That inconsistency is what reads
   as "cramped on my laptop". The gutter now scales with the viewport so the
   margin is real at every width. */
:root{--gut:clamp(20px,4.6vw,72px)}

/* Trust pillars moved onto cream but kept their dark-ground colours, which
   made the supporting line nearly invisible and erased the dividers. */
.pillar{border-left-color:var(--cream-200)}
.pillar svg{color:var(--brass-600)}
.pillar b{color:var(--green-800)}
.pillar span{color:var(--on-cream-dim)}
@media(max-width:820px){
  .pillar{border-top-color:var(--cream-200)}
  .pillar:nth-child(even){border-left-color:var(--cream-200)}
  .pillar:nth-child(2){border-top-color:var(--cream-200)}
}
.band--green .pillar,.band--deep .pillar{border-left-color:var(--rule-dark)}
.band--green .pillar svg,.band--deep .pillar svg{color:var(--brass-400)}
.band--green .pillar b,.band--deep .pillar b{color:var(--on-green)}
.band--green .pillar span,.band--deep .pillar span{color:var(--on-green-dim)}

/* The pillars strip sits between the hero and the first content band; without
   a boundary it dissolves into the section below it. */
.pillars-strip{border-bottom:1px solid var(--cream-200)}

/* Card top-rule was brass-400, which is a dark-ground value. */
.card::before{background:linear-gradient(90deg,var(--brass-600),transparent)}

/* Two adjacent bands of the SAME ground stack their vertical padding, so the
   join reads as one large void rather than two sections. Collapse only that
   seam — a blanket `.band + .band` rule outranks the tall/short modifiers and
   flattens the deliberate rhythm, which is the opposite of the goal. */
.band--cream + .band--cream,
.band--cream-lt + .band--cream-lt{padding-top:clamp(28px,3vw,44px)}

/* ==========================================================================
   hero geometry fix
   .hero-big is display:flex, so .wrap became a flex ITEM and shrank to its
   content — 718px inside a 1280px viewport — instead of filling the hero and
   centring. That, plus a stack taller than the viewport, is what read as
   cramped: a narrow column of copy jammed into the left of a screen-filling
   block with nothing visible below it.
   ========================================================================== */
.hero-big > .wrap{width:100%;flex:1 1 auto}

/* Give the copy a little more room and let the headline settle on fewer
   lines, then tighten the vertical stack so the hero stops overflowing an
   800px-tall laptop screen. */
.hero-big .inner{max-width:660px;padding:clamp(44px,5.2vw,74px) 0}
.hero-big h1{max-width:17ch}
.hero-big .branch{width:clamp(150px,16vw,200px);margin-bottom:18px}
/* The kicker and the headline are both display type; at 12px apart they
   collided. Separate them properly and let the kicker sit back a little so
   the H1 is unambiguously the loudest thing in the hero. */
.hero-big .kicker{margin-bottom:26px;font-size:clamp(22px,2.1vw,27px);line-height:1.35}
.hero-big .lede{margin-top:18px}
.hero-big .btn-row{margin-top:28px}
.hero-big .assure-line{margin-top:16px}
.hero-big .meta{margin-top:26px;padding-top:18px}

/* ==========================================================================
   Split hero — copy on solid ground, photograph untouched.

   A scrim over the copy zone always degrades the photograph, and it only
   works if the image happens to be dark where the text lands. That is a
   fragile dependency: it breaks the moment the client sends their own
   photos. So above 900px the hero becomes two real columns — the copy sits
   on solid green, the photograph occupies its own column at full fidelity,
   and a short gradient softens the seam between them.

   Contrast becomes structural rather than something to re-measure per image.
   (Technique after Inspir, via the care-brand teardown.)
   ========================================================================== */
@media(min-width:900px){
  .hero-big{
    display:grid;
    grid-template-columns:minmax(0,57fr) minmax(0,43fr);
    align-items:stretch;
    min-height:min(70vh,600px);
    background:var(--green-800);
  }
  .hero-big picture{position:relative;inset:auto;grid-area:1/2;width:100%;height:100%;display:block}
  .hero-big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 52%}

  /* the scrim now only softens the seam; it no longer covers the copy */
  .hero-big::after{
    grid-area:1/2;
    background:linear-gradient(90deg,var(--green-800) 0%,rgba(14,51,37,.55) 14%,rgba(14,51,37,0) 34%);
  }

  .hero-big > .wrap{
    grid-area:1/1;
    display:flex;align-items:center;
    max-width:none;width:100%;
    /* keep the copy aligned to the page gutter, not to the column edge */
    padding-left:max(var(--gut),calc((100vw - var(--w)) / 2 + var(--gut)));
    padding-right:clamp(32px,4vw,64px);
  }
  .hero-big .inner{max-width:none;padding:clamp(44px,4.6vw,66px) 0}
  /* 60px was sized for a full-width hero; in a split column it forces three
     ragged lines. Step it down so the headline sets on two. */
  .hero-big h1{font-size:clamp(34px,3.8vw,48px);max-width:22ch}
  .hero-big .lede{max-width:44ch;font-size:clamp(18px,1.6vw,21px)}
  .hero-big .kicker{font-size:clamp(20px,1.8vw,24px);margin-bottom:20px}
  /* copy is on solid ground now — the shadow is no longer earning anything */
  .hero-big h1,.hero-big .kicker,.hero-big .lede,.hero-big .meta{text-shadow:none}
}