/* ==========================================================================
   Brand Design hub — BASE LAYER (services/brand-design.php)
   Shared .bdh-* primitives only. Section styles live in assets/css/brand/hub/<id>.css,
   loaded after this file. Tokens from core.css :root only; no new colours; no gradients
   except core .aurora/.dither and mask fades; no !important.

   CONVENTIONS FOR SECTION BUILDERS
   • Root: <section class="band [band--alt|band--ink] bdh-<id>" id="<id>" aria-labelledby="<id>-t">
     > .wrap. Inner ids prefixed "<id>-"; capability anchors "cap-<slug>". BEM .bdh-<short>__el.
     Band colours are fixed by the plan — do not change them.
   • Head: .bdh-head (stack) | .bdh-head--row (heading left, lead right) | .bdh-head--c (centred).
       <div class="bdh-head bdh-head--row" data-rv>
         <div><p class="lbl lbl--blue"><span class="dot"></span>Eyebrow</p>
              <h2 class="h2" id="<id>-t"><span class="g">Grey first phrase.</span> Ink rest.</h2></div>
         <div><p class="lead">Lead…</p> [optional .tl / control]</div>
       </div>
   • Fonts: var(--f-h) every heading/title · var(--f) eyebrows, indexes, figures, readouts, badges ·
     var(--f-b) everything else (never negative tracking). Blue never inside a heading.
   • One h1 (hero). h2 per section, h3 for cards/rows. Decorative mocks aria-hidden="true".
   • Spacing tokens (on .bdh): --bdh-gap card grids · --bdh-gap-l text↔visual · --bdh-block
     sub-blocks · --bdh-head-mb head → content · --bdh-hero-t hero top · --bdh-sticky.
   • Motion: loops are declared ONLY under .is-live (set by BDH.live / BDH.loop, never under
     reduced motion). Draw/grow start when an ancestor (or the element) gets .is-in.
     Animate transform/opacity only (+ color, stroke-dashoffset).
   ========================================================================== */

.bdh{
  --bdh-gap:clamp(20px,2.4vw,32px);
  --bdh-gap-l:clamp(40px,6vw,96px);
  --bdh-block:clamp(56px,7vw,112px);
  --bdh-head-mb:clamp(40px,5vw,72px);
  --bdh-hero-t:clamp(136px,16vh,196px);
  --bdh-sticky:120px;
}
.bdh :focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- section heads ------------------------------------------------ */
.bdh-head{display:flex;flex-direction:column;gap:18px;margin-bottom:var(--bdh-head-mb)}
.bdh-head .h2{max-width:20ch}
.bdh-head .lead{max-width:60ch}
.bdh-head--row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bdh-gap);row-gap:18px;align-items:end}
.bdh-head--row>:first-child{grid-column:1 / span 6;display:flex;flex-direction:column;gap:18px}
.bdh-head--row>:nth-child(2){grid-column:8 / 13;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.bdh-head--c{align-items:center;text-align:center;max-width:760px;margin-inline:auto}
.bdh-head--c .h2{margin-inline:auto}
.bdh-head--c .lead{text-align:center;margin-inline:auto}
@media (max-width:860px){
  .bdh-head--row{grid-template-columns:minmax(0,1fr)}
  .bdh-head--row>:first-child,.bdh-head--row>:nth-child(2){grid-column:1 / -1}
}
@media (max-width:600px){
  .bdh-head--c{align-items:flex-start;text-align:left;margin-inline:0}
  .bdh-head--c .h2,.bdh-head--c .lead{text-align:left;margin-inline:0}
}

/* ---------- 12-column grid ----------------------------------------------- */
.bdh-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bdh-gap);row-gap:var(--bdh-gap)}
.bdh-grid>*{min-width:0}   /* grid items may shrink below their content (tables, UI bars) */
/* spans set only the END (span N) so they combine with the start helpers below: class="bdh-c4 bdh-s9" = columns 9–12 */
.bdh-c3{grid-column-end:span 3}.bdh-c4{grid-column-end:span 4}.bdh-c5{grid-column-end:span 5}.bdh-c6{grid-column-end:span 6}
.bdh-c7{grid-column-end:span 7}.bdh-c8{grid-column-end:span 8}.bdh-c12{grid-column:1 / -1}
.bdh-s2{grid-column-start:2}.bdh-s6{grid-column-start:6}.bdh-s7{grid-column-start:7}.bdh-s8{grid-column-start:8}.bdh-s9{grid-column-start:9}
@media (max-width:860px){
  .bdh-c3,.bdh-c4,.bdh-c5,.bdh-c6,.bdh-c7,.bdh-c8,.bdh-c12,.bdh-s2,.bdh-s6,.bdh-s7,.bdh-s8,.bdh-s9{grid-column:1 / -1}
}
.bdh-sticky{position:sticky;top:var(--bdh-sticky)}
@media (max-width:1023px){.bdh-sticky{position:static}}

/* ---------- image frames + grade ----------------------------------------- */
/* <figure class="bdh-img bdh-img--r45"><img …></figure> — fixed ratio, cover, restrained cool grade. */
.bdh-img{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);background:var(--paper-4);isolation:isolate;max-width:100%}
.bdh-img--xl{border-radius:var(--r-xl)}
.bdh-img--r45{aspect-ratio:4/5}.bdh-img--r34{aspect-ratio:3/4}.bdh-img--r43{aspect-ratio:4/3}
.bdh-img--r169{aspect-ratio:16/9}.bdh-img--r219{aspect-ratio:21/9}.bdh-img--r11{aspect-ratio:1/1}
.bdh-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.03);transition:transform .9s var(--e)}
.bdh-img::after{content:"";position:absolute;inset:0;z-index:1;background:var(--blue-wash);mix-blend-mode:multiply;opacity:.6;pointer-events:none}
.bdh-img[data-bdh-parallax] img{top:-24px;bottom:auto;height:calc(100% + 48px)}   /* headroom for BDH.parallax (uses the CSS translate property) */
.bdh-zoom:hover .bdh-img img,.bdh-zoom:focus-within .bdh-img img,.bdh-img.bdh-zoom:hover img{transform:scale(1.04)}
.bdh-scrim{background:rgba(25,25,29,.5)}
/* solid caption chip sitting on a photo: <span class="bdh-cap-chip"><b>Label</b>Rule text</span> */
.bdh-cap-chip{position:relative;z-index:2;display:inline-flex;flex-direction:column;gap:4px;padding:8px 12px;border-radius:var(--r-sm);background:var(--paper);box-shadow:var(--sh-1);font-size:var(--t-xs);line-height:1.4;color:var(--txt);max-width:100%}
.bdh-cap-chip b{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- cards, type roles, lists, tags ------------------------------- */
.bdh-card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,36px);
  transition:transform var(--d2) var(--e),box-shadow var(--d2) var(--e),border-color var(--d2) var(--e)}
.bdh-card--lift:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.bdh-card--ink{background:var(--ink);border-color:var(--on-ink-line);color:var(--on-ink-2)}
.band--ink .bdh-card{background:var(--on-ink-card);border-color:var(--on-ink-line);color:var(--on-ink-2)}
@media (max-width:600px){.bdh-card{padding:22px}}

.bdh-idx{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.bdh-t{font-family:var(--f-h);font-size:1.1875rem;font-weight:500;line-height:1.25;letter-spacing:-.008em;color:var(--ink)}
.bdh-t--s{font-size:1rem}
.bdh-t--l{font-size:1.375rem;letter-spacing:-.012em}
.bdh-card--ink .bdh-t,.band--ink .bdh-t{color:var(--on-ink)}
.bdh-d{font-size:var(--t-sm);line-height:1.6;color:var(--muted);max-width:44ch}
.bdh-card--ink .bdh-d,.band--ink .bdh-d{color:var(--on-ink-2)}

.bdh-list>li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-block:14px;border-top:1px solid var(--line-2);font-size:var(--t-sm);line-height:1.45;color:var(--ink)}
.bdh-list>li:last-child{border-bottom:1px solid var(--line-2)}
.bdh-list small{flex:none;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.08em;text-transform:uppercase;text-align:right;color:var(--faint)}
.band--ink .bdh-list>li{border-color:var(--on-ink-line);color:var(--on-ink)}
.band--ink .bdh-list small{color:var(--on-ink-3)}

.bdh-bullets>li{position:relative;padding-left:20px;font-size:var(--t-sm);line-height:1.55;color:var(--txt)}
.bdh-bullets>li+li{margin-top:10px}
.bdh-bullets>li::before{content:"\203A";position:absolute;left:2px;top:0;font-family:var(--f);color:var(--blue)}
.band--ink .bdh-bullets>li{color:var(--on-ink-2)}

.bdh-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--txt);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;line-height:1}
.bdh-tag--blue{background:var(--blue-wash);color:var(--blue-d)}
.band--ink .bdh-tag,.bdh-card--ink .bdh-tag{background:var(--on-ink-card);color:var(--on-ink-2);box-shadow:inset 0 0 0 1px var(--on-ink-line)}
.bdh-tags{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:600px){.bdh-tag{max-width:100%;height:auto;min-height:24px;padding-block:5px;line-height:1.3;white-space:normal}}
.bdh-ill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px dashed var(--line-3);border-radius:var(--r-pill);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;line-height:1}
.band--ink .bdh-ill{border-color:var(--on-ink-line);color:var(--on-ink-3)}
.bdh-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.bdh-meta>*+*::before{content:"\00B7";margin-inline:10px;color:var(--ghost)}
.bdh-rule{display:block;height:1px;border:0;background:var(--line)}
.band--ink .bdh-rule{background:var(--on-ink-line)}

/* ---------- mock UI (looks like real software) --------------------------- */
.bdh-ui{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden}
.bdh-ui__bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 16px;border-bottom:1px solid var(--line-2);font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.bdh-ui__dots{display:inline-flex;gap:6px;flex:none}
.bdh-ui__dots i{width:8px;height:8px;border-radius:50%;background:var(--line-3)}
.bdh-ui--ink{background:rgba(255,255,255,.04);border-color:var(--on-ink-line);color:var(--on-ink-2)}
.bdh-ui--ink .bdh-ui__bar{border-color:var(--on-ink-line);color:var(--on-ink-3)}
.bdh-ui--ink .bdh-ui__dots i{background:var(--on-ink-line)}
.bdh-ro{font-family:var(--f);font-size:var(--t-xs);line-height:1.5;letter-spacing:0;font-variant-numeric:tabular-nums}
.bdh-ok{font-family:var(--f);font-weight:500;color:var(--blue)}
.bdh-flag{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--blue-wash-2);color:var(--ink);font-family:var(--f);font-size:var(--t-lbl);font-weight:500;line-height:1}
.band--ink .bdh-flag,.bdh-ui--ink .bdh-flag{background:var(--on-ink-card);color:var(--on-ink);box-shadow:inset 0 0 0 1px var(--blue)}
.bdh-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none;box-shadow:0 0 0 3px var(--blue-wash)}
.is-live .bdh-pulse{animation:bdh-pulse 2.4s var(--e-io) infinite}
@keyframes bdh-pulse{0%,100%{box-shadow:0 0 0 3px var(--blue-wash)}50%{box-shadow:0 0 0 7px rgba(0,130,251,0)}}

/* ---------- controls ----------------------------------------------------- */
/* tabs: <div class="bdh-tabs" role="tablist"><button role="tab" aria-selected="true" aria-controls="x-p0" id="x-t0">…</button>… */
.bdh-tabs{display:flex;flex-wrap:wrap;gap:4px}
.bdh-tabs [role="tab"]{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:500;color:var(--muted);text-align:left;
  transition:background var(--d1) var(--e-io),color var(--d1) var(--e-io)}
.bdh-tabs [role="tab"]:hover{color:var(--ink)}
.bdh-tabs [role="tab"][aria-selected="true"]{color:var(--ink);background:var(--paper-3)}
.band--ink .bdh-tabs [role="tab"]{color:var(--on-ink-3)}
.band--ink .bdh-tabs [role="tab"]:hover{color:var(--on-ink)}
.band--ink .bdh-tabs [role="tab"][aria-selected="true"]{color:var(--on-ink);background:rgba(255,255,255,.1)}
/* segmented: <div class="bdh-seg" role="tablist"><button role="tab" aria-selected="true">Quarter</button>… (or aria-pressed buttons) */
.bdh-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--paper-3);max-width:100%}
.bdh-seg>button{min-height:36px;padding:0 14px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:500;color:var(--muted);white-space:nowrap;transition:background var(--d1) var(--e-io),color var(--d1) var(--e-io),box-shadow var(--d2) var(--e)}
.bdh-seg>button:hover{color:var(--ink)}
.bdh-seg>button[aria-selected="true"],.bdh-seg>button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:var(--sh-1)}
.band--ink .bdh-seg{background:var(--on-ink-card)}
.band--ink .bdh-seg>button{color:var(--on-ink-3)}
.band--ink .bdh-seg>button[aria-selected="true"],.band--ink .bdh-seg>button[aria-pressed="true"]{background:rgba(255,255,255,.1);color:var(--on-ink);box-shadow:none}
@media (max-width:600px){.bdh-seg>button{min-height:40px}}
/* switch: <button class="bdh-switch" type="button" aria-pressed="false"><span class="bdh-switch__track" aria-hidden="true"></span>Label</button> */
.bdh-switch{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 2px;font-size:var(--t-sm);font-weight:500;color:var(--ink)}
.bdh-switch__track{position:relative;flex:none;width:36px;height:20px;border-radius:var(--r-pill);background:var(--line-3);transition:background var(--d2) var(--e)}
.bdh-switch__track::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:var(--sh-1);transition:transform var(--d2) var(--e)}
.bdh-switch[aria-pressed="true"] .bdh-switch__track{background:var(--blue)}
.bdh-switch[aria-pressed="true"] .bdh-switch__track::after{transform:translateX(16px)}
.band--ink .bdh-switch{color:var(--on-ink)}
.band--ink .bdh-switch__track{background:var(--on-ink-line)}

/* ---------- wide content (journey map, rollout matrix only) -------------- */
/* <div class="bdh-scroll-x mask-x" tabindex="0" aria-label="…, scroll sideways">…</div> */
.bdh-scroll-x{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
.bdh-scroll-x::-webkit-scrollbar{display:none}
.bdh-scroll-x:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:var(--r-sm)}

/* ---------- motion utilities --------------------------------------------- */
/* DRAW — <svg class="bdh-draw"><path pathLength="1" style="--i:2" …/></svg>; starts when an ancestor or the svg gets .is-in */
.bdh-draw :is(path,line,rect,circle,ellipse,polyline,polygon),:is(path,line,rect,circle,ellipse,polyline,polygon).bdh-draw{
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--e) calc(var(--i,0) * 60ms)}
.is-in .bdh-draw :is(path,line,rect,circle,ellipse,polyline,polygon),.is-in.bdh-draw :is(path,line,rect,circle,ellipse,polyline,polygon),.is-in :is(path,line,rect,circle,ellipse,polyline,polygon).bdh-draw{stroke-dashoffset:0}
/* GROW — bars/progress; --i staggers by 60ms */
.bdh-grow{transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--e) calc(var(--i,0) * 60ms)}
.bdh-growY{transform:scaleY(0);transform-origin:center bottom;transition:transform .9s var(--e) calc(var(--i,0) * 60ms)}
.is-in .bdh-grow,.is-in.bdh-grow,.is-in .bdh-growY,.is-in.bdh-growY{transform:none}
/* FADE-UP for items inside a component that is already revealed (no core opacity on the parent) */
.bdh-up{opacity:0;transform:translateY(16px);transition:opacity .7s var(--e) calc(var(--i,0) * 70ms),transform .7s var(--e) calc(var(--i,0) * 70ms)}
.is-in .bdh-up,.is-in.bdh-up{opacity:1;transform:none}
/* PANES — stacked in one grid cell so height never jumps; first pane carries .is-on in the markup */
.bdh-panes{display:grid}
.bdh-panes>.bdh-pane{grid-area:1 / 1;min-width:0}
.bdh-pane{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s var(--e),transform .45s var(--e),visibility 0s linear .45s}
.bdh-pane.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--e),transform .45s var(--e),visibility 0s}
/* TYPE caret — <span data-typed-target></span><span class="bdh-caret" aria-hidden="true"></span> */
.bdh-caret{display:inline-block;width:.5em;height:1.05em;margin-left:2px;vertical-align:-.16em;background:currentColor;opacity:0}
.is-live .bdh-caret{animation:bdh-blink 1s steps(1,end) infinite}
@keyframes bdh-blink{0%,49%{opacity:.85}50%,100%{opacity:0}}
[data-bdh-parallax]>*{will-change:translate}

@media (prefers-reduced-motion:reduce){
  .bdh-draw :is(path,line,rect,circle,ellipse,polyline,polygon),:is(path,line,rect,circle,ellipse,polyline,polygon).bdh-draw{stroke-dashoffset:0;transition:none}
  .bdh-grow,.bdh-growY,.bdh-up{transform:none;opacity:1;transition:none}
  .bdh-pane,.bdh-pane.is-on{transform:none;transition:none}
  .bdh-caret{display:none}
  .bdh-img img,.bdh-card{transition:none}
  .bdh-zoom:hover .bdh-img img,.bdh-zoom:focus-within .bdh-img img,.bdh-img.bdh-zoom:hover img{transform:none}
  [data-bdh-parallax]>*{translate:none}
}

/* ---------- helpers ------------------------------------------------------ */
.bdh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}