/* ═══════════════════════════════════════════════════════════════════════════
   Coast to Toast JA
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* surfaces */
  --paper:#F7F5F1;
  --stone:#EAE6DF;
  --green:#0B3B2C;
  --green-deep:#072A20;
  --ink:#0C1310;

  /* ink on light */
  --text:#15211C;
  --text-2:#4C5C54;
  --text-3:#5A6A61;

  /* ink on dark */
  --on-dark:#F3F0E9;
  --on-dark-2:#A8BEB3;

  /* accent */
  --gold:#B8862F;        /* light surfaces: rules and accents only */
  --gold-ink:#8A6418;    /* gold as TEXT on light surfaces */
  --gold-mid:#A87A26;    /* gold line icons on light surfaces (3.6:1) */
  --gold-l:#E0B964;      /* dark surfaces */
  --gold-btn:#D9AE58;

  --line:rgba(21,33,28,.14);
  --line-d:rgba(243,240,233,.18);

  --r-media:clamp(10px,1.2vw,16px);
  --wrap:1220px;
  --gut:clamp(20px,5vw,64px);
  --pill-h:72px;        /* the floating bar itself */
  --hdr-top:16px;       /* the gap it floats in */
  --hdr-h:88px;         /* both together: what the page offsets against */

  --f-display:"Cormorant Garamond",Iowan Old Style,Palatino,Georgia,serif;
  --f-sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:400 1.0625rem/1.7 var(--f-sans);
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

[hidden]{display:none!important}
img,picture,svg{display:block;max-width:100%}
img{height:auto}

/* ── browser surfaces ─────────────────────────────────────────────────────── */
::selection{background:var(--gold-btn);color:#11180F}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:2px;
}
.sec--green :where(a,button,input,select,textarea):focus-visible,
.ftr :where(a,button):focus-visible{outline-color:var(--gold-l)}
input,textarea{caret-color:var(--gold-l)}
html{scrollbar-color:#B9B2A4 var(--paper);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#C3BCAE;border:3px solid var(--paper);border-radius:99px}

.skip{position:fixed;left:14px;top:12px;z-index:200;background:var(--green);color:var(--on-dark);
  padding:12px 20px;border-radius:4px;font-size:.875rem;text-decoration:none;
  transform:translateY(-220%);transition:transform .25s var(--ease)}
.skip:focus-visible{transform:none}

/* ── type ─────────────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:400;letter-spacing:-.018em;
  line-height:1.04;text-wrap:balance}
p{margin:0}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right))}
.wrap--narrow{max-width:860px}

section[id],div[id]{scroll-margin-top:calc(var(--hdr-h) + 18px)}
.sec{padding-block:clamp(84px,11vw,160px)}
.sec--tight{padding-block:clamp(72px,8vw,120px)}
.sec--paper{background:var(--paper)}
.sec--stone{background:var(--stone)}
.sec--green{background:var(--green);color:var(--on-dark)}
.sec--green h2,.sec--green h3{color:var(--on-dark)}

/* every section heading is centred, with its intro line centred under it */
.sec__h{font-size:clamp(2.3rem,5.4vw,4rem);max-width:19ch;margin-inline:auto;
  text-align:center}
.sec__lede{margin:22px auto 0;max-width:56ch;font-size:1.0625rem;color:var(--text-2);
  text-align:center;text-wrap:pretty}
.sec--green .sec__lede{color:var(--on-dark-2)}
.sec__lede a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold)}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:500 .9375rem/1 var(--f-sans);letter-spacing:-.005em;
  padding:16px 30px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:11px 20px;font-size:.875rem}
.btn--full{width:100%}

.btn--gold{background:var(--gold-btn);color:#11180F}

.btn--ghost{border-color:rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(6px)}

.btn--line{border-color:var(--line);color:var(--text);background:transparent}
.sec--green .btn--line{border-color:var(--line-d);color:var(--on-dark)}

.btn--dark{background:var(--green);color:var(--on-dark)}

/* ── header ───────────────────────────────────────────────────────────────── */
/* the header is a floating capsule, so the full-width bar carries no paint of
   its own and must not swallow clicks in the gutters either side of the pill */
.hdr{position:fixed;inset:0 0 auto;z-index:100;pointer-events:none;
  padding:var(--hdr-top) max(var(--gut),env(safe-area-inset-right)) 0
                          max(var(--gut),env(safe-area-inset-left));
}
.hdr__in{position:relative;pointer-events:auto;width:max-content;
  max-width:min(var(--wrap),100%);margin-inline:auto;
  height:var(--pill-h);padding-inline:clamp(14px,1.7vw,22px);border-radius:999px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(30px,3.4vw,46px);
  /* light, because the logo is dark green and gold: on the green pill it used
     to be, half of it simply disappeared */
  background:rgba(247,245,241,.88);
  border:1px solid rgba(21,33,28,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
             0 1px 2px rgba(21,33,28,.10),
             0 20px 44px -26px rgba(21,33,28,.5);
  backdrop-filter:saturate(1.35) blur(20px);
  -webkit-backdrop-filter:saturate(1.35) blur(20px);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),
             box-shadow .4s var(--ease);
}
.hdr__in::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 58%)}
.hdr.is-stuck .hdr__in{
  background:rgba(247,245,241,.96);border-color:rgba(21,33,28,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),
             0 1px 2px rgba(21,33,28,.12),
             0 24px 50px -28px rgba(21,33,28,.55);
}

.brand{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;
  display:flex;align-items:center;text-decoration:none;color:var(--text)}
.brand picture{display:block}
.brand__logo{display:block;height:50px;width:auto}

/* the nav spans all three header columns and borrows them through subgrid, so each
   half is confined to its own side of the logo and can never slide underneath it */
.nav{grid-column:1/-1;grid-row:1;display:grid;align-items:center;
  grid-template-columns:1fr auto 1fr;grid-template-columns:subgrid}
.nav__l,.nav__r{display:flex;align-items:center;gap:30px}
.nav__l{grid-column:1;justify-self:end}
.nav__r{grid-column:3;justify-self:start}
.nav a:not(.btn){font-size:.875rem;color:var(--text-2);text-decoration:none;
  position:relative;padding-block:6px;transition:color .3s var(--ease)}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold-ink);transition:right .4s var(--ease)}
.hdr__cta{padding:11px 22px;font-size:.875rem;margin-left:4px}
/* the pill behind it is already frosted, so a second blur buys nothing */
.hdr__cta.btn--ghost{backdrop-filter:none;-webkit-backdrop-filter:none;
  border-color:rgba(21,33,28,.55);color:var(--text)}

.burger{grid-column:3;grid-row:1;justify-self:end;display:none;position:relative;width:44px;height:44px;
  background:none;border:0;cursor:pointer;padding:0}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--text);
  border-radius:2px;transition:transform .4s var(--ease)}
.burger span:first-child{top:18.5px}
.burger span:last-child{top:25.5px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ── drawer ───────────────────────────────────────────────────────────────── */
.drawer{position:fixed;inset:0;z-index:95;background:var(--green-deep);color:var(--on-dark);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(var(--hdr-h) + 30px) max(var(--gut),env(safe-area-inset-right))
          calc(40px + env(safe-area-inset-bottom)) max(var(--gut),env(safe-area-inset-left));
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transform:translateY(-10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.drawer.is-open{opacity:1;transform:none}
.drawer__nav{display:flex;flex-direction:column;gap:4px}
.drawer__nav a:not(.btn){font-family:var(--f-display);font-size:clamp(2rem,9vw,2.8rem);
  line-height:1.5;text-decoration:none;color:var(--on-dark)}
.drawer__cta{align-self:flex-start;margin-top:26px;font-family:var(--f-sans);font-size:.9375rem}
.drawer__foot{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:26px;
  border-top:1px solid var(--line-d);font-size:.875rem;color:var(--on-dark-2)}
.drawer__foot a{text-decoration:none}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:calc(var(--hdr-h) + 40px) 0 0;
  color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0;will-change:transform}
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 56%}
/* The text is a block in the lower left; the photograph's subject, the lit wall,
   is upper centre. A side gradient cannot separate them, because the headline
   runs to 57% across and the wall sits at 50%. A pool anchored at the text's own
   corner can: it covers the words and has fallen to nothing before it reaches
   the wall. The vertical layer no longer darkens the top at all, since the
   header is a self contained pill and stopped borrowing legibility from the
   photograph when it started carrying its own. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 56% at 6% 58%,rgba(6,18,13,.84) 0%,
               rgba(6,18,13,.56) 40%,rgba(6,18,13,0) 76%),
    linear-gradient(180deg,rgba(6,18,13,.14) 0%,rgba(6,18,13,.03) 28%,
               rgba(6,18,13,.22) 58%,rgba(6,18,13,.10) 82%,rgba(6,18,13,.58) 100%)}

/* The portrait crop puts the table behind the whole text block, so the corner
   pool cannot separate subject from words the way it does on a wide screen and a
   straight vertical ramp has to do the work. Same 768px switch as the <picture>,
   so the scrim and the photograph always change together. Stops solved against
   the real pixels: these are the lightest values that clear the bar, and they
   leave the headline at 3.3:1 and the subtitle at 4.9:1. */
@media (max-width:768px){
  .hero::after{background:linear-gradient(180deg,rgba(6,18,13,.12) 0%,
             rgba(6,18,13,.04) 22%,rgba(6,18,13,.46) 44%,
             rgba(6,18,13,.64) 68%,rgba(6,18,13,.74) 100%)}
  .herobar{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.12) 100%)}
}

.hero__body{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gut)}
.hero__title{font-size:clamp(2.9rem,8.4vw,6rem);line-height:1.02;letter-spacing:-.026em;
  max-width:14ch;text-shadow:0 2px 40px rgba(0,0,0,.3)}
.hero__title em{font-style:italic;font-weight:300}
.hero__sub{margin-top:26px;max-width:46ch;font-size:clamp(1.0625rem,1.6vw,1.1875rem);
  color:rgba(255,255,255,.9);text-shadow:0 1px 20px rgba(0,0,0,.4)}
.hero__cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px}

/* The foot of the hero: four facts on a rule, sitting in the photograph rather
   than on a strip laid over it. The veil is almost nothing at the top and only
   .32 at the foot, because the page scrim below 82% already does most of the
   work; it was carrying .44 to .82 of its own, left over from before that scrim
   was rebuilt for this photograph, and the two stacked to 92% black. Solved
   against the real pixels: at these values the labels and the values still clear
   4.5:1 with roughly a third again in hand. Neutral black, not green, which
   turned the overlap with the warm light murky. */
.herobar{position:relative;z-index:2;margin-top:clamp(44px,6vw,78px);
  border-top:1px solid rgba(243,240,233,.24);
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.53) 100%)}
.herobar__in{list-style:none;margin:0;max-width:var(--wrap);margin-inline:auto;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right));
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.herobar li{display:grid;grid-template-rows:1fr auto;gap:8px;
  padding:clamp(17px,2vw,25px) clamp(14px,1.7vw,28px);
  border-left:1px solid rgba(243,240,233,.17)}
/* the outer columns align with the measure rather than with their own padding,
   so the bar reads as part of the page grid and not as a tray laid over it */
.herobar li:first-child{border-left:0;padding-left:0}
.herobar li:last-child{padding-right:0}
.herobar__k{align-self:start;font-size:.6875rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-dark)}
.herobar__v{font-family:var(--f-display);font-size:clamp(1.2rem,1.8vw,1.55rem);
  line-height:1.16;letter-spacing:-.012em;color:#fff}

/* authored entrance */
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block}
.js .ln>span{transform:translateY(105%)}
.js .hero__sub,.js .hero__cta,.js .herobar{opacity:0}
.js .hero__media img{transform:scale(1.07)}
.hero.is-in .ln>span{transform:none;transition:transform 1.25s var(--ease)}
.hero.is-in .ln:nth-child(2)>span{transition-delay:.12s}
.hero.is-in .hero__sub{opacity:1;transition:opacity 1s var(--ease) .42s}
.hero.is-in .hero__cta{opacity:1;transition:opacity 1s var(--ease) .56s}
.hero.is-in .herobar{opacity:1;transition:opacity 1s var(--ease) .72s}
.hero.is-in .hero__media img{transform:none;transition:transform 2.4s cubic-bezier(.22,.8,.3,1)}

/* ── services: editorial split ──────────────────────────────────────────────── */
.svc{margin-top:clamp(40px,5vw,66px);display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.84fr);
  column-gap:clamp(44px,6.5vw,104px)}
/* both pinned to row 1: without it, the media takes column 2 first and sparse
   auto-placement can no longer reach column 1, dropping the text to a second row */
.svc__body{grid-column:1;grid-row:1}
.svc__media{grid-column:2;grid-row:1;margin:0;overflow:hidden;border-radius:var(--r-media)}
.svc__media picture{display:block}
.svc__media img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.svc__media .plate{flex:none;width:100%;aspect-ratio:4/5}
.svc__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.svc__item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;
  align-items:start;padding:22px 0 24px;border-bottom:1px solid var(--line)}
.svc__ico{width:40px;height:40px;color:var(--gold-mid);margin-top:3px}
.svc__item h3{font-size:1.5rem;letter-spacing:-.012em}
.svc__item p{margin-top:6px;color:var(--text-2);font-size:.9375rem;max-width:46ch}

/* ── statement band ───────────────────────────────────────────────────────── */
.band{position:relative;overflow:hidden;color:#fff;text-align:center;
  min-height:clamp(460px,74vh,760px);display:grid;place-items:center}
.band__media{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.band__media picture,.band__media img{display:block;width:100%;height:100%}
.band__media img{object-fit:cover;object-position:50% 58%}
.band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 68% at 50% 50%,rgba(8,14,11,.5),rgba(8,14,11,.76) 82%)}
.band__body{position:relative;z-index:2;display:grid;justify-items:center;
  gap:clamp(26px,3.2vw,40px);padding:clamp(70px,10vw,130px) var(--gut)}
.band__line{font-family:var(--f-display);font-size:clamp(2.5rem,6.6vw,5.25rem);
  line-height:1.03;letter-spacing:-.026em;text-wrap:balance;max-width:16ch;
  text-shadow:0 2px 36px rgba(0,0,0,.4)}
.band__line em{display:block;font-style:italic;font-weight:300;color:#F5E5C2;
  text-wrap:balance}

/* ── living light on the dark sections ────────────────────────────────────── */
.sec--green,.ftr{position:relative;isolation:isolate;overflow:hidden}
.sec--green::before,.ftr::before{content:"";position:absolute;
  inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(40% 44% at 24% 26%,rgba(224,185,100,.11),transparent 62%),
    radial-gradient(36% 40% at 76% 74%,rgba(58,170,128,.13),transparent 60%);
  animation:drift 30s ease-in-out infinite alternate}
.ftr::before{background:
    radial-gradient(42% 46% at 50% 18%,rgba(224,185,100,.09),transparent 64%)}
.sec--green::after,.ftr::after{content:"";position:absolute;inset:0;
  z-index:-1;pointer-events:none;background-image:var(--grain);opacity:.07;
  mix-blend-mode:overlay}
@keyframes drift{to{transform:translate3d(5%,-4%,0) scale(1.14)}}


/* ── dialogs ──────────────────────────────────────────────────────────────── */
/* Native <dialog>, so the focus trap, the inert background and Escape are the
   platform's rather than a reimplementation of them. */
.modal{border:0;padding:0;background:transparent;color:var(--text);margin:auto;
  width:min(660px,calc(100vw - 2*clamp(14px,5vw,48px)));max-width:none;max-height:none}
.modal::backdrop{background:rgba(5,16,11,.66);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal__panel{position:relative;background:var(--paper);
  border:1px solid rgba(11,59,44,.16);border-radius:clamp(16px,2vw,26px);
  padding:clamp(26px,3.6vw,46px);
  box-shadow:0 40px 90px -46px rgba(21,33,28,.65);
  max-height:calc(100dvh - 2*clamp(14px,5vw,48px));overflow-y:auto;overscroll-behavior:contain}
.modal__x{position:absolute;top:clamp(10px,1.4vw,18px);right:clamp(10px,1.4vw,18px);
  width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--text-2);cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.modal__x svg{width:20px;height:20px}
.modal__h{margin:12px 0 0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.06;letter-spacing:-.018em;
  color:var(--green-deep);padding-right:44px}
.modal__lede{margin:14px 0 0;max-width:52ch;color:var(--text-2)}
/* the eyebrow was written for the dark enquiry card, where pale gold is right.
   On the dialog's paper it was 1.7:1, so here it takes the ink gold instead. */
.modal__panel .ey{color:var(--gold-ink)}
/* the steps are cloned in with the section's own classes. Four across never
   fits a dialog, so they take the same stacked shape the tablet breakpoint
   already gives them, at every width. */
.modal__steps .steps{margin-top:clamp(22px,2.6vw,30px);border-top:0;
  grid-template-columns:1fr}
.modal__steps .step{border-right:0;border-bottom:1px solid var(--line);padding-inline:0;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:start}
.modal__steps .step:last-child{border-bottom:0}
.modal__steps .step__n{grid-row:1/3;margin-bottom:0;font-size:1.875rem;min-width:1.2em}
.modal__steps .step h3{grid-column:2}
.modal__steps .step p{grid-column:2;max-width:46ch}


/* ── ghost words ──────────────────────────────────────────────────────────── */
/* A single word set enormous and almost invisible, bleeding off the edge of its
   section. It is texture, not content: aria-hidden, unselectable, and sitting
   under everything, so nothing reads it and nothing can click it. Only three
   sections carry one. Put it on every section and it stops being a gesture and
   becomes a wallpaper. */
.sec--ghost{position:relative;overflow:hidden}
.sec--ghost>.wrap{position:relative;z-index:1}
/* Drawn, not filled: at this size an outline reads like an engraving rather than
   like a watermark someone turned the opacity down on. Set in the page's own ink
   at low alpha, which on the warm stone and paper comes out as a soft grey and
   leaves gold to mean something. Where the stroke is unsupported it simply does
   not paint, which is the right failure for something purely decorative. */
.ghost{position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(7rem,19vw,17rem);line-height:.78;letter-spacing:-.028em;
  white-space:nowrap;color:transparent;
  -webkit-text-stroke:1.5px rgba(21,33,28,.20);
  text-stroke:1.5px rgba(21,33,28,.20)}
/* each one is pulled past its own edge, so it reads as a fragment of something
   larger rather than as a word someone centred and faded */
.ghost--occasions{left:-.08em;bottom:-.22em}
.ghost--gallery{right:-.10em;top:-.18em}
.ghost--faq{right:-.06em;bottom:-.24em}

/* ── scroll reveal ────────────────────────────────────────────────────────── */
.js [data-rev]{transition:opacity .8s var(--ease),transform .95s var(--ease),
  clip-path 1.1s var(--ease)}
.js [data-rev="rise"]{opacity:0;transform:translateY(20px)}
.js [data-rev="wipe"]{clip-path:inset(0 0 106% 0);transform:translateY(12px)}
.js [data-rev].is-rev{opacity:1;transform:none;clip-path:inset(0 0 -24% 0)}
.js [data-rev="unveil"]{clip-path:inset(0 0 100% 0)}
.js [data-rev="unveil"] img{transform:scale(1.14);transition:transform 1.7s var(--ease)}
.js [data-rev="unveil"].is-rev{clip-path:inset(0 0 0 0)}
.js [data-rev="unveil"].is-rev img{transform:none}

/* ── button shine ─────────────────────────────────────────────────────────── */
.btn--gold{position:relative;overflow:hidden}
.btn--gold>*{position:relative;z-index:1}
.btn--gold::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.42) 50%,transparent 64%);
  transform:translateX(-130%);transition:transform .85s var(--ease)}

/* ── what we plan ─────────────────────────────────────────────────────────── */
/* Two columns of four groups, one event per line. An earlier version flowed the
   items with dot separators, which left a dangling dot wherever a line happened
   to break. Giving each item its own line removes the cause rather than patching it. */
.occasions{margin-top:clamp(42px,5.5vw,70px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,28px)}
.occ{padding:clamp(24px,2.8vw,34px);border-radius:18px;
  background:rgba(255,255,255,.55);border:1px solid var(--line)}
/* the card reveals as one object, so it needs the attribute selector's own
   transition list rather than the generic one, which has no border-color in it */
.js .occ[data-rev]{transition:opacity .8s var(--ease),transform .95s var(--ease)}

.occ dt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.occ__ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(184,134,47,.09);border:1px solid rgba(184,134,47,.28);
  color:var(--gold-mid)}
.occ__ico svg{width:22px;height:22px}
/* every glyph carries pathLength="1", so one dash rule draws them all in
   without anyone measuring a path */
.js .occ__ico :is(path,circle){stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s var(--ease) calc(340ms + var(--i,0)*110ms)}
.js .occ.is-rev .occ__ico :is(path,circle){stroke-dashoffset:0}
.occ__name{font-family:var(--f-display);font-size:clamp(1.35rem,2vw,1.75rem);
  line-height:1.15;letter-spacing:-.016em;color:var(--text)}
.occ__n{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);white-space:nowrap}

.occ dd{margin:0}
.occ ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.occ li{position:relative;padding-left:24px;font-size:1rem;line-height:1.45;
  color:var(--text-2);transition:color .3s var(--ease)}
/* the rule is drawn at full length and held short, so lengthening it is a
   transform rather than a width change that would make the browser re-lay out */
.occ li::before{content:"";position:absolute;left:0;top:.68em;width:15px;height:1px;
  background:var(--gold-mid);opacity:.5;transform:scaleX(.6);transform-origin:0 50%;
  transition:transform .4s var(--ease),opacity .4s var(--ease)}

/* ── the roster page: a numbered index that rules itself in ───────────────── */
.page-head{padding-top:calc(var(--hdr-h) + clamp(50px,6.4vw,90px));
  padding-bottom:clamp(52px,6.4vw,90px)}
.page-head__h{margin:16px 0 0;text-align:center;font-family:var(--f-display);
  font-weight:400;font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1.04;
  letter-spacing:-.022em;color:var(--on-dark);text-wrap:balance}
.roles{list-style:none;margin:clamp(34px,4.5vw,54px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,3.6vw,56px)}
.role{position:relative;padding:clamp(20px,2.3vw,26px) 0;display:grid;gap:7px}
.role::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line)}
/* without script the rules are simply there; with it they draw left to right */
.js .role::before{transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease) calc(var(--i,0)*70ms)}
.js .role.is-rev::before{transform:scaleX(1)}
.role__n{font-size:.6875rem;letter-spacing:.16em;color:var(--gold-ink)}
.role__t{font-family:var(--f-display);font-size:clamp(1.2rem,1.8vw,1.55rem);
  line-height:1.22;letter-spacing:-.012em;color:var(--text)}
/* every role can be hired on its own, so every role gets its own way in. Set as
   a rule and a word rather than a button: twenty three buttons down a page would
   read as a price list, and these are still an index first. */
.role__book{justify-self:start;margin-top:4px;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--gold-ink);
  border-bottom:1px solid rgba(184,134,47,.45);padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease)}

.close__cta{margin-top:clamp(26px,3vw,36px);display:flex;flex-wrap:wrap;
  justify-content:center;gap:14px}

.occasions__foot{margin-top:clamp(28px,3.4vw,40px);font-size:.9375rem;color:var(--text-3);
  text-align:center}
.occasions__foot a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold)}

/* ── tiers ────────────────────────────────────────────────────────────────── */
.tiers{margin-top:clamp(48px,6vw,80px);display:grid;gap:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tier{position:relative;display:flex;flex-direction:column;
  padding:clamp(34px,3.6vw,48px) clamp(24px,2.8vw,40px);border-right:1px solid var(--line)}
.tier:last-child{border-right:0}
/* each tier opens with an image; ships as a branded panel until real photos exist */
.tier__media{margin:0 0 clamp(22px,2.4vw,30px);overflow:hidden;border-radius:var(--r-media)}
.tier__media picture{display:block}
.tier__media img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.tier__media .plate{flex:none;width:100%;aspect-ratio:3/2}
.tier__media .plate svg{width:42%}
.tier__name{font-size:1.875rem}
.tier__price{margin-top:12px;font-family:var(--f-display);font-size:3.5rem;line-height:1;
  letter-spacing:-.03em;display:flex;align-items:baseline;gap:.08em}
.tier__price .cur{font-size:.46em;translate:0 -.78em;opacity:.55}
.tier__price .pre{font-family:var(--f-sans);font-size:.2em;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);align-self:center;
  margin-right:.45em}
.tier__for{margin-top:14px;color:var(--text-2);font-size:.9375rem;max-width:32ch}
.tier__list{margin:26px 0 34px;padding:0;list-style:none;flex:1}
.tier__list li{position:relative;padding:0 0 0 20px;margin-bottom:11px;font-size:.9375rem;
  color:var(--text)}
.tier__list li::before{content:"";position:absolute;left:2px;top:.72em;width:4px;height:4px;
  border-radius:50%;background:var(--gold)}
.tier .btn{align-self:stretch;margin-top:auto}

.boutique{margin-top:clamp(34px,4vw,52px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:28px;padding:clamp(28px,3.4vw,44px);
  background:var(--stone);border-radius:3px}
.boutique h3{font-size:1.75rem}
.boutique p{margin-top:10px;color:var(--text-2);font-size:.9375rem;max-width:56ch}
.fineprint{margin-top:22px;font-size:.8125rem;color:var(--text-3)}

/* ── process steps ────────────────────────────────────────────────────────── */
.steps{margin:clamp(48px,6vw,78px) 0 0;padding:0;list-style:none;display:grid;gap:0;
  grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.step{position:relative;border-right:1px solid var(--line);
  padding:clamp(28px,3vw,40px) clamp(20px,2.2vw,32px) clamp(32px,3.6vw,46px)}
.step:first-child{padding-left:0}
.step:last-child{border-right:0;padding-right:0}
.step__n{display:block;font-family:var(--f-display);font-size:2.5rem;line-height:1;
  letter-spacing:-.03em;color:var(--gold-mid);margin-bottom:16px}
.step h3{font-size:1.3125rem;letter-spacing:-.01em}
.step p{margin-top:10px;color:var(--text-2);font-size:.9375rem;max-width:34ch}

/* ── founder ──────────────────────────────────────────────────────────────── */
.founder{margin-top:clamp(38px,5vw,62px);display:grid;gap:clamp(34px,5vw,78px);align-items:center;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.founder__portrait{margin:0}
.founder__portrait picture{display:block}
.founder__portrait img,.founder__portrait .plate{width:100%;aspect-ratio:4/5;
  object-fit:cover;border-radius:var(--r-media)}
.founder__lead{font-family:var(--f-display);line-height:1.34;
  font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.014em;max-width:30ch}
.founder__body p+p{margin-top:16px}
.founder__body>p:not(.founder__lead):not(.founder__sign){color:var(--text-2);max-width:54ch}
.founder__sign{margin-top:28px;display:grid;gap:4px}
.founder__name{font-family:var(--f-display);font-size:1.5rem;letter-spacing:-.014em}
.founder__role{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3)}
.founder .btn{margin-top:26px;justify-self:start}

/* ── honeypot ─────────────────────────────────────────────────────────────── */
.hp{display:none}

/* ── gallery ──────────────────────────────────────────────────────────────── */
.grid{margin-top:clamp(42px,5vw,68px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.3vw,18px)}
.tile{margin:0;display:flex;flex-direction:column;gap:11px}
.tile--wide{grid-column:span 2}
.tile__btn{padding:0;border:0;background:none;cursor:zoom-in;display:block;flex:1;
  overflow:hidden;border-radius:var(--r-media)}
.tile__btn img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.tile:not(.tile--wide) .tile__btn,.tile:not(.tile--wide) .plate{aspect-ratio:4/5}
.tile figcaption{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3)}

.plate{position:relative;flex:1;overflow:hidden;border-radius:var(--r-media);background:var(--green);
  display:grid;place-items:center}
.plate::before{content:"";position:absolute;inset:0;
  background:radial-gradient(62% 60% at 50% 48%,rgba(224,185,100,.22),transparent 72%)}
.plate::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  opacity:.1;mix-blend-mode:overlay;pointer-events:none}
.plate svg{position:relative;width:46%;color:var(--gold-l);opacity:.6}
.tile--wide .plate svg{width:23%}
.is-stone .plate{background:#D9D2C3}
.is-stone .plate::before{background:radial-gradient(58% 54% at 50% 42%,rgba(255,252,245,.8),transparent 72%)}
.is-stone .plate svg{color:var(--green);opacity:.34}
.is-ink .plate{background:var(--ink)}
.is-ink .plate::before{background:radial-gradient(58% 54% at 50% 42%,rgba(224,185,100,.14),transparent 72%)}



/* ── quotes ───────────────────────────────────────────────────────────────── */
.quotes{margin-top:clamp(46px,6vw,76px);columns:2;column-gap:clamp(28px,4vw,64px)}
.quote{margin:0 0 clamp(28px,4vw,56px);break-inside:avoid;padding-top:26px;
  border-top:1px solid var(--line)}
.quote blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.3rem,2.1vw,1.6rem);
  line-height:1.4;letter-spacing:-.012em}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
.quote figcaption{margin-top:18px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.quote__who{font-size:.875rem;font-weight:500}
.quote__meta{font-size:.8125rem;color:var(--text-3)}

/* ── faq ──────────────────────────────────────────────────────────────────── */
.faq{margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:24px 0;background:none;border:0;cursor:pointer;text-align:left;color:var(--text);
  font:400 clamp(1.125rem,2vw,1.375rem)/1.35 var(--f-display);letter-spacing:-.012em;
  transition:color .3s var(--ease)}
.faq__ico{position:relative;flex:none;width:15px;height:15px;margin-top:.42em}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;inset:50% 0 auto 0;height:1.4px;
  background:currentColor;transition:transform .45s var(--ease),opacity .3s var(--ease)}
.faq__ico::after{transform:rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__ico::after{transform:rotate(0);opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq__a>div{overflow:hidden}
.faq__q[aria-expanded="true"]+.faq__a{grid-template-rows:1fr}
.faq__a p{padding-bottom:26px;max-width:66ch;color:var(--text-2);font-size:1rem}

/* ── enquire ──────────────────────────────────────────────────────────────── */
/* white, and the only section on the page that is. The FAQ above it is paper,
   which is only three percent darker, so the seam is drawn rather than implied */
.sec--enquire{background:#fff;border-top:1px solid var(--line)}

/* one card, split in two: the details on the left, the form where a map would be */
/* the form moved into a dialog, so this is the contact panel and the door to it */
.enq{margin-top:clamp(38px,5vw,60px);border-radius:clamp(18px,2.2vw,28px);overflow:hidden;
  background:var(--green);color:var(--on-dark);border:1px solid rgba(11,59,44,.16);
  box-shadow:0 36px 80px -56px rgba(21,33,28,.5)}

.enq__aside{padding:clamp(30px,3.4vw,50px) clamp(30px,3.4vw,50px) 0;display:grid;
  align-content:start;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,3.8vw,56px)}
.enq__act{margin:0;padding:clamp(30px,3.4vw,46px) clamp(30px,3.4vw,50px);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.enq__act .btn{padding-inline:clamp(34px,5vw,64px);padding-block:17px;font-size:1rem}
.enq__aside :where(a,button):focus-visible{outline-color:var(--gold-l)}
.ey{margin:0;display:flex;align-items:center;gap:13px;
  font-size:.6875rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-l)}
.ey::before{content:"";flex:none;width:26px;height:1px;background:currentColor;opacity:.85}
.enq__h{margin:13px 0 clamp(22px,2.6vw,30px);font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.6rem,2.5vw,2.05rem);line-height:1.1;letter-spacing:-.012em;
  color:var(--on-dark)}
.enq__h em{font-style:italic;color:var(--gold-l)}

.reach{list-style:none;margin:0;padding:0;display:grid;
  /* the email address sits in the right-hand column and is the longest value here,
     so that column carries the extra width rather than wrapping mid-address */
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,2.4vw,28px) 20px}
.reach li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start}
.reach__ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(224,185,100,.1);border:1px solid rgba(224,185,100,.3);color:var(--gold-l)}
.reach__ico svg{width:19px;height:19px}
.reach__t{display:block;min-width:0}
.reach__k{display:block;font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark-2)}
.reach__v{display:inline-block;margin-top:5px;max-width:100%;overflow-wrap:break-word;
  font-family:var(--f-display);font-size:1.0625rem;line-height:1.3;color:var(--on-dark);
  text-decoration:none;border-bottom:1px solid rgba(224,185,100,.45);
  transition:color .3s var(--ease),border-color .3s var(--ease)}

.facts{margin:0;display:grid}
.facts>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:2px 20px;padding:12px 0;border-bottom:1px solid var(--line-d)}
.facts>div:first-child{padding-top:0}
.facts dt{font-family:var(--f-display);font-style:italic;font-size:1.0625rem;
  color:var(--on-dark-2)}
.facts dd{margin:0;font-size:.875rem;color:var(--on-dark);text-align:right}

/* the form sits on its own faintly raised panel: this is the thing to do here */
.enq__form{display:grid;gap:18px;align-content:start;margin-top:clamp(22px,2.6vw,30px)}
.f2{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.field{display:grid;gap:8px;margin:0}
.field label{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);opacity:.78}
.field .opt{text-transform:none;letter-spacing:0;opacity:.75}
.field input,.field select,.field textarea{
  width:100%;font:400 1rem/1.5 var(--f-sans);color:var(--green-deep);
  background:#fff;border:1px solid rgba(11,59,44,.58);border-radius:4px;
  padding:14px 15px;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),
             box-shadow .3s var(--ease)}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  background:#fff;border-color:var(--gold-mid);outline:none;
  box-shadow:0 0 0 3px rgba(184,134,47,.26)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A87A26' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.field select option{background:#fff;color:var(--green-deep)}
.field.has-err input,.field.has-err select,.field.has-err textarea,
.field.has-err input:focus,.field.has-err select:focus{border-color:#B3261E}
.field.has-err input:focus,.field.has-err select:focus{
  box-shadow:0 0 0 3px rgba(179,38,30,.2)}
.err{font-size:.8125rem;color:#A3201A;min-height:0}
.err:empty{display:none}
.enq__form .btn--gold{margin-top:6px;padding-block:17px;font-size:1rem}
.enq__note{font-size:.8125rem;color:var(--text-2);text-align:center}
.enq__note a{color:var(--gold-ink)}
.enq__done{padding:18px 20px;border:1px solid rgba(184,134,47,.42);border-radius:6px;
  background:rgba(184,134,47,.07);display:grid;gap:14px;justify-items:start;
  font-size:.9375rem}
.enq__done a{color:var(--gold-ink)}

/* ── optional detail, folded away ─────────────────────────────────────────── */
.more{display:flex;align-items:center;gap:10px;width:fit-content;margin:2px 0 0;
  padding:8px 0;background:none;border:0;cursor:pointer;color:var(--gold-ink);
  font:500 .8125rem/1 var(--f-sans);letter-spacing:.06em;text-transform:uppercase;
  transition:color .3s var(--ease)}
.more__ico{position:relative;width:12px;height:12px;flex:none}
.more__ico::before,.more__ico::after{content:"";position:absolute;inset:50% 0 auto 0;
  height:1.4px;background:currentColor;transition:transform .4s var(--ease),opacity .3s var(--ease)}
.more__ico::after{transform:rotate(90deg)}
.more[aria-expanded="true"] .more__ico::after{transform:rotate(0);opacity:0}
.more__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.more__panel>div{overflow:hidden;display:grid;gap:18px;padding-top:18px}
.more[aria-expanded="true"]+.more__panel{grid-template-rows:1fr}

/* ── sticky action bar ────────────────────────────────────────────────────── */
/* the page runs to 18 screens on a phone, so the next step travels with you */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;
  padding:12px max(14px,env(safe-area-inset-left))
          calc(12px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right));
  background:rgba(7,19,14,.92);border-top:1px solid rgba(243,240,233,.14);
  -webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);
  transform:translateY(130%);transition:transform .45s var(--ease)}
.actionbar.is-up{transform:none}
.actionbar .btn{padding-block:15px}
.actionbar__wa{color:var(--on-dark);border-color:rgba(243,240,233,.4);gap:.5em}
.actionbar__wa svg{width:19px;height:19px;flex:none}
@media (max-width:1100px){.actionbar{display:grid;grid-template-columns:1.35fr 1fr}}
@media (max-width:360px){.actionbar .btn{padding-inline:14px;font-size:.875rem}}

/* ── footer ───────────────────────────────────────────────────────────────── */
.ftr{background:#000;color:var(--on-dark);
  padding-block:clamp(64px,8vw,104px) calc(40px + env(safe-area-inset-bottom))}
/* The footer sets the name as one oversized italic line and nothing else. The
   emblem used to sit above it doing the same job at a tenth of the size, which
   only split the attention; at this scale the type is the mark. The size is tied
   to the measure rather than to the type ramp, so the line fills the column at
   every width and stops growing when the column does. */
/* The footer is one oversized italic line and nothing else. It sets the promise
   rather than the name: the name is already in the copyright line below it, in
   the menu above it, and painted on the wall in the photograph at the top of the
   page. At this size a sentence does something a logotype cannot. Size is tied to
   the measure rather than to the type ramp, so the line fills the column at every
   width and stops growing once the column does. */
.lockup{display:grid;justify-items:center;text-align:center}
.lockup__word{margin:0;font-family:var(--f-display);font-weight:400;font-style:italic;
  font-size:min(8.1vw,101px);line-height:1.02;letter-spacing:-.022em;
  color:var(--gold-l);white-space:nowrap}

.ftr__cols{margin-top:clamp(34px,4vw,54px);padding-top:clamp(34px,4vw,54px);
  border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;gap:34px 64px;
  justify-content:space-between}
.ftr__nav,.ftr__get{display:grid;gap:12px;font-size:.9375rem}
.ftr__nav{grid-template-columns:repeat(2,auto);gap:12px 44px}
.ftr a{color:var(--on-dark-2);text-decoration:none;transition:color .3s var(--ease);width:fit-content}
.ftr__legal{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line-d);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-size:.8125rem;color:var(--on-dark-2)}

/* ── booking a call ───────────────────────────────────────────────────────── */
/* Two taps and four fields. The day strip scrolls sideways rather than becoming
   a month grid: she opens a handful of days, so a month of empty cells would be
   mostly apology. Only days with something free are ever drawn. */
.cal{margin-top:clamp(22px,2.6vw,30px);display:grid;gap:18px}
.cal__state{margin:0;padding:22px 0;color:var(--text-2);font-size:.9375rem}
.cal__state a{color:var(--gold-ink)}
.cal__lab{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);opacity:.78}
.cal__tz{letter-spacing:0;text-transform:none;font-size:.8125rem;color:var(--text-2);opacity:.9}

/* the strip is scrollable, so each day snaps and the edge fades to say so */
.cal__days{display:flex;gap:10px;margin:10px 0 24px;padding-bottom:6px;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.cal__day{flex:none;scroll-snap-align:start;min-width:74px;padding:11px 14px 13px;
  display:grid;gap:2px;justify-items:center;cursor:pointer;text-align:center;
  background:#fff;color:var(--text);border:1px solid rgba(11,59,44,.58);border-radius:10px;
  font:400 1rem/1 var(--f-sans);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),
             color .3s var(--ease)}
.cal__day:hover{border-color:var(--gold-mid)}
.cal__day[aria-pressed="true"]{background:var(--green);border-color:var(--green);
  color:var(--on-dark)}
.cal__dow{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2)}
.cal__num{font-family:var(--f-display);font-size:1.5rem;line-height:1.05}
.cal__mon{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2)}
.cal__day[aria-pressed="true"] .cal__dow,
.cal__day[aria-pressed="true"] .cal__mon{color:var(--on-dark-2)}

.cal__slots{display:grid;gap:10px;margin-top:10px;
  grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
.cal__slot{padding:13px 10px;cursor:pointer;background:#fff;color:var(--green-deep);
  border:1px solid rgba(11,59,44,.58);border-radius:8px;
  font:400 1rem/1 var(--f-sans);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),
             color .3s var(--ease)}
.cal__slot:hover{border-color:var(--gold-mid)}
.cal__slot[aria-pressed="true"]{background:var(--green);border-color:var(--green);
  color:var(--on-dark)}

.cal__form{display:grid;gap:18px;padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--line)}
.cal__chosen{margin:0;padding:14px 16px;border-radius:6px;
  border:1px solid rgba(184,134,47,.42);background:rgba(184,134,47,.07);
  font-family:var(--f-display);font-size:1.0625rem;line-height:1.35;color:var(--text)}
.cal__chosen b{font-weight:500}
.cal__chosen button{margin-left:10px;padding:0;background:none;border:0;cursor:pointer;
  font:500 .75rem/1 var(--f-sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
.cal__err{margin:0;padding:12px 14px;border-radius:6px;font-size:.9375rem;
  color:#8C1D18;background:rgba(179,38,30,.07);border:1px solid rgba(179,38,30,.4)}
.cal__done{padding:20px 22px;border:1px solid rgba(184,134,47,.42);border-radius:6px;
  background:rgba(184,134,47,.07);font-size:.9375rem;color:var(--text)}
.cal__done p{margin:0}
.cal__done a{color:var(--gold-ink)}
.cal__done strong{display:block;margin-bottom:6px;font-family:var(--f-display);
  font-size:1.25rem;font-weight:400;color:var(--text)}

@media (max-width:560px){
  .cal__slots{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}
}

/* ── lightbox ─────────────────────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:150;background:rgba(6,14,11,.94);
  display:grid;place-items:center;padding:clamp(16px,4vw,52px);
  opacity:0;transition:opacity .4s var(--ease)}
.lb.is-open{opacity:1}
.lb__fig{margin:0;display:grid;gap:16px;justify-items:center;max-height:100%}
.lb__fig img{max-height:min(80vh,900px);width:auto;object-fit:contain;border-radius:var(--r-media);
  transform:scale(.97);transition:transform .5s var(--ease)}
.lb.is-open .lb__fig img{transform:none}
.lb__fig figcaption{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-2)}
.lb__close{position:absolute;top:calc(clamp(12px,3vw,26px) + env(safe-area-inset-top));
  right:calc(clamp(12px,3vw,26px) + env(safe-area-inset-right));
  width:46px;height:46px;display:grid;place-items:center;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;
  transition:background-color .3s var(--ease)}
.lb__close svg{width:20px;height:20px}
body.is-locked{overflow:hidden}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding-inline:0;
    display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:start}
  .step:last-child{border-bottom:0}
  .step__n{grid-row:1/3;margin-bottom:0;font-size:1.875rem;min-width:1.2em}
  .step h3{grid-column:2}
  .step p{grid-column:2;max-width:46ch}
}
@media (max-width:1100px){
  .nav{display:none}
  .hdr__cta{display:none}
  .burger{display:block}
  /* equal side tracks keep the logo optically centred against the lone burger */
  .hdr__in{width:auto;grid-template-columns:44px auto 44px;gap:12px;padding-inline:9px}
  .enq__aside{grid-template-columns:1fr}
}
@media (max-width:760px){
  .occasions{grid-template-columns:1fr;gap:30px}
  .occ li{font-size:.9375rem}
}
@media (max-width:860px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .tile--wide{grid-column:span 2}
  .tile--wide .tile__btn,.tile--wide .plate{aspect-ratio:16/10}
  .quotes{columns:1}
}
@media (max-width:900px){
  .herobar__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .herobar li:nth-child(odd){border-left:0;padding-left:0}
  .herobar li:nth-child(even){padding-right:0}
  .herobar li:nth-child(n+3){border-top:1px solid rgba(243,240,233,.17)}
  .roles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr;row-gap:30px}
  .svc__media{grid-column:1;grid-row:1;max-width:560px;margin-inline:auto}
  .svc__body{grid-column:1;grid-row:2}
  .founder{grid-template-columns:1fr;gap:34px}
  .founder__portrait{max-width:400px}
  .tier{border-right:0;border-bottom:1px solid var(--line);padding-inline:0}
  .tier:last-child{border-bottom:0}
  .tier__list{margin-bottom:28px}
  .tier .btn{align-self:flex-start;padding-inline:40px}
}
@media (max-width:700px){
  /* the phone cut is narrow, so steer it onto the candles rather than the petal floor */
  .band__media img{object-position:22% 62%}
}
@media (max-width:620px){
  .ghost{display:none}
  .roles{grid-template-columns:1fr}
  .reach{grid-template-columns:1fr}
  :root{--pill-h:62px;--hdr-top:12px;--hdr-h:74px}
  .brand__logo{height:42px}
  /* on a phone the pill sits closer to the edges, which buys the wordmark back
     the width the capsule's own padding takes away */
  .hdr{padding-left:max(14px,env(safe-area-inset-left));
       padding-right:max(14px,env(safe-area-inset-right))}
  .hdr__in{padding-inline:7px;gap:10px}
  .f2{grid-template-columns:1fr}
  .boutique{flex-direction:column;align-items:flex-start}
  .boutique .btn{width:100%}
  .hero__cta .btn{flex:1 1 auto}
  .ftr__cols{flex-direction:column;gap:30px}
  .ftr__nav{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:360px){
}
@media (max-width:359px){
  .grid{grid-template-columns:1fr}
  .tile--wide{grid-column:span 1}
  .tile:not(.tile--wide) .tile__btn,.tile:not(.tile--wide) .plate{aspect-ratio:4/5}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .js [data-rev]{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .occ__ico :is(path,circle){stroke-dashoffset:0!important}
  .js .role::before{transform:none!important}
  .js .ln>span,.js .hero__sub,.js .hero__cta,.js .herobar{opacity:1;transform:none}
  .js .hero__media img{transform:none}
}

/* ── hover states ─────────────────────────────────────────────────────────── */
/* behind a capability query: on a touch screen a :hover rule latches after the
   tap and the control keeps its hover colour until you tap something else */
@media (hover:hover){
  .occ li:hover{color:var(--text)}
  .occ li:hover::before{transform:scaleX(1);opacity:1}
  ::-webkit-scrollbar-thumb:hover{background:#A79F8F}
  .sec--stone .sec__lede a:hover{color:var(--gold-ink)}
  .btn--gold:hover{background:#E8C274}
  .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
  .btn--line:hover{border-color:var(--text);background:rgba(21,33,28,.04)}
  .sec--green .btn--line:hover{border-color:var(--on-dark);background:rgba(255,255,255,.08)}
  .btn--dark:hover{background:var(--green-deep)}
  .nav a:not(.btn):hover{color:var(--text)}
  .nav a:not(.btn):hover::after{right:0}
  .btn--gold:hover::after{transform:translateX(130%)}
  .tile__btn:hover img{transform:scale(1.045)}
  .faq__q:hover{color:var(--gold-ink)}
  .reach__v:hover{color:var(--gold-l);border-bottom-color:var(--gold-l)}
  .role__book:hover{color:var(--text);border-bottom-color:var(--gold-mid)}
  .modal__x:hover{background:rgba(21,33,28,.07);color:var(--text)}
  .field input:hover,.field select:hover,.field textarea:hover{
    border-color:rgba(243,240,233,.72)}
  .ftr a:hover{color:var(--gold-l)}
  .lb__close:hover{background:rgba(255,255,255,.2)}
}

/* ── touch ────────────────────────────────────────────────────────────────── */
@media (pointer:coarse){
  /* iOS paints its own grey flash on tap; use the brand's own quiet tint */
  a,button,summary,[role="button"]{-webkit-tap-highlight-color:rgba(224,185,100,.18)}

  /* Standalone text links were 16 to 29px tall. An invisible 44px band centred on
     each one lifts the target without moving the text or its underline. Spacing in
     the stacked lists is widened so neighbouring bands tile instead of overlapping. */
  .ftr__nav,.ftr__get{gap:18px}
  .drawer__foot{gap:14px 24px}
  .ftr__nav a,.ftr__get a,.ftr__legal a,.reach__v,.role__book,.drawer__foot a,
  .sec__lede a,.enq__note a,.occasions__foot a,.quote__who a{position:relative}
  .ftr__nav a::after,.ftr__get a::after,.ftr__legal a::after,.reach__v::after,.role__book::after,
  .drawer__foot a::after,.sec__lede a::after,.enq__note a::after,
  .occasions__foot a::after{
    content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;
    transform:translateY(-50%)}
  .brand{min-height:44px}
  /* the drawer type shrinks on short screens, so pin a floor independent of font size */
  .drawer__nav a:not(.btn){min-height:44px;display:flex;align-items:center}

}

/* ── short viewports (landscape phones) ───────────────────────────────────── */
/* A 320px tall landscape phone cannot hold a full-height hero or a menu set at
   display scale: the CTAs and most of the drawer fell below the fold. */
@media (max-height:600px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:calc(var(--hdr-h) + 26px) 40px}
  .herobar{display:none}
  .hero__title{font-size:clamp(1.9rem,5vw,2.8rem)}
  .hero__sub{margin-top:14px;font-size:1rem;max-width:52ch}
  .hero__cta{margin-top:22px}
  .drawer{padding-top:calc(var(--hdr-h) + 18px)}
  .drawer__nav a:not(.btn){font-size:1.5rem;line-height:1.75}
  .drawer__cta{margin-top:16px}
  .drawer__foot{padding-top:18px}
  .band{min-height:auto;padding-block:0}
  .lb__fig img{max-height:76vh}
}
@media (max-height:600px){
  .drawer__nav a:not(.btn){font-size:clamp(1.4rem,5vw,1.9rem);line-height:1.8}
}
@media (orientation:landscape) and (min-width:560px) and (max-height:480px){
  .lb__fig img{max-height:70vh}
}