/* ============================================================================
   LEGEND — Private Relationship Advisory
   Design system. Quiet luxury: space, type, pace, precision.
   ----------------------------------------------------------------------------
   01 Tokens          06 Layout            11 Membership
   02 Reset           07 Navigation        12 Journal
   03 Typography      08 Hero              13 Accordion
   04 Motion          09 Plates / imagery  14 Forms & application
   05 Controls        10 Process / index   15 Footer / utilities
   ========================================================================== */

/* 01 — TOKENS ============================================================== */
:root{
  /* Ground */
  --ink:        #0B0B0C;
  --ink-2:      #141416;
  --char:       #26262A;
  --ivory:      #F1EEE8;
  --off:        #FAF8F5;

  /* Accent — muted, never bright */
  --champagne:      #B7A98F;
  --champagne-dim:  #8C816C;

  /* Semantic (dark chapter is the default) */
  --bg:          var(--ink);
  --fg:          #EDEAE3;
  --fg-soft:     rgba(237,234,227,.62);
  --fg-faint:    rgba(237,234,227,.52);
  --line:        rgba(237,234,227,.14);
  --line-soft:   rgba(237,234,227,.08);
  --accent:      var(--champagne);

  /* Type */
  --serif: "Cormorant Garamond", "Cormorant", "Times New Roman", Times, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-display: clamp(3.1rem, 8.2vw, 8.5rem);
  --t-h1:      clamp(2.5rem, 5.6vw, 5.5rem);
  --t-h2:      clamp(1.95rem, 4vw, 3.7rem);
  --t-h3:      clamp(1.35rem, 2.2vw, 2.15rem);
  --t-lead:    clamp(1.02rem, 1.15vw, 1.32rem);
  --t-body:    clamp(.94rem, .78vw, 1.02rem);
  --t-micro:   .68rem;

  /* Space */
  --gutter:  clamp(1.5rem, 5vw, 6rem);
  --section: clamp(6rem, 13vh, 12rem);
  --max:     1560px;

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --d-fast: .45s;
  --d: .8s;
  --d-slow: 1.4s;

  --nav-h: 84px;
}

/* Light chapter */
.chapter--light{
  --bg:        var(--ivory);
  --fg:        #121214;
  --fg-soft:   rgba(18,18,20,.66);
  --fg-faint:  rgba(18,18,20,.60);
  --line:      rgba(18,18,20,.14);
  --line-soft: rgba(18,18,20,.07);
  --accent:    var(--champagne-dim);
}
.chapter--dark{
  --bg:        var(--ink);
  --fg:        #EDEAE3;
  --fg-soft:   rgba(237,234,227,.62);
  --fg-faint:  rgba(237,234,227,.52);
  --line:      rgba(237,234,227,.14);
  --line-soft: rgba(237,234,227,.08);
  --accent:    var(--champagne);
}

/* 02 — RESET =============================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:#EDEAE3;
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:300;
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--champagne); color:#0B0B0C; }
:focus-visible{ outline:1px solid var(--champagne); outline-offset:4px; }

/* Film grain — materiality, not texture-for-its-own-sake */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9000; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.22'/></svg>");
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:no-preference){
  .grain{ animation:grain 8s steps(6) infinite; }
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-3%,2%) }
  40%{ transform:translate(2%,-3%) }
  60%{ transform:translate(-2%,-2%) }
  80%{ transform:translate(3%,3%) }
}

/* 03 — TYPOGRAPHY ========================================================== */
.serif{ font-family:var(--serif); font-weight:300; }

.display,.h1,.h2,.h3{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.012em;
  color:var(--fg);
}
.display{ font-size:var(--t-display); line-height:.94; letter-spacing:-.022em; }
.h1{ font-size:var(--t-h1); line-height:1.0; letter-spacing:-.018em; }
.h2{ font-size:var(--t-h2); line-height:1.06; }
.h3{ font-size:var(--t-h3); line-height:1.22; }

.display em,.h1 em,.h2 em{ font-style:italic; color:var(--accent); }

.eyebrow{
  font-family:var(--sans);
  font-size:var(--t-micro);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--fg-faint);
  display:flex; align-items:center; gap:1rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--accent); flex:none; opacity:.8;
}
.eyebrow--plain::before{ display:none; }

.lead{
  font-size:var(--t-lead);
  line-height:1.62;
  color:var(--fg-soft);
  font-weight:300;
}
p{ color:var(--fg-soft); }
p + p{ margin-top:1.2em; }
.measure{ max-width:62ch; }
.measure--tight{ max-width:46ch; }
.measure--wide{ max-width:78ch; }
strong{ font-weight:500; color:var(--fg); }
.fg{ color:var(--fg); }
.accent{ color:var(--accent); }

.quiet{ font-size:.78rem; letter-spacing:.06em; color:var(--fg-faint); line-height:1.7; }

/* Wrapping discipline: headings balance across their lines, prose avoids the
   single-word last line. Both degrade silently where unsupported. */
.display,.h1,.h2,.h3,.hero__title,.statement,.tier__name,.entry__title,.acc__q,.lede{
  text-wrap:balance;
}
p,.lead,.quiet,.includes li,.measure{ text-wrap:pretty; }

/* Pull statement — the brand voice, used once per page at most */
.statement{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.7rem, 3.4vw, 3.2rem);
  line-height:1.18;
  letter-spacing:-.014em;
  color:var(--fg);
}
.statement--italic{ font-style:italic; }

.rule{ height:1px; background:var(--line); border:0; width:100%; }

.index-num{
  font-family:var(--sans);
  font-size:var(--t-micro);
  letter-spacing:.22em;
  color:var(--accent);
  font-weight:500;
}

/* 04 — MOTION ============================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay:var(--delay,0ms);
  will-change:opacity,transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }

[data-reveal="rule"]{ opacity:1; transform:none; transform-origin:left center; }
[data-reveal="rule"]{ transform:scaleX(0); transition:transform 1.3s var(--ease); transition-delay:var(--delay,0ms); }
[data-reveal="rule"].is-in{ transform:scaleX(1); }

/* padding + negative margin so descenders are not clipped by the mask */
.mask-line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.mask-line > span{
  display:block;
  transform:translateY(102%);
  transition:transform 1.15s var(--ease);
  transition-delay:var(--delay,0ms);
}
.is-in .mask-line > span,.mask-line.is-in > span{ transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .mask-line > span{ transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* Entry curtain */
.curtain{
  position:fixed; inset:0; z-index:9500;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
.curtain__mark{ width:44px; height:44px; opacity:0; animation:markIn 1.5s var(--ease) forwards; }
@keyframes markIn{ 0%{opacity:0;transform:translateY(8px)} 45%{opacity:1;transform:none} 100%{opacity:1;transform:none} }
body.is-loaded .curtain{ opacity:0; visibility:hidden; }
/* Fallback: the curtain lifts on its own even if the script never runs. */
.curtain{ animation:curtainOut .9s var(--ease) 2s forwards; }
@keyframes curtainOut{ to{ opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion:reduce){ .curtain{ display:none; } }

/* 05 — CONTROLS ============================================================ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.85rem;
  font-size:var(--t-micro);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--fg);
  padding:1.15rem 0 1.1rem;
  overflow:hidden;
}
.btn::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--line);
}
.btn::before{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
  z-index:1;
}
.btn:hover::before,.btn:focus-visible::before{ transform:scaleX(1); }
.btn .arrow{
  width:1.6rem; height:1px; background:currentColor; position:relative; opacity:.5;
  transition:width .5s var(--ease), opacity .5s var(--ease);
}
.btn:hover .arrow{ width:2.4rem; opacity:1; }
.btn .arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}

.btn--framed{
  border:1px solid var(--line);
  padding:1.25rem 2.2rem;
  transition:border-color .5s var(--ease), color .5s var(--ease);
}
.btn--framed::after,.btn--framed::before{ display:none; }
.btn--framed:hover{ border-color:var(--accent); color:var(--accent); }

.btn--solid{
  background:var(--fg); color:var(--bg);
  padding:1.3rem 2.4rem;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.btn--solid::after,.btn--solid::before{ display:none; }
.btn--solid:hover{ background:var(--accent); color:#0B0B0C; }
.btn[disabled]{ opacity:.32; pointer-events:none; }

.link{
  position:relative; display:inline-block; padding-bottom:2px;
  color:var(--fg);
}
.link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; opacity:.35;
  transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.link:hover::after{ transform:scaleX(1); transform-origin:left; opacity:1; }

/* 06 — LAYOUT ============================================================== */
.chapter{
  background:var(--bg); color:var(--fg);
  position:relative;
}
.section{ padding:var(--section) 0; }
.section--tight{ padding:clamp(4rem,7vh,7rem) 0; }
.wrap{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.grid{
  display:grid;
  /* minmax(0,1fr): without it a wide child can push a track past the viewport */
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(1.2rem,2.4vw,2.6rem);
  row-gap:clamp(2rem,5vw,4.5rem);
}
.grid > *{ min-width:0; }
/* Span is set on grid-column-END, never with the `grid-column` shorthand.
   The shorthand writes `start: span N; end: auto`, so a later `.startN`
   (grid-column-start) overwrote the span and collapsed the item to one track. */
.c1{grid-column-end:span 1} .c2{grid-column-end:span 2} .c3{grid-column-end:span 3}
.c4{grid-column-end:span 4} .c5{grid-column-end:span 5} .c6{grid-column-end:span 6}
.c7{grid-column-end:span 7} .c8{grid-column-end:span 8} .c9{grid-column-end:span 9}
.c10{grid-column-end:span 10} .c11{grid-column-end:span 11} .c12{grid-column-end:span 12}
.start2{grid-column-start:2} .start3{grid-column-start:3} .start4{grid-column-start:4}
.start5{grid-column-start:5} .start6{grid-column-start:6} .start7{grid-column-start:7}
.start8{grid-column-start:8}

.stack{ display:flex; flex-direction:column; }
.gap-s{ gap:1rem } .gap-m{ gap:1.8rem } .gap-l{ gap:3rem } .gap-xl{ gap:clamp(3rem,6vw,6rem) }
.mt-s{ margin-top:1.4rem } .mt-m{ margin-top:2.6rem } .mt-l{ margin-top:clamp(3rem,6vw,6rem) }
.center{ text-align:center } .center .eyebrow{ justify-content:center }

@media (max-width:1024px){
  .c4,.c5,.c6,.c7,.c8{ grid-column:auto / span 12; }
  .c3{ grid-column:auto / span 6; }
  .start2,.start3,.start4,.start5,.start6,.start7,.start8{ grid-column-start:auto; }
}
@media (max-width:640px){
  .c3,.c2{ grid-column:auto / span 12; }
}

/* 07 — NAVIGATION ========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .6s var(--ease), border-color .6s var(--ease), height .5s var(--ease);
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
.nav__inner{
  width:100%; max-width:var(--max); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav.is-stuck{
  background:rgba(11,11,12,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:rgba(237,234,227,.10);
  height:70px;
}
.nav.is-stuck.nav--onlight{
  background:rgba(241,238,232,.78);
  border-bottom-color:rgba(18,18,20,.10);
}
.nav.is-hidden{ transform:translateY(-100%); transition:transform .6s var(--ease); }

.brand{ display:flex; align-items:center; gap:.85rem; color:#EDEAE3; flex:none; }
.brand__mark{ width:26px; height:26px; flex:none; }
.brand__type{
  font-family:var(--sans); font-weight:500;
  font-size:.82rem; letter-spacing:.42em; text-transform:uppercase;
  padding-left:.1em;
}
.brand__sub{
  display:block; font-size:.54rem; letter-spacing:.24em;
  color:rgba(237,234,227,.55); font-weight:400; margin-top:.28rem;
  white-space:nowrap;   /* never let the lockup break into a stack */
}
@media (max-width:1180px){ .brand__sub{ display:none; } }
.nav--onlight .brand{ color:#121214; }
.nav--onlight .brand__sub{ color:rgba(18,18,20,.45); }

.nav__links{ display:flex; align-items:center; gap:clamp(1.4rem,2.6vw,2.8rem); }
.nav__links a{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; font-weight:400;
  color:rgba(237,234,227,.66);
  position:relative; padding:.4rem 0;
  transition:color .4s var(--ease);
}
.nav--onlight .nav__links a{ color:rgba(18,18,20,.6); }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--champagne); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:#EDEAE3; }
.nav--onlight .nav__links a:hover,.nav--onlight .nav__links a[aria-current="page"]{ color:#121214; }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

/* Account access sits apart from navigation: it is a door, not a destination. */
.nav__end{ display:flex; align-items:center; gap:clamp(1.1rem,2vw,2rem); flex:none; }
.nav__access{
  position:relative;
  font-size:.64rem; text-transform:uppercase; letter-spacing:.2em;
  color:rgba(237,234,227,.62);
  padding:.4rem 0;
  transition:color .4s var(--ease);
  white-space:nowrap;
}
.nav__access::before{
  content:""; position:absolute; left:calc(-1 * clamp(.55rem,1vw,1rem)); top:50%;
  width:1px; height:12px; background:var(--line); transform:translateY(-50%);
}
.nav__access::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--champagne); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__access:hover{ color:var(--champagne); }
.nav__access:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav--onlight .nav__access{ color:rgba(18,18,20,.6); }
.nav--onlight .nav__access:hover{ color:var(--champagne-dim); }

.nav__cta{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.2em;
  border:1px solid rgba(237,234,227,.24); color:#EDEAE3;
  padding:.85rem 1.5rem;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  white-space:nowrap;
}
.nav__cta:hover{ background:#EDEAE3; color:#0B0B0C; border-color:#EDEAE3; }
.nav--onlight .nav__cta{ border-color:rgba(18,18,20,.24); color:#121214; }
.nav--onlight .nav__cta:hover{ background:#121214; color:#F1EEE8; }

.nav__toggle{ display:none; width:34px; height:34px; position:relative; }
.nav__toggle span{
  position:absolute; left:4px; right:4px; height:1px; background:currentColor;
  transition:transform .5s var(--ease), opacity .3s var(--ease);
}
.nav__toggle span:first-child{ top:13px } .nav__toggle span:last-child{ bottom:13px }
body.menu-open .nav__toggle span:first-child{ transform:translateY(4px) rotate(45deg) }
body.menu-open .nav__toggle span:last-child{ transform:translateY(-4px) rotate(-45deg) }

/* While the overlay is open the bar sits on top of it — keep it legible and unpainted. */
body.menu-open .nav{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
body.menu-open .nav .brand{ color:#EDEAE3; }
body.menu-open .nav .brand__sub{ color:rgba(237,234,227,.42); }

.menu{
  position:fixed; inset:0; z-index:790;
  background:var(--ink);
  padding:calc(var(--nav-h) + 4vh) var(--gutter) 4vh;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity .6s var(--ease), visibility .6s;
}
body.menu-open .menu{ opacity:1; visibility:visible; }
.menu__links a{
  display:block;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.1rem,9vw,3.4rem); line-height:1.28;
  color:#EDEAE3;
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
body.menu-open .menu__links a{ opacity:1; transform:none; }
.menu__foot{ display:flex; flex-direction:column; gap:1.2rem; }

/* Between the desktop and tablet breakpoints the bar carries the most: tighten
   it rather than letting the consultation button run off the edge. */
@media (max-width:1280px){
  .nav__links{ gap:1.15rem; }
  .nav__links a{ letter-spacing:.14em; }
  .nav__access{ letter-spacing:.14em; }
  .nav__cta{ padding:.85rem 1.1rem; letter-spacing:.14em; }
}

@media (max-width:1024px){
  .nav__links,.nav__cta,.nav__end{ display:none; }
  .nav__toggle{ display:block; color:#EDEAE3; }
  .nav--onlight .nav__toggle{ color:#121214; }
  body.menu-open .nav__toggle{ color:#EDEAE3; }
  body.menu-open{ overflow:hidden; }
}

/* 08 — HERO ================================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-top:calc(var(--nav-h) + 6vh);
  padding-bottom:clamp(2.5rem,6vh,5rem);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  opacity:.9;
}
.hero__bg svg{ width:100%; height:100%; }
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(183,169,143,.10), transparent 58%),
    linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.34) 42%, rgba(11,11,12,.94) 100%);
}
.hero .wrap{ position:relative; z-index:2; width:100%; }

.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:var(--t-h1); line-height:1.0; letter-spacing:-.018em;
  color:var(--fg);
}
.hero__title em{ font-style:italic; color:var(--accent); }
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:2rem; padding-top:clamp(2rem,5vh,3.5rem);
  border-top:1px solid var(--line-soft);
  margin-top:clamp(2.5rem,6vh,4rem);
}
.hero__cities{
  display:flex; flex-wrap:wrap; gap:1.6rem;
  font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-faint);
}
.hero--page{ min-height:74svh; align-items:flex-end; }
.hero--page .hero__title{ font-size:var(--t-h1); }


/* 09 — PLATES (imagery slots) ============================================== */
.plate{
  position:relative; overflow:hidden;
  background:var(--ink-2);
  aspect-ratio:4/5;
}
.plate--wide{ aspect-ratio:16/10; }
.plate--tall{ aspect-ratio:3/4.4; }
.plate--square{ aspect-ratio:1/1; }
.plate svg,.plate img{ width:100%; height:100%; object-fit:cover; }
.plate__art{
  transform:scale(1.06);
  transition:transform 1.6s var(--ease), opacity 1.4s var(--ease);
}
.is-in .plate__art{ transform:scale(1); }
.plate__caption{
  position:absolute; left:0; bottom:0; right:0;
  padding:1.4rem 1.6rem;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(237,234,227,.62);
  background:linear-gradient(transparent,rgba(11,11,12,.75));
}
.plate--framed{ border:1px solid var(--line); }

/* 10 — PROCESS / INDEX LISTS =============================================== */
.process{ border-top:1px solid var(--line); }
.process__item{
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(70px,.7fr) minmax(0,4fr) minmax(0,5fr);
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.8rem,3.6vw,3rem) 0;
  align-items:start;
  transition:padding-left .7s var(--ease), background .7s var(--ease);
}
.process__item:hover{ padding-left:clamp(0px,1.4vw,1.4rem); }
.process__item > *{ min-width:0; }
.process__item--wide{ grid-template-columns:minmax(60px,.6fr) minmax(0,1fr); }
.process__item--priced{ grid-template-columns:minmax(60px,.6fr) minmax(0,1fr) auto; }
.process__item--priced .price{ font-family:var(--serif); font-size:1.35rem; white-space:nowrap; color:var(--fg); }
.process__item h3{ font-family:var(--serif); font-weight:300; font-size:var(--t-h3); line-height:1.2; color:var(--fg); }
.process__item p{ font-size:.95rem; }
@media (max-width:820px){
  .process__item,.process__item--wide{ grid-template-columns:1fr; gap:.9rem; }
}
/* The priced row needs more room than the others: the third column is fixed by
   the figure, so it starves the description first. Stack it earlier. */
@media (max-width:1080px){
  .process__item--priced{ grid-template-columns:minmax(50px,auto) 1fr; gap:.4rem 1.2rem; }
  .process__item--priced .price{ grid-column:2; font-size:1.15rem; }
}
@media (max-width:560px){
  .process__item--priced{ grid-template-columns:1fr; }
  .process__item--priced .price{ grid-column:auto; }
}

.principles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.principle{ background:var(--bg); padding:clamp(2rem,3vw,3rem); display:flex; flex-direction:column; gap:1rem; min-height:260px; }
.principle h3{ font-family:var(--serif); font-size:1.5rem; font-weight:300; color:var(--fg); }
.principle p{ font-size:.9rem; }

.contrast-list{ display:grid; gap:0; border-top:1px solid var(--line); }
.contrast-list li{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(1rem,4vw,3rem);
  padding:clamp(1.3rem,2.4vw,2rem) 0;
  border-bottom:1px solid var(--line);
}
.contrast-list .neg{ color:var(--fg-faint); font-size:1rem; }
.contrast-list .pos{ font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,2rem); color:var(--fg); font-weight:300; }
.contrast-list .sep{ width:24px; height:1px; background:var(--accent); opacity:.7; }
@media (max-width:700px){
  .contrast-list li{ grid-template-columns:1fr; gap:.6rem; }
  .contrast-list .sep{ display:none; }
}

.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(2rem,4vw,4rem); }
.fact .n{ font-family:var(--serif); font-size:clamp(2.6rem,4.6vw,4.2rem); line-height:1; font-weight:300; color:var(--fg); }
.fact .l{ font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--fg-faint); margin-top:1rem; display:block; }

/* 11 — MEMBERSHIP ========================================================== */
.tier{
  border-top:1px solid var(--line);
  padding:clamp(2.4rem,5vw,4.5rem) 0;
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:clamp(1.8rem,5vw,5rem);
  position:relative;
}
.tier:last-child{ border-bottom:1px solid var(--line); }
.tier__aside{ display:flex; flex-direction:column; gap:1.4rem; }
.tier__roman{ font-family:var(--serif); font-size:1.05rem; letter-spacing:.3em; color:var(--accent); }
.tier__name{ font-family:var(--serif); font-size:clamp(2rem,3.4vw,3.1rem); font-weight:300; line-height:1.04; color:var(--fg); }
.tier__from{ font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--fg-faint); }
.tier__from b{ display:block; font-family:var(--serif); font-size:1.5rem; letter-spacing:.02em; text-transform:none; font-weight:300; color:var(--fg); margin-top:.5rem; }
.tier__spec{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); margin-top:1.6rem; }
.tier__spec div{ background:var(--bg); padding:1.1rem 1.2rem; }
.tier__spec dt{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint); }
.tier__spec dd{ margin:.5rem 0 0; font-size:.92rem; color:var(--fg); }
@media (max-width:900px){
  .tier{ grid-template-columns:1fr; }
  .tier__spec{ grid-template-columns:1fr; }
}

.includes li{
  padding:.85rem 0; border-bottom:1px solid var(--line-soft);
  font-size:.95rem; color:var(--fg-soft);
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline;
}
.includes li::before{ content:"—"; color:var(--accent); opacity:.7; }

/* 12 — JOURNAL ============================================================= */
.entries{ border-top:1px solid var(--line); }
.entry{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,3fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);
  align-items:baseline;
  padding:clamp(1.8rem,3.4vw,2.8rem) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .7s var(--ease);
}
.entry:hover{ padding-left:clamp(0px,1.4vw,1.4rem); }
.entry__meta{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-faint); }
.entry__title{ font-family:var(--serif); font-weight:300; font-size:clamp(1.4rem,2.4vw,2.2rem); line-height:1.16; color:var(--fg); }
.entry__read{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-faint); text-align:right; }
.entry:hover .entry__read{ color:var(--accent); }
@media (max-width:820px){
  .entry{ grid-template-columns:1fr; gap:.7rem; }
  .entry__read{ text-align:left; }
}

.article p{ font-size:1.06rem; line-height:1.85; }
.article h2{ font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,2.6vw,2.3rem); color:var(--fg); margin:3.2rem 0 1.2rem; }
.article blockquote{
  margin:3rem 0; padding-left:clamp(1.2rem,3vw,2.6rem); border-left:1px solid var(--accent);
  font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.8rem); line-height:1.35; color:var(--fg); font-style:italic;
}

/* 13 — ACCORDION =========================================================== */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__q{
  width:100%; text-align:left; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center;
  padding:clamp(1.5rem,2.6vw,2.2rem) 0;
  font-family:var(--serif); font-weight:300; font-size:clamp(1.15rem,1.9vw,1.6rem); color:var(--fg);
  transition:color .4s var(--ease);
}
.acc__q:hover{ color:var(--accent); }
.acc__sign{ position:relative; width:14px; height:14px; flex:none; }
.acc__sign::before,.acc__sign::after{
  content:""; position:absolute; background:currentColor; opacity:.6;
  transition:transform .6s var(--ease), opacity .4s;
}
.acc__sign::before{ left:0; right:0; top:6.5px; height:1px; }
.acc__sign::after{ top:0; bottom:0; left:6.5px; width:1px; }
.acc__item.is-open .acc__sign::after{ transform:scaleY(0); }
.acc__a{ overflow:hidden; height:0; transition:height .7s var(--ease); }
.acc__a > div{ padding:0 0 clamp(1.6rem,2.6vw,2.4rem); max-width:70ch; }

/* 14 — FORMS =============================================================== */
.form{ --field-line:var(--line); }
.field{ position:relative; padding-top:1.9rem; margin-bottom:2.6rem; }
.field label{
  position:absolute; top:0; left:0;
  font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--fg-faint);
  transition:color .4s var(--ease);
}
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--field-line);
  color:var(--fg); font-family:var(--sans); font-size:1.02rem; font-weight:300;
  padding:.7rem 0 .9rem; border-radius:0;
  transition:border-color .5s var(--ease);
  appearance:none;
}
.field textarea{ min-height:120px; resize:vertical; line-height:1.7; }
.field select{ cursor:pointer; background-image:none; padding-right:2rem; }
.field--select::after{
  content:""; position:absolute; right:3px; bottom:1.5rem;
  width:7px; height:7px; pointer-events:none;
  border-right:1px solid var(--fg-faint); border-bottom:1px solid var(--fg-faint);
  transform:rotate(45deg);
}
.field select option{ background:var(--ink); color:#EDEAE3; }
.chapter--light .field select option{ background:#F1EEE8; color:#121214; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-bottom-color:var(--accent); }
.field:focus-within label{ color:var(--accent); }
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-faint); }
.field .hint{ font-size:.72rem; color:var(--fg-faint); margin-top:.7rem; letter-spacing:.04em; }
.field.is-error input,.field.is-error textarea,.field.is-error select{ border-bottom-color:#B3705F; }
.field .err{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#B3705F; margin-top:.6rem; display:none; }
.field.is-error .err{ display:block; }

.field-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.2rem,3vw,3rem); }
@media (max-width:700px){ .field-row{ grid-template-columns:1fr; } }

.choice{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.4rem; }
/* Visually hidden, but explicitly sized: these inherit `width:100%` from the
   field rules above, and being absolutely positioned they then resolve that
   against an ancestor and push the layout sideways. */
.choice input{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.choice label{
  position:static; display:inline-block;
  border:1px solid var(--line); padding:.8rem 1.3rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft);
  cursor:pointer; transition:all .45s var(--ease);
}
.choice label:hover{ border-color:var(--fg-faint); color:var(--fg); }
.choice input:checked + label{ border-color:var(--accent); color:var(--accent); background:rgba(183,169,143,.06); }
.choice input:focus-visible + label{ outline:1px solid var(--accent); outline-offset:3px; }

.consent{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; margin-top:1rem; }
.consent input{ width:16px; height:16px; margin-top:.35rem; border:0; accent-color:var(--champagne); }
.consent span{ font-size:.82rem; color:var(--fg-soft); line-height:1.7; }

/* Application shell */
.app-shell{ min-height:100svh; display:grid; grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr); }
.app-aside{
  position:sticky; top:0; height:100svh;
  padding:calc(var(--nav-h) + 4vh) clamp(1.5rem,3.4vw,4rem) 4vh;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between;
  background:var(--ink-2);
}
.app-main{ padding:calc(var(--nav-h) + 6vh) clamp(1.5rem,5vw,6rem) clamp(4rem,10vh,8rem); }
.app-main__inner{ max-width:660px; }
@media (max-width:1024px){
  .app-shell{ grid-template-columns:1fr; }
  .app-aside{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding-top:calc(var(--nav-h) + 3vh); }
  .app-main{ padding-top:clamp(3rem,7vh,5rem); }
}

.steps{ display:flex; flex-direction:column; gap:.2rem; margin-top:2.6rem; }
.steps li{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:center;
  padding:.62rem 0;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-faint);
  transition:color .5s var(--ease);
}
.steps li .dot{ width:22px; height:1px; background:currentColor; opacity:.5; transition:width .6s var(--ease); }
.steps li.is-active{ color:var(--fg); }
.steps li.is-active .dot{ width:38px; background:var(--accent); opacity:1; }
.steps li.is-done{ color:var(--fg-soft); }
@media (max-width:1024px){ .steps{ display:none; } }

.progress{ height:1px; background:var(--line); position:relative; margin-bottom:clamp(2.5rem,5vh,4rem); }
.progress i{ position:absolute; inset:0 auto 0 0; background:var(--accent); width:0; transition:width .9s var(--ease); display:block; }

.step-panel{ display:none; }
.step-panel.is-active{ display:block; animation:panelIn .9s var(--ease) both; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

.form-nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:clamp(2.5rem,5vh,4rem); padding-top:2rem; border-top:1px solid var(--line); }
.form-nav .counter{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-faint); }

/* 15 — FOOTER / UTILITIES ================================================== */
.cta-band{ padding:clamp(6rem,14vh,12rem) 0; text-align:center; position:relative; overflow:hidden; }
.cta-band .wrap{ position:relative; z-index:2; }
.cta-band__glow{
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(60% 60% at 50% 55%, rgba(183,169,143,.10), transparent 70%);
}

.footer{ background:var(--ink); color:#EDEAE3; border-top:1px solid rgba(237,234,227,.10); padding:clamp(4rem,8vh,7rem) 0 2.4rem; }
.footer .wrap{ display:grid; grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr)); gap:clamp(2rem,4vw,4rem); }
.footer h4{ font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(237,234,227,.55); font-weight:500; margin-bottom:1.6rem; }
.footer nav a{ display:block; padding:.42rem 0; font-size:.86rem; color:rgba(237,234,227,.66); transition:color .4s var(--ease); }
.footer nav a:hover{ color:#EDEAE3; }
.footer__brand{ display:flex; flex-direction:column; gap:1.4rem; max-width:34ch; }
.footer__bottom{
  max-width:var(--max); margin:clamp(3rem,6vh,5rem) auto 0; padding-inline:var(--gutter);
  padding-top:2rem; border-top:1px solid rgba(237,234,227,.08);
  display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:space-between;
  font-size:.68rem; letter-spacing:.1em; color:rgba(237,234,227,.52);
}
@media (max-width:900px){ .footer .wrap{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer .wrap{ grid-template-columns:1fr; } }

.skip{ position:absolute; left:-9999px; top:0; z-index:9999; background:#EDEAE3; color:#0B0B0C; padding:1rem 1.6rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
.skip:focus{ left:1rem; top:1rem; }

.badge-line{ display:flex; flex-wrap:wrap; gap:clamp(1rem,3vw,2.6rem); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-faint); }
.badge-line span{ display:flex; align-items:center; gap:.7rem; }
.badge-line span::before{ content:""; width:4px; height:4px; border:1px solid var(--accent); transform:rotate(45deg); }

.aside-note{ border-left:1px solid var(--line); padding-left:clamp(1.2rem,2.4vw,2.4rem); }
.hide{ display:none !important; }
.no-scroll{ overflow:hidden; }

/* A bordered container for forms that sit inside a public chapter. */
.panel-lite{
  border:1px solid var(--line);
  padding:clamp(1.6rem,3vw,2.6rem);
  background:rgba(237,234,227,.02);
}
.chapter--light .panel-lite{ background:rgba(18,18,20,.02); }

/* Footer legal and language rows */
.footer__legal a,.footer__lang a{ color:rgba(237,234,227,.52); transition:color .4s var(--ease); }
.footer__legal a:hover,.footer__lang a:hover{ color:var(--champagne); }
.footer__lang [lang="en"]{ color:#EDEAE3; }

/* ============================================================================
   16 — VERIFICATION MARK
   A seal is only decoration; the code and the lookup are the truth. Style them
   so the code reads as the credential and the seal as its wrapper.
   ========================================================================== */
.seal{ width:clamp(120px,18vw,180px); height:auto; color:var(--accent); }
.seal--lg{ width:clamp(160px,24vw,240px); }

.code{
  font-family:var(--sans);
  font-size:clamp(1.05rem,2vw,1.5rem);
  font-weight:500;
  letter-spacing:.26em;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
  word-break:break-word;
}
.code--sm{ font-size:.9rem; letter-spacing:.2em; }
.code__pre{
  display:block; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-faint); margin-bottom:.7rem; font-weight:500;
}

.verify-box{
  border:1px solid var(--line);
  padding:clamp(1.6rem,3vw,2.6rem);
  background:rgba(237,234,227,.02);
}
.chapter--light .verify-box{ background:rgba(18,18,20,.02); }

.verify-input{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.2rem; align-items:end;
}
@media (max-width:640px){ .verify-input{ grid-template-columns:1fr; } }
.verify-input input{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--fg); font-family:var(--sans); font-size:clamp(1rem,1.8vw,1.3rem);
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  padding:.7rem 0 .9rem; border-radius:0;
}
.verify-input input:focus{ outline:none; border-bottom-color:var(--accent); }
.verify-input input::placeholder{ letter-spacing:.2em; color:var(--fg-faint); font-weight:400; }

/* Result states — the form carries the meaning, not only the words */
.result{ border:1px solid var(--line); padding:clamp(1.5rem,3vw,2.4rem); margin-top:1.6rem; }
.result[hidden]{ display:none; }
.result--valid{ border-color:rgba(183,169,143,.55); }
.result--void{ border-color:rgba(192,138,110,.5); }
.result__state{
  display:flex; align-items:center; gap:.8rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
}
.result--valid .result__state{ color:var(--accent); }
.result--void .result__state{ color:#B3705F; }
.result__state::before{ content:""; width:6px; height:6px; border:1px solid currentColor; transform:rotate(45deg); }
.result--valid .result__state::before{ background:currentColor; }
.result__name{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.15; color:var(--fg); margin-top:1rem;
}
.attest{ display:grid; gap:0; margin-top:1.8rem; border-top:1px solid var(--line-soft); }
.attest div{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:1.4rem;
  padding:.9rem 0; border-bottom:1px solid var(--line-soft);
}
.attest dt{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint); }
.attest dd{ margin:0; font-size:.92rem; color:var(--fg); }
@media (max-width:640px){ .attest div{ grid-template-columns:1fr; gap:.3rem; } }

.placement{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:1.2rem; align-items:center;
  padding:1.1rem 0; border-bottom:1px solid var(--line-soft);
}
.placement .where{ font-size:.92rem; color:var(--fg); }
.placement .meta{ font-size:.72rem; color:var(--fg-faint); margin-top:.35rem; }
.placement--void .where{ color:var(--fg-faint); text-decoration:line-through; text-decoration-thickness:1px; }
@media (max-width:700px){ .placement{ grid-template-columns:1fr; gap:.6rem; } }

/* A service that is not the practice sits apart from the practice's navigation. */
.footer__aside{
  max-width:var(--max); margin:clamp(2.5rem,5vh,4rem) auto 0;
  padding-inline:var(--gutter);
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1rem,3vw,2.6rem); align-items:baseline;
  padding-top:1.8rem; border-top:1px solid rgba(237,234,227,.08);
}
.footer__aside-label{
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(237,234,227,.36); white-space:nowrap;
}
.footer__aside a{ color:rgba(237,234,227,.7); transition:color .4s var(--ease); }
.footer__aside a:hover{ color:var(--champagne); }
.footer__aside em{
  display:block; margin-top:.7rem; font-style:normal;
  font-size:.72rem; line-height:1.7; color:rgba(237,234,227,.42); max-width:62ch;
}
@media (max-width:700px){
  .footer__aside{ grid-template-columns:1fr; gap:.7rem; }
}