/* Services Hub · final content & visual refinement (prototype, Panda Visual/services-hub)
   Loaded last on /services/ only. Section order, services, routes, interactions and the shared shell are
   unchanged. Scoped to .sh (the Services main element). */

/* ---------- 01 · Hero: one warm photograph instead of an empty dark block ---------- */
.sh .sh-hero-photo{margin:0;justify-self:end;width:100%;max-width:none;border:0;border-radius:16px;background:#e9e4dc;overflow:hidden;aspect-ratio:4/5}
.sh .sh-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
@media(min-width:1001px){.sh .sh-hero{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}}
@media(max-width:1000px){.sh .sh-hero-photo{justify-self:stretch;aspect-ratio:16/10}}
@media(max-width:600px){.sh .sh-hero-photo{aspect-ratio:4/3;border-radius:12px}}

/* ---------- 02 · Goal selector: a list you pick from, answer set as a statement ---------- */
.sh #problem .sh-choices{gap:0;border-top:1px solid #d9d4cb}
.sh #problem .sh-choices button{border:0;border-bottom:1px solid #d9d4cb;border-radius:0;background:transparent;padding:16px 4px;text-align:left;font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.sh #problem .sh-choices button::after{content:"";width:8px;height:8px;border-radius:50%;background:transparent;transition:background-color .18s}
.sh #problem .sh-choices button:hover{color:#c72d5c;border-color:#d9d4cb}
.sh #problem .sh-choices button[aria-pressed=true]{background:transparent;color:#17171b;font-weight:600;border-color:#d9d4cb}
.sh #problem .sh-choices button[aria-pressed=true]::after{background:#E84274}
.sh #problem .sh-goal-panel{background:transparent;border:0;box-shadow:none;padding:0!important;align-self:center}
.sh #problem .sh-goal-panel p{font-size:clamp(24px,2.4vw,32px);line-height:1.25;letter-spacing:-.02em;color:#17171b;margin:0 0 24px;max-width:22ch}
@media(max-width:600px){.sh #problem .sh-choices button{font-size:16px;padding:14px 2px}.sh #problem .sh-goal-panel p{font-size:23px}}

/* ---------- 03 · Approach: three steps on one rule, no boxes ---------- */
.sh .sh-approach li:nth-child(n){padding:22px 0 0;border:0;border-top:2px solid #17171b;border-radius:0;background:transparent}
.sh .sh-approach li:nth-child(2){background:transparent;border-top-color:#E84274}
.sh .sh-approach li:hover{border-color:#17171b}
.sh .sh-approach li:nth-child(2):hover{border-color:#E84274}
.sh .sh-approach span{font-size:15px;font-weight:600;color:#c72d5c}
.sh .sh-approach h3{margin:12px 0 8px;font-size:clamp(24px,2.2vw,30px)}
.sh .sh-approach p{max-width:30ch;color:#55555a}
@media(max-width:600px){.sh .sh-approach{gap:28px}.sh .sh-approach li:nth-child(n){padding:16px 0 0}}

/* ---------- 04 · Services directory: an editorial index instead of a card grid ---------- */
.sh .sh-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.sh .sh-directory article{padding:22px 0 24px;border:0;border-top:1px solid #4a4a4e;border-radius:0;background:transparent}
.sh .sh-directory article:hover,.sh .sh-directory article:focus-within,.sh .sh-directory article:target{background:transparent;border-color:#E84274}
.sh .sh-directory h4{font-size:clamp(22px,2vw,27px);margin:0 0 8px}
.sh .sh-directory a:hover{color:#ff9dbb}
.sh .sh-directory p{color:#b9b8bd;max-width:44ch}
.sh .sh-service-group>h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#E84274;font-weight:600}
@media(max-width:1000px){.sh .sh-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}}
@media(max-width:600px){.sh .sh-directory{grid-template-columns:1fr}.sh .sh-directory article{padding:18px 0 20px}.sh .sh-directory h4{font-size:21px}}

/* ---------- 05 · Local Visibility Essentials: a framed offer line, not a floating strip ---------- */
.sh .sh-entry{padding-block:56px}
.sh .sh-entry-inner{border-block:1px solid #dedbd5;padding-block:36px}

/* ---------- 06 · AI Search: example questions as the visual ---------- */
.sh .sh-asks{margin:0 0 28px;display:grid;gap:10px}
.sh .sh-asks figcaption{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6e6c66;margin-bottom:4px}
.sh .sh-asks p{margin:0;justify-self:start;max-width:100%;padding:12px 18px;border-radius:18px 18px 18px 4px;background:#f4f1ea;font-size:clamp(17px,1.5vw,20px);line-height:1.3;color:#17171b}
.sh .sh-asks p:nth-of-type(2){margin-left:clamp(0px,4vw,48px)}
.sh .sh-asks p:nth-of-type(3){margin-left:clamp(0px,2vw,24px)}

/* ---------- 07 · Human-led AI: dark, type-led split of who does what ---------- */
.sh .sh-human-ai{background:#17171b;color:#f4f2ed}
.sh .sh-human-ai h2{color:#fff}
.sh .sh-human-ai .sh-human-ai-copy p{color:#c9c7c2;font-size:18px;line-height:1.6;max-width:36ch}
.sh .sh-roles{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-self:start}
.sh .sh-roles>div{padding:24px 0 0;border-top:2px solid #E84274}
.sh .sh-roles>div+div{border-top-color:#5a5a5f}
.sh .sh-roles h3{margin:0 0 14px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#E84274;font-weight:600}
.sh .sh-roles>div+div h3{color:#b9b8bd}
.sh .sh-roles ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sh .sh-roles li{font-size:clamp(20px,1.9vw,26px);line-height:1.2;letter-spacing:-.015em;color:#fff}
.sh .sh-roles>div+div li{color:#c9c7c2;font-size:clamp(18px,1.6vw,22px)}
@media(max-width:1000px){.sh .sh-roles{margin-top:32px}}
@media(max-width:600px){.sh .sh-roles{grid-template-columns:1fr;gap:28px}}

/* ---------- 10 · Analysis options: two clean columns, price leads ---------- */
.sh #market-analysis .sh-analysis-price{font-size:clamp(34px,3vw,44px);letter-spacing:-.03em;font-weight:600;color:#17171b}
.sh #market-analysis .sh-analysis-price span{font-size:15px;font-weight:500;color:#55555a;letter-spacing:0}
.sh .sh-tool .sh-asks{background:transparent;border:0;padding:0;box-shadow:none}
.sh #ai-discovery .sh-small{margin-top:14px}
.sh #ai-discovery .sh-tool a{display:inline-flex;margin-top:12px}

/* Report comparison: owner-requested local redesign. No checkout or delivery promise. */
.sh .sh-market{background:#f4f1ea}
.sh .sh-market> .wrap> .sh-small{font-size:14px}
.sh .sh-report-comparison{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #c9c5bf;margin-top:36px}
.sh .sh-report{padding:36px 40px 28px 0;min-width:0}
.sh .sh-report+.sh-report{border-left:1px solid #c9c5bf;padding-left:40px;padding-right:0}
.sh .sh-report-top{display:flex;justify-content:space-between;gap:20px;align-items:start;min-height:104px}
.sh .sh-report-top h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.025em;margin:0;line-height:1.15;max-width:12ch}
.sh .sh-report .sh-report-price{font-size:clamp(48px,5vw,72px);line-height:1;letter-spacing:-.055em;color:#17171b;font-weight:600;margin:0;white-space:nowrap}
.sh .sh-report-depth .sh-report-price{color:#b92553}
.sh .sh-report-price span{display:block;font-size:13px;letter-spacing:0;line-height:1.5;font-weight:400;text-align:right;color:#55555a;margin-top:6px}
.sh .sh-report .sh-report-purpose{font-size:clamp(22px,2vw,28px);line-height:1.2;color:#17171b;letter-spacing:-.02em;margin:20px 0 10px;min-height:2.4em}
.sh .sh-report>p:not(.sh-report-purpose){font-size:15px;margin:0 0 28px;color:#55555a}
.sh .sh-report-summary{margin:0 0 24px}
.sh .sh-report-summary>div{display:grid;grid-template-columns:100px 1fr;gap:20px;padding:14px 0;border-top:1px solid #d8d3cd}
.sh .sh-report-summary dt{font-size:13px;color:#66635f}
.sh .sh-report-summary dd{margin:0;font-size:16px;line-height:1.5;color:#232323}
.sh .sh-report-details{border-top:1px solid #c9c5bf}
.sh .sh-report-details summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:52px;padding:14px 0;cursor:pointer;font-size:16px;font-weight:500;list-style:none;color:#17171b;transition:color .18s}
.sh .sh-report-details summary::-webkit-details-marker{display:none}
.sh .sh-report-details summary::after{content:none}
.sh .sh-report-details summary:hover{color:#b92553}
.sh .sh-report-details summary:focus-visible{outline:2px solid #b92553;outline-offset:5px}
.sh .sh-report-details summary span{font-size:24px;line-height:1;transition:transform .18s}
.sh .sh-report-details[open] summary span{transform:rotate(45deg)}
.sh .sh-report-details ul{margin:8px 0 18px;padding-left:20px;font-size:15px;line-height:1.6;color:#55555a}
.sh .sh-report-details li+li{margin-top:8px}
.sh .sh-report-details p{font-size:14px}
.sh #market-analysis .sh-report-comparison+.sh-small{font-size:13px;max-width:none;margin:24px 0 0;padding-top:20px;border-top:1px solid #c9c5bf;color:#66635f}
@media(max-width:1000px){.sh .sh-report{padding-right:24px}.sh .sh-report+.sh-report{padding-left:24px}.sh .sh-report-top{display:block;min-height:180px}.sh .sh-report .sh-report-price{margin-top:20px}.sh .sh-report-price span{text-align:left}.sh .sh-report-summary>div{grid-template-columns:1fr;gap:4px}}
@media(max-width:600px){.sh .sh-report-comparison{grid-template-columns:1fr;margin-top:28px}.sh .sh-report,.sh .sh-report+.sh-report{padding:26px 0;border-left:0}.sh .sh-report+.sh-report{border-top:1px solid #c9c5bf}.sh .sh-report-top{display:flex;min-height:0}.sh .sh-report .sh-report-price{margin-top:0}.sh .sh-report-price span{text-align:right}.sh .sh-report .sh-report-purpose{min-height:0;margin-top:24px}.sh .sh-report-summary>div{grid-template-columns:84px 1fr;gap:14px}.sh #market-analysis .sh-report-comparison+.sh-small{margin-top:0}}
@media(prefers-reduced-motion:reduce){.sh .sh-report-details summary,.sh .sh-report-details summary span{transition:none}}