/* ============================================================================
   SHERBIN hub.css — the hub-page layer, loaded AFTER styles.css.
   Shared by all five hubs (/ear /nose /throat /facial-plastic-surgery
   /hearing-aids). Chrome, tokens, buttons, team, faq and close bands come
   from styles.css; this file only adds the hub-specific bands:
   hero · symptom chips + Ask · patient-journey rail · when-not-to-wait.
   Same idiom throughout: hard corners, gold as line, navy-tinted depth.
   ============================================================================ */

/* ---- hub hero (navy, short, carries the 60-word answer) ------------------- */
.hub-hero{position:relative;background:var(--navy-900);overflow:hidden}
.hub-hero::after{content:"";position:absolute;inset:0;background:var(--noise);background-size:200px;opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.hub-hero__img{position:absolute;inset:0;z-index:0}
.hub-hero__img img{width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.hub-hero__img::after{content:"";position:absolute;inset:0;background:
  var(--corner-d),
  linear-gradient(78deg,rgba(5,15,28,.94) 16%,rgba(7,30,54,.72) 52%,rgba(7,30,54,.38) 82%),
  linear-gradient(180deg,rgba(5,15,28,.74),rgba(5,15,28,.2) 20%,transparent 44%,transparent 66%,rgba(5,15,28,.55))}
.hub-hero .w{position:relative;z-index:2;padding-top:calc(var(--hd-h) + 30px);padding-bottom:72px}
.crumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 10px;font:600 11px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--sky-300)}
.crumbs a,.crumbs span[aria-current]{white-space:nowrap}
.crumbs a{color:var(--sky-300);transition:color var(--t-fast)}
.crumbs a:hover{color:var(--gold-400)}
.crumbs span[aria-hidden]{color:var(--gold-400)}
.crumbs span[aria-current]{color:#fff}
.hub-hero__eyebrow{margin-top:30px}
.hub-hero h1{color:#fff;font-size:clamp(38px,4.4vw,60px);margin-top:18px;letter-spacing:-.02em;max-width:16ch}
.hub-hero__lead{position:relative;margin-top:26px;padding-top:24px;max-width:62ch;color:var(--sky-200);font-size:16.5px;line-height:1.75}
.hub-hero__lead::before{content:"";position:absolute;top:0;left:0;width:46px;height:2px;background:var(--gold-400)}
.hub-hero__actions{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}

/* ---- symptom chips + the Ask row (bone) ----------------------------------- */
.hub-sym{background:radial-gradient(78% 62% at 0% 0%, rgba(7,30,54,.075), rgba(7,30,54,0) 68%),var(--bone);color:var(--ink);padding:92px 0 76px;position:relative}
.hub-sym::after{content:"";position:absolute;inset:0;background:var(--noise);background-size:200px;opacity:.03;mix-blend-mode:multiply;pointer-events:none}
.hub-sym .w{position:relative;z-index:1}
.hub-sym__head{max-width:64ch}
.hub-sym__head h2{font-size:clamp(28px,3.4vw,44px);color:var(--ink);margin-top:var(--sp-3)}
.hub-sym__intro{color:var(--muted);font-size:16px;line-height:1.7;margin-top:14px;max-width:var(--measure)}
.symgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.symchip{display:flex;flex-direction:column;justify-content:space-between;gap:14px;background:var(--paper);border:1px solid var(--edge-l);border-top:2px solid var(--ink);padding:22px 24px;box-shadow:var(--e1);transition:transform var(--t-fast) var(--ease),border-color var(--t-fast),box-shadow var(--t-fast) var(--ease)}
.symchip:hover{transform:translateY(-2px);border-color:var(--marine-600);border-top-color:var(--gold-500);box-shadow:var(--e2)}
.symchip b{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.35;color:var(--ink);letter-spacing:-.01em}
.symchip span{font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);display:inline-flex;align-items:center;gap:7px}
.symchip span i{font-style:normal;transition:transform var(--t-fast) var(--ease)}
.symchip:hover span i{transform:translateX(4px)}
/* the Ask row: light ground, the rust mark, marine focus edge */
.hub-ask{margin-top:34px;max-width:660px}
.hub-ask label{display:block;font:600 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* The ask band's bar is the standardized .sbar (styles.css); this file only
   spaces it under the band's label. */
.hub-ask .sbar{margin-top:var(--sp-3)}
.hub-ask__fine{font-size:12.5px;color:var(--muted);margin-top:10px}

/* ---- the patient journey (bone continues; numbered stations) -------------- */
.hub-journey{background:radial-gradient(78% 62% at 100% 100%, rgba(7,30,54,.06), rgba(7,30,54,0) 68%),var(--bone);color:var(--ink);padding:0 0 var(--sp-24);position:relative}
.hub-journey__head{max-width:60ch;padding-top:10px}
.hub-journey__head h2{font-size:clamp(28px,3.4vw,44px);color:var(--ink);margin-top:var(--sp-3);max-width:22ch}
.stop{display:grid;grid-template-columns:200px 1fr;gap:48px;padding:40px 0;border-bottom:1px solid var(--edge-l)}
.stop:first-of-type{border-top:2px solid var(--ink);margin-top:40px}
.stop__side{display:flex;flex-direction:column;gap:9px}
.stop__no{font-family:var(--display);color:var(--gold-600);font-size:26px;line-height:1}
.stop__k{font:600 11px/1.5 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.stop__body h3{font-size:clamp(22px,2.4vw,28px);color:var(--ink);letter-spacing:-.012em}
.stop__p{color:var(--muted);font-size:15.5px;line-height:1.75;margin-top:12px;max-width:62ch}
.stop__ln{color:var(--marine-700);font-weight:600;border-bottom:1px solid var(--gold-500)}
.stop__ln:hover{color:var(--marine-600)}
.stop__idx{margin-top:18px;border-top:1px solid var(--edge-l)}
.stop__idx a{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--edge-l);color:var(--ink);transition:padding-left var(--t-fast) var(--ease)}
.stop__idx a:hover{padding-left:var(--sp-2)}
.stop__t{font-family:var(--display);font-size:20px}
.stop__t small{display:block;font-family:var(--body);font-size:13px;color:var(--muted);margin-top:4px;line-height:1.55;max-width:66ch}
.stop__arw{color:var(--muted);opacity:0;transition:opacity var(--t-fast),color var(--t-fast)}
.stop__idx a:hover .stop__arw{opacity:1;color:var(--gold-600)}
.stop__links{margin-top:16px;display:flex;gap:26px;flex-wrap:wrap}
.stop__links a{color:var(--marine-700);font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--gold-500);padding-bottom:4px;transition:color var(--t-fast)}
.stop__links a:hover{color:var(--marine-600)}
.stop__links a span{color:var(--gold-600)}

/* ---- when not to wait (navy) ---------------------------------------------- */
.flags{background:var(--corner-d),var(--navy-900);color:#fff;padding:var(--pad-quiet) 0;position:relative}
.flags::after{content:"";position:absolute;inset:0;background:var(--noise);background-size:200px;opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.flags .w{position:relative;z-index:1}
.flags .kick{color:var(--sky-300)}
.flags__head h2{color:#fff;font-size:clamp(28px,3.4vw,42px);margin-top:var(--sp-3)}
.flags__list{margin-top:36px;border-top:1px solid var(--edge-d);max-width:820px}
.flags__list li{position:relative;padding:17px 0 17px 34px;border-bottom:1px solid var(--edge-d2);color:var(--sky-200);font-size:15.5px;line-height:1.65}
.flags__list li::before{content:"";position:absolute;left:2px;top:24px;width:11px;height:11px;border-top:2px solid var(--gold-400);border-right:2px solid var(--gold-400)}
.flags__note{margin-top:22px;color:var(--sky-300);font-size:13.5px;max-width:66ch;line-height:1.7}
.flags__note a{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--gold-400)}
.flags__note a:hover{color:var(--gold-300)}

/* team-band width variants: only the people who work the category.
   min-width guarded so styles.css's 1000px/720px stacking rules keep winning. */
@media (min-width:1001px){
  .team--3{grid-template-columns:repeat(3,1fr)}
  .team--2{grid-template-columns:repeat(2,1fr)}
  /* fewer columns means wider tiles; the 4/5 portrait crop would tower */
  .team--3 .member__ph{aspect-ratio:1/1}
  .team--2 .member__ph{aspect-ratio:16/10}
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:1200px){
  .symgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
  .stop{grid-template-columns:1fr;gap:18px;padding:32px 0}
  .stop__side{flex-direction:row;align-items:baseline;gap:14px}
}
@media (max-width:720px){
  .hub-hero .w{padding-top:calc(var(--hd-h) + 22px);padding-bottom:52px}
  .hub-hero__eyebrow{margin-top:22px}
  .hub-sym{padding:var(--sp-16) 0 52px}
  .symgrid{grid-template-columns:1fr;gap:10px;margin-top:26px}
  .symchip{padding:18px 20px;gap:10px}
  .symchip b{font-size:17.5px}
  .hub-journey{padding-bottom:var(--sp-16)}
  .stop:first-of-type{margin-top:26px}
  .stop__t small{max-width:none}
  .flags{padding:var(--sp-16) 0}
  .flags__list li::before{top:22px}
}