/* ==========================================================================
   Formwork — formwork.cc
   FORMWORK (SMC-PRIVATE) LIMITED
   Single stylesheet. No preprocessor, no framework, no build step.

   Contents
   01  Tokens
   02  Reset & base
   03  Typography scale
   04  Utilities
   05  Setting-out grid (signature element)
   06  Header & navigation
   07  Buttons & links
   08  Sections & layout primitives
   09  Home
   10  Product
   11  About
   12  Contact & form
   13  Legal / prose pages
   14  Footer
   15  Motion & reveals
   ========================================================================== */


/* 00  Fonts — self-hosted
   ------------------------------------------------------------------------
   Inter is served from our own origin, not from a font CDN. That is a privacy
   decision, not a performance one: loading a font from a third party makes the
   visitor's browser disclose its IP address to that third party on every page
   view, which under GDPR is a transfer requiring a lawful basis. A German
   court has already found that embedding Google Fonts without consent
   infringes the GDPR. Self-hosting removes the transfer, and with it the only
   thing on this site that could have required a consent banner.

   Inter v20 ships as a variable font, so one file covers weights 100-900 and
   the whole 400/500/600/700 range the design uses. Keep the `font-weight`
   range below — narrowing it to a single value breaks the display weight. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}


/* 01  Tokens
   ------------------------------------------------------------------------ */

:root {
  /* Palette — pulled from the hero asset and the logo linework. */
  --ink:      #16161A;   /* near-black, primary text and dark sections   */
  --graphite: #4D4D4D;   /* logo line weight, secondary text             */
  --violet:   #43188C;   /* deep purple — the brand accent               */
  --violet-2: #7B3FE4;   /* lighter violet, gradients and hovers only    */
  --paper:    #F5F4F2;   /* warm off-white page background               */
  --line:     #DEDCD8;   /* hairline rules                               */

  /* Derived surfaces */
  --ink-80:      rgba(22, 22, 26, 0.80);
  --paper-70:    rgba(245, 244, 242, 0.70);
  --paper-16:    rgba(245, 244, 242, 0.16);
  --paper-10:    rgba(245, 244, 242, 0.10);

  /* Type */
  --font-display: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --shell: 1240px;
  --measure: 62ch;
  --section-y: clamp(4.5rem, 9vw, 8.75rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 02  Reset & base
   ------------------------------------------------------------------------ */

*,
*::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(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;      /* belt-and-braces against sub-pixel bleed */
}

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

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

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

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  border-radius: 0;             /* squared corners throughout */
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

::selection {
  background: var(--violet);
  color: var(--paper);
}

/* Focus — always visible, never removed. */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.on-dark :focus-visible,
.hero :focus-visible,
.band :focus-visible,
.cta :focus-visible,
.site-foot :focus-visible {
  outline-color: var(--paper);
}


/* 03  Typography scale
   ------------------------------------------------------------------------ */

/* Display type is Helvetica Bold at 700 with negative tracking — the tighter
   the size, the tighter the track. That is what stops it reading as default. */

.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

h1, .h1 {
  font-size: clamp(2.6rem, 7.2vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
}

h2, .h2 {
  font-size: clamp(1.9rem, 4.1vw, 3.1rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}

h3, .h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}

.lead {
  font-size: clamp(1.0625rem, 1.55vw, 1.3125rem);
  line-height: 1.5;
  color: var(--graphite);
  max-width: 34ch;
  letter-spacing: -0.005em;
}

p { max-width: var(--measure); }

.muted { color: var(--graphite); }


/* 04  Utilities
   ------------------------------------------------------------------------ */

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

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.skip:focus {
  top: 0.75rem;
}


/* 05  Setting-out grid — the signature element
   ------------------------------------------------------------------------
   A precise hairline construction grid, the way setting-out lines appear on
   an architectural drawing. Columns are drawn, not implied. Every fourth
   line carries a short violet tick at the head to mark a datum. Purely
   decorative: aria-hidden in the markup, pointer-events off here. */

.setting-out {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  padding-inline: var(--gutter);
  max-width: var(--shell);
  margin-inline: auto;
  left: 0; right: 0;
}

.setting-out i {
  position: relative;
  border-left: 1px solid var(--line);
  opacity: 0.85;
}

/* Markup always ships 12 lines; the surplus is withdrawn at narrow widths so
   the count always equals the column count and never wraps to a second row. */
.setting-out i:nth-child(n + 5) { display: none; }
.setting-out i:nth-child(4) { border-right: 1px solid var(--line); }

/* The datum tick: a short violet segment where a line begins. */
.setting-out i:nth-child(4n + 1)::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: clamp(48px, 7vw, 96px);
  background: var(--violet);
}

@media (min-width: 700px) {
  .setting-out { grid-template-columns: repeat(8, 1fr); }
  .setting-out i:nth-child(n + 5) { display: block; }
  .setting-out i:nth-child(n + 9) { display: none; }
  .setting-out i:nth-child(4) { border-right: 0; }
  .setting-out i:nth-child(8) { border-right: 1px solid var(--line); }
}

@media (min-width: 1100px) {
  .setting-out { grid-template-columns: repeat(12, 1fr); }
  .setting-out i:nth-child(n + 9) { display: block; }
  .setting-out i:nth-child(8) { border-right: 0; }
  .setting-out i:nth-child(12) { border-right: 1px solid var(--line); }
}

/* On dark ground the lines invert. */
.setting-out--light i { border-color: var(--paper-16); }
.setting-out--light i:nth-child(4)  { border-right-color: var(--paper-16); }
.setting-out--light i:nth-child(8)  { border-right-color: var(--paper-16); }
.setting-out--light i:nth-child(12) { border-right-color: var(--paper-16); }
.setting-out--light i:nth-child(4n + 1)::before { background: var(--violet-2); }

/* Section datum mark — the short violet tick that opens a section. */
.mark {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.mark::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2px;
  background: var(--violet);
}

.on-dark .mark::before { background: var(--violet-2); }
.on-dark .eyebrow { color: var(--paper-70); }


/* 06  Header & navigation
   ------------------------------------------------------------------------ */

.site-head {
  position: relative;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

/* Lockup: extracted mark as a PNG, wordmark as live text. Sharper than an
   embedded raster wordmark, scales perfectly, and weighs nothing. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--ink);
}

.lockup__mark {
  width: auto;
  height: 28px;
  flex: none;
}

.lockup__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  letter-spacing: -0.035em;
  line-height: 1;
}

.lockup:hover .lockup__word { color: var(--violet); }

/* Desktop nav */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
}

.nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
}

.nav a:hover { border-bottom-color: var(--violet); }

.nav a[aria-current="page"] {
  color: var(--violet);
  border-bottom-color: var(--violet);
}

/* `.nav a` (0,2,0) outweighs `.btn` (0,1,0), so the button's own colour has to
   be restated here or it inherits the nav's ink and lands at 1.5:1 on violet. */
.nav a.btn,
.nav a.btn:hover {
  color: var(--paper);
  border-bottom: 0;
}

/* Mobile disclosure — a checkbox, so the menu works with JavaScript off.
   main.js only layers on Escape-to-close and scroll locking. */
.nav-check {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}

.nav-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  cursor: pointer;
  color: var(--ink);
}

.nav-btn svg { pointer-events: none; }
.nav-btn .icon-close { display: none; }

.nav-check:focus-visible + .nav-btn {
  outline: 2px solid var(--violet);
  outline-offset: -2px;
}

/* Above the breakpoint the nav is always on show and the checkbox does
   nothing, so take it out of the tab order rather than leave a keyboard user
   stopping on a control they cannot see. */
@media (min-width: 900px) {
  .nav-check { display: none; }
}

@media (max-width: 899px) {
  .nav-btn { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    background: var(--paper);
    padding: 5rem var(--gutter) var(--gutter);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s var(--ease), visibility 0.25s;
  }

  .nav a {
    width: 100%;
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    letter-spacing: -0.03em;
    padding: 0.7em 0;
    border-bottom: 1px solid var(--line);
  }

  .nav a:hover { border-bottom-color: var(--line); }

  .nav .btn {
    margin-top: 2rem;
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 1.1rem 1.5rem;
  }

  .nav-check:checked ~ .nav {
    visibility: visible;
    opacity: 1;
  }

  .nav-check:checked ~ .nav-btn {
    position: fixed;
    top: 0.875rem;
    right: max(var(--gutter), 0.9rem);
    z-index: 95;
    margin-right: 0;
  }

  .nav-check:checked ~ .nav-btn .icon-open { display: none; }
  .nav-check:checked ~ .nav-btn .icon-close { display: block; }
}


/* 07  Buttons & links
   ------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.015em;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--violet);
  background: var(--violet);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}

.btn:hover { background: var(--violet-2); border-color: var(--violet-2); }

.btn--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Ghost button sitting on a dark ground. */
.on-dark .btn--ghost {
  border-color: var(--paper);
  color: var(--paper);
}

.on-dark .btn--ghost:hover {
  background: var(--paper);
  color: var(--ink);
}

.on-dark .btn--solid {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.on-dark .btn--solid:hover {
  background: transparent;
  color: var(--paper);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Text link with a drawn rule rather than an underline. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.015em;
  color: var(--violet);
  text-decoration: none;
  border-bottom: 1px solid var(--violet);
  padding-bottom: 0.15rem;
}

.link:hover { color: var(--violet-2); border-bottom-color: var(--violet-2); }

.on-dark .link { color: var(--paper); border-bottom-color: var(--paper-70); }
.on-dark .link:hover { border-bottom-color: var(--paper); }

/* Inline prose links */
.prose a,
.contact-block a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.prose a:hover,
.contact-block a:hover { color: var(--violet-2); }


/* 08  Sections & layout primitives
   ------------------------------------------------------------------------ */

.section {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}

.section--flush { border-top: 0; }

.section--ink {
  background: var(--ink);
  color: var(--paper);
  border-top-color: transparent;
}

.section--violet {
  background: var(--violet);
  color: var(--paper);
  border-top-color: transparent;
}

.on-dark h1,
.on-dark h2,
.on-dark h3 { color: var(--paper); }

.on-dark p { color: var(--paper-70); }

.section__head {
  max-width: 46ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__head p { margin-top: 1rem; color: var(--graphite); }
.on-dark .section__head p { color: var(--paper-70); }

/* Split: heading left, body right. Collapses to one column on small screens. */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 6vw, 6rem);
  }
}

/* Figure with a hairline frame rather than a shadow. */
.figure {
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper);
}

.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figure figcaption {
  font-size: 0.8125rem;
  color: var(--graphite);
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
}


/* 09  Home
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(34rem, 82svh, 52rem);
  padding-block: clamp(5rem, 12vw, 8rem);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;   /* keeps the ribbed crest in frame when narrow */
}

/* Scrim: heavier at the foot where the type sits, so contrast holds. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(11, 6, 24, 0.92) 0%, rgba(11, 6, 24, 0.62) 42%,
                    rgba(11, 6, 24, 0.28) 78%, rgba(11, 6, 24, 0.34) 100%);
}

.hero .container { position: relative; z-index: 2; }

.hero h1 { max-width: 15ch; }

.hero__sub {
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  line-height: 1.45;
  color: var(--paper-70);
  letter-spacing: -0.005em;
}

.hero .btn-row { margin-top: clamp(2rem, 3.5vw, 2.75rem); }

/* Three columns, hairline-separated. */
.cols {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.cols > * {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.cols h3 { margin-bottom: 0.75rem; }
.cols p { color: var(--graphite); max-width: 40ch; }

@media (min-width: 800px) {
  .cols {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line);
  }

  .cols > * {
    border-bottom: 0;
    border-left: 1px solid var(--line);
    padding: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 2.4vw, 2.5rem);
  }

  .cols > *:first-child { border-left: 0; padding-left: 0; }
  .cols > *:last-child { padding-right: 0; }
}

/* Quiet band — one wide image, short, one line of type. */
.band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 17.5rem;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.band__media { position: absolute; inset: 0; z-index: -2; }

.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

.band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The peaks asset is very pale, so this scrim carries more weight than it
     looks like it should — measured at 6.2:1 behind the type. */
  background: linear-gradient(to right, rgba(22, 22, 26, 0.88), rgba(22, 22, 26, 0.55));
}

.band .container { position: relative; z-index: 2; }

.band p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--paper);
  max-width: 20ch;
}

/* Closing CTA */
.cta { text-align: left; }

.cta h2 { max-width: 20ch; }
.cta .btn-row { margin-top: clamp(2rem, 3.5vw, 2.5rem); }


/* 10  Product
   ------------------------------------------------------------------------ */

/* Capability blocks alternating left and right with generous whitespace. */
.block {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2.75rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}

.block:first-of-type { border-top: 0; padding-top: 0; }

.block__body { max-width: 46ch; }
.block__body h3 { margin-bottom: 0.875rem; }
.block__body p { color: var(--graphite); }
.block__body p + p { margin-top: 0.875rem; }

.block__index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--violet);
  display: block;
  margin-bottom: 1rem;
}

@media (min-width: 900px) {
  .block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 7vw, 7rem);
  }

  .block--reverse .block__body { order: 2; }
  .block--reverse .block__aside { order: 1; }
}

/* The drawn plate that stands in where there is no photograph — a fragment
   of the same setting-out grid, so the page keeps its own logic. */
.plate {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 25%),
    var(--paper);
  overflow: hidden;
}

.plate::after {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  width: 25%;
  height: 1px;
  background: var(--violet);
}

.plate__rebar {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12%;
}

.plate__rebar svg { width: 100%; height: auto; }

/* The plate scales the viewBox up about 2x, which would double the stroke with
   it. Pinning the stroke keeps these marks at the logo's own line weight. */
.plate__rebar svg path { vector-effect: non-scaling-stroke; }

.avail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.avail p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
  max-width: 28ch;
}


/* 11  About
   ------------------------------------------------------------------------ */

.address {
  font-style: normal;
  line-height: 1.7;
}

.address strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.35rem;
}


/* 12  Contact & form
   ------------------------------------------------------------------------ */

/* The plain, prominent block a verification reviewer looks for. */
.contact-block {
  border: 1px solid var(--line);
  border-left: 2px solid var(--violet);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: #FFFEFC;
}

.contact-block dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.contact-block dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.contact-block dl > dt:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.contact-block dd {
  margin: 0.5rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.contact-block dd strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.125rem;
}

.form {
  display: grid;
  gap: 1.25rem;
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.8125rem 0.9375rem;
  background: #FFFEFC;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.18s var(--ease);
}

.field input:hover,
.field textarea:hover { border-color: var(--graphite); }

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--violet);
  outline: 2px solid var(--violet);
  outline-offset: -2px;
}

.field textarea { resize: vertical; min-height: 9rem; }

.form__note {
  font-size: 0.875rem;
  color: var(--graphite);
  max-width: 46ch;
}

.hours {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
}


/* 13  Legal / prose pages
   ------------------------------------------------------------------------ */

.page-head {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}

.page-head p { margin-top: 1rem; }

.updated {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-top: 1.5rem;
}

.prose {
  max-width: 68ch;
}

.prose h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  letter-spacing: -0.025em;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.prose h3 {
  font-size: 1.0625rem;
  margin-top: 1.75rem;
}

.prose p { margin-top: 1rem; max-width: none; }

.prose ul {
  margin-top: 1rem;
  padding-left: 1.25rem;
  list-style: none;
}

.prose li {
  position: relative;
  margin-top: 0.625rem;
}

.prose li::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 0.75em;
  width: 0.5rem;
  height: 1px;
  background: var(--violet);
}


/* 14  Footer
   ------------------------------------------------------------------------ */

.site-foot {
  background: var(--ink);
  color: var(--paper-70);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem);
  font-size: 0.9375rem;
}

.site-foot__grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}

@media (min-width: 800px) {
  .site-foot__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.site-foot .lockup__word { color: var(--paper); }
.site-foot .lockup:hover .lockup__word { color: var(--paper); opacity: 0.72; }

.site-foot .address {
  margin-top: 1.5rem;
  color: var(--paper-70);
  font-size: 0.9375rem;
}

.site-foot .address strong { color: var(--paper); }

.site-foot h2 {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
  font-weight: 700;
  margin-bottom: 1.125rem;
}

.foot-links li + li { margin-top: 0.625rem; }

.foot-links a,
.site-foot .address a {
  color: var(--paper-70);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.foot-links a:hover,
.site-foot .address a:hover {
  color: var(--paper);
  border-bottom-color: var(--paper-70);
}

.site-foot__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--paper-10);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem;
}

.site-foot__base p { max-width: none; }


/* 15  Motion & reveals
   ------------------------------------------------------------------------
   All motion is gated behind the .js class that main.js sets on <html>.
   With JavaScript disabled nothing here applies and every element renders
   in its final state. */

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Orchestrated hero reveal on page load. */
.js .hero__stagger > * {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.9s var(--ease) forwards;
}

.js .hero__stagger > *:nth-child(1) { animation-delay: 0.10s; }
.js .hero__stagger > *:nth-child(2) { animation-delay: 0.22s; }
.js .hero__stagger > *:nth-child(3) { animation-delay: 0.34s; }
.js .hero__stagger > *:nth-child(4) { animation-delay: 0.46s; }

.js .hero .setting-out i {
  transform: scaleY(0);
  transform-origin: top;
  animation: draw 1.1s var(--ease) forwards 0.05s;
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

@keyframes draw {
  to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal,
  .js .hero__stagger > * {
    opacity: 1;
    transform: none;
  }

  .js .hero .setting-out i { transform: none; }
}


/* Print — legal pages are the ones people actually print. */
@media print {
  .site-head, .site-foot, .setting-out, .btn-row, .hero__media { display: none; }
  body { background: #fff; color: #000; }
  .section { border-top: 0; padding-block: 1rem; }
}