:root {
  --bg: #121816;
  --header: #101614;
  --card: #1a211d;
  --ink: #f4f7f5;
  --muted: #b7c4bb;
  --line: rgba(255, 255, 255, 0.1);
  --green: #3ddc84;
  --green-ink: #062214;
  --soft: #8fa097;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #f3f5f3;
  --header: #ffffff;
  --card: #ffffff;
  --ink: #17211c;
  --muted: #526056;
  --line: #d7ded8;
  --soft: #5c6b62;
  --shadow: 0 16px 36px rgba(18, 28, 22, 0.08);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 64px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 system-ui, "Segoe UI", sans-serif;
}
button, input { font: inherit; color: inherit; }
a { color: var(--green); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.bar {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  background: var(--header);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: 0 0 auto; }
.mark {
  width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center;
  background: #161616; color: #fff; border: 1px solid #2c2c2c;
  font-weight: 700; letter-spacing: -0.04em;
}
.word { display: flex; flex-direction: column; line-height: 1.05; }
.word strong { font-size: 12px; letter-spacing: 0.14em; font-weight: 700; }
.word small { font-size: 9px; letter-spacing: 0.2em; color: var(--soft); }
nav { display: flex; align-items: center; gap: 18px; min-width: 0; }
nav a { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
nav a.menu::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}
nav a:hover { color: var(--green); }
.tools { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.phone { color: var(--ink); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.light-switch {
  height: 36px; padding: 0 14px 0 8px;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); cursor: pointer;
}
.bulb {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--green); display: grid; place-items: center;
}
.bulb::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

.hero {
  min-height: 700px;
  display: flex;
  align-items: center;
  --card: #1a211d;
  --ink: #f4f7f5;
  --muted: #d5ddd8;
  --line: rgba(255, 255, 255, 0.14);
  --soft: #c5d0c8;
  color: #fff;
  background-color: #10140f;
  background-image:
    linear-gradient(90deg, rgba(8, 12, 10, 0.86) 0%, rgba(8, 12, 10, 0.62) 36%, rgba(8, 12, 10, 0.18) 68%, rgba(8, 12, 10, 0.28) 100%),
    url("images/hero.jpg");
  background-size: cover;
  background-position: center 42%;
}
.hero-copy { width: min(1200px, calc(100% - 64px)); margin: 0 auto; padding: 28px 0 120px; }
.hero h1 {
  margin: 0 0 14px;
  font-size: 62px;
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 650;
}
.hero h1 em { font-style: normal; color: var(--green); }
.lede { max-width: 440px; margin: 0 0 22px; color: #d7e0da; font-size: 16.5px; }
.actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--green-ink);
  border: 0; border-radius: 999px; padding: 12px 18px;
  font-weight: 700; text-decoration: none; cursor: pointer; width: fit-content;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.ghost {
  background: rgba(8, 12, 10, 0.35);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.38);
}
.btn.line { background: transparent; color: var(--ink); border: 1px solid var(--line); }

.door-wrap {
  width: min(1200px, calc(100% - 48px));
  margin: -88px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}
.door {
  position: relative; height: 236px; border-radius: 18px; overflow: hidden;
  display: flex; align-items: flex-end; color: #fff; text-decoration: none;
  box-shadow: var(--shadow); background: #1a201c;
}
.door-bg { position: absolute; inset: 0; background: #1a2420 center/cover no-repeat; }
.door::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.05) 58%);
}
.door-copy { position: relative; z-index: 1; padding: 18px 18px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.door-copy strong { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; }
.door-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--green); color: var(--green-ink);
  display: grid; place-items: center;
}

.stage, .page, .specify { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.stage { padding: 28px 0 12px; }
.kicker { margin: 0 0 8px; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; color: #c9e7d6; }
.product-hero { align-items: stretch; min-height: 640px; }
.product-grid {
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
  padding: 48px 0 56px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 36px;
  align-items: end;
}
.order-label { margin: 18px 0 2px; color: #d5ddd8; font-size: 14px; }
.code { margin: 0; font-family: Consolas, "Segoe UI Mono", ui-monospace, monospace; font-size: 26px; letter-spacing: 0.01em; }
.rule { width: 84px; height: 3px; border: 0; background: var(--green); margin: 12px 0; }
.big-lm { margin: 0; font-size: 48px; font-weight: 680; letter-spacing: -0.03em; line-height: 1; }
.row-line, .range { margin: 10px 0 0; color: #d5ddd8; max-width: 560px; }
.hero-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.options {
  background: rgba(16, 20, 18, 0.9);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 18px 18px 8px;
  box-shadow: var(--shadow);
}
.options h2 { margin: 0 0 4px; font-size: 18px; font-weight: 650; }
.options ol { list-style: none; margin: 8px 0 0; padding: 0; }
.options li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.options .key { display: flex; align-items: center; gap: 8px; color: #d7e0da; }
.opt-ico {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center; font-size: 11px; color: #d7e0da;
}
.watts { display: flex; gap: 6px; }
.watts button {
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff;
  border-radius: 999px; padding: 5px 10px; cursor: pointer;
}
.watts button[aria-pressed="true"] { background: var(--green); color: var(--green-ink); border-color: var(--green); }
.silver { display: block; text-align: right; color: #9fb0a6; font-size: 12px; }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); padding: 12px 14px; cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }
.panel { padding: 16px 0 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; }
.chips li {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 12px;
}
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 28px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.card img { width: 100%; height: 176px; object-fit: cover; background: #111816; }
.card .pad { padding: 16px 16px 18px; }
.card h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.02em; }
.card p { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; }
.textlink { background: none; border: 0; padding: 0; color: var(--green); font-weight: 700; cursor: pointer; }

.specify { padding: 8px 0 36px; }
.specify-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; align-items: start; }
.widget, .worth, .step, .box, .preview-sheet {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
}
.widget, .worth { padding: 20px; }
.widget h2, .worth h2, .step h2 { margin: 0 0 8px; letter-spacing: -0.03em; }
.contrast { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 17px; }
.worth ul { margin: 0; padding-left: 18px; }
.worth li { margin: 0 0 8px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fields label, .stack label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 14px; }
.fields input, .stack input {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.span-2 { grid-column: 1 / -1; }
.result { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fine, .muted { color: var(--muted); }
.section-label { margin: 0 0 12px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }

.record-banner {
  padding: 12px 28px; background: #18201c; border-bottom: 1px solid var(--line);
  color: #c5d0c8; font-size: 14px;
}
html[data-theme="light"] .record-banner { background: #e7f6ee; color: #234233; }
.record-banner strong { color: var(--ink); }
html[data-theme="light"] .record-banner strong { color: #062214; }
.choices { display: grid; grid-template-columns: 360px 1fr; align-items: start; }
.banks { padding: 16px 16px 32px; border-right: 1px solid var(--line); }
.preview-wrap { padding: 20px 22px 40px; }
fieldset { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 12px; padding: 8px 12px 12px; background: var(--card); }
legend { padding: 0 6px; color: var(--soft); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
fieldset label { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin-top: 3px; accent-color: #14924a; }
.bank-off { background: rgba(92, 48, 16, 0.28); border-color: #a86a32; }
.preview-sheet { padding: 22px; }
.preview-sheet h2 { margin: 4px 0 8px; font-size: 34px; letter-spacing: -0.03em; }
.mini-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.mini-tabs span { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font-size: 13px; color: var(--muted); }
.block { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.block h3 { margin: 0 0 4px; font-size: 15px; }
.block p { margin: 0; }

.page { padding: 22px 0 48px; }
.intro h2 { margin: 8px 0 8px; font-size: 28px; letter-spacing: -0.03em; }
.intro p { max-width: 760px; }
.intro ul { margin: 8px 0 0; padding-left: 18px; max-width: 760px; }
.note { color: var(--muted); font-size: 14.5px; max-width: 760px; }
.spec-block { margin: 28px 0; }
.spec-block h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.03em; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.spec-grid h3, .spec-block h3 { margin: 0 0 8px; font-size: 16px; }
table.spec { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.spec th, table.spec td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.spec th { color: var(--muted); font-weight: 600; width: 46%; }
.optic-grid, .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.shot {
  margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.shot img { width: 100%; height: 140px; object-fit: contain; background: #101614; }
.shot figcaption { padding: 10px 12px 12px; color: var(--muted); font-size: 14px; }
.shot.missing img { display: none; }
.shot.missing figcaption::before {
  content: "The photograph is the live one";
  display: grid; place-items: center; min-height: 140px; margin: -10px -12px 10px; padding: 12px;
  background: #101614; color: #d5ddd8; text-align: center;
}
html[data-theme="light"] .shot.missing figcaption::before { background: #e7ece8; color: #17211c; }
.parts { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.parts li, .related-list li {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.parts a, .related-list a { font-weight: 700; text-decoration: none; }
.parts span, .related-list span { color: var(--muted); text-align: right; }
.related-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.group-label { margin: 16px 0 8px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.feature { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; margin: 14px 0; }
.feature img { width: 100%; border-radius: 12px; background: #101614; }
.feature.missing img { display: none; }
a.textlink { text-decoration: none; }
.card.missing img { display: none; }
.card.missing::before, .feature.missing::before {
  content: "The photograph is the live one";
  display: grid; place-items: center; min-height: 176px; padding: 12px;
  background: #101614; color: #d5ddd8; text-align: center;
}
html[data-theme="light"] .card.missing::before,
html[data-theme="light"] .feature.missing::before { background: #e7ece8; color: #17211c; }
.on-code { outline: 2px solid var(--green); }
.walk { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.step { padding: 16px 18px 18px; }
.step-head { display: flex; align-items: center; gap: 12px; }
.step h2 { margin: 0; }
.step h2 button {
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  font: inherit; font-weight: 650; letter-spacing: -0.03em; text-align: left;
}
.num {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); font-weight: 700;
}
.step.open .num { background: var(--green); color: var(--green-ink); border-color: var(--green); }
.step h2 { font-size: 24px; }
.step-body { margin-top: 12px; }
.step.closed .step-body,
.step.done .step-body > :not(.done-line),
.step:not(.closed) .shut,
.step:not(.done) .done-line { display: none; }
.step.done .done-line { display: block; margin-top: 8px; }
.step.done .num { background: transparent; color: var(--green); border-color: var(--green); }
.done-line, .shut { margin: 8px 0 0; color: var(--muted); }
.sheet-name { display: flex; gap: 14px; margin: 0 0 6px; font-size: 20px; }
.sheet-name span { width: 72px; color: var(--muted); }
.menu-pair, .two, .fit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  display: flex; gap: 10px; align-items: center;
  min-height: 56px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
}
.sheet { width: 100%; border-collapse: collapse; }
.sheet td { padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sheet .choice { min-height: 44px; border: 0; background: transparent; padding: 4px 0; }
.tag { display: inline-block; border-radius: 999px; padding: 3px 8px; font-size: 13px; border: 1px solid var(--line); }
.tag.yes { background: rgba(61, 220, 132, 0.12); }
.tag.no { background: rgba(168, 106, 50, 0.2); color: #f3d2ae; border-color: #a86a32; }
html[data-theme="light"] .tag.no { color: #6d3d12; background: #fff4e8; }
.box { padding: 14px; background: var(--bg); }
.box h3 { margin: 0 0 8px; font-size: 16px; }
.figures { font-size: 20px; margin: 0 0 8px; }
.refuse {
  margin-top: 10px; border: 1px solid #a86a32; background: rgba(92, 48, 16, 0.35);
  color: #f6d7b4; border-radius: 12px; padding: 12px 14px;
}
html[data-theme="light"] .refuse { background: #fff4e8; color: #6d3d12; }
.files, .stack { display: grid; gap: 8px; }
.file-row, .part-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 52px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
}
.file-row.attached { border-color: var(--green); }
.part-row.off { background: rgba(92, 48, 16, 0.28); color: #f6d7b4; border-color: #a86a32; }
html[data-theme="light"] .part-row.off { background: #fff4e8; color: #6d3d12; }
#parts-bank .part-row { margin-top: 6px; }
.actions-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.public {
  border-radius: 18px; padding: 32px 28px 24px; color: #fff;
  background:
    linear-gradient(90deg, rgba(8,12,10,.9), rgba(8,12,10,.62) 62%, rgba(8,12,10,.28)),
    url("images/hero.jpg") center/cover;
}
.public h2 { margin: 0 0 6px; font-size: 42px; letter-spacing: -0.03em; }
.public .panel {
  margin-top: 12px; background: rgba(12, 16, 14, 0.88);
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 14px;
}
.public .panel h3 { margin: 8px 0 4px; font-size: 15px; }
.public .panel h3:first-child { margin-top: 0; }
.public .panel p, .public .panel li { margin: 0; }
.public ul { margin: 4px 0 0; padding-left: 18px; }
.record-line { margin: 14px 0 0; font-size: 17px; max-width: 760px; }

.sitefoot { margin-top: 36px; border-top: 1px solid var(--line); padding: 26px 28px 22px; color: var(--muted); font-size: 14px; }
.sitefoot .inner { width: min(1200px, 100%); margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; }
.sitefoot strong { color: var(--ink); display: block; margin-bottom: 4px; }
.sitefoot a { color: var(--muted); text-decoration: none; }
.sitefoot a:hover { color: var(--green); }
.builder-grid { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.builder-wrap .actions { display: flex; gap: 8px; margin-top: 8px; }
.builder-wrap .actions button, #tray .btn { margin: 0 0 8px; }
#tray { display: grid; }
#spec-cards form, #pool-cards form { display: grid; gap: 8px; }
#spec-cards label, #pool-cards label, #optic-ticks label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 13px; }
#spec-cards input, #pool-cards input { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
#optic-ticks { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
#optic-ticks label { flex-direction: row; align-items: center; }
.quiet { margin-top: 8px; font-size: 13px; }

.start-page { width: min(720px, calc(100% - 48px)); margin: 56px auto 80px; }
.start-page h1 { margin: 0 0 8px; font-size: 40px; letter-spacing: -0.03em; }
.start-actions { display: grid; gap: 16px; margin-top: 28px; }
.start-link {
  display: block; padding: 28px 26px; border-radius: 18px;
  background: var(--green); color: var(--green-ink);
  text-decoration: none; font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
}
.start-link.second { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.series-top {
  width: min(1100px, calc(100% - 48px));
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: start;
}
.series-top h2 { margin: 22px 0 8px; font-size: 18px; }
.series-top .code { font-size: 22px; }
.series-top .big-lm { font-size: 56px; margin: 4px 0 12px; }
.series-top .watts button {
  color: var(--ink); border-color: var(--line); padding: 10px 16px; font-weight: 700;
}
.series-top .watts button[aria-pressed="true"] { color: var(--green-ink); }
.big-lx { margin: 8px 0; font-size: 32px; font-weight: 700; }
#lux { width: min(420px, 100%); accent-color: var(--green); }
.pool-picks, .optic-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pool-picks button, .optic-picks button {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 650;
}
.pool-picks button[aria-pressed="true"], .optic-picks button[aria-pressed="true"] {
  background: var(--green); color: var(--green-ink); border-color: var(--green);
}
.diagrams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; }
.diagrams figure {
  margin: 0; min-width: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 12px 12px;
}
.diagrams figcaption { font-weight: 700; margin-bottom: 4px; }
.diagrams svg { width: min(100%, 220px); height: auto; aspect-ratio: 1; color: var(--green); display: block; }
.flow-shell { width: min(760px, calc(100% - 48px)); margin: 28px auto 64px; }
.flow-shell h1 { margin: 0 0 12px; font-size: 32px; letter-spacing: -0.03em; }
.flow-shell .stack label { margin-bottom: 8px; }
#step-label { margin: 0 0 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); font-size: 13px; }

@media (max-width: 980px) {
  .hero h1 { font-size: 42px; }
  .bar > nav { display: none; }
  .product-grid, .door-wrap, .cards, .specify-grid, .choices, .two, .menu-pair, .fit, .fields, .spec-grid, .optic-grid, .gallery, .feature, .series-top, .diagrams { grid-template-columns: 1fr; }
  .parts li, .related-list li { flex-direction: column; align-items: flex-start; }
  .parts span, .related-list span { text-align: left; }
  .bar { height: auto; padding: 12px 16px; flex-wrap: wrap; }
  .k-site > .k-nav { display: flex; flex-flow: row nowrap; }
}

.k-site { background: #f6f7f6; color: #1c1c1c; }
.k-top {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 16px; background: #fff; color: #1c1c1c;
  border-bottom: 1px solid #ececec;
}
.k-brand { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.k-mark {
  width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
  background: #17803d; color: #fff; font-size: 13px; font-weight: 800;
}
.k-word { display: flex; flex-direction: column; line-height: 1.05; }
.k-word strong { font-size: 11px; letter-spacing: 0.12em; }
.k-word small { font-size: 8px; letter-spacing: 0.16em; color: #17803d; }
.k-search { flex: 1; display: flex; justify-content: center; }
.k-search input {
  width: min(320px, 100%); height: 28px; border-radius: 999px; font-size: 13px;
  border: 1px solid #e3e3e3; background: #fff; padding: 0 12px; color: #1c1c1c;
}
.k-phone { color: inherit; text-decoration: none; font-size: 12px; white-space: nowrap; }
.k-top .light-switch { margin-left: auto; height: 26px; padding: 0 10px 0 6px; font-size: 12px; gap: 6px; }
.k-top .bulb { width: 16px; height: 16px; }
.k-top .bulb::before { width: 6px; height: 6px; }
.k-nav {
  display: flex; flex-flow: row nowrap; gap: 2px 14px; align-items: center;
  min-height: 32px; padding: 0 16px; background: #fff; color: #222;
  border-bottom: 1px solid #ececec;
  font-size: 10px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
  position: relative; z-index: 6;
}
.k-nav > .k-drop, .k-nav > a, .k-nav > .k-nav-end { flex: 0 0 auto; width: auto; }
.k-nav > a, .k-drop > button { white-space: nowrap; }
.k-nav a { color: inherit; text-decoration: none; }
.k-drop { position: relative; }
.k-drop > button {
  background: none; border: 0; padding: 4px 2px; color: inherit; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: uppercase;
}
.k-nav > a { padding: 4px 2px; }
.k-drop > button::after, .k-nav > a.has-menu::after {
  content: ""; display: inline-block; margin-left: 6px;
  border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px);
}
.k-menu {
  position: absolute; z-index: 5; top: 100%; left: 0; min-width: 240px;
  background: #fff; color: #1c1c1c; border: 1px solid #e5e5e5; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08); padding: 8px; text-transform: none; letter-spacing: 0;
}
.k-drop > .k-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
}
.k-menu a { display: block; padding: 8px 10px; border-radius: 8px; color: #1c1c1c; }
.k-nav a:hover,
.k-nav a:focus-visible,
.k-drop > button:hover,
.k-drop > button:focus-visible {
  color: #17803d;
  background: transparent;
}
.k-nav .k-find:hover,
.k-nav .k-find:focus-visible {
  color: #146b34;
  background: transparent;
}
.k-menu a:hover,
.k-menu a:focus-visible {
  background: #f3f6f4;
  color: #1c1c1c;
}
.k-menu a:hover strong,
.k-menu a:focus-visible strong { color: #1c1c1c; }
.k-feat:hover span,
.k-feat:focus-visible span { color: #444; }
.k-hero {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: start;
  min-height: 520px; padding: 54px 40px 36px;
  background-color: #1b2420; color: #fff;
  background-image:
    linear-gradient(90deg, rgba(12,18,16,.78) 0%, rgba(12,18,16,.42) 46%, rgba(12,18,16,.15) 72%),
    url("images/door-warehouse.jpg");
  background-size: cover; background-position: center;
}
html[data-theme="dark"] .k-hero {
  background-image:
    linear-gradient(90deg, rgba(8,12,10,.82) 0%, rgba(8,12,10,.4) 48%, rgba(8,12,10,.2) 74%),
    url("images/hero.jpg");
}
.k-hero.k-hero-fit {
  align-items: center;
  background-color: #1b2420;
  background-image: linear-gradient(90deg, rgba(12,18,16,.78) 0%, rgba(12,18,16,.42) 100%);
}
html[data-theme="dark"] .k-hero.k-hero-fit {
  background-image: linear-gradient(90deg, rgba(8,12,10,.82), rgba(8,12,10,.45));
}
.k-hero-fit .k-hero-product {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: min(100%, 520px);
  max-height: 460px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.45));
}
.k-hero .k-live { margin-top: 22px; }
.k-hero .k-lm { color: #d7ffe6; }
.k-hero .k-caption, .k-hero .k-gap { color: rgba(255,255,255,.78); }
.k-build-open {
  margin-top: 18px; border: 0; border-radius: 4px; background: #17803d; color: #fff;
  padding: 12px 18px; font-weight: 750; cursor: pointer;
}
.k-fit-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 820px);
  border: 0; padding: 0; background: transparent;
}
.k-fit-dialog::backdrop { background: rgba(12, 18, 16, .55); }
.k-fit-dialog .k-card { max-height: min(86vh, 820px); overflow: auto; }
.k-fit-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.k-fit-close { border: 0; background: transparent; color: #17803d; font-weight: 750; cursor: pointer; }
.k-hero h1 { margin: 0 0 12px; max-width: 640px; font-size: 46px; line-height: 1.02; letter-spacing: -0.03em; font-weight: 750; }
.k-hero-copy p { margin: 0; max-width: 460px; font-size: 18px; }
.k-card {
  background: #fff; color: #1c1c1c; border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 22px 22px 18px;
}
.k-card h2 { margin: 0 0 14px; color: #17803d; font-size: 18px; letter-spacing: 0.04em; }
.k-live { margin: 0 0 12px; }
.k-live strong {
  display: inline-block; margin-left: 6px; padding: 4px 8px; border-radius: 6px;
  background: #e7f6ee; color: #17803d; font-family: Consolas, ui-monospace, monospace; font-size: 14px;
}
.k-card label { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; margin: 8px 0; font-size: 14px; }
.k-mods { border: 0; margin: 8px 0; padding: 0; }
.k-mods p { margin: 0 0 6px; font-size: 14px; }
.k-mods label { display: flex; grid-template-columns: none; gap: 8px; align-items: flex-start; margin: 3px 0; font-size: 13px; }
.k-mods label[hidden] { display: none; }
.k-card select {
  width: 100%; border: 1px solid #d9d9d9; border-radius: 8px; background: #fff; color: #1c1c1c;
  padding: 9px 10px;
}
.k-out-label { margin: 16px 0 0; color: #17803d; font-size: 12px; letter-spacing: 0.08em; font-weight: 700; }
.k-lm { margin: 0; color: #17803d; font-size: 40px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; }
.k-caption, .k-gap { margin: 2px 0 0; color: #667; font-size: 13px; }
.k-intro {
  display: grid; grid-template-columns: 1.45fr 0.9fr; gap: 36px; align-items: start;
  padding: 28px 40px 8px; background: #fff; color: #1c1c1c;
}
.k-intro-copy p { margin: 0 0 14px; max-width: 68ch; }
.k-intro-copy ul:not(.k-marks) { margin: 0 0 14px; padding-left: 18px; }
.k-intro-copy li { margin: 4px 0; }
.k-marks { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.k-marks li {
  width: 64px; height: 64px; display: grid; place-items: center; padding: 0;
  background: transparent; border: 0;
}
.k-marks img { width: 64px; height: 64px; object-fit: contain; background: transparent; }
.k-intro-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.k-intro-shots img { width: 96px; height: 72px; object-fit: cover; background: #fff; }
.k-intro-side { display: grid; gap: 16px; align-content: start; }
.k-quote { margin: 0 52px 0 0; }
.k-quote-btn {
  position: relative; display: block; width: 100%; margin: 0;
  border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
}
.k-quote-btn::after {
  content: "+"; position: absolute; left: 100%; top: 0; bottom: 0; width: 48px;
  display: grid; place-items: center; background: #111; color: #fff;
  font-size: 32px; font-weight: 400; line-height: 1;
}
.k-quote-btn.is-open::after { content: "−"; }
.k-quote-wrap { display: block; height: 44px; overflow: hidden; position: relative; }
.k-quote-action {
  position: absolute; left: -16px; top: 0; width: 100%; height: 44px;
  display: flex; align-items: center; padding: 0 28px 0 34px;
  font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; font-size: 13px;
  white-space: nowrap;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 16px 100%, 0 50%);
  animation: k-quote-slide 7s linear infinite;
}
.k-quote-action-quote { background: #77a341; color: #fff; z-index: 2; }
.k-quote-action-design { background: #dedede; color: #333; z-index: 1; animation-delay: -3.5s; }
.k-quote-btn:hover .k-quote-action-quote { background: #92b567; }
.k-quote-btn:hover .k-quote-action-design { background: #eaeaea; }
.k-quote-btn:active .k-quote-action-quote { background: #5f8234; }
.k-quote-panel {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease;
  background: #f3f3f3; color: #1c1c1c;
}
.k-quote-panel.is-open { grid-template-rows: 1fr; }
.k-quote-panel > div { overflow: hidden; }
.k-quote-panel label { display: grid; gap: 4px; margin: 8px 16px; font-size: 13px; font-weight: 700; }
.k-quote-panel input, .k-quote-panel textarea, .k-quote-panel select {
  font: inherit; font-weight: 500; border: 1px solid #d0d0d0; border-radius: 6px; padding: 8px; background: #fff; color: #1c1c1c;
}
.k-quote-lead, .k-quote-code { margin: 12px 16px 0; font-size: 14px; }
.k-quote-status { margin: 0 16px 14px; font-size: 14px; font-weight: 650; }
.k-quote-status:empty { display: none; }
/* A field only bots fill: kept off screen, out of the tab order, hidden from screen readers. */
.k-enquiry-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.k-enquiry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 18px 0 26px; padding: 18px; border: 1px solid #e3e8e4; border-top: 6px solid #17803d; border-radius: 8px; background: #fafbfa; }
.k-enquiry h2 { grid-column: 1 / -1; margin: 0; font-size: 22px; }
.k-enquiry label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
.k-enquiry input[type="text"], .k-enquiry input[type="email"], .k-enquiry input[type="tel"], .k-enquiry select, .k-enquiry textarea { font: inherit; font-weight: 400; border: 1px solid #cfd6d1; border-radius: 6px; padding: 9px 10px; background: #fff; color: #1c1c1c; width: 100%; box-sizing: border-box; }
.k-enquiry-wide, .k-enquiry-check, .k-enquiry-send { grid-column: 1 / -1; }
.k-enquiry-check { display: flex !important; align-items: center; gap: 8px; font-weight: 600 !important; }
.k-enquiry-send { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.k-enquiry-send button { border: 0; border-radius: 6px; background: #17803d; color: #fff; padding: 11px 22px; font: inherit; font-weight: 750; cursor: pointer; }
.k-enquiry-send button:disabled { opacity: 0.6; }
.k-enquiry-send span { font-weight: 650; }
@media (max-width: 640px) { .k-enquiry { grid-template-columns: 1fr; padding: 14px; } }
html[data-theme="dark"] .k-enquiry { background: #1d2521; border-color: #2c3732; }
.k-quote-panel button[type="submit"] {
  margin: 4px 16px 16px; border: 0; background: #77a341; color: #fff; padding: 10px 16px; font-weight: 750; cursor: pointer;
}
@keyframes k-quote-slide {
  0%, 42% { transform: translateX(0); }
  50% { transform: translateX(-100%); }
  50.1% { transform: translate(100%, 100%); }
  50.2% { transform: translate(100%, 0); }
  92% { transform: translate(100%, 0); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .k-quote-action { animation: none; }
  .k-quote-action-design { visibility: hidden; }
}
.k-perf { width: 100%; border-collapse: collapse; background: #fff; color: #1c1c1c; }
.k-perf caption {
  caption-side: top; text-align: left; background: #17803d; color: #fff;
  padding: 8px 10px; font-weight: 750; letter-spacing: 0.04em;
}
.k-perf th, .k-perf td { border-bottom: 1px solid #e4e4e4; padding: 8px 10px; text-align: left; font-size: 14px; }
.k-perf th { font-weight: 650; width: 58%; }
.k-intro-side h2 { margin: 8px 0; color: #17803d; font-size: 14px; letter-spacing: 0.08em; }
.k-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
  padding: 8px 40px 10px; background: #fff; color: #1c1c1c;
}
.k-summary h2 { margin: 0 0 12px; color: #17803d; font-size: 14px; letter-spacing: 0.08em; }
.k-stats { margin: 0; }
.k-stats div { display: grid; grid-template-columns: 180px 1fr; gap: 8px; padding: 6px 0; }
.k-stats dt { color: #555; }
.k-stats dd { margin: 0; font-weight: 650; }
.k-badges { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.k-badges li { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.k-downloads { display: grid; gap: 16px; margin: 8px 0 12px; }
.k-downloads a {
  display: grid; grid-template-columns: 1fr 76px; align-items: center; gap: 12px;
  color: inherit; text-decoration: none; font-weight: 650; letter-spacing: 0.03em;
  text-transform: uppercase; font-size: 14px; line-height: 1.3;
}
.k-downloads a:hover { color: #17803d; }
.k-downloads img { width: 72px; height: 72px; object-fit: contain; justify-self: end; background: transparent; }
.k-files { display: flex; flex-wrap: wrap; gap: 8px; }
.k-files button {
  border: 1px solid #ddd; background: #fafafa; color: #222; border-radius: 8px;
  padding: 10px 12px; cursor: pointer; font-weight: 650;
}
.k-lower { background: #fff; color: #1c1c1c; padding: 8px 40px 48px; }
.k-site .tabs button { text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; font-weight: 700; }
html[data-theme="dark"] .k-site,
html[data-theme="dark"] .k-top,
html[data-theme="dark"] .k-nav,
html[data-theme="dark"] .k-intro,
html[data-theme="dark"] .k-summary,
html[data-theme="dark"] .k-lower,
html[data-theme="dark"] .k-card,
html[data-theme="dark"] .k-menu,
html[data-theme="dark"] .k-search input,
html[data-theme="dark"] .k-card select,
html[data-theme="dark"] .k-files button {
  background: #141a17; color: #f4f7f5; border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] .k-card { background: #1c2420; }
html[data-theme="dark"] .k-live strong { background: #143224; }
html[data-theme="dark"] .k-stats dt, html[data-theme="dark"] .k-caption { color: #c5d0c8; }
@media (max-width: 980px) {
  .k-hero, .k-summary, .k-card label { grid-template-columns: 1fr; }
  .k-intro { grid-template-columns: 1.3fr 1fr; gap: 24px; padding: 24px 20px 8px; }
  .k-quote { margin-right: 44px; }
  .k-hero h1 { font-size: 34px; }
  .k-hero-fit .k-hero-product { grid-column: 1; grid-row: auto; max-height: 280px; }
}

[hidden] { display: none !important; }
.k-menu { display: none; }
.k-drop.is-open > .k-menu,
.k-drop:focus-within > .k-menu { display: block; }
.k-mega { width: min(1080px, calc(100vw - 48px)); max-height: 70vh; overflow: auto; padding: 18px 22px 22px; }
.k-view-all { display: inline-block; margin: 0 0 16px; padding: 4px 0; font-weight: 750; color: #17803d; letter-spacing: 0.06em; text-transform: uppercase; }
.k-mega-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 22px 28px; }
.k-mega h3 { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #17803d; }
.k-mega a { padding: 4px 0; }
.k-feat strong { display: block; font-size: 14px; line-height: 1.25; }
.k-feat span { display: block; margin-top: 2px; color: #555; font-size: 13px; font-weight: 500; }
html[data-theme="dark"] .k-mega h3,
html[data-theme="dark"] .k-menu a.k-feat,
html[data-theme="dark"] .k-menu a.k-feat strong,
html[data-theme="dark"] .k-menu a.k-app,
html[data-theme="dark"] .k-menu a.k-type {
  color: #f4f7f5;
}
html[data-theme="dark"] .k-feat span { color: #d5e0d8; }
html[data-theme="dark"] .k-menu a.k-feat:hover,
html[data-theme="dark"] .k-menu a.k-feat:focus-visible,
html[data-theme="dark"] .k-menu a.k-feat:hover strong,
html[data-theme="dark"] .k-menu a.k-feat:focus-visible strong,
html[data-theme="dark"] .k-menu a.k-app:hover,
html[data-theme="dark"] .k-menu a.k-app:focus-visible,
html[data-theme="dark"] .k-menu a.k-type:hover,
html[data-theme="dark"] .k-menu a.k-type:focus-visible {
  background: #f3f6f4;
  color: #1c1c1c;
}
html[data-theme="dark"] .k-feat:hover span,
html[data-theme="dark"] .k-feat:focus-visible span { color: #1c1c1c; }
/* nav-panels */
.k-menu a.k-view-all { display: inline-block; margin: 0 0 16px; padding: 10px 22px; background: #17803d; color: #fff; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; }
.k-menu a.k-view-all:hover,
.k-menu a.k-view-all:focus-visible { background: #146b34; color: #fff; }
.k-mega-grid { grid-template-columns: 1.2fr 0.95fr 1.35fr; }
.k-app, .k-type { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 700; }
.k-app::before, .k-type::before { content: ""; width: 22px; height: 22px; flex: 0 0 22px; background: center / contain no-repeat; }
.k-types { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.k-ico, .k-place, .k-shot { display: block; background: center / contain no-repeat; }
.k-menu-tab { display: inline-block; margin: 0; background: #17803d; color: #fff; padding: 8px 14px; font-size: 12px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.k-wireless, .k-sectors, .k-services, .k-resources { padding: 0; overflow: hidden; }
.k-wireless { width: min(1280px, calc(100vw - 48px)); }
.k-sectors { width: min(720px, calc(100vw - 40px)); }
.k-services { width: min(680px, calc(100vw - 40px)); }
.k-resources { width: min(860px, calc(100vw - 40px)); }
.k-wireless-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px 20px; padding: 18px 20px 16px; align-items: start; }
.k-wireless-overview, .k-wireless-areas a, .k-services-row a, .k-resource-topics a, .k-sector-tabs button { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; text-transform: uppercase; font-size: 11px; font-weight: 750; letter-spacing: 0.04em; line-height: 1.25; }
.k-wireless-overview { padding: 0; min-width: 0; white-space: normal; }
.k-wireless-overview .k-shot { width: 160px; height: 120px; }
.k-wireless-areas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 14px; min-width: 0; }
.k-wireless-areas a { min-width: 0; width: 100%; max-width: 100%; padding: 0; position: static; white-space: normal; overflow: hidden; }
.k-wireless-areas .k-shot { width: 100%; height: 96px; flex: 0 0 96px; }
.k-wireless-overview > span:last-child,
.k-wireless-areas a > span:last-child {
  position: static; display: block; width: 100%; min-width: 0; max-width: 100%;
  white-space: normal; overflow-wrap: break-word; text-align: center;
}
.k-wireless-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; background: #17803d; padding: 4px 12px; }
.k-wireless-bar a { color: #fff; font-size: 12px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; padding: 12px 4px; border-radius: 0; white-space: nowrap; }
.k-menu a.k-dash { margin-left: auto; display: flex; flex-direction: row; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.75); margin: 6px 8px 6px auto; padding: 6px 10px; }
.k-dash .k-shot { width: 22px; height: 22px; }
.k-menu .k-wireless-bar a:hover,
.k-menu .k-wireless-bar a:focus-visible { background: #146b34; color: #fff; }
.k-sector-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 14px 12px 12px; }
.k-sector-tabs button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
.k-sector-tabs button.is-on { color: #17803d; }
.k-sector-tabs .k-ico, .k-services-row .k-ico, .k-resource-topics .k-ico { width: 56px; height: 56px; }
.k-services-row .k-ico, .k-resource-topics .k-ico { background-color: #17803d; border-radius: 6px; background-size: 58%; }
.k-sector-places, .k-resource-questions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 16px; margin: 0; padding: 14px 16px 16px; background: #17803d; }
.k-sector-places a, .k-resource-questions a { display: flex; flex-direction: row; align-items: center; gap: 8px; color: #fff; text-align: left; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; padding: 4px 0; }
.k-place { width: 18px; height: 18px; flex: 0 0 18px; }
.k-menu .k-sector-places a:hover,
.k-menu .k-sector-places a:focus-visible,
.k-menu .k-resource-questions a:hover,
.k-menu .k-resource-questions a:focus-visible { background: transparent; color: #fff; }
.k-sector-tabs button:hover,
.k-sector-tabs button:focus-visible { color: #17803d; background: transparent; }
.k-services-row, .k-resource-topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 14px 18px; }
.k-resource-topics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.k-services-row a, .k-resource-topics a { padding: 0; }
html[data-theme="dark"] .k-menu-tab,
html[data-theme="dark"] .k-wireless-bar,
html[data-theme="dark"] .k-sector-places,
html[data-theme="dark"] .k-resource-questions { background: #17803d; color: #fff; }
html[data-theme="dark"] .k-sector-places a,
html[data-theme="dark"] .k-resource-questions a,
html[data-theme="dark"] .k-wireless-bar a { color: #fff; }
.k-app[data-icon="industrial"]::before, .k-type[data-icon="industrial"]::before { background-image: url("images/nav/industrial.png"); }
.k-app[data-icon="hazardous"]::before, .k-type[data-icon="hazardous"]::before { background-image: url("images/nav/hazardous.png"); }
.k-app[data-icon="commercial"]::before, .k-type[data-icon="commercial"]::before { background-image: url("images/nav/commercial.png"); }
.k-app[data-icon="street-lighting"]::before, .k-type[data-icon="street-lighting"]::before { background-image: url("images/nav/street-lighting.png"); }
.k-app[data-icon="external"]::before, .k-type[data-icon="external"]::before { background-image: url("images/nav/external.png"); }
.k-app[data-icon="sports"]::before, .k-type[data-icon="sports"]::before { background-image: url("images/nav/sports.png"); }
.k-app[data-icon="bulkhead"]::before, .k-type[data-icon="bulkhead"]::before { background-image: url("images/nav/bulkhead.png"); }
.k-app[data-icon="canopy"]::before, .k-type[data-icon="canopy"]::before { background-image: url("images/nav/canopy.png"); }
.k-app[data-icon="controls"]::before, .k-type[data-icon="controls"]::before { background-image: url("images/nav/controls.png"); }
.k-app[data-icon="dedicated-emergency"]::before, .k-type[data-icon="dedicated-emergency"]::before { background-image: url("images/nav/dedicated-emergency.png"); }
.k-app[data-icon="downlight"]::before, .k-type[data-icon="downlight"]::before { background-image: url("images/nav/downlight.png"); }
.k-app[data-icon="floodlight"]::before, .k-type[data-icon="floodlight"]::before { background-image: url("images/nav/floodlight.png"); }
.k-app[data-icon="high-bay"]::before, .k-type[data-icon="high-bay"]::before { background-image: url("images/nav/high-bay.png"); }
.k-app[data-icon="high-mast"]::before, .k-type[data-icon="high-mast"]::before { background-image: url("images/nav/high-mast.png"); }
.k-app[data-icon="linear"]::before, .k-type[data-icon="linear"]::before { background-image: url("images/nav/linear.png"); }
.k-app[data-icon="panel"]::before, .k-type[data-icon="panel"]::before { background-image: url("images/nav/panel.png"); }
.k-app[data-icon="street-light"]::before, .k-type[data-icon="street-light"]::before { background-image: url("images/nav/street-light.png"); }
.k-app[data-icon="zone1"]::before, .k-type[data-icon="zone1"]::before { background-image: url("images/nav/zone1.png"); }
.k-app[data-icon="zone2"]::before, .k-type[data-icon="zone2"]::before { background-image: url("images/nav/zone2.png"); }
.k-app[data-icon="column-mast"]::before, .k-type[data-icon="column-mast"]::before { background-image: url("images/nav/column-mast.png"); }
.k-ico[data-icon="sector-industrial"], .k-place[data-icon="sector-industrial"], .k-shot[data-icon="sector-industrial"] { background-image: url("images/nav/sector-industrial.png"); }
.k-ico[data-icon="sector-sports"], .k-place[data-icon="sector-sports"], .k-shot[data-icon="sector-sports"] { background-image: url("images/nav/sector-sports.png"); }
.k-ico[data-icon="sector-hazardous"], .k-place[data-icon="sector-hazardous"], .k-shot[data-icon="sector-hazardous"] { background-image: url("images/nav/sector-hazardous.png"); }
.k-ico[data-icon="sector-external"], .k-place[data-icon="sector-external"], .k-shot[data-icon="sector-external"] { background-image: url("images/nav/sector-external.png"); }
.k-ico[data-icon="sector-commercial"], .k-place[data-icon="sector-commercial"], .k-shot[data-icon="sector-commercial"] { background-image: url("images/nav/sector-commercial.png"); }
.k-ico[data-icon="place-factories"], .k-place[data-icon="place-factories"], .k-shot[data-icon="place-factories"] { background-image: url("images/nav/place-factories.png"); }
.k-ico[data-icon="place-hangars"], .k-place[data-icon="place-hangars"], .k-shot[data-icon="place-hangars"] { background-image: url("images/nav/place-hangars.png"); }
.k-ico[data-icon="place-cold-stores"], .k-place[data-icon="place-cold-stores"], .k-shot[data-icon="place-cold-stores"] { background-image: url("images/nav/place-cold-stores.png"); }
.k-ico[data-icon="place-distribution"], .k-place[data-icon="place-distribution"], .k-shot[data-icon="place-distribution"] { background-image: url("images/nav/place-distribution.png"); }
.k-ico[data-icon="place-food"], .k-place[data-icon="place-food"], .k-shot[data-icon="place-food"] { background-image: url("images/nav/place-food.png"); }
.k-ico[data-icon="place-freezers"], .k-place[data-icon="place-freezers"], .k-shot[data-icon="place-freezers"] { background-image: url("images/nav/place-freezers.png"); }
.k-ico[data-icon="place-warehousing"], .k-place[data-icon="place-warehousing"], .k-shot[data-icon="place-warehousing"] { background-image: url("images/nav/place-warehousing.png"); }
.k-ico[data-icon="place-workshops"], .k-place[data-icon="place-workshops"], .k-shot[data-icon="place-workshops"] { background-image: url("images/nav/place-workshops.png"); }
.k-ico[data-icon="place-agriculture"], .k-place[data-icon="place-agriculture"], .k-shot[data-icon="place-agriculture"] { background-image: url("images/nav/place-agriculture.png"); }
.k-ico[data-icon="place-foundry"], .k-place[data-icon="place-foundry"], .k-shot[data-icon="place-foundry"] { background-image: url("images/nav/place-foundry.png"); }
.k-ico[data-icon="place-athletics"], .k-place[data-icon="place-athletics"], .k-shot[data-icon="place-athletics"] { background-image: url("images/nav/place-athletics.png"); }
.k-ico[data-icon="place-badminton"], .k-place[data-icon="place-badminton"], .k-shot[data-icon="place-badminton"] { background-image: url("images/nav/place-badminton.png"); }
.k-ico[data-icon="place-equestrian"], .k-place[data-icon="place-equestrian"], .k-shot[data-icon="place-equestrian"] { background-image: url("images/nav/place-equestrian.png"); }
.k-ico[data-icon="place-fencing"], .k-place[data-icon="place-fencing"], .k-shot[data-icon="place-fencing"] { background-image: url("images/nav/place-fencing.png"); }
.k-ico[data-icon="place-hockey"], .k-place[data-icon="place-hockey"], .k-shot[data-icon="place-hockey"] { background-image: url("images/nav/place-hockey.png"); }
.k-ico[data-icon="place-football"], .k-place[data-icon="place-football"], .k-shot[data-icon="place-football"] { background-image: url("images/nav/place-football.png"); }
.k-ico[data-icon="place-ice-hockey"], .k-place[data-icon="place-ice-hockey"], .k-shot[data-icon="place-ice-hockey"] { background-image: url("images/nav/place-ice-hockey.png"); }
.k-ico[data-icon="place-rugby"], .k-place[data-icon="place-rugby"], .k-shot[data-icon="place-rugby"] { background-image: url("images/nav/place-rugby.png"); }
.k-ico[data-icon="place-sports-hall"], .k-place[data-icon="place-sports-hall"], .k-shot[data-icon="place-sports-hall"] { background-image: url("images/nav/place-sports-hall.png"); }
.k-ico[data-icon="place-pools"], .k-place[data-icon="place-pools"], .k-shot[data-icon="place-pools"] { background-image: url("images/nav/place-pools.png"); }
.k-ico[data-icon="place-tennis"], .k-place[data-icon="place-tennis"], .k-shot[data-icon="place-tennis"] { background-image: url("images/nav/place-tennis.png"); }
.k-ico[data-icon="place-pits"], .k-place[data-icon="place-pits"], .k-shot[data-icon="place-pits"] { background-image: url("images/nav/place-pits.png"); }
.k-ico[data-icon="place-refinery"], .k-place[data-icon="place-refinery"], .k-shot[data-icon="place-refinery"] { background-image: url("images/nav/place-refinery.png"); }
.k-ico[data-icon="place-tanks"], .k-place[data-icon="place-tanks"], .k-shot[data-icon="place-tanks"] { background-image: url("images/nav/place-tanks.png"); }
.k-ico[data-icon="place-rigs"], .k-place[data-icon="place-rigs"], .k-shot[data-icon="place-rigs"] { background-image: url("images/nav/place-rigs.png"); }
.k-ico[data-icon="place-grain"], .k-place[data-icon="place-grain"], .k-shot[data-icon="place-grain"] { background-image: url("images/nav/place-grain.png"); }
.k-ico[data-icon="place-paint"], .k-place[data-icon="place-paint"], .k-shot[data-icon="place-paint"] { background-image: url("images/nav/place-paint.png"); }
.k-ico[data-icon="place-chemical"], .k-place[data-icon="place-chemical"], .k-shot[data-icon="place-chemical"] { background-image: url("images/nav/place-chemical.png"); }
.k-ico[data-icon="place-distillery"], .k-place[data-icon="place-distillery"], .k-shot[data-icon="place-distillery"] { background-image: url("images/nav/place-distillery.png"); }
.k-ico[data-icon="place-aprons"], .k-place[data-icon="place-aprons"], .k-shot[data-icon="place-aprons"] { background-image: url("images/nav/place-aprons.png"); }
.k-ico[data-icon="place-bats"], .k-place[data-icon="place-bats"], .k-shot[data-icon="place-bats"] { background-image: url("images/nav/place-bats.png"); }
.k-ico[data-icon="place-car-park"], .k-place[data-icon="place-car-park"], .k-shot[data-icon="place-car-park"] { background-image: url("images/nav/place-car-park.png"); }
.k-ico[data-icon="place-docks"], .k-place[data-icon="place-docks"], .k-shot[data-icon="place-docks"] { background-image: url("images/nav/place-docks.png"); }
.k-ico[data-icon="place-multistorey"], .k-place[data-icon="place-multistorey"], .k-shot[data-icon="place-multistorey"] { background-image: url("images/nav/place-multistorey.png"); }
.k-ico[data-icon="place-railway"], .k-place[data-icon="place-railway"], .k-shot[data-icon="place-railway"] { background-image: url("images/nav/place-railway.png"); }
.k-ico[data-icon="place-security"], .k-place[data-icon="place-security"], .k-shot[data-icon="place-security"] { background-image: url("images/nav/place-security.png"); }
.k-ico[data-icon="place-street"], .k-place[data-icon="place-street"], .k-shot[data-icon="place-street"] { background-image: url("images/nav/place-street.png"); }
.k-ico[data-icon="place-facade"], .k-place[data-icon="place-facade"], .k-shot[data-icon="place-facade"] { background-image: url("images/nav/place-facade.png"); }
.k-ico[data-icon="place-education"], .k-place[data-icon="place-education"], .k-shot[data-icon="place-education"] { background-image: url("images/nav/place-education.png"); }
.k-ico[data-icon="place-healthcare"], .k-place[data-icon="place-healthcare"], .k-shot[data-icon="place-healthcare"] { background-image: url("images/nav/place-healthcare.png"); }
.k-ico[data-icon="place-hotels"], .k-place[data-icon="place-hotels"], .k-shot[data-icon="place-hotels"] { background-image: url("images/nav/place-hotels.png"); }
.k-ico[data-icon="place-offices"], .k-place[data-icon="place-offices"], .k-shot[data-icon="place-offices"] { background-image: url("images/nav/place-offices.png"); }
.k-ico[data-icon="place-public"], .k-place[data-icon="place-public"], .k-shot[data-icon="place-public"] { background-image: url("images/nav/place-public.png"); }
.k-ico[data-icon="place-retail"], .k-place[data-icon="place-retail"], .k-shot[data-icon="place-retail"] { background-image: url("images/nav/place-retail.png"); }
.k-ico[data-icon="place-supermarket"], .k-place[data-icon="place-supermarket"], .k-shot[data-icon="place-supermarket"] { background-image: url("images/nav/place-supermarket.png"); }
.k-ico[data-icon="wireless-overview"], .k-place[data-icon="wireless-overview"], .k-shot[data-icon="wireless-overview"] { background-image: url("images/nav/wireless-overview.png"); }
.k-ico[data-icon="wireless-car-park"], .k-place[data-icon="wireless-car-park"], .k-shot[data-icon="wireless-car-park"] { background-image: url("images/nav/wireless-car-park.png"); }
.k-ico[data-icon="wireless-factories"], .k-place[data-icon="wireless-factories"], .k-shot[data-icon="wireless-factories"] { background-image: url("images/nav/wireless-factories.png"); }
.k-ico[data-icon="wireless-office"], .k-place[data-icon="wireless-office"], .k-shot[data-icon="wireless-office"] { background-image: url("images/nav/wireless-office.png"); }
.k-ico[data-icon="wireless-sports-hall"], .k-place[data-icon="wireless-sports-hall"], .k-shot[data-icon="wireless-sports-hall"] { background-image: url("images/nav/wireless-sports-hall.png"); }
.k-ico[data-icon="wireless-sports-pitch"], .k-place[data-icon="wireless-sports-pitch"], .k-shot[data-icon="wireless-sports-pitch"] { background-image: url("images/nav/wireless-sports-pitch.png"); }
.k-ico[data-icon="wireless-pool"], .k-place[data-icon="wireless-pool"], .k-shot[data-icon="wireless-pool"] { background-image: url("images/nav/wireless-pool.png"); }
.k-ico[data-icon="wireless-warehouse"], .k-place[data-icon="wireless-warehouse"], .k-shot[data-icon="wireless-warehouse"] { background-image: url("images/nav/wireless-warehouse.png"); }
.k-ico[data-icon="wireless-mark"], .k-place[data-icon="wireless-mark"], .k-shot[data-icon="wireless-mark"] { background-image: url("images/nav/wireless-mark.svg"); }
.k-ico[data-icon="service-design"], .k-place[data-icon="service-design"], .k-shot[data-icon="service-design"] { background-image: url("images/nav/service-design.png"); }
.k-ico[data-icon="service-supporting"], .k-place[data-icon="service-supporting"], .k-shot[data-icon="service-supporting"] { background-image: url("images/nav/service-supporting.png"); }
.k-ico[data-icon="service-sourcing"], .k-place[data-icon="service-sourcing"], .k-shot[data-icon="service-sourcing"] { background-image: url("images/nav/service-sourcing.png"); }
.k-ico[data-icon="service-commissioning"], .k-place[data-icon="service-commissioning"], .k-shot[data-icon="service-commissioning"] { background-image: url("images/nav/service-commissioning.png"); }
.k-ico[data-icon="resource-benefits"], .k-place[data-icon="resource-benefits"], .k-shot[data-icon="resource-benefits"] { background-image: url("images/nav/resource-benefits.png"); }
.k-ico[data-icon="resource-esos"], .k-place[data-icon="resource-esos"], .k-shot[data-icon="resource-esos"] { background-image: url("images/nav/resource-esos.png"); }
.k-ico[data-icon="resource-grants"], .k-place[data-icon="resource-grants"], .k-shot[data-icon="resource-grants"] { background-image: url("images/nav/resource-grants.png"); }
.k-ico[data-icon="resource-cibse"], .k-place[data-icon="resource-cibse"], .k-shot[data-icon="resource-cibse"] { background-image: url("images/nav/resource-cibse.png"); }
.k-ico[data-icon="resource-lifepo4"], .k-place[data-icon="resource-lifepo4"], .k-shot[data-icon="resource-lifepo4"] { background-image: url("images/nav/resource-lifepo4.png"); }
.k-ico[data-icon="resource-faq"], .k-place[data-icon="resource-faq"], .k-shot[data-icon="resource-faq"] { background-image: url("images/nav/resource-faq.png"); }
.k-ico[data-icon="resource-question"], .k-place[data-icon="resource-question"], .k-shot[data-icon="resource-question"] { background-image: url("images/nav/resource-question.png"); }
/* /nav-panels */
.k-nav-end { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.k-find { margin-left: 0; color: #17803d; font-weight: 700; }
.k-hero.k-home {
  display: block; min-height: 0; padding: 28px 40px 40px;
  background-image:
    linear-gradient(180deg, rgba(12,18,16,.28), rgba(12,18,16,.45)),
    url("images/door-warehouse.jpg");
}
.k-hero.k-home .home-doors { background: transparent; padding: 0; gap: 18px; }
.k-hero.k-home .home-doors a { position: relative; display: block; overflow: hidden; border-radius: 4px; }
.k-hero.k-home .home-doors img { height: 340px; }
.k-hero.k-home .home-doors span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 16px 16px; color: #fff; font-size: 22px; font-weight: 750;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
}
.k-home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.k-home-actions a, .specify-go {
  display: inline-block; background: #17803d; color: #fff; text-decoration: none;
  padding: 12px 16px; border-radius: 8px; font-weight: 700;
}
.home-doors, .case-row, .feature-band { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.home-doors { grid-template-columns: repeat(3, 1fr); padding: 20px 40px 8px; background: #fff; }
.home-doors a { color: inherit; text-decoration: none; }
.home-doors img { width: 100%; height: 220px; object-fit: cover; }
.case-row { grid-template-columns: repeat(auto-fill, 200px); }
.case-row figure { margin: 0; width: 200px; }
.case-row img { width: 200px; height: 200px; object-fit: cover; display: block; }
.home-doors span, .case-row figcaption, .related-grid p { display: block; padding: 8px 2px 0; font-weight: 700; }
.cat-block { padding: 28px 40px; background: #fff; color: #1c1c1c; }
.cat-label {
  display: inline-block; margin: 0; border: 1px solid #cfcfcf; padding: 4px 8px;
  font-size: 12px; letter-spacing: 0.08em; font-weight: 750;
}
.cat-rule { border: 0; border-top: 1px solid #ddd; margin: 10px 0 18px; }
.jump { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 40px 0; background: #fff; }
.jump a { color: #17803d; font-size: 14px; font-weight: 700; }
.optic-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.optic-pair { border: 1px solid #e4e4e4; border-radius: 8px; padding: 14px; background: #fff; }
.optic-pair.is-on { outline: 2px solid #17803d; }
.optic-pair h3 { margin: 0; color: #17803d; font-size: 22px; }
.optic-pair img { width: 100%; height: 150px; object-fit: contain; background: #fff; margin-top: 8px; }
.optic-pair p { margin: 6px 0 0; font-size: 13px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pair svg { width: 100%; height: auto; max-width: 220px; background: #fff; }
.optic-live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.optic-live img { width: 100%; height: 160px; object-fit: contain; background: #fff; border: 1px solid #e4e4e4; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, 160px); gap: 12px; }
.related-grid a { color: inherit; text-decoration: none; display: block; }
.related-grid figure { margin: 0; width: 160px; }
.related-grid img { width: 160px; height: 160px; object-fit: cover; display: block; background: #fff; border: 1px solid #e4e4e4; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, 160px); gap: 12px; }
.gallery-grid img {
  width: 160px; height: 160px; object-fit: cover; background: #fff; border: 1px solid #e4e4e4;
}
.feature-band { grid-template-columns: 1.1fr 0.9fr; align-items: center; background: #1b2420; color: #fff; margin: 0 0 12px; }
.feature-band div { padding: 32px 36px; }
.feature-band img { width: 100%; height: auto; object-fit: contain; background: #fff; }
.feature-band h3 {
  margin: 0 0 14px;
  font-size: 32px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.feature-band p { margin: 0 0 14px; font-size: 18px; line-height: 1.5; }
.feature-band a { color: #b7f7cf; font-weight: 700; font-size: 18px; }
.feature-edit { display: grid; gap: 8px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #e6e6e6; }
.feature-edit label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.feature-edit input[type="text"],
.feature-edit textarea {
  width: 100%; font: inherit; font-weight: 500; box-sizing: border-box;
  border: 1px solid #d9d9d9; border-radius: 8px; padding: 8px;
  background: #fff; color: #1c1c1c;
}
html[data-theme="dark"] .feature-edit input[type="text"],
html[data-theme="dark"] .feature-edit textarea {
  background: #101613; color: #f4f7f5; border-color: rgba(255,255,255,.2);
}
.feature-add {
  width: 36px; height: 36px; border: 0; border-radius: 6px;
  background: #17803d; color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.feature-add:hover { background: #146b34; color: #fff; }
.feature-remove { justify-self: start; border: 0; background: transparent; color: #8a1f1f; font-weight: 700; cursor: pointer; padding: 0; }
.app-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.app-cards a, .app-cards article { display: block; color: #1c1c1c; text-decoration: none; background: #fff; border: 1px solid #e4e4e4; border-radius: 8px; overflow: hidden; }
.app-cards img { width: 100%; height: 140px; object-fit: cover; }
.app-cards h3 { margin: 12px 14px 6px; font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }
.app-cards p { margin: 0 14px 14px; font-size: 14px; line-height: 1.4; color: #3c3c3c; }
.app-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.app-row li { border: 1px solid #d9d9d9; border-radius: 8px; padding: 12px 14px; font-weight: 700; }
.spec-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.spec-table th, .spec-table td { border-bottom: 1px solid #e6e6e6; text-align: left; padding: 7px 8px; vertical-align: top; }
.spec-table th { width: 34%; color: #444; font-weight: 650; }
.spec-table caption {
  caption-side: top; text-align: left; background: #17803d; color: #fff;
  padding: 8px 10px; font-weight: 750; letter-spacing: 0.04em;
}
.spec-table tbody tr:nth-child(even) { background: rgba(23, 128, 61, 0.06); }
/* Folded: a three-row sample from the first table, so the reader sees there is more. */
.is-folded .spec-table tbody tr:nth-child(n+4), .is-folded .spec-table:not(:first-of-type), .is-folded > .k-caption { display: none; }
.spec-toggle { border: 1px solid #17803d; background: #fff; color: #17803d; padding: 10px 16px; font-weight: 750; letter-spacing: 0.04em; cursor: pointer; }
.spec-toggle:hover { background: #17803d; color: #fff; }
.spec-group { margin: 22px 0 10px; font-size: 16px; }
.spec-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.spec-card { border: 1px solid #e4e4e4; border-radius: 8px; padding: 14px 14px 16px; background: #fff; }
.spec-label { margin: 0 0 6px; color: #17803d; font-size: 12px; font-weight: 700; }
.spec-value { margin: 0; font-size: 18px; font-weight: 750; line-height: 1.25; }
.spec-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.spec-sections .spec-card {
  background: linear-gradient(180deg, #ffffff 0%, #f3faf6 100%);
  color: #1c1c1c;
  min-width: 0;
  overflow-wrap: break-word;
  border: 1px solid #e5f2eb;
  border-radius: 16px;
  padding: 22px 22px 16px;
  box-shadow: 0 10px 30px rgba(20, 40, 30, 0.08);
}
.spec-sections .spec-card h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.02em; color: #17803d; font-weight: 750; }
.spec-sections .spec-line {
  display: grid; grid-template-columns: minmax(140px, 42%) minmax(0, 1fr); gap: 16px;
  padding: 10px 0; border-top: 1px solid #e4efe9; min-width: 0;
}
.spec-sections .spec-label,
.spec-sections .spec-value {
  margin: 0; color: #1c1c1c; min-width: 0; overflow-wrap: anywhere; background: transparent;
}
.spec-sections .spec-label { font-size: 14px; font-weight: 650; }
.spec-sections .spec-value { font-size: 16px; font-weight: 750; }
html[data-theme="dark"] .spec-sections .spec-card {
  background: linear-gradient(180deg, #ffffff 0%, #f3faf6 100%);
  color: #1c1c1c;
  box-shadow: 0 10px 30px rgba(20, 40, 30, 0.08);
}
html[data-theme="dark"] .spec-sections .spec-card h3 { color: #17803d; background: transparent; }
html[data-theme="dark"] .spec-sections .spec-label,
html[data-theme="dark"] .spec-sections .spec-value { color: #1c1c1c; background: transparent; }
.product-index h3 { margin: 22px 0 8px; }
.product-index ul { list-style: none; margin: 0; padding: 0; columns: 3; }
.product-index a { display: block; padding: 4px 0; color: #145c32; }
.home-copy { padding: 8px 40px 12px; background: #fff; }
.home-copy p { max-width: 760px; }
.specify-shell { width: min(760px, calc(100% - 48px)); margin: 28px auto 64px; }
.pool { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.pool button, .specify-go { border: 0; cursor: pointer; }
#published { font-size: 22px; font-weight: 750; }
html[data-theme="dark"] .cat-block,
html[data-theme="dark"] .home-doors,
html[data-theme="dark"] .home-copy,
html[data-theme="dark"] .jump,
html[data-theme="dark"] .optic-pair,
html[data-theme="dark"] .product-index { background: #141a17; color: #f4f7f5; }
html[data-theme="dark"] .spec-table th { color: #d5e0d8; }
html[data-theme="dark"] .spec-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .spec-toggle { background: transparent; color: #7fd49b; border-color: #7fd49b; }
.range-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 40px 28px; background: #fff; }
.range-cards a { display: block; min-height: 120px; border: 1px solid #e4e4e4; border-radius: 8px; padding: 22px 18px; color: inherit; text-decoration: none; background: #fff; }
.range-cards strong { display: block; font-size: 22px; letter-spacing: -0.02em; }
.range-cards span { display: block; margin-top: 8px; color: #17803d; font-weight: 700; }
.short-products { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.short-products a { display: block; border: 1px solid #d9d9d9; border-radius: 8px; padding: 12px 14px; font-weight: 700; }
.product-index details { margin-top: 8px; }
.fitting-title { margin: 0 0 10px; font-weight: 750; }
.fit-screen { background: #fff; color: #1c1c1c; padding: 28px 40px 64px; }
.fit-screen h1 { margin: 0 0 8px; font-size: 42px; letter-spacing: -0.03em; }
.fit-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: start; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 16px; }
.choice { border: 1px solid #d9d9d9; border-radius: 8px; background: #fff; color: #1c1c1c; padding: 16px; font-weight: 700; text-align: left; cursor: pointer; }
.choice.is-on { outline: 2px solid #17803d; background: #e7f6ee; }
#areas { max-height: 320px; overflow: auto; padding-right: 4px; }
.fit-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 520px; overflow: auto; }
.fit-results li { border: 1px solid #e4e4e4; border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.fit-results li.is-on { outline: 2px solid #17803d; }
.fit-results a { font-weight: 750; color: #146b34; }
.fit-results span { display: block; margin-top: 4px; }
.fit-screen label { display: grid; gap: 6px; margin: 12px 0; font-weight: 700; }
.fit-screen input[type="number"], .fit-screen input[type="text"] { border: 1px solid #d9d9d9; border-radius: 8px; padding: 10px; font: inherit; background: #fff; color: #1c1c1c; }
.build-screen { display: grid; grid-template-columns: minmax(340px, 42%) 1fr; align-items: start; background: #fff; color: #1c1c1c; }
.build-side, .build-preview { max-height: calc(100vh - 118px); overflow: auto; }
.build-side { padding: 20px 22px 48px; }
.build-preview { border-left: 1px solid #e4e4e4; background: #f6f7f6; }
.build-preview iframe { width: 100%; height: calc(100vh - 140px); border: 0; background: #fff; display: block; }
.pir-fields { display: grid; gap: 8px; margin: 4px 0 12px 18px; }
.pir-fields label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.pir-fields input[type="text"],
.pir-fields textarea {
  width: 100%; font: inherit; font-weight: 500;
  border: 1px solid #d9d9d9; border-radius: 8px; padding: 8px;
  background: #fff; color: #1c1c1c;
}
html[data-theme="dark"] .pir-fields input[type="text"],
html[data-theme="dark"] .pir-fields textarea {
  background: #101613; color: #f4f7f5; border-color: rgba(255,255,255,.2);
}
.build-publish { margin-top: 8px; border: 0; border-radius: 6px; background: #17803d; color: #fff; padding: 10px 16px; font-weight: 750; cursor: pointer; }
.build-publish:hover { background: #146b34; color: #fff; }
.build-side h1 { margin: 0 0 8px; font-size: 36px; letter-spacing: -0.03em; }
.build-group { border-top: 1px solid #e6e6e6; padding: 14px 0; }
.build-group h2 { margin: 0 0 8px; color: #17803d; font-size: 13px; letter-spacing: 0.08em; }
#rule-editor input[type="text"], #lumen-editor input[type="text"] { width: 100%; margin: 0 0 12px; box-sizing: border-box; }
.lumen-row { display: grid; grid-template-columns: 28px 72px 1fr 120px 1fr; gap: 6px; align-items: center; margin: 0 0 8px; }
.lumen-row input[type="text"] { margin: 0; }
.tick { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.is-off { opacity: 0.45; }
.refuse { color: #8a1f1f; font-weight: 700; }
html[data-theme="dark"] .fit-screen,
html[data-theme="dark"] .build-screen,
html[data-theme="dark"] .build-side,
html[data-theme="dark"] .range-cards,
html[data-theme="dark"] .range-cards a,
html[data-theme="dark"] .choice { background: #141a17; color: #f4f7f5; }
html[data-theme="dark"] .build-preview { background: #101613; }
@media (max-width: 980px) {
  .optic-board, .optic-live, .home-doors, .feature-band, .product-index ul, .range-cards, .fit-grid, .build-screen, .spec-cards, .spec-sections { grid-template-columns: 1fr; columns: 1; }
  .k-mega-grid { grid-template-columns: 1fr; }
  .fit-grid, .build-screen, .range-cards { grid-template-columns: 1fr; }
  .optic-pair[data-optic="A3"] { grid-column: auto; }
  .build-side, .build-preview { max-height: none; }
}
.back-to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  border: 0; border-radius: 999px; background: #17803d; color: #fff;
  padding: 10px 16px; font-weight: 750; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.back-to-top:hover, .back-to-top:focus-visible { background: #146b34; color: #fff; }
.k-foot {
  margin-top: 28px;
  padding: 36px 28px 22px;
  background: #101614;
  color: #e7eee9;
}
.k-foot a { color: #e7eee9; text-decoration: none; }
.k-foot a:hover, .k-foot a:focus-visible { color: #b7f7cf; }
.k-foot .k-word small { color: #8fd9a8; }
.k-foot-grid { display: grid; grid-template-columns: 1.1fr 0.8fr 1.2fr 1fr; gap: 28px 36px; max-width: 1180px; margin: 0 auto; }
.k-foot p { margin: 10px 0 0; }
.k-foot ul { list-style: none; margin: 0; padding: 0; }
.k-foot li { margin: 0 0 8px; }
.k-foot-title { margin: 0 0 8px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.k-social { display: flex; gap: 14px; }
.k-foot-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; max-width: 1180px; margin: 28px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; }
@media (max-width: 980px) {
  .k-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .k-foot-grid { grid-template-columns: 1fr; }
}
.k-site > .k-nav {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.k-nav > .k-drop > .k-menu { left: 0; right: auto; }
.k-hero.k-home .home-doors { grid-template-columns: repeat(3, 1fr); }

/* Series pages from data: polar curves, measured line, generated tool pages */
.polar svg { width: 100%; max-width: 240px; height: auto; display: block; margin: 8px auto 0; background: #fff; }
.k-measured a { color: inherit; }
.k-hero .k-measured { color: #d9efe1; }
.app-cards .app-icon { height: 72px; object-fit: contain; padding: 14px 0 0; background: #fff; }
.spec-page { min-height: 60vh; }
.spec-page h1 { margin: 0 0 8px; font-size: 36px; letter-spacing: -0.03em; }
.spec-page ul, .spec-page ol { padding-left: 20px; }
.spec-page li { margin: 6px 0; line-height: 1.45; }
.table-scroll { overflow-x: auto; }
.photometry-table { min-width: 860px; }
.photometry-table th, .photometry-table td { font-size: 13px; white-space: nowrap; }
.question-list li { max-width: 80ch; }
.questions-table td:nth-child(2) { min-width: 18ch; max-width: 70ch; }
.questions-table td:first-child { white-space: nowrap; }
.questions-table tr[data-slug] { cursor: pointer; }
.questions-table tr[data-slug]:hover, .questions-table tr[data-slug]:focus { background: #e3f1e7; outline: none; }
@media (max-width: 600px) { .questions-table td:first-child { white-space: normal; } .office-table.questions-table { font-size: 16px; } }

/* Edit series */
.edit-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end; padding: 10px 0 14px; position: sticky; top: 0; z-index: 3; background: inherit; }
.build-side { background: #fff; }
.edit-bar label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.edit-bar select, .edit-bar input { border: 1px solid #cfd6d1; border-radius: 6px; padding: 8px 10px; font: inherit; min-width: 0; }
.edit-bar .build-publish { margin-top: 0; }
.edit-bar .build-publish:disabled { background: #9aa59e; cursor: not-allowed; }
.edit-quiet { background: #eef3ef; color: #17402a; }
.edit-quiet:hover { background: #dce8df; color: #17402a; }
.edit-status { flex-basis: 100%; margin: 0; font-size: 14px; min-height: 1.2em; }
.edit-status[data-tone="good"] { color: #17803d; }
.edit-status[data-tone="warn"] { color: #8a5a00; }
.edit-status[data-tone="bad"] { color: #a31919; }
#problems { margin: 0; padding-left: 18px; font-size: 14px; color: #a31919; }
#problems .ok { color: #17803d; list-style: none; margin-left: -18px; }
.edit-jump { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 4px 0 10px; font-size: 13px; }
.edit-jump a { color: #17803d; text-transform: capitalize; }
.edit-table { display: grid; gap: 10px; }
.edit-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 10px; border: 1px solid #e3e8e4; border-radius: 8px; background: #fafbfa; }
.edit-row.is-form { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.edit-table.is-compact .edit-row { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); padding: 6px 8px; }
.edit-field { display: grid; gap: 3px; font-size: 12px; font-weight: 700; color: #3d4a42; align-content: start; }
.edit-field input[type="text"], .edit-field select, .edit-field textarea, .edit-long { width: 100%; box-sizing: border-box; border: 1px solid #cfd6d1; border-radius: 6px; padding: 6px 8px; font: inherit; font-weight: 400; color: #1c1c1c; background: #fff; }
.edit-field.edit-textarea { grid-column: 1 / -1; }
.edit-field.edit-check { display: flex; align-items: center; gap: 6px; }
.edit-field input[type="file"] { font-size: 11px; font-weight: 400; }
.edit-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid #e3e8e4; }
.edit-tools { display: flex; gap: 6px; align-items: end; grid-column: 1 / -1; justify-content: flex-end; }
.edit-tools button { border: 1px solid #cfd6d1; background: #fff; border-radius: 5px; padding: 3px 8px; cursor: pointer; font-size: 12px; }
.edit-tools button:last-child { color: #8a1f1f; }
.edit-column { border: 1px solid #e3e8e4; border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.edit-column summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.edit-defaults { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 10px 0; }
.edit-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px; }
.edit-tick { display: grid; gap: 4px; align-content: start; }
.edit-new { display: grid; gap: 8px; padding: 10px; border: 1px solid #e3e8e4; border-radius: 8px; flex-basis: 100%; }
html[data-theme="dark"] .edit-row, html[data-theme="dark"] .edit-column, html[data-theme="dark"] .edit-new { background: #17201b; border-color: #2c3a32; }
html[data-theme="dark"] .edit-field { color: #d5ddd8; }
html[data-theme="dark"] .edit-field input[type="text"], html[data-theme="dark"] .edit-field select, html[data-theme="dark"] .edit-field textarea, html[data-theme="dark"] .edit-long, html[data-theme="dark"] .edit-bar select, html[data-theme="dark"] .edit-bar input { background: #0f1512; color: #f4f7f5; border-color: #2c3a32; }
html[data-theme="dark"] .build-side { background: #121816; }
html[data-theme="dark"] .edit-tools button { background: #0f1512; color: #f4f7f5; border-color: #2c3a32; }
@media (max-width: 720px) {
  .k-site > .k-nav { flex-wrap: wrap; padding: 6px 16px; row-gap: 6px; }
  .k-nav > .k-nav-end { margin-left: 0; flex-wrap: wrap; max-width: 100%; flex-shrink: 1; row-gap: 4px; }
  .k-nav .k-drop { position: static; }
  .k-nav > .k-drop > .k-menu { left: 16px; right: 16px; max-width: calc(100vw - 32px); box-sizing: border-box; }
  .k-top { flex-wrap: wrap; padding: 6px 16px; }
  .k-top .k-search { order: 3; flex-basis: 100%; }
  .edit-bar { position: static; }
  .cat-block, .fit-screen { padding-left: 16px; padding-right: 16px; }
}
.optic-pair .pair { grid-template-columns: 1.15fr 1fr; align-items: end; margin-top: 8px; }
.optic-pair .pair figure { margin: 0; }
.optic-pair .pair svg { width: 100%; max-width: none; display: block; border: 1px solid #edf1ee; border-radius: 4px; }
.optic-pair .pair figcaption { margin-top: 3px; font-size: 11px; color: #6a776f; text-align: center; letter-spacing: 0.04em; text-transform: uppercase; }

/* Pictures on tiles. A cut-out on white melts into the tile (multiply), so in dark mode it reads
   as a lit panel, not a white block. Photographs fill their tile. Cards follow the theme. */
:root { --tile: #f2f4f3; --tile-line: #e3e8e5; --card-bg: #fff; --card-ink: #1c1c1c; --card-soft: #4a554e; --card-line: #e4e8e5; }
html[data-theme="dark"] { --tile: #e9edea; --tile-line: #2c3a32; --card-bg: #1b2420; --card-ink: #eef3f0; --card-soft: #b9c6be; --card-line: #2c3a32; }
.k-tile { display: block; background: var(--tile); border-radius: 8px; overflow: hidden; isolation: isolate; }
.k-tile img { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; background: transparent; border: 0; }
.k-tile.is-product { aspect-ratio: 1; padding: 10px; box-sizing: border-box; }
.k-tile.is-product img { object-fit: contain; }
.k-tile.is-photo { aspect-ratio: 4 / 3; }
.k-tile.is-photo img { object-fit: cover; mix-blend-mode: normal; }
.related-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.related-grid figure { width: auto; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 10px; overflow: hidden; transition: border-color .15s, transform .15s; }
.related-grid figure:hover { border-color: #17803d; transform: translateY(-2px); }
.related-grid img { width: 100%; height: 100%; border: 0; }
.related-grid .k-tile { border-radius: 0; }
.related-grid p { padding: 10px 12px 12px; margin: 0; color: var(--card-ink); font-size: 14px; line-height: 1.3; }
.case-row { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.case-row figure { width: auto; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 10px; overflow: hidden; }
.case-row img { width: 100%; height: 100%; }
.case-row .k-tile { border-radius: 0; }
.case-row figcaption { padding: 10px 12px 12px; color: var(--card-ink); }
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gallery-grid img { width: 100%; height: 100%; border: 0; }
.k-zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
.k-zoom[hidden] { display: none; }
.k-zoom:focus-visible { outline: 3px solid #17803d; outline-offset: 2px; }
.k-zoom .k-tile { transition: transform .15s; }
.k-zoom:hover .k-tile { transform: scale(1.02); }
.k-intro-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; max-width: 680px; }
.k-intro-shots img { width: 100%; height: 100%; background: transparent; }
.k-marks li.k-mark-text { border-radius: 50%; background: #8d918f; color: #fff; text-align: center; }
.k-marks li.k-mark-text span { display: block; padding: 0 6px; font-size: 11px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.app-cards a, .app-cards article { background: var(--card-bg); color: var(--card-ink); border-color: var(--card-line); }
.app-cards p { color: var(--card-soft); }
.app-cards img { height: 150px; }
.app-cards .is-plain { display: flex; align-items: center; min-height: 64px; border-left: 4px solid #17803d; }
.app-cards .is-plain h3 { margin: 12px 14px; }
.k-viewer { padding: 0; border: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 92vh; overflow: visible; }
.k-viewer::backdrop { background: rgba(8, 12, 10, .86); }
.k-viewer figure { margin: 0; }
.k-viewer img { display: block; max-width: min(1100px, 94vw); max-height: 82vh; object-fit: contain; border-radius: 6px; background: var(--tile); }
.k-viewer figcaption { margin-top: 8px; color: #e6ece8; font-size: 14px; text-align: center; }
.k-viewer button { position: fixed; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }
.k-viewer button:hover { background: rgba(255,255,255,.26); }
.k-viewer-prev, .k-viewer-next { top: 50%; width: 48px; height: 48px; margin-top: -24px; font-size: 30px; line-height: 1; }
.k-viewer-prev { left: 16px; }
.k-viewer-next { right: 16px; }
.k-viewer-close { top: 16px; right: 16px; padding: 8px 16px; font-weight: 700; }
@media (max-width: 720px) {
  .k-intro-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Galleries mix photographs with cut-outs on white, so they blend too; a photograph only darkens a touch. */
.k-zoom .k-tile.is-photo img { mix-blend-mode: multiply; }
.case-row .k-tile.is-photo img { mix-blend-mode: normal; }
.app-cards .is-plain { align-self: start; }
.k-marks li.k-mark-text span { font-size: 12.5px; }
.k-downloads .k-tile.is-icon { justify-self: end; width: 72px; height: 72px; padding: 6px; box-sizing: border-box; border-radius: 8px; }
.k-downloads .k-tile.is-icon img { width: 100%; height: 100%; object-fit: contain; }
/* A mark drawn in black on clear (CE) turns light in dark mode. Ticked per icon in the bank. */
html[data-theme="dark"] .k-marks li.is-ink img { filter: invert(1) brightness(1.6); }
/* Places with no sector photograph: a row of chips under the photo cards. */
.app-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.app-chips li { border: 1px solid var(--card-line); border-left: 4px solid #17803d; border-radius: 8px; background: var(--card-bg); color: var(--card-ink); font-weight: 700; font-size: 15px; }
.app-chips li > a, .app-chips li:not(:has(a)) { display: block; padding: 9px 14px; color: inherit; text-decoration: none; }

/* Description left, summary right down to phone width (the editor's preview is about 800px wide). */
@media (max-width: 720px) {
  .k-intro { grid-template-columns: 1fr; padding: 20px 16px 8px; }
}

/* The menu bar needs about 1050px on one line; below that it wraps rather than scroll sideways. */
@media (max-width: 1080px) {
  .k-site > .k-nav { flex-wrap: wrap; row-gap: 6px; }
  .k-nav > .k-nav-end { margin-left: auto; }
}

/* Edit series: page order (drag or arrows) and the ready-made optic bank. */
.edit-order { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.edit-order-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  background: #fff; border: 1px solid #d9e0dc; border-radius: 6px; cursor: grab;
}
.edit-order-item .tick { margin: 0; flex: 1; }
.edit-order-item.is-dragging { opacity: 0.5; }
.edit-order-item.is-over { border-color: #17803d; box-shadow: inset 0 3px 0 #17803d; }
.edit-handle { color: #8a968f; font-size: 18px; line-height: 1; }
.edit-optic-bank { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.edit-optic-card {
  display: grid; gap: 2px; text-align: left; padding: 8px 10px; font: inherit; font-size: 13px;
  background: #fff; color: #1c1c1c; border: 1px solid #d9e0dc; border-radius: 6px; cursor: pointer;
}
.edit-optic-card strong { font-size: 15px; color: #17803d; }
.edit-optic-card em { font-style: normal; font-weight: 700; color: #17803d; margin-top: 4px; }
.edit-optic-card:disabled { cursor: default; opacity: 0.55; }
.edit-optic-card:disabled em { color: #667; }
.edit-optic-card:not(:disabled):hover { border-color: #17803d; }
html[data-theme="dark"] .edit-order-item, html[data-theme="dark"] .edit-optic-card { background: #141a17; color: #f4f7f5; border-color: #2c3a32; }

/* Edit series: Start a series from ready-made parts. */
.edit-starter { display: grid; gap: 14px; margin: 14px 0; padding: 16px; border: 1px solid #d9e0dc; border-radius: 8px; background: #fbfcfb; }
.edit-starter h2 { margin: 0; font-size: 18px; color: #17803d; }
.edit-starter fieldset { margin: 0; padding: 10px 12px; border: 1px solid #d9e0dc; border-radius: 8px; }
.edit-starter legend { padding: 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #526056; }
.edit-starter-names, .edit-starter-takes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; }
.edit-starter-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.edit-starter-card {
  display: grid; gap: 6px; align-content: start; padding: 8px; font-size: 13px; cursor: pointer;
  background: #fff; border: 1px solid #d9e0dc; border-radius: 6px;
}
.edit-starter-card:has(input:checked) { border-color: #17803d; box-shadow: inset 0 0 0 1px #17803d; }
.edit-starter-card img { width: 100%; height: 84px; object-fit: contain; background: var(--tile, #f2f4f3); mix-blend-mode: multiply; }
.edit-starter-card small { display: block; color: #667; margin-left: 22px; }
html[data-theme="dark"] .edit-starter { background: #101613; border-color: #2c3a32; }
html[data-theme="dark"] .edit-starter fieldset, html[data-theme="dark"] .edit-starter-card { background: #141a17; color: #f4f7f5; border-color: #2c3a32; }
html[data-theme="dark"] .edit-starter legend { color: #c5d0c8; }

/* Edit series: Remove background (the CMS's cut-out, run on this device). */
.edit-bg { display: grid; gap: 6px; margin-top: 4px; }
.edit-bg > button, .edit-bg-actions button { justify-self: start; font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid #17803d; border-radius: 6px; background: #fff; color: #17803d; cursor: pointer; }
.edit-bg-panel { display: grid; gap: 8px; padding: 10px; border: 1px solid #d9e0dc; border-radius: 8px; background: #fbfcfb; }
.edit-bg-backdrop { display: flex; gap: 12px; align-items: center; margin: 0; font-size: 13px; }
.edit-bg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.edit-bg-pair figure { margin: 0; }
.edit-bg-pair img {
  width: 100%; height: 140px; object-fit: contain;
  background: repeating-conic-gradient(#e8ecea 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}
.edit-bg-pair figcaption { font-size: 12px; color: #667; }
.edit-bg-actions { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
html[data-theme="dark"] .edit-bg-panel { background: #101613; border-color: #2c3a32; }
html[data-theme="dark"] .edit-bg > button, html[data-theme="dark"] .edit-bg-actions button { background: #141a17; color: #7fd3a0; border-color: #2f9d62; }

/* Case studies: one template for every case study, and the index with sector filters. */
.case-hero {
  display: grid; gap: 8px; align-content: end; min-height: 300px; padding: 28px 40px;
  background: #1c2420 center / cover no-repeat; color: #fff;
}
.case-hero.is-index { min-height: 200px; background: linear-gradient(120deg, #0f1613, #17803d); }
.case-hero h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); line-height: 1.05; letter-spacing: -0.02em; }
.case-kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9fe0b7; }
.case-client { margin: 0; font-size: 18px; color: #e6efe9; }
.case-crumbs { font-size: 13px; color: #d4e2da; }
.case-crumbs a { color: #fff; }
.case-sectors { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0; }
.case-sectors li { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgba(23, 128, 61, 0.14); color: #17803d; }
.case-hero .case-sectors li { background: rgba(255, 255, 255, 0.16); color: #fff; }
.case-overview, .case-challenge { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }
.case-overview p, .case-challenge p, .case-process p, .case-overview li, .case-challenge li, .case-process li { max-width: 70ch; }
.case-pdf { display: inline-block; padding: 10px 16px; border-radius: 6px; background: #17803d; color: #fff; font-weight: 700; text-decoration: none; }
.case-pdf-cover .k-tile { display: block; }
.case-pdf-cover img { width: 100%; height: auto; }
.case-table { overflow-x: auto; }
.case-table table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 15px; }
.case-table th, .case-table td { padding: 8px 10px; border-bottom: 1px solid #dfe5e1; text-align: left; vertical-align: top; }
.case-table th { color: #17803d; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.case-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.case-gallery a:first-child { grid-column: 1 / -1; }
.case-gallery .k-tile { display: block; aspect-ratio: 4 / 3; }
.case-gallery img { width: 100%; height: 100%; object-fit: cover; }
.case-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.case-saving {
  display: grid; justify-items: center; gap: 6px; padding: 40px 24px; text-align: center;
  background: linear-gradient(120deg, #0f1613, #17803d); color: #fff;
}
.case-saving-value { margin: 0; font-size: clamp(48px, 9vw, 88px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.case-saving-label { margin: 0; font-size: 18px; text-transform: uppercase; letter-spacing: 0.1em; color: #d4f0de; }
.case-saving a { color: #fff; font-weight: 700; }
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.case-card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid #dfe5e1; border-radius: 8px;
  background: #fff; color: inherit; text-decoration: none;
}
.case-card[hidden] { display: none; }
.case-card .k-tile { display: block; aspect-ratio: 4 / 3; }
.case-card img { width: 100%; height: 100%; object-fit: cover; }
.case-card-text { display: grid; gap: 6px; align-content: start; padding: 12px 14px 14px; }
.case-card-text strong { font-size: 17px; }
.case-card-text > span { font-size: 14px; color: #556; }
.case-card:hover { border-color: #17803d; }
.case-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.case-filter button { padding: 6px 14px; border: 1px solid #17803d; border-radius: 99px; background: #fff; color: #17803d; font: inherit; font-weight: 600; cursor: pointer; }
.case-filter button.is-on { background: #17803d; color: #fff; }
.case-link { color: inherit; text-decoration: none; }
.case-link:hover figcaption { text-decoration: underline; }
html[data-theme="dark"] .case-card, html[data-theme="dark"] .case-filter button:not(.is-on) { background: #141a17; color: #f4f7f5; border-color: #2c3a32; }
html[data-theme="dark"] .case-card-text > span { color: #c5d0c8; }
html[data-theme="dark"] .case-table th, html[data-theme="dark"] .case-table td { border-color: #2c3a32; }
html[data-theme="dark"] .case-sectors li { color: #7fd3a0; }
@media (max-width: 860px) {
  .case-overview, .case-challenge { grid-template-columns: 1fr; }
  .case-hero { padding: 24px 16px; min-height: 240px; }
}

/* Site pages imported from the live site: one template for sectors, blog, help, technical and the rest. */
.page-hero { min-height: 220px; }
.page-section h2 { margin: 18px 0 8px; font-size: 24px; }
.page-section h3 { margin: 16px 0 6px; font-size: 19px; }
.page-section p, .page-section li { max-width: 75ch; }
.page-section.is-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.page-pictures { display: grid; gap: 10px; }
.page-image { margin: 10px 0; }
/* A picture in a page's text shows at its own size at most: a 260px icon is not stretched to the column. */
.page-image .k-tile { display: inline-block; max-width: 100%; vertical-align: top; }
.page-image .k-tile.is-photo { aspect-ratio: auto; }
.page-image img { width: auto; max-width: 100%; height: auto; display: block; }
.page-section:not(.is-split) > .page-image { max-width: 760px; }
.page-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 12px 0; }
.page-button { display: inline-block; padding: 10px 16px; border-radius: 6px; background: #17803d; color: #fff; font-weight: 700; text-decoration: none; }
.page-video { position: relative; aspect-ratio: 16 / 9; max-width: 860px; margin: 12px 0; }
.page-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) {
  .page-section.is-split { grid-template-columns: 1fr; }
}
.page-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.page-gallery figure { margin: 0; }
.page-gallery .k-tile { display: block; aspect-ratio: 1; }
.page-gallery img { width: 100%; height: 100%; object-fit: contain; }
.page-gallery figcaption { margin-top: 6px; font-size: 14px; font-weight: 600; }

/* "Original photos": every photograph is the enhanced copy until this is pressed (photos.js). */
.photos-switch {
  margin-right: 8px; padding: 4px 10px; border: 1px solid #d0d7d3; border-radius: 99px;
  background: #fff; color: #1c1c1c; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.photos-switch[aria-pressed="true"] { border-color: #17803d; color: #17803d; }
.photos-switch.is-floating { position: fixed; left: 12px; bottom: 12px; z-index: 50; margin: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
html[data-theme="dark"] .photos-switch { background: #141a17; color: #f4f7f5; border-color: #2c3a32; }
html[data-theme="dark"] .photos-switch[aria-pressed="true"] { color: #7fd3a0; border-color: #2f9d62; }
@media (max-width: 720px) { .photos-switch:not(.is-floating) { font-size: 11px; padding: 3px 8px; } }
.edit-variant { margin: 0 0 14px; padding: 10px 12px; border-left: 4px solid #17803d; background: rgba(23, 128, 61, 0.08); font-size: 14px; }

/* Site-wide strips under every page (strips-render.js, from the shared banks). */
.strip { padding: 28px 40px; }
.strip-title { margin: 0 0 14px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #526056; }
.strip-logos { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: center; }
.strip-logo img { height: 56px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter 0.2s, opacity 0.2s; }
.strip-logo:hover img { filter: none; opacity: 1; }
.strip-clients { background: #fff; border-top: 1px solid #e6ebe8; }
.strip-quotes { background: #0f1613 center / cover no-repeat; color: #fff; }
.strip-quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.strip-quote { margin: 0; padding: 16px 18px; border-left: 3px solid #2f9d62; background: rgba(255, 255, 255, 0.06); }
.strip-quote blockquote { margin: 0 0 10px; font-size: 18px; line-height: 1.35; font-style: italic; }
.strip-quote figcaption { display: flex; gap: 10px; align-items: center; font-size: 14px; color: #c9dacf; }
.strip-quote figcaption img { height: 32px; width: auto; max-width: 90px; object-fit: contain; background: #fff; padding: 3px; border-radius: 3px; }
.strip-marks { background: #f6f7f6; }
.strip-marks .strip-logo img { height: 64px; }
html[data-theme="dark"] .strip-clients, html[data-theme="dark"] .strip-marks { background: #101613; border-color: #2c3a32; }
html[data-theme="dark"] .strip-logo img { filter: grayscale(1) invert(1) brightness(1.4); }
html[data-theme="dark"] .strip-title { color: #c5d0c8; }
@media (max-width: 720px) { .strip { padding: 22px 16px; } .strip-logo img { height: 42px; } }
/* The admin: one menu across Series and the office. */
.admin-nav { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid #e3e8e4; }
.admin-nav a { padding: 10px 14px; color: #3d4a42; font-weight: 750; text-decoration: none; border-bottom: 3px solid transparent; }
.admin-nav a[aria-current] { color: #17803d; border-bottom-color: #17803d; }
.office-screen { max-width: 1100px; margin: 0 auto; padding: 18px 22px 60px; background: #fff; color: #1c1c1c; }
.office-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; }
.office-bar h1 { margin: 0; flex: 1 1 auto; font-size: 32px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.office-bar label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.office-bar input { border: 1px solid #cfd6d1; border-radius: 6px; padding: 8px 10px; font: inherit; }
.office-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 14px 0 8px; }
.office-tools input[type="search"] { flex: 1 1 220px; border: 1px solid #cfd6d1; border-radius: 6px; padding: 9px 10px; font: inherit; }
.office-tools label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.office-tools select { border: 1px solid #cfd6d1; border-radius: 6px; padding: 8px; font: inherit; }
.office-tools .build-publish { margin: 0; }
.office-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.office-chips button { border: 1px solid #cfd6d1; border-radius: 999px; background: #fff; padding: 5px 12px; font: inherit; font-size: 14px; cursor: pointer; text-transform: capitalize; }
.office-chips button[aria-pressed="true"] { background: #17803d; border-color: #17803d; color: #fff; }
.office-chips small { opacity: 0.75; }
.office-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.office-table th { text-align: left; background: #17803d; color: #fff; padding: 8px 10px; font-weight: 750; white-space: nowrap; }
.office-table td { padding: 9px 10px; border-bottom: 1px solid #e6e6e6; }
.office-table tbody tr:nth-child(even) { background: rgba(23, 128, 61, 0.06); }
.office-table tr[data-id] { cursor: pointer; }
.office-table tr[data-id]:hover, .office-table tr[data-id]:focus { background: #e3f1e7; outline: none; }
.office-table td[data-status] { text-transform: capitalize; font-weight: 650; }
.office-table td[data-status="won"] { color: #17803d; }
.office-table td[data-status="lost"] { color: #8a2a2a; }
.office-record-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 12px 0; }
.office-record-bar .build-publish { margin: 0; }
.office-step { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; }
.office-step button { border: 1px solid #cfd6d1; border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.office-step button:disabled { opacity: 0.35; cursor: default; }
.office-parts { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid #e3e8e4; margin-bottom: 14px; }
.office-parts button { border: 0; background: none; padding: 10px 14px; font: inherit; font-weight: 700; color: #3d4a42; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.office-parts button[aria-selected="true"] { color: #17803d; border-bottom-color: #17803d; }
.office-part { display: grid; gap: 12px; }
.office-part .edit-field input[type="email"], .office-part .edit-field input[type="tel"], .office-part .edit-field input[type="date"], .office-part .edit-field input[type="number"] { width: 100%; box-sizing: border-box; border: 1px solid #cfd6d1; border-radius: 6px; padding: 6px 8px; font: inherit; font-weight: 400; }
.office-part .edit-quiet { border: 0; border-radius: 6px; padding: 8px 12px; font: inherit; cursor: pointer; align-self: end; }
.office-part > .build-publish { justify-self: start; }
.office-notes { display: grid; gap: 8px; }
.office-notes textarea { width: 100%; box-sizing: border-box; border: 1px solid #cfd6d1; border-radius: 6px; padding: 8px; font: inherit; }
.office-notes .build-publish { justify-self: start; margin: 0; }
.office-notes ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.office-notes li { border-left: 3px solid #17803d; padding: 4px 10px; background: #f6f9f7; }
.office-notes time { font-size: 13px; color: #5a665e; }
.office-notes p { margin: 2px 0 0; white-space: pre-wrap; }
@media (max-width: 640px) {
  .office-screen { padding: 12px 16px 48px; }
  .office-bar h1 { font-size: 26px; }
  .office-table thead { display: none; }
  .office-table tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-bottom: 1px solid #e6e6e6; }
  .office-table td { border: 0; padding: 2px 8px; }
  .office-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; font-weight: 750; font-size: 16px; }
}
html[data-theme="dark"] .office-screen { background: #141a17; color: #f4f7f5; }
html[data-theme="dark"] .office-notes li { background: #1d2521; }
/* Quotes in the office. */
.office-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.office-actions .build-publish { margin: 0; text-decoration: none; }
.office-line-total { margin: 0; align-self: end; padding: 7px 0; font-weight: 750; }
.office-totals { display: grid; justify-content: end; gap: 2px; margin: 12px 0 0; }
.office-totals div { display: grid; grid-template-columns: 8em 9em; text-align: right; }
.office-totals dt { color: #4a554e; }
.office-totals dd { margin: 0; font-weight: 750; }
.office-totals div:last-child { border-top: 2px solid #17803d; padding-top: 4px; font-size: 1.1em; }
.office-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.office-case { display: grid; grid-template-columns: auto 64px 1fr; gap: 8px; align-items: center; border: 1px solid #e3e8e4; border-radius: 8px; padding: 8px; cursor: pointer; }
.office-case img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; }
.office-case small { display: block; color: #5a665e; }
.office-part h3 { margin: 10px 0 4px; font-size: 16px; }
/* The proposal: a document on screen, and on paper without the site around it. */
.proposal { max-width: 900px; margin: 0 auto; padding: 18px 22px 60px; background: #fff; color: #1c1c1c; }
.proposal-tools { display: flex; gap: 14px; align-items: center; }
.proposal-cover { border-top: 10px solid #17803d; padding: 36px 0 28px; margin-bottom: 18px; border-bottom: 1px solid #e3e8e4; }
.proposal-brand { margin: 0 0 40px; font-weight: 800; letter-spacing: 0.12em; color: #17803d; display: flex; gap: 10px; align-items: center; }
.proposal-kicker { margin: 0; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 750; color: #4a554e; }
.proposal-cover h1 { margin: 6px 0 24px; font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.proposal-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; margin: 0; }
.proposal-facts dt { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #5a665e; }
.proposal-facts dd { margin: 2px 0 0; font-weight: 650; }
.proposal-section { margin: 26px 0; }
.proposal-section h2 { margin: 0 0 10px; padding: 8px 12px; background: #17803d; color: #fff; font-size: 18px; letter-spacing: 0.02em; }
.proposal-section h3 { margin: 14px 0 4px; }
.proposal-schedule code, .proposal-section code { font-size: 13px; overflow-wrap: anywhere; }
.proposal-fitting { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid #e3e8e4; break-inside: avoid; }
.proposal-fitting img { width: 100%; height: auto; object-fit: contain; }
.proposal-fitting h3 { margin: 0; font-size: 22px; }
.proposal-links { font-size: 14px; }
.proposal-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.proposal-cases article { break-inside: avoid; }
.proposal-cases img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.proposal-cases h3 { margin: 8px 0 4px; }
.proposal-cases p { margin: 0 0 6px; font-size: 14px; }
.proposal-contact { border-top: 1px solid #e3e8e4; padding-top: 12px; font-size: 14px; }
@media (max-width: 640px) {
  .proposal { padding: 12px 16px 40px; }
  .proposal-cover h1 { font-size: 30px; }
  .proposal-fitting { grid-template-columns: 1fr; }
  .proposal-fitting img { max-width: 220px; }
  .office-totals div { grid-template-columns: 7em 8em; }
  .proposal-schedule thead { display: none; }
  .proposal-schedule tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid #e6e6e6; }
  .proposal-schedule td { border: 0; padding: 0 4px; }
  .proposal-schedule td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; font-weight: 750; }
  .proposal-schedule td:nth-child(1):empty { display: none; }
  .proposal-schedule td:nth-child(4)::before { content: "Qty "; color: #5a665e; }
  .proposal-schedule td:nth-child(6) { font-weight: 750; text-align: right; }
}
@page { margin: 16mm 14mm; }
@media print {
  body[data-page="proposal"] .k-top, body[data-page="proposal"] .k-nav, body[data-page="proposal"] .k-foot, body[data-page="proposal"] .proposal-tools, body[data-page="proposal"] .to-top { display: none !important; }
  body[data-page="proposal"] { background: #fff; }
  .proposal { max-width: none; padding: 0; }
  .proposal-cover { min-height: 90vh; break-after: page; }
  .proposal-section h2, .proposal-section th, .proposal-cover, .proposal-brand .k-mark, .spec-table tbody tr { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .proposal a { color: inherit; }
  .proposal-section h2, .proposal-section h3 { break-after: avoid; }
}
.office-settings { max-width: 720px; margin-top: 14px; }
.office-settings h2 { margin: 0 0 6px; font-size: 20px; }
.office-settings .edit-field input { width: 100%; box-sizing: border-box; border: 1px solid #cfd6d1; border-radius: 6px; padding: 8px; font: inherit; font-weight: 400; }
.office-settings-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.office-settings-actions .build-publish { margin: 0; }
.office-settings-actions button:disabled { opacity: 0.5; cursor: default; }
.admin-nav { overflow-x: auto; }
.admin-nav a { white-space: nowrap; }
.office-checks { margin: 4px 0 10px; padding-left: 20px; }
.office-checks li { margin: 2px 0; color: #8a5a00; }
.office-checks.is-bad li { color: #a31919; font-weight: 650; }
.office-checks-ok { margin: 6px 0 10px; padding: 8px 12px; background: #e3f1e7; color: #17402a; font-weight: 700; border-radius: 6px; }
.office-encore-done { margin: 0 0 8px; padding: 10px 12px; background: #17803d; color: #fff; border-radius: 6px; }
.office-order-head { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 18px; margin: 0 0 10px; }
.office-order-head dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #5a665e; }
.office-order-head dd { margin: 2px 0 0; font-weight: 650; }
.office-part > button:disabled { opacity: 0.5; cursor: default; }
/* The office overview. */
.office-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 14px 0; }
.office-card { display: grid; gap: 2px; padding: 14px; border: 1px solid #e3e8e4; border-top: 5px solid #17803d; border-radius: 8px; color: inherit; text-decoration: none; background: #fafbfa; }
.office-card:hover { background: #eef6f0; }
.office-card span { font-size: 13px; font-weight: 700; color: #4a554e; }
.office-card strong { font-size: 30px; letter-spacing: -0.02em; }
.office-card small { color: #4a554e; }
.office-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.office-panel { border: 1px solid #e3e8e4; border-radius: 8px; padding: 12px 14px; }
.office-panel h2 { margin: 0 0 8px; font-size: 17px; color: #17803d; }
.office-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.office-panel li a { font-weight: 700; color: inherit; }
.office-panel li small { display: block; color: #5a665e; }
.office-bars li { display: grid; grid-template-columns: minmax(0, 8em) minmax(40px, 1fr) auto; gap: 8px; align-items: center; }
.office-bars li > span:first-child { overflow-wrap: anywhere; }
.office-meter { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #17803d var(--w), #e3e8e4 var(--w)); }
.office-bars strong { text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .office-panels { grid-template-columns: 1fr; } .office-card strong { font-size: 26px; } }
html[data-theme="dark"] .office-card { background: #1d2521; border-color: #2c3732; }
/* Survey photos and drawings. */
.office-files h3 { margin: 6px 0 2px; }
.office-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 8px 0; }
.office-file { margin: 0; border: 1px solid #e3e8e4; border-radius: 8px; overflow: hidden; background: #fafbfa; }
.office-file img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.office-file-pdf { display: grid; place-content: center; aspect-ratio: 4 / 3; background: #eef3ef; color: #17402a; font-weight: 800; font-size: 22px; text-align: center; text-decoration: none; }
.office-file-pdf small { font-size: 12px; font-weight: 500; padding: 0 8px; overflow-wrap: anywhere; }
.office-file figcaption { display: grid; gap: 6px; padding: 8px; }
.office-file figcaption input[type="text"] { width: 100%; box-sizing: border-box; border: 1px solid #cfd6d1; border-radius: 6px; padding: 6px 8px; font: inherit; }
.office-file figcaption .edit-quiet { justify-self: start; border: 0; border-radius: 6px; padding: 6px 10px; font: inherit; cursor: pointer; }
.office-file-add { display: inline-block; cursor: pointer; }
.proposal-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.proposal-photos figure { margin: 0; break-inside: avoid; }
.proposal-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.proposal-photos figcaption { margin-top: 4px; font-size: 14px; color: #4a554e; }
/* Quote revisions. */
.office-rev-tools { white-space: nowrap; }
.office-rev-tools .edit-quiet { border: 0; border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 14px; cursor: pointer; }
.office-compare tr[data-change="added"] td:nth-child(2) { color: #17803d; font-weight: 750; }
.office-compare tr[data-change="removed"] td:nth-child(2) { color: #a31919; font-weight: 750; }
.office-compare tr[data-change="changed"] td:nth-child(2) { color: #8a5a00; font-weight: 750; }
.office-compare tr[data-change="same"] { color: #6b766f; }
.office-compare-total { font-size: 17px; }
.proposal-superseded { padding: 4px 10px; border-radius: 6px; background: #fff3d6; color: #6b4500; font-weight: 700; }
/* The business dashboard. */
.office-todo { margin-top: 14px; border-left: 5px solid #17803d; }
.office-todo h2 small { font-size: 14px; color: #4a554e; font-weight: 600; }
.office-todo ul { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.office-todo li.is-overdue a { color: #a31919; }
.office-todo li.is-overdue small { color: #a31919; }
.office-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 120px; margin: 4px 0 6px; }
.office-chart span { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.office-chart i { align-self: end; display: block; height: var(--h); min-height: 2px; background: #17803d; border-radius: 3px 3px 0 0; }
.office-chart b { font-size: 11px; font-weight: 600; color: #5a665e; padding-top: 3px; }
.office-totals .is-sub { font-size: 14px; }
.office-totals .is-sub dd { font-weight: 600; }
.proposal-subtotal { text-align: right; margin: 4px 0 14px; }
@media (max-width: 640px) {
  .proposal-schedule.is-services tr { grid-template-columns: 1fr auto; }
  .proposal-schedule.is-services td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; font-weight: 750; }
  .proposal-schedule.is-services td:nth-child(2) { grid-column: auto; grid-row: auto; font-weight: 400; }
  .proposal-schedule.is-services td:nth-child(2)::before { content: "Qty "; color: #5a665e; }
  .proposal-schedule.is-services td:nth-child(4) { font-weight: 750; text-align: right; }
  .proposal-schedule.is-services td:nth-child(6)::before, .proposal-schedule.is-services td:nth-child(4)::before { content: none; }
  .proposal-schedule.is-controls td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; font-weight: 750; display: block; }
  .proposal-schedule.is-controls td:nth-child(2) { grid-column: 1 / -1; grid-row: auto; font-weight: 400; }
  .proposal-schedule.is-controls td:nth-child(3)::before { content: "Qty "; color: #5a665e; }
  .proposal-schedule.is-controls td:nth-child(4)::before { content: none; }
  .proposal-schedule.is-controls td:nth-child(5) { font-weight: 750; text-align: right; }
}
.office-key { display: flex; gap: 8px; align-items: end; margin: 0; }
.office-key .build-publish { margin: 0; }
.office-line-facts { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #3d4a42; }
.office-line-facts.is-bad { color: #a31919; font-weight: 650; }
.proposal-facts-line { color: #4a554e; font-size: 12px; line-height: 1.4; }
.office-energy dd { font-size: 17px; }
.proposal-energy { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 12px; }
.proposal-energy div { border: 1px solid #e3e8e4; border-top: 5px solid #17803d; border-radius: 6px; padding: 10px 12px; break-inside: avoid; }
.proposal-energy span { display: block; font-size: 13px; color: #4a554e; }
.proposal-energy strong { font-size: 24px; letter-spacing: -0.02em; }
.office-checklist { border: 1px solid #e3e8e4; border-radius: 8px; padding: 8px 12px; margin: 0; display: grid; gap: 6px; }
.office-checklist legend { font-weight: 750; padding: 0 4px; }
.proposal-terms li { margin: 4px 0; }
.proposal-accept { break-inside: avoid; }
.proposal-accept dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 12px 0 0; }
.proposal-accept dt { font-size: 13px; color: #4a554e; }
.proposal-accept dd { margin: 4px 0 0; min-height: 28px; border-bottom: 1px solid #1c1c1c; }
@media (max-width: 640px) { .proposal-accept dl { grid-template-columns: 1fr; } }
/* The specifier's schedule. */
.schedule-page { max-width: 960px; margin: 0 auto; padding: 18px 22px 60px; background: #fff; color: #1c1c1c; }
.schedule-page h1 { margin: 0 0 6px; font-size: 34px; letter-spacing: -0.03em; }
.schedule-items { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.schedule-items li { border: 1px solid #e3e8e4; border-left: 5px solid #17803d; border-radius: 8px; padding: 10px 12px; }
.schedule-item-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.schedule-item-head a { font-weight: 750; color: inherit; }
.schedule-item-head code { overflow-wrap: anywhere; }
.schedule-remove { margin-left: auto; border: 0; border-radius: 6px; background: #eef3ef; padding: 5px 10px; font: inherit; font-size: 14px; cursor: pointer; }
.schedule-facts { margin: 4px 0 6px; font-size: 13px; color: #3d4a42; }
.schedule-facts.is-bad { color: #a31919; font-weight: 650; }
.schedule-item-fields, .schedule-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; }
.schedule-page label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.schedule-page label input, .schedule-page label select, .schedule-page label textarea { font: inherit; font-weight: 400; border: 1px solid #cfd6d1; border-radius: 6px; padding: 8px; width: 100%; box-sizing: border-box; }
.schedule-box { margin: 18px 0; }
.schedule-box h2 { margin: 0 0 8px; font-size: 18px; color: #17803d; }
.schedule-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.schedule-actions .build-publish { margin: 0; }
#schedule-status { flex-basis: 100%; margin: 4px 0 0; font-weight: 650; }
.schedule-print { display: none; }
.k-fit-add { border: 0; border-radius: 6px; background: #17803d; color: #fff; padding: 8px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.k-fit-add:disabled { opacity: 0.7; }
@media print {
  body[data-page="schedule"] .k-top, body[data-page="schedule"] .k-nav, body[data-page="schedule"] .k-foot, body[data-page="schedule"] .to-top, .schedule-editor { display: none !important; }
  .schedule-print { display: block; }
  .schedule-page { max-width: none; padding: 0; }
  .schedule-print .proposal-section h2, .schedule-print .spec-table tbody tr { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .schedule-print .proposal-cover { min-height: auto; break-after: auto; }
}
/* The floating Top button never prints. */
@media print { .back-to-top { display: none !important; } }
.schedule-logo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.schedule-logo img { max-height: 56px; max-width: 200px; object-fit: contain; border: 1px solid #e3e8e4; border-radius: 6px; padding: 4px; background: #fff; }
.schedule-logo .schedule-remove { margin-left: 0; }
.schedule-cover-logo { display: block; max-height: 70px; max-width: 260px; object-fit: contain; margin: 0 0 24px; }
/* Accessories ordered beside a fitting, as cards. */
.accessory-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0 0 18px; }
.accessory-cards .spec-card { margin: 0; padding: 10px; display: grid; gap: 6px; align-content: start; color: inherit; text-decoration: none; }
.accessory-cards a.spec-card:hover { border-color: #17803d; }
.spec-group-link { font-size: 13px; font-weight: 600; margin-left: 8px; }
.accessory-cards img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.accessory-cards figcaption { display: grid; gap: 2px; }
.accessory-cards strong { font-size: 14px; overflow-wrap: anywhere; }
.accessory-cards span { font-size: 13px; color: #4a554e; }
.is-folded .spec-cards, .is-folded .spec-group { display: none; }
@media (max-width: 640px) { .accessory-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html[data-theme="dark"] .accessory-cards .spec-card { background: #1d2521; border-color: #2c3732; }
.accessory-page { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 28px; align-items: start; margin: 12px 0 30px; }
.accessory-picture img { width: 100%; height: auto; border: 1px solid #e3e8e4; border-radius: 8px; background: #fff; padding: 12px; box-sizing: border-box; }
.accessory-noimage { display: grid; place-content: center; aspect-ratio: 4 / 3; border: 1px dashed #cfd6d1; border-radius: 8px; color: #5a665e; font-weight: 750; overflow-wrap: anywhere; padding: 10px; text-align: center; }
.accessory-page h1 { margin: 0; font-size: 34px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.accessory-name { font-size: 20px; margin: 4px 0 12px; }
.accessory-ranges li { margin: 4px 0; }
.accessory-ranges small { color: #5a665e; }
.accessory-group h2 { font-size: 20px; margin: 22px 0 10px; }
#accessory-search { width: 100%; max-width: 520px; box-sizing: border-box; border: 1px solid #cfd6d1; border-radius: 6px; padding: 10px; font: inherit; }
@media (max-width: 640px) { .accessory-page { grid-template-columns: 1fr; } .accessory-page h1 { font-size: 26px; } }
.k-view-all.k-accessories { margin-left: 18px; }
.accessory-main { max-width: 1100px; margin: 0 auto; padding: 18px 22px 48px; box-sizing: border-box; }
@media (max-width: 640px) { .accessory-main { padding: 12px 16px 40px; } }
/* Icons in picture tiles (theme.js marks them): their own size, centred. */
.k-tile.has-small { display: grid; place-items: center; aspect-ratio: auto; min-height: 120px; padding: 18px; box-sizing: border-box; }
.k-tile.is-light-icon { background: #17803d; }
.k-tile img.is-small { width: auto; height: auto; object-fit: contain; }
/* The To do page. */
.office-todo-group { margin: 16px 0; }
.office-todo-group h2 { font-size: 18px; margin: 0 0 8px; color: #17803d; }
.office-todo-group.is-overdue h2, .office-todo-group.is-overdue li a { color: #a31919; }
.office-todo-group h2 small { color: #5a665e; font-weight: 600; font-size: 14px; }
.office-todo-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.office-todo-group li { border: 1px solid #e3e8e4; border-radius: 8px; padding: 8px 12px; }
.office-todo-group li a { font-weight: 750; color: inherit; }
.office-todo-group li small { display: block; color: #5a665e; }
.office-chips [data-who] { text-transform: none; }
/* The price list. */
.office-prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
.office-price input { width: 100%; box-sizing: border-box; border: 1px solid #cfd6d1; border-radius: 6px; padding: 7px 8px; font: inherit; font-weight: 400; }
.office-line-list { color: #17402a; font-weight: 650; }
.office-line-list:empty { display: none; }
.office-tools label { min-width: 0; max-width: 100%; }
.office-tools select { max-width: 100%; min-width: 0; }
#price-series { width: 100%; }
.office-chips [data-sample-chip] { text-transform: none; }
.office-totals .is-internal { border-top: 1px dashed #cfd6d1; padding-top: 6px; color: #5a5f5c; }
.office-totals .is-internal[data-tone="bad"] dd { color: #8a2a2a; font-weight: 750; }

/* Specifier tool page: dark hero with the four-field tool, shortlist cards below. */
.spec-page { background: var(--bg); color: var(--ink); }
.spec-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 32px; align-items: center;
  padding: 56px 40px 48px; color: #f2f2f0;
  background-color: #0e1110;
  background-image: radial-gradient(ellipse at 72% 45%, rgba(40,44,44,.55) 0%, rgba(10,12,12,0) 60%), linear-gradient(90deg, rgba(8,10,10,.97) 0%, rgba(8,10,10,.92) 50%, rgba(8,10,10,.8) 100%), url("images/live/cat-231-stephenson-5.jpg");
  background-size: cover; background-position: center;
}
.spec-hero h1 {
  margin: 0; font-family: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.02em;
}
.spec-place { margin: 18px 0 0; font-size: 18px; color: rgba(242,242,240,.86); }
.spec-place::after { content: ""; display: block; width: 60px; height: 1px; margin-top: 18px; background: rgba(242,242,240,.6); }
.spec-tool {
  margin-top: 28px; max-width: 620px; padding: 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  background: rgba(20,22,22,.82); backdrop-filter: blur(4px);
}
.spec-tool-head, .spec-tool-foot { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242,242,240,.8); }
.spec-tool-foot { margin-top: 12px; font-size: 11px; }
.spec-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; }
.spec-fields label { display: grid; gap: 6px; padding: 10px 12px; font-size: 13px; color: rgba(242,242,240,.75); }
.spec-fields label + label { border-left: 1px solid rgba(255,255,255,.14); }
.spec-fields-more { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -6px; }
.spec-tool select, .spec-tool input {
  width: 100%; min-width: 0; min-height: 36px; border: 0; border-radius: 3px; padding: 4px 6px;
  background: rgba(255,255,255,.06); color: #f2f2f0; font: inherit; font-size: 16px;
}
.spec-tool select option { color: #1c1c1c; }
.spec-unit { display: flex; align-items: center; gap: 6px; }
.spec-unit i { font-style: normal; color: rgba(242,242,240,.7); }
.spec-more { margin: 0 0 14px; font-size: 14px; color: rgba(242,242,240,.8); }
.spec-more summary { cursor: pointer; }
.spec-more label { display: grid; gap: 6px; margin-top: 8px; max-width: 240px; }
.spec-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 48px; border: 0; border-radius: 4px; background: #e6e1d8; color: #151515;
  font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
}
.spec-go:hover, .spec-go:focus-visible { background: #fff; }
.spec-feature { margin: 0; display: grid; justify-items: center; gap: 18px; }
.spec-feature img { width: min(100%, 560px); max-height: 380px; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
.spec-feature figcaption { justify-self: end; text-align: right; }
.spec-feature a { display: grid; gap: 4px; color: #f2f2f0; text-decoration: none; }
.spec-feature strong { letter-spacing: .14em; text-transform: uppercase; font-size: 15px; }
.spec-feature span { color: rgba(242,242,240,.82); font-size: 14px; }
.spec-results { padding: 36px 40px 64px; }
.spec-results-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 18px; }
.spec-results h2 { margin: 0 0 6px; font-size: 30px; letter-spacing: -0.02em; }
.spec-results-head p, .spec-results-head #published { margin: 0; color: var(--muted); font-size: 16px; font-weight: 400; }
.spec-request { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.spec-request label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.spec-request select { min-height: 44px; border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 16px; }
.spec-request .spec-go { width: auto; padding: 0 18px; background: #17803d; color: #fff; }
.spec-request .spec-go:hover, .spec-request .spec-go:focus-visible { background: #12692f; }
.spec-results .finder-cards { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.finder-cards li { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 6px; background: var(--card); overflow: hidden; cursor: pointer; }
.finder-cards li.is-on { outline: 2px solid #17803d; outline-offset: -1px; }
.finder-shot { display: grid; place-items: center; height: 170px; background: #f4f4f2; }
.finder-shot img { max-width: 88%; max-height: 150px; object-fit: contain; }
.finder-body { display: grid; align-content: start; gap: 8px; padding: 14px 16px 16px; }
.finder-body h3 { margin: 0; font-size: 18px; }
.finder-body h3 a { color: var(--ink); text-decoration: none; }
.finder-body h3 a:hover { text-decoration: underline; }
.finder-strap { margin: 0; color: var(--muted); font-size: 14px; }
.finder-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.finder-tags span { border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
.finder-code { display: grid; gap: 2px; margin: 4px 0 0; font-size: 14px; }
.finder-code strong { font-family: ui-monospace, Menlo, monospace; font-size: 14px; overflow-wrap: anywhere; }
.finder-wait { color: var(--muted); }
#request-note { margin: 0 0 16px; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .spec-hero { grid-template-columns: 1fr; padding: 32px 16px; }
  .spec-feature img { max-height: 160px; }
  .spec-feature figcaption { justify-self: center; text-align: center; }
  .spec-fields { grid-template-columns: 1fr 1fr; }
  .spec-fields label:nth-child(3) { border-left: 0; }
  .spec-fields label:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  .spec-fields-more { grid-template-columns: 1fr 1fr; }
  .spec-fields-more label:nth-child(3) { grid-column: 1 / -1; }
  .spec-results { padding: 28px 16px 48px; }
  .spec-request, .spec-request label, .spec-request .spec-go { width: 100%; }
}

/* Lighting assistant page: the specifier hero with a brief box, the four steps, one fitting. */
.ai-tool textarea {
  display: block; width: 100%; margin: 12px 0 10px; min-height: 112px; resize: vertical;
  border: 1px solid rgba(255,255,255,.18); border-radius: 4px; padding: 12px;
  background: rgba(255,255,255,.06); color: #f2f2f0; font: inherit; font-size: 17px; line-height: 1.45;
}
.ai-tool textarea::placeholder { color: rgba(242,242,240,.55); }
.ai-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; color: rgba(242,242,240,.75); }
.ai-examples button { min-height: 36px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 4px 12px; background: transparent; color: #f2f2f0; font: inherit; cursor: pointer; }
.ai-examples button:hover, .ai-examples button:focus-visible { background: rgba(255,255,255,.1); }
.ai-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-self: center; }
.ai-steps li { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid #2f4a3c; border-radius: 12px; background: rgba(28,42,34,.78); }
.ai-steps b { color: #d4b04a; font-size: 15px; }
.ai-steps strong { text-transform: uppercase; letter-spacing: .04em; font-size: 17px; color: #fff; }
.ai-steps span { color: rgba(242,242,240,.8); font-size: 15px; }
.ai-results { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px 36px; align-items: start; }
.ai-results h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: -0.02em; }
.ai-chips { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-chips li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.ai-chips li span { font-size: 13px; color: var(--muted); }
.ai-chips li strong { font-size: 16px; }
.ai-chips li.is-missing strong { color: var(--muted); font-weight: 500; }
.ai-link { color: #17803d; font-weight: 700; }
html[data-theme="dark"] .ai-link { color: #3ddc84; }
.ai-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); border: 2px solid #17803d; border-radius: 8px; background: var(--card); overflow: hidden; }
.ai-card .finder-shot { height: 100%; min-height: 220px; }
.ai-card .finder-shot img { max-height: 200px; }
.ai-card .finder-body h3 { font-size: 22px; }
.ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 0; }
.ai-actions .k-fit-add { width: auto; }
.ai-enquiry, .ai-results > .k-caption { grid-column: 1 / -1; }
.ai-enquiry { display: grid; gap: 12px; padding: 20px; }
.ai-enquiry h2 { margin: 0; }
.ai-enquiry-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ai-enquiry label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.ai-enquiry input { min-height: 44px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.ai-enquiry .spec-go { width: auto; justify-self: start; padding: 0 22px; background: #17803d; color: #fff; }
.ai-enquiry .spec-go:hover, .ai-enquiry .spec-go:focus-visible { background: #12692f; }
.ai-hide { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) {
  .ai-steps { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ai-steps li { padding: 12px; }
  .ai-steps strong { font-size: 15px; }
  .ai-steps span { font-size: 14px; }
  .ai-results { grid-template-columns: 1fr; }
  .ai-card { grid-template-columns: 1fr; }
  .ai-card .finder-shot { min-height: 170px; }
  .ai-enquiry-fields { grid-template-columns: 1fr; }
  .ai-enquiry .spec-go { width: 100%; }
}
.ai-results .ai-chips { padding: 0; margin-left: 0; }
.ai-enquiry.k-card label { grid-template-columns: 1fr; align-items: stretch; }
.ai-enquiry input { width: 100%; min-width: 0; }

/* Homepage: the specifier hero, client strip, ranges, services, case studies, quotes, blog. */
.home-page { background: var(--bg); color: var(--ink); }
.home-kicker { margin: 0 0 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #9fd7b6; }
.home-hero .spec-tool-foot a { color: #f2f2f0; }
.home-strip { display: grid; gap: 12px; padding: 22px 40px; background: #fff; border-bottom: 1px solid var(--line); }
.home-strip > p { margin: 0; text-align: center; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #526056; }
.home-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; }
.home-logos img { height: 52px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s; }
.home-logos img:hover { filter: none; opacity: 1; }
.home-block { padding: 48px 40px 8px; max-width: 1360px; margin: 0 auto; }
.home-block h2 { margin: 0 0 18px; font-size: 32px; letter-spacing: -0.02em; }
.home-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 18px; }
.home-head a, .home-page .home-block > p a { color: #17803d; font-weight: 700; }
html[data-theme="dark"] .home-head a { color: #3ddc84; }
.home-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-apps a { position: relative; display: block; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 3; background: #1b2420; color: #fff; text-decoration: none; }
.home-apps img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.home-apps a:hover img, .home-apps a:focus-visible img { transform: scale(1.04); }
.home-apps span { position: absolute; inset: auto 0 0 0; display: grid; gap: 4px; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(8,10,10,.86)); }
.home-apps strong { font-size: 18px; }
.home-apps em { font-style: normal; font-size: 14px; color: rgba(255,255,255,.86); }
.home-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.home-split p { font-size: 17px; line-height: 1.6; max-width: 620px; }
.home-split p a { color: #17803d; font-weight: 700; }
.home-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-services li { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-left: 4px solid #17803d; border-radius: 6px; background: var(--card); }
.home-services strong { font-size: 17px; }
.home-services span { color: var(--muted); font-size: 15px; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.home-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 4px; background: #17803d; color: #fff !important; font-weight: 700; text-decoration: none; }
.home-btn:hover, .home-btn:focus-visible { background: #12692f; }
.home-btn-quiet { background: transparent; color: var(--ink) !important; border: 1px solid var(--line); }
.home-btn-quiet:hover, .home-btn-quiet:focus-visible { background: var(--card); }
.home-cases, .home-posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.home-cases a, .home-posts a { display: grid; align-content: start; gap: 6px; color: var(--ink); text-decoration: none; }
.home-cases img, .home-posts img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #f4f4f2; }
.home-posts img { object-fit: cover; }
.home-cases strong, .home-posts strong { font-size: 17px; line-height: 1.3; }
.home-cases a:hover strong, .home-posts a:hover strong { text-decoration: underline; }
.home-cases span, .home-posts span { color: var(--muted); font-size: 14px; }
.home-posts small { color: #17803d; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.home-quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-quotes li { display: grid; gap: 10px; align-content: space-between; padding: 20px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.home-quotes blockquote { margin: 0; font-family: ui-serif, Georgia, serif; font-size: 20px; line-height: 1.35; }
.home-quotes blockquote::before { content: "\201C"; color: #17803d; }
.home-quotes blockquote::after { content: "\201D"; color: #17803d; }
.home-quotes cite { font-style: normal; color: var(--muted); font-size: 14px; }
.home-accred .home-logos { justify-content: flex-start; }
.home-accred .home-logos img { height: 70px; filter: none; opacity: 1; }
.home-contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; padding: 28px 40px; border-radius: 8px; background: #0e1110; color: #f2f2f0; max-width: 1280px; }
.home-contact h2 { margin: 0 0 4px; color: #fff; }
.home-contact p { margin: 0; color: rgba(242,242,240,.82); }
.home-contact .home-actions { margin: 0; }
.home-contact .home-btn-quiet { color: #f2f2f0 !important; border-color: rgba(255,255,255,.3); }
.home-contact .home-btn-quiet:hover { background: rgba(255,255,255,.08); }
.home-page .product-index { padding-bottom: 48px; }
.home-page .product-index h2 { font-size: 24px; }
@media (max-width: 1000px) {
  .home-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-cases, .home-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-quotes { grid-template-columns: 1fr 1fr; }
  .home-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .home-strip, .home-block { padding-left: 16px; padding-right: 16px; }
  .home-block { padding-top: 36px; }
  .home-block h2 { font-size: 26px; }
  .home-logos { gap: 10px 14px; }
  .home-logos img { height: 38px; }
  .home-apps { gap: 10px; }
  .home-apps strong { font-size: 16px; }
  .home-apps em { display: none; }
  .home-services, .home-quotes { grid-template-columns: 1fr; }
  .home-cases, .home-posts { gap: 14px 10px; }
  .home-contact { margin: 32px 16px 0; padding: 22px 18px; }
  .home-contact .home-actions, .home-contact .home-btn { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
  .home-services { grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-services li { padding: 12px; }
  .home-services strong { font-size: 15px; }
  .home-services span { font-size: 13px; }
  .home-quotes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .home-quotes li { scroll-snap-align: start; }
  .home-quotes blockquote { font-size: 18px; }
}

/* Case studies index: dark hero with search, chips and sort; compact photo cards. */
.cases-page { background: var(--bg); color: var(--ink); }
.cases-hero { padding: 48px 40px 32px; color: #f2f2f0; background: linear-gradient(90deg, rgba(8,10,10,.96), rgba(8,10,10,.82)), url("images/cases/scotlands-largest-airport/banner.jpg") center / cover, #0e1110; }
.cases-hero h1 { margin: 0; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: clamp(38px, 5vw, 60px); letter-spacing: -0.02em; }
.cases-lead { margin: 10px 0 22px; font-size: 18px; color: rgba(242,242,240,.86); }
.cases-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; max-width: 760px; }
.cases-tools input { flex: 1 1 300px; min-height: 48px; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 0 14px; background: rgba(255,255,255,.08); color: #f2f2f0; font: inherit; font-size: 16px; }
.cases-tools input::placeholder { color: rgba(242,242,240,.6); }
.cases-tools label { display: grid; gap: 4px; font-size: 13px; color: rgba(242,242,240,.75); }
.cases-tools select { min-height: 48px; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 0 10px; background: #1a1e1d; color: #f2f2f0; font: inherit; font-size: 16px; }
.cases-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cases-chips button { min-height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 4px 14px; background: transparent; color: #f2f2f0; font: inherit; font-size: 15px; cursor: pointer; }
.cases-chips button small { opacity: .7; margin-left: 4px; }
.cases-chips button[aria-pressed="true"] { background: #e6e1d8; border-color: #e6e1d8; color: #151515; }
.cases-body { padding: 20px 40px 56px; max-width: 1400px; margin: 0 auto; }
.cases-count { margin: 0 0 14px; color: var(--muted); }
.cases-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cases-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.cases-card:hover, .cases-card:focus-visible { box-shadow: var(--shadow); transform: translateY(-2px); }
.cases-card[hidden] { display: none; }
.cases-shot { position: relative; display: block; aspect-ratio: 4 / 3; background: #e9ece9; }
.cases-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cases-badge { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 999px; background: #17803d; color: #fff; font-size: 13px; font-weight: 700; }
.cases-text { display: grid; align-content: start; gap: 8px; padding: 14px 16px 16px; }
.cases-text strong { font-size: 18px; line-height: 1.25; }
.cases-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 14px; line-height: 1.45; }
.cases-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cases-tags i { font-style: normal; font-size: 12px; font-weight: 700; color: #146b34; background: #e7f6ee; border-radius: 999px; padding: 2px 9px; }
html[data-theme="dark"] .cases-tags i { color: #bff3d3; background: #183a28; }
.cases-empty button { border: 0; background: none; color: #17803d; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 1000px) { .cases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .cases-hero { padding: 32px 16px 22px; }
  .cases-body { padding: 16px 16px 40px; }
  .cases-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cases-text { padding: 10px 10px 12px; gap: 6px; }
  .cases-text strong { font-size: 15px; }
  .cases-summary { -webkit-line-clamp: 2; font-size: 13px; }
  .cases-tags { display: none; }
  .cases-badge { left: 6px; bottom: 6px; font-size: 11px; padding: 2px 7px; }
  .cases-chips button { min-height: 36px; font-size: 14px; padding: 3px 11px; }
  .cases-tools label, .cases-tools select { width: 100%; }
}

/* One case study: photo hero with its figure, the story beside an "at a glance" panel. */
.cs-page { background: var(--bg); color: var(--ink); }
.cs-hero { display: grid; align-content: end; gap: 6px; min-height: 440px; padding: 40px 40px 44px; color: #f2f2f0; background: #0e1110 center / cover no-repeat; }
.cs-hero .case-crumbs { align-self: start; margin-bottom: auto; color: rgba(242,242,240,.8); }
.cs-hero .case-crumbs a { color: #fff; }
.cs-hero h1 { margin: 0; max-width: 900px; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: clamp(36px, 5vw, 62px); line-height: 1.05; letter-spacing: -0.02em; }
.cs-client { margin: 4px 0 0; font-size: 19px; color: rgba(242,242,240,.86); }
.cs-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 18px 0 0; }
.cs-figure strong { font-size: clamp(40px, 6vw, 64px); line-height: 1; color: #7fe0a6; }
.cs-figure span { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,242,240,.85); }
.cs-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; max-width: 1240px; margin: 0 auto; padding: 44px 40px 24px; align-items: start; }
.cs-story { max-width: 760px; }
.cs-part { margin: 0 0 32px; }
.cs-part h2 { margin: 0 0 12px; font-size: 28px; letter-spacing: -0.02em; }
.cs-part h3 { margin: 22px 0 8px; font-size: 19px; }
.cs-part p, .cs-part li { font-size: 17px; line-height: 1.65; }
.cs-part ul { padding-left: 20px; }
.cs-part li { margin: 6px 0; }
.cs-gallery { display: grid; gap: 10px; margin: 0 0 32px; }
.cs-gallery.is-2, .cs-gallery.is-4 { grid-template-columns: 1fr 1fr; }
.cs-gallery.is-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.cs-gallery.is-3 a:first-child { grid-row: 1 / span 2; }
.cs-gallery a { display: block; overflow: hidden; border-radius: 6px; background: #e9ece9; }
.cs-gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s; }
.cs-gallery.is-1 img { aspect-ratio: 16 / 9; }
.cs-gallery a:hover img { transform: scale(1.03); }
.cs-quote { margin: 0 0 32px; padding: 26px 28px; border-radius: 8px; background: #0e1110; color: #f2f2f0; }
.cs-quote blockquote { margin: 0; }
.cs-quote blockquote p { margin: 0 0 10px; font-family: ui-serif, Georgia, serif; font-size: 22px; line-height: 1.4; }
.cs-quote figcaption { margin-top: 8px; color: #7fe0a6; font-weight: 700; }
.cs-quote a { color: #7fe0a6; }
.cs-aside { position: sticky; top: 16px; display: grid; gap: 16px; }
.cs-card { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.cs-card h2 { margin: 0 0 12px; font-size: 20px; }
.cs-card h3 { margin: 18px 0 10px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cs-card dl { display: grid; gap: 10px; margin: 0; }
.cs-card dl div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cs-card dt { color: var(--muted); font-size: 14px; }
.cs-card dd { margin: 0; font-weight: 700; }
.cs-products { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-products a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; }
.cs-products img { width: 64px; height: 48px; object-fit: contain; background: #fff; border-radius: 4px; }
.cs-products strong { display: block; font-size: 15px; }
.cs-products small { color: var(--muted); }
.cs-products a:hover strong { text-decoration: underline; }
.cs-pdf { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); color: #17803d; font-weight: 700; text-decoration: none; }
.cs-pdf img { width: 64px; height: 64px; object-fit: contain; }
.cs-pdf:hover span { text-decoration: underline; }
.cs-cta { display: grid; gap: 10px; background: #0e1110; color: #f2f2f0; border-color: #0e1110; }
.cs-cta h2 { margin: 0; color: #fff; }
.cs-cta p { margin: 0 0 4px; color: rgba(242,242,240,.82); }
.cs-cta .home-btn { justify-content: center; }
.cs-cta .home-btn-quiet { color: #f2f2f0 !important; border-color: rgba(255,255,255,.3); }
.cs-more { max-width: 1360px; margin: 0 auto; padding: 24px 40px 56px; }
.cs-more h2 { margin: 0 0 16px; font-size: 28px; }
@media (max-width: 960px) {
  .cs-body { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 28px 16px 8px; }
  .cs-aside { position: static; order: -1; margin-bottom: 20px; }

  .cs-hero { min-height: 340px; padding: 24px 16px 28px; }
  .cs-more { padding: 16px 16px 40px; }
  .cs-part p, .cs-part li { font-size: 16px; }
}
@media (max-width: 720px) {
  .cs-more .cases-grid { grid-template-columns: 1fr 1fr; }
  .cs-gallery.is-3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .cs-gallery.is-3 a:first-child { grid-row: auto; grid-column: 1 / -1; }
  .cs-quote blockquote p { font-size: 19px; }
}
.cs-story, .cs-aside { min-width: 0; }
.cs-story .case-table { overflow-x: auto; }
.cs-part p, .cs-part li { overflow-wrap: anywhere; }

/* ---------- The office shell: its own top bar, grouped, in Kellwood green; no public chrome. ---------- */
.ad-site { background: #eef2ef; }
html[data-theme="dark"] .ad-site { background: #0b0f0d; }
.ad-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; min-height: 64px; padding: 8px 20px; background: #0e1110; color: #f2f2f0; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.ad-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex: none; }
.ad-word { display: grid; line-height: 1.05; }
.ad-word strong { letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.ad-word small { color: #7fe0a6; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.ad-nav { display: flex; align-items: stretch; gap: 6px; margin: 0; border: 0; flex: 1 1 auto; overflow: visible; }
.ad-group { display: flex; align-items: flex-end; gap: 2px; padding: 0 10px; border-left: 1px solid rgba(255,255,255,.1); position: relative; }
.ad-group:first-child { border-left: 0; padding-left: 0; }
.ad-group p { position: absolute; top: -6px; left: 10px; margin: 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,242,240,.5); }
.ad-group:first-child p { left: 0; }
.ad-nav a { margin-top: 12px; padding: 7px 10px; border-radius: 6px; border: 0; color: rgba(242,242,240,.86); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ad-nav a:hover, .ad-nav a:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
.ad-nav a[aria-current] { background: #17803d; color: #fff; border: 0; }
.ad-end { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.ad-site-link { color: rgba(242,242,240,.8); font-size: 14px; }
.ad-site-link:hover { color: #fff; }
.ad-top .light-switch { border-color: rgba(255,255,255,.25); color: #f2f2f0; background: transparent; }
.ad-menu { display: none; min-height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 1180px) {
  .ad-top { flex-wrap: wrap; gap: 10px; }
  .ad-menu { display: inline-flex; align-items: center; margin-left: auto; }
  .ad-end { margin-left: 0; }
  .ad-site-link { display: none; }
  .ad-nav { display: none; order: 5; flex: 1 0 100%; flex-direction: column; gap: 14px; padding: 8px 0 12px; }
  .ad-nav.is-open { display: flex; }
  .ad-group { flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; border: 0; }
  .ad-group p { position: static; flex: 1 0 100%; }
  .ad-nav a { margin: 0; padding: 10px 12px; background: rgba(255,255,255,.06); font-size: 15px; }
}

/* The office workspace inside the shell. */
.ad-site .office-screen { max-width: 1320px; padding: 24px 28px 64px; background: transparent; color: var(--ink); }
.ad-site .office-bar { margin-bottom: 18px; padding: 18px 20px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.ad-site .office-bar h1 { font-size: 30px; }
.ad-site .office-list, .ad-site .office-record { color: var(--ink); }
.ad-site .office-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.ad-site .office-card { display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: 10px; border: 1px solid var(--line); border-top: 4px solid #17803d; background: var(--card); color: var(--ink); text-decoration: none; }
.ad-site .office-card:hover { box-shadow: var(--shadow); }
.ad-site .office-card span { font-size: 13px; color: var(--muted); font-weight: 700; }
.ad-site .office-card strong { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ad-site .office-card small { color: var(--muted); font-size: 13px; }
.ad-site .office-panel { border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.ad-site .office-todo { border-left: 4px solid #17803d; }
.ad-site .office-panels { gap: 12px; }
html[data-theme="dark"] .ad-site .office-screen { background: transparent; }
.ad-site .build-screen { min-height: calc(100vh - 64px); }
.ad-site .spec-page { max-width: 1320px; margin: 0 auto; padding: 24px 28px 64px; }
@media (max-width: 1100px) { .ad-site .office-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ad-top { padding: 8px 14px; }
  .ad-site .office-screen { padding: 14px 12px 48px; }
  .ad-site .office-bar { padding: 14px; }
  .ad-site .office-bar h1 { font-size: 24px; }
  .ad-site .office-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ad-site .office-card { padding: 12px; }
  .ad-site .office-card strong { font-size: 22px; }
  .ad-site .spec-page { padding: 14px 12px 48px; }
}
.ad-site .ad-top #photos-switch { display: none; }
@media (max-width: 1180px) {
  .ad-end { order: 2; margin-left: auto; }
  .ad-menu { order: 3; margin-left: 0; }
}

/* A customer's history: figures, then a timeline newest first. */
.cust-figures { margin-top: 4px; }
.cust-projects { margin: 6px 0 14px; }
.cust-timeline { list-style: none; margin: 8px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); display: grid; gap: 14px; }
.cust-timeline li { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.cust-timeline li::before { content: ""; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #17803d; border: 2px solid var(--card); }
.cust-timeline li.is-won::before { background: #1f9d55; box-shadow: 0 0 0 3px #c9f0d8; }
.cust-timeline li.is-lost::before { background: #b42318; }
.cust-timeline li.is-quiet::before { background: #9aa8a0; }
.cust-timeline time { color: var(--muted); font-size: 14px; }
.cust-timeline div { display: grid; gap: 2px; }
.cust-timeline a { color: var(--ink); font-weight: 700; }
.cust-timeline small { color: var(--muted); }
@media (max-width: 640px) { .cust-timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* The enquiry inbox: new enquiries waiting for a first reply, as cards above the list. */
.office-inbox { margin: 0 0 18px; }
.office-inbox h2 { margin: 0 0 10px; font-size: 20px; }
.office-inbox h2 small { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #17803d; color: #fff; font-size: 14px; vertical-align: middle; }
.inbox-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.inbox-card { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid #17803d; background: var(--card); }
.inbox-card header { display: grid; gap: 2px; }
.inbox-card header strong { font-size: 17px; }
.inbox-card header small, .inbox-who { color: var(--muted); font-size: 14px; margin: 0; }
.inbox-who a { color: inherit; }
.inbox-message { margin: 0; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.5; }
.inbox-codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.inbox-codes code { padding: 2px 8px; border-radius: 4px; background: #e7f6ee; color: #146b34; font-size: 13px; }
html[data-theme="dark"] .inbox-codes code { background: #183a28; color: #bff3d3; }
.inbox-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.inbox-actions .build-publish { text-decoration: none; }
.office-inbox-empty { margin: 0 0 14px; color: var(--muted); }
@media (max-width: 640px) { .inbox-cards { grid-template-columns: 1fr; } .inbox-actions .build-publish { flex: 1 1 auto; text-align: center; } }

/* The survey, room by room: chips between rooms, one room's card, big touch targets for site use. */
.survey-rooms { margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.survey-rooms-head h3 { margin: 0; font-size: 19px; }
.survey-rooms-head p { margin: 4px 0 10px; }
.survey-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.survey-chips button { flex: none; min-height: 40px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.survey-chips button[aria-selected="true"] { background: #17803d; border-color: #17803d; color: #fff; }
.survey-chips .survey-add { border-style: dashed; color: #17803d; }
.survey-room { margin-top: 12px; }
.survey-room input, .survey-room textarea { font-size: 16px; }
.survey-room-photos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.survey-room-photos figure { position: relative; margin: 0; }
.survey-room-photos img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; display: block; }
.survey-room-photos button { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; cursor: pointer; }
.survey-camera { cursor: pointer; }
.survey-room-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.survey-room-actions .build-publish { text-decoration: none; }
@media (max-width: 640px) {
  .survey-rooms { padding: 12px; }
  .survey-room-actions .build-publish { flex: 1 1 45%; text-align: center; }
}
@media (max-width: 640px) {
  .survey-room .edit-row.is-form { grid-template-columns: 1fr 1fr; gap: 8px; }
  .survey-room .edit-row.is-form .edit-textarea { grid-column: 1 / -1; }
  .survey-room .edit-row.is-form:first-child > :nth-child(2) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .survey-room .edit-row.is-form:first-child { grid-template-columns: 1fr; }
  .survey-room .edit-row.is-form:nth-child(3) > :first-child { grid-column: 1 / -1; }
}

/* The office: once the edit key has opened it, the key box steps aside. */
.office-open .office-key { display: none; }
.ad-site.office-open .office-bar { padding-top: 14px; padding-bottom: 14px; }

/* ---------- The quote: work on the left, the quote at a glance on the right; one line per fitting. ---------- */
.q-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.q-main { min-width: 0; }
.q-side { position: sticky; top: 80px; display: grid; gap: 12px; }
.q-card { padding: 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.q-status { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #eef2ef; color: #3d4a42; }
.q-status[data-status="sent"], .q-status[data-status="revised"] { background: #fff4d6; color: #7a5300; }
.q-status[data-status="won"] { background: #d9f5e3; color: #146b34; }
.q-status[data-status="lost"] { background: #fde2df; color: #9a1c12; }
html[data-theme="dark"] .q-status { background: #22302a; color: #dce6df; }
.q-facts { display: grid; gap: 10px; margin: 0 0 12px; }
.q-facts div { display: grid; grid-template-columns: 84px 1fr; gap: 8px; }
.q-facts dt { color: var(--muted); font-size: 13px; }
.q-facts dd { margin: 0; font-weight: 700; display: grid; gap: 2px; }
.q-facts small { font-weight: 400; color: var(--muted); }
.q-facts small.is-bad { color: #b42318; font-weight: 700; }
.q-side .office-totals { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.q-next h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.q-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.q-next li { display: grid; gap: 2px; padding-left: 10px; border-left: 3px solid #17803d; font-weight: 600; }
.q-next li.is-overdue { border-left-color: #b42318; }
.q-next small { color: var(--muted); font-weight: 400; }
.q-bar { display: none; }
@media (min-width: 1001px) { .q-main .office-part > div > .office-totals, .q-main .office-part > .office-totals { display: none; } }

/* One line per fitting: a summary row; open it to edit. */
.edit-table .q-line { position: relative; }
.q-line-head { grid-column: 1 / -1; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto 20px; gap: 12px; align-items: center; width: 100%; padding: 4px 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.q-line-no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e7f6ee; color: #146b34; font-weight: 800; font-size: 13px; }
html[data-theme="dark"] .q-line-no { background: #183a28; color: #bff3d3; }
.q-line-what { display: grid; min-width: 0; }
.q-line-what strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-line-what small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.q-line-sum { color: var(--muted); font-size: 14px; white-space: nowrap; }
.q-line-total { font-weight: 800; white-space: nowrap; min-width: 90px; text-align: right; }
.q-line-toggle::before { content: "▸"; color: var(--muted); }
.q-line.is-open .q-line-toggle::before { content: "▾"; }
.q-line:not(.is-open) > :not(.q-line-head) { display: none; }
.q-line.is-open .q-line-head { margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }

@media (max-width: 1000px) {
  .q-layout { grid-template-columns: minmax(0, 1fr); }
  .q-side { position: static; order: -1; }
  .q-side .office-totals, .q-next { display: none; }
  .q-card { padding: 12px; }
  .q-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
  .q-facts div { grid-template-columns: 1fr; gap: 2px; }
  .q-bar { position: sticky; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px -12px -48px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #0e1110; color: #f2f2f0; }
  .q-bar span { display: grid; }
  .q-bar small { color: rgba(242,242,240,.7); font-size: 12px; }
  .q-bar strong { font-size: 20px; }
}
@media (max-width: 640px) {
  .q-facts { grid-template-columns: 1fr 1fr; }
  .q-line-head { grid-template-columns: 28px minmax(0, 1fr) auto 16px; gap: 8px; }
  .q-line-sum { grid-column: 2; grid-row: 2; font-size: 13px; }
  .q-line-total { min-width: 0; }
}
.q-side .office-totals .is-internal dt { font-size: 13px; }
.q-side .office-totals .is-internal dd { font-size: 15px; }
@media (max-width: 1000px) { .office-record:has(.q-bar) #office-save { display: none; } }
@media (max-width: 640px) {
  .edit-table .q-line.is-open { grid-template-columns: 1fr 1fr; gap: 8px; }
  .edit-table .q-line.is-open > * { grid-column: 1 / -1; }
  .edit-table .q-line.is-open > label:nth-child(n+5):nth-child(-n+11) { grid-column: auto; }
}
@media (max-width: 640px) {
  /* Controls and services: number fields pair two across inside an open line. */
  .edit-table .q-line.is-open > label:has(input[type="number"]) { grid-column: auto; }
}

/* ---------- The proposal as a document: a cover, sheets, numbered sections; A4 when printed. ---------- */
.doc-site { background: #e6eae7; }
.pp.proposal { max-width: 900px; padding: 0 0 60px; background: transparent; color: #1c1c1c; }
.pp-tools { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 0; background: #e6eae7; }
.pp-tools a { color: #146b34; font-weight: 700; }
.pp-cover { display: grid; grid-template-rows: auto 1fr auto; gap: 28px; min-height: 760px; padding: 44px 48px; border-radius: 4px; background: #0e1110 center / cover no-repeat; color: #f2f2f0; box-shadow: 0 12px 30px rgba(18,28,22,.18); }
.pp-brand { display: flex; align-items: center; gap: 10px; margin: 0; letter-spacing: .16em; font-size: 15px; color: #fff; }
.pp-brand strong { font-weight: 800; }
.pp-cover-title { align-self: end; }
.pp-kicker { margin: 0 0 10px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #7fe0a6; }
.pp-cover h1 { margin: 0; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: clamp(40px, 6vw, 68px); line-height: 1.04; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pp-for { margin: 12px 0 0; font-size: 22px; color: rgba(242,242,240,.9); }
.pp-cover-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.25); }
.pp-cover-facts dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,242,240,.65); }
.pp-cover-facts dd { margin: 4px 0 0; font-weight: 600; }
.pp-sheet { margin-top: 18px; padding: 40px 48px; border-radius: 4px; background: #fff; box-shadow: 0 12px 30px rgba(18,28,22,.12); }
.pp-h { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid #17803d; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: 30px; letter-spacing: -0.01em; color: #111; background: none; }
.pp-h b { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 15px; font-weight: 800; color: #17803d; letter-spacing: .06em; }
.pp-section h3 { margin: 20px 0 6px; font-size: 18px; }
.pp-section p, .pp-section li { line-height: 1.6; }
.pp-note { color: #5a665e; }
.pp-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pp-figures div { display: grid; gap: 4px; padding: 18px; border-radius: 6px; background: #f2f6f3; border-top: 4px solid #17803d; }
.pp-figures span { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #5a665e; font-weight: 700; }
.pp-figures strong { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.pp-figures small { color: #5a665e; }
.pp-scope { margin: 14px 0 0; color: #5a665e; }
.pp-contents-h { margin: 28px 0 8px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #5a665e; }
.pp-contents { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.pp-contents li { break-inside: avoid; border-bottom: 1px solid #e3e8e4; }
.pp-contents a { display: flex; gap: 14px; padding: 9px 0; color: #1c1c1c; text-decoration: none; font-weight: 600; }
.pp-contents b { color: #17803d; min-width: 24px; }
.pp-contents a:hover { color: #17803d; }
.pp .spec-table th { background: #f2f6f3; }
.pp .proposal-schedule thead th { background: #17803d; color: #fff; }
.pp-totals { margin-top: 16px; }
.pp .proposal-fitting { grid-template-columns: 200px 1fr; padding: 20px 0; }
.pp .proposal-fitting img { background: #f7f8f7; border-radius: 6px; padding: 10px; }
.pp .proposal-cases img { border-radius: 6px; }
.pp-contact { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid #e3e8e4; font-size: 14px; color: #5a665e; }
@media (max-width: 640px) {
  .pp.proposal { padding: 0 0 40px; }
  .pp-tools { padding: 10px 12px; }
  .pp-cover { min-height: 560px; padding: 28px 20px; border-radius: 0; }
  .pp-cover-facts { grid-template-columns: 1fr 1fr; }
  .pp-sheet { margin-top: 10px; padding: 24px 16px; border-radius: 0; }
  .pp-h { font-size: 24px; }
  .pp-contents { columns: 1; }
  .pp-figures strong { font-size: 24px; }
}
@page { size: A4; margin: 14mm 14mm 16mm; }
@media print {
  .doc-site { background: #fff; }
  .pp-tools { display: none !important; }
  .pp.proposal { max-width: none; padding: 0; }
  .pp-cover { min-height: 262mm; border-radius: 0; box-shadow: none; break-after: page; padding: 18mm 14mm; margin: 0; }
  .pp-sheet { margin: 0; padding: 0 0 8mm; box-shadow: none; border-radius: 0; }
  .pp-glance { break-after: page; }
  .pp-section.is-schedule, .pp-section.is-fittings, .pp-section.is-accept { break-before: page; }
  .pp-cover, .pp-figures div, .pp .spec-table th, .pp .proposal-schedule thead th, .pp .spec-table tbody tr, .pp-brand .k-mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pp-h, .pp-section h3 { break-after: avoid; }
  .pp tr, .pp .proposal-fitting, .pp .proposal-cases article, .pp-figures div { break-inside: avoid; }
  .pp a { color: inherit; text-decoration: none; }
}
@media (max-width: 640px) {
  .pp .proposal-fitting { grid-template-columns: minmax(0, 1fr); }
  .pp .proposal-fitting > div { min-width: 0; }
  .pp .spec-table { width: 100%; table-layout: fixed; }
  .pp .spec-table td, .pp .spec-table th { overflow-wrap: anywhere; }
}

/* Projects: the pipeline strip over the list, and the stage stepper in the side panel. */
.p-pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.p-pipeline button { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-top: 4px solid #9aa8a0; border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.p-pipeline .is-design { border-top-color: #4f8fc0; }
.p-pipeline .is-quoting { border-top-color: #d4a017; }
.p-pipeline .is-won, .p-pipeline .is-complete { border-top-color: #17803d; }
.p-pipeline .is-lost { border-top-color: #b42318; }
.p-pipeline button[aria-pressed="true"] { outline: 2px solid #17803d; outline-offset: -1px; }
.p-pipeline span { font-size: 13px; font-weight: 700; color: var(--muted); }
.p-pipeline strong { font-size: 24px; line-height: 1.1; }
.p-pipeline small { color: var(--muted); }
.p-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.p-steps button { min-height: 34px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.p-steps button.is-done { background: #e7f6ee; border-color: #bfe5cc; color: #146b34; }
.p-steps button.is-on { background: #17803d; border-color: #17803d; color: #fff; }
.p-steps button.is-lost-step.is-on { background: #b42318; border-color: #b42318; }
html[data-theme="dark"] .p-steps button.is-done { background: #183a28; border-color: #23533a; color: #bff3d3; }
@media (max-width: 1000px) {
  .p-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #p-side .q-next { display: block; }
}
@media (max-width: 640px) {
  .p-pipeline { gap: 6px; }
  .p-pipeline button { padding: 8px; }
  .p-pipeline strong { font-size: 20px; }
}
/* Long money figures shrink to stay on one line in the dashboard cards. */
.ad-site .office-card strong { white-space: nowrap; overflow-wrap: normal; font-size: clamp(18px, 1.75vw, 28px); }
@media (max-width: 640px) { .ad-site .office-card strong { font-size: clamp(16px, 5vw, 22px); } }

/* Customers: type strip, main contact in the side panel. */
.c-types { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.c-types button { border-top-color: #17803d; }
.c-contact { display: grid; gap: 2px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.c-contact small { color: var(--muted); }
.c-contact p { display: flex; gap: 8px; margin: 8px 0 0; }
.c-contact .build-publish { text-decoration: none; }
.c-contact-head .q-line-sum { font-size: 14px; }
@media (max-width: 1000px) { .c-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } #c-side .q-next { display: block; } }
@media (max-width: 640px) {
  /* Customers and projects lead with their name, not their type or stage. */
  .office-table.is-customers td:nth-child(2), .office-table.is-projects td:nth-child(2) { grid-column: auto; grid-row: auto; font-weight: 650; font-size: 14px; color: var(--muted); }
  .office-table.is-customers td:nth-child(1), .office-table.is-projects td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; font-weight: 750; font-size: 16px; }
}

/* An enquiry's side panel: how it came in, the brief, and links to its customer, project and quotes. */
.e-came { margin: 0 0 12px; font-weight: 600; }
.e-came small { font-weight: 400; color: var(--muted); }
.e-came small.is-bad { color: #b42318; font-weight: 700; }
.e-brief h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.e-brief p { margin: 0 0 10px; white-space: pre-line; font-size: 14px; line-height: 1.5; max-height: 12em; overflow: auto; }
#e-side .inbox-codes { margin: 0 0 12px; }
#e-side .q-facts dd a { color: var(--ink); }
#e-side .q-facts dd small { display: inline; }
@media (max-width: 1000px) { #e-side .q-next { display: block; } }

/* To do: counters by when, filters by whose and what, then one row per task. */
.todo-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.todo-counts button { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-top: 4px solid #17803d; border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.todo-counts button.is-late { border-top-color: #b42318; }
.todo-counts button.is-late strong { color: #b42318; }
.todo-counts button[aria-pressed="true"] { outline: 2px solid #17803d; outline-offset: -1px; }
.todo-counts span { font-size: 13px; font-weight: 700; color: var(--muted); }
.todo-counts strong { font-size: 30px; line-height: 1.1; }
.todo-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-bottom: 8px; }
.todo-group { margin: 18px 0 0; }
.todo-group h2 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.todo-group h2 small { color: var(--muted); font-weight: 600; }
.todo-group.is-overdue h2 { color: #b42318; }
.todo-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.todo-list li + li { border-top: 1px solid var(--line); }
.todo-list a { display: grid; grid-template-columns: 110px 78px minmax(0, 1fr) 36px; gap: 12px; align-items: center; padding: 11px 14px; color: var(--ink); text-decoration: none; }
.todo-list a:hover, .todo-list a:focus-visible { background: rgba(23, 128, 61, .06); }
.todo-due { justify-self: start; padding: 3px 9px; border-radius: 999px; background: #eef2ef; font-size: 13px; font-weight: 700; white-space: nowrap; color: #3d4a42; }
.todo-due.is-late { background: #fde2df; color: #9a1c12; }
.todo-due.is-today { background: #fff4d6; color: #7a5300; }
html[data-theme="dark"] .todo-due { background: #22302a; color: #dce6df; }
.todo-kind { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.todo-kind.is-quotes { color: #146b34; }
.todo-kind.is-projects { color: #4f8fc0; }
.todo-what { display: grid; min-width: 0; }
.todo-what strong { font-size: 15px; }
.todo-what small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-who { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e7f6ee; color: #146b34; font-size: 12px; font-weight: 800; }
@media (max-width: 640px) {
  .todo-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .todo-counts button { padding: 8px; }
  .todo-counts span { font-size: 11px; }
  .todo-counts strong { font-size: 22px; }
  .todo-list a { grid-template-columns: minmax(0, 1fr) 32px; gap: 4px 10px; padding: 10px 12px; }
  .todo-due { grid-column: 1; grid-row: 1; }
  .todo-kind { display: none; }
  .todo-what { grid-column: 1; grid-row: 2; }
  .todo-what small { white-space: normal; }
  .todo-who { grid-column: 2; grid-row: 1 / span 2; }
}

/* Samples: counters by where they are, one row per sample with its next step. */
.s-counts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.s-list li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 210px 150px; gap: 12px; align-items: center; padding: 12px 14px; }
.s-open { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.s-open:hover strong { text-decoration: underline; }
.s-open small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-where { font-size: 14px; font-weight: 600; }
.s-act { justify-self: end; }
.todo-due.is-done { background: #d9f5e3; color: #146b34; }
@media (max-width: 1000px) { .s-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .s-counts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .s-counts button { padding: 6px; }
  .s-counts span { font-size: 10px; }
  .s-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .s-act { justify-self: stretch; }
  .s-act .build-publish { width: 100%; }
}

/* Prices: the catalogue on the left with what is priced, the chosen series' prices on the right. */
.pr-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.pr-list { position: sticky; top: 80px; display: grid; gap: 10px; max-height: calc(100vh - 100px); padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.pr-progress { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 8px; }
.pr-progress strong { font-size: 22px; }
.pr-progress span { color: var(--muted); }
.pr-progress i { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #17803d var(--w), #e3e8e4 var(--w)); }
.pr-list input[type="search"] { min-height: 40px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; font: inherit; font-size: 16px; background: var(--bg); color: var(--ink); }
.pr-list .office-chips { margin: 0; }
.pr-list ul { list-style: none; margin: 0; padding: 0; overflow: auto; border-top: 1px solid var(--line); }
.pr-list li button { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.pr-list li button:hover { background: rgba(23, 128, 61, .06); }
.pr-list li button[aria-current="true"] { background: #e7f6ee; font-weight: 700; }
html[data-theme="dark"] .pr-list li button[aria-current="true"] { background: #183a28; }
.pr-list small { flex: none; color: var(--muted); }
.pr-list small.is-priced { color: #146b34; font-weight: 700; }
.pr-edit { padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); min-width: 0; }
.pr-head { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.pr-head img { width: 110px; height: 80px; object-fit: contain; background: #fff; border-radius: 6px; }
.pr-head h2 { margin: 0; font-size: 24px; }
.pr-head p { margin: 2px 0; color: var(--muted); }
.pr-head small { color: var(--muted); }
.pr-head a { color: #17803d; }
.pr-try { margin-top: 18px; padding: 14px; border-radius: 8px; background: #f2f6f3; }
html[data-theme="dark"] .pr-try { background: #18201c; }
.pr-try h3 { margin: 0 0 6px; font-size: 16px; }
.pr-try input { font-family: ui-monospace, Menlo, monospace; }
#price-try-out { margin: 8px 0 0; display: grid; gap: 2px; }
#price-try-out strong { font-size: 22px; }
#price-try-out small { color: var(--muted); }
#price-try-out .is-bad { color: #b42318; font-weight: 600; }
.pr-save { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px -20px -18px; padding: 12px 20px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; background: var(--card); }
.pr-save span { color: var(--muted); font-weight: 600; }
.pr-save span[data-dirty] { color: #7a5300; }
@media (max-width: 1000px) {
  .pr-layout { grid-template-columns: minmax(0, 1fr); }
  .pr-list { position: static; max-height: 46vh; }
}
@media (max-width: 640px) {
  .pr-edit { padding: 14px; }
  .pr-save { margin: 14px -14px -14px; padding: 10px 14px; }
  .pr-head img { width: 80px; height: 60px; }
}
.pr-edit .office-price { display: grid; grid-template-rows: 1fr auto; align-items: end; }

/* Settings: what is switched on at a glance, then one card per area. */
.set-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.set-status a { display: grid; gap: 2px; padding: 16px; border: 1px solid var(--line); border-top: 4px solid #17803d; border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none; }
.set-status a.is-off { border-top-color: #d4a017; }
.set-status span { font-size: 13px; font-weight: 700; color: var(--muted); }
.set-status strong { font-size: 24px; }
.set-status small { color: var(--muted); overflow-wrap: anywhere; }
.ad-site .set-card { max-width: none; margin: 0 0 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.set-card header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.set-card h2 { margin: 0; font-size: 20px; }
.set-chip { padding: 3px 12px; border-radius: 999px; background: #fff4d6; color: #7a5300; font-size: 13px; font-weight: 800; }
.set-chip.is-on { background: #d9f5e3; color: #146b34; }
.set-card form.edit-row { padding: 0; border: 0; background: none; }
#team-list .edit-row { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
@media (max-width: 800px) { .set-status { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ad-site .set-card { padding: 14px; }
  #team-list .edit-row { grid-template-columns: 1fr 1fr; }
  #team-list .edit-row label:nth-child(3) { grid-column: 1 / -1; }
}
.set-status a.is-off, .set-status a.is-on { opacity: 1; filter: none; }
.set-status a.is-off strong { color: #7a5300; }
.set-card form .k-caption { grid-column: 1 / -1; }
.set-card form.edit-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
#team-list [data-remove-member] { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
@media (max-width: 640px) {
  .set-status { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .set-status a { padding: 10px; }
  .set-status span { font-size: 11px; }
  .set-status strong { font-size: 16px; }
  .set-status small { display: none; }
}

/* ---------- Top navigation, tidied: one size for every item, panels that never leave the screen, a phone menu. ---------- */
body .k-top { min-height: 56px; gap: 16px; padding: 0 24px; }
body .k-mark { width: 30px; height: 30px; font-size: 14px; }
body .k-word strong { font-size: 13px; }
body .k-word small { font-size: 9px; }
body .k-search input { width: min(380px, 100%); height: 34px; font-size: 14px; }
body .k-phone { font-size: 13px; font-weight: 600; }
.k-office { color: #146b34; font-size: 13px; font-weight: 700; text-decoration: none; }
.k-office:hover { text-decoration: underline; }
.k-burger { display: none; }
body.k-site > .k-nav { position: relative; min-height: 48px; gap: 4px 22px; padding: 0 24px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #1c1c1c; }
body .k-nav > a, body .k-drop > button { padding: 14px 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 20px; }
body .k-nav > a:hover, body .k-drop > button:hover, body .k-drop.is-open > button { color: #17803d; }
body .k-drop { position: static; }
body .k-nav-end { margin-left: auto; display: flex; gap: 8px; }
body .k-nav .k-find { padding: 6px 12px; border: 1px solid #d7ded8; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: none; white-space: nowrap; }
body .k-nav .k-find:first-child { background: #17803d; border-color: #17803d; color: #fff; }
body .k-nav .k-find:hover { border-color: #17803d; color: #17803d; background: #f2f6f3; }
body .k-nav .k-find:first-child:hover { background: #146b34; color: #fff; }
/* Every dropdown is a panel the width of the page under the bar. */
body .k-nav > .k-drop > .k-menu { left: 24px; right: 24px; width: auto; max-width: 1280px; margin: 0 auto; top: 100%; border-radius: 0 0 12px 12px; box-shadow: 0 18px 40px rgba(0,0,0,.14); }
body .k-nav .k-mega { max-height: calc(100vh - 140px); }
body .k-wireless-body { grid-template-columns: 200px minmax(0, 1fr); }
body .k-wireless-areas { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
body .k-wireless-areas .k-shot { height: 84px; flex-basis: 84px; }
body .k-wireless-bar { flex-wrap: wrap; }
body .k-menu a.k-dash { margin: 6px 0 6px auto; }
body .k-services-row { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
body .k-resource-topics { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
body .k-resource-topics a, body .k-services-row a, body .k-wireless-areas a, body .k-sector-tabs button { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
body .k-resource-questions { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
body .k-sector-tabs { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
body .k-sector-tabs button { flex-direction: row; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid #d7ded8; border-radius: 999px; }
body .k-sector-tabs button.is-on { border-color: #17803d; background: #e7f6ee; }
body .k-sector-tabs .k-ico { width: 34px; height: 34px; background-color: #17803d; border-radius: 50%; background-size: 60%; background-repeat: no-repeat; background-position: center; }
body .k-sector-places { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
html[data-theme="dark"] body .k-nav .k-find { border-color: rgba(255,255,255,.2); }
html[data-theme="dark"] .k-office { color: #3ddc84; }

@media (max-width: 1240px) {
  body .k-top { flex-wrap: wrap; gap: 8px 12px; padding: 8px 16px; }
  body .k-search { order: 5; flex: 1 0 100%; }
  body .k-search input { width: 100%; }
  body .k-phone { margin-left: auto; }
  body .k-top #photos-switch { display: none; }
  .k-burger { display: inline-flex; align-items: center; order: 4; min-height: 38px; padding: 0 14px; border: 1px solid #d7ded8; border-radius: 8px; background: #fff; color: #1c1c1c; font: inherit; font-weight: 700; cursor: pointer; }
  .k-burger[aria-expanded="true"] { background: #17803d; border-color: #17803d; color: #fff; }
  body .k-top .light-switch { margin-left: 0; order: 3; }
  body.k-site > .k-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px 16px; max-height: calc(100vh - 110px); overflow: auto; }
  body.k-site > .k-nav.is-open { display: flex; }
  body .k-nav > a, body .k-drop > button { display: flex; justify-content: space-between; width: 100%; padding: 14px 0; border-bottom: 1px solid #ececec; font-size: 15px; text-align: left; }
  body .k-nav-end { margin: 12px 0 0; flex-wrap: wrap; }
  body .k-nav .k-find { padding: 10px 14px; font-size: 14px; }
  /* A dropdown opens in place as a plain list. */
  body .k-nav > .k-drop > .k-menu { position: static; left: auto; right: auto; max-width: none; margin: 0 0 8px; border: 0; border-radius: 8px; box-shadow: none; background: #f6f8f6; max-height: none; }
  body .k-mega-grid { grid-template-columns: 1fr; gap: 14px; }
  body .k-types { grid-template-columns: 1fr 1fr; }
  body .k-wireless-body { grid-template-columns: 1fr; padding: 12px; }
  body .k-wireless-overview .k-shot, body .k-wireless-areas .k-shot { display: none; }
  body .k-wireless-overview, body .k-wireless-areas a { flex-direction: row; justify-content: flex-start; padding: 8px 0; font-size: 13px; }
  body .k-wireless-areas { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  body .k-wireless-bar a { padding: 10px 4px; }
  body .k-menu a.k-dash { margin: 6px 0; }
  body .k-services-row, body .k-resource-topics { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  body .k-services-row a, body .k-resource-topics a { flex-direction: row; justify-content: flex-start; text-align: left; font-size: 13px; }
  body .k-services-row .k-ico, body .k-resource-topics .k-ico { width: 36px; height: 36px; flex: none; }
  body .k-sector-tabs { padding: 10px; gap: 6px; }
  body .k-sector-tabs button { padding: 6px 10px 6px 6px; font-size: 12px; }
  body .k-sector-tabs .k-ico { width: 26px; height: 26px; }
  body .k-sector-places, body .k-resource-questions { grid-template-columns: 1fr; }
}
@media (max-width: 1240px) {
  /* In the phone menu a dropdown opens and closes only when tapped, so the list never jumps under a finger. */
  body .k-nav > .k-drop:focus-within:not(.is-open) > .k-menu { display: none; }
}
body.k-site > .k-nav { gap: 4px 18px; }
body .k-nav-end { gap: 6px; }
@media (max-width: 1240px) {
  body .k-top .light-switch { order: 2; margin-left: auto; }
  .k-burger { order: 3; }
  body .k-phone { order: 1; margin-left: 12px; }
  .k-office { order: 1; }
  body .k-wireless-overview, body .k-wireless-areas a, body .k-services-row a, body .k-resource-topics a { text-align: left; }
}
@media (max-width: 640px) {
  body .k-phone, .k-office { display: none; }
}

/* ---------- Footer: a call to action, four aligned columns, a bottom bar. ---------- */
body .k-foot { padding: 0 24px 22px; }
.k-foot-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; max-width: 1180px; margin: 0 auto; padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.k-foot-kicker { margin: 0; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-size: 30px; color: #fff; }
.k-foot-cta-line { margin: 4px 0 0; color: rgba(231,238,233,.78); }
.k-foot-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
body .k-foot a.k-foot-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; color: #fff; font-weight: 700; }
body .k-foot a.k-foot-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
body .k-foot a.k-foot-btn.is-solid { background: #17803d; border-color: #17803d; }
body .k-foot a.k-foot-btn.is-solid:hover { background: #1f9d55; }
body .k-foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px 40px; padding: 34px 0 6px; align-items: start; }
.k-foot-brand p { color: rgba(231,238,233,.78); max-width: 320px; line-height: 1.55; }
.k-foot-accred { display: flex; gap: 8px; margin-top: 14px !important; }
.k-foot-accred img { height: 44px; width: auto; padding: 4px; border-radius: 6px; background: #fff; }
body .k-foot-title { margin: 0 0 12px; font-size: 13px; letter-spacing: .12em; color: #8fd9a8; }
body .k-foot li { margin: 0 0 10px; }
.k-foot-contact p { margin: 0 0 12px; line-height: 1.55; }
body .k-foot .k-social { display: flex; gap: 8px; flex-wrap: wrap; }
body .k-foot .k-social a { padding: 6px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: 14px; }
.k-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; max-width: 1180px; margin: 26px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; color: rgba(231,238,233,.7); }
.k-foot-bottom p { margin: 0; }
body .k-foot-bottom .k-foot-legal { margin: 0; padding: 0; border: 0; }
@media (max-width: 1000px) { body .k-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  body .k-foot { padding: 0 16px 80px; }
  .k-foot-cta { padding: 26px 0; }
  .k-foot-kicker { font-size: 26px; }
  .k-foot-cta-actions, body .k-foot a.k-foot-btn { width: 100%; justify-content: center; }
  body .k-foot-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding-top: 26px; }
  .k-foot-brand, .k-foot-contact { grid-column: 1 / -1; }
  .k-foot-bottom { flex-direction: column; align-items: flex-start; }
}
body .k-foot-grid > nav { display: block; }
body .k-foot-grid > nav ul { display: block; }

/* ---------- Edit series: sections fold to buttons; banks list one line per item. ---------- */
.edit-fold { margin: 0 0 8px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.edit-fold > h2 { margin: 0; padding: 0; border: 0; }
.edit-fold-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 750; text-align: left; letter-spacing: 0; text-transform: none; cursor: pointer; }
.edit-fold-head small { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.edit-fold-head::after { content: "▸"; color: var(--muted); margin-left: 6px; }
.edit-fold.is-open .edit-fold-head::after { content: "▾"; }
.edit-fold-head:hover { background: rgba(23, 128, 61, .06); }
.edit-fold:not(.is-open) > :not(h2) { display: none; }
.edit-fold.is-open > :not(h2) { padding-left: 16px; padding-right: 16px; }
.edit-fold.is-open > :last-child { padding-bottom: 16px; }
.edit-fold.is-open > h2 { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.bank-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 8px; }
.bank-tools input[type="search"] { flex: 1 1 200px; min-height: 36px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; font: inherit; font-size: 15px; background: var(--bg); color: var(--ink); }
.bank-count { color: var(--muted); }
.bank-count strong { color: #146b34; }
.bank-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.bank-list li { display: grid; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.bank-list li:last-child { border-bottom: 0; }
.bank-list li.is-on { background: #f2f9f4; }
html[data-theme="dark"] .bank-list li.is-on { background: #16271e; }
.bank-line { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer; }
.bank-line input { width: 18px; height: 18px; accent-color: #17803d; }
.bank-line img, .bank-nopic { width: 40px; height: 30px; object-fit: contain; border-radius: 4px; background: #fff; }
.bank-nopic { background: #eef2ef; }
.bank-text { display: grid; min-width: 0; }
.bank-text strong { font-size: 14px; }
.bank-text small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-list li .edit-field { margin-left: 72px; max-width: 280px; }
.bank-empty { color: var(--muted); }
.bank-add { margin: 4px 0 10px; }
.bank-add > summary { display: inline-block; padding: 7px 12px; border: 1px dashed #17803d; border-radius: 6px; color: #146b34; font-weight: 700; cursor: pointer; list-style: none; }
.bank-add > summary::-webkit-details-marker { display: none; }
.bank-add[open] > summary { margin-bottom: 8px; }
.feature-add { width: auto; padding: 6px 14px; font-weight: 700; }
@media (max-width: 640px) {
  .edit-fold-head { padding: 12px; font-size: 15px; }
  .edit-fold.is-open > :not(h2) { padding-left: 12px; padding-right: 12px; }
  .bank-list li .edit-field { margin-left: 0; }
}
.edit-fold-head span { flex: none; }
.edit-fold-head small { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }

/* ---------- Series page: a clearer hero, a sticky section bar, serif headings, compact downloads, optics and features. ---------- */
body .k-hero.k-hero-fit { min-height: 560px; padding: 56px 40px 44px; align-items: center; }
.k-hero-kicker { margin: 0 0 10px !important; font-size: 13px !important; letter-spacing: .14em; text-transform: uppercase; color: #9fd7b6; }
body .k-hero-fit h1 { font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -0.02em; max-width: 720px; }
body .k-hero-fit .k-hero-copy > p { font-size: 18px; max-width: 560px; }
.k-hero-figures { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.k-hero-figures li { padding: 5px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(0,0,0,.25); font-size: 14px; font-weight: 600; }
.k-hero-readout { margin-top: 18px; max-width: 560px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(8,10,10,.55); backdrop-filter: blur(4px); }
.k-hero-readout > * { margin-top: 0 !important; }
.k-hero-readout p, .k-hero-readout div { font-size: 15px; line-height: 1.5; }
.k-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0 !important; }
.k-hero-actions .k-build-open { margin: 0; min-height: 46px; padding: 0 20px; font-size: 16px; }
.k-hero-quote { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; color: #fff !important; font-weight: 750; text-decoration: none !important; }
.k-hero-quote:hover { background: rgba(255,255,255,.1); }
/* The section bar stays under the menu while reading. */
body nav.jump { position: sticky; top: 0; z-index: 4; display: flex; gap: 4px 22px; margin: 0; padding: 0 40px; overflow-x: auto; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body nav.jump a { flex: none; padding: 14px 0; border-bottom: 3px solid transparent; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
body nav.jump a:hover { color: #17803d; border-bottom-color: #17803d; }
.cat-block[id], #about { scroll-margin-top: 64px; }
/* Section headings: serif, no boxed label. */
body main .cat-block > .cat-label, body main .cat-block > div > .cat-label { display: block; margin: 0 0 6px; padding: 0; border: 0; background: none; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: 30px; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
body main .cat-block > .cat-label::first-letter { text-transform: uppercase; }
body main .cat-block > .cat-rule, body main .cat-block > div > .cat-rule { width: 60px; height: 3px; margin: 0 0 18px; border: 0; background: #17803d; }
/* Downloads: one compact row each. */
body .k-downloads { display: grid; gap: 8px; }
body .k-downloads a { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; min-height: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
body .k-downloads a > span:first-child { order: 2; }
body .k-downloads .k-tile.is-icon { order: 1; width: 44px; height: 44px; padding: 4px; }
body .k-downloads a:hover { border-color: #17803d; }
/* Optic cards: tighter. */
body .optic-board { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
body .optic-board > * { padding: 12px; }
/* Design features: text beside an image of capped height, alternating sides. */
body .feature-band { min-height: 0; margin-bottom: 12px; border-radius: 10px; overflow: hidden; }
body .feature-band > div { padding: 32px; }
body .feature-band img { max-height: 340px; width: 100%; object-fit: cover; }
body #feature-list .feature-band:nth-child(even) { direction: rtl; }
body #feature-list .feature-band:nth-child(even) > * { direction: ltr; }
body .feature-band h3 { font-size: 26px; }
@media (max-width: 900px) {
  body .k-hero.k-hero-fit { min-height: 0; padding: 32px 16px; }
  body nav.jump { padding: 0 16px; gap: 4px 18px; }
  body main .cat-block > .cat-label, body main .cat-block > div > .cat-label { font-size: 26px; }
  body .feature-band > div { padding: 20px; }
  body .feature-band img { max-height: 220px; }
  body #feature-list .feature-band:nth-child(even) { direction: ltr; }
}
body .k-downloads .k-tile.is-icon { height: 44px !important; min-height: 0 !important; aspect-ratio: auto !important; display: grid; place-items: center; }
body .k-downloads .k-tile.is-icon img { max-height: 36px; width: auto; }
body main .cat-block > .cat-label, body main .cat-block > div > .cat-label { text-transform: lowercase; }
body main .cat-block > .cat-label::first-letter, body main .cat-block > div > .cat-label::first-letter { text-transform: uppercase; }
body .feature-band img { object-fit: contain; background: #1b2420; }
body .k-downloads .k-tile.is-icon img { width: 36px !important; height: 36px !important; max-height: none; object-fit: contain !important; transform: none !important; }
@media (max-width: 640px) { body .k-marks li, body .k-marks img { max-width: 46px; max-height: 46px; } }

/* ---------- Specification page: a header, contents beside the sections, real tables, print-ready. ---------- */
main#spec { max-width: none; margin: 0; padding: 0; background: var(--bg); }
.sp-head { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: center; padding: 40px; background: #0e1110; color: #f2f2f0; }
.sp-head h1 { margin: 0; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; }
.sp-strap { margin: 8px 0 0; font-size: 18px; color: rgba(242,242,240,.86); }
.sp-source { margin: 12px 0 0; font-size: 14px; color: rgba(242,242,240,.7); }
.sp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.sp-actions .home-btn-quiet { color: #f2f2f0 !important; border-color: rgba(255,255,255,.3); background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.sp-head img { width: 100%; max-height: 220px; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0,0,0,.5)); }
.sp-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; max-width: 1320px; margin: 0 auto; padding: 32px 40px 56px; align-items: start; }
.sp-contents { position: sticky; top: 16px; display: grid; gap: 8px; }
.sp-contents p { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.sp-contents ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.sp-contents li a { display: block; padding: 6px 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.sp-contents li a:hover { color: #17803d; }
.sp-questions { margin-top: 8px; color: #17803d; font-size: 14px; }
.sp-section { margin: 0 0 36px; scroll-margin-top: 16px; }
.sp-section h2 { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid #17803d; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-weight: 400; font-size: 28px; }
.sp-format { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 16px; }
.sp-seg { padding: 6px 10px; border-radius: 6px; background: #eef2ef; font-family: ui-monospace, Menlo, monospace; font-size: 15px; }
.sp-seg.is-col { background: #17803d; color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; }
.sp-seg.is-mod { background: transparent; color: var(--muted); font-family: inherit; font-size: 14px; }
html[data-theme="dark"] .sp-seg { background: #22302a; }
.sp-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sp-col { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.sp-col.is-wide { grid-column: 1 / -1; }
.sp-col h3 { margin: 0 0 8px; font-size: 15px; }
.sp-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sp-col.is-wide ul { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; }
.sp-col li { display: grid; grid-template-columns: 56px 1fr; gap: 8px; font-size: 14px; }
.sp-col code { font-weight: 700; color: #146b34; }
html[data-theme="dark"] .sp-col code { color: #7fe0a6; }
.sp-rules { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.sp-table thead th { background: #17803d; color: #fff; }
.sp-table code { font-weight: 700; }
.sp-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.sp-specs caption { text-align: left; padding: 8px 0; font-weight: 800; }
.sp-note { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) {
  .sp-head { grid-template-columns: minmax(0, 1fr); padding: 28px 16px; }
  .sp-head img { max-height: 150px; order: -1; }
  .sp-layout { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 40px; gap: 16px; }
  .sp-contents { position: static; }
  .sp-contents ol { display: flex; flex-wrap: wrap; gap: 4px; border: 0; }
  .sp-contents li a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
  .sp-specs { grid-template-columns: minmax(0, 1fr); }
  .sp-actions .home-btn { flex: 1 1 auto; justify-content: center; }
}
@media print {
  body[data-page="spec"] .k-top, body[data-page="spec"] .k-nav, body[data-page="spec"] .k-foot, body[data-page="spec"] .back-to-top, .sp-actions, .sp-contents, #code-file { display: none !important; }
  .sp-head { padding: 0 0 12px; background: #fff; color: #111; }
  .sp-head h1, .sp-strap, .sp-source { color: #111; }
  .sp-layout { display: block; padding: 0; }
  .sp-seg.is-col, .sp-table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sp-section { break-inside: auto; }
  .sp-col, .sp-specs table, .sp-table tr { break-inside: avoid; }
}
.sp-table td:last-child strong { white-space: nowrap; }

/* ---------- Photometry page: figures, filters by size and optic, the files grouped by size. ---------- */
main#photometry { max-width: none; margin: 0; padding: 0; background: var(--bg); }
.ph-wrap { max-width: 1320px; margin: 0 auto; padding: 28px 40px 56px; }
.ph-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.ph-figures div { display: grid; gap: 2px; padding: 16px; border: 1px solid var(--line); border-top: 4px solid #17803d; border-radius: 10px; background: var(--card); }
.ph-figures span { font-size: 13px; font-weight: 700; color: var(--muted); }
.ph-figures strong { font-size: 26px; }
.ph-figures small { color: var(--muted); }
.ph-missing { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: #fff4d6; color: #5c4100; }
.ph-missing a { color: #5c4100; font-weight: 700; }
html[data-theme="dark"] .ph-missing { background: #3a2f12; color: #f3dfa4; }
.ph-filters { display: grid; gap: 6px; margin-bottom: 8px; }
.ph-count { margin: 6px 0 10px; color: var(--muted); }
.ph-table thead th { background: #17803d; color: #fff; }
.ph-table tr.ph-group th { padding-top: 14px; background: transparent; color: var(--ink); font-size: 15px; border-bottom: 2px solid #17803d; }
.ph-table td.is-off { color: #9a5b00; font-weight: 800; }
.ph-table td small { color: var(--muted); }
.ph-taken { display: block; color: #9a5b00; }
.ph-ies { margin-left: 6px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; font-weight: 700; color: var(--ink) !important; text-decoration: none; }
@media (max-width: 900px) {
  .ph-wrap { padding: 18px 16px 40px; }
  .ph-figures { grid-template-columns: 1fr 1fr; }
  .ph-figures strong { font-size: 20px; }
  .ph-table thead { display: none; }
  .ph-table, .ph-table tbody { display: block; }
  .ph-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ph-table tr.ph-group { display: block; padding: 12px 0 4px; }
  .ph-table td { display: grid; padding: 2px 0; border: 0; font-size: 14px; }
  .ph-table td::before { content: attr(data-label); font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .ph-table td:first-child { grid-column: 1 / -1; font-weight: 700; }
}

/* Find the fitting, as its mockup: the four fields, more filters folded, a trust strip and a link bar under the hero. */
.spec-more-filters { margin: 0 0 14px; }
.spec-more-filters > summary { cursor: pointer; font-size: 14px; color: rgba(242,242,240,.82); }
.spec-more-filters[open] > summary { margin-bottom: 10px; }
.spec-more-filters .spec-fields-more { margin-top: 0; }
.spec-trust { display: grid; gap: 14px; padding: 22px 40px; background: #121514; border-top: 1px solid rgba(255,255,255,.08); }
.spec-trust > p { margin: 0; text-align: center; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(242,242,240,.8); }
.spec-trust-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; }
.spec-trust-logos img { height: 44px; width: auto; filter: grayscale(1) invert(1) brightness(1.6); mix-blend-mode: screen; opacity: .82; }
.spec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 0 40px; background: #0e1110; border-top: 1px solid rgba(255,255,255,.1); }
.spec-bar a { padding: 16px 22px 16px 0; margin-right: 22px; border-right: 1px solid rgba(255,255,255,.18); color: #f2f2f0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.spec-bar a:hover { color: #7fe0a6; }
.spec-bar span { margin-left: auto; color: rgba(242,242,240,.8); font-size: 14px; }
@media (max-width: 900px) {
  .spec-trust, .spec-bar { padding-left: 16px; padding-right: 16px; }
  .spec-trust-logos img { height: 32px; }
  .spec-bar a { padding: 12px 14px 12px 0; margin-right: 14px; font-size: 12px; }
  .spec-bar span { display: none; }
}
/* The hero's backdrop is a neutral warehouse, since the product beside it changes on each visit. */
.spec-hero { background-image: radial-gradient(ellipse at 72% 45%, rgba(40,44,44,.45) 0%, rgba(10,12,12,0) 60%), linear-gradient(90deg, rgba(8,10,10,.95) 0%, rgba(8,10,10,.86) 50%, rgba(8,10,10,.72) 100%), url("images/door-warehouse.jpg"); }

/* Build this fitting: a wide two-panel dialog that fits the window without scrolling. */
body .k-fit-dialog { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
body .k-fit-dialog .k-card.k-fit { max-height: calc(100vh - 32px); overflow: hidden; padding: 18px 22px; }
.k-fit .k-fit-head { margin-bottom: 8px; }
.k-fit .k-fit-head h2 { margin: 0; font-size: 18px; }
.k-fit-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px; align-items: start; }
.k-fit-side { display: grid; gap: 6px; align-content: start; padding-right: 22px; border-right: 1px solid var(--line, #e3e8e4); }
.k-fit-side > p, .k-fit-side > label, .k-fit-side > div { margin: 0; }
.k-fit-side .k-lm { font-size: 34px; line-height: 1.05; margin: 2px 0; }
.k-fit-side .k-caption { font-size: 13px; line-height: 1.4; }
.k-fit-side .pool { display: flex; flex-wrap: wrap; gap: 4px; }
.k-fit-side .pool button { padding: 4px 8px; font-size: 13px; }
.k-fit-side label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.k-fit-side .k-fit-schedule { margin-top: 6px; }
.k-fit-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.k-fit-selects label { display: grid; grid-template-columns: 1fr; gap: 3px; font-size: 13px; font-weight: 700; }
.k-fit-selects select { min-height: 36px; width: 100%; min-width: 0; font-size: 14px; }
.k-fit .k-mods { margin: 12px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
.k-fit .k-mods > p:first-child { grid-column: 1 / -1; margin: 0 0 4px; font-weight: 700; font-size: 13px; }
.k-fit .k-mods label { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.3; }
.k-fit .k-mods label input { margin-top: 2px; flex: none; }
.k-fit .k-mods #mod-rule { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12px; }
@media (max-width: 760px) {
  body .k-fit-dialog { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; }
  body .k-fit-dialog .k-card.k-fit { height: 100vh; max-height: 100vh; border-radius: 0; padding: 12px 14px; }
  .k-fit-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .k-fit-side { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line, #e3e8e4); }
  .k-fit-side .k-lm { font-size: 26px; }
  .k-fit-side .k-measured, .k-fit-side .k-body, .k-fit-side label, .k-fit-side .pool, .k-fit-side #lux-out, .k-fit-side .k-caption:not([data-mirror]) { display: none; }
  .k-fit-side > p:last-child { display: none; }
  .k-fit-selects { gap: 6px 10px; }
  .k-fit-selects select { min-height: 34px; font-size: 13px; }
  .k-fit .k-mods { grid-template-columns: minmax(0, 1fr); }
  .k-fit .k-mods label { font-size: 12px; }
}
/* Only if a series ever has more choices than the window can hold does the dialog scroll, rather than cutting choices off. */
body .k-fit-dialog .k-card.k-fit { overflow: auto; }

/* ---------- Top navigation in dark mode: light text on the dark bar and in every dropdown. ---------- */
html[data-theme="dark"] body.k-site > .k-nav { color: #f2f2f0; background: #141a17; }
html[data-theme="dark"] body .k-nav > a, html[data-theme="dark"] body .k-drop > button { color: #f2f2f0; }
html[data-theme="dark"] body .k-nav > a:hover, html[data-theme="dark"] body .k-drop > button:hover, html[data-theme="dark"] body .k-drop.is-open > button { color: #7fe0a6; }
html[data-theme="dark"] body .k-nav .k-find { color: #f2f2f0; border-color: rgba(255,255,255,.28); background: transparent; }
html[data-theme="dark"] body .k-nav .k-find:first-child { background: #17803d; border-color: #17803d; color: #fff; }
html[data-theme="dark"] body .k-nav .k-find:hover { color: #7fe0a6; border-color: #7fe0a6; background: rgba(255,255,255,.05); }
html[data-theme="dark"] body .k-nav > .k-drop > .k-menu { background: #141a17; color: #f2f2f0; border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] body .k-nav .k-menu a,
html[data-theme="dark"] body .k-nav .k-menu a strong,
html[data-theme="dark"] body .k-nav .k-menu a span,
html[data-theme="dark"] body .k-nav .k-menu button { color: #f2f2f0; }
html[data-theme="dark"] body .k-nav .k-menu .k-feat span { color: rgba(242,242,240,.7); }
html[data-theme="dark"] body .k-nav .k-menu a:hover, html[data-theme="dark"] body .k-nav .k-menu a:focus-visible { background: rgba(255,255,255,.06); color: #7fe0a6; }
html[data-theme="dark"] body .k-nav .k-menu a:hover strong { color: #7fe0a6; }
html[data-theme="dark"] body .k-nav .k-mega h3 { color: #7fe0a6; }
html[data-theme="dark"] body .k-nav .k-menu a.k-view-all { color: #fff; }
html[data-theme="dark"] body .k-sector-tabs button { border-color: rgba(255,255,255,.2); }
html[data-theme="dark"] body .k-sector-tabs button.is-on { background: #183a28; border-color: #3ddc84; color: #fff; }
html[data-theme="dark"] .k-burger { background: #141a17; color: #f2f2f0; border-color: rgba(255,255,255,.25); }
html[data-theme="dark"] .k-burger[aria-expanded="true"] { background: #17803d; border-color: #17803d; color: #fff; }
@media (max-width: 1240px) {
  html[data-theme="dark"] body .k-nav > a, html[data-theme="dark"] body .k-drop > button { border-bottom-color: rgba(255,255,255,.1); }
  html[data-theme="dark"] body .k-nav > .k-drop > .k-menu { background: #1b2420; }
}
/* Staff links: in the header on wide screens, at the foot of the phone menu. */
.k-top .k-office + .k-office { margin-left: -4px; }
body .k-nav .k-find.k-staff { display: none; }
@media (max-width: 640px) { body .k-nav .k-find.k-staff { display: inline-flex; border-style: dashed; } }