:root {
  --bg: #DFEDCF; /* verde pastel do mesmo matiz de --leaf; fundo de todas as seções */
  --forest: #123A23;
  --body: #465552;
  --leaf: #5AA824;
  --leaf-dark: #3F8B1F;
  --outline: #4D9B25;
  --font: "Outfit", "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Hero ----------
   A hero é um "palco" com a proporção da tela de origem de cada versão
   (desktop 1672×941, tablet 1086×1448, mobile 941×1672). Todas as medidas
   estão em pixels do canvas do hero-spec.json e viram tamanho real via --u
   (1 px de canvas = largura do palco ÷ largura do canvas). */
.hero {
  container-type: inline-size;
  position: relative;
  z-index: 1;
  /* corta só nas laterais: as folhas de baixo atravessam a emenda com os serviços */
  overflow-x: clip;
  background: var(--bg);
}
.hero-stage {
  --u: calc(100cqw / var(--cw));
  position: relative;
  width: 100%;
  aspect-ratio: var(--cw) / var(--ch);
}
.hero-stage > * { position: absolute; }
.px { /* atalho: left/top/width a partir de --x/--y/--w */
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}

.hero-green { inset: 0; width: 100%; height: 100%; display: none; }
.hero-green-base { fill: var(--bg); }
@media (orientation: landscape) { .hero-green.v-d { display: block; } }
@media (orientation: portrait) and (min-width: 641px) { .hero-green.v-t { display: block; } }
@media (orientation: portrait) and (max-width: 640px) { .hero-green.v-m { display: block; } }

.brand { --x: var(--brand-x); --y: var(--brand-y); --w: var(--brand-w); z-index: 2; }
.brand img { display: block; width: 100%; height: auto; }

/* Copy */
.hero-copy { left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.hero-copy > * { position: absolute; margin: 0; pointer-events: auto; }
.hero-location {
  --x: var(--copy-x); --y: var(--loc-y); --w: 900;
  font-size: calc(var(--loc-fs) * var(--u));
  font-weight: 500;
  letter-spacing: .15em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--body);
  white-space: nowrap;
}
.hero-title {
  --x: var(--copy-x); --y: var(--h1-y); --w: 1000;
  font-size: calc(var(--h1-fs) * var(--u));
  line-height: calc(var(--h1-lh) * var(--u));
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--forest);
  white-space: nowrap;
}
.hero-title span { display: block; }
.hero-desc {
  --x: var(--copy-x); --y: var(--desc-y); --w: 1000;
  font-size: calc(var(--desc-fs) * var(--u));
  line-height: calc(var(--desc-lh) * var(--u));
  font-weight: 400;
  color: var(--body);
  white-space: nowrap;
}
.hero-desc span { display: block; }

/* Foto do jardim + anéis */
.garden-photo {
  --x: var(--photo-x); --y: var(--photo-y); --w: var(--photo-w);
  height: calc(var(--photo-w) * var(--u));
  z-index: 4;
}
.garden-photo img { display: block; width: 100%; height: 100%; }
#garden-rings {
  left: calc(var(--ring-cx) * var(--u));
  top: calc(var(--ring-cy) * var(--u));
  width: 0; height: 0;
  z-index: 4;
  pointer-events: none;
}
.garden-ring {
  position: absolute;
  left: calc(var(--r) * var(--u) * -1);
  top: calc(var(--r) * var(--u) * -1);
  width: calc(var(--r) * var(--u) * 2);
  height: calc(var(--r) * var(--u) * 2);
  border: max(1px, calc(2 * var(--u))) solid #fff;
  border-radius: 50%;
  opacity: .82;
}
.ring-1 { --r: var(--r1); }
.ring-2 { --r: var(--r2); opacity: .68; }
.ring-3 { --r: var(--r3); opacity: .45; }

/* Folhas: um só recorte (img/hero/leaf.webp, tirado de floating-leaves.webp)
   repetido nas posições da referência. --lx/--ly = centro, --lw = largura,
   --rot = giro, --blur = desfoque de profundidade, tudo em px de canvas. */
.leaves { inset: 0; z-index: 5; pointer-events: none; }
.leaf {
  position: absolute;
  left: calc((var(--lx) - var(--lw) / 2) * var(--u));
  top: calc((var(--ly) - var(--lw) * .313) * var(--u));
  width: calc(var(--lw) * var(--u));
  rotate: var(--rot);
  filter: blur(calc(var(--blur, 0) * var(--u))) drop-shadow(0 calc(10 * var(--u)) calc(12 * var(--u)) rgb(18 58 35 / .16));
}
.leaf { display: none; }

/* Menu */
#menu-toggle {
  --x: var(--menu-x); --y: var(--menu-y); --w: var(--menu-w);
  height: calc(var(--menu-h) * var(--u));
  z-index: 7;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: calc(6 * var(--u));
}
#menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: calc(8 * var(--u)); }
.menu-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(var(--menu-stroke) * var(--u));
  top: calc(50% - var(--menu-stroke) * var(--u) / 2);
  border-radius: 99px;
  background: #fff;
  transition: transform .25s ease, opacity .2s ease;
}
.line-1 { transform: translateY(calc(var(--menu-gap) * var(--u) * -1)); }
.line-3 { transform: translateY(calc(var(--menu-gap) * var(--u))); }
#menu-toggle[aria-expanded="true"] .line-1 { transform: rotate(45deg); }
#menu-toggle[aria-expanded="true"] .line-2 { opacity: 0; }
#menu-toggle[aria-expanded="true"] .line-3 { transform: rotate(-45deg); }

.site-menu {
  right: calc((var(--cw) - var(--menu-x) - var(--menu-w)) * var(--u));
  top: calc((var(--menu-y) + var(--menu-h) + 22) * var(--u));
  z-index: 8;
  min-width: 220px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgb(18 58 35 / .22);
  transform-origin: top right;
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.site-menu[hidden] { display: block; visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.98); }
.site-menu:not([hidden]) { transition-delay: 0s; }
.site-menu ul { list-style: none; margin: 0; padding: 0; }
.site-menu a {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--forest);
  font-weight: 500;
  font-size: 17px;
  text-decoration: none;
}
.site-menu a:hover, .site-menu a:focus-visible { background: #EEF5E6; outline: none; }

/* CTAs */
.cta {
  --w: var(--cta-w);
  height: calc(var(--h) * var(--u));
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--u));
  border-radius: 999px;
  font-size: calc(var(--fs) * var(--u));
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.cta:hover { filter: brightness(1.07); transform: scale(1.015); }
.cta:active { transform: scale(.985); }
.cta:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
#cta-book-visit {
  --x: var(--cta-x); --y: var(--cta1-y); --h: var(--cta1-h); --fs: var(--cta1-fs);
  background: linear-gradient(180deg, #62AE2A 0%, var(--leaf) 45%, var(--leaf-dark) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgb(63 139 31 / .28);
}
#cta-book-visit svg { width: 1em; height: 1em; flex: none; }
#cta-see-work {
  --x: var(--cta-x); --y: var(--cta2-y); --h: var(--cta2-h); --fs: var(--cta2-fs);
  border: max(1px, calc(2 * var(--u))) solid var(--outline);
  background: var(--bg);
  color: var(--forest);
  font-weight: 500;
}

/* ---------- As três versões ---------- */

/* Desktop — também qualquer tela deitada */
.hero-stage {
  --cw: 1672; --ch: 941;
  --brand-x: 205; --brand-y: 96; --brand-w: 335;
  --copy-x: 197;
  --loc-y: 266;  --loc-fs: 21.3;
  --h1-y: 312;   --h1-fs: 71.6;  --h1-lh: 71;
  --desc-y: 474; --desc-fs: 34.9; --desc-lh: 42;
  --photo-x: 896; --photo-y: 148; --photo-w: 648;
  --ring-cx: 1220; --ring-cy: 472; --r1: 316; --r2: 330; --r3: 345;
  --menu-x: 1518; --menu-y: 111; --menu-w: 56; --menu-h: 46; --menu-stroke: 3.4; --menu-gap: 14.7;
  --cta-x: 197; --cta-w: 516;
  --cta1-y: 624; --cta1-h: 77; --cta1-fs: 31;
  --cta2-y: 713; --cta2-h: 72; --cta2-fs: 29.5;
}

/* Tablet / iPad em pé */
@media (orientation: portrait) and (min-width: 641px) {
  .hero-stage {
    --cw: 1086; --ch: 1448;
    --brand-x: 150; --brand-y: 55; --brand-w: 350;
    --copy-x: 155;
    --loc-y: 207;  --loc-fs: 24.8;
    --h1-y: 247;   --h1-fs: 83;  --h1-lh: 80;
    --desc-y: 437; --desc-fs: 43; --desc-lh: 47;
    --photo-x: 212; --photo-y: 580; --photo-w: 664;
    --ring-cx: 544; --ring-cy: 912; --r1: 313; --r2: 330; --r3: 348;
    --menu-x: 947; --menu-y: 65; --menu-w: 67; --menu-h: 58; --menu-stroke: 5; --menu-gap: 18.6;
    --cta-x: 294; --cta-w: 499;
    --cta1-y: 1249; --cta1-h: 82; --cta1-fs: 33;
    --cta2-y: 1340; --cta2-h: 76; --cta2-fs: 30.8;
  }
}

/* Celular em pé */
@media (orientation: portrait) and (max-width: 640px) {
  .hero-stage {
    --cw: 941; --ch: 1672;
    --brand-x: 92; --brand-y: 72; --brand-w: 378;
    --copy-x: 100;
    --loc-y: 256;  --loc-fs: 26;
    --h1-y: 306;   --h1-fs: 81;  --h1-lh: 80;
    --desc-y: 495; --desc-fs: 42.6; --desc-lh: 48;
    --photo-x: 98; --photo-y: 632; --photo-w: 756;
    --ring-cx: 476; --ring-cy: 1010; --r1: 355; --r2: 371; --r3: 388;
    --menu-x: 818; --menu-y: 91; --menu-w: 66; --menu-h: 55; --menu-stroke: 5; --menu-gap: 17.6;
    --cta-x: 176; --cta-w: 589;
    --cta1-y: 1410; --cta1-h: 96; --cta1-fs: 39.5;
    --cta2-y: 1518; --cta2-h: 92; --cta2-fs: 36.5;
  }
}

/* Folhas por versão (as classes .d .t .m escolhem em qual palco cada uma aparece) */
@media (orientation: landscape) { .leaf.d { display: block; } }
@media (orientation: portrait) and (min-width: 641px) { .leaf.t { display: block; } }
@media (orientation: portrait) and (max-width: 640px) { .leaf.m { display: block; } }

/* ---------- Serviços ----------
   Mesmo esquema da hero: palco com a proporção da tela de origem do kit
   silverhand-servicos-elementos e medidas em px de canvas × --u. */
.services {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
/* Desktop: a hero sobe por cima dos primeiros 60 px (de canvas) da seção,
   que são só creme vazio, para encurtar o vão entre as duas. */
@media (orientation: landscape) {
  .services { margin-top: calc(-60 * 100vw / 1672); }
}
.svc-stage {
  --u: calc(100cqw / var(--cw));
  position: relative;
  width: 100%;
  aspect-ratio: var(--cw) / var(--ch);
}
.svc-stage > * { position: absolute; }

.svc-eyebrow {
  --x: var(--copy-x); --y: var(--eb-y); --w: 800;
  margin: 0;
  font-size: calc(var(--eb-fs) * var(--u));
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  color: #56615B;
  text-transform: uppercase;
  z-index: 2;
}
.svc-title {
  --x: var(--copy-x); --y: var(--h2-y); --w: 1300;
  margin: 0;
  font-size: calc(var(--h2-fs) * var(--u));
  line-height: calc(var(--h2-lh) * var(--u));
  font-weight: 800;
  letter-spacing: -.02em;
  color: #103A23;
  white-space: nowrap;
  z-index: 2;
}

.svc-card {
  height: calc(var(--h) * var(--u));
  z-index: 3;
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--radius) * var(--u));
  overflow: hidden;
  background: #fff;
  color: #103A23;
  text-decoration: none;
  box-shadow: 0 calc(12 * var(--u)) calc(34 * var(--u)) rgb(16 58 35 / .08), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgb(16 58 35 / .05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.svc-card img {
  display: block;
  width: 100%;
  height: calc(var(--ph) * var(--u));
  object-fit: cover;
  transition: scale .5s ease;
}
.svc-card-foot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--pad-r) * var(--u)) 0 calc(var(--pad-l) * var(--u));
}
.svc-card-title {
  font-size: calc(var(--card-fs) * var(--u));
  font-weight: 700;
  letter-spacing: -.01em;
}
.svc-arrow {
  flex: none;
  width: calc(var(--ar) * 2 * var(--u));
  height: calc(var(--ar) * 2 * var(--u));
  border-radius: 50%;
  border: max(1.5px, calc(2.8 * var(--u))) solid #4D9A24;
  display: grid;
  place-items: center;
  color: #4D9A24;
  background: #fff;
  transition: background-color .18s ease, color .18s ease, scale .18s ease;
}
.svc-arrow svg { width: 50%; height: 50%; }
.svc-card:hover, .svc-card:focus-visible {
  transform: translateY(calc(-4 * var(--u)));
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgb(16 58 35 / .14), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgb(16 58 35 / .05);
}
.svc-card:hover img, .svc-card:focus-visible img { scale: 1.03; }
.svc-card:hover .svc-arrow, .svc-card:focus-visible .svc-arrow { background: #4D9A24; color: #fff; scale: 1.06; }
.svc-card:active { transform: scale(.985); }
.svc-card:focus-visible { outline: 3px solid #103A23; outline-offset: 3px; }

/* Desktop — 2 cartões em cima, 3 embaixo */
.svc-stage {
  --cw: 1672; --ch: 941;
  --copy-x: 128;
  --eb-y: 112; --eb-fs: 22;
  --h2-y: 138; --h2-fs: 63.7; --h2-lh: 72;
  --radius: 20; --pad-l: 35; --pad-r: 31; --card-fs: 34.8; --ar: 25;
}
#service-lawn-care-mowing { --x: 124; --y: 231; --w: 704; --h: 300; --ph: 211; }
#service-landscaping { --x: 846; --y: 231; --w: 707; --h: 300; --ph: 211; }
#service-power-washing { --x: 124; --y: 550; --w: 466; --h: 300; --ph: 212; --ar: 24; }
#service-car-washing { --x: 608; --y: 550; --w: 456; --h: 300; --ph: 212; --ar: 24; }
#service-home-cleaning { --x: 1080; --y: 550; --w: 473; --h: 300; --ph: 212; --ar: 24; }
.svc-title span + span::before { content: " "; }

/* Tablet em pé — 2 + 2 + Home Cleaning centralizado */
@media (orientation: portrait) and (min-width: 641px) {
  .svc-stage {
    --cw: 1086; --ch: 1448;
    --copy-x: 152;
    --eb-y: 114; --eb-fs: 27.1;
    --h2-y: 154; --h2-fs: 74.7; --h2-lh: 74;
    --radius: 18; --pad-l: 32; --pad-r: 26; --card-fs: 36; --ar: 31;
  }
  #service-lawn-care-mowing { --x: 41; --y: 335; --w: 488; --h: 335; --ph: 247; }
  #service-landscaping { --x: 557; --y: 335; --w: 489; --h: 335; --ph: 247; }
  #service-power-washing { --x: 41; --y: 698; --w: 488; --h: 340; --ph: 252; --ar: 31; }
  #service-car-washing { --x: 557; --y: 698; --w: 489; --h: 340; --ph: 252; --ar: 31; }
  #service-home-cleaning { --x: 218; --y: 1064; --w: 650; --h: 307; --ph: 214; --ar: 31; }
}

/* Celular em pé — uma coluna */
@media (orientation: portrait) and (max-width: 640px) {
  .svc-stage {
    --cw: 941; --ch: 1672;
    --copy-x: 155;
    --eb-y: 79; --eb-fs: 22.9;
    --h2-y: 112; --h2-fs: 58.6; --h2-lh: 60;
    --radius: 18; --pad-l: 36; --pad-r: 29; --card-fs: 34.3; --ar: 28;
  }
  #service-lawn-care-mowing { --x: 130; --y: 258; --w: 682; --h: 266; --ph: 184; }
  #service-landscaping { --x: 130; --y: 542; --w: 682; --h: 275; --ph: 194; }
  #service-power-washing { --x: 130; --y: 834; --w: 682; --h: 274; --ph: 190; --ar: 28; }
  #service-car-washing { --x: 130; --y: 1125; --w: 682; --h: 260; --ph: 180; --ar: 28; }
  #service-home-cleaning { --x: 130; --y: 1402; --w: 682; --h: 243; --ph: 162; --ar: 28; }
}
@media (orientation: portrait) {
  .svc-title span { display: block; }
  .svc-title span + span::before { content: none; }
}

/* ---------- Lawn Care & Mowing ----------
   Kit silverhand-mowing-components. Mesmo esquema de palco; a textura creme
   e a camada de folhas do kit ficam de fora (fundo é o verde do site). */
.mowing {
  container-type: inline-size;
  position: relative;
  overflow-x: clip;
  background: var(--bg);
}
.mow-stage {
  --u: calc(100cqw / var(--cw));
  position: relative;
  width: 100%;
  aspect-ratio: var(--cw) / var(--ch);
}
.mow-stage > * { position: absolute; margin: 0; }


.mow-eyebrow {
  --x: var(--tx-x); --y: var(--eb-y); --w: var(--tx-w);
  font-size: calc(var(--eb-fs) * var(--u));
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  color: #4E6B5E;
}
.mow-title {
  --x: var(--tx-x); --y: var(--h-y); --w: var(--tx-w);
  font-size: calc(var(--h-fs) * var(--u));
  line-height: calc(var(--h-lh) * var(--u));
  font-weight: 700;
  letter-spacing: -.015em;
  color: #082E20;
}
.mow-body {
  --x: var(--tx-x); --y: var(--b-y); --w: var(--tx-w);
  font-size: calc(var(--b-fs) * var(--u));
  line-height: calc(var(--b-lh) * var(--u));
  color: #4F5B57; /* o #737A7A do kit fica fraco sobre o verde */
}
.mow-title span, .mow-body span { display: block; }
.mow-leaves { inset: 0; pointer-events: none; }
.mow-blob { inset: 0; width: 100%; height: 100%; display: none; overflow: visible; filter: drop-shadow(0 calc(16 * var(--u)) calc(30 * var(--u)) rgb(8 46 32 / .16)); }
@media (orientation: landscape) { .mow-blob.v-d { display: block; } }
@media (orientation: portrait) and (min-width: 641px) { .mow-blob.v-t { display: block; } }
@media (orientation: portrait) and (max-width: 640px) { .mow-blob.v-m { display: block; } }

.mow-cta {
  --x: var(--c-x); --y: var(--c-y); --w: var(--c-w);
  height: calc(var(--c-h) * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--c-fs) * .9 * var(--u));
  border-radius: 999px;
  background: linear-gradient(180deg, #4FAE24, #2C7518);
  color: #fff;
  font-size: calc(var(--c-fs) * var(--u));
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 calc(5 * var(--u)) calc(12 * var(--u)) rgb(40 93 32 / .25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mow-cta svg { width: 1em; height: 1em; flex: none; transition: transform .18s ease; }
.mow-cta:hover { transform: translateY(-3px); box-shadow: 0 calc(8 * var(--u)) calc(16 * var(--u)) rgb(40 93 32 / .32); }
.mow-cta:hover svg { transform: translateX(calc(7 * var(--u))); }
.mow-cta:active { transform: translateY(0) scale(.985); }
.mow-cta:focus-visible { outline: 3px solid #123E24; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .mow-cta, .mow-cta svg { transition: none; } }

/* Desktop — foto à esquerda, texto à direita */
.mow-stage {
  --cw: 1672; --ch: 941;
 
  --tx-x: 1004; --tx-w: 640;
  --eb-y: 224; --eb-fs: 23.9;
  --h-y: 266; --h-fs: 75.2; --h-lh: 69;
  --b-y: 500; --b-fs: 35.3; --b-lh: 39.5;
  --c-x: 1004; --c-y: 692; --c-w: 488; --c-h: 92; --c-fs: 32.6;
}

/* Tablet em pé — foto em cima, texto centralizado embaixo (o kit não trouxe a
   referência desta versão: posições da foto e do botão vêm do JSON) */
@media (orientation: portrait) and (min-width: 641px) {
  .mow-stage {
    --cw: 1086; --ch: 1448;
   
    --tx-x: 93; --tx-w: 900;
    --eb-y: 912; --eb-fs: 26;
    --h-y: 950; --h-fs: 76; --h-lh: 78;
    --b-y: 1128; --b-fs: 35; --b-lh: 44;
    --c-x: 263; --c-y: 1300; --c-w: 560; --c-h: 104; --c-fs: 33.6;
  }
  .mow-eyebrow, .mow-title, .mow-body { text-align: center; }
  .mow-title span, .mow-body span { display: inline; }
  .mow-title, .mow-body { text-wrap: balance; }
}

/* Celular em pé — texto e botão em cima, foto embaixo */
@media (orientation: portrait) and (max-width: 640px) {
  .mow-stage {
    --cw: 941; --ch: 1672;
   
    --tx-x: 110; --tx-w: 780;
    --eb-y: 120; --eb-fs: 30.4;
    --h-y: 171; --h-fs: 96.2; --h-lh: 86;
    --b-y: 447; --b-fs: 42; --b-lh: 47;
    --c-x: 109; --c-y: 668; --c-w: 724; --c-h: 114; --c-fs: 42;
  }
}

/* ---------- Seasonal Care ----------
   Kit silverhand-estacoes-elementos. Mesmo esquema de palco; textura creme
   do kit fora (fundo verde do site), folhas com o .leaf da hero. */
.seasons {
  container-type: inline-size;
  position: relative;
  overflow-x: clip;
  background: var(--bg);
}
.sea-stage {
  --u: calc(100cqw / var(--cw));
  position: relative;
  width: 100%;
  aspect-ratio: var(--cw) / var(--ch);
}
.sea-stage > * { position: absolute; margin: 0; }
.sea-leaves { inset: 0; pointer-events: none; }
.sea-green { inset: 0; width: 100%; height: 100%; display: none; }
@media (orientation: landscape) { .sea-green.v-d { display: block; } }
@media (orientation: portrait) and (min-width: 641px) { .sea-green.v-t { display: block; } }
@media (orientation: portrait) and (max-width: 640px) { .sea-green.v-m { display: block; } }

.sea-eyebrow {
  --x: var(--tx-x); --y: var(--eb-y); --w: 900;
  font-size: calc(var(--eb-fs) * var(--u));
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  color: #3F6B4F;
}
.sea-title {
  --x: var(--tx-x); --y: var(--h-y); --w: 1400;
  font-size: calc(var(--h-fs) * var(--u));
  line-height: calc(var(--h-lh) * var(--u));
  font-weight: 700;
  letter-spacing: -.02em;
  color: #082E20;
  white-space: nowrap;
}
.sea-title span { display: block; }

.sea-card {
  --x: var(--c-x); --y: var(--c-y); --w: var(--c-w);
  height: calc(var(--c-h) * var(--u));
  display: flex;
  flex-direction: var(--dir, row);
  border-radius: calc(var(--rad) * var(--u));
  overflow: hidden;
  background: #fff;
  color: #082E20;
  text-decoration: none;
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgb(8 46 32 / .07), 0 calc(2 * var(--u)) calc(5 * var(--u)) rgb(8 46 32 / .05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sea-card picture { flex: none; overflow: hidden; width: calc(var(--pw) * var(--u)); height: calc(var(--ph) * var(--u)); }
.sea-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease; }
.sea-card-body {
  position: relative;
  flex: 1;
  padding: calc(var(--bp-t) * var(--u)) calc(var(--bp-r) * var(--u)) 0 calc(var(--bp-l) * var(--u));
}
.sea-card-title {
  display: block;
  font-size: calc(var(--t-fs) * var(--u));
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
}
.sea-card-desc {
  display: block;
  margin-top: calc(var(--gap) * var(--u));
  font-size: calc(var(--d-fs) * var(--u));
  line-height: calc(var(--d-lh) * var(--u));
  color: #5A6462;
}
.sea-card-desc span { display: block; white-space: nowrap; }
.sea-arrow {
  position: absolute;
  right: calc((var(--ar-r) - var(--ar)) * var(--u));
  top: calc((var(--ar-t) - var(--ar)) * var(--u));
  width: calc(var(--ar) * 2 * var(--u));
  height: calc(var(--ar) * 2 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: max(1.5px, calc(2.4 * var(--u))) solid #4D8E31;
  background: #fff;
  color: #082E20;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, scale .18s ease;
}
.sea-arrow svg { width: 50%; height: 50%; transition: translate .18s ease; }
.sea-card:hover, .sea-card:focus-visible {
  transform: translateY(calc(-4 * var(--u)));
  box-shadow: 0 calc(16 * var(--u)) calc(36 * var(--u)) rgb(8 46 32 / .13), 0 calc(2 * var(--u)) calc(5 * var(--u)) rgb(8 46 32 / .05);
}
.sea-card:hover img, .sea-card:focus-visible img { scale: 1.04; }
.sea-card:hover .sea-arrow, .sea-card:focus-visible .sea-arrow { background: #4D9D28; border-color: #4D9D28; color: #fff; scale: 1.06; }
.sea-card:hover .sea-arrow svg, .sea-card:focus-visible .sea-arrow svg { translate: 8% 0; }
.sea-card:active { transform: scale(.985); }
.sea-card:focus-visible { outline: 3px solid #082E20; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sea-card, .sea-card img, .sea-arrow, .sea-arrow svg { transition: none; } }

/* Desktop — grade 2×2, foto à esquerda de cada cartão */
.sea-stage {
  --cw: 1672; --ch: 941;
  --tx-x: 118; --eb-y: 147; --eb-fs: 26.3;
  --h-y: 187; --h-fs: 73; --h-lh: 62;
  --c-w: 728; --c-h: 198; --rad: 18;
  --pw: 324; --ph: 198;
  --bp-t: 42; --bp-l: 32; --bp-r: 20;
  --t-fs: 33; --gap: 9; --d-fs: 27.5; --d-lh: 38;
  --ar: 25; --ar-r: 50; --ar-t: 68;
}
.sea-title span:not(:last-child) { display: inline; }
#season-spring { --c-x: 94;  --c-y: 346; }
#season-summer { --c-x: 847; --c-y: 346; --c-w: 733; --pw: 328; }
#season-fall   { --c-x: 94;  --c-y: 569; }
#season-winter { --c-x: 847; --c-y: 569; --c-w: 733; --pw: 328; }

/* Tablet em pé — grade 2×2, foto em cima de cada cartão */
@media (orientation: portrait) and (min-width: 641px) {
  .sea-stage {
    --cw: 1086; --ch: 1448;
    --tx-x: 97; --eb-y: 189; --eb-fs: 29.8;
    --h-y: 233; --h-fs: 89.9; --h-lh: 85;
    --c-w: 446; --c-h: 402; --rad: 18; --dir: column;
    --pw: 446; --ph: 234;
    --bp-t: 21; --bp-l: 31; --bp-r: 20;
    --t-fs: 38; --gap: 4; --d-fs: 28.1; --d-lh: 38;
    --ar: 27; --ar-r: 57; --ar-t: 55;
  }
  .sea-title span:not(:last-child) { display: block; }
  #season-spring { --c-x: 82;  --c-y: 531; }
  #season-summer { --c-x: 559; --c-y: 531; --c-w: 446; --pw: 446; }
  #season-fall   { --c-x: 82;  --c-y: 959; }
  #season-winter { --c-x: 559; --c-y: 959; --c-w: 446; --pw: 446; }
}

/* Celular em pé — uma coluna, foto à esquerda */
@media (orientation: portrait) and (max-width: 640px) {
  .sea-stage {
    --cw: 941; --ch: 1672;
    --tx-x: 61; --eb-y: 188; --eb-fs: 32.6;
    --h-y: 235; --h-fs: 81.2; --h-lh: 74;
    --c-w: 870; --c-h: 240; --rad: 20;
    --pw: 351; --ph: 240;
    --bp-t: 50; --bp-l: 36; --bp-r: 20;
    --t-fs: 43.4; --gap: 8; --d-fs: 34.3; --d-lh: 46;
    --ar: 33; --ar-r: 57; --ar-t: 77;
  }
  .sea-title span:not(:last-child) { display: block; }
  #season-spring { --c-x: 38; --c-y: 501; }
  #season-summer { --c-x: 38; --c-y: 767;  --c-w: 870; --pw: 351; }
  #season-fall   { --c-x: 38; --c-y: 1033; }
  #season-winter { --c-x: 38; --c-y: 1298; --c-w: 870; --pw: 351; }
}

/* ---------- Final: área atendida · FAQ · agendamento · rodapé ----------
   Kit silverhand-secao-final-elementos, montado como palco (mesmo esquema
   das outras seções) com as posições medidas em previews/*.webp. As faixas
   claras viram o verde do site; o rodapé é o verde-floresta do kit. */
.final { container-type: inline-size; position: relative; overflow-x: clip; background: var(--bg); color: #0B2118; }
.fin-stage { --u: calc(100cqw / var(--cw)); position: relative; width: 100%; aspect-ratio: var(--cw) / var(--ch); }
.fin-stage > * { position: absolute; margin: 0; }
.fin-bg { inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.fin-leaves { inset: 0; pointer-events: none; }
.fin-blur { position: absolute; left: calc((var(--lx) - var(--lw) / 2) * var(--u)); top: calc((var(--ly) - var(--lw) * .5) * var(--u)); width: calc(var(--lw) * var(--u)); rotate: var(--rot); filter: blur(calc(var(--b) * var(--u))); opacity: .75; display: none; }

.fin-t { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); font-size: calc(var(--fs) * var(--u)); line-height: calc(var(--lh) * var(--u)); white-space: nowrap; }
.fin-t span { display: block; }
.fin-t .fin-m-only { display: none; }
.fin-eb { scroll-margin-top: 40px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #1F4A33; }
.fin-hd { font-weight: 700; letter-spacing: -.025em; color: #0B2118; }
.fin-p { color: #4A5552; }

.fin-map { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); display: block; border-radius: calc(16 * var(--u)); }
.fin-map img { display: block; width: 100%; height: auto; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
.fin-map:focus-visible { outline: 3px solid #082E20; outline-offset: 4px; }

.fin-q { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); display: grid; gap: calc(var(--gap) * var(--u)); z-index: 3; }
.fin-q details { position: relative; }
.fin-q summary {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--h) * var(--u));
  padding: 0 calc(var(--pl) * var(--u));
  border: max(1px, calc(1.6 * var(--u))) solid #D3DECB;
  border-radius: calc(var(--r) * var(--u));
  background: rgb(255 255 255 / .94);
  font-size: calc(var(--fs) * var(--u));
  color: #0B2118;
  cursor: pointer; list-style: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.fin-q summary::-webkit-details-marker { display: none; }
.fin-q summary:hover { border-color: #A9CF84; }
.fin-q summary:focus-visible { outline: 3px solid #082E20; outline-offset: 2px; }
.fin-q summary svg { width: calc(var(--fs) * 1.25 * var(--u)); height: calc(var(--fs) * 1.25 * var(--u)); color: #17652B; flex: none; transition: rotate .2s ease; }
.fin-q details[open] summary svg { rotate: 180deg; }
/* a resposta abre como um cartão sobre as linhas de baixo: o palco não muda de altura */
.fin-q details p {
  position: absolute; left: 0; right: 0; top: calc(100% + 6 * var(--u)); z-index: 4;
  margin: 0; padding: calc(14 * var(--u)) calc(var(--pl) * var(--u));
  border-radius: calc(var(--r) * var(--u));
  background: #fff;
  box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgb(8 46 32 / .16);
  font-size: calc(var(--fs) * .9 * var(--u)); line-height: 1.45; color: #4A5552;
}

.fin-box { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.fin-form { display: contents; }
.fin-form > * { position: absolute; margin: 0; }
.fin-logo-link { inset: 0; pointer-events: none; }
.fin-logo { position: absolute; pointer-events: auto; }
.fin-field {
  padding: 0 calc(var(--fld-pl) * var(--u));
  border: max(1px, calc(1.6 * var(--u))) solid #D3DECB;
  border-radius: calc(var(--fld-r) * var(--u));
  background: rgb(255 255 255 / .9);
  font: inherit; font-size: calc(var(--fld-fs) * var(--u)); color: #0B2118;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.fin-field::placeholder { color: #4A5552; }
select.fin-field { appearance: none; color: #4A5552; cursor: pointer; }
select.fin-field:valid { color: #0B2118; }
.fin-sel-ico { position: absolute; width: calc(var(--fld-fs) * 1.25 * var(--u)); height: calc(var(--fld-fs) * 1.25 * var(--u)); color: #17652B; pointer-events: none;
  left: calc((var(--x) + var(--w) - var(--fld-pl) * 1.3) * var(--u)); top: calc((var(--y) + var(--h) / 2) * var(--u)); translate: -50% -50%; }
.fin-field:hover { border-color: #A9CF84; }
.fin-field:focus-visible { outline: none; border-color: #4A991D; box-shadow: 0 0 0 calc(3 * var(--u)) rgb(142 191 83 / .45); }
.fin-field[aria-invalid="true"] { border-color: #B3412E; }
.fin-btn {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--fs) * .7 * var(--u));
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #59A91D, #2F7A16);
  color: #fff; font: inherit; font-size: calc(var(--fs) * var(--u)); font-weight: 500;
  cursor: pointer;
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgb(49 124 23 / .3);
  transition: transform .18s ease, filter .18s ease;
}
.fin-btn svg { width: 1.1em; height: 1.1em; transition: transform .18s ease; }
.fin-btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.fin-btn:hover svg { transform: translateX(calc(5 * var(--u))); }
.fin-btn:active { transform: scale(.985); }
.fin-btn:focus-visible { outline: 3px solid #082E20; outline-offset: 3px; }
.fin-status { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); font-size: calc(var(--fs) * var(--u)); color: #17652B; z-index: 3; }
.fin-status.err { color: #B3412E; }

.fin-photo { display: none; overflow: visible; pointer-events: none; z-index: 2; }

.fin-foot { inset: 0; pointer-events: none; color: #E3EEDB; z-index: 1; }
.fin-foot > * { position: absolute; margin: 0; pointer-events: auto; }
.fin-logo { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: auto; }
.fin-fBrand { font-weight: 600; letter-spacing: .02em; color: #fff; text-transform: uppercase; }
.fin-fLines { color: #E3EEDB; }
.fin-fLines span:first-child { text-transform: uppercase; }
.fin-nav { inset: 0; pointer-events: none; }
.fin-nav a { position: absolute; left: calc(var(--cx) * var(--u)); top: calc(var(--y) * var(--u)); translate: -50% 0; pointer-events: auto;
  font-size: calc(var(--fs) * var(--u)); line-height: 1.2; color: #E3EEDB; text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.fin-nav a:hover { color: #B7E36A; }
.fin-rule { left: calc(var(--x0) * var(--u)); top: calc(var(--y) * var(--u)); width: calc((var(--x1) - var(--x0)) * var(--u)); height: 0; border-top: 1px solid rgb(227 238 219 / calc(.28 * var(--on))); }
.fin-legal { left: calc(var(--x0) * var(--u)); top: calc(var(--y) * var(--u)); width: calc((var(--x1) - var(--x0)) * var(--u)); display: flex; justify-content: space-between; font-size: calc(var(--fs) * var(--u)); line-height: 1.2; white-space: nowrap; }
.fin-legal p { margin: 0; }
.fin-legal ul { display: flex; margin: 0; padding: 0; list-style: none; }
.fin-legal li + li::before { content: "|"; margin: 0 1.1em; opacity: .5; }
.fin-legal a { color: #E3EEDB; text-decoration: none; }
.fin-legal a:hover { color: #B7E36A; }
.fin-nav a:focus-visible, .fin-legal a:focus-visible, .fin-logo-link:focus-visible { outline: 2px solid #B7E36A; outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .fin-q summary, .fin-q summary svg, .fin-field, .fin-btn, .fin-btn svg { transition: none; } }

/* Desktop */
@media (orientation: landscape) {
  .fin-stage { --cw: 1672; --ch: 1111; --fld-fs: 16.6; --fld-pl: 21; --fld-r: 18; }
  .fin-stage .fin-aEb { --x: 279; --y: 47.4; --fs: 16.1; --lh: 19.3; }
  .fin-stage .fin-aH { --x: 278; --y: 69; --fs: 51.3; --lh: 50; }
  .fin-stage .fin-aP { --x: 281; --y: 128.3; --fs: 24.2; --lh: 29.5; }
  .fin-stage .fin-qEb { --x: 279; --y: 351.9; --fs: 16.6; --lh: 19.9; }
  .fin-stage .fin-qH { --x: 278; --y: 373.8; --fs: 49.1; --lh: 50; }
  .fin-stage .fin-bEb { --x: 197; --y: 594.8; --fs: 14.6; --lh: 17.5; }
  .fin-stage .fin-bH { --x: 196; --y: 616.4; --fs: 42.1; --lh: 46; }
  .fin-stage .fin-bP { --x: 197; --y: 662.2; --fs: 21; --lh: 26; }
  .fin-stage .fin-fBrand { --x: 182; --y: 990.6; --fs: 19; --lh: 22.8; }
  .fin-stage .fin-fLines { --x: 182; --y: 1013.4; --fs: 13.7; --lh: 17; }
  .fin-stage .fin-map { --x: 960; --y: 20; --w: 300; }
  .fin-stage .fin-q { --x: 706; --y: 318; --w: 694; --h: 44; --gap: 5; --fs: 19.2; --pl: 25; --r: 22; }
  .fin-stage .fin-name { --x: 197; --y: 704; --w: 297; --h: 37; }
  .fin-stage .fin-phone { --x: 502; --y: 704; --w: 307; --h: 37; }
  .fin-stage .fin-addr { --x: 197; --y: 747; --w: 612; --h: 37; }
  .fin-stage .fin-sel { --x: 197; --y: 791; --w: 612; --h: 37; }
  .fin-stage .fin-btn { --x: 197; --y: 840; --w: 612; --h: 50; --fs: 21.2; }
  .fin-stage .fin-status { --x: 197; --y: 896; --w: 612; --fs: 14.110000000000001; }
  .fin-stage .fin-logo { --x: 122; --y: 990; --w: 48; }
  .fin-stage .fin-nav a:nth-child(1) { --cx: 777; --y: 1009.9; --fs: 14.5; }
  .fin-stage .fin-nav a:nth-child(2) { --cx: 882; --y: 1009.9; --fs: 14.5; }
  .fin-stage .fin-nav a:nth-child(3) { --cx: 988; --y: 1009.9; --fs: 14.5; }
  .fin-stage .fin-nav a:nth-child(4) { --cx: 1097; --y: 1009.9; --fs: 14.5; }
  .fin-stage .fin-nav a:nth-child(5) { --cx: 1198; --y: 1009.9; --fs: 14.5; }
  .fin-stage .fin-nav a.fin-nav-cta { --x: 1387; --y: 998; --w: 146; --h: 48; --fs: 15.5; }
  .fin-stage .fin-rule1 { --y: 0; --x0: 0; --x1: 0; --on: 0; }
  .fin-stage .fin-rule2 { --y: 1070; --x0: 128; --x1: 1533; --on: 1; }
  .fin-stage .fin-legal { --y: 1080.9; --x0: 182; --x1: 1533; --fs: 13.5; }
  .fin-bg.v-d, .fin-photo.v-d, .fin-blur.d { display: block; }
  .fin-t .fin-a-sm { display: none; }
  .fin-nav a.fin-nav-cta {
    left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); translate: none;
    display: grid; place-items: center; border-radius: 999px; background: linear-gradient(180deg, #59A91D, #2F7A16); color: #fff; font-size: calc(var(--fs) * var(--u));
  }
  .fin-nav a.fin-nav-cta:hover { color: #fff; filter: brightness(1.08); }
}
/* Tablet em pé */
@media (orientation: portrait) and (min-width: 641px) {
  .fin-stage { --cw: 1086; --ch: 1678; --fld-fs: 18.8; --fld-pl: 20; --fld-r: 18; }
  .fin-stage .fin-aEb { --x: 183; --y: 70.4; --fs: 18.1; --lh: 21.7; }
  .fin-stage .fin-aH { --x: 184; --y: 102.8; --fs: 56; --lh: 57; }
  .fin-stage .fin-aP { --x: 184; --y: 223; --fs: 24; --lh: 28.3; }
  .fin-stage .fin-qEb { --x: 129; --y: 499.6; --fs: 16.9; --lh: 20.3; }
  .fin-stage .fin-qH { --x: 126; --y: 521; --fs: 54.1; --lh: 54; }
  .fin-stage .fin-bEb { --x: 56; --y: 855.7; --fs: 16.8; --lh: 20.2; }
  .fin-stage .fin-bH { --x: 55; --y: 881.9; --fs: 48.9; --lh: 52; }
  .fin-stage .fin-bP { --x: 57; --y: 937; --fs: 21.5; --lh: 26; }
  .fin-stage .fin-fBrand { --x: 228; --y: 1423.2; --fs: 23.5; --lh: 28.2; }
  .fin-stage .fin-fLines { --x: 228; --y: 1451.3; --fs: 17.4; --lh: 20.5; }
  .fin-stage .fin-map { --x: 575; --y: 66; --w: 335; }
  .fin-stage .fin-q { --x: 509; --y: 481; --w: 461; --h: 49; --gap: 9.8; --fs: 20; --pl: 25; --r: 20; }
  .fin-stage .fin-name { --x: 56; --y: 989; --w: 267; --h: 45; }
  .fin-stage .fin-phone { --x: 334; --y: 989; --w: 257; --h: 45; }
  .fin-stage .fin-addr { --x: 56; --y: 1045; --w: 535; --h: 46; }
  .fin-stage .fin-sel { --x: 56; --y: 1105; --w: 535; --h: 46; }
  .fin-stage .fin-btn { --x: 56; --y: 1170; --w: 537; --h: 64; --fs: 24.5; }
  .fin-stage .fin-status { --x: 56; --y: 1240; --w: 537; --fs: 15.98; }
  .fin-stage .fin-logo { --x: 152; --y: 1422; --w: 58; }
  .fin-stage .fin-nav a:nth-child(1) { --cx: 425; --y: 1539.5; --fs: 18; }
  .fin-stage .fin-nav a:nth-child(2) { --cx: 540; --y: 1539.5; --fs: 18; }
  .fin-stage .fin-nav a:nth-child(3) { --cx: 659; --y: 1539.5; --fs: 18; }
  .fin-stage .fin-nav a:nth-child(4) { --cx: 425; --y: 1573.5; --fs: 18; }
  .fin-stage .fin-nav a:nth-child(5) { --cx: 540; --y: 1573.5; --fs: 18; }
  .fin-stage .fin-nav a:nth-child(6) { --cx: 659; --y: 1573.5; --fs: 18; }
  .fin-stage .fin-rule1 { --y: 1524; --x0: 158; --x1: 928; --on: 1; }
  .fin-stage .fin-rule2 { --y: 1608; --x0: 158; --x1: 928; --on: 1; }
  .fin-stage .fin-legal { --y: 1624.6; --x0: 158; --x1: 928; --fs: 14.8; }
  .fin-bg.v-t, .fin-photo.v-t, .fin-blur.t { display: block; }
  .fin-t .fin-a-lg { display: none; }
}
/* Celular em pé */
@media (orientation: portrait) and (max-width: 640px) {
  .fin-stage { --cw: 941; --ch: 3540; --fld-fs: 38; --fld-pl: 32; --fld-r: 26; }
  .fin-stage .fin-aEb { --x: 60; --y: 82.8; --fs: 28; --lh: 33.6; }
  .fin-stage .fin-aH { --x: 58; --y: 128.4; --fs: 80; --lh: 84; }
  .fin-stage .fin-aP { --x: 60; --y: 310.9; --fs: 38; --lh: 54; }
  .fin-stage .fin-qEb { --x: 60; --y: 982.8; --fs: 28; --lh: 33.6; }
  .fin-stage .fin-qH { --x: 58; --y: 1026.9; --fs: 76; --lh: 80; }
  .fin-stage .fin-bEb { --x: 60; --y: 1752.8; --fs: 28; --lh: 33.6; }
  .fin-stage .fin-bH { --x: 58; --y: 1800.6; --fs: 66; --lh: 70; }
  .fin-stage .fin-bP { --x: 60; --y: 1894.9; --fs: 38; --lh: 52; }
  .fin-stage .fin-fBrand { --x: 150; --y: 2956.2; --fs: 40; --lh: 48; }
  .fin-stage .fin-fLines { --x: 150; --y: 3013.2; --fs: 32; --lh: 40; }
  .fin-stage .fin-map { --x: 220; --y: 545; --w: 500; }
  .fin-stage .fin-q { --x: 60; --y: 1140; --w: 821; --h: 100; --gap: 20; --fs: 36; --pl: 38; --r: 30; }
  .fin-stage .fin-name { --x: 60; --y: 2040; --w: 400; --h: 104; }
  .fin-stage .fin-phone { --x: 481; --y: 2040; --w: 400; --h: 104; }
  .fin-stage .fin-addr { --x: 60; --y: 2164; --w: 821; --h: 104; }
  .fin-stage .fin-sel { --x: 60; --y: 2288; --w: 821; --h: 104; }
  .fin-stage .fin-btn { --x: 60; --y: 2412; --w: 821; --h: 112; --fs: 40; }
  .fin-stage .fin-status { --x: 60; --y: 2530; --w: 821; --fs: 32.3; }
  .fin-stage .fin-logo { --x: 54; --y: 2950; --w: 80; }
  .fin-stage .fin-nav a:nth-child(1) { --cx: 200; --y: 3215.1; --fs: 36; }
  .fin-stage .fin-nav a:nth-child(2) { --cx: 470; --y: 3215.1; --fs: 36; }
  .fin-stage .fin-nav a:nth-child(3) { --cx: 740; --y: 3215.1; --fs: 36; }
  .fin-stage .fin-nav a:nth-child(4) { --cx: 200; --y: 3280.1; --fs: 36; }
  .fin-stage .fin-nav a:nth-child(5) { --cx: 470; --y: 3280.1; --fs: 36; }
  .fin-stage .fin-nav a:nth-child(6) { --cx: 740; --y: 3280.1; --fs: 36; }
  .fin-stage .fin-rule1 { --y: 3170; --x0: 60; --x1: 881; --on: 1; }
  .fin-stage .fin-rule2 { --y: 3365; --x0: 60; --x1: 881; --on: 1; }
  .fin-stage .fin-legal { --y: 3400.9; --x0: 60; --x1: 881; --fs: 30; }
  .fin-bg.v-m, .fin-photo.v-m, .fin-blur.m { display: block; }
  .fin-t .fin-m-only { display: block; }
  .fin-t .fin-m-hide { display: none; }
  .fin-legal { flex-direction: column; align-items: center; gap: calc(16 * var(--u)); }
  .fin-t .fin-a-lg { display: none; }
}

/* ---------- Our work · Why choose · How it works ----------
   Kit silverhand-secoes-combinadas-elementos: três blocos num palco só.
   Medidas geradas de uma tabela por versão; fundo verde do site e mancha
   verde da hero à esquerda (camada de folhas e textura do kit ficam de fora). */
.work {
  container-type: inline-size;
  position: relative;
  overflow-x: clip;
  background: var(--bg);
}
/* respiro entre os passos e a seção final (mesmo fundo) */
.work { padding-bottom: clamp(32px, 5vw, 90px); }
.cmb-stage {
  --u: calc(100cqw / var(--cw));
  position: relative;
  width: 100%;
  aspect-ratio: var(--cw) / var(--ch);
}
.cmb-stage > *, .cmb-stage .cmb-abs { position: absolute; margin: 0; }
.cmb-blob { inset: 0; width: 100%; height: 100%; display: none; overflow: visible; filter: drop-shadow(0 calc(14 * var(--u)) calc(26 * var(--u)) rgb(8 46 32 / .15)); }
@media (orientation: landscape) { .cmb-blob.v-d { display: block; } }
@media (orientation: portrait) and (min-width: 641px) { .cmb-blob.v-t { display: block; } }
@media (orientation: portrait) and (max-width: 640px) { .cmb-blob.v-m { display: block; } }
.cmb-list { inset: 0; list-style: none; padding: 0; pointer-events: none; }
.cmb-list > li > * { pointer-events: auto; }
.cmb-txt { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); font-size: calc(var(--fs) * var(--u)); }
.cmb-eb { line-height: 1; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #3F6B4F; white-space: nowrap; }
.cmb-hd { line-height: calc(var(--lh) * var(--u)); font-weight: 700; letter-spacing: -.02em; color: #082E20; white-space: nowrap; }
.cmb-hd span { display: block; }
.cmb-g-h span { display: inline; }
.cmb-wrap { width: calc(var(--w) * var(--u)); white-space: normal; }
.cmb-hd.cmb-b-h { white-space: nowrap; }
.cmb-b-body { line-height: calc(var(--lh) * var(--u)); color: #4F5B57; }

.cmb-box { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.cmb-photo { border-radius: calc(var(--ph-r) * var(--u)); overflow: hidden; box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgb(8 46 32 / .12); }
.cmb-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* os recortes do kit trazem o creme da arte nos cantos: zoom leve e raio maior os escondem */
.cmb-photo img { scale: 1.04; transition: scale .5s ease; }
.cmb-photo:hover img { scale: 1.09; }

.cmb-g-btn {
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--fs) * .6 * var(--u));
  border-radius: 999px;
  border: max(1.5px, calc(2 * var(--u))) solid #8CC45E;
  background: #fff;
  color: #2C5A27;
  font-size: calc(var(--fs) * var(--u));
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgb(64 111 44 / .16);
  transition: transform .18s ease, background-color .18s ease;
}
.cmb-g-btn svg { width: 1.05em; height: 1.05em; color: #4A9A26; transition: transform .18s ease; }
.cmb-g-btn:hover { background: #F1F8E6; transform: translateY(-2px); }
.cmb-g-btn:hover svg { transform: translateX(calc(5 * var(--u))); }
.cmb-g-btn:focus-visible { outline: 3px solid #0A3A25; outline-offset: 3px; }

.cmb-div { left: calc(var(--x0) * var(--u)); top: calc(var(--y) * var(--u)); width: calc((var(--x1) - var(--x0)) * var(--u)); height: 0; border-top: 1px solid rgb(74 154 38 / .28); }
.cmb-div svg {
  position: absolute;
  left: calc((var(--cx) - var(--x0) - 28) * var(--u)); top: calc(-13 * var(--u));
  width: calc(44 * var(--u)); height: calc(26 * var(--u));
  padding: 0 calc(6 * var(--u));
  background: var(--bg);
  box-sizing: content-box;
}

.cmb-item .cmb-disc, .cmb-step .cmb-disc {
  position: absolute;
  left: calc((var(--cx) - var(--r)) * var(--u)); top: calc((var(--cy) - var(--r)) * var(--u));
  width: calc(var(--r) * 2 * var(--u)); height: calc(var(--r) * 2 * var(--u));
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgb(8 46 32 / .08);
  transition: scale .18s ease, background-color .18s ease;
}
.cmb-item .cmb-disc { --r: var(--ir); }
.cmb-item .cmb-disc svg { width: 74%; height: 74%; fill: none; stroke: #17632D; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.cmb-item:hover .cmb-disc { scale: 1.06; }
.cmb-lab {
  position: absolute;
  left: calc(var(--lx) * var(--u)); top: calc(var(--ly) * var(--u)); width: calc(var(--lw) * var(--u));
  font-size: calc(var(--lfs) * var(--u)); line-height: calc(var(--llh) * var(--u));
  text-align: var(--ta); color: #4F5B57;
}
.cmb-lab span, .cmb-step-d span { display: block; }

.cmb-step .cmb-disc { --r: var(--sr); font-size: calc(var(--nfs) * var(--u)); font-weight: 600; color: #082E20; line-height: 1; }
.cmb-step:hover .cmb-disc { background: #EEF7E2; }
.cmb-step-txt {
  position: absolute;
  left: calc(var(--tx) * var(--u)); top: calc(var(--ty) * var(--u)); width: calc(var(--tw) * var(--u));
  text-align: var(--ta);
}
.cmb-step-t { display: block; font-size: calc(var(--tfs) * var(--u)); line-height: calc(var(--tlh) * var(--u)); font-weight: 700; color: #082E20; }
.cmb-step-d { display: block; font-size: calc(var(--dfs) * var(--u)); line-height: calc(var(--dlh) * var(--u)); color: #4F5B57; }
.cmb-arrow {
  left: calc((var(--ax) - var(--aw) / 2) * var(--u)); top: calc((var(--ay) - var(--aw) / 2) * var(--u));
  width: calc(var(--aw) * var(--u)); height: calc(var(--aw) * var(--u));
  rotate: var(--arot); color: #6FB839;
}
@media (prefers-reduced-motion: no-preference) {
  .cmb-arrow path { stroke-dasharray: 40; animation: cmb-flow 2.8s ease-in-out infinite; }
  @keyframes cmb-flow { 0%, 100% { stroke-dashoffset: 40; } 50% { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) { .cmb-photo img, .cmb-g-btn, .cmb-g-btn svg, .cmb-disc { transition: none; } }

/* Desktop */
  .cmb-stage { --cw: 1672; --ch: 1150; --ph-r: 16; --ir: 46; --sr: 45; --aw: 42; }
  .cmb-stage .cmb-g-eb { --x: 132; --y: 17; --fs: 21.6; }
  .cmb-stage .cmb-g-h { --x: 132; --y: 43; --fs: 54.6; --lh: 58; }
  .cmb-stage .cmb-b-eb { --x: 694; --y: 482; --fs: 19.9; }
  .cmb-stage .cmb-p-eb { --x: 133; --y: 944; --fs: 17.3; }
  .cmb-stage .cmb-p-h { --x: 133; --y: 970; --fs: 41.8; --lh: 46; }
  .cmb-stage .cmb-b-h { --x: 694; --y: 521; --w: 900; --fs: 55.6; --lh: 52; }
  .cmb-stage .cmb-b-body { --x: 694; --y: 671; --w: 800; --fs: 29; --lh: 33; }
  .cmb-stage .cmb-g-btn { --x: 1267; --y: 29; --w: 277; --h: 67; --fs: 22; }
  .cmb-stage .cmb-g-ph1 { --x: 132; --y: 112; --w: 460; --h: 266; }
  .cmb-stage .cmb-g-ph2 { --x: 610; --y: 112; --w: 456; --h: 266; }
  .cmb-stage .cmb-g-ph3 { --x: 1083; --y: 112; --w: 461; --h: 266; }
  .cmb-stage .cmb-div1 { --y: 435; --x0: 0; --x1: 1672; --cx: 836; }
  .cmb-stage .cmb-div2 { --y: 931; --x0: 0; --x1: 1672; --cx: 836; }
  .cmb-stage .cmb-item:nth-of-type(1) { --cx: 738; --cy: 840; --lx: 803; --ly: 801; --lw: 250; --lfs: 23; --llh: 29; --ta: left; }
  .cmb-stage .cmb-item:nth-of-type(2) { --cx: 1050; --cy: 840; --lx: 1115; --ly: 801; --lw: 250; --lfs: 23; --llh: 29; --ta: left; }
  .cmb-stage .cmb-item:nth-of-type(3) { --cx: 1356; --cy: 840; --lx: 1421; --ly: 801; --lw: 250; --lfs: 23; --llh: 29; --ta: left; }
  .cmb-stage .cmb-step:nth-of-type(1) { --cx: 177; --cy: 1098; --tx: 248; --ty: 1053; --tw: 330; --tfs: 23; --tlh: 28; --dfs: 23; --dlh: 26; --ta: left; --nfs: 46; }
  .cmb-stage .cmb-step:nth-of-type(2) { --cx: 700; --cy: 1096; --tx: 772; --ty: 1049; --tw: 330; --tfs: 23; --tlh: 28; --dfs: 23; --dlh: 26; --ta: left; --nfs: 46; }
  .cmb-stage .cmb-step:nth-of-type(3) { --cx: 1199; --cy: 1096; --tx: 1270; --ty: 1049; --tw: 330; --tfs: 23; --tlh: 28; --dfs: 23; --dlh: 26; --ta: left; --nfs: 46; }
  .cmb-stage .cmb-arrow-1 { --ax: 590; --ay: 1095; --arot: 0deg; }
  .cmb-stage .cmb-arrow-2 { --ax: 1090; --ay: 1095; --arot: 0deg; }
/* Tablet em pé */
@media (orientation: portrait) and (min-width: 641px) {
  .cmb-stage { --cw: 1086; --ch: 1448; --ph-r: 18; --ir: 51; --sr: 46; --aw: 42; }
  .cmb-stage .cmb-g-eb { --x: 51; --y: 94; --fs: 24; }
  .cmb-stage .cmb-g-h { --x: 49; --y: 129; --fs: 49.3; --lh: 56; }
  .cmb-stage .cmb-b-eb { --x: 477; --y: 610; --fs: 22.8; }
  .cmb-stage .cmb-p-eb { --x: 101; --y: 1131; --fs: 24.5; }
  .cmb-stage .cmb-p-h { --x: 101; --y: 1164; --fs: 53.3; --lh: 56; }
  .cmb-stage .cmb-b-h { --x: 477; --y: 657; --w: 600; --fs: 42.3; --lh: 47; }
  .cmb-stage .cmb-b-body { --x: 477; --y: 764; --w: 600; --fs: 27; --lh: 34; }
  .cmb-stage .cmb-g-btn { --x: 814; --y: 112; --w: 237; --h: 65; --fs: 21; }
  .cmb-stage .cmb-g-ph1 { --x: 39; --y: 209; --w: 325; --h: 294; }
  .cmb-stage .cmb-g-ph2 { --x: 382; --y: 209; --w: 325; --h: 294; }
  .cmb-stage .cmb-g-ph3 { --x: 724; --y: 209; --w: 326; --h: 294; }
  .cmb-stage .cmb-div1 { --y: 548; --x0: 24; --x1: 1062; --cx: 543; }
  .cmb-stage .cmb-div2 { --y: 1072; --x0: 24; --x1: 1062; --cx: 543; }
  .cmb-stage .cmb-item:nth-of-type(1) { --cx: 552; --cy: 913; --lx: 442; --ly: 972; --lw: 220; --lfs: 22; --llh: 28; --ta: center; }
  .cmb-stage .cmb-item:nth-of-type(2) { --cx: 763; --cy: 913; --lx: 653; --ly: 972; --lw: 220; --lfs: 22; --llh: 28; --ta: center; }
  .cmb-stage .cmb-item:nth-of-type(3) { --cx: 973; --cy: 913; --lx: 863; --ly: 972; --lw: 220; --lfs: 22; --llh: 28; --ta: center; }
  .cmb-stage .cmb-step:nth-of-type(1) { --cx: 186; --cy: 1295; --tx: 21; --ty: 1346; --tw: 330; --tfs: 24; --tlh: 34; --dfs: 22.6; --dlh: 26; --ta: center; --nfs: 50; }
  .cmb-stage .cmb-step:nth-of-type(2) { --cx: 543; --cy: 1295; --tx: 378; --ty: 1346; --tw: 330; --tfs: 24; --tlh: 34; --dfs: 22.6; --dlh: 26; --ta: center; --nfs: 50; }
  .cmb-stage .cmb-step:nth-of-type(3) { --cx: 898; --cy: 1295; --tx: 733; --ty: 1346; --tw: 330; --tfs: 24; --tlh: 34; --dfs: 22.6; --dlh: 26; --ta: center; --nfs: 50; }
  .cmb-stage .cmb-arrow-1 { --ax: 353; --ay: 1301; --arot: 0deg; }
  .cmb-stage .cmb-arrow-2 { --ax: 725; --ay: 1301; --arot: 0deg; }
}
/* Celular em pé (o kit não trouxe a referência: posições do JSON) */
@media (orientation: portrait) and (max-width: 640px) {
  .cmb-stage { --cw: 941; --ch: 2400; --ph-r: 18; --ir: 56; --sr: 52; --aw: 40; }
  .cmb-stage .cmb-g-eb { --x: 56; --y: 50; --fs: 28; }
  .cmb-stage .cmb-g-h { --x: 56; --y: 90; --fs: 60; --lh: 66; }
  .cmb-stage .cmb-b-eb { --x: 60; --y: 1070; --fs: 26; }
  .cmb-stage .cmb-p-eb { --x: 60; --y: 1795; --fs: 28; }
  .cmb-stage .cmb-p-h { --x: 60; --y: 1835; --fs: 60; --lh: 66; }
  .cmb-stage .cmb-b-h { --x: 60; --y: 1112; --w: 820; --fs: 54; --lh: 60; }
  .cmb-stage .cmb-b-body { --x: 60; --y: 1252; --w: 820; --fs: 37; --lh: 50; }
  .cmb-stage .cmb-g-btn { --x: 625; --y: 100; --w: 280; --h: 72; --fs: 28; }
  .cmb-stage .cmb-g-ph1 { --x: 38; --y: 255; --w: 282; --h: 265; }
  .cmb-stage .cmb-g-ph2 { --x: 336; --y: 255; --w: 274; --h: 265; }
  .cmb-stage .cmb-g-ph3 { --x: 622; --y: 255; --w: 284; --h: 265; }
  .cmb-stage .cmb-div1 { --y: 570; --x0: 24; --x1: 917; --cx: 470; }
  .cmb-stage .cmb-div2 { --y: 1745; --x0: 24; --x1: 917; --cx: 470; }
  .cmb-stage .cmb-item:nth-of-type(1) { --cx: 170; --cy: 1525; --lx: 25; --ly: 1597; --lw: 290; --lfs: 34; --llh: 42; --ta: center; }
  .cmb-stage .cmb-item:nth-of-type(2) { --cx: 471; --cy: 1525; --lx: 326; --ly: 1597; --lw: 290; --lfs: 34; --llh: 42; --ta: center; }
  .cmb-stage .cmb-item:nth-of-type(3) { --cx: 772; --cy: 1525; --lx: 627; --ly: 1597; --lw: 290; --lfs: 34; --llh: 42; --ta: center; }
  .cmb-stage .cmb-step:nth-of-type(1) { --cx: 118; --cy: 1985; --tx: 200; --ty: 1935; --tw: 700; --tfs: 40; --tlh: 48; --dfs: 35; --dlh: 44; --ta: left; --nfs: 52; }
  .cmb-stage .cmb-step:nth-of-type(2) { --cx: 118; --cy: 2140; --tx: 200; --ty: 2090; --tw: 700; --tfs: 40; --tlh: 48; --dfs: 35; --dlh: 44; --ta: left; --nfs: 52; }
  .cmb-stage .cmb-step:nth-of-type(3) { --cx: 118; --cy: 2295; --tx: 200; --ty: 2245; --tw: 700; --tfs: 40; --tlh: 48; --dfs: 35; --dlh: 44; --ta: left; --nfs: 52; }
  .cmb-stage .cmb-arrow-1 { --ax: 118; --ay: 2062; --arot: 90deg; }
  .cmb-stage .cmb-arrow-2 { --ax: 118; --ay: 2217; --arot: 90deg; }
  .cmb-g-h span { display: block; }
  .cmb-b-h span { display: inline; }
  .cmb-hd.cmb-b-h { white-space: normal; }
  .cmb-step-d span { display: inline; }
}

/* ---------- Movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .leaf {
    animation: leaf-float var(--dur, 7s) ease-in-out var(--delay, 0s) infinite alternate;
  }
  @keyframes leaf-float {
    from { translate: 0 0; }
    to   { translate: calc(var(--dx, 4) * var(--u)) calc(-14 * var(--u)); }
  }
  .js .garden-ring { animation: ring-in 1.2s cubic-bezier(.2,.7,.2,1) both; }
  .js .ring-2 { animation-delay: .12s; }
  .js .ring-3 { animation-delay: .24s; }
  @keyframes ring-in { from { opacity: 0; scale: .94; } }
  .garden-photo:hover ~ #garden-rings .garden-ring { scale: 1.012; }
  .garden-ring { transition: scale .6s ease; }
}