/* ═══════════════════════════════════════════════════════════════════════
   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);
  --topbar-h:5.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; justify-content:center; }
.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;
}
.topbar-mark img{ width:132px; height:auto; margin:-2.15rem 0 -1.8rem; }
/* 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(8rem,20vh,12rem) 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);
}
.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; } }