/* ==========================================================================
   North Cleaning ATL — design system + components
   Single stylesheet on purpose: the whole thing is small enough that one
   render-blocking request beats splitting and chaining.

   1. Tokens
   2. Reset & base
   3. Utilities
   4. Buttons
   5. Header / navigation / promo bar
   6. Breadcrumbs
   7. Hero & page heroes
   8. Sections & shared blocks
   9. Cards (service, location, post, testimonial)
  10. Quote form
  11. Checklists, steps, timeline, comparison table
  12. FAQ accordion
  13. Areas
  14. CTA band
  15. Blog & prose
  16. Contact
  17. 404
  18. Footer & mobile action bar
  19. Motion
   ========================================================================== */

/* 1. TOKENS ================================================================ */

:root {
  /* ------------------------------------------------------------------
     Palette derived from the client's actual logo, not invented.
     The logo mark is #0EC0E0 — a bright cyan that is beautiful as a mark
     but only 2.2:1 on white, so it can never carry text or a button.
     So: cyan is the IDENTITY colour (mark, accents on dark, highlights),
     a deepened version of the same hue is the ACTION colour (passes AA),
     and a near-black blue-ink carries structure. Neutrals are cool greys;
     the warmth in the page comes from the photography, not from a beige
     wash — which also kills the sand-gradient look the first pass had.
     ------------------------------------------------------------------ */
  --brand-400: #46d3ec;
  --brand-500: #0ec0e0;   /* the logo cyan — mark, dark-bg accents only */
  --brand-600: #0aa2c1;

  --accent-700: #06596c;
  --accent-600: #086a80;
  --accent-500: #0a7a92;   /* 4.99:1 on white — buttons, links, icons */
  --accent-100: #d3ecf3;
  --accent-050: #edf7fa;

  --navy-900: #06212c;
  --navy-800: #0a2e3c;
  --navy-700: #12495e;
  --navy-600: #1d6480;
  --navy-100: #d7e5ea;

  --white: #ffffff;
  --paper: #ffffff;
  /* Redesign 09/2026 — the client asked for a white, clean page. The
     alternating ground is now a tint you have to look for rather than a
     visible grey band; what separates one section from the next is space and
     a hairline, not a change of colour. */
  --mist-100: #f4fafd;     /* alternating section ground — the "ice" break */
  --mist-200: #eaf2f6;
  /* Redesign 04/09/2026 (reference: amandasmaid.com). The client asked for a
     white page whose only break is a cold, quiet tint — never a strong band and
     never a dark one. Two tints, both cold, both barely there:
       --ice   a blue-white, the ground under stats / reviews / areas
       --ice-2 a grey-white with no hue, the ground under the footer
     Anything darker than these does not belong on this site. */
  --ice: #f2f9fc;
  --ice-2: #f4f6f8;
  --line: #e0e8eb;
  /* The flat sky-blue ground under the home banner photograph, so the black
     headline set on it has a measurable contrast (14:1) before the image
     arrives and whatever the image does. */
  --sky: #dbeefc;
  --line-strong: #c8d5da;

  --text: #12222a;         /* 15.2:1 on white */
  --text-muted: #52666e;   /* 5.9:1 on white */
  --text-invert: #ffffff;
  --text-invert-muted: #b3c8d1;
  /* The accent to use on the dark navy grounds (footer, CTA card, sidebar
     contact block). It is the logo cyan lightened, not a second hue: an
     earlier pass had a mint green and a sea-green gradient in here that
     belong to no part of the brand. */
  --on-dark: #46d3ec;

  --danger: #b3261e;
  --danger-bg: #fdf0ef;
  --success: #0a7a92;
  --gold: #e0a02a;

  /* Semantic */
  --bg: var(--white);
  --bg-muted: var(--mist-100);
  --bg-dark: var(--navy-800);

  /* Type — Archivo is a sturdy American grotesque with real character;
     it deliberately replaces the geometric-rounded sans that reads as a
     generated template. Inter carries body copy. */
  /* Redesign 04/09/2026: Poppins carries the headings. The reference site the
     client sent runs on Poppins throughout, and the geometric roundness is a
     large part of why it reads as friendly rather than corporate. Archivo stays
     as the first fallback so nothing shifts if the font request fails, and
     Inter still carries body copy — Poppins at 17px over five lines is tiring
     to read and the reference pays for that on its long paragraphs. */
  --font-display: 'Poppins', 'Archivo', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Redesign 06/09/2026: Poppins carries the body too. The reference runs one
     face throughout and a second face on the paragraphs was the most visible
     thing left of the old design. */
  --font-body: 'Poppins', 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9063rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --fs-h4: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  --fs-h3: clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --fs-h2: clamp(1.75rem, 2vw + 1.2rem, 2.875rem);
  --fs-h1: clamp(2rem, 3.2vw + 1.25rem, 3.375rem);
  --fs-hero: clamp(2.25rem, 3.6vw + 1.25rem, 4rem);

  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-body: 1.65;

  /* Space (8px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5.5rem;
  --section-y: clamp(3.25rem, 6vw, 6rem);

  /* Shape — deliberately mixed. Cards and inputs are softly rounded; tables,
     checklists and section edges stay square so the page doesn't read as a
     pile of pills. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Redesign 09/2026 — no drop shadows anywhere on this site. The tokens stay
     (every rule that asks for one keeps compiling) but they resolve to none,
     and depth is carried by the 1px --line border the cards already have.
     Focus rings are written literally, are not shadows, and are untouched. */
  /* Redesign 06/09/2026: soft, diffuse shadows are back — the reference the
     client wants copied is built on them (cards, form, buttons). They are
     cold-tinted and low, never a hard drop. */
  --shadow-xs: 0 1px 3px rgba(20, 50, 70, 0.06);
  --shadow-sm: 0 4px 14px -2px rgba(20, 50, 70, 0.08);
  --shadow-md: 0 10px 28px -6px rgba(20, 50, 70, 0.12);
  --shadow-lg: 0 20px 48px -12px rgba(20, 50, 70, 0.18);

  --container: 1200px;
  --container-narrow: 780px;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);

  /* ------------------------------------------------------------------
     THE RULER.

     Every surface on the page used to set its own padding and every grid
     its own column floor: nine different card paddings (24, 26, 28, 30, 32,
     36…) and five different `minmax()` floors (272, 280, 290, 300, 340).
     Measured at 1440 that produced 34 distinct left edges and 23 distinct
     block widths — which is what "not on the ruler" is, quantified. Text
     inside two cards side by side did not start at the same x.

     Two paddings and three column floors. Nothing else may invent its own.
     ------------------------------------------------------------------ */
  --pad-card: clamp(1.25rem, 2.2vw, 1.75rem);    /* 28px at 1440 */
  --pad-card-lg: clamp(1.5rem, 3vw, 2.25rem);    /* 36px — the form cards */

  --col-2: 340px;
  --col-3: 290px;
  --col-4: 215px;

  /* One gap for every card grid. Two different values (32 and 40) put the
     three-up grids on two different sets of column edges, which is where a
     third of the stray left axes came from. */
  --gap-grid: clamp(1.25rem, 2.5vw, 2rem);

  --header-h: 84px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

/* 2. RESET & BASE ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.021em;
  color: var(--navy-900);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-600); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-700); text-decoration-thickness: 2px; }

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
li { margin-bottom: var(--s-2); }

address { font-style: normal; }
strong { font-weight: 600; color: var(--navy-900); }
small { font-size: var(--fs-sm); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; background: var(--mist-200); padding: 0.1em 0.35em; border-radius: var(--r-xs); overflow-wrap: break-word; }

/* A file path, a bare URL or an email address is one unbreakable token to the
   line-breaker. On a 360px phone that is enough to push the whole document
   sideways — it was doing exactly that on /privacy-policy/ and
   /terms-and-conditions/, where the page scrolled to 605px wide. */
.prose, .notice, .card, .accordion__content, .factlist, .contactlist, .sidebar__details, .footer__contact { overflow-wrap: break-word; }
/* `break-word`, never `anywhere`. `anywhere` also shrinks the element's
   min-content width to a single character, and `.notice` is a flex container —
   the URL inside it collapsed to a 14px-wide column 500px tall. */
.prose a, .notice a, .accordion__content a, address a { overflow-wrap: break-word; }
kbd { font-family: inherit; font-size: 0.85em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-xs); padding: 0.05em 0.35em; }

button { font: inherit; color: inherit; }

/* The UA rule for [hidden] is a bare type selector, so any component class
   that sets `display` (grid/flex) silently beats it and hidden elements stay
   visible. This has to win. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* Never remove focus rings — only reposition them. */

::selection { background: var(--accent-100); color: var(--navy-900); }

.icon { flex: none; }

/* 3. UTILITIES ============================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.25rem); }
.section--muted { background: var(--bg-muted); }

/* Vertical rhythm carries meaning: a change of ground colour is a chapter
   break and gets the full padding on both sides (~172px), while two sections
   on the same ground are consecutive paragraphs and get about 100px. Stacking
   two full paddings between same-coloured sections reads as a section that
   failed to load rather than as breathing room.

   `:has()` degrades to the larger spacing where it is unsupported, which is
   the behaviour this replaces — nothing breaks, it just breathes more. */
.section:not(.section--muted):not(.section--dark) + .section:not(.section--muted):not(.section--dark) {
  padding-top: calc(var(--section-y) * 0.58);
}
.section:not(.section--muted):not(.section--dark):has(+ .section:not(.section--muted):not(.section--dark)) {
  padding-bottom: calc(var(--section-y) * 0.58);
}

.u-sr-only {
  position: absolute !important;
  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;
}

.u-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skiplink {
  position: absolute;
  left: var(--s-4); top: -100px;
  z-index: 999;
  background: var(--accent-500);
  color: var(--text-invert);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skiplink:focus { top: 0; color: var(--text-invert); }

.kicker {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin: 0 0 var(--s-3);
}
.kicker--light { color: var(--accent-100); }

.stars { display: inline-flex; gap: 2px; color: #e0a02a; }

.placeholder {
  display: inline-block;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8a5a00;
  background: #fff5e0;
  border: 1px dashed #e0b45f;
  border-radius: var(--r-xs);
  padding: 0.1em 0.5em;
  /* [CONFIRM BUSINESS HOURS] has no break opportunity of its own */
  overflow-wrap: break-word;
}
.placeholder--block { display: block; padding: var(--s-3) var(--s-4); line-height: 1.55; }
.placeholder--btn { padding: 0.7em 1em; }

/* Block with an absolutely-placed icon, not a flex row.
   `<p class="notice">` holds an icon followed by a loose sentence, and in a
   flex container every element inside that sentence — a <strong>, a <a> —
   becomes its own flex item sitting in its own column, while the text around
   it becomes separate anonymous items. The sentence stopped being a sentence:
   the URL on /privacy-policy/ was laid out beside the prose instead of inside
   it and pushed the page 200px wider than a 360px phone. */
.notice {
  position: relative;
  background: var(--accent-050);
  border: 1px solid var(--accent-100);
  border-left: 3px solid var(--accent-500);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  padding-left: calc(var(--s-4) + 16px + var(--s-3));
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: var(--s-5) 0 0;
}
.notice > .icon { position: absolute; left: var(--s-4); top: calc(var(--s-4) + 3px); color: var(--accent-600); }
.notice--edit { background: #fffaf0; border-color: #f0dcb4; border-left-color: #e0a02a; }
.notice--edit .icon { color: #b07d10; }

.tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-700);
  background: var(--accent-100);
  padding: 0.28em 0.7em;
  border-radius: var(--r-xs);
}

.grid { display: grid; gap: var(--gap-grid); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(var(--col-2), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(var(--col-3), 1fr)); }

.ticks { list-style: none; margin: var(--s-5) 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
.ticks--2 { grid-template-columns: repeat(auto-fit, minmax(var(--col-4), 1fr)); }
.ticks--tight { gap: var(--s-2); margin-block: var(--s-4) 0; }
.ticks li { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; font-size: var(--fs-base); }
.ticks .icon { color: var(--accent-500); margin-top: 4px; }
/* A 15px link in a tick list measured 23px tall — under the 24px minimum
   target size. 3px either side takes it to 29px without moving the text. */
.ticks a { display: inline-block; padding-block: 3px; margin-block: -3px; }
.ticks--muted .icon { color: var(--text-muted); opacity: 0.6; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad-card);
  box-shadow: var(--shadow-xs);
}
.card--tight { padding: var(--s-5); }
.card__title { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-h4); margin-bottom: var(--s-4); }
.card__title .icon { color: var(--accent-500); }
.card__note { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s-3); }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); align-items: center; }
.card--who { background: var(--mist-100); border-color: var(--mist-200); align-self: start; }
.card--callout { background: var(--accent-050); border-color: var(--accent-100); }
.card--good { border-top: 3px solid var(--accent-500); }
.card--neutral { border-top: 3px solid var(--line-strong); background: var(--paper); }

.twocol { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(var(--col-3), 1fr)); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips--center { justify-content: center; }
.chip {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.42em 0.9em;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy-700);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.chip:hover { border-color: var(--accent-500); background: var(--accent-050); color: var(--accent-700); }
.chip--plain { color: var(--text-muted); background: transparent; border-color: transparent; }
.chips__more { margin-top: var(--s-5); text-align: center; font-weight: 600; }
.chips__more a { display: inline-flex; align-items: center; gap: 0.4em; }

.sectionhead { max-width: 62ch; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.sectionhead--center { margin-inline: auto; text-align: center; }
.sectionhead__title { margin-bottom: var(--s-3); }
.sectionhead__text { color: var(--text-muted); font-size: var(--fs-lg); margin: 0; }

/* Editorial variant: an index number, a hairline that runs to the edge of the
   column, and a left-aligned title. Alternating this with the centred version
   is what stops ten sections in a row reading as one repeated template. */
/* The hairline runs the full width of the content column; only the text inside
   is held to a readable measure. Constraining the whole block instead made the
   rule stop wherever the heading happened to end — 373px above one section and
   580px above the next, which is the opposite of the grid the device is
   supposed to imply. */
.sectionhead--rule { max-width: none; position: relative; padding-top: var(--s-5); }
.sectionhead--rule::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--line);
}
.sectionhead--rule > .kicker,
.sectionhead--rule > .sectionhead__title,
.sectionhead--rule > .sectionhead__text { max-width: 66ch; }
.sectionhead--rule .kicker { display: flex; align-items: baseline; gap: 0.75rem; }
.kicker__index {
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--navy-900); font-variant-numeric: tabular-nums;
}
.kicker__index::after { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--brand-500); vertical-align: middle; margin-left: 0.6rem; }
.sectionhead--center .kicker { justify-content: center; }

/* Logo-derived arc, used as a section transition instead of yet another
   background-colour change. */
.arc { display: block; width: 100%; height: clamp(48px, 6vw, 96px); color: var(--brand-500); }
.arc--flip { transform: scaleY(-1); }

/* 4. BUTTONS =============================================================== */

.btn {
  /* The default fill is the action teal, not the structural navy: on a page
     that has no dark sections left, a near-black button reads as a leftover
     from the old design rather than as the primary action. */
  --btn-bg: var(--accent-500);
  --btn-fg: var(--text-invert);
  --btn-bd: var(--accent-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.85em 2.1em;
  min-height: 48px;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { color: var(--btn-fg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* The glossy pill of the reference: a vertical gradient of the action teal,
   a hairline of light along the top edge and a tinted shadow underneath.
   background-color stays the flat action colour, so the contrast the QA
   probe measures is the same 4.99:1 it always was. */
.btn--accent, .btn--primary {
  --btn-bd: transparent;
  background-image: linear-gradient(180deg, #22b3d4 0%, #0e8fac 52%, #0a7a92 100%);
  box-shadow: 0 8px 18px -6px rgba(10, 122, 146, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--accent:hover, .btn--primary:hover {
  background-image: linear-gradient(180deg, #2fc0e0 0%, #1198b6 52%, #0b839c 100%);
  box-shadow: 0 12px 24px -8px rgba(10, 122, 146, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}
.btn--accent:active, .btn--primary:active { transform: translateY(0); }
/* An e-mail address is never set in capitals, and a 28-character address in a
   pill has to be allowed to wrap on a phone — measured at 360px on /gift-card/
   the uppercase version ran 427px wide inside a 360px viewport. */
.btn[href^="mailto:"] { text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .btn { white-space: normal; text-align: center; } }

.btn--primary { --btn-bg: var(--accent-500); --btn-bd: var(--accent-500); }
.btn--primary:hover { --btn-bg: var(--accent-600); --btn-bd: var(--accent-600); }

.btn--accent { --btn-bg: var(--accent-500); --btn-bd: var(--accent-500); }
.btn--accent:hover { --btn-bg: var(--accent-600); --btn-bd: var(--accent-600); }

.btn--outline { --btn-bg: var(--white); --btn-fg: var(--text); --btn-bd: var(--line-strong); }
.btn--outline:hover { --btn-bg: var(--accent-050); --btn-bd: var(--accent-500); --btn-fg: var(--accent-700); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--accent-700); --btn-bd: transparent;
  padding-inline: 0.25em;
  box-shadow: none;
}
.btn--ghost:hover { --btn-fg: var(--accent-700); box-shadow: none; text-decoration: underline; text-underline-offset: 0.3em; }

.btn--sm { font-size: 0.8125rem; padding: 0.75em 1.5em; min-height: 42px; }
.btn--lg { font-size: 1rem; padding: 0.95em 2.4em; min-height: 54px; }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn.is-busy { opacity: 0.7; pointer-events: none; }
.btn__spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
.btn.is-busy .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 5. HEADER ================================================================ */

/* Was a near-black strip pinned above the header — the first thing the page
   showed was its darkest element. Now a pale tint of the action colour. */
.promobar {
  background: var(--accent-050);
  color: var(--accent-700);
  border-bottom: 1px solid var(--accent-100);
  font-size: var(--fs-sm);
}
.promobar[hidden] { display: none; }
.promobar__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.6rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  position: relative;
}
.promobar__link {
  display: inline-flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.15em 0.5em;
  color: var(--accent-700); text-decoration: none; padding: 2px 0;
}
.promobar__link strong { color: var(--accent-700); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--accent-100); }
.promobar__link:hover { color: var(--accent-500); }
.promobar__link:hover strong { color: var(--accent-500); text-decoration-color: currentColor; }
.promobar__icon { color: var(--gold); }
.promobar__arrow { transition: transform var(--dur) var(--ease); }
.promobar__link:hover .promobar__arrow { transform: translateX(3px); }
.promobar__detail { color: var(--text-muted); }
.promobar__close {
  background: none; border: 0; cursor: pointer; color: var(--text-muted);
  padding: 6px; border-radius: var(--r-sm); display: inline-flex; margin-left: auto;
}
.promobar__close:hover { color: var(--accent-700); background: var(--accent-100); }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Once it detaches from the top of the document the only thing that separates
   the bar from the page is a hairline. There is no shadow anywhere here. */
.header.is-stuck { border-bottom-color: var(--line); }

.header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* The logo file is cyan on transparent, so it works on white and on the dark
   footer without any recolouring. Sized by height; width follows the 400:188
   aspect ratio. */
.logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
/* The supplied artwork carries its own padding and a small "CLEANING ATL"
   line, so it needs more height than a typical wordmark to stay legible. */
.logo__img { display: block; width: auto; height: 58px; }
.logo--footer .logo__img { height: 64px; }
.logo--sidebar .logo__img { height: 46px; }
@media (max-width: 767px) { .logo__img { height: 46px; } }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; margin: 0; display: flex; align-items: center; }
/* Redesign 06/09/2026: plain words in the reference's manner — medium
   weight, near-black, the current page in the action colour, no pill and no
   underline bar. */
.nav__link {
  display: inline-block;
  padding: 0.55rem 0.65rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: #16232b;
  text-decoration: none;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav__link:hover { color: var(--accent-500); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--accent-500); }

/* O ar dos dois lados do chevron.
 *
 * A tentativa anterior colou-o à palavra, e ficou colado a sério. Medido na
 * TINTA PINTADA no ar (Edge headless a 8×, 07/09/2026), a régua do menu inteiro:
 *
 *     Home → Services   26,50      Us → FAQs         26,88
 *     Services → seta    7,25      FAQs → Blog       26,87
 *     seta → About Us   29,25      Blog → Jobs       26,75
 *                                  Jobs → Gift Card  26,25
 *
 * O menu tem uma cadência de ~26,5px entre itens e o chevron partia-a nas duas
 * pontas: 7,25 à esquerda (colado) e 29,25 à direita (um buraco maior que a
 * própria cadência). Agora tem o MESMO ar dos dois lados — 18px — e «About Us»
 * não se mexe um pixel: o que saiu do recuo direito do botão entrou no
 * esquerdo, e o recuo direito da palavra encolheu o resto.
 *
 * Os valores são ópticos, não passos da escala de espaçamento, por isso vivem
 * em px: entram nas contas as folgas laterais das próprias formas — 3,5px de
 * cada lado do traço dentro do SVG de 16, e ~1,35px depois do «s».
 *
 * A caixa do botão fica com 24×24, em cima do mínimo de toque do WCAG 2.2 —
 * era daí que vinha o recuo direito de 11,2px, e é por isso que ele mudou de
 * lado em vez de desaparecer. */
.nav__item--has-menu > .nav__link { padding-right: 5.2px; }
.nav__toggle {
  background: none; border: 0; cursor: pointer; color: var(--navy-700);
  padding: 4px 0 4px 8px; margin-left: 0;
  display: inline-flex; border-radius: var(--r-xs);
}
/* O chevron sobe 0,09rem — 1,44px.
   Medido na TINTA PINTADA e não no retângulo (Edge headless a 8×, no ar,
   07/09/2026): a banda de tinta de «Services» ia de 93 a 192 e a do chevron de
   134 a 174, centros a 142,5 e 154 — **1,44px de queda**, 11% da altura da
   letra. Duas causas somadas:
     - `align-items: center` no `.nav__item` centra o botão na CAIXA DE LINHA,
       e a banda das maiúsculas não está no centro dessa caixa: por baixo da
       linha de base sobra o espaço dos descendentes, por cima das maiúsculas
       não sobra nada;
     - o próprio desenho do ícone tem a tinta 0,33px abaixo do centro da sua
       caixa — o traço vai de 9,5 a 15,5 num viewBox de 24.
   Em `rem` e não em `em` de propósito: o kit do Elementor impõe 17px ao
   `<button>`, e um `em` aqui media-se por esse 17 em vez do 16 da palavra.
   O estado aberto repete a subida, senão a rotação apagava-a. */
.nav__toggle .icon { transform: translateY(-0.09rem); transition: transform var(--dur) var(--ease); }
.nav__item--has-menu[data-open] .nav__toggle .icon { transform: translateY(-0.09rem) rotate(180deg); }

.nav__submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  min-width: 268px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s-2);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav__item--has-menu:hover .nav__submenu,
.nav__item--has-menu:focus-within .nav__submenu,
.nav__item--has-menu[data-open] .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__submenu li { margin: 0; }
.nav__sublink {
  display: flex; align-items: center; gap: 0.4em;
  padding: 0.6rem 0.75rem;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--navy-800); text-decoration: none; border-radius: var(--r-sm);
}
.nav__sublink:hover { background: var(--accent-050); color: var(--accent-700); text-decoration: none; }
.nav__sublink--all { font-weight: 700; color: var(--accent-700); border-top: 1px solid var(--line); margin-top: var(--s-2); padding-top: 0.7rem; border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* `margin-left: auto` aqui, e não só no `.nav`: abaixo de 1140px o `.nav` passa
   a `display: none` e leva consigo o único `margin-left: auto` da barra — o
   logotipo, o telefone e o hambúrguer ficavam empilhados à esquerda com 149px
   de vazio à direita. Medido a 390px. */
.header__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; margin-left: auto; }

/* Above the nav breakpoint the bar becomes three tracks — logo, menu, actions —
   so the menu is centred against the WINDOW instead of being shoved right by
   whatever the actions happen to measure. Below 1140px `.nav` is
   `display:none` and the flex fallback (with its `margin-left:auto` on the
   actions) is what runs, which is why this is scoped and not the base rule. */
@media (min-width: 1140px) {
  .header__inner { display: grid; grid-template-columns: auto 1fr auto; }
  .nav { margin: 0; justify-self: center; }
  .header__actions { margin-left: 0; justify-self: end; }
}

/* Client area / Login — a door for people who are already customers, so it is
   deliberately quieter than "Get a Quote" sitting next to it.

   `.header__login` is the same door under the name the client asked for
   (07/09/2026) and shares the rule on purpose: two doors side by side that
   almost match would read as a mistake. It is an <a>, never a <button> —
   inside an Elementor page the kit's global button style repaints any bare
   <button> (primary fill, 50px radius, 15px/30px padding), which is the same
   trap that put a cyan box around the "Services" chevron. */
.header__client,
.header__login {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--text); text-decoration: none;
  padding: 0.55rem 0.95rem; min-height: 42px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.header__client:hover,
.header__login[href]:hover { color: var(--accent-700); border-color: var(--accent-500); background: var(--accent-050); text-decoration: none; }
.header__client .icon,
.header__login .icon { color: var(--accent-500); }
/* Sem destino ainda (o campo «Login (ligação)» do widget está vazio): o lugar
   fica marcado, mas nada finge ser clicável — sem href não há hover, não há
   cursor de mão e não há paragem na tabulação. */
.header__login:not([href]) { cursor: default; }
/* The phone number is the glossy pill on the right of the bar, as on the
   reference — it carries the .btn classes and only adds the tabular digits. */
/* `nowrap` porque um número de telefone partido ao meio ("(678) 557-" numa
   linha, "6449" na outra) lê-se como avaria — foi o que aconteceu a 1140px
   quando o Login entrou na barra, antes de ele passar a só ícone nessa faixa. */
.header__phone { font-variant-numeric: tabular-nums; text-transform: none; font-size: 0.9375rem; letter-spacing: 0; white-space: nowrap; }
.header__phone .icon { color: var(--white); }

.header__burger {
  display: none;
  background: none; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  width: 46px; height: 46px; align-items: center; justify-content: center; cursor: pointer; color: var(--navy-800);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.header__burger:hover { border-color: var(--navy-800); background: var(--accent-050); }
.header__burger-bars { display: grid; gap: 4px; width: 20px; }
.header__burger-bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.header__burger-bars i:nth-child(2) { width: 70%; margin-left: auto; }
.header__burger:hover .header__burger-bars i:nth-child(2) { width: 100%; }
.header__burger[aria-expanded="true"] .header__burger-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header__burger[aria-expanded="true"] .header__burger-bars i:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] .header__burger-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Off-canvas sidebar ---------------------------------------------------
   Stays in the DOM so it can transition; `inert` (set by JS while closed) keeps
   it out of the tab order and the accessibility tree. `visibility` is the
   belt-and-braces fallback for browsers without inert. */
.sidebar {
  position: fixed; inset: 0; z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.sidebar.is-open { visibility: visible; pointer-events: auto; }

.sidebar__backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 34, 42, 0.32);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 280ms var(--ease);
  border: 0;
}
.sidebar.is-open .sidebar__backdrop { opacity: 1; }

.sidebar__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw);
  background: var(--white);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 320ms var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.sidebar.is-open .sidebar__panel { transform: none; }

.sidebar__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--white); z-index: 2;
}
.sidebar__close {
  background: none; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; color: var(--navy-800);
}
.sidebar__close:hover { border-color: var(--accent-500); color: var(--accent-700); background: var(--accent-050); }

/* Conversion block, pinned directly under the panel header. */
.sidebar__actions { padding: var(--s-5) var(--s-5) var(--s-4); display: grid; gap: var(--s-3); border-bottom: 1px solid var(--line); }
.sidebar__phone {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--accent-050);
  border: 1px solid var(--accent-100);
  border-radius: var(--r-md);
  text-decoration: none; color: var(--text);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sidebar__phone:hover { background: var(--accent-100); border-color: var(--accent-500); color: var(--text); }
.sidebar__phoneicon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-500); color: var(--white); flex: none; }
/* `:not(.sidebar__phoneicon)` não é preciosismo: a bolinha do ícone também é
   um <span> dentro de .sidebar__phone, e `.sidebar__phone span` (0,1,1) vence
   `.sidebar__phoneicon` (0,1,0) por especificidade. Sem a exclusão, o círculo
   herda `flex-direction: column` e o ícone sobe 10px acima do centro — que era
   exatamente o desalinhamento visível no menu. */
.sidebar__phone span:not(.sidebar__phoneicon) { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar__phone small { font-size: var(--fs-xs); color: var(--text-muted); }
.sidebar__phone strong { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.01em; color: var(--text); }

/* Login no painel do telemóvel. Abaixo de 768px a barra esconde o «Get a
   Quote» e o Login por falta de largura, e é aqui que os dois reaparecem —
   este fica em terceiro, mais silencioso que a chamada e que o orçamento. */
.sidebar__login {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 46px; padding: 0.6rem 1rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--text); text-decoration: none;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
}
.sidebar__login[href]:hover { color: var(--accent-700); border-color: var(--accent-500); background: var(--accent-050); text-decoration: none; }
.sidebar__login .icon { color: var(--accent-500); }
.sidebar__login:not([href]) { cursor: default; }

.sidebar__nav { padding: var(--s-4) var(--s-5) 0; }
.sidebar__list { list-style: none; margin: 0; padding: 0; }
.sidebar__list > li { border-bottom: 1px solid var(--line); margin: 0; }
.sidebar__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0.85rem 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  color: var(--navy-900); text-decoration: none;
}
.sidebar__link:hover { color: var(--accent-600); }
.sidebar__link[aria-current="page"] { color: var(--accent-600); }
.sidebar__linkicon { color: var(--line-strong); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.sidebar__link:hover .sidebar__linkicon { color: var(--accent-500); transform: translate(2px, -2px); }
.sidebar__sub { list-style: none; margin: 0 0 var(--s-3); padding: 0 0 0 var(--s-4); border-left: 2px solid var(--accent-100); }
.sidebar__sub li { margin: 0; }
.sidebar__sublink { display: block; padding: 0.42rem 0; font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; }
.sidebar__sublink:hover { color: var(--accent-600); }

.sidebar__cta { padding: var(--s-5); }

/* Contact block — the reason the sidebar exists rather than a plain menu:
   on a phone the fastest path to a booking is a thumb on the phone number. */
.sidebar__contact {
  margin-top: auto;
  background: var(--paper);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  padding: var(--s-5);
}
.sidebar__contacttitle {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-600);
  margin: 0 0 var(--s-4);
}

.sidebar__details { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.sidebar__details li { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; }
.sidebar__details .icon { color: var(--accent-500); flex: none; margin-top: 2px; }
.sidebar__details a { color: var(--text-muted); text-decoration: none; }
.sidebar__details a:hover { color: var(--accent-700); text-decoration: underline; }
.sidebar__details address { line-height: 1.5; }

.sidebar__social { display: flex; gap: var(--s-3); margin-bottom: var(--s-5); }
.sidebar__trust { list-style: none; margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); display: grid; gap: var(--s-2); }
.sidebar__trust li { display: flex; gap: var(--s-2); align-items: center; margin: 0; font-size: var(--fs-xs); }
.sidebar__trust .icon { color: var(--accent-500); }

/* 6. BREADCRUMBS =========================================================== */

.crumbs { border-bottom: 1px solid var(--line); background: var(--paper); }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0.85rem 0; font-size: var(--fs-sm); }
.crumbs__item { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; color: var(--text-muted); }
/* 23px tall without the padding — a hair under the 24px minimum target size. */
.crumbs__item a { display: inline-block; padding-block: 3px; color: var(--text-muted); text-decoration: none; }
.crumbs__item a:hover { color: var(--accent-700); text-decoration: underline; }
.crumbs__item [aria-current="page"] { color: var(--navy-900); font-weight: 600; }
.crumbs__sep { color: var(--line-strong); }

/* 7. HERO ================================================================== */

.hero {
  position: relative;
  background: var(--white);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
/* Oversized arc lifted from the logo, sitting behind the composition. It is the
   one decorative element on the page and it comes from the brand, not a
   stock gradient. */
.hero::before {
  content: '';
  position: absolute; top: -32%; right: -18%;
  width: min(1050px, 92vw); aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--brand-500);
  opacity: 0.16;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; top: -22%; right: -26%;
  width: min(880px, 80vw); aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--brand-500);
  opacity: 0.10;
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
.hero__rating { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); font-weight: 600; color: var(--navy-700); margin-bottom: var(--s-4); }
.hero__title { font-size: var(--fs-hero); margin-bottom: var(--s-5); }
.hero__title em { font-style: normal; color: var(--accent-600); }
.hero__text { font-size: var(--fs-lg); color: var(--text-muted); max-width: 54ch; margin-bottom: var(--s-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }
.hero__media { position: relative; }
.hero__badge {
  position: absolute;
  left: clamp(-0.5rem, -1vw, 0rem);
  bottom: clamp(-1rem, -2vw, -0.5rem);
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s-4) var(--s-5);
  max-width: 330px;
}
/* Small second frame overlapping the hero image top-right — the asymmetry that
   stops the hero being a plain 50/50 text-and-picture split. */
.hero__inset {
  position: absolute; right: clamp(-1rem, -2vw, -0.25rem); top: clamp(-1.25rem, -3vw, -0.5rem);
  width: min(46%, 220px);
  margin: 0;
  border: 6px solid var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  line-height: 0;
}
.hero__inset .photo { border-radius: 0; }
@media (max-width: 959px) { .hero__inset { display: none; } }

.hero__badge span { display: flex; flex-direction: column; }
.hero__badge strong { font-family: var(--font-display); font-size: var(--fs-base); }
.hero__badge small { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.hero__badgeicon { color: var(--accent-500); flex: none; }

/* A grid, not flex-wrap: with four items of different lengths, wrapping put
   row two's items at whatever x the previous row happened to end at, so the
   columns visibly failed to line up under each other. */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap: var(--s-3) var(--s-5); list-style: none; margin: 0; padding: 0; }
.strip__item { display: flex; align-items: center; gap: 0.45em; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--navy-700); }
.strip__item .icon { color: var(--accent-500); }

/* Page heroes (inner pages) */
.phero {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem) clamp(2.25rem, 4.5vw, 3.75rem);
}
.phero__inner { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.phero__title { margin-bottom: var(--s-4); }
.phero__lead { font-size: var(--fs-lg); color: var(--text-muted); max-width: 62ch; margin-bottom: var(--s-6); }
.phero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.phero--text .phero__inner { grid-template-columns: 1fr; }
.phero--text .phero__copy { max-width: 72ch; }
.phero--quote { background: var(--accent-050); border-bottom-color: var(--accent-100); }

/* ---- Third-party accreditation badges ------------------------------------ */
.badges { background: var(--white); border-block: 1px solid var(--line); padding-block: clamp(1.25rem, 3vw, 2rem); }
.badges--compact { border-top: 0; }
.badges__inner { display: grid; gap: var(--s-4); align-items: center; }
.badges__title {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  margin: 0;
}
.badges__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
}
.badges__item { margin: 0; line-height: 0; }
/* Slight desaturation so five loud third-party marks don't fight the page,
   restored on hover. They are never recoloured — these are other companies'
   trademarks. */
.badges__item img {
  height: clamp(42px, 5vw, 56px); width: auto;
  filter: saturate(0.82) contrast(1.02);
  opacity: 0.9;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.badges__item:hover img { filter: none; opacity: 1; transform: translateY(-2px); }

@media (min-width: 860px) {
  .badges__inner { grid-template-columns: minmax(160px, 220px) 1fr; gap: var(--s-6); align-items: center; }
  .badges__title { line-height: 1.6; }
  .badges__list { justify-content: flex-end; }
}

/* Photos */
.photo { margin: 0; position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--mist-200); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--zoom img { transition: transform 620ms var(--ease); }
.scard:hover .photo--zoom img,
.pcard:hover .photo--zoom img,
.feature:hover .photo--zoom img,
.photo--zoom:hover img { transform: scale(1.045); }
.photo--4x3 { aspect-ratio: 4 / 3; }
.photo--3x2 { aspect-ratio: 3 / 2; }
.photo--16x9 { aspect-ratio: 16 / 9; }
.photo--4x5 { aspect-ratio: 4 / 5; }
/* Square — the collage in section 21 wants four frames of equal weight. */
.photo--1x1 { aspect-ratio: 1 / 1; }

/* 8. SHARED BLOCKS ========================================================= */

.split__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--intro { align-items: start; }
.split__media { position: relative; }

/* Grid and flex children default to min-width:auto, so one long token inside
   refuses to shrink and drags the whole track past the container. On a 360px
   phone /about/ was 30px wider than the viewport because of this. */
.split__inner > *,
.splithead > *,
.quotesection__inner > *,
.quotepage > *,
.contactgrid > *,
.postbody > *,
.phero__inner > *,
.hero__inner > *,
.cta__card > *,
.footer__top > * { min-width: 0; }

/* Overlapping second image — breaks the two-column symmetry that makes a page
   read as a template. */
.split__media--stack { padding-bottom: clamp(2rem, 5vw, 3.5rem); padding-right: clamp(1.5rem, 4vw, 3rem); }
.split__inset {
  position: absolute; right: 0; bottom: 0;
  width: min(62%, 260px);
  border: 6px solid var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 559px) {
  .split__media--stack { padding: 0; }
  .split__inset { position: static; width: 100%; margin-top: var(--s-3); border-width: 0; box-shadow: none; }
}

/* Section header with the explanatory paragraph pulled out to the right,
   instead of stacked underneath a centred title. */
/* Same rule, promoted to the two-column header so it spans both columns
   rather than stopping at the end of the left one. */
.splithead { display: grid; gap: var(--s-4); margin-bottom: clamp(1.75rem, 3.5vw, 3rem); position: relative; padding-top: var(--s-5); }
.splithead::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.splithead .sectionhead { margin-bottom: 0; }
.splithead .sectionhead--rule { padding-top: 0; }
.splithead .sectionhead--rule::before { display: none; }
.splithead__aside { color: var(--text-muted); font-size: var(--fs-lg); margin: 0; }
@media (min-width: 860px) {
  .splithead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
  .splithead__aside { padding-bottom: 0.35rem; }
}

/* minmax tuned so six badges land as 3 + 3 at desktop rather than 4 + 2 */
.trust__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(var(--col-3), 1fr)); }
.trust__item { display: flex; gap: var(--s-4); align-items: flex-start; margin: 0; }
.trust__icon {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--accent-100); color: var(--accent-700);
}
.trust__body { display: flex; flex-direction: column; gap: 2px; }
.trust__title { font-family: var(--font-display); font-size: var(--fs-base); color: var(--navy-900); }
.trust__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.trust--compact .trust__grid { grid-template-columns: repeat(auto-fit, minmax(var(--col-4), 1fr)); gap: var(--s-4); }
.trust--compact .trust__icon { width: 38px; height: 38px; }

.bgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(var(--col-3), 1fr)); }
/* Explicit column counts, chosen by item count where the caller knows it.
   auto-fit alone leaves an orphan on the last row whenever the item count
   isn't a multiple of the column count it happens to resolve to. */
.bgrid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-2)), 1fr)); }
@media (min-width: 760px) {
  .bgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .bgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bgrid__item {
  margin: 0; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--pad-card);
}
.bgrid__icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-md); background: var(--accent-100); color: var(--accent-700); margin-bottom: var(--s-4); }
.bgrid__title { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.bgrid__text { color: var(--text-muted); font-size: var(--fs-base); margin: 0; }

.factlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.factlist li { display: grid; gap: 2px; margin: 0; padding-bottom: var(--s-3); border-bottom: 1px solid var(--mist-200); font-size: var(--fs-sm); }
.factlist li:last-child { border-bottom: 0; padding-bottom: 0; }
.factlist strong { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.factlist span { color: var(--navy-900); }

.hoodlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.hoodlist li { margin: 0; font-size: var(--fs-sm); color: var(--navy-700); padding-left: 1rem; position: relative; }
.hoodlist li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-500); }

/* 9. CARDS ================================================================= */

.scard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.scard:hover { border-color: var(--accent-500); }
.scard__media { border-radius: 0; }
.scard__body { padding: var(--pad-card); display: flex; flex-direction: column; flex: 1; position: relative; }
.scard__icon {
  position: absolute; top: -22px; left: clamp(1.25rem, 2.2vw, 1.625rem);
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--accent-500); color: var(--white);
}
.scard__title { font-size: var(--fs-h4); margin: var(--s-4) 0 var(--s-2); }
.scard__link { color: var(--navy-900); text-decoration: none; }
.scard__link::after { content: ''; position: absolute; inset: 0; }
.scard:hover .scard__link { color: var(--accent-700); }
.scard__text { color: var(--text-muted); font-size: var(--fs-base); margin-bottom: var(--s-3); }
.scard__benefit { display: flex; gap: 0.45em; align-items: flex-start; font-size: var(--fs-sm); font-weight: 600; color: var(--navy-700); margin-bottom: var(--s-4); }
.scard__benefit .icon { color: var(--accent-500); margin-top: 3px; }
.scard__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--accent-700); }
.scard__cta .icon { transition: transform var(--dur) var(--ease); }
.scard:hover .scard__cta .icon { transform: translateX(3px); }

.lcard {
  position: relative;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--pad-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lcard:hover { border-color: var(--accent-500); }
.lcard__title { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.lcard__title a { color: var(--navy-900); text-decoration: none; }
.lcard__title a::after { content: ''; position: absolute; inset: 0; }
.lcard:hover .lcard__title a { color: var(--accent-700); }
.lcard__county { display: flex; align-items: center; gap: 0.4em; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 600; margin-bottom: var(--s-3); }
.lcard__county .icon { color: var(--accent-500); }
.lcard__text { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-4); }
.lcard__cta { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--accent-700); }

.tcard {
  margin: 0; display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--pad-card);
}
.tcard__quote { margin: 0; font-size: var(--fs-base); color: var(--text); }
.tcard__quote p { margin: 0; }
.tcard__meta { display: flex; flex-direction: column; margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.tcard__meta span { color: var(--text-muted); }
.tcard--empty { background: var(--paper); border-style: dashed; border-color: var(--line-strong); align-items: flex-start; }
.tcard__mark { color: var(--line-strong); }
.tcard__placeholder {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); font-weight: 600;
  color: #8a5a00; background: #fff5e0; border: 1px dashed #e0b45f; border-radius: var(--r-xs);
  padding: 0.4em 0.7em; margin: 0;
}
.tcard__hint { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

.platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-5); list-style: none; margin: var(--s-7) 0 0; padding: 0; }
.platforms__item { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.platforms__item a { display: inline-flex; align-items: center; gap: 0.3em; color: var(--navy-700); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.platforms__item a:hover { color: var(--accent-700); border-color: var(--accent-500); }

/* ---- Full-bleed photo band ------------------------------------------------
   The one block on the page with no container, no card, no border and no
   heading. Five frames of the same height at deliberately different subject
   scales, so it reads as a pause rather than as another grid. */
.band { padding-block: 0 clamp(1.5rem, 3vw, 2.25rem); background: var(--bg-muted); }
.band__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  background: var(--white);
}
.band__item { margin: 0; line-height: 0; overflow: hidden; background: var(--mist-200); }
/* No `height: 100%` — it wins over `aspect-ratio` and squashed a 4:5 frame
   into a 6:5 one, so the crop no longer matched what the file was cut to. */
.band__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 700ms var(--ease); }
.band__item:hover img { transform: scale(1.04); }
.band__caption {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  max-width: var(--container); margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  padding-inline: var(--gutter);
  font-size: var(--fs-sm); color: var(--text-muted); text-align: center;
}
.band__caption .icon { color: var(--accent-500); flex: none; }

/* On a phone five frames would be 70px wide. A drag-scrolled strip keeps them
   readable and is itself a change of pace from a page you only scroll down. */
@media (max-width: 767px) {
  .band__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 46vw;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .band__item { scroll-snap-align: center; }
}

/* ---- Dark section --------------------------------------------------------
   Used once, on the before/after band. It is the only change of ground colour
   between the header and the footer, which is exactly why it is worth having
   and exactly why there is only one. */
/* This modifier used to paint the section navy — it was the one dark band on
   the page and the client asked for it to go. The class is kept (the markup
   still asks for it in a couple of places) but it now means "the quiet tinted
   section", which is all the rhythm it was ever doing. */
.section--dark { background: var(--accent-050); color: var(--text-muted); }
.section--dark .sectionhead__title,
.section--dark .ba__label { color: var(--text); }
.section--dark .sectionhead__text { color: var(--text-muted); }
.section--dark .kicker { color: var(--accent-600); }
.section--dark .kicker__index { color: var(--navy-900); }
.section--dark .sectionhead--rule::before { background: var(--accent-100); }
.section--dark .ba__text { color: var(--text-muted); }
.section--dark .ba__pair { background: var(--line-strong); }

/* Before / after.
   The frames are 3:4 because that is the shape of the halves in the client's
   own posts — cropping them to landscape threw away the part of the tub, the
   cooktop and the shower floor that carries the whole point. */
.ba__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(var(--col-3), 1fr)); }
.ba__item { margin: 0; }
.ba__pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--line-strong);
}
.ba__frame { margin: 0; position: relative; background: var(--mist-200); }
.ba__frame img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.ba__tag {
  position: absolute; left: 8px; bottom: 8px;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.25em 0.6em; border-radius: var(--r-xs);
}
.ba__tag--before { background: rgba(6, 33, 44, 0.88); color: var(--white); }
.ba__tag--after { background: var(--accent-500); color: var(--white); }
.ba__label { font-size: var(--fs-base); margin: var(--s-4) 0 var(--s-2); }
.ba__text { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* Reviews, before any verified review exists: links out to the platforms that
   really are live. Never a testimonial we made up, never a dashed box. */
.reviews--links .sectionhead { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
/* Flex, not auto-fit grid: with two live platforms an auto-fit grid built
   three tracks and parked both cards in the left two, off-centre under a
   centred heading. */
.revlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-grid); }
.revlinks__item { margin: 0; flex: 1 1 200px; max-width: 300px; }
.revlinks__link {
  display: flex; flex-direction: column; gap: 0.15rem;
  height: 100%;
  padding: var(--pad-card);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.revlinks__link:hover { border-color: var(--accent-500); background: var(--accent-050); text-decoration: none; }
.revlinks__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--navy-900); }
.revlinks__go { display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-700); }
.revlinks__link:hover .revlinks__go .icon { transform: translate(2px, -2px); }
.revlinks__go .icon { transition: transform var(--dur) var(--ease); }
.reviews__foot { margin: var(--s-6) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-muted); }

/* 10. QUOTE FORM =========================================================== */

.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--pad-card-lg);
}
.quote__head { margin-bottom: var(--s-5); }
.quote__title { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.quote__sub { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

.progress { display: flex; list-style: none; margin: 0 0 var(--s-6); padding: 0; gap: var(--s-2); }
.progress__step { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--fs-xs); color: var(--text-muted); }
.progress__step::before { content: ''; display: block; height: 4px; border-radius: 2px; background: var(--line); transition: background var(--dur) var(--ease); }
.progress__step.is-active::before, .progress__step.is-done::before { background: var(--accent-500); }
.progress__num { display: none; }
.progress__label { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; }
.progress__step.is-active .progress__label { color: var(--accent-700); }
.progress__step.is-done .progress__label { color: var(--navy-700); }

.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step[hidden] { display: none; }
.step__legend { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--navy-900); margin-bottom: var(--s-5); padding: 0; }
.step__nav { display: flex; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }
.step__nav .btn--ghost { order: -1; }

.row { display: grid; gap: var(--s-4); }
.row--2 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.field { margin-bottom: var(--s-5); }
.field:last-of-type { margin-bottom: 0; }
.field__label {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-sm); color: var(--navy-900); margin-bottom: var(--s-2);
}
.field__label em { font-style: normal; color: var(--danger); }
.field__optional { font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.field__help { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--s-2) 0 0; }
.field__error { display: flex; align-items: center; gap: 0.35em; font-size: var(--fs-xs); font-weight: 600; color: var(--danger); margin: var(--s-2) 0 0; }
.field__error[hidden] { display: none; }

.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none;
}
select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2355686f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2.5rem;
}
textarea.input { min-height: 104px; resize: vertical; }
.input::placeholder { color: #90a1a7; }
.input:hover { border-color: var(--navy-600); }
.input:focus { outline: 0; border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-100); }
.input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-bg); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15); }

.choices { display: grid; gap: var(--s-3); }
.choices--2 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choices--3 { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.choices--4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__box {
  display: flex; flex-direction: column; gap: 2px;
  height: 100%;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  cursor: pointer;
  background: var(--white);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.choice__label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--navy-900); }
.choice__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.choice__box:hover { border-color: var(--navy-600); }
.choice input:checked + .choice__box { border-color: var(--accent-500); background: var(--accent-050); box-shadow: inset 0 0 0 1px var(--accent-500); }
.choice input:focus-visible + .choice__box { outline: 3px solid var(--accent-500); outline-offset: 2px; }

.checks { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; font-size: var(--fs-sm); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-xs);
  display: grid; place-items: center; background: var(--white);
  color: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.check input:checked + .check__box { background: var(--accent-500); border-color: var(--accent-500); color: var(--white); }
.check input:focus-visible + .check__box { outline: 3px solid var(--accent-500); outline-offset: 2px; }
.check__label { color: var(--navy-800); }
.check--consent { align-items: flex-start; }
.check--consent .check__label { font-size: var(--fs-sm); color: var(--text-muted); }
.check--consent em { font-style: normal; color: var(--danger); }

.review { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.review > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: var(--s-4); padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.review > div:last-child { border-bottom: 0; }
.review > div:nth-child(odd) { background: var(--paper); }
.review dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--text-muted); margin: 0; }
.review dd { margin: 0; font-size: var(--fs-sm); font-weight: 400; color: var(--navy-900); word-break: break-word; }

.quote__reassure { display: flex; align-items: center; gap: 0.45em; font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--s-4); }
.quote__reassure .icon { color: var(--accent-500); }
.form__status { margin-top: var(--s-4); font-size: var(--fs-sm); font-weight: 600; }
.form__status:empty { margin: 0; }
.form__status.is-error { color: var(--danger); }

.quote__success { text-align: center; padding: var(--s-6) var(--s-4); }
.quote__success[hidden] { display: none; }
.quote__successicon { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--accent-100); color: var(--accent-600); margin-bottom: var(--s-4); }
.quote__success h3 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.quote__success p { color: var(--text-muted); max-width: 46ch; margin-inline: auto; }
.quote__successnote { margin-top: var(--s-3); }
.quote__success .btn { margin-top: var(--s-5); }

.quotesection__inner { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
/* Remissão para o documento jurídico publicado à parte. Fica acima do resumo,
   com respiro para não se ler como mais um parágrafo do texto. */
.legalref { margin-bottom: var(--s-7); }
.legalref__lead { display: flex; gap: var(--s-3); align-items: baseline; margin-bottom: var(--s-3); }
.legalref__lead .icon { color: var(--accent-600); flex: none; }
.legalref p:last-child { margin: 0; color: var(--text-muted); }
.legalref a { font-weight: 600; }

/* `.ticks--tight` termina com margin-block-end zero, e esta faixa não tinha
   margem própria: o cartão do crédito de $50 encostava na última marca da
   lista acima, sem nada a dizer que era outro bloco. */
.quotesection__promo { margin-top: var(--s-6); display: flex; gap: var(--s-3); align-items: flex-start; background: var(--accent-050); border: 1px solid var(--accent-100); border-radius: var(--r-md); padding: var(--s-4); font-size: var(--fs-sm); }
.quotesection__promo .icon { color: var(--accent-600); flex: none; margin-top: 2px; }
.quotesection__promo p { margin: 0; color: var(--text-muted); }

.quotepage { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.quotepage__aside { display: grid; gap: var(--s-4); }

/* Two-question opener. Same card language as the full form, a third of the
   height — it is a doorway, not the room. */
.qteaser {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--pad-card-lg);
}
.qteaser__head { margin-bottom: var(--s-5); }
.qteaser__title { font-size: var(--fs-h3); margin: 0; }
.qteaser .field:last-of-type { margin-bottom: var(--s-5); }
.qteaser__note {
  display: flex; align-items: flex-start; gap: 0.45em;
  margin: var(--s-4) 0 0; font-size: var(--fs-xs); color: var(--text-muted);
}
.qteaser__note .icon { color: var(--accent-500); flex: none; margin-top: 2px; }

/* ---- Service areas, home-page variant ------------------------------------
   Six linked cities as targets instead of 53 names in six columns. */
/* Six cities, so three columns — auto-fit resolved to five at 1440 and left
   Roswell alone on a row of its own. */
.areapills { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.areapills li { margin: 0; }
.areapill {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0.9rem 1.1rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  color: var(--navy-900); text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.areapill:hover { color: var(--accent-700); border-color: var(--accent-500); background: var(--accent-050); text-decoration: none; }
.areapill .icon { color: var(--line-strong); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.areapill:hover .icon { color: var(--accent-500); transform: translate(2px, -2px); }
.areas--teaser .areas__foot { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* 11. CHECKLISTS / STEPS / TIMELINE / TABLE ================================ */

.checklist { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(var(--col-3), 1fr)); }
.checklist__group { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); }
.checklist__room {
  font-size: var(--fs-base); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-700); margin-bottom: var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--accent-100);
}
.checklist__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.checklist__items li { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.checklist__items .icon { color: var(--accent-500); margin-top: 3px; flex: none; }

.addons { margin-top: clamp(2rem, 4vw, 3rem); background: var(--mist-100); border-radius: var(--r-lg); padding: var(--pad-card-lg); }
.addons__title { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-h4); margin-bottom: var(--s-3); }
.addons__title .icon { color: var(--accent-600); }
.addons__text { color: var(--text-muted); font-size: var(--fs-base); max-width: 66ch; }
.addons__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.addons__list li { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--navy-700); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.4em 0.9em; }

.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(var(--col-4), 1fr)); }
.steps__item { margin: 0; position: relative; padding-top: var(--s-6); border-top: 1px solid var(--line); }
/* Oversized outlined numeral bleeding above the rule — an editorial device
   rather than another icon-in-a-rounded-square. */
.steps__num {
  position: absolute; top: -0.32em; right: 0;
  font-family: var(--font-display); font-size: clamp(3.5rem, 6vw, 5rem); font-weight: 700; line-height: 1;
  color: transparent;
  /* was --line-strong, which read as a printing artefact rather than a
     numeral. This is still clearly decorative but actually visible. */
  -webkit-text-stroke: 1.5px #a9bcc5;
  letter-spacing: -0.04em;
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--dur) var(--ease);
}
.steps__item:hover .steps__num { -webkit-text-stroke-color: var(--brand-500); }
.steps__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--accent-500); color: var(--white); margin-bottom: var(--s-4); }
.steps__title { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.steps__text { color: var(--text-muted); font-size: var(--fs-base); margin: 0; }
.steps__list--compact .steps__num { font-size: clamp(2.5rem, 4vw, 3.25rem); }

/* Text-stroke is not universally supported; fall back to a solid tint so the
   numerals never disappear. */
@supports not (-webkit-text-stroke: 1px red) {
  .steps__num { color: var(--accent-100); }
}

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.timeline__item { margin: 0; display: grid; grid-template-columns: 56px 1fr; gap: var(--s-5); position: relative; }
.timeline__item:not(:last-child)::before {
  content: ''; position: absolute; left: 27px; top: 62px; bottom: calc(-1 * clamp(2rem, 4vw, 3rem));
  width: 2px; background: linear-gradient(180deg, var(--accent-100), transparent);
}
.timeline__marker { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-500); color: var(--white); display: grid; place-items: center; }
.timeline__num { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.timeline__title { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.timeline__title .icon { color: var(--accent-500); }
.timeline__body > p { color: var(--text-muted); }

/* Scrolling shadows. The table is 560px wide at its narrowest and the wrapper
   scrolls, but on a phone the right-hand column was simply cut off at the
   border with nothing to say it could be dragged. These two shadows are
   painted on the scroll layer and the two white masks on the content layer, so
   each shadow only shows while there is content off that edge. */
.why__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(to right, var(--white) 40%, rgba(255, 255, 255, 0)) left center / 44px 100% no-repeat local,
    linear-gradient(to left, var(--white) 40%, rgba(255, 255, 255, 0)) right center / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(10, 34, 44, 0.17), rgba(10, 34, 44, 0)) left center / 15px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(10, 34, 44, 0.17), rgba(10, 34, 44, 0)) right center / 15px 100% no-repeat scroll,
    var(--white);
}
.why__table { width: 100%; border-collapse: collapse; min-width: 660px; font-size: var(--fs-sm); }
.why__table th, .why__table td { text-align: left; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); vertical-align: top; }
.why__table thead th { font-family: var(--font-display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); background: var(--paper); white-space: nowrap; }
.why__table tbody th { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); width: 24%; }
.why__table tr:last-child th, .why__table tr:last-child td { border-bottom: 0; }
.why__mine { background: var(--accent-050); color: var(--navy-900); }
.why__mine .icon { color: var(--accent-500); vertical-align: -3px; margin-right: 0.2em; }
thead .why__mine { color: var(--accent-700); font-weight: 700; }
.why__theirs { color: var(--text-muted); }
.why__table--plain .why__mine { background: transparent; }
/* Same shape as .notice and for the same reason: the leading <strong> was
   becoming its own flex column, so "100% Happiness Guarantee." sat in a
   narrow left column with the sentence beside it instead of opening it. */
.why__note { position: relative; padding-left: calc(18px + var(--s-3)); margin-top: var(--s-5); font-size: var(--fs-base); color: var(--text-muted); max-width: 66ch; }
.why__note > .icon { position: absolute; left: 0; top: 4px; color: var(--accent-500); }

/* 12. FAQ ================================================================== */

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__heading { margin: 0; font-size: inherit; }
.accordion__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: none; border: 0; cursor: pointer;
  padding: 1.15rem 0.25rem;
  text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  color: var(--navy-900);
  line-height: 1.4;
}
.accordion__trigger:hover { color: var(--accent-700); }
.accordion__chev { color: var(--accent-600); flex: none; transition: transform var(--dur) var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__chev { transform: rotate(180deg); }
.accordion__panel[hidden] { display: none; }
.accordion__content { padding: 0 var(--s-6) 1.35rem 0.25rem; color: var(--text-muted); font-size: var(--fs-base); }
.accordion__content p { margin: 0; }

.faq__more { text-align: center; margin-top: var(--s-6); color: var(--text-muted); font-size: var(--fs-sm); }

.faqnav { margin-bottom: var(--s-7); }
.faqnav ul { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.faqnav li { margin: 0; }
.faqnav a {
  display: inline-block; font-size: var(--fs-sm); font-weight: 600; padding: 0.45em 0.95em;
  border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--navy-700); text-decoration: none; background: var(--white);
}
.faqnav a:hover { border-color: var(--accent-500); background: var(--accent-050); color: var(--accent-700); }

.faqgroup { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.faqgroup:last-child { margin-bottom: 0; }
.faqgroup__title { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
.faqgroup__title:focus { outline: none; }
.faqgroup__title:focus-visible { outline: 3px solid var(--accent-500); outline-offset: 4px; }

/* 13. AREAS ================================================================ */

/* Multi-column, not grid. The six regions hold between 5 and 12 cities each,
   so a grid sized its rows to the tallest column and left a ragged half-column
   of dead space under the short ones. Column balancing packs them level. */
.areas__grid { columns: 3 260px; column-gap: clamp(1.5rem, 3vw, 3rem); }
.areas__col { min-width: 0; break-inside: avoid; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.areas__col:last-child { margin-bottom: 0; }
.areas__region {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--accent-700); padding-bottom: var(--s-2); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.areas__cities { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.areas__cities li { margin: 0; }
.areas__link { display: block; padding: 0.28rem 0; font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; }
a.areas__link--page { color: var(--navy-800); font-weight: 700; }
a.areas__link--page:hover { color: var(--accent-700); text-decoration: underline; }
.areas__foot { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* 14. CTA ================================================================== */

/* Was a navy card with a cyan glow behind it. Now a white card on the tinted
   section, held by the same hairline every other card on the site uses. */
.cta__card {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.cta { background: var(--accent-050); }
.cta__card .kicker--light { color: var(--accent-600); }
.cta__title { color: var(--navy-900); font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.cta__text { color: var(--text-muted); font-size: var(--fs-lg); margin-bottom: var(--s-5); max-width: 52ch; }
.cta__card .strip__item { color: var(--navy-700); }
.cta__card .strip__item .icon { color: var(--accent-500); }
.cta__actions { display: grid; gap: var(--s-4); justify-items: start; }
/* The label is two lines, so `align-items: center` put the icon 12.6px below
   the line it belongs to — it read as attached to nothing. Align it to the
   first line: half a line box, minus half the icon. */
.cta__phone { display: inline-flex; align-items: flex-start; gap: var(--s-3); color: var(--navy-900); text-decoration: none; }
/* First line is the 13px "Rather talk it through?" at line-height 1.25, so its
   box is 16.25px and its centre sits 8.1px down — half of a 20px icon is 10. */
.cta__phone > .icon { margin-top: -2px; }
.cta__phone:hover { color: var(--accent-700); }
.cta__phone .icon { color: var(--accent-500); }
.cta__phone span { display: flex; flex-direction: column; line-height: 1.25; }
.cta__phone small { font-size: var(--fs-xs); color: var(--text-muted); }
.cta__phone strong { font-family: var(--font-display); font-size: var(--fs-lg); color: inherit; }

/* 15. BLOG & PROSE ========================================================= */

.pcard { display: flex; flex-direction: column; position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pcard:hover { border-color: var(--accent-500); }
.pcard__media { border-radius: 0; }
.pcard__body { padding: var(--pad-card); display: flex; flex-direction: column; flex: 1; }
.pcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--s-3); }
.pcard__title { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.pcard__title a { color: var(--navy-900); text-decoration: none; }
.pcard__title a::after { content: ''; position: absolute; inset: 0; }
.pcard:hover .pcard__title a { color: var(--accent-700); }
.pcard__excerpt { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-4); }
.pcard__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--accent-700); }

.feature { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; background: var(--mist-100); border-radius: var(--r-xl); overflow: hidden; padding: var(--pad-card); }
.feature__media { border-radius: var(--r-lg); }
.feature__body { padding: var(--s-2) clamp(0.25rem, 1.5vw, 1.25rem) var(--s-4); }
.feature__title { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.feature__title a { color: var(--navy-900); text-decoration: none; }
.feature__title a::after { content: ''; position: absolute; inset: 0; }
.feature:hover .feature__title a { color: var(--accent-700); }
.feature__excerpt { color: var(--text-muted); font-size: var(--fs-lg); margin-bottom: var(--s-4); }

.post__head { padding-block: clamp(2rem, 4vw, 3.25rem) var(--s-6); background: var(--white); border-bottom: 1px solid var(--line); }
.post__title { font-size: var(--fs-h1); margin-bottom: var(--s-4); }
.post__excerpt { font-size: var(--fs-lg); color: var(--text-muted); margin-bottom: var(--s-4); }
.post__byline { display: flex; align-items: center; gap: 0.45em; font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.post__byline .icon { color: var(--accent-500); }
.post__media { margin-bottom: clamp(2rem, 4vw, 3rem); }
.postbody { display: grid; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: var(--section-y); }
.post__toc { align-self: start; }
@media (min-width: 860px) {
  /* Grid item + align-self:start gives the sticky element the tall track it
     needs; without both, position:sticky silently does nothing here. */
  .post__toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100dvh - var(--header-h) - 48px); overflow-y: auto; }
}
.post__toctitle { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: var(--s-3); }
.post__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); border-left: 2px solid var(--line); }
.post__toc li { margin: 0; }
/* Scoped to the list. `.post__toc a` (0,1,1) also matched the "Get a Quote"
   button sitting in the same aside and beat `.btn` (0,1,0): the label came out
   --text-muted on the navy fill, 2.37:1, and picked up the list's block layout
   and left padding as well. */
.post__toc ol a { display: block; padding: 4px 0 4px var(--s-4); font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; line-height: 1.4; }
.post__toc ol a:hover { color: var(--accent-700); }
.post__toccta { margin-top: var(--s-6); padding: var(--s-4); background: var(--accent-050); border-radius: var(--r-md); }
.post__toccta p { font-size: var(--fs-sm); font-weight: 600; color: var(--navy-900); margin-bottom: var(--s-3); }

.prose { max-width: 72ch; font-size: var(--fs-md); }
.prose h2 { font-size: var(--fs-h3); margin-top: clamp(2rem, 4vw, 2.75rem); margin-bottom: var(--s-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose p { color: var(--text-muted); }
.prose__list { margin: 0 0 var(--s-5); padding-left: 1.35rem; }
.prose__list li { color: var(--text-muted); margin-bottom: var(--s-2); }
.prose__list li::marker { color: var(--accent-500); font-weight: 700; }
.prose .notice { margin-bottom: var(--s-5); }

/* A tabela de taxas da /terms-and-conditions/ (22/09/2026): a pagina de
   origem publica "Fees & Payment Policies" numa tabela de duas colunas e a
   copia tem de a manter. Abaixo de 640px a tabela deixa de ser grelha — cada
   linha vira um cartao e o cabecalho de cada celula vem do data-label, para
   nao haver rolagem horizontal no telemovel. */
.prose__tablewrap { margin: 0 0 var(--s-5); }
.prose__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); text-align: left; }
.prose__table th, .prose__table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.prose__table thead th { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); background: var(--accent-050); border-bottom-width: 2px; }
.prose__table tbody th { font-weight: 600; color: var(--navy-900); width: 34%; }
.prose__table td { color: var(--text-muted); }
@media (max-width: 639px) {
  .prose__table, .prose__table tbody, .prose__table tr, .prose__table th, .prose__table td { display: block; width: auto; }
  .prose__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .prose__table tr { margin-bottom: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
  .prose__table th, .prose__table td { border-bottom: 0; padding: var(--s-3) var(--s-4); }
  /* o width:34% da grelha ganha por especificidade mesmo dentro do media
     query — tem de ser reposto aqui, senao o rotulo parte a meio da
     palavra («Missed Appointme/nt») no telemovel */
  .prose__table tbody th { width: auto; background: var(--accent-050); }
  .prose__table td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-700); margin-bottom: 2px; }
}

/* 16. CONTACT ============================================================== */

.contactgrid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.contactlist { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-5); }
.contactlist li { display: flex; gap: var(--s-4); margin: 0; }
.contactlist__icon { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent-100); color: var(--accent-700); }
.contactlist__body { display: flex; flex-direction: column; gap: 2px; }
.contactlist__body strong { font-family: var(--font-display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.contactlist__body small { color: var(--text-muted); font-size: var(--fs-xs); }
/* "Open in Google Maps" is a standalone link, not one inside a sentence, so
   the 24px minimum target size applies to it. */
.contactlist__body small a { display: inline-flex; align-items: center; gap: 0.25em; padding-block: 4px; }
.contactlist__big { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--navy-900); text-decoration: none; letter-spacing: -0.02em; }
.contactlist__big:hover { color: var(--accent-700); }

.mapwrap { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--mist-200); line-height: 0; }
.mapwrap iframe { display: block; width: 100%; }

/* A faixa do mapa acima do rodapé. Sem contentor e sem raio: encosta às duas
   margens e ao rodapé, como no site atual. Altura menor no telemóvel — 420px
   num ecrã de 844 comiam meia página. */
.footermap { display: block; line-height: 0; background: var(--mist-200); border-top: 1px solid var(--line); }
.footermap iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 699px) { .footermap iframe { height: 260px; } }

/* 17. 404 ================================================================== */

.notfound__inner { text-align: center; padding-block: clamp(1rem, 3vw, 3rem); }
.notfound__mark { display: inline-grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--accent-100); color: var(--accent-600); margin-bottom: var(--s-5); }
.notfound__title { font-size: var(--fs-h1); margin-bottom: var(--s-4); }
.notfound__text { font-size: var(--fs-lg); color: var(--text-muted); margin-bottom: var(--s-6); }
.notfound__actions { justify-content: center; }
.notfound__links { margin-top: var(--s-8); text-align: left; display: inline-block; }
.notfound__links h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: var(--s-3); text-align: center; }
.notfound__links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-5); }
.notfound__links li { margin: 0; font-size: var(--fs-sm); }
.notfound__links a { display: inline-block; padding-block: 5px; }
.notfound__phone { margin-top: var(--s-6); color: var(--text-muted); }

/* 18. FOOTER =============================================================== */

/* Redesign 06/09/2026 — the reference's footer: a cool light-grey ground,
   four columns (brand, menu, services, contact), small blue uppercase column
   titles, the phone number as the same glossy pill the header uses, and
   round outlined social buttons. Then a hairline and a bottom bar. */
.footer { background: var(--ice-2); color: var(--text-muted); padding-block: clamp(3rem, 6vw, 4.5rem) var(--s-6); font-size: 0.9375rem; }
.footer__top { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid #dfe3e8; }
@media (min-width: 640px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .footer__top { grid-template-columns: 1.25fr 0.85fr 1fr 1.3fr; } }
.footer__brand { max-width: 300px; }
.footer__blurb { margin: var(--s-4) 0 0; line-height: 1.6; color: var(--text-muted); }
.footer__title { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-500); line-height: 1.35; margin: 0 0 var(--s-4); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.footer__list li { margin: 0; }
.footer__list a { display: inline-block; padding-block: 5px; }
.footer__list a, .footer__contact a { color: #2a3740; text-decoration: none; }
.footer__list a:hover, .footer__contact a:hover { color: var(--accent-500); text-decoration: underline; text-underline-offset: 0.25em; }
.footer__list a[aria-current="page"] { color: var(--accent-500); font-weight: 600; }
.footer__lead { margin: 0 0 var(--s-3); color: #2a3740; }
.footer__contact { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-2); }
.footer__contact li { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; }
.footer__contact a { display: inline-block; padding-block: 4px; }
.footer__contact .icon { color: var(--accent-500); flex: none; margin-top: 7px; }
.footer__contact address { line-height: 1.5; padding-block: 4px; font-style: normal; }
.footer__contact .placeholder { margin-block: 4px; }
/* O e-mail é um único token de ~200px que não quebra sozinho; a 1140 e 1200px
   a coluna de Contacto aperta e a linha saía para fora dela. Medido. */
.footer__contact li > *:not(.icon),
.sidebar__details li > *:not(.icon) { min-width: 0; }
.footer__contact a,
.sidebar__details a { overflow-wrap: anywhere; }
.footer__phonebtn { margin-bottom: var(--s-5); }

.social { display: flex; gap: var(--s-3); }
.social__link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--accent-500); background: var(--white); color: var(--accent-500); text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.social__link:hover { background: var(--accent-500); color: var(--white); transform: translateY(-2px); }

.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; align-items: center; padding-top: var(--s-5); font-size: 0.875rem; }
.footer__copy { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }
.footer__legal a { display: inline-block; padding-block: 5px; color: var(--text-muted); text-decoration: none; }
.footer__legal a:hover { color: var(--accent-500); text-decoration: underline; }
.footer__totop { display: inline-flex; align-items: center; gap: 0.4em; color: #2a3740; text-decoration: none; padding-block: 5px; }
.footer__totop:hover { color: var(--accent-500); }
.footer__totop .icon { color: var(--accent-500); }

/* Assinatura de quem construiu o site. Discreta de propósito: mais apagada que
   o copyright e que os links legais, e sempre a última coisa da barra. */
.footer__by { margin: 0; color: var(--text-muted); opacity: 0.8; }
.footer__by a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.footer__by a:hover { color: var(--accent-500); opacity: 1; border-bottom-color: var(--accent-500); }

@media (max-width: 640px) {
  .footer__by { flex-basis: 100%; }
}

.actionbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 0.55rem var(--s-4) calc(0.55rem + env(safe-area-inset-bottom));
  gap: var(--s-3);
}
.actionbar__btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 48px; padding: 0.7rem 1rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  border-radius: var(--r-pill); text-decoration: none;
}
.actionbar__btn--call { background: var(--white); color: var(--text); border: 1.5px solid var(--line-strong); }
.actionbar__btn--call:hover { color: var(--accent-700); border-color: var(--accent-500); }
.actionbar__btn--quote { background: var(--accent-500); color: var(--white); flex: 1.4; }
.actionbar__btn--quote:hover { background: var(--accent-600); color: var(--white); }

/* 19. RESPONSIVE =========================================================== */

@media (min-width: 700px) {
  .progress__step { flex-direction: row; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .progress__step::before { flex-basis: 100%; }
}

@media (min-width: 860px) {
  .postbody { grid-template-columns: 240px minmax(0, 1fr); }
  .quotepage { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
  .contactgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .feature { grid-template-columns: 1.15fr 1fr; padding: 0; }
  .feature__media { border-radius: 0; }
  .feature__body { padding: clamp(1.5rem, 3vw, 3rem); }
  .cta__card { grid-template-columns: 1.4fr auto; }
  .cta__actions { justify-items: end; text-align: right; }
}

@media (min-width: 960px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
  .phero__inner { grid-template-columns: 1.1fr 0.9fr; }
  .split__inner { grid-template-columns: 0.95fr 1.05fr; }
  .split--intro { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }
  .quotesection__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}


/* Mobile navigation + action bar.
   The switch used to be at 1024px and the header overflowed the viewport on
   every page between 1024 and ~1090: seven nav items plus the phone number
   plus the quote button need about 1015px of content box, and a 1024 viewport
   only offers 944. Measured, not guessed — see the QA probe. */
@media (max-width: 1139px) {
  .nav { display: none; }
  .header__phone span { display: none; }
  .header__phone { padding: 0.6rem; min-width: 42px; }
  .header__burger { display: inline-flex; }
  body.nav-open { overflow: hidden; }
  .actionbar { display: flex; }
  body { padding-bottom: 72px; }
}

/* The sidebar is the menu on touch/narrow screens only; above this width the
   full horizontal nav is present and the burger is hidden, so the sidebar can
   never be opened. */
@media (min-width: 1140px) {
  .sidebar { display: none; }
}

/* Between the nav appearing and the container reaching full width there is no
   slack left, so the bar tightens rather than wrapping or overflowing. */
@media (min-width: 1140px) and (max-width: 1279px) {
  .header__inner { gap: var(--s-4); }
  .nav__link { padding-inline: 0.35rem; }
  .header__phone { padding-inline: 1.1em; }
  /* Nesta faixa o Login perde o cadeado e fica só com a palavra. Medido a
     1140px em 07/09/2026: a barra tinha 62px de folga e o botão inteiro pede
     111 (95 + o intervalo) — o excedente saía do logótipo, que encolhia de
     123 para 78px, e o telefone partia-se em duas linhas. Sem o ícone, e com
     os itens do menu 0,15rem mais apertados de cada lado, sobram 13,6px e
     nada encolhe. Cai a imagem, nunca a palavra: um cadeado sozinho é um
     emblema, não uma porta. */
  .header__login .icon { display: none; }
  .header__login { padding-inline: 0.8rem; gap: 0; }
}

@media (max-width: 767px) {
  /* Both header actions go at the same breakpoint and for the same reason:
     measured at 360px, phone + Client Area + burger made .header__actions
     380px wide inside a 360px viewport — 20px of horizontal scroll on all
     31 pages. The sidebar carries both buttons, so nothing is lost. Login
     goes the same way and for the same reason. */
  .header__cta, .header__client, .header__login { display: none; }
  .hero__badge { position: static; margin-top: var(--s-4); max-width: none; }
  .promobar__detail { display: none; }
  .why__table { min-width: 560px; }
  .steps__list { gap: var(--s-6); }
  .review > div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 560px) {
  .promobar { font-size: var(--fs-xs); }
  .promobar__icon, .promobar__arrow { display: none; }
  /* Before/after stays side by side on a phone. Stacking made each frame
     full-width and ~470px tall, so comparing the two meant scrolling between
     them — which is the one thing the section exists to let you not do. */
  /* 0.6875rem dava 11px medidos no telemóvel — o único texto do site abaixo
     de 12px. Os quatro rótulos cabem à mesma a 12px num ecrã de 360px. */
  .progress__label { font-size: 0.75rem; }
  .btn--lg { width: 100%; }
  .hero__actions .btn, .phero__actions .btn, .notfound__actions .btn { width: 100%; }
  .promobar__inner { padding-right: 2.5rem; }
  .promobar__close { position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); margin: 0; }
}

/* 20. MOTION =============================================================== */

/* Reveal on scroll. Directional variants so a page doesn't animate in exactly
   one way from top to bottom. Only applied once JS confirms it is running —
   without it everything is visible from the start. */
.js-on [data-reveal] { opacity: 0; transform: translateY(16px); }
.js-on [data-reveal="left"] { transform: translateX(-20px); }
.js-on [data-reveal="right"] { transform: translateX(20px); }
.js-on [data-reveal="scale"] { transform: scale(0.97); }
.js-on [data-reveal].is-visible {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

/* Hover affordances — small, consistent, never decorative for its own sake. */
.btn--accent, .btn--primary { position: relative; overflow: hidden; }
.scard__cta .icon, .pcard__cta .icon, .lcard__cta .icon, .btn--ghost .icon { transition: transform var(--dur) var(--ease); }
.btn--ghost:hover .icon { transform: translateX(3px); }
.lcard:hover .lcard__cta .icon { transform: translateX(3px); }
.pcard:hover .pcard__cta .icon { transform: translateX(3px); }

/* Underline sweep on inline prose links instead of a static underline. */
.prose a, .accordion__content a, .sectionhead__text a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  text-decoration: none;
  transition: background-size 320ms var(--ease);
}
.prose a:hover, .accordion__content a:hover, .sectionhead__text a:hover { background-size: 100% 1.5px; }

/* Accordion content fades in on open. Deliberately NOT a height animation:
   the standard pattern hides the panel with the `hidden` attribute, and
   overriding its `display` to animate height would put the collapsed content
   back into the accessibility tree. The chevron rotation carries the feedback. */
.accordion__panel:not([hidden]) > .accordion__content { animation: accordionIn 260ms var(--ease) both; }
@keyframes accordionIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .header, .promobar, .actionbar, .footer, .cta, .quote, .skiplink { display: none !important; }
  body { padding: 0; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* 21. THE AMANDA LINE — home page, redesign 06/09/2026 ===================== */
/*
   Reference: amandasmaid.com, sent by the client three times. Third pass.
   Their note this time: "ainda não está como o site da Amanda — consegue
   praticamente copiar, mas sem fazer igual?"

   So this section now takes the reference's devices one by one:

     · the headline set straight onto the banner photograph (the photograph
       was chosen for its wide bright sky, and .nchero carries a flat sky-blue
       ground underneath so the contrast is real and measurable);
     · a white form card with grey, borderless fields and placeholders;
     · big black numbers with a blue label and a blue "+";
     · one rounded photo card the width of the container, with a soft wash;
     · a glossy uppercase pill closing every block;
     · white cards with a soft, diffuse shadow (the 03/09 "no shadows" note
       was about the old design's heavy drop shadows and dark gradients; the
       reference itself is built on soft ones, and copying it means using
       them — quietly);
     · three overlapping-photo collages, one with a blue outline frame;
     · six badge cards with a blue halo; an eight-card grid on grey;
     · two coverage cards; a founders-style card; a split FAQ.

   What is NOT copied: the palette (North's teal from their own logo, not the
   reference's sky blue), the type sizes' exact pixels, the copy, the claims,
   the numbers, and every photograph.

   Every class is prefixed `nc`; the layer is additive to sections 1–20.
*/

.section--ice { background: var(--ice); }
.section--ice2 { background: var(--ice-2); }

/* --- shared: eyebrow, head, closing CTA ---------------------------------- */

.nchead { text-align: center; max-width: 48rem; margin-inline: auto; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.nchead--left { text-align: left; margin-inline: 0; }
.nckicker {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.875rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--accent-500); margin: 0 0 var(--s-3);
}
.nckicker svg { color: var(--brand-600); }
.nchead__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 1.18; letter-spacing: -0.015em;
  color: var(--text); margin: 0;
  text-wrap: balance;
}
.nchead--sm .nchead__title { font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem); }
.nchead__title em { font-style: normal; color: var(--accent-500); }
.nchead__text { margin: var(--s-4) 0 0; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.65; }
.nchead--left .nchead__text { max-width: 56ch; }

.ncta { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.ncta--tight { margin-top: var(--s-6); }
.ncta--left { text-align: left; }
.ncta__note { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.ncta__note a { color: var(--accent-600); display: inline-block; padding-block: 2px; }

/* --- 0. the ticker: the current site's top bar, looping --------------- */
.ncticker {
  overflow: hidden; white-space: nowrap;
  background: var(--accent-500); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em;
  padding-block: 0.55rem;
}
.ncticker__track { display: inline-flex; gap: 0; animation: ncticker 38s linear infinite; will-change: transform; }
.ncticker__track:hover { animation-play-state: paused; }
.ncticker__item { display: inline-flex; align-items: center; gap: 0.6em; padding-inline: 1.2rem; }
.ncticker__item a { color: inherit; text-decoration: none; }
.ncticker__item a:hover { text-decoration: underline; }
.ncticker__sep { opacity: 0.85; }
@keyframes ncticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ncticker { white-space: normal; text-align: center; }
  .ncticker__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .ncticker__track > .ncticker__copy { display: none; }
}

/* --- 1. banner ----------------------------------------------------------- */

.nchero { position: relative; background: var(--sky); overflow: hidden; }
.nchero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
}
.nchero__inner {
  position: relative;
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.nchero__title {
  font-family: var(--font-display); font-weight: 700;
  /* Capped at 56px so the headline holds three lines beside the form and
     stays in the sky of the photograph; at 64px the fourth line landed on
     the roof. */
  font-size: clamp(2.25rem, 3vw + 1rem, 3.375rem); line-height: 1.1; letter-spacing: -0.02em;
  /* White on the photograph, as the current site does it. White alone dies
     against the pale haze near the horizon, so the letters carry their own
     ground: a tight dark edge plus a wide soft one. Measured, not guessed —
     tools/qa.js probe reads the pixels behind the headline. */
  color: #fff; margin: 0;
  text-shadow: 0 1px 2px rgba(8, 26, 38, 0.55), 0 2px 22px rgba(8, 26, 38, 0.5);
  text-wrap: balance;
}
.nchero__copy { padding-top: clamp(0.5rem, 2vw, 1.5rem); }
/* The claim the current site opens with, kept in its words. */
.nchero__kicker {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin: 0 0 var(--s-4); padding: 0.4rem 0.9rem;
  border-radius: 999px; background: var(--accent-500); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.01em;
}
/* The recurring-service credit the current site runs in its top bar. */
.ncform__promo { display: flex; align-items: flex-start; gap: 0.4rem; margin: -0.5rem 0 1rem; padding: 0.55rem 0.75rem; border-radius: 8px; background: #fff8e6; color: #5b4300; font-size: 0.8125rem; line-height: 1.45; }
.ncform__promo .icon { color: var(--gold); flex: none; margin-top: 2px; }
.ncform__promo strong { color: #3d2e00; }

.ncform {
  background: var(--white); border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
  min-width: 0;
}
.ncform__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2vw, 2rem); color: var(--accent-500); margin: 0; letter-spacing: -0.01em; }
.ncform__step { margin: 0.2rem 0 0.75rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--accent-500); }
.ncform__note { margin: 0 0 1.25rem; font-size: 0.875rem; color: var(--text); line-height: 1.55; }
.ncform__field { margin-bottom: 0.75rem; }
.ncform__row { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ncinput {
  width: 100%;
  font-family: var(--font-body); font-size: 0.9375rem; color: var(--text);
  background: #f1f2f5; border: 1px solid #e3e6ec; border-radius: 6px;
  padding: 0.75rem 0.9rem; min-height: 46px;
  appearance: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
select.ncinput {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23303a41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2.4rem;
}
.ncinput::placeholder { color: #6f7c86; }
.ncinput:hover { border-color: #c9d0d8; }
.ncinput:focus { outline: 0; border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-100); background: var(--white); }
.ncform .btn { margin-top: 0.5rem; }
.ncform__foot { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.9rem 0 0; font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }
.ncform__foot .icon { color: var(--accent-500); flex: none; margin-top: 2px; }

@media (min-width: 920px) {
  .nchero__inner { grid-template-columns: minmax(0, 1fr) minmax(400px, 470px); column-gap: clamp(2rem, 5vw, 5rem); }
  .nchero__copy { padding-top: clamp(1rem, 3vw, 2.5rem); }
}
@media (max-width: 919px) {
  /* Phone and tablet: the photograph stays behind the words, as on the
     current site — the headline sits in the sky at the top of the frame,
     the house shows underneath it, and the form card rides up over the
     lawn. The photo is anchored to its lower-right so the house is what
     peeks out between the headline and the card. */
  .nchero { background: var(--sky); }
  .nchero__bg { position: absolute; top: 0; left: 0; right: 0; height: clamp(470px, 70vw, 600px); background-position: 66% top; }
  .nchero__inner { padding-top: var(--s-5); gap: 0; }
  .nchero__copy { min-height: clamp(300px, 46vw, 420px); padding-top: 0; }
  .nchero__title { font-size: clamp(1.9rem, 7vw, 2.75rem); max-width: 22ch; text-shadow: 0 1px 2px rgba(8, 26, 38, 0.6), 0 2px 24px rgba(8, 26, 38, 0.55); }
  .ncform { margin-top: 0; }
}

/* --- 2. the numbers ------------------------------------------------------ */

.ncstats { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); }
.ncstats__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-6) var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}
@media (min-width: 760px) { .ncstats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ncstats__item { margin: 0; }
.ncstats__value {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ncstats__value em { font-style: normal; color: var(--accent-500); }
.ncstats__label { display: block; margin-top: var(--s-3); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.5rem); color: var(--accent-500); line-height: 1.25; }
.ncstats .notice { max-width: 60rem; margin-inline: auto; }

/* --- 3. the rounded photo card ------------------------------------------ */

/* Two columns: the words on an ice ground, the photograph filling the right
   column edge to edge, and a soft wash where the two meet. A portrait crop
   in a fixed column is what keeps the person whole at every width — a
   background-image cover on the whole card cropped her to a forehead. */
.ncband {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  min-height: clamp(340px, 34vw, 420px);
  border-radius: 22px; overflow: hidden;
  background: var(--ice);
  box-shadow: var(--shadow-md);
}
.ncband__copy { align-self: center; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4.5rem); }
.ncband__media { position: relative; min-height: 100%; }
.ncband__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ncband__wash {
  /* Only the seam. It was 38% of the photo column and ate the left third of
     the picture; then 18%; now 9% — enough to soften the join between the ice
     ground and the photograph, and nothing more. The falloff is steep on
     purpose: full colour only against the very edge, gone by a third of the
     way in. The phone keeps its own fade at the bottom (below). */
  position: absolute; top: 0; bottom: 0; left: -1px; width: 9%;
  background: linear-gradient(90deg, rgba(242, 249, 252, 1) 0%, rgba(242, 249, 252, 0.5) 30%, rgba(242, 249, 252, 0) 100%);
}
.ncband__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.25rem); line-height: 1.22; color: var(--text); margin: 0 0 var(--s-3); letter-spacing: -0.01em; }
.ncband__text { margin: 0 0 var(--s-5); color: var(--text); font-size: 0.9375rem; line-height: 1.6; max-width: 26rem; }
@media (max-width: 699px) {
  .ncband { grid-template-columns: minmax(0, 1fr); }
  .ncband__media { order: -1; height: 300px; min-height: 0; }
  .ncband__wash { top: auto; left: 0; right: 0; width: auto; height: 34%; background: linear-gradient(0deg, rgba(242, 249, 252, 1) 0%, rgba(242, 249, 252, 0) 100%); }
  .ncband__copy { padding: 1.25rem 1.5rem 1.75rem; }
}

/* --- 4. the introduction ------------------------------------------------ */

.ncfresh { text-align: center; position: relative; overflow: hidden; }
.ncfresh::before, .ncareas::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38% 55% at 12% 30%, rgba(14, 192, 224, 0.10), transparent 70%),
    radial-gradient(34% 50% at 88% 72%, rgba(14, 192, 224, 0.09), transparent 70%);
}
.ncfresh > .container, .ncareas > .container { position: relative; }
.ncfresh .nchead { margin-bottom: var(--s-5); }
.ncfresh__text { max-width: 44rem; margin: 0 auto; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.7; }
.ncfresh__text strong { color: var(--text); }

/* --- 5. the review wall -------------------------------------------------- */

.ncwall__grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); max-width: 920px; margin-inline: auto; }
@media (min-width: 820px) { .ncwall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.ncwall__card { background: var(--white); border-radius: 18px; padding: clamp(1.25rem, 2.5vw, 1.75rem); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--s-3); }
.ncwall__top { display: flex; align-items: center; gap: var(--s-3); }
.ncwall__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-800); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.ncwall__who { display: grid; gap: 3px; min-width: 0; }
.ncwall__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--accent-500); }
.ncwall__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.ncwall__platform { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.ncwall .stars, .ncteam .stars { display: inline-flex; gap: 2px; color: #f5b301; }
.ncwall__quote { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); color: var(--text); font-size: 0.9375rem; line-height: 1.65; }
.ncwall__slot { box-shadow: none; border: 1.5px dashed var(--line-strong); background: var(--ice); }
.ncwall__slot .ncwall__avatar { background: var(--accent-100); color: var(--accent-700); }
.ncwall__slot .ncwall__name { color: var(--navy-800); }
.ncwall__slot .ncwall__quote { color: var(--text-muted); font-style: italic; }
.ncwall__claim {
  margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 54rem; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--text);
}
.ncwall__claim em { font-style: normal; color: var(--accent-500); }

/* --- 6. the grey band of badges ----------------------------------------- */

.ncbadges { text-align: center; position: relative; padding-top: clamp(3.5rem, 6vw, 5rem); }
.ncbadges__chev {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--white); color: var(--accent-500);
  display: grid; place-items: center;
}
.ncbadges__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.3; color: var(--text); max-width: 40rem; margin: 0 auto var(--s-6); }
.ncbadges__title em { font-style: normal; color: var(--accent-500); }
.ncbadges__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); }
.ncbadges__item { margin: 0; line-height: 0; }
.ncbadges__item img { height: clamp(52px, 6vw, 74px); width: auto; }
.ncbadges__text { margin: var(--s-6) auto 0; max-width: 40rem; color: var(--text-muted); font-size: 0.9375rem; }

/* --- 7. three values with photographs ----------------------------------- */

.ncvalues { padding-block: clamp(2.5rem, 5vw, 4rem); }
.ncvalues__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); text-align: center; }
@media (min-width: 800px) { .ncvalues__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.ncvalues__item { margin: 0; padding: var(--s-3) clamp(1rem, 3vw, 2.5rem); }
@media (min-width: 800px) { .ncvalues__item + .ncvalues__item { border-left: 1px solid var(--line); } }
.ncvalues__item .photo { border-radius: 16px; margin-bottom: var(--s-5); box-shadow: var(--shadow-sm); }
.ncvalues__title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text); margin: 0 0 var(--s-2); }
.ncvalues__text { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }

/* --- 8 & 10. split copy beside a collage -------------------------------- */

.ncsplit__inner { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
.ncsplit__inner > * { min-width: 0; }
@media (min-width: 900px) { .ncsplit__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ncsplit__copy > p { color: var(--text-muted); font-size: 1rem; line-height: 1.7; }
.ncsplit__copy > p strong, .ncsplit__lead strong { color: var(--text); }
.ncsplit__cols { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
@media (min-width: 560px) { .ncsplit__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ncsplit__col h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.6vw, 1.6rem); color: var(--accent-500); margin: 0 0 var(--s-2); }
.ncsplit__col p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.ncsplit__col p strong { color: var(--text); }

.nccollage { position: relative; }
.nccollage .photo { box-shadow: var(--shadow-lg); background: var(--white); }
.nccollage__big { position: relative; z-index: 1; }
.nccollage__a, .nccollage__b { position: absolute; z-index: 2; border: 4px solid var(--white); }

.nccollage--problem { padding: 10% 0 12% 0; }
.nccollage--problem .nccollage__big { width: 82%; margin-left: auto; }
.nccollage--problem .nccollage__a { top: 0; left: 0; width: 32%; }
.nccollage--problem .nccollage__b { bottom: 0; left: 22%; width: 30%; }

.nccollage--why { padding: 6% 0 24% 0; }
.nccollage__frame {
  position: absolute; left: 8%; top: 0; width: 66%; height: 78%;
  border: 3px solid var(--brand-500); border-radius: 18px; opacity: 0.85;
}
.nccollage--why .nccollage__big { width: 62%; margin-left: 0; margin-top: 4%; }
.nccollage--why .nccollage__a { top: 10%; right: 0; width: 42%; }
.nccollage--why .nccollage__b { bottom: 0; left: 18%; width: 46%; }

/* --- 9. the services ----------------------------------------------------- */

.nccards { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 640px) { .nccards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .nccards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nccard {
  display: flex; flex-direction: column;
  background: var(--ice); border: 1px solid #e3ecf2; border-radius: 18px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nccard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-100); text-decoration: none; }
.nccard__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.5vw, 1.55rem); color: var(--text); margin: 0 0 var(--s-3); line-height: 1.25; }
.nccard__text { margin: 0 0 var(--s-3); color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.nccard__fit { margin: 0 0 var(--s-5); color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.nccard__media { margin-top: auto; border-radius: 14px; }
/* Seven services in a three-column grid: the last one spans the row and turns
   sideways, photo beside the words, so nothing sits alone in a corner. */
@media (min-width: 1000px) {
  .nccard:nth-child(7):last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--s-6); }
  .nccard:nth-child(7):last-child .nccard__media { margin-top: 0; flex: 0 0 38%; order: -1; }
  .nccard:nth-child(7):last-child > :not(.nccard__media) { max-width: 40rem; }
}
.nccards__note { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 38rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.7rem); line-height: 1.3; color: var(--text); }
.nccards__note strong { color: var(--accent-500); }

/* --- 11. six proof cards with a halo ------------------------------------ */

.ncproof__head { display: grid; gap: var(--s-5) var(--s-8); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .ncproof__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.ncproof__h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 2.6vw, 2.6rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--text); margin: 0; text-wrap: balance; }
.ncproof__lead { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.7; }
.ncproof__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ncproof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ncproof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ncproof__item {
  margin: 0; background: var(--white); border-radius: 22px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: inset 0 0 0 2px rgba(14, 192, 224, 0.55), inset 0 0 26px rgba(14, 192, 224, 0.28), 0 10px 26px -14px rgba(14, 192, 224, 0.6);
}
.ncproof__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.9vw, 1.9rem); color: var(--accent-500); margin: 0 0 var(--s-3); line-height: 1.2; }
.ncproof__text { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }

/* --- 12. the team -------------------------------------------------------- */

.ncteam__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.ncteam__inner > * { min-width: 0; }
@media (min-width: 900px) { .ncteam__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.ncteam__media { position: relative; padding: 0 0 6% 6%; }
/* A thin outline offset to the bottom-left of the photograph — the
   reference's decorative line, drawn as a frame rather than a swoosh. */
.ncteam__curve {
  position: absolute; left: 0; bottom: 0; width: 70%; height: 80%;
  border: 2px solid var(--brand-500); border-radius: 22px; opacity: 0.7;
}
.ncteam__media .photo { position: relative; border-radius: 22px; box-shadow: var(--shadow-lg); }
.ncteam__body .stars { margin-bottom: var(--s-3); }
.ncteam__body .stars svg { width: 22px; height: 22px; }
.ncteam__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--text); margin: 0 0 var(--s-4); text-wrap: balance; }
.ncteam__body p { color: var(--text-muted); font-size: 1rem; line-height: 1.7; }
.ncteam__body p strong { color: var(--text); }
.ncteam__mark {
  display: inline-block; margin-top: var(--s-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.35;
  color: var(--text) !important;
  padding: 0.35rem 1rem 0.35rem 0.75rem;
  border-left: 3px solid var(--accent-500);
  background: linear-gradient(90deg, var(--accent-100), rgba(211, 236, 243, 0));
}

/* --- 13. eight reasons on grey ----------------------------------------- */

.ncreasons__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-6); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ncreasons__head .nchead { margin-bottom: 0; }
.ncreasons__logo { display: none; width: clamp(130px, 14vw, 200px); height: auto; flex: none; }
@media (min-width: 760px) { .ncreasons__logo { display: block; } }
.ncreasons__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ncreasons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .ncreasons__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ncreasons__item { grid-column: span 2; }
  .ncreasons__item:nth-child(4), .ncreasons__item:nth-child(5) { grid-column: span 3; }
}
.ncreasons__item { margin: 0; background: var(--white); border: 1px solid #e4e8ed; border-radius: 18px; padding: clamp(1.25rem, 2.2vw, 1.75rem); box-shadow: var(--shadow-sm); }
.ncreasons__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--accent-500); color: var(--white); margin-bottom: var(--s-4); }
.ncreasons__title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--text); margin: 0 0 var(--s-2); line-height: 1.3; }
.ncreasons__text { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }

/* Jobs page: the perks reuse the eight-reasons cards, three per row. */
@media (min-width: 1000px) { .ncreasons__grid--jobs .ncreasons__item { grid-column: span 2 !important; } }
/* Embeds carried over from the current site. */
.ncelf { margin-top: var(--s-2); }
.embed--booking { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); }
.embed--booking iframe { display: block; width: 100%; height: var(--embed-h, 1400px); border: 0; }
.embed--gift { margin-top: var(--s-6); --embed-h: 900px; }
.embed--map { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.embed--map iframe { display: block; width: 100%; height: 380px; border: 0; }
/* The embedded hiring form (BookingKoala) on /jobs/. */
.embed--form { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); }
.embed--form iframe { display: block; width: 100%; height: 1100px; border: 0; }

/* --- 14. two coverage cards --------------------------------------------- */

.ncareas { position: relative; overflow: hidden; }
.ncareas__cards { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .ncareas__cards { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: start; } }
.ncareas__card { background: rgba(255, 255, 255, 0.72); border: 1px solid #dfe9ef; border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-sm); }
.ncareas__card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--text); margin: 0 0 var(--s-5); }
.ncareas__cols { display: grid; gap: var(--s-5); }
@media (min-width: 480px) { .ncareas__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ncareas__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ncareas__group h4 { font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-500); margin: 0 0 var(--s-2); }
.ncareas__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.ncareas__group li { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--text); }
.ncareas__group svg { color: var(--accent-500); flex: none; }
.ncareas__group a { color: inherit; text-decoration: none; display: inline-block; padding-block: 4px; }
.ncareas__group a:hover { color: var(--accent-600); text-decoration: underline; text-underline-offset: 0.25em; }

/* --- 15. a message from the team --------------------------------------- */

.ncnote__card {
  display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center;
  background: var(--ice); border-radius: 22px;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  box-shadow: var(--shadow-sm);
}
.ncnote__card > * { min-width: 0; }
@media (min-width: 900px) { .ncnote__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ncnote__body p { color: var(--text); font-size: 1rem; line-height: 1.7; }
.ncnote__sign { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--text); }
.ncnote__media .photo { border-radius: 20px; box-shadow: var(--shadow-lg); }

/* --- 16. the FAQ, split ------------------------------------------------- */

.ncfaq__inner { display: grid; gap: var(--s-6) var(--s-8); align-items: start; }
@media (min-width: 900px) { .ncfaq__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); } }
.ncfaq__head .nchead { margin-bottom: 0; }
.ncfaq .accordion { border: 0; display: grid; gap: var(--s-3); }
.ncfaq .accordion__item { border: 1px solid #dfe9ef; border-radius: 12px; background: var(--white); box-shadow: var(--shadow-sm); }
.ncfaq .accordion__trigger { padding: 1.05rem 1.25rem 1.05rem 1.5rem; font-size: 1rem; color: var(--text); }
.ncfaq .accordion__chev { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--accent-050); color: var(--accent-500); }
.ncfaq .accordion__content { padding: 0 1.5rem 1.35rem; font-size: 0.9375rem; }

/* 22. CORRECTIONS OF 14/09/2026 ============================================ */
/* The client document "Website correcoes": a highlighted numbers section,
   a better badge section (with Nextdoor), a decision tool instead of a
   spreadsheet, and a fuller footer. Still a white page with cold tints only
   (the 04/09 rule), so weight comes from type, cards and the teal, not from
   dark bands. */

/* --- the numbers, as a highlighted band --------------------------------- */
.ncstats--band { padding-block: clamp(3rem, 6vw, 4.75rem); background: linear-gradient(180deg, var(--ice) 0%, #ffffff 100%); border-block: 1px solid #e3eff4; }
.ncstats__head { text-align: center; max-width: 46rem; margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem); }
.ncstats__kicker { margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-500); }
.ncstats__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.4vw + 0.8rem, 2.5rem); line-height: 1.18; letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
.ncstats--band .ncstats__grid { gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .ncstats--band .ncstats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ncstats--band .ncstats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ncstats--band .ncstats__item {
  position: relative; background: #fff; border: 1px solid #dcebf1; border-radius: 18px;
  padding: clamp(1.25rem, 2.2vw, 1.75rem) var(--s-3) clamp(1.1rem, 2vw, 1.5rem);
  box-shadow: 0 14px 30px -22px rgba(6, 33, 44, 0.45); overflow: hidden;
}
.ncstats--band .ncstats__item::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #0ec0e0, #0a7a92); }
@media (max-width: 699px) { .ncstats--band .ncstats__item:last-child { grid-column: 1 / -1; } }
.ncstats--band .ncstats__value { font-size: clamp(1.9rem, 2.4vw + 0.9rem, 2.85rem); color: var(--navy-900); white-space: nowrap; }
.ncstats--band .ncstats__value em { color: var(--accent-500); }
.ncstats--band .ncstats__label { margin-top: var(--s-2); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-600); }
.ncstats__sub { display: block; margin-top: 0.3rem; font-size: 0.875rem; line-height: 1.4; color: var(--text-muted); }

/* --- badges as uniform white tiles --------------------------------------- */
.ncbadges__lead { max-width: 44rem; margin: calc(-1 * var(--s-3)) auto var(--s-6); color: var(--text-muted); font-size: 1rem; line-height: 1.65; }
.ncbadges__list--tiles { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 72rem; margin-inline: auto; }
@media (min-width: 700px) { .ncbadges__list--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ncbadges__list--tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ncbadges__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.35rem;
  background: #fff; border: 1px solid #e1e8ec; border-radius: 16px; line-height: 1.3;
  padding: var(--s-5) var(--s-3) var(--s-4); box-shadow: 0 10px 26px -20px rgba(6, 33, 44, 0.4);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ncbadges__tile:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(6, 33, 44, 0.5); }
.ncbadges__logo { display: grid; place-items: center; height: 72px; width: 100%; margin-bottom: 0.4rem; }
.ncbadges .ncbadges__logo img { height: auto; width: auto; max-height: 72px; max-width: 132px; object-fit: contain; }
.ncbadges__label { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: var(--text); }
.ncbadges__note { font-size: 0.8125rem; color: var(--text-muted); }

/* --- proof strip -------------------------------------------------------- */
.ncproof__strip { margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; max-width: 60rem; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(0.95rem, 0.5vw + 0.8rem, 1.1rem); letter-spacing: 0.02em; color: var(--accent-600); padding: 0.9rem 1.25rem; border-radius: 999px; background: var(--accent-050); }

/* --- decision tool (services page) ------------------------------------- */
.decide { display: grid; gap: var(--s-3); max-width: 68rem; margin-inline: auto; }
.decide__row { display: grid; gap: var(--s-3) var(--s-5); align-items: center; background: #fff; border: 1px solid #e6edf0; border-radius: 16px; padding: var(--s-5) clamp(1rem, 2.5vw, 1.75rem); }
.decide__row--head { display: none; background: transparent; border: 0; padding-block: 0 var(--s-1); font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.decide__row--head .decide__best { color: var(--accent-600); }
.decide__situation { display: flex; gap: var(--s-4); align-items: center; color: var(--text); font-size: 1rem; line-height: 1.5; }
.decide__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-050); color: var(--accent-500); }
.decide__service { font-family: var(--font-display); font-weight: 600; }
.decide__service a { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.55rem 1rem; border-radius: 999px; background-color: #0a7a92; background-image: linear-gradient(180deg, #149bb8, #0a7a92); color: #fff; text-decoration: none; font-size: 0.9375rem; line-height: 1.25; }
.decide__service a:hover { background-image: linear-gradient(180deg, #19a9c8, #0b839c); }
.decide__freq { color: var(--text-muted); font-size: 0.9375rem; }
.decide__tag { display: block; margin-bottom: 0.3rem; font-family: var(--font-display); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.decide__foot { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 860px) {
  .decide__row, .decide__row--head { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 0.9fr); }
  .decide__row--head { display: grid; }
  .decide__tag { display: none; }
  .decide__row:not(.decide__row--head) { box-shadow: 0 10px 24px -22px rgba(6, 33, 44, 0.45); }
}

/* --- footer, fuller ----------------------------------------------------- */
.footer--rich { padding-top: 0; background: linear-gradient(180deg, #eef4f7 0%, var(--ice-2) 38%); }
.footer__stats { background: #fff; border-bottom: 1px solid #dfe7eb; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.footer__statlist { list-style: none; margin: 0; padding: clamp(1.25rem, 2.5vw, 1.75rem) 0; display: grid; gap: var(--s-4) var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; }
@media (min-width: 900px) { .footer__statlist { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.footer__statlist li { margin: 0; display: grid; gap: 0.15rem; }
.footer__statlist strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.2vw + 1rem, 1.9rem); line-height: 1.1; color: var(--navy-900); }
.footer__statlist span { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-600); }
@media (max-width: 899px) { .footer__statlist li:last-child { grid-column: 1 / -1; } }
@media (min-width: 960px) { .footer--rich .footer__top { grid-template-columns: 1.35fr 0.8fr 1fr 0.9fr 1.25fr; } }
.footer--rich .footer__brand { max-width: 320px; }
.footer__assure { list-style: none; margin: var(--s-4) 0 var(--s-5); padding: 0; display: grid; gap: 0.35rem; }
.footer__assure li { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0; color: #2a3740; font-size: 0.9063rem; }
.footer__assure .icon { flex: none; margin-top: 4px; color: var(--accent-500); }
.footer--rich .footer__phonebtn { display: inline-flex; align-items: center; gap: 0.5em; margin-bottom: var(--s-4); }
.footer__quote { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-weight: 600; color: var(--accent-600); text-decoration: none; padding-block: 5px; }
.footer__quote:hover { color: var(--accent-700); text-decoration: underline; text-underline-offset: 0.25em; }
.footer__badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); padding-block: clamp(1.5rem, 3vw, 2rem); border-bottom: 1px solid #dfe3e8; }
.footer__badgetitle { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 0.9375rem; max-width: 22rem; }
.footer__badgelist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.footer__badgelist li { margin: 0; display: grid; place-items: center; width: 108px; height: 64px; background: #fff; border: 1px solid #e1e8ec; border-radius: 12px; padding: 8px 12px; }
.footer__badgelist img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.footer--rich .footer__totop .icon { transform: rotate(180deg); }
@media (max-width: 640px) { .footer__badgelist li { width: calc((100% - 2 * var(--s-3)) / 3); } }

/* --- internal-page badge strip: the same tiles, smaller ------------------- */
.badges__list { gap: var(--s-3); }
.badges__item { background: #fff; border: 1px solid #e1e8ec; border-radius: 12px; padding: 6px 10px; box-shadow: 0 8px 20px -18px rgba(6, 33, 44, 0.45); }
.badges__item img { height: clamp(46px, 4.5vw, 56px); width: auto; filter: none; opacity: 1; }

/* --- hero photo of 21/09/2026 ------------------------------------------- */
/* 22/09/2026: the cover is the client's own Drive photo of a house facade —
   brick and stone, mature trees, no construction anywhere in frame, which is
   what they asked for ("Foto principal colocar de uma casa fachada. Que nao
   tenha nenhuma construcao perto"). It replaces the navy-uniform vacuuming
   shot of 21/09.

   The shade on the photo is a shade, not a curtain. It was taken down to .46
   on 21/09 for that dark photo; this one is a bright day over pale stone, and
   at .46 one tenth of the headline band fell under 3:1. Measured again on the
   new crop (tools/build_hero_fachada_2209.py): .62/.44/.16 clearing by 72%
   puts the p10 at 3.97 and only 3.1% under 3:1 — the same footing the 21/09
   cover was signed off on, and still far lighter than the .72 of 14/09.
   Always on the photo itself, never a panel behind the text (the client turned
   the panel down on 06/09). */
.nchero__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 33, 44, 0.62) 0%, rgba(6, 33, 44, 0.44) 34%, rgba(6, 33, 44, 0.16) 56%, rgba(6, 33, 44, 0) 72%); }
@media (max-width: 919px) {
  .nchero__bg { background-position: 40% center; }
  .nchero__bg::after { background: linear-gradient(180deg, rgba(6, 33, 44, 0.44) 0%, rgba(6, 33, 44, 0.28) 55%, rgba(6, 33, 44, 0.06) 100%); }
}
/* 25/09/2026 — the client liked the phone cover and asked for it on desktop
   too: the house pulled in close and the lighter top-down shade. Headline band,
   measured on the render: 1280/1440/1920/2560 give 2.1/2.2/3.1/0.8% under
   3:1 (the 90deg .62 shade it replaces gave 3.9% at 1440). */
@media (min-width: 920px) {
  /* scale, not background-size: a height-based size leaves bare sides past ~1800px. */
  .nchero__bg { transform: scale(1.3); transform-origin: 38% 42%; }
  .nchero__bg::after { background: linear-gradient(180deg, rgba(6, 33, 44, 0.44) 0%, rgba(6, 33, 44, 0.28) 55%, rgba(6, 33, 44, 0.06) 100%); }
}
@media (min-width: 1600px) {
  .nchero__bg { transform: scale(1.15); }
}

.ncbadges__list--tiles { align-items: stretch; }
.nccards__note { font-family: var(--font-body); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; color: var(--text-muted); max-width: 46rem; margin-inline: auto; }
.nccards__note strong { display: block; margin-bottom: 0.35rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem); color: var(--accent-600); }

/* --- footer, the client's mock-up (14/09/2026, WhatsApp image) -------------- */
/* Light ground with a soft blue wave rising bottom-left and a pale four-point
   star top-right; brand column with a serif slogan; three link columns split by
   hairlines; contact rows with icons in pale circles, a wide pill button and
   three icon seals; then a full-width navy bar. The client drew the dark bar
   himself, so it overrides the 04/09 "no dark bands" rule for this one strip. */
.footer--v3 { position: relative; overflow: hidden; padding: 0; background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%); color: #33434b; }
.footer--v3 > .container { position: relative; z-index: 1; padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.footer__wave { position: absolute; left: -8%; bottom: 3.2rem; width: 46%; height: 190px; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 100%, rgba(14, 192, 224, 0.16) 0%, rgba(14, 192, 224, 0.08) 45%, rgba(14, 192, 224, 0) 70%);
  border-top-right-radius: 100% 80%; }
.footer__spark { position: absolute; top: 2.2rem; right: 3%; z-index: 0; color: #cfe8f6; pointer-events: none; }
.footer__spark .icon { width: 90px; height: 90px; stroke-width: 1; fill: #dcf0fa; }

.footer--v3 .footer__top { border-bottom: 0; padding-bottom: 0; gap: clamp(2rem, 3vw, 2.5rem); }
@media (min-width: 1080px) {
  .footer--v3 .footer__top { grid-template-columns: 1.25fr 0.85fr 1.15fr 0.95fr 1.35fr; gap: 0; }
  .footer--v3 .footer__top > * { padding-inline: clamp(1rem, 1.8vw, 1.75rem); }
  .footer--v3 .footer__top > *:first-child { padding-left: 0; }
  .footer--v3 .footer__top > *:last-child { padding-right: 0; }
  .footer--v3 .footer__col:not(.footer__col--contact) { border-left: 1px solid #dde7ed; border-right: 0; }
  .footer--v3 .footer__col--contact { border-left: 1px solid #dde7ed; }
}
@media (min-width: 640px) and (max-width: 1079px) {
  .footer--v3 .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer--v3 .footer__brand { max-width: 300px; }
.footer--v3 .logo--footer .logo__img { height: 76px; }
.footer__slogan { margin: var(--s-4) 0 var(--s-3); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.45rem, 1vw + 1.05rem, 1.75rem); line-height: 1.2; color: #0b2f4a; letter-spacing: -0.01em; }
.footer--v3 .footer__blurb { margin: 0 0 var(--s-5); color: #33434b; font-size: 0.9375rem; line-height: 1.6; }
.footer--v3 .social { gap: var(--s-3); }
.footer--v3 .social__link { width: 48px; height: 48px; border: 0; background: #dff0fa; color: #0b2f4a; }
.footer--v3 .social__link:hover { background: var(--accent-500); color: #fff; }

.footer--v3 .footer__title { position: relative; margin-bottom: var(--s-5); padding-bottom: 0.7rem; color: var(--accent-600); font-size: 0.8125rem; letter-spacing: 0.2em; }
.footer--v3 .footer__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; border-radius: 2px; background: #0ec0e0; }
.footer--v3 .footer__list { gap: 0.2rem; }
.footer--v3 .footer__list a { color: #26343b; font-size: 0.9688rem; padding-block: 5px; }
.footer--v3 .footer__list a:hover { color: var(--accent-600); }

.footer--v3 .footer__contact { gap: var(--s-3); margin-bottom: var(--s-5); }
.footer--v3 .footer__contact li { align-items: center; gap: var(--s-4); }
.footer__ci { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #dff0fa; color: #0b2f4a; }
.footer--v3 .footer__contact .icon { margin-top: 0; color: #0b2f4a; }
.footer--v3 .footer__contact a, .footer--v3 .footer__contact address { color: #26343b; font-size: 0.9688rem; }
.footer__cta { display: flex !important; justify-content: center; align-items: center; gap: 0.6em; width: 100%; max-width: 300px; letter-spacing: 0.14em; }
.footer__trust { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 320px; }
.footer__trust li { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-align: center; padding-inline: 0.35rem; font-size: 0.625rem; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; color: #33434b; }
.footer__trust li + li { border-left: 1px solid #dde7ed; }
.footer__trust .icon { width: 30px; height: 30px; color: var(--accent-600); stroke-width: 1.5; }
.footer__trust strong { font-weight: 700; color: #0b2f4a; }

.footer__bar { position: relative; z-index: 1; background: #0e2f4a; color: #e6eef3; }
.footer__bar .footer__bottom { padding-block: 1.15rem; border-top: 0; font-size: 0.875rem; }
.footer__bar .footer__copy { color: #e6eef3; }
.footer__bar .footer__legal { gap: 0; margin-left: auto; }
.footer__bar .footer__legal li + li::before { content: "|"; margin-inline: 0.75rem; color: #7f98a8; }
.footer__bar .footer__legal a { color: #e6eef3; }
.footer__bar .footer__legal a:hover { color: #7fe3f3; }
.footer__bar .footer__by { display: inline-flex; align-items: center; gap: 0.45em; color: #cfdde6; opacity: 1; margin-left: var(--s-6); }
.footer__bar .footer__by .icon { color: #7fe3f3; }
.footer__bar .footer__by a { color: #e6eef3; border-bottom-color: rgba(230, 238, 243, 0.4); }
@media (max-width: 760px) {
  .footer__bar .footer__legal, .footer__bar .footer__by { margin-left: 0; }
  .footer__spark { display: none; }
}

@media (min-width: 1080px) {
  .footer--v3 .footer__top { grid-template-columns: 1.1fr 0.72fr 1.3fr 0.95fr 1.5fr; }
  .footer--v3 .footer__top > * { padding-inline: clamp(0.9rem, 1.3vw, 1.35rem); }
  .footer--v3 .footer__list a, .footer--v3 .footer__contact a, .footer--v3 .footer__contact address { font-size: 0.9375rem; }
  .footer--v3 .footer__contact a { overflow-wrap: normal; white-space: nowrap; }
}
@media (min-width: 1280px) { .footer--v3 > .container { max-width: 1320px; } }
@media (min-width: 1280px) { .footer__bar > .container { max-width: 1320px; } }

/* ==========================================================================
   Termos e Condições — cópia da página de origem (05/10/2026)
   O Matheus: «precisa ser exatamente igual como no site atual. Inclusive o
   design». O corpo vem de data/termos-origem.html (tools/copia_termos_0510.py).
   Aqui fica o que a origem herda do Avada e não está nos estilos inline:
   Montserrat 600 nos títulos, Roboto no texto de abertura, Helvetica/Arial no
   corpo, as margens dos títulos e parágrafos, o banner com foto e a onda.
   ========================================================================== */
.nc-tc { font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.72; letter-spacing: 0.015em; color: #141617; background: #fff; }
.nc-tc h1, .nc-tc h2, .nc-tc h3 { font-family: Montserrat, Arial, Helvetica, sans-serif; font-weight: 600; line-height: 1.2; color: #141617; text-wrap: wrap; }
/* Tipografia responsiva do Avada: linear de 360px (mínimo) a 800px (máximo). */
.nc-tc h2 { font-size: clamp(30px, 25.09px + 1.3636vw, 36px); letter-spacing: -0.015em; margin: 0 0 1.1em; }
.nc-tc h3 { font-size: 24px; letter-spacing: -0.015em; margin: 1em 0; }
.nc-tc p { margin: 0 0 20px; }
.nc-tc strong { font-weight: 700; color: inherit; }
.nc-tc ul { margin: 1em 0; padding-left: 40px; }
.nc-tc li { margin: 0; }
.nc-tc img { display: inline; max-width: 100%; height: auto; vertical-align: middle; }
.nc-tc th { font-family: Montserrat, Arial, Helvetica, sans-serif; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.nc-tc table { border-collapse: collapse; }
.nc-tc blockquote { font-family: Roboto, Arial, Helvetica, sans-serif; line-height: 1.72; color: #141617; }
.nc-tc blockquote p { margin: 0; }

/* A foto é <img> e não background: o CSS vive dentro do tema no WordPress e o
   caminho relativo para /assets/ deixaria de bater. */
/* Os % de padding e margem contam sobre a largura do conteúdo (hero − 60px), como no Avada. */
.nc-tc-hero { position: relative; overflow: hidden; padding: calc(10% + 4px) 30px 0; background: #6b6f70; isolation: isolate; }
.nc-tc .nc-tc-hero__bg { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.nc-tc-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 22, 23, 0.25) 0%, rgba(20, 22, 23, 0.5) 100%); }
.nc-tc-hero__in { max-width: 1200px; margin: 0 auto; padding: 0 0 20px; }
.nc-tc-hero h1 {
  margin: 0; text-align: center; color: #fff;
  font-size: clamp(36px, 26.18px + 2.727vw, 48px); letter-spacing: -0.015em;
  text-shadow: 3px 3px 3px #141617;
}
/* A onda «curved» do Avada: M0 100 C 60 0 75 0 100 100 Z, branca, 75px. */
.nc-tc-hero::after {
  content: ""; display: block; height: 75px; margin: calc(min(6%, 72px) + 13px) -30px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C 60 0 75 0 100 100 Z' fill='%23fff'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.nc-tc-pagina { max-width: 1200px; margin: 0 auto; padding: calc(2.85vw + 10px) 30px clamp(20px, 3vw, 43px); }
.nc-tc-intro { text-align: center; margin-bottom: calc(20px + min(3vw - 1.8px, 37.4px)); }
.nc-tc-intro h2 { color: #0cbfdf; margin: 0; }
.nc-tc .nc-tc-intro__divisor { display: block; width: 100%; max-width: 500px; margin: 15px auto 0; }
.nc-tc-intro p { margin: 0; }
@media (max-width: 640px) { .nc-tc .nc-tc-intro__divisor { margin-top: 10px; } }

/* TERMOS-ORIGEM:INICIO — gerado por tools/copia_termos_0510.py, não editar à mão */
/* Os estilos inline da origem, um por classe, na ordem em que aparecem. */
.nc-tc .tc-s1 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; line-height: 1.6; max-width: 1000px; margin: 0 auto; padding: 20px; }
.nc-tc .tc-s2 { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; align-items: center; }
.nc-tc .tc-s3 { flex: 1; min-width: 300px; }
.nc-tc .tc-s4 { color: rgb(12, 191, 223); border-bottom: 2px solid rgb(12, 191, 223); padding-bottom: 10px; line-height: 1.2; }
.nc-tc .tc-s5 { width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.nc-tc .tc-s6 { background-color: #f9f9f9; padding: 25px; border-left: 5px solid #0cbfdf; margin-bottom: 40px; }
.nc-tc .tc-s7 { color: rgb(12, 191, 223); margin-top: 0px; line-height: 1.2; }
.nc-tc .tc-s8 { color: rgb(12, 191, 223); line-height: 1.2; }
.nc-tc .tc-s9 { border: 0; height: 1px; background: #eee; margin: 40px 0; }
.nc-tc .tc-s10 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 40px; }
.nc-tc .tc-s11 { list-style-type: none; padding-left: 0; }
.nc-tc .tc-s12 { background: #e1f5f9; padding: 10px; margin-bottom: 5px; border-radius: 4px; }
.nc-tc .tc-s13 { background: #e1f5f9; padding: 10px; border-radius: 4px; }
.nc-tc .tc-s14 { width: 100%; border-collapse: collapse; margin-bottom: 30px; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.nc-tc .tc-s15 { background-color: #0cbfdf; color: white; text-align: left; }
.nc-tc .tc-s16 { padding: 15px; border: 1px solid #ddd; }
.nc-tc .tc-s17 { padding: 12px; border: 1px solid #ddd; }
.nc-tc .tc-s18 { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }
.nc-tc .tc-s19 { font-size: 0.9em; color: #666; }
.nc-tc .tc-s20 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; }
.nc-tc .tc-s21 { padding: 15px; border: 1px solid #eee; border-radius: 8px; }
.nc-tc .tc-s22 { color: rgb(12, 191, 223); font-size: 1.1em; line-height: 1.2; }
.nc-tc .tc-s23 { background: #fff4f4; border-left: 5px solid #ff5a5f; padding: 20px; margin: 0 0 40px 0; font-style: italic; }
.nc-tc .tc-s24 { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 40px; }
.nc-tc .tc-s25 { flex: 2; min-width: 300px; }
.nc-tc .tc-s26 { flex: 1; min-width: 250px; }
.nc-tc .tc-s27 { width: 100%; border-radius: 8px; }
.nc-tc .tc-s28 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; font-size: 0.95em; }
.nc-tc .tc-s29 { margin-top: 40px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; text-align: center; background-color: #f0fbfe; }
.nc-tc .tc-s30 { color: rgb(12, 191, 223); margin-bottom: 5px; line-height: 1.2; }
/* TERMOS-ORIGEM:FIM */

/* ==========================================================================
   Customer Guidelines — identidade do site (12/10/2026)
   O cliente, nos áudios de 07/10: «igual» é a estrutura (a foto, o texto, a
   tabela), não a identidade visual do site antigo. Fica o arranjo da origem;
   fontes, cores, pesos e tons passam a ser os do resto do site. Vem DEPOIS do
   bloco gerado, que não se edita à mão, e ganha por ordem.
   ========================================================================== */
.nc-tc,
.nc-tc .tc-s1,
.nc-tc blockquote { font-family: var(--font-body); color: var(--text); letter-spacing: normal; }
.nc-tc { font-size: var(--fs-md); line-height: var(--lh-body); }
.nc-tc h1, .nc-tc h2, .nc-tc h3, .nc-tc th {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.021em; color: var(--navy-900);
}
.nc-tc h2 { font-size: var(--fs-h3); }
.nc-tc h3 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.nc-tc-intro h2 { font-size: var(--fs-h2); color: var(--navy-900); }
/* Os títulos ciano da origem passam ao navy dos títulos do site; o fio que
   os sublinha e os filetes laterais ficam no acento (#0a7a92). */
.nc-tc .tc-s4, .nc-tc .tc-s7, .nc-tc .tc-s8, .nc-tc .tc-s22, .nc-tc .tc-s30 { color: var(--navy-900); }
.nc-tc .tc-s4 { border-bottom-color: var(--accent-500); }
.nc-tc .tc-s6 { background-color: var(--ice); border-left-color: var(--accent-500); border-radius: 0 var(--r-md) var(--r-md) 0; }
.nc-tc .tc-s12, .nc-tc .tc-s13 { background: var(--accent-050); color: var(--text); }
.nc-tc .tc-s15 { background-color: var(--accent-500); }
.nc-tc .tc-s15 th, .nc-tc .tc-s15 td { color: #fff; }
.nc-tc .tc-s16, .nc-tc .tc-s17 { border-color: var(--line); }
.nc-tc .tc-s19 { color: var(--text-muted); }
.nc-tc .tc-s21 { border-color: var(--line); border-radius: var(--r-md); }
.nc-tc .tc-s29 { background-color: var(--ice); border-color: var(--line); border-radius: var(--r-md); }
.nc-tc a { color: var(--accent-500); }
/* Sem o banner, a página abre logo depois do herói padrão das internas. */
.phero + .nc-tc .nc-tc-pagina,
.elementor-widget-north-heroi-pagina ~ * .nc-tc-pagina { padding-top: clamp(8px, 2vw, 24px); }