/* Flat blue hero theme. */
.site-header{background:#0e61d9}
.site-header:not(.scrolled){background:#0e61d9;color:var(--brand-cream)}
.hero-showcase{background:#0e61d9;color:var(--brand-cream)}
.hero-showcase h1 span{color:var(--brand-cream)}
.hero-showcase .hero-intro{color:var(--brand-cream)}
.hero-showcase .hero-copy>.eyebrow{color:var(--brand-cream)}

/* Override the shared entrance keyframes so they cannot reintroduce blur. */
.hero-showcase .title-line>span,.hero-showcase .hero-intro,.hero-showcase .actions{filter:none!important}
.site-header .button,.hero-showcase .button:hover{box-shadow:none}

/* A balanced three-part header with the mascot exactly on the centre line. */
.nav-shell{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:20px;align-items:center;padding-top:15px;padding-bottom:15px}
.nav-shell .wordmark{justify-self:start}
.nav-shell>.nav-cta{justify-self:end}
.header-monster {
  width: 72px;
  height: 68px;
  aspect-ratio: 1;
  pointer-events: none;
  --eye-x: 0px;
  --eye-y: 0px;
  --eye-turn: 0deg;
  --eye-width: 1;
  --light-turn: 0deg;
}
.header-monster svg { display: block; width: 100%; height: 100%; overflow: visible; }
.header-monster-body {
  transform: scaleX(1.12);
  transform-origin: 40px 40px;
}
.header-monster-glow {
  transform: rotate(var(--light-turn));
  transform-origin: 40px 40px;
}
.header-monster-gaze {
  transform: translate(var(--eye-x), var(--eye-y)) rotate(var(--eye-turn)) scaleX(var(--eye-width));
  transform-origin: 40px 38.5px;
}
.header-monster-eyes {
  fill: url(#eye-color);
  transform-box: fill-box;
  transform-origin: center;

}
/* Individual expressions sit inside the shared blink, so neither interrupts the other. */
.header-monster-eyes rect {
  transform-box: fill-box;
  transform-origin: center;
}
.header-monster-eyes rect:first-child {
  transform: translateY(var(--left-eye-lift, 0px)) rotate(var(--left-eye-tilt, 0deg)) scaleY(var(--left-eye-height, 1));
}
.header-monster-eyes rect:last-child {
  transform: translateY(var(--right-eye-lift, 0px)) rotate(var(--right-eye-tilt, 0deg)) scaleY(var(--right-eye-height, 1));
}
/* Fast lid closure, a brief contact, then a gentle release. */
.header-monster.is-blinking .header-monster-eyes {
  animation: soft-blink var(--blink-duration, 310ms) both;
}
@keyframes soft-blink {
  0% { transform: scaleY(1); animation-timing-function: cubic-bezier(.4,0,1,1); }
  23% { transform: scaleY(.07); animation-timing-function: linear; }
  32% { transform: scaleY(.07); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  100% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .header-monster-gaze, .header-monster-eyes rect { transform: none; }
  .header-monster.is-blinking .header-monster-eyes { animation: none; }
}

@media(max-width:760px){
 .nav-shell{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:8px;padding:15px 20px}
 .header-monster{width:48px;height:48px}
 .nav-shell>.nav-cta{min-height:42px;padding:10px 14px;font-size:12px;gap:12px}
}
@media(max-width:360px){.nav-shell{padding-inline:14px}.nav-shell>.nav-cta{padding-inline:10px;gap:8px}}


/* Reference yellow, with dark lettering for readable controls and cards. */
.site-header,.hero-showcase{--hero-yellow:#fde840}
.hero-showcase{--accent:#806100;--vermilion:var(--hero-yellow)}
.site-header .button,.hero-showcase .button{background:var(--hero-yellow);color:#242726}
.site-header .button:hover,.hero-showcase .button:hover{background:#fff075;color:#242726}
.site-header .button:focus-visible,.hero-showcase .button:focus-visible{outline-color:#fffdd7}
.site-header.scrolled .button:focus-visible{outline-color:#0e61d9}

/* Section links share the header with the mascot and booking action. */
:root { --header-height: 98px; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-width: 0; }
.nav-shell .header-section-nav { display: flex; position: static; flex-direction: row; align-items: center; gap: 4px; padding: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.nav-shell .header-section-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 9px; border: 0; border-radius: 0; color: var(--brand-cream); font-size: 12px; line-height: 1.3; font-weight: 500; white-space: nowrap; transition: color .2s; }
.nav-shell .header-section-nav a:hover { background: none; color: var(--brand-yellow); text-decoration: underline; text-underline-offset: 4px; }
.nav-shell .header-section-nav a:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 3px; }
.header-actions .nav-cta { flex: none; }
#workflows, #standards, #approach, #questions, #contact { scroll-margin-top: calc(var(--header-height) + 20px); }
@media (max-width: 1199px) {
  :root { --header-height: 110px; }
  .nav-shell { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 6px 12px; padding-block: 12px; }
  .nav-shell > .wordmark { grid-column: 1; grid-row: 1; }
  .nav-shell > .header-monster { grid-column: 2; grid-row: 1; width: 48px; height: 48px; }
  .header-actions { display: contents; }
  .nav-shell .header-section-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 8px; }
  .header-actions .nav-cta { grid-column: 3; grid-row: 1; justify-self: end; }
  .workflow-index { top: calc(var(--header-height) + 14px); }
}
@media (max-width: 760px) {
  .nav-shell .header-section-nav { justify-content: space-between; gap: 4px; }
  .nav-shell .header-section-nav a { font-size: 11px; padding-inline: 9px; }
  .header-actions .nav-cta { min-height: 42px; padding: 10px 14px; font-size: 12px; gap: 12px; }
  .workflow-chapter { scroll-margin-top: calc(var(--header-height) + 116px); }
}
@media (max-width: 360px) { .header-actions .nav-cta { padding-inline: 10px; gap: 8px; } }