/* October refresh: readable hierarchy, brighter surfaces, and a stronger local identity. */
@media screen {
    :root {
        --ink: #12334a;
        --muted: #395467;
        --orange: #ff805d;
        --rust: #ae3624;
        --paper: #fffef7;
        --line: #bfdedc;
        --cream: #e2f8f5;
        --sage: #b8f0cc;
        --teal: #006b77;
        --lime: #c9ef5b;
        --shadow: 0 12px 36px #007f9014;
        --sunshine: #ffe45c;
        --aqua: #52e0d1;
        --sky: #c5edff;
    }
    a:focus-visible, button:focus-visible, summary:focus-visible,
    input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
    .mailbox-section a:focus-visible, .service-featured:focus-visible, .topbar a:focus-visible { outline-color: #064e60; }
    body { font-weight: 400; background: var(--paper); }
    main { background: radial-gradient(ellipse 65% 660px at 100% 0, #ffe45c80, transparent), radial-gradient(ellipse 50% 700px at 0 0, #b9f3ec70, transparent), var(--paper); }
    h1, h2, h3 { font-weight: 760; letter-spacing: -.045em; }
    h2 { font-size: clamp(2.375rem, 3.5vw, 3.125rem); line-height: 1.14; }
    h2 em, .contact-intro h1 em { font-style: normal; color: var(--teal); }
    p { font-weight: 400; line-height: 1.65; }
    p strong { font-weight: 700; color: var(--ink); }
    .hero-description strong, .contact-intro > p strong, .mailbox-copy > p strong { display: block; margin-bottom: 8px; }
    .eyebrow { color: var(--teal); font-weight: 750; letter-spacing: .075em; }
    .topbar { background: var(--sunshine); color: var(--ink); letter-spacing: .035em; font-weight: 500; }
    .topbar > .container { padding-block: 10px; }
    .site-header { background: #fffef7f5; border-bottom-color: #123c4312; box-shadow: 0 4px 25px #123c4305; }
    .header-inner { min-height: 100px; }
    .brand small { font-weight: 500; color: var(--muted); }
    .site-header nav { font-weight: 650; }
    .button { border-radius: 12px; box-shadow: 0 5px 0 #102e3710, 0 8px 24px #eb723421; font-weight: 750; padding: 18px 24px; }
    .button:hover { background: #ff9e78; box-shadow: 0 7px 0 #102e3710, 0 12px 28px #eb723430; }
    .button-dark { background: var(--teal); box-shadow: 0 5px 0 #102e3710, 0 8px 24px #102e3718; }
    .button-dark:hover { background: #005461; }
    .button-small { padding: 14px 20px; }
    .text-link { font-weight: 700; text-underline-offset: 5px; }
    .hero { padding-block: 72px 90px; gap: 56px; position: relative; }
    .hero h1 { font-size: clamp(3.5rem, 5.6vw, 5.25rem); line-height: 1.02; font-weight: 800; margin-bottom: 28px; }
    .hero h1 > span { color: var(--teal); }
    .hero .eyebrow { margin-bottom: 24px; }
    .status-dot { background: var(--teal); width: 10px; height: 10px; box-shadow: 0 0 0 5px #14675f13; }
    .hero-description { font-size: 1.375rem; line-height: 1.65; margin-bottom: 28px; }
    .hero-subtext { color: var(--muted); margin: 18px 0 30px; }
    .hero-proof { padding-top: 24px; border-top: 1px solid var(--line); margin-top: 30px; gap: 10px; }
    .hero-proof > strong { font-size: 1.5rem; }
    .hero-visual { height: 640px; isolation: isolate; }
    .hero-visual::before { content: ''; position: absolute; inset: -20px -12px 24px 16px; background: var(--sunshine); border-radius: 120px 28px 100px 28px; transform: rotate(3deg); z-index: -1; }
    .hero-visual::after { content: ''; position: absolute; width: 140px; height: 140px; border: 3px solid #ff805d; border-radius: 50%; right: -20px; bottom: 70px; z-index: -1; }
    .hero-photo, .photo-shade { border-radius: 100px 24px 100px 24px; }
    .hero-photo { box-shadow: 0 24px 60px #123c4326; }
    .photo-shade { background: linear-gradient(0deg, #061f2ae6, #08262d15 65%); }
    .round-stamp { background: var(--sunshine); color: var(--ink); outline: 1px dashed #102e3750; top: 20px; right: 20px; box-shadow: 0 8px 24px #0002; }
    .photo-caption { left: 32px; right: 32px; bottom: 135px; }
    .photo-caption strong { font-weight: 700; font-size: 2.5rem; }
    .photo-caption > span { color: #fff; font-weight: 500; }
    .photo-caption > a { background: #ffffff20; backdrop-filter: blur(8px); }
    .floating-note { background: #fffbe1; border: 0; border-radius: 18px; padding: 24px; box-shadow: 0 18px 40px #102e3724; bottom: -22px; }
    .note-icon { background: var(--aqua); width: 48px; height: 48px; }
    .floating-note strong { font-size: 1.25rem; }
    .benefit-strip { background: var(--aqua); color: var(--ink); border: 0; }
    .benefit-strip > .container { padding-block: 25px; gap: 20px; }
    .benefit-strip .container > div { border-color: #007c7845; font-weight: 600; }
    .benefit-strip .icon { color: #005865; width: 25px; height: 25px; }
    .section { padding-block: 100px; }
    .section-heading { margin-bottom: 40px; }
    .section-heading > p { max-width: 370px; }
    .services-grid { gap: 22px; grid-template-columns: 1.15fr 1fr 1fr; }
    .service-card { background: white; border: 1px solid #dfe8e6; border-radius: 24px; padding: 30px; box-shadow: var(--shadow); }
    .service-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px #123c431c; border-color: #669890; }
    .service-card:nth-child(2) { background: #bbf2d4; border-color: #87d8b6; }
    .service-card:nth-child(3) { background: #c5edff; border-color: #8fd0ed; }
    .service-card:nth-child(4) { background: #ffd4bd; border-color: #f8b797; }
    .service-card:nth-child(5) { background: #e2d5ff; border-color: #c6b1ee; }
    .service-card h3 { font-size: 1.75rem; font-weight: 760; line-height: 1.18; margin-top: 24px; }
    .service-card p { font-size: 1.25rem; line-height: 1.65; margin-bottom: 30px; }
    .icon-tile { width: 54px; height: 54px; border-radius: 16px; background: #fff; color: var(--teal); box-shadow: 0 4px 12px #102e3708; }
    .icon-tile .icon { width: 28px; height: 28px; stroke-width: 1.8; }
    .service-featured { background: linear-gradient(155deg, #45decd, #95efd8); color: var(--ink); border-color: #23b9ae; padding: 34px; }
    .service-featured h3 { font-size: 2.375rem; }
    .service-featured p { color: #244c57; }
    .service-featured .icon-tile { background: var(--sunshine); color: var(--ink); }
    .pill { color: var(--ink); background: var(--sunshine); border-color: #d0b62d; border-radius: 30px; font-size: 1rem; letter-spacing: .035em; padding: 7px 12px; }
    .service-checks { color: var(--ink); line-height: 1.55; gap: 15px; }
    .service-checks span:before { color: #005f67; }
    .card-link { padding-top: 18px; border-top: 1px solid #102e371a; font-weight: 750; }
    .service-featured .card-link { color: #064e60; border-color: #006b7740; padding-top: 24px; margin-top: 45px; }
    .card-link .icon { width: 24px; height: 24px; }
    .mail-illustration { opacity: .06; }
    .carrier-row { padding-top: 45px; }
    .carrier-row > span { font-weight: 600; letter-spacing: .08em; }
    .mailbox-section { position: relative; background: radial-gradient(ellipse at 0 0, #70e4d8, transparent 65%), linear-gradient(120deg, #b1f2e6, #e1f8be); color: var(--ink); padding-block: 90px; }
    .mailbox-grid { gap: 72px; }
    .mailbox-image { height: 730px; border-radius: 28px 100px 28px 28px; box-shadow: 16px 16px 0 #1ab8a530; }
    .image-label { background: var(--sunshine); color: var(--ink); border-radius: 10px; font-weight: 650; }
    .mailbox-copy .eyebrow { color: #005e69; }
    .mailbox-copy h2 { font-size: clamp(2.5rem, 3.7vw, 3.5rem); }
    .mailbox-copy em { color: #005e69; font-weight: 760; }
    .mailbox-copy > p, .feature-line p { color: #284d59; }
    .mailbox-copy p strong { color: var(--ink); }
    .mailbox-copy > p { max-width: none; margin-bottom: 30px; }
    .feature-line { margin-bottom: 25px; }
    .feature-line > span { color: var(--ink); border-color: #d0b62d; background: var(--sunshine); font-weight: 700; }
    .feature-line h3 { font-size: 1.375rem; font-weight: 700; margin-bottom: 8px; }
    .feature-line p { max-width: none; }
    .mailbox-copy .button { background: var(--orange); color: var(--ink); box-shadow: none; }
    .mailbox-copy .button:hover { background: #ffae89; }
    .review-summary { background: #fff1a1; border: 1px solid #e1c74d; border-radius: 22px; padding: 24px; }
    .review-summary strong { font-size: 3rem; font-weight: 800; color: var(--teal); }
    .review-card { padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow); }
    .review-card:nth-child(2) { background: #ffdfcd; border-color: #efbda3; }
    .review-card blockquote { font-size: 1.625rem; line-height: 1.45; font-weight: 650; letter-spacing: -.025em; }
    .quote-mark { color: var(--teal); font-size: 4.5rem; height: 50px; }
    .review-card figcaption { border-top: 1px solid #102e371a; padding-top: 22px; }
    .review-avatar { background: var(--aqua); font-weight: 750; }
    .review-card figcaption strong { font-weight: 650; }
    .guide-section { background: radial-gradient(ellipse at 10% 100%, #ffc77a, transparent 65%), #ffeb79; border: 1px solid #e3c53a; border-radius: 32px; padding: 65px; }
    .guide-section h2 { font-size: clamp(2.375rem, 3.4vw, 3rem); }
    .guide-paper { background: white; box-shadow: 10px 12px 0 #e7b99850, 0 20px 30px #76441d18; border-radius: 8px; }
    .guide-paper strong { font-weight: 750; color: var(--teal); }
    .guide-circle { background: var(--aqua); border: 1px solid #159f98; }
    .faqs details { background: white; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; padding-inline: 24px; box-shadow: 0 4px 15px #123c4305; }
    .faqs details:first-child { border-top: 1px solid var(--line); }
    .faqs summary { font-weight: 650; font-size: 1.25rem; padding-block: 23px; }
    .faqs summary:after { top: 20px; color: var(--teal); }
    .faqs details[open] { border-color: #d5b735; background: #fff8cd; }
    .faqs details p { padding-right: 0; line-height: 1.65; }
    .visit-band { position: relative; overflow: hidden; background: #ffb394; color: var(--ink); padding-block: 60px; }
    .visit-band::before { content: ''; position: absolute; width: 420px; height: 420px; right: -130px; top: -190px; border: 45px solid #ff916c; border-radius: 50%; pointer-events: none; }
    .visit-band > .container { position: relative; }
    .visit-band .eyebrow { color: #713b25; }
    .visit-band h2 { font-size: clamp(2.25rem, 3vw, 2.75rem); font-weight: 800; }
    .visit-band p { color: #514139; font-size: 1.125rem; }
    .visit-band .button { background: var(--sunshine); color: var(--ink); box-shadow: none; }
    .visit-band .button:hover { background: #ffef91; }
    .site-footer { background: #d7f1ff; border-top: 8px solid var(--aqua); padding-top: 70px; }
    .footer-top h2 { font-weight: 750; color: var(--ink); margin-bottom: 20px; }
    .footer-top p strong { font-weight: 700; }
    .footer-access { background: var(--sunshine); border-radius: 10px; }
    .footer-bottom { border-color: #9dcfdf; }
    .page-hero { padding-bottom: 75px; }
    .page-hero h1 { font-weight: 800; line-height: 1.08; }
    .page-hero h1 em { color: var(--teal); }
    .page-hero > img, .page-hero .page-photo { height: 490px; border-radius: 80px 22px 80px 22px; box-shadow: 12px 12px 0 var(--sunshine), 0 22px 44px #102e3715; }
    .page-heading h1 { font-weight: 800; }
    .detail-card { background: white; border-radius: 22px; padding: 32px; box-shadow: var(--shadow); }
    .detail-card:nth-child(2) { background: #c8f4dd; }
    .detail-card:nth-child(3) { background: #ffe7a6; }
    .detail-title, .detail-card h3 { font-size: 1.75rem; font-weight: 750; line-height: 1.2; }
    .step-number { color: var(--teal); font-size: 1.125rem; font-weight: 750; width: 48px; height: 48px; display: grid; place-items: center; background: var(--sunshine); border-radius: 14px; margin-bottom: 22px; }
    .detail-card .text-link { margin-top: 22px; }
    .soft-section { background: #d6f4ff; padding-block: 80px; }
    .notice { border-color: var(--teal); background: #d5f7d7; border-radius: 0 16px 16px 0; padding: 24px; }
    .notice > strong { font-size: 1.375rem; line-height: 1.3; display: block; }
    .size-card { border-radius: 24px; padding: 32px; box-shadow: var(--shadow); background: white; }
    .size-card:nth-child(2) { background: #fff4b1; border-color: #d9bf3f; }
    .size-card h3 { font-size: 2rem; margin-bottom: 12px; }
    .size-visual { background: linear-gradient(135deg, #8ceada, #dcf79d); height: 140px; border-radius: 16px; align-items: center; justify-content: center; }
    .size-visual span { background: linear-gradient(145deg, #008b91, #006173); border-color: #103b38; box-shadow: 5px 6px 0 #102e371a; }
    .size-visual span:after { border-color: #dff4b0; background: #dff4b0; }
    .size-card p { margin-top: 14px; }
    .size-dimension { color: var(--teal); font-weight: 650; }
    .location-steps { background: #d5f4ee; border: 1px solid #91d5c7; border-radius: 22px; padding: 30px; gap: 24px; margin-top: 0; }
    .location-steps strong { color: var(--teal); }
    .location-info h2 { font-weight: 800; }
    .hours-table td { font-weight: 700; color: var(--ink); }
    .hours-table th { font-weight: 400; }
    .store-status { background: #e9ece9; }
    .store-status.is-open { background: var(--lime); color: #244521; }
    .map-panel { border-radius: 28px; box-shadow: var(--shadow); }
    .parking-grid img { border-radius: 24px; box-shadow: var(--shadow); height: 400px; }
    .contact-grid { gap: 70px; padding-top: 30px; }
    .contact-intro h1 { font-size: clamp(2.75rem, 4.4vw, 4rem); line-height: 1.08; font-weight: 800; }
    .contact-intro > p { font-size: 1.25rem; }
    .contact-links { background: #d4f5ec; border: 1px solid #97d8c9; border-radius: 18px; padding: 24px; gap: 16px; }
    .contact-links a { font-weight: 700; }
    .contact-links .icon { color: var(--teal); width: 24px; height: 24px; }
    .contact-links > span { color: var(--muted); font-size: 1rem; }
    .contact-photo { position: relative; border-radius: 22px; overflow: hidden; margin-top: 28px; }
    .contact-photo img { height: 240px; width: 100%; object-fit: cover; object-position: center 43%; }
    .contact-photo > span { position: absolute; inset: auto 0 0; padding: 38px 24px 22px; background: linear-gradient(transparent, #102e37ed); color: white; font-size: 1rem; line-height: 1.5; }
    .contact-photo strong { font-size: 1.25rem; }
    .form-panel { background: white; border: 1px solid #dce5df; border-top: 6px solid var(--teal); border-radius: 24px; padding: 38px; box-shadow: 0 20px 60px #102e3710; }
    .form-panel h2 { font-size: 2.25rem; font-weight: 800; }
    .form-panel > p { margin-bottom: 30px; }
    .form-field { margin-bottom: 24px; }
    .form-field label { font-weight: 700; margin-bottom: 9px; }
    .form-field input, .form-field select, .form-field textarea { border: 1px solid #708d86; border-radius: 10px; background: #fcfefc; padding: 14px; font-weight: 400; }
    .form-field input::placeholder, .form-field textarea::placeholder { color: #60706c; opacity: 1; }
    .form-field input:focus, .form-field select:focus, .form-field textarea:focus { background: #fff; }
    .microcopy a { text-decoration: underline; text-underline-offset: 3px; }
    .success-panel { background: #d3f6bd; border-radius: 24px; border: 1px solid #b6d79d; }
    .guide-content h1 { font-weight: 800; color: var(--teal); }
    .checklist li { border-color: var(--line); padding-block: 30px; }
    .checklist li:before { font-weight: 750; color: var(--teal); top: 30px; }
    .checklist h2 { font-weight: 750; }
    .guide-footer { border-radius: 18px; }
    .mobile-actions { background: #fff8d6f5; backdrop-filter: blur(15px); box-shadow: 0 -8px 28px #123c4312; }
    .mobile-actions a:last-child { border-radius: 10px; }
    .topbar .icon { color: #925018; }
    .service-card:hover { border-color: var(--teal); }
    .service-card .icon-tile { background: #ffffffd9; }
    .service-featured .icon-tile { background: var(--sunshine); }
    .service-featured .mail-illustration > span { border-color: #006b77; }
    .review-card:first-child { background: #e6faff; border-color: #a5dfe9; }
    .review-card:last-child { background: #edf9d3; border-color: #b5d786; }
    .review-card:nth-child(2) .review-avatar { background: #ffb28f; }
    .review-card:nth-child(3) .review-avatar { background: var(--lime); }
    .guide-paper { border-top-color: #ff805d; }
    .guide-footer { background: #fff1a1; }
    .form-panel { border-top-color: #00a8a2; }
    .size-card:nth-child(3) { background: #e5f6ff; }
    .footer-top > div > a:not(.brand) { color: #31536b; }

}
@media screen and (max-width: 1100px) {
    .hero { grid-template-columns: 1fr; gap: 50px; padding-block: 50px 75px; }
    .hero h1 { font-size: clamp(3.5rem, 7vw, 5rem); }
    .hero h1 br:last-child { display: none; }
    .hero-copy { max-width: 760px; }
    .hero-description { max-width: 650px; }
    .hero-visual { height: 580px; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .service-featured { grid-column: span 2; }
    .service-featured h3 { font-size: 2.5rem; }
    .service-featured p { max-width: 640px; }
    .service-featured .card-link { margin-top: 30px; }
    .mailbox-grid { gap: 50px; }
    .mailbox-image { height: 500px; }
    .mailbox-copy > p { max-width: 680px; }
    .review-summary { max-width: 360px; }
    .contact-grid { gap: 40px; }
    .contact-photo img { height: 300px; }
    .form-panel { max-width: 850px; width: 100%; }
    .page-hero > img { height: 480px; }
    .site-header nav { background: #fffef7; }
}
@media screen and (max-width: 760px) {
    .header-inner { min-height: 86px; }
    .hero { padding-block: 38px 65px; gap: 44px; }
    .hero h1 { font-size: clamp(3.125rem, 10vw, 4.5rem); letter-spacing: -.05em; }
    .hero h1 br:last-child { display: block; }
    .hero .eyebrow { font-size: 1rem; margin-bottom: 22px; }
    .hero-description { font-size: 1.375rem; }
    .hero-visual { height: 545px; margin-inline: 4px; }
    .hero-visual::before { inset: -10px -4px 15px 8px; transform: rotate(2deg); }
    .hero-visual::after { display: none; }
    .hero-photo, .photo-shade { border-radius: 70px 20px 70px 20px; }
    .photo-caption { left: 24px; right: 24px; bottom: 140px; }
    .photo-caption strong { font-size: 2.25rem; }
    .floating-note { padding: 20px; }
    .round-stamp { width: 132px; height: 132px; right: 14px; top: 16px; }
    .benefit-strip > .container { padding-block: 20px; }
    .benefit-strip .container > div { padding-block: 12px; }
    .section { padding-block: 65px; }
    .section-heading { margin-bottom: 30px; align-items: stretch; }
    .services-grid { grid-template-columns: 1fr; gap: 20px; }
    .service-featured { grid-column: auto; }
    .service-card, .service-featured { padding: 28px; border-radius: 22px; }
    .service-card h3 { font-size: 1.875rem; }
    .service-featured h3 { font-size: 2.25rem; }
    .card-link { font-size: 1.125rem; }
    .service-featured .card-link { padding-top: 20px; }
    .mailbox-section { padding-block: 55px; }
    .mailbox-image { height: 400px; border-radius: 22px 70px 22px 22px; box-shadow: 8px 8px 0 #1ab8a530; }
    .mailbox-grid { gap: 42px; }
    .mailbox-copy h2 { font-size: 2.75rem; }
    .image-label { left: 12px; right: 12px; bottom: 12px; padding: 13px; }
    .review-summary { max-width: none; text-align: left; }
    .review-summary > div { justify-content: flex-start; }
    .review-card { padding: 28px; }
    .guide-section { padding: 40px 28px; border-radius: 24px; gap: 40px; }
    .guide-section h2 { font-size: 2.375rem; }
    .guide-art { max-width: 300px; }
    .faqs details { padding-inline: 20px; }
    .faqs summary { font-size: 1.25rem; }
    .faq-section { gap: 28px; }
    .visit-band { padding-block: 45px; }
    .visit-band p { line-height: 1.65; }
    .site-footer { padding-top: 45px; }
    .page-hero { padding-bottom: 50px; }
    .page-hero h1 { font-size: clamp(2.75rem, 8vw, 3.5rem); }
    .page-hero > img { height: 390px; border-radius: 60px 20px 60px 20px; box-shadow: 7px 8px 0 var(--sunshine); width: calc(100% - 8px); }
    .page-heading h1 { font-size: 2.75rem; }
    .detail-card, .size-card { padding: 27px; }
    .soft-section { padding-block: 55px; }
    .location-steps { padding: 24px; }
    .parking-grid img { height: 330px; }
    .contact-grid { padding-top: 10px; gap: 32px; }
    .contact-intro h1 { font-size: 3rem; }
    .contact-links { padding: 22px; }
    .contact-photo { display: none; }
    .form-panel { padding: 30px 22px; }
    .form-panel h2 { font-size: 2rem; }
    .form-row { gap: 0; }
}
@media screen and (max-width: 380px) {
    .hero h1 { font-size: 2.875rem; }
    .hero-visual { height: 570px; }
    .photo-caption strong { font-size: 2rem; }
    .photo-caption { left: 20px; right: 20px; bottom: 145px; }
    .photo-caption > a { width: 40px; height: 40px; right: -3px; bottom: -50px; }
    .floating-note strong { font-size: 1.125rem; }
    .service-card, .service-featured, .review-card { padding: 24px; }
    .guide-section { padding-inline: 22px; }
    .contact-intro h1 { font-size: 2.625rem; }
    .contact-links { padding: 18px; }
    .contact-links a { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .button .icon, .card-link .icon { transition: transform .2s ease; }
    .button:hover .icon, .service-card:hover .card-link .icon { transform: translateX(4px); }
    .hero-visual { animation: arrive .65s ease-out both; }
    @keyframes arrive { from { opacity: .4; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
}

/* Full-screen navigation uses the same breakpoint as the menu button. */
@media screen and (max-width: 1100px) {
    html.navigation-open { overflow: hidden; }
    body.navigation-open { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; }
    .navigation-open .site-header {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 60;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: radial-gradient(ellipse at 100% 100%, #a3f0e1, transparent 65%), radial-gradient(ellipse at 0 0, #fff09c, transparent 70%), #fffef7;
        backdrop-filter: none;
        border: 0;
    }
    .navigation-open .header-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: start;
        align-items: center;
        gap: 35px 16px;
        min-height: 100%;
        padding-top: max(24px, env(safe-area-inset-top));
        padding-bottom: max(32px, env(safe-area-inset-bottom));
    }
    .navigation-open .menu-toggle { width: 52px; height: 52px; background: white; border-color: #9dbbb2; border-radius: 50%; }
    .navigation-open .site-header nav.is-open {
        grid-column: 1 / -1;
        position: static;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 0;
        max-height: none;
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .navigation-open .site-header nav > a:not(.button) {
        font: 750 clamp(1.75rem, 4vw, 2.5rem)/1.25 Manrope, Arial, sans-serif;
        letter-spacing: -.035em;
        padding: 23px 0;
        border-bottom: 1px solid #cbded6;
    }
    .navigation-open .site-header .button-small { margin-top: 32px; padding: 20px 24px; min-height: 64px; font-size: 1.25rem; }
    .navigation-open .mobile-actions { display: none; }
}
@media screen and (max-height: 550px) and (max-width: 1100px) {
    .navigation-open .header-inner { gap: 18px 16px; padding-top: 16px; }
    .navigation-open .site-header nav > a:not(.button) { padding-block: 15px; font-size: 1.75rem; }
    .navigation-open .site-header .button-small { margin-top: 22px; }
}

/* Put Pasadena and direct contact actions in the homepage's first view. */
@media screen {
    .hero { padding-block: 40px 65px; }
    .hero h1 { font-size: clamp(3.5rem, 4.8vw, 4.5rem); margin-bottom: 24px; }
    .hero h1 br:last-child { display: block; }
    .hero .eyebrow { margin-bottom: 20px; }
    .hero-contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 12px; margin-bottom: 24px; }
    .hero-contact > a { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid #91d5c7; background: #d4f5ec; text-decoration: none; transition: background .2s ease; }
    .hero-contact > a:hover { background: #b5efdf; }
    .hero-contact .hero-phone { background: #fff1a1; border-color: #dfc647; }
    .hero-contact .hero-phone:hover { background: #ffe878; }
    .hero-contact .icon { width: 24px; height: 24px; flex: 0 0 24px; color: var(--teal); }
    .hero-contact strong, .hero-contact small, .hero-address > span > span { display: block; }
    .hero-contact strong { font-size: 1.25rem; font-weight: 800; line-height: 1.4; }
    .hero-contact small { font-size: 1rem; line-height: 1.5; }
    .hero-address > span > span { font-size: 1.125rem; line-height: 1.5; }
    .hero-phone strong { white-space: nowrap; }
    .hero-description { font-size: 1.25rem; margin-bottom: 24px; }
    .hero-description strong { display: inline; margin: 0; }
    .hero-proof { margin-top: 24px; padding-top: 20px; }
}
@media screen and (max-width: 1100px) {
    .hero-contact { max-width: 650px; }
}
@media screen and (max-width: 760px) {
    .hero { padding-top: 28px; }
    .hero h1 { font-size: clamp(2.875rem, 10vw, 4.5rem); margin-bottom: 20px; }
    .hero-contact { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
    .hero-contact > a { padding: 12px 16px; }
    .hero-contact .hero-phone > span { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
    .hero-contact .hero-phone small { flex-basis: 100%; }
    .hero-address small { margin-top: 2px; }
}
@media screen and (max-width: 380px) {
    .hero .eyebrow { display: none; }
}