:root{--blue:#163dad;--navy:#102657;--yellow:#ffdc4a;--green:#176746;--red:#b83231;--paper:#fff;--pale:#f2f5ff;--line:#dce2ed}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.6;color:var(--navy);background:white}a{color:inherit;text-underline-offset:4px}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #d44320;outline-offset:5px}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.02;letter-spacing:-.045em}h2{font-size:clamp(2.5rem,4.5vw,4.4rem);margin-bottom:26px}h3{font-size:2rem}p{margin-bottom:20px}header{padding:22px 5%;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line);background:#fff}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;letter-spacing:-.025em;font-size:1.1rem;line-height:1.2}.brand small{display:block;font-size:.65rem;letter-spacing:.2em;margin-top:5px}.brand-mark{height:45px;width:45px;display:grid;place-content:center;border-radius:11px;background:var(--blue);color:#fff;font-size:2rem;position:relative}.brand-mark span{position:absolute;color:var(--yellow);right:3px;top:-6px}nav{display:flex;gap:25px;font-size:.9rem}nav a{text-decoration:none}nav a:hover{color:var(--blue);text-decoration:underline}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:54px;padding:14px 24px;border:1px solid transparent;border-radius:6px;text-decoration:none;font-weight:700;font-size:.95rem;line-height:1.4}.button:hover{filter:brightness(.94)}.button.small{min-height:46px;padding:11px 18px}.yellow{background:var(--yellow);color:var(--navy)}.blue{background:var(--blue);color:#fff}.outline{border-color:var(--navy);background:white;color:var(--navy)}.hero{display:grid;grid-template-columns:1.02fr 1fr;min-height:660px}.hero-copy{padding:64px 7% 50px 10%}.eyebrow{font-weight:700;font-size:.75rem;letter-spacing:.16em;margin-bottom:24px}.dot,i{display:inline-block;background:var(--green);height:9px;width:9px;border-radius:50%;margin-right:8px}.hero h1{font-size:clamp(3.2rem,5.05vw,5rem);font-weight:850;color:var(--blue);margin-bottom:26px;letter-spacing:-.065em}.hero h1 span{color:var(--navy)}.intro{font-size:1.1rem;line-height:1.65;color:#445372}.actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.simple-link{font-weight:700;font-size:.95rem;text-decoration:none}.simple-link:hover{text-decoration:underline}.hero-address{font-size:.8rem;margin-top:28px;margin-bottom:0;color:#53607a}.hero-art{position:relative;overflow:hidden;background:#164bc2;min-height:600px}.hero-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.roundel{position:absolute;top:34px;right:30px;width:145px;height:145px;background:var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:.8rem;line-height:1.2;font-weight:bold;transform:rotate(9deg)}.roundel strong{font-size:1.1rem}.roundel span{font-size:2.4rem;line-height:1.3}.art-note{position:absolute;bottom:15px;left:25px;color:white;background:#102657c9;padding:6px 10px;border-radius:4px;font-size:.75rem}.service-strip{display:flex;justify-content:space-around;gap:20px;padding:23px 5%;border-block:1px solid var(--line);font-size:.875rem;font-weight:600}.green{background:var(--green)}.red{background:var(--red)}.section{padding:90px 6%;max-width:1600px;margin:auto}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:35px}.section-heading h2{margin-bottom:0}.section-heading>p{color:#526078;max-width:330px}.section-heading small{display:block;margin-top:12px;font-size:.8rem}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product{padding:30px 26px;min-height:315px;border-radius:10px;display:flex;flex-direction:column}.product-no{font-size:.7rem;font-weight:bold;letter-spacing:.09em;margin-bottom:34px}.product h3{font-size:clamp(1.7rem,2.3vw,2.4rem);margin-bottom:15px}.product p{font-size:.95rem;line-height:1.5}.product-tag{border-top:1px solid currentColor;padding-top:15px;margin-top:auto;font-size:.7rem;letter-spacing:.16em;font-weight:bold}.p-yellow{background:var(--yellow)}.p-blue{background:var(--blue);color:white}.p-red{background:#fce7e4;color:#8d2426}.p-green{background:#e6f1e8;color:#155036}.about{display:grid;grid-template-columns:1fr 1fr;gap:80px;background:var(--pale);max-width:none;padding-inline:8%}.about p{max-width:590px}.large-copy{font-size:1.6rem;line-height:1.45;letter-spacing:-.025em}.muted{font-size:.875rem;color:#53617b}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}blockquote{margin:0;border-top:2px solid var(--blue);padding:22px 30px 25px;background:#f7f9fc;min-height:260px}blockquote p{font-size:1.55rem;line-height:1.4;max-width:480px}.quote-mark{font-family:Georgia,serif;font-size:4.5rem;color:var(--blue);line-height:1}cite{font-style:normal;font-size:.8rem;color:#53617b}.visit{background:var(--pale);max-width:none}.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px}.detail{padding:20px 0;border-bottom:1px solid #cbd5e8}.detail-label{display:block;font-size:.7rem;font-weight:bold;letter-spacing:.14em;margin-bottom:10px}.detail address{font-style:normal;font-size:1.4rem;font-weight:600;line-height:1.4;margin-bottom:10px}.detail p{margin:0}.phone{font-size:1.6rem;font-weight:bold;text-decoration:none}dl{margin:0}dl div{display:flex;justify-content:space-between;gap:20px;padding:3px 0}dd{margin:0;font-weight:600}.fine{font-size:.8rem;color:#53617b;margin-top:12px!important}.map-panel{min-height:440px;border:1px solid #cbd5e8;border-radius:12px;background:#e2eafa;overflow:hidden;display:grid;place-items:center}.map-panel #map-placeholder{padding:45px;max-width:470px}.map-panel h3{font-size:2.5rem}.map-panel p{color:#435577}.map-panel a{display:block;font-size:.85rem;margin-top:18px}.map-panel iframe{width:100%;height:100%;min-height:500px;border:0}.message{margin-top:65px;padding-top:55px;border-top:1px solid #cbd5e8;display:grid;grid-template-columns:.8fr 1.2fr;gap:65px}.message h3{font-size:2.5rem}.form-note{color:#53617b;font-size:.9rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}fieldset{border:0;padding:0;margin:0}label{display:block;font-size:.875rem;font-weight:600;margin-bottom:18px}input,textarea{display:block;width:100%;margin-top:8px;border:1px solid #bac6dd;border-radius:5px;background:#fff;padding:14px;font-weight:normal;color:#435577}fieldset:disabled input,fieldset:disabled textarea{opacity:1;background:#f8f9fc}button:disabled{cursor:not-allowed;background:#627295;color:#fff}.final-cta{text-align:center;background:var(--blue);color:white;padding:65px 25px}.final-cta p{font-size:1rem}.final-cta h2{font-size:clamp(2.6rem,5vw,4.6rem)}footer{padding:48px 6% 24px}.footer-top{display:flex;justify-content:space-between;align-items:start;gap:30px;margin-bottom:38px}.footer-top>p{font-size:1.2rem;line-height:1.3}.footer-top>a:last-child{font-size:.9rem}.footer-bottom{padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:25px;font-size:.75rem}.footer-bottom>div{display:flex;gap:24px}.text-button{border:0;padding:0;background:none;color:inherit;text-decoration:underline;font-size:inherit}.cookie{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:1040px;background:#fff;box-shadow:0 8px 45px #10265740;z-index:10;padding:22px 25px;border:1px solid #bdc9df;border-radius:12px;display:flex;align-items:center;gap:35px}.cookie[hidden]{display:none}.cookie strong{font-size:1rem}.cookie p{font-size:.8rem;margin:6px 0 0;max-width:600px}.cookie-actions{display:flex;gap:10px;flex-shrink:0}.cookie .button{font-size:.8rem;padding:12px 16px;min-height:44px}.legal{max-width:920px;min-height:70vh;padding-block:65px}.legal h1{font-size:3.8rem;color:var(--blue)}.legal h2{font-size:1.6rem;letter-spacing:-.02em;margin-top:38px;margin-bottom:15px}.legal p{color:#40506d}.lead{font-size:1.1rem}.skip{position:absolute;top:-100px;left:10px;background:var(--yellow);padding:12px;z-index:30}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:1600px){.hero-copy{padding-left:16%}}@media(max-width:1100px){nav{gap:16px}header{flex-wrap:wrap}header nav{order:3;width:100%;justify-content:center}.hero-copy{padding:45px 7%}.hero{min-height:600px}.hero h1{font-size:3.7rem}.hero-art{min-height:580px}.products{grid-template-columns:repeat(2,1fr)}.product{min-height:270px}.about{gap:40px}.roundel{width:120px;height:120px}.cookie{gap:20px}}@media(max-width:700px){header{padding:18px 5%;gap:20px}.brand{font-size:.95rem}.brand small{font-size:.56rem}.brand-mark{width:37px;height:40px}header>.button{padding:10px 12px;font-size:.75rem}nav{overflow-x:auto;justify-content:flex-start!important;gap:23px;font-size:.85rem;padding-bottom:3px}.hero{grid-template-columns:1fr}.hero-copy{padding:45px 6%}.hero h1{font-size:clamp(3rem,11vw,4.6rem)}.hero-art{min-height:380px}.hero-art img{object-position:center}.roundel{top:20px;right:20px}.service-strip{align-items:start;gap:18px;padding:20px 6%;font-size:.75rem}.service-strip span{flex:1}.service-strip i{display:block;margin-bottom:7px}.section{padding:58px 6%}.section-heading{display:block}.section-heading>p,.section-heading>a{display:block;margin-top:25px}.products{gap:12px}.product{padding:22px 18px;min-height:290px}.product h3{font-size:1.7rem}.product p{font-size:.85rem}.product-no{font-size:.6rem}.about,.visit-grid,.message{grid-template-columns:1fr;gap:25px}.large-copy{font-size:1.4rem}.review-grid{grid-template-columns:1fr}blockquote{min-height:220px;padding:22px}.map-panel{min-height:370px}.map-panel #map-placeholder{padding:30px}.message{margin-top:40px;padding-top:40px}.form-row{grid-template-columns:1fr;gap:0}.footer-top{flex-wrap:wrap}.footer-top>p{display:none}.footer-bottom{flex-direction:column}.footer-bottom>div{gap:18px;flex-wrap:wrap}.cookie{bottom:10px;width:calc(100% - 20px);padding:18px;display:block}.cookie-actions{margin-top:14px}.cookie-actions>*{flex:1}.cookie p{font-size:.75rem}.legal h1{font-size:3rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.owner-portrait{margin:34px 0 0;max-width:390px}.owner-portrait img{display:block;width:100%;height:auto;aspect-ratio:941/1320;object-fit:cover;object-position:center bottom;border-radius:12px}.owner-portrait figcaption{display:flex;align-items:center;gap:14px;margin-top:14px}.owner-portrait figcaption strong{font-size:1.2rem}.owner-portrait figcaption span{font-size:.9rem;color:#53617b}.about>div:last-child{align-self:center}@media(max-width:700px){.owner-portrait{max-width:340px}}
.product-photo{display:block;width:calc(100% + 52px);max-width:none;height:190px;object-fit:cover;margin:-30px -26px 24px;border-radius:10px 10px 0 0}.product{overflow:hidden}.product-no{margin-bottom:22px}.storefront-photo{margin:0 0 18px}.storefront-photo img{display:block;width:100%;height:auto;border-radius:10px}.storefront-photo figcaption{font-size:.8rem;color:#53617b;margin-top:9px}.visit-grid{align-items:start}.map-panel{min-height:500px}@media(max-width:700px){.product-photo{width:calc(100% + 36px);height:150px;margin:-22px -18px 20px}.map-panel{min-height:370px}}
.hero.hero-storefront{display:block;position:relative;isolation:isolate;min-height:680px;background:#102657 url("/assets/hero-storefront.webp") center 45%/cover no-repeat;color:#fff}
.hero-storefront::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(7,19,42,.48) 0%,rgba(7,19,42,.32) 37%,rgba(7,19,42,.03) 75%,rgba(7,19,42,0) 100%)}
.hero-storefront .hero-copy{padding:64px 6%;max-width:780px;margin-left:auto}
.hero-storefront h1,.hero-storefront h1 span,.hero-storefront .intro,.hero-storefront .hero-address{color:#fff}
.hero-storefront .dot{background:var(--yellow)}
@media(max-width:700px){.hero.hero-storefront{min-height:640px;background-position:55% center}.hero-storefront::before{background:rgba(7,19,42,.36)}.hero-storefront .hero-copy{padding:45px 6%}}
.hero-storefront .hero-copy{padding-top:220px;padding-bottom:42px}
.hero-storefront h1{font-size:clamp(2.2rem,3.2vw,3.2rem);line-height:1.08;letter-spacing:-.04em;margin-bottom:20px}
.hero-storefront .eyebrow{margin-bottom:16px}
@media(max-width:700px){.hero-storefront .hero-copy{padding-top:190px}.hero-storefront h1{font-size:clamp(2rem,7vw,2.8rem)}}

.hero-storefront .hero-copy{text-shadow:0 2px 5px rgba(0,0,0,.85)}.hero-storefront .button{text-shadow:none}

/* Slow, continuous testimonial ticker. Each identical row includes its end gap. */
.neighbourhood-wave{position:relative;overflow:hidden;background:white;color:var(--blue)}
.neighbourhood-wave svg{display:block;width:max(100%,960px);height:auto;aspect-ratio:1440/220}
.wave-lettering{fill:var(--blue);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:34px;white-space:pre}



.review-pause{margin-bottom:24px}
.review-ticker{overflow:hidden}
.review-track{display:flex;width:max-content;animation:review-scroll 300s linear infinite}
.review-track .review-grid{display:flex;gap:16px;padding-right:16px;flex-shrink:0;align-items:stretch}
.review-track blockquote{width:320px;min-height:0;padding:18px 20px;flex-shrink:0;display:flex;flex-direction:column}
.review-track .quote-mark{font-size:3rem}
.review-track blockquote p{font-size:1rem;line-height:1.5;margin-bottom:12px}
.review-track blockquote cite{margin-top:auto;padding-top:8px}
.review-ticker:hover .review-track,.review-ticker:focus-within .review-track,.review-ticker.is-paused .review-track{animation-play-state:paused}
@keyframes review-scroll{to{transform:translateX(-50%)}}
@media(max-width:700px){.review-track blockquote{width:260px;padding:16px}}
@media(prefers-reduced-motion:reduce){
 .review-pause{display:none}
 .review-track{animation:none;width:auto;display:block}
 .review-track .review-grid{display:grid;padding:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
 .review-track .review-grid[aria-hidden]{display:none}
 .review-track blockquote{width:auto}
}
@media(prefers-reduced-motion:reduce) and (max-width:700px){.review-track .review-grid{grid-template-columns:1fr}}

/* Red text-only Northmount wordmark. */
.brand{color:var(--red)}

/* Larger main navigation links on desktop and mobile. */
header nav{font-size:1.125rem}
@media(max-width:700px){header nav{font-size:1rem}}

/* Text-only wordmark: NORTHMOUNT is sized so CONVENIENCE STORE tucks
   directly underneath it instead of running past its ends. The negative
   margin drops the trailing letter-space the tracking adds after the E. */
.brand{font-size:1.9rem}
.brand small{font-size:.484em;--ls:.2785em;letter-spacing:var(--ls);margin-right:calc(-1 * var(--ls))}
@media(max-width:700px){.brand{font-size:1.6rem}}

/* Keep phone navigation and long product labels fully visible. */
@media(max-width:700px){header nav{flex-wrap:wrap;overflow:visible;gap:8px 22px}header nav a{padding-block:8px}.neighbourhood-wave{padding-bottom:38px}}
@media(max-width:480px){.products{grid-template-columns:1fr}.product-photo{height:210px}.product{min-height:0}.product h3{font-size:1.7rem}}
@media(max-width:700px){.map-panel #map-placeholder{min-width:0;width:100%;padding:24px}.map-panel h3{font-size:2rem;overflow-wrap:anywhere}.map-panel .button{max-width:100%}}
@media(min-width:701px) and (max-width:1100px){.visit-grid{grid-template-columns:1fr}}

/* Show the whole storefront above the copy on phones. */
.hero-mobile-photo{display:none}
@media(max-width:700px){
 .hero.hero-storefront{min-height:0;background:var(--navy)}
 .hero-storefront::before{display:none}
 .hero-mobile-photo{display:block;width:100%;height:auto}
 .hero-storefront .hero-copy{padding:36px 6% 40px;margin:0;max-width:none;text-shadow:none}
}

/* Store photo gallery. */
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
.gallery-grid figure{margin:0;min-width:0}
.gallery-grid a{display:block;border-radius:10px;overflow:hidden}
.gallery-grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .2s ease}
.gallery-grid a:hover img{transform:scale(1.025)}
.gallery-grid figcaption{padding-top:12px;font-size:1rem;color:var(--navy)}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.gallery-grid{grid-template-columns:1fr;gap:24px}}
@media(prefers-reduced-motion:reduce){.gallery-grid img{transition:none}.gallery-grid a:hover img{transform:none}}

/* Tighter spacing for the grouped portrait photos. */
.gallery-portraits{gap:12px;margin-top:20px}
.gallery-portraits figcaption{padding-top:6px}

/* Clip the white canvas included beside the uploaded portrait photos. */
.gallery-portraits{gap:8px;align-items:stretch;grid-auto-rows:1fr}
.gallery-portraits figure{display:flex;flex-direction:column}
.gallery-portraits figcaption{flex:1;min-height:3.6em}
.gallery-portraits a{aspect-ratio:574/1020;border-radius:6px}
.gallery-portraits img{width:209.9303%;max-width:none;height:100%;aspect-ratio:auto;object-fit:fill;transform:none}
.gallery-portraits a:hover img{transform:none}

.store-gallery [hidden]{display:none!important}
.gallery-toggle{display:flex;margin:28px auto 0}

/* Gentle product-card motion for pointer devices. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .product{transition:transform .22s ease,box-shadow .22s ease}
 .product-photo{transition:transform .35s ease}
 .product:hover{transform:translateY(-5px);box-shadow:0 12px 24px rgba(16,38,87,.14)}
 .product:hover .product-photo{transform:scale(1.025)}
}

/* Two-sided product cards with a stationary accessible control. */
.product.product-flip{padding:0;min-height:0;overflow:visible;perspective:1200px}
.product-rotor{position:relative;flex:1;transform-style:preserve-3d;transition:transform .5s ease}
.product-front,.product-back{padding:30px 26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px 10px 0 0;overflow:hidden}
.product-front{height:100%;display:flex;flex-direction:column}
.product-back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center}
.product-back ul{padding-left:20px;margin:12px 0 24px;line-height:1.9;font-size:1rem}
.product-back .fine{color:inherit}
.product-flip.is-flipped .product-rotor{transform:rotateY(180deg)}
.product-flip-toggle{border:0;border-top:1px solid currentColor;background:transparent;color:inherit;padding:15px 20px;font-weight:bold;font-size:.9rem;border-radius:0 0 10px 10px}
.product-flip-toggle:hover{text-decoration:underline}
@media(max-width:700px){.product-front,.product-back{padding:22px 18px}}
@media(prefers-reduced-motion:reduce){.product-rotor{transition:none}}

/* Match the map to the storefront photo at every width. */
.visit-grid .map-panel{position:relative;width:100%;aspect-ratio:4/3;min-height:0;display:block;border-radius:10px}.visit-grid .map-panel iframe{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0}.storefront-photo img{aspect-ratio:1024/306;object-fit:cover}


/* User-controlled motion, with every review reachable by keyboard or touch. */
.motion-stopped .review-track{animation:none;transform:none}.motion-stopped .review-ticker{overflow-x:auto}.motion-stopped .review-grid[aria-hidden="true"]{display:none}.motion-stopped .product-rotor,.motion-stopped .product,.motion-stopped .gallery-grid img{transition:none}.review-ticker:focus-visible{outline:3px solid var(--blue);outline-offset:5px}html:has(.motion-stopped){scroll-behavior:auto}

.map-column{min-width:0}.map-actions{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:12px;font-size:.9rem}.map-actions button{color:inherit;text-decoration:underline}


/* Visit bar: hours, phone and address directly under the hero. */
.visit-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 44px;padding:20px 5%;border-block:1px solid var(--line);background:#fff}
.visit-bar p{margin:0}
.visit-bar-status{display:flex;align-items:center;gap:11px;font-size:.95rem;font-weight:600;color:#3c4a66}
.visit-bar-status strong{color:var(--navy)}
.visit-bar .status-dot{height:10px;width:10px;border-radius:50%;background:#9aa6bd;flex:none;margin:0}
.visit-bar-status[data-status="open"] .status-dot{background:var(--green);box-shadow:0 0 0 4px rgba(23,103,70,.16)}
.visit-bar-status[data-status="closed"] .status-dot{background:var(--red);box-shadow:0 0 0 4px rgba(184,50,49,.16)}
.visit-bar-item{display:block;text-decoration:none}
.visit-bar-item:hover .visit-bar-value{text-decoration:underline}
.visit-bar-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;color:#53617b;margin-bottom:3px}
.visit-bar-value{display:block;font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.visit-bar-more{margin-left:auto;font-size:.85rem}
@media(max-width:1100px){.visit-bar{gap:14px 32px}}
@media(max-width:700px){.visit-bar{gap:14px 28px;padding:18px 6%}.visit-bar-status{width:100%}.visit-bar-value{font-size:1.05rem}.visit-bar-more{margin-left:0}}

/* Hero legibility between phone and desktop: the copy column stops sitting on the
   dark right-hand side of the photo there, so the scrim has to carry the whole frame. */
@media(min-width:701px) and (max-width:1100px){
 .hero-storefront::before{background:linear-gradient(270deg,rgba(7,19,42,.74) 0%,rgba(7,19,42,.66) 42%,rgba(7,19,42,.5) 100%)}
 .hero-storefront .hero-copy{padding-top:190px}
 .hero-storefront h1{font-size:clamp(2.1rem,4.4vw,2.9rem)}
}

/* The header carries brand + nav only now, so the nav no longer needs a row of its own
   until the phone breakpoint. */
@media(min-width:701px) and (max-width:1100px){
 header nav{order:0;width:auto;justify-content:flex-end}
}

/* About: copy sits centred against the portrait so neither end leaves a hole. */
.about>div:last-child{align-self:center}

/* Return to top. Created in JS, so it never appears as a dead control without scripting. */
.to-top{position:fixed;right:22px;bottom:22px;z-index:9;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--blue);border-radius:50%;background:#fff;color:var(--blue);font-size:1.15rem;line-height:1;box-shadow:0 4px 18px rgba(16,38,87,.18);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--blue);color:#fff}
@media(max-width:700px){.to-top{right:14px;bottom:14px;width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}
.to-top-arrow{display:block;line-height:1}
.motion-stopped .to-top{transition:none}



/* About: portrait sized so the two columns finish closer together. */
.owner-portrait{max-width:350px}

/* Owner portrait as an oval, sized to keep her hand on the rail in frame. */
.owner-portrait{max-width:420px}
.owner-portrait img{aspect-ratio:3/4;object-position:center 75%;border-radius:50%}
@media(max-width:700px){.owner-portrait{max-width:360px}}

/* Contact: the map follows you down the details instead of leaving a column of nothing. */
@media(min-width:1101px){
 .visit-grid>.map-column{position:sticky;top:26px;align-self:start}
}

/* The wave itself is the stop control, so no button sits on the design. */
.neighbourhood-wave{position:relative}
.wave-toggle{position:absolute;inset:0;width:100%;border:0;background:none;padding:0;cursor:pointer}
.wave-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:-4px;border-radius:6px}

/* Comfortable tap targets: every standalone link clears 44px without moving the layout. */
.simple-link,.detail a,.phone,.map-actions a,.map-actions .text-button,.footer-bottom a,.footer-bottom .text-button{
 display:inline-flex;align-items:center;min-height:44px}
.detail a,.phone{margin-block:-4px}
.footer-bottom>div{align-items:center}
@media(max-width:700px){
 .footer-bottom a,.footer-bottom .text-button{min-height:40px}
}

/* Buttons: the arrow belongs to the words, not adrift from them. */
.button{gap:9px}

/* The closing call to action is the loudest moment on the page; size it like it. */
.final-cta .button{min-height:64px;padding:19px 36px;font-size:1.1rem}
@media(max-width:700px){.final-cta .button{min-height:58px;padding:16px 26px;font-size:1rem}}

/* Studio credit in the footer: present, not shouting. */
.credit{color:#5a6781}
.credit a{color:inherit;text-underline-offset:3px}
.credit a:hover{color:var(--navy)}
@media(max-width:700px){.footer-bottom .credit{order:3}}

/* The hero artwork is a wide, short banner (1024x306). At the old hero
   height `cover` blew it up and cut a third off each end, so on wide
   screens the hero now takes the artwork's own proportions and shows the
   storefront whole, with the copy tightened to fit and a stronger scrim so
   it stays readable over the shopfront. Between phone and desktop the
   banner is too short to hold the copy, so there it sits above the copy
   rather than behind it, as it already does on phones. */
@media(min-width:1101px){
 .hero.hero-storefront{min-height:0;aspect-ratio:1024/306;background-size:cover;
  background-position:center center;display:flex;align-items:center}
 /* An even wash rather than a gradient, so one end of the storefront is
    not darker than the other; the copy earns its contrast from its own
    shadow instead. */
 .hero.hero-storefront::before{background:rgba(7,19,42,.20)}
 .hero.hero-storefront .hero-copy{text-shadow:0 2px 9px rgba(0,0,0,.82),0 0 22px rgba(0,0,0,.55)}
 .hero.hero-storefront .button{text-shadow:none}
 .hero.hero-storefront .hero-copy{padding:26px 6%;margin-left:auto;max-width:760px}
 .hero.hero-storefront .eyebrow{margin-bottom:9px;font-size:.7rem}
 .hero.hero-storefront h1{font-size:clamp(1.7rem,2.35vw,2.15rem);line-height:1.05;margin-bottom:12px}
 .hero.hero-storefront .intro{font-size:.98rem;line-height:1.5;margin-bottom:14px}
 .hero.hero-storefront .actions{gap:18px}
 .hero.hero-storefront .button{min-height:46px;padding:11px 20px;font-size:.9rem}
 .hero.hero-storefront .hero-address{margin-top:12px;font-size:.75rem}
}
@media(min-width:701px) and (max-width:1100px){
 .hero.hero-storefront{min-height:0;background:var(--navy)}
 .hero.hero-storefront::before{display:none}
 .hero-mobile-photo{display:block;width:100%;height:auto}
 .hero.hero-storefront .hero-copy{padding:38px 6% 42px;margin:0;max-width:none;text-shadow:none}
}

/* With the sign now running the full width of the hero, the copy is held
   below it rather than sitting across the lettering: anchored to the
   bottom of the band and trimmed enough to clear the sign at 1280 and up. */
@media(min-width:1101px){
 .hero.hero-storefront{align-items:flex-end}
 .hero.hero-storefront .hero-copy{padding:0 6% 20px}
 .hero.hero-storefront h1{font-size:clamp(1.6rem,2.05vw,1.95rem);line-height:1.04;margin-bottom:10px}
 .hero.hero-storefront .eyebrow{margin-bottom:8px}
 .hero.hero-storefront .intro{font-size:.92rem;line-height:1.45;margin-bottom:12px}
 .hero.hero-storefront .button{min-height:42px;padding:9px 18px;font-size:.86rem}
 .hero.hero-storefront .hero-address{margin-top:10px;font-size:.72rem}
}

/* Navigation links were 29px tall on tablets, under the 44px touch target
   guideline; the phone breakpoint already padded them, this covers the rest. */
header nav a{padding-block:8px}