/* Editorial subpages: same graphite surfaces, luminous brand edge and type scale
   as the homepage. Scoped to SSR service, guide and project routes. */
.subpage-skip{position:absolute;left:16px;top:-100px;z-index:110;padding:12px 18px;background:#fff;color:#10141b;border:2px solid #aa35ff;border-radius:12px}
.subpage-skip:focus{top:16px}
.subpage-site-header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1240px,calc(100% - 48px));min-height:76px;margin:18px auto 0;padding:11px 12px 11px 19px;border:1px solid #ffffff29;border-radius:20px;background:#10141bf5;box-shadow:0 20px 55px #0004}
.subpage-site-header::after{content:"";position:absolute;inset:auto 18px 0;height:2px;background:linear-gradient(90deg,#ff4b0a,#ff0a8a,#aa35ff,#28d9f7);opacity:.85}
.subpage-brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.subpage-brand img{width:42px;height:42px;object-fit:contain}
.subpage-brand>span{display:grid;gap:5px}
.subpage-brand strong{font-size:.76rem;line-height:1;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.subpage-brand strong span{color:#da9afa}
.subpage-brand small{font:700 .52rem/1.1 ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase;color:#aeb8c7;white-space:nowrap}
.subpage-site-header nav{display:flex;align-items:center;gap:clamp(12px,2vw,32px)}
.subpage-site-header nav a{font-size:.78rem;font-weight:650;text-decoration:none;color:#d7dbe2}
.subpage-site-header nav a:hover{color:#fff}
.subpage-site-header .subpage-header-cta{display:inline-flex;align-items:center;gap:16px;min-height:49px;padding:0 17px;border-radius:11px;background:#f7f6f1;color:#10141b;box-shadow:0 3px 0 #aa35ff}
.subpage-site-header .subpage-header-cta:hover{color:#10141b;background:#fff}
.subpage-main.seo-case{position:relative;width:min(1240px,calc(100% - 48px));max-width:none;margin:0 auto;padding:46px 0 90px}
.subpage-main::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:0;left:-15vw;width:95vw;height:650px;background:radial-gradient(ellipse at 70% 18%,#aa35ff12,transparent 53%),radial-gradient(ellipse at 15% 42%,#28d9f70d,transparent 42%)}
.subpage-breadcrumb{display:flex;align-items:center;gap:11px;min-height:32px;color:#9ca7b8;font:700 .68rem/1.5 ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase}
.subpage-breadcrumb a{text-decoration:none;color:#b4c0ce}
.subpage-breadcrumb a:hover{color:#fff}
.subpage-breadcrumb span{color:#d26af8}
.subpage-main .subpage-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:clamp(30px,5vw,82px);align-items:center;margin:42px 0 0;padding:clamp(36px,5vw,72px) 0 80px;border-bottom:1px solid #ffffff24}
.subpage-main .subpage-project-hero{grid-template-columns:minmax(0,940px)}
.subpage-kicker{display:flex;align-items:center;gap:12px;margin:0 0 22px!important;color:#d8a6f7;font:750 .68rem/1.5 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.subpage-kicker::before{content:"";flex:0 0 26px;height:2px;background:linear-gradient(90deg,#ff0a8a,#aa35ff,#28d9f7)}
.subpage-main .subpage-hero h1{max-width:18ch;margin:0;font-size:clamp(2.6rem,5vw,5.15rem);font-weight:680;line-height:1.04;letter-spacing:-.055em;text-wrap:balance;color:#f7f6f1}
.subpage-main .subpage-hero h1::after{content:"";display:block;width:88px;height:4px;margin:25px 0 0;border-radius:4px;background:linear-gradient(90deg,#ff0a8a,#aa35ff,#28d9f7)}
.subpage-main .subpage-lead{max-width:64ch;margin:24px 0 0;color:#c6ceda;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.75}
.subpage-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}
.subpage-button{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:53px;padding:12px 18px;border:1px solid #ffffff42;border-radius:11px;text-decoration:none!important;font-size:.84rem;font-weight:680;line-height:1.25;transition:transform .2s,border-color .2s,background .2s}
.subpage-button:hover{transform:translateY(-2px)}
.subpage-button-primary{background:#f7f6f1;color:#10141b!important;border-color:#f7f6f1;box-shadow:0 3px 0 #aa35ff}
.subpage-button-primary:hover{background:#fff;border-color:#fff}
.subpage-button-secondary{background:#ffffff0b;color:#f7f6f1!important}
.subpage-button-secondary:hover{border-color:#dba3f7;background:#ffffff16}
.subpage-hero-visual{position:relative;min-width:0;margin:0;padding:12px;border:1px solid #8b63a36b;border-radius:22px;background:linear-gradient(135deg,#352338,#14212b 72%);box-shadow:0 24px 70px #0005}
.subpage-hero-visual::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#ff4b0a,#ff0a8a,#aa35ff,#28d9f7);border-radius:22px 22px 0 0}
.subpage-hero-visual img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;border-radius:13px;background:#0b1017}
.subpage-hero-visual figcaption{padding:13px 5px 4px;color:#d6dce5;font:700 .65rem/1.45 ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase}
.subpage-story{margin:44px 0 90px}
.subpage-main .subpage-story-section{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(16px,3vw,36px);margin:0;padding:35px 0;border-top:1px solid #ffffff27}
.subpage-section-number{color:#d494f5;font:750 .78rem/1.7 ui-monospace,monospace;letter-spacing:.12em}
.subpage-main .subpage-story-section>div{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1fr);gap:0 clamp(20px,4vw,70px);align-items:start}
.subpage-main .subpage-story-section h2{grid-column:1;grid-row:1/span 8;max-width:16ch;margin:0;color:#f7f6f1;font-size:clamp(1.55rem,2.4vw,2.55rem);line-height:1.16;letter-spacing:-.035em}
.subpage-main .subpage-story-section p,.subpage-main .subpage-story-section ul{grid-column:2;max-width:68ch;margin:0 0 15px;color:#c5ccd6;font-size:1rem;line-height:1.75}
.subpage-main .subpage-story-section li{margin:0 0 10px;padding-left:3px}
.subpage-main .subpage-story-section li::marker{color:#b468e8}
.subpage-main .subpage-related{margin:70px 0;padding:0;border:0;background:none}
.subpage-main .subpage-related h2,.subpage-main .subpage-faq h2{margin:0 0 27px;font-size:clamp(1.9rem,3vw,3.2rem);line-height:1.1;letter-spacing:-.045em}
.subpage-main .subpage-related ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:0;padding:0;list-style:none}
.subpage-main .subpage-related li{min-width:0;margin:0;padding:0;background:none}
.subpage-related-card{display:flex;flex-direction:column;height:100%;min-height:195px;overflow:hidden;border:1px solid #7051778a;border-radius:17px;background:linear-gradient(135deg,#231c2d,#161e29 78%);color:#fff;text-decoration:none!important;transition:transform .2s,border-color .2s}
.subpage-related-card:hover{transform:translateY(-3px);border-color:#c689ec}
.seo-service .subpage-related-card>img{display:block;width:100%;height:190px;max-height:none;object-fit:contain;margin:0;border-radius:0;background:#0b1017}
.subpage-related-copy{display:grid;gap:12px;position:relative;flex:1;padding:22px}
.subpage-related-copy strong{max-width:24ch;font-size:1.16rem;line-height:1.2;letter-spacing:-.02em}
.subpage-related-copy>span{color:#c4cbd6;font-size:.84rem;line-height:1.55}
.subpage-related-copy b{justify-self:end;font-size:1.3rem;font-weight:400;color:#cf8ff0}
.subpage-related-services .subpage-related-card{min-height:130px}
.subpage-faq{margin:70px 0;padding:40px 0;border-top:1px solid #ffffff27}
.subpage-main .subpage-faq details{margin:0;padding:20px 0;border:0;border-bottom:1px solid #ffffff30;border-radius:0}
.subpage-main .subpage-faq summary{position:relative;padding-right:38px;font-size:1rem;line-height:1.45;list-style:none}
.subpage-main .subpage-faq summary::-webkit-details-marker{display:none}
.subpage-main .subpage-faq summary::after{content:"+";position:absolute;right:4px;top:0;font-size:1.4rem;line-height:1;color:#d78df8}
.subpage-main .subpage-faq details[open] summary::after{content:"−"}
.subpage-main .subpage-faq details p{max-width:75ch;margin:17px 0 0;color:#c6ceda;line-height:1.7}
.subpage-main .subpage-contact-band{display:flex;align-items:end;justify-content:space-between;gap:25px;margin:80px 0 0;padding:clamp(28px,4vw,52px);border:1px solid #aa6ccc8a;border-radius:21px;background:radial-gradient(circle at 90% 0,#aa35ff23,transparent 50%),linear-gradient(135deg,#20202e,#141d27)}
.subpage-contact-band h2{margin:0 0 12px;font-size:clamp(2rem,3vw,3.25rem);line-height:1.1;letter-spacing:-.04em}
.subpage-contact-band p:not(.subpage-kicker){max-width:65ch;margin:0;color:#c5cdda;line-height:1.65}
.subpage-contact-band .subpage-button{flex:0 0 auto}
.subpage-site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:17px 35px;min-height:100px;padding:25px max(24px,calc((100vw - 1240px)/2));border-top:1px solid #ffffff28;background:#10141b}
.subpage-site-footer>a{font-size:.83rem;font-weight:800;letter-spacing:.08em;text-decoration:none}
.subpage-site-footer p{margin:0;color:#a7b2c0;font:700 .61rem/1.5 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.subpage-site-footer nav{display:flex;flex-wrap:wrap;gap:10px 20px}
.subpage-site-footer nav a{color:#c3cbd5;font-size:.72rem;text-decoration:none}
.subpage-site-footer a:hover{color:#e4b3ff}
/* Project detail uses the homepage's existing branded header and footer. */
.seo-project.subpage-main{padding-top:145px}
.seo-project .subpage-hero{min-height:350px;max-width:1000px}
.seo-project .seo-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:34px 0 70px}
.seo-project .seo-media figure{overflow:hidden;border:1px solid #ffffff27;border-radius:17px;background:#181e29}
.seo-project .seo-media figure:first-child{grid-column:1/-1}
.seo-project .seo-media img{width:100%;height:min(48vw,550px);max-height:none;object-fit:contain;background:#0b1017}
.seo-project .seo-media figure:not(:first-child) img{height:300px}
.seo-project .seo-media figcaption{padding:12px 17px;color:#bac3d0;font-size:.76rem;line-height:1.5}
.seo-project .subpage-tags{margin:0 0 55px;color:#dca5f4;font:700 .7rem/1.8 ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase}
.seo-project .subpage-sources{margin:30px 0 70px;padding:25px;border:1px solid #ffffff27;border-radius:14px}
.seo-project .subpage-sources h2{margin:0 0 12px;font-size:1rem}
.seo-project .subpage-sources ul{margin:0;padding-left:20px}
.seo-project .subpage-notice{margin:25px 0;padding:18px 22px;border-left:3px solid #d991f8;background:#ffffff0d}
.seo-project .subpage-related a{display:block;min-height:82px;padding:22px;border:1px solid #7051778a;border-radius:13px;background:linear-gradient(135deg,#231c2d,#161e29);text-decoration:none}
.seo-project .subpage-related a:hover{border-color:#c689ec}
/* A guide is reading-first, but uses the same hero, rhythm and contact band. */
.seo-guide .subpage-guide-story{max-width:1040px;margin:45px auto 70px;counter-reset:guide}
.seo-guide .subpage-guide-story>p:first-child{max-width:70ch;padding:30px 35px;margin:0 0 35px;border-left:3px solid #b972df;background:#ffffff0b;color:#e0e5ed;font-size:1.1rem;line-height:1.75}
.seo-guide .subpage-guide-story section{position:relative;display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:10px 48px;padding:36px 0;margin:0;border-top:1px solid #ffffff25;counter-increment:guide}
.seo-guide .subpage-guide-story section::before{content:counter(guide,decimal-leading-zero);position:absolute;top:38px;left:0;color:#d494f5;font:750 .7rem/1 ui-monospace,monospace}
.seo-guide .subpage-guide-story section h2{grid-column:1;grid-row:1/span 7;margin:0 0 0 45px;font-size:clamp(1.5rem,2.3vw,2.4rem);line-height:1.15;letter-spacing:-.03em}
.seo-guide .subpage-guide-story section p,.seo-guide .subpage-guide-story section ul{grid-column:2;margin:0 0 13px;color:#c5ccd6;line-height:1.75}
.seo-guide .subpage-guide-story section a{color:#e0adfb}
@media(max-width:980px){
  .subpage-main .subpage-hero{grid-template-columns:1fr;gap:30px}
  .subpage-hero-visual img{height:auto;max-height:460px}
  .subpage-main .subpage-related ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .subpage-main .subpage-story-section>div{grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}
}
@media(max-width:700px){
  .subpage-site-header{width:calc(100% - 24px);margin-top:12px;padding:10px 12px;gap:10px;min-height:65px}
  .subpage-brand img{width:33px;height:33px}
  .subpage-brand strong{font-size:.61rem}
  .subpage-brand small{font-size:.4rem;letter-spacing:.07em}
  .subpage-site-header nav>a:not(.subpage-header-cta){display:none}
  .subpage-site-header .subpage-header-cta{min-height:39px;padding:0 10px;font-size:.68rem;gap:6px}
  .subpage-main.seo-case{width:calc(100% - 32px);padding:20px 0 60px}
  .seo-project.subpage-main{padding-top:110px}
  .subpage-main .subpage-hero{margin-top:8px;padding:34px 0 50px}
  .subpage-main .subpage-hero h1{font-size:clamp(2.35rem,9vw,3.7rem)}
  .subpage-hero-visual{padding:8px}
  .subpage-hero-visual img{height:auto;min-height:0;max-height:420px}
  .subpage-main .subpage-story-section{grid-template-columns:1fr;gap:12px;padding:27px 0}
  .subpage-main .subpage-story-section>div{display:block}
  .subpage-main .subpage-story-section h2{max-width:none;margin:0 0 17px}
  .subpage-main .subpage-related ul{grid-template-columns:1fr}
  .seo-service .subpage-related-card>img{height:210px}
  .subpage-main .subpage-contact-band{display:block;padding:27px;margin-top:55px}
  .subpage-contact-band .subpage-button{margin-top:25px;width:100%}
  .seo-project .seo-media{grid-template-columns:1fr}
  .seo-project .seo-media figure:first-child{grid-column:auto}
  .seo-project .seo-media img,.seo-project .seo-media figure:not(:first-child) img{height:auto;max-height:420px}
  .seo-guide .subpage-guide-story>p:first-child{padding:20px}
  .seo-guide .subpage-guide-story section{display:block;padding:30px 0}
  .seo-guide .subpage-guide-story section h2{margin:0 0 18px 36px}
  .subpage-site-footer{display:block;padding:28px 18px}
  .subpage-site-footer p{margin:10px 0 20px}
}
@media(max-width:380px){
  .subpage-brand>span{display:none}
  .subpage-site-header .subpage-header-cta{font-size:.63rem}
  .subpage-actions .subpage-button{width:100%}
}
@media(prefers-reduced-motion:reduce){.subpage-button,.subpage-related-card{transition:none}}
