/* =====================================================================
   SD Mobile Auto Glass — About / Contact / legal pages (page layer over
   homepage.css + service.css). Signature: legal pages read like a spec
   sheet — sticky contents rail, numbered clauses, the active one lit.
   ===================================================================== */
.why-list .reason p,.probs .why-list{margin-top:0}
.probs{padding:clamp(80px,10vw,140px) 0;border-top:1px solid var(--line)}
.why-list--short .reason p{font:500 18px/1.45 var(--f-d)}
.site-link{white-space:nowrap;color:var(--blue);text-decoration:none;font-weight:600}
@media(hover:hover){.site-link:hover{text-decoration:underline;text-underline-offset:4px}}
a.inline{color:var(--white);text-decoration:underline;text-decoration-color:rgba(77,159,255,.6);text-underline-offset:4px}

/* ---------- shared closing card (about + contact) ---------- */
.lsched{padding:clamp(80px,10vw,140px) 0;background:radial-gradient(900px 500px at 50% 0%,rgba(77,159,255,.14),transparent 60%),var(--carbon);border-top:1px solid var(--line)}
.lsched-card{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;padding:clamp(30px,4vw,56px);border-radius:28px;
  background:linear-gradient(160deg,var(--steel-2),var(--steel));border:1px solid var(--line-2)}
.lsched-copy .h2 .chrome{display:block}
.lsched-copy .acts{margin-top:30px}
.info{margin:0;padding:8px 26px;border-radius:20px;background:rgba(7,9,12,.55);border:1px solid var(--line)}
.info-r{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.info-r:first-child{border-top:0}
.info dt{font:600 11px/2 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:#8b97a3}
.info dd{margin:0;font:500 16.5px/1.5 var(--f-d)}
.info dd a[href^="tel:"]{color:var(--blue);text-decoration:none;font-weight:600}
.info-ul{margin:0;padding:0;list-style:none}
.info-ul li+li{margin-top:4px}

/* ---------- about ---------- */
.hero--about .h1 .ln>span{white-space:normal}
.intro--about{padding:clamp(70px,9vw,120px) 0 0}
.about-big{font:400 clamp(20px,2vw,28px)/1.55 var(--f-d);color:#dfe5ea;max-width:30em;margin:0}
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.about-p{color:var(--mute)}
.tags--lg li{font-size:16.5px;padding:12px 18px}
.area-tags--lg li{font-size:17px;padding:12px 20px}

/* ---------- contact hero ---------- */
.chero{position:relative;padding:calc(var(--bar) + 70px) 0 clamp(70px,8vw,110px);overflow:hidden;isolation:isolate}
.chero-glow{position:absolute;z-index:-1;inset:0;background:radial-gradient(800px 520px at 20% 10%,rgba(77,159,255,.16),transparent 60%),radial-gradient(700px 500px at 90% 80%,rgba(77,159,255,.08),transparent 60%)}
.chero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:start}
.chero-h1{font-size:clamp(34px,4vw,58px);line-height:1.08;max-width:12em}
.chero-h1 .chrome{display:block}
.chero-lede{font:400 clamp(18px,1.45vw,21px)/1.7 var(--f-d);color:#dfe5ea}
.chero-p{color:var(--mute)}
.chero-tel{display:inline-flex;flex-direction:column;gap:8px;margin-top:22px;padding:22px 28px;border-radius:20px;border:1px solid rgba(77,159,255,.45);
  background:linear-gradient(160deg,rgba(77,159,255,.16),rgba(77,159,255,.04));text-decoration:none;box-shadow:0 0 40px -12px rgba(77,159,255,.6)}
.chero-tel span{font:600 11px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.chero-tel b{font:600 clamp(28px,3vw,40px)/1 var(--f-d);letter-spacing:-.01em;color:var(--white);white-space:nowrap}
.chero-form .qs{box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 0 1px rgba(77,159,255,.12)}

/* ---------- legal ---------- */
.doc-hero{position:relative;padding:calc(var(--bar) + 70px) 0 clamp(50px,6vw,80px);border-bottom:1px solid var(--line);
  background:radial-gradient(900px 500px at 85% 0%,rgba(77,159,255,.12),transparent 60%),var(--void)}
.doc-h1{font-size:clamp(32px,4vw,56px);max-width:18em}
.doc-eff{display:inline-flex;align-items:center;gap:12px;margin:0 0 28px;padding:10px 18px;border-radius:40px;border:1px solid var(--line-2);background:var(--carbon);font:600 12px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:#dfe5ea}
.doc-eff .live{background:var(--blue);box-shadow:0 0 12px rgba(77,159,255,.8);animation:none}
.doc-lede p{font:400 clamp(18px,1.4vw,20px)/1.7 var(--f-d);color:#dfe5ea;max-width:52em}
.doc{padding:clamp(60px,8vw,110px) 0 clamp(80px,10vw,140px)}
.doc-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(36px,6vw,90px);align-items:start}
.toc{position:sticky;top:calc(var(--bar) + 24px);max-height:calc(100vh - var(--bar) - 48px);overflow:auto;padding:22px 10px 22px 22px;border-radius:20px;border:1px solid var(--line);background:var(--carbon)}
.toc-k{margin:0 0 12px;font:600 11px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.toc ol{margin:0;padding:0;list-style:none}
.toc a{display:grid;grid-template-columns:30px 1fr;padding:7px 10px 7px 0;font:500 14.5px/1.35 var(--f-d);color:var(--mute);text-decoration:none;transition:color .25s var(--ease)}
.toc a span{font:600 11px/1.9 var(--f-m);letter-spacing:.08em;color:#8b97a3;transition:color .25s var(--ease)}
.toc a.is-on,.toc a:focus-visible{color:var(--white)}
.toc a.is-on span{color:var(--blue)}
@media(hover:hover){.toc a:hover{color:var(--white)}}
.clauses{max-width:760px}
.clause{position:relative;padding:34px 0 36px 76px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--bar) + 20px)}
.clause:first-child{border-top:0;padding-top:0}
.clause-n{position:absolute;left:0;top:34px;font:600 30px/1 var(--f-d);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(77,159,255,.6);transition:color .5s var(--ease)}
.clause:first-child .clause-n{top:0}
.clause.is-on .clause-n{color:var(--blue);-webkit-text-stroke-color:transparent;text-shadow:0 0 24px rgba(77,159,255,.5)}
.clause h2{font:600 clamp(22px,2vw,28px)/1.25 var(--f-d);letter-spacing:-.015em;margin:0 0 16px}
.clause p{color:#c3ccd5;margin:0 0 14px}
.clause .tick-list{margin:4px 0 18px}
.clause--contact{margin-top:20px;padding:34px 36px 30px 112px;border:1px solid var(--line-2);border-radius:24px;background:linear-gradient(160deg,var(--steel-2),var(--steel))}
.clause--contact .clause-n{left:36px;top:36px}
.clause--contact p a[href^="tel:"]{color:var(--blue);font-weight:600;text-decoration:none}

@media(max-width:980px){
  .lsched-card,.about-split,.chero-grid{grid-template-columns:1fr}
  .doc-grid{grid-template-columns:1fr}
  .toc{position:static;max-height:none}
  .toc ol{columns:2;column-gap:20px}
  .toc li{break-inside:avoid}
}
@media(max-width:640px){
  .toc ol{columns:1}
  .clause{padding-left:0}
  .clause-n{position:static;display:block;margin-bottom:12px}
  .clause--contact{padding:26px 22px}
  .info{padding:4px 18px}
  .info-r{grid-template-columns:1fr;gap:2px}
  .chero-tel b{font-size:30px}
}

/* ---------- articles (blog posts + wiki) ---------- */
.read-bar{position:fixed;left:0;right:0;top:0;z-index:200;height:3px;pointer-events:none}
.read-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-deep),var(--blue));box-shadow:0 0 12px rgba(77,159,255,.8);transform-origin:left;transform:scaleX(var(--rp,0))}
.ahero{position:relative;padding:calc(var(--bar) + 60px) 0 clamp(50px,6vw,80px);border-bottom:1px solid var(--line);
  background:radial-gradient(900px 520px at 15% 0%,rgba(77,159,255,.13),transparent 60%),var(--void)}
.ahero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(36px,5vw,80px);align-items:center}
.ahero-h1{font-size:clamp(32px,3.8vw,54px);line-height:1.1;max-width:16em;text-wrap:balance}
.ahero-lede{font:400 clamp(17.5px,1.35vw,20px)/1.7 var(--f-d);color:#dfe5ea;margin:0 0 24px}
.ahero-lede a{color:var(--white);text-decoration:underline;text-decoration-color:rgba(77,159,255,.6);text-underline-offset:4px}
.ahero-meta{display:inline-flex;align-items:center;gap:12px;margin:0;font:600 11.5px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ahero-meta .live{background:var(--blue);animation:none;box-shadow:0 0 12px rgba(77,159,255,.8)}
.ahero-cover{margin:0;aspect-ratio:4/5;border-radius:24px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 60px 120px -50px rgba(0,0,0,.95);
  animation:coverIn 1.4s var(--ease) .2s both}
.ahero-cover img{width:100%;height:100%;object-fit:cover;animation:coverZoom 2.4s var(--ease) .2s both}
@keyframes coverIn{from{clip-path:inset(12% 12% 12% 12% round 24px)}to{clip-path:inset(0 0 0 0 round 24px)}}
@keyframes coverZoom{from{transform:scale(1.18)}to{transform:scale(1)}}
.art{padding:clamp(60px,8vw,100px) 0}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(36px,6vw,90px);align-items:start}
.art-side{position:sticky;top:calc(var(--bar) + 24px);display:grid;gap:16px}
.art-side .toc{position:static;max-height:calc(100vh - var(--bar) - 300px)}
.art-call{padding:22px;border-radius:20px;border:1px solid rgba(77,159,255,.4);background:linear-gradient(160deg,rgba(77,159,255,.14),rgba(77,159,255,.03))}
.art-tel{display:block;margin:0 0 16px;font:600 30px/1 var(--f-d);letter-spacing:-.01em;color:var(--white);text-decoration:none;white-space:nowrap}
.btn--block{width:100%;justify-content:center}
.prose{max-width:740px;font-size:17.5px}
.prose h2{font:600 clamp(24px,2.3vw,32px)/1.22 var(--f-d);letter-spacing:-.015em;margin:56px 0 18px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--bar) + 20px)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font:600 clamp(19px,1.6vw,22px)/1.3 var(--f-d);margin:34px 0 10px}
.prose h4{font:600 18px/1.35 var(--f-d);margin:26px 0 8px}
.prose p{color:#c3ccd5;margin:0 0 18px}
.prose strong{color:var(--white);font-weight:600}
.prose a{color:var(--white);text-decoration:underline;text-decoration-color:rgba(77,159,255,.6);text-underline-offset:4px}
@media(hover:hover){.prose a:hover{color:var(--blue)}}
.prose ul,.prose ol{margin:0 0 22px;padding:0;list-style:none}
.prose ol{counter-reset:o}
.prose li{position:relative;padding:10px 0 10px 30px;color:#c3ccd5;border-top:1px solid var(--line)}
.prose li:first-child{border-top:0}
.prose ul>li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:7px;border-left:1.6px solid var(--blue);border-bottom:1.6px solid var(--blue);transform:rotate(-45deg)}
.prose ol>li{counter-increment:o}
.prose ol>li::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;top:13px;font:600 11px/1 var(--f-m);color:var(--blue)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px}
.prose th,.prose td{padding:12px 14px;border:1px solid var(--line-2);text-align:left;vertical-align:top}
.prose th{background:var(--steel);font-family:var(--f-d)}
/* post cards (index + related) */
.more{padding:clamp(70px,9vw,120px) 0;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--void),var(--carbon))}
.more--index{border-top:0}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{position:relative;display:flex;flex-direction:column;padding:14px 14px 70px;border-radius:var(--r);background:linear-gradient(180deg,var(--steel-2),var(--steel));border:1px solid var(--line);transition:border-color .3s var(--ease)}
.post-ph{margin:0 0 20px;aspect-ratio:16/10;border-radius:12px;overflow:hidden}
.post-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.post h2,.post h3{font:600 clamp(18px,1.4vw,20px)/1.35 var(--f-d);letter-spacing:-.01em;margin:0 10px 10px}
.post p{margin:0 10px;color:var(--mute);font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-n{margin:0 10px 10px;font:600 11px/1 var(--f-m);letter-spacing:.14em;color:var(--blue)}
@media(hover:hover){.post:hover{border-color:rgba(77,159,255,.5)}.post:hover .post-ph img{transform:scale(1.06)}.post:hover .card-go{background:var(--blue);color:var(--void);border-color:var(--blue);transform:rotate(-45deg)}}
.post--lead{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:16px;padding:14px 14px 14px}
.post--lead .post-ph{margin:0;aspect-ratio:16/11}
.post--lead .post-body{position:relative;padding:20px 10px 70px}
.post--lead h2{font-size:clamp(24px,2.4vw,34px);line-height:1.2;margin-bottom:16px}
.post--lead p{-webkit-line-clamp:5;font-size:16.5px}
@media(max-width:980px){
  .ahero-grid,.art-grid,.post--lead{grid-template-columns:1fr}
  .ahero-cover{aspect-ratio:16/10;max-width:640px}
  .art-side{position:static}
  .art-side .toc{max-height:none}
  .post-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){.post-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ahero-cover,.ahero-cover img{animation:none}}

/* ---------- HTML sitemap ---------- */
.smap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.smap-col{padding:28px 28px 22px;border-radius:var(--r);background:linear-gradient(180deg,var(--steel-2),var(--steel));border:1px solid var(--line)}
.smap-col--wide{grid-column:1/-1}
.smap-col--wide ul{columns:2;column-gap:40px}
.smap h2{display:flex;align-items:center;justify-content:space-between;font:600 20px/1.3 var(--f-d);margin:0 0 12px}
.smap h2 span{font:600 11px/1 var(--f-m);letter-spacing:.12em;color:var(--blue)}
.smap ul{margin:0;padding:0;list-style:none}
.smap li{break-inside:avoid;border-top:1px solid var(--line)}
.smap a{display:block;padding:11px 0;color:#dfe5ea;text-decoration:none;font-size:15.5px;line-height:1.4;transition:color .25s var(--ease)}
@media(hover:hover){.smap a:hover{color:var(--blue)}}
@media(max-width:980px){.smap{grid-template-columns:1fr 1fr}.smap-col--wide ul{columns:1}}
@media(max-width:640px){.smap{grid-template-columns:1fr}}

/* ---------- 2026-10-09: photography on About + Contact ---------- */
/* about: three-photo strip under the opening statement, the middle one offset */
.strip{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:16px;margin-top:clamp(40px,5vw,64px);align-items:end}
.strip-ph{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5}
.strip-ph:nth-child(2){aspect-ratio:4/4.6;transform:translateY(-28px)}
.strip-ph img,.duo img,.chero-ph img,.why-ph img,.card-bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
@media(hover:hover){.strip-ph:hover img,.duo figure:hover img,.why-ph:hover img{transform:scale(1.05)}}
/* about: who we serve — copy + an overlapping photo pair */
.duo{position:relative;min-height:560px}
.duo figure{position:absolute;margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 50px 100px -40px rgba(0,0,0,.95)}
.duo-a{left:0;top:0;width:72%;aspect-ratio:4/5}
.duo-b{right:0;bottom:0;width:52%;aspect-ratio:1;outline:8px solid var(--void)}
#who .tags{margin:4px 0 18px}
/* contact: photo under the hero copy, balancing the form */
.chero-ph{position:relative;margin:28px 0 0;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:16/10}
.chero-ph figcaption{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:40px;
  background:rgba(7,9,12,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-2);font:600 11px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase}
/* contact: why — tall photo beside a 2-column tile grid (equal heights) */
.why-ph-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px;align-items:stretch}
.why-ph{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);min-height:100%}
.why-list--2{grid-template-columns:1fr 1fr;margin:0}
/* closing cards with a photo behind them */
.lsched-card--ph{position:relative;overflow:hidden;isolation:isolate}
.card-bg{position:absolute;inset:0;z-index:-1}
.card-bg img{opacity:.38;filter:saturate(.8)}
.card-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,17,22,.96) 25%,rgba(13,17,22,.7) 60%,rgba(13,17,22,.88))}
@media(max-width:980px){
  .duo{min-height:0;aspect-ratio:1/1;max-width:620px}
  .why-ph-grid{grid-template-columns:1fr}
  .why-ph{aspect-ratio:16/9;min-height:0}
}
@media(max-width:640px){
  .strip{grid-template-columns:1fr 1fr}
  .strip-ph:nth-child(2){transform:none;aspect-ratio:4/5}
  .strip-ph:nth-child(3){display:none}
  .why-list--2{grid-template-columns:1fr}
}

/* 2026-10-09 review: strip photos share one size; contact hero photo is a full-bleed backdrop */
.strip{align-items:stretch}
.strip-ph,.strip-ph:nth-child(2){aspect-ratio:4/3;transform:none}
.strip{grid-template-columns:repeat(3,1fr)}
.chero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.chero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 30%;animation:coverZoom 2.4s var(--ease) both}
.chero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,9,12,.97) 0%,rgba(7,9,12,.9) 38%,rgba(7,9,12,.55) 70%,rgba(7,9,12,.75) 100%),
             linear-gradient(0deg,var(--void) 0%,rgba(7,9,12,0) 30%),linear-gradient(180deg,rgba(7,9,12,.85) 0%,rgba(7,9,12,0) 22%)}
.chero-glow{z-index:-1}
.chero-form .qs{background:linear-gradient(160deg,rgba(20,26,33,.92),rgba(13,17,22,.94));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media(max-width:980px){.chero-bg::after{background:linear-gradient(180deg,rgba(7,9,12,.8) 0%,rgba(7,9,12,.88) 40%,var(--void) 75%)}}
@media(max-width:640px){.strip-ph:nth-child(3){display:none}.strip{grid-template-columns:1fr 1fr}}