/* Critical shell CSS — site chrome only (tokens, base reset, nav + mobile nav).
   Loaded blocking so the header renders immediately; styles.css (the
   complete, single source of truth — this file duplicates a small subset of
   it, nothing here is authored independently) loads asynchronously behind
   it for everything else. Keep in sync by hand if the sections below ever
   change in styles.css: :root, the base reset, "nav", and "mobile nav". */

/* Self-hosted, same-origin Fraunces/Inter — replaces the Google Fonts CDN
   request (removes an extra DNS+TLS+request hop). Each file is the stock
   Google Fonts variable font with its wght axis (and, for Fraunces, its
   opsz axis) trimmed with fonttools' instancer to just the range this site
   actually uses — nothing about how the fonts render within that range
   changes, so this is a transport optimisation, not a design change:
     Fraunces normal — wght 500-700 (used at 500/600/700), opsz kept full
       9-144 range narrowed to 9-60 (nothing on the site renders above 58px)
     Fraunces italic — wght 400-500 (used at 400/500), opsz 9-60 as above
     Inter — wght 400-700 (used at 400/500/600/700)
   Re-generate from the current Google Fonts CSS if the design ever needs a
   weight or style outside these ranges. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url('./fonts/fraunces-normal.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;src:url('./fonts/fraunces-italic.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('./fonts/inter.woff2') format('woff2');}

:root{
  --shell-gutter:clamp(20px, 8px + 3vw, 44px);
  --text-display:clamp(34px, 22.4px + 3.2vw, 58px);
  --text-h2:clamp(28px, 20.8px + 2vw, 38px);
  --linen:#FBF9F4;
  --linen-soft:#F7F5F2;
  --navy:#1F3A4A; --charcoal:#2B2A27; --charcoal-soft:#5C5A54;
  --terracotta-large:#c97b59;
  --terracotta-small:#A06248;
  --sage:#AEBFA0; --white:#ffffff;
  --pale-sage:#F3F7F3;
  --sage-green:#6B8A7A;
  --border:rgba(31,58,74,0.12);
  --terracotta-bright:#E3A480;
  --linen-mist:rgba(251,249,244,.72);
}
*{box-sizing:border-box;}
img{max-width:100%;height:auto;}
html{scroll-behavior:smooth;}
a{color:inherit;text-decoration:none;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--linen);color:var(--charcoal);-webkit-font-smoothing:antialiased;}

/* ---------- nav ---------- */
.navbar{border-bottom:3px solid rgba(43,42,39,.08);background:var(--white);position:sticky;top:0;z-index:100;}
nav{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px var(--shell-gutter);gap:24px;flex-wrap:nowrap;}
.nav-actions{display:flex;align-items:center;gap:12px;flex:none;}
.logo img{display:block;height:36px;width:auto;}
.navlinks{display:flex;align-items:center;gap:30px;min-width:0;font-size:13.5px;font-weight:600;color:var(--charcoal-soft);flex-wrap:nowrap;white-space:nowrap;}
.navlinks a:hover{color:var(--navy);}
.nav-dropdown{position:relative;display:flex;align-items:center;}
.nav-dropdown > .nav-trigger{display:inline-flex;align-items:center;gap:6px;padding:8px 0;}
.nav-dropdown > .nav-trigger::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;}
.nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;z-index:110;display:flex;flex-direction:column;gap:2px;min-width:245px;padding:8px;background:var(--white);border:1px solid rgba(31,58,74,.12);border-radius:8px;box-shadow:0 14px 30px rgba(31,58,74,.16);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;}
.nav-dropdown-menu::before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;background:var(--white);border-left:1px solid rgba(31,58,74,.12);border-top:1px solid rgba(31,58,74,.12);transform:translateX(-50%) rotate(45deg);}
.nav-dropdown-menu a{position:relative;z-index:1;padding:9px 12px;border-radius:5px;font-size:12.5px;font-weight:600;color:var(--charcoal-soft);white-space:nowrap;transition:background-color .18s ease,color .18s ease;}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{background:var(--linen-soft);color:var(--navy);}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translate(-50%,0);}
.nav-dropdown:hover > .nav-trigger::after,.nav-dropdown:focus-within > .nav-trigger::after{transform:rotate(225deg) translate(1px,1px);}
.nav-cta{flex:none;background:var(--navy);color:var(--linen);padding:11px 22px;border-radius:22px;font-size:13.5px;font-weight:700;white-space:nowrap;transition:background-color .2s ease,color .2s ease,transform .2s ease;}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--terracotta-large);color:var(--white);transform:translateY(-1px);}
.call-nav-icon,.email-nav-icon,.wa-nav-icon{width:30px;height:30px;border-radius:50%;background:var(--linen-soft);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--sage-green);flex:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease;}
.call-nav-icon svg,.email-nav-icon svg,.wa-nav-icon svg{width:15px;height:15px;display:block;}
.call-nav-icon:hover,.call-nav-icon:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--white);}
.email-nav-icon:hover,.email-nav-icon:focus-visible{background:var(--terracotta-large);border-color:var(--terracotta-large);color:var(--white);}
.wa-nav-icon:hover,.wa-nav-icon:focus-visible{background:var(--sage-green);border-color:var(--sage-green);color:var(--white);}
@media (max-width:374px){
  nav{gap:12px;padding-left:16px;padding-right:16px;}
  .logo img{height:32px;}
  .nav-cta{padding:11px 15px;}
}

/* ---------- mobile nav (hamburger) ---------- */
.mobile-nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:none;background:none;border-radius:999px;color:var(--navy);cursor:pointer;padding:0;}
.mobile-nav-toggle:hover{background:var(--linen-soft);}
.mobile-nav-toggle-bars{position:relative;display:block;width:20px;height:15px;}
.mobile-nav-toggle-bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease,top .2s ease,bottom .2s ease;}
.mobile-nav-toggle-bars span:nth-child(1){top:0;}
.mobile-nav-toggle-bars span:nth-child(2){top:50%;transform:translateY(-50%);}
.mobile-nav-toggle-bars span:nth-child(3){bottom:0;}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bars span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg);}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bars span:nth-child(2){opacity:0;}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bars span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg);}
.mobile-nav-panel{position:fixed;left:0;right:0;top:88px;bottom:0;z-index:90;background:var(--linen);border-top:1px solid var(--border);padding:32px var(--shell-gutter) 40px;overflow-x:clip;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;}
.mobile-nav-panel.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .2s ease,transform .2s ease;}
.mobile-nav-group{margin-bottom:28px;}
.mobile-nav-eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--terracotta-small);margin:0 0 10px;}
.mobile-nav-panel ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;}
.mobile-nav-panel a{display:block;padding:12px 0;border-bottom:1px solid var(--border);color:var(--navy);font-size:15.5px;font-weight:500;text-decoration:none;}
.mobile-nav-secondary a{font-weight:700;}
.mobile-nav-panel .mobile-nav-call,.mobile-nav-panel .mobile-nav-email,.mobile-nav-panel .mobile-nav-wa{display:flex;align-items:center;gap:12px;font-weight:700;}
.mobile-nav-call svg,.mobile-nav-email svg,.mobile-nav-wa svg{width:18px;height:18px;flex:none;}
.mobile-nav-call{color:var(--navy);}
.mobile-nav-email{color:var(--terracotta-large);}
.mobile-nav-wa{color:var(--sage-green);}
/* .mobile-nav-panel a (above) targets every link in the panel for the plain
   list-row treatment, but the CTA is also an <a> in that panel, so it needs
   its own display/padding/font reasserted here or it inherits the list-row
   styling instead of looking like a button. */
.mobile-nav-panel .cta{display:inline-flex;width:100%;margin-top:4px;padding:15px 30px;font-size:16px;font-weight:700;border-bottom:none;}
@media (min-width:881px){
  .mobile-nav-panel{display:none;}
}
@media (max-width:880px){
  .navlinks{display:none;}
  .mobile-nav-toggle{display:inline-flex;}
  .call-nav-icon,.email-nav-icon,.wa-nav-icon{display:none;}
}