/* ===========================================================
   Alisa Pose — "The Lit Arch"
   Palette traced to her room: near-black off the arch surround,
   glow off the LED mirrors, brass off the rods and pendants,
   red off the gerberas on the patio table.
   =========================================================== */

@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-300i.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/CormorantGaramond-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Mulish';src:url('../fonts/Mulish-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Mulish';src:url('../fonts/Mulish-300i.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Mulish';src:url('../fonts/Mulish-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Mulish';src:url('../fonts/Mulish-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#0E0C09;          /* near-black ground */
  --ink-2:#171310;
  --glow:#FFF3D6;         /* LED arch glow */
  --brass:#B08D57;
  --brass-lo:#7A5F36;
  --bone:#F2EDE4;
  --red:#B4202C;
  /* Opaque rather than rgba so the contrast ratio is a fixed,
     checkable number: 5.69:1 on --ink, clears WCAG AA. */
  --muted:#8E8A84;
  --rule:rgba(176,141,87,.28);

  --arch-door:60% 60% 0 0 / 100% 46% 0 0;  /* her doorway: broad, shallow */
  --arch-mirror:50% 50% 0 0 / 62% 62% 0 0; /* her mirrors: tall, near-semicircle */

  --pad:clamp(1.25rem,5vw,5.5rem);
  --serif:'orpheuspro','Cormorant Garamond',Georgia,serif;
  --sans:'Mulish',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-weight:300;font-size:clamp(1rem,.55vw + .88rem,1.125rem);
  line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:.94;letter-spacing:-.015em}

/* Extreme scale contrast — the award-site tell */
.display{font-size:clamp(2.9rem,9.2vw,10.5rem)}
.h2{font-size:clamp(2.1rem,5.6vw,5.25rem)}
.h3{font-size:clamp(1.5rem,2.6vw,2.5rem)}
.label{
  font-family:var(--sans);font-size:.68rem;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
}
.lede{font-size:clamp(1.05rem,1.35vw,1.35rem);color:var(--muted);max-width:46ch}

.wrap{max-width:1560px;margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}

/* ---------- SplitType kinetic reveal ----------
   The line box is the mask for the word stagger, but with line-height
   below 1 the mask edge sits above the font's descender, so Orpheus's
   italic 'g' swash gets sliced off ("San Diego"). Pad the mask down and
   pull the same amount back off the layout: the reveal still works, the
   descenders survive, and line spacing is unchanged. */
.split .line{overflow:hidden;display:block;padding-bottom:.22em;margin-bottom:-.22em}
.split .word{display:inline-block;will-change:transform}
/* pre-hide only when JS is driving; no-JS keeps text visible */
.js .reveal{opacity:0}

/* ---------- 0 · Preloader: the arch draws, then opens ---------- */
#preloader{
  position:fixed;inset:0;z-index:100;background:var(--ink);
  display:grid;place-items:center;
}
#preloader .pl-arch{width:min(30vw,190px);aspect-ratio:1/1.35;
  border:1px solid var(--rule);border-radius:var(--arch-mirror);
  display:grid;place-items:end center;padding-bottom:1.1rem;position:relative;
}
#preloader .pl-fill{
  position:absolute;inset:0;border-radius:var(--arch-mirror);
  background:radial-gradient(120% 80% at 50% 100%, rgba(255,243,214,.20), transparent 68%);
  transform:scaleY(0);transform-origin:bottom;
}
#preloader .pl-num{font-family:var(--serif);font-size:1.4rem;color:var(--brass);position:relative}
#preloader .pl-mark{position:absolute;top:var(--pad);left:var(--pad)}
.pl-curtain{position:fixed;inset:0;z-index:99;background:var(--ink);transform-origin:top;pointer-events:none}


/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem var(--pad);
  mix-blend-mode:difference;
}
.nav__mark{font-family:var(--serif);font-size:1.22rem;letter-spacing:.06em;
           display:inline-flex;align-items:center;gap:.5em}
/* Her silhouette mark. Height is tied to the wordmark so it scales with it
   in both the bar and the footer, where the type steps up to 1.6rem. */
.nav__sig{width:auto;height:1.5em;flex:none}
.nav__sig--foot{height:1.25em}
.nav__mark em{font-style:italic;color:var(--brass)}
.nav__links{display:flex;gap:clamp(1rem,2.4vw,2.4rem);align-items:center}
.nav__links a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;position:relative}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:-5px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:720px){.nav__links a:not(.nav__cta){display:none}}

/* ---------- 1 · Hero ---------- */
.hero{min-height:100svh;display:grid;align-items:end;padding-bottom:clamp(2rem,6vh,5rem);overflow:hidden}
.hero__media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.hero__media img{
  width:100%;height:118%;object-fit:cover;object-position:50% 30%;
  will-change:transform;                      /* parallax target */
}
.hero__media::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 50% 34%, rgba(255,243,214,.16), transparent 70%),
    linear-gradient(to top, var(--ink) 4%, rgba(14,12,9,.72) 38%, rgba(14,12,9,.30) 72%);
}
.hero__inner{position:relative;z-index:1;width:100%}
.hero__eyebrow{margin-bottom:clamp(1rem,3vh,2rem)}
.hero h1{max-width:16ch}
.hero h1 em{font-style:italic;color:var(--glow)}
.hero__foot{
  margin-top:clamp(1.6rem,4vh,2.8rem);display:flex;flex-wrap:wrap;
  gap:clamp(1rem,3vw,3rem);align-items:flex-end;justify-content:space-between;
}
.hero__sub{max-width:38ch;color:var(--muted);font-size:1rem}
.scroll-cue{display:flex;align-items:center;gap:.7rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.scroll-cue span.bar{display:block;width:52px;height:1px;background:var(--brass);transform-origin:left}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:1.02rem 1.7rem;border:1px solid var(--brass);
  border-radius:var(--arch-door);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  position:relative;overflow:hidden;color:var(--glow);
}
.btn span{position:relative;z-index:1}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--brass);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::before{transform:scaleY(1)}
.btn:hover span{color:var(--ink)}
.btn--solid{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.btn--solid::before{background:var(--glow)}

/* ---------- 2 · Marquee credential strip ---------- */
.strip{border-block:1px solid var(--rule);padding:1.05rem 0;overflow:hidden;background:var(--ink-2)}
.strip__track{display:flex;gap:3.2rem;width:max-content;will-change:transform}
.strip__track>*{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:3.2rem;
}
.strip__track i{width:4px;height:4px;background:var(--brass);border-radius:50%;display:inline-block}

/* ---------- 3 · Story pull ---------- */
.story{padding-block:clamp(6rem,17vh,13rem)}
.story__grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
@media(min-width:900px){.story__grid{grid-template-columns:1.05fr .95fr}}
.story blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,3.1rem);line-height:1.14;font-weight:400}
.story blockquote em{font-style:italic;color:var(--brass)}
.story__attr{margin-top:2rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.figure{position:relative;overflow:hidden}
.figure--arch{border-radius:var(--arch-mirror)}
.figure img{width:100%;will-change:transform}
.figure__mask{position:absolute;inset:0;background:var(--ink);transform-origin:bottom;z-index:2}

/* ---------- 4 · Methods (pinned horizontal) ---------- */
.methods{background:var(--ink-2)}
.methods__head{padding-block:clamp(4.5rem,11vh,8rem) clamp(2rem,5vh,3.5rem)}
.methods__head p{margin:1.4rem 0 0}
.pin{height:100svh;overflow:hidden;display:flex;align-items:center}
.pin__track{display:flex;gap:clamp(1.25rem,2.4vw,2.4rem);padding-inline:var(--pad);will-change:transform}
.method{
  flex:0 0 auto;width:min(80vw,440px);
  border:1px solid var(--rule);border-radius:var(--arch-door);
  padding:clamp(1.5rem,2.4vw,2.3rem);
  display:flex;flex-direction:column;gap:1.15rem;
  background:linear-gradient(to bottom, rgba(255,243,214,.045), transparent 55%);
}
.method__n{font-family:var(--serif);font-size:2.6rem;color:var(--brass-lo);line-height:1}
.method h3{margin-top:-.35rem}
.method p{margin:0;font-size:.95rem;color:var(--muted)}
.method ul{margin:.2rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem}
.method li{font-size:.82rem;color:var(--muted);padding-left:1.15rem;position:relative}
.method li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--brass)}
.method__time{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--rule);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.pin__hint{position:absolute;bottom:clamp(1.5rem,4vh,3rem);left:var(--pad);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- 5 · Colour match ---------- */
.match{padding-block:clamp(6rem,16vh,12rem)}
.match__grid{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.match__grid{grid-template-columns:.9fr 1.1fr}}

/* ---------- 6 · Gallery ---------- */
.gallery{padding-bottom:clamp(5rem,13vh,10rem)}
.gallery__grid{display:grid;gap:clamp(.65rem,1.4vw,1.35rem);grid-template-columns:repeat(6,1fr)}
.gallery__grid .figure{grid-column:span 6}
@media(min-width:760px){
  .gallery__grid .figure{grid-column:span 2}
  .gallery__grid .figure.tall{grid-row:span 2}
  .gallery__grid .figure.wide{grid-column:span 4}
}
.gallery .figure img{aspect-ratio:3/4;object-fit:cover}
.gallery .figure.wide img{aspect-ratio:16/10}
.gallery .figure.tall img{aspect-ratio:3/5}

/* Instagram and the Google listing, in the footer. These are the links that
   let a search engine tie the domain to the real business. */
.foot__social{display:flex;gap:1.2rem;margin-top:1.1rem;list-style:none;padding:0}
.foot__social a{font-size:.72rem;font-weight:700;letter-spacing:.14em;
                text-transform:uppercase}

/* ---------- 6b · Before and after ----------
   These are 800x530 composites, so the aspect ratio is pinned to the file
   and object-fit is contain: cropping one would cut off the before. */
.ba{padding-block:clamp(5rem,13vh,9rem);border-top:1px solid var(--rule)}
.ba__head{max-width:56ch;margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.ba__head .h2{margin-top:1.4rem}
.ba__head .lede{margin-top:1.6rem}
.ba__grid{display:grid;gap:clamp(.9rem,2vw,1.8rem);grid-template-columns:1fr;
          list-style:none;margin:0;padding:0}
@media(min-width:900px){.ba__grid{grid-template-columns:1fr 1fr}}
.ba__item figure{margin:0}
.ba__item img{width:100%;height:auto;aspect-ratio:800/530;object-fit:contain;
              background:var(--ink);display:block}

/* ---------- 7 · About ---------- */
.about{padding-block:clamp(6rem,16vh,12rem);border-top:1px solid var(--rule)}
.about__grid{display:grid;gap:clamp(2.5rem,6vw,6rem);grid-template-columns:1fr}
@media(min-width:900px){.about__grid{grid-template-columns:.85fr 1.15fr}}
.about__body p{color:var(--muted);max-width:60ch}
.about__body p+p{margin-top:1.35rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;border-top:1px solid var(--rule);padding-top:2rem}
.stats dt{font-family:var(--serif);font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1;color:var(--glow)}
.stats dd{margin:.55rem 0 0;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- 8 · CTA ---------- */
.cta{position:relative;min-height:88svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:var(--pad)}
.cta__media{position:absolute;inset:0;z-index:0}
.cta__media img{width:100%;height:114%;object-fit:cover;object-position:50% 35%;will-change:transform}
.cta__media::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,12,9,.80),rgba(14,12,9,.62))}
.cta__inner{position:relative;z-index:1;display:grid;justify-items:center;gap:1.9rem}
.cta h2{max-width:14ch}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--rule);padding-block:clamp(3rem,7vh,5rem) 2.2rem}
.foot__grid{display:grid;gap:2.4rem;grid-template-columns:1fr}
@media(min-width:760px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot h4{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:0 0 1.1rem;font-weight:400}
.foot p,.foot li{color:var(--muted);font-size:.92rem;margin:0}
.foot ul{list-style:none;padding:0;display:grid;gap:.55rem}
.foot__base{margin-top:3.2rem;padding-top:1.5rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.7rem;letter-spacing:.1em;color:var(--muted)}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important}
  .figure__mask{display:none}
  .strip__track{animation:none}
  #preloader{display:none}
  *{scroll-behavior:auto!important}
}

/* ---------- 8 · FAQ ---------- */
.faq{padding-block:clamp(5rem,14vh,10rem);border-top:1px solid var(--rule)}
.faq__grid{display:grid;gap:clamp(2.5rem,5vw,5rem);grid-template-columns:1fr}
@media(min-width:900px){.faq__grid{grid-template-columns:.8fr 1.2fr;align-items:start}
  .faq__head{position:sticky;top:clamp(5rem,14vh,9rem)}}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{
  list-style:none;cursor:pointer;padding:1.5rem 2.5rem 1.5rem 0;position:relative;
  display:block;transition:color .3s;
}
.qa summary::-webkit-details-marker{display:none}
.qa__q{font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.65rem);font-weight:400;margin:0;line-height:1.2}
.qa summary::after{
  content:'';position:absolute;right:.35rem;top:50%;width:13px;height:1px;
  background:var(--brass);transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.qa summary::before{
  content:'';position:absolute;right:.35rem;top:50%;width:13px;height:1px;
  background:var(--brass);transform:rotate(90deg);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.qa[open] summary::before{transform:rotate(0deg)}
.qa summary:hover .qa__q{color:var(--glow)}
.qa__a{padding:0 clamp(1rem,4vw,3.5rem) 1.7rem 0}
.qa__a p{margin:0;color:var(--muted);font-size:.98rem}
.qa__a a{color:var(--glow);border-bottom:1px solid var(--rule)}

/* ---------- Consent bar ---------- */
.consent{
  position:fixed;left:var(--pad);right:var(--pad);bottom:1.1rem;z-index:80;
  background:var(--ink-2);border:1px solid var(--rule);border-radius:6px;
  padding:1rem 1.2rem;display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;
  max-width:640px;margin-inline:auto;
}
.consent p{margin:0;font-size:.82rem;color:var(--muted);flex:1 1 260px}
.consent__btns{display:flex;gap:.6rem}
.consent button{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.65rem 1.1rem;border:1px solid var(--rule);background:none;color:var(--bone);cursor:pointer;
}
.consent button[data-consent="granted"]{background:var(--brass);color:var(--ink);border-color:var(--brass)}

/* CTA that has no destination yet must not look clickable */
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn[aria-disabled="true"]::before{display:none}

/* Screen-reader-only NAP for crawlers that ignore the footer layout */
.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}

/* ---------- Tap targets: the two conversion links must clear 44px.
     Google's mobile usability check flags anything smaller, and these
     are literally the "book" and "call" actions.                   ---------- */
.nav__links a.nav__cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 1.15rem;
  border:1px solid currentColor;border-radius:var(--arch-door);
}
.nav__links a.nav__cta::after{display:none}
.foot address a,
.foot a[href^="tel:"]{
  display:inline-flex;align-items:center;min-height:44px;
}
.qa summary{min-height:44px}

/* ---------- Nav legibility.
     mix-blend-mode:difference reads beautifully over the dark body but
     collapses over the bright top of the hero photo. Give the bar its
     own scrim so the links clear contrast on every background. ---------- */
.nav{mix-blend-mode:normal}
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(14,12,9,.72), rgba(14,12,9,0));
}
.nav__mark,.nav__links a{text-shadow:0 1px 14px rgba(14,12,9,.75)}

/* Hero: darken the top band so the eyebrow and nav always hold up. */
.hero__media::after{
  background:
    radial-gradient(70% 55% at 50% 34%, rgba(255,243,214,.16), transparent 70%),
    linear-gradient(to bottom, rgba(14,12,9,.58) 0%, rgba(14,12,9,.10) 22%, transparent 40%),
    linear-gradient(to top, var(--ink) 4%, rgba(14,12,9,.74) 40%, rgba(14,12,9,.32) 72%);
}
.hero__eyebrow{color:var(--glow);text-shadow:0 1px 12px rgba(14,12,9,.8)}


/* ---------- Text rendering.
     Chrome paints non-composited text with LCD subpixel antialiasing,
     which fringes light-on-dark type with purple and orange. Measured
     at 9.4% coloured pixels across a paragraph. Promoting the prose to
     its own layer switches it to grayscale AA: measured 0.0%.
     Scoped to text blocks so we are not promoting the whole document. ---------- */
.lede,.hero__sub,.story blockquote,.about__body,.method p,.method li,
.qa__a,.stats dd,.foot p,.foot li,.label,.method__time{
  transform:translateZ(0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===========================================================
   MOBILE
   =========================================================== */

/* The pinned rail is a desktop move. At 390px a card plus gutters is
   wider than the viewport, so a pinned track can only ever show two
   clipped half-cards. Below 900px the same markup becomes a native
   scroll-snap carousel: one whole card at a time, swiped. */
@media (max-width:899px){
  .pin{height:auto;overflow:visible;display:block}
  .pin__track{
    transform:none!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-block:.5rem 1.75rem;
  }
  .pin__track::-webkit-scrollbar{display:none}
  .method{width:min(84vw,420px);scroll-snap-align:center;flex-shrink:0}
  .pin__hint{position:static;padding:0 var(--pad) 3rem}
}
.hint-m{display:none}
@media (max-width:899px){ .hint-d{display:none} .hint-m{display:inline} }

/* Mobile menu */
.nav__burger{
  display:none;width:44px;height:44px;padding:0;border:0;background:none;
  cursor:pointer;position:relative;color:inherit;
}
.nav__burger span{
  position:absolute;left:11px;width:22px;height:1px;background:currentColor;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s;
}
.nav__burger span:first-child{top:19px}
.nav__burger span:last-child{top:25px}
body.menu-open .nav__burger span:first-child{transform:translateY(3px) rotate(45deg)}
body.menu-open .nav__burger span:last-child{transform:translateY(-3px) rotate(-45deg)}
@media (max-width:720px){ .nav__burger{display:block} }

.navmenu{
  position:fixed;inset:0;z-index:59;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:2.5rem;
  padding:var(--pad);
}
.navmenu[hidden]{display:none}
.navmenu nav{display:grid;gap:.35rem}
.navmenu nav a{
  font-family:var(--serif);font-size:clamp(2rem,9vw,3rem);line-height:1.18;
  display:block;padding:.15em 0;
}
.navmenu__foot{display:grid;gap:.5rem;border-top:1px solid var(--rule);padding-top:1.5rem}
.navmenu__foot a{font-size:.92rem;color:var(--muted);min-height:44px;display:flex;align-items:center}
body.menu-open{overflow:hidden}

/* The fixed wordmark sat directly on top of the footer's "Visit" heading.
   Give the footer room to clear it. */
@media (max-width:720px){
  .foot{padding-top:clamp(4rem,10vh,6rem)}
}


/* Guard. `.wrap` and a section class have equal specificity, so a later
   `padding: X 0` shorthand silently wipes the horizontal padding and the
   section runs flush to the screen edge. That bug shipped twice. Re-assert
   the inline padding last so source order can no longer lose it. */
.wrap{padding-inline:var(--pad)}

/* Nav auto-hide. Transform only, so it never affects layout. */
.nav{transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .45s}
.nav--down{transform:translateY(-115%)}
.nav--up{background-color:rgba(14,12,9,.88);backdrop-filter:blur(9px)}
.nav--up::before{opacity:0}
body.menu-open .nav{transform:none!important;background:none}
@media (prefers-reduced-motion:reduce){ .nav{transition:none} .nav--down{transform:none} }

/* ===========================================================
   10 · CONSULTATION FORM
   =========================================================== */
.consult{padding-block:clamp(5rem,14vh,10rem);border-top:1px solid var(--rule);background:var(--ink-2)}
.consult__grid{display:grid;gap:clamp(2.5rem,5vw,5rem);grid-template-columns:1fr}
@media(min-width:960px){
  .consult__grid{grid-template-columns:.85fr 1.15fr;align-items:start}
  .consult__intro{position:sticky;top:clamp(5rem,14vh,9rem)}
}
.consult__intro .lede{margin-top:1.6rem}
.consult__aside{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;gap:.9rem;
  border-top:1px solid var(--rule);padding-top:1.6rem}
.consult__aside li{font-size:.9rem;color:var(--muted)}
.consult__aside strong{color:var(--glow);font-weight:400}
.consult__aside a{color:var(--glow);border-bottom:1px solid var(--rule)}

.cform{display:grid;gap:1.6rem}
.cform__field{display:grid;gap:.55rem;min-width:0}
.cform__field > label,.cform legend{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);padding:0;
}
.req{color:var(--red)}
.cform fieldset{border:0;padding:0;margin:0;display:grid;gap:.9rem}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform textarea{
  width:100%;background:transparent;color:var(--bone);
  border:0;border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:1rem;font-weight:300;
  padding:.7rem 0;border-radius:0;
  transition:border-color .3s;
}
.cform textarea{resize:vertical;line-height:1.5}
.cform input:focus,.cform textarea:focus{outline:0;border-bottom-color:var(--glow)}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(142,138,132,.7)}

.cform__radios{display:flex;flex-wrap:wrap;gap:.65rem}
.cform__radios--stack{flex-direction:column;align-items:flex-start}
.cform__radios label{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--arch-door);
  padding:.7rem 1.1rem;min-height:44px;
  font-size:.9rem;color:var(--muted);transition:border-color .3s,color .3s,background-color .3s;
}
.cform__radios input{accent-color:var(--brass);width:15px;height:15px;flex:none}
.cform__radios label:hover{border-color:var(--brass);color:var(--bone)}
.cform__radios label:has(input:checked){border-color:var(--brass);color:var(--glow);background:rgba(176,141,87,.12)}
.cform__radios label:focus-within{outline:2px solid var(--glow);outline-offset:2px}

.cform input[type=file]{
  font-family:var(--sans);font-size:.86rem;color:var(--muted);
  border:1px dashed var(--rule);border-radius:4px;padding:1rem;width:100%;
}
.cform input[type=file]::file-selector-button{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:1px solid var(--brass);color:var(--glow);
  padding:.6rem 1rem;margin-right:1rem;cursor:pointer;border-radius:2px;
}
.cform__hint{margin:0;font-size:.78rem;color:var(--muted)}
.cform__row{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:560px){.cform__row{grid-template-columns:1fr 1fr}}
.cform__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform__submit{justify-self:start;margin-top:.4rem;border:0}
.cform__submit[disabled]{opacity:.6;cursor:progress}
.cform__error{margin:0;color:#FF9A9A;font-size:.9rem}
.cform__done{border:1px solid var(--rule);border-radius:var(--arch-door);padding:clamp(1.8rem,4vw,3rem);align-self:start}
.cform__done p{color:var(--muted);margin:1rem 0 0}
.cform__done a{color:var(--glow);border-bottom:1px solid var(--rule)}

/* The file input and long legends are the two things that blow out a
   narrow viewport if left unchecked. */
@media(max-width:420px){
  .cform__radios{flex-direction:column;align-items:stretch}
  .cform__radios label{width:100%}
}

/* ===========================================================
   AUTHORITY PAGES (one per method)
   =========================================================== */
.apage{padding-top:clamp(5.5rem,12vh,8rem)}
.apage__crumbs{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-block:1rem}
.apage__crumbs a{color:var(--brass)}
.apage__crumbs span[aria-hidden]{margin-inline:.5rem;color:var(--rule)}
.apage__hero{padding-block:clamp(1.5rem,4vh,3rem) clamp(2rem,5vh,3.5rem);max-width:960px;margin-inline:auto}
.apage__hero h1{margin:1.2rem 0 0}
.apage__hero .lede{margin-top:1.6rem}
.apage__stat{margin:1.6rem 0 0;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.apage__figure{margin:0;padding-block:clamp(1.5rem,4vh,3rem)}
.apage__figure img{width:100%;border-radius:var(--arch-door);aspect-ratio:16/9;object-fit:cover}
.apage__body{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr;padding-block:clamp(2rem,6vh,4rem) clamp(4rem,12vh,8rem)}
@media(min-width:980px){.apage__body{grid-template-columns:1.35fr .65fr;align-items:start}
  .apage__aside{position:sticky;top:clamp(5rem,14vh,8rem)}}
.apage__block{margin-bottom:clamp(2rem,5vh,3.2rem)}
.apage__block h2{margin-bottom:1rem}
.apage__prose p{color:var(--muted);max-width:64ch;margin:0}
.apage__benefits{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.apage__benefits li{color:var(--muted);padding-left:1.3rem;position:relative}
.apage__benefits li::before{content:'';position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--brass)}
.apage__aside{display:grid;gap:1.25rem}
.apage__card{border:1px solid var(--rule);border-radius:var(--arch-door);padding:clamp(1.4rem,2.4vw,2rem);display:grid;gap:1rem}
.apage__card p{margin:0;color:var(--muted);font-size:.95rem}
.apage__card .btn{justify-self:start}
.apage__meta{font-size:.82rem!important}
.apage__meta strong{color:var(--glow);font-weight:400}
.apage__meta a{color:var(--glow);border-bottom:1px solid var(--rule)}
.apage__others{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.apage__others a{display:flex;gap:.7rem;font-size:.92rem;color:var(--muted);min-height:44px;align-items:center}
.apage__others a:hover{color:var(--glow)}
.apage__n{font-family:var(--serif);color:var(--brass-lo)}
.apage .qa:first-of-type{border-top:1px solid var(--rule)}

/* Method card links into the authority pages */
.method h3 a{display:block}
.method h3 a:hover{color:var(--glow)}
.method__more{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}
.method__more::after{content:'\2192';transition:transform .3s}
.method__more:hover{color:var(--glow)}
.method__more:hover::after{transform:translateX(4px)}

/* Journal index */
.jgrid{list-style:none;padding:0;margin:0;display:grid;gap:clamp(1.2rem,2.4vw,2rem);
  grid-template-columns:1fr}
@media(min-width:720px){.jgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.jgrid{grid-template-columns:repeat(3,1fr)}}
.jcard a{display:grid;gap:.9rem;height:100%;align-content:start;
  border:1px solid var(--rule);border-radius:var(--arch-door);
  padding:clamp(1.1rem,2vw,1.5rem);transition:border-color .3s,background-color .3s}
.jcard a:hover{border-color:var(--brass);background:rgba(176,141,87,.06)}
.jcard img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:calc(var(--arch-door)/2)}
.jcard h2{margin:0}
.jcard p{margin:0;color:var(--muted);font-size:.92rem}

/* ---------- Reviews ---------- */
.reviews{padding-block:clamp(5rem,14vh,10rem);border-top:1px solid var(--rule);background:var(--ink-2)}
.reviews__head{max-width:60ch}
.reviews__head .lede{margin-top:1.6rem}
.reviews__head a{color:var(--glow);border-bottom:1px solid var(--rule)}
.reviews__grid{list-style:none;padding:0;margin:clamp(2.5rem,6vh,4rem) 0 0;
  display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr}
@media(min-width:720px){.reviews__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.reviews__grid{grid-template-columns:repeat(3,1fr)}}
.rev{border:1px solid var(--rule);border-radius:var(--arch-door);
  padding:clamp(1.3rem,2.2vw,1.9rem);display:grid;gap:1rem;align-content:start}
.rev__stars{margin:0;color:var(--brass);letter-spacing:.22em;font-size:.82rem}
.rev blockquote{margin:0}
.rev blockquote p{margin:0;color:var(--bone);font-size:.98rem;line-height:1.6}
.rev__by{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.rev__by span{color:var(--muted);text-transform:none;letter-spacing:.04em}