/* it-governance.net — homepage-only CD components (shared layer: cd-site.css) */

/* ---------- Hero ---------- */
.cd-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 30px;background:#000;overflow:hidden;isolation:isolate}
.cd-ribbon{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
.cd-hero-inner{position:relative;z-index:2;padding-bottom:clamp(36px,5vh,64px)}
.cd-hero-people{display:flex;align-items:center;margin-bottom:clamp(24px,3.6vh,40px);animation:cd-rise .8s cubic-bezier(.2,.8,.2,1) both}
.cd-hero-portrait{position:relative;z-index:1;flex:none;width:clamp(84px,8.4vw,124px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:52% 30%;border:3px solid #000;box-shadow:0 0 0 2px #fff}
.cd-hero-team{--w:clamp(200px,18vw,270px);position:relative;flex:none;width:var(--w);height:calc(var(--w) * .206);margin-left:-12px;overflow:hidden}
.cd-hero-team img{position:absolute;left:0;top:calc(var(--w) * -.106);width:100%;max-width:none;height:auto}
.cd-hero-title{margin:0;font:700 clamp(52px,7.6vw,132px)/.92 var(--cd-font);letter-spacing:-.03em;text-wrap:balance;animation:cd-rise .9s .08s cubic-bezier(.2,.8,.2,1) both}
.cd-hero-title .cd-hl{display:block}
.cd-hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-top:clamp(24px,3.4vh,40px);animation:cd-rise .9s .16s cubic-bezier(.2,.8,.2,1) both}
.cd-hero-lead{margin:0;max-width:44ch;color:rgba(255,255,255,.84);font-size:clamp(17px,1.35vw,21px);line-height:1.5}
.cd-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Connector: two pill tags joined by a line */
.cd-connector{display:flex;align-items:center;margin-top:clamp(28px,4.2vh,48px);animation:cd-rise .9s .24s cubic-bezier(.2,.8,.2,1) both}
.cd-tag{flex:none;display:inline-flex;align-items:center;gap:14px;margin:0;padding:5px 5px 5px 22px;border-radius:999px;background:#fff;color:#000;font-size:16px;line-height:1.2}
.cd-tag span{color:#2b2b2b}
.cd-tag b{padding:11px 20px;border-radius:999px;background:var(--cd-yellow);font-weight:500}
.cd-connector-line{flex:1 1 auto;min-width:40px;height:3px;background:#fff}

/* Client logo strip */
.cd .hero-clients{position:relative;z-index:2;padding:22px var(--pad) 0;border-top:0;background:linear-gradient(var(--cd-line),var(--cd-line)) var(--pad) 0/calc(100% - 2 * var(--pad)) 1px no-repeat}
.cd .hero-clients-label{color:var(--cd-yellow);font:500 13px/1 var(--cd-font);letter-spacing:.08em}
.cd .hero-client-group img{opacity:.75}

@keyframes cd-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- White cards (services, layers) ---------- */
.cd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
.cd-card-col{display:flex;flex-direction:column;min-width:0}
.cd-card-label{margin:0 0 16px;color:var(--cd-yellow);font-size:15px;font-weight:700;text-align:center}
.cd-card{flex:1;display:flex;flex-direction:column;padding:clamp(26px,2.4vw,40px);border-radius:var(--cd-radius);background:#fff;color:var(--cd-ink);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cd-card h3{margin:0 0 22px;padding-bottom:20px;border-bottom:3px solid #000;font:700 clamp(26px,2.3vw,38px)/1.04 var(--cd-font);letter-spacing:-.025em}
.cd-card p{margin:0 0 14px;color:var(--cd-text-dark);font-size:17px;line-height:1.55}
.cd-card .cd-card-lead{color:#000;font-weight:500}
.cd-card-link{display:inline-flex;align-items:center;gap:12px;margin-top:auto;padding-top:22px;font-weight:600}
.cd-card-link i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#000;color:#fff;font-style:normal;transition:transform .25s,background .2s,color .2s}
a.cd-card:hover{transform:translateY(-6px)}
a.cd-card:hover .cd-card-link i{background:var(--cd-yellow);color:#000;transform:rotate(45deg)}

/* ---------- At a glance: stat cards ---------- */
.cd-glance-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center}
.cd-glance blockquote{margin:0 0 28px;font:700 clamp(34px,3.6vw,58px)/1.06 var(--cd-font);letter-spacing:-.03em;text-wrap:balance}
.cd-glance-copy>p:not(.cd-eyebrow){max-width:44ch;margin:0 0 34px;color:var(--cd-muted);font-size:18px}
.cd-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cd-stat{padding:26px 26px 24px;border-left:10px solid var(--cd-yellow);background:#fff;color:#000}
.cd-stat strong{display:block;font:700 clamp(40px,4vw,62px)/1 var(--cd-font);letter-spacing:-.035em}
.cd-stat span{display:block;margin-top:12px;font-size:16px;font-weight:600}
.cd-stat p{margin:6px 0 0;color:#55554f;font-size:14px;line-height:1.5}

/* ---------- Industries slider ---------- */
.cd .industries{padding:clamp(90px,10vw,160px) 0 0;background:#000;overflow:hidden}
.cd .industries .cd-head{margin-bottom:clamp(40px,4.5vw,64px)}
.cd .industries-side{margin-top:0}
.cd .industries-side>p{margin:0 0 26px;color:var(--cd-muted);font-size:clamp(16px,1.2vw,19px)}
.cd .slider-controls{gap:10px}
.cd .slider-controls button{width:56px;height:56px;border:2px solid #fff;border-radius:50%;background:transparent;color:#fff;font-size:20px}
.cd .slider-controls button:hover{border-color:var(--cd-yellow);background:var(--cd-yellow);color:#000}
.cd .industry-track{gap:16px;padding-bottom:6px;scroll-padding-inline:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)))}
.cd .industry-card{flex-basis:min(78vw,430px);min-height:560px;border-radius:var(--cd-radius);background:#111}
.cd .industry-card img{filter:grayscale(.35) contrast(.95)}
.cd .industry-card .industry-no{align-self:flex-start;padding:9px 16px;border-radius:999px;background:var(--cd-yellow);color:#000;text-shadow:none;font:600 13px/1 var(--cd-font);letter-spacing:.01em;text-transform:none}
.cd .industry-card h3{font:700 clamp(34px,3.1vw,50px)/.98 var(--cd-font);letter-spacing:-.035em}
.cd .industry-card p{font-size:16px}
.cd .industry-card i{display:inline-flex;align-items:center;gap:12px;font:600 15px/1 var(--cd-font);letter-spacing:0;text-transform:none}
.cd .industry-card i b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:#000;font-weight:400;transition:transform .25s,background .2s}
.cd .industry-card:hover i b{background:var(--cd-yellow);transform:rotate(45deg)}

/* ---------- Service cards with original illustrations ---------- */
.cd .expertise-grid{max-width:none;margin:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
.cd .expertise-card{display:flex;flex-direction:column;padding:12px;border-radius:var(--cd-radius);background:#fff;color:var(--cd-ink);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cd .expertise-card:hover{transform:translateY(-6px)}
.cd .card-art{border-radius:20px;background-color:#0d0d0d}
.cd .art-governance{background:radial-gradient(circle at 50% 52%,#2d2d2f 0,#161617 30%,#0b0b0b 70%)}
.cd .art-automation{background:linear-gradient(135deg,#101010,#1e1e20)}
.cd .art-intelligence{background:radial-gradient(circle at 78% 22%,#3c3c3f 0,transparent 32%),#101010}
.cd .card-art .image-index{color:rgba(255,255,255,.7);font:600 12px/1 var(--cd-font);letter-spacing:.08em}
.cd .card-art .image-arrow{width:42px;height:42px;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;font-size:17px}
.cd .card-art:hover .image-arrow{border-color:var(--cd-yellow);background:var(--cd-yellow);color:#000}
.cd .art-orbit:after{background:var(--cd-yellow);box-shadow:0 0 18px rgba(255,242,0,.85)}
.cd .art-core{background:#fff;box-shadow:0 0 45px rgba(255,255,255,.12)}
.cd .art-core b{font:700 34px/1 var(--cd-font);letter-spacing:-.04em}
.cd .art-core i,.cd .art-node,.cd .automation-title,.cd .automation-step i,.cd .signal-label,.cd .signal-status{font-family:var(--cd-font);font-weight:600;font-size:9px}
.cd .art-node{padding:8px 12px;border-color:rgba(255,255,255,.35);border-radius:999px;background:rgba(10,10,10,.9)}
.cd .automation-step{width:clamp(56px,19%,78px);border-radius:18px;background:#141415;border-color:rgba(255,255,255,.28)}
.cd .automation-step b{font:600 24px/1 var(--cd-font)}
.cd .step-two{background:var(--cd-yellow);border-color:var(--cd-yellow);color:#000;animation-name:cd-step-pulse}
.cd .step-two i{color:#222}
.cd .automation-line{background:rgba(255,255,255,.35)}
.cd .signal-value{font:700 clamp(52px,5vw,76px)/.9 var(--cd-font);letter-spacing:-.05em}
.cd .signal-value span{font-family:var(--cd-font)}
.cd .signal-status{padding:8px 12px;border-radius:999px;background:#fff}
.cd .signal-status b{background:var(--cd-yellow);box-shadow:0 0 0 1.5px #000}
.cd .signal-chart i{border-radius:4px 4px 0 0;background:linear-gradient(180deg,#f1f1f1,rgba(241,241,241,.18))}
.cd .signal-chart i:nth-child(7){background:linear-gradient(180deg,var(--cd-yellow),rgba(255,242,0,.2))}
@keyframes cd-step-pulse{50%{box-shadow:0 0 42px rgba(255,242,0,.35)}}

.cd .card-body{flex:1;display:flex;flex-direction:column;padding:26px clamp(14px,1.4vw,22px) 12px}
.cd .card-body h3{margin:0 0 20px;padding-bottom:18px;border-bottom:3px solid #000;font:700 clamp(26px,2.2vw,36px)/1.04 var(--cd-font);letter-spacing:-.025em}
.cd .card-body p{color:var(--cd-text-dark);font-size:16px;line-height:1.55}
.cd .card-body .card-lead{color:#000;font-size:17px;font-weight:500}
.cd .card-body a{justify-content:flex-start;gap:12px;margin-top:auto;padding:14px 0 0;border-top:0;font:600 16px/1.2 var(--cd-font);letter-spacing:0;text-transform:none}
.cd .card-body a span{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:#000;color:#fff;font-size:16px;transition:transform .25s,background .2s,color .2s}
.cd .card-body a:hover span{background:var(--cd-yellow);color:#000;transform:translateX(4px)}

/* ---------- Process orbit + value stack (original interaction, CD colours) ---------- */
.cd .process-visual-grid{margin-top:clamp(20px,3vw,40px)}
.cd .orbit-field i{border-color:rgba(255,255,255,.16)}
.cd .orbit-sweep{background:conic-gradient(from 0deg,transparent 0 73%,rgba(255,242,0,.06) 80%,var(--cd-yellow) 96%,transparent 100%)}
.cd .orbit-sweep:after{background:var(--cd-yellow);box-shadow:0 0 22px rgba(255,242,0,.9)}
.cd .orbit-center{background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 0 12px rgba(255,255,255,.04)}
.cd .orbit-center span,.cd .orbit-center small{font:600 10px/1 var(--cd-font);letter-spacing:.12em;color:#666}
.cd .orbit-center span b{color:#000}
.cd .orbit-center strong{font-family:var(--cd-font);font-weight:700;letter-spacing:-.035em;color:#000}
.cd .orbit-center p{font-size:12px;color:#444}
.cd .orbit-node{border:1.5px solid rgba(255,255,255,.28);background:#111}
.cd .orbit-node b{font:600 10px/1 var(--cd-font);color:#9a9a9a}
.cd .orbit-node span{font:600 19px/1 var(--cd-font);letter-spacing:-.02em}
.cd .orbit-node:hover,.cd .orbit-node:focus-visible{border-color:#fff}
.cd .orbit-node.is-active{background:var(--cd-yellow);border-color:var(--cd-yellow);color:#000;animation-name:cd-node-pulse}
.cd .orbit-node.is-active b{color:#000}
.cd .orbit-node.is-active:after{border-color:rgba(255,242,0,.45)}
.cd .orbit-subring{border-color:rgba(255,255,255,.16)}
.cd .orbit-subdot{border-radius:999px;border-color:rgba(255,255,255,.22);background:rgba(10,10,10,.94);color:#b5b5b5;font:600 9px/1 var(--cd-font);letter-spacing:.1em}
.cd .orbit-subdot i{background:#6d6d6d}
.cd .orbit-subdot.is-current{border-color:var(--cd-yellow);background:#191800;color:#fff;animation-name:cd-subdot-breathe}
.cd .orbit-subdot.is-current i{background:var(--cd-yellow);box-shadow:0 0 12px rgba(255,242,0,.9)}
@keyframes cd-node-pulse{50%{box-shadow:0 0 0 10px rgba(255,242,0,.08),0 18px 45px rgba(0,0,0,.3)}}
@keyframes cd-subdot-breathe{50%{box-shadow:0 9px 25px rgba(0,0,0,.24),0 0 0 4px rgba(255,242,0,.08)}}

.cd .value-stack-halo{background:radial-gradient(ellipse at 50% 65%,rgba(255,255,255,.1),transparent 60%)}
.cd .layer-face-top{fill:#3a3b3f}
.cd .layer-face-left{fill:#4b4d52}
.cd .layer-face-right{fill:#1d1e21}
.cd .layer-edge{stroke:#e2e4ea;stroke-opacity:.4}
.cd #strategy-face stop:first-child{stop-color:#f6f6f7}
.cd #strategy-face stop:last-child{stop-color:#8d8f95}
.cd .value-layer-strategy .layer-face-right{fill:#9a9ca2}
.cd .value-layer-strategy .layer-edge{stroke:#fff;stroke-opacity:.8}
.cd .value-layer-operations .layer-face-top{fill:#2e2f33}
.cd .value-layer-operations .layer-face-left{fill:#3a3b40}
.cd .value-layer-operations .layer-face-right{fill:#161619}
.cd .value-layer-label{font-family:var(--cd-font);fill:#fff}
.cd .value-layer-kicker{fill:#cfcfd3}
.cd .value-layer-title{font-weight:700}
.cd .value-layer-strategy .value-layer-kicker{fill:#2a2a2a}
.cd .value-layer-strategy .value-layer-title{fill:#111}
.cd .value-layer.is-active,.cd .value-layer:hover{filter:drop-shadow(0 20px 20px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(255,242,0,.18))}
.cd .value-layer.is-active .layer-face-top{fill:#fff200}
.cd .value-layer.is-active .layer-face-left{fill:#e8dc00}
.cd .value-layer.is-active .layer-face-right{fill:#9c9400}
.cd .value-layer.is-active .layer-edge,.cd .value-layer:hover .layer-edge{stroke:#fff;stroke-opacity:1}
.cd .value-layer.is-active .value-layer-title{fill:#000}
.cd .value-layer.is-active .value-layer-kicker{fill:#222}
.cd .value-layer:focus-visible{outline-color:var(--cd-yellow)}
.cd .value-stack-card{border:0;border-radius:24px;background:#fff;color:#000;box-shadow:0 22px 55px rgba(0,0,0,.35);-webkit-backdrop-filter:none;backdrop-filter:none}
.cd .value-stack-card:before{left:25px;top:0;width:56px;height:5px;border-radius:0 0 4px 4px;background:var(--cd-yellow);box-shadow:none}
.cd .value-stack-card>span{color:#000;font:600 11px/1.5 var(--cd-font);letter-spacing:.08em}
.cd .value-stack-card h3{padding-bottom:12px;border-bottom:3px solid #000;font:700 clamp(27px,2.3vw,36px)/1.05 var(--cd-font);letter-spacing:-.025em}
.cd .value-stack-card p{color:var(--cd-text-dark);font-size:14px;line-height:1.6}
.cd .value-stack-tags span{padding:7px 12px;border:1.5px solid #000;border-radius:999px;background:transparent;color:#000;font:500 12px/1.2 var(--cd-font)}

.cd .process-mobile{border-top-color:var(--cd-line)}
.cd .process-mobile article{border-bottom-color:var(--cd-line)}
.cd .process-mobile b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--cd-yellow);color:#000;font:700 13px/1 var(--cd-font);letter-spacing:0}
.cd .process-mobile h3{color:#fff;font:700 26px/1.1 var(--cd-font);letter-spacing:-.02em}
.cd .process-mobile p{color:var(--cd-muted);font-size:15px}

/* ---------- Technology (white panel) ---------- */
.cd-tech-panel{padding:clamp(52px,6vw,96px) 0 clamp(44px,5vw,80px);border-radius:var(--cd-radius);background:#fff;color:#000;overflow:hidden}
.cd-tech-copy{max-width:920px;padding:0 clamp(26px,5vw,84px)}
.cd .cd-tech-copy h2{color:#000}
.cd-tech-copy>p:not(.cd-eyebrow){max-width:56ch;margin:24px 0 0;color:var(--cd-text-dark);font-size:clamp(16px,1.2vw,19px)}
.cd .cd-tech-panel .logo-marquee{margin-top:clamp(44px,5vw,70px)}
.cd .cd-tech-panel .logo-row img{opacity:.7}

/* ---------- FAQ ---------- */
.cd-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,8vw,140px)}
.cd-faq-intro{position:sticky;top:120px;align-self:start}
.cd-faq-intro .cd-head-copy{margin:26px 0 34px}
.cd .faq-list details{margin-bottom:12px;padding:0 clamp(20px,2.2vw,32px);border:0;border-radius:24px;background:var(--cd-panel);transition:background .25s,color .25s}
.cd .faq-list details:last-child{border:0}
.cd .faq-list details[open]{background:#fff;color:#000}
.cd .faq-list summary{align-items:center;padding:24px 0;font:600 clamp(19px,1.6vw,24px)/1.3 var(--cd-font);letter-spacing:-.01em}
.cd .faq-list summary span{flex:none;display:grid;place-items:center;width:42px;height:42px;border:2px solid currentColor;border-radius:50%;font:400 22px/1 var(--cd-font)}
.cd .faq-list details[open] summary span{border-color:var(--cd-yellow);background:var(--cd-yellow);color:#000}
.cd .faq-list details p{padding:0 54px 26px 0;color:var(--cd-text-dark);font-size:16px}

/* ---------- Contact ---------- */
.cd-contact{padding-bottom:clamp(90px,10vw,160px)}
.cd-contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:start}
.cd-contact-copy .cd-head-copy{margin:26px 0 38px}
.cd .cd-contact h2{font-size:clamp(40px,4.6vw,76px)}


/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .cd-cards,.cd .expertise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .cd-head,.cd-glance-grid,.cd-faq,.cd-contact-grid{grid-template-columns:1fr}
  .cd-head{align-items:start}
  .cd-faq-intro{position:static}
  .cd-hero-row{flex-direction:column;align-items:flex-start}
}
@media (max-width:760px){
  .cd-hero{padding-top:104px}
  .cd .cd-section h2 br{display:none}
  .cd-cards,.cd .expertise-grid{grid-template-columns:1fr}
  .cd .expertise-card{padding-bottom:12px;border-bottom:0}
  .cd-card-label{text-align:left}
  .cd-connector{flex-direction:column;align-items:flex-start}
  .cd-connector-line{flex:none;width:3px;height:18px;min-width:0;margin-left:26px}
  .cd-tag{flex-wrap:wrap;max-width:100%;gap:8px 14px;border-radius:26px}
  .cd-tag b{border-radius:22px}
  .cd .hero-clients{grid-template-columns:1fr;gap:16px}
}
@media (max-width:560px){
  .cd-stats{grid-template-columns:1fr}
  .cd .field-row{grid-template-columns:1fr}
  .cd-btn{font-size:16px;padding-left:22px}
  .cd-actions{width:100%}
  .cd-hero-team{--w:170px}
  .cd-contact-pill b{padding:12px 14px;font-size:15px}
  .cd .faq-list details p{padding-right:0}
  .cd .site-header .brand{padding:8px 16px}
  .cd .site-header .brand img{width:132px}
}
@media (prefers-reduced-motion:reduce){
  .cd-hero-people,.cd-hero-title,.cd-hero-row,.cd-connector{animation:none}
  .cd-card,.cd .expertise-card,.cd-btn i,.cd-card-link i,.cd-contact-pill>i{transition:none}
  .cd .step-two,.cd .orbit-node.is-active,.cd .orbit-subdot.is-current{animation:none}
}

/* ---------- Intro: logo build (homepage, at most once per 10 minutes) ----------
   Geometry is measured from logo-it-governance.png (1405×177):
   icon box x 299–383 / y 57–141, left slice ends x 290, right slice starts x 392. */
.cd-intro-screen{display:none}
.cd-intro .cd-intro-screen{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;background:#000;animation:cdi-exit .65s cubic-bezier(.7,0,.2,1) 2.65s both}
.cd-intro .cd-intro-screen.is-skipped{animation:cdi-skip .35s ease both}
.cd-intro-logo{--w:min(68vw,720px);--h:calc(var(--w) * 177 / 1405);position:relative;width:var(--w);height:var(--h)}
.cd-intro-slice{position:absolute;inset:0;width:100%;height:100%;max-width:none;filter:invert(1)}
.cd-intro-left{clip-path:inset(0 79.36% 0 20.64%);animation:cdi-left .6s cubic-bezier(.2,.8,.2,1) 1.25s both}
.cd-intro-right{clip-path:inset(0 72.1% 0 27.9%);animation:cdi-right .7s cubic-bezier(.2,.8,.2,1) 1.25s both}
.cd-intro-icon{position:absolute;left:21.281%;top:32.203%;width:5.979%;height:48.023%;overflow:visible;fill:var(--cd-yellow);transform-origin:50% 50%;animation:cdi-icon 1.35s cubic-bezier(.7,0,.25,1) .1s both}
.cd-intro-bar{transform-box:fill-box;transform-origin:50% 50%;animation:cdi-bar .7s cubic-bezier(.2,.9,.25,1) both}
.cd-intro-bar.b1{--x:-160%;--y:-160%;animation-delay:.15s}
.cd-intro-bar.b2{--x:160%;--y:-160%;animation-delay:.23s}
.cd-intro-bar.b3{--x:-160%;--y:160%;animation-delay:.31s}
.cd-intro-bar.b4{--x:160%;--y:160%;animation-delay:.39s}
/* Outline pill drawn around the wordmark, like the logo pill in the header (1.25× width, 1.9× height) */
.cd-intro-pill{position:absolute;left:-12.5%;top:-45%;width:125%;height:190%;overflow:visible;fill:none;stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke}
.cd-intro-pill rect{vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:1;animation:cdi-pill .95s cubic-bezier(.6,0,.2,1) 1.7s both}
@keyframes cdi-bar{from{opacity:0;transform:translate(var(--x),var(--y)) rotate(90deg)}to{opacity:1;transform:none}}
@keyframes cdi-icon{0%{transform:translate(calc(var(--w) * .2573),calc(var(--h) * -.0593)) scale(4.2) rotate(-90deg)}38%,55%{transform:translate(calc(var(--w) * .2573),calc(var(--h) * -.0593)) scale(4.2) rotate(0deg)}100%{transform:translate(0,0) scale(1) rotate(0deg)}}
@keyframes cdi-left{to{clip-path:inset(0 79.36% 0 0)}}
@keyframes cdi-right{to{clip-path:inset(0 0 0 27.9%)}}
@keyframes cdi-pill{to{stroke-dashoffset:0}}
@keyframes cdi-exit{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes cdi-skip{to{opacity:0;visibility:hidden}}
/* Hero entrance waits for the curtain */
.cd-intro .cd-hero-people{animation-delay:2.9s}
.cd-intro .cd-hero-title{animation-delay:2.98s}
.cd-intro .cd-hero-row{animation-delay:3.06s}
.cd-intro .cd-connector{animation-delay:3.14s}
.cd-intro.cd-intro-skipped :is(.cd-hero-people,.cd-hero-title,.cd-hero-row,.cd-connector){animation-delay:0s}
@media (prefers-reduced-motion:reduce){.cd-intro .cd-intro-screen{display:none}}

/* ---------- Image film: hero trigger + popup ---------- */
.cd-film-trigger{position:absolute;z-index:3;top:34%;right:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));display:flex;align-items:center;gap:18px;padding:0;border:0;background:none;color:#fff;font-family:var(--cd-font);text-align:left;cursor:pointer;animation:cd-rise .9s .3s cubic-bezier(.2,.8,.2,1) both}
.cd-film-play{position:relative;display:grid;place-items:center;flex:none;width:96px;height:96px;border-radius:50%;background:var(--cd-yellow);color:#000;box-shadow:0 18px 50px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .2s}
.cd-film-play svg{width:34px;height:34px;margin-left:4px;fill:currentColor}
.cd-film-play::before{content:"";position:absolute;inset:-10px;border:1.5px solid rgba(255,242,0,.55);border-radius:50%;animation:cd-film-pulse 2.4s ease-out infinite}
.cd-film-label{display:flex;flex-direction:column;gap:4px;padding:12px 20px;border-radius:999px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cd-film-label b{font-size:18px;font-weight:600}
.cd-film-label small{color:rgba(255,255,255,.72);font-size:13px;letter-spacing:.02em}
.cd-film-trigger:hover .cd-film-play{transform:scale(1.07);background:#fff}
.cd-film-trigger:focus-visible{outline:3px solid var(--cd-yellow);outline-offset:6px;border-radius:999px}
@keyframes cd-film-pulse{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.cd-intro .cd-film-trigger{animation-delay:3.3s}
.cd-intro.cd-intro-skipped .cd-film-trigger{animation-delay:.1s}

.cd-film{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:clamp(16px,4vw,48px);border:0;background:transparent;overflow:auto}
.cd-film[open]{display:grid;place-items:center}
.cd-film::backdrop{background:rgba(0,0,0,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cd-film-inner{position:relative;display:grid;gap:14px;width:min(1120px,100%);animation:cd-film-in .45s cubic-bezier(.2,.8,.2,1) both}
.cd-film-frame{overflow:hidden;aspect-ratio:16 / 9;border-radius:var(--cd-radius);background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.cd-film-frame video{display:block;width:100%;height:100%;background:#000}
.cd-film-close{position:absolute;z-index:2;top:-20px;right:-20px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#fff;color:#000;font:300 30px/1 var(--cd-font);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:background .2s,transform .25s}
.cd-film-close:hover{background:var(--cd-yellow);transform:rotate(90deg)}
.cd-film-cta{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding:10px 10px 10px 30px;border-radius:999px;background:#fff;color:#111}
.cd-film-cta p{margin:0;color:#4f4f4a;font-size:17px;line-height:1.4}
.cd-film-cta strong{color:#000;font-weight:700}
.cd-film-cta .cd-btn{flex:none}
@keyframes cd-film-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:1000px){.cd-film-trigger{top:28%}}
@media (max-width:760px){
  .cd-film-trigger{top:100px;right:18px}
  .cd-film-play{width:62px;height:62px}
  .cd-film-play svg{width:24px;height:24px}
  .cd-film-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0}
  .cd-film-close{top:-14px;right:-6px;width:42px;height:42px}
  .cd-film-cta{flex-direction:column;align-items:flex-start;padding:20px;border-radius:24px}
  .cd-film-cta .cd-btn{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.cd-film-play::before{animation:none;opacity:0}.cd-film-trigger,.cd-film-inner{animation:none}}