:root{
  --cream:#F2EDE4;
  --cream-soft:rgba(242,237,228,.92);
  --cream-deep:#EAE3D6;
  --ink:#1A1714;
  --ink-soft:rgba(26,23,20,.7);
  --ink-mute:rgba(26,23,20,.55);
  --bronze:#9B7B4A;
  --bronze-light:#B89366;
  --bronze-pale:rgba(155,123,74,.18);
  --stone:#7A7164;
  --hairline:rgba(26,23,20,.12);
  --hairline-strong:rgba(26,23,20,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',system-ui,sans-serif;font-weight:400;line-height:1.65;font-size:16px}
::selection{background:var(--bronze);color:var(--cream)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

header{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 48px;display:flex;align-items:center;justify-content:space-between;transition:padding .3s ease, background-color .35s ease;background:rgba(26,23,20,.78);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid rgba(155,123,74,.18)}
header.scrolled{background:rgba(26,23,20,.94);border-bottom-color:rgba(155,123,74,.32);padding:13px 48px}
.hamburger span{background:var(--cream)!important}
nav.menu{display:flex;gap:36px;align-items:center}
nav.menu a{font-family:'Inter';font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);position:relative;padding:6px 0}
nav.menu a::after{background:var(--bronze-light)!important}
nav.menu a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--bronze);transition:right .35s cubic-bezier(.22,1,.36,1)}
nav.menu a:hover::after{right:0}
header.scrolled nav.menu a{color:var(--cream)}
.header-right{display:flex;align-items:center;gap:28px}
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--bronze);color:var(--cream);font-family:'Inter';font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:13px 22px;border:0;cursor:pointer;transition:background-color .2s ease,transform .2s ease}
.btn-primary:hover{background:var(--bronze-light)}
.btn-primary .arrow{transition:transform .25s ease;font-size:14px}
.btn-primary:hover .arrow{transform:translateX(4px)}
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-mark{height:42px;width:auto;display:block}
.logo-text{font-family:'Fraunces';font-weight:400;font-size:18px;letter-spacing:.18em;color:var(--ink);line-height:1}
.logo-text small{display:block;font-family:'Inter';font-size:8px;letter-spacing:.32em;color:var(--stone);font-weight:500;margin-top:4px}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px;width:36px;height:36px}
.hamburger span{display:block;width:22px;height:1px;background:var(--ink);margin:6px 0;transition:transform .3s,opacity .3s}

.eyebrow{font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--bronze)}
.ghost-link{display:inline-flex;align-items:center;gap:10px;font-family:'Inter';font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--ink);transition:color .2s ease,border-color .2s ease}
.ghost-link:hover{color:var(--bronze);border-bottom-color:var(--bronze)}
.ghost-link .arrow{transition:transform .25s ease}
.ghost-link:hover .arrow{transform:translateX(4px)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:translateY(0)}

@keyframes imgIn{to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{to{opacity:.55}}

.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1240px;margin:0 auto}
.project-card{display:block;cursor:pointer}
.project-card .img-wrap{aspect-ratio:4/5;overflow:hidden;background:var(--cream-deep);position:relative;background-size:cover;background-position:center;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.project-card:hover .img-wrap{transform:scale(1.02)}
.project-meta{padding-top:20px}
.project-meta .scope{font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.project-meta .name{margin-top:8px;font-family:'Fraunces';font-weight:400;font-size:22px;line-height:1.25;color:var(--ink)}
.project-meta .place{margin-top:6px;font-family:'Inter';font-size:13px;color:var(--ink-soft)}

.s-talk{background:var(--cream);padding:160px 48px 144px;text-align:center}
.s-talk .eyebrow{display:block;margin-bottom:32px}
.s-talk h2{font-family:'Fraunces';font-weight:300;font-size:clamp(34px,5vw,64px);line-height:1.08;letter-spacing:-0.02em;color:var(--ink);max-width:760px;margin:0 auto}
.s-talk h2 em{font-style:italic;color:var(--bronze);font-weight:300}
.s-talk p.lead{margin:28px auto 64px;font-family:'Inter';font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:520px}
.talk-form{max-width:640px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;text-align:left}
.talk-form .field{position:relative;border-bottom:1px solid var(--hairline-strong);padding:18px 0}
.talk-form .field.full{grid-column:1 / -1}
.talk-form .field input,.talk-form .field select,.talk-form .field textarea{width:100%;border:0;background:transparent;outline:0;font-family:'Inter';font-size:16px;color:var(--ink);padding:6px 0 0;-webkit-appearance:none;appearance:none;border-radius:0}
.talk-form .field textarea{resize:vertical;min-height:60px;font-family:'Inter'}
.talk-form .field label{font-family:'Inter';font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);display:block;margin-bottom:0}
.talk-form .field input:focus,.talk-form .field select:focus,.talk-form .field textarea:focus{border-bottom-color:var(--bronze)}
.talk-form .submit{margin-top:40px;align-self:center;grid-column:1 / -1;justify-self:center}
.talk-form .form-msg{grid-column:1 / -1;margin-top:18px;font-size:13px;text-align:center;font-family:'Inter';color:var(--ink-soft)}
.talk-form .form-msg.error{color:#a83232}
.talk-success{display:none;text-align:center;padding:48px 24px;max-width:520px;margin:0 auto}
.talk-success.show{display:block}
.talk-success h3{font-family:'Fraunces';font-weight:300;font-size:32px;color:var(--bronze);margin:0 0 14px;letter-spacing:-0.01em}
.talk-success p{font-family:'Inter';font-size:15px;line-height:1.6;color:var(--ink-soft)}
@media (max-width:640px){.talk-form{grid-template-columns:1fr;gap:0}}
.talk-form .submit{margin-top:40px;align-self:center}

footer{background:var(--ink);color:var(--cream);padding:96px 48px 48px}
footer .grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px;max-width:1240px;margin:0 auto}
footer h4{font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze-light);margin-bottom:24px}
footer ul{list-style:none}
footer li{margin-bottom:12px}
footer a{font-family:'Inter';font-size:14px;color:var(--cream);opacity:.78;transition:opacity .2s ease}
footer a:hover{opacity:1}
footer .brand p{margin-top:20px;font-family:'Fraunces';font-style:italic;font-size:18px;line-height:1.4;color:var(--cream);opacity:.85;max-width:280px}
footer .legal{margin-top:80px;padding-top:32px;border-top:1px solid rgba(242,237,228,.18);max-width:1240px;margin-left:auto;margin-right:auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);opacity:.55}
.footer-logo{height:30px;width:auto}

@media (max-width:1000px){
  .projects-grid{grid-template-columns:1fr;gap:40px}
  footer .grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:640px){
  header{padding:14px 22px}
  /* Mobile nav drawer */
  nav.menu{
    display:none; position:fixed; top:64px; left:0; right:0;
    background:rgba(26,23,20,.98); padding:24px;
    flex-direction:column; gap:0; align-items:stretch;
    border-bottom:1px solid rgba(155,123,74,.32);
    max-height:calc(100vh - 64px); overflow-y:auto;
  }
  nav.menu.open{display:flex}
  nav.menu a{padding:16px 0;border-bottom:1px solid rgba(242,237,228,.12);font-size:13px;letter-spacing:.22em}
  nav.menu a:last-child{border-bottom:0}
  .header-right{gap:14px}
  /* Hide topbar See It First on mobile (irrelevant arrow) */
  header .header-right .btn-primary{display:none}
  .hamburger{display:block;order:-1}
  .logo-text{font-size:15px}
  .logo-text small{display:none}
  .logo-mark{height:30px}
  .s-talk{padding:80px 24px}
  footer{padding:72px 24px 32px}
  footer .grid{grid-template-columns:1fr;gap:32px}
  footer .legal{flex-direction:column;align-items:flex-start;gap:14px;text-align:left}
  /* Niche CTA centered on mobile */
  .avp-niche-meta{align-items:center;text-align:center}
  .avp-niche-cta{justify-content:center;align-self:center;margin-top:12px;padding:12px 18px;border:1px solid var(--bronze);color:var(--bronze)}
}

.dev-tag{position:fixed;right:14px;bottom:14px;z-index:99;font-family:'Inter';font-size:10px;letter-spacing:.2em;background:var(--ink);color:var(--cream);padding:8px 12px;text-transform:uppercase;opacity:.5}


/* === ACE Live points (global) === */
.live-points{margin-top:40px;list-style:none;padding:0}
.live-points li{padding:18px 0;border-top:1px solid var(--hairline);display:grid;grid-template-columns:170px 1fr;align-items:baseline;gap:24px}
.live-points li:last-child{border-bottom:1px solid var(--hairline)}
.live-points .lbl{font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);align-self:center}
.live-points .val{font-family:'Fraunces';font-weight:400;font-size:18px;color:var(--ink)}
@media (max-width:640px){
  .live-points li{grid-template-columns:130px 1fr;gap:16px;padding:16px 0}
  .live-points .val{font-size:16px}
}


/* === Services submenu (dropdown desktop, accordion mobile) === */
nav.menu .menu-item{position:relative;display:flex;align-items:center}
nav.menu .menu-item.has-submenu > .menu-trigger{display:inline-flex;align-items:center;gap:6px}
nav.menu .menu-item .caret{font-size:10px;line-height:1;transition:transform .25s ease;color:var(--bronze-light)}
nav.menu .submenu{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(8px);
  background:rgba(26,23,20,.97); padding:8px 0; min-width:260px;
  display:flex; flex-direction:column; gap:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  border-top:2px solid var(--bronze);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  z-index:60;
}
nav.menu .submenu a{
  padding:13px 22px; font-family:'Inter'; font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cream);
  border-bottom:1px solid rgba(242,237,228,.08); white-space:nowrap; text-align:left;
}
nav.menu .submenu a::after{display:none !important}
nav.menu .submenu a:last-child{border-bottom:0}
nav.menu .submenu a:hover{color:var(--bronze-light); background:rgba(155,123,74,.10)}
nav.menu .submenu .submenu-all{color:var(--bronze-light); font-weight:600}
@media (min-width:641px){
  nav.menu .menu-item.has-submenu:hover .submenu,
  nav.menu .menu-item.has-submenu:focus-within .submenu{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  nav.menu .menu-item.has-submenu:hover .caret,
  nav.menu .menu-item.has-submenu:focus-within .caret{transform:rotate(180deg)}
}

@media (max-width:640px){
  nav.menu .menu-item{flex-direction:column;align-items:stretch;width:100%}
  nav.menu .menu-item .menu-trigger{
    padding:16px 0;border-bottom:1px solid rgba(242,237,228,.12);
    font-size:13px;letter-spacing:.22em;
    display:flex;align-items:center;justify-content:space-between;
  }
  nav.menu .submenu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border-top:0;box-shadow:none;padding:0;min-width:0;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  nav.menu .menu-item.open .submenu{max-height:600px}
  nav.menu .submenu a{
    padding:14px 16px;font-size:12px;color:var(--cream);opacity:.85;
    border-bottom:1px solid rgba(242,237,228,.08);background:rgba(0,0,0,.18);
  }
  nav.menu .menu-item.open .caret{transform:rotate(180deg)}
}


/* === MOBILE-FIRST FOUNDATION (added 2026-05-05) ============================
   Mobile is the baseline. Desktop enhancements are gated by min-width queries.
   This block intentionally lives at the END to win the cascade where needed,
   without rewriting the original rules above (revertible).
   =========================================================================*/

/* --- 0. CSS supports: viewport units that respect mobile chrome --- */
:root{
  --vh: 1vh;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --tap-min: 48px;
}

/* --- 1. Tap highlight + touch behavior --- */
html{
  -webkit-tap-highlight-color: rgba(155,123,74,.18);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
a, button, [role=button]{
  touch-action: manipulation;
}

/* --- 2. Focus-visible ring (accessibility) --- */
*:focus{ outline: none; }
*:focus-visible{
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 1px;
}
nav.menu a:focus-visible,
.btn-primary:focus-visible,
.ghost-link:focus-visible{
  outline-offset: 4px;
}

/* --- 3. Reduced motion guard --- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{opacity:1; transform:none}
}

/* --- 4. Form fields: 48px min-height + 16px font (iOS auto-zoom guard) --- */
input, select, textarea, button{
  font-size: 16px;
}
.talk-form .field input,
.talk-form .field select,
.talk-form .field textarea{
  min-height: 28px;
  font-size: 16px;
}
.talk-form .field{
  min-height: var(--tap-min);
}
.talk-form .submit,
.btn-primary{
  min-height: var(--tap-min);
}

/* --- 5. Project cards: portrait 3:4 on mobile, 4:5 on desktop --- */
.project-card .img-wrap{ aspect-ratio: 3 / 4; }
@media (min-width: 641px){
  .project-card .img-wrap{ aspect-ratio: 4 / 5; }
}

/* --- 6. Container paddings honor safe-area on mobile --- */
@media (max-width: 640px){
  header{
    padding-left: max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
  }
  footer{
    padding-bottom: calc(32px + var(--safe-bottom));
  }
}

/* --- 7. Hamburger min tap target (was 36x36) --- */
.hamburger{
  width: var(--tap-min);
  height: var(--tap-min);
  display: none; /* shown on mobile via existing rule */
  align-items: center;
  justify-content: center;
}

/* --- 8. Mobile nav drawer: smooth open + lock body scroll handled by JS --- */
@media (max-width: 640px){
  nav.menu{
    transform: translateY(-8px);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
  }
  nav.menu.open{
    transform: translateY(0);
    opacity: 1;
  }
  nav.menu a, nav.menu .menu-trigger{
    min-height: var(--tap-min);
    display: flex;
    align-items: center;
  }
}

/* --- 9. Body lock when drawer is open (JS toggles .nav-open on body) --- */
body.nav-open{
  overflow: hidden;
}

/* --- 10. Disable hover-only effects on touch (no sticky-hover state) --- */
@media (hover: none){
  .project-card:hover .img-wrap{ transform: none; }
  .ghost-link:hover{ color: inherit; border-bottom-color: inherit; }
}

/* --- 11. Selection consistency --- */
::-moz-selection{ background: var(--bronze); color: var(--cream); }

/* === MOBILE STICKY CTA BAR ===============================================
   New: was missing in cream production. Bronze CTAs anchored above safe-area.
   Markup expected (injected via shared site.js or inline at end of body):
     <div class=m-cta role=region aria-label=Quick contact>
       <a class=m-cta-btn m-cta-call href=tel:+13104386866>Call Now</a>
       <a class=m-cta-btn m-cta-quote href=/contact/>Free Quote</a>
     </div>
   ========================================================================= */
.m-cta{
  display: none;
}
@media (max-width: 640px){
  .m-cta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    background: var(--ink);
    border-top: 1px solid rgba(155,123,74,.32);
    padding-bottom: var(--safe-bottom);
    transform: translateY(0);
    transition: transform .25s ease;
  }
  body.nav-open .m-cta,
  body.kbd-open .m-cta{
    transform: translateY(110%);
  }
  .m-cta-btn{
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cream);
    text-decoration: none;
    border: 0;
  }
  .m-cta-call{
    background: rgba(242,237,228,.06);
    border-right: 1px solid rgba(155,123,74,.22);
  }
  .m-cta-call::before{
    content: '\2706'; /* phone glyph */
    margin-right: 10px;
    font-size: 14px;
    color: var(--bronze-light);
  }
  .m-cta-quote{
    background: var(--bronze);
    color: var(--cream);
  }
  .m-cta-quote::after{
    content: '\2192';
    margin-left: 10px;
    font-size: 14px;
  }
  /* Compensate body so content isn't hidden behind the bar */
  body{
    padding-bottom: calc(56px + var(--safe-bottom));
  }
}

/* === END MOBILE-FIRST FOUNDATION ========================================= */