/* ============================================================================
   Vulcani — shared subpage stylesheet. Rebuilt 2026-08-16 in the "Obsidian"
   language to match the homepage.

   This one file styles 32 pages, so it is also where several audit findings
   were actually living:
     - .btn-primary / .nav-cta were white text on an orange gradient: 2.32-2.84:1
       against a required 4.5:1. Buttons are now ivory-on-near-black at 17.5:1.
     - --text-dim was #555577 on #080810: 2.80:1. Retired.
     - .nav-links used display:none below 768px with no hamburger, so mobile
       visitors simply lost the navigation. It now wraps instead.
   Every class name from the previous file is preserved, so no page markup
   had to change.
   ============================================================================ */

@font-face{
  font-family:'Hanken Grotesk';
  src:url('/assets/v2/fonts/HankenGrotesk-var.woff2') format('woff2');
  font-weight:200 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root{
  --bg:#0a0a0b;
  --bg2:#0d0d0e;
  --bg3:#131314;
  --ink:#f4f1ea;
  --dim:#a39b90;               /* 7.21:1 on --bg */
  --accent:#f97316;            /* 7.06:1 on --bg — ink/accent only, never a text background */
  --line:rgba(244,241,234,0.12);
  --line-soft:rgba(244,241,234,0.07);
  --surface:rgba(244,241,234,0.03);
  --radius:4px;
  --radius-lg:6px;

  /* legacy aliases — old markup/inline styles still reference these names */
  --orange:var(--accent);
  --orange-light:#fb923c;
  --text:var(--ink);
  --text-muted:var(--dim);
  --text-dim:var(--dim);       /* was #555577 @ 2.80:1 */
  --border:var(--line);
  --border-hover:rgba(244,241,234,0.28);
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:300;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
  overflow-x:hidden;
}
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--accent); }
ul{ list-style:none; }
button{ cursor:pointer; border:none; font-family:inherit; background:none; color:inherit; }
img{ max-width:100%; height:auto; display:block; }
input,textarea,select{ font-size:16px; }   /* stops iOS zoom-on-focus */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s!important; transition-duration:.001s!important; }
  html{ scroll-behavior:auto!important; }
}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

/* the old fixed noise overlay is gone — it sat above everything at opacity .5 */

/* ---------- Header / nav ---------- */
header{
  position:sticky; top:0; z-index:1000;
  padding:18px clamp(20px,5vw,64px);
  background:rgba(10,10,11,0.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-container{
  max-width:1240px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  gap:14px 28px; flex-wrap:wrap;
}
.logo{
  font-size:15px; font-weight:600; letter-spacing:.22em;
  color:var(--ink); white-space:nowrap; position:relative;
}
.logo::after{ content:'·'; color:var(--accent); margin-left:3px; }
.nav-links{ display:flex; gap:6px 26px; flex-wrap:wrap; align-items:center; }
.nav-links a{ font-size:14px; font-weight:400; color:var(--dim); min-height:44px; display:inline-flex; align-items:center; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:12px 24px; border-radius:999px;
  background:var(--ink); color:var(--bg)!important;   /* 17.54:1 */
  font-size:14px; font-weight:600;
  transition:background .2s ease, transform .2s ease;
}
.nav-cta:hover{ background:#fff; color:var(--bg)!important; transform:translateY(-1px); }

/* ---------- Layout ---------- */
main{ position:relative; }
.container{ max-width:1100px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.container-narrow{ max-width:760px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }

/* ---------- Hero ---------- */
.page-hero{ padding:clamp(64px,10vw,120px) clamp(20px,5vw,64px) clamp(40px,6vw,64px); text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:400; letter-spacing:.3em;
  text-transform:uppercase; color:var(--dim); margin-bottom:26px;
}
/* homepage eyebrows carry no dot — removed for consistency */
h1.page-title{
  font-size:clamp(2.2rem,5.5vw,4rem);
  font-weight:200; line-height:1.07; letter-spacing:-.015em;
  margin:0 auto 24px; max-width:17ch; text-wrap:balance; color:var(--ink);
}
h1.page-title .grad{ color:var(--accent); }
.page-lede{ font-size:clamp(1rem,1.5vw,1.15rem); color:var(--dim); max-width:62ch; margin:0 auto 36px; }
.cta-row{ display:flex; gap:16px 24px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:14px 30px; border-radius:999px;
  background:var(--ink); color:var(--bg)!important;   /* was white-on-orange @ 2.8:1 */
  font-size:15px; font-weight:600;
  transition:background .2s ease, transform .2s ease;
}
.btn-primary:hover{ background:#fff; color:var(--bg)!important; transform:translateY(-1px); }
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:14px 30px; border-radius:999px;
  background:transparent; color:var(--ink)!important;
  font-size:15px; font-weight:400;
  border:1px solid var(--line);
  transition:border-color .2s ease, color .2s ease;
}
.btn-secondary:hover{ border-color:var(--border-hover); color:var(--ink)!important; }

/* ---------- Sections ---------- */
section.block{ padding:clamp(56px,8vw,88px) 0; }
section.block.alt{ background:none; border-top:1px solid var(--line); }
h2.section-title{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:300; letter-spacing:-.01em; margin-bottom:14px; color:var(--ink); }
.section-desc{ font-size:1.02rem; color:var(--dim); max-width:62ch; margin-bottom:36px; }

/* ---------- Cards ---------- */
.grid-3{ display:grid; gap:clamp(26px,3.5vw,52px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card{
  background:none; border:0; border-top:1px solid var(--line);
  border-radius:0; padding:22px 0 0;
}
.card:hover{ border-color:var(--border-hover); }
.card h3{ font-size:1.12rem; font-weight:500; margin-bottom:10px; color:var(--ink); }
.card p{ color:var(--dim); font-size:.95rem; }
.card .icon{
  width:auto; height:auto; border:0; background:none; border-radius:0;
  display:block; font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  margin-bottom:12px; color:var(--accent);
}

/* ---------- Article ---------- */
article.post{ padding:40px 0 72px; }
article.post h2{ font-size:1.6rem; font-weight:400; letter-spacing:-.01em; margin:44px 0 14px; color:var(--ink); }
article.post h3{ font-size:1.22rem; font-weight:500; margin:30px 0 10px; color:var(--ink); }
article.post p{ margin-bottom:18px; color:var(--ink); font-size:1.05rem; }
article.post ul, article.post ol{ padding-left:24px; margin-bottom:22px; }
article.post ul{ list-style:disc; }
article.post ol{ list-style:decimal; }
article.post li{ margin-bottom:9px; color:var(--ink); }
article.post strong{ color:var(--ink); font-weight:600; }
/* In-article links must be distinguishable from body text. They were ink-on-ink
   (1.00:1) with a 1.38:1 hairline — invisible as links. Now accent + underline:
   two independent cues, and 7.06:1 against the page. */
article.post a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px;
                text-decoration-thickness:1px; border-bottom:0; }
article.post a:hover{ color:var(--ink); text-decoration-color:var(--ink); }
article.post blockquote{
  border-left:2px solid var(--accent);
  padding:4px 0 4px 22px; margin:24px 0;
  color:var(--dim); font-style:italic;
}
article.post code{ background:var(--bg3); padding:2px 6px; border-radius:var(--radius); font-size:.9em; color:var(--accent); }
.post-meta{ display:flex; gap:14px; align-items:center; color:var(--dim); font-size:.9rem; margin-bottom:28px; flex-wrap:wrap; }
.post-meta time{ color:var(--dim); }

/* ---------- Blog index ---------- */
.post-list{ display:grid; gap:20px; }
.post-card{
  display:block; background:none; border:0; border-top:1px solid var(--line);
  border-radius:0; padding:26px 0; color:inherit;
  transition:border-color .25s ease;
}
.post-card:hover{ border-color:var(--border-hover); color:inherit; }
.post-list{ gap:0; }
.post-card h2{ font-size:1.3rem; font-weight:500; margin-bottom:8px; color:var(--ink); }
.post-card .excerpt{ color:var(--dim); font-size:.97rem; margin-bottom:10px; }
.post-card .post-meta{ margin:0; font-size:.85rem; }

/* ---------- Final CTA ---------- */
.final-cta{ text-align:center; padding:clamp(64px,9vw,100px) clamp(20px,5vw,64px); border-top:1px solid var(--line); }
.final-cta h2{ font-size:clamp(1.8rem,3.5vw,2.5rem); font-weight:200; letter-spacing:-.01em; margin-bottom:14px; color:var(--ink); }
.final-cta p{ color:var(--dim); max-width:52ch; margin:0 auto 30px; font-size:1.02rem; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding:36px clamp(20px,5vw,64px) 40px; text-align:center; color:var(--dim); font-size:.86rem; }
footer .footer-links{ display:flex; gap:10px 24px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
footer .footer-links a{ color:var(--dim); min-height:44px; display:inline-flex; align-items:center; }
footer .footer-links a:hover{ color:var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width:768px){
  header{ padding:14px 20px; }
  .nav-container{ justify-content:center; text-align:center; }
  /* nav is NOT hidden — it wraps. The old rule dropped it entirely with no hamburger. */
  .nav-links{ justify-content:center; gap:4px 18px; order:3; width:100%; }
  .nav-links a{ font-size:13px; }
  section.block{ padding:44px 0; }
  .cta-row{ flex-direction:column; align-items:stretch; }
  .btn-primary,.btn-secondary{ justify-content:center; }
}

/* ---------- FAQ (added 2026-08-16) ----------
   23 pages carried FAQPage JSON-LD declaring 79 Q&As that appeared nowhere in
   the rendered page — against Google's structured-data policy, which requires
   FAQ content to be visible to users. These blocks render that same content.
   <details> is used deliberately: expandable FAQ is explicitly permitted, the
   text stays in the DOM for crawlers, and it needs no JavaScript. */
.faq-section{ padding:clamp(48px,7vw,76px) 0; border-top:1px solid var(--line); }
.faq-section h2{ font-size:clamp(1.5rem,2.8vw,2rem); font-weight:300; letter-spacing:-.01em; margin-bottom:28px; color:var(--ink); }
.faq-list{ max-width:70ch; }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  padding:20px 0; min-height:44px;
  font-size:1.02rem; font-weight:500; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; flex:none; color:var(--accent); font-weight:300; font-size:1.3rem; line-height:1;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item summary:hover{ color:var(--accent); }
.faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.faq-item .faq-answer{ padding:0 0 22px; color:var(--dim); font-size:1rem; line-height:1.7; max-width:66ch; }

/* ---------- Skip link (added 2026-08-16) ----------
   42 of 48 pages had no way for a keyboard user to bypass the header. */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:12px 20px;z-index:1100;font-weight:600;border-radius:0 0 var(--radius) 0;}
.skip:focus{left:0;top:0;}

/* ============================================================================
   HOMEPAGE CHROME (added 2026-08-16)
   The nav and footer are on every page, so if they differ the whole site reads
   as two sites — which is exactly what was happening. These are the homepage's
   own components, lifted verbatim so subpages can use identical markup:
   .nav/.brand/.nav-actions/.tel/.btn on top, .foot/.foot-in/.foot-links below.
   ============================================================================ */
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;padding:22px clamp(20px,5vw,64px);}
.brand{font-size:15px;font-weight:600;letter-spacing:.22em;white-space:nowrap;color:var(--ink);}
.brand span{color:var(--accent);}
.nav ul.nav-links{display:flex;gap:8px 26px;flex-wrap:wrap;align-items:center;list-style:none;}
.nav ul.nav-links a{font-size:14px;color:var(--dim);min-height:44px;display:inline-flex;align-items:center;}
.nav ul.nav-links a:hover{color:var(--ink);}
.nav-actions{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;}
.tel{font-size:14px;font-weight:500;color:var(--ink);min-height:44px;display:inline-flex;align-items:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:13px 26px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:15px;font-weight:600;transition:background .2s ease,transform .2s ease;}
.btn:hover{background:#fff;color:var(--bg);transform:translateY(-1px);}
.btn-quiet{background:transparent;color:var(--dim);border-bottom:1px solid var(--line);border-radius:0;padding:6px 0;min-height:44px;display:inline-flex;align-items:center;}
.btn-quiet:hover{color:var(--ink);}
.foot{border-top:1px solid var(--line);padding:36px clamp(20px,5vw,64px) 44px;text-align:left;}
.foot-in{display:flex;justify-content:space-between;gap:28px 40px;flex-wrap:wrap;font-size:13px;color:var(--dim);}
.foot-links{display:flex;gap:10px 24px;flex-wrap:wrap;list-style:none;}
.foot-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--dim);}
.foot-links a:hover{color:var(--ink);}
.foot-legal{font-size:12px;color:var(--dim);margin-top:24px;}
@media(max-width:560px){
  .nav{justify-content:center;text-align:center;}
  .nav ul.nav-links{justify-content:center;}
  .nav-actions{justify-content:center;width:100%;}
  .foot-in{justify-content:center;text-align:center;}
  .foot-links{justify-content:center;}
}