/* Cinderpeak Roofing — Rugged Industrial. Archivo variable (wdth 62–125, wght 100–900). Rust = large/stripes only (3.11 on charcoal). */
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-standard-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
:where(.cp) *, :where(.cp) *::before, :where(.cp) *::after { box-sizing: border-box; }
:where(.cp) :where(h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset) { margin: 0; }
:where(.cp) :where(ol, ul) { list-style: none; padding: 0; }
:where(.cp) a { color: inherit; }
.cp { --char: #1C1C1C; --asph: #2B2B2B; --conc: #D9D6D0; --yel: #FFC82C; --rust: #B5451B; --white: #FFFFFF; --grav: #8A857D; --pad: clamp(16px, 4vw, 56px);
  --stripe: repeating-linear-gradient(-45deg, var(--yel) 0 14px, var(--char) 14px 28px); --t: 0.2s linear;
  background: var(--char); color: var(--white); font-family: "Archivo", "Arial Narrow", sans-serif; font-stretch: 100%; font-size: 17px; line-height: 1.55; font-weight: 400; }
/* Ring as a token: the world is dark, so a yellow ring is right on char and wrong on the white booking
   panel, where it measured 1.55:1 on every calendar day, nav button and field. Same pattern as pinewhistle. */
.cp :focus-visible { outline: 3px solid var(--ring, var(--yel)); outline-offset: 2px; }
.cp::before { content: ""; display: block; height: 10px; background: var(--stripe); }
.cp-header { display: flex; align-items: center; gap: 28px; padding: 16px var(--pad); border-bottom: 2px solid var(--asph); }
.cp-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-stretch: 125%; font-size: 22px; letter-spacing: 0.02em; }
.cp-nav { margin-left: auto; }
.cp-nav ul { display: flex; gap: 24px; }
.cp-nav a { text-decoration: none; font-stretch: 75%; font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--conc); transition: color var(--t); }
.cp-nav a:hover, .cp-nav a[aria-current] { color: var(--yel); }
/* Phone menu (2026-09-24): the nav's links below 1000px, where the nav hides. The real site's pattern and script
   (src/scripts/menu.js); only the look is Cinderpeak's: charcoal, condensed caps, the current page in hazard yellow. */
.cp-header { position: relative; z-index: 30; }
.cp-menu-toggle { display: none; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid var(--conc); border-radius: 0; background: transparent; color: var(--conc); cursor: pointer; transition: border-color var(--t), color var(--t); }
.cp-menu-toggle:hover { border-color: var(--yel); color: var(--yel); }
.cp-menu { position: absolute; top: 100%; left: 0; right: 0; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--pad) 20px; background: var(--char); border-bottom: 4px solid var(--yel); }
.cp-menu a:not([class]) { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--asph); font-stretch: 75%; font-weight: 700; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--conc); }
.cp-menu a:not([class]):hover, .cp-menu a:not([class])[aria-current] { color: var(--yel); }
.cp-phone { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-weight: 800; text-decoration: none; color: var(--yel); }
/* yellow button, charcoal text 11.0:1 */
.cp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 0; border-radius: 0; background: var(--yel); color: var(--char); font-family: inherit; font-weight: 800; font-stretch: 112%; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 6px 6px 0 var(--rust); transition: transform var(--t), box-shadow var(--t); }
.cp-btn:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--rust); }
.cp-btn--block { width: 100%; }
.cp-hero { position: relative; display: grid; min-height: clamp(460px, 70vh, 720px); align-items: end; overflow: hidden; }
.cp-hero__media { position: absolute; inset: 0; }
.cp-hero__media img, .cp-hero__media .ph { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.cp-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 28, 28, 0.94) 0%, rgba(28, 28, 28, 0.78) 45%, rgba(28, 28, 28, 0.2) 100%); pointer-events: none; }
.cp-hero__media .ph__label { position: relative; z-index: 2; justify-self: end; }
.cp .ph { --ph-bg: var(--asph); }
/* 830px, not 760 (Andy, 2026-09-25): at 760 the h1's box was 648px and "INSPECTION." (712px at 84px) ran 64px past it
   from 1300px up, "INSPECCIÓN" 41px from 1340px, over the photo. At 830 the box is 718px: 6px to spare in English, 9 in
   Spanish, at every width from 1300. .cp-sub keeps its own 34em, so only the heading gains the room. */
.cp-hero__copy { position: relative; z-index: 1; max-width: 830px; padding: clamp(40px, 7vw, 96px) var(--pad); }
.cp-kicker { display: inline-block; background: var(--yel); color: var(--char); font-weight: 800; font-stretch: 75%; letter-spacing: 0.12em; text-transform: uppercase; font-size: 14px; padding: 4px 10px; margin-bottom: 16px; }
.cp-h1 { font-weight: 900; font-stretch: 125%; font-size: clamp(40px, 6vw, 84px); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em; }
.cp-sub { margin: 20px 0 28px; max-width: 34em; color: var(--conc); font-size: 19px; }
.cp-h2 { font-weight: 900; font-stretch: 125%; font-size: clamp(32px, 4vw, 54px); line-height: 1; text-transform: uppercase; }
.cp-book { padding: clamp(56px, 8vw, 110px) var(--pad); background: var(--conc); color: var(--char); }
.cp-form { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; margin-top: 32px; align-items: start; }
.cp-form__main { min-width: 0; } /* grid children default to min-width:auto and will not shrink below min-content — the calendar's 7 columns held the form at 320px */
.cp-step { border: 0; padding: 24px; background: var(--white); --ring: var(--char); margin-bottom: 16px; min-width: 0; border-left: 8px solid var(--char); }
.cp-step legend { float: left; width: 100%; padding: 0; font-weight: 800; font-stretch: 112%; font-size: 22px; text-transform: uppercase; margin-bottom: 18px; }
.cp-step legend span { display: inline-block; background: var(--char); color: var(--yel); padding: 0 8px; margin-right: 8px; font-stretch: 75%; }
.cp-step legend + * { clear: both; }
.cp-cal { max-width: 460px; }
.cp-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cp-cal__month { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
/* font-family: inherit, because a <button> does not inherit type. Without it these chevrons fell to the browser's
   control font — Arial on Windows, drawn as Arial Black at weight 800, i.e. a different face from the rest of the
   page on every OS. Archivo carries ‹ and › itself (checked, 2026-09-22) and is variable 100–900, so 800 is a real
   weight and not a synthesised one. */
.cp-cal__nav { width: 44px; height: 44px; border: 2px solid var(--char); background: var(--white); color: var(--char); font-family: inherit; font-size: 22px; font-weight: 800; cursor: pointer; }
/* minmax(0, 1fr), not a bare 1fr: 1fr keeps a min-content floor, and the weekday labels' min-content is
   wider than a seventh of a 320px panel, so the seven columns forced the grid to 276px inside 244px and
   the last column landed outside the white card. Third time this floor has bitten here — the booking
   form (2026-09-21) and the 1000px breakpoint before it. */
.cp-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cp-cal__wd { text-align: center; font-size: 13px; font-weight: 700; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.08em; color: var(--asph); padding: 4px 0; }
/* The --conc border measures 1.45:1 on the white panel, and that is fine under 1.4.11: it is not what identifies a day or
   its state. The numeral does (17.04:1) in a 7-column grid under the weekdays; the picked day is a charcoal fill
   (17.04:1 on the panel); the ring is 3px charcoal (17.04:1); unavailable days are inactive, which 1.4.11 exempts, and
   struck through besides. Measured EN + ES at 1440 and 390, 2026-09-24. Raise it only for a reason other than 3:1. */
.cp-cal__day { aspect-ratio: 1; border: 2px solid var(--conc); background: var(--white); font-family: inherit; font-weight: 700; font-size: 16px; color: var(--char); cursor: pointer; transition: background-color var(--t); }
.cp-cal__day:hover:not(:disabled) { border-color: var(--char); }
.cp-cal__day:disabled { color: #6B665F; background: #EFEDE9; cursor: not-allowed; text-decoration: line-through; }
.cp-cal__day[aria-pressed="true"] { background: var(--char); color: var(--yel); border-color: var(--char); }
.cp-windows, .cp-yesno { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-chip { position: relative; }
.cp-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cp-chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border: 2px solid var(--char); font-weight: 700; background: var(--white); color: var(--char); transition: background-color var(--t); }
.cp-chip input:checked + span { background: var(--yel); }
.cp-chip input:focus-visible + span { outline: 3px solid var(--char); outline-offset: 2px; }
.cp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cp-field { display: grid; gap: 6px; font-weight: 700; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; }
.cp-field--wide { grid-column: 1 / -1; }
.cp-field input, .cp-field select { min-height: 48px; padding: 0 12px; border: 2px solid var(--char); border-radius: 0; font-family: inherit; font-stretch: 100%; font-size: 17px; text-transform: none; letter-spacing: 0; background: var(--white); color: var(--char); }
.cp-summary { position: sticky; top: 24px; padding: 24px; background: var(--char); color: var(--white); border-top: 10px solid transparent; border-image: var(--stripe) 10; }
.cp-summary__title { font-weight: 900; font-stretch: 125%; font-size: 24px; text-transform: uppercase; margin-bottom: 14px; }
.cp-summary dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--asph); }
.cp-summary dt { color: var(--grav); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.cp-summary dd { font-weight: 700; text-align: right; }
.cp-summary .cp-btn { margin-top: 20px; }
.cp-summary .demo-note { color: var(--conc); }
/* The booking gate is a HINT until the visitor has actually tried to book. It used to carry .demo-err from
   first paint, so the page told someone they had done something wrong before they had done anything, and it
   changed silently — no role, no live region — so a screen-reader user got a refusal they were never told
   about. Neutral here; .demo-err and role="alert" are added only when a submit is refused. */
.cp-book-gate, .cp-book-gate.demo-err { margin: 10px 0 0; }
.cp-book-gate { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--conc); }
.cp-book-gate.demo-err { color: var(--yel); }
.cp-check { padding: clamp(56px, 8vw, 110px) var(--pad); }
.cp-check__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 36px; background: var(--asph); border: 2px solid var(--asph); }
.cp-check__grid li { padding: 28px; background: var(--char); }
.cp-check__n { display: block; font-weight: 900; font-stretch: 125%; font-size: 44px; line-height: 1; color: var(--rust); }
.cp-check h3 { font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: 22px; margin: 12px 0 6px; }
.cp-check p { color: var(--conc); }
.cp-report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; background: var(--asph); }
.cp-report__tex img, .cp-report__tex .ph { width: 100%; height: 100%; object-fit: cover; }
.cp-report__line { padding: clamp(32px, 6vw, 80px) var(--pad); font-weight: 900; font-stretch: 125%; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.02; text-transform: uppercase; color: var(--yel); }
.cp-process { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(56px, 8vw, 110px) var(--pad); }
.cp-process__media img, .cp-process__media .ph { width: 100%; }
.cp-process__list { counter-reset: p; display: grid; gap: 14px; margin-top: 24px; }
.cp-process__list li { counter-increment: p; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; color: var(--conc); }
.cp-process__list li::before { content: counter(p); display: grid; place-items: center; width: 36px; height: 36px; background: var(--yel); color: var(--char); font-weight: 900; }
.cp-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 28px var(--pad); border-top: 10px solid transparent; border-image: var(--stripe) 10; font-size: 14px; color: var(--conc); }
.cp-footer .cp-logo { font-size: 18px; color: var(--white); }
.cp [hidden] { display: none !important; }
@media (max-width: 1000px) { .cp-form { grid-template-columns: minmax(0, 1fr); } /* bare 1fr keeps a min-content floor; the base rule above already knew this (2026-09-21) */ .cp-summary { position: static; } .cp-nav { display: none; } .cp-phone { margin-left: auto; } .cp-menu-toggle { display: inline-flex; } .cp-check__grid { grid-template-columns: 1fr 1fr; } .cp-report, .cp-process { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .cp-fields, .cp-check__grid { grid-template-columns: 1fr; }
  .cp-step { padding: 18px; }
  .cp-header { gap: 10px; }
  .cp-logo { font-size: 18px; }
  .cp-header .cp-btn { min-height: 44px; padding: 0 14px; font-size: 15px; box-shadow: 4px 4px 0 var(--rust); }
}
@media (prefers-reduced-motion: reduce) { .cp * { transition: none !important; } }
@media (max-width: 1000px) {
  .cp-hero__media::after { background: linear-gradient(180deg, rgba(28, 28, 28, 0.6) 0%, rgba(28, 28, 28, 0.9) 45%, rgba(28, 28, 28, 0.95) 100%); } /* audit 2026-09-11: sub text hit 3.37:1 over the sunset on mobile */
  .cp-phone { font-size: 15px; }
}
@media (max-width: 429px) {
  /* Logo + phone + menu toggle ran 29-59px past the screen at 360-390px (2026-09-24). The phone number is this header's
     call to action and stays: logo and toggle share the first row, the number takes a row of its own under them, at
     every width below 430px (below 360px it already wrapped under the logo). Left to wrap freely, the toggle took a
     row alone at 390px. */
  .cp-header { flex-wrap: wrap; row-gap: 4px; }
  .cp-menu-toggle { order: 1; margin-left: auto; }
  .cp-phone { order: 2; flex: 1 0 100%; justify-content: flex-end; margin-left: 0; }
}
@media (max-width: 359px) {
  /* clamp(40px, 6vw, 84px) picks its 40px floor at 320px, where "INSPECTION." alone measures 339px and
     stretched .cp-hero__copy to 371px inside a 320px viewport (2026-09-21). The floor is the bug, not the clamp. */
  .cp-h1 { font-size: 32px; }
  .cp-header { flex-wrap: wrap; }   /* logo + nowrap phone do not both fit on one 320px line */
  .cp-phone { font-size: 14px; }
}
/* Nothing below the media queries — an unconditional rule here outranks every breakpoint
   above it at equal specificity (docs/DECISIONS.md, 2026-09-14). */