/* ============================================================
   SMK & Co — Homepage
   White + soft blue-white + charcoal. Light blue used as accent only.
   ============================================================ */

.hx h1,.hx h2,.hx h3,.hx h4,.hx main h5{font-family:var(--font);color:var(--ink);font-weight:600;letter-spacing:-.014em}
a{color:var(--ink)}a:hover{color:var(--accent-ink)}
.hx-wrap{max-width:1220px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.hx-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.4vw,32px)}
.hx-band{padding-block:clamp(62px,7.4vw,112px)}
.hx-body{font-size:1rem;line-height:1.74;color:var(--text);margin:0}
.hx-body+.hx-body{margin-top:1.05em}
.hx .hx-cta{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font);font-size:.9rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;transition:color .25s var(--ease),border-color .25s var(--ease)}
.hx-cta .arr{transition:transform .25s var(--ease)}
.hx-cta:hover{color:var(--accent-ink);border-color:var(--accent-ink)}
.hx-cta:hover .arr{transform:translateX(3px)}
.hx .hx-btn{display:inline-flex;align-items:center;gap:.6em;background:var(--ink);color:var(--surface);font-family:var(--font);font-size:.92rem;font-weight:600;padding:.9em 1.6em;border:1px solid var(--ink);border-radius:999px;transition:background .25s var(--ease),border-color .25s var(--ease)}
.hx .hx-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.hx-btn .arr{transition:transform .25s var(--ease)}
.hx-btn:hover .arr{transform:translateX(3px)}

/* ---------- section landmark heading system ---------- */
.hx-sec{max-width:none;margin:0 0 clamp(34px,4vw,60px)}
.hx-sec-label{display:flex;align-items:center;gap:14px;margin:0}
.hx-sec-label::after{content:"";flex:0 0 44px;height:1px;background:var(--line)}
.hx .hx-sec-title{font-weight:600;margin:0;max-width:20ch;text-wrap:pretty}   /* size comes from the shared scale in system.css */
/* Homepage section headings: a step above the shared Heading 1 (24 -> 32),
   sitting under the Display 2 statements (28 -> 44). Home only; the ledger
   pages keep the shared size. */
.hx main.hx-home h2.hx-sec-title{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.02em}
.hx-sec-sub{margin:clamp(16px,1.8vw,24px) 0 0;font-size:1.04rem;line-height:1.7;color:var(--text);max-width:52ch}
.hx-sec--row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.hx-label{font-family:var(--font);font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin:0 0 18px}
.hx-h2{font-size:clamp(1.5rem,2.2vw,2.05rem);line-height:1.18;margin:0}

/* ---------- nav: styled in system.css (the bar) ---------- */

/* ============ HERO ============ */
.hx-hero{position:relative;padding:0;margin-top:var(--nav-h);background:var(--surface);min-height:min(86vh,740px);display:flex;align-items:flex-end;overflow:hidden}
.hx-hero .hx-hero__pic{position:absolute;inset:0;height:100%;overflow:hidden}
.hx-hero__pic image-slot{position:absolute;inset:0;width:100%;height:100%;--is-bg:var(--placeholder);--is-fg:var(--ink)}
.hx-hero__pic picture,.hx-hero__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hx-hero__veil{position:absolute;inset:0;background:color-mix(in srgb,var(--surface) 72%,transparent);pointer-events:none;z-index:1}
.hx-hero__pic:has(image-slot:not([src])) .hx-hero__veil{background:color-mix(in srgb,var(--surface) 14%,transparent)}
.hx-hero__pic image-slot::part(empty){align-items:flex-end;justify-content:flex-end;text-align:right;padding:28px 28px 32px;gap:4px}
.hx-hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(90px,11vw,140px)}
.hx-hero__box{max-width:44rem}
.hx .hx-hero h1{color:var(--ink);font-size:clamp(2rem,3.5vw,3.15rem);line-height:1.14;letter-spacing:-.026em;margin:0;max-width:26ch;text-wrap:pretty}
.hx-hero__sub{margin:22px 0 0;font-size:1.03rem;line-height:1.75;color:var(--ink);max-width:46ch}
.hx-hero__act{margin-top:32px}
.hx .hx-hero .hx-btn--pill{padding-inline:30px}
.hx .hx-hero .hx-btn--pill:hover{background:var(--accent-ink);border-color:var(--accent-ink)}

/* ============ 02 THE FIRM — statement + image/text ============ */
.hx-firm{background:var(--surface)}
.hx .hx-firm__st{font-weight:600;margin:0;font-size:clamp(2.7rem,6vw,5rem);line-height:1.02;letter-spacing:-.032em;max-width:22ch;text-wrap:pretty}
.hx-firm__body{margin-top:clamp(36px,4vw,56px);align-items:start}
.hx-firm__txt{grid-column:1/span 7}
.hx-firm__txt .hx-body{max-width:58ch}
.hx-firm__txt .hx-cta{margin-top:26px}
.hx-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.6vw,36px);margin-top:34px}
.hx-two h4,.hx-two h3{font-family:var(--font);font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:0 0 12px}
.hx-two ul{list-style:none;margin:0;padding:0}
.hx-two li{font-size:.93rem;color:var(--text);padding:8px 0;border-top:1px solid var(--line)}
.hx-two li:first-child{border-top:0}

/* ============ 03 OUR PEOPLE ============ */
.hx-ppl{background:var(--surface-tint);border-top:1px solid var(--line)}
.hx-ppl__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.hx-person{display:flex;flex-direction:column;position:relative}
.hx-person .hx-fig{aspect-ratio:4/5;overflow:hidden;background:var(--placeholder)}
.hx-person image-slot{display:block;width:100%;height:100%;transition:transform .6s var(--ease),scale 1.1s var(--ease)}
.hx-person[data-reveal]:not(.in) image-slot{scale:1.06}
.hx-person:hover image-slot{transform:scale(1.025)}
.hx-person h3{font-size:1.24rem;font-weight:600;margin:20px 0 0;letter-spacing:-.018em}
.hx-person__d{font-family:var(--font);font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);margin:8px 0 0}
.hx-person p.hx-person__e{margin:12px 0 0;font-size:.95rem;line-height:1.64;color:var(--text);max-width:34ch}
.hx-person__l{display:inline-flex;align-self:flex-start;align-items:center;gap:.5em;margin:auto 0 0;padding-top:16px;font-size:.86rem;font-weight:600;color:var(--ink)}
.hx-person__l::after{content:"→";transition:transform .25s var(--ease)}
.hx-person:hover .hx-person__l{color:var(--accent-ink)}
.hx-person:hover .hx-person__l::after{transform:translateX(4px)}

/* ============ 04 WHAT WE DO — full-width rows ============
   A row is a link: name, one line, arrow. One emphasis device per row, the
   name's weight. No ordinals: the order of practice areas carries no meaning. */
.hx-do{background:var(--surface);border-top:1px solid var(--line)}
.hx-do__list{border-top:1px solid var(--line)}
.hx-svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 40px;align-items:baseline;gap:0 clamp(16px,2.4vw,40px);border-bottom:1px solid var(--line);padding:clamp(22px,2.6vw,34px) clamp(6px,1.2vw,18px);position:relative;transition:background .3s var(--ease)}
.hx-svc::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.hx-svc:hover{background:var(--accent-wash)}
.hx-svc:hover::before{transform:scaleX(1)}
.hx .hx-svc__t{margin:0;transition:transform .35s var(--ease)}
.hx-svc:hover .hx-svc__t{transform:translateX(6px)}
.hx-svc p.hx-svc__d{margin:0;font-size:.96rem;line-height:1.68;color:var(--text);max-width:46ch}
/* the arrow is generated, with empty alt text, so it is not read out and not counted as content */
.hx-svc::after{content:"\2192" / "";justify-self:end;font-size:1.05rem;line-height:1;color:var(--accent-ink);opacity:0;transform:translateX(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hx-svc:hover::after{opacity:1;transform:translateX(0)}
.hx-do__foot{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:clamp(26px,3vw,40px)}
.hx-do__foot p{margin:0;color:var(--text);font-size:.98rem;max-width:46ch}
/* link targets land below the fixed bar rather than under it */
#sectors,#how-we-work{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* ============ 05 HOW WE WORK — the snake, drawn by scrolling ============
   One winding line across the page; the five stages sit on its bends with
   their names above and below, always visible. On desktop the block pins
   while the page scrolls and the line draws from left to right: a stage pops
   on as the line reaches it, earlier stages stay marked, and the latest one's
   detail reads below. On phones and short screens it draws as the block comes
   into view. Hover, tap or the arrow keys pick a stage once it is drawn.
   Geometry: the SVG is 1000×220 and each node is pinned at the same point in
   percent, so line and nodes agree at every width. Accent means the reached
   state and the active stage, nothing else. */
.hx-proc{background:var(--surface-tint);border-top:1px solid var(--line)}
.hx-proc__pin{padding-block:clamp(62px,7.4vw,112px)}
/* the pin: a spacer after the block gives the section the scroll distance the
   drawing takes (content, not padding: a sticky element can only travel inside
   its parent's content box), and the block sticks under the fixed bar meanwhile */
.hx-proc__space{height:0}
@media (min-width:901px) and (min-height:800px){
  /* the scroll room the draw takes, capped: tied to vh alone a tall screen
     demanded half as much scrolling again as a short one for the same five
     stages, which is what made the pin feel stuck */
  .hx-proc__space{height:min(72vh,560px)}
  .hx-proc__pin{position:sticky;top:var(--nav-h);padding-block:clamp(48px,5.5vw,76px)}
}
/* a viewport only just tall enough to pin cannot also carry the generous
   frame. Tighten the frame rather than hold the stage's text below the fold:
   the block plus the bar has to fit, or the reader scrolls a pinned block. */
@media (min-width:901px) and (max-height:899px){
  .hx-proc__pin{padding-block:clamp(32px,3.2vw,44px)}
}
.hx-proc__snake{position:relative;padding-bottom:clamp(150px,13vw,172px)}
/* the detail wraps to more lines as its column narrows; at the narrow end of
   desktop it needs more room than 13vw reserves, or it runs into Industries */
@media (min-width:901px) and (max-width:1023px){.hx-proc__snake{padding-bottom:176px}}
.hx-proc__board{position:relative;aspect-ratio:1000/220}
.hx-proc__path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hx-proc__track,.hx-proc__fill{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:100} /* no non-scaling-stroke: it makes Chrome measure dashes in screen px and breaks the pathLength scale */
.hx-proc__track{stroke:var(--line)}
.hx-proc__fill{stroke:var(--accent);stroke-dashoffset:calc(100 - var(--prog,100));transition:stroke-dashoffset .18s linear}
.hx-proc__steps{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.hx-proc__step{display:contents}
.hx-proc__step:nth-child(1){--x:10%;--y:27.27%}
.hx-proc__step:nth-child(2){--x:30%;--y:72.73%}
.hx-proc__step:nth-child(3){--x:50%;--y:27.27%}
.hx-proc__step:nth-child(4){--x:70%;--y:72.73%}
.hx-proc__step:nth-child(5){--x:90%;--y:27.27%}
/* the node hangs off its point: dot on the line, name below (even) or above (odd) */
.hx-proc__node{position:absolute;left:var(--x);top:var(--y);translate:-50% -7px;display:flex;flex-direction:column;align-items:center;gap:12px;width:max-content;max-width:190px;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-align:center}
.hx-proc__step:nth-child(odd) .hx-proc__node{flex-direction:column-reverse;translate:-50% calc(-100% + 7px)}
.hx-proc__dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--text-muted);box-shadow:0 0 0 0 var(--accent-wash);transition:scale .5s var(--ease-pop),background .3s var(--ease),border-color .3s var(--ease),box-shadow .4s var(--ease)}
.hx-proc__lbl{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.55;transition:translate .5s var(--ease-pop),opacity .4s var(--ease)}
.hx-proc__n{font-family:var(--font);font-size:.68rem;font-weight:600;letter-spacing:.14em;color:var(--text-muted);transition:color .3s var(--ease)}
.hx-proc__t{font-family:var(--font);font-size:clamp(1rem,1.5vw,1.25rem);font-weight:600;letter-spacing:-.018em;line-height:1.1;color:var(--text-muted);transition:color .3s var(--ease)}
/* hover: the pop */
.hx-proc__node:hover .hx-proc__dot{scale:1.35}
.hx-proc__node:hover .hx-proc__lbl{translate:0 -2px;opacity:1}
.hx-proc__step:nth-child(even) .hx-proc__node:hover .hx-proc__lbl{translate:0 2px}
.hx-proc__node:hover .hx-proc__t{color:var(--ink)}
.hx-proc__node:focus-visible{outline:none}
.hx-proc__node:focus-visible .hx-proc__dot{box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--accent)}
/* reached by the line: marked, and it pops as it comes on */
.hx-proc__step.is-on .hx-proc__dot{background:var(--ink);border-color:var(--ink);animation:procPop .55s var(--ease-pop)}
.hx-proc__step.is-on .hx-proc__lbl{opacity:1}
.hx-proc__step.is-on .hx-proc__n,.hx-proc__step.is-on .hx-proc__t{color:var(--ink)}
@keyframes procPop{0%{scale:.6}60%{scale:1.4}100%{scale:1}}
/* active: the stage whose detail reads below */
.hx-proc__step.is-active .hx-proc__dot{background:var(--accent);border-color:var(--accent);scale:1.35;box-shadow:0 0 0 6px var(--accent-wash)}
.hx-proc__step.is-active .hx-proc__lbl{opacity:1}
.hx-proc__step.is-active .hx-proc__n,.hx-proc__step.is-active .hx-proc__t{color:var(--accent-ink)}
/* detail of the active stage, below the line */
.hx-proc__detail{display:none;position:absolute;left:0;right:0;top:calc(100% + clamp(24px,2.8vw,40px));grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.4vw,32px)}
.hx-proc__step.is-active .hx-proc__detail{display:grid;animation:procFade .45s var(--ease) both}
@keyframes procFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hx-proc__lead{grid-column:1/span 5;margin:0;font-family:var(--font);font-size:clamp(1.3rem,2.2vw,1.85rem);font-weight:600;line-height:1.16;letter-spacing:-.024em;color:var(--ink)}
.hx-proc__d{grid-column:7/span 6;margin:0;font-size:1.02rem;line-height:1.74;color:var(--text)}
@media (prefers-reduced-motion:reduce){
  .hx-proc__space{height:0!important}
  .hx-proc__pin{position:static!important}
  .hx-proc__fill,.hx-proc__dot,.hx-proc__lbl,.hx-proc__detail{animation:none!important;transition:none!important}
  .hx-proc__lbl{opacity:1!important}
}

/* ============ 06 INDUSTRIES — interactive list ============ */
.hx-ind{background:var(--surface);border-top:1px solid var(--line)}
.hx-ind__rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hx-ind__row{border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.hx-ind__row.is-active{background:var(--accent-wash)}
.hx-ind__btn{display:flex;align-items:center;gap:clamp(16px,2vw,26px);width:100%;background:none;border:0;padding:clamp(16px,1.8vw,24px) clamp(6px,1.2vw,16px);text-align:left;color:inherit;cursor:pointer}
.hx-ind__n{font-family:var(--font);font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--text-muted);transition:color .3s var(--ease)}
.hx-ind__name{font-family:var(--font);font-size:clamp(1.15rem,2vw,1.62rem);font-weight:600;line-height:1.14;letter-spacing:-.022em;color:var(--text);transition:color .3s var(--ease)}
.hx-ind__arr{margin-left:auto;color:var(--text-muted);opacity:.5;transition:transform .3s var(--ease),opacity .3s var(--ease),color .3s var(--ease)}
.hx-ind__d{margin:0;max-height:0;overflow:hidden;opacity:0;color:var(--text);font-size:.96rem;line-height:1.68;max-width:48ch;padding-inline:clamp(6px,1.2vw,16px);padding-left:calc(clamp(16px,2vw,26px) + 2.4em);transition:max-height .42s var(--ease),opacity .3s var(--ease),padding-bottom .42s var(--ease)}
.hx-ind__row.is-active .hx-ind__d{max-height:9em;opacity:1;padding-bottom:clamp(16px,1.8vw,24px)}
.hx-ind__row.is-active .hx-ind__n{color:var(--accent-ink)}
.hx-ind__row.is-active .hx-ind__name{color:var(--ink)}
.hx-ind__row.is-active .hx-ind__arr{opacity:1;color:var(--accent-ink);transform:translateX(5px)}
.hx-ind__foot{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(24px,4vw,64px);flex-wrap:wrap;margin-top:clamp(30px,3.4vw,46px)}
.hx-ind__cap{margin:0;font-family:var(--font);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.42rem);line-height:1.36;letter-spacing:-.018em;color:var(--ink);max-width:34ch}

/* ============ CLIENT REVIEWS — rendered by js/home.js only when window.testimonials has entries ============
   Sits between Industries and the closing CTA: a short tinted band,
   two or three quotes in a row, hairline above, no cards. Four or more become
   a manual, snap-scrolling track: nothing autoplays. */
.hx-quotes{background:var(--surface-tint);border-top:1px solid var(--line);padding-block:clamp(48px,5.6vw,84px)}
.hx-quotes .hx-sec{margin-bottom:clamp(20px,2.4vw,34px)}
.hx-quotes__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 clamp(28px,4vw,64px);border-top:1px solid var(--line)}
.hx-quotes__row.is-many{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(280px,34%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.hx-quote{margin:0;padding:clamp(24px,2.6vw,36px) 0 0;display:flex;flex-direction:column;gap:18px;scroll-snap-align:start}
.hx-quote blockquote{margin:0}
.hx-quote blockquote p{margin:0;font-size:var(--text-lead);line-height:var(--lh-lead);color:var(--ink)}
.hx-quote figcaption{display:flex;flex-direction:column;gap:4px;margin-top:auto}
.hx-quote__who{font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--ink)}
.hx-quote__role{font-size:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
@media (max-width:680px){.hx-quotes__row:not(.is-many) .hx-quote+.hx-quote{border-top:1px solid var(--line)}}

/* ============ CLIENT LOGOS — rendered by js/home.js as its own band, only when window.clients.items has entries ============
   Sits between Industries and the reviews band: hairline above, generous
   padding, one small "Our clients" label, then a slow strip moving left to
   right. Logos keep their official colours, normalised to one visual height
   (--logo-h, times an optional per-logo --s from config). No cards, borders
   or effects. Pauses on hover and keyboard focus. The second track is the
   loop's duplicate and is aria-hidden. With reduced motion the belt is a
   static wrapped row. */
.hx-clients{background:var(--surface);border-top:1px solid var(--line);padding-block:clamp(52px,6vw,92px)}
.hx .hx-clients .hx-net__label{font-size:clamp(1rem,1.25vw,var(--text-lead));margin:0 0 clamp(32px,3.6vw,52px)}   /* a size up from the shared eyebrow; outranks its margin in system.css */
.hx-clients .hx-net__rail{--logo-h:34px;overflow:hidden}
.hx-net__belt{display:flex;width:max-content;transform:translateX(-50%);animation:netScroll var(--dur,40s) linear infinite}
.hx-net__rail:hover .hx-net__belt,.hx-net__rail:focus-within .hx-net__belt{animation-play-state:paused}
.hx-net__belt.is-static{animation:none;width:auto;transform:none}
.hx-net__belt.is-static .hx-net__track[aria-hidden="true"]{display:none}
.hx-net__track{display:flex;align-items:center;gap:clamp(40px,5.5vw,88px);list-style:none;margin:0;padding:0 clamp(40px,5.5vw,88px) 0 0}
.hx-net__item{display:flex;align-items:center;white-space:nowrap}
.hx-net__item a{display:flex;align-items:center;color:inherit}
.hx-net__logo{height:calc(var(--logo-h) * var(--s,1));width:auto;display:block}
@keyframes netScroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:680px){.hx-clients .hx-net__rail{--logo-h:26px}}
@media (prefers-reduced-motion:reduce){
  .hx-net__belt{animation:none;width:auto;transform:none;flex-wrap:wrap}
  .hx-net__track{flex-wrap:wrap;gap:18px clamp(28px,4vw,56px);padding:0}
  .hx-net__track[aria-hidden="true"]{display:none}
}

/* ============ 09 CONTACT ============ */
.hx-close{background:var(--surface);border-top:1px solid var(--line)}
.hx-close--pure{padding-block:clamp(92px,11vw,152px)}
.hx-close--pure .hx-close__mid{max-width:62ch}

.hx .hx-close--pure h2{margin:14px 0 0;font-weight:600;font-size:clamp(2.7rem,6vw,5rem);line-height:1.02;letter-spacing:-.032em;max-width:18ch;color:var(--ink)}
.hx-close--pure .hx-close__sub{margin:22px 0 0;font-size:1.04rem;line-height:1.7;max-width:52ch;color:var(--text)}
.hx-close--pure .hx-btn{margin-top:38px;padding-inline:30px}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .hx-hero{min-height:min(76vh,620px)}
  .hx-firm__txt{grid-column:1/span 12}

  .hx-svc{grid-template-columns:minmax(0,1fr) 32px}
  .hx-svc p.hx-svc__d{grid-column:1;max-width:60ch;margin-top:10px}
  .hx-svc::after{grid-column:2;grid-row:1}
}
@media (max-width:900px){
  .nav__links{display:none}.nav__burger{display:block}
  .hx-ppl__grid{grid-template-columns:1fr 1fr}

  /* how we work: the same snake, smaller; the detail reads in one column below */
  .hx-proc__snake{padding-top:6px;padding-bottom:300px}
  .hx-proc__node{gap:8px;max-width:84px}
  .hx-proc__dot{width:10px;height:10px;border-width:1.6px}
  .hx-proc__node{translate:-50% -5px}
  .hx-proc__step:nth-child(odd) .hx-proc__node{translate:-50% calc(-100% + 5px)}
  .hx-proc__n{font-size:.56rem;letter-spacing:.1em}
  .hx-proc__t{font-size:.76rem;letter-spacing:-.01em}
  .hx-proc__detail{top:calc(100% + 26px);display:none;grid-template-columns:1fr;gap:10px}
  .hx-proc__step.is-active .hx-proc__detail{display:grid}
  .hx-proc__lead,.hx-proc__d{grid-column:auto}
  .hx-proc__lead{font-size:1.15rem}
  .hx-proc__d{font-size:.95rem;line-height:1.65}
}
@media (max-width:680px){
  .hx-hero{min-height:auto}
  .hx-hero__inner{padding-block:clamp(72px,20vw,104px)}
  .hx-hero__sub{color:var(--ink);font-size:.98rem}
  .hx-ppl__grid{grid-template-columns:1fr;gap:38px}
  .hx-two{grid-template-columns:1fr}
  .hx-svc{grid-template-columns:minmax(0,1fr);padding-inline:0}
  .hx-svc::after{display:none}
  .hx-ind__panel .hx-fig{aspect-ratio:4/3}
  .hx-ind__d{padding-left:clamp(6px,1.2vw,16px)}
  .hx .hx-hero .hx-btn,.hx-close--pure .hx-btn{width:100%;justify-content:center}
  .hx-close--pure{padding-block:74px}
}

/* ---------- nav brand tag ---------- */
.nav__brand{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px)}

/* ============================================================================
   HOMEPAGE HERO ENTRANCE
   Five beats, ~1.3s end to end: the photograph settles, then the headline
   arrives one rendered line at a time, then the sub-line, then the action.
   The image eases down from 4% larger rather than springing — a settle, not a
   bounce. Homepage only; other heroes keep the quiet fade.
   Line delays are set inline by the splitter in index.html, because the number
   of lines depends on where the headline wraps at the current width.
   ============================================================================ */
@keyframes heroSettle{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes heroLine{from{opacity:0;transform:translateY(.36em)}to{opacity:1;transform:none}}

.hx .hx-hero__pic picture{
  display:block;animation:heroSettle 900ms var(--ease) both;transform-origin:50% 55%}

/* once split, the headline itself stops animating — its lines do */
.hx .hx-hero h1.is-split{animation:none}
.hx .hx-hero h1 .hx-line{display:block;animation:heroLine 560ms var(--ease) both}

.hx .hx-hero [data-load="1"]{animation-delay:300ms;animation-duration:560ms}
.hx .hx-hero [data-load="2"]{animation-delay:740ms;animation-duration:480ms}
.hx .hx-hero [data-load="3"]{animation-delay:900ms;animation-duration:420ms}

@media (prefers-reduced-motion:reduce){
  /* a real state, not a frozen one: everything present, correct and legible */
  .hx .hx-hero__pic picture{animation:none;opacity:1;transform:none}
  .hx .hx-hero h1 .hx-line{animation:none;opacity:1;transform:none}
}