/* Ascension of Intimacy: School of Tantra
   Palette and typefaces taken from the existing brand:
   #0e0706 ink, #f2e9d8 parchment, #41160f oxblood, Cormorant + Poppins. */

:root{
  --ink:#0e0706;
  --ink-2:#4a3b36;
  --ink-3:#7d6b64;
  --parchment:#f2e9d8;
  --parchment-2:#e8dcc6;
  /* the page ground: light beige, never white. .warm sections and panels
     use --parchment-2, the slightly darker beige */
  --paper:#f2e9d8;
  --oxblood:#41160f;
  --ember:#8c4a2f;
  --gilt:#c6a26b;
  --rule:#ddceb4;
  --rule-dark:#2a1a15;
  --measure:64ch;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --gap:clamp(3.5rem,9vw,7rem);
  /* drop from the nav to the first line of every hero */
  --hero-top:clamp(2.4rem,5.8vw,4.25rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  font-weight:300;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:"Cormorant","Cormorant Garamond",Georgia,serif;
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,7vw,4.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.1rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.6rem)}

p{margin:0 0 1.3em;max-width:var(--measure)}
/* An opening statement: a sentence or two in the heading face, where a section
   begins with an idea rather than a title. The same size as the pull quotes. */
.statement{
  font-family:"Cormorant",Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.3;
  color:var(--ink);max-width:46ch;margin-bottom:1.1em;
}
.dark .statement{color:var(--parchment)}
p:last-child{margin-bottom:0}
a{color:var(--oxblood);text-underline-offset:.18em}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:1140px;margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:760px;margin-inline:auto}

.eyebrow{
  font-family:"Poppins",sans-serif;
  font-size:.7rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ember);margin:0 0 1.4rem;
  max-width:none; /* one short line: without this it keeps the paragraph measure and sits off-centre in centred sections */
}

/* ── header ── */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(242,233,216,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-head .wrap{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.brand{
  font-family:"Cormorant",Georgia,serif;font-size:1.32rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;line-height:1.1;
}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.25rem;min-width:0}
.nav a{
  color:var(--ink-2);text-decoration:none;font-size:.8rem;letter-spacing:.09em;
  font-weight:500;text-transform:uppercase;padding:.4rem 0;border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ember)}
/* Login, or Logout once someone is signed in: the last thing in the menu */
.nav a.nav-login{border:1px solid var(--ink-2);padding:.4rem .95rem;margin-left:.3rem}
.nav a.nav-login:hover{background:var(--ink);color:var(--parchment);border-color:var(--ink)}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  padding:.55rem .8rem;cursor:pointer;color:var(--ink);font-size:1rem;border-radius:2px;
  align-items:center;gap:.6rem;
}
.nav-toggle-word{
  font-family:"Poppins",sans-serif;font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;padding-left:.22em;
}
.nav-toggle-icon{font-size:1.05rem;line-height:1}

/* ── buttons ── */
/* Lana's reference style, used for every button: a gilt border around a dark
   bronze fill that warms toward a glow at the bottom edge, cream lettering,
   and a fine arrow either side of the label. The fill is opaque, so it holds
   up on the parchment sections as well as over the photographs.
   .btn-solid and .btn-light are still in the markup but no longer differ. */
.btn,.dark .btn{
  --btn-track:.18em;
  display:inline-flex;align-items:center;justify-content:center;gap:.85rem;
  max-width:100%;padding:1rem 1.9rem;
  font-family:"Poppins",system-ui,sans-serif;font-size:.8rem;font-weight:400;
  line-height:1.35;letter-spacing:var(--btn-track);text-transform:uppercase;
  text-align:center;text-decoration:none;color:#f3e4c6;cursor:pointer;
  border:1px solid var(--gilt);border-radius:1px;
  background:
    linear-gradient(90deg,rgba(255,214,140,0) 18%,rgba(255,214,140,.85) 50%,rgba(255,214,140,0) 82%) bottom/100% 1px no-repeat,
    radial-gradient(85% 130% at 50% 118%,rgba(226,178,104,.45),rgba(226,178,104,0) 65%),
    linear-gradient(180deg,#2b190e,#4a2e18);
  box-shadow:inset 0 1px 0 rgba(255,226,170,.12),0 10px 26px -14px rgba(214,170,98,.65);
  transition:box-shadow .2s,filter .2s,color .2s;
}
.btn::before,.btn::after{
  content:"";flex:0 0 auto;width:1.35rem;height:.65rem;
  background-color:currentColor;opacity:.8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M.6 5h20.2M16.4 1.2 20.8 5l-4.4 3.8' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M.6 5h20.2M16.4 1.2 20.8 5l-4.4 3.8' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* letter-spacing trails the last letter; matching it on the left keeps the
   label centred between its arrows */
.btn::before{margin-right:var(--btn-track)}
.btn:hover,.dark .btn:hover{
  color:#fff4dc;filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,226,170,.18),0 12px 32px -12px rgba(226,178,104,.85);
}
.btn:focus-visible{outline-color:var(--gilt)}
@media (max-width:480px){
  .btn,.dark .btn{--btn-track:.13em;padding:.95rem 1.15rem;gap:.6rem}
  .btn::before,.btn::after{width:1rem}
}

/* ── sections ── */
section{padding:var(--gap) 0}
.dark{background:var(--ink);color:var(--parchment)}
.dark h1,.dark h2,.dark h3{color:var(--parchment)}
.dark p{color:#cbbba9}
.dark .eyebrow{color:#c08a6a}
.dark a{color:var(--parchment)}
.warm{background:var(--parchment-2)}

/* ── hero ── */
/* Every page opens the same way: eyebrow, headline, lede and any buttons
   centred on one axis. */
.hero{
  background:var(--ink);color:var(--parchment);
  padding:var(--hero-top) 0 clamp(4rem,10vw,7rem);
  text-align:center;
}
.hero h1{color:var(--parchment-2);max-width:16ch}
.hero .lede{
  font-size:clamp(1.05rem,1.9vw,1.22rem);color:#cbbba9;max-width:54ch;
  font-weight:300;margin-top:1.6rem;
}
.hero .eyebrow,.hero h1,.hero .lede{margin-inline:auto}
/* Larger and gilt here, unlike body sections, so it reads as the first line
   of the heading. letter-spacing trails the last letter; the left padding
   re-centres the visible word. */
.hero .eyebrow{font-size:.95rem;padding-left:.3em;color:var(--gilt)}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem}
.hero .hero-actions{justify-content:center}

/* ── promise list ── */
.promises{
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  border-top:1px solid var(--rule);
}
.promise{padding:2rem 2rem 2rem 0;border-bottom:1px solid var(--rule)}
.promise h3{margin-bottom:.4rem;font-size:1.28rem}
.promise p{font-size:.96rem;color:var(--ink-2);margin:0}

/* ── three doors ── */
.doors{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-top:3rem}
/* Panels take the other beige from the section they sit on: the darker one
   on light sections, the light one on .warm sections. */
.door{
  border:1px solid var(--rule);padding:2.2rem 2rem;background:var(--parchment-2);
  display:flex;flex-direction:column;
}
.warm .door{background:var(--paper)}
.door .tier{
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ember);margin-bottom:1rem;
}
.door h3{margin-bottom:.7rem}
.door p{font-size:.95rem;color:var(--ink-2);margin-bottom:1.6rem;flex:1}
.door .go{
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oxblood);text-decoration:none;border-bottom:1px solid var(--rule);
  padding-bottom:.35rem;align-self:flex-start;
}
.door .go:hover{border-bottom-color:var(--oxblood)}
/* a course card's photo runs to the card's edges, above its label */
/* The catalogue's cards alternate between two backgrounds: the usual sand, then a
   pale dusky grey blue at about the same lightness (a touch of violet, no green, so it
   sits warmly beside the sand), so the two read as one palette. */
.doors > .door:nth-child(even){background:#dcdfe6;border-color:#c3c7d3}
.door-photo{
  display:block;width:calc(100% + 4rem);max-width:none;margin:-2.2rem -2rem 1.6rem;
  aspect-ratio:3/2;object-fit:cover;background:var(--rule);
}
/* Cards in the same row share their lines: the label, the title, the text and the
   link each start at the same height across the row, so a label that wraps to
   two lines moves every title in that row down with it rather than only its
   own. (A browser without subgrid keeps the plain stacked card above.) */
@supports (grid-template-rows: subgrid) {
  .doors > .door{
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-row:span 5;grid-template-rows:subgrid;row-gap:0;
  }
  .doors > .door > .door-photo{grid-row:1}
  .doors > .door > .tier{grid-row:2}
  .doors > .door > h3{grid-row:3}
  .doors > .door > p,.doors > .door > .door-text{grid-row:4}
  .doors > .door > .go{grid-row:5;align-self:start;justify-self:start}
}

/* The courses introduction, in two columns on the featured banner's grid
   below: the statement over its photo, the paragraph starting exactly where
   the banner's text starts. Each keeps a comfortable line length, about 35
   to 40 characters for the large statement and about 60 for the paragraph,
   where a single full-width line ran to 117. Narrower screens stack them. */
.catalogue-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.catalogue-intro .eyebrow{grid-column:1 / -1}
.catalogue-intro .statement{max-width:none;margin:0;padding-right:clamp(1rem,2vw,1.6rem)}
.catalogue-intro .statement + p{max-width:none;margin:0;padding:.7rem 0 0 clamp(1.8rem,4vw,2.8rem)}
@media (max-width:980px){
  .catalogue-intro{display:block}
  .catalogue-intro .statement{padding-right:0;margin-bottom:1.1em;max-width:46ch}
  .catalogue-intro .statement + p{padding:0;max-width:60ch}
}

/* ── the featured course: a banner above the catalogue ── */
.course-feature-slot[hidden]{display:none}
/* It is set apart from the cards: a gilt strip across the top that always
   says "Featured course", a heavier gilt border with a halo, and a fine
   frame set in from it. The popup wears the same. */
.course-feature{
  --flag-h:2.7rem;
  position:relative;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);margin-top:2.5rem;
  background:var(--ink);color:var(--parchment);
  border:2px solid var(--gilt);border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 6px rgba(198,162,107,.2),0 22px 56px rgba(14,7,6,.2),0 0 54px rgba(198,162,107,.22);
}
.course-feature::after,.course-pop .offer-box::after{
  content:"";position:absolute;left:7px;right:7px;bottom:7px;top:calc(var(--flag-h, 2.7rem) + 7px);
  border:1px solid rgba(198,162,107,.5);border-radius:10px;pointer-events:none;
}
.course-feature-flag{
  grid-column:1 / -1;height:var(--flag-h, 2.7rem);margin:0;
  display:flex;align-items:center;justify-content:center;gap:1rem;
  background:linear-gradient(90deg,#b08a4a 0%,#e8d2a0 50%,#b08a4a 100%);
  color:var(--ink);font-size:.74rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  padding-left:.34em;border-bottom:1px solid rgba(14,7,6,.35);
}
.course-feature-flag::before,.course-feature-flag::after{
  content:"";flex:none;width:7px;height:7px;border:1.5px solid var(--ink);transform:rotate(45deg);
}
.course-feature.no-media{grid-template-columns:1fr}
.course-feature-media{position:relative;min-height:280px;background:#1d1210}
.course-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.course-feature-body{padding:clamp(1.8rem,4vw,2.8rem);align-self:center}
.course-feature-heading{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gilt);margin:0 0 .9rem;
}
.course-feature h2{color:var(--parchment);font-size:clamp(1.9rem,3.4vw,2.6rem);margin:0 0 .9rem}
.course-feature p:not(.course-feature-heading){color:#cbbba9;font-size:1rem}
.course-feature .hero-actions{margin-top:1.6rem}
@media (max-width:760px){
  .course-feature{grid-template-columns:1fr}
  .course-feature-media{min-height:0;aspect-ratio:16/9}
}

/* "Explore Our Courses": the title over the cards, under the featured course */
.catalogue-title{
  margin:clamp(2.8rem,6vw,3.8rem) auto 0;text-align:center;max-width:none;
  font-size:clamp(2rem,4.4vw,2.9rem);
}
.catalogue-title + .hero-rule{margin:1rem auto 0}

/* The closing note under the courses: centred, in a reading column. */
.living-practice{max-width:62ch;margin:clamp(3.2rem,7vw,5rem) auto 0;text-align:center}
.living-practice .eyebrow{padding-left:.3em}
.living-practice p{margin-left:auto;margin-right:auto}
.living-practice .statement{margin-top:1.6rem;margin-bottom:0;max-width:none;font-style:italic}

/* A YouTube video in a section of a course page, as wide as its column. */
.course-video{
  position:relative;aspect-ratio:16/9;margin:1.8rem 0;background:var(--ink);
  border:1px solid rgba(198,162,107,.5);border-radius:10px;overflow:hidden;
}
.course-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* a section that is only a photo: shown whole, not cropped, with less space around it */
.solo-image{padding-block:clamp(1.5rem,4vw,3rem)}
.solo-image figure{margin:0}
.solo-image img{display:block;width:100%;height:auto}

/* ── a course's own page (/courses/<slug>, rendered by the app) ── */
.preview-bar{
  margin:0;max-width:none;padding:.7rem var(--pad);text-align:center;font-size:.86rem;
  background:#f6e3a8;color:var(--ink);border-bottom:1px solid #e3c86e;
}
.preview-bar a{color:var(--oxblood);font-weight:500}
.hero-course h1{max-width:20ch}
/* A heading or tagline written with | where it may break (richtext.phrases): every phrase stays whole, so it
   breaks only between phrases, on one line when it fits; the line may be as wide as the page allows. */
.ph,.ph-group{display:inline-block;max-width:100%}
.hero h1.has-phrases,.hero .lede.has-phrases{max-width:none}
.hero-note{
  color:#e3d6c4;font-size:clamp(1rem,1.7vw,1.12rem);line-height:1.65;
  max-width:52ch;margin:1.2rem auto 0;
}
.hero-note + .hero-note{margin-top:.8rem}
.course-group-head{margin-bottom:2.4rem}
.course-group-head.centered{text-align:center}
.course-group-head h2{margin-bottom:0}

/* modules, parts and weeks: image beside text, alternating sides */
.course-modules{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.course-module{
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem 3rem;
  padding:clamp(2rem,4.5vw,3.2rem) 0;border-bottom:1px solid var(--rule);
}
.course-module.has-image{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.course-module.has-image:nth-child(even) .course-module-img{order:2}
.course-module-img{margin:0;overflow:hidden;border-radius:10px;border:1px solid rgba(198,162,107,.5)}
.course-module-img img{display:block;width:100%;height:auto}
.course-module-body h3{font-size:clamp(1.5rem,2.8vw,2rem);margin:0 0 .4rem}
.course-module-body .eyebrow{margin-bottom:.8rem}
.course-module-sub{
  font-family:"Cormorant",Georgia,serif;font-style:italic;font-size:clamp(1.15rem,2vw,1.35rem);
  color:var(--ember);margin:0 0 1.1rem;
}
.course-module-body p{color:var(--ink-2)}
.course-module-body ul.clean{margin-top:-.3rem}
@media (max-width:760px){
  .course-module.has-image{grid-template-columns:minmax(0,1fr)}
  .course-module.has-image:nth-child(even) .course-module-img{order:0}
}

/* lists: gilt checkmarks; long ones in two columns */
/* a titled bullet: its title on a line of its own, above the description */
.li-title{display:block;color:var(--ink);font-weight:500}
ul.course-checks{list-style:none;padding-left:0}
ul.course-checks li{position:relative;padding-left:1.7rem}
ul.course-checks li::before{
  content:"";position:absolute;left:0;top:.55em;width:.75rem;height:.4rem;
  border-left:1.5px solid var(--gilt);border-bottom:1.5px solid var(--gilt);transform:rotate(-45deg);
}
ul.course-checks.cols{columns:2 280px;column-gap:2.5rem}
ul.course-checks.cols li{break-inside:avoid}
.course-cards{margin-top:1.8rem}

/* price options side by side, centred */
.course-prices{justify-content:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),380px))}
.course-prices .price{display:flex;flex-direction:column;align-items:flex-start}
.course-prices .price .btn{margin-top:auto}
.course-prices .price ul.clean{margin:.2rem 0 1.4rem}
.course-prices .price .amount + .btn{margin-top:.4rem}
/* One price option alone: a centred card, not a bar across the whole page. */
.prices.course-prices:has(> .price:only-child){grid-template-columns:minmax(0,520px);justify-content:center}

/* testimonials on a course page: smaller portraits than the Testimonials page */
.course-quotes{margin-top:0}
.course-quotes .testimonial-photo{width:120px;height:120px;margin-bottom:.9rem}

/* the featured course as a popup: the free-practice dialog's look */
.course-pop .offer-box{
  --flag-h:2.7rem;
  border:2px solid var(--gilt);border-radius:16px;
  box-shadow:0 0 0 6px rgba(198,162,107,.22),0 30px 80px rgba(14,7,6,.5);
}
.course-pop .offer-box.no-media{grid-template-columns:1fr;width:min(640px,100%)}
.course-pop .offer-close{top:.2rem;right:.4rem;z-index:2}
.course-pop .offer-media{min-height:280px}
.course-pop .offer-box:focus{outline:none}
.course-pop .offer-body .hero-actions{margin-top:1.4rem}

/* ── tasting room ── */
.tastes{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:2.8rem}
.taste{border:1px solid rgba(242,233,216,.22);padding:1.9rem 1.7rem}
.taste .kind{
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:#c08a6a;margin-bottom:.8rem;
}
.taste h3{font-size:1.35rem;margin-bottom:.4rem}
.taste .dur{font-size:.8rem;color:#9a8878;letter-spacing:.06em;margin-bottom:.9rem}
.taste p{font-size:.92rem;margin:0}

/* ── testimonials ── */
.quotes{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:3rem}
blockquote{
  margin:0;padding-left:1.6rem;border-left:2px solid var(--rule);
}
blockquote p{
  font-family:"Cormorant",Georgia,serif;font-size:1.28rem;line-height:1.5;
  color:var(--ink);margin-bottom:1rem;
}
blockquote cite{
  font-style:normal;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ── signup ── */
.signup{max-width:560px}
.signup form{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1.6rem}
/* name and email side by side where there is room, then the button, then the consent, all centred */
.signup input[type=email],.signup input[type=text]{
  flex:1 1 220px;font:inherit;font-size:.95rem;padding:.95rem 1rem;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);
}
.signup input[type=email]:focus,.signup input[type=text]:focus{outline:2px solid var(--ember);outline-offset:1px}
.consent{display:flex;gap:.6rem;align-items:flex-start;justify-content:center;margin-top:1rem;font-size:.8rem;color:var(--ink-3)}
.signup .consent{flex:0 1 auto;max-width:min(100%,25rem);text-align:left}  /* a compact block, centred by the form */
.signup .form-status{flex:1 1 100%;text-align:center;margin:0}
.consent a{color:var(--ink-2)}

/* ── cookie notice (shown only when tracking is on and visitors are asked) ── */
.consent-bar{
  position:fixed;left:1rem;bottom:1rem;z-index:9000;max-width:min(560px,calc(100vw - 2rem));
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;
  padding:.9rem 1.1rem;background:var(--ink);color:var(--parchment);
  border:1px solid rgba(198,162,107,.55);border-radius:12px;box-shadow:0 14px 40px rgba(14,7,6,.35);
  font-size:.86rem;line-height:1.5;
}
.consent-bar p{margin:0;max-width:none;flex:1 1 260px;color:#cbbba9}
.consent-bar a{color:var(--parchment)}
.consent-actions{display:flex;gap:.5rem;margin-left:auto}
.consent-actions button{
  font:inherit;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  padding:.55rem 1rem;border-radius:6px;border:1px solid rgba(242,233,216,.45);
  background:none;color:var(--parchment);
}
.consent-actions button[data-choice="yes"]{background:var(--gilt);border-color:var(--gilt);color:var(--ink);font-weight:600}
.consent-actions button:focus-visible{outline:2px solid var(--parchment);outline-offset:2px}
@media (max-width:560px){.consent-bar{left:.6rem;right:.6rem;bottom:.6rem;max-width:none}}
.foot-social{margin:.7rem 0 0;font-size:.86rem}
.foot-social a{margin-right:1rem}

/* ── footer ── */
.site-foot{background:var(--ink);color:#9a8878;padding:4rem 0 2.5rem;font-size:.9rem}
.site-foot a{color:var(--parchment);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* the column headings: larger and bolder than the links under them, in gilt with a fine rule */
.foot-grid h4{
  font-family:"Poppins",sans-serif;color:var(--gilt);
  font-size:.88rem;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 1.2rem;padding-bottom:.75rem;font-weight:600;line-height:1.3;
  border-bottom:1px solid rgba(198,162,107,.38);
}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-bottom{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(242,233,216,.14);
  font-size:.78rem;letter-spacing:.04em;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
}

/* ── focus ── */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--ember);outline-offset:3px;
}

/* ── mobile ── */
/* The menu collapses at 1260px, not 1000px: six items beside the enlarged
   lockup only sit on one row with comfortable clear space above that width. */
@media (max-width:1260px){
  .nav-toggle{display:inline-flex}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--parchment);border-bottom:1px solid var(--rule);
    padding:.5rem var(--pad) 1.2rem;
  }
  .nav.open{display:flex}
  .nav a{padding:.9rem 0;border-bottom:1px solid var(--rule)}
  .nav a:last-child{border-bottom:none}
  .nav a.nav-login{border:0;border-bottom:none;padding:.9rem 0;margin-left:0}
  .nav a.nav-login:hover{background:none;color:var(--ink)}
}
/* A signed-in member has one more item in the menu (My library, beside Logout). They need
   more room than the menu has until the screen is wider, so for them it folds into the Menu button sooner. */
@media (max-width:1500px){
  .site-head.has-extra .nav-toggle{display:inline-flex}
  .site-head.has-extra .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--parchment);border-bottom:1px solid var(--rule);
    padding:.5rem var(--pad) 1.2rem;
  }
  .site-head.has-extra .nav.open{display:flex}
  .site-head.has-extra .nav a{padding:.9rem 0;border-bottom:1px solid var(--rule)}
  .site-head.has-extra .nav a:last-child{border-bottom:none}
  .site-head.has-extra .nav a.nav-login{border:0;border-bottom:none;padding:.9rem 0;margin-left:0}
  .site-head.has-extra .nav a.nav-login:hover{background:none;color:var(--ink)}
}
@media (max-width:1000px){
  .promise{padding-right:0}
}

/* ── utility ── */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── definition lists (facts / practicalities) ── */
.facts{margin:2rem 0 0;display:grid;gap:0}
.facts > div{
  display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:.4rem 1.5rem;
  padding:1rem 0;border-top:1px solid var(--rule);
}
.facts > div:last-child{border-bottom:1px solid var(--rule)}
.facts > div[hidden]{display:none} /* a row waiting on a setting, e.g. a price not yet decided */
.facts dt{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);padding-top:.25rem;
}
.facts dd{margin:0;color:var(--ink-2);font-size:.97rem}

/* ── plain lists inside prose ── */
ul.clean{margin:0 0 1.3em;padding-left:1.2rem;color:var(--ink-2)}
ul.clean li{margin-bottom:.55rem;max-width:var(--measure)}
ul.clean li:last-child{margin-bottom:0}
.dark ul.clean li{color:#cbbba9}

/* ── long-form testimonials ── */
/* Columns rather than a grid: written testimonials run long and videos are
   short, and a grid would leave gaps under every video beside a long one. */
.testimonials{margin-top:2.5rem;columns:3 320px;column-gap:2.5rem}
.testimonials > .testimonial,.testimonials > .video-card{break-inside:avoid;margin:0 0 2.5rem}
.testimonial{
  margin:0;padding:1.8rem 1.9rem;background:var(--parchment-2);
  border-left:3px solid var(--oxblood);
}
.testimonial p{
  font-size:1rem;line-height:1.72;color:var(--ink-2);
  font-family:"Poppins",sans-serif;margin-bottom:1em;max-width:none;
}
.testimonial cite{
  display:block;margin-top:1.2rem;font-style:normal;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
/* the author heads the card: portrait, then name, program and place, centred
   above a fine gilt rule, and then their words */
.testimonial-by{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-bottom:1.6rem;padding-bottom:1.6rem;border-bottom:1px solid rgba(198,162,107,.5);
}
.testimonial-photo{
  width:192px;height:192px;max-width:100%;margin-bottom:1.2rem;
  border-radius:50%;object-fit:cover;background:var(--parchment);
  border:1px solid var(--gilt);
  box-shadow:0 0 0 6px var(--parchment-2),0 0 0 7px rgba(198,162,107,.45);
}

/* name · program · place, wherever a testimonial is credited */
/* .testimonial cite (above) styles an older plain credit; the byline must win */
cite.byline,.testimonial cite.byline{
  display:block;margin:0;font-style:normal;font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink);
}
.byline-name{
  display:block;font-family:"Cormorant",Georgia,serif;font-weight:500;
  font-size:1.5rem;line-height:1.2;color:var(--ink);
}
.byline-program{
  display:block;margin-top:.5rem;
  font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ember);
}
.byline-detail{display:block;margin-top:.3rem;font-size:.8rem;line-height:1.5;color:var(--ink-3)}

/* ── forms ── */
.form{display:grid;gap:1.2rem;max-width:520px;margin-top:1.5rem}
/* A section given over to one form: the column is exactly the form's width,
   so the heading and fields share one centred axis under the hero. */
.form-column{max-width:calc(520px + 2 * var(--pad))}
.field{display:grid;gap:.4rem}
.field label{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.field input,.field textarea,.field select{
  font:inherit;font-size:.96rem;padding:.75rem .85rem;
  border:1px solid var(--rule);background:var(--parchment-2);color:var(--ink);width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--ember);outline-offset:1px;
}
.field textarea{resize:vertical}
.form-note{font-size:.86rem;color:var(--ink-3);margin:0}
.form-status{font-size:.93rem;margin:0;min-height:1.4em}

/* ── the members' area ── */
.form-note.ok{color:#2e6b48}
.form-note.error{color:#a3261b}
.form-note.error p{margin:0 0 .3rem}
.member-remember{justify-content:flex-start;margin-top:0;font-size:.88rem}
.members-bar{
  margin:0;max-width:none;padding:.6rem var(--pad);text-align:center;font-size:.86rem;
  background:var(--parchment-2);color:var(--ink-2);border-bottom:1px solid var(--rule);
}
.members-bar a{color:var(--oxblood);font-weight:500}
.members-bar form{display:inline}
.linklike{font:inherit;font-weight:500;color:var(--oxblood);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.member-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.member-card{
  display:block;padding:1.5rem 1.6rem;border:1px solid var(--rule);background:var(--paper);
  color:var(--ink);text-decoration:none;
}
.member-card:hover{border-color:var(--ember)}
.member-card h3{margin:.2rem 0 .5rem}
.member-card p{margin:0;font-size:.95rem;color:var(--ink-2)}
.member-recent{list-style:none;padding:0;margin:1rem 0 0;font-size:.92rem}
.member-recent li{display:flex;flex-wrap:wrap;gap:.2rem 1rem;padding:.55rem 0;border-bottom:1px solid var(--rule)}
.member-recent span{color:var(--ink-3)}

/* ── the shop, the cart and the payment ── */
.shop-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.shop-card{border:1px solid var(--rule);background:var(--paper);display:flex;flex-direction:column}
.shop-photo{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.shop-body{padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.shop-body h3{margin:0}
.shop-body p{margin:0;font-size:.95rem;color:var(--ink-2)}
.shop-price{font-family:var(--serif,inherit);font-size:1.5rem;color:var(--ink)!important;margin-top:.4rem!important}
.shop-body form{margin-top:.4rem}
.shop-body .go{margin-top:.2rem}
.cart-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:820px){.cart-grid{grid-template-columns:1fr}.cart-summary{order:-1}}
.cart-info .form{max-width:none;margin-top:1rem}
.cart-summary{border:1px solid var(--rule);background:var(--paper);padding:1.4rem 1.6rem}
.cart-summary.solo{margin-bottom:2rem}
.cart-summary h2{margin-top:0;font-size:1.4rem}
.cart-line{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--rule)}
.cart-what{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}
.cart-what span{font-size:.88rem;color:var(--ink-3)}
.cart-price{white-space:nowrap;font-weight:500}
.cart-coupon{padding:1rem 0;border-bottom:1px solid var(--rule)}
.cart-coupon label{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.cart-coupon-row{display:flex;gap:.6rem}
.cart-coupon-row input{flex:1;font:inherit;padding:.6rem .75rem;border:1px solid var(--rule);background:var(--parchment-2);text-transform:uppercase}
.cart-totals{margin:.8rem 0 0}
.cart-totals div{display:flex;justify-content:space-between;padding:.35rem 0}
.cart-totals dt,.cart-totals dd{margin:0}
.cart-total{font-size:1.2rem;font-weight:600;border-top:1px solid var(--ink);margin-top:.4rem;padding-top:.7rem!important}
.test-banner{background:#f6e3a8;color:var(--ink);padding:.6rem .8rem;border:1px solid #e3c86e}
#payment-element{margin:.4rem 0 1rem}

/* the three steps, above the cart and the checkout */
.buy-steps{list-style:none;display:flex;gap:.5rem 1.8rem;flex-wrap:wrap;justify-content:center;padding:0;margin:0 0 2.2rem;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.buy-steps li{display:flex;align-items:center;gap:.55rem}
.buy-steps span{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border:1px solid var(--rule);border-radius:50%;letter-spacing:0}
.buy-steps .done{color:var(--ink-2)}
.buy-steps .done span{background:var(--parchment-2);border-color:var(--ink-3)}
.buy-steps .now{color:var(--ink);font-weight:600}
.buy-steps .now span{background:var(--oxblood);border-color:var(--oxblood);color:var(--parchment)}

/* the cart: the latest added on top */
.cart-page .cart-summary{order:0}
.cart-added{margin:0 0 1.4rem;padding:.7rem 1rem;background:#e7f1e9;border:1px solid #b9d6c1}
.cart-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.cart-head h2{margin:0}
.cart-sub{margin:1.2rem 0 .5rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cart-item{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem;border:1px solid var(--rule);background:var(--paper);margin-bottom:.7rem}
.cart-item .cart-what{flex:1;min-width:0}
.cart-item.just-added{border-color:var(--ember);background:#f6ecd9;box-shadow:inset 4px 0 0 var(--ember)}
.cart-thumb{width:88px;height:66px;object-fit:cover;flex:none;display:block}
.cart-more{margin:1.4rem 0 0}
.checkout-wide{display:block;width:100%;text-align:center;margin-top:1.2rem}
.cart-secure{margin-top:.8rem}
.cart-bar{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:.8rem 1.1rem;
  border:1px solid var(--rule);background:var(--paper);margin:0 0 1.6rem}
.cart-coupon .form-note{display:block;margin-top:.5rem}
#coupon-note{margin:0}

/* the checkout: details and card on one page */
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.two-up{grid-template-columns:1fr}}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#a3261b;background:#fbeeea}
.form-errors{border:1px solid #a3261b;background:#fbeeea;color:#7a1b12;padding:.8rem 1rem;margin:0 0 1.2rem;font-size:.9rem}
.form-errors p{margin:0 0 .3rem;font-weight:500}
.form-errors ul{margin:0;padding-left:1.1rem}
.form-errors a{color:#7a1b12}
.form-errors:focus{outline:2px solid #a3261b;outline-offset:2px}
#note-count{text-align:right}
#note-count.over{color:#a3261b}
.pay-row{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ══ imagery, merged from Lana's development site ══════════════════════ */

/* ── logo in the header and footer ── */
.brand-mark{display:flex;align-items:center;padding:.35rem 0}
.brand-mark img{height:46px;width:auto}
.foot-logo{height:54px;width:auto;filter:brightness(0) invert(1);opacity:.92}

/* ── hero with its supporting list ── */
/* Centred lines rather than bullets, each introduced by a gilt rule with a
   diamond at its centre, as in the reference design. */
/* The homepage hero's two paragraphs under its button. */
.hero-home .hero-intro{max-width:56ch;margin-inline:auto}
.hero-home .hero-intro + .hero-rule{margin:1.6rem auto 1.4rem}
.hero-home .hero-rule + .hero-intro{margin-top:0;font-size:clamp(.98rem,1.6vw,1.08rem);color:#bfae9c}

/* ── homepage: six possibilities, under the hero ──
   A dark band continuing from the hero, holding a deeper panel with a gilt
   edge. The points run down two columns (three each, rows aligned), set in
   Cormorant italic, each after a small gilt sun ring; the hero's diamond
   rule opens and closes the panel. */
.possibilities{background:#1a100d;padding:clamp(2.6rem,6vw,4.5rem) 0}
.possibilities-panel{
  position:relative;max-width:1060px;margin:0 auto;
  padding:clamp(2rem,4.5vw,3.4rem) clamp(1.4rem,5vw,4.5rem);
  background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(198,162,107,.09),transparent 70%),#0b0605;
  border:1px solid rgba(198,162,107,.62);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 0 0 1px rgba(198,162,107,.06);
}
.possibilities-panel .hero-rule{margin:0 auto}
/* its title, lettered in gilt like the course covers' titles */
.possibilities-title{
  margin:0 auto clamp(1rem,2.2vw,1.4rem);max-width:24ch;text-align:center;
  font-size:clamp(1.9rem,3.6vw,2.75rem);line-height:1.15;letter-spacing:.005em;color:#ead9b8;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .possibilities-title{
    background:linear-gradient(180deg,#f6e7c8 0%,#e3c895 55%,#c6a26b 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.possibilities-list{
  list-style:none;margin:clamp(1.6rem,3.5vw,2.4rem) 0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-auto-flow:column;grid-template-rows:repeat(3,auto);gap:1.35rem clamp(2rem,5vw,4rem);
  position:relative;
}
/* a faint gilt hairline between the columns, fading at both ends */
.possibilities-list::after{
  content:"";position:absolute;top:.4rem;bottom:.4rem;left:50%;width:1px;
  background:linear-gradient(rgba(198,162,107,0),rgba(198,162,107,.35) 20%,rgba(198,162,107,.35) 80%,rgba(198,162,107,0));
}
.possibilities-list li{
  position:relative;padding-left:2.1rem;max-width:none;
  font-family:"Cormorant","Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.14rem,1.55vw,1.3rem);line-height:1.62;color:#e2d2b6;text-wrap:pretty;
}
/* the sun ring: a gilt circle with a point at its centre */
.possibilities-list li::before{
  content:"";position:absolute;left:0;top:.42em;width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--gilt);
  background:radial-gradient(circle,var(--gilt) 0 2px,transparent 2.5px);
  box-shadow:0 0 10px rgba(198,162,107,.35);
}
@media (max-width:760px){
  .possibilities-list{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-rows:none;gap:1.15rem}
  .possibilities-list::after{display:none}
  .possibilities-list li{padding-left:1.8rem}
}
.hero-list{
  list-style:none;margin:2.2rem auto 0;padding:0;display:grid;gap:1.3rem;max-width:56ch;
  text-align:center;
}
.hero-list li{color:#cbbba9;font-size:.98rem;line-height:1.6}
.hero-list li::before{
  content:"";display:block;width:180px;height:12px;margin:0 auto .9rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 12'%3E%3Cdefs%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-color='%23c6a26b' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23c6a26b'/%3E%3C/linearGradient%3E%3ClinearGradient id='b'%3E%3Cstop offset='0' stop-color='%23c6a26b'/%3E%3Cstop offset='1' stop-color='%23c6a26b' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5.5' width='78' height='1' fill='url(%23a)'/%3E%3Crect x='102' y='5.5' width='78' height='1' fill='url(%23b)'/%3E%3Cpath d='M90 1.5 94.5 6 90 10.5 85.5 6Z' fill='none' stroke='%23c6a26b'/%3E%3Cpath d='M90 4.6 91.4 6 90 7.4 88.6 6Z' fill='%23c6a26b'/%3E%3C/svg%3E") center/180px 12px no-repeat;
}

/* a text that follows a run of these lines in a section sits clear of the last one */
.centered .hero-list + p{margin-top:2.6rem}

/* The same gilt rule on its own, between a hero title and its line. */
.hero-rule{
  height:12px;margin:1.5rem auto 1.6rem;max-width:180px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 12'%3E%3Cdefs%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-color='%23c6a26b' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23c6a26b'/%3E%3C/linearGradient%3E%3ClinearGradient id='b'%3E%3Cstop offset='0' stop-color='%23c6a26b'/%3E%3Cstop offset='1' stop-color='%23c6a26b' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5.5' width='78' height='1' fill='url(%23a)'/%3E%3Crect x='102' y='5.5' width='78' height='1' fill='url(%23b)'/%3E%3Cpath d='M90 1.5 94.5 6 90 10.5 85.5 6Z' fill='none' stroke='%23c6a26b'/%3E%3Cpath d='M90 4.6 91.4 6 90 7.4 88.6 6Z' fill='%23c6a26b'/%3E%3C/svg%3E") center/180px 12px no-repeat;
}

/* Courses: a title set like the reference artwork, over a lighter veil so the
   photograph behind it still reads. */
.hero-courses h1{
  text-transform:uppercase;letter-spacing:.07em;font-weight:400;
  color:var(--parchment);max-width:none;
  text-shadow:0 2px 10px rgba(14,7,6,.85),0 2px 34px rgba(14,7,6,.65);
}
.hero-courses .lede{
  font-family:"Cormorant",Georgia,serif;font-size:clamp(1.3rem,2.4vw,1.75rem);
  color:var(--parchment);margin-top:0;text-shadow:0 2px 10px rgba(14,7,6,.85),0 2px 30px rgba(14,7,6,.6);
}
/* A much lighter veil than other heroes: this artwork is the point, and its
   own centre is already dark enough to carry cream lettering. */
.hero-courses{
  background-image:
    linear-gradient(90deg, rgba(14,7,6,.12) 0%, rgba(14,7,6,.34) 28%,
                    rgba(14,7,6,.34) 72%, rgba(14,7,6,.12) 100%),
    var(--photo);
}
@media (max-width:760px){
  .hero-courses{background-image:linear-gradient(rgba(14,7,6,.46),rgba(14,7,6,.46)),var(--photo)}
}

/* ── image beside text ── */
.split-media{
  display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
}
.split-media.reverse .split-media-img{order:2}
.split-media-img{margin:0;overflow:hidden}
.split-media-img img{width:100%;height:auto;display:block}
.split-media-body p{max-width:56ch}
.tag{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);margin-bottom:1.2rem;
}
.dark .tag{color:#c08a6a}

/* ── image cards (tasting room, programmes) ── */
.cards{
  display:grid;gap:1.8rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.card-media{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--parchment-2);border:1px solid var(--rule);
}
.warm .card-media{background:var(--paper)}
.dark .card-media{background:rgba(242,233,216,.04);border-color:rgba(242,233,216,.18)}
.card-photo{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
/* The three programmes were drawn as landscape pictures, so they are not
   cropped to the Tasting Room's portrait. 4:3 is what two of them are. */
.cards.programs .card-photo{aspect-ratio:4/3;object-position:center 40%}
.card-body{padding:1.7rem 1.6rem;display:flex;flex-direction:column;flex:1;position:relative}
.card-mark{
  width:52px;height:52px;object-fit:contain;
  margin:-3.4rem 0 1rem;position:relative;
  background:var(--ink);border-radius:50%;padding:8px;
}
.card-media .tier{
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ember);margin-bottom:.7rem;
}
.dark .card-media .tier{color:#c08a6a}
.card-media h3{margin-bottom:.7rem;font-size:1.42rem}
.card-media p{font-size:.95rem;color:var(--ink-2);margin-bottom:1.4rem;max-width:none}
.dark .card-media p{color:#cbbba9}
.card-media .go{
  margin-top:auto;align-self:flex-start;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oxblood);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:.35rem;
}
.dark .card-media .go{color:var(--parchment);border-bottom-color:rgba(242,233,216,.3)}
.card-media .go:hover{border-bottom-color:currentColor}

/* ── large pull quotes ── */
.pullquotes{
  display:grid;gap:2.5rem;margin:3rem 0 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.pullquotes blockquote{margin:0;padding:0;border:none}
.pullquotes blockquote p{
  font-family:"Cormorant",Georgia,serif;
  font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.28;
  color:var(--ink);margin:0 0 1.3rem;max-width:none;
}
.pullquotes blockquote p::before{content:"\201C"}
.pullquotes blockquote p::after{content:"\201D"}
.pullquotes cite{
  font-style:normal;display:block;
  font-size:.86rem;letter-spacing:.04em;color:var(--ink);
}
.pullquotes cite span{
  display:block;margin-top:.2rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}

/* ── video testimonials ──
   Cards are filled from /api/testimonials by site.js; the markup carries a
   fallback set. Hidden while the fresh selection loads, and shown regardless
   after three seconds so a failed script never leaves a gap. */
[data-testimonial-videos],[data-testimonial-wall],[data-course-list]{transition:opacity .45s ease}
[data-testimonial-videos].is-loading,[data-testimonial-wall].is-loading,[data-course-list].is-loading{
  opacity:0;animation:testimonials-reveal 0s 3s forwards;
}
@keyframes testimonials-reveal{to{opacity:1}}

.video-row{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);margin:3rem 0 2.5rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:860px){
  .video-row{grid-template-columns:minmax(0,460px);justify-content:center}
}
.video-card{margin:0}
.video-thumb{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-radius:10px;border:1px solid rgba(198,162,107,.6);background:var(--ink);
}
.video-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) brightness(.84);transition:transform .6s ease,filter .6s ease;
}
.video-thumb::before{
  content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;border:1px solid var(--gilt);background:rgba(14,7,6,.55);
  box-shadow:0 6px 24px rgba(14,7,6,.35);transition:background .3s ease,transform .3s ease;
  z-index:1; /* the image's filter gives it its own layer; keep the disc above it */
}
.video-thumb::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:21px;margin:-10.5px 0 0 -6px;
  background:var(--parchment);clip-path:polygon(0 0,100% 50%,0 100%);z-index:2;
}
.video-thumb:hover img,.video-thumb:focus-visible img{transform:scale(1.04);filter:saturate(1) brightness(.95)}
.video-thumb:hover::before,.video-thumb:focus-visible::before{background:var(--oxblood);transform:scale(1.07)}
.video-card figcaption{padding-top:1.15rem;text-align:center}
.video-card figcaption p{
  font-family:"Cormorant",Georgia,serif;font-size:clamp(1.25rem,1.9vw,1.45rem);line-height:1.3;
  color:var(--ink);margin:.8rem auto 0;max-width:32ch;
}
.video-card .byline-name{font-size:1.3rem}
/* On the Testimonials page a video sits among the written cards, so it wears
   the same card. */
.testimonials .video-card{background:var(--parchment-2);border-left:3px solid var(--oxblood)}
.testimonials .video-thumb{border:0;border-radius:0}
.testimonials .video-card figcaption{padding:1.4rem 1.9rem 1.7rem}
.testimonials .video-card figcaption p{margin:1rem auto 0;max-width:none}
.testimonials .video-card .byline-name{font-size:1.5rem}

/* The player. Above the free-offer dialog (9990), below the terms (9997). */
html.video-open{overflow:hidden}
.video-modal{
  position:fixed;inset:0;z-index:9995;display:flex;align-items:center;justify-content:center;
  padding:clamp(.75rem,4vw,2.5rem);background:rgba(14,7,6,.84);
}
.video-modal[hidden]{display:none}
.video-box{
  width:min(1000px,100%,calc((100vh - 9rem) * 16 / 9));
  background:var(--ink);border:1px solid var(--gilt);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.video-bar{display:flex;align-items:center;gap:1rem;padding:.55rem .6rem .55rem 1.3rem}
.video-caption{margin:0;max-width:none;flex:1;min-width:0;color:var(--parchment);font-size:.92rem}
.video-caption strong{font-weight:500;letter-spacing:.03em}
.video-caption span{
  margin-left:.7rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gilt);
}
.video-close{
  flex:none;background:none;border:0;cursor:pointer;padding:.2rem .55rem;
  font-size:1.9rem;line-height:1;color:var(--parchment);
}
.video-close:hover,.video-close:focus-visible{color:var(--gilt)}
.video-frame{position:relative;aspect-ratio:16/9;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:560px){.video-caption span{display:block;margin:.15rem 0 0}}

/* ── dark signup ── */
.dark .signup input[type=email],.dark .signup input[type=text]{
  background:rgba(242,233,216,.08);border-color:rgba(242,233,216,.28);color:var(--parchment);
}
.dark .signup input[type=email]::placeholder,.dark .signup input[type=text]::placeholder{color:#9a8878}
.dark .consent{color:#9a8878}
.dark .consent a{color:var(--parchment)}

@media (max-width:780px){
  .split-media{grid-template-columns:1fr}
  .split-media.reverse .split-media-img{order:0}
  .brand-mark img{height:38px}
}

/* ── header corrections ── */
/* The logo is a wide sunburst, sized to read clearly against the beige
   header rather than disappear into it. */
.brand-mark img{height:54px}
.site-head .wrap{min-height:84px;max-width:1320px}

/* "The School" was wrapping onto two lines and pushing the row out of line. */
.nav a{white-space:nowrap}

@media (max-width:1000px){
  .brand-mark img{height:42px}
  .site-head .wrap{min-height:72px}
}

/* ── header lockup: mark + name ───────────────────────────────────────── */
/* The mark alone left the school unnamed above the fold. The image now
   carries alt="" because the adjacent text is the accessible name; otherwise
   a screen reader announces it twice. */
.brand-mark{gap:.7rem;text-decoration:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{
  font-family:"Cormorant",Georgia,serif;
  font-size:1.24rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.brand-text em{
  font-family:"Poppins",sans-serif;font-style:normal;
  font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ember);margin-top:.25rem;
}

@media (max-width:920px){
  .brand-text strong{font-size:.98rem;letter-spacing:.06em}
}
@media (max-width:400px){
  .brand-text em{display:none}
  .brand-text strong{font-size:.86rem}
}

/* ── photographic hero ─────────────────────────────────────────────────
   Pass the image in as --photo on the section. The gradient does the work:
   dense through the middle where the centred text sits, opening to the image
   at both edges, so the headline stays legible regardless of what the
   photograph is doing underneath it. */
.hero-photo{
  position:relative;
  background-image:
    linear-gradient(90deg, rgba(14,7,6,.6) 0%, rgba(14,7,6,.82) 24%,
                    rgba(14,7,6,.82) 76%, rgba(14,7,6,.6) 100%),
    var(--photo);
  background-size:cover;
  /* Which part of the photograph survives the crop. Set --photo-pos per page
     when the subject is off-centre, so the crop eats the empty side. */
  background-position:var(--photo-pos, center);
  background-repeat:no-repeat;
}
@media (max-width:760px){
  /* On a narrow screen the text spans the full width, so the veil has to
     be even everywhere rather than lighter on one side. */
  .hero-photo{
    background-image:
      linear-gradient(180deg, rgba(14,7,6,.9) 0%, rgba(14,7,6,.82) 100%),
      var(--photo);
  }
}

/* A quiet full-width band, for breaking up long stretches of prose. */
.band{
  min-height:clamp(220px,32vw,420px);
  background-size:cover;background-position:center;
  background-image:var(--photo);
}

/* The homepage hero carries more than the inner ones (headline, lede, three
   promises and two buttons), so it needs the height to breathe and a slightly
   deeper veil to hold all of that legibly over a photograph. */
.hero-tall{
  padding-block:clamp(6rem,15vw,11rem) clamp(5rem,11vw,8rem);
  background-image:
    linear-gradient(100deg, rgba(14,7,6,.95) 0%, rgba(14,7,6,.88) 42%,
                    rgba(14,7,6,.6) 72%, rgba(14,7,6,.45) 100%),
    var(--photo);
}
@media (max-width:760px){
  .hero-tall{
    background-image:
      linear-gradient(180deg, rgba(14,7,6,.92) 0%, rgba(14,7,6,.86) 100%),
      var(--photo);
  }
}

/* ── homepage hero ──────────────────────────────────────────────────────
   Set close under the nav, about a third of the standard drop, with a wider
   headline. Centred text would land straight on Lana, because a hero this
   tall scales the photo up until she sits mid-page. So on wider screens the
   photo is sized to the width instead and pinned left, which keeps her at the
   right edge as in the reference design, and it fades into the dark ground
   where the photo runs out. */
/* Scales down sooner than the standard h1 (5.5vw, not 7vw), so between
   tablet and laptop widths the lines end short of Lana. Phones hit the same
   2.6rem floor as before, and the 4.6rem cap is unchanged from ~1340px up. */
.hero-home h1{max-width:28ch;font-size:clamp(2.6rem,5.5vw,4.6rem)}
/* the opening phrase is set smaller, as in the reference design */
.hero-home h1 .lead-in{display:block;font-size:.76em}
/* the button sits straight under the headline, so the lede needs more room */
.hero-home .hero-actions + .lede{margin-top:2.4rem}
/* the homepage headline sits a touch lower under the nav than on inner pages
   (the extra 20px was Lana's request) */
.hero-tall.hero-home{padding-top:calc(var(--hero-top) + clamp(.5rem,1.4vw,1.25rem) + 20px)}

@media (min-width:761px){
  .hero-tall.hero-home{
    background-color:var(--ink);
    background-image:
      linear-gradient(90deg, rgba(14,7,6,.9) 0%, rgba(14,7,6,.8) 50%,
                      rgba(14,7,6,.55) 78%, rgba(14,7,6,.45) 100%),
      /* the photo is 112% wide at 1800:1012, so it ends at about 63vw */
      linear-gradient(180deg, rgba(14,7,6,0) calc(63vw - 14rem), var(--ink) calc(63vw - 1rem)),
      var(--photo);
    background-size:100% 100%, 100% 100%, 112% auto;
    background-position:0 0, 0 0, left top;
    /* tall enough on very wide screens to show her to the hem */
    min-height:52vw;
  }
  /* On tablets the lede and list would otherwise run into her; above ~1180px
     the usual measure is already the narrower of the two, so no change. */
  .hero-home .lede{max-width:min(54ch,55vw)}
  .hero-home .hero-list{max-width:min(56ch,55vw)}
}

/* The hero image is the largest thing on the page and sits above the fold, so
   it is worth fetching eagerly rather than waiting on the stylesheet. */

/* ── legal pages ───────────────────────────────────────────────────────
   Dense contractual prose. Narrower measure and clear heading breaks make it
   navigable; nobody reads this end to end, they scan for one clause. */
.legal{max-width:70ch;margin-inline:auto}
.legal p{font-size:.95rem;line-height:1.72;color:var(--ink-2);max-width:none}
.legal h2{
  font-size:1.02rem;font-family:"Poppins",sans-serif;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ember);
  margin:2.6rem 0 .8rem;padding-top:1.4rem;border-top:1px solid var(--rule);
}
.legal h2:first-of-type{margin-top:1rem}
.legal h3{
  font-size:.95rem;font-weight:640;color:var(--ink);margin:1.8rem 0 .5rem;
}
.legal .caps{
  text-transform:uppercase;font-size:.82rem;letter-spacing:.03em;
  background:var(--parchment-2);padding:1rem 1.1rem;border-left:3px solid var(--oxblood);
}
.legal .updated{
  margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--rule);
  font-size:.82rem;color:var(--ink-3);
}

/* ── modal ─────────────────────────────────────────────────────────────
   Used for the terms, so a reader can check a clause without losing a
   half-filled form. The page still exists on its own. */
.aoi-modal{
  position:fixed;inset:0;z-index:9997;display:none;
  background:rgba(14,7,6,.62);padding:clamp(.75rem,4vw,2.5rem);
  align-items:center;justify-content:center;
}
.aoi-modal.open{display:flex}
.aoi-modal-box{
  background:var(--paper);border:1px solid var(--rule);border-radius:5px;
  width:min(720px,100%);max-height:min(84vh,900px);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 64px rgba(14,7,6,.4);
}
.aoi-modal-head{
  flex:0 0 auto;background:var(--ink);color:var(--parchment);
  padding:.85rem 1.1rem;display:flex;align-items:center;
}
.aoi-modal-head strong{
  font-family:"Poppins",sans-serif;font-weight:400;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
}
.aoi-modal-head button{
  margin-left:auto;background:none;border:none;color:var(--parchment);
  font-size:1.4rem;line-height:1;cursor:pointer;padding:0 .2rem;
}
.aoi-modal-body{
  flex:1 1 auto;overflow-y:auto;padding:1.4rem clamp(1rem,3vw,1.8rem);
  -webkit-overflow-scrolling:touch;
}
.aoi-modal-body p{font-size:.9rem;line-height:1.7;color:var(--ink-2);max-width:none}
.aoi-modal-body h2{
  font-size:.9rem;font-family:"Poppins",sans-serif;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ember);
  margin:1.8rem 0 .6rem;padding-top:1rem;border-top:1px solid var(--rule);
}
.aoi-modal-body h2:first-child{margin-top:0;padding-top:0;border-top:none}
.aoi-modal-body h3{font-size:.9rem;font-weight:640;margin:1.3rem 0 .4rem}
.aoi-modal-body .caps{
  text-transform:uppercase;font-size:.78rem;background:var(--parchment-2);
  padding:.8rem .9rem;border-left:3px solid var(--oxblood);
}
.aoi-modal-loading{color:var(--ink-3);font-style:italic}
.aoi-modal-foot{
  flex:0 0 auto;border-top:1px solid var(--rule);padding:.75rem 1.1rem;
  display:flex;align-items:center;gap:1rem;background:var(--parchment-2);
}
.aoi-modal-foot a{font-size:.82rem}
.aoi-modal-done{
  margin-left:auto;font:inherit;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.55rem 1.2rem;border:1px solid var(--ink);
  background:var(--ink);color:var(--parchment);cursor:pointer;
}
.aoi-modal-done:hover{background:var(--oxblood);border-color:var(--oxblood)}

/* ── free offer dialog ─────────────────────────────────────────────────
   Sits under the terms modal (9997), which can open on top of it from the
   consent link. */
html.offer-open{overflow:hidden}
.offer-modal{
  position:fixed;inset:0;z-index:9990;display:flex;overflow-y:auto;
  padding:clamp(.75rem,4vw,2.5rem);background:rgba(14,7,6,.66);
}
.offer-modal[hidden],.offer-modal [hidden]{display:none !important}
.offer-box{
  position:relative;margin:auto;width:min(940px,100%);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  background:var(--paper);border:1px solid var(--gilt);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(14,7,6,.5);
}
.offer-media{position:relative;margin:0;background:var(--ink);min-height:100%}
.offer-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;
}
.offer-body{padding:clamp(1.6rem,4vw,2.6rem)}
.offer-body h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-bottom:.8rem}
.offer-body h2:focus{outline:none}
.offer-body p{font-size:.95rem;color:var(--ink-2)}
.offer-form{max-width:none}
.offer-close{
  position:absolute;top:.35rem;right:.5rem;z-index:1;background:none;border:0;
  font-size:1.9rem;line-height:1;color:var(--ink);cursor:pointer;padding:.25rem .5rem;
}
.offer-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.offer-video{position:relative;aspect-ratio:16/9;margin-top:1.4rem;background:var(--ink)}
.offer-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:760px){
  .offer-box{grid-template-columns:1fr}
  .offer-media{display:none}
}
/* The same sign-up at the foot of the page, for a reader who has already seen
   the dialog this visit. */
.offer-inline [hidden]{display:none !important}
.offer-inline .offer-box{margin:0 auto;background:var(--parchment-2);box-shadow:0 18px 50px rgba(14,7,6,.12)}

/* ── apprenticeship pages ──────────────────────────────────────────────
   /apprenticeship, /apprenticeship-level-1, /apprenticeship-level-2 and
   /apply. Lana's programme copy is long-form, so these pages need a few
   patterns the shorter pages do not: runs of short cadenced lines, the
   certification designation, staged journeys and curriculum modules,
   prices, numbered application steps, an FAQ, and the booking frame. */

/* capacity and inclusion cards whose text runs to more than one paragraph
   or carries its own list */
.promise p + p{margin-top:.7rem}
.promise ul.clean{font-size:.96rem;margin:.7rem 0 0}
.promise ul.clean li{margin-bottom:.35rem}
.promise p + ul.clean{margin-top:.5rem}
.promise ul.clean + p{margin-top:.8rem}

/* a centred section: text and paragraphs share one axis */
.centered{text-align:center}
.centered p,.centered .lines li{margin-inline:auto}
.centered .hero-actions{justify-content:center}

/* short lines that read as one cadence rather than as paragraphs */
.lines{list-style:none;margin:1.6rem 0;padding:0;display:grid;gap:.4rem}
.lines li{
  font-family:"Cormorant",Georgia,serif;font-size:clamp(1.3rem,2.3vw,1.6rem);
  line-height:1.3;color:var(--ink);max-width:var(--measure);
}
.dark .lines li{color:var(--parchment)}

/* the certification a level confers */
.designation{
  font-family:"Cormorant",Georgia,serif;font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.25;
  letter-spacing:.08em;text-transform:uppercase;color:var(--oxblood);
  margin:.4rem 0 1.6rem;
}
.dark .designation{color:var(--gilt)}

/* a list longer than a handful of short items, in two columns where there
   is room */
ul.clean.cols{columns:2 300px;column-gap:3rem}
ul.clean.cols li{break-inside:avoid}

/* staged journeys and curriculum modules: a label beside each stage */
.stages{list-style:none;margin:2.8rem 0 0;padding:0;border-top:1px solid var(--rule)}
.stages > li{
  display:grid;grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);gap:.4rem 2.5rem;
  padding:2rem 0;border-bottom:1px solid var(--rule);
}
.stages .stage-label{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);padding-top:.5rem;margin:0;
}
.stages h3{margin-bottom:.8rem}
.stages p{color:var(--ink-2);font-size:.98rem}
.stages .lines{margin:1.1rem 0 1.3rem}
.stages .lines li{font-size:clamp(1.2rem,2vw,1.4rem)}
.stages p.designation{font-size:clamp(1.15rem,2vw,1.4rem);color:var(--oxblood)}
@media (max-width:700px){
  .stages > li{grid-template-columns:minmax(0,1fr)}
  .stages .stage-label{padding-top:0}
}

/* numbered application steps */
.steps{
  list-style:none;counter-reset:step;margin:2.6rem 0 0;padding:0;
  display:grid;gap:0 2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  border-top:1px solid var(--rule);
}
.steps > li{counter-increment:step;padding:1.8rem 0 2rem;border-bottom:1px solid var(--rule)}
.steps > li::before{
  content:counter(step,decimal-leading-zero);display:block;margin-bottom:.7rem;
  font-family:"Cormorant",Georgia,serif;font-size:2.6rem;line-height:1;color:var(--gilt);
}
.steps h3{font-size:1.4rem;margin-bottom:.6rem}
.steps h3 a{color:inherit;text-decoration-color:var(--gilt)}
.steps h3 a:hover{color:var(--oxblood)}
.steps p{font-size:.96rem;color:var(--ink-2);margin-bottom:.8em}

/* tuition and payment options */
.amount{
  font-family:"Cormorant",Georgia,serif;font-weight:400;
  font-size:clamp(2.8rem,6vw,3.8rem);line-height:1;letter-spacing:-.01em;
  color:var(--oxblood);margin:.6rem 0 1.4rem;
}
.dark .amount{color:var(--gilt)}
.prices{
  display:grid;gap:1.4rem;margin:2.4rem 0 2.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.price{border:1px solid var(--rule);background:var(--parchment-2);padding:1.8rem 1.7rem}
.warm .price{background:var(--paper)}
.price h3{
  font-family:"Poppins",sans-serif;font-size:.72rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin:0 0 .4rem;
}
.price .amount{font-size:clamp(2.4rem,5vw,3rem);margin:.2rem 0 .9rem}
.price .amount:last-child{margin-bottom:0}
.price p{font-size:.95rem;color:var(--ink-2)}
.price p + p{margin-top:.7rem}

/* frequently asked questions, open and closed without script */
.faq{margin-top:2.4rem;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;
  justify-content:space-between;gap:1.5rem;padding:1.3rem 0;
  font-family:"Cormorant",Georgia,serif;font-size:clamp(1.25rem,2.2vw,1.5rem);
  line-height:1.3;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex:0 0 auto;font-family:"Poppins",sans-serif;font-weight:300;
  font-size:1.5rem;line-height:1;color:var(--gilt);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--oxblood)}
.faq summary:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.faq .answer{padding:0 0 1.7rem}
.faq .answer p{font-size:.97rem;color:var(--ink-2);margin-bottom:.9em}
.faq .answer p:last-child{margin-bottom:0}
.faq .answer .hero-actions{margin-top:1.4rem}

/* the application page: a longer title, and the GoHighLevel booking frame
   held open at a sensible height until form_embed.js sizes it */
.hero h1.apply-title{max-width:22ch}
.booking{max-width:960px;margin-inline:auto}
.booking iframe{display:block;min-height:760px}
/* GoHighLevel's embed hides the calendar AND takes it out of the page until it
   has loaded, then drops it in at full height. The frame keeps that height from
   the start -- 797px where the calendar sits beside its details, 760px where it
   stacks -- and holds it fixed while loading so the calendar's own settling
   (it briefly grows to ~890px) cannot move anything below. */
.booking-frame{position:relative;min-height:797px}  /* site.js sets the exact height */
.booking-frame.is-loading{height:797px;overflow:hidden}
.booking-loading{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:1.2rem;padding-top:clamp(6rem,14vw,9rem);background:var(--parchment-2);
  transition:opacity .5s ease,visibility .5s ease;
}
.booking-frame:not(.is-loading) .booking-loading{opacity:0;visibility:hidden;pointer-events:none}
.booking-loading p{
  margin:0;max-width:26rem;text-align:center;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.booking-loading p a{text-transform:none;letter-spacing:0;font-size:.9rem}
.booking-spinner{
  width:38px;height:38px;border-radius:50%;
  border:2px solid rgba(198,162,107,.3);border-top-color:var(--gilt);
  animation:booking-spin 1s linear infinite;
}
@keyframes booking-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.booking-spinner{animation-duration:3s}}

/* the calendar in a dialog, opened from [data-booking-open] */
html.booking-open{overflow:hidden}
/* the chat launcher sits above everything; keep it off any open dialog */
html.booking-open .aoi-launch,html.video-open .aoi-launch,html.offer-open .aoi-launch{display:none}
.booking-modal{
  position:fixed;inset:0;z-index:9994;display:flex;overflow-y:auto;
  padding:clamp(.5rem,3vw,2rem);background:rgba(14,7,6,.72);
}
.booking-modal[hidden]{display:none}
.booking-dialog{
  position:relative;margin:auto;width:min(1040px,100%);
  background:var(--parchment-2);border:1px solid var(--gilt);border-radius:14px;
  box-shadow:0 30px 80px rgba(14,7,6,.5);
  padding:clamp(1.3rem,3.5vw,2.4rem) clamp(.75rem,3vw,2.2rem) clamp(1rem,2.5vw,1.8rem);
}
.booking-dialog-head{text-align:center;padding:0 2.5rem;margin-bottom:1.4rem}
.booking-dialog-head .eyebrow{margin-bottom:.8rem}
.booking-dialog-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin:0 auto .6rem;max-width:24ch}
.booking-dialog-head p:not(.eyebrow){margin:0 auto;font-size:.93rem;color:var(--ink-2);max-width:56ch}
.booking-dialog-close{
  position:absolute;top:.5rem;right:.6rem;background:none;border:0;cursor:pointer;
  font-size:2rem;line-height:1;padding:.25rem .55rem;color:var(--ink);
}
.booking-dialog-close:hover,.booking-dialog-close:focus-visible{color:var(--oxblood)}
.booking .form-note{text-align:center;margin:1.6rem auto 0}

/* ── the blog (/blog and /blog/<slug>, rendered by the app) ── */
.blog-cards .card-photo{aspect-ratio:3/2;object-position:center}
.blog-cards .card-title-link{color:inherit;text-decoration:none}
.blog-cards .card-title-link:hover{text-decoration:underline;text-underline-offset:.18em}
.blog-empty{margin:0 auto;text-align:center;color:var(--ink-2);font-size:1.05rem}
.hero-post h1{max-width:22ch}
.post-section{padding-top:clamp(2.5rem,6vw,4.5rem)}
.post{max-width:44rem;margin-inline:auto}
.post-cover{margin:0 0 2.4rem}
.post-cover img{width:100%;max-height:34rem;object-fit:cover}
.post-body{font-size:1.06rem;line-height:1.82}
.post-body p{max-width:none}
.post-body h2{font-size:clamp(1.7rem,3.4vw,2.2rem);margin:2.2em 0 .5em}
.post-body h3{margin:1.9em 0 .4em}
.post-body h4{font-family:"Poppins",system-ui,sans-serif;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin:2em 0 .5em}
.post-body ul,.post-body ol{padding-left:1.4em;margin:0 0 1.3em}
.post-body li{margin-bottom:.4em}
.post-body blockquote{
  margin:2em 0;padding:.2em 0 .2em 1.4em;border-left:3px solid var(--gilt);
  font-family:"Cormorant",Georgia,serif;font-size:1.45rem;line-height:1.4;font-style:italic;color:var(--ink);
}
.post-body figure{margin:2.2em 0}
.post-body figure img{width:100%;height:auto}
.post-body figcaption{font-size:.86rem;color:var(--ink-3);margin-top:.6rem;text-align:center}
.post-body pre{overflow-x:auto;background:var(--parchment-2);padding:1rem 1.2rem;font-size:.9rem;line-height:1.6;border:1px solid var(--rule)}
.post-body code{font-size:.92em}
.post-body hr{border:0;border-top:1px solid var(--rule);margin:2.4em auto;width:6rem}
.post-by{
  max-width:none;margin:3rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}

/* ── pages built from sections at an address of their own (Apprenticeship) ── */
/* neighbours on the same background read as one block, not two padded ones */
section[data-tone="plain"] + section[data-tone="plain"],
section[data-tone="warm"] + section[data-tone="warm"],
section[data-tone="dark"] + section[data-tone="dark"]{padding-top:clamp(1.5rem,4vw,2.6rem)}
h3.sub{margin-top:2.6rem}
h3.sub:first-child{margin-top:0}
.after-split{margin-top:2.6rem}
.course-cards-rich{margin-top:2.2rem}
.course-cards-rich .promise p + p{margin-top:.8rem}
.course-cards-rich .promise ul.clean{margin-top:.8rem}
.stages .eyebrow{margin-bottom:.4rem}

/* a course card's description written with the formatting box: paragraphs, bold, links, lists */
.door .door-text{flex:1;margin-bottom:1.6rem}
.door .door-text p{font-size:.95rem;color:var(--ink-2);margin-bottom:.8em;flex:none}
.door .door-text > :last-child{margin-bottom:0}
.door .door-text ul{margin:0 0 .8em;padding-left:1.2rem;font-size:.95rem;color:var(--ink-2)}
.door .door-text h3{font-size:1.1rem;margin:.6em 0 .3em}