/* ==========================================================
   New Patient Guide & FAQs
   Builds on site.css (tokens, .visit/.steps, .qa, .final, .on-navy)
   ========================================================== */

/* ---------- intro ---------- */
.npg-intro{padding-block:var(--sec) calc(var(--sec)*.6);display:grid;gap:28px clamp(32px,6vw,96px);align-items:start}
.npg-lead{font-size:clamp(28px,3.4vw,52px);line-height:1.12;max-width:980px}
.npg-lead em{color:var(--gold-tx)}
.npg-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin-top:clamp(12px,2vw,28px)}
.npg-index li+li{border-left:1px solid var(--line)}
.npg-index a{display:flex;align-items:center;gap:14px;min-height:64px;padding:18px 18px 18px 0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:color .4s var(--ease)}
.npg-index li+li a{padding-left:20px}
.npg-index a span{flex:1}
.npg-index a svg{width:13px;height:13px;flex:none;transform:rotate(90deg);transition:transform .5s var(--ease-out)}
.npg-index a:hover{color:var(--gold-sm)}
.npg-index a:hover svg{transform:rotate(90deg) translateX(4px)}

/* ---------- first visit journey (reuses .visit / .steps / .step) ---------- */
.npg-visit{padding-top:calc(var(--sec)*.5)}
/* heading with its text directly under it (the side by side head stays on the homepage only) */
.npg-visit .visit-head{grid-template-columns:1fr;align-items:start;gap:16px}
.npg-visit .visit-head p{justify-self:start;max-width:560px}
.npg-steps .step .ph{aspect-ratio:4/5}
@media (min-width:1025px){.npg-steps{grid-template-columns:repeat(4,1fr)}.npg-steps .step:nth-child(even){margin-top:clamp(28px,4vw,64px)}}
@media (min-width:769px) and (max-width:1024px){.npg-steps{grid-template-columns:repeat(2,1fr);row-gap:44px}}

/* ---------- prepare + aftercare (navy) ---------- */
.npg-care{padding:var(--sec) 0;overflow:hidden}
.care-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(32px,6vw,96px);align-items:start}
.care-img{margin:0;aspect-ratio:.78;overflow:hidden;position:sticky;top:96px}
.care-img img{width:100%;height:118%;object-fit:cover;will-change:transform;filter:saturate(.9)}
.care-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px)}
.care-col h2{margin-top:0;font-size:clamp(32px,3.6vw,56px);line-height:1.04}
.care-col h2 em{color:var(--gold)}
.care-list{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--line)}
.care-list li{padding:22px 0;border-bottom:1px solid var(--line)}
.care-list b{display:block;font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.care-list span{display:block;margin-top:10px;color:var(--mute);font-size:14px;line-height:1.6}
.care-tags{display:flex!important;flex-wrap:wrap;gap:8px}
.care-tags i{font-style:normal;font-size:12.5px;color:#fff;padding:7px 13px;border:1px solid var(--line);border-radius:999px}
.care-note{margin-top:28px;padding:20px 22px;border-left:1px solid var(--gold);background:rgba(255,255,255,.04);color:rgba(255,255,255,.82);font-size:14px;line-height:1.6}
.care-note .micro{display:block;color:var(--gold);margin-bottom:8px}

/* ---------- FAQ ---------- */
.npg-faq{padding-block:var(--sec)}
.npg-faq-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(32px,6vw,96px);align-items:start}
.npg-side{position:sticky;top:96px}
.npg-side h2{font-size:clamp(34px,4.6vw,72px);line-height:1.02;margin-top:0}
.npg-side h2 em{color:var(--gold-tx)}
.fg-nav{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--line);max-width:380px}
.fg-nav a{display:flex;align-items:center;gap:14px;min-height:50px;border-bottom:1px solid var(--line);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--mute);transition:color .4s var(--ease)}
.fg-nav a span{flex:1}
.fg-nav a:hover,.fg-nav a.on{color:var(--ink)}
.fg-nav a.on span{background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.side-img{margin:clamp(28px,3vw,44px) 0 0;max-width:380px;aspect-ratio:1.25;overflow:hidden}
.side-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media (max-height:820px) and (min-width:1025px){.side-img{display:none}}

.faq-group+.faq-group{margin-top:clamp(48px,5vw,80px)}
.faq-group{scroll-margin-top:90px}
.fg-head{display:block;padding-bottom:18px}
.fg-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,36px);line-height:1.1;letter-spacing:-.01em}

/* question rows: serif, sentence case */
.npg-faq .qa{scroll-margin-top:90px}
.npg-faq .qa button{justify-content:flex-start;gap:clamp(14px,2vw,26px);padding:22px 0;min-height:64px;font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.55vw,22px);line-height:1.3;letter-spacing:0;text-transform:none;transition:color .4s var(--ease)}
/* hover colours only where hover exists, so they do not stick after a tap */
@media (hover:hover){.npg-faq .qa button:hover{color:var(--gold-sm)}}
.npg-faq .qa .qt{flex:1}
.npg-faq .qa .pm{color:var(--ink)}
.npg-faq .qa-body>div{padding-left:0}
.npg-faq .qa-body p{padding:0 60px 14px 0;max-width:660px}
.npg-faq .qa-body>div>:last-child{margin-bottom:28px}
.npg-faq .qa-body p:last-child{padding-bottom:0}

/* method and stage lists */
.qa-list{margin:6px 60px 22px 0;padding:0;max-width:660px;list-style:none;border-top:1px solid var(--line)}
.qa-list>div,.qa-list>li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.qa-list dt,.qa-list b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;line-height:1.3;color:var(--ink)}
.qa-list dd,.qa-list li span{margin:0;color:var(--mute);font-size:14.5px;line-height:1.6}
.qa-stages{counter-reset:st}
.qa-stages li b{counter-increment:st}
.qa-stages li b::before{content:counter(st,upper-roman) ".";display:inline-block;min-width:30px;font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.12em;color:var(--gold-sm);vertical-align:.2em}

/* educational outbound links */
.qa-links{display:flex;flex-direction:column;gap:4px;margin:6px 60px 0 0;max-width:660px}
.out{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.35;color:var(--ink)}
.out span:first-child{background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .5s var(--ease-out),color .4s var(--ease)}
.out svg{width:14px;height:14px;flex:none;color:var(--gold-tx);transition:transform .5s var(--ease-out)}
@media (hover:hover){
  .out:hover span:first-child{color:var(--gold-sm)}
  .out:hover svg{transform:translate(2px,-2px)}
}

/* get started links inside the last answer */
.qa-cta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:6px}
.qa-cta a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--line);transition:border-color .4s var(--ease),gap .5s var(--ease-out)}
.qa-cta a svg{width:12px;height:12px}
@media (hover:hover){.qa-cta a:hover{border-color:var(--gold);gap:16px}}

/* ---------- still have questions ---------- */
.npg-ask-wrap{padding-bottom:var(--sec)}
.npg-ask{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(18px,2vw,26px);border:1px solid var(--line)}
.ask-img{aspect-ratio:1;overflow:hidden;background:var(--soft)}
.ask-img img{width:100%;height:100%;object-fit:cover}
.ask-copy h2{font-size:clamp(26px,2.6vw,40px);line-height:1.08}
.ask-copy h2 em{color:var(--gold-tx)}
.ask-copy p{margin-top:8px;color:var(--mute);font-size:14px}
.ask-act{display:flex;align-items:center;gap:24px}
.ask-tel{display:inline-flex;align-items:center;min-height:44px;font-family:var(--serif);font-size:19px;white-space:nowrap;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1px no-repeat;transition:background-size .5s var(--ease-out)}
.ask-tel:hover{background-size:100% 1px}

/* ---------- final CTA: two buttons ---------- */
.npg-final .final-frame::after{background:rgba(20,22,28,.5)}
.npg-final p{max-width:520px}
.final-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .care-grid{grid-template-columns:1fr}
  .care-img{position:relative;top:auto;aspect-ratio:16/10}
  .npg-faq-grid{grid-template-columns:1fr}
  .npg-side{position:relative;top:auto}
  .side-img{display:none}
  .fg-nav{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
}
@media (max-width:768px){
  .npg-intro{padding-bottom:calc(var(--sec)*.4)}
  .npg-lead{font-size:clamp(26px,7.2vw,34px)}
  .npg-index{grid-template-columns:1fr}
  .npg-index li+li{border-left:0;border-top:1px solid var(--line)}
  .npg-index li+li a{padding-left:0}
  .npg-index a{font-size:13px;letter-spacing:.1em;min-height:56px;padding:12px 0}
  .npg-steps .step .ph{aspect-ratio:4/5}
  .care-img{aspect-ratio:4/3}
  .care-cols{grid-template-columns:1fr;gap:56px}
  .care-list b{font-size:13px}
  .fg-nav{grid-template-columns:1fr}
  .fg-nav a{font-size:12.5px;min-height:52px}
  .npg-faq .qa button{font-size:18px;padding:18px 0;gap:14px}
  .npg-faq .qa-body p,.qa-list,.qa-links{padding-right:0;margin-right:0}
  .qa-list>div,.qa-list>li{grid-template-columns:1fr;gap:6px}
  .npg-ask{grid-template-columns:72px minmax(0,1fr);gap:16px 18px}
  .ask-act{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:6px}
  .ask-act .btn{justify-content:space-between}
  .ask-tel{justify-content:center}
  .final-btns{flex-direction:column;align-items:stretch;width:100%;max-width:420px;margin:0 auto}
  .final-btns .btn{justify-content:space-between;white-space:normal;text-align:left;padding-top:8px;padding-bottom:8px;letter-spacing:.04em}
  /* long labels wrap into two even lines; the arrow keeps its round shape */
  .final-btns .btn .roll{height:auto;line-height:1.3;text-wrap:balance}
  .final-btns .btn .ic{flex:none}
  .final-btns .btn .roll span::after{display:none}
  .final-btns .btn:hover .roll span{transform:none}
  .npg-final .final-frame{min-height:620px}
}

/* lists that use <ol>: no browser markers */
.npg-index,.fg-nav{list-style:none;padding-left:0;margin-bottom:0}
/* hero: deepen the left side so copy reads over the bright blinds */
.page-hero .ph-frame::after{background:linear-gradient(90deg,rgba(20,22,28,.62) 0%,rgba(20,22,28,.34) 45%,rgba(20,22,28,.08) 75%),linear-gradient(180deg,rgba(20,22,28,.12) 0%,rgba(20,22,28,.1) 40%,rgba(20,22,28,.6) 100%)}