/* Light (defaults) */
:root {
  --bg: #FFFFFF;
  --bg-grad-1: #F7FAFF; /* faint blue */
  --bg-grad-2: #FFFFFF; /* soft white */
  --tint-blue: rgba(100, 180, 255, 0.08);
  --tint-silver: rgba(203, 213, 225, 0.08);

  color-scheme: light;
  --surface:#FFFFFF;
  --text:#0B1220;
  --muted:#475569;
  --line:#E2E8F0;
  --card:#FFFFFF;
  --acc1:#22D3EE;
  --acc2:#A78BFA;
}

/* Dark overrides — support html/body and the .dark class */
html[data-theme="dark"],
body[data-theme="dark"],
html.dark,
body.dark {
  --tint-blue: rgba(0,0,0,0);
  --tint-silver: rgba(0,0,0,0);
  --bg-grad-1: #0B0F14;
  --bg-grad-2: #0F172A;

  color-scheme: dark;
  --bg:#0B0F14;
  --surface:#0B0F14;
  --text:#F1F5F9;          /* brighter than #E5E7EB to avoid “faint gray” */
  --muted:#A3AEC2;
  --line:rgba(226,232,240,.18);
  --card:#0F172A;
  --acc1:#22D3EE;
  --acc2:#A78BFA;
}

*{box-sizing:border-box}
html,body{background:var(--bg);background-image:radial-gradient(1200px 600px at 12% 8%, var(--tint-blue), transparent 60%),radial-gradient(1000px 500px at 88% 92%, var(--tint-silver), transparent 60%),linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);background-attachment:fixed;color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Arial,sans-serif}
/* BEFORE (overwrites gradient because it sets 'background' again) */
/* body { background: var(--bg); color: var(--text); ... } */

/* AFTER (preserve gradient from html,body; just set color + fallback color) */
body {
  background-color: var(--bg);  /* not 'background' */
  color: var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Arial,sans-serif;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.section-lead{color:var(--muted);max-width:65ch}
.small{font-size:14px;color:var(--muted)}


.site-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line);backdrop-filter:saturate(140%) blur(8px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:96px}
.brand{display:flex;align-items:center;gap:12px}
.brand .tagline{display:none;font-weight:600;color:var(--muted);font-size:16px;letter-spacing:.2px}
@media(min-width:900px){.brand .tagline{display:inline-flex}}
.nav img.logo{height:84px;width:auto}
.nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav a{color:var(--muted)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}

.burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);background:var(--card);border-radius:10px}
.menu{position:fixed;inset:96px 0 auto 0;background:var(--card);border-bottom:1px solid var(--line);display:none}
.menu.open{display:block}
.menu .container{padding:12px 20px}
@media(min-width:900px){.burger,.menu{display:none}}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);margin-left:12px}

.hero{padding:40px 0 20px 0}
.hero-inner{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:900px){.hero-inner{grid-template-columns:1.1fr .9fr;align-items:center}}
.hero .title{font-size:40px;line-height:1.1;margin:0 0 10px 0}
.hero .subtitle{color:var(--muted);max-width:60ch;margin:0 0 18px 0}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{border:1px solid var(--line);background:var(--card);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(15,23,42,.06)}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:800px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr 1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 10px 30px rgba(15,23,42,.06)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--acc1),var(--acc2));border:none;color:#0B1220;font-weight:700}
.btn.outline{background:var(--card)}

.site-footer{margin-top:40px;border-top:1px solid var(--line);background:var(--surface)}
.site-footer .inner{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:800px){.site-footer .inner{grid-template-columns:1fr auto}}
.copy{color:var(--muted)}

.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.js .reveal.in-view{opacity:1;transform:none}

.brandmark { display:inline-flex; align-items:center; }
.brandmark .logo { height:84px; width:auto; display:block; }

/* Theme toggle label */
.theme-toggle .theme-label{
  margin-left:8px;
  font-size:12px;
  color:var(--muted);
  user-select:none;
}
@media (max-width: 520px){
  .theme-toggle .theme-label{ display:none; }
}


/* Nav link tiles */
.site-header .hide-mobile a{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:0 1px 2px rgba(15,23,42,.06);
  color:var(--muted);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.site-header .hide-mobile a:hover,
.site-header .hide-mobile a[aria-current="page"]{
  color:var(--text);
  border-color:rgba(148,163,184,.5);
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(248,250,252,.8));
}
:root[data-theme="dark"] .site-header .hide-mobile a{
  background:var(--card);
  border-color:var(--line);
  box-shadow:none;
}
:root[data-theme="dark"] .site-header .hide-mobile a:hover,
:root[data-theme="dark"] .site-header .hide-mobile a[aria-current="page"]{
  background:linear-gradient(180deg, rgba(30,41,59,.6), rgba(15,23,42,.6));
  color:var(--text);
  border-color:rgba(226,232,240,.22);
}

/* Mobile menu tiles */
.menu .container a{
  display:inline-flex;
  align-items:center;
  height:42px;
  padding:0 14px;
  margin:6px 8px 6px 0;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--muted);
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.menu .container a:hover{
  color:var(--text);
  border-color:rgba(148,163,184,.5);
}
:root[data-theme="dark"] .menu .container a:hover{
  border-color:rgba(226,232,240,.22);
}

/* ===== THEME LOGO CONTROL (no HTML edits) ===== */
.site-header .brand .logo {
  max-height: 84px;
  height: auto;
  width: auto;
  vertical-align: middle;
  display: inline-block; /* avoid block-level stacking width */
}
@media (max-width: 900px) {
  .site-header .brand .logo { max-height: 64px; }
}

/* Default: hide dark logo (prevents double-render before JS runs) */
.site-header .brand .logo-dark { display: none !important; }

/* When the page is already dark at load (theme bootstrap sets this) */
html[data-theme="dark"] .site-header .brand .logo-light,
html.dark .site-header .brand .logo-light { display: none !important; }
html[data-theme="dark"] .site-header .brand .logo-dark,
html.dark .site-header .brand .logo-dark  { display: inline-block !important; }


/* Visually hide skip link until focused */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;
  top:12px;
  width:auto;
  height:auto;
  padding:8px 12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  z-index:1000;
  box-shadow:0 4px 18px rgba(15,23,42,.18);
}
/* --- Contact form (floating labels): no clipping, floats on focus --- */
.contact-form{
  --field-bg: var(--card);
  --field-border: var(--line);
  --field-text: var(--text);
  --field-muted: var(--muted);
  display: grid;
  gap: 14px;
}

.contact-form .row-2{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .contact-form .row-2{ grid-template-columns: 1fr 1fr; }
}

.floating-field{ position: relative; }

.floating-field input,
.floating-field textarea{
  width: 100%;
  min-height: 48px;
  line-height: 1.4;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--field-text);
  border-radius: 12px;
  /* extra top padding so text never sits under the resting label */
  padding: 26px 14px 12px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.floating-field textarea{
  min-height: 140px;
  padding-top: 32px; /* a bit more room for multi-line */
  resize: vertical;
}

/* Hide placeholders so the label is the hint */
.floating-field input::placeholder,
.floating-field textarea::placeholder{ color: transparent; }

/* Resting label: visually centered, slightly higher to avoid touching text */
.floating-field label{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-60%); /* raise a touch for optical centering */
  font-size: 14px;
  line-height: 1;
  color: var(--field-muted);
  pointer-events: none;
  padding: 0 4px;
  background: transparent;
  transition: transform .15s ease, font-size .15s ease, top .15s ease, color .15s ease, background .15s ease;
  z-index: 1;
}

/* Float label on focus OR when there's content (no overlap on first keystroke) */
.floating-field:focus-within label,
.floating-field input:not(:placeholder-shown) + label,
.floating-field textarea:not(:placeholder-shown) + label{
  top: 8px;
  transform: none;
  font-size: 12px;
  color: var(--acc1);
  background: var(--card);
  border-radius: 6px;
}

/* Focus ring */
.floating-field input:focus,
.floating-field textarea:focus{
  border-color: var(--acc1);
  box-shadow: 0 0 0 3px rgba(34,211,238,.25);
}


/* Focus ring + color */
.floating-field input:focus,
.floating-field textarea:focus{
  border-color: var(--acc1);
  box-shadow: 0 0 0 3px rgba(34,211,238,.25);
  background: var(--field-bg);
}

/* Float label when focused or has content */
.floating-field input:not(:placeholder-shown) + label,
.floating-field textarea:not(:placeholder-shown) + label,
.floating-field input:focus + label,
.floating-field textarea:focus + label{
  top: 8px;
  transform: none;
  font-size: 12px;
  color: var(--acc1);
  background: var(--card);
  border-radius: 6px;
}

/* Small helper text beside the button */
.contact-form .help{
  font-size: 12px;
  color: var(--muted);
  margin-top: -2px;
}

.contact-form .actions{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4px;
}

.contact-form .actions .btn{
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
}

/* Map rounding */
.card iframe{ border-radius: 12px; }
/* ===== Header logo sprite (single source of truth) ===== */
/* Fixed box prevents layout jump */
.brand .logo-sprite{
  display:inline-block;
  width:112px;
  height:84px;
  background-repeat:no-repeat;
  background-position:center left;
  background-size:contain;
  vertical-align:middle;
}
@media (max-width:900px){
  .brand .logo-sprite{ width:86px; height:64px; }
}

/* Default = light (when no OS/app override applies) */
.brand .logo-sprite{
  background-image: url('../logo-light.png'); /* assets/css -> assets/ */
}

/* OS prefers dark (applies early) */
@media (prefers-color-scheme: dark){
  .brand .logo-sprite{
    background-image: url('../logo-dark.png');
  }
}

/* App-level override (wins over OS). Your bootstrap sets data-theme. */
html[data-theme="light"] .brand .logo-sprite{
  background-image: url('../logo-light.png') !important;
}
html[data-theme="dark"] .brand .logo-sprite{
  background-image: url('../logo-dark.png') !important;
}