:root{
  --bg:#0d0d0f;
  --text:#f3f4f6;
  --muted:#a8b3c0;
  --brand:#c8a97e; /* warm construction sand tone */
  --card:#15161a;
  --accent:#5aa1e3; /* sky/utility */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1100px,92%);margin:auto}
.site-header{position:sticky;top:0;background:rgba(13,13,15,.8);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid #222}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.5rem}
.logo{width:44px;height:44px;object-fit:contain}
.wordmark{font-weight:700;letter-spacing:.5px}
.nav a{margin-left:1rem;color:var(--text);text-decoration:none}
.nav .btn{margin-left:1rem}
.hero{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.75)), url('/assets/hero-new.jpg') center/cover no-repeat; padding:8rem 0 6rem}
.hero h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 .5rem}
.hero p{color:var(--muted);margin:0 0 1.25rem}
.btn{background:var(--brand);color:#111;padding:.7rem 1rem;border-radius:.5rem;text-decoration:none;display:inline-block;border:0;cursor:pointer;font-weight:600}
.btn.ghost{background:transparent;border:1px solid var(--brand);color:var(--text)}
.services,.projects,.about,.faq,.contact{padding:3rem 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0 0;padding:0;list-style:none}
.card{background:var(--card);padding:1rem;border:1px solid #23252b;border-radius:.75rem}
.note{color:var(--muted);margin-top:1rem}
.projects .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.project img{background:#1b1d22;min-height:160px;border-radius:.5rem}
.badges{display:flex;gap:.75rem;flex-wrap:wrap;list-style:none;padding:0;margin:1rem 0 0}
.badges li{background:#1b1d22;padding:.4rem .6rem;border-radius:.5rem;border:1px solid #2a2d33}
.faq details{background:var(--card);border:1px solid #23252b;border-radius:.5rem;padding:1rem;margin:.75rem 0}
.contact form{display:grid;gap:1rem}
.contact .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
label{display:grid;gap:.35rem;font-weight:600}
input,textarea{background:#121317;border:1px solid #262932;border-radius:.5rem;padding:.7rem;color:var(--text)}
input:focus,textarea:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.hidden{position:absolute;left:-9999px}
.site-footer{border-top:1px solid #222;padding:1.2rem 0;color:var(--muted)}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:0;top:0;width:auto;height:auto;background:#fff;color:#000;padding:.5rem;z-index:999}
@media (prefers-reduced-motion:no-preference){
  a,button{transition:opacity .2s,transform .2s,background-color .2s,border-color .2s}
  a:hover,button:hover{opacity:.9}
}
/* --- Services accordion in a 3-column grid --- */
.accordion {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;           /* was: stretch */
}

/* Responsive: 2 cols on tablets, 1 on phones */
@media (max-width: 980px){
  .accordion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .accordion { grid-template-columns: 1fr; }
}


/* Card look for each details */
.service {
  border: 1px solid #333;
  border-radius: 12px;
  background: #1c1c1c;
  overflow: hidden;
  color: #f5f5f5;
  display: flex;
  flex-direction: column;
  /* remove height:100%; so other cards don't grow when one opens */
}

/* Header row */
.service summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2d33;
}
.service summary::-webkit-details-marker { display: none; }

.service h3 {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 700;
  color: #fff;
}

/* Arrow */
.service summary::after {
  content: "▸";
  transition: transform .2s ease;
  font-size: 1rem;
  line-height: 1;
  color: #bbb;
}
.service[open] summary::after {
  transform: rotate(90deg);
  color: #fff;
}

/* Body */
.service p {
  padding: 14px 20px 18px;
  margin: 0;
  color: #ccc;
  line-height: 1.5;
}

/* Header logo safety net */
.site-header img,
.site-header svg {
  max-height: 44px;
  width: auto;
  height: 44px;       /* for SVGs without size */
  object-fit: contain;
}
.brand a,
.brand {
  color: var(--text);
  text-decoration: none;
}
/* Make links on the thanks page white */
.thanks a {
  color: var(--text);
  text-decoration: none;
}

.thanks a:hover {
  color: var(--brand);
  text-decoration: underline;
}
/* --- Mobile header layout fix --- */
@media (max-width: 720px){
  /* target the actual header row you have: <div class="wrap header-inner"> */
  .site-header .header-inner{
    display: flex;
    flex-wrap: wrap;            /* allow a second row */
    align-items: center;
    justify-content: space-between;
    row-gap: .4rem;
  }

  .brand{
    flex: 0 1 auto;             /* brand stays on the first row */
  }
  .wordmark{
    font-size: 1rem;            /* smaller brand on phones */
    line-height: 1.1;
    white-space: nowrap;
  }

  .nav{
    order: 2;                   /* push nav to second row */
    flex: 1 1 100%;             /* full width row */
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .2rem;
  }

  /* remove desktop left margins so items don’t push off-screen */
  .nav a{ margin-left: 0; padding: .25rem 0; }

  /* hide the large header CTA on phones (you already have hero CTAs) */
  .nav .btn{ display: none; }
}
/* ---- Polished Services Accordion (overrides) ---- */

/* Tighter, balanced grid */
.accordion{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}
@media (max-width: 980px){ .accordion{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .accordion{ grid-template-columns:1fr; } }

/* Card */
.service{
  border:1px solid #262a31;
  border-radius:14px;
  background:linear-gradient(145deg,#1b1b1b,#202020);
  box-shadow:0 3px 6px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  border-color:#2e333b;
}

/* Header row */
.service summary{
  cursor:pointer;
  padding:18px 20px 18px 16px;
  display:flex;
  align-items:center;
  gap:.9rem;
  background:linear-gradient(180deg,#191c21 0%, #16191d 100%);
  border-bottom:1px solid #232831;
  list-style:none;
}
.service summary::-webkit-details-marker{display:none;}

/* Left accent pill */
.service summary::before{
  content:"";
  width:8px;height:24px;
  border-radius:6px;
  background:var(--brand);
  opacity:.85;
}

/* Title */
.service h3{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.2px;
  color:#f2f4f7;
}

/* Chevron */
.service summary::after{
  content:"";
  margin-left:auto;
  width:9px;height:9px;
  border-right:2px solid #cfd6e3;
  border-top:2px solid #cfd6e3;
  transform:rotate(45deg);
  transition:transform .18s ease, opacity .18s ease;
  opacity:.85;
}
.service[open] summary::after{ transform:rotate(135deg); }

/* Open state highlight */
.service[open]{
  border-color:rgba(200,169,126,.45);
  box-shadow:0 12px 28px rgba(200,169,126,.08), 0 6px 16px rgba(0,0,0,.35);
}
.service[open] summary{
  background:linear-gradient(180deg, rgba(200,169,126,.12), rgba(200,169,126,.05));
}

/* Body */
.service p{
  margin:0;
  padding:14px 20px 18px;
  color:#d3d7de;
  line-height:1.55;
}

/* --- Keep header in one row on mobile --- */
@media (max-width: 720px){
  .site-header .wrap{
    flex-wrap: nowrap !important;   /* prevent wrapping */
    overflow-x: auto;               /* allow horizontal scroll if super tight */
    -webkit-overflow-scrolling: touch;
  }

  .brand{
    flex: 0 0 auto;                 /* lock brand size */
  }

  .wordmark{
    font-size: .95rem;              /* smaller text */
    letter-spacing: .2px;
  }

  .nav{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;      /* push links to right */
    gap: .75rem;                    /* tighter spacing */
    margin-left: 1rem;
  }

  .nav a{
    font-size: .9rem;               /* slightly smaller links */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* hide big CTA buttons in header (hero already has them) */
  .nav .btn{ display:none !important; }
}