/* Know The Process: the unfolded map. The original brand remains the
   authority; this layer gives its actual six-stage guide the first screen. */
:root{ --experience-ease:cubic-bezier(.16,1,.3,1); --map-paper:#FCF8EF }
body{ background:var(--paper); -webkit-font-smoothing:antialiased }
header{ background:var(--map-paper)!important; backdrop-filter:none; -webkit-backdrop-filter:none }
header .nav{ height:72px }
header .mobile-nav{ margin-left:auto; min-width:0; max-width:calc(100% - 220px) }
.mobile-nav > summary{ display:none }
header .mobile-nav .nav-links{ max-width:100%; flex-basis:auto }
.a11ybar{ background:var(--paper)!important; backdrop-filter:none; -webkit-backdrop-filter:none }
.a11ybar-in{ min-height:52px; padding:6px 20px; position:relative }
.reading-settings{ position:relative; margin-right:auto }
.reading-settings > summary{ display:flex; align-items:center; gap:8px; min-height:44px;
  color:var(--green-deep); font-weight:600; font-size:.84rem; cursor:pointer; list-style:none }
.reading-settings > summary::-webkit-details-marker{ display:none }
.reading-settings > summary svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; flex-shrink:0 }
.reading-settings .reading-panel{ position:absolute; top:calc(100% + 8px); left:0; z-index:60;
  width:min(340px,calc(100vw - 40px)); padding:20px; border:1px solid var(--line);
  border-radius:16px; background:var(--map-paper); box-shadow:0 12px 32px rgba(15,74,53,.12) }
.reading-panel .listen{ width:100%; justify-content:center; margin-bottom:16px!important }
.reading-panel .a11y{ justify-content:space-between }
.langtog{ min-height:38px; padding:0 12px; font-size:.84rem; border-color:var(--line); background:transparent }
#view-home{ padding:0 0 64px }
#view-home > .wrap{ max-width:1240px; padding-inline:32px }
#view-home .hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:48px; padding:64px 0 48px!important }
#view-home .hero > .hero-copy{ grid-column:1; min-width:0 }
#view-home .hero > .hero-map{ grid-column:2; min-width:0 }
#view-home .hero h1{ font-size:clamp(2.65rem,5vw,4.3rem); line-height:1.04;
  font-weight:700; letter-spacing:-.035em; max-width:14ch; text-wrap:balance; color:var(--green-deep) }
.hero-intro{ margin-top:24px; max-width:30ch; font-size:1.15rem; line-height:1.5; color:var(--ink-soft) }
.hero-actions{ margin-top:28px; gap:14px }
.hero-actions .btn{ background:var(--green-deep); border-radius:12px; padding:14px 22px; font-size:.95rem; box-shadow:none }
.hero-contact{ font-size:.9rem; font-weight:500 }
.hero-explainer{ margin-top:22px; max-width:58ch }
.hero-explainer summary{ min-height:44px; display:flex; align-items:center; gap:8px;
  font-weight:600; font-size:.84rem; color:var(--ink-soft); cursor:pointer; text-decoration:underline; text-underline-offset:4px }
#view-home .hero-explainer .lead{ font-size:.95rem; line-height:1.7; margin:10px 0 0; max-width:none }
.hero-promise{ margin-top:18px; max-width:38ch; color:var(--ink-soft); font-size:.76rem; line-height:1.6 }
.hero-map{ background:var(--green-deep); color:var(--map-paper); padding:32px 24px 22px;
  border-radius:24px; position:relative }
.map-heading{ padding-inline:12px }
.map-heading h2{ font-family:'Poppins',sans-serif; font-size:1.45rem; font-weight:600; line-height:1.25; max-width:20ch; letter-spacing:-.02em }
.map-heading p{ color:#D1E3D8; margin-top:8px; font-size:.85rem }
.hero-map .journey{ margin:28px 0 0; padding:0; overflow:visible; width:100% }
.hero-map .journey::after{ display:none }
.hero-map .jrail{ display:none }
.journey-route{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible }
.journey-route path{ fill:none; stroke-width:2; vector-effect:non-scaling-stroke; stroke-linecap:round }
.route-base{ stroke:#4C7A62; stroke-dasharray:3 8 }
.route-progress{ stroke:var(--gold); transition:stroke-dashoffset .55s var(--experience-ease) }
.hero-map .jnodes{ min-width:0; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(148px,auto)); gap:0; position:relative }
.hero-map .jnode{ padding:6px 4px 12px; gap:12px; min-width:0; color:#D1E3D8; scroll-snap-align:none }
.hero-map .jnode:nth-child(4){ grid-column:3; grid-row:2 }
.hero-map .jnode:nth-child(5){ grid-column:2; grid-row:2 }
.hero-map .jnode:nth-child(6){ grid-column:1; grid-row:2 }
.hero-map .jdot{ width:52px; height:52px; border:1px solid #739982; background:var(--green-deep);
  box-shadow:none; color:var(--map-paper); font-size:.95rem; transform:none;
  transition:background .25s,color .25s,transform .25s var(--experience-ease),border-color .25s }
.hero-map .jlab{ color:#D1E3D8; font-size:.8rem; font-weight:500; max-width:12ch; line-height:1.35; overflow-wrap:normal }
.hero-map .jnode.done .jdot{ border-color:var(--gold); background:var(--green-deep); color:var(--map-paper) }
.hero-map .jnode.done .jdot::after,.hero-map .jnode.on .jdot::before{ display:none }
.hero-map .jnode.on .jdot{ background:var(--gold-tint); border-color:var(--gold-tint); color:var(--green-deep); transform:scale(1.12); box-shadow:none }
.hero-map .jnode.on .jlab{ color:var(--map-paper); font-weight:700 }
.hero-map .jnode:hover .jdot{ transform:translateY(-2px); background:#255F45; border-color:var(--map-paper); box-shadow:none }
.hero-map .jnode.on:hover .jdot{ background:var(--gold-tint); transform:scale(1.12) }
.hero-map .jnode:focus-visible{ outline:3px solid var(--gold-tint); outline-offset:3px; border-radius:8px }
.map-preview{ border-top:1px solid #4C7A62; padding:18px 12px 0 }
#map-stage-preview{ color:var(--map-paper); font-size:.9rem; line-height:1.45; min-height:2.9em; font-weight:600 }
.map-explore{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:48px; margin-top:10px; color:var(--green-deep); background:var(--map-paper);
  padding:11px 14px; border-radius:10px; font-size:.88rem; font-weight:700; text-decoration:none }
.map-explore:hover{ background:var(--gold-tint); text-decoration:none }
.map-explore svg{ width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
#view-home .proof{ margin:0 0 48px; padding:22px 0; background:none; border:0; border-block:1px solid var(--line); border-radius:0; box-shadow:none; backdrop-filter:none; gap:16px 32px }
.proof-ico{ display:none }
.proof-item{ font-size:.83rem; color:var(--ink-soft); font-weight:500 }
#view-home .stage-box{ padding:0; margin:0 0 80px; border:0!important; border-radius:0!important; box-shadow:none!important; background:none!important }
.stage-section-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:1px solid var(--line) }
#view-home .stage-section-head h2{ font-size:1.75rem; letter-spacing:-.025em; line-height:1.2; margin:0 }
.stage-switch{ font-size:.85rem; font-weight:600; text-decoration:underline; text-underline-offset:4px; min-height:44px; display:flex; align-items:center; flex-shrink:0 }
#view-home .stage-detail{ padding-top:0!important; margin-top:28px!important }
.jpanel-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:56px }
.jpanel-in > .jwhere,.jpanel-in > h3,.jpanel-in > p,.jpanel-in > .chips{ grid-column:1 }
.jpanel-in > .opts{ grid-column:2; grid-row:1 / span 4; padding:0; margin:0; border-top:0 }
.jpanel-in > .stage-cta{ grid-column:1 / -1; margin-top:28px; display:flex; gap:12px; flex-wrap:wrap }
.stage-cta .btn{ margin-left:0!important; font-size:.95rem; padding:14px 22px; min-height:48px; box-shadow:none }
.jpanel-in > .jnav{ grid-column:1 / -1; margin-top:16px }
.jwhere{ background:none; box-shadow:none; padding:0; border:0; font-size:.72rem; margin-bottom:18px }
.jwhere .pip{ animation:none }
.jpanel-in h3{ font-size:1.5rem; line-height:1.3; letter-spacing:-.02em; max-width:28ch }
.jpanel-in p{ margin-top:14px; font-size:1rem; line-height:1.7 }
.jpanel-in .opts li{ padding:0 0 20px 28px; margin:0; font-size:.95rem; line-height:1.65 }
.jpanel-in .opts li:last-child{ padding-bottom:0 }
.jstep-btn{ box-shadow:none; background:transparent; border-color:var(--line) }
#view-home .tools{ display:block; margin:0 0 80px!important; border-top:1px solid var(--line); padding-top:40px }
.tool-section-head{ margin-bottom:28px }
.tool-section-head h2{ font-family:'Poppins',sans-serif; font-size:2rem; letter-spacing:-.03em; line-height:1.2; max-width:22ch }
.tool-section-head p{ color:var(--ink-soft); margin-top:14px }
#view-home details.tool{ padding:0; margin:0; background:transparent!important; border:0!important;
  border-radius:0!important; box-shadow:none!important; border-bottom:1px solid var(--line)!important; transform:none!important }
details.tool > summary{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 0; cursor:pointer; list-style:none; min-height:76px }
details.tool > summary::-webkit-details-marker{ display:none }
details.tool summary h3{ font-size:1.15rem; line-height:1.4; margin:0; max-width:40ch; color:var(--ink) }
details.tool[open] summary h3{ color:var(--green-deep) }
.tool-toggle{ width:28px; height:28px; flex-shrink:0; fill:none; stroke:var(--green); stroke-width:1.7; stroke-linecap:round }
.toggle-stem{ transform-origin:center; transition:transform .25s var(--experience-ease) }
details.tool[open] .toggle-stem{ transform:scaleY(0) }
.tool-body{ padding:0 48px 28px 0; max-width:70ch }
details.tool .tool-body p{ font-size:1rem; color:var(--ink-soft); line-height:1.7; margin:0 }
details.tool .go{ display:inline-flex; align-items:center; margin-top:18px; font-size:.95rem; min-height:44px; color:var(--green-deep); text-decoration:underline; text-underline-offset:4px }
#view-home .honest{ padding:48px; border-radius:20px!important; box-shadow:none!important; margin-bottom:64px }
#view-home .honest .hero-media{ float:right; width:220px; max-width:36%; margin:0 0 24px 36px; grid-row:auto; grid-column:auto }
#view-home .honest .loop-vid{ border:0; border-radius:12px; box-shadow:none }
#view-home .honest h2{ font-size:2rem; letter-spacing:-.03em }
#view-home .honest p{ font-size:.96rem; line-height:1.8; max-width:70ch }
#view-home .cost{ border:0!important; background:transparent!important; box-shadow:none!important; padding:0 0 48px; border-radius:0!important; margin-bottom:32px }
.verify,.situations{ box-shadow:none!important }
#view-home .verify{ border-radius:20px; border-left:0; padding:40px; background:var(--gold-tint) }
.rv,.rv.in{ opacity:1; transform:none; transition:none }
.hero-media.reveal,.hero-media.reveal.in{ opacity:1; transform:none; transition:none }
@media(max-width:1000px){
  header .nav,header.condensed .nav{ height:68px; min-height:68px; flex-wrap:nowrap; padding-block:0 }
  header .mobile-nav{ max-width:none; margin-left:auto; position:static }
  .mobile-nav > summary{ display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
    min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; font-size:.78rem; font-weight:600; color:var(--green-deep) }
  .mobile-nav > summary::-webkit-details-marker{ display:none }
  .mobile-nav > summary svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.7; fill:none; flex-shrink:0 }
  header .mobile-nav .nav-links{ position:absolute; top:100%; left:0; right:0; z-index:55;
    display:flex; flex-direction:column; align-items:stretch; gap:6px; max-width:none; width:auto;
    padding:16px 24px 24px; border-block:1px solid var(--line); background:var(--map-paper);
    max-height:calc(100dvh - 90px); overflow-y:auto; box-shadow:0 16px 24px rgba(15,74,53,.08) }
  header .mobile-nav .nav-links a{ padding:12px; font-size:.95rem!important; white-space:normal; min-height:48px }
  header .mobile-nav .nav-guide{ display:block!important }
  header .mobile-nav .nav-links button{ min-height:48px; margin-top:4px; text-align:center }
  #view-home .hero{ gap:32px }
  #view-home .hero h1{ font-size:3rem }
  .hero-map{ padding:28px 16px 20px }
  .jpanel-in{ column-gap:32px }
}
@media(max-width:390px){ .mobile-nav > summary{ padding:8px; font-size:.72rem; gap:6px } }
@media(max-width:800px){
  #view-home > .wrap{ padding-inline:24px }
  #view-home .hero{ grid-template-columns:minmax(0,1fr); gap:24px; padding:40px 0 32px!important }
  #view-home .hero-copy{ display:contents }
  #view-home .hero > .hero-map{ grid-column:1; grid-row:3; margin-inline:-24px; border-radius:0; padding:28px 24px 20px }
  #view-home .hero h1{ grid-row:1; font-size:clamp(2.4rem,9.7vw,3.3rem); max-width:15ch; line-height:1.06; margin:0 }
  .hero-intro{ grid-row:2; margin:0; font-size:1.05rem; max-width:30ch }
  .hero-actions{ grid-row:4; margin:0; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px 20px }
  .hero-actions .btn{ font-size:.88rem; padding:12px 18px; min-height:48px }
  .hero-contact{ min-height:44px; display:flex; align-items:center; max-width:32ch }
  .hero-explainer{ grid-row:5; margin:0 }
  .hero-promise{ grid-row:6; margin:0; max-width:none }
  .map-heading{ padding-inline:0 }
  .map-heading h2{ font-size:1.35rem; max-width:none }
  .hero-map .journey{ margin-top:24px }
  .map-preview{ padding-inline:0 }
  #map-stage-preview{ min-height:0 }
  #view-home .proof{ margin-bottom:40px; padding:20px 0; flex-direction:column; align-items:flex-start; gap:10px }
  #view-home .stage-box{ margin-bottom:56px }
  #view-home .stage-section-head h2{ font-size:1.5rem; max-width:16ch }
  .stage-section-head{ gap:12px }
  .jpanel-in{ display:block }
  .jpanel-in h3{ font-size:1.4rem }
  .jpanel-in .opts{ padding-top:24px; margin-top:24px; border-top:1px solid var(--line) }
  .jpanel-in .stage-cta{ display:flex; gap:12px; margin-top:24px }
  .stage-cta .btn{ flex:1 1 180px; text-align:center }
  .jpanel-in .jnav{ flex-direction:column; align-items:stretch; gap:8px }
  .jstep-btn{ text-align:left; padding:12px 16px; white-space:normal }
  #view-home .tools{ margin-bottom:56px!important; padding-top:32px }
  .tool-section-head h2{ font-size:1.75rem }
  details.tool > summary{ padding:22px 0; gap:18px }
  details.tool summary h3{ font-size:1.06rem }
  .tool-body{ padding-right:0 }
  #view-home .honest{ padding:28px 24px; margin-inline:-24px; border-radius:0!important; margin-bottom:48px }
  #view-home .honest .hero-media{ float:none; width:160px; max-width:100%; margin:0 0 24px }
  #view-home .honest h2{ font-size:1.75rem }
  #view-home .verify{ padding:28px 24px; border-radius:16px }
  .a11ybar-in{ justify-content:space-between; flex-wrap:nowrap; gap:16px }
  .langtog{ flex:0 1 auto }
}
@media(prefers-reduced-motion:reduce){
  .route-progress,.hero-map .jdot,.toggle-stem{ transition:none }
}