/* ============================================================
   INNER pages — shared styles
   ============================================================ */

/* Page hero */
.page-hero{
  padding:180px 0 100px;position:relative;overflow:hidden;
}
.page-hero .eyebrow{margin-bottom:32px}
.page-hero h1{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(56px,9vw,140px);line-height:0.94;letter-spacing:-0.035em;
  max-width:14ch;margin-bottom:40px;
}
.page-hero h1 em{font-style:italic;color:var(--accent)}
.page-hero .lead{font-size:22px;max-width:62ch}
.page-hero-foot{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-top:64px;padding-top:40px;border-top:1px solid var(--border);flex-wrap:wrap}
.page-hero-foot .row{gap:12px}
.page-hero-meta{display:flex;flex-direction:column;gap:4px}
.page-hero-meta .mono{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-dim)}
.page-hero-meta .val{font-family:var(--font-serif);font-size:22px}

/* Breadcrumb */
.crumb{display:flex;gap:8px;align-items:center;margin-bottom:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-dim)}
.crumb a{color:var(--fg-muted)}
.crumb a:hover{color:var(--fg)}

/* Section head variants */
.sh{margin-bottom:64px;max-width:780px}
.sh .eyebrow{margin-bottom:16px}
.sh h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(40px,5.2vw,76px);line-height:1;letter-spacing:-0.025em;margin-bottom:20px}
.sh h2 em{font-style:italic;color:var(--accent)}
.sh p{font-size:18px;color:var(--fg-muted);max-width:58ch}

/* Feature list (included / problems) */
.feat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--border)}
.feat-list > li{
  list-style:none;padding:32px 0;border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:60px 1fr;gap:20px;align-items:start;
}
.feat-list > li:nth-child(odd){padding-right:40px;border-right:1px solid var(--border)}
.feat-list > li:nth-child(even){padding-left:40px}
.feat-list .feat-num{font-family:var(--font-serif);font-size:40px;line-height:1;color:var(--fg-dim)}
.feat-list .feat-body h3{font-size:19px;font-weight:500;margin-bottom:8px;color:var(--fg)}
.feat-list .feat-body p{font-size:15px;color:var(--fg-muted);line-height:1.55;margin:0}

/* Problems (red cross style, dim not alarming) */
.probs{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.probs li{
  padding:24px;border:1px solid var(--border);border-radius:14px;
  display:flex;gap:16px;align-items:flex-start;background:var(--bg-card);
}
.probs .x{
  width:28px;height:28px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-mono);font-size:14px;
  background:rgba(20,16,10,0.04);border:1px solid var(--border);color:var(--fg-muted);
}
.probs li p{font-size:15px;color:var(--fg-muted);line-height:1.5}
.probs li strong{color:var(--fg);font-weight:500;display:block;margin-bottom:4px}

/* Inline CTA panel */
.cta-panel{
  border:1px solid var(--border-strong);border-radius:24px;
  background:linear-gradient(135deg, rgba(241,90,36,0.08), transparent 40%), var(--bg-card);
  padding:64px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
}
.cta-panel h3{font-family:var(--font-serif);font-weight:400;font-size:clamp(32px,4.4vw,56px);line-height:1.02;letter-spacing:-0.025em}
.cta-panel h3 em{font-style:italic;color:var(--accent)}
.cta-panel p{margin-top:20px;font-size:16px;max-width:42ch}
.cta-panel .cta-right{display:flex;flex-direction:column;gap:16px;justify-self:end}
.cta-panel .row{gap:12px}

/* Two-col spec */
.two-col{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start}

/* Metric tile grid */
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.metric{
  padding:32px;border:1px solid var(--border);border-radius:16px;background:var(--bg-card);
  display:flex;flex-direction:column;gap:6px;min-height:180px;justify-content:space-between;
}
.metric .num{font-family:var(--font-serif);font-size:56px;line-height:1;color:var(--fg)}
.metric .metric-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-muted)}
.metric .metric-desc{font-size:13px;color:var(--fg-dim);line-height:1.5}

@media (max-width:900px){
  .page-hero{padding:140px 0 60px}
  .page-hero-foot{flex-direction:column;align-items:flex-start}
  .feat-list{grid-template-columns:1fr}
  .feat-list > li:nth-child(odd){padding-right:0;border-right:none}
  .feat-list > li:nth-child(even){padding-left:0}
  .probs{grid-template-columns:1fr}
  .cta-panel{grid-template-columns:1fr;padding:32px;gap:24px}
  .cta-panel .cta-right{justify-self:flex-start}
  .two-col{grid-template-columns:1fr;gap:40px}
  .metric-grid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   FAQ accordion (used on all service pages)
   ============================================================ */
.faq-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border);overflow:hidden}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:32px;
  padding:32px 4px;background:transparent;text-align:left;cursor:pointer;
  font-family:var(--font-serif);font-weight:400;font-size:clamp(20px,2.4vw,28px);line-height:1.25;letter-spacing:-0.018em;color:var(--fg);
  transition:color .25s var(--ease);
}
.faq-q:hover{color:var(--accent)}
.faq-q-icon{
  flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-strong);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:16px;color:var(--fg-muted);
  transition:transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  margin-top:2px;
}
.faq-item[open] .faq-q-icon{transform:rotate(45deg);background:var(--accent);color:#fff;border-color:var(--accent)}
.faq-a{padding:0 4px 32px;max-width:78ch}
.faq-a p{font-size:16px;line-height:1.6;color:var(--fg-muted)}
.faq-a p + p{margin-top:14px}

/* details/summary native — strip default chrome */
.faq-item summary{list-style:none}
.faq-item summary::-webkit-details-marker{display:none}

/* Two-column visual H3 stack — card style with big italic numbers */
.svc-stack{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.svc-stack .svc-stack-item{
  padding:36px 32px;border:1px solid var(--border);border-radius:20px;background:var(--bg-card);
  position:relative;overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.svc-stack .svc-stack-item:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.svc-stack .svc-stack-item::after{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(241,90,36,0.12), transparent 65%);
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
.svc-stack .svc-stack-item:hover::after{opacity:1}
.svc-stack .svc-stack-item h3{
  font-family:var(--font-serif);font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.02em;
  margin-bottom:14px;color:var(--fg);
}
.svc-stack .svc-stack-item p{font-size:15.5px;line-height:1.65;color:var(--fg-muted)}
.svc-stack .svc-stack-item .h3-num{
  font-family:var(--font-serif);font-style:italic;font-size:14px;letter-spacing:0;color:var(--accent);
  text-transform:none;display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  padding:6px 14px;border-radius:999px;border:1px solid rgba(241,90,36,0.25);
  background:rgba(241,90,36,0.08);
}
.svc-stack .svc-stack-item .h3-num::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
}

/* Why-us bullet list with orange accent */
.why-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.why-list li{
  padding:24px 28px;border:1px solid var(--border);border-radius:16px;background:var(--bg-card);
  display:flex;gap:18px;align-items:flex-start;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.why-list li:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.why-list .check{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:13px;font-weight:500;
}
.why-list strong{display:block;font-weight:500;color:var(--fg);margin-bottom:4px;font-size:16px}
.why-list p{font-size:14.5px;color:var(--fg-muted);line-height:1.55}

/* Numbered process (alt style — vertical) */
.proc-vert{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.proc-vert > li{
  list-style:none;padding:28px 0;border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:80px 1fr;gap:24px;align-items:start;
}
.proc-vert .pn{font-family:var(--font-serif);font-size:48px;line-height:1;color:var(--accent);font-style:italic}
.proc-vert h3{font-family:var(--font-serif);font-weight:400;font-size:24px;margin-bottom:6px;letter-spacing:-0.02em;color:var(--fg)}
.proc-vert p{font-size:15px;color:var(--fg-muted);line-height:1.6}

@media (max-width:900px){
  .svc-stack{grid-template-columns:1fr;gap:32px}
  .why-list{grid-template-columns:1fr}
  .faq-q{font-size:19px;padding:24px 4px;gap:16px}
  .faq-q-icon{width:30px;height:30px}
  .proc-vert > li{grid-template-columns:54px 1fr;gap:16px}
  .proc-vert .pn{font-size:36px}
}

/* ============================================================
   VISUAL COMPONENTS — stat strip, callout, intro grid, icon-card
   ============================================================ */

/* Big-number stat strip (4 tiles right under hero) */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--border);border-radius:24px;overflow:hidden;
  background:var(--bg-card);box-shadow:var(--shadow-card);
}
.stat-strip > div{
  padding:36px 32px;border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;justify-content:space-between;min-height:160px;
  position:relative;transition:background .35s var(--ease);
}
.stat-strip > div:last-child{border-right:none}
.stat-strip > div:hover{background:linear-gradient(180deg, rgba(241,90,36,0.06), transparent 60%)}
.stat-strip .num{
  font-family:var(--font-serif);font-size:clamp(44px,5.6vw,72px);line-height:0.95;
  letter-spacing:-0.03em;color:var(--fg);font-style:normal;
}
.stat-strip .num em{color:var(--accent);font-style:italic}
.stat-strip .lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-muted)}
.stat-strip .ctx{font-size:13px;color:var(--fg-dim);line-height:1.5;max-width:30ch}

/* Pull-quote / insight callout box */
.callout{
  padding:48px 56px;border-radius:24px;
  background:linear-gradient(135deg, #FFF6EC 0%, #FFFFFF 70%);
  border:1px solid var(--border);position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
}
.callout::before{
  content:"";position:absolute;left:0;top:24px;bottom:24px;width:3px;
  background:var(--accent);border-radius:0 3px 3px 0;
}
.callout .callout-eyebrow{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;display:block;
}
.callout p{
  font-family:var(--font-serif);font-size:clamp(22px,2.7vw,32px);font-weight:400;
  line-height:1.3;letter-spacing:-0.01em;color:var(--fg);max-width:42ch;
}
.callout p em{font-style:italic;color:var(--accent)}
.callout .callout-attr{
  margin-top:20px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--fg-dim);
}

/* Intro mini-tile grid (3 quick-hit cards instead of long paragraphs) */
.intro-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.intro-tiles > div{
  padding:32px 28px;border:1px solid var(--border);border-radius:18px;background:var(--bg-card);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
  display:flex;flex-direction:column;gap:12px;
}
.intro-tiles > div:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.intro-tiles .tile-num{
  font-family:var(--font-serif);font-size:48px;line-height:1;color:var(--accent);font-style:italic;
}
.intro-tiles h3{font-family:var(--font-serif);font-weight:400;font-size:24px;letter-spacing:-0.018em;color:var(--fg);line-height:1.15}
.intro-tiles p{font-size:14.5px;color:var(--fg-muted);line-height:1.6}

/* Visual H3 service card — replaces svc-stack flat layout */
.svc-stack-v2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.svc-stack-v2 .card-svc{
  padding:36px 32px;border:1px solid var(--border);border-radius:20px;background:var(--bg-card);
  display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  position:relative;overflow:hidden;
}
.svc-stack-v2 .card-svc:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.svc-stack-v2 .card-svc::after{
  content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle, rgba(241,90,36,0.12), transparent 65%);
  opacity:0;transition:opacity .4s var(--ease);
}
.svc-stack-v2 .card-svc:hover::after{opacity:1}
.svc-stack-v2 .num-big{
  font-family:var(--font-serif);font-style:italic;font-size:56px;line-height:0.9;
  color:var(--accent);letter-spacing:-0.025em;
}
.svc-stack-v2 h3{font-family:var(--font-serif);font-weight:400;font-size:26px;line-height:1.1;letter-spacing:-0.02em;margin-bottom:10px;color:var(--fg)}
.svc-stack-v2 p{font-size:15px;color:var(--fg-muted);line-height:1.6}
.svc-stack-v2 .card-svc.span-2{grid-column:span 2}

@media (max-width:900px){
  .stat-strip{grid-template-columns:1fr 1fr}
  .stat-strip > div{border-right:none;border-bottom:1px solid var(--border)}
  .stat-strip > div:nth-child(even){border-right:none}
  .stat-strip > div:nth-last-child(-n+2){border-bottom:none}
  .stat-strip > div:nth-child(odd){border-right:1px solid var(--border)}
  .callout{padding:32px 28px}
  .intro-tiles{grid-template-columns:1fr}
  .svc-stack-v2{grid-template-columns:1fr}
  .svc-stack-v2 .card-svc{grid-template-columns:48px 1fr;gap:18px;padding:28px 24px}
  .svc-stack-v2 .num-big{font-size:42px}
  .svc-stack-v2 .card-svc.span-2{grid-column:auto}
}