/* Legacy Power Solutions
   Visual system: "Burnished" — deep navy lacquer, warm ivory, burnished copper.
   Copper is not decoration: it is the conductor inside every job they do.
   Display face Gambetta (calligraphic high-contrast serif), body Switzer.
   No techno faces, no blueprint grids, no soft-UI. */

@layer reset, base, layout, components, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  /* every list on this site is custom-marked (hairline dashes, rules); the UA
     bullet only ever doubles up, so clear it in content and footer regions */
  ul[class], ol[class], main ul, .site-footer ul { list-style: none; }
}

@layer base {
  :root {
    /* field */
    --ink: #0A0D1E;            /* deep navy lacquer */
    --ink-deep: #060814;       /* near-black for bands */
    --ink-raised: #101540;     /* raised panel on navy */
    --lps-blue: #010C80;       /* their logo navy, brand anchor */

    /* paper */
    --paper: #F7F4EE;          /* warm ivory */
    --paper-2: #EFEAE1;        /* recessed ivory */
    --white: #FFFFFF;

    /* ink on paper */
    --text: #15182B;
    --text-2: #55597A;

    /* metal */
    --copper: #B0714A;         /* burnished copper, on paper */
    --copper-deep: #8E5734;
    --champagne: #D8A87E;      /* copper lightened for navy */
    --champagne-soft: #E7C7A8;

    /* rules */
    --rule: #DED7CB;
    --rule-strong: #C6BDAE;
    --rule-navy: #232951;

    --font-display: 'Gambetta', 'Iowan Old Style', Georgia, serif;
    --font-body: 'Switzer', 'Helvetica Neue', Arial, sans-serif;

    --measure: 64ch;
    --gutter: clamp(1.4rem, 5vw, 4.5rem);
    --site-max: 1280px;
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  html { scroll-padding-top: 92px; }
  /* no scroll-behavior:smooth — it breaks ScrollTrigger refresh math */

  body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.74;
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "kern" 1, "liga" 1;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.018em;
    text-wrap: balance;
    color: var(--text);
  }
  h1 { font-size: clamp(2.9rem, 6.4vw, 5.1rem); line-height: 1.015; letter-spacing: -0.026em; }
  h2 { font-size: clamp(1.85rem, 3.8vw, 3rem); }
  h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.012em; }

  p { max-width: var(--measure); }
  strong { font-weight: 600; }

  a { color: var(--copper-deep); text-decoration: none; }
  /* editorial underline: hairline that thickens on hover */
  .prose a, .svc-body a, .disclosure a, p a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 92%;
    transition: background-size .35s var(--ease);
    padding-bottom: 1px;
  }
  .prose a:hover, .svc-body a:hover, .disclosure a:hover, p a:hover { background-size: 100% 2px; }

  :focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
  ::selection { background: var(--lps-blue); color: var(--white); }
}

@layer layout {
  .wrap { max-width: var(--site-max); margin-inline: auto; padding-inline: var(--gutter); }
  .wrap-narrow { max-width: 780px; margin-inline: auto; padding-inline: var(--gutter); }

  .section { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }
  .section-tight { padding-block: clamp(3rem, 6vw, 5rem); }
  .section-navy { background: var(--ink); color: #D9DCEA; }
  .section-navy h2, .section-navy h3, .section-navy h4 { color: var(--paper); }
  .section-navy p { color: #B7BCD4; }
  .section-recessed { background: var(--paper-2); }

  .grid-2 { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); align-items: start; }
  .grid-3 { display: grid; gap: clamp(1.5rem, 3vw, 2.6rem); grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
}

@layer components {

  /* ---------- header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 60;
    background: var(--ink);
    border-bottom: 1px solid var(--rule-navy);
  }
  .header-inner {
    position: relative;
    max-width: var(--site-max); margin-inline: auto; padding: 0 var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    min-height: 78px;
  }
  .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
  .brand svg { height: 34px; width: auto; color: var(--paper); }
  .brand-text { display: flex; flex-direction: column; line-height: 1; }
  .brand-name {
    font-family: var(--font-display); font-weight: 500; font-size: 1.16rem;
    letter-spacing: 0.02em; color: var(--paper);
  }
  .brand-sub {
    font-size: 0.56rem; letter-spacing: 0.46em; color: var(--champagne);
    margin-top: 6px; font-weight: 500; text-transform: uppercase;
  }

  .site-nav { display: flex; align-items: center; gap: 1.55rem; }
  .nav-item { position: relative; display: flex; align-items: center; gap: 0.3rem; }
  .site-nav a {
    color: #C3C8DE; font-size: 0.845rem; font-weight: 500; letter-spacing: 0.012em;
    padding: 4px 0; position: relative;
  }
  .site-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: var(--champagne); transform-origin: left center;
    /* the contact under each button closes as the charge reaches it (--lit), and on hover */
    transform: scaleX(var(--lit));
    transition: transform .4s var(--ease);
  }
  .site-nav a:hover { color: var(--paper); }
  .site-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
  .site-nav a[aria-current="page"] { color: var(--paper); }
  .site-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--copper); }

  /* ---------- ENERGIZED MENU (client direction 2026-09-30) ----------
     The header's hairline is the bus and every menu button is a contact on it. A charge
     runs along the bus, lighting each button as it passes, and jumps to whichever button
     the pointer is on. All of this is decoration on top of a menu that already works:
     with no JS the arc never appears and the links behave exactly as they always did. */
  .nav-item { --lit: 0; }
  .site-nav a {
    color: #C3C8DE;
    color: color-mix(in srgb, #C3C8DE, #FFF3E4 calc(var(--lit) * 100%));
    text-shadow:
      0 0 calc(9px * var(--lit)) rgba(216, 168, 126, calc(.85 * var(--lit))),
      0 0 calc(22px * var(--lit)) rgba(150, 196, 255, calc(.35 * var(--lit)));
  }
  .site-nav a:hover, .site-nav a:focus-visible { --lit: 1; }

  .nav-arc {
    position: absolute; left: 0; bottom: -8px; width: 150px; height: 20px;
    transform-origin: 50% 50%;
    pointer-events: none; opacity: 0; z-index: 2; will-change: transform, opacity;
  }
  .nav-arc svg { width: 100%; height: 100%; overflow: visible; display: block; }
  .nav-arc path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .nav-arc .na-line { stroke: #FFF3E4; stroke-width: 1.4; }
  .nav-arc .na-glow { stroke: rgba(216, 168, 126, .6); stroke-width: 6; filter: blur(3.5px); }
  .nav-arc .na-branch { stroke: var(--champagne-soft); stroke-width: 1.1; opacity: .6; }

  @media (prefers-reduced-motion: reduce) {
    /* no travelling charge; hovering still lights the button, instantly */
    .nav-arc { display: none !important; }
  }
  @media (max-width: 1010px) {
    /* the menu is a full-screen panel there: the buttons light in sequence as it opens,
       and a charge travelling along a header rule would have nothing to travel along */
    .nav-arc { display: none; }
  }
  .nav-call {
    border: 1px solid var(--rule-navy); color: var(--paper) !important;
    padding: 10px 17px !important; letter-spacing: 0.06em; font-size: 0.8rem !important;
    white-space: nowrap; transition: border-color .35s var(--ease), color .35s var(--ease);
  }
  .nav-call::after { display: none; }
  .nav-call:hover { border-color: var(--champagne); color: var(--champagne) !important; }


  /* ---------- header dropdowns ---------- */
  .nav-sub-toggle {
    display: none; background: none; border: none; padding: 0 2px; cursor: pointer;
    color: inherit; line-height: 0;
  }
  .nav-caret {
    display: block; width: 6px; height: 6px; margin-top: -3px;
    border-right: 1px solid var(--champagne); border-bottom: 1px solid var(--champagne);
    transform: rotate(45deg); transition: transform .3s var(--ease);
  }
  .nav-item--sub > a { padding-right: 2px; }
  .nav-item--sub::after {
    content: ""; width: 6px; height: 6px; margin: -3px 0 0 1px;
    border-right: 1px solid var(--champagne); border-bottom: 1px solid var(--champagne);
    transform: rotate(45deg); transition: transform .3s var(--ease); flex: none;
  }

  .nav-panel {
    position: absolute; top: 100%; left: -1.2rem; z-index: 70;
    margin-top: 18px; min-width: 262px;
    background: var(--ink); border: 1px solid var(--rule-navy);
    padding: 0.55rem 0; display: grid;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s .28s;
  }
  /* bridge the gap so the panel survives the trip from link to panel */
  .nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -19px; height: 19px; }
  .nav-panel--wide { grid-template-columns: 1fr 1fr; min-width: 520px; }
  .nav-panel a {
    padding: 0.52rem 1.25rem; font-size: 0.83rem; color: #C3C8DE;
    border-bottom: none; white-space: nowrap;
  }
  .nav-panel a::after { display: none; }
  .nav-panel a:hover { color: var(--paper); background: var(--ink-raised); }
  .nav-panel a[aria-current="page"] { color: var(--champagne); }

  @media (min-width: 1011px) {
    .nav-item--sub:hover .nav-panel,
    .nav-item--sub:focus-within .nav-panel,
    .nav-item--sub.is-open .nav-panel {
      opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
    }
    .nav-item--sub:hover::after,
    .nav-item--sub:focus-within::after { transform: rotate(225deg) translate(-2px, -2px); }
  }

  @media (max-width: 1010px) {
    .nav-item { display: block; width: 100%; border-bottom: 1px solid var(--rule-navy); }
    /* .site-nav a is declared later in this file, so these need the extra class
       to win rather than relying on source order */
    .site-nav .nav-item > a { border-bottom: none; width: auto; display: inline-block; }
    .nav-item--sub::after { display: none; }
    .nav-sub-toggle {
      display: flex; align-items: center; justify-content: center;
      position: absolute; right: 0; top: 0; width: 3.4rem; height: 3.4rem;
    }
    .nav-item--sub { position: relative; }
    .nav-item--sub.is-open .nav-caret { transform: rotate(225deg); }
    .nav-panel {
      position: static; opacity: 1; visibility: visible; transform: none;
      margin: 0; border: none; background: none; min-width: 0; padding: 0;
      grid-template-columns: 1fr; max-height: 0; overflow: hidden;
      transition: max-height .42s var(--ease);
    }
    .nav-panel::before { display: none; }
    .nav-item--sub.is-open .nav-panel { max-height: 34rem; padding-bottom: 0.7rem; }
    .site-nav .nav-panel a {
      font-family: var(--font-body); font-size: 0.97rem; letter-spacing: 0;
      padding: 0.5rem 0 0.5rem 1.15rem; border-bottom: none; white-space: normal;
      width: auto; display: block;
    }
  }

  /* with no JS the burger cannot open, so lay the nav out in flow instead */
  @media (max-width: 1010px) {
    html:not(.js) .site-nav {
      position: static; transform: none; visibility: visible; inset: auto;
      padding: 0 0 1.2rem; overflow: visible;
    }
    html:not(.js) .nav-toggle { display: none; }
    html:not(.js) .header-inner { flex-wrap: wrap; min-height: 0; padding-block: 1rem; }
    html:not(.js) .nav-panel { max-height: none; }
  }

  .nav-toggle {
    display: none; background: none; border: 1px solid var(--rule-navy); color: var(--paper);
    padding: 9px 14px; letter-spacing: 0.16em; font-size: 0.72rem; cursor: pointer; text-transform: uppercase;
  }

  @media (max-width: 1010px) {
    .site-nav {
      position: fixed; inset: 78px 0 0 0; z-index: 55;
      background: var(--ink);
      flex-direction: column; align-items: flex-start; justify-content: flex-start;
      padding: 2.4rem var(--gutter); gap: 0;
      transform: translateX(100%); visibility: hidden;
      transition: transform .45s var(--ease), visibility 0s .45s;
      overflow-y: auto;
    }
    .site-nav.open { transform: translateX(0); visibility: visible; transition: transform .45s var(--ease); }
    .site-nav a {
      font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -0.015em;
      padding: 0.68rem 0; border-bottom: 1px solid var(--rule-navy); width: 100%;
    }
    .site-nav a::after { display: none; }
    .site-nav .nav-call { margin-top: 1.6rem; text-align: center; font-family: var(--font-body); font-size: 0.9rem !important; border-bottom: 1px solid var(--rule-navy); }
    .nav-toggle { display: block; }
  }

  /* ---------- section header (replaces the drafting title block) ---------- */
  .titleblock {
    padding-bottom: 1.1rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
    border-bottom: 1px solid var(--rule);
  }
  .section-navy .titleblock { border-bottom-color: var(--rule-navy); }
  .titleblock h2 { max-width: 22ch; }

  /* ---------- labels ---------- */
  /* role line under a principal name: prose, not a floating label */
  .principal-card .role { font-size: 0.94rem; color: var(--text-2); margin-bottom: 0.9rem; max-width: 42ch; }
  .section-navy .principal-card .role { color: #A7ADC8; }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-block; cursor: pointer; font-weight: 500; font-size: 0.9rem;
    letter-spacing: 0.055em; padding: 1rem 2rem; border: 1px solid transparent;
    transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
    background-image: none;
  }
  .btn-primary { background: var(--lps-blue); color: var(--white); border-color: var(--lps-blue); }
  .btn-primary:hover { background: var(--copper-deep); border-color: var(--copper-deep); color: var(--white); }
  .btn-outline { background: transparent; color: var(--text); border-color: var(--rule-strong); }
  .btn-outline:hover { border-color: var(--text); background: var(--text); color: var(--paper); }
  .section-navy .btn-primary, .hero .btn-primary, .energize .btn-primary {
    background: var(--champagne); color: #23140A; border-color: var(--champagne); font-weight: 600;
  }
  .section-navy .btn-primary:hover, .hero .btn-primary:hover, .energize .btn-primary:hover { background: var(--champagne-soft); border-color: var(--champagne-soft); color: #23140A; }
  .section-navy .btn-outline, .hero .btn-outline, .energize .btn-outline { color: var(--paper); border-color: rgba(216,168,126,.4); }
  .section-navy .btn-outline:hover, .hero .btn-outline:hover, .energize .btn-outline:hover { border-color: var(--champagne); color: var(--champagne); background: transparent; }
  .btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }

  /* ---------- service index (hairline rows, no boxes) ---------- */
  .breaker-list { border-top: 1px solid var(--rule); }
  .section-navy .breaker-list { border-top-color: var(--rule-navy); }
  .breaker {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    border-bottom: 1px solid var(--rule); color: var(--text);
    transition: background-color .4s var(--ease), padding-left .4s var(--ease);
    background-image: none;
  }
  .section-navy .breaker { border-bottom-color: var(--rule-navy); color: var(--paper); }
  .breaker:hover { background: var(--white); padding-left: 0.9rem; color: var(--text); }
  .section-navy .breaker:hover { background: var(--ink-raised); color: var(--paper); }
  .bk-main { padding: 1.5rem 1.4rem 1.5rem 0; }
  .breaker:hover .bk-main { padding-left: 0; }
  .bk-main h3 { font-size: 1.32rem; margin-bottom: 4px; transition: color .35s var(--ease); }
  .bk-main p { font-size: 0.94rem; color: var(--text-2); max-width: 62ch; line-height: 1.6; }
  .section-navy .bk-main p { color: #A7ADC8; }
  .breaker:hover .bk-main h3 { color: var(--copper-deep); }
  .section-navy .breaker:hover .bk-main h3 { color: var(--champagne); }
  /* arrow instead of a toggle switch */
  .bk-switch { margin-right: 1.2rem; width: 34px; height: 10px; position: relative; flex-shrink: 0; opacity: .45; transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .bk-switch::before { content: ""; position: absolute; left: 0; right: 6px; top: 4px; height: 1px; background: currentColor; }
  .bk-switch::after { content: ""; position: absolute; right: 0; top: 0; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
  .breaker:hover .bk-switch { opacity: 1; transform: translateX(6px); color: var(--copper-deep); }
  .section-navy .breaker:hover .bk-switch { color: var(--champagne); }
  @media (max-width: 560px) {
    .breaker { grid-template-columns: 1fr; }
    .bk-switch { display: none; }
  }

  /* ---------- photography ---------- */
  .plate { position: relative; background: none; border: none; }
  .plate img {
    width: 100%; height: 340px; object-fit: cover;
    filter: saturate(.98);
  }
  .plate-tall img { height: 470px; }
  .plate-caption {
    padding: 0.85rem 0 0; border-top: 1px solid var(--rule); margin-top: 0.9rem;
  }
  .section-navy .plate-caption { border-top-color: var(--rule-navy); }
  .plate-caption strong { font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; letter-spacing: -0.01em; }

  /* full-bleed image band */
  .image-band { position: relative; height: clamp(300px, 46vw, 560px); overflow: hidden; background: var(--ink); }
  .image-band img { width: 100%; height: 100%; object-fit: cover; opacity: .96; }
  .image-band-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem var(--gutter);
    /* holds the caption over the light sub-base tank in the band photo, not just dark frames */
    background: linear-gradient(to top, rgba(6,8,20,.92) 0%, rgba(6,8,20,.62) 60%, transparent 100%);
    color: var(--paper);
  }
  .image-band-caption p { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.9rem); color: var(--paper); max-width: 26ch; letter-spacing: -0.015em; line-height: 1.2; }

  /* ---------- tables ---------- */
  .spec-table { width: 100%; border-collapse: collapse; }
  .spec-table th, .spec-table td { border-bottom: 1px solid var(--rule); padding: 1rem 1.2rem 1rem 0; text-align: left; vertical-align: top; }
  .spec-table th {
    font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-2); font-weight: 600;
  }
  /* only the label/value record table wants a fixed label column; multi-column
     tables with a thead must size to their own content */
  .spec-table--pairs th { width: 27%; }
  .spec-table--personnel { min-width: 720px; }
  .spec-table--personnel td { font-size: 0.92rem; line-height: 1.6; color: var(--text-2); }
  .spec-table--personnel td:first-child { width: 17%; }
  .spec-table--personnel td:nth-child(2) { width: 17%; }
  .spec-table--personnel td:nth-child(3) { width: 11%; white-space: nowrap; }
  .spec-table--personnel td:nth-child(4) { width: 27%; }
  .spec-table--personnel td strong { font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; color: var(--text); }
  .spec-table td { font-size: 0.98rem; }
  .spec-table td.num, .num { font-variant-numeric: tabular-nums; }
  .spec-table thead th { color: var(--copper-deep); border-bottom-color: var(--rule-strong); }

  /* ---------- principal cards ---------- */
  .principal-card { border: none; padding: 0; background: none; }
  .principal-card h3 { margin-bottom: 0.9rem; font-size: 1.55rem; }
  .principal-card a.tel {
    font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.005em;
    display: inline-block; margin-bottom: 0.3rem; color: var(--text); font-variant-numeric: tabular-nums;
  }
  .principal-card a.tel:hover { color: var(--copper-deep); }
  .section-navy .principal-card a.tel { color: var(--champagne); }
  .section-navy .principal-card a.tel:hover { color: var(--champagne-soft); }
  .principal-card a.mail { font-size: 0.92rem; word-break: break-word; color: var(--text-2); }
  .principal-card a.mail:hover { color: var(--copper-deep); }
  .section-navy .principal-card a.mail { color: #A7ADC8; }
  .section-navy .principal-card a.mail:hover { color: var(--champagne); }

  /* ---------- footer ---------- */
  .site-footer { background: var(--ink-deep); color: #A7ADC8; }
  .footer-grid {
    max-width: var(--site-max); margin-inline: auto; padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) 2rem;
    display: grid; gap: 3rem; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  }
  @media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); } }
  .site-footer h4 {
    font-family: var(--font-body); color: var(--champagne); font-size: 0.68rem;
    letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 600;
  }
  .site-footer ul li { margin-bottom: 0.55rem; }
  .site-footer a { color: #A7ADC8; font-size: 0.93rem; transition: color .35s var(--ease); }
  .site-footer a:hover { color: var(--paper); }
  .footer-brand svg { color: var(--paper); }
  .footer-brand p { font-size: 0.93rem; max-width: 32ch; }
  .footer-motto {
    font-family: var(--font-display); color: var(--paper); font-size: 1.32rem;
    margin-top: 1.3rem; max-width: 22ch; line-height: 1.28; letter-spacing: -0.015em;
  }
  .footer-legal {
    max-width: var(--site-max); margin-inline: auto; padding: 1.4rem var(--gutter) 2.4rem;
    border-top: 1px solid var(--rule-navy);
    display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem; align-items: baseline;
    font-size: 0.68rem; letter-spacing: 0.14em; color: #787FA3; text-transform: uppercase;
  }
  .footer-tel { font-family: var(--font-display); color: var(--champagne) !important; font-size: 1.12rem; font-variant-numeric: tabular-nums; }

  /* ---------- license stamp ---------- */
  .stamp {
    display: inline-grid; gap: 5px; padding: 1.15rem 1.5rem; text-align: center;
    border: 1px solid var(--copper); color: var(--copper-deep);
    font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  }
  .stamp b { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em; text-transform: none; font-weight: 500; }
  .section-navy .stamp, .on-navy .stamp { color: var(--champagne); border-color: rgba(216,168,126,.5); }

  [data-reveal] { opacity: 1; transform: none; }
}

@layer pages {

  /* ---------- hero ---------- */
  .hero { background: var(--ink); color: var(--paper); position: relative; overflow: clip; }
  .hero-atmos {
    position: absolute; inset: 0; pointer-events: none;
    background-image: url('../img/hero-atmosphere.jpg?v=67d7f19e');
    background-size: cover; background-position: 62% 34%;
    opacity: .62;
  }
  .hero-atmos::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(100deg, var(--ink) 2%, rgba(10,13,30,.94) 34%, rgba(10,13,30,.55) 68%, rgba(10,13,30,.3) 100%),
      radial-gradient(120% 95% at 50% 0%, transparent 42%, rgba(6,8,20,.88) 100%);
  }
  .hero-inner {
    max-width: var(--site-max); margin-inline: auto;
    padding: clamp(5rem, 12vw, 10.5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem);
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 5rem); align-items: center;
  }
  .hero h1 { color: var(--paper); margin: 1.5rem 0 1.8rem; max-width: 14ch; }
  .hero h1 em { font-style: normal; color: var(--champagne); }
  .hero-lede { font-size: clamp(1.04rem, 1.5vw, 1.18rem); color: #BEC4DC; max-width: 48ch; line-height: 1.72; }
  .hero-rule { display: block; width: 72px; height: 1px; background: var(--champagne); transform-origin: left center; }
  .hero-emblem { position: relative; width: clamp(150px, 19vw, 250px); }
  .hero-emblem svg { width: 100%; height: auto; }
  @media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-emblem { order: -1; width: 118px; }
  }
  .hero-meta {
    position: relative; border-top: 1px solid var(--rule-navy);
    max-width: var(--site-max); margin-inline: auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  }
  .hero-meta > div { padding: 1.5rem var(--gutter) 1.7rem; border-right: 1px solid var(--rule-navy); }
  .hero-meta > div:first-child { padding-left: var(--gutter); }
  .hero-meta > div:last-child { border-right: none; }
  .hero-meta .hm-label {
    font-size: 0.62rem; letter-spacing: 0.24em; color: #7B82A8; text-transform: uppercase;
    display: block; margin-bottom: 8px; font-weight: 600;
  }
  /* stat-first variant: the figure leads, the descriptor sits under it */
  .hero-meta .hm-stat {
    display: block; font-family: var(--font-display); color: var(--champagne);
    font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.1; letter-spacing: -0.02em;
  }
  .hero-meta .hm-stat + .hm-label { margin: 10px 0 0; color: #8990B2; }
  .hero-meta .hm-value { font-family: var(--font-display); color: var(--paper); font-size: 1.08rem; line-height: 1.3; letter-spacing: -0.012em; }

  /* emblem strokes */
  .bolt { stroke: var(--champagne-soft); fill: none; stroke-width: 2.2; stroke-linecap: round; }
  .power-ring { stroke: var(--paper); fill: none; stroke-width: 6; stroke-linecap: round; }
  .power-bar  { stroke: var(--paper); stroke-width: 6; stroke-linecap: round; }
  .emblem-rules line { stroke: var(--rule-navy); stroke-width: 2; }

  /* ---------- values ---------- */
  .values-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); border-top: 1px solid var(--rule); }
  .section-navy .values-grid { border-top-color: var(--rule-navy); }
  .value-cell { background: none; padding: 2rem 2rem 2.2rem 0; border-right: 1px solid var(--rule); }
  .value-cell:last-child { border-right: none; }
  .section-navy .value-cell { border-right-color: var(--rule-navy); }
  @media (max-width: 780px) {
    .value-cell { border-right: none; border-bottom: 1px solid var(--rule); padding-right: 0; }
    .value-cell:last-child { border-bottom: none; }
    .section-navy .value-cell { border-bottom-color: var(--rule-navy); }
  }
  .value-cell h3 { margin-bottom: 0.6rem; }
  .value-cell p { font-size: 0.95rem; color: var(--text-2); max-width: 34ch; }
  .section-navy .value-cell p, .on-navy-cell p { color: #A7ADC8; }
  .on-navy-cell { background: none; }
  .on-navy-cell h3 { color: var(--paper); }

  /* ---------- interior page head ---------- */
  .page-head { background: var(--ink); color: var(--paper); position: relative; overflow: clip; }
  /* Interior heads carry no photo, so the block is centred rather than left-hung
     in an empty dark band (client direction 2026-09-16). Every child has a
     max-width, so each needs auto side margins as well as centred text. */
  .page-head-inner {
    max-width: var(--site-max); margin-inline: auto; text-align: center;
    padding: clamp(3.5rem, 8vw, 7rem) var(--gutter) clamp(3rem, 6vw, 5rem); position: relative;
  }
  .page-head h1 { color: var(--paper); font-size: clamp(2.4rem, 5.2vw, 4rem); max-width: 17ch; margin-inline: auto; }
  .page-head .lede { color: #BEC4DC; margin-top: 1.5rem; font-size: 1.1rem; max-width: 54ch; line-height: 1.72;
    margin-inline: auto; }
  /* the breadcrumb picks up the global paragraph max-width, so without this its
     box stays pinned left and its centred text lands well off the page centre */
  .page-head-inner > * { margin-inline: auto; }
  .crumbs {
    font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 1.8rem;
    color: #7B82A8; font-weight: 600;
  }
  .crumbs a { color: var(--champagne); }
  .crumbs a:hover { color: var(--champagne-soft); }

  /* ---------- service detail ---------- */
  .svc-figure { border: none; background: none; position: sticky; top: 104px; }
  .svc-figure img { width: 100%; max-height: 560px; object-fit: cover; }
  .svc-figure figcaption {
    padding: 0.85rem 0 0; border-top: 1px solid var(--rule); margin-top: 0.9rem;
    font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper-deep); font-weight: 600;
  }
  .svc-body h2 { margin: 2.8rem 0 1rem; font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
  .svc-body h2:first-child { margin-top: 0; }
  .svc-body p + p { margin-top: 1rem; }
  .svc-body ul { margin: 1.3rem 0 0 0; display: grid; gap: 0.7rem; border-top: 1px solid var(--rule); padding-top: 1.2rem; }
  .svc-body ul li { padding-left: 1.7rem; position: relative; max-width: var(--measure); }
  .svc-body ul li::before {
    content: ""; position: absolute; left: 0; top: 0.62em; width: 11px; height: 1px; background: var(--copper);
  }

  /* ---------- qualification checklist ---------- */
  .check-row { display: grid; grid-template-columns: 26px 1fr; gap: 1.2rem; padding: 1.35rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
  .check-row:last-child { border-bottom: none; }
  .check-box { width: 17px; height: 17px; border: 1px solid var(--copper); position: relative; margin-top: 6px; }
  .check-box::after {
    content: ""; position: absolute; inset: 3px; background: var(--copper);
    clip-path: polygon(14% 44%, 40% 70%, 86% 16%, 100% 30%, 40% 100%, 0 58%);
  }
  .check-row h3 { font-size: 1.16rem; margin-bottom: 4px; }
  .check-row p { font-size: 0.95rem; color: var(--text-2); }

  /* ---------- area band ---------- */
  .area-band { border: none; border-left: 1px solid var(--copper); background: none; padding: 0.3rem 0 0.3rem 1.8rem; margin-top: 2.6rem; }
  .area-band h3 { margin-bottom: 0.5rem; }
  .area-band p { font-size: 0.97rem; color: var(--text-2); }

  /* ---------- track record ---------- */
  .stat-band {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    border-top: 1px solid var(--rule); margin-top: 2.6rem;
  }
  .stat-band > div { padding: 1.7rem 1.6rem 1.8rem 0; border-right: 1px solid var(--rule); }
  .stat-band > div:last-child { border-right: none; }
  @media (max-width: 860px) {
    .stat-band > div { border-right: none; border-bottom: 1px solid var(--rule); padding-right: 0; }
    .stat-band > div:last-child { border-bottom: none; }
  }
  .stat-num {
    display: block; font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; color: var(--copper-deep);
    letter-spacing: -0.03em; font-variant-numeric: lining-nums;
  }
  .stat-label { display: block; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); margin-top: 0.85rem; font-weight: 600; max-width: 22ch; }
  .stat-band-navy { border-top-color: var(--rule-navy); }
  .stat-band-navy > div { border-color: var(--rule-navy); }
  .stat-band-navy .stat-num { color: var(--champagne); }
  .stat-band-navy .stat-label { color: #8990B2; }

  .disclosure { border: none; border-left: 1px solid var(--copper); background: none; padding: 0.4rem 0 0.4rem 1.8rem; }
  .disclosure p { max-width: 76ch; font-size: 1rem; color: var(--text-2); }

  .cred-list { display: grid; gap: 0.6rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
  .cred-list li { padding-left: 1.7rem; position: relative; font-size: 0.95rem; color: var(--text-2); }
  .cred-list li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 11px; height: 1px; background: var(--copper); }
  .tel-inline { font-family: var(--font-display); font-size: 1.4rem; color: var(--text); font-variant-numeric: tabular-nums; }
  .tel-inline:hover { color: var(--copper-deep); }

  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .exp-table { min-width: 640px; }
  .exp-table thead th { width: auto; }
  .exp-table td:first-child { width: 23%; }
  .exp-table td:nth-child(2) { width: 15%; }
  .exp-table td:nth-child(3) { width: 15%; }
  .exp-table td { font-size: 0.92rem; line-height: 1.6; color: var(--text-2); }
  .exp-table td strong { font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; color: var(--text); letter-spacing: -0.01em; }


  /* ---------- client-supplied page copy ---------- */
  /* long client headlines need their own scale so they do not run to six lines */
  .page-head h1.h1-long {
    font-size: clamp(1.85rem, 3.3vw, 2.9rem); max-width: 26ch; line-height: 1.1; letter-spacing: -0.02em;
    margin-inline: auto;
  }
  .claim-list { display: grid; gap: 1.35rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
  .claim-list li { padding-left: 1.8rem; position: relative; max-width: 74ch; color: var(--text-2); }
  .claim-list li::before {
    content: ""; position: absolute; left: 0; top: 0.95em; width: 11px; height: 1px; background: var(--copper);
  }
  .claim-list strong {
    display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.12rem;
    color: var(--text); letter-spacing: -0.012em; margin-bottom: 0.15rem;
  }
  .section-navy .claim-list { border-top-color: var(--rule-navy); }
  .section-navy .claim-list li { color: #A7ADC8; }
  .section-navy .claim-list li::before { background: var(--champagne); }
  .section-navy .claim-list strong { color: var(--paper); }

  .std-list { border-top: 1px solid var(--rule); }
  .std-row { padding: 1.7rem 0; border-bottom: 1px solid var(--rule); }
  .std-row:last-child { border-bottom: none; }
  .std-row h3 { margin-bottom: 0.55rem; }
  .std-row p { color: var(--text-2); max-width: 76ch; }


  /* ---------- core values: principle / execution pairs ---------- */
  .value-blocks { border-top: 1px solid var(--rule); }
  .value-block { padding: 2rem 0; border-bottom: 1px solid var(--rule); }
  .value-block:last-child { border-bottom: none; }
  .value-block h3 { margin-bottom: 1.1rem; }
  .verse { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.16em;
           text-transform: uppercase; color: var(--copper-deep); white-space: nowrap;
           margin-left: 0.55rem; font-weight: 600; }
  .pe { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 0.55rem 1.6rem; }
  .pe dt { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
           color: var(--copper-deep); font-weight: 600; padding-top: 0.3rem; }
  .pe dd { color: var(--text-2); max-width: 70ch; }
  .section-navy .value-blocks, .section-navy .value-block { border-color: var(--rule-navy); }
  .section-navy .verse, .section-navy .pe dt { color: var(--champagne); }
  .section-navy .pe dd { color: #A7ADC8; }
  @media (max-width: 700px) {
    .pe { grid-template-columns: 1fr; gap: 0.25rem; }
    .pe dd { margin-bottom: 0.9rem; }
    .verse { display: block; margin: 0.4rem 0 0; white-space: normal; }
  }

  /* ---------- contact ---------- */
  .contact-form { display: grid; gap: 1.3rem; border: none; background: none; padding: 0; }
  .contact-form label { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); display: block; margin-bottom: 8px; font-weight: 600; }
  .contact-form input, .contact-form textarea {
    width: 100%; border: none; border-bottom: 1px solid var(--rule-strong);
    background: rgba(21, 24, 43, 0.035);
    padding: 0.7rem 0.8rem; font-size: 1rem;
    transition: border-color .35s var(--ease), background-color .35s var(--ease);
  }
  .contact-form input:hover, .contact-form textarea:hover { background: rgba(21, 24, 43, 0.055); }
  .contact-form input::placeholder, .contact-form textarea::placeholder { color: #63687F; }
  .contact-form input:focus, .contact-form textarea:focus {
    border-bottom-color: var(--copper); background: rgba(21, 24, 43, 0.055); outline: none;
  }
  .form-2col { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
  .contact-form .btn { justify-self: start; }

  /* ---------- projects ---------- */
  .proj-grid { display: grid; gap: clamp(1.6rem, 3vw, 3rem); grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); grid-auto-flow: dense; }
  .proj-grid .plate-wide { grid-column: span 2; }
  @media (max-width: 700px) { .proj-grid .plate-wide { grid-column: span 1; } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }
}

  /* ---------- BLUEPRINT HERO (owner direction, 2026-08-25 call) ----------
     Shane Nolan: "I wouldn't want this picture ... like a blueprint or something
     in this background would ... be really nice and it wouldn't be really job
     specific." So the hero is a drawing, not footage: a one-line schematic of a
     typical commercial service, generated in hero/schematic.py from real drafting
     convention, on a navy sheet with a drafting border and title block.
     Cold, it is finished white line work: that is the whole hero with no JS or
     with motion turned off. With motion, main.js runs copper current through it
     in four steps (service, transformation, distribution, loads), holds, and
     dims back before the loop repeats. Nothing here is job specific. */
  .energize {
    position: relative; min-height: 88vh; overflow: hidden; display: flex; align-items: center;
    background: radial-gradient(118% 92% at 66% 40%, #111844 0%, var(--ink) 56%, var(--ink-deep) 100%);
    color: var(--paper); isolation: isolate;
  }
  .energize__sheet {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: clamp(0rem, 2.5vw, 3rem);
  }
  /* drafting paper: a 24px field with a 120px major grid, faded off at the edges
     so it never reads as a tiled background */
  .energize__grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(214,228,255,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(214,228,255,.07) 1px, transparent 1px),
      linear-gradient(rgba(214,228,255,.032) 1px, transparent 1px),
      linear-gradient(90deg, rgba(214,228,255,.032) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    -webkit-mask-image: radial-gradient(88% 78% at 62% 46%, #000 26%, transparent 100%);
            mask-image: radial-gradient(88% 78% at 62% 46%, #000 26%, transparent 100%);
  }
  .oneline-svg {
    width: min(1220px, 65vw); height: auto; max-height: 76vh; overflow: visible; display: block;
    transform-origin: 60% 50%; will-change: transform;
  }

  /* the drawing, cold: white ink on the navy sheet */
  .ol-run, .ol-busbar { fill: none; stroke: rgba(226,236,255,.30); stroke-width: 2; stroke-linecap: round; }
  .ol-busbar { stroke-width: 4.5; }
  .ol-sym { fill: none; stroke: rgba(226,236,255,.34); stroke-width: 1.8; transition: stroke .8s var(--ease), filter .8s var(--ease); }
  .ol-box { stroke-width: 1.4; }
  .ol-brk { stroke-width: 2; }
  .ol-lab, .ol-sub, .ol-glyph {
    fill: rgba(206,218,248,.40); font-family: var(--font-body); text-anchor: middle;
    transition: fill .8s var(--ease);
  }
  .ol-lab { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
  .ol-sub { font-size: 10.5px; letter-spacing: .1em; }
  .ol-glyph { font-size: 15px; font-weight: 600; }
  .ol-busname { font-size: 12.5px; letter-spacing: .2em; }
  .ol-l { text-anchor: start; }
  .ol-r { text-anchor: end; }
  .ol-tag { font-size: 17px; }

  /* sheet border, edge ticks, title block */
  .ol-frame { fill: none; stroke: rgba(226,236,255,.20); stroke-width: 1.5; }
  .ol-frame-in { stroke-width: 1; stroke: rgba(226,236,255,.13); }
  .ol-tick { stroke: rgba(226,236,255,.20); stroke-width: 1.2; }
  .ol-tb-box { fill: none; stroke: rgba(226,236,255,.24); stroke-width: 1.2; }
  .ol-tb-rule { stroke: rgba(226,236,255,.17); stroke-width: 1; }
  .ol-tb-key {
    fill: rgba(240,246,255,.60); font-family: var(--font-body); font-size: 14px;
    font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  }
  .ol-tb-sub {
    fill: rgba(203,215,246,.40); font-family: var(--font-body); font-size: 10.5px;
    letter-spacing: .14em; text-transform: uppercase;
  }

  /* the drawing, live: copper current drawn on top of the white ink by main.js */
  .ol-live {
    fill: none; stroke: var(--champagne-soft); stroke-linecap: round; pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(216,168,126,.75)) drop-shadow(0 0 14px rgba(216,168,126,.35));
  }
  .ol-dev.lit .ol-sym {
    stroke: var(--champagne-soft);
    filter: drop-shadow(0 0 5px rgba(216,168,126,.7)) drop-shadow(0 0 16px rgba(216,168,126,.28));
  }
  .ol-dev.lit .ol-blade { stroke: var(--champagne-soft); }
  .ol-dev.lit .ol-lab, .ol-dev.lit .ol-glyph { fill: var(--paper); }
  .ol-dev.lit .ol-sub { fill: rgba(231,199,168,.85); }

  /* copy plate: the drawing is weighted right, the reading column sits left of it */
  .energize__scrim {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
      linear-gradient(100deg, var(--ink) 2%, rgba(10,13,30,.92) 24%, rgba(10,13,30,.55) 42%,
        rgba(10,13,30,.06) 66%, rgba(10,13,30,.28) 100%),
      linear-gradient(180deg, rgba(10,13,30,.50) 0%, rgba(10,13,30,0) 22%,
        rgba(10,13,30,0) 70%, rgba(6,8,20,.86) 100%);
  }
  .energize__inner {
    position: relative; z-index: 3; max-width: var(--site-max); margin-inline: auto; width: 100%;
    padding: clamp(4rem, 8vh, 6rem) var(--gutter) clamp(3.5rem, 7vh, 5rem);
  }
  .chapter { max-width: 29rem; }

  .chapter h1 { color: var(--paper); font-size: clamp(1.85rem, 3.2vw, 2.7rem); line-height: 1.06;
    letter-spacing: -.026em; max-width: 16ch;
    text-shadow: 0 2px 30px rgba(10,13,30,.8); }
  .chapter h1 em { font-style: normal; color: var(--champagne); }
  .chapter-sub {
    font-family: var(--font-display); color: var(--champagne-soft);
    font-size: clamp(.98rem, 1.35vw, 1.16rem); margin-top: .9rem; max-width: 34ch;
    line-height: 1.3; text-shadow: 0 2px 24px rgba(10,13,30,.9);
  }
  .chapter-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

  /* narrow: the drawing stops being a readable diagram and becomes the paper the
     copy is printed on, so the copy centres over it */
  @media (max-width: 1040px) {
    .energize__sheet { justify-content: center; padding-right: 0; opacity: .62; }
    .oneline-svg { width: 165vw; max-width: none; max-height: none; }
    .energize__scrim {
      background:
        radial-gradient(70% 30% at 50% 50%, rgba(10,13,30,.72) 0%, rgba(10,13,30,.34) 62%,
          rgba(10,13,30,0) 100%),
        linear-gradient(180deg, rgba(10,13,30,.74) 0%, rgba(10,13,30,.12) 34%,
          rgba(10,13,30,.12) 62%, rgba(6,8,20,.88) 100%);
    }
    .chapter { text-align: center; max-width: 38rem; margin-inline: auto; }
    .chapter h1, .chapter-sub { margin-inline: auto; }
  }

  .home-lede {
    background: var(--ink); padding: clamp(3.2rem, 8vh, 5.5rem) var(--gutter) clamp(3rem, 7vh, 5rem);
  }
  .home-lede p {
    max-width: 58ch; margin-inline: auto; text-align: center; color: #C8CEE6;
    font-size: clamp(1.02rem, 1.25vw, 1.14rem); line-height: 1.75;
  }

  /* phones and tablets: the drawing stops being a background and becomes its own
     plate above the headline. Behind type at this size it is neither readable as a
     drawing nor quiet enough to read type over. */
  @media (max-width: 1040px) {
    .energize {
      flex-direction: column; justify-content: center; min-height: auto;
      padding: clamp(2rem, 5vh, 3rem) 0 clamp(2.4rem, 6vh, 3.5rem);
    }
    .energize__sheet {
      position: relative; inset: auto; width: 100%; height: 40vh; min-height: 230px;
      opacity: 1; justify-content: center; overflow: hidden;
      /* the plate is a detail of a wider sheet, so the crop is faded, not cut */
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    }
    .oneline-svg { width: auto; height: 100%; max-width: none; max-height: none; }
    .energize__scrim { display: none; }
    .energize__inner { padding-top: clamp(1.6rem, 4vh, 2.4rem); padding-bottom: 0; }
  }

  .hero-meta-band { background: var(--ink); border-top: 1px solid var(--rule-navy); }

  @media (prefers-reduced-motion: reduce) {
    /* main.js does not energize in this case; the finished drawing is the hero */
    .ol-live { display: none !important; }
    .oneline-svg { transform: none !important; }
  }

@layer pages {
  /* ---------- OWNER-COPY TEMPLATE (client direction 2026-09-16) ----------
     Every page is the owner's Drive text and nothing else, so the design job is
     restraint: one dark head, one reading column, photos in a quiet grid, generous
     space. No eyebrows, no numbering, no cards. */

  /* the client's real logo lockup, lit ivory, in header and footer */
  .lps-logo {
    display: block; height: 52px; aspect-ratio: 900 / 345; background: var(--paper);
    -webkit-mask: url('../img/lps-logo.png?v=4c788642') center / contain no-repeat;
            mask: url('../img/lps-logo.png?v=4c788642') center / contain no-repeat;
  }
  .brand { gap: 0; }
  .header-inner { min-height: 84px; }
  @media (max-width: 1010px) { .site-nav { inset: 84px 0 0 0; } .lps-logo { height: 44px; } }

  /* page head: the title and the owner's opening paragraph */
  .page-head-inner { padding: clamp(4.5rem, 10vw, 8rem) var(--gutter) clamp(4rem, 8vw, 6.5rem); }
  .page-head .lede { font-size: clamp(1.05rem, 1.25vw, 1.16rem); max-width: 62ch; }
  .page-head .lede strong { color: var(--paper); font-weight: 500; }
  .page-head .lede a, .op-col a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

  /* body: a single reading column */
  .op-body { background: var(--paper); padding-block: clamp(4.5rem, 9vw, 7.5rem); }
  .op-col { max-width: 46rem; margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; }
  .op-col > * { max-width: none; }
  .op-col h2 {
    font-size: clamp(1.55rem, 2.4vw, 2.05rem); line-height: 1.15; letter-spacing: -0.015em;
    margin: clamp(3.5rem, 6vw, 4.75rem) 0 1.4rem; padding-top: clamp(3.5rem, 6vw, 4.75rem);
    border-top: 1px solid var(--rule);
  }
  .op-col > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .op-col h3 { font-size: 1.22rem; line-height: 1.3; margin: 2.4rem 0 0.7rem; }
  .op-col h2 + h3 { margin-top: 0.6rem; }
  .op-col p { color: var(--text-2); font-size: 1.04rem; line-height: 1.8; }
  .op-col p + p { margin-top: 1rem; }
  .op-col strong { color: var(--ink); font-weight: 600; }
  .op-col ul { display: grid; gap: 1.15rem; margin-top: 1.4rem; padding: 0; }
  .op-col li { position: relative; padding-left: 1.6rem; color: var(--text-2); font-size: 1.02rem; line-height: 1.75; }
  .op-col li::before {
    content: ""; position: absolute; left: 0; top: 0.9em; width: 10px; height: 1px; background: var(--copper);
  }

  /* service photos */
  .op-gallery { background: var(--paper); padding-block: clamp(3rem, 6vw, 5rem) clamp(4.5rem, 9vw, 7.5rem); }
  .op-grid {
    max-width: var(--site-max); margin-inline: auto; padding-inline: var(--gutter);
    display: grid; gap: clamp(0.9rem, 1.6vw, 1.4rem); grid-template-columns: repeat(6, 1fr);
  }
  .op-tile { margin: 0; overflow: hidden; background: var(--ink); grid-column: span 2; }
  .op-tile img { width: 100%; height: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
  .op-grid[data-n="2"] .op-tile { grid-column: span 3; }
  /* the owners, on About: the only photographs of people on the site, so they are captioned
     with whose family they are and the tile keeps the paper ground rather than the navy */
  /* the tile clips its photo; the caption lives below it, so it must not be clipped too */
  .op-grid--people .op-tile { background: none; overflow: visible; }
  .op-grid--people figcaption {
    margin-top: 0.85rem; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
    font-weight: 600; color: var(--copper-deep);
  }
  .op-grid[data-n="5"] .op-tile:nth-child(-n+2) { grid-column: span 3; }
  @media (max-width: 760px) {
    .op-grid { grid-template-columns: 1fr; }
    .op-grid .op-tile, .op-grid[data-n] .op-tile { grid-column: auto; }
  }

  /* contact */
  .op-contact {
    max-width: 64rem; margin-inline: auto; padding-inline: var(--gutter);
    display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start;
  }
  @media (max-width: 820px) { .op-contact { grid-template-columns: 1fr; } }
  .op-people { display: grid; gap: 2.2rem; padding-top: 0.4rem; }
  .op-person a { display: block; color: var(--text-2); font-size: 1rem; margin-top: 0.35rem; }
  .op-person a:hover { color: var(--copper-deep); }
  .op-person-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); max-width: none; }
  .contact-form .btn { justify-self: start; }

  /* honeypot: off screen for people, irresistible to bots */
  .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .form-note { margin-top: 1.1rem; font-size: .96rem; line-height: 1.6; color: var(--text-2); }
  .form-note.is-ok { color: var(--copper-deep); font-weight: 600; }
  .form-note.is-bad { color: var(--text); }
  .form-note a { color: var(--copper-deep); }

  /* footer */
  .site-footer--simple .sf-inner {
    max-width: var(--site-max); margin-inline: auto; padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter) 2.4rem;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2.5rem;
  }
  .site-footer--simple .lps-logo { height: 64px; }
  .sf-people { display: flex; flex-wrap: wrap; gap: 2rem 4rem; }
  .sf-people p { font-size: 0.93rem; line-height: 1.75; color: var(--paper); max-width: none; }
  .sf-people a { color: #A7ADC8; text-decoration: none; }
  .sf-people a:hover { color: var(--paper); }
  .sf-legal {
    max-width: var(--site-max); margin-inline: auto; padding: 1.4rem var(--gutter) 2.4rem;
    border-top: 1px solid var(--rule-navy);
    display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem;
    font-size: 0.68rem; letter-spacing: 0.14em; color: #787FA3; text-transform: uppercase;
  }
}