/* Layout: photo hero with one address bar -> estimate card -> proof band -> 3 steps -> agent + free CMA form -> FAQ -> footer */
:root {
  --bg: #f4f6f3; --paper: #ffffff; --ink: #14202a; --muted: #5a6670; --line: #d8dfda;
  --accent: #1d6b4f; --accent-2: #24845f; --on-accent: #ffffff; --soft: #e3eee8; --warn: #b8322a;
  --night: #0f1a22; --on-night: #eef3ef; --night-muted: #a9b7b0;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f161b; --paper: #172129; --ink: #e8eeea; --muted: #9eaca6; --line: #283640;
  --accent: #3fae83; --accent-2: #52c294; --on-accent: #08130e; --soft: #1a2d26; --warn: #ef6d62;
  --night: #0a1116; --on-night: #eef3ef; --night-muted: #a9b7b0; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0f161b; --paper: #172129; --ink: #e8eeea; --muted: #9eaca6; --line: #283640;
  --accent: #3fae83; --accent-2: #52c294; --on-accent: #08130e; --soft: #1a2d26; --warn: #ef6d62;
  --night: #0a1116; --on-night: #eef3ef; --night-muted: #a9b7b0; color-scheme: dark }

* { box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body) }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; line-height: 1.05 }
p { margin: 0 }
.in { max-width: 1080px; margin: 0 auto; padding-inline: 20px }
.label { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted) }
input, select { font: 400 17px var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; width: 100% }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px }
.btn { font: 700 17px var(--body); background: var(--accent); color: var(--on-accent); border: 0; border-radius: 10px; padding: 14px 22px; cursor: pointer; transition: background .15s }
.btn:hover { background: var(--accent-2) }
.err { color: var(--warn); font-size: 15px }

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; background: #1b2a22 url("hero.webp") center 40% / cover no-repeat; padding-block: 0 72px }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,24,.72) 0%, rgba(10,18,24,.45) 45%, rgba(10,18,24,.78) 100%) }
.hero > * { position: relative }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 18px; flex-wrap: wrap }
.brand { font: 800 19px var(--display); letter-spacing: .01em; color: #fff }
.brand small { display: block; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75) }
.top-r { display: flex; gap: 10px; align-items: center }
.pill { font: 600 15px var(--body); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 7px 14px; background: rgba(0,0,0,.15) }
.pill.lang { font: 500 12px var(--mono); cursor: pointer }
.hero-body { padding-top: 64px; display: grid; gap: 20px; max-width: 780px }
.hero h1 { font-size: clamp(40px, 7.4vw, 76px); font-weight: 800; letter-spacing: -0.02em }
.hero .sub { font-size: clamp(18px, 2.2vw, 21px); color: rgba(255,255,255,.88); max-width: 58ch }
.checks { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 600 14px var(--body); text-transform: uppercase; letter-spacing: .06em }
.checks span::before { content: "✓"; color: #7fe0b5; margin-right: 8px }
.search { display: flex; gap: 8px; background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.35); position: relative; max-width: 760px }
.search input { border: 0; background: transparent; color: #14202a; font-size: 19px; padding: 14px 12px 14px 44px; min-width: 0 }
.search input:focus { outline: none }
.search .pin { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #1d6b4f }
.search .btn { flex: none; white-space: nowrap }
.hero .note { font-size: 14px; color: rgba(255,255,255,.75) }
.sugg { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 9; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.3) }
.sugg button { display: block; width: 100%; text-align: left; font: 400 16px var(--body); color: #14202a; background: none; border: 0; padding: 12px 16px; cursor: pointer }
.sugg button:hover, .sugg button:focus { background: #e3eee8 }
@media (max-width: 560px) { .search { flex-direction: column } .search .pin { top: 34px } .search .btn { width: 100% } }

/* ---------- Estimate card ---------- */
.est { margin-top: -40px; position: relative; z-index: 2 }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 40px rgba(15,26,34,.08); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) }
.card .fields { padding: 26px; display: grid; gap: 14px; align-content: start; border-right: 1px solid var(--line) }
.card .res { padding: 26px; display: grid; gap: 14px; align-content: start; min-width: 0 }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.field { display: grid; gap: 6px; min-width: 0 }
.big { font: 800 clamp(44px, 7vw, 68px)/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--accent) }
.range { font: 500 15px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums }
.bar { position: relative; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--soft), var(--accent), var(--soft)) }
.bar i { position: absolute; top: -5px; width: 4px; height: 20px; background: var(--ink); left: 50%; border-radius: 2px }
.basis { font-size: 15px; color: var(--muted) }
.comps { overflow-x: auto }
table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums }
th { text-align: left; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line) }
td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); white-space: nowrap }
.num { text-align: right }
.qs { display: grid; gap: 12px; border-top: 1px dashed var(--line); padding-top: 14px }
.adj { display: grid; gap: 6px; font-size: 15px }
.adj div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 6px; font-variant-numeric: tabular-nums }
.adj .up { color: var(--accent); font-weight: 700 } .adj .down { color: var(--warn); font-weight: 700 }
.adj .base { color: var(--muted) }
.cta-line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 4px }
.cta-line a { color: var(--accent); font-weight: 700; text-decoration: none }
.res.waiting > :not(.welcome), .res:not(.waiting) .welcome { display: none }
.welcome { background: #eef5f0; border-radius: 14px; padding: 26px; display: grid; gap: 12px; align-content: start }
.welcome .wico { width: 44px; height: 44px; color: var(--accent) }
.welcome h3 { margin: 0; font: 700 clamp(22px, 3vw, 28px)/1.2 var(--display); color: var(--ink) }
.welcome p { margin: 0 }
.welcome ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px }
.welcome li { padding-left: 28px; position: relative }
.welcome li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12px/20px sans-serif; text-align: center }
@media (max-width: 820px) { .card { grid-template-columns: 1fr } .card .fields { border-right: 0; border-bottom: 1px solid var(--line) } }

/* ---------- Proof band + steps ---------- */
.sec { padding-block: 72px 0 }
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; border-block: 1px solid var(--line); padding-block: 26px }
.proof b { display: block; font: 800 34px var(--display); font-variant-numeric: tabular-nums }
.proof span { color: var(--muted); font-size: 15px }
@media (max-width: 700px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.sec h2 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -0.01em }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 30px }
.steps div { display: grid; gap: 8px; align-content: start }
.steps em { font: 800 15px var(--mono); font-style: normal; color: var(--accent) }
.steps b { font: 700 21px var(--display) }
.steps p { color: var(--muted) }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr } }

/* ---------- Agent + form ---------- */
.agent { background: var(--night); color: var(--on-night); margin-top: 80px; padding-block: 64px }
.agent .in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px }
@media (max-width: 860px) { .agent .in { grid-template-columns: 1fr } }
.agent h2 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800 }
.agent .who { display: grid; gap: 16px; align-content: start }
.agent .who p { color: var(--night-muted) }
.badge { display: flex; gap: 14px; align-items: center }
.badge .mono { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; background: var(--accent) }
.badge b { display: block; font: 700 19px var(--display); color: var(--on-night) }
.badge span { font-size: 14px; color: var(--night-muted) }
.phone { font: 800 28px var(--display); color: var(--on-night); text-decoration: none; user-select: all }
.agent .label { color: var(--night-muted) }
.formcard { background: var(--paper); color: var(--ink); border-radius: 16px; padding: 26px; display: grid; gap: 14px }
.formcard h3 { font-size: 24px }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px }
.consent { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--muted) }
.consent input { width: auto; margin-top: 3px }
.money-qs { display: grid; gap: 10px; border-top: 1px dashed var(--line); padding-top: 12px }
.money-qs .row { grid-template-columns: 1fr }
.helpnote { background: var(--soft); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; font-size: 15px }
.helpnote p { color: var(--muted) }
.done { font-size: 18px; font-weight: 600; color: var(--accent) }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; margin-top: 28px; align-items: start }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr } }
details { border-bottom: 1px solid var(--line); padding-block: 16px }
summary { font: 700 19px var(--display); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px }
summary::-webkit-details-marker { display: none }
summary::after { content: "+"; color: var(--accent); font-size: 24px; line-height: 1 }
details[open] summary::after { content: "–" }
details p { color: var(--muted); padding-top: 10px; max-width: 64ch }
.faq figure { margin: 0; display: grid; gap: 8px }
.faq img { width: 100%; border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; max-width: 100% }
.faq figcaption { font-size: 13px; color: var(--muted) }

/* ---------- Property report (v3) ---------- */
.report { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px }
@media (max-width: 760px) { .report { grid-template-columns: 1fr } }
.rcard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 10px; align-content: start; min-width: 0; border-top: 4px solid var(--line) }
.rcard.hot { border-top-color: var(--accent) }
.rcard.warn { border-top-color: #c98a1b }
.rcard h3 { font-size: 21px }
.rcard .k { font: 800 30px var(--display); font-variant-numeric: tabular-nums }
.rcard p { color: var(--muted); font-size: 15px }
.rcard .tag { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent) }
.rcard.warn .tag { color: #b5780f }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px 14px; font-size: 14px }
.facts span { color: var(--muted); display: block; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase }
.facts b { font-variant-numeric: tabular-nums }
.meter { height: 12px; border-radius: 99px; background: var(--soft); overflow: hidden; display: flex }
.meter i { background: var(--accent); display: block }
.rcard a { color: var(--accent); font-weight: 700; text-decoration: none }
.lock { color: var(--muted); font-size: 15px; border: 1px dashed var(--line); border-radius: 14px; padding: 18px; margin-top: 26px }

/* ---------- Net proceeds ---------- */
.net { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; margin-top: 26px; overflow: hidden }
@media (max-width: 820px) { .net { grid-template-columns: 1fr } }
.net .nin { padding: 24px; display: grid; gap: 12px; align-content: start }
.net .nout { padding: 24px; background: var(--soft); display: grid; gap: 8px; align-content: start }
.net table td { white-space: normal }
.net .total td { font: 800 22px var(--display); border-bottom: 0; padding-top: 14px }
.net .total td.num { color: var(--accent) }

/* ---------- Closings ---------- */
.deals { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 24px }
.deal { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 4px; min-width: 0 }
.deal .p { font: 800 24px var(--display); color: var(--accent); font-variant-numeric: tabular-nums }
.deal b { font-size: 16px; overflow-wrap: anywhere }
.deal span { font-size: 13px; color: var(--muted) }
.deal .who { color: var(--ink); font-weight: 600; font-size: 14px; margin-top: 4px }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 24px }
@media (max-width: 1000px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 820px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.tm { display: grid; gap: 4px; align-content: start; min-width: 0 }
.tm img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; max-width: 100%; background: var(--soft) }
.tm b { font: 700 18px var(--display); margin-top: 6px }
.tm span { color: var(--muted); font-size: 14px }
.tm a { color: var(--accent); font-weight: 700; text-decoration: none; font-size: 15px }
.dev { margin-top: 26px; background: var(--soft); border-radius: 16px; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center }
@media (max-width: 760px) { .dev { grid-template-columns: 1fr } }
.dev > div { display: grid; gap: 8px }
.dev b { font: 700 22px var(--display) }
.dev p { color: var(--muted) }
.dev .small { font-size: 13px }
.dev .btn { text-decoration: none; text-align: center }

/* ---------- Care: situations + promises ---------- */
.care-intro { color: var(--muted); max-width: 62ch; margin-top: 12px; font-size: 18px }
.care { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin-top: 28px }
@media (max-width: 760px) { .care { grid-template-columns: 1fr } }
.care div { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; display: grid; gap: 6px; align-content: start }
.care b { font: 700 19px/1.3 var(--display) }
.care p { color: var(--muted); font-size: 16px }
.promise { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 22px; margin-top: 40px }
@media (max-width: 820px) { .promise { grid-template-columns: 1fr } }
.pr-list { display: grid; gap: 10px; align-content: start; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px }
.pr-list p { color: var(--muted) } .pr-list p b { color: var(--ink) }
.shield { display: grid; gap: 10px; align-content: start; background: var(--soft); border-radius: 16px; padding: 24px }
.shield b { font: 700 20px var(--display) }
.shield p { color: var(--muted); font-size: 15px }
.shield a { color: var(--accent); font-weight: 700; text-decoration: none }

footer a { color: inherit; text-decoration: underline }
footer { margin-top: 72px; border-top: 1px solid var(--line); padding-block: 28px 40px; font-size: 13px; color: var(--muted) }
footer .in { display: grid; gap: 8px }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important } }

/* ================= v4: top menu + extra pages ================= */
.nav { background: var(--night); color: var(--on-night); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; border-bottom: 1px solid rgba(255,255,255,.08) }
.nav-in { max-width: 1080px; margin: 0 auto; padding-inline: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px }
.nav-brand { font: 800 17px var(--display); color: #fff; text-decoration: none; line-height: 1.15; white-space: nowrap }
.nav-brand small { display: block; font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65) }
.nav-menu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap }
.nav-menu > a { color: rgba(255,255,255,.82); text-decoration: none; font: 600 15px var(--body); padding: 8px 11px; border-radius: 8px }
.nav-menu > a:hover { color: #fff; background: rgba(255,255,255,.08) }
.nav-menu > a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 #7fe0b5 }
.nav-tools { display: flex; gap: 8px; align-items: center; margin-left: 10px }
.nav-phone { color: #fff; font: 700 14px var(--body); text-decoration: none; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 12px; white-space: nowrap }
.langBtn { font: 500 12px var(--mono); color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 7px 12px; cursor: pointer }
.nav-toggle { display: none; font: 600 15px var(--body); color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 8px 14px; cursor: pointer }
@media (max-width: 1180px) {
  .nav-toggle { display: block }
  .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--night); flex-direction: column; align-items: stretch; padding: 10px 20px 18px; gap: 2px; border-bottom: 1px solid rgba(255,255,255,.1) }
  .nav-menu.open { display: flex }
  .nav-menu > a { padding: 12px 8px; font-size: 17px }
  .nav-tools { margin: 10px 0 0 }
}
.hero-body { padding-top: 56px }
.hero { padding-block: 0 72px }

/* page header for inner pages */
.phero { background: var(--night); color: var(--on-night); padding-block: 56px 60px }
.phero .in { display: grid; gap: 16px }
.phero h1 { font: 800 clamp(36px, 6vw, 60px)/1.05 var(--display); letter-spacing: -0.015em; text-wrap: balance; margin: 0; max-width: 18ch }
.phero p { color: var(--night-muted); font-size: clamp(18px, 2.2vw, 21px); max-width: 60ch }
.phero .label { color: #7fe0b5 }
.phero.photo { background: #1b2a22 url("rowhouses.webp") center / cover no-repeat; position: relative }
.phero.photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,24,.82), rgba(10,18,24,.7)) }
.phero.photo > * { position: relative }
.miniSearch { display: flex; gap: 8px; background: #fff; border-radius: 14px; padding: 8px; max-width: 680px; margin-top: 6px }
.miniSearch input { border: 0; background: transparent; color: #14202a; font-size: 18px; padding: 12px; min-width: 0 }
.miniSearch input:focus { outline: none }
.miniSearch .btn { white-space: nowrap; flex: none }
@media (max-width: 560px) { .miniSearch { flex-direction: column } }

/* explainer numbers */
.explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px }
@media (max-width: 760px) { .explain { grid-template-columns: 1fr } }
.explain div { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: grid; gap: 6px; align-content: start }
.explain b { font: 800 30px var(--display); color: var(--accent) }
.explain p { color: var(--muted); font-size: 15px }

/* our projects */
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px }
@media (max-width: 760px) { .projects { grid-template-columns: 1fr } }
.proj { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: grid; min-width: 0 }
.proj img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; max-width: 100% }
.proj > div { padding: 18px 20px 22px; display: grid; gap: 6px }
.proj b { font: 700 20px var(--display) }
.proj ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 15px }
.proj .status { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #b5780f }

/* help page (from the draft) */
.hsteps { display: grid; gap: 18px; counter-reset: s; margin-top: 22px }
.hstep { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 18px }
.hstep::before { counter-increment: s; content: counter(s); grid-row: span 3; width: 44px; height: 44px; border-radius: 50%; background: var(--soft); color: var(--accent); display: grid; place-items: center; font: 800 20px var(--display) }
.hstep h3 { font: 700 23px var(--display); margin: 0 }
.hstep .when { font-size: 15px; color: var(--muted); font-style: italic }
.hstep ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted) }
.hstep ul b { color: var(--ink) }
.hstep .num { font: 700 18px var(--display); color: var(--ink); white-space: nowrap }
.ex { margin-top: 10px; background: var(--soft); border-radius: 12px; padding: 14px 16px; font-size: 16px; overflow-x: auto }
.ex table { border-collapse: collapse; width: 100%; min-width: 300px }
.ex td { padding: 4px 0; white-space: normal; border: 0 } .ex td:last-child { text-align: right }
.ex tr.t td { font-weight: 700; border-top: 1px solid var(--line); padding-top: 8px }
@media (max-width: 520px) { .hstep { grid-template-columns: 1fr } .hstep::before { grid-row: auto } }
.free { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px }
@media (max-width: 760px) { .free { grid-template-columns: 1fr } }
.free div { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 6px; align-content: start }
.free b { font: 700 18px var(--display) }
.free p { color: var(--muted); font-size: 15px }
.free .num { font: 800 21px var(--display); color: var(--accent); user-select: all }
.free a { color: var(--accent); font-weight: 700; text-decoration: none }
.never { border: 2px solid var(--warn); border-radius: 16px; padding: 24px; display: grid; gap: 12px; margin-top: 8px }
.never h2 { font-size: 26px }
.never ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px }
.never li::before { content: "✕"; color: var(--warn); font-weight: 700; margin-right: 10px }
.never p { color: var(--muted); font-size: 15px }
.breathe { background: var(--soft); color: var(--ink); border-radius: 16px; padding: 22px; display: grid; gap: 8px; max-width: 680px }
.breathe b { font: 700 20px var(--display) }
.breathe p { color: var(--muted) }
.ctaband { margin-top: 72px; background: var(--soft); border-radius: 18px; padding: 28px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap }
.ctaband b { font: 800 26px var(--display) }
.ctaband .btn { text-decoration: none }

/* project cards: the photo is the background, text sits on a dark fade at the bottom */
.proj.bg { min-height: 460px; background-color: #1b2a22; background-size: cover; background-position: center top; position: relative; align-content: end; border: 0 }
.proj.bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,24,0) 35%, rgba(10,18,24,.88) 78%) }
.proj.bg > div { position: relative; color: #fff }
.proj.bg b { color: #fff }
.proj.bg ul { color: rgba(255,255,255,.85) }
.proj.bg .status { color: #ffd27a }

/* developments slideshow: whole building visible, caption under the picture, crossfade every 4 seconds */
.slides { position: relative; margin-top: 24px; border-radius: 18px; overflow: hidden; max-width: 360px; display: grid; background: var(--night) }
.slide { grid-area: 1 / 1; min-width: 0; opacity: 0; transition: opacity 1.2s ease; display: grid; pointer-events: none }
.slide.on { opacity: 1; pointer-events: auto }
.slide .pic { aspect-ratio: 4 / 5; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #e8edf0; max-width: 100% }
.slide .cap { padding: 16px 20px 34px; display: grid; gap: 4px; color: #fff; background: var(--night) }
.slide .cap b { font: 800 clamp(18px, 2.2vw, 22px) var(--display) }
.slide .cap span { color: rgba(255,255,255,.85); font-size: 15px }
.slide .status { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #ffd27a !important }
.slide .rend { font: 500 11px var(--mono); letter-spacing: .08em; color: rgba(255,255,255,.65) }
.dots { position: absolute; left: 20px; bottom: 14px; display: flex; gap: 8px; z-index: 2 }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4) }
.dots i.on { background: #fff }

/* About header: 3 Manhattan photos (CC0) crossfading behind the text */
.phero.rot { position: relative; overflow: hidden; padding-block: 90px 96px; background: #10171c }
.phero.rot .bgs, .phero.rot .bgs i { position: absolute; inset: 0 }
.phero.rot .bgs i { background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease }
.phero.rot .bgs i.on { opacity: 1 }
.phero.rot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,18,24,.86) 0%, rgba(10,18,24,.6) 60%, rgba(10,18,24,.35) 100%) }
.phero.rot .in { position: relative; z-index: 1 }
.phero.rot p { color: rgba(255,255,255,.88) }

/* About header: two lines that swap every 6 seconds, stacked in the same spot */
.rotline { display: grid; max-width: 60ch }
.rotline span { grid-area: 1 / 1; opacity: 0; transition: opacity .9s ease }
.rotline span.on { opacity: 1 }
.phero h1.rothead { font: 700 clamp(18px, 2.2vw, 24px)/1.3 var(--display); max-width: 38ch; letter-spacing: 0 }
.phero + .agent { margin-top: 0 }

/* Home header: rotating photos behind the dark fade */
.hero.rot { isolation: isolate; background-image: none }
.hero.rot > .bgs { position: absolute; inset: 0; z-index: -1 }
.hero.rot > .bgs i { position: absolute; inset: 0; background-size: cover; background-position: center 40%; opacity: 0; transition: opacity 1.4s ease }
.hero.rot > .bgs i.on { opacity: 1 }
.hero .rothead { font: 700 clamp(20px, 2.6vw, 28px)/1.3 var(--display); max-width: 34ch; color: #fff }

/* ---------- Home corta (09/10/2026): case felici + 2 inviti, modulo nascosto finche' non serve ---------- */
details.qs { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px }
details.qs summary { cursor: pointer; font-weight: 700; color: var(--accent); list-style: none }
details.qs summary::-webkit-details-marker { display: none }
details.qs summary::before { content: "+ "; }
details.qs[open] summary::before { content: "− "; }
details.qs[open] { display: grid; gap: 12px }
.happy h2 { text-align: center }
.hgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px }
.hgrid figure { margin: 0; border-radius: 14px; overflow: hidden; background: var(--paper); border: 1px solid var(--line) }
.hgrid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s }
.hgrid figure:hover img { transform: scale(1.04) }
.hgrid figcaption { padding: 12px 14px; font-weight: 700 }
.cta2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px }
.cta2 > div { background: var(--soft); border-radius: 16px; padding: 22px; display: grid; gap: 8px; align-content: start }
.cta2 b { font: 800 22px var(--display) }
.cta2 .btn { text-decoration: none; justify-self: start; margin-top: 6px }
.btn.ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent) }
.btn.ghost:hover { background: var(--accent); color: var(--on-accent) }
@media (max-width: 900px) { .hgrid { grid-template-columns: 1fr 1fr } }
@media (max-width: 640px) { .cta2 { grid-template-columns: 1fr } .hgrid { gap: 10px } .hgrid figcaption { padding: 10px; font-size: 14px } }
body[data-page="index"] #cma.closed { display: none }
body[data-page="index"] .faq { grid-template-columns: 1fr; max-width: 820px }
body[data-page="index"] .faq figure { display: none }

/* ---------- Home ancora piu' corta (09/10/2026) ---------- */
body[data-page="index"] #reportLock { display: none }
body[data-page="index"] #report { margin: 0 }
.happy { margin-top: 40px }
.happy h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 }
.hgrid { margin-top: 16px; gap: 12px }
.hgrid img { aspect-ratio: 3 / 2 }
.hgrid figcaption { padding: 9px 12px; font-size: 15px }
.cta2 { margin-top: 14px; gap: 12px }
.cta2 > div { padding: 16px 18px; gap: 4px; grid-template-columns: 1fr auto; align-items: center }
.cta2 > div b { grid-column: 1 } .cta2 > div .basis { grid-column: 1; font-size: 14px }
.cta2 .btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 11px 16px; font-size: 15px; white-space: nowrap }
.cta2 b { font-size: 18px }
.faqwrap { margin-top: 28px }
.faqall { border: 1px solid var(--line); border-radius: 14px; background: var(--paper) }
.faqall > summary { cursor: pointer; padding: 16px 20px; font: 700 18px var(--display); list-style: none; color: var(--ink) }
.faqall > summary::-webkit-details-marker { display: none }
.faqall > summary::after { content: " +"; color: var(--accent) }
.faqall[open] > summary::after { content: " −" }
.faqall > section { margin: 0; padding: 0 20px 16px }
.faqall > section > h2 { display: none }
.faqall .faq { margin-top: 0 }
@media (max-width: 640px) {
  .hgrid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px }
  .hgrid figure { scroll-snap-align: start }
  .cta2 > div { grid-template-columns: 1fr }
  .cta2 .btn { grid-column: 1; grid-row: auto; justify-self: stretch; text-align: center; margin-top: 6px }
}
@media (max-width: 820px) {
  .welcome { padding: 16px 18px; gap: 6px }
  .welcome .wico, .welcome ul, .welcome .basis { display: none }
  .welcome h3 { font-size: 20px }
  .card .res.waiting { padding-top: 0 }
}

/* ---------- Foto case che cambiano ogni 5 s (09/10/2026) ---------- */
.hslide { position: relative; margin-top: 14px; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 7; background: #10171c }
.hslide .bgs, .hslide .bgs i { position: absolute; inset: 0 }
.hslide .bgs i { background-size: cover; background-position: center 55%; opacity: 0; transition: opacity 1.4s ease }
.hslide .bgs i.on { opacity: 1 }
.hslide .bgs i span { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 16px; color: #fff; font: 700 clamp(18px, 2.4vw, 26px) var(--display); font-style: normal; background: linear-gradient(transparent, rgba(10,18,24,.7)) }
.cta2 > div { grid-template-columns: 1fr auto; padding: 14px 18px }
.cta2 > div .btn { grid-row: auto }
@media (max-width: 640px) {
  .hslide { aspect-ratio: 4 / 3 }
  .cta2 > div { grid-template-columns: 1fr auto }
  .cta2 .btn { grid-column: 2; justify-self: end; margin-top: 0; padding: 10px 12px; font-size: 14px }
  .cta2 b { font-size: 16px }
}
.welcome .wico, .welcome ul, .welcome .basis { display: none }
.welcome { gap: 8px }
body[data-page="index"] #tool.closed { display: none }
.hero a.manual { display: inline-block; margin-top: 8px; color: #fff; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px }