/* Self-hosted variable fonts (SIL Open Font License). Google Fonts links work too: Bodoni Moda and Archivo. */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url("fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("fonts/archivo-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("fonts/archivo-latin-wght-italic.woff2") format("woff2")}

/* Direction B, "Evening Session". Layout: a dossier. On desktop a sticky chapter index runs down the left
   (logo at the top, the one gold button at the bottom) and the content reads as numbered chapters to its right.
   Ground is green-black throughout; the logo's forest green is used as raised surfaces, not bands. One accent,
   California gold, appears only as hairlines, chapter numerals, markers and the primary button. The insurance
   practice is the single ivory section on the page: the lit room. Type: Bodoni Moda for display (the logo's
   letterforms), Archivo for everything read, condensed for small labels. Committed to a single dark look. */
:root{
  color-scheme:dark;
  --night:#0E2E1F;
  --night-2:#153D29;
  --night-3:#1D5036;
  --forest:#0F4026;
  --ivory:#F2EEE3;
  --ivory-2:rgba(242,238,227,.68);
  --ivory-3:rgba(242,238,227,.42);
  --gold:#DAB35C;
  --gold-2:rgba(218,179,92,.58);
  --gold-3:rgba(218,179,92,.22);
  --line:rgba(242,238,227,.14);
  --line-2:rgba(242,238,227,.26);
  --field:rgba(242,238,227,.045);
  --paper:#F4F1E8;
  --paper-2:#E8E6DC;
  --paper-ink:#0E1F16;
  --paper-ink-2:#4F5C54;
  --paper-line:rgba(14,31,22,.16);
  --paper-line-2:rgba(14,31,22,.36);
  --display:"Bodoni Moda","Bodoni MT",Didot,"Didot LT STD","Hoefler Text",Georgia,serif;
  --body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --rail:248px;
  --mask-h:url("images/logo-horizontal-mask.png");
  --mask-v:url("images/logo-stacked-mask.png");
  --mask-m:url("images/monogram-mask.png");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--night);color:var(--ivory);font-family:var(--body);font-size:1.0625rem;line-height:1.62;font-weight:360;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--night)}
img,svg{max-width:100%;display:block}
p{margin:0}
a{color:inherit}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.inset :focus-visible{outline-color:var(--forest)}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--night);padding:.75rem 1rem;z-index:100}
.skip:focus{left:max(16px,env(safe-area-inset-left,0px))}

.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1120px;margin-inline:auto;padding-inline:clamp(0px,3vw,40px)}
section{scroll-margin-top:4.5rem}
.chapter{padding-block:clamp(4.5rem,8vw,7.5rem)}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.012em;text-wrap:balance;margin:0;font-optical-sizing:auto}
h1{font-size:clamp(2.9rem,1.2rem + 5.6vw,6.2rem);line-height:.98;letter-spacing:-.02em}
h2{font-size:clamp(2.1rem,1.2rem + 2.6vw,3.6rem);line-height:1.05}
h3{font-size:1.625rem;line-height:1.2}
h4{font:600 .9375rem/1.35 var(--body);margin:0 0 .5rem}
.lede{font-size:clamp(1.125rem,1rem + .45vw,1.3125rem);line-height:1.5;color:var(--ivory-2);max-width:58ch;font-weight:300}
.label{font:600 .75rem/1 var(--body);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* Chapter openers: full-width hairline, then the chapter numeral and name. The numerals mark reading order. */
.opener{border-top:1px solid var(--line);padding-top:1.25rem;display:flex;align-items:baseline;gap:1rem;margin-bottom:clamp(1.75rem,4vw,3rem)}
.opener .roman{font:400 1.125rem/1 var(--display);color:var(--gold);min-width:2.25rem;font-variant-numeric:tabular-nums}
.opener .name{font:italic 400 1.125rem/1 var(--display);color:var(--ivory-2)}
.inset .opener{border-top-color:var(--paper-line)}
.inset .opener .roman{color:var(--forest)}
.inset .opener .name{color:var(--paper-ink-2)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 1.5rem;border-radius:2px;font:600 .9375rem/1 var(--body);
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn-gold{background:var(--gold);color:var(--night);border-color:var(--gold)}
.btn-gold:hover{background:#E6C46F;border-color:#E6C46F}
.btn-line{background:transparent;color:var(--ivory);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--ivory)}
.btn-forest{background:var(--forest);color:var(--ivory);border-color:var(--forest)}
.btn-forest:hover{background:#155530;border-color:#155530}
.text-link{color:var(--ivory);text-decoration:underline;text-underline-offset:.22em;text-decoration-color:var(--gold-2);text-decoration-thickness:1px;font-weight:500}
.text-link:hover{text-decoration-color:var(--gold);text-decoration-thickness:2px}
.inset .text-link{color:var(--paper-ink);text-decoration-color:var(--paper-line-2)}
.inset .text-link:hover{text-decoration-color:var(--forest)}

/* Logos: single-color masks. */
.logo{display:block;position:relative}
.logo img{display:block;width:100%;height:auto}
.logo-h{width:200px;aspect-ratio:1200/301}
.logo-v{width:min(100%,280px);aspect-ratio:1000/691}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .logo{background:var(--ivory);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:left center;mask-position:left center}
  .logo img{display:none}
  .logo-h{-webkit-mask-image:var(--mask-h);mask-image:var(--mask-h)}
  .logo-v{-webkit-mask-image:var(--mask-v);mask-image:var(--mask-v);-webkit-mask-position:center;mask-position:center}
  .watermark{display:block}
}
.watermark{display:none;position:absolute;right:-4%;top:-10%;width:min(40vw,440px);aspect-ratio:600/688;background:var(--ivory);opacity:.035;
  -webkit-mask:var(--mask-m) center/contain no-repeat;mask:var(--mask-m) center/contain no-repeat;pointer-events:none}

/* Shell: rail + content on desktop */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:env(safe-area-inset-top,0px);height:calc(100vh - env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:2.5rem;
  padding:2rem 1.5rem 1.75rem max(20px,env(safe-area-inset-left,0px));border-right:1px solid var(--line);background:var(--night)}
.chapters{display:flex;flex-direction:column;gap:.1rem;flex:1}
.chapters a{display:grid;grid-template-columns:2rem 1fr;align-items:baseline;gap:.5rem;padding:.6rem .5rem .6rem 0;text-decoration:none;color:var(--ivory-2);
  font:500 .9375rem/1.2 var(--body);border-left:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.chapters a .num{font:400 .875rem/1 var(--display);color:var(--ivory-3);font-variant-numeric:tabular-nums}
.chapters a:hover{color:var(--ivory)}
.chapters a.is-current{color:var(--ivory)}
.chapters a.is-current .num{color:var(--gold)}
.rail .btn{width:100%}
.rail-foot{font:400 .8125rem/1.4 var(--body);color:var(--ivory-3);font-stretch:90%}

/* Top bar for tablet and phone */
.topbar{display:none;position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--night);border-bottom:1px solid var(--line)}
.topbar-row{display:flex;align-items:center;justify-content:space-between;min-height:4.25rem;gap:1rem}
.topbar .logo-h{width:clamp(160px,40vw,200px)}
.menu-btn{appearance:none;background:transparent;border:1px solid var(--line-2);border-radius:2px;color:var(--ivory);font:600 .875rem/1 var(--body);padding:.7rem .9rem;cursor:pointer}
.mobile-nav{display:none;flex-direction:column;border-top:1px solid var(--line);padding-block:.5rem 1.25rem}
.mobile-nav.open{display:flex}
.mobile-nav a{text-decoration:none;color:var(--ivory);padding:.9rem 0;border-bottom:1px solid var(--line);font:500 1.0625rem/1.2 var(--body);display:flex;gap:.75rem;align-items:baseline}
.mobile-nav a .num{font:400 .9375rem/1 var(--display);color:var(--gold);min-width:2rem}
.mobile-nav .btn{margin-top:1rem;border-bottom-color:transparent;justify-content:center}
@media (max-width:1100px){
  .shell{display:block}
  .rail{display:none}
  .topbar{display:block}
}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(3.5rem,8vw,8rem) clamp(3rem,7vw,6rem)}
.hero .inner{position:relative}
.hero-kicker{display:flex;flex-wrap:wrap;gap:.6rem 0;margin-bottom:2rem;font:600 .75rem/1 var(--body);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-2)}
.hero-kicker span{padding-right:1rem;margin-right:1rem;border-right:1px solid var(--gold-2)}
.hero-kicker span:last-child{border-right:0;margin-right:0;padding-right:0}
.hero h1{max-width:12.5ch;position:relative;z-index:1}
.hero .lede{margin-top:2rem;position:relative;z-index:1}
.actions{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:2.5rem;position:relative;z-index:1}
.hero-art{position:absolute;right:-7%;top:0;width:min(50%,620px);color:var(--gold);pointer-events:none}
.ca{width:100%;height:auto;overflow:visible}
.ca text{font-family:var(--display);font-style:italic;font-size:14px;fill:var(--ivory-2)}
.ca .city-sac text{font-size:16px;font-style:normal;fill:var(--ivory)}
.ca .city circle.dot{fill:var(--night);stroke:var(--ivory-2);stroke-width:1.5}
.ca .city-sac circle.dot{fill:var(--gold);stroke:var(--gold)}
.ca .pulse{fill:none;stroke:var(--gold);stroke-width:1.25;transform-box:fill-box;transform-origin:center;animation:ca-pulse 3.2s ease-out infinite;opacity:0}
@keyframes ca-pulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(3.6);opacity:0}}
@media (max-width:1100px){
  .hero-art{position:static;width:min(100%,420px);margin-top:3rem}
  .hero h1{max-width:14ch}
}

/* Proof band */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--night-2)}
.proof-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.proof-list li{padding:2rem 2rem 2rem 0;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.proof-list li + li{border-left:1px solid var(--line);padding-left:2rem}
.num-big{font:400 3rem/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num-big i{font-style:normal;color:var(--gold);font-family:var(--body);font-weight:300;font-size:.62em;vertical-align:.32em;margin-left:.08em}
.proof-list .desc{color:var(--ivory-2);font-size:.9375rem;max-width:26ch;line-height:1.45}
@media (max-width:760px){
  .proof-list{grid-template-columns:1fr}
  .proof-list li{padding:1.4rem 0}
  .proof-list li + li{border-left:0;border-top:1px solid var(--line);padding-left:0}
}

/* The firm */
.firm .inner{position:relative}
.two-col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.two-col .copy{display:flex;flex-direction:column;gap:1.25rem;max-width:62ch}
.mission{margin:clamp(3rem,6vw,5rem) 0 0;padding:clamp(2rem,4vw,3rem) 0 0;border-top:1px solid var(--gold-2);
  font:italic 400 clamp(1.5rem,1.1rem + 1.4vw,2.3rem)/1.3 var(--display);max-width:36ch;letter-spacing:-.005em}
.mission cite{display:block;font:600 .75rem/1 var(--body);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:1.5rem}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:clamp(3rem,6vw,5rem);background:var(--line)}
.principles > div{background:var(--night);padding:1.75rem 1.75rem 1.75rem 0;display:flex;flex-direction:column;gap:.6rem}
.principles > div + div{padding-left:1.75rem}
.principles h3{font-style:italic;font-size:1.75rem}
.principles p{color:var(--ivory-2);font-size:1rem}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
@media (max-width:700px){
  .principles{grid-template-columns:1fr}
  .principles > div{padding:1.5rem 0}
  .principles > div + div{padding-left:0}
}

/* Services as tabs */
.services .lede{margin-top:1rem}
.tabs{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(2.5rem,5vw,4rem);align-items:start}
.tablist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.tablist button{appearance:none;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ivory-2);text-align:left;cursor:pointer;
  font:400 clamp(1.25rem,1rem + .8vw,1.625rem)/1.2 var(--display);padding:1.1rem 1rem 1.1rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:color .2s ease,padding-left .2s ease}
.tablist button::after{content:"";width:8px;height:8px;border-radius:50%;background:transparent;border:1px solid var(--line-2);flex:none;transition:background-color .2s ease,border-color .2s ease}
.tablist button:hover{color:var(--ivory)}
.tablist button[aria-selected="true"]{color:var(--ivory);padding-left:.75rem;border-left:2px solid var(--gold)}
.tablist button[aria-selected="true"]::after{background:var(--gold);border-color:var(--gold)}
.panel{display:flex;flex-direction:column;gap:1rem;background:var(--night-2);padding:clamp(1.5rem,3.5vw,2.75rem);border:1px solid var(--line);min-width:0}
.panel[hidden]{display:none}
.panel h3{font-size:clamp(1.75rem,1.2rem + 1.4vw,2.4rem)}
.panel .sum{font-weight:500;font-size:1.0625rem;color:var(--ivory)}
.panel .desc{color:var(--ivory-2)}
.panel .focus{color:var(--ivory-2);font-size:.9375rem;padding-top:1rem;border-top:1px solid var(--line)}
.panel .focus b{color:var(--ivory);font-weight:600}
.panel .text-link{align-self:flex-start;font-size:.9375rem;margin-top:.25rem}
@media (max-width:800px){
  .tabs{grid-template-columns:1fr;gap:1.25rem}
  .tablist{display:none}
  .panel[hidden]{display:flex}
}

/* Insurance: the lit room */
.inset{background:var(--paper);color:var(--paper-ink)}
.inset .lede{color:var(--paper-ink-2)}
.ins-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.ins-head .lede{max-width:48ch}
.timeline{list-style:none;margin:clamp(3rem,6vw,5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--paper-line-2)}
.timeline li{position:relative;padding-top:1.75rem;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.timeline li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--paper);border:1px solid var(--paper-ink)}
.timeline li:nth-child(3)::before{background:var(--forest);border-color:var(--forest)}
.timeline .when{font:600 .75rem/1 var(--body);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.timeline h4{font:400 1.375rem/1.2 var(--display);margin:0}
.timeline p{color:var(--paper-ink-2);font-size:.9875rem;line-height:1.55}
.ins-work{margin-top:clamp(3.5rem,7vw,6rem);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,4rem)}
.ins-work h3{font-size:2rem}
.ins-work .side p{color:var(--paper-ink-2);margin-top:.75rem;max-width:34ch}
.ins-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 2.5rem}
.ins-cols > div{border-top:1px solid var(--paper-line-2);padding-top:1rem}
.ins-cols h4{font:400 1.375rem/1.2 var(--display);margin-bottom:.5rem}
.ins-cols p{color:var(--paper-ink-2);font-size:.9875rem;line-height:1.55}
.ins-foot{margin-top:clamp(3rem,6vw,5rem);padding-top:2rem;border-top:1px solid var(--paper-line);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem;align-items:center}
.ins-who{color:var(--paper-ink-2);max-width:60ch}
.ins-who b{color:var(--paper-ink)}
.ins-foot .btn{justify-self:start}
@media (max-width:1000px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline::before{display:none}.timeline li{border-top:1px solid var(--paper-line-2);padding-top:1.5rem}.timeline li::before{top:-6px}}
@media (max-width:900px){.ins-head,.ins-work,.ins-foot{grid-template-columns:1fr}}
@media (max-width:600px){.timeline,.ins-cols{grid-template-columns:1fr}}

/* Approach */
.steps{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--gold-2)}
.steps li{position:relative;padding-top:1.75rem;display:flex;flex-direction:column;gap:.7rem;min-width:0}
.steps li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--night);border:1px solid var(--gold)}
.steps .n{font:400 .875rem/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.steps h3{font-size:1.5rem}
.steps p{color:var(--ivory-2);font-size:1rem}
.deliver{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.deliver h3{font-size:1.875rem}
.deliver > div > p{color:var(--ivory-2);margin-top:.75rem;max-width:40ch}
.deliver ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem}
.deliver li{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:1rem}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps::before{display:none}.steps li{border-top:1px solid var(--gold-2);padding-top:1.5rem}.steps li::before{top:-6px}}
@media (max-width:900px){.deliver{grid-template-columns:1fr}}
@media (max-width:600px){.steps{grid-template-columns:1fr}.deliver ul{grid-template-columns:1fr}}

/* People as rows */
.people-list{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.person{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,4rem);padding-block:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line);align-items:start}
.person:nth-child(even) .portrait-wrap{order:2}
.portrait-wrap{display:flex;justify-content:flex-start}
.person:nth-child(even) .portrait-wrap{justify-content:flex-end}
.portrait{aspect-ratio:4/5;width:100%;max-width:340px;background:linear-gradient(160deg,var(--night-3),var(--night-2));border:1px solid var(--gold-2);display:grid;place-items:center;position:relative;overflow:hidden}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait span{font:400 clamp(3.5rem,6vw,5rem)/1 var(--display);color:var(--ivory);opacity:.28;letter-spacing:-.02em}
.person-copy{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.person-copy h3{font-size:clamp(2rem,1.4rem + 1.6vw,2.75rem)}
.person-copy .role{color:var(--gold);font:600 .75rem/1.4 var(--body);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase}
.person-copy .short{margin-top:.75rem;font-size:1.0625rem;color:var(--ivory-2);max-width:60ch}
.bio{margin-top:.75rem}
.bio summary{cursor:pointer;color:var(--ivory);font-weight:500;font-size:.9375rem;list-style:none;display:inline-flex;align-items:center;gap:.6rem;padding:.25rem 0;border-bottom:1px solid var(--gold-2)}
.bio summary::-webkit-details-marker{display:none}
.bio summary::after{content:"+";font:400 1.25rem/1 var(--display);color:var(--gold);transition:transform .2s ease}
.bio[open] summary::after{transform:rotate(45deg)}
.bio .full{display:flex;flex-direction:column;gap:.9rem;margin-top:1.1rem;font-size:.9875rem;color:var(--ivory-2);line-height:1.6;max-width:62ch}
@media (max-width:900px){
  .person{grid-template-columns:1fr}
  .person:nth-child(even) .portrait-wrap{order:0;justify-content:flex-start}
  .portrait{max-width:300px}
}


/* Contact */
.contact{background:var(--night-2);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.contact-copy{display:flex;flex-direction:column;gap:1.5rem}
.contact-copy p{color:var(--ivory-2);max-width:40ch}
.details{margin:1rem 0 0;display:flex;flex-direction:column;gap:1.25rem}
.details div{border-top:1px solid var(--line);padding-top:1rem}
.details dt{font:600 .75rem/1 var(--body);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.details dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:1.0625rem}
.copy-btn{appearance:none;background:transparent;border:1px solid var(--line-2);color:var(--ivory);border-radius:2px;font:500 .8125rem/1 var(--body);padding:.45rem .7rem;cursor:pointer}
.copy-btn:hover{border-color:var(--gold)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field.wide{grid-column:1 / -1}
.field label{font-size:.8125rem;color:var(--ivory-2)}
.field input,.field select,.field textarea{appearance:none;width:100%;background:var(--field);border:0;border-bottom:1px solid var(--line-2);color:var(--ivory);
  font:300 1.0625rem/1.4 var(--body);padding:.8rem .8rem;border-radius:2px 2px 0 0;transition:border-color .2s ease}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--ivory-2) 50%),linear-gradient(135deg,var(--ivory-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.5rem}
.field select option{color:#F2EEE3;background:#153D29}
.field textarea{resize:vertical;min-height:7.5rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.form-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.form-note{font-size:.875rem;color:var(--ivory-2)}
.form-error{grid-column:1 / -1;font-size:.9375rem;color:#E9B8A8}
.form-done{grid-column:1 / -1;border:1px solid var(--gold-2);padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.form-done p{color:var(--ivory-2);font-size:.9875rem}
.form-done pre{margin:0;white-space:pre-wrap;word-break:break-word;font:300 .9375rem/1.55 var(--body);color:var(--ivory);max-height:16rem;overflow:auto}
.form-done .btn{align-self:flex-start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:600px){.form{grid-template-columns:1fr}}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding-block:clamp(3.5rem,7vw,6rem) 2rem;text-align:center}
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.tagline{font:italic 400 1.5rem/1.3 var(--display);color:var(--ivory-2)}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2rem;margin-top:2.5rem}
.footer-nav a{text-decoration:none;color:var(--ivory-2);font-size:.9375rem;padding:.4rem 0;border-bottom:1px solid transparent}
.footer-nav a:hover{color:var(--ivory);border-bottom-color:var(--gold-2)}
.footer-base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;font-size:.875rem;color:var(--ivory-3);text-align:left}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ca .pulse{animation:none;opacity:0}
  .btn,.tablist button,.chapters a{transition:none}
}

/* Respect native hidden states; service panels deliberately stack on mobile. */
.form [hidden]{display:none!important}
.mobile-nav{max-height:calc(100dvh - 4.25rem);overflow-y:auto}

.mobile-nav .btn-gold{color:var(--night)}