/* ==========================================================================
   Neoform Studio — one stylesheet, no framework.

   Palette (measured against WCAG 2.1):
     Bone   #F4F2ED  page ground
     Ink    #12211B  headings, dark bands   14.9:1 on Bone
     Slate  #4A4F48  body copy               7.5:1 on Bone
     Clay   #A8452A  links, buttons          5.3:1 on Bone / white on Clay 5.9:1
     Sand   #E0A07F  accent inside dark      7.6:1 on Ink

   Order: fonts, tokens, reset, type, layout, components, sections, motion.
   ========================================================================== */

/* --------------------------------------------------------------- 1. FONTS */
/* Latin subsets only, self-hosted. Variable files: one request each covers
   every weight the page uses. swap so text paints in the fallback first. */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-var.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hankengrotesk-latin-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------- 2. TOKENS */
:root {
  --bone: #F4F2ED;
  --bone-lift: #FAF9F6;
  --ink: #12211B;
  --slate: #4A4F48;
  --clay: #A8452A;
  --clay-deep: #8F3821;
  --sand: #E0A07F;
  --sand-lift: #F0C4AB;

  --rule: rgba(18, 33, 27, 0.14);
  --rule-dark: rgba(244, 242, 237, 0.18);

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;

  /* Fluid type. The low end of each clamp is the 320px value. */
  --t-hero: clamp(2.5rem, 1.55rem + 7.4vw, 5.25rem);
  --t-h2: clamp(1.875rem, 1.35rem + 2.6vw, 3rem);
  --t-h3: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.78125rem;
  --t-numeral: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 62ch;
  --pad-section: clamp(3.75rem, 9vw, 7.5rem);
  --gap-card: clamp(1rem, 2.5vw, 1.75rem);
  --radius: 4px;
  --radius-lg: 10px;

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

/* --------------------------------------------------------------- 3. RESET */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Belt and braces against a stray wide child on small screens. Every
     section is built not to need this, but one overflow ruins the page. */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--slate);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* Anchored sections must not land under the sticky header. */
[id] { scroll-margin-top: 5.5rem; }

/* ----------------------------------------------------------- 4. TYPOGRAPHY */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: var(--t-hero);
  /* High optical size = the high-contrast, editorial cut of Fraunces. */
  font-variation-settings: 'opsz' 144;
}
h2 {
  font-size: var(--t-h2);
  font-variation-settings: 'opsz' 96;
}
h3 {
  font-size: var(--t-h3);
  font-family: var(--body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 700; }

a { color: var(--clay); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--clay-deep); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 46ch;
}

/* Small letterspaced kicker with a rule — the editorial signature. */
.label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  font-family: var(--body);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  max-width: none;
}
.label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.band-ink .label { color: var(--sand); }
.band-ink .label::after { background: var(--rule-dark); }

/* -------------------------------------------------------------- 5. LAYOUT */
.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--pad-section); }
.section + .section { border-top: 1px solid var(--rule); }

.band-ink {
  background: var(--ink);
  color: rgba(244, 242, 237, 0.82);
}
.band-ink h2, .band-ink h3, .band-ink h4 { color: var(--bone); }
.band-ink strong { color: var(--bone); }
.band-ink a { color: var(--sand); }
.band-ink a:hover { color: var(--sand-lift); }
.section + .band-ink { border-top: 0; }

.head { max-width: 38ch; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.head p { margin-top: 1rem; max-width: 52ch; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--bone);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 0.75rem; color: var(--bone); }

/* --------------------------------------------------------------- 6. FOCUS */
:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}
.band-ink :focus-visible { outline-color: var(--sand); }

/* ------------------------------------------------------------- 7. BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--clay); color: #FFFFFF; }
.btn-primary:hover { background: var(--clay-deep); color: #FFFFFF; }

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

.band-ink .btn-ghost { color: var(--bone); border-color: var(--rule-dark); }
.band-ink .btn-ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* Text link with a nudging arrow. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: var(--t-small);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-more svg { transition: transform 0.18s var(--ease); }
.link-more:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .link-more:hover svg { transform: none; }
}

/* -------------------------------------------------------------- 8. HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.wordmark svg { height: 1.3rem; width: auto; }
.wordmark:hover { color: var(--clay); }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.nav a {
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--clay); border-bottom-color: var(--clay); }

.header-cta {
  flex: 0 0 auto;
  margin-left: 0.5rem;
  min-height: 2.6rem;
  padding: 0.55rem 1.1rem;
}

/* The toggle only exists below 880px. */
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  padding: 0.55rem 0.8rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle .bars { display: grid; gap: 3px; width: 14px; }
.nav-toggle .bars span { display: block; height: 1.5px; background: currentColor; }

@media (max-width: 879px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    background: var(--bone);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 14px 30px -18px rgba(18, 33, 27, 0.4);
  }
  .nav ul {
    display: block;
    width: 100%;
    max-width: 74rem;
    margin-inline: auto;
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .nav li + li { border-top: 1px solid var(--rule); }
  .nav a {
    display: block;
    padding-block: 0.95rem;
    font-size: 1.0625rem;
    border-bottom: 0;
  }
}
@media (max-width: 420px) {
  .nav-toggle { padding: 0.55rem; }
  .nav-toggle .txt { display: none; }
  .header-cta { padding: 0.55rem 0.85rem; }
}
/* Below 360px the wordmark, the menu button and the quote button cannot all
   fit. The quote button is the one that has to stay, so the wordmark drops
   to its monogram: a square viewport over the same SVG, cropped from xMin
   by preserveAspectRatio="xMinYMid slice". The name is still announced —
   it lives in the link's aria-label, not in the artwork. */
@media (max-width: 359px) {
  .header-inner { gap: 0.6rem; }
  .wordmark svg { width: 1.7rem; height: 1.7rem; }
}

/* ---------------------------------------------------------------- 9. HERO */
.hero { padding-block: clamp(3rem, 8vw, 6rem) var(--pad-section); }
.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}
.hero h1 { margin-bottom: 1.25rem; }
.hero h1 .accent { color: var(--clay); }
.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
}
.hero-note span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-note svg { flex: 0 0 auto; color: var(--clay); }

/* Phone mockups. Frames are CSS; the screens are real screenshots. */
.phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}
.phone {
  flex: 1 1 0;
  max-width: 13.5rem;
  min-width: 0;
  padding: 0.5rem;
  background: var(--ink);
  border-radius: 1.75rem;
  box-shadow: 0 30px 50px -28px rgba(18, 33, 27, 0.55),
              inset 0 0 0 1px rgba(244, 242, 237, 0.1);
}
.phone::before {
  content: '';
  display: block;
  width: 2.75rem;
  height: 0.25rem;
  margin: 0.1rem auto 0.45rem;
  background: rgba(244, 242, 237, 0.25);
  border-radius: 99px;
}
.phone-screen {
  overflow: hidden;
  border-radius: 1.35rem;
  background: var(--bone-lift);
  aspect-ratio: 390 / 620;
}
.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.phone:first-child { transform: translateY(1.5rem) rotate(-1.5deg); }
.phone:last-child { transform: rotate(1.5deg); }
@media (prefers-reduced-motion: reduce) {
  .phone:first-child, .phone:last-child { transform: none; }
}
@media (max-width: 400px) {
  .phone:first-child, .phone:last-child { transform: none; }
  .phones { gap: 0.5rem; }
}

/* ------------------------------------------------------- 10. PROBLEM BAND */
.points {
  display: grid;
  gap: clamp(2rem, 4vw, 2.5rem);
  counter-reset: pt;
}
@media (min-width: 760px) { .points { grid-template-columns: repeat(3, 1fr); } }
.point { border-top: 1px solid var(--rule-dark); padding-top: 1.5rem; }
.point::before {
  counter-increment: pt;
  content: counter(pt, decimal-leading-zero);
  display: block;
  margin-bottom: 0.85rem;
  font-family: var(--display);
  font-size: var(--t-numeral);
  font-variation-settings: 'opsz' 144;
  font-weight: 600;
  line-height: 1;
  color: var(--sand);
}
.point h3 { margin-bottom: 0.6rem; }
.point p { font-size: var(--t-small); }

/* ----------------------------------------------------------- 11. SERVICES */
.cards { display: grid; gap: var(--gap-card); }
@media (min-width: 760px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--bone-lift);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.card h3 { margin-bottom: 0.75rem; }
.card > p { font-size: var(--t-small); }
.card-icon { width: 2rem; height: 2rem; margin-bottom: 1.25rem; color: var(--clay); }
.ticks { margin-top: 1.25rem; display: grid; gap: 0.6rem; font-size: var(--t-small); }
.ticks li { display: flex; gap: 0.6rem; align-items: flex-start; }
.ticks svg { flex: 0 0 auto; margin-top: 0.35em; color: var(--clay); }

/* ------------------------------------------------------------ 12. PRICING */
.prices { display: grid; gap: var(--gap-card); align-items: stretch; }
@media (min-width: 880px) { .prices { grid-template-columns: repeat(3, 1fr); } }
.price {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--bone-lift);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.price h3 { font-size: 1.125rem; letter-spacing: 0.01em; }
.price .amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0 0.35rem;
  font-family: var(--display);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  font-variation-settings: 'opsz' 144;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.price .amount .once {
  font-family: var(--body);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--slate);
  letter-spacing: 0;
}
.price > p { font-size: var(--t-small); }
.price .ticks { flex: 1 1 auto; align-content: start; }
.price .btn { margin-top: 1.75rem; width: 100%; }

/* Featured card: the whole thing inverts. */
.price-featured {
  background: var(--ink);
  border-color: var(--ink);
  color: rgba(244, 242, 237, 0.82);
}
.price-featured h3, .price-featured .amount { color: var(--bone); }
.price-featured .amount .once { color: var(--sand); }
.price-featured .ticks svg { color: var(--sand); }
.price-featured .btn { background: var(--sand); color: var(--ink); }
.price-featured .btn:hover { background: var(--sand-lift); color: var(--ink); }
.price-featured .save {
  margin-top: 0.9rem;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--sand);
}
.badge {
  position: absolute;
  top: 0;
  right: clamp(1.5rem, 3vw, 2rem);
  transform: translateY(-50%);
  padding: 0.35rem 0.75rem;
  background: var(--clay);
  color: #FFFFFF;
  border-radius: 99px;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.price-more {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-lead);
  color: var(--ink);
  font-weight: 600;
  max-width: none;
}
.fineprint { margin-top: 1rem; font-size: var(--t-small); max-width: 68ch; }

/* ------------------------------------------------------------ 13. PROCESS */
.steps { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); counter-reset: st; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.step::before {
  counter-increment: st;
  content: counter(st);
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--display);
  font-size: var(--t-numeral);
  font-variation-settings: 'opsz' 144;
  font-weight: 600;
  line-height: 1;
  color: var(--clay);
}
.step h3 { margin-bottom: 0.5rem; }
.step p { font-size: var(--t-small); }

/* ------------------------------------------------------------- 14. WHY US */
.why { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 760px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why > div { padding-left: 1.25rem; border-left: 2px solid var(--clay); }
.why h3 { margin-bottom: 0.6rem; }
.why p { font-size: var(--t-small); }

/* --------------------------------------------------------------- 15. WORK */
.work-grid { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 720px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
.work-card {
  display: flex;
  flex-direction: column;
  background: var(--bone-lift);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.work-card:hover { border-color: var(--ink); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .work-card:hover { transform: none; } }
.work-shot {
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
  aspect-ratio: 1440 / 900;
  overflow: hidden;
}
.work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.work-kind {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}
.work-body h3 a { color: var(--ink); text-decoration: none; }
.work-body h3 a:hover { color: var(--clay); }
.work-body p { font-size: var(--t-small); }
.work-body .link-more { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------- 16. FAQ */
.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 0;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.35em;
  background: currentColor;
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
.faq .answer { padding-bottom: 1.4rem; }
.faq .answer p { font-size: var(--t-small); max-width: 60ch; }

/* ------------------------------------------------------------ 17. CONTACT */
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-size: var(--t-small); font-weight: 700; color: var(--bone); }
.field .opt { font-weight: 400; color: rgba(244, 242, 237, 0.68); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  background: var(--bone-lift);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.45;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2312211B' d='M6 8 0 2l1.4-1.4L6 5.2l4.6-4.6L12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--sand); }
.field-row { display: grid; gap: 1.1rem; margin-bottom: 1.1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field-row .field { margin-bottom: 0; }
.form-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-note { font-size: var(--t-small); margin: 0; max-width: 34ch; }

/* Honeypot: off-screen rather than display:none, so bots still fill it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  background: rgba(224, 160, 127, 0.14);
  color: var(--bone);
  font-size: var(--t-small);
}
.form-status p { max-width: none; }
.form-status a { color: var(--sand); font-weight: 700; }

.contact-direct { display: grid; gap: 1.5rem; align-content: start; }
.contact-direct .row { padding-top: 1.25rem; border-top: 1px solid var(--rule-dark); }
.contact-direct .k {
  margin-bottom: 0.5rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
}
.contact-direct .v {
  font-family: var(--display);
  font-variation-settings: 'opsz' 96;
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.contact-direct .v a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--sand); }
.contact-direct .v a:hover { color: var(--sand); }
.contact-direct .sub { margin-top: 0.5rem; font-size: var(--t-small); }

/* ------------------------------------------------------------- 18. FOOTER */
.site-footer {
  background: var(--ink);
  color: rgba(244, 242, 237, 0.7);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule-dark);
  font-size: var(--t-small);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 3rem;
  align-items: flex-start;
  justify-content: space-between;
}
.site-footer .wordmark { color: var(--bone); }
.site-footer .wordmark:hover { color: var(--sand); }
.footer-place { margin-top: 0.6rem; }
.footer-links { display: grid; gap: 0.5rem; }
.footer-links a { color: var(--bone); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-links a:hover { color: var(--sand); border-bottom-color: var(--sand); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
  max-width: none;
}

/* ---------------------------------------------------- 19. WORK PAGE / 404 */
.page-head { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 5vw, 3rem); }
.page-head .lead { margin-top: 1.25rem; }

.case { padding-block: var(--pad-section); border-top: 1px solid var(--rule); }
.case-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .case-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.case-meta { display: grid; gap: 1.5rem; align-content: start; }
.case-meta dl { margin: 0; display: grid; gap: 1.5rem; }
.case-meta dt {
  margin-bottom: 0.4rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}
.case-meta dd { margin: 0; font-size: var(--t-small); }
.case-live { font-size: var(--t-small); overflow-wrap: break-word; }
.case-shots { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.case-shot {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
}
.case-shot img { width: 100%; height: auto; }
.case-shot-mobile { max-width: 17rem; }

.err { padding-block: clamp(4rem, 12vw, 9rem); }
.err .code {
  margin-bottom: 1rem;
  font-family: var(--display);
  font-variation-settings: 'opsz' 144;
  font-size: clamp(4rem, 3rem + 8vw, 8rem);
  font-weight: 600;
  line-height: 0.9;
  color: var(--clay);
}

/* ------------------------------------------------------------- 20. MOTION */
/* Hidden only when JS is running, so the page is complete without it. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------- 21. PRINT */
@media print {
  .site-header, .nav-toggle, .btn-row, #contact form { display: none; }
  body { background: #FFFFFF; color: #000000; }
  .band-ink, .site-footer { background: #FFFFFF; color: #000000; }
  .band-ink h2, .band-ink h3, .site-footer .wordmark { color: #000000; }
}