/* ═══════════════════════════════════════════════════════════════════════
   Thime Concierge Solutions — public site
   Direction: The Standing Hour

   Every colour below is #000000, #a18537, or #f5f0e6, or an rgba() tint of
   one of them. No other value appears. Type is serif throughout.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --black:#000000;
  --gold:#a18537;
  --cream:#f5f0e6;

  --cream-dim:rgba(245,240,230,0.72);
  --cream-quiet:rgba(245,240,230,0.55);
  --cream-faint:rgba(245,240,230,0.42);
  --cream-line:rgba(245,240,230,0.14);
  --ink-soft:rgba(0,0,0,0.86);
  --ink-quiet:rgba(0,0,0,0.68);
  --ink-line:rgba(0,0,0,0.13);
  --gold-line:rgba(161,133,55,0.28);
  --gold-faint:rgba(161,133,55,0.13);

  --ease:cubic-bezier(.16,.84,.44,1);
  --gutter:clamp(1.5rem, 5vw, 4.5rem);
  /* The bar carries the mark at full size with the tagline beneath it, so
     everything that clears the bar clears a taller one. */
  --topbar-h:9.9rem;
  --wide:78rem;
  --measure:58ch;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--cream-dim);
  font-family:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;
  /* Cormorant sets oldstyle figures by default, which makes a zero read as an
     O. Lining figures everywhere digits appear. */
  font-variant-numeric:lining-nums;
  font-size:clamp(1.04rem, 0.45vw + 0.96rem, 1.16rem);
  line-height:1.76;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:1px solid var(--gold); outline-offset:4px;
}
::selection{ background:var(--gold); color:var(--black); }

h1,h2,h3,h4,blockquote,.numeral{
  font-family:'the-seasons','The Seasons','Cormorant Garamond',Georgia,serif;
  font-weight:400;
  color:var(--cream);
  text-wrap:balance;
}

.eyebrow{
  font-family:'Cormorant Garamond',Georgia,serif;
  text-transform:uppercase;
  /* Tracking eases as the size grows, or the wider letters read as gaps. */
  letter-spacing:0.26em;
  font-size:1.02rem;
  font-weight:700;
  color:var(--gold);
}
.rule{ width:44px; height:1px; background:var(--gold); margin:0 auto 2.2rem; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--gold); color:var(--black);
  padding:0.7rem 1.4rem;
  font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase;
}
.skip-link:focus{ left:var(--gutter); top:0.6rem; }

/* Anchor targets clear the fixed bar rather than hiding beneath it. */
[id]{ scroll-margin-top:6rem; }

/* ── The hour dial ─────────────────────────────────────────────────────
   Scroll position drawn as a filling arc, taken from the hourglass
   already inside the Thime mark. ───────────────────────────────────── */
.dial{
  position:fixed; right:clamp(1rem,3vw,2.4rem); bottom:clamp(1rem,3vw,2.4rem);
  z-index:90; width:62px; height:62px;
  pointer-events:none; opacity:0;
  transition:opacity .6s var(--ease);
}
.dial.shown{ opacity:1; }
.dial::before{ content:""; position:absolute; inset:-4px; border-radius:50%; background:var(--black); z-index:-1; }
.dial svg{ width:100%; height:100%; transform:rotate(-90deg); }
.dial .track{ fill:none; stroke:rgba(245,240,230,0.22); stroke-width:1.4; }
.dial .arc{
  fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:163.36; stroke-dashoffset:163.36;
  transition:stroke-dashoffset .12s linear;
}
.dial .pip{ fill:var(--gold); }

/* ── Top bar ───────────────────────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  /* Three zones so the mark sits centred and neither control crowds it:
     Menu leads on the left, the mark holds the centre, Client Login closes
     the right. Menu was previously last in the row, where it sat behind
     Client Login and was missed. */
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem;
  padding:1.1rem var(--gutter);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
}
.topbar-lead{ display:flex; justify-content:flex-start; }
.topbar-mark{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; }
.topbar.settled{
  /* Solid rather than 90%: at 0.9 the page text scrolled visibly through the
     bar, which read as unfinished against everything else on the page. */
  background:var(--black);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--gold-line);
  padding-top:0.75rem; padding-bottom:0.75rem;
}
/* The mark holds one size at every scroll position. It used to change size
   when the bar settled, which read as a second, smaller logo appearing. The
   negative margins scale with the width, because the artwork carries its own
   padding and the surrounding space is pulled in rather than the mark cropped. */
.topbar-mark img{ width:min(190px,42vw); height:auto; margin:-3.1rem 0 -2.6rem; }
.topbar-tagline{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:clamp(0.82rem,1.5vw,0.96rem);
  letter-spacing:0.07em;
  color:var(--gold);
  white-space:nowrap;
  margin-top:0.15rem;
}
/* The mark now lives in the bar on every page, centred between Menu and
   Client Login. The home hero no longer carries its own copy, so there is
   nothing left to collide with and nothing to hide. */
.topbar-mark{ transition:opacity .5s var(--ease); }

.topbar-actions{ display:flex; align-items:center; justify-content:flex-end; gap:1.1rem; }

/* Both bar controls share one shape and one size. The Menu button used to be
   square while everything else was oval, and both were set small and faint
   enough to be missed. */
.client-login, .menu-toggle{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:0.84rem; letter-spacing:0.2em; text-transform:uppercase;
  padding:0.56rem 1.5rem;
  border-radius:999px; white-space:nowrap;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.client-login{ border:1px solid var(--gold); color:var(--gold); }
.client-login:hover, .client-login:focus-visible{ background:var(--gold); color:var(--black); }

.menu-toggle{
  /* Identical to Client Login: same shape, same size, same gold. Dawn asked
     for one control treatment, not two. */
  background:none;
  border:1px solid var(--gold);
  color:var(--gold);
}
.menu-toggle:hover, .menu-toggle:focus-visible{ border-color:var(--gold); color:var(--gold); }

/* ── Full-screen index ─────────────────────────────────────────────── */
.index-overlay{
  position:fixed; inset:0; z-index:150;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
  padding:5rem var(--gutter) 3rem;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
  overflow-y:auto;
}
.index-overlay.open{ opacity:1; visibility:visible; }
.index-close{
  position:absolute; top:1.4rem; right:var(--gutter);
  background:none; border:1px solid var(--gold); color:var(--gold);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:0.84rem; letter-spacing:0.2em; text-transform:uppercase;
  padding:0.56rem 1.5rem; border-radius:999px; cursor:pointer;
}
.index-close:hover{ border-color:var(--gold); color:var(--gold); }
.index-inner{
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:clamp(2rem,7vw,6rem);
  max-width:62rem; width:100%;
}
.index-col h2{
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:700;
  font-size:1rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.6rem;
}
.index-col ul{ list-style:none; display:flex; flex-direction:column; }
.index-col li{ border-bottom:1px solid var(--gold-faint); }
.index-primary a{
  display:block; padding:0.7rem 0;
  font-family:'the-seasons','The Seasons','Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--cream);
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.index-primary a:hover, .index-primary a:focus-visible{ color:var(--gold); padding-left:0.8rem; }
.index-primary a[aria-current]{ color:var(--gold); }
.index-branch a{
  display:flex; gap:0.9rem; align-items:baseline; padding:0.85rem 0;
  transition:padding-left .3s var(--ease);
}
.index-branch a:hover, .index-branch a:focus-visible{ padding-left:0.6rem; }
.index-branch .x-num{
  font-family:'the-seasons','The Seasons','Cormorant Garamond',Georgia,serif; font-style:italic;
  font-size:0.78rem; color:var(--gold); min-width:1.7rem;
}
.index-branch .x-name{ font-size:1.06rem; color:var(--cream-dim); transition:color .3s var(--ease); }
.index-branch a:hover .x-name, .index-branch a:focus-visible .x-name,
.index-branch a[aria-current] .x-name{ color:var(--gold); }
.index-meta{ margin-top:2rem; color:var(--cream-faint); font-size:0.94rem; }

/* ── Reveal ────────────────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.in-view{ opacity:1; transform:none; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn-primary{
  display:inline-block;
  background:var(--gold); color:var(--black);
  padding:0.92rem 2.2rem;
  font-size:0.84rem; letter-spacing:0.2em; text-transform:uppercase;
  border:1px solid var(--gold); border-radius:999px;
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(161,133,55,0.3); }
.btn-secondary{
  display:inline-block;
  border:1px solid rgba(245,240,230,0.45); color:var(--cream);
  padding:0.92rem 2.2rem;
  font-size:0.84rem; letter-spacing:0.2em; text-transform:uppercase;
  border-radius:999px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.btn-secondary:hover{ border-color:var(--gold); color:var(--gold); }
.cta-row{ display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin-top:2.7rem; }

/* ── Home hero ─────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:min(88vh,52rem);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--topbar-h) + 2rem) var(--gutter) 4rem;
  background:
    radial-gradient(52% 42% at 50% 46%, rgba(161,133,55,0.13), transparent 68%),
    var(--black);
  overflow:hidden;
}
.hero-halo{
  position:absolute; left:50%; top:50%;
  width:min(78vw,44rem); aspect-ratio:1;
  border-radius:50%;
  border:1px solid var(--gold-faint);
  transform:translate(-50%,-50%) scale(.94);
  opacity:0;
  animation:halo 2.4s var(--ease) .3s forwards;
  pointer-events:none;
}
@keyframes halo{ to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
.hero-inner{ position:relative; max-width:48rem; }
.hero-logo{
  /* The file carries its own generous margin, so the surrounding space is
     pulled in rather than the artwork being cropped. */
  width:250px; margin:-4rem auto -2.6rem;
  opacity:0; animation:logo-in 1.5s var(--ease) .2s forwards;
}
@keyframes logo-in{
  from{ opacity:0; transform:scale(.9) translateY(8px); }
  to{ opacity:1; transform:none; }
}
.hero h1{ font-size:clamp(2.4rem,6.4vw,4.6rem); line-height:1.06; }
.hero h1 .l1{ display:block; opacity:0; animation:rise 1s var(--ease) .8s forwards; }
.hero h1 .l2{ display:block; font-style:italic; color:var(--gold); opacity:0; animation:rise 1s var(--ease) 1s forwards; }
.hero-rule{ width:0; height:1px; background:var(--gold); margin:1.9rem auto; animation:widen 1.4s var(--ease) 1.25s forwards; }
@keyframes widen{ to{ width:5.5rem; } }
.hero .sub{
  font-size:clamp(1.08rem,1.7vw,1.26rem);
  color:var(--cream-dim); max-width:38rem; margin:0 auto;
  opacity:0; animation:rise 1s var(--ease) 1.45s forwards;
}
.hero .eyebrow{ display:block; margin-bottom:1.4rem; opacity:0; animation:rise 1s var(--ease) .6s forwards; }
.hero .cta-row{ opacity:0; animation:rise 1s var(--ease) 1.65s forwards; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ── Interior page hero ────────────────────────────────────────────── */
.page-hero{
  padding:clamp(12rem,22vh,14rem) var(--gutter) clamp(3rem,8vh,5rem);
  text-align:center;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(161,133,55,0.10), transparent 70%),
    var(--black);
  border-bottom:1px solid var(--cream-line);
}
.page-hero .numeral{
  display:block;
  font-style:italic; font-size:clamp(2.2rem,5vw,3.4rem);
  color:transparent; -webkit-text-stroke:1px var(--gold);
  margin-bottom:1rem;
}
.page-hero h1{ font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.1; margin-top:0.9rem; }
.page-hero .standfirst{
  max-width:42rem; margin:1.6rem auto 0;
  font-size:clamp(1.08rem,1.7vw,1.24rem);
  color:var(--cream-dim);
}

/* ── Prose sections ────────────────────────────────────────────────── */
.section{ padding:clamp(3.5rem,10vh,7rem) var(--gutter); }
.section-inner{ max-width:var(--wide); margin:0 auto; }
.prose{ max-width:var(--measure); }
.prose.centred{ margin-inline:auto; text-align:center; }
.prose h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:1.2rem; }
.prose h3{ font-size:clamp(1.2rem,2.2vw,1.5rem); margin:2.2rem 0 0.8rem; }
.prose p + p{ margin-top:1.15rem; }
.prose .eyebrow{ display:block; margin-bottom:0.9rem; }

.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(2rem,6vw,5rem);
  max-width:var(--wide); margin:0 auto;
  align-items:start;
}
.split > *{ min-width:0; }
/* The bar is fixed, so a sticky heading has to clear its full height and then
   some, or the two sit on top of one another as the column scrolls. --topbar-h
   is the measured height of the settled bar; the extra is breathing room. */
/* The header beside a passage of prose used to stick and travel with the
   scroll. It never lined up with the paragraph it belonged to, so it now
   simply sits where it is written. */
.split-aside{ padding-bottom:2rem; }
.split-aside h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin-top:0.8rem; }

/* ── Statement ─────────────────────────────────────────────────────── */
.statement{
  max-width:46rem; margin:0 auto;
  padding:clamp(5rem,14vh,9rem) var(--gutter);
  text-align:center;
}
.statement p{
  font-size:clamp(1.16rem,2vw,1.44rem);
  font-style:italic; line-height:1.74;
  color:var(--cream-dim);
}

/* ── Home: the branch stage ────────────────────────────────────────── */
.stage-head{ text-align:center; padding:0 var(--gutter) clamp(2rem,6vh,3.5rem); }
.stage-head h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); font-style:italic; margin-top:0.8rem; }
.stage{
  max-width:var(--wide); margin:0 auto;
  padding:0 var(--gutter);
  border-top:1px solid var(--cream-line);
}
.stage-panels{ padding:clamp(1.5rem,4vh,2.5rem) 0 0; }
.panel{
  display:grid; grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  /* Column gap only. A row gap here would push the heading away from the
     paragraph it belongs to. */
  column-gap:clamp(1.5rem,4vw,3rem); row-gap:0;
  align-items:start;
  padding:clamp(2.4rem,6vh,3.6rem) 0;
  border-bottom:1px solid var(--gold-faint);
}
.panel:last-child{ border-bottom:none; }
.panel > *{ grid-column:2; }
.panel .p-num{
  grid-column:1; grid-row:1;
  display:block;
  font-family:'the-seasons','The Seasons','Cormorant Garamond',Georgia,serif;
  font-style:italic; line-height:0.9;
  font-size:clamp(2.6rem,5vw,4.2rem);
  color:transparent; -webkit-text-stroke:1px var(--gold);
}
@media (max-width:700px){
  .panel{ grid-template-columns:1fr; column-gap:0; }
  .panel > *{ grid-column:1; }
  .panel .p-num{ font-size:2.4rem; margin-bottom:0.4rem; }
}
.panel h3{ font-size:clamp(1.45rem,2.6vw,1.95rem); font-weight:500; margin-bottom:1.1rem; }
.panel p{ max-width:56ch; }
.panel .more{
  display:inline-block; justify-self:start; margin-top:1.5rem;
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold);
  padding-bottom:0.4rem; border-bottom:1px solid var(--gold-line);
  transition:border-color .3s var(--ease), letter-spacing .3s var(--ease);
}
.panel .more:hover{ border-color:var(--gold); letter-spacing:0.24em; }

/* ── The cream inversion ───────────────────────────────────────────── */
.inversion{
  background:var(--cream); color:var(--ink-soft);
  padding:clamp(5rem,15vh,10rem) var(--gutter);
  text-align:center;
  margin-top:clamp(3rem,8vh,5rem);
}
.inversion blockquote{
  color:var(--black); font-style:italic;
  font-size:clamp(1.45rem,3.2vw,2.3rem);
  line-height:1.5; max-width:50rem; margin:0 auto;
}

/* ── Column sets ───────────────────────────────────────────────────── */
.cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));
  gap:2.5rem clamp(1.5rem,3vw,3rem);
}
.col{ border-left:1px solid var(--gold-faint); padding:0.2rem 0 0.2rem 1.5rem; }
.col h3{ font-size:1.14rem; font-weight:500; margin-bottom:0.5rem; }
.col p{ font-size:0.99rem; color:var(--cream-quiet); }

.section-head{ text-align:center; max-width:40rem; margin:0 auto clamp(2.5rem,7vh,4rem); }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.2rem); margin:0.8rem 0 1.1rem; }
.section-head p{ color:var(--cream-quiet); }

/* ── Founder portrait ──────────────────────────────────────────────
   Sits in the aside column above the name. A hairline rather than a
   frame, because a heavy border would fight the mark's own treatment. */
.portrait{
  width:100%; max-width:22rem;
  aspect-ratio:1135 / 1386;
  margin-bottom:1.6rem;
}
.portrait::after{
  background:
    radial-gradient(116% 90% at 50% 44%,
      rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 62%,
      rgba(0,0,0,0.86) 87%, var(--black) 100%),
    linear-gradient(to right,
      var(--black) 0, rgba(0,0,0,0) 15%,
      rgba(0,0,0,0) 85%, var(--black) 100%);
}
@media (max-width:900px){
  /* The aside stops being a column here, so the portrait takes the text
     measure and its hairlines line up with the paragraphs beneath it. On a
     wide single column 22rem still caps it, so it never becomes a poster. */
  .portrait{ max-width:min(22rem, 100%); }
}

/* ── Invitation to ask, in place of a published package list ───────── */
.invitation{ margin-top:2rem; }
.invitation a{
  display:inline-block;
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold);
  padding-bottom:0.4rem;
  border-bottom:1px solid var(--gold-line);
  transition:border-color .3s var(--ease), letter-spacing .3s var(--ease);
}
.invitation a:hover{ border-color:var(--gold); letter-spacing:0.24em; }

/* ── Named experiences ─────────────────────────────────────────────── */
.experiences{ list-style:none; border-top:1px solid var(--cream-line); margin-top:2rem; }
.experiences li{ border-bottom:1px solid var(--gold-faint); padding:1.5rem 0; }
.experiences h3{ font-size:1.2rem; margin-bottom:0.4rem; }
.experiences p{ color:var(--cream-quiet); max-width:56ch; }

/* ── Branch cards (services index) ─────────────────────────────────── */
/* Exactly two columns, so four cards fill two full rows. auto-fit put three
   on the first row and left IV sitting beside a large empty cell. */
.branch-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--cream-line); border:1px solid var(--cream-line); }
@media (max-width:44rem){ .branch-cards{ grid-template-columns:1fr; } }
.branch-card{
  background:var(--black);
  padding:clamp(2rem,4vw,2.8rem);
  display:flex; flex-direction:column; gap:0.8rem;
  transition:background .4s var(--ease);
}
.branch-card:hover{ background:rgba(161,133,55,0.06); }
.branch-card .numeral{ font-style:italic; font-size:1.4rem; color:var(--gold); }
.branch-card h2{ font-size:clamp(1.3rem,2.2vw,1.6rem); }
.branch-card p{ color:var(--cream-quiet); font-size:1rem; }
.branch-card .more{
  margin-top:auto; padding-top:1rem;
  font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold);
}

/* ── Onward navigation ─────────────────────────────────────────────── */
.onward{
  display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  max-width:var(--wide); margin:0 auto;
  padding:clamp(2.5rem,6vh,4rem) var(--gutter);
  border-top:1px solid var(--cream-line);
}
.onward a{ max-width:22rem; }
.onward .label{
  display:block; font-size:0.66rem; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--gold); margin-bottom:0.5rem;
}
.onward .name{ font-family:'the-seasons','The Seasons','Cormorant Garamond',Georgia,serif; font-size:1.3rem; color:var(--cream); transition:color .3s var(--ease); }
.onward a:hover .name{ color:var(--gold); }
.onward .next{ text-align:right; margin-left:auto; }

/* ── Closing ───────────────────────────────────────────────────────── */
.closing{
  text-align:center;
  padding:clamp(4rem,13vh,9rem) var(--gutter);
  border-top:1px solid var(--cream-line);
}
.closing .eyebrow{ display:block; margin-bottom:1.2rem; }
.closing h2{ font-size:clamp(1.95rem,4vw,2.7rem); margin-bottom:1.1rem; }
.closing p{ color:var(--cream-dim); max-width:36rem; margin:0 auto 2.4rem; }

/* ── Contact form ──────────────────────────────────────────────────── */
.form-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:1.6rem clamp(1.5rem,3vw,2.5rem);
  max-width:44rem;
}
.field{ display:flex; flex-direction:column; gap:0.5rem; min-width:0; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold);
}
.field input, .field select, .field textarea{
  width:100%; min-width:0; max-width:100%;
  background:none;
  border:none; border-bottom:1px solid var(--cream-line);
  color:var(--cream);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.05rem;
  padding:0.6rem 0.1rem;
  transition:border-color .3s var(--ease);
}
.field select{ border:1px solid var(--cream-line); padding:0.6rem; }
.field select option{ background:var(--black); color:var(--cream); }
.field textarea{ resize:vertical; min-height:7rem; border:1px solid var(--cream-line); padding:0.7rem; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); }
.field input::placeholder, .field textarea::placeholder{ color:var(--cream-faint); }
.form-note{ margin-top:1.6rem; color:var(--cream-faint); font-size:0.94rem; max-width:44rem; }
.form-actions{ margin-top:2.2rem; }
.hp{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.contact-aside dl{ border-top:1px solid var(--cream-line); }
.contact-aside div{ padding:1.2rem 0; border-bottom:1px solid var(--gold-faint); }
.contact-aside dt{
  font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:0.4rem;
}
.contact-aside dd{ color:var(--cream-dim); }
.contact-aside a:hover{ color:var(--gold); }

/* ── Footer ────────────────────────────────────────────────────────── */
footer{ border-top:1px solid var(--gold-line); padding:4.5rem var(--gutter) 2.5rem; }
.footer-grid{
  max-width:var(--wide); margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:3rem;
  padding-bottom:2.5rem; border-bottom:1px solid var(--gold-faint);
}
.footer-brand img{ width:180px; height:auto; margin:-2.9rem 0 -2.2rem; }
.footer-brand p{ color:var(--cream-quiet); font-size:0.96rem; max-width:32ch; }
.footer-col h2{
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
  font-size:0.66rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
}
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.footer-col a{ color:var(--cream-dim); font-size:0.96rem; transition:color .2s ease; }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{
  max-width:var(--wide); margin:1.8rem auto 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:0.84rem; color:var(--cream-quiet);
}


/* ── Imagery ───────────────────────────────────────────────────────────
   Photographs are never dropped onto this page as blocks. There are two
   devices, and both dissolve into the black rather than sitting on top of
   it. The page background is pure black, so the blend is done with
   gradients of that same black laid over the picture: no masking support to
   depend on, and the join is genuinely invisible rather than nearly so.

   .band  runs the full width of the viewport as a shallow cinematic strip,
          fading out at all four edges. Height is capped deliberately: a
          band gives a page a breath, a tall block gives it bulk.

   .bleed sets a photograph against a passage of type. The picture runs off
          one edge of the screen and fades away where it meets the words, so
          the two read as one composition instead of a picture and a caption
          stacked on a slab.

   .hour-rule is the brand's own hourglass, used where a long page needs
          somewhere to rest between passages of type.
   ──────────────────────────────────────────────────────────────────── */

/* The shared blend. Two overlays: one for the long edges, one for the
   short. Both are the page's own black, so the picture simply runs out. */
.fig-frame{ position:relative; overflow:hidden; width:100%; }
.fig-frame img{
  display:block; width:100%; height:100%; object-fit:cover;
  /* --fade is written by the scroll handler: 0 as the frame enters or
     leaves the viewport, 1 while it is settled in the middle. Default 1
     so a picture is never left dark if the script does not run. */
  opacity:calc(0.06 + 0.94 * var(--fade, 1));
  transform:scale(calc(1.035 - 0.035 * var(--fade, 1)));
  transform-origin:center;
  will-change:opacity, transform;
}
.fig-frame::before,
.fig-frame::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.fig-frame::before{
  background:linear-gradient(to bottom,
    var(--black) 0, rgba(0,0,0,0.55) 9%, rgba(0,0,0,0) 21%,
    rgba(0,0,0,0) 79%, rgba(0,0,0,0.55) 91%, var(--black) 100%);
}

/* ── .band: full width, shallow, fading at every edge ──────────────── */
.band{
  position:relative;
  width:100vw; margin-inline:calc(50% - 50vw);
  margin-block:clamp(2.5rem,7vh,4.5rem);
}
/* Height tracks the width so the band keeps the proportions the frame was
   cut to, then stops growing on very wide screens. Setting aspect-ratio
   with a max-height instead lets the box shrink its own width to satisfy
   the ratio, which pulled the band short of the edge. */
.band .fig-frame{ width:100%; height:clamp(11rem, 37vw, 33rem); }
/* .slim is the quiet version: a strip that leads into what follows rather
   than a picture that stops the page. */
.band.slim .fig-frame{ height:clamp(9rem, 20vw, 17.5rem); }
.band.slim{ margin-block:clamp(2rem,6vh,3.5rem) 0; }
.band .fig-frame::after{
  background:linear-gradient(to right,
    var(--black) 0, rgba(0,0,0,0) 10%,
    rgba(0,0,0,0) 90%, var(--black) 100%);
}
.band figcaption{
  max-width:var(--wide); margin:1rem auto 0; padding:0 var(--gutter);
  font-size:0.76rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--cream-faint);
}

/* ── .bleed: picture one side, words the other ─────────────────────── */
.bleed{
  display:grid;
  grid-template-columns:
    [full-start] minmax(0,1fr)
    [content-start] minmax(0, calc(var(--wide) / 2))
    [mid] minmax(0, calc(var(--wide) / 2))
    [content-end] minmax(0,1fr) [full-end];
  align-items:center;
  column-gap:clamp(2rem,5vw,4.5rem);
  /* No padding of its own: the picture is meant to begin at the rule above
     it and finish where the words below it start. The copy carries its own
     breathing room instead. */
  padding-block:0;
}
.bleed .fig-frame{ height:clamp(19rem,52vh,31rem); }
.bleed .fig-frame::before{
  background:linear-gradient(to bottom,
    var(--black) 0, rgba(0,0,0,0.6) 11%, rgba(0,0,0,0) 26%,
    rgba(0,0,0,0) 74%, rgba(0,0,0,0.6) 89%, var(--black) 100%);
}

/* picture to the left, running off the left edge */
.bleed > .bleed-figure{ grid-column:full-start / mid; grid-row:1; margin:0; }
.bleed > .bleed-copy{ grid-column:mid / content-end; grid-row:1; padding-right:var(--gutter); padding-block:clamp(2rem,5vh,3rem); }
.bleed .fig-frame::after{
  background:linear-gradient(to right,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 46%,
    rgba(0,0,0,0.6) 78%, var(--black) 100%);
}

/* picture to the right instead */
.bleed.flip > .bleed-figure{ grid-column:mid / full-end; }
.bleed.flip > .bleed-copy{
  grid-column:content-start / mid;
  padding-right:0; padding-left:var(--gutter);
}
.bleed.flip .fig-frame::after{
  background:linear-gradient(to left,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 46%,
    rgba(0,0,0,0.6) 78%, var(--black) 100%);
}

.bleed-copy p{
  font-size:clamp(1.1rem,1.85vw,1.36rem);
  font-style:italic; line-height:1.74;
  color:var(--cream-dim);
}
/* The approved Section 2 copy is a sequence of paragraphs rather than one
   block. The global reset zeroes every margin, so these two containers take
   the same paragraph rhythm .prose already uses. No new values introduced. */
.bleed-copy p + p{ margin-top:1.15rem; }
.col p + p{ margin-top:1.15rem; }
.experiences p + p{ margin-top:1.15rem; }
.inversion blockquote p + p{ margin-top:1.15rem; }
.bleed-copy .fig-note{
  margin-top:1.4rem;
  font-size:0.76rem; letter-spacing:0.2em; text-transform:uppercase;
  font-style:normal; line-height:1.6;
  color:var(--cream-faint);
}
.bleed-copy .hourglass-rule{ margin-left:0; margin-bottom:1.6rem; }

/* Narrow screens: the composition stacks, and the picture keeps its bleed
   across the full width rather than becoming a small boxed rectangle. */
@media (max-width:860px){
  .bleed{ grid-template-columns:1fr; row-gap:clamp(1.6rem,5vh,2.6rem); }
  /* One column, so the two halves must fall into their own rows. The
     desktop rule pins both to row 1; release that here or they stack
     into the same cell and the words land on top of the picture. */
  .bleed > .bleed-figure,
  .bleed.flip > .bleed-figure{ grid-column:1; grid-row:1; }
  .bleed > .bleed-copy,
  .bleed.flip > .bleed-copy{
    grid-column:1; grid-row:2;
    padding-inline:var(--gutter); padding-right:var(--gutter);
  }
  .bleed .fig-frame{ height:clamp(15rem,40vh,22rem); }
  .bleed .fig-frame::after,
  .bleed.flip .fig-frame::after{
    background:linear-gradient(to right,
      var(--black) 0, rgba(0,0,0,0) 8%,
      rgba(0,0,0,0) 92%, var(--black) 100%);
  }
  .bleed-copy .hourglass-rule{ margin-left:auto; }
}


/* ── The mark's hourglass, used as the divider ─────────────────────────
   The divider image is Dawn's own hourglass, lifted from the brand mark file
   on main (thime-mark.svg), where it already stands alone without the
   wordmark. Nothing was redrawn, recoloured or restyled: its transparency is
   rebuilt exactly the way that file's own SVG does it, from luminance, and
   every pixel is hers. It carries its own flourish line to left and right,
   which is why it replaces a plain rule rather than sitting above one.
   ──────────────────────────────────────────────────────────────────── */
.hourglass-rule{
  display:block;
  width:auto; height:clamp(3.2rem,7vw,4.6rem);
  margin:clamp(3rem,8vh,5rem) auto;
  opacity:0.9;
}
.hourglass-rule.small{ height:2.4rem; margin:clamp(2rem,5vh,3rem) auto; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width:900px){
  .index-inner{ grid-template-columns:1fr; gap:2.5rem; }
  .stage{ grid-template-columns:1fr; border-top:none; }
  .stage-marker{ display:none; }
  .stage-panels{ padding-top:0; }
  .panel{ min-height:0; padding:2.5rem 0; }
  .panel .p-num{ display:block; }
  .split{ grid-template-columns:1fr; }
  .split-aside{ position:static; }
  .dial{ width:48px; height:48px; }
  .onward .next{ text-align:left; margin-left:0; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero-logo,.hero .eyebrow,.hero h1 .l1,.hero h1 .l2,.hero .sub,.hero .cta-row,.hero-halo{ opacity:1 !important; }
  .hero-rule{ width:5.5rem !important; }

}


/* The hourglass introduces the copy column, so it aligns with the type
   rather than floating over the centre of it. Placed after the divider's
   own rules so it wins without raising specificity. */
.bleed-copy .hourglass-rule{ margin-left:0; margin-right:auto; margin-bottom:1.5rem; }
@media (max-width:860px){ .bleed-copy .hourglass-rule{ margin-inline:auto; } }


/* ═══════════════════════════════════════════════════════════════════════
   Thime Concierge Solutions — home page
   A duplication of the approved homepage draft.

   Loaded after site.css and scoped to body.home, so no other page changes.
   Colour is #000000, #a18537, #f5f0e6 or an rgba() tint of one of them.
   ═══════════════════════════════════════════════════════════════════════ */

body.home{
  background:var(--cream);
  color:var(--ink-quiet);
  /* The draft's bar is short and solid from the first pixel, so the page
     clears a much shorter header than the shared one. */
  --topbar-h:5.4rem;
}
body.home h1, body.home h2, body.home h3{ color:var(--black); }
body.home .on-black h1, body.home .on-black h2, body.home .on-black h3{ color:var(--cream); }

/* ── Bar ───────────────────────────────────────────────────────────────
   Mark left, the pages across the middle, the gold action right with the
   line beneath it. Cream from the top, not transparent-then-settled. */
body.home .topbar,
body.about .topbar{
  position:fixed;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  padding:0.5rem clamp(1.2rem,3vw,2.6rem);
  background:var(--cream);
  border-bottom:1px solid var(--ink-line);
  min-height:var(--topbar-h);
}
body.home .topbar.settled,
body.about .topbar.settled{
  background:var(--cream);
  border-bottom-color:var(--ink-line);
  padding-top:0.5rem; padding-bottom:0.5rem;
}
body.home .topbar-mark,
body.about .topbar-mark{ align-items:flex-start; }
body.home .topbar-mark img,
body.about .topbar-mark img{
  width:min(150px,32vw);
  margin:-2.5rem 0 -2.1rem;
  /* The mark is a luminance-masked PNG drawn in light tone. On cream it is
     tinted to the brand gold rather than left to disappear. */
  filter:brightness(0) saturate(100%) invert(53%) sepia(46%)
         saturate(526%) hue-rotate(2deg) brightness(93%) contrast(88%);
}

body.home .topnav,
body.about .topnav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(0.9rem,2.4vw,2.1rem);
  flex-wrap:wrap;
}
body.home .topnav a,
body.about .topnav a{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:0.72rem;
  letter-spacing:0.19em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:0.3rem;
  border-bottom:1px solid transparent;
  white-space:nowrap;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
body.home .topnav a:hover,
body.about .topnav a:hover,
body.home .topnav a:focus-visible,
body.about .topnav a:focus-visible{ color:var(--gold); }
body.home .topnav a[aria-current],
body.about .topnav a[aria-current]{ color:var(--black); border-bottom-color:var(--gold); }

body.home .topbar-actions,
body.about .topbar-actions{
  flex-direction:column;
  align-items:flex-end;
  gap:0.34rem;
}
/* The draft's action is a filled gold rectangle, not the site's gold oval. */
body.home .topbar-actions .client-login,
body.about .topbar-actions .client-login{
  background:var(--gold);
  border:1px solid var(--gold);
  border-radius:2px;
  color:var(--cream);
  font-size:0.72rem;
  letter-spacing:0.2em;
  padding:0.62rem 1.9rem;
}
body.home .topbar-actions .client-login:hover,
body.about .topbar-actions .client-login:hover,
body.home .topbar-actions .client-login:focus-visible,
body.about .topbar-actions .client-login:focus-visible{
  background:var(--black); border-color:var(--black); color:var(--cream);
}
body.home .bar-tagline,
body.about .bar-tagline{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:0.84rem;
  letter-spacing:0.03em;
  color:var(--ink-quiet);
  white-space:nowrap;
}

/* The menu button is the small-screen way into the same pages. */
body.home .topbar-lead,
body.about .topbar-lead{ display:none; }
body.home .dial::before,
body.about .dial::before{ background:var(--cream); }
body.home .dial .track,
body.about .dial .track{ stroke:rgba(0,0,0,0.16); }

@media (max-width:1080px){
  body.home .topnav,
  body.about .topnav{ display:none; }
  body.home .topbar-lead,
  body.about .topbar-lead{ display:flex; }
  body.home .topbar,
  body.about .topbar{ grid-template-columns:auto 1fr auto; }
  body.home .topbar-mark,
  body.about .topbar-mark{ order:-1; }
}
@media (max-width:640px){
  body.home .bar-tagline,
  body.about .bar-tagline{ display:none; }
  body.home .topbar-actions .client-login,
  body.about .topbar-actions .client-login{ padding:0.5rem 1.1rem; letter-spacing:0.14em; }
}

/* ── Hero ──────────────────────────────────────────────────────────────
   The door fills the frame. Copy sits left and low; the standing line sits
   right and low, against the quiet side of the picture. */
body.home .hero{
  position:relative;
  min-height:clamp(30rem,74vh,42rem);
  display:flex;
  align-items:flex-end;
  text-align:left;
  padding:calc(var(--topbar-h) + 2rem) clamp(1.4rem,3.4vw,3rem) clamp(2rem,5vh,3.2rem);
  background:var(--black);
  overflow:hidden;
}
body.home .hero-photo{ position:absolute; inset:0; background:var(--black); }
body.home .hero-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 44%;
}
body.home .hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.52) 30%,
                    rgba(0,0,0,0.12) 56%, rgba(0,0,0,0.30) 100%),
    linear-gradient(to top, rgba(0,0,0,0.52) 0%, transparent 42%);
}
body.home .hero-inner{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  align-items:end;
  gap:clamp(1.5rem,5vw,3rem);
}
body.home .hero h1{
  font-size:clamp(2.6rem,6.6vw,4.9rem);
  line-height:1.03;
  color:var(--cream);
  max-width:11ch;
}
body.home .hero h1 .l1, body.home .hero h1 .l2{ display:block; }
body.home .hero h1 .l2{ font-style:normal; color:var(--cream); }
body.home .hero-rule{
  margin:1.5rem 0 1.4rem;
  animation:widen-left 1.4s var(--ease) 1.1s forwards;
}
@keyframes widen-left{ to{ width:3.6rem; } }
/* The draft sets this line as a small letterspaced caps stack, not a
   paragraph, so it is treated here as the label it looks like. */
body.home .hero .sub{
  margin:0;
  max-width:26rem;
  color:var(--cream-dim);
  font-size:clamp(0.94rem,1.3vw,1.04rem);
  line-height:1.62;
}
body.home .hero .cta-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.7rem;
  margin-top:clamp(1.5rem,3.4vh,2.2rem);
}
body.home .hero .btn-primary,
body.home .hero .btn-secondary{
  border-radius:2px;
  min-width:15.5rem;
  text-align:center;
  font-size:0.71rem;
  letter-spacing:0.2em;
  padding:0.82rem 1.6rem;
}
body.home .hero .btn-primary{ background:var(--gold); border-color:var(--gold); color:var(--cream); }
body.home .hero .btn-primary:hover{ background:var(--cream); border-color:var(--cream); color:var(--black); transform:none; box-shadow:none; }
body.home .hero .btn-secondary{ border-color:var(--cream-quiet); color:var(--cream); }
body.home .hero .btn-secondary:hover{ border-color:var(--gold); color:var(--gold); }

body.home .hero-aside{
  justify-self:end;
  text-align:right;
  max-width:17rem;
  font-style:italic;
  font-size:clamp(0.98rem,1.5vw,1.18rem);
  line-height:1.5;
  color:var(--cream);
  padding-bottom:0.5rem;
}
@media (max-width:860px){
  body.home .hero-inner{ grid-template-columns:1fr; }
  body.home .hero h1{ max-width:14ch; }
  body.home .hero-aside{ justify-self:start; text-align:left; margin-top:1.8rem; }
}

/* ── Bands ─────────────────────────────────────────────────────────── */
body.home .band{ padding:clamp(3.2rem,8.5vh,5.6rem) clamp(1.4rem,3.4vw,3rem); }
body.home .band-inner{ max-width:74rem; margin:0 auto; }
body.home .band .eyebrow{
  display:block;
  margin-bottom:1.1rem;
  font-size:0.7rem;
  letter-spacing:0.24em;
}
body.home .band p{ color:var(--ink-quiet); }

/* ── Intro: heading left, passage right ────────────────────────────── */
body.home .intro{ background:var(--cream); }
body.home .intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
body.home .intro-head h2{
  font-size:clamp(1.8rem,3.5vw,2.75rem);
  line-height:1.16;
  max-width:19ch;
}
body.home .intro-body p{ font-size:1.02rem; }
body.home .intro-body p + p{ margin-top:1.05rem; }
@media (max-width:820px){
  body.home .intro-grid{ grid-template-columns:1fr; }
  body.home .intro-head h2{ max-width:24ch; }
}

/* ── Four branches: heading, numbered list, picture to the edge ──────
   The draft runs the photograph off the right edge of the page at the
   full height of the band, so this section breaks the band's gutter. */
body.home .branches{
  background:#f0ebe0;                    /* a cream one step warmer, per the draft */
  padding:0;
  border-top:1px solid var(--ink-line);
}
body.home .branch-grid{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.15fr) minmax(0,0.9fr);
  align-items:stretch;
  gap:0;
  max-width:none;
}
body.home .branch-head{
  padding:clamp(3rem,8vh,5.2rem) clamp(1.6rem,3vw,2.6rem) clamp(3rem,8vh,5.2rem) clamp(1.4rem,3.4vw,3rem);
}
body.home .branch-head h2{
  font-size:clamp(1.75rem,3.2vw,2.5rem);
  line-height:1.1;
  max-width:14ch;
}
body.home .branch-head .head-rule{
  width:3.2rem; height:1px; background:var(--gold);
  margin:1.5rem 0 1.4rem;
}
body.home .branch-head p{ font-size:1rem; max-width:24ch; }

body.home .branch-list{
  padding:clamp(3rem,8vh,5.2rem) clamp(1.6rem,3vw,2.6rem);
  align-self:center;
}
body.home .branch-item{
  display:grid;
  grid-template-columns:minmax(0,3.6rem) minmax(0,1fr);
  column-gap:clamp(1rem,2.4vw,1.8rem);
  row-gap:0;
  align-items:start;
  padding:clamp(1.1rem,2.6vh,1.5rem) 0;
  border-bottom:1px solid var(--gold-line);
}
body.home .branch-item:first-child{ padding-top:0; }
body.home .branch-item:last-child{ border-bottom:none; padding-bottom:0; }
body.home .branch-item > *{ grid-column:2; }
/* The draft numbers the branches 01 to 04 in a large gold serif. */
body.home .branch-item .p-num{
  grid-column:1; grid-row:1 / span 3;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.8rem,3vw,2.5rem);
  line-height:1;
  color:var(--gold);
}
body.home .branch-item h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:0.73rem;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--black);
  margin-bottom:0.5rem;
  line-height:1.5;
}
body.home .branch-item p{
  font-size:0.95rem;
  line-height:1.55;
  max-width:34ch;
  margin:0;
}
body.home .branch-item .more{
  display:inline-block; justify-self:start; margin-top:0.7rem;
  font-size:0.63rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold);
  padding-bottom:0.25rem;
  border-bottom:1px solid var(--gold-line);
  transition:border-color .3s var(--ease);
}
body.home .branch-item .more:hover{ border-color:var(--gold); }

body.home .branch-figure{ position:relative; min-height:100%; }
body.home .branch-figure .fig-frame{ position:absolute; inset:0; height:100%; }
body.home .branch-figure .fig-frame img{ width:100%; height:100%; object-fit:cover; object-position:18% 50%; }

@media (max-width:1000px){
  body.home .branch-grid{ grid-template-columns:1fr 1fr; }
  body.home .branch-figure{ grid-column:1 / -1; min-height:clamp(15rem,36vh,22rem); }
  body.home .branch-figure .fig-frame{ position:relative; }
}
@media (max-width:720px){
  body.home .branch-grid{ grid-template-columns:1fr; }
  body.home .branch-head{ padding-bottom:0; }
  body.home .branch-head h2{ max-width:16ch; }
  body.home .branch-head p{ max-width:40ch; }
}

/* ── The standard: centred, rules either side of the label ─────────── */
body.home .standard{
  background:var(--cream);
  text-align:center;
  padding:clamp(3.4rem,9vh,5.6rem) clamp(1.4rem,3.4vw,3rem);
}
body.home .standard .hourglass-rule{
  width:clamp(3rem,5vw,4rem); height:auto;
  margin:0 auto clamp(1.1rem,2.6vh,1.6rem);
  opacity:0.85;
}
body.home .standard blockquote{
  max-width:46rem; margin:0 auto; color:var(--black);
}
body.home .standard blockquote p:first-child{
  font-size:clamp(1.65rem,3.6vw,2.65rem);
  line-height:1.22;
  font-style:normal;
}
body.home .standard blockquote p + p{
  margin-top:1.1rem;
  font-size:clamp(1rem,1.5vw,1.14rem);
  line-height:1.6;
  color:var(--ink-quiet);
  max-width:34rem;
  margin-inline:auto;
}

/* ── Split bands: picture one side, black panel the other ──────────── */
body.home .duo{ display:grid; align-items:stretch; }
body.home .serve{ grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); }
body.home .closing-split{ grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr); }
body.home .duo .duo-figure{ position:relative; min-height:clamp(20rem,48vh,30rem); }
body.home .duo .fig-frame{ position:absolute; inset:0; height:100%; }
body.home .duo .fig-frame img{ width:100%; height:100%; object-fit:cover; }
body.home .serve .fig-frame img{ object-position:24% 54%; }
body.home .closing-split .fig-frame img{ object-position:50% 46%; }
body.home .on-black{
  background:var(--black);
  color:var(--cream-dim);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.2rem,5vw,3.6rem) clamp(1.6rem,4vw,3.2rem);
}
body.home .on-black .eyebrow{
  display:block; margin-bottom:1.4rem;
  font-size:0.7rem; letter-spacing:0.24em;
}
body.home .on-black p{ color:var(--cream-dim); }

@media (max-width:860px){
  body.home .serve, body.home .closing-split{ grid-template-columns:1fr; }
  body.home .closing-split .duo-figure{ order:-1; }
}

/* ── Who we serve: four rows on hairlines ──────────────────────────── */
body.home .serve-head h2{
  font-size:clamp(1.2rem,2.1vw,1.6rem);
  line-height:1.28;
  margin-bottom:0.8rem;
}
body.home .serve-head > p{
  font-size:0.94rem; color:var(--cream-quiet);
  margin-bottom:clamp(1.2rem,3vh,1.8rem);
}
body.home .serve-list{ border-top:1px solid var(--cream-line); }
body.home .serve-row{
  padding:clamp(0.75rem,2vh,1.05rem) 0;
  border-bottom:1px solid var(--cream-line);
}
body.home .serve-row h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:0.7rem; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--cream); margin-bottom:0.3rem;
}
body.home .serve-row p{ font-size:0.93rem; color:var(--cream-quiet); margin:0; max-width:44ch; }

/* ── Closing panel ─────────────────────────────────────────────────── */
body.home .closing-panel h2{
  font-size:clamp(1.9rem,3.8vw,2.7rem);
  line-height:1.08;
  margin-bottom:1rem;
}
body.home .closing-panel p{ max-width:32ch; font-size:0.99rem; margin-bottom:clamp(1.5rem,3.6vh,2.1rem); }
body.home .closing-panel .btn-primary{
  align-self:flex-start;
  background:var(--gold); border-color:var(--gold); color:var(--cream);
  border-radius:2px; font-size:0.71rem; letter-spacing:0.2em; padding:0.82rem 2rem;
}
body.home .closing-panel .btn-primary:hover{
  background:var(--cream); border-color:var(--cream); color:var(--black);
  transform:none; box-shadow:none;
}

/* ── Footer: mark left, pages across, contact right ────────────────── */
body.home footer{
  background:var(--black);
  border-top:none;
  padding:clamp(1.6rem,4vh,2.4rem) clamp(1.4rem,3.4vw,3rem) 1.4rem;
}
body.home .footer-grid{
  align-items:flex-start;
  flex-wrap:wrap;
  gap:clamp(1.2rem,2.4vw,2rem);
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--cream-line);
}
body.home .footer-brand{ display:flex; flex-direction:column; align-items:flex-start; }
body.home .footer-brand img{ width:130px; margin:-2.1rem 0 -1.8rem; }
body.home .footer-brand p{ font-size:0.86rem; }
body.home .footer-brand .footer-tagline{ font-style:italic; color:var(--gold); }
body.home .footer-col{ min-width:0; }
body.home .footer-col h2{ font-size:0.62rem; letter-spacing:0.24em; margin-bottom:0.7rem; }
body.home .footer-col a{ font-size:0.86rem; }
body.home .footer-bottom{
  margin-top:1.1rem;
  font-size:0.76rem;
  color:var(--cream-faint);
}
/* ── The two lower photographs, where they meet the black ──────────────
   Reported as white space between the bottom two images, as though they
   were misaligned. They are not: both sit flush against their black panel
   and against each other. What reads as a gap is the photographs' own
   bright edges — the paper under her hand at the foot of the writing
   picture, and the pale wall down the left of the hydrangeas — landing
   directly on black with nothing between.

   The site already owns the device for this: .fig-frame carries two fade
   overlays meant to resolve a picture into the page. They have never once
   rendered. The image carries will-change, which gives it its own stacking
   context, so with both at z-index auto the image painted over the very
   gradients meant to blend it. Lifting them above the picture is the whole
   fix, and it is the fix the design already intended.

   Each overlay then runs only along the edge that meets black, so nothing
   is cropped and neither photograph loses a thing.
   ──────────────────────────────────────────────────────────────────── */
body.home .duo .fig-frame::before,
body.home .duo .fig-frame::after{ z-index:1; }

/* Who We Serve: the picture sits left, black to its right, and the closing
   section's black panel directly beneath. Resolve the foot and the inner
   edge; leave the outer edge alone, it meets the page. */
body.home .serve .fig-frame::before{
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 82%,
    rgba(0,0,0,0.5) 93%, var(--black) 100%);
}
body.home .serve .fig-frame::after{
  background:linear-gradient(to right,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 88%,
    rgba(0,0,0,0.42) 96%, var(--black) 100%);
}

/* The closing picture sits right, black to its left. The pale left edge is
   the one that reads as a gap, so that is the edge that resolves. */
body.home .closing-split .fig-frame::before{
  background:linear-gradient(to right,
    var(--black) 0, rgba(0,0,0,0.55) 6%, rgba(0,0,0,0) 17%);
}
body.home .closing-split .fig-frame::after{
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 88%,
    rgba(0,0,0,0.35) 96%, rgba(0,0,0,0.55) 100%);
}

/* The branch photograph runs off the right edge against warm cream, not
   black, so it takes no black overlay at all. */
body.home .branch-figure .fig-frame::before,
body.home .branch-figure .fig-frame::after{ display:none; }

/* The fade-in was written for a page that is black underneath. This page is
   cream, so a part-faded picture shows cream through it and flashes pale
   before it settles. These photographs are set solid instead. */
body.home .duo .fig-frame img,
body.home .branch-figure .fig-frame img,
body.home .hero-photo img{ opacity:1; transform:none; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME — proportion

   Three faults, measured at 1440:

   Type had four display sizes within four pixels of one another — intro 44,
   closing 43, standard 42, branches 40 — so four separate moments all spoke
   at the same volume and none of them led. Meanwhile body copy shrank the
   further down the page it sat: 16.3 in the intro, 15.2 in the branches,
   14.9 in Who We Serve, with service names at 11.7. The page had no scale,
   only a loud register and a quiet one.

   Colour ran in two slabs. Cream held 1536px unbroken from the intro through
   the branches to the standard; black then held 1661px unbroken from Who We
   Serve through the closing into the footer. Two blocks, not a rhythm.

   And the weight sat wrong: the branches alone took 1233px, a quarter of the
   page, while the closing was given 432px to carry the only ask on the page.

   Type now steps: hero, then one heading size, then a smaller one for the
   section that carries a list. Body copy holds one size throughout. The
   closing returns to cream, so the page alternates instead of stacking, and
   it is given the room the ask deserves.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Type scale ─────────────────────────────────────────────────────── */

/* The hero leads. It no longer has to shout to do it. */
body.home .hero h1{ font-size:clamp(2.35rem,5.1vw,3.95rem); }
body.home .hero .sub{ font-size:clamp(0.99rem,1.3vw,1.08rem); line-height:1.66; }

/* One size for the page's three statements. */
body.home .intro-head h2,
body.home .closing-panel h2{ font-size:clamp(1.7rem,2.85vw,2.35rem); }
body.home .standard blockquote p:first-child{ font-size:clamp(1.45rem,2.6vw,2.1rem); }

/* A step down where the heading introduces a list rather than standing alone. */
body.home .branch-head h2{ font-size:clamp(1.5rem,2.35vw,1.95rem); }
body.home .branch-item .p-num{ font-size:clamp(1.45rem,2.15vw,1.85rem); }

/* Who We Serve sat at 25.6 against siblings at 44. It belongs with them. */
body.home .serve-head h2{ font-size:clamp(1.3rem,2.05vw,1.72rem); }

/* Body copy stops shrinking as the page descends. */
body.home .intro-body p,
body.home .closing-panel p{ font-size:1.05rem; line-height:1.72; }
body.home .branch-item p,
body.home .serve-row p{ font-size:1.01rem; line-height:1.62; }
body.home .serve-head > p{ font-size:1.01rem; }
/* Service names were set smaller than the legal line in a footer. */
body.home .branch-item h3,
body.home .serve-row h3{ font-size:0.79rem; letter-spacing:0.17em; }

/* ── Weight ─────────────────────────────────────────────────────────
   The cream stretch loses a third of its depth; nothing is cropped, the
   sections simply stop holding more air than they have content for. */
body.home .intro{ padding-block:clamp(2.5rem,6vh,4rem); }
body.home .branch-head,
body.home .branch-list{ padding-block:clamp(2.3rem,5.6vh,3.8rem); }
body.home .branch-item{ padding-block:clamp(0.85rem,2vh,1.15rem); }
body.home .standard{ padding-block:clamp(2.5rem,6.5vh,4rem); }

/* Who We Serve was the tallest thing on the page after the branches, on four
   short rows. */
body.home .serve .on-black{ padding-block:clamp(2rem,5vh,3rem); }
body.home .serve-row{ padding-block:clamp(0.6rem,1.6vh,0.85rem); }
body.home .duo.serve .duo-figure{ min-height:clamp(18rem,42vh,26rem); }

/* ── The closing returns to cream ───────────────────────────────────
   Black panel, black panel, black footer was three blocks in a row and the
   only cream at the foot of the page was none. The closing takes the cream,
   so the page reads black, cream, black, cream, black — and the ask finally
   has somewhere to sit. */
body.home .closing-split .on-black{
  background:var(--cream);
  color:var(--ink-quiet);
  padding-block:clamp(3rem,8vh,5rem);
}
body.home .closing-panel h2{ color:var(--black); }
body.home .closing-panel p{ color:var(--ink-quiet); }
body.home .closing-panel .eyebrow{ color:var(--gold); }
/* On cream the CTA takes the site's own button: black on gold, as every other
   page sets it. Cream on gold was legible against the black panel and is not
   against this one. */
body.home .closing-panel .btn-primary{ color:var(--black); }
body.home .closing-panel .btn-primary:hover{ background:var(--black); border-color:var(--black); color:var(--cream); }
body.home .duo.closing-split .duo-figure{ min-height:clamp(20rem,46vh,29rem); }

/* The photograph now meets cream on its left and below, not black, so the
   overlays that resolve those edges are cream too. */
body.home .closing-split .fig-frame::before{
  background:linear-gradient(to right,
    var(--cream) 0, rgba(245,240,230,0.55) 6%, rgba(245,240,230,0) 17%);
}
body.home .closing-split .fig-frame::after{
  background:linear-gradient(to bottom,
    rgba(245,240,230,0) 0, rgba(245,240,230,0) 88%,
    rgba(245,240,230,0.35) 96%, rgba(245,240,230,0.6) 100%);
}

/* The branch paragraphs were capped at 34 characters inside a 468px column,
   so every one of them wrapped to six or seven lines and the section grew to
   1241px — a quarter of the page — on four short descriptions. Letting them
   run to a normal measure is what shortens the section; no words are cut. */
body.home .branch-item p{ max-width:47ch; }
/* Wide screens only. Written flat, this outranked the draft's own
   breakpoints and held three columns onto a phone. */
@media (min-width:1001px){
  body.home .branch-grid{ grid-template-columns:minmax(0,0.82fr) minmax(0,1.42fr) minmax(0,0.92fr); }
}

/* The closing carries the only ask on the page and had the least room of any
   section. It gets the depth now, and the picture is sized to it rather than
   the other way round. */
body.home .duo.closing-split .duo-figure{ min-height:clamp(21rem,54vh,33rem); }
body.home .closing-panel h2{ margin-bottom:1.15rem; }
body.home .closing-panel p{ max-width:34ch; margin-bottom:clamp(1.7rem,4vh,2.4rem); }

/* The intro gave its widest column to a three-line heading and its narrowest
   to seven paragraphs, so the passage ran long down the right while the left
   sat empty beneath the heading — the hole at the top of the page. The two
   columns swap emphasis: the heading takes what it needs, the passage gets
   the width, and the section loses the pocket without losing a word. */
@media (min-width:821px){
  body.home .intro-grid{ grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr); }
}
body.home .intro-head h2{ max-width:15ch; }
body.home .intro-body p{ max-width:62ch; }

/* The heading is three lines against a passage of seven paragraphs, so a
   top-aligned pair will always leave a pocket under the shorter column. It is
   set against the middle of the passage instead: the same air, no longer
   pooled in one corner of the page. */
@media (min-width:821px){
  body.home .intro-grid{ align-items:center; }
}
body.home .intro-body p{ max-width:66ch; }

/* The heading was capped well short of its own column, so a 177px strip sat
   empty beside it and, with the gap, opened a 240px trough down the middle of
   the section. Letting it fill the column closes the trough and takes the
   line off five ragged lines. */
@media (min-width:821px){ body.home .intro-head h2{ max-width:none; } }
@media (max-width:820px){ body.home .intro-head h2{ max-width:22ch; } }

/* ── Small caps that carry a section ───────────────────────────────────
   WHO WE SERVE, FOUR BRANCHES ONE STANDARD and BEGIN THE RELATIONSHIP are
   doing a section heading's job at 11.2px, and the menu was reading at 11.5.
   Both come up about a step. The tracking eases as the size grows, or the
   extra width undoes the gain — and they stay far enough below the headings
   proper that nothing competes. */
body.home .band .eyebrow,
body.home .on-black .eyebrow,
body.home .closing-panel .eyebrow{
  font-size:0.83rem;
  letter-spacing:0.2em;
}
body.home .topnav a,
body.about .topnav a{
  font-size:0.81rem;
  letter-spacing:0.16em;
}

/* The Who We Serve picture is now the herb basket: sunlit, warm and cream
   where the closing picture is dark. It is the one bright photograph on the
   lower half of the page, which is also where the page was heaviest, so it
   is given a little more depth and framed on its subject. */
body.home .serve .fig-frame img{ object-position:52% 56%; }
body.home .duo.serve .duo-figure{ min-height:clamp(20rem,48vh,30rem); }
/* A dark photograph dissolves into black; a bright one just looks smudged by
   it. This picture meets the black panel on its right and the cream closing
   below it, so both overlays come off and the picture keeps a clean edge —
   the same treatment the branch photograph already takes against cream. The
   overlays stay where they are still doing work, on the closing picture. */
body.home .serve .fig-frame::before,
body.home .serve .fig-frame::after{ display:none; }

/* ── The branches, and the arriving photograph ─────────────────────────
   Three columns — heading, list, picture — left the picture a 411px strip
   pinned in the corner while the heading column, which holds nothing but a
   label and one line, sat empty for 800px beneath it. The section had the
   space; it was simply in the wrong place.

   The heading and the list are one column now, stacked as they read, and the
   photograph takes the other on its own, full height, from the top of the
   section to the bottom and off the right edge of the screen. It gains about
   half its width again, and at that size it is close enough to its own
   proportions that the whole frame is there — the door, the car, and her —
   rather than a slice of it. ─────────────────────────────────────────── */
@media (min-width:1001px){
  body.home .branch-grid{
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    grid-template-rows:auto 1fr;
  }
  body.home .branch-head{
    grid-column:1; grid-row:1; align-self:start;
    padding-bottom:0;
  }
  body.home .branch-list{
    grid-column:1; grid-row:2; align-self:start;
    padding-top:clamp(1.4rem,3.4vh,2.2rem);
    padding-left:clamp(1.4rem,3.4vw,3rem);
  }
  body.home .branch-figure{
    grid-column:2; grid-row:1 / span 2;
    align-self:stretch;
  }
  /* The heading has a column of its own width to work in now. */
  body.home .branch-head h2{ max-width:19ch; }
}

/* Framed on her rather than on the car: the crop keeps the figure, the open
   door and the near wing, and lets the far end of the car run off the edge. */
body.home .branch-figure .fig-frame img{ object-position:22% 50%; }

/* Stacking the heading above the list gave the list column half as much width
   again, so the descriptions take a proper measure and the section pays back
   the height the stack cost it. */
@media (min-width:1001px){
  body.home .branch-item p{ max-width:60ch; }
}



/* ── The hero runs the height of the screen ────────────────────────────
   The door was cropped to 688px — a band across the top — and stopped well
   short of the fold, so the picture read as a header rather than as the
   photograph the page opens on. It now fills the screen and comes down to
   meet the section beneath it: the door is what you see, and the edge where
   it ends is the edge where the next section begins.

   The copy stays where it was, set low against the quiet side of the frame;
   the extra height goes above it, to the picture. */
body.home .hero{ min-height:100vh; }

/* On a phone 100vh is the height the viewport has with the browser chrome
   retracted, so a full-height hero gets cut off until you scroll. svh is the
   small viewport height — what is actually on screen at rest. */
@supports (height:100svh){
  body.home .hero{ min-height:100svh; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT

   The page carries the approved copy in full and in its own order. The
   mockup governs how it looks — the black opening with Dawn, the cream
   rising on a curve, the masked photography, the foliage, the gold
   ornament — and the repo governs every word.

   No photograph is a rectangle. Each is masked so its edges dissolve into
   the ground behind it. Colour runs black, cream, black, cream, black, so
   the page never sits in one tone for long.
   ═══════════════════════════════════════════════════════════════════════ */

body.about{ background:var(--cream); color:var(--ink-quiet); --topbar-h:5.4rem; }
body.about h1{ color:var(--cream); }
body.about h2, body.about h3{ color:var(--black); }

/* ── Marks ────────────────────────────────────────────────────────────── */
body.about .a-ornament{
  position:relative; height:1px; width:11rem;
  background:linear-gradient(to right, transparent, var(--gold-line) 16%, var(--gold-line) 84%, transparent);
}
body.about .a-ornament::after{
  content:""; position:absolute; left:50%; top:50%;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border:1px solid var(--gold); transform:rotate(45deg);
}
body.about .a-rule{ width:3.2rem; height:1px; background:var(--gold); }
body.about .eyebrow{ display:block; font-size:0.79rem; letter-spacing:0.21em; margin-bottom:1rem; }

/* Two columns, words left and words right — the shape most of this page uses. */
body.about .a-two{
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
  max-width:78rem; margin:0 auto;
  padding-inline:clamp(1.4rem,4vw,4.5rem);
}

/* ── Foliage ──────────────────────────────────────────────────────────
   The two supplied cut-outs that are foliage rather than crops of the
   mockup's own furniture. Feathered on every edge that does not meet the
   side of the screen. */
body.about .fol{
  position:absolute; z-index:0; pointer-events:none;
  height:auto; user-select:none;
}
body.about .fol-hero-left{
  left:0; top:10%; width:clamp(3.2rem,5.2vw,5.8rem); opacity:0.9;
  -webkit-mask-image:
    linear-gradient(to right, #000 50%, rgba(0,0,0,0.4) 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, #000 50%, rgba(0,0,0,0.4) 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%);
  mask-composite:intersect;
}
body.about .fol-black-lowerleft{
  left:0; bottom:0; width:clamp(6.5rem,14vw,14rem); opacity:0.78;
  transform:translate(-14%, 12%);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, transparent 9%, #000 26%),
    linear-gradient(to right, #000 46%, rgba(0,0,0,0.35) 76%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, transparent 9%, #000 26%),
    linear-gradient(to right, #000 46%, rgba(0,0,0,0.35) 76%, transparent 100%);
  mask-composite:intersect;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
body.about .a-hero{
  position:relative; z-index:2;
  background:var(--black);
  padding-top:var(--topbar-h);
}
body.about .a-hero-inner{
  position:relative; z-index:4;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  align-items:center;
  padding-left:clamp(1.4rem,4vw,4.5rem);
  min-height:clamp(26rem,54vw,38rem);
}
body.about .a-hero-copy{
  grid-column:1; grid-row:1;
  padding:clamp(2.5rem,7vh,4.5rem) clamp(1.5rem,3vw,2.5rem) clamp(4.5rem,12vh,7rem) 0;
  max-width:34rem;
}
body.about .a-hero-copy .eyebrow{ color:var(--gold); }
body.about .a-hero h1{
  font-size:clamp(2rem,3.6vw,3.05rem);
  line-height:1.14;
}
body.about .a-hero .a-ornament{ margin:1.7rem 0 1.9rem; }
body.about .a-hero-body{
  max-width:36ch;
  font-size:clamp(0.99rem,1.25vw,1.09rem);
  line-height:1.76; color:var(--cream-dim);
}
body.about .a-portrait{
  grid-column:2; grid-row:1;
  margin:0 0 clamp(-6rem,-8vh,-3.5rem); align-self:end; z-index:3;
}
body.about .a-portrait img{
  width:100%; height:auto; display:block;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,0.35) 7%, #000 22%),
    linear-gradient(to bottom, #000 72%, rgba(0,0,0,0.55) 88%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,0.35) 7%, #000 22%),
    linear-gradient(to bottom, #000 72%, rgba(0,0,0,0.55) 88%, transparent 100%);
  mask-composite:intersect;
}
body.about .a-curve{
  position:absolute; left:0; right:0; bottom:-1px;
  width:100%; height:clamp(5rem,11vw,10rem); z-index:1; display:block;
}
body.about .a-curve path{ fill:var(--cream); }

/* ── The Founder ──────────────────────────────────────────────────────── */
body.about .a-founder{
  position:relative; z-index:1;
  background:var(--cream);
  padding:clamp(3.5rem,10vh,7rem) 0 clamp(3rem,8vh,5.5rem);
}
body.about .a-founder-inner{
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
  max-width:78rem; margin:0 auto;
  padding-inline:clamp(1.4rem,4vw,4.5rem);
}
body.about .a-founder h2{ font-size:clamp(2rem,3.6vw,3rem); line-height:1.06; }
body.about .a-founder .a-rule{ margin-top:1.4rem; }
body.about .a-founder-body p{
  max-width:62ch;
  font-size:clamp(0.99rem,1.2vw,1.07rem);
  line-height:1.8; color:var(--ink-quiet);
}
body.about .a-founder-body p + p{ margin-top:1.2rem; }
body.about .a-lead{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:clamp(1.25rem,2vw,1.65rem) !important;
  line-height:1.44 !important;
  color:var(--black) !important;
  margin-bottom:0.4rem;
}

/* ── Statement ────────────────────────────────────────────────────────── */
body.about .a-statement{
  background:var(--cream);
  text-align:center;
  padding:clamp(2rem,6vh,3.5rem) clamp(1.4rem,4vw,4.5rem) clamp(3.5rem,10vh,6.5rem);
}
body.about .a-statement .hourglass-rule{ margin:0 auto 1.4rem; height:clamp(2.4rem,4vw,3.2rem); }
body.about .a-statement p{
  max-width:46rem; margin:0 auto;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic; color:var(--black);
  font-size:clamp(1.3rem,2.4vw,2rem);
  line-height:1.42;
}

/* ── The Standard We Keep — the dark middle of the page ───────────────── */
body.about .a-standards{
  background:var(--black);
  padding:clamp(3.5rem,10vh,6.5rem) clamp(1.4rem,4vw,4.5rem);
}
body.about .a-standards-inner{ max-width:78rem; margin:0 auto; }
body.about .a-standards-head{ max-width:36rem; margin-bottom:clamp(2rem,6vh,3.4rem); }
body.about .a-standards-head .eyebrow{ color:var(--gold); }
body.about .a-standards-head h2{ color:var(--cream); font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.14; }
body.about .a-standards-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:clamp(2rem,5vw,5rem);
  row-gap:0;
  border-top:1px solid var(--gold-faint);
}
/* Hairlines, not boxes. */
body.about .a-standard-item{
  padding:clamp(1.5rem,4vh,2.2rem) 0;
  border-bottom:1px solid var(--gold-faint);
}
body.about .a-standard-item h3{
  color:var(--cream);
  font-size:clamp(1.1rem,1.7vw,1.32rem);
  margin-bottom:0.55rem;
}
body.about .a-standard-item p{
  max-width:46ch;
  font-size:clamp(0.97rem,1.15vw,1.04rem);
  line-height:1.72; color:var(--cream-quiet);
}

/* ── Welcome Home ─────────────────────────────────────────────────────── */
body.about .a-region{
  background:var(--cream);
  padding:clamp(3.5rem,10vh,6.5rem) 0 clamp(2.5rem,7vh,4rem);
}
body.about .a-region-inner{
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
  max-width:78rem; margin:0 auto;
  padding-inline:clamp(1.4rem,4vw,4.5rem);
}
body.about .a-region h2{ font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.1; }
body.about .a-region .a-rule{ margin-top:1.4rem; }
body.about .a-region-body p{
  max-width:60ch;
  font-size:clamp(0.99rem,1.2vw,1.07rem);
  line-height:1.78; color:var(--ink-quiet);
}
body.about .a-region-body p + p{ margin-top:1.15rem; }

/* ── Where the Hours Actually Go, with the pot ────────────────────────── */
body.about .a-hours{
  position:relative;
  background:var(--cream);
  padding:clamp(2.5rem,7vh,4.5rem) 0 0;
  overflow:hidden;
}
body.about .a-hours-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-rows:auto auto;
  gap:0 clamp(2rem,5vw,5rem);
  align-items:start;
  /* The picture spans both rows and is the tallest thing here, so without
     this the rows stretch to share its height and open a gap between the
     heading and the passage beneath it. */
  align-content:start;
  padding-left:clamp(1.4rem,4vw,4.5rem);
}
body.about .a-hours-head{ grid-column:1; grid-row:1; max-width:30rem; }
body.about .a-hours h2{ font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.1; }
body.about .a-hours .a-rule{ margin-top:1.4rem; }
body.about .a-hours-body{
  grid-column:1; grid-row:2;
  padding:clamp(1.6rem,4vh,2.4rem) 0 clamp(3.5rem,10vh,6rem);
  max-width:34rem;
}
body.about .a-hours-body p{
  max-width:52ch;
  font-size:clamp(0.99rem,1.2vw,1.07rem);
  line-height:1.78; color:var(--ink-quiet);
}
body.about .a-hours-body p + p{ margin-top:1.15rem; }

/* Oversized, entering from the right, dissolving on the three edges that
   meet the page. */
body.about .a-peas{
  grid-column:2; grid-row:1 / span 2;
  position:relative; margin:0;
  align-self:stretch;
  min-height:clamp(22rem,44vw,36rem);
}
body.about .a-peas img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 64%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,0.4) 6%, #000 20%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.5) 6%, #000 17%, #000 78%, rgba(0,0,0,0.5) 92%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,0.4) 6%, #000 20%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.5) 6%, #000 17%, #000 78%, rgba(0,0,0,0.5) 92%, transparent 100%);
  mask-composite:intersect;
}
body.about .a-peas figcaption{
  position:absolute; left:clamp(1.5rem,3vw,2.5rem); bottom:clamp(1rem,3vh,2rem);
  font-size:0.74rem; letter-spacing:0.19em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── Closing ──────────────────────────────────────────────────────────── */
body.about .a-closing{
  position:relative;
  background:var(--black);
  text-align:center;
  padding:clamp(4rem,12vh,7.5rem) clamp(1.4rem,4vw,4.5rem);
  overflow:hidden;
}
body.about .a-closing-inner{ position:relative; z-index:2; max-width:44rem; margin:0 auto; }
body.about .a-closing .eyebrow{ color:var(--gold); }
body.about .a-closing h2{ color:var(--cream); font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:1.1rem; }
body.about .a-closing p{ color:var(--cream-dim); max-width:36rem; margin:0 auto 2.3rem; }

body.about footer{ background:var(--black); position:relative; z-index:2; }

/* ── About, narrow screens ────────────────────────────────────────────
   One column throughout, same order, same logic. Dawn and the pot stay
   full width and integrated rather than shrinking into boxes. */
@media (max-width:900px){
  body.about .a-hero-inner{
    grid-template-columns:1fr; align-items:start; min-height:0;
    padding-left:clamp(1.4rem,5vw,3rem);
  }
  body.about .a-hero-copy{
    grid-column:1; grid-row:1; max-width:none;
    padding:clamp(1.5rem,4vh,2.5rem) clamp(1.4rem,5vw,3rem) clamp(2rem,5vh,3rem) 0;
  }
  body.about .a-hero h1{ font-size:clamp(1.85rem,6.6vw,2.5rem); }
  body.about .a-portrait{
    grid-column:1; grid-row:2;
    width:100vw;
    margin-left:calc(-1 * clamp(1.4rem,5vw,3rem));
    margin-bottom:clamp(-4rem,-6vh,-2.5rem);
  }
  body.about .a-portrait img{
    -webkit-mask-image:linear-gradient(to bottom, #000 74%, rgba(0,0,0,0.5) 90%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 74%, rgba(0,0,0,0.5) 90%, transparent 100%);
  }
  body.about .a-curve{ height:clamp(3rem,10vw,6rem); }

  body.about .a-founder-inner,
  body.about .a-region-inner{ grid-template-columns:1fr; gap:clamp(1.4rem,4vh,2rem); }
  body.about .a-standards-list{ grid-template-columns:1fr; }

  body.about .a-hours-inner{
    grid-template-columns:1fr;
    padding-left:clamp(1.4rem,5vw,3rem);
  }
  body.about .a-hours-head{ grid-column:1; grid-row:1; padding-right:clamp(1.4rem,5vw,3rem); }
  body.about .a-hours-body{
    grid-column:1; grid-row:2;
    padding:clamp(1.4rem,4vh,2rem) clamp(1.4rem,5vw,3rem) clamp(2.5rem,6vh,3.5rem) 0;
    max-width:none;
  }
  body.about .a-peas{
    grid-column:1; grid-row:3;
    width:100vw; min-height:0;
    height:clamp(18rem,66vw,26rem);
    margin-left:calc(-1 * clamp(1.4rem,5vw,3rem));
  }
  body.about .a-peas img{
    object-position:50% 62%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 82%, rgba(0,0,0,0.5) 94%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 82%, rgba(0,0,0,0.5) 94%, transparent 100%);
  }

  body.about .fol-hero-left{ width:clamp(2.2rem,7vw,3.4rem); opacity:0.72; }
  body.about .fol-black-lowerleft{ width:clamp(5rem,22vw,8rem); opacity:0.72; }
}

/* The picture spans both rows, and a spanning item's height is shared out
   across the tracks it covers — which grew them and opened a gap between the
   heading and the passage. The words take one cell of their own instead, so
   the picture can be as tall as it likes without pushing them apart. */
body.about .a-hours-inner{ grid-template-rows:auto; }
body.about .a-hours-words{ grid-column:1; grid-row:1; }
body.about .a-hours-head{ grid-column:auto; grid-row:auto; }
body.about .a-hours-body{ grid-column:auto; grid-row:auto; }
body.about .a-peas{ grid-column:2; grid-row:1; }
@media (max-width:900px){
  body.about .a-hours-words{ grid-column:1; grid-row:1; }
  body.about .a-peas{ grid-column:1; grid-row:2; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT — proportion, second pass

   Measured at 1440: the page ran 5205px, the portrait 698x852, the pot
   671x839, and the founder's story stood as a single column 626 wide and
   843 tall. The pictures were leading and the words were following, which
   is backwards on this page.

   Three changes. The story sets in two columns, which is what an editorial
   page does with a passage this long and halves the height it costs. Both
   photographs come down to roughly two thirds of what they were, so they
   sit beside the copy rather than over it. And the masks come off: each
   picture runs to the edge of the screen and is cut cleanly where it meets
   the words — anchored to the page, not floated on it and not faded into
   it.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Photographs sit in the page ──────────────────────────────────────
   No feathering. One edge runs off the screen, the others are the section's
   own boundaries, so nothing reads as a box dropped on top. */
body.about .a-portrait img,
body.about .a-peas img{
  -webkit-mask-image:none; mask-image:none;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
@media (min-width:901px){
  body.about .a-hero-inner{
    grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);
    min-height:clamp(22rem,42vw,31rem);
  }
  body.about .a-hero-copy{
    padding-block:clamp(2rem,5.5vh,3.5rem) clamp(3rem,8vh,5rem);
  }
  body.about .a-portrait{
    align-self:end;
    margin-bottom:0;
  }
  /* Framed on her rather than on the wall behind her, now that the picture
     is smaller. */
  body.about .a-portrait img{
    width:100%; height:clamp(20rem,38vw,28rem);
    object-fit:cover; object-position:52% 22%;
  }
}

/* ── The founder's story, set in columns ──────────────────────────────── */
@media (min-width:901px){
  body.about .a-founder{ padding-block:clamp(2.5rem,7vh,4.5rem) clamp(2rem,6vh,3.5rem); }
  body.about .a-founder-inner{ grid-template-columns:minmax(0,0.5fr) minmax(0,1.5fr); }
  body.about .a-founder-body{
    columns:2;
    column-gap:clamp(2rem,4vw,3.4rem);
    column-rule:1px solid var(--gold-faint);
  }
  body.about .a-founder-body p{ max-width:none; }
  /* A paragraph must not be split across the two columns. */
  body.about .a-founder-body p{ break-inside:avoid; }
  /* The opening line stands across both columns, as the passage's own lead. */
  body.about .a-lead{
    column-span:all;
    margin-bottom:1.3rem;
  }
}

/* ── The pot ──────────────────────────────────────────────────────────── */
@media (min-width:901px){
  body.about .a-hours{ padding-top:clamp(2rem,6vh,3.5rem); }
  body.about .a-hours-inner{ grid-template-columns:minmax(0,1.18fr) minmax(0,0.82fr); }
  body.about .a-hours-words{ padding-bottom:clamp(2.5rem,7vh,4.5rem); }
  body.about .a-peas{
    min-height:0;
    height:clamp(17rem,30vw,23rem);
    align-self:center;
  }
  body.about .a-peas img{ object-position:50% 62%; }
  body.about .a-peas figcaption{
    left:auto; right:clamp(1.5rem,3vw,2.5rem);
    bottom:clamp(0.7rem,2vh,1.2rem);
    color:var(--cream); text-shadow:0 1px 10px rgba(0,0,0,0.75);
  }
}

/* ── Vertical rhythm ──────────────────────────────────────────────────── */
@media (min-width:901px){
  body.about .a-statement{ padding-block:clamp(1.5rem,4vh,2.5rem) clamp(2.5rem,7vh,4.5rem); }
  body.about .a-standards{ padding-block:clamp(2.5rem,7vh,4.5rem); }
  body.about .a-standards-head{ margin-bottom:clamp(1.5rem,4vh,2.4rem); }
  body.about .a-standard-item{ padding-block:clamp(1.1rem,3vh,1.6rem); }
  body.about .a-region{ padding-block:clamp(2.5rem,7vh,4.5rem) clamp(1.5rem,5vh,2.8rem); }
  body.about .a-closing{ padding-block:clamp(3rem,8vh,5rem); }
}

/* Narrow screens keep one column of type, and the pictures stay clean-edged
   and full width rather than fading. */
@media (max-width:900px){
  body.about .a-portrait img{ height:auto; object-fit:fill; }
  body.about .a-peas{ height:clamp(14rem,52vw,20rem); }
  body.about .a-peas img{ object-position:50% 60%; }
  body.about .a-peas figcaption{ color:var(--cream); text-shadow:0 1px 10px rgba(0,0,0,0.75); }
}

/* ── Both photographs become columns of the page ──────────────────────
   A clean rectangle showing three of its edges is still a box sitting on
   the page. Each picture now runs the full depth of its section and off the
   right of the screen, so the only edge it shows is the one where it meets
   the words. Top, bottom and right are the page's own boundaries. */
@media (min-width:901px){
  body.about .a-hero-inner{ display:block; min-height:0; padding-left:0; }
  body.about .a-hero-copy{
    max-width:none;
    width:min(56%, 42rem);
    padding:clamp(2.5rem,7vh,4.5rem) 0 clamp(5rem,13vh,8rem) clamp(1.4rem,4vw,4.5rem);
  }
  body.about .a-portrait{
    position:absolute; top:0; right:0; bottom:0;
    width:min(44%, 40rem);
    margin:0; z-index:3;
  }
  body.about .a-portrait img{
    width:100%; height:100%;
    object-fit:cover; object-position:56% 26%;
  }

  body.about .a-hours{ padding-bottom:0; }
  body.about .a-hours-inner{ display:block; padding-left:0; }
  body.about .a-hours-words{
    width:min(60%, 44rem);
    padding:0 0 clamp(3rem,8vh,5rem) clamp(1.4rem,4vw,4.5rem);
  }
  body.about .a-peas{
    position:absolute; top:0; right:0; bottom:0;
    width:min(38%, 34rem);
    height:auto; min-height:0; margin:0;
  }
  body.about .a-peas img{ width:100%; height:100%; object-fit:cover; object-position:48% 60%; }
}

/* Both pictures are direct children of their sections now, so each resolves
   against the section rather than the inner grid, and neither can escape it. */
body.about .a-hero{ overflow:hidden; }
body.about .a-hours{ position:relative; overflow:hidden; }
@media (min-width:901px){
  body.about .a-portrait{ top:var(--topbar-h); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT — the pot, built the way the mockup builds it

   What was wrong: a rectangle of photograph sitting in a field of cream,
   with margin all around it drawing the eye straight to its edges. The
   mockup does not do that. There, the photograph covers the whole right
   side of the section, runs off the right of the screen and off the foot of
   it, and the black band below crops it. It has no frame and no fade — what
   makes its left side disappear is the photograph's own pale marble and the
   white pitcher, which sit at almost exactly the page's cream. The picture
   is part of the page because its edges are the page's edges.

   So: the pot covers the section, bleeds right and bottom, and is framed so
   the pale left of the frame lands where it meets the words.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width:901px){
  body.about .a-hours{
    padding-top:clamp(2.5rem,7vh,4.5rem);
    padding-bottom:0;
    min-height:clamp(26rem,42vw,34rem);
  }
  body.about .a-hours-words{
    position:relative; z-index:3;
    width:min(44%, 32rem);
    padding:0 0 clamp(3rem,8vh,5rem) clamp(1.4rem,4vw,4.5rem);
  }

  /* Covers the section. Right and bottom are the page's own edges; the only
     boundary is on the left, and the frame is set so the pitcher and the
     marble fall there. */
  body.about .a-peas{
    position:absolute; top:0; right:0; bottom:0;
    width:min(62%, 56rem);
    height:auto; min-height:0; margin:0; z-index:1;
  }
  body.about .a-peas img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:52% 34%;
  }
  body.about .a-peas figcaption{
    position:absolute; right:clamp(1.5rem,3vw,2.5rem); bottom:clamp(0.9rem,2.5vh,1.5rem);
    z-index:2;
    font-size:0.72rem; letter-spacing:0.19em; text-transform:uppercase;
    color:var(--cream); text-shadow:0 1px 12px rgba(0,0,0,0.8);
  }
}

/* ── The foliage, cropped to the leaves ───────────────────────────────
   Each of these three was cut from the mockup with page furniture caught in
   the frame — the words MY ST under one, the foot of the OUR SERVICES button
   over another, the pot's own rim under the third. Each is clipped to the
   band that is only leaves, so what reaches the page is foliage and nothing
   else. Crop and position, no retouching. */
body.about .fol-cream-topleft{
  left:0; top:0; z-index:0;
  width:clamp(4.5rem,7.5vw,8rem);
  /* the lower third carries the type */
  clip-path:inset(0 0 34% 0);
  transform:translate(-18%, -6%);
  opacity:0.9;
}
body.about .fol-cream-lower{
  left:0; bottom:0; z-index:2;
  width:clamp(14rem,30vw,28rem);
  /* the top strip carries the button */
  clip-path:inset(20% 0 0 0);
  transform:translate(-4%, 10%);
  opacity:0.95;
}
body.about .fol-peas-right{
  right:0; top:0; z-index:2;
  width:clamp(7rem,14vw,14rem);
  /* wood above, the pot's rim below; the leaves are the middle band */
  clip-path:inset(30% 0 30% 0);
  transform:translate(12%, -14%);
  opacity:0.95;
}

@media (max-width:900px){
  body.about .a-peas figcaption{ position:absolute; right:auto; left:clamp(1.4rem,5vw,3rem); }
  body.about .fol-cream-lower{ width:clamp(10rem,46vw,16rem); opacity:0.8; }
  body.about .fol-peas-right{ display:none; }
  body.about .fol-cream-topleft{ width:clamp(3rem,11vw,5rem); opacity:0.8; }
}

/* The frame is set so the pale marble and the pitcher fall where the picture
   meets the words, which is what makes that boundary disappear in the mockup
   — the photograph's own tone, not an effect. */
@media (min-width:901px){
  body.about .a-peas img{ object-position:50% 54%; }
}

/* The three crops carry the mockup's own pale background inside the frame, so
   placed flat they read as rectangles of grey on the cream. Multiplied, that
   background falls away against the page and only the leaves remain — the
   artwork is integrated rather than feathered, and nothing is retouched. */
body.about .fol-cream-topleft,
body.about .fol-cream-lower,
body.about .fol-peas-right{
  mix-blend-mode:multiply;
}

/* The lower crop is mostly a grey wash lifted from the mockup's own
   background, with clean leaves only along its bottom-left. Clipped to that
   corner, so what lands on the page is leaves. */
body.about .fol-cream-lower{
  clip-path:inset(38% 56% 0 0);
  width:clamp(20rem,44vw,40rem);
  transform:translate(-6%, 12%);
}

/* Clipping alone leaves a straight edge where the crop ends, because the
   file's background is an opaque wash rather than transparency. The two edges
   that face into the page are softened so the crop ends in leaves rather than
   on a line. This is the foliage only — a decorative frame, which is how the
   mockup draws it. No photograph is treated this way. */
body.about .fol-cream-lower{
  -webkit-mask-image:
    linear-gradient(to right, #000 42%, rgba(0,0,0,0.35) 72%, transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.4) 14%, #000 36%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, #000 42%, rgba(0,0,0,0.35) 72%, transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.4) 14%, #000 36%);
  mask-composite:intersect;
}
body.about .fol-cream-topleft{
  -webkit-mask-image:
    linear-gradient(to bottom, #000 46%, rgba(0,0,0,0.35) 76%, transparent 100%),
    linear-gradient(to right, #000 52%, rgba(0,0,0,0.35) 80%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, #000 46%, rgba(0,0,0,0.35) 76%, transparent 100%),
    linear-gradient(to right, #000 52%, rgba(0,0,0,0.35) 80%, transparent 100%);
  mask-composite:intersect;
}
body.about .fol-peas-right{
  -webkit-mask-image:linear-gradient(to left, #000 40%, rgba(0,0,0,0.35) 74%, transparent 100%);
  mask-image:linear-gradient(to left, #000 40%, rgba(0,0,0,0.35) 74%, transparent 100%);
}

/* clip-path cuts a hard edge and the mask then feathers against the element's
   full box, not against the cut — so the two were fighting and the straight
   edge survived. The clip comes off and the mask alone isolates the leafy
   corner of each crop, which means every edge it has is a soft one. */
body.about .fol-cream-lower{
  clip-path:none;
  -webkit-mask-image:
    linear-gradient(to right, #000 22%, rgba(0,0,0,0.5) 38%, transparent 52%),
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.5) 56%, #000 70%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, #000 22%, rgba(0,0,0,0.5) 38%, transparent 52%),
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.5) 56%, #000 70%);
  mask-composite:intersect;
}
body.about .fol-cream-topleft{
  clip-path:none;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 34%, rgba(0,0,0,0.45) 52%, transparent 66%),
    linear-gradient(to right, #000 46%, rgba(0,0,0,0.4) 70%, transparent 88%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, #000 34%, rgba(0,0,0,0.45) 52%, transparent 66%),
    linear-gradient(to right, #000 46%, rgba(0,0,0,0.4) 70%, transparent 88%);
  mask-composite:intersect;
}
body.about .fol-peas-right{
  clip-path:none;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 26%, rgba(0,0,0,0.5) 40%, #000 52%, #000 62%, rgba(0,0,0,0.5) 74%, transparent 86%),
    linear-gradient(to left, #000 34%, rgba(0,0,0,0.4) 62%, transparent 84%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 26%, rgba(0,0,0,0.5) 40%, #000 52%, #000 62%, rgba(0,0,0,0.5) 74%, transparent 86%),
    linear-gradient(to left, #000 34%, rgba(0,0,0,0.4) 62%, transparent 84%);
  mask-composite:intersect;
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT — the photographs ARE the sections

   Read off the mockup properly this time. Neither picture there is a column
   beside the words. Each one FILLS its section, edge to edge, top to bottom,
   and the type sits on top of it. What makes the left of each read as page
   rather than photograph is a scrim — black over the hero, cream over the
   story — that carries the picture down to the page's own colour so the
   words have something to sit on.

   That is why nothing in the mockup has an edge: there is no edge to have.
   The photograph runs to all four sides of its section, so the only
   boundaries are the section's own.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero: the photograph fills it ────────────────────────────────────── */
body.about .a-portrait{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; z-index:1;
}
body.about .a-portrait img{
  width:100%; height:100%;
  object-fit:cover; object-position:62% 30%;
  -webkit-mask-image:none; mask-image:none;
}
/* The scrim. Solid black where the words are, gone by the time it reaches
   her, so the picture is full strength on the right. */
body.about .a-hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to right,
      var(--black) 0, var(--black) 24%,
      rgba(0,0,0,0.92) 34%, rgba(0,0,0,0.55) 48%,
      rgba(0,0,0,0.18) 60%, rgba(0,0,0,0) 72%),
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0, rgba(0,0,0,0) 22%);
}
body.about .a-hero-inner{ position:relative; z-index:4; }
body.about .a-curve{ z-index:5; }
body.about .fol-hero-left{ z-index:6; }

@media (min-width:901px){
  body.about .a-hero{ min-height:clamp(30rem,48vw,40rem); }
  body.about .a-hero-copy{
    width:min(50%, 38rem);
    padding:clamp(3rem,9vh,6rem) 0 clamp(6rem,15vh,9rem) clamp(1.4rem,4vw,4.5rem);
  }
}

/* ── The story: the photograph fills it too ──────────────────────────── */
body.about .a-peas{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; min-height:0; z-index:1;
}
body.about .a-peas img{
  width:100%; height:100%;
  object-fit:cover; object-position:58% 52%;
  -webkit-mask-image:none; mask-image:none;
}
/* Cream where the words are, gone by the pot. */
body.about .a-hours::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to right,
    var(--cream) 0, var(--cream) 26%,
    rgba(245,240,230,0.94) 36%, rgba(245,240,230,0.6) 50%,
    rgba(245,240,230,0.2) 62%, rgba(245,240,230,0) 74%);
}
body.about .a-hours-inner{ position:relative; z-index:4; }
body.about .a-hours .fol{ z-index:5; }
body.about .a-peas figcaption{ z-index:5; }

@media (min-width:901px){
  body.about .a-hours{ min-height:clamp(26rem,40vw,34rem); }
  body.about .a-hours-words{
    width:min(48%, 34rem);
    padding:0 0 clamp(3.5rem,10vh,6rem) clamp(1.4rem,4vw,4.5rem);
  }
}

/* Narrow screens: the picture still fills its section, the scrim turns to run
   down the page instead of across it so the words keep their ground. */
@media (max-width:900px){
  body.about .a-portrait{ width:100%; margin-left:0; }
  body.about .a-portrait img{ object-position:66% 26%; }
  body.about .a-hero::after{
    background:linear-gradient(to bottom,
      var(--black) 0, rgba(0,0,0,0.92) 34%, rgba(0,0,0,0.6) 52%, rgba(0,0,0,0.12) 72%, rgba(0,0,0,0) 84%);
  }
  body.about .a-hero-copy{ width:auto; }
  body.about .a-hero{ min-height:clamp(30rem,96vw,44rem); }

  body.about .a-peas{ width:100%; margin-left:0; height:100%; }
  body.about .a-peas img{ object-position:58% 55%; }
  body.about .a-hours::after{
    background:linear-gradient(to bottom,
      var(--cream) 0, rgba(245,240,230,0.95) 38%, rgba(245,240,230,0.6) 56%, rgba(245,240,230,0.1) 78%, rgba(245,240,230,0) 88%);
  }
  body.about .a-hours-words{ width:auto; }
  body.about .a-hours{ min-height:clamp(26rem,92vw,38rem); }
  body.about .a-peas figcaption{ left:clamp(1.4rem,5vw,3rem); right:auto; bottom:clamp(0.8rem,2vh,1.2rem); }
}

/* Measured off the mockup: the hero photograph occupies from x=350 to the
   right edge of a 941 canvas — about 63% — at very close to the picture's own
   proportions. Run full width it becomes a wide slit cropped to her face,
   which is not what the mockup shows. So the picture holds the right of the
   section at its own shape, and the scrim dissolves its left edge into the
   page's black. No edge, no block, and the frame is the one that was shot. */
@media (min-width:901px){
  body.about .a-hero{ min-height:clamp(34rem,66vw,60rem); }
  body.about .a-portrait{
    left:auto; right:0;
    width:min(61%, 58rem);
  }
  body.about .a-portrait img{ object-position:56% 26%; }
  body.about .a-hero::after{
    background:
      linear-gradient(to right,
        var(--black) 0, var(--black) 40%,
        rgba(0,0,0,0.88) 45%, rgba(0,0,0,0.5) 54%,
        rgba(0,0,0,0.16) 63%, rgba(0,0,0,0) 72%),
      linear-gradient(to bottom, rgba(0,0,0,0.5) 0, rgba(0,0,0,0) 18%);
  }
  body.about .a-hero-copy{
    width:min(46%, 34rem);
    padding:clamp(3rem,9vh,6rem) 0 clamp(6rem,16vh,10rem) clamp(1.4rem,4vw,4.5rem);
  }

  body.about .a-hours{ min-height:clamp(28rem,50vw,42rem); }
  body.about .a-peas{
    left:auto; right:0;
    width:min(66%, 60rem);
  }
  body.about .a-peas img{ object-position:52% 56%; }
  body.about .a-hours::after{
    background:linear-gradient(to right,
      var(--cream) 0, var(--cream) 36%,
      rgba(245,240,230,0.9) 42%, rgba(245,240,230,0.52) 52%,
      rgba(245,240,230,0.16) 62%, rgba(245,240,230,0) 72%);
  }
  body.about .a-hours-words{ width:min(44%, 32rem); }
}

@media (max-width:900px){
  body.about .a-portrait{ left:0; right:0; width:100%; }
  body.about .a-peas{ left:0; right:0; width:100%; }
}

/* Narrow screens. The same construction, turned ninety degrees: the words
   hold the top of the section on the page's own colour, the photograph runs
   full width across the foot of it and off all three of its edges, and the
   scrim carries one into the other so there is no line where they meet. */
@media (max-width:900px){
  body.about .a-hero{ min-height:clamp(38rem,185vw,48rem); }
  body.about .a-portrait{
    top:auto; bottom:0;
    height:clamp(15rem,72vw,21rem);
  }
  body.about .a-portrait img{ object-position:58% 20%; }
  body.about .a-hero::after{
    background:linear-gradient(to bottom,
      var(--black) 0, var(--black) 54%,
      rgba(0,0,0,0.85) 59%, rgba(0,0,0,0.4) 65%,
      rgba(0,0,0,0.12) 71%, rgba(0,0,0,0) 78%);
  }

  body.about .a-hours{ min-height:clamp(38rem,190vw,48rem); }
  body.about .a-peas{
    top:auto; bottom:0;
    height:clamp(15rem,70vw,21rem);
  }
  body.about .a-peas img{ object-position:52% 54%; }
  body.about .a-hours::after{
    background:linear-gradient(to bottom,
      var(--cream) 0, var(--cream) 54%,
      rgba(245,240,230,0.88) 59%, rgba(245,240,230,0.45) 65%,
      rgba(245,240,230,0.14) 71%, rgba(245,240,230,0) 78%);
  }
}
@media (max-width:900px){
  body.about .a-peas figcaption{
    left:clamp(1.4rem,5vw,3rem); right:clamp(1.4rem,5vw,3rem);
    font-size:0.62rem; letter-spacing:0.16em; line-height:1.5;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SERVICES — built to the approved mockup

   The mockup's construction, section by section: a black opening with the
   door photographed at its right and the words carried across it; the four
   branches set down one column of a cream field with the still life filling
   the other and the cream carried into it; a black band with the magnolia in
   its corner; a black close.

   The copy is the live site's, unchanged. Where the mockup shortens a
   passage or renames a link, the page keeps what is approved and the design
   makes room for it.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The bar the mockup draws on this page: the mark at the left, the pages
   across the middle, the action at the right — the same bar the cream pages
   carry, in the dark tone this page opens in. ─────────────────────────── */
body.services{ --topbar-h:6.5rem; }
body.services .topbar{
  position:fixed;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  padding:0.5rem clamp(1.2rem,3vw,2.6rem);
  background:var(--black);
  border-bottom:1px solid rgba(245,240,230,0.12);
  min-height:var(--topbar-h);
}
body.services .topbar.settled{
  background:var(--black);
  border-bottom-color:rgba(245,240,230,0.12);
  padding-top:0.5rem; padding-bottom:0.5rem;
}
body.services .topbar-mark{ align-items:flex-start; }
body.services .topbar-mark img{
  width:min(150px,32vw);
  margin:-2.5rem 0 -2.1rem;
}
body.services .topnav{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(0.9rem,2.4vw,2.1rem); flex-wrap:wrap;
}
body.services .topnav a{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:0.72rem; letter-spacing:0.19em; text-transform:uppercase;
  color:var(--cream-dim);
  padding-bottom:0.3rem;
  border-bottom:1px solid transparent;
  white-space:nowrap;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
body.services .topnav a:hover,
body.services .topnav a:focus-visible{ color:var(--gold); }
body.services .topnav a[aria-current]{ color:var(--cream); border-bottom-color:var(--gold); }
body.services .topbar-actions{ flex-direction:column; align-items:flex-end; gap:0.34rem; }
body.services .topbar-actions .client-login{
  background:var(--gold); border:1px solid var(--gold); border-radius:2px;
  color:var(--black);
  font-size:0.72rem; letter-spacing:0.2em; padding:0.62rem 1.9rem;
}
body.services .topbar-actions .client-login:hover,
body.services .topbar-actions .client-login:focus-visible{
  background:var(--cream); border-color:var(--cream); color:var(--black);
}
body.services .bar-tagline{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic; font-size:0.84rem; letter-spacing:0.03em;
  color:var(--gold); white-space:nowrap; text-align:right;
}
body.services .topbar-lead{ display:none; }
@media (max-width:1180px){
  body.services .topnav{ gap:clamp(0.5rem,1.5vw,1.2rem); flex-wrap:nowrap; }
  body.services .topnav a{ font-size:0.6rem; letter-spacing:0.11em; }
}
@media (max-width:860px){
  body.services .topnav{ display:none; }
  body.services .topbar-lead{ display:flex; }
  body.services .topbar-mark{ order:-1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Measured off THIME_Services_Page_APPROVED_Full_Design.png, 941 x 1672.
   Every figure below is that file's own geometry, as a share of its width.

     bar              0 -   68   ( 7.2% )
     opening         68 -  350   photograph from x=376 (40%) to the edge
     cream field    352 - 1245   photograph from x=534 (56.7%) to the edge
       numerals      x  44
       names/copy    x 159 - 431 (17% - 46%)
     black band    1247 - 1412   magnolia x 0 - 258 (27.4%), rule at x 641
     close and footer to 1672

   The pictures are plain rectangles in the approved design. No scrims, no
   dissolves, no blending: each one starts where it starts.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The opening ──────────────────────────────────────────────────────── */
body.services .s-hero{
  position:relative; overflow:hidden;
  padding:0; text-align:left; border-bottom:0;
  background:var(--black);
  display:flex; align-items:center;
  min-height:clamp(23rem,37vw,33rem);
}
body.services .s-door{
  position:absolute; top:var(--topbar-h); right:0; bottom:0; left:40%;
  margin:0; z-index:1;
}
body.services .s-door img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
}
body.services .s-hero::after{ content:none; }
body.services .s-hero-inner{
  position:relative; z-index:3;
  width:36%;
  padding:calc(var(--topbar-h) + clamp(1rem,3.4vh,2.2rem)) 0 clamp(1.5rem,4vh,2.6rem) 6%;
}
body.services .s-hero-inner .eyebrow{ display:block; color:var(--gold); }
body.services .s-hero-inner h1{
  margin-top:0.7rem;
  font-size:clamp(1.95rem,3.4vw,3.1rem); line-height:1.06;
  text-wrap:balance;
}
body.services .s-hero-inner h1::after{
  content:""; display:block;
  width:clamp(3rem,6vw,4.6rem); height:1px;
  background:var(--gold); margin:clamp(0.9rem,2.4vh,1.4rem) 0 0;
}
body.services .s-hero-inner .standfirst{
  margin:clamp(0.9rem,2.4vh,1.3rem) 0 0;
  font-size:clamp(0.95rem,1.15vw,1.06rem);
  line-height:1.62;
}

/* ── The cream field: four branches left, one photograph right ────────── */
body.services .s-branches{
  position:relative; overflow:hidden;
  background:var(--cream); color:var(--ink-quiet);
  padding-block:clamp(2.5rem,6vw,5rem);
}
body.services .s-still{
  position:absolute; top:0; bottom:0; right:0; left:52%;
  margin:0; z-index:1;
}
body.services .s-still img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
}
body.services .s-branches::after{ content:none; }
body.services .s-branches .section-inner{ position:relative; z-index:3; max-width:none; }

body.services .branch-cards{
  display:block; background:none; border:0; gap:0;
  width:45%; margin-left:2.5%;
}
body.services .branch-card{
  display:grid;
  grid-template-columns:13% minmax(0,1fr);
  column-gap:2%;
  align-items:start;
  background:none; padding:0;
  padding-block:clamp(0.9rem,2vh,1.5rem);
}
body.services .branch-card:hover{ background:none; }
body.services .branch-card .numeral{
  grid-column:1; grid-row:1 / span 4;
  font-style:normal; font-size:clamp(2.4rem,4.8vw,3.7rem); line-height:0.9;
  color:rgba(161,133,55,0.4);
  transition:color .4s var(--ease);
}
body.services .branch-card h2{
  grid-column:2;
  color:var(--black); font-size:clamp(1.35rem,2.55vw,2.05rem); line-height:1.14;
  transition:color .4s var(--ease);
}
body.services .branch-card h2::before{
  content:""; display:block;
  width:1.9rem; height:2px; background:var(--gold);
  margin-bottom:clamp(0.5rem,1.2vh,0.8rem);
}
body.services .branch-card p{
  grid-column:2; color:var(--ink-quiet); max-width:30rem;
  margin-top:0.55rem;
  font-size:clamp(0.88rem,1.02vw,0.98rem); line-height:1.5;
}
body.services .branch-card .more{
  grid-column:2; margin-top:0.85rem; padding-top:0;
  color:var(--gold);
}
body.services .branch-card .more::after{ content:" \2192"; }
body.services .branch-card:hover h2{ color:var(--gold); }
body.services .branch-card:hover .numeral{ color:rgba(161,133,55,0.75); }

/* ── The basket band, on the same cream, unframed ─────────────────────── */
body.services .s-craft{
  background:var(--cream); color:var(--ink-quiet);
  padding-block:0;
  align-items:center;
}
body.services .s-craft .fig-frame{
  height:clamp(18rem,40vw,30rem);
  border:0; background:none;
}
body.services .s-craft .fig-frame::before,
body.services .s-craft .fig-frame::after{ content:none; }
body.services .s-craft .bleed-copy{ padding-block:clamp(2.5rem,7vh,4.5rem); }
body.services .s-craft .bleed-copy p{ color:var(--ink-soft); }
body.services .s-craft .bleed-copy .fig-note{ color:rgba(0,0,0,0.45); }

/* ── The black band: magnolia at the left, the rule at 68% ────────────── */
body.services .s-shaped{
  position:relative; overflow:hidden;
  background:var(--black);
  padding:clamp(1.8rem,4.5vh,3rem) 0;
}
/* The picture is held at the size the approved design gives it — 258 x 165 on
   a 941 page — pinned to the left of the band and starting on the same line as
   the heading. Stretching it to the full height of a band that carries three
   paragraphs rather than two lines would blow it up six times over. */
body.services .s-magnolia{
  position:absolute; left:0; top:0; bottom:0;
  width:27.4%; height:100%;
  object-fit:cover; object-position:50% 50%;
  z-index:1; pointer-events:none;
}
body.services .s-shaped .split{
  position:relative; z-index:2;
  max-width:none; margin:0;
  padding-left:30.5%; padding-right:5%;
  grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
}
body.services .s-shaped .split-aside .eyebrow{ display:block; color:var(--gold); }
body.services .s-shaped .split-aside h2{ color:var(--cream); }
body.services .s-shaped .split-aside{ padding-bottom:0; }
body.services .s-shaped .prose{
  border-left:1px solid var(--gold-line);
  padding-left:clamp(1.2rem,2.6vw,2.2rem);
  color:var(--cream-dim);
}

body.services .s-closing{ border-top:0; }

/* ── Narrow screens ───────────────────────────────────────────────────── */
@media (max-width:900px){
  body.services .s-hero{ min-height:clamp(34rem,152vw,44rem); align-items:flex-start; }
  body.services .s-hero-inner{
    width:auto; padding:calc(var(--topbar-h) + 1.5rem) var(--gutter) clamp(2rem,5vh,3rem);
  }
  body.services .s-door{
    top:auto; left:0; right:0; bottom:0; height:clamp(11rem,44vw,16rem);
  }

  body.services .branch-cards{ width:auto; margin-left:0; }
  body.services .s-still{
    top:auto; left:0; right:0; bottom:0; height:clamp(15rem,64vw,22rem);
  }
  body.services .s-branches{ padding-bottom:clamp(16rem,66vw,23rem); }
  body.services .branch-card{ grid-template-columns:3.2rem minmax(0,1fr); column-gap:1rem; }

  body.services .s-shaped{ padding:0 0 clamp(2.5rem,6vh,4rem); }
  body.services .s-magnolia{
    position:static; width:100%; height:clamp(9rem,34vw,13rem);
    display:block; margin-bottom:clamp(1.5rem,4vh,2.5rem);
  }
  body.services .s-shaped .split{
    display:block; padding-left:var(--gutter); padding-right:var(--gutter);
  }
  body.services .s-shaped .prose{ border-left:0; padding-left:0; margin-top:1.2rem; }
}

@media (max-width:640px){
  body.services .bar-tagline{ display:none; }
  body.services .topbar-actions .client-login{ padding:0.5rem 1.1rem; letter-spacing:0.14em; }
}

/* ── The relationship band, as the approved design sets it ────────────── */
body.services .s-shaped .split-aside h2{
  font-size:clamp(1.5rem,2.7vw,2.15rem); line-height:1.14; margin-top:0.7rem;
}
body.services .s-shaped .split-aside p{
  margin-top:0.9rem; max-width:32rem;
  color:var(--cream-dim);
  font-size:clamp(0.9rem,1.05vw,1rem); line-height:1.55;
}
/* The gold statement at the right, behind its own rule. */
body.services .s-statement{
  border-left:1px solid var(--gold-line);
  padding-left:clamp(1.2rem,2.6vw,2.2rem);
  align-self:center;
  color:var(--gold);
  font-family:'the-seasons','The Seasons','Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:clamp(1.3rem,2.3vw,1.85rem);
  line-height:1.28;
}
body.services .s-shaped .split{ align-items:center; }

/* ── The close: the same field of black, quiet and compact ────────────── */
body.services .s-closing{
  border-top:0; background:var(--black);
  padding:clamp(1.5rem,4vh,2.6rem) var(--gutter) clamp(2.5rem,6vh,4rem);
}
body.services .s-closing .eyebrow{
  display:block; margin-bottom:1rem;
  font-size:clamp(0.68rem,0.78vw,0.76rem); letter-spacing:0.24em;
}
body.services .s-closing p{
  color:var(--cream-dim); margin:0 auto;
  font-size:clamp(0.95rem,1.15vw,1.08rem);
}
body.services .s-closing .s-note{
  margin-top:0.5rem;
  font-size:clamp(0.62rem,0.72vw,0.7rem);
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--cream-quiet);
}
/* The approved button is an outline, not a gold block. */
body.services .s-closing .btn-primary{
  margin-top:clamp(1.4rem,3.4vh,2.2rem);
  background:none; border:1px solid var(--gold); color:var(--gold);
  border-radius:2px;
  font-size:0.7rem; letter-spacing:0.2em; padding:0.78rem 1.9rem;
}
body.services .s-closing .btn-primary::after{ content:" \2192"; }
body.services .s-closing .btn-primary:hover{
  background:var(--gold); color:var(--black); transform:none; box-shadow:none;
}

@media (max-width:900px){
  body.services .s-statement{
    border-left:0; padding-left:0; margin-top:1.4rem;
    border-top:1px solid var(--gold-line); padding-top:1.2rem;
  }
}


/* ── The foot, at the weight the approved design gives it ─────────────── */
body.services footer{
  border-top:1px solid var(--cream-line);
  padding:clamp(1.6rem,4vh,2.6rem) var(--gutter) 1.2rem;
}
body.services .footer-grid{
  align-items:flex-start; gap:clamp(1.5rem,4vw,3rem);
  padding-bottom:1.2rem; border-bottom:1px solid var(--gold-faint);
}
body.services .footer-brand img{ width:120px; margin:-2rem 0 -1.7rem; }
body.services .footer-brand p{ font-size:0.8rem; max-width:26ch; }
body.services .footer-brand .footer-tagline{ font-style:italic; color:var(--gold); }
body.services .footer-col h2{ font-size:0.6rem; letter-spacing:0.22em; margin-bottom:0.6rem; }
body.services .footer-col ul{ gap:0.4rem; }
body.services .footer-col a{ font-size:0.82rem; }
body.services .footer-bottom{ margin-top:0.9rem; font-size:0.72rem; }