/* Brand: hemingwayfence.homes — Hemingway Fence, Marion SC
   Namespace: hem81 · brushed-silver accent on graphite · serif display + humanist body
   All colour comes from Site DNA tokens (--dna-*) with dark fallbacks so the page
   never flashes white before site-dna.js applies the palette. */

:root {
  /* Art direction: galvanised metal, not warm cedar. The DNA palette decides depth and
     light/dark, then a cool graphite cast is mixed in and the seeded accent is pulled
     most of the way to brushed silver so hue comes from the metal, not from the theme. */
  --hem-tint: #2c333a;
  --hem-bg: color-mix(in srgb, var(--dna-bg, #101317) 78%, var(--hem-tint));
  --hem-surface: color-mix(in srgb, var(--dna-surface, #171b20) 62%, var(--hem-tint));
  --hem-surface-2: color-mix(in srgb, var(--dna-surface-2, #1d2228) 56%, var(--hem-tint));
  --hem-ink: color-mix(in srgb, var(--dna-ink, #f1f5f8) 90%, #eaf2f7);
  --hem-soft: color-mix(in srgb, var(--dna-ink-soft, #aab4bd) 84%, #c3ced6);
  --hem-line: var(--dna-line, rgba(198, 210, 219, 0.16));
  --hem-silver: color-mix(in srgb, var(--dna-accent, hsl(205, 10%, 72%)) 10%, #d2d8dd);
  --hem-silver-2: color-mix(in srgb, var(--dna-accent-2, hsl(205, 12%, 82%)) 10%, #eef2f5);
  --hem-on-silver: #14181c;
  /* Darker metal for eyebrows and small caps: silver everywhere at full strength would
     flatten the hierarchy against the near-white headings. */
  --hem-steel: color-mix(in srgb, var(--hem-silver) 64%, var(--hem-bg));
  --hem-wrap: 1180px;
  --hem-bar-h: 70px;
  --hem-gap: clamp(22px, 4vw, 44px);
  --hem-pad: clamp(56px, 7vw, 104px);
  --hem-serif: "Cormorant Garamond", "Georgia", serif;
  --hem-sans: "Mulish", "Segoe UI", system-ui, sans-serif;
  --hem-ease: cubic-bezier(0.22, 0.86, 0.3, 1);
}

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

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

body {
  margin: 0;
  background: var(--hem-bg);
  color: var(--hem-ink);
  font-family: var(--hem-sans);
  font-size: 16.5px;
  line-height: 1.65;
  overflow-x: hidden;
}

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

/* Photographs are shot warm (golden-hour cedar); a cool grade seats them in the silver
   palette instead of fighting it. site-dna.css resets img filters, so this needs the
   extra element in the selector to stay on top. */
html.dna-mode-dark img[src^="images/"] {
  filter: saturate(0.5) contrast(1.08) brightness(0.97);
}

/* The shared palette layer targets [data-dna-palette] body, so the brand cast is
   applied one notch more specific instead of hardcoding colours. */
html[data-dna-palette] body {
  background: var(--hem-bg);
  color: var(--hem-ink);
}

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--hem-serif);
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 6.4vw, 4.3rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1em; }

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

figure, blockquote { margin: 0; }

/* DNA hands us a seeded icon treatment (here: duotone chips). Section-level icons
   keep the chip, inline list icons drop it so a checkmark stays a checkmark. */
.hem81-feature > .dna-ic,
.hem81-svc-side .dna-ic,
.hem81-call-done > .dna-ic {
  width: 42px;
  height: 42px;
  padding: 10px;
}

.hem81-feature li .dna-ic,
.hem81-checks .dna-ic,
.hem81-svc-body li .dna-ic,
.hem81-call-aside li .dna-ic,
.hem81-sheet-links .dna-ic,
.hem81-job .dna-ic {
  padding: 0;
  background: none;
  border-radius: 0;
}

/* The seeded accent family only feeds the fleet registry — every visible accent on this
   build is brushed silver, so DNA's own accent hooks are re-pointed at the metal here.
   site-dna.css loads after this file, hence the extra element in each selector. */
html.dna-ready .dna-ic { color: var(--hem-silver); }

html.dna-ready .dna-ic-chip,
html.dna-ready .dna-ic-duotone {
  background: color-mix(in srgb, var(--hem-silver) 13%, transparent);
}

html.dna-mode-dark ::selection {
  background: var(--hem-silver);
  color: var(--hem-on-silver);
}

:focus-visible {
  outline: 2px solid var(--hem-silver);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- shell ---------- */

.hem81-wrap {
  width: 100%;
  max-width: var(--hem-wrap);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 34px);
}

.hem81-sr-only {
  position: absolute;
  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;
}

.hem81-skip:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 90;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  clip: auto;
  clip-path: none;
  background: var(--hem-silver);
  color: var(--hem-on-silver);
  font-weight: 700;
  border-radius: 6px;
}

.hem81-kicker {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--hem-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hem-steel);
}

.hem81-lede {
  max-width: 56ch;
  color: var(--hem-soft);
  font-size: 1.06rem;
}

.hem81-band { padding: var(--hem-pad) 0; }

.hem81-band--surface { background: var(--hem-surface); }

.hem81-rule {
  width: 62px;
  height: 2px;
  margin: 0 0 20px;
  background: var(--hem-silver);
}

/* ---------- buttons ---------- */

.hem81-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid var(--hem-silver);
  border-radius: 3px;
  background: var(--hem-silver);
  color: var(--hem-on-silver);
  font-family: var(--hem-sans);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--hem-ease), box-shadow 0.25s var(--hem-ease), background-color 0.25s var(--hem-ease);
}

.hem81-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px var(--hem-silver);
}

.hem81-btn--line {
  background: transparent;
  color: var(--hem-silver);
}

.hem81-btn--line:hover {
  background: color-mix(in srgb, var(--hem-silver) 14%, transparent);
}

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

.hem81-btn--ghost:hover { border-color: var(--hem-silver); }

/* ---------- SC ticker (unique to this site) ---------- */

.hem81-ticker {
  overflow: hidden;
  background: color-mix(in srgb, var(--hem-bg) 84%, #000);
  border-bottom: 1px solid var(--hem-line);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hem-soft);
}

.hem81-ticker-track {
  display: flex;
  gap: 46px;
  width: max-content;
  padding: 8px 0;
  animation: hem81Drift 38s linear infinite;
}

.hem81-ticker:hover .hem81-ticker-track { animation-play-state: paused; }

.hem81-ticker-track span { white-space: nowrap; }

.hem81-ticker-track b {
  color: var(--hem-silver);
  font-weight: 700;
}

@keyframes hem81Drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- inline ranch bar (header) ---------- */

.hem81-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--hem-bg) 92%, #000);
  border-bottom: 1px solid var(--hem-line);
  backdrop-filter: blur(9px);
}

.hem81-bar > .hem81-wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  min-height: var(--hem-bar-h);
}

.hem81-mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.hem81-mark img { width: 34px; height: 34px; }

.hem81-mark b {
  display: block;
  font-family: var(--hem-serif);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.hem81-mark small {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hem-soft);
}

.hem81-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 24px);
}

.hem81-links a {
  position: relative;
  padding: 6px 2px 6px 12px;
  border-left: 2px solid transparent;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hem-soft);
  transition: color 0.2s var(--hem-ease), border-color 0.2s var(--hem-ease);
}

.hem81-links a:hover { color: var(--hem-ink); }

.hem81-links a[aria-current="page"] {
  color: var(--hem-ink);
  border-left-color: var(--hem-silver);
}

.hem81-bar-cta { margin-left: auto; }

.hem81-sheet-btn {
  display: none;
  margin-left: auto;
  padding: 10px 12px;
  border: 1px solid var(--hem-line);
  border-radius: 3px;
  background: transparent;
  color: var(--hem-ink);
  font-family: var(--hem-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.hem81-sheet-btn span {
  display: inline-block;
  width: 16px;
  height: 2px;
  margin-right: 8px;
  background: var(--hem-silver);
  box-shadow: 0 5px 0 var(--hem-silver), 0 -5px 0 var(--hem-silver);
  vertical-align: middle;
}

/* ---------- bottom sheet menu (mobile) ---------- */

.hem81-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(8, 7, 5, 0.66);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--hem-ease), visibility 0.32s;
}

.hem81-scrim.is-open { opacity: 1; visibility: visible; }

.hem81-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 20px clamp(18px, 5vw, 28px) calc(24px + env(safe-area-inset-bottom));
  background: var(--hem-surface);
  border-top: 4px solid var(--hem-silver);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -26px 60px -30px rgba(0, 0, 0, 0.9);
  transform: translateY(105%);
  transition: transform 0.44s cubic-bezier(0.16, 1.06, 0.3, 1.02);
}

.hem81-sheet.is-open { transform: translateY(0); }

.hem81-sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hem-line);
}

.hem81-sheet-head b {
  font-family: var(--hem-serif);
  font-size: 1.2rem;
  font-weight: 600;
}

.hem81-sheet-head button {
  border: 0;
  background: transparent;
  color: var(--hem-soft);
  font-family: var(--hem-sans);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.hem81-sheet-links {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.hem81-sheet-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 4px;
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--hem-ink);
}

.hem81-sheet-links a[aria-current="page"] {
  background: var(--hem-silver);
  color: var(--hem-on-silver);
}

.hem81-sheet-links .dna-ic { width: 20px; height: 20px; color: var(--hem-silver); }

.hem81-sheet-links a[aria-current="page"] .dna-ic { color: var(--hem-on-silver); }

.hem81-sheet .hem81-btn { width: 100%; justify-content: center; }

.hem81-sheet-tel {
  display: block;
  margin-top: 12px;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--hem-soft);
  text-decoration: none;
}

/* ---------- hero: stacked + action bar ---------- */

.hem81-hero {
  position: relative;
  padding-top: clamp(46px, 7vw, 88px);
  overflow: hidden;
}

.hem81-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 320px;
  background: radial-gradient(60% 100% at 18% 0%, color-mix(in srgb, var(--hem-silver) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.hem81-hero-copy { position: relative; max-width: 760px; }

.hem81-hero h1 {
  margin-bottom: 18px;
  line-height: 1.02;
}

.hem81-wipe {
  display: block;
  overflow: hidden;
}

.hem81-wipe > span { display: block; }

.js .hem81-wipe > span { transform: translateY(105%); }

.hem81-wipe > span em {
  font-style: normal;
  color: var(--hem-silver);
}

.js .hem81-hero-lede,
.js .hem81-actionbar { opacity: 0; }

.hem81-hero-lede { max-width: 52ch; color: var(--hem-soft); font-size: 1.1rem; }

.hem81-actionbar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  margin: 30px 0 0;
  border: 1px solid var(--hem-line);
  border-left: 3px solid var(--hem-silver);
  background: var(--hem-line);
}

.hem81-actionbar a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
  background: var(--hem-surface);
  text-decoration: none;
  transition: background-color 0.25s var(--hem-ease);
}

.hem81-actionbar a:hover { background: var(--hem-surface-2); }

.hem81-actionbar b {
  font-size: 0.94rem;
  font-weight: 700;
}

.hem81-actionbar small {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--hem-soft);
}

.hem81-actionbar .hem81-act-cta {
  background: var(--hem-silver);
  color: var(--hem-on-silver);
}

.hem81-actionbar .hem81-act-cta small { color: color-mix(in srgb, var(--hem-on-silver) 72%, transparent); }

.hem81-actionbar .hem81-act-cta:hover { background: var(--hem-silver-2); }

.hem81-hero-band {
  position: relative;
  margin-top: clamp(34px, 5vw, 62px);
  overflow: hidden;
  border-top: 1px solid var(--hem-line);
  border-bottom: 1px solid var(--hem-line);
}

.hem81-hero-band img {
  width: 106%;
  /* Height follows the width first, with a viewport-height guard: keyed to vh alone the
     band collapsed to a 4:1 ribbon on a normal laptop (measured 1690x426). */
  height: min(56vh, 38vw);
  min-height: 290px;
  object-fit: cover;
  object-position: center 58%;
  animation: hem81Pan 34s ease-in-out infinite alternate;
}

.hem81-hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hem-bg) 55%, transparent), transparent 45%, color-mix(in srgb, var(--hem-bg) 75%, transparent));
}

.hem81-hero-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 18px 0;
}

.hem81-hero-tag div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hem-soft);
}

.hem81-hero-tag b { color: var(--hem-ink); font-weight: 700; }

@keyframes hem81Pan {
  from { transform: translateX(-3%) scale(1.01); }
  to { transform: translateX(0) scale(1.05); }
}

/* ---------- story (about, stats-led) ---------- */

.hem81-story .hem81-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--hem-gap);
  align-items: center;
}

.hem81-story-figure {
  position: relative;
  border: 1px solid var(--hem-line);
  padding: 12px;
}

.hem81-story-figure img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.hem81-story-figure figcaption {
  padding: 12px 4px 2px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--hem-soft);
}

.hem81-story-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.hem81-story-stats div {
  padding: 16px 18px;
  background: var(--hem-surface);
  border-left: 2px solid var(--hem-silver);
}

.hem81-story-stats b {
  display: block;
  font-family: var(--hem-serif);
  font-size: 1.28rem;
}

.hem81-story-stats span {
  font-size: 0.82rem;
  color: var(--hem-soft);
}

/* ---------- standards (trust metric bar) ---------- */

.hem81-standards {
  background: var(--hem-surface);
  border-top: 1px solid var(--hem-line);
  border-bottom: 1px solid var(--hem-line);
  padding: clamp(38px, 5vw, 62px) 0;
}

.hem81-metricbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(18px, 3vw, 34px);
}

.hem81-metric b {
  display: block;
  font-family: var(--hem-serif);
  font-size: clamp(2.3rem, 4.6vw, 3.2rem);
  line-height: 1;
  color: var(--hem-silver);
}

.hem81-metric span {
  display: block;
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--hem-soft);
}

.hem81-metric + .hem81-metric { border-left: 1px solid var(--hem-line); padding-left: clamp(18px, 3vw, 34px); }

/* ---------- fencework (services, feature panels) ---------- */

.hem81-fencework-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--hem-gap);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.hem81-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
}

.hem81-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 28px;
  background: var(--hem-surface);
  border: 1px solid var(--hem-line);
  overflow: hidden;
  transition: transform 0.3s var(--hem-ease);
}

.hem81-feature::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--hem-silver);
  transition: width 0.45s var(--hem-ease);
}

.hem81-feature:hover { transform: translateY(-4px); }

.hem81-feature:hover::after { width: 100%; }

.hem81-feature > .dna-ic {
  margin-bottom: 14px;
  color: var(--hem-silver);
}

.hem81-feature h3 { margin-bottom: 10px; }

.hem81-feature p { color: var(--hem-soft); margin-bottom: 14px; }

.hem81-feature ul {
  display: grid;
  gap: 7px;
  padding-top: 6px;
  font-size: 0.9rem;
}

.hem81-feature li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--hem-soft);
}

.hem81-feature li .dna-ic {
  width: 15px;
  height: 15px;
  margin: 4px 0 0;
  flex: 0 0 auto;
}

.hem81-feature--photo { padding: 0; }

.hem81-feature--photo img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hem81-feature--photo > div { padding: 22px 26px 26px; }

/* ---------- buildline (process, zigzag) ---------- */

.hem81-buildline { background: var(--hem-bg); }

.hem81-zig {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(26px, 4vw, 44px);
}

.hem81-zig-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 30px);
  align-items: start;
  padding: 24px 26px;
  background: var(--hem-surface);
  border-left: 2px solid var(--hem-line);
}

.hem81-zig-row:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) 84px;
  border-left: 0;
  border-right: 2px solid var(--hem-line);
  margin-left: clamp(0px, 8vw, 120px);
}

.hem81-zig-row:nth-child(odd) { margin-right: clamp(0px, 8vw, 120px); }

.hem81-zig-row:nth-child(even) .hem81-zig-num { order: 2; text-align: right; }

.hem81-zig-num {
  font-family: var(--hem-serif);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--hem-silver);
}

.hem81-zig-row h3 { margin-bottom: 8px; }

.hem81-zig-row p { margin: 0; color: var(--hem-soft); }

/* ---------- porchtalk (testimonials) ---------- */

.hem81-porchtalk { background: var(--hem-surface); border-top: 1px solid var(--hem-line); }

.hem81-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  margin-top: clamp(24px, 3vw, 40px);
}

.hem81-quote {
  padding: 26px 24px;
  background: var(--hem-bg);
  border: 1px solid var(--hem-line);
}

.hem81-quote p {
  font-family: var(--hem-serif);
  font-size: 1.22rem;
  line-height: 1.4;
}

.hem81-quote p::before {
  content: "\201C";
  color: var(--hem-silver);
  margin-right: 2px;
}

.hem81-quote footer {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hem-soft);
}

/* ---------- crew (team) ---------- */

.hem81-crew .hem81-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--hem-gap);
  align-items: center;
}

.hem81-crew-figure img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--hem-line);
}

.hem81-crew-roles {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.hem81-role {
  position: relative;
  padding: 18px 20px;
  background: var(--hem-surface);
  border: 1px solid var(--hem-line);
  transition: transform 0.28s var(--hem-ease), border-color 0.28s var(--hem-ease);
}

.hem81-role:hover { transform: translateX(4px); border-color: var(--hem-silver); }

.hem81-role b { display: block; font-size: 1rem; }

.hem81-role span { font-size: 0.9rem; color: var(--hem-soft); }

/* ---------- callback split CTA ---------- */

.hem81-callback {
  border-top: 1px solid var(--hem-line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--hem-silver) 10%, transparent), transparent 62%),
    var(--hem-bg);
}

.hem81-callback .hem81-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--hem-gap);
  align-items: center;
}

.hem81-checks {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.hem81-checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--hem-soft);
}

.hem81-checks .dna-ic {
  width: 17px;
  height: 17px;
  margin-top: 4px;
  flex: 0 0 auto;
  color: var(--hem-silver);
}

.hem81-callcard {
  padding: 30px 28px;
  background: var(--hem-surface);
  border: 1px solid var(--hem-silver);
}

.hem81-callcard b {
  display: block;
  font-family: var(--hem-serif);
  font-size: 1.9rem;
  line-height: 1.1;
}

.hem81-callcard a.hem81-tel {
  display: inline-block;
  margin: 10px 0 16px;
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--hem-silver);
  text-decoration: none;
}

.hem81-callcard p { color: var(--hem-soft); font-size: 0.94rem; }

/* ---------- page hero (inner pages) ---------- */

.hem81-page-hero {
  padding: clamp(44px, 6vw, 80px) 0 clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--hem-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--hem-silver) 8%, transparent), transparent);
}

.hem81-page-hero .hem81-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--hem-gap);
  align-items: end;
}

.hem81-page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 0; }

.hem81-page-hero p { margin: 0; color: var(--hem-soft); }

/* ---------- services page catalog ---------- */

.hem81-catalog { display: block; }

.hem81-svc-list {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
}

.hem81-svc {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(20px, 3vw, 30px);
  background: var(--hem-surface);
  border: 1px solid var(--hem-line);
}

.hem81-svc:nth-child(even) { grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr); }

.hem81-svc:nth-child(even) .hem81-svc-side { order: 2; }

.hem81-svc-side {
  padding-right: clamp(0px, 2vw, 20px);
  border-right: 1px solid var(--hem-line);
}

.hem81-svc:nth-child(even) .hem81-svc-side {
  padding-right: 0;
  padding-left: clamp(0px, 2vw, 20px);
  border-right: 0;
  border-left: 1px solid var(--hem-line);
}

.hem81-svc-side .dna-ic { color: var(--hem-silver); }

.hem81-svc-side h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 12px 0 8px; }

.hem81-svc-side p { color: var(--hem-soft); margin: 0; }

.hem81-svc-body ul { display: grid; gap: 9px; }

.hem81-svc-body li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--hem-soft);
}

.hem81-svc-body li .dna-ic {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex: 0 0 auto;
  color: var(--hem-silver);
}

.hem81-svc-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hem-line);
  font-size: 0.88rem;
  color: var(--hem-soft);
}

.hem81-pricing-note {
  margin-top: clamp(24px, 3vw, 38px);
  padding: 22px 24px;
  border: 1px dashed var(--hem-line);
  color: var(--hem-soft);
}

/* ---------- about page ---------- */

.hem81-owner .hem81-wrap {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--hem-gap);
  align-items: start;
}

.hem81-owner-figure img { aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--hem-line); }

.hem81-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(24px, 3vw, 38px);
}

.hem81-value {
  padding: 22px;
  background: var(--hem-surface);
  border-top: 2px solid var(--hem-silver);
}

.hem81-value h3 { font-size: 1.15rem; }

.hem81-value p { margin: 0; color: var(--hem-soft); font-size: 0.94rem; }

.hem81-area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hem81-area-list li {
  padding: 7px 14px;
  border: 1px solid var(--hem-line);
  border-radius: 100px;
  font-size: 0.84rem;
  color: var(--hem-soft);
}

/* ---------- contact page (DNA info-bar) ---------- */

.hem81-contact-shell { padding: clamp(34px, 5vw, 64px) 0 var(--hem-pad); }

[data-contact-root] { display: grid; gap: clamp(22px, 3vw, 36px); }

/* DNA's info-bar auto-fits as many 140px tracks as the row allows (seven on a wide
   screen), which would leave our four blocks bunched on the left. Pin the track count
   to the blocks this site actually has, and span the brand heading (DNA spans h3). */
html.dna-contact-info-bar .hem81-contact-info {
  /* Uneven tracks: the email address is the longest single word on the bar and should
     not have to hyphenate while the phone block sits half empty. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.05fr);
}

.hem81-contact-info h2 {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.hem81-contact-block {
  padding: 18px 20px;
  background: var(--hem-surface);
  border: 1px solid var(--hem-line);
}

.hem81-contact-block b {
  display: block;
  margin-bottom: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hem-silver);
}

.hem81-contact-block p {
  margin: 0;
  color: var(--hem-soft);
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.hem81-contact-block a { color: var(--hem-ink); text-decoration: none; }

.hem81-contact-block a:hover { color: var(--hem-silver); }

/* ---------- the dial (callback form: one field, a phone number) ---------- */

.hem81-dial {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 52px) clamp(22px, 4vw, 48px) clamp(24px, 4vw, 42px);
  background:
    radial-gradient(80% 120% at 50% -10%, color-mix(in srgb, var(--hem-silver) 12%, transparent), transparent 62%),
    var(--hem-surface);
  border: 1px solid var(--hem-line);
  text-align: center;
  overflow: hidden;
}

/* A brushed edge along the top, like the cap rail on a metal panel. */
.hem81-dial::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hem-silver), transparent);
}

.hem81-dial-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hem-steel);
}

.hem81-dial-eyebrow .dna-ic {
  width: 15px;
  height: 15px;
  padding: 0;
  background: none;
  color: var(--hem-silver);
}

.hem81-dial h2 {
  margin: 12px 0 10px;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}

.hem81-dial-sub {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--hem-soft);
}

.hem81-dial-sub strong { color: var(--hem-ink); font-weight: 700; }

/* The field itself: one long trough, big type, no label chrome around it. */
.hem81-dial-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: clamp(22px, 3vw, 32px) 0 14px;
  padding: 12px 16px;
  background: var(--hem-bg);
  border: 1px solid var(--hem-line);
  border-radius: 4px;
  cursor: text;
  transition: border-color 0.25s var(--hem-ease), box-shadow 0.25s var(--hem-ease);
}

.hem81-dial-field.is-live {
  border-color: color-mix(in srgb, var(--hem-silver) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hem-silver) 12%, transparent);
}

.hem81-dial-field.is-ready {
  border-color: var(--hem-silver);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hem-silver) 16%, transparent);
}

.hem81-dial-code {
  font-family: var(--hem-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--hem-steel);
}

.hem81-dial-field input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 0;
  background: none;
  border: 0;
  color: var(--hem-ink);
  font-family: var(--hem-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: left;
}

.hem81-dial-field input:focus { outline: none; }

.hem81-dial-field input::placeholder { color: color-mix(in srgb, var(--hem-soft) 32%, transparent); }

.hem81-dial-tick {
  flex: 0 0 auto;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s var(--hem-ease), transform 0.3s var(--hem-ease);
}

.hem81-dial-tick .dna-ic {
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  color: var(--hem-silver);
}

.hem81-dial-field.is-ready .hem81-dial-tick { opacity: 1; transform: none; }

/* Ten slots that fill as the digits land — the little bit of feedback that makes
   typing a phone number feel like progress instead of paperwork. */
.hem81-dial-slots {
  display: flex;
  justify-content: center;
  gap: 7px;
  height: 8px;
}

.hem81-slot {
  width: 8px;
  height: 8px;
  border: 1px solid var(--hem-line);
  border-radius: 50%;
  transition: background-color 0.22s var(--hem-ease), border-color 0.22s var(--hem-ease), transform 0.22s var(--hem-ease);
}

.hem81-slot--gap { margin-left: 10px; }

.hem81-slot.is-set {
  background: var(--hem-silver);
  border-color: var(--hem-silver);
  transform: scale(1.16);
}

.hem81-dial-hint {
  margin: 12px 0 clamp(18px, 2.6vw, 26px);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--hem-soft);
}

.hem81-dial-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px 26px;
  background: var(--hem-silver);
  border: 1px solid var(--hem-silver);
  border-radius: 3px;
  color: var(--hem-on-silver);
  font-family: var(--hem-sans);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--hem-ease), transform 0.25s var(--hem-ease), box-shadow 0.25s var(--hem-ease);
}

.hem81-dial-go .dna-ic {
  width: 17px;
  height: 17px;
  padding: 0;
  background: none;
  color: currentColor;
}

.hem81-dial-go:disabled {
  background: transparent;
  border-color: var(--hem-line);
  color: var(--hem-soft);
  cursor: not-allowed;
}

.hem81-dial-go:not(:disabled):hover {
  background: var(--hem-silver-2);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px var(--hem-silver);
}

/* Fires once, the moment the tenth digit lands. */
.hem81-dial-go.is-armed { animation: hem81Arm 0.55s var(--hem-ease); }

@keyframes hem81Arm {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hem-silver) 55%, transparent); }
  100% { box-shadow: 0 0 0 16px transparent; }
}

.hem81-dial-alt {
  margin: 16px 0 0;
  font-size: 0.88rem;
  color: var(--hem-soft);
}

.hem81-dial-alt a { color: var(--hem-silver); font-weight: 700; text-decoration: none; }

.hem81-dial-alt a:hover { text-decoration: underline; }

/* --- confirmation --- */

.hem81-dial--done { animation: hem81FadeUp 0.5s var(--hem-ease); }

.hem81-dial-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 6px;
  border: 1px solid var(--hem-silver);
  border-radius: 50%;
  background: color-mix(in srgb, var(--hem-silver) 12%, transparent);
}

.hem81-dial-seal .dna-ic {
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  color: var(--hem-silver);
}

.hem81-dial-extra {
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--hem-line);
}

.hem81-dial-extra p {
  max-width: 42ch;
  margin: 10px auto 16px;
  font-size: 0.92rem;
  color: var(--hem-soft);
}

.hem81-dial-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
}

.hem81-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--hem-bg);
  border: 1px solid var(--hem-line);
  border-radius: 3px;
  color: var(--hem-ink);
  font-family: var(--hem-sans);
  cursor: pointer;
  transition: border-color 0.22s var(--hem-ease), background-color 0.22s var(--hem-ease), transform 0.22s var(--hem-ease);
}

.hem81-chip .dna-ic {
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  flex: 0 0 auto;
  color: var(--hem-silver);
}

.hem81-chip b { display: block; font-size: 0.94rem; }

.hem81-chip small { display: block; font-size: 0.78rem; color: var(--hem-soft); }

.hem81-chip:hover { border-color: color-mix(in srgb, var(--hem-silver) 60%, transparent); transform: translateY(-2px); }

.hem81-chip.is-picked {
  border-color: var(--hem-silver);
  background: color-mix(in srgb, var(--hem-silver) 12%, var(--hem-bg));
}

/* ---------- legal copy ---------- */

.hem81-legal { max-width: 74ch; }

.hem81-legal h2 { margin-top: 1.6em; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

.hem81-legal p, .hem81-legal li { color: var(--hem-soft); }

.hem81-legal ul { display: grid; gap: 8px; margin: 0 0 1em; padding-left: 18px; list-style: disc; }

/* ---------- footer ---------- */

.hem81-foot {
  padding: clamp(40px, 5vw, 68px) 0 26px;
  background: color-mix(in srgb, var(--hem-bg) 86%, #000);
  border-top: 2px solid var(--hem-silver);
}

.hem81-foot-cols {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: var(--hem-gap);
}

.hem81-foot p { color: var(--hem-soft); max-width: 40ch; font-size: 0.94rem; }

.hem81-foot h3 {
  font-family: var(--hem-sans);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hem-silver);
}

.hem81-foot ul { display: grid; gap: 8px; font-size: 0.94rem; color: var(--hem-soft); }

.hem81-foot ul a { text-decoration: none; }

.hem81-foot ul a:hover { color: var(--hem-silver); }

.hem81-foot-end {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  margin-top: clamp(26px, 4vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--hem-line);
  font-size: 0.8rem;
  color: var(--hem-soft);
}

/* ---------- mobile sticky call strip ---------- */

.hem81-sticky {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--hem-bg) 94%, #000);
  border-top: 1px solid var(--hem-silver);
  text-align: center;
}

.hem81-sticky a {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hem-silver);
}

body.hem81-sheet-open .hem81-sticky { display: none; }

/* ---------- reveal motion ---------- */

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

.js .hem81-reveal--left { transform: translateX(-38px); }

.js .hem81-reveal--right { transform: translateX(38px); }

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

/* Hero intro runs on load from CSS alone, so a JS hiccup can never leave the
   headline, lede or action bar stuck at opacity 0. */
.js .hem81-hero h1 .hem81-wipe > span {
  animation: hem81Wipe 0.9s var(--hem-ease) forwards;
}

.js .hem81-hero h1 .hem81-wipe:nth-of-type(2) > span { animation-delay: 0.12s; }

.js .hem81-hero-lede { animation: hem81FadeUp 0.7s var(--hem-ease) 0.34s forwards; }

.js .hem81-actionbar { animation: hem81SlideIn 0.75s var(--hem-ease) 0.46s forwards; }

@keyframes hem81Wipe {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}

@keyframes hem81FadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes hem81SlideIn {
  from { opacity: 0; transform: translateX(-26px); }
  to { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .hem81-links { gap: 10px; }
  .hem81-links a { letter-spacing: 0.1em; font-size: 0.7rem; }
  .hem81-story .hem81-wrap,
  .hem81-crew .hem81-wrap,
  .hem81-callback .hem81-wrap { grid-template-columns: 1fr; }
  .hem81-quotes { grid-template-columns: 1fr 1fr; }
  .hem81-foot-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .hem81-links,
  .hem81-bar-cta { display: none; }
  .hem81-sheet-btn { display: inline-flex; align-items: center; }
  .hem81-hero-copy { max-width: 100%; }
  .hem81-fencework-head,
  .hem81-page-hero .hem81-wrap,
  .hem81-owner .hem81-wrap { grid-template-columns: 1fr; }
  .hem81-feature-grid { grid-template-columns: 1fr; }
  .hem81-quotes { grid-template-columns: 1fr; }
  .hem81-svc,
  .hem81-svc:nth-child(even) { grid-template-columns: 1fr; }
  .hem81-svc-side,
  .hem81-svc:nth-child(even) .hem81-svc-side {
    order: 0;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--hem-line);
  }
  .hem81-zig-row,
  .hem81-zig-row:nth-child(even) {
    grid-template-columns: 62px minmax(0, 1fr);
    margin: 0;
    border-left: 2px solid var(--hem-line);
    border-right: 0;
  }
  .hem81-zig-row:nth-child(even) .hem81-zig-num { order: 0; text-align: left; }
  .hem81-metric + .hem81-metric { border-left: 0; padding-left: 0; }
  html.dna-contact-info-bar .hem81-contact-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hem81-sticky { display: block; }
  body { padding-bottom: 54px; }
}

@media (max-width: 560px) {
  html.dna-contact-info-bar .hem81-contact-info { grid-template-columns: 1fr; }
  .hem81-dial-chips { grid-template-columns: 1fr; }
  .hem81-dial-field { padding: 10px 13px; }
  .hem81-story-stats { grid-template-columns: 1fr; }
  .hem81-foot-cols { grid-template-columns: 1fr; }
  .hem81-ticker-track { animation-duration: 26s; }
  .hem81-hero-band img { height: 46vh; min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hem81-ticker-track,
  .hem81-hero-band img { animation: none; }
  .js .hem81-reveal,
  .js .hem81-hero-lede,
  .js .hem81-actionbar {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .js .hem81-hero h1 .hem81-wipe > span { animation: none; }
  .js .hem81-wipe > span { transform: none; }
  .hem81-btn:hover,
  .hem81-feature:hover,
  .hem81-chip:hover,
  .hem81-dial-go:not(:disabled):hover,
  .hem81-role:hover { transform: none; }
  .hem81-dial--done { animation: none; }
  .hem81-dial-go.is-armed { animation: none; }
  .hem81-slot.is-set { transform: none; }
  .hem81-sheet { transition: none; }
}