:root {
    --ground: #fbfaf7;
    --surface: #ffffff;
    --tint: #f3f0ea;
    --ink: #23211e;
    --muted: #6b6760;
    --faint: #98938a;
    --rule: #e7e3dc;
    --yellow: #fac719;          /* sampled from the logo */
    --yellow-ink: var(--ink);   /* text on yellow; white is unreadable on it */
    --zaxx: #b4232a;
    --serif: "Libre Caslon Display", "Didot", "Bodoni 72", Georgia, serif;
    --sans: "Jost", "Futura", "Century Gothic", "Segoe UI", sans-serif;
    --gutter: clamp(18px, 4.5vw, 64px);
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 17.5px; line-height: 1.7; padding-inline: var(--gutter); }
  a { color: var(--ink); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .wrap { max-width: 1200px; margin: 0 auto; }
  .bleed { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; line-height: 1.08; }
  p { margin: 0; }
  img { display: block; max-width: 100%; height: auto; }
  /* Yellow text is unreadable on the light ground, so accent text takes the
     logo's own pairing: yellow on a black plate. */
  .label { width: fit-content; font-family: var(--sans); font-weight: 500; font-size: 11.5px; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase; color: var(--yellow); background: var(--ink); padding: 6px 8px 6px 11px; }
  .rule-yellow { width: 44px; height: 3px; background: var(--yellow); border: 0; margin: 0; }

  /* figures with provenance */
  .fig { position: relative; margin: 0; overflow: hidden; background: var(--tint); }
  .fig img { width: 100%; height: 100%; object-fit: cover; }
  .fig .tag { position: absolute; right: 10px; bottom: 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: #fff; background: rgba(20,18,16,.55); padding: 4px 9px; }
  .fig .tag.zaxx { background: var(--yellow); color: var(--yellow-ink); }

  /* header */
  .top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); padding-block: 16px; }
  .top .wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
  .brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
  .brand img { height: 46px; width: auto; }
  .nav { display: flex; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }
  .nav a { color: var(--muted); text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
  .nav a:hover { color: var(--ink); }
  .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--yellow); }
  .top-call { display: flex; align-items: center; gap: 16px; }
  .top-call .phone { font-size: 14.5px; letter-spacing: .06em; color: var(--ink); text-decoration: none; white-space: nowrap; font-weight: 400; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 500 12.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 16px 28px; text-decoration: none; cursor: pointer; border: 1px solid var(--yellow); transition: background .25s, color .25s, border-color .25s; }
  .btn-yellow { background: var(--yellow); color: var(--yellow-ink); }
  .btn-yellow:hover { background: var(--ink); border-color: var(--ink); color: var(--yellow); }
  .btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
  .btn-line:hover { background: var(--ink); color: var(--ground); }
  .btn-sm { padding: 12px 18px; font-size: 11.5px; }

  section { padding-block: clamp(72px, 10vw, 136px); }
  .rule-top { border-top: 1px solid var(--rule); }
  .tinted { background: var(--tint); }
  .head { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 60ch; }
  .head.center { margin-inline: auto; text-align: center; justify-items: center; }
  .head h2 { font-size: clamp(36px, 4.6vw, 60px); }
  .head p:not(.label) { color: var(--muted); font-size: 18.5px; }

  /* hero */
  .hero { padding-block: clamp(40px, 6vw, 80px) clamp(72px, 9vw, 120px); }
  .hero .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
  @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }
  .hero-copy { display: grid; gap: 26px; }
  .hero h1 { font-size: clamp(52px, 7.2vw, 104px); line-height: .98; letter-spacing: -.01em; }
  .hero h1 em { font-style: italic; background: linear-gradient(transparent 50%, var(--yellow) 50% 79%, transparent 79%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .04em .1em; }
  .hero .lead { font-size: clamp(18.5px, 1.6vw, 21px); color: var(--muted); max-width: 44ch; }
  .actions { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-img { position: relative; }
  .hero-img .fig { aspect-ratio: 4 / 5; }
  .plate { position: absolute; left: clamp(-40px, -3vw, -12px); bottom: 36px; background: var(--surface); border: 1px solid var(--rule); padding: 22px 24px; display: grid; grid-template-columns: repeat(2, auto); gap: 14px 30px; box-shadow: 0 24px 50px -30px rgba(40,30,20,.35); }
  .plate div { display: grid; gap: 3px; }
  .plate span { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
  .plate b { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.15; }
  @media (max-width: 900px) { .plate { left: 12px; } }
  @media (max-width: 480px) { .plate { position: static; margin-top: 14px; } }

  .press { border-block: 1px solid var(--rule); padding-block: 26px; text-align: center; }
  .press .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 40px; }
  .press b { font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--ink); }
  .press i { font-style: italic; }
  .press .label { color: var(--faint); background: none; padding: 0; }

  /* feature split */
  .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
  .feature.flip > :first-child { order: 2; }
  @media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature.flip > :first-child { order: 0; } }
  .feature .fig { aspect-ratio: 5 / 4; }
  .points { display: grid; gap: 28px; margin-top: 8px; }
  .points div { display: grid; gap: 6px; padding-left: 22px; border-left: 2px solid var(--yellow); }
  .points h3 { font-size: 26px; }
  .points p { color: var(--muted); }

  /* rooms */
  .rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
  @media (max-width: 860px) { .rooms { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .rooms { grid-template-columns: 1fr; } }
  .room { display: grid; gap: 14px; text-decoration: none; color: var(--ink); }
  .room .fig { aspect-ratio: 4 / 3; }
  .room .fig img { transition: transform .8s ease; }
  .room:hover .fig img { transform: scale(1.04); }
  @media (prefers-reduced-motion: reduce) { .room .fig img { transition: none; } }
  .room h3 { font-size: 25px; }
  .room p { color: var(--muted); font-size: 16px; }

  /* mosaic of real work */
  .mosaic { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-auto-rows: minmax(180px, auto); gap: 14px; }
  .mosaic .fig:first-child { grid-row: span 2; }
  .mosaic .fig { min-height: 220px; }
  @media (max-width: 820px) { .mosaic { grid-template-columns: 1fr 1fr; } .mosaic .fig:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 3/2; } }

  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
  .step { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 2px solid var(--yellow); }
  .step .n { width: fit-content; font-family: var(--serif); font-size: 16px; letter-spacing: .1em; color: var(--yellow); background: var(--ink); padding: 2px 8px; }
  .step h3 { font-size: 26px; }
  .step p { color: var(--muted); font-size: 16px; }

  .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); }
  @media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }
  blockquote { margin: 0; display: grid; gap: 18px; align-content: start; }
  blockquote p { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; }
  blockquote cite { width: fit-content; font-style: normal; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--yellow); background: var(--ink); padding: 6px 8px 6px 11px; font-weight: 500; }

  .shows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (max-width: 1000px) { .shows { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .shows { grid-template-columns: 1fr; } }
  .show { background: var(--surface); padding: 28px 24px; display: grid; gap: 8px; align-content: start; }
  .show h3 { font-size: 26px; }
  .show .main { width: fit-content; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); background: var(--ink); padding: 4px 7px 4px 9px; font-weight: 500; }
  .show address { font-style: normal; color: var(--muted); font-size: 15.5px; }
  .show .tel { color: var(--ink); text-decoration: none; letter-spacing: .05em; font-weight: 400; }

  /* Closing band: the photo stays bright, and the words sit on a white card
     rather than under a dark wash. */
  .cta { position: relative; color: var(--ink); padding-block: clamp(80px, 11vw, 150px); overflow: hidden; }
  .cta .bg { position: absolute; inset: 0; }
  .cta .bg img { width: 100%; height: 100%; object-fit: cover; }
  .cta .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(251,250,247,.55), rgba(251,250,247,0) 70%); }
  .cta .wrap { position: relative; display: grid; gap: 22px; justify-items: start; background: rgba(255,255,255,.94); max-width: 620px; margin-left: max(0px, calc((100% - 1200px) / 2)); padding: clamp(28px, 4vw, 52px); border: 1px solid var(--rule); box-shadow: 0 30px 60px -36px rgba(40,30,20,.35); }
  .cta h2 { font-size: clamp(32px, 4vw, 52px); max-width: 16ch; }
  .cta .tag { position: absolute; right: 12px; bottom: 12px; z-index: 1; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(20,18,16,.45); padding: 4px 9px; }

  /* page banner */
  .banner { margin-top: 0; }
  .banner .fig { aspect-ratio: 21 / 8; max-height: 520px; }
  @media (max-width: 700px) { .banner .fig { aspect-ratio: 4 / 3; } }
  .page-intro { padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 72px); }
  .page-intro .head { margin-bottom: 0; }
  .page-intro h1 { font-size: clamp(46px, 6.4vw, 88px); line-height: 1; }

  .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }
  .compare div { background: var(--surface); padding: 34px 30px; display: grid; gap: 10px; }
  .compare b { width: fit-content; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 58px); line-height: 1; background: linear-gradient(transparent 60%, var(--yellow) 60% 92%, transparent 92%); padding-inline: .04em .08em; }
  .compare p { color: var(--muted); }

  .lines { display: grid; gap: clamp(48px, 7vw, 88px); }
  .line { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
  .line:nth-child(even) > .fig { order: 2; }
  @media (max-width: 760px) { .line { grid-template-columns: 1fr; } .line:nth-child(even) > .fig { order: 0; } }
  .line .fig { aspect-ratio: 3 / 2; }
  .line div.txt { display: grid; gap: 14px; }
  .line h3 { font-size: clamp(30px, 3vw, 40px); }
  .line p:not(.label) { color: var(--muted); }

  .prose { display: grid; gap: 18px; color: var(--muted); max-width: 60ch; }
  .prose strong { color: var(--ink); font-weight: 500; }

  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 820px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .gallery { grid-template-columns: 1fr; } }
  .gallery figure { margin: 0; display: grid; gap: 10px; }
  .gallery .fig, .ph { aspect-ratio: 4 / 3; }
  .ph { border: 1px solid var(--rule); background: var(--tint); display: grid; place-items: center; text-align: center; padding: 16px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
  .gallery figcaption { font-family: var(--serif); font-size: 21px; }
  .gallery figcaption small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; width: fit-content; color: var(--yellow); background: var(--ink); padding: 3px 7px 3px 9px; margin-top: 8px; }

  .show-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); }
  .show-block:nth-of-type(even) > .fig { order: 2; }
  @media (max-width: 760px) { .show-block { grid-template-columns: 1fr; } .show-block:nth-of-type(even) > .fig { order: 0; } }
  .show-block .fig { aspect-ratio: 3 / 2; }
  .show-block .txt { display: grid; gap: 14px; }
  .show-block h2 { font-size: clamp(32px, 3.4vw, 44px); }
  .show-block dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; }
  .show-block dt { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding-top: 5px; }
  .show-block dd { margin: 0; }
  .show-block dd a { color: var(--ink); text-decoration: none; }
  .show-block p:not(.label) { color: var(--muted); }

  .reasons { display: grid; gap: 0; border-top: 1px solid var(--rule); counter-reset: r; }
  .reason { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding-block: 26px; border-bottom: 1px solid var(--rule); }
  .reason::before { counter-increment: r; content: "0" counter(r); width: fit-content; height: fit-content; margin-top: 4px; font-family: var(--serif); font-size: 18px; color: var(--yellow); background: var(--ink); padding: 2px 8px; }
  .reason h3 { font-size: 26px; margin-bottom: 6px; }
  .reason p { color: var(--muted); }

  .deal { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface); border: 1px solid var(--rule); }
  @media (max-width: 760px) { .deal { grid-template-columns: 1fr; } }
  .deal .fig { min-height: 320px; }
  .deal .txt { padding: clamp(28px, 4vw, 56px); display: grid; gap: 18px; align-content: center; }
  .deal b { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; }
  .deal p { color: var(--muted); }

  .faq { border-top: 1px solid var(--rule); max-width: 880px; }
  .faq details { border-bottom: 1px solid var(--rule); padding-block: 22px; }
  .faq summary { cursor: pointer; font-family: var(--serif); font-size: 25px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-weight: 400; font-size: 20px; line-height: 1; color: var(--yellow-ink); background: var(--yellow); }
  .faq details[open] summary::after { content: "–"; }
  .faq details p { color: var(--muted); margin-top: 12px; max-width: 64ch; }

  .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
  @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
  .contact-grid .fig { aspect-ratio: 4 / 3; margin-bottom: 28px; }
  form { display: grid; gap: 20px; background: var(--surface); border: 1px solid var(--rule); padding: clamp(24px, 3.5vw, 44px); }
  label { display: grid; gap: 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
  label .req { color: var(--ink); }
  label .opt { text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 300; margin-left: 2px; }
  .form-note { font-size: 14px; color: var(--muted); }
  input, select, textarea { font: 300 17px var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 10px 0; width: 100%; letter-spacing: normal; text-transform: none; }
  select { background: var(--surface); }
  input:focus, select:focus, textarea:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); outline: none; }
  textarea { min-height: 96px; resize: vertical; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
  .err { color: var(--zaxx); font-size: 15px; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .sent { color: var(--ink); font-size: 15px; border-left: 3px solid var(--yellow); padding-left: 12px; }
  .phones { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .phones div { display: grid; gap: 2px; }
  .phones span { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
  .phones a { color: var(--ink); text-decoration: none; font-size: 18px; }

  footer { padding-block: 56px 120px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--muted); }
  footer .wrap { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px; }
  @media (max-width: 900px) { footer .wrap { grid-template-columns: 1fr 1fr; } }
  footer .brandline { height: 56px; width: auto; margin-bottom: 14px; }
  footer strong { color: var(--ink); font-weight: 500; }
  footer a { color: var(--muted); }
  .social { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 6px; }
  .social .label { color: var(--faint); background: none; padding: 0; margin-right: 4px; }
  .social a { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }
  .social a span.ico { width: 38px; height: 38px; border: 1px solid var(--rule); border-radius: 50%; display: grid; place-items: center; transition: border-color .2s, background .2s; }
  .social a svg { width: 16px; height: 16px; fill: currentColor; }
  .social a:hover span.ico, .social a:focus-visible span.ico { border-color: var(--yellow); background: var(--yellow); }
  @media (max-width: 560px) { .social a .txt { display: none; } .social { gap: 12px; } }
  footer .note { grid-column: 1 / -1; font-size: 13px; color: var(--faint); border-top: 1px solid var(--rule); padding-top: 18px; }

  .steps-2 { grid-template-columns: 1fr 1fr; }
  @media (max-width: 560px) { .steps-2 { grid-template-columns: 1fr; } }

  /* Phones: a compact header. The menu folds behind a button, and the header
     "Plan my cabinets" button gives way to the call bar pinned at the bottom. */
  .menu-btn { display: none; font: 500 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--rule); padding: 10px 14px; cursor: pointer; }
  @media (max-width: 760px) {
    .top { padding-block: 12px; }
    .top .wrap { gap: 12px; }
    .menu-btn { display: inline-block; }
    .top-call { display: none; }
    .nav { display: none; width: 100%; flex-direction: column; gap: 0; padding-top: 8px; font-size: 13px; }
    .nav.open { display: flex; }
    .nav a { padding-block: 13px; border-bottom: 1px solid var(--rule); }
    .nav a[aria-current="page"] { border-bottom-color: var(--rule); color: var(--ink); box-shadow: inset 3px 0 0 var(--yellow); padding-left: 14px; }
    .brand img { height: 38px; }
  }
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--rule); }
  .callbar a { flex: 1; text-align: center; padding: 14px 10px; font: 500 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
  .callbar .c1 { background: var(--yellow); color: var(--yellow-ink); }
  .callbar .c2 { border: 1px solid var(--ink); color: var(--ink); }
  @media (max-width: 760px) { .callbar { display: flex; } .top-call .phone { display: none; } }

/* ───────────────────────── 12 Oct 2026: real pages + the quote form up top ───────────────────────── */

/* The quote form. Same card as the contact form, with the logo yellow across the top so it reads as
   the thing to do on the page. */
.qform { gap: 18px; border-top: 4px solid var(--yellow); box-shadow: 0 30px 60px -40px rgba(35, 33, 30, .45); }
.qform-h { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.08; margin: 0; }
.qform .form-note { margin-top: -6px; }
.qform .btn { width: 100%; }
.qform .or { font-size: 14.5px; color: var(--muted); text-align: center; }
.qform .or a { white-space: nowrap; font-weight: 400; }

/* Top of the home page and of every showroom and service page: words on the left, the form on the
   right. On a phone the form comes straight after the headline, before the rest of the words. */
.hero-q .wrap, .page-top .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
  grid-template-areas: "head form" "more form";
  column-gap: clamp(32px, 6vw, 88px); row-gap: 26px; align-items: start;
}
.top-head { grid-area: head; display: grid; gap: 22px; align-self: end; }
.top-more { grid-area: more; display: grid; gap: 26px; align-content: start; }
.hero-q .qform, .page-top .qform { grid-area: form; align-self: center; }
@media (max-width: 900px) {
  .hero-q .wrap, .page-top .wrap { grid-template-columns: 1fr; grid-template-areas: "head" "form" "more"; }
}
.hero-q { padding-block: clamp(32px, 5vw, 72px) clamp(40px, 5vw, 64px); }
.hero-q h1 { font-size: clamp(44px, 5.6vw, 84px); }
.page-top { padding-block: clamp(28px, 4vw, 60px) clamp(48px, 6vw, 88px); }
.page-top h1 { font-size: clamp(40px, 5vw, 70px); line-height: 1.02; }
.page-top .lead { font-size: clamp(18px, 1.5vw, 20px); color: var(--muted); max-width: 52ch; }

/* The four facts that used to sit on a plate over the hero photo. */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 16px 36px; justify-content: start; }
.facts li { display: grid; gap: 3px; }
.facts span { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.facts b { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.15; }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr 1fr; gap: 14px 18px; } }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); }
.crumbs [aria-current] { color: var(--ink); }

/* Name, address, phone on a showroom page. */
.nap { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; }
.nap dt { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding-top: 5px; }
.nap dd { margin: 0; }
.nap dd a { color: var(--ink); }
.nap .tel { font-family: var(--serif); font-size: 26px; line-height: 1.1; text-decoration: none; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { padding-left: 22px; border-left: 2px solid var(--yellow); color: var(--muted); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 16px; }
.split .prose { max-width: none; }

.near { color: var(--muted); max-width: 70ch; }
.near b { color: var(--ink); font-weight: 500; }

/* Showroom cards link to their own pages now. */
.show h3 a { color: inherit; text-decoration: none; }
.show h3 a:hover, .show h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.show .more, .show-block .more { width: fit-content; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.line h3 a { color: inherit; text-decoration: none; }
.line h3 a:hover { text-decoration: underline; text-decoration-color: var(--yellow); }

/* Footer: every page one tap from every other. */
footer strong a { color: var(--ink); text-decoration: none; }
footer strong a:hover { text-decoration: underline; text-decoration-color: var(--yellow); }
.explore { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 24px; border-top: 1px solid var(--rule); padding-top: 22px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.explore a { color: var(--ink); text-decoration: none; }
.explore a:hover { text-decoration: underline; text-decoration-color: var(--yellow); }

/* Phones: the form sits as high as it can, and stays compact so the button is close. */
@media (max-width: 520px) {
  .hero-q, .page-top { padding-top: 20px; }
  .hero-q .wrap, .page-top .wrap { row-gap: 20px; }
  .top-head { gap: 16px; }
  .hero-q h1 { font-size: 40px; }
  .page-top h1 { font-size: 36px; }
  .qform { gap: 14px; padding: 22px 20px 20px; }
  .qform > .label { display: none; }
  .qform .row2 { gap: 14px; }
  .qform input, .qform select { padding-block: 8px; }
  .qform .form-note { font-size: 13.5px; line-height: 1.5; }
}
html { scroll-padding-top: 96px; }


/* Visible lead capture immediately below the navigation on all main menu destinations. */
.nav-quote { background: var(--paper, #f7f5f0); padding-block: clamp(24px, 4vw, 58px); }
.nav-quote .wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,460px); align-items: center; gap: clamp(24px,5vw,80px); }
.nav-quote-intro { display: grid; gap: 16px; align-content: center; }
.nav-quote-intro p { margin: 0; max-width: 48ch; }
.nav-quote-title { font-family: var(--serif); font-size: clamp(35px,4.5vw,68px); line-height: 1.05; }
@media(max-width:900px){ .nav-quote .wrap { grid-template-columns:1fr; } }
@media(max-width:520px){ .nav-quote { padding-block: 20px 30px; } .nav-quote-intro { gap:10px; } .nav-quote-title { font-size:34px; } }