/* ==========================================================================
   Our services — "The wall that builds itself"
   A pinned, scroll-scrubbed cutaway (assets/js/how-we-work.js + wall3d.js).
   Every class is prefixed hww- so nothing collides with styles.css.
   Builds on styles.css tokens: --ink-rgb, --gutter, --font-serif, --font-sans, --dock-space.
   ========================================================================== */

.hww {
  --hww-top: 0px;                              /* sticky offset (a fixed bar above the stage, if any) */
  --hww-inset: var(--dock-space, 0px);         /* chrome over the bottom of the stage (the glass dock) */
  --hww-stage-bg: #ffffff;
  --hww-panel-ink: 29 24 19;
  --hww-panel-w: min(27rem, 29vw);
  --hww-canvas-left: calc(var(--gutter) + var(--hww-panel-w) + 2vw);
  position: relative;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.08);
}

.hww__head { padding: clamp(2.75rem, 5vw, 5rem) var(--gutter) clamp(1.5rem, 2vw, 2rem); }   /* same top as .section; the stage follows ~1.5–2rem after the heading */
.hww__head .section__eyebrow { margin: 0; font-weight: 400; line-height: 1.5; }
.hww__skip { display: inline-block; margin-top: 1rem; font-size: 0.875rem; }
.hww__skip:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Pinned build ---------------------------------------------------------- */
.hww-build { position: relative; height: 640vh; }
.hww-stage {
  position: sticky; top: var(--hww-top);
  height: calc(100vh - var(--hww-top));
  height: calc(100svh - var(--hww-top));
  overflow: hidden;
  background: var(--hww-stage-bg);
}
.hww-stage__canvas { position: absolute; inset: 0 var(--hww-canvas-left) 0 0; }   /* 3D on the left, text on the right */
.hww-stage__canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.hww-stage.hww-is-ready .hww-stage__canvas { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.hww-stage.hww-is-dragging .hww-stage__canvas { cursor: grabbing; }
.hww-stage__canvas:focus { outline: none; }
.hww-stage__canvas:focus-visible { outline: 1.5px solid rgb(29 24 19); outline-offset: -6px; }
.hww-stage.hww-is-dusk .hww-stage__canvas:focus-visible { outline-color: rgb(246 240 231); }
/* "Drag to rotate" chip — same treatment as the 3D scaffold above; top-right of the plate, clear of text and dock */
.hww-stage__hint {
  position: absolute; z-index: 3; top: 1.25rem; left: var(--gutter);
  display: flex; align-items: center; gap: 0.6em; margin: 0; padding: 0.5em 0.9em;
  background: rgb(255 255 255 / 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgb(29 24 19 / 0.12); color: rgb(29 24 19 / 0.72);
  font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 500ms ease;
}
.hww-stage__hint svg { width: 1.6em; height: 0.8em; fill: none; stroke: currentColor; stroke-width: 1.3; }
.hww-stage.hww-is-ready .hww-stage__hint { opacity: 1; transition-delay: 1.2s; }
.hww-stage.hww-has-interacted .hww-stage__hint { opacity: 0; transition-delay: 0s; }
.hww-stage:has(.hww-stage__canvas:focus-visible) .hww-stage__hint { opacity: 1; color: rgb(29 24 19); border-color: rgb(29 24 19 / 0.5); }
.hww-stage__fallback { position: absolute; inset: 0 var(--hww-canvas-left) 0 0; margin: 0; }
.hww-stage__fallback img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.hww-stage__fallback p { position: absolute; right: var(--gutter); bottom: calc(var(--hww-inset) + 1rem); margin: 0; font-size: 0.75rem; color: rgb(246 240 231 / 0.7); }
.hww-stage__loader {
  position: absolute; left: calc((100% - var(--hww-canvas-left)) / 2); top: 50%;
  width: 3.4rem; aspect-ratio: 619 / 507; transform: translate(-50%, -50%);
  background: #b9b4ad;                                   /* the Ardleigh icon, pulsing */
  -webkit-mask: url("../brand/ardleigh-icon-mask.svg") center / contain no-repeat;
  mask: url("../brand/ardleigh-icon-mask.svg") center / contain no-repeat;
  animation: ard-pulse 1.6s ease-in-out infinite;
  transition: opacity 500ms ease;
}
.hww-stage__loader span { display: none; }
.hww-stage.hww-is-ready .hww-stage__loader { opacity: 0; animation: none; }

@media (min-width: 821px) {
  .hww-stage__canvas { -webkit-mask-image: linear-gradient(90deg, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, #000 91%, transparent 100%); }   /* melt into the text column on the right */
}

/* Text panel — right column, clear of the dock */
.hww-panel {
  --ink-rgb: var(--hww-panel-ink);
  position: absolute; z-index: 2;
  right: var(--gutter); top: 0; bottom: var(--hww-inset);
  width: var(--hww-panel-w);
  display: flex; flex-direction: column; justify-content: flex-start;   /* text starts at the top of the stage: no blank band on entry */
  padding: clamp(1.5rem, 5vh, 3.5rem) 0 4.25rem;
  color: rgb(var(--ink-rgb));
  pointer-events: none;
}
.hww-panel__count { margin: 0 0 1.75rem; font-size: 0.75rem; letter-spacing: 0.3em; color: rgb(var(--ink-rgb) / 0.55); font-variant-numeric: tabular-nums; }
.hww-panel__num { color: rgb(var(--ink-rgb)); }
.hww-phases { position: relative; margin: 0; padding: 0; list-style: none; min-height: 25rem; }
.hww-phase {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 420ms ease, transform 620ms cubic-bezier(.2, .7, .1, 1);
}
.hww-phase.hww-is-active { opacity: 1; transform: none; transition-delay: 120ms; }
.hww-phase.hww-is-past { transform: translate3d(0, -14px, 0); }
.hww-phase__eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.62);
}
.hww-phase__eyebrow::before { content: ""; display: inline-block; width: 1.6rem; height: 1px; margin: 0 0.8rem 0.25em 0; vertical-align: middle; background: currentColor; }
.hww-phase__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(2.1rem, 3.3vw, 3.4rem); line-height: 1.02; letter-spacing: -0.005em;
}
.hww-phase__body { margin: 0; max-width: 25rem; font-weight: 300; font-size: clamp(0.98rem, 1.12vw, 1.125rem); line-height: 1.65; color: rgb(var(--ink-rgb) / 0.78); }
.hww-phase__legend {
  margin: 1.6rem 0 0; padding-top: 0.9rem; max-width: 25rem;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.16);
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.9;
  color: rgb(var(--ink-rgb) / 0.55);
}
.hww-phase__kicker {
  margin: 1.6rem 0 0; padding-top: 1.1rem; max-width: 26rem;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.22);
  font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.35rem, 1.8vw, 1.85rem); line-height: 1.2;
  opacity: var(--hww-kicker, 0); transform: translate3d(0, calc((1 - var(--hww-kicker, 0)) * 10px), 0);
}

/* Progress rail: seven labelled hairline segments */
.hww-rail { position: absolute; left: 0; right: 0; bottom: 1.75rem; }
.hww-rail__steps { display: grid; grid-template-columns: repeat(7, minmax(max-content, 1fr)); gap: 0.3rem; margin: 0; padding: 0; list-style: none; }   /* a column never narrower than its label */
.hww-rail__steps li { position: relative; min-width: 0; padding-top: 0.75rem; font-size: clamp(0.5rem, 0.6vw, 0.5625rem); letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--ink-rgb) / 0.42); white-space: nowrap; transition: color 300ms ease; }
/* narrower panels: segments only (the phase eyebrow carries the label) */
@media (max-width: 1240px) and (min-width: 821px) { .hww-rail__steps li { font-size: 0; padding-top: 0; height: 1px; } }
.hww-rail__steps li::before, .hww-rail__steps li::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; }
.hww-rail__steps li::before { right: 0; background: rgb(var(--ink-rgb) / 0.16); }
.hww-rail__steps li::after { width: calc(var(--hww-fill, 0) * 100%); background: rgb(var(--ink-rgb) / 0.85); }
.hww-rail__steps li.hww-is-on { color: rgb(var(--ink-rgb) / 0.9); }

/* Dusk: panel ink flips to warm white as the lights come on */
.hww-stage.hww-is-dusk { --hww-panel-ink: 246 240 231; }

/* Closing line under the build */
.hww__close {
  margin: 0; padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter);
  font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.75rem, 2.8vw, 2.75rem); line-height: 1.1;
}

/* The glass dock reads light-on-dark while it sits over the lit-up room */
.dock.hww-dock-dark {
  --ink-rgb: 246 240 231;
  --ink: rgb(var(--ink-rgb));
  --ink-soft: rgb(var(--ink-rgb) / 0.86);
  --ink-line: rgb(var(--ink-rgb) / 0.62);
  --surface: var(--night, #15110d);
  --glass-bg: rgb(255 255 255 / 0.04);
  --glass-border: rgb(255 255 255 / 0.4);
}

/* ---- Mobile ---------------------------------------------------------------- */
@media (max-width: 820px) {
  .hww { --hww-canvas-left: 0px; }
  .hww-build { height: 560vh; }
  .hww-stage__canvas, .hww-stage__fallback { bottom: auto; height: 55%; }
  .hww-stage__loader { left: 50%; top: 27%; }
  .hww-stage__hint { left: auto; right: var(--gutter); }
  .hww-panel {
    left: 0; right: 0; top: 55%; bottom: 0; width: auto;
    justify-content: flex-start;
    padding: 1.1rem var(--gutter) calc(var(--hww-inset) + 1.25rem);
    background: var(--hww-stage-bg);
    border-top: 1px solid rgb(var(--ink-rgb) / 0.12);
  }
  .hww-panel__count { position: absolute; right: var(--gutter); top: 1.2rem; margin: 0; }
  .hww-phases { min-height: 0; flex: 1; }
  .hww-phase__eyebrow { margin-bottom: 0.65rem; }
  .hww-phase__title { font-size: clamp(1.75rem, 8vw, 2.3rem); margin-bottom: 0.6rem; }
  .hww-phase__body { font-size: 0.9375rem; line-height: 1.55; }
  .hww-phase__legend { display: none; }
  .hww-phase__kicker { margin-top: 0.8rem; padding-top: 0.7rem; font-size: 1.2rem; }
  .hww-rail { left: var(--gutter); right: var(--gutter); bottom: calc(var(--hww-inset) + 0.5rem); }
  .hww-rail__steps li { font-size: 0; padding-top: 0; height: 1px; }
}
@media (max-height: 760px) and (min-width: 821px) { .hww-phase__legend { display: none; } }

/* ---- Reduced motion / static: composed final state, all text visible -------- */
.hww--static .hww-build { height: auto; }
.hww--static .hww-stage { position: relative; top: 0; height: auto; overflow: visible; background: #ffffff; }
.hww--static .hww-stage__canvas { position: relative; inset: auto; height: min(72vh, 52rem); background: #16130e; -webkit-mask-image: none; mask-image: none; }
.hww--static .hww-stage__fallback { position: relative; inset: auto; height: min(72vh, 52rem); }
.hww--static .hww-stage__loader { display: none; }
.hww--static .hww-stage__hint { top: 1.25rem; }
.hww--static .hww-panel {
  position: relative; inset: auto; width: auto; height: auto; padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) 0;
  background: none; border: 0;
  --hww-panel-ink: 29 24 19;
}
.hww--static .hww-panel__count, .hww--static .hww-rail { display: none; }
.hww--static .hww-phases { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 2.5rem 3rem; min-height: 0; }
.hww--static .hww-phase { position: static; opacity: 1; transform: none; transition: none; }
.hww--static .hww-phase__title { font-size: clamp(1.75rem, 2.4vw, 2.4rem); }
.hww--static .hww-phase__kicker { --hww-kicker: 1; }

@media (prefers-reduced-motion: reduce) {
  .hww-phase, .hww-stage__loader, .hww-stage__loader span { transition: none !important; }
}