/* =====================================================
   SEO Toronto Pro — recreation styled to match the original
   Brand: navy #2b2d56  +  orange #ff9b00
   ===================================================== */

:root {
  --c-text: #2b2d56;
  --c-muted: #6b7196;
  --c-bg: #f5f5f5;            /* page background — light gray as on the original */
  --c-bg-alt: #ffffff;        /* white sections */
  --c-bg-soft: #fafafa;
  --c-border: #e5e7ef;
  --c-primary: #2b2d56;
  --c-primary-dark: #1f2147;
  --c-accent: #ff9b00;
  --c-accent-light: #ffb84d;
  --c-accent-dark: #e88a00;
  --c-success: #16a34a;
  --shadow-sm: 0 4px 14px rgba(43, 45, 86, .07);
  --shadow-md: 0 14px 36px rgba(43, 45, 86, .10);
  --shadow-orange: 0 14px 30px rgba(255, 155, 0, .35);
  --grad-orange: linear-gradient(135deg, #ffb347 0%, #ff9b00 100%);
  --radius: 12px;
  --radius-lg: 22px;
  --container: 1200px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Poppins', var(--font);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-accent-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-text);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -.005em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1em; color: var(--c-muted); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.skip-link { position: absolute; left: -9999px; top: 0; background: #000; color: #fff; padding: 8px 12px; z-index: 10000; }
.skip-link:focus { left: 12px; top: 12px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .01em; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer; border: 0; line-height: 1; white-space: nowrap;
}
.btn-primary {
  color: #fff;
  background: var(--grad-orange);
  box-shadow: var(--shadow-orange);
}
.btn-primary:hover { transform: translateY(-2px); color: #fff; background: linear-gradient(135deg,#ffa733,#ff8800); }
.btn-light {
  color: var(--c-text); background: #fff;
  border: 1px solid var(--c-border);
  box-shadow: 0 6px 18px rgba(43,45,86,.06);
}
.btn-light:hover { color: var(--c-accent-dark); border-color: var(--c-accent); }
.btn-dark {
  color: #fff; background: var(--c-primary);
}
.btn-dark:hover { color: #fff; background: var(--c-primary-dark); transform: translateY(-2px); }
.btn-wide { width: 100%; padding: 16px 24px; }

/* ===== Page-hero wrapper (header + hero share one bg + decoration) ===== */
.page-hero {
  position: relative;
  background: var(--c-bg);
  overflow: hidden;
}
.page-hero::before, .page-hero::after {
  content: ''; position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 80px solid #ececec;
  opacity: .55;
  z-index: 0; pointer-events: none;
}
.page-hero::before { top: -140px; right: -140px; }
.page-hero::after { bottom: -140px; left: -140px; }

/* ===== Header ===== */
.site-header {
  position: relative; z-index: 5;
  background: transparent;
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  height: 92px;
}
.logo { display: inline-flex; align-items: center; }
.logo img { height: 48px; width: auto; }

.primary-nav { margin-left: auto; }
.primary-nav > ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 4px;
}
.primary-nav a {
  display: inline-block; padding: 10px 16px; border-radius: 8px;
  color: var(--c-text); font-weight: 500; font-size: .95rem;
}
.primary-nav a:hover { color: var(--c-accent-dark); }
.primary-nav .has-sub { position: relative; }
.primary-nav .has-sub > a::after {
  content: ''; display: inline-block; width: 5px; height: 5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-left: 6px; vertical-align: 3px;
}
.primary-nav { position: relative; }
.primary-nav .has-sub ul {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 8px; list-style: none; margin: 0;
  /* Transparent 8px strip above the panel keeps the cursor inside the
     hover zone while crossing from the parent link to the submenu. */
  border-top: 8px solid transparent; background-clip: padding-box;
  display: none;
}
/* Desktop-only — on mobile, the JS-injected button controls .open class. */
@media (min-width: 821px) {
  .primary-nav .has-sub:hover > ul,
  .primary-nav .has-sub:focus-within > ul { display: block; }
}
.primary-nav .has-sub ul a {
  display: block; padding: 10px 12px; border-radius: 8px; font-size: .9rem;
}
.primary-nav .has-sub ul a.sub-all {
  margin-top: 4px; border-top: 1px solid var(--c-border);
  padding-top: 12px; color: var(--c-accent); font-weight: 600;
}

.header-cta { margin-left: 8px; padding: 12px 26px; }

.menu-toggle {
  margin-left: auto; display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0;
  flex-direction: column; gap: 5px; align-items: center; justify-content: center;
  cursor: pointer;
}
.menu-toggle span {
  display: block; width: 24px; height: 2px; background: var(--c-text); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero {
  position: relative;
  background: transparent;
  padding: 50px 0 90px;
  /* Uniform vertical size on every page (50 + 480 image-box + 90 = 620). */
  min-height: 620px;
  display: flex;
  align-items: center;
}
/* Text-only heroes (Contact, Privacy, Terms) — no image, so much shorter.
   Bottom padding is bigger to leave room for the next section's wave (70px). */
.hero.hero-narrow {
  min-height: 0;
  padding: 40px 0 100px;
}
.hero > .container { width: 100%; }
.hero .container { position: relative; z-index: 1; }

.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center;
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-display); font-weight: 600;
  color: var(--c-accent);
  letter-spacing: .02em; font-size: .95rem; margin: 0 0 14px;
}
.eyebrow.center { display: block; text-align: center; }
.hero h1 {
  color: var(--c-text);
  max-width: 580px;
}
.hero .lead { font-size: 1rem; max-width: 480px; color: var(--c-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

.hero-art { display: flex; justify-content: flex-end; }
/* Fixed visual box so every page renders the hero image at the same size,
   regardless of the source file's aspect ratio. */
.hero-art img {
  width: 480px; height: 480px; max-width: 100%;
  object-fit: contain; margin-left: auto;
}

.floaty { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ===== Wave divider — appears at the TOP of a section, "intruding"
   upward into the previous section. Fill matches the SECTION'S OWN bg,
   so visually the section has soft mountain peaks rising into the
   previous one. ===== */
[class*="wave-top-"] { position: relative; }
[class*="wave-top-"]::before {
  content: ''; position: absolute; left: 0; right: 0;
  bottom: 100%;
  height: 70px;
  /* The SVG paths have fills at the top of the viewBox; flip vertically
     so the section's color rises with peaks pointing UP into the
     previous section (Elementor "mountains" default). */
  transform: scaleY(-1);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 100%;
  pointer-events: none; z-index: 1;
}
.wave-top-white::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path fill='%23ffffff' opacity='.35' d='M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z'/><path fill='%23ffffff' opacity='.7' d='M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z'/><path fill='%23ffffff' d='M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z'/></svg>");
}
.wave-top-gray::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path fill='%23f5f5f5' opacity='.35' d='M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z'/><path fill='%23f5f5f5' opacity='.7' d='M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z'/><path fill='%23f5f5f5' d='M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z'/></svg>");
}

/* ===== Trusted ===== */
.trusted {
  background: #fff;
  /* Bottom padding = top + next-section wave height (70px desktop) so the
     visible white above and below the logos reads as equal once the next
     section's wave overlays the bottom. */
  padding: 60px 0 130px;
}
.trusted-text {
  text-align: center; color: var(--c-text);
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 32px;
}
.trusted-text strong { color: var(--c-accent); font-weight: 700; }
.trusted-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 36px; align-items: center;
}
.trusted-row a, .trusted-row > img { display: flex; align-items: center; justify-content: center; }
.trusted-row img {
  max-height: 50px; width: auto; max-width: 100%;
  margin: 0 auto;
  transition: transform .25s ease;
}
.trusted-row a:hover img,
.trusted-row > img:hover { transform: scale(1.15); }

/* ===== Services ===== */
.services { padding: 130px 0 120px; background: var(--c-bg); position: relative; }
.section-title { text-align: center; max-width: 760px; margin: 0 auto .35em; color: var(--c-text); }
.section-title.left { text-align: left; max-width: none; margin-left: 0; }
.section-lead { text-align: center; max-width: 640px; margin: 0 auto 60px; color: var(--c-muted); }

.service-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.service-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--c-accent);
  padding: 33px 28px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-card .service-icon {
  width: 170px; height: 170px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.service-card .service-icon img { max-width: 100%; max-height: 100%; }
.service-card h3 { color: var(--c-text); margin-bottom: 12px; }
.service-card p { font-size: .95rem; }
.card-link {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 14px;
  padding: 11px 26px; border-radius: 999px;
  background: var(--grad-orange); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  box-shadow: 0 8px 18px rgba(255,155,0,.32);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-link:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 22px rgba(255,155,0,.4); }
.card-link span { transition: transform .2s ease; }
.card-link:hover span { transform: translateX(4px); }

/* ===== Grow ===== */
.grow {
  background: #fff;
  padding: 130px 0 110px;
  position: relative;
}
.grow-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.grow-art img { width: 100%; height: auto; max-width: 520px; }
.checklist { list-style: none; padding: 0; margin: 24px 0 0; }
.checklist li {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0;
  font-weight: 500; color: var(--c-text);
}
.checklist li::before {
  content: ''; flex: none;
  width: 22px; height: 22px; border-radius: 999px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5 9-11' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/70% no-repeat,
    var(--grad-orange);
  box-shadow: 0 4px 10px rgba(255,155,0,.35);
}

/* ===== Stats — 4 white cards with orange numbers ===== */
.stats {
  background: var(--c-bg);
  padding: 120px 0 110px;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.stat {
  background: #fff;
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--c-accent);
  padding: 29px 22px 28px;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-icon {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.stat-icon img, .stat-icon svg { max-width: 60px; max-height: 60px; }
.stat-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--c-accent);
}
.stat-value::after { content: '+'; color: var(--c-accent); }
/* Section bg overrides — strict white/gray alternation site-wide */
.bg-white, .case-bg-white { background: #fff !important; }
.bg-gray,  .case-bg-gray  { background: var(--c-bg) !important; }
/* Case study stats render exact figures — no '+' suffix even when default bg is restored */
.case-stats .stat-value::after { content: none; }

/* ===== Pricing tiers ===== */
.pricing { padding: 130px 0 110px; position: relative; }
.pricing-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 40px;
}
.pricing-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden;
  position: relative; transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pricing-card.is-hit { border-color: var(--c-accent); box-shadow: 0 8px 24px rgba(255,155,0,.12); }
/* "Hit" corner ribbon — clean triangular flag in the top-right corner */
.pricing-card .hit-badge {
  position: absolute; top: 0; right: 0;
  width: 78px; height: 78px;
  pointer-events: none;
  font-size: 0; line-height: 0;
}
.pricing-card .hit-badge::before {
  content: '';
  position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 78px 78px 0;
  border-color: transparent var(--c-accent) transparent transparent;
}
.pricing-card .hit-badge::after {
  content: 'HIT';
  position: absolute; top: 14px; right: 6px;
  color: #fff; font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  transform: rotate(45deg); transform-origin: center;
  width: 38px; text-align: center; line-height: 1;
}
.pricing-head {
  background: var(--c-primary); color: #fff;
  padding: 22px 18px 18px; text-align: center;
}
.pricing-head h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  color: #fff; margin: 0 0 4px;
}
.pricing-head p { color: rgba(255,255,255,.78); font-size: .82rem; margin: 0; }
.pricing-price {
  text-align: center; padding: 24px 16px 18px;
  font-family: var(--font-display);
}
.pricing-price .currency { font-size: .9rem; color: var(--c-muted); vertical-align: top; }
.pricing-price .amount { font-size: 2.6rem; font-weight: 800; color: var(--c-text); }
.pricing-price .per { font-size: .85rem; color: var(--c-muted); display: block; margin-top: 2px; }
.pricing-features {
  list-style: none; padding: 0 18px 18px; margin: 0;
  font-size: .85rem; color: var(--c-text); flex: 1;
}
.pricing-features li {
  padding: 7px 0 7px 26px; position: relative; line-height: 1.45;
  border-bottom: 1px solid var(--c-border);
}
.pricing-features li:last-child { border-bottom: 0; }
.pricing-features li.included-prev {
  font-weight: 600; color: var(--c-accent);
  padding-left: 0;
}
.pricing-features li:not(.included-prev)::before {
  content: ''; position: absolute; left: 4px; top: 11px;
  width: 14px; height: 14px;
  border-radius: 50%; border: 1.5px solid var(--c-success);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 13 10 18 19 7'/></svg>");
  background-size: 10px 10px; background-position: center; background-repeat: no-repeat;
}
.pricing-cta { padding: 0 18px 18px; }
.pricing-cta .btn { width: 100%; padding: 12px 16px; }
.pricing-best {
  text-align: center; padding: 14px 18px 22px; font-size: .8rem;
  color: var(--c-muted); font-style: italic;
}
.pricing-grid.is-two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 920px; margin-left: auto; margin-right: auto;
}
.pricing-price.is-quote .amount { font-size: 1.7rem; line-height: 1.2; }
.pricing-features li strong { color: var(--c-text); font-weight: 700; }
.pricing-benefits {
  list-style: disc; padding: 0 18px 14px 38px; margin: 0;
  font-size: .85rem; color: var(--c-text);
}
.pricing-benefits-title {
  text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; color: var(--c-text); margin: 6px 18px 8px;
}
.pricing-benefits li { padding: 4px 0; line-height: 1.45; }
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-grid.is-two { grid-template-columns: 1fr; }
}
.stat-label {
  font-family: var(--font-display); font-weight: 500;
  margin-top: 8px; color: var(--c-text);
  font-size: .95rem;
}

/* ===== Why ===== */
.why { padding: 130px 0 110px; background: #fff; position: relative; }
.why-grid {
  display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 30px; align-items: center;
  margin-top: 40px;
}
.why-col { display: grid; gap: 30px; }
.why-card {
  text-align: center;
  padding: 10px 8px;
}
.why-icon {
  width: 110px; height: 110px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.why-icon img { max-width: 100%; max-height: 100%; }
.why-card h4 { color: var(--c-text); margin-bottom: 8px; }
.why-card p { font-size: .92rem; color: var(--c-muted); }
.why-center img { width: 100%; height: auto; max-width: 460px; margin: 0 auto; }

/* ===== Industries (homepage hub linking to industry landing pages) ===== */
.industries {
  background: var(--c-bg); padding: 130px 0 110px; position: relative;
}
.industries-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; margin-top: 44px;
}
.industry-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px 18px;
  background: #fff; border: 1px solid var(--c-border); border-radius: 14px;
  color: var(--c-text);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.industry-card img {
  width: 80px; height: 80px; margin-bottom: 14px;
  object-fit: contain;
}
.industry-card h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  margin: 0 0 6px; color: var(--c-text);
  transition: color .2s ease;
}
.industry-card p {
  margin: 0; font-size: .85rem; line-height: 1.45; color: var(--c-muted);
}
.industry-card:hover {
  border-color: var(--c-accent); transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.industry-card:hover h4 { color: var(--c-accent-dark); }

/* ===== Process / How we work ===== */
.process {
  background: var(--c-bg); padding: 130px 0 110px; position: relative;
}
.process-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; margin-top: 50px;
}
.process-step {
  background: #fff; border: 1px solid var(--c-border); border-radius: 14px;
  padding: 24px 20px; text-align: center;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--c-accent); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  border-radius: 50%;
  margin-bottom: 14px;
  font-size: 1rem;
  box-shadow: var(--shadow-orange);
}
.process-step h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  margin: 0 0 8px; color: var(--c-text);
}
.process-step p {
  font-size: .85rem; color: var(--c-muted); line-height: 1.5; margin: 0;
}

/* ===== FAQ ===== */
.faq {
  background: #fff; padding: 130px 0 110px; position: relative;
}
.faq-list {
  max-width: 800px; margin: 50px auto 0;
  display: grid; gap: 12px;
}
.faq-item {
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 12px;
  overflow: hidden;
}
.faq-item summary {
  padding: 18px 22px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--c-text);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.6rem; line-height: 1;
  color: var(--c-accent); font-weight: 400; flex: none;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p {
  padding: 0 22px 18px; margin: 0;
  color: var(--c-muted); line-height: 1.6; font-size: .95rem;
}

/* ===== Case Studies ===== */
.case-summary {
  margin-bottom: 28px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.case-summary:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-accent);
}
.case-link {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px;
  color: var(--c-text);
}
.case-logo {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg);
  border-radius: 12px;
  padding: 24px;
  min-height: 120px;
}
.case-logo img { max-width: 100%; max-height: 80px; width: auto; height: auto; }
.case-content h2 {
  margin: 0 0 10px; font-size: 1.5rem; color: var(--c-text);
}
.case-content .case-summary-lead {
  margin: 0 0 14px; color: var(--c-muted); font-size: .95rem; line-height: 1.5;
}
.case-metrics {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-wrap: wrap; gap: 18px;
}
.case-metrics li {
  font-size: .9rem; color: var(--c-text);
}
.case-metrics strong {
  color: var(--c-accent); font-weight: 700; font-size: 1.05rem;
}

.case-overview-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 40px;
}
.case-overview-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: 12px; padding: 22px;
}
.case-overview-card h4 {
  margin: 0 0 8px; color: var(--c-accent); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.case-overview-card p { margin: 0; color: var(--c-text); font-size: .95rem; line-height: 1.5; }

.case-issues {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: grid; gap: 12px;
}
.case-issues li {
  padding: 14px 18px; padding-left: 44px; position: relative;
  background: #fff; border-left: 4px solid #ff5050;
  border-radius: 6px;
  color: var(--c-text);
}
.case-issues li::before {
  content: '\2715'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: #ff5050; font-weight: 700;
}

@media (max-width: 820px) {
  .case-link { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .case-logo { min-height: 100px; }
  .case-content h2 { font-size: 1.25rem; }
  .case-overview-grid { grid-template-columns: 1fr; }
}

/* ===== Cities served (industry × city link grid) ===== */
.cities {
  background: var(--c-bg); padding: 130px 0 110px; position: relative;
}
.cities-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; margin-top: 40px;
}
.cities-grid a {
  display: block; padding: 18px 20px; text-align: center;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--c-text); transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.cities-grid a:hover {
  border-color: var(--c-accent); color: var(--c-accent-dark);
  transform: translateY(-2px);
}

/* ===== Contact ===== */
.contact {
  background: var(--c-bg);
  padding: 130px 0 130px;
  position: relative;
}
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center;
}
.contact-art img { width: 100%; height: auto; max-width: 460px; margin: 0 auto; }
.contact-form { display: grid; gap: 14px; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input,
.contact-form textarea {
  width: 100%; padding: 14px 18px; font: inherit; color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: 10px;
  background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(255,155,0,.16);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.form-status { margin: 0; font-size: .9rem; }
.form-status.ok { color: var(--c-success); }
.form-status.err { color: #ef4444; }

/* ===== Footer ===== */
.site-footer {
  background: #2b2d56;
  color: #b9bdd6;
  padding: 70px 0 0;
  position: relative;
}
.site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 90px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path fill='%232b2d56' opacity='.33' d='M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z'/><path fill='%232b2d56' opacity='.66' d='M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z'/><path fill='%232b2d56' d='M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z'/></svg>") bottom center / 100% 100% no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}
.site-footer h5 {
  color: #fff; font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; margin-bottom: 18px;
}
.site-footer p { color: #b9bdd6; font-size: .92rem; }
.site-footer a { color: #b9bdd6; }
.site-footer a:hover { color: var(--c-accent); }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px;
  padding-bottom: 50px;
}
.site-footer .logo { margin-bottom: 16px; }
.site-footer .logo img { height: 44px; width: auto; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 12px; font-size: .92rem; line-height: 1.5; }

.footer-col ul:not(.contact-list):not(.socials) li {
  position: relative; padding-left: 18px;
}
.footer-col ul:not(.contact-list):not(.socials) li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent);
}

.contact-list li, .socials li {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.contact-list .ico, .socials .ico {
  flex: none;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-accent);
}
.contact-list .ico svg, .socials .ico svg { width: 16px; height: 16px; display: block; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 0;
  text-align: center;
}
.footer-bottom p { margin: 0; color: #98a0c0; font-size: .88rem; }

/* ===== Back to top ===== */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  background: var(--grad-orange);
  color: #fff; border-radius: 999px;
  box-shadow: var(--shadow-orange);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: linear-gradient(135deg,#ffa733,#ff8800); transform: translateY(-3px); }

/* ===== Active nav state ===== */
.primary-nav a.active { color: var(--c-accent-dark); }

/* Submenu toggle button — JS-injected, visible only on mobile */
.submenu-toggle { display: none; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hero { min-height: 0; display: block; }
  .hero-art img { width: 100%; height: auto; max-width: 480px; }
  .hero-grid, .grow-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art, .grow-art, .contact-art { order: 2; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-center { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trusted-row { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cities-grid { grid-template-columns: repeat(3, 1fr); }
  .industries-grid { grid-template-columns: repeat(3, 1fr); }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .menu-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .primary-nav {
    position: absolute; top: 92px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-md);
    padding: 8px 0 16px;
    display: none; max-height: calc(100vh - 92px); overflow-y: auto;
  }
  .primary-nav.open { display: block; }
  body.nav-open { overflow: hidden; }

  .primary-nav > ul { flex-direction: column; gap: 0; }
  .primary-nav > ul > li {
    border-bottom: 1px solid var(--c-border);
    position: relative;
  }
  .primary-nav > ul > li:last-child { border-bottom: 0; }

  /* Top-level item — bigger touch target. Right padding leaves room for the
     submenu toggle button. */
  .primary-nav > ul > li > a {
    display: block;
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
  }
  .primary-nav > ul > li.has-sub > a {
    padding-right: 72px;
  }
  .primary-nav > ul > li > a.active {
    color: var(--c-accent-dark);
    background: var(--c-bg);
  }

  /* Hide the desktop ::after chevron — the explicit toggle button replaces it on mobile */
  .primary-nav .has-sub > a::after { display: none; }

  /* Submenu toggle button — explicit tap target separated from the link */
  .submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--c-border);
    color: var(--c-text);
    cursor: pointer;
  }
  .submenu-toggle::after {
    content: '';
    display: block;
    width: 9px; height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
    margin-top: -3px;
  }
  .has-sub.open > .submenu-toggle::after {
    transform: rotate(225deg);
    margin-top: 3px;
  }
  .submenu-toggle:active {
    background: var(--c-bg);
  }

  /* Submenus — collapsed by default, expand only when parent .open */
  .primary-nav .has-sub > ul {
    position: static; box-shadow: none; border: 0;
    padding: 0; margin: 0;
    display: none;
    background: var(--c-bg);
  }
  .primary-nav .has-sub.open > ul { display: block; }

  /* Submenu items */
  .primary-nav .has-sub > ul > li > a {
    display: block;
    padding: 12px 20px 12px 32px;
    font-size: .95rem;
    color: var(--c-text);
    border-top: 1px solid #e8e8ec;
  }
  .primary-nav .has-sub > ul > li > a:hover,
  .primary-nav .has-sub > ul > li > a.active {
    color: var(--c-accent-dark);
    background: rgba(255, 155, 0, 0.06);
  }
  .primary-nav .has-sub > ul > li > a.sub-all {
    font-weight: 600; color: var(--c-accent);
    border-top: 2px solid var(--c-border);
  }

  .service-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .cities-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .industries-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-form .row { grid-template-columns: 1fr; }
  /* Vertical padding kept generous so the bigger mobile waves
     never overlap section content (wave-top is 110px, footer wave 130px). */
  .hero { padding: 40px 0 130px; }
  .trusted { padding: 40px 0 150px; }
  .services, .grow, .why, .stats { padding: 130px 0 130px; }
  .contact { padding: 130px 0 150px; }
  .need, .stages { padding: 130px 0 130px; }
}

@media (max-width: 480px) {
  .trusted-row { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ===== Wave height scales up on smaller screens so peaks
   don't look squished against the narrow viewport. ===== */
@media (max-width: 1024px) {
  [class*="wave-top-"]::before { height: 90px; }
  .site-footer::before { height: 110px; }
}
@media (max-width: 600px) {
  [class*="wave-top-"]::before { height: 110px; }
  .site-footer::before { height: 130px; }
  /* Three multi-peak ridges. Different hump COUNT per layer (3/4/5) plus
     different baseline + amplitude guarantees peaks never align — back
     layers peek above the front across the whole width, not only at the
     right edge. Front layer has the smallest amplitude, so the taller
     translucent back layers always poke out somewhere. */
  .wave-top-white::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path opacity='.3' fill='%23ffffff' d='M0,70 Q166,100 333,70 Q500,100 666,70 Q833,100 1000,70 V0 H0 Z'/><path opacity='.55' fill='%23ffffff' d='M0,60 Q125,90 250,60 Q375,90 500,60 Q625,90 750,60 Q875,90 1000,60 V0 H0 Z'/><path fill='%23ffffff' d='M0,55 Q100,75 200,55 Q300,75 400,55 Q500,75 600,55 Q700,75 800,55 Q900,75 1000,55 V0 H0 Z'/></svg>");
  }
  .wave-top-gray::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path opacity='.3' fill='%23f5f5f5' d='M0,70 Q166,100 333,70 Q500,100 666,70 Q833,100 1000,70 V0 H0 Z'/><path opacity='.55' fill='%23f5f5f5' d='M0,60 Q125,90 250,60 Q375,90 500,60 Q625,90 750,60 Q875,90 1000,60 V0 H0 Z'/><path fill='%23f5f5f5' d='M0,55 Q100,75 200,55 Q300,75 400,55 Q500,75 600,55 Q700,75 800,55 Q900,75 1000,55 V0 H0 Z'/></svg>");
  }
  .site-footer::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path opacity='.3' fill='%232b2d56' d='M0,70 Q166,100 333,70 Q500,100 666,70 Q833,100 1000,70 V0 H0 Z'/><path opacity='.55' fill='%232b2d56' d='M0,60 Q125,90 250,60 Q375,90 500,60 Q625,90 750,60 Q875,90 1000,60 V0 H0 Z'/><path fill='%232b2d56' d='M0,55 Q100,75 200,55 Q300,75 400,55 Q500,75 600,55 Q700,75 800,55 Q900,75 1000,55 V0 H0 Z'/></svg>");
  }
}

/* ===== Service sub-pages ===== */
.need {
  background: var(--c-bg);
  padding: 130px 0 110px;
  position: relative;
}
.check-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 36px;
  margin-top: 40px;
}
.check-item {
  display: flex; gap: 16px; align-items: flex-start;
}
.check-icon {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-accent);
}
.check-item h4 {
  margin: 4px 0 6px;
  color: var(--c-text);
  font-size: 1.05rem;
}
.check-item p {
  margin: 0;
  font-size: .92rem;
  color: var(--c-muted);
  line-height: 1.55;
}

.stages {
  background: #fff;
  padding: 130px 0 110px;
  position: relative;
}
.stage-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px;
  margin-top: 40px;
}
.stage-card {
  text-align: center;
  padding: 12px 12px 20px;
}
.stage-icon {
  width: 200px; height: 200px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.stage-icon img { max-width: 100%; max-height: 100%; }
.stage-card h4 {
  color: var(--c-text);
  margin-bottom: 10px;
  font-size: 1.1rem;
}
.stage-card p {
  color: var(--c-muted);
  font-size: .95rem;
}
.stage-outro {
  text-align: center;
  max-width: 800px;
  margin: 50px auto 0;
  color: var(--c-muted);
  font-size: 1rem;
}

@media (max-width: 1024px) {
  .check-grid { grid-template-columns: repeat(2, 1fr); }
  .stage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .check-grid { grid-template-columns: 1fr; }
  .stage-grid { grid-template-columns: 1fr; }
  .stage-icon { width: 160px; height: 160px; }
}

/* ===== Pricing tables ===== */
.pricing { background: var(--c-bg); padding: 130px 0 130px; }
.pricing .section-lead { margin-bottom: 60px; }
.price-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  align-items: stretch;
}
.price-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 26px 28px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card.featured {
  border: 2px solid var(--c-accent);
}
.price-card.featured .ribbon {
  position: absolute; top: 14px; right: -6px;
  background: var(--c-accent); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  padding: 6px 14px; border-radius: 4px 0 0 4px;
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
}
.price-card.featured .ribbon::after {
  content: ''; position: absolute; right: 0; bottom: -6px;
  border: 3px solid transparent; border-top-color: var(--c-accent-dark); border-right-color: var(--c-accent-dark);
}
.price-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.4rem; color: var(--c-text); margin-bottom: 4px;
}
.price-sub {
  font-size: .85rem; color: var(--c-muted); margin-bottom: 18px;
  display: block; min-height: 2.4em;
}
.price-amount {
  font-family: var(--font-display); font-weight: 800;
  color: var(--c-accent);
  font-size: 2.4rem; line-height: 1;
  margin-bottom: 18px;
}
.price-amount .currency { font-size: 1.1rem; vertical-align: top; margin-right: 4px; color: var(--c-text); }
.price-amount .period { font-size: .9rem; color: var(--c-muted); font-weight: 500; }
.price-features {
  list-style: none; padding: 0; margin: 0 0 24px;
  flex: 1;
}
.price-features li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0;
  font-size: .9rem; color: var(--c-text);
  border-bottom: 1px dashed var(--c-border);
}
.price-features li:last-child { border-bottom: 0; }
.price-features li::before {
  content: ''; flex: none;
  width: 16px; height: 16px; margin-top: 3px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5 9-11' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/70% no-repeat,
    var(--c-accent);
  border-radius: 50%;
}
.price-features li.heading {
  font-weight: 700; color: var(--c-text); border-bottom: 0;
  padding-top: 4px;
}
.price-features li.heading::before {
  background: none;
  border-radius: 0;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6 L15 12 L9 18' fill='none' stroke='%23ff9b00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/100% no-repeat;
}
.price-cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 22px;
  border-radius: 999px;
  background: var(--grad-orange); color: #fff;
  font-family: var(--font-display); font-weight: 600;
  box-shadow: var(--shadow-orange);
  text-align: center;
  transition: transform .2s ease;
}
.price-cta:hover { color: #fff; transform: translateY(-2px); }
.price-info {
  margin: 16px 0 0; font-size: .82rem; color: var(--c-muted);
  text-align: center; line-height: 1.5;
}

@media (max-width: 1100px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; } }

/* ===== FAQ accordion (uses native <details>) ===== */
.faq { background: #fff; padding: 130px 0 110px; }
.faq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px;
  margin-top: 40px;
}
.faq-item {
  background: var(--c-bg);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display); font-weight: 600;
  color: var(--c-text); font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-accent); color: #fff;
  border-radius: 50%;
  font-weight: 700; font-size: 1.1rem;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer {
  padding: 0 20px 18px;
  color: var(--c-muted);
  font-size: .95rem;
}

@media (max-width: 820px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq, .pricing { padding: 130px 0 130px; }
}

/* ===== Contact page cards ===== */
.contact-cards {
  background: #fff;
  padding: 50px 0 70px;
}
.contact-cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 40px;
}
.contact-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  padding: 36px 28px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Soften the orange button shadow inside cards so it doesn't bleed past the card edge */
.contact-card .btn-primary {
  box-shadow: 0 4px 10px rgba(255, 155, 0, .22);
}
.contact-card-icon {
  width: 86px; height: 86px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.contact-card-icon img { max-width: 100%; max-height: 100%; }
.contact-card h4 { color: var(--c-text); margin-bottom: 12px; font-size: 1.15rem; }
.contact-card p, .contact-card a { color: var(--c-muted); font-size: .95rem; }
.contact-card a:hover { color: var(--c-accent-dark); }

.map-wrap {
  background: var(--c-bg);
  padding: 0;
}
.map-wrap iframe {
  display: block; width: 100%; height: 420px; border: 0;
}

@media (max-width: 820px) {
  .contact-cards-grid { grid-template-columns: 1fr; }
  .map-wrap iframe { height: 300px; }
}