/* Usluga detail — FAQ.
   Cream band that flows out of methodology's bottom wave (cream-tinted
   wave → cream FAQ). Centered eyebrow/h2/intro, then a stack of
   numbered question cards with chevron toggle + a teal accent bar that
   lights up when open. Bottom mint-strip CTA mirrors the conditions
   section's strip pattern so the page rhythm rhymes back. */

.svc-detail-faq{
  background:var(--cream);
  padding:88px 0 100px;
  position:relative;
  overflow:hidden;
}

/* Two decorative orbs in opposite corners. */
.svc-detail-faq::before{
  content:"";
  position:absolute;
  top:-180px;left:-160px;
  width:480px;height:480px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(94,155,148,.12), transparent 70%);
  pointer-events:none;
}
.svc-detail-faq::after{
  content:"";
  position:absolute;
  bottom:-200px;right:-180px;
  width:520px;height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(207,226,221,.5), transparent 70%);
  pointer-events:none;
}

.svc-detail-faq .wrap{
  position:relative;
  z-index:1;
  max-width:960px;
}

/* --- Centered section head --- */
.svc-faq-head{
  max-width:680px;
  margin:0 auto 44px;
  text-align:center;
}
.svc-faq-head .eyebrow{justify-content:center}
.svc-faq-head h2{
  font-family:"Fraunces",serif;
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight:300;
  color:var(--pine);
  letter-spacing:-.015em;
  margin:16px 0 12px;
  line-height:1.1;
}
.svc-faq-head h2 em{color:var(--teal);font-weight:400;font-style:normal}
.svc-faq-head p{
  color:var(--muted);
  font-size:1.02rem;
  margin:0 auto;
  max-width:56ch;
  line-height:1.6;
}

/* --- Accordion list --- */
.svc-faq-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* --- Accordion item card --- */
.svc-faq-item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  position:relative;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.svc-faq-item:hover{
  border-color:var(--mint);
}
.svc-faq-item[open]{
  border-color:var(--mint);
  box-shadow:0 18px 40px -28px rgba(10,42,39,.22);
}

/* Teal accent bar on the left edge — lights up when active. */
.svc-faq-item::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--teal);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s ease;
}
.svc-faq-item[open]::before{
  transform:scaleY(1);
}

/* Summary row (the question) — Fraunces number + question + chevron toggle */
.svc-faq-item summary{
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px 26px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.svc-faq-item summary::-webkit-details-marker{display:none}
.svc-faq-item summary::marker{display:none}

.svc-faq-num{
  font-family:"Fraunces",serif;
  font-size:1.05rem;
  font-weight:400;
  color:var(--sage);
  letter-spacing:.02em;
  flex:none;
  width:30px;
  transition:color .25s ease;
}
.svc-faq-item[open] .svc-faq-num{color:var(--teal)}

.svc-faq-q{
  flex:1;
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:600;
  color:var(--pine);
  font-size:1.02rem;
  line-height:1.4;
  letter-spacing:-.005em;
}

.svc-faq-toggle{
  flex:none;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--mint-50);
  color:var(--teal);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .3s ease, color .3s ease;
}
.svc-faq-toggle svg{
  width:16px;height:16px;
  transition:transform .35s ease;
}
.svc-faq-item[open] .svc-faq-toggle{
  background:var(--teal);
  color:#fff;
}
.svc-faq-item[open] .svc-faq-toggle svg{
  transform:rotate(180deg);
}

/* Answer — indented to align with the question text (skip the number column). */
.svc-faq-a{
  padding:0 26px 24px 74px;
  color:var(--ink-soft);
  font-size:.96rem;
  line-height:1.7;
}

/* --- Bottom CTA strip (mirrors conditions section's strip pattern) --- */
.svc-faq-cta{
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--mint-50);
  border:1px solid var(--mint);
  border-radius:16px;
  padding:18px 24px;
  margin-top:28px;
}
.svc-faq-cta-ic{
  width:44px;height:44px;
  border-radius:12px;
  background:var(--pine);
  color:#fff;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.svc-faq-cta-ic svg{width:20px;height:20px}
.svc-faq-cta-text{flex:1}
.svc-faq-cta-text b{
  display:block;
  font-family:"Fraunces",serif;
  font-size:1.08rem;
  font-weight:500;
  color:var(--pine);
  margin-bottom:2px;
  letter-spacing:-.005em;
  line-height:1.25;
}
.svc-faq-cta-text span{
  display:block;
  font-size:.88rem;
  color:var(--ink-soft);
  line-height:1.5;
}
.svc-faq-cta-call{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:100px;
  padding:10px 18px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.84rem;
  font-weight:700;
  color:var(--teal);
  box-shadow:0 4px 16px -9px rgba(10,42,39,.34);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
  text-decoration:none;
}
.svc-faq-cta-call:hover{
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
}
.svc-faq-cta-call svg{width:16px;height:16px}

/* --- Responsive --- */
@media(max-width:768px){
  .svc-detail-faq{padding:72px 0 86px}
  .svc-faq-head{margin-bottom:36px}
  .svc-faq-item summary{padding:18px 22px;gap:14px}
  .svc-faq-num{width:28px;font-size:1rem}
  .svc-faq-q{font-size:.96rem}
  .svc-faq-toggle{width:32px;height:32px}
  .svc-faq-a{padding:0 22px 22px 64px;font-size:.93rem}
}
@media(max-width:560px){
  .svc-detail-faq{padding:60px 0 72px}
  .svc-faq-head h2{font-size:1.55rem}
  .svc-faq-head p{font-size:.94rem}
  .svc-faq-item summary{padding:16px 18px;gap:10px}
  .svc-faq-num{width:24px;font-size:.94rem}
  .svc-faq-q{font-size:.94rem}
  .svc-faq-toggle{width:30px;height:30px}
  .svc-faq-toggle svg{width:14px;height:14px}
  .svc-faq-a{padding:0 18px 18px 52px;font-size:.9rem}
  .svc-faq-cta{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:18px 18px;
  }
  .svc-faq-cta-call{align-self:stretch;justify-content:center}
}