/* =========================================================================
   Powder House Advisory — shared stylesheet
   Design tokens + self-hosted fonts + component classes for every page.
   Buildless: cache-busted via ?v=YYYY-MM-DD query on the <link>.
   ========================================================================= */

/* ---- Self-hosted fonts (latin subset, font-display:swap) ---------------- */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/cormorant-garamond-400.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/cormorant-garamond-500.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/cormorant-garamond-600.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/cormorant-garamond-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap; src:url('/fonts/cormorant-garamond-500-italic.woff2') format('woff2'); }
@font-face { font-family:'Josefin Sans'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/josefin-sans-300.woff2') format('woff2'); }
@font-face { font-family:'Josefin Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/josefin-sans-400.woff2') format('woff2'); }
@font-face { font-family:'Josefin Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/josefin-sans-500.woff2') format('woff2'); }
@font-face { font-family:'Josefin Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/josefin-sans-600.woff2') format('woff2'); }

/* ---- Design tokens ------------------------------------------------------ */
:root {
  --bg:#17171e; --bg-panel:#1c1c24; --bg-footer:#14141a;
  --border:#34343e; --border-2:#3c3c46; --border-strong:#4a4a55; --divider:#2a2a33;

  --text:#d8d3c8;          /* body text            (AA on --bg) */
  --text-bright:#ece8de;   /* headings             */
  --lead:#b3ada1;          /* lead paragraphs      */
  --muted:#9a948a;         /* secondary text       (5.8:1 on --bg) */
  --muted-2:#a49d90;       /* small/disclaimer text — replaces failing #6e6960/#55504a */

  --accent:#2f5f6e;        /* fills / CTA background / decorative diamonds only */
  --accent-strong:#4a8296; /* large teal display text (75%/100%, savings) — passes 3:1 */
  --accent-text:#6ba3b5;   /* small teal text / links-hover — passes 4.5:1 */
  --alert:#a13a45;         /* CTA hover */

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Josefin Sans', system-ui, -apple-system, sans-serif;

  --wrap:1200px;
}

/* ---- Reset & base ------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--serif); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column;
}
main { flex:1 0 auto; }
img, svg { max-width:100%; }
a { color:#c9c3b6; text-decoration:underline; text-underline-offset:2px; transition:color .18s ease; }
a:hover { color:var(--accent-text); }
h1, h2, h3 { margin:0; font-weight:300; }
p { margin:0; }

/* ---- Accessibility helpers --------------------------------------------- */
.skip-link {
  position:absolute; left:12px; top:-48px; z-index:1000;
  background:var(--accent); color:#fff; font-family:var(--sans);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding:12px 18px; text-decoration:none; transition:top .18s ease;
}
.skip-link:focus { top:12px; color:#fff; }
.visually-hidden {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible { outline:2px solid var(--accent-text); outline-offset:3px; }

/* ---- Layout ------------------------------------------------------------- */
.wrap { max-width:var(--wrap); margin:0 auto; padding-left:40px; padding-right:40px; }
.section { border-top:1px solid var(--border); }
.section--alt { background:var(--bg-panel); }
.section__inner { max-width:1100px; margin:0 auto; padding:90px 40px 100px; }
.section__inner--narrow { max-width:800px; }
.section__inner--tight { max-width:700px; }

/* ---- Eyebrow / rule / diamond decorations ------------------------------ */
.diamond { width:7px; height:7px; background:var(--accent); transform:rotate(45deg); flex-shrink:0; display:inline-block; }
.eyebrow {
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-family:var(--sans); font-size:13px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted);
}
.rule { display:flex; align-items:center; justify-content:center; gap:18px; }
.rule__line { width:70px; height:1px; background:var(--accent); }

/* ---- Typography scale --------------------------------------------------- */
.display {
  font-family:var(--sans); font-weight:300; font-size:clamp(30px,5vw,52px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-bright);
  line-height:1.25; margin:0;
}
.h-section {
  font-family:var(--sans); font-weight:300; font-size:clamp(27px,3.6vw,34px);
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-bright);
  line-height:1.35; text-align:center; margin:0 auto;
}
.h-sub {
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(19px,2.4vw,23px); line-height:1.55; color:var(--muted);
}
.lead { font-size:clamp(19px,2.2vw,21px); line-height:1.6; color:var(--lead); }
.prose { font-size:19px; line-height:1.65; color:var(--text); }
.prose p + p { margin-top:1.1em; }
.center { text-align:center; }
.note { font-size:17px; font-style:italic; color:var(--muted-2); line-height:1.6; }

/* ---- Header / nav ------------------------------------------------------- */
.site-header { position:relative; }
.nav {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;
  max-width:var(--wrap); margin:0 auto; padding:28px 40px 24px; border-bottom:1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand:hover { color:inherit; }
.brand__mark { flex-shrink:0; }
.brand__name {
  font-family:var(--sans); font-weight:500; font-size:17px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text); line-height:1.15;
}
.brand__name span {
  display:block; font-weight:300; font-size:13px; letter-spacing:.34em; color:var(--muted);
}
.nav-links {
  display:flex; flex-wrap:wrap; gap:20px 34px;
  font-family:var(--sans); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
}
.nav-link { text-decoration:none; color:var(--muted); transition:color .18s ease; }
.nav-link:hover { color:var(--text); }
.nav-link[aria-current="page"] { color:var(--accent-text); }

/* ---- Buttons ------------------------------------------------------------ */
.cta {
  display:inline-block; font-family:var(--sans); font-size:14px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-bright); background:var(--accent);
  padding:18px 36px 15px; text-decoration:none; border:1px solid var(--accent);
  transition:background .18s ease, color .18s ease, border-color .18s ease; cursor:pointer;
}
.cta:hover { background:var(--alert); border-color:var(--alert); color:#fff; }
.btn-ghost {
  display:inline-block; font-family:var(--sans); font-size:14px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text); background:transparent;
  padding:17px 36px 14px; text-decoration:none; border:1px solid var(--border-strong);
  transition:border-color .18s ease, color .18s ease;
}
.btn-ghost:hover { border-color:var(--text); color:#fff; }
.btn-row { display:flex; flex-wrap:wrap; gap:20px; }

/* ---- Cards / grids ------------------------------------------------------ */
.grid { display:grid; gap:32px; }
.grid--2 { grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.grid--services {
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1px; background:var(--border); border:1px solid var(--border);
}
.frame { border:1px solid var(--border-2); padding:8px; height:100%; }
.frame__inner { border:1px solid var(--border-2); padding:40px 36px; height:100%; text-align:center; }

.stat-num { font-family:var(--sans); font-weight:300; font-size:clamp(48px,7vw,64px); color:var(--accent-strong); line-height:1; }
.stat-label { font-family:var(--sans); font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-bright); margin-top:8px; }

.svc {
  background:var(--bg); padding:44px 30px 40px; display:flex; flex-direction:column; gap:16px;
}
.section--alt .svc { background:var(--bg-panel); }
.svc__num { font-family:var(--sans); font-weight:300; font-size:30px; color:var(--accent-strong); }
.svc__hr { width:32px; height:1px; background:var(--border-strong); }
.svc__title { font-family:var(--sans); font-size:16px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-bright); line-height:1.5; }
.svc__body { font-size:18px; line-height:1.55; color:var(--muted); }

/* ---- FAQ (details/summary) --------------------------------------------- */
.faq { display:flex; flex-direction:column; border-top:1px solid var(--border-2); }
.faq details { border-bottom:1px solid var(--border-2); }
.faq summary { list-style:none; display:flex; align-items:baseline; justify-content:space-between; gap:24px; cursor:pointer; padding:26px 4px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary > span:first-child { font-family:var(--sans); font-size:17px; letter-spacing:.08em; text-transform:uppercase; color:var(--text); line-height:1.5; }
.faq-plus { font-family:var(--sans); font-size:22px; color:var(--accent-text); transition:transform .2s ease; flex-shrink:0; }
.faq details[open] .faq-plus { transform:rotate(45deg); }
.faq__answer { font-size:20px; line-height:1.6; color:var(--muted); margin:0; padding:0 40px 28px 4px; }

/* ---- Breadcrumb --------------------------------------------------------- */
.breadcrumb { font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }
.breadcrumb ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--text); }
.breadcrumb li[aria-current="page"] { color:var(--text); }
.breadcrumb li + li::before { content:"·"; margin-right:8px; color:var(--border-strong); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { border-top:1px solid var(--border); background:var(--bg-footer); flex-shrink:0; }
.site-footer__inner {
  max-width:var(--wrap); margin:0 auto; padding:40px;
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px 40px;
}
.footer-brand { font-family:var(--sans); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); }
.footer-links { display:flex; flex-wrap:wrap; gap:12px 26px; font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.footer-links a { color:var(--muted); text-decoration:none; }
.footer-links a:hover { color:var(--text); }
.disclaimer { font-size:15px; color:var(--muted-2); font-style:italic; max-width:520px; line-height:1.6; }

/* ---- Hero rays ---------------------------------------------------------- */
.hero { position:relative; overflow:hidden; text-align:center; padding:72px 40px 0; }
.hero__rays { position:absolute; inset:0; display:flex; justify-content:center; pointer-events:none; }
.hero__rays svg { opacity:.5; animation:ph-ray-glow 9s ease-in-out infinite; }
.hero__inner { position:relative; display:flex; flex-direction:column; align-items:center; }
@keyframes ph-ray-glow { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ---- Estimator form controls (migrated from estimator inline <style>) --- */
input[type="range"].ph-slider { -webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--border-2); outline:none; cursor:pointer; }
input[type="range"].ph-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; background:var(--text); transform:rotate(45deg); border:none; cursor:pointer; }
input[type="range"].ph-slider::-moz-range-thumb { width:16px; height:16px; background:var(--text); transform:rotate(45deg); border:none; border-radius:0; cursor:pointer; }
select.ph-select { -webkit-appearance:none; appearance:none; width:100%; background:var(--bg-panel) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a948a' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center; border:1px solid var(--border-2); color:var(--text-bright); font-family:var(--sans); font-size:15px; letter-spacing:.08em; padding:15px 44px 13px 16px; cursor:pointer; }
select.ph-select:focus { outline:none; border-color:var(--muted); }
input.ph-input { width:100%; background:var(--bg-panel); border:1px solid var(--border-2); color:var(--text-bright); font-family:var(--sans); font-size:18px; letter-spacing:.06em; padding:14px 16px 12px; }
input.ph-input:focus { outline:none; border-color:var(--muted); }
.est-field-label { font-family:var(--sans); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }
.est-hint { font-size:16px; font-style:italic; color:var(--muted-2); }

/* ---- Utilities ---------------------------------------------------------- */
.stack > * + * { margin-top:var(--gap,22px); }
.mt-s{margin-top:18px}.mt-m{margin-top:28px}.mt-l{margin-top:44px}.mt-xl{margin-top:60px}
.maxw-680{max-width:680px}.maxw-620{max-width:620px}.maxw-540{max-width:540px}.mx-auto{margin-left:auto;margin-right:auto}

/* ---- Responsive & motion ----------------------------------------------- */
@media (max-width:640px) {
  .nav { padding:22px 22px 18px; }
  .wrap { padding-left:22px; padding-right:22px; }
  .section__inner { padding:64px 22px 72px; }
  .hero { padding:56px 22px 0; }
  .frame__inner { padding:32px 24px; }
  .site-footer__inner { padding:32px 22px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}