/*
  J. Shea Technologies - site styles ("Silver Ring" look)
  Plain CSS, no build step. Mobile first.
  Colors come from the logo: navy #1B2A41, olive #5B6B4A, sage #919C86,
  silver #A8A8A8. Dark mode is a navy version of the same look.
  Light is the default for everyone, even on a device in dark mode. Dark
  mode is on only when the visitor presses the moon button in the header:
  theme.js then puts data-theme="dark" on <html> (and remembers it).
  Fonts: IBM Plex Sans (text), IBM Plex Mono (labels and buttons),
  Libre Caslon Text (the "J. Shea" wordmark). All three load from
  Google Fonts; system fonts take over if they don't load.
  Sections:
    1. Tokens (light, then dark under :root[data-theme="dark"])
    2. Base
    3. Layout utilities
    4. Buttons, labels, placeholders
    5. Header, brand and menu
    6. Hero, silver ring and proof strip
    7. Services
    8. Steps
    9. Why us
   10. Mini-ISP explainer
   11. Service area and contact details
   12. Contact form
   13. Footer
   14. Privacy and 404 pages
   15. Motion
   16. Home and business pages (home-page doors, page hero, partner
       card, call to action)
*/

/* 1. Tokens ------------------------------------------------------------ */
:root {
  color-scheme: light;

  --ground: #F4F5F3;
  --band: #FFFFFF;
  --card: #FFFFFF;
  --input-bg: #FFFFFF;
  --hover-fill: #F7F8F5;
  --line: #D5D8D1;
  --line-card: #C9CCC5;
  --line-strong: #858C80;
  --ink: #1B2A41;
  --ink-muted: #4A5466;
  --ink-soft: #56606E;
  --accent: #5B6B4A;
  --accent-strong: #44523A;
  --accent-tint: #E8ECE2;
  --btn-bg: #5B6B4A;
  --btn-bg-hover: #44523A;
  --on-accent: #FFFFFF;
  --link: #1B2A41;
  --link-hover: #44523A;
  --focus: #1B2A41;
  --error: #9B2C1F;
  --tbd-bg: #FFF1DC;
  --tbd-ink: #92400E;
  --header-bg: rgba(244, 245, 243, 0.92);

  /* The four marks from the logo's connector lines */
  --mark-olive: #5B6B4A;
  --mark-sage: #919C86;
  --mark-silver: #A8A8A8;
  --mark-navy: #1B2A41;

  /* Silver ring */
  --ring-outer: #DDE0D9;
  --ring-ticks: #C4C8BF;
  --ring-1: #5B6B4A;
  --ring-2: #919C86;
  --ring-3: #DADCD6;
  --ring-4: #A8A8A8;

  --footer-bg: #1B2A41;
  --footer-ink: #FFFFFF;
  --footer-muted: #C9D0BE;
  --footer-label: #AEB8A2;
  --footer-line: #34435A;
  --footer-focus: #C9D6B0;
  --footer-tbd: #F7C98A;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.125rem, 1.45rem + 2.9vw, 3.125rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  --fs-h3: 1.1875rem;
  --fs-lead: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;

  --r-control: 8px;
  --r-card: 14px;
  --r-pill: 999px;

  --gutter: 1rem;
  --header-h: 68px;
  --section-pad: clamp(3.5rem, 7vw, 5.5rem);
}

/* Dark mode: only after the visitor presses the moon button. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ground: #0F1826;
  --band: #132033;
  --card: #16243A;
  --input-bg: #0F1A2A;
  --hover-fill: #1B2B44;
  --line: #243349;
  --line-card: #2C3D57;
  --line-strong: #62728A;
  --ink: #E8ECF1;
  --ink-muted: #AEB8C6;
  --ink-soft: #98A4B5;
  --accent: #A9B98F;
  --accent-strong: #C4D2AB;
  --accent-tint: #223122;
  --btn-bg: #A9B98F;
  --btn-bg-hover: #C4D2AB;
  --on-accent: #0F1826;
  --link: #DCE3EC;
  --link-hover: #C4D2AB;
  --focus: #C9D6B0;
  --error: #F2A490;
  --tbd-bg: #3A2A12;
  --tbd-ink: #F7C98A;
  --header-bg: rgba(15, 24, 38, 0.9);

  --mark-olive: #A9B98F;
  --mark-sage: #919C86;
  --mark-silver: #A8AEB8;
  --mark-navy: #DCE3EC;

  --ring-outer: #1D2B41;
  --ring-ticks: #2F405B;
  --ring-1: #6F8159;
  --ring-2: #919C86;
  --ring-3: #D0D4D9;
  --ring-4: #8E96A3;

  --footer-bg: #0A111C;
  --footer-line: #1F2C41;
}

@media (min-width: 40em) {
  :root { --gutter: 1.5rem; }
}

@media (min-width: 64em) {
  :root { --gutter: 2rem; }
}

@media (min-width: 72em) {
  :root { --header-h: 84px; }
}

/* 2. Base -------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Clears the sticky header for every #link on the site. Don't also add
     scroll-margin-top to targets: the two add up. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.022em;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.13;
  font-weight: 600;
  letter-spacing: -0.018em;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.005em;
}

p {
  margin: 0;
  max-width: 68ch;
}

p + p {
  margin-top: 1em;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

svg,
img {
  display: block;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--accent-tint);
  color: var(--ink);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.625rem 1.125rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ground);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.skip-link:hover {
  color: var(--ground);
}

main:focus {
  outline: none;
}

/* 3. Layout utilities -------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(75rem + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.section {
  padding-block: var(--section-pad);
}

/* White bands with hairlines, as in the design. */
.band {
  background: var(--band);
  border-block: 1px solid var(--line);
}

.section-ruled {
  border-top: 1px solid var(--line);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.section-head > h2 + p,
.section-head > h1 + p {
  margin-top: 1.125rem;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 60ch;
}

.muted {
  color: var(--ink-muted);
}

.small {
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* Keeps a short term such as "Wi-Fi" from breaking at its hyphen. */
.nowrap {
  white-space: nowrap;
}

.cols {
  display: grid;
  gap: 2rem;
}

@media (min-width: 60em) {
  .cols {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  .c-1-5 { grid-column: 1 / span 5; }
  .c-1-6 { grid-column: 1 / span 6; }
  .c-1-7 { grid-column: 1 / span 7; }
  .c-6-7 { grid-column: 6 / span 7; }
  .c-7-6 { grid-column: 7 / span 6; }
  .c-8-5 { grid-column: 8 / span 5; }
  .r-1 { grid-row: 1; }
}

.section-cta {
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

/* 4. Buttons, labels, placeholders ------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0.75rem 1.625rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.btn-primary {
  background: var(--btn-bg);
  color: var(--on-accent);
}

.btn-primary:hover {
  background: var(--btn-bg-hover);
  color: var(--on-accent);
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  cursor: progress;
  background: var(--btn-bg-hover);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-outline:hover {
  color: var(--ink);
  background: var(--accent-tint);
}

.btn-sm {
  min-height: 44px;
  padding: 0.5rem 1.375rem;
}

/* A small arrow drawn with CSS, so it survives the button text changing
   to "Sending..." and needs no image. */
.btn-arrow::after {
  content: "";
  flex: none;
  width: 14px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 5px, 8.6px 5px, 5.2px 1.4px, 6.6px 0, 13px 6px, 6.6px 12px, 5.2px 10.6px, 8.6px 7px, 0 7px);
}

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 40em) {
  .btn-row {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Section label: "LABEL ---- second label", in IBM Plex Mono */
.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  max-width: none;
  margin: 0 0 1.125rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::after {
  content: "";
  order: 1;
  flex: none;
  width: 44px;
  height: 1px;
  background: var(--mark-silver);
}

.eyebrow-sub {
  order: 2;
  font-weight: 400;
  color: var(--ink-soft);
}

/* A long label with no second label: on the narrowest phones the rule
   would drop to a line of its own, so it is left out there. */
@media (max-width: 20.49em) {
  .eyebrow--long::after { display: none; }
}

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Visible placeholder for facts the owner still has to confirm.
   Search the HTML for class="tbd" to find every one (see README). */
.tbd {
  padding: 0 0.3em;
  border: 1px dashed currentColor;
  border-radius: 4px;
  background: var(--tbd-bg);
  color: var(--tbd-ink);
  font-weight: 500;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 5. Header, brand and menu -------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

/* The mark from the business card (assets/logo-mark.svg): navy JS on an
   off-white disc inside the silver ring. It is round, so it sits centred in
   the same box the old logo used and the header keeps its size. It brings
   its own off-white disc, so dark mode needs no light tile behind it. */
.brand-logo {
  flex: none;
  width: 38px;
  height: 47px;
  object-fit: contain;
}

.brand-rule {
  display: none;
  flex: none;
  width: 1px;
  height: 38px;
  background: var(--line-card);
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
}

.wordmark-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

.wordmark-sub {
  font-family: var(--font-serif);
  font-size: 0.5625rem;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 22.5em) {
  .wordmark-name { font-size: 1.125rem; }
  .wordmark-sub { font-size: 0.5rem; letter-spacing: 0.22em; }
}

@media (min-width: 30em) {
  .brand { gap: 0.875rem; }
  .brand-rule { display: block; }
  .wordmark-sub { letter-spacing: 0.36em; }
}

.nav-desktop {
  display: none;
}

.nav-desktop ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
}

.nav-desktop a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: underline 2px transparent;
  text-underline-offset: 0.6em;
  transition: text-decoration-color 150ms ease, color 150ms ease;
}

.nav-desktop a:hover,
.nav-desktop a.is-current,
.nav-desktop a[aria-current="page"] {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.header-cta {
  display: none;
  white-space: nowrap;
}

/* Small screens: a short "Contact" button (jumps to the form) sits next
   to Menu. From 768px up, "Request a site visit" takes its place. */
.header-contact,
.menu > summary {
  gap: 0.5rem;
  padding-inline: 0.75rem 0.8125rem;
  letter-spacing: 0.1em;
}

/* Light/dark button: a round, icon-only outline button, 44 x 44px, first
   in the header buttons. It ships hidden and site.js shows it. The moon
   shows in light mode, the sun in dark mode. Its name is "Dark mode" and
   aria-pressed says whether dark mode is on. */
.theme-toggle {
  flex: none;
  width: 44px;
  padding: 0;
}

.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }

/* Phones narrower than 480px: the Contact button shows its icon only.
   Below 400px the header buttons sit closer together, and below 380px the
   Menu button shows its icon only too, so the light/dark button fits and
   the header keeps its side gutters (390px iPhones still read "MENU").
   Their accessible names stay "Contact" and "Menu". */
@media (max-width: 29.99em) {
  .header-contact .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .header-contact {
    min-width: 44px;
    padding-inline: 0.75rem;
  }
}

@media (max-width: 24.99em) {
  .header-inner { gap: 0.375rem; }
  .header-actions { gap: 0.25rem; }
  /* The buttons are only 4px apart here: pull the focus ring in so it
     doesn't run into the next button. */
  .header-actions > .btn:focus-visible,
  .menu > summary:focus-visible {
    outline-offset: 1px;
  }
}

@media (max-width: 23.74em) {
  .menu > summary .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .menu > summary {
    min-width: 44px;
    padding-inline: 0.75rem;
  }
}

.menu > summary {
  list-style: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu[open] > summary {
  background: var(--accent-tint);
}

.menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h) - 5px);
  max-height: calc(100dvh - var(--header-h) - 5px);
  overflow-y: auto;
  background: var(--ground);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 32px rgba(27, 42, 65, 0.1);
}

.menu-panel ul {
  list-style: none;
}

.menu-panel li + li a {
  border-top: 1px solid var(--line);
}

.menu-panel li a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.menu-panel li a:hover {
  background: var(--band);
}

/* The page you're on: an olive bar on the left edge. */
.menu-panel li a[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
}

/* The panel clips anything outside it (overflow-y: auto), so draw the
   focus ring inside these full-width links. */
.menu-panel li a:focus-visible {
  outline-offset: -3px;
}

.menu-actions {
  display: grid;
  gap: 0.75rem;
  padding: 1rem max(var(--gutter), env(safe-area-inset-right)) 1.25rem max(var(--gutter), env(safe-area-inset-left));
  border-top: 1px solid var(--line);
}

@media (min-width: 48em) {
  .header-cta { display: inline-flex; }
  .header-contact { display: none; }
  .header-actions { gap: 0.625rem; }
}

@media (min-width: 72em) {
  .header-inner { gap: 1.5rem; }
  .brand { gap: 1rem; margin-right: 0; }
  .brand-logo { width: 62px; height: 76px; }
  .wordmark { gap: 7px; }
  .wordmark-name { font-size: 1.4375rem; }
  .wordmark-sub { font-size: 0.625rem; letter-spacing: 0.38em; }
  .nav-desktop { display: block; margin-left: auto; }
  .menu { display: none; }
  .header-actions { gap: 0.75rem; }
}

@media (min-width: 80em) {
  .nav-desktop ul { gap: 1.875rem; }
}

/* In dark mode the open phone menu gets a lighter navy, a stronger bottom
   edge and a dark shadow, so it stands apart from the page under it. */
:root[data-theme="dark"] .menu-panel {
  background: var(--band);
  border-bottom-color: var(--line-strong);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] .menu-panel li a:hover { background: var(--hover-fill); }

/* 6. Hero, silver ring and proof strip --------------------------------- */
.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding-block: 4.5rem 5rem;
}

@supports (overflow: clip) {
  .hero-stage { overflow: clip; }
}

@media (min-width: 48em) {
  .hero-stage {
    min-height: 740px;
    padding-block: 5rem;
  }
}

.hero-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  max-width: none;
  height: 740px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* On phones the ring runs behind the text, so it is quieter there. */
@media (max-width: 47.99em) {
  .hero-art { opacity: 0.6; }
}

.ring-outer {
  fill: none;
  stroke: var(--ring-outer);
  stroke-width: 1;
}

.ring-ticks {
  fill: none;
  stroke: var(--ring-ticks);
  stroke-width: 7;
  stroke-dasharray: 1.3 23.62;
}

.ring-main {
  fill: none;
  stroke-width: 6;
}

.rs-1 { stop-color: var(--ring-1); }
.rs-2 { stop-color: var(--ring-2); }
.rs-3 { stop-color: var(--ring-3); }
.rs-4 { stop-color: var(--ring-4); }

/* The connector lines and their labels only show where they fit. */
.hero-art-side {
  display: none;
}

@media (min-width: 75em) {
  .hero-art-side { display: inline; }
}

.wire {
  stroke-width: 2.5;
  stroke-linecap: round;
}

.node {
  fill: var(--ground);
  stroke-width: 2.5;
}

.wire-olive { stroke: var(--mark-olive); }
.wire-sage { stroke: var(--mark-sage); }
.wire-silver { stroke: var(--mark-silver); }
.wire-navy { stroke: var(--mark-navy); }

.art-label {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.6px;
}

.art-coord {
  fill: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
}

.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  max-width: 12.5em;
}

.hero .lead {
  max-width: 34rem;
  margin-top: 1.375rem;
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.09375rem);
  line-height: 1.62;
}

.hero .btn-row {
  justify-content: center;
  width: 100%;
  max-width: 22rem;
  margin-top: 1.875rem;
}

@media (min-width: 40em) {
  .hero .btn-row { max-width: none; }
}

/* Same size and width as the design: three lines, "Per-unit" kept whole. */
@media (min-width: 48em) {
  .hero .lead {
    max-width: 540px;
    font-size: 1.03125rem;
  }
}

/* Eyebrow with a diamond on each side, only in the hero */
.eyebrow--hero {
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 0.78125rem;
  letter-spacing: 0.26em;
}

.eyebrow--hero::before,
.eyebrow--hero::after {
  content: "";
  flex: none;
  order: 0;
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}

.eyebrow--hero::after {
  order: 1;
}

/* Proof strip: the three facts under the hero */
.proof {
  background: var(--band);
  border-block: 1px solid var(--line);
}

.chips {
  display: grid;
  gap: 0.875rem;
  padding-block: 1.375rem;
  list-style: none;
}

.chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--ink);
}

.chip svg {
  flex: none;
  width: 22px;
  height: 22px;
}

/* The certification name is long, so it sits on two set lines. */
.chip-line {
  display: block;
}

.ico-accent { stroke: var(--accent); }
.ico-silver { stroke: var(--mark-silver); }

@media (min-width: 64em) {
  .chips {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
    padding-block: 0.75rem;
  }
  .chip { font-size: 0.78125rem; letter-spacing: 0.16em; }
  .chip:nth-child(1) { order: 1; }
  .chip:nth-child(2) { order: 3; }
  .chip:nth-child(3) { order: 5; }
  /* Two outlined diamonds sit between the three facts. */
  .chips::before,
  .chips::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--mark-silver);
    transform: rotate(45deg);
  }
  .chips::before { order: 2; }
  .chips::after { order: 4; }
  .chip { white-space: nowrap; }
}

/* Between 1024px and 1200px the three facts only fit on one line each
   at a slightly smaller size. */
@media (min-width: 64em) and (max-width: 74.99em) {
  .chip { font-size: 0.6875rem; letter-spacing: 0.1em; }
}

/* 7. Services ---------------------------------------------------------- */
.section-head--split {
  display: grid;
  gap: 1.125rem 3.5rem;
  max-width: none;
}

@media (min-width: 60em) {
  .section-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    align-items: end;
  }
  .section-head--split .lead {
    font-size: 1rem;
  }
}

/* "Services at a glance": jump links to each port, in the label font.
   Each dot matches its card's port dot. */
.svc-jump {
  grid-column: 1 / -1;
}

.svc-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  list-style: none;
}

.svc-jump a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.svc-jump a::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border: 2px solid var(--mark-olive);
  border-radius: 50%;
}

.svc-jump li:nth-child(2) a::before { border-color: var(--mark-sage); }
.svc-jump li:nth-child(3) a::before { border-color: var(--mark-silver); }
.svc-jump li:nth-child(4) a::before { border-color: var(--mark-navy); }
.svc-jump li:nth-child(6) a::before { border-color: var(--mark-sage); }

.svc-jump a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
}

/* One panel with hairline dividers, like a patch panel. */
.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line-card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  overflow: hidden;
}

.services-grid .card {
  border: 0;
  border-radius: 0;
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: 1.625rem 1.5rem 1.5rem;
  transition: background-color 150ms ease;
}

.service-card:target {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-index {
  color: var(--accent);
  font-size: 0.71875rem;
}

.port-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--mark-olive);
  border-radius: 50%;
}

.service-card:nth-child(2) .port-dot { border-color: var(--mark-sage); }
.service-card:nth-child(3) .port-dot { border-color: var(--mark-silver); }
.service-card:nth-child(4) .port-dot { border-color: var(--mark-navy); }
.service-card:nth-child(6) .port-dot { border-color: var(--mark-sage); }

.card-icon {
  width: 34px;
  height: 34px;
  margin-top: 1.625rem;
  color: var(--ink);
}

.service-card h3 {
  margin-top: 1.25rem;
}

.service-card > p {
  margin-top: 0.625rem;
  color: var(--ink-muted);
  font-size: 0.953125rem;
  line-height: 1.6;
}

.service-card .checks {
  margin-top: 1.125rem;
  color: var(--ink-muted);
  font-size: 0.953125rem;
  line-height: 1.55;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  min-height: 44px;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.card-link:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.checks {
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 1.625rem;
  break-inside: avoid;
}

.checks li + li {
  margin-top: 0.5rem;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.32em;
  width: 0.375rem;
  height: 0.7rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

@media (min-width: 40em) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-card--feature {
    grid-column: 1 / -1;
  }
  .service-card--feature .checks {
    columns: 2;
    column-gap: 2rem;
  }
  .service-card--feature .checks li {
    margin: 0 0 0.5rem;
  }
  /* Port 06 (support) runs full width under the other ports at every
     size from here up, so the panel never ends on a lone card. */
  .service-card--wide {
    grid-column: 1 / -1;
  }
  .service-card--wide .checks {
    columns: 2;
    column-gap: 2rem;
  }
  .service-card--wide .checks li {
    margin: 0 0 0.5rem;
  }
}

@media (min-width: 60em) {
  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .service-card--feature {
    grid-column: span 2;
  }
  .service-card {
    padding: 1.75rem 1.75rem 1.625rem;
  }
}

/* Wide screens: Port 01 is a full-width top panel (its six points in three
   columns), then Ports 02-05 sit in one row, like the patch panel in the
   design, and Port 06 closes the panel full width. Headings in the row
   share a height so the text under them lines up. */
@media (min-width: 75em) {
  .services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .service-card--feature {
    grid-column: 1 / -1;
  }
  .service-card--feature .checks {
    columns: 3;
  }
  .service-card:not(.service-card--feature):not(.service-card--wide) h3 {
    min-height: 2.56em;
  }
}

/* 8. Steps ------------------------------------------------------------- */
/* A vertical line with a ring for each step, colored like the logo. */
.steps {
  list-style: none;
}

.step {
  position: relative;
  padding: 0 0 1.75rem 2.375rem;
}

.step:last-child {
  padding-bottom: 0;
}

.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--mark-olive);
  border-radius: 50%;
  background: var(--band);
}

.step:nth-child(2)::before { border-color: var(--mark-sage); }
.step:nth-child(3)::before { border-color: var(--mark-silver); }
.step:nth-child(4)::before { border-color: var(--mark-navy); }

.step::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 6px;
  left: 8.5px;
  width: 1px;
  background: var(--line-card);
}

.step:last-child::after {
  display: none;
}

.step-num {
  display: block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.step-num::before {
  content: "Step ";
}

.step h3 {
  margin-top: 0.3rem;
  font-size: 1.125rem;
  line-height: 1.3;
}

.step p {
  margin-top: 0.375rem;
  color: var(--ink-muted);
  font-size: 0.953125rem;
  line-height: 1.58;
}

.how-grid .section-head {
  margin-bottom: 0;
}

.how-grid .section-cta {
  margin-top: 0;
}

@media (min-width: 60em) {
  .how-grid {
    grid-template-rows: auto 1fr;
    row-gap: 2rem;
  }
  .how-grid .how-head {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
  .how-grid .steps {
    grid-column: 7 / span 6;
    grid-row: 1 / span 2;
  }
  .how-grid .section-cta {
    grid-column: 1 / span 5;
    grid-row: 2;
    align-self: start;
  }
}

/* 9. Why us ------------------------------------------------------------ */
.why-list {
  list-style: none;
  border-top: 1px solid var(--line-card);
}

.why-list li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.25rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line-card);
}

.why-index {
  grid-row: span 2;
  padding-top: 0.28rem;
  color: var(--accent);
  font-size: 0.71875rem;
}

.why-list h3 {
  font-size: 1.125rem;
  line-height: 1.35;
}

.why-list p {
  grid-column: 2;
  color: var(--ink-muted);
  font-size: 0.96875rem;
}

@media (min-width: 60em) {
  .why .section-head {
    margin-bottom: 0;
  }
}

/* 10. Mini-ISP explainer ----------------------------------------------- */
.isp-grid {
  align-items: start;
}

.isp-block + .isp-block {
  margin-top: 2.25rem;
}

/* Block titles are small typewriter labels, as in the design. */
.isp-block h3 {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.isp-block h3 + .checks {
  margin-top: 1rem;
}

.isp-block .checks {
  color: var(--ink-muted);
}

/* "Who owns what": numbered 01, 02, 03... in the label font */
.checks--numbered {
  counter-reset: owns;
}

.checks--numbered li {
  counter-increment: owns;
  padding-left: 2.125rem;
  color: var(--ink);
  font-weight: 500;
}

/* The last line ("We design the network...") is what we do, not what the
   owner owns, so it has no number, as in the design. */
.checks--numbered li:last-child {
  padding-left: 0;
  margin-top: 0.875rem;
  color: var(--ink-muted);
  font-weight: 400;
}

.checks--numbered li:last-child::before {
  content: none;
}

.checks--numbered li::before {
  content: counter(owns, decimal-leading-zero);
  top: 0.22em;
  left: 0;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.note {
  padding: 1.125rem 1.25rem 1.25rem;
  background: var(--ground);
  border: 1px solid var(--line-card);
  border-radius: 10px;
}

.note .checks {
  font-size: 0.9375rem;
}

.diagram-card {
  margin: 0;
  padding: 0.875rem;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
}

/* Capped at 420px so the labels stay small and light, as in the design,
   on tablets and in the desktop column. Phones are narrower than the cap. */
.diagram-card svg {
  width: 100%;
  max-width: 26.25rem;
  height: auto;
  margin-inline: auto;
}

@media (min-width: 40em) {
  .diagram-card { padding: 1.625rem 1.75rem; }
}

@media (min-width: 60em) {
  .diagram-card {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.dg-box {
  fill: var(--ground);
  stroke: var(--ink);
  stroke-width: 1.25;
}

.dg-building {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.25;
}

.dg-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-sep {
  fill: none;
  stroke: var(--mark-silver);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

.dg-lock {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-title {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.dg-sub {
  fill: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.dg-cap {
  fill: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
}

.dg-cap-muted {
  fill: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 16px;
}

.gets-grid {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 40em) {
  .gets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.get-card {
  padding: 1.5rem;
  background: var(--ground);
}

.get-card p {
  color: var(--ink-muted);
}

.get-card h3 + p {
  margin-top: 0.5rem;
}

.cta-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 40em) {
  .cta-block {
    align-items: flex-start;
  }
}

/* 11. Service area and contact details --------------------------------- */
.spec-card {
  align-self: start;
  background: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  overflow: hidden;
}

.spec-card dl {
  margin: 0;
}

.spec-row {
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1.375rem;
}

.spec-row + .spec-row {
  border-top: 1px solid var(--line);
}

.spec-row dt {
  color: var(--ink-soft);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
}

.spec-row dd {
  margin: 0;
  font-weight: 500;
}

/* The email address is a stand-alone tap target: at least 44px tall.
   Its row gets less padding so the card keeps its size. */
.spec-row:has(dd > a) {
  padding-block: 0.625rem;
}

.spec-row dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.spec-row dd a:hover {
  color: var(--link-hover);
}

.area-copy h2 + p {
  margin-top: 1.125rem;
}

.area-ask {
  font-weight: 500;
}

.area-copy .btn {
  margin-top: 1.75rem;
}

.contact-details {
  align-self: start;
}

@media (min-width: 60em) {
  .contact-details {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* 12. Contact form ----------------------------------------------------- */
.form {
  display: grid;
  gap: 1.25rem;
  padding: 1.375rem 1rem;
  border-radius: 16px;
}

@media (min-width: 40em) {
  .form {
    padding: 2.125rem 2.375rem 2rem;
  }
}

/* Wraps every field and the button. It starts disabled in the HTML and
   site.js enables it, so the form can't be sent without the spam check. */
.form-body {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-body:disabled .input,
.form-body:disabled .pill,
.form-body:disabled .btn {
  opacity: 0.55;
  cursor: not-allowed;
}

.form-row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40em) {
  /* Two fields side by side. Subgrid lines up the inputs even when one
     label wraps to two lines. */
  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: 1.25rem;
    row-gap: 0.4375rem;
  }
  .form-row > .field {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

.field {
  display: grid;
  gap: 0.4375rem;
  min-width: 0;
}

fieldset.field {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Field labels in the typewriter font */
.field > label,
.field > legend {
  padding: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* "Optional" shows as "(optional)" */
.opt {
  margin-left: 0.25rem;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

.opt::before { content: "("; }
.opt::after { content: ")"; }

.hint {
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0.625rem 0.875rem;
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.input:hover {
  border-color: var(--ink-muted);
}

.input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

textarea.input {
  min-height: 8.5rem;
  resize: vertical;
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.125rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

select.input {
  padding-right: 2.75rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* "I'm interested in" checkboxes: plain rows, as in the design,
   each at least 44px tall for touch. */
.pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: 0 1.5rem;
  margin-top: 0.25rem;
}

.pill {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  color: var(--ink);
  font-size: 0.953125rem;
  line-height: 1.3;
  cursor: pointer;
}

.pill input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.pill:has(input:checked) {
  font-weight: 500;
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  color: var(--error);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}

.field-error svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.12em;
}

.hp {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile {
  min-height: 65px;
}

.form-note {
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-actions {
  display: grid;
  gap: 1rem;
}

.form-actions .btn {
  width: 100%;
}

@media (min-width: 40em) {
  .form-actions .btn {
    width: auto;
    justify-self: start;
  }
}

.form-status {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border: 1px solid;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
}

.form-status svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
}

.form-status--ok {
  background: var(--accent-tint);
  border-color: var(--accent);
}

.form-status--ok svg {
  color: var(--accent);
}

.form-status--err {
  background: var(--card);
  border-color: var(--error);
}

.form-status--err svg {
  color: var(--error);
}

/* 13. Footer ----------------------------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.site-footer .container {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.site-footer a {
  color: var(--footer-ink);
}

.site-footer a:hover {
  color: var(--footer-muted);
}

.site-footer :focus-visible {
  outline-color: var(--footer-focus);
}

.footer-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 48em) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3.5rem;
  }
  /* Links in a compact two-column grid, as in the design. */
  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 2.5rem;
  }
}

/* The mark, then the wordmark and one line about the business.
   The mark (assets/logo-mark.svg, the same file as the header) brings its
   own off-white disc and silver ring, so it needs no white tile on the navy.
   The box keeps the old tile's width, so the wordmark and text sit exactly
   where they did. The disc is pinned to the top of its box and lifted 7px
   so its centre lines up with the middle of the wordmark (cap top of
   "J. Shea" to the baseline of TECHNOLOGIES), as on the card back and in
   the header. */
.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.logo-tile {
  display: block;
  flex: none;
  padding: 0 7px;
  margin-top: -7px;
}

.logo-tile img {
  width: 62px;
  height: 76px;
  object-fit: contain;
  object-position: center top;
}

.wordmark--footer {
  display: inline-flex;
  gap: 8px;
  padding-block: 0.25rem;
  color: var(--footer-ink);
  text-decoration: none;
}

.site-footer .wordmark--footer:hover {
  color: var(--footer-ink);
}

.wordmark--footer .wordmark-name {
  font-size: 1.4375rem;
}

.wordmark--footer .wordmark-sub {
  font-size: 0.625rem;
  letter-spacing: 0.38em;
  color: var(--footer-label);
}

.footer-desc {
  margin-top: 0.75rem;
  color: var(--footer-muted);
  max-width: 36ch;
}

.footer-label {
  margin: 0 0 0.5rem;
  color: var(--footer-label);
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.footer-links {
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* Footer "Services" row: the service pages in one wrapping line under the
   three footer columns, so the two-column "Links" list stays short. */
.footer-services {
  margin-top: 2rem;
}

.footer-services .footer-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.5rem;
}

.footer-contact p {
  color: var(--footer-muted);
}

.footer-contact p + p {
  margin-top: 0.375rem;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.site-footer .tbd {
  background: transparent;
  color: var(--footer-ink);
  border-color: var(--footer-tbd);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--footer-line);
  color: var(--footer-label);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  letter-spacing: 0.06em;
}

.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.footer-tm {
  margin-top: 0.75rem;
  color: var(--footer-label);
  font-size: 0.78125rem;
  line-height: 1.6;
  max-width: 96ch;
}

/* 14. Privacy and 404 pages -------------------------------------------- */
.page-head {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--band);
  border-bottom: 1px solid var(--line);
}

.page-title {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 2.875rem);
  max-width: none;
}

.page-head .lead {
  margin-top: 1rem;
}

.effective {
  margin-top: 1.25rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.toc {
  display: none;
}

@media (min-width: 60em) {
  .toc {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }
  .privacy-grid .c-6-7 {
    grid-column: 5 / span 8;
  }
  .privacy-grid .c-1-5 {
    grid-column: 1 / span 3;
  }
}

.toc ol {
  list-style: none;
  border-left: 1px solid var(--line-card);
}

.toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  text-decoration: none;
}

.toc a:hover {
  color: var(--ink);
  border-left-color: var(--accent);
}

.toc .label {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.22em;
}

.prose section + section {
  margin-top: 2.75rem;
}

.prose h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
}

.prose h2 + p,
.prose h2 + ul,
.prose p + ul,
.prose ul + p {
  margin-top: 0.875rem;
}

.prose p,
.prose li {
  color: var(--ink-muted);
}

.prose ul {
  padding-left: 1.25rem;
  max-width: 64ch;
}

.prose li + li {
  margin-top: 0.375rem;
}

.prose li::marker {
  color: var(--accent);
}

.prose .btn {
  margin-top: 2.5rem;
}

.notfound {
  padding-block: clamp(3.5rem, 10vw, 7rem);
}

.notfound-grid {
  align-items: center;
}

.notfound .lead {
  margin-top: 1.25rem;
}

.notfound .contact-line {
  margin-top: 1.5rem;
}

.door-art {
  width: min(100%, 220px);
  margin-inline: auto;
  color: var(--ink-muted);
}

@media (min-width: 60em) {
  .door-art { width: min(100%, 320px); }
}

.door-art svg {
  width: 100%;
  height: auto;
}

.door-ring-outer {
  fill: none;
  stroke: var(--ring-outer);
  stroke-width: 1;
}

.door-ring {
  fill: none;
  stroke-width: 3;
}

.door-frame {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.door-leaf {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 2;
}

.door-detail {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.door-reader {
  fill: var(--ground);
  stroke: var(--ink);
  stroke-width: 2;
}

.door-led {
  fill: var(--accent);
}

.door-x {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* 15. Motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* 16. Home and business pages ------------------------------------------ */

/* Home page: two "doors", one for homes and one for businesses. */
.doors-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48em) {
  .doors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.door-card {
  display: flex;
  flex-direction: column;
  padding: 1.625rem 1.5rem 1.5rem;
}

@media (min-width: 40em) {
  .door-card { padding: 2rem 2rem 1.875rem; }
}

.door-card:nth-child(2) .port-dot { border-color: var(--mark-navy); }

.door-body {
  margin-bottom: 1.75rem;
}

.door-card h3 {
  margin-top: 1.25rem;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
  line-height: 1.2;
}

.door-body > p {
  margin-top: 0.625rem;
  color: var(--ink-muted);
}

.door-card .checks {
  margin-top: 1.25rem;
  color: var(--ink-muted);
  font-size: 0.96875rem;
  line-height: 1.55;
}

.door-body > .door-note {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
}

/* Service area line: pushed to the bottom so both doors line up. */
.door-meta {
  display: grid;
  gap: 0.3rem;
  margin: auto 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.door-meta dt {
  color: var(--ink-soft);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
}

.door-meta dd {
  margin: 0;
  font-weight: 500;
}

.door-actions {
  padding-top: 1.5rem;
}

.door-actions .btn {
  width: 100%;
}

@media (min-width: 40em) {
  .door-actions .btn { width: auto; }
}

/* Residential and Commercial pages: a shorter hero with a small silver
   ring on the right (wide screens only). */
.page-hero {
  padding-block: clamp(2.75rem, 7vw, 5rem);
}

.page-hero-grid {
  align-items: center;
}

.page-hero h1 {
  max-width: 15em;
}

.page-hero .lead {
  margin-top: 1.25rem;
}

.page-hero .btn-row {
  margin-top: 1.875rem;
}

.page-art {
  display: none;
}

@media (min-width: 60em) {
  .page-art { display: block; }
  .page-art svg {
    width: 100%;
    max-width: 440px;
    height: auto;
    margin-left: auto;
  }
}

/* Same ticks as the home-page ring, spaced for the smaller circle. */
.page-ticks {
  stroke-width: 5;
  stroke-dasharray: 1.3 7.78;
}

.page-ring {
  stroke-width: 4;
}

.page-glyph {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-glyph .ga { stroke: var(--accent); }

.page-glyph .gdot {
  fill: var(--accent);
  stroke: none;
}

/* Commercial page: the card for IT, AV, security and electrical companies. */
.partner-grid {
  align-items: start;
}

.partner-card {
  padding: 1.5rem;
}

@media (min-width: 40em) {
  .partner-card { padding: 2rem 2.125rem; }
}

.partner-card .btn {
  margin-top: 1.75rem;
}

@media (min-width: 60em) {
  .partner-grid .section-head { margin-bottom: 0; }
}

/* Call to action at the end of the Residential and Commercial pages. */
.cta-panel {
  max-width: 46rem;
}

.cta-panel h2 + p {
  margin-top: 1.125rem;
}

.cta-panel .btn-row {
  margin-top: 1.75rem;
}

.cta-panel .contact-line {
  margin-top: 1.25rem;
}