/* ==========================================================================
   Helpline page only (helpline.html) — load after styles.css and inner.css
   ========================================================================== */
.lead{max-width:760px;margin:0 auto 60px;text-align:center}
.lead .tag{display:inline-block;margin-bottom:16px;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#10143a;background:#e8b960;padding:6px 16px;border-radius:99px}
.lead h2{font-size:clamp(2rem,5vw,3.4rem);margin:0 0 14px}
.lead p{margin:0;font-weight:300;font-size:1.1rem;color:var(--mute)}

.group{margin:0 0 22px;display:flex;align-items:center;gap:16px;font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.group::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(232,185,96,.5),transparent)}

/* "When …, phone …" cards */
.numbers{list-style:none;margin:0 0 70px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.num{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;padding:24px 24px 20px;border-radius:22px;color:#f5f0e6;background:linear-gradient(160deg,#2b3299 0%,#1d2358 52%,#10143a 100%);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 40px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .3s,border-color .3s,box-shadow .3s}
.num::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#e8b960,transparent)}
.num:hover{transform:translateY(-5px);border-color:rgba(232,185,96,.6);box-shadow:0 28px 50px -22px rgba(232,185,96,.35),inset 0 1px 0 rgba(255,255,255,.24)}
.num .when{font-size:.66rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#e8b960}
.num p{margin:6px 0 0;font-family:var(--serif);font-weight:700;font-size:1.55rem;line-height:1.2}
.dial{margin-top:auto;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:9px 18px 9px 10px;border-radius:99px;text-decoration:none;font-weight:600;font-size:.92rem;color:#10143a;background:#e8b960;transition:.25s}
.dial i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#10143a;color:#e8b960}
.dial svg{width:15px;height:15px}
.dial:hover{background:#fff2c9;transform:translateX(3px)}
.dial:hover i{animation:ring .5s ease 2}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg)}75%{transform:rotate(18deg)}}

/* alternate numbers: lighter cards */
.numbers.alt{margin-bottom:60px}
.numbers.alt .num{min-height:0;background:var(--card);color:var(--ink);border-color:var(--line)}
.numbers.alt .num p{font-size:1.3rem}

/* closing notice, like a phone-directory ticket */
.notice{position:relative;max-width:820px;margin:0 auto;padding:40px clamp(24px,5vw,56px);text-align:center;border-radius:28px;border:1px dashed rgba(232,185,96,.6);background:color-mix(in srgb,var(--gold) 7%,transparent)}
.notice p{margin:0 0 6px;font-size:.82rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);line-height:1.7}
.notice .big{margin:26px 0 0;font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.3rem);letter-spacing:.04em;line-height:1.25;text-transform:uppercase;color:var(--gold)}

@media(prefers-reduced-motion:reduce){.dial:hover i{animation:none}}
@media(max-width:600px){.numbers{grid-template-columns:1fr}}