/* ==========================================================================
   Layout and components. Mobile first.
   No colour, radius or shadow literals here. Everything comes from tokens.
   ========================================================================== */

/* --- Reset and base ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--nav-gap) + var(--s-4));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

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

/* The UA rule for [hidden] is display:none, but any author rule that sets a
   display beats it, so .form{display:grid} would quietly un-hide a hidden
   form. This makes the attribute mean what it says. */
[hidden] { display: none !important; }
figure, figcaption { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
h3, h4 { letter-spacing: var(--tr-snug); line-height: var(--lh-snug); }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Italic is the emphasis device, the way the reference site uses it. */
em, .em { font-style: italic; }

:focus-visible {
  outline: 2.5px solid var(--rust);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
::selection { background: var(--rust); color: #fff; }

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

.skip-link {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--rust);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-250%);
}
.skip-link:hover { background: var(--rust-deep); }
.skip-link:focus { transform: translateY(0); }

/* --- Glass --------------------------------------------------------------
   One surface, three weights. Flat faces: the lift comes from the drop
   shadow and the blur, not from a lit edge. */

.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  isolation: isolate;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(158deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.12) 38%,
    rgba(255, 255, 255, 0) 62%);
}
.glass--light  { background: var(--glass-light); }
.glass--heavy  { background: var(--glass-heavy); -webkit-backdrop-filter: var(--blur-heavy); backdrop-filter: var(--blur-heavy); }
.glass--tint   { background: linear-gradient(158deg, rgba(255,255,255,0.5), rgba(255,255,255,0.24)), var(--glass-tint); }
.glass--xl     { border-radius: var(--r-xl); }
.glass--pill   { border-radius: var(--r-pill); }

/* Safari and Chrome have had backdrop-filter for years, but where it is
   missing the panels must still be readable, so they go near opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass        { background: rgba(255, 255, 255, 0.92); }
  .glass--light { background: rgba(255, 255, 255, 0.86); }
  .glass--heavy { background: rgba(255, 255, 255, 0.96); }
}

/* --- Layout -------------------------------------------------------------- */

.section { padding-block: var(--section-y); position: relative; }
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure { max-width: var(--measure); }

/* Grid children default to min-width:auto, which lets one wide cell push a
   track past the viewport and drag its siblings out with it. */
.split > *, .cards > *, .pills > *, .form__row > *, .footer__nav > * { min-width: 0; }

.split { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
  .split--wide-left  { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-5);
  border-radius: var(--r-pill);
  background: var(--rust-soft);
  color: var(--rust-deep);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-radius: var(--r-pill);
  background: currentColor;
}

.lede { font-size: var(--t-lg); line-height: 1.42; letter-spacing: var(--tr-snug); }
.body { color: var(--muted); max-width: var(--measure); }
.small { font-size: var(--t-sm); color: var(--muted); }

.h-xxl { font-size: var(--t-xxl); }
.h-xl  { font-size: var(--t-xl); }
.h-lg  { font-size: var(--t-lg); font-weight: 700; }
.accent { color: var(--rust); }

/* --- Lockup -------------------------------------------------------------
   Name primary, STEELWORKS subordinate beneath it. Same arrangement
   everywhere. It scales, it never rearranges. */

.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-logo);
  text-decoration: none;
  color: inherit;
}
.lockup__name {
  font-size: 1em;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.012em;
  transition: color var(--dur-fast) var(--ease);
}
/* Only the nav lockup is a link. The h1 and the footer mark are not, so the
   hover is scoped to the anchor rather than the class. */
a.lockup:hover .lockup__name { color: var(--rust); }
a.lockup:hover .lockup__sub  { color: var(--rust-deep); }
.lockup__sub {
  font-size: 0.28em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3em;
  margin-top: 0.5em;
  margin-left: 0.1em;
  color: var(--rust);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}
.lockup--nav  { font-size: 1.35rem; }
/* At nav size the strict ratio lands at 3.8px, which is not legible. The
   hierarchy is unchanged, the ratio is opened up so the word can be read.
   This is the only place it deviates. */
.lockup--nav .lockup__sub {
  font-size: 0.4em;
  letter-spacing: 0.16em;
  margin-top: 0.35em;
}
.lockup--hero { font-size: var(--t-hero); }
.lockup--foot { font-size: clamp(2rem, 6vw, 3rem); }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--rust);
  color: #fff;
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: var(--tr-snug);
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--rust-deep); }
.btn:active { transform: translateY(0); }

/* Lifts only where there is a real pointer. On a touch screen a tap would
   otherwise leave the element hovered until you tap somewhere else. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}

.btn--glass {
  background: var(--glass-heavy);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
.btn--glass:hover {
  background: #fff;
  border-color: #fff;
  box-shadow: none;
}

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}
.btn--quiet:hover {
  background: var(--rust-soft);
  border-color: var(--rust);
  color: var(--rust-deep);   /* rust on rust-soft is 4.42, which misses AA */
}

.btn--sm { min-height: 2.5rem; padding: var(--s-2) var(--s-5); font-size: var(--t-sm); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 33rem) {
  .actions { display: grid; }
  .actions .btn { width: 100%; }
}

.link {
  color: var(--rust);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.link {
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.link:hover {
  color: var(--rust-deep);
  background: var(--rust-soft);
}

/* --- Floating nav -------------------------------------------------------
   A glass pill sitting off the top of the page rather than a bar bolted to
   it. Heavy glass, because this is the one surface that has to stay legible
   over whatever happens to be scrolling underneath it. */

.nav {
  position: fixed;
  top: var(--nav-gap);
  left: 0; right: 0;
  z-index: 100;
  padding-inline: var(--gutter);
}
.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  min-height: var(--nav-h);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  transition: box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.nav.is-stuck .nav__inner { box-shadow: var(--sh-lg); }

.nav__links { display: none; }
.nav__link {
  position: relative;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__link:hover { background: rgba(255, 255, 255, 0.85); color: var(--rust); }
.nav__link[aria-current="true"] { color: var(--rust-deep); background: var(--rust-soft); }

.nav__end { display: flex; align-items: center; gap: var(--s-2); }
.nav__cta { display: none; }

/* Burger, rounded to match everything else. */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem; height: 2.75rem;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.burger:hover {
  background: var(--rust-soft);
  border-color: var(--rust);
  color: var(--rust-deep);   /* rust on rust-soft is 4.42, which misses AA */
}
.burger span {
  display: block; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.nav.is-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile sheet, hanging under the pill rather than covering the screen. */
.menu {
  position: fixed;
  top: calc(var(--nav-h) + var(--nav-gap) + var(--s-3));
  left: var(--gutter); right: var(--gutter);
  z-index: 99;
  padding: var(--s-3);
  display: grid;
  gap: var(--s-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility var(--dur);
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: var(--tr-snug);
  text-decoration: none;
}
.menu__link {
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.menu__link:hover { background: rgba(255, 255, 255, 0.85); color: var(--rust); }
@media (hover: hover) {
  .menu__link:hover { transform: translateX(3px); }
}
.menu__num { font-size: var(--t-xs); font-weight: 700; color: var(--rust); }
.menu__cta { margin-top: var(--s-2); }

@media (min-width: 60rem) {
  .burger, .menu { display: none; }
  .nav__links { display: flex; align-items: center; gap: var(--s-1); }
  .nav__cta { display: inline-flex; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  /* Full screen. min-height, not height, so the hero grows instead of
     overflowing when the content is taller than the viewport, which it is on
     a phone. svh is the small viewport height: it ignores the browser chrome
     that hides on scroll, so the hero never jumps as that bar collapses.
     The vh line above it is the fallback for browsers without svh. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--nav-gap) + var(--s-7));
  padding-bottom: var(--s-7);

}
.hero__grid { display: grid; gap: var(--s-6); align-items: center; }
.hero__line {
  font-size: var(--t-lg);
  color: var(--muted);
  max-width: 34ch;
  margin-top: var(--s-5);
}
.hero__actions { margin-top: var(--s-6); }

/* Hero product shot. The PNG is a cut-out on transparency, so it stands on
   the page rather than sitting in a framed card, and the shadow follows the
   silhouette instead of a box. */
.hero__shot { display: flex; justify-content: center; align-items: center; }
.hero__can {
  width: auto;
  max-width: 100%;
  /* Capped against the viewport so the can cannot push the full height hero
     past one screen on its own. svh for the same reason the hero uses it. */
  max-height: min(62vh, 34rem);
  max-height: min(62svh, 34rem);
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(28, 21, 18, 0.20));
}

/* Small glass chips carrying the plain facts. */
/* Stacked, not a wrapping row: they sit in their own column beside the tin
   on desktop, and read as a short spec list on a phone. */
.pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-6);
}
.pill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  color: var(--muted);
}
.pill b { color: var(--ink); font-weight: 700; }

@media (min-width: 60rem) {
  /* Copy, tin, then the spec pills in their own narrow column. */
  .hero__grid {
    grid-template-columns: 1.05fr minmax(0, 1fr) auto;
    gap: var(--s-7);
    align-items: center;
  }
  .hero__grid .pills { margin-top: 0; }
}

/* --- Shot frames --------------------------------------------------------
   Standing in for photography that does not exist yet. Deliberately not a
   picture of anything. Each carries its own brief, ratio and pixel size, so
   the site doubles as the shot list until the real files arrive. */

.shot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-2);
  aspect-ratio: var(--ratio, 4 / 5);
  padding: var(--s-5);
  overflow: hidden;
}
.shot::after {
  content: "";
  position: absolute;
  inset: var(--s-3);
  border: 1.5px dashed rgba(183, 65, 14, 0.28);
  background: rgba(183, 65, 14, 0.035);
  border-radius: var(--r-md);
  pointer-events: none;
}
.shot__tag {
  position: relative;
  align-self: flex-start;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--rust);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.shot__brief { position: relative; font-size: var(--t-sm); color: var(--muted); max-width: 34ch; }
.shot__spec  { position: relative; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Cards --------------------------------------------------------------- */

.cards { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Stacked rather than side by side: the number sits beside the text so each
   one reads as a line in a list rather than a tile. */
.cards--stack { gap: var(--s-3); }
.cards--stack .card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  padding: var(--s-5);
}
.cards--stack .card__num { grid-row: 1 / span 2; }
.cards--stack .card__body { max-width: 62ch; }

.card { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: var(--r-pill);
  background: var(--rust-soft);
  color: var(--rust-deep);
  font-size: var(--t-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.card__title { font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--tr-snug); }
.card__body { font-size: var(--t-sm); color: var(--muted); }

/* The bitters are the proof point, so that card is the one that is filled. */
.card--key { background: linear-gradient(158deg, rgba(255,255,255,0.34), rgba(255,255,255,0.1)), var(--rust); border-color: rgba(255,255,255,0.28); }
.card--key .card__title, .card--key .card__body { color: #fff; }
.card--key .card__body { opacity: 0.92; }
.card--key .card__num { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* --- Spec strip ----------------------------------------------------------
   Plain facts, no adjectives. */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; }
.spec { padding: var(--s-4); background: rgba(255, 255, 255, 0.3); }
.spec__k { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-1); }
.spec__v { font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--tr-snug); font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) { .specs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .specs { grid-template-columns: repeat(6, 1fr); } }

.provisional {
  display: inline-block;
  padding: 0.1em var(--s-2);
  border-radius: var(--r-pill);
  background: var(--rust-soft);
  color: var(--rust-deep);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Buy ----------------------------------------------------------------- */

.buy-card { padding: var(--s-6); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); }
.price__figure { font-size: var(--t-xxl); font-weight: 800; letter-spacing: var(--tr-tight); line-height: 1; font-variant-numeric: tabular-nums; }
.price__unit { font-size: var(--t-sm); color: var(--muted); font-weight: 600; }

.costs { margin-top: var(--s-5); border-radius: var(--r-md); overflow: hidden; background: rgba(255,255,255,0.4); }
.cost {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  font-variant-numeric: tabular-nums;
}
.cost + .cost { border-top: 1px solid var(--line); }
.cost__k { color: var(--muted); font-size: var(--t-sm); }
.cost__v { font-weight: 700; }

/* --- Forms --------------------------------------------------------------- */

.form { display: grid; gap: var(--s-4); }

/* A photograph set into a text column, shown whole at its own proportions. */
.figure {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Segmented choice ---------------------------------------------------- */

.choice { border: 0; margin: 0; padding: 0; }
.choice__set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.choice__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.125rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.choice__opt input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice__opt:hover { background: #fff; border-color: var(--rust); }
.choice__opt:has(input:checked) {
  background: var(--rust-soft);
  border-color: var(--rust);
  color: var(--rust-deep);
}
.choice__opt:has(input:focus-visible) {
  outline: 2.5px solid var(--rust);
  outline-offset: 2px;
}

/* --- Waiting list: photo, trigger, modal -------------------------------- */

.wl-photo {
  margin-bottom: var(--s-4);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.wl-photo img { width: 100%; height: auto; display: block; }

.waitlist__open { width: 100%; }

.wl-dialog {
  width: 100%;
  max-width: min(38rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}
.wl-dialog::backdrop {
  background: rgba(28, 21, 18, 0.44);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.wl-dialog__panel {
  position: relative;
  padding: var(--s-6);
  max-height: calc(100svh - 3rem);
  overflow-y: auto;
}
.wl-dialog__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.wl-dialog__close:hover {
  background: var(--rust-soft);
  border-color: var(--rust);
  color: var(--rust-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .wl-dialog[open] { animation: wl-in var(--dur) var(--ease-out) both; }
  .wl-dialog[open]::backdrop { animation: wl-fade var(--dur) var(--ease-out) both; }
}
@keyframes wl-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes wl-fade { from { opacity: 0; } to { opacity: 1; } }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label { font-size: var(--t-sm); font-weight: 700; letter-spacing: var(--tr-snug); }
.field__label .opt { color: var(--muted); font-weight: 500; }

.input {
  width: 100%;
  min-height: 3.125rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-base);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--muted); opacity: 0.8; }
.input:hover { background: rgba(255, 255, 255, 0.9); }
.input:focus {
  outline: none;
  background: #fff;
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(183, 65, 14, 0.16);
}
textarea.input { min-height: 6.5rem; resize: vertical; }

select.input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.3rem) calc(50% + 2px), calc(100% - 1rem) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s-8);
}

.field__hint { font-size: var(--t-sm); color: var(--muted); }
.field__error {
  display: none;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--rust);
}
.field__error::before {
  content: "";
  width: 1rem; height: 1rem;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--rust);
}
.field.has-error .input { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(183, 65, 14, 0.16); }
.field.has-error .field__error { display: flex; }

.check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.check input {
  appearance: none;
  flex: none;
  width: 1.375rem; height: 1.375rem;
  margin-top: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check:hover input { border-color: var(--rust); background: #fff; }
.check:hover input:checked { background: var(--rust-deep); border-color: var(--rust-deep); }
.check span { transition: color var(--dur-fast) var(--ease); }
.check:hover span { color: var(--rust); }
.check input::after {
  content: "";
  width: 0.6rem; height: 0.6rem;
  border-radius: 3px;
  background: #fff;
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.check input:checked { background: var(--rust); border-color: var(--rust); }
.check input:checked::after { transform: scale(1); }
.check span { font-size: var(--t-sm); }

.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 34rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form fieldset { border: 0; margin: 0; padding: 0; }
.form legend { padding: 0; }
.form__foot { display: grid; gap: var(--s-3); }

.form__status {
  display: none;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--rust-soft);
  color: var(--rust-deep);
  font-size: var(--t-sm);
  font-weight: 600;
}
.form.is-error .form__status--error { display: block; }
.form.is-submitting .btn { opacity: 0.6; pointer-events: none; }

.form__success { display: none; padding: var(--s-6); text-align: center; }
.form__success h3 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.form__success p { color: var(--muted); }
.form__success .tick {
  width: 3rem; height: 3rem;
  margin: 0 auto var(--s-4);
  border-radius: var(--r-pill);
  background: var(--rust);
  color: #fff;
  display: grid; place-content: center;
  font-size: 1.4rem; font-weight: 800;
}
.form-wrap.is-done .form { display: none; }
.form-wrap.is-done .form__success { display: block; }

/* --- Contact and lists --------------------------------------------------- */

.rows { display: grid; gap: var(--s-3); }
.row { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-1); }
.row__k { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); }
.row__v { font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--tr-snug); }
.row__v a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.row__v a:hover { color: var(--rust); border-bottom-color: var(--rust); }
.row__note { font-size: var(--t-sm); color: var(--muted); }

.empty { padding: var(--s-8) var(--s-5); text-align: center; }
.empty p { color: var(--muted); margin: var(--s-3) auto 0; max-width: 46ch; }

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

.footer { padding-block: var(--s-8) var(--s-6); }
.footer__inner { padding: var(--s-7) var(--s-6) var(--s-5); }
.footer__top { display: grid; gap: var(--s-6); }
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
.footer__h { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); }
.footer__list li + li { margin-top: var(--s-2); }
.footer__list a {
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.footer__list a:hover { color: var(--rust); border-bottom-color: var(--rust); }
.footer__bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--muted);
}
@media (min-width: 60rem) {
  .footer__top { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .footer__nav { grid-template-columns: repeat(3, 1fr); }
}

/* --- Reveal -------------------------------------------------------------
   Visible by default. An element is only hidden once JS has armed it, and
   JS only arms what starts below the fold. A broken or blocked script
   leaves a readable page rather than a blank one. */

.reveal.is-armed {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-armed.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal.is-armed { opacity: 1; transform: none; transition: none; }
  .btn:hover, .btn:active, .menu__link:hover { transform: none; }
}