/* ============================================================
   NIGHT HOMEPAGE  (body.home-night) — the default homepage.
   A cinematic dark ground on which the FCE emblem draws itself
   in glowing linework on load, and the five services stand as
   lit night blocks arranged in the shape of the mark:
   "our services are our mark".

   Every rule is scoped under .home-night so nothing leaks onto
   other pages. Night atmosphere + nav-over-dark are borrowed from
   looks/v1.css; the lit-window cuboid treatment from looks/v4.css.
   Brand hues are fixed (CLAUDE.md §8.1) — only derived near-black
   / lit shades are introduced here.
   ============================================================ */

.home-night {
  --hn-black: #0d1826;
  --hn-black-2: #0a141f;
  --hn-line: rgba(138, 185, 214, 0.16);
  --hn-roof: #16273b;                 /* lit top face */
  --hn-wall: #10203354;               /* window faces */
  --hn-wall-2: #0b1826;               /* shadow faces */
  --hn-edge: rgba(138, 185, 214, 0.5);
  --hn-side1: #b34630;                 /* F-model south face — shaded orange */
  --hn-side2: #93381f;                 /* F-model east face — deeper shaded orange */
  --hn-win: rgba(253, 182, 123, 0.9); /* warm lit office window */
  --hn-win-off: rgba(138, 185, 214, 0.14);
  --hn-s: clamp(56px, 7.5vw, 88px);   /* cuboid edge */
  --hn-half: calc(var(--hn-s) / 2);
}

/* ---------- base page ---------- */
/* The night nav/footer/btn/focus treatments that used to live here have been
   PROMOTED to static/css/style.css as the global default (the whole site is
   now the night desk). Only homepage-specific overrides remain below. The page
   ground (--hn-black) equals the global --night, so the homepage is unchanged.
   The .mono-label tint here (extra-light-blue @ 0.85) intentionally overrides
   the global light-blue label colour to keep the hero labels as they were. */
body.home-night { background: var(--hn-black); color: var(--paper); }
body.home-night::before { display: none; } /* no setting-out grid on the night page */
body.home-night .mono-label { color: var(--extra-light-blue); opacity: 0.85; }

/* ---------- headline scale ---------- */
.hn-h1 {
  font-family: var(--head); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3rem, 9vw, 7.5rem); line-height: 0.94; letter-spacing: -0.01em;
  color: var(--paper); text-wrap: balance;
}
/* echoes the wordmark's lockup: FUREY heavy, the descriptor lighter */
.hn-h1-tail {
  display: block; font-weight: 500; letter-spacing: 0.04em;
  font-size: 0.42em; color: var(--extra-light-blue); margin-top: 0.18em;
}
.hn-h2 {
  font-family: var(--head); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -0.01em;
  color: var(--paper); text-wrap: balance;
}
.hn-label { letter-spacing: 0.18em; color: var(--light-blue); opacity: 1; }

/* ---------- shared duotone photo component (from v1) ---------- */
.hn-photo { position: relative; overflow: hidden; background: var(--hn-black-2); }
.hn-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.82);
  transition: transform 1.2s var(--ease);
}
.hn-photo::before {
  content: ''; position: absolute; inset: 0; background: var(--navy-deep);
  mix-blend-mode: color; opacity: 0.7; pointer-events: none;
}
.hn-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 16, 25, 0.25) 0%, rgba(10, 16, 25, 0.55) 55%, rgba(10, 16, 25, 0.92) 100%);
}

/* ---------- hero ---------- */
.hn-hero {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: calc(var(--nav-height) + 40px) 24px 56px;
}
.hn-hero::before { /* subtle blueprint grid texture on the dark ground */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background:
    repeating-linear-gradient(0deg, var(--hn-line) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, var(--hn-line) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 90%);
  mask-image: radial-gradient(closest-side, #000 35%, transparent 90%);
}
.hn-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 900px; }
.hn-sub { font-size: clamp(0.95rem, 1.4vw, 1.15rem); color: var(--extra-light-blue); max-width: 44ch; letter-spacing: 0.02em; }
.hn-hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.hn-phone { color: var(--light-orange); border-bottom: var(--line-rule) solid var(--light-orange); padding-bottom: 2px; }

/* ---------- glow-draw emblem (from v1) ---------- */
.hn-emblem { width: clamp(150px, 20vw, 280px); margin-bottom: 6px; }
.hn-emblem .emblem { --e-line: var(--light-blue); --e-accent: var(--orange); width: 100%; height: auto; }
.hn-emblem .e-exact { filter: drop-shadow(0 0 10px rgba(235, 93, 64, 0.5)); }
html.night-live .home-night .hn-emblem .e-construction { visibility: visible; }
html.night-live .home-night .hn-emblem .e-lines,
html.night-live .home-night .hn-emblem .e-diag {
  filter: drop-shadow(0 0 5px var(--light-blue)) drop-shadow(0 0 12px rgba(138, 185, 214, 0.55));
}
html.night-live .home-night .hn-emblem .e-blocks { filter: drop-shadow(0 0 8px var(--orange)); }

/* ---------- bridge (the one voiced section) ---------- */
.hn-bridge {
  padding: clamp(90px, 12vw, 150px) clamp(24px, 8vw, 120px);
  max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px;
  border-top: var(--line-hair) solid var(--hn-line);
}
.hn-bridge-body { font-size: clamp(1.05rem, 1.9vw, 1.45rem); line-height: 1.5; color: var(--extra-light-blue); max-width: 60ch; }

/* ---------- dimensioned facts (dimension-line styling) ---------- */
.hn-facts { padding: 0 clamp(24px, 8vw, 120px) clamp(70px, 9vw, 110px); max-width: 1120px; margin: 0 auto; }
.hn-sectors { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--extra-light-blue); }
.hn-sectors span { position: relative; padding-left: 15px; }
.hn-sectors span::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; transform: translateY(-50%); background: var(--orange); }

/* ============================================================
   THE FIVE — services arranged as the FCE mark (F formation)
   Two columns of lit night cuboids:
        [a1]      [b1]
        [a2]      [b2]
        [a3]
   which is the block cluster of the emblem itself. Each block is
   a link to /services#slug. Orthographic (no perspective) so the
   five buildings read as one uniform axonometric model.
   ============================================================ */
.hn-five { padding: clamp(80px, 10vw, 130px) clamp(24px, 6vw, 80px); border-top: var(--line-hair) solid var(--hn-line); }
.hn-five-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(44px, 6vw, 76px); }
.hn-story { max-width: 560px; color: var(--paper); font-family: var(--head);
  font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.3; }

/* THE MARK STOOD UP — the emblem's MEASURED geometry as standing blockwork
   (squares 78.55 units, column pitch 90.02, row pitches 91.85/92.73 ->
   ratios 1.146 / 1.169 / 2.35), in true perspective. Face-on this is
   exactly the logo; the depth makes it a structure. The mid-right block is
   a genuine cantilever. No windows, no decoration. */
.hn-model-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(48px, 9vw, 140px); flex-wrap: wrap;
}
.hn-stand {
  --s: clamp(60px, 7.5vw, 88px);           /* block face */
  --d: calc(var(--s) * 0.62);              /* block depth */
  padding: 30px 24px 24px;
  perspective: 1200px; perspective-origin: 50% 72%;
}
.hn-sview {
  position: relative;
  width: calc(var(--s) * 2.146);
  height: calc(var(--s) * 3.35);
  transform-style: preserve-3d;
  transform: rotateX(13deg) rotateY(-26deg);
}
.hn-scube { position: absolute; width: var(--s); height: var(--s);
  transform-style: preserve-3d; }
/* true F arrangement, true pitches */
.hn-scube--a1 { left: 0; top: 0; }
.hn-scube--b1 { left: calc(var(--s) * 1.146); top: 0; }
.hn-scube--a2 { left: 0; top: calc(var(--s) * 1.169); }
.hn-scube--b2 { left: calc(var(--s) * 1.146); top: calc(var(--s) * 1.169); }
.hn-scube--a3 { left: 0; top: calc(var(--s) * 2.35); }
.hn-sf { position: absolute;
  box-shadow: inset 0 0 0 1px rgba(250, 249, 247, 0.10); }
.hn-sf--front, .hn-sf--back { width: var(--s); height: var(--s); left: 0; top: 0; }
.hn-sf--front { transform: translateZ(calc(var(--d) / 2)); background: var(--orange); }
/* hover highlight lives on an overlay so the cast's staggered
   transition-delay never slows it down */
.hn-sf--front::after { content: ''; position: absolute; inset: 0;
  background: transparent;
  transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.hn-sf--back { transform: translateZ(calc(var(--d) / -2)); background: #7c2e18; }
.hn-sf--left, .hn-sf--right { width: var(--d); height: var(--s); top: 0; }
.hn-sf--left { left: calc(var(--d) / -2); transform: rotateY(90deg);
  background: var(--hn-side1); }
.hn-sf--right { left: calc(var(--s) - var(--d) / 2); transform: rotateY(90deg);
  background: var(--hn-side2); }
.hn-sf--top, .hn-sf--bottom { width: var(--s); height: var(--d); left: 0; }
.hn-sf--top { top: calc(var(--d) / -2); transform: rotateX(90deg);
  background: var(--light-orange); }
.hn-sf--bottom { top: calc(var(--s) - var(--d) / 2); transform: rotateX(90deg);
  background: #6d2814; }

/* legend: the services annotate the model like a labelled axonometric */
.hn-legend { list-style: none; display: flex; flex-direction: column; gap: 20px; max-width: 400px; margin: 0; padding: 0; }
.hn-leg a {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 14px;
  align-items: baseline; position: relative;
}

.hn-leg-no { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--orange); }
.hn-leg-name {
  font-family: var(--head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--paper); line-height: 1.1;
  transition: color .2s var(--ease);
}
.hn-leg-tags { grid-column: 2; font-size: 0.76rem; color: var(--extra-light-blue); }
.hn-leg a:hover .hn-leg-name, .hn-leg a:focus-visible .hn-leg-name { color: var(--light-orange); }

/* hovering a service annotation lights its block in the model */
.hn-model-wrap:has(.hn-leg[data-block="a1"] a:is(:hover, :focus-visible)) .hn-scube--a1 .hn-sf--front::after,
.hn-model-wrap:has(.hn-leg[data-block="b1"] a:is(:hover, :focus-visible)) .hn-scube--b1 .hn-sf--front::after,
.hn-model-wrap:has(.hn-leg[data-block="a2"] a:is(:hover, :focus-visible)) .hn-scube--a2 .hn-sf--front::after,
.hn-model-wrap:has(.hn-leg[data-block="b2"] a:is(:hover, :focus-visible)) .hn-scube--b2 .hn-sf--front::after,
.hn-model-wrap:has(.hn-leg[data-block="a3"] a:is(:hover, :focus-visible)) .hn-scube--a3 .hn-sf--front::after {
  background: var(--light-orange);
  box-shadow: inset 0 0 0 1px rgba(250, 249, 247, 0.3), 0 0 26px rgba(235, 93, 64, 0.5);
}

/* opt-in build (M3, "the rising cast"): JS (html.hn-live) holds the mark as
   linework; the IntersectionObserver adds .is-built — the wireframe arrives
   almost at once, then the cast rises course by course from the foundation.
   Default (no-JS / reduced-motion) is the finished state. */
html.hn-live .hn-stand .hn-scube { opacity: 0;
  transition: opacity .25s var(--ease);
  transition-delay: calc(var(--o, 0) * 40ms + 80ms); }
html.hn-live .hn-stand.is-built .hn-scube { opacity: 1; }
html.hn-live .hn-stand .hn-sf {
  box-shadow: inset 0 0 0 1px rgba(138, 185, 214, 0.6);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
  /* one block at a time, in the structural build order */
  transition-delay: calc(550ms + var(--o, 0) * 160ms); }
html.hn-live .hn-stand .hn-sf--front { background: rgba(235, 93, 64, 0); }
html.hn-live .hn-stand .hn-sf--back { background: rgba(124, 46, 24, 0); }
html.hn-live .hn-stand .hn-sf--left { background: rgba(179, 70, 48, 0); }
html.hn-live .hn-stand .hn-sf--right { background: rgba(147, 56, 31, 0); }
html.hn-live .hn-stand .hn-sf--top { background: rgba(253, 182, 123, 0); }
html.hn-live .hn-stand .hn-sf--bottom { background: rgba(109, 40, 20, 0); }
html.hn-live .hn-stand.is-built .hn-sf {
  box-shadow: inset 0 0 0 1px rgba(250, 249, 247, 0.10); }
html.hn-live .hn-stand.is-built .hn-sf--front { background: var(--orange); }
html.hn-live .hn-stand.is-built .hn-sf--back { background: #7c2e18; }
html.hn-live .hn-stand.is-built .hn-sf--left { background: var(--hn-side1); }
html.hn-live .hn-stand.is-built .hn-sf--right { background: var(--hn-side2); }
html.hn-live .hn-stand.is-built .hn-sf--top { background: var(--light-orange); }
html.hn-live .hn-stand.is-built .hn-sf--bottom { background: #6d2814; }
/* idle: once built, the object sways just perceptibly */
@keyframes hn-sway {
  0%   { transform: rotateX(13deg) rotateY(-26deg); }
  30%  { transform: rotateX(13deg) rotateY(-19deg); }
  75%  { transform: rotateX(13deg) rotateY(-32deg); }
  100% { transform: rotateX(13deg) rotateY(-26deg); }
}
html.hn-live .hn-stand.is-built .hn-sview {
  animation: hn-sway 14s ease-in-out 2.4s infinite; }

@media (max-width: 760px) {
  .hn-model-wrap { flex-direction: column; gap: 8px; }
  .hn-stand { --s: clamp(48px, 12vw, 64px); }
  .hn-legend { max-width: 100%; padding: 0 4px; }
}

/* ---------- THE WORK: featured project, full-bleed duotone ---------- */
.hn-work { position: relative; min-height: clamp(460px, 72vh, 720px); display: flex; align-items: flex-end; overflow: hidden; }
.hn-work-media { position: absolute; inset: 0; z-index: 0; }
.hn-work-inner { position: relative; z-index: 1; width: 100%; padding: clamp(40px, 7vw, 90px) clamp(24px, 6vw, 80px); display: flex; flex-direction: column; gap: 18px; }
.hn-work-title { max-width: 20ch; }
.hn-titleblock { display: flex; flex-wrap: wrap; border: var(--line-hair) solid rgba(138, 185, 214, 0.3); max-width: 580px; background: rgba(10, 20, 31, 0.35); }
.hn-tb-cell { flex: 1 1 140px; padding: 13px 18px; border-right: var(--line-hair) solid rgba(138, 185, 214, 0.3); }
.hn-tb-cell:last-child { border-right: none; }
.hn-tb-cell b { display: block; font-family: var(--mono); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--light-blue); margin-bottom: 4px; }
.hn-tb-cell span { color: var(--paper); font-size: 0.92rem; }
.hn-work-link { color: var(--light-orange); border-bottom: var(--line-rule) solid var(--light-orange); width: fit-content; padding-bottom: 2px; }

/* ---------- close ---------- */
.hn-close { padding: clamp(100px, 13vw, 160px) 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.hn-close-links { display: flex; gap: 8px 16px; flex-wrap: wrap; justify-content: center; }
.hn-close-link { font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.06em; color: var(--light-orange); border-bottom: var(--line-rule) solid transparent; padding-bottom: 2px; transition: border-color .2s var(--ease); }
.hn-close-link:hover { border-bottom-color: var(--light-orange); }

/* ---------- responsive ---------- */
@media (max-width: 620px) {
  .hn-hero-actions { flex-direction: column; gap: 16px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hn-scube, .hn-sf, .hn-photo img { transition: none; }
  .hn-sview { animation: none !important; }
}

/* ---------- THE RECORD: stat squares framed like the emblem's blocks ---------- */
.hn-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(18px, 3vw, 34px); max-width: 860px;
}
.hn-stat {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  border: 7px solid var(--orange);            /* the emblem frame, borrowed */
  background: transparent;
}
.hn-stat b {
  font-family: var(--head); font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); color: var(--paper); line-height: 1;
}
.hn-stat span {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--extra-light-blue);
}
@media (max-width: 640px) {
  /* one row of three smaller squares — no orphan (owner: option A) */
  .hn-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hn-stat { border-width: 4px; gap: 5px; }
  .hn-stat b { font-size: 1.35rem; }
  .hn-stat span { font-size: 0.52rem; letter-spacing: 0.1em; }
}

/* two-way hover: pointing at a block in the model highlights its service */
.hn-sview .hn-scube { pointer-events: auto; cursor: pointer; }
.hn-model-wrap:has(.hn-scube--a1:hover) .hn-leg[data-block="a1"] .hn-leg-name,
.hn-model-wrap:has(.hn-scube--b1:hover) .hn-leg[data-block="b1"] .hn-leg-name,
.hn-model-wrap:has(.hn-scube--a2:hover) .hn-leg[data-block="a2"] .hn-leg-name,
.hn-model-wrap:has(.hn-scube--b2:hover) .hn-leg[data-block="b2"] .hn-leg-name,
.hn-model-wrap:has(.hn-scube--a3:hover) .hn-leg[data-block="a3"] .hn-leg-name { color: var(--light-orange); }
.hn-model-wrap:has(.hn-scube--a1:hover) .hn-scube--a1 .hn-sf--front::after,
.hn-model-wrap:has(.hn-scube--b1:hover) .hn-scube--b1 .hn-sf--front::after,
.hn-model-wrap:has(.hn-scube--a2:hover) .hn-scube--a2 .hn-sf--front::after,
.hn-model-wrap:has(.hn-scube--b2:hover) .hn-scube--b2 .hn-sf--front::after,
.hn-model-wrap:has(.hn-scube--a3:hover) .hn-scube--a3 .hn-sf--front::after {
  background: var(--light-orange);
  box-shadow: inset 0 0 0 1px rgba(250, 249, 247, 0.3), 0 0 26px rgba(235, 93, 64, 0.5);
}

/* variant C flash: a one-blink brightness pulse as the mark lands */
.hn-emblem .emblem { transition: filter 90ms linear; }
.hn-emblem.is-flashing .emblem {
  filter: brightness(2.4) drop-shadow(0 0 20px rgba(250, 249, 247, 0.55));
}

/* ---------- 5b. two more from the register ---------- */
.hn-more {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: clamp(16px, 2.5vw, 28px);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 6vw, 80px);
  align-items: stretch;
}
.hn-more-card {
  display: grid; grid-template-rows: auto 1fr; gap: 12px;
  border: var(--line-hair) solid var(--hn-line); padding: 12px;
  transition: border-color .2s var(--ease);
}
.hn-more-card:hover { border-color: var(--orange); }
.hn-more-thumb { display: block; height: 170px; }
.hn-more-thumb img { position: absolute; }
.hn-more-meta { display: flex; flex-direction: column; gap: 4px; padding: 0 4px 4px; }
.hn-more-meta b { font-family: var(--head); font-weight: 700; color: var(--paper); font-size: 1.05rem; }
.hn-more-all {
  display: flex; align-items: center; padding: 12px 22px;
  border: var(--line-rule) solid var(--orange);
  transition: background .2s var(--ease);
}
.hn-more-all:hover { background: rgba(235, 93, 64, 0.12); }
.hn-more-all-inner {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--light-orange); writing-mode: vertical-rl;
}
@media (max-width: 760px) {
  .hn-more { grid-template-columns: 1fr; }
  .hn-more-all { justify-content: center; }
  .hn-more-all-inner { writing-mode: horizontal-tb; }
}

/* hero: the drawing is the light — the button doesn't compete */
.home-night .btn--night-ghost {
  background: transparent; color: var(--paper); border-color: var(--orange);
}
.home-night .btn--night-ghost:hover { background: var(--orange); color: var(--hn-black); }

/* legend F-glyphs: the mark as the key — this service's block, filled */
.hn-leg a { grid-template-columns: 26px 1fr; }
.hn-leg-glyph { width: 20px; height: auto; grid-row: 1 / 3; align-self: start; margin-top: 2px; }
.hn-leg-glyph rect { fill: rgba(138, 185, 214, 0.25); transition: fill .2s var(--ease); }
.hn-leg-glyph rect.is-this { fill: var(--orange); }
.hn-leg a:hover .hn-leg-glyph rect.is-this,
.hn-leg a:focus-visible .hn-leg-glyph rect.is-this { fill: var(--light-orange); }