/* ProVolt Electrician — Live Wire design system
   Phase 2 foundation. Component styles are designed to be used by later HTML phases. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@400..800&display=swap');

:root {
  color-scheme: dark;
  --color-header: rgb(7 17 31 / 88%);
  --color-footer: #050d17;
  --color-input: #091625;
  --color-nav-menu: #081321;
  --color-ink: #f5f8fc;
  --color-muted: #a7b4c6;
  --color-subtle: #718198;
  --color-canvas: #07111f;
  --color-surface: #0d1b2d;
  --color-surface-raised: #12243a;
  --color-surface-glass: rgb(13 27 45 / 82%);
  --color-line: rgb(167 180 198 / 16%);
  --color-line-strong: rgb(167 180 198 / 28%);
  --color-cyan: #00b8ff;
  --color-cyan-bright: #39c8ff;
  --color-cyan-deep: #007cb0;
  --color-amber: #ffb300;
  --color-amber-bright: #ffc642;
  --color-success: #58d6a4;
  --color-danger: #ff7777;
  --color-white: #fff;
  --font-heading: 'Sora', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs: clamp(.75rem, .72rem + .08vw, .8125rem);
  --text-sm: clamp(.875rem, .84rem + .12vw, .9375rem);
  --text-base: clamp(1rem, .96rem + .16vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.04rem + .34vw, 1.3rem);
  --text-xl: clamp(1.25rem, 1.1rem + .6vw, 1.65rem);
  --text-2xl: clamp(1.55rem, 1.22rem + 1.25vw, 2.3rem);
  --text-3xl: clamp(2rem, 1.4rem + 2.2vw, 3.35rem);
  --text-display: clamp(2.55rem, 1.65rem + 4.1vw, 5rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --container: 1180px;
  --container-reading: 760px;
  --gutter: clamp(1.125rem, 4vw, 3rem);
  --radius-sm: .65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --shadow-card: 0 20px 60px rgb(0 0 0 / 22%);
  --shadow-cyan: 0 10px 34px rgb(0 184 255 / 18%);
  --focus-ring: 0 0 0 3px var(--color-canvas), 0 0 0 6px var(--color-cyan);
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  --duration-fast: 160ms;
  --duration-normal: 260ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--color-cyan-bright); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--color-white); }
button { color: inherit; }
::selection { background: rgb(0 184 255 / 32%); color: var(--color-white); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: .2rem; }
:target { scroll-margin-top: 7rem; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .7em;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.14;
  text-wrap: balance;
}
h1 { font-size: var(--text-display); font-weight: 750; letter-spacing: -.055em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); letter-spacing: -.025em; }
h4 { font-size: var(--text-lg); letter-spacing: -.02em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
small, .text-small { font-size: var(--text-sm); }
strong { font-weight: 700; }

/* Layout primitives */
.container { width: min(var(--container), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.container--reading { max-width: var(--container-reading); }
.section { position: relative; padding-block: clamp(4rem, 8vw, 7.5rem); }
.section--compact { padding-block: clamp(3rem, 5vw, 4.75rem); }
.section--surface { background: var(--color-surface); }
.section--raised { background: var(--color-surface-raised); }
.stack > * + * { margin-top: var(--stack-space, 1rem); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, .75rem); }
.grid { display: grid; gap: var(--grid-gap, 1.25rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.reading-width { max-width: var(--container-reading); }
.center { text-align: center; }
.center .cluster { justify-content: center; }
.muted { color: var(--color-muted); }
.subtle { color: var(--color-subtle); }
.cyan { color: var(--color-cyan-bright); }
.amber { color: var(--color-amber-bright); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-bottom: 1rem; color: var(--color-cyan-bright);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .13em; line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow::before { width: 1.5rem; height: 2px; background: var(--color-amber); content: ''; }
.section-heading { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-heading p { max-width: 650px; color: var(--color-muted); font-size: var(--text-lg); }
.section-heading.center { margin-inline: auto; }

/* Buttons and calls to action */
.button {
  display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: .65rem;
  padding: .82rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--color-cyan); color: #04121d; font-weight: 800; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.button:hover { transform: translateY(-2px); background: var(--color-cyan-bright); color: #04121d; box-shadow: var(--shadow-cyan); }
.button:active { transform: translateY(0); }
.button--amber { background: var(--color-amber); color: #211700; }
.button--amber:hover { background: var(--color-amber-bright); color: #211700; box-shadow: 0 10px 34px rgb(255 179 0 / 17%); }
.button--secondary { border-color: var(--color-line-strong); background: rgb(255 255 255 / 3%); color: var(--color-ink); }
.button--secondary:hover { border-color: var(--color-cyan); background: rgb(0 184 255 / 8%); color: var(--color-white); box-shadow: none; }
.button--small { min-height: 2.7rem; padding: .65rem 1rem; font-size: var(--text-sm); }
.button--full { width: 100%; }
.button__icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.call-link { display: inline-flex; align-items: center; gap: .6rem; color: var(--color-ink); font-weight: 700; text-decoration: none; }
.call-link:hover { color: var(--color-cyan-bright); }
.call-link__icon { color: var(--color-amber); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; }

/* Surfaces and reusable cards */
.card {
  min-width: 0; padding: clamp(1.25rem, 2.4vw, 2rem); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); background: linear-gradient(145deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 1%));
  box-shadow: 0 1px 0 rgb(255 255 255 / 2%) inset;
}
.card--interactive { transition: border-color var(--duration-normal), transform var(--duration-normal) var(--ease-out), background var(--duration-normal); }
.card--interactive:hover { transform: translateY(-4px); border-color: rgb(0 184 255 / 48%); background: linear-gradient(145deg, rgb(0 184 255 / 8%), rgb(255 255 255 / 2%)); }
.card__icon {
  display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: 1.15rem;
  border: 1px solid rgb(0 184 255 / 25%); border-radius: .95rem; background: rgb(0 184 255 / 10%); color: var(--color-cyan-bright);
}
.card__icon svg { width: 1.45rem; height: 1.45rem; }
.card p { color: var(--color-muted); }
.card__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem; font-weight: 700; text-decoration: none; }
.panel { border: 1px solid var(--color-line); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-card); }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: rgb(255 255 255 / 3%); color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }
.pill--cyan { border-color: rgb(0 184 255 / 28%); background: rgb(0 184 255 / 9%); color: var(--color-cyan-bright); }
.pill--amber { border-color: rgb(255 179 0 / 28%); background: rgb(255 179 0 / 9%); color: var(--color-amber-bright); }
.rule { height: 1px; border: 0; background: var(--color-line); }

/* Site header / navigation — activated by the matching data attributes in main.js */
.site-header {
  position: sticky; z-index: 100; top: 0; border-bottom: 1px solid var(--color-line);
  background: rgb(7 17 31 / 88%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.site-header__inner { display: flex; min-height: 5.25rem; align-items: center; justify-content: space-between; gap: 1.25rem; }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: .75rem; color: var(--color-ink); text-decoration: none; }
.brand__logo { width: 2.65rem; height: 2.65rem; flex: 0 0 auto; }
.brand__name { display: block; font-family: var(--font-heading); font-size: 1.02rem; font-weight: 750; letter-spacing: -.035em; line-height: 1.15; }
.brand__descriptor { display: block; margin-top: .22rem; color: var(--color-muted); font-size: .68rem; font-weight: 600; letter-spacing: .055em; line-height: 1.2; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: clamp(.75rem, 1.7vw, 1.6rem); }
.site-nav__links { display: flex; align-items: center; gap: clamp(.7rem, 1.5vw, 1.35rem); }
.site-nav__link { color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: color var(--duration-fast); }
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--color-white); }
.nav-toggle { display: none; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid var(--color-line-strong); border-radius: .8rem; background: var(--color-surface); cursor: pointer; }
.nav-toggle svg { width: 1.35rem; height: 1.35rem; }

/* Hero building blocks */
.hero { position: relative; overflow: clip; padding-block: clamp(4rem, 8vw, 7.5rem); }
.hero::before { position: absolute; z-index: -1; top: -10rem; right: -12rem; width: min(58vw, 58rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(0 184 255 / 12%), rgb(0 184 255 / 3%) 45%, transparent 70%); content: ''; pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); align-items: center; gap: clamp(2rem, 5vw, 5.5rem); }
.hero__content { max-width: 690px; }
.hero__content > p { max-width: 620px; color: var(--color-muted); font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem); }
.hero__visual { position: relative; min-width: 0; }
.hero__visual-frame { overflow: hidden; border: 1px solid var(--color-line-strong); border-radius: var(--radius-xl); background: linear-gradient(150deg, #142b43, #091726 72%); box-shadow: 0 30px 90px rgb(0 0 0 / 32%); }
.hero__visual-frame img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }
.hero__visual-placeholder { display: grid; min-height: 330px; aspect-ratio: 4 / 4.2; place-items: center; background: radial-gradient(ellipse at 55% 35%, rgb(0 184 255 / 20%), transparent 48%), linear-gradient(145deg, #152e47, #081321); }
.hero__visual-placeholder svg { width: min(64%, 280px); opacity: .95; }
.hero__float-card { position: absolute; right: -1rem; bottom: 1.5rem; max-width: 220px; padding: 1rem 1.1rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); background: var(--color-surface-glass); box-shadow: var(--shadow-card); backdrop-filter: blur(12px); }
.hero__float-card strong { display: block; font-family: var(--font-heading); font-size: .95rem; }
.hero__float-card span { display: block; margin-top: .2rem; color: var(--color-muted); font-size: var(--text-xs); }
.hero__trust-row { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin-top: 1.7rem; color: var(--color-muted); font-size: var(--text-sm); }
.hero__trust-item { display: inline-flex; align-items: center; gap: .45rem; }
.hero__trust-item svg { width: 1rem; height: 1rem; color: var(--color-amber); }

/* Icon lists, process, FAQs and forms */
.check-list, .plain-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 1.8rem; color: var(--color-muted); }
.check-list li::before { position: absolute; top: .34em; left: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: rgb(0 184 255 / 14%); color: var(--color-cyan-bright); content: '✓'; font-size: .75rem; font-weight: 800; line-height: 1.1rem; text-align: center; }
.process-step { position: relative; padding: 1.4rem; border-top: 1px solid var(--color-line-strong); }
.process-step__number { display: inline-grid; width: 2.2rem; height: 2.2rem; place-items: center; margin-bottom: 1rem; border-radius: .7rem; background: rgb(255 179 0 / 12%); color: var(--color-amber-bright); font-family: var(--font-heading); font-weight: 800; }
.faq-list { border-top: 1px solid var(--color-line); }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; color: var(--color-ink); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { width: 1.5rem; flex: 0 0 auto; color: var(--color-cyan-bright); content: '+'; font-family: var(--font-body); font-size: 1.5rem; text-align: center; }
.faq-item[open] summary::after { content: '−'; }
.faq-item__answer { max-width: 760px; padding: 0 2.5rem 1.25rem 0; color: var(--color-muted); }
.form-field { display: grid; gap: .45rem; }
.form-field label { color: var(--color-ink); font-size: var(--text-sm); font-weight: 650; }
.form-control { width: 100%; min-height: 3.1rem; padding: .8rem .95rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: #091625; color: var(--color-ink); }
.form-control::placeholder { color: var(--color-subtle); }
.form-control:focus { border-color: var(--color-cyan); outline: none; box-shadow: 0 0 0 3px rgb(0 184 255 / 14%); }
textarea.form-control { min-height: 8rem; resize: vertical; }
.form-note { color: var(--color-muted); font-size: var(--text-xs); }

/* CTA banner, footer and mobile call bar */
.cta-banner { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); border: 1px solid rgb(0 184 255 / 28%); border-radius: var(--radius-xl); background: radial-gradient(ellipse at 100% 0%, rgb(0 184 255 / 15%), transparent 48%), linear-gradient(125deg, #11263b, #0a1828); }
.cta-banner h2 { max-width: 700px; font-size: var(--text-2xl); }
.cta-banner p { max-width: 650px; color: var(--color-muted); }
.site-footer { padding-block: 3.5rem 1.5rem; border-top: 1px solid var(--color-line); background: #050d17; }
.site-footer__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr .95fr; gap: 1.6rem; padding-bottom: 2.5rem; }
.site-footer__heading { margin-bottom: .9rem; color: var(--color-ink); font-size: var(--text-sm); font-weight: 750; }
.site-footer__links { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.site-footer__links a { color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; }
.site-footer__links a:hover { color: var(--color-cyan-bright); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding-top: 1.25rem; border-top: 1px solid var(--color-line); color: var(--color-subtle); font-size: var(--text-xs); }
.mobile-call-bar { display: none; }

/* Theme toggle and refined shared header */
.site-header { background: var(--color-header); }
.brand { flex: 0 0 auto; min-width: 0; }
.brand__logo { width: clamp(175px, 18vw, 220px); height: auto; max-height: 52px; object-fit: contain; object-position: left center; }
.brand--footer .brand__logo { width: min(220px, 100%); max-height: none; }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.theme-toggle { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-sm); font-weight: 750; line-height: 1.2; cursor: pointer; }
.theme-toggle:hover { border-color: var(--color-cyan); }
.theme-toggle__icon { font-size: 1.2rem; line-height: 1; }
.theme-toggle--mobile { display: none; }
.service-area-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--color-line-strong); border-radius: var(--radius-xl); background: var(--color-surface); }
.service-area-panel h2 { max-width: 680px; }
.service-area-panel p { color: var(--color-muted); }
.service-area-details { padding: 1.4rem; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.service-area-details p { margin-bottom: .8rem; }
.site-footer { background: var(--color-footer); }
.button, .button--small, .mobile-call-bar .button { min-height: 3.35rem; padding: .85rem 1.3rem; font-size: var(--text-sm); }
.site-nav__desktop-cta { min-width: 124px; }

/* Light theme: all shared surfaces, text, controls and overlays switch together. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-ink: #13263a;
  --color-muted: #4b5d70;
  --color-subtle: #5e7083;
  --color-canvas: #f7f9fc;
  --color-surface: #ffffff;
  --color-surface-raised: #edf3f8;
  --color-surface-glass: rgb(255 255 255 / 92%);
  --color-line: rgb(19 38 58 / 12%);
  --color-line-strong: rgb(19 38 58 / 24%);
  --color-cyan: #007eaf;
  --color-cyan-bright: #006f9e;
  --color-cyan-deep: #005d83;
  --color-amber: #e7a000;
  --color-amber-bright: #f0b51c;
  --color-white: #102033;
  --color-header: rgb(255 255 255 / 92%);
  --color-footer: #eaf0f6;
  --color-input: #ffffff;
  --color-nav-menu: #ffffff;
  --shadow-card: 0 20px 60px rgb(19 38 58 / 10%);
  --shadow-cyan: 0 10px 34px rgb(0 126 175 / 15%);
  --focus-ring: 0 0 0 3px var(--color-canvas), 0 0 0 6px var(--color-cyan);
}
:root[data-theme="light"] body { background: var(--color-canvas); color: var(--color-ink); }
:root[data-theme="light"] .site-nav__link:hover, :root[data-theme="light"] .site-nav__link[aria-current="page"] { color: var(--color-ink); }
:root[data-theme="light"] .hero__visual-frame { background: linear-gradient(150deg, #e1edf6, #f5f9fd 72%); box-shadow: 0 30px 90px rgb(19 38 58 / 12%); }
:root[data-theme="light"] .hero__visual-placeholder { background: radial-gradient(ellipse at 55% 35%, rgb(0 126 175 / 13%), transparent 48%), linear-gradient(145deg, #e6f2f8, #f6f9fc); }
:root[data-theme="light"] .hero__visual-placeholder svg g { stroke: #007eaf; }
:root[data-theme="light"] .hero__visual-placeholder svg g circle { fill: #f7f9fc; }
:root[data-theme="light"] .hero__float-card { background: rgb(255 255 255 / 94%); }
:root[data-theme="light"] .site-nav__links { background: var(--color-nav-menu); }
:root[data-theme="light"] .form-control { background: var(--color-input); color: var(--color-ink); }
:root[data-theme="light"] .cta-banner { background: radial-gradient(ellipse at 100% 0%, rgb(0 126 175 / 10%), transparent 48%), linear-gradient(125deg, #edf6fb, #ffffff); }
:root[data-theme="light"] .mobile-call-bar { border-top-color: var(--color-line-strong); background: rgb(255 255 255 / 95%); }
:root[data-theme="light"] .site-footer { border-top-color: var(--color-line-strong); }
:root[data-theme="light"] .button--secondary { background: #ffffff; color: var(--color-ink); }
:root[data-theme="light"] .button--secondary:hover { color: var(--color-ink); }
:root[data-theme="light"] .card { background: linear-gradient(145deg, #ffffff, #f5f8fb); box-shadow: 0 1px 0 rgb(19 38 58 / 3%) inset; }
:root[data-theme="light"] .overview-icon { color: #006f9e; }
:root[data-theme="light"] .overview-icon--amber { color: #8a5b00; }

/* Utility states */
.sr-only { position: absolute !important; overflow: hidden; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.no-scroll { overflow: hidden; }
[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .site-nav__links { gap: .8rem; }
  .site-nav__link { font-size: .82rem; }
  .theme-toggle__label { display: none; }
  .theme-toggle { width: 3.35rem; padding-inline: .5rem; }
  .brand__logo { width: clamp(165px, 18vw, 190px); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 2rem; }
  .hero__float-card { right: -.5rem; }
}
@media (max-width: 760px) {
  :root { --gutter: 1.15rem; }
  html { scroll-padding-top: 5.5rem; }
  .site-header__inner { min-height: 4.6rem; gap: .65rem; }
  .brand__logo { width: clamp(150px, 43vw, 190px); max-height: 46px; }
  .header-actions { display: none; }
  .theme-toggle--mobile { display: inline-flex; align-self: flex-start; margin: .4rem 0 .5rem; }
  .nav-toggle { display: grid; }
  .site-nav { position: static; }
  .site-nav__links {
    position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none;
    align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1rem; border-bottom: 1px solid var(--color-line);
    background: #081321; box-shadow: 0 18px 24px rgb(0 0 0 / 24%);
  }
  .site-nav__links.is-open { display: flex; flex-direction: column; }
  .site-nav__link { display: block; padding: .9rem .25rem; border-bottom: 1px solid var(--color-line); font-size: 1rem; }
  .site-nav__links .button { margin-top: .85rem; }
  .site-nav__desktop-cta { display: none; }
  .hero { padding-block: 3.7rem 4.25rem; }
  .hero__grid, .split { grid-template-columns: minmax(0, 1fr); }
  .hero__content { max-width: 100%; }
  .hero__visual { width: min(100%, 520px); margin: .75rem auto 0; }
  .hero__visual-frame img, .hero__visual-placeholder { aspect-ratio: 16 / 11; min-height: 250px; }
  .hero__float-card { right: .65rem; bottom: .65rem; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-area-panel { grid-template-columns: minmax(0, 1fr); }
  .site-footer__brand-col { grid-column: 1 / -1; }
  .mobile-call-bar {
    position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; display: block;
    padding: .65rem max(var(--gutter), env(safe-area-inset-left)) calc(.65rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(255 255 255 / 12%); background: rgb(5 13 23 / 94%); backdrop-filter: blur(16px);
  }
  .mobile-call-bar .button { width: 100%; min-height: 3.35rem; }
  body.has-mobile-call-bar { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .cta-row { align-items: stretch; }
  .cta-row > .button { width: 100%; }
  .hero__trust-row { display: grid; gap: .55rem; }
  .hero__float-card { right: .5rem; bottom: .5rem; max-width: 190px; padding: .8rem; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .service-area-panel { padding: 1.25rem; }
  .theme-toggle { min-height: 3.25rem; }
  .site-footer__brand-col { grid-column: auto; }
  .site-footer__bottom { align-items: flex-start; flex-direction: column; }
  .card { border-radius: var(--radius-md); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}


/* Phase 3 corrective polish — single header controls, consistent CTAs, and safety artwork */
.site-header__inner { gap: clamp(.65rem, 1.4vw, 1.25rem); }
.brand__logo { width: clamp(185px, 19vw, 238px); max-height: 56px; }
.site-nav__mobile-cta, .theme-toggle--mobile { display: none !important; }
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .7rem; }
.theme-toggle { min-height: 3rem; white-space: nowrap; }
.site-nav__desktop-cta { display: inline-flex; }

/* Every CTA uses the same generous baseline dimensions, including the header and sticky mobile CTA. */
.button, .button--small, .mobile-call-bar .button {
  min-width: 12.25rem;
  min-height: 3.5rem;
  padding: .9rem 1.5rem;
  font-size: var(--text-sm);
  line-height: 1.2;
  white-space: nowrap;
}
.site-nav__desktop-cta { min-width: 12.25rem; }
.mobile-call-bar .button { width: 100%; }
.safety-visual { min-width: 0; width: 100%; overflow: hidden; border: 1px solid var(--color-line-strong); border-radius: var(--radius-xl); background: #081a2b; box-shadow: var(--shadow-card); }
.safety-visual img { width: 100%; height: auto; aspect-ratio: 640 / 520; object-fit: cover; }
.safety-split { align-items: center; }

@media (max-width: 980px) {
  .site-header__inner { gap: .65rem; }
  .site-nav__links { gap: .65rem; }
  .site-nav__link { font-size: .78rem; }
  .brand__logo { width: clamp(170px, 18vw, 200px); }
  .theme-toggle { width: 3rem; min-width: 3rem; padding-inline: .4rem; }
  .theme-toggle__label { display: none; }
  .site-nav__desktop-cta { min-width: 10.75rem; }
}
@media (max-width: 760px) {
  .site-header__inner { min-height: 4.7rem; gap: .5rem; }
  .brand__logo { width: clamp(155px, 42vw, 190px); max-height: 45px; }
  .header-actions { display: flex; margin-left: auto; }
  .header-actions .theme-toggle { display: inline-flex; width: 2.8rem; min-width: 2.8rem; min-height: 2.8rem; height: 2.8rem; padding: .35rem; }
  .header-actions .site-nav__desktop-cta { display: none; }
  .nav-toggle { width: 2.8rem; height: 2.8rem; }
  .site-nav__links { top: calc(100% + 1px); }
  .site-nav__links .button { display: none; }
  .cta-row > .button { min-width: 0; width: 100%; }
  .safety-visual { width: min(100%, 560px); margin-inline: auto; }
  .mobile-call-bar .button { min-width: 0; min-height: 3.5rem; }
}
@media (max-width: 520px) {
  .site-header__inner { gap: .4rem; }
  .brand__logo { width: clamp(145px, 39vw, 168px); }
  .header-actions { gap: .35rem; }
  .header-actions .theme-toggle { width: 2.65rem; min-width: 2.65rem; height: 2.65rem; min-height: 2.65rem; }
  .nav-toggle { width: 2.65rem; height: 2.65rem; }
  .safety-visual { border-radius: var(--radius-lg); }
  .mobile-call-bar .button { padding-inline: .9rem; white-space: normal; }
}

/* Phase 3 footer-only refinement: align content and soften the disclosure. */
.site-footer__grid { align-items: start; }
.site-footer__brand-col { min-width: 0; }
.site-footer__heading { text-align: left; }
.site-footer__links { justify-items: start; }
.footer-intro { text-align: left; }
.footer-disclosure {
  max-width: 34rem;
  margin-top: .75rem;
  color: var(--color-subtle);
  font-size: .75rem;
  line-height: 1.5;
  text-align: justify;
  text-justify: inter-word;
}


/* Phase 4: inner-page components (additive; homepage layout remains unchanged) */
.breadcrumbs { padding-top: 1.1rem; color: var(--color-subtle); font-size: var(--text-sm); }
.breadcrumbs a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-cyan-bright); }
.inner-hero { padding-block: clamp(2.5rem, 6vw, 5rem); background: radial-gradient(ellipse at 85% 0%, rgb(0 184 255 / 10%), transparent 48%); }
.inner-hero__content { max-width: 850px; }
.inner-hero h1 { max-width: 900px; font-size: clamp(2.25rem, 1.5rem + 3vw, 4.1rem); }
.inner-hero__lead { max-width: 780px; color: var(--color-muted); font-size: var(--text-lg); }
.inner-hero__disclosure { margin-top: 1.1rem; color: var(--color-subtle); font-size: var(--text-sm); }
.content-section { padding-block: clamp(2.8rem, 6vw, 5rem); }
.content-section + .content-section { border-top: 1px solid var(--color-line); }
.content-section h2 { font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.45rem); }
.content-section p, .content-section li { color: var(--color-muted); }
.content-section .reading-width { max-width: 800px; }
.info-card { padding: clamp(1.2rem, 2.5vw, 1.7rem); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
.info-card h3 { font-size: var(--text-lg); }
.inner-cta { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgb(0 184 255 / 25%); border-radius: var(--radius-xl); background: radial-gradient(ellipse at 100% 0%, rgb(0 184 255 / 13%), transparent 55%), var(--color-surface); }
.inner-cta p { color: var(--color-muted); max-width: 700px; }
.related-links { display: flex; flex-wrap: wrap; gap: .75rem; }
.related-links a { display: inline-flex; padding: .65rem .9rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); color: var(--color-muted); text-decoration: none; font-size: var(--text-sm); }
.related-links a:hover { border-color: var(--color-cyan); color: var(--color-cyan-bright); }
.legal-copy { max-width: 820px; }
.legal-copy h2 { margin-top: 2rem; font-size: var(--text-xl); }
.legal-copy h3 { margin-top: 1.4rem; font-size: var(--text-lg); }
.legal-copy p, .legal-copy li { color: var(--color-muted); }
@media (max-width: 520px) { .related-links { display: grid; grid-template-columns: minmax(0, 1fr); } .related-links a { justify-content: space-between; } }


/* Phase 4 completion: service long-form content */
.service-layout{display:grid;grid-template-columns:minmax(190px,235px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.25rem);align-items:start}
.service-sidebar{position:sticky;top:96px;display:grid;gap:1rem;align-self:start}
.service-toc,.service-call-card{border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);padding:1.1rem;box-shadow:0 14px 32px -28px rgb(0 184 255 / 45%)}
.service-toc h2,.service-call-card h2{font-size:1.05rem;margin:0 0 .8rem}
.service-toc ol{margin:0;padding-left:1.15rem;display:grid;gap:.55rem}
.service-toc a,.service-call-card__link{color:var(--color-muted);font-size:.88rem;text-decoration:none}
.service-toc a:hover,.service-call-card__link:hover{color:var(--color-cyan-bright)}
.service-call-card p{font-size:.92rem;color:var(--color-muted)}
.button--block{width:100%;justify-content:center;margin-block:.5rem}
.service-article{min-width:0;max-width:800px}
.service-content-block{scroll-margin-top:100px}
.service-content-block + .service-content-block{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--color-line)}
.service-content-block h2{margin:.35rem 0 1rem;max-width:25ch}
.service-content-block p{max-width:72ch}
.service-detail-list{padding-left:1.35rem;display:grid;gap:.75rem;margin:1.25rem 0}
.service-detail-list li{padding-left:.25rem;line-height:1.7;color:var(--color-muted)}
.service-detail-list strong{color:var(--color-text,var(--text))}
.service-detail-list--numbered li{padding-left:.5rem}
.table-scroll{max-width:100%;overflow-x:auto;margin:1.25rem 0;border:1px solid var(--color-line);border-radius:var(--radius-md)}
.service-cost-table{width:100%;border-collapse:collapse;min-width:520px;background:var(--color-surface)}
.service-cost-table caption{text-align:left;padding:.85rem 1rem;color:var(--color-muted);font-size:.9rem}
.service-cost-table th,.service-cost-table td{padding:.85rem 1rem;border-top:1px solid var(--color-line);text-align:left;vertical-align:top;color:var(--color-muted)}
.service-cost-table th{color:var(--color-text,var(--text));font-weight:650;width:34%}
.service-cost-table thead th{background:var(--color-surface-raised,var(--color-surface));font-size:.9rem}
@media(max-width:850px){.service-layout{grid-template-columns:minmax(0,1fr)}.service-sidebar{position:static;grid-template-columns:minmax(0,1fr);order:0}.service-article{max-width:none}.service-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.25rem}}
@media(max-width:520px){.service-toc ol{grid-template-columns:minmax(0,1fr)}.service-toc,.service-call-card{padding:1rem}.service-cost-table{min-width:470px}}

/* Homepage guide sections added during the Phase 4 content audit. */
.home-guide-grid { align-items: stretch; }
.home-guide-grid .info-card { height: 100%; }
.home-guide-grid .info-card p { margin-bottom: 0; }
.tip-card { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .45rem 1rem; margin-top: 1.35rem; padding: 1.2rem 1.35rem; border: 1px solid rgb(255 179 0 / 30%); border-left: 4px solid var(--color-amber); border-radius: var(--radius-md); background: rgb(255 179 0 / 7%); }
.tip-card > strong { color: var(--color-amber-bright); }
.tip-card p { margin: 0; color: var(--color-muted); }
.cost-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.cost-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.cost-table th, .cost-table td { padding: .95rem 1rem; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; color: var(--color-muted); }
.cost-table thead th { background: var(--color-surface-raised); color: var(--color-ink); font-size: .9rem; font-weight: 750; }
.cost-table tbody th { width: 23%; color: var(--color-ink); font-weight: 700; }
.cost-table tbody tr:last-child th, .cost-table tbody tr:last-child td { border-bottom: 0; }
.cost-table-wrap:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 3px; }
#electrical-project-costs > .container > p { max-width: 76ch; }
#before-you-call .info-card { align-self: start; }
@media (max-width: 639px) {
  .tip-card { grid-template-columns: 1fr; gap: .35rem; }
  .cost-table th, .cost-table td { padding: .75rem; }
}


/* Phase 5 neighborhood-page components — same ProVolt design tokens and visual language. */
.location-service-grid { align-items: stretch; }
.location-service-card { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.location-service-card .card__link { margin-top: auto; }
.local-plan-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.local-checklist { display: grid; gap: .7rem; padding-left: 1.25rem; }
.local-plan-card { padding: clamp(1.25rem,3vw,2rem); }
.local-plan-card p + p { margin-top: 1rem; }
.location-final-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.5rem,4vw,2.5rem); border: 1px solid var(--color-line); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: 0 20px 40px -30px rgb(0 184 255 / 30%); }
.location-final-cta > div:first-child { max-width: 720px; }
.location-final-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.site-footer__areas { margin-top: 1.5rem; padding-block: 1.25rem; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.site-footer__areas-heading { margin: 0 0 .8rem; font-size: var(--text-sm); font-weight: 750; color: var(--color-ink); }
.site-footer__areas-links { display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.site-footer__areas-links a { color: var(--color-muted); text-decoration: none; font-size: var(--text-sm); }
.site-footer__areas-links a:hover { color: var(--color-cyan-bright); }
@media (max-width: 767px) { .local-plan-grid { grid-template-columns: 1fr; } .location-final-cta__actions { width: 100%; } .location-final-cta__actions .button { width: 100%; } }


/* Phase 5 keyboard skip link: never visible until keyboard focus. */
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 10000; transform: translateY(-180%); padding: .75rem 1rem; border: 2px solid var(--color-cyan-bright); border-radius: .5rem; background: var(--color-surface); color: var(--color-ink); font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--color-amber); outline-offset: 3px; }


/* Phase 5 correction: dependable navigation dropdowns on desktop and mobile. */
.nav-dropdown { position: relative; min-width: 0; }
.nav-dropdown__top { display: flex; align-items: center; gap: .12rem; }
.nav-dropdown__label { white-space: nowrap; }
.nav-dropdown__toggle { display: inline-flex; width: 1.8rem; min-width: 1.8rem; height: 2.35rem; align-items: center; justify-content: center; padding: .25rem; border: 0; border-radius: .45rem; background: transparent; color: var(--color-muted); cursor: pointer; }
.nav-dropdown__toggle svg { width: 1rem; height: 1rem; transition: transform var(--duration-fast) ease; }
.nav-dropdown__toggle:hover, .nav-dropdown__toggle[aria-expanded="true"] { background: rgb(0 184 255 / 10%); color: var(--color-cyan-bright); }
.nav-dropdown__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dropdown__menu { position: absolute; z-index: 500; top: calc(100% + .55rem); left: 0; display: none; width: min(19rem, 88vw); max-height: min(72vh, 38rem); grid-template-columns: minmax(0, 1fr); gap: .15rem; overflow-y: auto; padding: .55rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); background: var(--color-nav-menu); box-shadow: 0 22px 55px rgb(0 0 0 / 30%); }
.nav-dropdown.is-open > .nav-dropdown__menu { display: grid; }
.nav-dropdown__menu--services { width: min(31rem, 90vw); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-dropdown__item { display: flex; min-width: 0; align-items: center; padding: .68rem .75rem; border-radius: .6rem; color: var(--color-ink); font-size: .86rem; font-weight: 550; line-height: 1.35; text-decoration: none; }
.nav-dropdown__item:hover, .nav-dropdown__item:focus-visible { background: rgb(0 184 255 / 10%); color: var(--color-cyan-bright); }
.nav-dropdown__item--all { grid-column: 1 / -1; display: grid; gap: .15rem; margin-bottom: .25rem; padding: .85rem .8rem; border-bottom: 1px solid var(--color-line); border-radius: .55rem .55rem .25rem .25rem; }
.nav-dropdown__item--all strong { color: var(--color-cyan-bright); font-size: .9rem; }
.nav-dropdown__item--all span { color: var(--color-muted); font-size: .76rem; font-weight: 450; }
@media (max-width: 980px) and (min-width: 761px) {
  .nav-dropdown__menu--services { width: min(28rem, 90vw); }
  .nav-dropdown__item { font-size: .8rem; padding: .62rem .58rem; }
}
@media (max-width: 760px) {
  .site-nav__links { max-height: calc(100dvh - 4.7rem); overflow-y: auto; overscroll-behavior: contain; }
  .nav-dropdown { width: 100%; }
  .nav-dropdown__top { width: 100%; gap: .4rem; }
  .nav-dropdown__label { flex: 1; }
  .nav-dropdown__toggle { width: 3rem; min-width: 3rem; height: 3.05rem; border-bottom: 1px solid var(--color-line); border-radius: .3rem; }
  .nav-dropdown__menu, .nav-dropdown__menu--services { position: static; width: auto; max-height: none; grid-template-columns: minmax(0, 1fr); margin: .25rem 0 .65rem .35rem; padding: .35rem; border: 0; border-left: 2px solid var(--color-cyan); border-radius: 0; background: rgb(0 184 255 / 4%); box-shadow: none; }
  .nav-dropdown__item { padding: .75rem .8rem; font-size: .92rem; }
  .nav-dropdown__item--all { grid-column: auto; }
  .nav-dropdown__top .nav-dropdown__label { padding: .9rem .25rem; border-bottom: 1px solid var(--color-line); }
}

/* Service-page copy alignment: justify explanatory copy inside articles, cards and CTAs. */
.service-page .service-article p,
.service-page .service-article li,
.service-page .service-sidebar p,
.service-page .inner-cta p {
  text-align: justify;
  text-justify: inter-word;
}
.service-page .service-call-card p,
.service-page .faq-item__answer { text-align: justify; text-justify: inter-word; }

/* Tablet header breakpoint: retain the desktop page layout without squeezing navigation. */
@media (max-width: 1100px) and (min-width: 761px) {
  .site-nav { position: static; }
  .nav-toggle { display: grid; }
  .site-nav__links {
    position: absolute; top: calc(100% + 1px); right: var(--gutter); left: auto;
    display: none; width: min(29rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 5.25rem);
    flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: .5rem 1rem 1rem; border: 1px solid var(--color-line); border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--color-nav-menu);
    box-shadow: 0 18px 24px rgb(0 0 0 / 24%);
  }
  .site-nav__links.is-open { display: flex; }
  .site-nav__link { display: block; padding: .85rem .25rem; border-bottom: 1px solid var(--color-line); font-size: .98rem; }
  .nav-dropdown { width: 100%; }
  .nav-dropdown__top { width: 100%; gap: .4rem; }
  .nav-dropdown__label { flex: 1; }
  .nav-dropdown__toggle { width: 3rem; min-width: 3rem; height: 3.05rem; border-bottom: 1px solid var(--color-line); border-radius: .3rem; }
  .nav-dropdown__menu, .nav-dropdown__menu--services {
    position: static; width: auto; max-height: none; grid-template-columns: minmax(0, 1fr);
    margin: .25rem 0 .65rem .35rem; padding: .35rem; border: 0; border-left: 2px solid var(--color-cyan);
    border-radius: 0; background: rgb(0 184 255 / 4%); box-shadow: none;
  }
  .nav-dropdown__item { padding: .75rem .8rem; font-size: .92rem; }
  .nav-dropdown__item--all { grid-column: auto; }
}

/* Global copy alignment: apply readable, justified body text on every page.
   Headings, navigation, buttons, labels and data tables keep their purposeful alignment. */
main p,
main .faq-item__answer,
main .check-list > li,
main .plain-list > li,
main .service-detail-list > li,
main .local-checklist > li,
main .legal-copy li,
.site-footer p {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}




/* Phase 5: realistic service imagery — additive, responsive and aligned with existing components */
.hero__visual-frame { position: relative; }
.hero__visual-frame .hero__photo { display: block; width: 100%; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% center; }
.inner-hero--with-image .inner-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.inner-hero--with-image .inner-hero__content { max-width: none; min-width: 0; }
.inner-hero__image { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--color-line-strong); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-card); }
.inner-hero__image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.inner-hero__image figcaption { padding: .8rem 1rem; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.55; text-align: left; }
.service-infographic { max-width: 540px; margin: 1.5rem 0 1.8rem; overflow: hidden; border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); background: #081a2b; box-shadow: var(--shadow-card); }
.service-infographic img { display: block; width: 100%; height: auto; object-fit: contain; }
.service-infographic figcaption { padding: .65rem .9rem; color: #cbdce8; font-size: var(--text-xs); line-height: 1.5; text-align: left; }
@media (max-width: 820px) {
  .inner-hero--with-image .inner-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .inner-hero--with-image .inner-hero__content { max-width: 850px; }
  .inner-hero__image { width: min(100%, 650px); margin-inline: auto; }
  .inner-hero__image img { aspect-ratio: 16 / 10; }
  .service-infographic { margin-inline: auto; }
}
@media (max-width: 520px) {
  .inner-hero--with-image .inner-hero__grid { gap: 1.5rem; }
  .inner-hero__image { border-radius: var(--radius-lg); }
  .hero__visual-frame .hero__photo { aspect-ratio: 16 / 11; object-position: 60% center; }
}