/* ===========================================================================
   Monastic Growth Partners
   Mid-century instructional-poster kit: ink ground, aged paper panels, fat
   slab display type, hard outlines with solid offset shadows, and a sunburst
   that radiates from the mascot across the whole hero.
   =========================================================================== */

:root{
  --ink:        #0b131b;
  --ink-2:      #101c26;
  --ink-3:      #16262f;
  --ink-line:   #273b47;
  --paper:      #f2e5cc;
  --paper-2:    #e2cfab;
  --paper-line: #c3a877;

  --steel:      #4e8cb0;
  --steel-dim:  #35647f;
  --orange:     #ee8b33;
  --gold:       #f3c24d;
  --alarm:      #ff9b7a;

  --on-ink:     #ece3d4;
  --on-ink-dim: #9aaab6;
  --on-paper:   #1a1206;
  --on-paper-dim:#5c4a2d;

  --display: "Alfa Slab One", Rockwell, Georgia, serif;
  --text: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --w: 1160px;
  --gutter: clamp(20px, 5vw, 56px);
  --band: clamp(72px, 9vw, 132px);
  --edge: 3px;
}

*,*::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(--ink);
  color:var(--on-ink);
  font-family:var(--text);
  font-size:17px;
  line-height:1.6;
  font-synthesis-weight:none;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--gold); }

/* anchors clear the sticky header */
[id]{ scroll-margin-top:100px; }
@media (max-width:900px){ [id]{ scroll-margin-top:142px; } }

h1,h2{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.005em;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.3rem, 5.4vw, 4.05rem); }
h2{ font-size:clamp(1.85rem, 3.9vw, 2.9rem); }
h3{
  font-family:var(--text);
  font-weight:700;
  font-size:1.18rem;
  letter-spacing:-.015em;
  line-height:1.22;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; }

.wrap{ width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--gutter); }
.lede{ font-size:clamp(1.05rem,1.6vw,1.26rem); color:var(--on-ink-dim); max-width:62ch; line-height:1.56; }
.lede strong{ color:var(--on-ink); font-weight:600; }

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--gold); color:var(--on-paper); padding:12px 18px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

/* ===========================================================================
   Motion
   Everything here is gated on .js-anim, which the inline head script adds
   only when the visitor has not asked for reduced motion, and removes again
   if main.js never arrives. Without that class the page is fully static.
   =========================================================================== */

:root{ interpolate-size:allow-keywords; }

.js-anim .reveal,
.js-anim .intro{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),
             transform .72s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i, 0) * 85ms);
  will-change:opacity, transform;
}
.js-anim .reveal-left{ transform:translate(-30px, 14px); }
.js-anim .reveal-right{ transform:translate(30px, 14px); }
.js-anim .reveal-pop{ transform:scale(.9) rotate(-2.5deg); }
.js-anim .intro-art{ transform:translateY(34px) scale(.97); }

/* in one column there is nowhere to slide in from, and a sideways offset
   would widen the page while it waits to be revealed */
@media (max-width:980px){
  .js-anim .reveal-left,
  .js-anim .reveal-right{ transform:translateY(26px); }
}

.js-anim .reveal.is-in,
.js-anim .intro.is-in{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* the mascot keeps breathing once he has arrived */
@media (prefers-reduced-motion: no-preference){
  .js-anim .monk-cutout.is-settled img{ animation:monk-bob 7.5s ease-in-out infinite; }
}
@keyframes monk-bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}

/* scroll progress, read off the document height */
.progress{ position:absolute; left:0; right:0; bottom:-2px; height:2px; background:transparent; }
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--steel), var(--orange), var(--gold));
  transition:width .08s linear;
}

/* the bar compacts once you leave the hero */
.site-head{ transition:box-shadow .22s ease, background .22s ease; }
.site-head.is-stuck{ box-shadow:0 10px 30px rgba(0,0,0,.45); background:rgba(11,19,27,.97); }
.site-head.is-stuck .head-row{ min-height:62px; }
.site-head.is-stuck .head-logo img{ height:23px; }

/* FAQ answers slide rather than snap, where the browser supports it */
.faq details::details-content{
  block-size:0;
  overflow:hidden;
  transition:block-size .32s cubic-bezier(.22,.61,.36,1), content-visibility .32s allow-discrete;
}
.faq details[open]::details-content{ block-size:auto; }

/* ---- shared devices ----------------------------------------------------- */

.rays{ position:relative; isolation:isolate; }
.rays > *{ position:relative; z-index:1; }
.rays::before{
  content:""; position:absolute; z-index:0; inset:0;
  background:
    repeating-conic-gradient(from 0deg at 50% 46%,
      rgba(243,194,77,.085) 0deg 5.2deg, transparent 5.2deg 12deg);
  -webkit-mask-image:radial-gradient(60% 55% at 50% 46%, #000 0%, transparent 78%);
          mask-image:radial-gradient(60% 55% at 50% 46%, #000 0%, transparent 78%);
  pointer-events:none;
}

.ribbon{
  display:inline-block;
  background:var(--steel);
  color:#06121a;
  font-weight:700;
  font-size:.86rem;
  padding:7px 15px;
  border:var(--edge) solid var(--ink);
  box-shadow:5px 5px 0 var(--ink-line);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:700; letter-spacing:-.01em;
  padding:16px 28px; cursor:pointer; text-decoration:none;
  border:var(--edge) solid var(--ink);
  box-shadow:6px 6px 0 var(--ink-line);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary{ background:var(--orange); color:#20120a; }
.btn-secondary{ background:var(--paper); color:var(--on-paper); }
.btn-ghost{
  background:transparent; color:var(--on-ink);
  border-color:var(--ink-line); box-shadow:6px 6px 0 rgba(78,140,176,.3);
}
.btn:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink-line); }
.btn:active{ transform:translate(6px,6px); box-shadow:0 0 0 var(--ink-line); }
.btn[disabled]{ opacity:.55; pointer-events:none; }

.bubble{
  position:relative;
  background:var(--paper);
  color:var(--on-paper);
  border:var(--edge) solid var(--ink);
  box-shadow:6px 6px 0 var(--ink-line);
  padding:16px 20px;
  font-weight:600;
  font-size:1.02rem;
  line-height:1.4;
  max-width:36ch;
}
.bubble::before,.bubble::after{ content:""; position:absolute; width:0; height:0; }
.bubble-down::before{
  bottom:-22px; left:34px;
  border:11px solid transparent; border-top-color:var(--ink); border-bottom:0;
  border-top-width:22px;
}
.bubble-down::after{
  bottom:-15px; left:38px;
  border:8px solid transparent; border-top-color:var(--paper); border-bottom:0;
  border-top-width:16px;
}
.bubble-nib::before{
  bottom:-24px; right:40px;
  border:12px solid transparent; border-top-color:var(--ink); border-bottom:0;
  border-top-width:26px; border-left-width:20px; border-right-width:4px;
}
.bubble-nib::after{
  bottom:-16px; right:46px;
  border:8px solid transparent; border-top-color:var(--paper); border-bottom:0;
  border-top-width:18px; border-left-width:13px; border-right-width:3px;
}
.bubble-left::before{
  left:-22px; top:26px;
  border:11px solid transparent; border-right-color:var(--ink); border-left:0;
  border-right-width:22px;
}
.bubble-left::after{
  left:-15px; top:29px;
  border:8px solid transparent; border-right-color:var(--paper); border-left:0;
  border-right-width:16px;
}

/* a stamped number: the one ornament this page repeats on purpose */
.stamp{
  display:grid; place-items:center;
  width:54px; height:54px; border-radius:50%;
  background:var(--orange); color:#20120a;
  border:var(--edge) solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  font-family:var(--display); font-weight:400; font-size:1.35rem; line-height:1;
}

/* ---- header ------------------------------------------------------------- */

.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(11,19,27,.93);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--ink-line);
}
.head-row{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px; min-height:72px; }
.head-logo img{ height:27px; width:auto; transition:height .22s ease; }
.head-nav{ display:flex; gap:26px; margin-left:auto; }
.head-nav a{
  color:var(--on-ink-dim); text-decoration:none; font-weight:600; font-size:.94rem;
  padding:4px 0; border-bottom:2px solid transparent;
}
.head-nav a:hover{ color:var(--on-ink); border-bottom-color:var(--orange); }
.head-cta{ padding:12px 20px; box-shadow:4px 4px 0 var(--ink-line); font-size:.94rem; }
.head-cta:hover{ box-shadow:2px 2px 0 var(--ink-line); }

@media (max-width:900px){
  .head-row{ padding-bottom:12px; row-gap:10px; }
  .head-cta{ margin-left:auto; }
  .head-nav{
    order:3; width:100%; margin:0; gap:8px; padding-bottom:2px;
    overflow-x:auto; scrollbar-width:none;
  }
  .head-nav::-webkit-scrollbar{ display:none; }
  .head-nav a{
    flex:none; white-space:nowrap; font-size:.86rem; padding:7px 13px;
    background:var(--ink-2); border:2px solid var(--ink-line);
  }
  .head-nav a:hover{ border-color:var(--orange); }
}

/* ---- hero --------------------------------------------------------------- */

.hero{
  position:relative; isolation:isolate; overflow:clip;
  padding:clamp(48px,7vw,88px) 0 clamp(56px,7vw,96px);
  border-bottom:2px solid var(--ink-line);
}
/* A square centred on the mascot, so the rays can turn about their own origin
   instead of orbiting the section. The hero clips what spills out. */
.hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:68%; top:46%;
  width:min(175vw, 2300px); aspect-ratio:1;
  translate:-50% -50%;
  background:
    radial-gradient(closest-side, rgba(238,139,51,.26), transparent 56%),
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(243,194,77,.17) 0deg 3.6deg,
      rgba(78,140,176,.10) 3.6deg 7.2deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 4%, rgba(0,0,0,.72) 38%, transparent 68%);
          mask-image:radial-gradient(closest-side, #000 4%, rgba(0,0,0,.72) 38%, transparent 68%);
}
@media (prefers-reduced-motion: no-preference){
  .hero::before{ animation:ray-turn 180s linear infinite; }
}
@keyframes ray-turn{ to{ rotate:360deg; } }
/* quiet the rays under the copy so the type keeps its contrast */
.hero::after{
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:linear-gradient(101deg,
    rgba(11,19,27,.92) 0%, rgba(11,19,27,.78) 30%, rgba(11,19,27,.3) 50%, transparent 64%);
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5vw,64px); align-items:center; }
.hero h1{ margin:22px 0 0; text-shadow:3px 3px 0 rgba(0,0,0,.5); }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero .lede{ margin-top:24px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-note{ margin-top:20px; font-size:.9rem; color:var(--on-ink-dim); }

.hero-art{ position:relative; }
.hero-art .bubble{ position:absolute; top:-34px; left:-46px; z-index:3; transform:rotate(-2.5deg); max-width:22ch; }

/* the mascot stands on the page; the rays behind him belong to the section */
.monk-cutout{ position:relative; margin:0; }
.monk-cutout::after{
  content:""; position:absolute; z-index:0; left:20%; right:20%; bottom:1%; height:30px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%);
}
.monk-cutout img{
  position:relative; z-index:1; width:110%; max-width:none; height:auto; margin-left:-5%;
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.5));
}

/* the same cut-out treatment wherever else he appears */
.monk-art{ position:relative; margin:0; }
.monk-art::before{
  content:""; position:absolute; z-index:0; inset:-12% -8% 2%;
  background:radial-gradient(50% 46% at 48% 48%, rgba(238,139,51,.20), transparent 72%);
}
.monk-art img{
  position:relative; z-index:1; display:block;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.45));
}
.monk-art-wide img{ width:100%; height:auto; }

@media (max-width:980px){
  .hero::before{ left:50%; top:70%; width:min(210vw, 1400px); }
  .hero::after{
    background:linear-gradient(180deg,
      rgba(11,19,27,.9) 0%, rgba(11,19,27,.6) 34%, transparent 56%);
  }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ max-width:420px; margin-top:24px; }
  .hero-art .bubble{ position:static; transform:none; max-width:none; margin-bottom:26px; }
  .hero-art .bubble::before,.hero-art .bubble::after{ display:none; }
  .monk-cutout img{ width:100%; margin-left:0; }
}

.ticker{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--ink-line);
  background:var(--ink-2);
}
.ticker div{ padding:24px var(--gutter); border-right:2px solid var(--ink-line); }
.ticker div:last-child{ border-right:0; }
.ticker b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:1.75rem; color:var(--gold); letter-spacing:-.01em; line-height:1.1;
}
.ticker span{ font-size:.92rem; color:var(--on-ink-dim); }
@media (max-width:760px){
  .ticker{ grid-template-columns:1fr; }
  .ticker div{ border-right:0; border-bottom:2px solid var(--ink-line); }
}

/* ---- generic band ------------------------------------------------------- */

.band{ padding:var(--band) 0; border-bottom:2px solid var(--ink-line); }
.band-paper{
  color:var(--on-paper);
  border-bottom-color:var(--paper-line);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(26,18,6,.055) 1.1px, transparent 1.2px);
  background-size:7px 7px;
}
.band-paper h2,.band-paper h3{ color:var(--on-paper); }
.band-paper .lede{ color:var(--on-paper-dim); }
.band-paper .lede strong{ color:var(--on-paper); }
.band-head{ max-width:70ch; }
.band-head h2{ margin-bottom:18px; }

/* ---- calculator --------------------------------------------------------- */

.calc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(28px,4vw,56px); align-items:start; margin-top:46px; }
@media (max-width:900px){ .calc{ grid-template-columns:1fr; } }

.calc-panel{
  background:var(--ink-2);
  border:var(--edge) solid var(--ink-line);
  box-shadow:10px 10px 0 rgba(78,140,176,.2);
  padding:clamp(24px,3vw,36px);
}
.calc-label{ display:block; font-weight:600; color:var(--on-ink-dim); font-size:.95rem; }
.calc-value{
  display:block; font-family:var(--display); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(2rem,4.2vw,2.8rem); color:var(--on-ink); margin:6px 0 22px; line-height:1.1;
}
.calc-value span{ font-size:.85rem; font-family:var(--text); font-weight:600; color:var(--on-ink-dim); letter-spacing:0; }

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:18px; background:transparent; cursor:pointer; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:14px; background:var(--ink-3); border:2px solid var(--ink-line);
}
input[type=range]::-moz-range-track{
  height:14px; background:var(--ink-3); border:2px solid var(--ink-line);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:30px; margin-top:-10px;
  background:var(--orange); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--steel-dim);
}
input[type=range]::-moz-range-thumb{
  width:22px; height:26px; border-radius:0;
  background:var(--orange); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--steel-dim);
}
.calc-scale{ display:flex; justify-content:space-between; font-size:.84rem; color:var(--on-ink-dim); margin-top:10px; }

.calc-presets{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.calc-presets button{
  font:inherit; font-weight:700; font-size:.88rem; cursor:pointer;
  background:var(--ink-3); color:var(--on-ink-dim);
  border:2px solid var(--ink-line); padding:8px 14px;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.calc-presets button:hover{ color:var(--on-ink); border-color:var(--steel); }
.calc-presets button[aria-pressed="true"]{ background:var(--gold); color:#4a3608; border-color:var(--ink); }

.calc-out{ display:grid; gap:0; border:var(--edge) solid var(--ink); background:var(--paper); color:var(--on-paper); box-shadow:10px 10px 0 var(--orange); }
.calc-out div{ padding:20px 24px; border-bottom:2px solid var(--paper-line); }
.calc-out div:last-child{ border-bottom:0; }
.calc-out dt{ font-weight:600; font-size:.95rem; color:var(--on-paper-dim); }
.calc-out dd{ margin:4px 0 0; font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,3.2vw,2.15rem); letter-spacing:-.01em; line-height:1.1; }
.calc-out .calc-out-hero{ background:var(--gold); }
.calc-out .calc-out-hero dt{ color:#5a4512; }
.calc-fine{ margin-top:22px; font-size:.92rem; color:var(--on-ink-dim); max-width:56ch; }

/* ---- steps -------------------------------------------------------------- */

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:48px; border:var(--edge) solid var(--ink); background:var(--paper); box-shadow:12px 12px 0 var(--steel-dim); }
.steps li{ list-style:none; padding:clamp(24px,3vw,34px); border-right:var(--edge) solid var(--ink); color:var(--on-paper); }
.steps li:last-child{ border-right:0; }
.steps .stamp{ margin-bottom:20px; }
.steps h3{ margin-bottom:8px; }
.steps p{ color:var(--on-paper-dim); font-size:.98rem; }
@media (max-width:860px){
  .steps{ grid-template-columns:1fr; }
  .steps li{ border-right:0; border-bottom:var(--edge) solid var(--ink); }
  .steps li:last-child{ border-bottom:0; }
}

/* ---- services ----------------------------------------------------------- */

.svc-top{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,4vw,56px); align-items:center; }
@media (max-width:900px){ .svc-top{ grid-template-columns:1fr; } }
.svc-aside{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.svc-aside .monk-art{ width:min(260px,100%); align-self:center; }

.svc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:18px; margin-top:48px; }
.svc{
  background:var(--ink-2);
  border:2px solid var(--ink-line);
  padding:22px 22px 24px;
  border-left:5px solid var(--steel-dim);
  transition:transform .14s ease, background .14s ease, border-color .14s ease;
}
.svc:nth-child(3n+2){ border-left-color:var(--orange); }
.svc:nth-child(3n+3){ border-left-color:var(--gold); }
.svc:hover{ transform:translateY(-3px); background:var(--ink-3); }
.svc svg{ width:26px; height:26px; color:var(--orange); margin-bottom:14px; }
.svc h3{ font-size:1.04rem; margin-bottom:7px; }
.svc p{ font-size:.93rem; color:var(--on-ink-dim); line-height:1.5; }
.svc-foot{
  margin-top:34px; padding:22px 26px;
  background:var(--ink-2); border:2px dashed var(--ink-line);
  font-size:.98rem; color:var(--on-ink-dim);
}
.svc-foot strong{ color:var(--on-ink); font-weight:700; }

/* ---- rewards ------------------------------------------------------------ */

.rewards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
@media (max-width:900px){ .rewards{ grid-template-columns:1fr; } }
.reward{
  background:var(--ink-2);
  border:var(--edge) solid var(--ink-line);
  box-shadow:9px 9px 0 rgba(78,140,176,.22);
  padding:28px 26px 30px;
  display:flex; flex-direction:column;
}
.reward-3{ box-shadow:9px 9px 0 rgba(238,139,51,.3); }
.reward-5{ background:linear-gradient(170deg,#1b2b22,#101c26); box-shadow:9px 9px 0 var(--gold); border-color:var(--gold); }
.reward figure{ position:relative; margin:0 0 18px; height:168px; display:flex; align-items:flex-end; justify-content:center; }
.reward figure::before{
  content:""; position:absolute; inset:-14% -6% 0;
  background:radial-gradient(48% 46% at 44% 52%, rgba(238,139,51,.22), transparent 72%);
}
.reward-5 figure::before{ background:radial-gradient(48% 46% at 44% 52%, rgba(243,194,77,.24), transparent 72%); }
.reward figure img{
  position:relative; z-index:1; height:100%; width:auto;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.5));
}
.reward figure .stamp{
  position:absolute; z-index:2; right:0; bottom:2px;
  width:46px; height:46px; font-size:1.15rem;
  background:var(--gold); color:#4a3608;
}
.reward .count{ font-weight:700; color:var(--orange); font-size:.95rem; margin-bottom:6px; }
.reward-5 .count{ color:var(--gold); }
.reward h3{ font-family:var(--display); font-weight:400; font-size:1.32rem; letter-spacing:-.005em; margin-bottom:12px; }
.reward p{ color:var(--on-ink-dim); font-size:.97rem; }
.reward ul{ margin:14px 0 0; padding-left:18px; color:var(--on-ink-dim); font-size:.95rem; }
.reward li{ margin-bottom:5px; }
.reward-bubble{ margin-top:46px; display:flex; justify-content:center; }

/* ---- who / faq ---------------------------------------------------------- */

.who{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:44px; }
.who div{
  border:2px solid var(--paper-line); background:rgba(255,255,255,.34);
  padding:16px 18px; font-weight:600; color:var(--on-paper); font-size:.98rem;
}

.faq{ max-width:860px; margin-top:44px; border-top:2px solid var(--ink-line); }
.faq details{ border-bottom:2px solid var(--ink-line); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 48px 22px 0; position:relative;
  font-weight:700; font-size:1.06rem; color:var(--on-ink);
  transition:color .12s ease;
}
.faq summary:hover{ color:var(--gold); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; translate:0 -50%;
  font-family:var(--display); color:var(--orange); font-size:1.4rem; line-height:1;
}
.faq details[open] summary::after{ content:"\2013"; }
.faq p{ padding:0 0 24px; color:var(--on-ink-dim); max-width:68ch; }

/* ---- apply -------------------------------------------------------------- */

.apply{ background:var(--ink-2); }
.apply-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(26px,3.5vw,48px); margin-top:46px; align-items:start; }
@media (max-width:940px){ .apply-grid{ grid-template-columns:1fr; } }
@media (min-width:941px){ .apply-grid > :first-child{ position:sticky; top:104px; } }

.card{
  background:var(--ink);
  border:var(--edge) solid var(--ink-line);
  box-shadow:10px 10px 0 rgba(78,140,176,.22);
  padding:clamp(24px,3vw,34px);
}
.card h3{ font-family:var(--display); font-weight:400; font-size:1.5rem; letter-spacing:-.005em; margin-bottom:12px; }
.card > p{ color:var(--on-ink-dim); font-size:.98rem; }
.card-booking{ box-shadow:10px 10px 0 var(--orange); }

.covers{ margin:22px 0 0; padding:0; list-style:none; }
.covers li{
  position:relative; padding:11px 0 11px 30px;
  border-top:2px solid var(--ink-line); color:var(--on-ink-dim); font-size:.96rem;
}
.covers li:last-child{ border-bottom:2px solid var(--ink-line); }
.covers li::before{
  content:""; position:absolute; left:4px; top:18px;
  width:10px; height:10px; background:var(--gold);
}
.booking-embed:not(:empty){ margin-top:22px; }
.booking-embed iframe{ width:100%; min-height:620px; border:0; background:var(--paper); }
.booking-monk{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.booking-monk img{ width:142px; height:auto; flex:none; margin-left:-10px; filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
.booking-monk .bubble{ font-size:.95rem; padding:12px 16px; }

.field{ display:block; margin-top:18px; }
.field > span{ display:block; font-weight:600; font-size:.93rem; margin-bottom:7px; color:var(--on-ink); }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:1rem;
  background:var(--ink-3); color:var(--on-ink);
  border:2px solid var(--ink-line); padding:12px 14px;
  transition:border-color .12s ease;
}
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--steel-dim); }
.field textarea{ min-height:108px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#6c7f8c; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .field-row{ grid-template-columns:1fr; } }
.optional{ font-weight:500; color:var(--on-ink-dim); }

.field-error{
  display:block; margin-top:7px; font-style:normal;
  font-size:.86rem; font-weight:600; color:var(--alarm);
}
.field [aria-invalid="true"]{ border-color:var(--alarm); }

.consent{ display:flex; gap:12px; align-items:flex-start; margin-top:24px; font-size:.9rem; color:var(--on-ink-dim); }
.consent input{ width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--orange); }
.consent .field-error{ margin-top:4px; }
.form-actions{ margin-top:26px; }
.form-status{ margin-top:16px; font-weight:600; font-size:.96rem; }
.form-status[data-state="ok"]{ color:var(--gold); }
.form-status[data-state="error"]{ color:var(--alarm); }

.form-done{
  border:var(--edge) solid var(--gold);
  background:rgba(243,194,77,.08);
  padding:28px 26px;
  margin-top:20px;
}
.form-done h4{
  font-family:var(--display); font-weight:400; font-size:1.3rem;
  letter-spacing:-.005em; margin:0 0 10px; color:var(--on-ink);
}
.form-done p{ color:var(--on-ink-dim); font-size:.98rem; }

/* ---- footer ------------------------------------------------------------- */

.site-foot{ padding:48px 0 60px; font-size:.92rem; color:var(--on-ink-dim); }
.foot-row{ display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center; }
/* width:auto is load-bearing: without it the img's width="720" attribute wins
   over the CSS height and the logo renders stretched */
.foot-row img{ height:26px; width:auto; }
.foot-links{ display:flex; gap:22px; margin-left:auto; flex-wrap:wrap; }
.foot-links a{ color:var(--on-ink-dim); text-decoration:none; }
.foot-links a:hover{ color:var(--gold); text-decoration:underline; }
.foot-legal{ margin-top:22px; max-width:78ch; font-size:.86rem; color:#6f8190; }

/* ---- legal pages -------------------------------------------------------- */

.legal{ padding:clamp(54px,7vw,92px) 0 clamp(60px,8vw,110px); }
.legal-inner{ max-width:74ch; }
.legal h1{ font-size:clamp(2rem,4.2vw,2.9rem); }
.legal .updated{ margin-top:16px; color:var(--on-ink-dim); font-size:.93rem; }
.legal h2{ font-family:var(--display); font-weight:400; font-size:1.36rem; letter-spacing:-.005em; margin:50px 0 14px; }
.legal h3{ font-size:1.08rem; margin:28px 0 8px; }
.legal p,.legal li{ color:var(--on-ink-dim); }
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 16px; padding-left:22px; }
.legal li{ margin-bottom:7px; }
.legal strong{ color:var(--on-ink); }