/* ============================================================
   MyWebsiteDesigner.US — Shared Stylesheet
   Brand: Navy #0A2540 · Red #C62828 · Gray #F0F2F5
   Font: Mulish (Google Fonts)
   ============================================================ */

:root {
  --navy:      #0A2540;
  --red:       #C62828;
  --white:     #FFFFFF;
  --gray-bg:   #F0F2F5;
  --gray-bdr:  #DCE3EB;
  --gray-mid:  #93A2B3;
  --gray-dark: #5A6B7B;
  --navy-soft: #C3CEDA;
  --f: 'Mulish', system-ui, -apple-system, sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Safety net: if a stray element ever ends up wider than the viewport (a
   fixed width, an unwrapped flex row, etc.), clip it at the root instead of
   letting the whole page grow an x-axis scrollbar. Deliberately set on html
   only, not body — overflow-x on body can turn body into a scroll container
   of its own and break nav's position:sticky. Fixing the actual overflowing
   element is still the real fix; this just contains any future mistake. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--f); color: var(--navy); background: var(--white); -webkit-font-smoothing: antialiased; line-height: 1.5; }
::selection { background: var(--red); color: #fff; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ── Layout ── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }
.section-bg { background: var(--gray-bg); }
.section-navy { background: var(--navy); }

/* ── Typography ── */
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; display: block; }
.eyebrow-gray { color: var(--gray-mid); }
.s-title { font-size: clamp(30px, 4vw, 48px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 16px; }
.s-body { font-size: 17px; line-height: 1.65; color: var(--gray-dark); }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .s-body { max-width: 580px; margin: 0 auto; }

/* ── Nav ── */
nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gray-bdr);
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  height: 68px; display: flex; align-items: center; gap: 6px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; margin-right: 14px; }
.logo-mark { width: 38px; height: 30px; flex-shrink: 0; }
.logo-text { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.logo-text .lt1 { color: var(--navy); }
.logo-text .lt2 { color: var(--gray-mid); }
.nav-links { display: flex; gap: 2px; list-style: none; }
.nav-links a { text-decoration: none; font-size: 14px; font-weight: 700; color: var(--navy); padding: 8px 12px; border-radius: 7px; transition: background 0.15s; }
.nav-links a:hover, .nav-links a.active { background: var(--gray-bg); }
.nav-cta {
  margin-left: auto; background: var(--red); color: #fff;
  font-size: 14px; font-weight: 800; padding: 10px 20px; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 16px -4px rgba(198,40,40,0.45);
  transition: box-shadow 0.2s, transform 0.15s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -4px rgba(198,40,40,0.5); }

/* ── Mobile CTA bar ──
   The nav-cta button lives inline in the nav row on desktop. Below 960px it's
   hidden (see the 960px media query) and this centered bar takes over instead —
   full-width tap target right under the header, rather than a squeezed button
   fighting the logo and hamburger for space. Hidden on desktop by default. */
.mobile-cta-bar { display: none; }

/* ── Mobile nav toggle ──
   Checkbox-driven, no JS: the checkbox is visually hidden but stays focusable
   and keyboard-toggleable (Space/Enter), and its :checked state is used to
   show/hide the dropdown and animate the label into an "X" via sibling selectors. */
.nav-toggle-input {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
}
.nav-toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 40px; height: 40px; margin-left: auto; border-radius: 8px;
  cursor: pointer; flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--navy);
  border-radius: 2px; transition: transform 0.2s ease, opacity 0.15s ease;
}
.nav-toggle-input:focus-visible + .nav-toggle { outline: 2px solid var(--red); outline-offset: 2px; }
.nav-toggle-input:checked + .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-input:checked + .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-toggle-input:checked + .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Buttons ── */
.btn-red {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 16px; font-weight: 800; padding: 15px 30px; border-radius: 9px;
  text-decoration: none; box-shadow: 0 12px 28px -10px rgba(198,40,40,0.65);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-red:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(198,40,40,0.75); }
.btn-outline {
  display: inline-block; color: #fff; border: 1.5px solid rgba(255,255,255,0.32);
  font-size: 16px; font-weight: 700; padding: 14px 28px; border-radius: 9px;
  text-decoration: none; transition: border-color 0.15s;
}
.btn-outline:hover { border-color: rgba(255,255,255,0.65); }
.btn-outline-navy {
  display: inline-block; color: var(--navy); border: 1.5px solid var(--gray-bdr);
  font-size: 15px; font-weight: 700; padding: 13px 24px; border-radius: 9px;
  text-decoration: none; transition: border-color 0.15s, background 0.15s;
}
.btn-outline-navy:hover { border-color: var(--navy); background: var(--gray-bg); }
.btn-white {
  display: inline-block; background: #fff; color: var(--red);
  font-size: 16px; font-weight: 800; padding: 15px 34px; border-radius: 9px;
  text-decoration: none; transition: transform 0.15s;
}
.btn-white:hover { transform: translateY(-2px); }
.btn-sm { font-size: 14px; padding: 11px 20px; }

/* ── Hero (page hero, used on inner pages) ── */
.page-hero {
  background: var(--navy); padding: 90px 0 84px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 80% at 105% -5%, rgba(198,40,40,0.24) 0%, transparent 52%);
}
.page-hero-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.page-hero .eyebrow { color: rgba(198,40,40,0.9); }
.page-hero h1 {
  font-size: clamp(38px, 5.5vw, 64px); font-weight: 900;
  letter-spacing: -0.03em; line-height: 1.04; color: #fff;
  max-width: 820px; margin-bottom: 20px;
}
.page-hero h1 em { font-style: normal; color: var(--red); }
.page-hero p { font-size: 18px; line-height: 1.65; color: #9FB0C0; max-width: 580px; margin-bottom: 32px; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { font-size: 13px; color: #9FB0C0; }

/* ── Stats row ── */
.stats-row {
  display: flex; border-bottom: 1px solid var(--gray-bdr);
  background: var(--white);
}
.stat { flex: 1; padding: 26px 20px; border-right: 1px solid var(--gray-bdr); }
.stat:last-child { border-right: none; }
.stat-n { font-size: 32px; font-weight: 900; letter-spacing: -0.025em; color: var(--navy); line-height: 1; }
.stat-n b { color: var(--red); font-weight: 900; }
.stat-l { font-size: 13px; font-weight: 600; color: var(--gray-dark); margin-top: 4px; }

/* ── Feature cards / grids ── */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cards-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
  background: var(--white); border: 1px solid var(--gray-bdr); border-radius: 14px;
  padding: 30px 26px; transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -20px rgba(10,37,64,0.18); }
.card-icon {
  width: 44px; height: 44px; border-radius: 10px; background: var(--navy);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.card-icon.red { background: var(--red); }
.card-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.card-body { font-size: 14px; line-height: 1.6; color: var(--gray-dark); }

/* ── Split layout ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-3-2 { grid-template-columns: 1.3fr 1fr; }
.split-reverse > *:first-child { order: 2; }
.split-reverse > *:last-child { order: 1; }

/* ── Checklist ── */
.check-list { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.check-item { display: flex; gap: 14px; align-items: flex-start; }
.check-icon {
  width: 24px; height: 24px; border-radius: 6px; background: var(--red);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.check-text strong { display: block; font-size: 15px; font-weight: 800; margin-bottom: 3px; }
.check-text p { font-size: 14px; color: var(--gray-dark); line-height: 1.55; }

/* ── Process rail ── */
.process-rail {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--gray-bdr); border-radius: 14px; overflow: hidden;
}
.step { padding: 34px 28px; border-right: 1px solid var(--gray-bdr); position: relative; }
.step:last-child { border-right: none; background: var(--navy); }
.step-n { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.step:last-child .step-n { color: rgba(198,40,40,0.75); }
.step-title { font-size: 18px; font-weight: 900; letter-spacing: -0.01em; margin-bottom: 8px; }
.step:last-child .step-title { color: #fff; }
.step-desc { font-size: 14px; line-height: 1.6; color: var(--gray-dark); }
.step:last-child .step-desc { color: var(--navy-soft); }
.step-arr {
  position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--gray-bdr);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: var(--red); z-index: 1;
}
.step:last-child .step-arr { display: none; }

/* ── Deliverables / includes grid ── */
.deliverables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.deliver-item {
  border: 1px solid var(--gray-bdr); border-radius: 12px; padding: 24px 22px;
  background: var(--gray-bg);
}
.deliver-icon { font-size: 22px; margin-bottom: 12px; }
.deliver-title { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.deliver-body { font-size: 13px; color: var(--gray-dark); line-height: 1.55; }

/* ── Results panel ── */
.results-panel {
  background: var(--navy); border-radius: 16px; padding: 40px;
  position: relative; overflow: hidden;
}
.results-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 80% at 100% 0%, rgba(198,40,40,0.2), transparent 60%);
}
.rp-inner { position: relative; }
.rp-label { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #7E91A6; margin-bottom: 24px; }
.rp-stat { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.rp-stat:last-of-type { border-bottom: none; margin-bottom: 22px; }
.rp-n { font-size: 40px; font-weight: 900; letter-spacing: -0.025em; color: var(--red); line-height: 1; margin-bottom: 4px; }
.rp-name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.rp-sub { font-size: 12px; color: var(--gray-mid); }

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq-item { border: 1px solid var(--gray-bdr); border-radius: 12px; overflow: hidden; }
.faq-q {
  padding: 20px 24px; font-size: 16px; font-weight: 800; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--white); transition: background 0.15s;
}
.faq-q:hover { background: var(--gray-bg); }
.faq-q .faq-icon { font-size: 18px; font-weight: 300; color: var(--red); flex-shrink: 0; transition: transform 0.2s; }
.faq-a { padding: 0 24px 20px; font-size: 15px; line-height: 1.65; color: var(--gray-dark); }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ── Testimonial ── */
.testi-card {
  background: var(--gray-bg); border-radius: 18px; padding: 52px 60px; text-align: center;
}
.testi-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 24px; color: var(--red); font-size: 20px; }
.testi-quote { font-size: clamp(17px, 2.2vw, 22px); font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; color: var(--navy); margin-bottom: 32px; }
.testi-author { display: flex; align-items: center; justify-content: center; gap: 14px; }
.author-av { width: 48px; height: 48px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; color: #fff; }
.author-name { font-size: 15px; font-weight: 800; }
.author-role { font-size: 13px; color: var(--gray-dark); }

/* ── CTA Banner ── */
.cta-banner {
  background: var(--red); padding: 88px 0;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,0.13), transparent 60%);
}
.cta-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 24px; text-align: center; }
.cta-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 18px; display: block; }
.cta-title { font-size: clamp(26px, 4vw, 46px); font-weight: 900; letter-spacing: -0.025em; color: #fff; max-width: 680px; margin: 0 auto 18px; line-height: 1.12; }
.cta-sub { font-size: 17px; color: rgba(255,255,255,0.8); margin-bottom: 34px; }

/* ── Footer ── */
footer { background: var(--navy); padding: 72px 0 40px; }
.footer-grid { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.2fr 0.7fr 0.7fr 2.2fr; gap: 40px; }
.footer-tagline { font-size: 14px; line-height: 1.65; color: var(--navy-soft); max-width: 230px; margin: 14px 0 20px; }
.footer-contact { font-size: 14px; color: var(--gray-mid); line-height: 1.8; }
.footer-col h4 { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-mid); margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { text-decoration: none; font-size: 14px; font-weight: 600; color: #C3CEDA; transition: color 0.15s; }
.footer-col a:hover { color: #fff; }
/* Industries — three explicit <ul> lists (8/8/9 items) placed side by side,
   rather than a browser-auto-balanced multi-column block. That keeps the
   split exactly as authored instead of letting the browser redistribute
   items by height. Stacks to one column on narrow phones (480px query),
   where the three lists just run one after another in the same reading
   order. The footer-grid column weights above give this cell extra width
   (2.2fr) since it's the one holding a 3-way split, while Services/Company
   only need a single narrow column each. */
.footer-industries-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.footer-bottom {
  max-width: 1180px; margin: 46px auto 0; padding: 22px 24px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--gray-mid); flex-wrap: wrap; gap: 12px;
}
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { color: var(--gray-mid); text-decoration: none; font-size: 13px; transition: color 0.15s; }
.footer-legal a:hover { color: #fff; }

/* ── Pricing cards ── */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* 4-up pricing grid — used on pricing.php and every /industries/ page's
   one-time vs. monthly package tables. Collapses 4 → 2 → 1 columns so
   individual .pricing-card panels never get squeezed unreadably thin. */
.pricing-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1100px) { .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pricing-grid-4 { grid-template-columns: 1fr; } }
.pricing-card { border: 1px solid var(--gray-bdr); border-radius: 16px; padding: 34px 30px; background: var(--white); }
.pricing-card.featured { background: var(--navy); border-color: var(--navy); }
.pricing-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; display: block; }
.pricing-card.featured .pricing-badge { color: var(--navy-soft); }
.pricing-name { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.pricing-card.featured .pricing-name { color: #fff; }
.pricing-price { font-size: 42px; font-weight: 900; letter-spacing: -0.025em; color: var(--navy); line-height: 1; margin-bottom: 4px; }
.pricing-card.featured .pricing-price { color: #fff; }
.pricing-price sup { font-size: 22px; vertical-align: top; margin-top: 8px; margin-right: 2px; }
.pricing-period { font-size: 13px; color: var(--gray-dark); margin-bottom: 28px; }
.pricing-card.featured .pricing-period { color: var(--navy-soft); }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.pricing-features li { font-size: 14px; color: var(--gray-dark); display: flex; gap: 10px; align-items: flex-start; }
.pricing-card.featured .pricing-features li { color: var(--navy-soft); }
.pricing-features li::before { content: '✓'; color: var(--red); font-weight: 900; flex-shrink: 0; }

/* ── Blog / Insights ── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { border: 1px solid var(--gray-bdr); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(10,37,64,0.15); }
.blog-thumb { height: 200px; background: var(--gray-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.blog-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.blog-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.blog-title { font-size: 17px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; flex: 1; }
.blog-excerpt { font-size: 14px; color: var(--gray-dark); line-height: 1.6; margin-bottom: 16px; }
.blog-meta { font-size: 12px; color: var(--gray-mid); font-weight: 600; }

/* ── Industry page specifics ── */
.ind-pain { background: var(--gray-bg); border-left: 3px solid var(--red); border-radius: 0 12px 12px 0; padding: 20px 22px; margin-bottom: 14px; }
.ind-pain-title { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.ind-pain-body { font-size: 13px; color: var(--gray-dark); line-height: 1.55; }

/* ── Breadcrumb ── */
.breadcrumb { max-width: 1180px; margin: 0 auto; padding: 18px 24px 0; display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--gray-mid); }
.breadcrumb a { color: var(--gray-mid); text-decoration: none; transition: color 0.15s; }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb span { color: var(--gray-mid); }

/* ── Responsive ── */
@media (max-width: 960px) {
  .cards-grid-4 { grid-template-columns: 1fr 1fr; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .process-rail { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split-reverse > *:first-child { order: 0; }
  .split-reverse > *:last-child { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .stats-row { flex-wrap: wrap; }
  .stat { flex: 1 0 calc(33.33% - 1px); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .deliverables { grid-template-columns: 1fr 1fr; }

  /* Nav becomes a hamburger-driven dropdown below this width — with up to
     six links plus the CTA, the full row no longer fits without wrapping. */
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--gray-bdr);
    box-shadow: 0 16px 32px -16px rgba(10,37,64,0.25);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.25s ease, visibility 0.25s;
  }
  .nav-toggle-input:checked ~ .nav-links {
    max-height: calc(100vh - 68px); overflow-y: auto; visibility: visible;
  }
  .nav-links a { display: block; padding: 15px 24px; border-radius: 0; }
  .nav-links a:hover, .nav-links a.active { background: var(--gray-bg); }

  /* The nav-cta button doesn't fit cleanly next to the logo and hamburger at
     this width — hide it there and show the centered bar under the header. */
  .nav-cta { display: none; }
  .mobile-cta-bar {
    display: flex; justify-content: center;
    padding: 14px 20px; background: var(--white);
    border-bottom: 1px solid var(--gray-bdr);
  }
  .mobile-cta-bar .btn-red { padding: 12px 28px; font-size: 15px; }
}
@media (max-width: 680px) {
  .section { padding: 72px 0; }
  .cards-grid { grid-template-columns: 1fr; }
  .cards-grid-4 { grid-template-columns: 1fr; }
  .cards-grid-2 { grid-template-columns: 1fr; }
  .process-rail { grid-template-columns: 1fr; }
  .process-rail .step { border-right: none; border-bottom: 1px solid var(--gray-bdr); }
  .step-arr { display: none !important; }
  .footer-grid { grid-template-columns: 1fr; }
  .testi-card { padding: 36px 24px; }
  .stats-row { display: grid; grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--gray-bdr); }
  .blog-grid { grid-template-columns: 1fr; }
  .deliverables { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Tighten the nav row so logo + hamburger always fit on one line down to
     the narrowest phones (nav-cta is already hidden here — see 960px above). */
  .nav-inner { padding: 0 16px; gap: 6px; }
  .logo-text { font-size: 15px; }
  .logo-mark { width: 32px; height: 26px; }
}
@media (max-width: 480px) {
  /* Below this, three columns of industry names (e.g. "Architects & Design")
     start wrapping onto multiple lines each — one column reads better. The
     three <ul> lists just stack in order, so this still reads top-to-bottom
     exactly like the original single list (items 1-8, then 9-16, then 17-25). */
  .footer-industries-cols { grid-template-columns: 1fr; }
}