/* ==========================================================================
   YOGA LIFE PREMIUM — V5
   Warm editorial × natural architecture × real movement × quiet confidence.

   Three rules enforced structurally, not by discipline:
     1. Every colour and every gap comes from a token. No literals below.
     2. Images keep their own ratio. object-fit:cover appears once, on the
        full-bleed hero, pinning a frame already pre-cropped to the band ratio
        in images.py. Nothing else re-crops a photograph.
     3. Grounds alternate. No two large light sections run together.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* grounds */
  --cream:#FBF8F2;
  --ivory:#F5F0E6;
  --sand:#E9DFC9;
  --olive:#293126;
  --olive-deep:#1F251D;
  --forest:#1D291E;      /* footer + caption strips */
  --gold-soft:#B58C43;   /* footer headings, badge line work */

  /* ink */
  --ink:#22241F;
  --ink-2:#454A40;
  --muted:#595F51;

  /* accents — display tones */
  --sage:#78816A;
  --app-orange:#E1703C; --app-orange-deep:#B8501C;
  --on-orange:#2E1405; --on-orange-2:#3A1B08;
  --terracotta:#B86E45;
  --gold:#C79A4B;          /* display gold — dark grounds only */
  --gold-rule:#9C7029;     /* hairlines on light grounds, AA non-text */

  /* accents — accessible partners for text and solid fills (AA on all
     three light grounds; the display tones above are not) */
  --sage-text:#57604D;
  --terracotta-text:#96522C;
  --gold-text:#7E6024;
  --terracotta-fill:#A85F38;
  --terracotta-fill-h:#8F4E2D;

  /* on dark grounds */
  --on-dark:#EDEAE1;
  --on-dark-2:#BFC7B5;
  --sage-light:#A9B69C;
  --gold-light:#D8B471;
  --bronze:#C48F58;        /* on the scrimmed hero — 5.2:1 */
  --bronze-deep:#8A5A2B;   /* on cream and ivory — 5.2:1 */

  /* lines */
  --line:#E0D8C7;
  --line-2:#D2C8B2;
  --line-dark:#3B4436;

  /* type */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --fs-hero:clamp(2.5rem,1.1rem + 3.6vw,4.15rem);
  --fs-h2:clamp(2.05rem,1.25rem + 2.5vw,3.4rem);
  --fs-card:clamp(1.6rem,1.18rem + 1.35vw,2.3rem);   /* the missing step */
  --fs-h3:clamp(1.35rem,1.14rem + .66vw,1.75rem);
  --fs-block:clamp(1.3rem,1.08rem + .8vw,1.72rem);   /* block headings */
  --fs-h4:clamp(1.1rem,1.03rem + .26vw,1.28rem);
  --fs-lead:clamp(1.09rem,1.01rem + .46vw,1.38rem);
  --fs-body:clamp(1rem,.97rem + .12vw,1.0625rem);
  --fs-sm:clamp(.9rem,.87rem + .12vw,.9375rem);
  --fs-xs:clamp(.79rem,.77rem + .08vw,.8125rem);
  --fs-label:clamp(.75rem,.72rem + .08vw,.78rem);

  /* spacing — 4 · 8 · 16 · 24 · 32 · 48 · 64 · 96 · 128 */
  --sp-1:4px; --sp-2:8px; --sp-3:16px;
  --sp-4:clamp(18px,1.7vw,24px);
  --sp-5:clamp(23px,2.3vw,32px);
  --sp-6:clamp(30px,3.4vw,48px);
  --sp-7:clamp(38px,4.5vw,64px);
  --sp-8:clamp(52px,6.7vw,96px);
  --sp-9:clamp(66px,9vw,128px);
  --section:clamp(52px,5.2vw,92px);
  --section-sm:clamp(40px,4vw,68px);

  /* layout */
  --container:1320px;
  --container-narrow:1040px;
  --reading:66ch;
  --gutter:clamp(24px,5vw,64px);
  --nav-h:clamp(62px,4.9vw,80px);
  /* left edge of page content, so full-bleed sections can align to it */
  --edge:calc(max(0px,(100vw - var(--container)) / 2) + var(--gutter));

  /* finish */
  --r-sm:6px; --r:12px; --r-lg:20px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(34,36,31,.05);
  --shadow-2:0 2px 6px rgba(34,36,31,.06),0 18px 40px -26px rgba(34,36,31,.4);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:var(--fs-body);line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--terracotta-text)}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--sage-text);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--sage);color:#fff}
img{max-width:100%;height:auto;display:block}
svg{display:block}
iframe{border:0}

/* ---------- type ---------- */
.d1{font-family:var(--serif);font-weight:500;font-size:var(--fs-hero);line-height:1.02;
  letter-spacing:-.025em;text-wrap:balance}
.d2{font-family:var(--serif);font-weight:500;font-size:var(--fs-h2);line-height:1.06;
  letter-spacing:-.022em;text-wrap:balance}
.d3{font-family:var(--serif);font-weight:500;font-size:var(--fs-h3);line-height:1.2;
  letter-spacing:-.012em}
.d4{font-family:var(--serif);font-weight:500;font-size:var(--fs-block);line-height:1.2;
  letter-spacing:-.012em}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);letter-spacing:-.004em}
.sm{font-size:var(--fs-sm);line-height:1.58}
.xs{font-size:var(--fs-xs);line-height:1.5}
.muted{color:var(--muted)}
.max{max-width:var(--reading)}
.label{font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-text);display:inline-flex;align-items:center;gap:var(--sp-2)}
.label::before{content:"";width:26px;height:1px;background:var(--gold-rule);flex:none}
.label--plain::before{display:none}

/* spacing utilities, on the scale only */
.mt1{margin-top:var(--sp-1)}.mt2{margin-top:var(--sp-2)}.mt3{margin-top:var(--sp-3)}
.mt4{margin-top:var(--sp-4)}.mt5{margin-top:var(--sp-5)}.mt6{margin-top:var(--sp-6)}
.mt7{margin-top:var(--sp-7)}.mt8{margin-top:var(--sp-8)}
.ctr{text-align:center}

/* ---------- grounds ---------- */
.sec{padding-block:var(--section);position:relative}
.sec--sm{padding-block:var(--section-sm)}
.g-cream{background:var(--cream)}
.g-ivory{background:var(--ivory)}
.g-sand{background:var(--sand)}
.g-olive{background:var(--olive);color:var(--on-dark)}
.g-deep{background:var(--olive-deep);color:var(--on-dark)}
.g-olive .lead,.g-deep .lead,.g-olive .muted,.g-deep .muted{color:var(--on-dark-2)}
.g-olive .label,.g-deep .label{color:var(--sage-light)}
.g-olive .label::before,.g-deep .label::before{background:var(--gold-light)}
.g-olive a,.g-deep a{color:var(--gold-light)}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--n{max-width:var(--container-narrow)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cream);
  padding:12px 18px;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ---------- navigation ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(251,248,242,.92);
  backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--line);
  transition:background .25s var(--ease),border-color .25s var(--ease)}

.nav__in{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  height:var(--nav-h);display:flex;align-items:center;gap:var(--sp-5)}
.logo{width:172px;height:auto}
.nav__links{margin-left:auto;display:flex;align-items:center;
  gap:clamp(14px,1.5vw,26px);white-space:nowrap}
.nav__links a:not(.btn){color:var(--ink-2);font-size:.9375rem;font-weight:500;text-decoration:none;
  padding:12px 0;display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1.5px solid transparent;transition:color .16s var(--ease),
  border-color .16s var(--ease)}
.nav__links a:not(.btn):hover{color:var(--ink);border-bottom-color:var(--sage)}
.nav__links a:not(.btn)[aria-current]{color:var(--ink);border-bottom-color:var(--terracotta)}
.burger{display:none;margin-left:auto;width:48px;height:48px;position:relative;
  border-radius:var(--r-sm)}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:12px;right:12px;
  height:1.5px;background:var(--ink);transition:.24s var(--ease)}
.burger span{top:23px}.burger::before{top:17px}.burger::after{top:29px}
.burger[aria-expanded=true] span{opacity:0}
.burger[aria-expanded=true]::before{top:23px;transform:rotate(45deg)}
.burger[aria-expanded=true]::after{top:23px;transform:rotate(-45deg)}

@media (max-width:1199px){
  .burger{display:block}
  .nav__links{position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--cream);
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--sp-3) var(--gutter) var(--sp-7);border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .24s var(--ease),opacity .24s var(--ease);
    max-height:calc(100dvh - var(--nav-h));overflow:auto}
  .nav__links.open{transform:none;opacity:1;pointer-events:auto}
  .nav__links a:not(.btn){padding:16px 0;border-bottom:1px solid var(--line);
    font-size:1.0625rem;min-height:48px;display:flex;align-items:center}
  .nav__links a:not(.btn)[aria-current]{border-bottom-color:var(--line);color:var(--terracotta-text)}
  .nav__cta{margin-top:var(--sp-4);justify-content:center}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:48px;padding:13px 26px;border-radius:var(--r-pill);font-size:.9375rem;
  font-weight:600;text-decoration:none;border:1.5px solid transparent;
  transition:background-color .18s var(--ease),color .18s var(--ease),
  border-color .18s var(--ease),transform .18s var(--ease)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--solid{background:var(--terracotta-fill);color:#fff}
.btn--solid:hover{background:var(--terracotta-fill-h);color:#fff}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--cream)}
.btn--ghost{border-color:rgba(237,234,225,.5);color:var(--on-dark)}
.btn--ghost:hover{background:var(--on-dark);color:var(--olive)}
.btns{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.nav__cta{min-height:44px;padding:11px 24px}

.alink{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:600;
  font-size:.9375rem;color:var(--terracotta-text);text-decoration:none}
.alink::after{content:"";width:16px;height:1px;background:currentColor;
  transition:width .2s var(--ease)}
.alink:hover{text-decoration:none}
.alink:hover::after{width:28px}
.g-olive .alink,.g-deep .alink{color:var(--gold-light)}

/* ---------- hero ----------
   Full-bleed photograph at its own ratio — the band is cut in images.py at
   full width, so nobody at the edge of the frame is lost, and nothing re-crops
   it here. Type overlays at the left over a horizontal scrim above 1024px;
   below that the picture leads and the copy sits on paper beneath it, because
   a phone-width band is not deep enough to hold the copy without either
   clipping the frame or burying the photograph. */
/* ---------- hero -------------------------------------------------------
   One system, seven pages. Mobile leads with the photograph and sets the type
   on paper beneath it; from 1024 the photograph goes full bleed and the type
   sits in a narrow column over a gradient that darkens only the left third, so
   skin tones, daylight and greenery survive on the picture side. */
.hero{background:var(--ivory);display:flex;flex-direction:column}
.hero__pic{order:-1}
.hero__pic img{width:100%;display:block;height:auto}
.hero__in{padding:var(--sp-6) var(--gutter) var(--sp-7)}
.hero__copy .d1{color:var(--ink)}
.hero__copy .d1 em{font-style:italic;color:var(--bronze-deep)}
.hero__copy .lead{max-width:38ch;color:var(--ink-2)}
.hero__copy .lead em{font-style:normal;color:var(--terracotta-text);font-weight:500}

@media (min-width:1024px){
  /* Editorial split: the photograph is a right-anchored layer, not a full-bleed
     background. The left is a real dark surface the type sits on, so the
     gradient only has to blend the photo's left edge instead of darkening
     people to make the headline readable. Per-page art direction comes in as
     --hero-media (how much width the picture takes) and --hero-focus (which
     part of the frame stays visible). */
  /* Composition comes from the grid, not from absolute offsets: one row, two
     fluid columns, and the copy rail overlaid on the same cells so it keeps the
     page container's own alignment. Height is the viewport minus the header, so
     zooming rescales the whole composition instead of only the type. */
  .hero{display:grid;isolation:isolate;background:var(--olive-deep);
    grid-template-columns:minmax(0,1fr) minmax(0,var(--hero-media,66%));
    grid-template-rows:minmax(0,1fr);
    min-height:max(30rem,calc(100vh - var(--nav-h)));
    min-height:max(30rem,calc(100svh - var(--nav-h)))}
  .hero--compact{min-height:max(26rem,calc(100svh - var(--nav-h) - 8vh))}
  .hero__pic{grid-area:1/2;min-width:0;height:100%;margin:0}
  .hero__pic img,.hero__pic picture{width:100%;height:100%;display:block}
  .hero__pic img{object-fit:cover;object-position:var(--hero-focus,50% 50%);
    aspect-ratio:auto}
  /* the blend is a grid item over the media column, not a positioned overlay */
  .hero::after{content:"";grid-area:1/2;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(31,37,29,1) 0%,rgba(31,37,29,.97) 8%,
      rgba(31,37,29,.86) 18%,rgba(31,37,29,.62) 28%,rgba(31,37,29,.36) 38%,
      rgba(31,37,29,.16) 48%,rgba(31,37,29,.04) 58%,rgba(31,37,29,0) 66%)}
  .hero__in{grid-area:1/1/-1/-1;z-index:2;max-width:var(--container);width:100%;
    margin-inline:auto;padding-inline:var(--gutter);padding-block:var(--sp-7);
    display:flex;align-items:center}
  .hero__copy{color:#F5F0E6;max-width:var(--hero-copy,min(48%,37rem));
    margin-block-end:clamp(0px,1.8vw,28px)}   /* a touch above true centre */
  .hero__copy .d1{color:#F7F3EA;
    font-size:clamp(2.45rem,1.55rem + 1.7vw,3.15rem);line-height:1.02;
    letter-spacing:-.02em}
  .hero__copy .d1 em{color:#D89A63}
  .hero__copy .lead{color:rgba(245,240,230,.9);max-width:45ch;
    font-size:clamp(1rem,.95rem + .2vw,1.115rem);line-height:1.62}
  .hero__copy .lead em{color:#E0A874}
  .hero__copy .label{color:#CBD3C0}
  .hero__copy .label::before{background:var(--bronze)}
  .hero__copy .btn--outline{border-color:rgba(245,240,230,.55);color:#F5F0E6}
  .hero__copy .btn--outline:hover{background:#F5F0E6;color:var(--ink);
    border-color:#F5F0E6}
}
@media (min-width:1024px) and (max-width:1199px){
  .hero{--hero-media:58%}
  .hero__copy{max-width:min(50%,27rem)}
}
@media (max-width:1023px){
  /* two lines on a phone rather than three */
  .hero__copy .lead{font-size:clamp(.86rem,.78rem + .38vw,1.02rem);max-width:44ch}
}
@media (max-width:559px){
  .hero__copy .btn{padding-inline:var(--sp-4)}
  .hero__in{padding-top:var(--sp-5)}
}
.hero--compact .hero__copy .d1{font-size:clamp(2.2rem,1.1rem + 2.9vw,3.4rem)}


/* A hero for a page we cannot illustrate honestly yet: type on paper, no
   borrowed photograph implying a place we have not verified. */
.hero.hero--plain{background:var(--ivory);display:block}
.hero.hero--plain::after{display:none}
.hero.hero--plain .hero__in{position:static;max-width:var(--container);
  margin-inline:auto;padding:var(--section) var(--gutter) var(--section-sm);display:block}
.hero.hero--plain .hero__copy{color:var(--ink);max-width:none}
.hero.hero--plain .hero__copy .d1{color:var(--bronze-deep);
  font-size:clamp(2.3rem,1.15rem + 3.1vw,3.8rem);max-width:18ch}
.hero.hero--plain .hero__copy .lead{color:var(--ink-2);max-width:52ch}
.hero.hero--plain .hero__copy .label{color:var(--sage-text)}
.hero.hero--plain .hero__copy .label::before{background:var(--gold-rule)}
.hero.hero--plain .hero__copy .btn--outline{border-color:var(--ink);color:var(--ink)}
.hero.hero--plain .hero__copy .btn--outline:hover{background:var(--ink);color:var(--cream)}

/* ---------- editorial split (the workhorse) ---------- */
.ed{display:grid;gap:clamp(var(--sp-5),4.5vw,var(--sp-8));align-items:center}
@media (min-width:1024px){
  .ed{grid-template-columns:1.02fr .98fr}
  .ed--wide{grid-template-columns:1.22fr .78fr;align-items:start}
  .ed--narrow{grid-template-columns:.78fr 1.22fr}
  .ed--flip > .ed__pic{order:2}
}
.ed__pic img{border-radius:var(--r)}
.ed__pic--arch img{border-radius:min(46vw,200px) min(46vw,200px) var(--r) var(--r)}
figcaption{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-2)}

/* ---------- section headers ---------- */
.head{display:grid;gap:var(--sp-3)}
@media (min-width:1024px){
  /* Bottom-alignment only reads well while the right column is the shorter
     one; a long paragraph then climbs above the heading. Anchor its top instead
     so the supporting text always begins below the block name. */
  .head{grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,104px);align-items:start}
  /* a header with no supporting column centres, and gets the full rail so the
     name can hold one line instead of wrapping against an empty half */
  .head--solo{grid-template-columns:minmax(0,1fr);justify-items:center;
    text-align:center}
  .head--solo .head__t{justify-items:center;max-width:100%}
  .head--solo .head__t h2{text-wrap:balance}
  .head > div:last-child{padding-block-start:clamp(30px,3.4vw,56px)}
}
.head + *{margin-top:clamp(22px,2.4vw,38px)}
.sec--sm .head + *{margin-top:clamp(28px,3vw,44px)}
.head .lead{font-size:var(--fs-body);line-height:1.62;color:var(--ink-2);max-width:44ch}
.head__cta{margin-top:var(--sp-4)}
.head__cta .btn{margin-top:0}
@media (max-width:1023px){.head__cta{margin-top:var(--sp-3)}}
.head__t{padding-bottom:var(--sp-2)}
.head__t{display:grid;gap:var(--sp-3)}

/* ---------- three ways to practise ---------- */
.ways{display:grid;gap:var(--sp-5)}
@media (min-width:768px){.ways{grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,52px)}}
.way{display:block;color:inherit;text-decoration:none}
.way:hover{text-decoration:none}
.way__pic{overflow:hidden;border-radius:var(--r)}
.way__pic img{transition:transform .6s var(--ease)}
.way:hover .way__pic img{transform:scale(1.03)}
.way__b{margin-top:var(--sp-4);padding-top:var(--sp-4);display:grid;gap:var(--sp-3);
  border-top:1px solid var(--line-2)}
.way__t{font-family:var(--serif);font-weight:500;font-size:var(--fs-card);line-height:1.12;
  letter-spacing:-.018em}
.way__b p{color:var(--ink-2);max-width:36ch;font-size:var(--fs-body)}
.way .alink{margin-top:var(--sp-1)}
.way:hover .way__b{border-top-color:var(--terracotta)}
.way__b .label{color:var(--muted)}
@media (min-width:768px){
  .ways > :nth-child(2){transform:translateY(clamp(10px,1.4vw,22px))}
}

/* ---------- why yoga life (dark pillars) ---------- */
.pillars{display:grid;gap:var(--sp-5)}
@media (min-width:640px){.pillars{grid-template-columns:1fr 1fr;gap:var(--sp-6)}}
@media (min-width:1024px){
  .pillars{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-6)}
}
.pillar{padding-top:var(--sp-4);border-top:1px solid var(--line-dark);display:grid;
  gap:var(--sp-3);align-content:start}
.pillar__mark{width:32px;height:32px;color:var(--gold-light)}
.g-cream .pillar__mark,.g-ivory .pillar__mark{color:var(--sage-text)}
.pillar h3{font-family:var(--serif);font-weight:500;font-size:var(--fs-block);
  line-height:1.16;letter-spacing:-.012em;text-wrap:balance}
.pillar p{font-size:var(--fs-sm);color:var(--on-dark-2)}


/* ==========================================================================
   Closing canvas — community · studios · booking
   One cream ground divided by hairlines, not three cards. Height comes from
   the content; nothing here is pinned to the viewport.
   ========================================================================== */
.g-cream + .close,.g-ivory + .close,.g-sand + .close{border-top:1px solid var(--line-2)}
.close{position:relative;overflow:hidden;background:var(--ivory);
  padding-block:clamp(48px,5.6vw,80px)}
.close .leaf{position:absolute;left:clamp(-58px,-3vw,-24px);top:52%;
  translate:0 -50%;width:clamp(170px,17vw,250px);height:auto;
  color:var(--sage);opacity:.2;pointer-events:none;z-index:0}
.close__grid{position:relative;z-index:1;display:grid;gap:clamp(28px,3.4vw,48px)}
@media (min-width:1024px){
  .close__grid{grid-template-columns:minmax(0,26fr) minmax(0,26fr) minmax(0,48fr);
    gap:clamp(26px,2.6vw,42px)}
  .close__col + .close__col{border-left:1px solid var(--line-2);
    padding-left:clamp(26px,2.6vw,42px)}
}
.close__h{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.5rem,1.15rem + .5vw,1.72rem);line-height:1.14;
  letter-spacing:-.015em;text-wrap:balance}

.close__col--app .close__p{max-width:24ch}
/* the booking copy rail is narrow; let the eyebrow and the two headline lines
   run past it into the app side rather than wrapping further */
.close__col--app .label,.close__col--app .close__h{white-space:nowrap}
.close__col--app .close__appcopy{position:relative;z-index:2}
.close__p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.62;max-width:34ch}
.close__pic img{width:100%;display:block;border-radius:var(--r-sm);
  aspect-ratio:5/4;object-fit:cover}
.close__col .rating{margin-top:var(--sp-5);flex-direction:column;
  align-items:flex-start;gap:var(--sp-2)}
.close__col .rating__stars svg{width:19px;height:19px}

/* columns share one top and one bottom baseline; the lower group in each is
   pushed down rather than nudged with hand-set margins */
@media (min-width:1024px){
  .close__grid{align-items:stretch}
  .close__col{display:flex;flex-direction:column;height:100%;min-width:0}
  .close__col > .tiles{margin-top:var(--sp-4)}
  .close__grid{align-items:stretch}
  .close__col{display:flex;flex-direction:column}
  .close__col > :last-child{margin-top:auto}
}

/* studio tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.tile{display:grid;gap:var(--sp-2);text-decoration:none;line-height:0}
.tile img{width:100%;display:block;aspect-ratio:5/4;object-fit:cover;
  border-radius:var(--r-sm)}
.tile__cap{color:var(--ink-2);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;line-height:1.3}

/* community frame — one large photograph that cross-fades between five */
.fade{position:relative;margin-top:var(--sp-4);margin-bottom:var(--sp-6);
  border-radius:var(--r-sm);
  overflow:hidden;aspect-ratio:1.9}
@media (max-width:1023px){.fade{margin-bottom:var(--sp-7)}}
.fade__i{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.fade__i.is-on{opacity:1}
.fade__i img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){
  .fade__i{transition:none}
}

/* booking column: copy left, the supplied member-app asset right */
.close__col--app{display:grid;gap:var(--sp-4)}
.appviz__soon{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--muted);text-align:center;margin:0}
@media (min-width:1024px){
  .close__col--app{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    align-items:start;gap:clamp(8px,1vw,18px)}
}
.appviz{display:grid;justify-items:center;align-content:end;gap:var(--sp-3);
  min-width:0}
.appviz__img{width:clamp(270px,26vw,450px);height:auto;object-fit:contain;
  display:block}

@media (max-width:1023px){
  .close .leaf{opacity:.1;width:150px}
  .appviz{place-items:center;margin-top:var(--sp-4)}
}

/* ---------- teachers — homepage rail ---------- */
.tmini{display:grid;gap:var(--sp-5);grid-auto-flow:column;
  grid-auto-columns:minmax(210px,1fr);overflow-x:auto;padding-bottom:var(--sp-3);
  scroll-snap-type:x mandatory;scrollbar-width:thin}
.tmini > *{scroll-snap-align:start}
@media (min-width:1024px){
  .tmini{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:clamp(14px,1.5vw,24px);overflow:visible}
}
.tcard img{border-radius:var(--r);width:100%}
.tcard h3{margin-top:var(--sp-3)}
.tcard .xs{color:var(--muted);margin-top:2px}
.tcard .spec{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--sp-2)}

/* ---------- teachers — full profiles ---------- */
.profiles{display:grid;gap:var(--sp-7)}
.profile{display:grid;gap:var(--sp-5)}
@media (min-width:768px){
  .profile{grid-template-columns:minmax(200px,.48fr) 1fr;gap:clamp(32px,4vw,64px);
    align-items:start}
  .profile:nth-child(even){grid-template-columns:1fr minmax(200px,.48fr)}
  .profile:nth-child(even) > .profile__pic{order:2}
}
.profile__pic img{border-radius:var(--r);width:100%}
.profile__b{display:grid;gap:var(--sp-3);align-content:start}
.profile__meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-xs);color:var(--muted);letter-spacing:.03em}
.profile dl{display:grid;gap:var(--sp-3);margin-top:var(--sp-2)}
@media (min-width:560px){.profile dl{grid-template-columns:auto 1fr;gap:var(--sp-3) var(--sp-4)}}
.profile dt{font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage-text);padding-top:3px}
.profile dd{font-size:var(--fs-sm);color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chips li,.chips span{font-size:var(--fs-xs);padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(120,129,106,.14);color:var(--ink-2)}
.g-olive .chips li{background:rgba(237,234,225,.12);color:var(--on-dark-2)}

/* ---------- studios slider ---------- */
.gal{display:grid;gap:var(--sp-4)}
/* rows of three that cross-fade; the first stays in flow and sets the height */
.gal__stage{position:relative}
.gal__slide{display:grid;grid-template-columns:1fr;gap:var(--sp-4);
  opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
@media (min-width:768px){.gal__slide{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.gal__slide{grid-template-columns:repeat(3,1fr)}}
.gal__slide:not(:first-child){position:absolute;inset:0}
.gal__slide.is-on{opacity:1;pointer-events:auto}
.gal__slide > figure{margin:0}
.gal img{border-radius:var(--r);width:100%;display:block}
.gal__nav{display:flex;gap:var(--sp-2);justify-content:flex-end}
.gal + p{margin-top:var(--sp-3)}
.gal__btn{width:48px;height:48px;border-radius:var(--r-pill);
  border:1.5px solid var(--line-2);color:var(--ink);display:grid;place-items:center;
  background:transparent;cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.gal__btn svg{width:20px;height:20px}
.gal__btn:hover:not([disabled]){background:var(--ink);color:var(--cream);border-color:var(--ink)}
.gal__btn[disabled]{opacity:.3;cursor:default}
@media (prefers-reduced-motion:reduce){.gal__slide{transition:none}}
.g-olive .gal__btn,.g-deep .gal__btn{border-color:var(--line-dark);color:var(--on-dark)}

/* ---------- locations ---------- */
.locs{display:grid;gap:var(--sp-6)}
@media (min-width:820px){.locs{grid-template-columns:1fr 1fr}}
.loc__pic{display:block;overflow:hidden;border-radius:var(--r)}
.loc__pic img{width:100%;aspect-ratio:1.434;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.loc:hover .loc__pic img{transform:scale(1.03)}
.loc dl{margin-top:var(--sp-3);display:grid;grid-template-columns:auto 1fr;
  gap:var(--sp-2) var(--sp-4);font-size:var(--fs-sm)}
.loc dt{color:var(--muted);font-size:var(--fs-xs);letter-spacing:.05em;
  text-transform:uppercase;padding-top:3px}
.mapframe{width:100%;aspect-ratio:16/10;border-radius:var(--r);display:block}
/* A location we cannot yet illustrate honestly gets a typographic card rather
   than a borrowed photograph or a grey placeholder. */
.loc--plain{border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(24px,3vw,40px);background:var(--cream);display:flex;
  flex-direction:column;justify-content:center}
.loc__mark svg{width:40px;height:40px;color:var(--sage-text)}
.miniloc--plain{border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:var(--sp-4);background:rgba(255,255,255,.4)}
.miniloc__box{display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/2;border-radius:var(--r-sm);background:var(--sand)}
.miniloc__box svg{width:32px;height:32px;color:var(--sage-text)}

/* ---------- closing band: community, studios, booking ---------- */
/* ---- closing band -------------------------------------------------------
   Three panels of identical height. The heads vary in length, so each panel
   pins its media to the bottom and the grid stretches the rest. */
.close3{display:grid;gap:clamp(20px,2.4vw,28px);align-items:stretch}
@media (min-width:900px){.close3{grid-template-columns:repeat(3,1fr)}}
.close3__col{display:flex;flex-direction:column;border-radius:var(--r);
  padding:clamp(20px,2.4vw,30px);background:rgba(255,255,255,.04);
  border:1px solid var(--line-dark)}
.close3__head{display:flex;flex-direction:column;align-items:flex-start}
.close3__media{margin-top:auto;padding-top:var(--sp-5);width:100%}
.close3__col p{color:var(--on-dark-2);max-width:36ch}
.close3__col .goals{gap:var(--sp-2);margin-top:var(--sp-3)}
.close3__col .goals a{color:var(--on-dark-2);padding:6px 12px;font-size:var(--fs-label)}
.close3__pic img{border-radius:var(--r-sm);width:100%;display:block}
.close3__locs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);width:100%}
.close3__loc{display:grid;grid-template-rows:1fr auto;gap:var(--sp-2);
  color:var(--on-dark);text-decoration:none;font-size:var(--fs-sm);font-weight:500}
.close3__loc img{border-radius:var(--r-sm);width:100%;display:block}
.close3__loc:hover{text-decoration:none;color:var(--gold-light)}
.close3__box{display:flex;align-items:center;justify-content:center;height:100%;
  border:1px solid var(--line-dark);border-radius:var(--r-sm);
  background:rgba(255,255,255,.05)}
.close3__box svg{width:26px;height:26px;color:var(--sage-light)}

/* ---- member app panel ---------------------------------------------------
   Its own orange, not the terracotta used elsewhere: the app is a separate
   thing from the studio and should not read as another studio surface. The
   handset is angled in 3D and cropped by the panel edge — no image crop. */
.appbox{position:relative;border-radius:var(--r-sm);overflow:hidden;
  background:radial-gradient(120% 100% at 20% 0%,#EE8555 0%,var(--app-orange) 45%,
    var(--app-orange-deep) 100%);
  padding:clamp(16px,1.8vw,20px) clamp(16px,1.8vw,20px) 0;text-align:center}
.appbox__t{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--on-orange);margin:0 0 var(--sp-3);position:relative;z-index:2}
.appbox__t span{display:block;letter-spacing:.04em;text-transform:none;font-weight:500;
  color:var(--on-orange-2);margin-top:3px}
.devwrap{overflow:hidden}
.dev{width:min(202px,78%);margin:0 auto calc(var(--sp-5) * -1);background:#15180F;border-radius:30px;
  padding:7px;
  /* a flat tilt, not a 3D rotation: perspective skewed the type and left the
     bezels uneven. The panel edge does the cropping. */
  transform:rotate(-6.5deg);transform-origin:50% 100%;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,14px 20px 38px rgba(70,26,0,.42)}
.dev__scr{position:relative;border-radius:24px;overflow:hidden;background:var(--cream);
  color:var(--ink);padding:16px 12px 18px;text-align:left;display:grid;
  gap:var(--sp-2);align-content:start;min-height:196px}
.dev__notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:38px;height:4px;border-radius:99px;background:rgba(34,36,31,.2)}
.dev__bar{display:flex;justify-content:space-between;align-items:flex-end;
  font-size:.5rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.dev__sig{display:flex;gap:2px;align-items:flex-end}
.dev__sig i{width:2px;background:currentColor;border-radius:1px;display:block}
.dev__sig i:nth-child(1){height:3px}.dev__sig i:nth-child(2){height:5px}
.dev__sig i:nth-child(3){height:7px}
.dev__k{font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-text);font-weight:600;margin:0}
.dev__h{font-family:var(--serif);font-size:1rem;line-height:1.15;color:var(--ink);margin:0}
.dev__card{display:grid;gap:2px;background:var(--olive);color:var(--on-dark);
  border-radius:10px;padding:9px 10px;margin-top:2px;
  box-shadow:0 4px 12px rgba(20,24,17,.2)}
.dev__lab{font-size:.46rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-light);font-weight:600}
.dev__t{font-family:var(--serif);font-size:.76rem}
.dev__m{font-size:.55rem;color:var(--on-dark-2)}
.dev__row{display:flex;align-items:center;gap:var(--sp-2)}
.dev__row span:first-child{width:18px;height:18px;border-radius:5px;background:var(--sand);
  flex:none}
.dev__row span:last-child{height:5px;border-radius:99px;background:var(--sand);flex:1}
.dev__row:last-child span:last-child{width:58%;flex:none}
@media (prefers-reduced-motion:reduce){.dev{transform:none}}
@media (max-width:560px){.dev{width:min(196px,66%)}}

/* ---------- booking band + lead teaser ---------- */
.booking{display:grid;gap:var(--sp-6)}
@media (min-width:900px){.booking{grid-template-columns:1fr auto;align-items:center}}
.teaser{border-top:1px solid var(--line-2);padding-top:var(--sp-5);
  margin-top:clamp(32px,3.6vw,56px);display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);
  align-items:center;justify-content:space-between}
.teaser p{max-width:44ch;color:var(--ink-2)}
.g-olive .teaser,.g-deep .teaser{border-top-color:var(--line-dark)}
.g-olive .teaser p,.g-deep .teaser p{color:var(--on-dark-2)}
.g-olive .teaser strong,.g-deep .teaser strong{color:var(--on-dark)}
.g-olive .goals a,.g-deep .goals a{border-color:var(--line-dark);color:var(--on-dark-2)}
.g-olive .goals a:hover,.g-deep .goals a:hover{border-color:var(--sage-light);
  background:rgba(255,255,255,.06);color:var(--on-dark)}
.teaser .goals{margin-top:0}
.goals{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.goals a{font-size:var(--fs-sm);padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--ink-2);text-decoration:none;min-height:40px;
  display:inline-flex;align-items:center;
  transition:border-color .18s var(--ease),background-color .18s var(--ease)}
.goals a:hover{border-color:var(--sage);background:rgba(120,129,106,.1);
  text-decoration:none;color:var(--ink)}

/* ---------- forms ---------- */
.form{display:grid;gap:var(--sp-3)}
.two{display:grid;gap:var(--sp-3)}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}
.three{display:grid;gap:var(--sp-3)}
@media (min-width:640px){.three{grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end}}   /* inputs share one baseline even if a label wraps */
.field{display:grid;gap:var(--sp-2)}
.field label{font-size:var(--fs-xs);letter-spacing:.03em;color:var(--muted);
  line-height:1.35;min-height:calc(var(--fs-xs) * 1.35)}
.opt-tag{opacity:.72;font-style:italic}
.field input,.field textarea,.field select{width:100%;padding:10px 14px;
  border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--cream);
  color:var(--ink);font:inherit;font-size:var(--fs-sm);min-height:44px}
.field textarea{min-height:62px;resize:vertical}
.g-olive .field label,.g-deep .field label{color:var(--on-dark-2)}
.g-olive .field input,.g-olive .field textarea,.g-olive .field select,
.g-deep .field input,.g-deep .field textarea,.g-deep .field select{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26);color:#fff}
.g-olive .field input::placeholder,.g-olive .field textarea::placeholder,
.g-deep .field input::placeholder,.g-deep .field textarea::placeholder{
  color:rgba(255,255,255,.5)}
.opts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:flex;align-items:center;min-height:38px;padding:7px 14px;
  border-radius:var(--r-pill);border:1.5px solid var(--line-2);font-size:var(--fs-sm);
  transition:.16s var(--ease)}
.opt input:checked + span{background:var(--sage-text);border-color:var(--sage-text);
  color:#fff;font-weight:500}
.opt input:focus-visible + span{outline:2px solid var(--sage-text);outline-offset:3px}
.g-olive .opt span,.g-deep .opt span{border-color:rgba(255,255,255,.3)}
.g-olive .opt input:checked + span,.g-deep .opt input:checked + span{
  background:var(--on-dark);border-color:var(--on-dark);color:var(--olive)}
.consent{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-xs);
  line-height:1.5}
.consent input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--sage-text)}
.g-olive .consent input,.g-deep .consent input{accent-color:var(--gold-light)}
.fstatus{font-size:var(--fs-sm);display:none}
.fstatus.on{display:block}

/* The message a visitor can copy when the form has no relay and their machine
   has no mail app. Shown only once a submission has been attempted. */
.fsend{display:none;margin-top:var(--sp-4);padding:var(--sp-4);border:1px solid var(--line);
  border-radius:var(--r);background:var(--cream)}
.fsend.on{display:block}
.fsend__t{width:100%;margin-top:var(--sp-2);padding:var(--sp-3);font:inherit;
  font-size:var(--fs-sm);line-height:1.55;color:var(--ink);background:var(--ivory);
  border:1px solid var(--line);border-radius:var(--r-sm);resize:vertical}
.fsend__b{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  margin-top:var(--sp-3)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:var(--sp-4) 44px var(--sp-4) 0;
  position:relative;font-family:var(--serif);font-size:1.08rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--terracotta);border-bottom:1.5px solid var(--terracotta);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{padding-bottom:var(--sp-4);color:var(--ink-2);max-width:var(--reading)}

/* ---------- lists, notes, misc ---------- */
.steps{display:grid;gap:var(--sp-5);counter-reset:n}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}}
/* the wide-screen count only applies once each column can still hold a line */
@media (min-width:1160px){
  .steps{grid-template-columns:repeat(var(--steps,3),minmax(0,1fr));
    gap:clamp(24px,2.4vw,40px)}
  .steps[style*="--steps:5"] h3,.steps[style*="--steps:6"] h3{
    font-size:clamp(1.2rem,.95rem + .55vw,1.42rem)}
}
.step{counter-increment:n;padding-top:var(--sp-4);border-top:1px solid var(--line-2);
  display:grid;gap:var(--sp-3);align-content:start}
.g-olive .step{border-top-color:var(--line-dark)}
.step::before{content:"0" counter(n);font-family:var(--serif);font-size:.82rem;
  letter-spacing:.08em;color:var(--gold-text)}
.g-olive .step::before{color:var(--gold-light)}
.step h3{font-family:var(--serif);font-weight:500;font-size:var(--fs-block);
  line-height:1.16;letter-spacing:-.012em;text-wrap:balance}
.step p{font-size:var(--fs-sm);color:var(--ink-2)}
.g-olive .step p{color:var(--on-dark-2)}

.stack{display:grid;gap:var(--sp-6)}
.rows{display:grid;gap:var(--sp-6)}
.row{display:grid;gap:var(--sp-4)}
@media (min-width:768px){
  .row{grid-template-columns:minmax(240px,.62fr) 1fr;gap:clamp(28px,3.6vw,56px);
    align-items:center}
  .row:nth-child(even){grid-template-columns:1fr minmax(240px,.62fr)}
  .row:nth-child(even) > .row__pic{order:2}
}
.row__pic img{border-radius:var(--r);width:100%}
.row__b{display:grid;gap:var(--sp-2);align-content:center}
.row__b .chips{margin-top:var(--sp-2)}

.note{border-left:2px solid var(--gold-rule);padding-left:var(--sp-4);color:var(--ink-2);
  font-size:var(--fs-sm)}
.g-olive .note{border-left-color:var(--gold-light);color:var(--on-dark-2)}
.quote{border-left:2px solid var(--terracotta);padding-left:var(--sp-5)}
.quote p{font-family:var(--serif);font-size:1.18rem;line-height:1.4}
.quote cite{display:block;margin-top:var(--sp-3);font-style:normal;font-size:var(--fs-xs);
  color:var(--muted);letter-spacing:.02em}
.grid2{display:grid;gap:var(--sp-5)}
@media (min-width:720px){.grid2{grid-template-columns:1fr 1fr;gap:var(--sp-6)}}

/* ---------- footer ---------- */
/* ==========================================================================
   Footer — deeper forest than the section above, and deliberately compact.
   ========================================================================== */
.foot{background:var(--forest);color:var(--on-dark-2);
  padding-block:clamp(34px,3.6vw,50px) clamp(14px,1.4vw,20px)}
.foot__top{display:grid;gap:clamp(28px,3vw,44px)}
@media (min-width:900px){
  .foot__top{grid-template-columns:32fr 18fr 18fr 32fr;gap:clamp(24px,2.6vw,44px)}
}
.foot h4{font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-soft);font-weight:600}
.foot ul{margin-top:var(--sp-3);display:grid;gap:var(--sp-3)}
.foot a{color:var(--on-dark-2);font-size:var(--fs-sm);text-decoration:none}
.foot a:hover{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}
.foot .logo{width:clamp(150px,13vw,186px)}
.foot__blurb{font-size:var(--fs-sm);color:var(--on-dark-2);line-height:1.62;
  max-width:34ch;margin-top:var(--sp-3)}

.foot__social{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.foot__social a{width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-dark);display:grid;place-items:center;
  color:var(--sage-light);transition:border-color .18s var(--ease),color .18s var(--ease)}
.foot__social svg{width:17px;height:17px;fill:currentColor;display:block}
.foot__social a:hover,.foot__social a:focus-visible{border-color:var(--gold-soft);
  color:var(--gold-soft);text-decoration:none}

/* newsletter — a field on the dark ground, not a white box */
.nl{position:relative;margin-top:var(--sp-4);display:flex;align-items:center}
.nl input{flex:1;min-width:0;background:transparent;color:var(--on-dark);
  border:1px solid var(--line-dark);border-radius:var(--r-pill);
  padding:13px 56px 13px 20px;font:inherit;font-size:var(--fs-sm)}
.nl input::placeholder{color:rgba(233,229,216,.5)}
.nl input:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.nl button{position:absolute;right:5px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-dark);background:transparent;color:var(--gold-soft);
  display:grid;place-items:center;cursor:pointer}
.nl button svg{width:16px;height:16px}
.nl button:hover{border-color:var(--gold-soft);background:rgba(181,140,67,.12)}
.nl .fstatus{position:absolute;top:100%;left:2px;margin-top:var(--sp-2);font-size:var(--fs-xs)}

.foot__bar{margin-top:clamp(22px,2.6vw,34px);padding-top:var(--sp-4);
  border-top:1px solid var(--line-dark);display:flex;align-items:center;
  gap:var(--sp-4);font-size:var(--fs-xs);color:var(--sage-light)}
.foot__legal{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.foot__legal i{width:1px;height:13px;background:var(--line-dark);display:inline-block}
.foot__mark{width:36px;height:auto;color:var(--gold-soft);opacity:.75;
  margin-inline:auto;flex:none}
.foot__right{display:grid;gap:var(--sp-1);justify-items:end;text-align:right}
.foot__tag{font-family:var(--serif);font-style:italic;color:var(--sage-light)}
.foot .foot__by{color:var(--sage-light);opacity:.6;white-space:nowrap;
  font-size:calc(var(--fs-xs) * .9)}
.foot__by:hover{opacity:1;color:var(--gold-soft)}
@media (max-width:719px){
  .foot__bar{flex-wrap:wrap;justify-content:flex-start}
  .foot__mark{margin-inline:0;order:3}
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* accrediting body: its mark beside its own description */
.accred{display:flex;gap:var(--sp-3);align-items:flex-start;
  padding-top:var(--sp-4);border-top:1px solid var(--line-2);max-width:46ch}
.accred img{width:64px;height:60px;flex:none;border-radius:6px}
.accred p{font-size:var(--fs-xs);line-height:1.6;color:var(--muted)}
.accred strong{color:var(--ink-2);font-weight:600}

/* ==========================================================================
   Certification and recognition — no cards or panels anywhere; the section is
   held together by hairlines and spacing, like every other block on the site.
   ========================================================================== */
.cert{background:var(--ivory);padding-block:clamp(52px,5.6vw,84px);--container:1380px}
.cert__grid{display:grid;gap:clamp(32px,4vw,60px)}
@media (min-width:1140px){
  .cert__grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(44px,4.4vw,84px);align-items:stretch}
  .cert__left,.cert__right{display:flex;flex-direction:column;min-width:0}
  .cert__left .iyttc{margin-top:auto}
  .cert__right .cert__panel{margin-top:auto}
}
.cert__h{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(2.5rem,1.4rem + 2.6vw,3.6rem);line-height:.99;
  letter-spacing:-.022em}

/* IYTTC — a hairline-separated block, not a card */
.iyttc{margin-top:clamp(24px,2.4vw,34px);padding-top:clamp(20px,2vw,28px);
  border-top:1px solid var(--line-2)}
.iyttc__top{display:flex;gap:var(--sp-4);align-items:flex-start}
.iyttc__mark{width:52px;height:49px;flex:none}
.iyttc__name{font-size:var(--fs-sm);font-weight:600;color:var(--ink);
  letter-spacing:.005em;line-height:1.35}
.iyttc__desc{font-size:var(--fs-xs);line-height:1.6;color:var(--muted);
  margin-top:var(--sp-2);max-width:52ch}
.iyttc__benefits{display:grid;gap:var(--sp-4);margin-top:clamp(20px,2vw,28px);
  padding-top:clamp(20px,2vw,28px);border-top:1px solid var(--line-2)}
@media (min-width:560px){
  .iyttc__benefits{grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(18px,1.8vw,30px)}
}
.ben__i{display:grid;place-items:center;width:34px;height:34px;
  color:var(--terracotta-fill)}
.ben__i svg{width:24px;height:24px}
.ben h4{font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--ink);margin-top:var(--sp-2);line-height:1.4;
  text-wrap:balance}
.ben p{font-size:var(--fs-xs);line-height:1.55;color:var(--muted);
  margin-top:var(--sp-1);text-wrap:pretty}

/* right side: photograph above, story below — no panel, no overlap */
.cert__pic{border-radius:var(--r);overflow:hidden;
  aspect-ratio:2.69;min-height:0}
.cert__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  display:block}
.cert__panel{margin-top:clamp(22px,2.2vw,32px)}
.cert__leaf{display:inline-block;color:var(--terracotta);width:32px;
  vertical-align:-.12em;margin-right:var(--sp-2)}
.cert__leaf svg{width:32px;height:24px;display:block}
.cert__ph{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.12rem,.74rem + .8vw,1.52rem);line-height:1.2;
  letter-spacing:-.018em;margin-top:var(--sp-3);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line-2)}
.cert__pb{font-size:var(--fs-sm);line-height:1.64;color:var(--ink-2);
  margin-top:var(--sp-3)}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;translate:0 14px;
    transition:opacity .7s var(--ease),translate .7s var(--ease)}
  .js [data-reveal].shown{opacity:1;translate:none}
}

/* ---- rating -------------------------------------------------------------
   Presentational only. Gold reads as a mark on the dark ground rather than a
   pile of yellow, so the stars are sized to the label, not oversized. */
.rating{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-3)}
.rating__stars{display:inline-flex;gap:3px;flex:none}
.rating__stars svg{width:16px;height:16px;fill:var(--gold);display:block}
.rating__n{font-size:var(--fs-sm);letter-spacing:.01em}
.rating__n strong{font-family:var(--ff-display);font-size:1.15em;font-weight:600;
  letter-spacing:.01em}
.g-olive .rating__n,.g-olive-deep .rating__n{color:var(--on-dark-2)}
.g-olive .rating__n strong,.g-olive-deep .rating__n strong{color:var(--gold)}
.g-cream .rating__n,.g-ivory .rating__n,.g-sand .rating__n{color:var(--muted)}
.g-cream .rating__n strong,.g-ivory .rating__n strong,.g-sand .rating__n strong{
  color:var(--gold-text)}
.g-cream .rating__stars svg,.g-ivory .rating__stars svg,.g-sand .rating__stars svg{
  fill:var(--gold-rule)}