/* ===================================================================
   Belgrave - shared page styles
   Used by about.html and contact.html. The homepage keeps its own
   inline styles for now; these would be consolidated in the real build.
   =================================================================== */

:root{
  --ink:#14130F;
  --ink-2:#1D1B16;
  --stucco:#EFE8DA;
  --stucco-2:#E4DBC9;
  --paper:#F7F3EA;
  --brass:#A8834A;
  --brass-lt:#C4A46E;
  --brass-txt:#74561F;
  --moss:#25302A;
  --ink-muted:#565043;
  --muted:#645E50;
  /* Section rhythm per the section design: 100px desktop, 75px tablet, 50px mobile.
     Every <section> reads this; the media overrides at the end of this file step it
     down. One value to change to move the whole site. */
  --sec-pad:100px;
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --ui:"Jost",ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* home.css has carried this since the hero work; site.css never did, so the 23 interior
   pages smooth-scrolled for a user who had asked for no motion, and behaved differently
   from the home page as well. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-weight:400;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:300;margin:0;line-height:1.06;letter-spacing:-.01em}
p{margin:0 0 1.15rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{width:min(1280px,90vw);margin-inline:auto}
.narrow{width:min(880px,88vw);margin-inline:auto}

.label{
  font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--brass-txt);display:flex;align-items:center;gap:.9rem;line-height:1.5;
}
.label::before{content:"";width:30px;height:1px;background:var(--brass);opacity:.6}
.label.solo::before{display:none}
.num{font-family:var(--display);font-size:1.05rem;color:var(--brass-txt);font-style:italic}  /* --brass measured 2.54 on stucco-2 */

/* ---------- imagery ---------- */
.grain{position:relative}
.grain::before{
  content:"";position:absolute;inset:0;background-image:var(--grain);
  mix-blend-mode:overlay;opacity:.5;pointer-events:none;z-index:3;
}
.plate{position:relative;overflow:hidden;background:#26241E}
.plate .fill{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.6) sepia(.2) contrast(1.06) brightness(.92);
  transition:transform 1.3s cubic-bezier(.2,.7,.2,1),filter .8s ease;
}
.plate:hover .fill{transform:scale(1.05);filter:saturate(.72) sepia(.14) brightness(1)}
.plate::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(168deg,rgba(168,131,74,.16),rgba(12,11,9,.38));
}
.arch{border-radius:50vw 50vw 2px 2px / 22vw 22vw 2px 2px}

/* ---------- reveal ---------- */
.rise{transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.rise.armed{opacity:0;transform:translateY(26px)}
.rise.armed.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{transition:none}.rise.armed{opacity:1;transform:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:1.14rem 2.3rem .96rem;line-height:1;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  text-indent:.18em;border:1px solid var(--brass);background:var(--brass);color:#17140E;
  transition:.45s cubic-bezier(.2,.7,.2,1);cursor:pointer;
}
.btn:hover{background:transparent;color:var(--brass);letter-spacing:.22em;text-indent:.22em}
.btn.line{background:transparent;color:var(--paper);border-color:rgba(247,243,234,.42)}
.btn.line:hover{border-color:var(--brass);color:var(--brass)}
.btn.ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ink:hover{background:transparent;color:var(--ink)}
/* Outline button for LIGHT grounds. .btn.line is the same idea for dark ones, and its
   paper-coloured border is invisible on cream. Fills in on hover, the reciprocal of
   .btn.ink emptying out, so a pair of the two reads as one control. */
.btn.line-ink{background:transparent;border-color:rgba(20,19,15,.28);color:var(--ink)}
.btn.line-ink:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- header ---------- */
header{
  /* No outer padding: each row owns its own, symmetric, so the util text and the nav
     content are each centred in their band. With padding here the top band measured
     24px above the util text against 9px below it, and the nav had padding-top:.5rem
     with no bottom at all, which pinned the logo to the header edge - 24px of air above
     the header content and 17px below. */
  position:fixed;top:0;left:0;right:0;z-index:80;padding:0;
  background:rgba(247,243,234,.97);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(20,19,15,.1);
}
/* ---- ROW 1: the mark on the left, the telephone number on the right ---- */
.hdr-main > .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.95rem 0;
}
/* Row one folds away on scroll - Jafar, 2026-09-11, "on sticky header just keep the
   bottom header". max-height rather than display:none so it animates, with visibility on
   a delayed transition so the mark and the number leave the tab order instead of staying
   focusable behind nothing.
   The fold lives inside a min-width query deliberately: below 1151px .hdr-bar is
   display:none, so folding row one there would leave no header at all - just a 1px rule
   across the top of the page. */
.hdr-main{overflow:hidden;max-height:260px}
@media(min-width:1151px){
  .hdr-main{transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .3s,visibility 0s}
  header.stuck .hdr-main{
    max-height:0;opacity:0;visibility:hidden;
    transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .3s,visibility 0s linear .45s;
  }
}
/* Both selectors, or this loses the cascade: header.stuck .hdr-main is (0,2,1) and
   .hdr-main alone is (0,1,0), so the collapse kept its 450ms animation and only the
   expand was instant. A media query adds no specificity. */
@media(prefers-reduced-motion:reduce){
  .hdr-main,header.stuck .hdr-main{transition:none}
}
.hdr-actions{display:flex;align-items:center;gap:1.2rem}
/* The number is the highest-intent link in the header and it used to be the least
   visible thing in it: .68rem - 10.9px - in the same muted grey as three navigation
   links. Alone beside the mark it is set at reading size. The icon takes --brass-txt
   (6.13:1 on paper) rather than the decorative --brass, so it still reads if a user
   forces their own background. */
.hdr-tel{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ui);
  font-size:1.08rem;letter-spacing:.05em;color:var(--ink);white-space:nowrap;
}
.hdr-tel .tel-ico{width:19px;height:19px;flex:none;color:var(--brass-txt)}
.hdr-tel:hover{color:var(--brass-txt)}

/* ---- ROW 2: navigation + Book Collection, sharing row one's column ---- */
.hdr-bar{border-top:1px solid rgba(20,19,15,.09)}
/* The fix for what Jafar circled. Row one was justified to the .wrap column while the
   nav was centred on the VIEWPORT, so at 1440 the nav floated with 291px of dead air
   either side and the two rows shared no axis at all. Putting the bar in the same .wrap
   and justifying it gives the nav the logo's left edge and the button the number's
   right edge. */
.hdr-bar-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
/* flex:none is load-bearing. .brand is a flex item in row one, and with the CTA and
   burger beside it the row shrank the BRAND rather than them: measured 5px wide at
   600px and 0px at 561px on the homepage - the logo vanished completely. */
.brand{display:block;line-height:0;flex:none}
/* Strapline cap height is logoWidth/60, and it needs about 4px to read:
        124px -> 2.1px   150px -> 2.5px   180px -> 3.0px
        240px -> 4.0px   260px -> 4.3px   320px -> 5.3px
   Superseded the earlier "the header cannot carry it" note: the client asked for it, so
   the header now does, and the padding below the header was re-measured to suit. */
/* Jafar, 2026-09-10: the client wants the mark bigger and the strapline readable.
   Strapline cap height is logoWidth/60, and it needs ~4px to read, so 240px+ is the
   target. 18vw gets there from about 1340px up and scales down gracefully below.
   The cost is a taller header AT REST, which is why the stuck rule below shrinks it
   again the moment the page scrolls - big mark on arrival, compact bar while reading. */
.brand .logo{width:clamp(150px,20vw,290px);height:auto;transition:width .45s cubic-bezier(.2,.7,.2,1)}
/* Jafar, 2026-09-10: the mark should stay large in the sticky bar too, up to 220px.
   That makes the stuck header taller than it was (84px), so scroll-padding-top has to
   move with it - an in-page anchor otherwise lands behind the bar. Both values are
   measured together; see the note on html{scroll-padding-top}. */
header.stuck .brand .logo{width:clamp(140px,16vw,220px)}
/* The mark rises into the utility strip instead of forcing the header taller. The strip
   right-aligns its links, so its left half is dead space - the logo occupies that rather
   than adding its full height to the bar. Enlarging the logo the naive way took the
   header from 159px to 198px, which read as top-heavy; this keeps the bigger mark and
   brings the header back under 160px.
   Only from 760px up. Below that the strip is not wide enough for the links to clear a
   risen logo - measured, they collided at 600px - and under 431px the strip is
   display:none, so there is nothing to rise into at all and the negative margin would
   lift the mark clean out of the header.
   Cleared on .stuck as well: the strip collapses then, so the space it was borrowing
   stops existing. */
/* The lift into the utility strip is gone with the 2026-09-11 rebuild - the brand and
   the strip now share row one, so there is nothing above the logo to rise into. */
@media(prefers-reduced-motion:reduce){.brand,.brand .logo{transition:none}}
.foot-brand .logo{width:260px}
.mnav-top .logo{width:168px}
/* Left-aligned, not centred: the bar shares row one's column now, so the first item sits
   on the logo's left edge. Gap and type both narrow with the viewport because this bar
   carries nine items AND the button - at the old fixed 2.2rem gap and .78rem type they
   needed about 1180px against the 1036px the column actually has at 1151. */
.menu{
  --sec-gap:clamp(.85rem,1.35vw,1.9rem);
  display:flex;align-items:center;flex-wrap:nowrap;
  gap:var(--sec-gap);padding:1.05rem 0;min-width:0;
}
/* The CTA is a flex item in the nav row, so when the enlarged logo tightened that row
   flex shrank the button below its own text width and "Book Collection" broke onto two
   lines - 60px tall against the 48px it should be. Measured at 1920, 1440 and 1366 on
   the homepage and at 1366 on the inner pages. It is a button: it does not wrap, and it
   does not get shrunk to make room for something else. */
/* The CTA left #menu in the 2026-09-11 rebuild, so the old ".menu a.btn" no longer
   matched it and the button started wrapping to two lines again at 834px.
   It is shorter than a page button on purpose: at the full 1.14rem/.96rem padding the
   bar measured 62px, and this bar is now the entire header for the whole of the scroll,
   so every pixel of it is paid for on every screen. */
.btn.hdr-cta{
  white-space:nowrap;flex:none;
  padding:.92rem 1.7rem .8rem;
  font-size:.66rem;letter-spacing:.14em;text-indent:.14em;
}

/* ---- header, below the desktop breakpoint -------------------------------------
   The whole bar goes at 1150px and the burger takes over. Nothing is lost: inc/footer.php
   builds the drawer from #menu, so all nine links and the Book Collection button are in
   it, and the drawer footer carries the telephone number.
   Row one stays visible at these widths, scrolled or not - see the min-width guard on
   the fold above. */
@media(max-width:1150px){
  .hdr-bar{display:none}
}
/* On a phone the number collapses to its icon: at 320px the full number, the mark and
   the burger want 394px against the 288px the column has. 44x44 is the minimum comfortable
   touch target, and the number is clipped rather than display:none so it stays in the
   accessibility tree and stays addressable by voice control - a link whose only content
   is an aria-hidden icon has no accessible name at all. */
@media(max-width:560px){
  .hdr-tel{width:44px;height:44px;justify-content:center;gap:0;margin-right:-4px}
  .hdr-tel .tel-ico{width:23px;height:23px}
  .hdr-tel .tel-no{
    position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;
    clip:rect(0 0 0 0);clip-path:inset(50%);
  }
}
.menu a{
  font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-muted);position:relative;padding-bottom:3px;
}
/* Price List and Advice Centre, carried down from the old utility strip. They are
   secondary to the seven links beside them, so they are a step smaller and a hairline
   divides the two groups - nine equal items would read as one flat list with no
   hierarchy at all.
   The rule is a ::before on the first of them rather than a border-left, because
   .menu a::after is the hover/active underline and it is anchored to left:0 - a
   padding-left would have pushed that underline off the word it belongs to. */
.menu a.m-sec{font-size:.72rem;color:#6A6355}
.menu a.sec-first{margin-left:var(--sec-gap)}
.menu a.sec-first::before{
  content:"";position:absolute;top:50%;left:calc(-1 * var(--sec-gap));
  width:1px;height:14px;margin-top:-8px;background:rgba(20,19,15,.16);
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--brass);
  transition:width .45s cubic-bezier(.2,.7,.2,1);
}
.menu a:hover::after{width:100%}
.menu a:hover{color:var(--brass-txt)}
/* "You are here". inc/header.php has emitted class="on" and aria-current="page" since
   the clean-URL work, and inc/footer.php sets aria-current in the drawer, but NOTHING
   in either stylesheet ever matched them - so on every page in the site the navigation
   gave no indication of which one you were on, visually or otherwise.
   The underline is already the language of this nav: hovering draws it, so the current
   page simply keeps it drawn. Colour goes to full --ink so it also reads without the
   line, for anyone who cannot see a 1px rule.
   Not duplicated into home.css on purpose: index.php sets $page = 'home' and no nav
   item tests for it, so nothing is ever active on the homepage. */
.menu a.on{color:var(--ink)}
.menu a.on::after{width:100%}
.mnav-item > a[aria-current],
.mnav-row > a[aria-current],
.mnav-foot a[aria-current]{color:var(--brass-lt)}
/* `.menu a` (0,1,1) outranks `.btn` (0,1,0), so the nav's own font-size, tracking and
   padding-bottom were leaking into the header button on interior pages: it rendered at
   .78rem/.15em instead of the button's .75rem/.18em, so the same control looked subtly
   different here than on the homepage, and the hover rule below then changed the
   tracking and grew the box 6px. home.css already restates these; site.css did not. */
/* Hover fills to ink rather than emptying to transparent. Emptying looked right on
   the homepage hero, where the header is transparent over a near-black photograph,
   but on the cream interior header (and on the homepage once it sticks) it left
   brass text on cream at 3.16:1 inside a hairline box - the button read as fading
   out rather than reacting. Filling to ink gives 16.8:1 paper-on-ink on BOTH
   grounds, and the brass border from .btn keeps the shape legible on the dark one.
   Tracking is restated at its base value so the box never widens in the flex row. */
.btn.hdr-cta:hover{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
  letter-spacing:.14em;text-indent:.14em;
}
.burger{
  display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;
  padding:0;margin-right:-10px;color:var(--ink);position:relative;
}
.burger span{
  display:block;position:absolute;left:9px;width:26px;height:1.5px;background:currentColor;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:26px}
/* The drawer is a full-screen overlay, so the page behind it must not scroll. Without
   this a swipe moved the document underneath the menu, and closing it left the visitor
   somewhere else entirely. overscroll-behavior on .mnav only stops the chain once the
   drawer itself has been scrolled to an end; this stops the page moving at all. */
html.nav-open{overflow:hidden}
html.nav-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
html.nav-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ---------- mega menu ---------- */
header{position:fixed}          /* the panel hangs off the header */
/* display:flex, not the default block. The child anchor is inline-flex, so as an
   INLINE box it sat on a line box that added this block's baseline strut beneath it:
   the wrapper measured 30.5px against 24.5px for the plain <a> items beside it, and
   .menu's align-items:center then centred that taller box, pushing "Services" and
   "Locations" 3px lower than every other label. Making the wrapper a flex container
   removes the line box, so it is exactly as tall as its anchor and all seven labels
   sit on one baseline.
   position:static is load-bearing: it keeps the mega panel positioned against the
   fixed header rather than against this wrapper. */
.has-panel{position:static;display:flex;align-items:center}
.has-panel>a{display:inline-flex;align-items:center;gap:.45rem}
.has-panel>a::before{
  content:"";width:5px;height:5px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px);
  opacity:.6;order:2;transition:transform .35s;
}
.has-panel:hover>a::before{transform:rotate(225deg) translateY(-3px)}

.panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-top:1px solid rgba(20,19,15,.1);
  box-shadow:0 26px 60px rgba(20,19,15,.16);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .38s ease,transform .38s cubic-bezier(.2,.7,.2,1),visibility .38s;
}
.has-panel:hover .panel,.has-panel:focus-within .panel{opacity:1;visibility:visible;transform:none}
.panel-inner{display:grid;gap:2.8rem;padding:3rem 0 3.2rem}
.panel-services .panel-inner{grid-template-columns:1fr 1fr 1fr 1.15fr}
.panel-locations .panel-inner{grid-template-columns:repeat(3,1fr)}
.panel .panel-h{
  font-family:var(--ui);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--brass-txt);margin:0 0 1.2rem;padding-bottom:.9rem;
  border-bottom:1px solid rgba(20,19,15,.12);
}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{margin-bottom:.15rem}
.panel li a{
  display:block;padding:.42rem 0;font-size:.95rem;color:var(--ink);
  position:relative;padding-left:0;transition:padding-left .35s,color .3s;
}
.panel li a:hover{color:var(--brass-txt);padding-left:.7rem}
.panel li a::before{
  content:"";position:absolute;left:0;top:50%;width:0;height:1px;
  background:var(--brass);transition:width .35s;
}
.panel li a:hover::before{width:.45rem}
.panel-feature{background:var(--stucco);padding:1.8rem;display:flex;flex-direction:column}
.panel-feature .pf-img{
  aspect-ratio:16/9;background:url(../img/atelier-panel.jpg) center/cover;
  filter:saturate(.6) sepia(.2) brightness(.9);margin-bottom:1.2rem;
}
.panel-feature .panel-fh{
  /* colour restated: this was an <h6> and inherited --ink. As a <p> it is caught by
     .panel-feature p below, which is --ink-muted and meant for the body copy. */
  font-family:var(--display);font-size:1.3rem;font-weight:400;margin:0 0 .5rem;color:var(--ink);
}
.panel-feature p{font-size:.9rem;color:var(--ink-muted);margin-bottom:1.2rem;line-height:1.6}
.panel-feature .more{
  margin-top:auto;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--ink);display:inline-flex;gap:.5rem;align-items:center;
}
.panel-feature .more:hover{color:var(--brass-txt)}
.panel-loc{padding-right:1rem}
.panel-loc strong{
  display:block;font-family:var(--display);font-size:1.35rem;font-weight:400;margin-bottom:.5rem;
}
.panel-loc span{display:block;font-size:.92rem;color:var(--ink-muted);line-height:1.7}
/* colour stated explicitly so the panel never inherits the nav's over-the-hero
   colour - see the note in home.css */
.panel-loc .pl-tel{color:var(--ink);
  display:inline-block;margin-top:.7rem;font-size:.95rem;
  border-bottom:1px solid var(--brass);padding-bottom:2px;
}

/* ═══ TYPOGRAPHY PASS ═══
   Larger small-type, tighter tracking, heavier weight and stronger
   contrast. Weight 300 was too thin below ~14px and the wide letter
   spacing was compounding it. */
:root{
  --ink-muted:#565043;   /* was #6E6558 - too low contrast on cream */
  --muted:#645E50;
  --brass-txt:#74561F;   /* darker brass, for small text on light grounds */
}
/* header goes solid while a panel is open */
header.panel-open{background:rgba(247,243,234,.97)}

/* ---------- page hero ---------- */
/* Re-measured for the 2026-09-11 two-row header: 212px at rest on a wide screen, where
   it used to be 157px. 13rem/208px left the inner pages 4px BEHIND it. */
.phero{background:var(--ink);color:var(--paper);padding:15rem 0 clamp(4rem,8vw,7rem);position:relative;overflow:hidden}
@media(min-width:1280px){.phero{padding-top:16rem}}
@media(max-width:1150px){
  /* the nav bar and utility links are hidden here, so the header drops to ~124px */
  .phero{padding-top:11rem}
}
.phero .label{color:var(--brass-lt)}
.phero .label::before{background:var(--brass-lt)}
.phero h1{font-size:clamp(2.6rem,7vw,5.2rem);margin:1.4rem 0 1.4rem;line-height:.98}
.phero h1 em{font-style:italic;color:var(--brass-lt)}
.phero p{font-size:clamp(1.05rem,1.6vw,1.2rem);color:rgba(247,243,234,.76);max-width:52ch;margin:0}
/* Every other phero has a single paragraph, so margin:0 was right. The price list now
   carries the two standing price caveats here and they ran straight into each other as
   one block. Scoped to a following sibling, so nothing else on the site moves. */
.phero p + p{margin-top:.7rem}
.phero-glow{
  position:absolute;right:-10%;top:-30%;width:70vw;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(168,131,74,.16),transparent 70%);pointer-events:none;
}

/* ---------- sections ---------- */
section{padding:var(--sec-pad) 0}
.sec-head{max-width:56ch;margin-bottom:3rem}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.3rem);margin:1.2rem 0 1rem}
.sec-head h2 em{font-style:italic;color:var(--brass-txt)}
.sec-head p{color:var(--ink-muted);margin:0;font-size:1.06rem}
.centre{text-align:center;margin-inline:auto}
.centre .label{justify-content:center}
.centre .label::before{display:none}

.split{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.5rem,7vw,6rem);align-items:start}
.split.flip{grid-template-columns:1.15fr 1fr}
.split .plate{aspect-ratio:3/4}
.split p{color:var(--ink-muted);font-size:1.05rem}

/* stats strip */
.stats{background:var(--ink-2);color:var(--paper);padding:clamp(3rem,6vw,4.5rem) 0}
/* One column per stat, always. This was repeat(4,1fr) against the three .stat children
   about.php actually has - a leftover from when there was a fourth - so the band laid
   its content out across three quarters of the wrap and left the last quarter empty.
   grid-auto-columns means the count can never fall out of step again: add or remove a
   stat and the row still divides evenly. */
.stats-grid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1.5rem}
.stat{padding-left:1.6rem;border-left:1px solid rgba(247,243,234,.16)}
.stat:first-child{padding-left:0;border-left:0}
.stat b{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1;color:var(--brass-lt);
}
.stat span{
  display:block;margin-top:.55rem;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(247,243,234,.68);line-height:1.65;
}

/* moss quote band */
.houses{background:var(--moss);color:var(--stucco);text-align:center;padding:clamp(4rem,8vw,6.5rem) 0}
.houses q{
  font-family:var(--display);font-style:italic;font-weight:300;quotes:none;display:block;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.35;max-width:22ch;margin:0 auto;
}
.houses .diamond{width:7px;height:7px;background:var(--brass-lt);transform:rotate(45deg);margin:0 auto 2rem}

/* closing band */
.band{background:var(--ink);color:var(--paper);text-align:center;padding:clamp(4.5rem,9vw,7rem) 0;position:relative;overflow:hidden}
.band .glow{position:absolute;left:50%;top:-40%;transform:translateX(-50%);width:120vw;aspect-ratio:2/1;background:radial-gradient(closest-side,rgba(168,131,74,.24),transparent 72%)}
.band h2{font-size:clamp(2rem,4.6vw,3.6rem);position:relative}
.band h2 em{font-style:italic;color:var(--brass-lt)}
.band p{color:rgba(247,243,234,.7);max-width:46ch;margin:1.3rem auto 2.2rem;position:relative}
.band .btn{position:relative}

/* ---------- footer ---------- */
footer{background:var(--ink-2);color:rgba(247,243,234,.76);padding:4.5rem 0 2rem;font-size:.98rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:3rem}
footer h2{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:1.4rem;font-weight:500}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.7rem;color:rgba(247,243,234,.74)}
footer a:hover{color:var(--brass-lt)}
.foot-brand .brand{color:var(--paper);margin-bottom:1.5rem}
.foot-brand p{max-width:30ch;font-size:.97rem;color:rgba(247,243,234,.66)}
.foot-bottom{
  margin-top:4rem;padding-top:1.7rem;border-top:1px solid rgba(247,243,234,.1);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.76rem;letter-spacing:.08em;color:rgba(247,243,234,.55);
}

/* ---------- mobile nav overlay ---------- */
.mnav{
  position:fixed;inset:0;z-index:200;display:none;flex-direction:column;
  background:var(--ink);color:var(--paper);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);visibility:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),visibility .5s;
}
.mnav.open{transform:none;visibility:visible}
.mnav-in{padding:1.4rem 6vw 3rem;flex:1}
.mnav-top{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-bottom:1.6rem;border-bottom:1px solid rgba(247,243,234,.14)}
.mnav-top .brand{color:var(--paper)}
.mnav-close{width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative;color:var(--paper);margin-right:-10px}
.mnav-close::before,.mnav-close::after{content:"";position:absolute;left:9px;top:21px;width:26px;height:1.5px;background:currentColor}
.mnav-close::before{transform:rotate(45deg)}
.mnav-close::after{transform:rotate(-45deg)}
.mnav-item{border-bottom:1px solid rgba(247,243,234,.1)}
.mnav-item>a,.mnav-item>button,.mnav-row>a,.mnav-row>button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 0;background:none;border:0;text-align:left;cursor:pointer;
  font-family:var(--ui);font-size:1.02rem;font-weight:400;letter-spacing:.05em;
  color:rgba(247,243,234,.92);
}
.mnav-item .chev{
  width:8px;height:8px;flex:none;border-right:1px solid var(--brass-lt);
  border-bottom:1px solid var(--brass-lt);transform:rotate(45deg) translateY(-2px);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.mnav-item.open .chev{transform:rotate(225deg) translateY(-3px)}
/* A parent item is a destination AND a disclosure. The label keeps its link so the
   page stays reachable on a phone; the chevron is a separate 44px control beside it,
   so tapping one never fires the other. */
.mnav-row{display:flex;align-items:center;gap:.4rem}
.mnav-row>a{flex:1 1 auto;width:auto}
.mnav-row>button{flex:none;width:44px;justify-content:flex-end}
.mnav-row>button:focus-visible{outline:2px solid var(--brass-lt);outline-offset:-4px}
.mnav-body{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1),visibility 0s linear .5s}  /* hidden = out of the tab order too */
.mnav-item.open .mnav-body{max-height:1800px;visibility:visible;transition:max-height .5s cubic-bezier(.2,.7,.2,1),visibility 0s}
.mnav-body-in{padding:.2rem 0 1.4rem}
/* The drawer clones .panel-inner from the desktop mega menu, so .panel-foot arrives
   carrying --brass-txt, which is chosen for cream. On the drawer's --ink ground that is
   2.74:1 and the two links read as dark smudges, with an invisible divider above them.
   --brass-lt is the dark-ground counterpart. */
.mnav-body .panel-foot{border-top-color:rgba(247,243,234,.12)}
.mnav-body .panel-foot a{color:var(--brass-lt)}
.mnav-body .panel-h{
  /* .62rem computed to 9.92px, below the 10px floor set for letterspaced uppercase */
  font-family:var(--ui);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:var(--brass-lt);margin:1.2rem 0 .5rem;
}
.mnav-body .panel-h:first-child{margin-top:.4rem}
.mnav-body ul{list-style:none;margin:0;padding:0}
.mnav-body li a{display:block;padding:.5rem 0;font-size:.95rem;color:rgba(247,243,234,.72)}
.mnav-loc{padding:.9rem 0;border-bottom:1px solid rgba(247,243,234,.08)}
.mnav-loc:last-child{border-bottom:0}
.mnav-loc strong{display:block;font-family:var(--display);font-size:1.25rem;font-weight:400;margin-bottom:.3rem}
.mnav-loc span{display:block;font-size:.88rem;color:rgba(247,243,234,.62);line-height:1.6}
.mnav-loc a{display:inline-block;margin-top:.5rem;font-size:.95rem;color:var(--brass-lt)}
.mnav-cta{display:block;margin:1.8rem 0 1.6rem;text-align:center}
.mnav-foot{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;padding-top:1.4rem;border-top:1px solid rgba(247,243,234,.12);font-size:.76rem;color:rgba(247,243,234,.6)}

/* ---------- sticky mobile bar ---------- */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(20,19,15,.96);backdrop-filter:blur(14px);
  border-top:1px solid rgba(193,162,101,.35);
  padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.mobar.up{transform:none}
.mobar-in{display:flex;gap:.6rem}
.mobar a{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding:.95rem .6rem;
}
.mobar .call{border:1px solid rgba(247,243,234,.32);color:var(--paper)}
.mobar .book{background:var(--brass);color:#17140E;flex:1.5}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .split,.split.flip{grid-template-columns:1fr;gap:2.5rem}
  .split .plate{aspect-ratio:16/10}
  /* Three stats in two columns always orphans the third onto a row of its own with an
     empty cell beside it - the same imbalance as the four-column bug, one row down.
     Measured, the three labels still fit across a tablet down to about 620px, so they
     stay in one row here on a tighter gutter and stack properly below (see 620 block). */
  .stats-grid{gap:1.2rem}
  .stat{padding-left:1.1rem}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .menu{display:none}
  .burger{display:block}
  .mnav{display:flex}
  .mobar{display:block}
  footer{padding-bottom:6rem}
  /* 431-760px is the tallest the header gets: the utility strip is still showing but
     the logo does not rise into it (no room for the links to clear it), so the bar is
     148px. 9.5rem/152px left every inner page 4px clear of it - measured on all 12.
     12rem/192px restores a real margin. The phone band below drops it again, where the
     strip is hidden and the header is only 99px. */
  .phero{padding:12rem 0 3.5rem}
  .foot-grid{grid-template-columns:1fr;gap:2.5rem}
}

/* ---------- services index and single service ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 1.8rem}
.svc a{display:block}
.svc .plate{aspect-ratio:3/4.05;margin-bottom:1.3rem}
.svc h3{font-size:1.45rem;margin-bottom:.55rem}
.svc p{font-size:.96rem;color:var(--ink-muted);margin:0 0 .5rem}
.svc .price{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--brass-txt);margin:0 0 .9rem;
}
.svc .cta{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--ink);display:inline-flex;align-items:center;gap:.5rem;
}
.svc .cta i{font-style:normal;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.svc a:hover .cta{color:var(--brass-txt)}
.svc a:hover .cta i{transform:translateX(5px)}

/* a service we cannot yet describe honestly is labelled, not quietly padded out */
.wip{
  font-style:normal;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-txt);border:1px solid rgba(168,131,74,.45);
  padding:.28rem .5rem;margin-left:.5rem;vertical-align:middle;white-space:nowrap;
}
.wip-note{
  margin-top:1.4rem;padding-left:1rem;border-left:2px solid var(--brass);
  font-size:.95rem;color:rgba(247,243,234,.72);
}

.price-line{margin:2rem 0 .3rem;font-family:var(--display);font-size:1.7rem;color:var(--ink)}
.price-line strong{font-weight:400}
.price-note{font-size:.85rem;color:var(--muted);margin-bottom:2rem;max-width:44ch}

/* six stages, shared by about.php and service.php */
.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem 2rem}
.stage-no{
  display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(20,19,15,.2);
  border-radius:50%;font-family:var(--display);font-size:1rem;color:var(--brass-txt);margin-bottom:1.1rem;
}
.stage h3{font-size:1.45rem;margin-bottom:.5rem}
.stage p{color:var(--ink-muted);font-size:.98rem;margin:0}

@media(max-width:1000px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .stage-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .svc-grid{grid-template-columns:1fr;gap:2.6rem}
  .svc .plate{aspect-ratio:16/10}
  .stage-grid{grid-template-columns:1fr;gap:2rem}
}

/* ---------- weight-banded price table (service wash) ---------- */
.ptable{width:100%;border-collapse:collapse;margin:2rem 0 .8rem;max-width:26rem}
.ptable tr{border-bottom:1px solid rgba(20,19,15,.12)}
.ptable tr:first-child{border-top:1px solid rgba(20,19,15,.12)}
.ptable th{
  text-align:left;font-weight:500;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);padding:.85rem 0;white-space:nowrap;
}
.ptable td{font-size:.95rem;color:var(--ink-muted);padding:.85rem .8rem}
.ptable td.c{
  text-align:right;padding-right:0;font-family:var(--display);font-size:1.25rem;
  color:var(--ink);white-space:nowrap;
}
@media(max-width:520px){
  .ptable th{font-size:.7rem}
  .ptable td{font-size:.88rem;padding:.85rem .4rem}
}

/* ---------- before and after pair, on a service page ----------
   Two real photographs side by side. No filters and no simulation: the difference on
   screen is the difference in the pictures. */
.svc-ba{background:var(--ink);color:var(--paper)}
.svc-ba .sec-head h2{color:var(--paper)}
.svc-ba .sec-head h2 em{color:var(--brass-lt)}
.svc-ba .sec-head p{color:rgba(247,243,234,.72)}
.svc-ba .label{color:var(--brass-lt)}

.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:56rem;margin-inline:auto}
.ba-pair figure{margin:0;position:relative}
.ba-pair img{
  width:100%;height:auto;display:block;
  border:1px solid rgba(193,162,101,.35);
}
.ba-pair figcaption{
  position:absolute;top:1rem;left:1rem;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  padding:.42rem .85rem;background:rgba(12,11,9,.72);
  border:1px solid rgba(247,243,234,.2);color:rgba(247,243,234,.88);
}
/* Below this the three labels no longer fit side by side, so the row becomes a
   column and the divider moves from the left edge to the top - three stats stacked
   reads cleanly, where two-plus-an-orphan never did. */
@media(max-width:620px){
  .stats-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;gap:1.6rem}
  .stat{padding-left:0;border-left:0;padding-top:1.4rem;border-top:1px solid rgba(247,243,234,.16)}
  .stat:first-child{padding-top:0;border-top:0}
}
@media(max-width:640px){
  .ba-pair{gap:.8rem}
  .ba-pair figcaption{top:.6rem;left:.6rem;font-size:.55rem;letter-spacing:.2em;padding:.35rem .6rem}
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAIN NAV FIT   (2026-09-07)

   The nav bar needs 975px on one line. Inside the full 1280px .wrap that is
   comfortable, but .wrap is min(1280px,90vw), so from roughly 1300px down the
   room runs out: 833px at 1100, 795px at 1024, 656px at 900. The menu is a flex
   row, so rather than overflow visibly it silently shrank and the labels
   crowded together. That was already true before the 2026-09-07 menu work.

   Fixed by closing the gap, not by shrinking the type: the nav has to stay
   larger than the .68rem utility links above it, or the secondary row outweighs
   the primary one. Below 1150px nothing fits honestly, so the burger drawer
   takes over there instead. Measured in headless Chrome at 1920 / 1600 / 1440 /
   1366 / 1280 / 1200 / 1151; re-measure if a menu item is added or renamed.
   ───────────────────────────────────────────────────────────────────────── */
@media(max-width:1360px){
  .menu{gap:1.15rem}
}
/* Burger from 1150px down. The rest of the phone layout (.mobar, hero, grids)
   is unaffected and still starts at 760px. */
@media(max-width:1150px){
  .menu{display:none}
  .burger{display:block}
  .mnav{display:flex}
  /* Book Collection lives in .hdr-bar as of 2026-09-11, and .hdr-bar is hidden from
     here down - so the sticky action bar has to start here too, not at 760px. Without
     this, 761-1150px (every tablet, and a small laptop window) had NO booking control
     anywhere on screen: the bar was gone and the action bar had not yet appeared, so
     the only route to the portal was opening the burger and scrolling the drawer.
     footer padding moves with it, or the bar covers the last footer row. */
  .mobar{display:block}
  footer{padding-bottom:6rem}
}

/* Inline "see the full price list" link, used on services.php and on every service page
   (service.php), plus the second .more link in the mega-menu feature column. */
.price-all{
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--brass-txt);border-bottom:1px solid rgba(168,131,74,.5);
  padding-bottom:2px;margin-left:.2rem;
}
.price-all i{font-style:normal;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.price-all:hover{color:var(--brass-txt);border-bottom-color:var(--brass)}
.price-all:hover i{transform:translateX(4px)}
/* Only lift to the light brass where the ground really is dark. .price-note is NOT:
   it sits on the cream split section, where --brass-lt measured 2.13:1 and the link
   read as washed out. There it keeps the default --brass-txt, which is 3.16:1. */
.svc-hero .price-all{color:var(--brass-lt)}
/* Full-width row across the bottom of the services mega menu. Spans all four grid
   columns so it reads as a footer to the whole panel rather than to any one column. */
.panel-services .panel-foot{
  grid-column:1 / -1;display:flex;gap:2.4rem;flex-wrap:wrap;
  margin-top:.4rem;padding-top:1.5rem;border-top:1px solid rgba(20,19,15,.12);
}
.panel-foot a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--brass-txt);
}
.panel-foot a i{font-style:normal;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.panel-foot a:hover{color:var(--brass-txt)}
.panel-foot a:hover i{transform:translateX(4px)}

/* ---- "Items include" strip on a service page -------------------------------
   Jafar's ITEMS INCLUDE run from the write-ups. A full-width band so the copy
   column above is not left carrying four paragraphs, a price table and a button. */
.svc-items{background:var(--ink);color:var(--paper);padding:clamp(2.6rem,5vw,4rem) 0}
.svc-items-label{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--brass-lt);margin:0 0 1.4rem;
}
.svc-items-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 0;
}
.svc-items-list li{
  font-family:var(--display);font-size:clamp(1.1rem,2vw,1.6rem);font-weight:300;
  line-height:1.35;color:var(--paper);
}
/* a brass lozenge between entries, matching the diamond used in the Atelier list */
.svc-items-list li:not(:last-child)::after{
  content:"";display:inline-block;width:5px;height:5px;background:var(--brass);
  transform:rotate(45deg);margin:0 1.1rem;vertical-align:middle;
}
@media(max-width:560px){
  .svc-items-list li:not(:last-child)::after{margin:0 .75rem}
}

/* PHONES: the utility strip is hidden below 430px. At 360px and under its four links
   wrapped onto two lines, making the header 180px tall - a fifth of a small phone
   screen spent on secondary links, and it was what pushed the hero eyebrow behind
   the header. The utility strip itself is gone as of 2026-09-11 - its links are
   ordinary items in #menu now - and the fixed .mobar still carries Call us and
   Book Collection. */
@media(max-width:430px){
  /* utility strip hidden here, so the header is 99px - 152px is right again */
  .phero{padding-top:9.5rem}

  /* .wrap is 90vw, so 288px at 320 - a 260px logo would sit almost edge to edge */
  .foot-brand .logo{width:min(260px,72vw)}

}

/* Touch targets. Inline links measured 17-23px tall, under the 24px WCAG 2.5.8
   minimum. Padding extends the hit area; the matching negative margin keeps the
   visual rhythm exactly as it was. */
footer li a,.mnav-foot a{display:inline-block;padding:.3rem 0;margin:-.3rem 0}
.maplink{display:inline-block;padding-top:.3rem;margin-top:-.3rem}
.price-all{padding-top:.2rem;margin-top:-.2rem}

/* Skip link: off-screen until it receives keyboard focus, then pinned top-left above
   the fixed header so a keyboard user can jump past the nav on every page. */
.skip{position:absolute;left:-999px;top:.6rem;z-index:200;padding:.7rem 1rem;
  background:var(--ink);color:var(--paper);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:.6rem;outline:2px solid var(--brass);outline-offset:2px}

/* .num is brass-txt for the light sections (2.54:1 as --brass on stucco-2), but the
   interior page heroes are near-black, where brass-txt drops to 2.74:1. Lift it there. */
.phero .num,.hero .num,.band .num,.ba .num,.process .num{color:var(--brass-lt)}  /* .ba and .process are the homepage's two ink sections */

/* ---------- keyboard focus ---------------------------------------------------
   Several inputs set outline:none and rely on a border-colour change, which a keyboard
   user scanning for the focused control cannot see. One site-wide :focus-visible ring:
   mouse focus is unaffected, keyboard focus always gets it. Brass on the light grounds,
   the lighter brass on the dark ones. Declared after the outline:none rules, at equal
   specificity, so it wins for :focus-visible. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.hero :focus-visible,.phero :focus-visible,.band :focus-visible,.mnav :focus-visible,
.at-hero :focus-visible,.at-steps-wrap :focus-visible,.svc-items :focus-visible,
.process :focus-visible,.ba :focus-visible,.card-all :focus-visible,.mobar :focus-visible,
footer :focus-visible{outline-color:var(--brass-lt)}
.skip:focus-visible{outline-offset:2px}

/* In-page anchors (#services, #locations, #enquire, the skip link's #main) scrolled the
   target to the very top of the viewport, straight behind the fixed header. */
/* 172px was sized for the old two-band sticky header. It is 82px once the utility
   strip retires on scroll, and an in-page anchor is always followed from a scrolled
   position, so the target was landing ~90px lower than it needed to. */
/* Must clear the STUCK header, because by the time an in-page jump lands the bar is
   always stuck. Measured 2026-09-10 after the sticky logo went to 220px: 115px at
   desktop, 80px below 431px. 100px/92px were set against the old 84px bar and would
   now drop #services, #locations, #collection and #enquire behind it. */
/* Re-measured for the 2026-09-11 two-row header. The STUCK bar is what matters, and
   it is now 156px on a wide screen (row one plus the nav bar) and 83px on a phone.
   140px would have put #services, #collection and #locations 16px behind it. */
/* Re-measured 2026-09-11, after row one was made to fold away on scroll. What an
   in-page jump has to clear is the STUCK header, and above 1150px that is now the nav
   bar alone - 60px on the home page, 58px on the others, against 156px before. 180px
   would drop every anchor 120px further down the page than it needs to go.
   Below 1151px the bar is hidden and row one IS the sticky header, at up to 97px, so
   those two values stay where they were. */
html{scroll-padding-top:90px}
@media(max-width:1150px){html{scroll-padding-top:120px}}
@media(max-width:430px){html{scroll-padding-top:104px}}

/* section rhythm by device, see --sec-pad in :root */
@media(max-width:1023px){:root{--sec-pad:75px}}
@media(max-width:760px){:root{--sec-pad:50px}}

/* Doubled seam on the one service page with a before/after (wedding dress): the ink
   .svc-items strip runs straight into the ink .svc-ba section. The strip's own bottom
   padding is clamp(2.6rem,5vw,4rem); topping it up to exactly one section unit keeps
   the rhythm identical to every other seam on the site. */
.svc-items + .svc-ba{padding-top:calc(var(--sec-pad) - clamp(2.6rem,5vw,4rem))}

/* ---------- location cards (shared by index.php and contact.php) ----------
   Moved here from contact.php's inline <style> on 2026-09-09, when the homepage
   "Where to find us" rows were replaced with the same component. One place. */
.branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.branch{background:#fff;border:1px solid rgba(20,19,15,.1);padding:2.2rem 1.9rem}
.branch h3{font-size:1.5rem}
/* Same landmark marks as the homepage; multiply drops the white JPEG ground.
   Boxed to a fixed square and set back a little: the three subjects fill their
   1254px canvases very differently (Big Ben tall, the power station wide), so at
   full strength they read as mismatched clip-art competing with the branch name.
   A fixed box plus lower opacity lets them sit as quiet marks instead. */
.branch-mark{
  width:58px;height:58px;margin-bottom:1.2rem;
  display:flex;align-items:center;justify-content:center;
}
.branch-mark img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  mix-blend-mode:multiply;opacity:.62;
}
.branch-role{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-txt);margin:.4rem 0 1.2rem;line-height:1.6}
/* Battersea has no .branch-role since 2026-09-10, so its heading has to hold the space
   the line used to occupy - without this its address sits ~42px higher than Westminster's
   and Belgravia's and the three cards stop lining up across the row. Written out of the
   same tokens as the rule above rather than as a magic number, so changing the role
   line's size or margins keeps the three in step. */
.branch-works h3{margin-bottom:calc(.4rem + 1.2rem + (.64rem * 1.6))}
.branch address{font-style:normal;font-size:1rem;color:var(--ink-muted);line-height:1.75;margin-bottom:1.2rem}
.branch dl{margin:0;border-top:1px solid rgba(20,19,15,.1);padding-top:1.1rem}
.branch dt{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-txt);margin-bottom:.3rem}
.branch dd{margin:0 0 1rem;font-size:.95rem;color:var(--ink-muted);line-height:1.8}
.branch .tel{font-family:var(--display);font-size:1.3rem;color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:2px}
/* Battersea is the factory rather than a shop, so it is set apart from the two
   branches customers can walk into. It used to be transparent with a dashed border,
   which against the stucco ground read as an unfinished or placeholder card sitting
   next to two finished ones, rather than as a deliberate distinction.

   It is now a finished card like the others, demoted quietly instead: the warm paper
   ground rather than white, and muted rather than brass for the small type. The actual
   "you cannot walk into this one" message is carried by .branch-role, which says so in
   words. Address, telephone and map link all stay - deliveries and suppliers need them. */
.branch-works{background:var(--paper)}
.branch-works .branch-role,
.branch-works dt{color:var(--muted)}
.branch-works .tel{border-bottom-color:rgba(20,19,15,.28)}
.branch-works .branch-mark img{opacity:.5}
.maplink{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:2px}
/* Both of these were links with no hover state at all - nothing happened on the
   branch telephone or the map link. Colour only, so nothing reflows. */
.maplink:hover{color:var(--brass-txt)}
.branch .tel:hover{color:var(--brass-txt)}
@media(max-width:1000px){.branch-grid{grid-template-columns:1fr;gap:1.2rem}}

/* Service pages: the local-availability line under the hero blurb. Smaller and quieter
   than the blurb above it so it reads as a footnote to the service, not a second lede. */
.svc-local{
  font-size:.95rem;color:rgba(247,243,234,.68);margin-top:1rem;max-width:52ch;line-height:1.7;
}
.svc-local a{color:var(--brass-lt);border-bottom:1px solid rgba(196,164,110,.45);padding-bottom:1px}
.svc-local a:hover{border-bottom-color:var(--brass-lt)}

/* ---------- legal pages (privacy.php, terms-conditions.php) ----------
   Long-form policy prose. Moved here from privacy.php on 2026-09-09 when the Terms
   page was added, so the two read identically. */
/* Legal prose. One column, held to a comfortable measure - a policy is read, not scanned,
   and the site's full content width would run to 120 characters a line here. */
.legal{max-width:100%}
.legal h2{
  font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:300;
  margin:3.2rem 0 1rem;
}
.legal h2:first-child{margin-top:0}
/* the second half of the document opens with a rule, so the two parts read as two parts */
.legal h2.legal-part{
  margin-top:4rem;padding-top:2.4rem;border-top:1px solid rgba(20,19,15,.14);
}
.legal h3{
  font-family:var(--display);font-size:clamp(1.2rem,2vw,1.45rem);font-weight:400;
  margin:2.4rem 0 .8rem;
}
.legal h4{
  font-family:var(--ui);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--brass-txt);margin:1.8rem 0 .6rem;
}
.legal p{color:var(--ink-muted);font-size:1.02rem;line-height:1.85;margin:0 0 1.1rem}
.legal ul{margin:0 0 1.4rem;padding-left:1.3rem}
.legal li{
  color:var(--ink-muted);font-size:1.02rem;line-height:1.8;margin-bottom:.5rem;
  padding-left:.3rem;
}
.legal li::marker{color:var(--brass)}
.legal a{color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:1px}
.legal a:hover{color:var(--brass-txt)}
.legal-address{
  background:var(--stucco);border-left:2px solid var(--brass);
  padding:1.4rem 1.6rem;line-height:1.9;
}
.legal-address strong{color:var(--ink);font-weight:500}
@media(max-width:760px){
  .legal h2{margin-top:2.6rem}
  .legal h2.legal-part{margin-top:3rem;padding-top:2rem}
  .legal h3{margin-top:2rem}
  .legal-address{padding:1.2rem 1.2rem}
}

/* Terms page: the document runs to four parts, so it opens with a jump list. */
.legal-toc{
  background:var(--stucco);padding:1.5rem 1.7rem;margin:0 0 3rem;
  border-left:2px solid var(--brass);
}
.legal-toc-label{
  font-family:var(--ui);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--brass-txt);margin:0 0 .9rem;
}
.legal-toc ol{margin:0;padding-left:1.2rem}
.legal-toc li{margin-bottom:.45rem;color:var(--ink-muted);font-size:1rem}
.legal-toc li:last-child{margin-bottom:0}
.legal-toc li::marker{color:var(--brass)}
.legal-toc a{color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:1px}
/* the "applicable only if..." qualifier under a part heading */
.legal-note{color:var(--muted);font-size:.95rem;margin-top:-.4rem}

/* ---------- sticky header: the BAR is what stays ----------
   Jafar, 2026-09-11: "on sticky header just keep the bottom header on sticky". Row one
   folds away (see .hdr-main above) and the nav bar alone stays fixed, which takes the
   sticky header from 156px to about 54px - roughly 100px of every screen handed back to
   the page for the whole of the scroll.
   The bar's own padding is deliberately NOT tightened on scroll any more. It is the
   entire header now, so a constant height means it reads as having detached rather than
   resized, and it gives html{scroll-padding-top} a single desktop value to match.
   Below 1151px the bar is display:none and row one is the header, so it still tightens
   there. */
@media(max-width:1150px){
  header.stuck .hdr-main > .wrap{padding:.5rem 0}
}