/* ============================================================
   Tamir Pest Control — v2 "editorial premium"
   Same palette, same copy, same media. Layout and surface treatment only.

   Inherited unchanged from v1 (HANDOFF §4.1 — do not break):
     · 7 type steps only — every size in this file resolves through var(--t-*).
     · One --rhythm for vertical spacing.
     · Orange is an ACCENT, never a surface. Dark grounds carry the weight.
     · Orange button = --orange-bright fill + --ink-deep label (7.3:1).
     · .service-q sits in --orange-deep — at 16px/700 it is not "large text".

   What changed vs v1: heavy clay cards give way to hairlines and restrained
   surfaces, the services bento becomes a sticky-rail editorial list, "why"
   becomes a numbered list, and scroll behaviour is added throughout — all of
   it gated behind prefers-reduced-motion.
   ============================================================ */

:root {
  /* ---- Type scale — 7 steps. No font-size in this file may be anything else. ---- */
  --t-hero:  clamp(34px, 4.4vw, 56px);
  --t-h2:    clamp(28px, 3.2vw, 40px);
  --t-h3:    clamp(20px, 1.6vw, 26px);
  --t-lead:  clamp(17px, 1.4vw, 20px);
  --t-body:  16px;
  --t-small: 14px;
  --t-micro: 12.5px;

  --canvas-top:    #F3E9DA;
  --canvas-bottom: #EBDCC6;
  --surface:       #FFFDF8;
  --surface-soft:  #F9F0E2;
  --ink:           #251C10;
  --ink-soft:      #52412C;
  --muted:         #6A5A45;
  --hairline:      rgba(89, 55, 22, 0.12);
  --hairline-dark: rgba(255, 255, 255, 0.12);

  --brand:      #4EA0A8;
  --brand-deep: #2C666C;
  --brand-tint: #DFEEEF;

  --ground:      #16272C;
  --ground-mid:  #1B3138;
  --ground-deep: #0E1B1F;

  --orange:        #C4661F;
  --orange-bright: #E8934A;
  --orange-soft:   #F0A055;
  --orange-deep:   #954E11;
  --orange-dark:   #6E3812;
  --ink-deep:      #2A1405;

  --amber:      #F7C08A;
  --amber-deep: #B4763A;
  --amber-tint: #FCF0E1;

  --wa:      #25D366;
  --wa-deep: #0F6D33;
  --wa-tint: #E5F8EC;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px;

  --rhythm: clamp(72px, 8vw, 128px);

  --r-media: 18px;
  --r-card:  24px;
  --r-lg:    32px;
  --r-pill:  999px;

  /* v2 surfaces: a hairline plus one soft shadow, instead of v1's double-inset
     clay. Less material, more paper — this is most of the "cleaner" brief. */
  --lift-sm: 0 1px 2px rgba(89,55,22,.04), 0 8px 24px -16px rgba(89,55,22,.18);
  --lift-md: 0 2px 6px rgba(89,55,22,.05), 0 24px 48px -28px rgba(89,55,22,.28);
  --glow-wa: 0 10px 30px -8px rgba(37,211,102,.45);

  --font-display: "Rubik", "Heebo", sans-serif;
  --font-body:    "Heebo", sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-ui: .35s;
  --dur-entrance: .9s;

  /* The hero slides under the transparent header, so it has to know exactly how
     tall the header is. Derived, not hardcoded — the first version pinned 48px
     in three places and enlarging the logo left a 13px strip of page background
     showing above the video. Change --logo-h and everything follows. */
  --logo-h:   62px;
  --header-h: calc(var(--logo-h) + var(--s2) * 2 + 1px);
}

/* Narrow phones: the hero headline needs a smaller floor or it wraps to four
   lines at 320px. Adjust the TOKEN, never a one-off font-size. */
@media (max-width: 400px) {
  :root { --t-hero: 30px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink);
  background: linear-gradient(180deg, var(--canvas-top) 0%, var(--canvas-bottom) 100%);
  -webkit-font-smoothing: antialiased;
  /* No overflow-x here. `overflow-x: hidden` on body forces overflow-y to
     compute to `auto`, which makes body a scroll container — and every
     position:sticky descendant then sticks to a box that never scrolls, so it
     silently does nothing. `html { overflow-x: clip }` above already contains
     the horizontal overflow without that side effect. */
}

/* Fine film grain over everything — barely there, kills the "flat template" feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

::selection { background: rgba(78,160,168,.28); }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: 0;
}

h1 { font-size: var(--t-hero); font-weight: 800; line-height: 1.18; }
h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.22; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.32; }

h1 em { font-style: normal; color: var(--amber); }

.lead { font-size: var(--t-lead); color: var(--ink-soft); }

a { color: inherit; }

/* ---------- Focus ---------- */
:focus-visible {
  outline: 3px solid var(--brand-deep);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero :focus-visible,
.trust :focus-visible,
.contact :focus-visible,
.site-footer :focus-visible {
  outline-color: #FFFFFF;
}
.wa-float:focus-visible {
  outline-color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(22,39,44,.55);
}

/* a11y: visually hidden, exposed to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -60px;
  inset-inline-start: var(--s2);
  z-index: 120;
  padding: 10px var(--s3);
  border-radius: 0 0 var(--r-media) var(--r-media);
  background: var(--ground);
  color: #fff;
  font-weight: 700;
  transition: top var(--dur-ui) var(--ease);
}
.skip-link:focus { top: 0; }
#main:focus { outline: none; }

.container {
  width: min(100% - 40px, 1200px);
  margin-inline: auto;
}

.section { padding-block: var(--rhythm); }

/* ============================================================
   Scroll reveal — the entrance for every [data-reveal]

   Declared HERE, before the components, on purpose. Reveals are reversible now
   (the observer toggles .is-in in both directions and never unobserves), so
   [data-reveal] stays on the element for the life of the page. If these rules
   sat after the components, `[data-reveal].is-in { transform: none }` would tie
   on specificity with `.audience-card:hover { transform: ... }` and win on
   source order — killing every hover lift on the page.

   Direction is data, not a separate rule per section: each element declares
   --rv-x / --rv-y and this one transform reads them. Sections below set those
   two variables to say which way their pieces come from.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translate3d(var(--rv-x, 0), var(--rv-y, 26px), 0);
  transition: opacity var(--dur-entrance) var(--ease),
              transform var(--dur-entrance) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---- per-section entrance directions ----
   translateX is physical, so a positive value always starts the element to the
   right of its resting place regardless of writing direction. The pairs below
   are chosen so each group closes inward toward the centre of the page.

   A transform contributes to scrollable overflow, so an element parked 52px
   outside its column widens the document — measured at +16px before this was
   added, which breaks the zero-horizontal-overflow rule in HANDOFF §4.2.
   `clip` contains it without making these sections scroll containers, which
   would silently disable position:sticky on the FAQ head inside one of them. */
.trust, .why, .audience, .faq, .contact { overflow-x: clip; }

/* trust band: four columns fan in from alternating sides */
.trust-items > li:nth-child(odd)  { --rv-x:  40px; --rv-y: 0; }
.trust-items > li:nth-child(even) { --rv-x: -40px; --rv-y: 0; }

/* why: the right column enters from the right, the left from the left */
.why-item:nth-child(odd)  { --rv-x:  52px; --rv-y: 0; }
.why-item:nth-child(even) { --rv-x: -52px; --rv-y: 0; }
.why-item:last-child      { --rv-x: 0; --rv-y: 34px; }

/* audience: the outer two arrive from their own edges, the middle rises */
.audience-card:nth-child(1) { --rv-x:  52px; --rv-y: 0; }
.audience-card:nth-child(2) { --rv-x: 0;     --rv-y: 34px; }
.audience-card:nth-child(3) { --rv-x: -52px; --rv-y: 0; }

/* faq: a small alternating shift — enough to feel, not enough to distract on
   a list the reader is scanning */
.faq-item:nth-child(odd)  { --rv-x:  34px; --rv-y: 0; }
.faq-item:nth-child(even) { --rv-x: -34px; --rv-y: 0; }

/* closing section: the copy and the form meet in the middle */
.contact-copy { --rv-x:  56px; --rv-y: 0; }
.wa-form      { --rv-x: -56px; --rv-y: 0; }

@media (max-width: 767px) {
  /* Single-column layouts: a sideways entrance reads as drift, so everything
     rises instead. The reversibility is unchanged.

     These selectors repeat the :nth-child() form on purpose. A plain
     `.why-item` here is (0,1,0) and loses to `.why-item:nth-child(odd)` at
     (0,2,0) above — media queries do not add specificity, so the phone override
     was being ignored for every group that had an odd/even variant. */
  .trust-items > li:nth-child(odd),
  .trust-items > li:nth-child(even),
  .why-item:nth-child(odd),
  .why-item:nth-child(even),
  .why-item:last-child,
  .audience-card:nth-child(1),
  .audience-card:nth-child(2),
  .audience-card:nth-child(3),
  .faq-item:nth-child(odd),
  .faq-item:nth-child(even),
  .contact-copy,
  .wa-form { --rv-x: 0; --rv-y: 30px; }
}


/* ============================================================
   Scroll progress — a 2px hairline, the only always-on chrome
   ============================================================ */
.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 101;
  pointer-events: none;
  background: transparent;
}
.scroll-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: right center; /* RTL: fills from the right */
  background: linear-gradient(to left, var(--orange), var(--orange-bright));
  will-change: transform;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(243, 233, 218, 0);
  transition: background var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease);
  border-bottom: 1px solid transparent;
}

/* At rest the header floats over the hero video, so it runs light-on-dark.
   This scrim is what makes that legible: without it the brand text depends on
   whichever video frame happens to be underneath. It fades out on scroll, when
   the glass panel takes over and the type flips back to ink. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 14, 16, .78) 0%, rgba(8, 14, 16, .45) 55%, rgba(8, 14, 16, 0) 100%);
  transition: opacity var(--dur-ui) var(--ease);
}

.site-header .brand-text strong { color: #FFFFFF; }
.site-header .brand-text small  { color: #CFC7BB; }
.site-header .header-nav a      { color: #E6DFD4; }
.site-header .header-nav a:hover { color: #FFFFFF; }
.site-header .license-chip {
  color: #F3EDE2;
  border-color: rgba(255,255,255,.24);
  background: rgba(16, 30, 34, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.site-header.scrolled {
  background: rgba(250, 244, 235, .82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--hairline);
  box-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.site-header.scrolled::before { opacity: 0; }
.site-header.scrolled .brand-text strong { color: var(--ink); }
.site-header.scrolled .brand-text small  { color: var(--muted); }
.site-header.scrolled .header-nav a      { color: var(--ink-soft); }
.site-header.scrolled .header-nav a:hover { color: var(--ink); }
.site-header.scrolled .license-chip {
  color: var(--brand-deep);
  border-color: var(--hairline);
  background: rgba(255,253,248,.7);
}

/* The legal pages have no hero — the header sits on cream there from the start. */
.page-doc .site-header::before { display: none; }
.page-doc .site-header .brand-text strong { color: var(--ink); }
.page-doc .site-header .brand-text small  { color: var(--muted); }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s2);
  transition: padding var(--dur-ui) var(--ease);
}
.site-header.scrolled .header-inner { padding-block: 10px; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-inline-end: auto;
}
.brand-mark img { width: auto; height: var(--logo-h); transition: height var(--dur-ui) var(--ease); }
.site-header.scrolled .brand-mark img { height: 50px; }
.brand-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.2;
}
.brand-text small {
  display: block;
  font-size: var(--t-micro);
  color: var(--muted);
}

.header-nav { display: flex; gap: var(--s3); }
.header-nav a {
  position: relative;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 4px;
}
.header-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1.5px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-ui) var(--ease);
}
.header-nav a:hover { color: var(--ink); }
.header-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--s2); }

.license-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: rgba(255,253,248,.7);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--brand-deep);
  white-space: nowrap;
}
.license-chip .icon { width: 15px; height: 15px; }

/* ---------- Icons ---------- */
.icon {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-wa .icon, .wa-float .icon, .btn-wa-outline .icon {
  fill: currentColor;
  stroke: none;
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--brand-deep);
  text-transform: none;
}
.eyebrow .icon { width: 16px; height: 16px; }
.eyebrow-light { color: var(--orange-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease),
              background var(--dur-ui) var(--ease);
}
.btn-lg { padding: 16px 30px; font-size: var(--t-body); }
.btn-sm { padding: 9px 18px; font-size: var(--t-small); }
.btn-block { width: 100%; }
.btn:hover { transform: translateY(-2px); }

.btn-wa {
  background: var(--wa);
  color: #05331A;
  box-shadow: var(--glow-wa);
}
.btn-wa:hover { background: #2FE072; }

/* Bright fill + deep-ink label = 7.3:1. Never invert this to white-on-orange. */
.btn-orange {
  background: var(--orange-bright);
  color: var(--ink-deep);
}
.btn-orange:hover { background: #F09F5C; }

.btn-hero-tel {
  background: rgba(16, 30, 34, .55);
  border-color: rgba(255,255,255,.34);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-hero-tel:hover { background: rgba(16, 30, 34, .72); }

.btn-light {
  background: var(--surface);
  color: var(--ink);
  border-color: rgba(255,255,255,.2);
}
.btn-light:hover { background: #fff; }

.btn-wa-outline {
  align-self: flex-start;
  padding: 11px 20px;
  background: var(--wa-tint);
  color: var(--wa-deep);
  border-color: rgba(15,109,51,.22);
}
.btn-wa-outline:hover { background: #D6F3E2; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94vh, 880px);
  padding-block: clamp(72px, 11vh, 130px) clamp(110px, 15vh, 180px);
  background: var(--ground);
  overflow: clip;
  margin-top: calc(-1 * var(--header-h)); /* sit under the transparent header */
  padding-top: calc(clamp(72px, 11vh, 130px) + var(--header-h));
}

.hero-media {
  position: absolute;
  inset: -8% 0;          /* overscan so the parallax shift never exposes an edge */
  will-change: transform;
}
.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Measured against real hero.mp4 frames across the loop. Below 768px the copy
   column widens to the full container and the line ends land on the weak end of
   the ramp, so that breakpoint gets a flatter one. See HANDOFF §4.4. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(8, 14, 16, .90) 0%, rgba(8, 14, 16, .72) 46%, rgba(8, 14, 16, .22) 100%),
    linear-gradient(to top, rgba(8, 14, 16, .66) 0%, transparent 34%);
}
@media (max-width: 767px) {
  .hero-scrim {
    background:
      linear-gradient(to left, rgba(8, 14, 16, .88) 0%, rgba(8, 14, 16, .75) 46%, rgba(8, 14, 16, .64) 100%),
      linear-gradient(to top, rgba(8, 14, 16, .66) 0%, transparent 34%);
  }
}

.hero-inner { position: relative; z-index: 2; }
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  max-width: 660px;
}
.hero .eyebrow {
  color: #F3EDE2;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(16, 30, 34, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero h1 { color: #fff; font-weight: 900; margin-top: var(--s3); }
.hero h1 .h1-l { display: block; }
.hero h1 em { white-space: nowrap; }
.hero .lead { color: #E9E2D5; margin-top: var(--s3); max-width: 46ch; }
.hero .cta-note { font-size: var(--t-small); color: #D9CFBF; margin-top: 14px; }

.hero-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--s4);
  padding: 12px 18px;
  border-radius: var(--r-media);
  border: 1px solid rgba(255,255,255,.16);
  border-inline-end: 3px solid var(--orange-bright);
  background: rgba(16, 30, 34, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-promo p { font-size: var(--t-small); color: #EDE6DA; }
.hero-promo b { color: var(--orange-soft); }
.promo-icon { width: 34px; height: 34px; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* WCAG 2.2.2 — pause control for the looping background video */
.video-toggle {
  position: absolute;
  inset-block-end: var(--s4);
  inset-inline-end: var(--s4);
  z-index: 3;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(16, 30, 34, .6);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.video-toggle:hover { background: rgba(16, 30, 34, .78); transform: scale(1.06); }
.video-toggle .icon { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.video-toggle .ic-play { display: none; }
.video-toggle.is-paused .ic-pause { display: none; }
.video-toggle.is-paused .ic-play { display: block; }

/* A thin descending line rather than a bouncing chevron — quieter, and it
   doubles as an anchor to the next section. */
.scroll-cue {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  z-index: 3;
  width: 40px;
  height: 64px;
  display: grid;
  place-items: start center;
}
.scroll-cue-line {
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.55));
  transform-origin: top center;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ============================================================
   TRUST — dark ground, hairline-separated
   ============================================================ */
.trust {
  background: var(--ground);
  color: #fff;
  padding-block: var(--s6);
}
.trust-license {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--s4);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--hairline-dark);
  font-size: var(--t-small);
  color: #E4DDD1;
}
.trust-license .icon { width: 20px; height: 20px; color: var(--orange-soft); }
.trust-license strong { color: #fff; }

.trust-items {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5) var(--s4);
}
.trust-items > li { position: relative; }
/* hairline between columns, drawn on the leading edge (RTL-aware) */
.trust-items > li + li::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--s4) / -2);
  width: 1px;
  background: var(--hairline-dark);
}
.trust-t {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-body);
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.trust-t .icon { width: 19px; height: 19px; color: var(--orange-soft); }
.trust-items p { font-size: var(--t-small); color: #C8C0B4; }

/* ============================================================
   SECTION HEADS
   ============================================================ */
/* The section eyebrows ("שירותי הדברה", "למה תמיר") carry more weight in v2 —
   they read as a kicker above the h2 rather than a caption. --t-lead is the
   next token up the scale; no off-scale value is introduced. */
.section-head .eyebrow {
  font-size: var(--t-lead);
  font-weight: 700;
  letter-spacing: .01em;
}
.section-head h2 { margin-top: var(--s2); }
.section-head p {
  margin-top: var(--s3);
  color: var(--muted);
  max-width: 54ch;
}
.section-head-center {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--s6);
}
.section-head-center p { margin-inline: auto; }

/* ============================================================
   SERVICES — sticky rail + editorial rows
   ============================================================ */
/* overflow-x: clip — NOT hidden. Rows travel far outside the section before
   settling, and this contains them; `hidden` would turn the section into a
   scroll container and kill position:sticky on the rail inside it. */
.services { overflow-x: clip; }
.services-body { position: relative; }

/* The counter rides with the reader: sticky under the site header, released
   only when the section ends. */
.services-rail {
  position: sticky;
  top: calc(var(--header-h) + var(--s2));
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s6);
  pointer-events: none;
}
/* The rail floats over whatever row is passing beneath it, so the digits need
   their own ground — over a dark video frame or a busy photo the orange would
   vanish. At --t-h3 / 700 this counts as large text, and #C4661F on this chip
   measures 3.65:1, clear of the 3:1 floor. */
.services-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 18px;
  border-radius: var(--r-pill);
  background: rgba(250, 244, 235, .9);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.services-count .sep,
.services-count span:last-child { color: var(--muted); font-weight: 400; }

/* The counter alone only ticks between whole numbers. This track fills
   continuously with scroll position through the list, so the rail reads as
   travelling with you rather than jumping. */
.services-progress {
  height: 2px;
  width: min(220px, 40vw);
  background: var(--hairline);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.services-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(to left, var(--orange), var(--orange-bright));
  transform: scaleX(var(--p, 0));
  transform-origin: right center; /* RTL: fills from the right */
  transition: transform .18s linear;
}
/* the digit swaps under a short crossfade so the tick is felt, not jarring */
.services-count [data-service-current] {
  display: inline-block;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.services-count [data-service-current].is-swapping {
  opacity: 0;
  transform: translateY(-6px);
}

.services-list {
  display: flex;
  flex-direction: column;
  gap: var(--rhythm);
  width: min(100% - 40px, 1200px);
  margin-inline: auto;
}

/* Each row is narrower than the track, so it has somewhere to travel from and
   a distinct edge to land on. Odd rows settle hard against the right edge,
   even rows against the left — inline-* so RTL resolves it, not left/right. */
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  width: min(100%, 820px);
  will-change: transform;
}
.service-row:nth-child(odd)  { margin-inline-end: auto; }
.service-row:nth-child(even) { margin-inline-start: auto; }
.service-media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface-soft);
  box-shadow: var(--lift-sm);
}
.service-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.service-row:hover .service-media img { transform: scale(1.04); }

.service-body { display: flex; flex-direction: column; }
.service-num {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s1);
}
.service-body h3 { margin-bottom: 10px; }
/* 16px/700 is not "large text" under WCAG, so this needs the deep orange (4.5:1) */
.service-q {
  font-weight: 700;
  color: var(--orange-deep);
  margin-bottom: 10px;
}
.service-body > p:last-of-type { color: var(--ink-soft); }
.service-body .btn-wa-outline { margin-top: var(--s3); }

@media (min-width: 900px) {
  .service-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s5);
    align-items: center;
  }
  /* alternate which side the image sits on, for rhythm down the column */
  .service-row:nth-child(even) .service-media { order: 2; }
}

/* ============================================================
   WHY — numbered editorial list
   ============================================================ */
/* Pairs in two columns on one even gutter. Five items means the last one has
   no partner, so it spans the full width rather than leaving a hole. */
.why-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  max-width: 1020px;
  margin-inline: auto;
}
.why-item {
  display: flex;
  flex-direction: column;
  padding: var(--s4);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-sm);
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.why-item:hover { transform: translateY(-4px); box-shadow: var(--lift-md); }
.why-item:last-child { grid-column: 1 / -1; }

.why-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.why-index {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.why-icon {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: var(--r-media);
  background: var(--surface-soft);
  flex: none;
}
.why-icon img { width: 38px; height: 38px; }
.why-item h3 { margin-bottom: 10px; }
.why-item p { color: var(--ink-soft); }

/* Five items into two columns leaves the last one alone. It spans the row, and
   switches to a horizontal layout so the extra width carries text instead of
   emptiness — stacked, it reads as a card someone forgot to finish. */
@media (min-width: 768px) {
  .why-item:last-child {
    display: grid;
    /* capped and centred: a full-width 1fr column would leave a third of the
       card empty, because the copy here is shorter than the others */
    grid-template-columns: auto minmax(0, 680px);
    grid-template-areas:
      "head title"
      "head body";
    justify-content: center;
    align-content: center;
    gap: 4px var(--s4);
  }
  .why-item:last-child .why-head {
    grid-area: head;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    margin-bottom: 0;
    align-self: center;
  }
  .why-item:last-child h3 { grid-area: title; align-self: end; margin-bottom: 0; }
  .why-item:last-child p  { grid-area: body; }
}

@media (max-width: 767px) {
  .why-list { grid-template-columns: 1fr; gap: var(--s3); }
  .why-item:last-child { grid-column: auto; }
}

/* ============================================================
   AUDIENCE
   ============================================================ */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}
.audience-card {
  padding: var(--s5) var(--s4);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-sm);
  text-align: center;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.audience-card:hover { transform: translateY(-4px); box-shadow: var(--lift-md); }
.audience-icon {
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  margin: 0 auto var(--s3);
  border-radius: var(--r-media);
  background: var(--surface-soft);
}
.audience-icon img { width: 38px; height: 38px; }
.audience-card h3 { margin-bottom: 8px; }
.audience-card p { font-size: var(--t-small); color: var(--ink-soft); }

@media (max-width: 860px) { .audience-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ — hairline accordion
   ============================================================ */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(var(--s5), 6vw, 110px);
  align-items: start;
}
.faq-head { position: sticky; top: 128px; }

.faq-list { border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s3);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--ink);
  text-align: start;
  transition: color var(--dur-ui) var(--ease);
}
.faq-q:hover { color: var(--orange-deep); }
.faq-q .chev {
  width: 22px; height: 22px;
  color: var(--orange);
  transition: transform var(--dur-ui) var(--ease);
}
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease);
}
.faq-a p {
  padding-bottom: var(--s3);
  color: var(--ink-soft);
  max-width: 68ch;
}

/* ============================================================
   CONTACT — dark ground, split
   ============================================================ */
.contact {
  position: relative;
  background: var(--ground-mid);
  color: #fff;
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(var(--s5), 5vw, 90px);
  align-items: start;
}
.contact h2 { color: #fff; margin-top: var(--s2); }
.contact .lead { color: #E4DDD1; margin-top: var(--s3); }
.contact-sub {
  margin-top: var(--s3);
  font-size: var(--t-small);
  color: #C8C0B4;
  max-width: 54ch;
}
.contact-sub strong { color: var(--orange-soft); }
.contact-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.contact-trustline {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--hairline-dark);
  font-size: var(--t-micro);
  color: #B3ABA0;
}

.wa-form {
  padding: var(--s5) var(--s4);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--lift-md);
  color: var(--ink);
}
.wa-form h3 { margin-bottom: 6px; }
.wa-form-sub { font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s4); }
.field { margin-bottom: var(--s3); }
.field label {
  display: block;
  font-size: var(--t-small);
  font-weight: 700;
  margin-bottom: 7px;
}
.field input,
.field select {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-media);
  border: 1.5px solid var(--hairline);
  background: var(--surface-soft);
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--ink);
  transition: border-color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease);
}
.field input::placeholder { color: #5F6E7A; }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand-deep);
  background: #fff;
}
.field input.field-error,
.field select.field-error { border-color: #B3261E; background: #FDF3F2; }
.wa-form-note {
  margin-top: var(--s2);
  font-size: var(--t-micro);
  color: var(--muted);
  text-align: center;
}

@media (max-width: 920px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EMAIL BAND — the quiet alternative to WhatsApp

   Sits between the closing section and the footer on --ground, which lands
   between --ground-mid above it and --ground-deep below: the three make a
   descending tonal staircase rather than three flat slabs.
   ============================================================ */
.mailband {
  background: var(--ground);
  color: #fff;
  padding-block: var(--s5);
  border-top: 1px solid var(--hairline-dark);
}
.mailband-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
.mailband h2 { color: #fff; font-size: var(--t-h3); }
.mailband p {
  margin-top: 6px;
  font-size: var(--t-small);
  color: #C8C0B4;
  max-width: 46ch;
}
/* --orange-soft on this ground measures 7.2:1 — see HANDOFF §4.1 */
.mailband-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  color: var(--orange-soft);
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.mailband-link:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.mailband-link .icon { width: 20px; height: 20px; }
.mailband :focus-visible { outline-color: #FFFFFF; }

@media (max-width: 620px) {
  .mailband-inner { flex-direction: column; align-items: flex-start; }
  .mailband-link { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mailband-link:hover { transform: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ground-deep);
  color: #C8C0B4;
  padding-block: var(--s6) calc(var(--s6) + 60px);
}
.footer-inner { display: grid; gap: var(--s4); }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { height: 44px; width: auto; }
.footer-brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-body);
  color: #fff;
}
.footer-brand p { font-size: var(--t-small); max-width: 52ch; }
.footer-license,
.footer-legal { font-size: var(--t-micro); color: #A69E93; }
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  padding-block: var(--s3);
  border-block: 1px solid var(--hairline-dark);
}
.footer-legal-links a {
  font-size: var(--t-small);
  color: #D6CFC4;
  text-decoration: none;
}
.footer-legal-links a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   Floating WhatsApp + mobile bar
   ============================================================ */
.wa-float {
  position: fixed;
  inset-block-end: var(--s4);
  inset-inline-end: var(--s4);
  z-index: 95;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #05331A;
  box-shadow: var(--glow-wa);
  transition: transform var(--dur-ui) var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float .icon { width: 28px; height: 28px; }

/* The bar itself is transparent — content scrolls behind it and only the two
   pills read as UI. They keep their own solid fills, so contrast is unaffected;
   the drop shadow is what separates them from whatever passes underneath. */
.mobile-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 96;
  display: none;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: transparent;
  pointer-events: none;
}
.mobile-bar .btn {
  pointer-events: auto;
  box-shadow: 0 6px 20px -6px rgba(8, 14, 16, .55);
}
.mobile-bar .btn { flex: 1; padding: 13px 12px; font-size: var(--t-small); }

@media (max-width: 767px) {
  .wa-float { display: none; }
  .mobile-bar { display: flex; }
  .header-nav { display: none; }
  .license-chip { display: none; }
  .brand-text small { display: none; }
  .faq-layout { grid-template-columns: 1fr; gap: var(--s5); }
  .faq-head { position: static; }
  /* the traversal still runs on phones — the row is simply full width there,
     so it sweeps in from off-screen rather than across a track */
  .service-row { width: 100%; }
  .service-row:nth-child(odd),
  .service-row:nth-child(even) { margin-inline: 0; }
  .trust-items { grid-template-columns: 1fr 1fr; }
  .trust-items > li + li::before { display: none; }
  .hero-ctas .btn-wa { width: 100%; }
  /* the sticky bar already carries "call" — five simultaneous CTAs is too many */
  .hero-ctas .btn-hero-tel { display: none; }

  /* Two fixed controls sit at the bottom of the phone viewport: the sticky
     contact bar, and the accessibility trigger 88px above it. Reserving space
     at the bottom of the HERO does not help — the hero is taller than the
     viewport, so its bottom is off-screen while the controls are pinned to the
     screen. The fix is to make the first screen shorter: trim the top padding
     and tighten the internal gaps until .hero-ctas clears the trigger at 680px.
     Verified by measuring the boxes, not by eye. */
  /* The desktop logo height would push the whole hero down by another 14px and
     eat the clearance won above, so phones take a slightly smaller mark — still
     larger than the original 48px. --header-h follows it automatically. */
  :root { --logo-h: 50px; }
  /* Tightened again on 15.08 when the licence line grew to "רישיון 3614
     לדירות ומשרדים": the eyebrow gained a second line on this width and pushed
     .cta-note 26px down, back under the accessibility trigger. */
  .hero {
    padding-block-start: calc(var(--s1) + var(--header-h));
    padding-block-end: var(--s6);
  }
  .hero h1 { margin-top: var(--s1); }
  .hero .lead { margin-top: var(--s1); }
  .hero-promo { margin-top: var(--s1); }
  .hero-ctas { margin-top: var(--s1); }
  /* the sticky bar owns the bottom edge on phones */
  .scroll-cue { display: none; }
}
@media (max-width: 480px) {
  .trust-items { grid-template-columns: 1fr; }
  .contact-ctas .btn { width: 100%; }
}

/* ============================================================
   Reduced motion — every scroll effect above must switch off here.
   JS also reads this query and skips parallax entirely.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* the service rows are positioned by JS, which also stops writing under
     reduced motion — this clears anything it wrote before the switch */
  .service-row { transform: none !important; opacity: 1 !important; }
  .hero-media { transform: none !important; }
  .hero-copy { opacity: 1 !important; transform: none !important; }
  .scroll-cue { display: none; }
  .services-progress span { transition: none; }
  /* JS already pauses the hero video under reduced motion — the toggle is redundant then */
  .video-toggle { display: none; }
  .btn:hover,
  .audience-card:hover,
  .wa-float:hover,
  .video-toggle:hover { transform: none; }
  .service-row:hover .service-media img { transform: none; }
}

/* ============================================================
   Accessibility preferences widget — IS 5568 / Regulation 35
   All visual changes are driven by a11y-* classes on <html>.
   Carried over from v1; selectors retargeted to v2 class names.
   ============================================================ */
.a11y-trigger {
  position: fixed;
  inset-block-end: var(--s4);
  inset-inline-start: var(--s4);
  z-index: 97;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ground);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  transition: transform var(--dur-ui) var(--ease);
}
.a11y-trigger:hover { transform: translateY(-3px) scale(1.05); }
.a11y-trigger svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.a11y-trigger svg circle { fill: currentColor; stroke: none; }

.a11y-panel {
  position: fixed;
  inset-block-end: calc(var(--s4) + 62px);
  inset-inline-start: var(--s4);
  z-index: 98;
  width: min(340px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-md);
  color: var(--ink);
}
.a11y-panel[hidden] { display: none; }
.a11y-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s3);
}
.a11y-panel-head h2 { font-size: var(--t-body); }
.a11y-close {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  color: var(--ink);
  cursor: pointer;
}
.a11y-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.a11y-close:hover { background: #F1E4D2; }

.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-media);
  background: var(--surface-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.a11y-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.a11y-item:hover { background: #F1E4D2; }
.a11y-item.is-on {
  background: var(--brand-tint);
  border-color: var(--brand-deep);
}
.a11y-item-value { font-size: var(--t-micro); color: var(--muted); }
.a11y-item.is-on .a11y-item-value { color: #2C666C; }

.a11y-reset {
  width: 100%;
  margin-top: var(--s3);
  padding: 11px;
  border: 0;
  border-radius: var(--r-media);
  background: linear-gradient(180deg, #C4661F 0%, #B25F14 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 700;
  cursor: pointer;
}
.a11y-reset:hover { background: linear-gradient(180deg, #B25F14 0%, #A85712 100%); }
.a11y-statement-link {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-micro);
  color: var(--brand-deep);
  text-align: center;
}

@media (max-width: 767px) {
  .a11y-trigger { bottom: 88px; inset-inline-start: 12px; width: 44px; height: 44px; }
  .a11y-panel { bottom: 146px; inset-inline-start: 16px; }
}

/* ---- preference classes on <html> ---- */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; font-weight: 700; }

html.a11y-contrast-high {
  --ink: #140E06;
  --ink-soft: #2A2114;
  --muted: #3A2E1E;
}
html.a11y-contrast-high body { background: #FFFDF7; }
html.a11y-contrast-high .audience-card,
html.a11y-contrast-high .wa-form,
html.a11y-contrast-high .why-icon,
html.a11y-contrast-high .a11y-item { border-color: rgba(37,28,16,.4); }
html.a11y-contrast-high .service-body p,
html.a11y-contrast-high .why-text p,
html.a11y-contrast-high .audience-card p,
html.a11y-contrast-high .faq-a p,
html.a11y-contrast-high .section-head p { color: #3A2E1E; }

html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); }
html.a11y-contrast-mono { filter: grayscale(1) contrast(1.15); }
/* double-invert media so photos stay true under the page-level invert */
html.a11y-contrast-invert img,
html.a11y-contrast-invert video { filter: invert(1) hue-rotate(180deg); }

html.a11y-text-115 body { font-size: 18.5px; }
html.a11y-text-130 body { font-size: 21px; }
html.a11y-text-150 body { font-size: 24px; }

html.a11y-lines-16 body,
html.a11y-lines-16 p,
html.a11y-lines-16 li { line-height: 1.85 !important; }
html.a11y-lines-20 body,
html.a11y-lines-20 p,
html.a11y-lines-20 li { line-height: 2.15 !important; }

html.a11y-font body,
html.a11y-font h1, html.a11y-font h2, html.a11y-font h3,
html.a11y-font .btn, html.a11y-font input, html.a11y-font select {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

html.a11y-headings h1,
html.a11y-headings h2,
html.a11y-headings h3 {
  background: #FFF3D6;
  outline: 2px solid #C4661F;
  outline-offset: 3px;
}

html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 L8 38 L16 30 L22 44 L28 41 L22 28 L34 28 Z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important;
}

html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
  animation: none !important;
  transition-duration: .01ms !important;
}
html.a11y-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
html.a11y-motion .service-row { transform: none !important; opacity: 1 !important; }
html.a11y-motion .hero-media { transform: none !important; }
html.a11y-motion .hero-copy { opacity: 1 !important; transform: none !important; }

/* ============================================================
   Print
   ============================================================ */
@media print {
  .a11y-trigger, .a11y-panel, .wa-float, .mobile-bar, .video-toggle,
  .scroll-progress, .scroll-cue, .header-nav { display: none !important; }
  html[class*="a11y-text-"] body { font-size: 16px !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .hero { min-height: auto; background: #fff; color: #000; }
  .hero-media, .hero-scrim { display: none; }
  .hero h1, .hero .lead, .hero .cta-note { color: #000; }
  .trust, .contact, .site-footer { background: #fff; color: #000; }
  .trust-t, .contact h2 { color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .faq-a { max-height: none !important; }
}

/* ============================================================
   Legal documents (terms / privacy / cookies / accessibility)
   Carried over from v1 unchanged — those pages are not part of the
   v2 redesign, but they share this stylesheet.
   ============================================================ */
.page-doc { background: linear-gradient(180deg, var(--canvas-top) 0%, var(--canvas-bottom) 100%); }
.page-doc .site-header { position: static; }
.doc {
  max-width: 780px;
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px);
}
.doc h1 { font-size: var(--t-h2); }
.doc h2 {
  margin-top: var(--s5);
  margin-bottom: var(--s2);
  font-size: var(--t-h3);
}
.doc p { margin-bottom: var(--s2); color: var(--ink-soft); }
.doc-updated { margin-top: 10px; font-size: var(--t-small); color: var(--muted); }
.doc-lead { margin-top: var(--s3); font-size: var(--t-lead); }

.doc ul {
  margin-bottom: var(--s2);
  padding-inline-start: var(--s3);
  color: var(--ink-soft);
}
.doc li { margin-bottom: 10px; }
.doc li::marker { color: var(--brand-deep); }

.doc-contact { list-style: none; padding-inline-start: 0; }
.doc-contact li {
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.doc-todo {
  padding: 2px 8px;
  font-size: var(--t-small);
  color: var(--orange-deep);
  background: var(--amber-tint);
  border-radius: 6px;
}

.doc kbd {
  padding: 2px 7px;
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-bottom-width: 2px;
  border-radius: 6px;
}

.doc-note {
  margin-top: var(--s4);
  padding: var(--s3);
  font-size: var(--t-body);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--clay-sm);
}

.site-footer .footer-legal a { color: var(--orange-soft); text-underline-offset: 3px; }

/* ---------- Footer legal links ---------- */
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  padding-top: var(--s2);
  font-size: var(--t-small);
}
.footer-legal-links a {
  color: var(--orange-soft);
  text-underline-offset: 3px;
}
.footer-legal-links a[aria-current="page"] {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

/* ---------- Legal document tables ---------- */
.doc-table {
  width: 100%;
  margin-bottom: var(--s3);
  border-collapse: collapse;
  font-size: var(--t-small);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-media);
  overflow: hidden;
}
.doc-table caption {
  padding-bottom: 10px;
  font-size: var(--t-small);
  color: var(--muted);
  text-align: start;
}
.doc-table th,
.doc-table td {
  padding: 12px 14px;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.doc-table th {
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-soft);
}
.doc-table td { color: var(--ink-soft); }
.doc-table tr:last-child td { border-bottom: none; }

@media (max-width: 620px) {
  .doc-table, .doc-table thead, .doc-table tbody, .doc-table tr, .doc-table th, .doc-table td { display: block; }
  .doc-table thead { display: none; }
  .doc-table tr { border-bottom: 2px solid var(--hairline); }
  .doc-table td { border-bottom: none; padding: 6px 14px; }
  .doc-table td:first-child { padding-top: 14px; font-weight: 700; color: var(--ink); }
  .doc-table td:last-child { padding-bottom: 14px; }
}

/* ---------- Consent banner ---------- */
.consent-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 130;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(253, 248, 240, .97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -18px 40px -22px rgba(60,30,8,.4);
}
.consent-inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: min(100% - 8px, 1140px);
  margin-inline: auto;
}
.consent-text h2 { font-size: var(--t-body); }
.consent-text p {
  margin-top: 5px;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.consent-actions {
  display: flex;
  flex: none;
  gap: 10px;
}
.consent-actions .btn { padding: 13px 22px; font-size: var(--t-small); }

@media (max-width: 767px) {
  .consent-banner { bottom: 74px; }
  .consent-inner { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .consent-actions .btn { flex: 1; }
}