/* ==========================================================================
   Shootup Media — design tokens & components
   Palette/type source: start.txt. Content source: SEO/content strategy brief.
   ========================================================================== */
:root{
  --white:#FFFFFF;
  --off-white:#F5F7FB;
  --navy:#0D1520;
  --orange:#FF642F;
  --charcoal-dark:#0D1520;
  --charcoal-body:#455A78;
  --grey:#6B7280;
  --border:#E7E9F0;
  --midnight:#0D1520;
  --radius:6px;
  --serif:"Times New Roman", Times, serif;
  --sans:"Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --orange-hover:#E0501C;
  --whatsapp-green:#1DCF60;
  --shadow-sm:0 1px 3px rgba(16,18,27,.06), 0 1px 2px rgba(16,18,27,.04);
  --shadow-md:0 8px 24px rgba(13,21,32,.08), 0 2px 6px rgba(16,18,27,.05);
  --shadow-lg:0 16px 40px rgba(13,21,32,.14), 0 4px 10px rgba(16,18,27,.06);
  --gradient-orange:linear-gradient(135deg, #FF642F 0%, #E0501C 100%);
  --gradient-navy:linear-gradient(135deg, #233F7B 0%, #3355A0 100%);
  --gradient-headline:linear-gradient(135deg, #FF784A 0%, #FFA77E 100%);
  --tint-navy:#EEF0FA;
  --tint-orange:#FFEDE6;
}
*{box-sizing:border-box;}
/* overflow-x:hidden here only, not on body too: setting only one overflow
   axis forces the other to 'auto' per spec, and applying that to BOTH html
   and body turns body into its own independent scroll container nested
   inside html's. The browser actually scrolls html (document.scrollingElement),
   so position:sticky children of body then stick relative to a box that
   never scrolls, breaking every sticky header on the site. One element
   with the fix is enough to stop horizontal overflow. */
html{scroll-behavior:smooth; overflow-x:hidden;}
body{margin:0; background:var(--off-white); color:var(--charcoal-body); font-family:var(--body); -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0; font-family:var(--sans);}
p{margin:0;}
a{color:inherit;}
img{max-width:100%; height:auto; display:block;}
ul{margin:0; padding:0;}
:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
.container{max-width:1180px; margin:0 auto; padding:0 28px;}
.section{padding:64px 0;}
.section-head{max-width:640px; margin:0 auto 34px; text-align:center;}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange);}
.section-title{font-size:clamp(26px,3.6vw,40px); font-weight:800; letter-spacing:-.02em; line-height:1.08; color:var(--charcoal-dark); margin-top:10px;}
.section-sub{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--grey); margin-top:12px; line-height:1.55;}
/* Readable body copy for multi-sentence explanatory paragraphs (not a short
   tagline) — non-italic, larger, higher-contrast, line-length constrained. */
.section-copy{font-family:var(--body); font-style:normal; font-size:16.5px; color:var(--charcoal-body); margin-top:14px; line-height:1.75; max-width:660px;}
.section-copy + .section-copy{margin-top:10px;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--navy); color:var(--white); padding:10px 16px; z-index:999;}
.skip-link:focus{left:12px; top:12px;}
.top-accent-bar{height:4px; background:var(--gradient-orange);}

/* arrow link */
.arrow-link{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; text-decoration:none; color:var(--charcoal-dark); border-bottom:2px solid var(--charcoal-dark); padding-bottom:2px; transition:gap .15s ease, color .15s ease, border-color .15s ease;}
.arrow-link:hover{gap:12px; color:var(--orange-hover); border-color:var(--orange-hover);}
.arrow-link.on-dark{color:var(--white); border-color:rgba(255,255,255,.5);}
.arrow-link.on-dark:hover{color:var(--orange-hover); border-color:var(--orange-hover);}

/* comparison table */
.comparison-table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:10px;}
.comparison-table{width:100%; border-collapse:collapse; font-size:14px;}
.comparison-table th, .comparison-table td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top;}
.comparison-table tr:last-child th, .comparison-table tr:last-child td{border-bottom:none;}
.comparison-table th{background:var(--off-white); font-weight:700; color:var(--navy); width:180px; white-space:nowrap;}
.comparison-table td{color:var(--charcoal-body);}

/* breadcrumbs */
.breadcrumbs{padding:14px 0; border-bottom:1px solid var(--border);}
.breadcrumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; color:var(--grey);}
.breadcrumbs li{display:flex; align-items:center; gap:6px;}
.breadcrumbs a{color:var(--grey); text-decoration:none; transition:color .15s ease;}
.breadcrumbs a:hover{color:var(--orange-hover);}
.breadcrumbs li[aria-current="page"]{color:var(--charcoal-body); font-weight:600;}
.breadcrumbs li.sep{color:var(--border);}

/* buttons */
.btn{font-family:var(--sans); font-weight:600; font-size:14px; border-radius:5px; padding:12px 22px; border:1.5px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;}
.btn.sm{padding:8px 16px; font-size:13px;}
.btn-primary{background:var(--orange); color:var(--white); box-shadow:0 6px 16px rgba(255,100,47,.32);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(255,100,47,.4); background:var(--orange-hover);}
.btn-outline-navy{border-color:var(--navy); color:var(--navy); background:transparent;}
.btn-outline-navy:hover{background:var(--navy); color:var(--white); transform:translateY(-1px);}
.btn-text{color:var(--orange); padding:8px 0; font-weight:600; transition:color .15s ease;}
.btn-text:hover{color:var(--orange-hover);}

/* ---- utility bar + nav ---- */
.util-bar{background:var(--midnight); color:#c7cbe8; font-size:12px; padding:8px 28px; display:flex; justify-content:space-between; gap:12px;}
.util-bar a{color:var(--orange); text-decoration:none; font-weight:600;}
.main-nav{position:sticky; top:0; z-index:30; background:var(--white); border-radius:0 0 22px 22px; box-shadow:0 10px 24px rgba(16,18,27,.12), 0 2px 8px rgba(16,18,27,.08);}
.nav-wrap{position:relative; display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:1180px; margin:0 auto; gap:16px;}
.wordmark{font-weight:700; font-size:17px; color:var(--navy); display:flex; align-items:center; gap:6px; text-decoration:none; flex:none;}
.wordmark .dot{width:7px; height:7px; border-radius:50%; background:var(--orange);}
.site-logo{flex:none;}
.site-logo img{display:block; height:46px; width:auto;}
.footer-brand{display:inline-flex; flex-direction:column; align-items:flex-start; gap:8px; text-decoration:none;}
.footer-logo{display:inline-block; flex:none;}
.footer-logo img{display:block; height:38px; width:auto; filter:brightness(0) invert(1);}
.footer-brand-name{font-family:var(--sans); font-size:12.5px; font-weight:400; color:var(--white);}
.footer-msme{margin-top:16px; display:inline-block; background:var(--white); border-radius:6px; padding:6px 10px;}
.footer-msme img{display:block; height:34px; width:auto;}
.footer-social{display:flex; align-items:center; gap:10px; margin-top:16px;}
.footer-social a{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); color:#c7cbe8; transition:background .15s ease, color .15s ease, transform .15s ease;}
.footer-social a:hover{background:var(--orange); color:var(--white); transform:translateY(-2px);}
.footer-social svg{width:17px; height:17px;}
.footer-social img{width:17px; height:17px; object-fit:contain;}
.navlinks{display:flex; align-self:stretch; gap:22px; font-size:14px; font-weight:700; list-style:none;}
.navlinks li.navlinks-mobile-actions{display:none;}
.submenu-toggle{display:none;}
.navlinks li{position:relative; display:flex; align-items:center;}
.navlinks a{text-decoration:none; color:var(--navy);}
.navlinks a:hover{color:var(--orange);}
.navlinks .sub-menu{display:none; position:absolute; top:100%; left:0; margin-top:6px; background:var(--white); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-md); min-width:220px; padding:8px; list-style:none; z-index:40;}
@media(min-width:761px){
  .navlinks li:hover > .sub-menu, .navlinks li:focus-within > .sub-menu{display:block;}
}
.navlinks .sub-menu a{display:block; padding:8px 10px; border-radius:6px; white-space:nowrap; font-weight:500;}
.navlinks .sub-menu a:hover{background:var(--off-white); color:var(--navy);}
/* ---- mega menu (Services / Locations), theenough.agency-style ----
 * Positioned relative to .nav-wrap (not the trigger <li>) and centered,
 * so it always appears centered under the whole nav bar regardless of
 * which item triggered it or how wide the viewport is — this also keeps
 * it from ever clipping off one edge of the screen. .navlinks li is
 * stretched to the full height of .nav-wrap (align-self:stretch above)
 * so the trigger's hoverable area touches the menu with zero gap. */
.navlinks li.has-mega{position:static; padding-bottom:14px; margin-bottom:-14px;}
.mega-caret{margin-left:5px; display:inline-block; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--grey); vertical-align:middle; transition:transform .15s ease, border-top-color .15s ease;}
.navlinks li.has-mega:hover .mega-caret, .navlinks li.has-mega:focus-within .mega-caret{transform:rotate(180deg); border-top-color:var(--orange);}
.mega-menu{display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:0; z-index:50; background:var(--white); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg); overflow:hidden;}
.navlinks li.has-mega:hover > .mega-menu, .navlinks li.has-mega:focus-within > .mega-menu{display:block;}
.mega-cols{display:flex; align-items:stretch;}
.mega-col-group{padding:22px 18px; width:190px;}
.mega-col-group + .mega-col-group{border-left:1px solid var(--border);}
.mega-cat-label{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); margin:0 0 10px;}
.mega-item{display:flex; align-items:flex-start; gap:8px; text-decoration:none; padding:6px 5px; border-radius:6px; margin:0 -5px;}
.mega-item:hover{background:var(--off-white);}
.mega-num{flex:none; width:20px; height:20px; border-radius:5px; background:var(--tint-orange); color:var(--orange); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px;}
.mega-item-body strong{display:block; font-size:13px; font-weight:700; color:var(--charcoal-dark); line-height:1.3;}
.mega-item-body span{display:block; font-size:11px; color:var(--grey); line-height:1.35; margin-top:2px;}
.mega-loc-item{display:flex; align-items:center; gap:8px; padding:6px 6px; margin:0 -6px; font-size:13px; font-weight:600; color:var(--charcoal-body); text-decoration:none; border-radius:5px;}
.mega-loc-item:hover{background:var(--off-white); color:var(--navy);}
.mega-loc-num{font-size:10.5px; font-weight:700; color:var(--orange); flex:none;}
.mega-panel{background:var(--navy); color:var(--white); padding:24px 22px; width:200px; display:flex; flex-direction:column; gap:12px;}
.mega-panel-eyebrow{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#ffc4b5;}
.mega-panel-title{font-size:15px; line-height:1.35; margin:0; font-weight:700; color:var(--white);}
.mega-panel-btns{display:flex; flex-direction:column; gap:8px; margin-top:2px;}
.mega-panel-btns a{display:block; text-align:center; background:var(--white); color:var(--navy); font-size:12.5px; font-weight:700; padding:9px 12px; border-radius:6px; text-decoration:none;}
.mega-panel-btns a.ghost{background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.35);}
.mega-panel-contact{font-size:11.5px; color:rgba(255,255,255,.7); margin:0;}
@media(min-width:901px){
  .navlinks li.has-mega > .sub-menu{display:none !important;}
}
@media(max-width:900px){
  .mega-menu{display:none !important;}
  .mega-caret{display:none;}
}

/* ---- "Talk to Expert" modal ---- */
.talk-modal-overlay{display:flex; position:fixed; inset:0; background:linear-gradient(135deg, rgba(238,240,250,.75) 0%, rgba(253,237,233,.75) 50%, rgba(255,255,255,.75) 100%); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:100; justify-content:flex-end; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;}
.talk-modal-overlay.is-open{opacity:1; visibility:visible; transition:opacity .25s ease, visibility 0s linear;}
.talk-modal{position:relative; background:var(--white); border-radius:16px 0 0 16px; padding:34px 32px; max-width:420px; width:100%; height:100%; max-height:100vh; overflow-y:auto; box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .3s ease;}
.talk-modal-overlay.is-open .talk-modal{transform:translateX(0);}
.talk-modal-close{position:absolute; top:18px; right:18px; width:32px; height:32px; border:none; background:none; font-size:22px; line-height:1; color:var(--grey); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .15s ease;}
.talk-modal-close:hover{background:var(--off-white); color:var(--charcoal-dark);}
.talk-modal-title{font-size:24px; font-weight:800; color:var(--charcoal-dark); margin:0;}
.talk-modal-sub{font-size:14px; color:var(--grey); margin-top:8px; margin-bottom:24px;}
.talk-option{display:flex; align-items:center; gap:16px; padding:18px; border:1px solid var(--border); border-radius:10px; text-decoration:none; margin-bottom:14px; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; background:var(--white); width:100%; text-align:left; font-family:var(--sans); cursor:pointer;}
.talk-option:last-child{margin-bottom:0;}
.talk-option:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.talk-option.featured{border-color:var(--orange); box-shadow:0 0 0 1px var(--orange);}
.talk-option-icon{flex:none; width:44px; height:44px; border-radius:10px; background:var(--tint-orange); display:flex; align-items:center; justify-content:center;}
.talk-option-icon svg{width:22px; height:22px; color:var(--orange);}
.talk-option-icon.whatsapp{background:rgba(29,207,96,.12);}
.talk-option-icon.whatsapp svg{color:var(--whatsapp-green);}
.talk-option-icon.call{background:var(--tint-orange);}
.talk-option-icon.call svg{color:var(--orange);}
.talk-option-icon.email{background:var(--tint-navy);}
.talk-option-icon.email svg{color:var(--navy);}
.talk-option-body{flex:1; min-width:0;}
.talk-tag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange); background:var(--tint-orange); padding:3px 9px; border-radius:20px; margin-bottom:6px;}
.talk-option-title{font-size:15px; font-weight:700; color:var(--charcoal-dark); margin:0 0 3px;}
.talk-option-body p{font-size:12.5px; color:var(--grey); margin:0; line-height:1.4;}
.talk-chev{flex:none; font-size:24px; color:var(--grey);}
.talk-back{background:none; border:none; padding:0; margin-bottom:18px; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--grey); cursor:pointer; display:inline-flex; align-items:center; gap:4px;}
.talk-back:hover{color:var(--orange);}
.pref-contact-group{display:flex; gap:18px; margin-top:8px;}
.pref-contact-group label{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--charcoal-body); text-transform:none; letter-spacing:normal;}
.pref-contact-group input{width:auto; padding:0;}
@media(max-width:480px){
  .talk-modal{padding:26px 20px; max-width:100%; border-radius:0;}
  .talk-option{padding:14px; gap:12px;}
}

.client-login-link{background:none; border:none; padding:8px 4px; font-family:var(--sans); font-size:14px; font-weight:700; color:var(--charcoal-dark); cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
.client-login-link:hover{color:var(--orange);}

/* ---- client login modal (centered) ---- */
.login-modal-overlay{display:flex; position:fixed; inset:0; background:linear-gradient(135deg, rgba(238,240,250,.75) 0%, rgba(253,237,233,.75) 50%, rgba(255,255,255,.75) 100%); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:110; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;}
.login-modal-overlay.is-open{opacity:1; visibility:visible; transition:opacity .25s ease, visibility 0s linear;}
.login-modal{position:relative; background:var(--white); border-radius:16px; padding:36px 34px; max-width:420px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); text-align:center;}
.login-modal-brand{margin-bottom:14px; display:flex; justify-content:center;}
.login-modal-brand img{height:40px; width:auto;}
.login-modal-brand .wordmark{justify-content:center;}
.login-modal-title{font-size:20px; font-weight:800; color:var(--charcoal-dark); margin-bottom:22px;}
.login-view .grid-form{text-align:left;}
.login-switch{display:block; width:100%; background:none; border:none; padding:0; margin-top:18px; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--grey); cursor:pointer; text-decoration:underline; text-align:center;}
.login-switch:hover{color:var(--orange);}

.nav-actions{display:flex; align-items:center; gap:14px;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{content:""; display:block; width:22px; height:2px; background:var(--charcoal-dark); margin:5px 0;}

/* ---- hero ---- */
/* Min-height per breakpoint so the hero fills a comfortable share of the
 * viewport instead of feeling thin: desktop 550-650px, tablet 450-550px,
 * mobile fits its content but floors around 420px. Flex-centers content
 * so the extra room reads as breathing space, not a stray gap below it. */
.hero{position:relative; overflow:hidden; padding:56px 0 0; background:linear-gradient(180deg, #EEF0FA 0%, var(--white) 55%); display:flex; align-items:center;}
.hero::before, .hero::after{content:""; position:absolute; border-radius:50%; filter:blur(60px); z-index:0; pointer-events:none;}
.hero::before{width:420px; height:420px; top:-160px; right:-100px; background:radial-gradient(circle, rgba(255,100,47,.16) 0%, rgba(255,100,47,0) 70%);}
.hero::after{width:380px; height:380px; bottom:-180px; left:-120px; background:radial-gradient(circle, rgba(41,47,104,.14) 0%, rgba(41,47,104,0) 70%);}
.hero-inner{position:relative; z-index:1; width:100%; display:grid; grid-template-columns:1.15fr 1fr; gap:44px; align-items:center; padding:0 28px 64px; max-width:1180px; margin:0 auto;}
.hero-copy{max-width:600px;}
.hero-inner h1{font-size:clamp(28px,3.6vw,42px); font-weight:800; letter-spacing:-.02em; color:var(--navy); line-height:1.25; text-wrap:balance;}
.hero-inner .sub{font-family:var(--body); font-weight:400; font-size:16px; color:var(--charcoal-dark); margin-top:16px; line-height:1.65; max-width:480px;}
.hero-inner .btnrow{display:flex; align-items:center; gap:20px; margin-top:26px; flex-wrap:wrap;}

/* ---- hero quick-enquiry card ---- */
.hero-form-wrap{position:relative;}
.hero-enquiry-shadow{position:absolute; top:16px; left:16px; right:-16px; bottom:-16px; background:var(--navy); border-radius:18px; box-shadow:0 16px 32px rgba(13,21,32,.22);}
.hero-enquiry{position:relative; background:var(--white); border-radius:18px; padding:26px; box-shadow:0 20px 44px rgba(13,21,32,.16);}
.hero-enquiry h3{font-size:17px; font-weight:700; color:var(--charcoal-dark);}
.hero-enquiry .sub-note{font-size:12.5px; color:var(--grey); margin-top:4px; margin-bottom:18px;}
.hero-enquiry form{display:flex; flex-direction:column; gap:12px;}
.hero-enquiry .btn{margin-top:4px; align-self:center;}
.hero-trust{font-size:12.5px; color:var(--grey); margin-top:20px;}
.capabilities-panel{background:rgba(255,255,255,.75); backdrop-filter:blur(6px); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-lg);}
.hero-visual-svg{width:100%; height:auto; display:block; margin-bottom:10px;}
.hero-visual-pulse{transform-origin:388px 20px; animation:hero-pulse 2.6s ease-in-out infinite;}
@keyframes hero-pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}}
@media (prefers-reduced-motion: reduce){.hero-visual-pulse{animation:none;}}
.capabilities-panel .ch{font-size:12px; font-weight:600; color:var(--charcoal-dark); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; padding-top:14px; border-top:1px solid var(--border);}
.capabilities-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.cap-tag{display:flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--border); border-radius:6px; padding:10px 12px; font-size:12.5px; font-weight:600; color:var(--charcoal-body); box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease;}
.cap-tag:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.cap-tag svg{width:16px; height:16px; color:var(--white); flex:none; padding:4px; box-sizing:content-box; background:var(--gradient-orange); border-radius:6px;}

/* ---- press / "featured on" strip: auto-scrolling marquee, right to left ---- */
.press-strip{padding:36px 0 44px;}
.press-strip .press-label{text-align:center; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:22px;}
.press-award{text-align:center; font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--navy); margin-top:26px;}

/* ---- clients strip: faded logos framing a center feedback box ---- */
.clients-strip{position:relative; padding:20px 0;}
.clients-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:center; max-width:900px; margin:0 auto;}
.clients-grid .client-logo{display:flex; align-items:center; justify-content:center; filter:grayscale(1); opacity:.45; transition:opacity .2s ease, filter .2s ease; animation:client-sway 5s ease-in-out infinite;}
.clients-grid .client-logo:hover{filter:grayscale(0); opacity:.9;}
.clients-grid .client-logo img{max-height:44px; width:auto; max-width:120px; object-fit:contain;}
.clients-grid .client-logo:nth-child(2n){animation-delay:-1.6s;}
.clients-grid .client-logo:nth-child(3n){animation-delay:-3.2s;}
@keyframes client-sway{0%,100%{transform:translateX(0);} 50%{transform:translateX(6px);}}
@media (prefers-reduced-motion: reduce){.clients-grid .client-logo{animation:none;}}

.feedback-box-wrap{position:relative; max-width:560px; margin:44px auto 8px;}
.feedback-box-shadow{position:absolute; top:14px; left:14px; right:-14px; bottom:-14px; background:var(--navy); border-radius:16px;}
.feedback-box{position:relative; background:var(--white); border-radius:16px; padding:36px 32px; text-align:center; box-shadow:0 18px 40px rgba(13,21,32,.14); overflow:hidden;}
.feedback-box .eyebrow{display:block;}
.feedback-track{position:relative; margin-top:18px; min-height:120px; transition:height .4s ease;}
.feedback-slide{position:absolute; inset:0; opacity:0; transform:translateX(28px); transition:opacity .5s ease, transform .5s ease; pointer-events:none;}
.feedback-slide.is-active{opacity:1; transform:translateX(0); pointer-events:auto;}
.feedback-quote{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--charcoal-body); line-height:1.6; max-width:400px; margin:0 auto;}
.feedback-author{margin-top:16px; font-size:13px;}
.feedback-author strong{display:block; font-family:var(--sans); font-weight:700; color:var(--navy);}
.feedback-author span{color:var(--grey); font-size:12px;}
@media(max-width:480px){
  .feedback-quote{font-size:14px;}
}
@media(max-width:760px){
  .clients-grid{grid-template-columns:repeat(2,1fr);}
}
.press-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);}
.press-track{display:flex; align-items:center; gap:18px; width:max-content; animation:press-scroll 36s linear infinite;}
.press-track:hover{animation-play-state:paused;}
.outlet-logo{display:inline-flex; align-items:center; justify-content:center; height:64px; min-width:150px; padding:12px 24px; margin-bottom:28px; background:var(--white); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-sm);}
.outlet-logo img{max-height:36px; max-width:130px; width:auto; object-fit:contain;}
.press-logo{display:flex; align-items:center; justify-content:center; height:84px; min-width:180px; flex:none; background:var(--white); border:1px solid var(--border); border-radius:12px; padding:14px 22px; box-shadow:var(--shadow-sm);}
.press-logo img{max-height:52px; max-width:150px; width:auto; object-fit:contain;}
.press-logo .press-logo-text{font-family:var(--sans); font-weight:700; font-size:14px; color:var(--charcoal-dark); text-align:center; line-height:1.3;}
@keyframes press-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.press-track{animation:none;}}

/* PR partner block */
.pr-partner-card{display:flex; align-items:center; gap:32px; background:var(--midnight); border-radius:16px; padding:36px 40px; flex-wrap:wrap;}
.pr-partner-logo{flex:none; background:#000; border-radius:10px; padding:16px 20px; display:flex; align-items:center; justify-content:center;}
.pr-partner-logo img{max-height:48px; max-width:180px; width:auto; display:block;}
.pr-partner-body{flex:1; min-width:240px;}
.pr-partner-body span.eyebrow{color:var(--orange);}
.pr-partner-body h3{color:var(--white); font-family:var(--sans); font-size:clamp(19px,2.2vw,23px); margin:8px 0 10px;}
.pr-partner-body p{color:#c7cbe8; font-size:14.5px; line-height:1.6;}
.pr-network-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:28px;}
@media(max-width:760px){
  .pr-partner-card{flex-direction:column; text-align:center; padding:28px 24px;}
  .pr-network-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
}

/* ---- stats ---- */
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.stats-row .s{text-align:center; padding:18px 14px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease;}
.stats-row .s:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.stats-row .num{font-size:30px; font-weight:800; background:var(--gradient-headline); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums;}
.stats-row .lbl{font-size:12px; color:var(--grey); margin-top:4px;}

/* ---- services: bento mosaic ---- */
.bento-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.bento-grid-3{grid-template-columns:repeat(3,1fr);}
.bento-grid-4{grid-template-columns:repeat(4,1fr);}
/* Grid items default to min-width:auto, which locks a track to its content's
   min-content size — a single long word or a non-wrapping link can then force
   a column wider than its fair share and blow out the whole grid on narrow
   screens. min-width:0 lets tracks shrink and text wrap normally instead. */
.bento-grid>*, .hairline-grid>*, .facts-strip>*, .industry-grid>*, .pricing-grid>*, .addon-grid>*, .blog-grid>*, .insights-grid>*{min-width:0;}
.bento-tile{border-radius:20px; padding:28px; min-height:196px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .2s ease, box-shadow .2s ease;}
.bento-tile:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.bento-tile h4, .bento-tile h3{font-size:20px; font-weight:800; letter-spacing:-.01em; line-height:1.2; margin:0;}
.bento-tile p{font-size:13.5px; margin-top:10px; line-height:1.55;}
.bento-tile .lnk{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13px; font-weight:700; text-decoration:none;}
.tile-navy{background:var(--gradient-navy); color:var(--white);}
.tile-orange{background:var(--gradient-orange); color:var(--white);}
.tile-midnight{background:var(--midnight); color:var(--white);}
.tile-tint-navy{background:var(--tint-navy); color:var(--charcoal-dark); border:1px solid var(--border);}
.tile-tint-orange{background:var(--tint-orange); color:var(--charcoal-dark); border:1px solid var(--border);}
.tile-base{background:var(--white); color:var(--charcoal-dark); border:1px solid var(--border);}
.tile-navy p, .tile-orange p, .tile-midnight p{color:rgba(255,255,255,.8);}
.tile-tint-navy p, .tile-tint-orange p, .tile-base p{color:var(--grey);}
.tile-navy .lnk, .tile-orange .lnk, .tile-midnight .lnk{color:var(--white);}
.tile-tint-navy .lnk, .tile-tint-orange .lnk, .tile-base .lnk{color:var(--orange);}
.span-2{grid-column:span 2;}
.span-3{grid-column:span 3;}
/* The grid is 2 columns from here down to the smallest phones — a span-2 or
   span-3 tile at that width still takes the whole row, leaving the previous
   tile stranded with an empty gap beside it (or, for span-3, rendering as an
   odd short wide banner instead of a normal card). Collapse both to span-1
   so every tile pairs up with a neighbor instead. */
@media(max-width:900px){.bento-tile.span-2, .bento-tile.span-3{grid-column:span 1;}}

/* ---- hairline grid: used for "Why us" and "Process" ---- */
.hairline-grid{display:grid; gap:1px; background:var(--border);}
.hairline-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.hairline-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.hairline-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.hairline-grid.cols-5{grid-template-columns:repeat(5,1fr);}
.hairline-cell{background:var(--white); padding:30px 26px;}
.hairline-cell .mark{width:22px; height:3px; background:var(--orange); border-radius:2px; margin-bottom:16px;}
.hairline-cell .n{display:block; font-size:14px; font-weight:800; color:var(--orange); margin-bottom:16px; font-variant-numeric:tabular-nums;}
.hairline-cell h4, .hairline-cell h3{font-size:17px; font-weight:700; color:var(--charcoal-dark); margin:0;}
.hairline-cell p{font-size:13.5px; color:var(--grey); margin-top:8px; line-height:1.55; max-width:300px;}

/* ---- numbered row list ("Why Shootup Media") ---- */
.list-section-head{margin-bottom:30px;}
.list-eyebrow-row{display:flex; align-items:center; gap:16px; margin-bottom:14px;}
.list-eyebrow-row .eyebrow{white-space:nowrap;}
.list-eyebrow-row .rule{flex:1; height:1px; background:var(--border);}
.list-heading{font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-.01em; color:var(--charcoal-dark); margin:0; padding-bottom:26px; border-bottom:1px solid var(--border);}
.numbered-list{border-top:1px solid var(--border);}
.numbered-row{display:grid; grid-template-columns:280px 1fr; gap:32px; padding:24px 0; border-bottom:1px solid var(--border); align-items:baseline;}
.numbered-row .num{color:var(--orange); font-weight:800; font-size:14px; margin-right:10px; font-variant-numeric:tabular-nums;}
.numbered-row .row-title{font-size:16px; font-weight:700; color:var(--charcoal-dark);}
.numbered-row p{font-size:14px; color:var(--grey); line-height:1.65; margin:0;}
@media(max-width:760px){
  .numbered-row{grid-template-columns:1fr; gap:8px;}
}
/* 2-column variant — homepage's 6-row "Why Shootup Media" list only;
   location pages' 3-row lists keep the single-column default above. */
.numbered-list.cols-2{display:grid; grid-template-columns:1fr 1fr; column-gap:56px; border-top:1px solid var(--border);}
.numbered-list.cols-2 .numbered-row{grid-template-columns:none; display:flex; flex-direction:column; gap:8px;}
@media(max-width:900px){
  .numbered-list.cols-2{grid-template-columns:1fr;}
}

/* ---- team grid (About page) ---- */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.team-card{background:var(--off-white); border:1px solid var(--border); border-radius:10px; padding:24px 22px; transition:transform .15s ease, box-shadow .15s ease;}
.team-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); background:var(--white);}
.team-card h4{font-size:16px; font-weight:700; color:var(--charcoal-dark); margin:0 0 8px;}
.team-card span{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange);}
.team-card-full{display:flex; flex-direction:column; gap:4px;}
.team-card-photo{width:56px; height:56px; border-radius:50%; overflow:hidden; margin-bottom:12px; background:var(--tint-navy); display:flex; align-items:center; justify-content:center;}
.team-card-photo img{width:100%; height:100%; object-fit:cover;}
.team-initial{font-family:var(--sans); font-weight:700; font-size:20px; color:var(--navy);}
.team-card-full p{font-size:13.5px; color:var(--grey); line-height:1.55; margin-top:8px;}
.team-card-full .arrow-link{margin-top:12px; font-size:13px;}
@media(max-width:760px){
  .team-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .team-grid{grid-template-columns:1fr;}
}

/* ---- quick facts strip (About page) ---- */
.facts-strip{border-top:2px solid var(--charcoal-dark); padding-top:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.facts-strip .f-label{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--grey);}
.facts-strip .f-val{font-size:17px; font-weight:800; color:var(--charcoal-dark); margin-top:8px; line-height:1.3;}

/* ---- PR page: numbered, top-to-bottom list of every outlet page ---- */
.outlet-list{max-width:820px; margin:0 auto; border-top:1px solid var(--border);}
.outlet-list-row{display:flex; align-items:center; gap:20px; padding:18px 4px; border-bottom:1px solid var(--border); text-decoration:none; transition:background .15s ease, padding-left .15s ease;}
.outlet-list-row:hover{background:var(--off-white); padding-left:12px;}
.outlet-list-num{font-family:var(--sans); font-weight:800; font-size:13px; color:var(--orange); flex:none; width:26px; font-variant-numeric:tabular-nums;}
.outlet-list-name{font-family:var(--sans); font-weight:700; font-size:17px; color:var(--charcoal-dark); flex:1;}
.outlet-list-type{font-size:12.5px; font-weight:600; color:var(--grey); flex:none;}
.outlet-list-arrow{flex:none; color:var(--orange); font-weight:700; font-size:16px; transition:transform .15s ease;}
.outlet-list-row:hover .outlet-list-arrow{transform:translateX(4px);}
@media (max-width:600px){
  .outlet-list-row{flex-wrap:wrap; gap:6px 14px;}
  .outlet-list-type{order:3; width:100%; padding-left:46px;}
}

/* ---- media outlet pages: proof card (real claim, or honest placeholder) ---- */
.proof-card{max-width:720px; margin:0 auto; text-align:center; border:1px solid var(--border); border-radius:16px; padding:32px 36px; background:var(--off-white);}
.proof-card .eyebrow{display:block; margin-bottom:12px;}
.proof-card p{font-size:15px; color:var(--charcoal-body); line-height:1.65; margin:0;}
.proof-card.is-placeholder{border-style:dashed; background:var(--white);}
.proof-card.is-placeholder p{color:var(--grey); font-style:italic;}

/* ---- about page: alternating "what is / what does" statement blocks ---- */
.statement-block{max-width:900px;}
.statement-block .eyebrow{display:block; margin-bottom:14px;}
.statement-block h2{font-family:var(--serif); font-size:clamp(24px,3.2vw,34px); color:var(--navy); margin:0 0 14px; line-height:1.25;}
.statement-block p{font-size:16.5px; color:var(--charcoal-body); line-height:1.75; max-width:720px;}
.statement-block + .statement-block{margin-top:40px; padding-top:40px; border-top:1px solid var(--border);}

/* ---- about page: founder spotlight ---- */
.founder-section{background:var(--midnight); color:var(--white); padding:64px 0;}
.founder-grid{display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start;}
.founder-photo{border-radius:14px; overflow:hidden; box-shadow:var(--shadow-lg); flex:none;}
.founder-photo img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 18%;}
.founder-eyebrow{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#ffc4b5; display:block; margin-bottom:14px;}
.founder-bio h2{font-family:var(--serif); font-size:clamp(26px,3.4vw,38px); margin:0 0 4px; color:var(--white); line-height:1.15;}
.founder-role{display:block; color:rgba(255,255,255,.6); font-weight:600; font-size:13.5px; margin-bottom:18px;}
.founder-bio p{color:rgba(255,255,255,.82); font-size:14.5px; line-height:1.75; margin:0 0 14px; max-width:640px;}
.founder-chips{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px;}
.founder-chip{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--white); font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:20px;}
.founder-cta{display:flex; gap:12px; flex-wrap:wrap;}
@media(max-width:760px){
  .founder-grid{grid-template-columns:1fr;}
  .founder-photo{max-width:220px; margin:0 auto;}
}

/* ---- insights (latest posts, via [shootup_latest_insights] shortcode) ---- */
.insights-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.insight-card{border:1px solid var(--border); border-radius:var(--radius); padding:20px; background:var(--white); box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;}
.insight-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.insight-card .meta{font-size:11.5px; color:var(--grey); text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:8px;}
.insight-card h3{font-size:15.5px; font-weight:700; color:var(--charcoal-dark); margin:0 0 8px;}
.insight-card h3 a{text-decoration:none; color:inherit;}
.insight-card p{font-size:13px; color:var(--grey); line-height:1.55;}
.insights-empty{border:1px dashed var(--border); border-radius:var(--radius); padding:26px; text-align:center; color:var(--grey); font-size:13.5px;}

/* ---- faq ---- */
.faq-accordion{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:first-child{border-top:1px solid var(--border);}
.faq-item summary{list-style:none; cursor:pointer; padding:18px 4px; font-size:15px; font-weight:600; color:var(--charcoal-dark); display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{font-size:20px; color:var(--orange); flex:none; font-weight:400; transition:transform .15s ease;}
.faq-item[open] summary .plus{transform:rotate(45deg);}
.faq-item[open] summary{color:var(--navy);}
.faq-item p{font-size:13.5px; color:var(--grey); line-height:1.6; padding:0 4px 18px; max-width:620px;}
.faq-accordion.faq-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 48px; max-width:980px;}
@media(max-width:760px){
  .faq-accordion.faq-cols{grid-template-columns:1fr;}
}

/* ---- faq: sidebar directory (Avimee-style) ---- */
.faq-shell{display:grid; grid-template-columns:280px 1fr; gap:36px; align-items:start;}
.faq-radio{position:absolute; opacity:0; pointer-events:none; width:0; height:0;}
.faq-sidebar{position:sticky; top:96px; display:flex; flex-direction:column; gap:2px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:10px; max-height:calc(100vh - 130px); overflow-y:auto;}
.faq-sidebar-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-radius:5px; font-size:13.5px; font-weight:600; color:var(--charcoal-body); cursor:pointer; line-height:1.35; transition:background .15s ease, color .15s ease;}
.faq-sidebar-item:hover{background:var(--tint-navy);}
.faq-sidebar-count{font-size:11px; font-weight:700; color:var(--grey); background:var(--off-white); border-radius:20px; padding:2px 8px; flex:none;}
.faq-content{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:36px 40px; min-height:420px; box-shadow:var(--shadow-sm);}
.faq-panel{display:none;}
.faq-panel-title{font-family:var(--serif); font-size:clamp(20px,2.4vw,26px); color:var(--navy); margin:0 0 6px;}
.faq-panel-count{font-size:12.5px; color:var(--grey); margin:0 0 20px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;}
.faq-panel .faq-accordion{max-width:none; margin:0;}
.faq-num{font-size:12px; font-weight:700; color:var(--orange); background:var(--tint-orange); border-radius:4px; padding:2px 7px; flex:none;}
.faq-item summary .qtext{flex:1;}
@media(max-width:900px){
  .faq-shell{grid-template-columns:1fr;}
  .faq-sidebar{position:static; flex-direction:row; overflow-x:auto; max-height:none; -webkit-overflow-scrolling:touch;}
  .faq-sidebar-item{flex:none; white-space:nowrap;}
  .faq-content{padding:26px 20px;}
}
/* generated show/hide + active states per category index */
.cta-band{position:relative; overflow:hidden; background:var(--gradient-navy); padding:64px 0; text-align:center;}
.cta-band::before{content:""; position:absolute; width:360px; height:360px; border-radius:50%; top:-180px; right:8%; filter:blur(60px); background:radial-gradient(circle, rgba(255,100,47,.28) 0%, rgba(255,100,47,0) 70%); pointer-events:none;}
.cta-band h3{position:relative; font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--white); max-width:640px; margin:0 auto;}
.cta-band .sub{position:relative; font-family:var(--serif); font-style:italic; font-size:15px; color:#c7cbe8; margin-top:12px;}
.cta-band .btn{position:relative; margin-top:24px;}

/* ---- footer ---- */
.site-footer{position:relative; overflow:hidden; background:var(--midnight); color:#c7cbe8; padding:44px 0 20px;}
.site-footer .container{position:relative;}
.site-footer .cols{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:24px;}
.site-footer .wordmark{color:var(--white);}
.site-footer p.blurb{font-size:13px; color:#8f93b8; margin-top:12px; max-width:230px; line-height:1.5;}
.site-footer h5{font-size:12px; color:var(--white); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
.site-footer ul{list-style:none; display:flex; flex-direction:column; gap:8px;}
.site-footer ul a{font-size:13px;}
.site-footer a{color:#c7cbe8; text-decoration:none;}
.site-footer a:hover{color:var(--white);}
.site-footer .bottom{margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; color:#8f93b8; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.footer-locations-strip{margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:12px;}
.footer-locations-strip .strip-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px;}
.footer-locations-strip .label{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8f93b8; flex:none; white-space:nowrap;}
.footer-locations-strip .strip-list{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; flex:1;}
.footer-locations-strip .strip-list a{font-size:13px; font-weight:600; color:#c7cbe8; text-decoration:none; white-space:nowrap;}
.footer-locations-strip .strip-list a:hover{color:var(--orange);}
.footer-locations-strip .strip-list .dot{color:rgba(255,255,255,.25); font-size:11px;}
@media(max-width:760px){
  /* The label sits beside the city list in a row; once the list wraps to
     multiple lines, every wrapped line still starts after the label's width
     (since the list is a sibling flex item, not full-width), leaving a
     blank gap under the label on every line but the first. Stack the label
     above the list instead so it can wrap edge-to-edge. */
  .footer-locations-strip .strip-row{flex-direction:column; align-items:stretch; gap:6px;}
}

/* ---- whatsapp button ---- */
.wa-float{position:fixed; right:18px; bottom:18px; width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg, #2be36e, var(--whatsapp-green)); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(29,207,96,.45); z-index:40; text-decoration:none; transition:transform .15s ease;}
.wa-float:hover{transform:translateY(-2px) scale(1.05);}
.wa-float svg{width:24px; height:24px; fill:var(--white);}

/* ---- generic page / blog / single ---- */
.page-header{padding:48px 0 0;}
.page-header h1{font-size:clamp(26px,3.2vw,36px); font-weight:700; color:var(--navy);}
.entry-content{font-size:15px; line-height:1.7; color:var(--charcoal-body); max-width:720px; margin:0 auto;}
.entry-content h2{font-size:22px; font-weight:700; color:var(--charcoal-dark); margin:32px 0 12px;}
.entry-content h3{font-family:var(--serif); font-style:italic; font-weight:400; font-size:19px; color:var(--charcoal-dark); margin:24px 0 10px;}
.entry-content p{margin:0 0 16px;}
.entry-content a{color:var(--orange); text-decoration:underline;}
.entry-content a:hover{color:var(--orange-hover);}

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1180px; margin:0 auto; padding:0 28px;}
.blog-card{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--white); box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.blog-card .thumb{display:block; aspect-ratio:16/10; background:var(--off-white); overflow:hidden;}
.blog-card .thumb img{width:100%; height:100%; object-fit:cover;}
.blog-card .body{padding:18px;}
.blog-card .meta{font-size:11.5px; color:var(--grey); text-transform:uppercase; letter-spacing:.04em;}
.blog-card h2{font-size:16px; font-weight:700; color:var(--charcoal-dark); margin-top:8px;}
.blog-card h2 a{text-decoration:none; color:inherit;}
.blog-card p{font-size:13px; color:var(--grey); margin-top:8px; line-height:1.55;}
.pagination{display:flex; justify-content:center; gap:10px; padding:40px 28px 0; font-size:13px;}
.pagination a, .pagination span{padding:8px 14px; border:1px solid var(--border); border-radius:5px; text-decoration:none; color:var(--charcoal-body);}
.pagination .current{background:var(--navy); color:var(--white); border-color:var(--navy);}

.contact-wrap{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; max-width:1180px; margin:0 auto; padding:0 28px;}
.contact-info h2{font-size:18px; font-weight:700; color:var(--charcoal-dark); margin-bottom:10px;}
.contact-info p{font-size:14px; color:var(--grey); line-height:1.6; margin-bottom:10px;}
.contact-form{border:1px solid var(--border); border-radius:var(--radius); padding:28px; background:var(--off-white); box-shadow:var(--shadow-lg);}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:11px; font-weight:600; color:var(--charcoal-dark); text-transform:uppercase; letter-spacing:.05em;}
.field input, .field select, .field textarea{font-family:var(--sans); font-size:14px; color:var(--charcoal-body); padding:10px 12px; border:1px solid var(--border); border-radius:5px; background:var(--white); width:100%;}
.field textarea{resize:vertical; min-height:90px;}
.grid-form{display:flex; flex-direction:column; gap:14px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

/* ---- contact page: quick-contact cards (WhatsApp / Call / Email) ---- */
.quick-contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;}
.quick-contact-card{background:var(--white); border:1px solid var(--border); border-radius:12px; padding:22px 18px; text-align:center; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;}
.quick-contact-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.quick-contact-card.span-2{grid-column:span 2; flex-direction:row; justify-content:center; text-align:left; gap:16px;}
.qc-icon-wrap{position:relative; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; margin-bottom:2px;}
.quick-contact-card.span-2 .qc-icon-wrap{margin-bottom:0;}
.qc-icon-wrap.whatsapp{background:var(--whatsapp-green);}
.qc-icon-wrap.whatsapp svg{width:22px; height:22px; color:#fff;}
.qc-icon-wrap.call{background:var(--tint-orange);}
.qc-icon-wrap.call svg{width:22px; height:22px; color:var(--orange);}
.qc-icon-wrap.email{background:var(--tint-navy);}
.qc-icon-wrap.email svg{width:22px; height:22px; color:var(--navy);}
.qc-blink{position:absolute; top:-2px; right:-2px; width:13px; height:13px; border-radius:50%; border:2px solid var(--white);}
.qc-blink.green{background:var(--whatsapp-green); animation:qc-pulse-green 1.6s infinite;}
.qc-blink.orange{background:var(--orange); animation:qc-pulse-orange 1.6s infinite;}
@keyframes qc-pulse-green{0%{box-shadow:0 0 0 0 rgba(29,207,96,.55);}70%{box-shadow:0 0 0 9px rgba(29,207,96,0);}100%{box-shadow:0 0 0 0 rgba(29,207,96,0);}}
@keyframes qc-pulse-orange{0%{box-shadow:0 0 0 0 rgba(255,100,47,.55);}70%{box-shadow:0 0 0 9px rgba(255,100,47,0);}100%{box-shadow:0 0 0 0 rgba(255,100,47,0);}}
.qc-title{font-size:13.5px; font-weight:700; color:var(--charcoal-dark);}
.qc-sub{font-size:11.5px; color:var(--grey);}
.qc-btn{margin-top:6px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:8px 16px; border-radius:20px;}
.qc-btn.whatsapp{background:var(--whatsapp-green); color:#fff;}
.qc-btn.call{background:var(--tint-orange); color:var(--orange);}
.qc-email-list{display:flex; flex-direction:column; gap:3px;}
.quick-contact-card.span-2 .qc-title{display:block; margin-bottom:4px;}
.qc-email-list a{font-size:13px; font-weight:600; color:var(--navy); text-decoration:none;}
.qc-email-list a:hover{color:var(--orange);}
@media(max-width:480px){
  .quick-contact-grid{grid-template-columns:1fr;}
  .quick-contact-card.span-2{grid-column:span 1;}
}

/* ---- careers page ---- */
.career-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.career-card{background:var(--white); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;}
.career-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.career-card-top{padding:26px 26px 22px; color:var(--white);}
.career-icon{width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.career-icon svg{width:22px; height:22px; color:var(--white);}
.career-card-top h3{font-size:19px; font-weight:800; color:var(--white); margin-bottom:8px;}
.career-exp{display:inline-block; font-size:12px; font-weight:700; color:var(--white); background:rgba(255,255,255,.18); padding:4px 12px; border-radius:20px;}
.career-card-body{padding:24px 26px 26px; flex:1; display:flex; flex-direction:column;}
.career-elig-label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); margin-bottom:10px;}
.career-elig-list{list-style:none; margin:0 0 20px; padding:0; flex:1;}
.career-elig-list li{position:relative; padding-left:20px; font-size:13.5px; color:var(--charcoal-body); margin-bottom:9px; line-height:1.5;}
.career-elig-list li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--orange); font-weight:700;}
.career-apply{max-width:520px; margin:0 auto; text-align:center;}
.career-form-title{font-size:22px; font-weight:800; color:var(--charcoal-dark); margin-bottom:6px;}
.career-apply .career-form{text-align:left; margin-top:16px;}
.field-note{display:block; font-size:12px; color:var(--grey); margin-top:6px;}
.field-note.is-error{color:#c0392b; font-weight:600;}
@media(max-width:760px){
  .career-grid{grid-template-columns:1fr;}
}

/* ---- contact page: direct team contacts ---- */
.direct-contacts{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px;}
.direct-card{border:1px solid var(--border); border-radius:10px; padding:26px 24px; background:var(--white);}
.dc-label{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); display:block; margin-bottom:10px;}
.direct-card h4{font-size:19px; font-weight:800; color:var(--charcoal-dark); margin-bottom:12px;}
.direct-card a{display:block; font-size:14px; color:var(--charcoal-body); text-decoration:none; margin-bottom:4px;}
.direct-card a:hover{color:var(--orange);}
@media(max-width:760px){
  .direct-contacts{grid-template-columns:1fr;}
}
.form-notice{padding:12px 16px; border-radius:6px; font-size:13.5px; margin-bottom:18px;}
.form-notice.success{background:#eaf7ee; color:#1e6b3a; border:1px solid #b9e3c4;}
.form-notice.error{background:#fdeceb; color:#9a2b1f; border:1px solid #f5c2bc;}

/* ---- pricing (dark cards on a light section) ---- */
.pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.price-card-dark{position:relative; background:var(--charcoal-dark); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:26px; color:var(--white); display:flex; flex-direction:column;}
.price-card-dark.popular{background:var(--midnight); border-color:var(--orange); box-shadow:0 0 0 1px var(--orange), var(--shadow-lg); margin-top:-16px; padding-bottom:42px; z-index:1;}
@media(max-width:900px){.price-card-dark.popular{margin-top:0;}}
.price-card-dark .badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--gradient-orange); color:var(--white); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:5px 14px; border-radius:999px; white-space:nowrap;}
.price-card-dark .plan-name{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--orange);}
.price-card-dark .amt{display:flex; align-items:baseline; gap:6px; margin-top:12px; flex-wrap:wrap;}
.price-card-dark .amt .n{font-size:28px; font-weight:800;}
.price-card-dark .amt .p{font-size:12px; color:#9aa0c9;}
.price-card-dark .desc{font-size:12.5px; color:#9aa0c9; margin-top:8px; line-height:1.5;}
.price-card-dark ul{list-style:none; margin:20px 0 0; display:flex; flex-direction:column; gap:10px; flex:1;}
.price-card-dark li{font-size:13px; display:flex; gap:8px; align-items:flex-start; color:#d7d9ee;}
.price-card-dark li svg{width:15px; height:15px; color:var(--orange); flex:none; margin-top:2px;}
.price-card-dark .btn{margin-top:20px; width:100%; justify-content:center;}
.btn-outline-white{border:1.5px solid rgba(255,255,255,.3); color:var(--white); background:transparent;}
.btn-outline-white:hover{background:rgba(255,255,255,.1);}

.pricing-note{text-align:center; font-size:13px; color:var(--grey); margin-top:24px;}

.addon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;}
.addon-card{background:var(--charcoal-dark); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:22px; color:var(--white);}
.addon-card h4{font-size:14.5px; font-weight:700;}
.addon-card .amt{color:var(--orange); font-weight:800; font-size:17px; margin-top:8px;}
.addon-card p{font-size:12.5px; color:#9aa0c9; margin-top:8px; line-height:1.5;}
.addon-card .lnk{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:13px; font-weight:700; color:var(--orange); text-decoration:none;}

.city-grid{display:flex; flex-wrap:wrap; gap:10px; max-width:1180px; margin:0 auto; padding:0 28px;}
.city-pill{border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:13px; color:var(--charcoal-body); background:var(--white); box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease;}
.city-pill:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--navy);}

/* ---- industries we serve: simple icon grid ---- */
.industry-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:36px 20px; max-width:1000px; margin:0 auto;}
.industry-item{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;}
.industry-icon{width:64px; height:64px; border-radius:50%; background:var(--tint-navy); display:flex; align-items:center; justify-content:center; flex:none; transition:transform .15s ease, background .15s ease;}
.industry-icon svg{width:28px; height:28px; color:var(--navy);}
.industry-item:hover .industry-icon{transform:translateY(-3px); background:var(--tint-orange);}
.industry-item:hover .industry-icon svg{color:var(--orange);}
.industry-item h3{font-size:13.5px; font-weight:700; color:var(--charcoal-dark); margin:0;}
.industry-item .industry-tag{display:block; font-size:11px; font-weight:500; color:var(--grey); margin-top:3px;}

/* ---- expertise card: icon + bullet list columns with a "more" link ---- */
.expertise-card{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:36px 40px; box-shadow:var(--shadow-sm); max-width:1000px; margin:0 auto;}
.expertise-header{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
.expertise-header .dash{width:32px; height:2px; background:var(--charcoal-dark); flex:none;}
.expertise-header h3{font-size:22px; font-weight:700; color:var(--charcoal-dark); margin:0;}
.expertise-cols{display:grid; grid-template-columns:1fr 1fr;}
.expertise-col{padding:0 32px;}
.expertise-col:first-child{padding-left:0; border-right:1px solid var(--border);}
.expertise-col:last-child{padding-right:0;}
.expertise-col-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.expertise-col-head svg{width:22px; height:22px; color:var(--navy); flex:none;}
.expertise-col-head h4{font-size:16px; font-weight:700; color:var(--charcoal-dark); margin:0;}
.expertise-list{list-style:none; margin:0 0 16px; padding:0;}
.expertise-list li{position:relative; padding-left:16px; font-size:13.5px; color:var(--grey); margin-bottom:10px; line-height:1.5;}
.expertise-list li::before{content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--orange);}
.expertise-more{font-size:13px; font-weight:600; color:var(--charcoal-dark); text-decoration:none; border-bottom:1px solid var(--charcoal-dark); padding-bottom:2px; transition:color .15s ease, border-color .15s ease;}
.expertise-more:hover{color:var(--orange); border-color:var(--orange);}
@media(max-width:760px){
  .expertise-card{padding:28px 24px;}
  .expertise-cols{grid-template-columns:1fr; gap:28px;}
  .expertise-col:first-child{padding-left:0; padding-right:0; border-right:none; border-bottom:1px solid var(--border); padding-bottom:24px;}
  .expertise-col:last-child{padding-left:0;}
}

/* ---- responsive ---- */
@media (max-width:900px){
  .bento-grid{grid-template-columns:repeat(2,1fr);}
  .hairline-grid.cols-3, .hairline-grid.cols-4, .hairline-grid.cols-5{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .insights-grid{grid-template-columns:repeat(2,1fr);}
  .facts-strip{grid-template-columns:repeat(2,1fr); row-gap:20px;}
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .addon-grid{grid-template-columns:repeat(2,1fr);}
  .industry-grid{grid-template-columns:repeat(4,1fr); gap:28px 12px;}
}
@media (max-width:760px){
  .navlinks{position:absolute; top:100%; left:0; right:0; background:var(--white); border-bottom:1px solid var(--border); flex-direction:column; padding:16px 28px; gap:14px; display:none; max-height:75vh; overflow-y:auto;}
  .navlinks.is-open{display:flex;}
  .navlinks li{flex-wrap:wrap;}
  .navlinks li.menu-item-has-children > a{flex:1;}
  .navlinks .sub-menu{display:none; position:static; box-shadow:none; border:none; padding:6px 0 0 14px; margin-top:6px; background:none; width:100%; order:3;}
  .navlinks li.sub-open > .sub-menu{display:block;}
  .submenu-toggle{display:none; align-items:center; justify-content:center; width:30px; height:30px; margin-left:auto; background:none; border:none; padding:0; cursor:pointer; color:var(--charcoal-dark); flex:none;}
  .navlinks li.menu-item-has-children .submenu-toggle{display:flex;}
  .submenu-toggle svg{width:14px; height:14px; transition:transform .2s ease;}
  .navlinks li.sub-open > .submenu-toggle svg{transform:rotate(180deg);}
  .nav-toggle{display:block; position:relative; width:30px; height:30px; padding:0;}
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after{content:""; position:absolute; left:4px; right:4px; width:auto; height:2px; margin:0; background:var(--charcoal-dark); transition:transform .2s ease, opacity .2s ease, top .2s ease;}
  .nav-toggle::before{top:9px;}
  .nav-toggle span{top:14px;}
  .nav-toggle::after{top:19px;}
  .nav-toggle.is-active::before{top:14px; transform:rotate(45deg);}
  .nav-toggle.is-active span{opacity:0;}
  .nav-toggle.is-active::after{top:14px; transform:rotate(-45deg);}
  .client-login-link, #talkToExpertBtn{display:none;}
  .navlinks li.navlinks-mobile-actions{display:flex; flex-direction:column; gap:10px; width:100%; margin-top:4px; padding-top:16px; border-top:1px solid var(--border);}
  .navlinks-mobile-actions .mobile-client-login-btn{text-align:center; border:1px solid var(--border); border-radius:8px; padding:10px; background:none; font-family:var(--sans); font-size:14px; font-weight:700; color:var(--charcoal-dark); cursor:pointer;}
  .navlinks-mobile-actions .mobile-client-login-btn:hover{color:var(--orange); border-color:var(--orange);}
  .navlinks-mobile-actions .btn{width:100%; justify-content:center;}
  .hero-inner{grid-template-columns:1fr; text-align:center; justify-items:center;}
  .hero-copy{max-width:100%;}
  .hero-inner .sub{margin-left:auto; margin-right:auto;}
  .hero-inner .btnrow{justify-content:center;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .contact-wrap{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .site-footer .cols{grid-template-columns:1fr 1fr; row-gap:26px;}
  .util-bar{font-size:11px;}
  /* Service tiles (heading + description, either with a separate "Explore →"
     link or with the whole tile itself as the link — e.g. the /services/ hub
     page) take up too much vertical space on small screens — collapse each
     to just its heading, since the description is repeated on the
     destination page anyway. Scoped to tiles with a .lnk or that are
     themselves a link, so non-service bento tiles (e.g. the About page's
     Ventures grid, where some tiles have no link and rely on their
     paragraph as the only content) are left untouched. */
  .bento-tile:has(.lnk), a.bento-tile{min-height:0; padding:20px;}
  .bento-tile:has(.lnk) p, a.bento-tile p{display:none;}
  .bento-tile:has(.lnk) .lnk{margin-top:10px;}
  .bento-tile:has(.lnk) h4, .bento-tile:has(.lnk) h3, a.bento-tile h4, a.bento-tile h3{font-size:16px; line-height:1.3; word-break:break-word;}
}
@media (max-width:480px){
  .bento-grid{grid-template-columns:repeat(2,1fr);}
  .hairline-grid.cols-2, .hairline-grid.cols-3, .hairline-grid.cols-4, .hairline-grid.cols-5{grid-template-columns:repeat(1,1fr);}
  .industry-grid{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:1fr;}
  .insights-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .addon-grid{grid-template-columns:1fr;}
  .press-logo{height:64px; min-width:140px; padding:10px 16px;}
  .press-logo img{max-height:38px; max-width:110px;}
}