/* =========================================================================
   Litmec Electrical — template layer
   -------------------------------------------------------------------------
   Implements the reference layout: an atmospheric photographic hero with
   centred serif display copy and a pill call to action, sitting above a dark
   editorial body of statement bands, stat rows, feature grids and stepped
   panels.

   Loaded LAST on every page, so it wins the cascade against each page's
   inline <style> blocks.

   THE LEVERAGE POINT: the whole site is written in terms of the :root custom
   properties redefined in section 1. Flipping --white / --paper / --mist /
   --ink there re-grounds all 222 pages onto the dark palette in one move,
   without rewriting a single inline sheet. The component CSS below only adds
   the parts the reference has and the source markup did not.

   Rules of the house:
     · one accent (gold), used as a mark — never as a fill or a slant
     · the radius vocabulary is deliberate: pills for controls, soft rounds
       for panels, media and cards
     · no gradient washes, no glows, no coloured card hovers
     · the ONLY opacity:0 is scoped to html.lm-motion
   ========================================================================= */

/* ---------- 1. Tokens — the whole-site inversion ---------------------- */
:root {
  /* Ground. Not neutral black: this is the logo blue taken down to near
     black, so the dark palette still reads as Litmec's own colour. */
  --ink-0:#070D16;      /* page */
  --ink-1:#0C1522;      /* raised band */
  --ink-2:#111E2E;      /* card / panel */
  --ink-3:#17293C;      /* hover, input wells */

  --cream:#F2EFE8;
  --cream-2:rgba(242,239,232,0.70);
  --cream-3:rgba(242,239,232,0.48);
  --hair:rgba(242,239,232,0.13);
  --hair-2:rgba(242,239,232,0.22);

  /* brand, from the logo artwork, lifted for legibility on a dark ground */
  --blue:#3E8FD8; --blue-deep:#10589E; --blue-ink:#061019;
  --gold:#E8B21C;

  /* ---- the inversion. Every inline sheet on the site is written against
         these names, so redefining them re-grounds every page. ---- */
  --white:var(--ink-1);
  --paper:var(--ink-0);
  --mist:var(--ink-2);
  --sky:var(--ink-1);
  --line:var(--hair);
  --ink:var(--cream);
  --ink-soft:var(--cream-2);
  --grey:var(--cream-3);
  --grey-light:rgba(242,239,232,0.38);
  --gold-bright:var(--gold);
  --blue-dark:var(--blue);
  --gold-soft:rgba(232,178,28,0.14);

  /* The reference pairs a light literary serif for display with a neutral
     grotesque for everything small. Newsreader is the closest free match to
     the reference's serif and is already proven on this site. */
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --ui:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;

  --sec-y:clamp(4.5rem,8.5vw,8rem);
  --gutter:clamp(1.25rem,4vw,4rem);
  --nav-h:72px;
  --rule:1px solid var(--hair);

  /* pills for controls, soft rounds for panels — nothing is square */
  --r-pill:999px;
  --r-panel:18px;
  --r-card:14px;

  --ease:cubic-bezier(0.16, 1, 0.3, 1);
  --dur:0.66s;
  --dur-slow:1.2s;
}

/* ---------- 2. Base --------------------------------------------------- */
html { -webkit-text-size-adjust:100%; background:var(--ink-0); }
body {
  background:var(--ink-0); color:var(--cream);
  font-family:var(--body); font-weight:400; line-height:1.7; font-size:16px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection { background:var(--gold); color:var(--ink-0); }
img, picture, svg { max-width:100%; }
[class^="g-"], [class*=" g-"], [class^="g-"] *, [class*=" g-"] * { box-sizing:border-box; }

/* The inline sheets name Montserrat and Open Sans on dozens of compound
   selectors, and neither is requested any more. Set the grotesque as the
   floor; the display rules below claim the serif back for headings. */
body, body *:not(svg):not(path):not(use) { font-family:var(--body); }

/* Display — light serif, sentence case, the full stop kept in. */
h1, h2, h3, .cta-band h2, .contact-info h2, .about-copy h2, .qq-copy h2,
.g-display {
  font-family:var(--display) !important;
  font-weight:300; font-style:normal;
  letter-spacing:-0.012em; color:var(--cream);
  text-wrap:balance;
}
h1 { font-size:clamp(2.3rem,4.4vw,4.1rem); line-height:1.08; }
h2 { font-size:clamp(1.7rem,2.9vw,2.7rem); line-height:1.14; }
h3 { font-size:1.3rem; line-height:1.3; font-weight:400; }
h4 { font-family:var(--ui) !important; font-size:0.95rem; font-weight:600;
     letter-spacing:0.01em; color:var(--cream); }
p { text-wrap:pretty; }
a { color:inherit; }

/* the accent arrives as colour on a word, never as an italic */
h1 .gold, h2 .gold, .cta-band h2 span { color:var(--gold); font-style:normal; }
h1 .blue, h2 .blue { color:var(--blue); font-style:normal; }

/* Eyebrow labels — tiny, wide-tracked, with the reference's leading dot */
.sec-label, .proj-type, .hero-badge, .review-source, .hipages-reviews-label,
.g-eyebrow {
  font-family:var(--ui) !important; font-size:0.625rem; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--cream-3);
  display:flex; align-items:center; gap:0.55rem;
}
.sec-label::before, .g-eyebrow::before {
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex:none; display:block !important;
}
.sec-label { margin-bottom:1.1rem; }

.sec-intro { font-size:1.02rem; line-height:1.8; color:var(--cream-2); max-width:62ch; }
.sec-header { margin-bottom:clamp(2.2rem,4.5vw,4rem); }


/* ---------- 2b. Specificity catch-all ------------------------------------
   The inline sheets set font-family on compound heading selectors
   (.svc-wrap h1, .post-body h2 …) which outrank a bare h1/h2. Restated here
   so the serif lands on interior pages, not just the homepage. Adding a page
   template means adding its selector to this list.
   ------------------------------------------------------------------------ */
.svc-wrap h1, .post-wrap h1, .pr-wrap h1, .est-hero h1, .blog-hero h1,
.svc-body h2, .svc-cta h2, .svc-faq h2, .sub-svc-links h3, .svc-links h3,
.svc-faq-item h3, .post-body h2, .post-body h3, .post-tocwrap h2, .post-cta h3,
.pr-wrap h2, .pr-wrap h3, .est-quote h2, .est-content h2, .est-content h3,
.est-faq h2, .est-faq-item h3, .blog-card h3, .guide-hd h2, .guide-card h3,
.geo-facts h2, .qq-copy h2 {
  font-family:var(--display) !important;
  font-weight:300; color:var(--cream); font-style:normal;
  letter-spacing:-0.012em;
}
.svc-wrap h1, .post-wrap h1, .pr-wrap h1, .est-hero h1, .blog-hero h1 {
  font-size:clamp(2.1rem,3.9vw,3.4rem); line-height:1.1;
}
.svc-body h2, .svc-cta h2, .svc-faq h2, .post-body h2, .post-tocwrap h2,
.pr-wrap h2, .est-quote h2, .est-content h2, .est-faq h2, .guide-hd h2 {
  font-size:clamp(1.5rem,2.3vw,2.05rem); line-height:1.16; font-weight:300;
}
.svc-faq-item h3, .svc-links h3, .sub-svc-links h3, .post-body h3, .post-cta h3,
.pr-wrap h3, .est-content h3, .est-faq-item h3, .blog-card h3, .guide-card h3 {
  font-size:1.2rem; line-height:1.32; font-weight:400;
}


/* =========================================================================
   3. NAV — floats over the hero, inverts to a solid bar once scrolled
   ========================================================================= */
.g-nav {
  position:fixed; inset:0 0 auto 0; z-index:140; height:var(--nav-h);
  display:flex; align-items:center; gap:2rem;
  padding:0 var(--gutter);
  background:transparent; border-bottom:1px solid transparent;
  transition:background-color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.g-nav--solid {
  background:rgba(7,13,22,0.86);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--hair);
}
.g-nav a, .g-nav button { color:var(--cream); text-decoration:none; }
.g-nav-logo { display:flex; align-items:center; flex:none; }
.g-nav-logo img { display:block; height:30px; width:auto;
                  filter:brightness(0) invert(1); opacity:0.94; }

/* The links list is a <nav>, and the source sheets style a bare `nav` as the
   fixed site header (position:fixed; top/left/right:0; height:72px;
   display:flex; justify-content:space-between; background:near-white;
   box-shadow). A class selector only wins for the properties it actually
   declares, so every one of those has to be restated here or the list renders
   as a white bar across the top of the page. Same trap the source solves for
   its breadcrumb <nav>s. */
.g-nav-links {
  position:static; top:auto; left:auto; right:auto; bottom:auto;
  height:auto; z-index:auto; padding:0; margin:0;
  background:none; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  display:flex; align-items:center; justify-content:flex-start; gap:1.6rem;
}
.g-nav-item { position:relative; }
.g-nav-trigger {
  font-family:var(--ui) !important; font-size:0.83rem; font-weight:500;
  color:var(--cream-2); background:none; border:0; padding:0.4rem 0;
  cursor:pointer; display:inline-flex; align-items:center; gap:0.32rem;
  transition:color 0.3s var(--ease);
}
.g-nav-item:hover .g-nav-trigger, .g-nav-trigger[aria-expanded="true"] { color:var(--cream); }
.g-nav-trigger svg { opacity:0.6; transition:transform 0.3s var(--ease); }
.g-nav-trigger[aria-expanded="true"] svg { transform:rotate(180deg); }

/* the dropdown card: a dark translucent panel of title + description rows */
.g-nav-panel {
  position:absolute; top:calc(100% + 0.7rem); left:-1rem;
  width:min(340px,84vw); padding:0.55rem;
  background:rgba(17,30,46,0.95);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--hair-2); border-radius:var(--r-card);
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 0.28s var(--ease), transform 0.28s var(--ease),
             visibility 0.28s var(--ease);
}
.g-nav-item[data-open="true"] .g-nav-panel { opacity:1; visibility:visible; transform:none; }
/* the Services panel carries every service, so it runs two columns */
.g-nav-panel--wide { width:min(660px,92vw); left:-2rem; display:grid;
                     grid-template-columns:1.15fr 0.85fr; gap:0.4rem; }
.g-nav-col { display:flex; flex-direction:column; }
.g-nav-panel--wide .g-nav-col + .g-nav-col { border-left:1px solid var(--hair);
                                             padding-left:0.4rem; }
.g-nav-group {
  font-family:var(--ui) !important; font-size:0.575rem; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--cream-3);
  margin:0.45rem 0 0.3rem; padding:0 0.8rem;
}
/* rows without a description sit tighter — they are a list, not a menu of cards */
.g-nav-panel a:not(:has(span)) { padding-top:0.42rem; padding-bottom:0.42rem; }

.g-nav-panel a {
  display:block; padding:0.7rem 0.8rem; border-radius:10px;
  transition:background-color 0.25s var(--ease);
}
.g-nav-panel a:hover { background:rgba(242,239,232,0.06); }
.g-nav-panel b {
  display:block; font-family:var(--ui) !important; font-size:0.83rem;
  font-weight:600; color:var(--cream); margin-bottom:0.18rem;
}
.g-nav-panel span {
  display:block; font-size:0.755rem; line-height:1.5; color:var(--cream-3);
}

.g-nav-right { margin-left:auto; display:flex; align-items:center; gap:1.3rem; }
.g-nav-phone {
  font-family:var(--ui) !important; font-size:0.83rem; font-weight:500;
  color:var(--cream-2); white-space:nowrap;
}
.g-nav-phone:hover { color:var(--cream); }

/* the old site nav is replaced wholesale */
body > nav:not(.g-nav) { display:none !important; }


/* =========================================================================
   4. CONTROLS — the reference has exactly one button shape: a pill
   ========================================================================= */
.g-btn,
.btn-gold, .btn-submit, .qq-submit, .hipages-btn, .svc-idx-cta,
.nav-cta, .mb-quote, .mb-call {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:var(--ui) !important; font-size:0.815rem !important;
  font-weight:600 !important; letter-spacing:0 !important;
  text-transform:none !important; line-height:1;
  padding:0.72rem 1.35rem !important;
  border-radius:var(--r-pill) !important;
  border:1px solid transparent !important;
  background:var(--cream) !important; color:var(--ink-0) !important;
  box-shadow:none !important; text-decoration:none; cursor:pointer;
  white-space:nowrap;
  transition:background-color 0.3s var(--ease), color 0.3s var(--ease),
             border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.g-btn:hover,
.btn-gold:hover, .btn-submit:hover, .qq-submit:hover,
.hipages-btn:hover, .svc-idx-cta:hover, .nav-cta:hover {
  background:#fff !important; color:var(--ink-0) !important;
  transform:none !important; box-shadow:none !important;
}
/* the quiet variant: hairline pill on the dark ground */
.g-btn--ghost, .btn-outline {
  background:transparent !important; color:var(--cream) !important;
  border:1px solid var(--hair-2) !important;
}
.g-btn--ghost:hover, .btn-outline:hover {
  background:rgba(242,239,232,0.07) !important; color:var(--cream) !important;
  border-color:var(--hair-2) !important;
}

/* the small pill badge the reference sets above its headline */
.g-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.36rem 0.85rem; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,0.26);
  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:var(--ui) !important; font-size:0.6rem; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase; color:#fff;
}
.g-badge::before {
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex:none;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline:2px solid var(--gold); outline-offset:3px;
}


/* =========================================================================
   5. HERO — atmospheric photograph, everything centred
   ========================================================================= */
.g-hero {
  position:relative; isolation:isolate;
  min-height:min(92svh, 880px);
  display:grid; grid-template-rows:1fr auto;
  padding:calc(var(--nav-h) + clamp(3rem,7vw,6rem)) var(--gutter)
          clamp(1.6rem,3vw,2.6rem);
  overflow:hidden; text-align:center;
}
.g-hero--interior { min-height:min(64svh, 580px); }

.g-hero-media { position:absolute; inset:0; z-index:-2; }
.g-hero-media img, .g-hero-media picture {
  display:block; width:100%; height:100%; object-fit:cover;
}
/* The reference's photography is hazy and desaturated and the type sits
   straight on it. Two flat passes rather than one wash: a multiply to cool
   the whole frame onto the brand hue, then an edge weight so centred copy
   holds without a visible band across the middle of the picture. */
.g-hero-media::after {
  content:""; position:absolute; inset:0;
  background:var(--blue-ink); opacity:0.44; mix-blend-mode:multiply;
}
.g-hero::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(122% 78% at 50% 44%, rgba(7,13,22,0.06) 0%, rgba(7,13,22,0.55) 100%),
    linear-gradient(to bottom, rgba(7,13,22,0.48) 0%, rgba(7,13,22,0) 24%,
                    rgba(7,13,22,0) 50%, rgba(7,13,22,0.86) 100%);
}

.g-hero-inner {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.35rem; margin:0 auto; width:100%; max-width:56rem;
}
.g-hero h1 {
  color:#fff; margin:0; font-weight:300;
  font-size:clamp(2.3rem,4.6vw,4.35rem); line-height:1.1;
  letter-spacing:-0.018em; max-width:19ch;
  text-shadow:0 1px 44px rgba(7,13,22,0.4);
}
.g-hero--interior h1 { font-size:clamp(2rem,3.7vw,3.3rem); max-width:22ch; }
.g-hero-sub {
  font-family:var(--ui) !important; font-size:0.95rem; line-height:1.65;
  color:rgba(255,255,255,0.78); margin:0; max-width:54ch;
}
.g-hero-eyebrow {
  font-family:var(--ui) !important; font-size:0.6rem; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.68); margin:0;
}
.g-hero-eyebrow a { color:inherit; text-decoration:none; }
.g-hero-eyebrow a:hover { color:#fff; }
.g-hero-actions { display:flex; gap:0.7rem; flex-wrap:wrap; justify-content:center; }
.g-hero .g-btn--ghost, .g-hero .btn-outline {
  border-color:rgba(255,255,255,0.42) !important; color:#fff !important;
  background:rgba(255,255,255,0.07) !important;
}

/* the credential strip along the foot of the hero */
.g-proof {
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1.4rem,4.5vw,3.4rem); flex-wrap:wrap;
  padding-top:clamp(1.4rem,3vw,2.2rem);
}
.g-proof-item {
  font-family:var(--ui) !important; font-size:0.66rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase;
  color:rgba(255,255,255,0.74); white-space:nowrap;
  display:inline-flex; align-items:center; gap:0.45rem;
}
.g-proof-item b { color:#fff; font-weight:600; }

/* the site's own trust bar becomes the same strip */
.trust-bar {
  background:var(--ink-0) !important; border:0 !important;
  border-bottom:var(--rule) !important;
  padding:clamp(1.2rem,2.4vw,1.8rem) var(--gutter) !important;
  justify-content:center !important; gap:clamp(1.4rem,4.5vw,3.4rem) !important;
}
.trust-item {
  font-family:var(--ui) !important; font-size:0.66rem !important;
  font-weight:600 !important; letter-spacing:0.13em !important;
  text-transform:uppercase !important; color:var(--cream-3) !important;
}
.trust-item .ico, .trust-item svg { color:var(--gold); opacity:0.95; }


/* =========================================================================
   6. STAT BAND — statement left, big serif numbers right
   ========================================================================= */
.g-stats {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:end; gap:clamp(2rem,6vw,5rem);
  padding:clamp(3rem,6vw,5.5rem) var(--gutter) !important;
  border-bottom:var(--rule);
}
.g-stats-lede {
  font-family:var(--ui) !important; font-size:clamp(0.98rem,1.35vw,1.15rem);
  line-height:1.6; color:var(--cream); max-width:36ch; margin:0; font-weight:500;
}
.g-stats-row { display:flex; gap:clamp(2rem,4.5vw,4rem); flex-wrap:wrap; }
.g-stat-label {
  font-family:var(--ui) !important; font-size:0.575rem; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--cream-3); margin-bottom:0.5rem;
}
.g-stat-num {
  font-family:var(--display) !important; font-weight:300; color:var(--cream);
  font-size:clamp(2.1rem,3.4vw,3.1rem); line-height:1; letter-spacing:-0.02em;
}

/* the site's own stat rows adopt the same treatment */
.stat-num, .rstat-num, .why-badge-val {
  font-family:var(--display) !important; font-weight:300;
  font-size:clamp(2rem,3.2vw,2.9rem); line-height:1;
  letter-spacing:-0.02em; color:var(--cream);
}
.stat-label, .rstat-label, .why-badge-sub {
  font-family:var(--ui) !important; font-size:0.575rem; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--cream-3);
  margin-top:0.55rem; max-width:22ch; line-height:1.6;
}
.review-stats, .hero-stats { gap:clamp(2rem,5vw,4rem); }


/* =========================================================================
   7. FEATURE HEAD — eyebrow + serif heading left, 3 feature columns right
   ========================================================================= */
.g-fhead {
  display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
  padding:clamp(3.5rem,7vw,6.5rem) var(--gutter) clamp(2rem,4vw,3rem) !important;
}
.g-fhead h2 { margin:1.1rem 0 0; max-width:14ch; }
.g-fcols {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem);
}
.g-fcol-ico { color:var(--gold); margin-bottom:0.8rem; display:block; }
.g-fcol b {
  display:block; font-family:var(--ui) !important; font-size:0.83rem;
  font-weight:600; color:var(--cream); margin-bottom:0.35rem;
}
.g-fcol span {
  display:block; font-size:0.79rem; line-height:1.6; color:var(--cream-3);
}


/* =========================================================================
   8. PANEL — stepper column beside a soft-rounded media panel
   ========================================================================= */
.g-panel {
  display:grid; grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);
  gap:clamp(1.6rem,3.5vw,3rem);
  padding:0 var(--gutter) clamp(3.5rem,7vw,6rem) !important;
  /* stretch, not start: the stepper column is the taller of the two and the
     media panel has to run its full height or the row ends in dead space */
  align-items:stretch;
}
.g-panel-side h3 {
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--display) !important; font-weight:300;
  font-size:clamp(1.4rem,2.1vw,1.85rem); margin:0 0 0.7rem;
}
.g-panel-side h3 .g-ico { color:var(--gold); flex:none; }
.g-panel-side > p { color:var(--cream-2); font-size:0.9rem; line-height:1.7;
                    max-width:36ch; margin:0 0 1.5rem; }

.g-steps { list-style:none; margin:2.4rem 0 0; padding:0; }
.g-steps li { border-top:var(--rule); padding:1.05rem 0; }
.g-steps b {
  display:block; font-family:var(--ui) !important; font-size:0.86rem;
  font-weight:600; color:var(--cream); letter-spacing:-0.005em;
}
.g-steps p {
  margin:0.5rem 0 0; font-size:0.82rem; line-height:1.7; color:var(--cream-3);
  max-width:42ch;
}

.g-panel-media {
  border-radius:var(--r-panel); overflow:hidden; position:relative;
  border:1px solid var(--hair);
  background:var(--ink-2); min-height:clamp(300px,34vw,540px); height:100%;
}
.g-panel-media img { display:block; width:100%; height:100%; object-fit:cover; }
/* the composited card the reference floats over its media panels */
.g-panel-card {
  position:absolute; left:7%; right:7%; top:50%; transform:translateY(-50%);
  background:rgba(12,21,34,0.88);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid var(--hair-2); border-radius:var(--r-card);
  padding:clamp(1rem,2vw,1.5rem);
  box-shadow:0 30px 70px rgba(0,0,0,0.45);
}
.g-panel-card-hd {
  font-family:var(--ui) !important; font-size:0.7rem; font-weight:600;
  color:var(--cream); padding-bottom:0.75rem; margin-bottom:0.75rem;
  border-bottom:var(--rule); display:flex; align-items:center; gap:0.5rem;
}
.g-panel-card-hd::before {
  content:""; width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.g-panel-row {
  display:flex; justify-content:space-between; gap:1rem;
  font-size:0.755rem; line-height:1.6; padding:0.36rem 0; color:var(--cream-3);
}
.g-panel-row b { color:var(--cream); font-weight:500; }


/* =========================================================================
   9. INHERITED COMPONENTS — re-grounded onto the dark palette
   ========================================================================= */
section { padding-top:var(--sec-y); padding-bottom:var(--sec-y); }
.trust-bar { padding-top:clamp(1.2rem,2.4vw,1.8rem);
             padding-bottom:clamp(1.2rem,2.4vw,1.8rem); }

body > section, .page-wrap > section { border-top:var(--rule); }
body > section.g-hero, body > section.g-stats, body > section.g-fhead,
body > section.g-panel, .cta-band + section { border-top:0; }

/* cards: a soft round, a hairline, and nothing else */
.service-card, .proj-card, .review-card, .contact-form-wrap, .why-badge,
.grev-placeholder, .faq-item, .pop-svc, .blog-card, .guide-card, .qq-form {
  box-shadow:none !important;
  border-radius:var(--r-card) !important;
}
.service-card, .proj-card, .review-card, .blog-card, .guide-card {
  background:var(--ink-1); border:1px solid var(--hair);
  transition:border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.service-card:hover, .proj-card:hover, .review-card:hover,
.blog-card:hover, .guide-card:hover, .svc-idx:hover, .pop-svc:hover {
  transform:none !important; box-shadow:none !important;
  border-color:var(--hair-2); background:var(--ink-2);
}
.service-card h3, .proj-card h3 { color:var(--cream); }
.service-card p, .proj-card p { color:var(--cream-2); font-size:0.92rem; line-height:1.7; }
.service-photo, .proj-photo { border-radius:0 !important; }
/* match the box to the crop cut in tools/photos.py, at any column width */
.service-photo { height:auto !important; aspect-ratio:2.2/1; overflow:hidden; }
/* The icon is pulled up by -3.4rem so it straddles the photo's bottom edge.
   On the cards whose photo was removed there is no edge to straddle, so it
   hangs off the top of the card — reset the offset when the card has no
   photo, and keep it (without the heavy chip) where a photo remains. */
.svc-icon-wrap {
  background:transparent !important; color:var(--gold) !important;
  box-shadow:none !important; border:0 !important;
  border-radius:var(--r-pill) !important;
  width:auto !important; height:auto !important;
  margin-top:0 !important; margin-bottom:0.9rem !important;
}
.service-card > .service-body:first-child { padding-top:1.8rem; }
/* the category badge on a project card: a hairline pill over the photo,
   not the solid bright-blue chip the pre-inversion palette gave it */
.proj-type {
  background:rgba(7,13,22,0.62) !important;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(242,239,232,0.24) !important;
  border-radius:var(--r-pill) !important;
  color:var(--cream) !important; padding:0.3rem 0.7rem !important;
  font-size:0.575rem !important; letter-spacing:0.14em !important;
}
.blog-cat {
  background:transparent !important; color:var(--gold) !important;
  border:0 !important; padding:0 !important; letter-spacing:0.14em;
}

.tag, .hp-tag {
  border-radius:var(--r-pill); font-family:var(--ui) !important;
  font-size:0.63rem; letter-spacing:0.02em; font-weight:500;
  text-transform:none; background:rgba(242,239,232,0.06);
  color:var(--cream-3); border:1px solid var(--hair); padding:0.28rem 0.7rem;
}
.review-card blockquote {
  font-family:var(--display) !important; font-weight:300; font-style:normal;
  font-size:1.14rem; line-height:1.55; color:var(--cream); letter-spacing:-0.008em;
}
.reviewer-av { border-radius:var(--r-pill) !important; background:var(--ink-3) !important;
               color:var(--cream) !important; }
.reviewer-name { color:var(--cream); }
.reviewer-meta, .rv-check { color:var(--cream-3); }
.stars, .qq-stars, .grev-badge { color:var(--gold); }
.svc-idx, .pop-svc {
  border:1px solid var(--hair) !important; background:var(--ink-1) !important;
  color:var(--cream) !important; border-radius:var(--r-pill) !important;
  font-family:var(--ui) !important; font-weight:500 !important;
  font-size:0.82rem !important; padding:0.62rem 1.1rem !important;
}
.pop-svc::before { display:none !important; }

/* FAQ */
.faq-item { border:0; border-bottom:var(--rule); background:transparent;
            border-radius:0 !important; }
.faq-q { font-family:var(--display) !important; font-weight:400; font-size:1.14rem;
         color:var(--cream); padding:1.5rem 0; }
.faq-q:hover { background:transparent; color:var(--gold); }
.faq-a-inner { color:var(--cream-2); font-size:0.96rem; line-height:1.85; }

/* forms: wells, not boxes */
.contact-form-wrap, .qq-form {
  background:var(--ink-1) !important; border:1px solid var(--hair) !important;
  padding:clamp(1.5rem,2.6vw,2.2rem) !important;
}
.form-group label, .qq-field label {
  font-family:var(--ui) !important; font-size:0.6rem; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--cream-3);
}
.form-group input, .form-group textarea, .form-group select, .qq-field input {
  border:1px solid var(--hair); border-radius:10px;
  background:var(--ink-0); color:var(--cream);
  font-family:var(--body); font-size:0.95rem; padding:0.7rem 0.85rem;
}
.form-group input::placeholder, .qq-field input::placeholder { color:var(--cream-3); }
.form-group input:focus, .form-group textarea:focus,
.form-group select:focus, .qq-field input:focus {
  border-color:var(--hair-2); box-shadow:none; outline:none; background:var(--ink-1);
}

/* GEO layer */
.geo-answer {
  background:var(--ink-1); border:1px solid var(--hair);
  border-left:2px solid var(--gold); border-radius:var(--r-card);
  padding:1.15rem 1.4rem; font-size:1rem; line-height:1.8; color:var(--cream-2);
  margin-bottom:2.4rem; max-width:68ch;
}
.geo-answer b { color:var(--cream); font-weight:600; }
.geo-answer a { color:var(--blue); font-weight:600; }
section.geo-facts { background:var(--ink-1); border-top:var(--rule); }
.geo-facts h2 { font-size:1.9rem; }
.geo-facts table {
  border:1px solid var(--hair); border-radius:var(--r-card);
  background:var(--ink-1); overflow:hidden;
  border-collapse:separate; border-spacing:0;
}
.geo-facts th {
  font-family:var(--ui) !important; font-size:0.6rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  background:var(--ink-2); color:var(--cream);
}
.geo-facts td { color:var(--cream-2); }
.geo-facts th, .geo-facts td { border-color:var(--hair) !important; }
.geo-facts caption {
  font-family:var(--ui) !important; font-size:0.6rem; font-weight:600;
  letter-spacing:0.17em; text-transform:uppercase; color:var(--cream-3);
}
.geo-updated { color:var(--cream-3); font-size:0.76rem; }

/* <picture> sizing: display:inline by default, so an <img height:100%> inside
   one resolves against the picture, not the container, and spills over. */
.hero-photo picture, .about-photo picture, .sub-hero-img picture,
.g-hero-media picture, .g-panel-media picture, .service-photo picture {
  display:block; width:100%; height:100%;
}
.hero-photo picture img, .about-photo picture img, .sub-hero-img picture img,
.g-hero-media picture img, .g-panel-media picture img, .service-photo picture img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.about-photo { height:auto; aspect-ratio:3/2; overflow:hidden;
               border-radius:var(--r-panel); margin-bottom:2.2rem; }

/* article body + measure */
.svc-body h2, .post-wrap h2 { margin-top:3.2rem; margin-bottom:1rem; }
.svc-body p, .post-wrap p {
  font-size:1.02rem; line-height:1.9; color:var(--cream-2); max-width:70ch;
}
.svc-trust { border-top:var(--rule); border-bottom:var(--rule);
             padding:1.25rem 0; gap:clamp(1.5rem,4vw,3rem); }
.svc-trust span {
  font-family:var(--ui) !important; font-size:0.63rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--cream-3);
}
.svc-trust b { color:var(--cream); font-weight:600; }
nav.svc-crumb, nav.page-crumb, nav.est-crumb, nav.breadcrumb {
  font-family:var(--ui) !important; font-size:0.63rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--cream-3);
}
.svc-faq-item p, .svc-faq-item h3, .svc-faq h2, .post-body p, .post-body li,
.est-content p, .svc-cta p, .sec-intro, .geo-facts .geo-sub { max-width:68ch; }
.svc-body ul.svc-list, .svc-body ul, .svc-body ol { max-width:70ch; }
.svc-body ul.svc-list, .svc-body ol.svc-list { padding-left:1.1rem; margin:0 0 1.4rem; }
.svc-body ul.svc-list li, .svc-body ol.svc-list li {
  margin-bottom:0.5rem; color:var(--cream-2); font-size:1rem; line-height:1.8;
}
.svc-body ul.svc-list li::marker, .svc-body ol.svc-list li::marker {
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.svc-faq-item { border-bottom:var(--rule); padding:1.45rem 0; }
.svc-links a.svc-rel, .svc-links a.svc-sub {
  border:1px solid var(--hair); border-radius:var(--r-pill);
  background:var(--ink-1); font-family:var(--ui) !important;
  font-size:0.8rem; font-weight:500; color:var(--cream-2); box-shadow:none;
}
.svc-links a.svc-rel:hover, .svc-links a.svc-sub:hover {
  border-color:var(--hair-2); color:var(--cream); background:var(--ink-2);
}
.post-tocwrap { background:var(--ink-1); border:1px solid var(--hair);
                border-radius:var(--r-card); }

/* tables inside articles */
.post-body table, .est-content table, .svc-body table {
  border:1px solid var(--hair); border-radius:var(--r-card);
  border-collapse:separate; border-spacing:0; overflow:hidden;
  background:var(--ink-1);
}
.post-body th, .est-content th, .svc-body th {
  background:var(--ink-2); color:var(--cream); font-family:var(--ui) !important;
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
}
.post-body td, .est-content td, .svc-body td {
  color:var(--cream-2); border-color:var(--hair) !important;
}

/* bands and footer */
.cta-band { background:var(--ink-1); color:var(--cream);
            border-top:var(--rule); border-bottom:var(--rule); }
.cta-band h2 { color:var(--cream); }
.cta-band h2 span { color:var(--gold); font-style:normal; }
.cta-band p { color:var(--cream-2); }
#quick-quote { background:var(--ink-1) !important; background-image:none !important; }
#quick-quote h2, #quick-quote h3 { color:var(--cream) !important; }
#quick-quote p, #quick-quote .qq-proof-text, #quick-quote .qq-promise {
  color:var(--cream-2) !important;
}
#quick-quote .qq-promise .ico { color:var(--gold) !important; }

footer { background:var(--ink-0); color:var(--cream-3); border-top:var(--rule); }
.footer-col h4 {
  font-family:var(--ui) !important; font-size:0.6rem; font-weight:600;
  letter-spacing:0.17em; text-transform:uppercase; color:var(--cream);
}
.footer-col a, .footer-about p { color:var(--cream-3); font-size:0.88rem; }
.footer-col a:hover { color:var(--gold); }
.footer-bottom { border-top:var(--rule); }
.mobile-bar { box-shadow:none; border-top:var(--rule);
              background:rgba(7,13,22,0.94); backdrop-filter:blur(14px); }
.mb-quote { background:var(--cream) !important; color:var(--ink-0) !important; }
.mb-call { background:transparent !important; color:var(--cream) !important;
           border:1px solid var(--hair-2) !important; }


/* =========================================================================
   10. MOTION
   One easing curve site-wide: a long expo-out. Movement is small (12-16px)
   and slow, so it reads as weight rather than as effect.

   Deliberately absent, because these are what make a page look generated:
   bounce / spring easing, slide-in from a side, rotation or 3D, blur-in,
   shimmer or gradient sweep, glow and pulse, typewriter text, counting
   numbers, and scroll-jacking.

   Every hidden state is scoped to html.lm-motion, which only the motion
   script adds. No script, old browser, or reduced-motion preference means no
   hidden state at all.
   ========================================================================= */
/* Blocks settle in as they enter the viewport, and settle back OUT the way
   they came when they leave it — so scrolling up re-plays the movement rather
   than showing a page that has already finished animating. Direction is set
   by the script: .lm-from-below travels up, .lm-from-above travels down. */
.lm-rise { transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.lm-motion .lm-rise { opacity:0; transform:translateY(18px); }
html.lm-motion .lm-rise.lm-from-above { transform:translateY(-18px); }
html.lm-motion .lm-rise.lm-in { opacity:1; transform:none; }

.lm-frame { overflow:hidden; }
.lm-frame img { transition:transform var(--dur-slow) var(--ease); }
html.lm-motion .lm-frame img { transform:scale(1.03); }
html.lm-motion .lm-frame.lm-in img { transform:none; }

/* the hero settles once, on load — never on an observer, because what a
   visitor sees immediately must not depend on a callback arriving */
.g-hero-media img { transition:transform 1.9s var(--ease); }
html.lm-motion .g-hero-media img { transform:scale(1.06); }
html.lm-motion.lm-loaded .g-hero-media img { transform:none; }
.g-hero-inner > *, .g-proof {
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
html.lm-motion .g-hero-inner > *, html.lm-motion .g-proof {
  opacity:0; transform:translateY(14px);
}
html.lm-motion.lm-loaded .g-hero-inner > *,
html.lm-motion.lm-loaded .g-proof { opacity:1; transform:none; }
html.lm-motion .g-hero-inner > *:nth-child(2) { transition-delay:0.08s; }
html.lm-motion .g-hero-inner > *:nth-child(3) { transition-delay:0.16s; }
html.lm-motion .g-hero-inner > *:nth-child(4) { transition-delay:0.24s; }
html.lm-motion .g-proof { transition-delay:0.34s; }

.reveal { transform:translateY(18px);
          transition:opacity 0.95s var(--ease), transform 0.95s var(--ease) !important; }
.reveal.visible { transform:none; }

/* grid children settle in sequence. The parent carries .reveal and already
   fades, so the children move only — stacking two opacity fades reads muddy.
   No animation/fill-mode here on purpose: `animation: … both` pins an element
   at its from-state whenever the animation does not run. */
.services-grid > *, .projects-grid > *, .reviews-grid > * {
  transition:transform 0.9s var(--ease);
}
html.lm-motion .services-grid:not(.visible) > *,
html.lm-motion .projects-grid:not(.visible) > *,
html.lm-motion .reviews-grid:not(.visible) > * { transform:translateY(16px); }
/* the page's own .reveal blocks replay in both directions too */
html.lm-motion .reveal { opacity:0; }
html.lm-motion .reveal.lm-from-above { transform:translateY(-18px); }
html.lm-motion .reveal.visible { opacity:1; transform:none; }
.services-grid.visible > *:nth-child(2), .projects-grid.visible > *:nth-child(2),
.reviews-grid.visible > *:nth-child(2) { transition-delay:0.07s; }
.services-grid.visible > *:nth-child(3), .projects-grid.visible > *:nth-child(3),
.reviews-grid.visible > *:nth-child(3) { transition-delay:0.14s; }
.services-grid.visible > *:nth-child(4), .projects-grid.visible > *:nth-child(4),
.reviews-grid.visible > *:nth-child(4) { transition-delay:0.21s; }
.services-grid.visible > *:nth-child(5), .projects-grid.visible > *:nth-child(5),
.reviews-grid.visible > *:nth-child(5) { transition-delay:0.28s; }
.services-grid.visible > *:nth-child(6), .projects-grid.visible > *:nth-child(6),
.reviews-grid.visible > *:nth-child(6) { transition-delay:0.35s; }

a, button { transition:color 0.3s var(--ease), background-color 0.3s var(--ease),
            border-color 0.3s var(--ease), opacity 0.3s var(--ease); }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; scroll-behavior:auto !important;
  }
  .reveal, .lm-rise, .g-hero-inner > *, .g-proof {
    opacity:1 !important; transform:none !important;
  }
  .services-grid > *, .projects-grid > *, .reviews-grid > * { transform:none !important; }
  .lm-frame img, .g-hero-media img { transform:none !important; }
}


/* =========================================================================
   11. RESPONSIVE
   ========================================================================= */
@media (max-width:1080px) {
  .g-stats { grid-template-columns:1fr; align-items:start; }
  .g-fhead { grid-template-columns:1fr; }
  .g-fhead h2 { max-width:20ch; }
  .g-panel { grid-template-columns:1fr; }
  .g-panel-media { min-height:clamp(240px,48vw,400px); }
}
@media (max-width:860px) {
  .g-nav-links { display:none; }
}
@media (max-width:760px) {
  :root { --sec-y:clamp(3.2rem,8vw,5rem); --nav-h:62px; }
  .g-hero { min-height:auto; padding-bottom:clamp(2rem,7vw,3rem); }
  .g-hero h1 { font-size:clamp(1.95rem,7.6vw,2.8rem); max-width:none; }
  .g-hero-sub { font-size:0.9rem; }
  .g-fcols { grid-template-columns:1fr; gap:1.4rem; }
  .g-proof, .trust-bar { gap:0.9rem 1.4rem !important; }
  .g-panel-card { position:static; transform:none; margin:1rem; }
  .hero-photo { display:none; }
}

/* Below the tablet breakpoint the nav is logo + phone + pill on one line and
   the pill runs off the right edge. The phone number is the first thing to go:
   it is already in the sticky mobile bar at the foot of every page. */
@media (max-width:620px) {
  .g-nav { gap:0.75rem; }
  .g-nav-phone { display:none; }
  .g-nav-logo img { height:26px; }
  .g-btn, .btn-gold, .nav-cta { padding:0.62rem 1.05rem !important;
                                font-size:0.775rem !important; }
  .g-hero-actions { width:100%; }
  .g-hero-actions .g-btn { flex:1 1 auto; }
}