/* ============================================================
   GRAYLINE STRATEGIC — sparkforge-structured, dark + gold
   Layout mirrors sparkforge.tech; palette stays Grayline.
   ============================================================ */

:root{
  --bg:#0c0e0d;            /* dark charcoal body (sparkforge uses near-black sections) */
  --bg-soft:#121514;
  --bg-band:#0a0c0b;
  --ink:#f1efe9;
  --ink-soft:#bcc0b9;
  --ink-dim:#868c83;
  --line:rgba(241,239,233,.13);
  --line-soft:rgba(241,239,233,.07);
  --gold:#c89b2d;
  --gold-bright:#e7c46a;
  --heron:#8fa3aa;
  --maxw:1200px;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(200,155,45,.3);color:#fff}

h1,h2,h3,h4{font-weight:300;letter-spacing:.005em;margin:0;color:var(--ink)}
h1{font-size:clamp(34px,5vw,60px);line-height:1.12}
h2{font-size:clamp(28px,3.6vw,44px);line-height:1.18}
h3{font-size:clamp(19px,1.6vw,22px);font-weight:400;line-height:1.3}
p{margin:0 0 1em}
.thin{font-weight:200}
.wrap{width:min(var(--maxw),calc(100% - 48px));margin-inline:auto}
.accent{color:var(--gold)}

/* ---------- buttons (sparkforge: outline + filled) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:400;letter-spacing:.02em;
  padding:14px 30px;border:1px solid var(--ink);color:var(--ink);background:transparent;border-radius:2px;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .2s}
.btn:hover{background:var(--ink);color:#0c0e0d;transform:translateY(-1px)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#15140d;font-weight:500}
.btn.gold:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.btn.ghost{border-color:rgba(241,239,233,.55)}

/* ---------- header (sparkforge: logo left, links right, transparent over hero) ---------- */
.hdr{position:absolute;top:0;left:0;right:0;z-index:40;padding:22px 0}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:1px solid var(--line)}
.brand .bx{display:flex;flex-direction:column;line-height:1}
.brand .bx b{font-size:21px;font-weight:300;letter-spacing:.26em;color:#fff}
.brand .bx small{font-size:9px;font-weight:300;letter-spacing:.30em;color:var(--ink-dim);margin-top:5px}
.nav{display:flex;align-items:center;gap:32px}
.nav>a,.nav .has-menu>a{font-size:15px;font-weight:300;color:var(--ink-soft);letter-spacing:.01em;transition:color .2s}
.nav>a:hover,.nav .has-menu>a:hover,.nav a[aria-current="page"]{color:var(--gold)}
.has-menu{position:relative}
.has-menu>a::after{content:"";display:inline-block;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:8px;opacity:.55}
.menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:330px;background:#101312;border:1px solid var(--line);border-radius:4px;padding:8px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.menu a{display:block;padding:11px 14px;font-size:14px;color:var(--ink-soft);border-radius:3px;font-weight:300}
.menu a:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.book{border:1px solid var(--gold);color:var(--gold-bright)!important;padding:10px 22px;border-radius:2px}
.book:hover{background:rgba(200,155,45,.12)}
.navtoggle{display:none;flex-direction:column;gap:5px;background:0;border:0;cursor:pointer;padding:6px}
.navtoggle span{width:25px;height:2px;background:var(--ink)}

/* ---------- HERO: full-bleed dark photo, left-aligned text ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;
  background-image:linear-gradient(90deg,rgba(8,10,9,.90) 0%,rgba(8,10,9,.84) 38%,rgba(8,10,9,.58) 66%,rgba(8,10,9,.28) 100%),url('/assets/grayline-corner-heron-mark.png'),url('/assets/grayline-wetland-scene-poster.png');
  background-position:center,right clamp(28px,6vw,128px) top clamp(104px,13vh,160px),center;
  background-size:auto,clamp(360px,34vw,620px) auto,cover;
  background-attachment:scroll,fixed,fixed;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--line)}
.hero::after,.phero::after{content:none}
.hero .wrap{position:relative;z-index:2;padding:120px 0 80px}
.hero .inner{max-width:680px}
.hero .tag{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:26px}
.hero h1{font-weight:200;color:#fff}
.hero h1 b{font-weight:400;color:#fff}
.hero p{margin:26px 0 38px;font-size:19px;color:var(--ink-soft);max-width:60ch}
.hero .actions{display:flex;gap:16px;flex-wrap:wrap}

/* email signup strip under hero actions (sparkforge has a subscribe) */
.subscribe{margin-top:34px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;max-width:480px}
.subscribe input{flex:1;min-width:210px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);padding:13px 16px;border-radius:2px;font:inherit;font-size:15px}
.subscribe input::placeholder{color:var(--ink-dim)}
.subscribe .btn{padding:13px 22px}

/* ---------- section scaffolding ---------- */
section{position:relative}
.sec{padding:clamp(64px,9vw,116px) 0}
.sec-tag{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:18px}
.sec-head{max-width:760px;margin-bottom:54px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{margin-top:18px;color:var(--ink-soft);font-size:18px}

/* ---------- SERVICES: 2-col grid, thin dividers, geometric icon ---------- */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.svc{padding:44px 40px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);transition:background .3s}
.svc:nth-child(2n){border-right:0}
.svc:hover{background:var(--bg-soft)}
.svc .ico{width:34px;height:34px;margin-bottom:22px;position:relative}
.svc .ico::before,.svc .ico::after{content:"";position:absolute;width:18px;height:18px;border:1.5px solid var(--gold)}
.svc .ico::before{top:0;left:0}
.svc .ico::after{bottom:0;right:0;border-color:var(--heron);opacity:.7}
.svc h3{margin-bottom:14px;color:var(--ink)}
.svc p{margin:0;color:var(--ink-soft);font-size:15.5px}
.svc .more{display:inline-block;margin-top:18px;font-size:14px;color:var(--gold);letter-spacing:.04em}
.svc .more::after{content:" →";transition:margin .2s}
.svc:hover .more::after{margin-left:5px}

/* services overview list variant (services.html) */
.svc-grid.three{grid-template-columns:1fr 1fr 1fr}
.svc-grid.three .svc:nth-child(2n){border-right:1px solid var(--line)}
.svc-grid.three .svc:nth-child(3n){border-right:0}

/* ---------- ABOUT band: dark photo bg, two-column ---------- */
.about-band{background:linear-gradient(rgba(8,10,9,.80),rgba(8,10,9,.88)),url('/assets/grayline-wetland-scene-poster.png') center/cover fixed no-repeat;border-block:1px solid var(--line)}
.about-band .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.about-band .quote{font-size:clamp(22px,2.4vw,30px);font-weight:200;line-height:1.4;color:#fff}
.about-band .quote b{color:var(--gold-bright);font-weight:300}
.about-band p{color:var(--ink-soft)}

/* ---------- mission / values ---------- */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;border:1px solid var(--line)}
.val{padding:34px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.val h3{display:flex;align-items:baseline;gap:11px;margin-bottom:13px}
.val h3 i{font-style:normal;font-size:13px;color:var(--gold);font-weight:400}
.val p{margin:0;color:var(--ink-soft);font-size:14.5px}

/* ---------- testimonial ---------- */
.tmnl{text-align:center;max-width:820px;margin-inline:auto}
.tmnl .stars{color:var(--gold);letter-spacing:.3em;margin-bottom:22px}
.tmnl blockquote{margin:0;font-size:clamp(20px,2.3vw,28px);font-weight:200;line-height:1.5;color:#fff}
.tmnl .who{margin-top:24px;font-size:14px;letter-spacing:.04em;color:var(--ink-dim)}

/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.step{padding:28px 20px 32px;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step i{font-style:normal;font-size:13px;color:var(--gold)}
.step h3{margin:13px 0 9px;font-size:18px}
.step p{margin:0;font-size:14px;color:var(--ink-soft)}

/* ---------- bottom CTA (sparkforge: centered, dark) ---------- */
.endcta{text-align:center;border-top:1px solid var(--line)}
.endcta h2{max-width:18ch;margin-inline:auto}
.endcta p{margin:20px auto 32px;max-width:60ch;color:var(--ink-soft);font-size:18px}

/* ---------- page hero (interior pages) ---------- */
.phero{position:relative;overflow:hidden;padding:160px 0 70px;border-bottom:1px solid var(--line);
  background-image:linear-gradient(90deg,rgba(8,10,9,.90),rgba(8,10,9,.82) 40%,rgba(8,10,9,.58) 66%,rgba(8,10,9,.32) 100%),url('/assets/grayline-corner-heron-mark.png'),url('/assets/grayline-wetland-scene-poster.png');
  background-position:center,right clamp(28px,6vw,128px) top clamp(104px,13vh,160px),center;
  background-size:auto,clamp(360px,34vw,620px) auto,cover;
  background-attachment:scroll,fixed,fixed;
  background-repeat:no-repeat}
.phero .wrap{position:relative;z-index:2}
.phero .tag{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.phero p{margin-top:20px;color:var(--ink-soft);font-size:19px;max-width:62ch}

/* ---------- footer (sparkforge: dark, logo, contact, links) ---------- */
.ftr{background:var(--bg-band);border-top:1px solid var(--line);padding:60px 0 34px}
.ftr .top{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid var(--line-soft)}
.ftr .col h4{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);font-weight:400;margin-bottom:16px}
.ftr .col a,.ftr .col span{display:block;font-size:15px;color:var(--ink-soft);margin-bottom:10px;font-weight:300}
.ftr .col a:hover{color:var(--gold)}
.ftr .bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:24px;font-size:13px;color:var(--ink-dim)}

/* ---------- entrance (CSS-only, always ends visible) ---------- */
.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:fadeUp .8s ease both}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .svc-grid,.svc-grid.three,.about-band .cols{grid-template-columns:1fr}
  .svc{border-right:0!important}
  .svc-grid.three .svc:nth-child(2n){border-right:0}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2n){border-right:0}
  .about-band{background-attachment:scroll}
}
@media (max-width:680px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#101312;border-top:1px solid var(--line);padding:6px 24px 16px}
  .nav.open>a,.nav.open .has-menu>a{display:block;padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .nav.open .menu{position:static;transform:none;opacity:1;pointer-events:auto;border:0;box-shadow:none;padding:0 0 8px 14px;min-width:0}
  .navtoggle{display:flex}
  .hdr{padding:16px 0}
  .hero,.phero{background-position:center,right -46px top 132px,center;background-size:auto,240px auto,cover;background-attachment:scroll,scroll,scroll}
  .steps{grid-template-columns:1fr}
  .step{border-right:0}
  .val{border-right:0}
}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}*{scroll-behavior:auto}}

/* ===== ported pages: FAQ, intake, service detail ===== */
/* FAQ accordion */
.faq{max-width:860px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 4px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:18px;font-weight:400;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:"+";font-size:24px;font-weight:200;color:var(--gold);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 4px 26px;color:var(--ink-soft);font-size:15.5px;max-width:74ch}

/* intake form */
.intake{max-width:860px;margin-inline:auto}
.intake fieldset{border:1px solid var(--line);border-radius:4px;padding:30px;margin:0 0 22px;background:var(--bg-soft)}
.intake legend{padding:0 12px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:400}
.intake label{display:block;margin:0 0 18px;font-size:14.5px;color:var(--ink-soft)}
.intake label:last-child{margin-bottom:0}
.intake input[type=text],.intake input[type=email],.intake textarea{width:100%;margin-top:8px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);padding:12px 14px;border-radius:2px;font:inherit;font-size:15px}
.intake input::placeholder,.intake textarea::placeholder{color:var(--ink-dim)}
.intake input:focus,.intake textarea:focus{outline:0;border-color:var(--gold)}
.intake .check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:6px 0 4px}
.intake .check-grid label{display:flex;align-items:flex-start;gap:10px;margin:0}
.intake .auth-check{display:flex;align-items:flex-start;gap:11px;line-height:1.5}
.intake input[type=checkbox]{margin-top:4px;accent-color:var(--gold)}
.intake .submit-row{margin-top:4px}
.intake .submit-row p{margin-top:14px;font-size:13.5px;color:var(--ink-dim)}
.intake-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:8px}
.intake-overview .box{border:1px solid var(--line);border-radius:4px;padding:24px;background:var(--bg-soft)}
.intake-overview h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:12px}
.intake-overview p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.notice{border:1px solid var(--gold-line,rgba(200,155,45,.4));border-left:3px solid var(--gold);border-radius:3px;padding:18px 22px;margin:0 0 30px;background:rgba(200,155,45,.05);font-size:15px;color:var(--ink-soft)}
.notice b{color:var(--gold-bright)}

/* service detail */
.svc-detail{max-width:900px;margin-inline:auto}
.svc-block{padding:34px 0;border-top:1px solid var(--line)}
.svc-block .tag{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:400}
.svc-block h2{margin:0 0 14px}
.svc-block p{margin:0;color:var(--ink-soft);max-width:74ch}
@media (max-width:680px){.intake .check-grid,.intake-overview{grid-template-columns:1fr}}

/* Charles static full-tab correction: Who We Are + FAQs use the full branded wetland scene as the fixed hero plane. */
body.static-full-tab .phero{
  min-height:92vh;
  display:flex;
  align-items:center;
  padding:120px 0 80px;
  background-image:linear-gradient(90deg,rgba(8,10,9,.90) 0%,rgba(8,10,9,.84) 38%,rgba(8,10,9,.58) 66%,rgba(8,10,9,.28) 100%),url('/assets/grayline-corner-heron-mark.png'),url('/assets/grayline-wetland-scene-poster.png');
  background-position:center,right clamp(28px,6vw,128px) top clamp(104px,13vh,160px),center;
  background-size:auto,clamp(360px,34vw,620px) auto,cover;
  background-attachment:scroll,fixed,fixed;
  background-repeat:no-repeat;
}
body.static-full-tab .phero .wrap{width:100%;}
@media (max-width:760px){body.static-full-tab .phero{min-height:72vh;background-position:center,right -46px top 132px,center;background-size:auto,240px auto,cover;background-attachment:scroll,scroll,scroll}}
/* ---------- headline-centering pass v2: readable centered hero copy over static scene ---------- */
.hero .inner{margin-inline:auto;text-align:center;max-width:min(820px,92vw);opacity:1!important;transform:none!important;animation:none!important}
.hero .tag,.phero .tag{text-shadow:0 2px 22px rgba(0,0,0,.95)}
.hero h1,.phero h1{text-shadow:0 3px 28px rgba(0,0,0,.96),0 1px 2px rgba(0,0,0,.9)}
.hero p,.phero p{margin-left:auto;margin-right:auto;color:#d9ddd6;text-shadow:0 2px 20px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.9)}
.hero .actions{justify-content:center}
.subscribe{margin-left:auto;margin-right:auto;justify-content:center}
.phero .wrap{text-align:center;opacity:1!important;transform:none!important;animation:none!important}
.phero h1{max-width:18ch;margin-left:auto;margin-right:auto;color:#fff}
.phero p{max-width:66ch}
@media (max-width:760px){
  .hero .inner,.phero .wrap{text-align:center}
  .phero h1{max-width:20ch}
}

/* ---------- no-gated-content guard: keep all sections visible immediately ---------- */
.reveal{opacity:1!important;transform:none!important;animation:none!important}