@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;600;700&display=swap");

:root{
  --bg:#F6F8FC;
  --surface:#FFFFFF;
  --surface-2:#EEF3FB;
  --text:#0F172A;
  --muted:#475569;
  --border:#D7DFEA;
  --primary:#1f3a5f;
  --primary-2:#2a4d7c;
  --accent:#C9A227;
  --danger:#B42318;
  --link:#1D4ED8;
  --navy:var(--primary);
  --slate:#2E4A6B;
  --teal:#0F766E;
  --cyan:#0EA5E9;
  --amber:#C58B00;
  --sky:#EAF2FB;
  --soft-blue:#F3F8FF;
  --warm:#FFF9EC;
  --ink:var(--text);
  --panel:var(--surface-2);
  --radius:14px;
  --shadow:0 10px 25px rgba(11,31,59,.08);
  --max:1120px;
}
html[data-theme="dark"]{
  --bg:#0b1220;
  --surface:#10192b;
  --surface-2:#162238;
  --text:#e5edf8;
  --muted:#a7b7cf;
  --border:#2b3b55;
  --primary:#8bb8ff;
  --primary-2:#6998e6;
  --accent:#d9b14b;
  --danger:#ff8b7d;
  --link:#8bb8ff;
  --navy:#8bb8ff;
  --slate:#b4c8e6;
  --teal:#6fd6c9;
  --cyan:#62c7ff;
  --amber:#d9b14b;
  --sky:#10192b;
  --soft-blue:#19263d;
  --warm:#211b12;
  --ink:var(--text);
  --panel:var(--surface-2);
  --shadow:0 16px 34px rgba(0,0,0,.35);
}
html[data-theme="dark"] body{
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Open Sans",Lato,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  overflow-x:hidden;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--teal);text-decoration:underline}
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 24px rgba(11,31,59,.06);
}
html[data-theme="dark"] header{
  background:rgba(11,18,32,.96);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--navy);
  white-space:nowrap;
}
.badge{
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:var(--panel);
}
.context-ribbon{
  font-size:13px;
  color:#274a73;
  padding:0 0 12px;
}
html[data-theme="dark"] .context-ribbon{
  color:#9fb6d8;
}
nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  font-size:13px;
  font-weight:700;
}
.mobile-nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--primary);
  border-radius:10px;
  padding:8px 10px;
  font-weight:700;
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
}
.mobile-nav-toggle:hover{background:var(--surface-2)}
.mobile-nav-toggle:focus-visible{
  outline:3px solid rgba(29,78,216,.35);
  outline-offset:2px;
}
.theme-toggle{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--primary);
  border-radius:10px;
  padding:8px 12px;
  font-weight:700;
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.theme-toggle:hover{background:var(--surface-2)}
.theme-toggle:focus-visible{
  outline:3px solid rgba(29,78,216,.35);
  outline-offset:2px;
}
.theme-toggle-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex:0 0 auto;
}
.theme-toggle-icon svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
}
.theme-toggle-label{
  line-height:1;
}
html[data-theme="dark"] .theme-toggle{
  background:#132036;
  color:#f3f7ff;
  border-color:#39506f;
}
html[data-theme="dark"] .theme-toggle:hover{
  background:#1a2a43;
}
nav a{padding:8px 9px;border-radius:10px}
nav a:hover{background:var(--soft-blue);text-decoration:none}
nav a.active{background:linear-gradient(135deg,var(--navy),#174077);color:#fff}
main{padding:42px 0 28px}
main.home-main > section{
  margin-top:60px;
}
main > section{
  margin-top:18px;
  padding:18px;
  border-radius:16px;
  border:1px solid rgba(46,74,107,.14);
  box-shadow:0 6px 18px rgba(11,31,59,.05);
}
main > section:nth-of-type(odd){background:linear-gradient(180deg,#edf5ff,#f7fbff)}
main > section:nth-of-type(even){background:linear-gradient(180deg,#fff7e6,#fffdf6)}
html[data-theme="dark"] main > section:nth-of-type(odd){background:linear-gradient(180deg,#10192b,#0d1627)}
html[data-theme="dark"] main > section:nth-of-type(even){background:linear-gradient(180deg,#161d2c,#111827)}
.hero{padding-bottom:20px}
.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;align-items:stretch}
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch}
.stack{display:grid;gap:14px}
.card{
  background:var(--surface);
  border:1px solid #c4d4ea;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
html[data-theme="dark"] .card{
  border-color:var(--border);
}
h1,h2,h3,th,.btn{
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
}
h1{margin:0 0 8px;font-size:34px;line-height:1.12;color:var(--navy);letter-spacing:-.5px}
h2{margin:0;font-size:22px;color:var(--navy);letter-spacing:-.2px}
h3{margin:0 0 8px;color:var(--navy);font-size:16px}
.subhead{font-size:16px;color:var(--muted);margin:0 0 14px}
.tagline{display:inline-flex;gap:10px;flex-wrap:wrap;font-weight:800;color:var(--navy);margin:0 0 12px}
.tagline span{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #cfe0f5;
  background:linear-gradient(180deg,#ffffff,#f6fbff);
}
html[data-theme="dark"] .tagline span{
  border-color:var(--border);
  background:linear-gradient(180deg,#142033,#10192b);
}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--navy);
  font-weight:800;
  font-size:14px;
}
.btn.primary{
  background:linear-gradient(135deg,var(--navy),#174077);
  color:#fff;
  border-color:#163a68;
}
.btn-primary{
  background:linear-gradient(135deg,var(--navy),#174077);
  color:#fff;
  border-color:#163a68;
}
.btn-secondary{
  background:var(--surface);
  color:var(--navy);
  border-color:#163a68;
}
.btn-secondary:hover{background:#eef4ff;text-decoration:none}
.btn-accent{
  background:linear-gradient(180deg,#d4ad3c,#bb962b);
  color:#10233f;
  border-color:#b28f27;
}
.btn-accent:hover{opacity:.95;text-decoration:none}
.btn.primary:hover{opacity:.95;text-decoration:none}
.btn-primary:hover{opacity:.95;text-decoration:none}
.btn:hover{background:#f7fbff;text-decoration:none;border-color:#bcd1ea}
.btn-primary:hover,.btn-primary:active,.btn-primary:disabled{
  background:linear-gradient(135deg,var(--navy),#174077);
  color:#fff;
  border-color:#163a68;
}
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .btn-secondary:hover{
  background:#19263d;
  border-color:#496487;
}
p{max-width:70ch}
.panel{border-radius:16px}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(29,78,216,.35);
  outline-offset:2px;
}
.profile-card{padding:14px}
.profile-photo{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  display:block;
  object-fit:cover;
  aspect-ratio:4/3;
}
.profile-caption{margin-top:10px;font-size:13px;color:var(--muted)}
.qrbox{display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.qr{
  width:100%;
  aspect-ratio:1/1;
  border:1px dashed #cfd8e6;
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.qr img{width:100%;height:100%;object-fit:contain}
.small{font-size:13px;color:var(--muted)}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.hint{font-size:13px;color:#3e6289;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
.tile{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.tile{
  border-top:4px solid #93b5dc;
  transition:transform .18s ease, box-shadow .18s ease, border-top-color .18s ease;
}
.grid .tile:nth-child(3n+1){border-top-color:#2e5f97}
.grid .tile:nth-child(3n+2){border-top-color:#0f766e}
.grid .tile:nth-child(3n+3){border-top-color:#b07d00}
.tile:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(11,31,59,.14);
}
.tile p{margin:0;color:var(--muted);font-size:14px}
.tile .link{margin-top:10px;display:inline-block;font-weight:800}
ul{margin:10px 0 0 18px;color:var(--muted)}
.callout{
  border-left:4px solid var(--accent);
  padding:12px 14px;
  background:linear-gradient(180deg,#fff,#fffdf8);
  border-radius:12px;
  border:1px solid #ecdca6;
}
html[data-theme="dark"] .callout{
  background:linear-gradient(180deg,#1a2130,#141b29);
  border-color:#6d5a26;
}
.placeholder{
  margin-top:10px;
  height:220px;
  border:1px dashed #cfd8e6;
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:700;
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  font-size:14px;
  overflow:hidden;
}
th,td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}
th{text-align:left;color:var(--navy);background:#edf3fb;font-weight:800}
tbody tr:nth-child(even){background:#f9fbff}
tbody tr:hover{background:#edf5ff}
html[data-theme="dark"] th{background:#172338}
html[data-theme="dark"] tbody tr:nth-child(even){background:#122033}
html[data-theme="dark"] tbody tr:hover{background:#19263d}
html[data-theme="dark"] td{
  color:#dbe7f7;
}
.num{text-align:right;white-space:nowrap}
tr:last-child td{border-bottom:none}
tfoot td{font-weight:700}
.data-status{margin:10px 0 0;color:var(--muted);font-size:13px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.search-input,.sort-select{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
}
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .sort-select{
  background:#0f1828;
}
.search-input{min-width:260px;max-width:100%}
.toggle-row{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.summary-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px}
.summary-card{
  border-left:5px solid #2e5f97;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
}
html[data-theme="dark"] .summary-card{
  background:linear-gradient(180deg,#132036,#10192b);
}
.summary-grid .summary-card:nth-child(2){border-left-color:#0f766e}
.summary-grid .summary-card:nth-child(3){border-left-color:#b07d00}
.summary-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.summary-value{margin-top:6px;font-weight:800;color:var(--navy);font-size:24px;line-height:1.2}
.summary-meta{margin-top:6px;font-size:13px;color:var(--muted)}
.table-scroll{overflow-x:auto}
.table-wrap{overflow-x:auto}
.chip-group{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{
  border:1px solid var(--border);
  background:#fff;
  color:var(--slate);
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
.project-subnav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 18px;
}
.project-subnav a{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  background:#fff;
  color:var(--slate);
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}
.project-subnav a:hover{
  background:#eef4ff;
  color:var(--navy);
}
.project-subnav a.active{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.charts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.latest-updates{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.latest-item{
  background:linear-gradient(180deg,#ffffff,#f1f7ff);
  border:1px solid #bfd2ea;
  border-radius:12px;
  padding:14px;
}
html[data-theme="dark"] .latest-item{
  background:linear-gradient(180deg,#132036,#10192b);
  border-color:var(--border);
}
.muted{color:var(--muted)}
.priority-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.priority-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.priority-marker{
  width:10px;
  height:10px;
  margin-top:6px;
  border-radius:999px;
  background:var(--accent);
  flex:0 0 auto;
}
.cost-bars{margin-top:12px;display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:170px 1fr auto;align-items:center;gap:10px}
.bar-label{font-size:14px;font-weight:700;color:var(--navy)}
.bar-track{height:14px;background:#e8edf5;border-radius:999px;overflow:hidden}
html[data-theme="dark"] .bar-track{background:#1a2740}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--slate),var(--navy));border-radius:999px}
.bar-value{font-weight:700;color:var(--navy);font-size:13px}
.garage-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-item{margin:0}
.gallery-item{position:relative}
.gallery-item img{
  width:100%;
  border-radius:10px;
  display:block;
  border:1px solid #c7d8ec;
}
.gallery-item figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.document-figure{margin:0}
.document-figure img{
  width:100%;
  border-radius:10px;
  display:block;
  border:1px solid #c7d8ec;
  background:#fff;
}
html[data-theme="dark"] .gallery-item img,
html[data-theme="dark"] .document-figure img{
  border-color:var(--border);
  background:#0f1828;
}
.document-figure figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.cost-markup{
  position:absolute;
  top:18px;
  right:18px;
  background:rgba(180,35,24,.95);
  color:#fff;
  font-weight:800;
  font-size:30px;
  line-height:1;
  padding:10px 12px;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
#garageCostChart{width:100%;height:320px !important;max-height:320px}
footer{padding:26px 0 40px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
.footer-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.footer-links{display:flex;gap:12px;align-items:center}
/* Contact form */
.contact-form{display:grid;gap:16px;margin-top:14px}
.form-group{display:grid;gap:4px}
.form-group label{
  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--navy);
}
.required{color:var(--danger)}
.form-group input,
.form-group select,
.form-group textarea{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  line-height:1.5;
}
.form-group textarea{resize:vertical;min-height:120px}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--primary);
  outline:3px solid rgba(29,78,216,.15);
  outline-offset:0;
}
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea{
  background:#0f1828;
  border-color:#2b3b55;
}
.g-recaptcha{
  overflow:hidden;
}
.g-recaptcha iframe{
  color-scheme:light;
}
html[data-theme="dark"] .g-recaptcha iframe{
  color-scheme:dark;
}
.contact-submit{
  justify-self:start;
  padding:12px 28px;
  font-size:15px;
  cursor:pointer;
}
.contact-submit:disabled{opacity:.6;cursor:not-allowed}
.form-status{
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
}
.form-status.success{
  background:#ecfdf5;
  border:1px solid #6ee7b7;
  color:#065f46;
}
.form-status.error{
  background:#fef2f2;
  border:1px solid #fca5a5;
  color:#991b1b;
}
html[data-theme="dark"] .form-status.success{
  background:#052e16;
  border-color:#166534;
  color:#86efac;
}
html[data-theme="dark"] .form-status.error{
  background:#450a0a;
  border-color:#991b1b;
  color:#fca5a5;
}
.contact-fallback{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
@media (max-width:900px){
  .hero-grid,.about-grid{grid-template-columns:1fr}
  .summary-grid,.charts-grid,.latest-updates{grid-template-columns:1fr}
  .priority-grid{grid-template-columns:repeat(2,1fr)}
  .garage-gallery{grid-template-columns:repeat(2,1fr)}
  .col-4,.col-6,.col-8{grid-column:span 12}
  nav{justify-content:flex-start}
  .brand{white-space:normal}
}
@media (max-width:700px){
  .wrap{padding:0 14px}
  main{padding:28px 0 20px}
  header{
    position:static;
  }
  .topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:10px 0;
  }
  .brand{
    width:100%;
    font-size:18px;
  }
  .mobile-nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding-bottom:2px;
  }
  header.nav-open nav{
    display:flex;
  }
  nav a{
    white-space:normal;
    font-size:12px;
    padding:9px 10px;
    border:1px solid var(--border);
    background:var(--surface);
  }
  .context-ribbon{font-size:12px;padding-bottom:10px}
  h1{font-size:28px}
  h2{font-size:20px}
  .subhead{font-size:15px}
  .tagline span{font-size:12px;padding:5px 9px}
  .cta-row{display:grid;grid-template-columns:1fr;gap:8px}
  .cta-row .btn{width:100%}
  .section-title{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .card,.tile{padding:14px}
  .toolbar{
    flex-direction:column;
    align-items:stretch;
  }
  .search-input,.sort-select{
    width:100%;
    min-width:0;
  }
  .summary-value{font-size:22px}
  .placeholder{height:180px}
  table{font-size:13px}
  th,td{padding:8px}
  .latest-item h3{font-size:15px}
  .priority-grid{grid-template-columns:1fr}
  .bar-row{grid-template-columns:1fr}
  .garage-gallery{grid-template-columns:1fr}
  .cost-markup{
    font-size:24px;
    top:14px;
    right:14px;
  }
  #garageCostChart{height:260px !important;max-height:260px}
  .contact-submit{width:100%;justify-self:stretch}
  .footer-row{justify-content:flex-start}
  .footer-links{width:100%;justify-content:flex-start}
}
@media (max-width:480px){
  .wrap{padding:0 12px}
  .brand{font-size:17px}
  nav a{font-size:11px;padding:6px 8px}
  h1{font-size:24px}
  h2{font-size:18px}
  .card,.tile,.summary-card,.latest-item{padding:12px}
  .search-input,.sort-select{font-size:14px}
  table{font-size:12px}
  th,td{padding:7px}
}