/*
Theme Name: Social Mania Agency
Theme URI: https://socialmanias.com
Author: Social Mania
Author URI: https://socialmanias.com
Description: Bold editorial WordPress theme for Social Mania B2B digital growth agency.
Version: 3.2.0
License: GNU General Public License v2 or later
Text Domain: social-mania
Tags: one-column, custom-logo, custom-menu, editor-style, featured-images, full-width-template, theme-options
*/
:root{--sm-orange:#FF8A00;--sm-teal:#2F5061;--sm-charcoal:#1F2328;--sm-light:#E6EEF2;--sm-yellow:#FFC107;--sm-gold:#FFB81C;--font-display:'Alexandria',sans-serif;--font-body:'Readex Pro',sans-serif;--container:1400px;--transition:all .4s cubic-bezier(.22,1,.36,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--sm-charcoal);line-height:1.6;background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:var(--transition)}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:.95;text-transform:uppercase;letter-spacing:.5px}
h1{font-size:clamp(3rem,10vw,8rem)}
h2{font-size:clamp(2.2rem,5vw,4.2rem)}
h3{font-size:clamp(1.6rem,3vw,2.4rem)}
p{font-family:var(--font-body);font-size:1rem;line-height:1.7;color:#555}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.header-container,.footer-container,.section-container,.hero-container,.stats-container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
@media(min-width:640px){.header-container,.footer-container,.section-container,.hero-container,.stats-container{padding:0 32px}}
@media(min-width:1024px){.header-container,.footer-container,.section-container,.hero-container,.stats-container{padding:0 48px}}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;padding:14px 28px;border-radius:60px;border:2px solid transparent;cursor:pointer;transition:var(--transition)}
.btn--primary{background:var(--sm-orange);color:var(--sm-charcoal);border-color:var(--sm-orange)}
.btn--primary:hover{background:var(--sm-charcoal);border-color:var(--sm-charcoal);color:var(--sm-orange)}
.btn--outline-dark{background:transparent;color:var(--sm-charcoal);border-color:var(--sm-charcoal)}
.btn--outline-dark:hover{background:var(--sm-charcoal);color:#fff}
.btn--lg{padding:16px 32px;font-size:.8rem}
.eyebrow,.eyebrow-inline{font-family:var(--font-body);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.3em;color:var(--sm-orange);display:inline-flex;align-items:center;gap:12px}
.eyebrow-line{display:inline-block;width:32px;height:1px;background:var(--sm-charcoal)}
.eyebrow-line--orange{background:var(--sm-orange)}
.eyebrow--on-orange{color:rgba(31,35,40,.5)}
.eyebrow--on-orange .eyebrow-line{background:var(--sm-charcoal)}
.display-stroke{-webkit-text-stroke:1.5px var(--sm-charcoal);color:transparent}

/* HEADER */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;transition:var(--transition)}
.site-header.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:2px solid rgba(31,35,40,.08)}
.header-container{display:flex;align-items:center;justify-content:space-between;padding-top:24px;padding-bottom:24px}
.site-logo img,.site-logo .custom-logo{height:44px;width:auto}
.custom-logo-link{display:inline-block}
.main-nav{display:none}
.main-nav .nav-list{display:flex;gap:32px;align-items:center}
.main-nav .nav-list li a{font-family:var(--font-body);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--sm-charcoal)}
.main-nav .nav-list li a:hover,.main-nav .nav-list li a.active{color:var(--sm-orange)}
.header-right{display:flex;align-items:center;gap:16px}
.menu-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--sm-charcoal);transition:var(--transition)}
@media(min-width:1024px){.main-nav{display:block}.menu-toggle{display:none}}
.mobile-nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;opacity:0;visibility:hidden;transition:var(--transition)}
.mobile-nav-overlay.open{opacity:1;visibility:visible}
.mobile-nav{position:fixed;top:0;right:0;width:380px;max-width:90vw;height:100vh;background:#fff;z-index:201;transform:translateX(100%);transition:transform .5s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;padding:32px}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px}
.mobile-nav-header img,.mobile-nav-header .custom-logo{height:44px}
.mobile-nav-close{background:none;border:none;cursor:pointer;padding:8px}
.mobile-nav-links{flex:1;display:flex;flex-direction:column;gap:4px}
.mobile-nav-link{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid rgba(31,35,40,.08);font-family:var(--font-display);font-size:2rem;font-weight:700;text-transform:uppercase;color:var(--sm-charcoal)}
.mobile-nav-link .num{font-family:var(--font-body);font-size:.65rem;font-weight:700;letter-spacing:.2em;color:rgba(31,35,40,.3)}
.mobile-nav-link.active,.mobile-nav-link:hover{color:var(--sm-orange)}
.mobile-nav-cta{margin-top:auto;padding-top:24px}
.mobile-nav-cta .btn{width:100%;justify-content:center}

/* HERO */
.hero{position:relative;min-height:100vh;background:var(--sm-orange);display:flex;flex-direction:column;overflow:hidden}
.hero-bg-decor{position:absolute;inset:0;pointer-events:none}
.hero-circle{position:absolute;border-radius:50%;border:2px solid rgba(31,35,40,.08)}
.hero-circle--left{width:500px;height:500px;left:-128px;top:25%}
.hero-circle--right{width:400px;height:400px;right:-80px;bottom:25%}
.hero-line{position:absolute;background:var(--sm-charcoal)}
.hero-line--v{width:6px;height:128px;right:15%;top:80px}
.hero-line--h{width:128px;height:6px;left:40%;bottom:128px}
.hero-container{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding-top:160px;padding-bottom:48px}
.hero-grid{display:grid;gap:48px}
@media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;gap:32px;align-items:start}}
.hero-visual{position:relative;order:2}
@media(min-width:1024px){.hero-visual{order:1}}
.hero-card{position:relative;max-width:400px;margin:0 auto}
@media(min-width:1024px){.hero-card{margin:0}}
.hero-card-inner{position:relative;background:var(--sm-charcoal);border-radius:24px;padding:32px;transform:rotate(-6deg);z-index:2}
.hero-card-inner::before{content:'';position:absolute;inset:8px;background:var(--sm-teal);border-radius:16px}
.hero-card-inner>*{position:relative;z-index:1}
.logo-mark{font-family:var(--font-display);font-size:4.5rem;color:var(--sm-light);text-align:center;line-height:1}
.logo-name{font-family:var(--font-display);font-size:1.5rem;color:var(--sm-orange);text-align:center;letter-spacing:.1em;margin-top:12px}
.logo-divider{width:64px;height:1px;background:rgba(255,138,0,.5);margin:16px auto}
.logo-tagline{font-family:var(--font-body);font-size:.7rem;color:rgba(230,238,242,.7);text-align:center;max-width:200px;margin:0 auto}
.hero-card-accent{position:absolute;top:-12px;right:-12px;width:64px;height:64px;background:var(--sm-yellow);border-radius:16px;z-index:3}
.hero-floating{position:absolute;bottom:-24px;right:-24px;background:var(--sm-charcoal);border-radius:16px;padding:12px 20px;z-index:3;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:float 4s ease-in-out infinite}
.hero-floating .number{font-family:var(--font-display);font-size:1.5rem;color:var(--sm-orange)}
.hero-floating .label{font-family:var(--font-body);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(230,238,242,.7);margin-left:8px}
.hero-watermark{position:absolute;right:-32px;bottom:-40px;font-family:var(--font-display);font-size:10rem;color:rgba(31,35,40,.06);pointer-events:none;z-index:1}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.hero-text{order:1}
@media(min-width:1024px){.hero-text{order:2;padding-top:32px}}
.hero-text h1{margin-top:24px}
.hero-text .hero-line-text{display:block}
.hero-subtitle{margin-top:32px;max-width:560px;font-size:1rem;color:rgba(31,35,40,.7)}
.hero-buttons{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.spin-circle{position:relative;width:112px;height:112px}
@media(min-width:640px){.spin-circle{width:144px;height:144px}}
.spin-circle svg{width:100%;height:100%;animation:spin-slow 20s linear infinite}
.spin-circle text{fill:var(--sm-charcoal);font-family:var(--font-body);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.2em}
.spin-arrow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hero-year{position:absolute;right:24px;top:50%;transform:translateY(-50%) rotate(90deg);font-family:var(--font-body);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.3em;color:rgba(31,35,40,.4);display:none}
@media(min-width:1024px){.hero-year{display:block}}
.hero-marquee{position:relative;overflow:hidden;border-top:2px solid var(--sm-charcoal);padding:24px 0}
@media(min-width:640px){.hero-marquee{padding:32px 0}}
.marquee-track{display:flex;animation:marquee var(--sm-marquee-speed,25s) linear infinite;white-space:nowrap}
.marquee-track span{font-family:var(--font-display);font-size:clamp(3rem,10vw,8rem);color:var(--sm-charcoal);padding:0 16px;line-height:1}
.marquee-bolt{position:absolute;left:32px;top:50%;transform:translateY(-50%);color:var(--sm-charcoal);display:none}
@media(max-width:639px){.marquee-bolt{display:block}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* REGION STRIP */
.region-strip{overflow:hidden;background:#fff;padding:12px 0;border-bottom:2px solid rgba(31,35,40,.08)}
.region-track{display:flex;animation:marquee var(--sm-region-speed,20s) linear infinite;white-space:nowrap}
.region-track span{font-family:var(--font-body);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:rgba(31,35,40,.4);padding:0 20px}
.region-track .dot{color:var(--sm-orange);margin-left:20px}

/* STATS */
.stats-section{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-light)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:1024px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-item{padding:32px 24px;text-align:center}
@media(min-width:1024px){.stat-item{padding:48px 32px;text-align:left}}
.stat-item.has-border-left{border-left:2px solid rgba(31,35,40,.1)}
@media(max-width:1023px){.stat-item.has-border-top-lg{border-top:2px solid rgba(31,35,40,.1)}}
.stat-number{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4.5rem);font-weight:700;color:var(--sm-charcoal);line-height:1}
.stat-number .suffix{color:var(--sm-orange)}
.stat-label{margin-top:12px;font-family:var(--font-body);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.24em;color:rgba(31,35,40,.5)}

/* SECTIONS COMMON */
.section-growth,.section-portfolio,.section-dna,.section-industries,.section-cta{padding:80px 0}
@media(min-width:640px){.section-growth,.section-portfolio,.section-dna,.section-industries,.section-cta{padding:100px 0}}
.section-growth{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-orange)}
.section-portfolio{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-orange)}
.section-dna{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-light)}
.section-industries{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-light)}
.section-cta{background:var(--sm-orange);text-align:center;position:relative;overflow:hidden}
.section-cta h2{margin-bottom:24px}
.section-cta p{max-width:600px;margin:0 auto 40px;font-size:1.1rem}
.section-header-row{display:flex;flex-direction:column;gap:32px;margin-bottom:56px}
@media(min-width:1024px){.section-header-row{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.section-header-right{display:flex;flex-direction:column;gap:20px}
@media(min-width:1024px){.section-header-right{align-items:flex-end;text-align:right;max-width:320px}}
.section-note{max-width:320px;font-size:.875rem;color:rgba(31,35,40,.55)}
.section-header-row h2{color:var(--sm-charcoal)}
.view-all-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--sm-charcoal)}
.view-all-link:hover{opacity:.8}

/* GROWTH STEPS */
.growth-steps{position:relative;display:flex;flex-direction:column;gap:20px}
.growth-line{position:absolute;left:3.2rem;top:32px;bottom:32px;width:1px;background:linear-gradient(to bottom,rgba(31,35,40,.6),rgba(31,35,40,.2),transparent);display:none}
@media(min-width:1024px){.growth-line{display:block}}
.growth-step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:#fff;border:2px solid rgba(31,35,40,.1);border-radius:32px;padding:28px;transition:var(--transition)}
@media(min-width:1024px){.growth-step{grid-template-columns:auto 1fr auto;padding:32px}}
.growth-step:hover{transform:translateY(-4px);border-color:var(--sm-charcoal);box-shadow:0 20px 40px rgba(0,0,0,.1)}
.step-number-wrap{flex-shrink:0}
.step-number{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:2px solid rgba(31,35,40,.2);background:rgba(31,35,40,.05);font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--sm-charcoal);transition:var(--transition)}
.growth-step:hover .step-number{background:var(--sm-charcoal);color:var(--sm-orange);border-color:var(--sm-charcoal)}
.step-content h3{font-size:clamp(1.5rem,3vw,2rem)}
.step-content p{margin-top:8px;font-size:.875rem;color:rgba(31,35,40,.55)}
.step-label{font-family:var(--font-body);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:rgba(31,35,40,.3);display:none}
@media(min-width:1024px){.step-label{display:block;text-align:right}}

/* PORTFOLIO SLIDER */
.portfolio-arrows{display:none;justify-content:flex-end;gap:12px;margin-bottom:24px}
@media(min-width:1024px){.portfolio-arrows{display:flex}}
.portfolio-arrow{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:2px solid rgba(31,35,40,.2);background:transparent;color:var(--sm-charcoal);cursor:pointer;transition:var(--transition)}
.portfolio-arrow:hover{border-color:var(--sm-charcoal);background:var(--sm-charcoal);color:var(--sm-orange)}
.portfolio-slider{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:16px}
.portfolio-slider::-webkit-scrollbar{display:none}
.portfolio-slide{flex:0 0 82%;scroll-snap-align:start;text-decoration:none}
@media(min-width:640px){.portfolio-slide{flex:0 0 420px}}
@media(min-width:1024px){.portfolio-slide{flex:0 0 calc(33.333% - 16px)}}
.portfolio-card{display:flex;flex-direction:column;border-radius:28px;border:2px solid rgba(31,35,40,.1);background:#fff;overflow:hidden;transition:var(--transition);height:100%}
.portfolio-slide:hover .portfolio-card{transform:translateY(-8px);border-color:var(--sm-orange);box-shadow:0 20px 50px rgba(0,0,0,.12)}
.portfolio-card-image{position:relative;width:100%;height:208px;background:var(--sm-orange);display:flex;align-items:center;justify-content:center;overflow:hidden}
.portfolio-card-image img{width:100%;height:100%;object-fit:cover}
.portfolio-card-title{font-family:var(--font-display);font-size:3rem;color:var(--sm-charcoal);text-transform:uppercase;text-align:center;padding:20px}
.portfolio-card-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(31,35,40,.3),transparent)}
.portfolio-card-country{position:absolute;left:20px;top:20px;background:rgba(31,35,40,.8);border-radius:50px;padding:4px 12px;font-family:var(--font-body);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:rgba(230,238,242,.9);z-index:2}
.portfolio-card-arrow{position:absolute;right:20px;top:20px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--sm-charcoal);color:var(--sm-orange);transform:translateY(12px);opacity:0;transition:var(--transition);z-index:2}
.portfolio-slide:hover .portfolio-card-arrow{transform:translateY(0);opacity:1}
.portfolio-card-body{flex:1;display:flex;flex-direction:column;padding:24px}
.portfolio-card-tag{display:inline-block;width:fit;border:2px solid rgba(255,138,0,.3);border-radius:50px;padding:4px 12px;font-family:var(--font-body);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--sm-orange);margin-bottom:12px}
.portfolio-card-desc{font-size:.875rem;color:rgba(31,35,40,.6);flex:1}
.portfolio-card-metrics{display:flex;align-items:flex-end;justify-content:space-between;border-top:2px solid rgba(31,35,40,.1);padding-top:20px;margin-top:24px}
.metric-value{font-family:var(--font-display);font-size:2.5rem;line-height:1;color:var(--sm-orange)}
.metric-label{margin-top:6px;font-family:var(--font-body);font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:rgba(31,35,40,.45)}
.metric--gold .metric-value{color:var(--sm-gold);font-size:1.5rem}
.metric-group{display:flex;gap:24px}
.swipe-hint{margin-top:16px;text-align:center;font-family:var(--font-body);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:rgba(31,35,40,.5)}
@media(min-width:1024px){.swipe-hint{display:none}}

/* DNA GRID */
.dna-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.dna-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.dna-grid{grid-template-columns:repeat(3,1fr)}}
.dna-card{display:flex;flex-direction:column;justify-content:space-between;min-height:200px;border-radius:32px;border:2px solid rgba(31,35,40,.1);background:#fff;padding:28px;overflow:hidden;position:relative;transition:var(--transition)}
.dna-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.dna-card--main{grid-column:1/-1;min-height:340px;background:var(--sm-orange);border:none;padding:32px}
@media(min-width:640px){.dna-card--main{grid-column:span 2}}
@media(min-width:1024px){.dna-card--main{grid-column:span 1;grid-row:span 2;min-height:420px}}
.dna-card--dark{background:var(--sm-charcoal);border:none;color:#fff}
.dna-card--dark .dna-pillar-label{color:rgba(230,238,242,.5)}
.dna-card--dark .dna-pillar-num{color:var(--sm-orange)}
.dna-card--dark h3{color:#fff}
.dna-card--dark p{color:rgba(230,238,242,.6)}
.dna-card-top{display:flex;justify-content:space-between;align-items:flex-start}
.dna-pillar-label{font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.24em;color:rgba(31,35,40,.6)}
.dna-pillar-num{font-family:var(--font-display);font-size:2.5rem;line-height:1;color:var(--sm-orange)}
.dna-card--main .dna-pillar-num{font-size:4rem}
.dna-card--main h3{font-size:clamp(3rem,6vw,4.5rem)}
.dna-card-bottom h3{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;letter-spacing:.02em}
.dna-card-bottom p{margin-top:12px;font-size:.875rem;color:rgba(31,35,40,.55)}
.dna-watermark{position:absolute;right:-32px;bottom:-40px;font-family:var(--font-display);font-size:10rem;color:rgba(31,35,40,.06);pointer-events:none}

/* INDUSTRIES */
.industries-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.industries-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.industries-grid{grid-template-columns:repeat(3,1fr)}}
.industry-card{display:flex;align-items:center;justify-content:space-between;background:#fff;border:2px solid rgba(31,35,40,.1);border-radius:32px;padding:28px;transition:var(--transition)}
.industry-card:hover{transform:translateY(-8px);border-color:var(--sm-orange);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.industry-number{font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.2em;color:rgba(31,35,40,.3)}
.industry-name{margin-top:12px;font-family:var(--font-display);font-size:1.8rem;line-height:1;letter-spacing:.02em}
.industry-arrow{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:2px solid rgba(31,35,40,.15);color:rgba(31,35,40,.4);transition:var(--transition)}
.industry-card:hover .industry-arrow{border-color:var(--sm-orange);background:var(--sm-orange);color:var(--sm-charcoal)}
.cta-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}

/* PAGE HERO */
.page-hero{background:var(--sm-orange);padding:160px 0 80px;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;opacity:.5}
.page-hero h1{position:relative;z-index:1;color:var(--sm-charcoal)}
.page-hero .eyebrow,.page-hero .eyebrow-inline{position:relative;z-index:1}

/* ABOUT / SERVICES PAGES */
.about-grid{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:1024px){.about-grid{grid-template-columns:1fr 1fr;align-items:start}}
.approach-steps{display:flex;flex-direction:column;gap:20px}
.approach-step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:#fff;border:2px solid rgba(31,35,40,.1);border-radius:32px;padding:28px;transition:var(--transition)}
@media(min-width:1024px){.approach-step{grid-template-columns:auto 1fr auto;padding:32px}}
.approach-step:hover{transform:translateY(-4px);border-color:var(--sm-charcoal);box-shadow:0 20px 40px rgba(0,0,0,.1)}
.approach-step .step-number{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:2px solid rgba(31,35,40,.2);background:rgba(31,35,40,.05);font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--sm-charcoal);transition:var(--transition)}
.approach-step:hover .step-number{background:var(--sm-charcoal);color:var(--sm-orange);border-color:var(--sm-charcoal)}
.approach-step h3{font-size:clamp(1.3rem,2.5vw,1.8rem)}
.approach-step p{margin-top:8px;font-size:.875rem;color:rgba(31,35,40,.55)}
.approach-step .step-label{font-family:var(--font-body);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:rgba(31,35,40,.3);display:none}
@media(min-width:1024px){.approach-step .step-label{display:block;text-align:right}}

/* CONTACT PAGE */
.contact-grid{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr;gap:80px}}
.contact-item{margin-bottom:24px}
.contact-item h3{font-size:1.2rem;margin-bottom:8px}
.contact-item a{font-size:1rem;color:rgba(31,35,40,.7)}
.contact-item a:hover{color:var(--sm-orange)}
.contact-form-wrapper{background:#fff;border:2px solid rgba(31,35,40,.1);border-radius:28px;padding:40px;box-shadow:0 10px 40px rgba(0,0,0,.06)}
.contact-form-wrapper h3{font-size:2rem;margin-bottom:32px}
.form-row{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-family:var(--font-body);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--sm-charcoal);margin-bottom:8px}
.form-group .required{color:var(--sm-orange)}
.form-group input,.form-group textarea{width:100%;padding:14px 16px;border:2px solid rgba(31,35,40,.1);border-radius:12px;font-family:var(--font-body);font-size:.95rem;color:var(--sm-charcoal);transition:var(--transition);background:#fff}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--sm-orange)}
.form-message{margin-top:16px;font-size:.875rem}

/* PORTFOLIO PAGE */
.portfolio-filters{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.filter-btn{font-family:var(--font-body);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;padding:10px 20px;border-radius:60px;border:2px solid rgba(31,35,40,.1);background:transparent;color:var(--sm-charcoal);cursor:pointer;transition:var(--transition)}
.filter-btn:hover,.filter-btn.active{background:var(--sm-charcoal);color:#fff;border-color:var(--sm-charcoal)}
.portfolio-page-grid{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:640px){.portfolio-page-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.portfolio-page-grid{grid-template-columns:repeat(3,1fr)}}

/* FOOTER */
.site-footer{background:var(--sm-charcoal);color:var(--sm-light);padding:80px 0 0}
.footer-grid{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}
.footer-brand p{margin-top:16px;font-size:.875rem;color:rgba(230,238,242,.5);max-width:320px}
.footer-brand img,.footer-brand .custom-logo{height:44px}
.footer-col h4{font-family:var(--font-display);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px;color:#fff}
.footer-col ul{display:flex;flex-direction:column;gap:12px}
.footer-col ul li a{font-size:.875rem;color:rgba(230,238,242,.6);transition:var(--transition)}
.footer-col ul li a:hover{color:var(--sm-orange)}
.footer-contact-item{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-contact-item svg{flex-shrink:0;color:rgba(230,238,242,.4)}
.footer-contact-item a{font-size:.875rem;color:rgba(230,238,242,.6)}
.footer-contact-item a:hover{color:var(--sm-orange)}
.footer-social{display:flex;gap:12px;margin-top:20px}
.footer-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(230,238,242,.2);font-size:.75rem;font-weight:700;color:rgba(230,238,242,.6);transition:var(--transition)}
.footer-social a:hover{background:var(--sm-orange);border-color:var(--sm-orange);color:var(--sm-charcoal)}
.footer-tagline{border-top:1px solid rgba(230,238,242,.1);margin-top:48px;padding:24px 0;text-align:center;font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:.05em;color:#fff}
.footer-bottom{border-top:1px solid rgba(230,238,242,.1);padding:24px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.footer-bottom p{font-size:.75rem;color:rgba(230,238,242,.4)}
.footer-bottom .tagline{font-style:italic}

/* CTA SECTION */
.cta-section{background:var(--sm-orange);text-align:center;padding:100px 0;position:relative;overflow:hidden}
.cta-section h2{margin-bottom:24px}
.cta-section p{max-width:600px;margin:0 auto 40px;font-size:1.1rem}

/* RESPONSIVE */
@media(max-width:767px){
    .hero-container{padding-top:120px;padding-bottom:32px}
    .hero-grid{gap:32px}
    .hero-card{max-width:300px}
    .hero-card-accent{width:48px;height:48px;top:-8px;right:-8px}
    .hero-floating{bottom:-16px;right:-16px;padding:8px 16px}
    .hero-floating .number{font-size:1.2rem}
    .hero-floating .label{font-size:.5rem}
}

/* INNER PAGES HEADER - ORANGE BG */
.site-header--inner{background:var(--sm-orange)!important}
.site-header--inner .main-nav .nav-list li a{color:var(--sm-charcoal)}
.site-header--inner .main-nav .nav-list li a:hover,.site-header--inner .main-nav .nav-list li a.active{color:#fff}
.site-header--inner .btn--outline-dark{color:var(--sm-charcoal);border-color:var(--sm-charcoal)}
.site-header--inner .btn--outline-dark:hover{background:var(--sm-charcoal);color:#fff}
.site-header--inner .menu-toggle span{background:var(--sm-charcoal)}
.site-header--inner.scrolled{background:rgba(255,138,0,.95)!important;border-bottom-color:rgba(31,35,40,.1)}
/* CUSTOMIZER FONT CONTROLS */
.customize-partial-edit-shortcut{display:none!important}

/* === v2.2 FIXES === */
.site-logo{display:inline-block;line-height:0}
.site-logo img{height:44px!important;width:auto!important;max-width:none}
.custom-logo-link{display:inline-block;line-height:0}
.custom-logo-link img{height:44px!important;width:auto!important}
.site-header--inner{background:var(--sm-orange)!important}
.site-header--inner .main-nav .nav-list li a{color:var(--sm-charcoal)}
.site-header--inner .main-nav .nav-list li a:hover,.site-header--inner .main-nav .nav-list li a.active{color:#fff}
.site-header--inner .btn--outline-dark{color:var(--sm-charcoal);border-color:var(--sm-charcoal)}
.site-header--inner .btn--outline-dark:hover{background:var(--sm-charcoal);color:#fff}
.site-header--inner .menu-toggle span{background:var(--sm-charcoal)}
.site-header--inner.scrolled{background:rgba(255,138,0,.95)!important}
@media(min-width:1024px){.main-nav{display:block!important}.menu-toggle{display:none!important}}
.footer-brand .custom-logo-link img{height:44px!important;width:auto!important}
.footer-brand img{height:44px!important;width:auto!important}

/* ============================================
   v3.0 — Fully editable site (Customizer) extras
   ============================================ */
[hidden]{display:none!important}
.site-logo-text{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--sm-charcoal);font-size:1.25rem}

/* ---------- Page hero subtitle ---------- */
.page-hero-sub{position:relative;z-index:1;font-family:var(--font-body);font-size:1rem;line-height:1.7;color:rgba(31,35,40,.7)}

/* ---------- CTA light variant ---------- */
.section-cta--light{background:var(--sm-light)}
.section-cta--light:before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise2)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;opacity:.5}

/* ---------- About: Who We Are ---------- */
.about-who{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-light);padding:96px 0}
.about-who-grid{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:1024px){.about-who-grid{grid-template-columns:1fr 1fr;gap:80px}}
.about-who-grid h2{color:var(--sm-charcoal);font-size:clamp(2.4rem,5vw,4rem)}
.about-who-paras{display:flex;flex-direction:column;gap:20px}
.about-who-paras p{font-size:.95rem;color:rgba(31,35,40,.65)}

/* ---------- About: DNA pillars (orange) ---------- */
.about-dna{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-orange);padding:96px 0}
.about-dna .eyebrow-inline{color:rgba(31,35,40,.55)}
.about-dna .eyebrow-line{background:var(--sm-charcoal)}
.about-dna h2{color:var(--sm-charcoal)}
.pillars-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.pillars-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.pillars-grid{grid-template-columns:repeat(4,1fr)}}
.pillar-card{display:flex;flex-direction:column;justify-content:space-between;min-height:210px;border:2px solid rgba(31,35,40,.1);background:#fff;border-radius:32px;padding:28px;position:relative;overflow:hidden;transition:all .5s cubic-bezier(.22,1,.36,1)}
.pillar-card--white:hover{transform:translateY(-8px);border-color:var(--sm-charcoal);box-shadow:0 20px 40px rgba(0,0,0,.12)}
.pillar-card--main{grid-column:span 2;grid-row:span 2;background:var(--sm-charcoal);border:none;min-height:420px}
.pillar-card-top{display:flex;justify-content:space-between;align-items:flex-start}
.pillar-label{font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.24em;color:rgba(31,35,40,.5)}
.pillar-card--main .pillar-label{color:rgba(230,238,242,.5)}
.pillar-num{font-family:var(--font-display);font-size:3rem;line-height:1;color:var(--sm-orange)}
.pillar-card--main .pillar-num{font-size:5rem;color:var(--sm-orange)}
.pillar-card-bottom h3{font-family:var(--font-display);font-size:clamp(2.4rem,4vw,4rem);line-height:1;letter-spacing:.02em;color:var(--sm-charcoal)}
.pillar-card--main .pillar-card-bottom h3{color:#fff;font-size:clamp(3rem,6vw,7rem)}
.pillar-card-bottom p{margin-top:12px;font-size:.875rem;color:rgba(31,35,40,.55)}
.pillar-card--main .pillar-card-bottom p{color:rgba(230,238,242,.6);max-width:260px}
.pillar-watermark{position:absolute;right:-28px;bottom:-40px;font-family:var(--font-display);font-size:12rem;color:rgba(230,238,242,.05);pointer-events:none;line-height:1}

/* ---------- About: Promise ---------- */
.promise{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-charcoal);position:relative;overflow:hidden;padding:96px 0;text-align:center}
.promise-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:24rem;line-height:1;color:rgba(230,238,242,.03);pointer-events:none;user-select:none}
.promise-inner{position:relative;z-index:1}
.promise-eyebrow{font-family:var(--font-body);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.3em;color:var(--sm-orange);display:inline-flex;align-items:center;gap:16px}
.promise-eyebrow .eyebrow-line{width:32px;height:1px;background:var(--sm-orange)}
.promise-title{margin-top:32px;font-family:var(--font-display);font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.05;letter-spacing:.01em;color:#fff}
.promise-accent{color:var(--sm-orange)}
.promise-note{margin:32px auto 0;max-width:560px;color:rgba(230,238,242,.6);font-size:1rem}

/* ---------- Services Accordion ---------- */
.services-accordion-section{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-light);padding:96px 0}
.sm-accordion{display:flex;flex-direction:column;gap:20px}
.sm-accordion-item{overflow:hidden;border-radius:28px;border:2px solid rgba(31,35,40,.1);background:#fff;transition:all .5s cubic-bezier(.22,1,.36,1)}
.sm-accordion-item.is-open{border-color:var(--sm-orange);background:var(--sm-orange);box-shadow:0 20px 40px rgba(0,0,0,.14)}
.sm-accordion-head{width:100%;display:flex;align-items:center;gap:16px;padding:24px;text-align:left;background:none;border:none;cursor:pointer;font:inherit;color:var(--sm-charcoal)}
@media(min-width:640px){.sm-accordion-head{gap:40px;padding:32px}}
.sm-accordion-num{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--sm-orange);flex-shrink:0;letter-spacing:.05em}
.sm-accordion-item.is-open .sm-accordion-num{color:rgba(31,35,40,.6)}
@media(min-width:640px){.sm-accordion-num{font-size:1.875rem}}
.sm-accordion-title{flex:1;font-family:var(--font-display);font-size:1.5rem;line-height:1;letter-spacing:.02em;text-transform:uppercase}
@media(min-width:640px){.sm-accordion-title{font-size:2.25rem}}
.sm-accordion-icon{flex-shrink:0;display:flex;color:var(--sm-charcoal);transition:transform .3s ease}
.sm-accordion-item.is-open .sm-accordion-icon{transform:rotate(45deg)}
.sm-accordion-panel{overflow:hidden}
.sm-accordion-panel-inner{padding:0 24px 28px;border-top:2px solid rgba(31,35,40,.1)}
@media(min-width:640px){.sm-accordion-panel-inner{padding:0 32px 32px}}
.sm-accordion-item.is-open .sm-accordion-panel-inner{border-top-color:rgba(31,35,40,.12)}
.sm-accordion-panel-inner{padding-top:24px}
.sm-accordion-long{font-size:1rem;line-height:1.7;color:rgba(31,35,40,.8);max-width:800px}
.sm-accordion-desc{margin-top:16px;font-size:.875rem;color:rgba(31,35,40,.6);max-width:700px}

/* ---------- Portfolio page ---------- */
.portfolio-filter-bar{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:56px}
@media(min-width:1024px){.portfolio-filter-bar{flex-direction:row;justify-content:space-between}}
.portfolio-filter-label{font-family:var(--font-body);font-size:.675rem;font-weight:700;text-transform:uppercase;letter-spacing:.24em;color:rgba(31,35,40,.4)}
.portfolio-filter-bar .portfolio-filters{margin-bottom:0;justify-content:center;gap:10px}
@media(min-width:1024px){.portfolio-filter-bar .portfolio-filters{justify-content:flex-start}}
.portfolio-empty{text-align:center;padding:80px 0;font-family:var(--font-body);font-size:1.125rem;color:rgba(31,35,40,.55)}
.portfolio-count{margin-top:64px;text-align:center;font-family:var(--font-body);font-size:.675rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:rgba(31,35,40,.35)}

/* ---------- Contact page ---------- */
.contact-info h2{font-size:clamp(2rem,4vw,3rem);color:var(--sm-charcoal)}
.contact-info>p{font-size:.9rem;color:rgba(31,35,40,.6);max-width:440px}
.contact-rows{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.contact-card{display:flex;align-items:center;gap:20px;background:#fff;border:2px solid rgba(31,35,40,.1);border-radius:28px;padding:24px;transition:all .5s cubic-bezier(.22,1,.36,1)}
.contact-card:hover{transform:translateY(-4px);border-color:var(--sm-orange);box-shadow:0 20px 40px rgba(0,0,0,.1)}
.contact-card--plain{cursor:default}
.contact-card--plain:hover{transform:none;border-color:rgba(31,35,40,.1);box-shadow:none}
.contact-card-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:16px;background:rgba(255,138,0,.15);color:var(--sm-orange)}
.contact-card-body{min-width:0;flex:1}
.contact-card-label{display:block;font-family:var(--font-body);font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:rgba(31,35,40,.4)}
.contact-card-value{display:block;margin-top:4px;font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--sm-charcoal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-region-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.contact-region-chip{background:rgba(31,35,40,.05);border-radius:60px;padding:4px 12px;font-family:var(--font-body);font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(31,35,40,.7)}
.contact-orange-panel{position:relative;margin-top:32px;background:var(--sm-orange);border-radius:32px;padding:32px;overflow:hidden}
.contact-orange-panel h3{font-family:var(--font-body);font-size:.675rem;font-weight:700;text-transform:uppercase;letter-spacing:.26em;color:rgba(31,35,40,.7)}
.contact-orange-panel p{margin-top:12px;font-size:.9rem;color:rgba(31,35,40,.8);max-width:400px}
.form-group select{width:100%;padding:14px 16px;border:2px solid rgba(31,35,40,.1);border-radius:12px;font-family:var(--font-body);font-size:.95rem;color:var(--sm-charcoal);background:#fff;transition:var(--transition)}
.form-group select:focus{outline:none;border-color:var(--sm-orange)}

/* ---------- Case study ---------- */
.grain-overlay{position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise3)' opacity='0.04'/%3E%3C/svg%3E");opacity:.5}
.case-hero{position:relative;overflow:hidden;background:var(--sm-orange);padding:160px 0 96px}
.case-watermark{position:absolute;right:-24px;bottom:-48px;font-family:var(--font-display);font-size:16rem;line-height:1;color:rgba(31,35,40,.05);pointer-events:none;user-select:none}
.case-hero-content{position:relative;z-index:1}
.case-back-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:rgba(31,35,40,.6);transition:color .3s}
.case-back-link:hover{color:var(--sm-charcoal)}
.case-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.case-chip{border:2px solid rgba(31,35,40,.2);border-radius:60px;padding:6px 16px;font-family:var(--font-body);font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--sm-charcoal)}
.case-chip--muted{color:rgba(31,35,40,.7)}
.case-title{margin-top:24px;font-size:clamp(3rem,9vw,7rem);color:var(--sm-charcoal)}
.case-subtitle{margin-top:24px;max-width:640px;font-size:1.25rem;color:rgba(31,35,40,.75)}
.case-strategy{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-light);padding:96px 0}
.case-strategy-grid{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:1024px){.case-strategy-grid{grid-template-columns:.8fr 1.2fr;gap:80px}}
.case-strategy-text{font-size:1.125rem;line-height:1.8;color:rgba(31,35,40,.75)}
@media(min-width:640px){.case-strategy-text{font-size:1.25rem}}
.case-services-block{margin-top:40px}
.case-services-block h2{font-family:var(--font-body);font-size:.675rem;font-weight:700;text-transform:uppercase;letter-spacing:.24em;color:rgba(31,35,40,.45)}
.case-services-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.case-service-pill{border:2px solid rgba(31,35,40,.15);border-radius:60px;padding:8px 16px;font-family:var(--font-body);font-size:.75rem;font-weight:600;color:rgba(31,35,40,.7)}
.case-results{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-orange);padding:96px 0}
.case-results-head{margin-bottom:56px}
.case-results-head .eyebrow-inline{color:rgba(31,35,40,.55)}
.case-results-head .eyebrow-line{background:var(--sm-charcoal)}
.case-results-head h2{margin-top:20px;color:var(--sm-charcoal);font-size:clamp(2.4rem,5vw,4rem)}
.case-results-grid{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}
@media(min-width:1024px){.case-results-grid{grid-template-columns:repeat(4,1fr)}}
.case-metric{border:2px solid rgba(31,35,40,.1);background:#fff;border-radius:28px;padding:32px}
.case-metric--primary{border-color:var(--sm-charcoal);background:var(--sm-charcoal)}
.case-metric-value{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);line-height:1;letter-spacing:.02em;color:var(--sm-orange)}
.case-metric-label{margin-top:12px;font-family:var(--font-body);font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:rgba(31,35,40,.5)}
.case-metric--primary .case-metric-label{color:rgba(230,238,242,.6)}
.case-discuss{margin-top:48px;display:flex;justify-content:center}
.case-related{border-bottom:2px solid var(--sm-charcoal);background:var(--sm-light);padding:96px 0}
.case-related h2{color:var(--sm-charcoal);font-size:clamp(2.4rem,5vw,4rem)}
.btn--dark{background:var(--sm-charcoal);color:var(--sm-light);border-color:var(--sm-charcoal)}
.btn--dark:hover{background:#fff;border-color:var(--sm-charcoal);color:var(--sm-charcoal)}

/* ============================================
   v3.1 — Mobile optimization
   ============================================ */
/* Dynamic viewport heights (iOS URL bar shrinking) */
@supports (height:100svh){.hero{min-height:100svh}}
.mobile-nav{height:100vh;height:100dvh;padding-bottom:calc(32px + env(safe-area-inset-bottom,0))}

/* Mobile nav: internal scroll keeps CTA pinned; safe-area aware */
.mobile-nav-links{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-nav-cta{padding-bottom:env(safe-area-inset-bottom,0)}

/* Header: safe-area insets on notched devices */
.header-container{padding-top:calc(24px + env(safe-area-inset-top,0));padding-bottom:calc(24px + env(safe-area-inset-bottom,0))}

/* Kill tap highlight flash */
body,button,a{-webkit-tap-highlight-color:transparent}

@media(max-width:1023px){
    .site-header .header-right .btn{display:none}
    .menu-toggle{padding:10px}
    .form-group input,.form-group textarea,.form-group select{font-size:16px}
}

/* Tighter spacing on small screens */
@media(max-width:767px){
    .page-hero{padding:128px 0 64px}
    .case-hero{padding:128px 0 72px}
    .contact-form-wrapper{padding:24px}
    .case-metric{padding:24px}
    .hero-buttons{gap:16px}
}
@media(max-width:479px){
    .mobile-nav-link{font-size:1.75rem;padding:12px 0}
    .sm-accordion-title{font-size:1.25rem}
}

/* Respect reduced-motion (battery + accessibility) */
@media (prefers-reduced-motion: reduce){
    .marquee-track,.region-track,.hero-floating,.spin-circle svg{animation:none!important}
    html{scroll-behavior:auto}
}

/* ============================================
   v3.2 — Blog (page-blog + single article)
   ============================================ */
.blog-grid{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}

/* --- Blog card --- */
.blog-card{display:flex;flex-direction:column;background:#fff;border:2px solid rgba(31,35,40,.1);border-radius:28px;overflow:hidden;transition:all .5s cubic-bezier(.22,1,.36,1)}
.blog-card:hover{transform:translateY(-6px);border-color:var(--sm-charcoal);box-shadow:0 24px 48px rgba(0,0,0,.1)}
.blog-card:focus-visible{outline:3px solid var(--sm-orange);outline-offset:2px}
.blog-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sm-charcoal)}
.blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.blog-card:hover .blog-card-media img{transform:scale(1.06)}
.blog-card-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sm-charcoal) 0%,#2b3138 55%,var(--sm-teal) 100%)}
.bc-mark{font-family:var(--font-display);font-size:4.5rem;font-weight:800;color:var(--sm-orange);line-height:1}
.bc-watermark{position:absolute;right:-8px;bottom:-26px;font-family:var(--font-display);font-size:7rem;font-weight:800;line-height:1;color:rgba(230,238,242,.06);pointer-events:none}
.blog-card-arrow{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(31,35,40,.82);color:#fff;opacity:0;transform:translateY(8px);transition:var(--transition)}
.blog-card:hover .blog-card-arrow{opacity:1;transform:translateY(0)}
.blog-card-body{display:flex;flex-direction:column;gap:12px;padding:24px;flex:1}
.blog-card-tag{display:inline-block;align-self:flex-start;border:2px solid rgba(255,138,0,.45);background:rgba(255,138,0,.08);border-radius:60px;padding:4px 14px;font-family:var(--font-body);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:rgba(31,35,40,.75)}
.blog-card-tag--featured{background:var(--sm-orange);border-color:var(--sm-orange);color:var(--sm-charcoal)}
.blog-card-title{font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:700;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;color:var(--sm-charcoal)}
.blog-card-excerpt{margin-top:4px;font-size:.875rem;line-height:1.7;color:rgba(31,35,40,.6)}
.blog-card-meta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(31,35,40,.08);font-family:var(--font-body);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:rgba(31,35,40,.45)}
.blog-card-meta .meta-dot{color:var(--sm-orange)}

/* Mixed-label filter chips (EN · عربي) keep Arabic letter shaping */
.blog-filter-btn{letter-spacing:0}

/* --- Featured post --- */
.blog-featured{border:2px solid var(--sm-charcoal);border-radius:32px;overflow:hidden;background:var(--sm-charcoal);margin-bottom:64px;transition:var(--transition)}
.blog-featured:hover{box-shadow:0 24px 48px rgba(0,0,0,.18)}
.blog-featured-grid{display:grid;grid-template-columns:1fr}
@media(min-width:768px){.blog-featured-grid{grid-template-columns:1.15fr 1fr}}
.blog-featured-media{position:relative;min-height:280px;overflow:hidden;background:var(--sm-teal)}
.blog-featured-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.blog-featured:hover .blog-featured-media img{transform:scale(1.04)}
.blog-featured-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sm-orange) 0%,#ffa133 55%,var(--sm-gold) 100%)}
.bf-mark{font-family:var(--font-display);font-size:clamp(4rem,14vw,9rem);font-weight:800;color:var(--sm-charcoal);line-height:1}
.blog-featured-body{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:32px;color:#fff}
@media(min-width:768px){.blog-featured-body{padding:44px}}
.blog-featured-title{font-size:clamp(1.9rem,4.5vw,3.2rem);color:#fff;line-height:1.02}
.blog-featured-excerpt{margin-top:4px;font-size:1rem;line-height:1.7;color:rgba(230,238,242,.7);max-width:520px}
.blog-featured .blog-card-meta{color:rgba(230,238,242,.55);border-top-color:rgba(230,238,242,.14)}
.blog-featured .meta-dot{color:var(--sm-orange)}
.blog-read-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--sm-orange);transition:gap .3s}
.blog-featured:hover .blog-read-cta{gap:16px}

/* --- Pagination --- */
.blog-pagination{display:flex;justify-content:center;margin-top:64px}
.blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;margin:0 4px;border:2px solid rgba(31,35,40,.12);border-radius:12px;font-family:var(--font-body);font-size:.75rem;font-weight:700;color:var(--sm-charcoal);transition:var(--transition)}
.blog-pagination .page-numbers:hover,.blog-pagination .page-numbers.current{background:var(--sm-charcoal);border-color:var(--sm-charcoal);color:#fff}

/* --- Article --- */
.blog-article-section{padding:72px 0 96px;background:#fff}
@media(min-width:640px){.blog-article-section{padding:96px 0}}
.blog-article-cover{padding-top:56px;background:#fff}
.blog-article-cover img{width:100%;max-height:560px;object-fit:cover;border-radius:32px;border:2px solid rgba(31,35,40,.08)}
.blog-article-meta{display:flex;gap:16px;margin-top:20px;font-family:var(--font-body);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:rgba(31,35,40,.6)}
.blog-article{max-width:720px;margin:0 auto;font-size:1.0625rem;line-height:1.85;color:rgba(31,35,40,.8)}
.blog-article p{margin-bottom:24px;font-size:1.0625rem;line-height:1.85;color:rgba(31,35,40,.75)}
.blog-article h2{margin:56px 0 20px;font-size:clamp(1.7rem,3.6vw,2.6rem);color:var(--sm-charcoal)}
.blog-article h3{margin:40px 0 16px;font-size:clamp(1.3rem,2.6vw,1.8rem);color:var(--sm-charcoal)}
.blog-article blockquote{margin:40px 0;padding:28px 32px;border-left:4px solid var(--sm-orange);background:var(--sm-light);border-radius:0 20px 20px 0}
.blog-article blockquote p{margin:0;font-family:var(--font-display);font-size:1.35rem;font-weight:700;line-height:1.4;color:var(--sm-charcoal)}
.blog-article ul,.blog-article ol{margin:0 0 24px;padding-left:24px;display:flex;flex-direction:column;gap:10px}
.blog-article ul{list-style:disc}
.blog-article ol{list-style:decimal}
.blog-article li::marker{color:var(--sm-orange);font-weight:700}
.blog-article a{color:var(--sm-orange);text-decoration:underline;text-underline-offset:3px}
.blog-article a:hover{color:var(--sm-charcoal)}
.blog-article img{max-width:100%;height:auto;border-radius:20px;border:2px solid rgba(31,35,40,.08)}
.blog-article figure{margin:40px 0}
.blog-article figcaption{margin-top:12px;text-align:center;font-size:.8rem;color:rgba(31,35,40,.5)}
.blog-page-links{display:flex;gap:12px;margin-top:32px;font-family:var(--font-body);font-weight:700}

/* --- Tags + prev/next --- */
.blog-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:720px;margin:48px auto 0}
.blog-tags-label{font-family:var(--font-body);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:rgba(31,35,40,.4);margin-right:8px}
.blog-tags a{border:2px solid rgba(31,35,40,.14);border-radius:60px;padding:6px 16px;font-family:var(--font-body);font-size:.7rem;font-weight:600;color:rgba(31,35,40,.7);transition:var(--transition)}
.blog-tags a:hover{background:var(--sm-charcoal);border-color:var(--sm-charcoal);color:#fff}
.blog-post-nav{display:grid;gap:16px;grid-template-columns:1fr;max-width:720px;margin:64px auto 0}
@media(min-width:640px){.blog-post-nav{grid-template-columns:1fr 1fr}}
.blog-post-nav-item a{display:block;border:2px solid rgba(31,35,40,.1);border-radius:20px;padding:24px;transition:var(--transition)}
.blog-post-nav-item a:hover{border-color:var(--sm-orange);box-shadow:0 16px 32px rgba(0,0,0,.08)}
.blog-post-nav-item--next a{text-align:right}
.blog-post-nav-label{display:block;font-family:var(--font-body);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--sm-orange)}
.blog-post-nav-title{display:block;margin-top:8px;font-family:var(--font-display);font-size:1.05rem;font-weight:700;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;color:var(--sm-charcoal)}

/* --- RTL (Arabic posts) --- */
[dir="rtl"] .blog-card-title,[dir="rtl"] .blog-featured-title,[dir="rtl"] .blog-post-nav-title,[dir="rtl"] .blog-article h2,[dir="rtl"] .blog-article h3,[dir="rtl"] .case-title,[dir="rtl"] .case-chip,[dir="rtl"] .blog-article-meta,[dir="rtl"] .eyebrow,[dir="rtl"] .case-back-link{letter-spacing:0;text-transform:none}
[dir="rtl"] .blog-article{text-align:right}
[dir="rtl"] .blog-article blockquote{border-left:none;border-right:4px solid var(--sm-orange);border-radius:20px 0 0 20px}
[dir="rtl"] .blog-article ul,[dir="rtl"] .blog-article ol{padding-left:0;padding-right:24px}
[dir="rtl"] .blog-card-tag,[dir="rtl"] .blog-read-cta,[dir="rtl"] .blog-card-meta{letter-spacing:0}