/* ==========================================================================
   Homepage.

   Density is the point. The first draft ran to 11,200px against the live site's
   4,500 and read as empty. Every band here either splits its heading across two
   columns, runs a photo full-bleed to the viewport edge, or overlaps its
   neighbour. Nothing is a centred paragraph with air on both sides.
   ========================================================================== */

/* --- 1. Hero ------------------------------------------------------------- */
.ge-hero { position: relative; overflow: hidden; background: var(--ge-green-950); color: #fff; }
.ge-hero__media { position: absolute; inset: 0; z-index: 0; }
.ge-hero__media img, .ge-hero__media iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
/* A 16:9 film cropped to a wide band: scale it up so it still covers.
   NOTE THE ORDER: `inset: auto` must come BEFORE top/left, because `inset` is
   shorthand for all four and resets them. Written the other way round it
   silently cancelled the centring and the iframe rendered at its natural size
   in the middle of the hero. */
.ge-hero__media iframe {
  inset: auto;
  top: 50%; left: 50%; translate: -50% -50%;
  width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh;
  pointer-events: none;
}
.ge-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,43,9,.55) 0%, rgba(14,43,9,.2) 40%, rgba(14,43,9,.72) 100%);
}
.ge-hero__in {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 420px);
  gap: clamp(28px, 4vw, 60px); align-items: center;
  padding-block: clamp(48px, 6vw, 92px) clamp(96px, 9vw, 140px);
}
@media (max-width: 1023px) { .ge-hero__in { grid-template-columns: 1fr; } }

.ge-hero h1 { color: #fff; margin-bottom: 18px; text-shadow: 0 2px 18px rgba(6,24,4,.4); }
.ge-hero h1 em { font-style: normal; color: var(--ge-green-300); }
.ge-hero__lead {
  font-size: clamp(1.04rem, .5vw + .96rem, 1.2rem); color: #dcebd6; max-width: 54ch;
  line-height: 1.58; margin-bottom: 24px; text-shadow: 0 1px 10px rgba(6,24,4,.5);
}
.ge-hero__call {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  background: rgba(6,24,4,.5); border: 1px solid rgba(255,255,255,.28);
  padding: 9px 20px 9px 9px; border-radius: 999px; backdrop-filter: blur(6px);
  transition: border-color .18s var(--ge-ease), background .18s var(--ge-ease);
}
.ge-hero__call:hover { border-color: var(--ge-green-400); background: rgba(6,24,4,.68); }
.ge-hero__call .ge-badge { width: 40px; height: 40px; }
.ge-hero__call span { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ge-gold-300); font-weight: 700; }
.ge-hero__call strong { display: block; font-family: var(--ge-head); font-size: 1.32rem; color: #fff; letter-spacing: .02em; }

/* The pause control was removed on the operator's instruction, 2026-09-30: the
   film is meant to play. The only remaining brake is prefers-reduced-motion,
   which stops the iframe being created at all — see the WCAG note in site.js. */

/* The quote card riding inside the hero, as on the reference build. */
.ge-qcard { background: #fff; color: var(--ge-ink-2); box-shadow: var(--ge-shadow-xl); border-radius: var(--ge-r-lg); overflow: hidden; }
.ge-qcard__top { background: var(--ge-green-700); color: #fff; padding: 18px 24px 16px; }
.ge-qcard__top h2 { color: #fff; font-size: 1.62rem; margin-bottom: 4px; }
.ge-qcard__top p { margin: 0; font-size: .9rem; color: #c9e2c0; }
.ge-qcard__body { padding: 22px 24px 24px; }

/* --- 2. The four promises, overlapping the hero edge --------------------- */
/* Pull the GRID up, not the band. Moving the section itself dragged its paper
   background with it, which simply covered the bottom of the hero instead of
   letting the cards straddle the seam. */
.ge-usp { padding-top: 0; }
/* EXPLICIT COLUMNS, NOT auto-fit. Four cards at 230px plus three 16px gaps
   need 968px, so just under 1000 the grid dropped to three across and left the
   fourth card alone on a second row — three straddling the hero seam and one
   hanging below it, which read as a break rather than a layout. Stepping
   4 -> 2 -> 1 keeps every row full, so the straddle stays symmetrical at every
   width. The first step is 1023px, the same width the family heroes stack at. */
.ge-usp__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  position: relative; z-index: 6; margin-top: clamp(-118px, -9vw, -74px);
}
@media (max-width: 1023px) { .ge-usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ge-usp__grid { grid-template-columns: 1fr; } }
.ge-usp__card {
  background: #fff; border-radius: var(--ge-r-lg); padding: 22px 22px 24px;
  box-shadow: var(--ge-shadow); border-top: 4px solid var(--ge-green-500);
}
.ge-usp__card:nth-child(2) { border-top-color: var(--ge-gold-500); }
.ge-usp__card:nth-child(3) { border-top-color: var(--ge-lime); }
.ge-usp__card:nth-child(4) { border-top-color: var(--ge-green-700); }
.ge-usp__card .ge-icon { width: 30px; height: 30px; color: var(--ge-green-600); stroke-width: 1.5; margin-bottom: 12px; }
.ge-usp__card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.ge-usp__card p { font-size: .91rem; margin: 0; line-height: 1.5; color: var(--ge-ink-3); }

/* --- 3. Service lines: a bento, one tall card + three ------------------- */
.ge-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ge-bento > :first-child { grid-row: span 2; }
@media (max-width: 860px) { .ge-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ge-bento > :first-child { grid-row: span 1; grid-column: span 2; } }
@media (max-width: 540px) { .ge-bento { grid-template-columns: 1fr; } .ge-bento > :first-child { grid-column: span 1; } }

.ge-svc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--ge-r-lg); text-decoration: none; color: inherit;
  box-shadow: var(--ge-shadow); min-height: 240px;
  transition: transform .2s var(--ge-ease), box-shadow .2s var(--ge-ease);
}
.ge-svc:hover { transform: translateY(-4px); box-shadow: var(--ge-shadow-lg); color: inherit; }
.ge-svc__img { position: relative; overflow: hidden; flex: 1 1 auto; min-height: 160px; border-bottom: 4px solid var(--ge-green-500); }
.ge-svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ge-ease); }
.ge-svc:hover .ge-svc__img img { transform: scale(1.05); }
.ge-svc__body { padding: 18px 20px 20px; }
.ge-svc h3 { font-size: 1.28rem; margin-bottom: 7px; }
.ge-svc p { font-size: .92rem; margin: 0 0 12px; line-height: 1.5; color: var(--ge-ink-3); }
.ge-svc > :first-child.ge-svc__img { min-height: 260px; }
/* One dark card in the grid, so four photo cards do not read as a stock block. */
.ge-svc--dark { background: var(--ge-green-900); color: #cfe3c8; }
.ge-svc--dark h3 { color: #fff; }
.ge-svc--dark p { color: #b5d0ab; }
.ge-svc--dark .ge-more { color: var(--ge-green-300); }
.ge-svc--dark .ge-svc__body { padding-top: 24px; }

/* --- 4. Full-bleed split: photo one side, content the other ------------- */
.ge-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
@media (max-width: 900px) { .ge-split { grid-template-columns: 1fr; } }
.ge-split__media { position: relative; min-height: 340px; overflow: hidden; }
.ge-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ge-split__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,43,9,.1), rgba(14,43,9,.55)); }
.ge-split__body { padding: clamp(34px, 4.5vw, 72px) clamp(20px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.ge-split__body--pad-left { padding-left: max(var(--ge-gut), calc((100vw - var(--ge-wrap)) / 2 + var(--ge-gut))); }
.ge-split__body--pad-right { padding-right: max(var(--ge-gut), calc((100vw - var(--ge-wrap)) / 2 + var(--ge-gut))); }

/* Content laid over a split's photograph. The overlay darkens enough for AA. */
.ge-split__over {
  position: relative; z-index: 2; align-self: center; color: #fff;
  padding: clamp(30px, 4vw, 64px) clamp(20px, 3.4vw, 56px);
  padding-left: max(var(--ge-gut), calc((100vw - var(--ge-wrap)) / 2 + var(--ge-gut)));
}
.ge-split__over h2 { color: #fff; }
/* .ge-lead carries its own dark ink colour, and the band this overlay sits in
   is --paper, so neither the .ge-band--green nor the .ge-band--deep override
   reaches it: the lead rendered as dark grey on a dark photograph. Colour it
   from the overlay itself. */
.ge-split__over .ge-lead { color: #d6e8cf; }
.ge-split__media:has(.ge-split__over)::after { background: linear-gradient(100deg, rgba(14,43,9,.93) 0%, rgba(14,43,9,.82) 55%, rgba(14,43,9,.6) 100%); }
/* Fallback for browsers without :has() — the gradient stays readable either way. */
@supports not selector(:has(*)) { .ge-split__media::after { background: linear-gradient(100deg, rgba(14,43,9,.9), rgba(14,43,9,.6)); } }

/* "What happens after you send it" — added 2026-09-30 because the column beside
   the full quote form ran out of content while the form was still being filled,
   leaving a tall empty half. The numbered steps are the front half of
   ge_home_process(); no new claims and no turnaround time. */
.ge-next__h { color: var(--ge-gold-300); margin: 28px 0 13px; }
.ge-next { list-style: none; counter-reset: ge-next; margin: 0; padding: 0; display: grid; gap: 15px; }
/* THREE children, TWO columns: the counter, the title and the body. Left to
   flow, the badge stretched the full width of column one and the title was
   squeezed into a four-word ribbon while the body wrapped back underneath the
   number. Each child is placed explicitly instead. */
.ge-next li {
  counter-increment: ge-next; display: grid;
  grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  gap: 4px 13px; align-items: start;
}
.ge-next li::before {
  content: counter(ge-next, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2; justify-self: start; align-self: start;
  font-family: var(--ge-head); font-weight: 600; font-size: .9rem; letter-spacing: .07em;
  color: #06240a; background: var(--ge-lime); padding: 5px 8px; line-height: 1.1;
}
.ge-next li > strong { grid-column: 2; grid-row: 1; }
.ge-next li > span { grid-column: 2; grid-row: 2; }
.ge-next strong {
  display: block; font-family: var(--ge-head); font-weight: 500; font-size: 1.05rem;
  letter-spacing: .03em; text-transform: uppercase; color: #fff; line-height: 1.15;
}
.ge-next span { display: block; font-size: .92rem; line-height: 1.5; color: #d6e8cf; margin-top: 4px; }
.ge-next__offices {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px 30px;
  margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.22);
}
.ge-next__offices li { display: grid; gap: 3px; }
.ge-next__offices span { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ge-gold-300); font-weight: 700; }
.ge-next__offices a { font-family: var(--ge-head); font-size: 1.26rem; color: #fff; text-decoration: none; letter-spacing: .02em; }
.ge-next__offices a:hover { color: var(--ge-green-300); text-decoration: underline; }

.ge-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.ge-checks li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: .95rem; line-height: 1.5; color: #d6e8cf; }
.ge-checks .ge-icon { width: 20px; height: 20px; color: var(--ge-green-300); margin-top: 2px; stroke-width: 2.2; }

/* A quote pulled out of a dark split. */
.ge-pull {
  border-left: 4px solid var(--ge-lime); padding: 14px 0 14px 20px; margin: 22px 0 0;
  background: rgba(255,255,255,.05);
}
.ge-pull p { font-family: var(--ge-head); font-weight: 400; font-size: 1.24rem; line-height: 1.3; color: #fff; margin: 0 0 8px; }
.ge-pull cite { font-style: normal; font-size: .88rem; color: var(--ge-green-300); }

/* --- 5. Stats bar, solid green, straddling the band edge ---------------- */
.ge-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  list-style: none; margin: 0; padding: 0; background: var(--ge-green-600);
  box-shadow: var(--ge-shadow-lg);
}
.ge-stats li { padding: 20px 22px 22px; border-left: 1px solid rgba(255,255,255,.2); }
.ge-stats li:first-child { border-left: 0; }
.ge-stats b { display: block; font-family: var(--ge-head); font-weight: 600; font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; color: #fff; }
.ge-stats span { display: block; margin-top: 6px; font-size: .86rem; color: #dcf0d5; line-height: 1.35; }  /* #d6ecce landed on 4.50:1 exactly */

/* --- 6. Technologies ---------------------------------------------------- */
/* Stacked, not side by side. This sits inside one half of a split band, so a
   290px rail left about 230px for the panel and the copy wrapped at roughly
   three words a line. The six choices are pills above the card instead. */
.ge-tech { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.ge-tech__list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
/* Notched slabs, not pills. The corner cut is the brand diagonal at chip scale,
   so the six choices read as part of the same system as the hero wedge.

   HOW THE 1px EDGE SURVIVES A clip-path: a real border would be sliced off at
   the two cut corners. Instead the button's own background IS the edge colour
   and ::before, inset by 1px with the same notch one pixel smaller, paints the
   fill back over it. `isolation: isolate` keeps the z-index:-1 inside the
   button, so it lands above the element background and below the label. */
.ge-tech__btn {
  --ge-notch: 11px;
  position: relative; isolation: isolate; cursor: pointer;
  border: 0; border-radius: 0; padding: 10px 17px;
  background: rgba(255,255,255,.30);
  clip-path: polygon(var(--ge-notch) 0, 100% 0, 100% calc(100% - var(--ge-notch)), calc(100% - var(--ge-notch)) 100%, 0 100%, 0 var(--ge-notch));
  font-family: var(--ge-head); font-weight: 500; font-size: .92rem;
  letter-spacing: .05em; text-transform: uppercase; color: #cde4c4;
  display: inline-flex; align-items: center; gap: 8px;
  transform-origin: 50% 100%;
  transition: transform .22s var(--ge-ease), background .16s var(--ge-ease),
              color .16s var(--ge-ease), filter .22s var(--ge-ease);
}
.ge-tech__btn::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)), var(--ge-green-950);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .16s var(--ge-ease);
}
.ge-tech__btn .ge-icon { width: 17px; height: 17px; opacity: .85; }
/* Lift and lean. The tilt is off the bottom edge so the chip pivots rather than
   sliding, which is what makes a flat row feel like it has weight. */
.ge-tech__btn:hover {
  color: #fff; transform: translateY(-5px) rotate(-1.8deg);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.42));
}
.ge-tech__btn:hover::before { background: linear-gradient(rgba(255,255,255,.17), rgba(255,255,255,.17)), var(--ge-green-950); }
.ge-tech__btn:focus-visible { transform: translateY(-3px) rotate(-1.2deg); }
.ge-tech__btn[aria-selected="true"] {
  background: var(--ge-lime); color: #06240a;
  transform: translateY(-3px) rotate(-1.2deg);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.36));
}
.ge-tech__btn[aria-selected="true"]::before { background: var(--ge-lime); }
.ge-tech__btn[aria-selected="true"] .ge-icon { opacity: 1; }
.ge-tech__panel { display: none; }
.ge-tech__panel[data-open="true"] { display: block; animation: ge-fade .2s var(--ge-ease); }
@keyframes ge-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ge-tech__card { background: rgba(255,255,255,.07); border-top: 4px solid var(--ge-lime); border-radius: var(--ge-r-lg); padding: clamp(22px, 2.6vw, 32px); }
.ge-tech__card h3 { margin-bottom: 10px; }
.ge-tech__card .ge-lead { color: #cde4c4; margin-bottom: 12px; }
.ge-tech__card p { color: #b5d0ab; }
.ge-tech__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; list-style: none; padding: 0; }
.ge-tech__meta li {
  font-family: var(--ge-head); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  background: rgba(161,149,102,.22); color: var(--ge-gold-300);
  border: 1px solid rgba(161,149,102,.42); padding: 5px 11px; border-radius: 2px;
}

/* --- 7. Process: five steps as a dense row, not a tall list ------------- */
.ge-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 0; counter-reset: ge-step; }
.ge-step { padding: 24px 22px 26px; border-left: 1px solid var(--ge-line); background: #fff; }
.ge-step:first-child { border-left: 0; }
.ge-step__n {
  counter-increment: ge-step; font-family: var(--ge-head); font-weight: 600; font-size: 1.05rem;
  color: var(--ge-green-700); letter-spacing: .1em; display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.ge-step__n::before { content: counter(ge-step, decimal-leading-zero); }
.ge-step__n::after { content: ""; height: 2px; flex: 1; background: var(--ge-green-200); }
.ge-step h3 { font-size: 1.16rem; margin-bottom: 7px; }
.ge-step p { font-size: .9rem; line-height: 1.5; margin: 0 0 12px; color: var(--ge-ink-3); }
.ge-step__doc {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--ge-head);
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ge-gold-700); background: var(--ge-gold-200); padding: 5px 10px; border-radius: 2px;
}
.ge-step__doc .ge-icon { width: 13px; height: 13px; }
@media (max-width: 720px) { .ge-step { border-left: 0; border-top: 1px solid var(--ge-line); } .ge-step:first-child { border-top: 0; } }

/* --- 8. The router ------------------------------------------------------ */
.ge-router__bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: var(--ge-green-700); padding: 12px; border-radius: var(--ge-r-lg); margin-bottom: 18px;
}
.ge-router__tab {
  font-family: var(--ge-head); font-weight: 500; font-size: 1rem;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 10px 18px; border-radius: var(--ge-r); cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,.28); color: #dcecd6;
  display: inline-flex; align-items: center; gap: 8px; transition: all .16s var(--ge-ease);
}
.ge-router__tab .ge-icon { width: 18px; height: 18px; }
.ge-router__tab:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-2px); }
.ge-router__tab[aria-selected="true"] {
  background: #fff; border-color: #fff; color: var(--ge-green-800);
  transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(0,0,0,.55);
}
.ge-router__search { position: relative; margin-left: auto; min-width: 250px; flex: 1 1 250px; }
.ge-router__search input {
  width: 100%; font: inherit; font-size: .97rem; padding: 11px 14px 11px 40px; border-radius: var(--ge-r);
  border: 1px solid var(--ge-line-2); background: #fff; color: var(--ge-ink);
}
.ge-router__search input::placeholder { color: var(--ge-ink-3); }
.ge-router__search input:focus { outline: none; border-color: var(--ge-green-600); box-shadow: 0 0 0 3px rgba(53,117,37,.18); }
.ge-router__search .ge-icon { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ge-ink-3); }
.ge-router__panel { display: none; }
.ge-router__panel[data-open="true"] { display: block; animation: ge-fade .2s var(--ge-ease); }

.ge-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.ge-tile {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px; height: 100%; min-height: 54px;
  padding: 11px 14px 11px 17px; text-decoration: none; background: #fff; color: var(--ge-ink);
  font-size: .93rem; font-weight: 600; line-height: 1.3;
  border: 1px solid var(--ge-line); border-radius: var(--ge-r);
  transition: background .16s var(--ge-ease), color .16s var(--ge-ease),
              border-color .16s var(--ge-ease), transform .2s var(--ge-ease), box-shadow .2s var(--ge-ease);
}
/* An accent bar that grows from the bottom edge on hover, so scanning a
   hundred-tile grid has some feedback beyond a flat colour swap. */
.ge-tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ge-lime); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .2s var(--ge-ease);
}
.ge-tile:hover {
  background: var(--ge-green-100); color: var(--ge-green-800); border-color: var(--ge-green-500);
  transform: translateY(-3px); box-shadow: var(--ge-shadow);
}
.ge-tile:hover::before { transform: scaleY(1); }
.ge-tile .ge-icon { width: 17px; height: 17px; color: var(--ge-green-600); }
.ge-tile[hidden] { display: none; }

/* Tiles arrive in a stagger whenever their panel opens — on first scroll and
   again on every tab switch. --d is set once per tile by site.js. */
@media (prefers-reduced-motion: no-preference) {
  .ge-router__panel[data-open="true"] .ge-tiles > li {
    animation: ge-fade .34s var(--ge-ease) backwards; animation-delay: var(--d, 0s);
  }
}
.ge-router__none { color: var(--ge-ink-3); font-style: italic; padding: 14px 2px; }

/* --- 9. Industries: a dense three-column index, like their own page ----- */
.ge-inds { column-count: 3; column-gap: 30px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1000px) { .ge-inds { column-count: 2; } }
@media (max-width: 720px)  { .ge-inds { column-count: 2; } }
@media (max-width: 440px)  { .ge-inds { column-count: 1; } }
.ge-inds li { break-inside: avoid; margin-bottom: 2px; }
.ge-inds a {
  display: flex; align-items: baseline; gap: 9px; padding: 7px 4px;
  text-decoration: none; color: var(--ge-ink); font-size: .95rem; line-height: 1.35;
  border-bottom: 1px solid var(--ge-line); transition: color .14s var(--ge-ease), border-color .14s var(--ge-ease);
}
.ge-inds a::before { content: ""; width: 6px; height: 8px; flex: none; background: var(--ge-green-500); clip-path: ellipse(50% 50% at 50% 50%); }
.ge-inds a:hover { color: var(--ge-green-700); border-bottom-color: var(--ge-green-500); }

/* --- 10. Coverage ------------------------------------------------------- */
.ge-states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; list-style: none; margin: 0; padding: 0; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); }
.ge-states a {
  display: flex; align-items: center; gap: 9px; padding: 13px 14px;
  background: var(--ge-green-900); color: #dcecd6; text-decoration: none;
  font-family: var(--ge-head); font-size: 1.02rem; letter-spacing: .03em; text-transform: uppercase;
  transition: background .16s var(--ge-ease);
}
.ge-states a:hover { background: var(--ge-green-700); color: #fff; }
.ge-states .ge-abbr { font-family: var(--ge-mono); font-size: .76rem; color: var(--ge-gold-400); letter-spacing: 0; }
.ge-states .ge-n { margin-left: auto; font-size: .78rem; opacity: .7; font-family: var(--ge-body); text-transform: none; }

/* The city links were default translucent pills sitting directly under the
   states box, which the operator singled out as the one part of this band that
   worked. So they are now built the same way: the same 1px gridline lattice,
   the same green-900 cell, the same Oswald caps and the same hover. The gold
   oval replaces the state abbreviation as the per-cell accent — it is the logo
   mark at glyph scale, already used this way in .ge-inds. */
.ge-citychips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr));
  gap: 1px; list-style: none; margin: 0; padding: 0;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16);
}
.ge-citychips a {
  display: flex; align-items: center; gap: 8px; height: 100%;
  padding: 11px 13px; background: var(--ge-green-900); color: #dcecd6;
  text-decoration: none; font-family: var(--ge-head); font-size: .94rem;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.2;
  transition: background .16s var(--ge-ease);
}
.ge-citychips a::before {
  content: ""; width: 7px; height: 9px; flex: none;
  background: var(--ge-gold-400); clip-path: ellipse(50% 50% at 50% 50%);
}
.ge-citychips a:hover { background: var(--ge-green-700); color: #fff; }

.ge-offices { display: grid; gap: 14px; }
.ge-office {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  background: rgba(255,255,255,.07); border-left: 4px solid var(--ge-lime); padding: 16px 18px;
}
.ge-office strong { display: block; font-family: var(--ge-head); font-size: 1.2rem; color: #fff; letter-spacing: .03em; text-transform: uppercase; }
.ge-office span { display: block; font-size: .9rem; color: #b5d0ab; line-height: 1.45; margin-top: 3px; }
.ge-office a { display: inline-block; margin-top: 6px; font-family: var(--ge-head); font-size: 1.16rem; color: var(--ge-green-300); text-decoration: none; letter-spacing: .02em; }
.ge-office a:hover { text-decoration: underline; }

/* --- 11. Quote form ----------------------------------------------------- */
.ge-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px; }
.ge-field { display: grid; gap: 5px; min-width: 0; }
.ge-field--full { grid-column: 1 / -1; }
.ge-field label { font-family: var(--ge-head); font-weight: 500; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ge-ink-2); }
.ge-field .ge-req { color: var(--ge-danger); }
.ge-field input, .ge-field select, .ge-field textarea {
  font: inherit; font-size: .96rem; padding: 10px 12px; border-radius: var(--ge-r);
  border: 1px solid var(--ge-line-2); background: #fff; color: var(--ge-ink); width: 100%;
}
.ge-field textarea { min-height: 84px; resize: vertical; }
.ge-field input:focus, .ge-field select:focus, .ge-field textarea:focus {
  border-color: var(--ge-green-600); outline: none; box-shadow: 0 0 0 3px rgba(53,117,37,.18);
}
.ge-field input[type="file"] { padding: 8px; font-size: .88rem; }
.ge-fs { border: 1px solid var(--ge-line); border-radius: var(--ge-r); padding: 14px; margin: 0; grid-column: 1 / -1; }
.ge-fs legend { font-family: var(--ge-head); font-weight: 500; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ge-green-700); padding-inline: 6px; }
.ge-yesno { display: flex; flex-wrap: wrap; gap: 16px; }
.ge-yesno__row { display: grid; gap: 6px; }
.ge-yesno__row > span { font-size: .84rem; color: var(--ge-ink-3); font-weight: 600; }
.ge-seg { display: inline-flex; border: 1px solid var(--ge-line-2); border-radius: var(--ge-r); overflow: hidden; }
.ge-seg label { position: relative; }
.ge-seg input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ge-seg span { display: block; padding: 7px 16px; font-weight: 700; font-size: .88rem; cursor: pointer; color: var(--ge-ink-3); transition: all .15s var(--ge-ease); }
.ge-seg input:checked + span { background: var(--ge-green-600); color: #fff; }
/* BOTH :focus and :focus-visible. The radio itself is a transparent overlay, so
   the only focus indication is the ring on this span — and :focus-visible alone
   depends on the browser's keyboard heuristics, which a11y-browser.mjs reports
   as "focus on invisible element" and which I could not confirm either way by
   scripted focus. Showing the ring on plain :focus as well costs a ring on
   mouse click and guarantees the indicator exists. On a compliance-driven
   client's own site that is the right side to err on. */
.ge-seg input:focus + span,
.ge-seg input:focus-visible + span { outline: 3px solid var(--ge-lime); outline-offset: -3px; }
.ge-waste-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 132px; gap: 10px; margin-bottom: 12px; }
.ge-waste-row:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .ge-waste-row { grid-template-columns: 1fr 1fr; } .ge-waste-row .ge-field:first-child { grid-column: 1 / -1; } }
.ge-form__note { font-size: .83rem; color: var(--ge-ink-3); margin: 12px 0 0; }
.ge-form__ok {
  display: flex; gap: 10px; align-items: flex-start; background: var(--ge-green-100);
  border-left: 4px solid var(--ge-green-600); padding: 12px 14px; margin-bottom: 16px; font-size: .93rem;
}
.ge-form__ok .ge-icon { width: 19px; height: 19px; color: var(--ge-green-700); margin-top: 2px; }

/* --- 12. FAQ ------------------------------------------------------------ */
.ge-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; align-items: start; }
@media (max-width: 860px) { .ge-faq { grid-template-columns: 1fr; } }
.ge-faq__item { border-bottom: 1px solid var(--ge-line); break-inside: avoid; }
.ge-faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  background: none; border: 0; cursor: pointer; text-align: left; padding: 16px 2px;
  font-family: var(--ge-head); font-weight: 500; font-size: 1.1rem; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ge-ink); line-height: 1.16;
}
.ge-faq__q:hover { color: var(--ge-green-700); }
.ge-faq__q .ge-icon { width: 19px; height: 19px; color: var(--ge-green-600); flex: none; margin-top: 1px; transition: transform .2s var(--ge-ease); }
.ge-faq__q[aria-expanded="true"] .ge-icon { transform: rotate(45deg); }
.ge-faq__a { display: none; padding: 0 2px 18px; color: var(--ge-ink-3); font-size: .94rem; }
.ge-faq__a[data-open="true"] { display: block; }

/* --- 13. Closing rail --------------------------------------------------- */
.ge-rail { background: var(--ge-green-600); color: #fff; position: relative; overflow: hidden; }
.ge-rail__in { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 30px; justify-content: space-between; padding-block: clamp(30px, 3.4vw, 48px); position: relative; z-index: 2; }
.ge-rail h2 { color: #fff; margin: 0 0 5px; font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
.ge-rail p { margin: 0; color: #dcf0d5; max-width: 56ch; }
.ge-rail::before { content: ""; position: absolute; inset: 0; background: var(--ge-green-700); clip-path: polygon(62% 0, 100% 0, 100% 100%, 46% 100%); }

/* The coverage map on the homepage: the picture, with the states lattice
   opposite it as the index. */
.ge-covermap { margin: 0 0 clamp(20px, 2.6vw, 30px); max-width: 560px; }
.ge-covermap .ge-map path { fill: var(--ge-green-600); stroke: var(--ge-green-900); }
.ge-covermap .ge-map a:hover path, .ge-covermap .ge-map a:focus path { fill: var(--ge-lime); }