/* MAVEN HOMES SERVICES PAGE STYLES */

/* ══ R1 READABILITY OVERRIDES (page-scoped; layered after public-shell.css) ══
   The shell's supporting-text tokens read faint at light (300) weight — the
   owner flagged them, especially for impaired vision. These page-scoped :root
   overrides brighten the warm supporting greys while keeping them clearly
   subordinate to cream/primary, and firm up card/FAQ/input borders (non-text
   contrast). The black/cream/antique-gold character is preserved; nothing is
   pushed to pure white. Measured ratios (fg on charcoal #1A1A1A / dark #111 /
   black #0A0A0A):
     --text-secondary  #A09888 (6.08/6.60/6.92)  ->  #C2B8A6 (8.87/9.62/10.09)
     --text-tertiary   #8A8175 (4.54/4.93/5.16)  ->  #B0A794 (7.29/7.91/8.30)
   --text-primary (#E8E2D8, 13.5+) and --cream/--gold are unchanged. */
:root{
  --text-secondary:#C2B8A6;
  --text-tertiary:#B0A794;
  --border:rgba(200,169,81,0.20);        /* was .12 — clearer card/FAQ separators */
  --border-strong:rgba(200,169,81,0.34); /* was .24 — clearer inputs/strong rules */
}
/* Lift the smallest supporting copy from the shell's 300 to 400 so thin type
   doesn't appear faint through antialiasing (color already passes ≥4.5:1). */
.svc-list li, .svc-type, .cap-item .cap-t, .cxc-list li,
.section-lede, .note-flag, .svc-card p, .footer-desc, .footer-col a,
.footer-col span, .svc-note, .fit-arrow, .tsm-detail{ font-weight:400; }

body{ padding-top:26px; }
.site-header{ top:0; }   /* header flush to viewport top so its opaque band fully covers content (was top:26px, which left a 26px strip exposing hero content above the header); the 26px body inset is preserved behind the header so content positions are unchanged */

/* Current-page state on the Services nav item */
.primary-nav .services-toggle[aria-current="page"],
.primary-nav .services-toggle.is-current{ color:var(--gold); }

/* ── Shared section helpers (carried from Home reference) ───────────────── */
.section-inner.wide{ max-width:1120px; }
.kicker{ font-size:.7rem; text-transform:uppercase; letter-spacing:.28em; color:var(--gold); margin:0 0 .9rem; }
.section-lede{ font-family:var(--editorial); font-size:clamp(1.05rem,2vw,1.3rem); color:var(--text-secondary); max-width:720px; }
.note-flag{
  margin-top:1.6rem; padding:.7rem 1rem; border:1px dashed var(--border-strong);
  border-radius:8px; color:var(--text-tertiary); font-size:.76rem; letter-spacing:.03em; max-width:100%;
}

/* ── Official sunrise logo: preserve intrinsic 277×195 (~1.42:1) ratio ──── */
.site-header .brand img{ width:40px; height:40px; object-fit:contain; flex:0 0 auto; }

/* ══ SERVICES HERO (extends shell .page-hero) ════════════════════════════ */
.svc-hero{
  position:relative; overflow:hidden;
  /* Full-height hero; content sits below the header via the shell's top padding
     (top-aligned, not centred) so the taller three-line Services H1 never
     crowds the scroll cue — the whole lower band stays free for the cue. */
  min-height:min(90vh, 820px);
  display:flex; flex-direction:column; justify-content:flex-start;
}
.svc-hero .hero-inner{ margin-top:clamp(0.5rem,3vh,2.5rem); }
.svc-hero-bg{
  position:absolute; inset:0; z-index:0;
  background:url('/images/hero-bg.webp') center 46%/cover no-repeat;
  transform:scale(1.04);
}
.svc-hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(86% 66% at 50% 46%, rgba(8,8,8,0.60) 0%, rgba(8,8,8,0.30) 52%, rgba(8,8,8,0) 80%),
    linear-gradient(180deg, rgba(8,8,8,0.74) 0%, rgba(8,8,8,0.16) 26%, rgba(8,8,8,0.14) 55%, rgba(8,8,8,0.52) 82%, rgba(8,8,8,0.9) 100%);
}
.svc-hero .hero-inner{ position:relative; z-index:2; }
.svc-hero .eyebrow{ text-shadow:0 1px 12px rgba(0,0,0,0.55); }
.svc-hero h1{ text-shadow:0 2px 22px rgba(0,0,0,0.60), 0 1px 4px rgba(0,0,0,0.42); }
.svc-hero .hero-lede{ color:var(--cream); opacity:.96; text-shadow:0 1px 14px rgba(0,0,0,0.62); }

/* Scroll cue (carried) */
.scroll-cue{ position:absolute; left:50%; bottom:clamp(1.6rem,4vh,2.8rem); z-index:3; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.55rem; color:var(--gold); }
.scroll-cue-label{ font-size:.66rem; text-transform:uppercase; letter-spacing:.34em; color:var(--gold); text-shadow:0 1px 8px rgba(0,0,0,.6); }
.scroll-cue-track{ position:relative; width:1px; height:46px; background:linear-gradient(180deg, rgba(200,169,81,.7), rgba(200,169,81,0)); overflow:hidden; }
.scroll-cue-dot{ position:absolute; left:50%; top:0; width:3px; height:8px; margin-left:-1.5px; border-radius:2px; background:var(--gold-bright); animation:scrollCueDrop 2.6s var(--ease-out) infinite; }
@keyframes scrollCueDrop{ 0%{ transform:translateY(-8px); opacity:0; } 25%{ opacity:1; } 75%{ opacity:1; } 100%{ transform:translateY(46px); opacity:0; } }
@media (max-width:900px){ .scroll-cue{ display:none; } }
/* Height guard: the three-line Services H1 leaves the cue enough clearance only
   on genuinely tall viewports; hide it on shorter ones so it never crowds the
   CTAs. */
@media (max-height:879px){ .scroll-cue{ display:none; } }

/* ══ FOUR-SERVICE OVERVIEW CARDS (carried from Home reference) ═══════════ */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; margin-top:2.6rem; }
.svc-card{
  background:var(--charcoal); border:1px solid var(--border); border-radius:12px;
  padding:1.7rem 1.5rem; display:flex; flex-direction:column;
  transition:transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.svc-card:hover, .svc-card:focus-within{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:0 22px 44px -26px rgba(0,0,0,.8); }
.svc-icon{ display:inline-flex; width:48px; height:48px; color:var(--sunrise); margin-bottom:1.1rem; }
.svc-icon svg{ width:48px; height:48px; }
.svc-card h3{ font-family:var(--serif); font-weight:500; font-size:1.16rem; color:var(--cream); margin:0 0 .6rem; }
.svc-card p{ color:var(--text-secondary); font-size:.9rem; line-height:1.6; margin:0 0 1.1rem; }
.svc-jump{ margin-top:auto; align-self:flex-start; color:var(--gold); font-size:.82rem; letter-spacing:.04em; border-bottom:1px solid transparent; transition:border-color .25s var(--ease-out); }
.svc-jump:hover, .svc-jump:focus-visible{ border-color:var(--gold); }

/* ══ DETAILED SERVICE BLOCKS ═════════════════════════════════════════════ */
.svc-detail{ padding-top:clamp(2rem,4vw,3rem); }
.svc-detail + .svc-detail{ border-top:1px solid var(--border); margin-top:clamp(2rem,4vw,3rem); }
.svc-detail-head{ display:flex; align-items:center; gap:1rem; margin-bottom:.4rem; }
.svc-detail-head .svc-icon{ margin-bottom:0; width:40px; height:40px; }
.svc-detail-head .svc-icon svg{ width:40px; height:40px; }
.svc-detail-num{ font-family:var(--serif); color:var(--text-tertiary); font-size:.9rem; letter-spacing:.1em; }
.svc-detail h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2.6vw,1.7rem); color:var(--cream); margin:.2rem 0 .5rem; }
.svc-detail-audience{ color:var(--gold); font-family:var(--editorial); font-size:1.05rem; margin:0 0 1.4rem; }
.svc-detail-cols{ display:grid; grid-template-columns:1.15fr 1fr; gap:1.6rem 2.4rem; }
.svc-block-label{ font-size:.66rem; text-transform:uppercase; letter-spacing:.18em; color:var(--gold); margin:0 0 .7rem; }
.svc-list{ list-style:none; margin:0 0 1.2rem; padding:0; }
.svc-list li{ position:relative; padding:.34rem 0 .34rem 1.5rem; color:var(--text-secondary); font-size:.9rem; line-height:1.55; }
.svc-list li::before{ content:""; position:absolute; left:0; top:.72rem; width:8px; height:8px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(45deg); }
.svc-types{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.svc-type{ font-size:.74rem; color:var(--text-primary); background:rgba(200,169,81,.08); border:1px solid var(--border); border-radius:20px; padding:.28rem .7rem; }
.svc-note{ font-size:.82rem; color:var(--text-tertiary); border-left:2px solid var(--border-strong); padding-left:1rem; margin:0 0 1.2rem; line-height:1.6; }

/* ══ WHICH SERVICE FITS? ═════════════════════════════════════════════════ */
.fit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.4rem; }
.fit-card{ background:var(--charcoal); border:1px solid var(--border); border-radius:12px; padding:1.5rem 1.3rem; display:flex; flex-direction:column; }
.fit-when{ font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); margin-bottom:.5rem; }
.fit-need{ font-family:var(--editorial); font-size:1.12rem; color:var(--cream); margin:0 0 .9rem; line-height:1.4; }
.fit-arrow{ color:var(--text-tertiary); font-size:.8rem; margin:0 0 .5rem; }
.fit-svc{ margin-top:auto; color:var(--gold); font-size:.9rem; font-family:var(--serif); border-bottom:1px solid transparent; align-self:flex-start; transition:border-color .25s var(--ease-out); }
.fit-svc:hover, .fit-svc:focus-visible{ border-color:var(--gold); }

/* ══ SUPPORTING CAPABILITIES ═════════════════════════════════════════════ */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem 1.6rem; margin-top:2.2rem; }
.cap-item{ display:flex; gap:.7rem; align-items:flex-start; padding:.5rem 0; }
.cap-dot{ flex:0 0 auto; width:7px; height:7px; margin-top:.5rem; border-radius:50%; background:var(--gold); }
.cap-item span.cap-t{ color:var(--text-primary); font-size:.92rem; line-height:1.5; }

/* ══ CLIENT EXPERIENCE CONNECTION (compact) ══════════════════════════════ */
.cxc-layout{ display:grid; grid-template-columns:1fr 1fr; gap:2.2rem; margin-top:2rem; align-items:center; }
.cxc-list{ list-style:none; margin:1rem 0 0; padding:0; }
.cxc-list li{ position:relative; padding:.5rem 0 .5rem 1.6rem; color:var(--text-primary); font-size:.94rem; border-bottom:1px solid var(--border); }
.cxc-list li::before{ content:""; position:absolute; left:0; top:.92rem; width:9px; height:9px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(45deg); }

/* ══ HOW MAVEN WORKS (carried from Home reference) ══════════════════════ */
.how-steps{ list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.how-step{ position:relative; padding:1.5rem 1.4rem; border:1px solid var(--border); border-radius:10px; background:var(--charcoal); text-align:left; display:flex; flex-direction:column; }
.how-num{ display:block; font-family:var(--serif); font-size:1.4rem; color:var(--gold); margin-bottom:.35rem; }
.how-name{ display:block; font-family:var(--serif); font-size:1.02rem; color:var(--cream); letter-spacing:.01em; margin-bottom:.55rem; }
.how-desc{ display:block; font-size:.86rem; color:var(--text-secondary); line-height:1.55; font-weight:400; }
.how-cta{ margin-top:2rem; }

/* ══ FAQ (native <details>/<summary>) ════════════════════════════════════ */

/* Fixed-header offset so in-page anchor jumps (e.g. FAQ → How Maven Works)
   land below the ribbon (26px) + header (76px), not underneath them. */
main section[id], .svc-detail[id]{ scroll-margin-top:118px; }

/* ══ FINAL CTA BAND ══════════════════════════════════════════════════════ */
.cta-band{ background:var(--dark); border-top:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center; }
.cta-band h2{ margin:0 auto .8rem; max-width:720px; }
.cta-band .section-lede{ margin:0 auto 1.8rem; }
.cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ══ CURSOR GLOW + REVEALS (carried from Home reference) ════════════════ */
.cursor-glow{
  position:fixed; top:0; left:0; z-index:5; width:420px; height:420px; margin:-210px 0 0 -210px;
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(200,169,81,.10) 0%, rgba(200,169,81,.05) 32%, rgba(200,169,81,0) 62%);
  transition:opacity .4s var(--ease-out); will-change:transform;
}
body.cursor-glow-on .cursor-glow{ opacity:1; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
html:not(.js-reveal) .reveal{ opacity:1; transform:none; }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .fit-grid{ grid-template-columns:repeat(2,1fr); }
  .cap-grid{ grid-template-columns:repeat(2,1fr); }
  .how-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .svc-detail-cols{ grid-template-columns:1fr; gap:1rem; }
  .cxc-layout{ grid-template-columns:1fr; gap:1.4rem; }
}
@media (max-width:640px){
  .svc-grid{ grid-template-columns:1fr; }
  .fit-grid{ grid-template-columns:1fr; }
  .cap-grid{ grid-template-columns:1fr; }
  .how-steps{ grid-template-columns:1fr; }
  .svc-detail-head{ flex-wrap:wrap; gap:.6rem; }
}
@media (max-width:400px){ .how-steps{ grid-template-columns:1fr; } }

/* ══ REDUCED MOTION (in addition to the shell's global rule) ══════════════ */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .scroll-cue-dot{ animation:none !important; }
  .svc-hero-bg{ transform:none !important; }
  .cursor-glow{ display:none !important; }
}