/* --- tokens ---------------------------------------------------------------- */
:root {
  --navy: #1c3a5e;
  --navy-ink: #0f2238;
  --navy-deep: #091727;
  --navy-mid: #243448;
  --zinc: #b9ccde;
  --zinc-dim: #8aa3bf;

  --paper: #f5f3ee;
  --paper-warm: #e4dfd2;

  --rule: #cfc8ba;
  --mute: #6e6960;

  --text: #171717;
  --on-dark: #f5f3ee;

  --f-sans: -apple-system, "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;

  /* scale 1.333 */
  --t-14: 0.875rem;
  --t-17: 1rem;
  --t-22: 1.333rem;
  --t-30: 1.777rem;
  --t-40: 2.369rem;
  --t-53: 3.157rem;

  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --sp-48: 3rem;
  --sp-56: 3.5rem;
  --sp-64: 4rem;
  --sp-80: 5rem;
  --sp-96: 6rem;

  --gutter: 20px;
}

@media (min-width: 480px) { :root { --gutter: 24px; } }
@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1120px) { :root { --gutter: 56px; } }
@media (min-width: 1440px) { :root { --gutter: 72px; } }
@media (min-width: 1920px) { :root { --gutter: 112px; } }

/* --- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
@media (min-width: 768px) { html { font-size: 18px; } }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-sans);
  line-height: 1.6;
  font-size: var(--t-17);
}

h1, h2, h3 {
  font-family: var(--f-sans);
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

p, ul, ol, dl { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--navy); text-decoration: none; }
a:focus { outline: none; }

.shell {
  width: 100%;
  padding-inline: var(--gutter);
}

/* --- Falz: the trade underline on labels/links ----------------------------- */
.falz {
  display: inline;
  background-image: linear-gradient(var(--zinc), var(--zinc));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 5px;
}
.hero .falz {
  background-image: linear-gradient(var(--zinc), var(--zinc));
}
@media (hover: hover) {
  a:hover .falz,
  a:focus-visible .falz,
  .link:hover .falz,
  .link:focus-visible .falz {
    background-size: 100% 4px;
  }
}

/* --- hero band with full-bleed Stehfalz skin ------------------------------- */
.hero {
  position: relative;
  background: var(--navy-ink);
  color: var(--on-dark);
  border-bottom: 3px solid var(--navy);
  padding-block: var(--sp-40) var(--sp-48);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) { .hero { padding-block: var(--sp-64) var(--sp-80); } }
@media (min-width: 1120px) { .hero { padding-block: var(--sp-80) var(--sp-96); } }

/* Stehfalz texture — vertical zinc lines at a rhythm that reads as roofing */
.hero__skin {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0, transparent 44px,
      rgba(185, 204, 222, 0.08) 44px, rgba(185, 204, 222, 0.08) 45px,
      transparent 45px, transparent 46px,
      rgba(185, 204, 222, 0.18) 46px, rgba(185, 204, 222, 0.18) 47px,
      transparent 47px, transparent 48px
    ),
    repeating-linear-gradient(
      to right,
      var(--navy-deep) 0, var(--navy-deep) 44px,
      var(--navy-mid) 44px, var(--navy-mid) 48px
    );
  pointer-events: none;
}
/* a subtle diagonal glint across the skin, like light on folded zinc */
.hero__skin::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(170deg,
      rgba(255, 255, 255, 0.04) 0%,
      transparent 35%,
      transparent 65%,
      rgba(0, 0, 0, 0.18) 100%);
  pointer-events: none;
}

/* --- signature load animation: seams paint in L→R, then a glint runs ------ */
/* An overlay that masks the seam skin from the right; shrinks to zero width. */
.hero__skin .seam-run {
  position: absolute;
  inset: 0;
  background: var(--navy-ink);
  z-index: 2;
  pointer-events: none;
}
/* The travelling glint: a narrow diagonal band swept once across the band. */
.hero__skin .glint {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 40%;
  transform: translateX(-100%) rotate(14deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(203, 216, 230, 0.0) 10%,
    rgba(203, 216, 230, 0.55) 50%,
    rgba(203, 216, 230, 0.0) 90%,
    transparent 100%);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}

.hero__inner {
  position: relative;
  z-index: 4;
  max-width: 78ch;
}

.hero__brow {
  font-size: var(--t-14);
  color: var(--zinc);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-20);
}

.hero__title {
  color: var(--on-dark);
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.4rem);
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-24);
  line-height: 1.02;
}
.hero__title-name {
  display: block;
  color: var(--on-dark);
  font-weight: 700;
}
.hero__title-mark {
  display: block;
  color: var(--zinc);
  font-weight: 600;
  margin-top: 4px;
}

.hero__lead {
  font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.333rem);
  color: #e4dfd2;
  line-height: 1.45;
  margin-bottom: var(--sp-32);
  max-width: 48ch;
}

.hero__cta { margin-bottom: var(--sp-16); }

.hero__meta {
  font-size: var(--t-14);
  color: var(--zinc);
  letter-spacing: 0.02em;
  max-width: 48ch;
}

/* --- btn ------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: 56px;
  padding: 14px 22px;
  background: var(--paper);
  color: var(--navy-ink);
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  border: 2px solid var(--paper);
  border-radius: 2px;
}
.btn:hover,
.btn:focus-visible {
  background: #ffffff;
  color: var(--navy-ink);
  border-color: #ffffff;
  outline: 2px solid var(--zinc);
  outline-offset: 3px;
}
.btn__body { display: inline-flex; flex-direction: column; align-items: flex-start; }
.btn__label {
  font-size: var(--t-14);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
}
.btn__num { font-size: 1.125rem; font-weight: 700; }

.btn--light {
  background: var(--paper);
  color: var(--navy-ink);
  border-color: var(--paper);
}

/* --- paper main ------------------------------------------------------------ */
.paper {
  padding-block: var(--sp-56);
}
@media (min-width: 768px) { .paper { padding-block: var(--sp-96); } }

/* --- h2 -------------------------------------------------------------------- */
.h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
  margin-bottom: var(--sp-24);
  letter-spacing: -0.02em;
  position: relative;
  padding-left: 18px;
}
.h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 6px;
  background: var(--navy);
}

.brow {
  font-size: var(--t-14);
  color: var(--mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-16);
}

/* --- say section ----------------------------------------------------------- */
.say { max-width: 62ch; }
.say__body {
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.2rem);
  color: #26281b;
  line-height: 1.55;
}

/* --- build: horizontal flat-roof layer explainer --------------------------- */
.build {
  margin-top: var(--sp-96);
}
.build__lead {
  max-width: 60ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.15rem);
  color: #26281b;
  line-height: 1.55;
  margin-bottom: var(--sp-40);
}

.layers {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.layer {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: stretch;
  gap: 0;
  border-top: 1px solid var(--rule);
  position: relative;
  outline: none;
}
.layer:first-child { border-top: 0; }

@media (min-width: 768px) {
  .layer { grid-template-columns: 180px 1fr; }
}
@media (min-width: 1120px) {
  .layer { grid-template-columns: 240px 1fr; }
}

.layer__swatch {
  display: block;
  min-height: 76px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .layer__swatch { min-height: 96px; } }

.layer__thickness {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: rgba(15, 34, 56, 0.72);
  padding: 2px 8px;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  opacity: 1;
}
@media (min-width: 768px) {
  .layer__thickness { font-size: 0.8125rem; bottom: 10px; right: 10px; }
}

/* Each layer carries its own material swatch, all navy-family tones */
.layer--deck .layer__swatch {
  background:
    repeating-linear-gradient(
      to right,
      var(--navy-deep) 0, var(--navy-deep) 22px,
      var(--navy-mid) 22px, var(--navy-mid) 24px
    );
}
.layer--seal .layer__swatch {
  background:
    repeating-linear-gradient(
      to bottom,
      #39301f 0, #39301f 18px,
      #4a3e2a 18px, #4a3e2a 22px
    );
}
.layer--insul .layer__swatch {
  background:
    radial-gradient(circle at 30% 40%, #e9e1cc 3px, transparent 4px),
    radial-gradient(circle at 70% 70%, #e9e1cc 3px, transparent 4px),
    radial-gradient(circle at 20% 80%, #e9e1cc 3px, transparent 4px),
    radial-gradient(circle at 80% 20%, #e9e1cc 3px, transparent 4px),
    #ccbf9a;
  background-size: 48px 48px, 48px 48px, 48px 48px, 48px 48px, auto;
}
.layer--vapor .layer__swatch {
  background:
    linear-gradient(
      to bottom,
      #5c6a7a 0%, #5c6a7a 100%
    );
  position: relative;
}
.layer--vapor .layer__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -8deg,
      transparent 0, transparent 10px,
      rgba(255, 255, 255, 0.07) 10px, rgba(255, 255, 255, 0.07) 12px
    );
}
.layer--deck-ceil .layer__swatch {
  background:
    radial-gradient(circle at 30% 40%, #9a9388 2px, transparent 3px),
    radial-gradient(circle at 70% 70%, #9a9388 2px, transparent 3px),
    radial-gradient(circle at 20% 80%, #9a9388 2px, transparent 3px),
    radial-gradient(circle at 80% 20%, #9a9388 2px, transparent 3px),
    #c8c3b7;
  background-size: 36px 36px, 36px 36px, 36px 36px, 36px 36px, auto;
}

.layer__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-24);
  background: var(--paper);
  border-left: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .layer__text { padding: var(--sp-20) var(--sp-32); gap: var(--sp-8); }
}

.layer__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
@media (min-width: 768px) { .layer__name { font-size: 1.25rem; } }

.layer__desc {
  margin: 0;
  color: #353028;
  font-size: var(--t-17);
  line-height: 1.45;
  max-width: 54ch;
}

.layer:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .layer,
  .layer__swatch,
  .layer__thickness { transition: box-shadow 200ms ease-out, background-size 200ms ease-out, transform 200ms ease-out, outline-color 150ms ease-out; }
  .layer:hover,
  .layer:focus-within {
    box-shadow: inset 4px 0 0 var(--navy);
  }
  .layer:hover .layer__thickness,
  .layer:focus-within .layer__thickness {
    background: var(--navy);
    outline: 2px solid var(--zinc);
    outline-offset: 2px;
  }
}

/* --- works: three custom placeholder illustrations ------------------------- */
.works {
  margin-top: var(--sp-96);
  padding-top: var(--sp-48);
  border-top: 1px solid var(--rule);
}
.works__lead {
  max-width: 60ch;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  color: #26281b;
  line-height: 1.55;
  margin-bottom: var(--sp-32);
}
.works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-32);
}
@media (min-width: 768px) {
  .works__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-32); }
  .works__grid .work:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1120px) {
  .works__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .works__grid .work:first-child { grid-column: 1 / -1; }
}

.work { margin: 0; }
.work__fig {
  margin: 0;
  background: var(--navy-ink);
  border: 1px solid var(--rule);
}
.work__art {
  display: block;
  width: 100%;
  height: auto;
}
.work__art--seam { aspect-ratio: 900 / 360; max-height: 420px; }
.work__art--section { aspect-ratio: 600 / 400; max-height: 420px; }
.work__art--gutter { aspect-ratio: 600 / 400; max-height: 420px; }
.work__cap {
  padding: var(--sp-12) var(--sp-16);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  font-size: var(--t-14);
  color: var(--mute);
  line-height: 1.4;
}
.work__cap-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--paper-warm);
  padding: 2px 8px;
  border-radius: 2px;
  margin-right: var(--sp-8);
  vertical-align: 1px;
}

/* --- reach: stacked rows (max-content 1fr), not columns -------------------- */
.reach {
  margin-top: var(--sp-96);
}

.rows {
  border-top: 1px solid var(--rule);
}

.row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-8) var(--sp-32);
  padding-block: var(--sp-24);
  border-bottom: 1px solid var(--rule);
}

.row__label {
  font-size: var(--t-14);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  grid-column: 1;
  padding-top: 4px;
  min-width: 8rem;
}

.row__value {
  grid-column: 2;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.row__value--small { font-size: 1.0625rem; font-weight: 500; }

.row__value .link { color: var(--text); }
.row__value .link:hover,
.row__value .link:focus-visible {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--navy);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  outline: none;
}

.row__note {
  grid-column: 2;
  margin: 0;
  color: var(--mute);
  font-size: var(--t-14);
}

@media (max-width: 519px) {
  .row { grid-template-columns: 1fr; gap: 4px; }
  .row__label, .row__value, .row__note { grid-column: 1; }
}

/* --- call strip ------------------------------------------------------------ */
.callstrip {
  background: var(--navy);
  color: var(--on-dark);
  border-top: 3px solid var(--navy-ink);
}
.callstrip__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
  padding-block: var(--sp-32);
}
@media (min-width: 640px) {
  .callstrip__row { flex-direction: row; justify-content: space-between; align-items: center; }
}
.callstrip__text {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--on-dark);
  max-width: 44ch;
  margin: 0;
}

/* --- footer (single column, narrow) --------------------------------------- */
.foot {
  background: var(--navy-ink);
  color: var(--on-dark);
  padding-block: var(--sp-48) var(--sp-32);
}

.foot__inner {
  max-width: 50ch;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.foot__name {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.005em;
}
.foot__body, .foot__hours {
  font-size: var(--t-17);
  color: var(--on-dark);
  line-height: 1.55;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.foot__hours { color: #b9ccde; }

.foot__link {
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--zinc);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.foot__link:hover,
.foot__link:focus-visible {
  color: #ffffff;
  text-decoration-color: #ffffff;
  text-decoration-thickness: 2px;
  outline: none;
}

.foot__legal {
  margin: 0;
  padding-top: var(--sp-24);
  border-top: 1px solid #243448;
  font-size: var(--t-14);
  color: var(--zinc);
  letter-spacing: 0.01em;
  line-height: 1.5;
}

/* --- focus rings ----------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.hero :focus-visible,
.callstrip :focus-visible,
.foot :focus-visible {
  outline-color: var(--zinc);
}

/* --- motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .foot__link,
  .link,
  .falz {
    transition: color 150ms ease-out, background-color 150ms ease-out,
                background-size 180ms ease-out,
                outline-color 150ms ease-out, text-decoration-color 150ms ease-out;
  }

  /* Signature load reveal: seams paint in L→R, a single zinc glint sweeps,
     and the text rises into place. One orchestrated sequence, non-looping,
     ends in the final readable state. */
  .hero__skin .seam-run {
    animation: seam-paint-in 950ms cubic-bezier(.65,.05,.3,1) 100ms forwards;
    transform-origin: right center;
  }
  .hero__skin .glint {
    animation: glint-sweep 900ms cubic-bezier(.4,0,.2,1) 700ms forwards;
  }
  .hero__brow,
  .hero__title,
  .hero__lead,
  .hero__cta,
  .hero__meta {
    animation: text-rise 600ms cubic-bezier(.2,.65,.3,1) forwards;
    opacity: 0;
    transform: translateY(8px);
  }
  .hero__brow  { animation-delay: 850ms; }
  .hero__title { animation-delay: 950ms; }
  .hero__lead  { animation-delay: 1050ms; }
  .hero__cta   { animation-delay: 1150ms; }
  .hero__meta  { animation-delay: 1250ms; }

  @keyframes seam-paint-in {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
  }
  @keyframes glint-sweep {
    0%   { transform: translateX(-100%) rotate(14deg); opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateX(380%) rotate(14deg); opacity: 0; }
  }
  @keyframes text-rise {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Reduced motion: show the end state immediately, no animation at all. */
@media (prefers-reduced-motion: reduce) {
  .hero__skin .seam-run { display: none; }
  .hero__skin .glint { display: none; }
}