/* Tenant marketing-site design system (docs/tenant-websites.md).

   The bones are windowblasters.com's — the layouts Paul already proved —
   but every brand decision is ONE token: --accent, set per company from
   cfg.brand.accent at the top of each page (inline, so the stylesheet
   itself is company-free). Everything colored derives from it with
   color-mix on neutral ink and paper, so any reasonable brand color
   produces a credible site with no per-company CSS. */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-var.woff2") format("woff2");
  font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/PublicSans-var.woff2") format("woff2");
  font-weight: 300 800; font-display: swap; }

:root {
  /* --accent arrives inline on <html> from the profile; this is only the
     fallback if a page ever ships without it */
  --accent: #1B6ACB;
  --accent-down: color-mix(in srgb, var(--accent) 84%, #000);
  --accent-deep: color-mix(in srgb, var(--accent) 55%, #0A1225);   /* footer */
  --accent-ink: color-mix(in srgb, var(--accent) 30%, #101828);    /* headings */
  --tint: color-mix(in srgb, var(--accent) 7%, #F4F6F8);           /* washed sections */
  --tint-line: color-mix(in srgb, var(--accent) 14%, #E3E7EC);
  --ink: #131C2B;
  --body-c: #3E4A5C;
  --slate: #5F6E82;
  --green: #1B8A5A;
  --paper: #F7F8F6;
  --card: #FFFFFF;
  --line: #E4E8EE;
  --r: 14px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 28px -12px rgba(16,24,40,.14);
  --wrap: 1180px;
  --sp: clamp(3.5rem, 9vw, 6.5rem);
  /* THE LOOK (docs/tenant-website-control.md §5). A company picks a font
     pairing and a hero treatment from a short list designed here; the
     pairing arrives as these tokens, inline beside --accent, so the
     stylesheet stays company-free. These are the "modern" defaults. */
  --font-head: "Archivo", sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --head-w: 750;
  --head-track: -0.025em;
  --h1-track: -0.032em;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font: 400 17px/1.65 var(--font-body);
  color: var(--body-c); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
p a { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--accent-ink);
  letter-spacing: var(--head-track); line-height: 1.06; font-weight: var(--head-w); }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); letter-spacing: var(--h1-track); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.22rem; line-height: 1.25; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.eyebrow { font-family: var(--font-head); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.lede { font-size: clamp(1.05rem, 1.9vw, 1.22rem); line-height: 1.6; max-width: 42em; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

.skip { position: absolute; left: -999px; top: 0; background: var(--accent-ink); color: #fff;
  padding: .6rem 1rem; z-index: 99; }
.skip:focus { left: 0; }

/* ---- buttons -------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 640 1rem/1 var(--font-head); letter-spacing: -0.01em;
  padding: .95rem 1.55rem; border-radius: 11px; border: 0; cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-solid { background: var(--accent); color: #fff;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-solid:hover { background: var(--accent-down); }
.btn-ghost { background: transparent; color: var(--accent-ink);
  box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
.btn-sm { padding: .62rem 1.05rem; font-size: .92rem; }
.btn-lg { padding: 1.1rem 1.9rem; font-size: 1.08rem; }

/* ---- header --------------------------------------------------------- */
.hd { position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.hd-in { display: flex; align-items: center; gap: 2rem; height: 68px; }
.hd-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-head);
  font-size: 1.18rem; font-weight: 780; color: var(--accent-ink); letter-spacing: -0.02em; }
.hd-nav { display: flex; gap: 1.7rem; margin-left: auto; }
.hd-nav a { font: 560 .97rem/1 var(--font-body); color: var(--ink);
  padding: .5rem 0; border-bottom: 2px solid transparent; }
.hd-nav a:hover { color: var(--accent); }
.hd-nav a[aria-current] { border-bottom-color: var(--accent); color: var(--accent); }
.hd-cta { display: flex; gap: .6rem; }
.hd-burger { display: none; margin-left: auto; background: none; border: 0; padding: .55rem;
  cursor: pointer; }
.hd-burger span { display: block; width: 22px; height: 2.5px; background: var(--ink);
  border-radius: 2px; margin: 4.5px 0; transition: transform .18s ease, opacity .18s ease; }
.hd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hd-mnav { display: none; }
/* the hidden attribute always wins over a display rule on the class */
[hidden] { display: none !important; }

@media (max-width: 880px) {
  .hd-nav, .hd-cta { display: none; }
  .hd-burger { display: block; }
  .hd-mnav { display: grid; gap: .25rem; padding: .8rem 1.2rem 1.4rem;
    border-bottom: 1px solid var(--line); background: var(--paper); }
  .hd-mnav[hidden] { display: none; }
  .hd-mnav a { font: 600 1.15rem/1 var(--font-head); color: var(--ink); padding: .8rem 0; }
  .hd-mnav .btn { margin-top: .5rem; }
}

/* ---- hero ----------------------------------------------------------- */
.hero { background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: var(--sp); }
.hero .lede { margin: 1.3rem 0 2.1rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.6rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line); }
.hero-trust b { display: block; font-family: var(--font-head); font-size: 1.25rem;
  color: var(--accent-ink); letter-spacing: -0.02em; }
.hero-trust span { font-size: .84rem; color: var(--slate); }

/* The hero's visual column: the company's photo when it has picked one,
   its brand color standing in until then — with the LIVE cards (next
   opening, most popular plan) floating on either. */
.hero-vis { position: relative; }
.hv-panel, .hv-photo { border-radius: 20px; aspect-ratio: 4 / 5; overflow: hidden;
  position: relative;
  box-shadow: 0 24px 56px -22px color-mix(in srgb, var(--accent) 45%, rgba(16,24,40,.4)); }
.hv-panel { background:
  radial-gradient(120% 90% at 85% 8%, color-mix(in srgb, #fff 26%, var(--accent)) 0%, transparent 45%),
  linear-gradient(160deg, var(--accent) 12%, var(--accent-down) 68%, var(--accent-deep) 100%); }
.hv-photo img { width: 100%; height: 100%; object-fit: cover; }
.hv-mono { position: absolute; right: -0.06em; bottom: -0.28em;
  font: 900 11rem/1 var(--font-head); color: #fff; opacity: .13;
  letter-spacing: -0.04em; user-select: none; }
.hv-city { position: absolute; top: 1.1rem; left: 1.2rem; color: #fff;
  font: 700 .74rem/1 var(--font-head); letter-spacing: .12em;
  text-transform: uppercase; opacity: .85; }
.hv-card { position: absolute; background: var(--card); border-radius: 13px;
  box-shadow: 0 2px 4px rgba(16,24,40,.08), 0 18px 44px -14px rgba(16,24,40,.35);
  padding: .9rem 1.15rem .85rem; display: grid; gap: .15rem; min-width: 10.5rem; }
.hv-card[hidden] { display: none; }
.hv-day { top: 9%; left: -9%; }
.hv-plan { bottom: 13%; right: -7%; }
.hv-kicker { font: 700 .68rem/1 var(--font-head); letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); }
.hv-big { font: 780 1.3rem/1.1 var(--font-head); color: var(--accent-ink);
  letter-spacing: -0.02em; }
.hv-sub { font-size: .8rem; color: var(--slate); }
.hv-chip { position: absolute; bottom: -1rem; left: 8%; background: var(--green);
  color: #fff; font: 700 .78rem/1 var(--font-head); letter-spacing: .04em;
  padding: .55rem .85rem; border-radius: 999px;
  box-shadow: 0 10px 26px -10px rgba(27,138,90,.6); }

@media (max-width: 880px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-vis { order: -1; margin-top: 1.6rem; }
  .hv-panel, .hv-photo { aspect-ratio: 16 / 10; }
  .hv-mono { font-size: 7.5rem; }
  .hv-day { left: 3%; }
  .hv-plan { right: 3%; }
  .hero-ctas .btn { flex: 1 1 100%; }
}

/* ---- the hero's other two looks --------------------------------------
   The default above is "split": words left, the photo or brand panel
   right. "photo" puts the company's photograph behind the words, full
   width, with the brand gradient standing in when no photo is picked.
   "panel" drops the picture altogether: a quiet tinted band, centred.
   In both, the LIVE cards keep their place — as a row under the words
   instead of floating on a picture that is not there. */
.hero-live { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 2.2rem; }
.hero-live .hv-card, .hero-live .hv-chip { position: static; }
.hero-live .hv-card { min-width: 0; }

.hero--photo { position: relative; background: var(--accent-deep); }
.hero--photo .hero-bg { position: absolute; inset: 0; overflow: hidden; background:
  radial-gradient(120% 90% at 85% 8%, color-mix(in srgb, #fff 26%, var(--accent)) 0%, transparent 45%),
  linear-gradient(160deg, var(--accent) 12%, var(--accent-down) 68%, var(--accent-deep) 100%); }
.hero--photo .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero--photo .hero-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,18,37,.82) 0%, rgba(10,18,37,.62) 50%, rgba(10,18,37,.3) 100%); }
/* the backdrop is INSIDE the grid (it is the hero's photo slot), so the
   grid itself stays unpositioned — the backdrop fills the section — and
   the words and the live row are lifted above it instead */
.hero--photo .hero-in { grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.hero--photo .hero-in > div:first-child { max-width: 40em; position: relative; z-index: 1; }
.hero--photo .hero-live { position: relative; z-index: 1; }
.hero--photo h1, .hero--photo .lede, .hero--photo .hero-trust b, .hero--photo .hero-trust span { color: #fff; }
.hero--photo .eyebrow { color: rgba(255,255,255,.78); }
.hero--photo .lede { color: rgba(255,255,255,.88); }
.hero--photo .hero-trust { border-top-color: rgba(255,255,255,.22); }
.hero--photo .hero-trust span { color: rgba(255,255,255,.68); }
.hero--photo .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.72); }
.hero--photo .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.hero--photo .btn-solid { box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); }

.hero--panel { background:
  radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 14%, #fff) 0%, transparent 60%),
  var(--tint); }
.hero--panel .hero-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hero--panel .hero-in > div:first-child { max-width: 44em; }
.hero--panel .lede { margin-inline: auto; }
.hero--panel .hero-ctas, .hero--panel .hero-trust, .hero--panel .hero-live { justify-content: center; }
.hero--panel .hero-trust div { text-align: center; }

@media (max-width: 880px) {
  .hero--photo .hero-live, .hero--panel .hero-live { order: 0; margin-top: 1.6rem; }
  .hero--photo .hero-bg::after { background: linear-gradient(180deg, rgba(10,18,37,.78) 0%, rgba(10,18,37,.6) 100%); }
}

/* ---- sections ------------------------------------------------------- */
.sec { padding-top: var(--sp); padding-bottom: var(--sp); }
.sec-wash { background: var(--tint); }
.sec-head { max-width: 46em; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.sec-head.center { margin-inline: auto; }

/* ---- service cards -------------------------------------------------- */
/* ---- the service menu: one photo per category, a price list ---------- */
.svc-menu { display: grid; }
.menu-cat { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.2rem 2rem;
  align-items: center; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.menu-cat:first-child { border-top: 0; padding-top: .3rem; }
.menu-photo--tile { display: grid; place-items: center; box-shadow: none;
  background: linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--accent) 12%, var(--tint))); }
.menu-photo--tile b { font: 800 3.2rem/1 var(--font-head); color: var(--accent-ink); opacity: .14; letter-spacing: -.04em; }
.menu-photo { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--tint);
  box-shadow: var(--shadow); align-self: center; }
.menu-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-cat-name { font: 700 .76rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); margin: .2rem 0 .4rem; }
.menu-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1.4rem; align-items: center;
  padding: 1.05rem .7rem; margin: 0 -.7rem; border-bottom: 1px solid var(--line); border-radius: 14px;
  color: var(--accent-ink); transition: background .12s ease; }
.menu-row:last-child { border-bottom: 0; }
.menu-row:hover { background: var(--tint); }
.menu-main { display: grid; gap: .22rem; min-width: 0; }
.menu-main b { font: 700 1.08rem/1.25 var(--font-head); letter-spacing: -.01em; }
.menu-main small { font-size: .9rem; line-height: 1.45; color: var(--body-c); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-price { display: grid; gap: .2rem; justify-items: end; text-align: right; white-space: nowrap;
  font: 750 1.06rem/1.1 var(--font-head); color: var(--accent-ink); }
.menu-price small { font: 500 .68rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate); }
.menu-price--free { font-size: .95rem; }
.menu-price--door small { color: var(--accent); font-weight: 700; }
.menu-price--door small::after { content: " →"; }
.menu-row.skel { height: 58px; background: var(--tint); border: 0; }
@media (max-width: 760px) {
  .menu-cat { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding: 1.4rem 0; }
  .menu-photo { aspect-ratio: 5 / 2; border-radius: 14px; }
  .menu-photo--tile { display: none; }
  .menu-price { white-space: normal; max-width: 9rem; }
  .menu-price--free { font-size: .88rem; }
  .menu-row { padding: .9rem .45rem; margin: 0 -.45rem; gap: .5rem .9rem; }
  .menu-main b { font-size: 1rem; }
  .menu-main small { font-size: .86rem; }
  .menu-price { font-size: .98rem; }
}

.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 1.15rem; }
.svc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem 1.5rem 1.4rem; box-shadow: var(--shadow); display: flex;
  flex-direction: column; gap: .55rem; transition: transform .15s ease, box-shadow .15s ease; }
.svc:hover { transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 18px 44px -14px rgba(16,24,40,.2); }
.svc-cat { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); }
/* three lines then quiet — a long price-book description must never
   bloat one card past its neighbours (found live on WB's own site) */
.svc p:has(+ .svc-list) { flex: 0; -webkit-line-clamp: 2; }
.svc .svc-list { flex: 1; margin: .1rem 0 0; padding-left: 1.05rem; font-size: .92rem;
  color: var(--body-c); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; }
.svc .svc-list li { margin: .1rem 0; }
.svc p { font-size: .95rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }
.svc-price { font-family: var(--font-head); color: var(--accent-ink); font-weight: 750;
  font-size: 1.15rem; }
.svc-price small { font-family: var(--font-body); font-weight: 500;
  color: var(--slate); font-size: .82rem; letter-spacing: 0; }
.svc-cta { margin-top: .45rem; font: 640 .95rem/1 var(--font-head); color: var(--accent); }
.svc-cta::after { content: " →"; }
.svc-img { display: block; margin: -1.6rem -1.5rem .55rem; aspect-ratio: 3 / 2;
  overflow: hidden; border-radius: var(--r) var(--r) 0 0; background: var(--tint); }
.svc-img img { width: 100%; height: 100%; object-fit: cover; }
.svc-cat-head { grid-column: 1 / -1; margin-top: 1.2rem; }
.svc-cat-head:first-child { margin-top: 0; }
.svc-cat-head h3 { font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); font-weight: 700; }

/* ---- steps ---------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; counter-reset: step; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.7rem 1.5rem; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero);
  font: 800 .95rem/1 var(--font-head); color: var(--accent); display: block;
  margin-bottom: .8rem; letter-spacing: .06em; }
.step h3 { margin-bottom: .4rem; }
.step p { font-size: .95rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---- plan cards ------------------------------------------------------ */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.15rem; max-width: 900px; }
@media (min-width: 1080px) {
  .plans-layout { display: grid; grid-template-columns: minmax(330px, 380px) 1fr;
    gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
  .plans-layout .cfg { position: sticky; top: 88px; margin-bottom: 0; }
  .plans-layout .cfg .pill { padding: .55rem .8rem; }
  .plans-layout .plan-grid { max-width: none; }
}
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem 1.5rem; box-shadow: var(--shadow); }
.plan--hot { position: relative; border: 2px solid var(--accent);
  box-shadow: 0 18px 44px -16px color-mix(in srgb, var(--accent) 45%, transparent); }
.plan-flag { position: absolute; top: -11px; left: 1.4rem; background: var(--accent);
  color: #fff; font: 700 .72rem/1 var(--font-head); letter-spacing: .08em;
  text-transform: uppercase; padding: .32rem .6rem; border-radius: 6px; }
.plan-name { font-family: var(--font-head); font-weight: 750; font-size: 1.18rem;
  color: var(--accent-ink); }
.plan-price { font-family: var(--font-head); font-weight: 800; font-size: 1.9rem;
  letter-spacing: -0.03em; margin: .55rem 0 .2rem; color: var(--accent-ink); }
.plan-price small { font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--slate); }
.plan p { font-size: .93rem; }
.plan-meta { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .4rem; }
.plan-meta li { font-size: .9rem; padding-left: 1.5rem; position: relative; }
.plan-meta li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .45rem;
  height: .45rem; border-radius: 50%; background: var(--green); }
.plan .btn { width: 100%; margin-top: 1.1rem; }
.plan-quarterly { font-size: .88rem; color: var(--slate); margin-top: .1rem; }

/* the plans configurator */
.cfg { background: color-mix(in srgb, var(--accent) 5%, #F3F6FA);
  border: 1px solid var(--tint-line); border-radius: var(--r);
  padding: 1.6rem 1.5rem; margin-bottom: 1.6rem; }
.cfg-label { font: 700 .8rem/1 var(--font-head); letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); margin-bottom: .7rem; }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { font: 620 .95rem/1 var(--font-head); color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 999px; padding: .62rem 1.05rem; cursor: pointer;
  transition: border-color .12s ease, background .12s ease; }
.pill:hover { border-color: var(--slate); }
.pill[aria-pressed="true"] { background: var(--accent-ink); border-color: var(--accent-ink);
  color: #fff; }
.pill small { display: block; font: 500 .72rem/1.2 var(--font-body); color: inherit;
  opacity: .72; margin-top: .2rem; letter-spacing: 0; }
.cfg-row + .cfg-row { margin-top: 1.3rem; }

/* ---- benefits -------------------------------------------------------- */
.ben-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 1.15rem; }
.ben { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.5rem 1.35rem; box-shadow: var(--shadow); }
.ben h3 { font-size: 1.05rem; margin-bottom: .35rem; padding-left: 1.75rem; position: relative; }
.ben h3::before { content: ""; position: absolute; left: 0; top: .12em; width: 1.15rem;
  height: 1.15rem; border-radius: 50%; background: var(--green); }
.ben h3::after { content: ""; position: absolute; left: .27rem; top: .42em; width: .58rem;
  height: .3rem; border-left: 2.6px solid #fff; border-bottom: 2.6px solid #fff;
  transform: rotate(-45deg); }
.ben p { font-size: .93rem; }

/* ---- trust / duo ----------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; }
.duo > * { min-width: 0; }
@media (max-width: 820px) { .duo { grid-template-columns: 1fr; } }
.checks { list-style: none; padding: 0; display: grid; gap: .7rem; margin-top: 1.4rem; }
.checks li { padding-left: 1.9rem; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1.15rem;
  height: 1.15rem; border-radius: 50%; background: var(--green); }
.checks li::after { content: ""; position: absolute; left: .27rem; top: .62em; width: .58rem;
  height: .3rem; border-left: 2.6px solid #fff; border-bottom: 2.6px solid #fff;
  transform: rotate(-45deg); }

/* ---- footer ---------------------------------------------------------- */
.ft { background: var(--accent-deep); color: color-mix(in srgb, #fff 68%, var(--accent-deep));
  margin-top: var(--sp); }
.ft a { color: color-mix(in srgb, #fff 82%, var(--accent-deep)); font-size: .95rem; }
.ft a:hover { color: #fff; }
.ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem;
  padding-top: 3.6rem; padding-bottom: 2.6rem; }
.ft-brand p { font-size: .93rem; max-width: 26em; margin-top: .9rem; }
.ft-tel { display: inline-block; margin-top: .9rem; font: 700 1.05rem/1 var(--font-head); }
.ft h3 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1rem; font-weight: 700; }
.ft nav { display: grid; gap: .55rem; align-content: start; }
.ft-legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.4rem;
  padding-bottom: 1.6rem; font-size: .84rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; }
/* the platform's line (docs/tenant-seo.md, "Powered by"): the quietest
   thing in the footer — smaller and dimmer than the company's own legal line */
.ft-power { font-size: .76rem; opacity: .62; white-space: nowrap; }
.ft-power a { font-size: inherit; color: inherit; text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.3); text-underline-offset: .18em; }
.ft-power a:hover { color: #fff; }
@media (max-width: 820px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ft-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---- final CTA ------------------------------------------------------- */
.cta-final { text-align: center; }
.cta-final .btn { margin-top: 1.8rem; }
.cta-sub { font-size: .9rem; color: var(--slate); margin-top: .9rem; }

/* ---- inner pages ----------------------------------------------------- */
.page-hero { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.page-hero .lede { margin-top: 1.1rem; }
.page-hero h1 { max-width: 15em; }
@media (min-width: 1080px) {
  .page-hero { padding-top: 2.2rem; padding-bottom: 1.2rem; }
  .page-hero h1 { font-size: clamp(2.1rem, 3.4vw, 3rem); }
  .page-hero .lede { font-size: 1.08rem; margin-top: .9rem; }
}
.prose { max-width: 46em; }

/* ---- contact cards --------------------------------------------------- */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.15rem; max-width: 820px; }
.ccard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem 1.5rem; box-shadow: var(--shadow); }
.ccard h3 { margin-bottom: .35rem; }
.ccard p { font-size: .93rem; }
.ccard a.big { display: inline-block; font: 750 1.15rem/1.2 var(--font-head);
  margin-top: .6rem; word-break: break-word; }

/* ---- the contact form ------------------------------------------------ */
.enq { max-width: 34rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 1.9rem 1.7rem;
  position: relative; }
.enq label { display: block; font: 640 .92rem/1 var(--font-head);
  color: var(--accent-ink); margin: 0 0 1.1rem; }
.enq-opt { font: 500 .78rem/1 var(--font-body); color: var(--slate); }
.enq input, .enq textarea { width: 100%; margin-top: .45rem;
  font: 400 1.02rem/1.4 var(--font-body); color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px;
  padding: .8rem .9rem; box-sizing: border-box; resize: vertical; }
.enq input:focus, .enq textarea:focus { outline: none; border-color: var(--accent);
  background: #fff; }
.enq-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .enq-row { grid-template-columns: 1fr; } }
.enq .btn { width: 100%; margin-top: .2rem; }
.enq-done { border-left: 3px solid var(--green); background: #F2FAF6;
  padding: 1rem 1.2rem; border-radius: 8px; margin-top: 1.2rem; font-size: .95rem; }
.enq-err { color: #B42318; font-size: .92rem; margin-top: 1rem; }

/* ---- FAQs ------------------------------------------------------------ */
.faq { max-width: 46em; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0 1.2rem; margin-bottom: .7rem; }
.faq summary { font: 640 1rem/1.4 var(--font-head); color: var(--accent-ink);
  padding: 1rem 0; cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 1rem; font-size: .95rem; }

/* ---- live availability rail ------------------------------------------ */
.days-sec { padding-top: clamp(2.2rem, 5vw, 3.5rem); padding-bottom: clamp(2.2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line); background: #fff; }
.days-head { display: flex; flex-wrap: wrap; gap: 1rem 3rem; align-items: end;
  justify-content: space-between; margin-bottom: 1.6rem; }
.days-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.days-head .eyebrow { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.days-note { font-size: .92rem; color: var(--slate); max-width: 24em; }
.avail-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--green);
  flex-shrink: 0; animation: avail-pulse 1.8s ease-in-out infinite; }
@keyframes avail-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(27,138,90,.45); }
  50% { box-shadow: 0 0 0 6px rgba(27,138,90,0); } }
/* ---- the month calendar (docs/site-availability.md) ------------------ */
.av-wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "band" "cal" "slots";
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  max-width: 980px; box-shadow: 0 30px 60px -36px rgba(15,26,58,.35), 0 2px 6px rgba(15,26,58,.05); }
.av-month { grid-area: band; display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "title prev next" "sum prev next";
  align-items: center; gap: .2rem .45rem; padding: 1.1rem 1.15rem .95rem; background: var(--card); color: var(--accent-ink);
  border-bottom: 1px solid var(--line); }
.av-month b { grid-area: title; font: 800 1.6rem/1 var(--font-head); letter-spacing: -.025em; color: var(--accent-ink); }
.av-month b small { font: 500 .8rem/1 var(--font-body); letter-spacing: .1em; color: var(--slate); margin-left: .55rem; vertical-align: .4em; }
.av-nav { grid-area: prev; align-self: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--accent-ink); font: 600 1.2rem/1 var(--font-head); cursor: pointer; padding: 0 0 2px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease; }
.av-nav[data-av-nav="1"] { grid-area: next; }
.av-nav:disabled { opacity: .3; cursor: default; }
.av-nav:not(:disabled):hover { background: var(--tint); border-color: var(--accent-ink); transform: translateY(-1px); }
.av-sum { grid-area: sum; font-size: .8rem; color: var(--slate); letter-spacing: .01em; }
.av-cal { grid-area: cal; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.av-dow { text-align: center; font: 700 .62rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); padding: .7rem 0 .6rem; border-bottom: 1px solid var(--line); }
.av-day { position: relative; display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start; min-height: 84px; padding: .5rem .55rem .5rem; margin: 0; background: var(--card);
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: inherit; text-align: left; cursor: default; transition: background .14s ease; }
.av-day:nth-child(7n) { border-right: 0; }
.av-n { font: 600 .98rem/1 var(--font-head); color: var(--accent-ink); width: 28px; height: 28px; display: grid;
  place-items: center; border-radius: 50%; letter-spacing: -.01em; }
.av-day--wk { background: color-mix(in srgb, var(--tint) 55%, var(--card)); }
.av-day--past .av-n, .av-day--out .av-n { color: #C6C9D2; font-weight: 500; }
.av-day--today .av-n { box-shadow: 0 0 0 1.5px var(--accent-ink) inset; font-weight: 800; }
.av-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: .32rem; font: 700 .7rem/1 var(--font-head);
  letter-spacing: .02em; color: var(--green); padding: .1rem 0; white-space: nowrap; }
.av-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(31,122,62,.14); }
.av-pill--full { color: #B6BAC6; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .58rem; }
.av-pill--full::before { display: none; }
button.av-day { cursor: pointer; }
button.av-day:hover { background: var(--tint); }
.av-day[aria-pressed="true"] { background: var(--accent-ink); }
.av-day[aria-pressed="true"] .av-n { color: #fff; box-shadow: none; }
.av-day[aria-pressed="true"] .av-pill { color: #fff; }
.av-day[aria-pressed="true"] .av-pill::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.av-day[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; background: #fff; }
.av-more { margin-top: 1.1rem; font-size: .95rem; }
.av-more a { color: var(--accent-ink); font-weight: 600; border-bottom: 1.5px solid var(--line); }
.av-more a:hover { border-color: var(--accent-ink); }
@media (min-width: 900px) {
  .av-wrap { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "band band" "cal slots"; }
  .win-panel { border-left: 1px solid var(--line); align-content: start; }
  .win-chip { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .av-wrap { border-radius: 16px; }
  .av-month { padding: .9rem .8rem .75rem; }
  .av-month b { font-size: 1.3rem; }
  .av-nav { width: 34px; height: 34px; }
  .av-day { min-height: 64px; padding: .32rem .32rem; }
  .av-n { width: 24px; height: 24px; font-size: .88rem; }
  .av-pill { font-size: .6rem; gap: .22rem; }
  .av-pill::before { width: 5px; height: 5px; box-shadow: 0 0 0 2px rgba(31,122,62,.14); }
  .av-pill--full { font-size: .5rem; }
}

/* ---- the chosen day's time slots ----------------------------------- */
.win-panel { grid-area: slots; display: flex; flex-wrap: wrap; align-items: stretch; gap: .55rem;
  margin: 0; padding: 1.05rem 1.1rem 1.15rem; background: var(--tint); }
.win-panel.is-in { animation: win-rise .22s ease-out; }
@keyframes win-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.win-head { flex-basis: 100%; display: grid; gap: .15rem; margin-bottom: .2rem; }
.win-head b { font: 800 1.1rem/1.1 var(--font-head); color: var(--accent-ink); letter-spacing: -.01em; }
.win-head span { font-size: .82rem; color: var(--slate); }
.win-chip { display: flex; align-items: center; gap: .7rem; min-width: 150px; flex: 1 1 150px;
  padding: .7rem .85rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  color: var(--accent-ink); box-shadow: 0 1px 2px rgba(15,26,58,.04);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.win-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--tint); color: var(--accent-ink); }
.win-t { display: grid; gap: .12rem; min-width: 0; }
.win-t b { font: 700 .98rem/1.1 var(--font-head); letter-spacing: -.01em; }
.win-t small { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.win-chip:hover { transform: translateY(-2px); border-color: var(--accent-ink); box-shadow: 0 10px 22px -14px rgba(15,26,58,.5); }
.win-chip--best { background: var(--accent); border-color: var(--accent); color: #fff; }
.win-chip--best .win-ico { background: rgba(255,255,255,.35); color: #fff; }
.win-chip--best .win-t small { color: #fff; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .av-day, .win-chip, .av-nav { transition: none; } .win-panel.is-in { animation: none; } }

/* ---- photos ---------------------------------------------------------- */
.photo { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--tint); border: 1px solid var(--line); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--wide { aspect-ratio: 21 / 9; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem; }
.shots .photo { aspect-ratio: 4 / 3; }

/* ---- testimonials ----------------------------------------------------
   Built on the plan card so a page renders decently before a hosting
   project's shared CSS is re-seeded; these lines are the difference. */
.quotes { max-width: none; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.quote { position: relative; padding-top: 2.6rem; }
.quote::before { content: "\201C"; position: absolute; top: .55rem; left: 1.3rem;
  font: 900 3.4rem/1 var(--font-head); color: var(--accent); opacity: .28; }
.quote-text { font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.quote-name { margin-top: 1rem; font-size: 1rem; }
.quote-place { margin-top: .1rem; }

/* ---- Google reviews (docs/tenant-reviews.md) --------------------------
   Filled by the site's script only when Google answers; the star color
   is Google's gold, the one color here that is not the company's. */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.15rem; }
.rev { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem 1.5rem; box-shadow: var(--shadow); margin: 0;
  display: flex; flex-direction: column; gap: .7rem; }
.rev-stars { color: #F5B82E; letter-spacing: .12em; font-size: 1.05rem; }
.rev blockquote { margin: 0; font-size: .96rem; line-height: 1.6; flex: 1; color: var(--ink); }
.rev figcaption { font: 640 .92rem/1.3 var(--font-head); color: var(--ink); }
.rev figcaption a { color: inherit; text-decoration: none; }
.rev figcaption a:hover { text-decoration: underline; }
.rev figcaption span { display: block; font: 500 .78rem/1.4 var(--font-body); color: var(--slate); }
.rev-more { text-align: center; margin-top: 1.6rem; }
.rev-wait { grid-column: 1 / -1; text-align: center; color: var(--slate); font-size: .95rem;
  padding: 1.4rem 1rem; border: 1px dashed var(--tint-line); border-radius: var(--r); }

/* ---- desktop measure ------------------------------------------------- */
@media (min-width: 1280px) { :root { --wrap: 1300px; } }
@media (min-width: 1680px) { :root { --wrap: 1400px; } }

/* ---- plan families and option pages (docs/tenant-site-pages.md) ------ */
.fam-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.fam-switch a { font: 620 .95rem/1 var(--font-head); color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 999px; padding: .6rem 1rem; text-decoration: none; }
.fam-switch a:hover { border-color: var(--slate); }
.fam-switch a[aria-current="page"] { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.kind { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.5rem; }
.kind h3 { margin: 0 0 .6rem; }
.kind ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .95rem; }
.kind .kind-note { font-size: .85rem; color: var(--slate); margin: .8rem 0 0; }
/* the option board — windowblasters.com's fabric explorer, ported:
   tiles left, a sticky detail card right, the accent for the selected
   ring where the WB site uses navy */
.fx { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .fx { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); align-items: start; } }
.fx-group-label { font: 700 .8rem/1 var(--font-head); letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); margin: 1.3rem 0 .6rem; }
.fx-group-label:first-child { margin-top: 0; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.fx-tile { display: flex; flex-direction: column; gap: .35rem; padding: .45rem;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer; font-family: inherit; text-align: center;
  transition: border-color .12s ease, transform .12s ease; }
.fx-tile:hover { transform: translateY(-2px); border-color: var(--slate); }
.fx-tile[aria-pressed="true"] { border-color: var(--accent-ink); box-shadow: 0 0 0 1.5px var(--accent-ink); }
.fx-swatch { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px;
  border: 1px solid rgba(16,33,94,.14); }
.fx-swatch--lg { width: 72px; aspect-ratio: 1; flex-shrink: 0; border-radius: 10px; }
.fx-tile span:last-child { font-size: .74rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.fx-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fx-chip { font: 620 .9rem/1.2 var(--font-head); color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line); border-radius: 999px; padding: .5rem .85rem; }
.fx-chip small { display: block; font: 500 .72rem/1.2 var(--font-body); color: var(--slate); }
.fx-detail { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--shadow, 0 8px 24px rgba(8,20,43,.08)); position: sticky; top: 84px; }
.fx-d-head { display: flex; gap: .8rem; align-items: center; margin-bottom: .9rem; }
.fx-d-name { font: 750 1.25rem/1.15 var(--font-head); color: var(--ink); }
.fx-d-line { font-size: .78rem; color: var(--slate); margin-top: .15rem; }
.fx-d-tone { font-size: .95rem; }
.fx-d-note { font-size: .82rem; color: var(--slate); margin-top: .9rem;
  padding-top: .8rem; border-top: 1px solid var(--line); }
.fx-fine { font-size: .82rem; color: var(--slate); margin-top: 1.1rem; }
.page-hero.has-photo { position: relative; color: #fff; overflow: hidden; }
.page-hero.has-photo .hero-bg { position: absolute; inset: 0; }
.page-hero.has-photo .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero.has-photo .hero-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,20,43,.55), rgba(8,20,43,.75)); }
.page-hero.has-photo .wrap { position: relative; }
.page-hero.has-photo .eyebrow, .page-hero.has-photo .lede { color: rgba(255,255,255,.85); }
.page-hero.has-photo h1 { color: #fff; }

/* ---- the policy pages (privacy · terms · text-message program) ------ */
.policy { max-width: 760px; }
.policy h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
.policy h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
.policy p, .policy li { font-size: .97rem; color: var(--ink-2, var(--ink)); }
.policy ul, .policy ol { padding-left: 1.3rem; }
.policy .small { font-size: .84rem; color: var(--slate); }
.policy table { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; }
.policy th, .policy td { text-align: left; font-size: .93rem; padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.policy th { color: var(--slate); font-weight: 700; width: 34%; }
.policy .fact { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: .9rem 1.1rem; margin: 0 0 1.2rem; }
.policy .fact div { font-size: .93rem; margin: .15rem 0; }
.policy .steps { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: .8rem 1.4rem .4rem; margin: 0 0 1rem; }
.policy .shot.optin { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 1rem 1.1rem; margin: .6rem 0 .3rem; }
.policy .shot.optin label { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; }
.policy .shot.optin .box { width: 20px; height: 20px; flex: none; border: 1.5px solid var(--slate); border-radius: 5px; background: #fff; margin-top: .1rem; }
.policy .cap { font-size: .82rem; color: var(--slate); margin: 0 0 1.2rem; }