/* Protect the full wordmark and keep clock, date, and theme switch in one right-aligned group. */
header .wrap.head{width:min(1320px,calc(100% - 40px));max-width:1320px;margin-inline:auto;gap:clamp(8px,1vw,15px);flex-wrap:nowrap}
header .brand{flex:0 0 auto;min-width:max-content}
header .brand-name{flex:0 0 auto}
header nav{flex:1 1 auto;min-width:0;justify-content:center;gap:clamp(12px,1.5vw,22px);white-space:nowrap}
header .phone{flex:0 0 auto}
header .flip-clock,header .flip-date,header .theme-toggle{flex:0 0 auto}
header .flip-clock{margin-left:auto}
header .flip-date{margin-left:2px}
header .theme-toggle{margin-left:2px}
@media(max-width:1180px){header nav{display:none}}
@media(max-width:1040px){header .phone{display:none}}
@media(max-width:850px){header .wrap.head{width:calc(100% - 32px);gap:8px;justify-content:flex-end}header .brand{margin-right:auto}header .flip-clock{margin-left:0}}
@media(max-width:560px){header .wrap.head{width:calc(100% - 24px);gap:6px}header .brand{gap:6px}header .brand img{width:42px;height:38px}header .brand-name .city{font-size:11px;letter-spacing:.02em}header .brand-name .service{display:none}header .flip-clock-caption,header .flip-date .flip-clock-caption{display:none}header .flip-date{margin-left:0;padding-left:5px}header .theme-toggle{margin-left:0}}
@media(max-width:400px){header .wrap.head{gap:4px}header .brand img{width:34px;height:34px}header .brand-name .city{font-size:10px}header .flip-date{padding-left:3px}header .flip-date-digit{width:13px}header .flip-date-separator{font-size:9px}header .flip-digit{width:9px}header .theme-toggle{padding:5px}}


/* Mobile masthead: brand and utilities stay visible, primary nav gets its own row. */
@media(max-width:980px){
  header{height:auto;min-height:118px;padding:6px 0}
  header .wrap.head{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"brand clock date theme" "nav nav nav nav";align-items:center;justify-content:stretch;gap:4px 7px;width:calc(100% - 24px);min-height:0;padding:4px 0}
  header .brand{grid-area:brand;display:flex;align-self:center;min-width:0;margin:0;gap:7px}
  header .brand-logo-picture{display:block;flex:0 0 43px;width:43px;height:43px}
  header .brand img{display:block;width:100%;height:100%;object-fit:contain}
  header .brand-name{min-width:0;flex:0 1 auto}
  header .brand-name .city{font-size:clamp(8px,2.2vw,12px);letter-spacing:.01em;white-space:normal;line-height:1.15}
  header .brand-name .service{display:block;margin-top:2px;font-size:7px;letter-spacing:.06em;white-space:nowrap}
  header nav{grid-area:nav;display:flex!important;justify-content:space-around;gap:5px;width:100%;min-width:0;margin:0;padding:2px 0 1px;font-size:12px;white-space:nowrap}
  header nav a{flex:0 1 auto;min-width:0;padding:4px 3px;text-align:center}
  header .phone{display:none}
  header .flip-clock{grid-area:clock;justify-self:end;margin:0;padding:3px 4px}
  header .flip-date{grid-area:date;justify-self:end;margin:0;padding:0 2px}
  header .theme-toggle{grid-area:theme;justify-self:end;align-self:center;margin:0;padding:4px;min-width:31px;min-height:31px}
  header .theme-toggle-label,header .flip-clock-caption,header .flip-date .flip-clock-caption{display:none}
  header .flip-clock-display,header .flip-date-display{gap:1px}
}
@media(max-width:520px){
  header{min-height:108px;padding:4px 0}
  header .wrap.head{width:calc(100% - 18px);grid-template-columns:minmax(0,1fr) auto auto auto;gap:3px 4px}
  header .brand{gap:5px}
  header .brand-logo-picture{flex-basis:35px;width:35px;height:35px}
  header .brand-name .city{font-size:clamp(7px,2.1vw,10px);letter-spacing:0}
  header .brand-name .service{font-size:6px;letter-spacing:.035em}
  header nav{justify-content:space-between;gap:1px;font-size:11px}
  header nav a{padding-inline:2px}
  header .flip-clock{padding:2px 3px}
  header .flip-date{padding:0}
  header .flip-date-digit{width:10px;height:19px;font-size:11px;line-height:19px}
  header .flip-date-separator{font-size:8px}
  header .flip-digit{width:8px;height:16px;font-size:10px;line-height:16px}
  header .flip-digit-number{height:16px;line-height:16px}
  header .theme-toggle{min-width:25px;min-height:25px;padding:2px}
  header .theme-toggle-icon{width:20px;height:20px;font-size:11px}
}
@media(max-width:370px){
  header .wrap.head{width:calc(100% - 14px);column-gap:2px}
  header .brand-logo-picture{flex-basis:29px;width:29px;height:29px}
  header .brand-name .city{font-size:7px}
  header .brand-name .service{font-size:5px;letter-spacing:0}
  header nav{font-size:10px}
  header .flip-date-digit{width:9px;font-size:10px}
  header .flip-digit{width:7px}
}


/* FINAL mobile header layout: retain primary navigation as a visible second row. */
@media(max-width:980px){
  header{height:auto;min-height:120px;padding:5px 0}
  header .wrap.head{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"brand clock date theme" "nav nav nav nav";align-items:center;justify-content:stretch;gap:4px 7px;width:calc(100% - 24px);min-height:0;padding:3px 0}
  header .brand{grid-area:brand;display:flex;align-self:center;min-width:0;margin:0;gap:6px}
  header .brand-logo-picture{display:block;flex:0 0 40px;width:40px;height:40px}
  header .brand-logo-picture img{display:block;width:100%;height:100%;object-fit:contain}
  header .brand-name{min-width:0;flex:0 1 auto}
  header .brand-name .city{font-size:clamp(8px,2.1vw,11px);letter-spacing:0;white-space:normal;line-height:1.15}
  header .brand-name .service{display:block;margin-top:2px;font-size:7px;letter-spacing:.045em;white-space:nowrap}
  header nav{grid-area:nav!important;display:flex!important;justify-content:space-around;gap:4px;width:100%;min-width:0;margin:0;padding:2px 0;font-size:12px;white-space:nowrap}
  header nav a{display:block;min-width:0;padding:4px 3px;text-align:center}
  header .phone{display:none}
  header .flip-clock{grid-area:clock;justify-self:end;margin:0;padding:3px 4px}
  header .flip-date{grid-area:date;justify-self:end;margin:0;padding:0 2px}
  header .theme-toggle{grid-area:theme;justify-self:end;align-self:center;margin:0;padding:3px;min-width:29px;min-height:29px}
  header .theme-toggle-label,header .flip-clock-caption,header .flip-date .flip-clock-caption{display:none}
  header .flip-clock-display,header .flip-date-display{gap:1px}
}
@media(max-width:520px){
  header{min-height:108px;padding:3px 0}
  header .wrap.head{width:calc(100% - 16px);grid-template-columns:minmax(74px,1fr) auto auto auto;column-gap:4px;row-gap:2px}
  header .brand{gap:4px}
  header .brand-logo-picture{flex-basis:34px;width:34px;height:34px}
  header .brand-name .city{font-size:clamp(7px,2.05vw,9px);letter-spacing:0}
  header .brand-name .service{font-size:6px;letter-spacing:.025em}
  header nav{justify-content:space-between;gap:1px;font-size:10px}
  header nav a{padding:4px 2px}
  header .flip-clock{padding:2px}
  header .flip-date{padding:0}
  header .flip-date-digit{width:10px;height:18px;font-size:11px;line-height:18px}
  header .flip-date-separator{font-size:8px}
  header .flip-digit{width:8px;height:15px;font-size:10px;line-height:15px}
  header .flip-digit-number{height:15px;line-height:15px}
  header .theme-toggle{min-width:24px;min-height:24px;padding:1px}
  header .theme-toggle-icon{width:20px;height:20px;font-size:11px}
}
@media(max-width:370px){
  header .wrap.head{width:calc(100% - 12px);grid-template-columns:minmax(68px,1fr) auto auto auto;column-gap:2px}
  header .brand-logo-picture{flex-basis:29px;width:29px;height:29px}
  header .brand-name .city{font-size:7px}
  header .brand-name .service{font-size:5px;letter-spacing:0}
  header nav{font-size:9px}
}

/* Red gradient underline spans the complete brand lockup: emblem + wordmark. */
header .brand{
  position:relative;
  isolation:isolate;
}
header .brand::after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:-5px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent 0%,#f29aa0 8%,#d72e3d 24%,#a90d20 50%,#e64853 78%,transparent 100%);
  box-shadow:0 0 5px rgba(197,25,43,.25),0 0 11px rgba(197,25,43,.12);
  opacity:0;
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
  transition:transform .62s cubic-bezier(.2,.72,.25,1),opacity .24s ease;
}
header .brand:is(:hover,:focus-visible,:focus-within)::after{
  opacity:1;
  transform:scaleX(1);
}
@media(prefers-reduced-motion:reduce){
  header .brand::after{transition:none!important}
}