/* =========================================================================
   shift-x.css — before / after as a sideways scroll.

   Changes from the tabbed version, each asked for:

   - No orange. The accent is gone entirely; the active state is just cream
     against a dimmer cream. On a monochrome panel, brightness is enough to
     mark "this one" without introducing a colour that has to be justified.
   - No box round the arrow. It is a mark, not an object.
   - One progress indicator, not three. The rule under the tabs already
     says which of four you are on, so the counter and the row of bars were
     saying it twice more.
   - The four advance by scrolling sideways, on a snap track, so moving
     through them is a gesture rather than a click.
   - Intro sits on one line, statements cap at two.

   INSET. The hero runs edge to edge at a 44px gutter. Matching that here
   left the copy stranded against the left edge of a very wide screen. The
   section is still full-bleed — its rules and track reach both edges, so
   the page keeps one outer geometry — but the content is indented to its
   own larger gutter. Full-bleed hero, inset content: a deliberate step in,
   rather than a centred measure that would read as a different grid.
   ========================================================================= */

:root{
  --hx-inset:clamp(44px,8vw,120px);
  --hx-max:clamp(23px,2.5vw,35px);     /* the hero's service-title scale */
  --hx-line:clamp(20px,2.2vw,30px);
}

.hx{background:var(--n12-black);color:var(--n12-cream);padding:112px 0 108px;overflow:hidden}
.hx-wrap{padding:0 var(--hx-inset)}

/* Flush to the heading, like every section label on the planning page. */
.hx-eyebrow{display:block;margin-bottom:0;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,241,234,.7)}
.hx-head{margin:0;max-width:20ch;font-family:'League Spartan',sans-serif;font-weight:800;font-size:var(--hx-max);line-height:1;letter-spacing:-.035em;text-transform:lowercase}
/* No max-width: this is meant to sit on one line. */
.hx-sub{margin:18px 0 0;font-size:15.5px;line-height:1.6;color:rgba(246,241,234,.58)}

/* ------------------------------ tabs ------------------------------
   Doubling as the only progress indicator. Clicking one scrolls the track;
   scrolling the track moves the rule. */

.hx-tabs{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin:54px var(--hx-inset) 0;padding-bottom:16px;
  border-bottom:1px solid var(--n12-line);
}
.hx-rule{
  position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--n12-cream);
  transition:transform .4s cubic-bezier(.65,0,.35,1),width .4s cubic-bezier(.65,0,.35,1);
}
.hx-tab{
  /* CENTRE, NOT BASELINE. A 19px numeral and a 10px tracked label on a
     shared baseline is typographically orthodox and looks wrong here:
     the label is uppercase, so it has no descenders and its whole body
     sits above the baseline, which leaves the numeral looking dropped
     beside it. Centring the two line boxes puts the digits level with
     the middle of the word, which is what you actually see. */
  display:flex;align-items:center;gap:9px;padding:0;border:0;background:none;
  text-align:left;cursor:pointer;color:rgba(246,241,234,.32);
  font-family:'Questrial',sans-serif;transition:color .22s ease;
}
/* line-height 1 on both, so each box is its own glyphs and centring them
   centres the ink rather than two different amounts of leading */
.hx-tab b{font-family:'League Spartan',sans-serif;font-size:19px;font-weight:700;line-height:1}
.hx-tab small{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1}
.hx-tab:hover{color:rgba(246,241,234,.62)}
.hx-tab.is-on{color:var(--n12-cream)}

/* ------------------------------ track ------------------------------
   Native horizontal scrolling with snap, so a trackpad swipe, a touch drag
   and the arrow keys all work without any of it being reimplemented. */

.hx-track{
  display:flex;margin-top:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;
}
.hx-track::-webkit-scrollbar{display:none}

.hx-panel{
  flex:0 0 100%;scroll-snap-align:start;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:44px;
  padding:78px var(--hx-inset) 0;
  min-height:220px;
}
.hx-side{display:flex;flex-direction:column}
.hx-side--b{align-items:flex-end;text-align:right}
.hx-side--a{align-items:flex-start;text-align:left}

.hx-tag{display:block;margin-bottom:14px;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.hx-side--b .hx-tag{color:rgba(246,241,234,.34)}
.hx-side--a .hx-tag{color:rgba(246,241,234,.62)}

/* 24ch keeps every statement to two lines at this size — the longest is
   "your team knows what to do without you." at 39 characters. */
.hx-line{
  margin:0;max-width:24ch;
  font-family:'League Spartan',sans-serif;font-weight:800;
  font-size:var(--hx-line);line-height:1.06;letter-spacing:-.035em;text-transform:lowercase;
}
.hx-side--b .hx-line{color:rgba(246,241,234,.4)}
.hx-side--a .hx-line{color:var(--n12-cream)}

/* Mark, not object. */
.hx-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:rgba(246,241,234,.55)}
.hx-arrow svg{width:30px;height:30px}

.hx-nudge{
  margin:42px var(--hx-inset) 0;
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,241,234,.3);
}

/* ---------------------------- responsive ---------------------------- */

@media(max-width:900px){
  .hx{padding:78px 0 84px}
  .hx-tabs{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:42px}
  .hx-tab b{font-size:16px}
  .hx-tab small{display:none}
  .hx-panel{grid-template-columns:1fr;gap:18px;padding-top:52px;min-height:0}
  .hx-side--b,.hx-side--a{align-items:flex-start;text-align:left}
  .hx-line{max-width:28ch}
  .hx-arrow{transform:rotate(90deg)}
  .hx-sub{font-size:15px}
}

@media(prefers-reduced-motion:reduce){
  .hx-track{scroll-behavior:auto}
  .hx-rule{transition:none}
}


/* ================= EYEBROW TO HEADING =================
   5px under a section eyebrow, 12 under a hero one. The pair is
   addressed as a sibling so no heading that does NOT follow an
   eyebrow moves with it. */
.hx-eyebrow + h1,
.hx-eyebrow + h2,
.hx-eyebrow + h3{margin-top:5px}