/* Typefaces, served from this site (assets/fonts) instead of Google Fonts. A stylesheet on someone else's server in the
   <head> blocks the whole page from painting while it loads: when that connection hangs, the visitor sees a white
   screen. Same families and weights as before (Latin subset; the site is English). Bricolage Grotesque and IBM Plex
   Sans are variable files, so one file covers every weight below. */
@font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/bricolage-grotesque-variable.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/bricolage-grotesque-variable.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/ibm-plex-sans-variable.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/ibm-plex-sans-variable.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/ibm-plex-sans-variable.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/ibm-plex-sans-variable.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Manantial Homes: shared styles. Palette derived from the logo green (#125A00). */
:root{
  --bg:#F6F7F2;
  --surface:#ECEFE4;
  --ink:#151A0F;
  --ink-soft:#4A5140;
  --ink-faint:#666E5B;
  --line:#DBDECE;
  --contrast-bg:#111A0C;
  --contrast-text:#E7EADC;
  --contrast-text-soft:#A7AF9A;
  --accent:#125A00;
  --accent-deep:#0C3E00;
  --accent-tint:#DCE6CF;
  --accent-on:#F5F8EF;
  --danger:#8C2A1A;
  --danger-tint:#F4E3DE;
  --brand:#135900; /* exact colour of the logo mark */
  --radius:12px;
  --radius-lg:20px;
  --radius-xl:28px;
  --gut:clamp(10px, 1.6vw, 24px);
  --font-display:'Bricolage Grotesque','Avenir Next','Segoe UI',sans-serif;
  --font-body:'IBM Plex Sans','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10140A; --surface:#181D11; --ink:#EAEDE1; --ink-soft:#B5BCA7; --ink-faint:#8E9581; --line:#2A321F;
    --contrast-bg:#E7EADC; --contrast-text:#14190D; --contrast-text-soft:#535A48;
    --accent:#4E9A31; --accent-deep:#71BF52; --accent-tint:#1C2815; --accent-on:#0B1206;
    --danger:#E58C7A; --danger-tint:#2E1A15; --brand:#4E9A31;
  }
}
:root[data-theme="dark"]{
  --bg:#10140A; --surface:#181D11; --ink:#EAEDE1; --ink-soft:#B5BCA7; --ink-faint:#8E9581; --line:#2A321F;
  --contrast-bg:#E7EADC; --contrast-text:#14190D; --contrast-text-soft:#535A48;
  --accent:#4E9A31; --accent-deep:#71BF52; --accent-tint:#1C2815; --accent-on:#0B1206;
  --danger:#E58C7A; --danger-tint:#2E1A15; --brand:#4E9A31;
}

*{ box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--font-display); text-wrap:balance; margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.skip{ position:absolute; left:-999px; top:8px; background:var(--accent); color:var(--accent-on); padding:10px 16px; z-index:100; border-radius:var(--radius); font-weight:600; }
.skip:focus{ left:8px; }
.container{ max-width:1180px; margin:0 auto; padding-left:32px; padding-right:32px; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.cap{ font-size:12px; letter-spacing:0.06em; color:var(--ink-faint); text-transform:uppercase; }
.icon{ width:20px; height:20px; fill:currentColor; display:block; flex-shrink:0; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; font-family:var(--font-body); font-weight:600; font-size:14.5px; padding:12px 22px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease; }
.btn:active{ transform:translateY(1px); }
.btn-accent{ background:var(--accent); color:var(--accent-on); }
.btn-line{ border-color:var(--accent); color:var(--accent); background:transparent; }
/* Hover only on devices that actually have a pointer that can hover: on touch, :hover sticks after a tap until the
   user taps elsewhere, which reads as a stuck/broken button. */
@media (hover:hover){
  .btn-accent:hover{ background:var(--accent-deep); }
  .btn-line:hover{ background:var(--accent); color:var(--accent-on); }
}
.btn .icon{ width:16px; height:16px; }
.link{ font-weight:600; font-size:14.5px; border-bottom:1px solid var(--ink-faint); padding-bottom:1px; transition:border-color .15s ease, color .15s ease; display:inline-flex; align-items:center; gap:6px; }
.link:hover{ color:var(--accent); border-color:var(--accent); }
.link .icon{ width:14px; height:14px; }

/* HEADER */
.nav{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
/* In-app browsers (Telegram, Instagram) and phones with a notch can show a strip above the header: the page runs under
   the status bar (viewport-fit=cover) and the header grows by the safe area, and anything above it (overscroll, a
   toolbar sliding away) is painted in the header colour instead of showing the page through. */
.nav{ padding-top:env(safe-area-inset-top, 0px); }
.nav::before{ content:''; position:absolute; left:calc(var(--gut) * -1); right:calc(var(--gut) * -1); bottom:100%; height:100vh; background:var(--bg); pointer-events:none; }
html::before{ content:''; position:fixed; z-index:39; left:0; right:0; top:0; height:env(safe-area-inset-top, 0px); background:var(--bg); pointer-events:none; }
.nav-row{ height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; font-size:23px; letter-spacing:-0.01em; white-space:nowrap; }
.brand-mark{ display:block; flex:none; width:44px; height:44px; background:var(--brand); -webkit-mask:url(/assets/img/logo.png) center/contain no-repeat; mask:url(/assets/img/logo.png) center/contain no-repeat; }
.nav-links{ display:flex; align-items:center; gap:4px; font-size:14px; font-weight:500; color:var(--ink-soft); }
.nav-item > a{ display:flex; align-items:center; gap:4px; padding:29px 12px; }
.nav-item > a .icon{ width:11px; height:11px; }
.nav-item:hover > a, .nav-item > a[aria-current="page"], .nav-item > a.is-section{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:22px; flex-shrink:0; }
.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:none; padding:0; color:var(--ink); cursor:pointer; }
.nav-toggle .icon{ width:24px; height:24px; }
.nav-toggle .ic-close{ display:none; }
.nav-toggle.is-open .ic-menu{ display:none; }
.nav-toggle.is-open .ic-close{ display:block; }
@media (max-width:1339px){ .nav-links, .nav-right{ display:none; } .nav-toggle{ display:flex; } }

/* PAGE HERO (interior) */
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--ink-faint); padding-top:28px; }
.crumbs a:hover{ color:var(--accent); }
.crumbs span[aria-hidden]{ opacity:.6; }
.page-hero{ padding:20px 0 48px; max-width:820px; }
.page-hero h1{ font-size:40px; line-height:1.12; letter-spacing:-0.01em; font-weight:600; margin-bottom:16px; }
.page-hero .lead{ font-size:18px; line-height:1.65; color:var(--ink-soft); max-width:60ch; }
.page-hero .actions{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; row-gap:14px; margin-top:26px; }

/* DOC LAYOUT */
.doc{ display:grid; grid-template-columns:230px 1fr; gap:64px; padding:16px 0 96px; border-top:1px solid var(--line); }
.doc-aside{ padding-top:36px; }
.doc-aside-inner{ position:sticky; top:96px; display:flex; flex-direction:column; gap:4px; }
.doc-aside .cap{ margin-bottom:10px; }
.doc-aside a{ font-size:14.5px; color:var(--ink-soft); padding:8px 0; border-left:2px solid transparent; padding-left:14px; margin-left:-14px; }
.doc-aside a:hover{ color:var(--ink); }
.doc-aside a[aria-current="page"]{ color:var(--ink); font-weight:600; border-left-color:var(--accent); }
.doc-main{ padding-top:36px; min-width:0; }
@media (max-width:900px){ .doc{ grid-template-columns:1fr; gap:0; } .doc-aside{ display:none; } }

/* PROSE */
.prose{ max-width:680px; }
.prose.prose-legal{ max-width:none; } /* legal pages use the full width of the page block */
.prose > * + *{ margin-top:18px; }
.prose h2{ font-size:26px; font-weight:600; margin-top:48px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:19px; font-weight:600; margin-top:30px; }
.prose p, .prose li{ font-size:16.5px; line-height:1.72; color:var(--ink-soft); }
.prose ul, .prose ol{ padding-left:22px; margin-bottom:0; }
.prose li + li{ margin-top:8px; }
.prose a:not(.btn):not(.link):not(.cta-pill){ color:var(--accent-deep); border-bottom:1px solid currentColor; }
.prose strong{ color:var(--ink); }
.prose .meta{ font-size:14px; color:var(--ink-faint); }
.section{ margin-top:56px; }
.section:first-child{ margin-top:0; }
.section h2{ font-size:26px; font-weight:600; margin-bottom:20px; }
.section > .intro{ font-size:16.5px; line-height:1.65; color:var(--ink-soft); max-width:62ch; margin-bottom:24px; }

/* CHECK LIST */
.checklist{ display:flex; flex-direction:column; gap:16px; }
.check-row{ display:flex; gap:12px; align-items:flex-start; }
.check-row .icon{ width:18px; height:18px; color:var(--accent); margin-top:3px; }
.check-row p{ font-size:15.5px; line-height:1.55; color:var(--ink-soft); }
.check-row.muted .icon{ color:var(--ink-faint); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
@media (max-width:760px){ .two-col{ grid-template-columns:1fr; gap:32px; } }

/* STEPS */
.steps{ display:flex; flex-direction:column; gap:26px; counter-reset:step; }
.step{ display:flex; gap:20px; }
.step-num{ font-family:var(--font-mono); font-size:14px; color:var(--ink-faint); width:22px; padding-top:3px; flex-shrink:0; }
.step h3, .step h4{ font-size:17px; font-weight:600; margin-bottom:5px; }
.step p{ font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:56ch; }

/* SERVICE TYPES (asymmetric) */
.svc-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:20px; }
.svc-feature{ background:var(--accent-tint); border-radius:var(--radius); padding:32px; color:var(--accent-deep); display:flex; flex-direction:column; gap:14px; }
.svc-feature h3{ font-size:22px; font-weight:600; color:var(--ink); }
.svc-feature p, .svc-small p{ font-size:15px; line-height:1.6; color:var(--ink-soft); }
.svc-feature .icon, .svc-small .icon{ width:28px; height:28px; }
.svc-stack{ display:flex; flex-direction:column; gap:20px; }
.svc-small{ background:var(--surface); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:10px; flex:1; color:var(--ink-faint); }
.svc-small h3{ font-size:18px; font-weight:600; color:var(--ink); }
.svc-list{ padding-left:18px; margin:4px 0 0; color:var(--ink-soft); font-size:14.5px; line-height:1.6; }
@media (max-width:880px){ .svc-grid{ grid-template-columns:1fr; } }

/* TABLE */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table{ border-collapse:collapse; width:100%; min-width:560px; font-size:15px; }
th, td{ text-align:left; padding:16px 18px; vertical-align:top; }
th{ font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint); background:var(--surface); font-weight:700; }
tbody tr + tr td{ border-top:1px solid var(--line); }
td:first-child{ font-weight:600; color:var(--ink); }
td{ color:var(--ink-soft); }
.ph{ font-family:var(--font-mono); font-size:14px; color:var(--accent-deep); background:var(--accent-tint); padding:2px 6px; border-radius:2px; white-space:nowrap; }

/* NOTICE */
.notice{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:var(--radius); background:var(--surface); font-size:14.5px; line-height:1.55; color:var(--ink-soft); }
.notice .icon{ width:20px; height:20px; margin-top:1px; color:var(--accent); }
.notice.danger{ color:var(--ink); }
.notice strong{ color:var(--ink); }

/* FAQ */
details.faq{ border-top:1px solid var(--line); padding:0; }
details.faq:last-of-type{ border-bottom:1px solid var(--line); }
details.faq summary{ list-style:none; cursor:pointer; padding:20px 44px 20px 0; font-weight:600; font-size:16.5px; position:relative; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:""; position:absolute; right:6px; top:50%; width:10px; height:10px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:translateY(-70%) rotate(45deg); transition:transform .2s ease; }
details.faq[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
details.faq .faq-a{ padding:0 44px 22px 0; font-size:15.5px; line-height:1.68; color:var(--ink-soft); max-width:66ch; }
.faq-group + .faq-group{ margin-top:48px; }
.faq-group h2{ font-size:24px; font-weight:600; margin-bottom:16px; }

/* FORMS */
.form{ display:flex; flex-direction:column; gap:20px; max-width:640px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label, .field legend{ font-size:14px; font-weight:600; color:var(--ink); }
/* <legend> doesn't reliably take part in the fieldset's flex gap (it isn't a normal flex item in every browser), so
   the space below it collapses to 0 without this. */
.field legend{ margin-bottom:8px; }
.field .req{ color:var(--danger); margin-left:2px; }
.field .help{ font-size:13px; color:var(--ink-faint); }
.field input, .field select, .field textarea{ font:inherit; font-size:16px; color:var(--ink); background:var(--bg); border:1px solid color-mix(in srgb, var(--ink) 38%, var(--line)); border-radius:var(--radius); padding:12px 14px; width:100%; }
.field textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:var(--danger); }
.field .err{ display:none; font-size:13px; color:var(--danger); font-weight:600; }
.field.invalid .err{ display:block; }
fieldset.field{ border:none; padding:0; margin:0; }
.choices{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.choice{ display:flex; align-items:center; gap:9px; font-size:15px; color:var(--ink-soft); cursor:pointer; }
.choice input{ width:18px; height:18px; accent-color:var(--accent); margin:0; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-soft); line-height:1.5; }
.consent input{ width:18px; height:18px; margin-top:2px; accent-color:var(--accent); flex-shrink:0; }
.consent a{ color:var(--accent-deep); border-bottom:1px solid currentColor; }
.hp{ position:absolute; left:-9999px; height:0; overflow:hidden; }
.form-status{ display:none; padding:16px 18px; border-radius:var(--radius); font-size:15px; line-height:1.55; }
.form-status.show{ display:block; }
.form-status.ok{ background:var(--accent-tint); color:var(--ink); }
.form-status.demo{ background:var(--surface); color:var(--ink-soft); }
.form-status.fail{ background:var(--danger-tint); color:var(--ink); }
.side-card{ background:var(--surface); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:14px; }
.side-card h3{ font-size:18px; font-weight:600; }
.contact-line{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-soft); line-height:1.5; }
.contact-line .icon{ color:var(--accent); margin-top:2px; }
.split-form{ display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start; }
@media (max-width:900px){ .split-form{ grid-template-columns:1fr; gap:40px; } }

/* HOME */
.hero{ --hf:clamp(36px, 6vw, 72px); padding-block:56px 72px; display:grid; grid-template-columns:1fr 1.1fr; grid-template-rows:auto 1fr; grid-template-areas:"h1 art" "copy art"; gap:28px 56px; }
.hero-h1{ grid-area:h1 / h1 / h1 / art; position:relative; z-index:1; font-size:var(--hf); line-height:1.08; letter-spacing:-0.025em; font-weight:600; margin:0; pointer-events:none; }
.hero-h1 a, .hero-h1 .rb{ pointer-events:auto; }
.hero-h1 .ln{ display:block; white-space:nowrap; width:max-content; }
.hero-copy{ grid-area:copy; align-self:end; position:relative; z-index:1; }
.hero-art{ grid-area:art; grid-row:1 / 3; display:flex; flex-direction:column; min-height:calc(var(--hf) * 3.3 + 250px); }
/* The photo is clipped by a stepped, rounded path computed in micro.js so every headline line tucks into the image */
.hero-art .art-panel{ position:relative; flex:1; aspect-ratio:auto; min-height:260px; background:transparent; overflow:visible; border-radius:0; }
.hero-art .art-panel.photo{ background:transparent; }
.hero-art .art-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 44%; }
.hero p.sub-copy{ font-size:clamp(18px, 1.7vw, 21px); line-height:1.55; color:var(--ink-soft); max-width:none; text-wrap:balance; margin-bottom:26px; }
/* Rebus: small images and icons standing in the headline */
.nb{ white-space:nowrap; }
.rb{ display:inline-block; vertical-align:-.1em; height:.82em; width:1.75em; margin-left:.2em; border-radius:999px; overflow:hidden; background:var(--accent-tint); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.rb:hover{ transform:rotate(-3deg) scale(1.05); }
.rb img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
.rb-sea img{ object-position:50% 38%; }
.rb-icon{ display:inline-grid; place-items:center; width:1.35em; background:var(--accent); color:var(--accent-on); }
.rb-icon .icon{ width:.5em; height:.5em; }
.hero-cta{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; row-gap:14px; }
.art-panel{ aspect-ratio:1/1.02; background:var(--accent-tint); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--accent-deep); }
.art-panel svg{ width:64%; height:64%; }
.art-caption{ margin-top:10px; font-size:12px; color:var(--ink-faint); }
@media (max-width:880px){ .hero-h1 .ln{ width:auto; } .hero-art .art-panel{ overflow:hidden; border-radius:14px; } .hero-art{ min-height:0; } .hero-art .art-panel img{ position:static; border-radius:14px; } .hero{ grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"h1" "copy" "art"; gap:28px; } .hero-h1{ grid-area:h1; } .hero-art{ grid-row:auto; margin-top:0; } .hero-art .art-panel{ aspect-ratio:4/3; flex:none; } .hero-art .art-panel::before, .hero-art .nc{ display:none; } .hero-h1{ font-size:clamp(32px, 9vw, 52px); } .hero-h1 .ln{ display:inline; white-space:normal; } .page-hero h1{ font-size:32px; } }
@media (max-width:480px){ .page-hero h1{ font-size:28px; } .container{ padding-left:20px; padding-right:20px; } }

.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:26px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.stat:first-child{ border-left:none; padding-left:0; }
.stat .num{ font-family:var(--font-mono); font-size:22px; font-weight:500; }
.stat .label{ font-size:13px; color:var(--ink-soft); line-height:1.4; }
@media (max-width:880px){ .stats-row{ grid-template-columns:1fr 1fr; } .stat{ border-left:none; border-top:1px solid var(--line); padding:20px 4px; } .stat:nth-child(odd){ padding-left:0; } }

.block{ padding-block:96px; }
.block-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:36px; max-width:640px; }
.block-head h2{ font-size:30px; font-weight:600; }
.block-head p{ font-size:17px; line-height:1.6; color:var(--ink-soft); }
.bento{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
.bento-featured{ background:var(--accent-tint); border-radius:var(--radius); padding:36px; display:flex; flex-direction:column; gap:16px; color:var(--accent-deep); }
.bento-featured .icon, .bento-small .icon{ width:30px; height:30px; }
.bento-featured h3, .bento-small h3{ font-size:22px; font-weight:600; color:var(--ink); }
.bento-featured p, .bento-small p{ font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:46ch; }
.link-list{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.link-list a{ font-size:14.5px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.link-list a:hover{ color:var(--accent); }
.link-list .icon{ width:13px; height:13px; }
.bento-small{ background:var(--surface); border-radius:var(--radius); padding:36px; display:flex; flex-direction:column; gap:16px; color:var(--ink-faint); }
@media (max-width:880px){ .bento{ grid-template-columns:1fr; } .bento-featured, .bento-small{ padding:28px; } }

.split{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; }
.split h2{ font-size:28px; font-weight:600; line-height:1.22; margin-bottom:18px; }
.split .lead{ font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:46ch; }
.split h3{ font-size:15px; font-weight:700; margin-bottom:16px; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:36px; } }

.dark{ background:var(--contrast-bg); color:var(--contrast-text); }
.dark-in{ padding-block:96px; display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; }
.dark h2{ color:var(--contrast-text); font-size:28px; font-weight:600; margin-bottom:16px; }
.dark .lead{ font-size:16px; line-height:1.65; color:var(--contrast-text-soft); max-width:36ch; }
.dark .step-num{ color:var(--contrast-text-soft); }
.dark .step h3, .dark .step h4{ color:var(--contrast-text); }
.dark .step p{ color:var(--contrast-text-soft); }
@media (max-width:880px){ .dark-in{ grid-template-columns:1fr; gap:36px; } }

.areas{ background:var(--surface); }
.areas-in{ padding-block:88px; display:flex; flex-direction:column; gap:22px; }
.areas h2{ font-size:28px; font-weight:600; max-width:22ch; }
.areas p{ font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:none; }
@media (min-width:900px){ .areas p{ white-space:nowrap; } }
.pills{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.pills a, .pills span{ font-size:14px; font-weight:600; padding:10px 20px; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--ink); }
.pills a:hover{ border-color:var(--accent); color:var(--accent-deep); }
.dark .pills span, .dark .pills a{ background:transparent; color:var(--contrast-text); border-color:color-mix(in srgb, var(--contrast-text) 30%, transparent); }

/* TEAM / DISTRICTS */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.team-card .art{ aspect-ratio:4/5; background:var(--accent-tint); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--accent-deep); font-family:var(--font-display); font-size:48px; font-weight:600; }
.team-card h3{ font-size:18px; font-weight:600; margin-top:14px; }
.team-card p{ font-size:14.5px; color:var(--ink-soft); margin-top:4px; }
@media (max-width:760px){ .team-grid{ grid-template-columns:1fr 1fr; } }
.district{ padding:32px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:0.5fr 1.5fr; gap:40px; }
.district:first-child{ border-top:none; padding-top:0; }
.district h3{ font-size:22px; font-weight:600; }
.district p{ font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:58ch; }
.tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--accent-deep); margin-top:8px; }
@media (max-width:760px){ .district{ grid-template-columns:1fr; gap:10px; } }

.art-panel{ overflow:hidden; }
.art-panel img{ width:100%; height:100%; object-fit:cover; }
.art-panel.photo{ background:var(--surface); }


/* BLOG */
.post-feature{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; padding-bottom:48px; border-bottom:1px solid var(--line); }
.post-art{ aspect-ratio:16/10; background:var(--accent-tint); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--accent-deep); }
.post-art svg{ width:22%; height:22%; }
.post-feature h2{ font-size:30px; font-weight:600; line-height:1.2; margin:10px 0 12px; }
.post-feature p{ font-size:16.5px; line-height:1.65; color:var(--ink-soft); margin-bottom:16px; }
.post-list{ display:flex; flex-direction:column; }
.post-row{ display:grid; grid-template-columns:150px 1fr; gap:32px; padding:28px 0; border-bottom:1px solid var(--line); }
.post-row h3{ font-size:21px; font-weight:600; line-height:1.28; margin-bottom:8px; }
.post-row p{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:62ch; }
.post-row .meta, .post-feature .meta{ font-size:13px; color:var(--ink-faint); }
.post-row h3 a:hover, .post-feature h2 a:hover{ color:var(--accent); }
@media (max-width:760px){ .post-feature{ grid-template-columns:1fr; gap:24px; } .post-row{ grid-template-columns:1fr; gap:8px; } }
.article{ max-width:700px; padding:24px 0 96px; }
.article h1{ font-size:38px; line-height:1.14; font-weight:600; letter-spacing:-0.01em; margin:14px 0 16px; }
.article .meta{ font-size:14px; color:var(--ink-faint); margin-bottom:36px; }
.article .prose p, .article .prose li{ font-size:17.5px; line-height:1.75; }
.article-end{ margin-top:56px; padding-top:32px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:16px; }
@media (max-width:640px){ .article h1{ font-size:30px; } }

/* CTA BAND */
.ctaband{ background:var(--accent); color:var(--accent-on); }
.ctaband-in{ padding-block:76px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; }
.ctaband h2{ color:var(--accent-on); font-size:32px; font-weight:600; max-width:20ch; }
.cta-row{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; justify-content:center; }
.ctaband .btn-accent{ background:var(--accent-on); color:var(--accent-deep); }
.ctaband .link{ color:var(--accent-on); border-color:color-mix(in srgb, var(--accent-on) 55%, transparent); }
.ctaband .link:hover{ color:var(--accent-on); border-color:var(--accent-on); }
@media (hover:hover){ .ctaband .btn-accent:hover{ background:var(--bg); } }
@media (max-width:480px){ .ctaband h2{ font-size:25px; } .cta-row{ flex-direction:column; gap:18px; } }

/* FOOTER */
footer{ background:var(--surface); position:sticky; bottom:0; z-index:0; }
/* Sticky-footer reveal: page content (ending with the CTA band) sits on top and slides away to uncover the footer pinned behind it. */
.cover{ position:relative; z-index:1; background:var(--bg); }
.foot-in{ padding-block:64px 28px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; }
.foot-brand p{ font-size:14px; color:var(--ink-soft); max-width:28ch; margin-top:14px; line-height:1.55; }
.foot-contact{ margin-top:16px; }
.foot-contact + .socials{ margin-top:10px; }
.foot-col h2{ font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.foot-col a{ display:block; font-size:14px; color:var(--ink-soft); padding:5px 0; }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{ border-top:1px solid var(--line); padding-block:22px; font-size:13px; color:var(--ink-faint); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot-bottom nav{ display:flex; gap:20px; flex-wrap:wrap; }
.foot-bottom a:hover{ color:var(--ink); }
@media (max-width:880px){ .foot-in{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot-in{ grid-template-columns:1fr; gap:32px; } }

.err-page{ padding-block:96px; }
.err-page > *{ max-width:560px; }
.err-page h1{ font-size:40px; font-weight:600; margin-bottom:16px; }
.err-page p{ font-size:17px; color:var(--ink-soft); line-height:1.6; margin-bottom:24px; }

[hidden]{ display:none !important; }

/* MEGA MENU */
.nav-scrim{ position:fixed; inset:0; z-index:39; background:color-mix(in srgb, var(--contrast-bg) 34%, transparent); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease, visibility 0s linear .22s; }
.nav-scrim.is-on{ opacity:1; visibility:visible; transition-delay:0s; }
.nav-item > a .icon{ transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.nav-item.is-open > a{ color:var(--ink); }
.nav-item.is-open > a .icon{ transform:rotate(180deg); }
.nav-item > a::after{ content:''; position:absolute; left:12px; right:12px; bottom:14px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.23,1,.32,1); }
.nav-item > a{ position:relative; }
.nav-item.is-open > a::after, .nav-item > a.is-section::after{ transform:scaleX(1); }
.nav-item > a.is-section:not(:hover)::after{ opacity:.35; }
.mega{ position:absolute; z-index:41; top:calc(100% + 10px); left:50%; width:min(1120px, calc(100vw - 48px)); transform:translateX(-50%) translateY(-8px) scale(.985); transform-origin:top center; opacity:0; visibility:hidden; pointer-events:none; background:var(--bg); border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 0 color-mix(in srgb, var(--bg) 60%, transparent) inset, 0 2px 4px rgba(17,26,12,.06), 0 28px 64px -16px rgba(17,26,12,.38); transition:opacity .18s ease, transform .26s cubic-bezier(.23,1,.32,1), visibility 0s linear .26s; }
.mega::before{ content:''; position:absolute; left:0; right:0; top:-14px; height:14px; }
.nav-item.is-open > .mega, .nav-item:focus-within > .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%); transition-delay:0s; }
.mega-in{ display:grid; grid-template-columns:minmax(0,230px) minmax(0,1fr) minmax(0,290px); gap:8px 28px; padding:22px; }
.mega-intro{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; padding:6px 4px 6px 8px; border-right:1px solid var(--line); padding-right:24px; }
.mega-intro .cap{ color:var(--accent-deep); }
.mega-intro p{ font-family:var(--font-display); font-size:19px; line-height:1.3; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.mega-intro .link{ margin-top:auto; }
.mega-list{ display:grid; grid-template-columns:1fr; gap:2px; align-content:start; }
.mega-list[data-cols="2"]{ grid-template-columns:1fr 1fr; }
.mega-item{ position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:12px 14px; border-radius:10px; opacity:0; transform:translateY(6px); transition:opacity .22s ease, transform .3s cubic-bezier(.23,1,.32,1), background .15s ease; }
.nav-item.is-open .mega-item, .nav-item:focus-within .mega-item{ opacity:1; transform:none; transition-delay:calc(var(--i) * 32ms + 40ms), calc(var(--i) * 32ms + 40ms), 0s; }
.mega-item:hover, .mega-item:focus-visible, .mega-item[aria-current="page"]{ background:var(--surface); }
.mi-ic{ display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--accent-tint); color:var(--accent-deep); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); transition:background .2s ease, color .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.mi-ic .icon{ width:20px; height:20px; }
.mega-item:hover .mi-ic, .mega-item:focus-visible .mi-ic{ background:var(--accent); color:var(--accent-on); transform:scale(1.06) rotate(-4deg); }
.mi-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mi-tx b{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.3; }
.mi-tx small{ font-size:13px; color:var(--ink-faint); line-height:1.4; }
.mega-item .mi-arrow{ width:16px; height:16px; color:var(--accent-deep); opacity:0; transform:translateX(-6px); transition:opacity .18s ease, transform .28s cubic-bezier(.23,1,.32,1); }
.mega-item:hover .mi-arrow, .mega-item:focus-visible .mi-arrow{ opacity:1; transform:none; }
.mega-feature{ position:relative; display:flex; flex-direction:column; gap:6px; padding:10px 10px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--line); transition:border-color .2s ease, transform .3s cubic-bezier(.23,1,.32,1); }
.mega-feature:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); transform:translateY(-2px); }
.mf-img{ display:block; aspect-ratio:16/10; border-radius:8px; overflow:hidden; margin-bottom:8px; background:var(--accent-tint); }
.mf-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.23,1,.32,1); }
.mega-feature:hover .mf-img img{ transform:scale(1.05); }
.mega-feature .cap{ padding-inline:6px; color:var(--accent-deep); }
.mega-feature b{ padding-inline:6px; font-family:var(--font-display); font-size:17px; font-weight:600; line-height:1.25; letter-spacing:-.01em; padding-right:34px; }
.mega-feature small{ padding:0 44px 0 6px; font-size:13px; color:var(--ink-soft); line-height:1.45; }
.mf-go{ position:absolute; right:16px; bottom:16px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--accent-on); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.mf-go .icon{ width:15px; height:15px; }
.mega-feature:hover .mf-go{ transform:rotate(45deg) scale(1.08); }
@media (max-width:1339px){ .mega, .nav-scrim{ display:none; } }
@media (prefers-reduced-motion: reduce){ .mega, .mega-item{ transition:none !important; } .mega-item{ opacity:1; transform:none; } }

/* Footer wordmark: huge name, bottom-left, cropped by the page edge (sticky-footer pattern) */
/* line-height:1 still leaves the font's own (unused, since "Manantial" has no descenders) descender space between
   the glyphs' visible bottom and the line box's own bottom edge. Shift the text down into that empty space so the
   ink itself, not just its invisible box, reaches the footer's edge; the container is taller than the wordmark by
   the same amount so that shift doesn't clip anything real. */
.foot-mark{ --fp:32px; --fd:7.4; --fm:min(calc((min(100vw - 2 * var(--gut), 1180px) - 2 * var(--fp)) / var(--fd)), 276px); display:flex; justify-content:center; align-items:flex-end; gap:calc(var(--fm) * .2); height:calc(var(--fm) * 1.16); overflow:hidden; padding-bottom:0; color:var(--accent); user-select:none; }
.foot-mark span{ font-family:var(--font-display); font-weight:600; font-size:var(--fm); line-height:1; letter-spacing:-.03em; transform:translateY(16%); }

/* The sticky-footer reveal needs the footer to fit in the viewport; on small screens (and short windows, see site.js) it is a normal footer. */
@media (max-width:880px){ footer{ position:static; } }
footer.no-stick{ position:static; }

/* "across" as a rebus: the word is replaced by a sea photo crossed by a route line (text kept for screen readers) */
.rb-across{ position:relative; width:4.35em; margin:0; }
.rb-across img{ position:absolute; inset:0; object-position:50% 40%; }
.rb-across::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,30,6,.28), rgba(12,30,6,.05)); }
.rb-across svg{ position:absolute; z-index:1; inset:0; width:100%; height:100%; padding:0 .18em; fill:#fff; stroke:#fff; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.rb-across svg path:first-of-type{ stroke-dasharray:1 7; stroke-width:4; }
.rb-across svg path:last-of-type{ fill:none; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Management cards floating over the hero photo (illustrative) */
.mgmt{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.mc{ position:absolute; display:flex; align-items:center; gap:11px; padding:10px 12px 10px 11px; background:color-mix(in srgb, var(--bg) 96%, transparent); border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 2px rgba(17,26,12,.08), 0 14px 30px -12px rgba(17,26,12,.45); backdrop-filter:blur(6px); animation:mc-float 6s ease-in-out infinite, mc-in .7s cubic-bezier(.23,1,.32,1) both; }
.mc > .icon{ flex:none; width:34px; height:34px; padding:8px; border-radius:9px; background:var(--accent-tint); color:var(--accent-deep); }
.mc b{ display:block; font-size:13.5px; font-weight:600; line-height:1.25; color:var(--ink); }
.mc small{ display:block; font-size:12px; line-height:1.3; color:var(--ink-faint); }
.mc-ok{ flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--accent); color:var(--accent-on); margin-left:4px; }
.mc-ok .icon{ width:12px; height:12px; }
.mc-1{ right:5%; top:13%; animation-delay:0s, .25s; }
.mc-2{ left:6%; top:60%; animation-delay:-2s, .45s; }
.mc-3{ right:6%; bottom:9%; animation-delay:-4s, .65s; }
@keyframes mc-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes mc-in{ from{ opacity:0; margin-top:14px; } }
@media (max-width:880px){ .mc-1{ top:10%; } .mc-2{ top:40%; } .mc b{ font-size:12.5px; } .mc small{ font-size:11.5px; } }
@media (prefers-reduced-motion: reduce){ .mc{ animation:none; } }

/* ROUNDING: one radius scale for the whole site. 12 = controls, 20 = cards and images, 28 = page bands; pills stay pills. */
.svc-feature, .svc-small, .bento-featured, .bento-small, .listing-art, .empty, .post-art, .table-wrap, .prose img{ border-radius:var(--radius-lg); }
.dark, .areas, .ctaband, .stats{ margin-inline:var(--gut); border-radius:var(--radius-xl); }
.stats{ border:1px solid var(--line); overflow:hidden; }
.ctaband{ margin-bottom:var(--gut); }
.dark, .areas{ overflow:hidden; }
footer{ margin:0 var(--gut) var(--gut); border-radius:var(--radius-xl); overflow:hidden; bottom:var(--gut); }
.mega{ border-radius:var(--radius-lg); }
.mega-item, .mi-ic{ border-radius:var(--radius); }
.mega-feature{ border-radius:var(--radius-lg); }
.mf-img{ border-radius:var(--radius); }
.areas{ margin-top:var(--gut); }

/* Social proof under the hero buttons: stars, score, round platform icons */
.proof{ display:flex; align-items:center; gap:10px; margin-top:22px; }
.proof .stars{ gap:2px; }
.proof .star{ width:18px; height:18px; }
.proof-score{ font-size:17px; font-weight:700; color:var(--ink); margin-right:4px; }
.pbadges{ display:flex; align-items:center; }
.pbadge{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; overflow:hidden; background:var(--pb); color:var(--pf); border:2px solid var(--bg); box-sizing:content-box; margin-left:-8px; transition:transform .25s cubic-bezier(.34,1.56,.64,1); position:relative; }
.pbadge:first-child{ margin-left:0; }
.pbadge svg{ width:62%; height:62%; }
.pb-fill svg{ width:100%; height:100%; }
.pbadge img{ width:100%; height:100%; object-fit:cover; }
.pbadges:hover .pbadge{ margin-left:2px; }
.pbadges:hover .pbadge:first-child{ margin-left:0; }
.pbadge{ transition:transform .25s cubic-bezier(.34,1.56,.64,1), margin .25s cubic-bezier(.23,1,.32,1); }
.pbadge:hover{ transform:scale(1.1) rotate(-6deg); }

/* Hero photo: whole image is a link; a glass pill appears on hover/focus */
.hv{ position:absolute; inset:0; z-index:3; pointer-events:auto; display:grid; place-items:center; cursor:pointer; background:linear-gradient(to top, rgba(12,30,6,.0), rgba(12,30,6,.0)); transition:background .35s ease; }
.hv-pill{ display:inline-flex; align-items:center; gap:12px; padding:8px 8px 8px 20px; border-radius:999px; font-size:15px; font-weight:600; color:var(--ink); background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border:1px solid color-mix(in srgb, var(--bg) 60%, transparent); box-shadow:0 10px 30px -8px rgba(12,30,6,.5); opacity:0; transform:translateY(14px) scale(.94); transition:opacity .28s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.hv-pill i{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--accent-on); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.hv-pill .icon{ width:16px; height:16px; }
.hero-art .art-panel img{ transition:transform .9s cubic-bezier(.23,1,.32,1); }
.art-panel.has-hv:hover img, .art-panel.has-hv:focus-within img{ transform:scale(1.04); }
.art-panel:hover .hv, .hv:focus-visible{ background:linear-gradient(to top, rgba(12,30,6,.28), rgba(12,30,6,.08)); }
.art-panel:hover .hv-pill, .hv:focus-visible .hv-pill{ opacity:1; transform:none; }
.hv:hover .hv-pill i{ transform:rotate(45deg); }
.hv:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; }
.art-panel.has-hv:hover .mc{ opacity:.55; transition:opacity .3s ease; }
@media (hover:none), (max-width:880px){ .hv{ display:none; } .hero-art .art-panel.has-hv:hover img, .hero-art .art-panel.has-hv:focus-within img{ transform:none; } .art-panel.has-hv:hover .mc{ opacity:1; } }
/* Phones: a little smaller, so the last letter stays clear of the footer's rounded corner. */
@media (max-width:480px){ .foot-mark{ --fp:20px; --fd:8.1; } }
@media (max-width:480px){ .brand{ font-size:21px; gap:10px; } .brand-mark{ width:40px; height:40px; } .nav-row{ height:68px; }  } }
@media (max-width:480px){ .hero-h1{ font-size:clamp(27px, 8.4vw, 40px); } .rb-across{ width:3.6em; } }
@media (max-width:880px){ .hero{ grid-template-columns:minmax(0,1fr); } .hero-h1, .hero-copy, .hero-art{ min-width:0; } }

/* REVIEWS */
.reviews .block-head{ margin-bottom:28px; }
.rv-grid{ columns:3; column-gap:20px; }
.rv{ break-inside:avoid; margin:0 0 20px; padding:26px; background:var(--surface); border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:16px; }
.rv:nth-child(3n+2){ background:var(--accent-tint); }
.rv-stars{ display:flex; gap:2px; color:#C99400; }
.rv-stars span{ display:block; width:16px; height:16px; }
.rv-stars svg{ display:block; width:100%; height:100%; }
.rv blockquote{ margin:0; font-family:var(--font-display); font-size:18px; line-height:1.4; font-weight:500; letter-spacing:-.005em; color:var(--ink); text-wrap:pretty; }
.rv figcaption{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.rv-av{ display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--accent-on); font-weight:700; font-size:16px; }
.rv:nth-child(3n+2) .rv-av{ background:var(--accent-deep); }
.rv-who{ display:flex; flex-direction:column; min-width:0; }
.rv-who b{ font-size:15px; font-weight:600; color:var(--ink); }
.rv-who small{ font-size:13px; color:var(--ink-faint); }
@media (max-width:980px){ .rv-grid{ columns:2; } }
@media (max-width:620px){ .rv-grid{ columns:1; } .rv blockquote{ font-size:17px; } }

.rv-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rv-tr{ font-style:normal; font-size:12px; line-height:1; color:var(--ink-faint); padding:5px 10px; border:1px solid var(--line); border-radius:999px; white-space:nowrap; }
.rv figcaption{ flex-wrap:nowrap; }
.rv-who{ flex:1; min-width:0; }
.rv-meta{ display:flex; align-items:center; gap:8px; }
.rv-src{ display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:var(--pb); color:#fff; }
.rv-src svg{ width:62%; height:62%; }

/* Header: floating plate with rounded bottom corners, inset like the page bands */
.nav{ margin-inline:var(--gut); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--radius-xl) var(--radius-xl); }

/* Brand: name in brand green; on hover the mark pops slightly and the green deepens */
.brand{ transition:color .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.brand-mark{ transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .2s ease; }
.brand{ color:var(--brand); }
.brand:hover{ color:var(--accent-deep); transform:translateX(1px); }
.brand:hover .brand-mark{ transform:scale(1.04); background:var(--accent-deep); }
.brand:active{ transform:scale(.97); }
@media (prefers-reduced-motion: reduce){ .brand, .brand-mark{ transition:none; } .brand:hover, .brand:hover .brand-mark{ transform:none; } }

/* Hover on the rebus: the route line dissolves and the hidden word appears */
.rb-word{ position:absolute; z-index:2; inset:0; display:grid; place-items:center; font-size:.62em; font-weight:600; letter-spacing:-.01em; color:#fff; text-shadow:0 2px 14px rgba(12,30,6,.45); opacity:0; transform:scale(.85); filter:blur(6px); transition:opacity .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1), filter .3s ease; pointer-events:none; }
.rb-across img{ transition:filter .35s ease, transform .6s cubic-bezier(.23,1,.32,1); }
.rb-across svg{ transition:opacity .25s ease, transform .4s cubic-bezier(.23,1,.32,1); }
/* .is-peek (site.js) plays the same reveal on a timer shortly after load, so first-time visitors notice the word is
   hidden there at all, without needing to hover it first. */
.rb-across:hover img, .rb-across.is-peek img{ filter:blur(3px) brightness(.8); transform:scale(1.08); }
.rb-across:hover svg, .rb-across.is-peek svg{ opacity:0; transform:scale(.9); }
.rb-across:hover .rb-word, .rb-across.is-peek .rb-word{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion: reduce){ .rb-word, .rb-across img, .rb-across svg{ transition:opacity .2s ease; } .rb-across:hover img, .rb-across.is-peek img{ transform:none; } }
@media (max-width:600px){ .hero-cta{ gap:14px 16px; } }

/* Stats: big display numbers */
.stat .num{ font-family:var(--font-display); font-weight:600; font-size:clamp(40px, 5.4vw, 64px); line-height:1; letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums; }
.stat .label{ margin-top:10px; font-size:14.5px; line-height:1.45; color:var(--ink-soft); max-width:22ch; }

/* Reviews on phones: 3 cards, then a "Show all" button (added by micro.js) */
.rv-more{ display:none; }
@keyframes rv-in{ from{ opacity:0; transform:translateY(14px); } }
@media (max-width:620px){
  .rv-grid.is-collapsed .rv:nth-child(n+4){ display:none; }
  .rv-more{ display:flex; width:100%; margin-top:4px; }
  .rv-grid:not(.is-collapsed) .rv:nth-child(n+4){ animation:rv-in .5s cubic-bezier(.23,1,.32,1) both; }
}

/* Reviews on phones: the last visible card fades out and the "Show all" button sits on top of the fade */
@media (max-width:620px){
  .rv-grid.is-collapsed .rv:nth-child(3){ max-height:230px; overflow:hidden; margin-bottom:0; -webkit-mask-image:linear-gradient(to bottom, #000 45%, transparent 100%); mask-image:linear-gradient(to bottom, #000 45%, transparent 100%); }
  .rv-grid.is-collapsed + .rv-more{ width:auto; min-width:230px; margin:-58px auto 0; position:relative; z-index:2; background:var(--bg); box-shadow:0 10px 26px -10px rgba(17,26,12,.35); }
  .rv-more{ margin-inline:auto; width:auto; min-width:230px; }
}
@media (max-width:620px) and (hover:hover){ .rv-grid.is-collapsed + .rv-more:hover{ background:var(--accent); } }

/* Brand hover only for real mouse pointers on wider screens */
@media (max-width:880px), (hover:none){
  .brand:hover{ color:var(--brand); transform:none; }
  .brand:hover .brand-mark{ transform:none; background:var(--brand); }
  .brand:active{ transform:none; }
}

/* FAQ accordion: bordered cards, tinted trigger row, plus turning into a cross, animated panel, one open at a time */
details.faq{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); overflow:hidden; margin-bottom:10px; }
details.faq:last-of-type{ border-bottom:1px solid var(--line); }
details.faq summary{ position:relative; padding:18px 60px 18px 20px; background:color-mix(in srgb, var(--accent-tint) 55%, transparent); font-size:17px; font-weight:600; line-height:1.35; transition:background .2s ease; }
@media (hover:hover){ details.faq summary:hover{ background:var(--accent-tint); } }
details.faq[open] summary{ background:var(--accent-tint); }
details.faq summary::before, details.faq summary::after{ content:""; position:absolute; right:22px; top:50%; width:16px; height:2px; margin-top:-1px; border:0; border-radius:2px; background:var(--accent-deep); transform:rotate(0deg); transition:transform .4s cubic-bezier(.23,1,.32,1); }
details.faq summary::after{ transform:rotate(90deg); }
details.faq[open] summary::before{ transform:rotate(45deg); }
details.faq[open] summary::after{ transform:rotate(135deg); }
details.faq summary:focus-visible{ outline-offset:-3px; }
details.faq .faq-a{ padding:18px 20px 22px; max-width:none; }
@media (prefers-reduced-motion: reduce){ details.faq summary::before, details.faq summary::after{ transition:none; } }

/* FAQ as a chat: questions are our bubbles on the right, answers appear as replies on the left */
.faq-list, .faq-group{ display:flex; flex-direction:column; }
.faq-list > .faq-day{ align-self:stretch; display:flex; align-items:center; gap:16px; margin:0 0 22px; font-size:13px; color:var(--ink-faint); }
.faq-day::before, .faq-day::after{ content:''; flex:1; height:1px; background:var(--line); }
details.faq{ border:0; border-radius:0; background:none; overflow:visible; margin:0 0 12px; }
details.faq summary{ display:block; width:fit-content; max-width:min(620px, 88%); margin:0 0 0 auto; padding:14px 22px; background:var(--accent); color:var(--accent-on); border-radius:20px 20px 6px 20px; font-size:17px; font-weight:500; line-height:1.4; transition:background .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
details.faq summary::before, details.faq summary::after{ display:none; }
details.faq[open] summary{ background:var(--accent-deep); }
@media (hover:hover){ details.faq summary:hover{ background:var(--accent-deep); } }
details.faq summary:active{ transform:scale(.985); }
details.faq .faq-a, .faq-typing{ width:fit-content; max-width:min(680px, 92%); margin:12px auto 0 0; padding:16px 22px; background:var(--surface); color:var(--ink); border-radius:20px 20px 20px 6px; font-size:16px; line-height:1.65; }
.faq-typing{ display:flex; align-items:center; gap:5px; padding:18px 22px; animation:faq-pop .3s cubic-bezier(.34,1.56,.64,1) both; }
.faq-typing i{ width:7px; height:7px; border-radius:50%; background:var(--ink-faint); animation:faq-dot 1s ease-in-out infinite; }
.faq-typing i:nth-child(2){ animation-delay:.15s; } .faq-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes faq-dot{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } }
@keyframes faq-pop{ from{ opacity:0; transform:translateY(8px) scale(.9); } }
@media (max-width:620px){ details.faq summary{ max-width:92%; font-size:16px; } details.faq .faq-a, .faq-typing{ max-width:96%; font-size:15.5px; } }
@media (prefers-reduced-motion: reduce){ .faq-typing, .faq-typing i{ animation:none; } }
details.faq:last-of-type{ border:0; }
.faq-typing{ padding:16px 22px; }

/* Home FAQ section centred */
.faq-section .block-head{ align-items:center; text-align:center; margin-inline:auto; max-width:640px; }
.faq-section .faq-list{ max-width:860px; margin-inline:auto; }
.faq-typing{ animation:none; }

/* INCOME CALCULATOR */
.calc{ display:grid; grid-template-columns:1.05fr .95fr; gap:20px; padding-bottom:28px; }
.calc-in{ display:flex; flex-direction:column; gap:26px; padding:34px; background:var(--surface); border-radius:var(--radius-lg); }
.calc-in .seg{ display:flex; width:100%; } .calc-in .seg-btn{ flex:1; }
.calc-range label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.calc-range output{ font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--accent); letter-spacing:-.01em; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; padding:0; border:0; --fill:20%; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track{ height:8px; border-radius:999px; background:linear-gradient(to right, var(--accent) var(--fill), color-mix(in srgb, var(--ink) 14%, transparent) var(--fill)); }
input[type=range]::-moz-range-track{ height:8px; border-radius:999px; background:color-mix(in srgb, var(--ink) 14%, transparent); }
input[type=range]::-moz-range-progress{ height:8px; border-radius:999px; background:var(--accent); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; margin-top:-9px; border-radius:50%; background:var(--bg); border:3px solid var(--accent); box-shadow:0 2px 8px rgba(17,26,12,.25); transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--bg); border:3px solid var(--accent); box-shadow:0 2px 8px rgba(17,26,12,.25); }
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.15); }
input[type=range]:focus-visible{ outline:none; } input[type=range]:focus-visible::-webkit-slider-thumb{ outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.calc-out{ container-type:inline-size; display:flex; flex-direction:column; gap:26px; padding:34px; background:var(--accent); color:var(--accent-on); border-radius:var(--radius-lg); }
.calc-kpi{ display:flex; flex-direction:column; gap:8px; }
.calc-kpi .cap{ color:color-mix(in srgb, var(--accent-on) 75%, transparent); }
.calc-big{ font-family:var(--font-display); font-weight:600; font-size:clamp(46px, 6vw, 72px); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.calc-range-txt{ font-size:14.5px; color:color-mix(in srgb, var(--accent-on) 80%, transparent); min-height:1.4em; }
.calc-note{ font-size:13px; line-height:1.55; color:color-mix(in srgb, var(--accent-on) 72%, transparent); }
.calc-how{ margin-top:14px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.calc-how summary{ cursor:pointer; list-style:none; padding:16px 20px; font-weight:600; background:color-mix(in srgb, var(--accent-tint) 55%, transparent); }
.calc-how summary::-webkit-details-marker{ display:none; }
.calc-how-in{ padding:8px 20px 20px; }
.calc-tbl{ width:100%; border-collapse:collapse; font-size:14.5px; margin:8px 0 14px; }
.calc-tbl td{ padding:10px 0; border-bottom:1px solid var(--line); } .calc-tbl td:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc-tbl .tot td{ font-weight:700; border-bottom:0; }
.calc-how-in p{ font-size:13.5px; color:var(--ink-faint); line-height:1.55; }
@media (max-width:900px){ .calc{ grid-template-columns:1fr; } .calc-in, .calc-out{ padding:26px; } }
@media (max-width:900px){ .calc{ grid-template-columns:minmax(0,1fr); } .calc-in, .calc-out{ min-width:0; } }
@media (max-width:480px){ .calc-in .seg-btn{ padding:9px 4px; font-size:13.5px; min-width:0; } .calc-in .field{ min-width:0; } }
.calc-how-in{ overflow-x:auto; }
.calc-tbl td:first-child{ padding-right:16px; }

/* Mega menu: calculator visual */
.mf-calc{ position:relative; display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:1fr auto; gap:10px 14px; padding:16px; background:linear-gradient(160deg, var(--accent-tint), color-mix(in srgb, var(--accent) 22%, var(--accent-tint))); }
.fc-chart{ display:flex; align-items:flex-end; gap:6px; grid-row:1; }
.fc-chart i{ flex:1; height:var(--h); border-radius:6px 6px 3px 3px; background:color-mix(in srgb, var(--accent) 38%, transparent); transform-origin:bottom; transition:transform .6s cubic-bezier(.34,1.56,.64,1); }
.fc-chart i.hi{ background:var(--accent); }
.mega-feature:hover .fc-chart i{ transform:scaleY(1.08); }
.mega-feature:hover .fc-chart i:nth-child(2){ transition-delay:.04s; } .mega-feature:hover .fc-chart i:nth-child(3){ transition-delay:.08s; } .mega-feature:hover .fc-chart i:nth-child(4){ transition-delay:.12s; } .mega-feature:hover .fc-chart i:nth-child(5){ transition-delay:.16s; } .mega-feature:hover .fc-chart i:nth-child(6){ transition-delay:.2s; }
.fc-side{ display:flex; flex-direction:column; gap:8px; justify-content:center; grid-row:1; }
.fc-kpi{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:10px; background:var(--bg); box-shadow:0 1px 2px rgba(17,26,12,.08); }
.fc-kpi small{ font-size:11px; color:var(--ink-faint); }
.fc-kpi b{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--accent); line-height:1; }
.fc-slider{ grid-column:1 / -1; padding:2px 2px 0; }
.fc-track{ position:relative; display:block; height:6px; border-radius:999px; background:color-mix(in srgb, var(--ink) 16%, transparent); }
.fc-track::before{ content:''; position:absolute; inset:0 auto 0 0; width:42%; border-radius:999px; background:var(--accent); transition:width .6s cubic-bezier(.23,1,.32,1); }
.fc-thumb{ position:absolute; top:50%; left:42%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--bg); border:3px solid var(--accent); box-shadow:0 2px 6px rgba(17,26,12,.25); transition:left .6s cubic-bezier(.23,1,.32,1); }
.mega-feature:hover .fc-track::before{ width:68%; } .mega-feature:hover .fc-thumb{ left:68%; }
@media (prefers-reduced-motion: reduce){ .fc-chart i, .fc-track::before, .fc-thumb{ transition:none; } }
.mf-calc{ grid-template-columns:1fr 1.05fr; } .fc-kpi small{ white-space:nowrap; } .fc-chart{ gap:5px; } .fc-chart i{ min-width:10px; }
.calc-how{ margin-bottom:96px; }
@media (max-width:640px){ .calc-how{ margin-bottom:64px; } }
.cover{ display:flow-root; }
.mf-calc{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); padding:14px; gap:10px 12px; } .fc-side, .fc-chart{ min-width:0; } .fc-kpi{ padding:7px 9px; min-width:0; } .fc-kpi small{ font-size:10.5px; overflow:hidden; text-overflow:ellipsis; }

/* Footer social profiles (shown only when a URL is set in SITE.social) */
.socials{ display:flex; gap:10px; margin-top:18px; }
.socials a{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--bg); border:1px solid var(--line); color:var(--accent-deep); transition:background .2s ease, color .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1), border-color .2s ease; }
.socials .icon{ width:20px; height:20px; }
@media (hover:hover){ .socials a:hover{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); transform:translateY(-2px); } }
.socials a:focus-visible{ outline-offset:3px; }
.rv-src.rv-booking{ overflow:hidden; } .rv-src.rv-booking svg{ width:100%; height:100%; }
.rv figcaption .rv-src{ width:40px; height:40px; } .rv figcaption .rv-src svg{ width:58%; height:58%; } .rv figcaption .rv-src.rv-booking svg{ width:100%; height:100%; }

/* CTA band straddles the boundary: page background above its middle, footer colour below, so the footer continues right under it */
.cta-wrap{ position:relative; margin:0 var(--gut); background:none; }
.cta-wrap .ctaband{ position:relative; z-index:1; margin:0; }

/* CTA band corners: nothing is painted behind them. The page sheet is transparent around the band and the footer tucks 28px under it, so the footer shows through the rounded bottom corners. */
.cover:has(.cta-wrap){ background:transparent; margin-bottom:0; }
.cover:has(.cta-wrap) .cta-wrap{ padding-bottom:var(--cta-lift, 20px); }
.cover:has(.cta-wrap) > main{ background:var(--bg); }
/* Keep the last section's bottom margin inside main, so the gap above the call-to-action band is painted and the footer never shows through it. */
.cover > main{ display:flow-root; }

/* Reviews link to the original: whole card is clickable; the only hint is a quiet "Airbnb ↗" that fades in on hover */
.rv{ position:relative; }
.rv-link{ position:absolute; inset:0; z-index:2; border-radius:inherit; }
.rv-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.rv-go{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-faint); opacity:0; transform:translateX(-4px); transition:opacity .25s ease, transform .3s cubic-bezier(.23,1,.32,1); white-space:nowrap; }
.rv-go svg{ width:12px; height:12px; }
.rv:focus-within .rv-go{ opacity:1; transform:none; }
@media (hover:hover) and (min-width:881px){ .rv:hover .rv-go{ opacity:1; transform:none; } }
@media (hover:none), (max-width:880px){ .rv-go{ opacity:1; transform:none; } }

/* Messenger speed dial */
.dial{ position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.dial-items{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none; }
.dial-item{ display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(14px) scale(.9); transform-origin:bottom right; transition:opacity .2s ease, transform .35s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
.dial.is-open .dial-items{ pointer-events:auto; }
.dial.is-open .dial-item{ opacity:1; transform:none; pointer-events:auto; }
.dial.is-open .dial-item:nth-last-child(1){ transition-delay:.02s; } .dial.is-open .dial-item:nth-last-child(2){ transition-delay:.07s; }
.dial-label{ padding:8px 14px; border-radius:999px; background:var(--bg); color:var(--ink); border:1px solid var(--line); box-shadow:0 8px 22px -10px rgba(17,26,12,.4); font-size:14px; font-weight:600; white-space:nowrap; }
.dial-ic{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#fff; box-shadow:0 1px 3px rgba(17,26,12,.25), 0 5px 12px -3px rgba(17,26,12,.35); transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.dial-wa .dial-ic{ background:#25D366; } .dial-tg .dial-ic{ background:#2AABEE; }
.dial-ic .icon{ width:26px; height:26px; }
@media (hover:hover){ .dial-item:hover .dial-ic{ transform:scale(1.08); } }
.dial-main{ position:relative; display:grid; place-items:center; width:56px; height:56px; border:0; border-radius:50%; background:var(--accent); color:var(--accent-on); box-shadow:0 1px 3px rgba(17,26,12,.25), 0 6px 14px -3px rgba(17,26,12,.35); cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease; }
@media (hover:hover){ .dial-main:hover{ background:var(--accent-deep); } }
.dial-main:active{ transform:scale(.94); }
.dial-main:focus-visible, .dial-item:focus-visible .dial-ic{ outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:3px; }
.dial-main .icon{ position:absolute; width:26px; height:26px; transition:opacity .2s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.dial-i-close{ opacity:0; transform:rotate(-90deg) scale(.6); }
.dial.is-open .dial-i-open{ opacity:0; transform:rotate(90deg) scale(.6); }
.dial.is-open .dial-i-close{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .dial-item, .dial-main .icon{ transition:opacity .15s ease; } }
.dial-ic svg{ width:28px; height:28px; display:block; }

/* MOBILE MENU: big tappable rows, accordion sections, CTA pinned at the bottom */
.mobile-panel{ display:none; border-top:1px solid var(--line); }
.mobile-panel.is-open{ display:flex; flex-direction:column; max-height:calc(100dvh - 78px - var(--gut) - 12px); }
.m-scroll{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:10px 0 6px; }
.m-row{ display:flex; align-items:center; gap:14px; width:100%; padding:10px 6px 10px 4px; border:0; background:none; color:var(--ink); font:inherit; font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-.01em; text-align:left; cursor:pointer; border-radius:var(--radius); }
.m-row:active{ background:var(--surface); }
.m-ic{ display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:var(--radius); background:var(--accent-tint); color:var(--accent-deep); }
.m-ic .icon{ width:22px; height:22px; }
.m-t{ flex:1; }
.m-caret{ width:18px; height:18px; color:var(--ink-soft); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.m-item.is-open .m-caret{ transform:rotate(180deg); }
.m-arrow{ width:18px; height:18px; color:var(--accent-deep); }
.m-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1); }
.m-item.is-open .m-sub{ grid-template-rows:1fr; }
.m-sub-in{ overflow:hidden; min-height:0; display:flex; flex-direction:column; padding-left:22px; margin-left:22px; border-left:2px solid var(--line); }
.m-link{ display:flex; align-items:center; gap:12px; padding:12px 8px; font-size:17px; font-weight:500; color:var(--ink); border-radius:var(--radius); }
.m-link .icon{ width:20px; height:20px; color:var(--accent-deep); flex:none; }
.m-link:active, .m-all:active{ background:var(--surface); }
.m-link[aria-current="page"]{ color:var(--accent-deep); font-weight:700; }
.m-all{ display:flex; align-items:center; gap:8px; padding:12px 8px 14px; font-size:15px; font-weight:600; color:var(--accent-deep); }
.m-all .icon{ width:16px; height:16px; }
.m-foot{ flex:none; padding:14px 0 22px; border-top:1px solid var(--line); background:var(--bg); }
.m-foot{ display:flex; flex-direction:column; gap:10px; }
.m-foot .btn{ width:100%; justify-content:center; }
.m-plain{ text-decoration:none; }
@media (max-width:480px){ .mobile-panel.is-open{ max-height:calc(100dvh - 68px - var(--gut) - 12px); } }
@media (prefers-reduced-motion: reduce){ .m-sub, .m-caret{ transition:none; } }
@media (max-width:1339px){ html.menu-open{ overflow:hidden; } }
@media (max-width:1339px){ html.menu-open .dial{ display:none; } }

/* Mobile menu floats over the page instead of pushing it down */
@media (max-width:1339px){
  .nav{ position:sticky; }
  .mobile-panel{ position:absolute; top:calc(100% + 8px); left:0; right:0; margin:0; padding:0 20px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:0 24px 60px -20px rgba(17,26,12,.45); overflow:hidden; }
  .mobile-panel.is-open{ max-height:calc(100dvh - 78px - var(--gut) - 24px); }
  .m-scroll{ padding-top:14px; }
}
@media (max-width:480px){ .mobile-panel.is-open{ max-height:calc(100dvh - 68px - var(--gut) - 24px); } }

/* Mega menu: Cyprus map visual */
.mf-map{ display:grid; place-items:center; padding:8px; background:linear-gradient(160deg, var(--accent-tint), color-mix(in srgb, var(--accent) 16%, var(--accent-tint))); }
.mf-map svg{ width:100%; height:100%; overflow:visible; }
.mm-edge{ fill:none; stroke:var(--accent); stroke-width:4.4; stroke-linejoin:round; }
.mm-land{ --lc:color-mix(in srgb, var(--accent) 30%, var(--bg)); fill:var(--lc); stroke:var(--lc); stroke-width:1.6; stroke-linejoin:round; transition:fill .4s ease, stroke .4s ease; }
.mega-feature:hover .mm-land{ --lc:color-mix(in srgb, var(--accent) 42%, var(--bg)); }
.mm-dot{ fill:var(--bg); stroke:var(--accent-deep); stroke-width:2; }
.mm-dot.hq{ fill:var(--accent); stroke:var(--bg); stroke-width:2.2; }
.mm-t{ font-family:var(--font-body); font-size:8.5px; font-weight:600; fill:var(--ink); paint-order:stroke; stroke:color-mix(in srgb, var(--bg) 85%, transparent); stroke-width:2.4px; stroke-linejoin:round; }

/* Mega menu visual: listing cards */
.mf-list{ position:relative; display:grid; place-items:center; background:linear-gradient(160deg, var(--accent-tint), color-mix(in srgb, var(--accent) 16%, var(--accent-tint))); overflow:hidden; }
.ml-card{ position:absolute; width:58%; border-radius:14px; background:var(--bg); box-shadow:0 1px 2px rgba(17,26,12,.1), 0 12px 24px -12px rgba(17,26,12,.4); }
.ml-back{ height:72%; transform:translate(-30%,-6%) rotate(-7deg); opacity:.7; }
.ml-front{ display:flex; flex-direction:column; gap:7px; padding:8px; transform:translate(10%,3%) rotate(3deg); transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.mega-feature:hover .ml-front{ transform:translate(10%,-2%) rotate(0deg) scale(1.03); }
.ml-photo{ position:relative; display:grid; place-items:center; height:56px; border-radius:9px; background:linear-gradient(140deg, color-mix(in srgb, var(--accent) 45%, var(--bg)), color-mix(in srgb, var(--accent) 22%, var(--bg))); color:var(--bg); }
.ml-photo > svg{ width:30px; height:30px; }
.ml-star{ position:absolute; top:5px; right:5px; display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:999px; background:var(--bg); color:var(--ink); font-size:9.5px; font-weight:700; }
.ml-star svg{ width:9px; height:9px; color:#C99400; }
.ml-line{ display:block; height:6px; border-radius:3px; background:color-mix(in srgb, var(--ink) 18%, transparent); }
.ml-short{ width:60%; }
.ml-chips{ display:flex; gap:4px; }
.ml-chips i{ font-style:normal; padding:2px 6px; border-radius:6px; background:var(--surface); color:var(--ink-soft); font-size:9px; font-weight:600; }
.ml-chips i.on{ margin-left:auto; background:var(--accent); color:var(--accent-on); }
/* Mega menu visual: FAQ chat */
.mf-chat{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:14px; background:linear-gradient(160deg, var(--accent-tint), color-mix(in srgb, var(--accent) 16%, var(--accent-tint))); overflow:hidden; }
.mc-b{ display:flex; flex-direction:column; gap:5px; width:62%; padding:9px 11px; }
.mc-b i{ display:block; height:6px; border-radius:3px; }
.mc-b i.s{ width:55%; }
.mc-q, .mc-q2{ align-self:flex-end; background:var(--accent); border-radius:14px 14px 4px 14px; }
.mc-q i, .mc-q2 i{ background:color-mix(in srgb, var(--accent-on) 80%, transparent); }
.mc-q2{ width:44%; }
.mc-a{ align-self:flex-start; width:70%; background:var(--bg); border-radius:14px 14px 14px 4px; box-shadow:0 1px 2px rgba(17,26,12,.08); }
.mc-a i{ background:color-mix(in srgb, var(--ink) 20%, transparent); }
.mc-dots{ align-self:flex-start; display:flex; gap:4px; padding:8px 11px; background:var(--bg); border-radius:12px 12px 12px 4px; }
.mc-dots i{ width:5px; height:5px; border-radius:50%; background:var(--ink-faint); animation:faq-dot 1s ease-in-out infinite; }
.mc-dots i:nth-child(2){ animation-delay:.15s; } .mc-dots i:nth-child(3){ animation-delay:.3s; }
@media (prefers-reduced-motion: reduce){ .mc-dots i{ animation:none; } .ml-front{ transition:none; } }
.msg-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .msg-btns .btn{ padding-inline:12px; } .msg-btns [hidden]{ display:none !important; } .msg-btns:has(> [hidden]:nth-child(2)){ grid-template-columns:1fr; } .msg-btns:has(> [hidden]:nth-child(1)){ grid-template-columns:1fr; }

/* Mega menu visual: blog */
.mf-blog{ display:grid; grid-template-columns:1.35fr 1fr; gap:10px; padding:14px; background:linear-gradient(160deg, var(--accent-tint), color-mix(in srgb, var(--accent) 16%, var(--accent-tint))); align-items:stretch; }
.mb-main, .mb-mini{ display:flex; flex-direction:column; gap:7px; padding:9px; border-radius:12px; background:var(--bg); box-shadow:0 1px 2px rgba(17,26,12,.08), 0 10px 20px -12px rgba(17,26,12,.35); transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.mega-feature:hover .mb-main{ transform:translateY(-3px); } .mega-feature:hover .mb-mini:nth-child(2){ transform:translateY(-2px); }
.mb-cover{ display:grid; place-items:center; flex:1; min-height:48px; border-radius:8px; background:linear-gradient(140deg, color-mix(in srgb, var(--accent) 50%, var(--bg)), color-mix(in srgb, var(--accent) 24%, var(--bg))); color:var(--bg); }
.mb-cover svg{ width:28px; height:28px; }
.mb-meta{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.mb-meta i{ font-style:normal; padding:2px 6px; border-radius:6px; background:var(--accent-tint); color:var(--accent-deep); font-size:9px; font-weight:700; }
.mb-meta b{ font-size:9px; font-weight:600; color:var(--ink-faint); }
.mb-line{ display:block; height:6px; border-radius:3px; background:color-mix(in srgb, var(--ink) 20%, transparent); }
.mb-short{ width:62%; }
.mb-side{ display:flex; flex-direction:column; gap:10px; }
.mb-mini{ flex:1; justify-content:center; }
@media (prefers-reduced-motion: reduce){ .mb-main, .mb-mini{ transition:none; } }
.mb-meta b{ white-space:nowrap; font-size:8.5px; }

/* Calculator as the first block of the Property Owners page */
.calc-section{ scroll-margin-top:110px; padding-bottom:64px; }
.calc-section h2{ font-size:30px; font-weight:600; margin-bottom:8px; }
.calc-section .intro{ margin-bottom:26px; }
.doc-main .calc{ grid-template-columns:1fr; }
@media (min-width:1080px){ .doc-main .calc{ grid-template-columns:1fr 1fr; } .doc-main .calc-in, .doc-main .calc-out{ padding:26px; } .doc-main .calc-big{ font-size:clamp(40px, 4.4vw, 58px); } }
.doc-main .calc-in, .doc-main .calc-out{ padding:30px; }
.doc-main .calc-how{ margin-bottom:0; }
html{ scroll-padding-top:100px; }

/* Mega menu: two columns (list + feature card); the section overview is the first, highlighted row */
.mega-in{ grid-template-columns:minmax(0,1fr) minmax(0,290px); }
.mega-intro{ display:none; }
.mega-home{ background:var(--accent-tint); margin-bottom:6px; }
.mega-home .mi-ic{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
.mega-home .mi-tx b{ font-size:16px; }
.mega-home .mi-arrow{ opacity:1; transform:none; }
.mega-home:hover{ background:color-mix(in srgb, var(--accent) 22%, var(--accent-tint)); }
.m-link.m-home{ background:var(--accent-tint); font-weight:700; color:var(--accent-deep); margin-bottom:4px; }

/* Mega menu v3: heading row (blurb + button), items in two columns, feature card on the right */
.mega-in{ grid-template-columns:minmax(0,1fr) minmax(0,290px); gap:8px 24px; }
.mega-main{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.mega-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:6px 6px 18px 8px; border-bottom:1px solid var(--line); }
.mega-head .cap{ color:var(--accent-deep); }
.mega-head p{ margin-top:8px; font-family:var(--font-display); font-size:20px; line-height:1.3; font-weight:500; letter-spacing:-.01em; color:var(--ink); max-width:44ch; }
.mega-cta{ flex:none; }
.mega-list, .mega-list[data-cols="2"]{ grid-template-columns:1fr 1fr; gap:2px 12px; }
.mega-home{ display:none; }

/* Section button in the mega menu: a distinct pill with a round arrow, not a regular interface button */
.mega-cta{ flex:none; display:inline-flex; align-items:center; gap:16px; padding:7px 7px 7px 26px; border-radius:999px; background:var(--accent); color:var(--accent-on); font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-.01em; box-shadow:0 10px 24px -12px rgba(17,26,12,.55); transition:background .2s ease, box-shadow .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.mega-cta i{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--accent-on); color:var(--accent-deep); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.mega-cta .icon{ width:20px; height:20px; }
.mega-cta:hover{ background:var(--accent-deep); transform:translateY(-1px); box-shadow:0 14px 28px -12px rgba(17,26,12,.6); }
.mega-cta:hover i{ transform:translateX(3px) scale(1.06); }
.mega-cta:focus-visible{ outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .mega-cta, .mega-cta i{ transition:none; } }

/* PROPERTY OWNERS OVERVIEW: hero, trust bar, the calculator as its own full-width section, feature rows, reviews
   carousel, fees, FAQ. Tenants reuses this same hero grid in its split (text | tool) form via .own-hero-split. */
.own-hero{ display:grid; grid-template-columns:minmax(0,1fr); gap:48px; align-items:start; padding-block:24px 40px; }
.own-hero h1{ font-size:clamp(34px, 4.2vw, 52px); line-height:1.08; letter-spacing:-.02em; font-weight:600; text-wrap:balance; margin-bottom:18px; }
.own-hero .lead{ font-size:clamp(17px, 1.5vw, 19px); line-height:1.6; color:var(--ink-soft); margin-bottom:26px; max-width:52ch; }
/* Full-width hero (Owners): the lead runs in two even lines on desktop instead of three short ones. */
@media (min-width:1100px){ .own-hero:not(.own-hero-split) .lead{ max-width:84ch; text-wrap:balance; } }
.own-hero .actions{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:34px; }
.own-trust{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.own-trust > div{ display:flex; flex-direction:column; gap:6px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg); }
.own-trust b{ font-family:var(--font-display); font-size:clamp(30px, 3.4vw, 42px); line-height:1; font-weight:600; letter-spacing:-.03em; color:var(--accent); }
.own-trust span{ font-size:14px; line-height:1.4; color:var(--ink-soft); }
/* The owners calculator is a section on its own, as wide as the content blocks below it (.container: 1180px minus
   its 32px side padding, 20px on phones). own-hero-r's card look (padding, radius, background) is shared with the
   tenants split-hero tool card, where it's a grid child instead and this width doesn't apply. */
.own-calc-section{ width:min(1116px, calc(100% - 64px)); margin:0 auto 48px; }
@media (max-width:480px){ .own-calc-section{ width:calc(100% - 40px); } }
.own-hero-trust{ margin-bottom:48px; }
.own-hero-r{ container-type:inline-size; scroll-margin-top:100px; padding:26px; border-radius:var(--radius-xl); background:var(--surface); }
.own-hero-r h2{ font-size:26px; font-weight:600; margin-bottom:6px; }
.own-hero-r .intro{ font-size:15px; color:var(--ink-soft); margin-bottom:18px; }
.own-hero-r .calc{ grid-template-columns:1fr; gap:14px; padding-bottom:12px; }
.own-hero-r .calc-in{ padding:22px; gap:20px; background:var(--bg); }
.own-hero-r .calc-out{ padding:24px; gap:18px; }
.own-hero-r .calc-big{ font-size:clamp(38px, 13cqi, 58px); }
.own-hero-r .calc-how{ margin-bottom:0; background:var(--bg); }
/* Inputs and results side by side once the card itself (not the viewport) is wide enough, so the calculator reads
   left-to-right instead of stacking the fields above the green result. Keyed to the card's own width via a container
   query: it kicks in whenever this card has room, whether that's a wide desktop split or a collapsed single-column hero. */
@container (min-width:400px){
  .own-hero-r .calc{ grid-template-columns:1fr 1fr; align-items:stretch; }
  .own-hero-r .calc-in, .own-hero-r .calc-out{ height:100%; }
}
.own-row{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding-block:72px; border-top:1px solid var(--line); }
.own-row.is-rev .own-vis{ order:-1; }
.own-txt .cap{ color:var(--accent-deep); }
.own-txt h2{ font-size:clamp(28px, 3.2vw, 40px); line-height:1.12; letter-spacing:-.02em; font-weight:600; margin:12px 0 16px; text-wrap:balance; }
.own-txt p{ font-size:17px; line-height:1.65; color:var(--ink-soft); max-width:50ch; margin-bottom:26px; }
.own-more{ display:inline-flex; align-items:center; gap:14px; padding:6px 6px 6px 22px; border-radius:999px; border:1px solid var(--accent); color:var(--accent); font-weight:600; font-size:15.5px; transition:background .2s ease, color .2s ease; }
.own-more i{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--accent-on); transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.own-more .icon{ width:18px; height:18px; }
@media (hover:hover){ .own-more:hover{ background:var(--accent-tint); } .own-more:hover i{ transform:translateX(3px); } }
.own-vis{ padding:32px; border-radius:var(--radius-xl); background:linear-gradient(160deg, var(--accent-tint), color-mix(in srgb, var(--accent) 14%, var(--accent-tint))); }
.tasks, .screen, .ticket, .stmt, .fees{ display:flex; flex-direction:column; gap:10px; }
.task, .screen-step, .ticket-row, .stmt-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:var(--bg); box-shadow:0 1px 2px rgba(17,26,12,.08); font-weight:500; }
.task-ok, .screen-ok{ display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-on); }
.task-ok .icon, .screen-ok .icon{ width:14px; height:14px; }
.task-you{ background:var(--accent); color:var(--accent-on); margin-top:6px; }
.task-ic{ display:grid; place-items:center; width:26px; height:26px; } .task-ic .icon{ width:22px; height:22px; }
.screen-step{ padding:16px; } .screen-step > span:nth-child(2){ flex:1; display:flex; flex-direction:column; } .screen-step small{ font-weight:400; font-size:13px; color:var(--ink-faint); }
.screen-ic{ display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:12px; background:var(--accent-tint); color:var(--accent-deep); } .screen-ic .icon{ width:22px; height:22px; }
.ticket{ background:var(--bg); border-radius:18px; padding:18px; box-shadow:0 1px 2px rgba(17,26,12,.08); gap:8px; }
.ticket-h{ display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.ticket-h b{ flex:1; } .ticket-h em{ font-style:normal; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--accent-tint); color:var(--accent-deep); }
.ticket-ic{ display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--accent); color:var(--accent-on); } .ticket-ic .icon{ width:20px; height:20px; }
.ticket-row{ box-shadow:none; background:var(--surface); }
.stmt{ background:var(--bg); border-radius:18px; padding:20px; box-shadow:0 1px 2px rgba(17,26,12,.08); gap:12px; }
.stmt-h{ display:flex; justify-content:space-between; align-items:center; } .stmt-h em{ font-style:normal; font-size:12px; color:var(--ink-faint); }
.stmt-chart{ display:flex; align-items:flex-end; gap:8px; height:110px; padding:6px 0 4px; }
.stmt-chart i{ flex:1; height:var(--h); border-radius:6px 6px 3px 3px; background:color-mix(in srgb, var(--accent) 35%, transparent); } .stmt-chart i:last-child{ background:var(--accent); }
.stmt-row{ box-shadow:none; background:var(--surface); justify-content:space-between; }
.stmt-ok{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--accent-deep); } .stmt-ok .icon{ width:16px; height:16px; }
.fees{ flex-direction:row; gap:14px; }
.fee{ flex:1; display:flex; flex-direction:column; gap:4px; padding:26px 22px; border-radius:20px; background:var(--bg); box-shadow:0 1px 2px rgba(17,26,12,.08); }
.fee b{ font-family:var(--font-display); font-size:clamp(46px, 5vw, 64px); line-height:1; letter-spacing:-.03em; color:var(--accent); }
.fee span{ font-weight:600; } .fee small{ color:var(--ink-faint); font-size:13.5px; }
.fee-hi{ background:var(--accent); } .fee-hi b, .fee-hi span, .fee-hi small{ color:var(--accent-on); }
/* Icon variant of .fee: same card, no number to show (fees are quoted directly, never published). */
.fee-ic{ display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:var(--accent-tint); color:var(--accent-deep); }
.fee-ic .icon{ width:26px; height:26px; }
.fee-hi .fee-ic{ background:color-mix(in srgb, var(--accent-on) 18%, transparent); color:var(--accent-on); }
.own-reviews{ border-top:1px solid var(--line); padding-block:72px; }
.rv-row{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 18px; margin-inline:-2px; scrollbar-width:thin; }
.rv-row .rv{ flex:0 0 min(380px, 86%); scroll-snap-align:start; margin:0; }
.rv-row .rv:nth-child(3n+2){ background:var(--accent-tint); }
@media (max-width:980px){ .own-hero{ gap:36px; } .own-trust{ grid-template-columns:repeat(2, minmax(0,1fr)); } .own-row{ grid-template-columns:minmax(0,1fr); gap:32px; padding-block:52px; } .own-row.is-rev .own-vis{ order:0; } }
@media (max-width:480px){ .own-vis{ padding:20px; } .fees{ flex-direction:column; } .own-trust{ grid-template-columns:1fr; } .own-hero-r{ padding:18px; } }
/* Calculator: apartment/villa switch, then the bedrooms switch (hidden for villas) */
.calc-beds-field.is-hidden{ display:none; }
/* Big, unmissable primary action inside the calculator result. It's a <details> disclosure: clicking it doesn't send the
   owner anywhere on its own, it opens one menu of equal ways to reach us (WhatsApp, Telegram, the contact form), all
   pre-filled with this calculation, so "get the exact numbers" and "message us directly" aren't two competing paths. */
/* z-index (flex items paint by z-index, not just DOM order) so the floated .calc-cta-menu wins over .calc-note,
   which sits later in the flex column and would otherwise paint over it. */
.calc-cta-wrap{ position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; }
.calc-cta-lead{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:color-mix(in srgb, var(--accent-on) 78%, transparent); }
.calc-cta-box{ position:relative; }
.calc-cta{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 8px 8px 22px; border-radius:999px; background:var(--accent-on); color:var(--accent-deep); font-family:var(--font-display); font-size:17px; font-weight:600; letter-spacing:-.01em; list-style:none; cursor:pointer; box-shadow:0 10px 26px -10px rgba(0,0,0,.5); transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-radius .2s ease; animation:calc-cta-pulse 2.6s ease-in-out infinite; }
.calc-cta::-webkit-details-marker{ display:none; }
.calc-cta i{ display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:50%; background:var(--accent); color:var(--accent-on); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.calc-cta i .icon{ width:19px; height:19px; }
@media (hover:hover){
  .calc-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(0,0,0,.55); }
  .calc-cta:hover i{ transform:translateX(3px) scale(1.06); }
}
@keyframes calc-cta-pulse{ 0%,100%{ box-shadow:0 10px 26px -10px rgba(0,0,0,.5), 0 0 0 0 color-mix(in srgb, var(--accent-on) 35%, transparent); } 50%{ box-shadow:0 10px 26px -10px rgba(0,0,0,.5), 0 0 0 8px color-mix(in srgb, var(--accent-on) 0%, transparent); } }
.calc-cta-box[open] .calc-cta{ animation:none; transform:none; box-shadow:none; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.calc-cta-box[open] .calc-cta i{ transform:rotate(90deg); }
/* Floats over the note/accordion below instead of pushing them down: absolute, not part of the document's flow, so
   opening the menu doesn't shift the rest of the calculator card. */
.calc-cta-menu{ position:absolute; top:100%; left:0; right:0; z-index:5; display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:0 0 var(--radius-lg) var(--radius-lg); background:var(--accent); box-shadow:0 18px 36px -14px rgba(0,0,0,.55); border:1px solid color-mix(in srgb, var(--accent-on) 22%, transparent); border-top:none; animation:calc-menu-in .22s ease; }
.calc-cta-menu-lead{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:color-mix(in srgb, var(--accent-on) 65%, transparent); padding:4px 10px 6px; }
.calc-cta-opt{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--radius); color:var(--accent-on); font-size:14.5px; font-weight:600; transition:background .18s ease, transform .18s ease; }
.calc-cta-opt svg{ width:19px; height:19px; flex:none; }
@media (hover:hover){ .calc-cta-opt:hover{ background:color-mix(in srgb, var(--accent-on) 16%, transparent); transform:translateX(2px); } }
@keyframes calc-menu-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .calc-cta{ animation:none; } .calc-cta-menu{ animation:none; } }
/* When the result column itself is this narrow (e.g. the owners-hero calculator, once inputs and results sit side by
   side), the horizontal pill has no room to breathe: stack the label above a small icon instead of squeezing both
   into one wrapped-five-times row, and tighten the menu rows to match. */
@container (max-width:259px){
  .calc-cta{ flex-direction:column; align-items:flex-start; padding:14px 16px; gap:10px; font-size:14px; border-radius:var(--radius-lg); }
  .calc-cta-box[open] .calc-cta{ border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
  .calc-cta i{ align-self:flex-end; width:30px; height:30px; }
  .calc-cta i .icon{ width:14px; height:14px; }
  .calc-cta-menu{ padding:10px; }
  .calc-cta-opt{ align-items:flex-start; font-size:13.5px; gap:10px; padding:9px 10px; }
  .calc-cta-opt svg{ width:16px; height:16px; margin-top:2px; }
}

/* Tenants overview: trust bar with icons, guide lead-magnet card */
.own-trust-3{ grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:0; }
.own-trust-3 > div{ flex-direction:row; align-items:flex-start; gap:12px; }
.own-trust-3 span:last-child{ font-size:15px; line-height:1.45; color:var(--ink); font-weight:500; }
.trust-ic{ display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:10px; background:var(--accent-tint); color:var(--accent-deep); }
.trust-ic .icon{ width:18px; height:18px; }
@media (max-width:900px){ .own-trust-3{ grid-template-columns:1fr; } }
.ten-guide{ border-top:1px solid var(--line); padding-block:64px; }
.guide-card{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:40px; border-radius:var(--radius-xl); background:linear-gradient(160deg, var(--accent-tint), color-mix(in srgb, var(--accent) 12%, var(--accent-tint))); }
.guide-txt h2{ font-size:clamp(24px, 2.6vw, 32px); font-weight:600; letter-spacing:-.015em; margin:10px 0 12px; line-height:1.2; }
.guide-txt p{ font-size:16px; line-height:1.6; color:var(--ink-soft); max-width:44ch; }
.guide-card .form{ max-width:none; gap:14px; }
.guide-card .form-grid{ grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .guide-card{ grid-template-columns:1fr; padding:28px; gap:24px; } .guide-card .form-grid{ grid-template-columns:1fr; } }

/* Tenants hero: text left, live "find your match" tool right */
@media (min-width:960px){ .own-hero-split{ grid-template-columns:.9fr 1.1fr; align-items:center; } .own-hero-split .own-trust{ grid-column:1 / -1; } }
.match-filters{ display:flex; gap:14px; flex-wrap:wrap; margin:22px 0 22px; }
.match-filters .field{ flex:1; min-width:170px; }
.match-filters .seg{ display:flex; width:100%; } .match-filters .seg-btn{ flex:1; }
.match-out{ display:flex; flex-direction:column; gap:12px; }
.match-count{ font-size:13.5px; font-weight:600; color:var(--accent-deep); text-transform:uppercase; letter-spacing:.03em; }
.match-cards{ display:flex; flex-direction:column; gap:10px; }
.match-card{ display:flex; align-items:center; gap:14px; padding:10px; border-radius:var(--radius-lg); background:var(--bg); box-shadow:0 1px 2px rgba(17,26,12,.08); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
@media (hover:hover){ .match-card:hover{ transform:translateY(-2px); } }
.match-card img{ width:60px; height:60px; border-radius:10px; object-fit:cover; flex:none; }
.match-card .mc-t{ flex:1; min-width:0; }
.match-card .mc-t b{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.match-card .mc-t small{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.match-empty{ padding:18px; border-radius:var(--radius-lg); background:var(--bg); color:var(--ink-soft); font-size:14px; line-height:1.55; }
/* .own-more gives "See all homes" the same pill-with-circle-arrow look as the site's other "see more" links, instead
   of a plain underlined link that (stretched full-width by .match-out's flex column) looked like a divider. */
.match-cta{ align-self:flex-start; margin-top:4px; }

/* CONVERSION BUTTONS: the site's two actions look the same everywhere.
   Primary (.cta-pill): owners work out what their property could earn, the pill with the arrow in a circle, as on
   "For property owners". Secondary (.cta-alt): guests book a stay, an outlined pill. */
.cta-pill{ display:inline-flex; align-items:center; justify-content:space-between; gap:14px; padding:6px 6px 6px 22px; border-radius:999px; background:var(--accent); color:var(--accent-on); font-family:var(--font-display); font-size:16.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; transition:background .2s ease, transform .2s ease, box-shadow .25s ease; }
.cta-pill i{ display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; background:var(--accent-on); color:var(--accent-deep); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.cta-pill .icon{ width:18px; height:18px; }
.cta-pill-sm{ gap:10px; padding:4px 4px 4px 18px; font-size:15px; }
.cta-pill-sm i{ width:36px; height:36px; }
.cta-pill-sm .icon{ width:16px; height:16px; }
.cta-pill-block{ width:100%; }
.cta-alt{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:999px; border:1px solid var(--accent); color:var(--accent); font-weight:600; font-size:15px; white-space:nowrap; transition:background .2s ease, color .2s ease; }
.cta-alt .icon{ width:18px; height:18px; }
.cta-alt-sm{ padding:9px 16px; font-size:14px; }
.cta-alt-block{ width:100%; }
.nav-right{ gap:10px; }
/* The header carries both actions, so it gets a little more width than the page content. */
.nav > .container{ max-width:1380px; }
.ctaband .cta-pill{ background:var(--accent-on); color:var(--accent-deep); }
.ctaband .cta-pill i{ background:var(--accent); color:var(--accent-on); }
.ctaband .cta-alt{ border-color:color-mix(in srgb, var(--accent-on) 60%, transparent); color:var(--accent-on); }
/* Hover only where a pointer can actually hover: on touch, :hover sticks after a tap until the user taps elsewhere
   (visible as a button stuck in its "pressed" colour after a scroll that brushed it). */
@media (hover:hover){
  .cta-pill:hover{ background:var(--accent-deep); transform:translateY(-1px); box-shadow:0 14px 28px -12px rgba(17,26,12,.6); }
  .cta-pill:hover i{ transform:translateX(3px) scale(1.06); }
  /* The header pill reacts more quietly than the big ones on the page. */
  .cta-pill-sm:hover{ transform:none; box-shadow:0 8px 18px -12px rgba(17,26,12,.5); }
  .cta-pill-sm:hover i{ transform:translateX(2px); }
  .cta-alt:hover{ background:var(--accent-tint); }
  .ctaband .cta-pill:hover{ background:var(--bg); }
  .ctaband .cta-alt:hover{ background:color-mix(in srgb, var(--accent-on) 14%, transparent); }
}
/* The two actions sit side by side; only on narrow phones do they stack, full width. */
.hero-cta:has(.cta-pill){ flex-wrap:nowrap; gap:12px; }
@media (max-width:480px){ .hero-cta:has(.cta-pill){ flex-wrap:wrap; } .hero-cta .cta-pill, .hero-cta .cta-alt, .ctaband .cta-pill, .ctaband .cta-alt{ width:100%; }
  .hero-cta .cta-pill, .ctaband .cta-pill{ padding-left:6px; }
  .hero-cta .cta-pill > span, .ctaband .cta-pill > span{ flex:1; text-align:center; padding-left:54px; } }
/* Full-width pill: the label is centred across the whole button (the empty space on the left balances the arrow circle). */
.cta-pill-block{ padding-left:6px; }
.cta-pill-block > span{ flex:1; text-align:center; padding-left:54px; }
@media (prefers-reduced-motion: reduce){ .cta-pill, .cta-pill i{ transition:none; } }

/* ---------- How management works (home): pinned notes on ruled paper ----------
   Four notes pinned to a lined board, tilted in turn and joined by a slowly moving dashed line; on phones they stack. */
.hiw{ --paper-line:color-mix(in srgb, var(--ink) 9%, transparent); }
.hiw-head{ align-items:center; text-align:center; margin-inline:auto; }
.hiw-board{ position:relative; max-width:1000px; height:880px; margin:8px auto 0; }
.hiw-board::before{ content:''; position:absolute; inset:-24px -32px; z-index:0; pointer-events:none; background:repeating-linear-gradient(to bottom, transparent 0 31px, var(--paper-line) 31px 32px); -webkit-mask:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite:source-in; mask:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-composite:intersect; }
.hiw-path{ position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.hiw-path path{ fill:none; stroke:color-mix(in srgb, var(--ink) 28%, transparent); stroke-width:2; stroke-dasharray:8 6; stroke-linecap:round; vector-effect:non-scaling-stroke; animation:hiw-dash 3s linear infinite; }
@keyframes hiw-dash{ to{ stroke-dashoffset:-140; } }
.hiw-list{ list-style:none; margin:0; padding:0; }
.hiw-card{ --tone-bg:var(--accent-tint); --tone-ink:var(--accent); --tone-line:color-mix(in srgb, var(--accent) 16%, transparent);
  position:absolute; z-index:1; width:290px; padding:8px; border-radius:25px; background:#fff; border:1px solid color-mix(in srgb, var(--ink) 7%, transparent); box-shadow:0 14px 28px -10px rgba(17,26,12,.22), 0 2px 6px rgba(17,26,12,.06); transform:rotate(var(--tilt)); transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
@media (hover:hover) and (min-width:761px){ .hiw-card:hover{ z-index:3; transform:rotate(0deg) scale(1.04); box-shadow:0 24px 44px -14px rgba(17,26,12,.3), 0 2px 6px rgba(17,26,12,.06); } }
.hiw-card:nth-child(1){ --tilt:5deg; top:0; left:15%; }
.hiw-card:nth-child(2){ --tilt:-5deg; top:120px; right:15%; }
.hiw-card:nth-child(3){ --tilt:5deg; top:450px; left:15%; }
.hiw-card:nth-child(4){ --tilt:-5deg; top:570px; right:10%; }
.hiw-sand{ --tone-bg:#F4ECDC; --tone-ink:#8A5B12; --tone-line:#EADCC0; }
.hiw-sea{ --tone-bg:#E2EEF1; --tone-ink:#1F6275; --tone-line:#CBE0E6; }
.hiw-lilac{ --tone-bg:#ECE8F5; --tone-ink:#5A4A8E; --tone-line:#DDD6EE; }
.hiw-pin{ display:block; width:32px; height:32px; margin:6px auto 18px; color:var(--tone-ink); filter:drop-shadow(0 2px 2px rgba(17,26,12,.18)); }
.hiw-note{ padding:18px 18px 20px; border-radius:17px; background:var(--tone-bg); border:1px solid var(--tone-line); }
.hiw-num{ display:block; margin-bottom:16px; font-family:var(--font-display); font-size:38px; font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--tone-ink); }
.hiw-note h3{ font-size:21px; font-weight:600; line-height:1.15; letter-spacing:-.01em; color:#151A0F; margin-bottom:10px; }
.hiw-note p{ font-size:14.5px; line-height:1.55; color:#4A5140; }
.hiw-cta{ display:flex; justify-content:center; margin-top:8px; }
:root[data-theme="dark"] .hiw-card{ background:var(--surface); border-color:var(--line); box-shadow:none; }
:root[data-theme="dark"] .hiw-note{ background:color-mix(in srgb, var(--tone-ink) 16%, var(--surface)); border-color:color-mix(in srgb, var(--tone-ink) 26%, transparent); }
:root[data-theme="dark"] .hiw-note h3{ color:var(--ink); }
:root[data-theme="dark"] .hiw-note p{ color:var(--ink-soft); }
:root[data-theme="dark"] .hiw-sand{ --tone-ink:#D9A96A; } :root[data-theme="dark"] .hiw-sea{ --tone-ink:#7FC0D2; } :root[data-theme="dark"] .hiw-lilac{ --tone-ink:#B3A6E0; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hiw-card{ background:var(--surface); border-color:var(--line); box-shadow:none; }
  :root:not([data-theme="light"]) .hiw-note{ background:color-mix(in srgb, var(--tone-ink) 16%, var(--surface)); border-color:color-mix(in srgb, var(--tone-ink) 26%, transparent); }
  :root:not([data-theme="light"]) .hiw-note h3{ color:var(--ink); }
  :root:not([data-theme="light"]) .hiw-note p{ color:var(--ink-soft); }
  :root:not([data-theme="light"]) .hiw-sand{ --tone-ink:#D9A96A; } :root:not([data-theme="light"]) .hiw-sea{ --tone-ink:#7FC0D2; } :root:not([data-theme="light"]) .hiw-lilac{ --tone-ink:#B3A6E0; }
}
@media (max-width:900px) and (min-width:761px){ .hiw-card:nth-child(odd){ left:4%; } .hiw-card:nth-child(even){ right:4%; } }
@media (max-width:760px){
  .hiw-board{ height:auto; }
  .hiw-board::before{ inset:-16px -20px; }
  .hiw-path{ display:none; }
  .hiw-list{ display:flex; flex-direction:column; gap:22px; max-width:400px; margin:0 auto; }
  .hiw-card{ position:relative; inset:auto; width:auto; }
  .hiw-card:nth-child(n){ top:auto; left:auto; right:auto; }
  .hiw-card:nth-child(odd){ --tilt:1.5deg; } .hiw-card:nth-child(even){ --tilt:-1.5deg; }
  .hiw-cta{ margin-top:36px; }
}
@media (prefers-reduced-motion: reduce){ .hiw-path path{ animation:none; } }

/* The dark "How management works" block inside a content page (Management Services). */
.dark.dark-inset{ margin-inline:0; margin-top:56px; }
.dark-inset .dark-in{ padding:64px 56px; }
@media (max-width:600px){ .dark-inset .dark-in{ padding:40px 24px; } }

/* ---------- Our Story ---------- */
.story-quote{ margin:0 0 48px; padding:36px 40px; border-radius:var(--radius-xl); background:var(--accent-tint); position:relative; }
.story-quote::before{ content:'\201C'; position:absolute; top:-6px; left:26px; font-family:var(--font-display); font-size:120px; line-height:1; color:color-mix(in srgb, var(--accent) 30%, transparent); }
.story-quote blockquote{ margin:0; position:relative; }
.story-quote blockquote p{ font-family:var(--font-display); font-size:clamp(22px, 2.4vw, 28px); line-height:1.3; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.story-quote figcaption{ display:flex; flex-direction:column; margin-top:20px; font-size:15px; }
.story-quote figcaption span{ color:var(--ink-soft); }
.story-prose + .story-points, .story-points + .story-prose{ margin-top:36px; }
.story-points{ list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.story-points li{ display:flex; gap:14px; padding:20px; border-radius:var(--radius-lg); background:var(--surface); }
.story-points .icon{ flex:none; width:24px; height:24px; color:var(--accent); margin-top:2px; }
.story-points b{ display:block; font-size:16px; margin-bottom:4px; }
.story-points span{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); }
.story-cta{ display:grid; grid-template-columns:minmax(0, 300px) 1fr; gap:36px; align-items:center; margin-top:56px; padding:28px; border-radius:var(--radius-xl); background:var(--surface); }
.story-photo{ aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(160deg, var(--accent-tint), color-mix(in srgb, var(--accent) 22%, var(--surface))); display:grid; place-items:center; }
.story-photo img{ width:100%; height:100%; object-fit:cover; }
.story-mono{ font-family:var(--font-display); font-size:120px; font-weight:600; color:var(--accent); opacity:.55; }
.story-cta-t h2{ font-size:28px; font-weight:600; margin:10px 0 10px; }
.story-cta-t p{ font-size:16px; line-height:1.6; color:var(--ink-soft); max-width:46ch; }
.story-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
@media (max-width:720px){ .story-points{ grid-template-columns:1fr; } .story-cta{ grid-template-columns:1fr; padding:18px; } .story-photo{ max-width:260px; } .story-quote{ padding:28px 22px; } .story-btns .cta-pill{ width:100%; } }
.terms-sum{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:20px; }
.terms-sum div{ padding:16px; border-radius:var(--radius); background:var(--surface); }
.terms-sum b{ display:block; font-size:15px; color:var(--ink); }
.terms-sum span{ display:block; font-size:14px; line-height:1.45; color:var(--ink-soft); margin-top:4px; }
@media (max-width:760px){ .terms-sum{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ---------- Feature illustrations (src/visuals.mjs): one small scene per row, each with its own tone ---------- */
.vx-bg-sea{ --vx-t:#E2EEF1; --vx-i:#1F6275; }
.vx-bg-sand{ --vx-t:#F4ECDC; --vx-i:#8A5B12; }
.vx-bg-lilac{ --vx-t:#ECE8F5; --vx-i:#5A4A8E; }
.own-vis[class*="vx-bg-"]{ background:linear-gradient(160deg, var(--vx-t), color-mix(in srgb, var(--vx-i) 16%, var(--vx-t))); }
.vx{ --card:#fff; --vx-tone:var(--vx-i, var(--accent)); position:relative; min-height:360px; color:var(--ink); }
:root[data-theme="dark"] .vx{ --card:var(--surface); }
:root[data-theme="dark"] .own-vis[class*="vx-bg-"]{ background:linear-gradient(160deg, color-mix(in srgb, var(--vx-i) 22%, var(--bg)), color-mix(in srgb, var(--vx-i) 34%, var(--bg))); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .vx{ --card:var(--surface); }
  :root:not([data-theme="light"]) .own-vis[class*="vx-bg-"]{ background:linear-gradient(160deg, color-mix(in srgb, var(--vx-i) 22%, var(--bg)), color-mix(in srgb, var(--vx-i) 34%, var(--bg))); }
}
.vx-a{ animation:vx-in .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * .14s + .1s); }
.vx-wait .vx-a, .vx-wait .vx-pen, .vx-wait .vx-bar{ animation-play-state:paused; }
@keyframes vx-in{ from{ opacity:0; translate:0 14px; } }
.vx-shadow, .vx-ph, .vx-paper, .vx-phone, .vx-card, .vx-rc, .vx-core{ box-shadow:0 18px 40px -18px rgba(17,26,12,.35), 0 2px 6px rgba(17,26,12,.06); }

/* Photos */
.vx-photos .vx-ph{ position:absolute; width:56%; margin:0; padding:8px 8px 12px; border-radius:16px; background:var(--card); }
.vx-ph img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.vx-ph figcaption{ display:flex; flex-direction:column; padding:8px 4px 0; font-size:13px; line-height:1.3; }
.vx-ph figcaption small{ color:var(--ink-faint); }
.vx-ph:nth-of-type(1){ left:2%; top:46px; rotate:-7deg; }
.vx-ph:nth-of-type(2){ right:2%; top:24px; rotate:6deg; }
.vx-ph:nth-of-type(3){ left:22%; top:104px; rotate:-1deg; z-index:2; }
.vx-real{ position:absolute; left:16px; top:16px; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.94); color:#151A0F; font-size:12px; font-weight:700; }
.vx-real .icon{ width:15px; height:15px; color:var(--accent); }
.vx-avail{ position:absolute; right:0; top:-6px; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:var(--card); font-size:12.5px; font-weight:700; }
.vx-avail i{ width:8px; height:8px; border-radius:50%; background:#2E9B3A; box-shadow:0 0 0 4px color-mix(in srgb, #2E9B3A 20%, transparent); }

/* Contract */
.vx-contract{ display:grid; place-items:center; }
.vx-paper{ width:88%; margin-bottom:20px; padding:22px 22px 18px; border-radius:14px; background:var(--card); rotate:-2deg; display:flex; flex-direction:column; gap:8px; }
.vx-paper-h{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.vx-paper-h b{ font-family:var(--font-display); font-size:18px; }
.vx-paper-h small{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.vx-line{ display:block; width:var(--w); height:7px; border-radius:4px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.vx-fee{ display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-radius:10px; background:color-mix(in srgb, var(--vx-tone) 10%, transparent); font-size:14px; }
.vx-fee:first-of-type{ margin-top:8px; }
.vx-fee b{ font-family:var(--font-display); font-size:17px; color:var(--vx-tone); }
.vx-fee-soft{ background:transparent; border:1px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.vx-fee-soft b{ font-family:var(--font-body); font-size:13.5px; color:var(--ink-soft); }
.vx-sign{ display:flex; align-items:flex-end; gap:12px; margin-top:6px; padding-top:6px; border-bottom:1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.vx-sign small{ font-size:11.5px; color:var(--ink-faint); padding-bottom:6px; }
.vx-sign svg{ width:140px; height:40px; }
.vx-pen{ fill:none; stroke:var(--vx-tone); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:420; stroke-dashoffset:420; animation:vx-draw 1.6s .5s ease-out forwards; }
@keyframes vx-draw{ to{ stroke-dashoffset:0; } }
.vx-stamp{ position:absolute; right:-1%; bottom:-18px; display:flex; flex-direction:column; align-items:center; justify-content:center; width:108px; height:108px; border-radius:50%; border:2px dashed var(--vx-tone); background:var(--card); box-shadow:0 10px 24px -12px rgba(17,26,12,.35); color:var(--vx-tone); text-align:center; rotate:-14deg; }
.vx-stamp .icon{ width:22px; height:22px; }
.vx-stamp b{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; line-height:1.15; margin-top:2px; }
.vx-stamp small{ font-size:10px; line-height:1.2; padding-inline:12px; margin-top:3px; }

/* Chat */
.vx-chat{ display:grid; place-items:center; }
.vx-phone{ width:min(290px, 92%); display:flex; flex-direction:column; gap:8px; padding:12px 12px 16px; border:7px solid #151A0F; border-radius:36px; background:var(--card); overflow:hidden; }
.vx-phone-h{ display:flex; align-items:center; gap:10px; padding:4px 4px 10px; margin-bottom:2px; border-bottom:1px solid var(--line); }
.vx-phone-h span{ display:flex; flex-direction:column; line-height:1.25; }
.vx-phone-h b{ font-size:13.5px; } .vx-phone-h small{ font-size:11px; color:var(--ink-faint); }
.vx-av{ flex:none; display:grid !important; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent-tint); }
.vx-av .brand-mark{ width:20px; height:20px; }
.vx-b{ position:relative; max-width:84%; margin:0; padding:8px 12px 18px; border-radius:16px; font-size:12.5px; line-height:1.4; }
.vx-b small{ position:absolute; right:10px; bottom:4px; font-size:10px; opacity:.7; }
.vx-me{ align-self:flex-end; background:var(--accent); color:var(--accent-on); border-bottom-right-radius:5px; }
.vx-us{ align-self:flex-start; background:color-mix(in srgb, var(--vx-tone) 12%, var(--card)); border-bottom-left-radius:5px; }
.vx-sys{ align-self:center; display:inline-flex; align-items:center; gap:6px; margin:2px 0; padding:4px 10px; border-radius:999px; background:color-mix(in srgb, var(--ink) 7%, transparent); font-size:11px; font-weight:600; color:var(--ink-soft); }
.vx-sys .icon{ width:13px; height:13px; }
.vx-heart{ position:absolute; left:-10px; bottom:-8px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--card); color:#D8455B; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.vx-heart .icon{ width:13px; height:13px; }

/* Orbit */
.vx-orbit{ display:grid; place-items:center; overflow:hidden; }
.vx-rings, .vx-ring{ position:absolute; left:50%; top:50%; width:320px; height:320px; margin:-160px 0 0 -160px; }
.vx-rings i{ position:absolute; inset:0; border-radius:50%; border:1.5px dashed color-mix(in srgb, var(--accent) 35%, transparent); }
.vx-rings i + i{ inset:58px; border-style:solid; border-color:color-mix(in srgb, var(--accent) 16%, transparent); }
.vx-ring{ animation:vx-spin 60s linear infinite; }
.vx-sat{ position:absolute; left:50%; top:50%; width:0; height:0; rotate:var(--a); }
.vx-sat > span{ position:absolute; left:0; top:-160px; translate:-50% -50%; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:var(--card); font-size:12.5px; font-weight:600; white-space:nowrap; box-shadow:0 8px 18px -10px rgba(17,26,12,.4); rotate:calc(var(--a) * -1); animation:vx-spin 60s linear infinite reverse; }
.vx-sat .icon{ width:16px; height:16px; color:var(--accent); }
@keyframes vx-spin{ to{ transform:rotate(360deg); } }
.vx-core{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; width:172px; padding:18px 14px; border-radius:24px; background:var(--accent); color:var(--accent-on); }
.vx-core small{ font-size:11.5px; opacity:.8; }
.vx-core b{ font-size:14px; margin-top:2px; }
.vx-core-sum{ font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-.02em; margin:6px 0 2px; }

/* Profile */
.vx-profile{ display:grid; place-items:center; }
.vx-card{ width:92%; padding:20px; border-radius:22px; background:var(--card); }
.vx-prof-h{ display:flex; align-items:center; gap:14px; }
.vx-avatar{ position:relative; flex:none; display:grid; place-items:center; width:64px; height:64px; border-radius:18px; overflow:hidden; background:color-mix(in srgb, var(--vx-tone) 14%, var(--card)); color:var(--vx-tone); }
.vx-avatar .icon{ width:44px; height:44px; }
.vx-scan{ position:absolute; left:0; right:0; top:0; height:2px; background:var(--vx-tone); box-shadow:0 0 12px 2px color-mix(in srgb, var(--vx-tone) 60%, transparent); animation:vx-scan 2.4s ease-in-out infinite; }
@keyframes vx-scan{ 0%,100%{ top:4%; } 50%{ top:92%; } }
.vx-prof-t{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.vx-prof-t b{ font-size:15px; } .vx-prof-t small{ font-size:12px; color:var(--ink-faint); }
.vx-bars{ display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.vx-bars i{ display:block; width:var(--w); height:6px; border-radius:3px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.vx-gauge{ flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:74px; height:74px; border-radius:50%; background:radial-gradient(closest-side, var(--card) 76%, transparent 78%), conic-gradient(var(--vx-tone) 100%, transparent 0); }
.vx-gauge b{ font-family:var(--font-display); font-size:19px; line-height:1; } .vx-gauge small{ font-size:10.5px; color:var(--ink-faint); }
.vx-checks{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:18px; }
.vx-chk{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px 12px; border-radius:14px; background:color-mix(in srgb, var(--vx-tone) 9%, var(--card)); font-size:12.5px; font-weight:600; text-align:center; }
.vx-chk > .icon{ width:24px; height:24px; color:var(--vx-tone); }
.vx-chk i{ position:absolute; top:-7px; right:-5px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--accent-on); border:2px solid var(--card); }
.vx-chk i .icon{ width:12px; height:12px; }
.vx-prof-f{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding:12px 14px; border-radius:14px; background:var(--accent); color:var(--accent-on); font-size:13.5px; font-weight:600; }
.vx-prof-f span{ display:inline-flex; align-items:center; gap:8px; } .vx-prof-f .icon{ width:18px; height:18px; }
.vx-prof-f em{ font-style:normal; font-size:11.5px; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.18); }

/* Receipt */
.vx-receipt{ display:grid; place-items:center; }
.vx-rc{ width:80%; padding:22px 22px 30px; background:var(--card); rotate:1.5deg; border-radius:14px 14px 0 0;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/18px 10px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/18px 10px repeat-x; }
.vx-rc-h{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
.vx-rc-h span{ display:flex; flex-direction:column; } .vx-rc-h b{ font-size:15px; } .vx-rc-h small{ font-size:12px; color:var(--ink-faint); }
.vx-rc-ic{ flex:none; display:grid !important; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--vx-tone); color:#fff; }
.vx-rc-ic .icon{ width:20px; height:20px; }
.vx-rc-rows{ display:flex; flex-direction:column; gap:2px; padding:12px 0; font-family:var(--font-mono); font-size:12.5px; }
.vx-rc-rows div{ display:flex; justify-content:space-between; padding:5px 0; }
.vx-rc-zero{ margin-top:6px; padding:7px 10px !important; border-radius:9px; background:var(--accent-tint); color:var(--accent-deep); font-weight:600; }
.vx-rc-total{ margin-top:6px; padding-top:10px !important; border-top:1px dashed color-mix(in srgb, var(--ink) 20%, transparent); font-weight:700; font-size:14px; }
.vx-rc-att{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; background:color-mix(in srgb, var(--vx-tone) 9%, var(--card)); }
.vx-rc-att img{ width:44px; height:44px; object-fit:cover; border-radius:8px; }
.vx-rc-att span{ flex:1; display:flex; flex-direction:column; font-size:12.5px; line-height:1.3; } .vx-rc-att small{ color:var(--ink-faint); font-size:11.5px; }
.vx-rc-att > .icon{ width:18px; height:18px; color:var(--vx-tone); }

/* Waterfall */
.vx-fall{ display:grid; place-items:center; }
.vx-fall-h{ display:flex; justify-content:space-between; align-items:baseline; }
.vx-fall-h b{ font-family:var(--font-display); font-size:18px; } .vx-fall-h small{ font-size:12px; color:var(--ink-faint); }
.vx-fall-chart{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; height:200px; margin:22px 0 10px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.vx-col{ position:relative; }
.vx-col small{ position:absolute; left:0; right:0; bottom:-26px; text-align:center; font-size:11.5px; color:var(--ink-soft); white-space:nowrap; }
.vx-bar{ position:absolute; left:0; right:0; bottom:var(--b); height:var(--h); border-radius:8px; transform-origin:bottom; animation-name:vx-grow; }
@keyframes vx-grow{ from{ transform:scaleY(0); opacity:0; } }
.vx-bar em{ position:absolute; left:50%; bottom:calc(100% + 5px); translate:-50% 0; font-style:normal; font-size:11.5px; font-weight:700; white-space:nowrap; }
.vx-k-in{ background:color-mix(in srgb, var(--accent) 45%, transparent); }
.vx-k-out{ background:color-mix(in srgb, var(--vx-tone) 55%, transparent); }
.vx-k-fee{ background:color-mix(in srgb, #8A5B12 45%, transparent); }
.vx-k-net{ background:var(--accent); }
.vx-fall-f{ display:flex; align-items:center; gap:8px; margin-top:6px; font-size:13px; font-weight:600; color:var(--accent-deep); }
.vx-fall-f .icon{ width:18px; height:18px; }

@media (max-width:480px){
  .vx{ min-height:320px; }
  .vx-photos .vx-ph{ width:62%; } .vx-ph:nth-of-type(3){ left:18%; top:96px; }
  .vx-rings, .vx-ring{ width:210px; height:210px; margin:-105px 0 0 -105px; }
  .vx-rings i + i{ inset:40px; }
  .vx-sat > span{ top:-105px; font-size:11px; padding:5px 9px; gap:4px; } .vx-sat .icon{ width:13px; height:13px; }
  .vx-core{ width:104px; padding:12px 8px; border-radius:18px; } .vx-core small:first-child{ display:none; } .vx-core b{ font-size:12px; line-height:1.25; } .vx-core-sum{ font-size:20px; margin:4px 0 0; } .vx-core small{ font-size:10px; }
  .vx-card{ width:100%; padding:16px; } .vx-rc{ width:92%; } .vx-paper{ width:96%; }
  .vx-stamp{ width:96px; height:96px; right:-2%; } .vx-stamp small{ display:none; }
  .vx-fall-chart{ gap:8px; } .vx-col small{ font-size:10.5px; }
}
@media (prefers-reduced-motion: reduce){ .vx-a, .vx-bar, .vx-ring, .vx-sat > span, .vx-scan{ animation:none !important; } .vx-pen{ animation:none; stroke-dashoffset:0; } }

/* ---------- Blog (Stripe-style) and Resources hub ---------- */
.bl-head{ padding-block:24px 36px; }
.bl-head h1{ font-size:clamp(44px, 6vw, 76px); font-weight:600; letter-spacing:-.03em; line-height:1; }
.bl-head p{ margin-top:16px; max-width:52ch; font-size:18px; line-height:1.6; color:var(--ink-soft); }
.bl-cover{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.bl-img{ display:block; overflow:hidden; border-radius:var(--radius-lg); background:var(--surface); }
.bl-cat{ display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.bl-by{ display:inline-flex; align-items:center; gap:10px; }
.bl-by > span:last-child{ display:flex; flex-direction:column; line-height:1.3; }
.bl-by b{ font-size:14px; color:var(--ink); } .bl-by small{ font-size:13px; color:var(--ink-faint); }
.bl-av{ display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:var(--accent-tint); }
.bl-av .brand-mark{ width:20px; height:20px; }
.bl-feature{ display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center; padding-bottom:64px; border-bottom:1px solid var(--line); }
.bl-feature .bl-img{ aspect-ratio:16/11; }
.bl-feature-t{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.bl-feature-t > b{ font-family:var(--font-display); font-size:clamp(28px, 3.2vw, 40px); font-weight:600; line-height:1.12; letter-spacing:-.02em; color:var(--ink); transition:color .2s ease; }
.bl-ex{ font-size:17px; line-height:1.6; color:var(--ink-soft); margin-bottom:8px; }
.bl-feature:hover .bl-cover, .bl-card a:hover .bl-cover, .rs-feature:hover .bl-cover{ transform:scale(1.04); }
.bl-feature:hover .bl-feature-t > b, .bl-card a:hover h3{ color:var(--accent); }
.bl-list{ padding-block:56px 96px; }
.bl-bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.bl-bar h2{ font-size:26px; font-weight:600; }
.bl-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.bl-tabs button{ padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:transparent; font:inherit; font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.bl-tabs button:hover{ border-color:var(--ink-faint); color:var(--ink); }
.bl-tabs button[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.bl-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px 28px; }
.bl-card[hidden]{ display:none; }
.bl-card a{ display:flex; flex-direction:column; gap:10px; height:100%; }
.bl-card .bl-img{ aspect-ratio:16/10; margin-bottom:8px; }
.bl-card h3{ font-size:21px; font-weight:600; line-height:1.25; letter-spacing:-.01em; transition:color .2s ease; }
.bl-card p{ font-size:15px; line-height:1.6; color:var(--ink-soft); flex:1; }
.bl-card .bl-by{ margin-top:6px; }
.bl-next{ border-top:1px solid var(--line); }
.bl-next .bl-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.article-head{ margin-inline:auto; padding-bottom:36px; text-align:left; }
.article-head h1{ font-size:clamp(34px, 4.4vw, 52px); letter-spacing:-.025em; margin:12px 0 16px; }
.article-lead{ font-size:19px; line-height:1.6; color:var(--ink-soft); margin-bottom:24px; }
.article-cover{ max-width:1000px; margin:0 auto; aspect-ratio:16/8; overflow:hidden; border-radius:var(--radius-xl); }
.article-cover .bl-cover{ transition:none; }
.article-body{ margin-inline:auto; padding-top:48px; }
@media (max-width:900px){ .bl-feature{ grid-template-columns:1fr; gap:24px; } .bl-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .bl-grid, .bl-next .bl-grid{ grid-template-columns:1fr; } .article-cover{ aspect-ratio:4/3; border-radius:var(--radius-lg); } }

.rs-hero{ padding-block:24px 40px; }
.rs-hero h1{ font-size:clamp(36px, 4.8vw, 60px); font-weight:600; line-height:1.05; letter-spacing:-.03em; max-width:18ch; margin:12px 0 18px; }
.rs-hero .lead{ font-size:18px; line-height:1.6; color:var(--ink-soft); max-width:56ch; }
.rs-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:minmax(220px, auto); gap:16px; }
.rs-feature{ grid-column:span 2; grid-row:span 2; position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:460px; border-radius:var(--radius-xl); overflow:hidden; color:#fff; }
.rs-feature .bl-cover{ position:absolute; inset:0; }
.rs-feature::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,16,7,.05) 15%, rgba(10,16,7,.55) 45%, rgba(10,16,7,.9)); }
.rs-feature-t{ position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; padding:28px; }
.rs-feature-t .cap{ color:#cfe6b6; }
.rs-feature-t > b{ font-family:var(--font-display); font-size:clamp(24px, 2.6vw, 32px); font-weight:600; line-height:1.15; letter-spacing:-.02em; }
.rs-feature-t > span:not(.bl-by):not(.cap){ font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.85); max-width:46ch; }
.rs-feature .bl-by b{ color:#fff; } .rs-feature .bl-by small{ color:rgba(255,255,255,.75); }
.rs-tile{ --t:var(--accent-tint); --ti:var(--accent); display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:var(--radius-xl); background:var(--t); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.rs-tile:hover{ transform:translateY(-3px); }
.rs-sea{ --t:#E2EEF1; --ti:#1F6275; } .rs-sand{ --t:#F4ECDC; --ti:#8A5B12; } .rs-lilac{ --t:#ECE8F5; --ti:#5A4A8E; }
.rs-ic{ display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--ti); color:#fff; margin-bottom:10px; }
.rs-ic .icon{ width:22px; height:22px; }
.rs-tile b{ font-size:19px; color:#151A0F; } .rs-tile > span:not(.rs-ic){ font-size:14.5px; line-height:1.55; color:#4A5140; flex:1; }
.rs-tile em{ display:inline-flex; align-items:center; gap:6px; font-style:normal; font-size:14px; font-weight:700; color:var(--ti); margin-top:6px; }
.rs-tile em .icon{ width:16px; height:16px; transition:transform .3s ease; } .rs-tile:hover em .icon{ transform:translateX(3px); }
:root[data-theme="dark"] .rs-tile{ background:color-mix(in srgb, var(--ti) 22%, var(--bg)); } :root[data-theme="dark"] .rs-tile b{ color:var(--ink); } :root[data-theme="dark"] .rs-tile > span:not(.rs-ic){ color:var(--ink-soft); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rs-tile{ background:color-mix(in srgb, var(--ti) 22%, var(--bg)); } :root:not([data-theme="light"]) .rs-tile b{ color:var(--ink); } :root:not([data-theme="light"]) .rs-tile > span:not(.rs-ic){ color:var(--ink-soft); } }
.rs-more-h{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.rs-more-h h2{ font-size:28px; font-weight:600; }
.rs-more .bl-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.rs-ask{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:40px; margin-bottom:64px; border-radius:var(--radius-xl); background:var(--surface); }
.rs-ask h2{ font-size:30px; font-weight:600; margin:8px 0 6px; } .rs-ask p{ color:var(--ink-soft); }
.rs-ask-btns{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:1000px){ .rs-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .rs-grid{ grid-template-columns:1fr; } .rs-feature{ grid-column:auto; grid-row:auto; min-height:380px; } .rs-more .bl-grid{ grid-template-columns:1fr; } .rs-ask{ padding:24px; } }

/* ---------- About Us ---------- */
.ab-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding-block:24px 56px; }
.ab-hero h1{ font-size:clamp(36px, 4.6vw, 58px); font-weight:600; line-height:1.05; letter-spacing:-.03em; margin:12px 0 18px; }
.ab-hero .lead{ font-size:18px; line-height:1.6; color:var(--ink-soft); max-width:52ch; margin-bottom:28px; }
.ab-hero-v{ position:relative; height:440px; }
.ab-ph{ position:absolute; object-fit:cover; border-radius:var(--radius-xl); box-shadow:0 24px 48px -24px rgba(17,26,12,.45); }
.ab-ph-1{ left:0; top:0; width:64%; height:78%; }
.ab-ph-2{ right:0; bottom:0; width:52%; height:62%; border:6px solid var(--bg); }
.ab-badge{ position:absolute; left:6%; bottom:6%; display:flex; flex-direction:column; padding:14px 18px; border-radius:18px; background:var(--bg); box-shadow:0 14px 30px -14px rgba(17,26,12,.45); max-width:190px; }
.ab-badge b{ font-family:var(--font-display); font-size:30px; line-height:1; color:var(--accent); }
.ab-badge small{ font-size:12.5px; line-height:1.35; color:var(--ink-soft); margin-top:4px; }
.ab-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; }
.ab-stats div{ display:flex; flex-direction:column; gap:8px; padding:28px; }
.ab-stats div + div{ border-left:1px solid var(--line); }
.ab-stats b{ font-family:var(--font-display); font-size:clamp(34px, 3.6vw, 46px); font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--accent); }
.ab-stats span{ font-size:14.5px; line-height:1.45; color:var(--ink-soft); }
.ab-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ab-card{ display:flex; flex-direction:column; gap:10px; padding:32px; border-radius:var(--radius-xl); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.ab-card:hover{ transform:translateY(-3px); }
.ab-owners{ background:var(--accent); color:var(--accent-on); }
.ab-guests{ background:#E2EEF1; color:#151A0F; }
.ab-card-ic{ display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.16); margin-bottom:12px; }
.ab-guests .ab-card-ic{ background:#1F6275; color:#fff; }
.ab-card-ic .icon{ width:24px; height:24px; }
.ab-card .cap{ opacity:.85; }
.ab-owners .cap{ color:#cfe6b6; opacity:1; }
.ab-card b{ font-family:var(--font-display); font-size:26px; font-weight:600; line-height:1.15; letter-spacing:-.01em; }
.ab-card > span:not(.ab-card-ic):not(.cap){ font-size:15.5px; line-height:1.6; opacity:.88; flex:1; }
.ab-card em{ display:inline-flex; align-items:center; gap:8px; font-style:normal; font-weight:700; margin-top:10px; }
.ab-card em .icon{ width:18px; height:18px; transition:transform .3s ease; } .ab-card:hover em .icon{ transform:translateX(4px); }
.ab-values, .ar-how{ border-top:1px solid var(--line); }
.ab-val-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.ab-val{ display:flex; flex-direction:column; gap:10px; padding:26px; border-radius:var(--radius-lg); background:var(--surface); }
.ab-val > span{ font-family:var(--font-mono); font-size:13px; color:var(--accent); }
.ab-val > span .icon{ width:26px; height:26px; }
.ab-val b{ font-size:18px; line-height:1.3; }
.ab-val p{ font-size:15px; line-height:1.6; color:var(--ink-soft); }
.ab-areas{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; border-top:1px solid var(--line); }
.ab-areas h2{ font-size:clamp(28px, 3vw, 38px); font-weight:600; line-height:1.15; margin:10px 0 14px; }
.ab-areas p{ font-size:16.5px; line-height:1.65; color:var(--ink-soft); margin-bottom:22px; }
.ab-areas-map .mf-img{ display:grid; height:auto; aspect-ratio:auto; padding:28px; border-radius:var(--radius-xl); }
.ab-office{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:56px; padding:28px 32px; border-radius:var(--radius-xl); background:var(--surface); }
.ab-office h3{ font-size:20px; font-weight:600; } .ab-office p{ font-size:14px; color:var(--ink-faint); margin-top:4px; }
.ab-office-l{ display:flex; flex-wrap:wrap; gap:10px 24px; font-size:15px; }
.ab-office-l > *{ display:inline-flex; align-items:center; gap:8px; } .ab-office-l a:hover{ color:var(--accent); }
.ab-office-l .icon{ width:18px; height:18px; color:var(--accent); }
@media (max-width:980px){ .ab-hero, .ab-areas{ grid-template-columns:1fr; gap:32px; } .ab-hero-v{ height:360px; } .ab-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); } .ab-stats div:nth-child(3){ border-left:0; } .ab-stats div:nth-child(n+3){ border-top:1px solid var(--line); } .ab-val-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .ab-cards, .ab-val-grid{ grid-template-columns:1fr; } .ab-hero-v{ height:300px; } .ab-card{ padding:24px; } .ab-stats div{ padding:20px; } .ab-office{ padding:22px; } }

/* ---------- Areas We Serve ---------- */
.ar-hero{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; padding-block:24px 48px; }
.ar-hero h1{ font-size:clamp(34px, 4.4vw, 54px); font-weight:600; line-height:1.06; letter-spacing:-.03em; margin:12px 0 18px; }
.ar-hero .lead{ font-size:17.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:24px; }
.ar-jump{ display:flex; flex-wrap:wrap; gap:8px; }
.ar-jump a{ padding:8px 16px; border-radius:999px; border:1px solid var(--line); font-size:14px; font-weight:600; transition:background .2s ease, border-color .2s ease; }
@media (hover:hover){ .ar-jump a:hover{ border-color:var(--accent); background:var(--accent-tint); } }
.ar-map{ padding:28px; border-radius:var(--radius-xl); background:linear-gradient(160deg, var(--accent-tint), color-mix(in srgb, var(--accent) 16%, var(--accent-tint))); }
.area-map{ display:block; width:100%; height:auto; overflow:visible; }
.area-map .mm-t{ font-size:9.5px; }
.mm-pin{ cursor:pointer; }
.mm-pin .mm-dot{ transition:r .2s ease, fill .2s ease; }
.mm-pin:hover .mm-dot, .mm-pin:focus-visible .mm-dot{ fill:var(--accent); r:6.5; }
.mm-pin:hover .mm-t{ fill:var(--accent-deep); }
.ar-list{ display:flex; flex-direction:column; }
.ar-d{ display:grid; grid-template-columns:minmax(0, 360px) 1fr; gap:48px; padding-block:40px; border-top:1px solid var(--line); scroll-margin-top:100px; }
.ar-d-h{ display:flex; gap:18px; align-items:flex-start; }
.ar-n{ font-family:var(--font-mono); font-size:13px; color:var(--accent); padding-top:10px; }
.ar-d h2{ font-size:clamp(30px, 3.4vw, 40px); font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.ar-drive{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-size:14px; color:var(--ink-soft); }
.ar-drive .icon{ width:17px; height:17px; color:var(--accent); }
.ar-d-b > p:first-child{ font-size:17px; line-height:1.65; color:var(--ink); max-width:62ch; }
.ar-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.ar-tags span{ padding:6px 12px; border-radius:999px; background:var(--accent-tint); color:var(--accent-deep); font-size:13px; font-weight:600; }
.ar-market{ font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:62ch; padding:14px 18px; border-left:3px solid var(--accent); background:var(--surface); border-radius:0 12px 12px 0; margin-bottom:18px; }
.ar-market b{ color:var(--ink); }
.ar-how-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:980px){ .ar-hero, .ar-d{ grid-template-columns:1fr; gap:24px; } .ar-how-grid{ grid-template-columns:1fr; } }
@media (max-width:600px){ .ar-map{ padding:14px; } }

/* ---------- Core Values ---------- */
.cv-hero{ padding-block:24px 48px; }
.cv-hero h1{ font-size:clamp(46px, 7vw, 96px); font-weight:600; line-height:.98; letter-spacing:-.035em; margin:14px 0 36px; }
.cv-phil{ display:grid; grid-template-columns:minmax(0, 260px) 1fr; gap:40px; padding-top:32px; border-top:1px solid var(--line); }
.cv-phil h2{ font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); padding-top:8px; }
.cv-phil p{ font-family:var(--font-display); font-size:clamp(22px, 2.5vw, 32px); line-height:1.3; font-weight:500; letter-spacing:-.015em; color:var(--ink); }
.cv-phil p b{ color:var(--accent); font-weight:600; }
.cv-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; padding-bottom:72px; }
.cv-card{ --t:var(--accent-tint); --ti:var(--accent); display:flex; flex-direction:column; gap:14px; padding:34px; border-radius:var(--radius-xl); background:var(--t); }
.cv-2{ --t:#E2EEF1; --ti:#1F6275; } .cv-3{ --t:#F4ECDC; --ti:#8A5B12; } .cv-4{ --t:#ECE8F5; --ti:#5A4A8E; }
.cv-card-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.cv-n{ font-family:var(--font-display); font-size:44px; font-weight:600; line-height:1; color:var(--ti); letter-spacing:-.02em; }
.cv-ic{ display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:var(--ti); color:#fff; }
.cv-ic .icon{ width:26px; height:26px; }
.cv-card h2{ font-size:26px; font-weight:600; letter-spacing:-.01em; color:#151A0F; }
.cv-card p{ font-size:16px; line-height:1.65; color:#4A5140; }
:root[data-theme="dark"] .cv-card{ background:color-mix(in srgb, var(--ti) 22%, var(--bg)); } :root[data-theme="dark"] .cv-card h2{ color:var(--ink); } :root[data-theme="dark"] .cv-card p{ color:var(--ink-soft); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cv-card{ background:color-mix(in srgb, var(--ti) 22%, var(--bg)); } :root:not([data-theme="light"]) .cv-card h2{ color:var(--ink); } :root:not([data-theme="light"]) .cv-card p{ color:var(--ink-soft); } }
@media (max-width:800px){ .cv-phil, .cv-grid{ grid-template-columns:1fr; gap:16px; } .cv-card{ padding:26px; } }
/* FAQ chat kept narrow on wide screens, so questions (right) and answers (left) stay close together. */
.faq-list, .faq-group{ max-width:720px; }
.faq-section .faq-list, .faq-group{ margin-inline:auto; width:100%; }

/* ---------- Home: "Whether you own or rent" and "What we handle" ---------- */
.ho-duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ho-card{ display:flex; flex-direction:column; border-radius:var(--radius-xl); overflow:hidden; }
.ho-own{ background:var(--accent); color:var(--accent-on); }
.ho-rent{ background:#E2EEF1; color:#151A0F; }
.ho-body{ display:flex; flex-direction:column; gap:10px; padding:28px; flex:1; }
.ho-body h3{ font-family:var(--font-display); font-size:28px; font-weight:600; letter-spacing:-.015em; }
.ho-body > p{ font-size:16px; line-height:1.6; opacity:.86; margin-bottom:10px; max-width:48ch; }
.ho-links{ display:flex; flex-direction:column; gap:2px; }
.ho-promo{ display:flex; align-items:center; gap:16px; margin-top:auto; padding:18px 20px; border-radius:18px; background:#1F6275; color:#fff; transition:background .2s ease; }
.ho-promo span{ display:flex; flex-direction:column; gap:4px; } .ho-promo b{ font-size:16px; } .ho-promo small{ font-size:13.5px; line-height:1.45; opacity:.85; }
.ho-promo i{ display:grid; place-items:center; flex:none; width:40px; height:40px; margin-left:auto; border-radius:50%; background:#fff; color:#1F6275; } .ho-promo i .icon{ width:18px; height:18px; }
.ho-rent .ho-links{ margin-bottom:18px; }
.ho-links a{ display:flex; align-items:center; gap:14px; padding:12px; margin-inline:-12px; border-radius:14px; transition:background .2s ease; }
.ho-links a > .icon{ width:18px; height:18px; margin-left:auto; flex:none; opacity:.6; transition:transform .25s ease, opacity .2s ease; }
.ho-links a > span:nth-child(2){ display:flex; flex-direction:column; line-height:1.3; }
.ho-links b{ font-size:15.5px; } .ho-links small{ font-size:13px; opacity:.72; }
.ho-li{ display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:12px; }
.ho-li .icon{ width:19px; height:19px; }
.ho-own .ho-li{ background:rgba(255,255,255,.14); }
.ho-rent .ho-li{ background:#1F6275; color:#fff; }
@media (hover:hover){
  .ho-promo:hover{ background:#174E5E; }
  .ho-own .ho-links a:hover{ background:rgba(255,255,255,.1); }
  .ho-rent .ho-links a:hover{ background:rgba(31,98,117,.1); }
  .ho-links a:hover > .icon{ transform:translateX(3px); opacity:1; }
}
:root[data-theme="dark"] .ho-rent{ background:color-mix(in srgb, #1F6275 30%, var(--bg)); color:var(--ink); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ho-rent{ background:color-mix(in srgb, #1F6275 30%, var(--bg)); color:var(--ink); } }

.ho-handle{ border-top:1px solid var(--line); }
.ho-handle-h{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end; margin-bottom:36px; }
.ho-handle-h h2{ font-size:clamp(30px, 3.6vw, 46px); font-weight:600; line-height:1.08; letter-spacing:-.025em; margin-top:12px; }
.ho-handle-h .lead{ font-size:17px; line-height:1.6; color:var(--ink-soft); margin-bottom:20px; }
@media (max-width:980px){ .ho-duo, .ho-handle-h{ grid-template-columns:1fr; gap:16px; } }
@media (max-width:600px){ .ho-body{ padding:22px; } }



/* Home cards: no pictures, an icon and a label on top */
.ho-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.ho-hic{ display:grid; place-items:center; width:52px; height:52px; border-radius:16px; }
.ho-hic .icon{ width:26px; height:26px; }
.ho-own .ho-hic{ background:rgba(255,255,255,.14); } .ho-own .ho-head .cap{ color:#cfe6b6; }
.ho-rent .ho-hic{ background:#1F6275; color:#fff; } .ho-rent .ho-head .cap{ color:#1F6275; }
.ho-body{ padding:32px; }

/* What we handle: six big pills fallen into a heap; each opens its full card */
.heap{ position:relative; display:flex; flex-direction:column; margin-top:28px; padding:28px 24px 30px; border-radius:var(--radius-xl); background:var(--surface); overflow:hidden; }
.heap-hint{ display:flex; align-items:center; gap:8px; justify-content:center; font-size:14px; color:var(--ink-faint); }
.heap-hint .icon{ width:18px; height:18px; }
.heap-pile{ position:relative; margin-top:auto; height:336px; transition:opacity .3s ease, filter .3s ease; }
.pill{ --x:0%; --y:0px; --r:0deg; position:absolute; left:var(--x); bottom:var(--y); rotate:var(--r); display:inline-flex; align-items:center; gap:14px; height:96px; padding:0 36px 0 16px; border:0; border-radius:999px; background:var(--pb); color:var(--pf); font-family:var(--font-display); font-size:clamp(20px, 2.2vw, 28px); font-weight:600; letter-spacing:-.01em; white-space:nowrap; cursor:pointer; box-shadow:0 18px 30px -18px rgba(17,26,12,.55), inset 0 -3px 0 rgba(0,0,0,.08); transition:translate .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.pill:focus-visible{ translate:0 -6px; box-shadow:0 26px 36px -18px rgba(17,26,12,.6), inset 0 -3px 0 rgba(0,0,0,.08); }
@media (hover:hover){ .pill:hover{ translate:0 -6px; box-shadow:0 26px 36px -18px rgba(17,26,12,.6), inset 0 -3px 0 rgba(0,0,0,.08); } }
.pill-ic{ display:grid; place-items:center; flex:none; width:64px; height:64px; border-radius:50%; background:var(--pi); color:var(--pf); }
.pill-ic .icon{ width:30px; height:30px; }
.pill-green{ --pb:var(--accent); --pf:var(--accent-on); --pi:rgba(255,255,255,.16); }
.pill-sea{ --pb:#1F6275; --pf:#fff; --pi:rgba(255,255,255,.16); }
.pill-sand{ --pb:#E9D7B4; --pf:#4A3208; --pi:rgba(255,255,255,.55); }
.pill-lilac{ --pb:#D9D1EE; --pf:#2E2356; --pi:rgba(255,255,255,.55); }
.pill-ink{ --pb:#151A0F; --pf:#F5F8EF; --pi:rgba(255,255,255,.12); }
.pill-tint{ --pb:#C9DDB5; --pf:#0C3E00; --pi:rgba(255,255,255,.55); }
.pill-1{ --x:2%; --y:0px; --r:-4deg; z-index:1; }
.pill-2{ --x:37%; --y:0px; --r:3deg; z-index:1; }
.pill-3{ --x:71%; --y:2px; --r:-8deg; z-index:1; }
.pill-4{ --x:11%; --y:94px; --r:9deg; z-index:2; }
.pill-5{ --x:45%; --y:98px; --r:-7deg; z-index:2; }
.pill-6{ --x:24%; --y:192px; --r:4deg; z-index:3; }
.heap-fall .pill{ animation:heap-fall .9s cubic-bezier(.3,1.35,.55,1) backwards; animation-delay:var(--d); }
.heap-wait .pill{ opacity:0; }
@keyframes heap-fall{ from{ translate:0 -460px; rotate:calc(var(--r) - 28deg); opacity:0; } 30%{ opacity:1; } }
.heap.is-open .heap-pile{ opacity:.18; filter:blur(3px); pointer-events:none; }
.heap.is-open .heap-hint{ visibility:hidden; }
.heap-card{ --cb:var(--accent); --cf:var(--accent-on); position:absolute; z-index:5; left:50%; top:50%; width:min(560px, calc(100% - 32px)); translate:-50% -50%; display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:32px; border-radius:28px; background:var(--cb); color:var(--cf); box-shadow:0 30px 60px -28px rgba(17,26,12,.6); animation:heap-open .35s cubic-bezier(.2,.9,.3,1.2) both; }
.heap-card[hidden]{ display:none; }
@keyframes heap-open{ from{ opacity:0; scale:.85; } }
.heap-sea{ --cb:#1F6275; --cf:#fff; } .heap-sand{ --cb:#F4ECDC; --cf:#2B1D05; } .heap-lilac{ --cb:#ECE8F5; --cf:#231A45; } .heap-ink{ --cb:#151A0F; --cf:#F5F8EF; } .heap-tint{ --cb:var(--accent-tint); --cf:var(--accent-deep); }
.heap-x{ position:absolute; right:16px; top:16px; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:color-mix(in srgb, currentColor 14%, transparent); color:inherit; cursor:pointer; }
.heap-x .icon{ width:18px; height:18px; }
.heap-big{ display:grid; place-items:center; width:64px; height:64px; border-radius:20px; background:color-mix(in srgb, currentColor 14%, transparent); }
.heap-big .icon{ width:32px; height:32px; }
.heap-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:color-mix(in srgb, currentColor 12%, transparent); font-size:13px; font-weight:600; }
.heap-chip .icon{ width:16px; height:16px; }
.heap-card h3{ font-family:var(--font-display); font-size:clamp(22px, 2.4vw, 30px); font-weight:600; line-height:1.15; letter-spacing:-.015em; padding-right:40px; }
.heap-card p{ font-size:16px; line-height:1.6; opacity:.88; }
.heap-card ul{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:9px; }
.heap-card li{ display:flex; align-items:center; gap:10px; font-size:15px; }
.heap-card li .icon{ flex:none; width:18px; height:18px; padding:3px; border-radius:50%; background:var(--cf); color:var(--cb); }
.ho-handle-f{ display:flex; justify-content:center; margin-top:28px; }
@media (max-width:760px){
  .heap{ padding:20px 10px 22px; }
  .heap-pile{ height:246px; }
  .pill{ height:54px; gap:7px; padding:0 16px 0 7px; font-size:15px; }
  .pill-ic{ width:40px; height:40px; } .pill-ic .icon{ width:20px; height:20px; }
  .pill-3{ --x:0%; --y:0px; --r:-5deg; } .pill-1{ --x:38%; --y:2px; --r:3deg; }
  .pill-4{ --x:3%; --y:58px; --r:6deg; } .pill-2{ --x:44%; --y:60px; --r:-4deg; }
  .pill-5{ --x:9%; --y:118px; --r:-3deg; } .pill-6{ --x:18%; --y:174px; --r:5deg; }
  /* The open card lies over the heap, like on desktop; the heap is tall enough for the longest card, so opening
     and closing never changes the height of the section. */
  .heap-card{ width:calc(100% - 20px); padding:24px; }
}
@media (max-width:370px){ .pill{ font-size:14px; padding-right:12px; } }
@media (prefers-reduced-motion: reduce){ .heap-fall .pill, .heap-card{ animation:none; } .heap-wait .pill{ opacity:1; } }

/* ---------- 404 ---------- */
.nf{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-block:48px 110px; }
.nf-code{ display:flex; align-items:flex-end; gap:clamp(8px, 1.6vw, 18px); font-family:var(--font-display); font-weight:600; font-size:clamp(120px, 20vw, 220px); line-height:.8; letter-spacing:-.04em; color:var(--accent); }
.nf-door{ position:relative; display:block; width:.56em; height:.8em; border-radius:.28em .28em .04em .04em; background:linear-gradient(160deg, var(--accent), var(--accent-deep)); box-shadow:inset 0 0 0 .035em color-mix(in srgb, var(--accent-on) 18%, transparent); transform-origin:left center; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.nf-door::after{ content:''; position:absolute; right:14%; top:52%; width:.05em; height:.05em; border-radius:50%; background:var(--accent-on); }
.nf-hole{ position:absolute; left:50%; top:30%; width:.09em; height:.14em; translate:-50% 0; }
.nf-hole::before{ content:''; position:absolute; left:0; top:0; width:.09em; height:.09em; border-radius:50%; background:var(--bg); }
.nf-hole::after{ content:''; position:absolute; left:50%; top:.06em; width:.04em; height:.08em; translate:-50% 0; border-radius:0 0 .02em .02em; background:var(--bg); }
.nf-code:hover .nf-door{ transform:perspective(600px) rotateY(-24deg); }
.nf h1{ font-size:clamp(28px, 3.6vw, 44px); font-weight:600; letter-spacing:-.02em; line-height:1.1; margin:40px 0 12px; }
.nf .lead{ font-size:17.5px; color:var(--ink-soft); margin-bottom:28px; }
.nf-links{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; width:min(760px, 100%); text-align:left; }
.nf-links a{ display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:var(--bg); transition:border-color .2s ease, background .2s ease, transform .25s ease; }
@media (hover:hover){ .nf-links a:hover{ border-color:var(--accent); background:var(--accent-tint); transform:translateY(-2px); } }
.nf-links a > span:nth-child(2){ flex:1; display:flex; flex-direction:column; line-height:1.3; }
.nf-links b{ font-size:16px; } .nf-links small{ font-size:13.5px; color:var(--ink-soft); }
.nf-links a > .icon{ width:18px; height:18px; color:var(--ink-faint); }
.nf-ic{ display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:14px; background:var(--accent-tint); color:var(--accent-deep); }
.nf-ic .icon{ width:22px; height:22px; }
.nf-home{ margin-top:28px; }
@media (max-width:640px){ .nf-links{ grid-template-columns:1fr; } .nf{ padding-block:44px 72px; } }
@media (prefers-reduced-motion: reduce){ .nf-door{ transition:none; } }
/* Section main page: a distinct overview button above the list of its pages */
.ho-main{ display:flex; align-items:center; gap:16px; margin:6px 0 20px; padding:16px 16px 16px 22px; border-radius:18px; transition:transform .25s ease, box-shadow .25s ease; }
.ho-main span{ display:flex; flex-direction:column; gap:2px; flex:1; } .ho-main b{ font-size:17px; } .ho-main small{ font-size:13.5px; opacity:.75; }
.ho-main i{ display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:50%; transition:transform .25s ease; } .ho-main i .icon{ width:18px; height:18px; }
@media (hover:hover){ .ho-main:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -16px rgba(17,26,12,.45); } .ho-main:hover i{ transform:translateX(3px); } }
.ho-own .ho-main{ background:var(--accent-on); color:var(--accent-deep); } .ho-own .ho-main i{ background:var(--accent); color:var(--accent-on); }
.ho-rent .ho-main{ background:#fff; color:#123F4C; } .ho-rent .ho-main i{ background:#1F6275; color:#fff; }
.ho-sub{ display:block; font-size:11.5px; letter-spacing:.08em; margin-bottom:4px; }
.ho-own .ho-sub{ color:#cfe6b6; } .ho-rent .ho-sub{ color:#1F6275; }

/* ---------- One type scale for section heads (home and every page using .block-head) ----------
   Eyebrow 12px mono, heading 30 to 44px Bricolage (line-height 1.1), intro 17.5px Plex (line-height 1.6),
   10px from eyebrow to heading, 16px from heading to intro, 40px to the content. Left-aligned. */
.block-head{ display:flex; flex-direction:column; align-items:flex-start; gap:0; max-width:760px; margin:0 0 40px; text-align:left; }
.block-head .cap{ margin-bottom:10px; }
.block-head h2{ font-family:var(--font-display); font-size:clamp(30px, 3.4vw, 44px); font-weight:600; line-height:1.1; letter-spacing:-.02em; color:var(--ink); max-width:24ch; }
.block-head p{ margin-top:16px; font-size:17.5px; line-height:1.6; color:var(--ink-soft); max-width:62ch; }
.faq-section .block-head, .hiw-head{ align-items:flex-start; text-align:left; margin-inline:0; }
.faq-section .faq-list{ margin-inline:auto; } /* the chat sits in the middle; the section head stays on the left */
.reviews .block-head{ margin-bottom:40px; }
.areas-in.block-head{ max-width:none; margin:0; padding-block:88px; padding-inline:32px; margin-inline:auto; max-width:1180px; }
.areas .block-head h2{ max-width:24ch; }
.areas .block-head p{ max-width:none; }
/* Card titles and card text on the home page share one size each */
.ho-body h3{ font-size:28px; line-height:1.15; letter-spacing:-.015em; }
.ho-body > p{ font-size:16px; line-height:1.6; }

/* ---------- One type scale for the main page of every section (Owners, Tenants, About, Resources, Contact) ----------
   Page title: eyebrow 12px mono, 10px, title 38 to 58px (line-height 1.05), 18px, intro 18px (line-height 1.6).
   Section heads: the same scale as .block-head (eyebrow, 10px, 30 to 44px heading at 1.1, 16px, 17.5px intro at 1.6).
   Panel titles (the calculator, the match finder): 30px at 1.15, 8px, 16px intro. Everything left-aligned. */
.own-hero h1, .ab-hero h1, .rs-hero h1, .page-hero.is-main h1{ font-size:clamp(38px, 4.8vw, 58px); line-height:1.05; letter-spacing:-.03em; font-weight:600; margin:0 0 18px; }
.own-hero-l .cap + h1, .ab-hero .cap + h1, .rs-hero .cap + h1, .page-hero.is-main .cap + h1{ margin-top:10px; }
.own-hero .lead, .ab-hero .lead, .rs-hero .lead, .page-hero.is-main .lead{ font-size:18px; line-height:1.6; color:var(--ink-soft); }
.page-hero.is-main{ display:flex; flex-direction:column; align-items:flex-start; }
.own-txt h2, .guide-txt h2, .ab-areas h2, .rs-more-h h2, .rs-ask h2{ font-family:var(--font-display); font-size:clamp(30px, 3.4vw, 44px); line-height:1.1; letter-spacing:-.02em; font-weight:600; margin:0; text-align:left; }
.own-txt .cap, .guide-txt .cap, .ab-areas .cap, .rs-more-h .cap, .rs-ask .cap{ display:block; }
.own-txt .cap + h2, .guide-txt .cap + h2, .ab-areas .cap + h2, .rs-more-h .cap + h2, .rs-ask .cap + h2{ margin-top:10px; }
.own-txt h2 + p, .guide-txt h2 + p, .ab-areas h2 + p, .rs-ask h2 + p{ margin-top:16px; font-size:17.5px; line-height:1.6; color:var(--ink-soft); }
.rs-more-h{ align-items:flex-end; flex-wrap:wrap; margin-bottom:40px; }
.own-hero-r h2{ font-size:30px; line-height:1.15; letter-spacing:-.015em; margin:0; }
.own-hero-r h2 + .intro{ margin-top:8px; font-size:16px; line-height:1.6; }
.own-hero-l .cap, .ab-hero .cap, .rs-hero .cap, .page-hero.is-main .cap{ display:block; line-height:14px; }

/* Open card: the key fact sits beside the icon, on the first line */
.heap-top{ display:flex; align-items:center; gap:14px; padding-right:48px; }
.heap-top .heap-big{ flex:none; }