/* =========================================================================
   Patrwmau — shared stylesheet. Every page loads this single file. No build
   step, no preprocessor: keep it in plain CSS with custom properties.

   Visual system: "patrwmau" means patterns in Welsh. Everything is built
   from garment pattern-making marks (grainline arrows, notches, drill
   holes, dimension lines, pattern-piece outlines) and from the motion of
   making something by hand: rules and underlines are stitch lines that
   sew themselves in, closed by a machine that never rushes.
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- Design tokens ---------- */
:root {
  --color-burgundy: #752138;
  --color-burgundy-dark: #5c1a2c;
  --color-cream: #FEFBDD;
  --color-cream-dim: #F6F1C9;
  --color-gold: #B7A44F;
  --color-gold-bright: #CBB962;
  --color-ink: #1A1A1A;
  --color-ink-muted: rgba(26, 26, 26, 0.62);
  --color-line: rgba(26, 26, 26, 0.16);
  --color-line-on-burgundy: rgba(254, 251, 221, 0.28);

  /* --muted is the one token every "secondary text" rule should use.
     It flips to a cream tone inside .band-burgundy (see below), so no
     component can accidentally render dark, low-contrast text on
     burgundy again — the bug class we hit last round. */
  --muted: var(--color-ink-muted);
  --stitch: var(--color-burgundy);

  --font-display: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --content-max: 92rem;
  --measure: 36rem;
  --gutter: 1.25rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.6rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --stitch-speed: 0.6s;
}

@media (min-width: 640px) { :root { --gutter: 2rem; } }
@media (min-width: 1000px) { :root { --gutter: 3.25rem; } }
@media (min-width: 1440px) { :root { --gutter: 4.5rem; } }

html { color-scheme: light; overflow-x: hidden; }

body {
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 0.98;
  color: var(--color-ink);
}
h1 { font-size: clamp(3rem, 4.4vw + 1.4rem, 6.75rem); font-weight: 800; }
h2 { font-size: clamp(2.1rem, 2.6vw + 1.2rem, 3.6rem); font-weight: 700; }
h3 { font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); font-weight: 600; }

p { max-width: 46rem; }
p + p { margin-top: var(--space-2); }
.measure { max-width: var(--measure); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-burgundy);
  margin-bottom: var(--space-2);
}
.band-burgundy .eyebrow { color: var(--color-gold-bright); }

a { text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:not(.btn):hover { text-decoration-color: var(--color-gold); }

:focus-visible { outline: 2px solid var(--color-burgundy); outline-offset: 3px; }
.band-burgundy :focus-visible, .site-footer :focus-visible { outline-color: var(--color-gold-bright); }

/* ---------- Page-navigation stitch sweep (CSS View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pm-page-out 0.4s var(--ease) forwards; }
::view-transition-new(root) { animation: pm-page-in 0.4s var(--ease) forwards; }
@keyframes pm-page-out { to { clip-path: inset(0 0 0 100%); } }
@keyframes pm-page-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) { animation-duration: 0s !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---------- Pattern sprite icons ---------- */
.pm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pm-icon { display: inline-block; flex: none; }
.pm-icon-drill { width: 0.5rem; height: 0.5rem; color: currentColor; opacity: 0.55; }

.pm-rule { display: block; width: 100%; color: var(--color-line); }
.pm-rule-tick { height: 0.9rem; color: var(--color-line); }
.band-burgundy .pm-rule-tick { color: var(--color-line-on-burgundy); }
.pm-rule-grainline { height: 1.1rem; color: var(--color-gold); opacity: 0.85; }
.band-burgundy .pm-rule-grainline { color: var(--color-gold-bright); }
.pm-rule.reveal { clip-path: inset(0 100% 0 0); transition: clip-path 0.8s var(--ease), opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.pm-rule.reveal.is-visible { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .pm-rule.reveal { clip-path: inset(0 0 0 0) !important; transition: none !important; } }

/* ---------- Stitch lines: the core motion language ----------
   A stitch is a dashed thread texture (background-image, fixed px dash/gap
   so density stays constant regardless of length) revealed by scaling in
   from the left, like a machine sewing along the line. Reduced-motion
   shows the finished seam immediately. */
.pm-stitch-base {
  background-image: repeating-linear-gradient(to right, currentColor 0 5px, transparent 5px 9px);
  background-repeat: no-repeat;
}
.pm-stitch {
  display: block;
  width: 100%;
  height: 2px;
  color: var(--stitch);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--stitch-speed) linear;
}
.pm-stitch-base { color: var(--stitch); }
.pm-stitch { background-image: repeating-linear-gradient(to right, currentColor 0 5px, transparent 5px 9px); }
.band-burgundy { --stitch: var(--color-gold-bright); }
.reveal.is-visible .pm-stitch,
.reveal .pm-stitch.is-visible { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .pm-stitch { transform: scaleX(1) !important; transition: none !important; }
}

/* Hover-triggered stitch underline, used on nav links and text links */
.stitch-hover { position: relative; }
.stitch-hover::after {
  content: '';
  position: absolute;
  left: 0; bottom: -0.3rem;
  width: 100%; height: 2px;
  background-image: repeating-linear-gradient(to right, currentColor 0 5px, transparent 5px 9px);
  color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s linear;
}
.stitch-hover:hover::after, .stitch-hover:focus-visible::after, .stitch-hover.is-current::after { transform: scaleX(1); }
.band-burgundy .stitch-hover::after { color: var(--color-gold-bright); }

/* ---------- Cutting-mat grid, cream sections ---------- */
.band-cream {
  background-color: var(--color-cream);
  background-image:
    linear-gradient(rgba(117, 33, 56, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 33, 56, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* ---------- Pinking-shear edges ----------
   A shallow saw-tooth clipped into the top or bottom edge only, max 10px
   deep. The point order matters: it has to walk the element's perimeter
   in one consistent direction (here, clockwise from top-left) or the
   polygon self-intersects and renders as huge crossing diagonals instead
   of a fine zigzag — that was the previous bug. Top: zigzag left-to-right
   along the top, then straight down the right edge, straight across the
   bottom, implicit close up the left edge. Bottom: straight across the
   top, straight down the right edge, then the zigzag right-to-left along
   the bottom, implicit close up the left edge — the zigzag has to run
   opposite directions on the two variants so it's always the very next
   segment after arriving at that corner, never a jump across the box. */
.pm-pinked-top {
  clip-path: polygon(0.0% 0px, 4.545% 10px, 9.091% 0px, 13.636% 10px, 18.182% 0px, 22.727% 10px, 27.273% 0px, 31.818% 10px, 36.364% 0px, 40.909% 10px, 45.455% 0px, 50.0% 10px, 54.545% 0px, 59.091% 10px, 63.636% 0px, 68.182% 10px, 72.727% 0px, 77.273% 10px, 81.818% 0px, 86.364% 10px, 90.909% 0px, 95.455% 10px, 100.0% 0px, 100% 100%, 0% 100%);
}
.pm-pinked-bottom {
  clip-path: polygon(0% 0%, 100% 0%, 100.0% calc(100% - 0px), 95.455% calc(100% - 10px), 90.909% calc(100% - 0px), 86.364% calc(100% - 10px), 81.818% calc(100% - 0px), 77.273% calc(100% - 10px), 72.727% calc(100% - 0px), 68.182% calc(100% - 10px), 63.636% calc(100% - 0px), 59.091% calc(100% - 10px), 54.545% calc(100% - 0px), 50.0% calc(100% - 10px), 45.455% calc(100% - 0px), 40.909% calc(100% - 10px), 36.364% calc(100% - 0px), 31.818% calc(100% - 10px), 27.273% calc(100% - 0px), 22.727% calc(100% - 10px), 18.182% calc(100% - 0px), 13.636% calc(100% - 10px), 9.091% calc(100% - 0px), 4.545% calc(100% - 10px), 0.0% calc(100% - 0px));
}

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--space-5); position: relative; }
.section-tight { padding-block: var(--space-4); }
.hairline { border: 0; border-top: 1px solid var(--color-line); }

/* ---------- Colour rhythm: burgundy bands ---------- */
.band-burgundy {
  background: var(--color-burgundy);
  color: var(--color-cream);
  /* This is the actual fix for the recurring burgundy-text-contrast bug:
     every "muted/secondary text" component below reads var(--muted), and
     this line is what makes that resolve to cream instead of dark ink
     inside a burgundy band. A previous pass refactored components to use
     var(--muted) but never added this override, so --muted silently kept
     resolving to the :root (dark) value everywhere, including here. If
     text still looks dark on a burgundy band after this, the component
     is using --color-ink/--color-ink-muted directly instead of --muted —
     grep style.css for "color-ink" and fix at the source. */
  --muted: rgba(254, 251, 221, 0.78);
  position: relative;
  overflow: hidden;
}
.band-burgundy h1, .band-burgundy h2, .band-burgundy h3, .band-burgundy h4 { color: var(--color-cream); }
.band-burgundy p { color: rgba(254, 251, 221, 0.9); }
.band-burgundy .hairline { border-top-color: var(--color-line-on-burgundy); }
.band-cream { position: relative; overflow: hidden; }
.band-burgundy > .wrap, .band-cream > .wrap { position: relative; z-index: 1; }

/* Real pattern-piece watermarks, sourced note in README/footer */
.pm-watermark { position: absolute; pointer-events: none; z-index: 0; opacity: 0.09; }
.band-burgundy .pm-watermark { opacity: 0.13; }
.pm-watermark--a { width: 30%; min-width: 260px; }
.pm-watermark--b { width: 32%; min-width: 280px; }
.pm-watermark--c { width: 26%; min-width: 230px; }
.pm-watermark--right { right: -4%; }
.pm-watermark--left { left: -4%; }
.pm-watermark--top { top: -8%; }
.pm-watermark--bottom { bottom: -10%; }
.pm-watermark--rotate { transform: rotate(-8deg); }
.pm-watermark--rotate-r { transform: rotate(10deg); }
@media (max-width: 640px) {
  .pm-watermark { opacity: 0.06; }
  .band-burgundy .pm-watermark { opacity: 0.09; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.85em 1.6em;
  border: 1px solid var(--color-burgundy);
  border-radius: 0;
  background: transparent;
  color: var(--color-burgundy);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.btn-primary { background: var(--color-burgundy); color: var(--color-cream); }
.btn-primary:hover { background: var(--color-burgundy-dark); border-color: var(--color-burgundy-dark); transform: translateY(-1px); }
.btn-secondary:hover { background: var(--color-burgundy); color: var(--color-cream); transform: translateY(-1px); }
.band-burgundy .btn { border-color: var(--color-cream); color: var(--color-cream); }
.band-burgundy .btn-primary { background: var(--color-cream); color: var(--color-burgundy); }
.band-burgundy .btn-primary:hover { background: var(--color-gold-bright); border-color: var(--color-gold-bright); color: var(--color-burgundy); }
.band-burgundy .btn-secondary:hover { background: var(--color-cream); color: var(--color-burgundy); }

/* Button border stitches itself in on hover */
.btn__stitch {
  position: absolute;
  inset: 3px;
  border: 1.5px dashed currentColor;
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  transition: opacity 0.15s var(--ease), clip-path 0.5s var(--ease);
  pointer-events: none;
}
.btn:hover .btn__stitch, .btn:focus-visible .btn__stitch { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
@media (prefers-reduced-motion: reduce) { .btn__stitch { transition: opacity 0.15s linear; } }

.link-arrow { position: relative; text-decoration: none; font-weight: 600; padding-bottom: 0.2em; }
.link-arrow::after {
  content: '';
  position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background-image: repeating-linear-gradient(to right, currentColor 0 5px, transparent 5px 9px);
  color: var(--color-gold);
  transform: scaleX(1);
}
.link-arrow:hover { color: var(--color-burgundy); }
.band-burgundy .link-arrow::after { color: var(--color-gold-bright); }
.band-burgundy .link-arrow:hover { color: var(--color-gold-bright); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-cream); border-bottom: 1px solid var(--color-line); }
.site-header__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0.6rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-logo { transition: opacity 0.15s var(--ease); }
.site-logo:hover { opacity: 0.7; }
.site-logo img { height: clamp(3.4rem, 5vw + 1.6rem, 6.5rem); width: auto; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--color-burgundy);
  padding: 0.5em 0.9em; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-burgundy);
  cursor: pointer;
}

.site-nav { display: flex; align-items: center; gap: var(--space-4); }
.site-nav__list { display: flex; gap: var(--space-3); align-items: center; }
.site-nav__list a { font-size: 0.95rem; font-weight: 600; text-decoration: none; padding-bottom: 0.35rem; }
.site-nav__list a.is-current { font-weight: 700; }

@media (max-width: 780px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-cream); border-bottom: 1px solid var(--color-line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-3);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s;
  }
  .site-nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .site-nav__list a { display: block; width: 100%; padding: 0.85rem 0; border-bottom: 1px solid var(--color-line); }
  .site-nav__cta { margin-top: var(--space-2); align-self: flex-start; }
}
@media (min-width: 781px) { .nav-toggle { display: none; } }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-4); color: var(--muted); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); justify-content: space-between; margin-top: var(--space-3); }
.site-footer .site-logo img { height: 2.4rem; width: auto; }
.site-footer__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 0.9rem; }
.site-footer__meta a { text-decoration: none; }
.site-footer__meta a:hover { text-decoration: underline; text-decoration-color: var(--color-gold); color: var(--color-burgundy); }
.site-footer__copyright { width: 100%; font-size: 0.8rem; padding-top: var(--space-2); border-top: 1px solid var(--color-line); margin-top: var(--space-1); }
.site-footer__credit { width: 100%; font-size: 0.72rem; opacity: 0.75; margin-top: 0.3rem; }
.site-footer__credit a { text-decoration: underline; text-decoration-color: var(--color-line); }
.site-footer__credit a:hover { color: var(--color-burgundy); text-decoration-color: var(--color-gold); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-5) var(--space-4); }
.hero__grid { display: grid; gap: var(--space-4); align-items: center; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.hero__figure { margin-top: var(--space-4); }
.hero h1 { max-width: 20ch; }
.hero p { line-height: 1.7; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.5fr 1fr; } }

/* ---------- Image slots ---------- */
figure.img-slot { position: relative; background: var(--color-cream-dim); border: 1px solid var(--color-line); overflow: hidden; }
figure.img-slot::before { content: ''; display: block; padding-top: calc(100% / (var(--ratio, 1.3))); }
figure.img-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
figure.img-slot.has-image img { opacity: 1; }
figure.img-slot .img-slot__label { position: absolute; left: 0.9rem; bottom: 0.9rem; right: 0.9rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-burgundy); opacity: 0.65; }
figure.img-slot.has-image .img-slot__label { display: none; }
figure.img-slot::after { content: ''; position: absolute; inset: 0; }
figure.img-slot:not(.has-image)::after { background-image: repeating-linear-gradient(135deg, rgba(117, 33, 56, 0.08) 0, rgba(117, 33, 56, 0.08) 1px, transparent 1px, transparent 13px); }
figure figcaption:not(.img-slot__label) { margin-top: 0.65rem; font-size: 0.85rem; color: var(--muted); }
.band-burgundy figure.img-slot { background: rgba(254, 251, 221, 0.08); border-color: var(--color-line-on-burgundy); }
.band-burgundy figure.img-slot .img-slot__label { color: var(--color-cream); }
.band-burgundy figure.img-slot:not(.has-image)::after { background-image: repeating-linear-gradient(135deg, rgba(254, 251, 221, 0.1) 0, rgba(254, 251, 221, 0.1) 1px, transparent 1px, transparent 13px); }
figure.img-slot:hover img { transform: scale(1.035); }
figure.img-slot:hover { border-color: var(--color-burgundy); }
.band-burgundy figure.img-slot:hover { border-color: var(--color-gold-bright); }
a.img-slot-link { display: block; text-decoration: none; }
a.img-slot-link:hover figcaption:not(.img-slot__label) { color: var(--color-burgundy); }

/* ---------- Services list (home compact + services full) ---------- */
.service-list { margin-top: var(--space-3); }
.service-row {
  position: relative;
  display: grid;
  gap: 0.35rem 2rem;
  padding: var(--space-3) 0.75rem calc(var(--space-3) + 8px);
  margin-inline: -0.75rem;
  border-top: 1px solid var(--color-line);
  transition: background-color 0.15s var(--ease);
}
.service-row:last-child { border-bottom: 1px solid var(--color-line); }
.service-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.service-row__name { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; transition: color 0.15s var(--ease), transform 0.15s var(--ease); }
.service-row__price { position: relative; font-size: 0.9rem; font-weight: 600; color: var(--color-burgundy); white-space: nowrap; transition: color 0.15s var(--ease); }
.service-row__price::before, .service-row__price::after { content: ''; position: absolute; top: 50%; width: 1.5px; height: 0; background: currentColor; transform: translateY(-50%); transition: height 0.3s var(--ease); }
.service-row__price::before { left: -8px; }
.service-row__price::after { right: -8px; }
.service-row:hover .service-row__price::before, .service-row:hover .service-row__price::after { height: 10px; }
.service-row__desc { color: var(--muted); max-width: 40rem; }

.pm-dimension { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 4px; height: 8px; pointer-events: none; }
.pm-dimension::before {
  content: '';
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(to right, var(--color-burgundy) 0 5px, transparent 5px 9px),
    linear-gradient(var(--color-burgundy), var(--color-burgundy)),
    linear-gradient(var(--color-burgundy), var(--color-burgundy));
  background-position: center, left center, right center;
  background-size: 100% 2px, 2px 100%, 2px 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s linear;
}
.band-burgundy .pm-dimension::before {
  background-image:
    repeating-linear-gradient(to right, var(--color-gold-bright) 0 5px, transparent 5px 9px),
    linear-gradient(var(--color-gold-bright), var(--color-gold-bright)),
    linear-gradient(var(--color-gold-bright), var(--color-gold-bright));
}
.service-row:hover .pm-dimension::before { transform: scaleX(1); }

a.service-row { text-decoration: none; color: inherit; cursor: pointer; }
a.service-row:hover { background: rgba(117, 33, 56, 0.05); }
a.service-row:hover .service-row__name { color: var(--color-burgundy); transform: translateX(0.3rem); }
a.service-row:hover .service-row__price { color: var(--color-gold); }
.service-row:not(a):hover { background: rgba(117, 33, 56, 0.035); }
.service-list--names .service-row__name { font-size: clamp(1.6rem, 2.4vw + 1rem, 2.6rem); }
.band-burgundy .service-row { border-top-color: var(--color-line-on-burgundy); }
.band-burgundy .service-row:last-child { border-bottom-color: var(--color-line-on-burgundy); }
.band-burgundy a.service-row:hover { background: rgba(254, 251, 221, 0.08); }
.band-burgundy a.service-row:hover .service-row__name { color: var(--color-gold-bright); }
.band-burgundy a.service-row:hover .service-row__price, .band-burgundy .service-row__price { color: var(--color-gold-bright); }

@media (min-width: 820px) {
  .service-row { grid-template-columns: minmax(0, 22rem) 1fr; align-items: baseline; }
  .service-row__head { display: contents; }
  .service-row__name { grid-column: 1; }
  .service-row__price { grid-column: 1; margin-top: 0.3rem; }
  .service-row__desc { grid-column: 2; grid-row: 1 / span 2; }
}

/* Stage block: number, body and its own service rows travel together */
.stage-block__rows { margin-top: var(--space-3); }
@media (min-width: 720px) { .stage-block__rows { padding-left: calc(6rem + 2rem); } }

/* ---------- Stage sequence (01–05) ---------- */
.stage-list { margin-top: var(--space-3); }
.stage { display: grid; gap: 0.4rem 2rem; padding-block: 1.1rem; border-top: 1px solid var(--color-line); }
.stage:last-child { border-bottom: 1px solid var(--color-line); }
.stage__number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 6vw, 5.5rem);
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.55;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--ease);
  text-shadow: 0.6px 0.5px 0 currentColor, -0.5px 0.3px 0 currentColor;
}
.reveal.is-visible .stage__number { clip-path: inset(0 0 0 0); }
.band-burgundy .stage__number { color: var(--color-gold-bright); opacity: 0.75; }
.stage__body h3 { margin-bottom: 0.3rem; }
.stage__body p { color: var(--muted); }
.band-burgundy .stage { border-top-color: var(--color-line-on-burgundy); }
.band-burgundy .stage:last-child { border-bottom-color: var(--color-line-on-burgundy); }
@media (min-width: 720px) { .stage { grid-template-columns: 6rem 1fr; align-items: center; } }
@media (prefers-reduced-motion: reduce) { .stage__number { clip-path: inset(0 0 0 0) !important; transition: none !important; } }

.stage-note { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-line); color: var(--muted); font-size: 0.95rem; }

/* Project status page: stage list with a done/current/upcoming state */
.stage--done { opacity: 0.55; }
.stage--done .stage__number { text-decoration: line-through; text-decoration-color: var(--color-gold); }
.stage--upcoming { opacity: 0.45; }
.stage--current { position: relative; padding-left: 0.75rem; margin-left: -0.75rem; }
.stage--current::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-gold); }
.stage-status-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border: 1px solid currentColor;
  color: var(--color-gold);
  margin-left: 0.75rem;
  vertical-align: middle;
}

/* ---------- Route cards (the four routes, Services full view) ---------- */
.routes-list { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.route-card { padding-top: var(--space-3); border-top: 1px solid var(--color-line); scroll-margin-top: 6rem; }
.band-burgundy .route-card { border-top-color: var(--color-line-on-burgundy); }
.route-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.75rem 1.5rem; }
.route-card__price { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-burgundy); white-space: nowrap; }
.band-burgundy .route-card__price { color: var(--color-gold-bright); }
.route-card__bullets { display: grid; gap: 0.45rem; padding-left: 1.2rem; }
.route-card__bullets li { list-style: disc; color: var(--muted); }
.route-card__note { font-size: 0.85rem; color: var(--muted); font-style: italic; }

/* ---------- Full price table ---------- */
.price-table-wrap { overflow-x: auto; margin-top: var(--space-3); }
table.price-table { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: 0.92rem; }
table.price-table th, table.price-table td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--color-line); }
table.price-table thead th { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--color-ink); }
table.price-table thead th:not(:first-child) { text-align: right; }
table.price-table td:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.price-table tr.price-table__group th {
  padding-top: 1.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-burgundy);
  border-bottom: 1px solid var(--color-line);
}
.price-table__note { color: var(--muted); font-weight: 400; }

/* ---------- Terms ---------- */
.terms-list { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 700px) { .terms-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); } }
.terms-item h3 { font-size: 1.1rem; }
.terms-item p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Pull-out ---------- */
.pullout { border-left: 3px solid var(--color-gold); padding: var(--space-2) 0 var(--space-2) var(--space-3); margin-block: var(--space-4); max-width: 46rem; }
.pullout p:first-child { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.2; }
.band-burgundy .pullout { border-left-color: var(--color-gold-bright); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--work { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid--work { grid-template-columns: repeat(3, 1fr); } }
.grid--two { grid-template-columns: 1fr; }
@media (min-width: 780px) { .grid--two { grid-template-columns: 1fr 1fr; } }
.grid--three { grid-template-columns: 1fr; }
@media (min-width: 780px) { .grid--three { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Case notes / testimonials placeholders ---------- */
.placeholder-block { border: 1px dashed var(--color-line); padding: var(--space-3); background: rgba(117, 33, 56, 0.03); }
.band-burgundy .placeholder-block { border-color: var(--color-line-on-burgundy); background: rgba(254, 251, 221, 0.05); }
.placeholder-block__tag { display: inline-block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-burgundy); margin-bottom: 0.6rem; }
.band-burgundy .placeholder-block__tag { color: var(--color-gold-bright); }

.testimonial { padding-block: var(--space-3); border-top: 1px solid var(--color-line); }
.testimonial:last-child { border-bottom: 1px solid var(--color-line); }
.testimonial blockquote { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.25; margin: 0; }
.testimonial cite { display: block; margin-top: 0.7rem; font-style: normal; font-size: 0.85rem; color: var(--muted); }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--space-2); max-width: 30rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
.field-input-wrap { position: relative; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--color-cream); border: 1px solid var(--color-ink);
  border-radius: 0; padding: 0.7em 0.8em; font-size: 1rem;
}
.field-input-wrap::after {
  content: '';
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px;
  background-image: repeating-linear-gradient(to right, currentColor 0 5px, transparent 5px 9px);
  color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s linear;
  pointer-events: none;
}
.field-input-wrap:focus-within::after { transform: scaleX(1); }
.band-burgundy .field input, .band-burgundy .field select, .band-burgundy .field textarea { background: transparent; border-color: var(--color-cream); color: var(--color-cream); }
.band-burgundy .field-input-wrap::after { color: var(--color-gold-bright); }
.field textarea { resize: vertical; min-height: 7rem; }
.field-hint { font-size: 0.8rem; color: var(--muted); margin-top: 0.35rem; }
.field-row { display: grid; gap: var(--space-2); }
@media (min-width: 640px) { .field-row--split { grid-template-columns: 1fr 1fr; } }

.field-checkbox {
  display: flex; align-items: flex-start; gap: 0.6em;
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.field-checkbox input[type="checkbox"] {
  width: 1.15em; height: 1.15em; margin-top: 0.15em; flex-shrink: 0;
  accent-color: var(--color-burgundy);
}
.band-burgundy .field-checkbox input[type="checkbox"] { accent-color: var(--color-gold-bright); }

.estimator-breakdown { display: grid; gap: 0.45rem; }
.estimator-breakdown__row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.95rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--color-line-on-burgundy);
}
.estimator-breakdown__row span:first-child { color: var(--muted); }
.estimator-breakdown__row span:last-child { font-weight: 600; white-space: nowrap; }
.estimator-breakdown__row--total {
  border-bottom: none; border-top: 1px solid var(--color-line-on-burgundy);
  font-size: 1.05rem; padding-top: 0.6rem; margin-top: 0.15rem;
}
.estimator-breakdown__row--total span:first-child { color: inherit; font-weight: 600; }

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

.form-capture { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 34rem; }
.form-capture .field { margin-bottom: 0; flex: 1 1 14rem; }
.form-capture .btn { flex: 0 0 auto; }

/* ---------- FAQ accordion ---------- */
.faq { margin-top: var(--space-3); max-width: 46rem; }
.faq details { border-top: 1px solid var(--color-line); padding-block: var(--space-2); }
.faq details:last-child { border-bottom: 1px solid var(--color-line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; transition: color 0.15s var(--ease); }
.faq summary:hover { color: var(--color-burgundy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-body); color: var(--color-gold); flex: none; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin-top: 0.85rem; color: var(--muted); }

/* ---------- Cal.com placeholder ---------- */
.cal-embed { border: 1px dashed var(--color-line-on-burgundy); padding: var(--space-4); text-align: left; color: rgba(254, 251, 221, 0.75); font-size: 0.9rem; }

/* ---------- Product grid scaffold ---------- */
.product-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Utility ---------- */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.section-head { display: grid; gap: var(--space-2) var(--space-4); max-width: none; }
.section-head > p { max-width: var(--measure); }
@media (min-width: 900px) { .section-head { grid-template-columns: minmax(14rem, 24rem) 1fr; align-items: start; } }
.section-head + * { margin-top: var(--space-4); }

/* ---------- Custom cursor (desktop, fine pointer only) ---------- */
@media (hover: hover) and (pointer: fine) {
  body.pm-cursor-on, body.pm-cursor-on a, body.pm-cursor-on button, body.pm-cursor-on input, body.pm-cursor-on select, body.pm-cursor-on textarea { cursor: none; }
}
.pm-cursor {
  position: fixed; top: 0; left: 0; width: 16px; height: 16px;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.pm-cursor.is-active { opacity: 0.9; }
.pm-cursor svg { width: 100%; height: 100%; }
.pm-cursor-dash {
  position: fixed; top: 0; left: 0;
  width: 7px; height: 2px;
  background: var(--color-gold);
  pointer-events: none; z-index: 9998;
  opacity: 0.65;
  transition: opacity 0.9s linear;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, a.service-row, figure.img-slot img { transition: none !important; }
}

/* ---------- Thank you states ---------- */
[data-thankyou-state] { display: none; }
[data-thankyou-state].is-active { display: block; }