/* ============================
           SA DESIGN TOKENS — CORRECTED
           ============================ */
        :root {
            --navy: #1B2A6B;
            --navy-deep: #111C4E;
            --navy-text: #1a1f36;
            --green: #22C55E;
            --green-hover: #16A34A;
            --green-light: #DCFCE7;
            --teal: #2DD4BF;
            --text-dark: #1a1f36;
            --text-body: #4b5563;
            --text-muted: #6b7280;
            --text-light: #9ca3af;
            --white: #ffffff;
            --bg-light: #f8f9fc;
            --border: #e5e7eb;
            --border-light: #f0f1f5;
            --font-heading: "Playfair Display", Georgia, serif;
            --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 14px;
            --radius-full: 9999px;
            --shadow-card: 0 1px 3px rgba(27,42,107,.05), 0 4px 16px rgba(27,42,107,.04);
            --shadow-hover: 0 8px 30px rgba(27,42,107,.08);
            --shadow-green: 0 4px 14px rgba(34,197,94,.3);
            /* Lead form fields — match for-agencies .fg inputs (style.css) */
            --lead-field-bg: #f2f2fb;
            --lead-field-border: rgba(69, 77, 161, 0.1);
        }
        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth;overflow-x:clip}
        @supports not (overflow:clip){
            html{overflow-x:hidden}
        }
        body.design-services-page{font-family:var(--font-body);color:var(--text-body);line-height:1.7;font-size:16px;font-weight:400;background:var(--white);-webkit-font-smoothing:antialiased;min-width:0;overflow-x:clip}
        @supports not (overflow:clip){
            body.design-services-page{overflow-x:hidden}
        }
        img{max-width:100%;display:block}
        a{text-decoration:none;color:inherit}
        /* Typography — about.html / style.css */
        h1,h2,h3{font-family:var(--font-heading);color:var(--navy-text);line-height:1.15}
        h1{
            font-size:clamp(36px,4.5vw,58px);
            line-height:1.12;
            letter-spacing:-0.5008px;
            font-weight:500;
            margin-bottom:20px;
        }
        h2{
            font-size:clamp(28px,3.5vw,46px);
            font-weight:500;
            line-height:1.15;
            letter-spacing:-0.2992px;
            margin-bottom:16px;
        }
        h1 strong{font-weight:600}
        h2 strong{font-weight:600}

        .accent{
            font-family:var(--font-heading);
            font-style:italic;
            font-weight:500;
            color:var(--midnight);
        }
        .accent--teal{color:var(--teal)}

        .tag{
            font-family:var(--font-body);
            font-size:11.5008px;
            font-weight:700;
            letter-spacing:0.1em;
            text-transform:uppercase;
            color:var(--turquoise);
            margin-bottom:14px;
            display:inline-block;
            opacity:1;
        }
        .sub{font-size:17px;font-weight:400;color:var(--muted);max-width:580px;line-height:1.75}

        .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:14px;border:none;cursor:pointer;transition:all .25s;text-decoration:none;line-height:1}
        .btn--green{background:var(--green);color:var(--white);padding:15px 30px;border-radius:var(--radius-sm);box-shadow:var(--shadow-green)}
        .btn--green:hover{background:var(--green-hover);transform:translateY(-1px);box-shadow:0 6px 20px rgba(34,197,94,.35)}
        .btn--outline{background:transparent;color:var(--navy);padding:14px 29px;border-radius:var(--radius-sm);border:1.5px solid var(--navy)}
        .btn--outline:hover{background:var(--navy);color:var(--white)}
        .btn--lg{padding:17px 36px;font-size:15px;font-weight:600}

        /* ============================
           HERO — same backdrop as index.html (style.css .hero)
           ============================ */
        .hero{
            padding:148px 0 88px;
            background:linear-gradient(160deg, #ffffff 0%, #f7f7fd 50%, #eef5fb 100%);
            position:relative;
            overflow:hidden;
        }
        .hero::before{
            content:'';
            position:absolute;
            top:-200px;
            right:-200px;
            width:600px;
            height:600px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(33, 191, 207, 0.08) 0%, transparent 70%);
            pointer-events:none;
        }
        .hero::after{
            content:'';
            position:absolute;
            bottom:-100px;
            left:-100px;
            width:400px;
            height:400px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(69, 77, 161, 0.06) 0%, transparent 70%);
            pointer-events:none;
        }
        .hero .hero__grid{position:relative;z-index:1}
        .hero__inner{text-align:center;max-width:800px;margin:0 auto;position:relative}
        .hero h1{margin-bottom:22px;color:var(--navy-text)}
        .hero h1 .accent{color:var(--midnight)}
        .hero__sub{font-size:17px;font-weight:400;color:#7e839d;max-width:620px;margin:0 auto 36px;line-height:1.75}
        .hero__actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}

        /* Hero service pills — layout only (UI: style.css .ind-tag) */
        .hero__left .hero-industries.hero__banner{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:32px;
            margin-bottom:0;
            width:100%;
            min-width:0;
        }

        /* ============================
           GROW BUNDLE — after hero (replace PNGs in assets/images/design-grow-section/)
           ============================ */
        .grow-bundle{
            width:100%;
            padding:clamp(56px,7vw,88px) 0;
            background:#f4f5f8;
        }
        .grow-bundle__head{
            text-align:left;
            max-width:820px;
            margin-bottom:clamp(40px,5vw,56px);
        }
        .grow-bundle__eyebrow{
            font-family:var(--font-body);
            font-size:11px;
            font-weight:800;
            letter-spacing:.14em;
            text-transform:uppercase;
            color:var(--midnight);
            margin-bottom:14px;
        }
        .grow-bundle__title{
            font-family:var(--font-heading);
            font-size:clamp(30px,3.6vw,46px);
            font-weight:600;
            line-height:1.12;
            letter-spacing:-.02em;
            color:var(--navy-text);
            margin-bottom:20px;
        }
        .grow-bundle__title em{
            font-style:italic;
            font-weight:500;
            color:var(--midnight);
        }
        .grow-bundle__sub{
            font-size:18px;
            font-weight:400;
            color:var(--text-muted);
            line-height:1.78;
            max-width:640px;
        }
        .grow-bundle__grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:40px 36px;
        }
        .grow-bundle__media{
            border-radius:16px;
            overflow:hidden;
            border:1px solid rgba(26,31,54,.08);
            aspect-ratio:4/3;
            background:#e4e7f0;
            margin-bottom:22px;
            box-shadow:none;
        }
        .grow-bundle__media img{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
        }
        .grow-bundle__icon{
            width:48px;
            height:48px;
            border-radius:12px;
            border:none;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#fff;
            margin-bottom:18px;
            background:var(--midnight);
            box-shadow:0 4px 14px rgba(69,77,161,.25);
        }
        .grow-bundle__icon svg{
            width:24px;
            height:24px;
            stroke:#fff;
        }
        .grow-bundle__col h3{
            font-family:var(--font-heading);
            font-size:clamp(19px,1.65vw,24px);
            font-weight:600;
            line-height:1.28;
            color:var(--navy-text);
            margin-bottom:12px;
            text-align:left;
        }
        .grow-bundle__col h3 em{
            font-style:italic;
            font-weight:500;
            color:var(--midnight);
        }
        .grow-bundle__col p{
            font-size:15px;
            line-height:1.78;
            color:var(--text-muted);
            text-align:left;
        }

        /* ============================
           PROBLEM
           ============================ */
        .problem{padding:100px 0}
        .problem__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
        .problem__content h2{margin-bottom:20px}
        .problem__content p{margin-bottom:20px;font-size:16px;line-height:1.78;color:var(--muted)}
        .problem__callout{background:#FEF3C7;border-left:3px solid #F59E0B;padding:14px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:15px;font-weight:500;color:var(--navy-text);margin-top:12px}
        .problem__cards{display:flex;flex-direction:column;gap:14px}
        /* Scoped — bare .p-card would break index-style pricing cards (.pricing-grid .p-card) */
        .problem__cards .p-card{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;background:var(--bg-light);border-radius:var(--radius-md);border:1px solid var(--border-light)}
        .problem__cards .p-card__x{width:28px;height:28px;border-radius:50%;background:#FEE2E2;color:#EF4444;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;margin-top:2px}
        .problem__cards .p-card p{font-size:16px;line-height:1.78;color:var(--muted)}
        .problem__cards .p-card strong{color:var(--body);font-weight:500}

        /* ============================
           SERVICES GRID
           ============================ */
        .services{padding:100px 0;background:var(--bg-light)}
        .services__head{text-align:center;margin-bottom:60px}
        .services__head h2{margin-bottom:14px}
        .services__head .sub{margin:0 auto}
        .services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
        .s-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);padding:32px 26px;transition:all .3s;position:relative;overflow:hidden}
        .s-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .3s}
        .s-card:hover{box-shadow:var(--shadow-hover);border-color:transparent;transform:translateY(-3px)}
        .s-card:hover::after{transform:scaleX(1)}
        .s-card__icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:18px}
        .s-card h4{margin-bottom:8px;font-size:15px;font-weight:600}
        .s-card p{font-size:15.5px;line-height:1.75;color:var(--muted)}

        /* problem-section1 (track record) — match index.html tokens; page h2/h3 default to Playfair */
        .problem-section1 h2{color:var(--black)}
        .problem-section1 h2 em{color:var(--midnight);font-style:italic}
        .problem-section1 .section-intro{color:var(--muted);max-width:580px}
        .problem-section1 .stat-card h3{font-family:var(--font-body);font-size:14px;font-weight:600;color:#1a1a1a}
        .problem-section1 .stat-card p{font-size:13px;color:rgba(26,26,26,.72);line-height:1.55}
        .problem-section1 .stat-num{font-family:"Playfair Display",Georgia,serif;color:#454da1}
        /* Page .reveal.visible uses transform — beats style.css .stat-card:hover; match index lift */
        .problem-section1 .stat-card:hover{
            transform:translateY(-6px);
            box-shadow:0 8px 32px rgba(69,77,161,.12);
        }
        .pricing-sec .chip{display:inline-flex;align-items:center;gap:8px}

        /* ============================
           CHANNELS
           ============================ */
        .channels{padding:100px 0;background:var(--bg-light)}
        .channels__head{text-align:center;margin-bottom:56px}
        .channels__head h2{margin-bottom:14px}
        .channels__head .sub{margin:0 auto}
        .channels__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
        .ch-card{background:var(--white);border-radius:var(--radius-md);padding:28px 24px;border:1px solid var(--border);transition:all .3s}
        .ch-card:hover{box-shadow:var(--shadow-card);border-color:transparent}
        .ch-card__icon{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--green-light);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:1rem}
        .ch-card h4{margin-bottom:6px;font-size:15px;font-weight:600}
        .ch-card p{font-size:15.5px;color:var(--muted);line-height:1.75}

        /* ============================
           PROCESS
           ============================ */
        .process{padding:100px 0}
        .process__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:flex-start}
        .process__content h2{margin-bottom:14px}
        .process__content .sub{margin-bottom:28px}
        .step{display:flex;gap:18px;margin-bottom:32px}
        .step:last-child{margin-bottom:0}
        .step__num{width:38px;height:38px;border-radius:50%;background:var(--green);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0;position:relative;z-index:2}
        .step:not(:last-child) .step__num::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:2px;height:32px;background:var(--border)}
        .step__body h4{margin-bottom:3px;font-size:15px;font-weight:600}
        .step__body p{font-size:15px;color:var(--muted);line-height:1.75}

        /* ============================
           DARK SECTION — AI (only dark section on page)
           ============================ */
        .dark-section{padding:100px 0;background:linear-gradient(165deg,var(--navy-deep) 0%,var(--navy) 100%);position:relative;overflow:hidden}
        .dark-section::before{content:'';position:absolute;top:-80px;right:-80px;width:350px;height:350px;background:radial-gradient(circle,rgba(45,212,191,.1) 0%,transparent 70%);border-radius:50%}
        .dark-section__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative}
        .dark-section h2{color:var(--white);margin-bottom:18px}
        .dark-section h2 .accent{color:var(--teal);font-style:italic}
        .dark-section p{color:rgba(255,255,255,.65);margin-bottom:24px;font-size:16px;line-height:1.78;font-weight:400}
        .dark-section .tag{color:var(--teal);opacity:1}
        .dark-cards{display:flex;flex-direction:column;gap:14px}
        .dc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:22px 24px;transition:all .3s}
        .dc:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.15)}
        .dc__tag{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--teal);margin-bottom:6px;font-weight:700}
        .dc h4{color:var(--white);font-size:15px;font-weight:500;line-height:1.4}

        /* ============================
           TESTIMONIAL
           ============================ */
        .testimonial{padding:100px 0;background:var(--bg-light)}
        .testimonial__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
        .testimonial__quote{padding-left:24px;border-left:3px solid var(--green)}
        .testimonial__quote blockquote{font-family:var(--font-heading);font-size:clamp(18px,2.2vw,26px);font-weight:400;color:var(--navy-text);line-height:1.5;font-style:italic;margin-bottom:22px}
        .testimonial__who{display:flex;align-items:center;gap:12px}
        .testimonial__ava{width:44px;height:44px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:700;font-size:.9rem}
        .testimonial__info strong{display:block;color:var(--navy-text);font-size:15px;font-weight:600}
        .testimonial__info span{font-size:13px;color:var(--muted)}
        .why-card{background:var(--white);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-card);border:1px solid var(--border-light)}
        .why-card h3{font-family:var(--font-body);font-size:17px;font-weight:600;margin-bottom:22px;color:var(--navy-text)}
        .why-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
        .why-item:last-child{margin-bottom:0}
        .why-check{width:20px;height:20px;border-radius:50%;background:var(--green-light);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0;margin-top:3px}
        .why-item p{font-size:15.5px;line-height:1.75;color:var(--muted)}
        .why-item strong{color:var(--body);font-weight:600}

        /* ============================
           CTA
           ============================ */
        .cta{padding:100px 0}
        .cta__inner{max-width:680px;margin:0 auto;text-align:center}
        .cta h2{margin-bottom:18px}
        .cta p{font-size:17px;font-weight:400;margin-bottom:32px;color:var(--muted);line-height:1.75}
        .cta__btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:36px}
        .cta__trust{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
        .cta__trust span{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);font-weight:500}
        .cta__trust .ck{color:var(--green);font-weight:700}

        /* ============================
           RESPONSIVE
           ============================ */
        @media(max-width:1024px){
            .problem__grid,.process__grid,.dark-section__grid,.testimonial__grid{grid-template-columns:1fr;gap:44px}
            .services__grid,.channels__grid{grid-template-columns:repeat(2,1fr)}
            .grow-bundle__grid{grid-template-columns:1fr;gap:28px}
        }
        @media(max-width:768px){
            .hero{padding:132px 0 72px}
            .services__grid,.channels__grid{grid-template-columns:1fr}
            .hero__left .hero-industries.hero__banner{display:none}
            .lead-form{padding:18px 16px}
            .ai-slider{height:min(420px,55vh)}
        }
        @media(max-width:480px){
            .hero{padding:124px 0 60px}
            .lead-form{padding:16px 14px}
            .btn--lg{padding:15px 28px;font-size:14px}
        }
        /* Hero — 6-column grid: copy + form 50/50 (3+3 cols), banner full width */
        .hero__grid{
            display:grid;
            grid-template-columns:repeat(6,minmax(0,1fr));
            gap:28px 24px;
            align-items:start;
        }
        .hero__left{
            grid-column:1 / span 3;
            text-align:left;
            display:grid;
            grid-template-columns:repeat(6,minmax(0,1fr));
            column-gap:16px;
            row-gap:0;
            min-width:0;
        }
        .hero__left > *{grid-column:1 / -1}
        .hero__left > .hero-badge{
            grid-column:1 / -1;
            justify-self:start;
            width:max-content;
            max-width:100%;
            white-space:nowrap;
        }
        .hero__left h1{
            text-align:left;
            font-size:clamp(38px,4.75vw,60px);
            min-width:0;
            max-width:100%;
            width:100%;
        }
        .hero__left h1 .hero-h1-row{
            display:block;
            text-wrap:pretty;
            max-width:100%;
            width:100%;
        }
        .hero__left h1 .hero-h1-row + .hero-h1-row{
            margin-top:.12em;
        }
        @media (min-width:769px) and (max-width:1024px){
            .lead-form{
                grid-column:4 / -1;
                align-self:start;
            }
        }
        @media (min-width:769px){
            body.design-services-page .hero__left{
                overflow-x:clip;
            }
            body.design-services-page .hero__left h1{
                font-size:clamp(38px,4.75vw,60px);
                line-height:1.12;
                max-width:100%;
                width:100%;
                overflow-x:clip;
            }
            body.design-services-page .hero__left h1 .hero-h1-row{
                text-wrap:pretty;
                white-space:normal;
                max-width:100%;
                width:100%;
                overflow-wrap:break-word;
            }
            body.design-services-page .hero__left h1 em{
                white-space:normal;
            }
            body.design-services-page .lead-form{
                position:relative;
                z-index:2;
            }
            body.print-design-page .hero__grid{
                align-items:start;
            }
            body.print-design-page .hero__left{
                align-self:start;
            }
            body.print-design-page .lead-form{
                align-self:start;
            }
        }
        .hero__left h1 em{
            white-space:normal;
        }
        @media(max-width:520px){
            .hero__left h1 em{white-space:normal}
        }
        @media(min-width:1025px){
            body.design-services-page .hero__grid{
                grid-template-columns:minmax(0,1.12fr) minmax(300px,470px);
                gap:28px 24px;
            }
            .hero__left{
                grid-column:1;
                min-width:0;
                max-width:100%;
            }
            body.design-services-page .lead-form{
                grid-column:2;
                max-width:470px;
                width:100%;
                justify-self:start;
            }
        }
        .hero__left .hero__sub{
            margin:0 0 36px;
            text-align:left;
            color:var(--muted);
            font-size:18px;
        }
        .hero__left .hero__actions{justify-content:flex-start}

        @media(max-width:1024px){
            .hero__grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 28px}
            .hero__left{grid-column:1 / -1;order:1}
            .lead-form{
                grid-column:1 / -1;
                justify-self:stretch;
                max-width:100%;
                width:100%;
                margin:clamp(28px,6vw,44px) 0 0;
                order:2;
            }
        }

        /* Lead Form — card chrome matches index.html .quiz-card */
        .lead-form{
            min-width:0;
            position:relative;
            background:#fff;
            border-radius:10px;
            padding:22px 22px 18px;
            box-shadow:0 20px 60px rgba(69, 77, 161, 0.15);
            border:1px solid rgba(69, 77, 161, 0.1);
            display:grid;
            grid-template-columns:1fr;
            gap:12px;
            align-content:start;
            overflow:visible;
        }
        @media(min-width:1025px){
            .lead-form{
                grid-template-columns:repeat(6,minmax(0,1fr));
                gap:14px 12px;
            }
        }
        .lead-form .hero-float{
            z-index:2;
            position:absolute;
            top:-16px!important;
            right:-16px;
            left:auto!important;
            margin:0;
        }
        @media(max-width:480px){
            .lead-form .hero-float{
                right:max(8px,env(safe-area-inset-right,0px));
                left:auto!important;
                top:-6px;
                padding:10px 14px;
                font-size:12px;
                white-space:normal;
                max-width:min(100%,calc(100% - 24px));
                text-align:left;
            }
        }
        .lead-form > *:not(.hero-float){grid-column:1 / -1}
        .lead-form__submit{
            width:100%;
            margin-top:2px;
            background:linear-gradient(90deg, #4b59a7 0%, #26b1c7 100%);
            color:#fff;
            font-weight:600;
            font-size:15px;
            padding:15px 28px;
            border-radius:12px;
            box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .lead-form__submit:hover{
            filter:brightness(1.05);
            transform:translateY(-1px);
            box-shadow:0 6px 14px rgba(75, 89, 167, 0.22);
        }
        .lead-form__submit:focus-visible{
            outline:2px solid #4b59a7;
            outline-offset:2px;
        }
        .lead-form__head{margin:0 0 4px}
        .lead-form .quiz-badge{
            margin-bottom:4px;
        }
        .lead-form__title{
            font-family:var(--font-heading);
            font-size:22px;
            font-weight:500;
            color:var(--navy-text);
            line-height:1.2;
            letter-spacing:-0.3px;
            margin:0 0 8px;
        }
        .lead-form__subtitle{
            font-family:var(--font-body);
            font-size:13.5px;
            font-weight:400;
            color:var(--muted);
            line-height:1.65;
            margin:0;
            max-width:32rem;
        }
        .lead-form__urgency{display:flex;align-items:center;gap:8px;margin-bottom:20px}
        .lead-form__urgency-text{font-size:.82rem;color:var(--text-muted);font-weight:500}
        .lead-form__bar{flex:1;height:6px;background:var(--border-light);border-radius:var(--radius-full);overflow:hidden;max-width:160px}
        .lead-form__bar-fill{height:100%;width:48%;background:linear-gradient(90deg,var(--navy),var(--teal));border-radius:var(--radius-full)}
        .lead-form__group{display:flex;flex-direction:column;gap:5px;width:100%;min-width:0;margin-bottom:0}
        .lead-form__label{
            font-size:11px;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:0.05em;
            color:var(--body);
        }
        .lead-form__input{
            width:100%;
            min-height:42px;
            padding:9px 14px;
            border:1.5px solid var(--lead-field-border);
            border-radius:8px;
            font-family:var(--font-body);
            font-size:14.5px;
            font-weight:400;
            color:var(--ink);
            background:var(--lead-field-bg);
            transition:border-color .2s,background-color .2s,box-shadow .2s;
            outline:none;
            box-sizing:border-box;
        }
        .lead-form__input::placeholder{color:#b0b0c4;font-weight:400;opacity:1}
        .lead-form__input:focus{
            border-color:var(--midnight);
            background:var(--white);
            box-shadow:0 0 0 3px rgba(69,77,161,.07);
        }
        .lead-form__select{
            appearance:none;-webkit-appearance:none;
            width:100%;
            min-height:42px;
            padding:9px 14px;
            padding-right:40px;
            border:1.5px solid var(--lead-field-border);
            border-radius:8px;
            font-family:var(--font-body);
            font-size:14.5px;
            font-weight:400;
            color:var(--ink);
            background-color:var(--lead-field-bg);
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
            background-repeat:no-repeat;
            background-position:right 16px center;
            cursor:pointer;
            line-height:1.35;
            outline:none;
        }
        .lead-form__select:focus{border-color:var(--midnight);background-color:var(--white);box-shadow:0 0 0 3px rgba(69,77,161,.07)}
        .lead-form__question{font-size:15.5px;font-weight:600;color:var(--navy-text);margin-bottom:12px}
        .lead-form__options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
        @media(max-width:480px){.lead-form__options{grid-template-columns:1fr}}
        .lead-form__option{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;font-size:15px;font-weight:500;color:var(--body)}
        .lead-form__option:hover{border-color:var(--navy);color:var(--navy)}
        .lead-form__option input{display:none}
        .lead-form__option .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
        .lead-form__option:hover .radio{border-color:var(--navy)}
        .lead-form__option input:checked ~ .radio{border-color:var(--green);background:var(--green)}
        .lead-form__option input:checked ~ .radio::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--white)}
        .lead-form__option input:checked ~ span:last-child{color:var(--navy-text);font-weight:500}
        .hero__showcase{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
        .hero__showcase img{border-radius:var(--radius-md);width:100%;height:200px;object-fit:cover;border:1px solid var(--border);box-shadow:var(--shadow-card);transition:transform .3s}
        .hero__showcase img:hover{transform:translateY(-4px)}
        @media(max-width:768px){.hero__showcase{grid-template-columns:1fr;gap:12px}.hero__showcase img{height:180px}}

        .problem__img{border-radius:var(--radius-lg);width:100%;height:100%;min-height:340px;object-fit:cover}

        .process__img{border-radius:var(--radius-lg);width:100%;margin-top:32px;max-height:320px;object-fit:cover;border:1px solid var(--border)}

        .dark-section__img{border-radius:var(--radius-lg);width:100%;max-height:360px;object-fit:cover;border:1px solid rgba(255,255,255,.1)}

        .testimonial__photo{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--green)}

        .cta__img{width:100%;max-height:280px;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:40px;border:1px solid var(--border)}

        /* AI-first creative — under logo bar (theme: heading, tag, accent, btn) */
        .ai-first-section{background:var(--white);padding:clamp(56px,7vw,96px) 0}
        .ai-first-section__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
        .ai-first-section__title{margin:0 0 18px}
        .ai-first-section__title--split{
            font-family:var(--font-heading);
            font-weight:600;
            font-size:clamp(28px,3.5vw,44px);
            line-height:1.12;
            letter-spacing:-0.02em;
            color:var(--navy-text);
        }
        .ai-first-section__title--split .ai-first-section__title-line{display:block}
        .ai-first-section__title--split .ai-first-section__title-line--sans{
            font-family:var(--font-heading);
            font-weight:600;
            font-style:normal;
        }
        .ai-first-section__title--split .ai-first-section__title-line--italic{
            font-family:var(--font-heading);
            font-weight:500;
            font-style:italic;
            color:var(--midnight);
            margin-top:0.1em;
        }
        .ai-first-section__lead{font-family:var(--font-body);font-size:17px;font-weight:500;color:var(--navy-text);margin:0 0 14px;line-height:1.5}
        .ai-first-section__body{font-family:var(--font-body);font-size:17px;line-height:1.75;color:var(--text-muted);margin:0 0 28px;max-width:38em}
        .ai-first-section__body--secondary{font-size:17px;line-height:1.75;margin-bottom:0;max-width:40em;color:var(--text-muted)}
        .ai-first-section__cta{
            margin-top:24px;
            background:linear-gradient(90deg,#4b59a7 0%,#26b1c7 100%);
            color:#fff!important;
            padding:15px 30px;
            border-radius:12px;
            box-shadow:0 4px 10px rgba(0,0,0,.1);
        }
        .ai-first-section__cta:hover{
            filter:brightness(1.05);
            transform:translateY(-1px);
            box-shadow:0 6px 14px rgba(75,89,167,.22);
        }
        .ai-first-section__cta:focus-visible{
            outline:2px solid #4b59a7;
            outline-offset:2px;
        }
        /* 3-col vertical marquee + top/bottom fade (section bg = white, no extra panel color) */
        .ai-first-section__media{
            width:100%;
            min-width:0;
            min-height:320px;
        }
        .ai-slider{
            position:relative;
            width:100%;
            min-width:0;
            height:min(520px,66vh);
            max-height:560px;
            border-radius:var(--radius-lg);
            overflow:hidden;
            background:transparent;
            border:none;
            box-shadow:none;
        }
        .ai-slider::before,
        .ai-slider::after{
            content:'';
            position:absolute;
            left:0;
            right:0;
            z-index:2;
            height:clamp(48px,14%,100px);
            pointer-events:none;
        }
        .ai-slider::before{
            top:0;
            background:linear-gradient(to bottom,var(--white) 0%,rgba(255,255,255,0) 100%);
        }
        .ai-slider::after{
            bottom:0;
            background:linear-gradient(to top,var(--white) 0%,rgba(255,255,255,0) 100%);
        }
        .ai-slider__cols{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:clamp(10px,2vw,16px);
            height:100%;
            width:100%;
            padding:10px 10px 10px;
            box-sizing:border-box;
        }
        .ai-slider__col{
            min-width:0;
            height:100%;
            overflow:hidden;
        }
        .ai-slider__track{
            display:flex;
            flex-direction:column;
            flex-wrap:nowrap;
            gap:0;
            will-change:transform;
            backface-visibility:hidden;
            -webkit-backface-visibility:hidden;
        }
        .ai-slider__set{
            --ai-gap:clamp(10px,2vw,16px);
            display:flex;
            flex-direction:column;
            gap:var(--ai-gap);
            padding-bottom:var(--ai-gap);
            flex-shrink:0;
        }
        .ai-slider__col--down .ai-slider__track{
            animation:ai-marquee-tb 150s linear infinite;
        }
        .ai-slider__col--up .ai-slider__track{
            animation:ai-marquee-bt 130s linear infinite;
        }
        /* Outer cols: top→bottom; middle: opposite; -50% = one .ai-slider__set stack */
        @keyframes ai-marquee-tb{
            0%{transform:translate3d(0,-50%,0)}
            100%{transform:translate3d(0,0,0)}
        }
        @keyframes ai-marquee-bt{
            0%{transform:translate3d(0,0,0)}
            100%{transform:translate3d(0,-50%,0)}
        }
        .ai-slider__card{
            flex-shrink:0;
            border-radius:var(--radius-md);
            overflow:hidden;
            border:none;
        }
        .ai-slider__card img{
            display:block;
            width:100%;
            height:auto;
            aspect-ratio:1/1;
            object-fit:cover;
            vertical-align:top;
            transform:translateZ(0);
        }
        @media (prefers-reduced-motion:reduce){
            .ai-slider__col--down .ai-slider__track,
            .ai-slider__col--up .ai-slider__track{animation:none}
        }
        @media(max-width:900px){
            .ai-first-section__grid{grid-template-columns:1fr}
            .ai-first-section__copy{order:0}
            .ai-first-section__media{order:1;max-width:520px;margin:0 auto;width:100%}
        }

        /* AI-powered branding — boxed div with full-area background image */
        .ai-branding-panel{
            width:100%;
            padding:clamp(48px,6vw,88px) 0;
            background:var(--white);
        }
        .ai-branding-panel__boxed{
            position:relative;
            border-radius:var(--radius-lg);
            border:1px solid var(--border-light);
            box-shadow:var(--shadow-card);
            overflow:hidden;
            min-height:min(480px,58vh);
            background-color:#eef0f5;
            background-image:
                linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 26%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.15) 70%,transparent 100%),
                url('../images/design-page/background.png');
            background-size:cover,cover;
            background-position:center,right center;
            background-repeat:no-repeat;
        }
        .ai-branding-panel__content{
            position:relative;
            z-index:1;
            padding:clamp(24px,4vw,44px) clamp(20px,3vw,40px);
            max-width:min(100%,540px);
        }
        .ai-branding-panel__content .tag{
            color:var(--green);
        }
        .ai-branding-panel__cards{
            display:flex;
            flex-direction:column;
            gap:12px;
            margin-bottom:28px;
        }
        .ai-branding-panel__card{
            display:flex;
            align-items:flex-start;
            gap:16px;
            padding:18px 20px;
            background:var(--white);
            border-radius:var(--radius-md);
            border:1px solid var(--border-light);
            box-shadow:0 1px 3px rgba(27,42,107,.06);
        }
        .ai-branding-panel__card-icon{
            width:44px;
            height:44px;
            border-radius:var(--radius-md);
            background:rgba(69,77,161,.1);
            color:var(--midnight);
            display:flex;
            align-items:center;
            justify-content:center;
            flex-shrink:0;
            font-size:17px;
        }
        .ai-branding-panel__card:nth-child(2) .ai-branding-panel__card-icon{
            background:var(--green-light);
            color:var(--green);
        }
        .ai-branding-panel__card h3{
            font-family:var(--font-body);
            font-size:11px;
            font-weight:800;
            letter-spacing:.12em;
            text-transform:uppercase;
            color:var(--midnight);
            margin:0 0 6px;
        }
        .ai-branding-panel__card p{
            font-family:var(--font-body);
            font-size:15px;
            line-height:1.65;
            color:var(--text-muted);
            margin:0;
        }
        @media(max-width:900px){
            .ai-branding-panel__boxed{
                min-height:0;
                background-image:
                    linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.42) 100%),
                    url('../images/design-page/background.png');
                background-size:cover,cover;
                background-position:center,right center;
                background-repeat:no-repeat,no-repeat;
            }
            .ai-branding-panel__content{max-width:100%}
        }
        @media(max-width:768px){
            body.design-services-page .ai-branding-panel{padding:clamp(36px,8vw,56px) 0}
            body.design-services-page .ai-branding-panel__boxed{
                border-radius:var(--radius-md);
                min-height:0;
            }
            body.design-services-page .ai-branding-panel__content{
                padding:clamp(18px,4vw,26px) clamp(14px,4vw,22px);
                max-width:100%;
            }
            body.design-services-page .ai-branding-panel__cards{gap:10px;margin-bottom:20px}
            body.design-services-page .ai-branding-panel__card{
                padding:14px 16px;
                gap:12px;
            }
            body.design-services-page .ai-branding-panel__card-icon{
                width:40px;
                height:40px;
                font-size:15px;
            }
        }

        /* AI marquee — two columns on very small phones saves layout + paint */
        @media(max-width:480px){
            body.design-services-page .ai-slider__cols{
                grid-template-columns:repeat(2,minmax(0,1fr));
                gap:8px;
                padding:8px 6px;
            }
        }

        .reveal{opacity:1;transform:none;transition:all .55s cubic-bezier(.22,1,.36,1)}
        html.js .reveal:not(.visible){opacity:0;transform:translateY(20px)}
        .reveal.visible{opacity:1;transform:translateY(0)}
        /* Hero + form: show immediately (no scroll-reveal delay on load) */
        html.js body.design-services-page .hero .reveal{
            opacity:1;
            transform:none;
        }

        /*
         * Mobile / small tablet: same horizontal gutter as .ai-first-section (container-only).
         * Global style.css adds section padding-inline — zero it here so inset = one layer (matches ai-first).
         */
        @media(max-width:900px){
            body.design-services-page{
                --ds-pad-x:max(20px,env(safe-area-inset-left,0px));
                --ds-pad-x-r:max(20px,env(safe-area-inset-right,0px));
            }
            body.design-services-page section{
                padding-left:0;
                padding-right:0;
            }
            body.design-services-page .container{
                padding-left:var(--ds-pad-x);
                padding-right:var(--ds-pad-x-r);
                max-width:100%;
                box-sizing:border-box;
            }
            body.design-services-page .pricing-inner{
                padding-left:var(--ds-pad-x);
                padding-right:var(--ds-pad-x-r);
                box-sizing:border-box;
            }
            body.design-services-page .portfolio-rows{
                padding-left:var(--ds-pad-x);
                padding-right:var(--ds-pad-x-r);
                box-sizing:border-box;
            }
            body.design-services-page .hero .container.hero__grid{
                width:100%;
                max-width:min(1148px,100%);
                gap:28px min(28px,4vw);
            }
            body.design-services-page .lead-form .hero-float{
                right:max(10px,env(safe-area-inset-right,0px));
                top:-8px;
                left:auto!important;
            }
            body.design-services-page .comparison-section .comp-table-wrap{
                margin-left:calc(-1 * var(--ds-pad-x));
                margin-right:calc(-1 * var(--ds-pad-x-r));
                padding-left:var(--ds-pad-x);
                padding-right:var(--ds-pad-x-r);
            }
        }
        @media(max-width:480px){
            body.design-services-page h1{
                font-size:clamp(26px,7.5vw,40px);
            }
        }

        /* Portfolio — tablet / small laptop: shorter tiles so section na lamba ho */
        @media(max-width:1024px) and (min-width:769px){
            body.design-services-page .portfolio-section .portfolio-card{
                width:min(120px,17vw)!important;
                height:min(90px,13vw)!important;
                max-height:90px!important;
                min-height:0!important;
                aspect-ratio:auto!important;
            }
        }

        /* What We Do — testimonials: text-only, no video column */
        body.design-services-page .testi-video {
            display: none !important;
        }

        body.design-services-page .testi-card {
            width: min(380px, 88vw);
            min-height: auto;
        }

        body.design-services-page .testi-content {
            padding: 24px 26px;
        }

        @media (max-width: 640px) {
            body.design-services-page .testi-card {
                width: 88vw;
            }

            body.design-services-page .testi-content {
                padding: 20px;
            }
        }

        /* Presentations — wider hero copy area, larger 2-line headline */
        body.presentations-page .hero__left h1 {
            font-size: clamp(40px, 4.9vw, 58px);
            line-height: 1.08;
        }

        @media (min-width: 769px) {
            body.presentations-page .hero__grid {
                grid-template-columns: minmax(0, 1.42fr) minmax(260px, 400px);
            }

            body.presentations-page .lead-form {
                max-width: 400px;
            }

            body.presentations-page .hero__left h1 {
                font-size: clamp(42px, 5vw, 60px);
                line-height: 1.08;
            }
        }

        /* Email marketing — room for 3-line headline beside form */
        @media (min-width: 769px) {
            body.email-marketing-page .hero__grid {
                grid-template-columns: minmax(0, 1.42fr) minmax(260px, 400px);
            }

            body.email-marketing-page .lead-form {
                max-width: 400px;
            }
        }

        /* Design services — tighter section gaps */
        body.marketing-advertising-page .ai-branding-panel,
        body.digital-web-page .ai-branding-panel {
            padding-bottom: 40px;
        }

        body.marketing-advertising-page .comparison-section,
        body.digital-web-page .comparison-section {
            padding-top: 44px;
            padding-bottom: 40px;
        }

        body.marketing-advertising-page #problem,
        body.digital-web-page #problem {
            padding-bottom: 40px;
        }

        body.marketing-advertising-page .teams-section,
        body.digital-web-page .teams-section {
            padding-top: 44px;
        }

        body.marketing-advertising-page #pricing.pricing-sec,
        body.digital-web-page #pricing.pricing-sec {
            padding-top: 44px;
            padding-bottom: 40px;
        }

        body.marketing-advertising-page .testimonials-section,
        body.digital-web-page .testimonials-section {
            padding-top: 44px;
        }