/* ==========================================================================
   THỔ MỘC — concept-b
   World: bảng công khai công trình (the statutory site information board
   bolted to the fence at the gate). Enamel field, bolt heads, caps title bar,
   field/value register, chalk-line marking ink.
   ========================================================================== */

:root {
  /* --- surfaces --------------------------------------------------------- */
  --paper:        #E8E6E1;   /* limewash / galvanised bone, cool not cream   */
  --paper-warm:   #DCD9D2;   /* second paper step                            */
  --paper-deep:   #CFCCC4;   /* third paper step, used for wells             */
  --enamel:       #23282A;   /* enamel field, the dark ground                */
  --enamel-deep:  #171B1C;   /* deepest step, footer + title bars            */
  --enamel-lift:  #2E3436;   /* raised plate on the enamel                   */

  /* --- two separate greys: one draws, one speaks ------------------------ */
  --rule:         #9A9A94;   /* LINES ONLY. never text.                      */
  --rule-dark:    #414748;   /* lines on the enamel ground                   */
  --ink-grey:     #55564F;   /* the grey that is allowed to be text  5.4:1   */
  --ink-grey-dk:  #B3B4AC;   /* its counterpart on the enamel ground         */

  /* --- ink -------------------------------------------------------------- */
  --ink:          #1A1D1E;
  --ink-on-dark:  #EDEBE5;

  /* --- the marking ink: one meaning only -------------------------------- */
  /* the chalk line. it marks the line that has been committed to.          */
  --signal:       #A8321F;
  --signal-deep:  #8B2817;
  --signal-ink:   #F6F1EC;   /* the only type colour allowed on the ink fill */

  /* --- type ------------------------------------------------------------- */
  --ff-board: "Saira Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --ff-reg:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-prose: "Petrona", Georgia, "Times New Roman", serif;

  --fs-mega:   clamp(2.6rem, 5.6vw, 4.35rem);
  --fs-xxl:    clamp(2.1rem, 3.6vw, 3.05rem);
  --fs-xl:     clamp(1.65rem, 2.5vw, 2.25rem);
  --fs-lg:     clamp(1.3rem, 1.7vw, 1.6rem);
  --fs-md:     1.1rem;
  --fs-body:   1.0313rem;
  --fs-prose:  1.1563rem;
  --fs-sm:     0.9375rem;
  --fs-xs:     0.8438rem;
  --fs-label:  0.7188rem;   /* 11.5px — micro-caps floor is 11px            */
  --fs-label-xs: 0.6875rem; /* 11px exactly. the floor, never below it.     */
  --fs-num-xl: clamp(1.9rem, 3.1vw, 2.75rem);

  --tr-label: 0.155em;

  /* --- rhythm ----------------------------------------------------------- */
  --gut: clamp(1.15rem, 3.4vw, 3rem);
  --band: clamp(4rem, 7.5vw, 7rem);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-prose);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-variant-numeric: lining-nums;
}

img { max-width: 100%; display: block; height: auto; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.1; }

p { margin: 0 0 1.05em; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* every measurement, price, year, area, code */
.num {
  font-family: var(--ff-reg);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - (var(--gut) * 1.2), 1560px); margin-inline: auto; }

/* --------------------------------------------------------------------------
   MICRO-CAPS LABEL — the board's field names
   -------------------------------------------------------------------------- */
.lbl {
  font-family: var(--ff-reg);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-grey);
  line-height: 1.3;
}
.lbl-dk { color: var(--ink-grey-dk); }
.lbl-sig { color: var(--signal); }

/* a caption is not a label: sentence case, prose face */
.cap {
  font-family: var(--ff-reg);
  font-size: var(--fs-xs);
  color: var(--ink-grey);
  line-height: 1.5;
}
.cap-dk { color: var(--ink-grey-dk); }

/* --------------------------------------------------------------------------
   THE BOARD — bolted enamel plate. the one shape the whole site is made of.
   -------------------------------------------------------------------------- */
.board {
  position: relative;
  background: var(--enamel);
  color: var(--ink-on-dark);
  border: 1px solid var(--rule-dark);
  padding: clamp(1.1rem, 2vw, 1.75rem);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.028) 0 1px, transparent 1px 7px);
}
/* four bolt heads, drawn as background dots in the four corners */
.board::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 4px 4px, #0F1213 0 2px, var(--rule-dark) 2px 4.2px, transparent 4.4px),
    radial-gradient(circle at calc(100% - 4px) 4px, #0F1213 0 2px, var(--rule-dark) 2px 4.2px, transparent 4.4px),
    radial-gradient(circle at 4px calc(100% - 4px), #0F1213 0 2px, var(--rule-dark) 2px 4.2px, transparent 4.4px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #0F1213 0 2px, var(--rule-dark) 2px 4.2px, transparent 4.4px);
  background-repeat: no-repeat;
}
.board-paper {
  background: var(--paper-warm);
  color: var(--ink);
  border-color: var(--rule);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.026) 0 1px, transparent 1px 7px);
}
.board-paper::before {
  background-image:
    radial-gradient(circle at 4px 4px, #7F7F79 0 2px, var(--rule) 2px 4.2px, transparent 4.4px),
    radial-gradient(circle at calc(100% - 4px) 4px, #7F7F79 0 2px, var(--rule) 2px 4.2px, transparent 4.4px),
    radial-gradient(circle at 4px calc(100% - 4px), #7F7F79 0 2px, var(--rule) 2px 4.2px, transparent 4.4px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #7F7F79 0 2px, var(--rule) 2px 4.2px, transparent 4.4px);
}

/* title bar across the top of a board */
.board-bar {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  align-items: baseline; justify-content: space-between;
  background: var(--enamel-deep);
  margin: calc(clamp(1.1rem, 2vw, 1.75rem) * -1);
  margin-bottom: clamp(1.1rem, 2vw, 1.75rem);
  padding: .72rem clamp(1.1rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--rule-dark);
}
.board-bar h2, .board-bar h1, .board-bar .board-title {
  font-family: var(--ff-board);
  font-size: var(--fs-md);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-on-dark);
}
.board-bar .bar-num {
  font-family: var(--ff-reg);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
}
.board-paper .board-bar { background: var(--paper-deep); border-bottom-color: var(--rule); }
.board-paper .board-bar h2,
.board-paper .board-bar .board-title { color: var(--ink); }

/* --------------------------------------------------------------------------
   REGISTER — the atom of this site. label left, value right, hairline under.
   -------------------------------------------------------------------------- */
.reg { border-top: 1px solid var(--rule); }
.board .reg, .reg-dk { border-top-color: var(--rule-dark); }

.reg-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .5rem 1.5rem;
  padding: .74rem 0 .72rem 1.35rem;
  border-bottom: 1px solid var(--rule);
}
.board .reg-row, .reg-dk .reg-row { border-bottom-color: var(--rule-dark); }

.reg-row > .reg-k { font-family: var(--ff-reg); font-size: var(--fs-sm); }
.reg-row > .reg-v {
  font-family: var(--ff-reg);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.reg-note {
  grid-column: 1 / -1;
  font-family: var(--ff-reg);
  font-size: var(--fs-xs);
  color: var(--ink-grey);
  margin-top: .2rem;
  max-width: 62ch;
}
.board .reg-note, .reg-dk .reg-note { color: var(--ink-grey-dk); }

/* the total line is ruled twice */
.reg-row-total { border-bottom: 3px double var(--rule); }
.board .reg-row-total, .reg-dk .reg-row-total { border-bottom-color: var(--rule-dark); }

/* ---- THE ONE HOVER DEVICE: the chalk line (mực búng) ------------------- */
/* a red line snaps across the row and a tick appears in the left gutter.   */
.reg-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .34s cubic-bezier(.2,.7,.3,1);
}
.reg-row::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  background: var(--signal);
  transform: scale(0) rotate(45deg);
  transition: transform .28s cubic-bezier(.2,.7,.3,1) .06s;
}
.reg-row:hover::after,
.reg-row:focus-within::after { transform: scaleX(1); }
.reg-row:hover::before,
.reg-row:focus-within::before { transform: scale(1) rotate(45deg); }

/* --------------------------------------------------------------------------
   BUTTONS — one primary style, filled with the marking ink
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--ff-reg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.5rem;
  border: 1px solid var(--signal-deep);
  background: var(--signal);
  color: var(--signal-ink);
  cursor: pointer;
  transition: background .2s ease;
}
.btn:hover, .btn:focus-visible { background: var(--signal-deep); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--paper-deep); }
.board .btn-ghost, .btn-ghost-dk {
  color: var(--ink-on-dark);
  border-color: var(--rule-dark);
}
.board .btn-ghost:hover, .btn-ghost-dk:hover { background: var(--enamel-lift); }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--enamel-deep);
  border-bottom: 1px solid var(--rule-dark);
  color: var(--ink-on-dark);
}
.site-head .wrap-wide {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 62px;
  padding-block: .55rem;
}
.wordmark {
  font-family: var(--ff-board);
  font-size: 1.32rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-on-dark);
  padding-right: 1.1rem;
  border-right: 1px solid var(--rule-dark);
  white-space: nowrap;
}
.wordmark span { display: block; }
.wordmark .wm-sub {
  font-family: var(--ff-reg);
  font-size: var(--fs-label-xs);
  letter-spacing: .17em;
  color: var(--ink-grey-dk);
  font-weight: 500;
  margin-top: 1px;
}
.nav { display: flex; gap: clamp(.8rem, 1.5vw, 1.6rem); flex: 1 1 auto; flex-wrap: wrap; }
.nav a {
  font-family: var(--ff-reg);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-grey-dk);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink-on-dark); border-bottom-color: var(--signal); }
.head-right { display: flex; align-items: center; gap: .85rem; margin-left: auto; }
.head-phone {
  font-family: var(--ff-reg);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-on-dark);
  white-space: nowrap;
}
.head-cta { padding: .62rem 1.1rem; font-size: var(--fs-label); }

.lang-toggle { display: flex; border: 1px solid var(--rule-dark); }
.lang-toggle button {
  font-family: var(--ff-reg);
  font-size: var(--fs-label-xs);
  letter-spacing: .1em;
  font-weight: 700;
  padding: .38rem .5rem;
  background: transparent;
  color: var(--ink-grey-dk);
  border: 0;
  cursor: pointer;
  line-height: 1;
}
.lang-toggle button + button { border-left: 1px solid var(--rule-dark); }
.lang-toggle button[aria-pressed="true"] { background: var(--signal); color: var(--signal-ink); }

/* --------------------------------------------------------------------------
   HERO — the board at the gate
   -------------------------------------------------------------------------- */
.gate {
  background: var(--enamel-deep);
  color: var(--ink-on-dark);
  padding-block: clamp(2.2rem, 4.5vw, 3.6rem) clamp(2.6rem, 5vw, 4.2rem);
  border-bottom: 1px solid var(--rule-dark);
  overflow: hidden;
}
.gate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  align-items: start;
}
.gate-lede { max-width: 46ch; }
.gate-eyebrow { margin-bottom: 1.1rem; }
.gate h1 {
  font-family: var(--ff-board);
  font-size: var(--fs-mega);
  line-height: .96;
  letter-spacing: -.005em;
  font-weight: 600;
  margin-bottom: .85rem;
}
.gate h1 .gate-h1-b {
  display: block;
  font-family: var(--ff-reg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-grey-dk);
  margin-top: .85rem;
}
.gate h1 { max-width: 15ch; }
.gate-sub {
  font-size: var(--fs-md);
  color: var(--ink-on-dark);
  max-width: 44ch;
  margin-bottom: 1.5rem;
}
.gate-board { margin-top: 1.6rem; }
.gate-board .reg-row { padding-top: .58rem; padding-bottom: .56rem; }
.gate-side { display: flex; flex-direction: column; gap: 1.1rem; }
.gate-actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin-top: 1.3rem; }
/* the primary action is the one element that leaves the board: it crosses the
   bottom edge, the way a notice gets tacked over the frame it belongs to. */
.gate-board .gate-actions {
  margin-bottom: calc(clamp(1.1rem, 2vw, 1.75rem) * -1 - 34px);
  transform: translateY(34px);
  position: relative;
  z-index: 2;
}
.gate-board .gate-actions .btn { border-color: #6E2013; }
.gate-phone {
  font-family: var(--ff-reg);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-on-dark);
  border-bottom: 2px solid var(--signal);
  padding-bottom: 2px;
}

/* the photograph, in a ruled frame with its code in the corner */
.plate { position: relative; border: 1px solid var(--rule); background: var(--paper-warm); }
.plate-dk { border-color: var(--rule-dark); background: var(--enamel-lift); }
.plate img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 10; }
.plate-tall img { aspect-ratio: 4 / 5; }
.plate-code {
  position: absolute; top: 0; right: 0;
  font-family: var(--ff-reg);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  font-weight: 700;
  padding: .3rem .55rem;
  background: var(--enamel-deep);
  color: var(--ink-on-dark);
}
.plate-cap {
  padding: .6rem .75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--ff-reg);
  font-size: var(--fs-xs);
  color: var(--ink-grey);
}
.plate-dk .plate-cap { border-top-color: var(--rule-dark); color: var(--ink-grey-dk); }

/* --------------------------------------------------------------------------
   BANDS
   -------------------------------------------------------------------------- */
.band { padding-block: var(--band); }
.band-paper { background: var(--paper); }
.band-warm { background: var(--paper-warm); }
.band-dark { background: var(--enamel); color: var(--ink-on-dark); }
.band-dark .lbl { color: var(--ink-grey-dk); }
.band-dark .cap { color: var(--ink-grey-dk); }
.band-deep { background: var(--enamel-deep); color: var(--ink-on-dark); }
.band-deep .lbl, .band-deep .cap { color: var(--ink-grey-dk); }

/* a paper board laid on the warm band steps up, not level with it */
.band-warm .board-paper { background: var(--paper); }

/* the board grammar carried into a body section */
.board-sec { padding-bottom: clamp(1.35rem, 2.2vw, 1.9rem); }
.board-sec .clauses { border-top: 0; }
.board-sec .clause:last-child { border-bottom: 0; padding-bottom: .35rem; }
.board-sec .reg { border-top: 0; }

/* the paper board keeps the light rule and the dark ink */
.board-paper .reg,
.board-paper .reg-row,
.board-paper .reg-row-total,
.board-paper .clauses,
.board-paper .clause,
.board-paper .clause-term { border-color: var(--rule); }
.board-paper .reg-note { color: var(--ink-grey); }
.board-paper .clause-no { color: var(--signal); }
.board-paper .lbl { color: var(--ink-grey); }

.band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 2.5vw, 3rem);
  align-items: end;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.band-dark .band-head, .band-deep .band-head { border-bottom-color: var(--rule-dark); }
.band-head h2 {
  font-family: var(--ff-board);
  font-size: var(--fs-xxl);
  letter-spacing: .01em;
  margin-top: .5rem;
}
.band-head p { margin: 0; max-width: 60ch; }

/* --------------------------------------------------------------------------
   TWO-UP / THREE-UP
   -------------------------------------------------------------------------- */
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.1rem, 2.2vw, 2rem); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.1rem, 2.2vw, 2rem); }
.cols-2-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.4rem, 3vw, 3.2rem); align-items: start; }

/* --------------------------------------------------------------------------
   NUMBERED CLAUSES — the contract voice
   -------------------------------------------------------------------------- */
.clauses { border-top: 1px solid var(--rule); }
.band-dark .clauses, .band-deep .clauses { border-top-color: var(--rule-dark); }
.clause {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.band-dark .clause, .band-deep .clause { border-bottom-color: var(--rule-dark); }
.clause-no {
  font-family: var(--ff-reg);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--signal);
  line-height: 1.05;
}
.band-dark .clause-no, .band-deep .clause-no,
.gate .clause-no { color: #E8836E; }
.clause h3 {
  font-family: var(--ff-board);
  font-size: var(--fs-lg);
  letter-spacing: .015em;
  margin-bottom: .4rem;
}
.clause p { margin: 0; max-width: 66ch; }
.clause-term {
  font-family: var(--ff-reg);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--rule);
  display: inline-block;
}
.band-dark .clause-term, .band-deep .clause-term { border-top-color: var(--rule-dark); }

/* --------------------------------------------------------------------------
   PROJECT CARDS — the only place cards are allowed (they carry a photo)
   -------------------------------------------------------------------------- */
.dossier {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
}
.band-dark .dossier, .band-deep .dossier { border-color: var(--rule-dark); background: var(--enamel-lift); }
.dossier > figure { margin: 0; position: relative; }
.dossier img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.dossier-title {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .8rem .95rem;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
}
.band-dark .dossier-title, .band-deep .dossier-title { background: var(--enamel-deep); border-bottom-color: var(--rule-dark); }
.dossier-title h3 {
  font-family: var(--ff-board);
  font-size: var(--fs-lg);
  letter-spacing: .015em;
}
.dossier-body { padding: .2rem .95rem .95rem; margin-top: auto; }
.spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.band-dark .spec, .band-deep .spec { border-top-color: var(--rule-dark); border-left-color: var(--rule-dark); }
.spec > div {
  padding: .55rem .6rem .6rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.band-dark .spec > div, .band-deep .spec > div { border-right-color: var(--rule-dark); border-bottom-color: var(--rule-dark); }
.spec .lbl { display: block; margin-bottom: .18rem; }
.spec b {
  font-family: var(--ff-reg);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------------------------- */
.voice { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.band-dark .voice, .band-deep .voice { border-top-color: var(--rule-dark); }
.voice p {
  font-family: var(--ff-prose);
  font-size: var(--fs-prose);
  line-height: 1.55;
  margin-bottom: .8rem;
}
.voice footer { font-family: var(--ff-reg); font-size: var(--fs-xs); color: var(--ink-grey); }
.band-dark .voice footer, .band-deep .voice footer { color: var(--ink-grey-dk); }

/* --------------------------------------------------------------------------
   FORM — bottom rule only, no boxes
   -------------------------------------------------------------------------- */
.quote-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem 1.75rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-family: var(--ff-reg); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 600; color: var(--ink-grey-dk); }
.field input, .field select {
  font-family: var(--ff-reg);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-md);
  color: var(--ink-on-dark);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-dark);
  padding: .5rem 0;
  border-radius: 0;
}
.field select option { color: var(--ink); }
.field input:focus, .field select:focus { outline: 0; border-bottom-color: var(--signal); border-bottom-width: 2px; padding-bottom: calc(.5rem - 1px); }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; }

/* light-ground variant */
.quote-form-lite .field label { color: var(--ink-grey); }
.quote-form-lite .field input, .quote-form-lite .field select { color: var(--ink); border-bottom-color: var(--rule); }

/* --------------------------------------------------------------------------
   ARTICLES
   -------------------------------------------------------------------------- */
.art-list { border-top: 1px solid var(--rule); }
.art-row {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0,1fr) auto;
  gap: 1.4rem;
  align-items: baseline;
  padding: 1.2rem 0 1.15rem 1.35rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.art-row h3 { font-family: var(--ff-board); font-size: var(--fs-lg); letter-spacing: .015em; }
.art-row p { margin: .35rem 0 0; font-size: var(--fs-sm); color: var(--ink-grey); max-width: 68ch; }
.art-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: left center;
  transition: transform .34s cubic-bezier(.2,.7,.3,1);
}
.art-row::before {
  content: ""; position: absolute; left: 0; top: 1.6rem; width: 9px; height: 9px;
  background: var(--signal); transform: scale(0) rotate(45deg);
  transition: transform .28s cubic-bezier(.2,.7,.3,1) .06s;
}
.art-row:hover::after, .art-row:focus-visible::after { transform: scaleX(1); }
.art-row:hover::before, .art-row:focus-visible::before { transform: scale(1) rotate(45deg); }

.prose { font-family: var(--ff-prose); font-size: var(--fs-prose); line-height: 1.72; max-width: 68ch; }
.prose h2 { font-family: var(--ff-board); font-size: var(--fs-xl); margin: 2.2rem 0 .8rem; }
.prose h3 { font-family: var(--ff-board); font-size: var(--fs-lg); margin: 1.8rem 0 .6rem; }
.prose ul { margin: 0 0 1.1em; padding-left: 0; }
.prose ul li { padding-left: 1.3rem; position: relative; margin-bottom: .45em; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--signal); }

/* --------------------------------------------------------------------------
   FILTER BAR (cong-trinh)
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; }
.filters button {
  font-family: var(--ff-reg);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 600;
  padding: .55rem .9rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-grey);
  cursor: pointer;
  border-radius: 0;
}
.filters button[aria-pressed="true"] { background: var(--signal); border-color: var(--signal-deep); color: var(--signal-ink); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-foot { background: var(--enamel-deep); color: var(--ink-on-dark); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.foot-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1.2rem, 2.5vw, 2.5rem); }
.foot-grid h3 { font-family: var(--ff-reg); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-grey-dk); margin-bottom: .85rem; }
.foot-grid li { margin-bottom: .45rem; font-size: var(--fs-sm); font-family: var(--ff-reg); }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { border-bottom: 1px solid var(--signal); }
.foot-rule { border-top: 1px solid var(--rule-dark); margin-top: 2.5rem; padding-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between; }

/* --------------------------------------------------------------------------
   MOTION — one entrance, carried everywhere. transform only, never opacity.
   -------------------------------------------------------------------------- */
.reveal { transform: translateY(22px); transition: transform .72s cubic-bezier(.16,.72,.24,1); will-change: transform; }
.reveal.is-visible { transform: none; }
.reveal-2 { transition-delay: .09s; }
.reveal-3 { transition-delay: .18s; }
.reveal-4 { transition-delay: .27s; }

@keyframes boardSet {
  from { transform: translateY(30px); }
  to   { transform: translateY(0); }
}
@keyframes boardSwing {
  from { transform: rotate(-.7deg) translateY(14px); }
  to   { transform: rotate(0deg) translateY(0); }
}
.gate-anim-1 { animation: boardSet .42s cubic-bezier(.16,.72,.24,1) both; }
.gate-anim-2 { animation: boardSet .42s cubic-bezier(.16,.72,.24,1) .05s both; }
.gate-anim-3 { animation: boardSwing .46s cubic-bezier(.16,.72,.24,1) .1s both; transform-origin: 12% 0%; }
.gate-anim-4 { animation: boardSet .42s cubic-bezier(.16,.72,.24,1) .16s both; }
.gate-anim-5 { animation: boardSet .42s cubic-bezier(.16,.72,.24,1) .22s both; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { transform: none; transition: none; }
  .gate-anim-1, .gate-anim-2, .gate-anim-3, .gate-anim-4, .gate-anim-5 { animation: none; }
  .reg-row::after, .reg-row::before, .art-row::after, .art-row::before { transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .gate-grid { grid-template-columns: 1fr; }
  .gate-lede { max-width: none; }
  /* single column: the action that crosses the board edge would otherwise be
     covered by the next grid item. Give back the space its negative margin
     takes, and keep the board above the plate. */
  .gate-board { margin-bottom: 68px; z-index: 3; }
  .band-head { grid-template-columns: 1fr; align-items: start; }
  .cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cols-2-side { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .site-head .wrap-wide { flex-wrap: wrap; row-gap: .35rem; }
  .nav { order: 3; flex: 1 0 100%; border-top: 1px solid var(--rule-dark); padding-top: .5rem; }
  .head-right { order: 2; }
  .wordmark { order: 1; }
  .site-head { position: static; }
}

@media (max-width: 720px) {
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
  .quote-form { grid-template-columns: 1fr; }
  .spec { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .art-row { grid-template-columns: 1fr; gap: .35rem; }
  .art-row::before { top: .55rem; }
  .reg-row { grid-template-columns: 1fr; }
  .reg-row > .reg-v { text-align: left; }
  .clause { grid-template-columns: 2.4rem minmax(0,1fr); }
  .head-phone { display: none; }
  .wordmark { font-size: 1.1rem; letter-spacing: .14em; }
}