/* Home page: hero, service marquee, "zoom through the layers" story, layers, areas, guides. (Concept 3.) */

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:clip;min-height:clamp(600px,100svh,980px);display:flex;align-items:center;padding:calc(var(--hdr) + 4px) 0 56px}
.hero-bg{position:absolute;inset:0;z-index:-3}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.2}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,var(--g950) 4%,rgba(23,25,29,.55) 50%,rgba(23,25,29,.75))}
.hero-in{width:var(--wrap);margin:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.hero-mark{position:relative;display:grid;place-items:center;padding:14px 0 30px;order:-1}
.hero-mark::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-16px;right:-16px;background:var(--bevel);clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),50% 100%,0 calc(100% - 30px))}
.hero-logo{position:relative;z-index:2;width:clamp(128px,38vw,220px);height:auto;overflow:visible;filter:drop-shadow(0 22px 28px rgba(23,25,29,.45))}
.hero-logo .dbs-ly{transform-box:fill-box;transform-origin:center}
.hero-rings{position:absolute;z-index:1;width:clamp(128px,38vw,220px);height:auto;overflow:visible;pointer-events:none}
.hero-rings polygon{fill:none;stroke:var(--g950);stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.hero-rings .f1{transform:scale(1.12);opacity:.35}
.hero-rings .f2{transform:scale(1.25);opacity:.18}
.hero-rings .ping{opacity:0;animation:hping 5.4s cubic-bezier(.2,.7,.3,1) infinite}
.hero-rings .ping:nth-of-type(4){animation-delay:1.8s}
.hero-rings .ping:nth-of-type(5){animation-delay:3.6s}
@keyframes hping{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
.hero-copy{position:relative;z-index:2}
.hero-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;font-weight:500;color:var(--silver)}
.hero-kicker b{font:800 1rem/1 var(--fd);text-transform:uppercase;letter-spacing:.05em;color:var(--g950);background:var(--bevel);padding:7px 10px 6px;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.hero h1{margin-bottom:.35em}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.hero h1 .line-in{display:inline-block}
.hero .lead{margin-bottom:26px}
.hero .facts{margin-top:26px}
.hero-cue{position:absolute;left:50%;bottom:16px;translate:-50% 0;display:none;align-items:center;gap:10px;font:700 .95rem/1 var(--fd);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.hero-cue i{width:2px;height:28px;background:linear-gradient(var(--blue) 50%,transparent 50%);background-size:2px 12px;animation:cue 1.2s linear infinite}
@keyframes cue{to{background-position:0 12px}}
@media (min-width:900px){
  .hero{padding-bottom:64px}
  .hero::after{background:linear-gradient(90deg,var(--g950) 25%,rgba(23,25,29,.6) 60%,rgba(23,25,29,.3)),linear-gradient(0deg,var(--g950),transparent 30%)}
  .hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:40px}
  .hero-mark{order:0;align-self:stretch;padding:36px 0}
  .hero-mark::before{--ext:calc(max(16px,(100vw - 1240px) / 2) + 20px);top:-12px;bottom:-24px;left:24px;right:calc(-1 * var(--ext));clip-path:polygon(72px 0,100% 0,100% 100%,72px 100%,0 50%);background:linear-gradient(90deg,var(--blue) calc(50% - (24px + var(--ext)) / 2),var(--blue2) 0)}
  .hero-logo,.hero-rings{width:min(100%,400px)}
  .hero-cue{display:flex}
}

/* ---------- marquee band ---------- */
.mq{position:relative;padding:34px 0 30px;background:var(--g950)}
.mq-band{background:var(--blue);rotate:-2deg;scale:1.05;padding:16px 0;overflow:hidden}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq-set{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.mq-set li{display:flex;align-items:center;gap:26px;padding-right:26px;font:800 clamp(1.7rem,4.4vw,3.2rem)/1 var(--fd);text-transform:uppercase;color:var(--g950);white-space:nowrap}
.mq-set li::after{content:"";width:.6em;height:.66em;background:linear-gradient(90deg,var(--g950) 50%,#454C57 50%);clip-path:polygon(50% 0,100% 20%,100% 62%,50% 100%,0 62%,0 20%)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{width:auto;flex-wrap:wrap}.mq-set[aria-hidden]{display:none}.mq-set{flex-wrap:wrap;justify-content:center;padding:0 16px;row-gap:10px}.mq-band{rotate:0deg;scale:1}}

/* ---------- signature story: zoom through the layers ---------- */
.story{position:relative;background:var(--g950)}
.story-pin{width:var(--wrap);margin:auto;padding:clamp(64px,9vw,120px) 0;display:grid;gap:36px}
.story-stage{position:relative;overflow:hidden;aspect-ratio:1/1;max-height:560px;width:100%;margin:auto;background:var(--g950)}
.story-svg{width:100%;height:100%}
.st-lb{font:800 14px var(--fd);letter-spacing:1.4px;fill:var(--g950)}
.st-icons{stroke:var(--g950)}
.story-count,.story-prog{display:none}
.story-copy{position:relative}
.story-h{font-size:clamp(2rem,5vw,3.6rem);max-width:14ch}
.sp-wrap{display:grid;gap:34px}
.sp-n{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:800 1.05rem/1 var(--fd);text-transform:uppercase;letter-spacing:.05em;color:var(--blue)}
.sp-n b{color:var(--g950);background:var(--bevel);padding:6px 9px 5px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.sp h3{font-size:clamp(2.1rem,4.6vw,3.6rem);margin-bottom:.25em}
.sp p{max-width:44ch;margin-bottom:14px}
.sp-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sp-list li{padding:7px 12px;font:600 .98rem/1.2 var(--fb);color:var(--white);background:linear-gradient(90deg,#30353D 50%,#262A30 50%);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.sp-core h3{color:var(--blue)}
.sp-core .btn{margin-top:6px}
@media (min-width:900px){.story-pin{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px}}

/* pinned mode (story.js adds .is-pinned once GSAP is running) */
.story.is-pinned .story-pin{width:auto;height:100vh;height:100svh;max-height:1100px;padding:0;gap:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.story.is-pinned .story-stage{aspect-ratio:auto;max-height:none;height:100%;margin:0;padding:calc(var(--hdr) - 8px) 0 34px}
.story.is-pinned .story-svg{overflow:visible}
.story.is-pinned .story-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--bevel);opacity:.5}
.story.is-pinned .st-lb{fill:var(--silver)}
.story.is-pinned .st-icons{stroke:var(--silver)}
.story.is-pinned .story-copy{padding:16px 16px 14px;overflow:hidden}
.story.is-pinned .story-h{font-size:clamp(1.55rem,6.4vw,3.4rem);margin-bottom:12px}
.story.is-pinned .sp-wrap{gap:0}
.story.is-pinned .sp{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(22px);transition:opacity .2s,transform .3s var(--out),visibility 0s .3s}
.story.is-pinned .sp.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s .04s,transform .55s .04s var(--pop),visibility 0s}
.story.is-pinned .sp-list li{opacity:0;transform:translateX(-14px) scale(.92);transition:opacity .2s,transform .3s}
.story.is-pinned .sp.on .sp-list li{opacity:1;transform:none;transition:opacity .3s,transform .5s var(--pop);transition-delay:calc(.1s + var(--i,0) * .06s)}
.story.is-pinned .sp h3{font-size:clamp(1.9rem,7.6vw,3.6rem)}
.story.is-pinned .sp-n b{display:none}
.story.is-pinned .sp p{font-size:1rem;line-height:1.5;margin-bottom:12px}
.story.is-pinned .story-count{display:flex;position:absolute;left:16px;bottom:30px;z-index:2;align-items:baseline;gap:2px;font:800 2.6rem/1 var(--fd);color:var(--white)}
.story-count{padding:8px 12px 6px;background:rgba(23,25,29,.88);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.story.is-pinned .story-stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;background:linear-gradient(rgba(23,25,29,0),rgba(23,25,29,.92) 70%);pointer-events:none}
.story-count b{display:inline-block;color:var(--blue);min-width:.6em}
.story-count small{font-size:1.1rem;color:var(--muted)}
.story-count.bump b{animation:bump .5s var(--pop)}
@keyframes bump{0%{transform:translateY(60%) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.story.is-pinned .story-prog{display:flex;position:absolute;left:16px;right:16px;bottom:14px;z-index:2;gap:6px}
.story-prog i{flex:1;height:5px;background:#30353D;clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);transition:background .3s}
.story-prog i.on{background:var(--bevel)}
.story-prog i:last-child{flex:.35}
@media (max-width:899px){.story.is-pinned .story-h{display:none}.story.is-pinned .story-copy::before{content:"Zoom through the layers";display:block;margin-bottom:10px;font:800 1rem/1 var(--fd);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}}
@media (min-width:900px){
  .story.is-pinned .story-pin{grid-template-rows:none;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
  .story.is-pinned .story-stage::after{left:auto;top:0;width:3px;height:auto;background:linear-gradient(var(--blue) 50%,var(--blue2) 50%)}
  .story.is-pinned .story-copy{display:flex;flex-direction:column;justify-content:center;padding:96px max(24px,(100vw - 1240px) / 2) 64px clamp(32px,4vw,64px)}
  .story.is-pinned .story-stage{padding:calc(var(--hdr) + 8px) 0 24px}
  .story.is-pinned .story-count{left:max(24px,(100vw - 1240px) / 2);top:calc(var(--hdr) + 16px);bottom:auto;font-size:4rem}
  .story.is-pinned .story-count small{font-size:1.5rem}
  .story.is-pinned .story-prog{left:max(24px,(100vw - 1240px) / 2);right:auto;width:260px;bottom:32px}
  .story.is-pinned .sp p{font-size:1.1rem}
}

/* ---------- layers overview (all 13 services, each linking to its page) ---------- */
.lay-grid{display:grid;gap:18px;perspective:1200px}
.lay{display:flex;flex-direction:column;transform-style:preserve-3d}
.lay-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.lay-n{margin:0;font:800 1.05rem/1 var(--fd);text-transform:uppercase;letter-spacing:.05em;color:var(--blue)}
.lay-mini{width:64px;height:auto;flex:none}
.lay h3{font-size:clamp(2rem,3.6vw,2.8rem)}
.lay-list{list-style:none;margin:6px 0 18px;padding:0;display:grid}
.lay-list a{display:flex;align-items:center;gap:10px;min-height:48px;border-top:1px solid rgba(195,204,213,.14);color:var(--white);text-decoration:none;font-weight:500;line-height:1.25}
.lay-list a span{flex:1}
.lay-list a .lay-ic{width:20px;height:20px;color:var(--silver)}
.lay-list a .ic:last-child{width:18px;height:18px;color:var(--blue);transition:transform .35s var(--pop)}
.lay-list a:hover{color:var(--blue)}
.lay-list a:hover .ic:last-child{transform:translateX(5px)}
.lay .link-arrow{margin-top:auto}
@media (min-width:760px){.lay-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media (min-width:1180px){.lay-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lay-more{margin-top:32px}

/* ---------- areas (each area links to its page) ---------- */
.areas-in{display:grid;gap:40px}
.areas address{display:flex;gap:12px;align-items:flex-start;margin-top:22px;color:var(--white)}
.areas address .ic{color:var(--blue);margin-top:3px}
.area-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.area-list a{--c:12px;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:76px;height:100%;padding:16px 40px 14px 16px;font:800 clamp(1.35rem,3.4vw,2rem)/1 var(--fd);text-transform:uppercase;color:var(--white);text-decoration:none;transition:color .2s}
.area-list a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#343A42 50%,#2C3036 50%);clip-path:var(--chf);transition:filter .25s}
.area-list a .ic{position:absolute;right:12px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--blue);transition:transform .35s var(--pop)}
.area-list a:hover{color:var(--blue)}
.area-list a:hover .ic{transform:translateX(4px)}
.area-list small{display:block;margin-top:6px;font:600 .88rem/1.2 var(--fb);text-transform:none;color:var(--g950)}
.area-list .base a{color:var(--g950)}
.area-list .base a::before{background:var(--bevel)}
.area-list .base a .ic{color:var(--g950)}
.area-list .all a{color:var(--blue)}
.area-list .all a::before{background:transparent;box-shadow:inset 0 0 0 2px #454C57;clip-path:var(--chf)}
.areas-note{margin-top:18px;color:var(--muted)}
@media (min-width:900px){.areas-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:72px}.area-list{gap:12px}.area-list a{min-height:88px;padding:22px 44px 20px 20px}}

/* ---------- guides teaser ---------- */
.guides .sec-head .lead a{white-space:nowrap}