/* Site header: red menu bar with a black, slanted logo panel on the left.
   Loaded after the compiled Tailwind CSS. Tailwind's utilities live inside a
   CSS @layer, and plain (unlayered) rules like these always win over layered
   ones, so these overrides apply without needing !important. */

/* The bar itself: solid brand red instead of the dark gradient.
   overflow-x:clip hides the logo panel's off-screen part (below) without
   causing a horizontal scrollbar, while still letting it hang down vertically. */
.site-header{background:#c23b2c;border-bottom:0;backdrop-filter:none;overflow-x:clip}

/* 5px taller than the original bar: 18.5px top and bottom padding instead of 16px. */
.site-header > div:first-child{padding-top:18.5px;padding-bottom:18.5px}

/* Logo wrapper: stretched to full bar height, with room on the right for the slant. */
.site-header .site-logo{position:relative;z-index:0;padding-right:56px}

/* Whole number logo width. At 40px tall the logo's natural shape makes it
   156.36px wide, which put the panel's slanted right edge (and its red
   outline) part way through a pixel. 156px keeps those edges on whole pixels
   and is the same size to the eye. !important is needed to beat the img's
   inline width:auto. */
.site-header .site-logo img{width:156px!important}

/* The black panel is drawn as a pseudo element (a decorative box CSS adds
   behind the logo, no extra HTML needed). left:-100vw pushes it to the left edge
   of the screen however wide the window is; clip-path cuts the right side on
   a diagonal. top/bottom of -18.5px cover the container's vertical padding. */
.site-header .site-logo::before{content:"";position:absolute;z-index:-1;top:-18.5px;bottom:-18.5px;left:-100vw;right:0;background:#0c0c0d;clip-path:polygon(0 0,100% 0,calc(100% - 44px) 100%,0 100%)}

/* Menu links: white, bolder and bigger, with tighter letter spacing. */
.site-header .nav-link-desktop{color:#fff;font-weight:600;font-size:16px;letter-spacing:.08em;border-bottom:0}
.site-header .nav-link-desktop:hover,.site-header .nav-link-desktop.is-active{color:#0c0c0d;border-bottom:0}

/* Schedule button: white outline on the red bar, fills white on hover. */
/* white-space:nowrap keeps the label on one line; at narrow desktop widths it
   used to wrap to two lines, which made the whole bar taller. */
.site-header .desktop-cta{white-space:nowrap;background:transparent;border:2px solid #fff;padding:12px 28px;font-weight:600;font-size:15px;letter-spacing:.12em}
.site-header .desktop-cta:hover{background:#fff;color:#c23b2c}

/* Desktop only: the logo panel hangs a little below the red bar.
   (On mobile it stays flush so it doesn't cover the dropdown menu.) */
@media(min-width:64rem){
  .site-header .site-logo{padding-right:120px}
  /* Bigger logo. The img sets height:40px in its inline style attribute, and
     inline styles beat stylesheets unless the rule uses !important. */
  .site-header .site-logo img{height:52px!important;width:203px!important}
  .site-header .site-logo::before{bottom:-38.5px;clip-path:polygon(0 0,100% 0,calc(100% - 64px) 100%,0 100%)}
}

/* Logo panel entrance, matching the service cards (/assets/service-cards.css):
   a thin red line traces around the black panel (along the top, down the slant,
   back along the bottom) and then stays as a border, while the logo rises in. The header is
   always on screen when a page opens, so this simply plays on load with plain
   CSS; no scroll watching JavaScript is needed. */
.site-header .site-logo img{animation:logo-rise .8s cubic-bezier(.16,.8,.24,1) .15s both}

/* ::after is a second decorative box (::before is already the black panel). It
   covers the same area as the panel, filled red, and clip-path (which shows only
   the part of a box inside a shape) cuts it down to a 2px band hugging the
   panel's top, slant and bottom edges.
   Custom properties (--name values reused below): --s is the slant's width,
   --t the line thickness, --ti how far the inner edge of the slanted band sits
   in from the outer edge (slightly more than --t, since that edge is angled).
   --p1, --p2 and --p3 say how much of the top, slant and bottom is drawn, from
   0 (none) to 1 (all). The animation below changes only those three numbers;
   at rest they are 1, so the full border stays once it has drawn (and shows
   straight away for reduced motion).
   left: unlike the panel, this box starts just past the screen's left edge
   instead of a whole screen width off it, so the line is visible from the
   moment it starts. The logo sits (screen width - 1400px) / 2 in from the edge
   on wide screens, plus the container's 24px side padding (40px from 768px
   up); 20px extra puts the start safely off screen. */
.site-header .site-logo::after{--s:44px;--t:2px;--ti:2.5px;--p1:1;--p2:1;--p3:1;content:"";position:absolute;top:-18.5px;bottom:-18.5px;left:calc(-1 * max(0px,(100vw - 1400px) / 2) - 44px);right:0;background:#c23b2c;pointer-events:none;
  /* The band is an 8 point polygon: points 1 to 4 run along its outer edge (top
     left, end of the top, end of the slant, end of the bottom) and 5 to 8 come
     back along its inner edge. Each "end" point is worked out from the --p
     numbers, so with all three at 1 this is the finished outline, and with
     smaller numbers the line stops part way, at the pen's moving tip. */
  clip-path:polygon(
    0 0,
    calc(100% * var(--p1)) 0,
    calc(100% * var(--p1) - var(--s) * var(--p2)) calc(100% * var(--p2)),
    calc((100% * var(--p1) - var(--s) * var(--p2)) * (1 - var(--p3))) calc(100% * var(--p2)),
    calc(((100% - var(--ti)) * var(--p1) - var(--s) * var(--p2)) * (1 - var(--p3))) calc(var(--t) + (100% - 2 * var(--t)) * var(--p2)),
    calc((100% - var(--ti)) * var(--p1) - var(--s) * var(--p2)) calc(var(--t) + (100% - 2 * var(--t)) * var(--p2)),
    calc((100% - var(--ti)) * var(--p1)) var(--t),
    0 var(--t));
  animation:logo-trace 1.45s linear}
@media(min-width:48rem){.site-header .site-logo::after{left:calc(-1 * max(0px,(100vw - 1400px) / 2) - 60px)}}
/* Desktop: match the panel's longer hang below the bar and its wider slant. */
@media(min-width:64rem){.site-header .site-logo::after{--s:64px;bottom:-38.5px}}

/* @property registers the three progress values as numbers. Without it the
   browser treats a custom property as plain text, which can't be animated
   smoothly (it would just flip from 0 to 1 halfway through).
   Why animate numbers instead of the clip-path itself: Chrome hands clip-path
   animations to the graphics chip, which drew the line at a different size and
   position than the finished border, so it jumped when the animation ended.
   Animating these numbers keeps every frame drawn the same way as the border. */
@property --p1{syntax:"<number>";inherits:false;initial-value:1}
@property --p2{syntax:"<number>";inherits:false;initial-value:1}
@property --p3{syntax:"<number>";inherits:false;initial-value:1}

@keyframes logo-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* Top, then slant, then bottom. Each step's timing function applies until the
   next step: speed up along the top, steady down the slant, ease to a stop
   along the bottom. */
@keyframes logo-trace{
  0%{--p1:0;--p2:0;--p3:0;animation-timing-function:cubic-bezier(.55,0,1,1)}
  44%{--p1:1;--p2:0;--p3:0}
  62%{--p1:1;--p2:1;--p3:0;animation-timing-function:cubic-bezier(0,0,.35,1)}
  100%{--p1:1;--p2:1;--p3:1}
}

/* Visitors who ask their OS for less motion see the logo and the finished
   border straight away, with no animation. */
@media (prefers-reduced-motion:reduce){.site-header .site-logo img,.site-header .site-logo::after{animation:none}}