/* Services overview only. Shared header, footer and animation styles stay intact. */
#services-page { overflow-x:clip; }
#services-studio { --svc-gold:var(--brand-gold); --svc-cream:var(--brand-cream); background:var(--brand-burgundy-deep); color:var(--svc-cream); position:relative; }
#services-studio *, #services-studio *::before, #services-studio *::after { box-sizing:border-box; }
#services-studio h1, #services-studio h2, #services-studio h3, #services-studio p { margin:0; }
#services-studio a { color:inherit; text-decoration:none; }
#services-studio a:focus-visible { outline:2px solid var(--svc-gold); outline-offset:6px; }
#services-studio .svc-skip { position:absolute; left:24px; top:96px; z-index:500; padding:12px; background:var(--brand-burgundy); transform:translateY(-250px); }
#services-studio .svc-skip:focus { transform:none; }
#services-studio .svc-opening { height:100svh; min-height:640px; position:relative; display:grid; place-items:center; overflow:hidden; isolation:isolate; background:var(--brand-burgundy); }
#services-studio .svc-gallery { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; gap:2.2vw; z-index:-2; }
#services-studio .svc-tile { flex:none; width:16vw; height:50%; border-radius:6px; background-size:cover; background-position:center; filter:grayscale(1); opacity:.65; }
#services-studio .svc-tile-s { height:24%; width:12vw; }
#services-studio .svc-tile-m { height:42%; }
#services-studio .svc-tile-l { height:62%; }
#services-studio .svc-tile-center { height:83%; width:28vw; opacity:.9; }
#services-studio .svc-opening-copy { text-align:center; padding:90px 5vw; text-shadow:0 2px 18px rgba(0,0,0,.9); }
#services-studio .svc-kicker { display:flex; align-items:center; gap:16px; font:500 11px/1.5 var(--font-body); letter-spacing:.15em; text-transform:uppercase; color:var(--svc-gold); }
#services-studio .svc-opening-copy .svc-kicker { justify-content:center; margin-bottom:24px; }
#services-studio .svc-opening-copy .svc-kicker > span { width:28px; height:1px; background:currentColor; }
#services-studio .svc-opening h1 { font-family:'Podium',var(--font-heading); font-size:clamp(76px,11.5vw,172px); font-weight:400; line-height:.94; letter-spacing:-.045em; text-transform:uppercase; color:var(--svc-cream); }
#services-studio .svc-intro { font-size:clamp(16px,1.6vw,22px); line-height:1.6; margin-top:28px; }
#services-studio .svc-hero-link { display:inline-flex; align-items:center; gap:30px; margin-top:30px; padding-bottom:9px; border-bottom:1px solid rgba(255,216,77,.6); font-size:13px; color:var(--svc-gold); }
#services-studio .svc-hero-meta { position:absolute; bottom:104px; left:5vw; right:5vw; display:flex; justify-content:space-between; font-size:9px; letter-spacing:.12em; color:var(--svc-cream); opacity:.7; }
#services-studio .svc-index { position:sticky; top:80px; z-index:250; display:flex; align-items:center; gap:22px; padding:16px 5vw; background:var(--brand-burgundy-deep); border-bottom:1px solid var(--border-subtle); }
#services-studio .svc-index-label { font-size:9px; letter-spacing:.12em; color:var(--svc-gold); flex-shrink:0; }
#services-studio .svc-index-links { display:flex; gap:10px; flex:1; justify-content:space-between; overflow-x:auto; scrollbar-width:thin; }
#services-studio .svc-index-links a { display:inline-flex; align-items:center; white-space:nowrap; gap:7px; min-height:36px; padding:7px 9px; font-size:11px; border-radius:3px; transition:background .2s,color .2s; }
#services-studio .svc-index-links a:hover, #services-studio .svc-index-links a[aria-current="true"] { background:var(--svc-gold); color:var(--brand-burgundy-deep); }
#services-studio .svc-progress { display:none; }
#services-studio .svc-chapter { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate; border-top:1px solid var(--border-subtle); background:var(--brand-burgundy-deep); scroll-margin-top:140px; }
#services-studio .svc-chapter::before { content:''; position:absolute; inset:0; z-index:-2; background-image:var(--svc-image); background-size:cover; background-position:center; opacity:.24; filter:grayscale(1); }
#services-studio .svc-chapter::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(51,2,13,.98),rgba(51,2,13,.72) 55%,rgba(114,5,31,.48)); }
#services-studio .svc-chapter-inner { width:100%; max-width:1600px; margin:auto; padding:112px 7vw 124px; display:grid; grid-template-columns:1.15fr .85fr; gap:7vw; align-items:center; }
#services-studio .svc-copy h2 { color:var(--svc-cream); font-family:var(--font-heading); font-size:clamp(32px,3.6vw,58px); font-weight:500; line-height:1.08; letter-spacing:-.045em; margin-top:25px; max-width:680px; }
#services-studio .svc-description { color:var(--svc-cream); opacity:.85; font-size:clamp(14px,1.1vw,17px); line-height:1.7; margin-top:22px; max-width:560px; }
#services-studio .svc-deliverables { list-style:none; padding:0; margin:22px 0 26px; }
#services-studio .svc-deliverables li { display:flex; align-items:baseline; gap:12px; padding:10px 0; font-size:13px; line-height:1.5; border-top:1px solid var(--border-subtle); }
#services-studio .svc-point { width:16px; height:13px; flex:none; color:var(--svc-gold); }
#services-studio .svc-deliverables .svc-point { align-self:center; }
#services-studio .svc-detail-link { display:inline-flex; align-items:center; gap:24px; padding:13px 19px; background:var(--svc-gold); color:var(--brand-burgundy); font-weight:600; font-size:12px; border-radius:3px; transition:background .2s,transform .2s; }
#services-studio .svc-detail-link:hover { background:var(--brand-gold-hover); transform:translateY(-2px); }
#services-studio .svc-visual { position:relative; background:linear-gradient(135deg,rgba(114,5,31,.96),rgba(74,3,20,.96)); border:1px solid rgba(255,216,77,.3); padding:clamp(22px,2.6vw,42px); border-radius:10px; box-shadow:16px 22px 60px rgba(0,0,0,.22),5px 6px 0 rgba(255,216,77,.06); }
#services-studio .svc-visual-top { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--svc-gold); font-size:8px; letter-spacing:.13em; }
#services-studio .svc-visual-top svg { width:21px; height:21px; stroke-width:1.3; }
#services-studio .svc-visual h3 { color:var(--svc-cream); font:500 clamp(18px,1.7vw,25px)/1.25 var(--font-heading); letter-spacing:-.025em; margin:20px 0; }
#services-studio .svc-flow { list-style:none; padding:0; margin:0; }
#services-studio .svc-flow li { position:relative; display:flex; gap:14px; align-items:center; padding:11px 13px; margin-bottom:18px; background:rgba(51,2,13,.55); border:1px solid var(--border-subtle); border-radius:4px; font-size:12px; min-height:42px; }
#services-studio .svc-flow li:not(:last-child)::after { content:''; position:absolute; bottom:-19px; left:20px; height:18px; width:1px; background:var(--svc-gold); opacity:.4; }
#services-studio .svc-flow-result { display:flex; align-items:flex-start; gap:12px; color:var(--svc-gold); margin:3px 0 18px; }
#services-studio .svc-flow-result .svc-point { margin-top:2px; }
#services-studio .svc-flow-result p { font-size:11px; line-height:1.5; }
#services-studio .svc-example { padding-top:16px; border-top:1px solid var(--border-subtle); font-size:10px; line-height:1.65; color:var(--svc-cream); opacity:.8; }
#services-studio .svc-example strong { display:block; color:var(--svc-gold); font-size:8px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }
#services-studio .svc-brief { padding:100px 7vw; background:var(--brand-burgundy); border-top:1px solid var(--border-gold); scroll-margin-top:90px; }
#services-studio .svc-brief-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:8vw; margin-top:30px; align-items:end; }
#services-studio .svc-brief h2 { color:var(--svc-cream); font:500 clamp(30px,3.3vw,54px)/1.12 var(--font-heading); letter-spacing:-.04em; }
#services-studio .svc-brief h2 span { color:var(--svc-gold); }
#services-studio .svc-brief-grid p { font-size:14px; line-height:1.8; }
#services-studio .svc-brief-link { display:inline-flex; gap:28px; margin-top:25px; padding-bottom:10px; border-bottom:1px solid var(--svc-gold); font-size:13px; color:var(--svc-gold); }
/* Pin only after JS initializes successfully; standard flow is the fallback. */
#services-studio.svc-enhanced .svc-index { position:fixed; top:auto; bottom:22px; left:5vw; right:5vw; width:auto; padding:10px 20px; border:1px solid rgba(255,216,77,.25); border-radius:6px; background:rgba(51,2,13,.96); box-shadow:0 8px 30px rgba(0,0,0,.2); transition:opacity .2s; }
#services-studio.svc-enhanced .svc-index[data-outside] { opacity:0; pointer-events:none; visibility:hidden; }
#services-studio.svc-enhanced .svc-progress { display:block; position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; }
#services-studio.svc-enhanced .svc-progress span { display:block; height:100%; background:var(--svc-gold); transform:scaleX(0); transform-origin:left; }
#services-studio.svc-enhanced .svc-stage { position:relative; height:100svh; overflow:hidden; isolation:isolate; }
#services-studio.svc-enhanced .svc-intro-stage { position:absolute; inset:0; }
#services-studio.svc-enhanced .svc-opening { position:absolute; inset:0; min-height:0; }
#services-studio.svc-enhanced .svc-chapter { position:absolute; inset:0; height:100%; min-height:0; border:0; }
#services-studio.svc-hero-animated .svc-intro-stage { position:relative; min-height:100svh; isolation:isolate; }
#services-studio.svc-hero-animated .svc-opening { position:absolute; inset:0; height:100svh; min-height:0; }
#services-studio.svc-hero-animated .svc-intro-stage > .svc-chapter { position:relative; z-index:1; min-height:100svh; border:0; }
@media (min-width:992px) and (max-width:1199px) {
    #services-studio .svc-chapter-inner { padding:90px 6vw 100px; gap:5vw; }
    #services-studio .svc-copy h2 { font-size:32px; }
    #services-studio .svc-visual { padding:24px; }
    #services-studio .svc-deliverables { margin:18px 0 22px; }
}
@media (max-width:991px), (max-height:699px) {
    #services-studio .svc-index { top:72px; padding:8px 20px; gap:10px; }
    #services-studio .svc-index-label { display:none; }
    #services-studio .svc-index-links { gap:8px; justify-content:flex-start; }
    #services-studio .svc-opening { min-height:560px; height:100svh; }
    #services-studio .svc-opening h1 { font-size:clamp(58px,13vw,120px); }
    #services-studio .svc-hero-meta { bottom:28px; left:6vw; right:6vw; }
    #services-studio .svc-hero-meta > span:last-child { display:none; }
    #services-studio .svc-chapter-inner { padding:75px 6vw; grid-template-columns:1fr 1fr; gap:5vw; }
    #services-studio .svc-copy h2 { font-size:34px; }
    #services-studio .svc-brief { padding:75px 6vw; }
}
@media (max-width:650px) {
    #services-studio .svc-opening-copy { padding:100px 6vw 110px; width:100%; }
    #services-studio .svc-opening-copy .svc-kicker { font-size:8px; gap:8px; }
    #services-studio .svc-intro { font-size:15px; }
    #services-studio .svc-desktop-break { display:none; }
    #services-studio .svc-tile { width:36vw; }
    #services-studio .svc-tile-center { width:70vw; height:76%; }
    #services-studio .svc-chapter-inner { grid-template-columns:1fr; gap:32px; padding:60px 6vw; }
    #services-studio .svc-copy h2 { font-size:36px; max-width:480px; }
    #services-studio .svc-description { font-size:14px; }
    #services-studio .svc-visual { padding:25px; }
    #services-studio .svc-visual h3 { font-size:23px; }
    #services-studio .svc-flow li { font-size:13px; }
    #services-studio .svc-example, #services-studio .svc-flow-result p { font-size:12px; }
    #services-studio .svc-brief-grid { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:1199px), (hover:none) and (pointer:coarse) {
    #services-studio .svc-index, #services-studio.svc-enhanced .svc-index { display:none; }
}
#services-page .rotate-prompt-overlay { display:none !important; }
@media (prefers-reduced-motion:reduce) {
    #services-studio *, #services-studio *::before, #services-studio *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}