/* ==========================================================================
   LIFEBYREENA — UK interiors-editorial. Warm oat paper, moss anchors,
   Bodoni Moda display against Schibsted Grotesk tracked caps.
   ========================================================================== */

:root{
  --paper:#F5F1EA;
  --oat:#EBE5D9;
  --ink:#23211D;
  --ink-2:#5A5446;
  --ink-3:#6E6656;
  --moss:#3C4335;
  --moss-2:#59614E;
  --blush:#E3D2C9;
  --clay:#8C5B45;
  --live:#2E7D4F;
  --live-ring:rgba(46,125,79,.45);
  --line:rgba(35,33,29,.15);
  --line-2:rgba(35,33,29,.08);
  --line-inv:rgba(245,241,234,.22);

  --wrap:1240px;
  --navH:5.25rem;
  --gut:clamp(1.25rem,5vw,4.5rem);

  --serif:"Libre Baskerville",Baskerville,"Baskerville Old Face",Georgia,serif;
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --t-hero:clamp(5.5rem,10vw,9rem);
  --t-h1:clamp(2.1rem,4.6vw,3.6rem);
  --t-h2:clamp(1.6rem,2.9vw,2.5rem);
  --t-lead:clamp(1.125rem,1.9vw,1.6rem);
  --t-body:clamp(1rem,1.05vw,1.0625rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--navH) + 1.5rem);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{list-style:none;padding:0}

::selection{background:var(--blush);color:var(--ink)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.9rem 1.4rem;
  font:500 .8125rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:1rem;top:1rem;min-height:44px;display:inline-flex;align-items:center}

:where(a,button,summary):focus-visible{
  outline:2px solid var(--clay);outline-offset:3px;border-radius:1px;
}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:760px;text-align:center}

.section{padding-block:clamp(5rem,11vw,9.5rem)}
.section--oat{background:var(--oat)}
.section--moss{
  background:var(--moss);color:var(--paper);
  --live:#7FD4A0;--live-ring:rgba(127,212,160,.5);
}
.section--close{padding-block:clamp(6rem,13vw,11rem)}

/* ----------------------------------------------------------- typography */
.h1{font:400 var(--t-h1)/1.16 var(--serif);letter-spacing:-.025em}
.h2{font:400 var(--t-h2)/1.3 var(--serif);letter-spacing:-.018em;max-width:24ch}
.h2 em{font-style:italic;color:var(--ink-2)}
.section--moss .h2 em{color:rgba(245,241,234,.62)}
.lead{font:400 var(--t-lead)/1.5 var(--sans);color:var(--ink);max-width:34ch}
.lead--center{margin-inline:auto;margin-top:clamp(1.35rem,3vw,1.9rem);color:rgba(245,241,234,.78);max-width:46ch}
.cover__role{
  display:flex;align-items:center;gap:.75rem;
  font:500 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
}
.cover__role-dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.pillars{
  font:500 clamp(.6875rem,2.1vw,.75rem)/1.9 var(--sans);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
}
.pillars span{white-space:nowrap}
.pillars i{font-style:normal;color:var(--ink-3);padding-inline:.55em}
.stamp{
  margin-top:1.5rem;font:400 .75rem/1.5 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}

/* --------------------------------------------------------------- buttons */
.btn{
  --btn-fg:var(--paper);--btn-bg:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3.25rem;padding:0 1.9rem;
  font:500 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--btn-bg);
  background:var(--btn-bg);color:var(--btn-fg);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn--line{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--line);}
.btn--line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid:hover{background:transparent;color:var(--ink)}
.btn--invert{--btn-bg:var(--paper);--btn-fg:var(--moss);border-color:var(--paper)}
.btn--invert:hover{background:transparent;color:var(--paper)}

/* ------------------------------------------------------------------- nav */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:box-shadow .4s var(--ease);
}
/* The blur lives on a child layer, never on .nav. A filter or backdrop-filter
   on .nav makes it a containing block for position:fixed descendants, which
   collapses .nav__menu (inset:0) to the height of the masthead. */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(245,241,234,.96);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
}
.nav.is-stuck{box-shadow:0 1px 0 var(--line-2)}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:1.15rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.nav__mark{
  text-decoration:none;display:flex;flex-direction:column;justify-content:center;
  line-height:1.15;min-height:44px;
}
.nav__mark-name{font:400 1.0625rem/1 var(--serif);letter-spacing:.01em}
.nav__mark-handle{font:400 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:.4rem}
.nav__menu{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.1rem)}
.nav__menu a{
  display:inline-flex;align-items:center;min-height:44px;
  font:500 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);transition:color .3s var(--ease);
}
.nav__menu a:hover{color:var(--ink)}
.nav__cta{border:1px solid var(--line);padding:.85rem 1.15rem;color:var(--ink)!important}
.nav__cta:hover{background:var(--ink);color:var(--paper)!important;border-color:var(--ink)}
.nav__toggle{display:none}

@media (max-width:860px){
  .nav__toggle{
    display:inline-flex;align-items:center;justify-content:flex-end;gap:.6rem;
    min-height:44px;min-width:44px;background:none;border:0;padding:.4rem 0;
    font:500 .6875rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer;
  }
  .nav__toggle-bars{display:inline-flex;flex-direction:column;gap:4px;width:18px}
  .nav__toggle-bars i{display:block;height:1px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s var(--ease)}
  .nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child{transform:translateY(2.5px) rotate(11deg)}
  .nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child{transform:translateY(-2.5px) rotate(-11deg)}
  .nav__menu{
    position:fixed;inset:0;background:var(--paper);
    flex-direction:column;justify-content:center;gap:1.6rem;
    opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  }
  .nav__menu a{
    min-height:52px;padding-inline:1.5rem;justify-content:center;
    font-size:1.5rem;font-family:var(--serif);text-transform:none;letter-spacing:0;color:var(--ink);
  }
  .nav__cta{border:0;padding:0}
  .nav__cta:hover{background:none;color:var(--ink)!important}
  .nav.is-open .nav__menu{opacity:1;visibility:visible}
  .nav.is-open{background:var(--paper)}
  /* The full-screen menu paints over its own masthead, so the wordmark and
     the close control are lifted above it. Without this there is no visible
     way back out of the menu. */
  .nav.is-open .nav__mark,
  .nav.is-open .nav__toggle{position:relative;z-index:2}
}

/* ----------------------------------------------------------------- cover */
.cover{
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr minmax(0,44%);
  grid-template-rows:1fr auto;
  align-items:center;
  column-gap:clamp(1.5rem,4vw,4rem);
  padding-left:var(--gut);padding-top:var(--navH);
  position:relative;
}
.cover__text{grid-column:1;grid-row:1;max-width:34rem;padding-block:2.5rem 2rem}
.cover__figure{grid-column:2;grid-row:1 / span 2;align-self:stretch;height:100%}
.cover__figure .frame{height:100%}

.cover__name{
  font:400 var(--t-hero)/1.02 var(--serif);
  letter-spacing:-.035em;margin:1.6rem 0 0;
}
.cover__name-line{display:block}
.cover__name-line--2{margin-left:.06em}
.cover .pillars{margin-top:1.9rem}
.cover__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.6rem}

.cover__strip{
  grid-column:1;grid-row:2;
  display:flex;flex-wrap:wrap;
  border-top:1px solid var(--line);
  margin-right:clamp(1.5rem,4vw,4rem);
}
.cover__stat{flex:1 1 0;min-width:8rem;padding:1.5rem 1.5rem 2rem 0}
.cover__stat + .cover__stat{border-left:1px solid var(--line);padding-left:1.5rem}
.cover__stat b{display:block;font:400 clamp(1.5rem,2.4vw,2.1rem)/1 var(--serif);font-variant-numeric:tabular-nums}
.cover__stat span{
  display:block;margin-top:.6rem;
  font:500 .6875rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}

@media (max-width:860px){
  .cover{
    min-height:auto;grid-template-columns:1fr;
    padding-inline:var(--gut);padding-top:5.5rem;
  }
  .cover__text{grid-column:1;grid-row:2;padding-block:2.5rem 0;max-width:none}
  .cover__figure{grid-column:1;grid-row:1;height:auto}
  .cover__figure .frame{height:auto}
  .cover .pillars{margin-top:1.2rem}
  .cover__actions{margin-top:1.6rem}
  .cover__actions .btn{flex:1 1 100%}
  .cover__strip{grid-column:1;grid-row:3;margin-right:0;margin-top:2.75rem}
  .cover__stat{padding-right:1rem}
  .cover__stat + .cover__stat{padding-left:1rem}
}

/* ------------------------------------------------------- image frames */
.frame{position:relative;overflow:hidden;background:var(--oat)}
.frame img{width:100%;height:100%;object-fit:cover;display:none}
.frame.has-img img{display:block}
.frame--portrait{aspect-ratio:4/5}
.cover .frame--portrait{aspect-ratio:auto}
@media (max-width:860px){
  /* full-width band: the photograph crops rather than shrinking off the grid */
  .cover .frame--portrait{aspect-ratio:4/5;width:100%;max-height:36svh}
}

.frame__ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  padding:1.5rem;text-align:center;
  background:
    repeating-linear-gradient(-45deg,transparent 0 9px,rgba(35,33,29,.028) 9px 10px),
    var(--oat);
  border:1px solid var(--line-2);
}
.section--oat .frame__ph,
.section--oat .card__empty,
.section--oat .card__media,
.section--oat .embed-status{background:
    repeating-linear-gradient(-45deg,transparent 0 9px,rgba(35,33,29,.028) 9px 10px),
    #E3DCCE;}
.section--oat .embed-status{background-image:none;background-color:#E3DCCE}
.frame.has-img .frame__ph{display:none}
.frame__ph-kicker{font:500 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.frame__ph-file{font:400 .8125rem/1.4 var(--serif);font-style:italic;color:var(--ink-2)}
.frame__ph-hint{font:400 .6875rem/1.5 var(--sans);color:var(--ink-2);max-width:24ch}

/* ----------------------------------------------------------------- about */
.about{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.about__lead .h2{max-width:16ch}
.about__body{display:flex;flex-direction:column;gap:1.4rem;max-width:46ch}
.about__body #aboutBody{display:flex;flex-direction:column;gap:1.4rem;color:var(--ink-2)}
.lead--tight{max-width:none;font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.6}
@media (max-width:860px){.about{grid-template-columns:1fr}}

/* --------------------------------------------------------------- content */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.75rem);
  margin-top:clamp(3rem,6vw,5rem);
}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}

.card__media{
  position:relative;aspect-ratio:9/16;background:var(--oat);overflow:hidden;
  border:1px solid var(--line-2);
}
.card__media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.card__empty{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6rem;padding:2rem;text-align:center;
  background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(35,33,29,.028) 9px 10px),var(--oat);
}
/* Deliberately NO play glyph here. A card with no post behind it must not
   offer a control that does nothing when pressed. */
.card__empty-rule{width:2rem;height:1px;background:var(--line);margin-bottom:.35rem}
.card__empty-kicker{font:500 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.card__empty-hint{font:400 .75rem/1.55 var(--sans);color:var(--ink-3);max-width:24ch}

.card__body{padding-top:1.35rem}
.card__meta{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  font:500 .6875rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.card__cat{color:var(--ink-2)}
.card__brand{
  color:var(--clay);
}
.card__title{
  font:400 clamp(1.25rem,1.7vw,1.5rem)/1.22 var(--serif);
  letter-spacing:-.008em;margin-top:.85rem;
}
.card__note{margin-top:.7rem;color:var(--ink-2);font-size:.9375rem;line-height:1.62;max-width:38ch}
.card__link{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.05rem;min-height:44px;
  font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:.45rem;
  transition:border-color .3s var(--ease),gap .3s var(--ease);
}
.card__link:hover{border-color:var(--ink);gap:.85rem}
.card__link::after{content:"→";font-size:.875rem;line-height:1}

/* --------------------------------------------------------------------------
   Live profile feeds. Instagram renders a grid of recent posts and reports
   its own height; TikTok renders a vertical scroller and keeps a fixed
   aspect. The Instagram panel gets the wider column because its grid is
   three across.
   -------------------------------------------------------------------------- */
/* Its own section now, so the section padding provides the separation
   that the old top rule used to. */
.feeds__copy p{margin-top:.9rem;color:var(--ink-2);max-width:44ch}
.feeds__panels{
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(2rem,4vw,3rem);
  align-items:start;
}
.feed__label{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:.9rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line);
  font:500 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
}
.feed__label a{
  display:inline-flex;align-items:center;min-height:44px;margin-block:-1rem;
  color:var(--ink-3);text-decoration:none;transition:color .3s var(--ease);
}
.feed__label a:hover{color:var(--ink)}
.feed__frame{
  position:relative;background:var(--oat);overflow:hidden;
  border:1px solid var(--line-2);
}
.feed--instagram .feed__frame{aspect-ratio:1/1}   /* replaced by its own measurement */
.feed--tiktok .feed__frame{aspect-ratio:3/4}
.feed__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:860px){
  .feeds__panels{grid-template-columns:1fr}
  .feed--tiktok .feed__frame{aspect-ratio:9/13}
}

/* -------------------------------------------------------------- services */
.services{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(2rem,5vw,5rem);
  margin-top:clamp(3rem,6vw,4.5rem);
  border-top:1px solid var(--line-inv);
}
.services li{
  display:flex;align-items:baseline;
  padding:1.35rem 0;border-bottom:1px solid var(--line-inv);
  font:400 clamp(1.0625rem,1.5vw,1.3rem)/1.35 var(--serif);
}

.services__note{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  font:400 .8125rem/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,241,234,.66);
}
@media (max-width:720px){.services{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- brands */
.brands{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(3rem,6vw,4.5rem);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.brands li{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  min-height:clamp(8rem,14vw,11rem);
  display:grid;place-items:center;padding:2rem 1.25rem;text-align:center;
}
.brands li img{
  /* Each logo carries its own --logo-h (see content.js) because equal pixel
     heights do not read as equal weight: a filled circular badge overpowers
     a thin wordmark at the same size. --logo-scale shrinks the whole set
     together at narrower widths without disturbing their relative sizes. */
  height:calc(var(--logo-h,44px) * var(--logo-scale,1));
  width:auto;max-width:80%;object-fit:contain;
  opacity:.88;
}
@media (max-width:1024px){.brands{--logo-scale:.86}}
@media (max-width:720px){.brands{--logo-scale:.8}}
.brands__name{font:400 clamp(1.1rem,1.9vw,1.55rem)/1.2 var(--serif);letter-spacing:-.005em}
@media (max-width:720px){.brands{grid-template-columns:repeat(2,1fr)}}

/* -------------------------------------------------------------- audience */
.platforms{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(3rem,6vw,4.5rem);
}
.platform{border-top:1px solid var(--line);padding-top:1.75rem}
.platform__name{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font:500 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
}
.platform__name a{
  display:inline-flex;align-items:center;min-height:44px;padding-block:.5rem;
  color:var(--ink-3);text-decoration:none;transition:color .3s var(--ease);
}
.platform__name a:hover{color:var(--ink)}
.platform__figures{display:flex;gap:clamp(2rem,5vw,4rem);margin-top:1.5rem;flex-wrap:wrap}
.platform__fig b{
  display:block;font:400 clamp(2.6rem,6vw,4.4rem)/.95 var(--serif);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;
}
.platform__fig span{
  display:block;margin-top:.75rem;
  font:500 .6875rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:720px){.platforms{grid-template-columns:1fr}}

.highlights{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  margin-top:clamp(3rem,6vw,5rem);
}
.highlights li{border-top:1px solid var(--line);padding-top:1.35rem}
.highlights b{display:block;font:400 clamp(1.35rem,2.2vw,1.9rem)/1.15 var(--serif);letter-spacing:-.01em}
.highlights span{
  display:block;margin-top:.7rem;
  font:500 .6875rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:720px){.highlights{grid-template-columns:1fr}}

/* ---------------------------------------------------------- testimonials */
.quotes{
  display:grid;
  margin-top:clamp(3rem,6vw,4.5rem);
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:clamp(1.75rem,3.5vw,3rem);
  max-width:calc(var(--cols,3) * 26rem);
}
/* A single quote is set as one centred pull quote rather than one filled
   cell beside empty ones — the grid must never advertise the gap. */
.quotes[data-single]{
  display:block;max-width:34rem;margin-inline:auto;text-align:center;
}
.quotes[data-single] .quote{border-top:0;align-items:center}
.quotes[data-single] blockquote{font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.28}
@media (max-width:900px){.quotes{grid-template-columns:1fr;max-width:44rem}}

.quote{border-top:1px solid var(--line);padding-top:1.75rem;display:flex;flex-direction:column;gap:1.1rem}
.quote blockquote{font:400 clamp(1.25rem,1.9vw,1.6rem)/1.36 var(--serif);letter-spacing:-.008em}
.quote blockquote::before{content:"“";margin-right:.04em}
.quote blockquote::after{content:"”"}
.quote__src{font:500 .6875rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.quote--slot{
  border-top:1px dashed var(--line);
  min-height:11rem;justify-content:center;align-items:center;text-align:center;
  color:var(--ink-3);
}
.quote--slot p{font:400 .9375rem/1.6 var(--sans);max-width:22ch}

/* --------------------------------------------------------------- contact */
.contact__action{margin-top:clamp(2.25rem,5vw,3rem)}
.contact__socials{
  display:flex;justify-content:center;gap:2.25rem;flex-wrap:wrap;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);border-top:1px solid var(--line-inv);
}
.contact__socials a{
  display:inline-flex;align-items:center;min-height:44px;
  font:500 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:rgba(245,241,234,.82);
  border-bottom:1px solid transparent;padding-bottom:.4rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.contact__socials a:hover{color:var(--paper);border-color:var(--line-inv)}

/* ------------------------------------------------------------------ foot */
.foot{background:var(--moss);color:rgba(245,241,234,.72);padding-bottom:2.75rem}
.foot__inner{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-top:2rem;border-top:1px solid var(--line-inv);
  font:500 .6875rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;
}
.foot__sep{width:3px;height:3px;border-radius:50%;background:rgba(245,241,234,.45)}

/* ---------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cover__booking::before,
  .contact__booking::before{animation:none;box-shadow:0 0 0 3px var(--live-ring)}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------------------------------------------------------- visually hidden */
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.privacy-note{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  font:400 .8125rem/1.65 var(--sans);color:var(--ink-2);max-width:56ch;
}
.linklike{
  border:0;background:none;cursor:pointer;
  font:inherit;color:var(--ink);
  border-bottom:1px solid var(--line);
  /* grows the hit area without moving the line it sits in */
  padding-block:.72rem;margin-block:-.72rem;
}
.linklike:hover{border-color:var(--ink)}

/* ------------------------------------------------------------ closing band */
.closing{background:var(--paper);padding-block:0}
.closing__frame{aspect-ratio:21/9}
@media (max-width:860px){.closing__frame{aspect-ratio:4/3}}

/* ==========================================================================
   Availability, rates and source attribution
   A buyer triages on fit, price and start date. The page has to answer all
   three, and a figure without a source is a figure a buyer stops trusting.
   ========================================================================== */
.cover__booking,
.contact__booking{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:1.5rem;
  font:500 .8125rem/1.5 var(--sans);letter-spacing:.02em;
}
.cover__booking{color:var(--ink-2)}
.cover__booking::before,
.contact__booking::before{
  content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--live);
  animation:live-pulse 2.4s var(--ease) infinite;
}
@keyframes live-pulse{
  0%   {box-shadow:0 0 0 0 var(--live-ring)}
  70%  {box-shadow:0 0 0 .6rem rgba(0,0,0,0)}
  100% {box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.contact__booking{
  margin:2rem auto 0;color:rgba(245,241,234,.9);
}
.contact__rates{
  margin:1.5rem auto 0;max-width:42ch;
  font:400 .9375rem/1.6 var(--sans);color:rgba(245,241,234,.78);
}
.source-note{
  margin-top:clamp(2.5rem,5vw,3.5rem);max-width:62ch;
  padding-top:1.5rem;border-top:1px solid var(--line);
  font:400 .8125rem/1.65 var(--sans);color:var(--ink-2);
}
.platform__flag{
  font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ------------------------------------------------- unverified email state */
.contact__unverified{
  display:block;margin:0 auto clamp(1.25rem,3vw,1.75rem);max-width:40ch;
  border:1px dashed var(--line-inv);padding:.85rem 1.1rem;
  font:400 .8125rem/1.55 var(--sans);color:rgba(245,241,234,.85);
}
.btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;pointer-events:none;
}

/* ------------------------------------------------------- embed load state */
.card__media,.feed__frame{position:relative}
.embed-wrap{position:absolute;inset:0}
.embed-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-status{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;padding:2rem 1.5rem;
  text-align:center;background:var(--oat);
}
.embed-status[hidden]{display:none}
.embed-status__msg{font:400 .875rem/1.55 var(--sans);color:var(--ink-2);max-width:26ch}
.embed-status__bar{width:2.5rem;height:1px;background:var(--line);overflow:hidden;position:relative}
.embed-status__bar::after{
  content:"";position:absolute;inset:0;background:var(--ink-3);
  transform:translateX(-100%);animation:embed-load 1.1s var(--ease) infinite;
}
@keyframes embed-load{to{transform:translateX(100%)}}
.embed-status__actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}
.embed-retry{
  min-height:44px;display:inline-flex;align-items:center;padding:0 1rem;
  border:1px solid var(--line);background:none;cursor:pointer;
  font:500 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.embed-retry:hover{background:var(--ink);color:var(--paper)}
@media (prefers-reduced-motion:reduce){.embed-status__bar::after{animation:none;transform:none}}

/* ------------------------------------------------------- active nav state */
.nav__menu a[aria-current="true"]{color:var(--ink)}
.nav__menu a[aria-current="true"]::after{
  content:"";display:block;position:absolute;left:0;right:0;bottom:-.55rem;
  height:1px;background:var(--ink);
}
.nav__menu a{position:relative}
@media (max-width:860px){
  .nav__menu a[aria-current="true"]::after{display:none}
  .nav__menu a[aria-current="true"]{text-decoration:underline;text-underline-offset:.3em}
}

/* --------------------------------------- closing band hides with no asset */
.closing:not(.has-asset){display:none}

/* -------------------------------------------- self-hosted video in a card */
.card__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:var(--oat);border:0;display:block;
}

/* --------------------------------------------------------------------------
   Embed wells are sized per platform, because the two embeds are not the
   same shape. TikTok's player fills a 9:16 frame. Instagram fits the reel
   into a 4:5 frame and then adds a fixed strip of chrome underneath —
   "View more on Instagram", the action row, the like count, the comment
   row — which does not scale with width. Sizing both at 9:16 clips
   Instagram's like count off, and the like count is the social proof a
   brand is looking for.

   This is only the PRE-MEASUREMENT default, so the grid has a sensible shape
   before anything loads. Instagram's embed measures itself and posts its real
   height to the parent; main.js listens for that and sets the exact height,
   because the chrome varies per post (some carry a header row, some a comment
   row) and no fixed ratio can predict it.
   -------------------------------------------------------------------------- */
.card__media[data-platform="Instagram"]{
  aspect-ratio:auto;
  height:0;
  padding-bottom:calc(125% + 155px);
}

/* --------------------------------------------------------------------------
   Self-hosted clip tiles: the video and nothing else, cropped to the well.
   -------------------------------------------------------------------------- */
.card__media--file{aspect-ratio:9/16}
.card__playpause{
  position:absolute;right:.75rem;bottom:.75rem;z-index:2;
  width:2.75rem;height:2.75rem;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(245,241,234,.5);
  background:rgba(35,33,29,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease);
}
.card__playpause:hover{background:rgba(35,33,29,.72);border-color:var(--paper)}
/* paused: a triangle. playing: two bars. */
.card__playpause-icon{
  width:0;height:0;margin-left:3px;
  border-left:9px solid var(--paper);border-block:6px solid transparent;
}
.card__playpause[data-playing="true"] .card__playpause-icon{
  width:9px;height:11px;margin-left:0;border:0;
  border-left:3px solid var(--paper);border-right:3px solid var(--paper);
}

/* ==========================================================================
   Cookie consent
   One decision for the whole page. Accept and every embed loads on this and
   every later visit; decline and each well shows a link out instead.
   Both buttons carry equal visual weight — a "decline" that is harder to
   find than "accept" is a dark pattern and, in the UK, not valid consent.
   ========================================================================== */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;
  padding:clamp(1.1rem,2.5vw,1.5rem) var(--gut);
  background:var(--moss);color:var(--paper);
  border-top:1px solid var(--line-inv);
}
/* Deliberately no entrance animation. This notice gates every embed on the
   page, and a transition that fails to run — a backgrounded tab throttles
   both rAF and compositing — would leave it parked off-screen with the
   embeds silently blocked. It renders in place. */
.consent__text{
  flex:1 1 26rem;max-width:64ch;
  font:400 .875rem/1.6 var(--sans);color:rgba(245,241,234,.88);
}
.consent__actions{display:flex;gap:.75rem;flex-wrap:wrap}
.consent__btn{min-height:44px;padding:0 1.5rem;flex:1 1 auto}
.consent .btn--line{--btn-fg:var(--paper);border-color:rgba(245,241,234,.45)}
.consent .btn--line:hover{background:var(--paper);color:var(--moss);border-color:var(--paper)}
.consent .btn--solid{--btn-bg:var(--paper);--btn-fg:var(--moss);border-color:var(--paper)}
.consent .btn--solid:hover{background:transparent;color:var(--paper)}

/* the well when embeds are declined */
.embed-declined{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;padding:2rem 1.5rem;text-align:center;
  background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(35,33,29,.028) 9px 10px),var(--oat);
}
.embed-declined__msg{font:400 .875rem/1.55 var(--sans);color:var(--ink-2);max-width:24ch}
.foot__cookies{
  margin-left:auto;min-height:44px;
  border:0;background:none;padding:0;cursor:pointer;
  font:500 .6875rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,241,234,.72);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.foot__cookies:hover{color:var(--paper);border-color:var(--line-inv)}
@media (max-width:600px){.foot__cookies{margin-left:0;flex-basis:100%}}