/* YOUYI Inner Pages V2 — Specialist layout
   Premium professional-services layout: photography + typography + whitespace,
   no decorative pictogram/icon system, numbered modules, restrained borders,
   dark risk band, process timeline, deliverables, related services, FAQ.
   V2 PILOT ONLY. Requires inner-v2-base.css. */

/* ---------- Hero (Figma V2: narrower text column, wider photo, warm overlay + signature) ---------- */
.spec-hero {position:relative; isolation:isolate; overflow:hidden; background:var(--paper);}
.spec-hero-grid {display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:stretch; min-height:clamp(360px,42vw,540px);}
.spec-hero-copy {display:flex; flex-direction:column; justify-content:center; padding:clamp(44px,5.6vw,80px) clamp(0px,2vw,8px) clamp(44px,5.6vw,80px) 0; min-width:0;}
.spec-hero-copy h1 {max-width:13ch;}
.spec-hero-copy .lead {margin-top:clamp(16px,1.8vw,22px); max-width:40ch; color:var(--ink-2); font-size:var(--fs-lead); line-height:1.75;}
.spec-hero-copy .actions {margin-top:clamp(26px,2.8vw,32px);}
/* Restrained text + divider proof strip (not pill chips) */
.spec-hero-points {display:flex; margin-top:clamp(22px,2.4vw,28px); padding-top:clamp(18px,2vw,22px); border-top:1px solid var(--line-cool);}
.spec-hero-points .point {flex:1; padding:0 18px; border-left:1px solid var(--line-cool); font-family:var(--sans); font-size:12.5px; font-weight:600; line-height:1.4; color:var(--ink-2);}
.spec-hero-points .point:first-child {padding-left:0; border-left:0;}
.spec-hero-photo {position:relative; isolation:isolate;}
.spec-hero-photo img {width:100%; height:100%; object-fit:cover; display:block;}
.spec-hero-photo::after {content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(11,42,82,.32) 0%, rgba(11,42,82,.06) 45%, rgba(11,42,82,.22) 100%);}
.spec-hero-signature {position:absolute; right:clamp(18px,2.4vw,32px); bottom:clamp(18px,2.4vw,32px); z-index:2; font-family:var(--script,"Brush Script MT",cursive); font-size:clamp(16px,1.8vw,22px); line-height:1.2; color:#fff; text-align:right; text-shadow:0 1px 8px rgba(0,0,0,.35);}
@media (max-width:900px) {
  /* Mobile order follows source order: breadcrumb, eyebrow, H1, lead, CTA, proof points, photo. */
  .spec-hero-grid {grid-template-columns:1fr; min-height:0;}
  .spec-hero-photo {height:clamp(180px,44vw,240px); order:0;}
  .spec-hero-photo::after {background:linear-gradient(180deg, rgba(11,42,82,.1) 40%, rgba(11,42,82,.28) 100%);}
  .spec-hero-copy {padding:28px 0 0; min-width:0;}
  .spec-hero-copy h1 {max-width:none;}
  .spec-hero-points {min-width:0; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:4px;}
  .spec-hero-points .point {flex:0 0 auto; width:auto; padding:0 16px;}
  .spec-hero-signature {display:none;}
}

/* ---------- Editorial decision section (2 text columns + photo) ---------- */
.editorial-decision {display:grid; grid-template-columns:1fr 1fr minmax(200px,26%); gap:clamp(28px,3vw,44px); align-items:start;}
.editorial-decision .ed-col h3 {font-family:var(--sans); font-size:15.5px; margin-bottom:14px; color:var(--ink);}
.editorial-decision .ed-col ul {margin:0; padding:0; list-style:none; display:grid; gap:11px;}
.editorial-decision .ed-col li {position:relative; padding-left:18px; color:var(--ink-2); font-size:14.5px; line-height:1.6;}
.editorial-decision .ed-col li::before {content:"\2014"; position:absolute; left:0; top:0; color:var(--ink-3); font-size:12px;}
.editorial-decision .ed-photo {align-self:stretch;}
.editorial-decision .ed-photo img {width:100%; height:100%; min-height:220px; object-fit:cover; display:block;}
@media (max-width:900px) {.editorial-decision {grid-template-columns:1fr 1fr;} .editorial-decision .ed-photo {display:none;}}
@media (max-width:620px) {.editorial-decision {grid-template-columns:1fr; gap:24px;}}

/* ---------- Driver strip (qualifying checks) ---------- */
.driver-strip {display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1px; background:var(--line-cool); border:1px solid var(--line-cool);}
.driver-strip .driver {background:#fff; padding:22px 22px 24px;}
.driver-strip .driver p {font-family:var(--sans); font-weight:600; font-size:14.5px; line-height:1.5; color:var(--ink); margin:0;}

/* ---------- Numbered service modules ---------- */
.mod-grid {display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1px,0.2vw,1px); background:var(--line-cool); border:1px solid var(--line-cool);}
.mod-card {background:#fff; padding:clamp(26px,2.4vw,32px);}
.mod-card .mod-index {display:block; font-family:var(--serif); font-weight:700; font-size:26px; color:var(--brand); line-height:1; margin-bottom:14px;}
.mod-card h3 {font-family:var(--sans); font-size:16.5px; margin-bottom:10px;}
.mod-card p {color:var(--ink-2); font-size:14px; line-height:1.7; margin:0;}
@media (max-width:900px) {.mod-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px) {.mod-grid {grid-template-columns:1fr;}}

/* ---------- You Provide / YOUYI Handles ---------- */
.split-cols {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,28px);}
.split-col {background:var(--paper-blue-2); border:1px solid var(--line-cool); padding:clamp(26px,2.6vw,32px);}
.split-col h3 {font-family:var(--sans); font-size:15.5px; margin-bottom:16px;}
.split-col ul {margin:0; padding:0; list-style:none; display:grid; gap:11px;}
.split-col li {position:relative; padding-left:18px; color:var(--ink-2); font-size:14.5px; line-height:1.6;}
.split-col li::before {content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:50%; background:var(--brand);}
@media (max-width:700px) {.split-cols {grid-template-columns:1fr;}}

/* ---------- Dark risk / factors band — numbered columns + vertical dividers (Figma V2) ---------- */
.risk-band {position:relative; isolation:isolate; background:var(--navy); color:#fff;}
.risk-band .kicker {color:#8ec2ee;}
.risk-band h2 {color:#fff;}
.risk-band .sec-head p {color:var(--on-dark-2);}
.risk-cols {display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.16);}
.risk-cols .risk-col {padding:clamp(24px,2.6vw,30px) clamp(20px,2.2vw,26px) 4px; border-left:1px solid rgba(255,255,255,.16);}
.risk-cols .risk-col:nth-child(3n+1) {border-left:0;}
.risk-cols .risk-num {display:block; font-family:var(--serif); font-weight:700; font-size:14px; color:var(--accent-2,#d6a44a); margin-bottom:12px;}
.risk-cols .risk-col h3 {font-family:var(--sans); font-size:15px; color:#fff; margin:0 0 10px;}
.risk-cols .risk-col p {color:var(--on-dark-2); font-size:13.5px; line-height:1.65; margin:0;}
@media (max-width:900px) {.risk-cols {grid-template-columns:repeat(2,minmax(0,1fr));} .risk-cols .risk-col:nth-child(3n+1) {border-left:1px solid rgba(255,255,255,.16);} .risk-cols .risk-col:nth-child(2n+1) {border-left:0;}}
@media (max-width:560px) {.risk-cols {grid-template-columns:1fr;} .risk-cols .risk-col {border-left:0; border-top:1px solid rgba(255,255,255,.16); padding-top:22px;} .risk-cols .risk-col:first-child {border-top:0;}}
.risk-cols.cols-4 {grid-template-columns:repeat(4, minmax(0,1fr));}
.risk-cols.cols-4 .risk-col:nth-child(3n+1) {border-left:1px solid rgba(255,255,255,.16);}
.risk-cols.cols-4 .risk-col:nth-child(4n+1) {border-left:0;}
@media (max-width:900px) {.risk-cols.cols-4 {grid-template-columns:repeat(2,minmax(0,1fr));} .risk-cols.cols-4 .risk-col:nth-child(4n+1) {border-left:1px solid rgba(255,255,255,.16);} .risk-cols.cols-4 .risk-col:nth-child(2n+1) {border-left:0;}}
@media (max-width:560px) {.risk-cols.cols-4 {grid-template-columns:1fr;} .risk-cols.cols-4 .risk-col {border-left:0; border-top:1px solid rgba(255,255,255,.16); padding-top:22px;} .risk-cols.cols-4 .risk-col:first-child {border-top:0;}}

/* ---------- Process timeline — connected circles (Figma V2) ---------- */
.timeline-circles {display:flex; align-items:flex-start; position:relative; padding-top:20px;}
.timeline-circles::before {content:""; position:absolute; top:39px; left:8%; right:8%; height:1px; background:var(--line-cool); z-index:0;}
.timeline-circles .step {position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 6px;}
.timeline-circles .circle {width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--brand); color:var(--brand); font-family:var(--serif); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.timeline-circles .step p {margin:0; font-family:var(--sans); font-weight:700; font-size:13.5px; color:var(--ink); line-height:1.4;}
.timeline-circles .step small {display:block; margin-top:4px; color:var(--ink-3); font-size:11.5px;}
@media (max-width:780px) {
  .timeline-circles {flex-direction:column; align-items:flex-start; gap:22px; padding-top:0;}
  .timeline-circles::before {display:none;}
  .timeline-circles .step {flex-direction:row; align-items:center; text-align:left; gap:16px; width:100%;}
  .timeline-circles .circle {margin-bottom:0; flex:0 0 auto;}
}

/* ---------- Deliverables (kept for shorter lists elsewhere) ---------- */
.deliverable-grid {display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1px,0.2vw,1px); background:var(--line-cool); border:1px solid var(--line-cool);}
.deliverable-card {background:#fff; padding:24px 22px;}
.deliverable-card h3 {font-family:var(--sans); font-size:15px; margin-bottom:8px;}
.deliverable-card p {color:var(--ink-2); font-size:13.5px; line-height:1.65; margin:0;}
@media (max-width:900px) {.deliverable-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px) {.deliverable-grid {grid-template-columns:1fr;}}
.deliverable-grid.cols-4 {grid-template-columns:repeat(4, minmax(0,1fr));}
@media (max-width:900px) {.deliverable-grid.cols-4 {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px) {.deliverable-grid.cols-4 {grid-template-columns:1fr;}}

/* ---------- Deliverables + CTA paired composition (Figma V2) ---------- */
.pair-split {display:grid; grid-template-columns:1.4fr 1fr; border:1px solid var(--line-cool);}
.pair-split .pair-box {padding:clamp(28px,3vw,38px);}
.pair-split .pair-left {background:var(--paper-blue-2);}
.pair-split .pair-left p.pair-intro {color:var(--ink-2); font-size:14px; margin:8px 0 18px;}
.pair-split .pair-left ul {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;}
.pair-split .pair-left li {position:relative; padding-left:16px; color:var(--ink-2); font-size:14px; line-height:1.6;}
.pair-split .pair-left li::before {content:"\2014"; position:absolute; left:0; top:0; color:var(--ink-3); font-size:11px;}
.pair-split .pair-right {background:var(--navy); color:#fff; display:flex; flex-direction:column; justify-content:center;}
.pair-split .pair-right h3 {font-family:var(--serif); font-weight:700; font-size:22px; color:#fff; margin:0 0 10px;}
.pair-split .pair-right p {color:var(--on-dark-2); font-size:14px; line-height:1.65; margin:0 0 18px;}
@media (max-width:820px) {.pair-split {grid-template-columns:1fr;} .pair-split .pair-left ul {grid-template-columns:1fr;}}

/* ---------- Related services — image-led cards (Figma V2) ---------- */
.related-photo-grid {display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--line-cool); border:1px solid var(--line-cool);}
.related-photo-card {background:#fff; display:flex; align-items:center; gap:16px; padding:18px 20px; color:inherit; min-height:96px;}
.related-photo-card img {width:60px; height:60px; object-fit:cover; flex:0 0 auto;}
.related-photo-card .rp-text {min-width:0;}
.related-photo-card .rp-text h3 {font-family:var(--sans); font-size:14.5px; margin:0 0 4px;}
.related-photo-card .rp-text p {color:var(--ink-2); font-size:12.5px; line-height:1.5; margin:0;}
@media (max-width:900px) {.related-photo-grid {grid-template-columns:1fr;}}
.related-photo-grid.cols-4 {grid-template-columns:repeat(4, minmax(0,1fr));}
@media (max-width:1100px) {.related-photo-grid.cols-4 {grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:620px) {.related-photo-grid.cols-4 {grid-template-columns:1fr;}}

/* ---------- FAQ accordion (Figma V2 — native <details>, preserves visible text/count) ---------- */
.faq-accordion {border-top:1px solid var(--line-cool); max-width:820px;}
.faq-accordion details {border-bottom:1px solid var(--line-cool); padding:16px 0;}
.faq-accordion summary {cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-family:var(--sans); font-weight:700; font-size:15px; color:var(--ink);}
.faq-accordion summary::-webkit-details-marker {display:none;}
.faq-accordion summary::after {content:"+"; flex:0 0 auto; font-size:20px; line-height:1; color:var(--brand); font-weight:400;}
.faq-accordion details[open] summary::after {content:"\2212";}
.faq-accordion details p {margin:12px 0 0; color:var(--ink-2); font-size:14.5px; line-height:1.75;}
.faq-accordion details p a {color:var(--brand); border-bottom:1px solid var(--line-cool);}

/* ---------- Final CTA — split row (Figma V2) ---------- */
.final-cta.split-row .wrap {display:grid; grid-template-columns:1fr auto; gap:24px 40px; align-items:center;}
.final-cta.split-row h2 {max-width:22ch;}
.final-cta.split-row .actions {margin-top:0;}
@media (max-width:760px) {.final-cta.split-row .wrap {grid-template-columns:1fr;}}

/* ---------- Scope / quote drivers ---------- */
.scope-list {display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--line-cool); border:1px solid var(--line-cool);}
.scope-item {background:#fff; padding:16px 20px; font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink);}
@media (max-width:620px) {.scope-list {grid-template-columns:1fr;}}