/* ============================================================
   FIELDMARK — Site Stylesheet
   PCM mockup, May 2026
   ============================================================ */

/* ---------- 1. Reset & tokens ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

:root {
  /* Palette — sampled from D/C brochure */
  --cream:       #F2E9CC;
  --green:       #076324;
  --green-deep:  #054C1C;
  --bone:        #FAF6EB;
  --parchment:   #F5EFE0;
  --wool:        #EBE2D1;
  --sand:        #B8956A;
  --sand-deep:   #856744;
  --slate:       #2D2D2D;
  --ink:         #1A1A1A;
  --earth:       #3C2E20;
  --terracotta:  #A74F1B;
  --terra-soft:  #D88550;
  --hairline:    rgba(60, 46, 32, 0.18);
  --hairline-cream: rgba(242, 232, 208, 0.28);

  /* Type */
  --display: "larken", Georgia, serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:   "larken", Georgia, serif;

  /* uppercase tracking — three tiers, one job each */
  --track-display: 0.34em;   /* hero tagline, scroll cue, footer tag */
  --track-label:   0.22em;   /* eyebrows, section labels, buttons */
  --track-ui:      0.18em;   /* nav, data labels, table headers */

  /* Rhythm */
  --max:      1400px;
  --gutter:   clamp(1.5rem, 4vw, 3.5rem);
  --section:  clamp(5rem, 10vw, 9rem);
}

/* ---------- 2. Base typography ---------- */
body {
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bone);
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: inherit;
}
h1 { font-size: clamp(3rem, 7vw, 6rem); }
h2 { font-size: clamp(2.25rem, 5vw, 4rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
h4 { font-size: 1.15rem; font-family: var(--body); font-weight: 600; letter-spacing: 0.02em; }

p { max-width: 64ch; }
p + p { margin-top: 1em; }

.eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 1.25rem;
  display: inline-block;
}
.eyebrow--muted { color: var(--green); }
.eyebrow--cream { color: var(--cream); opacity: 0.78; }

.lead {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--earth);
  max-width: 56ch;
}

/* ---------- 3. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--flush { padding-block: 0; }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; align-items: center; }
  .split--asym { grid-template-columns: 5fr 7fr; }
}

/* ---------- 4. Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  background: rgba(242,233,204,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(26,26,26,0.08);
  transition: background .3s;
}
.nav__brand {
  font-family: var(--display);
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  font-style: italic;
}
.nav__menu {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  list-style: none;
  font-size: 0.78rem;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  font-weight: 500;
}
.nav__menu a { transition: opacity 0.2s; }
.nav__menu a:hover { opacity: 0.6; }
/* The links were 16px tall — the text box and nothing more — which is well
   under a usable touch target. Padding expands the hit area and the equal
   negative margin cancels it again, so the nav looks exactly as before. */
.nav__menu a,
.nav__brand {
  display: inline-block;
  padding-block: 0.85rem;
  margin-block: -0.85rem;
}

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--cream);
  background: #3a3025;
  overflow: hidden;
}
/* Hero photo is a real <img> (indexable, alt text) rather than a CSS
   background. The two gradient washes that used to sit in `background`
   now live on ::before so they still paint ABOVE the photo. */
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(60,46,32,0.35) 0%, rgba(60,46,32,0.15) 30%, rgba(60,46,32,0.15) 70%, rgba(20,15,10,0.65) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 50% at center, rgba(30,20,12,0.45) 0%, rgba(30,20,12,0.15) 50%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-inline: var(--gutter);
  max-width: 1000px;
}
.hero__wordmark {
  font-family: var(--display);
  font-size: clamp(4.5rem, 14vw, 11rem);
  font-style: italic;
  font-weight: 300;
  color: var(--cream);
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.hero__tagline {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  font-family: var(--body);
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: rgba(242, 232, 208, 0.95);
  text-shadow: 0 1px 6px rgba(20,15,10,0.5);
}
.hero__statement {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.hero__scroll {
  position: absolute;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: rgba(242, 232, 208, 0.7);
  z-index: 2;
}
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(242,232,208,0.7), transparent);
  margin: 0.8rem auto 0;
}

/* ---------- 6. Intro / manifesto ---------- */
.intro { background: var(--bone); color: var(--earth); }
.intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .intro__grid { grid-template-columns: 5fr 7fr; }
}
.intro__media {
  aspect-ratio: 3 / 4;
  background: var(--flax);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(60,46,32,0.45);
}
.intro__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(20,15,10,0.15) 100%);
}
.intro__head { font-size: clamp(2.25rem, 4.5vw, 3.5rem); margin-bottom: 2.5rem; }
.intro__body { font-size: 1.05rem; line-height: 1.7; color: var(--earth); }

/* ---------- 7. Pillars (Our Legacy of Care) ---------- */
.pillars {
  position: relative;
  background: #1e160f;
  color: var(--cream);
  text-align: center;
  overflow: hidden;
}
/* Pasture is a real <img> (indexable, alt text). The dark wash that used
   to ride in the background shorthand now sits on ::before, above the
   photo and below the content. (The old `fixed` parallax attachment is
   dropped - it was already disabled on iOS/Android.) */
.pillars__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.pillars::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(30,22,15,0.62);
  z-index: 1;
  pointer-events: none;
}
.pillars > .wrap { position: relative; z-index: 2; }
.pillars__head { margin-bottom: 2rem; }
.pillars__copy {
  margin: 0 auto 4rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.55;
  color: rgba(242, 232, 208, 0.92);
  max-width: 56ch;
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.pillar__ring {
  width: 110px; height: 110px;
  border: 1px solid rgba(242, 232, 208, 0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  text-align: center;
  padding: 0 1rem;
  line-height: 1.3;
  transition: background 0.4s, border-color 0.4s;
}
.pillar:hover .pillar__ring { background: rgba(242,232,208,0.08); border-color: rgba(242,232,208,0.85); }
@media (max-width: 760px) {
  .pillars__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

/* ---------- 8. Material science ---------- */
.material {
  background: var(--green);
  color: var(--cream);
}
.material__head {
  text-align: center;
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin-bottom: 1.5rem;
  color: var(--ink);
}
.material__copy {
  text-align: center;
  margin: 0 auto 4rem;
  max-width: 62ch;
  font-size: 1.05rem;
  color: var(--earth);
}
.material__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.5rem 1.5rem;
  max-width: 1150px;
  margin: 0 auto;
}
@media (max-width: 900px) { .material__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .material__grid { grid-template-columns: repeat(2, 1fr); } }
.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.benefit__icon {
  width: 64px; height: 64px;
  color: var(--earth);
  opacity: 0.85;
}
.benefit__label {
  font-size: 0.72rem;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--earth);
  font-weight: 500;
}

/* ---------- 9. Enduring quality (3-col) ---------- */
.quality {
  background: var(--slate);
  color: var(--cream);
}
.quality__head {
  text-align: center;
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin-bottom: 4rem;
  color: var(--cream);
}
.quality__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 800px) { .quality__grid { grid-template-columns: 1fr; gap: 3rem; } }
.q-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* The section's eyebrow and headline are centred, and the two sibling
     sections that use the same header-over-grid pattern — .material and
     .pillars — centre their items too. This was the only grid left
     ragging left under a centred headline. */
  text-align: center;
  /* NB: no align-items:center here. .q-card__media is a background-image
     div with no intrinsic width, so centring the flex items collapses it
     to 0x0 and the circles vanish. text-align does the job on its own. */
}
.q-card__copy { margin-inline: auto; }
.q-card__media {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background-color: #3a3025;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.q-card:hover .q-card__media { transform: scale(1.02); }
/* Card photos are <img> elements (indexable, alt text); the wrapper keeps
   the circle mask and the hover scale. */
.q-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.q-card__title { font-size: 1.35rem; font-family: var(--display); }
.q-card__copy { color: rgba(242,232,208,0.78); font-size: 0.96rem; line-height: 1.65; }

/* ---------- 10. Bespoke teaser ---------- */
.bespoke {
  background: var(--parchment);
  color: var(--earth);
}
.bespoke__head {
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin-bottom: 2rem;
  max-width: 22ch;
}
.bespoke__copy { font-size: 1.1rem; color: var(--earth); margin-bottom: 2.5rem; }
.bespoke__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terracotta);
  border-bottom: 1px solid var(--terracotta);
  padding-bottom: 0.4rem;
  transition: gap 0.3s;
}
.bespoke__cta:hover { gap: 1.4rem; }
.bespoke__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bespoke__visual {
  aspect-ratio: 4 / 3;
  background: var(--flax);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(60,46,32,0.4);
}

/* ---------- 11. CTA / footer ---------- */
.cta {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  padding-block: calc(var(--section) * 1.2);
}
.cta__head {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  margin-bottom: 1.5rem;
  font-style: italic;
  font-weight: 300;
}
.cta__sub {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: rgba(242,232,208,0.7);
  /* the global `p { max-width: 64ch }` caps this box well short of the
     section width; without auto margins the box sits left and only its
     text centres inside it, which reads as off-centre. */
  margin-inline: auto;
  margin-bottom: 3rem;
}
.btn {
  display: inline-block;
  padding: 1.1rem 2.5rem;
  font-size: 0.75rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--cream);
  color: var(--cream);
  transition: background 0.3s, color 0.3s;
}
.btn:hover { background: var(--cream); color: var(--ink); }
.btn--terra { background: var(--terracotta); border-color: var(--terracotta); }
.btn--terra:hover { background: transparent; color: var(--terracotta); }

.footer {
  background: var(--ink);
  color: rgba(242,232,208,0.6);
  padding: 3rem var(--gutter) 2rem;
  border-top: 1px solid rgba(242,232,208,0.12);
}
.footer__grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
/* Two columns plus a 3rem gap still overrun a 390px phone by ~9px, which
   pushed the whole page sideways. Below 560px go single-column and pull
   the gap in. */
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
}
.footer__brand {
  font-family: var(--display);
  font-style: italic;
  font-size: 2rem;
  color: var(--cream);
  margin-bottom: 1rem;
}
.footer__tag {
  font-size: 0.7rem;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: rgba(242,232,208,0.45);
}
.footer__col h5 {
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 1.25rem;
  font-weight: 500;
  font-family: var(--body);
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 0.6rem; font-size: 0.92rem; }
.footer__col a:hover { color: var(--cream); }
.footer__woven {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  font-size: 0.7rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--cream);
  border: 1px solid rgba(242,232,208,0.4);
  padding: 0.5rem 1rem;
  border-radius: 999px;
}
.footer__legal {
  max-width: var(--max);
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(242,232,208,0.1);
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(242,232,208,0.4);
}
@media (max-width: 600px) { .footer__legal { flex-direction: column; gap: 0.5rem; } }

/* ---------- 12. Interior page chrome ---------- */
.page-hero {
  padding: calc(var(--section) + 4rem) var(--gutter) var(--section);
  background: var(--parchment);
  color: var(--earth);
  text-align: center;
}
.page-hero h1 { font-size: clamp(3rem, 6vw, 5rem); max-width: 18ch; margin: 0 auto 1.5rem; }
.page-hero .lead { margin: 0 auto; }

/* ---- real vector logotype (replaces the text wordmarks) ---- */
.nav__brand--svg{width:150px;display:block;line-height:0}
.nav__brand--svg svg{width:100%;height:auto}
.hero__wordmark--svg{width:min(430px,62vw);margin:0 auto;line-height:0}
.hero__wordmark--svg svg{width:100%;height:auto}
.footer__brand--svg{width:160px;line-height:0}
.footer__brand--svg svg{width:100%;height:auto}

/* nav sits on a surface now, so the positive logo is correct everywhere */
.nav__brand--svg{mix-blend-mode:normal;isolation:isolate}
.nav__menu a{color:var(--ink)}
.nav__menu a:hover{color:var(--green);opacity:1}

/* ---- .material is a dark green section: everything inside it reverses ---- */
.material .eyebrow,
.material .eyebrow--muted,
.material__head,
.material .benefit__icon,
.material .benefit__label { color: var(--cream); }
.material__copy { color: var(--cream); opacity: 0.88; }
.material .benefit__icon { opacity: 0.9; }

/* ============ v2: dark split panel ============ */
.splitpanel{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.splitpanel__text{
  background: var(--ink); color: var(--cream);
  padding: clamp(3rem,6vw,6rem) clamp(2rem,4vw,4.5rem);
  display:flex; flex-direction:column; justify-content:center;
}
.splitpanel__media{
  min-height: 34rem;
  background: var(--flax) center / cover no-repeat;
}
.splitpanel__head{
  font-family: var(--display);
  font-size: clamp(2rem,3.4vw,2.9rem);
  line-height:1.1; margin: .6rem 0 2.2rem; color: var(--cream);
}
.chain{ display:grid; gap:0; margin-bottom:2.4rem; }
.chain__step{
  display:grid; grid-template-columns:2.4rem 1fr; gap:1.2rem;
  padding:1.05rem 0; border-top:1px solid rgba(242,233,204,.22);
}
.chain__step:last-child{ border-bottom:1px solid rgba(242,233,204,.22); }
.chain__n{
  font-family: var(--display); font-size:1.15rem;
  color: #A8843A; line-height:1.2;
}
.chain__where{
  font-family: var(--body); font-size:.66rem;
  letter-spacing: var(--track-ui); text-transform:uppercase;
  color: rgba(242,233,204,.62); display:block; margin-bottom:.18rem;
}
.chain__what{ font-size:.95rem; color: var(--cream); line-height:1.5; }
@media (max-width: 900px){
  .splitpanel{ grid-template-columns:1fr; }
  /* 20rem turned this into a letterbox that cropped the subject's head
     once the panel carried a photograph rather than a flat pattern. */
  .splitpanel__media{ min-height:26rem; order:-1; }
}

/* ============ v2: underlined text links replace buttons ============ */
.link{
  display:inline-block; font-family: var(--body); font-size:.72rem; font-weight:500;
  letter-spacing: var(--track-label); text-transform:uppercase;
  color: inherit; text-decoration:none;
  padding-bottom:.42rem; border-bottom:1px solid currentColor;
  transition: opacity .25s ease;
}
.link:hover{ opacity:.62; }
.link:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }
.splitpanel__text .link{ align-self: flex-start; }
/* 40% rather than centre: the subject sits in the upper half, so biasing
   the crop upward keeps the head in frame when the panel is short and
   wide. background-color is the ground that shows if the image fails. */
.splitpanel__media--field{ position: relative; overflow: hidden; background-color: var(--ink); }
.splitpanel__media--field img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; }

/* technical figures set in the mono companion */
.construction__width, .specs td, .specs th, .swatch__pile, .chain__where{
  font-family: var(--mono);
}
.specs td{ font-variant-numeric: tabular-nums; }

/* ---- Instrument Serif: display-cut corrections ---- */
h1,h2,h3,.hero__wordmark,.intro__head,.quality__head,.material__head,
.cta__head,.splitpanel__head,.construction__name{
  letter-spacing: normal;      /* editorial display carries no tracking */
  line-height: 1.06;
  font-weight: 300;            /* Larken light — Huckberry's display weight */
}
h3,.q-card__title{ line-height: 1.18; }
/* the face is light by nature — nudge optical size so it does not go frail */
.intro__head,.quality__head,.material__head,.cta__head,.splitpanel__head,.footing__head{
  font-size: clamp(2.15rem, 4.6vw, 3.6rem);
}

/* ============== FARM FOOTING PROGRAMME ==============
   Light ground, deliberately. It breaks the long dark run between the
   chain and the pillars, and it lets the programme read as the formal
   framework it is rather than more of the narrative. All rules scoped
   to .footing — nothing here touches a shared class. */
.footing { background: var(--parchment); color: var(--earth); }
.footing__head { margin-bottom: 1.4rem; }
.footing__lead {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  max-width: 46ch;
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
}
.footing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 3.6vw, 3.4rem);
  margin-bottom: clamp(2.8rem, 5vw, 4.2rem);
}
@media (max-width: 800px) { .footing__grid { grid-template-columns: 1fr; gap: 2.4rem; } }

.criterion { border-top: 1px solid var(--green); padding-top: 1.15rem; }
.criterion__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: var(--track-ui);
  color: var(--green);
  margin-bottom: 0.85rem;
}
.criterion__name {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  line-height: 1.14;
  margin: 0 0 0.65rem;
}
.criterion__body { font-size: 0.94rem; line-height: 1.58; color: var(--sand-deep); }

/* the honest-status note. Bordered and set apart so it reads as a
   statement of record, not as reassurance copy. */
.footing__status {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--green);
  background: var(--bone);
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 2.3rem);
  max-width: 62ch;
}
/* two classes deep so it outranks `.footing__status p` below —
   the label is a <p>, and the element selector would otherwise win */
.footing__status .footing__status-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 0.7rem;
}
.footing__status p { font-size: 0.95rem; line-height: 1.62; margin: 0; }
.footing__status p + p { margin-top: 0.8rem; }


/* converted content images -----------------------------------------
   These were CSS backgrounds; they are now real <img> so search and
   assistive tech can see them. object-fit reproduces `background-size:
   cover` exactly, so nothing shifts visually. */
.swatch__chip img,
.gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============== ENQUIRY FORM ==============
   Sits inside .cta, so it inherits the ink ground and cream text. Fields
   are underline-only rather than boxed — boxes would read as a utility
   form dropped into an editorial page. */
.enquiry {
  max-width: 46rem;
  margin: 0 auto;
  text-align: left;
}
.enquiry__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
}
@media (max-width: 620px) { .enquiry__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; margin-bottom: 1.35rem; }
.field label {
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: rgba(242,232,208,0.66);
  margin-bottom: 0.55rem;
}
.field .opt {
  letter-spacing: 0.08em;
  text-transform: none;
  font-weight: 400;
  opacity: 0.65;
}
.field input,
.field textarea {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--cream);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(242,232,208,0.28);
  padding: 0.55rem 0;
  border-radius: 0;                 /* iOS rounds inputs by default */
  -webkit-appearance: none;
  transition: border-color 0.25s ease;
}
.field textarea { resize: vertical; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(242,232,208,0.34); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--cream);
}
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid rgba(242,232,208,0.5); outline-offset: 4px; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-bottom-color: var(--terra-soft); }

/* honeypot — off-screen rather than display:none, which some bots detect */
.enquiry__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.enquiry__submit {
  margin-top: 1.4rem;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(242,232,208,0.45);
  padding: 1rem 2.25rem;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.enquiry__submit:hover:not(:disabled) {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.enquiry__submit:disabled { opacity: 0.45; cursor: not-allowed; }

.enquiry__status {
  margin-top: 1.1rem;
  font-size: 0.92rem;
  min-height: 1.4em;                /* reserve the line so nothing jumps */
  color: rgba(242,232,208,0.8);
}
.enquiry__status[data-state="error"] { color: var(--terra-soft); }
.enquiry__status[data-state="ok"]    { color: var(--cream); }

.enquiry__fallback {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: rgba(242,232,208,0.55);
}
.enquiry__fallback a { border-bottom: 1px solid rgba(242,232,208,0.35); }

/* once submitted, the form is replaced by the confirmation */
.enquiry--sent .enquiry__row,
.enquiry--sent .field,
.enquiry--sent .enquiry__submit { display: none; }

/* ============== SWATCH ZOOM (28 Aug 2026 request) ==============
   Hover magnifies the chip in place; click/Enter opens the swatch at 2x
   in an overlay. Overlay carries the image only - no claim copy. */
.swatch__chip, .gallery__tile { cursor: zoom-in; overflow: hidden; }
.swatch__chip img, .gallery__tile img { transition: transform 0.45s ease; transform-origin: center; }
.swatch__chip:hover img, .swatch__chip:focus-visible img,
.gallery__tile:hover img, .gallery__tile:focus-visible img { transform: scale(1.6); }
.swatch__chip:focus-visible, .gallery__tile:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.zoom {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(20,15,10,0.88); cursor: zoom-out;
  padding: 2rem;
}
.zoom.is-open { display: flex; }
.zoom__img { max-width: 90vw; max-height: 90vh; height: auto; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.6); cursor: default; }
.zoom__close {
  position: absolute; top: 1rem; right: 1.25rem;
  background: none; border: 0; color: var(--cream); font-size: 2.4rem; line-height: 1; cursor: pointer;
}