/* Layout and components from polish mockups 01–05. Colour and type come from tokens.css. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f);
  color: var(--charcoal);
  font-size: var(--body-size);
  line-height: calc(var(--body-lh) / var(--body-size));
  background: var(--white);
  font-variant-numeric: tabular-nums;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ftr :focus-visible,
.bg-dark :focus-visible,
.dark-tx :focus-visible,
.hero :focus-visible,
.hero-slider :focus-visible,
.chero :focus-visible {
  outline-color: var(--cyan);
}
.hero-slider :focus-visible {
  outline-color: var(--white);
}

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  background: var(--white);
  color: var(--charcoal);
  padding: 8px 14px;
  z-index: 300;
}
.skip:focus { top: 8px; }

.wrap { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: var(--sec) 0; }
.sec.tight { padding: 64px 0; }
.bg-light { background: var(--light); }
.bg-dark { background: var(--charcoal); color: var(--white); }
.bg-blue { background: var(--blue); color: var(--white); }

h1, .h1 { font-weight: 700; font-size: var(--display-size); line-height: var(--display-lh); letter-spacing: -0.015em; }
h2, .h2 { font-weight: 600; font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: -0.01em; }
h3, .h3 { font-weight: 600; font-size: var(--h3-size); line-height: var(--h3-lh); }
h4, .h4 { font-weight: 600; font-size: var(--h4-size); line-height: var(--h4-lh); }
.lead { font-size: 18px; line-height: 30px; color: var(--slate); }
.bg-dark .lead, .dark-tx .lead, .dark-tx p { color: var(--white); }
p + p { margin-top: 16px; }
.muted { color: var(--slate); }
.mark { display: block; width: 40px; height: 4px; background: var(--blue); margin-bottom: 20px; }
.bg-dark .mark, .dark-tx .mark { background: var(--cyan); }
.eyebrow {
  font-weight: 600;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--blue);
}
.bg-dark .eyebrow { color: var(--cyan); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: var(--btn-size);
  line-height: var(--btn-lh);
  padding: 16px 24px;
  border-radius: var(--r);
  background: var(--blue);
  color: var(--white);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn.ghost { background: transparent; color: var(--charcoal); box-shadow: inset 0 0 0 1.5px var(--charcoal); }
.btn.white { background: var(--white); color: var(--charcoal); }
.bg-dark .btn.ghost { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--white); }
.btn:hover { background: var(--charcoal); color: var(--white); }
.btn.ghost:hover { background: var(--charcoal); color: var(--white); box-shadow: inset 0 0 0 1.5px var(--charcoal); }
.btn.white:hover { background: var(--light); color: var(--charcoal); }
.bg-dark .btn.ghost:hover { background: var(--white); color: var(--charcoal); box-shadow: inset 0 0 0 1.5px var(--white); }
.bg-dark .btn.white:hover { background: var(--light); color: var(--charcoal); box-shadow: none; }
.link {
  font-weight: 500;
  font-size: 14px;
  line-height: var(--btn-lh);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bg-dark .link { color: var(--cyan); }
.link:hover { gap: 12px; text-decoration: underline; text-underline-offset: 3px; }
.link svg { width: 14px; height: 14px; }

.hdr { position: relative; z-index: 200; background: var(--white); border-bottom: 1px solid var(--rule); }
/* Direct child only — mega uses .wrap.inner inside .mega; do not clamp that to bar height (M8) */
.hdr > .wrap { display: flex; align-items: center; height: 84px; gap: 20px; }
.hdr .logo { flex-shrink: 0; align-self: center; }
.hdr .logo img { height: 34px; width: auto; }
.hdr .hcta, .hdr .soc { flex-shrink: 0; align-self: center; }
.nav {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: 12px;
  margin-left: auto;
  font-weight: 500;
  font-size: 15px;
}
.nav-item { position: static; display: flex; align-items: stretch; }
.nav > a, .nav-item > a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(100% + 1px);
  margin-bottom: -1px;
  padding: 0;
  border-bottom: 3px solid transparent;
  min-height: 44px;
}
.nav > a:hover, .nav-item > a:hover { color: var(--blue); }
.nav a.on, .nav-item > a.on { border-bottom-color: var(--blue); color: var(--blue); }
.soc { display: flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--rule); }
.soc a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--charcoal);
}
.soc a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.soc a:hover { color: var(--blue); }
.soc svg { width: 20px; height: 20px; }
.burger {
  border: 0;
  background: none;
  color: var(--charcoal);
  cursor: pointer;
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.burger:hover { color: var(--blue); }
.burger svg { width: 26px; height: 26px; }

.mega {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  /* N6 (t822u): flush under header — 0 gap. M3 (100% - 1px) left a visible hero slit;
     stronger overlap + white bridge under bar; open-state kills hdr border rule. */
  top: calc(100% - 3px);
  /* Opaque white sheet — no alpha on panel (M1); hdr z-index lifts above page (M2) */
  background: var(--white);
  background-color: #fff;
  border-bottom: 1px solid var(--rule);
  /* Paint white up under the bar so opaque sheet meets chrome continuously */
  box-shadow: 0 -3px 0 0 #fff;
  z-index: 20;
}
/* N6: while any mega is open, drop hdr bottom rule — no gray hairline between bar and sheet */
.hdr:has(.nav-item:hover),
.hdr:has(.nav-item:focus-within) {
  border-bottom-color: transparent;
}
.nav-item:hover .mega, .nav-item:focus-within .mega { display: block; }
/* Mega sheet grows with content (M8): never inherit header-bar 84/68 height */
.mega .wrap,
.mega .inner { height: auto; }
/* N5: sheet height follows product column; side stretches to match (no 3/2 preview force) */
.mega .inner {
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: var(--gut);
  padding-top: 32px;
  padding-bottom: 40px;
  align-items: stretch;
}
.mega h2 { font-size: 22px; line-height: 30px; }
.mis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
.mi {
  display: grid;
  grid-template-columns: 64px 1fr 16px;
  gap: 16px;
  align-items: center;
  padding: 10px;
  border-radius: var(--r);
  font-weight: 500;
  font-size: 15px;
  min-height: 44px;
}
.mi:hover, .mi:focus-visible, .mi.is-on { background: var(--light); }
.mi svg { width: 16px; height: 16px; color: var(--blue); }
.mi .th { width: 64px; height: 44px; overflow: hidden; border-radius: 2px; background: var(--charcoal); display: flex; align-items: center; justify-content: center; }
.mi .th img { width: 100%; height: 100%; object-fit: cover; }
.mi .th.th-empty img { width: 28px; height: 28px; object-fit: contain; }
.mega-side {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mega-preview {
  margin-top: 20px;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  position: relative;
  background: var(--charcoal);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}
.mega-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mega-preview.is-empty { display: flex; align-items: center; justify-content: center; }
.mega-preview.is-empty img {
  position: static;
  width: 64px;
  height: 64px;
  object-fit: contain;
}
/* N5: single-product mega — hide preview so sheet hugs the one .mi row */
.mega .inner:has(.mi:only-child) .mega-preview { display: none; }

.mob { display: none; }
.crumb { font-size: 13px; color: var(--slate); padding: 20px 0; }
.crumb a { color: var(--blue); }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb span { margin: 0 8px; color: var(--steel); }

.ftr { background: var(--charcoal); color: var(--white); padding: 72px 0 0; font-size: 15px; }
.ftr .cols { display: grid; grid-template-columns: 3fr 2fr 5fr 2.4fr; gap: var(--gut); }
.ftr h2 {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 18px;
  line-height: 1.3;
}
.ftr li { list-style: none; margin-bottom: 10px; }
.ftr .svc { columns: 2; column-gap: var(--gut); }
.ftr .base {
  margin-top: 56px;
  border-top: 1px solid #4A5D70;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--white);
}
.ftr .base a { margin-left: 20px; text-decoration: underline; text-underline-offset: 3px; }
.ftr a:hover { color: var(--cyan); }
.ftr .soc { border: 0; padding: 0; }
.ftr .soc a { color: var(--white); }
.ftr .soc a:hover { color: var(--cyan); }

.card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.card:hover, .card:focus-within { border-color: var(--charcoal); }
.card .ph { aspect-ratio: 3/2; background: var(--light); overflow: hidden; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card .ph.none { background: var(--charcoal); display: flex; align-items: center; justify-content: center; }
.card .ph.none img { width: 64px; height: 64px; object-fit: contain; }
.card .bd { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card .bd .link { margin-top: auto; min-height: 44px; align-items: center; }
.grid { display: grid; gap: var(--gut); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th {
  background: var(--charcoal);
  color: var(--white);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-align: left;
  padding: 14px 16px;
  vertical-align: bottom;
}
.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.tbl tr:nth-child(even) td { background: var(--light); }
.tbl td.num, .tbl th.num { text-align: right; }
.tblwrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); }

.cta { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r); overflow: hidden; }
.ctx { padding: 64px; }
.cimg img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gut); align-items: start; }

/* Home hero — G2 multi-product slider (HOME-LOCK). Soft vignette is intentional for this fold only (desktop).
   Desktop rules here are frozen (1440 fold 0 px diff, GM). Phone panel lives in the PHONE-HERO-PANEL block at the end. */
.hero-slider {
  position: relative;
  background: var(--charcoal);
  height: 816px; /* ~1440×900 fold under 84px header */
  max-height: calc(100vh - 84px);
  min-height: 520px;
  overflow: hidden;
  color: var(--white);
}
.hero-slider__track,
.hero-slider__slide {
  position: absolute;
  inset: 0;
}
.hero-slider__slide {
  opacity: 0;
  transition: opacity 0.7s ease;
  z-index: 0;
}
.hero-slider__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.hero-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-slider__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.22) 38%, rgba(0, 0, 0, 0.05) 62%, transparent 78%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.18) 28%, transparent 55%);
}
.hero-slider__copy {
  position: absolute;
  z-index: 3;
  left: max(var(--pad), calc((100vw - var(--max)) / 2));
  bottom: 88px;
  max-width: 640px;
  padding-right: 24px;
}
.hero-slider__eyebrow {
  font-weight: 600;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}
.hero-slider__rule {
  display: block;
  width: 40px;
  height: 4px;
  background: var(--blue);
  margin: 14px 0 20px;
}
.hero-slider__copy h1 {
  color: var(--white);
  font-weight: 700;
  font-size: var(--display-size);
  line-height: var(--display-lh);
  letter-spacing: -0.015em;
}
.hero-slider__line { display: block; }
.hero-slider__support {
  margin: 16px 0 0;
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  color: var(--white);
}
.hero-slider__nav {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 28, 36, 0.45);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hero-slider__nav:hover { background: rgba(20, 28, 36, 0.7); }
.hero-slider__nav--prev { left: max(12px, calc((100vw - var(--max)) / 2 - 8px)); }
.hero-slider__nav--next { right: max(12px, calc((100vw - var(--max)) / 2 - 8px)); }
.hero-slider__dots {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
}
.hero-slider__dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}
.hero-slider__dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.hero-slider__dot.is-active { background: var(--blue); }
.hero-slider__dot:hover { background: rgba(255, 255, 255, 0.85); }
.hero-slider__dot.is-active:hover { background: var(--blue); }
.hero-slider__cta, .hero-slider__pause { display: none; }
.intro { display: grid; grid-template-columns: 6fr 6fr; gap: 64px; align-items: start; }
.stats { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
.stat { display: grid; grid-template-columns: 200px 1fr; align-items: baseline; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.stat b { font-weight: 700; font-size: 48px; line-height: 56px; color: var(--blue); }
.stat span { font-size: 16px; color: var(--slate); }

.phd { background: var(--light); border-bottom: 1px solid var(--rule); }
.phd .crumb { padding: 24px 0 0; }
.phd .in { padding: 32px 0 56px; display: grid; grid-template-columns: 6fr 6fr; gap: var(--gut); align-items: end; }
.phd .in.solo { grid-template-columns: 1fr; }

.pdh { display: grid; grid-template-columns: 5fr 7fr; min-height: 520px; border-bottom: 1px solid var(--rule); }
.pdh .tx {
  background: var(--light);
  padding: 40px max(var(--pad), calc((100vw - var(--max)) / 2)) 64px;
  padding-right: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pdh .tx .crumb { padding: 0; }
.pdh .im img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.tagp {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: var(--r);
}
.art { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gut); }
.art .body h2 { font-size: 28px; line-height: 36px; margin-bottom: 16px; }
.art .body h2 + p { margin-top: 0; }
.art .body p { color: var(--slate); font-size: 17px; line-height: 28px; }
.art .body h2:not(:first-child) { margin-top: 48px; }
.bens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px var(--gut); margin-top: 48px; }
.ben i { display: block; width: 12px; height: 12px; background: var(--blue); margin-bottom: 18px; }
.ben h3 { margin-bottom: 10px; }
.ben p { font-size: 15px; line-height: 24px; }
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.gal[data-cols="1"] { grid-template-columns: 1fr; }
.gal[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.gal figure { position: relative; aspect-ratio: 3/2; overflow: hidden; border-radius: var(--r); background: var(--light); margin: 0; }
.gal img { width: 100%; height: 100%; object-fit: cover; }
.gal .ex {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 44px;
  height: 44px;
  background: var(--white);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  border: 0;
  cursor: pointer;
}
.gal .ex:hover { background: var(--blue); color: var(--white); }
.gal .ex svg { width: 16px; height: 16px; }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.lb {
  border: 0;
  padding: 0;
  background: var(--charcoal);
  max-width: min(1100px, 94vw);
}
.lb img { width: 100%; height: auto; max-height: 86vh; object-fit: contain; }
.lb::backdrop { background: var(--charcoal); }

.chero { display: grid; grid-template-columns: 5fr 7fr; border-bottom: 1px solid var(--rule); }
.chero .tx {
  background: var(--charcoal);
  color: var(--white);
  padding: 40px max(var(--pad), calc((100vw - var(--max)) / 2)) 64px;
  padding-right: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
.chero .crumb { color: var(--white); padding: 0; }
.chero .crumb a { color: var(--cyan); }
.chero .crumb span { color: var(--white); }
.chero .im img { width: 100%; height: 100%; object-fit: cover; min-height: 480px; }
.office { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gut); margin-top: 40px; }
.oc { border: 1px solid var(--rule); border-radius: var(--r); padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.oc .row { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.oc .row svg { width: 20px; height: 20px; color: var(--blue); margin-top: 2px; }
.oc .row small {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--slate);
}
.oc .row b { font-weight: 500; font-size: 17px; }
.map { border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); }
.map img { width: 100%; height: 100%; object-fit: cover; }
.formwrap { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gut); }
.form {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 8px; }
.form .f, .form input, .form select, .form textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--steel); /* F7: Steel #6C7A89, was a 2.3:1 grey */
  border-radius: var(--r);
  padding: 12px 16px;
  min-height: 48px;
  font: 400 16px var(--f);
  color: var(--charcoal);
  background: var(--white);
}
.form .full { grid-column: 1 / -1; }
.form textarea { height: 140px; resize: vertical; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--charcoal); }
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.side { display: flex; flex-direction: column; gap: var(--gut); }
.side .tx { background: var(--charcoal); color: var(--white); padding: 40px; border-radius: var(--r); }
.side img { border-radius: var(--r); width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.stub p { max-width: 62ch; }

[hidden] { display: none !important; }
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.co2 { display: grid; gap: 12px; max-width: 760px; }
.co2__label {
  font-weight: 600;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  color: var(--blue);
}
.co2__figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.co2__figure b {
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.co2__unit { font-weight: 600; font-size: 18px; line-height: 26px; }
.co2__note { font-size: 14px; line-height: 22px; color: var(--slate); max-width: 68ch; }
.calc { display: grid; gap: 40px; }
.calc__step { display: grid; gap: 16px; }
.calc .field label, .finder-bar label:not(.sr), .gate-form label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 8px; }
.calc .f, .finder-bar .f, .gate-form .f {
  display: block;
  width: 100%;
  border: 1px solid var(--steel); /* F7 */
  border-radius: var(--r);
  padding: 12px 14px;
  background: var(--white);
  min-height: 44px;
}
.calc .tbl { min-width: 920px; }
.calc .tbl td .f { min-width: 120px; }
.calc .tbl tfoot td { background: var(--light); font-weight: 600; border-top: 1px solid var(--rule); }
.calc__foot { font-size: 14px; line-height: 22px; color: var(--slate); margin-top: 8px; }
.calc__method {
  padding: 20px 24px;
  background: var(--light);
  border-left: 4px solid var(--blue);
  font-size: 15px;
  line-height: 24px;
}
.calc__summary, .calc__results { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.calc__summary { grid-template-columns: repeat(3, 1fr); }
.calc__summary div, .calc__results div {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.calc__summary div { padding-right: 16px; }
.calc__results { grid-template-columns: 1fr; }
.calc__results div { grid-template-columns: 1fr auto; align-items: baseline; }
.calc dt { font-size: 14px; color: var(--slate); }
.calc dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.gate-form { max-width: 880px; margin-top: 28px; grid-template-columns: 1fr; }
.cover-fields { grid-template-columns: 1fr 1fr; max-width: 880px; }
.cover-fields > div { min-width: 0; }
.cover-fields .full { grid-column: 1 / -1; }
.form input[readonly] {
  background: var(--light);
  color: var(--slate);
  cursor: default;
}
.form input[readonly]:hover { border-color: var(--steel); }
.cover-report {
  display: grid;
  gap: 8px;
  max-width: 880px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 40px;
}
.cover-report .h3 { margin-top: 28px; }
.cover-report .calc__results { margin-top: 4px; }
.cover-report .calc__results dd { max-width: 62%; text-align: right; }
.cover-report .form-msg {
  margin-top: 8px;
  padding: 12px 16px;
  background: var(--light);
  border-radius: var(--r);
  border-left: 4px solid var(--charcoal);
}
.cover-report .calc__method + .calc__method { margin-top: 8px; }
[data-cover-design] > .banner,
[data-cover-design] > .form-msg {
  max-width: 880px;
  margin-top: 0;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--blue);
}
.tool-panel { max-width: 720px; display: grid; gap: 8px; }
.banner {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--light);
  border-radius: var(--r);
  border-left: 4px solid var(--blue);
}
.form-msg { font-weight: 500; }
.strip { margin-top: 28px; font-weight: 500; }
.finder-bar { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.formwrap > .banner { grid-column: 1 / -1; margin-top: 0; }
a.card { color: inherit; }

@media (max-width: 1279px) {
  .nav, .hdr .soc, .hdr .hcta { display: none; }
  .burger { display: flex; }
  .nav-item:hover .mega, .nav-item:focus-within .mega { display: none; }
  .mob {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    padding: 8px 20px 28px;
    max-height: calc(100vh - 68px);
    overflow: auto;
    z-index: 30;
  }
  .mob[hidden] { display: none; }
  .mr {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: none;
    font-weight: 500;
    font-size: 17px;
    text-align: left;
    cursor: pointer;
    color: var(--charcoal);
    text-decoration: none;
  }
  .mr svg { width: 14px; height: 14px; }
  .sub { padding: 8px 0 8px 16px; border-left: 3px solid var(--blue); margin: 8px 0; }
  .sub[hidden] { display: none; }
  .sub a { display: flex; align-items: center; min-height: 44px; padding: 9px 0; font-size: 15px; color: var(--slate); }
  .mr:hover, .sub a:hover { color: var(--blue); }
  .mob .btn { width: 100%; justify-content: center; margin-top: 24px; }
  .mob .soc { border: 0; padding: 20px 0 0; justify-content: center; gap: 28px; }
}

@media (max-width: 760px) {
  :root { --sec: 64px; --gut: 16px; }
  h1, .h1 { font-size: 36px; line-height: 44px; }
  h2, .h2 { font-size: 28px; line-height: 36px; }
  h3, .h3 { font-size: 20px; line-height: 28px; }
  .lead { font-size: 17px; line-height: 28px; }
  .hdr > .wrap { height: 68px; }
  .hdr .logo img { height: 28px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .ftr .cols { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .ftr .cols > div:nth-child(3) { grid-column: 1 / -1; }
  .ftr .base { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .btn { padding: 16px 22px; }
  .card .ph.none { display: none; }
  .ftr .base a { display: block; margin: 8px 0 0; }
  .ftr .soc { gap: 24px; }
  .cta { grid-template-columns: 1fr; }
  .ctx { padding: 40px 24px; }
  .cimg img { min-height: 220px; aspect-ratio: 3/2; }
  .split { grid-template-columns: 1fr; gap: 12px; }
  .hero-slider {
    height: auto;
    max-height: none;
    min-height: 420px;
    aspect-ratio: 4 / 5;
  }
  /* Per-slide mobile focal points — desktop stays object-position: center. */
  .hero-slider__slide img[data-focus="liner-left"] {
    object-position: 30% center;
  }
  .hero-slider__slide img[data-focus="headwall-left"] {
    object-position: 20% center;
  }
  /* Slide 5: 4:3 into 4:5 has no Y overflow under cover — scale creates crop room toward lower pits. */
  .hero-slider__slide img[data-focus="pits-lower"] {
    object-position: center 70%;
    transform: scale(1.22);
    transform-origin: center 72%;
  }
  .hero-slider__copy {
    left: var(--pad);
    right: var(--pad);
    bottom: 64px;
    max-width: none;
  }
  .hero-slider__copy h1 { font-size: 36px; line-height: 44px; }
  .hero-slider__support { font-size: 18px; line-height: 26px; }
  .co2__figure b { font-size: 40px; line-height: 48px; }
  .finder-bar, .calc__summary, .cover-fields { grid-template-columns: 1fr; }
  .gate-form, .cover-report { padding: 28px 20px; }
  .cover-report .calc__results div { grid-template-columns: 1fr; }
  .cover-report .calc__results dd { max-width: none; text-align: left; }
  .hero-slider__nav--prev { left: 12px; }
  .hero-slider__nav--next { right: 12px; }
  .hero-slider__dots { bottom: 18px; }
  .intro { grid-template-columns: 1fr; gap: 40px; }
  .stat { grid-template-columns: 1fr; gap: 4px; padding: 22px 0; }
  .stat b { font-size: 40px; line-height: 48px; }
  .phd .in { grid-template-columns: 1fr; gap: 16px; padding: 20px 0 40px; }
  .pdh { grid-template-columns: 1fr; min-height: 0; }
  .pdh .tx { padding: 20px var(--pad) 36px; gap: 28px; }
  .pdh .im { order: -1; }
  .pdh .im img { aspect-ratio: 3/2; height: auto; }
  .art { grid-template-columns: 1fr; }
  .bens { grid-template-columns: 1fr; gap: 32px; }
  .gal { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gal[data-cols="1"] { grid-template-columns: 1fr; }
  .head-row { flex-direction: column; align-items: flex-start; }
  .tbl { font-size: 14px; }
  .tbl th, .tbl td { padding: 12px; }
  .tbl th:first-child, .tbl td:first-child { position: sticky; left: 0; }
  .tbl th:first-child { background: var(--charcoal); }
  .tbl td:first-child { background: var(--white); }
  .tbl tr:nth-child(even) td:first-child { background: var(--light); }
  .chero { grid-template-columns: 1fr; }
  .chero .im { order: -1; }
  .chero .im img { min-height: 0; aspect-ratio: 4/3; }
  .chero .tx { padding: 20px var(--pad) 40px; gap: 28px; }
  .office, .formwrap { grid-template-columns: 1fr; }
  .oc, .form, .side .tx { padding: 28px 20px; }
  .map img { aspect-ratio: 1/1; }
  .form { grid-template-columns: 1fr; }
}

/* T&Cs of Sale link (Design FINAL item 7): icon + underlined label, 44px tap height */
.tcs-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--blue, #0051F5); text-decoration: none; }
.tcs-link span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tcs-link:hover span { text-decoration-thickness: 2px; }
.tcs-link:focus-visible { outline: 2px solid #0051F5; outline-offset: 2px; }
.form-terms { margin: 0; }
.ftr .base .tcs-link { color: #00C8FF; margin-left: 20px; }
.ftr .base .tcs-link span { text-decoration: underline; }
.ftr .base .tcs-link:focus-visible { outline-color: #FFFFFF; }
@media (max-width: 760px) { .ftr .base .tcs-link { display: flex; margin: 8px 0 0; } }

/* ---- Form states (Design FINAL Fix 4, items 5 and 6) ---------------------------------
   Error text is Charcoal, never Warn (Warn is a decorative bar/icon only). */
.form .opt, .gate-form .opt { font-weight: 400; color: var(--slate); }
.form .label { display: block; font-weight: 500; font-size: 14px; line-height: 20px; margin: 0 0 8px; color: var(--charcoal); }
.form ::placeholder { color: var(--slate); opacity: 1; }
.field-help { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--slate); }
.field-error { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--charcoal); }
.err-icon { flex: none; width: 20px; height: 20px; }
.form .has-error > .f,
.form .has-error > input,
.form .has-error > select,
.form .has-error > textarea { border: 2px solid var(--charcoal); box-shadow: inset 4px 0 0 var(--warn); }
.form-alert { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--warn); border-radius: var(--r); color: var(--charcoal); font-size: 14px; line-height: 20px; }
.form-alert p { margin: 0; }
.form-alert p + p { margin-top: 4px; }
.form-alert__title { font-weight: 600; font-size: 16px; line-height: 24px; }
.form-alert:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
/* inline links: vertical padding gives a 44px hit area without breaking the line */
.form-alert a, .form-success a:not(.btn), .brochure__privacy a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; padding: 12px 0; }
.form-success { background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--blue); border-radius: var(--r); padding: 24px; color: var(--charcoal); align-self: start; }
.form-success p { margin: 0; }
.form-success__title { font-size: 18px; line-height: 26px; font-weight: 600; }
.form-success:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.form-success__slot:not(:empty) { margin-top: 16px; }
.form-success a.btn.form-download { min-height: 48px; color: var(--white); background: var(--blue); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.form-success a.btn.form-download:hover { background: var(--charcoal); }
.form-success a.btn.form-download:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 760px) { .form-success a.btn.form-download { width: 100%; justify-content: center; } }
.form-download svg { width: 16px; height: 16px; }
/* Sending: fields readonly on Glacier, values kept */
[data-state="sending"] .form .f,
[data-state="sending"] .form input:not([type="hidden"]),
[data-state="sending"] .form select,
[data-state="sending"] .form textarea,
.form[data-state="sending"] .f { background: var(--light); }
[data-state="sending"] .form select { pointer-events: none; }
/* Attachments (item 6) */
.file-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.file-pick__btn { min-height: 48px; position: relative; }
.form .file-pick__btn { display: inline-flex; margin: 0; font-size: 14px; font-weight: 500; }
.file-pick__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0, 0, 0, 0); }
.form .file-pick__input { display: inline; width: 1px; padding: 0; border: 0; }
.file-pick__input:focus-visible + .file-pick__status, .file-pick__btn:has(+ .file-pick__input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.file-pick__status { font-size: 14px; color: var(--slate); }
.file-chips { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.file-chip { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); color: var(--charcoal); min-width: 0; }
.file-chip.is-error { border: 2px solid var(--charcoal); box-shadow: inset 4px 0 0 var(--warn); }
.file-chip > svg { flex: none; }
.file-chip__meta { display: grid; min-width: 0; flex: 1; }
.file-chip__name { font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip__info { font-size: 12px; line-height: 16px; color: var(--slate); }
.file-chip__remove { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--light); color: var(--charcoal); border: 0; border-radius: var(--r); font-size: 22px; line-height: 1; cursor: pointer; }
.file-chip__remove:hover { background: var(--rule); }
.file-chip__remove:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Brochure gate (item 5) */
.brochure { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gut); margin-top: 48px; align-items: start; }
.brochure__cover img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--r); display: block; }
.brochure__title { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--charcoal); margin: 0; }
.brochure__body { margin: 8px 0 24px; color: var(--slate); font-size: 16px; line-height: 24px; }
.form.brochure__card { background: var(--light); border: 0; padding: 24px; }
.brochure__card .form-submit { width: auto; }
.brochure__privacy { margin: 0; font-size: 14px; line-height: 20px; color: var(--slate); }
@media (max-width: 1279px) {
  .brochure { grid-template-columns: 1fr; }
  .brochure__cover { display: none; }
}
@media (max-width: 760px) {
  .form .form-submit, .brochure__card .form-submit { width: 100%; justify-content: center; }
  .form.brochure__card { padding: 24px; grid-template-columns: 1fr; }
}

/* ---- F6-F9 (Design FINAL; REVIEW-cf3dfd1 MUST 3-6) ------------------------------------ */
/* F7: hover Slate; focus 2px Blue border + 2px Blue outline, offset 2 */
.form .f:hover, .form input:hover, .form select:hover, .form textarea:hover,
.calc .f:hover, .finder-bar .f:hover, .gate-form .f:hover { border-color: var(--slate); }
.form input[readonly]:hover { border-color: var(--steel); }
.form .f:focus-visible, .form input:not(.file-pick__input):focus-visible, .form select:focus-visible, .form textarea:focus-visible,
.calc .f:focus-visible, .finder-bar .f:focus-visible, .gate-form .f:focus-visible {
  border: 2px solid var(--blue); outline: 2px solid var(--blue); outline-offset: 2px;
}
.form .f:focus-visible, .form input:not(.file-pick__input):focus-visible, .form textarea:focus-visible { padding: 11px 15px; }
/* F8: primary button on dark sections and footer hovers to White with Charcoal text */
.bg-dark .btn:not(.ghost):not(.white):hover,
.ftr .btn:not(.ghost):not(.white):hover,
.dark-tx .btn:not(.ghost):not(.white):hover { background: var(--white); color: var(--charcoal); }
/* F6: gallery Expand, two-tone ring readable on any photo (>=3:1) */
.gal .ex:focus-visible { outline: 2px solid #2A3F52; outline-offset: 2px; box-shadow: 0 0 0 4px #FFFFFF; }
/* F9: sending button keeps focus (aria-disabled, never disabled) */
.btn[aria-disabled="true"] { cursor: progress; background: var(--charcoal); color: var(--white); }
.bg-dark .btn[aria-disabled="true"] { background: var(--white); color: var(--charcoal); }
.btn[aria-busy="true"] svg { display: none; }
/* SHOULD: footer small targets at phone width (Privacy Policy 254x21; social icons 20x20 box,
   which already carry a 44px ::before hit area) */
@media (max-width: 760px) {
  .ftr .base a { padding: 12px 0; margin-top: -4px; }
  .ftr .soc a { width: 44px; height: 44px; }
  .ftr .soc { gap: 4px; }
}
.form .has-error > .f:hover, .form .has-error > input:hover, .form .has-error > select:hover, .form .has-error > textarea:hover { border-color: var(--charcoal); }

/* ---- PHONE-HERO-PANEL (HOME-LOCK, Design FINAL Fix 1; <=760px only) -----------------------
   Photo 4:3 with no text and no vignette, then a flat Charcoal panel, then the control row.
   Eyebrow Cyan on Charcoal 5.54:1, H1 White 10.87:1. Controls never overlap the copy. */
@media (max-width: 760px) {
  .hero-slider {
    display: grid;
    grid-template-columns: 20px 44px 12px 44px 1fr 44px 20px;
    grid-template-areas:
      "photo photo photo photo photo photo photo"
      "copy copy copy copy copy copy copy"
      ". prev . pause dots next .";
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    overflow: visible;
    background: var(--charcoal);
    padding-bottom: 20px;
  }
  .hero-slider__track { grid-area: photo; position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: hidden; }
  .hero-slider__vignette { display: none; }
  .hero-slider__copy {
    grid-area: copy;
    position: static;
    margin: 0 20px;
    padding: 24px 0 24px;
    max-width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
    margin-bottom: 16px;
  }
  .hero-slider__eyebrow { color: var(--cyan); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; margin: 0 0 12px; }
  .hero-slider__rule { background: var(--cyan); margin: 0 0 16px; }
  .hero-slider__copy h1 { font-size: 30px; line-height: 38px; font-weight: 600; letter-spacing: 0; margin: 0 0 12px; }
  .hero-slider__support { font-size: 16px; line-height: 24px; font-weight: 400; margin: 0 0 24px; }
  .hero-slider__cta { display: flex; justify-content: center; width: 100%; min-height: 48px; border-radius: 4px; }
  .hero-slider__cta:hover { background: var(--light); color: var(--charcoal); }
  .hero-slider__nav, .hero-slider__pause {
    position: static;
    transform: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--white);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }
  .hero-slider__nav:hover, .hero-slider__pause:hover { background: var(--white); color: var(--charcoal); }
  .hero-slider__nav--prev { grid-area: prev; left: auto; }
  .hero-slider__nav--next { grid-area: next; right: auto; }
  .hero-slider__pause { grid-area: pause; }
  .hero-slider__pause .hero-slider__icon-play { display: none; }
  .hero-slider__pause.is-paused .hero-slider__icon-play { display: block; }
  .hero-slider__pause.is-paused .hero-slider__icon-pause { display: none; }
  .hero-slider__dots {
    grid-area: dots;
    position: static;
    transform: none;
    justify-content: center;
    gap: 2px;
    align-self: center;
  }
  .hero-slider__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 4px, transparent 4.5px);
  }
  .hero-slider__dot::before { width: 24px; height: 24px; }
  .hero-slider__dot.is-active, .hero-slider__dot.is-active:hover { background: radial-gradient(circle, var(--white) 0 5px, transparent 5.5px); }
  .hero-slider__dot:hover { background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 4px, transparent 4.5px); }
  .hero-slider :focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
}
@media (max-width: 374px) {
  .hero-slider__copy h1 { font-size: 28px; line-height: 36px; }
}