/* MySistas - site stylesheet. Hand written, no build step.
   Token layers: primitives -> semantic -> component. */

/* ---------- fonts ---------- */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/assets/fonts/cg.5a7f94a1.woff2') format('woff2-variations'),
      url('/assets/fonts/cg.5a7f94a1.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Jost';
  src:url('/assets/fonts/jost.180347d9.woff2') format('woff2-variations'),
      url('/assets/fonts/jost.180347d9.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Metric-matched fallbacks so the swap does not move the layout. */
@font-face{font-family:'CG Fallback';src:local('Times New Roman'),local('Times');size-adjust:92%;ascent-override:96%;descent-override:26%;line-gap-override:0%;}
@font-face{font-family:'Jost Fallback';src:local('Helvetica Neue'),local('Arial');size-adjust:97%;ascent-override:98%;descent-override:24%;line-gap-override:0%;}

/* ---------- primitives ---------- */
:root{
  --btn-ink:#2B0F07;
  --espresso-900:#3A0F27;   /* deep rose, the dark surfaces of the site */
  --espresso-800:#52183A;
  --espresso-700:#6E2249;
  --cocoa-600:#8A3260;
  --rose-600:#8A5347;
  --rose-500:#9A6357;
  --rose-400:#B5847A;
  --petal-300:#EFCBC7;
  --petal-200:#F5DEDA;
  --petal-100:#FAECE8;
  --blush-50:#FDF5F2;
  --ivory:#FCF8F3;
  --paper:#FFFFFF;
  --gold-700:#7C5A24;
  --gold-600:#A8823B;
  --gold-500:#C59D56;
  --gold-300:#E3C98A;
  --wine-700:#6B2230;

  --step:8px;
  --r-card:20px;
  --r-pill:999px;
  --shadow-1:0 1px 2px rgba(74,26,46,.05), 0 6px 18px -8px rgba(74,26,46,.16);
  --shadow-2:0 2px 4px rgba(74,26,46,.06), 0 18px 44px -18px rgba(74,26,46,.26);
  --shadow-3:0 30px 70px -30px rgba(74,26,46,.36);

  --t-fast:140ms;
  --t-base:220ms;
  --t-slow:420ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-both:cubic-bezier(.4,0,.2,1);

  /* semantic */
  --surface:var(--paper);
  --surface-warm:var(--ivory);
  --surface-blush:var(--blush-50);
  --surface-petal:var(--petal-100);
  --surface-dark:var(--espresso-800);
  --text:#33150C;
  --text-soft:#6B4A40;
  --text-muted:#7C5C52;
  --text-on-dark:#F7EAE4;
  --text-on-dark-soft:#DCC3B9;
  --accent:var(--rose-600);
  --accent-deep:var(--wine-700);
  --gilt:var(--gold-600);
  --border:rgba(74,26,46,.12);
  --border-soft:rgba(74,26,46,.07);
  --border-gold:rgba(197,157,86,.42);

  --shell:1280px;
  --gutter:clamp(20px,5vw,56px);
  --sect:clamp(4rem,8vw,8.75rem);

  --font-display:'Cormorant Garamond','CG Fallback',Georgia,serif;
  --font-text:'Jost','Jost Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--surface);color:var(--text);
  font-family:var(--font-text);font-size:clamp(1rem,.97rem + .15vw,1.125rem);
  line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent-deep);text-underline-offset:.24em;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
/* inline content links keep a 24px tap height without changing the type size */
main a:not([class]){padding-block:3px}
::selection{background:var(--petal-300);color:var(--espresso-900)}
:focus-visible{outline:2px solid var(--gold-600);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--espresso-800);margin:0 0 .55em;text-wrap:balance;letter-spacing:-.018em}
h1{font-size:clamp(2.5rem,1.6rem + 3.2vw,4.5rem);line-height:1.06}
h2{font-size:clamp(1.9rem,1.4rem + 1.8vw,3rem);line-height:1.14}
h3{font-size:clamp(1.35rem,1.15rem + .9vw,1.9rem);line-height:1.22}
h4{font-family:var(--font-text);font-size:1.0625rem;font-weight:600;letter-spacing:.01em;line-height:1.4}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.08rem,1rem + .5vw,1.3rem);color:var(--text-soft);line-height:1.66;max-width:46ch}
.prose p,.prose li{max-width:68ch}
.prose h2{font-size:clamp(1.45rem,1.2rem + .8vw,1.95rem);margin-top:1.6em}
.prose h2:first-of-type{margin-top:0}
.prose h3{margin-top:1.4em}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:0;z-index:200;opacity:0;pointer-events:none;
  background:var(--espresso-800);color:#fff;padding:12px 18px;border-radius:0 0 12px 0;
  font-weight:600;text-decoration:none;white-space:nowrap}
.skip:focus{opacity:1;pointer-events:auto}

/* ---------- layout ---------- */
.shell{width:min(100% - (var(--gutter) * 2),var(--shell));margin-inline:auto}
.shell-narrow{width:min(100% - (var(--gutter) * 2),880px);margin-inline:auto}
section{position:relative}
.sect{padding-block:var(--sect)}
.sect-sm{padding-block:clamp(3rem,5.5vw,5.5rem)}
[id]{scroll-margin-top:120px}

/* tonal surfaces */
.s-paper{background:var(--paper)}
.s-warm{background:var(--surface-warm)}
.s-blush{background:linear-gradient(180deg,var(--blush-50) 0%,var(--petal-100) 100%)}
.s-petal{background:
  radial-gradient(120% 80% at 8% 0%,#fff 0%,rgba(255,255,255,0) 58%),
  radial-gradient(90% 70% at 92% 100%,var(--petal-200) 0%,rgba(245,222,218,0) 62%),
  var(--blush-50)}
.s-dark{background:var(--espresso-900);color:var(--text-on-dark)}
.s-dark h1,.s-dark h2,.s-dark h3{color:#FDF3EE}
.s-dark p,.s-dark li{color:var(--text-on-dark-soft)}
.s-dark .lede{color:var(--text-on-dark)}
.s-dark a{color:var(--gold-300)}

/* grain, used sparingly for depth */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(110,57,43,.10) .5px,transparent .5px);
  background-size:4px 4px;
}
.s-dark.grain::after{mix-blend-mode:screen;opacity:.25;background-image:radial-gradient(rgba(255,235,225,.13) .5px,transparent .5px)}

/* section heading block */
.hgroup{max-width:60ch}
.hgroup.center{margin-inline:auto;text-align:center}
.hgroup .rule{
  width:0;height:2px;margin-bottom:22px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-600),var(--petal-300));
  transition:width var(--t-slow) var(--ease-out);
}
.hgroup.center .rule{margin-inline:auto}
[data-shown] .rule,.hgroup[data-shown] .rule{width:64px}
html:not(.js) .hgroup .rule{width:64px}

/* ---------- buttons ---------- */
.btn{
  /* Primary buttons are the logo's gold: a lit champagne-to-gold gradient with espresso
     type. Reads bright on the espresso plaques and warm on the paper sections. */
  --btn-bg:linear-gradient(180deg,#F1DFB0 0%,#DFC078 55%,#C59D56 100%);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 30px;border:0;border-radius:var(--r-pill);
  font-family:var(--font-text);font-size:1rem;font-weight:600;letter-spacing:.005em;
  color:var(--btn-ink);text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;
  background:var(--btn-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(124,90,36,.35),
             inset 0 0 0 1px rgba(255,248,230,.35),0 1px 2px rgba(74,26,46,.18),
             0 14px 28px -14px rgba(197,157,86,.75);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out),filter var(--t-base) var(--ease-out);
}
.btn svg{width:19px;height:19px;flex:none}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.34) 50%,transparent 80%);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06) saturate(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(124,90,36,.35),inset 0 0 0 1px rgba(255,248,230,.4),0 2px 4px rgba(74,26,46,.16),0 22px 40px -18px rgba(197,157,86,.9)}
.btn:active{transform:translateY(0)}
/* a:hover{color:var(--accent)} outranks .btn's own color, so every anchor button turned its
   label dark brown on a dark wine fill - 1.5:1. Buttons restate their color for every state. */
.btn:hover,.btn:focus,.btn:focus-visible,.btn:active{color:var(--btn-ink)}
/* a gold button keeps its dark ink inside every dark section; the section link color must never bleed into it */
.s-dark a.btn:not(.btn-ghost),.plaque a.btn:not(.btn-ghost),.vband a.btn:not(.btn-ghost),.phero a.btn:not(.btn-ghost),.hero a.btn:not(.btn-ghost),.s-dark .btn:not(.btn-ghost),.s-dark a.btn:not(.btn-ghost):hover{color:var(--btn-ink)}
.btn-ghost:hover,.btn-ghost:focus,.btn-ghost:focus-visible,.btn-ghost:active{
  color:var(--espresso-800);background-color:var(--paper)
}
.s-dark .btn-ghost:hover,.plaque .btn-ghost:hover,
.s-dark .btn-ghost:focus-visible,.plaque .btn-ghost:focus-visible{color:#FFF3EC;background-color:rgba(255,244,222,.2)}
.btn:hover::after,.btn:focus-visible::after{animation:sheen 620ms var(--ease-out) 1}
@keyframes sheen{to{transform:translateX(120%)}}
.btn-ghost{
  --btn-bg:#FFFFFF;color:var(--espresso-800);
  border:1px solid var(--border-gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(197,157,86,.1),0 1px 2px rgba(74,26,46,.08);
}
.btn-ghost:hover{border-color:var(--gold-500);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 26px -16px rgba(74,26,46,.4)}
.s-dark .btn-ghost,.plaque .btn-ghost{
  color:#FFF3EC;border-color:rgba(241,223,176,.85);--btn-bg:rgba(255,244,222,.1);background:rgba(255,244,222,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.18);
}
.s-dark .btn-ghost:hover,.plaque .btn-ghost:hover{background-color:rgba(255,244,222,.2);border-color:#F1DFB0}
.btn-sm{min-height:44px;padding:10px 20px;font-size:.9375rem}
.btn:disabled,.btn[aria-disabled="true"]{filter:grayscale(.4);opacity:.72;cursor:not-allowed}

.linky{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--accent-deep);
  text-decoration:none;border-bottom:1px solid var(--border-gold);padding-bottom:3px;
  transition:border-color var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out),gap var(--t-base) var(--ease-out);
}
.linky svg{width:16px;height:16px}
.linky:hover{gap:12px;border-color:var(--gold-500)}
.s-dark .linky{color:var(--gold-300);border-color:rgba(227,201,138,.4)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:80;transition:background var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out);border-bottom:1px solid transparent}
.hdr-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);height:96px}
@media (max-width:900px){.hdr-in{height:80px}}
.hdr[data-solid],.hdr-plain{background:rgba(253,245,242,.9);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border-soft);box-shadow:0 10px 30px -24px rgba(74,26,46,.6)}
.brand{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.brand img{width:236px;height:auto}
@media (max-width:900px){.brand img{width:168px}}
.brand .on-dark{display:block}
.brand .on-light{display:none}
.hdr[data-solid] .brand .on-dark,.hdr-plain .brand .on-dark{display:none}
.hdr[data-solid] .brand .on-light,.hdr-plain .brand .on-light{display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.8vw,28px)}
/* the menu sits centered in the bar on wide screens; on narrower desktops it centers between the logo and the button */
@media (min-width:1140px){.hdr-in{position:relative}.hdr .nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}.hdr .btn.hdr-cta{margin-left:auto}}
@media (min-width:901px) and (max-width:1139px){.hdr .nav{margin-inline:auto}}
.nav a{
  font-size:.9688rem;font-weight:500;letter-spacing:.005em;color:#FFF1EA;text-decoration:none;
  padding:10px 2px;position:relative;transition:color var(--t-base) var(--ease-out)
}
.hdr[data-solid] .nav a,.hdr-plain .nav a{color:var(--text-soft)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--gold-500);transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out)}
.nav a:hover,.nav a[aria-current]{color:var(--gold-300)}
.hdr[data-solid] .nav a:hover,.hdr[data-solid] .nav a[aria-current],.hdr-plain .nav a:hover,.hdr-plain .nav a[aria-current]{color:var(--accent-deep)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.hdr .btn{margin-left:6px}
@media (max-width:900px){.nav,.hdr .btn.hdr-cta{display:none}}
@media (min-width:901px) and (max-width:1120px){.nav{gap:clamp(10px,1.4vw,18px)}.nav a{font-size:.92rem}}
.burger{
  margin-left:auto;display:none;align-items:center;justify-content:center;width:48px;height:48px;
  border:1px solid rgba(227,201,138,.45);border-radius:14px;background:rgba(255,255,255,.12);cursor:pointer
}
.hdr[data-solid] .burger,.hdr-plain .burger{border-color:var(--border);background:rgba(255,255,255,.6)}
.burger span{display:block;width:20px;height:1.5px;background:#FFF1EA;position:relative}
.hdr[data-solid] .burger span,.hdr-plain .burger span{background:var(--espresso-800)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:inherit;transition:transform var(--t-base) var(--ease-out)}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media (max-width:900px){.burger{display:flex}}

/* drawer */
.drawer{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:1fr;visibility:hidden}
.drawer[data-open]{visibility:visible}
.drawer-scrim{position:absolute;inset:0;background:rgba(52,16,31,.5);opacity:0;transition:opacity var(--t-base) var(--ease-out)}
.drawer[data-open] .drawer-scrim{opacity:1}
.drawer-panel{
  position:relative;margin-left:auto;width:min(420px,100%);height:100%;
  background:linear-gradient(180deg,var(--blush-50),var(--petal-100));
  box-shadow:var(--shadow-3);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--t-slow) var(--ease-out);
  overflow-y:auto;
}
.drawer[data-open] .drawer-panel{transform:translateX(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter) 8px}
.drawer-top img{width:196px}
.drawer-close{width:48px;height:48px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.7);cursor:pointer;font-size:22px;line-height:1;color:var(--espresso-800)}
.drawer nav{padding:12px var(--gutter) 4px}
.drawer nav a{display:flex;align-items:center;min-height:52px;font-family:var(--font-display);font-size:1.45rem;font-weight:600;color:var(--espresso-800);text-decoration:none;border-bottom:1px solid var(--border-soft)}
.drawer nav a:last-child{border-bottom:0}
.drawer-foot{margin-top:auto;padding:20px var(--gutter) calc(24px + env(safe-area-inset-bottom));display:grid;gap:12px}
.drawer-foot .btn{width:100%}
.drawer-tel{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;font-weight:600;color:var(--espresso-800);text-decoration:none}

/* ---------- hero ---------- */
/* The plaque is the site's signature device: every headline that sits over
   motion or photography is set on a solid espresso card with a gold hairline,
   the way an invitation is printed rather than laid over a picture. */
.plaque{
  position:relative;background:var(--espresso-900);
  border:1px solid rgba(227,201,138,.30);border-radius:26px;
  padding:clamp(26px,3.6vw,52px);box-shadow:var(--shadow-3);
}
/* Glass panels. They sit over the hero and band footage, so the film reads through them
   while the copy keeps its contrast. The gradient is darkest where the text starts. */
.plaque-glass{
  background:linear-gradient(152deg,rgba(52,16,31,.26) 0%,rgba(38,10,22,.38) 62%,rgba(31,8,18,.46) 100%);
  -webkit-backdrop-filter:blur(3px) saturate(108%);
  backdrop-filter:blur(3px) saturate(108%);
  border-color:rgba(227,201,138,.40);
  box-shadow:var(--shadow-3),inset 0 1px 0 rgba(255,246,241,.10);
}
.plaque-glass h1,.plaque-glass h2,.plaque-glass .lede,.plaque-glass p,.plaque-glass cite{
  text-shadow:0 1px 2px rgba(24,6,14,.62), 0 2px 12px rgba(24,6,14,.5);
}
/* Safari and Firefox without backdrop-filter get a solid-enough panel instead of a washed one. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .plaque-glass{background:linear-gradient(152deg,rgba(52,16,31,.74) 0%,rgba(28,10,4,.84) 100%)}
}
.plaque::before{
  content:"";position:absolute;left:clamp(26px,3.6vw,52px);top:0;width:72px;height:3px;
  border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--gold-500),var(--petal-300));
}
.plaque h1,.plaque h2{color:#FFF6F1}
.plaque .lede{color:#F0DCD4}

.hero{position:relative;min-height:88vh;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--espresso-900)}
@media (max-width:767px){.hero{min-height:84svh}}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(46,13,27,.9) 0,rgba(46,13,27,.9) 96px,rgba(46,13,27,0) 176px),
    linear-gradient(96deg,rgba(52,16,31,.82) 0%,rgba(52,16,31,.58) 46%,rgba(74,26,46,.24) 74%,rgba(74,26,46,.42) 100%),
    linear-gradient(180deg,rgba(52,16,31,0) 62%,rgba(52,16,31,.5) 100%);
}
.hero-in{position:relative;padding-block:clamp(9rem,19vh,13rem) clamp(3.5rem,7vh,5.5rem)}
.hero-copy{max-width:min(100%,39rem)}
.hero .plaque,.phero .plaque{padding:clamp(22px,2.7vw,40px)}
.hero h1{margin-bottom:.4em}
.hero .lede{max-width:34rem;font-size:clamp(1.06rem,1rem + .5vw,1.28rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,3vw,32px)}
.hero-verse{margin-top:clamp(24px,3.4vw,36px);padding-top:20px;border-top:1px solid rgba(227,201,138,.3);max-width:34rem}
.hero-verse p{font-family:var(--font-display);font-size:1.16rem;font-style:italic;color:#F5E4DC;margin:0}
.hero-verse cite{display:block;margin-top:8px;font-family:var(--font-text);font-style:normal;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-300)}
/* Signature motion 1: the opening lines arrive one at a time. This runs from CSS
   the moment the page paints rather than waiting on the scroll pass, so the
   largest text in the hero is never held back behind a script. */
.hero h1 .ln{display:block}
@media (prefers-reduced-motion:no-preference){
  .js .hero h1 .ln:nth-child(2),.js .hero .lede,.js .hero-actions,.js .hero-verse{animation:heroIn 520ms var(--ease-out) both}
  .js .hero h1 .ln:nth-child(2){animation-delay:90ms}
  .js .hero .lede{animation-delay:150ms}
  .js .hero-actions{animation-delay:230ms}
  .js .hero-verse{animation-delay:300ms}
}
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* page hero for interior pages */
.phero{position:relative;overflow:hidden;background:var(--espresso-900);min-height:66vh;min-height:66svh}
@media (max-width:767px){.phero{min-height:72svh}}
.phero-media{position:absolute;inset:0}
.phero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transform-origin:60% 50%}
@media (prefers-reduced-motion:no-preference){.phero-media img{animation:kb 26s var(--ease-both) infinite alternate}}
@keyframes kb{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.6%,-1.4%,0)}}
.phero-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(46,13,27,.9) 0,rgba(46,13,27,.9) 96px,rgba(46,13,27,0) 176px),
  linear-gradient(100deg,rgba(52,16,31,.82) 0%,rgba(52,16,31,.6) 52%,rgba(74,26,46,.3) 100%)}
.phero-in{position:relative;padding-block:clamp(9rem,17vh,11.5rem) clamp(4rem,8vh,6rem)}
.phero .plaque{max-width:min(100%,44rem)}
.phero h1{max-width:20ch;margin-bottom:.35em}
.phero .lede{max-width:52ch}

/* ---------- cards and media ---------- */
.frame{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--petal-100);box-shadow:var(--shadow-2)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 620ms var(--ease-out)}
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 0 0 2px rgba(197,157,86,.16);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .frame:hover img,a:hover .frame img{transform:scale(1.045)}
}
.frame-tall{aspect-ratio:4/5}
.frame-portrait{aspect-ratio:2/3}
.frame-portrait img{object-position:top}
.frame-square{aspect-ratio:1/1}
.framevid video{width:100%;height:100%;object-fit:cover;display:block}
.frame-wide{aspect-ratio:3/2}
.frame-sq{aspect-ratio:1/1}

.card{
  position:relative;border-radius:var(--r-card);padding:clamp(22px,2.6vw,34px);
  background:#FFFFFF;
  border:1px solid var(--border-soft);box-shadow:var(--shadow-1);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--border-gold)}}
.card h3{margin-bottom:.4em}
.card p{color:var(--text-soft)}
.s-dark .card{background:#63204A;border-color:rgba(227,201,138,.24)}

.tenets{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));grid-auto-rows:1fr}
.tenet{display:grid;gap:12px;padding:clamp(20px,2.2vw,28px);border-radius:18px;background:#FFFFFF;border:1px solid var(--border-soft);box-shadow:var(--shadow-1)}
.tenet .ico{width:46px;height:46px;color:var(--gold-600)}
.tenet h3{font-family:var(--font-text);font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);margin:0}
.tenet p{margin:0;font-size:.975rem;color:var(--text-soft)}

/* editorial split */
.split{display:grid;gap:clamp(28px,5vw,72px);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr .95fr}
  .split.rev > *:first-child{order:2}
}
.stack{display:grid;gap:clamp(16px,2vw,24px)}
.stack > a.btn,.stack > .btn{justify-self:start}
.mosaic{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:1fr 1fr}
.mosaic .frame:first-child{grid-column:1/-1}
@media (min-width:900px){
  .mosaic{grid-template-columns:repeat(6,1fr);grid-auto-rows:auto}
  .mosaic .frame:nth-child(1){grid-column:1/5;grid-row:1/3}
  .mosaic .frame:nth-child(2){grid-column:5/7}
  .mosaic .frame:nth-child(3){grid-column:5/7}
}

/* ---------- signature: The Season You're In ---------- */
.seasons{position:relative;display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:1fr}
@media (min-width:960px){.seasons{grid-template-columns:minmax(280px,.84fr) 1.16fr;align-items:start}}
.season-list{display:grid;gap:10px;min-width:0}
.season-btn{
  display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 18px;cursor:pointer;
  border-radius:16px;border:1px solid var(--border-soft);background:#FFFFFF;
  font-family:var(--font-text);font-size:1rem;font-weight:500;color:var(--text-soft);text-align:left;
  text-wrap:pretty;
  transition:border-color var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out),transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
.season-btn .dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--petal-300);box-shadow:0 0 0 3px rgba(239,203,199,.35);transition:background var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.season-btn:hover{border-color:var(--border-gold);transform:translateY(-1px)}}
.season-btn[aria-selected="true"]{background:#fff;color:var(--espresso-800);border-color:var(--gold-500);box-shadow:var(--shadow-1);font-weight:600}
.season-btn[aria-selected="true"] .dot{background:var(--gold-500);box-shadow:0 0 0 4px rgba(197,157,86,.25)}
.season-panels{position:relative;min-width:0}
.season-panel{
  border-radius:var(--r-card);overflow:hidden;border:1px solid var(--border-gold);
  background:#FFFFFF;box-shadow:var(--shadow-2);
}
.season-panel[hidden]{display:none}
.season-panel + .season-panel{margin-top:16px}
.season-panel .inner{padding:clamp(24px,3vw,40px)}
.season-panel h3{margin-bottom:.45em}
.season-panel .verse{margin:18px 0;padding:16px 20px;border-left:2px solid var(--gold-500);background:var(--petal-100);border-radius:0 12px 12px 0}
.season-panel .verse p{font-family:var(--font-display);font-size:1.14rem;font-style:italic;color:var(--espresso-700);margin:0}
.season-panel .verse cite{display:block;margin-top:6px;font-family:var(--font-text);font-style:normal;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-700)}
.season-panel .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.season-panel .acts .btn{min-height:48px}
.season-note{margin-top:18px;font-size:.94rem;color:var(--text-muted)}

/* ---------- timeline ---------- */
.tl{position:relative;display:grid;gap:clamp(22px,3vw,38px)}
.tl::before{content:"";position:absolute;left:13px;top:10px;bottom:10px;width:1px;background:linear-gradient(180deg,var(--gold-500),var(--petal-300))}
@media (min-width:900px){.tl::before{left:50%}}
.tl-item{position:relative;padding-left:48px}
@media (min-width:900px){
  .tl-item{padding-left:0;width:calc(50% - 40px)}
  .tl-item:nth-child(odd){margin-right:auto;text-align:right}
  .tl-item:nth-child(even){margin-left:auto}
}
.tl-item::before{content:"";position:absolute;left:7px;top:12px;width:13px;height:13px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 4px var(--blush-50)}
@media (min-width:900px){
  .tl-item:nth-child(odd)::before{left:auto;right:-46px}
  .tl-item:nth-child(even)::before{left:-46px}
}
.tl.tl-rail::before{left:13px}
@media (min-width:900px){
  .tl.tl-rail::before{left:13px}
  .tl.tl-rail .tl-item{padding-left:48px;width:auto;margin:0;text-align:left}
  .tl.tl-rail .tl-item::before{left:7px;right:auto}
}
.tl-when{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-700);font-weight:600}
.tl-item h3{margin:.35em 0 .3em;font-size:clamp(1.25rem,1.1rem + .55vw,1.6rem)}
.tl-item p{color:var(--text-soft);margin:0}
.tl-where{margin-top:10px;font-size:.92rem;color:var(--text-muted);display:flex;align-items:center;gap:7px}
.tl-where svg{flex:none}

/* ---------- comparison ---------- */
.ways{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:1fr}
@media (min-width:760px){.ways{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.ways{grid-template-columns:repeat(4,1fr)}
.ways.ways-3{grid-template-columns:repeat(3,1fr)}
.ways.ways-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.tenets.tenets-6{grid-template-columns:repeat(3,1fr)}}
.way{display:flex;flex-direction:column;gap:10px}
.way h3{font-size:1.3rem;margin:0}
.way ul{margin:6px 0 0;padding-left:0;list-style:none;display:grid;gap:8px}
.way li{position:relative;padding-left:22px;font-size:.96rem;color:var(--text-soft)}
.way li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--gold-500)}
.way.feature{background:var(--petal-100);border-color:var(--border-gold);box-shadow:var(--shadow-2)}

/* numbered steps (join page) */
.steps{margin:22px 0 0;padding:0;list-style:none;counter-reset:step;display:grid;gap:12px}
.steps li{position:relative;padding-left:44px;counter-increment:step;color:var(--text-soft);line-height:1.6}
.steps li::before{content:counter(step);position:absolute;left:0;top:.05em;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--espresso-800);background:var(--petal-100);border:1px solid var(--border-gold)}
.steps li strong{color:var(--espresso-800)}

/* stat tiles (build walkthrough) */
.stat{text-align:center}
.tenets .tenet.stat p.num{font-family:var(--font-display);font-size:clamp(2.4rem,1.6rem + 2.4vw,3.6rem);font-weight:600;line-height:1;color:var(--espresso-800);margin:0 0 6px}
.stat p{margin:0}
@media (min-width:900px){.tenets.tenets-4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.tenets.tenets-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:760px){.tenets.tenets-2{grid-template-columns:repeat(2,1fr)}}
/* login boxes on the walkthrough: email, password and door, each on its own line */
.cred{display:grid;gap:8px;margin:16px 0;padding:14px 16px;border-radius:14px;background:var(--petal-100);border:1px solid var(--border-gold)}
.cred>div{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:baseline}
.cred dt{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);font-weight:700}
.cred dd{margin:0;font-weight:600;color:var(--espresso-800);overflow-wrap:anywhere;user-select:all}
.cred dd a{font-weight:600}
.seat .eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);font-weight:700;margin:0 0 6px}
.seat-owner{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(197,157,86,.14),var(--shadow-1)}
.seat .hint{margin-top:auto}
@media (max-width:480px){.cred>div{grid-template-columns:1fr;gap:2px}}

/* screenshot gallery (build walkthrough) */
.shots{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:clamp(24px,3vw,38px)}
.shots .shot{padding:0;overflow:hidden;text-decoration:none}
.shots .shot img{width:100%;height:auto;aspect-ratio:1280/800;object-fit:cover;object-position:top;border-bottom:1px solid var(--border-soft);background:var(--petal-100)}
.shots .shot h3{margin:14px 18px 4px}
.shots .shot p{margin:0 18px 10px}
.shots .shot .linky{margin:auto 18px 16px;align-self:flex-start}
.shots .shot p{flex:none}
.shots-phone{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.shots-phone .shot img{aspect-ratio:390/844;object-fit:cover;object-position:top}

/* cost bar */
.costbar{display:grid;gap:14px;margin-top:clamp(20px,2.6vw,30px)}
.cost-row{display:grid;gap:8px}
.cost-row .lbl{display:flex;justify-content:space-between;gap:16px;font-size:.95rem;font-weight:500}
.cost-row .lbl span:last-child{color:var(--text-muted);font-weight:400}
/* No progress bars here. There are no prices on this site, so a part-filled bar beside the
   words "Always free" was drawing a quantity that does not exist. A hairline separates rows. */
.cost-row{border-bottom:1px solid var(--border-soft);padding-bottom:12px}
.cost-row:last-child{border-bottom:0}
.cost-row .lbl{align-items:baseline}
@media (max-width:520px){.cost-row .lbl{flex-direction:column;gap:2px}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:900px}
.qa{border:1px solid var(--border-soft);border-radius:16px;background:#FFFFFF;overflow:hidden;transition:border-color var(--t-base) var(--ease-out)}
.qa:hover{border-color:var(--border-gold)}
.qa > button{
  display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;
  padding:20px clamp(18px,2.2vw,26px);border:0;background:transparent;cursor:pointer;text-align:left;
  font-family:var(--font-text);font-size:1.03rem;font-weight:600;color:var(--espresso-800);line-height:1.45;
}
.qa .chev{flex:none;width:22px;height:22px;color:var(--gold-600);transition:transform var(--t-base) var(--ease-out)}
.qa > button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.qa-body{height:0;overflow:hidden;transition:height var(--t-base) var(--ease-both)}
html:not(.js) .qa-body{height:auto}
.qa-body .in{padding:0 clamp(18px,2.2vw,26px) 22px;color:var(--text-soft)}
.qa-body .in p{max-width:70ch}
.faq-more{margin-top:20px}

/* ---------- forms ---------- */
.form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field label{font-size:.9rem;font-weight:600;color:var(--espresso-800)}
.field .hint{font-size:.85rem;color:var(--text-muted);font-weight:400}
.field input,.field textarea,.field select{
  width:100%;min-height:52px;padding:14px 18px;border-radius:14px;
  border:1px solid var(--border);background:#FFFFFF;
  font-family:var(--font-text);font-size:1rem;color:var(--text);
  transition:border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--gold-500);box-shadow:0 0 0 4px rgba(197,157,86,.18)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#A3352F;box-shadow:0 0 0 4px rgba(163,53,47,.12)}
.err{font-size:.86rem;color:#8C2B26;min-height:0}
.checkline{display:flex;align-items:flex-start;gap:12px;font-size:.95rem;color:var(--text-soft)}
.checkline input{width:24px;height:24px;min-height:0;flex:none;margin-top:2px;accent-color:var(--rose-600)}
.formnote{
  padding:16px 20px;border-radius:14px;border:1px dashed var(--border-gold);
  background:var(--petal-100);font-size:.93rem;color:var(--text-soft)
}
.formstatus{font-size:.95rem;font-weight:600;color:var(--accent-deep)}

/* ---------- footer ---------- */
.ftr{position:relative;background:
    radial-gradient(120% 90% at 12% 0%,rgba(160,48,96,.42) 0%,rgba(52,16,31,0) 62%),
    radial-gradient(90% 80% at 92% 8%,rgba(124,90,36,.22) 0%,rgba(52,16,31,0) 58%),
    var(--espresso-900);
  color:var(--text-on-dark-soft);padding-block:clamp(3.5rem,6vw,5.5rem) 0}
/* a drawn gold hairline instead of a flat border, so the seam under the closing band reads */
.ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(227,201,138,0) 0%,rgba(227,201,138,.55) 22%,rgba(227,201,138,.55) 78%,rgba(227,201,138,0) 100%)}
.ftr-tag{font-family:var(--font-text);font-size:.76rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-500);margin:-4px 0 16px}
.ftr-note .nb{white-space:nowrap}
.ftr-note{max-width:74ch;margin-top:clamp(30px,4vw,46px);font-size:.82rem;line-height:1.6;
  color:rgba(240,220,212,.66)}
.ftr-grid{display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:1fr}
@media (min-width:760px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1080px){.ftr-grid{grid-template-columns:1.5fr .9fr .9fr 1.1fr}}
.ftr img.flogo{width:280px;height:auto;margin-bottom:18px}
.ftr h2{color:#FBEDE7;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr a{display:inline-block;padding-block:3px;color:var(--text-on-dark-soft);text-decoration:none;transition:color var(--t-base) var(--ease-out)}
.ftr .socials a{padding-block:0}
.ftr .flogo{padding-block:0}
.ftr a:hover{color:var(--gold-300)}
.ftr .cline{display:flex;align-items:center;gap:11px}
.ftr .cline svg{width:18px;height:18px;flex:none;color:var(--gold-500)}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(227,201,138,.3);transition:border-color var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out)}
.socials svg{width:20px;height:20px}
.socials a:hover{border-color:var(--gold-500);background:rgba(197,157,86,.12)}
.ftr-base{margin-top:clamp(18px,2.4vw,26px);padding-block:22px calc(22px + env(safe-area-inset-bottom));border-top:1px solid rgba(227,201,138,.18);display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;font-size:.875rem}
.ftr-legal{display:flex;flex-wrap:wrap;gap:18px}
.ftr-legal a{padding-block:4px}
.powered{color:var(--text-on-dark-soft)}
.powered a{display:inline-block;padding-block:4px;color:var(--text-on-dark-soft);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(227,201,138,.4)}
.powered a:hover{color:var(--gold-300)}

/* ---------- sticky mobile bar ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(253,245,242,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--border-soft);box-shadow:0 -12px 30px -24px rgba(74,26,46,.7);
}
/* The bar is fixed over the page, so the page has to end above it - otherwise the last
   69px of every route (a form field, the hero scripture, a link row) sits underneath it. */
/* Corey, 2026-08-28: the mobile bar is gone on every page. The header carries the actions. */
.sticky{display:none !important}
.sticky a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--r-pill);font-size:.9375rem;font-weight:600;text-decoration:none}
.sticky .icon-only{width:52px;border:1px solid var(--border-gold);color:var(--espresso-800);background:rgba(255,255,255,.7)}
.sticky .icon-only svg{width:20px;height:20px}
.sticky .s-ghost{border:1px solid var(--border-gold);color:var(--espresso-800);background:rgba(255,255,255,.7)}
.sticky .s-main{color:var(--btn-ink);background:linear-gradient(180deg,#F1DFB0,#C59D56);box-shadow:0 10px 22px -14px rgba(197,157,86,.8)}

/* ---------- video band ---------- */
.vband{position:relative;overflow:hidden;background:var(--espresso-900)}
.vband > .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
@media (prefers-reduced-motion:no-preference){.vband > img.bg{animation:kb 30s var(--ease-both) infinite alternate}}
.vband .scrim{backdrop-filter:none}
.vband .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(52,16,31,.34),rgba(107,34,48,.3))}
.vband .vin{position:relative;padding-block:clamp(4.5rem,9vw,8rem)}
.vband .plaque{max-width:820px;margin-inline:auto;text-align:center}
.vband .plaque::before{left:50%;transform:translateX(-50%)}
.vband h2{color:#FFF6F1}
.vband p{color:#F0DCD4}

/* ---------- quotes ---------- */
.quote{
  position:relative;padding:clamp(26px,3.4vw,44px);border-radius:var(--r-card);
  background:var(--petal-100);
  border:1px solid var(--border-gold);box-shadow:var(--shadow-1);
}
.quote p{font-family:var(--font-display);font-size:clamp(1.2rem,1.05rem + .7vw,1.62rem);line-height:1.42;color:var(--espresso-700);font-style:italic}
.quote .attrib{margin-top:14px;font-family:var(--font-text);font-style:normal;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-700)}
.s-dark .quote{background:#63204A;border-color:rgba(227,201,138,.28)}
.s-dark .quote p{color:#FBEDE7}

/* ---------- links page ---------- */
.linkstack{display:grid;gap:12px;max-width:520px;margin-inline:auto}
.linkbtn{
  display:flex;align-items:center;gap:14px;min-height:60px;padding:14px 22px;border-radius:18px;
  text-decoration:none;color:var(--espresso-800);font-weight:600;
  background:#FFFFFF;border:1px solid var(--border-gold);
  box-shadow:var(--shadow-1);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
.linkbtn svg{width:22px;height:22px;color:var(--gold-600);flex:none}
@media (hover:hover) and (pointer:fine){.linkbtn:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}}

/* ---------- reveal engine ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px)}
[data-reveal][data-shown]{opacity:1;transform:none;transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .frame img{transition:none}
}

/* ---------- misc ---------- */
.eyebrowless{margin-top:0}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-gold),transparent);border:0;margin:0}
.notice{padding:18px 22px;border-radius:16px;background:var(--petal-100);border:1px solid var(--border-gold);color:var(--text-soft);font-size:.96rem}
.notice strong{color:var(--espresso-800)}
.map{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--border-gold);box-shadow:var(--shadow-1)}
.map iframe{display:block;width:100%;height:min(58vw,440px);border:0}

@media print{
  .hdr,.sticky,.drawer,.hero-media,.vband video{display:none !important}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}

/* ---------- touch comfort ----------
   On a phone every standalone link gets a 44px tall hit area. Links that sit inside a
   sentence are left alone: padding there would break the line box, and WCAG exempts them. */
@media (max-width:767px){
  .ftr ul a,.ftr-legal a,.powered a{padding-block:9px}
  .ftr ul{gap:4px}
  .ftr .cline{min-height:44px}
  .linky{padding-block:8px}
  .checkline{min-height:44px;align-items:center}
  .checkline input{width:26px;height:26px;margin-top:0}
  .socials a{width:46px;height:46px}
}

/* Card CTAs sit on one baseline across a row even when the bullet lists differ in length. */
.way,.card{display:flex;flex-direction:column}
.way > a:last-child,.card > a:last-child{margin-top:auto}

/* The sticky bar is 69px tall. Bottom-aligned hero copy has to end above it, or the last
   line of a hero (the scripture on the home page) sits underneath the bar at first paint. */
@media (max-width:900px){
  .hero-in{padding-bottom:calc(clamp(3.5rem,7vh,5.5rem) + 74px)}
  .phero-in{padding-bottom:calc(clamp(3.5rem,7vh,5.5rem) + 74px)}
}

/* ---------- headline accent ----------
   One or two words per headline in a moving metallic gold, pale champagne into deep gold,
   the same family as the buttons. Over cream sections the range starts a step deeper so
   the word still reads; over footage and dark bands it runs bright. */
.pop{
  background-image:linear-gradient(96deg,
    var(--pop-a,#CFA94F) 0%, var(--pop-b,#EBD08E) 22%, var(--pop-c,#C59D56) 44%,
    var(--pop-d,#9C7530) 62%, var(--pop-b,#EBD08E) 82%, var(--pop-a,#CFA94F) 100%);
  background-size:280% 100%;
  background-position:12% 50%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  padding-inline:.02em;
}
.plaque .pop,.s-dark .pop,.vband .pop,.hero .pop,.phero .pop,.ftr .pop,.hdr .pop{
  --pop-a:#F6E7BF;--pop-b:#FFF6DA;--pop-c:#EBCF8A;--pop-d:#D9B25E;
  text-shadow:none;filter:drop-shadow(0 2px 5px rgba(24,6,14,.45));
}
.pop{text-shadow:none}
@media (prefers-reduced-motion:no-preference){
  .pop{animation:popsheen 7s cubic-bezier(.45,0,.55,1) infinite}
}
@keyframes popsheen{
  0%   {background-position:8% 50%}
  50%  {background-position:92% 50%}
  100% {background-position:8% 50%}
}

/* The new hero clip is shot high key against a white wall. On a phone the panel spans almost
   the full width, so that wall sits directly behind the body copy and the lighter glass alone
   does not hold 4.5:1. An extra tint on the scrim, not on the panel, keeps the panel looking
   as transparent as it does on desktop while the type stays legible. Measured, not guessed. */
@media (max-width:900px){
  .hero-scrim::after{content:"";position:absolute;inset:0;background:rgba(28,10,4,.32)}
  .phero-scrim::after{content:"";position:absolute;inset:0;background:rgba(28,10,4,.38)}
}

/* Footer nav links carry the same 17px stroke glyphs the contact column already uses, so the
   three columns read as one system instead of two labelled lists and one iconed one. */
.ftr-nav a{display:flex;align-items:center;gap:11px}
.ftr-nav svg{width:17px;height:17px;flex:none;color:var(--gold-500);opacity:.85;
  transition:opacity var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out)}
.ftr-nav a:hover svg{opacity:1;color:var(--gold-300)}

/* The inner-page heroes sit on darker footage than the home page, so their panels can carry
   far less tint and still hold contrast. Measured per page over the brightest frame. */
.phero .plaque-glass{
  background:linear-gradient(152deg,rgba(52,16,31,.18) 0%,rgba(38,10,22,.28) 62%,rgba(31,8,18,.36) 100%);
}