/* =============================================================================
   xypno.com — public stylesheet

   Dark corporate: deep navy surfaces, one bright accent, generous whitespace.
   The accent is injected from CMS settings as --accent, so it is changeable
   without touching this file. Everything derived from it uses color-mix() so
   hover and tint states follow the CMS value instead of drifting out of sync.

   There is no photography in this build, so depth comes from gradient, border
   and elevation rather than imagery. Swap in art by giving .project-card .thumb
   and .hero a background image — both are already sized for it.
   ============================================================================= */

:root {
  --accent: #2563EB;

  /* Fallbacks first, for engines without color-mix(). */
  --accent-strong: #1D4ED8;
  --accent-strong: color-mix(in srgb, var(--accent) 78%, #000);
  --accent-soft: rgba(37, 99, 235, 0.14);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line: rgba(37, 99, 235, 0.42);
  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);

  --navy:      #0B1B33;
  --navy-lift: #102544;
  --navy-deep: #071224;

  --ink:      #EAF1FB;
  --ink-soft: #C2D2E8;
  --muted:    #8FA5C4;

  --line:       rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);

  --surface:     var(--navy);
  --surface-alt: var(--navy-lift);

  --wrap: 1180px;
  --radius: 14px;
  --gap: clamp(20px, 4vw, 40px);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--navy); }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font: 17px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Ambient glow behind the top of every page. Fixed-position and non-interactive
   so it never affects layout or intercepts clicks. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 900px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 460px at 18% -6%, var(--accent-soft), transparent 70%),
    radial-gradient(760px 420px at 88% 2%,  rgba(56, 189, 248, 0.10), transparent 72%);
}

body > * { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #fff; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.022em; margin: 0 0 0.5em; color: #fff; }
h1 { font-size: clamp(34px, 5.4vw, 60px); }
h2 { font-size: clamp(26px, 3.2vw, 38px); }
h3 { font-size: clamp(18px, 2vw, 21px); }
p  { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff;
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* -----------------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(11, 27, 51, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  position: sticky; top: 0; z-index: 40;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }

.logo {
  font-weight: 700; font-size: 21px; letter-spacing: -0.03em;
  color: #fff; text-decoration: none;
}
.logo:hover { color: #fff; }

.primary-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 6px 0; display: inline-block; border-bottom: 2px solid transparent;
  transition: color .15s ease;
}
.primary-nav a:hover { color: #fff; }
.primary-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--accent); }

.nav-toggle {
  display: none; width: 44px; height: 40px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: rgba(255,255,255,.04); cursor: pointer; position: relative;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute; left: 12px; width: 18px; height: 2px;
  background: #fff; content: ""; border-radius: 2px;
}
.nav-toggle-bar { top: 19px; }
.nav-toggle-bar::before { top: -6px; left: 0; }
.nav-toggle-bar::after  { top: 6px;  left: 0; }

/* -----------------------------------------------------------------------------
   Layout
   ----------------------------------------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: 20px;
}

.layout > main { min-width: 0; }

/* -----------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------------- */
.hero {
  padding: clamp(64px, 10vw, 120px) 0 clamp(44px, 6vw, 76px);
  max-width: 860px;
}
.hero .eyebrow {
  display: inline-block;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px;
  font-weight: 700; color: #fff; margin: 0 0 20px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.hero h1 { text-wrap: balance; }
.hero p.lede {
  font-size: clamp(18px, 2.2vw, 22px); color: var(--ink-soft);
  max-width: 60ch; line-height: 1.55;
}

.btn {
  display: inline-block; padding: 14px 28px; border-radius: 10px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 16px; border: 1px solid var(--accent);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  box-shadow: 0 10px 26px -12px var(--accent);
}
.btn:hover {
  background: var(--accent-strong); border-color: var(--accent-strong);
  color: #fff; transform: translateY(-1px);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.04); color: #fff;
  border-color: var(--line-strong); box-shadow: none;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09); border-color: var(--accent);
  color: #fff;
}

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* -----------------------------------------------------------------------------
   Stat bar — counts only. No financial figures, ever.
   ----------------------------------------------------------------------------- */
.stat-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: clamp(48px, 7vw, 84px);
}
.stat-bar div {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.stat-bar b {
  display: block; font-size: clamp(32px, 4.2vw, 46px); line-height: 1.02;
  letter-spacing: -0.035em; color: #fff; margin-bottom: 4px;
}
.stat-bar span { color: var(--muted); font-size: 14px; }

/* -----------------------------------------------------------------------------
   Sections
   ----------------------------------------------------------------------------- */
.section { padding-block: clamp(48px, 6.5vw, 84px); }
.section-alt {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.section-head { max-width: 62ch; margin-bottom: 36px; }
.section-head p { color: var(--muted); margin-bottom: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15.5px; margin-bottom: 14px; }
.card .card-link {
  margin-top: auto; font-weight: 600; font-size: 15px;
  text-decoration: none; color: var(--accent);
}
.card .card-link::after { content: " →"; }
.card:hover .card-link { color: #fff; }

.card-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  display: grid; place-items: center; margin-bottom: 18px; color: #fff;
}
.card-icon svg { width: 22px; height: 22px; }

/* -----------------------------------------------------------------------------
   Project cards + status badges
   ----------------------------------------------------------------------------- */
.project-card { position: relative; overflow: hidden; padding: 0; }
.project-card .thumb {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(420px 200px at 30% 0%, var(--accent-soft), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  border-bottom: 1px solid var(--line);
}
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-card .body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.project-card h3 { margin-bottom: 6px; }
.project-card h3 a { color: #fff; text-decoration: none; }
.project-card h3 a:hover { color: var(--accent); }

.meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.category { font-size: 13px; color: var(--muted); }

.badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.badge-active      { background: rgba(34, 197, 94, .16);  color: #7EE2A8; border-color: rgba(34,197,94,.34); }
.badge-in_progress { background: rgba(245, 158, 11, .16); color: #FFCE7A; border-color: rgba(245,158,11,.34); }
.badge-pending     { background: rgba(148, 163, 184, .16);color: #C3D2E6; border-color: rgba(148,163,184,.34); }
.badge-under_offer { background: rgba(56, 189, 248, .16); color: #8FD8FF; border-color: rgba(56,189,248,.34); }
.badge-sold        { background: rgba(168, 85, 247, .16); color: #D6B4FF; border-color: rgba(168,85,247,.34); }

/* -----------------------------------------------------------------------------
   Prose (CMS body content)
   ----------------------------------------------------------------------------- */
.prose { max-width: 72ch; color: var(--ink-soft); }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose strong { color: #fff; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1.1em; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--accent); }
.prose img { border-radius: var(--radius); margin-block: 1.4em; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent); color: var(--muted); font-size: 19px;
}

/* Tables inside CMS body content — the Cookies Policy lists cookies this way.
   Wrapped in its own scroll container so a wide table never forces the page
   itself to scroll sideways on a phone. */
.prose table {
  width: 100%; border-collapse: collapse; margin-block: 1.6em;
  font-size: 15px; display: block; overflow-x: auto;
}
.prose thead th {
  text-align: left; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); font-weight: 700;
  padding: 10px 14px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.prose tbody td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose code {
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 6px; font-size: 0.9em;
  font-family: ui-monospace, Menlo, Consolas, monospace; color: #fff;
}
.prose .alert { display: block; }

.page-header { padding: clamp(48px, 6.5vw, 76px) 0 clamp(20px, 3vw, 32px); max-width: 72ch; }
.page-header .subtitle { color: var(--muted); font-size: clamp(17px, 2vw, 20px); margin: 0; }

/* -----------------------------------------------------------------------------
   FAQ
   ----------------------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 17px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  color: #fff;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0; color: var(--muted); }

/* -----------------------------------------------------------------------------
   Forms
   ----------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-strong);
  border-radius: 10px; font: inherit; font-size: 16px;
  background: rgba(255, 255, 255, 0.04); color: var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: #6E86A8; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height: 160px; resize: vertical; }
.field-full { grid-column: 1 / -1; }

/* Native dropdown lists render in the OS palette; keep options readable. */
.field select option { background: var(--navy-lift); color: var(--ink); }

.alert { padding: 14px 16px; border-radius: 10px; margin-bottom: 24px; font-size: 15px; }
.alert-success { background: rgba(34,197,94,.13);  color: #A7EFC4; border: 1px solid rgba(34,197,94,.32); }
.alert-error   { background: rgba(239,68,68,.13);  color: #FFB4AE; border: 1px solid rgba(239,68,68,.32); }

/* -----------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-deep); color: var(--ink-soft);
  margin-top: clamp(64px, 8vw, 108px);
  padding-block: clamp(48px, 6vw, 72px) 28px; font-size: 15px;
  border-top: 1px solid var(--line);
}
.site-footer h2 { color: #fff; font-size: 24px; }
.site-footer h3 {
  color: #fff; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: 0.09em; margin-bottom: 14px;
}
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.newsletter {
  display: flex; gap: 28px; justify-content: space-between; align-items: center;
  flex-wrap: wrap; padding-bottom: 36px; margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.newsletter p { color: var(--muted); margin: 0; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input {
  padding: 13px 15px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.05); color: #fff; font: inherit; font-size: 15px; min-width: 240px;
}
.newsletter-form input::placeholder { color: #6E86A8; }
.newsletter-form button {
  padding: 13px 24px; border-radius: 10px; border: 0; background: var(--accent);
  color: #fff; font-weight: 600; font-size: 15px; cursor: pointer;
}
.newsletter-form button:hover { background: var(--accent-strong); }

.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px 24px; margin-bottom: 40px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }

.footer-bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
}
.footer-bottom p { margin: 0; }
.social { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }

/* -----------------------------------------------------------------------------
   Cookie notice
   Anchored bottom-left rather than a full-width bar so it never covers the
   footer navigation on a phone, and never blocks the whole viewport.
   ----------------------------------------------------------------------------- */
.cookie-notice {
  position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 440px;
  background: var(--navy-lift);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .85);
  padding: 20px 22px;
}
.cookie-notice[hidden] { display: none; }

.cookie-notice-text { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.cookie-notice-text a { color: var(--accent); }

.cookie-notice-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-notice-actions button {
  font: inherit; font-size: 14px; padding: 10px 18px; border-radius: 8px;
  cursor: pointer; border: 1px solid var(--line-strong);
}
.cookie-notice-actions .btn-ghost { background: rgba(255,255,255,.05); color: #fff; }
.cookie-notice-actions .btn-ghost:hover { background: rgba(255,255,255,.1); }
.cookie-notice-actions .btn-solid {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.cookie-notice-actions .btn-solid:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.cookie-notice-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy-lift);
    border-bottom: 1px solid var(--line); display: none; padding: 8px 20px 18px;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); display: block; }
  .primary-nav a[aria-current="page"] { border-bottom-color: var(--line); }
  .newsletter { flex-direction: column; align-items: flex-start; gap: 16px; }
  .newsletter-form input { min-width: 0; flex: 1 1 200px; }
  .btn { width: 100%; text-align: center; }
  .btn-row { gap: 10px; }
}

@media (max-width: 560px) {
  .cookie-notice { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .card:hover, .btn:hover { transform: none; }
}