/* ============================================================================
   HOME PAGE: "One connected piece" (homepage creative redesign, 15 Oct 2026)
   Loaded by index.html only, after styles.css. Every rule is scoped to body.home, so nothing here can reach another
   page. The shared header, footer and closing band keep their styles.css rules; the homepage-only refinements to
   them are in the HEADER and CLOSING blocks below.
   Scenes: 1 the hero and 01 Custom Websites beside one staged website (layer buttons change its screen) ·
   2 Digital Tools & Workflows (three connected steps, wired to the website) · 3 Brand & Website Care rail ·
   4 Selected work · 5 FAQ row and the closing band.
   Motion lives in home.js. Continuous motion (embers, idle signals) answers to the Pause motion control; everything
   else plays once. Reduced motion shows every final state (bottom of this file).
   ============================================================================ */

.home {
  --hm-bg: #0b0c0e;
  --hm-glow: rgba(255, 176, 118, .15);    /* the one soft warm glow behind the tablet (Lane 72) */
  --hm-glow-2: rgba(255, 150, 90, .055);
  --hm-text: #ece8e1;
  --hm-muted: #a8a299;
  --hm-faint: #969086;          /* small labels on the dark surfaces: 5.5:1 or better */
  --hm-ember: #ff7a1a;
  --hm-ember-2: #f2541b;
  --hm-ember-hot: #ffb27a;
  --hm-ember-pale: #ffd2ae;
  --hm-sand: #e7c4a2;
  --hm-hair: rgba(255, 255, 255, .07);
  --hm-hair-2: rgba(255, 255, 255, .13);
  --hm-ivory: #f4efe6;
  --hm-ink: #1f1a15;
  --hm-ink-muted: #5f574d;      /* 5.5:1 on ivory */
  --hm-ink-ember: #9a4212;      /* small ember labels on ivory: 5.4:1 */
  --hm-display: "Montserrat", "Inter", system-ui, sans-serif;
  --hm-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hm-label: "Space Grotesk", "Inter", system-ui, sans-serif;
  --hm-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --hm-ease: cubic-bezier(.2, .75, .15, 1);
  --hm-ease-io: cubic-bezier(.65, 0, .35, 1);
  --hm-nav: 64px;
  --hm-gutter: clamp(20px, 4.2vw, 72px);
  --hm-split: 44%;              /* the copy column's share of the intro on wide screens */
  --hm-glass: linear-gradient(160deg, rgba(50, 54, 61, .9) 0%, rgba(25, 27, 32, .94) 44%, rgba(12, 13, 16, .97) 100%);
}
.home main.hm { position: relative; overflow-x: clip; }
.home .hm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.home .hm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.home .hm-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- HEADER (homepage only): clear over the hero, solid once the page moves ---------- */
.home .nav { transition: background-color .45s ease, border-color .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease; }
.home .nav.hm-nav--top { background: rgba(var(--bg-rgb), 0); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.home .nav.hm-nav--top .nav__mobile-panel.is-open { background: rgba(var(--bg-rgb), .98); }

/* ---------- SHARED TYPE AND CONTROLS ---------- */
.home .hm-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 24px;
  font: 600 .72rem/1.5 var(--hm-label); letter-spacing: .13em; text-transform: uppercase; color: var(--hm-ember-hot);
}
.home .hm-eyebrow::before { content: ""; flex: none; width: 24px; height: 1px; background: linear-gradient(90deg, var(--hm-ember), rgba(255, 122, 26, .15)); }
.home .hm-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font: 600 .8rem/1 var(--hm-label); letter-spacing: .14em; color: var(--hm-ember); }
.home .hm-kicker::after { content: ""; width: 72px; height: 1px; background: linear-gradient(90deg, var(--hm-ember), rgba(255, 122, 26, 0)); }
.home .hm-h2 {
  font-family: var(--hm-display); font-weight: 700; font-size: clamp(1.9rem, 1.1rem + 1.6vw, 2.8rem);
  line-height: 1.06; letter-spacing: -.03em; color: var(--hm-text); text-wrap: balance;
}
.home .hm-h2--sm { font-size: clamp(1.5rem, 1.1rem + .9vw, 2.1rem); }
.home .hm-lead { margin-top: 14px; max-width: 36rem; font-size: 1.06rem; line-height: 1.65; color: var(--hm-muted); }
.home .hm-cap__title {
  font-family: var(--hm-display); font-weight: 700; font-size: clamp(2rem, 1.2rem + 1.8vw, 3.05rem);
  line-height: 1.04; letter-spacing: -.034em; color: var(--hm-text); text-wrap: balance;
}
.home .hm-cap__text { margin-top: 18px; max-width: 35rem; font-size: 1.05rem; line-height: 1.7; color: var(--hm-muted); }
.home .hm-cap__for, .home .hm-svc__for {
  position: relative; margin-top: 16px; padding-left: 22px; max-width: 34rem;
  font-size: .95rem; line-height: 1.55; font-weight: 600; color: var(--hm-sand);
}
.home .hm-cap__for::before, .home .hm-svc__for::before { content: ""; position: absolute; left: 2px; top: .52em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--hm-ember); box-shadow: 0 0 10px rgba(255, 122, 26, .7); }
.home .hm-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-weight: 600; font-size: .98rem; color: var(--hm-ember-hot);
  background: linear-gradient(90deg, var(--hm-ember), rgba(255, 122, 26, 0)) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px; transition: background-size .45s var(--hm-ease), color .2s;
}
.home a.hm-link:hover, .home a.hm-link:focus-visible, .home .hm-svc--care:hover .hm-link, .home .hm-case:hover .hm-link, .home .hm-door--link:hover .hm-link { background-size: 100% 1px; color: var(--hm-ember-pale); }

.home .hm-btn {
  --h: 52px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 1rem/1 var(--hm-body); letter-spacing: .005em; white-space: nowrap; text-decoration: none;
  transition: transform .25s var(--hm-ease), box-shadow .35s var(--hm-ease), background-color .3s, color .2s, opacity .3s;
}
.home .hm-btn--ember {
  color: #1a0e05;
  background: linear-gradient(180deg, #ff9a4c 0%, #ff7a1a 50%, #f2621c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 238, 220, .62), inset 0 -1px 0 rgba(130, 36, 0, .35), 0 0 0 1px rgba(255, 140, 60, .28), 0 12px 32px -10px rgba(255, 106, 20, .78);
}
.home .hm-btn--ghost { color: var(--hm-text); background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17); }
.home .hm-btn--text { height: auto; padding: 6px 4px; border-radius: 6px; color: var(--hm-ember-hot); background: none; }
.home .hm-btn--sm { --h: 42px; padding: 0 18px; font-size: .92rem; }
@media (hover: hover) and (pointer: fine) {
  .home .hm-btn--ember:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 240, 225, .7), inset 0 -1px 0 rgba(130, 36, 0, .35), 0 0 0 1px rgba(255, 160, 80, .5), 0 18px 42px -10px rgba(255, 106, 20, .95); }
  .home .hm-btn--ghost:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .6), 0 10px 30px -12px rgba(255, 106, 20, .55); }
  .home .hm-btn--text:hover { color: var(--hm-ember-pale); }
}
.home .hm-btn:active { transform: translateY(0); }
.home .hm-btn[disabled] { cursor: progress; opacity: .7; transform: none; }

/* whole-card links: the one real link per card stretches over it, so images keep their own descriptions */
.home .hm-stretch::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.home .hm-stretch:focus-visible { outline: none; }
.home .hm-stretch:focus-visible::after { outline: 3px solid var(--brand); outline-offset: 6px; }

/* ============================================================================
   1  THE INTRO: hero copy and "What I do / 01" beside one stage
   ============================================================================ */
.home .hm-intro { position: relative; display: grid; grid-template-columns: minmax(0, var(--hm-split)) minmax(0, 1fr); margin-top: calc(-1 * var(--hm-nav)); }
.home .hm-hero {
  grid-column: 1; grid-row: 1; position: relative; z-index: 2;
  min-height: max(100vh, 600px); min-height: max(100svh, 600px);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--hm-nav) + clamp(16px, 5vh, 64px)) 24px clamp(30px, 6vh, 80px) var(--hm-gutter);
}
.home .hm-hero__inner { max-width: 620px; }
.home .hm-web { grid-column: 1; grid-row: 2; position: relative; z-index: 2; padding: clamp(24px, 6vh, 72px) 24px clamp(90px, 14vh, 170px) var(--hm-gutter); }
.home .hm-web__inner { max-width: 560px; }
.home .hm-cap--web { margin-top: clamp(48px, 9vh, 96px); }

/* the hero headline: line one pale stone, line two heated to ember (one pass on load) */
.home .hm-title {
  font-family: var(--hm-display); font-weight: 700; font-size: clamp(2.4rem, .9rem + 2.9vw, 4.2rem);
  line-height: 1.02; letter-spacing: -.036em; color: var(--hm-text);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)) drop-shadow(0 12px 26px rgba(0, 0, 0, .45));
}
.home .hm-title__l1, .home .hm-title__l2 { display: block; text-wrap: balance; }
.home .hm-title__l2 { margin-top: .04em; color: var(--hm-ember); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home .hm-title__l1 {
    background-image: var(--tx-grain-ink-soft), linear-gradient(177deg, #fdfaf4 18%, #ece5d9 52%, #c6bdaf 88%);
    background-size: 180px 180px, 100% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .home .hm-title__l2 {
    background-image:
      var(--tx-grain-ink-soft),
      linear-gradient(180deg, rgba(255, 232, 186, .2) 0%, rgba(255, 232, 186, 0) 12%, rgba(74, 18, 0, .16) 28%, rgba(74, 18, 0, 0) 33.4%),
      linear-gradient(180deg, #ffb058 0%, #ff7a1a 14%, #f2541b 31%, #ffe9c9 46%, #ff9c45 56%, #b2360a 70%, #4b2617 84%, #2a1d17 100%);
    background-size: 180px 180px, 100% 300%, 100% 300%;
    background-position: 0 0, 0 0, 0 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .home.hm-intro-run .hm-title__l2 { animation: hmHeat 1.7s cubic-bezier(.3, .1, .2, 1) .35s both; }
}
@keyframes hmHeat {
  0% { background-position: 0 0, 0 100%, 0 100%; }
  100% { background-position: 0 0, 0 0, 0 0; }
}
.home .hm-hero__sub { margin-top: clamp(16px, 2.6vh, 26px); max-width: 35rem; font-size: 1.12rem; line-height: 1.66; color: var(--hm-muted); }
.home .hm-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: clamp(22px, 3.4vh, 34px); }
.home .hm-marks {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 600px;
  margin-top: clamp(26px, 5vh, 56px); border-top: 1px solid var(--hm-hair);
}
.home .hm-marks li { position: relative; padding: 16px 16px 0 0; font-size: .9rem; line-height: 1.45; color: var(--hm-muted); }
.home .hm-marks li + li { padding-left: 16px; border-left: 1px solid var(--hm-hair); }
.home .hm-marks strong {
  display: flex; align-items: center; gap: 9px; margin-bottom: 6px;
  font: 600 .72rem/1 var(--hm-label); letter-spacing: .16em; text-transform: uppercase; color: var(--hm-text);
}
.home .hm-marks strong::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: linear-gradient(135deg, #ffc48a, #f2541b); box-shadow: 0 0 9px rgba(255, 122, 26, .6); }

/* ---------- the stage: a charcoal studio sweep with one soft warm glow behind the tablet, faint strata at the right ---------- */
.home .hm-stage {
  grid-column: 1 / -1; grid-row: 1 / span 2; align-self: start; position: sticky; top: 0; z-index: 1;
  height: max(100vh, 600px); height: max(100svh, 600px); overflow: hidden;
}
.home .hm-env { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.home .hm-env__wall {   /* the sweep peaks behind the tablet, so the stack stands on its own #1c1c1e; the strata come in from the
                          right edge and taper out before the copy (Lane 72, 18 Oct 2026) */
  position: absolute; inset: 0;
  background:
    var(--tx-grain-fine),
    radial-gradient(40% 50% at 71% 36%, var(--hm-glow) 0%, var(--hm-glow) 30%, var(--hm-glow-2) 62%, transparent 100%),
    linear-gradient(180deg, transparent 0%, transparent 72%, rgba(0, 0, 0, .22) 100%),
    radial-gradient(40% 1.9px at 78% 9.5%, rgba(255, 232, 206, .12) 0, rgba(255, 232, 206, .12) 30%, transparent 100%), radial-gradient(40% 10px at 78% calc(9.5% + 7px), rgba(0, 0, 0, .3), transparent 100%),
    radial-gradient(30% 1.9px at 100% 30%, rgba(255, 232, 206, .15) 0, rgba(255, 232, 206, .15) 30%, transparent 100%), radial-gradient(30% 10px at 100% calc(30% + 7px), rgba(0, 0, 0, .3), transparent 100%),
    radial-gradient(34% 1.9px at 100% 46.5%, rgba(255, 232, 206, .14) 0, rgba(255, 232, 206, .14) 30%, transparent 100%), radial-gradient(34% 10px at 100% calc(46.5% + 7px), rgba(0, 0, 0, .3), transparent 100%),
    radial-gradient(26% 1.9px at 100% 61%, rgba(255, 232, 206, .14) 0, rgba(255, 232, 206, .14) 30%, transparent 100%), radial-gradient(26% 10px at 100% calc(61% + 7px), rgba(0, 0, 0, .3), transparent 100%),
    radial-gradient(80% 86% at 70% 36%, var(--sweep-hi) 0%, var(--sweep-mid) 36%, var(--sweep-lo) 66%, var(--sweep-edge) 100%);
}
.home .hm-env__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 12, 14, .97) 0%, rgba(11, 12, 14, .9) 30%, rgba(11, 12, 14, .45) 46%, rgba(11, 12, 14, 0) 60%); }
.home .hm-env { -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 99%); mask-image: linear-gradient(180deg, #000 58%, transparent 99%); }   /* the room fades into the page's own grain, so no edge shows when the stage lets go */
.home .hm-motes { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

.home .hm-stage__set {
  position: absolute; top: 0; bottom: 0; left: var(--hm-split); right: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--hm-nav) + clamp(4px, 2vh, 24px)) var(--hm-gutter) max(62px, 4vh) clamp(8px, 1.6vw, 28px);   /* the bottom keeps the buttons clear of the fixed Pause motion pill */
}
.home .hm-stage__frame { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; container-type: size; }

/* ---------- the piece: design units (1em = one design unit), scaled to the frame by container units ---------- */
.home .hm-piece {
  --rx: -3deg; --ry: -18deg;
  position: absolute; left: 50%; top: 50%; width: 74em; height: 58em; margin: -29em 0 0 -37em;
  font-size: 9px; line-height: 1;
}
@supports (width: 1cqw) {   /* the plinth may run a little past the frame's sides; the device itself always fits */
  .home .hm-piece { font-size: min(calc(100cqw / 68), calc(100cqh / 56), 15px); }
}
.home .hm-world { position: absolute; inset: 0; perspective: 220em; perspective-origin: 54% 12%; }
.home .hm-rig {
  position: absolute; left: 37em; top: 43em; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
.home .hm-stack {   /* the rendered stack, placed in design units so it scales with the tablet; its own soft shadow is in the image */
  position: absolute; left: -2.398em; top: 38.031em; width: 77.943em; height: 19.005em; pointer-events: none;
}
.home .hm-stack img { display: block; width: 100%; height: 100%; }

/* the stack's 3D planes (the stack itself is the image above): the glass slab is 64 x 22 x 1.3, tier 1 is 66.5 x 24.5 x 2.3;
   the rig's origin is the glass top's center */
.home .hm-plinth { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.home .hm-plinth > div { position: absolute; }
.home .hm-plinth__glass-top {   /* clear: only the tablet's own contact shadow on the glass */
  left: -32em; top: -11em; width: 64em; height: 22em; transform: rotateX(90deg);
  background: radial-gradient(47% 11% at 50% 61%, rgba(0, 0, 0, .62), rgba(0, 0, 0, .25) 55%, transparent 78%);
}
.home .hm-plinth__stone-front {   /* tier 1's front face, clear: it carries the emblem and the seam */
  left: -33.25em; top: 1.3em; width: 66.5em; height: 2.3em; transform: translateZ(12.25em);
}
.home .hm-plinth__seam {   /* invisible: it only marks where the embers rise, along the stack's lit edge */
  position: absolute; left: 3%; right: 3%; top: -.08em; height: .22em; visibility: hidden;
}
.home .hm-plinth__mark { position: absolute; left: 50%; top: .13em; width: 1.76em; margin-left: -.88em; }
.home .hm-plinth__mark img {   /* the header's flat emblem: crisp at this size; pressed in, a dark lip below and a warm lip above */
  display: block; width: 100%; height: auto;
  filter: saturate(.85) brightness(.9) drop-shadow(0 .06em .02em rgba(0, 0, 0, .85)) drop-shadow(0 -.035em 0 rgba(255, 228, 196, .38));
}
.home .hm-plinth__mark::after {   /* a static warm metallic sheen, shaped by the emblem itself */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(118deg, transparent 26%, rgba(255, 242, 224, .5) 43%, rgba(255, 214, 170, .16) 53%, transparent 63%);
  -webkit-mask: url("assets/emblem-main.png") center / contain no-repeat; mask: url("assets/emblem-main.png") center / contain no-repeat;
}

/* the device: 60 x 37.5, 1.4 deep, standing on the glass and leaning back a little */
.home .hm-device {
  position: absolute; left: -30em; top: -37.5em; width: 60em; height: 37.5em; transform-style: preserve-3d;
  transform-origin: 50% 100%; transform: translateZ(3em) rotateX(5deg);
}
.home .hm-device__front {
  position: absolute; inset: 0; padding: 1.1em; border-radius: 2em;
  background: linear-gradient(150deg, #4c4f55 0%, #26282c 12%, #141518 50%, #0b0c0e 100%);
  box-shadow:
    inset 0 0 0 .1em rgba(255, 255, 255, .13),
    inset .14em .16em 0 rgba(255, 255, 255, .1),
    inset -.18em -.18em .5em rgba(0, 0, 0, .55),
    0 3em 6em -1.5em rgba(0, 0, 0, .8);
}
.home .hm-device__front::after {   /* the warm rim light on the edge nearest the light */
  content: ""; position: absolute; top: 6%; bottom: 6%; right: -.05em; width: .3em; border-radius: .3em;
  background: linear-gradient(180deg, transparent, rgba(255, 170, 110, .7) 30%, rgba(255, 122, 26, .9) 62%, transparent);
  filter: blur(.06em); box-shadow: 0 0 1.4em rgba(255, 122, 26, .45);
}
.home .hm-device__side {
  position: absolute; left: 59.3em; top: .6em; width: 1.4em; height: 36.3em; transform: translateZ(-.7em) rotateY(90deg);
  background: linear-gradient(180deg, #2b2d31, #121315 60%, #0a0a0b); box-shadow: inset 0 0 0 .08em rgba(255, 200, 150, .14);
}

/* ---------- the screen: an invented business's site (decorative). data-view picks the layer on show ---------- */
.home .hm-screen {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 1em;
  background: linear-gradient(180deg, #f7f3ec 0%, #f1ebe1 62%, #ebe3d6 100%);
  color: var(--hm-ink); font-family: var(--hm-body); font-size: 1em;
}
.home .hm-site { position: absolute; inset: 0; transition: opacity .5s var(--hm-ease); }
.home .hm-site__nav { position: absolute; left: 0; right: 0; top: 0; height: 3.6em; padding: 0 2.8em; display: flex; align-items: center; gap: 2em; border-bottom: .1em solid rgba(31, 26, 21, .07); }
.home .hm-site__logo { display: inline-flex; align-items: center; gap: .6em; font: 600 1.3em/1 var(--hm-serif); letter-spacing: -.01em; color: var(--hm-ink); white-space: nowrap; }
.home .hm-site__logo i { width: .82em; height: .82em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd2a6, #d06a24 45%, #5a2208); }
.home .hm-site__links { margin-left: auto; display: flex; gap: 2.2em; font-size: 1em; color: #4a4238; white-space: nowrap; }
.home .hm-site__pill { display: inline-flex; align-items: center; gap: .5em; height: 2.4em; padding: 0 1.2em; border-radius: 99em; background: #ff7a1a; color: #1a0e05; font-weight: 600; font-size: .95em; white-space: nowrap; box-shadow: 0 .5em 1.2em -.5em rgba(242, 84, 27, .7); transition: box-shadow .4s, background-color .4s, color .4s; }
.home .hm-site__pill--nav { height: 2.2em; }
.home .hm-site__pill--ghost { background: transparent; color: var(--hm-ink); box-shadow: inset 0 0 0 .1em rgba(31, 26, 21, .28); }
.home .hm-site__pill--ghost b { font-weight: 600; }
.home .hm-site__copy { position: absolute; left: 2.8em; top: 7.4em; width: 26.5em; display: flex; flex-direction: column; align-items: flex-start; }
.home .hm-site__rule { width: 2.4em; height: .22em; border-radius: .2em; background: #e8661f; }
.home .hm-site__h { margin-top: .36em; font: 500 3.45em/1.04 var(--hm-serif);   /* .36em of its own 3.45em = 1.25 screen units */ letter-spacing: -.02em; color: #1b1612; transition: background-size .6s var(--hm-ease); background: linear-gradient(transparent 64%, rgba(255, 140, 60, .32) 64%, rgba(255, 140, 60, .32) 92%, transparent 92%) 0 0 / 0 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.home .hm-site__intro { position: relative; margin-top: 1.4em; width: 22.6em; min-height: 2.9em; }
.home .hm-site__bars { display: grid; gap: .55em; transition: opacity .4s; }
.home .hm-site__bars i { display: block; height: .5em; border-radius: .25em; background: rgba(40, 34, 28, .15); }
.home .hm-site__bars i:nth-child(1) { width: 96%; }
.home .hm-site__bars i:nth-child(2) { width: 88%; }
.home .hm-site__bars i:nth-child(3) { width: 58%; }
.home .hm-site__words { position: absolute; left: 0; top: -.2em; right: 0; font-size: 1.02em; line-height: 1.45; color: #3c342b; opacity: 0; transition: opacity .4s; }
.home .hm-site__actions { display: flex; gap: .9em; margin-top: 1.5em; }
.home .hm-site__art { position: absolute; left: 31em; right: 0; top: 3.6em; height: 23.4em; transition: opacity .5s; }
.home .hm-site__art picture { display: block; width: 100%; height: 100%; }
.home .hm-site__art img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }
.home .hm-site__row { position: absolute; left: 0; right: 0; top: 27em; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: .1em solid rgba(31, 26, 21, .08); background: rgba(255, 252, 247, .5); }
.home .hm-site__col { position: relative; display: flex; flex-direction: column; gap: .55em; padding: 1.35em 2.8em 0; }
.home .hm-site__col + .hm-site__col { border-left: .1em solid rgba(31, 26, 21, .07); }
.home .hm-site__col em { font: 600 .78em/1 var(--hm-label); font-style: normal; letter-spacing: .14em; color: #c4561a; }
.home .hm-site__col b { font: 500 1.35em/1.1 var(--hm-serif); color: #1b1612; }
.home .hm-site__col .hm-site__bars { gap: .45em; margin-top: .1em; }
.home .hm-site__col .hm-site__bars i { height: .4em; }
.home .hm-site__col .hm-site__bars i:nth-child(2) { width: 70%; }
.home .hm-site__col .hm-site__words { top: 4.6em; left: 2.8em; right: 1.8em; bottom: auto; font-size: .9em; line-height: 1.35; }

.home .hm-screen__glass {   /* the glass over the screen: a soft sheen from the upper left and the light's reflection */
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(205deg, rgba(255, 220, 190, .1) 0%, rgba(255, 220, 190, 0) 26%),
    radial-gradient(120% 70% at 50% 120%, rgba(30, 18, 8, .12), transparent 60%);
}

/* overlays: one per layer, cross-faded */
.home .hm-ov { position: absolute; inset: 0; z-index: 3; opacity: 0; visibility: hidden; transition: opacity .45s var(--hm-ease), visibility 0s linear .45s; }
.home .hm-screen[data-view="structure"] .hm-ov--structure,
.home .hm-screen[data-view="content"] .hm-ov--content,
.home .hm-screen[data-view="visual"] .hm-ov--visual,
.home .hm-screen[data-view="functionality"] .hm-ov--functionality { opacity: 1; visibility: visible; transition: opacity .5s var(--hm-ease) .05s, visibility 0s; }

/* Structure: the finished site recedes; its wireframe and site map show */
.home .hm-screen[data-view="structure"] .hm-site { opacity: .07; }
.home .hm-ov--structure { background: linear-gradient(180deg, rgba(247, 243, 236, .5), rgba(239, 232, 221, .5)); }
.home .hm-wf__grid { position: absolute; left: 2.8em; right: 2.8em; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, rgba(232, 102, 31, .07) 0 3.6em, transparent 3.6em 4.38em); }
.home .hm-wf { position: absolute; border: .12em dashed rgba(31, 26, 21, .42); border-radius: .45em; background: rgba(255, 253, 249, .55); }
.home .hm-wf b { position: absolute; left: .7em; top: -.62em; padding: 0 .45em; background: #f3eee5; font: 700 .62em/1.2 var(--hm-label); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-ink-ember); white-space: nowrap; }
.home .hm-wf--nav { left: 1.6em; right: 1.6em; top: .7em; height: 2.2em; }
.home .hm-wf--head { left: 2.8em; top: 8.6em; width: 23.4em; height: 7.8em; }
.home .hm-wf--intro { left: 2.8em; top: 17.3em; width: 22.6em; height: 3.3em; }
.home .hm-wf--cta { left: 2.8em; top: 21.6em; width: 16em; height: 2.9em; }
.home .hm-wf--img {
  left: 31.6em; right: 1.6em; top: 4.6em; height: 21.4em;
  background:
    linear-gradient(to top right, transparent calc(50% - .07em), rgba(31, 26, 21, .2) 50%, transparent calc(50% + .07em)),
    linear-gradient(to bottom right, transparent calc(50% - .07em), rgba(31, 26, 21, .2) 50%, transparent calc(50% + .07em)),
    rgba(255, 253, 249, .55);
}
.home .hm-wf--c1, .home .hm-wf--c2, .home .hm-wf--c3 { top: 28.3em; height: 5.7em; width: 15.4em; }
.home .hm-wf--c1 { left: 2.8em; }
.home .hm-wf--c2 { left: 21.2em; }
.home .hm-wf--c3 { left: 39.6em; }
.home .hm-map {
  position: absolute; left: 34.2em; top: 8.8em; width: 20.8em; padding: 1.5em 1.4em 1.6em; border-radius: 1em;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(160deg, #2a2724, #161412); color: #f4efe6;
  box-shadow: 0 1.2em 2.4em -1em rgba(20, 12, 6, .6), inset 0 0 0 .1em rgba(255, 214, 170, .12);
}
.home .hm-map__root { display: inline-flex; padding: .45em 1em; border-radius: 99em; background: #ff7a1a; color: #1a0e05; font: 700 .9em/1 var(--hm-body); }
.home .hm-map__kids { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9em .8em; width: 100%; margin-top: 2.2em; }
.home .hm-map__kids::before { content: ""; position: absolute; left: 25%; right: 25%; top: -1.1em; height: .7em; border: .12em solid rgba(255, 150, 80, .7); border-bottom: 0; border-radius: .5em .5em 0 0; }
.home .hm-map__kids::after { content: ""; position: absolute; left: 50%; top: -2em; width: .12em; height: .9em; background: rgba(255, 150, 80, .7); }
.home .hm-map__kids i { font: 600 .82em/1 var(--hm-body); font-style: normal; text-align: center; padding: .6em .3em; border-radius: .5em; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .1); }

/* Content: the words come forward, everything else steps back */
.home .hm-screen[data-view="content"] .hm-site__art { opacity: .14; }
.home .hm-screen[data-view="content"] .hm-site__bars { opacity: 0; }
.home .hm-screen[data-view="content"] .hm-site__words { opacity: 1; }
.home .hm-screen[data-view="content"] .hm-site__h { background-size: 100% 100%; }
.home .hm-screen[data-view="content"] .hm-site__pill { background: transparent; color: var(--hm-ink); box-shadow: inset 0 0 0 .1em rgba(31, 26, 21, .3); }
.home .hm-screen[data-view="content"] .hm-site__logo i, .home .hm-screen[data-view="content"] .hm-site__rule { opacity: .25; }
.home .hm-tag {   /* a tag's own font is .64 screen units, so --u converts its offsets back to screen units */
  --u: 1.5625em;
  position: absolute; display: inline-flex; align-items: center; gap: .5em; padding: .45em .8em; border-radius: 99em;
  background: #1d1a17; color: #f6eee3; font: 700 .64em/1 var(--hm-label); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 .6em 1.2em -.6em rgba(0, 0, 0, .5);
}
.home .hm-tag::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #ff7a1a; box-shadow: 0 0 .7em #ff7a1a; }
.home .hm-tag--head { left: calc(27.4 * var(--u)); top: calc(9.4 * var(--u)); }
.home .hm-tag--intro { left: calc(26.4 * var(--u)); top: calc(17.9 * var(--u)); }
.home .hm-tag--cta { left: calc(19.8 * var(--u)); top: calc(22.4 * var(--u)); }
.home .hm-tag--row { left: calc(42.6 * var(--u)); top: calc(26.4 * var(--u)); }
.home .hm-tag--head::after, .home .hm-tag--intro::after, .home .hm-tag--cta::after {   /* the leader line back to the words */
  content: ""; position: absolute; right: 100%; top: 50%; width: calc(1.8 * var(--u)); height: .16em; background: linear-gradient(90deg, rgba(232, 102, 31, .2), #e8661f);
}

/* Visual direction: the palette and type, on a card over the finished site */
.home .hm-style {
  position: absolute; right: 2em; bottom: 2em; width: 23em; padding: 1.4em 1.5em 1.5em; border-radius: 1.1em;
  background: linear-gradient(165deg, rgba(36, 33, 30, .94), rgba(20, 18, 16, .96)); color: #f4efe6;
  box-shadow: 0 1.6em 3em -1.2em rgba(20, 12, 6, .7), inset 0 0 0 .1em rgba(255, 214, 170, .14), inset 0 .12em 0 rgba(255, 236, 214, .12);
}
.home .hm-style__head { display: block; font: 700 .66em/1 var(--hm-label); letter-spacing: .16em; text-transform: uppercase; color: #ffb27a; }
.home .hm-style__swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; margin-top: 1.2em; }
.home .hm-style__swatches span { display: flex; flex-direction: column; align-items: center; gap: .55em; font: 600 .7em/1 var(--hm-body); color: #cfc6b9; }
.home .hm-style__swatches i { width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .16), 0 .5em 1em -.4em rgba(0, 0, 0, .6); }
.home .hm-style__type { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: .2em .7em; margin-top: 1.3em; padding-top: 1.1em; border-top: .1em solid rgba(255, 255, 255, .1); font: 500 .74em/1 var(--hm-body); color: #cfc6b9; }
.home .hm-style__serif { font: 500 2.6em/1 var(--hm-serif); color: #fff6ea; }
.home .hm-style__sans { font: 700 2.4em/1 var(--hm-display); letter-spacing: -.03em; color: #ffb27a; }
.home .hm-screen[data-view="visual"] .hm-site__h { color: #120e0b; }

/* Functionality: the parts a visitor uses light up, and one runs */
.home .hm-screen[data-view="functionality"] .hm-site__h,
.home .hm-screen[data-view="functionality"] .hm-site__intro,
.home .hm-screen[data-view="functionality"] .hm-site__art,
.home .hm-screen[data-view="functionality"] .hm-site__row,
.home .hm-screen[data-view="functionality"] .hm-site__rule { opacity: .38; transition: opacity .5s; }
.home .hm-site__h, .home .hm-site__intro, .home .hm-site__row, .home .hm-site__rule { transition: opacity .5s, background-size .6s var(--hm-ease); }
.home .hm-fx-ring { position: absolute; border-radius: 99em; box-shadow: 0 0 0 .18em #ff7a1a, 0 0 1.6em .2em rgba(255, 122, 26, .45); }
.home .hm-fx-ring--nav { right: 2.4em; top: .42em; width: 9.6em; height: 2.76em; }
.home .hm-fx-ring--cta { left: 2.35em; top: 21.45em; width: 8.95em; height: 2.75em; }
.home .hm-drawer {
  position: absolute; right: 1.6em; top: 4.6em; width: 19.5em; padding: 1.5em 1.5em 1.6em; border-radius: 1em;
  display: flex; flex-direction: column; gap: .75em;
  background: #fffdf9; box-shadow: 0 1.8em 3.2em -1.2em rgba(30, 18, 8, .45), inset 0 0 0 .1em rgba(31, 26, 21, .08);
  transform: translateX(118%);
}
.home .hm-drawer__title { font: 500 1.5em/1.1 var(--hm-serif); color: #1b1612; margin-bottom: .2em; }
.home .hm-drawer__field { display: flex; flex-direction: column; gap: .35em; }
.home .hm-drawer__field em { font: 700 .62em/1 var(--hm-label); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-ink-muted); }
.home .hm-drawer__field span { display: block; padding: .62em .7em; border-radius: .5em; background: #f4efe6; box-shadow: inset 0 0 0 .1em rgba(31, 26, 21, .12); font-size: .86em; color: #2b241d; white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); }
.home .hm-drawer__field--tall span { padding-bottom: 1.8em; }
.home .hm-drawer__send { align-self: flex-start; margin-top: .3em; padding: .65em 1.4em; border-radius: 99em; background: #ff7a1a; color: #1a0e05; font: 700 .86em/1 var(--hm-body); }
.home .hm-toast {
  position: absolute; left: 50%; bottom: 2.2em; display: inline-flex; align-items: center; gap: .6em; padding: .8em 1.3em; border-radius: 99em;
  background: #1d1a17; color: #f6eee3; font: 600 .95em/1 var(--hm-body); transform: translate(-50%, 1em); opacity: 0;
  box-shadow: 0 1em 2em -.8em rgba(0, 0, 0, .55);
}
.home .hm-toast i { width: 1.2em; height: 1.2em; border-radius: 50%; background: #ff7a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%231a0e05' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.home .hm-cursor { position: absolute; left: 0; top: 0; width: 2.2em; height: 2.2em; opacity: 0; transform: translate(30em, 30em); }
.home .hm-cursor svg { display: block; width: 100%; height: 100%; fill: #1b1612; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 .2em .3em rgba(0, 0, 0, .35)); }
.home .hm-cursor__ring { position: absolute; left: -.6em; top: -.6em; width: 1.8em; height: 1.8em; border-radius: 50%; border: .16em solid #ff7a1a; opacity: 0; }
/* the run: the cursor clicks "Get in touch", the form fills itself in and sends (3.6s, once per selection) */
.home .hm-screen.is-run .hm-cursor { animation: hmCursor 3.6s var(--hm-ease-io) both; }
.home .hm-screen.is-run .hm-cursor__ring { animation: hmClick 3.6s linear both; }
.home .hm-screen.is-run .hm-drawer { animation: hmDrawer 3.6s var(--hm-ease) both; }
.home .hm-screen.is-run .hm-drawer__field span { animation: hmType 3.6s linear both; }
.home .hm-screen.is-run .hm-drawer__field:nth-of-type(3) span { animation-name: hmType2; }
.home .hm-screen.is-run .hm-drawer__field:nth-of-type(4) span { animation-name: hmType3; }
.home .hm-screen.is-run .hm-drawer__send { animation: hmSend 3.6s linear both; }
.home .hm-screen.is-run .hm-toast { animation: hmToast 3.6s var(--hm-ease) both; }
.home .hm-screen.is-done .hm-drawer { transform: none; }
.home .hm-screen.is-done .hm-drawer__field span { clip-path: none; }
.home .hm-screen.is-done .hm-toast { opacity: 1; transform: translate(-50%, 0); }
@keyframes hmCursor {
  0% { opacity: 0; transform: translate(26em, 30em); }
  8% { opacity: 1; transform: translate(26em, 30em); }
  30% { transform: translate(49.6em, 1.4em); }
  36% { transform: translate(49.6em, 1.4em) scale(.86); }
  40% { transform: translate(49.6em, 1.4em); }
  70% { opacity: 1; transform: translate(40.2em, 22.6em); }
  76% { transform: translate(40.2em, 22.6em) scale(.86); }
  80% { opacity: 1; transform: translate(40.2em, 22.6em); }
  100% { opacity: 0; transform: translate(42em, 25em); }
}
@keyframes hmClick { 0%, 34% { opacity: 0; transform: scale(.4); } 37% { opacity: 1; transform: scale(.6); } 44% { opacity: 0; transform: scale(1.8); } 74% { opacity: 0; transform: scale(.4); } 77% { opacity: 1; transform: scale(.6); } 84%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes hmDrawer { 0%, 38% { transform: translateX(118%); } 50%, 100% { transform: none; } }
@keyframes hmType { 0%, 50% { clip-path: inset(0 100% 0 0); } 57%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes hmType2 { 0%, 55% { clip-path: inset(0 100% 0 0); } 62%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes hmType3 { 0%, 60% { clip-path: inset(0 100% 0 0); } 68%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes hmSend { 0%, 75% { filter: none; } 77% { filter: brightness(.82); } 82%, 100% { filter: none; } }
@keyframes hmToast { 0%, 80% { opacity: 0; transform: translate(-50%, 1em); } 88%, 100% { opacity: 1; transform: translate(-50%, 0); } }

.home .hm-wires path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the layer buttons and their caption ---------- */
.home .hm-layers { position: relative; z-index: 2; width: 100%; max-width: 640px; flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; }
.home .hm-layers__label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 .72rem/1.5 var(--hm-label); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-ember-hot);
}
.home .hm-layers__label::before, .home .hm-layers__label::after { content: ""; width: 18px; height: 1px; background: linear-gradient(90deg, rgba(255, 122, 26, 0), var(--hm-ember)); }
.home .hm-layers__label::after { transform: scaleX(-1); }
.home .hm-layers__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.home .hm-layer {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .92rem/1.2 var(--hm-body); color: var(--hm-text);
  background: linear-gradient(180deg, rgba(40, 42, 47, .94), rgba(18, 19, 22, .96));
  box-shadow: inset 0 0 0 1px var(--hm-hair-2), inset 0 1px 0 rgba(255, 236, 214, .08), 0 10px 24px -14px rgba(0, 0, 0, .9);
  transition: box-shadow .3s, color .2s, background .3s, transform .25s var(--hm-ease);
}
.home .hm-layer .hm-ico { width: 17px; height: 17px; color: #b8b0a5; transition: color .25s; }
@media (hover: hover) and (pointer: fine) {
  .home .hm-layer:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .5), inset 0 1px 0 rgba(255, 236, 214, .1), 0 8px 30px rgba(242, 84, 27, .18); }
  .home .hm-layer:hover .hm-ico { color: var(--hm-ember-hot); }
}
.home .hm-layer[aria-pressed="true"] {
  color: #fff3e6; background: linear-gradient(180deg, rgba(92, 44, 16, .78), rgba(40, 20, 9, .88));
  box-shadow: inset 0 0 0 1px rgba(255, 140, 60, .8), inset 0 1px 0 rgba(255, 220, 190, .25), 0 0 26px -4px rgba(255, 106, 20, .55);
}
.home .hm-layer[aria-pressed="true"] .hm-ico { color: var(--hm-ember-hot); }
.home .hm-layers__caption { min-height: 3em; max-width: 30rem; margin-top: 12px; font-size: .95rem; line-height: 1.5; color: var(--hm-muted); text-wrap: balance; }
.home .hm-layers__caption b { color: var(--hm-text); font-weight: 600; }

/* ============================================================================
   2  DIGITAL TOOLS & WORKFLOWS: three connected steps
   ============================================================================ */
.home .hm-tools {
  position: relative; padding: clamp(100px, 13vh, 150px) var(--hm-gutter) clamp(56px, 8vh, 96px);
  background: radial-gradient(48% 46% at 72% 70%, rgba(255, 106, 22, .07), transparent 72%);
}
.home .hm-tools__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); gap: clamp(28px, 3.6vw, 64px); align-items: center; max-width: 1480px; margin: 0 auto; }
.home .hm-cap--tools { align-self: center; }
.home .hm-wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.home .hm-w__groove { stroke: rgba(0, 0, 0, .6); stroke-width: 7; }
.home .hm-w__glow { stroke: rgba(255, 110, 25, .26); stroke-width: 6; transition: stroke .5s; }
.home .hm-w__core { stroke: rgba(255, 178, 122, .78); stroke-width: 1.6; transition: stroke .5s; }
.home .hm-w.is-lit .hm-w__glow { stroke: rgba(255, 122, 26, .55); }
.home .hm-w.is-lit .hm-w__core { stroke: #ffd2ae; }
.home .hm-w__node { fill: #ffb27a; }
.home .hm-w__halo { fill: rgba(255, 122, 26, .3); }
.home .hm-pulses { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; }
.home .hm-pulse {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #fff6ec 0 22%, #ffb27a 38%, rgba(255, 122, 26, .5) 56%, rgba(255, 122, 26, 0) 72%);
  box-shadow: 0 0 14px 3px rgba(255, 122, 26, .45); will-change: transform, opacity;
}

.home .hm-flow { position: relative; padding-top: 34px; }
.home .hm-flow__floor {   /* warm light pooled under the three steps (the lit loop around them is drawn with the wires) */
  position: absolute; left: -6%; right: -4%; top: 40%; bottom: 40px; pointer-events: none;
  background: radial-gradient(50% 50% at 54% 62%, rgba(255, 106, 22, .14), rgba(255, 106, 22, .04) 56%, transparent 74%);
}
.home .hm-w--loop .hm-w__fill { fill: rgba(255, 106, 22, .04); stroke: none; }
.home .hm-w--loop .hm-w__glow { stroke: rgba(255, 110, 25, .18); stroke-width: 7; }
.home .hm-w--loop .hm-w__core { stroke: rgba(255, 168, 110, .5); stroke-width: 1.3; }
.home .hm-flow__cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 36px); align-items: start; perspective: 1500px; perspective-origin: 40% 0; }
.home .hm-node { position: relative; transform: rotateY(-10deg) rotateX(3deg); transform-origin: 50% 100%; }
.home .hm-node--rules { margin-top: 18px; }
.home .hm-node--follow { margin-top: 36px; }
.home .hm-node__side { margin: 0 0 10px 4px; font: 600 .68rem/1.3 var(--hm-label); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-faint); }
.home .hm-node__card {
  position: relative; isolation: isolate; padding: 15px 14px 16px; border-radius: 18px; background: var(--hm-glass);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 236, 214, .12),
    7px 8px 0 -1px #08090b, 7px 8px 0 0 rgba(255, 140, 60, .14),
    0 36px 60px -26px rgba(0, 0, 0, .95);
  transition: box-shadow .5s;
}
.home .hm-node.is-active .hm-node__card {
  box-shadow:
    inset 0 0 0 1px rgba(255, 140, 60, .7), inset 0 1px 0 rgba(255, 236, 214, .16),
    7px 8px 0 -1px #08090b, 7px 8px 0 0 rgba(255, 140, 60, .4),
    0 36px 60px -26px rgba(0, 0, 0, .95), 0 0 46px -10px rgba(255, 106, 20, .6);
}
.home .hm-node__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--hm-hair); }
.home .hm-node__head .hm-ico { color: var(--hm-ember-hot); }
.home .hm-node__title { font: 700 1rem/1.2 var(--hm-display); letter-spacing: -.01em; color: var(--hm-text); white-space: nowrap; }
.home .hm-node__status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px;
  font: 600 .58rem/1.2 var(--hm-label); letter-spacing: .08em; text-transform: uppercase; color: var(--hm-faint);
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--hm-hair-2); white-space: nowrap;
}
.home .hm-node__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6f6a63; }
.home .hm-node__status[data-tone="live"] { color: var(--hm-ember-pale); box-shadow: inset 0 0 0 1px rgba(255, 140, 60, .5); }
.home .hm-node__status[data-tone="live"]::before { background: var(--hm-ember); box-shadow: 0 0 8px var(--hm-ember); }
.home .hm-node__status[data-tone="done"] { color: #f1e6d8; }
.home .hm-node__status[data-tone="done"]::before { background: #ffb27a; }

.home .hm-req { display: grid; gap: 12px; }
.home .hm-field { display: grid; gap: 6px; }
.home .hm-field > span, .home .hm-choice legend { font: 600 .66rem/1.2 var(--hm-label); letter-spacing: .12em; text-transform: uppercase; color: var(--hm-faint); }
.home .hm-field input {
  width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; font: 500 .95rem/1 var(--hm-body); color: var(--hm-text);
  background: rgba(0, 0, 0, .36); box-shadow: inset 0 0 0 1px var(--field-edge), inset 0 2px 6px rgba(0, 0, 0, .4);
}
.home .hm-field input::placeholder { color: #8a847b; }
.home .hm-field input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.home .hm-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.home .hm-choice legend { padding: 0; margin-bottom: 6px; }
.home .hm-choice__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.home .hm-choice label { position: relative; min-width: 0; }
.home .hm-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.home .hm-choice span {
  display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 4px; border-radius: 9px;
  font: 600 .76rem/1 var(--hm-body); color: #cfc8be; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--hm-hair-2);
  transition: box-shadow .25s, color .2s, background .25s;
}
.home .hm-choice input:checked + span { color: #fff3e6; background: rgba(255, 122, 26, .12); box-shadow: inset 0 0 0 1px rgba(255, 140, 60, .7); }
.home .hm-choice input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.home .hm-req__send { width: 100%; margin-top: 2px; }

.home .hm-rules { list-style: none; display: grid; gap: 8px; }
.home .hm-rules li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; column-gap: 9px; row-gap: 2px; padding: 8px 10px; border-radius: 10px;
  font-size: .86rem; line-height: 1.3; color: #c9c2b7; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--hm-hair);
  transition: background .4s, box-shadow .4s, color .3s;
}
.home .hm-rules li i { grid-row: span 2; position: relative; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #6f6a63; transition: box-shadow .3s, background .3s; }
.home .hm-rules li i::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%231a0e05' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s var(--hm-ease); }
.home .hm-rules li b { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .74rem/1.2 var(--hm-label); letter-spacing: .04em; color: #6f6a63; transition: color .3s; }
.home .hm-rules li.is-on b { color: var(--hm-ember-hot); }
.home .hm-rules li.is-on { color: var(--hm-text); background: rgba(255, 122, 26, .07); box-shadow: inset 0 0 0 1px rgba(255, 140, 60, .32); }
.home .hm-rules li.is-on i { background: var(--hm-ember); box-shadow: 0 0 12px rgba(255, 122, 26, .7); }
.home .hm-rules li.is-on i::after { opacity: 1; transform: none; }

.home .hm-board { list-style: none; display: grid; gap: 6px; }
.home .hm-board li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: .86rem; color: #c9c2b7; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--hm-hair); transition: background .5s, box-shadow .5s, color .3s; }
.home .hm-board li::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #6f6a63; }
.home .hm-board li[data-col="new"]::before { background: var(--hm-ember); box-shadow: 0 0 8px rgba(255, 122, 26, .7); }
.home .hm-board li[data-col="progress"]::before { background: #e7c4a2; }
.home .hm-board li[data-col="done"]::before { background: #8fbfa0; }
.home .hm-board li span { flex: 1; }
.home .hm-board b { min-width: 26px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; font: 700 .76rem/1 var(--hm-label); color: var(--hm-text); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--hm-hair-2); transition: background .4s, color .3s, box-shadow .4s; }
.home .hm-board li.is-bump { color: var(--hm-text); background: rgba(255, 122, 26, .08); box-shadow: inset 0 0 0 1px rgba(255, 140, 60, .4); }
.home .hm-board li.is-bump b { color: #1a0e05; background: var(--hm-ember); box-shadow: 0 0 14px rgba(255, 122, 26, .7); }
.home .hm-node__msg { margin-top: 10px; padding: 9px 10px; border-radius: 10px; min-height: 56px; font-size: .84rem; line-height: 1.4; color: var(--hm-faint); background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px var(--hm-hair); transition: color .3s, box-shadow .4s; }
.home .hm-node__msg.is-sent { color: var(--hm-text); box-shadow: inset 0 0 0 1px rgba(255, 140, 60, .35); }
.home .hm-node__msg.is-sent::before { content: ""; display: inline-block; width: 14px; height: 14px; margin: 0 7px -2px 0; border-radius: 50%; background: var(--hm-ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%231a0e05' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 76% no-repeat; }

.home .hm-port { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; z-index: 3; background: #1a1b1e; box-shadow: inset 0 0 0 2px rgba(255, 150, 80, .75), 0 0 10px rgba(255, 122, 26, .45); }
.home .hm-port[data-port$="-top"] { display: none; }   /* no lead into the steps from above since the plinth wires went (Lane 72) */
.home .hm-port[data-port$="-out"] { left: 100%; top: 58%; }
.home .hm-port[data-port$="-in"] { left: 0; top: 58%; }
.home .hm-port.is-lit { background: #ffb27a; box-shadow: 0 0 0 2px rgba(255, 220, 190, .9), 0 0 16px rgba(255, 122, 26, .9); }

.home .hm-note { position: relative; z-index: 2; margin-top: 58px; max-width: 40rem; font-size: .86rem; line-height: 1.55; color: var(--hm-faint); }
.home .hm-note strong { color: #cfc6b9; font-weight: 600; }

/* ============================================================================
   3  BRAND & SUPPORTING MATERIALS and WEBSITE CARE: one rail, built around the work
   ============================================================================ */
.home .hm-also {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  max-width: 1360px; margin: clamp(20px, 4vh, 48px) auto clamp(70px, 10vh, 120px); width: calc(100% - 2 * var(--hm-gutter));
  border-radius: 26px; background: linear-gradient(165deg, rgba(34, 36, 41, .74), rgba(14, 15, 18, .86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 236, 214, .08), 0 40px 80px -50px rgba(0, 0, 0, .95);
}
.home .hm-also::before {   /* the ember edge along the top, like the closing band's seam */
  content: ""; position: absolute; left: 6%; right: 6%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--seam-low) 22%, var(--seam-mid) 50%, var(--seam-hot) 66%, var(--seam-low) 84%, transparent);
  box-shadow: 0 0 14px 1px rgba(255, 112, 26, .4);
}
.home .hm-svc { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 26px; padding: clamp(26px, 3vw, 40px); border-radius: 26px; }
.home .hm-svc + .hm-svc::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 140, 60, .45) 30%, rgba(255, 140, 60, .45) 70%, transparent); }
.home .hm-svc__art { position: relative; height: 170px; }
.home .hm-svc__title { font: 700 1.32rem/1.2 var(--hm-display); letter-spacing: -.015em; color: var(--hm-text); }
.home .hm-svc__text { margin-top: 10px; font-size: .97rem; line-height: 1.65; color: var(--hm-muted); }
.home .hm-svc__for { margin-top: 12px; font-size: .9rem; }
.home .hm-svc .hm-link { margin-top: 14px; }
.home .hm-svc__also { list-style: none; display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hm-hair); }
.home .hm-svc__also li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; align-items: baseline; font-size: .88rem; line-height: 1.5; color: var(--hm-muted); }
.home .hm-svc__also b { grid-column: 1; color: var(--hm-text); font-weight: 600; }
.home .hm-svc__also span { grid-column: 1; }
.home .hm-svc__also a { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; color: var(--hm-ember-hot); white-space: nowrap; }
.home .hm-svc__also a:hover, .home .hm-svc__also a:focus-visible { color: var(--hm-ember-pale); text-decoration: underline; text-underline-offset: 3px; }
.home .hm-svc--care { cursor: pointer; transition: box-shadow .45s var(--hm-ease), transform .45s var(--hm-ease); }
.home .hm-svc--care:hover, .home .hm-svc--care:has(.hm-stretch:focus-visible) { box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .4), 0 8px 30px rgba(242, 84, 27, .18); }

/* the print pile (brand) */
.home .hm-print { position: absolute; display: block; border-radius: 6px; transition: transform .8s var(--hm-ease); }
.home .hm-print--sheet { left: 8px; top: 10px; width: 92px; height: 122px; padding: 12px 11px; background: linear-gradient(170deg, #f7f2ea, #e6ddcf); transform: rotate(-8deg); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .8); }
.home .hm-print--sheet b { display: block; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd2a6, #d06a24 45%, #5a2208); }
.home .hm-print--sheet i { display: block; height: 4px; margin-top: 7px; border-radius: 2px; background: rgba(40, 34, 28, .2); }
.home .hm-print--sheet i:nth-of-type(1) { margin-top: 12px; width: 90%; height: 6px; background: rgba(40, 34, 28, .5); }
.home .hm-print--sheet i:nth-of-type(3) { width: 64%; }
.home .hm-print--sheet em { position: absolute; left: 11px; right: 11px; bottom: 12px; height: 22px; border-radius: 3px; background: linear-gradient(90deg, #2b2825, #2b2825 33%, #b95a1d 33%, #b95a1d 66%, #ff7a1a 66%); }
.home .hm-print--swatch { left: 74px; top: 36px; width: 74px; height: 96px; padding: 9px; background: linear-gradient(170deg, #26282c, #141518); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 30px -14px rgba(0, 0, 0, .9); transform: rotate(7deg); }
.home .hm-print--swatch b { display: block; font: 500 1.7rem/1 var(--hm-serif); color: #f4efe6; }
.home .hm-print--swatch i { display: inline-block; width: 12px; height: 12px; margin: 10px 3px 0 0; border-radius: 50%; }
.home .hm-print--swatch i:nth-of-type(1) { background: #f3ede3; }
.home .hm-print--swatch i:nth-of-type(2) { background: #b95a1d; }
.home .hm-print--swatch i:nth-of-type(3) { background: #ff7a1a; }
.home .hm-print--swatch i:nth-of-type(4) { background: #4a4540; }
.home .hm-print--card { left: 34px; top: 104px; width: 64px; height: 64px; padding: 6px; background: #f7f2ea; transform: rotate(4deg); box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .85); }
.home .hm-print--card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home .hm-print--photo { left: 108px; top: 112px; width: 54px; height: 54px; padding: 4px; background: #f7f2ea; transform: rotate(-6deg); box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .85); }
.home .hm-print--photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
@media (hover: hover) and (pointer: fine) {
  .home .hm-svc--brand:hover .hm-print--sheet { transform: rotate(-11deg) translate(-4px, -3px); }
  .home .hm-svc--brand:hover .hm-print--swatch { transform: rotate(10deg) translate(4px, -4px); }
}

/* the care piece: a small site with its upkeep log */
.home .hm-care { position: absolute; inset: 6px 0 0; display: block; }
.home .hm-care__site { position: absolute; left: 6px; top: 12px; width: 118px; height: 84px; padding: 14px 12px; border-radius: 8px; background: linear-gradient(170deg, #f7f2ea, #e8e0d2); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .8); transform: rotate(-3deg); }
.home .hm-care__site i { display: block; height: 5px; margin-bottom: 7px; border-radius: 2px; background: rgba(40, 34, 28, .22); }
.home .hm-care__site i:nth-child(1) { width: 40%; height: 7px; background: rgba(40, 34, 28, .5); }
.home .hm-care__site i:nth-child(3) { width: 70%; }
.home .hm-care__site b { display: block; width: 46px; height: 14px; border-radius: 99px; background: #ff7a1a; }
.home .hm-care__badge { position: absolute; right: -14px; top: -14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #1a0e05; background: linear-gradient(180deg, #ffb06a, #f2621c); box-shadow: 0 0 0 4px rgba(11, 12, 14, .9), 0 0 18px rgba(255, 122, 26, .6); }
.home .hm-care__badge .hm-ico { width: 17px; height: 17px; stroke-width: 2.1; transition: transform 1.2s var(--hm-ease); }
.home .hm-svc--care:hover .hm-care__badge .hm-ico { transform: rotate(180deg); }
.home .hm-care__log { position: absolute; left: 34px; top: 92px; width: 130px; display: grid; gap: 5px; padding: 10px; border-radius: 9px; background: linear-gradient(170deg, rgba(44, 46, 51, .96), rgba(20, 21, 24, .98)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 30px -14px rgba(0, 0, 0, .9); }
.home .hm-care__row { display: flex; align-items: center; gap: 7px; font: 600 .6rem/1.2 var(--hm-label); letter-spacing: .08em; text-transform: uppercase; color: #cfc6b9; }
.home .hm-care__row::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hm-ember); box-shadow: 0 0 6px rgba(255, 122, 26, .7); }
.home .hm-care__row b { font-weight: 600; }

/* ============================================================================
   4  SELECTED WORK: the launched websites, framed
   ============================================================================ */
.home .hm-work { position: relative; isolation: isolate; padding: clamp(84px, 12vh, 140px) var(--hm-gutter) clamp(70px, 10vh, 120px); }
.home .hm-work::after {   /* the charcoal wall, fading in and out so no band edge shows (::after: styles.css still positions #work::before) */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tx-grain-fine), radial-gradient(70% 70% at 50% 40%, var(--sweep-mid) 0%, var(--sweep-lo) 55%, var(--sweep-edge) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.home .hm-work__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
.home .hm-wall__group-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-top: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--hm-hair); }
.home .hm-wall__group-head h3 { font: 700 1.4rem/1.15 var(--hm-display); letter-spacing: -.02em; color: var(--hm-text); }
.home .hm-wall__group-head p { margin-top: 8px; max-width: 40rem; font-size: .98rem; line-height: 1.6; color: var(--hm-muted); }
.home .hm-wall__group-head .hm-link { margin-top: 0; }
.home .hm-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 80px); margin-top: clamp(44px, 6vw, 72px); }
@media (min-width: 861px) {   /* an odd last exhibit (the third site, Lane 74) hangs centred under the pair, one column wide */
  .home .hm-case:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(40px, 5vw, 80px)) / 2); }
}
.home .hm-case { position: relative; }
.home .hm-case__visual { position: relative; display: block; }
.home .hm-case__stage { position: relative; width: 82%; aspect-ratio: 16 / 10; perspective: 1400px; }
.home .hm-case__frame {
  position: absolute; inset: 0; z-index: 2; padding: 10px; border-radius: 14px;
  background: linear-gradient(150deg, #44484f 0%, #23262b 18%, #141619 60%, #0b0c0e 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1.5px 0 rgba(255, 255, 255, .2), 0 40px 70px -34px rgba(0, 0, 0, .95), 0 14px 30px -18px rgba(0, 0, 0, .8);
  transition: transform .8s var(--hm-ease), box-shadow .8s var(--hm-ease);
}
.home .hm-case__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 6px; background: #16181b; }
.home .hm-case__frame::after { content: ""; position: absolute; inset: 10px; border-radius: 6px; pointer-events: none; background: linear-gradient(155deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 32%); }
.home .hm-case__ledge {   /* the lit glass ledge each site stands on */
  position: absolute; left: -3%; right: -3%; bottom: -16px; height: 10px; z-index: 1; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 214, 170, .32), rgba(255, 150, 80, .1) 50%, rgba(20, 10, 6, .4));
  box-shadow: 0 0 22px rgba(255, 122, 26, .22), 0 14px 26px -8px rgba(0, 0, 0, .9);
}
.home .hm-case__ledge::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--seam-mid) 40%, var(--seam-hot) 64%, transparent); box-shadow: 0 0 10px rgba(255, 112, 26, .6); }
.home .hm-case__more {
  position: absolute; z-index: 1; width: 38%; padding: 6px; border-radius: 9px; background: linear-gradient(160deg, #3b4047, #15171a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 26px 44px -22px rgba(0, 0, 0, .95);
  transition: transform .95s var(--hm-ease);
}
.home .hm-case__more img { display: block; width: 100%; height: auto; border-radius: 4px; }
.home .hm-case__more:nth-of-type(2) { right: 1%; top: 3%; transform: rotate(3deg); }
.home .hm-case__more:nth-of-type(3) { right: 6%; bottom: 3%; transform: rotate(-2deg); }
.home .hm-case.is-in .hm-case__more:nth-of-type(2) { transform: translate(40%, -7%) rotate(6deg); }
.home .hm-case.is-in .hm-case__more:nth-of-type(3) { transform: translate(44%, 8%) rotate(-4deg); }
.home .hm-case:hover .hm-case__frame, .home .hm-case:focus-within .hm-case__frame { box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .45), inset 0 1.5px 0 rgba(255, 255, 255, .2), 0 46px 80px -34px rgba(0, 0, 0, .95), 0 0 60px -26px rgba(255, 106, 20, .55); }
@media (hover: hover) and (pointer: fine) {
  .home .hm-case:hover .hm-case__frame { transform: translateY(-4px); }
  .home .hm-case:hover .hm-case__more:nth-of-type(2) { transform: translate(48%, -10%) rotate(8deg); }
  .home .hm-case:hover .hm-case__more:nth-of-type(3) { transform: translate(52%, 10%) rotate(-6deg); }
}
.home .hm-plaque { position: static; margin-top: clamp(40px, 5vw, 56px); max-width: 34rem; padding-left: 18px; border-left: 1px solid rgba(255, 122, 26, .5); }
.home .hm-plaque h4 { font: 700 1.1rem/1.3 var(--hm-display); letter-spacing: -.01em; color: var(--hm-text); }
.home .hm-plaque p { margin-top: 8px; font-size: .95rem; line-height: 1.6; color: var(--hm-muted); }
.home .hm-plaque .hm-plaque__meta { margin-top: 10px; font: 600 .72rem/1.5 var(--hm-label); letter-spacing: .12em; text-transform: uppercase; color: var(--hm-faint); }
.home .hm-plaque .hm-plaque__meta b { color: var(--hm-sand); font-weight: 600; }
.home .hm-plaque .hm-link { margin-top: 12px; }

/* an entry without `cases` (none today) renders as a framed card */
.home .hm-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: clamp(70px, 9vw, 110px); }
.home .hm-door--wide { grid-column: 1 / -1; }
.home .hm-door { position: relative; display: grid; grid-template-rows: auto 1fr; color: inherit; border-radius: 20px; background: linear-gradient(165deg, rgba(36, 39, 44, .86), rgba(16, 18, 21, .92)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 236, 214, .08), 0 34px 64px -42px rgba(0, 0, 0, .95); transition: transform .45s var(--hm-ease), box-shadow .45s var(--hm-ease); }
.home .hm-door--link:hover, .home .hm-door--link:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .45), 0 8px 30px rgba(242, 84, 27, .18); }
@media (hover: hover) and (pointer: fine) { .home .hm-door--link:hover { transform: translateY(-3px); } }
.home .hm-door__media { position: relative; margin: 10px 10px 0; border-radius: 12px; overflow: hidden; background: #15171a; }
.home .hm-door__media img { display: block; width: 100%; height: auto; }
.home .hm-door--wide .hm-door__media img { aspect-ratio: 1200 / 360; object-fit: contain; }
.home .hm-door__collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.home .hm-door__collage--6 { grid-template-columns: repeat(3, 1fr); }
.home .hm-door__collage img { width: 100%; height: 150px; object-fit: contain; background: #16181b; }
.home .hm-door__collage--cover img { object-fit: cover; }
.home .hm-door__ph { display: grid; place-items: center; height: 220px; color: var(--hm-muted); font-weight: 600; }
.home .hm-door__cap { position: static; padding: 18px 22px 22px; }
.home .hm-door__cap h3 { font: 700 1.12rem/1.25 var(--hm-display); letter-spacing: -.01em; color: var(--hm-text); }
.home .hm-door__cap p { margin-top: 6px; font-size: .93rem; line-height: 1.55; color: var(--hm-muted); }
.home .hm-door__cap .hm-link { margin-top: 12px; }
.home .hm-ba { position: relative; aspect-ratio: 1 / 1; overflow: hidden; touch-action: none; cursor: ew-resize; user-select: none; z-index: 5; }
.home .hm-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.home .hm-ba .hm-ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.home .hm-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: linear-gradient(180deg, #FFB23E, #FF7A1A, #F2541B); }
.home .hm-wall__fallback { list-style: none; display: grid; gap: 6px; margin-top: 30px; }

/* ============================================================================
   5  FAQ row and the closing band
   ============================================================================ */
.home .hm-faq { position: relative; padding: clamp(16px, 3vh, 36px) var(--hm-gutter) clamp(64px, 9vh, 104px); }
.home .hm-faq__inner {
  max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px;
  padding: 30px clamp(24px, 3.2vw, 44px); border-radius: 22px;
  background: linear-gradient(160deg, rgba(36, 39, 44, .66), rgba(16, 18, 21, .8)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 236, 214, .08);
}
.home .hm-faq__text { max-width: 40rem; }
.home .hm-faq__text .hm-lead { margin-top: 8px; }
.home .hm-faq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

.home .hm-close { margin-top: 0; }
.home .hm-close .hm-close__mark { width: 70px; margin-bottom: 22px; }
.home .hm-close::after { opacity: .3; transition: opacity 1.6s ease .25s; }
.home .hm-close.is-lit::after { opacity: 1; }
.home .hm-close .section__title { color: var(--hm-text); font-family: var(--hm-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.2rem); }
@media (max-width: 700px) { .home.has-motion-toggle .footer__inner { padding-right: 56px; } }   /* the footer's last words stay clear of the fixed Pause motion pill */

/* ---------- reveals: each block rises into place once, the first time it comes into view ---------- */
.home.hm-ready [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--hm-ease), transform .9s var(--hm-ease); }
.home.hm-ready [data-reveal].is-in { opacity: 1; transform: none; }
.home.hm-ready .hm-piece { opacity: 0; transform: translateY(1.6em); transition: opacity 1s var(--hm-ease) .1s, transform 1.2s var(--hm-ease) .1s; }
.home.hm-ready.hm-shown .hm-piece { opacity: 1; transform: none; }

/* no JavaScript: the controls need the script, so they stay out of the way and the screen shows the finished site */
.home:not(.hm-ready) .hm-layers, .home:not(.hm-ready) .hm-req__send, .home:not(.hm-ready) .hm-port { display: none; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
/* short desktop windows: the hero rhythm follows the viewport height */
@media (min-width: 1100px) and (max-height: 780px) {
  .home .hm-eyebrow { margin-bottom: 14px; }
  .home .hm-title { font-size: clamp(2.2rem, .8rem + 2.5vw, 3.3rem); }
  .home .hm-hero__sub { font-size: 1.04rem; line-height: 1.6; }
  .home .hm-marks { margin-top: 20px; }
  .home .hm-marks li { padding-top: 12px; }
  .home .hm-layers__label { display: none; }
  .home .hm-layers__row { margin-top: 2px; }
  .home .hm-layers__caption { min-height: 2.6em; margin-top: 8px; font-size: .9rem; }
}
/* the two-column intro needs room to stay in place; on short windows it scrolls like any other section */
@media (min-width: 1100px) and (max-height: 599px) {
  .home .hm-stage { position: relative; grid-row: 1; height: max(100vh, 560px); }
  .home .hm-web { padding-bottom: 60px; }
}
@media (max-width: 1299px) {
  .home .hm-eyebrow { font-size: .68rem; letter-spacing: .1em; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  .home .hm-eyebrow { font-size: .64rem; letter-spacing: .07em; gap: 10px; }
  .home .hm-eyebrow::before { width: 16px; }
}
@media (max-width: 1240px) {
  .home { --hm-split: 46%; }
  .home .hm-tools__inner { grid-template-columns: minmax(0, 31fr) minmax(0, 69fr); gap: 32px; }
  .home .hm-flow__cards { gap: 16px; }
  .home .hm-layers__row { gap: 6px; }
  .home .hm-layer { gap: 7px; padding: 0 12px 0 10px; font-size: .86rem; }
  .home .hm-svc { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
  .home .hm-svc__art { transform: scale(.9); transform-origin: 0 0; }
}
@media (max-width: 1099px) {
  .home .hm-intro { display: flex; flex-direction: column; }
  .home .hm-hero { order: 1; min-height: 0; padding: calc(var(--hm-nav) + 44px) var(--hm-gutter) 18px; isolation: isolate; }
  .home .hm-hero::before {   /* the sweep's lit corner behind the copy, with three tight strata above the eyebrow, fading out into the page's own grain */
    content: ""; position: absolute; inset: 0 0 auto 0; height: 100%; z-index: -1; pointer-events: none;
    background:
      radial-gradient(420px 300px at 100% -4%, rgba(255, 205, 160, .15), transparent 70%),
      radial-gradient(50% 1.6px at 100% 70px, rgba(255, 232, 206, .17) 0, rgba(255, 232, 206, .17) 30%, transparent 100%), radial-gradient(50% 4px at 100% calc(70px + 3px), rgba(0, 0, 0, .26), transparent 100%),
      radial-gradient(42% 1.6px at 100% 77px, rgba(255, 232, 206, .16) 0, rgba(255, 232, 206, .16) 30%, transparent 100%), radial-gradient(42% 4px at 100% calc(77px + 3px), rgba(0, 0, 0, .26), transparent 100%),
      radial-gradient(34% 1.6px at 100% 84px, rgba(255, 232, 206, .15) 0, rgba(255, 232, 206, .15) 30%, transparent 100%), radial-gradient(34% 4px at 100% calc(84px + 3px), rgba(0, 0, 0, .26), transparent 100%),
      linear-gradient(180deg, rgba(var(--bg-rgb), .3) 0%, rgba(var(--bg-rgb), .62) 14%, rgba(var(--bg-rgb), .9) 30%, rgba(var(--bg-rgb), .97) 46%),
      var(--tx-sweep) right top / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 60%); mask-image: linear-gradient(180deg, #000 34%, transparent 60%);
  }
  .home .hm-hero__inner { max-width: 720px; }
  .home .hm-stage { order: 2; align-self: stretch; position: relative; top: auto; height: auto; overflow: visible; }   /* stretch: the desktop align-self: start shrank it to its content, flush left */
  .home .hm-env { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%); }
  .home .hm-env__veil { display: none; }
  .home .hm-env__wall {
    background:
      var(--tx-grain-fine),
      radial-gradient(44% 34% at 50% 34%, var(--hm-glow), var(--hm-glow-2) 55%, transparent 78%),
      radial-gradient(90% 80% at 50% 38%, var(--sweep-hi) 0%, var(--sweep-mid) 34%, var(--sweep-lo) 64%, var(--sweep-edge) 100%);
  }
  .home .hm-stage__set { position: relative; left: auto; inset: auto; padding: 12px 0 8px; }
  /* sized by the stand, not the tablet (Lane 72, 19 Oct 2026): the stand's widest tier is 74.26em wide (the image's opaque
     silhouette) and the piece's font size is the frame's width / 69.07 (container units at 74:60), so this width puts the
     stand 16px inside each edge; the tablet stays locked to it and both scale together */
  .home .hm-stage__frame { flex: none; width: min(860px, calc((100% - 32px) * 69.07 / 74.26)); aspect-ratio: 74 / 60; }
  .home .hm-piece { margin-left: -36.653em; }   /* centred on the stand's silhouette (centre 36.653em), not the 74em box */
  .home .hm-layers { padding: 0 var(--hm-gutter); }
  .home .hm-web { order: 3; padding: 40px var(--hm-gutter) 24px; }
  .home .hm-web__inner { max-width: 720px; }
  .home .hm-cap--web { margin-top: 56px; }
  .home .hm-tools { padding-top: 64px; }
  .home .hm-tools__inner { grid-template-columns: minmax(0, 1fr); max-width: 820px; gap: 40px; }
  .home .hm-flow__cards { gap: 20px; }
  .home .hm-also { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .home .hm-svc + .hm-svc::before { left: 28px; right: 28px; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 140, 60, .45) 30%, rgba(255, 140, 60, .45) 70%, transparent); }
  .home .hm-svc__art { transform: none; }
}
@media (max-width: 860px) {
  .home .hm-cases { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-left: auto; margin-right: auto; gap: 96px; }
}
@media (max-width: 760px) {
  .home .hm-flow { padding-top: 6px; }
  .home .hm-flow__floor { display: none; }
  .home .hm-flow__cards { grid-template-columns: minmax(0, 1fr); gap: 34px; perspective: none; max-width: 440px; margin: 0 auto; padding-left: 26px; }
  .home .hm-node { transform: none; margin-top: 0 !important; }
  .home .hm-node .hm-port[data-port$="-in"] { left: -14px; top: 30px; }
  .home .hm-node .hm-port[data-port$="-out"] { left: -14px; top: auto; bottom: 26px; }
  .home .hm-note { max-width: 440px; margin-left: auto; margin-right: auto; padding-left: 26px; }
  .home .hm-doors { grid-template-columns: minmax(0, 1fr); }
  .home .hm-door--wide { grid-column: auto; }
  .home .hm-faq__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .home .hm-marks { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .home .hm-marks li, .home .hm-marks li + li { padding: 13px 0; border-left: 0; border-top: 1px solid var(--hm-hair); }
  .home .hm-marks li { display: grid; grid-template-columns: 112px 1fr; align-items: baseline; }
  .home .hm-marks strong { margin: 0; }
  .home .hm-hero__actions .hm-btn { flex: 1 1 auto; }
  .home .hm-layers__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .home .hm-layer { justify-content: flex-start; padding: 0 12px; font-size: .88rem; }
  .home .hm-also { margin-bottom: 56px; }
  .home .hm-work { padding-top: 52px; }
  .home .hm-svc { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 22px; }
  .home .hm-svc__art { height: 176px; max-width: 200px; }
  .home .hm-svc__also li { grid-template-columns: minmax(0, 1fr); }
  .home .hm-svc__also a { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 2px; }
  .home .hm-plaque { padding-left: 14px; }
  .home .hm-case__stage { width: 78%; }
  .home .hm-case__more { width: 50%; }
  .home .hm-case.is-in .hm-case__more:nth-of-type(2) { transform: translate(54%, -6%) rotate(6deg); }
  .home .hm-case.is-in .hm-case__more:nth-of-type(3) { transform: translate(58%, 8%) rotate(-4deg); }
}
@media (max-width: 380px) {
  .home .hm-title { font-size: 2.25rem; }
  .home .hm-layer { gap: 6px; padding: 0 9px; font-size: .78rem; line-height: 1.15; text-align: left; }
  .home .hm-layer .hm-ico { width: 15px; height: 15px; }
  .home .hm-flow__cards { padding-left: 22px; }
  .home .hm-node__card { padding: 14px 13px 16px; }
}

/* ============================================================================
   REDUCED MOTION: every scene rests in its final state; nothing travels or settles
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .home .hm-title__l2 { animation: none !important; }
  .home.hm-ready [data-reveal], .home.hm-ready .hm-piece { opacity: 1; transform: none; }
  .home .hm-screen.is-run .hm-cursor { animation: none !important; opacity: 0; }
}