/* =========================================================
   Marnti — Caring for Country
   Shared stylesheet for all pages
   ========================================================= */

/* Self-hosted variable fonts. Both are Latin-only subsets pulled from
   Google's static CDN once, then served from the same origin to avoid
   the Google Fonts CSS roundtrip on first paint. font-display:swap
   keeps content visible while the font loads. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces.woff2') format('woff2-variations'),
       url('/assets/fonts/fraunces.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/manrope.woff2') format('woff2-variations'),
       url('/assets/fonts/manrope.woff2') format('woff2');
}
/* Caveat: hand-printed brush font used only for the Marnti wordmark,
   to match the casual style of Glenn's hand-drawn logo. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/caveat.woff2') format('woff2-variations'),
       url('/assets/fonts/caveat.woff2') format('woff2');
}

:root {
  --cream: #f5e8d3;
  --sand: #ecd2a3;
  --ochre-light: #d99e5a;
  --ochre: #c47830;
  --ochre-deep: #9c5a1f;
  --earth: #6e3d14;
  --soil: #3d2410;
  --char: #1f1a14;
  --bone: #faf5ec;
  --sun: #e8b340;
  --grey: #6b6359;
  --grey-soft: #d8d0c2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Match the hero gradient's top stop so iOS Safari's elastic-bounce
     overscroll at the top of the page reveals the same cream as the
     hero's first colour stop, not the lighter --bone. Stops the visible
     "reset" Glenn was seeing on iPhone before the first proper scroll. */
  background-color: var(--cream);
}
body {
  font-family: 'Manrope', sans-serif;
  background: var(--bone);
  color: var(--char);
  line-height: 1.6;
  overflow-x: hidden;
  /* Belt-and-braces: only allow the page itself to bounce-overscroll, not
     individual scrollable children. Avoids cases where an inner element
     in iOS Safari "rubber bands" against the hero gradient. */
  overscroll-behavior-y: none;
}

img, svg { max-width: 100%; }
a { color: inherit; }

/* =========================================================
   NAV
   ========================================================= */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.25rem 3rem;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(250, 245, 236, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(31, 26, 20, 0.06);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.nav-logo {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--char);
  z-index: 102;
}
.nav-logo svg { width: 42px; height: 42px; }
.nav-logo .brand {
  /* Hand-printed wordmark to match Glenn's drawn logo. The Caveat brush
     reads visually smaller than a serif, so the size is bumped from
     1.6rem to 2rem to land at the same optical weight. */
  font-family: 'Caveat', 'Fraunces', cursive, serif;
  font-size: 2rem; font-weight: 700; line-height: 1;
  letter-spacing: 0.005em;
}

.nav-links { display: flex; gap: 2.5rem; align-items: center; }
.nav-links a {
  text-decoration: none; color: var(--soil);
  font-size: 0.92rem; font-weight: 500;
  position: relative; transition: color 0.2s;
}
.nav-links a:hover { color: var(--ochre-deep); }
.nav-links a::after {
  content: ''; position: absolute; bottom: -6px; left: 0;
  width: 0; height: 1.5px; background: var(--ochre);
  transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--ochre-deep); }
.nav-links a.active:not(.nav-cta)::after { width: 100%; }

.nav-links .nav-cta {
  /* Dark text on ochre gives WCAG AA contrast (~7:1). Previously bone
     on ochre was ~3.1:1 which failed Lighthouse contrast checks. */
  background: var(--ochre); color: var(--char);
  padding: 0.8rem 1.6rem; border-radius: 100px;
  font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.25s ease,
              box-shadow 0.3s ease,
              letter-spacing 0.3s ease,
              color 0.25s ease;
  box-shadow: 0 8px 20px -8px rgba(196, 120, 48, 0.5),
              inset 0 0 0 1px rgba(31, 26, 20, 0.04);
  display: inline-flex; align-items: center; gap: 0.4rem;
  transform-origin: center right;
  will-change: transform;
}
.nav-links .nav-cta:hover {
  background: var(--ochre-deep); color: var(--bone);
  transform: scale(1.18) translateY(-2px);
  letter-spacing: 0.04em;
  box-shadow: 0 22px 45px -12px rgba(156, 90, 31, 0.7),
              0 0 0 6px rgba(196, 120, 48, 0.12);
}
.nav-links .nav-cta:hover span { transform: translateX(3px); }
.nav-links .nav-cta span { transition: transform 0.3s ease; display: inline-block; }
.nav-links .nav-cta::after,
.nav-links .nav-cta:hover::after { display: none !important; content: none !important; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none; border: none;
  width: 36px; height: 30px;
  position: relative; cursor: pointer; padding: 0;
  z-index: 102;
}
.nav-toggle span {
  display: block; position: absolute; left: 4px;
  width: 28px; height: 2px;
  background: var(--soil); border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.25s ease, top 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 8px; }
.nav-toggle span:nth-child(2) { top: 14px; }
.nav-toggle span:nth-child(3) { top: 20px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 14px; transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 14px; transform: rotate(-45deg);
}

.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(31, 26, 20, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 99;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* =========================================================
   HOME HERO (full bleed)
   ========================================================= */
.hero {
  /* Hero is intentionally short of full viewport so the about section
     peeks above the fold and the page feels less scroll-heavy. Stats
     strip was removed from inside the hero (info duplicated elsewhere
     on the site) which let us drop another ~170px of vertical space. */
  min-height: 65vh; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6rem 3rem 3rem;
  background: linear-gradient(180deg,
    var(--cream) 0%, var(--sand) 28%,
    var(--ochre-light) 52%, var(--ochre) 72%, var(--ochre-deep) 100%);
  /* Oversized vertical scale + animated background-position creates a slow
     drift without re-rendering the gradient stops (cheaper than animating
     the gradient itself). */
  background-size: 100% 115%;
  background-position: 0% 0%;
  animation: heroBreathe 25s ease-in-out infinite alternate;
  overflow: hidden;
}
@keyframes heroBreathe {
  from { background-position: 0% 0%; }
  to   { background-position: 0% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; background-position: 0% 0%; }
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(110,61,20,0.12) 0%, transparent 50%);
  pointer-events: none; z-index: 1;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5; mix-blend-mode: multiply; pointer-events: none; z-index: 1;
}

/* Dust particle canvas. Sits between the watermark logo (z:1) and the
   foreground hero text (z:3) so particles drift over the gradient and
   logo but never compete with the headline. */
.hero-dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-logo-bg {
  /* Wider lockup (glyph + "Marnti" wordmark) means a 520:160 aspect
     ratio rather than the old 200:160. Width bumped to keep the
     overall visual weight similar to the previous standalone glyph,
     and right offset pulled back to 1% so the wordmark sits fully
     on-page rather than spilling off the right edge. */
  position: absolute; top: 50%; right: 1%;
  /* --parallax-y is updated by js/main.js on scroll for a slow vertical
     drift behind foreground content. translate3d() forces the GPU
     compositor and avoids layout thrash. */
  --parallax-y: 0px;
  transform: translate3d(0, calc(-50% + var(--parallax-y)), 0);
  width: 72%; max-width: 920px;
  color: var(--bone);
  z-index: 1; pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 20px 60px rgba(110, 61, 20, 0.3));
  will-change: transform;
}
.hero-logo-bg svg { width: 100%; height: auto; }

.hero-content {
  position: relative; z-index: 3;
  max-width: 1400px; width: 100%; margin: 0 auto;
  flex: 1; display: flex; align-items: center;
  padding-bottom: 2rem;
}
.hero-text { position: relative; z-index: 3; max-width: 640px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--soil); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--soil);
}
.hero h1 {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.95; color: var(--soil);
  letter-spacing: -0.04em;
}
.hero h1 em { font-style: italic; font-weight: 400; color: var(--char); }
.hero-tagline {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  color: var(--soil); margin-top: 1rem;
  font-style: italic; font-weight: 300;
  max-width: 520px; line-height: 1.4;
}
.hero-desc {
  color: var(--soil); font-size: 1rem; line-height: 1.65;
  margin-top: 1.25rem; max-width: 540px; opacity: 0.88;
}
/* The about preview directly below the hero opens with the same
   ownership/scope messaging, so the hero description only needs the
   first sentence on every viewport. The longer wording stays in the
   markup (good for search engines and accessibility) but is visually
   hidden. */
.hero-desc-extra { display: none; }

.hero-ctas {
  display: flex; gap: 1rem; margin-top: 1.75rem; flex-wrap: wrap;
}
.hero-cta {
  padding: 1rem 2rem; border-radius: 100px;
  font-size: 0.95rem; font-weight: 600;
  text-decoration: none; transition: all 0.25s ease;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.hero-cta.primary {
  background: var(--bone); color: var(--char);
  box-shadow: 0 12px 30px -10px rgba(31, 26, 20, 0.35),
              inset 0 0 0 1px rgba(31, 26, 20, 0.06);
}
.hero-cta.primary:hover {
  background: #ffffff; transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(31, 26, 20, 0.45);
}
.hero-cta.secondary {
  background: var(--char); color: var(--bone);
  box-shadow: 0 6px 20px -8px rgba(31, 26, 20, 0.4);
}
.hero-cta.secondary:hover {
  background: var(--soil); transform: translateY(-2px);
}

.hero-stats {
  position: relative; z-index: 3;
  max-width: 1400px; width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(31, 26, 20, 0.18);
  padding: 1.5rem 0;
}
.stat { padding: 0 1rem; border-right: 1px solid rgba(31, 26, 20, 0.12); }
.stat:last-child { border-right: none; }
.stat-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400; color: var(--char);
  line-height: 1; letter-spacing: -0.02em;
}
.stat-label {
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--soil); margin-top: 0.6rem;
}

.hero-scroll {
  position: absolute; bottom: 2.5rem; right: 3rem;
  color: var(--soil); font-size: 0.72rem;
  letter-spacing: 0.25em; text-transform: uppercase;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  writing-mode: vertical-rl;
}
.hero-scroll .line {
  width: 1px; height: 32px; background: var(--soil);
  animation: pulseLine 2.4s ease-in-out infinite;
}
@keyframes pulseLine {
  0%, 100% { transform: scaleY(1); opacity: 0.4; }
  50%      { transform: scaleY(1.3); opacity: 1; }
}

/* =========================================================
   PAGE HERO (inner pages)
   ========================================================= */
.page-hero {
  position: relative; overflow: hidden;
  padding: 9rem 3rem 5rem;
  min-height: 45vh;
  background: linear-gradient(180deg,
    var(--cream) 0%, var(--sand) 50%, var(--ochre-light) 100%);
  display: flex; align-items: center;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(110,61,20,0.1) 0%, transparent 50%);
  pointer-events: none; z-index: 1;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0.15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.45; mix-blend-mode: multiply; pointer-events: none; z-index: 1;
}
.page-hero-inner {
  position: relative; z-index: 2;
  max-width: 1280px; width: 100%; margin: 0 auto;
}
.page-hero h1 {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1; color: var(--soil);
  letter-spacing: -0.03em;
  margin-top: 1.2rem;
  max-width: 900px;
}
.page-hero h1 em { font-style: italic; color: var(--ochre-deep); }
.page-hero .page-lead {
  margin-top: 1.5rem; font-size: 1.15rem; line-height: 1.7;
  color: var(--soil); max-width: 640px;
}
.page-hero .section-eyebrow { color: var(--earth); }
.page-hero .section-eyebrow::before { background: var(--earth); }

/* =========================================================
   SECTIONS, COMMON ELEMENTS
   ========================================================= */
section { padding: 7rem 3rem; }
.container { max-width: 1280px; margin: 0 auto; }
.section-head { margin-bottom: 4rem; max-width: 800px; }

.section-eyebrow {
  color: var(--ochre); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.section-eyebrow::before {
  content: ''; width: 28px; height: 1.5px; background: var(--ochre);
}
.section-title {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.05; color: var(--soil);
  letter-spacing: -0.03em;
}
.section-title em { font-style: italic; color: var(--ochre); }
.section-lead {
  font-size: 1.15rem; color: var(--grey);
  margin-top: 1.5rem; line-height: 1.7; max-width: 640px;
}

.text-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--ochre); text-decoration: none;
  font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin-top: 2.5rem; padding: 0.5rem 0;
  transition: color 0.2s, gap 0.3s ease;
}
.text-link span { transition: transform 0.3s ease; display: inline-block; }
.text-link:hover { color: var(--ochre-deep); gap: 0.7rem; }
.text-link.on-dark { color: var(--ochre-light); }
.text-link.on-dark:hover { color: var(--cream); }

/* =========================================================
   ABOUT
   ========================================================= */
/* Topographic line pattern: organic contour curves that tile horizontally
   (each path starts and ends at the same Y so the right edge meets the
   left edge of the next tile). Drift is a 90s horizontal slide, paused
   when prefers-reduced-motion is set. Same pattern used on .sectors. */
.about,
.sectors {
  background-color: var(--bone);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><g fill='none' stroke='%23c47830' stroke-opacity='0.07' stroke-width='1'><path d='M0 60 C 60 50, 130 75, 200 65 C 270 55, 340 40, 400 60'/><path d='M0 130 C 80 120, 160 145, 240 135 C 320 125, 400 145, 400 130'/><path d='M0 200 C 50 195, 110 210, 180 205 C 250 200, 320 185, 400 200'/><path d='M0 270 C 70 260, 150 290, 230 280 C 310 270, 380 255, 400 270'/><path d='M0 335 C 90 325, 170 350, 250 340 C 330 330, 400 350, 400 335'/></g></svg>");
  background-repeat: repeat;
  background-size: 400px 400px;
  background-position: 0 0;
  animation: topoDrift 90s linear infinite;
}
@keyframes topoDrift {
  from { background-position: 0 0; }
  to   { background-position: -400px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .about,
  .sectors { animation: none; background-position: 0 0; }
}
.about-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 5rem; align-items: start;
}
.about-visual {
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg,
    var(--sand) 0%, var(--ochre) 60%, var(--earth) 100%);
  border-radius: 4px; position: relative; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(110, 61, 20, 0.4);
}
.about-visual::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0 0.05  0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: 0.7;
}
.about-visual svg.glyph {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%); width: 60%;
  opacity: 0.92; z-index: 2;
}
.about-values {
  display: grid; gap: 2rem; margin-top: 3rem;
  border-top: 1px solid var(--grey-soft); padding-top: 2.5rem;
}
.value {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 1.5rem; align-items: start;
}
.value-num {
  font-family: 'Fraunces', serif; font-size: 1.4rem;
  font-style: italic; color: var(--ochre); font-weight: 300;
}
.value h3 {
  font-family: 'Fraunces', serif; font-size: 1.35rem;
  font-weight: 500; color: var(--soil); margin-bottom: 0.4rem;
}
.value p { color: var(--grey); font-size: 0.97rem; line-height: 1.7; }

.acknowledgement {
  margin-top: 3rem; padding: 2rem; background: var(--cream);
  border-left: 3px solid var(--ochre); border-radius: 2px;
}
.acknowledgement p {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1.05rem; color: var(--soil); line-height: 1.7;
}

/* =========================================================
   SERVICES
   ========================================================= */
.services { background: var(--soil); color: var(--bone); }
.services .section-title { color: var(--bone); }
.services .section-title em { color: var(--ochre-light); }
.services .section-lead { color: var(--grey-soft); }
.services .section-eyebrow { color: var(--ochre-light); }
.services .section-eyebrow::before { background: var(--ochre-light); }

.services-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}
.service {
  padding: 2.5rem;
  background: rgba(245, 232, 211, 0.04);
  border: 1px solid rgba(245, 232, 211, 0.1);
  border-radius: 2px;
  transition: all 0.4s ease; cursor: default;
  position: relative; overflow: hidden;
}
.service::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--ochre) 0%, var(--ochre-deep) 100%);
  opacity: 0; transition: opacity 0.4s ease; z-index: 0;
}
.service:hover { transform: translateY(-4px); border-color: var(--ochre-light); }
.service:hover::before { opacity: 0.08; }
.service > * { position: relative; z-index: 1; }
.service-icon {
  width: 56px; height: 56px; margin-bottom: 1.5rem; color: var(--ochre-light);
}
.service h3 {
  font-family: 'Fraunces', serif; font-size: 1.65rem;
  font-weight: 400; margin-bottom: 1rem; color: var(--bone);
}
.service-desc {
  color: var(--grey-soft); font-size: 0.95rem;
  margin-bottom: 1.5rem; line-height: 1.7;
}
.service-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.service-tag {
  padding: 0.35rem 0.8rem;
  background: rgba(245, 232, 211, 0.08);
  border: 1px solid rgba(245, 232, 211, 0.15);
  border-radius: 100px; font-size: 0.78rem; color: var(--cream);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
a.service-tag:hover {
  background: rgba(245, 232, 211, 0.18);
  border-color: var(--ochre-light);
  color: var(--bone);
}

/* Compact services for home preview */
.service-mini-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1rem; margin-top: 3rem;
}
.service-mini {
  padding: 1.75rem 1.25rem;
  background: rgba(245, 232, 211, 0.04);
  border: 1px solid rgba(245, 232, 211, 0.1);
  border-radius: 2px;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s;
}
.service-mini:hover {
  transform: translateY(-4px);
  border-color: var(--ochre-light);
  background: rgba(245, 232, 211, 0.06);
}
.service-mini .service-icon {
  width: 36px; height: 36px;
  margin-bottom: 1rem; color: var(--ochre-light);
}
/* Application-method cards on /dustcap use larger icons so they read
   as infographics rather than just decorative dingbats. */
#application .service-mini .service-icon {
  width: 72px; height: 72px;
  margin-bottom: 1.25rem;
}
.service-mini h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem; font-weight: 500;
  color: var(--bone); margin-bottom: 0.4rem;
}
.service-mini p {
  font-size: 0.85rem; color: var(--grey-soft); line-height: 1.5;
}

/* =========================================================
   DUSTCAP
   ========================================================= */
.dustcap {
  background: linear-gradient(180deg, var(--bone) 0%, var(--cream) 100%);
}
.dustcap-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem; margin-top: 4rem;
}
.product {
  aspect-ratio: 3 / 4; border-radius: 2px; padding: 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--bone); position: relative; overflow: hidden;
  transition: transform 0.4s ease; cursor: default;
}
.product:hover { transform: translateY(-6px); }
.product::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0 0.05  0 0 0 0.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: 0.5;
}
.product > * { position: relative; z-index: 1; }
.product:nth-child(1) { background: linear-gradient(160deg, var(--sand), var(--ochre-light)); color: var(--soil); }
.product:nth-child(2) { background: linear-gradient(160deg, var(--ochre-light), var(--ochre)); }
.product:nth-child(3) { background: linear-gradient(160deg, var(--ochre), var(--ochre-deep)); }
.product:nth-child(4) { background: linear-gradient(160deg, var(--ochre-deep), var(--earth)); }

.product-code {
  font-family: 'Fraunces', serif;
  font-size: 2.6rem; font-weight: 300; letter-spacing: -0.02em;
}
.product-name {
  font-size: 0.85rem; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 600;
  opacity: 0.85; margin-bottom: 0.6rem;
}
.product-desc { font-size: 0.92rem; line-height: 1.55; opacity: 0.9; }

/* Dustcap detail spec list (full page) */
.product-spec {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.82rem; line-height: 1.55; opacity: 0.85;
}
.product:nth-child(1) .product-spec { border-top-color: rgba(31,26,20,0.15); }
.product-spec strong { font-weight: 600; opacity: 1; display: block; margin-bottom: 0.2rem;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; }

/* =========================================================
   SECTORS
   ========================================================= */
.sectors { border-top: 1px solid var(--grey-soft); }
/* .sectors background-color and topo pattern are declared in the shared
   block above next to .about — leaving the border-top here so the rule
   ordering still places it after the shared declaration. */
.sectors-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 3.5rem;
  border-top: 1px solid var(--grey-soft);
  border-left: 1px solid var(--grey-soft);
}
.sector {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--grey-soft);
  border-bottom: 1px solid var(--grey-soft);
  display: flex; flex-direction: column; gap: 1rem;
  transition: background 0.3s ease;
}
.sector:hover { background: var(--cream); }
.sector-icon { width: 36px; height: 36px; color: var(--ochre); }
.sector h3 {
  font-family: 'Fraunces', serif; font-size: 1.3rem;
  font-weight: 500; color: var(--soil);
}
.sector p { font-size: 0.92rem; color: var(--grey); line-height: 1.6; }

/* Compact sectors strip for home preview */
.sectors-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--grey-soft);
  border-left: 1px solid var(--grey-soft);
  margin-top: 3rem;
}
.sector-mini {
  padding: 2rem 1rem; text-align: center;
  border-right: 1px solid var(--grey-soft);
  border-bottom: 1px solid var(--grey-soft);
  display: flex; flex-direction: column;
  align-items: center; gap: 0.8rem;
  transition: background 0.3s;
}
.sector-mini:hover { background: var(--cream); }
.sector-mini .sector-icon { width: 32px; height: 32px; color: var(--ochre); }
.sector-mini h3 {
  font-family: 'Fraunces', serif; font-size: 1rem;
  font-weight: 500; color: var(--soil);
}

/* =========================================================
   PREVIEW SECTIONS (home only)
   ========================================================= */
.preview-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 5rem; align-items: center;
}
.preview-grid .acknowledgement { margin-top: 0; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  background: linear-gradient(180deg,
    var(--cream) 0%, var(--sand) 50%, var(--ochre-light) 100%);
  position: relative; overflow: hidden;
}
.contact::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0.15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; pointer-events: none;
}
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 5rem; align-items: start;
  position: relative; z-index: 1;
}
.contact-info h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 300; color: var(--soil);
  line-height: 1; letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
.contact-info h2 em { font-style: italic; }
.contact-info p {
  color: var(--soil); font-size: 1.05rem;
  line-height: 1.7; margin-bottom: 2.5rem; max-width: 420px;
}
.contact-detail { margin-bottom: 1.5rem; }
.contact-detail .label {
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--earth);
  font-weight: 600; margin-bottom: 0.4rem;
}
.contact-detail a, .contact-detail span {
  font-family: 'Fraunces', serif; font-size: 1.3rem;
  color: var(--soil); text-decoration: none; font-weight: 400;
}
.contact-detail a:hover { color: var(--ochre-deep); }

.form {
  background: var(--bone); padding: 3rem; border-radius: 4px;
  box-shadow: 0 30px 80px -30px rgba(110, 61, 20, 0.3);
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.field { margin-bottom: 1.5rem; }
.field label {
  display: block; font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--earth); margin-bottom: 0.5rem;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 0;
  border: none; border-bottom: 1px solid var(--grey-soft);
  background: transparent;
  font-family: 'Manrope', sans-serif; font-size: 1rem;
  color: var(--char); transition: border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--ochre);
}
.field textarea { resize: vertical; min-height: 100px; }
.honeypot { display: none !important; }
.submit {
  width: 100%; padding: 1.1rem;
  background: var(--soil); color: var(--bone);
  border: none; border-radius: 100px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.05em; cursor: pointer;
  transition: all 0.25s ease; margin-top: 1rem;
}
.submit:hover { background: var(--ochre-deep); transform: translateY(-2px); }

/* Contact teaser on home */
.contact-teaser {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,
    var(--cream) 0%, var(--sand) 50%, var(--ochre-light) 100%);
}
.contact-teaser::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0.15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; pointer-events: none;
}
.contact-teaser-content {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto; text-align: center;
}
.contact-teaser .section-eyebrow {
  justify-content: center; color: var(--earth);
}
.contact-teaser .section-eyebrow::before { background: var(--earth); }
.contact-teaser-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 300; color: var(--soil);
  line-height: 1.1; letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
.contact-teaser-title em { font-style: italic; }
.contact-teaser p {
  color: var(--soil); font-size: 1.1rem;
  line-height: 1.7; margin-bottom: 2.5rem;
}
.contact-teaser-actions {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
}

/* Form success / error states */
.form-message {
  padding: 1.25rem 1.5rem; border-radius: 4px;
  margin-bottom: 2rem; font-size: 0.95rem;
  background: var(--cream); border-left: 3px solid var(--ochre);
  color: var(--soil); line-height: 1.6;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer { background: var(--char); color: var(--cream); padding: 5rem 3rem 2rem; }
.footer-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 4rem; padding-bottom: 3rem;
  border-bottom: 1px solid rgba(245, 232, 211, 0.1);
}
.footer-brand .nav-logo { color: var(--cream); }
.footer-brand .nav-logo .brand { color: var(--cream); font-size: 2.6rem; }
.footer-brand p {
  color: var(--grey-soft); font-size: 0.95rem;
  margin-top: 1.2rem; max-width: 300px; line-height: 1.7;
}
.footer-col h3 {
  font-family: 'Fraunces', serif; font-size: 1rem;
  font-weight: 500; margin-bottom: 1.2rem; color: var(--ochre-light);
}
.footer-col a, .footer-col p {
  display: block; color: var(--grey-soft);
  text-decoration: none; font-size: 0.9rem;
  line-height: 2; transition: color 0.2s;
}
.footer-col a:hover { color: var(--ochre-light); }
.footer-bottom {
  max-width: 1280px; margin: 2rem auto 0;
  display: flex; justify-content: space-between; align-items: center;
  /* grey-soft on char meets WCAG AA (~10:1). grey was ~3:1 and failed. */
  color: var(--grey-soft); font-size: 0.82rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .dustcap-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-logo-bg { width: 80%; right: -15%; opacity: 0.55; }
  .service-mini-grid { grid-template-columns: repeat(3, 1fr); }
  .sectors-strip { grid-template-columns: repeat(3, 1fr); }
  .preview-grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 900px) {
  /* Mobile scroll performance: drop backdrop-filter (expensive on iOS),
     drop will-change on the hero logo (parallax is desktop-only so it
     never moves on mobile and the hint just costs GPU memory), and
     pause the background-position animations on .hero, .about, .sectors.
     Mobile devices repaint these on every scroll frame which causes
     visible jank; the patterns remain visible, they just stop drifting. */
  nav {
    padding: 1rem 1.5rem;
    background: rgba(250, 245, 236, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero {
    animation: none;
    /* On mobile the breathing animation is off, so the gradient has no
       reason to be oversized (the 100% 115% size left a 15% strip clipped
       below the element, which iOS Safari sometimes rendered oddly during
       the address-bar collapse). Force the gradient to exactly fit. */
    background-size: 100% 100%;
    background-position: 0% 0%;
  }
  .about, .sectors { animation: none; background-position: 0 0; }
  .hero-logo-bg { will-change: auto; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: 0; right: -100%;
    width: 80%; max-width: 340px; height: 100vh;
    background: var(--bone);
    flex-direction: column; align-items: stretch;
    padding: 5.5rem 2rem 2rem;
    gap: 0;
    transition: right 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: -20px 0 60px rgba(31, 26, 20, 0.15);
    z-index: 101;
    overflow-y: auto;
  }
  .nav-links.open { right: 0; }
  .nav-links a {
    padding: 1rem 0; font-size: 1.05rem;
    border-bottom: 1px solid var(--grey-soft);
    width: 100%;
  }
  .nav-links a::after { display: none; }
  .nav-links .nav-cta {
    margin-top: 1.5rem;
    text-align: center; justify-content: center;
    border-bottom: none;
    transform: none !important;
    box-shadow: 0 8px 20px -8px rgba(196, 120, 48, 0.5),
                inset 0 0 0 1px rgba(31, 26, 20, 0.04);
    letter-spacing: 0.02em;
  }
  .nav-links .nav-cta:hover {
    transform: none !important;
  }
  section { padding: 5rem 1.5rem; }
  .hero { padding: 5rem 1.5rem 2rem; min-height: auto; }
  .hero-content { padding-bottom: 0; }
  .hero-text { max-width: 100%; }
  /* Lockup at <=900px: fit fully on screen rather than spilling off the
     right edge so the wordmark is visible alongside the glyph. */
  .hero-logo-bg { width: 88%; right: 2%; top: 28%; opacity: 0.45; }
  .hero-scroll { display: none; }
  .page-hero { padding: 7rem 1.5rem 4rem; min-height: auto; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .service[style*="span 2"] { grid-column: auto !important; }
  .sectors-grid { grid-template-columns: repeat(2, 1fr); }
  .form { padding: 2rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

@media (max-width: 600px) {
  section { padding: 4rem 1.25rem; }
  .hero { padding: 4.5rem 1.25rem 2rem; }
  .hero-content { padding-bottom: 0; }
  .hero-logo-bg { width: 96%; right: 2%; top: 25%; opacity: 0.38; }
  .hero h1 { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .hero-tagline { margin-top: 0.85rem; font-size: 1.05rem; }
  /* On phones, drop the second/third sentences of the long hero
     description; the about preview directly below covers the same
     ground. */
  .hero-desc { font-size: 0.95rem; line-height: 1.55; margin-top: 1rem; }
  .hero-desc-extra { display: none; }
  .hero-ctas { flex-direction: column; align-items: stretch; margin-top: 1.5rem; gap: 0.6rem; }
  .hero-cta { justify-content: center; padding: 0.85rem 1.5rem; }
  .page-hero { padding: 6rem 1.25rem 3rem; }
  .dustcap-grid { grid-template-columns: 1fr; gap: 1rem; }
  .product { aspect-ratio: 5 / 3; flex-direction: row; align-items: center; gap: 1.5rem; }
  .product-code { font-size: 2.2rem; min-width: 90px; }
  .product-code br { display: none; }
  .sectors-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .service { padding: 2rem 1.5rem; }
  .form { padding: 1.5rem; }
  .service-mini-grid { grid-template-columns: 1fr; }
  .sectors-strip { grid-template-columns: repeat(2, 1fr); }
  .contact-teaser-actions { flex-direction: column; align-items: stretch; }
  .contact-teaser-actions .hero-cta { justify-content: center; }
}

/* =========================================================
   REVEAL ANIMATION
   Content visible by default, animates IN when supported
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.7s ease,
                transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .js-reveal .reveal.in { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   FOCUS STYLES (accessibility)
   ========================================================= */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
  border-radius: 2px;
}