/* =====================================================================
   JSC Electrical — premium design system
   Static site. No build step. Edit tokens in :root to rebrand.
   ===================================================================== */

:root {
  /* Colour tokens */
  --c-bg: #ffffff;
  --c-bg-soft: #f5f7fc;
  --c-bg-soft-2: #eef1f8;
  --c-border: #e3e8f1;
  --c-border-soft: #edf0f7;

  --c-ink: #0a1628;          /* primary navy — dark body bg */
  --c-ink-2: #0f213d;        /* slightly lifted navy */
  --c-ink-3: #1a2c4d;        /* navy panels */
  --c-text: #16223a;
  --c-muted: #5b6a82;
  --c-muted-2: #94a3b8;

  --c-accent: #ffce3a;       /* electric yellow */
  --c-accent-strong: #f5a623;
  --c-accent-deep: #b87b13;
  --c-glow: #5cb6ff;         /* subtle blue glow */
  --c-glow-2: #2c8dd9;

  --c-on-dark: #e9eff8;
  --c-on-dark-muted: #97a7c0;

  /* Radii & shadows */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-xs: 0 1px 2px rgba(10, 22, 40, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 22, 40, 0.06);
  --shadow-md: 0 12px 30px rgba(10, 22, 40, 0.10);
  --shadow-lg: 0 22px 60px rgba(10, 22, 40, 0.18);
  --shadow-glow: 0 0 0 1px rgba(255, 206, 58, 0.4), 0 10px 30px rgba(255, 206, 58, 0.35);

  /* Layout */
  --container: 1180px;
  --container-narrow: 880px;
  --gap: 24px;

  /* Fonts */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
:focus-visible {
  outline: 3px solid #5cb6ff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Typography */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-ink);
  margin: 0 0 .55em;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; color: var(--c-text); }
a { color: var(--c-ink); text-decoration: none; transition: color .15s ease; }
a:hover { text-decoration: underline; }
strong { font-weight: 700; color: var(--c-ink); }
ul { padding-left: 1.1em; margin: 0 0 1em; }
li { margin-bottom: .35em; }
code { background: var(--c-bg-soft); padding: 1px 6px; border-radius: 4px; font-size: .9em; }
hr { border: 0; height: 1px; background: var(--c-border); margin: 32px 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.container--narrow { max-width: var(--container-narrow); }
.skip-link {
  position: absolute; left: -9999px;
  background: var(--c-ink); color: #fff;
  padding: 12px 16px; z-index: 1000; border-radius: 6px;
}
.skip-link:focus { left: 14px; top: 14px; }

/* =====================================================================
   Header / Navigation
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(10,22,40,0.06);
  transition: box-shadow .2s ease, background .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(10,22,40,0.08); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--c-ink);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  display: block;
  height: 38px;
  width: auto;
  max-width: 100%;
}
.brand-logo--footer {
  height: 56px;
  margin-bottom: 12px;
}
@media (min-width: 760px) {
  .brand-logo { height: 42px; }
  .brand-logo--footer { height: 64px; }
}
@media (max-width: 380px) {
  .brand-logo { height: 34px; }
}

.nav-links {
  list-style: none; padding: 0; margin: 0;
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  flex-direction: column;
  box-shadow: var(--shadow-md);
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.nav-links.open { display: flex; }
.nav-links a {
  display: block;
  padding: 14px 22px;
  color: var(--c-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--c-border-soft);
}
.nav-links a:hover, .nav-links a.active {
  background: var(--c-bg-soft);
  text-decoration: none;
}
.nav-links a.active { color: var(--c-ink); position: relative; }
.nav-links a.active::before {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 8px;
  height: 2px; background: var(--c-accent); border-radius: 1px;
}

.nav-cta { display: none; gap: 8px; align-items: center; }
.nav-cta .btn { padding: 10px 16px; font-size: .92rem; }

.nav-toggle {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--c-ink);
  font-size: .92rem;
}
.nav-toggle:hover { background: var(--c-bg-soft); }
.nav-toggle svg { width: 18px; height: 18px; }

@media (min-width: 1080px) {
  .nav-toggle { display: none; }
  .nav { gap: 12px; }
  .nav-links {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background: none;
    border: none;
    box-shadow: none;
    gap: 0;
    max-height: none;
    overflow: visible;
  }
  .nav-links li { flex-shrink: 0; }
  .nav-links a {
    display: block;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    font-size: .85rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .nav-links a.active::before { display: none; }
  .nav-links a.active { background: var(--c-bg-soft); }
  .nav-cta { display: flex; flex-shrink: 0; }
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  border: 0;
  cursor: pointer;
  text-align: center;
  line-height: 1.1;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--lg { padding: 18px 30px; font-size: 1.05rem; }

.btn--primary {
  background: linear-gradient(140deg, #ffd358 0%, var(--c-accent) 40%, #f0a91a 100%);
  color: #1a1300;
  box-shadow: 0 6px 18px rgba(255, 166, 35, .35), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--primary:hover {
  box-shadow: 0 14px 32px rgba(255, 166, 35, .45), 0 0 0 4px rgba(255, 206, 58, .15), inset 0 1px 0 rgba(255,255,255,.5);
}

.btn--email {
  background: #F4F1EA;
  color: var(--c-ink);
  box-shadow: 0 6px 18px rgba(14, 26, 43, .20), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--email:hover {
  background: #ffffff;
  color: var(--c-ink);
  box-shadow: 0 14px 32px rgba(14, 26, 43, .26), 0 0 0 4px rgba(255,255,255,.20);
}

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 2px solid rgba(10, 22, 40, .15);
}
.btn--ghost:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

.btn--dark {
  background: var(--c-ink);
  color: #fff;
}
.btn--dark:hover { background: #050d1c; color: #fff; }

.btn--on-dark {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}
.btn--on-dark:hover { background: rgba(255,255,255,0.16); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Tiny chip-style call link in hero/CTA bands */
.tel-link {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =====================================================================
   Common section structure
   ===================================================================== */
.section { padding: 72px 0; }
@media (min-width: 760px) { .section { padding: 96px 0; } }

.section--soft { background: var(--c-bg-soft); }
.section--dark {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(92,182,255,0.16), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(255,206,58,0.10), transparent 60%),
    linear-gradient(160deg, #061226 0%, var(--c-ink) 50%, #061226 100%);
  color: var(--c-on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }
.section--dark p { color: var(--c-on-dark-muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--c-accent), transparent);
  display: inline-block;
}
.section--dark .eyebrow { color: var(--c-accent); }
.section--dark .eyebrow::before { background: linear-gradient(90deg, var(--c-accent), transparent); }

.section-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head .eyebrow { justify-content: center; }
.section-head h2 { margin-bottom: 16px; }
.section-head p {
  font-size: 1.08rem;
  color: var(--c-muted);
}
.section-head--left { margin-left: 0; text-align: left; }
.section-head--left .eyebrow { justify-content: flex-start; }

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--c-on-dark);
  background:
    radial-gradient(1100px 600px at 90% -10%, rgba(92,182,255,0.22), transparent 60%),
    radial-gradient(800px 600px at -10% 110%, rgba(255,206,58,0.14), transparent 60%),
    linear-gradient(150deg, #061226 0%, var(--c-ink) 45%, #081a36 100%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,206,58,0.30) 0%, rgba(255,206,58,0) 70%);
  filter: blur(10px);
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 1;
  padding: 72px 0 84px;
  display: grid; gap: 36px;
}
@media (min-width: 880px) {
  .hero-inner { padding: 110px 0 120px; grid-template-columns: 1.15fr 1fr; align-items: center; }
}

.hero h1 { color: #fff; max-width: 16ch; }
.hero .lead {
  font-size: 1.15rem;
  color: #c8d3e6;
  max-width: 580px;
  margin-bottom: 28px;
}
@media (min-width: 760px) {
  .hero .lead { font-size: 1.2rem; }
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}
.hero-badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(255,206,58,0.18), 0 0 12px rgba(255,206,58,0.6);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,206,58,0.18), 0 0 12px rgba(255,206,58,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(255,206,58,0.06), 0 0 18px rgba(255,206,58,0.4); }
}
@media (prefers-reduced-motion: reduce) { .hero-badge .dot { animation: none; } }

.hero .trust-strip {
  display: flex; flex-wrap: wrap; gap: 16px 22px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #b8c5dc;
  font-size: .92rem;
}
.hero .trust-strip span { display: inline-flex; align-items: center; gap: 8px; }
.hero .trust-strip svg { width: 16px; height: 16px; color: var(--c-accent); flex-shrink: 0; }

/* Hero-side decorative card */
.hero-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  padding: 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--c-accent) 50%, transparent 100%);
}
.hero-card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 16px; }
.hero-card ul { list-style: none; padding: 0; margin: 0; }
.hero-card ul li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #d5dded;
  font-size: .96rem;
}
.hero-card ul li:last-child { border-bottom: 0; }
.hero-card ul li .bolt {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(255,206,58,0.14);
  color: var(--c-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-card ul li .bolt svg { width: 14px; height: 14px; }

/* Smaller hero for inner pages */
.hero--page .hero-inner { padding: 56px 0 64px; }
@media (min-width: 880px) {
  .hero--page .hero-inner { padding: 84px 0 84px; grid-template-columns: 1fr; }
}
.hero--page h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); max-width: 22ch; }
.hero--page .lead { margin-bottom: 24px; }

/* =====================================================================
   Service cards
   ===================================================================== */
.services-grid {
  display: grid; gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--c-text);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.service-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-strong) 100%);
  opacity: 0; transition: opacity .2s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: #c8d2e6;
  text-decoration: none;
}
.service-card:hover::before { opacity: 1; }

.service-card .icon {
  width: 52px; height: 52px;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(255,206,58,0.20), rgba(245,166,35,0.10));
  color: var(--c-accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.service-card .icon svg { width: 26px; height: 26px; }

.service-card h3 { margin: 0 0 6px; color: var(--c-ink); font-size: 1.2rem; }
.service-card p { color: var(--c-muted); margin: 0; font-size: .96rem; }
.service-card ul.mini {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; gap: 6px;
  font-size: .9rem;
}
.service-card ul.mini li {
  display: flex; align-items: center; gap: 8px;
  color: var(--c-text);
}
.service-card ul.mini li::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}
.service-card .more {
  margin-top: 18px;
  font-weight: 700;
  color: var(--c-ink);
  font-size: .92rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.service-card .more::after {
  content: "→";
  transition: transform .15s ease;
}
.service-card:hover .more::after { transform: translateX(4px); }

/* =====================================================================
   Common jobs (compact tiles)
   ===================================================================== */
.jobs-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .jobs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .jobs-grid { grid-template-columns: repeat(4, 1fr); } }

.job-tile {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.job-tile:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.job-tile .icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(255,206,58,0.16);
  color: var(--c-accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.job-tile .icon svg { width: 18px; height: 18px; }
.job-tile h4 { font-size: .98rem; margin: 0 0 2px; color: var(--c-ink); }
.job-tile p { font-size: .85rem; margin: 0; color: var(--c-muted); }

/* =====================================================================
   Pillars (why us)
   ===================================================================== */
.pillars {
  display: grid; gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  padding: 26px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #c8d2e6; }
.pillar .icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(10,22,40,0.06), rgba(10,22,40,0.02));
  color: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  position: relative;
}
.pillar .icon::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(255,206,58,0.3), transparent 60%);
  z-index: -1; opacity: 0; transition: opacity .2s ease;
}
.pillar:hover .icon::after { opacity: 1; }
.pillar .icon svg { width: 22px; height: 22px; }
.pillar h3 { font-size: 1.05rem; margin: 0 0 6px; }
.pillar p { font-size: .94rem; color: var(--c-muted); margin: 0; }

/* On dark sections */
.section--dark .pillar {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.section--dark .pillar h3 { color: #fff; }
.section--dark .pillar p { color: var(--c-on-dark-muted); }
.section--dark .pillar .icon {
  background: rgba(255,255,255,0.06);
  color: var(--c-accent);
}

/* =====================================================================
   Process / numbered steps
   ===================================================================== */
.steps {
  display: grid; gap: 22px;
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 680px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  counter-increment: step;
  position: relative;
  padding: 24px 22px 22px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 18px; right: 22px;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-accent);
  letter-spacing: -0.02em;
  opacity: .85;
}
.step h3 { font-size: 1.05rem; margin: 0 0 6px; padding-right: 50px; }
.step p { font-size: .92rem; color: var(--c-muted); margin: 0; }

.section--dark .step {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.section--dark .step h3 { color: #fff; }
.section--dark .step p { color: var(--c-on-dark-muted); }

/* =====================================================================
   Two-column content split
   ===================================================================== */
.split {
  display: grid; gap: 36px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 940px) {
  .split { grid-template-columns: 1.2fr 1fr; gap: 60px; }
  .split.reverse > :first-child { order: 2; }
  .split.reverse > :last-child { order: 1; }
}
.split ul.checklist {
  list-style: none; padding: 0; margin: 0 0 1.2em;
}
.split ul.checklist li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-weight: 500;
}
.split ul.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 5px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--c-accent) 0%, var(--c-accent-strong) 100%)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1300' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 12px no-repeat;
  box-shadow: 0 2px 6px rgba(255,166,35,.3);
}

.aside-card {
  background: linear-gradient(155deg, var(--c-ink-2) 0%, var(--c-ink) 80%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.aside-card::before {
  content: "";
  position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,206,58,0.25), transparent 70%);
}
.aside-card h3 { color: #fff; font-size: 1.05rem; margin: 18px 0 6px; }
.aside-card h3:first-child { margin-top: 0; }
.aside-card p { color: #cbd6ea; margin: 0; font-size: .96rem; }
.aside-card .divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 16px 0;
}

/* =====================================================================
   Areas
   ===================================================================== */
.areas-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.area-chip {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 600;
  color: var(--c-ink);
  font-size: .94rem;
  transition: border-color .15s ease, transform .15s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.area-chip::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}
.area-chip:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.section--dark .area-chip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #fff;
  backdrop-filter: blur(8px);
}
.section--dark .area-chip:hover { background: rgba(255,255,255,0.10); border-color: var(--c-accent); }

/* =====================================================================
   Reviews placeholder
   ===================================================================== */
.reviews-grid {
  display: grid; gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

.review-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 26px;
  position: relative;
}
.review-card .quote-mark {
  position: absolute; top: 18px; right: 22px;
  font-size: 3rem;
  line-height: 1;
  color: var(--c-accent);
  opacity: .25;
  font-family: Georgia, serif;
  font-weight: 700;
}
.review-stars { color: var(--c-accent); font-size: 1rem; letter-spacing: 2px; margin-bottom: 10px; }
.review-card { margin: 0; }
.review-heading {
  font-size: 1.05rem;
  margin: 2px 0 10px;
  padding-right: 28px;
  color: var(--c-ink);
}
.review-card blockquote { margin: 0; padding: 0; border: 0; }
.review-card p { margin: 0 0 12px; color: var(--c-text); }
.review-meta { color: var(--c-muted); font-size: .9rem; font-weight: 600; }
.review-card--placeholder {
  border: 2px dashed #c8d2e6;
  background: linear-gradient(135deg, var(--c-bg-soft), var(--c-bg-soft-2));
  color: var(--c-muted);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 180px;
}
.review-card--placeholder .label {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-accent-deep);
  margin-bottom: 6px;
}
.review-card--placeholder p { font-style: italic; margin: 0; font-size: .94rem; }

.review-callout {
  text-align: center;
  margin-top: 32px;
  color: var(--c-muted);
  font-size: .94rem;
}

/* =====================================================================
   Photo grid placeholder
   ===================================================================== */
.photo-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }

.photo-tile {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, rgba(10,22,40,0.04), rgba(10,22,40,0.02)),
    repeating-linear-gradient(45deg, #eef1f8 0 8px, #f6f8fc 8px 16px);
  border: 1px dashed #c8d2e6;
  color: var(--c-muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: .85rem;
  text-align: center;
  padding: 12px;
  position: relative;
}
.photo-tile .label {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-accent-deep);
  margin-bottom: 4px;
}
.photo-tile .name { font-weight: 600; color: var(--c-ink); }

/* =====================================================================
   Photo gallery (real images) — compact card grid
   ===================================================================== */
.photo-gallery {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);                          /* mobile: 1 col */
}
@media (min-width: 560px) {
  .photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* tablet: 2 col */
}
@media (min-width: 960px) {
  .photo-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* desktop: 4 col */
}
.photo-card {
  margin: 0;
  min-width: 0;                                         /* prevent grid blow-out from large images */
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.photo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #c8d2e6; }
.photo-card img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 168px;                                        /* fixed compact thumbnail */
  object-fit: cover;
  background: var(--c-bg-soft);
}
.photo-card figcaption {
  padding: 13px 16px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}

/* =====================================================================
   CTA band
   ===================================================================== */
.cta-band {
  position: relative;
  background:
    radial-gradient(700px 280px at 90% 50%, rgba(255,206,58,0.30), transparent 60%),
    radial-gradient(500px 280px at -5% 100%, rgba(92,182,255,0.20), transparent 60%),
    linear-gradient(120deg, #061226 0%, var(--c-ink) 60%, #102747 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 40px 30px;
  display: grid; gap: 22px;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at top right, #000, transparent 70%);
          mask-image: radial-gradient(ellipse at top right, #000, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.cta-band h2 { color: #fff; margin: 0 0 8px; }
.cta-band p { margin: 0; color: #cdd6ea; max-width: 540px; }
.cta-band .btn-row { z-index: 1; }
@media (min-width: 820px) {
  .cta-band { grid-template-columns: 1fr auto; padding: 52px 56px; }
  .cta-band .btn-row { justify-content: flex-end; }
}

.cta-band--mini {
  padding: 28px 26px;
  border-radius: var(--r-lg);
}
.cta-band--mini h2 { font-size: 1.4rem; margin: 0 0 4px; }
.cta-band--mini p { font-size: .96rem; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq {
  max-width: 800px;
  margin: 0 auto;
}
.faq details {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq details[open] { border-color: var(--c-accent); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--c-ink);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>") center / 12px no-repeat;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq p { margin: 12px 0 0; color: var(--c-muted); font-size: .96rem; }

/* =====================================================================
   Contact form & contact cards
   ===================================================================== */
.contact-grid {
  display: grid; gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 920px) { .contact-grid { grid-template-columns: 1.4fr 1fr; gap: 48px; } }

.form {
  display: grid; gap: 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.form-intro {
  margin-bottom: 8px;
}
.form-intro h2 { margin: 0 0 4px; font-size: 1.4rem; }
.form-intro p { margin: 0; color: var(--c-muted); font-size: .96rem; }

.form label {
  display: grid; gap: 7px;
  font-weight: 600;
  color: var(--c-ink);
  font-size: .9rem;
}
.form input, .form textarea, .form select {
  font: inherit;
  font-size: 1rem;
  padding: 13px 15px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: #fff;
  color: var(--c-text);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(255,206,58,0.15);
}
.form textarea { min-height: 140px; resize: vertical; }
.form .field-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form .field-row { grid-template-columns: 1fr 1fr; } }
.form .form-footnote { font-size: .85rem; color: var(--c-muted); margin: 6px 0 0; }
.form button[type="submit"] { margin-top: 4px; }

.contact-cards {
  display: grid; gap: 16px;
}
.contact-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.contact-card:hover {
  border-color: #c8d2e6;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.contact-card .icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 11px;
  background: linear-gradient(140deg, rgba(255,206,58,0.20), rgba(245,166,35,0.08));
  color: var(--c-accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-card .icon svg { width: 22px; height: 22px; }
.contact-card h3 { margin: 0 0 4px; font-size: 1rem; }
.contact-card p { margin: 0; color: var(--c-muted); font-size: .94rem; }
.contact-card a { font-weight: 700; color: var(--c-ink); }
.contact-card a:hover { color: var(--c-accent-deep); text-decoration: none; }

/* Highlighted contact cards for phone/email */
.contact-card--phone {
  background: linear-gradient(140deg, #fffbe9 0%, #fff 60%);
  border-color: rgba(255,206,58,0.4);
}
.contact-card--email {
  background: linear-gradient(140deg, #F4F1EA 0%, #fff 60%);
  border-color: rgba(14, 26, 43, 0.18);
}
.contact-card--email .icon {
  background: linear-gradient(140deg, rgba(14,26,43,0.10), rgba(14,26,43,0.04));
  color: var(--c-ink);
}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer {
  background: var(--c-ink);
  color: #b8c5dc;
  padding: 60px 0 28px;
  font-size: .95rem;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  opacity: .5;
}
.footer-grid {
  display: grid; gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
.site-footer h4 {
  color: #fff;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 14px;
  font-weight: 700;
}
.site-footer a { color: #c2cee4; }
.site-footer a:hover { color: var(--c-accent); text-decoration: none; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 8px; }
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand .brand-text small { color: #9aabc6; }
.footer-brand p { color: #94a4be; margin-top: 8px; max-width: 320px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 36px;
  padding-top: 22px;
  color: #7e8ba8;
  font-size: .85rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
}
.footer-bottom a { color: #97a7c0; }

/* =====================================================================
   Floating email (desktop) & sticky mobile CTA bar
   ===================================================================== */
.float-email {
  position: fixed;
  bottom: 22px; right: 22px;
  width: 58px; height: 58px;
  background: var(--c-ink);
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(14, 26, 43, 0.45), 0 0 0 6px rgba(14, 26, 43, 0.08);
  z-index: 80;
  transition: transform .15s ease, background .15s ease;
  color: #F4F1EA;
}
.float-email:hover { transform: scale(1.06); background: #142A4F; text-decoration: none; }
.float-email svg { width: 26px; height: 26px; }
@media (min-width: 760px) { .float-email { display: flex; } }

.sticky-cta {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid rgba(10,22,40,0.08);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(10,22,40,0.18);
}
.sticky-cta .btn {
  padding: 12px 14px;
  font-size: .95rem;
  width: 100%;
}
@media (min-width: 760px) { .sticky-cta { display: none; } }

body { padding-bottom: 90px; }
@media (min-width: 760px) { body { padding-bottom: 0; } }

/* =====================================================================
   Misc utilities
   ===================================================================== */
.text-center { text-align: center; }
.muted { color: var(--c-muted); }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.accent-text { color: var(--c-accent-strong); font-weight: 700; }
.divider-grad {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border), transparent);
  margin: 0;
  border: 0;
}

/* =====================================================================
   Answer blocks (Q&A callouts for AI / SGE visibility)
   ===================================================================== */
.answer-block {
  background: linear-gradient(135deg, #fffbe9 0%, #ffffff 100%);
  border: 1px solid rgba(255, 206, 58, 0.4);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: 22px 26px;
  margin: 0 0 24px;
  box-shadow: var(--shadow-xs);
}
.answer-block h2,
.answer-block h3 {
  font-size: 1.1rem;
  margin: 0 0 10px;
  color: var(--c-ink);
  display: flex; align-items: center; gap: 10px;
  line-height: 1.25;
}
.answer-block h2::before,
.answer-block h3::before {
  content: "Q";
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #1a1300;
  font-size: .82rem;
  font-weight: 800;
  flex-shrink: 0;
}
.answer-block p { margin: 0 0 8px; color: var(--c-text); }
.answer-block p:last-child { margin-bottom: 0; }
.answer-block p:first-of-type { font-weight: 600; }
.answer-block p + p { font-weight: 400; color: var(--c-muted); }
.answer-block ul { margin: 8px 0 0; color: var(--c-muted); }

.answer-block--warning {
  background: linear-gradient(135deg, #fff3e8 0%, #ffffff 100%);
  border-color: rgba(192, 64, 64, 0.28);
  border-left-color: #c04040;
}
.answer-block--warning h2::before,
.answer-block--warning h3::before {
  content: "!";
  background: #c04040;
  color: #fff;
  font-size: .92rem;
}

.answers-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 840px) {
  .answers-grid { grid-template-columns: repeat(2, 1fr); }
}
.answers-grid .answer-block { margin: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   Mobile polish & overflow safety
   Global guards + mobile/tablet tweaks. Desktop 2-col hero (≥880px) unchanged.
   ===================================================================== */

/* Force light UA rendering (stops mobile dark-mode form/scrollbar weirdness)
   and contain any element that would otherwise scroll the page sideways.
   overflow-x lives on <html> only — putting it on <body> would create a
   scroll container and break the sticky header. */
html { overflow-x: hidden; color-scheme: light; }

/* ROOT CAUSE: the hero wrapper is <div class="container hero-inner">, and
   .hero-inner's padding shorthand (72px 0 84px) overrode the side gutter that
   .container provides (0 22px) — so hero content ran edge-to-edge and the
   headline clipped at the screen edge. Restore the 22px side gutter on the
   single-column hero. (The ≥880px desktop 2-col hero keeps its own layout.) */
@media (max-width: 879px) {
  .hero:not(.hero--page) .hero-inner { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 759px) {
  /* Header: solid white on phones so the (dark) logo always reads with full
     contrast. Drop the backdrop blur too, so there is no translucency to let
     the dark hero show through (some mobile browsers render it oddly). */
  .site-header { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Homepage hero — tighter vertical rhythm + type that scales down cleanly
     (the base h1 clamp floor of 2rem was too large for small screens). */
  .hero:not(.hero--page) .hero-inner { padding-top: 48px; padding-bottom: 60px; }
  .hero:not(.hero--page) h1 {
    font-size: clamp(1.65rem, 7vw, 2.2rem);
    max-width: none;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
  .hero:not(.hero--page) .lead { font-size: 1.05rem; }

  /* Hero CTAs: fill the row and stack neatly when they can't sit side by
     side — so the nowrap "Call …" button can never overflow/clip. */
  .hero:not(.hero--page) .btn-row { gap: 10px; }
  .hero:not(.hero--page) .btn-row > .btn { flex: 1 1 auto; }

  /* Sticky contact bar — compact, within viewport, safe-area aware. */
  .sticky-cta {
    left: 10px; right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 8px;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(10,22,40,0.16);
  }
  .sticky-cta .btn { padding: 11px 10px; font-size: .9rem; }
  .sticky-cta .btn svg { width: 16px; height: 16px; }
  /* Keep the fixed bar from covering page content (incl. safe area). */
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* "Common jobs" tiles — 2-column phone layout (<720px).
   ROOT CAUSE OF THE REMAINING OVERFLOW: each .job-tile is a flex item inside a
   1fr/1fr grid. With the default min-width:auto, a tile's min-content (~177px:
   14–18px padding ×2 + 36px icon + gap + longest word) was wider than the 1fr
   track (~158px at 375px). Grid 1fr tracks cannot shrink below an item's
   min-content, so the tracks grew past the container and pushed the page ~9px
   wider than the viewport on ≤384px phones — the sideways scroll. Setting
   min-width:0 on the tile (and its text child) lets the tracks stay 1fr and the
   text wrap. The rest trims the card footprint so the 2-col grid sits cleaner. */
@media (max-width: 719px) {
  .jobs-grid { gap: 10px; }
  .job-tile { min-width: 0; padding: 14px; gap: 10px; }
  .job-tile > div { min-width: 0; }
  .job-tile .icon { width: 30px; height: 30px; border-radius: 8px; }
  .job-tile .icon svg { width: 16px; height: 16px; }
  .job-tile h4 { font-size: .9rem; }
  .job-tile p { font-size: .8rem; line-height: 1.4; }
}

@media (max-width: 430px) {
  /* Trim oversized CTA padding on the smallest phones. */
  .btn--lg { padding: 15px 20px; font-size: 1rem; }
}