/* Site-kit base stylesheet. Brand values are injected by scaffold.mjs into the
   :root @token block below (marked lines). Everything else is theme-agnostic and
   driven by semantic tokens — do not hardcode brand colors past the token block. */

:root {
  /* @token:brand-start (scaffold overwrites these five lines) */
  --accent: #5e9bd6;
  --accent-light: #8fbce6;
  --accent-dark: #2f6ea8;
  --ink: #0f172a;
  /* @token:brand-end */

  /* Semantic — LIGHT (default) */
  --bg: #ffffff;
  --bg-soft: #f6f3ee;
  --surface: #ffffff;
  --text: #2a2f36;
  --text-muted: #6b7178;
  --heading: var(--ink);
  --line: #e4ddd1;
  --nav-bg: rgba(255,255,255,0.9);
  --nav-text: var(--ink);
  --footer-bg: var(--ink);
  --footer-text: #9aa3ad;
  --hero-scrim: linear-gradient(180deg, rgba(16,21,28,0.30), rgba(16,21,28,0.45) 55%, rgba(16,21,28,0.72));
  --field-bg: #ffffff;
  --field-border: #d9d1c4;
  --shadow: 0 16px 40px rgba(16,21,28,0.10);
}
[data-theme="dark"] {
  --bg: #0f141a; --bg-soft: #141b22; --surface: #18202a;
  --text: #d8dde3; --text-muted: #93a0ad; --heading: #f4f1ea; --line: #263039;
  --nav-bg: rgba(15,20,26,0.85); --nav-text: #e8ecef;
  --footer-bg: #090d11; --footer-text: #7c8894;
  --hero-scrim: linear-gradient(180deg, rgba(9,13,17,0.45), rgba(9,13,17,0.6) 55%, rgba(15,20,26,0.95));
  --field-bg: #18202a; --field-border: #2f3a44; --shadow: 0 18px 44px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(64px + 1rem); } /* offset fixed nav so anchor headings aren't hidden under it (mobile + desktop) */
body { margin:0; font-family: var(--font-body), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--text); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color .3s ease, color .3s ease; }
img { max-width: 100%; display: block; }
h1,h2,h3 { font-family: var(--font-display), Georgia, serif; color: var(--heading); font-weight: 700; margin: 0; line-height: 1.14; }
h4 { font-family: var(--font-body), sans-serif; color: var(--heading); margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: var(--accent); }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section { padding: 6rem 0; background: var(--bg); transition: background-color .3s ease; }
.section.soft { background: var(--bg-soft); }
.kicker { color: var(--accent); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 600; margin: 0 0 .6rem; }
.section-title { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 .5rem; }
.section-sub { color: var(--text-muted); margin: 0 0 2.6rem; max-width: 62ch; }

.btn { display:inline-block; cursor:pointer; background: var(--accent); color:#fff; font-weight:600; padding:.95rem 2rem; border:0; border-radius:2px; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; font-family: var(--font-body), sans-serif; transition: background .15s ease, transform .15s ease; }
.btn:hover { background: var(--accent-dark); color:#fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; border:1px solid #fff; color:#fff; }
.btn-ghost:hover { background:#fff; color: var(--ink); }

.nav { position: fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:.9rem 24px; padding-top: calc(.9rem + env(safe-area-inset-top)); padding-left: calc(24px + env(safe-area-inset-left)); padding-right: calc(24px + env(safe-area-inset-right)); background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); transition: background-color .3s ease, border-color .3s ease; }
.nav .brand { display:flex; align-items:center; gap:10px; color: var(--nav-text); font-family: var(--font-display), serif; font-weight:700; font-size:1.3rem; letter-spacing:.08em; }
.nav .brand img { height:34px; width:auto; }
.nav-links { display:flex; align-items:center; gap:1.7rem; list-style:none; margin:0; padding:0; }
.nav-links a { color: var(--nav-text); text-transform:uppercase; font-size:.76rem; font-weight:500; letter-spacing:.08em; transition: color .2s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-toggle { display:none; background:none; border:0; color: var(--nav-text); cursor:pointer; }
.theme-toggle { border:1px solid var(--line); background:transparent; color: var(--nav-text); width:38px; height:38px; border-radius:3px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition: border-color .2s ease, color .2s ease; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle .icon-sun { display:none; } .theme-toggle .icon-moon { display:inline; }
[data-theme="dark"] .theme-toggle .icon-sun { display:inline; } [data-theme="dark"] .theme-toggle .icon-moon { display:none; }

/* 94svh: on iOS, svh = the SMALL viewport (address bar expanded), so the hero
   is sized to what's actually visible and never hides content under Safari's
   chrome. Fallback to vh for older browsers. Top padding clears the fixed nav
   plus the device safe-area (notch/status bar) via env(). */
.hero { min-height:94vh; min-height:94svh; display:flex; align-items:flex-end; padding:calc(64px + 1rem + env(safe-area-inset-top)) 0 4.5rem; background: var(--hero-scrim), var(--hero-image); background-size:cover; background-position:center; }
.hero .inner { max-width:1160px; margin:0 auto; padding:0 24px; width:100%; }
.hero .kicker { color: var(--accent-light); }
.hero h1 { color:#fff; font-size:clamp(2.4rem,6vw,4.6rem); max-width:18ch; }
.hero h1 span { color: var(--accent-light); }
.hero p { color: rgba(255,255,255,.92); font-size:1.18rem; max-width:56ch; margin:1.4rem 0 2.2rem; }
.hero .cta-row { display:flex; gap:.8rem; flex-wrap:wrap; }

.grid { display:grid; gap:1.6rem; }
.grid-2 { grid-template-columns:1fr 1fr; } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

.card, .service { background: var(--surface); border:1px solid var(--line); border-radius:4px; padding:1.8rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover, .service:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.card h3, .service h3 { font-size:1.2rem; margin-bottom:.4rem; }
.card p, .service p { color: var(--text-muted); margin:0; font-size:.93rem; }
.service .ic { width:44px; height:44px; color: var(--accent); margin-bottom:.7rem; }

.listing { background: var(--surface); border:1px solid var(--line); border-radius:4px; overflow:hidden; transition: transform .2s ease, box-shadow .2s ease; }
.listing:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.listing .thumb { aspect-ratio:4/3; overflow:hidden; position:relative; }
.listing .thumb img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.listing:hover .thumb img { transform: scale(1.05); }
.listing .tag { position:absolute; top:12px; left:12px; background: var(--accent); color:#fff; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; padding:4px 10px; border-radius:2px; }
.listing .body { padding:1.2rem 1.3rem 1.4rem; }
.listing .price { font-family: var(--font-display), serif; font-size:1.5rem; color: var(--heading); font-weight:700; }
.listing .addr { color: var(--text); font-weight:500; margin:.2rem 0 .1rem; }
.listing .area { color: var(--text-muted); font-size:.85rem; }
.listing .specs { display:flex; gap:1rem; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line); color: var(--text-muted); font-size:.82rem; }

.filter { display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 2rem; }
.filter button { font:inherit; font-size:.78rem; font-weight:500; padding:.5rem 1.1rem; border:1px solid var(--line); background: var(--surface); color: var(--text); border-radius:20px; cursor:pointer; transition:.15s; }
.filter button:hover { border-color: var(--accent); }
.filter button.active { background: var(--accent); border-color: var(--accent); color:#fff; }
.listing.hide, .card.hide { display:none; }

.tile, .area-tile { position:relative; border-radius:4px; overflow:hidden; border:1px solid var(--line); aspect-ratio:3/2; }
.tile img, .area-tile img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.tile:hover img, .area-tile:hover img { transform: scale(1.06); }
.tile figcaption, .area-tile span { position:absolute; left:0; right:0; bottom:0; padding:.8rem 1rem; color:#fff; font-family: var(--font-display), serif; font-size:1.15rem; font-weight:700; background: linear-gradient(to top, rgba(16,21,28,.8), transparent); }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
@media (max-width:640px){ .stats{grid-template-columns:1fr 1fr;} }
.stat .n { font-family: var(--font-display), serif; font-size:2.4rem; font-weight:700; color: var(--accent); line-height:1; }
.stat .l { color: var(--text-muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; margin-top:.4rem; }
.about-img { border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.about-img img { width:100%; height:100%; min-height:340px; object-fit:cover; }

.form { display:grid; gap:1rem; }
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px){ .row-2{grid-template-columns:1fr;} }
.field label { display:block; font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.35rem; color: var(--text-muted); }
.field input, .field select, .field textarea { width:100%; padding:.85rem .95rem; font:inherit; font-size:.95rem; background: var(--field-bg); color: var(--text); border:1px solid var(--field-border); border-radius:3px; }
.field textarea { min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field .invalid-msg { color:#d0564d; font-size:.78rem; margin-top:.3rem; display:none; }
.field.invalid .invalid-msg { display:block; }
.field.invalid input, .field.invalid textarea { border-color:#d0564d; }
#formStatus { font-size:.9rem; }

.footer { background: var(--footer-bg); color: var(--footer-text); padding:3rem 0; font-size:.87rem; transition: background-color .3s ease; }
.footer .container { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.4rem; }
.footer a { color: var(--footer-text); } .footer a:hover { color: var(--accent); }
.footer .disc { font-size:.72rem; opacity:.7; margin-top:.8rem; max-width:60ch; }

.reveal { opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.scroll-progress { position:fixed; top:0; left:0; height:3px; width:0%; background: var(--accent); z-index:1100; transition: width .1s linear; }
.to-top { position:fixed; right:24px; bottom:24px; z-index:1030; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer; background: var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, background .2s ease; box-shadow:0 6px 18px rgba(16,21,28,.3); }
.to-top.show { opacity:1; pointer-events:auto; transform:none; }
.to-top:hover { background: var(--accent-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:900px){
  .nav-toggle { display:inline-flex; }
  .nav-links { position:fixed; top:62px; right:0; left:0; flex-direction:column; align-items:flex-start; gap:0; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); padding:.5rem 24px 1rem; transform: translateY(-130%); transition: transform .25s ease; }
  .nav-links.open { transform:none; }
  .nav-links li { width:100%; padding:.6rem 0; }
  .section { padding:4rem 0; }
  /* Mobile hero: top-align content so it flows DOWN from a safe offset (flex-end
     overflows up on short viewports and tucks under the nav). Top padding =
     nav height + device safe-area (notch), computed via env() so it's exact on
     every iPhone rather than a hardcoded guess. */
  .hero { align-items:flex-start; min-height:auto; padding: calc(72px + env(safe-area-inset-top)) 0 3.5rem; }
}
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* EM ARCH wordmark - two-tone with divider so it reads as two words */
.wm-arch { color: var(--accent); letter-spacing: .1em; font-weight: 400; }
.wm-em { letter-spacing: .04em; }
.wm-bar { margin: 0 .32em; color: var(--text-muted); font-weight: 300; opacity: .6; }
.footer .wm-bar { color: #fff; opacity: .35; }

/* Footer contact line */
.footer-contact { margin-top: .4rem; font-size: .9rem; }
.footer-contact a { color: var(--footer-text); }
.footer-contact a:hover { color: var(--accent-light); }