/* 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; }
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; 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; }

.hero { min-height:94vh; display:flex; align-items:flex-end; padding:0 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; }
}
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .reveal { opacity:1; transform:none; }
}

.contact-details { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:-1.4rem 0 2rem; font-size:1.02rem; }
.contact-details a { color: var(--accent-dark); font-weight:500; }
.contact-details a:hover { color: var(--accent); }
.contact-details .sep { color: var(--text-muted); }

/* EM ARCH wordmark — two-tone so it reads as two distinct words, not "emarch" */
.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 { margin-top: .4rem; font-size: .9rem; }
.footer-contact a { color: var(--footer-text); }
.footer-contact a:hover { color: var(--accent-light); }