/* =============================================================================
   NortSide Connect — site.css
   Brand: green #7EB10A · bright #49CC28 · vivid #23F31E · red #FE110C
          ink #050705 · deep green #011909 · paper #F1F5EC
   Motion: sections and carousels move left → right.
   ========================================================================== */

/* ------------------------------- 1. Tokens ------------------------------- */
:root {
  --ink:            #050705;
  --ink-2:          #0B120C;
  --ink-3:          #141E15;
  --deep:           #011909;
  --deep-2:         #04280E;
  --paper:          #F1F5EC;
  --paper-2:        #FFFFFF;
  --paper-3:        #E4EBDB;

  --brand:          #7EB10A;
  --brand-bright:   #49CC28;
  --brand-vivid:    #23F31E;
  --brand-red:      #FE110C;
  --wa:             #25D366;

  /* Legibility-tuned variants */
  --accent-dark-bg: #A7DB2E;  /* accent used on dark surfaces */
  --accent-lite-bg: #4F7008;  /* accent used on light surfaces */

  --text-on-dark:   #E8EFE2;
  --muted-on-dark:  #A9B6A4;
  --text-on-light:  #10170F;
  --muted-on-light: #4C574A;

  --line-dark:      rgba(167, 219, 46, .18);
  --line-light:     rgba(16, 23, 15, .12);

  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-script:  'Caveat', 'Segoe Script', 'Brush Script MT', cursive;

  /* The layout is full-bleed: content spans the whole screen at every width and
     never sits in a boxed column with dead space either side. --shell stays as
     a token so a single place can cap it again if that is ever wanted. */
  --shell:      100%;
  /* Side padding grows with the screen so content breathes on a big monitor
     without ever leaving an empty band. */
  --gutter:     clamp(1.15rem, 3.4vw, 5rem);
  /* Side padding that also clears the notch in landscape. Use these, not
     --gutter, anywhere that touches the left or right edge of the screen. */
  --pad-l:      max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r:      max(var(--gutter), env(safe-area-inset-right, 0px));
  --radius:     18px;
  --radius-lg:  26px;
  --radius-pill:999px;

  --header-h:   76px;
  --ease:       cubic-bezier(.22, .68, 0, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);

  --shadow-sm:  0 2px 10px rgba(5, 7, 5, .08);
  --shadow-md:  0 14px 40px rgba(5, 7, 5, .12);
  --shadow-lg:  0 30px 80px rgba(1, 25, 9, .28);
  --shadow-glow:0 0 0 1px rgba(167,219,46,.25), 0 18px 50px rgba(73, 204, 40, .18);
}

/* ------------------------------- 2. Reset -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/*
 * Large monitors: scale the root, not individual rules. Every size in this
 * file is in rem or clamp(), so lifting the root lifts type, spacing, padding
 * and gaps together — the page grows into the screen instead of sitting in it
 * as a small layout surrounded by emptiness.
 */
@media (min-width: 1700px) { html { font-size: 17.5px; } }
@media (min-width: 2300px) { html { font-size: 19px; } }

html {
  /* Stops iOS Safari inflating text when the phone is rotated to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
  /* No rubber-band chaining to the page behind a locked overlay. */
  overscroll-behavior-y: none;
  /* Insurance against sideways scroll. `clip` rather than `hidden` on purpose:
     hidden would turn <html> into a scroll container and break position:sticky
     and momentum scrolling on iOS. Nothing should rely on this — it is a net,
     not a floor. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text-on-light);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* clip beats hidden: it contains overflow without silently turning the body
     into a scroll container, which is what breaks position:sticky on iOS. */
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

/* Kill the 300ms tap delay and double-tap-to-zoom on things meant to be tapped,
   without disabling pinch zoom anywhere on the page. */
a, button, label, summary, input, select, textarea,
.card, .chip, .carousel__viewport, .accordion__btn {
  touch-action: manipulation;
}

a, button, .nav-toggle, .carousel__btn, .accordion__btn {
  -webkit-tap-highlight-color: rgba(126, 177, 10, .18);
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 1.5rem + 4.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 1.35rem + 2.5vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--brand-bright); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--brand-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: var(--ink);
  padding: .75rem 1.25rem; font-weight: 600; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

.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;
}

/* ------------------------------ 3. Layout -------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  /* --pad-* keeps content clear of the notch when an iPhone is held sideways
     (viewport-fit=cover lets the page run under it). */
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
}

.section { padding-block: clamp(4rem, 8vw, 7.5rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

.section--dark  { background: var(--ink); color: var(--text-on-dark); }
.section--deep  { background: var(--deep); color: var(--text-on-dark); }
.section--paper { background: var(--paper); color: var(--text-on-light); }
.section--white { background: var(--paper-2); color: var(--text-on-light); }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--deep h1, .section--deep h2, .section--deep h3 { color: #fff; }

/* Diagonal edge that reads as left → right movement between bands */
.section--edge-top::before {
  content: ""; position: absolute; inset: auto 0 100% 0; height: clamp(28px, 4vw, 64px);
  background: inherit;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.grid { display: grid; gap: clamp(1rem, 1.6vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/*
 * Above tablet the column count is fixed rather than left to auto-fit.
 * With a full-width container auto-fit keeps adding columns as the monitor
 * grows — six pillars became six 270px slivers on a 1920px screen. Fixed
 * counts mean the cards widen to fill the screen instead of multiplying,
 * and they stay correct whatever number of items a page puts in the grid.
 * (Class names describe the small-screen intent, not the desktop count.)
 */
@media (min-width: 1100px) {
  .grid--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.split {
  display: grid; align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

/* ---------------------------- 4. Typography ------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-lite-bg);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 30px; height: 2px; background: currentColor;
  transform-origin: left; animation: eyebrow-draw .9s var(--ease) both;
}
.section--dark .eyebrow, .section--deep .eyebrow, .hero .eyebrow { color: var(--accent-dark-bg); }

@keyframes eyebrow-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.lede {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem);
  line-height: 1.6;
  color: var(--muted-on-light);
  max-width: 60ch;
}
.section--dark .lede, .section--deep .lede, .hero .lede { color: var(--muted-on-dark); }

.script { font-family: var(--font-script); font-size: 1.35em; line-height: 1; color: var(--accent-dark-bg); font-weight: 600; }
.section--paper .script, .section--white .script { color: var(--accent-lite-bg); }

.hl { color: var(--accent-lite-bg); }
.section--dark .hl, .section--deep .hl, .hero .hl { color: var(--accent-dark-bg); }

.section-head { max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* On a wide screen a 58ch heading block leaves a large empty area to its right.
   Split it instead: headline left, supporting paragraph right, filling the band
   while both still sit at a readable line length. */
@media (min-width: 1100px) {
  .section-head:not(.section-head--center) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: clamp(2rem, 4vw, 5rem);
    align-items: end;
  }
  .section-head:not(.section-head--center) .eyebrow { grid-column: 1 / -1; }
  .section-head:not(.section-head--center) h2 { grid-column: 1; margin-bottom: 0; }
  .section-head:not(.section-head--center) .lede { grid-column: 2; max-width: 58ch; }
}

/* ----------------------------- 5. Buttons -------------------------------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--ink);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .9rem 1.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: .96rem;
  letter-spacing: .01em; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .25s, color .25s, border-color .25s;
  will-change: transform;
}
.btn > span { position: relative; z-index: 1; }
.btn > svg  { position: relative; z-index: 1; width: 19px; height: 19px; flex: none; }

/* left → right sheen on hover */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.42) 45%, transparent 78%);
  transform: translateX(-115%);
  transition: transform .7s var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(115%); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.btn:active { transform: translateY(0); }

.btn--wa    { --btn-bg: var(--wa); --btn-fg: #04250F; }
.btn--brand { --btn-bg: var(--brand); --btn-fg: #0A1300; }
.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--dark  { --btn-bg: var(--ink); --btn-fg: var(--paper); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text-on-dark);
  border-color: rgba(232, 239, 226, .32);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--accent-dark-bg); color: var(--accent-dark-bg); }
.section--paper .btn--ghost, .section--white .btn--ghost { --btn-fg: var(--text-on-light); border-color: var(--line-light); }
.section--paper .btn--ghost:hover, .section--white .btn--ghost:hover { color: var(--accent-lite-bg); border-color: var(--accent-lite-bg); }

.btn--plain {
  --btn-bg: transparent; --btn-fg: var(--accent-lite-bg);
  padding-inline: .35rem; font-weight: 600;
  box-shadow: none; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(79, 112, 8, .4);
}
.section--dark .btn--plain, .section--deep .btn--plain,
.cta-band .btn--plain, .hero .btn--plain {
  --btn-fg: var(--accent-dark-bg); text-decoration-color: rgba(167, 219, 46, .4);
}
.btn--plain::after { display: none; }
.btn--plain:hover { opacity: 1; transform: translateX(3px); box-shadow: none; }

.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; }
.btn--sm { padding: .68rem 1.1rem; font-size: .87rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* Text link with an arrow that slides right */
.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--accent-lite-bg);
}
.section--dark .arrow-link, .section--deep .arrow-link { color: var(--accent-dark-bg); }
.arrow-link svg { width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.arrow-link:hover svg { transform: translateX(6px); }

/* ------------------------------ 6. Icons --------------------------------- */
.ico { width: 26px; height: 26px; flex: none; }
.ico--sm { width: 18px; height: 18px; }
.ico--lg { width: 34px; height: 34px; }

/* Heading icon: sits inline to the left of the heading text, no badge behind it.
   Sized in em so it always matches whatever heading level it is used in. */
.h-ico {
  display: flex;
  align-items: center;
  gap: .6em;
}
.h-ico > svg {
  flex: none;
  width: 1.15em; height: 1.15em;
  stroke-width: 1.5;
  color: var(--accent-lite-bg);
  transition: transform .4s var(--ease-out), color .3s;
}
.section--dark .h-ico > svg,
.section--deep .h-ico > svg,
.hero .h-ico > svg,
.cta-band .h-ico > svg { color: var(--accent-dark-bg); }

.card:hover .h-ico > svg { transform: translateX(3px); }

/* Icons are drawn and visible by default. JS adds .is-drawing only when the
   heading scrolls into view, so a JS failure can never leave an icon invisible. */
.h-ico > svg.is-drawing * {
  stroke-dasharray: var(--dash, 120);
  stroke-dashoffset: var(--dash, 120);
  animation: draw .9s var(--ease-out) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ----------------------------- 7. Header --------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.site-header::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0; transition: opacity .4s;
}
.site-header.is-stuck {
  background: rgba(5, 7, 5, .88);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}
.site-header.is-stuck::after { opacity: .55; }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand-img { width: auto; height: 46px; transition: transform .4s var(--ease-out); }
.brand:hover .brand-img { transform: translateX(3px); }
.brand-img--dark { display: none; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav-list { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 1.9rem); }

.nav-link {
  position: relative;
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  color: rgba(232, 239, 226, .84);
  padding-block: .4rem;
  transition: color .3s;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--brand-bright);
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease-out);
}
.nav-link:hover, .nav-link.is-active { color: #fff; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

.nav-toggle {
  display: none; position: relative; z-index: 101;
  width: 48px; height: 48px; padding: 0;   /* >= the 44px minimum touch target */
  background: rgba(232, 239, 226, .08); border: 1px solid rgba(232, 239, 226, .2);
  border-radius: 14px; cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.nav-toggle[aria-expanded="true"] {
  background: rgba(167, 219, 46, .16); border-color: rgba(167, 219, 46, .5);
}
.nav-toggle:active { background: rgba(167, 219, 46, .22); }
.nav-toggle span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: var(--paper); border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateX(14px); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The drawer footer exists only inside the mobile drawer. */
.nav-foot { display: none; }

/* ---------------------- 7b. Mobile navigation drawer --------------------- */
@media (max-width: 900px) {
  :root { --header-h: 68px; }

  .nav-toggle { display: block; }

  /* The mobile header is solid on every page and at every scroll position.
     A header that fades in and out reads as the page misbehaving on a phone. */
  .site-header {
    background: rgba(4, 10, 5, .94);
    box-shadow: 0 1px 0 rgba(167, 219, 46, .16);
    /* No backdrop blur on phones: it is the single most expensive thing you can
       put behind a scrolling page on iOS, and it causes visible stutter. */
    backdrop-filter: none;
  }
  .site-header.is-stuck {
    background: rgba(4, 10, 5, .97);
    backdrop-filter: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
  }
  .site-header::after { display: none; }

  .brand-img { height: 40px; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 340px);
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    /* Full dynamic viewport height, so the drawer does not jump when Safari's
       address bar collapses mid-swipe. */
    height: 100%;
    height: 100dvh;
    padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.25rem)
             var(--pad-r)
             calc(1.5rem + env(safe-area-inset-bottom, 0px))
             var(--gutter);
    background: linear-gradient(165deg, #04280E 0%, #02140A 45%, var(--ink) 100%);
    border-left: 1px solid rgba(167, 219, 46, .22);
    box-shadow: -18px 0 50px rgba(0, 0, 0, .5);
    transform: translateX(100%);
    transition: transform .42s var(--ease), visibility .42s;
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }

  .nav-list li + li { border-top: 1px solid rgba(232, 239, 226, .09); }

  /* Rows, not floating words: a whole-row target is far easier to hit than a
     text-width one, and it never leaves you guessing where to tap. */
  .nav-link {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 56px; padding: .9rem .25rem;
    font-size: 1.12rem; font-weight: 600;
    color: var(--text-on-dark);
    transition: color .25s, padding-left .3s var(--ease-out);
  }
  .nav-link::after {
    content: ""; position: static; transform: none;
    width: 7px; height: 7px; flex: none;
    border-right: 2px solid rgba(167, 219, 46, .5);
    border-top: 2px solid rgba(167, 219, 46, .5);
    rotate: 45deg;
    background: none;
    opacity: .55; transition: opacity .25s, translate .3s var(--ease-out);
  }
  .nav-link.is-active { color: var(--accent-dark-bg); padding-left: .7rem; }
  .nav-link.is-active::after { opacity: 1; }
  .nav-link:active { color: var(--accent-dark-bg); }

  /* Green marker on the current page, so "where am I" is answered instantly. */
  .nav-list li { position: relative; }
  .nav-list li:has(.is-active)::before {
    content: ""; position: absolute; left: -.75rem; top: 50%;
    width: 3px; height: 22px; margin-top: -11px; border-radius: 3px;
    background: linear-gradient(180deg, var(--brand), var(--brand-bright));
  }

  .nav-cta { width: 100%; margin-top: auto; padding-top: 1.75rem; }
  .nav-cta .btn { width: 100%; min-height: 52px; }

  .nav-foot {
    display: block;
    margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid rgba(232, 239, 226, .09);
    font-size: .84rem; color: var(--muted-on-dark);
  }
  .nav-foot a { display: block; padding: .3rem 0; color: var(--muted-on-dark); }
  .nav-foot a:active { color: var(--accent-dark-bg); }

  .nav-scrim {
    position: fixed; inset: 0; z-index: 89;
    background: rgba(2, 8, 3, .66);
    opacity: 0; pointer-events: none; transition: opacity .4s;
  }

  /* Short phones (iPhone SE and friends, and any phone in landscape): compact
     the rows so the whole menu fits without scrolling. */
  @media (max-height: 720px) {
    .nav { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + .6rem); }
    .nav-link { min-height: 48px; padding-block: .6rem; font-size: 1.04rem; }
    .nav-cta { padding-top: 1.1rem; }
    .nav-cta .btn { min-height: 48px; }
    .nav-foot { margin-top: .9rem; padding-top: .9rem; font-size: .8rem; }
  }
  .nav-scrim.is-visible { opacity: 1; pointer-events: auto; }

  /* Scroll lock. The inline top offset is set by JS; position:fixed is the only
     approach iOS Safari actually honours, and restoring scrollTop on close is
     what stops the page jumping back to the top. */
  body.nav-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }
}

/* ------------------------------- 8. Hero --------------------------------- */
.hero {
  position: relative;
  /* Fallback first for anything without svh (iOS < 15.4), then the real value.
     svh is the *small* viewport height — the height with the browser chrome
     showing — so the hero never resizes as Safari's address bar slides away. */
  min-height: 600px;
  min-height: min(94svh, 900px);
  display: flex; align-items: center;
  padding-block: calc(var(--header-h) + 3.5rem) clamp(3.5rem, 7vw, 6rem);
  background: var(--ink);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero--compact { min-height: 0; padding-block: calc(var(--header-h) + 3.2rem) clamp(3rem, 6vw, 5rem); }

/* WebGL shader canvas (falls back to the CSS gradient below it) */
.hero__canvas {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.1s ease;
}
.hero__canvas.is-ready { opacity: 1; }

.hero__fallback {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(75% 90% at 12% 25%, rgba(73, 204, 40, .30), transparent 62%),
    radial-gradient(60% 80% at 88% 18%, rgba(126, 177, 10, .26), transparent 60%),
    radial-gradient(70% 70% at 65% 95%, rgba(1, 40, 14, .95), transparent 70%),
    linear-gradient(120deg, #010D05 0%, #04240D 45%, #050705 100%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(232,239,226,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,239,226,.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 82%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 82%);
}

.hero__inner { position: relative; width: 100%; }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }

/* On a wide monitor the headline column would otherwise hold a capped block of
   text with a lot of air beside it. Let the type grow and give the value card
   a fairer share of the row. */
@media (min-width: 1700px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
  .hero h1 { font-size: clamp(4.4rem, 3.1vw, 5.6rem); }
  .hero__sub { max-width: 60ch; font-size: 1.22rem; }
  .hero__card { padding: clamp(2rem, 2.2vw, 2.75rem); }
  .hero__card li { font-size: 1.02rem; }
}

.hero h1 { margin-bottom: 1.1rem; color: #fff; }
.hero h1 .line { display: block; }
.hero__sub { max-width: 54ch; margin-bottom: 2rem; }

.hero__cta { margin-bottom: 2.25rem; }

.hero__note {
  display: flex; align-items: center; gap: .55rem;
  font-size: .88rem; color: var(--muted-on-dark);
}
.hero__note svg { width: 17px; height: 17px; color: var(--wa); }

/* Value stack card on the right of the hero */
.hero__card {
  background: rgba(232, 239, 226, .05);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}
.hero__card h2 {
  font-size: clamp(.9rem, .82rem + .3vw, 1.02rem);
  letter-spacing: clamp(.08em, .04em + .3vw, .16em);
  text-transform: uppercase;
  color: var(--accent-dark-bg); margin-bottom: 1.25rem;
  overflow-wrap: break-word; hyphens: auto;
}
.hero__card ul { display: grid; gap: .9rem; }
.hero__card li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; color: var(--text-on-dark); }
.hero__card li svg { width: 20px; height: 20px; color: var(--brand-bright); flex: none; margin-top: .18rem; }
.hero__card .hero__card-foot {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark);
  font-size: .92rem; color: var(--muted-on-dark);
}

/* Statement strip: "Your business. Your system. Your advantage." */
.statement {
  display: grid; gap: .15rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 1rem + 1.8vw, 2.1rem);
  line-height: 1.15; letter-spacing: -.02em;
  border-left: 3px solid var(--brand); padding-left: 1.1rem;
}
.statement span:nth-child(1) .hl,
.statement span:nth-child(2) .hl,
.statement span:nth-child(3) .hl { color: var(--accent-dark-bg); }

/* ------------------------------ 9. Cards --------------------------------- */
.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2.6vw, 1.95rem);
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  transition: translate .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .35s;
  height: 100%;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--brand), var(--brand-bright));
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease-out);
}
/* `translate` rather than `transform`: most cards are also scroll-reveal
   targets, and the reveal rule sets `transform` later in this file, which would
   silently win on equal specificity and cancel the hover shift. The independent
   `translate` property composes with it instead of fighting it. */
.card:hover { translate: 6px 0; box-shadow: var(--shadow-md); border-color: rgba(126,177,10,.42); }
.card:hover::before { transform: scaleY(1); }

.section--dark .card, .section--deep .card {
  background: rgba(232, 239, 226, .04);
  border-color: var(--line-dark);
  color: var(--text-on-dark);
}
.section--dark .card:hover, .section--deep .card:hover { background: rgba(232, 239, 226, .07); box-shadow: var(--shadow-lg); }

.card h3 { margin-bottom: .5rem; }
/* Cards stretch to fill a wide screen; their text should not stretch with them. */
.card p { color: var(--muted-on-light); font-size: .97rem; max-width: 52ch; }
.section--dark .card p, .section--deep .card p { color: var(--muted-on-dark); }

.card__lead { font-family: var(--font-display); font-weight: 600; color: var(--accent-lite-bg); font-size: .95rem; margin-bottom: .55rem; }
.section--dark .card__lead, .section--deep .card__lead { color: var(--accent-dark-bg); }

.card__list { margin-top: 1.1rem; display: grid; gap: .5rem; }
.card__list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .91rem; color: var(--muted-on-light); }
.card__list li::before {
  content: ""; flex: none; width: 14px; height: 2px; margin-top: .72rem;
  background: var(--brand); border-radius: 2px;
}
.section--dark .card__list li, .section--deep .card__list li { color: var(--muted-on-dark); }


/* Numbered process cards */
.step { position: relative; }
.step__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px rgba(126, 177, 10, .55);
  margin-bottom: .8rem;
}
.section--dark .step__num, .section--deep .step__num { -webkit-text-stroke-color: rgba(167, 219, 46, .55); }

/* Stat tiles */
.stat {
  padding: clamp(1.1rem, 2.3vw, 1.6rem);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(232, 239, 226, .04);
}
.stat__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1;
  color: var(--accent-dark-bg); margin-bottom: .45rem;
}
.stat__label { font-size: .88rem; color: var(--muted-on-dark); line-height: 1.45; }

/* Chips */
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem; font-size: .82rem; font-weight: 500;
  border: 1px solid var(--line-light); border-radius: var(--radius-pill);
  background: var(--paper-2); color: var(--muted-on-light);
  transition: transform .3s var(--ease-out), border-color .3s, color .3s;
}
.chip:hover { transform: translateX(4px); border-color: var(--brand); color: var(--accent-lite-bg); }
.section--dark .chip, .section--deep .chip {
  background: rgba(232, 239, 226, .05); border-color: var(--line-dark); color: var(--muted-on-dark);
}
.section--dark .chip:hover, .section--deep .chip:hover { color: var(--accent-dark-bg); border-color: var(--accent-dark-bg); }

/* --------------------- 10. Marquee: left → right ------------------------- */
.marquee {
  position: relative; overflow: hidden;
  padding-block: clamp(1.1rem, 2vw, 1.6rem);
  border-block: 1px solid var(--line-dark);
  background: var(--ink-2);
}
/* Fade the moving content at both edges without cutting a hole in the band. */
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(48px, 9vw, 130px); pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--ink-2) 15%, transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink-2) 15%, transparent); }

.marquee__track {
  display: flex; width: max-content;
  animation: marquee-ltr 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: .8rem;
  padding-inline: clamp(1rem, 2.4vw, 2rem);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.95rem, .9rem + .3vw, 1.15rem);
  color: var(--muted-on-dark); white-space: nowrap;
}
.marquee__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* Track is duplicated in the markup; -50% → 0 makes the content travel RIGHT. */
@keyframes marquee-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* -------------------- 11. Carousel: left → right ------------------------- */
.carousel { position: relative; }
.carousel__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* Swiping the carousel must not drag the page sideways behind it. */
  overscroll-behavior-x: contain;
  padding-block: .5rem 1.25rem;
  /* Bleed to the edge of the screen, matching .shell's padding exactly so the
     row can never push the page sideways. */
  margin-left: calc(var(--pad-l) * -1);
  margin-right: calc(var(--pad-r) * -1);
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
  scroll-padding-left: var(--pad-l);
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: clamp(1rem, 2vw, 1.5rem); }
.carousel__slide {
  flex: 0 0 min(88vw, 380px);
  scroll-snap-align: start;
}
.carousel__controls { display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.carousel__btn {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--line-light); color: inherit;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-out);
}
.section--dark .carousel__btn, .section--deep .carousel__btn { border-color: var(--line-dark); }
.carousel__btn:hover:not(:disabled) { background: var(--brand); color: #0A1300; border-color: var(--brand); transform: translateX(3px); }
.carousel__btn:disabled { opacity: .35; cursor: not-allowed; }
.carousel__btn svg { width: 20px; height: 20px; }
.carousel__btn--prev svg { transform: rotate(180deg); }
.carousel__progress { flex: 1; height: 3px; border-radius: 3px; background: var(--line-light); overflow: hidden; margin-left: .5rem; }
.section--dark .carousel__progress, .section--deep .carousel__progress { background: rgba(232,239,226,.14); }
.carousel__bar {
  height: 100%; width: 22%; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  transform-origin: left; transition: transform .3s var(--ease-out), width .3s var(--ease-out);
}

/* ------------------------- 12. Reveal animations ------------------------- */
/* Default motion is left → right: content slides in from the left edge. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(-46px, 0, 0);
  transition:
    opacity .85s var(--ease-out) var(--reveal-delay, 0ms),
    transform .95s var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="right"] { transform: translate3d(46px, 0, 0); }
[data-reveal="up"]    { transform: translate3d(0, 38px, 0); }
[data-reveal="scale"] { transform: translate3d(-30px, 0, 0) scale(.96); }
[data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

/*
 * On a phone every reveal comes from the LEFT, never the right.
 * A right-entering element sits 46px past the right edge until it animates,
 * and that is enough to make the whole page scroll sideways — the single most
 * common reason a site feels broken on mobile. Left-entering elements overhang
 * the left edge instead, which browsers do not add to the scrollable width.
 * It also matches the left-to-right motion the rest of the site uses.
 */
@media (max-width: 900px) {
  [data-reveal],
  [data-reveal="right"],
  [data-reveal="scale"] { transform: translate3d(-26px, 0, 0); }
  [data-reveal="up"]    { transform: translate3d(0, 26px, 0); }
  [data-reveal].is-revealed { transform: translate3d(0, 0, 0); }
}

/* Section-wide wipe: a green sweep that crosses left → right once */
.wipe { position: relative; overflow: hidden; }
.wipe::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(126,177,10,.16), transparent);
  transform: translateX(-100%);
}
.wipe.is-revealed::after { animation: wipe-ltr 1.15s var(--ease-out) forwards; }
@keyframes wipe-ltr { to { transform: translateX(100%); } }

/* ---------------------------- 13. CTA band ------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(105deg, var(--deep) 0%, var(--ink) 58%, var(--ink-3) 100%);
  color: var(--text-on-dark);
  padding-block: clamp(3.25rem, 6vw, 5rem);
}
.cta-band::before {
  content: ""; position: absolute; inset: -40% -10% auto -30%; height: 180%;
  background: radial-gradient(45% 55% at 20% 50%, rgba(73,204,40,.22), transparent 70%);
  animation: drift-ltr 16s ease-in-out infinite alternate;
}
@keyframes drift-ltr { from { transform: translateX(-4%); } to { transform: translateX(14%); } }

.cta-band__inner {
  position: relative;
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center;
}
@media (max-width: 880px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band__title { color: #fff; margin-bottom: .8rem; }
.cta-band__text { color: var(--muted-on-dark); max-width: 52ch; margin: 0; }
.cta-band__actions { display: flex; flex-direction: column; gap: .85rem; align-items: flex-start; }
.cta-band__actions .btn:not(.btn--plain) { width: 100%; }

/* ----------------------------- 14. Footer -------------------------------- */
.site-footer {
  background: var(--ink); color: var(--muted-on-dark);
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
  font-size: .93rem;
}
.footer-grid {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.2fr);
}
@media (max-width: 940px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } }

.footer-brand img { height: 62px; width: auto; margin-bottom: 1rem; }
.footer-tag { font-family: var(--font-display); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .8rem; color: var(--accent-dark-bg); margin-bottom: .9rem; }
.footer-blurb { max-width: 40ch; }
.footer-own { margin-top: 1.1rem; color: var(--text-on-dark); font-size: 1.05rem; }

.footer-head { font-family: var(--font-display); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; }
.footer-col ul { display: grid; gap: .7rem; }
.footer-col a { transition: color .3s, transform .3s var(--ease-out); display: inline-flex; }
.footer-col a:hover { color: var(--accent-dark-bg); transform: translateX(4px); }

.footer-contact ul { gap: 1rem; }
.footer-contact li a, .footer-plain { display: flex; gap: .7rem; align-items: flex-start; color: var(--text-on-dark); }
.footer-contact svg { color: var(--brand-bright); margin-top: .2rem; }
.footer-contact small { display: block; font-size: .8rem; color: var(--muted-on-dark); font-weight: 400; }
.footer-contact li span { font-weight: 500; }

.footer-social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.footer-social a {
  padding: .34rem .8rem; font-size: .8rem;
  border: 1px solid var(--line-dark); border-radius: var(--radius-pill);
  transition: background-color .3s, color .3s, transform .3s var(--ease-out);
}
.footer-social a:hover { background: var(--brand); color: #0A1300; transform: translateX(3px); }

.footer-areas { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line-dark); }
.footer-areas p { font-size: .82rem; line-height: 1.9; color: rgba(169, 182, 164, .72); margin: 0; }

.footer-bottom {
  margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .82rem;
}
.footer-bottom p { margin: 0; }

/* ------------------------ 15. Floating WhatsApp -------------------------- */
.wa-float {
  position: fixed; z-index: 80;
  right: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-right, 0px));
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.05rem;
  background: var(--wa); color: #04250F;
  border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 600; font-size: .93rem;
  box-shadow: 0 12px 34px rgba(37, 211, 102, .38);
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.wa-float svg { width: 24px; height: 24px; }
.wa-float:hover { transform: translateX(-4px) scale(1.03); box-shadow: 0 16px 44px rgba(37, 211, 102, .5); }
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--wa); animation: pulse-ring 2.6s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
@media (max-width: 560px) {
  .wa-float__label { display: none; }
  .wa-float { padding: .9rem; }
}

/* --------------------------- 16. Contact page ---------------------------- */
.contact-rail { display: grid; gap: 1rem; }
.contact-card {
  position: relative; overflow: hidden;
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: rgba(232, 239, 226, .04);
  transition: transform .4s var(--ease-out), border-color .3s, background-color .3s;
}
.contact-card:hover { transform: translateX(6px); border-color: var(--accent-dark-bg); background: rgba(232, 239, 226, .07); }
.contact-card__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; flex: none; background: rgba(167,219,46,.14); color: var(--accent-dark-bg); }
.contact-card--wa .contact-card__ico { background: rgba(37, 211, 102, .16); color: var(--wa); }
.contact-card__body { flex: 1; min-width: 0; }
.contact-card__label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; color: #fff; margin-bottom: .2rem; }
.contact-card__value { font-size: 1.02rem; color: var(--text-on-dark); word-break: break-word; }
.contact-card__meta { font-size: .84rem; color: var(--muted-on-dark); margin-top: .3rem; }
.badge-fast {
  font-family: var(--font-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: var(--radius-pill);
  background: var(--wa); color: #04250F;
}
.badge-step {
  font-family: var(--font-display); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .18rem .55rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-dark); color: var(--muted-on-dark);
}

/* -------------------------------- Forms ---------------------------------- */
.form-card {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.field-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: block; }
.field--full { grid-column: 1 / -1; }
.field > label {
  display: block; margin-bottom: .42rem;
  font-family: var(--font-display); font-weight: 600; font-size: .87rem;
  color: var(--text-on-light);
}
.field .req { color: var(--brand-red); }
/* Text-entry controls only — checkboxes and radios must keep their native
   appearance, so they are excluded here. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%; padding: .85rem 1rem;
  font: inherit;
  /* 16px is the magic number: iOS Safari zooms the whole page in on focus for
     anything smaller, and never zooms back out. Never drop below it. */
  font-size: 16px;
  color: var(--text-on-light);
  background: var(--paper); border: 1px solid var(--line-light);
  border-radius: 12px;
  -webkit-appearance: none; appearance: none;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
/* Only once we know there is a mouse is it safe to go back to a smaller field. */
@media (hover: hover) and (pointer: fine) {
  .field input:not([type="checkbox"]):not([type="radio"]),
  .field select,
  .field textarea { font-size: .97rem; }
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234C574A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(126, 177, 10, .16);
  background: var(--paper-2);
}
.field input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--brand-red); box-shadow: 0 0 0 4px rgba(254, 17, 12, .12);
}
.field-error { display: block; margin-top: .35rem; font-size: .82rem; color: #C21008; min-height: 1em; }
.field-hint  { display: block; margin-top: .35rem; font-size: .82rem; color: var(--muted-on-light); }

/* Honeypot: off-screen for people, plain and inviting for bots.
   Kept at 16px so it can never trigger an iOS focus-zoom either. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.hp-field input { font-size: 16px; }

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--muted-on-light); }
.consent input { width: 18px; height: 18px; flex: none; margin-top: .18rem; accent-color: var(--brand); }

.form-alert {
  display: none; gap: .7rem; align-items: flex-start;
  padding: 1rem 1.15rem; border-radius: 12px; margin-bottom: 1.4rem;
  font-size: .93rem; line-height: 1.55;
}
.form-alert.is-visible { display: flex; }
.form-alert--ok   { background: rgba(73, 204, 40, .12); border: 1px solid rgba(73, 204, 40, .4); color: #1E5C0E; }
.form-alert--err  { background: rgba(254, 17, 12, .08); border: 1px solid rgba(254, 17, 12, .32); color: #A80D07; }
.form-alert svg { width: 20px; height: 20px; flex: none; margin-top: .12rem; }

.btn.is-busy { pointer-events: none; opacity: .75; }
.btn.is-busy::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite; margin-right: .1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------- 17. Misc blocks ----------------------------- */
.page-hero { position: relative; }

.accordion { border-top: 1px solid var(--line-light); }
.section--dark .accordion, .section--deep .accordion { border-color: var(--line-dark); }
.accordion__item { border-bottom: 1px solid var(--line-light); }
.section--dark .accordion__item, .section--deep .accordion__item { border-color: var(--line-dark); }
.accordion__btn {
  width: 100%; display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.25rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, .96rem + .3vw, 1.14rem);
  transition: color .3s, padding-left .35s var(--ease-out);
}
.accordion__btn:hover { color: var(--accent-lite-bg); padding-left: .6rem; }
.section--dark .accordion__btn:hover, .section--deep .accordion__btn:hover { color: var(--accent-dark-bg); }
.accordion__sign { position: relative; width: 20px; height: 20px; flex: none; }
.accordion__sign::before, .accordion__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: currentColor;
  border-radius: 2px; transition: transform .4s var(--ease);
}
.accordion__sign::after { transform: rotate(90deg); }
.accordion__btn[aria-expanded="true"] .accordion__sign::after { transform: rotate(0deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-bottom: 1.35rem; max-width: 72ch; color: var(--muted-on-light); margin: 0; }
.section--dark .accordion__panel p, .section--deep .accordion__panel p { color: var(--muted-on-dark); }

.list-check { display: grid; gap: .8rem; }
.list-check li { display: flex; gap: .7rem; align-items: flex-start; }
.list-check svg { width: 21px; height: 21px; flex: none; color: var(--brand); margin-top: .18rem; }

.quote {
  border-left: 3px solid var(--brand);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); line-height: 1.4;
  letter-spacing: -.01em;
}

/* No card, no tint, no border: "What's included" sits directly on the section
   background. A thin brand rule on the left keeps it grouped without boxing it. */
.panel {
  padding: 0 0 0 clamp(1rem, 1.6vw, 1.5rem);
  background: none;
  border: 0;
  border-left: 2px solid var(--brand);
  border-radius: 0;
}

.work-card__result {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.1rem; padding: .5rem .9rem;
  border-radius: var(--radius-pill);
  background: rgba(126,177,10,.12); color: var(--accent-lite-bg);
  font-size: .84rem; font-weight: 600;
}
.section--dark .work-card__result, .section--deep .work-card__result { background: rgba(167,219,46,.14); color: var(--accent-dark-bg); }
.work-card__sector { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-on-light); margin-bottom: .55rem; font-weight: 600; }
.section--dark .work-card__sector, .section--deep .work-card__sector { color: var(--muted-on-dark); }

/* ====================== 18. Touch / mobile stability ====================== */
/*
 * On a touch screen there is no hover, so the browser fakes one on tap and then
 * leaves it stuck until you tap elsewhere. A card that slides 6px right and
 * stays there reads as a bug. Everything below removes movement-on-hover for
 * touch devices and replaces it with a short press state instead.
 */
@media (hover: none), (pointer: coarse) {

  .card:hover { translate: none; }

  .btn:hover,
  .card:hover,
  .chip:hover,
  .contact-card:hover,
  .wa-float:hover,
  .btn--plain:hover,
  .footer-col a:hover,
  .footer-social a:hover,
  .brand:hover .brand-img,
  .carousel__btn:hover:not(:disabled) { transform: none; }

  .btn:hover { box-shadow: none; }
  .card:hover { box-shadow: none; border-color: var(--line-light); }
  .section--dark .card:hover,
  .section--deep .card:hover { background: rgba(232, 239, 226, .04); box-shadow: none; }
  .card:hover::before { transform: scaleY(0); }
  .accordion__btn:hover { padding-left: 0; color: inherit; }
  .arrow-link:hover svg { transform: none; }
  .btn::after { display: none; }          /* the sheen needs a real hover */

  /* Press feedback, which is what a phone actually wants. */
  .btn:active { transform: scale(.975); }
  .card:active { border-color: rgba(126, 177, 10, .5); }
  .contact-card:active { border-color: var(--accent-dark-bg); background: rgba(232, 239, 226, .08); }
  .chip:active { border-color: var(--brand); }
  .accordion__btn:active { color: var(--accent-lite-bg); }
  .section--dark .accordion__btn:active,
  .section--deep .accordion__btn:active { color: var(--accent-dark-bg); }

  /* backdrop-filter is the main cause of scroll stutter on iOS. Drop it and
     use a solid panel instead — visually near-identical, far smoother. */
  .hero__card { backdrop-filter: none; background: rgba(6, 20, 9, .72); }
  .btn--ghost { backdrop-filter: none; }
  .nav-scrim { backdrop-filter: none; }
}

/* Guarantee a comfortable target size on touch, regardless of the design. */
@media (pointer: coarse) {
  .btn, .nav-link, .carousel__btn, .accordion__btn,
  .footer-col a, .contact-card, .footer-social a { min-height: 44px; }
  .btn { padding-block: 1rem; }
  .btn--sm { padding-block: .85rem; }
  .footer-col a { align-items: center; padding-block: .25rem; }
}

@media (max-width: 900px) {
  /* One column, predictably, rather than an awkward two at 700px. */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .split { gap: 2.25rem; }

  /* Reversed service rows go back to natural order on a phone: on one column,
     "direction: rtl" only mangles the reading order. */
  .split[style*="rtl"] { direction: ltr !important; }

  /* Long words (email addresses, URLs) must never widen the page. */
  h1, h2, h3, p, li, .contact-card__value { overflow-wrap: break-word; }

  .hero { min-height: 0; padding-block: calc(var(--header-h) + 2.5rem) 3.5rem; }
  .hero__card { padding: 1.35rem 1.25rem; }
  .statement { font-size: 1.35rem; }

  /* Full-width buttons stack cleanly and are easier to hit than inline ones. */
  .hero__cta .btn:not(.btn--plain),
  .cta-band__actions .btn:not(.btn--plain) { width: 100%; }
  .btn-row { gap: .7rem; }

  /* The floating WhatsApp bubble must not sit on top of the CTA buttons. */
  .cta-band { padding-bottom: 6.5rem; }
}

@media (max-width: 560px) {
  .carousel__slide { flex: 0 0 84vw; }
  .footer-bottom { flex-direction: column; }
  .h-ico { gap: .5em; }
}

/* --------------------------- 19. Reduced motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; transform: translateX(0); }
  .h-ico > svg * { stroke-dashoffset: 0; }
}

/* ------------------------------ 20. Print -------------------------------- */
@media print {
  .site-header, .wa-float, .cta-band, .carousel__controls, .nav { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
}