/* Newcastle Turfing ("nturfing"). Deep moss + fresh leaf + soft lime on warm paper.
   Gabarito headings, Instrument Sans text. App-like on phones: rounded cards, swipeable rails,
   a bottom-sheet menu and a floating dock. Mower-stripe texture on the moss panels. */
:root {
  --moss: #1b3a20; --moss2: #24502b; --moss3: #2f6436; --mossd: #12291a;
  --leaf: #4f9e33; --leafd: #3c7f25; --leafl: #e9f3df; --leafm: #cfe6bd;
  --lime: #cdeb63; --lime2: #bddc4f; --limel: #f3fadb;
  --paper: #f6f5ec; --card: #ffffff; --ink: #18231a; --muted: #586358; --line: #e1e4d4; --line2: #eceee2;
  --err: #b3261e;
  --r1: 12px; --r2: 18px; --r3: 26px;
  --sh1: 0 1px 2px rgba(27,58,32,.06), 0 4px 14px -6px rgba(27,58,32,.12);
  --sh2: 0 2px 6px rgba(27,58,32,.06), 0 18px 40px -18px rgba(27,58,32,.32);
  --hd: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
  --bd: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --gut: 16px; --max: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 74px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--bd); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.has-dock .foot { padding-bottom: 88px; }
@media (min-width: 900px) { .has-dock .foot { padding-bottom: 0; } }
body.sheet-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--leafd); text-underline-offset: 3px; }
a:hover { color: var(--moss); }
h1, h2, h3 { font-family: var(--hd); color: var(--moss); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 .45em; }
h1 { font-size: clamp(1.75rem, 6.4vw, 2.85rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 4.2vw, 1.95rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.005em; }
p { margin: 0 0 .8em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
.vh, .offscreen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--moss); padding: 8px 14px; z-index: 99; font-weight: 700; border-radius: var(--r1); }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.wrap--mid { max-width: 820px; }
@media (min-width: 700px) { :root { --gut: 24px; } }
.small { font-size: .88rem; color: var(--muted); }
.lede { font-size: 1.02rem; color: var(--muted); max-width: 44em; }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 700 .74rem/1 var(--hd); letter-spacing: .06em; text-transform: uppercase; color: var(--leafd); background: var(--leafl); padding: 6px 10px; border-radius: 999px; margin: 0 0 10px; }
.tag--lime { background: rgba(205,235,99,.16); color: var(--lime); }
.tag--soft { background: var(--limel); color: var(--moss2); }
.ic { flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent; font: 700 1rem/1 var(--hd); letter-spacing: .005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; }
.btn:active { transform: scale(.98); }
.btn--lime { background: var(--lime); color: var(--moss); box-shadow: 0 6px 16px -8px rgba(120,160,20,.7); }
.btn--lime:hover { background: var(--lime2); color: var(--moss); }
.btn--moss { background: var(--moss); color: #fff; }
.btn--moss:hover { background: var(--moss2); color: #fff; }
.btn--line { background: transparent; color: var(--moss); border-color: var(--leafm); }
.btn--line:hover { border-color: var(--moss); color: var(--moss); }
.btn--glass { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.btn--glass:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .92rem; }
.btn--big { min-height: 56px; font-size: 1.08rem; }
.btn--block { width: 100%; }
.more { margin: 14px 0 0; }
.more__a { display: inline-flex; align-items: center; gap: 6px; font: 700 .98rem var(--hd); color: var(--moss); text-decoration: none; padding: 8px 0; }
.more__a .ic { color: var(--leaf); transition: transform .18s; }
.more__a:hover .ic { transform: translateX(3px); }

/* app bar */
.appbar { position: sticky; top: 0; z-index: 40; background: rgba(246,245,236,.92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.appbar__in { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.appbar__logo { flex: none; margin-right: auto; display: block; }
.appbar__logo img { width: 168px; height: auto; }
.appbar__nav { display: none; }
.appbar__act { display: flex; align-items: center; gap: 8px; }
.appbar__call { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 42px; height: 42px; border-radius: 999px; background: var(--leafl); color: var(--moss); text-decoration: none; font: 700 .95rem var(--hd); }
.appbar__call span { display: none; }
.appbar__cta { display: none; }
.appbar__menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--moss); color: #fff; cursor: pointer; }
@media (min-width: 430px) { .appbar__cta { display: inline-flex; } }
@media (min-width: 560px) { .appbar__logo img { width: 196px; } }
@media (min-width: 1080px) {
  .appbar__in { min-height: 72px; gap: 20px; }
  .appbar__logo img { width: 214px; }
  .appbar__nav { display: block; }
  .appbar__nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
  .appbar__nav a { display: block; padding: 8px 14px; border-radius: 999px; font: 600 .95rem var(--hd); color: var(--moss); text-decoration: none; transition: background .15s; }
  .appbar__nav a:hover { background: var(--leafl); }
  .appbar__nav a[aria-current] { background: var(--moss); color: #fff; }
  .appbar__menu { display: none; }
  .appbar__call { width: auto; padding: 0 14px; }
  .appbar__call span { display: inline; }
}

/* bottom-sheet menu */
.sheet { position: fixed; inset: 0; z-index: 70; }
.sheet[hidden] { display: none; }
.sheet__shade { position: absolute; inset: 0; background: rgba(18,41,26,.48); opacity: 0; transition: opacity .25s; }
.sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto; background: var(--paper); border-radius: var(--r3) var(--r3) 0 0; padding: 8px var(--gut) calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -20px 50px rgba(18,41,26,.25); }
.sheet.is-open .sheet__shade { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__grip { width: 44px; height: 5px; border-radius: 99px; background: var(--leafm); margin: 2px auto 8px; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sheet__t { font: 800 1.2rem var(--hd); color: var(--moss); margin: 0; }
.sheet__x { width: 40px; height: 40px; border-radius: 999px; border: 0; background: var(--leafl); color: var(--moss); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sheet__list { list-style: none; margin: 0 0 10px; padding: 6px; background: var(--card); border-radius: var(--r2); box-shadow: var(--sh1); }
.sheet__list li + li { border-top: 1px solid var(--line2); }
.sheet__list a { display: flex; align-items: center; gap: 12px; padding: 12px 8px; text-decoration: none; color: var(--moss); font: 700 1.05rem var(--hd); }
.sheet__list a[aria-current] { color: var(--leafd); }
.sheet__ic { width: 36px; height: 36px; border-radius: 11px; background: var(--leafl); color: var(--leafd); display: inline-flex; align-items: center; justify-content: center; }
.sheet__go { margin-left: auto; color: var(--muted); }
.sheet__more { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; }
.sheet__more a { display: inline-flex; min-height: 38px; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--moss); text-decoration: none; font: 600 .92rem var(--hd); }
.sheet__act { display: grid; gap: 8px; margin: 0; }
@media (min-width: 1080px) { .sheet { display: none !important; } }

/* breadcrumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 0; padding: 0; margin: 0 0 10px; font-size: .84rem; }
.crumbs li + li::before { content: "›"; margin: 0 7px; opacity: .6; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs--light { color: rgba(255,255,255,.72); }
.crumbs--light [aria-current] { color: #fff; }

/* mower-stripe moss panels */
.stage, .head, .endq, .promo, .nudge__card, .sidecard {
  background-color: var(--moss);
  background-image: repeating-linear-gradient(100deg, rgba(255,255,255,.035) 0 46px, rgba(0,0,0,0) 46px 92px);
}

/* hero with the form */
.stage { color: #fff; border-radius: 0 0 var(--r3) var(--r3); }
.stage h1 { color: #fff; }
.stage__grid { display: grid; gap: 14px; padding-top: 16px; padding-bottom: 20px; }
.stage__intro { color: rgba(255,255,255,.84); font-size: 1.02rem; margin-bottom: 0; }
.stage__pts { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stage__pts li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); font-size: .86rem; line-height: 1.25; }
.stage__pts .ic { color: var(--lime); }
.stage__pic { margin: 0; position: relative; border-radius: var(--r2); overflow: hidden; }
.stage__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 699px) { .stage__pic img { aspect-ratio: 5 / 4; } }
.stage__chip { position: absolute; left: 12px; bottom: 12px; display: inline-flex; gap: 6px; align-items: center; background: rgba(255,255,255,.92); color: var(--moss); border-radius: 999px; padding: 6px 12px; font: 600 .82rem var(--hd); }
.stage--focus .stage__grid { padding-top: 12px; }
@media (min-width: 980px) {
  .stage { border-radius: 0 0 40px 40px; }
  .stage__grid { grid-template-columns: minmax(0, 1fr) 480px; grid-template-areas: "lead form" "pic form"; grid-template-rows: auto 1fr; column-gap: 52px; row-gap: 22px; padding-top: 42px; padding-bottom: 52px; align-items: start; }
  .stage__lead { grid-area: lead; }
  .stage__form { grid-area: form; }
  .stage__pic { grid-area: pic; }
  .stage__pic img { aspect-ratio: 16 / 10; }
}

/* page header */
.head { color: #fff; border-radius: 0 0 var(--r3) var(--r3); }
.head h1 { color: #fff; margin-bottom: .35em; }
.head__in { display: grid; gap: 14px; padding-top: 16px; padding-bottom: 22px; }
.head__intro { color: rgba(255,255,255,.84); font-size: 1.02rem; max-width: 42em; }
.head__act { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.head__pic { margin: 0; border-radius: var(--r2); overflow: hidden; }
.head__pic img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; max-height: 210px; }
.head__date { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font-size: .9rem; margin: 0; }
@media (min-width: 980px) {
  .head { border-radius: 0 0 40px 40px; }
  .head__in { padding-top: 40px; padding-bottom: 44px; }
  .head--pic .head__in { grid-template-columns: minmax(0, 1fr) 440px; gap: 52px; align-items: center; }
  .head__pic img { max-height: none; aspect-ratio: 4 / 3; }
}
.done__tick { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 18px; background: var(--lime); color: var(--moss); margin-bottom: 12px; }
.lost { font: 800 4.6rem/1 var(--hd); color: var(--lime); margin: 0 0 6px; }

/* chips strip under the hero */
.chips ul { list-style: none; margin: 0; padding: 14px 0 2px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chips ul::-webkit-scrollbar { display: none; }
.chips li { flex: none; display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; font: 600 .88rem/1.2 var(--hd); color: var(--moss); }
.chips .ic { color: var(--leaf); }
@media (min-width: 900px) { .chips ul { flex-wrap: wrap; justify-content: center; padding-top: 22px; overflow: visible; } }

/* sections */
.sec { padding: 26px 0; }
.sec--white { background: var(--card); border-radius: var(--r3); margin: 8px 0; }
.sec__head { margin-bottom: 14px; }
.sec__head h2 { margin-bottom: .3em; }
.sec__head .lede { margin-bottom: 0; }
@media (min-width: 900px) { .sec { padding: 48px 0; } .sec--white { margin: 12px auto; max-width: calc(var(--max) + 48px); } }

/* article layout */
.doc { display: grid; gap: 0; padding-top: 4px; padding-bottom: 14px; }
.doc__main { min-width: 0; }
.doc__side { padding-top: 14px; display: grid; gap: 10px; align-content: start; }
.pane { padding: 20px 0; }
.pane + .pane { border-top: 1px solid var(--line); }
.pane h2 { font-size: clamp(1.25rem, 3.6vw, 1.6rem); }
@media (min-width: 980px) {
  .doc { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding-top: 16px; padding-bottom: 36px; }
  .doc__side { order: 2; position: sticky; top: 92px; padding-top: 26px; }
  .pane { padding: 28px 0; }
}
.facts { background: var(--card); border-radius: var(--r2); box-shadow: var(--sh1); padding: 14px 16px; }
.facts__t { display: flex; align-items: center; gap: 10px; font: 700 1rem var(--hd); color: var(--moss); margin: 0 0 8px; }
.facts__ic { width: 32px; height: 32px; border-radius: 10px; background: var(--leafl); color: var(--leafd); display: inline-flex; align-items: center; justify-content: center; }
.facts ul { margin: 0 0 4px; padding-left: 1.1em; font-size: .93rem; }
.facts li { margin-bottom: 3px; }
.facts li::marker { color: var(--leaf); }
.facts .small { margin: 6px 0 0; }
.toc { background: var(--card); border-radius: var(--r2); box-shadow: var(--sh1); }
.toc summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font: 700 .95rem var(--hd); color: var(--moss); list-style: none; min-height: 48px; }
.toc summary::-webkit-details-marker { display: none; }
.toc__chev { margin-left: auto; transition: transform .2s; }
.toc[open] .toc__chev { transform: rotate(180deg); }
.toc ol { margin: 0; padding: 0 14px 12px 34px; font-size: .92rem; }
.toc li { margin: 6px 0; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover, .toc a.is-on { color: var(--leafd); text-decoration: underline; }
.sidecard { display: none; }
@media (min-width: 980px) {
  .sidecard { display: block; color: rgba(255,255,255,.86); border-radius: var(--r2); padding: 18px; font-size: .94rem; }
  .sidecard__t { font: 700 1.08rem var(--hd); color: #fff; margin-bottom: 6px; }
}

/* prose */
.prose__body { max-width: 46em; }
.prose--pic .wrap, .pane.prose--pic { display: grid; gap: 16px; }
.prose__pic { margin: 0; }
.prose__pic img { border-radius: var(--r2); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.prose__pic figcaption { font-size: .85rem; color: var(--muted); margin-top: 6px; }
@media (min-width: 980px) { .sec.prose--pic .wrap { grid-template-columns: minmax(0, 1fr) 400px; gap: 52px; align-items: start; } }
.bul { padding-left: 0; list-style: none; }
.bul li { position: relative; padding-left: 22px; margin-bottom: 7px; }
.bul li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; border-radius: 3px; background: var(--leaf); transform: rotate(45deg); }
.hint { display: flex; gap: 12px; background: var(--limel); border-radius: var(--r2); padding: 14px 16px; margin-top: 14px; max-width: 46em; }
.hint .ic { color: var(--leafd); margin-top: 3px; }
.hint__t { font: 700 1rem var(--hd); color: var(--moss); margin-bottom: 4px; }
.hint p:last-child { margin-bottom: 0; }

/* icon cards */
.cardgrid { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.card { position: relative; display: flex; gap: 14px; align-items: flex-start; background: var(--card); border-radius: var(--r2); padding: 16px; box-shadow: var(--sh1); }
.card__body { flex: 1; min-width: 0; }
.card h3 { margin-bottom: .3em; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
.card p + p { margin-top: .5em; }
.card__ic { flex: none; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--leafl); color: var(--leafd); border-radius: 14px; }
.card__badge { display: inline-block; font: 700 .7rem var(--hd); text-transform: uppercase; letter-spacing: .07em; color: var(--moss); background: var(--limel); padding: 3px 9px; border-radius: 999px; margin-bottom: 8px !important; }
.card__go { color: var(--leaf); align-self: center; }
.card--go { transition: transform .18s, box-shadow .18s; }
.card--go:hover { transform: translateY(-2px); box-shadow: var(--sh2); }
.card--go h3 a { color: var(--moss); text-decoration: none; }
.card--go h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r2); }
@media (min-width: 640px) { .cardgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .sec .cardgrid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .sec .cardgrid--2 { grid-template-columns: 1fr 1fr; } .sec .card { flex-direction: column; padding: 20px; } .sec .card__go { display: none; } }

/* swipe rails (photo tiles and galleries) */
.snap { list-style: none; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 12px; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
.snap::-webkit-scrollbar { display: none; }
.snap > li { scroll-snap-align: start; }
.ptile { position: relative; background: var(--card); border-radius: var(--r2); overflow: hidden; box-shadow: var(--sh1); display: flex; flex-direction: column; }
.ptile__pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ptile__txt { padding: 12px 14px 16px; }
.ptile h3 { margin-bottom: .3em; font-size: 1.04rem; }
.ptile h3 a { color: var(--moss); text-decoration: none; }
.ptile h3 a::after { content: ""; position: absolute; inset: 0; }
.ptile p { margin: 0; font-size: .93rem; color: var(--muted); }
.ptile--go { transition: transform .18s, box-shadow .18s; }
.ptile--go:hover { transform: translateY(-2px); box-shadow: var(--sh2); }
.shot figure { margin: 0; background: var(--card); border-radius: var(--r2); overflow: hidden; box-shadow: var(--sh1); height: 100%; }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot figcaption { padding: 10px 12px 12px; font-size: .88rem; color: var(--muted); display: grid; gap: 2px; }
.shot figcaption b { color: var(--moss); font-family: var(--hd); font-weight: 700; }
.snap--pics { grid-auto-columns: 70%; }
@media (min-width: 700px) { .snap { grid-auto-columns: 42%; } .snap--pics { grid-auto-columns: 34%; } }
@media (min-width: 980px) {
  .sec .snap { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; overflow: visible; gap: 16px; }
  .sec .snap--pics { grid-template-columns: repeat(4, 1fr); }
  .pane .snap { grid-auto-columns: 46%; }
}

/* areas */
.agrid { display: grid; gap: 12px; }
.abox { background: var(--card); border-radius: var(--r2); padding: 16px; box-shadow: var(--sh1); }
.abox h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.abox h3::before { content: ""; width: 10px; height: 10px; border-radius: 4px; background: var(--lime2); transform: rotate(45deg); }
.abox__t { font-size: .92rem; color: var(--muted); margin-bottom: 6px; }
.abox ul { list-style: none; margin: 0; padding: 0; }
.abox li + li { border-top: 1px solid var(--line2); }
.abox a, .abox__plain { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; text-decoration: none; color: var(--moss); }
.abox b { font: 700 1rem var(--hd); display: block; }
.abox small { display: block; color: var(--muted); font-size: .84rem; }
.abox a .ic { color: var(--leaf); }
.abox a:hover b { color: var(--leafd); }
@media (min-width: 760px) { .agrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .agrid { grid-template-columns: repeat(3, 1fr); } }
.apills { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.apills a, .apills__plain { display: flex; align-items: flex-start; gap: 9px; height: 100%; background: var(--card); border-radius: var(--r1); padding: 11px 12px; text-decoration: none; color: var(--moss); box-shadow: var(--sh1); transition: transform .15s; }
.apills a:hover { transform: translateY(-1px); }
.apills__ic { flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--leafl); color: var(--leafd); display: inline-flex; align-items: center; justify-content: center; }
.apills b { display: block; font: 700 .96rem/1.25 var(--hd); }
.apills small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; margin-top: 2px; }
@media (min-width: 760px) { .apills { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .sec .apills { grid-template-columns: repeat(4, 1fr); } }

/* link rows */
.rows { list-style: none; margin: 0; padding: 6px; background: var(--card); border-radius: var(--r2); box-shadow: var(--sh1); }
.rows li + li { border-top: 1px solid var(--line2); }
.rows a { display: flex; align-items: center; gap: 12px; padding: 11px 8px; text-decoration: none; color: var(--moss); }
.rows__ic { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--limel); color: var(--moss2); display: inline-flex; align-items: center; justify-content: center; }
.rows__t { flex: 1; min-width: 0; }
.rows b { font: 700 1rem/1.3 var(--hd); display: block; }
.rows small { color: var(--muted); font-size: .86rem; display: block; margin-top: 1px; }
.rows__go { color: var(--muted); transition: transform .15s; }
.rows a:hover .rows__go { transform: translateX(3px); color: var(--leaf); }
@media (min-width: 980px) { .sec .rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; padding: 8px 14px; } .sec .rows li + li { border-top: 0; } .sec .rows li { border-bottom: 1px solid var(--line2); } }

/* table */
.tbl { overflow-x: auto; border-radius: var(--r2); background: var(--card); box-shadow: var(--sh1); }
.tbl table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 520px; }
.tbl th, .tbl td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.tbl thead th { background: var(--leafl); color: var(--moss); font: 700 .86rem var(--hd); }
.tbl tbody th { font-weight: 700; color: var(--moss); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
@media (max-width: 639px) {
  .tbl--stack { background: none; box-shadow: none; overflow: visible; }
  .tbl--stack table { min-width: 0; }
  .tbl--stack thead { display: none; }
  .tbl--stack tr { display: block; background: var(--card); border-radius: var(--r1); box-shadow: var(--sh1); margin-bottom: 8px; padding: 11px 13px; }
  .tbl--stack th, .tbl--stack td { display: block; border: 0; padding: 2px 0; }
  .tbl--stack tbody th { font-family: var(--hd); margin-bottom: 4px; }
  .tbl--stack td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--moss); }
  .tbl--stack td[data-label=""]::before { content: none; }
}

/* steps timeline */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flow li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; background: var(--card); border-radius: var(--r2); padding: 14px; box-shadow: var(--sh1); }
.flow__n { width: 40px; height: 40px; border-radius: 13px; background: var(--lime); color: var(--moss); display: inline-flex; align-items: center; justify-content: center; font: 800 1.05rem var(--hd); }
.flow h3 { margin: 8px 0 .25em; }
.flow p { margin: 0; color: var(--muted); font-size: .95rem; }
.flow p + p { margin-top: .5em; }
@media (min-width: 980px) {
  .sec .flow:not(.flow--long) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; }
  .sec .flow:not(.flow--long) li { grid-template-columns: 1fr; padding: 18px; }
  .sec .flow--long { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* checklist */
.checks { background: var(--card); border-radius: var(--r2); padding: 18px; box-shadow: var(--sh1); }
.checks ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks__ic { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--leaf); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
@media (min-width: 900px) { .sec .checks ul { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.mini { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.mini li { display: flex; gap: 8px; align-items: flex-start; }
.mini .ic { color: var(--leaf); margin-top: 4px; }
.mini--light li { color: rgba(255,255,255,.9); }
.mini--light .ic { color: var(--lime); }

/* callout */
.promo { color: rgba(255,255,255,.86); border-radius: var(--r3); padding: 20px; display: grid; gap: 12px; }
.promo h2 { color: #fff; font-size: 1.32rem; }
.promo p { margin-bottom: .5em; }
.promo__act { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
@media (min-width: 900px) { .sec .promo { grid-template-columns: 1fr auto; align-items: center; padding: 28px 34px; gap: 32px; } }

/* split rows */
.duo { display: grid; gap: 12px; }
.duo__row { background: var(--card); border-radius: var(--r2); overflow: hidden; box-shadow: var(--sh1); }
.duo__pic { margin: 0; }
.duo__pic img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.duo__txt { padding: 16px; }
.duo__txt h3 { font-size: 1.16rem; }
.duo__txt p:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .sec .duo { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .duo__pic img { aspect-ratio: 3 / 2; } }

/* faqs */
.asks { display: grid; gap: 8px; }
.ask { background: var(--card); border-radius: var(--r1); box-shadow: var(--sh1); }
.ask summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; font: 700 1rem/1.35 var(--hd); color: var(--moss); min-height: 52px; }
.ask summary::-webkit-details-marker { display: none; }
.ask__pm { flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--leafl); color: var(--leafd); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s, background .2s; }
.ask[open] .ask__pm { transform: rotate(45deg); background: var(--lime); color: var(--moss); }
.ask__a { padding: 0 16px 14px; }
.ask__a p:last-child { margin-bottom: 0; }
.faqsec h2 { margin-bottom: 12px; }
.faqsec .asks + h2 { margin-top: 26px; }

/* closing nudge */
.nudge { padding: 8px 0 26px; }
.nudge__card { color: rgba(255,255,255,.86); border-radius: var(--r3); padding: 20px; display: grid; gap: 12px; }
.nudge__t { font: 800 1.35rem/1.2 var(--hd); color: #fff; margin-bottom: .3em; }
.nudge__txt p:last-child { margin-bottom: 0; }
.nudge__act { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
@media (min-width: 900px) { .nudge { padding: 16px 0 48px; } .nudge__card { grid-template-columns: 1fr auto; align-items: center; padding: 30px 36px; gap: 32px; } }

/* footer */
.foot { background: var(--mossd); color: rgba(255,255,255,.76); font-size: .93rem; }
.foot a { color: rgba(255,255,255,.9); text-decoration: none; }
.foot a:hover { color: var(--lime); text-decoration: underline; }
.foot__top { display: grid; gap: 18px; padding: 28px 0 14px; }
.foot__brand img { width: 196px; margin-bottom: 12px; }
.foot__brand p { max-width: 32em; }
.foot__area { display: flex; gap: 8px; align-items: flex-start; }
.foot__area .ic { color: var(--lime); margin-top: 3px; }
.foot__contact { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.foot__contact a { display: inline-flex; align-items: center; gap: 8px; }
.foot__cols { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.1); }
.foot__col { border-bottom: 1px solid rgba(255,255,255,.1); }
.foot__col summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none; font: 700 .95rem var(--hd); color: #fff; }
.foot__col summary::-webkit-details-marker { display: none; }
.foot__chev { color: var(--lime); transition: transform .2s; }
.foot__col[open] .foot__chev { transform: rotate(180deg); }
.foot__col ul { list-style: none; margin: 0; padding: 0 0 12px; }
.foot__col li { margin: 0 0 8px; }
.foot__base { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0 22px; display: grid; gap: 8px; font-size: .84rem; }
.foot__base p { margin: 0; }
.foot__base ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot__note { display: block; color: rgba(255,255,255,.58); margin-top: 3px; }
.foot__cookies { background: none; border: 0; padding: 0; color: rgba(255,255,255,.9); font: inherit; cursor: pointer; }
.foot__cookies:hover { color: var(--lime); text-decoration: underline; }
@media (min-width: 900px) {
  .foot__top { grid-template-columns: 320px 1fr; gap: 56px; padding: 48px 0 30px; }
  .foot__cols { grid-template-columns: repeat(4, 1fr); gap: 20px; border: 0; }
  .foot__col { border: 0; }
  .foot__col summary { pointer-events: none; min-height: 0; margin-bottom: 10px; color: var(--lime); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
  .foot__chev { display: none; }
  .foot__base { grid-template-columns: 1fr auto; align-items: center; }
}

/* floating dock (phones) */
.dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: 4px; padding: 6px; background: rgba(27,58,32,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 22px; box-shadow: 0 14px 34px -10px rgba(18,41,26,.55); transition: transform .25s, opacity .25s; }
.dock__a { flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; border-radius: 16px; color: rgba(255,255,255,.78); text-decoration: none; font: 600 .7rem/1 var(--hd); }
.dock__a.is-on { color: var(--lime); background: rgba(255,255,255,.07); }
.dock__a:hover { color: #fff; }
.dock__q { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 16px; background: var(--lime); color: var(--moss); text-decoration: none; font: 800 1.02rem var(--hd); }
.dock__q:hover { color: var(--moss); background: var(--lime2); }
.dock.is-tucked { transform: translateY(140%); opacity: 0; }
@media (min-width: 900px) { .dock { display: none; } }

/* quote card */
.qcard { background: var(--card); color: var(--ink); border-radius: var(--r3); box-shadow: 0 24px 50px -20px rgba(6,20,10,.55); overflow: hidden; scroll-margin-top: 70px; }
.qcard__top { padding: 16px 18px 12px; background: linear-gradient(180deg, var(--limel), #fff); border-bottom: 1px solid var(--line2); }
.qcard__title { font: 800 1.24rem/1.2 var(--hd); color: var(--moss); margin: 0 0 3px; }
.qcard__sub { margin: 0; font-size: .92rem; color: var(--muted); }
.qcard__steps { list-style: none; display: flex; gap: 6px; margin: 10px 0 0; padding: 0; counter-reset: s; }
.qcard__steps li { counter-increment: s; flex: 1; font: 600 .74rem/1 var(--hd); color: var(--moss2); text-align: center; }
.qcard__steps li::before { content: ""; display: block; height: 4px; border-radius: 99px; background: var(--leafm); margin-bottom: 6px; }
.qcard__steps li:first-child::before { background: var(--leaf); }
.qcard__form { padding: 6px 16px 16px; }
@media (min-width: 560px) { .qcard__form { padding: 8px 20px 20px; } .qcard__top { padding: 18px 20px 14px; } }
.grp { border: 0; margin: 0; padding: 12px 0 4px; min-width: 0; }
.grp + .grp { border-top: 1px dashed var(--line); margin-top: 8px; }
.grp__lg { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0 0 10px; font: 700 1rem var(--hd); color: var(--moss); }
.grp__n { width: 24px; height: 24px; border-radius: 8px; background: var(--moss); color: var(--lime); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.qcard__send { margin: 14px 0 8px; }
.qcard__call { margin: 0; border-top: 1px solid var(--line2); }
.qcard__call a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; font: 700 .95rem var(--hd); color: var(--moss); text-decoration: none; }
.seg { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.seg legend { font: 600 .88rem var(--hd); color: var(--moss); margin-bottom: 6px; padding: 0; }
.seg__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.seg__opts label { position: relative; }
.seg__opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__opts span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 12px; background: var(--paper); border: 1.5px solid var(--line); font: 600 .9rem var(--hd); color: var(--moss); transition: background .15s, border-color .15s, color .15s; }
.seg__opts input:checked + span { background: var(--moss); border-color: var(--moss); color: #fff; }
.seg__opts input:focus-visible + span { outline: 3px solid var(--leaf); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f { min-width: 0; grid-column: span 2; }
@media (min-width: 340px) { .f { grid-column: span 1; } .f--full, .f--wide { grid-column: span 2; } }
@media (min-width: 560px) { .f--wide { grid-column: span 1; } }
.f label { display: block; font: 600 .86rem var(--hd); color: var(--moss); margin-bottom: 4px; }
.opt { font-family: var(--bd); font-weight: 400; color: var(--muted); font-size: .8rem; }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; padding: 10px 13px; border: 1.5px solid #d3d8c4; border-radius: var(--r1); font: 400 16px/1.3 var(--bd); color: var(--ink); background: #fbfbf7; transition: border-color .15s, background .15s; }
.f textarea { min-height: 66px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--leaf); background: #fff; outline: 3px solid rgba(79,158,51,.2); outline-offset: 0; }
.f [aria-invalid="true"] { border-color: var(--err); background: #fff6f5; }
.f--tick { margin-top: 2px; }
.tick { display: flex !important; align-items: center; gap: 10px; min-height: 40px; font-family: var(--bd) !important; font-weight: 600 !important; cursor: pointer; }
.tick input { width: 22px; min-height: 0; height: 22px; accent-color: var(--moss); }
[data-trade], [data-plot] { display: none; }
.qcard__form:has(input[name="customer_type"][value="trade"]:checked) [data-trade], .qcard__form:has(input[name="customer_type"][value="developer"]:checked) [data-trade] { display: block; }
.qcard__form:has([data-new-build]:checked) [data-plot] { display: block; }
.is-shown { display: block !important; }
.plotbox { background: var(--paper); border-radius: var(--r1); padding: 10px; }
.plotbox__note { font-size: .8rem; color: var(--muted); margin: 8px 0 0; }
.plotbox__nudge { display: flex; gap: 6px; align-items: flex-start; font-size: .82rem; color: var(--moss2); margin: 6px 0 0; }
.plotbox__nudge[hidden] { display: none; }
.okbox { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.okbox input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--moss); }
.okbox input[aria-invalid="true"] { outline: 2px solid var(--err); }
.formerror { background: #fdecea; color: var(--err); border-radius: var(--r1); padding: 10px 12px; font-size: .9rem; font-weight: 600; margin: 8px 0 4px; }
.formstatus { font-size: .9rem; color: var(--leafd); font-weight: 600; }

/* end-of-page form */
.endq { color: #fff; border-radius: var(--r3); margin: 10px 0; }
.endq h2 { color: #fff; }
.endq__in { display: grid; gap: 18px; }
.endq__lead p { color: rgba(255,255,255,.85); }
@media (min-width: 980px) { .endq { max-width: calc(var(--max) + 48px); margin: 16px auto; border-radius: 40px; } .endq__in { grid-template-columns: minmax(0, 1fr) 480px; gap: 56px; align-items: start; } .endq__lead { padding-top: 20px; } }

/* contact message */
.msgcard { background: var(--card); border-radius: var(--r3); box-shadow: var(--sh1); padding: 18px; }
.msgcard .fields { margin-bottom: 4px; }
.soon { background: var(--card); border: 1.5px dashed var(--line); border-radius: var(--r2); padding: 18px; }

/* calculator */
.calc { background: var(--card); border-radius: var(--r3); padding: 16px; box-shadow: var(--sh1); }
.calc__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.calc__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; padding: 10px; background: var(--paper); border-radius: var(--r1); }
.calc__row--one { grid-template-columns: 1fr auto; }
.calc__row .f { grid-column: auto; }
.calc__lab { grid-column: 1 / -1; font: 700 .86rem var(--hd); color: var(--moss); display: flex; justify-content: space-between; margin: 0; }
.calc__lab em { font-style: normal; color: var(--leafd); }
.calc__del { width: 44px; height: 48px; border: 0; background: #fff; border-radius: var(--r1); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.calc__add { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 15px; border: 1.5px solid var(--leafm); background: var(--leafl); border-radius: 999px; font: 700 .9rem var(--hd); color: var(--moss); cursor: pointer; }
.pill:hover { background: var(--leafm); }
.calc__waste { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.calc__waste legend { font: 700 .86rem var(--hd); color: var(--moss); margin-bottom: 6px; padding: 0; width: 100%; }
.calc__waste label { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; cursor: pointer; min-height: 34px; }
.calc__waste input { accent-color: var(--moss); width: 18px; height: 18px; }
.calc__out { background: var(--moss); color: rgba(255,255,255,.86); border-radius: var(--r2); padding: 16px; }
.calc__out p { margin: 0 0 6px; }
.calc__out p:last-child { margin-bottom: 0; }
.calc__out .small { color: rgba(255,255,255,.75); }
.calc__out b { color: #fff; }
.calc__big { font: 800 2.1rem/1 var(--hd); color: var(--lime); }
.calc .fields { margin-bottom: 12px; }

/* consent banner */
.consent { position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60; background: var(--card); border-radius: var(--r2); box-shadow: 0 18px 40px -12px rgba(18,41,26,.4); padding: 14px 16px; font-size: .9rem; max-width: 460px; }
.consent__t { font: 700 1rem var(--hd); color: var(--moss); margin-bottom: 4px; }
.consent__b { display: flex; gap: 8px; margin: 10px 0 0; }
@media (min-width: 900px) { .consent { bottom: 16px; left: 16px; } }
.trading-notice { color: var(--muted); }
.head__act--dark { margin-top: 14px; }

/* gentle rise as cards come into view (only with JS and when motion is fine) */
@media (prefers-reduced-motion: no-preference) {
  .js-rise .rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); transition-delay: calc(min(var(--i, 0), 5) * 60ms); }
  .js-rise .rv.is-in { opacity: 1; transform: none; }
  .qcard { animation: lift .6s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes lift { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .appbar, .dock, .consent, .nudge, .sheet { display: none !important; } body { padding: 0 !important; } }