/* ============================================================
   WEBNETY — Design tokens (v2: editorial / warm studio)
   Concept: a calm, cream-and-forest-green editorial system —
   the agency's own site reads like a well-typeset case study,
   not a tech dashboard. Signature: a browser mockup that morphs
   from wireframe to finished site, standing in for the agency's
   whole pitch ("we turn blueprints into live, converting sites").
   ============================================================ */

:root{
  /* color */
  --green-ink:  #12281F;   /* near-black green — header / footer */
  --green-deep: #1F4B3D;   /* primary panels, buttons */
  --green-mid:  #2E6350;   /* hover state */
  --sage:       #DCE6DC;   /* soft sage card bg */
  --cream-card: #EFE8D6;   /* warm cream card bg (stat chips) */
  --paper:      #F6F3EA;   /* main page background */
  --white:      #FFFFFF;
  --text:       #1C241D;
  --text-muted: #5B6A5E;
  --line:       #E4DFCE;
  --line-dark:  rgba(246,243,234,0.14);

  /* type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', Consolas, monospace;

  /* scale */
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  --step-4: clamp(2.5rem, 1.8rem + 3vw, 3.9rem);
  --step-5: clamp(3rem, 2rem + 4.4vw, 5.2rem);

  --container: 1200px;
  --radius: 22px;
  --radius-sm: 12px;
  --radius-pill: 999px;
}

*, *::before, *::after{ box-sizing: border-box; font-variant-numeric: normal; font-feature-settings: "zero" 0; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  font-weight: 500;
}
h1:not(.hero-title-v2):not(.hero-dynamic-headline){ font-size: var(--step-5); font-weight: 500; }
h2{ font-size: var(--step-3); font-weight: 500; }
h3{ font-size: var(--step-2); font-weight: 500; }
h4{ font-size: var(--step-1); font-weight: 600; font-family: var(--font-body); }
p{ margin: 0 0 1em; max-width: 62ch; color: var(--text-muted); }
a{ color: var(--green-deep); }
a.ul-none{ text-decoration: none; color: inherit; }
img{ max-width: 100%; display: block; }
ul, ol{ padding-left: 1.2em; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.visually-hidden{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip-link{
  position: absolute; left: -999px; top: 0; background: var(--green-deep); color: var(--white);
  padding: 10px 16px; z-index: 100; font-family: var(--font-mono); font-size: 0.85rem; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; top: 0; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
}

/* ---------- eyebrow: centered label, editorial tone ---------- */
.eyebrow{
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 14px;
}
.eyebrow.center{ text-align:center; }
.on-dark .eyebrow{ color: rgba(246,243,234,0.65); }

/* ---------- header ---------- */
.site-header{
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}
.logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo img,
.logo-img,
.site-header .logo img {
  height: 30px !important;
  max-height: 30px !important;
  width: auto !important;
  max-width: 200px !important;
  display: block;
  object-fit: contain;
  transition: opacity 0.2s ease;
}
.logo:hover img,
.logo:hover .logo-img {
  opacity: 0.9;
}
.foot-logo-img,
.site-footer .logo img {
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
  max-width: 180px !important;
  display: block;
  object-fit: contain;
}
.nav{ display: flex; gap: 16px; align-items:center; flex-wrap: nowrap; }
.nav > a,
.nav > .has-dropdown > .dropdown-toggle {
  color: var(--text);
  opacity: 0.78;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav > a:hover,
.nav > a[aria-current="page"],
.nav > .has-dropdown > .dropdown-toggle:hover,
.nav > .has-dropdown > .dropdown-toggle[aria-current="page"] {
  opacity: 1;
  border-bottom-color: var(--green-deep);
}
.top-announcement-bar {
  background: #12281F !important;
  color: #F6F3EA !important;
  font-family: var(--font-body);
  font-size: 0.8rem !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  position: relative;
  z-index: 1001;
  width: 100% !important;
}

.top-announcement-bar .top-bar-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.top-announcement-bar .top-bar-tagline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 600 !important;
  color: rgba(246, 243, 234, 0.95) !important;
  white-space: nowrap !important;
}

.top-announcement-bar .top-bar-badge {
  background: rgba(129, 199, 132, 0.22) !important;
  color: #81C784 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.05em !important;
  border: 1px solid rgba(129, 199, 132, 0.3) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-right: 6px !important;
}

.top-announcement-bar .top-bar-text {
  color: rgba(246, 243, 234, 0.95) !important;
  white-space: nowrap !important;
}

.top-announcement-bar .top-bar-contacts {
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px !important;
  font-size: 0.8rem !important;
  color: rgba(246, 243, 234, 0.85) !important;
  white-space: nowrap !important;
}

.top-announcement-bar .top-bar-link {
  color: rgba(246, 243, 234, 0.95) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.top-announcement-bar .top-bar-link:hover {
  color: #81C784 !important;
}

@media (max-width: 860px) {
  .top-announcement-bar {
    padding: 5px 0 !important;
  }
  .top-announcement-bar .top-bar-container {
    justify-content: center !important;
    text-align: center !important;
  }
  .top-announcement-bar .top-bar-contacts {
    display: none !important;
  }
  .top-announcement-bar .top-bar-tagline {
    font-size: 0.74rem !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  .top-announcement-bar .top-bar-text {
    max-width: 250px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
  }
}
.nav-cta{
  background: var(--green-ink); color: var(--paper) !important; padding: 8px 18px !important;
  border-bottom: none !important; border-radius: var(--radius-pill); opacity: 1 !important;
}
.nav-cta:hover{ background: var(--green-mid); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--text); padding:8px 12px; font-size:1.1rem; border-radius: var(--radius-pill); }

/* ---------- nav dropdown & mega-menu ---------- */
.has-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
}
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.dropdown-toggle .caret {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}
.has-dropdown:hover > .dropdown-toggle .caret,
.has-dropdown.is-active > .dropdown-toggle .caret {
  transform: rotate(180deg);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 520px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 36px rgba(18, 40, 31, 0.16);
  padding: 16px;
  z-index: 1000;
}

/* Invisible hover bridge extending 24px upwards to bridge any mouse movement gap */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -24px;
  left: -20px;
  right: -20px;
  height: 28px;
  background: transparent;
}

.has-dropdown:hover > .dropdown-menu,
.has-dropdown:focus-within > .dropdown-menu,
.has-dropdown.is-active > .dropdown-menu {
  display: block;
  animation: navFadeIn 0.15s ease-out forwards;
}

@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dropdown-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  opacity: 1 !important;
}
.dropdown-card:hover {
  background: var(--sage);
  border-color: var(--green-deep);
  transform: translateY(-1px);
}
.dropdown-icon {
  font-size: 1.1rem;
  line-height: 1;
  padding: 6px;
  background: var(--paper);
  border-radius: 6px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.dropdown-card strong {
  display: block;
  font-size: 0.86rem;
  color: var(--green-ink);
  font-weight: 700;
  margin-bottom: 2px;
}
.dropdown-card p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.3;
}

.dropdown-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  text-align: right;
}
.dropdown-all-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green-deep) !important;
  text-decoration: none;
  opacity: 1 !important;
}
.dropdown-all-link:hover {
  text-decoration: underline;
}

@media (max-width: 1024px){
  .nav-toggle{ display:block; }
  .nav{
    position: absolute; top: 84px; left:0; right:0; background: var(--paper);
    flex-direction: column; align-items: flex-start; padding: 12px 24px 24px;
    display: none; border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
  }
  .nav.open{ display: flex; }
  .nav > a, .nav > .has-dropdown > .dropdown-toggle {
    width: 100%; padding: 10px 0; border-bottom: 1px solid var(--line);
  }
  .has-dropdown { width: 100%; flex-direction: column; align-items: flex-start; }
  .dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    padding: 8px 0 0 0;
    background: transparent;
    display: none;
  }
  .has-dropdown.open > .dropdown-menu {
    display: block;
  }
  .dropdown-grid { grid-template-columns: 1fr; }
  .nav-cta{ margin-top: 8px; text-align:center; width:100%; }
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items:center; gap:8px; font-family: var(--font-body);
  font-weight: 600; font-size: 0.95rem; padding: 14px 26px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration:none;
  transition: transform 0.15s ease, background 0.15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--green-ink); color: var(--paper); }
.btn-primary:hover{ background: var(--green-mid); }
.btn-cream{ background: var(--paper); color: var(--green-ink); }
.btn-cream:hover{ background: var(--white); }
.btn-ghost{ background: transparent; color: var(--paper); border-color: var(--line-dark); }
.btn-ghost:hover{ border-color: var(--paper); }
.btn-outline{ background:transparent; color:var(--green-ink); border-color: var(--green-ink); }
.btn-outline:hover{ background: var(--green-ink); color: var(--paper); }

/* ---------- hero ---------- */
.hero{ padding: 56px 0 88px; }
.hero .container{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items:center; }
.hero h1:not(.hero-title-v2):not(.hero-dynamic-headline){ color: var(--green-ink); margin-bottom: 20px; }
.hero .lede{ color: var(--text-muted); font-size: var(--step-1); max-width: 46ch; }
.hero-actions{ display:flex; gap:16px; margin-top: 28px; flex-wrap:wrap; }
@media (max-width: 900px){ .hero .container{ grid-template-columns: 1fr; } .hero .mockup-col{ order: 2 !important; } }

/* signature: browser mockup morphing wireframe -> live site */
.mockup-col{ position:relative; }
.mockup-shell{
  background: var(--green-deep); border-radius: var(--radius); padding: 14px;
  box-shadow: 0 30px 60px -20px rgba(18,40,31,0.35);
}
.mockup-shell svg{ width:100%; height:auto; border-radius: 10px; overflow:hidden; }
.stat-chip{
  position:absolute; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 20px; font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
  box-shadow: 0 16px 36px -10px rgba(18,40,31,0.2); z-index: 10;
  -webkit-font-smoothing: antialiased;
}
.stat-chip.a{ top:-6%; left:-10%; background: var(--paper); border-color: rgba(19,42,31,0.15); }
.stat-chip.b{ bottom:-6%; right:-8%; background: var(--paper); border-color: rgba(19,42,31,0.15); }
.stat-chip strong{ display:block; font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--green-deep); margin-top:2px; letter-spacing:-0.02em; }
@media (max-width: 640px){ .stat-chip{ display:none; } }

/* ---------- logo marquee ---------- */
.marquee-wrap{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 26px 0; }
.marquee{ display:flex; gap: 64px; white-space:nowrap; font-family: var(--font-display); font-size:1.3rem; color: var(--text-muted); opacity:0.6; }

/* ---------- sections ---------- */
.section{ padding: 96px 0; }
.section-tight{ padding: 56px 0; }
.section-head{ max-width: 640px; margin: 0 auto 48px; text-align:center; }
.section-alt{ background: var(--white); }
.on-dark{ background: var(--green-ink); color: var(--paper); }
.on-dark p{ color: rgba(246,243,234,0.75); }
.on-dark h2, .on-dark h3, .on-dark h4{ color: var(--paper); }

/* feature band (image + copy on green) */
.feature-band{ background: var(--green-deep); border-radius: var(--radius); padding: 64px; display:grid; grid-template-columns: 1fr 1fr; gap:32px; align-items:center; color: var(--paper); position:relative; overflow:hidden; }
.feature-band h2{ color: var(--paper); max-width: 14ch; }
.feature-band p{ color: rgba(246,243,234,0.78); }
@media (max-width: 860px){ .feature-band{ grid-template-columns:1fr; padding:40px 28px; text-align:center; } .feature-band p{ margin-left:auto;margin-right:auto; } }

/* ---------- grid layouts ---------- */
.grid{ display:grid; gap: 24px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; } }

/* ---------- cards ---------- */
.card{
  background: var(--sage); border-radius: var(--radius); padding: 32px;
}
.card.on-white{ background: var(--white); border: 1px solid var(--line); }
.card.dark{ background: var(--green-deep); color: var(--paper); }
.card.dark p{ color: rgba(246,243,234,0.78); }
.card .tag{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--green-deep); letter-spacing: 0.06em; }
.card.dark .tag{ color: var(--cream-card); }
.card h3, .card h4{ margin-top: 10px; }

.service-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 32px; display:flex; flex-direction:column; gap:10px; }
.service-card .num{ font-family: var(--font-mono); color: var(--green-deep); font-size: 0.85rem; }

/* icon circle */
.icon-circle{ width:52px; height:52px; border-radius:50%; background: var(--green-deep); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color: var(--paper); }

/* process / step cards */
.process{ display:grid; grid-template-columns: repeat(5,1fr); gap: 20px; }
@media (max-width: 960px){ .process{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .process{ grid-template-columns: 1fr; } }
.phase{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.phase .coord{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--green-deep); }

/* faq (AEO) */
.faq-item{ border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-item summary{ font-family: var(--font-display); font-weight:500; font-size: 1.15rem; cursor: pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; color: var(--green-ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-family: var(--font-mono); color: var(--green-deep); font-size:1.4rem; flex-shrink:0; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item .answer{ margin-top: 12px; }
.faq-item .answer p:last-child{ margin-bottom:0; }

/* testimonial */
.testimonial{ text-align:center; max-width: 700px; margin:0 auto; }
.testimonial p{ font-size: var(--step-2); font-family: var(--font-display); font-weight:500; color: var(--text); margin: 0 auto 16px; }
.testimonial cite{ font-style:normal; font-family: var(--font-mono); font-size:0.85rem; color: var(--text-muted); display:block; }

/* forms */
.form-field{ margin-bottom: 20px; }
label{ display:block; font-family: var(--font-body); font-weight:600; font-size:0.85rem; margin-bottom:8px; color: var(--text); }
input, textarea, select{
  width:100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size:1rem; background: var(--white); color: var(--text);
}
input:focus, textarea:focus, select:focus{ border-color: var(--green-deep); }
.hint{ font-size:0.82rem; color: var(--text-muted); margin-top:6px; }

/* breadcrumb */
.breadcrumb{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); padding: 20px 0 0; }
.breadcrumb a{ color: var(--text-muted); }
.breadcrumb .sep{ margin: 0 8px; color: var(--line); }

/* footer */
.site-footer{ background: var(--green-ink); color: rgba(246,243,234,0.72); padding: 64px 0 28px; border-radius: var(--radius) var(--radius) 0 0; }
.foot-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--line-dark); }
@media (max-width: 800px){ .foot-grid{ grid-template-columns: 1fr !important; gap: 36px !important; } }
.foot-col h4{ color: var(--paper); font-size: 0.85rem; font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; }
.foot-col a{ display:block; color: rgba(246,243,234,0.68); padding: 6px 0; font-size: 0.92rem; text-decoration:none; }
.foot-col a:hover{ color: var(--paper); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:12px; font-size:0.82rem; font-family: var(--font-mono); }
@media (max-width: 600px) {
  .foot-bottom { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 8px !important; }
  .foot-bottom span { white-space: nowrap !important; font-size: clamp(0.65rem, 2.6vw, 0.78rem) !important; }
}
.foot-logo{ color: var(--paper); }

/* newsletter / CTA band */
.cta-band{ background: var(--green-deep); border-radius: var(--radius); padding: 64px 40px; text-align:center; color: var(--paper); }
.cta-band h2{ color: var(--paper); }
.cta-band p{ color: rgba(246,243,234,0.78); max-width:50ch; margin:0 auto 24px; }
.cta-form{ display:flex; max-width: 480px; margin: 0 auto; background: var(--paper); border-radius: var(--radius-pill); padding: 6px; gap: 6px; }
.cta-form input{ border:none; background:transparent; flex:1; padding: 10px 16px; border-radius: var(--radius-pill); }
.cta-form input:focus{ outline:none; }
.cta-form button{ border:none; }

/* blog */
.post-card{ border-bottom:1px solid var(--line); padding: 32px 0; display:grid; grid-template-columns: 140px 1fr; gap:24px; }
@media (max-width:700px){ .post-card{ grid-template-columns: 1fr; } }
.post-card .date{ font-family: var(--font-mono); font-size:0.8rem; color: var(--green-deep); }
.post-body{ max-width: 720px; margin: 0 auto; }
.post-body h2{ margin-top: 1.4em; color: var(--green-ink); }
.post-body h3{ margin-top: 1.2em; color: var(--green-ink); }
.post-meta{ font-family: var(--font-mono); font-size:0.82rem; color: var(--text-muted); margin-bottom: 8px; }
.callout{ background: var(--sage); border-radius: var(--radius); padding: 20px 24px; margin: 24px 0; }
.answer-box{ background: var(--green-deep); color: var(--paper); padding: 26px 28px; border-radius: var(--radius); margin: 24px 0 32px; }
.answer-box .eyebrow{ color: var(--cream-card); }
.answer-box p{ color: var(--paper); margin-bottom:0; max-width: none; }

.center, .text-center{ text-align:center !important; margin-left:auto; margin-right:auto; }
.section-title.text-center, .section-title.text-center h2, .section-title.text-center p{ text-align:center !important; margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0 !important; }

/* case studies & industries */
.case-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 860px) {
  .case-card { grid-template-columns: 1fr; }
}
.case-metrics {
  background: var(--sage);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.metric-item { display: flex; flex-direction: column; }
.metric-val {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1;
}
.metric-lbl {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.industry-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.industry-card:hover {
  transform: translateY(-4px);
  border-color: var(--green-deep);
}
.tag-pill {
  display: inline-block;
  background: var(--sage);
  color: var(--green-ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 500;
}

/* ---------- SEARCH MODAL OVERLAY ---------- */
.search-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(18, 40, 31, 0.75);
  backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.search-modal.active {
  display: flex !important;
  animation: modalFadeIn 0.2s ease-out forwards;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.search-modal-content {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: 90%;
  max-width: 680px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.search-modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
}
.search-modal-header input {
  width: 100%;
  border: none;
  font-family: var(--font-body);
  font-size: 1.1rem;
  background: transparent;
  outline: none;
  color: var(--green-ink);
}
.search-close-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-muted);
}
.search-modal-results {
  max-height: 420px;
  overflow-y: auto;
  padding: 16px 24px;
}
.search-placeholder, .search-no-results {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  padding: 24px 0;
}
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.search-result-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.search-result-item:hover {
  background: var(--sage);
  border-color: var(--green-deep);
}
.search-item-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.search-item-info strong {
  display: block;
  font-size: 0.95rem;
  color: var(--green-ink);
}
.search-item-info p {
  font-size: 0.82rem;
  margin: 2px 0 4px;
  color: var(--text-muted);
}
.search-item-badge {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--green-deep);
}

/* ---------- HERO COMPACT RESPONSIVE ---------- */
.hero-compact {
  padding: 32px 0 24px;
  text-align: left;
}
.hero-compact h1 {
  text-align: left;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.12;
  margin-bottom: 16px;
}
.hero-compact p {
  text-align: left;
  font-size: 1.1rem;
  max-width: 760px;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .hero-compact {
    padding: 20px 0 16px;
  }
  .hero-compact h1 {
    font-size: 1.95rem;
    line-height: 1.15;
    margin-bottom: 12px;
  }
  .hero-compact p {
    font-size: 0.98rem;
    line-height: 1.45;
  }
  .section-tight {
    padding: 24px 0;
  }
}

/* ============================================================
   WEBNETY ENTERPRISE PLATFORM & HERO SHOWCASE STYLES
   ============================================================ */

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.capability-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.capability-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(18, 40, 31, 0.08);
  border-color: var(--green-deep);
}
.capability-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  background: var(--sage);
  color: var(--green-ink);
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 12px;
}
.capability-card h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.tech-stack-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
  overflow: hidden !important;
}
.tech-chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--text-muted);
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.status-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
}
.status-new { background: #E3F2FD; color: #1565C0; }
.status-contacted { background: #FFF3E0; color: #E65100; }
.status-qualified { background: #E8F5E9; color: #2E7D32; }
.status-proposal { background: #F3E5F5; color: #7B1FA2; }
.status-won { background: #C8E6C9; color: #1B5E20; }
.status-lost { background: #FFEBEE; color: #C62828; }

.hero-agency-showcase {
  background: linear-gradient(135deg, var(--paper) 0%, #EFEBE0 100%);
  border-bottom: 1px solid var(--line);
  padding: 48px 0 56px;
  position: relative;
  overflow: hidden;
}
.hero-agency-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}
.hero-agency-content h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.08;
  margin: 12px 0 16px;
  letter-spacing: -0.02em;
  color: var(--green-ink);
}
.hero-agency-content p.lead {
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-deep);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 10px #00E676;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.hero-trust-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.hero-trust-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--green-ink);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.hero-trust-item:hover {
  transform: translateY(-2px);
  border-color: var(--green-deep);
  box-shadow: 0 6px 16px rgba(18, 40, 31, 0.06);
}
.hero-trust-item span {
  font-size: 1rem;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .hero-trust-list {
    grid-template-columns: 1fr;
  }
  .hero-trust-item {
    white-space: normal;
  }
}

/* ---------- FULL-WIDTH HERO TRUST BAR BANNER ---------- */
.hero-trust-bar {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.hero-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hero-trust-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-trust-card:hover {
  transform: translateY(-3px);
  border-color: var(--green-deep);
  box-shadow: 0 10px 24px rgba(18, 40, 31, 0.08);
}
.hero-trust-card .trust-icon {
  font-size: 1.5rem;
  line-height: 1;
  padding: 10px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.hero-trust-card strong {
  display: block;
  font-size: 0.92rem;
  color: var(--green-ink);
  margin-bottom: 2px;
}
.hero-trust-card span.trust-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
}

@media (max-width: 960px) {
  .hero-trust-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.spec-box {
  background: var(--green-ink);
  color: var(--paper);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 50px rgba(18, 40, 31, 0.25);
  overflow: hidden;
}
.spec-box-header {
  background: rgba(0,0,0,0.2);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.spec-dots {
  display: flex;
  gap: 6px;
}
.spec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.spec-dot.red { background: #FF5F56; }
.spec-dot.yellow { background: #FFBD2E; }
.spec-dot.green { background: #27C93F; }
.spec-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(246,243,234,0.7);
}
.spec-box-body {
  padding: 24px;
}
.spec-metric-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.spec-metric-card {
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
}
.spec-metric-card .num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #69F0AE;
  font-weight: 700;
  line-height: 1;
}
.spec-metric-card .label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(246,243,234,0.75);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .hero-agency-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   AEO INTERACTIVE FAQ ACCORDION COMPONENT
   ========================================================================== */
.faq-accordion {
  max-width: 1000px;
  width: 100%;
  margin: 36px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

details.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  width: 100%;
  box-sizing: border-box;
}

details.faq-item[open] {
  border-color: var(--green-deep);
  box-shadow: 0 8px 24px rgba(45, 90, 76, 0.08);
}

summary.faq-question {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

summary.faq-question::-webkit-details-marker {
  display: none;
}

summary.faq-question::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--green-deep);
  transition: transform 0.25s ease;
  margin-left: 16px;
  flex-shrink: 0;
}

details.faq-item[open] summary.faq-question::after {
  content: '−';
  transform: rotate(180deg);
}

.faq-answer, .faq-item .answer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-muted);
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.faq-answer p, .faq-item .answer p {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  line-height: 1.75;
}

/* SITE-WIDE PRE-FOOTER TRUST BAR, MARQUEE & ACTION CARDS */
.prefooter-trust-section {
  background: var(--paper, #F6F3EA) !important;
  color: var(--text-dark, #12281F) !important;
  padding: 48px 0 40px !important;
  border-top: 1px solid var(--line, #E5E2D9) !important;
  border-bottom: 1px solid var(--line, #E5E2D9) !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.prefooter-reviews-header,
.prefooter-action-header {
  text-align: center !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-muted, #666) !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
  display: block !important;
  width: 100% !important;
}

.prefooter-ratings-grid {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 36px !important;
  flex-wrap: wrap !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid var(--line, #E5E2D9) !important;
  margin-bottom: 32px !important;
  width: 100% !important;
}

.rating-badge-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #12281F !important;
}

.rating-badge-item .star {
  color: #FFB800 !important;
  font-size: 1.1rem !important;
}

.rating-badge-item .score {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  color: #2E7D32 !important;
}

.rating-badge-item .brand {
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.02em !important;
  margin-left: 4px !important;
}

.prefooter-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.action-pill-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  color: #12281F !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.action-pill-card.mint {
  background: #E8F5E9 !important;
  border: 1px solid #C8E6C9 !important;
  color: #1B5E20 !important;
}

.action-pill-card.cream {
  background: #FFF8E1 !important;
  border: 1px solid #FFE082 !important;
  color: #E65100 !important;
}

.action-pill-card.lavender {
  background: #EDE7F6 !important;
  border: 1px solid #D1C4E9 !important;
  color: #4A148C !important;
}

.action-pill-card.rose {
  background: #FFEBEE !important;
  border: 1px solid #FFCDD2 !important;
  color: #B71C1C !important;
}

.action-pill-card .action-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  background: #12281F !important;
  color: #F6F3EA !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.action-pill-card .action-icon svg {
  stroke: #F6F3EA !important;
  fill: none !important;
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
}

.action-pill-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15) !important;
}

.tech-marquee-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(46, 125, 50, 0.2) !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #12281F !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.tech-marquee-chip:hover {
  border-color: #2E7D32 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.18) !important;
}

.tech-marquee-chip .tech-name {
  font-weight: 700 !important;
  color: #2E7D32 !important;
}

.tech-marquee-chip .tech-sub {
  font-size: 0.78rem !important;
  color: #555555 !important;
  font-weight: 500 !important;
}

@media (max-width: 1024px) {
  .prefooter-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .prefooter-actions-grid {
    grid-template-columns: 1fr !important;
  }
}

/* DUAL-ROW ANGLED INFINITE MARQUEE SHOWCASE ENGINE */
.angled-marquee-section {
  overflow: hidden !important;
  padding: 24px 0 !important;
  position: relative !important;
  background: var(--paper, #F6F3EA) !important;
  border-top: 1px solid var(--line, #E5E2D9) !important;
  border-bottom: 1px solid var(--line, #E5E2D9) !important;
  margin: 36px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.angled-marquee-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  overflow: hidden !important;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.angled-marquee-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.angled-marquee-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  width: max-content !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.angled-marquee-track.move-left {
  animation: angledMarqueeLeft 35s linear infinite !important;
}

.angled-marquee-track.move-right {
  animation: angledMarqueeRight 35s linear infinite !important;
}

.angled-marquee-wrapper:hover .angled-marquee-track {
  animation-play-state: paused !important;
}

@keyframes angledMarqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes angledMarqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.sector-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(46, 125, 50, 0.08) !important;
  border: 1px solid rgba(46, 125, 50, 0.18) !important;
  color: #12281F !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sector-pill svg {
  stroke: #2E7D32 !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

.sector-pill:hover {
  background: #2E7D32 !important;
  border-color: #2E7D32 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(46, 125, 50, 0.25) !important;
}

.sector-pill:hover svg {
  stroke: #FFFFFF !important;
}

/* HERO VERTICAL SOCIAL MEDIA SIDE RAIL */
.hero-social-rail {
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 100 !important;
}

.hero-social-label {
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.70rem !important;
  letter-spacing: 0.28em !important;
  font-weight: 700 !important;
  color: #2E7D32 !important;
  text-transform: uppercase !important;
  user-select: none !important;
  opacity: 0.85 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.hero-social-line {
  width: 1px !important;
  height: 40px !important;
  background: linear-gradient(to bottom, #2E7D32, rgba(46, 125, 50, 0.18)) !important;
  margin: 10px 0 !important;
}

.hero-social-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: center !important;
}

.hero-social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E2D9 !important;
  color: #12281F !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 10px rgba(19, 42, 31, 0.05) !important;
  text-decoration: none !important;
}

.hero-social-icon svg {
  width: 15px !important;
  height: 15px !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  transition: transform 0.25s ease !important;
}

.hero-social-icon:hover {
  background: #2E7D32 !important;
  border-color: #2E7D32 !important;
  color: #FFFFFF !important;
  transform: scale(1.15) translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(46, 125, 50, 0.22) !important;
}

@media (max-width: 1400px) {
  .hero-social-rail {
    display: none !important;
  }
}

/* FOOTER ASK AI WIDGET & BRAND COLUMN STYLING */
.ask-ai-widget {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-top: 16px !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ask-ai-title {
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #81C784 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ask-ai-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}

.ask-ai-grid {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.ask-ai-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.ask-ai-btn:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35) !important;
}

.ask-ai-btn svg, .ask-ai-btn img {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: block !important;
}

/* ENGAGEMENT & HOW TO HIRE WORKFLOW GRID STYLING */
.engagement-workflow-section {
  background: var(--paper, #F6F3EA) !important;
  border-top: 1px solid var(--line, #E5E2D9) !important;
  border-bottom: 1px solid var(--line, #E5E2D9) !important;
  padding: 60px 0 !important;
  margin: 48px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.step-card-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  margin-top: 36px !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.step-card {
  background: #FFFFFF !important;
  border: 1px solid var(--line, #E5E2D9) !important;
  border-radius: 12px !important;
  padding: 22px 20px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.step-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 18px !important;
  width: 100% !important;
}

.step-card-num {
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #2E7D32 !important;
  background: rgba(46, 125, 50, 0.12) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: 0.02em !important;
}

.step-card-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  background: #2E7D32 !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.25) !important;
  flex-shrink: 0 !important;
}

.step-card-icon svg {
  stroke: #FFFFFF !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  transition: transform 0.25s ease !important;
}

.step-card-body {
  margin-top: auto !important;
}

.step-card-title {
  font-family: var(--font-heading) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: #12281F !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}

.step-card-sub {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #2E7D32 !important;
  margin: 0 !important;
}

.step-card:hover {
  transform: translateY(-4px) !important;
  border-color: #2E7D32 !important;
  box-shadow: 0 16px 32px rgba(18, 40, 31, 0.12) !important;
}

.step-card:hover .step-card-icon svg {
  transform: scale(1.15) !important;
}

@media (max-width: 1100px) {
  .step-card-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .step-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 500px) {
  .step-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* SECTOR COVERAGE 24 VERTICALS CARD STYLING */
.sector-coverage-card {
  background: var(--paper, #F6F3EA) !important;
  border: 1px solid var(--line, #E5E2D9) !important;
  border-radius: 16px !important;
  padding: 36px 40px !important;
  margin-bottom: 44px !important;
  box-shadow: 0 12px 32px rgba(18, 40, 31, 0.04) !important;
  position: relative !important;
  overflow: hidden !important;
  border-left: 5px solid #2E7D32 !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sector-coverage-card .eyebrow {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

.sector-coverage-card h2 {
  text-align: center !important;
  max-width: 840px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #12281F !important;
}

.sector-pill-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 24px !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .capability-grid,
  .practice-grid,
  .services-grid,
  .industries-grid,
  .features-grid,
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}