/* ==========================================================================
   RestartIT for Business — standalone stylesheet

   Deliberately NOT an extension of css/styles.css. The business side has its
   own nav, its own footer and its own visual language, and loads only this
   file. The two stylesheets never appear on the same page, so nothing here
   can affect the residential site and nothing there can affect this.

   Where residential is warm paper and navy ink, this is the inverse: a deep
   navy ground, cream text, hairline copper rules instead of filled badges,
   sharper corners and wider editorial spacing.

   Class names for the nav are shared with the residential sheet on purpose —
   js/main.js drives both, and the two files are never loaded together.

   CONTRAST (against --ground #0B1424):
     --cream       #F4EFE9   16.2:1
     --steel       #9FB0CB    8.4:1
     --copper-300  #C79973    7.3:1
     white on --copper-ink #905E3A   5.5:1   (button fill)
   ========================================================================== */

:root {
  /* Brand */
  --navy:        #18253F;
  --navy-deep:   #0F1A2E;
  --cream:       #F4EFE9;
  --cream-dim:   #D8D2CA;
  --copper:      #A8714A;
  --copper-ink:  #905E3A;
  --copper-700:  #7A4E2F;
  --copper-300:  #C79973;
  --steel:       #9FB0CB;
  --steel-dim:   #8593AE;

  /* Semantic */
  --ground:      #0B1424;
  --panel:       #0E1A2E;
  --panel-2:     #12203A;
  --text:        var(--cream);
  --text-muted:  var(--steel);
  --hairline:        rgba(199, 153, 115, 0.26);
  --hairline-strong: rgba(199, 153, 115, 0.55);
  --rule:        rgba(159, 176, 203, 0.12);
  --rule-strong: rgba(159, 176, 203, 0.24);

  /* Typography */
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1140px;
  --radius:    6px;
  --shadow:    0 20px 46px -22px rgba(0, 0, 0, 0.7);
  --header-h:  72px;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--font-body);
  background: var(--ground);
  color: var(--text);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--copper-300); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--cream); }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.16; letter-spacing: -0.02em; }
:focus-visible { outline: 3px solid var(--copper-300); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--copper-ink); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; line-height: 1;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.18s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--copper-ink); color: #fff; box-shadow: 0 12px 26px -14px rgba(168, 113, 74, 0.95); }
.btn--primary:hover { background: var(--copper-700); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--cream); border-color: var(--rule-strong); }
.btn--ghost:hover { color: var(--cream); border-color: var(--copper-300); background: rgba(255, 255, 255, 0.04); transform: translateY(-2px); }
.btn--lg { padding: 17px 32px; font-size: 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 20, 36, 0.88);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav { position: relative; display: flex; align-items: center; height: var(--header-h); gap: 20px; }
.nav__brand { display: inline-flex; align-items: center; gap: 14px; margin-right: auto; flex: none; }
/* width:auto and max-width:none keep the lockup from being squashed when the
   fixed height meets a narrower container. */
.nav__brand img { height: 46px; width: auto; max-width: none; flex: none; }
/* The division wordmark, so the header does not read as the residential site.
   One line, moderate tracking: stacked and widely-tracked read as jumbled. */
.nav__brand .division {
  font-family: var(--font-head); font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper-300);
  white-space: nowrap; line-height: 1;
  padding-left: 15px; border-left: 1px solid var(--hairline-strong);
}
@media (max-width: 560px) { .nav__brand .division { display: none; } }
.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a {
  position: relative;
  font-family: var(--font-head); font-weight: 500; font-size: 0.94rem; color: var(--steel);
  padding: 9px 13px; transition: color 0.2s var(--ease);
  /* Labels must never break mid-phrase — that is what read as "stacked" */
  white-space: nowrap;
}
.nav__links a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 1px;
  background: var(--copper-300); transform: scaleX(0); transition: transform 0.24s var(--ease);
}
.nav__links a:hover { color: var(--cream); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--cream); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { margin-left: 10px; display: flex; align-items: center; gap: 14px; }
/* Route back to the residential site, sitting past the CTA at the far edge —
   the mirror of how "For Business" sits on the residential nav, so the door
   between the two divisions is in the same place on both. */
.nav__cta .is-residential {
  font-family: var(--font-head); font-weight: 600; font-size: 0.98rem;
  color: var(--copper-300); white-space: nowrap;
  padding: 9px 4px 9px 16px; border-left: 1px solid var(--rule-strong);
}
.nav__cta .is-residential:hover { color: var(--cream); }
.nav__toggle {
  display: none; background: transparent; border: 1px solid var(--rule-strong);
  width: 44px; height: 44px; border-radius: 6px; cursor: pointer; padding: 0;
  color: var(--cream); align-items: center; justify-content: center;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav[data-open="true"] .nav__toggle .icon-open { display: none; }
.nav[data-open="true"] .nav__toggle .icon-close { display: block; }

/* 1150, not 1000: brand + wordmark + five links + the CTA button need the room,
   and below this they start colliding rather than merely getting tight. */
@media (max-width: 1150px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--panel); border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 18px clamp(20px, 5vw, 40px) 26px;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
    box-shadow: var(--shadow);
  }
  .nav[data-open="true"] .nav__menu { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__links a { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--rule); }
  .nav__links a::after { display: none; }
  .nav__cta { margin: 14px 0 0; flex-direction: column; align-items: stretch; gap: 10px; }
  .nav__cta .btn { width: 100%; }
  .nav__cta .is-residential { border-left: 0; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 13px 16px; text-align: center; }
}

/* ---------- Shared section furniture ---------- */
.biz-label {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-head); font-size: 0.73rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper-300);
  margin-bottom: 18px;
}
.biz-label .num { font-size: 0.95rem; letter-spacing: 0.06em; opacity: 0.75; }
.biz-section { padding-block: clamp(62px, 9vw, 120px); border-top: 1px solid var(--rule); }
.biz-section h2 { font-size: clamp(1.8rem, 1.15rem + 2.7vw, 2.75rem); }
.biz-section > .container > p.lede { color: var(--steel); font-size: 1.08rem; max-width: 62ch; margin-top: 16px; }

/* ---------- Hero ---------- */
.biz-hero { position: relative; overflow: hidden; padding-block: clamp(66px, 11vw, 134px); border-top: 1px solid var(--hairline-strong); }
.biz-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(780px 430px at 88% -10%, rgba(199, 153, 115, 0.17), transparent 62%),
    linear-gradient(168deg, var(--panel) 0%, var(--ground) 62%, #080F1C 100%);
}
.biz-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.55;
  background-image: linear-gradient(rgba(159, 176, 203, 0.055) 1px, transparent 1px);
  background-size: 100% 32px;
  mask-image: linear-gradient(180deg, #000, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
}
.biz-hero__grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .biz-hero__grid { grid-template-columns: 1fr; } }
.biz-hero h1 { font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4rem); letter-spacing: -0.035em; line-height: 1.06; }
.biz-hero h1 .accent { color: var(--copper-300); }
.biz-hero__lead { color: var(--steel); font-size: clamp(1.06rem, 1rem + 0.55vw, 1.3rem); max-width: 54ch; margin-top: 22px; }
.biz-hero .btn-row { margin-top: 34px; }
.biz-hero__mark { justify-self: center; width: min(210px, 60vw); }
.biz-hero__mark img {
  width: 100%; height: auto; border-radius: 50%;
  border: 1px solid var(--hairline-strong); padding: 14px; background: rgba(255, 255, 255, 0.02);
}
@media (max-width: 900px) { .biz-hero__mark { display: none; } }
.biz-hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px;
  padding-top: 22px; border-top: 1px solid var(--rule);
  color: var(--steel); font-size: 0.92rem;
}
.biz-hero__meta span { display: inline-flex; align-items: center; gap: 9px; }
.biz-hero__meta svg { width: 16px; height: 16px; color: var(--copper-300); flex: none; }

/* ---------- Asymmetric label / content split ---------- */
.biz-split { display: grid; grid-template-columns: 0.32fr 0.68fr; gap: clamp(24px, 5vw, 60px); }
@media (max-width: 860px) { .biz-split { grid-template-columns: 1fr; gap: 8px; } }
.biz-split__body p { color: var(--steel); font-size: 1.06rem; }
.biz-split__body p + p { margin-top: 18px; }
.biz-split__body strong { color: var(--cream); font-weight: 600; }

/* ---------- Hairline point list ---------- */
.biz-points { display: grid; gap: 0; margin-top: 34px; }
.biz-points li { display: grid; grid-template-columns: 26px 1fr; gap: 16px; align-items: start; padding: 20px 0; border-top: 1px solid var(--rule); }
.biz-points li:last-child { border-bottom: 1px solid var(--rule); }
.biz-points svg { width: 20px; height: 20px; color: var(--copper-300); margin-top: 3px; }
.biz-points h3 { font-size: 1.04rem; margin-bottom: 4px; }
.biz-points p { color: var(--steel); font-size: 0.96rem; }

/* ==========================================================================
   BUILD TIERS — flip cards

   The front carries the decision-making information (tier, name, price, who
   it suits). The back carries the detail. Clicking flips the card.

   Equal heights come for free: both faces sit in the SAME grid cell, so a
   card is as tall as its taller face, and the row stretches every card to
   the tallest of the three. No fixed heights to keep in sync.

   Progressive enhancement, same contract as .js-reveal: without .js-flip on
   <html> both faces simply stack and everything is readable. The flip is
   only switched on once JS has confirmed it is running, so pricing detail is
   never trapped behind a script that failed to load.
   ========================================================================== */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; align-items: stretch; }
@media (max-width: 940px) { .tiers { grid-template-columns: 1fr; max-width: 640px; } }

.tier { position: relative; }
.tier__inner { display: grid; height: 100%; }
.tier__face {
  grid-area: 1 / 1;
  display: flex; flex-direction: column;
  padding: 30px 26px 26px;
  background: linear-gradient(180deg, var(--panel), rgba(11, 20, 36, 0.6));
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  transition: border-color 0.22s var(--ease);
}
.tier--rec .tier__face { border-color: var(--hairline-strong); background: linear-gradient(180deg, var(--panel-2), rgba(11, 20, 36, 0.7)); }
.tier:hover .tier__face { border-color: var(--hairline-strong); }

/* --- flip mechanics, only once JS is confirmed --- */
.js-flip .tier { perspective: 1800px; }
.js-flip .tier__inner {
  transform-style: preserve-3d;
  transition: transform 0.65s var(--ease);
}
.js-flip .tier__face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.js-flip .tier__back { transform: rotateY(180deg); }
.js-flip .tier.is-flipped .tier__inner { transform: rotateY(180deg); }

/* Sits OUTSIDE .tier__inner and out of the document flow, so it adds no height
   to the card and needs no counterweight on the tiers that lack it. It also
   stays put while the card flips, because it is not inside the preserve-3d
   context. */
.tier__badge {
  position: absolute; top: -11px; left: 22px; z-index: 3;
  font-family: var(--font-head); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ground); background: var(--copper-300);
  border-radius: 999px; padding: 5px 13px;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.9);
}
.tier__num { font-family: var(--font-head); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.2em; color: var(--copper-300); }
.tier h3 { font-size: 1.35rem; margin-top: 8px; }
.tier__for { color: var(--steel); font-size: 0.95rem; margin-top: 12px; }

/* The at-a-glance facts on the front: what you physically get. */
.tier__specs { display: grid; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.tier__specs li { display: grid; grid-template-columns: 16px 1fr; gap: 11px; align-items: start; color: var(--cream-dim); font-size: 0.9rem; }
.tier__specs svg { width: 14px; height: 14px; color: var(--copper-300); margin-top: 4px; }

.tier__price { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-top: 14px; }
.tier__price .amount { font-family: var(--font-head); font-weight: 700; font-size: 1.85rem; color: var(--cream); letter-spacing: -0.035em; line-height: 1; }

/* The flip control. margin-top:auto pins it to the bottom of whichever face
   it is on, so all three line up regardless of blurb length. */
.tier__flip {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: 1px solid var(--hairline); border-radius: 999px;
  padding: 11px 18px; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; color: var(--copper-300);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.tier__flip:hover { border-color: var(--hairline-strong); background: rgba(199, 153, 115, 0.09); color: var(--cream); }
.tier__flip svg { width: 15px; height: 15px; flex: none; transition: transform 0.22s var(--ease); }
/* Forward control gets the copper edge; the return control is quieter */
.tier__flip--front { border-color: var(--hairline-strong); }
.tier__flip--front:hover svg { transform: translateX(3px); }
.tier__flip--back { color: var(--steel); }
.tier__flip--back svg { transform: scaleX(-1); }
.tier__flip--back:hover svg { transform: scaleX(-1) translateX(3px); }

.tier__back h4 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper-300); margin: 16px 0 12px; }
.tier__back h4:first-of-type { margin-top: 18px; }
.tier__back ul { display: grid; gap: 10px; }
.tier__back li { display: grid; grid-template-columns: 16px 1fr; gap: 11px; align-items: start; color: var(--cream-dim); font-size: 0.9rem; }
.tier__back li svg { width: 14px; height: 14px; color: var(--copper-300); margin-top: 4px; }
/* Technicals read as supporting detail, not as more selling */
.tier__back .tier__tech li { color: var(--steel); font-size: 0.86rem; }
.tier__note { color: var(--steel); font-size: 0.86rem; margin: 18px 0 20px; padding-top: 14px; border-top: 1px solid var(--rule); }

/* No-JS and reduced-motion both fall back to showing the two faces stacked
   rather than rotating. Nothing becomes unreachable either way. */
.tier__back { margin-top: 14px; }
.js-flip .tier__back { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .js-flip .tier { perspective: none; }
  .js-flip .tier__inner { transform-style: flat; transition: none; }
  .js-flip .tier__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .js-flip .tier__back { transform: none; }
  .js-flip .tier.is-flipped .tier__inner { transform: none; }
  .js-flip .tier:not(.is-flipped) .tier__back { visibility: hidden; }
  .js-flip .tier.is-flipped .tier__front { visibility: hidden; }
}

/* ==========================================================================
   CARE PLAN — the recurring-revenue product, given the most weight on the page
   ========================================================================== */
.care {
  margin-top: 26px; border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  background:
    radial-gradient(700px 300px at 18% -20%, rgba(199, 153, 115, 0.14), transparent 66%),
    linear-gradient(140deg, var(--panel-2), rgba(11, 20, 36, 0.5));
  padding: clamp(28px, 4.5vw, 52px);
}
.care__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; }
.care__head h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
.care__tag {
  font-family: var(--font-head); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ground); background: var(--copper-300);
  border-radius: 999px; padding: 5px 12px;
}
.care__price {
  display: flex; align-items: baseline; gap: 10px; margin-top: 18px;
}
.care__price .amount { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); color: var(--cream); letter-spacing: -0.035em; }
.care__price .per { color: var(--steel); font-size: 1rem; }
.care__lede { color: var(--cream-dim); font-size: 1.08rem; margin-top: 18px; max-width: 64ch; }
.care__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 32px; margin-top: 36px; }
@media (max-width: 860px) { .care__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .care__grid { grid-template-columns: 1fr; } }
.care__grid > div { border-top: 1px solid var(--hairline); padding-top: 18px; }
.care__grid h4 { font-size: 1rem; font-weight: 600; margin-bottom: 7px; display: flex; align-items: center; gap: 9px; }
.care__grid h4 svg { width: 17px; height: 17px; color: var(--copper-300); flex: none; }
.care__grid p { color: var(--steel); font-size: 0.93rem; }
.care__foot { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; justify-content: space-between; }
.care__foot p { color: var(--steel); font-size: 0.93rem; max-width: 52ch; }

/* ---------- Hosting only — deliberately the small, cautionary option ---------- */
.hosting-only {
  margin-top: 20px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: rgba(14, 26, 46, 0.5); padding: 24px 26px;
  display: grid; grid-template-columns: 1fr auto; gap: 14px 28px; align-items: center;
}
@media (max-width: 700px) { .hosting-only { grid-template-columns: 1fr; } }
.hosting-only h4 { font-size: 1.02rem; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hosting-only .amount { font-family: var(--font-head); font-weight: 700; color: var(--cream); font-size: 1.15rem; }
.hosting-only p { color: var(--steel); font-size: 0.9rem; margin-top: 8px; max-width: 62ch; }
.hosting-only .warn {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
  color: var(--cream-dim); font-size: 0.88rem;
  border-left: 2px solid var(--copper); padding-left: 13px;
}
.hosting-only .warn svg { width: 16px; height: 16px; color: var(--copper-300); flex: none; margin-top: 3px; }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 46px; counter-reset: step; }
@media (max-width: 940px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.steps li { position: relative; padding-top: 30px; border-top: 1px solid var(--hairline); }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: -0.85em; left: 0; padding-right: 12px;
  background: var(--ground); font-family: var(--font-head); font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.12em; color: var(--copper-300);
}
.steps h3 { font-size: 1.08rem; margin-bottom: 8px; }
.steps p { color: var(--steel); font-size: 0.95rem; }

/* ==========================================================================
   PORTFOLIO — demo builds, not client work
   ========================================================================== */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; }
@media (max-width: 940px) { .work { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .work { grid-template-columns: 1fr; } }
.work__item {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), rgba(11, 20, 36, 0.6));
  overflow: hidden; transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.work__item:hover { border-color: var(--hairline-strong); transform: translateY(-3px); }
/* Placeholder frame stands in for a screenshot until a demo is actually built */
.work__shot {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(199, 153, 115, 0.07), transparent 60%),
    var(--ground);
  border-bottom: 1px solid var(--rule); color: var(--steel-dim);
}
.work__shot svg { width: 38px; height: 38px; opacity: 0.55; }
.work__shot img { width: 100%; height: 100%; object-fit: cover; }
.work__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.work__type { font-family: var(--font-head); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper-300); }
.work__item h3 { font-size: 1.12rem; }
.work__item p { color: var(--steel); font-size: 0.93rem; }
.work__link { margin-top: auto; padding-top: 14px; font-family: var(--font-head); font-weight: 600; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 8px; }
.work__link svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
a.work__link:hover svg { transform: translate(2px, -2px); }
/* Kept for slots added before their demo is live */
.work__item.is-pending .work__link { color: var(--steel-dim); }
.work__note { color: var(--steel); font-size: 0.93rem; margin-top: 26px; padding-left: 14px; border-left: 2px solid var(--hairline-strong); max-width: 68ch; }

/* ---------- Quote form ---------- */
.quote-form {
  margin-top: 38px; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: linear-gradient(135deg, var(--panel), rgba(11, 20, 36, 0.4));
  padding: clamp(24px, 4vw, 44px);
}
.quote-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
@media (max-width: 700px) { .quote-form__grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--cream); }
.field .hint { color: var(--steel); font-size: 0.85rem; }
.field .req { color: var(--copper-300); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--cream);
  background: rgba(11, 20, 36, 0.65); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: 13px 15px; width: 100%;
  transition: border-color 0.2s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(159, 176, 203, 0.4); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--copper-300); }
.field input::placeholder, .field textarea::placeholder { color: var(--steel-dim); }
/* Native select arrow is invisible on a dark ground, so draw our own */
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C79973' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.field select option { background: var(--ground); color: var(--cream); }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.radio-row label { display: inline-flex; align-items: center; gap: 9px; font-weight: 400; font-family: var(--font-body); color: var(--cream-dim); }
.radio-row input[type="radio"] { width: auto; accent-color: var(--copper-300); }
/* Honeypot: off-screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 28px; }
.quote-form__actions .privacy { color: var(--steel); font-size: 0.88rem; max-width: 46ch; }

/* ---------- Thanks ---------- */
.thanks { max-width: 640px; }
.thanks__mark {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--hairline-strong); color: var(--copper-300); margin-bottom: 26px;
}
.thanks__mark svg { width: 28px; height: 28px; }
.thanks h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3rem); }
.thanks__lead { color: var(--steel); font-size: 1.12rem; margin-top: 18px; }
.thanks__note { color: var(--steel); font-size: 0.95rem; margin-top: 16px; }
.thanks .btn-row { margin-top: 32px; }

/* ---------- Closing CTA ---------- */
.biz-cta {
  border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  background:
    radial-gradient(620px 260px at 50% -30%, rgba(199, 153, 115, 0.18), transparent 68%),
    linear-gradient(135deg, var(--panel), rgba(11, 20, 36, 0.5));
  padding: clamp(34px, 6vw, 66px); text-align: center;
}
.biz-cta h2 { font-size: clamp(1.6rem, 1.15rem + 2vw, 2.4rem); }
.biz-cta p { color: var(--steel); max-width: 56ch; margin: 16px auto 30px; }
.biz-cta .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: #080F1C; border-top: 1px solid var(--hairline); padding-block: 56px 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }
.footer-brand img { height: 46px; width: auto; max-width: none; margin-bottom: 16px; }
.footer-brand .division {
  font-family: var(--font-head); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper-300); margin-bottom: 14px;
}
.footer-brand p { color: var(--steel); font-size: 0.94rem; max-width: 38ch; }
.footer-col h4 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-dim); margin-bottom: 12px; font-family: var(--font-head); }
.footer-col ul { display: grid; gap: 2px; }
.footer-col a, .footer-col span { display: inline-block; padding-block: 10px; color: var(--cream-dim); font-size: 0.95rem; }
.footer-col a:hover { color: var(--copper-300); }
.footer-col .muted { color: var(--steel-dim); }
.footer-bottom {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center;
  color: var(--steel-dim); font-size: 0.86rem;
}
/* The one route back to the residential site from the footer */
.footer-bottom .cross-link { color: var(--steel); display: inline-flex; align-items: center; gap: 8px; }
.footer-bottom .cross-link:hover { color: var(--copper-300); }
.footer-bottom .cross-link svg { width: 15px; height: 15px; }

/* ---------- Scroll reveal ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js-reveal .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js-reveal .reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}