/* Compact mechanical flip clock beside the theme switch. */
.flip-clock{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto;color:#234a64;font-variant-numeric:tabular-nums}
.flip-clock-caption{font-size:8px;font-weight:800;letter-spacing:.13em;line-height:1;color:#6e8797}
.flip-clock-display{display:flex;align-items:center;gap:3px;height:31px}
.flip-clock-group{display:flex;gap:2px}
.flip-digit{position:relative;display:block;width:19px;height:27px;overflow:hidden;perspective:110px;border:1px solid #d6e5ec;border-radius:4px;background:linear-gradient(180deg,#fff 0%,#f5f9fb 49%,#eaf1f5 50%,#fff 100%);color:#17415d;box-shadow:0 2px 4px rgba(20,58,80,.1),inset 0 0 0 1px rgba(255,255,255,.75);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:19px;font-weight:800;line-height:27px;text-align:center}
.flip-digit::after{content:"";position:absolute;z-index:4;top:50%;left:0;right:0;height:1px;background:rgba(78,111,129,.22);box-shadow:0 1px 1px rgba(255,255,255,.8);pointer-events:none}
.flip-digit-face,.flip-digit-flap{position:absolute;left:0;right:0;display:block;height:50%;overflow:hidden;backface-visibility:hidden}
.flip-digit-face-top,.flip-digit-flap-top{top:0;border-radius:3px 3px 0 0}
.flip-digit-face-bottom,.flip-digit-flap-bottom{bottom:0;border-radius:0 0 3px 3px}
.flip-digit-number{position:absolute;left:0;right:0;top:0;height:27px;line-height:27px;font-variant-numeric:tabular-nums}
.flip-digit-face-bottom .flip-digit-number,.flip-digit-flap-bottom .flip-digit-number{transform:translateY(-50%)}
.flip-digit-face-top,.flip-digit-face-bottom{background:linear-gradient(180deg,#fff,#f1f6f8);}
.flip-digit-face-bottom{background:linear-gradient(180deg,#eaf0f3,#fff)}
.flip-digit-flap{z-index:3;opacity:0}
.flip-digit-flap-top{transform-origin:bottom;transform:rotateX(0deg);background:linear-gradient(180deg,#fff,#f1f6f8)}
.flip-digit-flap-bottom{transform-origin:top;transform:rotateX(90deg);background:linear-gradient(180deg,#eaf0f3,#fff)}
.flip-digit.is-flipping .flip-digit-flap-top{opacity:1;animation:flip-top-out .28s ease-in both}
.flip-digit.is-flipping .flip-digit-flap-bottom{opacity:1;animation:flip-bottom-in .3s ease-out .26s both}
.flip-clock-separator{margin:0 1px;color:#4198b5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:19px;font-weight:800;line-height:1;transform:translateY(-1px);animation:clock-colon-pulse 1s steps(2,end) infinite}
@keyframes flip-top-out{to{transform:rotateX(-90deg);opacity:.5}}
@keyframes flip-bottom-in{from{transform:rotateX(90deg);opacity:.7}to{transform:rotateX(0deg);opacity:1}}
@keyframes clock-colon-pulse{50%{opacity:.4}}
html[data-theme="dark"] .flip-clock{color:#eef5f7}
html[data-theme="dark"] .flip-clock-caption{color:#aac2cf}
html[data-theme="dark"] .flip-digit{border-color:#38576a;background:linear-gradient(180deg,#243f50 0%,#1c3443 49%,#162b38 50%,#203b4c 100%);color:#f1f7fa;box-shadow:0 2px 6px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.04)}
html[data-theme="dark"] .flip-digit::after{background:rgba(166,205,219,.24);box-shadow:0 1px 1px rgba(0,0,0,.3)}
html[data-theme="dark"] .flip-digit-face-top,html[data-theme="dark"] .flip-digit-flap-top{background:linear-gradient(180deg,#29485b,#203c4d)}
html[data-theme="dark"] .flip-digit-face-bottom,html[data-theme="dark"] .flip-digit-flap-bottom{background:linear-gradient(180deg,#172e3c,#223d4c)}
html[data-theme="dark"] .flip-clock-separator{color:#f0ad68;text-shadow:0 0 9px rgba(239,153,79,.26)}
@media(max-width:520px){.flip-clock-caption{font-size:7px;letter-spacing:.08em}.flip-clock-display{gap:2px;height:28px}.flip-digit{width:16px;height:24px;font-size:16px;line-height:24px}.flip-digit-number{height:24px;line-height:24px}.flip-clock-separator{font-size:16px}}
@media(prefers-reduced-motion:reduce){.flip-clock-separator{animation:none}.flip-digit.is-flipping .flip-digit-flap-top,.flip-digit.is-flipping .flip-digit-flap-bottom{animation:none!important;opacity:0}}

@media(max-width:520px){.head{gap:6px}.brand{gap:6px}.brand img{width:42px;height:38px}.brand-name .city{font-size:11px;letter-spacing:.02em}.brand-name .service{display:none}.flip-clock-caption{display:none}.theme-toggle{gap:0}}
@media(max-width:400px){.brand img{width:34px;height:34px}.brand-name .city{font-size:10px}.flip-clock-display{gap:1px}.flip-digit{width:12px;height:20px;font-size:13px;line-height:20px}.flip-digit-number{height:20px;line-height:20px}.flip-clock-separator{margin:0;font-size:13px}}

/* The day and month sit to the right of the theme button and use larger flip tiles. */
.flip-date{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;gap:4px;margin-left:8px;padding-left:11px;border-left:1px solid #d7e5ec;color:#214a65;font-variant-numeric:tabular-nums}
.flip-date .flip-clock-caption{color:#55839b;font-size:8px;letter-spacing:.14em}
.flip-date-display{height:36px;gap:4px}
.flip-date-digit{width:26px;height:34px;border-radius:5px;font-size:22px;line-height:34px;box-shadow:0 2px 5px rgba(20,58,80,.12),inset 0 0 0 1px rgba(255,255,255,.78)}
.flip-date-digit .flip-digit-number{height:34px;line-height:34px}
.flip-date-digit::after{height:1px;background:rgba(78,111,129,.25)}
.flip-date-separator{margin:0 1px;color:#6a9ab0;font-size:15px;animation:none}
html[data-theme="dark"] .flip-date{color:#eaf2f5;border-color:#355263}
html[data-theme="dark"] .flip-date .flip-clock-caption{color:#8ebdd0}
html[data-theme="dark"] .flip-date-separator{color:#e9ad70;text-shadow:0 0 7px rgba(239,153,79,.2)}
html[data-theme="dark"] .flip-date-digit{border-color:#38576a;background:linear-gradient(180deg,#29485b 0%,#203c4d 49%,#172e3c 50%,#223d4c 100%);color:#f3f7f8;box-shadow:0 2px 6px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.04)}
html[data-theme="dark"] .flip-date-digit .flip-digit-face-top,html[data-theme="dark"] .flip-date-digit .flip-digit-flap-top{background:linear-gradient(180deg,#29485b,#203c4d)}
html[data-theme="dark"] .flip-date-digit .flip-digit-face-bottom,html[data-theme="dark"] .flip-date-digit .flip-digit-flap-bottom{background:linear-gradient(180deg,#172e3c,#223d4c)}
@media(max-width:850px){.flip-date{margin-left:4px;padding-left:7px}}
@media(max-width:520px){.head{gap:5px}.brand{gap:6px}.brand img{width:42px;height:38px}.brand-name .city{font-size:11px;letter-spacing:.02em}.brand-name .service{display:none}.flip-clock-caption,.flip-date .flip-clock-caption{display:none}.theme-toggle{gap:0}.flip-date{gap:3px;margin-left:2px;padding-left:5px}.flip-date-display{height:27px;gap:2px}.flip-date-digit{width:18px;height:25px;border-radius:4px;font-size:17px;line-height:25px}.flip-date-digit .flip-digit-number{height:25px;line-height:25px}.flip-date-separator{font-size:12px}.flip-clock-display{height:25px}}
@media(max-width:400px){.head{gap:3px}.brand img{width:34px;height:34px}.brand-name .city{font-size:10px}.flip-date{margin-left:1px;padding-left:3px}.flip-date-display{gap:1px}.flip-date-digit{width:15px;height:21px;font-size:14px;line-height:21px}.flip-date-digit .flip-digit-number{height:21px;line-height:21px}.flip-date-separator{margin:0;font-size:10px}.flip-clock-display{gap:0}.flip-digit{width:10px;height:18px;font-size:12px;line-height:18px}.flip-digit-number{height:18px;line-height:18px}.flip-clock-separator{font-size:11px}}
@media(prefers-reduced-motion:reduce){.flip-date-separator{animation:none!important}}

/* Date is a single navy plaque (not split flip-clock tiles), grouped to the right. */
header .flip-date{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-left:5px;padding:0;border:0;color:#244b66}
header .flip-date .flip-clock-caption{display:block;color:#6e8797;font-size:7px;font-weight:800;letter-spacing:.13em;line-height:1}
header .flip-date-display{display:flex;align-items:center;justify-content:center;width:88px;min-width:88px;height:38px;padding:0 10px;border:1px solid #092b49;border-radius:8px;background:linear-gradient(145deg,#123f63 0%,#0b3151 54%,#082846 100%);color:#fff;box-shadow:0 4px 11px rgba(7,34,58,.2),inset 0 1px 0 rgba(255,255,255,.12);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:21px;font-weight:850;letter-spacing:.08em;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.2)}
html[data-theme="dark"] header .flip-date .flip-clock-caption{color:#aec3cf}
html[data-theme="dark"] header .flip-date-display{border-color:#274f6b;background:linear-gradient(145deg,#174366 0%,#103653 55%,#0a2942 100%);color:#f7fbff;box-shadow:0 4px 14px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.12)}
@media(max-width:850px){header .flip-date{margin-left:3px}}
@media(max-width:560px){header .flip-date{gap:3px;margin-left:3px}header .flip-date-display{width:76px;min-width:76px;height:31px;padding:0 7px;border-radius:7px;font-size:18px}header .flip-date .flip-clock-caption{font-size:6px}}
@media(max-width:400px){header .flip-date{margin-left:1px}header .flip-date-display{width:69px;min-width:69px;height:28px;padding:0 5px;font-size:16px}}
@media(max-width:340px){header .flip-date-display{width:64px;min-width:64px;font-size:15px}}
@media(prefers-reduced-motion:reduce){header .flip-date-display{transition:none!important}}

/* Keep the brand on its own left edge; align the time/date/theme group to the far right. */
.head{gap:clamp(10px,1.45vw,19px);flex-wrap:nowrap}
.brand{flex:0 0 auto;min-width:max-content}
.brand-name{flex:0 0 auto}
nav{flex:1 1 auto;justify-content:center;gap:clamp(12px,2vw,30px);min-width:0}
.phone{flex:0 0 auto}
.flip-clock{margin-left:auto}
.flip-date{margin-left:5px}
.theme-toggle{flex:0 0 auto;margin-left:5px}
@media(max-width:1180px){nav{display:none}}
@media(max-width:1040px){.phone{display:none}}
@media(max-width:850px){.head{justify-content:flex-end;gap:clamp(7px,1.4vw,12px)}.brand{margin-right:auto}}
@media(max-width:560px){.head{gap:6px}.brand{gap:6px}.flip-clock{margin-left:auto}.flip-date{margin-left:1px}.theme-toggle{margin-left:1px}}
@media(max-width:400px){.head{gap:3px}.flip-date{margin-left:0}.theme-toggle{margin-left:0}}
@media(max-width:360px){.brand img{width:30px;height:30px}.brand-name .city{font-size:9px}.flip-date-digit{width:13px}.flip-date-separator{font-size:9px}.flip-digit{width:9px}}
@media(max-width:330px){.brand{gap:3px}.brand-name .city{font-size:8px;letter-spacing:0}.flip-clock-display{gap:0}.flip-date-display{gap:0}.flip-date-digit{width:12px;font-size:12px}}

/* Keep the wordmark clear; reserve a flexible center lane for navigation. */
.head{width:min(1320px,calc(100% - 40px));margin-inline:auto;gap:clamp(8px,1vw,16px)}
.brand{flex:0 0 auto;min-width:max-content}
.brand-name{flex:0 0 auto}
nav{flex:1 1 auto;min-width:0;justify-content:center;gap:clamp(12px,1.5vw,24px);white-space:nowrap}
.phone{flex:0 0 auto}
.flip-clock,.flip-date,.theme-toggle{flex:0 0 auto}
@media(max-width:1180px){nav{display:none}}
@media(max-width:1020px){.phone{display:none}}
@media(max-width:850px){.head{width:calc(100% - 32px);gap:10px;justify-content:flex-end}.brand{margin-right:auto}}
@media(max-width:560px){.head{width:calc(100% - 24px);gap:6px}.brand{margin-right:auto}}
@media(max-width:400px){.head{gap:4px}}

/* Date-only flip tiles: larger type with a deep navy backing in both themes. */
.flip-date-digit{width:30px;height:40px;border-color:#092b49;border-radius:6px;background:linear-gradient(180deg,#123f63 0%,#0b3151 49%,#082846 50%,#103a5c 100%);color:#fff;font-size:26px;line-height:40px;box-shadow:0 3px 9px rgba(7,34,58,.22),inset 0 1px 0 rgba(255,255,255,.09)}
.flip-date-digit .flip-digit-number{height:40px;line-height:40px;color:#fff}
.flip-date-digit::after{background:rgba(184,216,232,.3);box-shadow:0 1px 2px rgba(0,0,0,.26)}
.flip-date-digit .flip-digit-face-top,.flip-date-digit .flip-digit-flap-top{background:linear-gradient(180deg,#16466c,#0f3b60)}
.flip-date-digit .flip-digit-face-bottom,.flip-date-digit .flip-digit-flap-bottom{background:linear-gradient(180deg,#092b49,#103a5c)}
html[data-theme="dark"] .flip-date-digit{border-color:#071e34;background:linear-gradient(180deg,#123c5d 0%,#0b2d4a 49%,#07233d 50%,#103653 100%);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] .flip-date-digit .flip-digit-face-top,html[data-theme="dark"] .flip-date-digit .flip-digit-flap-top{background:linear-gradient(180deg,#16466b,#0d3555)}
html[data-theme="dark"] .flip-date-digit .flip-digit-face-bottom,html[data-theme="dark"] .flip-date-digit .flip-digit-flap-bottom{background:linear-gradient(180deg,#082540,#103653)}
@media(max-width:520px){.flip-date-display{height:30px;gap:3px}.flip-date-digit{width:22px;height:29px;border-radius:5px;font-size:19px;line-height:29px}.flip-date-digit .flip-digit-number{height:29px;line-height:29px}}
@media(max-width:400px){.flip-date-display{height:24px;gap:2px}.flip-date-digit{width:17px;height:23px;font-size:15px;line-height:23px}.flip-date-digit .flip-digit-number{height:23px;line-height:23px}}
@media(max-width:360px){.flip-date-digit{width:15px;height:21px;font-size:14px;line-height:21px}.flip-date-digit .flip-digit-number{height:21px;line-height:21px}}