/* ===========================================================
   Base theme. Colors come from CSS variables set in header.php
   (--primary, --secondary, --accent) so the admin's theme
   picker can restyle the whole site without touching this file.

   Design system -- "the working ledger": hairline rules, tabular
   precision and one stamp-style accent (the CTA band's perforated
   edge) stand in for the gradient-wash, soft-shadow card kit a
   generic template would default to. Everything below is about
   shape, type and rhythm; brand color stays admin-controlled, so
   the system holds under any of the four built-in presets or a
   custom color pair.
   =========================================================== */

:root {
  --primary: #00545F;
  --secondary: #F5A623;
  --accent: #0B7285;
  --ink: #1a1d1b;
  --ink-soft: #5b6460;
  --bg: #ffffff;
  --bg-soft: #f3f4f2;
  --border: #dfe3e0;
  --radius: 10px;
  --radius-sm: 6px;
  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --shadow-sm: 0 1px 2px rgba(15, 23, 21, .07);
  --shadow-md: 0 6px 16px rgba(15, 23, 21, .07);
  --shadow-lg: 0 18px 38px rgba(15, 23, 21, .14);
  --primary-soft: color-mix(in srgb, var(--primary) 10%, white);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; transition: color .15s; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; font-weight: 700; letter-spacing: -.005em; font-family: var(--font-display); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
.container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Color washes -- used in place of a flat grey band, so brand color
   shows up as you scroll instead of only at the hero and CTA. */
.section-tint { background: color-mix(in srgb, var(--primary) 7%, var(--bg)); }
.section-tint-warm { background: color-mix(in srgb, var(--secondary) 12%, var(--bg)); }
.section-dark { background: var(--primary); color: #fff; }
.section-dark h2, .section-dark .section-eyebrow { color: #fff; }
.section-dark .section-eyebrow::before { background: var(--secondary); }
.section-dark .section-intro { color: rgba(255,255,255,.75); }

/* Buttons -- a firm tag/label shape (small radius), not a chat-bubble pill */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--accent); }
.btn-outline { border-color: var(--border); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.btn-secondary { background: var(--secondary); color: #1c2226; }
.btn-secondary:hover { filter: brightness(1.05); }
.btn-danger { background: #b3261e; color: #fff; }

/* Announcement bar */
.announcement-bar {
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
}
.announcement-track {
  display: flex; width: max-content; padding: 10px 0;
  animation: announcement-scroll 20s linear infinite;
}
.announcement-bar:hover .announcement-track { animation-play-state: paused; }
.announcement-item {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0 40px; font-size: 14px; font-weight: 500;
}
.announcement-item a { color: #fff; text-decoration: underline; text-underline-offset: 2px; margin-left: 8px; font-weight: 600; }
.announcement-sep { display: inline-block; margin: 0 40px; opacity: .4; }
.announcement-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.announcement-close:hover { background: rgba(255,255,255,.3); }
@keyframes announcement-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-track { animation: none; width: 100%; justify-content: center; }
  .announcement-item[aria-hidden="true"] { display: none; }
}
@media (max-width: 720px) {
  .announcement-item { font-size: 13px; padding: 0 28px; }
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  z-index: 50;
  box-shadow: 0 0 0 rgba(15,23,21,0);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner {
  max-width: 1320px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 32px;
}
.logo img { height: 52px; width: auto; max-width: 160px; object-fit: contain; }
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--ink); letter-spacing: -.01em; }
.main-nav { flex: 1; }
.main-nav ul { display: flex; gap: 28px; align-items: center; }
.main-nav > ul > li { position: relative; }
.main-nav a { color: var(--ink); font-weight: 600; font-size: 14.5px; padding: 10px 0; position: relative; }
.main-nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--secondary); transform: scaleX(0); transition: transform .18s;
}
.main-nav > ul > li.active > a,
.main-nav a:hover { color: var(--primary); }
.main-nav > ul > li.active > a::after,
.main-nav > ul > li:hover > a::after { transform: scaleX(1); }
.main-nav .dropdown {
  display: block; position: absolute; top: 100%; left: -12px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 230px;
  padding: 8px; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.main-nav li.has-children:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .dropdown li a { display: block; padding: 9px 12px; border-radius: 4px; font-weight: 500; }
.main-nav .dropdown li a::after { display: none; }
.main-nav .dropdown li a:hover { background: var(--bg-soft); color: var(--primary); }
.submenu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px; background: none; border: 0;
  border-radius: 6px; color: var(--ink); cursor: pointer;
}
.submenu-toggle:hover { color: var(--primary); background: var(--bg-soft); }
.submenu-toggle svg { width: 18px; height: 18px; transition: transform .18s ease; }
.nav-toggle { display: none; background: none; border: 0; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); display: block; border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Section / hero lead-in tag -- a quiet inline marker, not a shouted
   tracked-out label. Sentence case, body type, a short rule instead
   of letter-spacing to do the separating. */
.hero-eyebrow, .section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-soft); font-weight: 600; font-size: 14.5px; margin-bottom: 18px;
}
.hero-eyebrow::before, .section-eyebrow::before {
  content: ""; display: inline-block; width: 18px; height: 2px; background: var(--secondary); flex: none;
}

/* Hero */
.hero {
  padding: 88px 0 64px;
  background-color: color-mix(in srgb, var(--primary) 6%, var(--bg-soft));
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero.has-bg-image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero.has-bg-image::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 38%, rgba(255,255,255,.45) 65%, rgba(255,255,255,.1) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; }

/* Hero background slideshow: with 2-3 background images (admin -> Pages),
   heroSectionOpen() lays them side by side in a strip -- plus a copy of the
   first so the loop joins up -- that drifts slowly right-to-left under the
   white fade, about 18s per image. The track is N image-widths wide and
   travels (N-1) of them, then restarts on the identical first image. */
.hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slides-track {
  display: flex; height: 100%; width: calc(var(--slide-count) * 100%);
  animation: hero-slide-drift calc((var(--slide-count) - 1) * 18s) linear infinite;
  will-change: transform;
}
.hero-slide { flex: 1 1 0; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }
@keyframes hero-slide-drift { from { transform: translateX(0); } to { transform: translateX(var(--slide-end)); } }
@media (prefers-reduced-motion: reduce) {
  /* Keep the still first image (the section's own background) instead. */
  .hero-slides { display: none; }
}
/* Mobile hero: the text spans the full width on a phone, so the desktop's
   left-to-right white fade washed the image out almost entirely. Instead the
   image (--hero-bg, from heroSectionOpen()) fills the hero behind the text
   under an even dark scrim, and the text turns white. When the image comes
   from the side hero image, that side copy is hidden -- it's now the
   background. */
@media (max-width: 720px) {
  .hero.has-mobile-bg {
    background: #16211e var(--hero-bg) center / cover no-repeat !important;
  }
  .hero.has-mobile-bg::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10,18,16,.5) 0%, rgba(10,18,16,.68) 100%);
  }
  .hero.mobile-bg-from-media .hero-media { display: none; }
  .hero.has-mobile-bg { border-bottom-color: transparent; }
  .hero.has-mobile-bg h1 { color: #fff; }
  .hero.has-mobile-bg .subheading,
  .hero.has-mobile-bg .hero-eyebrow { color: rgba(255,255,255,.88); }
  .hero.has-mobile-bg .hero-note { color: rgba(255,255,255,.75); }
  .hero.has-mobile-bg .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }
  .hero.has-mobile-bg .btn-outline:hover { background: #fff; color: var(--primary); border-color: #fff; }
}
.hero h1 { font-size: clamp(32px, 4.5vw, 50px); max-width: 780px; }
.hero .subheading { font-size: 19px; color: var(--ink-soft); max-width: 620px; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: 13px; color: var(--ink-soft); }

/* Flagship hero: reserved for Home, where the hero carries the page's thesis.
   Interior pages keep the compact banner above so content stays reachable
   without an extra scroll. */
.hero.hero-full { min-height: min(66vh, 620px); display: flex; align-items: center; padding: 64px 0; }
@media (max-width: 720px) {
  .hero.hero-full { min-height: 0; padding: 48px 0 40px; }
}

.hero-inner.has-image { display: flex; align-items: center; gap: 48px; }
.hero-inner.has-image .hero-text { flex: 1 1 auto; min-width: 0; }
.hero-inner.has-image .hero-text h1,
.hero-inner.has-image .hero-text .subheading { max-width: none; }
.hero-media { flex: 0 0 42%; max-width: 460px; }
.hero-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); object-fit: cover; aspect-ratio: 4 / 3; }
.hero-media.hero-video iframe { width: 100%; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; }
.hero-visual { flex: 0 0 42%; max-width: 460px; aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .hero-inner.has-image { flex-direction: column-reverse; gap: 32px; }
  .hero-media, .hero-visual { flex: 1 1 auto; max-width: 340px; }
}
@media (max-width: 720px) {
  /* On phones the headline, subheading and CTAs come first, image/video after. */
  .hero-inner.has-image { flex-direction: column; }
}

/* One deliberate page-load moment on the hero text -- everything else on
   the page holds still until a person acts on it. */
.hero-text > * { animation: hero-rise .6s ease both; }
.hero-text > *:nth-child(2) { animation-delay: .05s; }
.hero-text > *:nth-child(3) { animation-delay: .1s; }
.hero-text > *:nth-child(4) { animation-delay: .15s; }
.hero-text > *:nth-child(5) { animation-delay: .2s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-text > * { animation: none; }
  .main-nav, .card .icon, .industry-tile .icon, .reason-item .icon, .back-to-top, .faq-answer { transition: none; }
}

/* Rich-text page body (admin-entered HTML on simple content pages) */
.page-body { font-size: 17px; line-height: 1.7; }
.page-body h2 { font-size: 24px; margin-top: 1.4em; }
.page-body h3 { font-size: 19px; margin-top: 1.2em; }
.page-body p { margin-bottom: 1.1em; }
.page-body ul, .page-body ol { margin: 0 0 1.1em 1.4em; list-style: revert; }
.page-body li { margin-bottom: 0.4em; }
.page-body a { text-decoration: underline; }

/* Body content block with an optional side image (e.g. About Us) */
.content-block.has-image { display: flex; align-items: center; gap: 48px; }
.content-block.has-image .content-text { flex: 1 1 auto; min-width: 0; }
.content-media { flex: 0 0 40%; max-width: 440px; }
.content-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .content-block.has-image { flex-direction: column; gap: 28px; }
  .content-media { flex: 1 1 auto; max-width: 100%; }
}

/* Stats bar -- a solid color band so the brand color shows up right
   under the hero, not just at the hero and CTA. Tabular figures are
   the one place mono type earns its keep. */
.stats-band { background: var(--primary); }
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 44px 0; }
.stat { text-align: center; position: relative; }
.stat:not(:last-child)::after {
  content: ""; position: absolute; right: -12px; top: 8px; bottom: 8px; width: 1px; background: rgba(255,255,255,.2);
}
.stat .value { font-family: var(--font-mono); font-size: 32px; font-weight: 600; color: var(--secondary); font-variant-numeric: tabular-nums; }
.stat .label { color: rgba(255,255,255,.75); font-size: 14px; margin-top: 4px; }

/* Case studies (success stories) */
.case-study {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 32px;
  margin-bottom: 28px; background: #fff; transition: border-color .18s;
}
.case-study:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.case-study-media {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: 24px; background: var(--bg-soft);
}
.case-study-media img { width: 100%; height: 100%; object-fit: cover; }
.case-study-media.has-video img { filter: brightness(.82); }
.case-study-play {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: transparent; color: #fff; font-weight: 700; font-size: 14px;
}
.case-study-play svg { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: rgba(255,255,255,.22); backdrop-filter: blur(2px); transition: background .15s, transform .15s; }
.case-study-play:hover svg { background: rgba(255,255,255,.34); transform: scale(1.06); }
.case-study-media iframe { width: 100%; height: 100%; border: 0; }

.case-study-header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.case-study-logo { max-height: 40px; max-width: 140px; width: auto; }
.case-study-header h3 { margin-bottom: 2px; }
.case-study-industry { color: var(--accent); font-weight: 700; font-size: 13px; }

.case-study-quote {
  margin: 24px 0 0; padding: 20px 24px; border-left: 3px solid var(--secondary);
  background: var(--bg-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 16px;
}
.case-study-quote footer { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); font-style: normal; }

.case-study-results { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.case-study-results .value { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.case-study-results .label { color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }
@media (max-width: 640px) {
  .case-study { padding: 22px; }
  .case-study-results { gap: 24px; }
}

/* Section headers */
.section { padding: 72px 0; }
.section h2 { font-size: clamp(26px, 3vw, 34px); max-width: 640px; }
.section-intro { color: var(--ink-soft); max-width: 640px; margin-bottom: 40px; font-size: 16px; }

/* Cards / grids -- flat, ruled panels. Hover reveals a left tab rather
   than lifting the whole card, like a highlighted row in a ledger. */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 28px 28px 28px 31px;
  background: #fff; transition: border-color .18s, box-shadow .18s;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: transparent;
  border-radius: 2px; transition: background .18s;
}
.card:hover { box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.card:hover::before { background: var(--secondary); }
.card .icon {
  width: 44px; height: 44px; color: #fff; margin-bottom: 18px;
  background: var(--primary); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; padding: 10px;
  transition: transform .18s ease;
}
.card:hover .icon { transform: scale(1.08) rotate(-4deg); }
.card .icon svg { width: 100%; height: 100%; }
.card h3 { font-size: 18px; }
.card p { color: var(--ink-soft); font-size: 15px; margin-bottom: 0; }
.card .step-no { font-size: 13px; font-weight: 700; color: var(--secondary); margin-bottom: 6px; font-family: var(--font-mono); }
/* Cycle the three brand hues across a 3-column grid so a row of feature
   cards reads as color, not a single repeated chip. */
.grid-3 .card:nth-child(3n+2) .icon, .grid-4 .card:nth-child(4n+2) .icon { background: var(--accent); }
.grid-3 .card:nth-child(3n+3) .icon, .grid-4 .card:nth-child(4n+3) .icon { background: var(--secondary); color: #1c2226; }
.grid-4 .card:nth-child(4n+4) .icon { background: var(--ink); }

/* Reasons row (homepage "why us") — a divided row, not boxed cards like the
   sections above and below it. These three points aren't a sequence, so no
   step numbers either; the vertical rules borrow the stats-bar's language. */
.reasons-row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.reason-item { padding: 36px 32px; position: relative; }
.reason-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1px; background: var(--border); }
.reason-item .icon {
  width: 44px; height: 44px; color: #fff; margin-bottom: 18px;
  background: var(--primary); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; padding: 10px;
  transition: transform .18s ease;
}
.reason-item:hover .icon { transform: scale(1.08) rotate(-4deg); }
.reason-item .icon svg { width: 100%; height: 100%; }
.reason-item h3 { font-size: 18px; margin-bottom: 8px; }
.reason-item p { color: var(--ink-soft); font-size: 15px; margin: 0; }
.reason-item:nth-child(2) .icon { background: var(--accent); }
.reason-item:nth-child(3) .icon { background: var(--secondary); color: #1c2226; }
@media (max-width: 900px) {
  .reasons-row { grid-template-columns: 1fr; border-top: 0; }
  .reason-item { border-top: 1px solid var(--border); }
  .reason-item:not(:last-child)::after { display: none; }
}

/* Industry tiles */
.industry-tile {
  display: block; position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 24px 24px 24px 27px; background: #fff; transition: border-color .18s, box-shadow .18s;
}
.industry-tile::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: transparent;
  border-radius: 2px; transition: background .18s;
}
.industry-tile:hover { box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.industry-tile:hover::before { background: var(--secondary); }
.industry-tile .icon {
  width: 40px; height: 40px; color: #fff; margin-bottom: 14px;
  background: var(--primary); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; padding: 8px;
  transition: transform .18s ease;
}
.industry-tile:hover .icon { transform: scale(1.08) rotate(-4deg); }
.industry-tile h3 { font-size: 17px; }
.industry-tile p { font-size: 14px; color: var(--ink-soft); margin: 0; }
.grid-3 .industry-tile:nth-child(3n+2) .icon { background: var(--accent); }
.grid-3 .industry-tile:nth-child(3n+3) .icon { background: var(--secondary); color: #1c2226; }

/* Empty state (e.g. no case studies / jobs published yet) */
.empty-state { text-align: center; max-width: 480px; margin: 0 auto; padding: 40px 24px; }
.empty-state .icon {
  width: 60px; height: 60px; margin: 0 auto 20px; color: var(--primary);
  background: var(--primary-soft); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 15px;
}
.empty-state h3 { font-size: 21px; margin-bottom: 10px; }
.empty-state p { color: var(--ink-soft); margin-bottom: 24px; }

/* Logo wall */
.logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: center; }
.logo-wall .logo-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; text-align: center;
  transition: border-color .18s;
}
.logo-wall .logo-item:hover { border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.logo-wall img { max-height: 44px; margin: 0 auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.logo-wall .logo-item:hover img { filter: grayscale(0); opacity: 1; }
.logo-wall .logo-item .name { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }

/* Testimonials */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testimonial {
  border: 1px solid var(--border); border-left: 3px solid var(--secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 28px;
  background: color-mix(in srgb, var(--secondary) 8%, var(--bg)); position: relative;
}
.testimonial .quote { font-size: 16px; margin-bottom: 20px; position: relative; z-index: 1; }
.testimonial .person { display: flex; align-items: center; gap: 10px; }
.testimonial .person img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.testimonial .person .name { font-weight: 700; font-size: 14px; }
.testimonial .person .role { font-size: 13px; color: var(--ink-soft); }

/* CTA band -- the one bold device on the page: a solid fill with a
   perforated top edge, like a tear-off slip. Everything else stays quiet
   so this reads as deliberate rather than another gradient card. */
.cta-band {
  position: relative; background: var(--primary);
  color: #fff; border-radius: var(--radius); padding: 60px 40px 52px; text-align: center;
  overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px;
  background-image: radial-gradient(circle at center, var(--bg) 5px, transparent 5.5px);
  background-size: 26px 16px; background-position: 13px -8px; background-repeat: repeat-x;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.82); max-width: 560px; margin: 0 auto 26px; }
.cta-band .btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }
.cta-band .btn-outline:hover { background: #fff; color: var(--primary); border-color: #fff; }

/* Footer */
.site-footer {
  background: color-mix(in srgb, var(--primary) 85%, black);
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  color: rgba(255,255,255,.7); margin-top: 40px;
}
.footer-inner { max-width: 1320px; margin: 0 auto; padding: 64px 24px 48px; display: flex; flex-wrap: wrap; gap: 32px 24px; }
.footer-col { flex: 1 1 160px; min-width: 0; }
.footer-col:first-child { flex: 2 1 240px; }
.footer-wordmark { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: #fff; letter-spacing: -.01em; margin-bottom: 10px; }
.footer-col h4 { font-size: 13px; color: rgba(255,255,255,.5); font-weight: 700; margin-bottom: 14px; }
.footer-col p { color: rgba(255,255,255,.6); }
.footer-col a { color: rgba(255,255,255,.75); }
.footer-col a:hover { color: #fff; }
.footer-col li { margin-bottom: 10px; font-size: 14px; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.footer-contact-list li > span:last-child, .footer-contact-list li > a { min-width: 0; overflow-wrap: anywhere; }
.footer-icon {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.65);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.footer-icon svg { width: 13px; height: 13px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 20px 24px; text-align: center;
  font-size: 13px; color: rgba(255,255,255,.45);
  display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap;
}
.footer-bottom p { margin: 0; }
.footer-bottom .built-by::before { content: "\2022"; margin-right: 8px; color: rgba(255,255,255,.3); }
.footer-bottom .built-by a { color: rgba(255,255,255,.6); font-weight: 600; }
.footer-bottom .built-by a:hover { color: #fff; }

/* Forms */
.form-grid { display: grid; gap: 16px; max-width: 640px; }
.form-grid label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.form-grid input, .form-grid textarea, .form-grid select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; }
.alert-success { background: #e7f6ec; color: #145a32; border: 1px solid #b7e2c4; }
.alert-error { background: #fdecec; color: #7a1f1f; border: 1px solid #f3c1c1; }

/* Blog */
.blog-featured {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  margin-bottom: 44px; text-decoration: none; color: inherit; transition: border-color .15s;
}
.blog-featured:hover { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.blog-featured-image { aspect-ratio: 16 / 11; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); }
.blog-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured-body { padding: 12px 20px 12px 0; }
.blog-featured-tag {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 10px;
}
.blog-featured-body h2 { font-size: 28px; margin-bottom: 12px; }
.blog-featured-body p { color: var(--ink-soft); font-size: 16px; margin-bottom: 16px; }
@media (max-width: 780px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-body { padding: 4px 4px 12px; }
}

.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chip {
  display: inline-block; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600; transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); color: var(--primary); }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

.blog-card {
  display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #fff; transition: border-color .18s;
}
.blog-card:hover { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.blog-card-image { aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 20px 22px 22px; }
.blog-card-category {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 8px;
}
.blog-card h3 { font-size: 18px; margin-bottom: 8px; }
.blog-card p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 12px; }
.blog-card-meta { font-size: 13px; color: var(--ink-soft); }

.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 40px; }
.blog-pagination-status { font-size: 14px; color: var(--ink-soft); }

.preview-banner {
  background: #fff7e6; border-bottom: 1px solid #f0d999; color: #7a5b0a;
  text-align: center; padding: 10px 16px; font-size: 14px; font-weight: 600;
}
.blog-post-back { margin-bottom: 8px; }
.blog-post-meta { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 24px; }
.blog-post-image { width: 100%; border-radius: var(--radius); margin-bottom: 32px; aspect-ratio: 16/9; object-fit: cover; }
.blog-post-video { margin-bottom: 32px; }
.blog-post-video iframe { width: 100%; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 16/9; }
.blog-post-content { font-size: 17px; line-height: 1.75; }
.blog-post-content h2 { font-size: 26px; margin-top: 1.6em; }
.blog-post-content h3 { font-size: 20px; margin-top: 1.4em; }
.blog-post-content p { margin-bottom: 1.2em; }
.blog-post-content ul, .blog-post-content ol { margin: 0 0 1.2em 1.4em; list-style: revert; }
.blog-post-content img { border-radius: var(--radius-sm); margin: 1.2em 0; }
.blog-post-content a { text-decoration: underline; }

/* Job listing */
.job-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 24px;
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
  transition: border-color .18s;
}
.job-item:hover { border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.job-item .meta { font-size: 13px; color: var(--ink-soft); }

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: transform .18s, box-shadow .18s;
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: scale(1.07); box-shadow: 0 14px 28px rgba(0,0,0,.28); }
@media (max-width: 720px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 27px; height: 27px; }
}

@media (max-width: 900px) {
  .grid-3, .grid-4, .testimonials { grid-template-columns: repeat(2, 1fr); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2)::after { display: none; }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .main-nav {
    position: fixed; top: var(--mobile-nav-top, 68px); left: 0; right: 0; bottom: 0; background: #fff;
    padding: 20px; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .main-nav.open { visibility: visible; opacity: 1; transform: none; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .main-nav > ul > li { width: 100%; }
  .main-nav > ul > li > a { display: inline-block; padding: 12px 0; font-size: 16px; }
  .main-nav li.has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .main-nav li.has-children > a { flex: 1; }
  .submenu-toggle { display: flex; }
  .main-nav li.submenu-open > .submenu-toggle svg { transform: rotate(180deg); }
  .main-nav .dropdown {
    display: none; flex-basis: 100%; position: static; border: 0; box-shadow: none;
    padding: 0 0 8px 14px; margin-left: 2px; border-left: 2px solid var(--border); border-radius: 0;
    opacity: 1; visibility: visible; transform: none;
  }
  .main-nav li.submenu-open > .dropdown { display: block; }
  /* .main-nav leaves the header row (it's position: fixed here) and
     .header-actions is hidden, so nothing else pushes the menu button
     to the right edge -- it sat right next to the logo. */
  .nav-toggle { display: flex; margin-left: auto; }
  .header-actions { display: none; }
  /* backdrop-filter on .site-header creates a containing block for its
     fixed-position descendants, so .main-nav's fixed inset would resolve
     against the (short) header box instead of the viewport. Drop it only
     here, where .main-nav becomes the full-screen mobile menu. */
  .site-header { backdrop-filter: none; background: #fff; }
  /* Without the blur, the 92% white header let dark sections (the footer
     especially) show through it -- the footer wordmark bled into the
     logo row. Solid white on mobile instead. */
  body.nav-open { overflow: hidden; }
  body.nav-open .whatsapp-float,
  body.nav-open .back-to-top { opacity: 0; visibility: hidden; pointer-events: none; }
  .hero { padding: 56px 0 44px; }
  .hero h1 { font-size: 30px; }
  .grid-3, .grid-4, .testimonials { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat::after { display: none; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .footer-col { flex-basis: 100%; }
  /* Footer links are ~17px-tall text runs; give each a finger-sized row. */
  .footer-col li { margin-bottom: 2px; }
  .footer-col li > a { display: inline-block; padding: 8px 0; }
  .footer-contact-list li { align-items: center; }
  /* Long email addresses reached under the floating buttons on 320-360px
     phones; stop the contact rows short of that right-hand column. */
  .footer-contact-list li { padding-right: 64px; }
  .footer-bottom .built-by a { display: inline-block; padding: 8px 0; }
  /* Keep the copyright / built-by lines clear of the floating WhatsApp and
     back-to-top buttons parked in the bottom-right corner. */
  .footer-bottom { padding: 20px 76px 24px; }
  .job-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cta-band { padding: 40px 24px; }
}

/* Connected-steps timeline: used where content is a genuine sequence
   (delivery arc, engagement methodology). Gap width doubles as the
   connector length, so it works unchanged at any column count. */
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 8px 0; }
.pipeline.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pipeline-step { position: relative; }
.pipeline-step .step-num {
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 18px; margin-bottom: 20px;
}
.pipeline-step:not(:last-child) .step-num::after {
  content: ""; position: absolute; top: 50%; left: 100%; width: 32px; height: 1px;
  background: var(--border); transform: translateY(-50%);
}
.pipeline-step h3 { font-size: 18px; margin-bottom: 8px; }
.pipeline-step p { color: var(--ink-soft); font-size: 15px; margin: 0; }
@media (max-width: 860px) {
  .pipeline, .pipeline.cols-4 { grid-template-columns: 1fr; gap: 28px; }
  .pipeline-step:not(:last-child) .step-num::after { display: none; }
}

/* Featured industries: a couple of sectors get a larger "deep dive" card;
   everything else stays in the compact directory below. Two-tier weight,
   not decoration -- it signals where the deepest expertise actually is. */
.industry-deep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.industry-deep-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 30px;
  display: flex; flex-direction: column;
}
.industry-deep-card .icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.industry-deep-card .icon svg { width: 24px; height: 24px; }
.industry-deep-grid .industry-deep-card:nth-child(3n+2) .icon { background: var(--accent); }
.industry-deep-grid .industry-deep-card:nth-child(3n+3) .icon { background: var(--secondary); color: #1c2226; }
.industry-deep-card h3 { font-size: 19px; margin-bottom: 8px; }
.industry-deep-card p { color: var(--ink-soft); font-size: 15px; margin-bottom: 0; }
.industry-deep-card .desc { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; }
.industry-deep-card a.btn { margin-top: 20px; align-self: flex-start; }
@media (max-width: 900px) {
  .industry-deep-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .industry-deep-grid { grid-template-columns: 1fr; }
}

/* Sector directory: a browsable list rather than a card grid, since
   industries aren't a sequence and don't need equal-weight tiles. */
.sector-list { border-top: 1px solid var(--border); margin-top: 8px; }
.sector-row {
  display: flex; align-items: center; gap: 26px; padding: 26px 4px;
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
  transition: background .15s ease;
}
.sector-row:hover { background: var(--bg-soft); }
.sector-row .icon {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sector-row .icon svg { width: 26px; height: 26px; }
.sector-list .sector-row:nth-child(3n+2) .icon { background: var(--accent); }
.sector-list .sector-row:nth-child(3n+3) .icon { background: var(--secondary); color: #1c2226; }
.sector-row .sector-body { flex: 1 1 auto; min-width: 0; }
.sector-row h3 { font-size: 19px; margin-bottom: 4px; }
.sector-row p { color: var(--ink-soft); font-size: 15px; margin: 0; }
.sector-row .sector-body .desc { margin-top: 6px; font-size: 14px; color: var(--ink-soft); }
@media (max-width: 640px) {
  .sector-row { flex-wrap: wrap; gap: 14px; }
}

/* Contact: form plus a direct-contact panel instead of a lone form. */
.contact-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.contact-panel {
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-soft)); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px;
}
.contact-panel h3 { font-size: 18px; margin-bottom: 6px; }
.contact-panel .contact-panel-intro { color: var(--ink-soft); font-size: 14px; margin-bottom: 24px; }
.contact-item { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.contact-item > div { min-width: 0; }
.contact-item:not(:last-child) { margin-bottom: 20px; }
.contact-item .icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--border); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.contact-item .icon svg { width: 18px; height: 18px; }
.contact-item .label { font-size: 12px; color: var(--ink-soft); margin-bottom: 2px; }
.contact-item .value { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.contact-item .value a { color: inherit; }
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* Principles: a manifesto-style list for prose that isn't sequential. */
.principles-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 44px; margin-top: 8px; }
.principle { border-left: 3px solid var(--secondary); padding-left: 20px; }
.principle h3 { font-size: 17px; margin-bottom: 6px; }
.principle p { color: var(--ink-soft); font-size: 15px; margin: 0; }
@media (max-width: 720px) {
  .principles-list { grid-template-columns: 1fr; }
}

/* Back to top -- mirrors the WhatsApp float's shape/position language but
   sits above it, and only appears once there's somewhere to go back to. */
.back-to-top {
  position: fixed; right: 22px; bottom: 90px; z-index: 59;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s, border-color .15s, color .15s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { border-color: var(--primary); color: var(--primary); }
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 720px) {
  .back-to-top { right: 16px; bottom: 78px; width: 40px; height: 40px; }
}

/* FAQ accordion -- built by main.js from the FAQs page's plain
   question/answer HTML, so the page reads as a browsable list instead
   of one long scroll. */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink);
}
.faq-question span { flex: 1 1 auto; }
.faq-question svg { flex: none; width: 20px; height: 20px; color: var(--ink-soft); transition: transform .2s ease; }
.faq-item.is-open .faq-question svg { transform: rotate(180deg); color: var(--primary); }
.faq-answer { padding: 0 4px 22px; color: var(--ink-soft); font-size: 15.5px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ERP readiness quiz (quiz.php) -- main.js adds .is-enhanced and shows one
   .quiz-step at a time; without JS every step renders as one long form. */
.quiz-wrap { max-width: 720px; }
.quiz-form { display: grid; gap: 40px; }
.quiz-form.is-enhanced { gap: 0; }
.quiz-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz-form.is-enhanced .quiz-step { display: none; }
.quiz-form.is-enhanced .quiz-step.is-active { display: block; animation: quizStepIn .28s ease both; }
@keyframes quizStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.quiz-step legend { display: block; padding: 0; margin-bottom: 18px; }
.quiz-step-count { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.quiz-form.is-enhanced .quiz-step-count { display: none; } /* the progress bar says it instead */
.quiz-question { display: block; font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.25; color: var(--ink); }
.quiz-question:focus { outline: none; }
.quiz-help { color: var(--ink-soft); margin: -8px 0 18px; }

.quiz-options { display: grid; gap: 10px; }
.quiz-option {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  font-size: 16px; font-weight: 600; color: var(--ink);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.quiz-option:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.quiz-option input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.quiz-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.quiz-option:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

.quiz-progress { margin-bottom: 28px; }
.quiz-progress-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.quiz-progress-track { height: 6px; border-radius: 99px; background: var(--bg-soft); overflow: hidden; }
.quiz-progress-track span { display: block; height: 100%; width: 0; background: var(--primary); border-radius: inherit; transition: width .3s ease; }

.quiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.quiz-nav .quiz-next { margin-left: auto; }
.quiz-nav .btn:disabled { opacity: .45; cursor: not-allowed; }
.quiz-contact .form-grid { max-width: none; }
.quiz-consent { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.quiz-consent a { text-decoration: underline; }
.quiz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.quiz-result { padding: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-md); animation: quizStepIn .35s ease both; }
.quiz-result h2 { margin-top: 6px; }
.quiz-apps { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 20px 0 24px; padding: 0; }
.quiz-apps .chip { font-size: 15px; padding: 10px 18px; }
.quiz-result-note { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .quiz-form.is-enhanced .quiz-step.is-active, .quiz-result { animation: none; }
  .quiz-progress-track span { transition: none; }
}
@media (max-width: 640px) {
  .quiz-option { padding: 14px 16px; font-size: 15px; }
  .quiz-result { padding: 24px 20px; }
}

/* Screen-reader-only text (e.g. "4 out of 5 stars" behind a star icon) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Star ratings on testimonials / approved reviews */
.stars { display: inline-flex; gap: 2px; margin-bottom: 12px; font-size: 17px; line-height: 1; position: relative; z-index: 1; }
.star { color: var(--border); }
.star.is-on { color: var(--secondary); }
.review-cta { margin: 28px 0 0; color: var(--ink-soft); }
.review-cta a { font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* Leave-a-review form (review.php) */
.review-wrap { max-width: 680px; }
.review-form { max-width: none; }
.review-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.review-form .optional { font-weight: 400; color: var(--ink-soft); }
.field-hint { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.rating-input { border: 0; padding: 0; margin: 0; min-width: 0; }
.rating-input legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; }
/* Inputs are in 5..1 order and laid out right-to-left, so "~ label" can light
   every star up to the hovered or checked one. */
.rating-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.review-form .rating-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.review-form .rating-stars label { display: inline-block; margin: 0; font-size: 34px; line-height: 1; color: var(--border); cursor: pointer; transition: color .12s, transform .12s; }
.rating-stars label:hover, .rating-stars label:hover ~ label,
.rating-stars input:checked ~ label { color: var(--secondary); }
.rating-stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rating-stars label:active { transform: scale(.92); }
.review-form .review-consent { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.review-form .review-consent input { width: auto; padding: 0; margin-top: 3px; accent-color: var(--primary); }
.review-consent a { text-decoration: underline; }
.review-thanks { padding: 36px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.review-thanks h2 { margin-top: 0; }
@media (max-width: 640px) {
  .review-grid-2 { grid-template-columns: 1fr; }
  .review-thanks { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rating-stars label { transition: none; }
}