/* FAQ (design: Paper "FAQ - Desktop" and "FAQ - Mobile"). Loads after styles.css. */

.page--faq{--faq-header:84px;--faq-bar:65px}
/* Once the search bar has taken over from the masthead, sticky parts sit under the bar instead */
.page--faq.faqs-past-hero{--faq-header:74px}

/* 0. Sticky search bar (Paper "Treatment Page - Desktop -- Sticky Bar", as built on Rejuran) */
.faqs-bar{position:fixed;inset:0 0 auto;z-index:45;background:rgba(21,35,89,.97);border-bottom:1px solid rgba(201,180,143,.6);box-shadow:0 14px 34px -14px rgba(5,10,34,.4);color:var(--cream);visibility:hidden;translate:0 -110%;transition:translate .45s var(--ease-out),visibility 0s linear .45s}
.faqs-bar__row{display:flex;align-items:center;gap:28px;height:74px;padding-inline:var(--gutter)}
.faqs-bar__brand{flex:none;font-family:var(--display);font-size:26px;line-height:28px;color:var(--cream);text-decoration:none}
.faqs-bar__search{flex:1 1 380px;max-width:420px;min-width:200px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid rgba(245,240,232,.2);border-radius:6px;background:rgba(245,240,232,.06);transition:border-color .25s var(--ease-ui),background-color .25s var(--ease-ui)}
.faqs-bar__search:focus-within{border-color:rgba(245,240,232,.6);background:rgba(245,240,232,.1);outline:2px solid var(--gold);outline-offset:2px}
.faqs-bar__search svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:round}
.faqs-bar__search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;font-size:15px;line-height:20px;color:var(--cream);outline:none;-webkit-appearance:none;appearance:none}
.faqs-bar__search input::placeholder{color:rgba(245,240,232,.6);opacity:1}
.faqs-bar__search input::-webkit-search-cancel-button{filter:invert(1);cursor:pointer}
.faqs-bar__links{display:flex;align-items:center;gap:24px}
.faqs-bar__links a{display:block;padding:6px 0 4px;border-bottom:2px solid transparent;font-size:14px;font-weight:500;line-height:20px;color:rgba(245,240,232,.7);text-decoration:none;white-space:nowrap;transition:color .3s var(--ease-ui),border-color .3s var(--ease-ui)}
.faqs-bar__links a:hover{color:var(--cream)}
.faqs-bar__links a.is-active{font-weight:600;color:var(--cream);border-bottom-color:var(--gold-light)}
.faqs-bar__links a.is-empty{opacity:.45}
.faqs-bar__actions{flex:none;display:flex;align-items:center;gap:22px;margin-left:auto}
.faqs-bar__call{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;line-height:20px;color:var(--cream);text-decoration:none;white-space:nowrap}
.faqs-bar__call span{border-bottom:1px solid rgba(245,240,232,.4)}
.faqs-bar__call:hover span{border-bottom-color:var(--cream)}
.faqs-bar__call svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.faqs-bar__book.button{min-height:44px;padding:0 20px;font-size:14px;gap:12px}
.faqs-bar__book .button__icon{width:13px;height:13px}
.faqs-bar__progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--gold-light);transform-origin:left;transform:scaleX(var(--progress,0))}
body.faqs-bar-on .faqs-bar{visibility:visible;translate:0 0;transition:translate .45s var(--ease-out),visibility 0s}
/* The masthead steps out of the way while past the hero, and comes back at the top */
.js body.faqs-bar-seen .masthead{transition:opacity .3s var(--ease-ui),translate .45s var(--ease-out),visibility 0s,background-color .4s var(--ease-ui),box-shadow .4s var(--ease-ui)}
.js body.faqs-bar-on .masthead{opacity:0;visibility:hidden;translate:0 -100%;transition:opacity .3s var(--ease-ui),translate .45s var(--ease-out),visibility 0s linear .45s,background-color .4s var(--ease-ui),box-shadow .4s var(--ease-ui)}
/* Narrower desktops: the topic links leave the bar (the sidebar index still shows them), then the number's text */
@media (max-width:1360px){.faqs-bar__links{display:none}}
@media (max-width:1100px){.faqs-bar__call span{display:none}.faqs-bar__call{width:40px;height:40px;border:1px solid rgba(245,240,232,.85);border-radius:50%}}

/* 1. Hero: the clinic's front room on the right, navy shade from the left, fading into the cream below */
.faqs-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:var(--cream)}
.faqs-hero__media{position:absolute;top:0;right:0;bottom:0;width:61.12%;z-index:-2}
.faqs-hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.faqs-hero::before,.faqs-hero::after{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none}
.faqs-hero::before{top:0;height:115.8%;background:
  linear-gradient(90deg,var(--navy) 0,var(--navy) 40%,rgba(21,35,89,.86) 52%,rgba(21,35,89,.5) 66%,rgba(21,35,89,.2) 82%,rgba(21,35,89,.12) 100%),
  linear-gradient(180deg,var(--navy-deep) 0,rgba(15,26,69,.6) 13%,rgba(15,26,69,0) 30%)}
.faqs-hero::after{bottom:0;height:200px;background:linear-gradient(0deg,var(--ground-fade))}
.faqs-hero__inner{display:flex;flex-direction:column;align-items:flex-start;min-height:760px;padding-top:196px;padding-bottom:180px}
.faqs-hero .page-title{margin-top:22px}
.faqs-hero .page-lede{margin-top:22px;line-height:30px}
.faqs-hero .page-lede a{color:inherit;text-decoration:none}
.faqs-hero .page-lede a:hover{color:var(--cream)}

/* Search: filters the questions as you type (faq.js) */
.faqs-search{display:flex;align-items:center;gap:14px;width:min(640px,100%);height:64px;margin-top:88px;padding:0 8px 0 24px;border-radius:6px;background:var(--cream);box-shadow:0 20px 40px -20px rgba(10,18,56,.6)}
.faqs-search:focus-within{outline:2px solid var(--gold);outline-offset:3px}
.faqs-search__icon{flex:none;width:20px;height:20px;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round}
.faqs-search__input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;font-size:17px;line-height:22px;color:var(--navy);outline:none;-webkit-appearance:none;appearance:none}
.faqs-search__input::placeholder{color:var(--muted);opacity:1}
.faqs-search__input::-webkit-search-cancel-button{cursor:pointer}
.faqs-search__button{flex:none;height:48px;padding:0 22px;border:0;border-radius:4px;background:var(--navy);color:var(--cream);font-size:15px;font-weight:600;line-height:20px;transition:background-color .25s var(--ease-ui)}
.faqs-search__button:hover{background:var(--navy-hover)}

/* 2. The questions: sticky index and card on the left, topics on the right */
.faqs-body{background:var(--ground)}
/* Content runs gutter to gutter on every width (site rule): the index keeps 300px, the questions take the rest */
.faqs-body__inner{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);column-gap:clamp(48px,8.34vw,120px);padding:40px var(--gutter) 140px}
.faqs-aside{position:sticky;top:calc(var(--faq-header) + 24px);align-self:start;display:flex;flex-direction:column;gap:28px;padding-top:40px}
.faqs-aside__label{font-family:var(--caps);font-size:13px;letter-spacing:.12em;line-height:16px;text-transform:uppercase;color:#8c7752}

/* Index: the topic in view is filled navy */
.faqs-index{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faqs-index a{display:block;padding:16px 12px;border-bottom:1px solid var(--line);border-radius:0;font-size:16px;line-height:22px;color:var(--navy);text-decoration:none;transition:background-color .3s var(--ease-ui),color .3s var(--ease-ui)}
.faqs-index a:hover{background:rgba(21,35,89,.05)}
.faqs-index a[aria-current]{border-bottom-color:transparent;border-radius:4px;background:var(--navy);color:var(--cream);font-weight:600}
.faqs-index a.is-empty{opacity:.4}

/* "Still unsure?": the arched navy card with the candle sconce. The arch radius is half the card's width (cqw). */
.faqs-unsure-wrap{width:280px;max-width:100%;container-type:inline-size}
.faqs-unsure{position:relative;isolation:isolate;overflow:clip;display:flex;flex-direction:column;align-items:center;gap:14px;padding:80px 26px 28px;border-radius:50cqw 50cqw 8px 8px;background:var(--navy);box-shadow:0 24px 48px -24px rgba(21,35,89,.5);text-align:center;color:var(--cream)}
.faqs-unsure::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.07;background:url(../home/grain-128.webp?v=682ee5aa) 50%/80px 80px repeat}
.faqs-unsure::after{content:"";position:absolute;inset:10px;z-index:-1;border:1px solid rgba(201,180,143,.5);border-radius:calc(50cqw - 10px) calc(50cqw - 10px) 4px 4px;pointer-events:none;
  background:radial-gradient(circle farthest-corner at 50% 25%,rgba(255,206,140,.22) 0,rgba(240,170,100,.1) 32%,rgba(240,170,100,0) 62%) -70px -70px/calc(100% + 140px) 320px no-repeat}
.faqs-unsure__sconce{position:relative;flex:none;width:218px;height:291px;margin-bottom:-6px}
/* A warm glow behind each flame, centred on the wicks */
.faqs-unsure__sconce::before{content:"";position:absolute;left:-30px;right:-30px;top:-90px;height:180px;pointer-events:none;background:radial-gradient(ellipse 22% 30% at 31.8% 50%,rgba(255,196,120,.32),rgba(255,196,120,0) 100%),radial-gradient(ellipse 22% 30% at 69% 50%,rgba(255,196,120,.32),rgba(255,196,120,0) 100%)}
.faqs-unsure__body{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* Flames on the wick tips. sconce.webp is 600x908 (contain): wicks at x 142 and 465, y 26. In a 218x291 box the
   scale is 0.3205 and the image sits 12.85px in, so the wicks are at 58.4 and 161.9: a 30px flame box starts 15px left. */
.faqs-unsure__flame{z-index:2;position:absolute;top:-31px;width:30px;height:52px;object-fit:contain;object-position:50% 100%;transform-origin:50% 92%;animation:flame-flicker 3.8s ease-in-out infinite}
.faqs-unsure__flame--left{left:43.4px}
.faqs-unsure__flame--right{left:146.9px;transform:scaleX(-1);animation-duration:4.9s;animation-delay:-1.9s}
.faqs-unsure__status{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(245,240,232,.1);font-size:12px;font-weight:600;line-height:16px;color:var(--cream)}
.faqs-unsure__status[hidden]{display:none}
.faqs-unsure__dot{flex:none;width:7px;height:7px;border-radius:50%;background:#7fc79a}
.faqs-unsure__status.is-closed .faqs-unsure__dot{background:var(--gold-light)}
.faqs-unsure__title{font-family:var(--display);font-size:32px;line-height:34px;letter-spacing:0;color:var(--cream)}
.faqs-unsure__text{font-size:15px;line-height:23px;color:var(--cream-dim)}
.faqs-unsure__call{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:14px 12px;border-radius:4px;background:var(--cream);font-size:15px;font-weight:600;line-height:20px;color:var(--navy);text-decoration:none;transition:background-color .25s var(--ease-ui)}
.faqs-unsure__call:hover{background:#fff}
.faqs-unsure__call svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.faqs-unsure__book{font-size:14px;font-weight:500;line-height:18px;color:var(--cream);background-image:linear-gradient(rgba(245,240,232,.4),rgba(245,240,232,.4))}

/* Main column */
.faqs-main{display:flex;flex-direction:column;gap:24px;min-width:0;padding-top:40px}
.faqs-toolbar{display:flex;flex-direction:column;gap:6px;padding-bottom:4px;scroll-margin-top:calc(var(--faq-header) + 40px)}
.faqs-toolbar h2{font-family:var(--sans);font-size:32px;font-weight:600;line-height:38px;letter-spacing:-.02em;color:var(--navy)}
.faqs-toolbar__count{font-size:15px;line-height:20px;color:var(--muted)}
.faqs-empty{padding:26px 28px;border:1px solid rgba(21,35,89,.09);border-radius:8px;background:#fbf8f3;font-size:17px;line-height:28px;color:var(--navy)}
.faqs-empty a{font-weight:600}

/* A topic: a pale card holding its questions */
.faqs-group{display:flex;flex-direction:column;gap:20px;padding:26px 28px 6px;border:1px solid rgba(21,35,89,.09);border-radius:8px;background:#fbf8f3;scroll-margin-top:calc(var(--faq-header) + 24px)}
.faqs-group[hidden]{display:none}
.faqs-group__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.faqs-group__head h3{font-family:var(--sans);font-size:26px;font-weight:600;line-height:32px;letter-spacing:-.02em;color:var(--navy)}
.faqs-group__count{padding-bottom:8px;font-size:14px;line-height:18px;color:var(--muted);white-space:nowrap}
.faqs-group__list{border-top:1px solid var(--line)}

/* Questions: the shared accordion (script.js keeps one open at a time), restyled for the cream cards */
.faqs-group .faq-item{border:0}
.faqs-group .faq-item[hidden]{display:none}
.faqs-group .faq-item:not([hidden])~.faq-item:not([hidden]){border-top:1px solid var(--line)}
.faqs-group .faq-item summary{gap:24px;padding:26px 0;font-family:var(--sans);font-size:19px;font-weight:600;line-height:26px;letter-spacing:-.01em;color:var(--navy);transition:padding .34s var(--ease-even)}
.faqs-group .faq-item:first-child summary{color:var(--navy)}
.faqs-group .faq-item[open] summary{padding-bottom:8px}
.faqs-group .faq-item summary:focus-visible{outline-offset:2px;border-radius:4px}
.faqs-toggle{position:relative;flex:none;width:44px;height:44px;border:1px solid rgba(21,35,89,.28);border-radius:50%;color:var(--navy);transition:background-color .3s var(--ease-ui),border-color .3s var(--ease-ui),color .3s var(--ease-ui)}
.faqs-toggle::before,.faqs-toggle::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.4px;margin:-.7px 0 0 -7px;background:currentColor;transition:transform .42s var(--ease-even)}
.faqs-toggle::after{transform:rotate(90deg)}
.faq-item[open]>summary .faqs-toggle{border-color:var(--navy);background:var(--navy);color:var(--cream)}
.faq-item[open]>summary .faqs-toggle::after{transform:rotate(0)}
@media (hover:hover){.faqs-group .faq-item summary:hover .faqs-toggle{border-color:var(--navy)}}

.faqs-answer{display:flex;flex-direction:column;gap:16px;max-width:708px;padding:0 68px 34px 0}
.faqs-group .faq-item .accordion__body p{max-width:none;margin:0;font-size:16px;line-height:26px;color:var(--muted)}
.faqs-group .faq-item .accordion__body .faqs-answer__lead{font-size:17px;line-height:28px;color:var(--navy)}
.faqs-group .faq-item .accordion__body a{color:var(--navy);font-weight:600}
.faqs-group .faq-item .accordion__body p:not(.faqs-answer__cta) a{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;padding-bottom:1px}
.faqs-group .faq-item .accordion__body .faqs-answer__cta{display:flex;padding-top:6px}
.faqs-answer__cta a{display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid var(--navy);font-size:15px;line-height:20px;text-decoration:none}
.faqs-answer__cta svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .35s var(--ease-out)}
.faqs-answer__cta a:hover svg{transform:translateX(3px)}

/* Policies strip */
.faqs-policies{display:flex;flex-wrap:wrap;gap:20px 36px;padding:36px 40px;border-radius:6px;background:#ede6da}
.faqs-policies a{display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid rgba(21,35,89,.3);font-size:15px;font-weight:500;line-height:20px;color:var(--navy);text-decoration:none;transition:border-color .25s}
.faqs-policies a:hover{border-color:var(--navy)}
.faqs-policies svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .35s var(--ease-out)}
.faqs-policies a:hover svg{transform:translateX(3px)}

/* Short screens: tighten the sticky column so the whole card stays in view; very short ones let it scroll */
@media (min-width:901px) and (max-height:1110px){
  .faqs-aside{gap:20px;padding-top:24px}
  .faqs-index a{padding-block:12px}
  .faqs-unsure{padding-top:52px}
  /* The same sconce in a 120x160 box: scale 0.1762, image 7.15px in, wicks at 32.2 and 89.1 */
  .faqs-unsure__sconce{width:120px;height:160px;margin-bottom:-3px}
  .faqs-unsure__sconce::before{left:-16px;right:-16px;top:-50px;height:100px}
  .faqs-unsure__flame{top:-17px;width:16.5px;height:28.6px}
  .faqs-unsure__flame--left{left:23.9px}
  .faqs-unsure__flame--right{left:80.8px}
}
@media (min-width:901px) and (max-height:880px){.faqs-aside{position:static}}

@media (max-width:1180px){
  .faqs-hero__media{width:70%}
}

/* Phones and small tablets: one column. The index turns into a topic bar under the header; the card follows the questions. */
@media (max-width:900px){
  .faqs-hero__media{width:100%}
  .faqs-hero__media img{object-position:70% 40%}
  .faqs-hero::before{height:100%;background:linear-gradient(180deg,rgba(21,35,89,.94) 0,rgba(21,35,89,.7) 30%,rgba(21,35,89,.85) 60%,var(--navy) 78%)}
  .faqs-hero::after{height:120px;background:linear-gradient(0deg,var(--ground),rgba(245,240,232,0))}
  .faqs-hero__inner{min-height:520px;padding-top:124px;padding-bottom:142px}
  .faqs-hero .crumbs{font-size:12px;letter-spacing:.12em}
  .faqs-hero .page-title{margin-top:18px;font-size:50px;line-height:50px}
  .faqs-hero .page-lede{margin-top:18px;line-height:26px}
  .faqs-hero__lede-more{display:none}
  .faqs-search{height:56px;margin-top:18px;width:100%;max-width:560px;gap:12px;padding:0 16px 0 18px;box-shadow:0 16px 32px -16px rgba(10,18,56,.6)}
  .faqs-search__icon{width:18px;height:18px}
  .faqs-search__input{font-size:16px;line-height:20px}
  .faqs-search__button{display:none}

  .faqs-body__inner{display:flex;flex-direction:column;gap:16px;padding:0 0 80px}
  .faqs-aside,.faqs-main{display:contents}
  .faqs-aside__label{display:none}
  .faqs-index{order:1;position:sticky;top:var(--faq-header);z-index:5;flex-direction:row;gap:8px;margin-bottom:32px;padding:14px var(--gutter);border-top:0;border-bottom:1px solid var(--line);background:var(--ground);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-inline:var(--gutter)}
  .faqs-index::-webkit-scrollbar{display:none}
  .faqs-index a{position:relative;flex:none;padding:8px 15px;border:1px solid rgba(21,35,89,.3);border-radius:999px;font-size:14px;line-height:18px;white-space:nowrap}
  .faqs-index a::after{content:"";position:absolute;inset:-4px 0}
  .faqs-index a[aria-current]{padding:9px 16px;border:0;border-radius:999px}
  .faqs-index a:hover{background:transparent}
  .faqs-index a[aria-current]:hover{background:var(--navy)}
  .faqs-toolbar{order:2}
  .faqs-empty{order:3}
  .faqs-group{order:4}
  .faqs-unsure-wrap{order:5}
  .faqs-policies{order:6}
  .faqs-toolbar,.faqs-empty,.faqs-group,.faqs-unsure-wrap,.faqs-policies{margin-inline:var(--gutter)}

  .faqs-toolbar{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:0}
  .faqs-toolbar h2{font-size:22px;line-height:28px}
  .faqs-toolbar__count{font-size:13px;line-height:18px}
  .faqs-toolbar__more{display:none}
  .faqs-empty{padding:20px 18px;font-size:16px;line-height:26px}

  .faqs-group{gap:14px;padding:20px 18px 4px;scroll-margin-top:calc(var(--faq-header) + var(--faq-bar) + 16px)}
  .faqs-group__head h3{font-size:21px;line-height:27px}
  .faqs-group__count{display:none}
  .faqs-group .faq-item summary{gap:16px;padding:20px 0;font-size:16px;line-height:22px}
  .faqs-group .faq-item[open] summary{padding-top:22px;padding-bottom:14px}
  .faqs-toggle{width:38px;height:38px}
  .faqs-toggle::before,.faqs-toggle::after{width:12px;height:1.5px;margin:-.75px 0 0 -6px}
  .faqs-answer{gap:14px;padding:0 0 26px}
  .faqs-group .faq-item .accordion__body p{font-size:15px;line-height:24px}
  .faqs-group .faq-item .accordion__body .faqs-answer__lead{font-size:16px;line-height:26px}
  .faqs-group .faq-item .accordion__body .faqs-answer__cta{padding-top:4px}

  .faqs-unsure-wrap{align-self:center;width:min(440px,calc(100% - 2 * var(--gutter)));max-width:none;margin:8px 0 0}
  .faqs-unsure{padding:80px 40px 28px}
  .faqs-policies{gap:16px 28px;padding:28px 24px}
  .faqs-policies svg{display:none}
  .faqs-toolbar{scroll-margin-top:calc(var(--faq-header) + var(--faq-bar) + 24px)}
  /* Phones: a compact bar (crest, search, call); the topic chips stick right under it */
  .page--faq.faqs-past-hero{--faq-header:62px}
  .faqs-bar__row{gap:12px;height:62px}
  .faqs-bar__brand,.faqs-bar__book{display:none}
  .faqs-bar__search{flex:1 1 auto;max-width:none;min-width:0;height:40px;padding:0 12px}
  .faqs-bar__search input{font-size:16px}
  .faqs-bar__actions{margin-left:0}
}
@media (max-width:720px){
  .page--faq{--faq-header:68px}
}

@media (prefers-reduced-motion:reduce){
  .faqs-unsure__flame{animation:none}
  .faqs-bar,body.faqs-bar-on .faqs-bar{translate:0 0;opacity:0;transition:opacity .2s linear,visibility 0s linear .2s}
  body.faqs-bar-on .faqs-bar{opacity:1;transition:opacity .2s linear,visibility 0s}
  .js body.faqs-bar-on .masthead{translate:none}
  .faqs-group .faq-item summary,.faqs-toggle,.faqs-toggle::before,.faqs-toggle::after{transition:none}
}