:root{
    --bg:#EFF1EC;
    --bg-raised:#E4E8DF;
    --bg-raised-2:#DAE0D3;
    --text:#182821;
    --text-muted:#54655A;
    --accent:#D9962B;
    --accent-strong:#B87A1B;
    --accent-contrast:#241705;
    --border: rgba(24,40,33,0.16);
    --shadow: rgba(24,40,33,0.16);
    --focus:#2F6B4F;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#12201A;
      --bg-raised:#1B2B22;
      --bg-raised-2:#233527;
      --text:#EAEEE6;
      --text-muted:#9FB0A2;
      --accent:#F0B655;
      --accent-strong:#F5C475;
      --accent-contrast:#241705;
      --border: rgba(234,238,230,0.16);
      --shadow: rgba(0,0,0,0.5);
      --focus:#7FC7A0;
    }
  }
  :root[data-theme="dark"]{
    --bg:#12201A; --bg-raised:#1B2B22; --bg-raised-2:#233527;
    --text:#EAEEE6; --text-muted:#9FB0A2;
    --accent:#F0B655; --accent-strong:#F5C475; --accent-contrast:#241705;
    --border: rgba(234,238,230,0.16); --shadow: rgba(0,0,0,0.5); --focus:#7FC7A0;
  }
  :root[data-theme="light"]{
    --bg:#EFF1EC; --bg-raised:#E4E8DF; --bg-raised-2:#DAE0D3;
    --text:#182821; --text-muted:#54655A;
    --accent:#D9962B; --accent-strong:#B87A1B; --accent-contrast:#241705;
    --border: rgba(24,40,33,0.16); --shadow: rgba(24,40,33,0.16); --focus:#2F6B4F;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    text-wrap:balance;
    font-weight:400;
    margin:0;
  }
  a{color:inherit;}
  button{font-family:inherit;}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px;}

  .eyebrow{
    display:inline-flex; align-items:center; gap:.5em;
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent-strong); font-weight:600;
  }
  .eyebrow::before{content:""; width:1.4em; height:2px; background:var(--accent); display:inline-block;}

  /* ---------- header ---------- */
  .topbar{
    position:sticky; top:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:.85rem 1.5rem;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; cursor:pointer; background:none; border:none; padding:0;}
  .brand svg{flex:none;}
  .brand-text{display:flex; flex-direction:column; line-height:1.15;}
  .brand-name{font-family:Georgia,serif; font-size:1.05rem;}
  .brand-tag{font-size:.68rem; color:var(--text-muted); letter-spacing:.04em;}

  nav.mainnav{display:flex; align-items:center; gap:0;}
  nav.mainnav .navlink{
    position:relative; padding:.5rem .55rem; border-radius:999px; border:none; background:none;
    color:var(--text-muted); font-size:.86rem; cursor:pointer; white-space:nowrap; text-decoration:none;
  }
  nav.mainnav .navlink:hover{color:var(--text);}
  nav.mainnav .navlink.active{color:var(--text); background:var(--bg-raised);}
  .navgroup{position:relative;}
  .navdrop{
    position:absolute; top:110%; left:0; min-width:160px;
    background:var(--bg-raised); border:1px solid var(--border); border-radius:12px;
    padding:.4rem; box-shadow:0 12px 28px var(--shadow); opacity:0; pointer-events:none;
    transform:translateY(-4px); transition:opacity .15s ease, transform .15s ease;
  }
  .navgroup:hover .navdrop, .navgroup:focus-within .navdrop{opacity:1; pointer-events:auto; transform:translateY(0);}
  .navdrop button, .navdrop a{display:block; width:100%; text-align:left; padding:.5rem .7rem; border-radius:8px; border:none; background:none; color:var(--text); font-size:.88rem; cursor:pointer; text-decoration:none; box-sizing:border-box;}
  .navdrop button:hover, .navdrop a:hover{background:var(--bg-raised-2);}

  .call-btn{
    display:flex; align-items:center; gap:.5rem;
    background:var(--accent); color:var(--accent-contrast);
    padding:.55rem 1rem; border-radius:999px; text-decoration:none;
    font-size:.9rem; font-weight:600; white-space:nowrap;
  }
  .call-btn:hover{background:var(--accent-strong);}

  .email-btn{
    display:flex; align-items:center; gap:.4rem;
    border:1px solid var(--border); color:var(--text);
    padding:.5rem .85rem; border-radius:999px; text-decoration:none;
    font-size:.86rem; font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .email-btn:hover{border-color:var(--accent-strong); color:var(--accent-strong);}

  @media (max-width:1240px){
    .email-btn-text{display:none;}
    .email-btn{padding:.55rem; }
  }
  @media (max-width:520px){
    .email-btn{display:none;}
  }

  .hamburger{display:none; background:none; border:1px solid var(--border); border-radius:10px; width:2.6rem; height:2.6rem; align-items:center; justify-content:center; cursor:pointer;}
  .hamburger span, .hamburger span::before, .hamburger span::after{
    content:""; display:block; width:1.2rem; height:2px; background:var(--text); position:relative;
  }
  .hamburger span::before{position:absolute; top:-6px;}
  .hamburger span::after{position:absolute; top:6px;}

  #mobileNav{
    display:none; position:fixed; inset:0 0 0 auto; width:min(80vw,320px); background:var(--bg-raised);
    border-left:1px solid var(--border); padding:1.5rem; z-index:60; flex-direction:column; gap:.25rem;
    transform:translateX(100%); transition:transform .25s ease;
  }
  #mobileNav.open{display:flex; transform:translateX(0);}
  #mobileNav button, #mobileNav a{display:block; text-align:left; background:none; border:none; padding:.7rem .2rem; font-size:1rem; color:var(--text); border-bottom:1px solid var(--border); cursor:pointer; text-decoration:none;}
  #scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:50;}
  #scrim.open{display:block;}

  @media (max-width:1080px){
    nav.mainnav{display:none;}
    .hamburger{display:flex;}
  }

  /* ---------- content shell ---------- */
  main{max-width:920px; margin:0 auto; padding:0 1.5rem 4rem;}
  #app{animation:none;}
  @media (prefers-reduced-motion:no-preference){
    #app.enter{animation:fadeup .35s ease both;}
  }
  @keyframes fadeup{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

  .hero{padding:3.2rem 0 2.2rem; display:grid; grid-template-columns:1.3fr 1fr; gap:2.5rem; align-items:center;}
  @media (max-width:760px){.hero{grid-template-columns:1fr;}}
  .hero h1{font-size:clamp(2rem,4.2vw,2.9rem); margin:.5rem 0 1rem;}
  .hero p.lede{font-size:1.08rem; color:var(--text-muted); max-width:46ch;}
  .hero-art{justify-self:center;}

  .stub-cta{
    position:relative; background:var(--bg-raised); border-radius:18px; padding:1.6rem 1.7rem;
    margin:2rem 0; display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; justify-content:space-between;
    background-image:
      radial-gradient(circle at 0 0, transparent 8px, var(--bg-raised) 8.5px),
      radial-gradient(circle at 100% 0, transparent 8px, var(--bg-raised) 8.5px);
    border:1px dashed var(--border);
  }
  .stub-cta .stub-label{font-size:.78rem; color:var(--text-muted); letter-spacing:.03em;}
  .stub-cta .stub-title{font-family:Georgia,serif; font-size:1.25rem;}
  .stub-cta .stub-actions{display:flex; gap:.6rem; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.15rem; border-radius:999px;
    text-decoration:none; font-weight:600; font-size:.92rem; border:1px solid transparent; cursor:pointer;
  }
  .btn-primary{background:var(--accent); color:var(--accent-contrast);}
  .btn-primary:hover{background:var(--accent-strong);}
  .btn-ghost{background:none; border-color:var(--border); color:var(--text);}
  .btn-ghost:hover{border-color:var(--text-muted);}

  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin:1.6rem 0;}
  @media (max-width:760px){.grid3{grid-template-columns:1fr;}}
  .card{background:var(--bg-raised); border:1px solid var(--border); border-radius:16px; padding:1.4rem;}
  .card h3{font-size:1.08rem; margin-bottom:.5rem; display:flex; gap:.6rem; align-items:center;}
  .card ul{margin:.3rem 0 0; padding-left:1.1rem; color:var(--text-muted); font-size:.94rem;}
  .card ul li{margin:.25rem 0;}
  .card svg{flex:none; color:var(--accent-strong);}

  .section{margin:3rem 0;}
  .section > h2{font-size:1.7rem; margin-bottom:.3rem;}
  .section > p.sub{color:var(--text-muted); max-width:60ch; margin-top:.4rem;}

  table.price{width:100%; border-collapse:collapse; margin-top:1.2rem; font-size:.98rem;}
  table.price th, table.price td{text-align:left; padding:.85rem .6rem; border-bottom:1px solid var(--border);}
  table.price th{color:var(--text-muted); font-weight:600; font-size:.8rem; letter-spacing:.03em; text-transform:uppercase;}
  table.price td.amount{font-variant-numeric:tabular-nums; font-weight:700; font-size:1.05rem; white-space:nowrap;}
  .price-note{display:flex; gap:.7rem; margin-top:1rem; padding:.9rem 1rem; background:var(--bg-raised); border-radius:12px; font-size:.92rem; color:var(--text-muted);}

  .fact-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem;}
  .pill{background:var(--bg-raised-2); border-radius:999px; padding:.45rem .9rem; font-size:.84rem; color:var(--text-muted); text-decoration:none; display:inline-flex;}

  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.5rem;}
  @media (max-width:760px){.contact-grid{grid-template-columns:1fr;}}
  .contact-card{background:var(--bg-raised); border-radius:16px; padding:1.5rem;}
  .contact-card dt{font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-top:.9rem;}
  .contact-card dt:first-child{margin-top:0;}
  .contact-card dd{margin:.15rem 0 0; font-size:1.02rem;}
  form.inquiry{display:flex; flex-direction:column; gap:.8rem;}
  form.inquiry input, form.inquiry textarea{
    background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.7rem .8rem;
    color:var(--text); font-family:inherit; font-size:.95rem;
  }
  form.inquiry label{font-size:.82rem; color:var(--text-muted); display:flex; flex-direction:column; gap:.35rem;}
  .demo-note{font-size:.78rem; color:var(--text-muted); font-style:italic;}

  .article-list{display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem;}
  .article-row{
    display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
    padding:1.2rem; border:1px solid var(--border); border-radius:14px; background:var(--bg-raised);
    cursor:pointer; text-align:left; width:100%; text-decoration:none; color:inherit;
  }
  .article-row:hover{border-color:var(--accent-strong);}
  .article-row h3{font-size:1.05rem; margin-bottom:.35rem;}
  .article-row p{margin:0; color:var(--text-muted); font-size:.92rem; max-width:55ch;}
  .article-row .arrow{color:var(--accent-strong); font-size:1.3rem; flex:none;}

  .article-body{margin-top:1.2rem; font-size:1rem;}
  .article-body p{max-width:66ch;}
  .article-body h3{font-size:1.15rem; margin:1.6rem 0 .5rem;}

  .neighborhoods{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem;}

  footer{border-top:1px solid var(--border); margin-top:3rem; padding:2.2rem 1.5rem; }
  .footer-inner{max-width:920px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;}
  .footer-inner .fcol{font-size:.88rem; color:var(--text-muted);}
  .footer-inner .fcol strong{color:var(--text); display:block; margin-bottom:.5rem; font-family:Georgia,serif; font-size:1rem;}
  .footer-inner .fcol a{display:block; margin:.25rem 0; text-decoration:none;}
  .footer-inner .fcol a:hover{color:var(--text);}

  .back-link{background:none; border:none; color:var(--text-muted); font-size:.88rem; cursor:pointer; padding:0; margin-bottom:1rem; display:inline-flex; gap:.4rem; align-items:center; text-decoration:none;}
  .back-link:hover{color:var(--text);}

  .date-meta{font-size:.8rem; color:var(--text-muted); margin:.3rem 0 1.2rem; font-variant-numeric:tabular-nums;}
  .article-row .date-meta{margin:.5rem 0 0;}