/* ============================================================
   Catalyst — Page-specific styles
   Layered on top of styles.css (which contains the full design
   system extracted from web-components.html). This file only
   adds styles for production layout pieces NOT in the prototype:
   page hero, three-up service strips, systems grid, project
   feature, Step Code teaser, CTA bands, contact form, mobile
   drawer, page-hero subheaders, kv lists, etc.
   ============================================================ */

/* ----- Site nav as page chrome (the prototype's .nav-a is a
   demo inside .demo; here we make it the actual top of page) ----- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  border-radius: 0;
  margin: 0;
  /* Override .nav-a's overflow:hidden so the burger dropdown can extend
     below the header without being clipped. We don't need the overflow
     clip here because border-radius is 0. */
  overflow: visible;
}
.site-nav .util,
.site-nav .main {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.site-nav .main { gap: 24px; }
.site-nav .util .pill { background: rgba(255,255,255,0.16); color: #F0F5F6; border: 1px solid rgba(255,255,255,0.18); }
[data-theme="dark"] .site-nav .util .pill { background: rgba(95,207,200,0.12); color: var(--accent); border-color: rgba(95,207,200,0.28); }

.site-nav .util-signin {
  display: inline-flex; align-items: center; gap: 6px;
  color: #F0F5F6;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  transition: background 200ms, border-color 200ms, color 200ms;
}
.site-nav .util-signin:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.40);
}
[data-theme="dark"] .site-nav .util-signin {
  color: var(--accent);
  border-color: rgba(95,207,200,0.36);
}
[data-theme="dark"] .site-nav .util-signin:hover {
  background: rgba(95,207,200,0.10);
}

.site-nav .theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid rgba(255,255,255,0.22);
  color: #F0F5F6;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.site-nav .theme-toggle:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.36); }
[data-theme="dark"] .site-nav .theme-toggle { color: var(--accent); border-color: rgba(95,207,200,0.36); }
[data-theme="dark"] .site-nav .theme-toggle:hover { background: rgba(95,207,200,0.10); }

/* Nav CTA — the existing .nav-a .cta .btn rules in styles.css use the
   Glass Pane gradient. Force it to a link element here too. */
.site-nav .cta .btn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.site-nav .cta .btn .icon { transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.site-nav .cta .btn:hover .icon { transform: translateX(3px); }

/* ============================================================
   SITE NAV — burger-only nav on every screen size.
   Horizontal .primary nav is hidden. "Request a quote" CTA
   stays in the topbar (clustered with the brand on the left).
   Burger is pinned to the right and anchors a dropdown panel.
   ============================================================ */
.site-nav .main {
  /* Brand + CTA cluster on the left; burger pushed to the far right via margin-left:auto on the burger itself. */
  justify-content: flex-start;
  gap: 16px;
}
.site-nav .main .brand { flex: 0 0 auto; }
.site-nav .main .primary { display: none; }
/* Topbar CTA stays visible at every screen size — overrides the
   prototype's @media (max-width: 880px) rule from styles.css that
   collapses .nav-a .cta on mobile. Per Mike's locked exception
   (2026-05-17), the topbar CTA stays on the always-on pattern for
   prominence on every device. */
.site-nav .main .cta {
  flex: 0 0 auto;
  display: inline-flex !important;
}
@media (max-width: 880px) {
  .site-nav.nav-a .cta { display: inline-flex !important; }
}
/* On wider screens, keep some breathing room between the CTA and the burger. */
@media (min-width: 720px) {
  .site-nav .main { gap: 20px; }
}

/* Burger — locked Glass Pane gradient per the brand. Always visible. */
.mobile-burger {
  display: inline-flex;
  margin-left: auto;
  flex: 0 0 auto;
  width: 48px; height: 48px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
  color: #DCE6E7;
  border: none; border-radius: 12px;
  cursor: pointer;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 4px rgba(16,34,34,0.08),
              0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1),
              box-shadow 280ms cubic-bezier(.2,.7,.2,1),
              filter 200ms;
}
/* Sheen sweep on hover — fires once via animation forwards so it doesn't reverse on un-hover. */
.mobile-burger::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.mobile-burger:hover {
  transform: translateY(-2px) scale(1.04);
  filter: saturate(1.1);
  box-shadow: 0 4px 8px rgba(16,34,34,0.10),
              0 14px 36px -10px color-mix(in srgb, var(--accent) 75%, transparent);
}
.mobile-burger:hover::before {
  animation: burgerSheen 700ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes burgerSheen {
  to { left: 130%; }
}
.mobile-burger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.mobile-burger:active { transform: translateY(0) scale(1); }

.mobile-burger span {
  width: 22px; height: 2px; border-radius: 2px;
  background: #DCE6E7;
  z-index: 1;
  transition: transform 280ms cubic-bezier(.65,.05,.36,1),
              opacity 200ms, width 220ms cubic-bezier(.2,.7,.2,1);
}
/* Asymmetric line-shift hover — per brand burger spec */
.mobile-burger:hover span:nth-child(1) { width: 16px; transform: translateX(-3px); }
.mobile-burger:hover span:nth-child(3) { width: 16px; transform: translateX(3px); }
/* X snap on open */
.mobile-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 22px; }
.mobile-burger.open span:nth-child(2) { opacity: 0; }
.mobile-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 22px; }
.mobile-burger:hover.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-burger:hover.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown panel — anchored to the burger's lower-right.
   IMPORTANT: the .site-nav header is full-viewport-width, but the .main row
   inside it is constrained to max-width 1240px and centered. If we anchor
   the dropdown to the header (right: 24px from full viewport), it ends up
   way to the right of the burger on wide screens. The formula below pulls
   the dropdown back so its right edge tracks the burger's right edge — the
   right padding of the 1240px wrap, plus a fall-back of 24px on narrow screens. */
.mobile-drawer {
  position: absolute;
  top: calc(100% + 10px);
  right: max(24px, calc((100vw - 1240px) / 2 + 24px));
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow:
    0 12px 32px -16px rgba(16,34,34,0.18),
    0 24px 60px -20px rgba(16,34,34,0.22);
  padding: 12px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 220ms cubic-bezier(.2,.7,.2,1),
              transform 240ms cubic-bezier(.2,.7,.2,1),
              visibility 240ms;
  z-index: 70;
  /* Flex column so cta-link can use `order: -1` to appear at the top
     regardless of where it sits in the HTML across all 13 pages. */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-drawer.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-theme="dark"] .mobile-drawer {
  background: var(--dark-surface, #1D3447);
  border-color: var(--dark-border, #2C4358);
  box-shadow:
    0 12px 32px -16px rgba(0,0,0,0.40),
    0 24px 60px -20px rgba(0,0,0,0.50);
}

.mobile-drawer a {
  display: flex; align-items: center;
  padding: 14px 14px 14px 16px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.005em;
  position: relative;
  transition: color 220ms cubic-bezier(.2,.7,.2,1),
              background 260ms cubic-bezier(.2,.7,.2,1),
              padding-left 280ms cubic-bezier(.2,.7,.2,1),
              letter-spacing 280ms cubic-bezier(.2,.7,.2,1),
              box-shadow 260ms cubic-bezier(.2,.7,.2,1);
}
/* Accent margin-mark animates in from the left on hover (dropdown-menu pattern).
   Bumped to 2 px tall × 14 px wide on hover so it reads as a clear margin tick. */
.mobile-drawer a::before {
  content: ""; position: absolute;
  left: 8px; top: 50%;
  width: 0; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: width 280ms cubic-bezier(.2,.7,.2,1);
}
.mobile-drawer a:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding-left: 32px;
  letter-spacing: 0.005em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.mobile-drawer a:hover::before { width: 14px; }

/* Current-page indicator — visually distinct from hover.
   Uses a small filled accent dot instead of the hover line-dash,
   no background tint, no indent — so it reads as "you are here"
   rather than "this is selected." Still hoverable; clicking just
   reloads the page. */
.mobile-drawer a.active {
  color: var(--accent);
  background: transparent;
  cursor: default;
}
.mobile-drawer a.active::before {
  /* Override the hover line-mark: filled dot, vertically centered */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  left: 8px;
  background: var(--accent);
}
/* On hover of the active item, keep the dot but allow the rest of the
   hover treatment so it doesn't feel dead. */
.mobile-drawer a.active:hover::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* CTA at the top of the drawer.
   At DESKTOP (≥481px) the topbar CTA pill is visible, so the drawer's
   cta-link would be redundant — keep it hidden.
   At MOBILE (≤480px) the topbar CTA is hidden (see v5 layout above) and
   the drawer's cta-link becomes the primary conversion path. Styled as a
   prominent Glass Pane gradient pill anchored at the top of the drawer
   via `order: -1`. */
.mobile-drawer a.cta-link { display: none; }
@media (max-width: 480px) {
  .mobile-drawer a.cta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    order: -1;
    margin-bottom: 8px;
    padding: 14px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow:
      0 4px 10px rgba(16,34,34,0.10),
      0 14px 30px -10px color-mix(in srgb, var(--accent) 65%, transparent);
    transition: transform 240ms cubic-bezier(.2,.7,.2,1),
                box-shadow 280ms cubic-bezier(.2,.7,.2,1),
                filter 200ms;
  }
  .mobile-drawer a.cta-link::before { display: none; }
  .mobile-drawer a.cta-link:hover,
  .mobile-drawer a.cta-link:active {
    color: #FFFFFF;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    transform: translateY(-1px);
    filter: saturate(1.08);
    padding-left: 18px;
    letter-spacing: 0.02em;
  }
  .mobile-drawer a.cta-link:hover::before { width: 0; }
}

/* Phone link sits beneath everything else, smaller, separated by a rule. */
.mobile-drawer a.phone-link {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.mobile-drawer a.phone-link::before { display: none; }
.mobile-drawer a.phone-link:hover { padding-left: 14px; color: var(--accent); }

/* Backdrop dim — soft.
   CRITICAL: must be BELOW .site-nav (z-index 60) so the dropdown inside
   the sticky header isn't covered. .site-nav's sticky position creates a
   stacking context, so its children (the drawer) inherit its z-order in
   the document. Backdrop at 50 sits below the chrome but above all
   normal-flow page content — clicks on body content still close the
   drawer, clicks on dropdown items reach them. */
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(16, 34, 34, 0.15);
  visibility: hidden; opacity: 0;
  transition: opacity 220ms cubic-bezier(.2,.7,.2,1), visibility 220ms;
  z-index: 50;
}
.nav-backdrop.open { visibility: visible; opacity: 1; }
[data-theme="dark"] .nav-backdrop { background: rgba(0, 0, 0, 0.40); }

/* On very small screens, the drawer hugs the right edge with a small inset. */
@media (max-width: 480px) {
  .mobile-drawer {
    right: 12px;
    width: calc(100vw - 24px);
  }

  /* Topbar mobile layout v5 (locked 2026-05-18): two-element header.
     Brand cluster on the LEFT, burger on the RIGHT. The "Request a
     quote" CTA is removed from the header entirely on mobile — it
     lives at the top of the burger drawer instead (styled as a
     prominent pill, see .mobile-drawer a.cta-link rules below).
     Rationale (locked): on phones, the always-on Glass Pane gradient
     CTA was overpowering the brand wordmark. Moving the CTA into the
     drawer lets the brand own the header's visual hierarchy. */
  .site-nav .main {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    gap: 12px;
  }
  .site-nav .main .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
  }
  .site-nav .main .brand img { width: 48px; }
  .site-nav .main .brand .wm { font-size: 22px; line-height: 1.1; letter-spacing: -0.005em; }
  .site-nav .main .brand .sub { display: none; }
  /* CTA removed from mobile header (now lives in the drawer). Need
     `!important` to override the blanket `display: inline-flex
     !important` set higher in this file (which was added to keep the
     CTA visible at every width per the old locked rule, now superseded
     by Option C: CTA-in-drawer on mobile). */
  .site-nav .main .cta { display: none !important; }
  /* Burger on the right, slightly bigger than desktop for thumb target. */
  .mobile-burger {
    width: 48px;
    height: 48px;
    margin-left: auto;
    flex: 0 0 auto;
  }
}

/* Mid-phone widths — keep the wordmark visible but compact it so the
   topbar doesn't overflow at the in-between 480–620 range. */
@media (max-width: 620px) and (min-width: 481px) {
  .site-nav .main { padding: 14px 16px; gap: 12px; }
  .site-nav .main .brand img { width: 60px; }
  .site-nav .main .brand .wm { font-size: 17px; }
  .site-nav .main .cta .btn { padding: 10px 16px; font-size: 13px; }
}

/* Belt-and-suspenders: prevent any element from forcing horizontal scroll
   beyond the viewport on phones. If something later sneaks in wider than
   the viewport, this clips it rather than letting the user pan sideways
   into broken layout. */
html, body { overflow-x: hidden; }

/* ============================================================
   PAGE HERO — large hero block at top of pages
   ============================================================ */
.page-hero {
  padding: 96px 0 80px;
  background:
    radial-gradient(900px 360px at 18% -10%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%),
    radial-gradient(700px 320px at 96% 10%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.page-hero .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.page-hero .tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 999px;
}
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  max-width: 980px;
}
.page-hero .lede {
  font-size: 18px; line-height: 1.55;
  color: var(--text);
  margin: 0 0 32px;
  max-width: 780px;
  opacity: 0.86;
}
.page-hero .hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.page-hero .hero-actions .btn-primary,
.page-hero .hero-actions .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.page-hero .hero-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.page-hero .hero-meta strong { color: var(--text); font-weight: 600; }

/* Compact variant used on inner pages (services, about, etc.) */
.page-hero.compact {
  padding: 64px 0 48px;
}
.page-hero.compact h1 { font-size: clamp(34px, 5vw, 52px); }
.page-hero.compact .lede { font-size: 16px; margin-bottom: 20px; }
.page-hero.compact .hero-actions { margin-bottom: 0; }

/* ============================================================
   STRIPS — section containers across pages
   ============================================================ */
.strip {
  padding: 88px 0;
  border-bottom: 1px solid var(--border);
}
.strip:last-of-type { border-bottom: none; }
.strip .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

.strip-tint {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.strip-dark {
  background: linear-gradient(180deg, #14283A 0%, #182D40 100%);
  color: #DCE6E7;
  border-bottom: 1px solid #2C4358;
}
.strip-dark a { color: #5FCFC8; }
.strip-dark p { color: #B6C4CB; }

.strip-head {
  margin-bottom: 44px;
  max-width: 880px;
}
.strip-head .num {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.strip-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  line-height: 1.1;
}
.strip-head p {
  font-size: 16px;
  color: var(--muted);
  margin: 0;
  max-width: 720px;
  line-height: 1.55;
}
.strip-head-dark .num { color: #5FCFC8; }
.strip-head-dark h2 { color: #DCE6E7; }
.strip-head-dark p { color: #B6C4CB; }

/* ============================================================
   THREE-UP — for service cards, value cards, etc.
   ============================================================ */
.three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 920px) { .three-up { grid-template-columns: 1fr; } }

.how-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  position: relative;
  transition: border-color 280ms cubic-bezier(.2,.7,.2,1),
              transform 280ms cubic-bezier(.2,.7,.2,1),
              box-shadow 360ms cubic-bezier(.2,.7,.2,1);
}
.how-card:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
              0 16px 36px -16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.how-card .how-num {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.how-card h3 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.how-card p {
  font-size: 14.5px;
  color: var(--text);
  opacity: 0.86;
  margin: 0 0 16px;
  line-height: 1.55;
}
.how-card .bullets {
  list-style: none; padding: 0; margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}
.how-card .bullets li {
  padding: 6px 0 6px 18px;
  position: relative;
  line-height: 1.5;
}
.how-card .bullets li::before {
  content: ""; position: absolute;
  left: 0; top: 12px;
  width: 8px; height: 1.5px;
  background: var(--accent);
}

/* ============================================================
   SYSTEMS GRID — manufacturer cards on home
   ============================================================ */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 920px) { .systems-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .systems-grid { grid-template-columns: 1fr; } }

.system-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  transition: border-color 280ms cubic-bezier(.2,.7,.2,1),
              transform 280ms cubic-bezier(.2,.7,.2,1),
              box-shadow 360ms cubic-bezier(.2,.7,.2,1);
}
.system-card:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
              0 12px 28px -12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.system-card .origin {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.system-card h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.system-card .line {
  font-size: 13.5px;
  color: var(--text);
  opacity: 0.86;
  line-height: 1.55;
  margin: 0 0 14px;
}
.system-card .meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.system-card-cta {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  border-style: dashed;
  display: flex; flex-direction: column; justify-content: center;
}
.system-card-cta h3 { font-size: 20px; }
.system-card-cta .inline-link {
  margin-top: auto;
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.system-card-cta .inline-link:hover { text-decoration: underline; }

/* ============================================================
   FEATURE PROJECT — left art + right body
   ============================================================ */
.feature-project {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 920px) { .feature-project { grid-template-columns: 1fr; } }

.proj-art {
  background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 40%, var(--surface)));
  border-radius: 18px;
  padding: 32px;
  min-height: 440px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.proj-frame {
  position: absolute; inset: 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1.4fr 1fr;
  gap: 8px;
}
.proj-pane {
  background:
    linear-gradient(160deg,
      rgba(168, 239, 239, 0.3) 0%,
      rgba(168, 239, 239, 0.10) 40%,
      rgba(16, 34, 34, 0.10) 100%);
  border: 1px solid rgba(16, 34, 34, 0.18);
  position: relative;
  overflow: hidden;
}
.proj-pane::after {
  content: ""; position: absolute;
  top: -50%; left: -30%;
  width: 60%; height: 200%;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: skewX(-12deg);
}
.proj-pane-a { grid-column: 1; grid-row: 1 / span 2; }
.proj-pane-b { grid-column: 2; grid-row: 1; }
.proj-pane-c { grid-column: 2; grid-row: 2; }

.proj-body .proj-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
  margin-bottom: 16px;
}
.proj-body h3 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  line-height: 1.15;
}
.proj-body p {
  font-size: 15.5px;
  color: var(--text);
  opacity: 0.86;
  line-height: 1.55;
  margin: 0 0 24px;
}
.kv {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; gap: 0;
}
.kv li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.kv li:last-child { border-bottom: none; }
.kv li span {
  color: var(--muted);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-top: 3px;
}
.kv li strong { color: var(--text); font-weight: 600; }

/* ============================================================
   STEP CODE TEASER — on home
   ============================================================ */
.step-teaser {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 920px) { .step-teaser { grid-template-columns: 1fr; } }
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.teaser-tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(95, 207, 200, 0.20);
  border-radius: 12px;
  padding: 20px;
}
.teaser-tile .t-lbl {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #5FCFC8;
  margin-bottom: 10px;
}
.teaser-tile .t-val {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  color: #DCE6E7;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 6px;
}
.teaser-tile .t-sub {
  font-size: 12px;
  color: #8395A0;
}
.teaser-cta {
  text-align: left;
}
.teaser-cta .btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.teaser-cta .src {
  margin: 16px 0 0;
  font-size: 12px;
  color: #8395A0;
}
.teaser-cta .src strong { color: #B6C4CB; }
.teaser-cta .src a { color: #5FCFC8; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.cta-band-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 44px 48px;
}
@media (max-width: 880px) {
  .cta-band-inner { grid-template-columns: 1fr; padding: 32px; }
}
.cta-band-inner h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.cta-band-inner p {
  font-size: 15.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
.cta-band-actions {
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start;
}
.cta-band-actions .btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.phone-cta-inline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 180ms;
}
.phone-cta-inline:hover { color: var(--accent); }
.phone-cta-inline svg { width: 13px; height: 13px; }

/* ============================================================
   PAGE-LEVEL UTILS
   ============================================================ */
.two-up {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 920px) { .two-up { grid-template-columns: 1fr; gap: 28px; } }

.prose {
  max-width: 720px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
}
.prose p { margin: 0 0 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  margin: 32px 0 12px;
  letter-spacing: -0.01em;
}
.prose h3:first-child { margin-top: 0; }

/* Generic stat tile (used on About) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  text-align: left;
}
.stat-tile .num {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-tile .lbl {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* Service detail card (Services page) */
.service-detail {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}
.service-detail:first-of-type { padding-top: 16px; }
.service-detail:last-of-type { border-bottom: none; }
@media (max-width: 720px) { .service-detail { grid-template-columns: 1fr; gap: 16px; } }
.service-detail .label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.service-detail h3 {
  font-family: var(--font-heading);
  font-size: 26px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 8px 0 4px;
}
.service-detail .meta {
  font-size: 12.5px; color: var(--muted);
  margin-top: 6px;
}
.service-detail .body { font-size: 15px; color: var(--text); line-height: 1.6; }
.service-detail .body p { margin: 0 0 12px; }
.service-detail .body p:last-child { margin-bottom: 0; }
.service-detail .body ul {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px;
  margin: 12px 0 0;
  font-size: 13.5px; color: var(--muted);
}
@media (max-width: 600px) { .service-detail .body ul { grid-template-columns: 1fr; } }
.service-detail .body ul li { padding-left: 16px; position: relative; }
.service-detail .body ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 1.5px; background: var(--accent);
}

/* Project gallery card (Projects page) */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 720px) { .project-grid { grid-template-columns: 1fr; } }
.project-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1),
              border-color 280ms,
              box-shadow 360ms cubic-bezier(.2,.7,.2,1);
}
.project-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--accent) 25%, transparent);
}
.project-card .visual {
  height: 240px;
  background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 50%, var(--surface)));
  position: relative;
  overflow: hidden;
}
.project-card .visual::after {
  content: ""; position: absolute;
  top: 14%; left: 20%; right: 20%; bottom: 14%;
  background:
    linear-gradient(160deg,
      rgba(168, 239, 239, 0.30) 0%,
      rgba(168, 239, 239, 0.10) 40%,
      rgba(16, 34, 34, 0.10) 100%);
  border: 1px solid rgba(16, 34, 34, 0.18);
}
.project-card .body { padding: 24px; }
.project-card .meta {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.project-card h3 {
  font-family: var(--font-heading);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.project-card p {
  font-size: 13.5px;
  color: var(--text);
  opacity: 0.86;
  margin: 0 0 12px;
  line-height: 1.55;
}
.project-card .pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 11px;
  color: var(--accent);
}
.project-card .pills span {
  padding: 4px 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 999px;
}

/* Contact form */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 28px; } }

.contact-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 28px;
}
.contact-card h3 {
  font-family: var(--font-heading);
  font-size: 22px; font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.contact-card .sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.5;
}
.contact-card .field { margin-bottom: 18px; }
.contact-card form .actions {
  display: flex; gap: 12px; align-items: center;
  margin-top: 6px;
}
.contact-card form .actions .btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
}

.contact-info {
  display: flex; flex-direction: column; gap: 20px;
}
.contact-info-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}
.contact-info-row .lbl {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.contact-info-row .val {
  font-size: 15px;
  color: var(--text);
  line-height: 1.55;
}
.contact-info-row .val a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.contact-info-row .val a:hover { text-decoration: underline; }

/* Quote page wrapper — gives the lifted qflow section breathing room
   inside a page hero instead of the prototype's .sec-head context. */
.page-host .demo {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 0;
}
.page-host .demo:hover, .page-host .demo:focus-within {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.page-host .demo-label { display: none; }

/* ============================================================
   CTA family — Variant B "Slide Fill" — LOCKED (2026-05-17)
   ============================================================
   At rest: transparent fill, accent-colored text, no border.
   On hover: a gradient fill + masked gradient outline ring slide
   in from the left over 360ms, like a door opening. Text flips
   to white. Icon nudges 3 px forward.

   This replaces the earlier "always-on Glass Pane gradient"
   pattern. The slide-fill is more elegant and reads as a more
   intentional CTA — restrained at rest, decisive on hover.

   Applies to: .btn-primary, .btn-secondary, .btn-ghost, and the
   topbar CTA pills (.nav-a .cta .btn, .site-nav .cta .btn).
   Lifted from brand/web-components.html section 01, Variant B.
   ============================================================ */

/* Anchors styled as buttons need no underline + inline-flex */
a.btn-primary, a.btn-secondary, a.btn-ghost {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}

/* Reset: strip the always-on gradient + halo from styles.css.
   isolation: isolate creates a stacking context so the negative
   z-index pseudo-elements sit behind the text but in front of
   anything outside the button.
   NOTE: topbar CTA (.nav-a .cta .btn, .site-nav .cta .btn) is
   intentionally excluded — it stays on the always-on Glass Pane
   pattern for prominence per the locked exception (2026-05-17). */
.btn-primary,
.btn-secondary,
.btn-ghost {
  background: transparent !important;
  border: none !important;
  isolation: isolate;
  box-shadow: none !important;
  border-radius: 999px !important;
  transition: color 220ms cubic-bezier(.2,.7,.2,1),
              transform 220ms cubic-bezier(.2,.7,.2,1) !important;
  overflow: hidden;
  position: relative;
}

/* Primary CTA — accent color at rest */
.btn-primary {
  color: var(--accent) !important;
}

/* Slide-in gradient fill (sits behind the text) */
.btn-primary::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%) !important;
  border-radius: 999px !important;
  transform: translateX(-101%) !important;
  transition: transform 360ms cubic-bezier(.65,.05,.36,1) !important;
  z-index: -2 !important;
  pointer-events: none !important;
}

/* Slide-in gradient outline ring (masked to a 1.5px stroke).
   Sits between the fill and the text — z-index -1. */
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  width: 100%; height: 100%;
  top: 0; left: 0;
  border-radius: 999px;
  padding: 1.5px;
  background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
  -webkit-mask:
    linear-gradient(#fff, #fff) content-box,
    linear-gradient(#fff, #fff);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff, #fff) content-box,
    linear-gradient(#fff, #fff);
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 360ms cubic-bezier(.65,.05,.36,1);
}

/* Hover: pseudos slide in, text flips to white */
.btn-primary:hover:not(:disabled) {
  color: #FFFFFF !important;
  transform: none !important;
  filter: none !important;
}
.btn-primary:hover:not(:disabled)::before,
.btn-primary:hover:not(:disabled)::after {
  transform: translateX(0) !important;
}
.btn-primary:hover:not(:disabled) .icon {
  transform: translateX(3px) !important;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1) !important;
}

/* Press feedback — tight scale dip */
.btn-primary:active:not(:disabled) {
  transform: scale(0.98) !important;
  transition-duration: 80ms !important;
}

/* ============================================================
   Topbar CTA — locked exception (always-on Glass Pane gradient).
   The page-body CTAs use Variant B slide-fill, but the topbar
   "Request a quote" pill needs maximum prominence and stays on
   the always-on pattern. Locked 2026-05-17 per Mike.
   These rules undo the Variant B reset above and restore the
   always-on look from styles.css. Sweep stays at its brightened
   60% / 80% values for hover visibility.
   ============================================================ */
.nav-a .cta .btn,
.site-nav .cta .btn {
  background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 12px 24px;
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.01em;
  border: none !important;
  position: relative; overflow: hidden;
  box-shadow:
    0 2px 4px rgba(16, 34, 34, 0.08),
    0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent) !important;
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1),
              box-shadow 280ms cubic-bezier(.2, .7, .2, 1),
              filter 200ms !important;
  isolation: auto;
}
.nav-a .cta .btn::before,
.site-nav .cta .btn::before {
  /* CASCADE ORDER MATTERS: `inset: auto` is a shorthand that resets
     top/right/bottom/left. It MUST come BEFORE the longhand top/left
     declarations below or the sweep ends up rendered in-flow (visible
     at rest, overlapping the button text). Bug fixed 2026-05-17. */
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  left: -120% !important;
  right: auto !important;
  bottom: auto !important;
  width: 80% !important;
  height: 100% !important;
  background: linear-gradient(120deg,
    transparent 20%,
    rgba(255, 255, 255, 0.60) 50%,
    transparent 80%) !important;
  transform: skewX(-20deg) !important;
  transition: left 700ms cubic-bezier(.2, .7, .2, 1) !important;
  z-index: auto !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}
.nav-a .cta .btn::after,
.site-nav .cta .btn::after {
  display: none !important;
}
.nav-a .cta .btn:hover,
.site-nav .cta .btn:hover {
  transform: translateY(-2px) scale(1.015) !important;
  color: #FFFFFF !important;
  filter: saturate(1.1) !important;
  box-shadow:
    0 4px 8px rgba(16, 34, 34, 0.10),
    0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
    0 18px 40px -12px color-mix(in srgb, var(--accent) 85%, transparent) !important;
}
.nav-a .cta .btn:hover::before,
.site-nav .cta .btn:hover::before {
  left: 130% !important;
}
.nav-a .cta .btn:hover .icon,
.site-nav .cta .btn:hover .icon {
  transform: translateX(3px);
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
}
.nav-a .cta .btn:active,
.site-nav .cta .btn:active {
  transform: translateY(0) scale(0.99) !important;
  transition-duration: 80ms !important;
}

/* === Secondary — borderless at rest, ink fill slides in === */
.btn-secondary {
  color: var(--text) !important;
}
.btn-secondary::before {
  content: ""; position: absolute; inset: 0;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--text);
  border-radius: 999px;
  transform: translateX(-101%);
  transition: transform 360ms cubic-bezier(.65,.05,.36,1);
  z-index: -2;
  pointer-events: none;
}
.btn-secondary::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px;
  padding: 1.5px;
  background: var(--text);
  -webkit-mask:
    linear-gradient(#fff, #fff) content-box,
    linear-gradient(#fff, #fff);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff, #fff) content-box,
    linear-gradient(#fff, #fff);
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 360ms cubic-bezier(.65,.05,.36,1);
}
.btn-secondary:hover:not(:disabled) {
  color: var(--bg) !important;
}
.btn-secondary:hover:not(:disabled)::before,
.btn-secondary:hover:not(:disabled)::after {
  transform: translateX(0) !important;
}

/* === Ghost — muted at rest, surface fill slides in === */
.btn-ghost {
  color: var(--muted) !important;
}
.btn-ghost::before {
  content: ""; position: absolute; inset: 0;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--surface-2);
  border-radius: 999px;
  transform: translateX(-101%);
  transition: transform 360ms cubic-bezier(.65,.05,.36,1);
  z-index: -2;
  pointer-events: none;
}
.btn-ghost::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px;
  padding: 1.5px;
  background: var(--border);
  -webkit-mask:
    linear-gradient(#fff, #fff) content-box,
    linear-gradient(#fff, #fff);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff, #fff) content-box,
    linear-gradient(#fff, #fff);
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 360ms cubic-bezier(.65,.05,.36,1);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text) !important;
}
.btn-ghost:hover:not(:disabled)::before,
.btn-ghost:hover:not(:disabled)::after {
  transform: translateX(0) !important;
}

/* Disabled state */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Small adjustment — page-hero buttons need to be inline-flex anchors */
.page-hero .btn-primary,
.page-hero .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.page-hero .btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.page-hero .btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Spacing — make sure footer separates from last strip */
footer.site { border-top: 1px solid var(--border); }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
/* Skip-to-content link — first focusable element on every page.
   Visually hidden until keyboard-focused, then visible top-left. */
.skip-link {
  position: absolute;
  top: -100px; left: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 0 0 12px 0;
  box-shadow: 0 4px 14px -4px rgba(16,34,34,0.30);
  transition: top 200ms cubic-bezier(.2,.7,.2,1);
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #FFFFFF;
  outline-offset: -4px;
}

/* Reduced-motion preference — disable non-essential motion.
   Keeps transitions short and removes parallax/scaling/sliding. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Preserve open/close visibility transitions (still functional, just instant) */
  .mobile-drawer, .nav-backdrop, .dropdown-menu, .modal { transition: opacity 0.01ms !important; }
  /* Disable the pulse animation on active nav dot */
  .nav-a nav.primary > a.active::before { animation: none !important; }
  /* Disable sheen sweeps */
  .btn-primary::before, .nav-a .cta .btn::before, .mobile-burger::before, .switch .track::before, .dropdown-toggle::before { display: none !important; }
}

/* Visible focus rings — make every interactive element easy to spot
   in keyboard navigation. Per WCAG 2.4.7 (Focus Visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.mobile-burger:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* ============================================================
   SOCIAL ICONS — brand-matched, dynamic-language hover
   ============================================================
   Icons inject automatically into every [data-social-icons]
   container via site.js. At rest: muted ink color, soft surface
   ring. Hover: lift -2 px, accent color shift, accent halo, ring
   thickens to accent. Per the dynamic-language conventions in
   brand-guide.md → Section 5. */

.social-icons-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.social-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1),
              color 220ms cubic-bezier(.2, .7, .2, 1),
              border-color 220ms cubic-bezier(.2, .7, .2, 1),
              background 220ms,
              box-shadow 280ms cubic-bezier(.2, .7, .2, 1);
}
.social-icon-glyph {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.social-icon-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}
.social-icon:hover {
  transform: translateY(-2px);
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
    0 8px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.social-icon:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 80ms;
}
.social-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Variant with text labels (used on contact page) */
.social-icon-label {
  margin-left: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.social-icons-row[data-social-labels] .social-icon {
  width: auto;
  padding: 8px 16px 8px 12px;
  gap: 4px;
}

/* Footer placement — every cluster stacks vertically on the same
   centered axis. Brand on top → menu → phone CTA → social → legal.
   Locked 2026-05-17 per Mike: footer everywhere is centered. */
footer.site .top-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px;
  text-align: center;
}
footer.site .brand-cluster,
footer.site .menu,
footer.site .cta-cluster {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px;
  text-align: center;
}
footer.site .menu {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 18px;
}
footer.site .social-icons-row {
  align-items: center;
  justify-content: center;
}
/* Centre the bottom legal row too */
footer.site .bottom {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px;
}
/* Footer icons on the Mist/Night chrome — adjust border + colors */
footer.site .social-icon {
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  color: color-mix(in srgb, var(--text) 70%, transparent);
}
footer.site .social-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   EDIT MODE — in-browser content editing
   ============================================================
   Activated when ?edit=1 is in the URL. Click any heading or
   paragraph to edit it in place. Changes save to localStorage
   automatically. Export button downloads the current HTML with
   edits baked in. See site.js → editMode for details. */

/* Toolbar pinned to the bottom of the viewport */
.edit-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9998;
  background: #102222;
  color: #DCE6E7;
  border-top: 2px solid var(--accent);
  box-shadow: 0 -8px 24px -8px rgba(0,0,0,0.40);
  font-family: var(--font-body);
  padding: 14px 24px;
}
.edit-bar-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto;
}
.edit-bar-status {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.edit-bar-status strong { font-weight: 700; color: #5FCFC8; }
.edit-counter {
  font-size: 12px;
  color: #8395A0;
  margin-left: 8px;
}
.edit-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5FCFC8;
  box-shadow: 0 0 0 0 #5FCFC8;
  animation: editPulse 1.8s ease-in-out infinite;
}
@keyframes editPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 207, 200, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(95, 207, 200, 0); }
}
.edit-bar-actions {
  display: flex; gap: 10px;
}
.edit-btn {
  font-family: var(--font-body);
  font-size: 12.5px; font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
  color: #FFFFFF;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), filter 200ms;
}
.edit-btn:hover { transform: translateY(-1px); filter: saturate(1.1); }
.edit-btn.ghost {
  background: transparent;
  color: #8395A0;
  border: 1px solid #2C4358;
}
.edit-btn.ghost:hover {
  color: #5FCFC8;
  border-color: #5FCFC8;
}
.edit-bar-help {
  font-size: 11.5px;
  color: #8395A0;
  margin-top: 8px;
  max-width: 1240px;
  margin-left: auto; margin-right: auto;
  text-align: left;
}

/* Add body padding-bottom so the edit bar doesn't cover content */
html[data-edit-mode="on"] body { padding-bottom: 120px; }

/* Editable text — dashed outline at rest, solid accent on focus */
[data-edit-mode="on"] .edit-target {
  outline: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 4px;
  cursor: text;
  transition: outline-color 180ms, background 180ms;
  border-radius: 3px;
}
[data-edit-mode="on"] .edit-target:hover {
  outline-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
[data-edit-mode="on"] .edit-target:focus {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ============================================================
   AUDIT MODE — placeholder visualization
   ============================================================
   Activated when:
     · URL has ?audit=1 (one-time check), OR
     · localStorage.catalyst-audit is set to "on" (persistent), OR
     · You toggle via the console: catalyst.audit()
   Every element with data-placeholder is highlighted with a
   dashed magenta outline and a floating badge that shows the
   reason. A fixed banner top-right shows the per-page count.
   PURPOSE: makes pre-launch sign-off impossible to miss.
   ============================================================ */
body.audit-mode [data-placeholder] {
  outline: 2px dashed #D946A8 !important;
  outline-offset: 2px;
  position: relative;
  background: color-mix(in srgb, #D946A8 6%, transparent) !important;
}
body.audit-mode [data-placeholder]::after {
  content: "PLACEHOLDER: " attr(data-placeholder);
  position: absolute;
  top: -22px; left: 0;
  background: #D946A8;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 2000;
  pointer-events: none;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
body.audit-mode [data-mock="true"] {
  outline: 2px dashed #DBA763 !important;
  outline-offset: 2px;
  background: color-mix(in srgb, #DBA763 6%, transparent) !important;
  position: relative;
}
body.audit-mode [data-mock="true"]::after {
  content: "MOCK DATA — not wired to backend";
  position: absolute;
  top: -22px; left: 0;
  background: #DBA763;
  color: #102222;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 2000;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.audit-banner {
  display: none;
  position: fixed;
  top: 12px; right: 12px;
  background: #D946A8;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.35);
  z-index: 9999;
  cursor: pointer;
}
body.audit-mode .audit-banner { display: inline-flex; align-items: center; gap: 8px; }
.audit-banner::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  animation: auditPulse 1.6s ease-in-out infinite;
}
@keyframes auditPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
}

/* ============================================================
   LOGIN + PORTAL — auth-shell layouts
   ============================================================ */
.auth-shell {
  min-height: calc(100vh - 220px);
  display: grid;
  place-items: center;
  padding: 64px 24px;
  background:
    radial-gradient(700px 320px at 18% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%),
    radial-gradient(560px 280px at 92% 100%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%),
    var(--bg);
}
.auth-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 40px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px -30px color-mix(in srgb, var(--accent) 30%, transparent);
}
.auth-card h1 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.auth-card .sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.5;
}
.auth-tabs {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 22px;
  gap: 4px;
}
.auth-tab {
  flex: 1;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background 220ms, color 220ms;
}
.auth-tab.active {
  background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 50%, transparent);
}
.auth-card .field { margin-bottom: 16px; }
.auth-card .actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px;
}
.auth-card .actions .btn-primary {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-card .links {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  display: flex; justify-content: space-between; gap: 10px;
}
.auth-card .links a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-card .links a:hover { text-decoration: underline; }
.auth-card .scaffolding-note {
  margin-top: 18px;
  padding: 12px 14px;
  background: color-mix(in srgb, #DBA763 14%, transparent);
  border: 1px solid color-mix(in srgb, #DBA763 50%, transparent);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
.auth-card .scaffolding-note strong { color: #A87B24; }

/* Portal layout — two-column with sidebar */
.portal-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  min-height: calc(100vh - 220px);
  background: var(--bg);
}
@media (max-width: 920px) { .portal-shell { grid-template-columns: 1fr; } }

.portal-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 32px 20px;
}
@media (max-width: 920px) { .portal-sidebar { border-right: none; border-bottom: 1px solid var(--border); padding: 24px; } }
.portal-sidebar .who {
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 22px;
}
.portal-sidebar .who .nm {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}
.portal-sidebar .who .role {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.portal-sidebar .who .org {
  font-size: 12px; color: var(--muted);
  margin-top: 4px;
}
.portal-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.portal-sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  transition: background 200ms, color 200ms, padding-left 220ms cubic-bezier(.2,.7,.2,1);
}
.portal-sidebar nav a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); padding-left: 16px; }
.portal-sidebar nav a.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.portal-sidebar nav a svg { width: 16px; height: 16px; flex: 0 0 16px; }
.portal-sidebar nav .group-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  padding: 14px 12px 6px;
}

.portal-main {
  padding: 36px 40px 64px;
  overflow-x: auto;
}
@media (max-width: 720px) { .portal-main { padding: 24px; } }
.portal-main > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.portal-main > header h1 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.portal-main > header .sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* Portal cards & components */
.portal-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.portal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) {
  .portal-grid-2, .portal-grid-3 { grid-template-columns: 1fr; }
}

.portal-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.portal-card h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.portal-card .meta {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.portal-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.portal-stat .num {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}
.portal-stat .lbl {
  font-size: 12px;
  color: var(--muted);
}
.portal-stat .delta { font-size: 11px; font-weight: 600; color: var(--success); margin-top: 4px; }

.portal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.portal-table th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.portal-table td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.portal-table tr:last-child td { border-bottom: none; }
.portal-table tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.portal-table .status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}
.portal-table .status-pill.in-flight { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.portal-table .status-pill.delivered { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.portal-table .status-pill.pending { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.portal-table .status-pill.complete { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.portal-table .status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* Status timeline (client portal) */
.status-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 16px 0;
}
.status-timeline .node {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.status-timeline .node .dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: var(--muted);
}
.status-timeline .node.done .dot {
  background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
  border-color: transparent;
  color: #FFFFFF;
}
.status-timeline .node.current .dot {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.status-timeline .node .lbl {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-align: center;
  max-width: 100px;
}
.status-timeline .node.done .lbl, .status-timeline .node.current .lbl { color: var(--text); }
.status-timeline .bar {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 6px;
  margin-bottom: 22px;
  border-radius: 2px;
}
.status-timeline .bar.done {
  background: linear-gradient(90deg, #2A8B83, #5FCFC8);
}

/* Messages thread */
.msg-thread {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 14px;
}
.msg-bubble {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  max-width: 88%;
  font-size: 13.5px;
  line-height: 1.55;
}
.msg-bubble.from-staff {
  align-self: flex-start;
  background: var(--surface-2);
  border-color: var(--border);
}
.msg-bubble.from-client {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.msg-meta {
  display: flex; gap: 6px;
  font-size: 11px; color: var(--muted);
  margin-bottom: 4px;
}
.msg-meta strong { color: var(--text); }
.msg-composer {
  display: flex; gap: 10px; align-items: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.msg-composer textarea {
  flex: 1;
  min-height: 56px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  resize: vertical;
}
.msg-composer textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.msg-composer .btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}