/* pages.css: shared styles for generated pages (services, hub, funnel). Tokens come from shared-chrome.css. */
body{background:var(--void);}
p{margin:0;font-size:1.1rem;line-height:1.65;color:var(--bone);}
h1,h2,h3{margin:0;font-weight:600;text-transform:uppercase;letter-spacing:-0.02em;color:var(--bone-bright);}
h1{font-size:clamp(2.6rem,6.4vw,6.2rem);line-height:0.92;letter-spacing:-0.04em;}
h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:0.98;letter-spacing:-0.03em;}
h3{font-size:clamp(1rem,2.2vw,1.3rem);line-height:1.2;}
img{display:block;max-width:100%;}
main{position:relative;z-index:1;}

.pg-sec{padding:96px 5%;border-top:1px solid rgba(var(--border-rgb),0.14);}
.pg-sec:first-child{border-top:0;}
.pg-in{max-width:90%;margin:0 auto;}
.pg-head{display:grid;grid-template-columns:1fr 1fr;gap:28px 72px;align-items:end;margin-bottom:48px;}
.pg-head p{color:var(--bone-bright);opacity:0.7;}

.crumbs{display:flex;gap:10px;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);margin-bottom:28px;}
.crumbs a{color:var(--dim);transition:color .25s ease;}
.crumbs a:hover{color:var(--bone-bright);}

.pg-hero{padding:180px 5% 88px;position:relative;overflow:hidden;}
.pg-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 85% 10%,color-mix(in srgb,var(--violet) 18%,transparent) 0%,transparent 60%);pointer-events:none;}
.pg-hero .pg-in{position:relative;}
.pg-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:end;}
.pg-sum{margin-top:28px;font-size:1.2rem;line-height:1.55;color:var(--bone-bright);}
.pg-price{display:flex;flex-direction:column;gap:6px;padding:22px 0;border-top:1px solid rgba(var(--border-rgb),0.25);border-bottom:1px solid rgba(var(--border-rgb),0.25);margin-bottom:28px;}
.pg-price .lbl{font-size:0.7rem;}
.pg-price b{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:600;letter-spacing:-0.03em;color:var(--bone-bright);line-height:1;}
.pg-price small{font-size:0.85rem;color:var(--dim);}
.pg-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.pg-tel{font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);transition:color .25s ease;}
.pg-tel:hover{color:var(--bone-bright);}

.inc{list-style:none;border-top:1px solid rgba(var(--border-rgb),0.2);}
.inc li{display:grid;grid-template-columns:.4fr 1fr;gap:0 40px;padding:26px 0;border-bottom:1px solid rgba(var(--border-rgb),0.2);align-items:baseline;}
.inc li p{color:var(--bone-bright);}

.work{display:grid;grid-template-columns:repeat(12,1fr);gap:48px 32px;}
.shot{grid-column:span 12;margin:0;}
.shot-desktop{grid-column:span 6;}
.shot-phone{grid-column:span 3;}
.shot-frame{border:1px solid rgba(var(--border-rgb),0.18);overflow:hidden;background:var(--card);}
.shot-frame img{width:100%;height:auto;}
.phone{position:relative;width:100%;max-width:300px;aspect-ratio:482.04/974;margin:0 auto;}
.phone-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;}
.phone-shot{position:absolute;left:5.2545%;top:1.9456%;width:89.4783%;height:95.8931%;object-fit:cover;object-position:top;border-radius:2em;z-index:1;}
.shot figcaption{margin-top:16px;display:flex;flex-direction:column;gap:6px;}
.shot-k{font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--violet);}
.shot-t{font-size:1rem;line-height:1.5;color:var(--bone-bright);}
.shot-s{font-size:0.75rem;color:var(--dim);}
.shot-l{font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);transition:color .25s ease;}
.shot-l:hover{color:var(--bone-bright);}

.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(var(--border-rgb),0.2);}
.steps li{padding:32px 32px 0 0;}
.steps .gn{display:block;font-size:clamp(3rem,6vw,5rem);font-weight:200;line-height:1;letter-spacing:-0.03em;color:rgba(var(--border-rgb),0.16);}
.steps h3{margin-top:18px;}
.steps p{margin-top:12px;font-size:1rem;}

.faq{border-top:1px solid rgba(var(--border-rgb),0.2);}
.faq details{border-bottom:1px solid rgba(var(--border-rgb),0.2);padding:24px 0;}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;font-size:1.15rem;font-weight:500;color:var(--bone-bright);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--violet);font-weight:300;}
.faq details[open] summary::after{content:"\2212";}
.faq details p{margin-top:14px;max-width:none;}

.svc-list{list-style:none;border-top:1px solid rgba(var(--border-rgb),0.2);}
.svc-list a{display:grid;grid-template-columns:.5fr 1fr auto;gap:0 40px;align-items:center;padding:30px 0;border-bottom:1px solid rgba(var(--border-rgb),0.2);position:relative;}
.svc-list a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--violet);transition:width .7s cubic-bezier(.22,1,.36,1);}
.svc-list a:hover::after{width:100%;}
.svc-list h3{transition:transform .5s cubic-bezier(.22,1,.36,1);}
.svc-list a:hover h3{transform:translateX(10px);}
.svc-list p{color:var(--bone-bright);font-size:1rem;}
.svc-list .arr{color:var(--violet);font-size:1.3rem;}

.pg-close{padding:120px 5%;border-top:1px solid rgba(var(--border-rgb),0.14);}
.pg-close h2{font-size:clamp(2.4rem,6vw,4.6rem);}
.pg-close .btn{margin-top:40px;}

@media (max-width:900px){
  .pg-sec{padding:64px 5%;}
  .pg-in{max-width:100%;}
  .pg-hero{padding:130px 5% 56px;}
  .pg-hero-grid,.pg-head{grid-template-columns:1fr;gap:28px;}
  .inc li{grid-template-columns:1fr;gap:6px;padding:20px 0;}
  .shot-desktop{grid-column:span 12;}
  .shot-phone{grid-column:span 6;}
  .steps{grid-template-columns:1fr;}
  .steps li{padding:26px 0 0;}
  .svc-list a{grid-template-columns:1fr auto;gap:8px 16px;}
  .svc-list a p{grid-column:1 / -1;grid-row:2;}
  .pg-close{padding:72px 5%;}
}