/*
Theme Name: MAD — Make A Difference v5.9.3 Master Internal Rebuild
Author: My Apps Development
Version: 5.9.3
Description: Preserved MAD Studio theme with the existing homepage, hero visual, orbit motion, Quick Actions, portfolio layout, editable logos, hero media, statistics and client marquee retained and refined for responsive use.
Text Domain: mad
*/

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-soft:#f5f8fc;
  --surface-blue:#eef6fc;
  --ink:#101d3d;
  --ink-2:#18294e;
  --muted:#68758b;
  --muted-2:#8793a7;
  --line:#dfe7f0;
  --line-strong:#cbd7e5;
  --brand:#168acb;
  --brand-dark:#0d6fa8;
  --brand-deep:#1f3d96;
  --brand-soft:#e8f5fd;
  --white:#fff;
  --shadow:0 18px 55px rgba(23,47,83,.09);
  --shadow-soft:0 10px 32px rgba(23,47,83,.06);
  --max:1240px;
  --radius:18px;
  --radius-lg:28px;
  --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"]{
  --bg:#06111e;
  --surface:#0a1929;
  --surface-soft:#0d1d2f;
  --surface-blue:#0e2337;
  --ink:#f2f7ff;
  --ink-2:#dfe9f5;
  --muted:#9cacbf;
  --muted-2:#71849a;
  --line:#1e354d;
  --line-strong:#2c4762;
  --brand:#27a1e5;
  --brand-dark:#168acb;
  --brand-deep:#6f86e8;
  --brand-soft:#102c43;
  --white:#fff;
  --shadow:0 24px 65px rgba(0,0,0,.28);
  --shadow-soft:0 12px 36px rgba(0,0,0,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 'DM Sans','Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s ease,color .35s ease}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-3;background:radial-gradient(circle at 78% 5%,rgba(22,138,203,.07),transparent 27%),radial-gradient(circle at 4% 42%,rgba(31,61,150,.045),transparent 26%)}
html[data-theme="dark"] body:before{background:radial-gradient(circle at 78% 5%,rgba(39,161,229,.12),transparent 30%),radial-gradient(circle at 4% 42%,rgba(111,134,232,.08),transparent 28%)}
::selection{background:rgba(22,138,203,.22);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input,textarea,select{font:inherit}
.container{width:min(calc(100% - 48px),var(--max));margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;z-index:9999}
h1,h2,h3,h4{font-family:'Space Grotesk','DM Sans',sans-serif;line-height:1.06;letter-spacing:-.045em;margin:0 0 18px}
h1{font-size:clamp(3.3rem,6.7vw,6.8rem);max-width:780px}
h2{font-size:clamp(2.35rem,4.4vw,4.4rem);max-width:780px}
h3{font-size:1.18rem}
p{margin:0 0 18px}
.lead{font-size:1.08rem;line-height:1.75;color:var(--muted);max-width:700px}
.eyebrow{font:600 11px/1.2 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:13px}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;font-weight:700;font-size:.94rem;border:1px solid transparent;transition:transform .25s var(--ease),background .25s ease,border-color .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 26px rgba(22,138,203,.20)}
.btn-primary:hover{background:var(--brand-dark);box-shadow:0 14px 30px rgba(22,138,203,.25)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--brand-soft);border-color:rgba(22,138,203,.5)}
.btn-light-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38);color:#fff}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-actions.center{justify-content:center}
.section{padding:105px 0}
.section-soft{background:var(--surface-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;gap:50px;align-items:flex-end;margin-bottom:44px}
.section-head>p{max-width:500px;color:var(--muted);margin:0}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--delay,0ms)}
.reveal.in{opacity:1;transform:none}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);transition:background .3s ease}
.header-inner{height:84px;display:flex;align-items:center;gap:30px}
.logo{display:inline-flex;align-items:center;width:138px;flex:0 0 auto}
.logo-image{display:block;width:100%;height:auto}
.logo-image-dark{display:none}
html[data-theme="dark"] .logo-image-light{display:none}
html[data-theme="dark"] .logo-image-dark{display:block}
.primary-nav{margin-left:auto}
.primary-nav ul{display:flex;align-items:center;gap:25px;margin:0;padding:0;list-style:none}
.primary-nav a{font-size:.91rem;color:var(--muted);font-weight:600;transition:color .2s ease}
.primary-nav a:hover{color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:12px}
.header-cta{min-height:48px;padding-inline:20px}
.theme-toggle{height:40px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;gap:6px;padding:0 12px;cursor:pointer;box-shadow:var(--shadow-soft);transition:.25s ease}
.theme-toggle:hover{border-color:var(--brand);transform:translateY(-1px)}
.theme-sun,.theme-moon{font-size:15px;line-height:1}
.theme-moon{opacity:.42}
html[data-theme="dark"] .theme-sun{opacity:.42}
html[data-theme="dark"] .theme-moon{opacity:1}
.theme-toggle-text{font:700 11px/1 'JetBrains Mono',monospace;letter-spacing:.04em}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);padding:9px;cursor:pointer}
.menu-toggle span{display:block;height:1px;background:var(--ink);margin:5px 0}
.mobile-menu{display:none}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero-home{padding:76px 0 50px;background:linear-gradient(180deg,var(--bg) 0%,var(--surface-soft) 100%)}
.hero-backdrop{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-backdrop span{position:absolute;border-radius:50%;filter:blur(2px);opacity:.8}
.hero-backdrop span:nth-child(1){width:440px;height:440px;right:7%;top:-170px;background:radial-gradient(circle,rgba(38,156,224,.16),transparent 68%)}
.hero-backdrop span:nth-child(2){width:380px;height:380px;left:-210px;bottom:-160px;background:radial-gradient(circle,rgba(40,61,150,.09),transparent 70%)}
.hero-backdrop span:nth-child(3){width:220px;height:220px;right:37%;bottom:-130px;background:radial-gradient(circle,rgba(22,138,203,.08),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);gap:62px;align-items:center;position:relative}
.hero-copy h1 span{color:var(--brand)}
.hero-proof{display:flex;gap:0;margin-top:42px;border-top:1px solid var(--line);max-width:700px}
.hero-proof div{padding:17px 22px 0 0;margin-right:22px;border-right:1px solid var(--line)}
.hero-proof div:last-child{border:0}
.hero-proof strong{display:block;font:700 1.35rem/1 'Space Grotesk',sans-serif;color:var(--ink)}
.hero-proof span{display:block;color:var(--muted-2);font-size:.72rem;margin-top:7px;white-space:nowrap}
.hero-product{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center}
.product-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(22,138,203,.20),transparent 66%);filter:blur(3px)}
.product-window{position:relative;width:min(430px,80%);aspect-ratio:1/1.05;border-radius:32px;background:linear-gradient(145deg,#193f8f,#152f73 48%,#0c2156);box-shadow:0 35px 70px rgba(21,49,113,.27);padding:27px;color:#fff;transform:rotate(1.5deg);z-index:2}
.product-window:after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.13);border-radius:23px;pointer-events:none}
.product-top{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em}
.product-top small{opacity:.55;font-size:8px}
.product-mark{width:150px;height:150px;border-radius:28px;background:rgba(255,255,255,.96);color:#23409a;display:grid;place-items:center;font:700 90px/1 'Space Grotesk',sans-serif;margin:60px auto 28px;box-shadow:0 20px 45px rgba(0,0,0,.16)}
.product-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.product-chips span{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);border-radius:999px;padding:8px 11px;font-size:10px;color:#eaf4ff}
.product-bottom{position:absolute;bottom:25px;left:28px;font:500 9px/1 'JetBrains Mono',monospace;opacity:.65;letter-spacing:.08em}
.orbit-chip{position:absolute;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-soft);border-radius:999px;padding:10px 14px;font-size:.74rem;font-weight:700;color:var(--ink);z-index:3}
.chip-one{left:2%;top:24%}.chip-two{right:0;top:15%}.chip-three{right:-3%;bottom:25%}.chip-four{left:4%;bottom:17%}

/* Recognition */
.recognition-strip{padding:0 0 35px;background:var(--surface-soft)}
.recognition-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.recognition-grid>div{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:18px 20px;box-shadow:var(--shadow-soft)}
.recognition-grid span{display:block;font:600 8px/1.2 'JetBrains Mono',monospace;color:var(--brand);letter-spacing:.12em}
.recognition-grid strong{display:block;font:700 1.5rem/1 'Space Grotesk',sans-serif;margin:10px 0 5px}
.recognition-grid small{color:var(--muted);font-size:.72rem}

/* Intro */
.split-intro{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.split-intro h2 span,.why-section h2 span,.manifesto h2 span{color:var(--brand)}
.split-intro .lead{margin-bottom:18px}

/* Capabilities */
.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.capability-card{position:relative;min-height:260px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:25px;box-shadow:var(--shadow-soft);overflow:hidden;transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease}
.capability-card:before,.why-card:before,.process-card:before{content:"";position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-deep));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.capability-card:hover{transform:translateY(-6px);border-color:rgba(22,138,203,.38);box-shadow:var(--shadow)}
.capability-card:hover:before,.why-card:hover:before,.process-card:hover:before{transform:scaleX(1)}
.card-number{font:600 10px/1 'JetBrains Mono',monospace;color:var(--brand)}
.capability-icon{position:absolute;right:22px;top:20px;width:42px;height:42px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font:700 12px/1 'JetBrains Mono',monospace}
.capability-card h3{margin-top:62px;font-size:1.25rem}.capability-card p{color:var(--muted);font-size:.88rem;max-width:330px}
.card-link{position:absolute;left:25px;bottom:22px;color:var(--brand);font-size:.78rem;font-weight:700}

/* Stats */
.stats-section{padding-top:40px;padding-bottom:70px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-row>div{padding:28px 25px;border-right:1px solid var(--line)}
.stat-row>div:last-child{border-right:0}
.stat-row strong{display:block;font:700 2.2rem/1 'Space Grotesk',sans-serif;color:var(--brand-deep)}
.stat-row span{display:block;color:var(--muted);font-size:.75rem;margin-top:7px}

/* Work */
.work-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr;gap:14px}
.work-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease),box-shadow .3s ease}
.work-card:first-child{grid-row:span 2}
.work-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.work-image,.work-art{aspect-ratio:1.65/1;overflow:hidden}
.work-card:first-child .work-image,.work-card:first-child .work-art{aspect-ratio:1.6/1}
.work-image img{width:100%;height:100%;object-fit:cover;display:block}
.work-art{position:relative;background:linear-gradient(135deg,#e9f5fc,#dce9fb)}
html[data-theme="dark"] .work-art{background:linear-gradient(135deg,#0e2b46,#162d6d)}
.work-art:before{content:"";position:absolute;width:60%;height:70%;left:20%;top:15%;background:linear-gradient(145deg,#fff,#eaf1fb);border-radius:15px;box-shadow:0 20px 45px rgba(20,50,100,.15)}
.work-art:after{content:"";position:absolute;left:30%;right:30%;top:32%;height:8px;border-radius:8px;background:var(--brand);box-shadow:0 30px 0 #dbe7f4,0 60px 0 #dbe7f4}
html[data-theme="dark"] .work-art:after{box-shadow:0 30px 0 #263b52,0 60px 0 #263b52}
.art-label{position:absolute;z-index:2;top:18px;left:18px;background:rgba(255,255,255,.78);color:var(--brand-deep);padding:6px 9px;border-radius:999px;font:700 9px/1 'JetBrains Mono',monospace}
.work-copy{padding:20px 22px 24px}.work-copy>span{font:600 9px/1 'JetBrains Mono',monospace;color:var(--brand);text-transform:uppercase;letter-spacing:.12em}.work-copy h3{margin:9px 0 7px}.work-copy p{color:var(--muted);font-size:.83rem}.work-copy b{font-size:.76rem;color:var(--brand)}

/* Clients */
.client-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.client-pill{background:var(--surface);border:1px solid var(--line);padding:14px 18px;border-radius:13px;font-weight:700;color:var(--ink);box-shadow:var(--shadow-soft)}
.sector-tags{display:flex;gap:8px;flex-wrap:wrap}
.sector-tags span{font-size:.72rem;color:var(--muted);border:1px solid var(--line);padding:7px 10px;border-radius:999px}

/* Why */
.why-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:85px;align-items:start}
.why-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.why-card{position:relative;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:18px;min-height:190px;overflow:hidden;box-shadow:var(--shadow-soft)}
.why-card>span,.process-card>span{font:600 9px/1 'JetBrains Mono',monospace;color:var(--brand)}
.why-card h3{margin-top:28px}.why-card p,.process-card p{color:var(--muted);font-size:.82rem}

/* Process */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.process-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;min-height:180px;overflow:hidden;box-shadow:var(--shadow-soft)}
.process-card h3{margin-top:25px}

/* Tech */
.tech-banner{padding-top:75px}
.tech-banner-inner{background:linear-gradient(135deg,#173a8c,#126fa8);border-radius:28px;padding:50px 56px;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;box-shadow:0 28px 60px rgba(20,60,130,.18)}
.tech-banner .eyebrow{color:#9fe2ff}.tech-banner h2{color:#fff}.tech-banner p{color:rgba(255,255,255,.78);max-width:580px}
.tech-pills{display:flex;flex-wrap:wrap;gap:9px}
.tech-pills span{border:1px solid rgba(255,255,255,.23);background:rgba(255,255,255,.09);padding:9px 12px;border-radius:999px;font-size:.75rem}

/* Testimonials */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.testimonial-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:25px;box-shadow:var(--shadow-soft)}
.stars{color:var(--brand);letter-spacing:2px;font-size:.78rem;margin-bottom:18px}.testimonial-card p{font-size:.96rem;color:var(--ink-2)}.testimonial-card small{color:var(--muted-2)}

/* Manifesto */
.manifesto{padding-top:55px}.manifesto-inner{background:var(--surface-soft);border:1px solid var(--line);border-radius:25px;padding:48px;display:grid;grid-template-columns:190px 1fr;gap:55px;align-items:center}
.manifesto-mark{width:150px;height:150px;border-radius:25px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font:700 100px/1 'Space Grotesk',sans-serif;color:var(--brand-deep);box-shadow:var(--shadow)}
.manifesto h2{max-width:760px}.manifesto p{color:var(--muted);max-width:720px}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.blog-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-soft);padding-bottom:22px}
.blog-image{aspect-ratio:1.75/1;overflow:hidden}.blog-image img{width:100%;height:100%;object-fit:cover}
.blog-card>*:not(.blog-image){margin-left:22px;margin-right:22px}.blog-meta{font:600 9px/1 'JetBrains Mono',monospace;color:var(--brand);padding-top:21px;margin-bottom:11px}.blog-card h3{font-size:1.25rem}.blog-card p{font-size:.82rem;color:var(--muted)}

/* CTA */
.cta-panel{background:linear-gradient(135deg,#162d6f,#168acb);border-radius:28px;padding:58px 58px;text-align:left;color:#fff;position:relative;overflow:hidden}
.cta-panel:after{content:"";position:absolute;width:360px;height:360px;right:-100px;top:-170px;border-radius:50%;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 40px rgba(255,255,255,.025),0 0 0 80px rgba(255,255,255,.018)}
.cta-panel h2{color:#fff}.cta-panel p{color:rgba(255,255,255,.78);max-width:650px}

/* FAQ */
.faq-home{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.faq-list details{border-top:1px solid var(--line);padding:20px 0}.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;font-weight:700;display:flex;justify-content:space-between;gap:20px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{color:var(--brand);font-size:1.2rem}.faq-list p{color:var(--muted);padding:13px 40px 0 0;margin:0;font-size:.9rem}

/* Footer */
.site-footer{background:#0b1830;color:#dce7f3;margin-top:30px}
html[data-theme="light"] .site-footer{background:#101f42}
.footer-top{padding:65px 0 42px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:50px}
.footer-brand .logo{margin-bottom:20px}.footer-brand p{color:#aebed1;max-width:430px;font-size:.87rem}.footer-links{list-style:none;margin:16px 0 0;padding:0}.footer-links li{margin:9px 0;color:#aebed1;font-size:.8rem}.footer-links a:hover{color:#fff}.footer-social{display:flex;gap:8px;margin-top:20px}.footer-social a{border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:999px;font-size:.75rem}
.site-footer .eyebrow{color:#35b7ff}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0 25px;display:flex;justify-content:space-between;color:#7f94ab;font-size:.68rem}

/* Quick actions */
.quick-actions{position:fixed;right:24px;bottom:24px;z-index:120}
.quick-actions-toggle{height:52px;padding:0 17px;border:1px solid rgba(22,138,203,.22);border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:0 18px 45px rgba(15,35,60,.16);display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:700}
.qa-mark{width:24px;height:24px;border-radius:50%;background:var(--brand);display:grid;place-items:center;position:relative}
.qa-mark i{width:3px;height:3px;border-radius:50%;background:#fff;position:absolute}.qa-mark i:nth-child(1){transform:translate(-5px,-4px)}.qa-mark i:nth-child(2){transform:translate(3px,2px)}.qa-mark i:nth-child(3){transform:translate(5px,-5px)}
.quick-actions-panel{position:absolute;right:0;bottom:62px;width:330px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 24px 70px rgba(15,35,60,.20);opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:bottom right;transition:.25s var(--ease)}
.quick-actions.is-open .quick-actions-panel{opacity:1;visibility:visible;transform:none}
.qa-heading{padding:9px 11px 13px;border-bottom:1px solid var(--line);margin-bottom:5px}.qa-heading strong{display:block}.qa-heading span{font-size:.72rem;color:var(--muted)}
.quick-actions-panel>a,.qa-disabled{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:11px 9px;border-radius:13px}.quick-actions-panel>a:hover{background:var(--surface-soft)}
.quick-actions-panel b,.qa-disabled b{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font:700 10px/1 'JetBrains Mono',monospace}
.quick-actions-panel strong,.qa-disabled strong{display:block;font-size:.78rem}.quick-actions-panel small,.qa-disabled small{display:block;color:var(--muted);font-size:.66rem;margin-top:2px}.quick-actions-panel>a>i,.qa-disabled>i{font-style:normal;color:var(--brand)}
.qa-disabled{opacity:.65}

/* Inner templates/forms */
.page-hero{padding:85px 0 65px;background:linear-gradient(180deg,var(--surface-soft),var(--bg));border-bottom:1px solid var(--line)}
.breadcrumbs{display:flex;gap:8px;color:var(--muted-2);font-size:.75rem;margin-bottom:22px}.breadcrumbs span{opacity:.6}
.card,.contact-card,.form-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-soft)}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px}.form-card{padding:30px}.contact-side{display:grid;gap:22px}.contact-card{padding:30px}.contact-card h2{font-size:2.2rem}.contact-card h3{font-size:1.35rem}.contact-card p{color:var(--muted)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-field{margin-bottom:16px}.form-field label{display:block;font-size:.76rem;color:var(--muted);margin-bottom:7px}.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid var(--line-strong);background:var(--surface-soft);color:var(--ink);border-radius:13px;padding:13px 14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.form-field select{appearance:auto;padding-right:42px}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,138,203,.10)}.success-message{background:var(--brand-soft);border:1px solid rgba(22,138,203,.22);padding:13px;border-radius:12px;color:var(--ink)}.content{max-width:900px;color:var(--muted)}.content h2,.content h3{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media (max-width:1050px){
  .primary-nav{display:none}.header-actions .theme-toggle{display:none}.menu-toggle{display:block}.mobile-menu{display:block;max-height:0;overflow:hidden;border-top:0;transition:max-height .35s ease;background:var(--bg)}.mobile-menu.is-open{max-height:700px;border-top:1px solid var(--line)}.mobile-menu .container{padding:12px 0 22px}.mobile-menu ul{list-style:none;margin:0;padding:0}.mobile-menu li{border-bottom:1px solid var(--line)}.mobile-menu a{display:block;padding:15px 0;font-weight:600;color:var(--muted)}.mobile-menu-actions{display:flex;gap:10px;margin-top:14px}.mobile-menu-actions .theme-toggle{display:inline-flex}.mobile-cta{flex:1}.hero-grid{grid-template-columns:1fr}.hero-product{min-height:460px}.hero-copy{max-width:850px}.work-grid{grid-template-columns:1fr 1fr}.work-card:first-child{grid-row:auto;grid-column:1/-1}.tech-banner-inner{grid-template-columns:1fr}.footer-top{grid-template-columns:1.4fr 1fr 1fr}.footer-top>div:last-child{grid-column:1/-1}}
@media (max-width:760px){
  .container{width:min(calc(100% - 30px),var(--max))}.section{padding:74px 0}.header-inner{height:72px}.logo{width:120px}.header-cta{display:none}.hero-home{padding-top:48px}.hero-grid{gap:25px}.hero-product{min-height:390px}.product-window{width:310px}.product-mark{width:115px;height:115px;font-size:70px;margin:55px auto 22px}.orbit-chip{font-size:.62rem;padding:8px 10px}.chip-one{left:0}.chip-two{right:-3%}.chip-three{right:-2%}.chip-four{left:0}.hero-proof{overflow:auto}.hero-proof div{min-width:max-content}.recognition-grid{grid-template-columns:1fr 1fr}.split-intro,.why-grid,.faq-home{grid-template-columns:1fr;gap:35px}.section-head{display:block}.section-head>p{margin-top:14px}.capability-grid,.process-grid,.testimonial-grid,.blog-grid{grid-template-columns:1fr}.stat-row{grid-template-columns:1fr 1fr}.stat-row>div:nth-child(2){border-right:0}.stat-row>div{border-bottom:1px solid var(--line)}.work-grid{grid-template-columns:1fr}.work-card:first-child{grid-column:auto}.tech-banner-inner{padding:35px 25px}.manifesto-inner{grid-template-columns:1fr;padding:30px}.manifesto-mark{width:110px;height:110px;font-size:72px}.footer-top{grid-template-columns:1fr 1fr;gap:35px}.footer-top>div:first-child{grid-column:1/-1}.footer-top>div:last-child{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}.quick-actions{right:15px;bottom:15px}.quick-actions-toggle{height:50px}.quick-actions-panel{position:fixed;right:15px;left:15px;bottom:76px;width:auto}.form-row,.contact-grid{grid-template-columns:1fr}.page-hero{padding:60px 0 45px}}

/* =========================================================
   MAD 5.1 — POLISH / MOTION / CUSTOMIZATION LAYER
   ========================================================= */
:root{
  --light-canvas:#f7f9fd;
  --light-surface:#ffffff;
  --light-blue:#edf5fc;
  --light-ink:#10203d;
  --light-muted:#66758b;
  --light-line:#d7e1ec;
}
html[data-theme="light"] body{background:var(--light-canvas);color:var(--light-ink)}
html[data-theme="light"] .hero-home{background:linear-gradient(180deg,#ffffff 0%,#f4f8fd 100%)}
html[data-theme="light"] .section-soft{background:#f1f6fb}
html[data-theme="light"] .site-header{background:rgba(255,255,255,.88)}
html[data-theme="dark"] .site-header{background:rgba(6,17,30,.88)}

/* Professional CSS-only arrows — no emoji glyphs */
.icon-arrow{display:inline-block;width:11px;height:11px;position:relative;flex:0 0 11px}
.icon-arrow:before{content:"";position:absolute;width:7px;height:7px;border-top:1.7px solid currentColor;border-right:1.7px solid currentColor;right:0;top:1px;transform:rotate(45deg)}
.icon-arrow:after{content:"";position:absolute;height:1.7px;width:10px;background:currentColor;right:0;top:5px;transform:rotate(0deg);transform-origin:right center}
.icon-arrow-down{transform:rotate(45deg)}

/* Toggle — deliberately compact and editorial, matching the supplied reference */
.theme-toggle{height:42px;min-width:94px;padding:0 10px 0 7px;gap:8px;border-radius:999px;background:transparent;border:1px solid var(--line-strong);box-shadow:none;color:var(--ink)}
.theme-toggle:hover{background:var(--surface);border-color:var(--brand);box-shadow:0 8px 24px rgba(17,48,85,.08);transform:none}
.theme-symbol{width:28px;height:28px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;position:relative;background:var(--surface);overflow:hidden}
.theme-symbol:before{content:"";width:13px;height:13px;border:1px solid var(--brand);border-radius:50%;position:absolute}
.theme-symbol:after{content:"";width:14px;height:2px;background:var(--brand);position:absolute;transform:rotate(-38deg);opacity:.55}
.theme-symbol i{display:block;width:5px;height:5px;border-radius:50%;background:#f0a400;position:absolute;left:6px;top:6px;transition:.25s ease}
html[data-theme="dark"] .theme-symbol i{background:#37b8ef;left:13px;top:14px}
html[data-theme="dark"] .theme-symbol:before{border-color:#2c9ed0}
.theme-toggle-text{font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.13em}

/* Header / footer logo customization */
.logo-header{width:var(--logo-width,145px)}
.logo-footer{width:var(--logo-width,165px)}
.logo-image{transition:opacity .2s ease}

/* Hero visual: floating, responsive and pointer-reactive */
.hero-product{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.product-window{animation:madFloat 7s ease-in-out infinite;will-change:transform}
.product-glow{animation:madGlow 5s ease-in-out infinite alternate}
.orbit-chip{animation:madChipFloat 5s ease-in-out infinite;will-change:transform}
.chip-two{animation-delay:-1.2s}.chip-three{animation-delay:-2.3s}.chip-four{animation-delay:-3.4s}
.product-mark{padding:20px}
.product-mark img{width:100%;height:100%;object-fit:contain;display:block}
@keyframes madFloat{0%,100%{transform:rotate(1.5deg) translate3d(0,0,0)}50%{transform:rotate(-1deg) translate3d(0,-13px,0)}}
@keyframes madGlow{0%{transform:scale(.95);opacity:.55}100%{transform:scale(1.08);opacity:1}}
@keyframes madChipFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}

/* Animated stat emphasis */
.hero-proof strong,.stat-row strong{font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stat-row>div{transition:transform .3s ease,background .3s ease}
.stat-row>div:hover{transform:translateY(-4px);background:var(--surface-soft)}

/* Client logo marquee */
.client-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;position:relative;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.client-track{display:flex;width:max-content;align-items:center;gap:14px;animation:madClientScroll 30s linear infinite}
.client-marquee:hover .client-track{animation-play-state:paused}
.client-logo-item{height:72px;min-width:170px;padding:10px 22px;border:1px solid var(--line);background:var(--surface);border-radius:14px;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.client-logo-item:hover{transform:translateY(-3px);border-color:rgba(22,138,203,.45);box-shadow:var(--shadow-soft)}
.client-logo-item img{max-height:36px;max-width:120px;width:auto;height:auto;object-fit:contain}
.client-logo-item span{font:700 13px/1.2 'Space Grotesk',sans-serif;color:var(--ink);text-align:center}
@keyframes madClientScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Outcome cards / richer homepage */
.outcome-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.outcome-card{min-height:220px;padding:27px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft);transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease}
.outcome-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(22,138,203,.38)}
.outcome-card>span{font:700 10px/1 'JetBrains Mono',monospace;color:var(--brand)}
.outcome-card h3{margin-top:38px}
.outcome-card p{color:var(--muted);font-size:.87rem}

/* Existing cards get stronger interaction */
.capability-card,.work-card,.why-card,.process-card,.testimonial-card,.blog-card{transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease}
.capability-card:hover,.work-card:hover,.why-card:hover,.process-card:hover,.testimonial-card:hover,.blog-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(22,138,203,.38)}
.work-image img,.blog-image img{transition:transform .6s var(--ease)}
.work-card:hover .work-image img,.blog-card:hover .blog-image img{transform:scale(1.035)}

/* Professional FAQ control */
.faq-plus{width:14px;height:14px;position:relative;display:inline-block;flex:0 0 14px}
.faq-plus:before,.faq-plus:after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%)}
.faq-plus:before{width:12px;height:1px}.faq-plus:after{width:1px;height:12px;transition:transform .25s ease}
details[open] .faq-plus:after{transform:translate(-50%,-50%) rotate(90deg)}

/* Quick Actions — right-side vertical tab exactly as requested */
.quick-actions{position:fixed;right:0;top:50%;bottom:auto;z-index:120;transform:translateY(-50%)}
.quick-actions-toggle{width:44px;height:148px;padding:10px 0;border:1px solid #cbd8e7;border-right:0;border-radius:16px 0 0 16px;background:var(--surface);color:var(--ink);box-shadow:0 15px 45px rgba(22,46,76,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;cursor:pointer}
.qa-toggle-label{writing-mode:vertical-rl;transform:rotate(180deg);font:700 9px/1 'JetBrains Mono',monospace;letter-spacing:.13em}
.qa-toggle-line{width:17px;height:1px;background:var(--brand);position:relative}
.qa-toggle-line:before,.qa-toggle-line:after{content:"";position:absolute;left:0;width:5px;height:1px;background:var(--brand)}
.qa-toggle-line:before{top:-4px}.qa-toggle-line:after{top:4px}
.quick-actions-panel{position:absolute;right:54px;top:50%;bottom:auto;width:335px;transform:translate(10px,-50%) scale(.98);transform-origin:right center;opacity:0;visibility:hidden;transition:.28s var(--ease);padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 70px rgba(15,35,60,.20)}
.quick-actions.is-open .quick-actions-panel{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1)}
.quick-actions-panel>a,.qa-disabled{display:grid;grid-template-columns:40px 1fr 16px;align-items:center;gap:10px;padding:11px 9px;border-radius:13px}
.quick-actions-panel>a:hover{background:var(--surface-soft);transform:translateX(-2px)}
.qa-icon{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);display:block;position:relative}
.qa-icon:before,.qa-icon:after{content:"";position:absolute;background:var(--brand);left:50%;top:50%;transform:translate(-50%,-50%)}
.qa-phone:before{width:12px;height:16px;border:1.5px solid var(--brand);background:transparent;border-radius:7px}
.qa-phone:after{width:4px;height:1px}
.qa-mail:before{width:15px;height:11px;border:1.5px solid var(--brand);background:transparent;border-radius:2px}
.qa-mail:after{width:9px;height:9px;background:transparent;border-left:1.5px solid var(--brand);border-bottom:1.5px solid var(--brand);transform:translate(-50%,-65%) rotate(-45deg)}
.qa-calendar:before{width:14px;height:13px;border:1.5px solid var(--brand);background:transparent;border-radius:3px}
.qa-calendar:after{width:10px;height:1.5px;top:13px}
.qa-enquiry:before{width:14px;height:10px;border:1.5px solid var(--brand);background:transparent;border-radius:2px}
.qa-enquiry:after{width:5px;height:5px;background:transparent;border-left:1.5px solid var(--brand);border-bottom:1.5px solid var(--brand);left:38%;top:63%;transform:rotate(-45deg)}
.qa-calculator:before{width:14px;height:16px;border:1.5px solid var(--brand);background:transparent;border-radius:3px}
.qa-calculator:after{width:5px;height:5px;border:1px solid var(--brand);background:transparent}
.qa-whatsapp:before{width:15px;height:15px;border:1.5px solid var(--brand);background:transparent;border-radius:50%}
.qa-whatsapp:after{width:4px;height:4px;background:var(--brand);border-radius:50%;box-shadow:-4px 2px 0 var(--brand),4px 2px 0 var(--brand)}
.quick-actions-panel>a>i{font-style:normal;color:var(--brand);transition:transform .25s ease}
.quick-actions-panel>a:hover>i{transform:translateX(3px)}

/* Better mobile menu CTA / toggle */
.mobile-menu-actions{align-items:center}
.mobile-menu-actions .theme-toggle{min-width:94px}
.mobile-menu-actions .mobile-cta{min-height:50px}

/* More breathing room in light mode */
html[data-theme="light"] .recognition-grid>div,
html[data-theme="light"] .capability-card,
html[data-theme="light"] .work-card,
html[data-theme="light"] .why-card,
html[data-theme="light"] .process-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .outcome-card{background:#fff}

@media (max-width:1050px){
  .outcome-grid{grid-template-columns:1fr 1fr}
  .quick-actions-toggle{height:132px}
}
@media (max-width:760px){
  .header-inner{height:72px}
  .logo-header{width:var(--logo-width,120px)}
  .outcome-grid{grid-template-columns:1fr}
  .client-logo-item{min-width:145px;height:64px}
  .client-logo-item img{max-height:31px;max-width:105px}
  .quick-actions{right:0}
  .quick-actions-toggle{width:42px;height:124px;border-radius:14px 0 0 14px}
  .quick-actions-panel{position:fixed;right:54px;top:50%;width:min(320px,calc(100vw - 72px));transform:translate(10px,-50%) scale(.98)}
  .quick-actions.is-open .quick-actions-panel{transform:translate(0,-50%) scale(1)}
  .hero-product{min-height:410px}
}
@media (prefers-reduced-motion:reduce){
  .product-window,.product-glow,.orbit-chip,.client-track{animation:none!important}
  .hero-product{transform:none!important}
}

/* =========================================================
   MAD v5.2 STUDIO — precision refinements
   ========================================================= */
:root{--hero-visual-size:430px}
html[data-theme="light"] body{background:#f8fbff}
html[data-theme="light"] .hero-home{background:linear-gradient(180deg,#fff 0%,#f7fbff 72%,#eef6fc 100%);overflow:hidden}
html[data-theme="light"] .hero-backdrop .orb-a{position:absolute;width:520px;height:520px;right:8%;top:40px;background:radial-gradient(circle,rgba(50,169,232,.17) 0%,rgba(50,169,232,.06) 38%,transparent 70%);filter:blur(10px);animation:orbDrift 10s ease-in-out infinite alternate}
html[data-theme="light"] .hero-backdrop .orb-b{position:absolute;width:430px;height:430px;right:30%;bottom:-220px;background:radial-gradient(circle,rgba(70,92,190,.13),transparent 70%);filter:blur(9px);animation:orbDriftB 12s ease-in-out infinite alternate}
html[data-theme="light"] .hero-backdrop .orb-c{position:absolute;width:260px;height:260px;left:34%;top:30%;background:radial-gradient(circle,rgba(22,138,203,.08),transparent 70%);filter:blur(4px);animation:orbPulse 8s ease-in-out infinite}
html[data-theme="light"] .hero-backdrop .orb-grid{position:absolute;width:560px;height:560px;right:0;top:110px;opacity:.25;background-image:linear-gradient(rgba(22,138,203,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(22,138,203,.08) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(circle,black 0%,transparent 72%);animation:gridDrift 18s linear infinite}

.hero-grid{grid-template-columns:minmax(0,.96fr) minmax(480px,1.04fr);gap:42px;min-height:570px}
.hero-copy h1{font-size:clamp(3.65rem,5.35vw,5.55rem);line-height:.94;letter-spacing:-.055em;max-width:720px;margin-bottom:28px}
.hero-copy h1>span{display:block;white-space:nowrap}
.hero-copy h1 .accent-line{color:var(--brand)}
.hero-copy .lead{max-width:650px}
.hero-product{min-height:555px;perspective:1200px}
.product-window{width:var(--hero-visual-size,430px);max-width:88%;animation:heroCardFloat 6s ease-in-out infinite;will-change:transform}
.product-window:before{content:"";position:absolute;inset:-30px;border-radius:48px;background:radial-gradient(circle at 50% 55%,rgba(44,137,224,.22),transparent 64%);z-index:-2;filter:blur(18px);animation:heroAura 6s ease-in-out infinite}
.product-mark{width:calc(var(--hero-mark-size,150px) + 20px);height:calc(var(--hero-mark-size,150px) + 20px);margin:58px auto 28px}
.product-mark img{width:var(--hero-mark-size,150px);height:var(--hero-mark-size,150px);max-width:86%;max-height:86%;object-fit:contain;display:block;filter:drop-shadow(0 14px 24px rgba(20,35,90,.14));animation:markFloat 4.5s ease-in-out infinite}
.product-orbit{position:absolute;width:470px;height:470px;border:1px solid rgba(43,84,170,.18);border-radius:50%;animation:orbitSpin 22s linear infinite}
.product-orbit:before,.product-orbit:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 20px rgba(22,138,203,.45)}
.product-orbit:before{left:9%;top:22%}.product-orbit:after{right:8%;bottom:18%;width:7px;height:7px}
.orbit-chip{transition:transform .35s var(--ease),box-shadow .35s ease;background:rgba(255,255,255,.88);backdrop-filter:blur(8px)}
.orbit-chip:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 38px rgba(22,60,110,.15)}
.chip-one{left:0}.chip-two{right:-1%}.chip-three{right:-2%}.chip-four{left:3%}
.hero-proof{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:6px;padding-bottom:20px}
.hero-proof>div{padding:22px 24px 0 0;margin-right:24px;border-right:1px solid var(--line)}
.hero-proof>div:last-child{border-right:0;margin-right:0}
.hero-proof strong{font-size:1.7rem}

/* Client logos: attachment IDs are resolved server-side and constrained visually. */
.client-marquee{overflow:hidden;position:relative;padding:8px 0 18px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.client-track{display:flex;width:max-content;gap:14px;animation:clientMarquee var(--client-speed,34s) linear infinite}
.client-marquee:hover .client-track{animation-play-state:paused}
.client-logo-item{width:190px;height:88px;flex:0 0 190px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 22px;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease}
.client-logo-item:hover{transform:translateY(-5px);border-color:rgba(22,138,203,.38);box-shadow:var(--shadow)}
.client-logo-item img{display:block;width:auto;height:var(--client-logo-height,42px);max-width:145px;max-height:var(--client-logo-height,42px);object-fit:contain}
.client-logo-item span{font-weight:700;font-size:.9rem;color:var(--ink);text-align:center}

/* Unique section immediately before the final CTA */
.mad-signal-section{padding-top:10px;padding-bottom:42px}
.mad-signal{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end;padding:48px 52px;border-radius:30px;background:linear-gradient(125deg,#0a1930 0%,#102d60 58%,#106c9d 130%);color:#fff;box-shadow:0 28px 70px rgba(16,53,105,.22)}
.mad-signal:before{content:"";position:absolute;width:420px;height:420px;right:-130px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(46,187,245,.30),transparent 68%);animation:signalPulse 7s ease-in-out infinite}
.mad-signal .eyebrow{color:#8fdfff}.mad-signal h2{color:#fff;max-width:780px;margin:12px 0}.mad-signal h2 span{color:#5bc4f2}.mad-signal p{color:rgba(255,255,255,.72);margin:0;max-width:690px}.signal-link{position:relative;z-index:2;display:inline-flex;align-items:center;gap:11px;color:#fff;font-weight:700;padding:14px 0;white-space:nowrap}.signal-link .icon-arrow{border-color:#fff}

/* Customizer spacing modes */
html[data-spacing="compact"] .section{padding-top:62px;padding-bottom:62px}
html[data-spacing="airy"] .section{padding-top:110px;padding-bottom:110px}

@keyframes heroCardFloat{0%,100%{transform:rotate(1.5deg) translate3d(0,0,0)}50%{transform:rotate(-.8deg) translate3d(0,-10px,0)}}
@keyframes markFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes heroAura{0%,100%{opacity:.72;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes orbDrift{to{transform:translate3d(-35px,28px,0) scale(1.08)}}
@keyframes orbDriftB{to{transform:translate3d(30px,-20px,0) scale(.92)}}
@keyframes orbPulse{50%{opacity:.48;transform:scale(1.12)}}
@keyframes gridDrift{to{transform:translate3d(40px,30px,0)}}
@keyframes signalPulse{50%{transform:scale(1.12);opacity:.7}}
@keyframes clientMarquee{to{transform:translateX(-50%)}}

@media (max-width:1150px){
  .hero-grid{grid-template-columns:1fr .9fr;gap:20px}
  .hero-copy h1{font-size:clamp(3.2rem,5.2vw,4.7rem)}
  .hero-product{min-height:500px}.product-window{width:min(var(--hero-visual-size,430px),92%)}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;min-height:0;padding-top:35px}
  .hero-copy h1{font-size:clamp(3.1rem,8vw,5rem);max-width:760px}
  .hero-product{min-height:520px;margin-top:5px}
  .hero-proof{grid-template-columns:repeat(2,1fr);row-gap:12px}
  .hero-proof>div:nth-child(2){border-right:0}
  .hero-proof>div:nth-child(3){border-right:1px solid var(--line)}
}
@media (max-width:700px){
  .hero-copy h1{font-size:clamp(2.65rem,12vw,4rem);line-height:.96}
  .hero-copy h1>span{white-space:normal}
  .hero-copy .lead{font-size:.95rem}
  .hero-product{min-height:400px}
  .product-window{width:min(var(--hero-visual-size,430px),88vw);border-radius:26px}
  .product-mark{margin-top:45px}
  .product-orbit{width:330px;height:330px}
  .orbit-chip{font-size:.68rem;padding:8px 11px}
  .chip-one{left:-2%;top:24%}.chip-two{right:-4%;top:14%}.chip-three{right:-5%;bottom:20%}.chip-four{left:-1%;bottom:12%}
  .hero-proof{grid-template-columns:1fr 1fr}
  .hero-proof>div{padding-right:14px;margin-right:14px}
  .hero-proof strong{font-size:1.35rem}.hero-proof span{white-space:normal;font-size:.68rem}
  .mad-signal{grid-template-columns:1fr;padding:34px 28px;gap:14px}.signal-link{white-space:normal}
  .client-logo-item{width:165px;flex-basis:165px;height:76px}.client-logo-item img{max-width:125px}
}
@media (prefers-reduced-motion:reduce){
  .hero-backdrop *, .product-window,.product-mark img,.product-orbit,.mad-signal:before,.client-track{animation:none!important}
}
.hero-product{transform:translate3d(var(--px,0px),var(--py,0px),0)}


/* =========================================================
   MAD v5.3 — HERO COMPOSITION / VISUAL REFINEMENT
   ========================================================= */
.hero-home{overflow:hidden}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(460px,.9fr);gap:54px;align-items:center;min-height:0;padding-top:18px}
.hero-copy{min-width:0;position:relative;z-index:3}
.hero-copy h1{font-size:clamp(3.05rem,4.55vw,5.15rem);line-height:.98;letter-spacing:-.055em;max-width:700px;margin-bottom:24px;text-wrap:balance}
.hero-copy h1>span{display:block;white-space:nowrap}
.hero-copy h1>span:first-child{color:var(--ink)!important}
.hero-copy h1>span:nth-child(2),.hero-copy h1>span:nth-child(3){background:linear-gradient(100deg,#168acb 0%,#3d6fe8 52%,#267fc5 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.hero-copy .lead{max-width:620px}
.hero-product{min-height:var(--hero-visual-height,560px);height:var(--hero-visual-height,560px);display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate}
.product-window{width:var(--hero-visual-size,430px);height:min(var(--hero-visual-height,560px),620px);aspect-ratio:auto;max-width:88%;border-radius:var(--hero-visual-radius,34px);padding:30px;overflow:hidden;background:linear-gradient(145deg,#183f8e 0%,#102f70 52%,#091f51 100%);box-shadow:0 38px 85px rgba(21,49,113,.25);transform:none;animation:heroCardFloatClean 7s ease-in-out infinite}
.product-window:after{inset:12px;border-radius:calc(var(--hero-visual-radius,34px) - 10px);border-color:rgba(255,255,255,.12)}
.product-window:before{inset:-40px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(44,176,242,.25),transparent 68%);filter:blur(22px);z-index:-2}
.product-top{position:relative;z-index:3}
.product-mark{width:calc(var(--hero-mark-size,150px) + 36px);height:calc(var(--hero-mark-size,150px) + 36px);padding:0;margin:70px auto 30px;background:transparent!important;box-shadow:none!important;border-radius:0!important;display:grid;place-items:center;position:relative;z-index:3}
.product-mark:before{content:"";position:absolute;width:calc(var(--hero-mark-size,150px) + 32px);height:calc(var(--hero-mark-size,150px) + 32px);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 68%);filter:blur(4px);z-index:-1;animation:markHalo 5s ease-in-out infinite}
.product-mark img{width:var(--hero-mark-size,150px)!important;height:var(--hero-mark-size,150px)!important;max-width:none!important;max-height:none!important;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.16));animation:markFloatClean 5s ease-in-out infinite}
.product-chips{position:relative;z-index:3}
.product-bottom{z-index:3}
.product-orbit{width:min(520px,105%);height:min(520px,105%);border-color:rgba(38,116,207,.20);z-index:-1}
.orbit-chip{z-index:6;border-color:rgba(22,138,203,.16);box-shadow:0 12px 32px rgba(16,45,90,.10);white-space:nowrap}
html[data-theme="light"] .hero-product:before{content:"";position:absolute;inset:4% -5% 4% -5%;z-index:-3;border-radius:48% 52% 45% 55% / 48% 44% 56% 52%;background:radial-gradient(circle at 48% 42%,rgba(39,164,229,.22),rgba(88,111,220,.09) 38%,transparent 70%);filter:blur(8px);animation:heroLightAura 8s ease-in-out infinite}
html[data-theme="light"] .hero-product:after{content:"";position:absolute;width:78%;height:76%;right:2%;top:12%;z-index:-4;border-radius:50%;background:linear-gradient(135deg,rgba(40,156,224,.10),rgba(74,95,190,.07),transparent 72%);filter:blur(24px);animation:heroLightDrift 12s ease-in-out infinite alternate}
html[data-theme="dark"] .hero-copy h1>span:first-child{color:#eef5ff!important}

/* Client media: never stretch, crop or expose broken dimensions. */
.client-logo-item{overflow:hidden}
.client-logo-item img{display:block!important;width:auto!important;height:auto!important;max-width:calc(100% - 18px)!important;max-height:var(--client-logo-height,42px)!important;object-fit:contain!important;object-position:center!important}
.client-logo-item span{max-width:100%}

/* Stats hover + entry feel */
.hero-proof>div{transition:transform .35s ease,opacity .35s ease}
.hero-proof>div:hover{transform:translateY(-4px)}

@keyframes heroCardFloatClean{0%,100%{transform:translate3d(0,0,0) rotate(.5deg)}50%{transform:translate3d(0,-10px,0) rotate(-.4deg)}}
@keyframes markFloatClean{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-7px,0) scale(1.025)}}
@keyframes markHalo{50%{transform:scale(1.08);opacity:.7}}
@keyframes heroLightAura{50%{transform:scale(1.05) translate3d(-10px,8px,0);opacity:.85}}
@keyframes heroLightDrift{to{transform:translate3d(-28px,20px,0) scale(1.08)}}

/* Quick Actions: preserve the right-edge vertical tab on all desktop sizes. */
.quick-actions{right:0;top:50%;bottom:auto;transform:translateY(-50%)}
.quick-actions-toggle{width:46px;height:154px;border-radius:17px 0 0 17px;padding:12px 0}
.quick-actions-panel{right:58px;top:50%;bottom:auto;transform:translate(12px,-50%) scale(.98);transform-origin:right center}
.quick-actions.is-open .quick-actions-panel{transform:translate(0,-50%) scale(1)}

@media (max-width:1150px){
 .hero-grid{grid-template-columns:minmax(0,1fr) minmax(400px,.9fr);gap:28px}
 .hero-copy h1{font-size:clamp(2.9rem,4.8vw,4.35rem)}
 .hero-product{--hero-visual-size:min(var(--hero-visual-size,430px),42vw);--hero-visual-height:min(var(--hero-visual-height,560px),540px)}
}
@media (max-width:900px){
 .hero-grid{grid-template-columns:1fr;gap:18px;padding-top:20px}
 .hero-copy h1{font-size:clamp(3rem,8vw,5rem);max-width:760px}
 .hero-product{height:500px;min-height:500px;--hero-visual-size:min(var(--hero-visual-size,430px),78vw);--hero-visual-height:500px}
}
@media (max-width:700px){
 .hero-copy h1{font-size:clamp(2.45rem,11vw,3.7rem);line-height:1.0}
 .hero-copy h1>span{white-space:normal}
 .hero-product{height:390px;min-height:390px;--hero-visual-size:min(var(--hero-visual-size,430px),82vw);--hero-visual-height:390px}
 .product-window{max-width:82vw;padding:22px}
 .product-mark{margin-top:45px}
 .product-orbit{width:330px;height:330px}
 .quick-actions-toggle{width:42px;height:126px;border-radius:14px 0 0 14px}
 .quick-actions-panel{right:52px;width:min(320px,calc(100vw - 68px))}
}
@media (prefers-reduced-motion:reduce){
 .product-window,.product-mark img,.product-mark:before,.hero-product:before,.hero-product:after{animation:none!important}
}

.hero-product{transform:translate3d(var(--px,0px),calc(var(--py,0px) + var(--scroll-y,0px)),0)}


/* =========================================================
   MAD v5.4 — RESPONSIVE HERO / BRAND MEDIA / CLIENT REFINEMENT
   ========================================================= */
.logo{width:var(--logo-width,170px);max-height:var(--logo-height,64px)}
.logo-image{width:100%;height:auto;max-height:var(--logo-height,64px);object-fit:contain;object-position:left center}
.logo-footer .logo-image{object-position:left center}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(430px,.92fr);gap:52px;align-items:center}
.hero-copy{min-width:0;max-width:680px}
.hero-copy h1{font-size:clamp(3rem,3.65vw,4.35rem);line-height:.99;letter-spacing:-.052em;max-width:650px;overflow:visible}
.hero-copy h1>span{white-space:normal;display:block}
.hero-copy h1>span:first-child{white-space:nowrap}
.hero-copy .lead{max-width:600px}
.hero-product{min-width:0;overflow:visible}
.product-window{overflow:hidden}
.product-mark{background:transparent!important;box-shadow:none!important;border-radius:0!important}
.product-mark img{border-radius:var(--hero-mark-radius,28px)}
.product-mark[style*="--hero-mark-shadow:none"] img{filter:none!important}
.product-mark[style*="--hero-mark-shadow:strong"] img{filter:drop-shadow(0 20px 34px rgba(10,31,76,.26))!important}
.product-mark[style*="--hero-mark-shadow:subtle"] img{filter:drop-shadow(0 14px 28px rgba(13,34,79,.18))!important}
.capability-icon{width:54px;height:54px;border-radius:15px;right:22px;top:20px}
.capability-icon svg{width:30px;height:30px;display:block}
.capability-card h3{margin-top:70px}
.client-track{will-change:transform}
.client-logo-item{min-width:190px;width:190px;height:94px;padding:15px 20px}
.client-logo-item img{max-width:150px!important;max-height:var(--client-logo-height,42px)!important;width:auto!important;height:auto!important;border-radius:0!important;box-shadow:none!important}
.client-logo-item span{font-size:.86rem;line-height:1.25}
@media (min-width:1200px){
  .hero-copy h1{font-size:clamp(3.1rem,3.55vw,4.25rem)}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(450px,.88fr);gap:62px}
  .hero-product{padding-right:20px}
}
@media (max-width:1199px) and (min-width:1060px){
  .hero-copy h1{font-size:clamp(2.9rem,3.7vw,4rem)}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(400px,.86fr);gap:34px}
}
@media (max-width:1050px){
  .logo{width:min(var(--logo-width,170px),155px)}
  .hero-grid{grid-template-columns:1fr;gap:12px}
  .hero-copy{max-width:760px}
  .hero-copy h1{font-size:clamp(3rem,7.5vw,4.8rem);max-width:760px}
  .hero-product{min-height:520px}
}
@media (max-width:700px){
  .logo{width:min(var(--logo-width,170px),132px);max-height:var(--logo-height,56px)}
  .hero-copy h1{font-size:clamp(2.45rem,10.8vw,3.6rem);line-height:1.01;max-width:100%}
  .hero-copy h1>span:first-child{white-space:normal}
  .hero-product{min-height:420px;height:420px}
  .product-window{width:min(var(--hero-visual-size,430px),86vw);max-width:86vw}
  .capability-icon{width:48px;height:48px}
  .capability-icon svg{width:27px;height:27px}
  .client-logo-item{min-width:165px;width:165px;height:78px}
}

/* =========================================================
   MAD v5.5 — PRESERVE THE APPROVED STUDIO COMPOSITION
   Non-destructive refinements: preserve the v5.4 hero, orbit,
   Quick Actions and featured portfolio geometry.
   ========================================================= */
.hero-home .hero-grid{grid-template-columns:minmax(0,680px) minmax(430px,1fr);gap:40px;align-items:center}
.hero-copy{width:100%;max-width:680px}
.hero-copy h1{max-width:680px;text-wrap:balance;overflow-wrap:normal}
.hero-copy h1>span{max-width:100%;}
.hero-product{width:100%;min-width:0;}
.hero-product .product-window{flex:0 0 auto;}
.hero-proof{width:min(100%,700px);max-width:700px;margin-left:0;margin-right:auto;}
.hero-proof>div{min-width:0;}
.hero-proof span{white-space:normal;}
.work-section .section-head{align-items:flex-end}
.work-section .section-head h2{max-width:600px}
.work-grid{grid-template-columns:minmax(0,1.35fr) minmax(220px,.8fr) minmax(220px,.8fr);align-items:start}
.work-card:first-child{grid-row:span 2}
.work-card:first-child .work-image,.work-card:first-child .work-art{aspect-ratio:1.6/1}
.work-card:not(:first-child) .work-image,.work-card:not(:first-child) .work-art{aspect-ratio:1.65/1}
.quick-actions{right:0;top:50%;bottom:auto;transform:translateY(-50%)}
.quick-actions-toggle{width:46px;height:154px;border-radius:17px 0 0 17px;padding:12px 0}
.quick-actions-panel{right:58px;top:50%;bottom:auto;transform:translate(12px,-50%) scale(.98);transform-origin:right center}
.quick-actions.is-open .quick-actions-panel{transform:translate(0,-50%) scale(1)}
/* Keep uploaded hero media visually intact; radius/shadow controls apply to the actual image. */
.product-mark{background:transparent!important;}
.product-mark img{display:block;object-fit:contain;}
@media (max-width:1199px){
  .hero-home .hero-grid{grid-template-columns:minmax(0,1fr) minmax(400px,.88fr);gap:30px}
  .hero-copy h1{font-size:clamp(2.8rem,4.2vw,4rem)}
}
@media (max-width:1050px){
  .hero-home .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-copy{max-width:760px}
  .hero-product{min-height:520px}
  .hero-proof{margin-top:22px}
}
@media (max-width:700px){
  .hero-copy h1{font-size:clamp(2.45rem,10.8vw,3.6rem);line-height:1.01}
  .hero-proof{grid-template-columns:1fr 1fr;width:100%;}
  .hero-proof>div{margin-right:14px;padding-right:14px}
  .work-grid{grid-template-columns:1fr}
  .work-card:first-child{grid-row:auto}
}
html.mad-no-hero-orbit .product-orbit,html.mad-no-hero-orbit .product-mark img,html.mad-no-hero-orbit .product-mark:before{animation:none!important}
\n\n/* =========================================================\n   MAD v5.6 — PRESERVE THE APPROVED VISUAL LANGUAGE\n   Only targeted corrections: Poppins, old card geometry, internal-page\n   hierarchy, blog image consistency, and Quick Actions reliability.\n   ========================================================= */\n:root{--font-sans:'Poppins',sans-serif}\nbody{font-family:'Poppins',sans-serif}\nbutton,input,select,textarea{font-family:'Poppins',sans-serif}\n.logo,.theme-toggle-text,.eyebrow,.card-number,.hero-proof strong,.stat-row strong{font-family:'Poppins',sans-serif}\n\n/* Do not render an accessibility skip control as a visible page element. */\n.skip{display:none!important}\n\n/* Restore the clean service-card proportions/spacing from the approved home layout. */\n.capability-grid.services-directory{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}\n.services-directory .capability-card{min-height:334px;padding:28px 29px 25px;border-radius:20px;display:flex;flex-direction:column;align-items:flex-start}\n.services-directory .capability-card h3{margin-top:auto;margin-bottom:12px;font-size:1.22rem;line-height:1.2;letter-spacing:-.025em}\n.services-directory .capability-card p{font-size:.88rem;line-height:1.65;margin:0;max-width:100%}\n.services-directory .capability-card .card-link{margin-top:20px}\n.services-directory .capability-card:hover{transform:translateY(-7px)}\n.services-directory .capability-icon{position:absolute;right:27px;top:27px;width:58px;height:58px;border-radius:16px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}\n.services-directory .capability-icon svg{width:29px;height:29px}\n\n/* Internal page titles: strong, premium and readable rather than oversized. */\n.page-hero{padding:70px 0 58px}\n.page-hero h1{font-size:clamp(2.65rem,4.4vw,4.45rem);line-height:1.02;letter-spacing:-.052em;max-width:900px;margin:18px 0 18px}\n.page-hero .lead{max-width:760px;font-size:1.02rem;line-height:1.75}\n.page-hero-compact h1{max-width:820px}\n\n/* Blog cards always have a visual header, even when a post has no featured image. */\n.blog-image{height:218px;overflow:hidden;background:var(--surface-soft)}\n.blog-image img{width:100%;height:100%;object-fit:cover;display:block}\n.blog-image-fallback{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:radial-gradient(circle at 70% 25%,rgba(22,138,203,.22),transparent 35%),linear-gradient(135deg,#eaf3fb,#d9e8f6)}\n.blog-image-fallback span{font:700 2.6rem/1 'Poppins',sans-serif;letter-spacing:-.08em;color:#203f91}\n.blog-image-fallback small{font:600 .62rem/1 'JetBrains Mono',monospace;letter-spacing:.18em;color:#168acb}\n.blog-card{min-height:100%;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}\n.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(22,138,203,.38)}\n.blog-card:hover .blog-image img{transform:scale(1.045)}\n\n/* Quick Actions: preserve the right-edge tab and guarantee the panel is clickable. */\n.quick-actions{z-index:9998;pointer-events:auto}\n.quick-actions-toggle{position:relative;z-index:2;pointer-events:auto}\n.quick-actions-panel{z-index:1;pointer-events:none}\n.quick-actions.is-open .quick-actions-panel{pointer-events:auto}\n\n/* Hero proof/stat row stays inside the content column at every desktop width. */\n.hero-proof{width:100%;max-width:700px;min-width:0;overflow:hidden}\n.hero-proof>div{min-width:0}\n.hero-proof strong{font-size:1.7rem}\n.hero-proof span{white-space:normal}\n\n@media (max-width:1100px){\n  .capability-grid.services-directory{grid-template-columns:repeat(2,minmax(0,1fr))}\n}\n@media (max-width:760px){\n  .page-hero{padding:52px 0 44px}\n  .page-hero h1{font-size:clamp(2.25rem,10vw,3.3rem);line-height:1.03}\n  .capability-grid.services-directory{grid-template-columns:1fr;gap:16px}\n  .services-directory .capability-card{min-height:300px}\n  .blog-image{height:190px}\n  .hero-proof{display:grid;grid-template-columns:1fr 1fr;overflow:visible}\n  .hero-proof>div{margin-right:0;padding-right:14px}\n}\n
/* =========================================================
   MAD v5.8 — CONTROLLED FINAL FIX LAYER
   Based on the approved v5.7 visual language.
   Only requested structure, contrast, internal-page and mobile
   reliability fixes are applied here.
   ========================================================= */

/* ---------------------------------------------------------
   HOMEPAGE — REMOVE DUPLICATE HERO STAT STRIP
   The source hero stats were removed from front-page.php.
   Keep the real stats section after the six capabilities.
   --------------------------------------------------------- */

.hero-home + .recognition-strip{padding-top:0}

/* Recognition cards: clearer hierarchy without changing the layout. */
.recognition-grid{gap:14px}
.recognition-grid>div{min-height:128px;padding:20px 22px;display:flex;flex-direction:column;justify-content:center;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.recognition-grid>div:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(22,138,203,.32)}
.recognition-grid strong{font-family:'Poppins',sans-serif;letter-spacing:-.04em}

/* ---------------------------------------------------------
   DARK BLUE SECTIONS — ALWAYS HIGH-CONTRAST SUPPORTING COPY
   Requested: white text in light AND dark mode.
   --------------------------------------------------------- */
.tech-banner-inner,
.mad-signal{color:#fff}
.tech-banner-inner p,
html[data-theme="light"] .tech-banner-inner p,
html[data-theme="dark"] .tech-banner-inner p,
.mad-signal p,
html[data-theme="light"] .mad-signal p,
html[data-theme="dark"] .mad-signal p{
  color:#fff !important;
  opacity:.92;
}
.tech-banner-inner h2,
.mad-signal h2{color:#fff !important}

/* ---------------------------------------------------------
   CTA → FOOTER — TRUE ZERO GAP
   FAQ sits before CTA in the homepage source.
   --------------------------------------------------------- */
main .cta-section{margin:0!important;padding:0!important}
main .cta-section .container{margin:0!important;padding:0!important;width:100%!important;max-width:none!important}
main .cta-section .cta-panel{margin:0!important;border-radius:0!important}
main .cta-section + .site-footer{margin-top:0!important}

/* ---------------------------------------------------------
   INTERNAL PAGES — REAL PAGE HIERARCHY
   Make content read as designed website sections rather than
   a narrow block of notes.
   --------------------------------------------------------- */
.page-hero .container{max-width:1180px}
.page-hero h1{max-width:940px}
.page-hero .lead{max-width:820px}
.content{max-width:none;color:var(--ink-2);font-size:1rem;line-height:1.82}
.content p{margin:0 0 1.15rem}
.content h2{font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 18px}
.content h3{font-size:1.3rem;line-height:1.2;margin:30px 0 10px}
.content h4{font-size:1.05rem;margin:24px 0 8px}
.content ul,.content ol{padding-left:1.25rem;margin:0 0 1.2rem}
.content li{margin:.45rem 0}
.content a{color:var(--brand);font-weight:600}

.about-story{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:70px;align-items:start}
.about-story-intro{position:sticky;top:110px}
.about-story-intro h2,.about-values-intro h2{font-size:clamp(2rem,3.5vw,3.2rem);line-height:1.04;letter-spacing:-.045em;margin:10px 0 16px}
.about-story-copy{max-width:820px}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.about-stats>div{min-height:140px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;justify-content:center}
.about-stats strong{font:700 2rem/1 'Poppins',sans-serif;letter-spacing:-.045em;color:var(--ink)}
.about-stats span{margin-top:9px;color:var(--muted);font-size:.78rem;line-height:1.45}
.about-reasons .reason-card{min-height:220px;padding:24px;position:relative;overflow:hidden}
.reason-card h3{margin:30px 0 10px}
.reason-card p{margin:0;color:var(--muted)}
.about-values{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:70px;align-items:start}
.about-values-intro{position:sticky;top:110px}
.value-stack{display:grid;gap:10px}
.value-row{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:grid;grid-template-columns:minmax(170px,.7fr) minmax(0,1.3fr);gap:20px;align-items:start;box-shadow:var(--shadow-soft)}
.value-row>span{font-weight:700;color:var(--ink)}
.value-row p{margin:0;color:var(--muted);font-size:.87rem;line-height:1.6}
.client-cloud{gap:12px}
.client-pill{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.client-pill:hover{transform:translateY(-3px);border-color:rgba(22,138,203,.38);box-shadow:var(--shadow)}

/* Services directory can expose child service pages without altering existing cards. */
.services-directory .capability-card{min-height:350px}
.service-card-sublist{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 42px}
.service-card-sublist span{font-size:.67rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 8px;background:var(--surface-soft)}
.service-detail-layout{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:42px;align-items:start}
.service-side{display:grid;gap:14px;position:sticky;top:105px}
.service-side-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:23px;box-shadow:var(--shadow-soft)}
.service-side-card ul{list-style:none;padding:0;margin:15px 0 0}
.service-side-card li{position:relative;padding:10px 0 10px 20px;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.service-side-card li:last-child{border-bottom:0}
.service-side-card li:before{content:'→';position:absolute;left:0;color:var(--brand);font-weight:700}
.service-side-card p{color:var(--muted);font-size:.87rem;line-height:1.65}
.tag-cloud{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tag-cloud .tag{border:1px solid var(--line);background:var(--surface-soft);border-radius:999px;padding:7px 10px;color:var(--muted);font-size:.7rem}
.service-back{font-size:.78rem;font-weight:700;color:var(--brand)}
.content-intro{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.content-intro .eyebrow{margin-bottom:8px}
.content-intro h2{margin:0;max-width:780px}
.service-child-card,.related-service-card{position:relative;min-height:230px;padding:25px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start}
.service-child-card h3,.related-service-card h3{margin:30px 0 10px}
.service-child-card p,.related-service-card p{color:var(--muted);font-size:.84rem;line-height:1.6;margin:0 0 30px}
.service-child-card .card-link{position:static;margin-top:auto}
.service-process-grid{grid-template-columns:repeat(4,1fr)}

/* ==========================================================================
   MAD PORTFOLIO DIRECTORY — REDESIGNED
   ========================================================================== */

.portfolio-page{
    overflow:clip;
    background:var(--bg);
}


/* ==========================================================================
   HERO
   ========================================================================== */

.portfolio-hero{
    position:relative;

    padding:38px 0 82px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(36,145,213,.12),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            var(--bg) 0%,
            var(--surface-soft) 100%
        );
}

.portfolio-hero .breadcrumbs{
    margin-bottom:42px;
}

.portfolio-hero-grid{
    display:grid;

    grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);

    gap:70px;

    align-items:center;
}

.portfolio-hero-copy{
    max-width:720px;
}

.portfolio-hero-copy .eyebrow{
    margin-bottom:18px;
}

.portfolio-hero-copy h1{
    max-width:720px;

    margin:0;

    color:var(--ink);

    font-size:clamp(3.1rem,5.8vw,6.1rem);

    line-height:.94;

    letter-spacing:-.065em;
}

.portfolio-hero-copy h1 span{
    display:block;

    color:var(--muted);
}

.portfolio-hero-lead{
    max-width:620px;

    margin:28px 0 0;

    color:var(--muted);

    font-size:1rem;

    line-height:1.75;
}


/* HERO STATS */

.portfolio-hero-stats{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    margin-top:40px;

    border-top:1px solid var(--line);
}

.portfolio-hero-stats>div{
    padding:19px 20px 0 0;

    border-right:1px solid var(--line);
}

.portfolio-hero-stats>div:not(:first-child){
    padding-left:20px;
}

.portfolio-hero-stats>div:last-child{
    border-right:0;
}

.portfolio-hero-stats strong{
    display:block;

    color:var(--ink);

    font-size:1.55rem;

    line-height:1.1;

    letter-spacing:-.04em;
}

.portfolio-hero-stats span{
    display:block;

    margin-top:6px;

    color:var(--muted);

    font-size:.67rem;

    line-height:1.4;
}


/* FEATURED PROJECT */

.portfolio-featured-project{
    display:block;

    overflow:hidden;

    border:1px solid var(--line);

    border-radius:28px;

    background:var(--surface);

    color:inherit;

    box-shadow:var(--shadow);

    text-decoration:none;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.portfolio-featured-project:hover{
    transform:translateY(-6px);

    border-color:rgba(22,138,203,.4);

    box-shadow:var(--shadow);
}

.portfolio-featured-image{
    position:relative;

    aspect-ratio:3/2;

    overflow:hidden;

    background:var(--surface-soft);
}

.portfolio-featured-thumb{
    display:block!important;

    width:100%!important;
    height:100%!important;

    object-fit:cover!important;

    transition:transform .6s ease;
}

.portfolio-featured-project:hover .portfolio-featured-thumb{
    transform:scale(1.035);
}

.portfolio-featured-overlay{
    position:absolute;

    left:18px;
    right:18px;
    bottom:18px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.portfolio-featured-overlay span,
.portfolio-featured-overlay b{
    padding:9px 12px;

    border:1px solid rgba(255,255,255,.3);

    border-radius:999px;

    background:rgba(8,20,38,.72);

    color:#fff;

    backdrop-filter:blur(10px);

    font-size:.62rem;

    line-height:1;
}

.portfolio-featured-overlay b{
    font-weight:700;
}

.portfolio-featured-overlay i{
    font-style:normal;

    margin-left:5px;
}

.portfolio-featured-meta{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:18px 20px 21px;
}

.portfolio-featured-meta small{
    display:block;

    margin-bottom:6px;

    color:var(--muted);

    font:700 .57rem/1 'JetBrains Mono',monospace;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.portfolio-featured-meta strong{
    color:var(--ink);

    font-size:1rem;
}

.portfolio-featured-meta>span{
    padding:8px 11px;

    border:1px solid var(--line);

    border-radius:999px;

    color:var(--muted);

    font-size:.61rem;

    white-space:nowrap;
}


/* ==========================================================================
   DIRECTORY
   ========================================================================== */

.portfolio-directory{
    padding:105px 0 120px;

    background:var(--bg);
}

.portfolio-directory-head{
    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(300px,.65fr);

    gap:70px;

    align-items:end;

    margin-bottom:38px;
}

.portfolio-directory-head h2{
    margin:13px 0 0;

    color:var(--ink);

    font-size:clamp(2.5rem,5vw,5rem);

    line-height:.94;

    letter-spacing:-.065em;
}

.portfolio-directory-head p{
    max-width:430px;

    margin:0;

    color:var(--muted);

    font-size:.9rem;

    line-height:1.8;
}


/* FILTERS */

.portfolio-filters{
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:30px;

    padding-bottom:25px;

    border-bottom:1px solid var(--line);
}

.portfolio-page .filter-btn{
    appearance:none;

    border:1px solid var(--line);

    border-radius:999px;

    padding:9px 14px;

    background:var(--surface);

    color:var(--muted);

    cursor:pointer;

    font:600 .62rem/1 'JetBrains Mono',monospace;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.portfolio-page .filter-btn:hover{
    transform:translateY(-1px);

    border-color:rgba(22,138,203,.4);

    color:var(--ink);
}

.portfolio-page .filter-btn.active{
    border-color:var(--brand);

    background:var(--brand);

    color:#fff;
}


/* ==========================================================================
   PROJECT GRID
   ========================================================================== */

.portfolio-grid-rich{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:20px;
}

.portfolio-card-rich{
    min-width:0;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border:1px solid var(--line);

    border-radius:24px;

    background:var(--surface);

    box-shadow:var(--shadow-soft);

    color:inherit;

    text-decoration:none;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.portfolio-card-rich:hover{
    transform:translateY(-7px);

    border-color:rgba(22,138,203,.4);

    box-shadow:var(--shadow);
}

.portfolio-card-rich.is-hidden{
    display:none;
}


/* PROJECT IMAGE */

.portfolio-art{
    position:relative;

    aspect-ratio:3/2;

    min-height:0;

    overflow:hidden;

    background:var(--surface-soft);
}

.portfolio-thumb{
    display:block!important;

    width:100%!important;
    height:100%!important;

    min-height:0!important;

    object-fit:cover!important;

    transition:transform .55s ease;
}

.portfolio-card-rich:hover .portfolio-thumb{
    transform:scale(1.035);
}

.portfolio-card-number{
    position:absolute;

    top:15px;
    left:15px;

    display:flex;

    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;

    border:1px solid rgba(255,255,255,.3);

    border-radius:50%;

    background:rgba(8,20,38,.72);

    color:#fff;

    backdrop-filter:blur(9px);

    font:700 .57rem/1 'JetBrains Mono',monospace;
}

.portfolio-card-category{
    position:absolute;

    right:15px;
    bottom:15px;

    max-width:calc(100% - 70px);

    overflow:hidden;

    padding:8px 11px;

    border:1px solid rgba(255,255,255,.3);

    border-radius:999px;

    background:rgba(8,20,38,.72);

    color:#fff;

    backdrop-filter:blur(9px);

    font:600 .58rem/1 'JetBrains Mono',monospace;

    text-overflow:ellipsis;

    white-space:nowrap;
}


/* NO IMAGE */

.portfolio-art-placeholder{
    width:100%;
    height:100%;

    display:grid;
    place-items:center;

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(36,145,213,.18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #142b4e,
            #071321
        );
}

.portfolio-art-placeholder span{
    color:#fff;

    font:800 clamp(4rem,7vw,6rem)/1 'Poppins',sans-serif;

    letter-spacing:-.08em;
}


/* CARD BODY */

.portfolio-card-body{
    min-height:175px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:20px;

    padding:20px 21px 22px;
}

.portfolio-card-body h3{
    margin:0 0 8px;

    color:var(--ink);

    font-size:1.16rem;

    line-height:1.15;

    letter-spacing:-.025em;
}

.portfolio-card-body p{
    max-width:340px;

    margin:0;

    color:var(--muted);

    font-size:.77rem;

    line-height:1.65;
}

.portfolio-card-link{
    color:var(--brand);

    font-size:.7rem;

    font-weight:700;
}

.portfolio-card-link i{
    margin-left:4px;

    font-style:normal;

    transition:transform .25s ease;
}

.portfolio-card-rich:hover .portfolio-card-link i{
    display:inline-block;

    transform:translateX(3px);
}


/* EMPTY */

.portfolio-empty{
    grid-column:1/-1;

    padding:70px 30px;

    border:1px dashed var(--line);

    border-radius:24px;

    text-align:center;
}

.portfolio-empty h3{
    margin:0 0 8px;

    color:var(--ink);
}

.portfolio-empty p{
    margin:0;

    color:var(--muted);
}


/* ==========================================================================
   PROOF SECTION
   ========================================================================== */

.portfolio-proof{
    padding:110px 0 120px;

    border-top:1px solid var(--line);

    background:var(--surface-soft);
}

.portfolio-proof-head{
    display:grid;

    grid-template-columns:minmax(0,1.05fr) minmax(300px,.65fr);

    gap:70px;

    align-items:end;

    margin-bottom:45px;
}

.portfolio-proof-head h2{
    max-width:760px;

    margin:13px 0 0;

    color:var(--ink);

    font-size:clamp(2.5rem,5vw,5rem);

    line-height:.94;

    letter-spacing:-.065em;
}

.portfolio-proof-head h2 span{
    color:var(--muted);
}

.portfolio-proof-head p{
    max-width:420px;

    margin:0;

    color:var(--muted);

    font-size:.9rem;

    line-height:1.8;
}

.portfolio-proof-grid{
    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:14px;
}

.portfolio-proof-card{
    min-height:205px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:21px;

    border:1px solid var(--line);

    border-radius:22px;

    background:var(--surface);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.portfolio-proof-card:hover{
    transform:translateY(-5px);

    border-color:rgba(22,138,203,.4);

    box-shadow:var(--shadow-soft);
}

.portfolio-proof-card>span{
    display:flex;

    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;

    border:1px solid var(--line);

    border-radius:50%;

    color:var(--brand);

    background:var(--surface-soft);

    font:700 .57rem/1 'JetBrains Mono',monospace;
}

.portfolio-proof-card h3{
    margin:0 0 8px;

    color:var(--ink);

    font-size:1.12rem;
}

.portfolio-proof-card p{
    margin:0;

    color:var(--muted);

    font-size:.76rem;

    line-height:1.65;
}


/* ==========================================================================
   CTA
   ========================================================================== */

.portfolio-cta-section{
    padding:105px 0;

    background:var(--bg);
}

.portfolio-cta{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:55px;

    padding:55px 58px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            #102f60,
            #214f91
        );

    box-shadow:0 25px 65px rgba(16,42,82,.16);
}

.portfolio-cta .eyebrow{
    color:#8fdfff;
}

.portfolio-cta h2{
    max-width:780px;

    margin:12px 0 14px;

    color:#fff!important;

    font-size:clamp(2.5rem,4.5vw,4.8rem);

    line-height:.94;

    letter-spacing:-.06em;
}

.portfolio-cta h2 span{
    display:block;

    color:rgba(255,255,255,.72);
}

.portfolio-cta p{
    max-width:650px;

    margin:0;

    color:rgba(255,255,255,.82)!important;

    font-size:.9rem;

    line-height:1.7;
}

.portfolio-cta .btn{
    flex:0 0 auto;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:1050px){

    .portfolio-hero-grid{
        grid-template-columns:1fr;

        gap:45px;
    }

    .portfolio-featured-project{
        max-width:760px;
    }

    .portfolio-directory-head,
    .portfolio-proof-head{
        grid-template-columns:1fr;

        gap:25px;
    }

    .portfolio-proof-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


@media(max-width:760px){

    .portfolio-hero{
        padding:28px 0 65px;
    }

    .portfolio-hero .breadcrumbs{
        margin-bottom:28px;
    }

    .portfolio-hero-copy h1{
        font-size:clamp(2.8rem,13vw,4.3rem);
    }

    .portfolio-hero-lead{
        font-size:.92rem;
    }

    .portfolio-hero-stats{
        grid-template-columns:1fr;
    }

    .portfolio-hero-stats>div,
    .portfolio-hero-stats>div:not(:first-child){
        padding:15px 0;

        border-right:0;

        border-bottom:1px solid var(--line);
    }

    .portfolio-hero-stats>div:last-child{
        border-bottom:0;
    }

    .portfolio-featured-project{
        border-radius:22px;
    }

    .portfolio-featured-meta{
        display:block;
    }

    .portfolio-featured-meta>span{
        display:inline-flex;

        margin-top:12px;
    }

    .portfolio-directory,
    .portfolio-proof{
        padding:75px 0 80px;
    }

    .portfolio-grid-rich{
        grid-template-columns:1fr;

        gap:15px;
    }

    .portfolio-art{
        aspect-ratio:3/2;
    }

    .portfolio-proof-grid{
        grid-template-columns:1fr;

        gap:12px;
    }

    .portfolio-proof-card{
        min-height:185px;
    }

    .portfolio-cta-section{
        padding:70px 0;
    }

    .portfolio-cta{
        display:block;

        padding:38px 25px;

        border-radius:23px;
    }

    .portfolio-cta h2{
        font-size:clamp(2.3rem,10vw,3.6rem);
    }

    .portfolio-cta .btn{
        display:inline-flex;

        margin-top:28px;
    }

}

/* Generic CTA used by internal pages */
.cta{padding:52px 56px;border-radius:26px;background:linear-gradient(135deg,#102a52,#173f86);color:#fff;box-shadow:0 24px 60px rgba(16,42,82,.16)}
.cta h2{color:#fff;max-width:720px;margin:10px 0 18px}
.cta p{color:rgba(255,255,255,.88);max-width:700px}
.cta .eyebrow{color:#8fdfff}

/* ---------------------------------------------------------
   MOBILE — STRUCTURAL, NOT DESIGNED BY OVERRIDE STACK
   --------------------------------------------------------- */
@media (max-width:760px){
  .site-header{height:66px!important;min-height:66px!important}
  .site-header .container.header-inner{height:66px!important;width:calc(100% - 24px)!important}
  .site-header .logo{width:min(var(--logo-width,145px),118px)!important;max-height:54px!important}
  .menu-toggle{width:42px!important;height:42px!important;display:block!important;margin-left:auto!important;padding:9px!important}
  .menu-toggle span{height:1px!important;margin:5px 0!important}
  body.menu-open{overflow:hidden}
  .mobile-menu{position:absolute;left:0;right:0;top:66px;z-index:9990;box-shadow:0 20px 40px rgba(10,30,60,.10)}
  .mobile-menu .container{width:calc(100% - 30px)!important;padding:8px 0 20px!important}
  .mobile-menu ul ul{padding-left:14px}
  .mobile-menu li li a{font-size:.86rem;padding:11px 0}

  .hero-home{padding-top:34px!important}
  .hero-home .hero-grid{gap:8px!important}
  .hero-copy h1{font-size:clamp(2.35rem,10.5vw,3.45rem)!important;line-height:1.01!important;margin-bottom:20px!important}
  .hero-copy .lead{font-size:15px!important;line-height:1.58!important;margin-bottom:22px!important}
  .hero-home .hero-actions{align-items:flex-start!important;width:auto!important}
  .hero-home .hero-actions .btn{width:auto!important}

  /* Hero visual: preserve all four external pills and all four internal labels. */
  .hero-product{height:410px!important;min-height:410px!important;margin-top:8px!important;overflow:visible!important}
  .product-window{width:min(310px,82vw)!important;height:auto!important;aspect-ratio:430/560!important;padding:21px!important;border-radius:28px!important}
  .product-top{font-size:8px!important}
  .product-top small{font-size:7px!important}
  .product-mark{width:116px!important;height:116px!important;margin:43px auto 22px!important;padding:15px!important}
  .product-chips{position:absolute!important;left:9%!important;right:9%!important;bottom:14%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;z-index:8!important}
  .product-chips span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;padding:7px 8px!important;font-size:7.5px!important;line-height:1.2!important}
  .product-bottom{left:9%!important;right:9%!important;bottom:5%!important;font-size:7.5px!important;white-space:nowrap!important}
  .orbit-chip{font-size:9px!important;padding:8px 10px!important;line-height:1.2!important;white-space:nowrap!important;z-index:30!important}
  .hero-home .orbit-chip.chip-one{left:-7px!important;top:24%!important}
  .hero-home .orbit-chip.chip-two{right:-7px!important;top:18%!important}
  .hero-home .orbit-chip.chip-three{right:-7px!important;bottom:25%!important;top:auto!important}
  .hero-home .orbit-chip.chip-four{left:-7px!important;bottom:12%!important;top:auto!important}

  /* Real stats remain later on the page; hero no longer renders the duplicate row. */
  .hero-proof{display:none!important}

  .recognition-strip{padding-bottom:28px!important}
  .recognition-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:calc(100% - 30px)!important}
  .recognition-grid>div{min-height:112px;padding:16px!important}
  .recognition-grid strong{font-size:1.35rem!important}
  .recognition-grid small{font-size:.67rem!important;line-height:1.4!important}

  .stats-section{padding-top:28px!important;padding-bottom:48px!important}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat-row>div{padding:22px 16px!important}
  .stat-row strong{font-size:1.75rem!important}

  /* Quick Actions: panel is positioned relative to the right-edge tab,
     not as a fixed element inside a transformed ancestor. */
  #quick-actions{position:fixed!important;right:0!important;top:50%!important;bottom:auto!important;width:auto!important;height:auto!important;transform:translateY(-50%)!important;z-index:99999!important}
  #quick-actions .quick-actions-toggle{width:42px!important;height:124px!important;border-radius:14px 0 0 14px!important;margin:0!important;z-index:100001!important}
  #quick-actions .quick-actions-panel{position:absolute!important;right:50px!important;left:auto!important;top:50%!important;bottom:auto!important;width:min(310px,calc(100vw - 64px))!important;max-width:none!important;max-height:72vh!important;overflow-y:auto!important;padding:10px!important;transform:translate(12px,-50%) scale(.98)!important;transform-origin:right center!important;z-index:100000!important}
  #quick-actions.is-open .quick-actions-panel{transform:translate(0,-50%) scale(1)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  #quick-actions .quick-actions-panel>a,#quick-actions .qa-disabled{grid-template-columns:34px 1fr 14px!important;gap:8px!important;padding:10px 7px!important}
  #quick-actions .qa-icon,#quick-actions .qa-disabled b{width:30px!important;height:30px!important;border-radius:9px!important}
  #quick-actions .quick-actions-panel strong{font-size:.74rem!important}
  #quick-actions .quick-actions-panel small{font-size:.61rem!important}
  #quick-actions .qa-toggle-label{font-size:7px!important}

  /* Internal pages */
  .page-hero{padding:48px 0 40px!important}
  .page-hero h1{font-size:clamp(2.15rem,9.5vw,3.2rem)!important;line-height:1.03!important}
  .page-hero .lead{font-size:.95rem!important;line-height:1.65!important}
  .about-story,.about-values,.service-detail-layout,.project-detail{grid-template-columns:1fr!important;gap:30px!important}
  .about-story-intro,.about-values-intro,.service-side,.project-visual{position:static!important}
  .about-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .about-stats>div{min-height:120px;padding:18px!important}
  .about-stats strong{font-size:1.65rem!important}
  .value-row{grid-template-columns:1fr!important;gap:7px!important}
  .service-process-grid{grid-template-columns:1fr 1fr!important}
  .portfolio-grid-rich{grid-template-columns:1fr!important}
  .portfolio-art,.portfolio-thumb{min-height:220px!important}
  .project-visual .portfolio-art{min-height:320px!important}
  .cta{padding:34px 24px!important;border-radius:22px!important}
  .cta h2{font-size:2rem!important}
  .tech-banner{padding-top:45px!important}
  .tech-banner-inner{padding:32px 24px!important;gap:28px!important}
  .tech-banner-inner p{font-size:.92rem!important;line-height:1.65!important}
  .mad-signal{padding:32px 24px!important;border-radius:24px!important}
  .mad-signal p{font-size:.92rem!important;line-height:1.65!important}
  .faq-home{gap:25px!important}
  main .cta-section .cta-panel{min-height:470px!important;padding:80px 24px 84px!important}
  main .cta-section h2{font-size:38px!important}
  main .cta-section p{font-size:15px!important}
}

@media (min-width:761px) and (max-width:1100px){
  .about-story,.about-values,.service-detail-layout,.project-detail{grid-template-columns:1fr 1.5fr;gap:38px}
  .about-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .service-process-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid-rich{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* MAD 5.9.2 — primary navigation hierarchy. */
@media (min-width:761px){
  .primary-nav>ul>li{position:relative;height:66px;display:flex;align-items:center}
  .primary-nav>ul>li>a{display:flex;align-items:center;height:66px;white-space:nowrap}
  .primary-nav>ul>li.menu-item-has-children>a:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px;opacity:.72;transition:transform .2s ease}
  .primary-nav>ul>li.menu-item-has-children:hover>a:after,.primary-nav>ul>li.menu-item-has-children:focus-within>a:after{transform:rotate(225deg);margin-bottom:-3px}
  .primary-nav>ul>li.menu-item-has-children>.sub-menu{position:absolute;left:50%;top:calc(100% - 1px);transform:translate(-50%,10px);width:min(920px,calc(100vw - 40px));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;padding:22px 24px 24px;margin:0;list-style:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:0 0 18px 18px;box-shadow:0 24px 55px rgba(8,28,58,.14);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:9999}
  .primary-nav>ul>li.menu-item-has-children:hover>.sub-menu,.primary-nav>ul>li.menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
  .primary-nav>ul>li.menu-item-has-children>.sub-menu:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .primary-nav>ul>li.menu-item-has-children>.sub-menu>li{min-width:0;padding:0 12px 18px;border-right:1px solid var(--line)}
  .primary-nav>ul>li.menu-item-has-children>.sub-menu>li:nth-child(3n){border-right:0}
  .primary-nav>ul>li.menu-item-has-children>.sub-menu>li>a{display:flex;align-items:center;justify-content:space-between;padding:2px 0 10px;font-size:.82rem;font-weight:800;letter-spacing:.01em;color:var(--ink)}
  .primary-nav>ul>li.menu-item-has-children>.sub-menu>li>a:after{content:"→";color:var(--brand);font-size:.9rem;transition:transform .18s ease}
  .primary-nav>ul>li.menu-item-has-children>.sub-menu>li:hover>a:after{transform:translateX(3px)}
  .primary-nav>ul>li.menu-item-has-children>.sub-menu>li>.sub-menu{position:static;display:block;margin:0;padding:0;list-style:none}
  .primary-nav>ul>li.menu-item-has-children>.sub-menu>li>.sub-menu li{margin:0;padding:0}
  .primary-nav>ul>li.menu-item-has-children>.sub-menu>li>.sub-menu a{display:block;padding:5px 0;color:var(--muted);font-size:.77rem;font-weight:600;line-height:1.35;white-space:normal}
  .primary-nav>ul>li.menu-item-has-children>.sub-menu>li>.sub-menu a:hover{color:var(--brand)}
  html[data-theme="dark"] .primary-nav>ul>li.menu-item-has-children>.sub-menu{box-shadow:0 26px 60px rgba(0,0,0,.3)}
}
@media (max-width:760px){
  .mobile-menu li.menu-item-has-children>a{display:flex;align-items:center;justify-content:space-between}
  .mobile-menu li.menu-item-has-children>a:after{content:"+";font-size:20px;font-weight:400;line-height:1;transition:transform .2s ease}
  .mobile-menu li.menu-item-has-children.submenu-open>a:after{transform:rotate(45deg)}
  .mobile-menu ul ul{display:none;padding-left:14px!important}
  .mobile-menu li.submenu-open>ul{display:block}
  .mobile-menu ul ul ul{display:none;padding-left:12px!important}
  .mobile-menu li.submenu-open>ul>li.menu-item-has-children.submenu-open>ul{display:block}
}

/* ========================================================================
   MAD v5.9.3 — INTERNAL SERVICE EXPERIENCE
   Structured internal pages: strong hero, useful hierarchy, visual cards,
   readable long-form content. This is intentionally additive and does not
   alter the approved homepage composition.
   ======================================================================== */
.internal-hero{position:relative;overflow:hidden;padding:76px 0 82px;background:linear-gradient(180deg,var(--surface-soft) 0%,var(--bg) 100%);border-bottom:1px solid var(--line)}
.internal-hero:before{content:"";position:absolute;width:620px;height:620px;right:-180px;top:-240px;border-radius:50%;background:radial-gradient(circle,rgba(22,138,203,.12),transparent 67%);pointer-events:none}
.internal-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);gap:72px;align-items:center;position:relative;z-index:1}
.internal-hero-copy{min-width:0}
.internal-hero .breadcrumbs{margin-bottom:27px}
.internal-hero .eyebrow{margin-bottom:14px}
.internal-hero h1{font-size:clamp(3.4rem,6vw,6.5rem);line-height:.94;letter-spacing:-.065em;max-width:820px;margin:0 0 26px;color:var(--ink)}
.internal-hero .lead{max-width:740px;font-size:1.04rem;line-height:1.78;color:var(--muted);margin:0}
.internal-hero .hero-actions{margin-top:30px}
.internal-proof{display:flex;flex-wrap:wrap;gap:0;margin-top:34px;border-top:1px solid var(--line);max-width:760px}
.internal-proof span{flex:1;min-width:150px;padding:17px 18px 0 0;border-right:1px solid var(--line)}
.internal-proof span+span{padding-left:18px}
.internal-proof span:last-child{border-right:0}
.internal-proof b{display:block;font-size:.83rem;color:var(--ink)}
.internal-proof small{display:block;margin-top:4px;color:var(--muted);font-size:.72rem;line-height:1.45}
.internal-visual{position:relative;min-width:0;display:grid;place-items:center}
.internal-visual-glow{position:absolute;width:470px;height:470px;border-radius:50%;background:radial-gradient(circle,rgba(22,138,203,.18),transparent 68%);filter:blur(2px)}
.service-hero-card{position:relative;width:min(100%,500px);min-height:470px;padding:28px 30px 27px;border-radius:30px;background:linear-gradient(145deg,#204899 0%,#153474 56%,#0d244f 100%);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px rgba(10,36,80,.22);color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.service-hero-card:before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.12);border-radius:22px;pointer-events:none}
.service-hero-card:after{content:"";position:absolute;width:320px;height:320px;right:-130px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(43,161,224,.45),transparent 68%)}
.service-hero-card .product-top,.service-hero-card h2,.service-hero-card p,.service-hero-card-tags,.service-hero-card-number,.service-hero-card-line{position:relative;z-index:2}
.service-hero-card h2{font-size:clamp(2.4rem,4vw,4.2rem);line-height:.96;letter-spacing:-.06em;margin:16px 0 24px;max-width:440px}
.service-hero-card-number{position:absolute;right:28px;bottom:95px;font:700 5rem/.9 'Poppins',sans-serif;letter-spacing:-.08em;color:rgba(255,255,255,.08)}
.service-hero-card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.service-hero-card-tags span{font-size:.69rem;font-weight:600;padding:8px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.06)}
.service-hero-card-line{display:grid;gap:8px;max-width:80%}
.service-hero-card-line span{height:7px;border-radius:99px;background:rgba(255,255,255,.17)}
.service-hero-card-line span:nth-child(2){width:72%}.service-hero-card-line span:nth-child(3){width:48%}
.service-specialists-section{padding-top:92px;padding-bottom:96px}
.service-section-head{align-items:end;margin-bottom:34px}
.service-section-head h2{max-width:700px}
.service-section-head>p{max-width:480px}
.service-specialist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.service-specialist-card{min-height:255px;padding:25px 25px 22px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;justify-content:space-between;gap:22px;color:var(--ink);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.service-specialist-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(22,138,203,.38)}
.service-card-index{font:600 .7rem/1 'JetBrains Mono',monospace;color:var(--brand);letter-spacing:.12em}
.service-specialist-card h3{font-size:1.2rem;line-height:1.18;letter-spacing:-.025em;margin:16px 0 9px}
.service-specialist-card p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.65}
.service-specialist-card .card-link{font-size:.78rem;font-weight:700;color:var(--brand)}
.service-packages-section{padding-top:92px;padding-bottom:96px}
.package-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.package-card{min-height:275px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column}
.package-card h3{font-size:1.1rem;line-height:1.2;letter-spacing:-.025em;margin:24px 0 12px}
.package-card strong{font-size:1.02rem;line-height:1.3;color:var(--brand)}
.package-card p{margin:auto 0 0;color:var(--muted);font-size:.78rem;line-height:1.6}
.service-longform{max-width:900px}
.service-longform .content-intro{margin-bottom:32px}
.service-longform .content-intro h2{max-width:850px}
.service-longform>p,.service-longform>ul,.service-longform>ol{font-size:1rem;line-height:1.85;color:var(--ink-2)}
.service-longform>h2{margin-top:48px}
.service-points-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 8px}
.service-points-grid>div{padding:22px;background:var(--surface-soft);border:1px solid var(--line);border-radius:16px}
.service-points-grid b{font:600 .68rem/1 'JetBrains Mono',monospace;color:var(--brand);letter-spacing:.12em}
.service-points-grid h3{margin:15px 0 8px;font-size:1.05rem}
.service-points-grid p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.6}
.service-side-card li.is-current{color:var(--brand);font-weight:700}
.service-side-card li.is-current:before{content:'•'}
.service-side-card li a{color:inherit;text-decoration:none}
.mad-page-content{font-size:1rem;line-height:1.85;color:var(--ink-2)}
.mad-page-content h2{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.08;letter-spacing:-.04em;margin:36px 0 15px}
.mad-page-content h3{font-size:1.15rem;margin:28px 0 9px}
.mad-page-content p{margin:0 0 16px}.mad-page-content ul{padding-left:20px}.mad-page-content li{margin:8px 0}

@media (max-width:1100px){
  .internal-hero-grid{grid-template-columns:1fr 1fr;gap:35px}
  .internal-hero h1{font-size:clamp(3rem,6vw,5rem)}
  .service-hero-card{min-height:400px}
  .service-specialist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .package-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .internal-hero{padding:45px 0 54px}
  .internal-hero-grid{grid-template-columns:1fr;gap:38px}
  .internal-hero h1{font-size:clamp(2.8rem,13vw,4rem);line-height:.96}
  .internal-hero .lead{font-size:.94rem}
  .internal-proof{margin-top:27px}
  .internal-proof span{min-width:0;padding-right:12px}
  .internal-proof span+span{padding-left:12px}
  .internal-proof span:last-child{margin-top:14px;padding-left:0;border-top:1px solid var(--line);padding-top:14px;flex-basis:100%}
  .internal-visual{order:2}
  .internal-visual-glow{width:360px;height:360px}
  .service-hero-card{width:100%;min-height:370px;padding:23px 22px;border-radius:24px}
  .service-hero-card h2{font-size:2.45rem}
  .service-specialists-section,.service-packages-section{padding-top:65px;padding-bottom:68px}
  .service-specialist-grid{grid-template-columns:1fr;gap:12px}
  .service-specialist-card{min-height:220px}
  .package-grid{grid-template-columns:1fr 1fr}
  .package-card{min-height:235px;padding:18px}
  .service-points-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .package-grid{grid-template-columns:1fr}
  .package-card{min-height:205px}
}


/* ==========================================================================
   MAD PORTFOLIO CASE STUDY V2
   Append to the END of the active theme style.css.
   Scoped to .mad-project-v2 so the rest of the MAD site is not redesigned.
   ========================================================================== */

.mad-project-v2{overflow:clip}
.mad-project-v2 .container{position:relative}

/* ==========================================================================
   HERO — IMAGE FIRST + EYEBROW ABOVE IMAGE
   ========================================================================== */

.mad-case-hero{
    padding:38px 0 88px;
    background:
        radial-gradient(circle at 82% 15%,rgba(36,145,213,.10),transparent 30%),
        linear-gradient(180deg,var(--bg) 0%,var(--surface-soft) 100%);
}

/* Make the existing PHP elements behave as one flexible hero stack */
.mad-case-hero > .container{
    display:flex;
    flex-direction:column;
    align-items:stretch;
}

/* --------------------------------------------------------------------------
   BREADCRUMB
   -------------------------------------------------------------------------- */

.mad-case-hero .breadcrumbs{
    order:1;
    margin-bottom:28px;
}


/* --------------------------------------------------------------------------
   IMPORTANT:
   Turn the existing copy wrapper into a transparent layout container.
   This allows us to place its eyebrow separately above the image.
   -------------------------------------------------------------------------- */

.mad-case-hero-copy{
    display:contents;
}


/* --------------------------------------------------------------------------
   MAD · SELECTED WORK + CATEGORY
   -------------------------------------------------------------------------- */

.mad-case-eyebrow{
    order:2;

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;

    margin:0 0 18px;
}

.mad-case-eyebrow>span:first-child,
.mad-case-section-label{
    color:var(--brand);

    font:700 .67rem/1 'JetBrains Mono',monospace;

    letter-spacing:.14em;
    text-transform:uppercase;
}

.mad-case-chip{
    padding:8px 12px;

    border:1px solid var(--line);
    border-radius:999px;

    background:var(--surface);

    color:var(--muted);

    font:600 .68rem/1 'DM Sans',sans-serif;
}


/* --------------------------------------------------------------------------
   FEATURED PROJECT IMAGE
   -------------------------------------------------------------------------- */

.mad-case-hero-media{
    order:3;

    position:relative;

    width:100%;
    margin:0;
    padding:0;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:32px;

    background:var(--surface);

    box-shadow:var(--shadow);
}

/*
 * Full image remains visible.
 * We reduce the visual height by limiting the displayed image height,
 * but object-fit:contain prevents cropping.
 */

.mad-case-featured-image{
    display:block!important;

    width:100%!important;
    height:auto!important;

    max-width:none!important;
    max-height:none!important;

    min-height:0!important;

    object-fit:initial!important;
    object-position:center!important;

    margin:0!important;

    border-radius:0!important;
}

/* Image labels */

.mad-case-hero-media figcaption{
    position:absolute;

    left:20px;
    right:20px;
    bottom:20px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:12px;

    pointer-events:none;
}

.mad-case-hero-media figcaption span{
    padding:9px 13px;

    border:1px solid rgba(255,255,255,.34);
    border-radius:999px;

    background:rgba(8,20,38,.78);

    color:#fff;

    backdrop-filter:blur(12px);

    font:600 .66rem/1 'JetBrains Mono',monospace;
}


/* --------------------------------------------------------------------------
   NO IMAGE FALLBACK
   -------------------------------------------------------------------------- */

.mad-case-hero-placeholder{
    order:3;

    display:grid;
    place-items:center;

    width:100%;
    min-height:460px;

    margin:0;

    border-radius:32px;

    background:
        radial-gradient(circle at 75% 25%,rgba(60,180,240,.18),transparent 30%),
        linear-gradient(145deg,#122b51,#071321);
}

.mad-case-hero-placeholder span{
    color:#fff;

    font:800 clamp(6rem,15vw,13rem)/1 'Poppins',sans-serif;

    letter-spacing:-.09em;
}


/* --------------------------------------------------------------------------
   PROJECT TITLE — NOW BELOW IMAGE
   -------------------------------------------------------------------------- */

.mad-case-hero h1{
    order:4;

    max-width:1100px;

    margin:52px 0 0;

    color:var(--ink);

    font-size:clamp(3.7rem,8vw,8.5rem);

    line-height:.88;

    letter-spacing:-.075em;
}


/* --------------------------------------------------------------------------
   PROJECT DESCRIPTION
   -------------------------------------------------------------------------- */

.mad-case-intro{
    order:5;

    max-width:760px;

    margin:25px 0 0;

    color:var(--muted);

    font-size:1.08rem;

    line-height:1.75;
}


/* --------------------------------------------------------------------------
   PROJECT INFORMATION — FULL IMAGE WIDTH
   -------------------------------------------------------------------------- */

.mad-case-meta{
    order:6;

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    width:100%;
    max-width:none;

    margin-top:38px;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:22px;

    background:var(--line);

    gap:1px;
}

.mad-case-meta>div{
    min-height:96px;

    padding:20px 24px;

    background:var(--surface);
}

.mad-case-meta small{
    display:block;

    margin-bottom:9px;

    color:var(--muted);

    font:700 .61rem/1.2 'JetBrains Mono',monospace;

    letter-spacing:.09em;

    text-transform:uppercase;
}

.mad-case-meta strong{
    display:block;

    color:var(--ink);

    font-size:.9rem;

    line-height:1.4;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media(max-width:760px){

    .mad-case-hero{
        padding:26px 0 65px;
    }

    .mad-case-hero .breadcrumbs{
        margin-bottom:22px;
    }

    .mad-case-eyebrow{
        margin-bottom:14px;
    }

    .mad-case-hero-media{
        border-radius:22px;
    }

    .mad-case-featured-image{
        max-height:420px!important;
    }

    .mad-case-hero-media figcaption{
        left:12px;
        right:12px;
        bottom:12px;
    }

    .mad-case-hero-media figcaption span{
        padding:8px 10px;
        font-size:.58rem;
    }

    .mad-case-hero h1{
        margin-top:38px;

        font-size:clamp(3rem,16vw,5.3rem);
    }

    .mad-case-intro{
        font-size:.95rem;
    }

    .mad-case-meta{
        grid-template-columns:1fr;

        margin-top:28px;

        border-radius:18px;
    }

    .mad-case-meta>div{
        min-height:0;

        padding:17px 19px;
    }

    .mad-case-hero-placeholder{
        min-height:300px;

        border-radius:22px;
    }
}
/* STORY */
.mad-case-story{
    padding:110px 0 125px;
    background:var(--bg);
}
.mad-case-story-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(260px,420px);
    align-items:end;
    gap:70px;
    padding-bottom:58px;
    border-bottom:1px solid var(--line);
}
.mad-case-story-header h2,
.mad-case-section-head h2{
    margin:13px 0 0;
    color:var(--ink);
    font-size:clamp(2.5rem,5vw,5rem);
    line-height:.94;
    letter-spacing:-.065em;
}
.mad-case-story-header p,
.mad-case-section-head>p{
    max-width:420px;
    margin:0;
    color:var(--muted);
    font-size:.92rem;
    line-height:1.8;
}
.mad-case-story-layout{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:72px;
    align-items:start;
    padding-top:62px;
}
.mad-case-rail{
    position:sticky;
    top:110px;
}
.mad-case-rail-card{
    padding:24px;
    border:1px solid var(--line);
    border-radius:22px;
    background:var(--surface);
    box-shadow:var(--shadow-soft);
}
.mad-case-toc{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:17px;
}
.mad-case-toc a,
.mad-case-toc-empty{
    display:block;
    padding:11px 0;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.72rem;
    line-height:1.35;
    text-decoration:none;
    transition:color .2s ease,padding-left .2s ease;
}
.mad-case-toc a:hover,
.mad-case-toc a.is-active{
    padding-left:7px;
    color:var(--brand);
}
.mad-case-progress{
    margin-top:20px;
}
.mad-case-progress>span{
    display:block;
    margin-bottom:8px;
    color:var(--muted);
    font:700 .59rem/1 'JetBrains Mono',monospace;
    letter-spacing:.08em;
}
.mad-case-progress>div{
    height:3px;
    overflow:hidden;
    border-radius:999px;
    background:var(--line);
}
.mad-case-progress i{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:var(--brand);
    transition:width .12s linear;
}
.mad-case-content{
    width:100%;
    max-width:980px;
    min-width:0;
    color:var(--ink-2);
    font-size:1.03rem;
    line-height:1.9;
}
.mad-case-content>*{max-width:900px}
.mad-case-content>p:first-child{
    margin-top:0;
    color:var(--ink);
    font-size:1.28rem;
    line-height:1.72;
}
.mad-case-content h2{
    margin:78px 0 21px;
    color:var(--ink);
    font-size:clamp(2.1rem,4vw,4rem);
    line-height:.98;
    letter-spacing:-.06em;
    scroll-margin-top:110px;
}
.mad-case-content h3{
    margin:42px 0 12px;
    color:var(--ink);
    font-size:1.32rem;
    line-height:1.2;
    letter-spacing:-.025em;
    scroll-margin-top:110px;
}
.mad-case-content h4{
    margin:30px 0 10px;
    color:var(--ink);
    font-size:1.02rem;
}
.mad-case-content p{margin:0 0 21px}
.mad-case-content ul,
.mad-case-content ol{
    margin:0 0 27px;
    padding-left:1.3rem;
}
.mad-case-content li{margin:8px 0}
.mad-case-content a{color:var(--brand);font-weight:700}
.mad-case-content strong{color:var(--ink)}
.mad-case-content blockquote{
    margin:38px 0;
    padding:28px 32px;
    border:1px solid var(--line);
    border-left:4px solid var(--brand);
    border-radius:0 22px 22px 0;
    background:var(--surface-soft);
    color:var(--ink);
    font-size:1.12rem;
    line-height:1.75;
}
.mad-case-content img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    margin:34px 0;
    border-radius:22px;
}
.mad-case-content .wp-block-image{margin:42px 0}
.mad-case-content .wp-block-image img{margin:0}
.mad-case-content figcaption{
    color:var(--muted);
    font-size:.73rem;
    line-height:1.5;
}
.mad-case-content hr{
    height:1px;
    margin:58px 0;
    border:0;
    background:var(--line);
}
.mad-case-content table{
    width:100%;
    margin:32px 0;
    border-collapse:collapse;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:16px;
}
.mad-case-content th,
.mad-case-content td{
    padding:13px 15px;
    border-bottom:1px solid var(--line);
    text-align:left;
}
.mad-case-content th{color:var(--ink);font-weight:700}
.mad-case-content td{color:var(--muted)}
.mad-case-fallback,
.mad-case-empty{
    padding:30px;
    border:1px dashed var(--line);
    border-radius:22px;
    background:var(--surface-soft);
}
.mad-case-empty h2{margin:14px 0}
.mad-case-empty p{color:var(--muted)}

/* ==========================================================================
   DELIVERY LENS — POLISHED
   ========================================================================== */

.mad-case-lens{
    padding:105px 0 115px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--surface-soft);
}

.mad-case-lens .mad-case-section-head{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(280px,.65fr);
    gap:70px;
    align-items:end;
    margin-bottom:48px;
}

.mad-case-lens .mad-case-section-head h2{
    margin:13px 0 0;
    color:var(--ink);
    font-size:clamp(2.5rem,5vw,5rem);
    line-height:.94;
    letter-spacing:-.065em;
}

.mad-case-lens .mad-case-section-head h2 em{
    color:var(--muted);
    font-style:normal;
}

.mad-case-lens .mad-case-section-head>p{
    max-width:420px;
    margin:0;
    color:var(--muted);
    font-size:.92rem;
    line-height:1.8;
}


/* FOUR CARDS */

.mad-case-lens-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.mad-case-lens-grid article{
    position:relative;

    min-height:215px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:22px 22px 25px;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:22px;

    background:var(--surface);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.mad-case-lens-grid article::after{
    content:"";

    position:absolute;

    left:22px;
    right:22px;
    bottom:0;

    height:3px;

    border-radius:999px 999px 0 0;

    background:var(--brand);

    transform:scaleX(.15);
    transform-origin:left;

    transition:transform .3s ease;
}

.mad-case-lens-grid article:hover{
    transform:translateY(-5px);

    border-color:rgba(22,138,203,.38);

    box-shadow:var(--shadow-soft);
}

.mad-case-lens-grid article:hover::after{
    transform:scaleX(1);
}


/* NUMBER */

.mad-case-lens-grid article>span{
    display:flex;
    align-items:center;
    justify-content:center;

    width:31px;
    height:31px;

    border:1px solid var(--line);
    border-radius:50%;

    background:var(--surface-soft);

    color:var(--brand);

    font:700 .58rem/1 'JetBrains Mono',monospace;
}


/* CONTENT */

.mad-case-lens-grid article>div{
    margin-top:28px;
}

.mad-case-lens-grid h3{
    margin:0 0 9px;

    color:var(--ink);

    font-size:1.2rem;
    line-height:1.1;

    letter-spacing:-.025em;
}

.mad-case-lens-grid p{
    max-width:245px;

    margin:0;

    color:var(--muted);

    font-size:.77rem;
    line-height:1.65;
}


/* DELIVERY LENS — TABLET */

@media(max-width:1080px){

    .mad-case-lens-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* DELIVERY LENS — MOBILE */

@media(max-width:760px){

    .mad-case-lens{
        padding:72px 0 80px;
    }

    .mad-case-lens .mad-case-section-head{
        grid-template-columns:1fr;
        gap:25px;
        margin-bottom:34px;
    }

    .mad-case-lens-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .mad-case-lens-grid article{
        min-height:185px;
    }

}

/* ==========================================================================
   MORE FROM MAD — THREE CARD ROW
   ========================================================================== */

.mad-case-related{
    padding:105px 0;
    background:var(--bg);
}

.mad-case-related .mad-case-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:40px;
}

.mad-case-related .mad-case-section-head > div{
    min-width:0;
}

.mad-case-related .mad-case-section-head h2{
    margin:13px 0 0;

    color:var(--ink);

    font-size:clamp(2.5rem,5vw,5rem);

    line-height:.94;

    letter-spacing:-.065em;
}

.mad-case-related .mad-case-section-head .btn{
    flex:0 0 auto;
}


/* --------------------------------------------------------------------------
   THREE PROJECT CARDS IN ONE ROW
   -------------------------------------------------------------------------- */

.mad-case-related-grid{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:18px;

    width:100%;
    max-width:none;

    margin:0;
}


/* --------------------------------------------------------------------------
   PROJECT CARD
   -------------------------------------------------------------------------- */

.mad-case-related-card{
    display:block;

    width:100%;
    min-width:0;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:22px;

    background:var(--surface);

    color:inherit;

    box-shadow:var(--shadow-soft);

    text-decoration:none;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.mad-case-related-card:hover{
    transform:translateY(-5px);

    border-color:rgba(22,138,203,.38);

    box-shadow:var(--shadow);
}


/* --------------------------------------------------------------------------
   PROJECT IMAGE
   -------------------------------------------------------------------------- */

.mad-case-related-media{
    height:220px;

    display:grid;
    place-items:center;

    overflow:hidden;

    background:var(--surface-soft);
}

.mad-case-related-media img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.mad-case-related-card:hover .mad-case-related-media img{
    transform:scale(1.035);
}

.mad-case-related-media > span{
    color:var(--brand);

    font:800 3.5rem/1 'Poppins',sans-serif;

    letter-spacing:-.08em;
}


/* --------------------------------------------------------------------------
   CARD CONTENT
   -------------------------------------------------------------------------- */

.mad-case-related-copy{
    padding:18px 20px 21px;
}

.mad-case-related-copy > span{
    display:block;

    color:var(--brand);

    font:700 .58rem/1 'JetBrains Mono',monospace;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.mad-case-related-copy h3{
    margin:9px 0 15px;

    color:var(--ink);

    font-size:1.05rem;

    line-height:1.2;
}

.mad-case-related-copy b{
    color:var(--brand);

    font-size:.7rem;
}


/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */

@media(max-width:980px){

    .mad-case-related-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media(max-width:760px){

    .mad-case-related{
        padding:72px 0;
    }

    .mad-case-related .mad-case-section-head{
        display:block;

        margin-bottom:30px;
    }

    .mad-case-related .mad-case-section-head .btn{
        display:inline-flex;

        margin-top:24px;
    }

    .mad-case-related-grid{
        grid-template-columns:1fr;

        gap:16px;
    }

    .mad-case-related-media{
        height:220px;
    }

}

/* CTA */
.mad-case-cta{
    padding:0 0 105px;
    background:var(--bg);
}
.mad-case-cta-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:45px;
    padding:62px 65px;
    border-radius:32px;
    background:
        radial-gradient(circle at 82% 15%,rgba(88,202,255,.18),transparent 28%),
        linear-gradient(135deg,#102a52,#173f86);
    box-shadow:0 28px 70px rgba(16,42,82,.18);
}
.mad-case-cta-panel .mad-case-section-label{color:#8fdfff}
.mad-case-cta-panel h2{
    max-width:760px;
    margin:13px 0 12px;
    color:#fff;
    font-size:clamp(2.1rem,4.6vw,4.7rem);
    line-height:.96;
    letter-spacing:-.06em;
}
.mad-case-cta-panel p{
    max-width:680px;
    margin:0;

    color:rgba(255,255,255,.82)!important;

    font-size:.9rem;
    line-height:1.7;
}
.mad-case-cta-panel p,
.mad-case-cta-panel p a,
.mad-case-cta-panel p span{
    color:rgba(255,255,255,.82)!important;
}
.mad-case-cta-panel .btn{flex:0 0 auto}

/* RESPONSIVE */
@media(max-width:1080px){
    .mad-case-hero h1{font-size:clamp(3.4rem,8vw,6.5rem)}
    .mad-case-story-layout{grid-template-columns:210px minmax(0,1fr);gap:42px}
    .mad-case-lens-grid{grid-template-columns:repeat(2,1fr)}
    .mad-case-related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
    .mad-case-hero{padding:30px 0 60px}
    .mad-case-hero .breadcrumbs{margin-bottom:30px}
    .mad-case-hero h1{font-size:clamp(3rem,16vw,5.3rem)}
    .mad-case-intro{font-size:.95rem}
    .mad-case-meta{grid-template-columns:1fr}
    .mad-case-meta>div{min-height:0}
    .mad-case-hero-media{margin-top:38px;border-radius:22px}
    .mad-case-hero-media figcaption{left:12px;right:12px;bottom:12px}
    .mad-case-hero-media figcaption span{font-size:.58rem;padding:8px 10px}
    .mad-case-hero-placeholder{min-height:300px;margin-top:38px;border-radius:22px}

    .mad-case-story{padding:70px 0 80px}
    .mad-case-story-header,
    .mad-case-story-layout,
    .mad-case-section-head{
        grid-template-columns:1fr;
        gap:25px;
    }
    .mad-case-story-header{padding-bottom:38px}
    .mad-case-story-layout{padding-top:38px}
    .mad-case-rail{position:static}
    .mad-case-rail-card{padding:20px}
    .mad-case-progress{display:none}
    .mad-case-content{font-size:.96rem;line-height:1.8}
    .mad-case-content>p:first-child{font-size:1.08rem}
    .mad-case-content h2{margin-top:52px;font-size:2.15rem}
    .mad-case-content h3{margin-top:32px}
    .mad-case-content img{margin:28px 0;border-radius:17px}

    .mad-case-lens{padding:72px 0 80px}
    .mad-case-lens-grid{grid-template-columns:1fr}
    .mad-case-lens-grid article{min-height:190px}

    .mad-case-related{padding:72px 0}
    .mad-case-related-grid{grid-template-columns:1fr}
    .mad-case-related-media{height:220px}

    .mad-case-cta{padding-bottom:70px}
    .mad-case-cta-panel{display:block;padding:40px 25px;border-radius:24px}
    .mad-case-cta-panel .btn{margin-top:26px}
}



/* ========================================================================
   MAD — FINAL MOBILE HEADER + QUICK ACTIONS FIX
   2026-09-24
   This is the final authority for these two mobile components.
   It intentionally overrides the older duplicated responsive rules above.
   ======================================================================== */

@media (max-width: 760px){

  /* ----------------------------------------------------------------------
     MOBILE HEADER / DRAWER
     ---------------------------------------------------------------------- */
  .site-header{
    height:66px !important;
    min-height:66px !important;
    position:sticky !important;
    top:0 !important;
    z-index:100000 !important;
  }

  .site-header .container.header-inner{
    height:66px !important;
    min-height:66px !important;
    width:calc(100% - 24px) !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:0 !important;
  }

  .site-header .logo{
    width:min(var(--logo-width,145px),118px) !important;
    max-width:118px !important;
    max-height:54px !important;
  }

  .site-header .menu-toggle{
    display:block !important;
    flex:0 0 42px !important;
    width:42px !important;
    height:42px !important;
    margin-left:auto !important;
    padding:9px !important;
  }

  .site-header .header-cta,
  .site-header .header-actions > .theme-toggle{
    display:none !important;
  }

  /* Full mobile drawer: fixed to the viewport, never clipped by hero/main. */
  .site-header .mobile-menu{
    display:block !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:66px !important;
    width:100% !important;
    max-height:calc(100dvh - 66px) !important;
    height:auto !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
    background:var(--bg) !important;
    border-top:1px solid var(--line) !important;
    box-shadow:0 20px 45px rgba(10,30,60,.14) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-8px) !important;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease !important;
    z-index:99999 !important;
  }

  .site-header .mobile-menu.is-open{
    max-height:calc(100dvh - 66px) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  .site-header .mobile-menu .container{
    width:calc(100% - 30px) !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:8px 0 22px !important;
  }

  .site-header .mobile-menu ul{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
  }

  .site-header .mobile-menu li{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border-bottom:1px solid var(--line) !important;
  }

  .site-header .mobile-menu a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-height:50px !important;
    box-sizing:border-box !important;
    padding:14px 0 !important;
    color:var(--ink) !important;
    font-weight:600 !important;
    text-decoration:none !important;
  }

  .site-header .mobile-menu ul ul{
    display:none !important;
    padding-left:14px !important;
  }

  .site-header .mobile-menu li.submenu-open > ul{
    display:block !important;
  }

  .site-header .mobile-menu-actions{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    margin-top:16px !important;
  }

  .site-header .mobile-menu-actions .theme-toggle{
    display:inline-flex !important;
    flex:0 0 auto !important;
    min-width:94px !important;
  }

  .site-header .mobile-menu-actions .mobile-cta{
    display:inline-flex !important;
    flex:1 1 auto !important;
    min-height:50px !important;
    justify-content:center !important;
  }

  body.menu-open{
    overflow:hidden !important;
  }

  /* ----------------------------------------------------------------------
     QUICK ACTIONS
     ---------------------------------------------------------------------- */
  #quick-actions{
    position:fixed !important;
    right:0 !important;
    left:auto !important;
    top:50% !important;
    bottom:auto !important;
    width:auto !important;
    height:auto !important;
    transform:translateY(-50%) !important;
    z-index:100001 !important;
    pointer-events:auto !important;
  }

  #quick-actions .quick-actions-toggle{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    height:124px !important;
    margin:0 !important;
    padding:10px 0 !important;
    border-radius:14px 0 0 14px !important;
    box-sizing:border-box !important;
    z-index:3 !important;
  }

  #quick-actions .quick-actions-panel{
    position:absolute !important;
    left:auto !important;
    right:50px !important;
    top:50% !important;
    bottom:auto !important;
    width:min(300px,calc(100vw - 62px)) !important;
    max-width:300px !important;
    max-height:72dvh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:10px !important;
    background:var(--surface) !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
    border-radius:18px !important;
    box-shadow:0 24px 70px rgba(15,35,60,.22) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate(10px,-50%) scale(.98) !important;
    transform-origin:right center !important;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease !important;
    z-index:2 !important;
  }

  #quick-actions.is-open .quick-actions-panel{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate(0,-50%) scale(1) !important;
  }

  #quick-actions .qa-heading{
    display:block !important;
    padding:9px 10px 12px !important;
    margin:0 0 5px !important;
  }

  #quick-actions .quick-actions-panel > a,
  #quick-actions .qa-disabled{
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 14px !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:10px 7px !important;
    color:var(--ink) !important;
  }

  #quick-actions .quick-actions-panel strong,
  #quick-actions .quick-actions-panel small,
  #quick-actions .qa-disabled strong,
  #quick-actions .qa-disabled small{
    color:inherit !important;
  }

  #quick-actions .quick-actions-panel small,
  #quick-actions .qa-disabled small{
    color:var(--muted) !important;
  }

  #quick-actions .qa-icon,
  #quick-actions .qa-disabled b{
    width:30px !important;
    height:30px !important;
    border-radius:9px !important;
  }

  #quick-actions .qa-toggle-label{
    font-size:7px !important;
    line-height:1.1 !important;
    letter-spacing:.12em !important;
  }
}

@media (max-width:380px){
  #quick-actions .quick-actions-panel{
    right:48px !important;
    width:calc(100vw - 58px) !important;
  }

  .site-header .mobile-menu-actions{
    gap:8px !important;
  }
}

/* ========================================================================
   MAD — MOBILE HEADER + QUICK ACTIONS FIX V2
   2026-09-24
   Mobile-specific authority block.  This replaces the edge-middle Quick
   Actions treatment with a compact bottom floating control and keeps the
   mobile navigation as a real viewport drawer.
   ======================================================================== */
@media (max-width: 760px){
  /* HEADER */
  .site-header{
    position:sticky !important;
    top:0 !important;
    height:66px !important;
    min-height:66px !important;
    z-index:100000 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .site-header .container.header-inner{
    height:66px !important;
    min-height:66px !important;
    width:calc(100% - 24px) !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:0 !important;
  }

  .site-header .logo{
    width:118px !important;
    max-width:118px !important;
    height:auto !important;
    max-height:52px !important;
  }

  .site-header .menu-toggle{
    display:block !important;
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    margin-left:auto !important;
    padding:9px !important;
  }

  .site-header .header-cta,
  .site-header .header-actions > .theme-toggle{
    display:none !important;
  }

  /* Mobile navigation is a viewport-level drawer. */
  .site-header .mobile-menu{
    display:block !important;
    position:fixed !important;
    inset:66px 0 0 0 !important;
    width:100vw !important;
    height:calc(100dvh - 66px) !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
    background:var(--bg) !important;
    border-top:1px solid var(--line) !important;
    box-shadow:0 20px 50px rgba(10,30,60,.16) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-12px) !important;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease !important;
    z-index:99999 !important;
  }

  .site-header .mobile-menu.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .site-header .mobile-menu > .container{
    width:calc(100% - 30px) !important;
    max-width:none !important;
    min-height:100% !important;
    margin:0 auto !important;
    padding:8px 0 28px !important;
  }

  .site-header .mobile-menu ul{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
  }

  .site-header .mobile-menu li{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border-bottom:1px solid var(--line) !important;
  }

  .site-header .mobile-menu a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-height:52px !important;
    padding:14px 2px !important;
    box-sizing:border-box !important;
    color:var(--ink) !important;
    font-size:.95rem !important;
    line-height:1.3 !important;
    text-decoration:none !important;
  }

  .site-header .mobile-menu ul ul{
    display:none !important;
    padding:0 0 4px 14px !important;
  }

  .site-header .mobile-menu li.submenu-open > ul{
    display:block !important;
  }

  .site-header .mobile-menu-actions{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    margin-top:16px !important;
  }

  .site-header .mobile-menu-actions .theme-toggle{
    display:inline-flex !important;
    flex:0 0 auto !important;
    min-width:94px !important;
  }

  .site-header .mobile-menu-actions .mobile-cta{
    display:inline-flex !important;
    flex:1 1 auto !important;
    min-height:50px !important;
    justify-content:center !important;
  }

  body.menu-open{overflow:hidden !important;}

  /* QUICK ACTIONS — bottom floating control on mobile.
     This keeps the control out of the hero copy instead of sitting at
     50% viewport height. */
  #quick-actions{
    position:fixed !important;
    right:14px !important;
    left:auto !important;
    top:auto !important;
    bottom:14px !important;
    width:auto !important;
    height:auto !important;
    transform:none !important;
    z-index:100001 !important;
  }

  #quick-actions .quick-actions-toggle{
    position:relative !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:52px !important;
    height:52px !important;
    padding:0 15px !important;
    margin:0 !important;
    border-radius:999px !important;
    box-sizing:border-box !important;
    gap:0 !important;
    z-index:3 !important;
  }

  #quick-actions .qa-toggle-label{
    font-size:8px !important;
    line-height:1 !important;
    letter-spacing:.12em !important;
    white-space:nowrap !important;
  }

  #quick-actions .qa-toggle-line{display:none !important;}

  #quick-actions .quick-actions-panel{
    position:absolute !important;
    left:auto !important;
    right:0 !important;
    top:auto !important;
    bottom:62px !important;
    width:min(340px,calc(100vw - 28px)) !important;
    max-width:none !important;
    max-height:min(70dvh,520px) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:10px !important;
    background:var(--surface) !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
    border-radius:18px !important;
    box-shadow:0 24px 70px rgba(15,35,60,.22) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(10px) scale(.98) !important;
    transform-origin:bottom right !important;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease !important;
    z-index:2 !important;
  }

  #quick-actions.is-open .quick-actions-panel{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
  }

  #quick-actions .qa-heading{
    display:block !important;
    padding:9px 10px 12px !important;
    margin:0 0 5px !important;
  }

  #quick-actions .quick-actions-panel > a,
  #quick-actions .qa-disabled{
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 14px !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:10px 7px !important;
    color:var(--ink) !important;
  }
}

@media (max-width:380px){
  #quick-actions{right:10px !important;bottom:10px !important;}
  #quick-actions .quick-actions-toggle{height:50px !important;min-width:50px !important;padding:0 13px !important;}
  #quick-actions .quick-actions-panel{bottom:60px !important;width:calc(100vw - 20px) !important;}
}

/* ========================================================================
   MAD — MOBILE HEADER + QUICK ACTIONS FIX V3
   2026-09-24
   Final structural override for the mobile navigation and Quick Actions.
   The mobile menu is a full-width viewport drawer. Quick Actions uses a
   full-height fixed anchor so its tab and panel can never separate.
   ======================================================================== */
@media (max-width: 760px){
  /* ---------- MOBILE HEADER ---------- */
  .site-header{
    position:sticky !important;
    top:0 !important;
    width:100% !important;
    height:66px !important;
    min-height:66px !important;
    overflow:visible !important;
    z-index:1000000 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .site-header > .container.header-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    max-width:none !important;
    height:66px !important;
    min-height:66px !important;
    margin:0 !important;
    padding:0 14px !important;
    box-sizing:border-box !important;
  }

  .site-header .logo{
    display:inline-flex !important;
    width:118px !important;
    max-width:118px !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }

  .site-header .header-actions{
    display:flex !important;
    align-items:center !important;
    gap:0 !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
  }

  .site-header .header-cta,
  .site-header .header-actions > .theme-toggle{
    display:none !important;
  }

  .site-header .menu-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    padding:9px !important;
    margin:0 !important;
    gap:0 !important;
    box-sizing:border-box !important;
    border-radius:14px !important;
    position:relative !important;
    z-index:1000002 !important;
  }

  .site-header .menu-toggle span{
    display:block !important;
    width:22px !important;
    height:1.5px !important;
    margin:3.5px 0 !important;
    background:var(--ink) !important;
    transition:transform .2s ease,opacity .2s ease !important;
  }

  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(5px) rotate(45deg) !important;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0 !important;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-5px) rotate(-45deg) !important;
  }

  /* ---------- FULL-WIDTH MOBILE DRAWER ---------- */
  #mobile-menu.site-header .mobile-menu,
  .site-header > #mobile-menu{
    display:block !important;
    position:fixed !important;
    top:66px !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100vw !important;
    max-width:none !important;
    height:calc(100dvh - 66px) !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
    background:var(--bg) !important;
    border-top:1px solid var(--line) !important;
    box-shadow:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-8px) !important;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease !important;
    z-index:1000001 !important;
  }

  #mobile-menu.is-open,
  .site-header > #mobile-menu.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  #mobile-menu > .container{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-height:100% !important;
    margin:0 !important;
    padding:0 24px 32px !important;
    box-sizing:border-box !important;
  }

  /* WordPress outputs the menu as a direct UL when container=false. */
  #mobile-menu > .container > ul,
  #mobile-menu > .container > .menu{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    box-sizing:border-box !important;
  }

  #mobile-menu > .container > ul > li,
  #mobile-menu > .container > .menu > li{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border-bottom:1px solid var(--line) !important;
    box-sizing:border-box !important;
  }

  #mobile-menu > .container a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-height:64px !important;
    padding:16px 4px !important;
    box-sizing:border-box !important;
    color:var(--ink) !important;
    font-size:1.05rem !important;
    line-height:1.35 !important;
    font-weight:600 !important;
    text-decoration:none !important;
  }

  #mobile-menu > .container ul ul{
    display:none !important;
    width:100% !important;
    margin:0 !important;
    padding:0 0 6px 16px !important;
    box-sizing:border-box !important;
  }

  #mobile-menu > .container li.submenu-open > ul{
    display:block !important;
  }

  #mobile-menu > .container ul ul a{
    min-height:48px !important;
    padding:11px 4px !important;
    font-size:.92rem !important;
    color:var(--muted) !important;
  }

  #mobile-menu > .container .mobile-menu-actions{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    max-width:none !important;
    margin:18px 0 0 !important;
    padding:0 !important;
    gap:10px !important;
    box-sizing:border-box !important;
    position:static !important;
    float:none !important;
  }

  #mobile-menu > .container .mobile-menu-actions .theme-toggle{
    display:inline-flex !important;
    flex:0 0 auto !important;
    min-width:112px !important;
    height:48px !important;
  }

  #mobile-menu > .container .mobile-menu-actions .mobile-cta{
    display:inline-flex !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    min-height:48px !important;
    justify-content:center !important;
  }

  /* Never leave the floating Quick Actions control above the menu. */
  body.menu-open #quick-actions{
    display:none !important;
  }

  body.menu-open{
    overflow:hidden !important;
  }

  /* ---------- QUICK ACTIONS: RIGHT EDGE TAB ---------- */
  #quick-actions{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    width:0 !important;
    height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    z-index:999999 !important;
    pointer-events:none !important;
  }

  #quick-actions .quick-actions-toggle{
    position:absolute !important;
    top:50% !important;
    right:0 !important;
    left:auto !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    width:44px !important;
    min-width:44px !important;
    height:132px !important;
    margin:0 !important;
    padding:10px 0 !important;
    box-sizing:border-box !important;
    border-radius:16px 0 0 16px !important;
    pointer-events:auto !important;
    z-index:2 !important;
  }

  #quick-actions .qa-toggle-label{
    display:block !important;
    font-size:7px !important;
    line-height:1 !important;
    letter-spacing:.12em !important;
    white-space:nowrap !important;
  }

  #quick-actions .qa-toggle-line{
    display:block !important;
  }

  /* The panel is fixed to the viewport, not to the tiny tab wrapper. */
  #quick-actions .quick-actions-panel{
    position:fixed !important;
    top:50% !important;
    right:54px !important;
    bottom:auto !important;
    left:auto !important;
    width:min(330px,calc(100vw - 68px)) !important;
    max-width:calc(100vw - 68px) !important;
    max-height:calc(100dvh - 40px) !important;
    margin:0 !important;
    padding:12px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
    background:var(--surface) !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
    border-radius:18px !important;
    box-shadow:0 24px 70px rgba(15,35,60,.22) !important;
    transform:translate(12px,-50%) scale(.98) !important;
    transform-origin:right center !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:1 !important;
  }

  #quick-actions.is-open .quick-actions-panel{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate(0,-50%) scale(1) !important;
  }

  #quick-actions .quick-actions-panel > a,
  #quick-actions .quick-actions-panel > .qa-disabled{
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 14px !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    min-height:50px !important;
    padding:9px 7px !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:380px){
  #mobile-menu > .container{padding-left:18px !important;padding-right:18px !important;}
  #quick-actions .quick-actions-toggle{width:42px !important;min-width:42px !important;}
  #quick-actions .quick-actions-panel{right:50px !important;width:calc(100vw - 60px) !important;max-width:calc(100vw - 60px) !important;}
}

/* =========================================================
   MAD — MOBILE MENU + QUICK ACTIONS V4
   Final mobile interaction / CTA sizing fix
   2026-09-24
   ========================================================= */
@media (max-width: 760px){
  /* Keep the mobile drawer clean and fully interactive. */
  body.menu-open #quick-actions{display:none !important;}

  #mobile-menu > .container .mobile-menu-actions{
    display:grid !important;
    grid-template-columns:minmax(0, 112px) minmax(0, 1fr) !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
  }

  #mobile-menu > .container .mobile-menu-actions .theme-toggle,
  #mobile-menu > .container .mobile-menu-actions .mobile-cta{
    width:100% !important;
    min-width:0 !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    border-radius:999px !important;
  }

  #mobile-menu > .container .mobile-menu-actions .theme-toggle{
    justify-content:center !important;
    padding:0 12px !important;
  }

  #mobile-menu > .container .mobile-menu-actions .mobile-cta{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    padding:0 18px !important;
    background:var(--brand) !important;
    color:#fff !important;
    border-color:var(--brand) !important;
    text-decoration:none !important;
  }

  #mobile-menu > .container .mobile-menu-actions .mobile-cta,
  #mobile-menu > .container .mobile-menu-actions .mobile-cta *{
    color:#fff !important;
  }

  #mobile-menu > .container .mobile-menu-actions .mobile-cta .icon-arrow,
  #mobile-menu > .container .mobile-menu-actions .mobile-cta .icon-arrow:before,
  #mobile-menu > .container .mobile-menu-actions .mobile-cta .icon-arrow:after{
    color:#fff !important;
    border-color:#fff !important;
  }

  /* QUICK ACTIONS — make the wrapper itself interactive.
     The earlier rule used pointer-events:none on the wrapper,
     which made this control fragile on mobile browsers. */
  #quick-actions{
    display:block !important;
    pointer-events:none !important;
    width:0 !important;
    height:100dvh !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    position:fixed !important;
    transform:none !important;
    z-index:999999 !important;
  }

  #quick-actions .quick-actions-toggle{
    pointer-events:auto !important;
    touch-action:manipulation !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
    z-index:1000001 !important;
  }

  #quick-actions .quick-actions-panel{
    pointer-events:none !important;
    z-index:1000000 !important;
  }

  #quick-actions.is-open .quick-actions-panel{
    pointer-events:auto !important;
  }

  /* Make the vertical control clearly visible and keep it out of
     the hero content while retaining the right-edge design. */
  #quick-actions .quick-actions-toggle{
    width:44px !important;
    min-width:44px !important;
    height:132px !important;
    right:0 !important;
    top:50% !important;
    border:1px solid var(--line-strong) !important;
    border-right:0 !important;
    background:var(--surface) !important;
    color:var(--ink) !important;
    box-shadow:0 18px 45px rgba(15,35,60,.16) !important;
  }

  #quick-actions .quick-actions-panel{
    right:52px !important;
    top:50% !important;
    bottom:auto !important;
    left:auto !important;
    width:min(330px,calc(100vw - 62px)) !important;
    max-width:calc(100vw - 62px) !important;
    max-height:calc(100dvh - 32px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
  }

  #quick-actions.is-open .quick-actions-panel{
    transform:translate(0,-50%) scale(1) !important;
  }
}

@media (max-width:380px){
  #mobile-menu > .container .mobile-menu-actions{
    grid-template-columns:105px minmax(0,1fr) !important;
  }
  #mobile-menu > .container .mobile-menu-actions .theme-toggle,
  #mobile-menu > .container .mobile-menu-actions .mobile-cta{
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
  }
  #quick-actions .quick-actions-panel{
    right:48px !important;
    width:calc(100vw - 58px) !important;
    max-width:calc(100vw - 58px) !important;
  }
}