/* =====================================================
   HNO CLEANING SERVICES — Main stylesheet
   LIVE palette (matches hnocleaningservices.com):
     brand blue #0098DA | deep blue #00628C | light blue #56B9E4
   Font: Inter. Signature element: blue waves between sections.
   ===================================================== */

:root {
  --blue:       #0098DA;   /* dominant brand blue */
  --blue-dark:  #00628C;   /* deep blue — footer, hovers, dark CTAs */
  --blue-light: #56B9E4;   /* light blue accent */
  --blue-soft:  #e9f5fc;   /* very light blue tint for soft backgrounds */
  --white:      #ffffff;
  --offwhite:   #f9fafa;
  --panel:      #f3f5f8;
  --gray:       #f1f4f7;
  --text:       #333333;
  --heading:    #0e1117;   /* near-black headings */
  --muted:      #5c6b7a;
  --line:       #e3e9ef;
  --radius:     12px;
  --shadow:     0 8px 30px rgba(0,98,140,0.08);
  --shadow-lg:  0 18px 50px rgba(0,98,140,0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* O cabecalho e `position: sticky; top: 0`, entao todo link de ancora (#quote,
   #residential, #commercial, #one-time, #regular) aterrissava DEBAIXO dele: o
   alvo rolava ate y=0 e o cabecalho comia o topo. Medido no site rodando:
   o card #quote parava 69px acima da base do cabecalho no desktop e 61px no
   celular — o titulo "Get your free quote" ficava 36px/28px escondido, e o
   visitante via um campo de input orfao. Vale pros 110 links #quote das 22 LPs
   (destino pago de Google Ads) e e a causa do "See what's included" que o
   cliente relatou como quebrado — o link nunca esteve quebrado, so rolava pro
   lugar errado.

   96px = o cabecalho mais alto do site (75px na home/services; a LP tem 69px no
   desktop e 61px no celular) + ~21px de respiro. Um valor unico cobre os tres.

   scroll-padding-top no `html` e nao scroll-margin-top nos alvos: e uma regra so
   pro container de rolagem, cobre ancora nova sem ninguem lembrar de marcar o
   alvo, e vale tambem pro foco do teclado (Tab) — nao so pro clique. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--white);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 15px 30px; border-radius: 10px;
  font-weight: 700; font-size: 1rem; line-height: 1;
  cursor: pointer; border: none; min-height: 48px;
  transition: transform .15s, box-shadow .2s, background .2s;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(0,152,218,.35); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-deep  { background: var(--blue-dark); color: #fff; }
.btn-deep:hover { background: #004d6e; }
.btn-ghost { background: #fff; color: var(--blue-dark); border: 2px solid var(--blue); }
.btn-ghost:hover { background: var(--blue); color: #fff; }
.btn-white { background: #fff; color: var(--blue-dark); }
.btn-full  { width: 100%; }
.btn-lg    { padding: 18px 40px; font-size: 1.1rem; }

/* ---- TOP BAR — REMOVED (client feedback: duplicated the hero badge + CTA).
   Click-to-call now lives in .header-call inside the sticky header below.
   Do not reintroduce .topbar without checking the hero badge first. ---- */

/* ---- HEADER ---- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 14px rgba(0,98,140,.05);
}
.header-inner { display: flex; align-items: center; gap: 26px; height: 74px; }
.logo-link { flex-shrink: 0; display: inline-flex; align-items: center; }
.logo-img { height: 34px; width: auto; }
/* CSS wordmark fallback — only shown if the PNG fails to load */
.logo-wordmark {
  align-items: center; gap: 7px;
  background: #fff; padding: 6px 4px; border-radius: 8px;
}
.logo-hno {
  background: var(--blue); color: #fff; font-weight: 900; font-size: 1.15rem;
  letter-spacing: 1px; padding: 5px 9px; border-radius: 7px;
}
.logo-rest { color: var(--blue-dark); font-weight: 800; font-size: 1.02rem; letter-spacing: .2px; }

.header-nav { display: flex; gap: 22px; margin-left: auto; }
.header-nav a {
  color: var(--text); font-size: .93rem; font-weight: 600;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.header-nav a:hover, .header-nav a.is-active { color: var(--blue); border-color: var(--blue); }

.btn-quote {
  background: var(--blue); color: #fff; font-weight: 800; font-size: .92rem;
  padding: 12px 22px; border-radius: 9px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,152,218,.35); transition: background .2s, transform .15s;
}
.btn-quote:hover { background: var(--blue-dark); transform: translateY(-1px); }

/* ---- HEADER CLICK-TO-CALL (replaces the removed topbar) ----
   ~80-90% of HNO traffic is mobile and the phone is the main conversion
   channel, so this must stay tappable at 375px on EVERY page. It sits in the
   sticky header, which also covers the pages that have no .float-call button. */
.header-call {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 12px; border-radius: 9px;
  color: var(--blue-dark); font-weight: 800; font-size: .95rem;
  white-space: nowrap; transition: color .2s, background .2s;
}
.header-call:hover { color: var(--blue); background: var(--blue-soft); }
.header-call-icon  { font-size: 1.1rem; line-height: 1; }
.header-call-short { display: none; }   /* mobile-only short label */

.menu-toggle {
  display: none; background: none; border: none; color: var(--blue-dark);
  font-size: 1.7rem; cursor: pointer; margin-left: auto; line-height: 1;
}
.mobile-nav { display: none; flex-direction: column; background: #fff; padding: 14px 22px 20px; gap: 4px; border-top: 1px solid var(--line); }
.mobile-nav.open { display: flex; }
.mobile-nav a { color: var(--text); font-size: 1rem; font-weight: 600; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.mobile-nav .btn-quote { margin-top: 10px; text-align: center; border-bottom: none; }
.mobile-nav .btn-quote-call { background: var(--blue-dark); }

/* ---- SIGNATURE WAVES ---- */
.hno-waves { line-height: 0; }
.hno-waves svg { display: block; width: 100%; height: 46px; }

/* ---- SECTION HELPERS ---- */
.section { padding: 76px 0; }
.section-sm { padding: 54px 0; }
.section-cream { background: var(--offwhite); }
.section-blue-soft { background: var(--blue-soft); }
.eyebrow {
  font-size: .78rem; font-weight: 800; color: var(--blue);
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px;
}
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
h1, h2, h3 { color: var(--heading); line-height: 1.15; }
.section-title { font-size: 2.1rem; font-weight: 800; letter-spacing: -.5px; }
.section-lead { color: var(--muted); font-size: 1.08rem; margin-top: 14px; }

/* ---- HERO ---- */
.hero { position: relative; background: var(--blue-dark); overflow: hidden; }
.hero-photo { position: absolute; inset: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,72,105,.94) 0%, rgba(0,98,140,.80) 42%, rgba(0,98,140,.30) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 96px 0 104px; max-width: 640px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.24);
  padding: 7px 15px; border-radius: 40px; font-size: .82rem; font-weight: 600; margin-bottom: 22px;
}
.hero-badge .stars { color: #ffd36b; letter-spacing: 1px; }
.hero h1 {
  color: #fff; font-size: 3rem; font-weight: 900; letter-spacing: -1px;
  text-transform: uppercase; line-height: 1.05;
}
.hero h1 em { color: var(--blue-light); font-style: normal; }
.hero-sub { color: rgba(255,255,255,.9); font-size: 1.15rem; margin: 20px 0 30px; max-width: 540px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 34px;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,.2);
}
.hero-trust-item { color: #fff; font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.hero-trust-item .dot { color: var(--blue-light); font-size: 1.1rem; }

/* ---- VALUE PROPS STRIP ---- */
/* 6 value props numa grade de 4 colunas deixava 2 celulas vazias na 2a fileira
   (o "card com buraco" relatado). auto-fit preenche sozinho em qualquer largura. */
.props-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
/* 280 e nao 240: o container util tem ~1136px. Com 240 cabiam 4 colunas
   (4x240+3x18=1014) e 6 itens em 4 colunas deixam 2 celulas vazias. Com 280
   a 4a nao cabe (4x280+3x18=1174 > 1136), entao trava em 3 = 2 fileiras cheias. */
/* /about: 6 cards -> 3 colunas cheias. Era style inline, que vencia as media
   queries e espremia 3 colunas de ~120px no celular, estourando a tela. */
.props-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .props-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .props-grid-3 { grid-template-columns: 1fr; } }
.prop {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.prop:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.prop-ic {
  width: 46px; height: 46px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.prop-ic svg { width: 24px; height: 24px; }
.prop h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; }
.prop p  { color: var(--muted); font-size: .9rem; }

/* ---- SERVICES CARDS ---- */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.service-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.service-photo { aspect-ratio: 16/10; overflow: hidden; background: var(--gray); position: relative; }
.service-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.service-card:hover .service-photo img { transform: scale(1.05); }
/* Icon service cards: contain the line-art on a soft-blue panel — never crop */
/* Tile de categoria: icone branco sobre azul da marca, ocupando a caixa.
   Antes era um desenho pequeno boiando num painel claro ao lado de dois cards
   com foto sangrada — a leitura era de "imagem nao carregou". */
.service-photo.is-icon {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  display: flex; align-items: center; justify-content: center;
}
.service-photo.is-icon img {
  width: auto; height: auto; max-width: 62%; max-height: 70%; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .95;
}
.service-card:hover .service-photo.is-icon img { transform: scale(1.04); }
.service-tag {
  position: absolute; top: 14px; left: 14px; background: rgba(0,98,140,.92); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 30px;
}
.service-body { padding: 26px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.service-body h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: 8px; }
.service-body p { color: var(--muted); font-size: .95rem; margin-bottom: 16px; }
.service-link { margin-top: auto; color: var(--blue); font-weight: 700; font-size: .92rem; }
.service-link:hover { color: var(--blue-dark); }

/* ---- CHECKLISTS (services detail) ---- */
.checklist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.checklist {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow);
}
/* Room checklist icon chip: contained line-art on a soft-blue tile — never stretched */
.checklist-photo { width: 72px; height: 72px; margin: 26px 28px 0; border-radius: 16px; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; padding: 14px; }
.checklist-photo img { width: 100%; height: 100%; object-fit: contain; }
.checklist-body { padding: 16px 28px 30px; }
.checklist h3 {
  font-size: 1.2rem; font-weight: 800; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 2px solid var(--blue-soft);
}
.checklist ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.checklist li { position: relative; padding-left: 30px; color: var(--text); font-size: .95rem; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--blue); }
.checklist li::after {
  content: ''; position: absolute; left: 6px; top: 7px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---- SPLIT (photo + text) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.split-photo img { border-radius: 16px; box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split figcaption, .photo-caption {
  font-size: .82rem; color: var(--muted); margin-top: 10px; text-align: center; font-style: italic;
}
.split-text h2 { font-size: 2rem; font-weight: 800; margin-bottom: 16px; letter-spacing: -.5px; }
.split-text p { color: var(--muted); margin-bottom: 14px; }
.split-text .btn { margin-top: 12px; }

/* ---- STAT / GUARANTEE band ---- */
.band { background: var(--blue); color: #fff; }
.band .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 54px; padding-bottom: 54px; }
.band-item { text-align: center; }
.band-item .num { font-size: 2.4rem; font-weight: 900; color: #fff; line-height: 1; }
.band-item .lbl { font-size: .9rem; color: rgba(255,255,255,.9); margin-top: 8px; }

/* ---- REVIEWS ---- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.review .stars { color: #f5b301; letter-spacing: 2px; margin-bottom: 14px; font-size: 1rem; }
.review-text { color: var(--text); font-size: .96rem; line-height: 1.7; margin-bottom: 20px; }
.review-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem;
}
.review-name { font-weight: 800; font-size: .95rem; color: var(--blue-dark); }
.review-loc  { font-size: .82rem; color: var(--muted); }

/* ---- CTA BANNER ---- */
.cta-band { background: linear-gradient(120deg, var(--blue) 0%, var(--blue-dark) 100%); color: #fff; }
.cta-band .container {
  display: flex; align-items: center; justify-content: space-between; gap: 34px;
  flex-wrap: wrap; padding-top: 60px; padding-bottom: 60px;
}
.cta-band h2 { color: #fff; font-size: 2rem; font-weight: 900; max-width: 640px; }
.cta-band p { color: rgba(255,255,255,.9); margin-top: 10px; max-width: 560px; }
.cta-band .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- SERVICE AREA STRIP ---- */
.area-strip { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; }
.area-strip .area-map img { border-radius: 16px; box-shadow: var(--shadow); width: 100%; object-fit: cover; }
/* Icon variant: contain the line-art map icon centered on a soft-blue panel */
.area-map.is-icon { background: var(--blue-soft); border-radius: 16px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; padding: 40px; box-shadow: var(--shadow); }
.area-map.is-icon img { width: auto; height: auto; max-width: 72%; max-height: 72%; object-fit: contain; box-shadow: none; border-radius: 0; }
.area-strip h2 { font-size: 2rem; font-weight: 800; margin-bottom: 14px; }
.area-strip p { color: var(--muted); margin-bottom: 12px; }
.area-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 20px; }
.area-pill { background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; font-size: .85rem; padding: 7px 14px; border-radius: 30px; }
.area-pill-link { transition: background .18s, color .18s, transform .12s; }
.area-pill-link:hover { background: var(--blue); color: #fff; transform: translateY(-1px); }

/* ---- BLOG ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--blue-soft); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.post-card:hover .post-thumb img { transform: scale(1.04); }
.post-card-body { padding: 24px 22px; flex: 1; display: flex; flex-direction: column; }
.post-meta { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.post-title { font-size: 1.08rem; font-weight: 800; color: var(--blue-dark); margin-bottom: 10px; line-height: 1.35; }
.post-excerpt { font-size: .9rem; color: var(--muted); margin-bottom: 16px; }
.post-more { margin-top: auto; color: var(--blue); font-weight: 700; font-size: .9rem; }

/* ---- SINGLE POST ---- */
.post-page-bg { background: var(--offwhite); padding: 40px 20px 70px; }
.post-page-wrap { max-width: 780px; margin: 0 auto; }
.post-breadcrumb { font-size: .82rem; color: var(--muted); margin-bottom: 20px; display: flex; gap: 6px; flex-wrap: wrap; }
.post-breadcrumb a { color: var(--blue); font-weight: 600; }
.post-breadcrumb a:hover { color: var(--blue-dark); }
.article-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.article-card-foto img { width: 100%; height: 340px; object-fit: cover; display: block; }
.article-card-body { padding: 40px 44px 44px; }
.article-title { font-size: 2rem; font-weight: 900; color: var(--heading); line-height: 1.18; margin-bottom: 12px; }
.article-metaline { display: flex; gap: 16px; align-items: center; font-size: .82rem; color: var(--muted); margin-bottom: 22px; }
.article-readtime { background: var(--blue-soft); color: var(--blue-dark); padding: 3px 11px; border-radius: 20px; font-weight: 700; }
.article-excerpt { font-size: 1.06rem; color: #44525f; line-height: 1.7; border-left: 4px solid var(--blue); padding-left: 16px; margin-bottom: 28px; }
.article-content { color: #33414d; line-height: 1.85; }
.article-content h2 { font-size: 1.4rem; font-weight: 800; color: var(--blue-dark); margin: 32px 0 12px; }
.article-content h3 { font-size: 1.12rem; font-weight: 700; margin: 24px 0 8px; }
.article-content p { margin-bottom: 16px; }
.article-content ul, .article-content ol { margin: 0 0 16px 24px; }
.article-content li { margin-bottom: 8px; }
.article-content a { color: var(--blue); font-weight: 600; }
.article-content strong { color: var(--blue-dark); }
.article-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--blue-dark); border-radius: 14px; padding: 24px 26px; margin-top: 40px;
}
.article-cta-txt { color: #fff; font-size: .96rem; line-height: 1.5; }
.article-cta-txt strong { font-size: 1.08rem; display: block; margin-bottom: 2px; }
.article-cta .btn { flex-shrink: 0; }

/* ---- PAGE HERO (interior pages) ---- */
.page-hero { background: var(--blue); color: #fff; padding: 62px 0 60px; position: relative; }
.page-hero h1 { color: #fff; font-size: 2.5rem; font-weight: 900; letter-spacing: -.5px; text-transform: uppercase; }
.page-hero p { color: rgba(255,255,255,.92); margin-top: 12px; font-size: 1.1rem; max-width: 620px; }
.page-hero .breadcrumb { font-size: .82rem; color: rgba(255,255,255,.75); margin-bottom: 14px; }
.page-hero .breadcrumb a { color: #fff; text-decoration: underline; }

/* ---- FORMS ---- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 40px;
  box-shadow: var(--shadow-lg); max-width: 720px; margin: 0 auto;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.field label { font-size: .88rem; font-weight: 700; color: var(--blue-dark); }
.field-required::after { content: ' *'; color: var(--blue); }
.field input, .field select, .field textarea {
  padding: 13px 15px; border: 2px solid var(--line); border-radius: 10px;
  font-size: .97rem; font-family: inherit; color: var(--text); background: #fff;
  transition: border-color .2s; min-height: 48px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.field textarea { resize: vertical; min-height: 130px; }
.field-hint { font-size: .8rem; color: var(--muted); }
/* honeypot — hidden from humans */
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* ---- 2-STEP SERVICE PICKER (shared: LP hero form, quote.php, contact.php) ----
   Progressive enhancement: with JS off, NOTHING here is hidden — every step and
   field stays visible and submittable. The reveal rules below are all scoped to
   `.js-steps`, a class only main.js ever adds. */
.hno-steps { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.hno-steps.is-compact { gap: 14px; margin-bottom: 14px; }
.hno-step-q {
  display: block; font-size: .88rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 9px;
}
.hno-step-q .req { color: var(--blue); }
.hno-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hno-choice { display: block; cursor: pointer; }
/* Visually hidden but focusable + screen-reader readable */
.hno-choice input {
  /* Hard-hide the native control. min-height/appearance are reset explicitly:
     the form's own `.lp-form input { min-height: 46px }` has equal specificity
     and would otherwise keep the radio 46px tall — which is what rendered as a
     giant circle when this stylesheet loaded stale/partially. */
  position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  -webkit-appearance: none; appearance: none; pointer-events: none;
}
.hno-choice-box {
  /* One row, not a stacked card. Four stacked icon+title+subtitle cards pushed
     the form to ~1055px and dwarfed the hero; each option now sits on a single
     line. min-height holds the 48px touch target. */
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 8px; border: 2px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .12s;
  min-height: 48px; height: 100%;
}
.hno-choice:hover .hno-choice-box { border-color: var(--blue-light); background: var(--blue-soft); }
.hno-choice-ic { font-size: 1.05rem; line-height: 1; }
.hno-choice-t { font-weight: 700; font-size: .9rem; color: var(--heading); }
/* Selected state */
.hno-choice input:checked + .hno-choice-box {
  border-color: var(--blue); background: var(--blue-soft);
  box-shadow: 0 4px 12px rgba(0,152,218,.16);
}
.hno-choice input:checked + .hno-choice-box .hno-choice-t { color: var(--blue-dark); }
/* Keyboard focus ring */
.hno-choice input:focus-visible + .hno-choice-box { outline: 3px solid var(--blue-light); outline-offset: 2px; }
/* JS-only progressive reveal — never applied without JS */
.js-steps .hno-step-locked { display: none; }


.alert { padding: 15px 20px; border-radius: 10px; margin-bottom: 24px; font-weight: 500; }
.alert-success { background: #e8f6ef; color: #1b7a4b; border: 1px solid #a9dcc3; }
.alert-error   { background: #fdecec; color: #c0392b; border: 1px solid #f2b8b3; }
.alert-info    { background: var(--blue-soft); color: var(--blue-dark); border: 1px solid #bfe1ea; }

/* ---- CONTACT INFO GRID ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 44px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 20px; }
.contact-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-item .ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--blue-soft); color: var(--blue-dark); display: flex; align-items: center; justify-content: center; }
.contact-item h4 { font-size: .95rem; font-weight: 800; margin-bottom: 2px; }
.contact-item p, .contact-item a { color: var(--muted); font-size: .95rem; }
.contact-item a:hover { color: var(--blue-dark); }

/* ---- PROSE (legal pages) ---- */
.prose-page { padding: 54px 0; }
.prose-page .container { max-width: 840px; }
.prose-page .updated { font-size: .85rem; color: var(--muted); margin-bottom: 30px; }
.prose-page h2 { font-size: 1.28rem; font-weight: 800; color: var(--blue-dark); margin: 30px 0 10px; }
.prose-page p { margin-bottom: 14px; line-height: 1.8; color: #3c4954; }
.prose-page ul { margin: 0 0 14px 24px; }
.prose-page li { margin-bottom: 8px; color: #3c4954; line-height: 1.8; }
.prose-page a { color: var(--blue); }

/* ---- FOOTER ---- */
.site-footer { background: var(--blue-dark); color: #fff; padding: 58px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; }
.footer-logo { margin-bottom: 16px; display: inline-flex; }
.footer-logo .logo-img { height: 30px; filter: brightness(0) invert(1); }
.logo-wordmark-footer .logo-hno { background: var(--blue-light); }
.logo-wordmark-footer .logo-rest { color: #fff; }
.footer-tagline { font-size: .9rem; color: rgba(255,255,255,.72); line-height: 1.75; max-width: 380px; }
.footer-col h4 { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.65); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { color: rgba(255,255,255,.85); font-size: .92rem; transition: color .2s; }
.footer-col ul a:hover { color: var(--blue-light); }
.footer-muted { color: rgba(255,255,255,.68); font-size: .9rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding: 22px 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer-bottom p { font-size: .82rem; color: rgba(255,255,255,.6); }
.footer-bottom-links { display: flex; gap: 18px; }
.footer-bottom-links a { color: rgba(255,255,255,.7); font-size: .82rem; }
.footer-bottom-links a:hover { color: #fff; }
.footer-dev { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: rgba(255,255,255,.6); }

/* ---- FLOATING MOBILE CALL BUTTON ---- */
.float-call {
  display: none; position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; font-weight: 800; font-size: .95rem;
  padding: 14px 30px; border-radius: 40px; box-shadow: 0 8px 26px rgba(0,98,140,.32);
  z-index: 999; white-space: nowrap; align-items: center; gap: 8px;
}

/* =====================================================
   ADMIN
   ===================================================== */
.admin-body { background: #eef2f6; color: var(--text); }
.admin-header {
  background: var(--blue-dark); color: #fff; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 200;
}
.admin-header h1 { font-size: 1rem; font-weight: 800; color: #fff; }
.admin-nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.admin-nav a { color: rgba(255,255,255,.82); font-size: .82rem; padding: 6px 10px; border-radius: 6px; white-space: nowrap; transition: background .15s; }
.admin-nav a:hover, .admin-nav a.ativo { background: rgba(255,255,255,.15); color: #fff; }
.admin-hamburger { display: none; background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; }
.admin-nav-mobile { display: none; flex-direction: column; background: #004d6e; padding: 8px 12px 16px; }
.admin-nav-mobile a { color: rgba(255,255,255,.85); padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .95rem; }
.admin-nav-mobile.open { display: flex; }
.admin-content { max-width: 1180px; margin: 0 auto; padding: 28px 20px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.dash-greeting { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.dash-greeting h2 { font-size: 1.35rem; font-weight: 900; }
.nivel-badge { font-size: .76rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; background: var(--blue); color: #fff; text-transform: uppercase; letter-spacing: .5px; }

.quick-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-bottom: 30px; }
.quick-card { background: #fff; border-radius: 12px; padding: 20px 18px; box-shadow: 0 1px 6px rgba(0,98,140,.08); color: var(--blue-dark); display: flex; flex-direction: column; gap: 8px; border: 2px solid transparent; transition: border-color .15s, box-shadow .15s; }
.quick-card:hover { border-color: var(--blue); box-shadow: 0 4px 16px rgba(0,98,140,.12); }
.quick-card-icon { font-size: 1.7rem; line-height: 1; }
.quick-card-title { font-weight: 800; font-size: .95rem; }
.quick-card-desc { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.quick-card.blue-accent { border-left: 4px solid var(--blue); }
.quick-card.deep-accent { border-left: 4px solid var(--blue-dark); }
.quick-card.green-accent { border-left: 4px solid #2e7d32; }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
.stat-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 4px rgba(0,98,140,.08); }
.stat-card .num { font-size: 2rem; font-weight: 900; color: var(--blue-dark); }
.stat-card .lbl { font-size: .82rem; color: var(--muted); margin-top: 4px; }
.stat-card.blue .num { color: var(--blue); }
.stat-card.amber .num { color: #e08a00; }
.stat-card.green .num { color: #2e7d32; }

.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,98,140,.08); overflow: hidden; }
.table-card-header { padding: 18px 24px; border-bottom: 1px solid var(--line); font-weight: 700; }
table.admin-table { width: 100%; border-collapse: collapse; }
table.admin-table th { background: #f6f8fa; padding: 12px 16px; font-size: .78rem; text-align: left; color: #7a8794; text-transform: uppercase; }
table.admin-table td { padding: 14px 16px; border-top: 1px solid #eef2f6; font-size: .9rem; vertical-align: middle; }
table.admin-table tr:hover td { background: #f9fbfc; }

.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 50px; font-size: .74rem; font-weight: 700; }
.status-new     { background: #fff4e0; color: #b3690b; }
.status-contacted { background: var(--blue-soft); color: var(--blue-dark); }
.status-won     { background: #e8f6ef; color: #1b7a4b; }
.status-lost    { background: #f1f4f7; color: #7a8794; }
.status-publicado { background: #e8f6ef; color: #1b7a4b; }
.status-rascunho  { background: #fff4e0; color: #b3690b; }

.btn-action { padding: 6px 14px; border-radius: 6px; font-size: .8rem; font-weight: 700; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.btn-action.blue { background: var(--blue-soft); color: var(--blue-dark); }
.btn-action.deep { background: #e0edf4; color: var(--blue-dark); }
.btn-action.gray { background: #f1f4f7; color: #6b7885; }
.btn-action.green { background: #e8f6ef; color: #1b7a4b; }
.btn-action.red { background: #fdecec; color: #c0392b; }

.login-box { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #eef2f6; padding: 20px; }
.login-card { background: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,98,140,.12); width: 100%; max-width: 380px; }
.login-card h2 { font-size: 1.5rem; font-weight: 900; color: var(--blue-dark); margin-bottom: 6px; }
.login-card p { color: var(--muted); font-size: .9rem; margin-bottom: 28px; }
.login-card .field input { width: 100%; }

/* =====================================================
   COOKIE BANNER
   ===================================================== */
#cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--blue-dark); border-top: 3px solid var(--blue); z-index: 9999; padding: 16px 0; }
.cookie-content { max-width: 1180px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cookie-content p { font-size: .88rem; color: rgba(255,255,255,.9); }
.cookie-content a { color: var(--blue-light); text-decoration: underline; }
.btn-cookie { background: var(--blue); color: #fff; border: none; padding: 11px 26px; border-radius: 8px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 980px) {
  .header-nav { display: none; }
  .menu-toggle { display: block; }
  .btn-quote { display: none; }
  /* Nav + Free Quote are gone here, so the call button becomes the only
     header action: push it to the right, next to the hamburger, and shorten
     it to icon + "Call" so it never crowds the logo. */
  .header-call { margin-left: auto; gap: 6px; padding: 8px 10px;
                 background: var(--blue-soft); }
  .header-call-number { display: none; }
  .header-call-short  { display: inline; }
  .props-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .band .container { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .area-strip { grid-template-columns: 1fr; gap: 28px; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero h1 { font-size: 2.4rem; }
  .admin-nav { display: none; }
  .admin-hamburger { display: block; }
}
@media (max-width: 640px) {
  .header-inner { gap: 12px; height: 66px; }
  .section { padding: 52px 0; }
  .section-title { font-size: 1.7rem; }
  .props-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .checklist-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .band .container { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 26px 20px; }
  .hero-inner { padding: 66px 0 74px; }
  .hero h1 { font-size: 2rem; }
  .hero-sub { font-size: 1.02rem; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .page-hero h1 { font-size: 1.9rem; }
  .article-card-body { padding: 26px 22px 30px; }
  .article-card-foto img { height: 210px; }
  .article-title { font-size: 1.5rem; }
  .article-cta { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .float-call { display: inline-flex; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .quick-cards { grid-template-columns: 1fr 1fr; }
}
/* Small phones: the 300x48 logo renders 212px wide at 34px tall, which would
   collide with the call button + hamburger on a 375px screen. Shrink it so the
   header stays on ONE line and the call target keeps its 44px height. */
@media (max-width: 430px) {
  .logo-img { height: 26px; }
}
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- Brand FAQ (voice search / "Home and Office" clarity — home + about) ---- */
.lp-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.lp-faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 3px 14px rgba(0,98,140,.05); overflow: hidden;
}
.lp-faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 800; font-size: 1.04rem;
  color: var(--heading); display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
  content: '+'; color: var(--blue); font-size: 1.5rem; font-weight: 700; line-height: 1; flex-shrink: 0;
}
.lp-faq-item[open] summary::after { content: '\2013'; }
.lp-faq-item[open] summary { color: var(--blue-dark); }
.lp-faq-answer { padding: 0 24px 22px; color: var(--muted); font-size: .98rem; line-height: 1.75; }

/* ---- Two-up field rows in the quote form (approved 2026-08-08) ----
   row-gap 0 so the stacked (single-column) case falls back to each field's
   own margin-bottom instead of doubling the spacing. */
.lp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 420px) { .lp-row2 { grid-template-columns: 1fr; } }