/* American Drain design tokens v0.1 (dev). Brand anchors sampled from logo PNG; confirm against vector source. */
:root {
  --ad-blue: #1a459b;
  --ad-blue-700: #133578;
  --ad-red: #e55e60;
  --ad-red-700: #b8383b;
  --ad-field: #e0e3ef;

  --ad-ink: #14213d;
  --ad-graphite: #4a5568;
  --ad-concrete: #c9cdd4;
  --ad-masonry: #dfe2e6;
  --ad-paper: #f7f6f2;
  --ad-white: #ffffff;
  --ad-wood: #ecd6c9;
  --ad-insul: #e9c7dc;
  --ad-soil: #efeae0;
  --ad-soil-line: #d9d1c1;
  --ad-water: #2b8fd6;
  --ad-water-700: #1d6fae;

  --ad-font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ad-fs-xs: 0.8125rem;
  --ad-fs-sm: 0.9375rem;
  --ad-fs-md: 1.0625rem;
  --ad-fs-lg: 1.375rem;
  --ad-fs-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --ad-lh: 1.55;

  --ad-space-1: 4px;
  --ad-space-2: 8px;
  --ad-space-3: 12px;
  --ad-space-4: 16px;
  --ad-space-5: 24px;
  --ad-space-6: 32px;
  --ad-space-7: 48px;
  --ad-space-8: 64px;

  --ad-radius: 6px;
  --ad-focus: 3px solid var(--ad-blue);
  --ad-measure: 68ch;
  --ad-shadow: 0 1px 2px rgb(20 33 61 / 8%), 0 4px 16px rgb(20 33 61 / 6%);
}

/* American Drain dev site v0.2 */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-wdth.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --blue: #1a459b; --blue-700: #12336f; --blue-300: #8fb0ea;
  --ground: #1c2733; --ground-2: #243241; --ground-3: #2e3e4f;
  --concrete: #d6d9dd; --limestone: #f3f4f1; --white: #fff;
  --ink: #17202b; --slate: #4a5563; --mute: #545e6a;
  --water: #2e9be0; --star: #e55e60;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1200px; --gut: clamp(20px, 4vw, 40px);
  --r: 4px;

  /* map explainer tokens */
  --ad-blue: var(--blue); --ad-blue-700: var(--blue-700); --ad-ink: var(--ink); --ad-graphite: var(--slate);
  --ad-paper: var(--limestone); --ad-white: var(--white); --ad-concrete: var(--concrete); --ad-masonry: #e4e7ea;
  --ad-font-sans: var(--body); --ad-shadow: none; --ad-radius: var(--r);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--limestone); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.on-ground :focus-visible { outline-color: var(--blue-300); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--blue); color: #fff; border-radius: var(--r); }
.skip:focus { top: 12px; }

/* Type */
h1, h2, h3 { font-family: var(--display); font-stretch: 112%; color: inherit; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); font-weight: 800; line-height: .98; font-stretch: 118%; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); font-weight: 760; line-height: 1.04; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.2; font-stretch: 105%; }
p { margin: 0 0 1em; max-width: 64ch; }
.lede { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.5; color: var(--slate); }
.on-ground .lede, .on-ground p { color: #c7d0da; }

/* Dev banner + header */
.site-head { position: sticky; top: 0; z-index: 20; background: rgb(243 244 241 / 92%); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgb(23 32 43 / 8%); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 44px; height: 44px; }
.brand span { font: 760 1.15rem/1 var(--display); font-stretch: 115%; letter-spacing: -.01em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { padding: 10px 12px; border-radius: var(--r); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover, .nav a[aria-current="page"] { background: rgb(26 69 155 / 8%); color: var(--blue); }
.nav .btn { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; }
@media (max-width: 920px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 20px; background: var(--limestone); border-bottom: 1px solid rgb(23 32 43 / 10%); }
  .nav.open { display: flex; }
  .nav a { padding: 14px 8px; font-size: 1.05rem; }
  .nav .btn { margin: 12px 0 0; justify-content: center; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 2px solid var(--blue); border-radius: var(--r); background: var(--blue); color: #fff; font: 700 1rem/1 var(--body); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--blue-700); border-color: var(--blue-700); }
.btn--ghost { background: transparent; color: var(--blue); }
.btn--ghost:hover { background: var(--blue); color: #fff; }
.on-ground .btn--ghost { color: #fff; border-color: rgb(255 255 255 / 55%); }
.on-ground .btn--ghost:hover { background: #fff; color: var(--ground); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Hero: the grade line */
.hero { --grade: 60%; position: relative; overflow: hidden; background: linear-gradient(to bottom, var(--limestone) 0 var(--grade), var(--ground) var(--grade) 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; top: var(--grade); height: 3px; background: #5f8a4f; opacity: .9; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: min(820px, 92vh); }
.hero__copy { align-self: start; padding: clamp(40px, 7vh, 88px) 0 0; max-width: 600px; }
.hero__copy .lede { margin-top: 22px; color: var(--slate); }
.hero__copy .btn-row { margin-top: 28px; }
.hero__aside { position: absolute; left: var(--gut); right: 50%; top: calc(var(--grade) + 34px); color: #c7d0da; font-size: .95rem; }
.hero__aside a { color: #fff; font-weight: 600; }
.hero__art { position: relative; }
.hero__art svg { position: absolute; right: -40px; bottom: 0; height: 100%; width: auto; max-width: none; }
@media (max-width: 920px) {
  .hero { background: var(--limestone); }
  .hero::after { display: none; }
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding-right: 0; padding-left: 0; }
  .hero__copy { padding: 36px var(--gut) 8px; }
  .hero__art svg { position: static; width: 100%; height: auto; right: auto; }
  .hero__aside { position: static; background: var(--ground); padding: 0 var(--gut) 24px; }
}

/* Ground sections */
.on-ground { background: var(--ground); color: #fff; }
.band { padding: clamp(64px, 9vw, 112px) 0; }
.band--tight { padding: clamp(48px, 6vw, 72px) 0; }
.band--concrete { background: #e7e9ea; }
.band--white { background: #fff; }
.sec-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 52px); max-width: 760px; }
.sec-head p { margin: 0; }

/* Steps in the ground (a real sequence) */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: f; border-top: 1px solid var(--ground-3); }
.flow li { list-style: none; counter-increment: f; padding: 28px 28px 8px 0; border-right: 1px solid var(--ground-3); margin-right: 28px; }
.flow li:last-child { border-right: 0; margin-right: 0; }
.flow li::before { content: counter(f); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border: 2px solid var(--water); border-radius: 50%; color: var(--water); font: 800 1rem/1 var(--display); }
.flow h3 { color: #fff; margin-bottom: 8px; }
.flow p { color: #b9c4cf; font-size: .98rem; }
.flow-wrap { margin: 0; padding: 0; }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr; } .flow li { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--ground-3); padding: 24px 0 12px; } .flow li:last-child { border-bottom: 0; } }
.ground-cta { margin-top: 40px; }

/* Product photos */
.parts { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.parts figure { margin: 0; position: relative; }
.parts figure:first-child { grid-row: span 2; }
.parts img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); background: #cfc6b5; aspect-ratio: 4 / 5; }
.parts figure:first-child img { aspect-ratio: auto; }
.parts figcaption { margin-top: 10px; font-size: .9rem; color: var(--slate); }
@media (max-width: 860px) { .parts { grid-template-columns: 1fr 1fr; } .parts figure:first-child { grid-column: span 2; grid-row: auto; } .parts figure:first-child img { aspect-ratio: 4 / 3.2; } }
.photo-note { margin-top: 18px; font-size: .85rem; color: var(--mute); }

/* Applications: drawings */
.apps { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 36px); }
.app { grid-column: span 6; display: grid; gap: 14px; align-content: start; text-decoration: none; color: inherit; }
.app:nth-child(1) { grid-column: span 7; } .app:nth-child(2) { grid-column: span 5; }
.app:nth-child(3) { grid-column: span 5; } .app:nth-child(4) { grid-column: span 7; }
.app__img { background: #fff; border: 1px solid #d4d8dc; border-radius: var(--r); padding: clamp(12px, 2vw, 24px); display: grid; place-items: center; aspect-ratio: 16 / 11; overflow: hidden; }
.app__img img { max-height: 100%; width: auto; object-fit: contain; }
.app h3 a { color: var(--ink); text-decoration: none; }
.app h3 a:hover { color: var(--blue); text-decoration: underline; }
.app p { margin: 0; color: var(--slate); }
@media (max-width: 860px) { .apps .app { grid-column: span 12 !important; } }

/* Inspection */
.inspect { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.checklist { margin: 0; padding: 0; list-style: none; counter-reset: c; }
.checklist li { counter-increment: c; position: relative; padding: 18px 0 18px 56px; border-top: 1px solid var(--ground-3); color: #dbe2e9; }
.checklist li::before { content: counter(c); position: absolute; left: 0; top: 16px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ground-3); color: #fff; font: 800 .95rem/1 var(--display); }
.checklist strong { color: #fff; display: block; font-size: 1.05rem; }
@media (max-width: 860px) { .inspect { grid-template-columns: 1fr; } }

/* Audience routes */
.routes { border-top: 2px solid var(--ink); }
.route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid #c9cdd2; }
.route p { margin: 0; color: var(--slate); }
@media (max-width: 760px) { .route { grid-template-columns: 1fr; gap: 12px; } }

/* Patents */
.patents { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid #c9cdd2; border-radius: var(--r); background: #fff; }
.patents a { display: grid; gap: 4px; padding: 20px; text-decoration: none; color: var(--ink); border-right: 1px solid #e1e4e7; }
.patents a:last-child { border-right: 0; }
.patents a:hover { background: #f0f4fb; }
.patents b { font: 760 1.15rem/1.1 var(--display); font-stretch: 108%; color: var(--blue); }
.patents span { font-size: .875rem; color: var(--slate); }
@media (max-width: 900px) { .patents { grid-template-columns: 1fr 1fr; } .patents a { border-bottom: 1px solid #e1e4e7; } }
@media (max-width: 480px) { .patents { grid-template-columns: 1fr; } .patents a { border-right: 0; } }
.fine { font-size: .875rem; color: var(--mute); margin-top: 16px; }

/* Page header (inner pages) */
.page-head { padding: clamp(44px, 7vw, 88px) 0 clamp(32px, 4vw, 48px); border-bottom: 1px solid #d4d8dc; }
.page-head h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.8rem); max-width: 18ch; }
.page-head .lede { margin-top: 18px; }

/* Components page */
.comp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); padding: clamp(40px, 5vw, 64px) 0; border-bottom: 1px solid #d4d8dc; align-items: start; }
.comp:nth-of-type(even) .comp__media { order: 2; }
.comp__media img { border-radius: var(--r); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.spec { margin: 20px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 0; border-top: 1px solid #d4d8dc; }
.spec dt, .spec dd { margin: 0; padding: 12px 0; border-bottom: 1px solid #e1e4e7; font-size: .95rem; }
.spec dt { font-weight: 700; padding-right: 24px; }
.flag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #fff1d6; color: #7a4b00; font-size: .78rem; font-weight: 700; vertical-align: 1px; }
@media (max-width: 820px) { .comp { grid-template-columns: 1fr; } .comp:nth-of-type(even) .comp__media { order: 0; } }

/* Library */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; border: 0; }
.filters legend { font-weight: 700; margin-bottom: 10px; width: 100%; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid #b8bec5; border-radius: 99px; background: #fff; font-weight: 600; font-size: .95rem; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
.lib li { display: grid; gap: 10px; align-content: start; }
.lib button { all: unset; cursor: zoom-in; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #fff; border: 1px solid #d4d8dc; border-radius: var(--r); padding: 14px; }
.lib button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.lib button:hover { border-color: var(--blue); }
.lib img { max-height: 100%; width: auto; object-fit: contain; }
.lib h3 { font-size: 1.05rem; }
.lib p { margin: 0; font-size: .92rem; color: var(--slate); }
.count { color: var(--slate); font-size: .95rem; margin: -12px 0 20px; }
.viewer { width: min(1200px, 96vw); max-height: 94vh; padding: 0; border: 0; border-radius: 6px; background: #fff; }
.viewer::backdrop { background: rgb(15 22 30 / 82%); }
.viewer figure { margin: 0; display: grid; grid-template-rows: auto 1fr; max-height: 94vh; }
.viewer header { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e1e4e7; }
.viewer header h2 { font-size: 1.15rem; }
.viewer img { margin: 0 auto; max-height: calc(94vh - 140px); width: auto; object-fit: contain; padding: 12px; }
.viewer figcaption { padding: 0 18px 16px; color: var(--slate); font-size: .92rem; }
table.data { width: 100%; border-collapse: collapse; background: #fff; font-size: .95rem; }
table.data th, table.data td { text-align: left; padding: 14px 16px; border-bottom: 1px solid #e1e4e7; vertical-align: top; }
table.data thead th { background: var(--ink); color: #fff; }
.table-wrap { overflow-x: auto; border: 1px solid #d4d8dc; border-radius: var(--r); }

/* Installer page */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.contact-grid > div { padding: 32px 32px 32px 0; border-bottom: 1px solid #c9cdd2; }
.contact-grid > div:nth-child(odd) { border-right: 1px solid #c9cdd2; }
.contact-grid > div:nth-child(even) { padding-left: 32px; }
.contact-grid h2 { font-size: 1.5rem; margin-bottom: 10px; }
.big-phone { font: 800 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem)/1.1 var(--display); font-stretch: 112%; color: var(--blue); text-decoration: none; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } .contact-grid > div { padding: 28px 0 !important; border-right: 0 !important; } }

/* Footer */
.foot { background: var(--ground); color: #b9c4cf; padding: 64px 0 40px; font-size: .95rem; }
.foot a { color: #fff; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot h2 { font-size: 1rem; color: #fff; margin-bottom: 12px; font-stretch: 105%; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot .brand span { color: #fff; }
.foot__legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--ground-3); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } }

/* Explainer on site */
.ad-x { padding-top: 0; }
.ad-x__head { display: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== v0.3: photographic hero, below-grade cutaway, showcase ===== */
.btn--light { background: #fff; color: var(--ground); border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; border-color: #fff; }
.hero2 { position: relative; min-height: min(88vh, 860px); display: grid; align-items: end; color: #fff; isolation: isolate; overflow: hidden; background: var(--ground); }
.hero2__media { position: absolute; inset: 0; z-index: -1; }
.hero2__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero2__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(16 24 33 / 82%) 0%, rgb(16 24 33 / 55%) 38%, rgb(16 24 33 / 0%) 70%), linear-gradient(0deg, rgb(28 39 51 / 95%) 0%, rgb(28 39 51 / 0%) 32%); }
.hero2__copy { padding-top: 120px; padding-bottom: clamp(64px, 10vh, 120px); }
.hero2 h1 { max-width: 14ch; color: #fff; text-wrap: balance; }
.hero2 .lede { color: #dce4ec; margin-top: 22px; max-width: 54ch; }
.hero2 .btn-row { margin-top: 30px; }
.hero2__pro { margin-top: 18px; font-size: .95rem; }
.hero2__pro a { color: #fff; }
.grade { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(90deg, #6f9a5c 0 18px, #4f7a43 18px 22px); }
@media (max-width: 700px) { .hero2 { min-height: 92vh; } .hero2__media img { object-position: 72% 50%; } .hero2__media::after { background: linear-gradient(0deg, rgb(16 24 33 / 92%) 0%, rgb(16 24 33 / 70%) 55%, rgb(16 24 33 / 20%) 100%); } }

.dig { position: relative; isolation: isolate; padding: clamp(72px, 10vw, 128px) 0; overflow: clip; }
.dig__bg { position: absolute; inset: 0; z-index: -1; }
.dig__bg img { width: 100%; height: 100%; object-fit: cover; }
.dig__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(28 39 51 / 94%) 0%, rgb(28 39 51 / 86%) 40%, rgb(20 29 39 / 96%) 100%); }
.dig__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.dig__stage { position: sticky; top: 96px; }
.dig__note { margin-top: 10px; font-size: .82rem; color: #9fb0c2; }
.dig__steps h2 { color: #fff; margin-bottom: 8px; }
.dig__list { list-style: none; margin: 0 0 40px; padding: 0; counter-reset: d; }
.dig__list li { counter-increment: d; padding: 12vh 0 12vh 56px; position: relative; border-left: 2px solid var(--ground-3); opacity: .45; transition: opacity .4s; }
.dig__list li::before { content: counter(d); position: absolute; left: -19px; top: calc(12vh - 4px); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ground); border: 2px solid var(--ground-3); color: #c7d0da; font: 800 .95rem/1 var(--display); transition: border-color .4s, color .4s; }
.dig__list li.is-on, .dig:not(.is-live) .dig__list li { opacity: 1; }
.dig__list li.is-on::before { border-color: #5cc0ff; color: #5cc0ff; }
.dig__list h3 { color: #fff; font-size: 1.45rem; margin-bottom: 10px; }
.dig__list p { color: #c7d0da; }
@media (max-width: 860px) {
  .dig__grid { grid-template-columns: 1fr; }
  .dig__stage { top: 72px; z-index: 1; background: rgb(28 39 51 / 92%); padding: 8px 0; }
  .dig__stage .cut { max-height: 46vh; margin: 0 auto; display: block; }
  .dig__list li { padding: 18vh 0 18vh 44px; }
}

/* cutaway drawing */
.cut { width: 100%; height: auto; overflow: visible; }
.cut-house rect, .cut-house path { fill: rgb(255 255 255 / 4%); stroke: #c7d0da; stroke-width: 1.3; }
.cut-house path { fill: none; stroke: rgb(199 208 218 / 45%); }
.cut-grade path { fill: none; stroke: #7fae68; stroke-width: 2; }
.cut-coat { stroke: #e9eef3; stroke-width: 2.5; }
.cut-air { fill: rgb(92 192 255 / 0%); transition: fill .5s; }
.cut-panel { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.cut-spacer { stroke: #fff; stroke-width: 3; }
.cut-cap { fill: rgb(229 94 96 / 25%); stroke: #f0a0a2; stroke-width: 1.3; }
.cut-pipe { fill: rgb(92 192 255 / 10%); stroke: #5cc0ff; stroke-width: 3.5; }
.cut-clean { fill: none; stroke: #9fb0c2; stroke-width: 1.3; stroke-dasharray: 5 4; }
.cut-water path { fill: none; stroke: #5cc0ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 8; marker-end: url(#cut-arrow); opacity: .18; transition: opacity .4s; }
.cut-labels text { font: 600 13px var(--body); fill: #c7d0da; transition: fill .4s; }
.cut-access { opacity: .35; transition: opacity .4s; }
.dig[data-step="all"] .cut-water path, .dig[data-step="1"] [data-s="1"], .dig[data-step="2"] [data-s="2"], .dig[data-step="3"] [data-s="3"] { opacity: 1; }
.dig[data-step="2"] .cut-air, .dig[data-step="all"] .cut-air { fill: rgb(92 192 255 / 22%); }
.dig[data-step="4"] .cut-access, .dig[data-step="all"] .cut-access { opacity: 1; }
.dig[data-step="2"] [data-l="panel"], .dig[data-step="2"] [data-l="air"], .dig[data-step="3"] [data-l="pipe"], .dig[data-step="4"] [data-l="cap"], .dig[data-step="4"] [data-l="cleanout"] { fill: #5cc0ff; }
@media (prefers-reduced-motion: no-preference) { .dig.is-live .cut-water path { animation: cutflow 1.2s linear infinite; } }
@keyframes cutflow { to { stroke-dashoffset: -28; } }

/* product showcase */
.showcase { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.showcase figure { margin: 0; background: #2b2d30; border-radius: var(--r); overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
.showcase img { width: 100%; height: 100%; object-fit: cover; }
.showcase figcaption { padding: 12px 16px; background: var(--ground); color: #c7d0da; font-size: .9rem; }
@media (max-width: 860px) { .showcase { grid-template-columns: 1fr; } }

/* uses */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.use { position: relative; display: block; border-radius: var(--r); overflow: hidden; color: #fff; text-decoration: none; aspect-ratio: 3 / 4; background: var(--ground); }
.use img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.use::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(16 24 33 / 88%) 0%, rgb(16 24 33 / 0%) 55%); }
.use__body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 24px; display: grid; gap: 6px; }
.use__body h3 { color: #fff; font-size: 1.4rem; }
.use__body span { color: #dce4ec; font-size: .95rem; }
.use:hover img { transform: scale(1.03); }
.use:focus-visible { outline-offset: 4px; }
@media (max-width: 860px) { .uses { grid-template-columns: 1fr; } .use { aspect-ratio: 4 / 3; } }

/* split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.split__img { margin: 0; }
.split__img img { border-radius: var(--r); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split .routes { margin-top: 24px; }
.split .route { grid-template-columns: 1fr; gap: 10px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.checklist--light li { border-top-color: #c9cdd2; color: var(--slate); }
.checklist--light strong { color: var(--ink); }
.checklist--light li::before { background: var(--blue); }

/* closer */
.closer { position: relative; isolation: isolate; padding: clamp(96px, 16vw, 200px) 0; overflow: hidden; }
.closer__bg { position: absolute; inset: 0; z-index: -1; }
.closer__bg img { width: 100%; height: 100%; object-fit: cover; }
.closer__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(16 24 33 / 88%) 0%, rgb(16 24 33 / 50%) 60%, rgb(16 24 33 / 30%) 100%); }
.closer h2 { color: #fff; max-width: 16ch; margin-bottom: 28px; text-wrap: balance; }
.page-head h1 { text-wrap: balance; }
.nav a.btn, .nav a.btn:hover { color: #fff; background: var(--blue); }
.nav a.btn:hover { background: var(--blue-700); }
.filters { min-width: 0; }
.lib li { min-width: 0; }
.lib button { box-sizing: border-box; width: 100%; }
.lib img { max-width: 100%; }
.lib li { grid-template-columns: minmax(0, 1fr); }
.site-head .menu-btn { display: none; }
@media (max-width: 920px) { .site-head .menu-btn { display: inline-flex; } }

/* Inquiry form and prose pages (launch layer, 2026-11-11) */
.form { display: grid; gap: 20px; max-width: 640px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form label { display: block; font-weight: 700; margin-bottom: 6px; }
.form .opt { font-weight: 400; color: var(--mute); }
.form input, .form select, .form textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid #8a94a0; border-radius: var(--r); background: #fff; color: var(--ink); font: inherit; }
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }
.form [aria-invalid="true"] { border-color: #b8383b; }
.form .err { display: block; min-height: 1.2em; margin-top: 4px; color: #b8383b; font-size: .875rem; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form [data-status] { margin: 0; min-height: 1.5em; font-weight: 700; }
.prose { max-width: 68ch; padding-bottom: 64px; }
.prose h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.prose p, .prose li { color: var(--slate); }
.prose ul { padding-left: 1.2em; }
.foot__legal a { color: inherit; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

/* E1 Foundation explainer v0.1 */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

.ad-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ad-x { max-width: 1180px; margin: 0 auto; padding: var(--ad-space-6) var(--ad-space-4) var(--ad-space-8); }
.ad-x__eyebrow { margin: 0 0 var(--ad-space-2); color: var(--ad-blue); font-size: var(--ad-fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ad-x__title { margin: 0; max-width: 22ch; font-size: var(--ad-fs-xl); line-height: 1.12; letter-spacing: -.01em; }
.ad-x__lede { max-width: var(--ad-measure); margin: var(--ad-space-4) 0 0; color: var(--ad-graphite); font-size: var(--ad-fs-lg); line-height: 1.45; }
.ad-x__h2 { margin: 0 0 var(--ad-space-4); font-size: var(--ad-fs-lg); }

/* Controls */
.ad-x__controls { display: flex; flex-wrap: wrap; gap: var(--ad-space-4) var(--ad-space-6); align-items: center; margin: var(--ad-space-6) 0 var(--ad-space-4); }
.ad-x__controls fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: var(--ad-space-2); }
.ad-seg { background: var(--ad-white); border: 1px solid var(--ad-concrete) !important; border-radius: 999px; padding: 3px !important; gap: 2px !important; }
.ad-seg label, .ad-toggles label { position: relative; cursor: pointer; }
.ad-seg input, .ad-toggles input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ad-seg span { display: block; min-height: 40px; padding: 9px 16px; border-radius: 999px; font-size: var(--ad-fs-sm); font-weight: 600; color: var(--ad-graphite); }
.ad-seg input:checked + span { background: var(--ad-blue); color: var(--ad-white); }
.ad-toggles span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 10px; border: 1px solid var(--ad-concrete); border-radius: var(--ad-radius); background: var(--ad-white); font-size: var(--ad-fs-sm); font-weight: 600; }
.ad-toggles span::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--ad-graphite); border-radius: 3px; background: var(--ad-white); }
.ad-toggles input:checked + span::before { border-color: var(--ad-blue); background: var(--ad-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4'/%3E%3C/svg%3E") center/14px no-repeat; }
.ad-seg input:focus-visible + span, .ad-toggles input:focus-visible + span { outline: var(--ad-focus); outline-offset: 2px; }

/* Stage */
.ad-defs { position: absolute; }
.ad-x__stage { display: grid; gap: var(--ad-space-5); grid-template-columns: 1fr; margin-top: var(--ad-space-5); }
@media (min-width: 760px) { .ad-x__stage { grid-template-columns: 1fr 1fr; } }
.ad-x[data-view="conv"] [data-system="ad"], .ad-x[data-view="ad"] [data-system="conv"] { display: none; }
.ad-x[data-view="conv"] .ad-x__stage, .ad-x[data-view="ad"] .ad-x__stage { grid-template-columns: minmax(0, 640px); justify-content: center; }
.ad-x__fig { margin: 0; padding: var(--ad-space-4); background: var(--ad-white); border: 1px solid var(--ad-concrete); border-radius: var(--ad-radius); box-shadow: var(--ad-shadow); }
.ad-x__figcap { display: flex; align-items: center; gap: var(--ad-space-3); margin-bottom: var(--ad-space-3); font-weight: 700; }
.ad-x__tag { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ad-ink); color: var(--ad-white); font-size: var(--ad-fs-sm); }
[data-system="ad"] .ad-x__tag { background: var(--ad-blue); }
.ad-x__fig svg { display: block; width: 100%; height: auto; overflow: visible; }

/* SVG parts */
.ad-grass { fill: none; stroke: #4c8a3c; stroke-width: 1.2; }
.ad-labels text { font: 600 14px var(--ad-font-sans); fill: var(--ad-ink); }
.ad-labels path { fill: none; stroke: var(--ad-graphite); stroke-width: 1.2; }
.ad-x:not(.show-labels) .ad-labels { display: none; }
.ad-x:not([data-enhanced]) .ad-labels { display: inline; }
.ad-hot { outline: none; }
.ad-x[data-enhanced] .ad-hot { cursor: pointer; }
.ad-x[data-enhanced] .ad-hot text { text-decoration: underline; text-decoration-color: rgb(26 69 155 / 35%); text-underline-offset: 3px; }
.ad-hot:hover text, .ad-hot.is-active text { fill: var(--ad-blue); }
.ad-hot:focus-visible text { fill: var(--ad-blue); outline: none; }
.ad-hot:focus-visible { outline: 3px solid var(--ad-blue); outline-offset: 2px; }
.ad-hot.is-active path { stroke: var(--ad-blue); stroke-width: 2; }
.ad-part.is-active { filter: drop-shadow(0 0 3px var(--ad-blue)) drop-shadow(0 0 1px var(--ad-blue)); }
.ad-part[data-part="ad-air"].is-active rect { fill: rgb(43 143 214 / 22%); }

.ad-access { display: none; }
.ad-x.show-access .ad-access { display: inline; }
.ad-x:not(.show-access) .ad-hot--access { display: none; }
.ad-x:not([data-enhanced]) .ad-access, .ad-x:not([data-enhanced]) .ad-hot--access { display: inline; }

.ad-water path { fill: none; stroke: var(--ad-water); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 7; marker-end: url(#ad-arrow); }
.ad-x:not(.show-water) .ad-water { display: none; }
.ad-x:not([data-enhanced]) .ad-water { display: inline; }
.ad-x[data-step] .ad-water path { opacity: .18; }
.ad-x[data-step] .ad-water path.is-current { opacity: 1; stroke-width: 3.5; }
@media (prefers-reduced-motion: no-preference) {
  .ad-x[data-enhanced] .ad-water path.is-current { animation: ad-flow 1.1s linear infinite; }
}
@keyframes ad-flow { to { stroke-dashoffset: -28; } }

/* Notes, detail, steps */
.ad-x__disclaimer { max-width: var(--ad-measure); margin: var(--ad-space-4) 0 0; color: var(--ad-graphite); font-size: var(--ad-fs-xs); }
.ad-x__detail { margin-top: var(--ad-space-5); padding: var(--ad-space-4) var(--ad-space-5); border-left: 4px solid var(--ad-blue); background: var(--ad-white); border-radius: 0 var(--ad-radius) var(--ad-radius) 0; }
.ad-x__detail h2 { margin: 0 0 var(--ad-space-2); font-size: var(--ad-fs-md); }
.ad-x__detail p { margin: 0 0 var(--ad-space-2); max-width: var(--ad-measure); }
.ad-x__detail-empty { color: var(--ad-graphite); }
.ad-src { font-size: var(--ad-fs-xs); color: var(--ad-graphite); }
.ad-badge { display: inline-block; margin-left: var(--ad-space-2); padding: 1px 8px; border-radius: 999px; font-size: var(--ad-fs-xs); font-weight: 700; vertical-align: 2px; }
.ad-badge--ok { background: #e3f1e6; color: #1e5b2b; }

.ad-x__steps, .ad-x__compare { margin-top: var(--ad-space-7); }
.ad-stepper { display: flex; align-items: center; gap: var(--ad-space-4); margin-bottom: var(--ad-space-4); }
.ad-stepper__count { margin: 0; font-weight: 700; min-width: 8ch; text-align: center; }
.ad-btn { min-height: 44px; padding: 10px 18px; border: 1px solid var(--ad-blue); border-radius: var(--ad-radius); background: var(--ad-white); color: var(--ad-blue); font: 600 var(--ad-fs-sm) var(--ad-font-sans); cursor: pointer; }
.ad-btn--primary { background: var(--ad-blue); color: var(--ad-white); }
.ad-btn:hover { background: var(--ad-blue-700); border-color: var(--ad-blue-700); color: var(--ad-white); }
.ad-btn:focus-visible { outline: var(--ad-focus); outline-offset: 2px; }
.ad-btn[disabled] { opacity: .45; cursor: not-allowed; background: var(--ad-white); color: var(--ad-blue); }
.ad-x__steplist { display: grid; gap: var(--ad-space-3); margin: 0; padding: 0; list-style: none; counter-reset: s; }
@media (min-width: 900px) { .ad-x__steplist { grid-template-columns: repeat(4, 1fr); } }
.ad-x__steplist li { counter-increment: s; padding: var(--ad-space-4); background: var(--ad-white); border: 1px solid var(--ad-concrete); border-radius: var(--ad-radius); }
.ad-x__steplist li::before { content: "Step " counter(s); display: block; color: var(--ad-blue); font-size: var(--ad-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ad-x__steplist h3 { margin: var(--ad-space-1) 0 var(--ad-space-2); font-size: var(--ad-fs-md); }
.ad-x__steplist p { margin: 0; font-size: var(--ad-fs-sm); }
.ad-x__steplist li.is-current { border-color: var(--ad-blue); box-shadow: inset 0 0 0 1px var(--ad-blue); }

.ad-x__note { max-width: var(--ad-measure); margin: 0 0 var(--ad-space-4); color: var(--ad-graphite); font-size: var(--ad-fs-sm); }
.ad-table-wrap { overflow-x: auto; border: 1px solid var(--ad-concrete); border-radius: var(--ad-radius); background: var(--ad-white); }
.ad-table-wrap:focus-visible { outline: var(--ad-focus); outline-offset: 2px; }
.ad-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--ad-fs-sm); }
.ad-table th, .ad-table td { padding: var(--ad-space-3) var(--ad-space-4); border-bottom: 1px solid var(--ad-masonry); text-align: left; vertical-align: top; }
.ad-table thead th { background: var(--ad-ink); color: var(--ad-white); }
.ad-table thead th:last-child { background: var(--ad-blue); }
.ad-table tbody th { width: 22%; font-weight: 700; }
.ad-table tbody tr:last-child > * { border-bottom: 0; }
.ad-x__sources { margin-top: var(--ad-space-6); font-size: var(--ad-fs-sm); color: var(--ad-graphite); }
.ad-x__sources summary { cursor: pointer; font-weight: 600; min-height: 24px; }

/* Small screens */
@media (max-width: 559px) {
  .ad-x__controls { gap: var(--ad-space-3); }
  .ad-seg { display: grid !important; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 10px !important; }
  .ad-seg span { min-height: 44px; display: grid; place-items: center; padding: 6px 4px; border-radius: 8px; text-align: center; line-height: 1.15; font-size: var(--ad-fs-xs); }
  .ad-toggles { width: 100%; }
  .ad-toggles span { font-size: var(--ad-fs-xs); padding: 8px 10px 8px 8px; }
  .ad-x__fig { padding: var(--ad-space-3); }
}