body{font-family:Inter,sans-serif;background-color:#fdfbf7;color:#111;scroll-behavior:smooth;margin:0;padding:0}.glass-nav{background:#fdfbf7b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(17,17,17,.05)}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:#f97316;border-radius:10px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-float{animation:float 3s ease-in-out infinite}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.animate-slide-in{animation:slideInFromBottom .4s ease-out}.color-picker-dropdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;background:#1a1a1a;border-radius:16px;border:1px solid rgba(255,255,255,.1)}.color-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .2s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:#f97316;box-shadow:0 0 0 2px #f9731666}

/* --- readability pass (2026-09-29) ---
   Tailwind runtime injects its <style> after this file, so these need !important.
   Sizes only: colours are left alone because the same grey classes sit on both
   light and dark sections. */
[class*="text-[10px]"]{font-size:11.5px!important;letter-spacing:.2em!important;line-height:1.5!important}
[class*="text-[11px]"]{font-size:12.5px!important;line-height:1.55!important}
.text-xs{font-size:13px!important;line-height:1.6!important}
.text-sm{font-size:15px!important;line-height:1.65!important}
.text-base{font-size:16.5px!important;line-height:1.7!important}
.leading-relaxed{line-height:1.7!important}
p{line-height:1.65}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

@media (max-width:767px){
  [class*="text-[10px]"]{font-size:11.5px!important;letter-spacing:.14em!important}
  .text-xs{font-size:13.5px!important}
  .text-sm{font-size:15.5px!important;line-height:1.7!important}
  .text-base{font-size:17px!important}
}

/* grey-400 on white was ~2.3:1 contrast; darken it on light sections only,
   keep it light where it sits on the dark #111 blocks */
.text-gray-400{color:#6b7280!important}
.bg-\[\#111\] .text-gray-400,.bg-\[\#111\] .text-gray-500{color:#9ca3af!important}

/* --- header fit (2026-09-29) ---
   Menu appears at lg (1024px) but logo+menu+phone+CTA need ~948px while only
   ~881px is available until ~1200px, so items overlapped. Tighten until xl. */
@media (min-width:1024px) and (max-width:1279px){
  nav{padding-left:1.25rem!important;padding-right:1.25rem!important}
  nav .lg\:flex{gap:1.1rem!important}
  nav .lg\:flex a{font-size:11.5px!important;letter-spacing:.1em!important}
  nav .gap-3.md\:gap-4{gap:.6rem!important}
  nav .gap-3.md\:gap-4 a[href^="tel:"]{font-size:12px!important}
  nav a[href="#contact"]{padding-left:1rem!important;padding-right:1rem!important;font-size:11.5px!important}
}
/* logo scrolls back to top */
nav>div>div:first-child{cursor:pointer}

/* --- header polish + logo animation (2026-09-29) --- */
.glass-nav{
  background:rgba(253,251,247,.72)!important;
  backdrop-filter:blur(16px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(150%)!important;
  border-bottom:1px solid rgba(17,17,17,.055)!important;
  transition:padding .3s ease,background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
/* condenses slightly once the page is scrolled */
nav.is-scrolled{
  padding-top:.55rem!important;padding-bottom:.55rem!important;
  background:rgba(253,251,247,.9)!important;
  box-shadow:0 8px 28px -16px rgba(17,17,17,.28);
  border-bottom-color:rgba(17,17,17,.08)!important;
}
/* menu links: underline wipes in from the left */
nav .lg\:flex a{position:relative;transition:color .2s ease}
nav .lg\:flex a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;
  background:#F97316;border-radius:2px;transition:right .3s cubic-bezier(.4,0,.2,1);
}
nav .lg\:flex a:hover{color:#F97316!important}
nav .lg\:flex a:hover::after{right:0}
/* CTA lifts on hover */
nav a[href="#contact"]{transition:transform .25s ease,box-shadow .25s ease}
nav a[href="#contact"]:hover{transform:translateY(-2px);box-shadow:0 12px 22px -10px rgba(17,17,17,.55)}
/* social buttons */
nav .rounded-full{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
nav .rounded-full:hover{transform:translateY(-2px) scale(1.06)}
/* logo mark */
nav .w-12.h-12{
  animation:brandIn .55s cubic-bezier(.34,1.56,.64,1) both;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease;
}
nav>div>div:first-child:hover .w-12.h-12{
  transform:rotate(-6deg) scale(1.08);
  box-shadow:0 14px 24px -12px rgba(17,17,17,.55);
}
nav>div>div:first-child:active .w-12.h-12{transform:scale(.94) rotate(-2deg)}
nav>div>div:first-child span,nav>div>div:first-child div:not(.w-12){transition:transform .3s ease}
nav>div>div:first-child:hover span{transform:translateX(2px)}
@keyframes brandIn{from{opacity:0;transform:translateY(-8px) scale(.85)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .glass-nav,nav .w-12.h-12,nav .lg\:flex a::after,nav a[href="#contact"],nav .rounded-full{
    transition:none!important;animation:none!important;
  }
}

/* --- Manrope for the header and UI chrome (2026-09-29) ---
   Body copy stays Inter; Manrope reads better at small uppercase sizes
   and gives the nav a less generic look. Manrope tops out at 800, so the
   900 (font-black) classes are pinned to 800 here. */
nav,nav *{font-family:'Manrope',Inter,system-ui,sans-serif!important}
nav .lg\:flex a{font-weight:700!important;letter-spacing:.07em!important}
nav a[href="#contact"]{font-weight:800!important;letter-spacing:.03em!important}
nav .w-12.h-12,nav .w-12.h-12 *{font-weight:800!important}
nav .font-black{font-weight:800!important}
/* uppercase micro-labels across the page */
[class*="tracking-[0.4em]"],[class*="tracking-[0.3em]"],[class*="tracking-[0.2em]"]{
  font-family:'Manrope',Inter,system-ui,sans-serif;font-weight:700
}
/* buttons */
a[class*="rounded-full"],button[class*="rounded-"]{font-family:'Manrope',Inter,system-ui,sans-serif}
/* Manrope has no 900 — pin the micro-labels to 800 so the browser stops
   faux-bolding them (that smeared the small uppercase text). */
[class*="tracking-[0.4em]"],[class*="tracking-[0.3em]"],[class*="tracking-[0.2em]"]{font-weight:800!important}
a[class*="rounded-full"],button[class*="rounded-"]{font-weight:800!important}

/* --- bigger type, header first (2026-09-29) ---
   Header was 11.5–12px across the board. Wide tracking (.3em) is traded for
   size so the row still fits. Later rules override the earlier passes. */
nav .lg\:flex a{font-size:15px!important;letter-spacing:.04em!important}
nav a[href^="tel:"]{font-size:16px!important;letter-spacing:0!important}
nav a[href="#contact"]{font-size:15px!important;letter-spacing:.02em!important;padding:14px 26px!important}
nav>div>div:first-child .text-lg{font-size:21px!important;line-height:1.05!important}
nav>div>div:first-child .text-sm{font-size:18px!important;line-height:1.05!important}
@media (min-width:1024px) and (max-width:1279px){
  nav .lg\:flex{gap:1.25rem!important}
  nav .lg\:flex a{font-size:14px!important;letter-spacing:.02em!important}
  nav a[href^="tel:"]{font-size:14px!important}
  nav a[href="#contact"]{font-size:14px!important;padding:12px 18px!important}
}
@media (max-width:1023px){
  nav a[href="#contact"]{font-size:14px!important;padding:12px 18px!important}
}

/* uppercase micro-labels across the page */
[class*="text-[10px]"]{font-size:13px!important;letter-spacing:.14em!important}
@media (max-width:767px){
  [class*="text-[10px]"]{font-size:12.5px!important;letter-spacing:.1em!important}
  .text-sm{font-size:16px!important}
  .text-xs{font-size:14px!important}
}