/* ============================================================
   LEA BAE — shared design system
   Warm, earthy, gallery-quiet. Soft serif + clean sans.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Mulish:wght@300;400;500;600;700&display=swap');

:root{
  /* palette — crisp black & white, earthy red-clay accent */
  --paper:        oklch(1 0 0);
  --paper-2:      oklch(0.972 0 0);
  --paper-3:      oklch(0.955 0 0);
  --ink:          oklch(0.190 0 0);
  --ink-2:        oklch(0.400 0 0);
  --ink-3:        oklch(0.560 0 0);
  --line:         oklch(0.905 0 0);
  --line-2:       oklch(0.830 0 0);
  --accent:       oklch(0.565 0.130 38);   /* earthy red clay */
  --accent-deep:  oklch(0.475 0.125 36);
  --accent-tint:  oklch(0.935 0.040 45);
  --gold:         oklch(0.730 0.095 45);   /* light clay (CTA eyebrow) */
  --dark:         oklch(0.170 0 0);        /* CTA — near-black */
  --dark-2:       oklch(0.110 0 0);        /* footer — black */

  /* placeholder tones — light neutral grey */
  --ph-1: oklch(0.958 0 0);
  --ph-2: oklch(0.905 0 0);

  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Mulish', system-ui, -apple-system, sans-serif;

  --maxw: 1240px;
  /* The ceiling the whole layout stops growing at. --maxw caps the text
     column; this caps the full-bleed rows, which had no ceiling at all and
     so kept widening on a large display while their height did not. See
     .split-bleed. */
  --shell: 1600px;
  --gut: clamp(20px, 5vw, 72px);
  --r-sm: 9px;
  --r: 14px;
  --sh-sm: 0 1px 2px oklch(0 0 0 / .05);
  --sh: 0 18px 40px -24px oklch(0 0 0 / .16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;}

/* ---------- typography ---------- */
.kicker{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 22px;
}
.serif{font-family:var(--serif);}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.06;margin:0;letter-spacing:.004em;color:var(--ink);}
.d1{font-size:clamp(44px, 6.4vw, 92px);font-weight:500;}
.d2{font-size:clamp(34px, 4.6vw, 62px);}
.d3{font-size:clamp(28px, 3.2vw, 42px);}
.d4{font-size:clamp(23px, 2.2vw, 30px);}
em.acc{font-style:italic;color:var(--accent);}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--ink-2);font-weight:400;max-width:46ch;}
.body-copy{color:var(--ink-2);font-weight:400;}
.body-copy p{margin:0 0 1.1em;}
.small{font-size:14px;}
.muted{color:var(--ink-3);}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.section{padding:clamp(56px,8vw,120px) 0;}
.section.sm{padding:clamp(40px,5vw,72px) 0;}
.band{background:var(--paper-2);}
.band-3{background:var(--paper-3);}
.center{text-align:center;}
.mxa{margin-left:auto;margin-right:auto;}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;}
.split.t{align-items:flex-start;}
.split.lean-text{grid-template-columns:1.08fr 0.92fr;}
.split.lean-img{grid-template-columns:0.9fr 1.1fr;}
.split.tall-img{grid-template-columns:1fr 0.86fr;}
.eyebrow-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px);}

/* ---------- editorial layout primitives ---------- */
:root{ --edge: max(var(--gut), calc((min(100vw, var(--shell)) - var(--maxw)) / 2)); }

/* Full-bleed two-column: text holds the container line, image bleeds to the
   edge of the shell.
   
   The shell cap is what stops the photograph zooming in on a wide display.
   This row's width followed the viewport while .sb-img's height stopped at
   660px, so the slot kept getting wider and never taller: about 741x660 on a
   laptop, a near-square that crops a portrait gently, but 1882x660 on a 4K
   monitor - a 2.85:1 letterbox. object-fit:cover fills the width first, so at
   that shape a square photo is scaled to 1882 wide and then cropped to the
   middle third of its height, which is how the subject ends up outside the
   frame. Capping the row holds the slot near square at every size above it,
   so what you see on a laptop is what a 4K display gets too. */
.split-bleed{display:grid;grid-template-columns:1.02fr 0.98fr;align-items:center;width:100%;max-width:var(--shell);margin-inline:auto;}
.split-bleed > .sb-text{padding:clamp(24px,3vw,48px) clamp(28px,4vw,64px) clamp(24px,3vw,48px) var(--edge);}
.split-bleed > .sb-img{align-self:stretch;min-height:clamp(420px,52vw,660px);}
.split-bleed > .sb-img .ph{width:100%;height:100%;border-radius:0;border:0;box-shadow:none;}
.split-bleed.rev > .sb-text{order:2;padding:clamp(24px,3vw,48px) var(--edge) clamp(24px,3vw,48px) clamp(28px,4vw,64px);}
.split-bleed.rev > .sb-img{order:1;}
.hero-ed{padding-top:clamp(28px,4vw,52px);padding-bottom:0;}
.feature{padding:clamp(36px,5vw,80px) 0;}

/* masthead meta row */
.masthead{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:clamp(40px,6vw,84px);}
.masthead span{padding:18px 18px 18px 20px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);border-left:1px solid var(--line);}
.masthead span:first-child{border-left:0;padding-left:0;}

/* small meta eyebrow */
.eyebrow-meta{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 26px;}
.eyebrow-meta b{color:var(--accent);font-weight:600;}

/* figure numbers + captions */
.fignum{font-family:var(--serif);font-size:15px;color:var(--accent);letter-spacing:.08em;margin:0 0 14px;}
.fig{margin:0;}
.fig .figcap{margin-top:13px;font-size:12.5px;color:var(--ink-3);display:flex;gap:10px;align-items:baseline;letter-spacing:.02em;}
.fig .figcap .fignum{margin:0;font-size:13px;}

/* margin-rail: eyebrow sits in a narrow side column */
.rail{display:grid;grid-template-columns:clamp(110px,15vw,200px) 1fr;gap:clamp(24px,4vw,64px);align-items:start;}
.rail .rail-k{padding-top:7px;}
.rail .rail-k .kicker{margin:0;}

/* staggered editorial grid */
.stagger{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,30px);align-items:start;}
.stagger .s1{grid-column:1 / 6;}
.stagger .s2{grid-column:7 / 13;margin-top:clamp(48px,7vw,112px);}
.stagger .s3{grid-column:2 / 7;margin-top:clamp(20px,3vw,52px);}
.stagger .s4{grid-column:8 / 12;}

/* stat band with hairline dividers */
.statband{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(28px,4vw,52px);}
.statband .stat{padding:6px 0 6px 30px;border-left:1px solid var(--line);}
.statband .stat:first-child{padding-left:0;border-left:0;}
.statband .stat .n{font-family:var(--serif);font-size:clamp(38px,4.6vw,64px);font-weight:500;line-height:1;color:var(--ink);}
.statband .stat .l{font-size:13px;color:var(--ink-3);margin-top:10px;line-height:1.4;}

/* asymmetric CTA (full-bleed, left-aligned) */
.cta-ed{background:var(--dark);color:oklch(0.92 0 0);padding:clamp(56px,8vw,120px) 0;}
.cta-ed .kicker{color:var(--gold);}
.cta-ed h2{color:oklch(0.98 0 0);}
.cta-ed .lede{color:oklch(0.78 0 0);}
.cta-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(32px,5vw,80px);align-items:end;}
.cta-ed .btn{border-color:oklch(1 0 0 / .35);color:oklch(0.96 0 0);background:transparent;box-shadow:none;}
.cta-ed .btn:hover{background:oklch(1 0 0);color:var(--dark);border-color:oklch(1 0 0);}
.cta-ed .btn.solid{background:oklch(1 0 0);border-color:transparent;color:var(--dark);}
.cta-ed .btn.solid:hover{background:oklch(0.90 0 0);color:var(--dark);}

/* ---------- placeholders (refined) ---------- */
.ph{
  position:relative;
  background:
    radial-gradient(120% 90% at 30% 22%, oklch(1 0 0 / .6), transparent 60%),
    linear-gradient(142deg, var(--ph-1), var(--ph-2));
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:var(--r);border:1px solid oklch(0.90 0 0);
  box-shadow:var(--sh);
  color:var(--ink-2);
}
.ph::after{ display:none; }
/* filled slot: real photo replaces the placeholder art */
.ph[data-img-state="filled"]{background:none;border-color:oklch(0.90 0 0);}
/* The photo is wrapped in <picture> so a webp <source> can sit beside the
   jpeg <img>. display:contents makes the wrapper generate no box at all,
   so .ph is still the positioned ancestor the photo fills and still the
   flex container that centres the caption - the wrapper is invisible to
   layout, which is the whole reason it can be added without touching
   anything else here. */
.ph>picture{display:contents;}
.ph .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ph[data-img-state="filled"] .ph-cap{display:none;}
.split-bleed .sb-img .ph{position:relative;}
.ph .ph-cap{
  position:relative;z-index:1;text-align:center;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:oklch(0.42 0 0 / .6);font-weight:600;padding:0 16px;line-height:1.7;
}
.ph .ph-cap b{display:block;font-family:var(--serif);font-size:18px;letter-spacing:.02em;text-transform:none;font-weight:500;color:oklch(0.38 0 0 / .72);margin-bottom:3px;}
.ph.dark{--ph-1:oklch(0.34 0 0);--ph-2:oklch(0.24 0 0);}
.ph.dark .ph-cap,.ph.dark .ph-cap b{color:oklch(0.92 0 0 / .72);}

/* ---------- buttons (crisp B&W: white / black border) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  border:1px solid var(--ink);border-radius:var(--r-sm);
  padding:15px 26px;background:var(--paper);cursor:pointer;
  transition:background .22s cubic-bezier(.2,.7,.2,1), color .22s, border-color .22s;
}
.btn .arr{font-size:14px;letter-spacing:0;transition:transform .25s cubic-bezier(.2,.7,.2,1);}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn:hover .arr{transform:translateX(4px);}
.btn.solid{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn.solid:hover{background:oklch(0.34 0 0);border-color:oklch(0.34 0 0);color:var(--paper);}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink-2);}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn.lg{padding:17px 32px;font-size:12.5px;}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:34px;}
.textlink{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;border-bottom:1px solid transparent;padding-bottom:4px;transition:.3s;
}
.textlink .arr{transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.textlink:hover{border-bottom-color:var(--ink);}
.textlink:hover .arr{transform:translateX(5px);}

/* ---------- pills / chips ---------- */
.pillrow{display:flex;flex-wrap:wrap;gap:14px 30px;}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  border:0;border-radius:0;padding:0;
  font-size:14px;color:var(--ink-2);background:transparent;
}
.pill .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.chiprow{display:flex;flex-wrap:wrap;gap:26px;}
.chip{
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);border:0;border-radius:0;padding:6px 0;
  background:transparent;cursor:pointer;transition:color .25s;text-decoration:none;position:relative;
}
.chip::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .3s cubic-bezier(.2,.7,.2,1);}
.chip:hover{color:var(--ink);}
.chip:hover::after{right:0;}
.chip[aria-pressed="true"],.chip.active{color:var(--ink);background:transparent;}
.chip[aria-pressed="true"]::after,.chip.active::after{right:0;}
/* static tag variant (non-interactive) */
.tagrow{display:flex;flex-wrap:wrap;gap:9px;}
.tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 14px;}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:oklch(1 0 0 / .85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
/* The header rides the same rail as the full-bleed rows, not the narrower
   text column: --shell wide with --edge padding, which is exactly where
   .split-bleed > .sb-text starts. On a wide display the old --maxw/--gut
   pair put the wordmark ~72px inboard of the hero text below it, so the top
   of every page read as misaligned. Widening it also opens up the gap
   between the wordmark and the links, which were crowded at --maxw. */
.nav-in{max-width:var(--shell);margin:0 auto;padding:0 var(--edge);height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.wordmark{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:.10em;text-decoration:none;color:var(--ink);line-height:1;white-space:nowrap;}
.wordmark .reg{font-size:11px;vertical-align:super;letter-spacing:0;color:var(--ink-3);}
/* Lea's monogram, set beside the wordmark rather than replacing it, so the
   header keeps the serif Lea signed off and still carries the real mark.
   Sized in em off .wordmark's own font-size so the two scale together, and
   filled with currentColor so the mark follows the wordmark's ink instead
   of carrying a second hard-coded black. */
.wordmark{display:inline-flex;align-items:center;gap:.42em;}
.wordmark-mark{width:.95em;height:.95em;flex:none;fill:currentColor;}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);}
.nav-links a{
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;position:relative;padding:4px 0;transition:color .2s;
}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.4px;background:var(--ink);transition:right .25s;}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{right:0;}
.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-links a[aria-current="page"]::after{right:0;background:var(--ink);}
.nav-links a.nav-cta{
  border:1px solid var(--ink);border-radius:var(--r-sm);padding:11px 20px;color:var(--paper);background:var(--ink);letter-spacing:.13em;
  box-shadow:none;
}
.nav-links a.nav-cta::after{display:none;}
.nav-links a.nav-cta:hover{background:oklch(0.34 0 0);border-color:oklch(0.34 0 0);color:var(--paper);}
.nav-toggle{display:none;background:none;border:0;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer;padding:8px;}

/* ---------- hero shared ---------- */
.hero{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px);}
/* Contact is the only page that opens on the text column instead of a bleed
   row, so on its hero .wrap's own --gut padding would sit the heading that
   much inboard of the wordmark above it. Widening the box by exactly that
   padding puts the text back on the header's rail without changing the 1240
   the line lengths were set against. */
.hero > .wrap{max-width:calc(var(--maxw) + var(--gut) * 2);}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);counter-reset:step;}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--sh-sm);transition:transform .25s,box-shadow .25s;}
.step:hover{transform:translateY(-3px);box-shadow:var(--sh);}
.step .num{font-family:var(--serif);font-size:34px;color:var(--accent);line-height:1;font-weight:500;}
.step h4{font-size:20px;margin:12px 0 8px;}
.step p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.55;}

/* ---------- grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,32px);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);}

/* masonry */
.masonry{column-count:3;column-gap:clamp(16px,2vw,26px);}
.masonry .m-item{break-inside:avoid;margin-bottom:clamp(16px,2vw,26px);}

/* ---------- quote ---------- */
/* Has to hold both a one-line aphorism and a pasted multi-sentence
   testimonial, because the copy is editable and Lea pastes real client
   reviews in here. The old 18ch/44px display setting broke on the second
   kind: a 200-character quote came out as a twelve-line ribbon down the left
   of the page. A wider measure and a smaller ceiling keep a short quote
   looking like a display quote while a long one reads as a paragraph. */
.pullquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.6vw,36px);line-height:1.34;color:var(--ink);max-width:38ch;text-wrap:pretty;}
.pullquote.center{max-width:44ch;margin:0 auto;text-align:center;}
.quote-by{display:block;font-family:var(--sans);font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:26px;}

/* ---------- testimonial cards ---------- */
.tcard{border:1px solid var(--line);border-radius:var(--r);padding:30px;background:var(--paper);box-shadow:var(--sh-sm);transition:transform .25s,box-shadow .25s;}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--sh);}
.tcard .stars{color:var(--accent);letter-spacing:3px;font-size:13px;margin-bottom:16px;}
.tcard blockquote{font-family:var(--serif);font-size:21px;line-height:1.4;margin:0 0 18px;color:var(--ink);}
.tcard .who{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.tcard .who a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:.2s;}
.tcard .who a:hover{border-bottom-color:var(--accent);}

/* ---------- feature list ---------- */
.flist{list-style:none;margin:0;padding:0;}
.flist li{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line);}
.flist li:last-child{border-bottom:1px solid var(--line);}
.flist .fi-num{font-family:var(--serif);font-size:18px;color:var(--accent);min-width:32px;}
.flist h4{font-size:20px;margin:0 0 4px;}
.flist p{margin:0;font-size:14.5px;color:var(--ink-2);}

/* ---------- index rows (portfolio services) ---------- */
.idx{display:block;text-decoration:none;color:inherit;}
.idx-row{display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:center;padding:28px 0;border-top:1px solid var(--line);transition:padding-left .3s;}
.idx:last-child .idx-row{border-bottom:1px solid var(--line);}
.idx-row .ix{font-family:var(--serif);font-size:17px;color:var(--accent);}
.idx-row h3{font-size:clamp(26px,3vw,40px);}
.idx-row .meta{font-size:13.5px;color:var(--ink-3);margin-top:6px;}
.idx-row .arr{font-size:24px;color:var(--ink-3);transition:transform .3s,color .3s;}
.idx:hover .idx-row{padding-left:14px;}
.idx:hover .idx-row .arr{transform:translateX(8px);color:var(--accent);}

/* ---------- CTA band ---------- */
.cta{background:var(--dark);color:oklch(0.93 0.01 80);text-align:center;}
.cta h2{color:oklch(0.97 0.01 80);}
.cta .lede{color:oklch(0.82 0.012 78);margin-left:auto;margin-right:auto;}
.cta .btn{border-color:oklch(0.6 0.02 78);color:oklch(0.95 0.01 80);}
.cta .btn:hover{background:oklch(0.97 0.01 80);color:var(--dark);border-color:oklch(0.97 0.01 80);}
.cta .btn.solid{background:var(--accent);border-color:var(--accent);color:oklch(0.99 0.01 80);}
.cta .btn.solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;}

/* ---------- footer ---------- */
.footer{background:var(--dark-2);color:oklch(0.80 0.006 65);font-size:14.5px;}
.footer a{color:oklch(0.80 0.006 65);text-decoration:none;transition:color .2s;}
.footer a:hover{color:#fff;}
.footer .btn{background:transparent;border-color:oklch(0.45 0.006 60);color:oklch(0.90 0.006 65);box-shadow:none;}
.footer .btn:hover{background:oklch(0.95 0.006 65);border-color:oklch(0.95 0.006 65);color:var(--dark-2);}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding:clamp(48px,6vw,80px) 0 48px;}
.footer .fwm{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:.10em;color:#fff;margin-bottom:18px;display:inline-block;text-decoration:none;white-space:nowrap;}
.footer h5{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:oklch(0.64 0.006 65);margin:0 0 18px;}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer .suburbs{display:flex;flex-wrap:wrap;gap:7px 8px;}
.footer .suburbs span{font-size:12.5px;color:oklch(0.72 0.006 65);}
.footer .suburbs span::after{content:" ·";color:oklch(0.48 0.006 65);}
.footer .suburbs span:last-child::after{content:"";}
.footer-bottom{border-top:1px solid oklch(0.34 0.005 60);padding:24px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:oklch(0.60 0.006 65);}
.footer-bottom .seo{max-width:60ch;}

/* ---------- reveal animation ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1;transform:none;}
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .masonry{column-count:2;}
}
@media (max-width: 760px){
  body{font-size:16px;}
  .split,.split.lean-text,.split.lean-img,.split.tall-img{grid-template-columns:1fr;gap:32px;}
  .split .ph{order:-1;}
  .split.keep-order .ph{order:0;}
  .split-bleed,.split-bleed.rev{grid-template-columns:1fr;}
  .split-bleed > .sb-text,.split-bleed.rev > .sb-text{order:1;padding:30px var(--gut) 8px;}
  .split-bleed > .sb-img,.split-bleed.rev > .sb-img{order:2;min-height:330px;}
  .masthead{grid-template-columns:1fr 1fr;}
  .masthead span:nth-child(3){border-left:0;padding-left:0;}
  .rail{grid-template-columns:1fr;gap:14px;}
  .stagger{grid-template-columns:1fr 1fr;gap:18px;}
  .stagger .s1,.stagger .s2,.stagger .s3,.stagger .s4{grid-column:auto;margin-top:0;}
  .statband{grid-template-columns:1fr;}
  .statband .stat{padding:16px 0;border-left:0;border-top:1px solid var(--line);}
  .statband .stat:first-child{border-top:0;padding-top:0;}
  .cta-grid{grid-template-columns:1fr;gap:24px;align-items:start;}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .nav-links{
    position:fixed;inset:74px 0 auto 0;background:var(--paper);flex-direction:column;align-items:flex-start;
    gap:0;padding:8px var(--gut) 24px;border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s;
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto;}
  .nav-links a{width:100%;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;}
  .nav-links a.nav-cta{border:1px solid transparent;border-radius:var(--r-sm);width:auto;margin-top:14px;padding:12px 22px;}
  .nav-toggle{display:block;}
  .footer-top{grid-template-columns:1fr;gap:36px;}
  .footer-bottom{flex-direction:column;}
}
@media (max-width: 460px){
  .grid-2{grid-template-columns:1fr;}
}