/* ==========================================================================
   Royal Windoor US -- design system
   Palette taken from the logo: blue gradient wordmark + red type.
   ========================================================================== */

:root {
  --navy: #0d2a4f;
  --navy-deep: #081d38;
  --blue: #1b4f9c;
  --blue-mid: #2e6fb7;
  --blue-light: #4a8ed0;
  --blue-wash: #eef4fb;
  --blue-wash-2: #dce9f7;
  --red: #d0121b;
  --red-dark: #a50e15;

  --ink: #14202e;
  --ink-2: #3d4b5c;
  --ink-3: #6b7a8d;
  --line: #dfe6ee;
  --line-soft: #eef2f7;
  --bg: #ffffff;
  --bg-alt: #f7f9fc;

  --amber: #b8791a;
  --amber-wash: #fdf6e8;
  --green: #1f7a54;

  --grad-blue: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 55%, var(--blue-light) 100%);
  --grad-navy: linear-gradient(135deg, var(--navy-deep) 0%, var(--blue) 100%);

  --shadow-sm: 0 1px 2px rgba(13, 42, 79, .06), 0 2px 8px rgba(13, 42, 79, .05);
  --shadow: 0 2px 6px rgba(13, 42, 79, .07), 0 12px 32px rgba(13, 42, 79, .09);
  --shadow-lg: 0 8px 24px rgba(13, 42, 79, .12), 0 24px 60px rgba(13, 42, 79, .14);

  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --wrap-narrow: 780px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); overflow-x: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: var(--navy); }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.06rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); }
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding: clamp(56px, 8vw, 96px) 0; content-visibility: auto; contain-intrinsic-size: auto 720px; }
.section-tight { padding: clamp(40px, 5vw, 60px) 0; }
.section-alt { background: var(--bg-alt); }
.section-wash { background: var(--blue-wash); }
.section-navy { background: var(--grad-navy); color: #fff; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy p { color: rgba(255, 255, 255, .85); }

.eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.section-navy .eyebrow { color: var(--blue-light); }

.lede { font-size: 1.15rem; color: var(--ink-2); }
.section-navy .lede { color: rgba(255, 255, 255, .88); }
.center { text-align: center; }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--red-dark); box-shadow: var(--shadow); }
.btn-blue { background: var(--grad-blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn-blue:hover { box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); }
.btn-light { background: #fff; color: var(--navy); }
.btn-outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px #fff; }
.btn-sm { padding: 11px 20px; font-size: .74rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.btn-row.center { justify-content: center; }

/* ---------- header ---------- */
.topbar {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .82);
  font-size: .82rem;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar a { color: #fff; font-weight: 600; }
.topbar-note { display: flex; align-items: center; gap: 8px; }
.topbar-promo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.topbar-promo:hover { text-decoration: none; }
.topbar-promo:hover .topbar-note-text { text-decoration: underline; }
.topbar-note-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-aside { flex: 0 0 auto; }
.topbar-storm {
  background: var(--red);
  color: #fff;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 46px; width: auto; }
.brand:hover { text-decoration: none; }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block;
  /* 8px, not 12px. Eight top-level items plus the logo, the phone and the
     quote button already overflow the 1200px wrap; "Windows & Doors" is a
     wider label than "Products" was, so the row buys the difference back
     here. Measured in Chrome: nav row 886px at 12px padding, 822px at 8px. */
  padding: 10px 8px;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav a:hover { text-decoration: none; color: var(--blue); background: var(--blue-wash); }
.nav li.current > a { color: var(--blue); }
.nav li.current > a::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  margin-top: 4px;
}

.has-drop { position: relative; }
.has-drop > a::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .5;
}
.drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 290px;
  /* Last resort for a short window. The panel opens about 100px down, so
     this keeps the tallest ones reachable on a 700px-high laptop instead of
     running off the bottom of the screen with no way to get at them. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all .18s ease;
}
.drop-right { left: auto; right: 0; }
.drop-2col {
  min-width: 560px;
  columns: 2;
  column-gap: 12px;
}
.drop-2col .drop-group { break-inside: avoid; }
.drop-2col .drop-group:first-child .drop-label { padding-top: 4px; }
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop ul { display: block; }
.drop a { padding: 9px 12px; font-weight: 600; font-size: .87rem; }
.drop .drop-hub a { color: var(--blue); }
.drop-label {
  padding: 10px 12px 4px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.drop hr { border: 0; border-top: 1px solid var(--line-soft); margin: 8px 4px; }

.header-cta { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.header-phone { display: flex; flex-direction: column; line-height: 1.2; }
.header-phone span { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 700; }
.header-phone a { font-size: 1.02rem; font-weight: 800; color: var(--navy); }
/* CR-017: the email is present but secondary to the number. */
.header-phone a.header-email { font-size: .78rem; font-weight: 600; color: var(--ink-2, var(--navy)); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; margin: 0 auto; content: "";
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; background: var(--grad-navy); overflow: hidden; content-visibility: visible; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8, 29, 56, .92) 0%, rgba(8, 29, 56, .78) 42%, rgba(13, 42, 79, .42) 100%);
}
.hero-inner { position: relative; padding: clamp(72px, 11vw, 132px) 0; max-width: 760px; }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero .eyebrow { color: var(--blue-light); }
.hero p { font-size: 1.16rem; color: rgba(255, 255, 255, .9); max-width: 620px; }
.hero-shop { margin-top: 22px; font-size: .95rem !important; color: rgba(255, 255, 255, .82) !important; }
.hero-shop a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero-sm .hero-inner { padding: clamp(56px, 7vw, 84px) 0; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-badge {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}

/* ---------- breadcrumbs ---------- */
.crumbs { background: var(--bg-alt); border-bottom: 1px solid var(--line-soft); font-size: .84rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 13px 0; }
.crumbs li { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--ink-2); font-weight: 600; }
.crumbs [aria-current] { color: var(--navy); font-weight: 700; }

/* ---------- stat strip ---------- */
.stats { border-bottom: 1px solid var(--line-soft); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 34px; padding-bottom: 34px; }
.stat { text-align: center; }
.stat b { display: block; font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--blue); line-height: 1.1; letter-spacing: -.03em; }
.stat span { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- grids ---------- */
.grid { display: grid; gap: 26px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split-media { min-width: 0; border-radius: var(--r); overflow: hidden; }
.split-media:not(.is-product):not(.is-spec):not(.person-profile-media):not(.partner-logo) {
  aspect-ratio: 4 / 3;
  background: var(--blue-wash);
}
.split-media.is-product { background: #eef2f5; border-radius: var(--r); }
.split-media.is-product img { object-fit: contain; padding: 24px; box-shadow: none; }
.split-media.is-spec {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  border-radius: var(--r);
}

/* ---------- cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-wash-2); }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--blue-wash); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media.is-product { background: #eef2f5; }
.card-media.is-product img { object-fit: contain; padding: 16px; }
.card-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: .5em; }
.card-body p { color: var(--ink-2); font-size: .96rem; }
.card-link {
  margin-top: auto;
  padding-top: 18px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
}
.card-link::after { content: " \2192"; }
.card-tag {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.card-price { font-size: .8rem; font-weight: 800; color: var(--green); letter-spacing: .06em; }
a.card { color: inherit; }
a.card:hover { text-decoration: none; }

/* feature / icon grid */
.features { display: grid; gap: 28px; grid-template-columns: repeat(4, 1fr); }
.feature .f-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  background: var(--blue-wash);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.feature .f-icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.1rem; }
.feature p { font-size: .95rem; color: var(--ink-2); }
.section-navy .feature .f-icon { background: rgba(255, 255, 255, .14); color: #fff; }
.section-navy .feature h3 { color: #fff; }
.section-navy .feature p { color: rgba(255, 255, 255, .85); line-height: 1.55; }

/* numbered steps */
.steps { counter-reset: s; display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); }
.steps-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } }
.step { position: relative; padding-top: 56px; }
.step::before {
  counter-increment: s;
  content: "0" counter(s);
  position: absolute; top: 0; left: 0;
  font-size: 1.5rem; font-weight: 800; color: var(--blue);
  letter-spacing: -.02em;
}
.step::after { content: ""; position: absolute; top: 42px; left: 0; width: 34px; height: 3px; background: var(--red); border-radius: 2px; }

/* checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checklist li { position: relative; padding-left: 34px; color: var(--ink-2); }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 18px; height: 10px;
  border-left: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}
.checklist strong { color: var(--navy); }
.section-navy .checklist li { color: rgba(255, 255, 255, .88); }
.section-navy .checklist li::before { border-color: var(--blue-light); }
.section-navy .checklist strong { color: #fff; }
.checklist-2 { grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }

/* ---------- placeholder media (assets not yet supplied) ---------- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 28px;
  min-height: 220px;
  background:
    linear-gradient(135deg, rgba(27, 79, 156, .07) 0%, rgba(46, 111, 183, .13) 100%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(27, 79, 156, .05) 12px 24px);
  border: 1.5px dashed var(--blue-wash-2);
  border-radius: var(--r);
  color: var(--blue);
}
.card-media .ph { border: 0; border-radius: 0; height: 100%; min-height: 0; }
.ph b { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ph span { display: block; font-size: .84rem; color: var(--ink-3); margin-top: 6px; max-width: 34ch; }
.ph-tall { min-height: 380px; }

.media-figure { margin: 0; }
.media-figure figcaption {
  color: var(--ink-3);
  font-size: .82rem;
  line-height: 1.45;
  margin-top: 10px;
  max-width: 56ch;
}
.split-media .media-figure { width: 100%; }

/* ---------- callout / product recommendation box ---------- */
.callout {
  border-left: 4px solid var(--blue);
  background: var(--blue-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px;
  margin: 26px 0;
  font-size: .95rem;
  color: var(--navy);
}
.callout b {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 5px;
}
.callout p { margin: 0; color: var(--ink-2); line-height: 1.55; }

/* ---------- verification flag (per strategy sec. 4.3 / sec. 5.5) ---------- */
.verify {
  border-left: 4px solid var(--amber);
  background: var(--amber-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px;
  margin: 26px 0;
  font-size: .92rem;
  color: #6b4c12;
}
.verify b {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 5px;
}
.verify p { margin: 0; }

/* ---------- comparison table ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--line); }
table.cmp { width: 100%; border-collapse: collapse; background: #fff; min-width: 720px; }
table.cmp th, table.cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .95rem; vertical-align: top; }
table.cmp thead th { background: var(--bg-alt); color: var(--navy); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
table.cmp tbody th { font-weight: 700; color: var(--navy); width: 210px; }
table.cmp tr:last-child td, table.cmp tr:last-child th { border-bottom: 0; }
table.cmp .best { background: var(--blue-wash); }
.tier-tag { font-weight: 800; color: var(--green); letter-spacing: .05em; }

/* ---------- reviews (server-rendered per audit sec. 3 item 6) ---------- */
.reviews { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; }
.stars { color: #f0a500; letter-spacing: 3px; font-size: 1rem; margin-bottom: 14px; }
.review blockquote { margin: 0 0 18px; font-size: .96rem; color: var(--ink-2); }
.review cite { margin-top: auto; font-style: normal; font-weight: 700; color: var(--navy); font-size: .92rem; }
.review cite span { display: block; font-weight: 600; color: var(--ink-3); font-size: .8rem; }
.review-summary { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 42px; }
.review-summary b { font-size: 1.5rem; color: var(--navy); }
.review-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }

/* ---------- portfolio ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 38px; }
.filter {
  padding: 10px 20px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 100px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .16s ease;
}
.filter:hover { border-color: var(--blue); color: var(--blue); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery-hint { color: var(--ink-3); font-size: .9rem; margin: 0 0 18px; }
.shot { position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--blue-wash); cursor: pointer; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.shot:hover img { transform: scale(1.05); }
.shot figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(8, 29, 56, .9));
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
}
.shot figcaption em { display: block; font-style: normal; font-weight: 500; opacity: .8; font-size: .74rem; }
.shot.is-hidden { display: none; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--wrap-narrow); }
.faq details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq summary {
  cursor: pointer;
  padding: 18px 40px 18px 0;
  font-weight: 700;
  color: var(--navy);
  position: relative;
  list-style: none;
  font-size: 1.04rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--blue);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 40px 20px 0; color: var(--ink-2); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--grad-navy); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .85); max-width: 620px; margin-left: auto; margin-right: auto; }
.cta-phone { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 28px; font-size: 1.05rem; color: rgba(255, 255, 255, .8); }
.cta-phone a { color: #fff; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }

/* ---------- forms ---------- */
.form-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow); }
.form-home { max-width: 820px; margin: 0 auto; }
.opening-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.opening {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.opening:hover { border-color: var(--blue); }
.opening strong { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.opening span { font-size: .88rem; color: var(--ink-3); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue-light); outline-offset: 1px; border-color: var(--blue); }
.field input[type="file"] { padding: 10px 12px; background: var(--blue-wash); }
.opt { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.form-hint { font-size: .84rem; color: var(--ink-3); margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: .84rem; color: var(--ink-3); margin-top: 14px; }
.form-error {
  background: #fdecea;
  color: #8a1f11;
  border: 1px solid #f5c6c2;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: .94rem;
  margin-bottom: 16px;
}

/* Honeypot. Bots fill every field they find; people never see this one.
   Kept out of the accessibility tree and off-screen rather than display:none,
   because some bots skip hidden inputs. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .68); font-size: .92rem; padding-top: clamp(52px, 7vw, 76px); }
.site-footer h4 { color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer a { color: rgba(255, 255, 255, .72); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 36px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-brand img { height: 62px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: .95; }
.footer-brand p { font-size: .9rem; line-height: 1.7; }
.footer-bottom {
  margin-top: 52px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 22px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: .82rem;
}
.footer-tier { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .4); margin: 16px 0 8px; font-weight: 700; }
.footer-reach { margin-top: 14px; font-size: .86rem; color: rgba(255, 255, 255, .58); }
.footer-reach strong { color: rgba(255, 255, 255, .82); font-weight: 600; }
.footer-partner { color: rgba(255, 255, 255, .5); }

/* ---------- misc ---------- */
.prose { max-width: var(--wrap-narrow); }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { color: var(--ink-2); padding-left: 22px; }
.prose li { margin-bottom: .5em; }
.founder-statement {
  margin: 28px 0 0;
  padding: clamp(24px, 4vw, 42px);
  border-left: 5px solid var(--blue);
  border-radius: 0 var(--r) var(--r) 0;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.founder-statement p {
  color: var(--ink-2);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
}
.founder-statement p:first-child { margin-top: 0; }
.founder-statement cite {
  display: block;
  margin-top: 24px;
  color: var(--navy);
  font-size: .9rem;
  font-style: normal;
  font-weight: 750;
}
.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff; padding: 12px 20px; z-index: 200; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; top: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  padding: 7px 15px;
  border-radius: 100px;
  background: var(--blue-wash);
  color: var(--blue);
  font-size: .82rem;
  font-weight: 700;
}
.hood-list { columns: 2; column-gap: 32px; color: var(--ink-2); }
.hood-list li { margin-bottom: .45em; break-inside: avoid; }

/* ---------- responsive imagery ----------
   Every project photo is a <picture> with a WebP source and a JPEG fallback.
   picture is inline by default, which would break the absolutely positioned
   hero layer and the fixed-ratio card media, so it is made a block that fills
   its container. */
.hero-media picture,
.card-media picture,
.split-media:not(.is-spec) picture,
.gallery picture,
.person-media picture { display: block; width: 100%; height: 100%; }
.hero-media picture img { width: 100%; height: 100%; object-fit: cover; }
.card-media.is-product picture,
.card-media.is-product picture img { width: 100%; height: 100%; }
.card-media.is-product picture img { object-fit: contain; padding: 16px; }
.split-media.is-product picture,
.split-media.is-product picture img { width: 100%; }
.split-media.is-product picture img { object-fit: contain; padding: 24px; }
.split-media.is-spec picture,
.split-media.is-spec picture img,
.split-media.is-spec img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.split-media:not(.is-product):not(.is-spec) picture,
.split-media:not(.is-product):not(.is-spec) picture img,
.split-media:not(.is-product):not(.is-spec) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-media.is-product picture img { height: auto; }

/* ---------- key facts (scannable for readers, extractable for answer engines) ---------- */
.keyfacts {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 4vw, 40px);
}
.keyfacts h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin-bottom: 22px; }
.keyfacts dl { display: grid; gap: 0; }
.kf-row {
  display: grid;
  grid-template-columns: minmax(160px, 230px) 1fr;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.kf-row:first-child { border-top: 0; padding-top: 0; }
.kf-row dt {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}
.kf-row dd { margin: 0; color: var(--ink-2); }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.person {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Headshots are cropped to 4:5 on one framing spec by optimize_images.py, so this
   box needs no per-person object-position nudges. */
.person-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--blue-wash); }
.person-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* An initials card stands in for a missing headshot and has to hold the same box,
   or the leader without a photo makes the row of cards uneven. */
.person-media .avatar-ph { aspect-ratio: auto; height: 100%; }
.person-profile-media img,
.person-profile-media picture img { width: 100%; height: auto; object-fit: cover; }
.footer-partner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.footer-medai { display: inline-flex; align-items: center; }
.footer-partner { align-items: center; }
.footer-built {
  color: rgba(255, 255, 255, .78);
  font-weight: 650;
  margin-right: 4px;
}
.footer-built:hover { color: #fff; }
.footer-medai img,
.footer-medai picture,
.footer-medai picture img {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: none;
}
.vs-table-wrap { overflow-x: auto; }
.vs-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vs-table caption { text-align: left; font-weight: 700; margin-bottom: 12px; color: var(--navy); }
.vs-table th, .vs-table td {
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  vertical-align: top;
  text-align: left;
}
.vs-table thead th { background: var(--blue-wash); color: var(--navy); }
.vs-table tbody th { width: 46%; font-weight: 600; color: var(--ink-2); }
.person-presence { margin-top: 16px; }
.person-body { padding: 26px 26px 28px; }
.person-body h3 { font-size: 1.2rem; margin-bottom: 4px; }
.person-role {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.person-body p { font-size: .95rem; }
.person-focus { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-soft); }
.person-focus li {
  font-size: .84rem;
  color: var(--ink-3);
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}
.person-focus li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-light);
}
.person-more { margin-top: 14px; font-size: .9rem; }
.kind-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-wash);
  padding: 4px 8px;
  border-radius: 999px;
  margin: 0 6px 10px 0;
}
.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  font-size: .95rem;
  color: var(--ink-2);
}
.byline .avatar-ph {
  width: 52px; height: 52px; aspect-ratio: 1;
  border-radius: 50%;
  flex: 0 0 auto;
}
.byline picture, .byline img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.article-wrap { max-width: 760px; margin: 0 auto; }
.article-media {
  margin: 0 0 28px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--blue-wash);
  max-height: min(52vh, 480px);
}
.article-media .media-figure { margin: 0; max-height: inherit; }
.article-media picture,
.article-media img {
  width: 100%;
  max-height: min(52vh, 480px);
  height: min(52vh, 480px);
  object-fit: cover;
  display: block;
}
.article-media figcaption { padding: 10px 4px 0; }
.mentor-gallery {
  margin-top: 48px;
  padding-top: 34px;
  border-top: 1px solid var(--line-soft);
}
.mentor-gallery .section-head { margin-bottom: 22px; }
.mentor-gallery .section-head p { max-width: 58ch; }
.mentor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 18px;
}
.mentor-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--navy);
  text-align: center;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mentor-card:hover,
.mentor-card:focus-visible {
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.mentor-card picture { display: block; }
.mentor-card picture,
.mentor-card .mentor-portrait {
  width: 92px;
  height: 92px;
  border-radius: 50%;
}
.mentor-card .mentor-portrait {
  display: block;
  object-fit: cover;
  object-position: center;
}
.mentor-name {
  margin-top: 12px;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
}
.mentor-relationship {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: .76rem;
  line-height: 1.35;
}
.person-contact {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  display: grid;
  gap: 8px;
}
.person-contact li { font-size: .95rem; color: var(--ink-2); }
.form-sent {
  background: var(--blue-wash);
  border: 1px solid var(--blue-wash-2);
  color: var(--navy);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  margin: 0 0 16px;
  font-weight: 600;
}
.person-articles { list-style: none; padding: 0; display: grid; gap: 12px; }
/* Link then an uppercase note. Flex with a gap, because relying on a literal
   space in the markup ran the two together on the linked-work list. */
.person-articles li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}
.person-articles li a { font-weight: 600; }
.person-articles .card-tag { align-self: baseline; margin-bottom: 0; }
.person-profile-media { max-width: 360px; }
/* A tribute still life stands in for a person with no published photograph.
   The caption has to travel with the image so it is never read as a likeness. */
.person-profile-media { overflow: visible; }
.person-profile-media picture { display: block; border-radius: var(--r); overflow: hidden; }
.media-caption {
  margin: 12px 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
}
/* A person who works at a partner firm, not here. The photograph we hold is
   whatever their brokerage publishes, which is a profile avatar, so the card is
   sized for that rather than stretching it to portrait-hero width. */
.agent-card {
  display: flex;
  gap: 18px;
  align-items: center;
  max-width: 420px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(15, 32, 56, .07);
}
.agent-card-photo {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-wash);
}
.agent-card-photo picture,
.agent-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.agent-card-body { min-width: 0; }
.agent-card-body h3 { font-size: 1.06rem; margin: 0 0 2px; }
.agent-card-links { margin: 10px 0 0; font-size: .84rem; color: var(--muted); }
.agent-card-body p { font-size: .9rem; margin: 8px 0 0; }

/* Vertical phone video. Without a cap it paints at the container width and runs
   off the screen, because the source is 480x848. */
.video-portrait {
  max-width: 340px;
  margin: 0 auto;
  border-radius: var(--r);
  overflow: hidden;
  background: #0d1b2a;
  box-shadow: 0 18px 44px rgba(15, 32, 56, .18);
}
.video-portrait video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 848;
  object-fit: contain;
  background: #0d1b2a;
}

.social-row { margin-top: 16px; font-size: .86rem; }
.social-soon { opacity: .45; }
.media-list { list-style: none; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.media-list code { font-size: .82rem; }
/* Initials stand in until approved headshots are supplied. */
.avatar-ph {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--grad-navy);
  position: relative;
}
.avatar-ph::after {
  content: "Photo to follow";
  position: absolute;
  bottom: 12px;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.avatar-ph span {
  font-family: var(--font-display, inherit);
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}

/* ---------- service footprint ---------- */
.footprint { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
.fp-col h3 { font-size: 1rem; margin-bottom: 2px; }
.fp-note {
  display: block;
  font-size: .78rem;
  color: var(--ink-3);
  margin-bottom: 14px;
  min-height: 2.4em;
}
.fp-col ul { list-style: none; }
.fp-col li { font-size: .9rem; color: var(--ink-3); padding: 5px 0; border-top: 1px solid var(--line-soft); }
.fp-col li a { color: var(--blue); font-weight: 600; }

/* ---------- technology partner ---------- */
.partner { display: grid; grid-template-columns: 140px 1fr; gap: 34px; align-items: start; }
.partner-logo {
  background: transparent;
  border-radius: var(--r);
  padding: 0;
  display: grid;
  place-items: center;
}
.partner-logo img,
.partner-logo picture,
.partner-logo picture img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
}
.partner-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.partner-links a {
  display: inline-block;
  font-size: .86rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--blue);
}
.partner-links a:hover { border-color: var(--blue-light); box-shadow: var(--shadow-sm); }

.affiliates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.affiliate {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
}
.affiliate .card-tag { margin-bottom: 10px; }
.affiliate h3 { margin: 0 0 12px; }
.affiliate p { color: var(--ink-2); margin: 0 0 18px; }
.affiliate-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }

/* ---------- related links (Interlinking Rule 3: no dead ends) ---------- */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.related-grid h3 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.related-grid ul { list-style: none; }
.related-grid li { border-top: 1px solid var(--line); }
.related-grid li a {
  display: block;
  padding: 12px 0;
  font-weight: 600;
  color: var(--navy);
  font-size: .95rem;
}
.related-grid li a:hover { color: var(--blue); }

.authority { list-style: none; display: grid; gap: 0; max-width: 820px; }
.authority li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); }
.authority li:last-child { border-bottom: 1px solid var(--line); }
.authority a { font-weight: 650; }
.authority span { color: var(--ink-3); font-size: .92rem; }

.ghl-embed { width: 100%; min-height: 640px; border: 0; border-radius: var(--r); background: #fff; }

/* ---------- portfolio lightbox ---------- */
.lightbox[hidden] { display: none !important; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(8, 29, 56, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.lightbox-figure {
  margin: 0;
  position: relative;
  z-index: 1;
  max-width: min(1100px, 94vw);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-figure img {
  display: block;
  max-width: min(1100px, 92vw);
  max-height: min(78vh, 860px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r);
  background: #0b1a2e;
}
.lightbox-figure figcaption {
  color: #fff;
  margin-top: 14px;
  text-align: center;
  max-width: 62ch;
  font-size: 1rem;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 16px;
}
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255, 255, 255, .22); }
html.lightbox-open,
body.lightbox-open {
  overflow: hidden;
}

/* ---------- responsive ---------- */
/* The header number is a duplicate: the topbar carries the same tel: link
   forty pixels above it, down to 640px, where the sticky mobile call bar
   takes over. So it is the first thing to drop when the row runs out of
   room, and it now drops at 1200 rather than 1080. */
@media (max-width: 1200px) {
  .header-phone { display: none; }
}
/* CR-017: the header email widens the phone column; below 1360 the row runs out
   of room, so the email drops and the topbar (to 1080) and the mobile bar carry it. */
@media (max-width: 1360px) {
  .header-phone a.header-email { display: none; }
}

@media (max-width: 1080px) {
  .g-4, .features, .opening-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .people, .related-grid { grid-template-columns: repeat(2, 1fr); }
  .footprint { grid-template-columns: repeat(3, 1fr); }
  .fp-note { min-height: 0; }
}

/* The nav folds into the toggle at 1150, not 900. Measured in Chrome, the
   eight-item row plus logo and quote button needs 1072px; a 1150px viewport
   offers 1102px. Below that the row used to overflow silently, and because
   html carries overflow-x: hidden there was no scrollbar to reveal it: at
   1000px the quote button was off the page and at 940px "Company" was cut in
   half. Grid and mobile-CTA rules stay at 900, they are unrelated. */
@media (max-width: 1150px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 12px 16px 22px;
  }
  .nav.is-open { display: block; }
  .nav ul { display: block; }
  .nav a { padding: 13px 8px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav li.current > a::after { display: none; }
  .has-drop > a::before { display: none; }
  .drop {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 0 16px; min-width: 0;
    columns: 1;
    max-height: none; overflow-y: visible;
  }
  .header-inner { position: relative; }
}

@media (max-width: 900px) {
  .header-cta .btn { display: none; }
  .g-3, .steps, .steps-4, .reviews, .split, .checklist-2 { grid-template-columns: 1fr; }
  .people, .related-grid, .affiliates { grid-template-columns: 1fr; }
  .footprint { grid-template-columns: repeat(2, 1fr); }
  .partner { grid-template-columns: 1fr; gap: 22px; }
  .partner-logo { width: 120px; }
  .kf-row { grid-template-columns: 1fr; gap: 4px; }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .split-media { order: -1; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .g-2, .g-4, .features, .footer-grid, .opening-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .btn-row .btn { width: auto; }
  .topbar-note-text,
  .topbar-aside { display: none; }
  .topbar-promo { display: flex; }
  .hood-list { columns: 1; }
  .footprint { grid-template-columns: 1fr; }
  .article-media,
  .article-media picture,
  .article-media img { max-height: 42vh; height: 42vh; }
  .lightbox-prev,
  .lightbox-next { top: auto; bottom: 16px; transform: none; }
  .person-profile-media { max-width: 100%; }
}

.mobile-cta { display: none; }

@media (max-width: 900px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(13, 42, 79, .12);
  }
  .mobile-cta a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-weight: 800;
    border-radius: var(--r-sm);
    padding: 10px 8px;
    line-height: 1.15;
    min-height: 52px;
    width: auto;
  }
  .mobile-cta-call {
    background: var(--navy);
    color: #fff;
  }
  .mobile-cta-call span {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
  }
  .mobile-cta-call strong {
    font-size: .98rem;
    letter-spacing: -.02em;
  }
  .mobile-cta-email {
    flex: 0 0 72px !important;
    background: #fff;
    color: var(--navy);
    border: 1px solid var(--line);
  }
  .mobile-cta-email span {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
  }
  .mobile-cta-email strong { font-size: .98rem; }
  .mobile-cta-quote {
    background: var(--red);
    color: #fff;
    font-size: .98rem;
  }
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  html {
    scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  body.rw-typing .mobile-cta { display: none; }
  body.rw-typing { padding-bottom: 0; }
}

@media print {
  .site-header, .topbar, .site-footer, .cta-band, .mobile-cta { display: none !important; }
}

/* ---------- technical documentation and downloadable submittals ---------- */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.doc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.doc-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue-wash-2);
  box-shadow: var(--shadow);
}
.doc-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.doc-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--blue-wash);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.doc-icon svg {
  width: 22px;
  height: 22px;
}
.doc-card h3 {
  font-size: 1.12rem;
  margin: 0;
  color: var(--navy);
  line-height: 1.3;
}
.doc-card p {
  font-size: .92rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--bg-alt);
  color: var(--navy);
}
.doc-badge.is-nfrc {
  background: #e8f5e9;
  color: #1b5e20;
}
.doc-badge.is-tdi {
  background: #e3f2fd;
  color: #0d47a1;
}
.doc-badge.is-pdf {
  background: #ffebee;
  color: #c62828;
}
.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.doc-actions .btn {
  font-size: .88rem;
  padding: 8px 16px;
}
.doc-preview-thumb {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 16px;
  background: #f8fafc;
  aspect-ratio: 16 / 10;
}
.doc-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* Install videos (CR-025): three portrait clips side by side; on phones a
   swipeable row instead of three full-height clips stacked. */
.video-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 8px 0 36px; }
@media (max-width: 760px) {
  .video-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px;
               padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .video-row > figure { flex: 0 0 72%; scroll-snap-align: center; }
}

/* In-stock store (CR-026) */
.inv-item.is-hidden { display: none; }
.inv-table th, .inv-table td { padding: 12px 10px; border-bottom: 1px solid rgba(0,0,0,.08); }
.inv-table tr.is-hidden { display: none; }

/* In-stock drawings drawn to the unit's true W:H (Saeid, 2 Oct 2026). Inline
   SVG keeps its viewBox ratio inside any box, so nothing stretches on any device. */
.inv-media { display: flex; align-items: center; justify-content: center; }
.card-media.inv-media svg { width: 100%; height: 100%; display: block; padding: 16px; box-sizing: border-box; }
.split-media.inv-media-lg { aspect-ratio: 4 / 3; padding: clamp(14px, 3vw, 28px); }
.split-media.inv-media-lg svg { width: 100%; height: 100%; display: block; }
.inv-table td.inv-shape { width: 84px; }
.inv-table td.inv-shape a { display: flex; align-items: flex-end; min-height: 64px; }
.inv-thumb { display: block; flex: none; }