/* CA Electrical and Building | electricianyarm.co.uk
   Brand: the logo's royal blue D shape with white "CA", black Poppins lettering, and the
   orange starburst around "SHOCK" in the strapline; the van adds a deep navy band and
   round white icon badges. Body text is DM Sans. */

/* ------------------------------------------------------------------ fonts -- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("poppins-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("poppins-700-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("dm-sans-var-latin.woff2") format("woff2"); }

/* ----------------------------------------------------------------- tokens -- */
:root {
  --blue: #1848a0;          /* the logo */
  --blue-d: #123a85;
  --blue-soft: #d6e2ff;
  --navy: #0d1c45;          /* the van's bands */
  --navy-deep: #0a1638;
  --ink: #111827;
  --text: #2b3445;
  --muted: #566074;
  --line: #d9e1ee;
  --tint: #eef3fb;
  --spark: #f29450;         /* the starburst around SHOCK */
  --spark-d: #e07b35;
  --white: #fff;
  --r: 14px;
  --r-lg: 22px;
  --gut: 24px;
  --wrapw: min(1200px, 100% - 2 * var(--gut));
  --shadow: 0 22px 48px -24px rgba(13, 28, 69, .45);
  --font-h: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-b: "DM Sans", "Segoe UI", system-ui, sans-serif;
  /* The logo's D: a flat left edge and a superellipse right side (power 2.35). */
  --dshape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0.00 0.00L9.82 0.09L17.68 0.36L24.89 0.82L31.65 1.45L38.06 2.27L44.15 3.26L49.94 4.42L55.44 5.76L60.64 7.27L65.55 8.94L70.15 10.78L74.46 12.77L78.45 14.92L82.12 17.23L85.46 19.68L88.48 22.28L91.15 25.03L93.48 27.92L95.47 30.97L97.09 34.17L98.36 37.56L99.27 41.16L99.82 45.09L100.00 50.00L99.82 54.91L99.27 58.84L98.36 62.44L97.09 65.83L95.47 69.03L93.48 72.08L91.15 74.97L88.48 77.72L85.46 80.32L82.12 82.77L78.45 85.08L74.46 87.23L70.15 89.22L65.55 91.06L60.64 92.73L55.44 94.24L49.94 95.58L44.15 96.74L38.06 97.73L31.65 98.55L24.89 99.18L17.68 99.64L9.82 99.91L0.00 100.00L0 100Z'/%3E%3C/svg%3E");
}
@media (max-width: 479px) { :root { --gut: 16px; } }

/* ------------------------------------------------------------------ base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--text);
  font: 400 1.0625rem/1.65 var(--font-b);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); text-underline-offset: .18em; }
a:hover { color: var(--blue-d); }
h1, h2, h3 { font-family: var(--font-h); font-weight: 700; color: var(--ink); line-height: 1.15;
  letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 1.25rem + 3vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.35rem); }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--spark); outline-offset: 2px; border-radius: 4px; }
[id] { scroll-margin-top: 100px; }
.wrap { width: var(--wrapw); margin-inline: auto; }
.i { width: 20px; height: 20px; flex: none; }
.muted { color: var(--muted); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--white); color: var(--blue);
  padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 16px; }

/* ---------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 11px 22px; border: 2px solid transparent; border-radius: 999px;
  font: 600 1rem/1.2 var(--font-h); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn .i { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn--blue { background: var(--blue); color: var(--white); }
.btn--blue:hover { background: var(--blue-d); color: var(--white); }
.btn--spark { background: var(--spark); color: var(--navy); box-shadow: 0 10px 22px -12px rgba(224, 123, 53, .9); }
.btn--spark:hover { background: var(--spark-d); color: var(--navy); }
.btn--line { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn--line:hover { background: var(--blue); color: var(--white); }
.btn--ghost { border-color: rgba(255, 255, 255, .7); color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--navy); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .7; cursor: progress; transform: none; }

/* --------------------------------------------------- strapline + SHOCK burst -- */
.tagline { font-family: var(--font-h); font-weight: 700; white-space: nowrap; }
.shock { position: relative; display: inline-block; padding: 0 .85em; margin: 0 -.15em; color: var(--spark); letter-spacing: .02em; }
.shock__burst {
  position: absolute; left: 0; top: 50%; width: 100%; height: 2.1em; transform: translateY(-50%);
  fill: none; stroke: var(--spark); stroke-width: 1.6; stroke-linejoin: round; overflow: visible;
}
.shock__burst path { vector-effect: non-scaling-stroke; }
.shock__word { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .shock__burst { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
  .tagline:hover .shock__burst, .cta__tagline:hover .shock__burst { transform: translateY(-50%) scale(1.08) rotate(-2deg); }
}

/* ---------------------------------------------- roof bar (the van's sign) -- */
.roofbar { background: var(--navy); color: var(--white); overflow: hidden; }
.roofbar__in { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 40px; }
.roofbar p { margin: 0; font: 600 .9rem/1.2 var(--font-h); }
.roofbar__open { display: none; align-items: center; gap: 8px; color: #dfe6f6; }
.roofbar__open .i { width: 17px; height: 17px; color: var(--spark); }
@media (min-width: 720px) {
  .roofbar__in { justify-content: space-between; }
  .roofbar__open { display: flex; }
}

/* ----------------------------------------------------------------- header -- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(6px); }
.header__in { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; min-height: 70px; padding-block: 9px; }
.brand { display: block; flex: none; }
.brand img { height: 50px; width: auto; }
.header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header__tel { display: none; align-items: center; gap: 8px; color: var(--blue); text-decoration: none;
  font: 700 1.02rem/1 var(--font-h); white-space: nowrap; }
.header__tel .i { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--tint); }
.header__tel:hover { color: var(--blue-d); }
.header__cta { min-height: 44px; padding: 9px 16px; font-size: .95rem; white-space: nowrap; }
.burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border: 2px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; padding: 0; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2.5px; border-radius: 2px;
  background: var(--ink); transition: transform .2s, opacity .2s; }
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6.5px; }
.burger span::after { top: 6.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6.5px) rotate(-45deg); }

/* phone and tablet menu: a panel under the header row */
.nav { order: 3; width: 100%; }
.js .nav { display: none; }
.js .nav.is-open { display: block; }
.nav__list { border-top: 1px solid var(--line); padding: 6px 0 10px; }
.nav__list a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--tint); color: var(--ink);
  font: 600 1.05rem/1.3 var(--font-h); text-decoration: none; }
.nav__list a[aria-current="page"] { color: var(--blue); }
.nav__list a:hover { color: var(--blue); }

@media (max-width: 359px) {
  .header__cta { padding: 9px 12px; font-size: .9rem; }
  .header__in { gap: 10px 8px; }
}
@media (min-width: 720px) {
  .header__tel { display: inline-flex; }
}
@media (min-width: 1000px) {
  .header__in { flex-wrap: nowrap; min-height: 84px; gap: 20px; }
  .brand img { height: 64px; }
  .burger { display: none; }
  .nav, .js .nav { display: block; order: 0; width: auto; margin-left: auto; }
  .nav__list { display: flex; gap: 2px; border: 0; padding: 0; }
  .nav__list a { position: relative; padding: 10px 12px; border: 0; border-radius: 999px; font-size: .98rem; }
  .nav__list a:hover { background: var(--tint); }
  .nav__list a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px;
    height: 3px; border-radius: 3px; background: var(--spark); }
  .header__actions { margin-left: 8px; gap: 16px; }
}
@media (min-width: 1000px) and (max-width: 1099px) {
  .nav__list a { padding: 10px 9px; }
  .header__in { gap: 14px; }
  .header__actions { gap: 12px; }
}

/* ------------------------------------------- the D band (heroes) ---------- */
/* Phones and tablets: a plain blue band. From 1000px the band becomes the logo's
   D shape: a flat strip from the left edge (::before) and the superellipse (::after),
   sized so the words always sit inside the blue. */
.dband { position: relative; isolation: isolate; overflow: hidden; background: var(--blue); color: var(--white); }
.dband h1, .dband h2, .dband h3 { color: var(--white); }
.dband .lead { color: #e8eefc; }
@media (min-width: 1000px) {
  .dband { background: transparent;
    --side: clamp(360px, 33vw, 430px); --gap: 56px;
    --L: calc((100% - var(--wrapw)) / 2);
    --TR: calc(var(--L) + var(--wrapw) - var(--side) - var(--gap));   /* right edge of the words */
    --DL: max(0px, calc(var(--L) - 200px));                           /* where the curve's box starts */
  }
  .dband::before, .dband::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; background: var(--blue); }
  .dband::before { left: 0; width: calc(var(--DL) + 2px); }
  .dband::after { left: var(--DL); width: calc(var(--TR) - var(--DL) + 250px);
    -webkit-mask: var(--dshape) 0 0 / 100% 100% no-repeat; mask: var(--dshape) 0 0 / 100% 100% no-repeat; }
}

/* ------------------------------------------------------------- home hero -- */
.hero { padding: 26px 0 40px; }
.hero__grid { display: grid; gap: 20px; }
.hero h1 { margin: 0; font-size: clamp(2.2rem, 1.35rem + 3.4vw, 3.6rem); }
.hero h1 span { display: block; margin-top: .4em; font-size: .46em; font-weight: 600; line-height: 1.3;
  color: var(--blue-soft); letter-spacing: 0; }
.hero .lead { font-size: 1.12rem; margin-bottom: 18px; max-width: 40em; }
.points { display: grid; gap: 10px; margin-bottom: 20px; }
.points li { display: flex; align-items: center; gap: 12px; font: 600 1rem/1.3 var(--font-h); color: var(--white); }
.rating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px;
  border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--white); text-decoration: none;
  font-size: .98rem; transition: background-color .2s; }
.rating:hover { background: rgba(255, 255, 255, .2); color: var(--white); }
.rating strong { font-family: var(--font-h); }
.hero .stars__base { color: rgba(255, 255, 255, .35); }
@media (min-width: 1000px) {
  .hero { padding: 64px 0 72px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) var(--side); column-gap: var(--gap); row-gap: 22px;
    grid-template-areas: "title card" "copy card"; align-items: start; }
  .hero__title { grid-area: title; align-self: end; padding-top: 36px; }
  .hero__copy { grid-area: copy; padding-bottom: 36px; }
  .hero__card { grid-area: card; align-self: center; }
}

/* ------------------------------------------------------------- the badges -- */
.badge { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue); color: var(--white); box-shadow: 0 0 0 4px var(--white); }
.badge .i { width: 22px; height: 22px; }
.dband .badge, .cta .badge { background: var(--white); color: var(--blue); box-shadow: none; }

/* ------------------------------------------------------------- form card -- */
.fcard { background: var(--white); color: var(--text); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow), 0 0 0 1px rgba(13, 28, 69, .06); }
.fcard__head { background: var(--navy); color: #d9e2f5; padding: 18px 22px 16px; border-bottom: 4px solid var(--spark); }
.fcard__head p { margin: 0; font-size: .95rem; line-height: 1.5; }
.fcard__title { margin: 0 0 6px; color: var(--white); font-size: 1.3rem; }
.dband .fcard h2, .dband .fcard h3 { color: var(--white); }
.form { padding: 18px 22px 20px; }
.form__row { display: grid; gap: 0 14px; }
@media (min-width: 440px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 5px; font: 600 .92rem/1.3 var(--font-h); color: var(--ink); }
.opt { font: 400 .85rem var(--font-b); color: var(--muted); }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 48px; padding: 11px 13px; border: 1.5px solid #c5d0e3; border-radius: 10px;
  background: var(--white); color: var(--ink); font: 400 16px/1.4 var(--font-b);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231848a0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(24, 72, 160, .16); }
.field [aria-invalid="true"] { border-color: #b42318; }
.field__error { margin: 5px 0 0; color: #b42318; font-size: .9rem; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { margin-top: 4px; min-height: 52px; font-size: 1.05rem; }
.form__status { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; border-left: 4px solid var(--spark);
  background: #fff4ec; color: var(--ink); font-weight: 600; }
.form__status a { font-weight: 700; white-space: nowrap; }
.form__small { margin: 10px 0 0; color: var(--muted); font-size: .85rem; }

/* --------------------------------------------------------------- sections -- */
.sec { padding: clamp(56px, 7vw, 96px) 0; }
.sec__head { max-width: 760px; margin-bottom: 30px; }
.sec__head p { color: var(--muted); font-size: 1.08rem; margin: 0; }
.ticks { display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .i { margin-top: 3px; color: var(--blue); }

/* intro */
.intro__grid { display: grid; gap: 32px; align-items: center; }
.intro .ticks { margin-top: 18px; font-weight: 600; color: var(--ink); }
.intro__photo img { border-radius: var(--r-lg); box-shadow: var(--shadow); }
.intro__photo figcaption { margin-top: 12px; color: var(--muted); font-size: .95rem; }
@media (min-width: 1000px) { .intro__grid { grid-template-columns: 1fr 1.05fr; gap: 64px; } }

/* service cards (home) */
.services { background: var(--tint); }
.scards { display: grid; gap: 22px; }
@media (min-width: 640px) { .scards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .scards { grid-template-columns: repeat(3, 1fr); } }
.scard { display: flex; flex-direction: column; background: var(--white); border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }
.scard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.scard__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.scard__body { position: relative; padding: 0 22px 22px; }
.scard__body .badge { margin-top: -23px; margin-bottom: 10px; }
.scard h3 { font-size: 1.2rem; margin-bottom: .35em; }
.scard h3 a { color: var(--ink); text-decoration: none; }
.scard h3 a:hover { color: var(--blue); }
.scard p { margin: 0; color: var(--muted); }
.services__more { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 34px 0 0; }

/* reviews */
.reviews { background: var(--white); }
.reviews__grid { display: grid; gap: 32px; }
.reviews__score .score { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.score__num { font: 700 4.4rem/1 var(--font-h); color: var(--blue); letter-spacing: -.03em; }
.score__of { font: 600 1.05rem var(--font-h); color: var(--ink); }
.score__note { margin: 10px 0 12px; color: var(--muted); font-size: .95rem; }
.reviews__list { display: grid; gap: 18px; }
@media (min-width: 700px) { .reviews__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .reviews__grid { grid-template-columns: 330px 1fr; gap: 56px; align-items: start; } }
.review { display: flex; flex-direction: column; padding: 22px 24px; border-radius: 18px; background: var(--tint);
  border-left: 5px solid var(--blue); }
.review::before { content: "\201C"; display: block; height: 34px; font: 700 4.2rem/1 Georgia, "Times New Roman", serif; color: var(--spark); }
.review blockquote { margin: 0; flex: 1; }
.review blockquote p { margin: 0 0 12px; color: var(--ink); font-size: 1.04rem; }
.review figcaption { font: 600 .9rem/1.3 var(--font-h); color: var(--blue); }
.review figcaption span { display: block; color: var(--muted); font: 400 .85rem var(--font-b); }
.reviews__note { margin-top: 22px; color: var(--muted); font-size: .9rem; }

/* stars */
.stars { position: relative; display: inline-block; line-height: 0; color: var(--spark); vertical-align: middle; }
.stars__base, .stars__fill { display: inline-flex; gap: 2px; }
.stars__base { color: #cdd6e6; }
.stars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--spark); }
.stars svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.stars--lg svg { width: 28px; height: 28px; }

/* gallery */
.work { background: var(--tint); }
.work__grid { display: grid; gap: 22px; }
@media (min-width: 600px) { .work__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .work__grid { grid-template-columns: repeat(3, 1fr); } }
.work figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.work figcaption { margin-top: 10px; font: 600 .98rem/1.35 var(--font-h); color: var(--ink); }

/* areas teaser */
.areas-teaser__in { display: grid; gap: 28px; align-items: center; }
.areas-teaser p { color: var(--muted); }
@media (min-width: 1000px) { .areas-teaser__in { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: var(--tint); color: var(--ink); font: 600 .95rem/1.2 var(--font-h); }
.chips .i { width: 17px; height: 17px; color: var(--blue); }

/* FAQs */
.faqs { background: var(--tint); }
.faqs__in { max-width: 880px; }
.faq { background: var(--white); border-radius: var(--r); margin-bottom: 12px; border: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px;
  cursor: pointer; list-style: none; font: 600 1.06rem/1.35 var(--font-h); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq__pm { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); }
.faq__pm::before, .faq__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px;
  margin: -1.25px 0 0 -7px; border-radius: 2px; background: var(--white); transition: transform .2s; }
.faq__pm::after { transform: rotate(90deg); }
.faq[open] .faq__pm::after { transform: rotate(0deg); }
.faq__a { padding: 0 20px 18px; }
.faq__a p { margin: 0; }

/* CTA band (the van's navy band) */
.cta { background: var(--navy); color: #d9e2f5; padding: clamp(48px, 6vw, 80px) 0; overflow: hidden; }
.cta__in { display: grid; gap: 32px; align-items: center; }
.cta h2 { color: var(--white); margin-bottom: .35em; }
.cta__copy p { margin: 0 0 22px; font-size: 1.08rem; max-width: 34em; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta__tagline { margin: 0; color: var(--white); font: 700 clamp(1.45rem, 1rem + 2vw, 2.6rem)/1.25 var(--font-h); }
.cta__tagline .tagline { white-space: normal; }
.cta__tagline .shock { white-space: nowrap; }
@media (min-width: 900px) { .cta__in { grid-template-columns: 1.2fr 1fr; gap: 56px; } .cta__tagline { text-align: right; } }

/* --------------------------------------------------------- inner page hero -- */
.phero { padding: 26px 0 36px; }
.phero__grid { display: grid; gap: 24px; align-items: center; }
.phero h1 { margin-bottom: .35em; }
.phero .lead { font-size: 1.12rem; margin: 0; max-width: 40em; }
.phero__side img { border-radius: var(--r-lg); box-shadow: var(--shadow); }
.phero__call { padding: 22px; border-radius: var(--r-lg); background: var(--white); color: var(--text); box-shadow: var(--shadow); }
.phero__call-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 1.25rem/1.2 var(--font-h); color: var(--ink); }
.phero__call-h .i { width: 26px; height: 26px; color: var(--spark); }
.phero__call .btn { width: 100%; margin-top: 4px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none;
  font: 600 .9rem/1.3 var(--font-h); color: var(--blue-soft); }
.crumbs li + li::before { content: "\203A"; margin-right: 6px; color: var(--spark); }
.crumbs a { color: var(--white); }
@media (min-width: 1000px) {
  .phero { padding: 64px 0 72px; min-height: 380px; }
  .phero__grid { grid-template-columns: minmax(0, 1fr) var(--side); column-gap: var(--gap); }
  .phero__copy { padding-block: 28px; }
  .phero:not(.phero--side) { --side: 0px; --gap: 0px; }
  .phero:not(.phero--side) .phero__grid { grid-template-columns: minmax(0, 760px); }
  .phero:not(.phero--side)::after { width: min(calc(var(--L) + min(760px, var(--wrapw)) - var(--DL) + 300px), calc(100% - var(--DL) - 24px)); }
}

/* --------------------------------------------------------------- services -- */
.jump { padding: 40px 0; background: var(--tint); }
.jump__title { font-size: 1.25rem; margin-bottom: 16px; }
.jump__list { display: grid; gap: 10px; }
@media (min-width: 560px) { .jump__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .jump__list { grid-template-columns: repeat(3, 1fr); } }
.jump__list a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border-radius: var(--r);
  background: var(--white); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font: 600 1rem/1.3 var(--font-h); transition: border-color .2s, color .2s, transform .2s; }
.jump__list a:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.jump__list .i { width: 22px; height: 22px; color: var(--blue); }

.svc { padding: clamp(52px, 6.5vw, 88px) 0; border-bottom: 1px solid var(--line); }
.svc__grid { display: grid; gap: 28px; align-items: center; }
.svc__photo img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.svc__body h2 { display: flex; align-items: center; gap: 14px; }
.svc__lists { display: grid; gap: 18px 28px; margin: 22px 0 24px; padding: 22px 24px; border-radius: 18px; background: var(--tint); }
.svc__lists h3 { margin-bottom: 10px; color: var(--blue); font-size: 1.05rem; }
.svc__lists .ticks { font-size: 1rem; }
@media (min-width: 640px) { .svc__lists { grid-template-columns: 1fr 1fr; } }
.svc__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; }
.svc__tel { display: inline-flex; align-items: center; gap: 8px; font: 600 1rem/1.2 var(--font-h); text-decoration: none; }
@media (min-width: 1000px) {
  .svc__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .svc__photo { position: sticky; top: 120px; }
  .svc--flip .svc__photo { order: 2; }
}

/* ------------------------------------------------------------------ about -- */
.story__grid { display: grid; gap: 32px; align-items: center; }
.story__tag { position: relative; isolation: isolate; padding: 40px 22% 40px 32px; color: #e8eefc; }
.story__tag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue);
  -webkit-mask: var(--dshape) 0 0 / 100% 100% no-repeat; mask: var(--dshape) 0 0 / 100% 100% no-repeat; }
.story__tag p { margin: 0; position: relative; }
.story__big { margin-bottom: 12px !important; color: var(--white); font: 700 1.7rem/1.25 var(--font-h); }
.story__big .tagline { white-space: normal; }
.story__big .shock { white-space: nowrap; }
@media (min-width: 1000px) { .story__grid { grid-template-columns: 1.25fr .75fr; gap: 64px; } }

.themes { background: var(--tint); }
.themes__list { display: grid; gap: 18px; }
@media (min-width: 800px) { .themes__list { grid-template-columns: 1fr 1fr; } }
.themes__list li { display: flex; gap: 16px; padding: 22px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); }
.themes__list h3 { margin-bottom: .3em; }
.themes__list p { margin: 0; color: var(--muted); }

.how__list, .steps { display: grid; gap: 18px; }
@media (min-width: 900px) { .how__list, .steps { grid-template-columns: repeat(3, 1fr); } }
.how__list li, .steps li { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 18px;
  background: var(--white); border: 1px solid var(--line); }
.how__list h3, .steps h3 { margin-bottom: .3em; }
.how__list p, .steps p { margin: 0; color: var(--muted); }

/* --------------------------------------------------------------- coverage -- */
.areas__grid { display: grid; gap: 36px; }
.areas__groups { display: grid; gap: 26px 32px; margin: 24px 0; }
@media (min-width: 640px) { .areas__groups { grid-template-columns: 1fr 1fr; } }
.areas__group h3 { margin-bottom: 8px; color: var(--blue); }
.areas__list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.pc { padding: 2px 9px; border-radius: 999px; background: var(--tint); color: var(--muted); font: 600 .82rem/1.5 var(--font-h); }
.areas__note { color: var(--muted); }
.map { overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--tint); aspect-ratio: 4 / 3; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 1000px) {
  .areas__grid { grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
  .areas__map { position: sticky; top: 110px; }
  .areas__map .map { aspect-ratio: 4 / 5; }
}

/* ---------------------------------------------------------------- contact -- */
.contact__grid { display: grid; gap: 36px; align-items: start; }
@media (min-width: 1000px) { .contact__grid { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.contact__side h2 { font-size: 1.5rem; }
.cdetails { display: grid; gap: 18px; margin-bottom: 30px; }
.cdetails li { display: flex; gap: 16px; }
.cdetails h3 { margin-bottom: 2px; }
.cdetails p { margin: 0; }
.cdetails a { font-weight: 700; overflow-wrap: anywhere; }
.cdetails .muted { font-size: .95rem; }
.next-title { margin-top: 8px; }
.contact__map { margin-top: 56px; }
.contact__map h2 { font-size: 1.5rem; }
.contact__map .map { aspect-ratio: auto; height: 420px; }

/* -------------------------------------------------------- thanks and 404 -- */
.thanks__in .steps, .thanks__urgent { max-width: 1000px; }
.thanks__urgent { display: flex; gap: 12px; align-items: flex-start; margin: 26px 0; padding: 16px 18px; border-radius: var(--r);
  background: #fff4ec; border-left: 5px solid var(--spark); color: var(--ink); font-weight: 600; }
.thanks__urgent .i { color: var(--spark-d); margin-top: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.lost__list { display: grid; gap: 10px; margin-bottom: 28px; }
@media (min-width: 640px) { .lost__list { grid-template-columns: repeat(3, 1fr); } }
.lost__list a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r); background: var(--tint);
  color: var(--ink); text-decoration: none; font: 600 1rem var(--font-h); }
.lost__list a:hover { color: var(--blue); }

/* ----------------------------------------------------------------- footer -- */
.footer { background: var(--navy-deep); color: #c9d3ea; padding: 60px 0 112px; font-size: 1rem; }
.footer a { color: #e6ecf8; text-decoration: none; }
.footer a:hover { color: var(--spark); text-decoration: underline; }
.footer__grid { display: grid; gap: 34px; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.35fr 1.1fr .7fr 1fr; gap: 40px; } }
.footer__logo { display: inline-block; padding: 12px 16px; border-radius: 16px; background: var(--white); }
.footer__logo img { height: 62px; width: auto; }
.footer__brand p { margin: 16px 0 0; max-width: 30em; }
.footer__tag { color: var(--white); font-size: 1.15rem; }
.footer h2 { margin-bottom: 14px; color: var(--white); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
.footer__col ul { display: grid; gap: 9px; }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact .i { margin-top: 3px; color: var(--spark); }
.footer__contact a { overflow-wrap: anywhere; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 44px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14); font-size: .9rem; color: #b9c4de; }
.footer__base p { margin: 0; }

/* ------------------------------------------------- floating call button -- */
.fcall { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; width: 60px; height: 60px; border-radius: 999px; background: var(--spark); color: var(--navy); text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(13, 28, 69, .55), 0 0 0 3px var(--white); transition: transform .2s, background-color .2s; }
.fcall:hover { background: var(--spark-d); color: var(--navy); transform: translateY(-2px); }
.fcall .i { width: 26px; height: 26px; }
.fcall__num { display: none; font: 700 1.05rem/1 var(--font-h); white-space: nowrap; }
@media (min-width: 720px) {
  .fcall { width: auto; padding: 0 22px 0 18px; }
  .fcall__num { display: inline; }
}
@media (prefers-reduced-motion: no-preference) {
  .fcall::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(242, 148, 80, .6);
    animation: ring 2.8s ease-out 1.5s 3; pointer-events: none; }
  @keyframes ring { to { box-shadow: 0 0 0 16px rgba(242, 148, 80, 0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .roofbar, .fcall, .burger, .hero__card, .cta, .map { display: none !important; }
  .header { position: static; }
}