/* ============================================================
   The front door (AK 2026-09-14)
   "You don't need to know what service you need. Tell Clara what's
   happening." One sentence on top, the door, then four paths.
   Loaded after style.css so it can extend the 4A system without
   touching the shared stylesheet's tested rules.
   ============================================================ */

/* ---------- home hero: the one sentence ---------- */
.hero--door h1.onesent{
  font-size:clamp(2.1rem, 3.9vw, 3.5rem); line-height:1.02; letter-spacing:.005em;
  max-width:24ch;
}
.hero--door h1.onesent .solid{ color:var(--white); }
.hero--door h1.onesent .soft{ color:var(--ice); }
@media (max-width:1200px), (hover:none) and (pointer:coarse){
  .hero--door h1.onesent{ font-size:calc(clamp(1.55rem, 6.4vw, 2.3rem) / var(--tz)); max-width:none; }
}

/* the proposition, set as the second loudest thing on the page */
.hero--door #door-prop{
  max-width:640px; margin-top:26px;
  font-family:var(--f-display); font-weight:500; line-height:1.2;
  font-size:clamp(1.3rem, 2.4vw, 1.85rem); color:var(--white);
}
.hero--door #door-prop b{ color:var(--ember-hi); font-weight:600; }

.helpnow .num{ white-space:nowrap; }
.helpnow .tg{ margin-top:8px; font-size:.95rem; color:#41525f; }
.helpnow .tg a{ color:var(--ember-ink); font-weight:600; text-decoration:underline; }
.helpnow .more{ display:inline-block; margin-top:12px; font-size:.9rem; color:var(--ghost); font-weight:500; }

/* desktop and unfolded Fold: sentence left, the door riding alongside */
@media (min-width:900px){
  .hero--door .wrap{
    display:grid; grid-template-columns:minmax(0,1fr) 400px;
    grid-template-rows:auto auto 1fr; column-gap:52px; align-items:start;
  }
  .hero--door .helpnow .num{ font-size:2.35rem; }
  .hero--door .kicker{ grid-column:1 / -1; }
  .hero--door h1.onesent{ grid-column:1; grid-row:2; }
  .hero--door #door-prop{ grid-column:1; grid-row:3; align-self:start; }
  .hero--door .helpnow{ grid-column:2; grid-row:2 / span 2; margin-top:4px; max-width:none; }
  .hero--door .paths-head, .hero--door .paths, .hero--door .depth-h,
  .hero--door .depth-sub, .hero--door .claim, .hero--door .punch,
  .hero--door .cta, .hero--door .hero-stats{ grid-column:1 / -1; }
}

/* ---------- the four paths ---------- */
.paths-head{ margin-top:64px; }
.paths{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:16px; margin-top:22px;
}
.path{
  display:flex; flex-direction:column;
  padding:22px 22px 20px;
  background:rgba(22,34,46,.62);
  border:1px solid rgba(116,157,196,.34); border-top:4px solid var(--steel);
}
.path:nth-child(1){ border-top-color:var(--ember); }
.path:nth-child(2){ border-top-color:var(--ice); }
.path:nth-child(3){ border-top-color:var(--steel); }
.path:nth-child(4){ border-top-color:var(--ghost); background:rgba(22,34,46,.85); }
.path .pl{
  font-family:var(--f-label); font-weight:600; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim-dark);
}
.path h3{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:1.45rem; line-height:1.04; letter-spacing:.01em; color:var(--white);
  margin:10px 0 10px;
}
.path p{ font-size:.93rem; line-height:1.6; color:var(--dim-dark); }
.path p b{ color:var(--white); font-weight:500; }
.path .links{
  margin-top:auto; padding-top:18px;
  display:flex; flex-wrap:wrap; gap:10px 18px;
}
.path .links a{
  font-family:var(--f-label); font-weight:600; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ice); text-decoration:none;
  border-bottom:2px solid var(--steel); padding-bottom:3px;
}
.path .links a:hover{ color:var(--ember-hi); border-color:var(--ember-hi); }
.path:nth-child(1) .links a:first-child{ color:var(--ember-hi); border-color:var(--ember); }
.path .tag{ margin:4px 0 0 4px; vertical-align:2px; color:var(--dim-dark); border-color:rgba(168,191,206,.5); }

/* ---------- the long-term answer, still inside the hero ---------- */
.depth-h{
  margin-top:72px; font-size:clamp(2.2rem, 5.6vw, 5rem);
  padding-top:40px; border-top:1px solid rgba(116,157,196,.28);
}
.depth-h .solid{ color:var(--white); }
.depth-sub{ max-width:640px; color:var(--dim-dark); font-size:1.06rem; margin-top:24px; }
.depth-sub b{ color:var(--white); font-weight:500; }
@media (max-width:1200px), (hover:none) and (pointer:coarse){
  .depth-h{ font-size:calc(clamp(1.8rem, 7.4vw, 2.6rem) / var(--tz)); margin-top:56px; padding-top:32px; }
  .paths-head{ margin-top:48px; }
}

/* ---------- House of Brass: a door for young people and parents ---------- */
.helpnow.door-hob{ margin-top:40px; }
.helpnow .door-lead{
  font-family:var(--f-display); font-weight:500; line-height:1.2;
  font-size:clamp(1.2rem, 2.2vw, 1.55rem); color:var(--ink); margin-bottom:10px;
}
.helpnow .door-lead b{ color:var(--ember-ink); font-weight:600; }

/* ---------- footer strip: the door first, the numbers after ---------- */
.crisis-door{
  flex-basis:100%; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 26px;
  padding-bottom:16px; border-bottom:1px solid rgba(116,157,196,.2);
}
.crisis-door .cd-prop{
  font-family:var(--f-display); font-weight:500; font-size:1.2rem; line-height:1.25; color:var(--white);
}
.crisis-door .cd-prop b{ color:var(--ember-hi); font-weight:600; }
.crisis-door .cd-note{ font-size:.82rem; color:var(--dim-dark); }
@media (max-width:599px){
  .crisis-door{ gap:6px 18px; }
  .crisis-door .cd-prop{ flex-basis:100%; }
}