/*
Theme Name: Mission Critical Electric
Theme URI: https://mcelectric-ca.com
Author: Empire Ops
Description: Custom block theme for Mission Critical Electric, a licensed California electrical contractor serving residential and commercial clients across Riverside and San Bernardino counties. Industrial dark direction with amber and orange accents.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mission-critical-electric
Tags: block-patterns, full-site-editing, one-column, custom-colors, custom-logo, custom-menu, accessibility-ready
*/

/* ============================================================
   BASE
   ============================================================ */
.wp-site-blocks { padding: 0; }

:where(.wp-site-blocks) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ============================================================
   ACCESSIBILITY
   Focus rings stay. Never remove them.
   ============================================================ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--amber);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	padding: 12px 22px;
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus { left: 6px; top: 6px; }

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ============================================================
   BASE RESET
   The component rules below were authored against a bare page. This
   restores that starting point on top of WordPress's own defaults,
   which otherwise reintroduce list bullets, link colours and the
   margins the layout assumes are absent.
   ============================================================ */
.wp-site-blocks *,
.wp-site-blocks *::before,
.wp-site-blocks *::after{box-sizing:border-box}

.wp-site-blocks img{max-width:100%;display:block;height:auto}

.wp-site-blocks a{color:inherit;text-decoration:none}

.wp-site-blocks ul:not(.wp-block-list){list-style:none;margin:0;padding-left:0}
.wp-site-blocks li{margin:0}

.wp-site-blocks p{margin:0}

.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4{
  font-family:"Barlow Condensed","Arial Narrow",sans-serif;
  font-weight:700;line-height:1.05;
  text-transform:uppercase;letter-spacing:.01em;
  margin:0;
}
.wp-site-blocks h1{font-size:clamp(2.75rem,1.8rem + 4.2vw,4.5rem)}
.wp-site-blocks h2{font-size:clamp(2rem,1.5rem + 2.2vw,2.85rem)}
.wp-site-blocks h3{font-size:clamp(1.35rem,1.2rem + .8vw,1.65rem)}

body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;
  color:var(--wp--preset--color--ink);
  background:var(--wp--preset--color--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ============================================================
   TOKEN ALIASES
   The component rules below were authored against short variable
   names. Rather than rewrite every declaration, the short names are
   mapped once here onto the theme.json presets, so the palette stays
   editable from the Site Editor and the CSS stays readable.
   ============================================================ */
:root{
  --ink:var(--wp--preset--color--ink);
  --panel:var(--wp--preset--color--panel);
  --panel-2:var(--wp--preset--color--panel-2);
  --orange:var(--wp--preset--color--orange);
  --amber:var(--wp--preset--color--amber);
  --white:var(--wp--preset--color--white);
  --paper:var(--wp--preset--color--paper);
  --slate:var(--wp--preset--color--slate);
  --hairline:var(--wp--preset--color--hairline);
  --line:rgba(255,255,255,.12);
  --dim:#A4ACB8;

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --gutter:24px;
  --maxw:1180px;
  --radius:8px;
  --header-h:76px;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.band{width:100%}
.inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.band--pad{padding-block:var(--s9)}
.band--ink{background:var(--ink);color:var(--white)}
.band--panel{background:var(--panel);color:var(--white)}
.band--paper{background:var(--paper)}
.band--white{background:var(--white)}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/*
   Reveal-on-scroll, opt-in.

   These used to start at opacity:0 and wait for JavaScript to add .in.
   That left a window between the stylesheet applying and the script
   running where the page rendered its header and footer around an empty
   hole -- and if the script never ran, the content never appeared.

   Now nothing is hidden until JS has set data-reveal on the document,
   which it does only when it is about to animate. Without JavaScript,
   or before it runs, everything is simply visible.
*/
.reveal{
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
[data-reveal="on"] .reveal{opacity:0;transform:translateY(26px)}
[data-reveal="on"] .reveal.in{opacity:1;transform:none}

/*
   The hero is above the fold on every page, so there is no scroll for
   it to reveal on. Animating it only produced an empty hero for the
   first beat of the load -- header and background painted, headline
   and buttons missing -- which reads as a broken page rather than as
   an effect. It renders immediately; everything below it still fades
   up on scroll.
*/
[data-reveal="on"] .hero .reveal{opacity:1;transform:none;transition:none}

/* ============================================================
   SECTION INTRO
   ============================================================ */
.intro{margin-bottom:var(--s7)}
.intro .eyebrow{
  display:block;font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);margin-bottom:var(--s3);
}
.band--ink .intro .eyebrow,.band--panel .intro .eyebrow{color:var(--amber)}
.intro h2{margin-bottom:var(--s3)}
.intro p{font-size:1.05rem;color:var(--slate);max-width:62ch}
.band--ink .intro p{color:var(--dim)}


/* ============================================================
   BUTTONS
   The design's own button, used throughout the home-page pattern.
   Core block buttons are mapped onto this same treatment further
   down, so the two never diverge.
   ============================================================ */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px 26px;border-radius:4px;
  border:1px solid var(--amber);background:var(--amber);color:var(--ink);
  font-size:.9rem;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;cursor:pointer;
  transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out,
             transform .2s ease-out,box-shadow .2s ease-out;
}
.btn:hover{
  background:var(--orange);border-color:var(--orange);color:var(--white);
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,102,0,.28);
}
.btn:active{transform:translateY(0)}

/* Light sweeps across the button on hover. */
.btn::after{
  content:"";position:absolute;top:0;left:-150%;
  width:55%;height:100%;pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  transition:left .65s cubic-bezier(.4,0,.2,1);
}
.btn:hover::after{left:160%}
.btn--outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.35);color:var(--white)}
.btn--ghost:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn--ink:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn--white{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn--white:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* ============================================================
   1. UTILITY BAR
   ============================================================ */
.utility{background:var(--ink);border-bottom:1px solid var(--line)}
.utility .inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--s4);padding-block:10px;flex-wrap:wrap;
}
.utility p{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#8A929E;line-height:1.4;
}
.utility strong{color:var(--amber);font-weight:700}

/* ============================================================
   2. HEADER + MEGA MENU
   ============================================================ */
.site-header{
  background:var(--ink);color:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
}
.site-header .inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);padding-block:var(--s4);
}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{
  height:70px;width:auto;
  /* The logo art is built on black, so it sits directly on the dark header */
}
.brand__tag{
  font-size:.58rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);display:block;margin-top:2px;
}
.nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(180deg)}
.nav__item{position:static}

.nav__item:hover .mega,.nav__item:focus-within .mega{
  opacity:1;visibility:visible;transform:translateY(0);
}
.mega__inner{
  max-width:var(--maxw);margin-inline:auto;
  padding:var(--s7) var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);
}
.mega__col h4{
  font-family:Inter,sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin-bottom:var(--s4);
}
.mega__col li{margin-bottom:var(--s2)}
.mega__col li a{
  display:block;font-size:.92rem;color:rgba(255,255,255,.78);
  padding:5px 0;transition:color .18s ease-out,padding-left .18s ease-out;
}
.mega__col li a:hover{color:var(--amber);padding-left:6px}
.mega__col li a small{display:block;font-size:.76rem;color:#7C8492;font-weight:400}
.mega__promo{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s5);
}
.mega__promo h4{color:var(--amber);margin-bottom:var(--s3)}
.mega__promo p{font-size:.85rem;color:var(--dim);margin-bottom:var(--s4)}
.mega__promo .btn{width:100%;font-size:.8rem;padding:10px 16px}

.header__cta{display:flex;align-items:center;gap:var(--s4);flex-shrink:0}
.header__phone b{display:block;font-size:1rem;font-weight:800;line-height:1.2;white-space:nowrap}
.header__phone span{
  display:block;font-size:.56rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#8A929E;
}

/* ============================================================
   3. HERO + PARALLAX
   ============================================================ */
.hero{
  position:relative;background:var(--ink);color:var(--white);
  overflow:hidden;isolation:isolate;
}
/*
background-attachment: fixed is what the client's live site uses for its
hero, so the photograph stays locked to the viewport while the section
scrolls over it. Matched here. iOS and Android ignore fixed attachment,
so .no-fixed-bg below swaps in a taller layer that JS nudges instead.
*/
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  /* The home hero. Set here rather than inline because the pattern's
     div carries no style attribute, and served as WebP where the
     browser takes it -- a CSS background cannot use <picture>. */
  background-image:url('/wp-content/uploads/2026/08/underground-electrical-conduit-installation-1600.jpg');
  background-image:image-set(
    url('/wp-content/uploads/2026/08/underground-electrical-conduit-installation-1600.webp') type('image/webp'),
    url('/wp-content/uploads/2026/08/underground-electrical-conduit-installation-1600.jpg') type('image/jpeg'));
  background-position:50% 42%;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.no-fixed-bg .hero__bg{
  inset:-12% 0;
  background-attachment:scroll;
  will-change:transform;
}

/* ---------- AMBIENT HERO MOTION — "industrial" concept
   Two amber pools drifting on opposite cycles, plus sparks that fall
   across the frame. The most atmospheric of the three directions, to
   suit the black ground it sits on. ---------- */
.hero::before{
  content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 38% at 22% 32%, rgba(255,181,0,.22) 0%, transparent 62%),
    radial-gradient(34% 34% at 68% 62%, rgba(255,102,0,.18) 0%, transparent 60%);
  filter:blur(70px);
  animation:heroGlow 22s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  0%{transform:translate3d(-3%,-2%,0) scale(1)}
  100%{transform:translate3d(4%,3%,0) scale(1.08)}
}

/* Sparks. The elements are generated in JS so the count can be tuned
   in one place, and skipped entirely for reduced-motion users. */
.hero__sparks{
  position:absolute;inset:0;z-index:-1;
  overflow:hidden;pointer-events:none;
}
.spark{
  position:absolute;top:-8%;
  width:2px;height:56px;border-radius:2px;
  background:linear-gradient(180deg,var(--amber),transparent);
  opacity:0;
  transform:rotate(206deg);
  animation:sparkFall linear infinite;
}
@keyframes sparkFall{
  0%{transform:translate3d(0,0,0) rotate(206deg);opacity:0}
  8%{opacity:.75}
  72%{opacity:.5}
  100%{transform:translate3d(-340px,760px,0) rotate(206deg);opacity:0}
}

/* Headline sweep — a bar of light passes over the amber word twice. */
.hero h1 span{
  background:linear-gradient(90deg,var(--amber) 0%,#fff3d0 45%,var(--amber) 90%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:sweep 4.5s cubic-bezier(.4,0,.2,1) .6s 2;
}
@keyframes sweep{
  0%{background-position:180% 0}
  100%{background-position:-40% 0}
}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(10,10,10,.96) 26%,
    rgba(10,10,10,.80) 58%,
    rgba(10,10,10,.52) 100%);
}
.hero .inner{position:relative;padding-block:var(--s9)}
p.hero__status,
.hero__status{
  display:inline-flex;align-items:center;gap:10px;padding:7px 16px;
  border:1px solid rgba(255,255,255,.2);border-radius:100px;
  background:rgba(255,255,255,.05);
  font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#C9CFD8;margin-bottom:var(--s6);
}
.hero__status::before{
  content:"";width:8px;height:8px;flex-shrink:0;border-radius:50%;
  background:#2BD576;box-shadow:0 0 0 3px rgba(43,213,118,.22);
}
/* "Where power meets" / "precision" — the span forces the break so the
   headline always reads as two lines, never three. */
.hero h1{
  /* 28ch keeps 'Licensed electrician for' on one line; the amber
     span below is display:block and takes the other two. */
  max-width:28ch;margin-bottom:var(--s5);
  text-wrap:balance;
}
.hero h1 span{color:var(--amber);display:block}
/* p.hero__lead, not .hero__lead: the `.wp-site-blocks p{margin:0}`
   reset is class+element and would otherwise win. */
p.hero__lead{font-size:1.1rem;color:#C9CFD8;max-width:54ch;margin-bottom:var(--s7)}
.hero__actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s7)}
.hero__trust{
  display:flex;gap:var(--s6);flex-wrap:wrap;
  padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.14);
}
.hero__trust div{font-size:.78rem;color:#C9CFD8;font-weight:500}
.hero__trust b{
  display:block;color:var(--amber);font-size:.68rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:2px;
}

/* ============================================================
   4. METRIC STRIP
   ============================================================ */
.metrics{background:var(--panel);color:var(--white)}
.metrics .inner{padding-inline:0}
.metrics__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.metric{padding:var(--s6) var(--s5);border-right:1px solid var(--line);text-align:center}
.metric:last-child{border-right:0}
.metric b{
  display:block;font-family:"Barlow Condensed",sans-serif;
  font-size:2.6rem;font-weight:700;line-height:1;color:var(--amber);
  font-variant-numeric:tabular-nums;margin-bottom:var(--s2);
}
.metric span{
  display:block;font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}

/* ============================================================
   5. SERVICE CARDS (with images)
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.card{
  position:relative;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid var(--hairline);
  border-radius:var(--radius);
  transition:transform .25s ease-out,box-shadow .25s ease-out,border-color .25s;
}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(10,10,10,.11);border-color:var(--amber)}

/* Cursor-tracked glow. --mx/--my are written by JS on pointermove. */
.card::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(255,181,0,.14), transparent 62%);
}
.card:hover::after{opacity:1}
.card__media{position:relative;overflow:hidden}
.card__media img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .45s ease-out;
}
.card:hover .card__media img{transform:scale(1.04)}
.card__tag{
  position:absolute;left:var(--s5);top:var(--s5);
  padding:6px 13px;border-radius:3px;
  background:var(--ink);color:var(--white);
  font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.card__tag--alt{background:var(--orange)}
.card__body{display:flex;flex-direction:column;flex:1;padding:var(--s6)}
.card h3{margin-bottom:var(--s2)}
.card__lead{color:var(--slate);margin-bottom:var(--s5)}
.checklist{margin-bottom:var(--s6)}
.checklist li{
  position:relative;padding:11px 0 11px 28px;
  border-top:1px solid var(--hairline);font-size:.94rem;
}
.checklist li::before{
  content:"";position:absolute;left:0;top:18px;width:10px;height:10px;
  border:2px solid var(--ink);background:var(--amber);border-radius:2px;
}
.card .btn{margin-top:auto;align-self:flex-start}

/* ============================================================
   6. SPLIT — WHY US
   ============================================================ */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s8);align-items:center;
}
.split__media{
  position:relative;border-radius:var(--radius);overflow:hidden;
}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split__badge{
  position:absolute;left:var(--s5);bottom:var(--s5);
  background:var(--ink);color:var(--white);
  padding:var(--s4) var(--s5);border-radius:6px;
  border-left:3px solid var(--amber);
}
.split__badge b{
  display:block;font-family:"Barlow Condensed",sans-serif;
  font-size:2rem;line-height:1;color:var(--amber);
}
.split__badge span{
  font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.points{margin-top:var(--s6)}
.points li{
  display:flex;gap:var(--s4);
  padding-block:var(--s4);
  border-top:1px solid var(--hairline);
}
.points li:last-child{border-bottom:1px solid var(--hairline)}
.points__num{
  flex-shrink:0;font-family:"Barlow Condensed",sans-serif;
  font-size:1.1rem;font-weight:700;color:var(--orange);
  width:28px;
}
.points b{display:block;font-size:.98rem;margin-bottom:2px}
.points p{font-size:.9rem;color:var(--slate)}

/* ============================================================
   7. CAPABILITY GRID
   ============================================================ */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.cap{
  border:1px solid rgba(255,255,255,.14);border-radius:6px;
  padding:var(--s6) var(--s5);
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent);
  transition:border-color .25s ease-out,transform .25s ease-out;
}
.cap:hover{border-color:var(--amber);transform:translateY(-3px)}
.cap__idx{
  display:block;font-size:.68rem;font-weight:700;
  letter-spacing:.2em;color:var(--amber);margin-bottom:var(--s4);
}
.cap h3{margin-bottom:var(--s3);font-size:1.2rem}
.cap p{font-size:.9rem;color:var(--dim)}

/* ============================================================
   8. PROCESS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.step{position:relative;padding-top:var(--s6)}
.step::before{
  content:"";position:absolute;top:0;left:0;right:0;
  height:3px;background:var(--hairline);
}
.step:first-child::before{background:var(--orange)}
.step__n{
  display:block;font-family:"Barlow Condensed",sans-serif;
  font-size:.8rem;font-weight:700;letter-spacing:.18em;
  color:var(--orange);margin-bottom:var(--s3);
}
.step h3{font-size:1.15rem;margin-bottom:var(--s2)}
.step p{font-size:.9rem;color:var(--slate)}

/* ============================================================
   9. GALLERY
   ============================================================ */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4)}
.shot{
  position:relative;border-radius:6px;overflow:hidden;
  background:#DCDFE4;grid-column:span 2;
}
.shot--wide{grid-column:span 3}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease-out}
.shot--wide img{aspect-ratio:16/9}
.shot:hover img{transform:scale(1.05)}
.shot figcaption{
  position:absolute;inset:auto 0 0 0;
  padding:var(--s8) var(--s4) var(--s4);
  background:linear-gradient(transparent,rgba(10,10,10,.92));
  color:var(--white);font-size:.88rem;font-weight:600;
}
.shot figcaption em{
  display:block;font-style:normal;font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:3px;
}
.gallery__cta{display:flex;justify-content:center;margin-top:var(--s7)}

/* ============================================================
   10. TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.quote{
  display:flex;flex-direction:column;
  border:1px solid var(--hairline);border-radius:var(--radius);
  padding:var(--s6);background:var(--white);
}
.quote__stars{color:var(--amber);letter-spacing:.18em;font-size:1rem;margin-bottom:var(--s4)}
.quote__text{font-size:.95rem;margin-bottom:var(--s5);flex:1}
.quote__by{
  display:flex;align-items:center;gap:var(--s3);
  padding-top:var(--s4);border-top:1px solid var(--hairline);
}
.quote__av{
  width:38px;height:38px;flex-shrink:0;border-radius:50%;
  background:var(--ink);color:var(--amber);
  display:grid;place-items:center;font-weight:700;font-size:.9rem;
}
.quote__by b{display:block;font-size:.88rem;font-weight:700;line-height:1.4}
.quote__by span{display:block;font-size:.8rem;color:var(--slate)}
.quotes__source{
  display:block;margin-top:var(--s6);
  font-size:.78rem;color:var(--slate);text-align:center;
}

/* ============================================================
   11. FAQ
   ============================================================ */
/* ============================================================
   FAQ

   One treatment everywhere. This used to be two: a card list for the
   home and contact pages, written for a dark band and then patched
   with a --light variant when it landed on a pale one, plus a divided
   list on the guide pages. The divided list reads better at this
   measure and is the one that survives.

   The question and its chevron sit together rather than at opposite
   ends of an 860px card, which is what made the old version look
   disconnected.
   ============================================================ */
.faq{max-width:72ch}
.faq details{border-bottom:1px solid var(--hairline)}
.faq details:first-of-type{border-top:1px solid var(--hairline)}

.faq summary{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);
  padding:var(--s4) 0;
  cursor:pointer;list-style:none;
  font-size:1.02rem;font-weight:650;
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange)}
.faq summary:focus{outline:none}
.faq summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* The heading inside a summary on the older pages. Kept so the markup
   does not have to change, but stripped back to inherit. */
.faq summary h3{
  margin:0;font:inherit;color:inherit;
  letter-spacing:0;text-transform:none;
}

.faq summary::after{
  content:"";flex:none;
  width:10px;height:10px;
  border-right:2px solid var(--orange);
  border-bottom:2px solid var(--orange);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease-out;
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}

.faq details p{
  margin:0 0 var(--s4);
  padding:0;
  max-width:68ch;
  color:var(--slate);line-height:1.75;
  font-size:.98rem;
}

/* On a dark band the palette flips. */
.band--ink .faq summary,
.band--panel .faq summary,
.hero .faq summary{color:var(--white)}
.band--ink .faq details p,
.band--panel .faq details p{color:var(--dim)}
.band--ink .faq details,
.band--panel .faq details{border-color:rgba(255,255,255,.12)}
.band--ink .faq details:first-of-type,
.band--panel .faq details:first-of-type{border-top-color:rgba(255,255,255,.12)}


/* ============================================================
   12. CTA STRIP
   ============================================================ */
.cta{background:linear-gradient(100deg,var(--orange),var(--amber));color:var(--ink)}
.cta .inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s6);flex-wrap:wrap;padding-block:var(--s8);
}
.cta h2{margin-bottom:var(--s2)}
.cta p{font-weight:500}
.cta__actions{display:flex;gap:var(--s3);flex-wrap:wrap}

/* ============================================================
   13. FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:var(--white);border-top:1px solid var(--line)}
.footer__grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:var(--s7);padding-block:var(--s8);
}
.footer__brand .brand{margin-bottom:var(--s3)}
/* Smaller than the header mark. The footer logo is a sign-off; at its
   natural size it rendered 211px tall and dominated the column.

   Matches the image directly rather than through a .brand wrapper: the
   footer logo is a bare <img> in the column, so `.footer__brand .brand
   img` selected nothing and the height fell through to auto. */
.footer__brand img,
.footer__brand .brand img{height:44px;width:auto}
.footer__brand .brand__tag{margin-bottom:var(--s4)}
.footer__blurb{font-size:.9rem;color:#8A929E;max-width:36ch}
.footer__col h4{
  font-family:Inter,sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin-bottom:var(--s4);
}
.footer__col li{font-size:.9rem;color:#8A929E;margin-bottom:10px}
.footer__col a:hover{color:var(--amber)}
.footer__bar{
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding-block:var(--s5);border-top:1px solid var(--line);
  font-size:.8rem;color:var(--slate);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .site-header .brand img{height:58px}
  .nav > ul{gap:var(--s4)}
  .mega__inner{grid-template-columns:1fr 1fr;gap:var(--s6)}
}
@media(max-width:1024px){
  /* The hero between phone and desktop. The 560px block further down
     tightens it again; this stops tablets carrying the full desktop
     rhythm while the tab bar is on screen.

     Order matters: both blocks match on a phone, and at equal
     specificity the later one wins, so this has to come first. */
  .hero .inner{padding-block:var(--s8) var(--s7)}
  p.hero__status{margin-bottom:var(--s5)}
  .hero h1{margin-bottom:var(--s5)}
  p.hero__lead{margin-bottom:var(--s6)}
  .hero__actions{margin-bottom:var(--s6)}
  .hero--inner .inner{padding-block:var(--s7) var(--s7)}

  /* Navigation at this width is handled by the drawer rules further
     down the file. Only the content grids reflow here. */
  .caps,.steps{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .split{grid-template-columns:1fr;gap:var(--s6)}
}
@media(max-width:860px){
  :root{--s9:64px;--s8:48px;--s7:32px}
  .cards{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(4,1fr)}
  .shot--wide{grid-column:span 4}
  .metrics__grid{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(2){border-right:0}
  .metric:nth-child(1),.metric:nth-child(2){border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  :root{--gutter:20px}
  .utility .inner{justify-content:center;text-align:center}
  .header__phone{display:none}
  .site-header .brand img{height:46px}
  .footer__brand img,
  .footer__brand .brand img{height:38px;width:auto}
  .metrics__grid{grid-template-columns:1fr}
  .metric{border-right:0;border-bottom:1px solid var(--line)}
  .metric:last-child{border-bottom:0}
  .caps,.steps{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .shot,.shot--wide{grid-column:span 1}
  .shot--wide img{aspect-ratio:4/3}
  .footer__grid{grid-template-columns:1fr}
  .cta .inner{flex-direction:column;align-items:flex-start}
  .hero__trust{gap:var(--s5)}

  /* The global clamp floors at 2.75rem, which is still large enough on a
     360px screen to push the headline to four lines. These bring it to
     three, and let the measure use the whole column rather than the
     28ch that suits a desktop. */
  .hero h1{font-size:clamp(1.75rem,.85rem + 4vw,2.6rem);max-width:none}
  .hero--inner h1{font-size:clamp(1.75rem,1rem + 3.4vw,2.3rem);max-width:none}

  /* The hero was built for a desktop column: 96px of padding top and
     bottom and 48px between each element. On a phone that pushed the
     buttons and the trust row below the fold. These are the same
     proportions at a size that suits the screen. */
  .hero .inner{padding-block:var(--s6) var(--s5)}
  p.hero__status{margin-bottom:var(--s3);font-size:.62rem;padding:6px 13px}
  .hero h1{margin-bottom:var(--s3)}
  p.hero__lead{font-size:.98rem;line-height:1.55;margin-bottom:var(--s4)}
  .hero__actions{gap:var(--s2);margin-bottom:var(--s4)}
  .hero__actions .btn{flex:1 1 auto;min-width:0}
  .hero__trust{gap:var(--s3) var(--s5);padding-top:var(--s3)}
  .hero__trust div{font-size:.72rem}

  /* Inner-page heroes carry no buttons or trust row, so they can be
     tighter still. */
  .hero--inner .inner{padding-block:var(--s6) var(--s6)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal,[data-reveal="on"] .reveal{opacity:1;transform:none}
  .card:hover,.cap:hover,.shot:hover img,.card:hover .card__media img,
  .btn:hover{transform:none}
  .hero__bg{transform:none!important;background-attachment:scroll}
  /* Ambient layers and the headline sweep are decorative, so they go
     entirely rather than running once and stopping mid-gradient. */
  .hero::before{animation:none}
  .hero__sparks{display:none}
  .hero h1 span{
    animation:none;background:none;color:var(--amber);
    -webkit-text-fill-color:var(--amber);
  }
  .card::after,.btn::after{display:none}
}


/* ============================================================
   BLOCK EDITOR BRIDGE
   The header and footer are authored as blocks, so WordPress wraps
   them in its own layout classes. These rules stop that wrapper from
   fighting the component CSS above.
   ============================================================ */

/* Block groups carrying a band class should not also take the
   editor's constrained width. */
.band.wp-block-group{max-width:none}

/* The navigation block renders its own list; map it onto the nav
   styles the design expects. */
.site-header .wp-block-navigation{gap:0}
.site-header .wp-block-navigation__container{gap:var(--s5)}
.site-header .wp-block-navigation-item__content{
  font-size:.875rem;font-weight:500;
  color:rgba(255,255,255,.82);
  padding-block:26px;
  border-bottom:2px solid transparent;
  transition:color .2s ease-out,border-color .2s ease-out;
}
.site-header .wp-block-navigation-item__content:hover{color:var(--amber)}
.site-header .current-menu-item .wp-block-navigation-item__content{
  color:var(--amber);border-bottom-color:var(--orange);
}

/* Logo. Emitted as a plain img in the header and footer parts, so the
   mark survives being installed on a site whose database has no Site
   Logo set. Sized here rather than on the element. */
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img,
.brand .wp-block-site-logo img{height:70px;width:auto;display:block}

.footer__brand .wp-block-site-logo img{
  height:52px;width:auto;display:block;margin-bottom:var(--s3);
}

/* Footer columns render as core/columns; keep the design's grid. */
.footer__grid.wp-block-columns{
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1.2fr;
  gap:var(--s7);padding-block:var(--s8);
}
.footer__grid.wp-block-columns > .wp-block-column{flex-basis:auto!important}
.footer__col h2{
  font-family:Inter,sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin-bottom:var(--s4);
}
.footer__col ul{list-style:none;padding-left:0}
.footer__col li{font-size:.9rem;color:#8A929E;margin-bottom:10px}

/* Utility and header bars are flex groups in the block markup. */
.utility .wp-block-group.inner{padding-block:10px}

@media(max-width:1024px){
  .footer__grid.wp-block-columns{grid-template-columns:1fr 1fr;gap:var(--s6)}
}
@media(max-width:560px){
  .footer__grid.wp-block-columns{grid-template-columns:1fr}
  .brand img,.brand .wp-block-site-logo img{height:46px}
  .footer__logo{height:40px}
}

/* ============================================================
   LOAD-ORDER GUARD
   WordPress prints global-styles after enqueued theme stylesheets, so
   its :root :where(...) rules can win on colour and background for the
   bands below. These carry a class chain of the same weight but come
   later in the cascade, which settles it without !important.
   ============================================================ */
.wp-site-blocks .band--ink,
body .band--ink{background:var(--ink);color:var(--white)}
.wp-site-blocks .band--panel,
body .band--panel{background:var(--panel);color:var(--white)}
.wp-site-blocks .band--paper,
body .band--paper{background:var(--paper);color:var(--ink)}
.wp-site-blocks .band--white,
body .band--white{background:var(--white);color:var(--ink)}

/* Sections that set their own ground. They carry .band for layout
   only, so they are named here rather than left to inherit --white
   from the guard above. */
.wp-site-blocks .metrics,
body .metrics{background:var(--panel);color:var(--white)}
.wp-site-blocks .hero,
body .hero{background:var(--ink);color:var(--white)}
.wp-site-blocks .cta,
body .cta{background:linear-gradient(100deg,var(--orange),var(--amber));color:var(--ink)}
.wp-site-blocks .cta h2,
body .cta h2{color:var(--ink)}

/* ------------------------------------------------------------------
   Buttons keep their own colours inside coloured bands.

   The guards above are `body .cta`, `body .hero` and friends: element
   plus class, so 0,1,1. A variant such as .btn--ink is 0,1,0 and lost,
   which is how an ink button on the CTA strip ended up with ink text on
   an ink background. Restating the variants here, after the guards and
   at matching weight, hands the button back its own colour. The band
   part sits in :where() so it contributes nothing and the variants stay
   as easy to override later as they were before.
   ------------------------------------------------------------------ */
body :where(.cta, .hero, .metrics, .band--ink, .band--panel, .band--white, .band--paper,
            .site-header, .site-footer) .btn{
  color:var(--ink);
}
body :where(.cta, .hero, .metrics, .band--ink, .band--panel, .band--white, .band--paper, .site-header, .site-footer) .btn--ink,
body :where(.cta, .hero, .metrics, .band--ink, .band--panel, .band--white, .band--paper, .site-header, .site-footer) .btn--ghost{
  color:var(--white);
}
body :where(.cta, .hero, .metrics, .band--ink, .band--panel, .band--white, .band--paper, .site-header, .site-footer) .btn--white,
body :where(.cta, .hero, .metrics, .band--ink, .band--panel, .band--white, .band--paper, .site-header, .site-footer) .btn--outline{
  color:var(--ink);
}
/* Hover states swap the pair, so they need the same treatment. */
body :where(.cta, .hero, .metrics, .band--ink, .band--panel, .band--white, .band--paper, .site-header, .site-footer) .btn--ink:hover,
body :where(.cta, .hero, .metrics, .band--ink, .band--panel, .band--white, .band--paper, .site-header, .site-footer) .btn--white:hover,
body :where(.cta, .hero, .metrics, .band--ink, .band--panel, .band--white, .band--paper, .site-header, .site-footer) .btn--outline:hover{
  color:var(--white);
}
body :where(.cta, .hero, .metrics, .band--ink, .band--panel, .band--white, .band--paper, .site-header, .site-footer) .btn--ghost:hover{
  color:var(--ink);
}
body :where(.cta, .hero, .metrics, .band--ink, .band--panel, .band--white, .band--paper, .site-header, .site-footer) .btn--white:hover{
  color:var(--white);
}

/* Dark bands set their own text colours; make sure headings inside
   them follow rather than inheriting the global ink. */
.band--ink h1,.band--ink h2,.band--ink h3,
.band--panel h1,.band--panel h2,.band--panel h3,
.metrics h1,.metrics h2,.metrics h3,
.hero h1,.hero h2,.hero h3{color:var(--white)}

.band--ink p,.band--panel p{color:var(--dim)}
.band--ink a:not(.btn),.band--panel a:not(.btn){color:inherit}
.metrics .metric b{color:var(--amber)}
.metrics .metric span{color:var(--dim)}
.hero h1 span{color:var(--amber)}

/* Buttons: theme.json styles core buttons, but the design's .btn is a
   plain anchor. Restate the hover so the two never diverge. */
.wp-site-blocks a.btn{text-decoration:none}

/* ============================================================
   BUTTON UNIFICATION
   The header and footer are block markup, so their buttons render as
   core/button while every button inside the home-page pattern is the
   design's own .btn anchor. Left alone the two drift apart. This maps
   core buttons onto the same treatment so a button looks identical
   wherever it appears.
   ============================================================ */
.wp-site-blocks .wp-block-button__link{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px 26px;
  border-radius:4px;
  border:1px solid var(--amber);
  background:var(--amber);
  color:var(--ink);
  font-family:Inter,sans-serif;
  font-size:.9rem;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;text-decoration:none;
  transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out,
             transform .2s ease-out,box-shadow .2s ease-out;
}
.wp-site-blocks .wp-block-button__link:hover{
  background:var(--orange);border-color:var(--orange);color:var(--white);
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,102,0,.28);
}
.wp-site-blocks .wp-block-button__link:active{transform:translateY(0)}

/* The same light sweep the .btn anchors carry. */
.wp-site-blocks .wp-block-button__link::after{
  content:"";position:absolute;top:0;left:-150%;
  width:55%;height:100%;pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  transition:left .65s cubic-bezier(.4,0,.2,1);
}
.wp-site-blocks .wp-block-button__link:hover::after{left:160%}

/* Outline variant, matching .btn--outline. */
.wp-site-blocks .is-style-outline .wp-block-button__link,
.wp-site-blocks .wp-block-button__link.is-style-outline{
  background:transparent;border-color:var(--ink);color:var(--ink);
}
.wp-site-blocks .is-style-outline .wp-block-button__link:hover,
.wp-site-blocks .wp-block-button__link.is-style-outline:hover{
  background:var(--ink);border-color:var(--ink);color:var(--white);
}

/* On dark bands an outline button needs the light treatment instead. */
.band--ink .is-style-outline .wp-block-button__link,
.hero .is-style-outline .wp-block-button__link,
.site-footer .is-style-outline .wp-block-button__link{
  border-color:rgba(255,255,255,.35);color:var(--white);
}
.band--ink .is-style-outline .wp-block-button__link:hover,
.hero .is-style-outline .wp-block-button__link:hover,
.site-footer .is-style-outline .wp-block-button__link:hover{
  background:var(--white);border-color:var(--white);color:var(--ink);
}

/* ============================================================
   SECTION FLOW
   Full-bleed bands butt up against each other by design — the hero
   runs straight into the metric strip with no seam. WordPress adds
   blockGap between siblings inside main, which opens a white line
   there, so it is cleared for the top-level sections only. Blocks
   nested inside a section keep their normal gap.
   ============================================================ */
#mce-main{
  display:block;
}
#mce-main > *,
#mce-main > .wp-block-html > *{
  margin-block:0;
}
#mce-main .band + .band{margin-block-start:0}

/* The pattern is emitted inside a core/html wrapper; it should not
   introduce a layout context of its own. */
#mce-main > .wp-block-html{display:contents}

/* ============================================================
   FOOTER GUARD
   The footer sits on ink, but theme.json sets a global link colour of
   ink and prints after the theme stylesheet, so links and headings
   inside it were rendering black on black. Pinned here, after that
   cascade, rather than fought with !important.
   ============================================================ */
.wp-site-blocks .site-footer,
body .site-footer{background:var(--ink);color:var(--white)}

.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4{color:var(--amber)}
.site-footer p{color:#8A929E}
.site-footer li{color:#8A929E}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{color:var(--amber)}
.site-footer .brand__tag{color:var(--amber)}
.site-footer .footer__blurb{color:#8A929E}

/* The closing bar carries the amber-to-orange gradient, so its text
   flips back to ink to stay legible. */
.site-footer .footer__bar,
.site-footer .footer__bar p{color:var(--slate)}

/* Footer logo. A sign-off rather than the primary identifier, so it
   sits well below the header mark. Defined once here — earlier drafts
   of this file had three competing heights. */
.footer__logo{
  height:52px;width:auto;display:block;margin-bottom:var(--s3);
}

/* ============================================================
   INNER PAGE HERO
   The home hero fills the viewport. Inner pages use the same cover
   treatment at roughly half the height, so the page title lands
   above the fold without pushing the content down.
   ============================================================ */
/* :where() drops this to zero specificity so the responsive steps
   above it win -- this rule sits after them in the file, and at
   equal weight the later one would otherwise take a phone's
   inner hero back to the desktop padding. */
:where(.hero--inner .inner){padding-block:var(--s8)}
.hero--inner h1{
  font-size:clamp(2.2rem,1.6rem + 2.6vw,3.4rem);
  max-width:22ch;
  text-wrap:balance;
}
.hero--inner p.hero__lead{margin-bottom:0}

/* Inner heroes get a plain wash rather than the ambient glow and
   sparks, which belong to the home page. */
.hero--inner::before{opacity:.5}
.hero--inner .hero__sparks{display:none}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--s7);align-items:start}
.contact h2{margin-bottom:var(--s3)}
.contact__lead{color:var(--slate);margin-bottom:var(--s5)}

.form{display:grid;gap:var(--s4)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form__field{display:grid;gap:6px}
.form__field label{
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--ink);
}
.form__field input,
.form__field select,
.form__field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);
  padding:13px 15px;min-height:48px;
  background:var(--white);
  border:1px solid var(--hairline);border-radius:6px;
  transition:border-color .18s,box-shadow .18s;
}
.form__field textarea{min-height:auto;resize:vertical;line-height:1.6}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,102,0,.14);
}
.form__hint{font-size:.82rem;color:var(--slate)}
.form .btn{justify-self:start;border:none;cursor:pointer;font-family:inherit}

.contact__details{
  background:var(--paper);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:var(--s5);
}
.contact__list{display:grid;gap:var(--s4);margin-bottom:var(--s5)}
.contact__list dt{
  font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);margin-bottom:3px;
}
.contact__list dd{font-size:.98rem;margin:0}
.contact__list a:hover{color:var(--orange)}

.contact__note{
  padding-top:var(--s4);border-top:1px solid var(--hairline);
}
.contact__note b{display:block;font-size:.95rem;margin-bottom:6px}
.contact__note p{font-size:.9rem;color:var(--slate)}


/* ============================================================
   LIGHT VARIANTS
   The capability grid and process steps were authored for ink bands.
   These variants carry them onto paper and white.
   ============================================================ */
.caps--light .cap{
  background:var(--white);
  border:1px solid var(--hairline);
  border-top:3px solid var(--orange);
}
.caps--light .cap:hover{border-top-color:var(--amber)}
.caps--light .cap h3{color:var(--ink)}
.caps--light .cap p{color:var(--slate)}
.caps--light .cap__idx{color:var(--orange)}

.steps--dark .step__n{
  background:transparent;border-color:var(--amber);color:var(--amber);
}
.steps--dark .step::after{background:rgba(255,255,255,.16)}
.steps--dark .step h3{color:var(--white)}
.steps--dark .step p{color:var(--dim)}

@media(max-width:1024px){
  .contact{grid-template-columns:1fr;gap:var(--s5)}
}
@media(max-width:560px){
  .form__row{grid-template-columns:1fr}
}

/* Source note under a review grid. */
.quotes__src{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:var(--s6);font-size:.85rem;color:var(--slate);
}
.band--ink .quotes__src{color:var(--dim)}

/* ============================================================
   NAVIGATION
   Desktop: a mega panel drops from the Services item, spanning the
   full width of the header. Mobile: the same list becomes a drawer
   that slides in from the right, with the Services group expanding
   in place rather than opening a panel.
   ============================================================ */

.site-header .inner{position:relative}

.nav__list{
  display:flex;align-items:center;gap:var(--s5);
  list-style:none;margin:0;padding:0;
}

.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.875rem;font-weight:500;
  color:rgba(255,255,255,.82);
  padding-block:26px;
  border-bottom:2px solid transparent;
  transition:color .2s ease-out,border-color .2s ease-out;
  white-space:nowrap;
}
.nav__link:hover{color:var(--amber)}
.nav__link[aria-current="page"]{color:var(--amber);border-bottom-color:var(--orange)}

.nav__caret{width:9px;height:9px;flex-shrink:0;transition:transform .25s ease-out}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret{transform:rotate(180deg)}
.nav__item:hover > .nav__link{color:var(--amber)}

/* The panel spans the header, so the item itself is not the
   positioning context — the header is. */
.nav__item{position:static}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:2px solid var(--orange);
  box-shadow:0 24px 48px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s ease-out,transform .22s ease-out,visibility .22s;
  z-index:99;
}
.nav__item:hover .mega,
.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}

.mega__inner{
  max-width:var(--maxw);margin-inline:auto;
  padding:var(--s7) var(--gutter);
  display:grid;grid-template-columns:1fr 1fr 1fr .9fr;gap:var(--s7);
}
.mega__col h4{
  font-family:Inter,sans-serif;
  font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);
  margin-bottom:var(--s4);
}
.mega__col ul{list-style:none;margin:0;padding:0}
.mega__col li{margin-bottom:var(--s2)}
.mega__col li a{
  display:block;font-size:.92rem;
  color:rgba(255,255,255,.78);
  padding:5px 0;
  transition:color .18s ease-out,padding-left .18s ease-out;
}
.mega__col li a:hover{color:var(--amber);padding-left:6px}
.mega__col li a small{display:block;font-size:.76rem;color:#7C8492;font-weight:400}

.mega__promo{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--s5);
}
.mega__promo h4{color:var(--amber);margin-bottom:var(--s3)}
.mega__promo p{font-size:.85rem;color:var(--dim);margin-bottom:var(--s4)}
.mega__promo .btn{width:100%;font-size:.8rem;padding:10px 16px}

/* The drawer footer only exists on mobile. */
.nav__foot{display:none}

/* ---------- Burger ----------
   Three bars drawn from one element: the middle is the element, the
   outer two are its pseudo-elements. On open they cross into an X.
   ---------- */
.nav__toggle{
  display:none;
  width:48px;height:48px;
  align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:6px;
  background:transparent;
  cursor:pointer;
}
.nav__burger,
.nav__burger::before,
.nav__burger::after{
  display:block;width:20px;height:2px;border-radius:2px;
  background:var(--white);
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .18s;
}
.nav__burger{position:relative}
.nav__burger::before,
.nav__burger::after{content:"";position:absolute;left:0}
.nav__burger::before{top:-6px}
.nav__burger::after{top:6px}

.nav__toggle[aria-expanded="true"] .nav__burger{background:transparent}
.nav__toggle[aria-expanded="true"] .nav__burger::before{transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__burger::after{transform:translateY(-6px) rotate(-45deg)}

/* Scrim behind the drawer. */
.nav__scrim{
  position:fixed;inset:0;z-index:98;
  background:rgba(0,0,0,.55);
  opacity:0;transition:opacity .28s ease-out;
}
.nav__scrim.is-open{opacity:1}

/* ============================================================
   MOBILE NAVIGATION

   An app-style sheet rather than a shrunken desktop menu: full height,
   rows sized for a thumb (56px, comfortably over the 44px minimum),
   one chevron per expandable row, and the call action pinned to the
   bottom of the sheet where the thumb already sits.
   ============================================================ */
@media(max-width:1024px){
  /* The tab bar is the navigation on a phone, so the header carries no
     menu control. The sheet is reached from More and closed from its
     own header. */
  .nav__toggle{display:none}
  .header__quote{display:none}

  /* Sheet header. Sits above the scrolling list and stays put. */
  .nav__head{
    display:flex;align-items:center;justify-content:space-between;
    flex:none;
    padding:var(--s4) var(--s3) var(--s4) var(--gutter);
    border-bottom:1px solid rgba(255,255,255,.09);
    background:var(--panel);
  }
  .nav__title{
    font-family:"Barlow Condensed","Arial Narrow",sans-serif;
    font-size:1.15rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--white);
  }
  .nav__close{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;
    border:0;border-radius:8px;
    background:rgba(255,255,255,.06);
    color:var(--white);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .nav__close svg{width:22px;height:22px}
  .nav__close:active{background:rgba(255,255,255,.14)}
  .nav__close:focus{outline:none}
  .nav__close:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

  /* Rows the tab bar already carries. Hidden here so the sheet holds
     only what the bar has no room for: About, Testimonials, Contact. */
  .nav__dup{display:none}

  .nav{
    position:fixed;inset:0;
    width:100%;
    z-index:100;
    background:var(--ink);
    display:flex;flex-direction:column;
    padding:0;
    overflow:hidden;
    overscroll-behavior:contain;

    /* Fades and lifts rather than sliding in from the side, which is
       what a sheet does on both major mobile platforms. */
    opacity:0;visibility:hidden;
    transform:translateY(8px);
    transition:opacity .24s ease-out, transform .24s ease-out, visibility 0s linear .24s;
  }
  .nav.is-open{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .24s ease-out, transform .28s cubic-bezier(.22,1,.36,1), visibility 0s;
  }

  /* Space for the header, which stays above the sheet so the close
     control keeps its position. */
  .nav__list{
    flex-direction:column;align-items:stretch;gap:0;
    width:100%;
    margin:0;padding:var(--s2) 0 var(--s4);
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .nav__list > li{border-bottom:1px solid rgba(255,255,255,.07)}
  .nav__list > li:last-child{border-bottom:0}

  .nav__link{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;
    min-height:56px;
    padding:0 var(--gutter);
    font-size:1.0625rem;font-weight:600;letter-spacing:0;
    color:var(--white);
    border-bottom:0;
    -webkit-tap-highlight-color:transparent;
  }
  .nav__link:active{background:rgba(255,255,255,.06)}
  .nav__link[aria-current="page"]{color:var(--amber);border-bottom:0}

  /* The row gets its own focus ring only for keyboard users, so a tap
     does not leave an outline behind. */
  .nav__link:focus{outline:none}
  .nav__link:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}

  .nav__caret{
    width:18px;height:18px;flex:none;
    color:var(--dim);
    transition:transform .24s ease-out;
  }

  /* Services expands in place. */
  .mega{
    position:static;
    opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;box-shadow:none;
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .28s cubic-bezier(.22,1,.36,1);
  }
  .nav__item.is-open .mega{grid-template-rows:1fr}
  .nav__item:hover .mega{opacity:1;visibility:visible}
  .nav__item.is-open > .nav__link{color:var(--amber)}
  .nav__item.is-open .nav__caret{transform:rotate(180deg);color:var(--amber)}

  .mega__inner{
    grid-template-columns:1fr;gap:0;
    padding:0;
    overflow:hidden;min-height:0;
    background:rgba(255,255,255,.03);
  }
  .mega__col{padding:0}
  .mega__col h4{
    margin:0;
    padding:var(--s4) var(--gutter) var(--s2);
    font-size:.66rem;letter-spacing:.18em;
    color:var(--amber);
  }
  .mega__col ul{margin:0;padding:0;list-style:none}
  .mega__col li a{
    display:flex;align-items:center;
    min-height:48px;
    padding:0 var(--gutter) 0 calc(var(--gutter) + var(--s3));
    font-size:.95rem;font-weight:500;
    color:var(--white);
  }
  .mega__col li a:active{background:rgba(255,255,255,.06)}
  .mega__col li a small{display:none}
  .mega__col:last-child{padding-bottom:var(--s3)}
  .mega__promo{display:none}

  /* Pinned action bar. */
  .nav__foot{
    display:block;flex:none;
    margin:0;padding:var(--s4) var(--gutter)
            calc(var(--s4) + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(255,255,255,.09);
    background:var(--panel);
  }
  .nav__foot .btn{width:100%;min-height:52px;font-size:1rem}
  .nav__foot p{
    margin-top:var(--s3);text-align:center;
    font-size:.8rem;color:var(--dim);
  }

  /* Nothing needs to sit above the sheet now that it carries its own
     close control. */
  .site-header{z-index:100}

  /* The sheet covers the page, so the scrim is redundant. */
  .nav__scrim{display:none}

  body.nav-open{overflow:hidden}
}

@media(max-width:560px){
  .header__phone{display:none}
}

@media(prefers-reduced-motion:reduce){
  .nav,.mega,.nav__scrim,
  .nav__burger,.nav__burger::before,.nav__burger::after{transition:none}
}

/* ============================================================
   LEGAL PAGES
   Long-form prose rather than sections. Narrower measure than the
   rest of the site so a paragraph stays readable, and headings that
   sit in sentence case since the condensed uppercase treatment is
   too loud for a policy document.
   ============================================================ */
.legal{max-width:70ch;margin-inline:auto}

.legal__meta{
  font-size:.85rem;color:var(--slate);
  padding-bottom:var(--s4);margin-bottom:var(--s6);
  border-bottom:1px solid var(--hairline);
}

.legal h2{
  font-family:Inter,sans-serif;
  font-size:1.35rem;font-weight:700;
  text-transform:none;letter-spacing:-.01em;
  line-height:1.3;
  margin-top:var(--s7);margin-bottom:var(--s3);
  padding-top:var(--s4);
  border-top:2px solid var(--hairline);
}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}

.legal h3{
  font-family:Inter,sans-serif;
  font-size:1.05rem;font-weight:600;
  text-transform:none;letter-spacing:0;
  margin-top:var(--s5);margin-bottom:var(--s2);
}

.legal p{margin-bottom:var(--s4);color:var(--slate);line-height:1.75}
.legal p:last-child{margin-bottom:0}

.legal a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--ink)}

.legal ul{margin:0 0 var(--s4) var(--s4);padding:0;list-style:disc}
.legal li{margin-bottom:var(--s2);color:var(--slate)}

/* ============================================================
   FLUENT FORMS
   The enquiry form is rendered by the plugin, which ships its own
   layout. These rules map it onto the design's field treatment so it
   does not read as a bolted-on plugin.
   ============================================================ */
.contact__form .fluentform{margin:0}

.contact__form .ff-el-group{margin-bottom:var(--s4)}
.contact__form .ff-el-group:last-of-type{margin-bottom:var(--s5)}

.contact__form .ff-el-input--label label{
  font-family:Inter,sans-serif;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  color:var(--ink);margin-bottom:6px;
}
.contact__form .ff-el-is-required.asterisk-right label:after{color:var(--orange)}

.contact__form .ff-el-form-control{
  font-family:inherit;font-size:1rem;color:var(--ink);
  padding:13px 15px;min-height:48px;width:100%;
  background:var(--white);
  border:1px solid var(--hairline);border-radius:6px;
  box-shadow:none;
  transition:border-color .18s,box-shadow .18s;
}
.contact__form textarea.ff-el-form-control{min-height:auto;line-height:1.6}

.contact__form .ff-el-form-control:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,102,0,.14);
}

.contact__form .ff-el-help-message{
  font-size:.82rem;color:var(--slate);margin-top:5px;
}

/* The plugin lays name fields out in its own grid; align the gap with
   the rest of the form. */
.contact__form .ff-t-cell{padding-inline:0}
.contact__form .ff-t-container{gap:var(--s4);display:flex;flex-wrap:wrap}
.contact__form .ff-t-container > .ff-t-cell{flex:1 1 220px}

/* Submit button, matched to .btn. */
.contact__form .ff-btn-submit{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 26px;
  border-radius:4px;
  border:1px solid var(--amber);
  background:var(--amber);
  color:var(--ink);
  font-family:Inter,sans-serif;
  font-size:.9rem;font-weight:700;letter-spacing:.02em;
  box-shadow:none;
  transition:background-color .2s ease-out,color .2s ease-out,
             border-color .2s ease-out,transform .2s ease-out,box-shadow .2s ease-out;
}
.contact__form .ff-btn-submit:hover{
  background:var(--orange);border-color:var(--orange);color:var(--white);
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,102,0,.28);
}
.contact__form .ff-btn-submit:active{transform:translateY(0)}

/* Validation and confirmation messages. */
.contact__form .error.text-danger{
  font-size:.85rem;color:#C2410C;margin-top:5px;
}
.contact__form .ff-el-form-control.ff-el-is-error{border-color:#C2410C}

.contact__form .ff-message-success{
  padding:var(--s4);border-radius:var(--radius);
  background:var(--paper);
  border-left:3px solid var(--orange);
  color:var(--ink);
}

/* ============================================================
   SKELETON LOADING
   Every image reserves its space and shows a moving shimmer until it
   decodes. Two things follow from that: nothing jumps as photographs
   arrive, and a slow connection sees structure rather than blank
   panels. The shimmer is removed by JS the moment the image loads,
   and by CSS alone if JS never runs.
   ============================================================ */

/* The wrapper holds the shape. Set on figures, media boxes and any
   element that contains an image the layout depends on. */
.skel{
  position:relative;
  overflow:hidden;
  background:var(--hairline);
}

.band--ink .skel,
.band--panel .skel,
.hero .skel{background:var(--panel-2)}

/* The shimmer itself. A single band of light sweeping left to right,
   sized well past the element so the sweep reads as continuous. */
.skel::after{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  background:linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,255,255,.55) 50%,
    transparent 80%
  );
  background-size:220% 100%;
  animation:skelSweep 1.4s linear infinite;
  pointer-events:none;
}

.band--ink .skel::after,
.band--panel .skel::after,
.hero .skel::after{
  background:linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,255,255,.09) 50%,
    transparent 80%
  );
  background-size:220% 100%;
}

@keyframes skelSweep{
  from{background-position:180% 0}
  to{background-position:-80% 0}
}

/* Images fade in over the placeholder rather than snapping on. */
.skel img{
  position:relative;
  z-index:2;
  opacity:0;
  transition:opacity .45s ease-out;
}
.skel.is-loaded img{opacity:1}
.skel.is-loaded{background:transparent}
.skel.is-loaded::after{
  animation:none;
  opacity:0;
  transition:opacity .3s ease-out;
}

/* Text placeholders, used while a section is still below the fold and
   its content has not been revealed yet. */
.skel-line{
  display:block;
  height:1em;
  border-radius:3px;
  background:var(--hairline);
  position:relative;
  overflow:hidden;
}
.skel-line + .skel-line{margin-top:.5em}
.skel-line--short{width:60%}
.skel-line::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  background-size:220% 100%;
  animation:skelSweep 1.4s linear infinite;
}

/* ------------------------------------------------------------
   NO-JS AND REDUCED-MOTION FALLBACKS
   If JS never runs, .is-loaded is never added, so the shimmer would
   sit there forever over a perfectly good image. These make the
   placeholder give up on its own.
   ------------------------------------------------------------ */
.no-js .skel img{opacity:1}
.no-js .skel::after{display:none}
.no-js .skel{background:transparent}

@media(prefers-reduced-motion:reduce){
  .skel::after,.skel-line::after{animation:none;opacity:.25}
  .skel img{transition:none}
}

/* Licence line in the footer brand column. */
.footer__licence{
  font-size:.8rem;color:var(--amber);
  margin-top:var(--s3);letter-spacing:.02em;
}


/* ============================================================
   BOTTOM TAB BAR

   Phones only. Five tabs is the most a 360px screen fits with
   readable labels, so four destinations sit here and More opens the
   sheet holding About, Testimonials, Contact and the services list.

   The bar is fixed, so the page needs bottom padding equal to its
   height or the footer hides behind it. That height is published as
   --tabbar-h and consumed by #mce-main.
   ============================================================ */
.tabbar{display:none}

/* The sheet header belongs to the mobile sheet only, so it is hidden
   here and switched on inside the mobile block.

   :where() keeps this at zero specificity. The mobile rule sits earlier
   in the file, and at equal weight this later one would win and hide
   the header on phones too -- which is exactly what happened the first
   time round. */
:where(.nav__head){display:none}

@media(max-width:1024px){
  :root{--tabbar-h:60px}

  .tabbar{
    position:fixed;left:0;right:0;bottom:0;
    z-index:95;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    background:var(--panel);
    border-top:1px solid rgba(255,255,255,.09);
    padding-bottom:env(safe-area-inset-bottom,0px);

    /* Sits above the home indicator on iOS and clears the address bar
       on Android, both of which overlay the viewport bottom. */
    box-shadow:0 -6px 24px rgba(0,0,0,.35);
  }

  .tabbar__item{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:3px;
    min-height:var(--tabbar-h);
    padding:6px 2px 7px;
    background:none;border:0;
    font-family:inherit;font-size:.66rem;font-weight:600;
    letter-spacing:.01em;
    color:var(--dim);
    text-decoration:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .16s ease-out;
  }
  .tabbar__item span{
    /* A long label such as Testimonials would wrap and shove the icon
       up; these keep every tab the same height. */
    max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .tabbar__item:active{color:var(--white)}

  /* The bar is outside #mce-main, so it inherits the body colour, and a
     single class loses to it. Restating at body weight wins without
     starting a specificity race. */
  body .tabbar__item{color:var(--dim)}
  body .tabbar__item--call{color:var(--amber)}
  body .tabbar__item[aria-current="page"]{color:var(--amber)}
  body .tabbar__item--more[aria-expanded="true"]{color:var(--amber)}
  .tabbar__item:focus{outline:none}
  .tabbar__item:focus-visible{outline:2px solid var(--amber);outline-offset:-3px}

  .tabbar__icon{
    width:22px;height:22px;flex:none;
    transition:transform .16s ease-out;
  }
  .tabbar__item:active .tabbar__icon{transform:scale(.9)}

  /* Active destination. */
  .tabbar__item[aria-current="page"]{color:var(--amber)}
  .tabbar__item[aria-current="page"] .tabbar__icon{stroke-width:2}

  /* Call is the action the business most wants, so it carries the
     accent even when it is not the current page. */
  .tabbar__item--call{color:var(--amber)}

  /* More reflects the sheet's state. */
  .tabbar__item--more[aria-expanded="true"]{color:var(--amber)}

  /* Clear the bar so the footer and any bottom content stay reachable. */
  /* Clear the bar. The footer is a sibling of <main>, not a child, so
     padding #mce-main alone left the footer running underneath it --
     the footer is the element that actually needs the room. */
  .site-footer{padding-bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom,0px))}

  /* Floor for any page that renders without the footer part. */
  body{padding-bottom:0}
  body:not(:has(.site-footer)) #mce-main{
    padding-bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom,0px));
  }

  /* The sheet covers the bar, and its own call button replaces it. */
  body.nav-open .tabbar{display:none}

}

/* The bar is the primary navigation on a phone, so the sheet no longer
   needs to duplicate a call button at small sizes -- but it stays for
   tablets, where the bar is present and the sheet is roomier. */
@media(max-width:560px){
  :root{--tabbar-h:58px}
  .tabbar__item{font-size:.63rem}
  .tabbar__icon{width:21px;height:21px}
}


/* ============================================================
   GUIDE PAGES

   The cost and explainer pages. Longer prose than anywhere else on the
   site, so the measure is tighter and the rhythm looser, with a few
   components the sales pages have no use for: a price table, a callout
   for the caveats that matter, and an FAQ block.
   ============================================================ */
.guide{max-width:72ch;margin-inline:auto}

.guide > * + *{margin-top:var(--s5)}

.guide h2{
  margin-top:var(--s8);
  font-size:clamp(1.45rem,1.1rem + 1.1vw,1.9rem);
  color:var(--ink);
}
.guide h2:first-child{margin-top:0}
.guide h3{
  margin-top:var(--s6);
  font-size:1.12rem;
  color:var(--ink);
}
.guide p{color:var(--slate);line-height:1.75;font-size:1.02rem}
.guide a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.guide a:hover{color:var(--ink)}
.guide ul,.guide ol{margin-left:var(--s5);padding:0}
.guide ul{list-style:disc}
.guide ol{list-style:decimal}
.guide li{margin-bottom:var(--s3);color:var(--slate);line-height:1.7}
.guide strong{color:var(--ink);font-weight:650}

/* Price table. Scrolls inside itself on a phone rather than pushing
   the page sideways. */
.guide__table{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--hairline);
  border-radius:var(--radius);
}
.guide table{
  width:100%;min-width:420px;
  border-collapse:collapse;
  font-size:.95rem;
}
.guide th,.guide td{
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--hairline);
}
.guide th{
  background:var(--paper);
  font-family:"Barlow Condensed","Arial Narrow",sans-serif;
  font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}
.guide td{color:var(--slate)}
.guide td:first-child{color:var(--ink);font-weight:550}
.guide tr:last-child td{border-bottom:0}

/* Callout. Used for the caveat that every price on the page is an
   estimate, and for anything a reader would regret missing. */
.callout{
  padding:var(--s5);
  border-left:3px solid var(--amber);
  border-radius:0 var(--radius) var(--radius) 0;
  background:var(--paper);
}
.callout p{margin:0;color:var(--ink);font-size:.97rem}
.callout p + p{margin-top:var(--s3)}
.callout b{color:var(--ink)}

/* FAQ. Native disclosure elements, so it works without JavaScript and
   the answers are in the markup for search engines to read. */
.faq{margin-top:var(--s6)}
.faq details{
  border-bottom:1px solid var(--hairline);
}
.faq details:first-of-type{border-top:1px solid var(--hairline)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);
  padding:var(--s4) 0;
  font-weight:650;color:var(--ink);
  cursor:pointer;list-style:none;
  font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;
  width:10px;height:10px;
  border-right:2px solid var(--orange);
  border-bottom:2px solid var(--orange);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease-out;
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq details p{
  margin:0 0 var(--s4);
  color:var(--slate);line-height:1.75;
}

/* Next steps: the links out of a guide, so a reader who is ready can
   act and one who is not can keep reading. */
.guide__next{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:var(--s6);
}
.guide__next a{
  display:block;padding:var(--s4) var(--s5);
  border:1px solid var(--hairline);border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .18s ease-out,transform .18s ease-out;
}
.guide__next a:hover{border-color:var(--orange);transform:translateY(-2px)}
.guide__next b{
  display:block;color:var(--ink);font-weight:650;margin-bottom:2px;
}
.guide__next span{display:block;font-size:.88rem;color:var(--slate)}

@media(max-width:560px){
  .guide h2{margin-top:var(--s6)}
  .guide > * + *{margin-top:var(--s4)}
  .callout{padding:var(--s4)}
}


/* Service areas: two county columns of city names. */
.areas{
  display:grid;gap:var(--s7);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.areas__col h3{
  margin-bottom:var(--s4);padding-bottom:var(--s3);
  border-bottom:1px solid var(--hairline);
  font-size:1.05rem;color:var(--ink);
}
.areas__col ul{
  margin:0;padding:0;list-style:none;
  columns:2;column-gap:var(--s5);
}
.areas__col li{
  margin-bottom:var(--s3);
  color:var(--slate);font-size:.97rem;
  break-inside:avoid;
}
@media(max-width:560px){
  .areas{gap:var(--s6)}
  .areas__col ul{columns:2;column-gap:var(--s4)}
  .areas__col li{font-size:.92rem}
}