:root {
  --orange: #D06A2D;
  --orange-ink: #ad5825;
  --orange-hover: #d47238;   /* 5.65:1 against --ink, up from 5.20 at rest */
  --ink: #101113;
  --muted: #5d6268;
  --paper: #fff;
  --soft: #f6f6f4;
  --soft-warm: #faf8f5;
  --line: #dedfdf;
  --line-dark: #c6c8c9;
  /* Form field borders only. WCAG 2.2 SC 1.4.11 wants 3:1 for field boundaries and
     --line-dark is 1.68:1 on white. This is 3.57:1 on white, 3.30:1 on --soft.
     Card and section rules stay light on purpose — they are decorative. */
  --line-field: #84888b;
  --footer: #141517;
  --max: 1240px;
  --rail-lane: 46px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
/* The hero strands and the cable run are drawn wider than the page on purpose;
   at mobile widths their tails poked past the right edge. `clip` trims them
   without making html/body a scroll container, so the sticky header still sticks.
   overflow-x:hidden on body alone did not hold — the overflow propagated to html. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
img { max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 4px; }
.shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 300;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.header-row { min-height: 78px; display: flex; align-items: center; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.wordmark img { width: 112px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.desktop-nav a {
  position: relative;
  padding: 29px 0 25px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 19px;
  left: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.desktop-nav a[aria-current="page"] { color: var(--orange-ink); }
.header-phones {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 1px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.35;
}
.header-phones a { font-weight: 800; text-decoration: none; white-space: nowrap; }
.header-phones span { color: var(--muted); font-weight: 400; }
.header-phones a:hover, .header-phones a:focus-visible { color: var(--orange-ink); }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
/* a 2px lift alone is weak affordance; darken the fill so the state is legible */
.button-primary:hover, .button-primary:focus-visible { background: var(--orange-hover); border-color: var(--orange-hover); }
.button-ghost:hover, .button-ghost:focus-visible { border-color: var(--orange); }
.button-primary { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.button-dark { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.button /* Button labels are uppercase, so their visual mass sits between baseline and
   cap height - above the line-box centre. A geometrically centred icon reads
   high against that, so the disc is nudged to the cap-height centre. */
.arrow { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); transform: translateY(-0.5px); }
.arrow svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.header-quote { min-height: 42px; padding-inline: 18px; }
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 16px; height: 2px; background: var(--ink); }
.menu-toggle span { position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -5px; }
.menu-toggle span::after { top: 5px; }
.mobile-nav { display: none; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 25px; font-size: clamp(48px, 6.2vw, 86px); font-weight: 900; line-height: .96; letter-spacing: -.055em; }
h2 { margin-bottom: 0; font-size: clamp(36px, 4.6vw, 62px); font-weight: 900; line-height: 1; letter-spacing: -.045em; }
h3 { line-height: 1.2; }
.accent { color: var(--orange-ink); }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 30px; height: 3px; background: var(--orange); }
.hero {
  position: relative;
  min-height: 690px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 78% 47%, color-mix(in srgb, var(--orange) 9%, white), transparent 29%), var(--paper);
  border-bottom: 1px solid var(--line);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,.94fr) minmax(440px,1.06fr); align-items: center; gap: 32px; padding-block: 88px 76px; }
.hero-copy > p:not(.eyebrow) { max-width: 625px; margin-bottom: 22px; color: var(--muted); font-size: clamp(17px,1.5vw,20px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-art { position: relative; isolation: isolate; width: 100%; min-height: 520px; }
.hero-photo { position: absolute; inset: 5% 0 7% 8%; z-index: 2; width: 92%; height: 88%; border: 1px solid var(--line-dark); object-fit: cover; filter: saturate(.88) contrast(1.05); }
.hero-art > svg { position: absolute; z-index: 1; inset: -4% -12% -4% -8%; width: 120%; height: 108%; pointer-events: none; }
.strand { fill: none; stroke: var(--orange); stroke-linecap: round; }
.strand.faint { opacity: .12; } .strand.mid { opacity: .34; } .strand.hot { opacity: .82; }
.strand-tip { fill: var(--paper); stroke: var(--orange); }
.strand-dot { fill: var(--orange); }
.hero-pulse { fill: none; stroke: var(--orange); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1 720; filter: url(#hero-glow); animation: pulse-run 4.8s linear infinite; }
.hero-pulse.pulse-two { stroke-width: 6; stroke-dasharray: 1 560; animation-duration: 6.2s; animation-delay: -2.7s; }
@keyframes pulse-run { from { stroke-dashoffset: 720; } to { stroke-dashoffset: 0; } }

.proof-strip { position: relative; z-index: 3; padding: 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.proof-strip .proof-grid { margin-top: -46px; }

.proof-grid { position: relative; z-index: 3; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.proof-card { padding: 21px 22px; background: rgba(255,255,255,.94); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(16,17,19,.05); }
.proof-card strong { display: block; margin-bottom: 6px; font-size: 16px; }
.proof-card span { display: block; color: var(--muted); font-size: 12px; }
.subhero { min-height: 480px; }
.subhero .hero-grid { grid-template-columns: minmax(0,1fr) minmax(330px,.65fr); padding-block: 80px; }
.subhero h1 { max-width: 920px; font-size: clamp(50px,6vw,78px); }
.subhero .hero-art { min-height: 335px; }

/* Full width on purpose. This wrapper only exists to give the cable run a
   positioning context — capping it at 1440px made every tinted section stop
   short of the viewport edge, which showed up as inset grey slabs on wide
   screens and at browser zoom below 100%. The cable stays aligned because
   js/site.js measures the x from each section's inner content edge, not from
   this element's width. */
.page-run { position: relative; isolation: isolate; }
#cable { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#cable[hidden] { display: none; }
#cable .cable-track { fill: none; stroke: var(--line-dark); stroke-width: 2; }
#cable .cable-live { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px color-mix(in srgb,var(--orange) 45%,transparent)); }
.cable-node { fill: var(--paper); stroke: var(--line-dark); stroke-width: 2.5; transition: fill .35s, stroke .35s, transform .35s; transform-box: fill-box; transform-origin: center; }
.cable-node.is-live { fill: var(--orange); stroke: var(--orange); transform: scale(1.2); }
main { position: relative; }
.run-section { position: relative; padding: 112px 0; }
.run-section:nth-child(even) { background: var(--soft); }
/* Same metrics as .shell in the header. These used to differ (1110px inside a
   132px inset, plus a 58px rail-lane padding), which pushed every section's
   text ~75px right of the logo and nav. The cable now lives in the outer
   margin instead of inside the text column, so no padding is needed here. */
.section-inner { position: relative; z-index: 2; width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }
.section-head {
  display: grid;
  grid-template-columns: minmax(0,0.95fr) minmax(360px,1.05fr);
  align-items: start;
  gap: 46px;
  margin-bottom: 34px;
  text-align: left;
}
.section-head.single { grid-template-columns: minmax(0,800px); }
.section-head-copy { margin-bottom: 0; }
.section-head > * + * { margin-top: 22px; }
.section-head > p, .section-head > .copy-column, .section-head > div + div { max-width: 58ch; }
@media (max-width: 900px) { .section-head { grid-template-columns: 1fr; gap: 18px; } }
.section-head > div + div > :first-child { margin-top: 0; }
.section-head > p:last-child, .section-head > div + div p:last-child { margin-bottom: 0; }
.section-head > p, .section-intro, .copy-column p { color: var(--muted); }
.section-intro { max-width: 62ch; margin: 22px 0 0; }
.pill { display: inline-block; margin-bottom: 18px; padding: 7px 15px 6px; border-radius: 999px; background: var(--orange); color: var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.copy-column { max-width: 62ch; }
.copy-column p { font-size: 17px; }
.copy-column p:last-child { margin-bottom: 0; }
.split-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,460px); gap: 56px; align-items: start; }
.split-layout > :last-child { max-width: 62ch; }
.split-layout > :first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
@media (max-width: 980px) { .split-layout { grid-template-columns: 1fr; gap: 26px; } }

.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.service-card { position: relative; min-height: 245px; padding: 28px 26px 26px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.service-card:hover { z-index: 1; transform: translateY(-5px); border-color: var(--orange); box-shadow: 0 18px 38px rgba(16,17,19,.08); }
.service-card::after { content: ""; position: absolute; right: -20px; bottom: -20px; width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 50%; }
.service-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 31px; }
.service-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--orange); border-radius: 50%; color: var(--orange-ink); }
.service-icon svg { width: 22px; height: 22px; }
.service-icon path, .service-icon circle, .service-icon line, .service-icon polyline, .service-icon rect { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-number { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.service-card h3 { max-width: 270px; margin-bottom: 8px; font-size: 17px; }
.service-card p { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.service-card h3 a { text-decoration: none; }
.service-card h3 a::after { content: ""; position: absolute; inset: 0; }
.service-card:has(h3 a:focus-visible) { border-color: var(--orange); box-shadow: 0 18px 38px rgba(16,17,19,.08); }

.breadcrumb { padding-block: 22px; color: var(--muted); font-size: 12px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--line-field); }
.breadcrumb a { font-weight: 800; text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--orange-ink); text-decoration: underline; }
.breadcrumb + .hero { border-top: 1px solid var(--line); }
.service-detail-hero .hero-grid { padding-block: 68px; }
.service-detail-hero .hero-copy > p:not(.eyebrow) { font-size: 17px; }
.service-detail-hero h1 { font-size: clamp(44px,5.2vw,72px); }
.service-detail-hero h1, .services-hero h1, .contact-box h2 { overflow-wrap: anywhere; }
.service-copy { max-width: 62ch; }
.service-copy h2 { margin-bottom: 26px; font-size: clamp(34px,4vw,52px); }
.service-copy p, .service-copy li { color: var(--muted); font-size: 17px; }
.detail-list { display: grid; gap: 10px; margin: 28px 0 0; padding-left: 22px; }
.detail-list li::marker { color: var(--orange-ink); }
.service-photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 48px; }
.service-photo-grid figure { aspect-ratio: 4/3; margin: 0; overflow: hidden; background: var(--line); }
.service-photo-grid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }
.related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 34px; }
.related-link { min-width: 0; padding: 24px; background: var(--paper); border: 1px solid var(--line); font-size: 15px; font-weight: 900; line-height: 1.25; text-decoration: none; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.related-link:hover, .related-link:focus-visible { transform: translateY(-3px); border-color: var(--orange); box-shadow: 0 14px 28px rgba(16,17,19,.08); }

.process-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line-dark); }
.process-step { padding: 28px 24px 8px 0; border-right: 1px solid var(--line); }
.process-step + .process-step { padding-left: 24px; }
.process-step:last-child { border-right: 0; }
.process-step .number { display: block; margin-bottom: 30px; color: var(--orange-ink); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.process-step h3 { margin-bottom: 10px; font-size: 19px; }
.process-step p { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.feature-panel { padding: 36px; background: var(--soft-warm); border-left: 3px solid var(--orange); }
.feature-panel p:last-child { margin-bottom: 0; }

.preview-strip { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin: 42px 0 32px; }
.preview-strip a { position: relative; display: block; aspect-ratio: 3/4; min-width: 0; overflow: hidden; background: var(--line); }
.preview-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); transition: transform .45s var(--ease); }
.preview-strip a:hover img, .preview-strip a:focus-visible img { transform: scale(1.04); }

/* --- Framed photo treatment ---------------------------------------------
   Fiberlink frames its hero image with a white inset border. Same device here
   but in brand orange: a paper-coloured mat, then the orange frame outside it,
   so the photo reads as mounted rather than pasted on. Used for feature images,
   not for the gallery grid tiles (those already carry the corner marks). */
.framed-photo {
  position: relative;
  margin: 0;
  padding: 10px;
  background: var(--paper);
  border: 3px solid var(--orange);
  box-shadow: 0 18px 46px rgba(16,17,19,.10);
}
.framed-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.03); }
.framed-photo figcaption { padding: 10px 2px 2px; color: var(--muted); font-size: 12px; }

/* Intro section: copy left, framed photo right, so the column is not half empty. */
.section-head.intro-with-art { grid-template-columns: minmax(0,1.4fr) minmax(0,.6fr); gap: 52px; align-items: start; }
.section-head.intro-with-art h2 { grid-column: 1 / -1; }
.section-head.intro-with-art .framed-photo { width: 100%; max-width: 330px; aspect-ratio: 4 / 5; align-self: start; justify-self: end; padding: 8px; }

/* Same mounted look for the sub-page lead images, applied to the img itself. */
.framed-img {
  padding: 10px;
  background: var(--paper);
  border: 3px solid var(--orange);
  box-shadow: 0 18px 46px rgba(16,17,19,.10);
}

.culture { background: radial-gradient(circle at 85% 20%,color-mix(in srgb,var(--orange) 10%,white),transparent 24%),var(--soft-warm) !important; }
.culture-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; align-items: start; }
.culture-copy h2 { max-width: 780px; }
.culture-copy p { max-width: 62ch; margin: 24px 0 0; color: var(--muted); font-size: 17px; }
/* The motto band sits right beside the orange cable rail, so an orange left
   border here reads as two parallel orange lines. Drop the rule and let the
   warm panel plus the scale of the motto carry it instead. */
.culture-motto { width: 100%; max-width: none; padding: 44px 44px 44px 0; background: transparent; border-left: 0; }
.culture-motto .motto-lead { margin-bottom: 12px; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.culture-motto h2 { margin-bottom: 24px; font-size: clamp(42px,6vw,78px); }
.culture-motto > p:last-child { max-width: 62ch; color: var(--muted); font-size: 17px; }
.values { border-top: 1px solid var(--line-dark); }
.value { display: grid; grid-template-columns: 42px 1fr; gap: 15px; padding: 19px 0; border-bottom: 1px solid var(--line-dark); }
.value span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--ink); font-size: 11px; font-weight: 900; }
.value strong { display: block; margin-bottom: 2px; font-size: 14px; }
.value p { margin: 0; color: var(--muted); font-size: 12px; }
.value-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.value-card { min-height: 220px; padding: 26px 23px; background: var(--paper); border: 1px solid var(--line); }
.value-card span { color: var(--orange-ink); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.value-card h3 { margin: 30px 0 10px; font-size: 18px; }
.value-card p { margin: 0; color: var(--muted); font-size: 13px; }
.leadership-card { padding: 42px; border: 1px solid var(--ink); background: var(--paper); }

.work-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-flow: dense; gap: 16px; margin-top: 28px; }
.photo-pair {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 0;
}
.photo-pair .photo-frame { aspect-ratio: 4/5; }
.photo-frame { position: relative; min-width: 0; aspect-ratio: 4/5; display: grid; place-items: end start; margin: 0; overflow: hidden; background: var(--line); }
.photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }
.frame-corners::before, .frame-corners::after { content: ""; position: absolute; z-index: 3; width: 44px; height: 44px; }
.frame-corners::before { top: 22px; left: 22px; border-top: 2px solid var(--orange); border-left: 2px solid var(--orange); }
.frame-corners::after { right: 22px; bottom: 22px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); }
.photo-caption { position: relative; z-index: 3; max-width: calc(100% - 36px); margin: 0 18px 42px; padding: 7px 12px; background: rgba(255,255,255,.94); border-left: 3px solid var(--orange); color: var(--ink); font-size: 11px; font-weight: 700; }
.photo-place { position: absolute; left: 0; bottom: 0; z-index: 3; max-width: 100%; padding: 4px 10px; background: rgba(255,255,255,.94); color: var(--muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }

.contact-box { position: relative; padding: 62px; overflow: hidden; border: 1px solid var(--ink); background: var(--paper); }
.contact-box::before, .contact-box::after { content: ""; position: absolute; pointer-events: none; border: 2px solid var(--orange); border-radius: 50%; }
.contact-box::before { width: 220px; height: 220px; right: -118px; top: -128px; }
.contact-box::after { width: 125px; height: 125px; right: -40px; top: -57px; }
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: end; }
.contact-people { display: grid; gap: 12px; }
.person { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.person:first-child { border-top: 1px solid var(--line); }
.person b, .person span { display: block; }
.person b { font-size: 14px; }
.person span { color: var(--muted); font-size: 11px; }
.person-links { text-align: right; }
.person a { display: block; font-size: 13px; font-weight: 900; text-decoration: none; }
.person a:hover, .person a:focus-visible, .email-link:hover, .email-link:focus-visible { color: var(--orange-ink); }
.email-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 900; text-decoration: none; }
.email-link::before { content: "@"; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--ink); font-size: 12px; }

.inquiry-form { margin-top: 38px; }
.inquiry-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inquiry-form button:disabled { opacity: .6; cursor: wait; transform: none; }
.inquiry-form fieldset { margin: 0; padding: 0; border: 0; }
.inquiry-form legend { width: 100%; margin-bottom: 28px; font-size: 22px; font-weight: 900; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.field { display: grid; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.required { color: var(--orange-ink); }
.field input, .field textarea { width: 100%; border: 1px solid var(--line-field); border-radius: 0; background: var(--paper); color: var(--ink); padding: 13px 14px; }
.field input { min-height: 50px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--orange-ink); outline: 3px solid rgba(180,64,12,.18); }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.form-status { margin: 0; color: var(--muted); font-size: 13px; }
.region-list { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.region-list li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 800; }
.region-list li::after { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px color-mix(in srgb,var(--orange) 13%,transparent); }

.site-footer { position: relative; z-index: 10; padding: 66px 0 25px; background: var(--footer); color: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.25fr .55fr 1.15fr .95fr; gap: 48px; }
.site-footer .wordmark { margin-bottom: 22px; }
.site-footer .wordmark img { width: 145px; }
.footer-summary { max-width: 330px; margin: 0 0 18px; color: #b8bbbd; font-size: 13px; }
.footer-brand { color: var(--paper); font-size: 13px; font-weight: 900; }
.footer-col h3 { margin: 4px 0 20px; color: #f27a2d; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.footer-col a, .footer-col p { display: block; margin: 0 0 9px; color: #d7d9da; font-size: 12px; text-decoration: none; }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--paper); text-decoration: underline; }
.footer-bottom { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 48px; padding-top: 20px; border-top: 1px solid #353638; color: #8e9295; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.footer-motto { color: #f27a2d; font-weight: 900; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; } .delay-2 { transition-delay: .16s; } .delay-3 { transition-delay: .24s; }

@media (min-width: 690px) {
  .culture-motto h2 { white-space: nowrap; }
}
@media (max-width: 1080px) {
  .header-phones { display: none; }
  .hero-grid { grid-template-columns: 1fr .9fr; }
  .service-grid { grid-template-columns: repeat(2,1fr); }
  .value-grid { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1.1fr .7fr 1fr; }
  .footer-col:last-child { grid-column: 2 / 4; }
}
@media (max-width: 900px) {
  .section-head.intro-with-art { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .section-head.intro-with-art .framed-photo { aspect-ratio: 16 / 10; }
}
@media (max-width: 820px) {
  .header-row { min-height: 70px; flex-wrap: wrap; gap: 10px; }
  .desktop-nav { display: none; }
  .header-phones { display: flex; flex-direction: row; order: 4; width: 100%; justify-content: space-between; padding: 9px 0 10px; border-top: 1px solid var(--line); border-left: 0; font-size: 10px; }
  .header-phones span { display: none; }
  .header-quote { margin-left: auto; min-height: 40px; }
  .menu-toggle { display: inline-flex; }
  .mobile-nav { width: 100%; padding: 0 0 14px; border-top: 1px solid var(--line); }
  .mobile-nav.is-open { display: grid; grid-template-columns: repeat(5,1fr); }
  .mobile-nav a { padding: 15px 4px 4px; font-size: 10px; font-weight: 900; text-align: center; text-decoration: none; text-transform: uppercase; }
  .mobile-nav a[aria-current="page"] { color: var(--orange-ink); }
  .hero, .subhero { min-height: auto; }
  .hero-grid, .subhero .hero-grid { grid-template-columns: 1fr; padding-block: 70px 30px; }
  .hero-art, .subhero .hero-art { min-height: 390px; margin-top: -10px; }
  .proof-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .process-step:nth-child(2) { border-right: 0; }
  .process-step:nth-child(3), .process-step:nth-child(4) { border-top: 1px solid var(--line); }
  .preview-strip { grid-template-columns: repeat(3,1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: repeat(2,1fr); }
  .work-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .photo-pair { grid-column: span 2; }
  .related-grid { grid-template-columns: 1fr; }
  .contact-grid { gap: 38px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col:last-child { grid-column: auto; }
}
@media (max-width: 600px) {
  .shell { width: min(calc(100% - 30px),var(--max)); }
  .header-row { column-gap: 8px; }
  .wordmark img { width: 98px; }
  .header-quote { min-height: 37px; padding-inline: 12px; font-size: 8px; }
  .menu-toggle { width: 37px; height: 37px; }
  .header-phones { gap: 12px; }
  .mobile-nav.is-open { grid-template-columns: repeat(3,1fr); row-gap: 4px; }
  .hero-grid, .subhero .hero-grid { padding-top: 56px; }
  h1, .subhero h1 { font-size: clamp(42px,12vw,56px); }
  .hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .hero-actions .button { flex: 1 1 145px; padding-inline: 15px; }
  .hero-art, .subhero .hero-art { min-height: 320px; }
  .run-section { padding: 82px 0; }
  .section-inner { width: auto; margin-inline: 15px; }
  h2 { font-size: clamp(37px,11.8vw,50px); }
  .section-head { margin-bottom: 36px; }
  .service-grid, .process-grid, .value-grid, .form-grid, .service-photo-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 205px; }
  .process-step, .process-step + .process-step { padding: 24px 0; border-right: 0; border-top: 1px solid var(--line); }
  .process-step:first-child { border-top: 0; }
  .preview-strip { grid-template-columns: repeat(2,1fr); }
  .culture-motto { padding: 32px 0; }
  .work-grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-box, .leadership-card { padding: 39px 24px; }
  .person { grid-template-columns: 1fr; }
  .person-links { text-align: left; }
  .field-full { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-pulse { display: none; }
  #cable .cable-live { display: none; }
  #cable .cable-track { stroke: var(--orange); }
  .cable-node { fill: var(--orange); stroke: var(--orange); }
}


/* ---- Concept B ornament, restored 2026-08-31 ------------------------------
   Rounds 3-5 stripped these while fixing real layout bugs. The bugs were the
   problem, not the ornament; the client reads their absence as the site no
   longer looking like the concept he approved. */

.hero-copy > p {
  max-width: 625px;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 20px);
}
.hero-copy > p strong { color: var(--ink); }

.hero-caption {
  position: absolute;
  right: 2px;
  bottom: 20px;
  z-index: 3;
  width: min(310px, 70%);
  padding: 18px 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  box-shadow: 0 16px 45px rgba(16,17,19,.08);
}
.hero-caption b {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hero-caption span { color: var(--muted); font-size: 13px; }

/* Splice-trace divider between sections */
.signal-divider { height: 95px; margin-top: 40px; overflow: hidden; }
.signal-divider svg { width: 100%; height: 100%; }
.signal-link { fill: none; stroke: var(--line-dark); stroke-width: 1.5; }
.signal-live { fill: none; stroke: var(--orange); stroke-width: 2.5; }
.signal-node { fill: var(--paper); stroke: var(--orange); stroke-width: 3; }
.signal-small { fill: var(--line-dark); }

/* Card corner arc */
.service-card { isolation: isolate; }
.service-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  z-index: 0;
  width: 96px;
  height: 96px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .3s var(--ease);
}
.service-card:hover::after { border-color: var(--orange); }
.service-card > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-pulse { display: none; }
}

/* ---- Service area map ------------------------------------------------------
   Real regional-district boundaries from the BC Data Catalogue (ABMS Regional
   Districts), projected to BC Albers and simplified. Replaces the invented
   13-point polygon and its "not to scale" caption. */
.area-layout { display: grid; grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 48px; align-items: start; }
.area-map { position: relative; min-width: 0; }
.area-map-svg { width: 100%; height: auto; display: block; }
.map-context path { fill: var(--soft); stroke: var(--line); stroke-width: 1; }
.map-served path { fill: var(--orange); fill-opacity: .16; stroke: var(--orange); stroke-width: 1.5; }
.map-pin { fill: var(--paper); stroke: var(--orange); stroke-width: 3.5; }
.map-pin-label { font: 900 15px Arial, Helvetica, sans-serif; fill: var(--ink); letter-spacing: .01em; }
.map-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 22px; color: var(--muted); font-size: 13px; }
.map-key-swatch { width: 16px; height: 12px; background: color-mix(in srgb, var(--orange) 16%, white); border: 1.5px solid var(--orange); }
.map-key-pin { width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 3px solid var(--orange); }
@media (max-width: 900px) {
  .area-layout { grid-template-columns: 1fr; gap: 30px; }
  .map-pin-label { font-size: 21px; }
}


/* Heading column carries the section CTA. Without it the column was an empty
   rectangle beside a tall body column, which is the void the client flagged. */
.split-layout > :first-child .button { margin-top: 30px; }
.intro-copy h2 { margin-bottom: 22px; }
/* the ring sat on top of the photograph; put it behind and clear of the frame */
.intro-figure::after { right: -22px; bottom: -22px; z-index: -1; }
.intro-figure { z-index: 0; }

/* Heading column: h2 then CTA, stacked. Applies to .section-head columns that
   carry a button so the column has mass instead of leaving a void. */
.section-head > div > .button { margin-top: 26px; }
.section-head-copy > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }


/* Craftsmanship preview: one feature frame at 2x2 with four supporting tiles.
   A flat row of six equal thumbnails read as filler and left the heading column
   empty above it. */
.preview-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
  margin: 30px 0 34px;
}
.preview-mosaic a { position: relative; display: block; aspect-ratio: 1; min-width: 0; overflow: hidden; background: var(--line); }
.preview-mosaic a.feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.preview-mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); transition: transform .45s var(--ease); }
.preview-mosaic a:hover img, .preview-mosaic a:focus-visible img { transform: scale(1.04); }
@media (max-width: 820px) {
  .preview-mosaic { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .preview-mosaic a.feature { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; }
}

/* Introduction: photograph left, copy right, with a credential card overlapping
   the frame's lower-left corner. The overlap fills what was dead space and
   gives depth without a shadow, which keeps the border-defined system intact. */
.intro-layout { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); gap: 64px; align-items: center; }
.intro-figure { position: relative; margin: 0 0 0 46px; }
.intro-figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; filter: saturate(.92) contrast(1.03); }
.intro-figure figcaption { margin-top: 12px; margin-left: 0; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.intro-badge {
  position: absolute;
  left: -46px;
  bottom: 46px;
  z-index: 2;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
}
.intro-badge b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.intro-badge span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.intro-copy .eyebrow { color: var(--orange-ink); }
.intro-copy h2 { margin: 0 0 22px; }
.intro-copy .copy-column { max-width: 58ch; }
.intro-copy .button { margin-top: 28px; }
@media (max-width: 980px) {
  .intro-layout { grid-template-columns: 1fr; gap: 34px; }
  .intro-figure { margin-left: 30px; }
  .intro-badge { left: -30px; bottom: 30px; padding: 14px 16px; }
}


/* three across reads as a set rather than two-plus-orphan */
.service-photo-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 900px) {
  .service-copy:has(.detail-list) { grid-template-columns: 1fr; gap: 8px; }
  .service-copy:has(.detail-list) > .reveal,
  .service-copy:has(.detail-list) > .detail-list { grid-column: 1; }
  .service-photo-grid { grid-template-columns: 1fr; }
}

/* Service detail sections: copy and its list on the left, one project
   photograph on the right. The copy on these pages is genuinely short; no grid
   arrangement fills a 1240px canvas with it, so the space needs real content.
   The photographs were sitting in an orphaned grid at the foot of each page. */
.service-copy.has-figure {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,0.8fr);
  gap: 20px 60px;
  /* these sections carry short copy against a tall frame; centring splits the
     slack instead of dropping all of it under the text */
  align-items: center;
}
.service-copy.has-figure > h2 { grid-column: 1 / -1; max-width: 20ch; margin-bottom: 4px; }
.service-copy.has-figure > .svc-body { grid-column: 1; max-width: 60ch; }
.service-copy.has-figure > .svc-figure { grid-column: 2; margin: 6px 0 0; }
.svc-figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; filter: saturate(.92) contrast(1.03); }
.service-copy .detail-list { margin-top: 24px; }
@media (max-width: 900px) {
  .service-copy.has-figure { grid-template-columns: 1fr; gap: 22px; }
  .service-copy.has-figure > .svc-body,
  .service-copy.has-figure > .svc-figure { grid-column: 1; }
  .svc-figure img { aspect-ratio: 16/10; }
}

/* ---- Alternating image / copy rows ---------------------------------------
   Measured against jesseelectrical.com: 384 words over 5.8 screens but ten
   photographs. Our about page carried 409 words over 5.2 screens with one.
   The space is filled with imagery, not padding, and every row has content on
   both sides. The offset block is Concept B's own device, reinstated behind a
   photograph that actually exists. */
.alt-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 68px;
  align-items: center;
}
.alt-row.flip > .alt-figure { order: -1; }
.alt-copy > h2 { margin: 0 0 22px; }
.alt-copy > .copy-column { max-width: 56ch; }
.alt-copy .button { margin-top: 28px; }
.alt-figure { position: relative; margin: 0; isolation: isolate; }
.alt-figure img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; filter: saturate(.92) contrast(1.03); }
.alt-figure figcaption { position: relative; z-index: 1; margin-top: 12px; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.alt-figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -20px;
  bottom: 14px;
  width: 62%;
  height: 68%;
  background: var(--orange);
}
.alt-row.flip .alt-figure::before { right: auto; left: -20px; }
@media (max-width: 900px) {
  .alt-row { grid-template-columns: 1fr; gap: 30px; }
  .alt-row.flip > .alt-figure { order: 0; }
  .alt-figure::before { display: none; }
}

/* Values: a numbered rule reads cleanly at any size. The previous CSS-gradient
   checkmark rendered as an angular squiggle inside its box. */
.value-list { display: grid; gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: v; }
.value-list li { position: relative; padding-left: 46px; color: var(--muted); font-size: 16px; counter-increment: v; }
.value-list li::before {
  content: counter(v, decimal-leading-zero);
  position: absolute;
  left: 0; top: 1px;
  color: var(--orange-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
.value-list li::after {
  content: "";
  position: absolute;
  left: 0; top: 22px; bottom: 2px;
  width: 1px;
  background: var(--line);
}
.value-list li b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 17px; font-weight: 700; }

/* ==========================================================================
   WordPress theme additions — shipped root css/site.css is VERBATIM above.
   Only core-block wrapper, editor, and theme-owned decoration adaptations.
   ========================================================================== */

/* A link wrapped in a core/paragraph block purely so its label text is
   editable in the block editor. display:contents removes the paragraph from
   the box tree so flex/grid parents lay out the <a> exactly as before. */
.nav-link { display: contents; }
.nav-link a { color: inherit; text-decoration: inherit; }

/* Keep static row margins (hero-actions: 28px; related-grid: 34px).
   Only the wrappers introduced around standalone links have no margins. */
.wp-block-buttons.single-button,
.wp-block-buttons.header-quote-wrap,
.wp-block-buttons.person-links { margin: 0; }
.wp-block-buttons.hero-actions,
.wp-block-buttons.form-actions { display: flex; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.wp-block-buttons.hero-actions { gap: 12px; }
.wp-block-buttons.form-actions { gap: 18px; }
.wp-block-buttons.related-grid { margin-top: 34px; }
.wp-block-buttons .wp-block-button { margin: 0; }

/* Synthetic classes for a handful of elements that carried no class in the
   static build and were styled purely by tag (".proof-card strong",
   ".person b/span"). Converting them to a core/paragraph
   block means the tag becomes <p>, so give each one a class instead — exact
   copies of the original tag-based rule, scoped under the same parent. */
.proof-card .proof-stat-title { display: block; margin-bottom: 6px; font-size: 16px; }
.proof-card .proof-stat-desc { display: block; color: var(--muted); font-size: 12px; }
.person .person-name, .person .person-role { display: block; }
.person .person-name { font-size: 14px; }
.person .person-role { color: var(--muted); font-size: 11px; }

/* Core save() puts custom button classes on the wrapper, not the link.
   Transfer the static anchor styling to the actual focusable link. */
.wp-block-buttons .wp-block-button { display: contents; }
.wp-block-button > .wp-block-button__link {
  padding: 0; border: 0; border-radius: 0; background: transparent;
  color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit;
  text-decoration: none; box-shadow: none;
}
/* Core's width:100%/height:100% otherwise resolve against the whole row
   when the button wrapper uses display:contents. Keep intrinsic anchor
   sizing; the related-service grid and mobile hero flex rules still stretch
   their items just as the original bare anchors did. */
.wp-block-buttons .wp-block-button > .wp-block-button__link { width: auto; height: auto; }
.wp-block-button.button > .wp-block-button__link {
  display: inline-flex; min-height: 48px; align-items: center; justify-content: center;
  gap: 10px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink); font-size: 12px; font-weight: 900;
  letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.wp-block-button.button > .wp-block-button__link:hover,
.wp-block-button.button > .wp-block-button__link:focus-visible { transform: translateY(-2px); }
.wp-block-button.button-primary > .wp-block-button__link { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.wp-block-button.button-dark > .wp-block-button__link { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.wp-block-button.header-quote > .wp-block-button__link { min-height: 42px; padding-inline: 18px; }
.wp-block-buttons.related-grid { display: grid; }
.wp-block-button.related-link > .wp-block-button__link {
  min-width: 0; padding: 24px; background: var(--paper); border: 1px solid var(--line);
  font-size: 15px; font-weight: 900; line-height: 1.25; text-align: left;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.wp-block-button.related-link > .wp-block-button__link:hover,
.wp-block-button.related-link > .wp-block-button__link:focus-visible {
  transform: translateY(-3px); border-color: var(--orange); box-shadow: 0 14px 28px rgba(16,17,19,.08);
}
.wp-block-button.email-link > .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 900;
}
.wp-block-button.email-link > .wp-block-button__link::before {
  content: "@"; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--orange); color: var(--ink); font-size: 12px;
}
.wp-block-button.email-link > .wp-block-button__link:hover,
.wp-block-button.email-link > .wp-block-button__link:focus-visible { color: var(--orange-ink); }
.wp-block-buttons.person-links { display: block; }
.person .wp-block-button > .wp-block-button__link { display: block; font-size: 13px; font-weight: 900; text-align: inherit; }
.wp-block-buttons.single-button { display: block; }

.proof-card .proof-stat-title, .person .person-name { font-weight: 700; }
.proof-card .proof-stat-desc, .person .person-name, .person .person-role { margin: 0; }

/* These editable paragraphs replace inline spans in the static markup.
   Prevent paragraph-only rules from changing their metrics or adding gaps. */
.culture-copy p.pill { margin: 0 0 18px; color: var(--ink); font-size: 10px; }
.footer-bottom .footer-motto { margin: 0; }

/* The template-part wrapper must not constrain the sticky header's travel. */
.wp-site-blocks > .wp-block-template-part:has(> .site-header) { position: sticky; top: 0; z-index: 100; }
body.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .site-header) { top: 32px; }
@media (max-width: 820px) { .wp-block-buttons.header-quote-wrap { margin-left: auto; } }
@media (max-width: 782px) { body.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .site-header) { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .site-header) { top: 0; } }

/* The editor does not run the front-end scroll observer. Keep editable copy
   visible, and leave block wrappers selectable in its canvas. */
.editor-styles-wrapper .reveal { opacity: 1; transform: none; }
.editor-styles-wrapper .wp-block-buttons .wp-block-button { display: inline-block; padding: 0; border: 0; background: none; }
.editor-styles-wrapper .wp-block-button.email-link::before { content: none; }

/* Preserve the source section alternation after hero/breadcrumb blocks move
   into post_content and change the sibling indices. */
.wp-block-post-content > .run-section { background: var(--paper); }
.wp-block-post-content > .run-section.ftr-section-alt { background: var(--soft); }
/* theme.json blockGap:null leaves inner flow margins to the static CSS.
   Only the outer page/template wrappers should have their margins zeroed. */
.wp-site-blocks > *, .wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }

.wp-block-button.email-link::before { content: none; }
.footer-col .nav-link { display: contents; }

/* Responsive anchor rules follow the same breakpoints as the static build. */
@media (max-width: 820px) {
  .wp-block-button.header-quote > .wp-block-button__link { min-height: 40px; }
}
@media (max-width: 600px) {
  .wp-block-button.header-quote > .wp-block-button__link { min-height: 37px; padding-inline: 12px; font-size: 8px; }
  .hero-actions .wp-block-button.button > .wp-block-button__link { flex: 1 1 145px; padding-inline: 15px; }
}

/* General inquiries was an inline pill followed immediately by an email
   link. Remove only the added button-row box so they share the same line
   when space allows, retaining the static wrapping on small screens. */
.contact-grid > .wp-block-group > .pill + .wp-block-buttons.single-button:has(> .email-link) { display: contents; }
/* Block serialization adds whitespace between the formerly adjacent inline
   elements. Suppress that space; the pill already has its own 10px size. */
.contact-grid > .wp-block-group > .pill + .single-button:has(> .email-link) { font-size: 0; }
.contact-grid > .wp-block-group > .pill + .single-button > .email-link > .wp-block-button__link { font-size: 16px; }

/* Root Concept B photos: core/image owns the figure and its caption. */
.wp-block-image { margin: 0; }
.wp-block-image.hero-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.intro-figure { margin: 0 0 0 46px; }
.wp-block-image.intro-figure > img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.wp-block-image.alt-figure > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.wp-block-image.svc-figure > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.wp-block-image:is(.intro-figure, .alt-figure) > figcaption {
  margin: 12px 0 0; color: var(--muted); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; text-align: left;
}
@media (max-width: 980px) { .wp-block-image.intro-figure { margin-left: 30px; } }
@media (max-width: 900px) { .wp-block-image.svc-figure > img { aspect-ratio: 16/10; } }

/* Preserve the five linked images, including the 2x2 feature tile. */
.preview-mosaic > .wp-block-image {
  position: relative; display: block; aspect-ratio: 1; min-width: 0;
  overflow: hidden; background: var(--line); margin: 0;
}
.preview-mosaic > .wp-block-image.feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.preview-mosaic > .wp-block-image > a { position: static; width: 100%; height: 100%; aspect-ratio: auto; }
@media (max-width: 820px) {
  .preview-mosaic > .wp-block-image.feature { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; }
}

/* Normal tiles and the paired McGill photos are real core galleries. The
   ordinary gallery wrappers contribute no grid cell; the pair contributes
   the same spanning cell as the root .photo-pair div. */
.work-grid > .wp-block-gallery.ftr-work-items { display: contents; }
.work-grid > .wp-block-gallery.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.work-grid .wp-block-gallery.has-nested-images > figure.wp-block-image {
  display: grid; place-items: end start; width: 100% !important; max-width: none;
  flex: none; align-self: stretch; margin: 0; aspect-ratio: 4/5;
}
.work-grid .wp-block-gallery.has-nested-images > figure.wp-block-image > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; flex: none;
}
.work-grid .wp-block-gallery.has-nested-images > figure.wp-block-image > figcaption {
  position: absolute; inset: 0; max-height: none; max-width: none; width: auto;
  margin: 0; padding: 0; overflow: visible; background: transparent; text-align: left;
  font-size: inherit; color: inherit; text-transform: none; letter-spacing: normal;
}
.work-grid .wp-block-gallery figcaption .photo-caption { position: absolute; left: 0; bottom: 0; }
@media (max-width: 700px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* A two-column span would create an implicit track beside the single column.
     Stack the McGill pair too, so its long addresses have the full tile width. */
  .work-grid > .wp-block-gallery.photo-pair {
    grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 20px;
  }
  /* Let wrapped badges and addresses determine their spacing without overlap. */
  .work-grid .wp-block-gallery.has-nested-images > figure.wp-block-image > figcaption {
    inset: auto 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  }
  .work-grid .wp-block-gallery figcaption .photo-caption {
    position: static; margin: 0 18px;
  }
  .work-grid .wp-block-gallery figcaption .photo-place { position: static; }
  .work-grid .wp-block-gallery figcaption :is(.photo-caption, .photo-place) {
    white-space: normal; overflow-wrap: anywhere;
  }
}
/* The root's supporting-photo grid remains supported if source copy uses it. */
.wp-block-gallery.service-photo-grid { display: grid; margin-bottom: 0; }
.wp-block-gallery.service-photo-grid > .wp-block-image { width: 100% !important; max-width: none; flex: none; }

/* Static CTA margins were on bare anchors, now nested in core/buttons. */
.section-head > div > .single-button .button > .wp-block-button__link { margin-top: 26px; }
.intro-copy .single-button .button > .wp-block-button__link,
.alt-copy .single-button .button > .wp-block-button__link { margin-top: 28px; }
.split-layout > :first-child .single-button .button > .wp-block-button__link { margin-top: 30px; }
.wp-block-button.button-primary > .wp-block-button__link:hover,
.wp-block-button.button-primary > .wp-block-button__link:focus-visible { background: var(--orange-hover); border-color: var(--orange-hover); }
.wp-block-button.button-ghost > .wp-block-button__link:hover,
.wp-block-button.button-ghost > .wp-block-button__link:focus-visible { border-color: var(--orange); }

/* Decorative arrows live in the theme so editing a label cannot strip SVG. */
.wp-block-button:is(.ftr-arrow-forward, .ftr-arrow-diagonal) > .wp-block-button__link::after {
  content: ""; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.18) url('../img/arrow-forward.svg') center / 14px 14px no-repeat;
  transform: translateY(-.5px);
}
.wp-block-button.ftr-arrow-diagonal > .wp-block-button__link::after { background-image: url('../img/arrow-diagonal.svg'); }
.wp-block-button.button-dark.ftr-arrow-forward > .wp-block-button__link::after { background-image: url('../img/arrow-forward-white.svg'); }

/* RichText uses strong for bold; keep the source values-list label metrics. */
.value-list li strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 17px; font-weight: 700; }

/* Mobile refinements (client-approved). Keep every override phone-only. */
@media (max-width: 700px) {
  /* Fit Telecommunications inside the 330px column at a 360px viewport.
     Retain the display weight/tracking; wrapping is only a fallback for edits. */
  h2 { font-size: clamp(32px, 9.5vw, 44px); }
  .services-hero h1,
  .service-detail-hero h1 { font-size: clamp(35px, 10vw, 56px); }
  /* CTA panels have another 24px of padding on each side. */
  .contact-box h2 { font-size: clamp(28px, 8vw, 40px); }
  h1, h2,
  .services-hero h1,
  .service-detail-hero h1,
  .contact-box h2 { min-width: 0; overflow-wrap: break-word; }

  /* A bare 1fr track retains its min-content floor, widening the entire row
     (including About's paragraphs, photograph and caption). */
  .hero-grid, .subhero .hero-grid,
  .section-head, .section-head.single, .section-head.intro-with-art,
  .intro-layout, .alt-row, .split-layout,
  .service-copy.has-figure, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.hero-grid, .section-head, .intro-layout, .alt-row, .split-layout,
      .service-copy.has-figure, .contact-grid) > * { min-width: 0; }

  /* The hero's existing 30px bottom padding separates the stacked CTAs
     from the proof cards; the desktop pull-up would cover the second CTA. */
  .proof-strip .proof-grid { margin-top: 0; }

  /* Remove the decorative grid item itself, including its reserved height.
     Photo-bearing heroes stay visible; both ornaments are already aria-hidden. */
  .hero-art[aria-hidden="true"],
  .signal-divider[aria-hidden="true"] { display: none; }

  /* Subpage hero photos return to normal flow instead of the desktop inset. */
  .hero-art:has(.hero-photo) { min-height: 0; margin: 0; }
  .wp-block-image.hero-photo { position: relative; inset: auto; }

  /* Only feature/side photos: gallery work-grid tiles and mosaic keep their rules.
     Size the image separately so editable captions remain below the crop. */
  .wp-block-image:is(.hero-photo, .intro-figure, .alt-figure, .svc-figure, .framed-photo, .framed-img),
  .section-head.intro-with-art .framed-photo,
  .service-copy.has-figure > .svc-figure {
    width: 100%; max-width: none; min-width: 0; height: auto;
    aspect-ratio: auto; margin: 0; justify-self: stretch;
  }
  .wp-block-image:is(.hero-photo, .intro-figure, .alt-figure, .svc-figure, .framed-photo, .framed-img) > img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
    max-height: 55vh; object-fit: cover;
  }
  .wp-block-image:is(.hero-photo, .intro-figure, .alt-figure, .svc-figure, .framed-photo, .framed-img) > figcaption {
    margin-inline: 0; padding-inline: 0; text-align: left;
  }
  .intro-figure::after, .alt-figure::before { display: none; }

  /* Core button wrappers use display:contents; stretch the actual links.
     Also covers other paired CTA rows without changing contact/service links. */
  .wp-block-buttons.hero-actions,
  .wp-block-buttons:has(> .button + .button) {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px;
  }
  .wp-block-buttons.hero-actions .wp-block-button.button > .wp-block-button__link,
  .wp-block-buttons:has(> .button + .button) > .button > .wp-block-button__link {
    flex: 0 0 auto; width: 100%; min-width: 0; padding-inline: 15px;
    white-space: nowrap;
  }

  /* 70% of the existing 112px logo (98px at <=600px). */
  .site-header .wordmark img { width: 78.4px; height: auto; }
  .header-row { min-height: 0; padding-top: 6px; column-gap: 8px; row-gap: 4px; }
  .header-phones { padding-block: 6px; gap: 8px; }
  .wp-block-button.header-quote > .wp-block-button__link {
    min-height: 37px; padding-inline: 12px; font-size: 8px; white-space: nowrap;
  }
  .menu-toggle { flex-shrink: 0; }
}
@media (max-width: 600px) {
  .site-header .wordmark img { width: 68.6px; }
}

/* Visual polish: keep the shipped static baseline above intact. */
@media (min-width: 821px) {
  /* The 78px header leaves 11px above and below this logo. */
  .site-header .wordmark img { width: auto; height: 56px; }
  .contact-grid > .wp-block-group:has(> .pill) { align-self: start; }
}
@media (min-width: 701px) and (max-width: 820px) {
  /* The wrapped tablet header also needs space above its first row. */
  .header-row { padding-top: 10px; }
}

/* Keep each phrase intact on its own line. At the original letter-spacing the
   phrases never fit one line inside the hero column, so the separator is hidden. */
.eyebrow-split {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  column-gap: 8px;
  row-gap: 4px;
}
.eyebrow-split .eyebrow-part { grid-column: 2; white-space: nowrap; }
.eyebrow-split .sep { display: none; }
@media (max-width: 600px) {
  /* A phrase is wider than the phone column at any readable tracking, so let it wrap. */
  .eyebrow-split { letter-spacing: .12em; }
  .eyebrow-split .eyebrow-part { white-space: normal; }
}

@media (min-width: 601px) {
  /* Identical insets in both the four-column and two-column grids. */
  .process-step { padding-left: 24px; }
}
@media (max-width: 820px) {
  /* Keep both arcs in the top padding, clear of every CTA heading. */
  .contact-box::before, .contact-box::after { box-sizing: border-box; }
  .contact-box::before { width: 110px; height: 110px; right: -70px; top: -88px; }
  .contact-box::after { width: 70px; height: 70px; right: -42px; top: -46px; }
  /* The feature's 16:10 row must not set the height of the square-tile rows. */
  .preview-mosaic { grid-auto-rows: auto; }
}