/* YFS homepage v2 ("services first"). Mobile first. Plain CSS, no framework. */
:root {
  --navy: #0E1A2B;          /* dark bands */
  --navy-deep: #090F18;     /* footer */
  --paper: #F3F0EA;         /* page */
  --card: #FBFAF7;
  --ink: #121821;
  --muted: #4A5260;         /* secondary text */
  --line: #D8D2C6;          /* hairline */
  --safety: #F28C28;        /* primary buttons only; navy text on it */
  --safety-ink: #A9530F;    /* orange as text on light backgrounds */
  --built: #2E7A4D;         /* only means "you already have this" */
  --concrete: #CFC9BD;      /* pieces not built yet */
  --concrete-edge: #B5AE9F;
  --on-navy: #F3F0EA;
  --on-navy-muted: #B4BCC8;
  --navy-line: #24324A;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy-deep); scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html.smooth { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--safety-ink); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.band-navy :focus-visible, .site-footer :focus-visible, .phone-bar :focus-visible, .lang-bar :focus-visible { outline-color: var(--safety); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -64px; z-index: 60; background: var(--navy); color: var(--on-navy); font-family: var(--display); font-weight: 700; padding: 12px 16px; border-radius: 4px; text-decoration: none; }
.skip-link:focus { top: 12px; }
[hidden] { display: none !important; }
/* Deep links (like /#about): the page stays hidden for a moment while the house, the grid and the fonts
   settle, then v2.js opens it in place. If v2.js never runs, the page shows anyway after 2 seconds. */
html.landing { background: var(--paper); }
.landing body { visibility: hidden; animation: yfs-show 0s linear 2s forwards; }
@keyframes yfs-show { to { visibility: visible; } }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.sec { padding-top: 56px; padding-bottom: 56px; }
.sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: 32px; }
.sec-sub { font-size: 18px; line-height: 28px; color: var(--muted); }
h2 { font-size: 32px; line-height: 36px; }
h2 em, h1 em { font-style: italic; color: var(--safety-ink); }
h1, h2, h3, .faq-list summary { text-wrap: balance; }
h1 em, h2 em { white-space: nowrap; }
h2 .sent { display: inline-block; }   /* a two-sentence heading breaks between its sentences */
.label { font-family: var(--display); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--safety-ink); }

/* Navy bands: orange text switches to the brighter orange */
.band-navy { background: var(--navy); color: var(--on-navy); }
.band-navy .label, .band-navy h1 em, .band-navy h2 em { color: var(--safety); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; border-radius: 4px; font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 20px; text-decoration: none; text-align: center; cursor: pointer; }
.btn-safety { background: var(--safety); color: var(--navy); border: 1px solid var(--safety); }
.btn-safety:hover { background: #F59A42; color: var(--navy); }
.btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--on-navy); }
.btn-outline-light { background: transparent; color: var(--on-navy); border: 1.5px solid var(--on-navy-muted); }
.text-link { color: var(--on-navy); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 3px; }
.text-link:hover { color: var(--safety); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }

/* Spanish suggestion bar from app.js */
.lang-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 16px; background: var(--navy); color: var(--on-navy); font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--navy-line); }
.lang-bar a { color: var(--safety); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.lang-bar button { font: inherit; font-size: 22px; background: none; border: 0; color: var(--on-navy); min-width: 44px; min-height: 44px; cursor: pointer; }

/* 1. Header */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; flex-shrink: 0; }
.mark { width: 36px; height: 36px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 22px; letter-spacing: -0.01em; }
.brand-sub { font-weight: 600; font-size: 12px; line-height: 15px; color: var(--muted); }
.nav-links { display: none; }
.header-phone { margin-left: auto; padding: 10px 14px; font-size: 15px; }
.phone-long { display: none; }

/* 2. Hero */
.hero-row { display: flex; flex-direction: column; gap: 40px; padding-top: 48px; padding-bottom: 56px; }
.hero-copy { display: flex; flex-direction: column; gap: 18px; }
.hero-copy .label { text-wrap: balance; }   /* "what we do, for whom": where it wraps, two even lines, never one word alone */
.hero h1 { font-size: 40px; line-height: 42px; }
.lead { font-size: 18px; line-height: 28px; color: var(--on-navy-muted); max-width: 580px; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.hero-actions .btn { width: 100%; font-size: 17px; padding: 14px 22px; }
.hero-small { font-size: 15px; color: var(--on-navy-muted); }

.phone-mock { margin: 0 auto; width: 100%; max-width: 300px; }
.phone-frame { background: var(--navy-deep); border: 1px solid var(--navy-line); border-radius: 14px; padding: 12px 10px 16px; }
.phone-notch { width: 72px; height: 6px; border-radius: 3px; background: var(--navy-line); margin: 2px auto 10px; }
.thread { background: var(--card); border-radius: 8px; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; min-height: 380px; }
.thread-missed { align-self: center; font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 10px; }
.msg { max-width: 86%; font-size: 15px; line-height: 21px; padding: 9px 12px; border-radius: 8px; }
.msg-biz { align-self: flex-end; background: var(--navy); color: var(--on-navy); border-bottom-right-radius: 2px; }
.msg-cust { align-self: flex-start; background: #E7E2D8; color: var(--ink); border-bottom-left-radius: 2px; }
.thread-booked { align-self: center; margin-top: auto; background: var(--built); color: #fff; font-family: var(--display); font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 4px; }
/* The booking link in the example text, drawn as a button. It's a picture of one, not a real link. Its arrow is drawn
   (not a font character), so it's the same width on every phone. */
.msg-biz:has(.msg-pill) { max-width: 100%; }
.msg-pill { display: block; width: fit-content; margin-top: 8px; background: var(--on-navy); color: var(--navy); font-weight: 700; font-size: 13px; line-height: 20px; padding: 6px 11px; border-radius: 999px; }
/* One line only where the bubble can widen for it (:has); older browsers let it wrap. */
@supports selector(:has(*)) { .msg-pill { white-space: nowrap; } }
@media (max-width: 339px) { .msg-pill { font-size: 12px; padding: 6px 9px; } }
.msg-arrow { display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* 3. Two paths */
.paths h2 { margin-bottom: 28px; }
.path-grid { display: grid; gap: 16px; }
.path-card { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.path-card h3 { font-size: 22px; line-height: 28px; font-weight: 700; }
.path-card p { color: var(--muted); flex-grow: 1; }
.path-card .btn { align-self: flex-start; }

/* 4. The house */
.build { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.house { display: flex; flex-direction: column; gap: 24px; }
.house-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.toggle { display: inline-flex; align-self: flex-start; border: 1.5px solid var(--navy); border-radius: 4px; max-width: 100%; }
.toggle button { font: inherit; font-weight: 600; font-size: 15px; min-height: 44px; padding: 10px 14px; background: transparent; color: var(--ink); border: 0; cursor: pointer; }
.toggle button + button { border-left: 1.5px solid var(--navy); }
.toggle button:first-child { border-radius: 2px 0 0 2px; }
.toggle button:last-child { border-radius: 0 2px 2px 0; }
.toggle button[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); }
.toggle button:focus-visible { outline-offset: -5px; }
.toggle button[aria-pressed="true"]:focus-visible { outline-color: var(--safety); }
/* The house: gable roof, a front wall of panels with a door and two windows, a slab, and a dashed plan below.
   Every piece is a real button; v2.js builds it from the SYSTEMS list. */
.house-art { --wall: 46px; align-self: center; --win: 1.05fr; --door: 0.5fr; --upper: 60px; --lower: 112px; --roof: 84px; --frame: #7F796D; --seam: #B5AE9F; --plaster: #E6E1D6;
  width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: center; }
.block { font: inherit; font-family: var(--display); font-weight: 700; font-size: 13px; line-height: 16px; color: var(--ink); background-color: var(--concrete); border: 1px solid var(--concrete-edge); border-radius: 4px; cursor: pointer; padding: 4px; min-width: 44px; min-height: 44px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.piece-label, .piece-sub { position: relative; z-index: 1; }
.piece-sub { font-family: var(--sans); font-weight: 600; font-size: 12px; line-height: 14px; }
.block:hover, .block.piece-window:hover, .block.piece-door:hover { border-color: var(--navy); }
.block.piece-wall:not([data-selected]):hover { box-shadow: inset 0 0 0 2px var(--navy); }
.block:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; z-index: 3; box-shadow: 0 0 0 3px var(--card); }
.block[data-selected]:focus-visible { box-shadow: inset 0 0 0 3px var(--navy), 0 0 0 3px var(--card); }
.block[data-state="selected"] { background-color: var(--safety); color: var(--navy); border-color: var(--safety); }
.block[data-state="foundation"] { background-color: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.block[data-state="built"] { background-color: var(--built); color: #fff; border-color: var(--built); }
.block[data-selected] { box-shadow: inset 0 0 0 3px var(--navy); }

/* Roof: a gable drawn in SVG behind the label */
.block.piece-roof, .block.piece-roof[data-state] { width: 100%; height: var(--roof); padding: 0 0 10px; justify-content: flex-end; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.roof-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.roof-shape polygon { fill: var(--concrete); stroke: var(--seam); stroke-width: 1px; stroke-linejoin: round; }
.piece-roof:hover .roof-shape polygon { stroke: var(--navy); }
.piece-roof[data-state="selected"] .roof-shape polygon { fill: var(--safety); stroke: var(--navy); stroke-width: 3px; }

/* Front wall: panels, with the seams showing between them */
.house-front { width: calc(100% - 16px); display: grid; gap: 3px; background: var(--seam); border-left: 3px solid var(--seam); border-right: 3px solid var(--seam);
  grid-template-columns: var(--wall) var(--win) var(--door) var(--door) var(--win) var(--wall); grid-template-rows: var(--upper) var(--lower);
  grid-template-areas: "wl tl tl tr tr wr" "wl fl fd fd fr wr"; }
.block.piece-wall { border: 0; border-radius: 0; padding: 4px 5px; background-image: repeating-linear-gradient(90deg, transparent 0 17px, rgba(18, 24, 33, 0.07) 17px 18px); }
.wall-l { grid-area: wl; } .wall-tl { grid-area: tl; } .wall-tr { grid-area: tr; } .wall-r { grid-area: wr; }
/* On narrow screens the tall outer walls read bottom to top */
.wall-l .piece-label, .wall-r .piece-label { writing-mode: vertical-rl; transform: rotate(180deg); }

/* The door bay and the two window bays: plain wall around the openings */
.facade { background: var(--plaster); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 3px 8px; min-width: 0; }
.facade-l { grid-area: fl; } .facade-r { grid-area: fr; }
.facade-door { grid-area: fd; align-items: stretch; justify-content: stretch; padding: 12px 4px 0; }
.block.piece-window { width: 100%; flex: 0 0 64%; min-height: 48px; border: 2px solid var(--frame); border-radius: 2px; padding: 2px 4px; letter-spacing: -0.01em; hyphens: manual; }
.sill { display: block; width: calc(100% + 4px); height: 5px; margin-top: 3px; background: var(--frame); border-radius: 1px; }
.block.piece-door { width: 100%; flex: 1 1 auto; border: 3px solid var(--frame); border-bottom: 0; border-radius: 10px 10px 0 0; justify-content: flex-start; padding: 12px 4px 4px; }
.piece-door::after { content: ""; position: absolute; right: 7px; top: 58%; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); }
.piece-door[data-state="selected"]::after { background: var(--navy); }

/* Slab: wider than the walls */
.block.piece-slab { width: 100%; min-height: 50px; border-radius: 3px; font-size: 15px; }

/* Blueprint: a dashed plan on grid paper below the slab */
.block.piece-plan { width: 100%; min-height: 50px; margin-top: 14px; border: 2px dashed var(--frame); background-color: transparent;
  background-image: linear-gradient(rgba(14, 26, 43, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 26, 43, 0.07) 1px, transparent 1px); background-size: 14px 14px; }
.block.piece-plan[data-state="selected"] { background-color: var(--safety); border-color: var(--navy); }

.legend { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid transparent; }
.swatch-built { background: var(--built); }
.swatch-open { background: var(--concrete); border-color: var(--concrete-edge); }
.swatch-selected { background: var(--safety); }
.piece-panel { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.piece-panel h3 { font-size: 26px; line-height: 30px; }
.panel-desc { color: var(--muted); }
.panel-price { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 28px; }
.panel-line { font-size: 15px; line-height: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
.piece-panel .btn { align-self: flex-start; margin-top: 4px; }

/* 5. Systems grid */
.sys-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.sys-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.sys-card h3 { font-size: 21px; line-height: 26px; font-weight: 700; }
.sys-short { color: var(--muted); flex-grow: 1; }
.sys-price { font-family: var(--display); font-weight: 800; font-size: 18px; }
.sys-card-blueprint { border: 2px dashed #7F796D; background: var(--paper); }
.sys-card a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; text-underline-offset: 3px; }
.video-link { font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid #7F796D; border-radius: 999px; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; align-self: flex-start; cursor: pointer; }
.video-link span { color: var(--safety-ink); margin-right: 2px; }
.video-link:hover { border-color: var(--ink); }
.sys-callout { font-weight: 700; border-left: 4px solid var(--safety); padding: 2px 0 2px 12px; margin: 4px 0; }
/* An inline link in a sentence; the padding makes the tap area taller without moving the text. */
.sys-card .sys-callout a { display: inline; min-height: 0; padding: 11px 0; white-space: nowrap; }
.sys-card .sys-callout a:focus-visible { padding: 0; }   /* the keyboard ring hugs the number instead of crossing the lines around it */
.sys-price .nw { white-space: nowrap; }   /* "No contracts ·" / "Free demo first" breaks only at the dot */

/* Example video modal (opened from a system card). Built by v2.js only when a "Watch" button is tapped.
   The video is as tall as the screen allows, but never narrower than 200px (a phone on its side scrolls the box instead). */
html.vm-open { overflow: hidden; }
.video-modal { border: 0; padding: 16px; margin: auto; background: transparent; color: var(--ink); width: 100%; max-width: 440px; max-height: 100%; overflow: auto; }
.video-modal::backdrop { background: rgba(9, 15, 24, 0.85); }
.vm-box { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.vm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.vm-title { font-size: 18px; line-height: 24px; font-weight: 700; padding-top: 10px; }
.vm-close { flex: none; width: 44px; height: 44px; border: 1px solid #7F796D; border-radius: 50%; background: #fff; color: var(--ink); font: inherit; font-size: 28px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vm-done { font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid #7F796D; border-radius: 4px; min-height: 44px; cursor: pointer; }
.vm-close:hover, .vm-done:hover { border-color: var(--ink); }
.vm-frame video { display: block; margin: 0 auto; width: min(100%, max(200px, calc((100vh - 330px) * 9 / 16))); height: auto; aspect-ratio: 9 / 16; background: var(--navy-deep); border-radius: 4px; }
@supports (height: 100dvh) { .vm-frame video { width: min(100%, max(200px, calc((100dvh - 330px) * 9 / 16))); } }
.vm-about { font-size: 15px; line-height: 21px; color: var(--muted); }
.vm-text summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; color: var(--safety-ink); text-decoration: underline; text-underline-offset: 3px; }
.vm-text ol { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 21px; }

/* Sample sites: three preview cards under the systems grid */
.samples { margin-top: 48px; display: flex; flex-direction: column; gap: 8px; }
.samples h3 { font-size: 22px; line-height: 28px; font-weight: 700; }
.samples .sec-sub { font-size: 16px; line-height: 24px; }
.work-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.work-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; color: var(--ink); text-decoration: none; }
.work-card:hover { border-color: var(--navy); }
.work-shot { display: block; aspect-ratio: 1080 / 820; background: #E7E2D8; border-bottom: 1px solid var(--line); }
.work-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.work-caption { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; }
.work-caption b { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 24px; }
.work-caption span { color: var(--muted); font-size: 15px; line-height: 20px; }

/* 6. How it works */
.how { background: var(--card); border-top: 1px solid var(--line); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.steps li { border-top: 3px solid var(--navy); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.step-n { font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 36px; color: var(--safety-ink); }
.steps h3 { font-size: 22px; line-height: 28px; font-weight: 700; }
.steps p { color: var(--muted); }

/* 7. Testimonial (slot is commented out in index.html until there's a real quote) */
.quote-card { margin: 0; padding: 28px; }
.quote-card blockquote { margin: 0 0 12px; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 30px; }
.quote-card figcaption { color: var(--muted); }

/* 8. About */
.about-row { display: flex; gap: 40px; align-items: flex-start; }
.about-copy { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.about-copy p:not(.label) { font-size: 18px; line-height: 29px; color: var(--on-navy-muted); }
.photo-slot { display: none; margin: 0; }
.about-copy blockquote { margin: 8px 0 0; padding-left: 18px; border-left: 3px solid var(--safety); }
.about-copy blockquote p:not(.label) { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 29px; color: var(--on-navy); text-wrap: balance; }

/* FAQ: native details/summary, no script */
.faq { background: var(--card); border-bottom: 1px solid var(--line); }
.faq-list { max-width: 860px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 25px; }
.faq-list summary::-webkit-details-marker { display: none; }
/* The plus/minus is drawn, not typed, so screen readers only hear the question */
.faq-list summary::after { content: ""; flex: 0 0 18px; height: 18px; background: linear-gradient(var(--safety-ink), var(--safety-ink)) center / 18px 3px no-repeat, linear-gradient(var(--safety-ink), var(--safety-ink)) center / 3px 18px no-repeat; }
.faq-list details[open] summary::after { background: linear-gradient(var(--safety-ink), var(--safety-ink)) center / 18px 3px no-repeat; }
.faq-list summary:hover { color: var(--safety-ink); }
.faq-list details p { padding: 0 0 18px; color: var(--muted); max-width: 720px; }
.faq .sec-sub a { font-weight: 600; white-space: nowrap; }

/* 9. Contact */
.contact-row { display: flex; flex-direction: column; gap: 32px; }
.contact-copy { display: flex; flex-direction: column; gap: 20px; }
.contact-block { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.contact-phone { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 38px; color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.contact-note { color: var(--muted); margin-bottom: 10px; }
.contact-email { min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; font-weight: 600; }
.demo-form { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.form-row { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); background: #fff; border: 1px solid #7F796D; border-radius: 4px; padding: 10px 12px; min-height: 44px; width: 100%; }
.field input, .field select { height: 46px; line-height: 24px; }   /* one height, so a text box and a list side by side line up */
.field textarea { resize: vertical; }
.field input[aria-invalid="true"] { border-color: #B3261E; }
.demo-form .btn-safety { font-size: 17px; min-height: 52px; }
.demo-form .btn-safety:disabled { opacity: 0.7; cursor: progress; }
.form-note { font-size: 14px; line-height: 20px; color: var(--muted); }
.form-result { font-size: 16px; line-height: 24px; padding: 12px 14px; border-radius: 4px; }
.form-result[data-state="success"] { background: #E2EFE6; color: #1E5634; }
.form-result[data-state="error"] { background: #FBE9E7; color: #8C1D18; }
.secure-submit { font: inherit; font-weight: 600; background: #fff; color: var(--ink); border: 1px solid #7F796D; border-radius: 4px; padding: 12px 16px; min-height: 44px; cursor: pointer; }
.form-honeypot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.form-honeypot > * { position: absolute; width: 1px; height: 1px; }

/* 10. Footer */
.site-footer { background: var(--navy-deep); color: var(--on-navy-muted); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; padding-top: 32px; padding-bottom: 32px; font-size: 15px; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; }
.footer-brand .mark { width: 28px; height: 28px; }
.footer-brand b { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--on-navy); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer-links a { color: var(--on-navy-muted); min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a:hover { color: var(--on-navy); }

/* 11. Phones: sticky call bar, with room left for it inside the navy footer */
.phone-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--navy-deep); border-top: 1px solid var(--navy-line); transition: transform 0.2s ease, visibility 0s linear 0s; }
.phone-bar .btn { flex: 1; }
.phone-bar[data-hidden] { transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
.site-footer { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* Small phones */
@media (max-width: 399px) {
  .house-art { --wall: 44px; --win: 0.95fr; --door: 0.55fr; }
  .house-front { width: calc(100% - 8px); gap: 2px; border-width: 2px; }
  .facade { padding-left: 2px; padding-right: 2px; }
  .facade-door { padding-left: 1px; padding-right: 1px; }
}
@media (min-width: 360px) and (max-width: 399px) {
  .house-art { --win: 1.02fr; --door: 0.5fr; }
}
@media (max-width: 379px) {
  .block { font-size: 12px; line-height: 15px; }
  .block.piece-window, .block.piece-door { letter-spacing: -0.02em; }
}
@media (max-width: 479px) {
  .demo-form { padding: 16px 12px; }
  .field select { padding-left: 8px; padding-right: 4px; }
}

/* Windows high contrast: keep the selected and pressed states visible */
@media (forced-colors: active) {
  .block[aria-pressed="true"], .toggle button[aria-pressed="true"], .house-art .block[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; box-shadow: none; }
  .block:focus-visible, .toggle button:focus-visible { outline: 3px solid CanvasText; outline-offset: 3px; }
  .toggle button:focus-visible { outline-offset: -5px; }
  .swatch { forced-color-adjust: none; }
  .roof-shape polygon { fill: Canvas; stroke: CanvasText; }
  .block.piece-roof[aria-pressed="true"] { background: transparent; color: HighlightText; }
  .piece-roof[aria-pressed="true"] .roof-shape polygon { fill: Highlight; stroke: Highlight; }
  .house-front, .facade { border-color: CanvasText; }
  .block.piece-wall { border: 1px solid CanvasText; }
  .sill, .piece-door::after { background: CanvasText; }
  .faq-list summary::after { forced-color-adjust: none; background: linear-gradient(CanvasText, CanvasText) center / 18px 3px no-repeat, linear-gradient(CanvasText, CanvasText) center / 3px 18px no-repeat; }
  .faq-list details[open] summary::after { background: linear-gradient(CanvasText, CanvasText) center / 18px 3px no-repeat; }
}

/* Wider phones */
@media (min-width: 480px) {
  .house-art { --wall: 64px; --upper: 66px; --lower: 124px; --roof: 100px; }
  .house-front { width: calc(100% - 24px); }
  .block { font-size: 14px; line-height: 17px; }
  .phone-long { display: inline; }
  .phone-short { display: none; }
  .hero-actions .btn { width: auto; }
}

@media (min-width: 600px) {
  .house-art { --wall: 84px; }
  .wall-l .piece-label, .wall-r .piece-label { writing-mode: horizontal-tb; transform: none; }
}

/* Tablets and up: no call bar, nav still hidden until there's room */
@media (min-width: 720px) {
  .phone-bar { display: none; }
  .site-footer { padding-bottom: 0; }
  html { scroll-padding-bottom: 0; }
  .nav-links { display: flex; gap: 20px; margin-left: auto; font-size: 15px; font-weight: 600; }
  .nav-links a { color: var(--ink); text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .nav-links a:hover { color: var(--safety-ink); }
  .header-phone { margin-left: 4px; }
  .phone-long { display: none; }
  .phone-short { display: inline; }
  .wrap { padding-left: 32px; padding-right: 32px; }
  .sec { padding-top: 80px; padding-bottom: 80px; }
  h2 { font-size: 40px; line-height: 44px; }
  .hero h1 { font-size: 52px; line-height: 54px; }
  .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .house-art { --wall: 96px; --upper: 80px; --lower: 150px; --roof: 124px; }
  .house-front { width: calc(100% - 32px); }
  .block { font-size: 15px; line-height: 18px; }
  .block.piece-window { width: 86%; }
  .path-card { padding: 32px; }
  .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .photo-slot:not([hidden]) { display: block; flex: 0 0 280px; aspect-ratio: 4 / 5; }
  .photo-slot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row-start { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }   /* the list's longest answer needs the room more than Phone */
  .demo-form { padding: 28px; }
}

/* Desktop: nav shows, hero and house go side by side */
@media (min-width: 960px) {
  .hero-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 56px; padding-top: 88px; padding-bottom: 88px; }
  .hero-copy { flex: 1 1 0; }
  .hero h1 { font-size: 60px; line-height: 62px; }
  .phone-mock { flex: 0 0 300px; margin: 0; }
  .house { flex-direction: row; align-items: flex-start; gap: 32px; }
  .house-main { flex: 1 1 0; }
  .piece-panel { flex: 0 0 340px; position: sticky; top: 88px; }
  .sys-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sys-card-blueprint:last-child { grid-column: 1 / -1; }
  .contact-row { flex-direction: row; gap: 56px; }
  .contact-copy { flex: 1 1 0; }
  .demo-form { flex: 0 1 560px; }
}
@media (min-width: 960px) and (max-width: 1099px) {
  .house-art { --wall: 86px; }
  .block.piece-window { width: 94%; }
}
/* Hero buttons: where the button and the phone link fit on one line in one font but not the other, the hero would
   change height when the web fonts arrive. Stacked, it stays the same. (The Spanish link is longer: more widths.) */
@media (min-width: 480px) and (max-width: 519px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 480px) and (max-width: 719px), (min-width: 960px) and (max-width: 1099px) {
  html[lang="es"] .hero-actions { flex-direction: column; align-items: flex-start; }
}
/* The Spanish headline is longer. At 60px it only just fits on two lines, so it took three while one of the two
   Archivo files had arrived and the other hadn't, and the hero jumped. At 50px (54px from 1200px) it's two lines in every state. */
@media (min-width: 1100px) {
  html[lang="es"] .hero h1 { font-size: 50px; line-height: 52px; }
}
@media (min-width: 1200px) {
  html[lang="es"] .hero h1 { font-size: 54px; line-height: 56px; }
}
@media (min-width: 1024px) {
  .nav-links { gap: 28px; }
  .phone-long { display: inline; }
  .phone-short { display: none; }
}
@media (min-width: 1100px) {
  .wrap { padding-left: 40px; padding-right: 40px; }
  .sec { padding-top: 96px; padding-bottom: 96px; }
  .photo-slot:not([hidden]) { flex-basis: 340px; }
}