@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/manrope-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/manrope-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/urbanist-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/urbanist-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/urbanist-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/urbanist-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/urbanist-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/urbanist-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/urbanist-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/urbanist-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --peach-light:#fef5ed;--peach:#fce8d5;--peach-mid:#f5d5b8;
  --coral:#e8734a;--coral-dark:#d4613c;--coral-deep:#c0502d;
  --cyan:#4fc3d4;--cyan-light:#7dd8e4;--cyan-pale:#d4f1f6;--cyan-dark:#2ba5b8;
  --navy:#1e3a5f;--navy-dark:#152c49;--navy-light:#2d5280;
  --cream:#fffaf5;--white:#fff;--warm-gray:#8a7e76;--text:#2c1810;--text-soft:#5c4a3e;
  --border:#eaddcf;--f-head:'Urbanist',system-ui,sans-serif;--f-body:'Manrope',system-ui,sans-serif;
  --r:14px;--r-lg:22px;--r-pill:999px;--maxw:1120px;--ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);color:var(--text);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.18;color:var(--navy);letter-spacing:-.02em}
a{color:var(--coral-dark);text-decoration:none;transition:color .2s}
a:hover{color:var(--coral-deep)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--cyan-dark);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;position:relative;z-index:1}
.bg-deco{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 60% 36% at 50% 0%,rgba(79,195,212,.07),transparent 60%),
  radial-gradient(ellipse 46% 46% at 92% 84%,rgba(232,115,74,.06),transparent 55%)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:100}
.skip-link:focus{left:0;color:#fff}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,250,245,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--border)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:800;color:var(--navy);font-size:1.02rem}
.brand img{width:40px;height:40px;border-radius:9px}
.brand:hover{color:var(--coral-dark)}
.primary-nav{display:flex;align-items:center;gap:18px}
.primary-nav ul{display:flex;gap:6px;list-style:none;flex-wrap:wrap}
.primary-nav a{font-family:var(--f-head);font-weight:600;font-size:.92rem;color:var(--navy);padding:8px 12px;border-radius:var(--r-pill)}
.primary-nav a:hover,.primary-nav a[aria-current=page]{background:var(--cyan-pale);color:var(--navy)}
.lang-toggle{border:2px solid var(--peach-mid);border-radius:var(--r-pill);padding:6px 14px;font-size:.85rem;color:var(--navy)!important;font-weight:600}
.lang-toggle:hover{border-color:var(--cyan);background:var(--cyan-pale)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle-bar{width:26px;height:3px;background:var(--navy);border-radius:3px;transition:.25s}
.nav-toggle[aria-expanded=true] .nav-toggle-bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded=true] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] .nav-toggle-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-head);font-weight:700;font-size:.95rem;padding:13px 26px;border-radius:var(--r-pill);border:none;cursor:pointer;transition:.25s var(--ease)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:linear-gradient(135deg,var(--coral),var(--coral-dark));color:#fff;box-shadow:0 4px 18px rgba(232,115,74,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(232,115,74,.38);color:#fff}
.btn-ghost{background:var(--white);color:var(--navy);border:2px solid var(--peach-mid)}
.btn-ghost:hover{border-color:var(--cyan);background:var(--cyan-pale);transform:translateY(-2px);color:var(--navy)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
.center .cta-row{justify-content:center}
/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,250,245,.97) 0%,rgba(255,250,245,.9) 42%,rgba(255,250,245,.55) 70%,rgba(30,58,95,.2) 100%)}
.hero-inner{position:relative;z-index:2;padding:64px 20px 56px;max-width:680px;margin-left:max(20px,calc((100vw - var(--maxw))/2))}
.hero h1{font-size:clamp(2rem,5.4vw,3.1rem);font-weight:800;margin:16px 0 14px}
.hero .pop{color:var(--coral-dark)}.hero .pop2{color:var(--cyan-dark)}
.lead{font-size:clamp(1.02rem,2vw,1.18rem);color:var(--text-soft);max-width:60ch}
.lead-sm{font-size:1.05rem;color:var(--text-soft);max-width:62ch;margin:0 auto}
.badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--coral),var(--coral-dark));color:#fff;padding:7px 18px;border-radius:var(--r-pill);font-family:var(--f-head);font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 4px 14px rgba(232,115,74,.3)}
.badge .dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-facts li{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:12px 18px;min-width:140px}
.hero-facts strong{display:block;font-family:var(--f-head);color:var(--navy);font-size:1.02rem}
.hero-facts span{font-size:.85rem;color:var(--text-soft)}
/* sections */
.section{padding:54px 0}
.section.alt{background:var(--peach-light)}
.section-title{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:800;text-align:center;margin-bottom:8px}
.section-title.left{text-align:left}
.center{text-align:center}
.narrow{max-width:760px;margin:0 auto}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.prose p{margin-bottom:16px;color:var(--text-soft)}
.prose.narrow p{font-size:1.05rem}
.rounded{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:0 8px 28px rgba(30,58,95,.08)}
.rounded img{border-radius:var(--r-lg)}
/* feature grid */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.feature-grid.three{grid-template-columns:repeat(3,1fr)}
.feature{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 22px;transition:.25s var(--ease)}
.feature:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(30,58,95,.09);border-color:var(--cyan-light)}
.feature .fi{font-size:26px;display:block;margin-bottom:8px}
.feature h3{font-size:1.05rem;margin-bottom:6px}
.feature p{font-size:.93rem;color:var(--text-soft)}
/* town chips + loc cards */
.town-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0}
.town-chip{background:var(--white);border:2px solid var(--peach-mid);border-radius:var(--r-pill);padding:9px 20px;font-family:var(--f-head);font-weight:700;color:var(--navy)}
.town-chip:hover{border-color:var(--cyan);background:var(--cyan-pale);color:var(--navy)}
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.loc-card{display:block;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;transition:.25s var(--ease)}
.loc-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(30,58,95,.1);border-color:var(--cyan-light)}
.loc-card h3{font-size:1.18rem;margin-bottom:8px}
.loc-card p{font-size:.92rem;color:var(--text-soft);margin-bottom:10px}
.loc-more{font-family:var(--f-head);font-weight:700;color:var(--coral-dark);font-size:.9rem}
.reach-card,.contact-card,.note-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px}
.note-card{max-width:760px;margin:0 auto;border-left:5px solid var(--cyan)}
.reach-card h2,.contact-card h2,.note-card h2{font-size:1.2rem;margin-bottom:10px}
.reach-card p{color:var(--text-soft);margin-bottom:12px}
.check-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:10px}
.check-list li{position:relative;padding-left:26px;color:var(--text-soft);font-size:.95rem}
.check-list li::before{content:'';position:absolute;left:0;top:6px;width:14px;height:8px;border-left:3px solid var(--cyan-dark);border-bottom:3px solid var(--cyan-dark);transform:rotate(-45deg)}
.contact-list{list-style:none;margin:6px 0 18px}
.contact-list li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--border);font-size:.96rem}
.contact-list li span{color:var(--warm-gray);font-weight:600}
/* page header */
.page-header{background:linear-gradient(135deg,var(--navy),var(--navy-light));color:#fff;padding:48px 0 40px;position:relative;overflow:hidden}
.page-header h1{color:#fff;font-size:clamp(1.7rem,4.4vw,2.5rem);margin-top:6px}
.page-header .lead{color:rgba(255,255,255,.88)}
.page-header.with-img .ph-media{position:absolute;inset:0;z-index:0}
.page-header.with-img .ph-media img{width:100%;height:100%;object-fit:cover}
.page-header.with-img .ph-media::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(21,44,73,.93),rgba(30,58,95,.7))}
.page-header.with-img .wrap{position:relative;z-index:2}
.crumbs{font-size:.85rem;color:rgba(255,255,255,.85)}
.crumbs a{color:#fff;text-decoration:underline}
.crumbs span{margin:0 6px;opacity:.6}
/* app */
.app-section{text-align:center}
.app-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;text-align:center;max-width:640px;margin:0 auto;border-top:5px solid var(--cyan)}
.app-card h2{font-size:1.3rem;margin-bottom:16px}
.app-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.app-badge{display:inline-flex;align-items:center;background:var(--navy-dark);color:#fff!important;padding:12px 22px;border-radius:12px;font-family:var(--f-head);font-weight:700;font-size:.92rem;border:1px solid rgba(255,255,255,.12)}
.app-badge:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(30,58,95,.22)}
/* map */
.map-wrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);height:340px;box-shadow:0 6px 22px rgba(30,58,95,.07)}
.map-wrap iframe{width:100%;height:100%;border:0}
/* faq */
.faq-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.faq-item[open]{border-color:var(--cyan-light);box-shadow:0 6px 20px rgba(30,58,95,.07)}
.faq-question{cursor:pointer;list-style:none;padding:18px 50px 18px 22px;font-family:var(--f-head);font-weight:700;color:var(--navy);position:relative;font-size:1.02rem}
.faq-question::-webkit-details-marker{display:none}
.faq-question::after{content:'+';position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--coral-dark);font-weight:400}
.faq-item[open] .faq-question::after{content:'\2212'}
.faq-answer{padding:0 22px 18px}
.faq-answer p{color:var(--text-soft);margin-bottom:10px}
/* footer */
.site-footer{background:var(--navy);color:rgba(255,255,255,.82);padding:48px 0 24px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:30px}
.footer-brand img{width:60px;height:60px;border-radius:12px;background:#fff;padding:5px}
.footer-brand .badge-soft{display:inline-block;margin:12px 0 8px;font-family:var(--f-head);font-weight:700;font-size:.82rem;color:var(--cyan-light);text-transform:uppercase;letter-spacing:.04em}
.footer-brand .muted,.muted{color:rgba(255,255,255,.6);font-size:.85rem}
.footer-h{color:#fff;font-size:1rem;margin-bottom:12px}
.footer-links{list-style:none}
.footer-links li{margin-bottom:8px}
.footer-links a,.site-footer a{color:rgba(255,255,255,.82)}
.footer-links a:hover,.site-footer a:hover{color:var(--cyan-light)}
.site-footer address{font-style:normal;font-size:.9rem;line-height:1.9}
/* Videos page. Every clip is a vertical 9:16 Short, so the grid is portrait and the
   aspect-ratio is declared on the frame rather than left to the image, which keeps
   the row heights identical and reserves the space before the poster decodes. */
.vid-head{margin-bottom:22px}
.vid-head h2{margin-bottom:6px}
.vid-handle{font-family:var(--f-body);font-weight:600;font-size:.9rem;color:var(--coral-deep);vertical-align:middle;margin-left:6px}
.vid-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px 18px;padding:0;margin:0}
.vid-card{margin:0}
.vid-frame{position:relative;width:100%;aspect-ratio:9/16;border-radius:var(--r-md,14px);overflow:hidden;background:var(--navy);border:1px solid var(--border)}
.vid-play{display:block;position:relative;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.vid-play picture,.vid-play img{display:block;width:100%;height:100%;object-fit:cover}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-cue{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(232,115,74,.94);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.34);transition:transform .18s ease,background .18s ease}
.vid-cue svg{width:26px;height:26px;margin-left:3px}
.vid-cue-tt{background:rgba(30,58,95,.94)}
.vid-play:hover .vid-cue,.vid-play:focus-visible .vid-cue{transform:translate(-50%,-50%) scale(1.1);background:var(--coral-deep)}
.vid-play:focus-visible{outline:3px solid var(--cyan-dark);outline-offset:3px}
/* Captions are whatever the owner typed on the platform, so they run from three
   words to five lines. Clamping to three keeps the grid rows even; the full text
   stays in the link's aria-label, so nothing is lost to a screen reader. */
.vid-title{font-family:var(--f-head);font-weight:700;font-size:.9rem;line-height:1.35;margin:10px 0 2px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vid-meta{font-size:.78rem;color:var(--text-soft);margin:0}
.vid-more{margin-top:26px}
.vid-note{margin-top:18px;font-size:.85rem;color:var(--text-soft)}
/* A playing card is no longer a button, so the hover cue must not linger over it. */
.vid-frame.is-playing .vid-play{display:none}
@media(max-width:560px){.vid-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px 12px}.vid-cue{width:44px;height:44px}.vid-cue svg{width:21px;height:21px}}
body.hc .vid-frame{border:2px solid #000}
body.hc .vid-cue{background:#000;color:#fff;border:2px solid #fff}
body.hc .vid-play:hover .vid-cue,body.hc .vid-play:focus-visible .vid-cue{background:#fff;color:#000;border-color:#000}
body.rm .vid-play:hover .vid-cue,body.rm .vid-play:focus-visible .vid-cue{transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:reduce){.vid-play:hover .vid-cue,.vid-play:focus-visible .vid-cue{transform:translate(-50%,-50%)}}
@media print{.vid-cue{display:none}.vid-grid{grid-template-columns:repeat(4,1fr)}}
/* Footer social row. The per-network hue is set here, never inline: style-src is
   'self' with no 'unsafe-inline', so an inline custom property would be dropped and
   all six icons would render identically. Hues are lifted from the official brand
   colours to clear WCAG 1.4.11's 3:1 floor against --navy #1e3a5f -- raw #1877f2,
   #ff0000 and #ff1a1a measure 2.72, 2.88 and 2.97:1 and all fail. */
.fs-facebook{--net:#8ab4f8}
.fs-youtube{--net:#ff6b6b}
.fs-tiktok{--net:#25f4ee}
.fs-whatsapp{--net:#4ade80}
.fs-yelp{--net:#ff5c5c}
.fs-google{--net:#8ab4f8}
.footer-social-wrap{margin-top:18px}
.footer-social-h{font-family:var(--f-head);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.62);margin:0 0 10px}
.footer-social{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.footer-social li{margin:0}
/* 44px is the touch-target floor, kept even though the glyph is 20px. The rule is
   written as '.footer-social a' (0,1,1) and placed AFTER '.site-footer a' (0,1,1),
   which it ties with -- source order is what wins the tie, so this block must stay
   below the .site-footer rules above. */
.footer-social a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:var(--net,#fff);transition:background .18s ease,border-color .18s ease,transform .18s ease}
.footer-social a svg{width:20px;height:20px;display:block}
/* (0,2,1), same as '.site-footer a:hover', so again source order decides and this
   must stay after it. Without this the generic footer hover would repaint every
   brand glyph cyan. */
.footer-social a:hover,.footer-social a:focus-visible{background:rgba(255,255,255,.14);border-color:var(--net,#fff);color:var(--net,#fff);transform:translateY(-2px)}
.footer-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;font-size:.82rem;color:rgba(255,255,255,.55);text-align:center}
/* responsive */
@media(max-width:860px){
  .nav-toggle{display:flex}
  .primary-nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--cream);border-bottom:1px solid var(--border);padding:10px 20px 18px;transform:translateY(-130%);transition:transform .3s var(--ease);box-shadow:0 14px 30px rgba(30,58,95,.12)}
  .primary-nav.open{transform:translateY(0)}
  .primary-nav ul{flex-direction:column;gap:2px}
  .primary-nav a{display:block;padding:12px 10px}
  .lang-toggle{margin-top:10px;text-align:center}
  .two-col{grid-template-columns:1fr;gap:24px}
  .feature-grid,.feature-grid.three,.loc-grid{grid-template-columns:1fr 1fr}
  .check-list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-inner{margin-left:auto}
}
@media(max-width:540px){
  .feature-grid,.feature-grid.three,.loc-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .contact-list li{flex-direction:column;gap:2px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* legal */
.legal-links{display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:center;margin-bottom:12px}
.legal-links a{color:rgba(255,255,255,.78);font-size:.82rem}
.legal-links a:hover{color:var(--cyan-light)}
.legal-links span{opacity:.4}
.legal-prose h2{font-size:1.12rem;margin:22px 0 8px}
.legal-prose h3{font-size:1.02rem;margin:18px 0 6px}
.legal-prose p{color:var(--text-soft);margin-bottom:12px}
.img-note{font-size:.78rem;color:var(--warm-gray);text-align:center;margin-top:6px;font-style:italic}
/* floating accessibility + contact UI */
.fab-stack{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fab{width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 18px rgba(30,58,95,.28);transition:transform .2s}
.fab:hover{transform:translateY(-2px) scale(1.05)}
.fab svg{width:24px;height:24px}
.fab-msg{background:linear-gradient(135deg,var(--coral),var(--coral-dark));order:3}
.fab-contrast{background:var(--navy);order:2}
.fab-a11y{background:var(--cyan-dark);order:1}
/* Fixed to the viewport and height capped, so the panel can never grow up
   behind the sticky header or off the top of the screen. It sits clear of the
   3 FABs below it (3x52 + 2x10 gap + 16 offset = 192) and leaves 84px of
   headroom for the header. Anything taller scrolls inside the panel. */
.msg-panel{position:fixed;right:16px;bottom:204px;z-index:70;width:320px;max-width:calc(100vw - 32px);max-height:calc(100vh - 288px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;box-shadow:0 16px 40px rgba(30,58,95,.24);display:none}
@supports (max-height:100dvh){.msg-panel{max-height:calc(100dvh - 288px)}}
.msg-panel.open{display:block}
.msg-panel .msg-title{font-family:var(--f-head);font-weight:700;color:var(--navy);margin-bottom:10px}
.msg-panel a{display:block;padding:9px 10px;border-radius:10px;color:var(--navy);font-weight:600;font-size:.92rem}
.msg-panel a:hover{background:var(--cyan-pale)}
.a11y-dialog{border:none;border-radius:var(--r-lg);padding:0;max-width:360px;width:92vw;box-shadow:0 24px 60px rgba(0,0,0,.32);color:var(--text)}
.a11y-dialog::backdrop{background:rgba(21,44,73,.45)}
.a11y-head{display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff;padding:15px 18px}
.a11y-head h2{color:#fff;font-size:1.1rem}
.a11y-close{background:none;border:none;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;padding:0 4px}
.a11y-group{padding:16px 18px 4px}
.a11y-label{display:block;font-family:var(--f-head);font-weight:700;color:var(--navy);margin-bottom:8px;font-size:.9rem}
.a11y-btns{display:flex;gap:8px}
.a11y-btns button{flex:1;padding:10px;border:2px solid var(--peach-mid);background:var(--white);border-radius:10px;font-family:var(--f-head);font-weight:700;color:var(--navy);cursor:pointer}
.a11y-btns button:hover{border-color:var(--cyan);background:var(--cyan-pale)}
.a11y-toggle{display:flex;justify-content:space-between;align-items:center;width:calc(100% - 36px);margin:8px 18px;padding:11px 14px;border:2px solid var(--peach-mid);background:var(--white);border-radius:12px;font-family:var(--f-head);font-weight:600;color:var(--navy);cursor:pointer}
.a11y-switch{width:40px;height:22px;border-radius:999px;background:var(--peach-mid);position:relative;transition:.2s;flex:0 0 auto}
.a11y-switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.a11y-toggle[aria-pressed=true]{border-color:var(--cyan-dark)}
.a11y-toggle[aria-pressed=true] .a11y-switch{background:var(--cyan-dark)}
.a11y-toggle[aria-pressed=true] .a11y-switch::after{transform:translateX(18px)}
.a11y-reset{display:block;margin:8px 18px 18px;padding:10px;width:calc(100% - 36px);border:none;background:var(--peach);color:var(--navy);border-radius:10px;font-family:var(--f-head);font-weight:700;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.msg-form{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.msg-form input,.msg-form textarea{width:100%;padding:9px 11px;border:1.5px solid var(--peach-mid);border-radius:10px;font-family:var(--f-body);font-size:.92rem;color:var(--text);background:var(--cream)}
.msg-form input:focus,.msg-form textarea:focus{border-color:var(--cyan);outline:2px solid var(--cyan-pale)}
.msg-send{background:linear-gradient(135deg,var(--coral),var(--coral-dark));color:#fff;border:none;border-radius:var(--r-pill);padding:10px;font-family:var(--f-head);font-weight:700;cursor:pointer}
.msg-send:hover{filter:brightness(1.05)}
.msg-send:disabled{opacity:.6;cursor:default}
.msg-status{font-size:.84rem;min-height:1em;margin:0}
.msg-status.ok{color:var(--cyan-dark);font-weight:700}
.msg-status.err{color:var(--coral-deep);font-weight:700}
.msg-quick{border-top:1px solid var(--border);padding-top:10px;display:flex;flex-direction:column;gap:2px}
.reading-guide{position:fixed;left:0;right:0;top:50%;height:42px;margin-top:-21px;background:rgba(30,58,95,.10);border-top:2px solid var(--coral);border-bottom:2px solid var(--coral);pointer-events:none;z-index:55;display:none}
body.rg .reading-guide{display:block}
body.legible,body.legible p,body.legible li,body.legible a,body.legible h1,body.legible h2,body.legible h3,body.legible h4,body.legible span,body.legible label,body.legible input,body.legible textarea,body.legible button,body.legible .brand-name{font-family:Verdana,Tahoma,'Segoe UI',Arial,sans-serif!important;letter-spacing:.02em}
body.legible p,body.legible li{line-height:1.9;word-spacing:.08em}
html.fs-1{font-size:14px}html.fs-3{font-size:18px}html.fs-4{font-size:20px}
body.rm *{animation:none!important;transition:none!important}
body.ul a{text-decoration:underline!important}
/* The three accessibility modes all reach into 'a', and each one breaks the icon row
   in a different way if left alone. Underline-links would draw a stray rule under a
   bare glyph; high contrast repaints links and redefines --navy out from under the
   hue calculations; reduce-motion kills the transition but not the transform.
   Each override outranks its generic rule on specificity, not on !important alone. */
body.ul .footer-social a,body.hc .footer-social a{text-decoration:none!important}
body.hc .footer-social a{background:#000;border:2px solid #fff;color:#fff}
body.hc .footer-social a:hover,body.hc .footer-social a:focus-visible{background:#fff;color:#000;border-color:#000}
body.rm .footer-social a:hover,body.rm .footer-social a:focus-visible{transform:none}
@media(prefers-reduced-motion:reduce){.footer-social a:hover,.footer-social a:focus-visible{transform:none}}
body.hc{--cream:#fff;--white:#fff;--peach-light:#fff;--peach:#e7e7e7;--peach-mid:#000;--text:#000;--text-soft:#161616;--navy:#06203f;--navy-dark:#000;--coral:#a8390f;--coral-dark:#8a2f0c;--coral-deep:#6f250a;--cyan-dark:#0a5f70;--cyan-pale:#e6f6f9;--border:#000;--warm-gray:#262626}
body.hc a{text-decoration:underline}
body.hc .feature,body.hc .loc-card,body.hc .reach-card,body.hc .contact-card,body.hc .note-card,body.hc .hero-facts li,body.hc .faq-item,body.hc .app-card{border:2px solid #000}
body.hc .site-header{background:#fff}
body.hc .section.alt{background:#f1f1f1}
body.hc .hero-media::after{background:rgba(255,255,255,.95)}
@media print{.site-header,.nav-toggle,.map-wrap,.bg-deco,.hero-media,.fab-stack,.a11y-dialog{display:none!important}body{background:#fff}}

/* ===== hero stat tiles (shared device with tfhandywash.com) ===== */
.stat-tiles{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 6px}
.stat-tiles li{flex:1 1 120px;min-width:110px;background:rgba(255,255,255,.86);border:2px solid var(--peach-mid);border-radius:var(--r);padding:12px 14px;text-align:center}
.stat-v{display:block;font-family:var(--f-head);font-weight:800;font-size:1.6rem;color:var(--navy);line-height:1.1}
.stat-s{font-size:.85rem;font-weight:700;color:var(--coral-dark);margin-left:2px}
.stat-l{display:block;font-size:.78rem;color:var(--text-soft);margin-top:3px;letter-spacing:.02em}

/* ===== pricing ===== */
.price-group{font-family:var(--f-head);font-size:1.25rem;color:var(--navy);margin:26px 0 14px;text-align:center}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.price-grid.two{max-width:640px;margin:0 auto}
.price-card{position:relative;background:var(--white);border:2px solid var(--border);border-radius:var(--r-lg);padding:24px 20px;text-align:center}
.price-card.featured{border-color:var(--coral);box-shadow:0 10px 30px rgba(232,115,74,.16)}
.price-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--coral),var(--coral-dark));color:#fff;font-family:var(--f-head);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 14px;border-radius:var(--r-pill)}
.price-card h3{font-size:1.15rem;color:var(--navy)}
.price-sub{font-size:.85rem;color:var(--text-soft);margin-top:3px}
.price-amt{font-family:var(--f-head);font-weight:800;font-size:2.3rem;color:var(--coral-dark);margin:12px 0 2px;line-height:1}
.price-unit{font-size:.8rem;color:var(--text-soft)}
.price-notes{list-style:none;margin-top:14px;padding-top:13px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.price-notes li{font-size:.86rem;color:var(--text-soft)}
.price-notes li::before{content:"\2713";color:var(--cyan-dark);font-weight:700;margin-right:7px}
.price-foot{margin-top:20px;text-align:center;font-size:.92rem;color:var(--text-soft);max-width:760px;margin-inline:auto}
.spec-table{width:100%;border-collapse:collapse;margin-top:10px}
.spec-table th,.spec-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);font-size:.93rem}
.spec-table th{font-family:var(--f-head);font-weight:600;color:var(--navy)}
.spec-table td{color:var(--text-soft);text-align:right;font-variant-numeric:tabular-nums}

/* ===== cost calculator ===== */
.calc{background:var(--white);border:2px solid var(--peach-mid);border-radius:var(--r-lg);padding:26px}
.calc h3{font-size:1.2rem;margin-bottom:16px;text-align:center}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.calc-field label{display:block;font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:5px}
.calc-field select{width:100%;padding:10px 12px;border:2px solid var(--border);border-radius:10px;font:inherit;font-size:.92rem;background:var(--cream);color:var(--text)}
.calc-out{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding:16px 18px;background:var(--cyan-pale);border-radius:var(--r);font-family:var(--f-head)}
.calc-out span{font-weight:600;color:var(--navy)}
.calc-out strong{font-size:1.9rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.calc-note{margin-top:10px;font-size:.82rem;color:var(--text-soft);text-align:center}

/* ===== Speed Queen location code ===== */
.loc-code{margin-top:20px;background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:20px 22px}
.loc-code-label{font-family:var(--f-head);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-light)}
.loc-code-value{margin:6px 0 8px}
.loc-code-value code{font-family:var(--f-head);font-weight:800;font-size:2rem;letter-spacing:.14em;color:#fff}
.loc-code-note{font-size:.86rem;color:rgba(255,255,255,.82);line-height:1.55}

/* ===== machine problem / payment issue ===== */
.issue-card{background:var(--white);border:2px solid var(--coral);border-radius:var(--r-lg);padding:28px 26px;box-shadow:0 10px 34px rgba(232,115,74,.14)}
.issue-card h2{font-size:1.5rem;color:var(--coral-deep)}
.issue-lead{margin-top:8px;color:var(--text-soft)}
.issue-contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:18px 0}
.issue-contact{display:flex;align-items:center;gap:12px;background:var(--peach-light);border:2px solid var(--peach-mid);border-radius:var(--r);padding:13px 15px;color:var(--navy)!important;font-weight:600;word-break:break-word}
.issue-contact:hover{border-color:var(--coral);background:var(--white)}
.issue-ico{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;background:var(--cyan-dark);color:#fff;border-radius:50%;font-size:1rem}
.issue-k{display:block;font-family:var(--f-head);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.issue-include{background:var(--cyan-pale);border-radius:var(--r);padding:15px 18px}
.issue-list{margin:6px 0 0 20px;display:flex;flex-direction:column;gap:3px;color:var(--navy);font-weight:600}
.issue-sla{display:flex;align-items:center;gap:11px;margin-top:16px;font-family:var(--f-head);font-weight:700;color:var(--navy)}
.issue-sla-badge{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;background:linear-gradient(135deg,var(--coral),var(--coral-dark));color:#fff;border-radius:50%;font-size:.9rem}
.issue-refund{margin-top:10px;font-size:.9rem;color:var(--text-soft)}
.issue-cta{margin-top:18px}
.issue-thanks{margin-top:14px;font-family:var(--f-head);font-weight:700;color:var(--cyan-dark);text-align:center}
.issue-split{align-items:start}
.poster-fig{margin:0}
.poster-fig img{width:100%;height:auto;border-radius:var(--r-lg);border:2px solid var(--peach-mid);display:block}
.poster-fig figcaption{margin-top:9px;font-size:.84rem;color:var(--text-soft);text-align:center}

/* ===== google review ask ===== */
.review-card{display:flex;align-items:center;gap:26px;background:var(--white);border:2px solid var(--cyan);border-radius:var(--r-lg);padding:26px}
.review-qr{flex:0 0 auto;width:170px;padding:10px;background:#fff;border:2px solid var(--navy);border-radius:var(--r)}
.review-qr img{display:block;width:100%;height:auto}
.review-txt h2{font-size:1.5rem;color:var(--navy)}
.review-txt p{margin-top:9px}
.review-note{font-size:.85rem;color:var(--text-soft)}
.review-qr-cap{display:block;margin-top:7px;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);text-align:center}
@media(max-width:620px){.review-card{flex-direction:column;text-align:center;padding:22px 18px}.review-qr{width:190px}}

/* loud homepage variant */
.review-section{padding-top:6px}
.review-band{gap:34px;padding:38px 40px;border:none;background:linear-gradient(135deg,var(--coral),var(--coral-deep));box-shadow:0 16px 44px rgba(232,115,74,.28)}
.review-band .review-qr{width:210px;background:#fff;border-color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.review-band .review-qr-cap{color:var(--coral-deep)}
.review-eyebrow{font-family:var(--f-head);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.review-band h2{color:#fff;font-size:2.1rem;margin-top:5px}
.review-band p{color:rgba(255,255,255,.94)}
.review-band .review-note{color:rgba(255,255,255,.78)}
.btn-onband{background:#fff;color:var(--coral-deep);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.btn-onband:hover{background:var(--cream);color:var(--coral-deep);transform:translateY(-2px)}
.btn-onband svg{width:19px;height:19px}
@media(max-width:760px){.review-band{flex-direction:column;text-align:center;padding:30px 20px;gap:22px}.review-band h2{font-size:1.7rem}}

body.hc .review-card,body.hc .review-qr{border:2px solid #000}
body.hc .review-band{background:#000;color:#fff}
body.hc .btn-onband{background:#fff;color:#000;border:2px solid #000}
@media print{.review-card{border:2px solid #000}.review-band{background:#fff;color:#000;box-shadow:none;border:2px solid #000}.review-band h2,.review-band p{color:#000}}

/* ===== gallery ===== */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.gal-item{margin:0;overflow:hidden;border-radius:var(--r-lg);border:2px solid var(--border);background:var(--white)}
.gal-item img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.gal-item:hover img{transform:scale(1.04)}

/* ===== full-screen photo viewer ===== */
/* The trigger. A bare button reset so wrapping a <picture> changes nothing
   about how the photo already lays out in its container. */
.lb-open{display:block;position:relative;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:zoom-in;-webkit-appearance:none;appearance:none;line-height:0}
.lb-open:focus-visible{outline:3px solid var(--coral);outline-offset:-3px}
.lb-cue{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(21,44,73,.72);display:grid;place-items:center;opacity:0;transform:scale(.86);transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none}
.lb-cue svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.lb-open:hover .lb-cue,.lb-open:focus-visible .lb-cue{opacity:1;transform:scale(1)}
@media (hover:none){.lb-cue{opacity:1;transform:scale(1)}}

/* The viewer itself. A native <dialog> opened with showModal(), so focus
   trapping, Escape, and stacking above the sticky header and the FAB stack all
   come from the browser instead of a z-index fight. */
.lb{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:transparent;overflow:hidden;color:#fff}
/* Opaque, not a wash: at 93% the coral help bubbles and headings behind it
   still showed through and read as a rendering fault rather than a scrim. */
.lb::backdrop{background:#0a1422}
/* top/bottom rather than inset + padding, so the stage has a definite height.
   A percentage max-height on a child of an auto-sized grid track never
   resolves, which let portrait shots like the in-store poster render at full
   natural height and run off the bottom of the screen. Flex plus a stage with
   real top/bottom edges makes max-height:100% resolve; display:contents takes
   the <picture> wrapper out of the layout so the <img> is the flex item. The
   calc() is a second, independent guard on the same constraint. */
.lb-stage{position:absolute;left:0;right:0;top:56px;bottom:96px;display:flex;align-items:center;justify-content:center;padding:0 12px}
.lb-stage picture{display:contents}
.lb-stage img{max-width:min(100%,1600px);max-height:min(100%,calc(100dvh - 152px));width:auto;height:auto;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.04);transition:opacity .18s var(--ease)}
.lb.is-loading .lb-stage img{opacity:.35}
.lb-cap{position:absolute;left:0;right:0;bottom:52px;margin:0;padding:0 64px;text-align:center;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.9);max-height:3.9em;overflow-y:auto;overscroll-behavior:contain}
.lb-bar{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;justify-content:center;gap:18px}
.lb-count{font-size:.9rem;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.82);min-width:5.5ch;text-align:center}
.lb-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;padding:0;transition:background .18s var(--ease),border-color .18s var(--ease)}
.lb-btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
.lb-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.lb-btn[disabled]{opacity:.3;cursor:default}
.lb-btn[disabled]:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb-close{position:absolute;top:12px;right:12px;z-index:2}
/* Big side arrows on pointer screens; the bottom bar carries them on phones. */
.lb-side{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;z-index:2}
.lb-side.lb-prev{left:12px}
.lb-side.lb-next{right:12px}
@media (max-width:719px){.lb-side{display:none}.lb-stage{top:52px;bottom:104px;padding:0 6px}.lb-stage img{max-height:min(100%,calc(100dvh - 156px))}.lb-cap{bottom:56px;padding:0 14px;font-size:.84rem}.lb-bar{height:56px;gap:14px}}
body.hc .lb::backdrop{background:#000}
body.hc .lb-btn{background:#000;border:2px solid #fff}
body.hc .lb-cap,body.hc .lb-count{color:#fff}
body.hc .lb-cue{background:#000;border:2px solid #fff}
body.rm .lb-cue,body.rm .lb-btn,body.rm .lb-stage img{transition:none}
@media (prefers-reduced-motion:reduce){.lb-cue,.lb-btn,.lb-stage img{transition:none}}
@media print{.lb,.lb-cue{display:none!important}.lb-open{cursor:auto}}

/* ===== sister location ===== */
.sister-card{background:linear-gradient(135deg,var(--navy),var(--navy-light));color:#fff;border-radius:var(--r-lg);padding:32px 30px;text-align:center}
.sister-eyebrow{font-family:var(--f-head);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-light)}
.sister-card h2{color:#fff;margin:8px 0 12px;font-size:1.6rem}
.sister-card p{color:rgba(255,255,255,.88)}
.sister-codes{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:20px 0}
.sister-codes p{display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:12px 20px}
.sister-codes span{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan-light)}
.sister-codes code{font-family:var(--f-head);font-weight:800;font-size:1.3rem;letter-spacing:.1em;color:#fff}
.sister-card .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.sister-card .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ===== contact bubble: machine issue block ===== */
/* Title stays put while the panel body scrolls, so you always know what is open. */
.msg-panel .msg-title{position:sticky;top:-16px;margin:-16px -16px 10px;padding:16px 16px 10px;background:var(--white);border-radius:var(--r-lg) var(--r-lg) 0 0;z-index:2}
.msg-issue{background:var(--peach-light);border:1px solid var(--peach-mid);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
.msg-issue-h{font-family:var(--f-head);font-weight:700;font-size:.92rem;color:var(--coral-deep)}
.msg-issue-p{font-size:.82rem;color:var(--text-soft);margin-top:3px}
.msg-issue-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:7px;font-size:.84rem;font-weight:700}
.msg-issue-note{font-size:.76rem;color:var(--text-soft);margin-top:6px;line-height:1.5}
.msg-form select{width:100%;padding:9px 11px;border:2px solid var(--border);border-radius:10px;font:inherit;font-size:.9rem;background:var(--white);color:var(--text);margin-bottom:8px}

@media(max-width:620px){
  .stat-tiles li{flex:1 1 calc(50% - 6px)}
  .issue-card{padding:22px 18px}
  .sister-card{padding:26px 20px}
  .calc{padding:20px 16px}
  .loc-code-value code{font-size:1.6rem}
}
body.hc .price-card,body.hc .calc,body.hc .issue-card,body.hc .stat-tiles li,body.hc .gal-item,body.hc .poster-fig img{border:2px solid #000}
body.hc .sister-card,body.hc .loc-code{background:#000;color:#fff}
@media print{.gal-grid,.calc,.stat-tiles{display:none!important}.issue-card{border:2px solid #000;box-shadow:none}}

/* jw-guides v1 */
.table-wrap{overflow-x:auto;margin:16px 0}
.guide-table{width:100%;border-collapse:collapse;font-size:.95rem}
.guide-table th,.guide-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line,rgba(0,0,0,.12));vertical-align:top}
.guide-table thead th{font-weight:700;white-space:nowrap}
.guide-dl dt{font-weight:700;margin-top:14px}
.guide-dl dd{margin:4px 0 0}
.muted.small{font-size:.85rem}
/* jw-guides v2: drive-time list, guide link rows, in-guide FAQ accordion, dateline.
   Classes instead of inline style attributes: CSP is style-src 'self', so an
   inline style is dropped silently. */
.drive-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;margin:18px 0 22px;padding:0}
.drive-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.95rem}
.drive-place{color:var(--navy);font-weight:600}
.drive-place a{color:inherit;text-decoration:underline;text-decoration-color:var(--cyan-dark)}
.drive-time{color:var(--text-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.guide-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 6px}
.guide-links-lead{margin-top:22px}
.legal-prose .faq-item{margin-top:10px}
.legal-prose .faq-answer p{margin-bottom:0}
.legal-prose .note-card{margin:18px 0}
.legal-prose .note-card h3{font-size:1.02rem;margin-bottom:6px}
.legal-prose .guide-table a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--cyan-dark)}
/* jw-guides v3: the compact cost-per-load block on /pricing/ (perLoadBlock). It sits
   outside .legal-prose, and the bare .muted rule is the footer's white-on-navy, so
   the caption needs the prose colour here or it vanishes on cream. */
.per-load p{color:var(--text-soft);margin-bottom:12px}
.per-load .section-title{margin-bottom:12px}
.per-load a{text-decoration:underline;text-decoration-color:var(--cyan-dark)}
/* 2026-09-17: the same block under the homepage price cards (buildHome), inside the
   pricing section's .wrap. .narrow keeps the table at prose width; the top margin
   separates it from .price-foot without an inline style (style-src 'self'). */
.home-per-load{margin-top:34px}
.guide-dateline{margin-top:18px}
@media(max-width:700px){.drive-list{grid-template-columns:1fr}}

/* Install affordance. Scoped hard to .pwa-install so it cannot leak into the
   site's own footer styling. Colours come from the two custom properties, which
   each site sets to its own brand values. */
.pwa-install{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:center;margin:1.25rem auto 0;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);max-width:36rem}
.pwa-install__btn,.pwa-install__dismiss{font:inherit;font-size:.9rem;line-height:1.2;border-radius:.5rem;padding:.6rem 1.05rem;cursor:pointer;min-height:44px}
.pwa-install__btn{background:var(--pwa-accent,#3182CE);color:var(--pwa-accent-ink,#fff);border:1px solid transparent;font-weight:600}
.pwa-install__btn:hover{filter:brightness(1.08)}
.pwa-install__dismiss{background:transparent;color:inherit;opacity:.75;border:1px solid currentColor}
.pwa-install__dismiss:hover{opacity:1}
.pwa-install__btn:focus-visible,.pwa-install__dismiss:focus-visible{outline:3px solid var(--pwa-accent,#3182CE);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.pwa-install{animation:pwa-fade .3s ease-out}}
@keyframes pwa-fade{from{opacity:0}to{opacity:1}}

.pwa-install{--pwa-accent:#e8734a;--pwa-accent-ink:#111111}

/* offline page, served by sw.js when the network is gone */
body.pwa-offline{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:2rem 1.25rem;background:#1e3a5f;color:#ffffff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
.pwa-offline *{box-sizing:border-box}
.pwa-offline .card{max-width:34rem;text-align:center}
.pwa-offline h1{font-size:clamp(1.6rem,5vw,2.2rem);margin:0 0 .75rem;line-height:1.2;color:#ffffff}
.pwa-offline p{margin:0 0 1rem;color:#c7d6e8}
.pwa-offline .hint{font-size:.95rem}
.pwa-offline a.cta{display:inline-block;margin-top:.5rem;padding:.75rem 1.4rem;border-radius:.5rem;
  background:#e8734a;color:#111111;text-decoration:none;font-weight:600;min-height:44px}
.pwa-offline a.cta:hover{filter:brightness(1.08)}
.pwa-offline a.cta:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
.pwa-offline .dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:#e8734a;margin-right:.45rem;vertical-align:middle}