/* ==========================================================================
   FLATROCK CUSTOMS — shared stylesheet
   ==========================================================================
   BRAND IS LOCKED. Do not re-derive colors or type.

   Orange  #DB5B08 measures 3.62:1 on cream — FAILS WCAG AA at body size.
     -> accents, buttons, large display type only.
   Deep Orange #B44B07 -> any small orange text, links, eyebrows.
   White-on-orange button labels: 19px minimum (AA large-text threshold is
     18.66px bold at 3:1; orange on white is 3.6:1, so 19px passes and 16px
     would not). Do not shrink .btn font-size.
   No serif anywhere. Deliberate.

   Contents
     1.  Tokens (color, modular type scale, spacing rhythm)
     2.  Reset & base
     3.  Focus, skip link
     4.  Layout, rhythm, section furniture
     5.  Diagonal motif (from the banner artwork)
     6.  Preview banner
     7.  Placeholder tokens & image frames
     8.  Buttons
     9.  Header / nav
     10. Hero
     11. Service cards & icons
     12. Service detail sections
     13. FAQ
     14. Gallery / before-after slider
     15. Testimonials & trust blocks
     16. Contact form
     17. Breadcrumbs
     18. Footer
     19. Utilities
     20. Pill component library (glass + solid) — see assets/css/COMPONENTS.md
     21. Section edges: .edge-diag, .chevron-rule
     22. Hero depth layers
     23. Scroll-reveal hooks ([data-reveal])
     24. Sticky header glass state (.site-header.is-scrolled)
     25. Micro-interactions
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --orange:        #DB5B08;
  --orange-deep:   #B44B07;
  --charcoal:      #21201F;
  --cream:         #FCF9F0;

  --charcoal-80:   #4a4847;
  --charcoal-60:   #6e6c6a;
  --rule:          #ded9ca;
  --rule-strong:   #c9c3b2;
  --cream-deep:    #F4EFE1;
  --cream-deeper:  #EBE4D2;
  --ink-panel:     #2c2a28;
  --ink-line:      #46433f;
  --on-dark:       #d8d4cc;
  --on-dark-accent:#ff9d52;   /* 6.0:1 on charcoal — safe for small text */

  --ph-bg:         #FFF2B8;
  --ph-line:       #8a7411;
  --ph-ink:        #3d3405;

  --font-display:  'Archivo Black', 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Modular type scale — 1.25 (major third), fluid between 390px and 1280px.
     Every font-size on this site comes from this scale. No one-off sizes. */
  --step--2: clamp(0.70rem, 0.68rem + 0.09vw, 0.75rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.16rem, 1.10rem + 0.28vw, 1.36rem);
  --step-2:  clamp(1.36rem, 1.25rem + 0.48vw, 1.70rem);
  --step-3:  clamp(1.59rem, 1.40rem + 0.79vw, 2.13rem);
  --step-4:  clamp(1.86rem, 1.55rem + 1.28vw, 2.66rem);
  --step-5:  clamp(2.17rem, 1.68rem + 2.02vw, 3.33rem);
  --step-6:  clamp(2.54rem, 1.76rem + 3.20vw, 4.16rem);
  --step-7:  clamp(2.97rem, 1.75rem + 5.00vw, 5.20rem);

  /* Spacing rhythm — 8px base, geometric */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  88px;
  --s-10: 120px;

  --maxw:   1180px;
  --measure: 66ch;
  --gutter: 20px;
  --radius: 2px;

  /* Pill geometry. Cards, inputs and panels stay square (--radius: 2px) —
     the pill radius is opt-in and is the ONLY rounded shape in the system. */
  --radius-pill: 999px;

  /* ---- Elevation scale ----------------------------------------------------
     Every level is two shadows: a tight contact shadow (object meets surface)
     plus a wide ambient shadow (object in a room). Tinted warm off the
     charcoal 33,32,31 rather than neutral black, so shadows read as dust on
     cream, not as grey fog. Levels are cumulative, not interchangeable:
       0 flush / 1 resting card / 2 raised control / 3 hovered card
       4 floating panel over a photograph.                                    */
  --elev-0: 0 0 0 0 rgba(33,32,31,0);
  --elev-1: 0 1px 2px rgba(33,32,31,.07), 0 2px 8px rgba(33,32,31,.05);
  --elev-2: 0 1px 2px rgba(33,32,31,.10), 0 6px 18px rgba(33,32,31,.09);
  --elev-3: 0 2px 4px rgba(33,32,31,.11), 0 14px 34px rgba(33,32,31,.13);
  --elev-4: 0 3px 6px rgba(33,32,31,.13), 0 26px 64px rgba(33,32,31,.20);

  /* Legacy aliases — every existing rule keeps working, it just gets the
     layered version for free. Do not remove these three. */
  --shadow-sm: var(--elev-1);
  --shadow-md: var(--elev-2);
  --shadow-lg: var(--elev-4);

  /* ---- Surfaces ---- */
  --surface-1:      #fff;             /* cards, inputs, the crispest plane   */
  --surface-2:      #FCF9F0;          /* page ground (cream)                 */
  --surface-3:      #F4EFE1;          /* banded / alt sections (cream-deep)   */
  --surface-sunken: #EBE4D2;          /* wells, empty frames (cream-deeper)   */
  --surface-dark-1: #21201F;          /* charcoal ground                      */
  --surface-dark-2: #2c2a28;          /* raised panel on the dark side        */

  /* ---- Borders / hairlines ---- */
  --border-hair:        rgba(33,32,31,.10);
  --border-line:        #ded9ca;      /* = --rule                             */
  --border-strong:      #c9c3b2;      /* = --rule-strong                      */
  --border-ink:         var(--charcoal);
  --border-hair-dark:   rgba(252,249,240,.12);
  --border-line-dark:   #46433f;      /* = --ink-line                         */
  --border-strong-dark: #5e5a55;

  /* ---- Glass ----
     --glass-tint-dark is the contrast-safety mechanism, NOT a decoration.
     backdrop-filter is a filter: it cannot guarantee a luminance floor, so
     the tint alpha alone has to carry the label. See section 20 for the
     worked composite arithmetic. */
  --glass-blur: 16px;
  --glass-sat:  160%;
  --glass-tint-dark:  rgba(28,27,26,.72);
  --glass-tint-light: rgba(252,249,240,.95);
  --glass-hairline-top:    rgba(255,255,255,.38);
  --glass-hairline-bottom: rgba(0,0,0,.30);
  /* Specular gloss peak. The stop POSITIONS matter as much as the alpha —
     see the glyph-band arithmetic in section 20 before changing them. */
  --gloss-highlight: rgba(255,255,255,.34);

  /* ---- Motion ---- */
  --ease:           cubic-bezier(.2,.7,.3,1);
  --ease-out-expo:  cubic-bezier(.16,1,.3,1);
  --ease-spring:    cubic-bezier(.34,1.42,.64,1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 420ms;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;          /* Archivo Black ships one weight */
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--step-7); line-height: .98; letter-spacing: -0.028em; }
h2 { font-size: var(--step-5); letter-spacing: -0.024em; }
h3 { font-size: var(--step-2); line-height: 1.12; }
h4 { font-size: var(--step-1); line-height: 1.2; }
h5 { font-size: var(--step-0); }

p  { margin: 0 0 var(--s-4); max-width: var(--measure); }

a { color: var(--orange-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--charcoal); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15em; max-width: var(--measure); }
li { margin-bottom: var(--s-2); }

strong { font-weight: 700; }

/* ---------- 3. Focus & skip link ---------- */
:focus-visible {
  outline: 3px solid var(--orange-deep);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--on-dark-accent); }

.skip-link {
  position: absolute;
  left: var(--s-2); top: -100px;
  z-index: 300;
  background: var(--charcoal);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--s-2); color: #fff; }

/* ---------- 4. Layout, rhythm, section furniture ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 760px) { :root { --gutter: 32px; } }

.section { padding-block: var(--s-8); }
@media (min-width: 900px) { .section { padding-block: var(--s-9); } }
.section--tight { padding-block: var(--s-6); }
/* Decorative plaster-grain texture, kept faint — it should register as paper
   warmth, not as an image. */
.section--alt  { position: relative; isolation: isolate; background: var(--cream-deep); }
.section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/grain-light.jpg") center / cover no-repeat;
  opacity: .62;
  mix-blend-mode: multiply;
}
.section--dark { background: var(--charcoal); color: var(--on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark strong { color: #fff; }
/* :not(.btn):not(.pill) matters — without it this rule out-specifies
   .btn--primary / .pill--accent and repaints white button labels
   orange-on-orange (#ff9d52 on #DB5B08 = 1.85:1). Load-bearing. */
.section--dark a:not(.btn):not(.pill) { color: var(--on-dark-accent); }

/* Section head: eyebrow + h2 + lede, consistent rhythm everywhere */
.s-head { margin-bottom: var(--s-7); }
.s-head h2 { margin-bottom: var(--s-4); }
.s-head .lede { margin-bottom: 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin: 0 0 var(--s-4);
  max-width: none;
}
/* the chevron tick — logo language, minimal */
.eyebrow::before {
  content: "";
  flex: none;
  width: 14px; height: 9px;
  background: currentColor;
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 72% 100%, 50% 45%, 28% 100%);
}
.section--dark .eyebrow { color: var(--on-dark-accent); }
.center .eyebrow { justify-content: center; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--charcoal-80);
  max-width: 58ch;
}
.section--dark .lede { color: var(--on-dark); }

/* ---------- 5. Diagonal motif ----------
   Lifted from the banner artwork's angled bars. Used as structure:
   section transitions and edge accents. Never as wallpaper. */
.slash-rule {
  height: 10px;
  border: 0;
  margin: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--charcoal) 0 2px,
    transparent 2px 9px
  );
  opacity: .5;
}
.slash-rule--orange {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--orange) 0 3px,
    transparent 3px 11px
  );
  opacity: .85;
}
.slash-rule--edge { /* top edge of dark sections */
  height: 14px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--charcoal) 0 3px,
    transparent 3px 12px
  );
  opacity: .28;
}

/* Angled corner cut — the logo's cut-off geometry, applied to panels */
.angle-cut {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
.angle-cut--tl {
  clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%, 0 34px);
}

/* Thin angled accent bars, used once or twice per page at most */
.slash-accent {
  height: 6px;
  width: 92px;
  background-image: repeating-linear-gradient(-45deg, var(--orange) 0 3px, transparent 3px 10px);
  margin-bottom: var(--s-5);
}

.rule { border: 0; border-top: 2px solid var(--rule); margin-block: var(--s-7); }

/* ---------- 6. Preview banner ---------- */
.preview-banner {
  background: var(--charcoal);
  color: var(--cream);
  font-size: var(--step--1);
  line-height: 1.5;
  border-bottom: 3px solid var(--orange);
}
.preview-banner .wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding-block: var(--s-3);
}
.preview-banner p { margin: 0; max-width: none; }
.preview-banner strong {
  color: var(--on-dark-accent);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: var(--step--2);
  font-weight: 800;
  display: inline-block;
  margin-right: var(--s-2);
}
.preview-banner__close {
  margin-left: auto;
  flex: none;
  background: transparent;
  border: 1.5px solid #6a6764;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  cursor: pointer;
}
.preview-banner__close:hover { border-color: var(--cream); background: var(--ink-panel); }

/* ---------- 7. Placeholder tokens & image frames ---------- */
.ph {
  display: inline-block;
  background: var(--ph-bg);
  color: var(--ph-ink);
  border: 2px dotted var(--ph-line);
  border-radius: var(--radius);
  padding: 1px 7px;
  font-family: var(--font-body);
  font-size: .92em;
  font-weight: 700;
  letter-spacing: .03em;
  /* Must wrap — a long token pushed the page 4px wide at 390px when nowrap. */
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}
/* A token inside a display heading must stay legible without hijacking the
   composition — at full h1 size it swallows the headline and orphans the
   punctuation onto its own line. */
h1 .ph, h2 .ph, h3 .ph {
  font-size: .46em;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: 6%;
  padding: 2px 9px;
  line-height: 1.25;
}
h3 .ph { font-size: .8em; vertical-align: baseline; }

.ph--block {
  display: block;
  padding: var(--s-4) var(--s-4);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
}
.section--dark .ph, .site-footer .ph { color: var(--ph-ink); }

/* Image frames — obviously placeholders, but designed, not broken.
   aspect-ratio reserves the box so there is no layout shift when a real
   <img> replaces it. */
.imgframe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-align: center;
  padding: var(--s-5);
  overflow: hidden;
  color: #55503f;
  background-color: var(--cream-deeper);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(33,32,31,.045) 0 1px,
    transparent 1px 10px
  );
  border: 2px dashed #b9b09a;
  border-radius: var(--radius);
}
/* corner brackets — deliberate framing, reads as a spec drawing */
.imgframe::before, .imgframe::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--orange);
  opacity: .55;
}
.imgframe::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.imgframe::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.imgframe--4x3  { aspect-ratio: 4 / 3; }
.imgframe--3x2  { aspect-ratio: 3 / 2; }
.imgframe--1x1  { aspect-ratio: 1 / 1; }
.imgframe--16x9 { aspect-ratio: 16 / 9; }

.imgframe__icon { width: 30px; height: 30px; color: #918a72; margin-bottom: var(--s-1); }

.imgframe__label {
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--cream);
  border: 1px solid #c3baa2;
  border-radius: var(--radius);
  padding: 4px 10px;
}
.imgframe__hint {
  font-size: var(--step--1);
  line-height: 1.45;
  margin: 0;
  max-width: 34ch;
  color: #6c6553;
}
.imgframe__tag {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--charcoal);
  color: var(--cream);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius);
}
.imgframe--tagged::before { display: none; }

/* ---------- 8. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: 19px;               /* AA floor for white-on-orange — do not lower */
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  padding: var(--s-4) var(--s-6);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: #bd4f06; color: #fff; }

.btn--ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn--ghost:hover { background: var(--charcoal); color: var(--cream); }

/* .hero is a dark section but is not .section--dark — without it listed here the
   ghost button renders charcoal-on-charcoal and effectively disappears.
   .pill--solid.pill--outline is the pill-family equivalent and has exactly the
   same failure mode, so it is listed in the same rule set.
   cream #FCF9F0 on the hero scrim (#1B1A19 worst case) = 14.5:1 PASS. */
.section--dark .btn--ghost,
.site-footer .btn--ghost,
.hero .btn--ghost,
.section--dark .pill--solid.pill--outline,
.site-footer .pill--solid.pill--outline,
.hero .pill--solid.pill--outline { color: var(--cream); border-color: var(--cream); }
.section--dark .btn--ghost:hover,
.site-footer .btn--ghost:hover,
.hero .btn--ghost:hover,
.section--dark .pill--solid.pill--outline:hover,
.site-footer .pill--solid.pill--outline:hover,
.hero .pill--solid.pill--outline:hover { background: var(--cream); color: var(--charcoal); }

.btn--sm { font-size: 19px; padding: var(--s-3) var(--s-5); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ---------- 9. Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 2px solid var(--charcoal);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 76px;
}

/* Brand lockup: cropped FR mark + typeset wordmark.
   The supplied artwork is a stacked lockup whose wordmark is unreadable at
   header size and whose charcoal half vanishes on the dark footer — so the
   mark is used as artwork and the wordmark is set in Archivo Black, spelled
   FLATROCK per the brand spec. */
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; padding: var(--s-2) 0; }
.brand img { height: 38px; width: auto; }
.brand:hover { opacity: .85; }
.brand__word { display: flex; flex-direction: column; line-height: 1; }
.brand__word .w1 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: -0.005em;
  color: var(--charcoal);
}
.brand__word .w2 {
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-top: 4px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  border: 2px solid var(--charcoal);
  border-radius: var(--radius);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-3);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 18px; height: 2px; background: var(--charcoal); display: inline-block; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--charcoal);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-width: none; }
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--charcoal);
  padding: var(--s-4) var(--s-1);
  border-bottom: 1px solid var(--rule);
}
.site-nav a:hover { color: var(--orange-deep); }
.site-nav a[aria-current="page"] { color: var(--orange-deep); box-shadow: inset 4px 0 0 var(--orange); padding-left: var(--s-3); }
.site-nav .nav-cta { border-bottom: 0; padding-top: var(--s-4); }
.site-nav .nav-cta .btn { width: 100%; }

@media (max-width: 899px) {
  .site-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--cream);
    border-bottom: 2px solid var(--charcoal);
    padding: var(--s-2) var(--gutter) var(--s-5);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .site-nav[hidden] { display: none; }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
  .site-nav[hidden] { display: block; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 2px; }
  .site-nav a { border-bottom: 0; padding: var(--s-3) var(--s-3); font-size: var(--step--2); letter-spacing: .12em; }
  .site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--orange); padding-left: var(--s-3); }
  .site-nav .nav-cta { padding: 0 0 0 var(--s-3); }
  .site-nav .nav-cta .btn { width: auto; font-size: 19px; padding: var(--s-3) var(--s-5); }
}

/* ---------- 10. Hero ----------
   No photo is available, so the composition has to carry on type, color and
   geometry alone: oversized display headline, an angled charcoal panel, and
   a proof strip. */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--charcoal);
  color: var(--on-dark);
  padding-block: var(--s-8);
  overflow: hidden;
}
@media (min-width: 900px) { .hero { padding-block: var(--s-9); } }

/* Decorative material photograph. Sits behind a scrim heavy enough that all
   text over it clears AA regardless of what the image does. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 20% 50%;  /* v2 texture: dark low-detail zone is on the left, under the headline */
  z-index: -2;
}
/* CONTRAST GUARANTEE — do not lower any alpha in this rule.
   Over the text column the scrim is >= .94, i.e. worst case (a blown-out
   white pixel in hero-texture.jpg) composites to #222120:
     #FFFFFF on #222120           = 16.07:1  PASS  (h1)
     #d8d4cc on #222120           = 10.88:1  PASS  (--on-dark body)
     #ff9d52 on #222120           =  7.81:1  PASS  (--on-dark-accent)
   The multi-stop version below only ever ADDS density; the vignette and the
   rim-light are separate layers stacked on top, never subtractive. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* vignette — pulls the corners down so the composition has a centre */
    radial-gradient(120% 90% at 30% 42%,
      rgba(20,19,18,0) 0%,
      rgba(20,19,18,.10) 58%,
      rgba(20,19,18,.42) 100%),
    /* the original directional scrim — alphas unchanged */
    linear-gradient(90deg,
      rgba(20,19,18,.97) 0%,
      rgba(20,19,18,.94) 38%,
      rgba(20,19,18,.72) 72%,
      rgba(20,19,18,.60) 100%);
}
@media (max-width: 959px) {
  .hero__scrim {
    background:
      radial-gradient(130% 80% at 50% 30%,
        rgba(20,19,18,0) 0%,
        rgba(20,19,18,.12) 60%,
        rgba(20,19,18,.40) 100%),
      linear-gradient(180deg, rgba(20,19,18,.96) 0%, rgba(20,19,18,.90) 100%);
  }
}

/* Rim-light: a single soft orange edge running the hero's diagonal, echoing
   the logo's cut. Purely decorative, sits above the scrim but below content,
   and is masked to the right half so it never crosses the text column. */
.hero__rim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(118deg,
    transparent 0%,
    transparent 58%,
    rgba(219,91,8,.00) 58%,
    rgba(219,91,8,.55) 60.2%,
    rgba(255,157,82,.75) 61%,
    rgba(219,91,8,.40) 62%,
    transparent 64%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: .55;
}
@media (max-width: 959px) { .hero__rim { display: none; } }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--on-dark-accent); }
.hero__lede { color: var(--on-dark); }
.hero__grid { position: relative; display: grid; gap: var(--s-7); }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; gap: var(--s-8); align-items: start; }
}

.hero h1 { margin-bottom: var(--s-4); }
.hero__tagline {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--orange);          /* large display — AA-exempt at this size */
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-5);
  max-width: none;
}
/* colour comes from the .hero__lede rule in the dark-hero block above —
   do not set a charcoal here, the hero sits on a dark photograph. */
.hero__lede { font-size: var(--step-1); max-width: 46ch; }

.hero__contactline {
  margin-top: var(--s-6);
  font-size: var(--step--1);
  color: var(--charcoal-80);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  max-width: none;
}

/* cream proof panel, cut at the corner — reads as a spec card against the
   dark hero rather than another band of text */
.hero__panel {
  /* A cream slab floating over a photograph — the one place in the system
     that earns --elev-4, plus the logo's angled corner cut. */
  background: linear-gradient(180deg, #FEFCF6 0%, var(--cream) 46%, #F7F3E7 100%);
  color: var(--charcoal);
  padding: var(--s-6) var(--s-6) var(--s-7);
  position: relative;
  box-shadow: var(--elev-4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
/* inner top hairline — the lit leading edge of the slab */
.hero__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.85);
}
/* The cut corner gets an orange wedge so the angle reads as intent rather
   than as a rendering artefact. The parent's clip-path removes the
   bottom-right triangle, so this wedge fills the triangle that SURVIVES —
   polygon(0 0, 100% 0, 0 100%) of the same 34px box. */
.hero__panel::before {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 34px; height: 34px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: .92;
}
.hero__panel h2 {
  font-size: var(--step-1);
  color: var(--charcoal);
  margin-bottom: var(--s-5);
  letter-spacing: .01em;
}
.hero__list { list-style: none; margin: 0; padding: 0; max-width: none; }
.hero__list li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-4);
  font-size: var(--step--1);
  line-height: 1.5;
}
.hero__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 15px; height: 10px;
  background: var(--orange-deep);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 72% 100%, 50% 45%, 28% 100%);
}
.hero__list li { color: var(--charcoal-80); }
.hero__list strong { color: var(--charcoal); display: block; font-size: var(--step-0); margin-bottom: 2px; }

.hero__services {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  max-width: none;
}
.hero__services li { margin: 0; }
.hero__services a {
  display: block;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  background: rgba(252,249,240,.06);
  border: 1.5px solid #635d56;
  border-radius: var(--radius);
  padding: 7px 11px;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.hero__services a:hover { border-color: var(--orange); color: var(--on-dark-accent); background: rgba(252,249,240,.12); }
.hero__contactline { color: var(--on-dark); }

/* ---------- 10b. CTA band with material background ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; }
.cta-band__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cta-band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(20,19,18,.82);
}

/* ---------- 11. Service cards & icons ---------- */
.grid { display: grid; gap: var(--s-4); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid { gap: var(--s-5); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.icon { width: 40px; height: 40px; stroke: currentColor; fill: none; }

.card {
  position: relative;
  /* A whisper of a surface gradient: the top 40% is pure white, the bottom
     settles a half-step toward cream. Reads as a lit plane rather than a
     flat swatch. Both stops are >= #FBFAF6 so body copy contrast is
     unchanged (charcoal on #FBFAF6 = 15.3:1 vs 16.3:1 on pure white). */
  background: linear-gradient(180deg, #fff 0%, #fff 40%, #FBFAF6 100%);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  box-shadow: var(--elev-1);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
/* the orange reads as a structural edge, not a fill */
.card::before {
  content: "";
  position: absolute;
  left: -2px; top: -2px;
  width: 4px; height: 0;
  background: var(--orange);
  transition: height .22s ease;
  z-index: 1;
}
/* Inner top highlight — a 1px hairline of light along the top inside edge,
   which is what makes a card look like a physical panel catching light
   rather than a rectangle with a shadow underneath it. Decorative only. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(33,32,31,.045);
}
.card:hover, .card:focus-within {
  border-color: var(--rule-strong);
  box-shadow: var(--elev-3);
  transform: translateY(-2px);
}
.card:hover::before, .card:focus-within::before { height: 56px; }

/* On the dark side the highlight has to invert or it glows. */
.why .card::after,
.section--dark .card::after {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.25);
}
.why .card, .section--dark .card { background: var(--surface-dark-2); }

.card__icon { color: var(--charcoal); margin-bottom: var(--s-4); }
.card:hover .card__icon, .card:focus-within .card__icon { color: var(--orange-deep); }
.card__num {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: .12em;
  color: var(--orange-deep);
  margin: 0 0 var(--s-2);
}
.card h3 { margin-bottom: var(--s-3); }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--orange-deep); }
.card p { font-size: var(--step--1); color: var(--charcoal-80); margin-bottom: var(--s-4); }
.card__link {
  margin-top: auto;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--orange-deep);
  border-bottom: 2px solid var(--orange);
  align-self: flex-start;
  padding-bottom: 2px;
}
.card__link:hover { color: var(--charcoal); border-color: var(--charcoal); }

/* dark variant used in the why-choose-us band */
.why .card { background: var(--ink-panel); border-color: var(--ink-line); color: var(--on-dark); box-shadow: none; }
.why .card p { color: var(--on-dark); }
.why .card__num { color: var(--on-dark-accent); }
.why .card__icon { color: var(--on-dark-accent); }
.why .card:hover { border-color: #5e5a55; transform: translateY(-2px); }

/* ---------- 12. Service detail sections ---------- */
.service-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); max-width: none; }
.service-nav li { margin: 0; }
.service-nav a {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--charcoal);
  background: #fff;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
}
.service-nav a:hover { border-color: var(--orange); color: var(--orange-deep); }
.service-nav .icon { width: 20px; height: 20px; }

.service {
  padding-block: var(--s-8);
  border-top: 2px solid var(--rule);
  scroll-margin-top: 92px;
}
.service__head { margin-bottom: var(--s-6); }
.service__head h2 { display: flex; align-items: center; gap: var(--s-4); }
.service__head h2 .icon { width: 44px; height: 44px; color: var(--orange-deep); flex: none; }
.service__index {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: .14em;
  color: var(--orange-deep);
  margin: 0 0 var(--s-2);
}

/* Expertise block — the substantive depth per service */
.depth { margin-block: var(--s-6); display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .depth { grid-template-columns: repeat(2, 1fr); } }
.depth__item {
  border-left: 3px solid var(--rule-strong);
  padding-left: var(--s-5);
}
.depth__item h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: var(--s-3);
}
.depth__item p { font-size: var(--step--1); color: var(--charcoal-80); margin-bottom: 0; }
.depth__item + .depth__item { }

.service__cols { display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .service__cols { grid-template-columns: repeat(2, 1fr); } }

.scope { border: 2px solid var(--rule); border-radius: var(--radius); background: #fff; padding: var(--s-5); }
.scope--in  { border-left: 6px solid var(--orange); }
.scope--out { border-left: 6px solid var(--charcoal); background: var(--cream-deep); }
.scope h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
}
.scope--in  h3 { color: var(--orange-deep); }
.scope--out h3 { color: var(--charcoal); }
.scope ul { margin: 0; padding-left: 1.1em; font-size: var(--step--1); max-width: none; }
.scope li { color: var(--charcoal-80); }

.trade-flag {
  margin-top: var(--s-5);
  font-size: var(--step--1);
  background: var(--cream-deep);
  border-left: 5px solid var(--orange);
  padding: var(--s-3) var(--s-4);
  color: var(--charcoal);
  max-width: none;
}
.trade-flag strong { letter-spacing: .08em; text-transform: uppercase; font-size: var(--step--2); }

.service__meta {
  margin-top: var(--s-5);
  font-size: var(--step--1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  align-items: center;
  max-width: none;
}
.related {
  margin-top: var(--s-5);
  font-size: var(--step--1);
  color: var(--charcoal-80);
  max-width: none;
}

/* ---------- 13. FAQ ---------- */
.faq { display: grid; gap: var(--s-3); max-width: 78ch; }
.faq details {
  background: #fff;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 0;
}
.faq details[open] { border-color: var(--rule-strong); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--charcoal);
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 14px; height: 9px;
  margin-top: 8px;
  background: var(--orange-deep);
  clip-path: polygon(0 0, 50% 100%, 100% 0, 72% 0, 50% 55%, 28% 0);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--orange-deep); }
.faq .faq__a { padding: 0 var(--s-5) var(--s-5); }
.faq .faq__a p { font-size: var(--step--1); color: var(--charcoal-80); margin-bottom: var(--s-3); }
.faq .faq__a p:last-child { margin-bottom: 0; }

/* ---------- 14. Gallery / before-after slider ---------- */
.ba {
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
}
.ba h3 { font-size: var(--step-1); margin-bottom: var(--s-3); }
.ba__meta { margin-top: var(--s-4); font-size: var(--step--1); color: var(--charcoal-80); }
.ba__meta p { margin: 0 0 var(--s-2); max-width: none; }
.ba__meta p:last-child { margin-bottom: 0; }
.ba__story { margin-top: var(--s-4); border-top: 2px solid var(--rule); padding-top: var(--s-4); }
.ba__story dt {
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 3px;
}
.ba__story dd { margin: 0 0 var(--s-3); font-size: var(--step--1); color: var(--charcoal-80); }
.ba__story dd:last-child { margin-bottom: 0; }

/* The comparison slider.
   Accessible pattern: a real <input type="range"> is the control, so it is
   keyboard-operable and announced; the visual handle is decorative. */
.ba-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-deeper);
  --pos: 50%;
  touch-action: pan-y;
}
.ba-slider__layer { position: absolute; inset: 0; }
.ba-slider__layer > * { width: 100%; height: 100%; }
.ba-slider__layer img { object-fit: cover; }
.ba-slider__layer--after { clip-path: inset(0 0 0 var(--pos)); }
/* Both layers hold identical empty frames until real photos land, so without a
   tint difference the slider reads as a rendering glitch rather than a control. */
.ba-slider__layer--after .imgframe {
  background-color: #ded5bd;
  border-style: solid;
}
.ba-slider .imgframe { border-width: 0; height: 100%; }
.ba-slider .imgframe::before, .ba-slider .imgframe::after { display: none; }
.ba-slider .imgframe__hint { display: none; }

.ba-slider__badge {
  position: absolute;
  top: 12px;
  z-index: 3;
  background: var(--charcoal);
  color: var(--cream);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius);
  pointer-events: none;
}
.ba-slider__badge--before { left: 12px; }
/* Deep Orange, not Orange: this label is small text, so it needs 4.5:1.
   White on --orange is 3.81:1 and fails; on --orange-deep it is 5.4:1. */
.ba-slider__badge--after  { right: 12px; background: var(--orange-deep); color: #fff; }

.ba-slider__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: var(--cream);
  box-shadow: 0 0 0 1px rgba(33,32,31,.35);
  z-index: 4;
  pointer-events: none;
}
.ba-slider__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  background: var(--cream);
  border: 3px solid var(--charcoal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.ba-slider__grip::before, .ba-slider__grip::after {
  content: "";
  width: 9px; height: 13px;
  background: var(--charcoal);
}
.ba-slider__grip::before { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.ba-slider__grip::after  { clip-path: polygon(0 0, 0 100%, 100% 50%); }

/* the actual control */
.ba-slider__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;          /* invisible but present, focusable and draggable */
  cursor: ew-resize;
  appearance: none;
  background: transparent;
}
.ba-slider__range::-webkit-slider-thumb { appearance: none; width: 60px; height: 100%; cursor: ew-resize; }
.ba-slider__range::-moz-range-thumb { width: 60px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ba-slider__range:focus-visible ~ .ba-slider__divider .ba-slider__grip {
  outline: 3px solid var(--orange-deep);
  outline-offset: 3px;
}
.ba-slider__range:focus-visible { outline: none; }
.ba-slider:has(.ba-slider__range:focus-visible) { outline: 3px solid var(--orange-deep); outline-offset: 3px; }

.ba-slider__hint {
  font-size: var(--step--2);
  color: var(--charcoal-60);
  margin: var(--s-2) 0 0;
  max-width: none;
}

/* ---------- 15. Testimonials & trust blocks ---------- */
.quote {
  background: #fff;
  border: 2px solid var(--rule);
  border-left: 6px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.quote blockquote { margin: 0 0 var(--s-4); font-size: var(--step-0); }
.quote figcaption { font-size: var(--step--1); color: var(--charcoal-80); }

.aside-block {
  background: var(--cream-deep);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.aside-block h2, .aside-block h3 { font-size: var(--step-1); margin-bottom: var(--s-4); }
.aside-block dl { margin: 0; font-size: var(--step--1); }
.aside-block dt {
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--charcoal-60);
  margin-top: var(--s-4);
}
.aside-block dt:first-child { margin-top: 0; }
.aside-block dd { margin: 5px 0 0; }
.aside-block ol, .aside-block ul { font-size: var(--step--1); }

/* Author / owner attribution — authoritativeness */
.author {
  display: grid;
  gap: var(--s-5);
  background: var(--cream-deep);
  border: 2px solid var(--rule);
  border-left: 6px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--s-5);
}
@media (min-width: 680px) { .author { grid-template-columns: 116px 1fr; align-items: start; } }
.author__photo { width: 116px; }
.author__photo .imgframe { padding: var(--s-2); }
.author__photo .imgframe__label { font-size: 9px; letter-spacing: .1em; padding: 2px 5px; }
.author__photo .imgframe::before, .author__photo .imgframe::after { display: none; }
.author h2, .author h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.author__role {
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: var(--s-3);
}
.author p { font-size: var(--step--1); margin-bottom: var(--s-3); }
.author p:last-child { margin-bottom: 0; }

.step-list { list-style: none; counter-reset: step; margin: 0; padding: 0; max-width: none; display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .step-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .step-list { grid-template-columns: repeat(4, 1fr); } }
.step-list li {
  counter-increment: step;
  position: relative;
  padding-top: var(--s-5);
  border-top: 3px solid var(--charcoal);
  margin: 0;
}
.step-list li::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: .1em;
  color: var(--orange-deep);
  display: block;
  margin-bottom: var(--s-2);
}
.step-list h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.step-list p { font-size: var(--step--1); color: var(--charcoal-80); margin: 0; }

/* ---------- 16. Contact form ---------- */
.form-layout { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .form-layout { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); } }

.form-note {
  background: var(--cream-deep);
  border-left: 5px solid var(--orange);
  padding: var(--s-4) var(--s-5);
  font-size: var(--step--1);
  margin-bottom: var(--s-6);
}
.form-note p { margin: 0; max-width: none; }

.field { margin-bottom: var(--s-5); }
.field label {
  display: block;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.field .req { color: var(--orange-deep); }
.field .hint {
  display: block;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--charcoal-60);
  margin-top: 4px;
}

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--charcoal);
  background: #fff;
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-3);
  line-height: 1.4;
}
textarea { min-height: 150px; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--charcoal) 50%),
                    linear-gradient(135deg, var(--charcoal) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
input:hover, select:hover, textarea:hover { border-color: var(--charcoal-60); }

.radio-set { border: 2px solid var(--rule-strong); border-radius: var(--radius); background: #fff; padding: var(--s-4) var(--s-4) var(--s-2); margin: 0; }
.radio-set legend { font-size: var(--step--2); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; padding: 0 6px; }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-3); }
.radio-row label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--step-0); font-weight: 400; letter-spacing: 0; text-transform: none; margin: 0; cursor: pointer; }
.radio-row input[type="radio"] { width: 20px; height: 20px; accent-color: var(--orange); margin: 0; }

.error-msg { display: none; color: #93220a; font-size: var(--step--1); font-weight: 600; margin-top: 6px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea, .field.is-invalid .radio-set {
  border-color: #93220a; background: #fff6f3;
}
.field.is-invalid .error-msg { display: block; }

.form-summary {
  display: none;
  border: 2px solid #93220a;
  background: #fff6f3;
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  color: #74190a;
}
.form-summary.is-visible { display: block; }
.form-summary h2 { font-size: var(--step-1); margin: 0 0 var(--s-2); color: #74190a; }
.form-summary ul { margin: 0; padding-left: 1.2em; font-size: var(--step--1); }
.form-summary a { color: #74190a; }

.form-success { border: 2px solid var(--charcoal); border-left: 8px solid var(--orange); background: #fff; border-radius: var(--radius); padding: var(--s-6) var(--s-5); }
.form-success[hidden] { display: none; }
.form-success h2 { margin-bottom: var(--s-3); }
.form-success__check { font-family: var(--font-display); font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-deep); margin: 0 0 var(--s-3); }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-note-min { margin-top: var(--s-4); }

/* ---------- 17. Breadcrumbs ---------- */
.crumbs { font-size: var(--step--2); padding-top: var(--s-5); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; max-width: none; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--s-2); color: var(--charcoal-60); }
.crumbs li + li::before { content: "/"; color: var(--rule-strong); }
.crumbs a { color: var(--charcoal-60); text-decoration: none; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.crumbs a:hover { color: var(--orange-deep); text-decoration: underline; }
.crumbs [aria-current="page"] { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--charcoal); }

/* ---------- 18. Page head ---------- */
.page-head { padding-block: var(--s-6) var(--s-7); }
.page-head h1 { max-width: 20ch; }
.page-head p.lede { margin-bottom: 0; }

/* ---------- 19. Footer ---------- */
.site-footer { background: var(--charcoal); color: var(--on-dark); padding-block: var(--s-8) var(--s-5); font-size: var(--step--1); }
.site-footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-7); } }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--s-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer a { color: var(--on-dark-accent); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .brand { padding: 0; margin-bottom: var(--s-4); gap: 13px; }
.site-footer img { height: 46px; width: auto; }
.site-footer .brand__word .w1 { color: var(--cream); font-size: var(--step-2); }
.site-footer .brand__word .w2 { color: var(--on-dark-accent); }
.site-footer p { max-width: 42ch; }
.site-footer__bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-line);
  font-size: var(--step--2);
  color: #a19c94;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}
.site-footer__bottom p { margin: 0; max-width: none; }

/* ---------- 19b. Trust strip & service-area list ---------- */
.trust-strip {
  background: var(--cream-deep);
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
}
.trust-strip p { max-width: none; }

.area-list {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  max-width: none;
  display: grid;
  gap: var(--s-2) var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .area-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .area-list { grid-template-columns: repeat(3, 1fr); } }
.area-list li {
  margin: 0;
  padding-left: var(--s-5);
  position: relative;
  font-size: var(--step--1);
}
.area-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 8px;
  background: var(--orange-deep);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 72% 100%, 50% 45%, 28% 100%);
}

/* A .service section may also carry .section--alt for banding — the texture
   pseudo-element must sit behind the section's own border-top. */
.service.section--alt { border-top-color: var(--rule-strong); }

/* ---------- 20. Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }
.center .btn-row { justify-content: center; }
.stack-lg > * + * { margin-top: var(--s-7); }
.sprite { display: none; }

/* ==========================================================================
   20. PILL COMPONENT LIBRARY
   ==========================================================================
   Full class API, usage rules and the contrast table live in
   assets/css/COMPONENTS.md. Read that before writing pill markup.

   .btn is untouched and still works everywhere it already is. .pill is a
   NEW parallel component. .btn.btn--pill is an opt-in alias that lends pill
   geometry to existing .btn markup without changing its colours.

   ---- THE GLYPH-BAND ARITHMETIC (why the gloss stops are where they are) --
   A pill is 19px / line-height 1.2 / padding-block var(--s-4):
     line box  = 19 x 1.2                = 22.8px
     height    = 16 + 22.8 + 16          = 54.8px
   Inter 800 cap-height is ~0.727em = 13.8px, vertically centred in the line
   box, so painted glyph pixels live between:
     cap top    = 16 + (22.8 - 13.8)/2   = 20.5px = 37.4% of height
     cap bottom = 20.5 + 13.8            = 34.3px = 62.6% of height
   The specular ::before is a 180deg gradient. The brief's stops
   (.34 at 0%, .10 at 42%, transparent 62%) put alpha .125 directly behind
   the top of the caps, which drags the neutral glass label from 5.61:1 down
   to 4.24:1 and the orange one to 3.74:1 — i.e. the gloss itself becomes the
   contrast bug. So the stops are pulled in to
     .34 at 0%, .09 at 30%, transparent 46%
   which keeps the same bright top edge (the .34 peak is entirely above the
   cap line) but leaves only alpha .048 over the glyph band. Verified below.
   Do not move the 30% / 46% stops. The 0% peak is free to move — hover
   raises it and contrast is unaffected, which is exactly why it is the
   variable that animates.

   ---- COMPOSITE CONTRAST, worst case -------------------------------------
   backdrop-filter cannot guarantee a luminance floor: a blown-out white
   pixel in hero-texture.jpg stays blown out after blurring. So every number
   below composites the tint over #FFFFFF, the worst backdrop that exists,
   then composites the gloss on top, then measures the label.

     .pill--glass            rgba(28,27,26,.72) over #FFF  -> #5C5B5A
                             + gloss .048                  -> #646362
                             label #FCF9F0                 = 5.69:1  PASS
     .pill--glass.pill--accent
                             rgba(180,75,7,.96) over #FFF  -> #B75211
                             + gloss .048                  -> #BA5A1D
                             label #FFFFFF                 = 4.60:1  PASS
     .pill--glass.pill--quiet  same tint as neutral        = 5.69:1  PASS
     .pill--solid.pill--accent #DB5B08 + gloss .041        -> #DC6212
                             label #FFFFFF                 = 3.62:1  PASS
                             (large text: 19px/800 is over the 18.66px bold
                              threshold, so the bar is 3:1. Identical regime
                              to .btn--primary's 3.81:1, which is locked.)
     .pill--solid.pill--ink  #21201F + gloss .041          -> #282726
                             label #FCF9F0                 = 14.16:1 PASS
     .pill--solid.pill--outline
                             #21201F on #FCF9F0            = 15.45:1 PASS
                             hover #FCF9F0 on #21201F      = 15.45:1 PASS

   NOTE on the accent glass tint: the brief suggested rgba(219,91,8,.86).
   That composites to #E0722B and yields 3.18:1 against white — it only
   clears the large-text bar, and by a thinner margin than the solid button
   it sits next to. Moving the tint to --orange-deep at .96 buys full 4.5:1
   AA at any size while still reading orange. --orange-deep is a locked
   brand colour, so this is inside the brand, not a re-derivation.
   ========================================================================== */

.pill {
  /* The two gloss knobs. Only --pill-gloss-peak animates; --pill-gloss-mid
     is the one that sits over the glyphs and is therefore frozen. */
  --pill-gloss-peak: .34;
  --pill-gloss-mid:  .09;
  --pill-ring:       var(--on-dark-accent);
  --pill-ring-sep:   var(--charcoal);

  position: relative;
  isolation: isolate;            /* keeps the z-index:-1 pseudos inside      */
  overflow: hidden;              /* clips the gloss layers to the radius     */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: 19px;               /* AA floor for white-on-orange. LOCKED.    */
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  padding: var(--s-4) var(--s-7);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease-out-expo);
}

/* Layer 1 — specular highlight along the top. */
.pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                   /* under the text, over the fill           */
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255,255,255,var(--pill-gloss-peak)) 0%,
    rgba(255,255,255,var(--pill-gloss-mid))  30%,
    rgba(255,255,255,0)                      46%);
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* Layer 2 — the inner hairline ring. Bright top edge + dark bottom edge is
   the whole illusion: it is what a curved glass surface does to light. */
.pill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                   /* declared after ::before, so it paints on top */
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0  1px 0 var(--glass-hairline-top),
    inset 0 -1px 0 var(--glass-hairline-bottom);
  transition: box-shadow var(--dur) var(--ease);
}

/* Plain text children work — the pseudo-elements are at z-index -1 and the
   text node paints at z-index 0 inside the pill's own stacking context.
   .pill__label is supported for markup that prefers an explicit span. */
.pill__label { position: relative; z-index: 1; }
.pill .icon { width: 20px; height: 20px; flex: none; position: relative; z-index: 1; }

/* Opt-in geometry alias for existing .btn markup. Colours stay .btn's. */
.btn--pill {
  border-radius: var(--radius-pill);
  padding-inline: var(--s-7);
}
.btn--pill.btn--sm { padding: var(--s-3) var(--s-6); }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }


/* ---------- 20a. .pill--glass — busy / dark backdrops ONLY ----------------
   Legitimate homes: .hero (over hero-texture.jpg), .cta-band (over
   cta-material-band.jpg), .site-header.is-scrolled. Nowhere else.
   On flat cream there is nothing behind it to refract and it just reads as
   a washed-out grey lozenge — use .pill--solid there. */
.pill--glass {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  /* 5.69:1 worst case — see the table above. This alpha is the safety
     mechanism, not a style choice. Do not lower it. */
  background-color: var(--glass-tint-dark);
  color: var(--cream);
  box-shadow: var(--elev-2);
}

/* Orange glass. rgba(180,75,7,.96) over #FFF -> #B75211, +gloss -> #BA5A1D,
   #FFFFFF label = 4.60:1 PASS (full AA, not just large-text). */
.pill--glass.pill--accent {
  background-color: rgba(180,75,7,.96);
  color: #fff;
}

/* Lower-emphasis glass: same protective tint, but the emphasis comes off
   via a visible hairline instead of fill weight, and it sits flat.
   Label contrast is identical to neutral glass: 5.69:1 PASS. */
.pill--glass.pill--quiet {
  background-color: var(--glass-tint-dark);
  color: var(--cream);
  box-shadow: var(--elev-0);
  --pill-gloss-peak: .20;
}
.pill--glass.pill--quiet::after {
  box-shadow:
    inset 0 0 0 1.5px rgba(252,249,240,.42),
    inset 0  1px 0 var(--glass-hairline-top),
    inset 0 -1px 0 var(--glass-hairline-bottom);
}


/* ---------- 20b. .pill--solid — flat cream / flat white backgrounds ------- */
.pill--solid.pill--accent {
  /* poured enamel, not a flat rectangle */
  background-color: var(--orange);
  color: #fff;                   /* #FFF on #DC6212 = 3.62:1, large-text PASS */
  box-shadow: var(--elev-2);
  --pill-gloss-peak: .26;
  --pill-gloss-mid:  .07;
}
.pill--solid.pill--accent::before {
  background: linear-gradient(180deg,
    rgba(255,255,255,var(--pill-gloss-peak)) 0%,
    rgba(255,255,255,var(--pill-gloss-mid))  30%,
    rgba(255,255,255,0)                      48%);
}
.pill--solid.pill--accent::after {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.18);
}

.pill--solid.pill--ink {
  background-color: var(--charcoal);
  color: var(--cream);           /* #FCF9F0 on #282726 = 14.16:1 PASS */
  box-shadow: var(--elev-2);
  --pill-gloss-peak: .20;
  --pill-gloss-mid:  .055;
}
.pill--solid.pill--ink::before {
  background: linear-gradient(180deg,
    rgba(255,255,255,var(--pill-gloss-peak)) 0%,
    rgba(255,255,255,var(--pill-gloss-mid))  30%,
    rgba(255,255,255,0)                      48%);
}
.pill--solid.pill--ink::after {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.45);
}

/* No gloss on the outline pill — a highlight on a transparent fill reads as
   a smudge. 15.45:1 both directions.
   The padding is reduced by the border width so an outline pill is exactly
   the same height as a filled one when they sit side by side in a .pill-row.
   (.pill itself carries no border, because a transparent border would open a
   2px gap between the gloss layers and the pill edge.) */
.pill--solid.pill--outline {
  background-color: transparent;
  color: var(--charcoal);
  border: 2px solid var(--charcoal);
  padding: calc(var(--s-4) - 2px) calc(var(--s-7) - 2px);
  box-shadow: var(--elev-0);
}
.pill--solid.pill--outline::before,
.pill--solid.pill--outline::after { display: none; }
.pill--solid.pill--outline:hover { background-color: var(--charcoal); color: var(--cream); }


/* ---------- 20c. States — all five, visually distinct -------------------- */

/* :hover — lift + elevation + the gloss PEAK brightens. The peak stop sits
   above the cap line, so brightening it cannot move the label contrast. */
.pill:hover { transform: translateY(-1px); }
.pill--glass:hover,
.pill--solid.pill--accent:hover,
.pill--solid.pill--ink:hover { box-shadow: var(--elev-3); }
.pill:hover { --pill-gloss-peak: .46; }
/* #bd4f06 is the same hover value .btn--primary already uses.
   #FFFFFF on #bd4f06 = 4.90:1 — hover is a contrast IMPROVEMENT, not a loss. */
.pill--solid.pill--accent:hover { --pill-gloss-peak: .36; background-color: #bd4f06; }
.pill--solid.pill--ink:hover    { --pill-gloss-peak: .30; background-color: #2c2a28; }
.pill--glass:hover::after {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(0,0,0,.34);
}
.pill--solid.pill--outline:hover { transform: translateY(-1px); box-shadow: var(--elev-2); }

/* :active — settles back down, elevation drops, gloss dims. Pressed glass. */
.pill:active {
  transform: translateY(0);
  box-shadow: var(--elev-1);
  --pill-gloss-peak: .14;
}
.pill--glass:active::after {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.42),
    inset 0  2px 6px rgba(0,0,0,.24);
}
.pill--solid.pill--accent:active { background-color: #b44b07; }

/* :focus-visible — a ring, not a glow.
   Dual-tone by design: the 3px offset gap is filled with a charcoal ring via
   box-shadow, and the outline itself is --on-dark-accent sitting immediately
   outside it. Whatever is behind the pill, one of the two always clears 3:1:
     #ff9d52 against charcoal           =  7.90:1
     #21201F against a white photo px   = 16.27:1
     #21201F against cream              = 15.45:1
   so the ring survives the hero photograph at any exposure. */
.pill:focus-visible {
  outline: 3px solid var(--pill-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--pill-ring-sep), var(--elev-3);
}
/* On flat light backgrounds the roles swap: orange-deep reads (5.05:1 on
   cream) and the separator is cream so it detaches from the pill fill. */
.pill--solid {
  --pill-ring: var(--orange-deep);
  --pill-ring-sep: var(--cream);
}
/* ...but a solid pill dropped into a dark section needs the dark-side ring. */
.section--dark .pill--solid,
.site-footer .pill--solid,
.hero .pill--solid,
.cta-band .pill--solid {
  --pill-ring: var(--on-dark-accent);
  --pill-ring-sep: var(--charcoal);
}

/* Disabled.
   Do NOT express this as opacity on an orange fill — #DB5B08 at .5 over
   cream lands near 2.6:1 against a white label. Instead the fill is swapped
   for a specific desaturated colour with a specific label colour:
     light side  #21201F on #CFC9BA = 9.85:1 PASS
     glass/dark  #FCF9F0 on #56534C = 7.29:1 PASS
   Gloss and motion are removed so the control reads inert. */
.pill[disabled],
.pill[aria-disabled="true"],
.pill.is-disabled {
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--elev-0);
  --pill-gloss-peak: 0;
  --pill-gloss-mid: 0;
  background-color: #CFC9BA;
  color: var(--charcoal);
  border-color: transparent;
  filter: saturate(.25);
}
.pill[disabled]::before,
.pill[aria-disabled="true"]::before,
.pill.is-disabled::before { display: none; }
.pill[disabled]::after,
.pill[aria-disabled="true"]::after,
.pill.is-disabled::after {
  box-shadow: inset 0 0 0 1px rgba(33,32,31,.14);
}
.pill--glass[disabled],
.pill--glass[aria-disabled="true"],
.pill--glass.is-disabled,
.section--dark .pill[disabled],
.section--dark .pill[aria-disabled="true"],
.section--dark .pill.is-disabled,
.hero .pill[disabled],
.hero .pill[aria-disabled="true"],
.hero .pill.is-disabled,
.cta-band .pill[disabled],
.cta-band .pill[aria-disabled="true"],
.cta-band .pill.is-disabled {
  background-color: #56534C;
  color: var(--cream);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.pill[disabled]:hover,
.pill[aria-disabled="true"]:hover,
.pill.is-disabled:hover { transform: none; box-shadow: var(--elev-0); }


/* ---------- 20d. Fallbacks & user preferences ---------------------------- */

/* No backdrop-filter (older Firefox, some embedded webviews): keep the gloss,
   drop the transparency. The tint alphas were already computed against the
   worst-case backdrop, so going fully opaque only ever IMPROVES contrast:
     #FCF9F0 on #21201F = 15.45:1, #FFFFFF on #B44B07 = 5.32:1. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pill--glass                  { background-color: var(--charcoal); }
  .pill--glass.pill--accent     { background-color: var(--orange-deep); }
  .pill--glass.pill--quiet      { background-color: var(--surface-dark-2); }
  .site-header.is-scrolled      { background-color: var(--cream); }
}

/* Reduced transparency: same solid treatment, and the blur comes off too. */
@media (prefers-reduced-transparency: reduce) {
  .pill--glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--charcoal);
  }
  .pill--glass.pill--accent { background-color: var(--orange-deep); }
  .pill--glass.pill--quiet  { background-color: var(--surface-dark-2); }
  .site-header.is-scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--cream);
  }
}

/* Reduced motion. The global block near the top of this file already clamps
   transition-duration to ~0, so this block's job is the things duration does
   not fix: transforms and the sheen sweep. Colour and elevation still change
   on hover, so hover is never signalled by colour alone. */
@media (prefers-reduced-motion: reduce) {
  .pill:hover,
  .pill:active,
  .pill--solid.pill--outline:hover { transform: none; }
  .pill__sheen { display: none; }
  .pill { transition: background-color 1ms linear, color 1ms linear, box-shadow 1ms linear; }
}

/* Optional sheen sweep — a narrow band of light crossing the pill on hover.
   Motion-gated, and it lives entirely in the top 46% where the gloss already
   is, so it cannot touch the glyph band or the measured contrast. */
@media (prefers-reduced-motion: no-preference) {
  .pill--glass::before,
  .pill--solid.pill--accent::before,
  .pill--solid.pill--ink::before {
    background-image:
      linear-gradient(105deg,
        rgba(255,255,255,0)    38%,
        rgba(255,255,255,.16)  47%,
        rgba(255,255,255,0)    56%),
      linear-gradient(180deg,
        rgba(255,255,255,var(--pill-gloss-peak)) 0%,
        rgba(255,255,255,var(--pill-gloss-mid))  30%,
        rgba(255,255,255,0)                      46%);
    background-repeat: no-repeat, no-repeat;
    background-size: 220% 46%, 100% 100%;
    background-position: 160% 0, 0 0;
    transition: background-position var(--dur-slow) var(--ease-out-expo),
                background var(--dur) var(--ease);
  }
  .pill--glass:hover::before,
  .pill--solid.pill--accent:hover::before,
  .pill--solid.pill--ink:hover::before { background-position: -60% 0, 0 0; }
}


/* ==========================================================================
   21. SECTION EDGES — .edge-diag, .chevron-rule
   ==========================================================================
   Lets a dark section meet a cream section on a shallow angle instead of a
   hard horizontal line. Put .edge-diag on the section that supplies the
   COLOUR of the wedge, then pick the side. The wedge is decorative and
   pointer-events: none, so it never eats a click on the band underneath. */
.edge-diag {
  position: relative;
  isolation: isolate;
  --edge-h: 56px;
  --edge-fill: var(--cream);
}
@media (min-width: 900px) { .edge-diag { --edge-h: 88px; } }

.edge-diag--top::before,
.edge-diag--bottom::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--edge-h);
  background: var(--edge-fill);
  pointer-events: none;
  z-index: 1;
}
/* wedge descends left-to-right, matching the -45deg family of the motif */
.edge-diag--top::before {
  top: 0;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}
.edge-diag--bottom::after {
  bottom: 0;
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 100% 100%);
}
/* colour helpers so markup does not have to write inline custom properties */
.edge-diag--from-cream { --edge-fill: var(--cream); }
.edge-diag--from-alt   { --edge-fill: var(--cream-deep); }
.edge-diag--from-dark  { --edge-fill: var(--charcoal); }
.edge-diag--from-white { --edge-fill: #fff; }

/* Hairline of orange riding the diagonal — used sparingly, once per page. */
.edge-diag--lit.edge-diag--top::before,
.edge-diag--lit.edge-diag--bottom::after {
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--orange) 50%, transparent calc(50% + 1.5px)),
    var(--edge-fill);
}

/* Chevron rule — the logo's arrow mark repeated as a rule. Distinct from
   .slash-rule, which is a diagonal hatch: this one has a direction. */
.chevron-rule {
  height: 12px;
  border: 0;
  margin: 0;
  background-color: transparent;
  background-image:
    linear-gradient(135deg, var(--charcoal) 25%, transparent 25%),
    linear-gradient(225deg, var(--charcoal) 25%, transparent 25%);
  background-size: 14px 12px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  opacity: .45;
}
.chevron-rule--orange {
  background-image:
    linear-gradient(135deg, var(--orange) 25%, transparent 25%),
    linear-gradient(225deg, var(--orange) 25%, transparent 25%);
  opacity: .9;
}
.chevron-rule--light {
  background-image:
    linear-gradient(135deg, var(--cream) 25%, transparent 25%),
    linear-gradient(225deg, var(--cream) 25%, transparent 25%);
  opacity: .32;
}
.chevron-rule--lg { height: 20px; background-size: 24px 20px; }

/* Strengthened slash family — a second, offset pass gives the hatch depth
   instead of the flat single-frequency stripe it was. */
.slash-rule {
  background-image:
    repeating-linear-gradient(-45deg, var(--charcoal) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, transparent 0 4px, rgba(33,32,31,.22) 4px 5px, transparent 5px 18px);
}
.slash-rule--orange {
  background-image:
    repeating-linear-gradient(-45deg, var(--orange) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(180,75,7,.35) 5px 6px, transparent 6px 22px);
}
.slash-accent {
  background-image:
    repeating-linear-gradient(-45deg, var(--orange) 0 3px, transparent 3px 10px),
    repeating-linear-gradient(-45deg, transparent 0 4px, rgba(180,75,7,.4) 4px 5px, transparent 5px 20px);
}


/* ==========================================================================
   22. SCROLL-REVEAL HOOKS
   ==========================================================================
   Contract with Agent 8's JS:
     1. The FIRST thing the script does is add class "js" to <html>.
     2. It then observes [data-reveal] and adds .is-revealed when in view.
   Everything below is written so that content is NEVER permanently
   invisible: the hidden state only applies inside html.js, so if the script
   404s, throws, or is blocked, every [data-reveal] element renders normally.
   Belt and braces — the no-JS safety net is stated twice, positively and
   negatively. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo) var(--reveal-delay, 0ms),
    transform var(--dur-slow) var(--ease-out-expo) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.js [data-reveal].is-revealed,
html:not(.js) [data-reveal] {
  opacity: 1;
  transform: none;
}
/* Stagger. Markup sets the custom property; the attribute is the hook Agent 8
   reads if it wants to compute the delay instead:
     <li data-reveal data-reveal-delay="2" style="--reveal-delay:120ms"> */
[data-reveal-delay="1"] { --reveal-delay:  60ms; }
[data-reveal-delay="2"] { --reveal-delay: 120ms; }
[data-reveal-delay="3"] { --reveal-delay: 180ms; }
[data-reveal-delay="4"] { --reveal-delay: 240ms; }
[data-reveal-delay="5"] { --reveal-delay: 300ms; }
[data-reveal-delay="6"] { --reveal-delay: 360ms; }

/* Never animate content into view for someone who asked us not to. Note the
   !important: without it the html.js rule above wins on specificity and the
   content sits at opacity 0 until the observer fires. */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal].is-revealed,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}


/* ==========================================================================
   23. STICKY HEADER GLASS STATE
   ==========================================================================
   Contract with Agent 9: the script toggles .is-scrolled on .site-header
   once the page has scrolled past ~8px. No other class is needed; the
   unscrolled header is the existing opaque-cream design and is unchanged.

   The tint is rgba(252,249,240,.95). Worst backdrop under a sticky header is
   a charcoal section sliding beneath it, which composites to #F1EEE6:
     nav link  #21201F on #F1EEE6 = 14.03:1  PASS
     current   #B44B07 on #F1EEE6 =  4.59:1  PASS  (small text, needs 4.5)
   .92 was tried first and gives the current-page link only 4.33:1, which
   fails. Do not lower this alpha below .95. */
.site-header {
  transition:
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  background-color: var(--glass-tint-light);
  box-shadow: var(--elev-2);
  border-bottom-color: var(--charcoal);
}
/* the bottom hairline — a lit edge under the 2px charcoal rule */
.site-header.is-scrolled::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: rgba(255,255,255,.7);
  pointer-events: none;
}


/* ==========================================================================
   24. MICRO-INTERACTIONS
   ==========================================================================
   Underline-grow and edge-slide. Every one of these has a visible
   :focus-visible ring; none of them signals state with colour alone. */

/* .card__link — the underline grows from the left rather than appearing. */
.card__link {
  position: relative;
  border-bottom: 0;
  padding-bottom: 3px;
  transition: color var(--dur) var(--ease);
}
.card__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--orange);
  transform: scaleX(.34);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out-expo), background-color var(--dur) var(--ease);
}
.card__link:hover::after,
.card__link:focus-visible::after,
.card:hover .card__link::after,
.card:focus-within .card__link::after { transform: scaleX(1); }
.card__link:hover { color: var(--charcoal); }
.card__link:hover::after { background: var(--charcoal); }
.card__link:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 3px; }

/* .service-nav a — an orange edge slides in from the left. */
.service-nav a {
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.service-nav a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur) var(--ease-out-expo);
}
.service-nav a:hover::before,
.service-nav a:focus-visible::before { transform: scaleY(1); }
.service-nav a:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 3px; }

/* .hero__services a — same edge-slide, tuned for the dark side. */
.hero__services a { position: relative; overflow: hidden; }
.hero__services a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--on-dark-accent);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur) var(--ease-out-expo);
}
.hero__services a:hover::before,
.hero__services a:focus-visible::before { transform: scaleY(1); }
.hero__services a:focus-visible { outline: 3px solid var(--on-dark-accent); outline-offset: 3px; }

/* .faq summary — hovering lifts a faint warm wash and nudges the chevron.
   The wash is rgba(219,91,8,.05) over #fff = #FEF7F2; charcoal on that is
   15.9:1, so body contrast is untouched. */
.faq summary {
  position: relative;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq summary:hover { background-color: rgba(219,91,8,.05); }
.faq summary::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease-out-expo);
}
.faq summary:hover::before,
.faq details[open] > summary::before { transform: scaleY(1); }
.faq summary:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: -3px; }
.faq details { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.faq details:hover { box-shadow: var(--elev-1); }
.faq details[open] { box-shadow: var(--elev-1); }

/* Footer links — underline grows instead of flicking on. */
.site-footer a {
  position: relative;
  transition: color var(--dur) var(--ease);
}
.site-footer li a::after,
.site-footer__bottom a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out-expo);
}
.site-footer li a:hover,
.site-footer li a:focus-visible { text-decoration: none; }
.site-footer li a:hover::after,
.site-footer li a:focus-visible::after,
.site-footer__bottom a:hover::after,
.site-footer__bottom a:focus-visible::after { transform: scaleX(1); }
.site-footer a:focus-visible { outline: 3px solid var(--on-dark-accent); outline-offset: 3px; }

/* Header nav links get the same treatment, charcoal side. */
@media (min-width: 900px) {
  .site-nav a { position: relative; }
  .site-nav a:not([aria-current="page"])::after {
    content: "";
    position: absolute;
    left: var(--s-3); right: var(--s-3); bottom: 6px;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--ease-out-expo);
  }
  .site-nav a:hover::after,
  .site-nav a:focus-visible::after { transform: scaleX(1); }
}

/* ---------- 21. Integrator additions (post-agent-pass) ----------
   Gaps reported by the page agents. Each replaces an inline-style workaround. */

/* .center centres text and .btn-row but not .pill-row — reported by agents 2,3,4,5,6. */
.center .pill-row,
.pill-row--center { justify-content: center; }

/* Elevated spec-sheet variant of .aside-block (about.html credentials,
   contact.html right rail). Replaces inline box-shadow + border-left. */
.spec-panel {
  border-left: 6px solid var(--orange);
  box-shadow: var(--elev-1);
}
.spec-panel--raised { box-shadow: var(--elev-2); }

/* A .service carries border-top, which draws a hard line straight across a top
   wedge and reads as a rendering bug. Reset it when the two are combined. */
.service.edge-diag--top { border-top: 0; }

/* #i-scope at .icon's default 40px blows out a small h3. */
.scope h3 .icon,
.ba__meta .icon { width: 24px; height: 24px; flex: none; }

/* Tighten the project index eyebrow inside a gallery card. */
.ba .eyebrow { margin-bottom: var(--s-2); }
/* Spec labels should read as a key column, not as body text. */
.ba__meta strong { color: var(--charcoal); }

/* Balance the two punctuation marks inside a .service__head. */
.service__head .chevron-rule,
.service__head .slash-accent { margin-block: var(--s-3) var(--s-4); }

/* Sticky right rail on the contact page at desktop widths. */
@media (min-width: 900px) {
  .form-layout > .rail-sticky { position: sticky; top: 100px; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .form-layout > .rail-sticky { position: static; }
}

/* ---------- 22. Short-site layout (3-page version) ---------- */

/* Compact service card: icon + name + one line. */
.card--compact { padding: var(--s-5); }
.card--compact .card__icon { margin-bottom: var(--s-3); }
.card--compact h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.card--compact p { margin-bottom: 0; }
.card[id] { scroll-margin-top: 100px; }
#work, #services { scroll-margin-top: 84px; }

/* Chevron-tick bullet list. Default = on dark (#ff9d52 tick, --on-dark text 11.0:1). */
.check-list {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: grid; gap: var(--s-4) var(--s-7);
  grid-template-columns: 1fr;
  font-size: var(--step-1);
}
@media (min-width: 760px) { .check-list { grid-template-columns: repeat(2, 1fr); } }
.check-list li { position: relative; margin: 0; padding-left: var(--s-6); line-height: 1.45; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 16px; height: 11px;
  background: var(--on-dark-accent);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 72% 100%, 50% 45%, 28% 100%);
}
.section--dark .check-list li { color: var(--on-dark); }
/* On light: charcoal text, deep-orange tick (5.05:1 on cream). */
.check-list--light { grid-template-columns: 1fr !important; font-size: var(--step-0); gap: var(--s-3); margin-bottom: var(--s-5); }
.check-list--light li { color: var(--charcoal); }
.check-list--light li::before { background: var(--orange-deep); }

/* Photo grid on the home page. */
.photo-grid .imgframe { box-shadow: var(--elev-1); }

/* ---------- 23. Minimal layout ---------- */
.hero--min { padding-block: var(--s-10); min-height: min(78vh, 720px); display: flex; align-items: center; }
.hero--min .wrap { width: 100%; }
.hero--min h1 { max-width: 14ch; margin-bottom: var(--s-4); }
.hero--min .hero__tagline { margin-bottom: var(--s-6); }
.hero--min .pill-row { margin-top: 0; }
.hero--min .hero__contactline { margin-top: var(--s-6); font-size: var(--step-0); }

.min-title { font-size: var(--step-4); margin-bottom: var(--s-7); }

.svc-list {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: grid; gap: 0; grid-template-columns: 1fr;
  border-top: 2px solid var(--charcoal);
}
@media (min-width: 640px) { .svc-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-7); } }
@media (min-width: 960px) { .svc-list { grid-template-columns: repeat(3, 1fr); } }
.svc-list li {
  display: flex; align-items: center; gap: var(--s-4);
  margin: 0; padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-display); font-size: var(--step-1); letter-spacing: -0.01em;
  scroll-margin-top: 100px;
}
.svc-list .icon { width: 32px; height: 32px; color: var(--orange-deep); flex: none; }
.svc-list li > div { min-width: 0; }
.svc-list__link { display: inline-block; margin-top: var(--s-2); font-family: var(--font-body); font-size: var(--step--1); font-weight: 800; text-underline-offset: .25em; }

.photo-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
/* Quiet empty photo slot. #4a4847 on #EBE4D2 = 7.3:1. */
.photo-slot {
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-deeper);
  color: var(--charcoal-80);
  font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--radius);
}
.photo-slot--square { aspect-ratio: 1 / 1; }

.work-intro { max-width: 42rem; margin: 0 0 var(--s-6); color: var(--charcoal-80); }
.project-grid { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.project-card { overflow: hidden; background: var(--cream); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.project-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--charcoal); }
.project-pair figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-deeper); }
.project-pair img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-pair figcaption { position: absolute; left: .7rem; bottom: .7rem; padding: .3rem .55rem; background: var(--charcoal); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.project-card__body { padding: var(--s-4); }
.project-card__body h3 { margin: 0 0 var(--s-2); font-family: var(--font-display); font-size: var(--step-1); }
.project-card__body p { margin: 0; font-size: var(--step--1); line-height: 1.6; }
.work-cta { margin: var(--s-6) 0 0; font-weight: 800; }
.work-cta a { text-decoration-thickness: 2px; text-underline-offset: .3em; }

.about-min { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) { .about-min { grid-template-columns: .8fr 1.2fr; gap: var(--s-9); } }

.facts { list-style: none; margin: var(--s-6) 0; padding: 0; max-width: 40rem; border-top: 1px solid var(--rule-strong); }
.facts li { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule-strong); }
.facts li > span:first-child { min-width: 7rem; font-size: var(--step--1); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal); }

.form-note-min { font-size: var(--step--1); color: var(--charcoal-80); margin-bottom: var(--s-5); }
.field-row { display: grid; gap: 0 var(--s-5); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.contact-min h2 { font-size: var(--step-2); }
@media (min-width: 900px) { .contact-min { padding-top: var(--s-9); } }

/* Service detail pages. */
.service-hero { padding-block: var(--s-9); }
.service-hero__grid { display: grid; gap: var(--s-7); align-items: end; }
.service-hero h1 { max-width: 14ch; }
.service-hero .lede { max-width: 47rem; }
.service-hero__aside { border-top: 2px solid var(--charcoal); padding-top: var(--s-4); max-width: 20rem; }
.service-hero__aside p:last-child { margin: var(--s-2) 0 0; line-height: 1.6; }
@media (min-width: 900px) { .service-hero__grid { grid-template-columns: minmax(0, 1.75fr) minmax(14rem, .6fr); } }
.service-detail-grid { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .service-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service-detail { border-top: 2px solid var(--charcoal); padding-top: var(--s-4); }
.service-detail h3 { margin-bottom: var(--s-3); font-size: var(--step-2); }
.service-detail p { margin: 0; line-height: 1.65; }
.service-project { display: grid; gap: var(--s-6); align-items: center; }
.service-project__copy { max-width: 35rem; }
.service-project__copy p:last-child { line-height: 1.65; }
.service-project__pair { border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) { .service-project { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .service-project--reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.service-next__grid { display: grid; gap: var(--s-7); }
.service-next h2 { max-width: 12ch; }
.service-next p { max-width: 37rem; line-height: 1.65; }
.service-next aside { border-top: 2px solid var(--charcoal); padding-top: var(--s-4); }
.service-next aside h3 { font-size: var(--step-1); }
.service-related { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.service-related li { border-bottom: 1px solid var(--rule-strong); margin: 0; }
.service-related a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; font-weight: 700; text-underline-offset: .2em; }
@media (min-width: 900px) { .service-next__grid { grid-template-columns: minmax(0, 1.4fr) minmax(14rem, .6fr); } }

.footer-min { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); }
.footer-min nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-5); margin: 0; padding: 0; }
.footer-min nav li { margin: 0; }
.footer-min p { margin: 0; }
.site-footer--min { padding-block: var(--s-7) var(--s-5); }

/* Real project photo galleries — October 2026. */
.work-photo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--s-5); }
.work-photo { margin: 0; min-width: 0; }
.work-photo__link { display: block; overflow: hidden; border-radius: var(--radius); background: var(--cream-deeper); }
.work-photo picture { display: block; aspect-ratio: 4 / 3; }
.work-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-photo__link:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 4px; }
.work-photo figcaption { padding-top: var(--s-3); font-size: var(--step-0); font-weight: 700; }
.work-photo-note { margin: var(--s-5) 0 0; font-size: var(--step--1); color: var(--charcoal-80); }
.work-photo-grid--portrait picture { aspect-ratio: 3 / 4; }
@media (min-width: 640px) { .work-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .work-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .work-photo-grid--portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 54rem; } }

/* Dedicated portfolio page. */
.portfolio-links { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: var(--s-6); padding-block: var(--s-4); border-block: 1px solid var(--rule-strong); }
.portfolio-links a, .portfolio-prompt a { font-weight: 700; text-underline-offset: .25em; }
.portfolio-links a { padding-block: .5rem; }
.portfolio-prompt { padding-top: var(--s-6); }
.work-gallery[id] { scroll-margin-top: 80px; }
.work-gallery:nth-of-type(even) { background: var(--cream-deeper); }