/* Pinewhistle Heating & Air — Bold Utility. Own brand: no ReadyAstro tokens. Rules: DNA example_design_systems.pinewhistle-hvac */
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
.pw { --navy: #0E1B2C; --steel: #1F3350; --ice: #EAF2FB; --white: #FFFFFF; --orange: #FF6A13; --slate: #5B6B80; --sky: #8CC8FF;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif; --text: "Barlow", system-ui, sans-serif; --t: 150ms ease-out;
  font-family: var(--text); font-weight: 400; font-size: 18px; line-height: 1.55; color: var(--navy); background: var(--white); }
/* resets use :where() so they carry ZERO specificity — component colors must always win (render-audit caught .pw a beating .pw-btn) */
:where(.pw) *, :where(.pw) *::before, :where(.pw) *::after { box-sizing: border-box; }
:where(.pw) :where(h1, h2, h3, p, ul, ol) { margin: 0; }
:where(.pw) :where(ul, ol) { list-style: none; padding: 0; }
:where(.pw) a { color: inherit; }
/* The ring is a token so a section can carry its own. The orange band painted an orange ring on orange
   at exactly 1.00:1 — an invisible focus indicator — because one colour served the whole world. Any rule
   that changes the surface under a focusable thing sets --ring in the same block. */
.pw :focus-visible { outline: 3px solid var(--ring, var(--orange)); outline-offset: 2px; }
/* 600/800 are the ONLY condensed weights shipped — anything else faux-bolds */
.pw-h1, .pw-h2, .pw-band__title, .pw-logo b, .pw-steps__n { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.pw-strip { background: var(--navy); color: var(--orange); font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 6px 16px; border-bottom: 1px solid var(--steel); }
/* nowrap: a phone number is one token. In Spanish the strip's sentence is longer, so the number started at the end
   of the line and broke across two — measured at 320px, ES only, EN was clean (2026-09-22). The ghost CTA below
   already carried nowrap for the same reason.
   underline: white on the strip's orange text is 2.87:1, under the 3:1 that lets colour alone mark a link (1.4.1).
   axe flagged it at 320px in Spanish, where the sentence wraps round the number; the cause is the same at every width
   (2026-09-24). */
.pw-strip a { color: var(--white); margin-left: 8px; text-decoration: underline; white-space: nowrap; }
.pw-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 14px clamp(16px, 4vw, 48px); background: var(--navy); color: var(--white); }
.pw-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.pw-logo span { display: grid; line-height: 1; }
.pw-logo b { font-size: 24px; letter-spacing: 0.06em; }
.pw-logo small { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.24em; color: var(--sky); }
.pw-nav { margin-left: auto; }
.pw-nav ul { display: flex; gap: 26px; }
.pw-nav a { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ice); padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color var(--t), color var(--t); }
.pw-nav a:hover, .pw-nav a[aria-current] { color: var(--white); border-color: var(--orange); }
/* Phone menu (2026-09-24): the nav's links below 960px, where the nav hides. The real site's pattern and script
   (src/scripts/menu.js); only the look is Pinewhistle's: navy, condensed caps, an orange bar on the current page. The
   header is sticky, so the panel hangs from it wherever the page is scrolled, and every section a link lands on keeps
   clear of it (scroll-margin: the header is 76px, 68px below 960px). */
.pw-menu-toggle { display: none; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border: 2px solid var(--ice); border-radius: 2px; background: transparent; color: var(--white); cursor: pointer; transition: background-color var(--t); }
.pw-menu-toggle:hover { background: var(--steel); }
.pw-menu-toggle svg { width: 20px; height: 20px; }
.pw-menu { position: absolute; top: 100%; left: 0; right: 0; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px clamp(16px, 4vw, 48px) 20px; background: var(--navy); border-top: 1px solid var(--steel); border-bottom: 3px solid var(--orange); }
.pw-menu a:not([class]) { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-bottom: 1px solid var(--steel); font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ice); }
.pw-menu a:not([class]):hover, .pw-menu a:not([class])[aria-current] { color: var(--white); box-shadow: inset 4px 0 0 var(--orange); }
.pw :where(section[id]:not(#top)) { scroll-margin-top: 84px; }
.pw-menu__cta { display: none; padding-top: 16px; }
/* orange takes NAVY text (6.04:1); white-on-orange is 2.87:1 */
.pw-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 2px; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform var(--t), background-color var(--t); }
.pw-btn:hover { transform: translateY(-2px); }
.pw-btn--orange { background: var(--orange); color: var(--navy); }
.pw-btn--orange:hover { background: #FF7E33; }
.pw-btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.pw-btn--navy { background: var(--navy); color: var(--white); }
.pw-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(40px, 7vw, 96px) clamp(16px, 4vw, 48px); background: var(--navy); color: var(--white); }
.pw-kicker { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.pw-h1 { font-size: clamp(48px, 7vw, 92px); line-height: 0.92; -webkit-hyphens: none; hyphens: none; }
/* The Spanish title carries a soft hyphen, "acondi­cionado" (Andy, 2026-09-25): at 961-1408px the two-column hero
   gives the h1 a column narrower than "ACONDICIONADO." (up to 43px past it, 8px from the photo). Chrome breaks lines
   greedily and would take the hyphen wherever "AIRE ACONDI-" fits a line (320-380 and 560-1600px), not only where the
   word cannot fit, so it is allowed here alone. 1408 is where the word first fits at the 92px cap in the pinned
   Barlow Condensed 800; English has no soft hyphen, so this changes nothing there. */
@media (min-width: 961px) and (max-width: 1408px) { .pw-h1 { -webkit-hyphens: manual; hyphens: manual; } }
.pw-lede { margin-top: 26px; max-width: 34em; color: var(--ice); font-size: 19px; }
.pw-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pw-badges { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sky); }
/* The tick is drawn (template `ico.check`), not typed: Barlow Condensed has no U+2713, so a CSS "✓" was painted by
   whatever symbol font the visitor's OS supplies. 1em keeps it on the badge's own type scale. */
.pw-badges li { display: inline-flex; align-items: center; gap: 6px; }
.pw-badges li svg { width: 1em; height: 1em; flex: none; color: var(--orange); }
.pw-hero__media img, .pw-hero__media .ph { width: 100%; border-radius: 2px; }
.pw .ph { --ph-bg: var(--steel); }
.pw-h2 { font-size: clamp(36px, 5vw, 60px); line-height: 0.95; margin-bottom: 32px; }
.pw-services { padding: clamp(56px, 8vw, 110px) clamp(16px, 4vw, 48px); background: var(--ice); }
.pw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pw-card { background: var(--white); padding: 26px 24px 28px; border-radius: 2px; border-top: 4px solid var(--navy); transition: border-color var(--t), transform var(--t); }
.pw-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.pw-card svg { color: var(--navy); }
.pw-card h3 { font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: 0.03em; margin: 14px 0 6px; }
.pw-card p { color: var(--slate); font-size: 17px; }
.pw-visit { padding: clamp(56px, 8vw, 110px) clamp(16px, 4vw, 48px); background: var(--navy); color: var(--white); }
.pw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; }
.pw-steps li { border-left: 4px solid var(--orange); padding-left: 20px; }
/* Outlined numerals: the sky stroke is the text colour (9.75:1 on navy); the steel fill is 1.36:1. axe counts a stroke
   as the colour only from 0.03em, so 1px (0.014em at 72px) failed; 0.04em is Andy's call (2026-09-24). Keep it in em. */
.pw-steps__n { display: block; font-size: 72px; line-height: 1; color: var(--steel); -webkit-text-stroke: 0.04em var(--sky); }
.pw-steps h3 { font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; margin: 6px 0; }
.pw-steps p { color: var(--ice); }
.pw-tuneup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(56px, 8vw, 110px) clamp(16px, 4vw, 48px); }
.pw-checks { display: grid; gap: 12px; }
.pw-checks li { display: flex; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--ice); font-weight: 600; }
.pw-checks li::before { content: ""; flex: 0 0 12px; height: 12px; background: var(--orange); transform: translateY(1px); }
.pw-area { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(56px, 8vw, 110px) clamp(16px, 4vw, 48px); background: var(--ice); }
.pw-area .pw-h2 { margin-bottom: 14px; }
.pw-area p { color: var(--slate); margin: 0 0 20px; }
/* The service area is a list of towns, not a row of controls. Each town used to be a white box with a 2px navy border
   in the button face, and eight of them in a row read as filter chips waiting to be pressed (2026-09-24). Now plain
   navy text with a small orange mark, the tune-up checklist's vocabulary. Two columns at every width, so the viewport
   sets the rows and the text width never does. */
.pw-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.pw-chips li { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 16px; color: var(--navy); }
.pw-chips li::before { content: ""; flex: 0 0 8px; height: 8px; background: var(--orange); }
/* orange band: navy text 6.04:1 */
.pw-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(48px, 7vw, 90px) clamp(16px, 4vw, 48px); background: var(--orange); color: var(--navy); --ring: var(--navy); }
.pw-band__title { font-size: clamp(36px, 5vw, 64px); line-height: 0.95; max-width: 14em; }
.pw-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; margin-top: 28px; }
.pw-form label { display: grid; gap: 6px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; }
.pw-form input, .pw-form select { min-height: 48px; padding: 0 12px; border: 2px solid var(--navy); border-radius: 2px; background: var(--white); color: var(--navy); font: 400 17px var(--text); }
.pw-form .demo-note { grid-column: 1 / -1; color: var(--navy); }
.pw-form button { grid-column: 1 / -1; justify-self: start; }
.pw-band__media img, .pw-band__media .ph { width: 100%; border-radius: 2px; border: 4px solid var(--navy); }
.pw-footer { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; padding: 32px clamp(16px, 4vw, 48px); background: var(--navy); color: var(--ice); font-size: 15px; }
.pw-footer b { font-family: var(--display); font-weight: 800; letter-spacing: 0.06em; }
.pw-footer a { color: var(--white); }
.pw-footer__fine { grid-column: 1 / -1; color: var(--sky); font-size: 13px; }
@media (max-width: 960px) {
  .pw-hero, .pw-tuneup, .pw-area { grid-template-columns: 1fr; }
  .pw-grid { grid-template-columns: 1fr 1fr; }
  .pw-steps { grid-template-columns: 1fr; }
  .pw-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pw-band { grid-template-columns: minmax(0, 1fr); }
  .pw-band__media { max-width: 360px; }
  .pw-nav { display: none; }
  .pw-menu-toggle { display: inline-flex; }
  .pw-header .pw-btn { margin-left: auto; min-height: 40px; font-size: 14px; padding: 0 12px; }
}
@media (max-width: 600px) {
  .pw-grid, .pw-form { grid-template-columns: minmax(0, 1fr); }
  .pw-footer { grid-template-columns: 1fr; }
  /* The header CTA is white-space: nowrap, so on a narrow phone the logo + gap + button ran
     past the screen edge — worst in Spanish, where "Programar servicio" is 16px wider than
     "Schedule service". Tighten the gap and the button's own padding rather than let the
     brand name shrink. */
  .pw-header { gap: 10px; }
  .pw-header .pw-btn { padding: 0 10px; letter-spacing: 0.04em; }
}
@media (max-width: 429px) {
  /* Logo + CTA + menu toggle ran 11-57px past the screen at 320-390px, EN and ES (2026-09-24). The CTA moves into the
     menu, as the real site's does; the hero's own "Schedule service" is the first thing under the header. */
  .pw-header > .pw-btn { display: none; }
  .pw-menu-toggle { margin-left: auto; }
  .pw-menu__cta { display: block; }
}
@media (max-width: 359px) {
  /* The 600px block tightened the gap and padding and it still was not enough: at 320px the nowrap CTA
     measured 130px in English and 147px in Spanish and pushed the page 18px / 35px wide (2026-09-21).
     Let it wrap instead — the alternative is shrinking the brand name, which the 600px note already ruled out. */
  .pw-header .pw-btn { white-space: normal; text-align: center; line-height: 1.15; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) { .pw * { transition: none !important; } }
/* Nothing below the media queries. Any unconditional rule placed here wins over every
   breakpoint above it at equal specificity — that is what broke the mobile form. */