/* 00  Core — resets and behaviour hooks only. Every visual decision for this
       site lives in the sections below, starting with the design tokens.    */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }
iframe { border: 0; }
figure { margin: 0; }
[hidden] { display: none !important; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 999; transform: translateY(-160%); padding: 0.8rem 1.2rem; background: #000; color: #fff; font-weight: 700; text-decoration: none; }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field__error { margin: 0; min-height: 1rem; font-size: 0.82rem; font-weight: 700; color: var(--err); }
.field.is-invalid :where(input, select, textarea) { border-color: var(--err); }
.form-status { min-height: 1.2rem; font-weight: 700; }
.form-status.is-error { color: var(--err); }
.form-status.is-ok { color: var(--ok); }
.img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; width: 100%; padding: 1rem; text-align: center; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; }
.img-placeholder b { display: block; font-size: 0.92rem; letter-spacing: 0; text-transform: none; word-break: break-all; }
:target { scroll-margin-top: 120px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }

/* ==========================================================================
   Valencia HVAC Experts - valenciahvac.xyz
   Appended to b11-core.css. Every visual decision for this site lives here.

   01 Tokens
   02 Base and typography
   03 Header: slate rail + paper bar
   04 Layout primitives and the corner tick
   05 Buttons, lists, figures
   06 Home page
   07 Inner pages and the elevation device
   08 Contact
   09 Footer
   10 Navigation breakpoint (940px)
   ========================================================================== */

/* 01 Tokens ---------------------------------------------------------------- */

:root {
  --paper: #f4f5f7; --panel: #ffffff; --band: #e7e9ee;
  --ink: #2a2d34; --ink-2: #363a43; --ink-l: #8d93a0;
  --amber: #8f4208; --amber-d: #6f3306; --amber-l: #fbf0e6;
  --text: #474b54; --muted: #5a5f6a; --line: #d4d8e0;
  --focus: #8f4208; --err: #9c2f27;
  --disp: "Sintony", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-xs: 0.78rem; --f-sm: 0.92rem;
  --f0: clamp(1rem, 0.97rem + 0.16vw, 1.06rem);
  --f1: clamp(1.12rem, 1.04rem + 0.4vw, 1.3rem);
  --f2: clamp(1.4rem, 1.17rem + 1.05vw, 1.95rem);
  --f3: clamp(1.8rem, 1.36rem + 2.15vw, 2.85rem);
  --r: 3px; --lh: 1.76; --wrap: 1120px; --col: 64ch;
  --pad: clamp(1.25rem, 1rem + 1.3vw, 2rem);
  --pad-y: clamp(2.6rem, 2.1rem + 2.6vw, 4.2rem);
  --tick: 18px;
}

/* 02 Base and typography --------------------------------------------------- */

body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: var(--f0); line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .wordmark, .stat b, .btn, .rail__tel {
  font-family: var(--disp); color: var(--ink);
}
h1, h2, h3 { line-height: 1.18; margin: 0 0 0.5em; letter-spacing: -0.012em; font-weight: 700; }
h1 { font-size: var(--f3); }
h2 { font-size: var(--f2); }
h3 { font-size: var(--f1); letter-spacing: -0.006em; }
p { margin: 0 0 1em; max-width: var(--col); }
p:last-child { margin-bottom: 0; }
a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--amber-d); }
strong, b { color: var(--ink); font-weight: 700; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 1px;
}
.skip-link { background: var(--ink); color: #fff; font-family: var(--disp); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.eyebrow {
  display: block; margin: 0 0 0.6rem; font-family: var(--disp); font-size: var(--f-xs);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber);
}
.lede { font-size: var(--f1); color: var(--ink-2); }

/* 03 Header: slate rail above, paper bar below ----------------------------- */
/* The rail is the invariant: the phone number sits in the top strip on every
   page at every width, so it is reachable without scrolling. The bar below it
   holds the wordmark and, above 940px, the links. */

.hd { position: sticky; top: 0; z-index: 40; }

.rail { background: var(--ink); color: #e9ebef; font-size: var(--f-sm); }
.rail .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; }
.rail__where { margin: 0; color: #b9bec8; }
.rail__where b { color: #fff; font-weight: 600; }
.rail__tel {
  display: inline-flex; align-items: center; gap: 0.5rem; color: #fff;
  font-weight: 700; font-size: 1.04rem; text-decoration: none; white-space: nowrap;
}
.rail__tel:hover { color: #fff; text-decoration: underline; }
.rail__tel svg { width: 17px; height: 17px; flex: none; color: #e8a46a; }
.rail__call { display: none; }

.bar { background: var(--panel); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }

.wordmark { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.wordmark svg { width: 30px; height: 30px; flex: none; }
.wordmark span { display: block; }
.wordmark b { display: block; font-size: 1.1rem; line-height: 1.15; color: var(--ink); letter-spacing: -0.015em; }
.wordmark small {
  display: block; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

.qanav { display: flex; align-items: center; }
.qanav a {
  padding: 0.35rem 0.95rem; font-family: var(--disp); font-size: 0.95rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none; border-left: 1px solid var(--line);
}
.qanav a:first-child { border-left: 0; }
.qanav a:hover { color: var(--amber); }
.qanav a[aria-current="page"] { color: var(--amber); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

.nav-toggle {
  display: none; width: 46px; height: 46px; padding: 0; background: none;
  border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; margin: 0 auto; }

/* 04 Layout primitives and the corner tick --------------------------------- */
/* The tick is this site's signature mark: a short amber L drawn over the top
   left corner of every panel and of the section heads. It carries no content
   and vanishes cleanly if the stylesheet never loads. */

.sec { padding: var(--pad-y) 0; }
.sec--panel { background: var(--panel); }
.sec--band { background: var(--band); }
.sec--ink { background: var(--ink); color: #d8dbe2; }
.sec--ink :where(h1, h2, h3) { color: #fff; }
.sec--ink p { color: #c7cbd3; }
.sec--ink strong, .sec--ink b { color: #fff; }
.sec--ink a:not(.btn) { color: #f0b47c; }

.tick { position: relative; padding-top: 1.1rem; }
.tick::before {
  content: ""; position: absolute; top: 0; left: 0; width: var(--tick); height: var(--tick);
  border-top: 3px solid var(--amber); border-left: 3px solid var(--amber);
}
.sec--ink .tick::before { border-color: #e8a46a; }
.sec--ink .eyebrow, .pn--ink .eyebrow { color: #e8a46a; }

.pn {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(1.2rem, 1rem + 1.1vw, 1.9rem);
}
.pn::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: var(--tick); height: var(--tick);
  border-top: 3px solid var(--amber); border-left: 3px solid var(--amber);
}
.pn > :last-child { margin-bottom: 0; }
.pn--band { background: var(--paper); }
.pn--ink { background: var(--ink); border-color: var(--ink); color: #c7cbd3; }
.pn--ink :where(h2, h3) { color: #fff; }
.pn--ink strong, .pn--ink b { color: #fff; }
.pn--ink::before { border-color: #e8a46a; }
.pn--flag { background: var(--amber-l); border-color: #e3c3a3; }

.grid { display: grid; gap: clamp(1rem, 0.8rem + 1vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

[data-reveal] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
  [data-reveal].is-revealed { opacity: 1; transform: none; }
}

/* 05 Buttons, lists, figures ----------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.4rem;
  border: 2px solid var(--amber); border-radius: var(--r); background: var(--amber);
  color: #fff; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--amber-d); border-color: var(--amber-d); color: #fff; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ghost { background: none; color: var(--amber); }
.btn--ghost:hover { background: var(--amber-l); color: var(--amber-d); }
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: #e9ebef; border-color: #e9ebef; color: var(--ink); }
.btns { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

.ul { margin: 0 0 1em; padding: 0; list-style: none; max-width: var(--col); }
.ul li { position: relative; padding-left: 1.3rem; margin-bottom: 0.5rem; }
.ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 2px; background: var(--amber); }
.ul li:last-child { margin-bottom: 0; }
.sec--ink .ul li::before, .pn--ink .ul li::before { background: #e8a46a; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.2rem; }
.stat { border-top: 3px solid var(--amber); padding-top: 0.8rem; }
.stat b { display: block; font-size: var(--f2); line-height: 1.1; }
.stat span { display: block; font-size: var(--f-sm); color: var(--muted); }
.sec--ink .stat { border-top-color: #e8a46a; }
.sec--ink .stat span { color: #aeb4bf; }

figure { margin: 0; }
figure img, .ph { display: block; width: 100%; height: auto; border-radius: var(--r); }
.img-placeholder {
  min-height: 180px; aspect-ratio: 4 / 3; background: var(--band);
  border: 1px dashed var(--line); border-radius: var(--r); color: var(--muted);
}
figcaption { margin-top: 0.6rem; font-size: var(--f-sm); color: var(--muted); max-width: 46ch; }

.map { width: 100%; height: 340px; border: 1px solid var(--line); border-radius: var(--r); }

/* 06 Home page ------------------------------------------------------------- */
/* Split hero: the argument on the left, one tall photograph on the right. */

.hero { background: var(--panel); border-bottom: 1px solid var(--line); padding: clamp(2.2rem, 1.8rem + 2.4vw, 4rem) 0; }
.hero .wrap { display: grid; gap: clamp(1.6rem, 1.2rem + 2vw, 3rem); align-items: center; }
.hero__fig { max-width: 420px; }
.hero__fig .img-placeholder { aspect-ratio: 3 / 4; }
.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 46ch; }
.hero__note { margin-top: 1.2rem; font-size: var(--f-sm); color: var(--muted); max-width: 44ch; }

@media (min-width: 860px) {
  .hero .wrap { grid-template-columns: 1.15fr 0.85fr; }
}

.thread { display: grid; gap: clamp(1rem, 0.8rem + 1vw, 1.6rem); }
@media (min-width: 820px) { .thread { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }

.aud { display: grid; gap: clamp(1rem, 0.8rem + 1.2vw, 1.8rem); }
@media (min-width: 820px) { .aud { grid-template-columns: 1fr 1fr; } }
.aud__h { display: flex; align-items: baseline; gap: 0.6rem; }
.aud__h span {
  font-family: var(--disp); font-size: var(--f-xs); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--amber);
}

.callband { background: var(--ink); color: #c7cbd3; padding: var(--pad-y) 0; }
.callband .wrap { display: grid; gap: 1.4rem; align-items: center; }
.callband h2 { color: #fff; }
.callband p { color: #c7cbd3; }
.callband__tel {
  display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--disp);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); font-weight: 700; color: #fff; text-decoration: none;
}
.callband__tel:hover { color: #fff; text-decoration: underline; }
.callband__tel svg { width: 26px; height: 26px; flex: none; color: #e8a46a; }
@media (min-width: 820px) { .callband .wrap { grid-template-columns: 1.3fr 0.7fr; } }

/* 07 Inner pages and the elevation device ---------------------------------- */

.ph-hd { background: var(--panel); border-bottom: 1px solid var(--line); padding: clamp(2rem, 1.7rem + 1.6vw, 3.2rem) 0; }
.ph-hd p { max-width: 58ch; }
.crumbs { margin: 0 0 0.9rem; font-size: var(--f-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--amber); }

.qaq { border-top: 1px solid var(--line); padding: 0.9rem 0; max-width: 78ch; }
.qaq:last-of-type { border-bottom: 1px solid var(--line); }
.qaq summary { font-family: var(--disp); font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; padding-right: 2rem; position: relative; }
.qaq summary::after { content: "+"; position: absolute; right: 0; top: -0.1em; font-size: 1.3rem; color: var(--amber); line-height: 1; }
.qaq[open] summary::after { content: "\2212"; }
.qaq > div { padding-top: 0.7rem; }

/* The device. Both pickers ship as ordinary radios in a plain fieldset and
   every answer block ships visible, so with JS off the page reads as a
   complete article. Only the filtering is scripted. */
.dev { margin-top: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); }
.dev__pick { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem); }
.dev__sets { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .dev__sets { grid-template-columns: 1fr 1fr; } }
.dev fieldset { margin: 0; padding: 0; border: 0; }
.dev legend {
  padding: 0; margin-bottom: 0.7rem; font-family: var(--disp); font-size: var(--f-xs);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber);
}
.opts { display: grid; gap: 0.4rem; }
.opts label { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0.5rem; border-radius: var(--r); cursor: pointer; font-size: var(--f-sm); }
.opts label:hover { background: var(--amber-l); }
.opts input { margin: 0.35rem 0 0; accent-color: var(--amber); flex: none; }
.dev__out { display: grid; gap: clamp(1rem, 0.8rem + 1vw, 1.6rem); margin-top: clamp(1.1rem, 0.9rem + 1vw, 1.7rem); }

/* 08 Contact --------------------------------------------------------------- */

.ct { display: grid; gap: clamp(1.2rem, 1rem + 1.4vw, 2rem); }
@media (min-width: 820px) { .ct { grid-template-columns: 1fr 1fr; align-items: start; } }
.ct__tel {
  display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--disp);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); font-weight: 700; color: var(--ink); text-decoration: none;
}
.ct__tel svg { width: 26px; height: 26px; flex: none; color: var(--amber); }
.ct dl { margin: 0; }
.ct dt { font-family: var(--disp); font-weight: 700; color: var(--ink); margin-top: 1rem; }
.ct dt:first-child { margin-top: 0; }
.ct dd { margin: 0.2rem 0 0; }

/* 09 Footer ---------------------------------------------------------------- */

.ft { background: var(--ink); color: #aeb4bf; padding: var(--pad-y) 0 1.6rem; font-size: var(--f-sm); }
.ft__row { display: grid; gap: 1.6rem; }
@media (min-width: 760px) { .ft__row { grid-template-columns: 1.6fr 0.7fr 1fr; } }
.ft h2 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 0.7rem; }
.ft__name { font-family: var(--disp); font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.ft p { color: #aeb4bf; max-width: 50ch; }
.ft ul { margin: 0; padding: 0; list-style: none; }
.ft li { margin-bottom: 0.35rem; }
.ft a { color: #e2e5ea; }
.ft a:hover { color: #fff; }
.ft__base { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid #3b3f48; font-size: var(--f-xs); color: #989eac; }

/* 10 Navigation breakpoint ------------------------------------------------- */
/* Matches NAV_BREAKPOINT in assets/js/main.js. */

@media (max-width: 939px) {
  .rail .wrap { min-height: 48px; }
  .rail__where { display: none; }
  .rail__tel { font-size: 1rem; }
  .rail__call {
    display: inline-flex; align-items: center; padding: 0.3rem 0.85rem; border-radius: var(--r);
    background: var(--amber); color: #fff; font-family: var(--disp); font-size: 0.86rem;
    font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  }
  .rail__call:hover { background: var(--amber-d); color: #fff; }
  .bar { position: relative; }
  .bar .wrap { min-height: 60px; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .qanav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; padding: 0.4rem var(--pad) 1rem; background: var(--panel);
    border-bottom: 1px solid var(--line); box-shadow: 0 14px 28px rgba(42, 45, 52, 0.12); z-index: 41;
  }
  .qanav.is-open { display: flex; }
  .qanav a { padding: 0.75rem 0; border-left: 0; border-top: 1px solid var(--line); font-size: 1.02rem; }
  .qanav a:first-child { border-top: 0; }
  .wordmark small { display: none; }
}

@media (max-width: 380px) {
  .wordmark b { font-size: 0.98rem; }
  .rail__call { padding: 0.3rem 0.6rem; }
}