/* =========================================================================
   ZaRRuS Renovation & Outdoor Living — canonical stylesheet
   This ONE file is shared by the WordPress block theme and the static preview.
   Edit here only. Do not fork.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. METRIC-MATCHED FONT FALLBACKS
   Cormorant Garamond and Inter are loaded from Google Fonts with
   `display=swap`. Without these overrides the swap reflows every heading,
   because the default serif/sans fallbacks have very different metrics.
   These faces re-scale a locally installed font to match the webfont's
   advance width and vertical metrics, so the swap is near-invisible.
   Values are close approximations — re-derive from the shipped font files
   if a byte-exact match is ever needed.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
  size-adjust: 97%;
  ascent-override: 104%;
  descent-override: 31%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial"), local("Liberation Sans");
  size-adjust: 106%;
  ascent-override: 91.4%;
  descent-override: 22.8%;
  line-gap-override: 0%;
}

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */
:root {
  /* Palette */
  --zr-black:      #0C0A08;
  --zr-surface:    #141110;
  --zr-surface-2:  #1C1815;
  --zr-gold-hi:    #F2D98B;
  --zr-gold:       #CFA349;
  --zr-gold-deep:  #8C6A18;
  --zr-white:      #FFFFFF;
  --zr-body:       #E8E2D9;
  --zr-muted:      #A9A096;
  --zr-line:       rgba(207, 163, 73, 0.22);
  --zr-line-soft:  rgba(232, 226, 217, 0.10);
  /* Hairline that must READ as an affordance — >=3:1 on both dark grounds. */
  --zr-line-strong: rgba(207, 163, 73, 0.62);
  /* Border for the ghost button — >=3:1 non-text contrast (WCAG 1.4.11). */
  --zr-line-ghost:  rgba(232, 226, 217, 0.45);

  /* Type families */
  --zr-font-display: "Cormorant Garamond", "Cormorant Garamond Fallback", "Cormorant", Georgia, "Times New Roman", serif;
  --zr-font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --zr-fs-eyebrow: 0.72rem;
  --zr-fs-micro:   0.78rem;
  --zr-fs-small:   0.875rem;
  --zr-fs-body:    clamp(1rem, 0.96rem + 0.20vw, 1.0625rem);
  --zr-fs-lead:    clamp(1.0625rem, 1rem + 0.42vw, 1.25rem);
  --zr-fs-h4:      clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --zr-fs-h3:      clamp(1.375rem, 1.24rem + 0.62vw, 1.75rem);
  --zr-fs-h2:      clamp(1.9rem, 1.50rem + 1.85vw, 3.25rem);
  --zr-fs-h1:      clamp(2.5rem, 1.85rem + 2.90vw, 4.5rem);
  --zr-fs-numeral: clamp(2rem, 1.60rem + 1.80vw, 3rem);

  /* 8px spacing scale */
  --zr-space-1: 0.25rem;   /*  4 */
  --zr-space-2: 0.5rem;    /*  8 */
  --zr-space-3: 0.75rem;   /* 12 */
  --zr-space-4: 1rem;      /* 16 */
  --zr-space-5: 1.5rem;    /* 24 */
  --zr-space-6: 2rem;      /* 32 */
  --zr-space-7: 3rem;      /* 48 */
  --zr-space-8: 4rem;      /* 64 */
  --zr-space-9: 6rem;      /* 96 */
  --zr-space-10: 8rem;     /* 128 */

  /* Section rhythm — generous, this is where the luxury lives */
  --zr-section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Layout */
  --zr-content: 1240px;
  --zr-measure: 68ch;
  --zr-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --zr-header-h: 76px;

  /* Motion */
  --zr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --zr-dur: 480ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--zr-header-h) + var(--zr-space-4));
}

body.zr {
  margin: 0;
  background: var(--zr-black);
  color: var(--zr-body);
  font-family: var(--zr-font-body);
  font-size: var(--zr-fs-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--zr-font-display);
  color: var(--zr-white);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--zr-fs-h1); }
h2 { font-size: var(--zr-fs-h2); }
h3 { font-size: var(--zr-fs-h3); font-weight: 600; line-height: 1.18; }
h4 { font-size: var(--zr-fs-h4); font-weight: 600; line-height: 1.25; }

p { margin: 0; }
p + p { margin-top: var(--zr-space-4); }

a { color: inherit; }

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

/* Focus — always visible, never removed */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--zr-gold-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

.zr-skip-link {
  position: absolute;
  left: var(--zr-space-4);
  top: -100px;
  z-index: 999;
  background: var(--zr-surface-2);
  color: var(--zr-white);
  border: 1px solid var(--zr-line);
  padding: var(--zr-space-3) var(--zr-space-5);
  font-size: var(--zr-fs-small);
  transition: top 160ms var(--zr-ease);
}
.zr-skip-link:focus { top: var(--zr-space-4); }

.zr-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ---------------------------------------------------------------------- */
.zr-wrap {
  width: 100%;
  max-width: var(--zr-content);
  margin-inline: auto;
  padding-inline: var(--zr-gutter);
}

.zr-section { padding-block: var(--zr-section-y); position: relative; }
.zr-section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.zr-section--surface { background: var(--zr-surface); }
.zr-section--rule { border-top: 1px solid var(--zr-line); }

.zr-measure { max-width: var(--zr-measure); }

/* -------------------------------------------------------------------------
   4. TYPOGRAPHIC ATOMS
   ---------------------------------------------------------------------- */
/*
 * "ZaRRuS" is a specific capitalisation and must never be flattened by
 * text-transform. Wrap the brand name in .zr-brandname anywhere it appears
 * inside an uppercased context.
 */
.zr-brandname { text-transform: none; }

.zr-eyebrow {
  display: block;
  font-family: var(--zr-font-body);
  font-size: var(--zr-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zr-gold);
  margin: 0 0 var(--zr-space-4);
}

.zr-lead {
  font-size: var(--zr-fs-lead);
  line-height: 1.6;
  color: var(--zr-body);
  max-width: var(--zr-measure);
}

.zr-muted { color: var(--zr-muted); }

.zr-section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.zr-section-head p { margin-top: var(--zr-space-5); color: var(--zr-muted); }

.zr-rule {
  border: 0;
  height: 1px;
  background: var(--zr-line);
  margin: 0;
}

/* short gold hairline accent */
.zr-tick {
  display: block;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--zr-gold), transparent);
  margin-bottom: var(--zr-space-6);
}

/* -------------------------------------------------------------------------
   5. BUTTONS & LINKS
   ---------------------------------------------------------------------- */
.zr-btn {
  --_bg: transparent;
  --_fg: var(--zr-body);
  --_bd: var(--zr-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zr-space-2);
  min-height: 48px;
  padding: 0.85rem 1.75rem;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  font-family: var(--zr-font-body);
  font-size: var(--zr-fs-small);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 220ms var(--zr-ease),
              color 220ms var(--zr-ease),
              border-color 220ms var(--zr-ease);
}

/* Primary — the single filled gold element on the page */
.zr-btn--primary {
  --_bg: var(--zr-gold);
  --_fg: #17120A;
  --_bd: var(--zr-gold);
  font-weight: 600;
}
.zr-btn--primary:hover { --_bg: var(--zr-gold-hi); --_bd: var(--zr-gold-hi); }

.zr-btn--ghost { --_bd: var(--zr-line-ghost); --_fg: var(--zr-body); }
.zr-btn--ghost:hover { --_bd: var(--zr-gold-hi); --_fg: var(--zr-white); }

.zr-btn--sm { min-height: 44px; padding: 0.65rem 1.25rem; font-size: var(--zr-fs-micro); }

/*
 * Hit-area expander: keeps the refined visual (a hairline-underlined label)
 * while guaranteeing a >=44px touch target. Applied to inline affordances.
 */
.zr-link, .zr-tel { position: relative; }
.zr-link::before, .zr-tel::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Quiet inline affordance */
.zr-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--zr-fs-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zr-body);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--zr-line-strong);
  transition: color 200ms var(--zr-ease), border-color 200ms var(--zr-ease);
}
.zr-link:hover { color: var(--zr-gold-hi); border-bottom-color: var(--zr-gold-hi); }
.zr-link .zr-arrow { transition: transform 240ms var(--zr-ease); }
.zr-link:hover .zr-arrow { transform: translateX(4px); }

.zr-link--lg { font-size: var(--zr-fs-body); text-transform: none; letter-spacing: 0.01em; }

.zr-tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--zr-body);
  transition: color 200ms var(--zr-ease);
}
.zr-tel:hover { color: var(--zr-gold-hi); }

/* -------------------------------------------------------------------------
   6. PLACEHOLDER SLOTS  (.zr-ph)
   No photography approved yet. Swap the whole .zr-ph node for an <img>.
   ---------------------------------------------------------------------- */
.zr-ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(207,163,73,0.055) 0%, transparent 62%),
    linear-gradient(158deg, #1A1613 0%, #131010 48%, #0E0C0A 100%);
  isolation: isolate;
}
.zr-ph::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--zr-line);
  pointer-events: none;
}
.zr-ph__label {
  position: relative;
  z-index: 1;
  max-width: 78%;
  text-align: center;
  font-family: var(--zr-font-body);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zr-muted);
}
.zr-ph--wide   { aspect-ratio: 16 / 9; }
.zr-ph--square { aspect-ratio: 1 / 1; }
.zr-ph--tall   { aspect-ratio: 3 / 4; }
.zr-ph--hero   { aspect-ratio: auto; height: 100%; }
.zr-ph--hero::before { inset: 16px; }

/* -------------------------------------------------------------------------
   7. HEADER
   ---------------------------------------------------------------------- */
.zr-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 320ms var(--zr-ease),
              border-color 320ms var(--zr-ease);
}
.zr-header.is-stuck {
  background: var(--zr-surface);
  border-bottom-color: var(--zr-line);
}

.zr-header__inner {
  display: flex;
  align-items: center;
  gap: var(--zr-space-4);
  min-height: var(--zr-header-h);
}

.zr-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.zr-brand img { height: 44px; width: auto; }

/* flex: 0 0 auto — the nav must never shrink below its content and clip a link. */
.zr-nav { display: none; flex: 0 0 auto; }
.zr-nav ul { display: flex; align-items: center; gap: clamp(0.8rem, 0.2rem + 0.9vw, 1.25rem); }
.zr-nav a {
  display: block;
  padding: 0.5rem 0;
  font-size: var(--zr-fs-micro);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--zr-body);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: color 200ms var(--zr-ease);
}
.zr-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--zr-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--zr-ease);
}
.zr-nav a:hover { color: var(--zr-white); }
.zr-nav a:hover::after { transform: scaleX(1); }

.zr-header__actions { display: none; margin-left: auto; align-items: center; gap: var(--zr-space-4); flex: 0 0 auto; }
.zr-header__tel { font-size: var(--zr-fs-micro); font-weight: 500; white-space: nowrap; }
.zr-header__actions .zr-btn { white-space: nowrap; letter-spacing: 0.06em; padding-inline: 1rem; }

/* Hamburger */
.zr-burger {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 12px;
  background: none;
  border: 0;
  cursor: pointer;
}
.zr-burger span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--zr-body);
  transition: transform 260ms var(--zr-ease), opacity 180ms var(--zr-ease);
}
.zr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.zr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.zr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile slide-in panel */
.zr-mobile-scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(6, 5, 4, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--zr-ease), visibility 300ms;
}
.zr-mobile-scrim.is-open { opacity: 1; visibility: visible; }

.zr-mobile {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 99;
  width: min(88vw, 400px);
  display: flex;
  flex-direction: column;
  gap: var(--zr-space-6);
  padding: calc(var(--zr-header-h) + var(--zr-space-6)) var(--zr-gutter) var(--zr-space-8);
  background: var(--zr-surface);
  border-left: 1px solid var(--zr-line);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 380ms var(--zr-ease), visibility 380ms;
}
.zr-mobile.is-open { transform: translateX(0); visibility: visible; }

.zr-mobile__nav li + li { border-top: 1px solid var(--zr-line-soft); }
.zr-mobile__nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--zr-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--zr-white);
  text-decoration: none;
}
.zr-mobile__nav a:hover { color: var(--zr-gold-hi); }

.zr-mobile__foot { margin-top: auto; display: grid; gap: var(--zr-space-4); }
.zr-mobile__foot .zr-btn { width: 100%; }

body.zr-locked { overflow: hidden; }

/*
 * Two-stage desktop header:
 *   >=1100px — nav + CTA button fit the content measure on one line.
 *   >=1240px — enough room to also show the phone number.
 * Both thresholds are measured against the 1240px content measure, so the
 * header never breaks alignment with the rest of the page.
 */
@media (min-width: 1100px) {
  .zr-burger { display: none; }
  .zr-nav { display: block; margin-left: clamp(1.25rem, 0.5rem + 1.2vw, 1.5rem); }
  .zr-header__actions { display: flex; }
  .zr-header__tel { display: none; }
  .zr-mobile, .zr-mobile-scrim { display: none; }
}

@media (min-width: 1240px) {
  .zr-header__tel { display: inline-block; }
}

/*
 * No-JS fallback. `.no-js` is removed by the bootstrap script and re-added if
 * the nav script never initialises, so navigation ALWAYS exists: the off-canvas
 * panel and its toggle are dropped and the nav renders inline as a wrapping
 * list. Without this the burger is inert and there is no nav at all below
 * 1100px.
 */
.no-js .zr-burger,
.no-js .zr-mobile,
.no-js .zr-mobile-scrim { display: none !important; }

.no-js .zr-nav { display: block; flex: 1 1 100%; margin-left: 0; }
.no-js .zr-nav ul { flex-wrap: wrap; row-gap: 0; }
.no-js .zr-header__inner { flex-wrap: wrap; padding-bottom: var(--zr-space-3); }
.no-js .zr-header__actions { display: flex; }
.no-js .zr-header__tel { display: inline-block; }
/* The sticky header can grow tall when wrapped; let the page flow past it. */
.no-js .zr-header { position: static; background: var(--zr-surface); border-bottom-color: var(--zr-line); }
.no-js .zr-hero { padding-top: var(--zr-space-8); }

/* -------------------------------------------------------------------------
   8. HERO
   ---------------------------------------------------------------------- */
.zr-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 88vh;
  min-height: 88svh;
  padding-top: calc(var(--zr-header-h) + var(--zr-space-8));
  padding-bottom: clamp(3.5rem, 2rem + 6vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.zr-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.zr-hero__media .zr-ph { height: 100%; aspect-ratio: auto; align-items: flex-start; justify-content: flex-end; }
.zr-hero__media .zr-ph__label {
  max-width: min(90%, 46ch);
  text-align: right;
  padding: calc(var(--zr-header-h) + var(--zr-space-5)) var(--zr-space-6) 0;
}
.zr-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,10,8,0.86) 0%, rgba(12,10,8,0.42) 34%, rgba(12,10,8,0.80) 78%, var(--zr-black) 100%),
    linear-gradient(90deg, rgba(12,10,8,0.88) 0%, rgba(12,10,8,0.34) 62%, rgba(12,10,8,0.20) 100%);
}
.zr-hero__inner { width: 100%; }
.zr-hero h1 { max-width: 11em; margin-bottom: var(--zr-space-5); }
.zr-hero__sub { max-width: 56ch; color: var(--zr-body); }
.zr-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zr-space-4);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.zr-hero__cta .zr-btn { flex: 1 1 auto; min-width: 220px; }

@media (min-width: 720px) {
  .zr-hero__cta .zr-btn { flex: 0 0 auto; min-width: 0; }
}

/* -------------------------------------------------------------------------
   9. TRUST BAR
   ---------------------------------------------------------------------- */
.zr-trust {
  border-top: 1px solid var(--zr-line);
  border-bottom: 1px solid var(--zr-line);
  background: var(--zr-black);
}
.zr-trust ul {
  display: grid;
  grid-template-columns: 1fr;
}
.zr-trust li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--zr-space-4) var(--zr-space-5);
  font-size: var(--zr-fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zr-muted);
  border-top: 1px solid var(--zr-line-soft);
}
.zr-trust li:first-child { border-top: 0; }

@media (min-width: 720px) {
  .zr-trust ul { grid-template-columns: repeat(2, 1fr); }
  .zr-trust li:nth-child(-n+2) { border-top: 0; }
  .zr-trust li:nth-child(2n) { border-left: 1px solid var(--zr-line-soft); }
}
@media (min-width: 1080px) {
  .zr-trust ul { grid-template-columns: repeat(4, 1fr); }
  .zr-trust li { border-top: 0; border-left: 1px solid var(--zr-line-soft); padding-block: var(--zr-space-5); }
  .zr-trust li:first-child { border-left: 0; }
}

/* -------------------------------------------------------------------------
   10. POSITIONING
   ---------------------------------------------------------------------- */
.zr-positioning__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.zr-positioning__body p + p { margin-top: var(--zr-space-5); }
.zr-positioning__body .zr-emph { color: var(--zr-white); font-weight: 500; }

.zr-facts { border-top: 1px solid var(--zr-line); }
.zr-facts li { padding-block: var(--zr-space-5); border-bottom: 1px solid var(--zr-line); }
.zr-facts dt {
  font-size: var(--zr-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zr-gold);
  margin-bottom: var(--zr-space-2);
}
.zr-facts dd {
  margin: 0;
  font-family: var(--zr-font-display);
  font-size: var(--zr-fs-h3);
  font-weight: 500;
  line-height: 1.2;
  color: var(--zr-white);
}
.zr-facts .zr-facts__note {
  font-family: var(--zr-font-body);
  font-size: var(--zr-fs-small);
  line-height: 1.6;
  color: var(--zr-muted);
  margin-top: var(--zr-space-2);
}

@media (min-width: 900px) {
  .zr-positioning__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
}

/* -------------------------------------------------------------------------
   11. SERVICES
   ---------------------------------------------------------------------- */
.zr-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.2rem + 2.4vw, 3rem);
}
@media (min-width: 680px)  { .zr-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .zr-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zr-service {
  display: flex;
  flex-direction: column;
  gap: var(--zr-space-4);
}
.zr-service .zr-ph { transition: transform 600ms var(--zr-ease); }
.zr-service__media { overflow: hidden; border: 1px solid var(--zr-line-soft); }
.zr-service:hover .zr-ph { transform: scale(1.025); }
.zr-service h3 { margin-top: var(--zr-space-1); }
.zr-service p { color: var(--zr-muted); font-size: var(--zr-fs-small); line-height: 1.7; }
.zr-service .zr-link { margin-top: auto; align-self: flex-start; }

.zr-services__more {
  margin-top: clamp(2.75rem, 1.8rem + 3vw, 4.5rem);
  padding-top: var(--zr-space-6);
  border-top: 1px solid var(--zr-line);
  display: flex;
  justify-content: center;
}
.zr-services__more p {
  font-size: var(--zr-fs-body);
  color: var(--zr-muted);
  text-align: center;
  max-width: 56ch;
}

/* -------------------------------------------------------------------------
   12. PROCESS
   ---------------------------------------------------------------------- */
.zr-process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--zr-line);
  /* These render as <ol> on Home and Process. The step number is already shown
     as the styled .zr-step__num numeral, so the native marker duplicated it. */
  list-style: none;
  margin: 0;
  padding: 0;
}
.zr-step {
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  border-bottom: 1px solid var(--zr-line);
}
.zr-step__num {
  display: block;
  font-family: var(--zr-font-display);
  font-size: var(--zr-fs-numeral);
  font-weight: 500;
  line-height: 1;
  color: var(--zr-gold-deep);
  font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: var(--zr-space-4);
}
.zr-step h3 { margin-bottom: var(--zr-space-3); }
.zr-step p { color: var(--zr-muted); font-size: var(--zr-fs-small); line-height: 1.7; }

@media (min-width: 760px) {
  .zr-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
}
@media (min-width: 1080px) {
  .zr-process__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--zr-line); }
  .zr-step { border-bottom: 0; padding-inline-start: var(--zr-space-5); border-left: 1px solid var(--zr-line); }
  .zr-step:first-child { border-left: 0; padding-inline-start: 0; }
  .zr-process__grid { column-gap: clamp(1.5rem, 2.5vw, 2.5rem); }
}

/* -------------------------------------------------------------------------
   13. SELECTED WORK & EXPERIENCE
   ---------------------------------------------------------------------- */
.zr-work__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zr-space-5) var(--zr-space-7);
  padding-block: var(--zr-space-5);
  border-block: 1px solid var(--zr-line);
  margin-bottom: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
}
.zr-work__legend-item { max-width: 46ch; }
.zr-work__legend-item strong {
  display: block;
  font-size: var(--zr-fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zr-body);
  margin-bottom: var(--zr-space-2);
}
.zr-work__legend-item span { font-size: var(--zr-fs-small); color: var(--zr-muted); line-height: 1.65; }

.zr-work__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
}
@media (min-width: 680px)  { .zr-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .zr-work__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zr-project {
  display: flex;
  flex-direction: column;
  background: var(--zr-surface-2);
  border: 1px solid var(--zr-line-soft);
}
.zr-project .zr-ph { background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(207,163,73,0.05) 0%, transparent 62%),
    linear-gradient(158deg, #201B17 0%, #171310 52%, #110F0D 100%); }
.zr-project__body { padding: var(--zr-space-5); display: flex; flex-direction: column; gap: var(--zr-space-3); }

/* Track label — must stay readable. Never microscopic, never low contrast. */
.zr-track {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.3;
  border: 1px solid var(--zr-line);
  color: var(--zr-body);
}
.zr-track::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--zr-gold);
  flex: 0 0 auto;
}
.zr-track--experience { border-color: rgba(232,226,217,0.24); }
.zr-track--experience::before { background: var(--zr-muted); }

.zr-project h3 { font-size: var(--zr-fs-h4); }
.zr-project p { font-size: var(--zr-fs-small); color: var(--zr-muted); line-height: 1.65; }
/* Placeholder body copy — no project exists to describe yet. */
.zr-project__placeholder { font-size: var(--zr-fs-small); color: var(--zr-muted); line-height: 1.65; }
.zr-project__attr {
  margin-top: var(--zr-space-2);
  padding-top: var(--zr-space-3);
  border-top: 1px solid var(--zr-line-soft);
  font-size: var(--zr-fs-small);
  color: var(--zr-muted);
  font-style: italic;
}

.zr-work__note {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-top: var(--zr-space-5);
  border-top: 1px solid var(--zr-line);
  font-size: var(--zr-fs-small);
  color: var(--zr-muted);
  max-width: var(--zr-measure);
}

/* -------------------------------------------------------------------------
   14. SERVICE AREAS
   ---------------------------------------------------------------------- */
.zr-areas__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zr-space-3);
}
.zr-areas__list li {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--zr-line);
  font-size: var(--zr-fs-small);
  letter-spacing: 0.05em;
  color: var(--zr-body);
}
.zr-areas__note {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-size: var(--zr-fs-small);
  color: var(--zr-muted);
  max-width: var(--zr-measure);
}

/* -------------------------------------------------------------------------
   15. CLOSING CTA
   ---------------------------------------------------------------------- */
.zr-cta { text-align: center; border-top: 1px solid var(--zr-line); }
.zr-cta__inner { max-width: 72ch; margin-inline: auto; }
.zr-cta .zr-tick { margin-inline: auto; }
.zr-cta h2 { margin-bottom: var(--zr-space-5); }
.zr-cta p { color: var(--zr-muted); margin-inline: auto; max-width: 58ch; }
.zr-cta__actions {
  margin-top: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zr-space-5);
}
.zr-cta__tel { font-size: var(--zr-fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--zr-muted); }
.zr-cta__tel a { color: var(--zr-body); text-decoration: none; border-bottom: 1px solid var(--zr-line); }
.zr-cta__tel a:hover { color: var(--zr-gold-hi); }

@media (min-width: 640px) {
  .zr-cta__actions { flex-direction: row; justify-content: center; gap: var(--zr-space-7); }
}

/* -------------------------------------------------------------------------
   16. FOOTER
   ---------------------------------------------------------------------- */
.zr-footer {
  background: var(--zr-surface);
  border-top: 1px solid var(--zr-line);
  padding-top: clamp(3.5rem, 2.4rem + 4vw, 6rem);
}
.zr-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.zr-footer__brand img { height: 44px; width: auto; margin-bottom: var(--zr-space-5); }
.zr-footer__tagline {
  font-family: var(--zr-font-display);
  font-size: var(--zr-fs-h4);
  font-weight: 500;
  color: var(--zr-white);
  line-height: 1.3;
  max-width: 24ch;
}
/* h3 for a correct heading level under the section h2 — styled as a small cap. */
.zr-footer__col h3 {
  font-family: var(--zr-font-body);
  font-size: var(--zr-fs-eyebrow);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zr-gold);
  margin-bottom: var(--zr-space-5);
}
.zr-footer__col a {
  font-size: var(--zr-fs-small);
  color: var(--zr-body);
  text-decoration: none;
  transition: color 200ms var(--zr-ease);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.zr-footer__col a::before { content: none; }
.zr-footer__col a:hover { color: var(--zr-gold-hi); }
.zr-footer__col li {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--zr-fs-small);
  color: var(--zr-muted);
}
.zr-footer__hours { margin-top: var(--zr-space-5); font-size: var(--zr-fs-small); color: var(--zr-muted); line-height: 1.8; }
.zr-footer__hours dt {
  font-size: var(--zr-fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zr-muted);
  margin-bottom: var(--zr-space-2);
}
.zr-footer__hours dd { margin: 0; }

.zr-footer__bar {
  border-top: 1px solid var(--zr-line);
  padding-block: var(--zr-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--zr-space-3);
  font-size: var(--zr-fs-micro);
  color: var(--zr-muted);
}
.zr-footer__bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--zr-muted);
  text-decoration: none;
}
.zr-footer__bar a:hover { color: var(--zr-gold-hi); }

@media (min-width: 680px) {
  .zr-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zr-footer__bar { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .zr-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

/* -------------------------------------------------------------------------
   17. REVEAL ON SCROLL
   ---------------------------------------------------------------------- */
/*
 * Progressive enhancement, deliberately inverted: content is VISIBLE by
 * default. The hidden initial state only applies under `.zr-anim`, which the
 * bootstrap script adds to <html> and removes again if the reveal script never
 * initialises. If scripting is off, blocked or broken, nothing is ever hidden.
 *
 * No `will-change` here on purpose: there are ~40 reveal elements on the home
 * page and promoting them all to compositor layers costs far more than the
 * cheap opacity/transform transition saves.
 */
.zr-anim .zr-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--zr-dur) var(--zr-ease), transform var(--zr-dur) var(--zr-ease);
}
.zr-anim .zr-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zr-anim .zr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   18. WORDPRESS EDITOR/FRONT-END BRIDGE
   ---------------------------------------------------------------------- */
.wp-site-blocks > * { margin-block: 0; }
.editor-styles-wrapper { background: var(--zr-black); }
.zr-alignwide { max-width: var(--zr-content); margin-inline: auto; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   19. PAGE HERO (interior pages)
   Compact hero for /about/, /process/, /service-areas/, /contact/,
   /privacy-policy/ and the future /services/ pages — deliberately smaller
   than the 88vh home .zr-hero, no full-bleed photography required.
   ---------------------------------------------------------------------- */
.zr-page-hero {
  min-height: clamp(20rem, 42vh, 30rem);
  padding-top: calc(var(--zr-header-h) + var(--zr-space-5));
  padding-bottom: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(207,163,73,0.07) 0%, transparent 62%),
    linear-gradient(158deg, #1A1613 0%, #131010 48%, #0E0C0A 100%);
  border-bottom: 1px solid var(--zr-line);
}
.zr-page-hero .zr-wrap { width: 100%; }
.zr-page-hero h1 { font-size: var(--zr-fs-h2); max-width: 16em; }
.zr-page-hero .zr-lead { max-width: 52ch; margin-top: var(--zr-space-5); }

/* -------------------------------------------------------------------------
   20. CONTACT — info/form grid
   ---------------------------------------------------------------------- */
.zr-contact__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
@media (min-width: 900px) {
  .zr-contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
}
.zr-contact__info dl { border-top: 1px solid var(--zr-line); }
.zr-contact__info dl > div { padding-block: var(--zr-space-5); border-bottom: 1px solid var(--zr-line); }
.zr-contact__info dt {
  font-size: var(--zr-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zr-gold);
  margin-bottom: var(--zr-space-2);
}
.zr-contact__info dd { margin: 0; font-size: var(--zr-fs-body); color: var(--zr-body); }
.zr-contact__info dd a { color: var(--zr-body); text-decoration: none; border-bottom: 1px solid var(--zr-line-strong); }
.zr-contact__info dd a:hover { color: var(--zr-gold-hi); border-bottom-color: var(--zr-gold-hi); }
.zr-contact__info .zr-footer__hours { margin-top: var(--zr-space-2); }

/* -------------------------------------------------------------------------
   21. FORM
   ---------------------------------------------------------------------- */
.zr-form { display: grid; gap: var(--zr-space-6); }
.zr-form__row { display: grid; gap: var(--zr-space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .zr-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zr-form__field { display: flex; flex-direction: column; gap: var(--zr-space-2); }
.zr-form__label {
  font-size: var(--zr-fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--zr-body);
}
.zr-form__required { color: var(--zr-gold); margin-left: 0.2em; }
.zr-form__control {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  background: var(--zr-surface-2);
  border: 1px solid var(--zr-line);
  color: var(--zr-body);
  font-family: var(--zr-font-body);
  font-size: var(--zr-fs-body);
  line-height: 1.5;
  border-radius: 2px;
  transition: border-color 200ms var(--zr-ease);
}
.zr-form__control:hover { border-color: var(--zr-line-strong); }
.zr-form__control::placeholder { color: var(--zr-muted); }
textarea.zr-form__control { min-height: 140px; resize: vertical; }
select.zr-form__control { cursor: pointer; }
.zr-form__note {
  font-size: var(--zr-fs-small);
  color: var(--zr-muted);
  line-height: 1.65;
  padding: var(--zr-space-4) var(--zr-space-5);
  border: 1px solid var(--zr-line);
  background: var(--zr-surface-2);
}
.zr-form__actions { display: flex; }

/* -------------------------------------------------------------------------
   22. LONG-FORM CONTENT (PROSE)
   Reusable vertical rhythm for text-only pages (privacy policy and similar).
   ---------------------------------------------------------------------- */
.zr-prose > * + * { margin-top: var(--zr-space-5); }
.zr-prose > h2 { margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.zr-prose > h2:first-child { margin-top: 0; }
.zr-prose > h2 + * { margin-top: var(--zr-space-4); }
.zr-prose p { color: var(--zr-body); }
.zr-prose ul { list-style: disc; padding-left: 1.25em; }
.zr-prose li { color: var(--zr-body); }
.zr-prose li + li { margin-top: var(--zr-space-2); }
.zr-prose a { color: var(--zr-body); text-decoration: none; border-bottom: 1px solid var(--zr-line-strong); }
.zr-prose a:hover { color: var(--zr-gold-hi); border-bottom-color: var(--zr-gold-hi); }

/* ==========================================================================
   SERVICES HUB · SERVICE PAGES · SELECTED WORK
   Added for the multi-page build. Dark ground throughout — every surface here
   is one of the three dark tokens, so text never lands on a light background.
   ========================================================================== */

/* ---------- shared media ---------- */
.zr-shot,
.zr-svc__media,
.zr-project__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--zr-surface-2);
  border: 1px solid var(--zr-line);
  aspect-ratio: 4 / 3;
}
.zr-shot img,
.zr-svc__media img,
.zr-project__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}

/* ---------- services hub grid ---------- */
.zr-svc__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--zr-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .zr-svc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .zr-svc__grid { grid-template-columns: repeat(3, 1fr); } }

.zr-svc__link {
  display: block; height: 100%;
  text-decoration: none; color: inherit;
  background: var(--zr-surface);
  border: 1px solid var(--zr-line);
  transition: border-color .3s ease, transform .3s ease;
}
.zr-svc__link:hover { border-color: var(--zr-gold); transform: translateY(-2px); }
.zr-svc__link:hover .zr-svc__media img { transform: scale(1.04); }
.zr-svc__link:focus-visible { outline: 2px solid var(--zr-gold-hi); outline-offset: 3px; }
.zr-svc__media { border: 0; border-bottom: 1px solid var(--zr-line); }
.zr-svc__body { padding: var(--zr-space-5) var(--zr-space-5) var(--zr-space-6); }
.zr-svc__body h3 { color: var(--zr-white); margin: 0 0 var(--zr-space-3); }
.zr-svc__body p  { color: var(--zr-body); font-size: var(--zr-fs-small); margin: 0; }
.zr-svc__more {
  display: inline-block; margin-top: var(--zr-space-4);
  font-size: var(--zr-fs-eyebrow); letter-spacing: .16em; text-transform: uppercase;
  color: var(--zr-gold); border-bottom: 1px solid var(--zr-gold-deep); padding-bottom: 2px;
}

/* ---------- service detail page ---------- */
.zr-page-hero--compact { min-height: 0; padding-block: calc(var(--zr-header-h) + var(--zr-space-8)) var(--zr-space-8); }

.zr-crumb {
  font-size: var(--zr-fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--zr-muted); margin-bottom: var(--zr-space-4);
}
.zr-crumb a { color: var(--zr-gold); text-decoration: none; border-bottom: 1px solid var(--zr-gold-deep); }
.zr-crumb a:hover { color: var(--zr-gold-hi); }
.zr-crumb span[aria-hidden] { margin: 0 .5em; color: var(--zr-muted); }

.zr-svcpage__grid { display: grid; gap: var(--zr-space-8); grid-template-columns: 1fr; }
@media (min-width: 900px) { .zr-svcpage__grid { grid-template-columns: 1.35fr 1fr; gap: var(--zr-space-9); align-items: start; } }

.zr-scope {
  background: var(--zr-surface-2);
  border: 1px solid var(--zr-line);
  padding: var(--zr-space-6);
}
.zr-scope h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--zr-fs-eyebrow); letter-spacing: .18em; text-transform: uppercase;
  color: var(--zr-gold); margin: 0 0 var(--zr-space-5); font-weight: 600;
}
.zr-scope__list { list-style: none; margin: 0; padding: 0; }
.zr-scope__list li {
  color: var(--zr-body); font-size: var(--zr-fs-small);
  padding: var(--zr-space-3) 0 var(--zr-space-3) var(--zr-space-5);
  border-top: 1px solid var(--zr-line); position: relative;
}
.zr-scope__list li:first-child { border-top: 0; padding-top: 0; }
.zr-scope__list li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--zr-space-3) + 0.55em);
  width: 6px; height: 1px; background: var(--zr-gold);
}
.zr-scope__list li:first-child::before { top: 0.55em; }

.zr-gal { display: grid; gap: var(--zr-space-4); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .zr-gal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .zr-gal { grid-template-columns: repeat(3, 1fr); } }

/* ---------- prev / next pager ---------- */
.zr-pager { display: grid; gap: var(--zr-space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .zr-pager { grid-template-columns: repeat(2, 1fr); } }
.zr-pager__item {
  display: block; padding: var(--zr-space-5) var(--zr-space-6);
  background: var(--zr-surface); border: 1px solid var(--zr-line);
  text-decoration: none; transition: border-color .3s ease;
}
.zr-pager__item:hover { border-color: var(--zr-gold); }
.zr-pager__item:focus-visible { outline: 2px solid var(--zr-gold-hi); outline-offset: 3px; }
.zr-pager__item span {
  display: block; font-size: var(--zr-fs-eyebrow); letter-spacing: .18em;
  text-transform: uppercase; color: var(--zr-gold); margin-bottom: var(--zr-space-2);
}
.zr-pager__item strong {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--zr-fs-h4); font-weight: 500; color: var(--zr-white);
}
.zr-pager__item--next { text-align: right; }
@media (max-width: 699px) { .zr-pager__item--next { text-align: left; } }

.zr-center { text-align: center; }
.zr-h3 { font-size: var(--zr-fs-h3); }

/* ---------- work page ---------- */
.zr-note {
  background: var(--zr-surface-2);
  border: 1px solid var(--zr-line);
  border-left: 3px solid var(--zr-gold);
  padding: var(--zr-space-6) var(--zr-space-7);
  max-width: 74ch;
}
.zr-note h2 { color: var(--zr-white); margin: 0 0 var(--zr-space-4); }
.zr-note p  { color: var(--zr-body); margin-bottom: var(--zr-space-4); }
.zr-note p:last-child { margin-bottom: 0; }
.zr-note strong { color: var(--zr-gold-hi); font-weight: 600; }

.zr-projects { display: flex; flex-direction: column; gap: var(--zr-space-9); }

.zr-projects .zr-project { display: grid; gap: var(--zr-space-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .zr-projects .zr-project { grid-template-columns: 1fr 1fr; gap: var(--zr-space-8); }
  .zr-projects .zr-project--alt .zr-project__media { order: 2; }
}
.zr-projects .zr-project__body h3 { color: var(--zr-white); margin: var(--zr-space-3) 0 var(--zr-space-4); }
.zr-projects .zr-project__body p  { color: var(--zr-body); }

/* Attribution badge — deliberately readable, never dimmed or shrunk away. */
.zr-projects .zr-project__attr { margin: 0 0 var(--zr-space-4); }
.zr-badge {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--zr-fs-micro); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--zr-black); background: var(--zr-gold);
  padding: .35em .85em;
}

.zr-projects .zr-project__tags {
  list-style: none; margin: var(--zr-space-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--zr-space-2);
}
.zr-projects .zr-project__tags li {
  font-size: var(--zr-fs-micro); letter-spacing: .08em;
  color: var(--zr-body);
  border: 1px solid var(--zr-line);
  padding: .4em .8em;
}

/* ==========================================================================
   PHASE 2 — FAQ accordion, reference-copy markers, screen-reader utility
   ========================================================================== */

.zr-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- FAQ accordion ---------- */
.zr-faq { border-top: 1px solid var(--zr-line); }
.zr-faq__item { border-bottom: 1px solid var(--zr-line); }
.zr-faq__q {
  display: flex; align-items: flex-start; gap: var(--zr-space-4);
  padding: var(--zr-space-5) 0;
  cursor: pointer; list-style: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--zr-fs-h4); font-weight: 500; line-height: 1.3;
  color: var(--zr-white);
}
.zr-faq__q::-webkit-details-marker { display: none; }
.zr-faq__q::after {
  content: ""; flex: 0 0 auto; margin-left: auto;
  width: 12px; height: 12px; margin-top: .45em;
  border-right: 1px solid var(--zr-gold); border-bottom: 1px solid var(--zr-gold);
  transform: rotate(45deg); transition: transform .3s ease;
}
.zr-faq__item[open] .zr-faq__q::after { transform: rotate(-135deg); }
.zr-faq__q:hover { color: var(--zr-gold-hi); }
.zr-faq__item summary:focus-visible { outline: 2px solid var(--zr-gold-hi); outline-offset: 3px; }
.zr-faq__a { padding: 0 0 var(--zr-space-6); max-width: 72ch; }
.zr-faq__a p { color: var(--zr-body); margin: 0; }

.zr-faq-groups { display: flex; flex-direction: column; gap: var(--zr-space-9); }
.zr-faq-group > h2 { color: var(--zr-white); margin: 0 0 var(--zr-space-5); }

/* ---------- reference-copy marker ----------
   Deliberately conspicuous. Every instance must be gone before production;
   grep the working copy for "zr-todo" to find them all. */
.zr-todo {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #1A1206; background: #C8922B;
  padding: .3em .7em; margin-right: .6em;
  border-radius: 2px;
}
.zr-todo-note {
  color: var(--zr-body);
  font-size: var(--zr-fs-small);
  border-left: 3px solid #C8922B;
  background: rgba(200,146,43,0.07);
  padding: var(--zr-space-4) var(--zr-space-5);
  margin-bottom: var(--zr-space-6);
  max-width: 78ch;
}

/* ---------- process phases ---------- */
.zr-phases { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.zr-phase {
  display: grid; gap: var(--zr-space-4);
  grid-template-columns: auto 1fr; align-items: start;
  padding: var(--zr-space-6) 0;
  border-top: 1px solid var(--zr-line);
}
.zr-phase:first-child { border-top: 0; }
.zr-phase__num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--zr-fs-h3); font-weight: 500;
  /* --zr-gold (8.46:1), not --zr-gold-deep: the numeral drops to 22px on mobile,
     below the WCAG large-text threshold, so it needs the 4.5:1 ramp. */
  color: var(--zr-gold); line-height: 1; min-width: 2.2ch;
}
.zr-phase__body h3 { color: var(--zr-white); margin: 0 0 var(--zr-space-3); }
.zr-phase__body p  { color: var(--zr-body); margin: 0; max-width: 72ch; }
@media (min-width: 800px) {
  .zr-phase { grid-template-columns: 4rem 1fr; gap: var(--zr-space-6); }
}

/* ---------- service-area city index ---------- */
.zr-cities {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--zr-space-4); grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .zr-cities { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .zr-cities { grid-template-columns: repeat(3, 1fr); } }
.zr-city a {
  display: block; padding: var(--zr-space-5) var(--zr-space-6);
  background: var(--zr-surface); border: 1px solid var(--zr-line);
  text-decoration: none; transition: border-color .3s ease, transform .3s ease;
}
.zr-city a:hover { border-color: var(--zr-gold); transform: translateY(-2px); }
.zr-city a:focus-visible { outline: 2px solid var(--zr-gold-hi); outline-offset: 3px; }
.zr-city strong {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--zr-fs-h4); font-weight: 500; color: var(--zr-white);
  margin-bottom: var(--zr-space-1);
}
.zr-city span { display: block; font-size: var(--zr-fs-micro); color: var(--zr-muted);
  letter-spacing: .1em; text-transform: uppercase; }

/* ==========================================================================
   BLOG — archive grid, post cards, article body
   Styles core block output (wp:query / wp:post-template), so posts published
   from wp-admin pick this up with no per-post work.
   ========================================================================== */
.zr-posts__grid {
  display: grid; gap: var(--zr-space-6); grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 680px)  { .zr-posts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .zr-posts__grid { grid-template-columns: repeat(3, 1fr); } }

.zr-posts__grid > li {
  background: var(--zr-surface); border: 1px solid var(--zr-line);
  display: flex; flex-direction: column;
  transition: border-color .3s ease, transform .3s ease;
}
.zr-posts__grid > li:hover { border-color: var(--zr-gold); transform: translateY(-2px); }

.zr-post__media { margin: 0; border-bottom: 1px solid var(--zr-line); }
.zr-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No featured image set: keep the card rhythm rather than collapsing it. */
.zr-post__media:empty { aspect-ratio: 4 / 3; background: var(--zr-surface-2); display: block; }

.zr-post__body { padding: var(--zr-space-5) var(--zr-space-5) var(--zr-space-6); }
.zr-post__meta {
  display: flex; flex-wrap: wrap; gap: var(--zr-space-3);
  font-size: var(--zr-fs-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--zr-gold); margin-bottom: var(--zr-space-3);
}
.zr-post__meta a { color: var(--zr-gold); text-decoration: none; }
.zr-post__meta a:hover { color: var(--zr-gold-hi); }
.zr-post__meta time { color: var(--zr-muted); }

.zr-posts__grid h2, .zr-posts__grid h3 { margin: 0 0 var(--zr-space-3); font-size: var(--zr-fs-h4); }
.zr-posts__grid h2 a, .zr-posts__grid h3 a { color: var(--zr-white); text-decoration: none; }
.zr-posts__grid h2 a:hover, .zr-posts__grid h3 a:hover { color: var(--zr-gold-hi); }
.zr-posts__grid p { color: var(--zr-body); font-size: var(--zr-fs-small); margin: 0; }
.zr-posts__grid .wp-block-post-excerpt__more-link {
  display: inline-block; margin-top: var(--zr-space-4);
  font-size: var(--zr-fs-eyebrow); letter-spacing: .16em; text-transform: uppercase;
  color: var(--zr-gold); border-bottom: 1px solid var(--zr-gold-deep); text-decoration: none;
}

.zr-pagination { margin-top: var(--zr-space-8); gap: var(--zr-space-3); }
.zr-pagination a, .zr-pagination span {
  color: var(--zr-body); text-decoration: none;
  padding: .5em .9em; border: 1px solid var(--zr-line);
}
.zr-pagination a:hover { border-color: var(--zr-gold); color: var(--zr-gold-hi); }
.zr-pagination .current { border-color: var(--zr-gold); color: var(--zr-gold-hi); }

/* ---------- single article ---------- */
.zr-article__head .zr-post__meta { justify-content: flex-start; }
.zr-article__media { margin: 0 0 var(--zr-space-8); }
.zr-article__media img { width: 100%; height: auto; display: block; border: 1px solid var(--zr-line); }
.zr-article__body { max-width: 72ch; margin-inline: auto; }
.zr-article__body h2 { margin: var(--zr-space-8) 0 var(--zr-space-4); color: var(--zr-white); }
.zr-article__body h3 { margin: var(--zr-space-6) 0 var(--zr-space-3); color: var(--zr-white); }
.zr-article__body p, .zr-article__body li { color: var(--zr-body); }
.zr-article__body a { color: var(--zr-gold); text-decoration: none; border-bottom: 1px solid var(--zr-gold-deep); }
.zr-article__body a:hover { color: var(--zr-gold-hi); border-bottom-color: var(--zr-gold-hi); }
.zr-article__body blockquote {
  border-left: 3px solid var(--zr-gold); padding-left: var(--zr-space-5);
  margin: var(--zr-space-6) 0; color: var(--zr-body); font-style: normal;
}
.zr-article__tags { margin-top: var(--zr-space-8); display: flex; flex-wrap: wrap; gap: var(--zr-space-2); }
.zr-article__tags a {
  font-size: var(--zr-fs-micro); letter-spacing: .08em; color: var(--zr-body);
  border: 1px solid var(--zr-line); padding: .4em .8em; text-decoration: none;
}
.zr-article__tags a:hover { border-color: var(--zr-gold); color: var(--zr-gold-hi); }

/* ---------- static blog preview (mirrors the dynamic block output) ---------- */
.zr-post { background: var(--zr-surface); border: 1px solid var(--zr-line); transition: border-color .3s ease, transform .3s ease; }
.zr-post:hover { border-color: var(--zr-gold); transform: translateY(-2px); }
.zr-post__link { display: block; height: 100%; text-decoration: none; color: inherit; }
.zr-post__link:focus-visible { outline: 2px solid var(--zr-gold-hi); outline-offset: 3px; }
.zr-post__ph { aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid var(--zr-line); }
.zr-post h2, .zr-post h3 { font-size: var(--zr-fs-h4); color: var(--zr-white); margin: 0 0 var(--zr-space-3); }
.zr-post:hover h2, .zr-post:hover h3 { color: var(--zr-gold-hi); }
.zr-post p { color: var(--zr-body); font-size: var(--zr-fs-small); margin: 0; }
.zr-article__ph { aspect-ratio: 16 / 9; margin-bottom: var(--zr-space-8); }

/* ==========================================================================
   NAVIGATION — grouped dropdowns
   Open/close is driven by :hover and :focus-within, so the menu is fully
   operable by mouse, keyboard and with JavaScript disabled. JS only mirrors
   aria-expanded and adds Escape.
   ========================================================================== */
.zr-nav__item { position: relative; }
.zr-nav__item > a { display: inline-flex; align-items: center; gap: .45em; }

.zr-dd__caret {
  width: 5px; height: 5px; margin-top: -2px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); opacity: .55;
  transition: transform .25s ease, opacity .25s ease;
}
.zr-has-dd:hover > a .zr-dd__caret,
.zr-has-dd:focus-within > a .zr-dd__caret { opacity: 1; transform: rotate(225deg) translate(-1px,-1px); }

.zr-dd__panel {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, -6px);
  min-width: 620px; padding: var(--zr-space-6) var(--zr-space-6) 0;
  background: #131010;
  border: 1px solid var(--zr-line);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.85);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 120;
}
/* Hover bridge — keeps the panel open while crossing the gap to it. */
.zr-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

.zr-has-dd:hover > .zr-dd__panel,
.zr-has-dd:focus-within > .zr-dd__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
/* Escape sets this briefly so the panel closes even while hover persists. */
.zr-dd--closed > .zr-dd__panel { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

.zr-dd__inner { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--zr-space-6); }
.zr-dd__panel--areas { min-width: 480px; }
.zr-dd__panel--areas .zr-dd__inner { grid-template-columns: 1fr; }
.zr-dd__col--wide { grid-column: 1 / -1; }

.zr-dd__grouphead {
  display: block; margin-bottom: var(--zr-space-4); padding-bottom: var(--zr-space-3);
  border-bottom: 1px solid var(--zr-line);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--zr-fs-eyebrow); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--zr-gold); text-decoration: none;
}
a.zr-dd__grouphead:hover { color: var(--zr-gold-hi); border-bottom-color: var(--zr-gold); }
.zr-dd__grouphead--plain { color: var(--zr-gold); }

.zr-dd__col ul { list-style: none; margin: 0; padding: 0; }
.zr-dd__col li + li { margin-top: 2px; }
.zr-dd__col a:not(.zr-dd__grouphead) {
  display: block; padding: .42em 0;
  font-size: var(--zr-fs-small); color: var(--zr-body);
  text-decoration: none; line-height: 1.35;
  transition: color .2s ease, padding-left .2s ease;
}
.zr-dd__col a:not(.zr-dd__grouphead):hover { color: var(--zr-gold-hi); padding-left: 6px; }

.zr-dd__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--zr-space-5); }

.zr-dd__foot {
  display: flex; gap: var(--zr-space-6);
  margin-top: var(--zr-space-6); padding: var(--zr-space-4) 0;
  border-top: 1px solid var(--zr-line);
}
.zr-dd__foot a {
  font-size: var(--zr-fs-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--zr-muted); text-decoration: none;
}
.zr-dd__foot a:hover { color: var(--zr-gold-hi); }

@media (prefers-reduced-motion: reduce) {
  .zr-dd__panel, .zr-dd__caret, .zr-dd__col a { transition: none; }
}

/* ---------- mobile: <details> groups, no JS required ---------- */
.zr-m__group > summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
  padding: var(--zr-space-3) 0; color: var(--zr-white);
}
.zr-m__group > summary::-webkit-details-marker { display: none; }
.zr-m__group > summary::after {
  content: ""; width: 8px; height: 8px; margin-right: 2px;
  border-right: 1px solid var(--zr-gold); border-bottom: 1px solid var(--zr-gold);
  transform: rotate(45deg); transition: transform .25s ease;
}
.zr-m__group[open] > summary::after { transform: rotate(225deg); }
.zr-m__group--top > summary {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--zr-fs-h4); font-weight: 500;
}
.zr-m__sub { padding: var(--zr-space-2) 0 var(--zr-space-4) var(--zr-space-4);
  border-left: 1px solid var(--zr-line); margin-left: 2px; }
.zr-m__sub .zr-m__group > summary {
  font-size: var(--zr-fs-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--zr-gold);
}
.zr-m__sub ul { list-style: none; margin: 0; padding: 0 0 var(--zr-space-3); }
.zr-m__sub a { display: block; padding: .55em 0; font-size: var(--zr-fs-small); color: var(--zr-body); text-decoration: none; }
.zr-m__sub a:hover { color: var(--zr-gold-hi); }
.zr-m__all {
  display: inline-block; margin-top: var(--zr-space-2);
  font-size: var(--zr-fs-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--zr-gold); text-decoration: none; border-bottom: 1px solid var(--zr-gold-deep);
}

/* ---------- refinement: quieter card motion, sharper focus ---------- */
.zr-svc__link:hover, .zr-city a:hover, .zr-post:hover, .zr-pager__item:hover { transform: none; }
.zr-svc__link, .zr-city a, .zr-post, .zr-pager__item { transition: border-color .3s ease, background-color .3s ease; }
.zr-svc__link:hover, .zr-city a:hover, .zr-post:hover { background: var(--zr-surface-2); }

/* Panel sizing: shrink-to-fit but capped, so a short link list cannot stretch
   the panel across the viewport, and a long one cannot run off-screen. */
.zr-dd__panel { width: max-content; max-width: min(700px, calc(100vw - 3rem)); }
.zr-dd__panel--areas { min-width: 0; max-width: min(520px, calc(100vw - 3rem)); }
.zr-dd__panel--areas .zr-dd__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Anchor panels to the trigger's left edge rather than centring them. Centring
   pushed the Services panel 61px off-screen at 1100-1240px, because it is the
   first nav item. Both dropdown triggers sit in the first half of the nav, so
   left-anchoring cannot overflow the right edge either. */
.zr-dd__panel { left: 0; transform: translate(0, -6px); }
.zr-has-dd:hover > .zr-dd__panel,
.zr-has-dd:focus-within > .zr-dd__panel { transform: translate(0, 0); }

/* Reset the top-level nav's flex/uppercase/underline treatment inside the
   panels. `.zr-nav ul { display:flex }` and `.zr-nav a { text-transform:
   uppercase }` cascade into panel content otherwise, collapsing the columns
   onto one row and shouting every child link. */
.zr-dd__panel ul { display: block; gap: 0; align-items: initial; }
.zr-dd__panel li { margin: 0; }
.zr-dd__panel a {
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--zr-fs-small);
  color: var(--zr-body);
  position: static;
  padding: 0;
}
.zr-dd__panel a::after { display: none; }
.zr-dd__panel a:hover { color: var(--zr-gold-hi); }

/* Group heads keep the small-caps treatment. */
.zr-dd__panel .zr-dd__grouphead {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: var(--zr-fs-eyebrow);
  font-weight: 600;
  color: var(--zr-gold);
}
.zr-dd__panel .zr-dd__foot a {
  text-transform: uppercase; letter-spacing: .14em;
  font-size: var(--zr-fs-eyebrow); color: var(--zr-muted);
}
.zr-dd__panel .zr-dd__foot a:hover { color: var(--zr-gold-hi); }
.zr-dd__panel .zr-dd__col a:not(.zr-dd__grouphead) { display: block; padding: .42em 0; }
.zr-dd__panel .zr-dd__grid { display: grid; }

/* Phone link in the mobile panel measured 27px tall — under the 44px touch
   target the rest of the menu meets. */
.zr-mobile__foot .zr-tel { display: inline-flex; align-items: center; min-height: 44px; }

/* Active nav state — gold rule under the current section, in the bar and panel. */
.zr-nav a[aria-current="page"] { color: var(--zr-white); }
.zr-nav a[aria-current="page"]::after { transform: scaleX(1); }
.zr-dd__col a[aria-current="page"] { color: var(--zr-gold-hi); }

/* Brand column plus three link columns, spread across the whole container.
   The grid previously declared six tracks for four columns, which crowded the
   content into the left of the footer and left dead space beside it. */
.zr-footer__grid { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .zr-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .zr-footer__grid {
    grid-template-columns: 1.5fr 1.1fr 1fr 1.15fr;
    column-gap: clamp(2rem, 0.8rem + 3.4vw, 4.5rem);
  }
}
.zr-footer__col h3 { white-space: nowrap; }

/* ---------- professional-experience role block (project pages) ---------- */
.zr-role {
  margin: var(--zr-space-5) 0 var(--zr-space-3);
  padding-left: var(--zr-space-5);
  border-left: 2px solid var(--zr-gold);
}
.zr-role dt {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--zr-fs-eyebrow); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--zr-gold); margin-bottom: var(--zr-space-1);
}
.zr-role dd {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--zr-fs-h4); font-weight: 500; color: var(--zr-white);
}
/* Attribution: readable, never shrunk away or dimmed into the background. */
.zr-attrline {
  color: var(--zr-body); font-size: var(--zr-fs-small);
  margin: 0 0 var(--zr-space-4); max-width: 60ch;
}

/* ---------- service pages: who-this-is-for + local relevance ---------- */
.zr-whofor { margin-top: var(--zr-space-7); }
.zr-localline {
  margin-top: var(--zr-space-4);
  font-size: var(--zr-fs-small); color: var(--zr-muted);
}
.zr-localline a { color: var(--zr-gold); text-decoration: none; border-bottom: 1px solid var(--zr-gold-deep); }
.zr-localline a:hover { color: var(--zr-gold-hi); border-bottom-color: var(--zr-gold-hi); }

/* ==========================================================================
   EXECUTION PASS — FAQ heading semantics + section rhythm
   ========================================================================== */

/* FAQ questions are now real <h3> elements. Keep the visual treatment the
   summary previously carried, so semantics improved without a design change. */
.zr-faq__q h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--zr-fs-h4);
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
}
.zr-faq__q { gap: var(--zr-space-4); }

/* --------------------------------------------------------------------------
   Section rhythm. Sections were each padding 144px top AND bottom, so every
   boundary stacked to ~288px of dead space — the gap read as unfinished
   rather than considered. Padding now sits on the section, and consecutive
   sections share the boundary instead of doubling it.
   -------------------------------------------------------------------------- */
.zr-section + .zr-section { padding-top: 0; }
.zr-section + .zr-section > .zr-wrap { padding-top: var(--zr-space-9); }

/* A tinted section still needs its own top padding — it paints a background,
   so collapsing it would push content against the colour edge. */
.zr-section + .zr-section--surface,
.zr-section--surface + .zr-section { padding-top: var(--zr-space-9); }
.zr-section + .zr-section--surface > .zr-wrap,
.zr-section--surface + .zr-section > .zr-wrap { padding-top: 0; }

/* Service pages: the two-column overview left a tall empty column on the
   right once the scope card ended. Align to the top and let it close up. */
.zr-svcpage__grid { align-items: start; }
@media (min-width: 900px) {
  .zr-svcpage__grid { gap: var(--zr-space-8) var(--zr-space-9); }
}

/* "Who this service is for" sat flush against the paragraph above it. */
.zr-whofor { margin-top: var(--zr-space-6); margin-bottom: var(--zr-space-3); }

/* Related Work / gallery sections were floating with too much air above. */
.zr-gal { margin-top: var(--zr-space-2); }

/* Tighten the closing CTA — it was the worst offender for trapped space. */
.zr-cta__inner { padding-block: var(--zr-space-2); }

/* --------------------------------------------------------------------------
   Mobile: section padding scaled with the desktop clamp and left large gaps
   on small screens where vertical space is expensive.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .zr-section { padding-block: var(--zr-space-8); }
  .zr-section + .zr-section > .zr-wrap { padding-top: var(--zr-space-8); }
  .zr-section + .zr-section--surface,
  .zr-section--surface + .zr-section { padding-top: var(--zr-space-8); }
  .zr-page-hero--compact { padding-block: calc(var(--zr-header-h) + var(--zr-space-6)) var(--zr-space-6); }
  .zr-section-head { margin-bottom: var(--zr-space-6); }
  .zr-projects { gap: var(--zr-space-8); }
  .zr-faq__a { padding-bottom: var(--zr-space-5); }
}

/* ---------- footer social icons ---------- */
/* 44px circular targets so the row is comfortable on a phone, with the icon
   itself kept small enough to stay a mark rather than a button graphic. */
.zr-social { margin-top: var(--zr-space-5); }
.zr-social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--zr-space-3); }
.zr-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--zr-line);
  border-radius: 50%;
  color: var(--zr-gold);
  text-decoration: none;
  transition: color 200ms var(--zr-ease), border-color 200ms var(--zr-ease), background-color 200ms var(--zr-ease);
}
.zr-social svg { display: block; width: 20px; height: 20px; }
.zr-social a:hover {
  color: var(--zr-gold-hi);
  border-color: var(--zr-line-strong);
  background-color: rgba(207, 163, 73, 0.10);
}
.zr-social a:focus-visible { outline: 2px solid var(--zr-gold-hi); outline-offset: 3px; }

/* ---------- contact form: honeypot + result note ---------- */
/* Off-canvas rather than display:none — bots skip fields that are not rendered. */
.zr-form__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.zr-formnote {
  margin-top: var(--zr-space-6);
  padding: var(--zr-space-5) var(--zr-space-6);
  border: 1px solid var(--zr-line-strong);
  border-left-width: 3px;
  background: var(--zr-surface-2);
}
.zr-formnote p { margin: 0; color: var(--zr-body); }
.zr-formnote--success { border-left-color: var(--zr-gold-hi); }
.zr-formnote--error   { border-left-color: #E2857A; }
.zr-formnote:focus { outline: 2px solid var(--zr-gold-hi); outline-offset: 3px; }

/* ---------- CMS-managed Selected Work ---------- */
/* Project photography is now chosen in the editor, so core's image and gallery
   blocks need the framed treatment the hand-written .zr-shot figures had. */
.zr-projectbody .wp-block-gallery.has-nested-images figure.wp-block-image,
.zr-pagebody .wp-block-gallery.has-nested-images figure.wp-block-image,
.zr-projectbody > figure.wp-block-image {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--zr-surface-2);
  border: 1px solid var(--zr-line);
}
.zr-projectbody .wp-block-gallery.has-nested-images figure.wp-block-image img,
.zr-pagebody .wp-block-gallery.has-nested-images figure.wp-block-image img,
.zr-projectbody > figure.wp-block-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.zr-projectbody .wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.zr-pagebody .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  display: none;
}

/* Cards on /work/ now link through to the project they describe. */
.zr-projects .zr-project__media a { display: block; width: 100%; height: 100%; }
.zr-projects .zr-project__body h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms var(--zr-ease);
}
.zr-projects .zr-project__body h3 a:hover { color: var(--zr-gold-hi); }

/* Page content coming from the editor: the block wrappers must not add space
   of their own, and the homepage project cards link like the /work/ cards. */
.zr-pagebody, .zr-projectbody { margin: 0; }
.zr-pagebody > .wp-block-group, .zr-projectbody > .wp-block-group { margin: 0; }
.zr-work__grid .zr-project__body h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms var(--zr-ease);
}
.zr-work__grid .zr-project__body h3 a:hover { color: var(--zr-gold-hi); }
.zr-work__grid .zr-project__media a { display: block; width: 100%; height: 100%; }