/* Belgrave homepage sections. Loads after site.css. */

:root{
  --ink:#14130F;          /* railings */
  --ink-2:#1D1B16;
  --stucco:#EFE8DA;       /* Belgravia stucco */
  --stucco-2:#E4DBC9;
  --paper:#F7F3EA;
  --brass:#A8834A;        /* aged brass, not casino gold */
  --brass-lt:#C4A46E;
  --moss:#25302A;         /* railing green */
  --muted:#8A8175;
  --ink-muted:#6E6558;
  --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%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-weight:300;font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:300;margin:0;line-height:1.04;letter-spacing:-.01em}
p{margin:0 0 1.15rem}
a{color:inherit;text-decoration:none}

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

/* editorial labels */
.label{
  font-size:.63rem;letter-spacing:.42em;text-transform:uppercase;
  font-weight:400;color:var(--brass);display:flex;align-items:center;gap:.9rem;
}
.label::before{content:"";width:34px;height:1px;background:var(--brass);opacity:.55}
.label.solo::before{display:none}
.num{
  font-family:var(--display);font-size:.95rem;color:var(--brass-txt);
  letter-spacing:.1em;font-style:italic;
}

/* ---------- grain + arch primitives ---------- */
.grain::before{
  content:"";position:absolute;inset:0;background-image:var(--grain);
  mix-blend-mode:overlay;opacity:.5;pointer-events:none;
}
.plate{
  position:relative;overflow:hidden;background:#26241E;
}
.plate .fill{
  position:absolute;inset:0;
  background:
    radial-gradient(130% 100% at 72% 18%,rgba(196,164,110,.30),transparent 58%),
    linear-gradient(158deg,#3A362C 0%,#22201B 52%,#131210 100%);
  background-size:cover;background-position:center;
  /* unifies stock photography from different sources into one shoot */
  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.055);filter:saturate(.72) sepia(.14) contrast(1.06) 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));
}
.plate .shot{display:none}

/* ---- imagery assignment (licensed stock, indicative only) ---- */
/* Jafar, 2026-09-14: the About Belgrave plate takes the coat-on-the-rail photograph.
   It is its OWN file, not a replacement for atelier.jpg - that image is still carried by
   .wr-grid below and by two entries on about.php, and about.php:33 warns against
   overwriting it. A side effect worth keeping: this section and the .wr-grid item below
   it were previously showing the same photograph twice on one page. */
.man-side .plate .fill{background-image:url(../img/coat-inspection.jpg)}
/* Belgrave's own shopfront, 8 Lower Belgrave Street. Lighter treatment than the
   stock imagery, since the original is flat overcast light. */

/* closing "all services" card */
/* This panel matches the height of the picture cards beside it (677px at 1440), but it
   only holds 247px of copy, so flex-end alone left a 361px void of flat black above the
   text and the card read as unfinished. The auto margin below the label takes that free
   space instead: the eyebrow sits at the top of the panel where the other cards have the
   top of their photograph, and the heading, copy and link stay bottom-aligned with the
   text on those cards. Anchored at both ends, the height reads as deliberate. */
.card-all .all-panel{
  background:var(--ink);color:var(--paper);padding:2.2rem 2rem 2rem;
  height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  border-top:2px solid var(--brass);
}
.card-all .all-panel > .label{margin-bottom:auto}
/* .card.card-all, not .card-all: the generic .card p / .card .cta rules further down
   this file score the same 0,2,0 and, being later, were winning. That painted the body
   copy --ink-muted (2.32:1 on this near-black panel) and the CTA --ink, which is the
   panel background exactly - contrast 1.0, so "View all services" was invisible. */
.card.card-all h3{font-family:var(--display);font-size:1.75rem;margin:1rem 0 .8rem;color:var(--paper)}
/* The heading is two sentences with a <br> between them, and the longer of the two,
   "Exceptional Care.", measures 187px at 1.75rem/28px. The card's text column is 176px
   on a phone, 186px from 761 to 1043, and only passes 190px above about 1060 - so at the
   previous fixed 28px the first sentence wrapped and the card read
   "Exceptional / Care. / Simply Priced." on every tablet and phone.
   Measured per pixel from 320 to 1920; the two steps below are where the column is
   genuinely too narrow, and each leaves ~15px of slack rather than sitting on the limit.
   Re-measure if this wording changes - the size and the longest line are locked together. */
@media(max-width:1100px){.card.card-all h3{font-size:1.6rem}}
@media(max-width:760px){.card.card-all h3{font-size:1.5rem}}
.card.card-all p{color:rgba(247,243,234,.68);font-size:.93rem}
.card.card-all .cta{color:var(--paper);margin-top:.6rem}
.card.card-all .cta::after{background:var(--brass-lt)}
.card-all .card-link:hover h3,.card-link:hover .card-all h3{color:var(--brass-lt)}
.arch{border-radius:50vw 50vw 2px 2px / 22vw 22vw 2px 2px}

/* ---------- reveal ---------- */
/* Visible by default. JS arms them only once it is running, so a scripting
   fault can never leave whole sections blank. */
.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{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- concept bar ---------- */
.concept-bar{
  background:var(--ink);color:rgba(247,243,234,.42);
  font-family:var(--ui);font-size:.6rem;letter-spacing:.32em;
  text-transform:uppercase;text-align:center;padding:.65rem 1rem;
}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  /* see the note in site.css - the rows carry the spacing, not the header */
  padding:0;transition:background .5s ease,padding .5s ease,border-color .5s;
  border-bottom:1px solid transparent;
  /* site.css keeps the header solid for interior pages. The homepage starts
     transparent over the hero, so both must be reset explicitly here. */
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
}
header.stuck,header.panel-open{
  background:rgba(247,243,234,.97);backdrop-filter:blur(18px);
  border-bottom-color:rgba(20,19,15,.1);
}
/* Row one folds away on scroll and the bar alone stays - Jafar, 2026-09-11. Mirrors
   site.css; see the long note there. Guarded by min-width because below 1151px the bar
   is display:none and row one IS the header. */
.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}
}
@media(max-width:1150px){
  header.stuck .hdr-main > .wrap{padding:.5rem 0}
}
header.panel-open .brand,header.panel-open .menu a{color:var(--ink)}
header.panel-open .hdr-tel{color:var(--ink)}
/* .panel-open turns the header cream exactly as .stuck does, so everything that flips
   on .stuck has to flip here too. Measured before adding these: the phone icon sat at
   --brass-lt on cream (2.13:1, a smudge) and the Contact/Price List divider was
   paper-tinted on paper, so it vanished. */
header.panel-open .hdr-tel .tel-ico{color:var(--brass-txt)}
header.panel-open .menu a.m-sec{color:#6A6355}
header.panel-open .menu a.sec-first::before{background:rgba(20,19,15,.16)}
header.panel-open .hdr-bar{border-top-color:rgba(20,19,15,.09)}

.brand{display:flex;align-items:baseline;gap:.7rem;color:var(--paper);transition:color .5s}
header.stuck .brand{color:var(--ink)}
/* 2.2rem to match site.css. At 2.4rem the homepage nav row was ~11px wider, which
   under flex pressure came off the LOGO - the mark rendered 273px on the homepage
   against 290px on every inner page at the same viewport, so it visibly resized as you
   navigated. The two navs still differ in type by design (lighter over the hero); the
   mark should not. */
.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;
}
/* It is a button: it does not wrap, and it does not get shrunk to make room for
   something else. Shorter than a page button because this bar is the whole header for
   the length of the scroll - see site.css. */
.btn.hdr-cta{
  white-space:nowrap;flex:none;
  padding:.92rem 1.7rem .8rem;
  font-size:.66rem;letter-spacing:.14em;text-indent:.14em;
}
/* Fills to ink rather than emptying to transparent. Emptying looked right over the hero,
   where the header is transparent on a near-black photograph, but once the header sticks
   it is cream, and brass on cream is 3.16:1 - below AA at the moment the visitor is
   pointing at it. Ink gives 16.8:1 on both grounds, and the brass border keeps the shape
   legible on the dark one. Tracking is restated so the box cannot widen and shove the
   nav along the bar. */
.btn.hdr-cta:hover{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
  letter-spacing:.14em;text-indent:.14em;
}

/* ---- header, below the desktop breakpoint -------------------------------------
   The nav bar and the utility links both go at 1150px, which is where .menu is
   already hidden and the burger takes over. Leaving .hdr-bar visible left an empty
   band under the brand. Nothing is lost - inc/footer.php builds the drawer from #menu,
   so all nine links and Book Collection are in it, and the drawer footer carries the
   telephone number.
   The button itself goes at 560px, where it was taking half a phone screen beside the
   logo. The sticky action bar at the foot of the page already offers Book Collection. */
@media(max-width:1150px){
  .hdr-bar{display:none}
}
/* On a phone the number collapses to its icon - see the note in site.css. */
@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%);
  }
}
/* NOTE: font-size and letter-spacing here are overridden further down this file, in the
   "navigation + buttons" refinements, which set .78rem/.15em to match site.css. They are
   restated at those values rather than left at .68rem/.24em so this block does not read
   as the effective size when it is not. Colour, position, padding and transition ARE
   effective here - the light tint is the home page's over-the-hero treatment. */
.menu a{
  font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(247,243,234,.82);position:relative;padding-bottom:3px;transition:color .5s;
}
/* Price List and Advice Centre, carried down from the old utility strip. Secondary, so
   a step smaller with a hairline between the groups. Over the dark hero the rule and the
   text are paper-tinted; both flip with the header when it sticks. */
.menu a.m-sec{font-size:.72rem;color:rgba(247,243,234,.62)}
header.stuck .menu a.m-sec{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(247,243,234,.22);transition:background .5s;
}
header.stuck .menu a.sec-first::before{background:rgba(20,19,15,.16)}
header.stuck .menu a{color:var(--ink-muted)}
.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%}
/* --brass is right over the hero, where the header is transparent on a near-black
   photograph. Once the header sticks it turns cream, and the same brass is 3.16:1 -
   below AA for text this size, at the exact moment the visitor is pointing at it.
   --brass-txt is 6.13:1 on --paper and exists for this (see site.css:15). */
.menu a:hover{color:var(--brass)}
header.stuck .menu a:hover{color:var(--brass-txt)}

.btn{
  display:inline-block;padding:1.05rem 2.4rem;font-family:var(--ui);
  font-size:.65rem;letter-spacing:.28em;text-transform:uppercase;font-weight:400;
  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:.34em}
.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)}
/* colour is set explicitly: `inherit` made it dark-on-dark over the hero */
.burger{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:0;margin-right:-10px;
  color:var(--paper);position:relative;
}
header.stuck .burger{color:var(--ink)}
html.nav-open .burger{color:var(--paper)}
.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}
/* duplicated from site.css deliberately - home.css loads after it and both files carry
   the shared chrome rules, so a change to one without the other is a live bug source */
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)}

/* ---------- opening curtain ---------- */
.curtain{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;pointer-events:none;
  animation:lift 1.05s cubic-bezier(.76,0,.24,1) .95s forwards;
}
.curtain span{
  font-family:var(--display);font-size:clamp(1.3rem,4vw,2.3rem);
  letter-spacing:.44em;color:var(--brass-lt);text-indent:.44em;
  opacity:0;animation:markIn .85s ease .1s forwards;
}
@keyframes markIn{to{opacity:1}}
@keyframes lift{to{transform:translateY(-101%)}}

/* ---------- cinematic hero ---------- */
/* A flex column, so .hero-inner and the .hero-foot stats bar stack in normal flow.
   Previously .hero-foot was position:absolute;bottom:0 while .hero-inner carried its
   own min-height:100svh, so the two occupied the same space: measured, the stats bar
   overlapped the hero copy by 156-246px on every device tested, and the hero itself
   ran 52-226px past the viewport on eight of twelve, cutting the bar off below the
   fold. The absolutely positioned .hero-stage, .layer and .hero-veil are unaffected. */
.hero{
  position:relative;min-height:100svh;background:#0B0A08;color:var(--paper);
  overflow:hidden;display:flex;flex-direction:column;
}
.hero-stage{position:absolute;inset:-9% -5%;z-index:0;will-change:transform}
.layer{position:absolute;inset:0}
.l-photo{
  background:url(../img/hero.jpg) center/cover no-repeat;
  filter:saturate(.5) sepia(.24) contrast(1.1) brightness(.62);
  animation:drift 46s ease-in-out infinite;
}
.l-base{
  background:
    radial-gradient(122% 96% at 74% 15%,rgba(196,164,110,.27),transparent 58%),
    linear-gradient(158deg,#3D392E 0%,#221F1A 50%,#0C0B09 100%);
  opacity:.62;mix-blend-mode:multiply;
  animation:drift 52s ease-in-out infinite;
}
.l-form{
  background:
    radial-gradient(36% 60% at 69% 50%,rgba(234,216,180,.21),transparent 72%),
    radial-gradient(18% 44% at 63% 42%,rgba(255,247,226,.15),transparent 76%);
  animation:drift 61s ease-in-out infinite reverse;
}
.l-steam{opacity:.55;filter:blur(40px)}
.l-steam i{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle,rgba(228,216,192,.26),transparent 68%)}
.l-steam i:nth-child(1){width:46vw;aspect-ratio:1;left:42%;top:24%;animation:steam1 34s ease-in-out infinite}
.l-steam i:nth-child(2){width:34vw;aspect-ratio:1;left:64%;top:50%;animation:steam2 45s ease-in-out infinite}
.l-steam i:nth-child(3){width:27vw;aspect-ratio:1;left:28%;top:60%;animation:steam3 53s ease-in-out infinite}
.l-sweep{
  background:linear-gradient(105deg,transparent 34%,rgba(255,245,222,.11) 48%,transparent 62%);
  animation:sweep 18s ease-in-out infinite;
}
.l-vig{background:radial-gradient(112% 84% at 52% 46%,transparent 36%,rgba(6,5,4,.8) 100%)}
.hero-veil{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(104deg,rgba(10,9,7,.94) 0%,rgba(10,9,7,.70) 44%,rgba(10,9,7,.12) 100%);
}

@keyframes drift{
  0%,100%{transform:scale(1.06) translate3d(0,0,0)}
  50%{transform:scale(1.13) translate3d(-1.7%,-1.2%,0)}
}
@keyframes steam1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7%,-15%,0) scale(1.24)}}
@keyframes steam2{0%,100%{transform:translate3d(0,0,0) scale(1.12)}50%{transform:translate3d(6%,-19%,0) scale(.9)}}
@keyframes steam3{0%,100%{transform:translate3d(0,0,0) scale(.94)}50%{transform:translate3d(-5%,-12%,0) scale(1.2)}}
@keyframes sweep{0%,66%,100%{transform:translateX(-46%)}33%{transform:translateX(46%)}}

.hero-inner{
  position:relative;z-index:3;
  /* fills whatever the stats bar leaves, instead of claiming a second full 100svh */
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  /* "safe" centring. Plain centre overflows its padding box equally at both ends when
     the content is taller than the space, which pushed the eyebrow up behind the fixed
     header by 3-23px at 1440x800, 1366x768, 1280x800 and 1024x768. "safe" falls back to
     flex-start in exactly that case, so the top padding is always respected and the
     hero grows downward instead. The unprefixed value is the fallback for old engines. */
  justify-content:center;
  justify-content:safe center;
  /* top clears the fixed header (~130px) at every height; both ends scale with the
     viewport so a 768px laptop is not asked to absorb a fixed 320px of padding */
  /* The minimum MUST exceed the header. Re-measured 2026-09-11 after the header was
     rebuilt to carry Book Collection in the nav bar: the bar is taller than it was, so
     the header AT REST is 220px at 1920/1600 and 219px at 1440, against 211px before.
     14rem/224px left the eyebrow 4px clear - inside the 8px floor this build holds to.
     15rem/240px restores 20px at the tallest case.
     This value and the header height are locked together: re-measure both if either the
     logo size or the bar's contents change again. */
  padding:clamp(15rem,15vh,16rem) 0 clamp(2rem,4vh,3.5rem);
  will-change:transform,opacity;
}
/* The cap has to answer to viewport HEIGHT as well as width. At 1366x768 the old
   width-only clamp produced a 143px face, and two lines of it alone ate 260px of a
   768px screen. min() takes whichever of the two is smaller. */
.hero h1{font-size:clamp(3.2rem,min(10.5vw,9.8vh),9.5rem);line-height:.92;letter-spacing:-.025em}
.hero h1 .it{font-style:italic;color:var(--brass-lt);padding-left:.09em}

/* staged line reveal */
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask>*{transform:translateY(114%);opacity:0;animation:lineUp 1.2s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .mask>span{display:block}
.d1>*{animation-delay:1.0s}
.d2>*{animation-delay:1.14s}
.d3>*{animation-delay:1.30s}
.d4>*{animation-delay:1.52s}
.d5>*{animation-delay:1.68s}
@keyframes lineUp{to{transform:none;opacity:1}}

/* vertical rhythm scales with viewport HEIGHT as well, so a 768px laptop is not
   asked to absorb the same fixed margins as a 1080px desktop. Each clamp tops out
   at the original value, so tall screens are unchanged. */
.hero .lede{font-size:clamp(.98rem,1.5vw,1.12rem);color:rgba(247,243,234,.68);max-width:38ch;margin-top:clamp(1.2rem,2.8vh,2.2rem)}
.hero-cta{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:2.8rem}

.scroll-cue{
  position:absolute;left:50%;bottom:5.4rem;z-index:4;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  font-size:.53rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(247,243,234,.4);opacity:0;animation:markIn 1s ease 2.1s forwards;
}
.scroll-cue .track{position:relative;width:1px;height:56px;background:rgba(247,243,234,.15);overflow:hidden}
.scroll-cue .track::after{
  content:"";position:absolute;left:0;top:-28px;width:1px;height:28px;
  background:linear-gradient(180deg,transparent,var(--brass-lt));
  animation:cue 2.6s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cue{0%{transform:translateY(0)}72%,100%{transform:translateY(84px)}}

/* In flow at the bottom of the flex column, not lifted out of it. flex-shrink:0 so it
   keeps its height when the copy above is tall. */
.hero-foot{
  position:relative;z-index:4;flex:0 0 auto;
  border-top:1px solid rgba(247,243,234,.14);
  opacity:0;animation:markIn 1s ease 2.2s forwards;
}
.hero-foot .wrap{padding:clamp(.9rem,1.9vh,1.5rem) 0}
.hstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.hstat{
  display:flex;flex-direction:column;gap:.55rem;
  padding-left:1.6rem;border-left:1px solid rgba(247,243,234,.16);
}
.hstat:first-child{padding-left:0;border-left:0}
.hstat b{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1;
  color:var(--brass-lt);letter-spacing:-.01em;
}
.hstat span{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,243,234,.68);line-height:1.65;font-weight:400;
}
/* Google rating stat */
.hstat-g b{display:flex;align-items:baseline;gap:.28em}
.hstat-g b i{font-style:normal;font-size:.62em;color:var(--brass)}
.hstat-g span{display:block}
.hstat-g .g svg{display:block;width:100%;height:100%}
.hstat-g .g{
  display:inline-block;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--paper);color:#4285F4;font-family:var(--display);font-style:normal;
  font-size:.78rem;margin-right:.45em;vertical-align:-3px;
}
.hstat-g span{display:block}
/* placeholder markers, removed once the real figures are in */
[data-pending]{position:relative;opacity:.5}
[data-pending]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:repeating-linear-gradient(90deg,var(--brass) 0 3px,transparent 3px 6px);
}

@media(max-width:900px){
  .hstats{grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem}
  .hstat:nth-child(3){padding-left:0;border-left:0}
  .hstat b{font-size:1.5rem}
  .hstat span{font-size:.64rem;letter-spacing:.16em}
}

@media(prefers-reduced-motion:reduce){
  .curtain{display:none}
  .l-base,.l-form,.l-steam i,.l-sweep,.scroll-cue .track::after{animation:none}
  .mask>*{transform:none;opacity:1;animation:none}
  .scroll-cue,.hero-foot{opacity:1;animation:none}
}

/* ---------- seam marquee ---------- */
.seam-strip{
  background:var(--ink-2);color:var(--paper);overflow:hidden;
  border-block:1px solid rgba(168,131,74,.3);padding:1.15rem 0;
}
.marquee{display:flex;gap:0;width:max-content;animation:slide 46s linear infinite}
@media(prefers-reduced-motion:reduce){.marquee{animation:none}}
.marquee span{
  font-family:var(--display);font-size:1.05rem;font-style:italic;
  color:rgba(247,243,234,.72);padding:0 2.4rem;white-space:nowrap;
  display:flex;align-items:center;gap:2.4rem;
}
.marquee span::after{content:"";width:5px;height:5px;background:var(--brass);transform:rotate(45deg)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- manifesto ---------- */
.manifesto{padding:var(--sec-pad) 0;position:relative}
.man-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2.5rem,8vw,7rem);align-items:start}
.man-side{position:sticky;top:130px}
.man-side .plate{aspect-ratio:3/4;margin-top:2.5rem}
.manifesto h2{
  font-size:clamp(2.1rem,4.6vw,3.9rem);margin-bottom:2rem;
}
.manifesto h2 em{font-style:italic;color:var(--brass)}
.manifesto p{color:var(--ink-muted);max-width:52ch;font-size:1.03rem}
.sig{
  margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(20,19,15,.12);
  display:flex;gap:3.5rem;flex-wrap:wrap;
}
/* One stat left in this block (2026-09-07), so it is centred rather than stranded on
   the left. The measure matches .manifesto p, so the rule above it lines up with the
   body copy instead of running the full column width. */
/* Left-aligned, 2026-09-07. This block was centred while the label, heading and all
   three paragraphs above it are left-aligned, so the statistic and the buttons read as
   a separate floating cluster. The 52ch measure stays, so the rule above still matches
   the width of the body copy. */
.sig-solo{max-width:52ch;justify-content:flex-start;text-align:left}
/* The two actions that close the section. Share .sig-solo's 52ch measure and centring
   so the rule, the statistic and the buttons line up as one block rather than three
   separately positioned things. */
.sig-actions{
  max-width:52ch;margin-top:2.2rem;
  display:flex;justify-content:flex-start;gap:1rem;flex-wrap:wrap;
}
/* Two buttons side by side: the tracking flourish on .btn:hover would widen whichever
   one is hovered and shove the other along. Restate the base tracking so only the
   colours change. Same reasoning as the header CTA. */
.sig-actions .btn:hover{letter-spacing:.18em;text-indent:.18em}
@media(max-width:560px){
  .sig-actions{flex-direction:column;align-items:stretch;gap:.8rem}
  .sig-actions .btn{text-align:center}
}
.sig div{min-width:110px}
.sig strong{
  display:block;font-family:var(--display);font-size:2.5rem;
  font-weight:300;color:var(--brass);line-height:1;
}
.sig small{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-muted)}

/* ---------- services rail ---------- */
.services{background:var(--stucco);position:relative}
.pin-wrap{position:relative}
.pin{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem 0 3rem;overflow:hidden;
}
.rail-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;margin-bottom:2.6rem;flex-wrap:wrap;
}
.rail-head h2{font-size:clamp(1.9rem,4vw,3.1rem)}
.rail-hint{
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-muted);display:flex;align-items:center;gap:.7rem;
}
.rail-hint .m{display:none}
.arrows{display:inline-flex;gap:4px;align-items:center}
.arrows b{
  width:6px;height:6px;border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);
  transform:rotate(-45deg);opacity:.2;animation:chev 1.7s ease-in-out infinite;
}
.arrows b:nth-child(2){animation-delay:.18s}
.arrows b:nth-child(3){animation-delay:.36s}
@keyframes chev{0%,55%,100%{opacity:.2}28%{opacity:1}}
.rail-hint{transition:opacity .5s ease}
.services.moved .rail-hint{opacity:0}
@media(prefers-reduced-motion:reduce){.arrows b{animation:none;opacity:.6}}

.rail-viewport{overflow:hidden}
.rail{
  display:flex;gap:1.6rem;width:max-content;
  padding-inline:max(5vw,calc((100vw - 1280px)/2));
  will-change:transform;
}
.card{flex:0 0 clamp(250px,24vw,320px);display:flex}
.card-link{display:flex;flex-direction:column;width:100%}
.card .plate{aspect-ratio:3/4.05}
.card h3{font-size:1.5rem;margin:1.3rem 0 .5rem;transition:color .35s}
.card-link:hover h3{color:var(--brass-txt)}
.card p{font-size:.87rem;color:var(--ink-muted);margin-bottom:.9rem;line-height:1.6}
.card .price{
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
  padding-top:.85rem;border-top:1px solid rgba(20,19,15,.14);margin-top:auto;margin-bottom:.9rem;
}
.card .cta{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);position:relative;padding-bottom:.35rem;
}
.card .cta::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--brass);transition:width .45s cubic-bezier(.2,.7,.2,1);
}
.card-link:hover .cta::after{width:100%}
.card .cta i{font-style:normal;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.card-link:hover .cta i{transform:translateX(6px)}

.rail-bar{
  margin-top:2.4rem;height:1px;background:rgba(20,19,15,.14);position:relative;
}
.rail-bar span{
  position:absolute;left:0;top:-1px;height:3px;width:0;
  background:var(--brass);transition:width .1s linear;
}

/* scroll-affordance cursor over the pinned rail */
.pin.pinned{
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%3E%3Ccircle%20cx='20'%20cy='20'%20r='18.5'%20fill='rgba(20,19,15,.78)'%20stroke='%23A8834A'/%3E%3Cpath%20d='M20%2010l5%206H15z'%20fill='%23EFE8DA'/%3E%3Cpath%20d='M20%2030l-5-6h10z'%20fill='%23EFE8DA'/%3E%3C/svg%3E") 20 20, ns-resize;
}
.pin.pinned a{cursor:pointer}

/* ---------- process ---------- */
.process{background:var(--ink);color:var(--paper);padding:var(--sec-pad) 0}
.proc-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,7vw,6rem);align-items:start}
.proc-side{position:sticky;top:130px}
.proc-side h2{font-size:clamp(2.1rem,4.6vw,3.6rem);margin:1.6rem 0}
.proc-side h2 em{font-style:italic;color:var(--brass-lt)}
.proc-side p{color:rgba(247,243,234,.6);max-width:34ch;font-size:.96rem}
.steps{position:relative;padding-left:3.4rem}
.steps::before{
  content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;
  background:repeating-linear-gradient(180deg,var(--brass) 0 7px,transparent 7px 15px);
  opacity:.55;
}
.step{position:relative;padding:0 0 2.7rem}
.step:last-child{padding-bottom:0}
.step::before{
  content:"";position:absolute;left:-3.4rem;top:.55rem;width:23px;height:23px;
  border:1px solid var(--brass);border-radius:50%;background:var(--ink);
}
.step::after{
  content:"";position:absolute;left:calc(-3.4rem + 9px);top:calc(.55rem + 9px);
  width:5px;height:5px;background:var(--brass);border-radius:50%;
}
.step h3{
  font-family:var(--ui);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass-lt);margin-bottom:.55rem;font-weight:400;
}
.step .st{font-family:var(--display);font-size:1.75rem;line-height:1.2;margin-bottom:.5rem}
.step p{color:rgba(247,243,234,.56);font-size:.92rem;max-width:44ch;margin:0}

/* ---------- collection ---------- */
.collect{background:var(--paper);padding:var(--sec-pad) 0;overflow:hidden}
.col-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,7vw,6rem);align-items:center}
.collect h2{font-size:clamp(2.1rem,4.6vw,3.6rem);margin:1.6rem 0 1.4rem}
.collect h2 em{font-style:italic;color:var(--brass)}
.check{list-style:none;padding:0;margin:2rem 0 2.6rem}
.check li{
  padding:.85rem 0 .85rem 2.2rem;position:relative;
  border-bottom:1px solid rgba(20,19,15,.1);font-size:.95rem;color:var(--ink-muted);
}
.check li::before{
  content:"";position:absolute;left:.2rem;top:1.25rem;width:8px;height:8px;
  border-left:1px solid var(--brass);border-bottom:1px solid var(--brass);
  transform:rotate(-45deg);
}

/* ---------- houses ---------- */
.houses{
  background:var(--moss);color:var(--stucco);text-align:center;
  padding:clamp(4.5rem,9vw,7rem) 0;position:relative;
}
.houses q{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.35;
  max-width:22ch;margin:0 auto;display:block;quotes:none;
}
.houses .diamond{width:7px;height:7px;background:var(--brass-lt);transform:rotate(45deg);margin:0 auto 2.2rem}

/* ---------- locations ---------- */
.locations{background:var(--stucco-2);padding:var(--sec-pad) 0}
/* Line-art landmark per area, supplied by Jafar 2026-08-20. The source files are black
   on a white JPEG background, so multiply drops the white against the cream ground.
   If this section ever goes dark, these need converting to transparent PNGs first. */

/* ---------- reviews ---------- */
.reviews{background:var(--paper);padding:var(--sec-pad) 0}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:3rem}
.rev{border-top:1px solid rgba(20,19,15,.18);padding-top:1.8rem}
.tag{
  display:inline-block;font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass);border:1px dashed rgba(168,131,74,.5);padding:.3rem .7rem;margin-bottom:1.3rem;
}
.rev blockquote{
  margin:0 0 1.5rem;font-family:var(--display);font-size:1.25rem;
  line-height:1.5;color:var(--ink);font-style:italic;
}
.rev cite{font-style:normal;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-muted)}

/* ---------- band ---------- */
.band{
  background:var(--ink);color:var(--paper);text-align:center;
  padding:clamp(5.5rem,11vw,8.5rem) 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(2.2rem,5.2vw,4.2rem);position:relative}
.band h2 em{font-style:italic;color:var(--brass-lt)}
.band p{color:rgba(247,243,234,.6);max-width:44ch;margin:1.5rem auto 2.6rem;position:relative}
.band .btn{position:relative}

/* ---------- footer ---------- */
footer{background:var(--ink-2);color:rgba(247,243,234,.62);padding:5rem 0 2rem;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:3rem}
footer h2{
  font-family:var(--ui);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass-lt);margin-bottom:1.4rem;font-weight:400;
}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.65rem}
footer a:hover{color:var(--brass-lt)}
.foot-brand .brand{color:var(--paper);margin-bottom:1.4rem}
.foot-brand p{max-width:30ch;font-size:.88rem}
.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:.68rem;letter-spacing:.14em;color:rgba(247,243,234,.38);
}

/* ═══ NAVIGATION - full sitemap ═══ */
/* Row one: the mark and the telephone number. Identical geometry to site.css - the only
   thing that differs on the home page is COLOUR, because the header is transparent over
   the dark hero and turns cream once it sticks.
   The padding MUST match site.css. It was left at 1.05rem here when site.css went to
   .95rem, which made the home page header 3px taller than the other 23 pages - the exact
   divergence this pair of files produces every time one is edited without the other. */
.hdr-main > .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.95rem 0;
}
.hdr-actions{display:flex;align-items:center;gap:1.2rem}
/* The telephone number, alone beside the mark on row one. Paper over the hero, ink once
   the header sticks - same flip as .brand. See site.css for why it is set at reading
   size rather than utility size. */
.hdr-tel{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ui);
  font-size:1.08rem;letter-spacing:.05em;color:var(--paper);white-space:nowrap;
  transition:color .5s;
}
header.stuck .hdr-tel{color:var(--ink)}
/* --brass-lt over the near-black hero, --brass-txt on cream: the icon needs a different
   value on each ground and this is the one that changes with the header. */
.hdr-tel .tel-ico{width:19px;height:19px;flex:none;color:var(--brass-lt);transition:color .5s}
header.stuck .hdr-tel .tel-ico{color:var(--brass-txt)}
.hdr-tel:hover{color:var(--brass-lt)}
header.stuck .hdr-tel:hover{color:var(--brass-txt)}
.hdr-bar{border-top:1px solid rgba(247,243,234,.12);transition:border-color .5s}
header.stuck .hdr-bar{border-top-color:rgba(20,19,15,.09)}
/* The bar shares row one's column so the nav starts on the logo's left edge and the
   button ends on the number's right edge - see site.css. */
.hdr-bar-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

/* 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 MUST be stated here. Without it the winning declaration is .menu a, which on
   this page is rgba(247,243,234,.82) for the nav over the dark hero - on the panel's
   own --paper ground that measured 1.00:1, i.e. the numbers were painted exactly the
   background colour. header.stuck and header.panel-open both rescued it, but
   .panel-open is only added on mouseenter (inc/footer.php), so a keyboard user opening
   the panel via :focus-within at scroll 0 saw three brass underlines with nothing
   above them. */
.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;       /* was #7C7568: 4.12 on paper for 10-11px labels. Now 5.82 */
  --brass-txt:#74561F;   /* was #8A6A31: 4.11 on stucco, 3.65 on stucco-2. Now 5.57 / 4.94 */   /* darker brass, for small text on light grounds */
}
body{font-weight:400;font-size:17px;line-height:1.72}

/* editorial labels */
.label{
  font-size:.76rem;letter-spacing:.24em;font-weight:500;
  color:var(--brass-txt);line-height:1.5;
}
.label::before{width:30px}
.hero .label,.process .label,.band .label{color:var(--brass-lt)}
.num{font-size:1.05rem}

/* navigation + buttons */
.menu a{font-size:.78rem;letter-spacing:.15em;font-weight:400}
header.stuck .menu a{color:var(--ink-muted)}
.btn{
  font-size:.75rem;letter-spacing:.18em;font-weight:500;
  display:inline-block;line-height:1;
  /* all-caps has no descenders, so the glyphs sit optically high in the
     line box - slightly more padding above than below re-centres them */
  padding:1.14rem 2.3rem .96rem;
  text-indent:.18em;          /* cancels the trailing letter-space */
}
.btn:hover{letter-spacing:.22em;text-indent:.22em}
.menu{align-items:center}
/* `.menu a` (0,1,1) outranks `.btn` (0,1,0), so its padding-bottom:3px,
   font-size and tracking were leaking into the header button. Restate
   them at higher specificity. */
/* 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. */
/* approved brochure logo, used consistently across the site */
/* 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}
/* duplicated from site.css on purpose - home.css loads after it, so leaving the old
   values here would have kept the homepage on the small logo while every other page
   used the new one. See the measurement note in site.css. */
/* 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. */
/* lift removed with the 2026-09-11 rebuild: brand and utility links share row one now */
@media(prefers-reduced-motion:reduce){.brand,.brand .logo{transition:none}}
.foot-brand .logo{width:260px}
.mnav-top .logo{width:168px}
/* superseded lockup rules kept harmless below */
.brand{
  display:inline-flex;flex-direction:column;align-items:stretch;
  gap:0;text-align:center;line-height:1;
}
.foot-brand .brand{margin-bottom:1.5rem}
@media(max-width:760px){
}

/* hero */
.hero .lede{font-size:clamp(1.06rem,1.6vw,1.22rem);color:rgba(247,243,234,.82);line-height:1.65}
.hero-foot .wrap{font-size:.72rem;letter-spacing:.16em;color:rgba(247,243,234,.7)}
.scroll-cue{font-size:.64rem;letter-spacing:.2em;color:rgba(247,243,234,.62)}
.concept-bar{font-size:.68rem;letter-spacing:.18em;color:rgba(247,243,234,.62)}
.marquee span{font-size:1.15rem;color:rgba(247,243,234,.82)}

/* manifesto */
.manifesto p{font-size:1.08rem;color:var(--ink-muted);line-height:1.8}
.sig small{font-size:.7rem;letter-spacing:.16em;font-weight:500;color:var(--ink-muted)}

/* service cards */
.rail-hint{font-size:.72rem;letter-spacing:.16em;font-weight:500}
.card p{font-size:.97rem;color:var(--ink-muted);line-height:1.68}
.card .price{font-size:.72rem;letter-spacing:.14em;font-weight:500;color:var(--brass-txt)}
.card .cta{font-size:.72rem;letter-spacing:.16em;font-weight:500}

/* process */
.proc-side p{font-size:1.06rem;color:rgba(247,243,234,.78);line-height:1.75}
.step h3{font-size:.74rem;letter-spacing:.18em;font-weight:500;color:var(--brass-lt)}
.step p{font-size:1rem;color:rgba(247,243,234,.74);line-height:1.7}

/* collection */
.collect .col-grid p{font-size:1.06rem}
.check li{font-size:1.02rem;color:var(--ink-muted)}

/* locations */

/* reviews */
.tag{font-size:.64rem;letter-spacing:.14em;font-weight:500;color:var(--brass-txt)}
.rev cite{font-size:.7rem;letter-spacing:.16em;font-weight:500;color:var(--ink-muted)}

/* band + footer */
.band p{font-size:1.08rem;color:rgba(247,243,234,.78)}
footer{font-size:.98rem;color:rgba(247,243,234,.76)}
footer h2{font-size:.7rem;letter-spacing:.18em;font-weight:500}
footer li{color:rgba(247,243,234,.74);margin-bottom:.7rem}
.foot-brand p{font-size:.97rem;color:rgba(247,243,234,.66)}
.foot-bottom{font-size:.76rem;letter-spacing:.08em;color:rgba(247,243,234,.55)}

/* ═══ INSTRUMENTS: line-drawn tools, stroked in on scroll ═══ */
.tools{background:var(--paper);padding:var(--sec-pad) 0;overflow:hidden}
.tools-head{text-align:center;max-width:44ch;margin:0 auto 3.4rem}
.tools-head .label{justify-content:center}
.tools-head .label::before{display:none}
.tools-head h2{
  font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.6rem);
  font-weight:300;margin:1.1rem 0 .9rem;
}
.tools-head h2 em{font-style:italic;color:var(--brass-txt)}
.tools-head p{color:var(--ink-muted);margin:0;font-size:1.02rem}
.tools-row{display:grid;grid-template-columns:repeat(6,1fr);gap:1.6rem}
.tool{text-align:center}
.tool svg{
  width:100%;max-width:94px;height:auto;display:block;margin:0 auto 1rem;
  overflow:visible;
}
.tool svg :is(path,circle,line,ellipse){
  fill:none;stroke:var(--brass);stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:360;stroke-dashoffset:360;
  transition:stroke-dashoffset 1.7s cubic-bezier(.22,.9,.3,1);
}
.tools-row.in svg :is(path,circle,line,ellipse){stroke-dashoffset:0}
.tools-row.in .tool:nth-child(1) *{transition-delay:.00s}
.tools-row.in .tool:nth-child(2) *{transition-delay:.12s}
.tools-row.in .tool:nth-child(3) *{transition-delay:.24s}
.tools-row.in .tool:nth-child(4) *{transition-delay:.36s}
.tools-row.in .tool:nth-child(5) *{transition-delay:.48s}
.tools-row.in .tool:nth-child(6) *{transition-delay:.60s}
.tool span{
  display:block;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--ink-muted);
}
.tool:hover svg :is(path,circle,line,ellipse){stroke:var(--ink);transition:stroke .4s}
@media(prefers-reduced-motion:reduce){
  .tool svg :is(path,circle,line,ellipse){stroke-dashoffset:0;transition:none}
}
@media(max-width:900px){.tools-row{grid-template-columns:repeat(3,1fr);gap:2.4rem}}
@media(max-width:520px){.tools-row{grid-template-columns:repeat(2,1fr)}}

/* ═══ BEFORE & AFTER ═══ */
.ba{background:var(--ink);color:var(--paper);padding:var(--sec-pad) 0}
.ba-head{max-width:52ch;margin-bottom:2.6rem}
.ba-head h2{font-size:clamp(2rem,4.4vw,3.4rem);margin:1.3rem 0 1rem}
.ba-head h2 em{font-style:italic;color:var(--brass-lt)}
.ba-head p{color:rgba(247,243,234,.72);font-size:1.06rem;margin:0}
.ba-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid rgba(193,162,101,.35);cursor:ew-resize;
  touch-action:none;user-select:none;
}
/* Real Belgrave work, supplied 2026-08-20. Both frames are the same shoes, same
   angle and lighting, so no filters are applied: the difference on screen is the
   actual difference in the photographs. */
.ba-layer{position:absolute;inset:0;background-position:center;background-size:cover}
.ba-after{background-image:url(../img/ba-shoes-after.jpg)}
.ba-before{
  background-image:url(../img/ba-shoes-before.jpg);
  /* A light touch only, to separate the two halves visually. Deliberately subtle:
     the real difference is in the photographs, this just helps it read at a glance. */
  filter:saturate(.86) brightness(.94) contrast(1.02);
  clip-path:inset(0 50% 0 0);
}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:var(--brass-lt);transform:translateX(-1px);z-index:3;pointer-events:none;
}
.ba-handle span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:var(--ink);border:1px solid var(--brass-lt);
  display:grid;place-items:center;color:var(--brass-lt);
  font-size:1rem;letter-spacing:.1em;box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.ba-tag{
  position:absolute;top:1.2rem;z-index:2;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  padding:.45rem .9rem;background:rgba(12,11,9,.72);
  border:1px solid rgba(247,243,234,.2);color:rgba(247,243,234,.85);
}
.ba-tag-l{left:1.2rem}
.ba-tag-r{right:1.2rem}
.ba-note{
  margin-top:1.4rem;font-size:.82rem;color:rgba(247,243,234,.5);
  display:flex;gap:.7rem;align-items:center;
}
.ba-note::before{content:"";width:22px;height:1px;background:var(--brass);flex:none}

/* ═══ WORKROOM ═══ */
.workroom{background:var(--stucco);padding:var(--sec-pad) 0;}
.wr-head{text-align:center;max-width:56ch;margin:0 auto 3rem}
.wr-head .label{justify-content:center}
.wr-head .label::before{display:none}
.wr-head h2{font-size:clamp(2rem,4.4vw,3.2rem);margin:1.2rem 0 1rem}
.wr-head h2 em{font-style:italic;color:var(--brass-txt)}
.wr-head p{color:var(--ink-muted);margin:0}
.wr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.wr-item .plate{aspect-ratio:3/4}
.wr-item h3{
  font-family:var(--display);font-size:1.35rem;font-weight:400;
  margin:1.2rem 0 .5rem;
}
.wr-item p{font-size:.95rem;color:var(--ink-muted);margin:0;line-height:1.65}
.wr-grid .wr-item:nth-child(1) .fill{background-image:url(../img/atelier.jpg)}
.wr-grid .wr-item:nth-child(2) .fill{background-image:url(../img/alterations.jpg)}
.wr-grid .wr-item:nth-child(3) .fill{background-image:url(../img/shoe-repair.jpg)}

/* ═══ POSTCODE CHECK ═══ */
.pc{margin:2.4rem 0 1rem;max-width:30rem}
.pc label{
  display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--brass-txt);margin-bottom:.9rem;
}
.pc-row{display:flex;gap:.7rem}
.pc-row input{
  flex:1;min-width:0;font-family:var(--ui);font-size:1rem;font-weight:400;
  padding:1rem 1.1rem;border:1px solid rgba(20,19,15,.22);background:#fff;
  color:var(--ink);letter-spacing:.06em;text-transform:uppercase;
}
/* #9b9385 measured 3.04:1 on the white field - below AA. #7a7468 is 4.64:1 and
   still reads as placeholder rather than typed text. */
.pc-row input::placeholder{color:#7a7468;text-transform:none;letter-spacing:0}
.pc-row input:focus{outline:none;border-color:var(--brass)}
.pc-out{
  margin-top:1.1rem;font-size:.97rem;line-height:1.6;
  min-height:1.4rem;display:none;
}
.pc-out.show{display:block}
.pc-out.yes{color:var(--ink)}
.pc-out.no{color:var(--ink-muted)}
.pc-out strong{font-weight:500}
.pc-out a{border-bottom:1px solid var(--brass);padding-bottom:1px}

/* ═══ STICKY MOBILE ACTION 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;align-items:stretch}
.mobar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:.95rem .6rem;text-align:center;
}
.mobar .call{border:1px solid rgba(247,243,234,.32);color:var(--paper)}
.mobar .book{background:var(--brass);color:#17140E;flex:1.5}

/* ═══ CHOREOGRAPHY: masked line reveals + image clip-in ═══ */
.ln{display:block;overflow:hidden}
.ln>span{
  display:block;transform:translateY(110%);
  transition:transform 1.15s cubic-bezier(.16,1,.3,1);
}
.ln.on>span{transform:none}

/* Images are visible by default. JS "arms" them only if it is running, so a
   script failure can never leave the page imageless. */
.plate{transition:clip-path 1.35s cubic-bezier(.16,1,.3,1)}
.plate.armed{clip-path:inset(0 0 100% 0)}
.plate.armed.seen{clip-path:inset(0 0 0 0)}

@media(prefers-reduced-motion:reduce){
  .ln>span{transform:none;transition:none}
  .plate{clip-path:none;transition:none}
}

/* ═══ THE BIG LINE: type as a window onto the image ═══ */
.bigline{
  background:var(--ink);padding:var(--sec-pad) 0;
  overflow:hidden;position:relative;
}
/* The same photograph sits behind the section, but heavily dimmed. The type is clipped
   from the image at full brightness, so the letters read as light coming through a dark
   room. If the two were the same brightness the text would disappear entirely. */
.bigline .bl-img{
  position:absolute;inset:0;z-index:0;
  background:url(../img/about-band.jpg) center 45%/cover no-repeat;
  background-attachment:fixed;
  opacity:.2;
}
.bigline::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,11,9,.75),rgba(12,11,9,.45) 50%,rgba(12,11,9,.8));
}
.bigline .wrap{position:relative;z-index:2}
.bigline .eyebrow{
  text-align:center;font-size:.66rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--brass);margin-bottom:clamp(1.5rem,4vw,3rem);font-weight:500;
}
.bigline h2{
  font-family:var(--display);font-weight:300;text-align:center;
  font-size:clamp(3rem,13.5vw,15rem);line-height:.86;letter-spacing:-.03em;
  margin:0;
}
.bigline h2 span{
  display:block;
  /* Jafar's shop photograph, clipped into the type. The warm brass tones read well
     through large letterforms, and it is scenery rather than detail at this size.

     The photograph alone was not enough. .bl-img paints the SAME picture behind this
     type at opacity .2, so wherever the shop is dark the letter and the ground behind
     it were the same near-black and the word simply vanished: measured per glyph pixel,
     "Refine." came out at a median 1.08:1 with 89% of its area below 3:1, and on a
     390px phone all three words were ghost outlines. Large text needs 3:1.

     So the photograph is now composited over a solid brass plate with blend-mode
     lighten, which takes the lighter of the two per channel. Where the picture is
     brighter than the brass it still shows through exactly as before; where it is
     darker it is clamped to --brass-lt, which measures 7.86:1 on --ink. The effect
     survives and the words cannot go dark. */
  background-image:url(../img/about-band.jpg),linear-gradient(var(--brass-lt),var(--brass-lt));
  background-size:cover,cover;
  background-position:center 45%,center;
  background-attachment:fixed,fixed;
  background-blend-mode:lighten;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .bigline h2 span{color:var(--brass-lt);-webkit-text-fill-color:var(--brass-lt)}
}
.bigline .foot{
  text-align:center;margin-top:clamp(1.6rem,4vw,3rem);
  font-size:1.02rem;color:rgba(247,243,234,.6);
}
@media(hover:none){
  .bigline h2 span,
  .bigline .bl-img{background-attachment:scroll}
  /* two layers now, so the shorthand must name both or the second is dropped */
  .bigline h2 span{background-attachment:scroll,scroll}
}

/* ═══ CUSTOM CURSOR ═══ */
.cur{
  position:fixed;top:0;left:0;z-index:300;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid var(--brass);opacity:0;
  transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),
             margin .35s cubic-bezier(.2,.7,.2,1),background .35s,opacity .3s,border-color .3s;
  display:grid;place-items:center;
}
.cur.on{opacity:1}
.cur i{
  font-style:normal;font-family:var(--ui);font-size:.52rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .25s;
  white-space:nowrap;font-weight:500;
}
.cur.link{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(168,131,74,.16)}
.cur.drag{
  width:74px;height:74px;margin:-37px 0 0 -37px;
  background:var(--brass);border-color:var(--brass);
}
.cur.drag i{opacity:1}
.cur-dot{
  position:fixed;top:0;left:0;z-index:301;pointer-events:none;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--brass);opacity:0;transition:opacity .3s;
}
.cur-dot.on{opacity:1}
@media(hover:none),(pointer:coarse){.cur,.cur-dot{display:none}}

/* ═══ GOOGLE REVIEWS CAROUSEL ═══ */
.rv-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;margin:2.4rem 0 2.6rem;
  padding-bottom:1.6rem;border-bottom:1px solid rgba(20,19,15,.14);
}
.rv-score{display:flex;align-items:center;gap:1.1rem}
.rv-score .g{
  width:44px;height:44px;border-radius:50%;flex:none;
  border:1px solid rgba(20,19,15,.14);display:grid;place-items:center;background:#fff;
}
.rv-score .g svg{width:22px;height:22px;display:block}
.rv-score b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:1.9rem;line-height:1;color:var(--ink);
}
.rv-stars{color:var(--brass-txt);letter-spacing:.16em;font-size:.9rem;margin-top:.3rem}
.rv-score small{
  display:block;font-size:.72rem;letter-spacing:.14em;color:var(--ink-muted);
  margin-top:.45rem;
}
.rv-nav{display:flex;gap:.6rem;align-items:center}
.rv-nav button{
  width:46px;height:46px;border-radius:50%;background:none;cursor:pointer;
  border:1px solid rgba(20,19,15,.22);color:var(--ink);
  display:grid;place-items:center;font-size:1rem;transition:.35s;
}
.rv-nav button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rv-track{
  display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:.5rem;
}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{
  flex:0 0 clamp(260px,31%,380px);scroll-snap-align:start;
  background:#fff;border:1px solid rgba(20,19,15,.1);
  padding:1.9rem 1.7rem;display:flex;flex-direction:column;
}
.rv-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.rv-av{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--moss);color:var(--stucco);display:grid;place-items:center;
  font-family:var(--display);font-size:1.15rem;
}
.rv-who strong{
  display:block;font-weight:500;font-size:.95rem;color:var(--ink);letter-spacing:.01em;
}
.rv-who span{font-size:.72rem;color:var(--ink-muted);letter-spacing:.08em}
.rv-card .st{color:var(--brass-txt);letter-spacing:.16em;font-size:.82rem;margin-bottom:.9rem}
.rv-card p{
  font-family:var(--display);font-size:1.12rem;line-height:1.55;color:var(--ink);
  margin:0 0 1.2rem;
}
.rv-card .src{
  margin-top:auto;padding-top:1rem;border-top:1px solid rgba(20,19,15,.09);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);
  display:flex;align-items:center;gap:.5rem;
}
.rv-note{
  margin-top:1.8rem;font-size:.82rem;color:var(--ink-muted);
  display:flex;gap:.7rem;align-items:center;
}
.rv-note::before{content:"";width:22px;height:1px;background:var(--brass);flex:none}
@media(max-width:760px){
  .rv-card{flex:0 0 82%}
  .rv-nav{display:none}
}


/* ═══ MOBILE NAV OVERLAY ═══
   A direct child of <body>, not of the header. The header is fixed and carries a
   backdrop-filter, which makes it the containing block for fixed descendants and
   also swaps colours for the desktop mega menu. Both broke the panel when it
   lived inside. Nothing here touches html/body overflow. */
.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;-webkit-overflow-scrolling:touch;
  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;margin-bottom:.6rem;border-bottom:1px solid rgba(247,243,234,.14);
}
.mnav-close{
  width:44px;height:44px;flex:none;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;letter-spacing:.1em;color:rgba(247,243,234,.6);
}
.mnav-foot a{color:inherit}
@media(prefers-reduced-motion:reduce){.mnav,.mnav-body,.mnav-item .chev{transition:none}}

/* ---------- responsive ---------- */
/* below this width the rail reverts to native horizontal swipe */
@media(max-width:900px){
  .pin-wrap{height:auto!important}
  .pin{position:static;height:auto;padding:clamp(4rem,9vw,6rem) 0;cursor:auto}
  .rail-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .rail-viewport::-webkit-scrollbar{display:none}
  .rail{transform:none!important}
  .card{scroll-snap-align:start}
  .rail-bar{display:none}
}

@media(max-width:1100px){
  .man-grid,.proc-grid,.col-grid{grid-template-columns:1fr}
  .man-side,.proc-side{position:static}
  .man-side .plate{aspect-ratio:16/10}
  .rev-grid{grid-template-columns:1fr;gap:2rem}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .mobar{display:block}
  /* clear the fixed bar so it never covers content */
  footer{padding-bottom:7.5rem}
  .band{padding-bottom:9rem}
  body{scroll-padding-bottom:6rem}

  /* the desktop nav is hidden entirely; mobile uses the .mnav overlay */
  .menu{display:none}
  .mnav{display:flex}
  .burger{display:block}

  /* Hero grows to fit rather than being forced to a full screen, and the stats
     bar sits in normal flow beneath the content instead of overlapping it.
     The header is taller here (utility bar + stacked lockup), so it also needs
     tighter padding of its own and real clearance beneath. */
  /* header{padding:.9rem 0} removed 2026-09-10. site.css sets header{padding:0}, and this
     was the only thing making the homepage header 28px taller than every other page below
     760px - 127px against 99px on a phone - so the bar visibly jumped as soon as you left
     the homepage. Measured across both templates at 12 widths. */
  header.stuck{padding:0 0 5px 0}
  .hero{min-height:auto}
  /* padding-top only has to clear the 127px mobile header; 11.5rem was 184px, which
     pushed the hero well past a short phone screen for no gain. */
  /* 431-760px: the utility strip is still shown, so the header is 164px and the
     minimum must clear it. 9rem/144px did not, and the eyebrow sat 18px behind. */
  /* +1rem: the 150px logo floor put the header at 127px, and at 320x568 and 360x740
     the eyebrow was left 1px clear of it. */
  /* 431-760px: no lift in this band (the strip is too narrow for the links to clear a
     risen logo), so the header is at its tallest here - and at 600px the four utility
     links wrap to two lines, taking it to 177px. 13rem/208px clears that. */
  .hero-inner{min-height:auto;padding:clamp(13rem,17vh,13.5rem) 0 2.5rem}
  .hero h1{font-size:clamp(2.6rem,12vw,4rem)}
  .hero .lede{margin-top:1.6rem}
  .hero-cta{margin-top:2rem;gap:.8rem}
  .hero-cta .btn{flex:1 1 auto;text-align:center}
  .hero-foot{position:relative;margin-top:1.5rem}
  .hero-foot .wrap{padding:1.6rem 0 2rem}
  .hstats{grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem}
  .hstat:nth-child(3){padding-left:0;border-left:0}
  .hstat b{font-size:1.5rem}
  .hstat span{font-size:.64rem;letter-spacing:.16em}
  .scroll-cue{display:none}

  div#rail .card{padding:0 0 0 10px}

  /* workroom: three columns is far too tight on a phone */
  .wr-grid{grid-template-columns:1fr;gap:2.6rem}
  .wr-item .plate{aspect-ratio:16/10}
  .wr-item h3{font-size:1.5rem;margin:1.1rem 0 .5rem}
  .wr-item p{font-size:1rem}
  .wr-head{margin-bottom:2.4rem}

    .foot-grid{grid-template-columns:1fr;gap:2.5rem}
  .steps{padding-left:2.6rem}
  .step::before{left:-2.6rem}
  .step::after{left:calc(-2.6rem + 9px)}
}

/* ---------- Belgrave Atelier, positioned apart from the service list ---------- */
.atelier{
  position:relative;background:var(--moss);color:var(--paper);
  padding:var(--sec-pad) 0;overflow:hidden;text-align:center;
}
/* Belgrave's own Atelier photograph behind the lockup, dimmed so the moss ground still
   carries the colour and the type stays comfortably readable. Swapped 2026-09-07 from
   atelier-curtain-making.jpg to the interior Jafar supplied, so the homepage band and
   the Atelier page show the same room. */
.at-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../img/atelier-curtains.jpg) center 45%/cover no-repeat;
  opacity:.26;
}
.atelier::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,32,27,.78),rgba(21,32,27,.5) 48%,rgba(21,32,27,.82));
}
.at-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:80vw;height:70vh;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(196,164,110,.2),transparent 65%);
}
.at-inner{position:relative;z-index:3}
.at-mark{
  font-size:.72rem;letter-spacing:.46em;text-transform:uppercase;
  color:var(--brass-lt);margin:0 0 2.2rem;text-indent:.46em;
}
.atelier h2{
  font-size:clamp(2.4rem,6.5vw,5rem);line-height:1;font-weight:300;
  letter-spacing:-.02em;margin:0 0 1.8rem;
}
.atelier h2 em{font-style:italic;color:var(--brass-lt)}
.at-copy{
  max-width:44ch;margin:0 auto 2.6rem;color:rgba(247,243,234,.72);
  font-size:1.03rem;line-height:1.8;
}
@media(max-width:760px){
  .at-mark{letter-spacing:.3em;text-indent:.3em}
  .atelier{padding:var(--sec-pad) 0}
}

/* ---------- collection, rebuilt 2026-08-18 ----------
   Van and shopfront imagery removed at Jafar's request. The right-hand column is
   now the coverage check itself, which is the actual first step of the journey:
   postcode -> covered? -> continue to SMRT for real dates and times. */
.collect-plain .col-grid{align-items:start}
.collect-plain .col-grid > div:first-child{padding-top:.4rem}

.turnaround{
  margin-top:2.4rem;padding:1.5rem 0 0;border-top:1px solid rgba(20,19,15,.14);
  max-width:52ch;
}
.turnaround h3{
  font-family:var(--ui);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--brass-txt);margin:0 0 .8rem;
}
.turnaround p{font-size:.98rem;line-height:1.8;color:var(--ink-muted);margin:0}

.pc-card{background:var(--stucco);padding:clamp(2rem,4vw,3rem)}
.pc-card h3{
  font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.06;margin:1.1rem 0 1rem;
  font-family:var(--display);font-weight:300;
}
.pc-card h3 em{font-style:italic;color:var(--brass-txt)}
.pc-intro{font-size:.97rem;line-height:1.75;color:var(--ink-muted);margin:0 0 1.8rem}
.pc-card .pc{margin:0}
.pc-go{
  display:inline-block;margin-top:.7rem;font-weight:500;
  border-bottom:1px solid var(--brass);padding-bottom:2px;
}

/* the comparison returns when real photography arrives */
.ba-pending{
  display:grid;place-content:center;text-align:center;gap:.6rem;
  aspect-ratio:21/9;border:1px dashed rgba(247,243,234,.28);
  background:rgba(247,243,234,.03);
}
.ba-pending p{
  margin:0;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-lt);font-weight:500;
}
.ba-pending span{font-size:.95rem;color:rgba(247,243,234,.5)}

@media(max-width:760px){
  .ba-pending{aspect-ratio:4/3}
  .turnaround{margin-top:2rem}
}

/* existing customers skip the coverage check and go straight to SMRT */
.pc-existing{
  margin:1.6rem 0 0;padding-top:1.3rem;
  border-top:1px solid rgba(20,19,15,.14);
  font-size:.9rem;color:var(--ink-muted);
}
.pc-existing a{
  color:var(--ink);font-weight:500;white-space:nowrap;
  border-bottom:1px solid var(--brass);padding-bottom:1px;
}
.pc-existing a:hover{color:var(--brass-txt)}

/* ---------- Collection & Delivery: mobile ----------
   The section was rebuilt on 2026-08-18 around the coverage check, but kept the old
   two-column responsive rules that were written for the van image. These are the
   rules the new layout actually needs. */
@media(max-width:1100px){
  .collect-plain .col-grid{gap:2.6rem}
}
@media(max-width:760px){
  .collect{padding:var(--sec-pad) 0}
  .collect-plain .col-grid > div:first-child{padding-top:0}
  .collect h2{margin:1.2rem 0 1.1rem}

  .check{margin:1.6rem 0 2rem}
  .check li{font-size:.94rem;padding:.75rem 0 .75rem 2rem}
  .check li::before{top:1.15rem}

  .turnaround{margin-top:1.8rem;padding-top:1.3rem}

  .pc-card{padding:1.6rem 1.4rem}
  .pc-card h3{font-size:1.6rem;margin:.9rem 0 .8rem}
  .pc-intro{font-size:.94rem;margin-bottom:1.4rem}

  /* input and button side by side leaves the field unusably narrow on a phone */
  .pc-row{flex-direction:column;gap:.6rem}
  .pc-row input{width:100%;font-size:16px;padding:.95rem 1rem}
  .pc-row .btn{width:100%;text-align:center;padding:1.05rem 1rem .9rem}

  .pc-out{font-size:.94rem}
  .pc-existing{margin-top:1.3rem;padding-top:1.1rem;font-size:.88rem}
  .pc-existing a{white-space:normal}
}

/* ---------- hero coverage check ----------
   Jafar's suggested layout, 2026-08-18. A new customer must be able to establish that
   Belgrave reach them before SMRT asks them to register, so the qualifying question sits
   above the fold. Existing customers get the direct route on the second row.
   Kept deliberately restrained so it does not turn a luxury hero into a form. */
.hero-check{margin-top:clamp(1.3rem,3vh,2.4rem);max-width:38rem;--hc-h:3.6rem}
.hc-title{
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--brass-lt);margin:0 0 .9rem;
}
.hc-row{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
  border:1px solid rgba(193,162,101,.55);
  /* No backdrop-filter here. The hero runs seven looping animations behind this block,
     so a blurred backdrop would have to be re-sampled and re-blurred every frame, which
     made pointer movement stutter in the hero and nowhere else. A flat translucent
     ground looks the same over dark imagery and costs nothing. */
  background:rgba(12,11,9,.55);
}
.hc-row + .hc-row{margin-top:.7rem}
/* the hero row also carries .pc so the checker JS finds it, but .pc is styled for the
   Collection section and brings a 30rem cap and its own margins. Reset both here, or
   the two rows end up 480px and 608px wide. */
.hc-row.pc{max-width:none;margin:0}

.hc-tag{
  display:grid;place-items:center;text-align:center;
  flex:0 0 9.4rem;padding:0 .8rem;min-height:var(--hc-h);
  font-family:var(--display);font-size:1.02rem;line-height:1.2;color:var(--ink);
  background:var(--paper);
}

.hc-row input{
  flex:1 1 8rem;min-width:0;border:0;background:transparent;
  font-family:var(--ui);font-size:1rem;color:var(--paper);
  padding:0 1.1rem;min-height:var(--hc-h);letter-spacing:.06em;text-transform:uppercase;
}
.hc-row input::placeholder{color:rgba(247,243,234,.55);text-transform:none;letter-spacing:0}
.hc-row input:focus{outline:none;background:rgba(247,243,234,.06)}

.hc-go{
  flex:0 0 9.4rem;border:0;cursor:pointer;background:var(--ink);color:var(--paper);
  font-family:var(--ui);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;padding:0 1rem;min-height:var(--hc-h);text-indent:.2em;
  transition:background .35s,color .35s;
}
.hc-go:hover{background:var(--brass);color:#17140E}

.hc-row-book{border-color:rgba(193,162,101,.55);background:var(--brass)}
.hc-book{
  flex:1 1 8rem;display:grid;place-items:center;text-align:center;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:#17140E;padding:0 1rem;min-height:var(--hc-h);text-indent:.2em;
  transition:background .35s;
}
.hc-book:hover{background:rgba(23,20,14,.12)}

/* the result spans the full width beneath its row */
.hc-row .pc-out{
  flex:1 0 100%;margin:0;padding:.9rem 1.1rem;
  background:rgba(12,11,9,.5);color:rgba(247,243,234,.82);
  font-size:.92rem;border-top:1px solid rgba(193,162,101,.35);
}
.hc-row .pc-out.yes{color:var(--paper)}
.hc-row .pc-out a{color:var(--brass-lt)}

.hc-explore{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:clamp(.9rem,2vh,1.5rem);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:rgba(247,243,234,.78);border-bottom:1px solid rgba(247,243,234,.28);
  padding-bottom:3px;transition:color .35s,border-color .35s;
}
.hc-explore i{font-style:normal;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.hc-explore:hover{color:var(--brass-lt);border-color:var(--brass-lt)}
.hc-explore:hover i{transform:translateX(4px)}

/* visually hidden label, still read by screen readers */
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

@media(max-width:760px){
  .hero-check{margin-top:1.8rem}
  .hero-check{--hc-h:3.2rem}
  .hc-tag{flex:0 0 7.4rem;font-size:.92rem;padding:0 .55rem}
  .hc-row input{font-size:16px;padding:0 .85rem;flex:1 1 5rem}
  .hc-go{flex:0 0 7rem;font-size:.66rem;letter-spacing:.14em;padding:0 .5rem}
  .hc-book{font-size:.68rem;letter-spacing:.14em;padding:0 .5rem}
  .hc-explore{margin-top:1.2rem}
}
@media(max-width:400px){
  .hc-tag{flex:0 0 6.2rem;font-size:.85rem}
  .hc-go{flex:0 0 5.6rem;letter-spacing:.1em}
  .hc-book{font-size:.66rem;letter-spacing:.1em}
}
/* 360px and under: the tag and the Check button between them left the input only
   97px. Trimming both gives it room for the placeholder and a typed postcode. */
@media(max-width:360px){
  .hc-tag{flex:0 0 5.4rem;font-size:.78rem;padding:0 .4rem}
  .hc-go{flex:0 0 4.8rem;font-size:.6rem;letter-spacing:.06em;padding:0 .35rem;text-indent:.06em}
}

/* ---------- closing call to action, over Jafar's shop photograph ----------
   The picture was doing nothing as a standalone band, so it now sits behind the final
   CTA. Heavily darkened, because the text has to stay comfortably readable over it. */
.band-photo .band-img{
  position:absolute;inset:0;z-index:0;
  background:url(../img/about-band.jpg) center/cover no-repeat;
  opacity:.42;
}
.band-photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,11,9,.82),rgba(12,11,9,.62) 45%,rgba(12,11,9,.88));
}
.band-photo .glow{z-index:2}
.band-photo .narrow{position:relative;z-index:3}
@media(max-width:760px){
  .band-photo .band-img{opacity:.34}
}

/* ─────────────────────────────────────────────────────────────────────────────
   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)}
/* the note it sits in is light-on-dark on a service hero, so lift it there */
.svc-hero .price-all,.price-note .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)}

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

}

/* PHONES: with the utility strip hidden the header is shorter than the 431-760px case,
   so it gets its own band rather than wasting a small screen on the larger minimum.
   Re-measured 2026-09-10: the enlarged logo took the phone header from 114px to 127px,
   and the old 8rem/128px floor left the eyebrow exactly 1px clear of it at 320x568 and
   360x740. 9.75rem/156px restores a real margin. */
@media(max-width:430px){
  .hero-inner{padding:clamp(9.75rem,17vh,10.5rem) 0 2rem}
}

/* 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}}

/* the hero and collection postcode inputs set outline:none at (0,2,1); restate the
   keyboard ring at the same specificity, later in the file */
.hc-row input:focus-visible,.pc input:focus-visible{outline:2px solid var(--brass-lt);outline-offset:2px}

/* Doubled seam. .ba and .process are both on --ink, so there is no visible edge
   between them and their two paddings stacked into a 218px void. The second block
   drops its top padding and the first block's bottom padding is the whole gap: one
   section unit (100 / 75 / 50). The adjacent-sibling selector means this only fires
   where they actually meet. */
.ba + .process{padding-top:0}

/* homepage locations section: the card grid gets the lead-in the old row list had */
.locations .branch-grid{margin-top:3rem}

/* ══════════════════════════════════════════════════════════════════════════
   Services rail: making the whole card fit the pinned screen.

   Jafar reported the price line and "View service" missing from the cards on
   some screens. The section pins itself to one viewport - .pin is
   height:100svh with overflow:hidden - but a card is 609px to 690px tall
   depending on width, and the rail head and progress bar take another ~250px
   on top of the 128px of padding. Anything below roughly a 1000px-tall
   viewport therefore had the bottom of every card cut off: measured, 27 of 42
   common desktop sizes clipped, and on a 768px laptop the CTA lost 178px.
   The closing card lost its heading and link the same way.

   The fix is to let the photograph take the slack instead of the copy. The
   rail track may now shrink (never grow) inside the pin, and the plate is the
   one part of a card allowed to shrink with it, so the text block below keeps
   its natural height at every size and the card ends where the card ends.
   No magic numbers: flexbox measures the leftover space itself, which is why
   this holds as the heading rewraps or the type scales.
   ══════════════════════════════════════════════════════════════════════════ */
@media(min-width:901px){
  /* shrink-only: on a tall screen the track keeps its natural height and the
     pin's justify-content:center still centres it */
  .pin > .rail-viewport{flex:0 1 auto;min-height:0}
  .rail{height:100%}
  /* min-height:0 is the load-bearing part - without it a flex item refuses to
     shrink below its content, and aspect-ratio counts as content */
  .card .plate{flex:0 1 auto;min-height:0}
  /* below this the crop stops being a photograph and starts being a stripe */
  .card .plate{min-height:130px}
}

/* Short screens: give the rail back some of the padding before the plate has
   to give up its height. */
@media(min-width:901px) and (max-height:900px){
  .pin{padding:3.25rem 0 2rem}
  .rail-head{margin-bottom:1.8rem}
  .rail-bar{margin-top:1.6rem}
}

/* Shorter than this and even a cropped plate leaves nothing worth looking at,
   so the rail stops pretending to be a full-screen moment and becomes the same
   native swipe track that phones already get. */
@media(min-width:901px) and (max-height:620px){
  .pin-wrap{height:auto!important}
  .pin{position:static;height:auto;padding:3rem 0;cursor:auto;overflow:visible}
  .rail-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .rail-viewport::-webkit-scrollbar{display:none}
  .rail{transform:none!important;height:auto}
  .card{scroll-snap-align:start}
  .card .plate{flex:0 0 auto}
  .rail-bar{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   Service card hover.

   1. The underline under "View service" ran the full width of the card.
      .card .cta is written display:inline-flex, but it is a child of
      .card-link, which is a flex column - and a flex item is blockified, so
      inline-flex became flex and the box stretched to the full column. The
      ::after that grows to width:100% on hover was therefore underlining 240px
      of card instead of the 128px of text sitting in it. align-self:flex-start
      takes the box back to its content width, which is what inline-flex was
      asking for in the first place.

   2. The photograph is scaled and re-filtered on hover, which hands it to the
      compositor. A composited child inside a rounded, overflow-hidden parent
      can show a hairline of its own square corner past the curve - the arch is
      the only place on the site with that combination. Giving the two layers
      inside .plate the same radius means there is no square corner left to
      escape, whatever the compositor does. Costs nothing: they are already
      exactly the size of the box they sit in.
   ══════════════════════════════════════════════════════════════════════════ */
.card .cta{align-self:flex-start}
.plate .fill,.plate::after{border-radius:inherit}

/* Collection section: the checklist already closes itself with the last item's hairline,
   and .turnaround then drew a second one of its own 41px below it. Between the two sat an
   empty band the width of the column, which read as a fifth, blank checklist row rather
   than as a divider. One rule is enough: the list keeps its closing line, the turnaround
   note follows it at a normal paragraph's distance. */
.check{margin-bottom:0}
.turnaround{margin-top:1.6rem;padding-top:0;border-top:0}

/* The sticky behaviour moved to the .hdr-main fold near the top of this file, and to
   the matching block in site.css: row one folds away and the bar alone stays. */