/* ============================================================
   NAVBAR + MOBILE DRAWER
   ----------------------------------------------------------
   Solid premium ivory/beige bar — NOT glass. No backdrop-filter,
   no translucency: a lightweight, opaque panel (just a background,
   a couple of box-shadows and a pseudo-element) that reads as
   integrated with the page rather than a floating overlay effect.
   Key properties:
     - in-flow (position:sticky, not fixed), full width (100%),
       square corners (border-radius:0), flush to both edges —
       reserves real space at the top of the page so Hero sits
       BELOW it (height:calc(100vh - var(--nav-h)) in hero.css)
       with zero overlap and zero gap.
     - a warm top-to-bottom beige gradient for quiet depth, instead
       of a flat single color.
     - the one accent is a soft blue glow along the very bottom edge
       only, shaped as a radial "pool of light" (brightest center,
       fading outward) plus a matching blue note inside the
       box-shadow — ambient lighting, not a neon seam. Everything
       else is warm neutrals.
   --nav-h (tokens.css) is this bar's exact height and nothing
   else — every anchor-jump/scrollspy/pin calculation elsewhere in
   the site derives from it, so this box's height must always
   match that value precisely. */
.navbar{
  position:sticky;
  top:0;
  z-index:100;
  width:100%;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  padding:0 clamp(24px, 3.2vw, 44px);
  border-radius:0;
  background:linear-gradient(180deg, #F8EFDC 0%, #EEDFC0 100%);
  border:none;
  /* Soft inner highlight along the top edge, a low wide ambient
     shadow for depth (so it reads as sitting ON the page, not
     floating above it), and a cool-blue note underneath — the
     "ambient lighting" glow, boosted for real presence while staying
     a soft wash, never neon. */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 10px 24px -14px rgba(47,36,27,0.2),
    0 14px 46px -6px rgba(94,168,255,0.42);
  transition: background 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

/* The bottom-edge glow itself — reworked as a radial "pool of light"
   (brightest dead-center, fading outward in every direction) rather
   than a flat horizontal gradient bar, so it reads like a genuine
   light source spilling down from the navbar instead of a painted
   stripe. Color sits in the premium #5EA8FF–#7EC3FF cool-blue range.
   Purely decorative, so it's pointer-events:none and cheap to paint
   (one blurred gradient). */
.navbar::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-11px;
  height:24px;
  background:radial-gradient(60% 100% at 50% 0%,
    rgba(126,195,255,0.55) 0%,
    rgba(94,168,255,0.3) 45%,
    rgba(94,168,255,0) 78%);
  filter:blur(10px);
  opacity:1;
  pointer-events:none;
}

/* Scrolled state: settles a touch warmer/deeper and the ambient
   shadow strengthens slightly — still solid, still no blur. Height
   deliberately stays fixed at var(--nav-h): Hero's own height and
   every anchor-jump's scroll-padding-top both assume a constant
   navbar height, so shrinking it here used to open an 8px gap the
   instant the page scrolled — revealing a sliver of Hero's blurred
   ambient video peeking in above Services/Projects/About/Contact. */
.navbar.scrolled{
  background:linear-gradient(180deg, #F4E9CF 0%, #E7D5AC 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.65) inset,
    0 16px 32px -14px rgba(47,36,27,0.24),
    0 16px 52px -6px rgba(94,168,255,0.5);
}
.navbar.scrolled::after{ opacity:1; }

.nav-inner{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
}

/* -- Brand block (left) -- */
.nav-brand{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  justify-self:start;
}

/* Ambient highlight behind the mark — extremely soft, no neon glow */
.nav-brand::before{
  content:'';
  position:absolute;
  left:-12px;
  top:50%;
  width:52px;
  height:52px;
  transform:translateY(-50%);
  background:radial-gradient(circle, rgba(140,98,57,0.14) 0%, rgba(140,98,57,0) 70%);
  opacity:0;
  transition:opacity 0.5s ease;
  pointer-events:none;
}
.nav-brand:hover::before{ opacity:1; }

.brand-mark{
  position:relative;
  height:34px;
  width:auto;
  flex-shrink:0;
  object-fit:contain;
  display:block;
  transition:transform 0.4s var(--ease-premium);
}
.nav-brand:hover .brand-mark{ transform:scale(1.04); }

.brand-text{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.22;
  border-left:1px solid var(--color-nav-border);
  padding-left:12px;
}
.brand-text .name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:16.5px;
  letter-spacing:0.01em;
  color:var(--color-nav-text);
}
.brand-text .tagline{
  margin-top:2px;
  font-size:11px;
  letter-spacing:0.03em;
  color:var(--color-nav-muted);
  font-weight:400;
}

/* -- Center links -- */
.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(32px, 3.6vw, 52px);
  justify-self:center;
}

.nav-links li a{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-size:15.5px;
  font-weight:500;
  letter-spacing:0.01em;
  color:rgba(47,36,27,0.6);
  padding:8px 1px 10px;
  border-radius:6px;
  transition:color 0.3s ease, letter-spacing 0.35s var(--ease-premium);
}
.nav-links li a:hover{
  color:var(--room-text, #2F241B);
  letter-spacing:0.02em;
}
.nav-links li a.active{
  color:var(--room-text, #2F241B);
  font-weight:600;
}

/* No browser default focus ring anywhere in the navbar — every
   focusable element gets its own premium, on-brand focus state
   instead (defined per-element below), never a blue rectangle. */
.navbar a:focus,
.navbar button:focus{ outline:none; }

/* Keyboard focus reuses the exact same premium underline as hover/
   active — a real, visible focus indicator, just never a blue box. */
.nav-links li a:focus-visible{
  color:var(--room-text, #2F241B);
}
.nav-links li a:focus-visible::after{
  transform:scaleX(1);
  opacity:1;
}

/* Animated indicator — a soft pill-underline that glides in on hover
   and settles under whichever link is active, rather than a hard
   line snapping on/off. */
.nav-links li a::after{
  content:'';
  position:absolute;
  left:1px; bottom:0;
  width:calc(100% - 2px);
  height:2px;
  border-radius:2px;
  background:var(--room-accent, #8C6239);
  transform:scaleX(0);
  transform-origin:center;
  opacity:0.85;
  transition:transform 0.4s var(--ease-premium), opacity 0.3s ease;
}
.nav-links li a.active::after,
.nav-links li a:hover::after{ transform:scaleX(1); }
.nav-links li a.active::after{ opacity:1; }

/* -- CTA (right) -- */
.nav-cta{ justify-self:end; }

/* Solid warm-accent pill — deliberately NOT glass, so it stays the
   one visually prominent element floating on the frosted bar, the
   same way Apple/Linear keep a single solid CTA against an
   otherwise translucent nav. */
.btn-quote{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 24px 12px 26px;
  background:var(--color-red);
  color:var(--color-white);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.025em;
  border-radius:999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 10px 24px -10px rgba(179,36,28,0.4);
  transition:background 0.3s ease, transform 0.3s var(--ease-premium), box-shadow 0.3s ease, letter-spacing 0.3s ease;
}
.btn-quote .btn-arrow{
  width:12px;
  height:12px;
  transition:transform 0.35s var(--ease-premium);
}
.btn-quote .btn-arrow path{
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.btn-quote:hover{
  background:var(--color-red-light);
  transform:translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 12px 30px -10px rgba(179,36,28,0.48);
  letter-spacing:0.035em;
}
.btn-quote:hover .btn-arrow{ transform:translateX(3px); }
/* Warm accent focus ring instead of the browser's default blue one. */
.btn-quote:focus-visible{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 10px 24px -10px rgba(179,36,28,0.4),
    0 0 0 3px rgba(140,98,57,0.35);
}

/* -- Hamburger (mobile) --
   The icon itself stays a compact 22x14 glyph, but the button's real
   hit box is padded out to a full 44x44 — a smaller nav bar (see the
   mobile density pass in responsive.css) still needs a comfortable
   tap target even though there's less visual real estate to spend on
   it. Lines are positioned relative to the padded box, not the icon's
   own small dimensions. */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:15px 11px;
  position:relative;
  justify-self:end;
  z-index:110;
  border-radius:6px;
  box-sizing:border-box;
}
.nav-toggle:focus-visible{
  box-shadow:0 0 0 3px rgba(140,98,57,0.35);
}
.nav-toggle span{
  position:absolute;
  left:11px; right:11px;
  height:1.5px;
  background:var(--color-nav-text);
  transition:transform 0.4s var(--ease-premium), opacity 0.3s ease, top 0.4s var(--ease-premium);
}
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle span:nth-child(3){ top:29px; }

.nav-toggle.open span:nth-child(1){ top:22px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* ============================================================
   MOBILE DRAWER
============================================================ */
/* Kept as a solid dark panel on purpose — a deliberate, focused
   full-screen overlay rather than glass, so its own link color is
   hardcoded light (independent of --color-nav-text, which is now
   the top navbar's dark-ink token for the light glass bar). */
.mobile-drawer{
  position:fixed;
  inset:0;
  background:var(--color-nav-bg);
  z-index:99;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.4s ease, visibility 0.4s ease;
}
.mobile-drawer.open{ opacity:1; visibility:visible; }

.mobile-drawer a{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:600;
  color:#F4EEE4;
  opacity:0;
  transform:translateY(16px);
  outline:none;
}
.mobile-drawer a:focus-visible{
  color:var(--color-red-light);
}

.mobile-drawer .btn-quote{ opacity:0; transform:translateY(16px); margin-top:12px; }