/* ==========================================================================
   Home page (store/home.html). Loaded by that page only.

   Reading order of the page, top to bottom:
     hero · ticker · methods · promises · projects · process · shop · ask ·
     articles · closing call to action
   Shared tokens (--brand, --accent, --night …) come from style.css, and the
   motion primitives (.sd-parallax, .rv …) from motion.css.
   ========================================================================== */

/* ---------- Shared heading bits ---------- */
.hx-h2 { font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.15rem); font-weight: 900; line-height: 1.4; margin: .55rem 0 .6rem; text-wrap: balance; }
.hx-h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 900; margin: 0; }
.hx-sub { color: var(--muted); max-width: 52ch; margin: 0; }
.hx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; margin-bottom: clamp(1.1rem, 2.2vw, 1.75rem); }
.hx-head .hx-h2 { margin-bottom: .6rem; }
.hx-head--sub { align-items: center; margin: clamp(1.5rem, 3vw, 2.25rem) 0 1rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hx-hero {
  position: relative; isolation: isolate; color: #fff; background: var(--night);
  min-height: min(calc(100svh - var(--topbar-h, 0px)), 54rem); display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--nav-h, 72px) + clamp(1.5rem, 4vh, 3rem));
  overflow: hidden; overflow: clip;
}
.hx-hero-media { position: absolute; inset: 0; z-index: -4; overflow: hidden; }
.hx-hero-media picture, .hx-hero-img { display: block; width: 100%; height: 100%; }
.hx-hero-img { object-fit: cover; object-position: 50% 42%; }
.hx-hero-shade {
  position: absolute; inset: 0; z-index: -3;
  background:
    linear-gradient(to top, var(--night) 0%, rgba(10,22,39,0) 44%),
    linear-gradient(to left, rgba(10,22,39,.92) 0%, rgba(10,22,39,.74) 42%, rgba(10,22,39,.4) 100%);
}
@media (max-width: 700px) {
  .hx-hero-shade { background: linear-gradient(to top, var(--night) 8%, rgba(10,22,39,.62) 52%, rgba(10,22,39,.8) 100%); }
}

/* A drafting grid over the photograph, and a second copy of it in amber that
   is only visible in a soft circle around the pointer (motion.js sets --mx/--my). */
.hx-hero-grid {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size: 72px 72px; background-position: right top;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.25) 65%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.25) 65%, transparent 100%);
}
.hx-hero-grid--lit {
  background-image: linear-gradient(rgba(245,158,11,.75) 1px, transparent 1px), linear-gradient(90deg, rgba(245,158,11,.75) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(230px circle at var(--mx, 70%) var(--my, 40%), #000, transparent 72%);
  mask-image: radial-gradient(230px circle at var(--mx, 70%) var(--my, 40%), #000, transparent 72%);
  opacity: 0; transition: opacity .5s;
}
.hx-hero.is-lit .hx-hero-grid--lit { opacity: .9; }

.hx-hero-inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: 1rem; }
.hx-hero-copy { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.hx-collage { display: none; }

/* Wide screens: no photograph behind the text. A deep-navy ground with a
   drafting grid, and the four jobs set out on the far side. */
@media (min-width: 992px) {
  .hx-hero-media { display: none; }
  .hx-hero-shade {
    background:
      radial-gradient(52rem 34rem at 78% 28%, rgba(29,74,130,.6), transparent 70%),
      radial-gradient(34rem 26rem at 8% 88%, rgba(245,158,11,.13), transparent 65%),
      linear-gradient(180deg, var(--night) 0%, #0d2039 100%);
  }
  .hx-hero-grid { -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%); mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%); }
  .hx-hero-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center; }
  .hx-hero-copy { grid-column: 1; }
  .hx-facts { grid-column: 1 / -1; }
  .hx-collage {
    display: block; grid-column: 2; grid-row: 1; justify-self: end; position: relative;
    width: 100%; max-width: min(31rem, 58vh); aspect-ratio: 1 / 1.1;
  }
}
.hx-kicker { color: #fbbf24; }
.hx-kicker::after { content: ''; width: 3.2rem; height: 2px; background: var(--accent); transform-origin: right; }

.hx-title {
  font-size: clamp(2.1rem, 1rem + 3.9vw, 4rem); font-weight: 900; line-height: 1.22; color: #fff;
  max-width: 15ch; margin: .9rem 0 1rem; text-wrap: balance;
}
.hx-lead { font-size: clamp(1.02rem, .95rem + .4vw, 1.25rem); line-height: 2; color: #cdd7e6; max-width: 46ch; margin: 0; }

/* Word-by-word headline (motion.js wraps each word; letters are never split).
   Until it has run the line is hidden; a timer un-hides it if it never does.
   0.6s, not 1.4s: the headline is the largest text on the page, and while it
   is hidden the page has not painted its main content (2026-10 audit, LCP). */
html.js .hx-title:not(.is-split) { visibility: hidden; animation: hx-unhide 0s .6s forwards; }
.hx-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .22em .06em; margin: -.22em -.06em; }
.hx-title .w > span { display: inline-block; }

/* The two doors */
.hx-doors { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 58rem; margin-top: clamp(1.25rem, 3vh, 2rem); }
@media (min-width: 700px) { .hx-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hx-door {
  position: relative; display: flex; flex-direction: column; gap: .3rem; overflow: hidden;
  padding: 1.25rem 1.35rem 1.15rem; border-radius: 1.25rem; color: #fff;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.hx-door::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease-out); }
.hx-door:hover, .hx-door:focus-visible { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); transform: translateY(-4px); }
.hx-door:active:hover { transform: translateY(-1px) scale(.985); }
.hx-door:hover::after, .hx-door:focus-visible::after { transform: scaleX(1); }
.hx-door-top { display: flex; align-items: center; justify-content: space-between; }
.hx-door-icon { width: 3rem; height: 3rem; border-radius: .9rem; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-size: 1.35rem; }
.hx-door-no { font-size: 2.3rem; font-weight: 900; line-height: 1; color: rgba(255,255,255,.17); }
.hx-door-kicker { font-size: .8rem; font-weight: 800; color: #fbbf24; margin-top: .55rem; }
.hx-door-title { font-size: 1.2rem; line-height: 1.55; }
.hx-door-text { font-size: .92rem; line-height: 1.9; color: #c3cfdf; }
.hx-door-cta { color: #fbbf24; margin-top: auto; padding-top: .7rem; font-weight: 800; display: inline-flex; align-items: center; gap: .4rem; }
.hx-door-cta i { transition: transform .3s var(--ease-out); }
.hx-door:hover .hx-door-cta i, .hx-door:focus-visible .hx-door-cta i { transform: translateX(-5px); }

/* The numbers */
.hx-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem 0; width: 100%; margin: clamp(1.25rem, 3vh, 2rem) 0 0; padding: 1.2rem 0 1.5rem; border-top: 1px solid rgba(255,255,255,.16); }
.hx-facts li { flex: 1 1 8rem; display: flex; flex-direction: column; padding-inline-end: 1.5rem; }
.hx-facts li + li { padding-inline-start: 1.5rem; border-inline-start: 1px solid rgba(255,255,255,.14); }
.hx-facts strong { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); font-weight: 900; line-height: 1.2; color: var(--accent); font-variant-numeric: tabular-nums; }
.hx-facts span { font-size: .85rem; color: #b9c6d8; }
@media (max-width: 575.98px) {
  .hx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-facts li, .hx-facts li + li { padding: 0; border: 0; }
}

/* ---------- The collage ----------
   Four photographs, each doing its own thing: it enters (scale + opacity on
   the figure), drifts with the scroll at its own speed (translate on the
   figure), floats on its own (transform on the inner box) and leans a little
   toward the pointer (translate on the inner box). Four separate properties,
   so none of them fights another. */
.hx-fig { position: absolute; margin: 0; z-index: var(--d, 1); border-radius: 1.35rem; }
/* The frame (border, shadow, ring) lives on the box that moves, so a photograph
   and its frame can never drift apart. */
.hx-fig-in {
  position: relative; margin: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; background: var(--night-2);
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 26px 60px rgba(0,0,0,.5);
  translate: calc(var(--px, 0) * var(--d, 1) * -7px) calc(var(--py, 0) * var(--d, 1) * -6px);
}
.hx-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-fig--a { width: 52%; aspect-ratio: 3 / 4; inset-block-start: 0; inset-inline-start: 0; --dy: -46; }
.hx-fig--b { width: 64%; aspect-ratio: 4 / 3; inset-block-start: 25%; inset-inline-end: 0; --dy: 64; }
.hx-fig--c { width: 40%; aspect-ratio: 1; inset-block-end: 0; inset-inline-start: 6%; --dy: -92; }
.hx-fig--d { width: 27%; aspect-ratio: 1; inset-block-end: 5%; inset-inline-end: 9%; border-radius: 50%; --dy: 28; }
.hx-fig--d .hx-fig-in { border: 3px solid var(--accent); }
.hx-fig figcaption {
  position: absolute; z-index: 2; inset-inline-start: .7rem; inset-block-end: .7rem;
  display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .75rem; border-radius: 2rem;
  background: rgba(10,22,39,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: .78rem; font-weight: 800; line-height: 1.5;
}
.hx-fig figcaption i { width: .45rem; height: .45rem; background: var(--accent); transform: rotate(45deg); }
/* Amber corner marks, like the crop marks on a drawing. */
.hx-mark { position: absolute; width: 2.2rem; height: 2.2rem; pointer-events: none; z-index: 0; }
.hx-mark--1 { inset-block-start: -.9rem; inset-inline-start: -.9rem; border-top: 2px solid var(--accent); border-inline-start: 2px solid var(--accent); }
.hx-mark--2 { inset-block-end: -.9rem; inset-inline-end: -.9rem; border-bottom: 2px solid var(--accent); border-inline-end: 2px solid var(--accent); }

/* Short laptop screens: keep both doors and the numbers on the first screen. */
@media (min-width: 992px) and (max-height: 820px) {
  .hx-hero { padding-top: calc(var(--nav-h, 72px) + 1rem); }
  .hx-hero-inner { padding-top: 0; }
  .hx-title { font-size: clamp(2.1rem, min(1rem + 3.9vw, 8vh), 4rem); margin-block: .4rem .5rem; line-height: 1.18; }
  .hx-lead { max-width: 64ch; line-height: 1.8; }
  .hx-doors { margin-top: 1rem; }
  .hx-door { padding: .8rem 1.2rem .75rem; gap: .1rem; }
  .hx-door-icon { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; border-radius: .7rem; }
  .hx-door-no { font-size: 1.7rem; }
  .hx-door-kicker { margin-top: .25rem; }
  .hx-door-text { line-height: 1.7; }
  .hx-door-cta { padding-top: .35rem; }
  .hx-facts { margin-top: .75rem; padding-block: .7rem .85rem; }
  .hx-facts strong { font-size: 2rem; }
}

/* Entrance, on load — no script needed. */
@media (prefers-reduced-motion: no-preference) {
  .hx-hero-media { animation: hx-settle 2.4s var(--ease-out) both; }
  .hx-kicker, .hx-lead, .hx-door, .hx-facts li { animation: hx-fade-up .9s var(--ease-out) both; }
  .hx-kicker { animation-delay: .1s; }
  .hx-kicker::after { animation: hx-grow 1.1s var(--ease-out) .5s both; }
  .hx-lead { animation-delay: .75s; }
  .hx-door:nth-child(1) { animation-delay: .9s; }
  .hx-door:nth-child(2) { animation-delay: 1.02s; }
  .hx-facts li { animation-delay: 1.15s; }
  .hx-title .w > span { transform: translateY(115%); animation: hx-rise .95s var(--ease-out) forwards; animation-delay: calc(180ms + var(--i, 0) * 85ms); }
  .hx-fig { animation: hx-pop 1s var(--ease-out) both; animation-delay: calc(.3s + var(--d, 1) * .16s); }
  .hx-fig-in { animation: hx-float 7.5s ease-in-out infinite alternate; animation-delay: calc(var(--d, 1) * -1.9s); }
  .hx-fig--b .hx-fig-in { animation-duration: 9s; }
  .hx-fig--c .hx-fig-in { animation-duration: 8.2s; }
  .hx-fig--d .hx-fig-in { animation-duration: 6.4s; }
  @supports (animation-timeline: scroll()) {
    .hx-hero-img { animation: hx-scroll linear both; animation-timeline: scroll(root); animation-range: 0px 100vh; }
    .hx-hero-inner { animation: hx-away linear both; animation-timeline: scroll(root); animation-range: 0px 75vh; }
    .hx-fig { animation: hx-pop 1s var(--ease-out) both, hx-drift linear both; animation-delay: calc(.3s + var(--d, 1) * .16s), 0s; animation-timeline: auto, scroll(root); animation-range: normal, 0px 100vh; }
  }
  @keyframes hx-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
  @keyframes hx-scroll { to { transform: translate3d(0, 9%, 0) scale(1.1); } }
  @keyframes hx-away { to { opacity: .12; transform: translate3d(0, -36px, 0); } }
  @keyframes hx-fade-up { from { opacity: 0; transform: translate3d(0, 1.4rem, 0); } }
  @keyframes hx-grow { from { transform: scaleX(0); } }
  @keyframes hx-rise { to { transform: none; } }
  @keyframes hx-pop { from { opacity: 0; scale: .86; } }
  @keyframes hx-float { from { transform: translate3d(0, -6px, 0) rotate(-.35deg); } to { transform: translate3d(0, 8px, 0) rotate(.45deg); } }
  @keyframes hx-drift { to { translate: 0 calc(var(--dy, 0) * 1px); } }
}
@keyframes hx-unhide { to { visibility: visible; } }

/* ==========================================================================
   Ticker — the methods as a band of type
   ========================================================================== */
.hx-ticker { position: relative; background: var(--accent); color: var(--ink); overflow: hidden; border-block: 1px solid rgba(12,26,46,.18); }
.hx-ticker-track { display: flex; width: max-content; }
.hx-ticker-list { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.hx-ticker-list li { display: flex; align-items: center; gap: 3rem; padding: .85rem 1.5rem; white-space: nowrap; font-size: clamp(1.35rem, 1rem + 1.9vw, 2.5rem); font-weight: 900; line-height: 1.1; }
.hx-ticker-list li::after { content: ''; flex: none; width: .65rem; height: .65rem; background: var(--ink); transform: rotate(45deg); }
.hx-ticker-toggle {
  position: absolute; inset-inline-end: .7rem; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: 1.2rem; box-shadow: 0 2px 10px rgba(12,26,46,.3);
}
.hx-ticker-toggle .i-play { display: none; }
.hx-ticker.is-paused .hx-ticker-toggle .i-play { display: inline; }
.hx-ticker.is-paused .hx-ticker-toggle .i-pause { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Content moves toward the end of the line (rightwards in RTL), so new
     items appear at the start edge — against the reading direction. */
  .hx-ticker-track { animation: hx-marquee 60s linear infinite; }
  .hx-ticker:hover .hx-ticker-track, .hx-ticker.is-paused .hx-ticker-track { animation-play-state: paused; }
  @keyframes hx-marquee { to { transform: translateX(50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .hx-ticker { overflow-x: auto; }
  .hx-ticker-toggle { display: none; }
}

/* ==========================================================================
   Methods — an index that stays put, cards that scroll past it
   ========================================================================== */
.hx-methods { padding: clamp(2.25rem, 5vw, 4rem) 0; background: var(--bg); }
.hx-methods-grid { display: grid; gap: 2.25rem; }
@media (min-width: 992px) {
  .hx-methods-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3.5rem; align-items: start; }
  .hx-methods-side { position: sticky; top: calc(var(--nav-h, 72px) + 2rem); }
}
.hx-index { display: none; list-style: none; margin: 1.1rem 0 1.25rem; padding: 0; counter-reset: none; }
@media (min-width: 992px) { .hx-index { display: block; } }
.hx-index a {
  display: flex; align-items: baseline; gap: .9rem; padding: .5rem 0; color: var(--muted); font-weight: 700;
  border-bottom: 1px solid var(--line); transition: color .3s, padding .45s var(--ease-out), border-color .3s;
}
.hx-index .n { font-size: .85rem; font-variant-numeric: tabular-nums; transition: color .3s; }
.hx-index a:hover { color: var(--ink); }
.hx-index a.is-active { color: var(--ink); padding-inline-start: .65rem; border-bottom-color: var(--accent); }
.hx-index a.is-active .n { color: var(--accent-ink); }
.hx-side-btn { margin-top: .25rem; }
.hx-more-m { display: none; }
@media (max-width: 767.98px) { .hx-more-m { display: inline-flex; justify-content: center; } }
@media (max-width: 991.98px) { .hx-side-btn { display: none; } }

.hx-methods-list { display: grid; gap: 1rem; }
.hx-method {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.hx-method:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--brand-line); }
.hx-method-media { display: block; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--night); }
@media (min-width: 768px) {
  .hx-method { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .hx-method-media { aspect-ratio: auto; min-height: 13.5rem; }
}
.hx-method-media img { transition: scale 1.1s var(--ease-out); }
.hx-method:hover .hx-method-media img { scale: 1.06; }
.hx-method-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,22,39,.7), transparent 58%); pointer-events: none; }
.hx-method-num { position: absolute; z-index: 1; inset-block-end: .35rem; inset-inline-start: 1rem; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 900; line-height: 1.1; color: #fff; opacity: .95; }
.hx-method-icon { position: absolute; z-index: 1; inset-block-start: .8rem; inset-inline-end: .8rem; width: 2.5rem; height: 2.5rem; border-radius: .85rem; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-size: 1.15rem; box-shadow: var(--shadow); }
.hx-method-body { display: flex; flex-direction: column; justify-content: center; gap: .45rem; padding: 1.05rem 1.25rem 1.15rem; }
.hx-method-body h3 { margin: 0; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.5; }
.hx-method-body h3 a { color: var(--ink); }
.hx-method-body h3 a:hover { color: var(--brand); }
.hx-method-body p { margin: 0; color: var(--body); font-size: .93rem; line-height: 1.85; }
.hx-method-body .hx-method-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.3rem; font-size: .9rem; color: var(--muted); }
.hx-method-meta i { margin-inline-end: .35rem; }
.hx-method-meta a { color: var(--accent-ink); font-weight: 800; }
.hx-method-meta a:hover { color: var(--ink); }
.hx-method-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.hx-method-actions .btn { padding: .35rem 1rem; font-size: .88rem; }

/* ==========================================================================
   Promises — four short guarantees, on dark
   ========================================================================== */
.hx-promises { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: #c3cfdf; padding: clamp(1.75rem, 4vw, 3rem) 0; }
.hx-promises::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 20% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 20% 0%, #000, transparent 75%);
}
.hx-promises-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .hx-promises-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.hx-promise { position: relative; padding: 1.15rem 1.15rem 1rem; border-top: 2px solid rgba(255,255,255,.14); }
.hx-promise::before { content: ''; position: absolute; inset-inline: 0; top: -2px; height: 2px; background: var(--accent); transform-origin: right; transition: transform .9s var(--ease-out) .25s; }
.hx-promise.rv:not(.is-in)::before { transform: scaleX(0); }
@media (min-width: 992px) { .hx-promise + .hx-promise { border-inline-start: 1px solid rgba(255,255,255,.08); } }
.hx-promise-no { position: absolute; inset-inline-end: .9rem; top: .5rem; font-size: 3rem; font-weight: 900; line-height: 1; color: rgba(255,255,255,.055); }
.hx-promise-icon { width: 2.5rem; height: 2.5rem; border-radius: .8rem; display: grid; place-items: center; margin-bottom: .7rem; background: rgba(245,158,11,.14); color: var(--accent); font-size: 1.4rem; }
.hx-promise h3 { color: #fff; font-size: 1.12rem; margin: 0 0 .35rem; }
.hx-promise p { margin: 0; font-size: .93rem; }

/* ==========================================================================
   Projects — one large, two smaller
   ========================================================================== */
.hx-projects { padding: clamp(2.25rem, 5vw, 4rem) 0; background: var(--surface); border-block: 1px solid var(--line); }
.hx-projects-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .hx-projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
  .hx-projects-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-rows: auto; }
  .hx-projects-grid > :first-child { grid-row: span 2; }
}
.hx-projects-grid .project-card { border-radius: var(--radius-lg); }
@media (min-width: 992px) { .hx-projects-grid > :first-child .project-card-body { flex: 0 0 auto; } }
.hx-projects-grid .project-card-media { aspect-ratio: 3 / 2; }
@media (min-width: 992px) {
  .hx-projects-grid > :first-child .project-card-media { flex: 1; aspect-ratio: auto; min-height: 19rem; }
  .hx-projects-grid > :first-child .project-card-title { font-size: 1.35rem; }
}
.hx-projects-grid .project-card:hover .project-card-media img { transform: none; }
.hx-projects-grid .project-card-media img { transition: scale 1s var(--ease-out); }
.hx-projects-grid .project-card:hover .project-card-media img { scale: 1.05; }

/* ==========================================================================
   Process — a line that draws itself as the steps arrive
   ========================================================================== */
.hx-process { padding: clamp(2.25rem, 5vw, 4rem) 0; background: var(--bg-alt); }
.hx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; position: relative; }
.hx-steps::before, .hx-steps::after { content: ''; position: absolute; inset-inline-start: 1.4rem; top: 1.4rem; bottom: 1.4rem; width: 2px; }
.hx-steps::before { background: var(--line); background-image: repeating-linear-gradient(to bottom, #b8b2a2 0 6px, transparent 6px 12px); }
.hx-steps::after { background: var(--accent); transform-origin: center top; }
.hx-step { position: relative; padding-inline-start: 4.2rem; }
.hx-step-n { position: absolute; inset-inline-start: 0; top: 0; z-index: 1; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--accent); color: var(--ink); font-weight: 900; font-size: 1.1rem; box-shadow: 0 0 0 6px var(--bg-alt); }
.hx-step h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); margin: .1rem 0 .4rem; }
.hx-step p { margin: 0; color: var(--body); font-size: 1rem; max-width: 30ch; }
@media (min-width: 768px) {
  .hx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  .hx-steps::before, .hx-steps::after { inset-inline: 1.4rem; top: 1.4rem; bottom: auto; width: auto; height: 2px; }
  .hx-steps::before { background-image: repeating-linear-gradient(to left, #b8b2a2 0 6px, transparent 6px 12px); }
  .hx-steps::after { transform-origin: right center; }
  .hx-step { padding-inline-start: 0; padding-top: 4.2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hx-steps::after { animation: sd-draw-y linear both; animation-timeline: view(); animation-range: entry 15% cover 55%; }
    @media (min-width: 768px) { .hx-steps::after { animation-name: sd-draw-x; } }
  }
  /* Where the browser cannot scrub it, motion.js marks the list and it draws once. */
  .hx-steps.rv-line::after { transform: scaleY(0); transition: transform 1.6s var(--ease-out); }
  .hx-steps.rv-line.is-in::after { transform: none; }
  @media (min-width: 768px) { .hx-steps.rv-line::after { transform: scaleX(0); } .hx-steps.rv-line.is-in::after { transform: none; } }
}

/* ==========================================================================
   Shop
   ========================================================================== */
.hx-shop { padding: clamp(2.25rem, 5vw, 4rem) 0; }
.hx-search { display: flex; gap: .5rem; width: min(100%, 26rem); }
.hx-search .form-control { border-radius: .75rem; background: var(--surface); }
/* ==========================================================================
   Closing call to action — one compact panel, not a full-width scene
   ========================================================================== */
.hx-cta-wrap { padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hx-cta {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 1.75rem; align-items: center;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.4rem, 4vw, 3rem); border-radius: var(--radius-lg); color: #fff;
  background-color: var(--night);
  background-image:
    radial-gradient(34rem 20rem at 85% 0%, rgba(29,74,130,.7), transparent 70%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}
.hx-cta::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--accent); }
@media (min-width: 768px) { .hx-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); } }
.hx-cta-title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem); font-weight: 900; line-height: 1.35; color: #fff; margin: .6rem 0 .5rem; }
.hx-cta-text { color: #c9d4e3; max-width: 46ch; margin: 0 0 1.25rem; }
.hx-cta-photo { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 17rem; aspect-ratio: 4 / 3; border-radius: 1.1rem; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 44px rgba(0,0,0,.45); transform: rotate(-2.2deg); }
.hx-cta-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.hx-cta-photo::before { content: ''; position: absolute; z-index: 1; inset-block-start: -.6rem; inset-inline-start: -.6rem; width: 1.8rem; height: 1.8rem; border-top: 2px solid var(--accent); border-inline-start: 2px solid var(--accent); }
@media (max-width: 767.98px) { .hx-cta-photo { display: none; } }

/* ---------- The questions block keeps its markup; only its ground changes ---------- */
.ask-block { background: linear-gradient(135deg, var(--night) 0%, var(--night-2) 100%); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); }
.ask-chip { border-radius: .75rem; }

/* ==========================================================================
   Phones — the same page, a size smaller
   ========================================================================== */
@media (max-width: 767.98px) {
  .hx-hero { padding-top: calc(var(--nav-h, 64px) + 1rem); }
  .hx-lead { font-size: .98rem; line-height: 1.85; }
  .hx-doors { gap: .6rem; margin-top: 1rem; }
  .hx-door { padding: .8rem .95rem .75rem; gap: .1rem; border-radius: 1rem; }
  .hx-door-icon { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; border-radius: .7rem; }
  .hx-door-no { font-size: 1.6rem; }
  .hx-door-kicker { margin-top: .2rem; }
  .hx-door-title { font-size: 1.05rem; }
  .hx-door-text { display: none; }      /* the title says it; the long line only pushed the page down */
  .hx-door-cta { padding-top: .25rem; font-size: .9rem; }
  .hx-facts { margin-top: 1rem; padding-block: .9rem 1.1rem; }
  .hx-facts strong { font-size: 1.6rem; }

  .hx-method-media { aspect-ratio: 2 / 1; }
  .hx-method-num { font-size: 2rem; }
  .hx-method-body { padding: .9rem 1rem 1rem; }
  .hx-method-body p:not(.hx-method-meta) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hx-methods-list { gap: .85rem; }
  /* On a phone the first four methods are enough; the button below leads to the rest. */
  .hx-method:nth-child(n+5) { display: none; }
  .hx-methods-grid { gap: 1.25rem; }
  .hx-sub { font-size: .93rem; }

  .hx-promise-no { display: none; }
  .hx-projects-grid .project-card-media { aspect-ratio: 16 / 10; }
  .hx-step p { font-size: .93rem; }
  .hx-search { width: 100%; }
}