/* Bulk Container Co. The plant floor in daylight, printed like a maker's spec sheet. */
@layer reset, tokens, base, layout, components, pages;

@font-face { font-family: 'Fjalla One'; src: url('/fonts/fjalla-one-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Radio Canada'; src: url('/fonts/radio-canada-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Radio Canada'; src: url('/fonts/radio-canada-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Radio Canada'; src: url('/fonts/radio-canada-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

@layer tokens {
  :root {
    --bg: #e8e0cf;        /* putty: food-grade container beige */
    --surface: #f5f1e8;
    --ink: #1c1f22;       /* charcoal HDPE */
    --muted: #464b50;
    --accent: #c98a00;    /* latch amber */
    --on-accent: #1c1f22;
    --rule: #b9b0a0;
    --rule-strong: #1c1f22;
    --head: 'Fjalla One', 'Arial Narrow', sans-serif;
    --body: 'Radio Canada', system-ui, sans-serif;
    --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
    --gutter: 24px;
    --measure: 1200px;
    --t-0: 17px; --t-1: 21.25px; --t-2: 26.56px; --t-3: 33.2px; --t-4: 41.5px; --t-5: 56px;
    --radius: 2px;
  }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
  body { background: var(--bg); color: var(--ink); font: 400 var(--t-0)/1.55 var(--body); font-variant-numeric: tabular-nums; }
  h1, h2, h3 { font-family: var(--head); font-weight: 400; line-height: 1.12; letter-spacing: 0.005em; text-wrap: balance; }
  h1 { font-size: var(--t-5); }
  h2 { font-size: var(--t-3); margin-top: var(--s5); margin-bottom: var(--s2); }
  h3 { font-size: var(--t-1); margin-top: var(--s3); margin-bottom: var(--s1); }
  p + p { margin-top: var(--s2); }
  a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  strong { font-weight: 600; }
  .skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--surface); padding: 8px 12px; z-index: 50; }
  .skip:focus { left: 8px; }
  .small, .spec-note { font-size: 14px; color: var(--muted); }
  @media (max-width: 720px) {
    h1 { font-size: 36px; }
    h2 { font-size: 28px; margin-top: var(--s5); }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
}

@layer layout {
  .wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  main { display: block; padding-bottom: var(--s7); }
  .narrow { max-width: calc(680px + 2 * var(--gutter)); }
  .prose > * + h2 { margin-top: var(--s5); }
  .prose p, .prose li { max-width: 68ch; }
  @media (max-width: 720px) { :root { --gutter: 16px; } }
}

@layer components {
  /* Wordmark */
  .mark { width: 238px; height: auto; }
  .mark-sm { display: none; width: 64px; }
  .mk-t { font-family: var(--head); font-size: 30px; letter-spacing: 0.02em; fill: var(--ink); stroke: var(--ink); stroke-width: 0.9; stroke-linejoin: round; paint-order: stroke; }
  .mk-bar { fill: var(--accent); }

  /* Header */
  .site-header { background: var(--bg); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 30; }
  .hd { display: flex; align-items: center; gap: var(--s3); min-height: 64px; }
  .brand { display: block; text-decoration: none; flex: none; }
  .nav { margin-left: auto; }
  .nav-list { display: flex; gap: var(--s1); align-items: center; }
  .nav-item { position: relative; }
  .nav-link, .drop > summary { display: block; padding: 10px 12px; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; list-style: none; border-radius: var(--radius); }
  .drop > summary::-webkit-details-marker { display: none; }
  .drop > summary::after { content: ''; display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); margin-left: 8px; }
  .nav-link:hover, .drop > summary:hover, .drop[open] > summary { background: var(--surface); }
  .nav-link[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--ink); }
  .drop-panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px; background: var(--surface); padding: var(--s2) var(--s3); box-shadow: 0 10px 30px rgb(28 31 34 / 0.18); border-top: 3px solid var(--ink); }
  .drop-panel a { display: block; padding: 6px 0; text-decoration: none; }
  .drop-panel a:hover { text-decoration: underline; }
  .drop-all { font-weight: 600; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
  .drop-sub { margin: 4px 0 0 var(--s2) !important; padding-left: var(--s2) !important; border-left: 2px solid var(--rule); font-size: 15px; }
  .hd-quote { flex: none; }
  .phone-menu { display: none; }

  /* Buttons: the amber quote button and the charcoal outline */
  .btn-quote { display: inline-block; background: var(--accent); color: var(--on-accent); font: 600 17px/1 var(--body); padding: 14px 20px; border: 0; border-radius: var(--radius); text-decoration: none; cursor: pointer; white-space: nowrap; }
  .btn-quote:hover { background: #b37b00; text-decoration: none; }
  .btn-out { display: inline-block; border: 2px solid var(--ink); color: var(--ink); padding: 10px 16px; border-radius: var(--radius); text-decoration: none; font-weight: 600; background: transparent; }
  .btn-out:hover { background: var(--ink); color: var(--surface); }

  /* Breadcrumbs */
  .crumbs { padding-top: var(--s3); font-size: 15px; color: var(--muted); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; padding: 0; margin: 0; }
  .crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--rule); }
  .crumbs a { color: var(--muted); }

  /* Photographs and drawings */
  .photo img { width: 100%; height: auto; border-radius: var(--radius); background: #d8cfbd; }
  .photo figcaption, .drawing figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
  .credit { white-space: normal; }
  .credit a { color: var(--muted); }
  .drawing svg { width: 100%; height: auto; background: var(--surface); border-radius: var(--radius); }
  .dw-fill { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
  .drawing .dw-fill { fill: #e9e3d6; }
  .dw-fill2 { fill: #3a3f44; stroke: var(--ink); stroke-width: 3; }
  .dw-solid { fill: var(--ink); }
  .dw-thin { stroke: var(--ink); stroke-width: 1.5; fill: none; }
  .dw-grid { stroke: #b9b0a0; stroke-width: 1; }
  .dw-slot { fill: none; stroke: var(--ink); stroke-width: 1.5; }
  .dw-latch { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; }
  .dw-door { fill: #d9d1c1; stroke: var(--ink); stroke-width: 2.5; }
  .dw-hole { fill: #3a3f44; stroke: var(--ink); stroke-width: 2; }
  .dw-board { fill: #cbb48f; stroke: #6b5a3d; stroke-width: 3; stroke-linejoin: round; }
  .dw-gma { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 10 7; }
  .dw-dim line { stroke: var(--muted); stroke-width: 2; }
  .dw-dim text, .dw-cap { font: 600 24px var(--body); fill: var(--ink); }

  /* Spec table: ruled rows, tabular figures, the active row in latch amber */
  .spec { container-type: inline-size; }
  .spec-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--surface); }
  .spec-t caption { text-align: left; font-weight: 600; padding: 12px 14px; background: var(--ink); color: var(--surface); }
  .spec-t th, .spec-t td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
  .spec-t thead th { font-size: 14px; color: var(--muted); border-bottom: 2px solid var(--ink); font-weight: 600; }
  .spec-t tbody th { font-weight: 600; width: 30%; }
  .spec-t .spec-src { display: block; font-weight: 400; font-size: 14px; margin-top: 4px; }
  .spec-t .spec-src a { color: inherit; }
  .spec-t .spec-n { width: 4em; text-align: center; }
  .spec-t tbody tr { outline: none; }
  .spec-t tbody tr:hover, .spec-t tbody tr:focus-visible { background: #efe7d6; }
  .spec-t tbody tr.is-key th { box-shadow: inset 5px 0 0 var(--accent); }
  .spec-note { margin-top: 10px; }
  @container (max-width: 620px) {
    .spec-t thead { display: none; }
    .spec-t, .spec-t tbody, .spec-t tr, .spec-t th, .spec-t td { display: block; width: 100%; }
    .spec-t tbody tr { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
    .spec-t tbody th, .spec-t td { padding: 2px 0; border: 0; }
    .spec-t tbody th { width: auto; }
    .spec-t td::before { content: attr(data-h) ': '; color: var(--muted); font-size: 14px; }
    .spec-t tbody tr.is-key { box-shadow: inset 5px 0 0 var(--accent); }
    .spec-t tbody tr.is-key th { box-shadow: none; }
  }

  /* Plain data tables that scroll on a phone, with a visible cue */
  .tbl-scroll { overflow-x: auto; background: var(--surface); border-radius: var(--radius); }
  .tbl-scroll table { width: 100%; border-collapse: collapse; min-width: 560px; }
  .tbl-scroll table.tbl-narrow { min-width: 0; }
  .tbl-scroll th, .tbl-scroll td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .tbl-scroll thead th { border-bottom: 2px solid var(--ink); font-size: 14px; color: var(--muted); }
  .tbl-scroll th[scope='row'] { white-space: nowrap; }
  .num { font-variant-numeric: tabular-nums; }
  .nb { white-space: nowrap; }
  @media (max-width: 620px) { .tbl-scroll { background: linear-gradient(to left, rgb(28 31 34 / .12), transparent 24px) right / 24px 100% no-repeat, var(--surface); } }

  /* Short quote ask */
  .qa { background: var(--surface); padding: var(--s3); border-radius: var(--radius); border-top: 4px solid var(--ink); }
  .qa-title { font-family: var(--head); font-size: var(--t-1); line-height: 1.2; margin-bottom: var(--s2); }
  .qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .qa-f { display: grid; gap: 4px; font-size: 15px; font-weight: 600; }
  .qa-f input, .qa-f select { width: 100%; min-height: 46px; padding: 8px 10px; border: 2px solid var(--muted); border-radius: var(--radius); background: #fff; font-weight: 400; }
  .qa-f input:focus, .qa-f select:focus { border-color: var(--ink); outline: 3px solid var(--accent); outline-offset: 0; }
  .qa .btn-quote { margin-top: var(--s2); }
  .qa-next { width: 100%; }
  .qa-step2 { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--rule); display: grid; gap: 12px; }
  .qa-step2 .btn-quote { width: 100%; margin-top: 4px; }
  .qa-type { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .qa-type legend { font-weight: 600; font-size: 15px; margin-bottom: 6px; padding: 0; }
  .qa-radio { display: flex; align-items: center; gap: 8px; min-height: 40px; }
  .qa-radio input { width: 20px; height: 20px; flex: none; accent-color: var(--ink); }
  .qa-note, .lead-note { font-size: 14px; color: var(--muted); margin-top: 10px; }
  .qa .lf-error { color: #9b1c1c; font-size: 14px; margin: 2px 0 0; }
  .qa .lf-status:not(:empty) { margin-top: 12px; padding: 12px; background: #fff; border-left: 5px solid var(--accent); }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .qa-open { display: none; width: 100%; }
  .noscript { font-size: 15px; margin-top: 8px; }
  @container (max-width: 380px) { .qa-grid { grid-template-columns: 1fr; } }
  .prod-ask, .hero-panel { container-type: inline-size; }

  /* Rows (hubs): full-width rows, not cards */
  .rows { margin-top: var(--s4); border-top: 2px solid var(--ink); }
  .row { border-bottom: 1px solid var(--rule); }
  .row-link { display: grid; grid-template-columns: 300px 1fr; gap: var(--s4); align-items: center; padding: var(--s3) 0; text-decoration: none; }
  .row-media figcaption { display: none; }
  .row-media img, .row-media svg { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
  .row-text { display: grid; gap: 6px; }
  .row-name { font-family: var(--head); font-size: var(--t-2); line-height: 1.15; }
  .row-lines { color: var(--muted); max-width: 60ch; }
  .row-go { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .row-link:hover .row-name { text-decoration: underline; }
  @media (max-width: 720px) { .row-link { grid-template-columns: 1fr; gap: var(--s2); } }

  /* Related links, ask line */
  .related { margin-top: var(--s6); border-top: 2px solid var(--ink); padding-top: var(--s2); }
  .related h2 { font-size: var(--t-1); margin: 0 0 var(--s2); }
  .related ul { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; list-style: none; }
  .ask-line { margin-top: var(--s5); padding: var(--s3); background: var(--surface); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; border-radius: var(--radius); }

  .faq dt { font-family: var(--head); font-size: var(--t-1); margin-top: var(--s3); }
  .faq dd { margin: 6px 0 0; max-width: 68ch; }
  .lede { font-size: var(--t-1); line-height: 1.45; max-width: 60ch; }

  /* Maps */
  .usmap { width: 100%; height: auto; }
  .m-nation { fill: #d9d0bf; }
  .m-off { fill: #d9d0bf; }
  .m-on { fill: var(--ink); }
  a:hover .m-on, a:focus .m-on { fill: #555c63; }
  .m-border { fill: none; stroke: var(--bg); stroke-width: 1.2; }
  .m-route { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
  .m-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
  .locator { width: 200px; height: auto; background: var(--surface); padding: 12px; border-radius: var(--radius); }
  .locator .m-dot { stroke-width: 2; }

  /* Footer: a charcoal band */
  .site-footer { background: var(--ink); color: #e8e0cf; padding: var(--s6) 0 var(--s3); }
  .site-footer a { color: #e8e0cf; }
  .site-footer .mk-t { fill: #e8e0cf; stroke: #e8e0cf; }
  .ft { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s4); }
  .ft h2 { font-size: var(--t-1); margin: 0 0 var(--s2); color: #fff; }
  .ft ul { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 15px; }
  .ft-brand p { margin-top: var(--s2); max-width: 32ch; color: #cfc7b6; }
  .ft-base { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s2); border-top: 1px solid #3a3f44; font-size: 14px; color: #a9a294; }
  @media (max-width: 960px) { .ft { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }

  @media (max-width: 1020px) {
    .nav { display: none; }
    .phone-menu { display: block; }
    .hd { gap: var(--s2); }
    .hd-quote { margin-left: auto; }
    .phone-menu > summary { list-style: none; cursor: pointer; padding: 12px 14px; border: 2px solid var(--ink); border-radius: var(--radius); font-weight: 600; line-height: 1; }
    .phone-menu > summary::-webkit-details-marker { display: none; }
    .phone-menu[open] > summary { background: var(--ink); color: var(--surface); position: relative; z-index: 41; }
    .pm-panel { position: fixed; inset: 64px 0 0 0; background: var(--bg); z-index: 40; overflow-y: auto; padding: var(--s3) var(--gutter) var(--s6); border-top: 2px solid var(--ink); }
    .pm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); max-width: 900px; }
    .pm-cols h2 { font-size: var(--t-1); margin: 0 0 var(--s1); }
    .pm-cols h2 + h2 { margin-top: var(--s2); }
    .pm-cols ul { list-style: none; padding: 0; display: grid; gap: 2px; }
    .pm-cols a { display: block; padding: 6px 0; text-decoration: none; }
  }
  @media (max-width: 560px) {
    .mark:not(.mark-sm) { display: none; }
    .mark-sm { display: block; }
    .pm-cols { grid-template-columns: 1fr; gap: var(--s3); }
    .hd-quote { padding: 12px 14px; font-size: 16px; }
    .site-footer .mark:not(.mark-sm) { display: block; width: 200px; }
  }
}

@layer pages {
  /* Home: photograph across the top two thirds, the ask panel over its lower left edge */
  .hero { position: relative; }
  .hero-photo { height: min(62vh, 620px); min-height: 380px; overflow: hidden; background: #cfc6b4; }
  .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
  .hero-band { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); margin-top: -240px; position: relative; }
  .hero-panel { grid-column: 1 / span 6; background: var(--surface); padding: var(--s4); border-radius: var(--radius); box-shadow: 0 18px 40px rgb(28 31 34 / 0.22); align-self: start; }
  .hero-panel h1 { margin-bottom: var(--s2); }
  .hero-line { font-size: var(--t-1); line-height: 1.4; color: var(--muted); margin-bottom: var(--s3); }
  .hero-panel .qa { padding: 0; background: none; border: 0; }
  .hero-panel .qa-title { font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--muted); }
  .hero-side { grid-column: 7 / span 6; padding-top: 256px; }
  .hero-cap { font-size: 14px; color: var(--muted); margin-bottom: var(--s3); }
  .hero-cap a { color: var(--muted); }
  .families { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
  .families a { display: grid; gap: 6px; text-decoration: none; }
  .families figure figcaption { display: none; }
  .families img, .families svg { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
  .families .drawing svg { object-fit: contain; }
  .fam-name { font-family: var(--head); font-size: 20px; line-height: 1.15; }
  .fam-line { font-size: 15px; color: var(--muted); line-height: 1.35; }
  .families a:hover .fam-name { text-decoration: underline; }
  .home-intro { margin-top: var(--s6); display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: start; }
  .tagline { font-family: var(--head); font-size: var(--t-3); line-height: 1.15; }
  .home-intro .tagline + p { margin-top: 0; }
  .home-split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: center; }
  .home-split .drawing { margin-top: var(--s5); }
  .who { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
  @media (max-width: 1100px) { .who { grid-template-columns: 1fr 1fr; } }
  .who img { aspect-ratio: 3 / 2; object-fit: cover; }
  .who .who-text h3:first-child { margin-top: 0; }
  .home-ask { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); margin-top: var(--s6); padding-top: var(--s5); border-top: 2px solid var(--ink); }
  .home-ask h2 { margin-top: 0; }

  @media (max-width: 1020px) {
    .hero-band { margin-top: -120px; }
    .hero-panel { grid-column: 1 / span 8; }
    .hero-side { grid-column: 1 / -1; padding-top: 0; }
  }
  @media (max-width: 720px) {
    .hero-photo { height: 45vh; min-height: 260px; }
    .hero-band { display: block; margin-top: 0; padding: 0; }
    .hero-panel { box-shadow: none; border-radius: 0; padding: var(--s3) var(--gutter); }
    .hero-side { padding: var(--s3) var(--gutter) 0; }
    .families { grid-template-columns: 1fr; gap: var(--s3); }
    .families a { grid-template-columns: 120px 1fr; grid-template-rows: auto 1fr; column-gap: var(--s2); align-items: start; }
    .families a > :first-child { grid-row: 1 / span 2; }
    .home-intro, .home-split, .who, .home-ask { grid-template-columns: 1fr; }
    .qa-collapsible:not(.open) .qa-fields { display: none; }
    .qa-collapsible:not(.open) .qa-open { display: block; }
  }

  /* Product pages: the container first, then the spec table with the ask beside it */
  .prod-top { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: end; margin-top: var(--s3); }
  .prod-media { display: grid; gap: var(--s2); }
  .prod-media:has(.photo) { grid-template-columns: 1fr 1fr; align-items: start; }
  .prod-head h1 { margin-bottom: var(--s2); }
  .prod-spec { display: grid; grid-template-columns: 8fr 4fr; gap: var(--s4); align-items: start; }
  .prod-ask { position: sticky; top: 88px; margin-top: var(--s5); }
  .prod-cols { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); }
  .fp-list { padding-left: 1.2em; }
  .fp-list li { margin: 4px 0; }
  .opts dt { font-weight: 600; margin-top: var(--s2); }
  .opts dd { margin: 4px 0 0; color: var(--muted); }
  .pswp-link { display: block; text-decoration: none; cursor: zoom-in; }
  @media (max-width: 900px) {
    .prod-top, .prod-spec, .prod-cols { grid-template-columns: 1fr; }
    .prod-head { order: -1; }
    .prod-media:has(.photo) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1); }
    .prod-media:has(.photo) figcaption { font-size: 13px; }
    .prod-ask { position: static; margin-top: var(--s3); }
  }

  /* Hubs */
  .hub-head { margin-top: var(--s3); }
  .hub-head h1 { margin-bottom: var(--s2); }

  /* Size pages */
  .size-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s3); align-items: start; }
  .heights { display: flex; flex-wrap: wrap; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--surface); }
  .heights li { flex: 1 0 auto; text-align: center; padding: 12px 18px; border-right: 1px solid var(--rule); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
  .heights li span { font-weight: 400; color: var(--muted); }
  .size-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: start; }
  .types-list { border-top: 2px solid var(--ink); }
  .types-list li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .types-list b { font-family: var(--head); font-weight: 400; font-size: var(--t-1); display: block; }
  @media (max-width: 900px) { .size-top, .size-grid { grid-template-columns: 1fr; } }

  /* Industry pages */
  .ind-band { margin-top: var(--s3); }
  .ind-band .photo img, .ind-band .drawing svg { max-height: 520px; object-fit: cover; width: 100%; }
  .ind-head { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); margin-top: var(--s4); align-items: start; }
  .ind-head h1 { margin: 0; }
  .suit { border-top: 2px solid var(--ink); }
  .suit li { display: grid; grid-template-columns: 220px 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); align-items: start; }
  .suit .drawing figcaption, .suit .photo figcaption { display: none; }
  .suit h3 { margin-top: 0; }
  .ind-ask { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); margin-top: var(--s5); }
  .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
  @media (max-width: 900px) { .ind-head, .ind-ask { grid-template-columns: 1fr; } .suit li { grid-template-columns: 1fr; } .strip { grid-template-columns: 1fr; } }

  /* Area pages */
  .area-top { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; margin-top: var(--s3); }
  .area-top > .locator, .area-top > figure, .area-top > svg { margin-top: 10px; }
  .area-top h1 { margin-bottom: var(--s2); }
  .area-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: start; }
  .place-list { font-variant-numeric: tabular-nums; }
  .areas-map { display: grid; grid-template-columns: 8fr 4fr; gap: var(--s4); align-items: start; margin-top: var(--s4); }
  .corridor-top { grid-template-columns: 5fr 7fr; }
  .corridor-top > figure { position: sticky; top: var(--s3); }
  @media (max-width: 900px) { .corridor-top > figure { position: static; } }
  .areas-list { columns: 2; column-gap: var(--s3); padding: 0; list-style: none; }
  .areas-list li { break-inside: avoid; padding: 4px 0; }
  @media (max-width: 900px) { .area-top { grid-template-columns: 1fr; } .area-grid, .areas-map { grid-template-columns: 1fr; } .locator { width: 160px; } }

  /* Guides: one 680 px column */
  .article { max-width: calc(680px + 2 * var(--gutter)); }
  .article h1 { margin: var(--s3) 0 var(--s3); }
  .article .answer { font-size: var(--t-1); line-height: 1.45; }
  .article figure { margin: var(--s4) 0; }
  .article ul, .article ol { padding-left: 1.2em; }
  .article li + li { margin-top: 6px; }
  .article .meta { font-size: 14px; color: var(--muted); margin-top: var(--s4); }

  /* Contact: the form first */
  .contact-top { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); margin-top: var(--s3); align-items: start; }
  .contact-top h1 { margin-bottom: var(--s2); }
  @media (max-width: 900px) { .contact-top, .home-ask { grid-template-columns: 1fr; } }
}

/* 1DB's rendered form. Unlayered on purpose: the script's own styles are unlayered too, and an
   unlayered rule beats any layered one, so these must sit outside the layers to win. */
lead-form { display: block; background: var(--surface); color: var(--ink); padding: 24px; border-radius: 2px; border-top: 4px solid var(--ink); --lf-gap: 14px; --lf-radius: 2px; --lf-accent: #1c1f22; --lf-error: #9b1c1c; }
lead-form .lf-title { font-family: 'Fjalla One', sans-serif; font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0 0 12px; }
lead-form .lf-progress { font-size: 14px; color: #464b50; }
lead-form .lf-label, lead-form legend { font-weight: 600; font-size: 15px; }
lead-form .lf-input { width: 100%; min-height: 46px; padding: 8px 10px; border: 2px solid #464b50; border-radius: 2px; background: #fff; color: #1c1f22; font: inherit; }
lead-form .lf-input:focus { border-color: #1c1f22; outline: 3px solid #c98a00; outline-offset: 0; }
lead-form .lf-group { border: 0; padding: 0; margin: 0; }
lead-form .lf-check-label { display: flex; align-items: center; gap: 8px; min-height: 40px; }
lead-form .lf-check, lead-form input[type='radio'], lead-form input[type='checkbox'] { width: 20px; height: 20px; flex: none; accent-color: #1c1f22; }
lead-form .lf-button { background: #c98a00; color: #1c1f22; font: 600 17px/1 'Radio Canada', sans-serif; padding: 15px 22px; border: 0; border-radius: 2px; cursor: pointer; }
lead-form .lf-button:hover { background: #b37b00; }
lead-form .lf-secondary { background: transparent; color: #1c1f22; border: 2px solid #1c1f22; font: 600 16px/1 'Radio Canada', sans-serif; padding: 12px 18px; border-radius: 2px; cursor: pointer; }
lead-form .lf-error { color: #9b1c1c; font-size: 14px; }
lead-form .lf-status, lead-form .lf-success { font-size: 16px; }
lead-form .lf-success { background: #fff; border-left: 5px solid #c98a00; padding: 14px; }
@media (max-width: 720px) { lead-form { padding: 18px 16px; } }
p + lead-form, h2 + lead-form { margin-top: 24px; }

@layer pages {
  .row-link.row-text-only { grid-template-columns: 1fr; padding: var(--s2) 0; }
  .size-drawing { margin-top: var(--s3); }
  .ind-band.is-drawing { max-width: 760px; }
  .article .drawing svg { max-width: 560px; }
}

@layer pages {
  .facts { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; border-top: 2px solid var(--ink); }
  .facts dt, .facts dd { padding: 10px 0; border-bottom: 1px solid var(--rule); margin: 0; }
  .facts dt { font-weight: 600; padding-right: var(--s2); }
  .area-photo { margin-top: var(--s4); }
  .area-photo img { max-height: 560px; object-fit: cover; }
  .tbl-note { padding: 8px 14px; margin: 0; }
  .credits li + li { margin-top: 6px; }
  @media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts dt { border-bottom: 0; padding-bottom: 0; } }
}

@layer components {
  .includes { margin-top: var(--s5); }
  .includes h2 { font-size: var(--t-1); margin-top: 0; }
  .includes dl { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; border-top: 2px solid var(--ink); margin: 0; }
  .includes dt, .includes dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .includes dt { font-weight: 600; padding-right: var(--s2); }
  @media (max-width: 560px) { .includes dl { grid-template-columns: 1fr; } .includes dt { border-bottom: 0; padding-bottom: 0; } }
}

@layer components {
  .terms { margin-top: var(--s5); }
  .terms h2 { font-size: var(--t-1); }
  .terms dt { font-weight: 600; margin-top: var(--s2); }
  .terms dd { margin: 2px 0 0; color: var(--muted); }
}

@layer pages {
  .locator-city .m-border, .locator-city .m-ring, .locator-city .m-dot { vector-effect: non-scaling-stroke; }
  .locator-city .m-border { stroke-width: 1.5; }
  .m-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; }
  .use-list { margin: 0 0 16px; border-top: 2px solid var(--ink); }
  .use-list dt { font-weight: 600; padding-top: 10px; }
  .use-list dd { margin: 2px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--rule); color: var(--muted); }
  .qa-context { margin: 0 0 12px; font-weight: 600; }
}

@layer base {
  /* One vertical rhythm between blocks of running text, lists, tables and figures */
  :where(p, ul, ol, dl, figure, .spec, .tbl-scroll, .includes) + :where(p, ul, ol, dl, figure, .spec, .tbl-scroll) { margin-top: var(--s2); }
  .spec + p, .spec-note + p { margin-top: var(--s3); }
}

@layer pages {
  /* Home: a charcoal sheet with the ask set as ruled rows, the photograph bleeding off the right */
  .hero2 { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 520px) minmax(0, 680px) minmax(var(--gutter), 1fr); background: var(--ink); color: var(--surface); min-height: min(78vh, 760px); }
  .hero2-sheet { grid-column: 2; grid-row: 1; padding: var(--s6) var(--s4) var(--s5) 0; align-self: center; }
  .hero2-photo { grid-column: 3 / -1; grid-row: 1; position: relative; min-height: 420px; }
  .hero2-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }
  .hero2-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 16px; font-size: 13px; color: #e8e0cf; background: linear-gradient(transparent, rgb(28 31 34 / .78)); }
  .hero2 h1 { color: #f5f1e8; margin-bottom: var(--s2); }
  .hero2 .hero-line { color: #cfc7b6; margin-bottom: var(--s3); }
  .hero2 .qa { background: none; padding: 0; border: 0; border-top: 2px solid var(--accent); border-radius: 0; }
  .hero2 .qa-title { font-family: var(--body); font-size: 14px; font-weight: 600; color: #a9a294; margin: 10px 0 4px; }
  .hero2 .qa-grid { grid-template-columns: 1fr; gap: 0; }
  .hero2 .qa-f { grid-template-columns: 10em 1fr; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #3a3f44; color: #e8e0cf; }
  .hero2 .qa-f input, .hero2 .qa-f select { border-color: #5b6167; color: var(--ink); }
  .hero2 .btn-quote { width: 100%; }
  .hero2 .qa-step2 { border-top-color: #3a3f44; color: #e8e0cf; }
  .hero2 .qa-note, .hero2 .qa-type legend { color: #cfc7b6; }
  .hero2 .lf-status:not(:empty) { color: var(--ink); }
  .home-families .families { margin-top: var(--s3); }
  .home-families .families img { aspect-ratio: 4 / 3; }
  .home-families .fam-name { margin-top: 8px; }
  .fp-rows { list-style: none; padding: 0; border-top: 2px solid var(--ink); }
  .fp-rows li { display: grid; grid-template-columns: 10em 14em 1fr; gap: 4px 24px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .fp-rows a { font-weight: 600; }
  .fp-h { font-variant-numeric: tabular-nums; }
  .fp-u { color: var(--muted); }
  @media (max-width: 900px) {
    .hero2 { display: block; min-height: 0; }
    .hero2-photo { margin: 0; height: 45vh; min-height: 260px; }
    .hero2-sheet { padding: var(--s3) var(--gutter) var(--s4); }
    .fp-rows li { grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) { .hero2 .qa-f { grid-template-columns: 1fr; gap: 4px; } }

  /* Narrow quote panels: one field per row so options aren't cut off */
  .prod-ask .qa-grid, .ind-ask .qa-grid { grid-template-columns: 1fr; }
  .qa-f select { text-overflow: ellipsis; }

  /* Spec table caption: always the table's full width */
  @container (max-width: 620px) { .spec-t caption { display: block; width: 100%; box-sizing: border-box; } }

  /* Footer: a ribbed container-wall texture under a dark gradient (no lettering) */
  .site-footer.has-texture { background: linear-gradient(rgb(28 31 34 / .55), rgb(28 31 34 / .82)), url('/img/gen-moulded-wall.webp') center 30% / cover, var(--ink); }
}

@layer pages {
  /* The quote button carries a latch: a short charcoal tab, as on the containers' folding walls */
  .btn-quote { position: relative; padding-left: 30px; box-shadow: inset 0 -3px 0 rgb(28 31 34 / .25); }
  .btn-quote::before { content: ''; position: absolute; left: 12px; top: 50%; width: 6px; height: 18px; margin-top: -9px; background: var(--ink); border-radius: 1px; }
  .size-media.with-photo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); align-items: start; }
  .size-media.with-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
}