/* Phone layouts are the default. Larger layouts are progressive enhancements. */
:root{--page-gutter:20px}
html{scroll-padding-top:20px;-webkit-text-size-adjust:100%}
body{font-size:16px;line-height:1.6;overflow-x:visible}
.wrap{width:calc(100% - var(--page-gutter)*2);max-width:1240px}
main,section,article,.wrap,.quote-box,.quote-field{min-width:0}
img,video{max-width:100%}
p{overflow-wrap:break-word;text-wrap:pretty}
h1,h2,h3{overflow-wrap:normal;text-wrap:balance}
a,button,input,select,textarea,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,.btn,.film-link,.related a,.discovery-links a,.footer-links a{min-height:48px}
.preview{height:auto;min-height:28px;padding:6px 12px;font-size:9px;line-height:1.5;letter-spacing:.035em}
.nav,.page .nav{position:relative;display:flex;flex-wrap:nowrap;gap:16px;padding:12px 0}
.logo,.page .logo{width:164px;height:51px}
.menu{display:block;border:1px solid #ffffff55;border-radius:3px;min-height:48px;padding:8px 14px;font-size:14px}
nav{display:none;position:absolute;top:100%;left:calc(-1*var(--page-gutter));right:calc(-1*var(--page-gutter));width:auto;background:var(--navy);padding:16px var(--page-gutter) 22px;z-index:30;gap:4px;font-size:16px}
nav.open,.page nav.open,.homepage nav.open{display:flex;top:100%;left:calc(-1*var(--page-gutter));right:calc(-1*var(--page-gutter));width:auto;background:var(--navy);padding:16px var(--page-gutter) 22px;flex-direction:column;align-items:stretch}
nav>a{display:flex;align-items:center;min-height:48px;padding:8px 4px}
nav>.btn{margin-top:10px}
.section,.section.intro,.regional-page .section{padding:44px 0}
.section h2,.regional-planning h2,.regional-neighbours h2{font-size:29px;line-height:1.18;margin-bottom:20px;font-weight:500}
.section h3{font-size:23px;line-height:1.25}
.eyebrow{font-size:10px;line-height:1.6;letter-spacing:.13em;margin-bottom:15px}
.page-hero,.regional-page .page-hero{padding:32px 0 38px}
.page-hero h1{font-size:clamp(31px,8vw,40px);line-height:1.14;max-width:20ch;margin-bottom:20px}
.lead,.page-hero .lead{font-size:16px;line-height:1.65;margin:0 0 23px;max-width:42ch}
.breadcrumb{font-size:12px;margin:0 0 24px}
.actions,.page-hero .actions{display:flex;flex-direction:column;align-items:stretch;gap:9px;margin-top:22px}
.actions .btn{width:100%;padding:13px 20px;font-size:15px;min-height:50px}
.actions .film-link{align-self:flex-start;font-size:14px;display:inline-flex;align-items:center;padding:8px 0}
.hero.stage-one{min-height:520px;min-height:min(630px,78svh);display:grid;place-items:center}
.hero-content{padding:40px 0 62px}
.stage-one h1{font-size:clamp(35px,9vw,48px);line-height:1.13;max-width:18ch;margin:0 auto 22px}
.stage-one p.body{font-size:16px;line-height:1.6;max-width:30ch;margin:0 auto 24px;text-wrap:balance}
.hero-content>.eyebrow{font-size:10px;margin-bottom:22px}
.hero .actions{margin:0;gap:8px;flex-direction:column;align-items:center}
.hero .actions .btn{width:100%;max-width:310px;min-height:50px;font-size:15px}
.hero .actions .film-link{align-self:center;font-size:14px;min-height:48px}
.video-control{width:48px;height:48px;font-size:18px;right:0;bottom:8px}
.dayline .wrap{display:block;padding:18px 0;text-align:center}
.dayline span{display:block;font-size:12px;margin-bottom:5px}
.dayline p{font-size:14px;word-spacing:0}
.dayline a{display:none}
.welcome-study,.intro,.feature,.faq,.story-body,.wedding-story,.alex-intro,.party-choice,.quote-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.welcome-study blockquote{padding:24px;font-size:21px;line-height:1.5}
.welcome-study cite{margin-top:15px;font-size:12px}
.section-top{display:block;margin-bottom:25px}
.section-top p{max-width:44ch;font-size:16px}
.film-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:90%;overflow-x:auto;gap:16px;scroll-snap-type:x mandatory;padding-bottom:14px;overscroll-behavior-x:contain}
.film-card{scroll-snap-align:start;padding:0}
.film-card video,.reel-card img{aspect-ratio:4/5;height:auto;max-height:440px;object-fit:cover}
.film-card h3{font-size:25px;margin-bottom:10px}
.film-card>p:not(.eyebrow){font-size:15px;line-height:1.6;margin-bottom:10px}
.reel-card .btn{font-size:14px;min-height:48px}
.proof-links{margin-top:16px;gap:8px}
.coverage-grid,.service-deck,.cards,.detail-grid,.planning-grid,.planning-steps,.quotes,.venue-directory{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.coverage-grid img,.service-card>img{height:auto;aspect-ratio:4/3;object-fit:cover}
.coverage-grid .ceremony-photo,.homepage .coverage-grid .ceremony-photo{height:auto;aspect-ratio:4/3;object-position:center 75%}
.coverage-grid article>div,.service-card>div{padding:22px}
.coverage-grid h3,.service-card h3{font-size:26px;margin-bottom:14px}
.coverage-grid p,.service-card p,.coverage-points{font-size:16px;line-height:1.6}
.service-card a,.coverage-grid .film-link{font-size:14px;min-height:48px}
.detail-grid>div,.planning-grid>div{padding-top:18px}
.detail-grid p,.planning-grid p{font-size:16px;line-height:1.65}
.story-photo,.story-photo.ceremony-photo,.wedding-story img,.wedding-story video,.alex-intro img{width:100%;height:auto;aspect-ratio:4/5;max-height:560px;object-fit:cover}
.alex-intro img{aspect-ratio:4/3;object-position:center 35%}
.photo-pair,.gallery{grid-template-columns:1fr;gap:18px}
.photo-pair img,.gallery img{height:auto;aspect-ratio:4/5}
.gallery img:first-child{grid-column:auto}
.visual-guide,.reading-layout{display:block;padding:30px 0 44px}
.structured-guide,.planning-steps{background:transparent;padding:0;border:0}
.structured-guide>.guide-feature{grid-template-columns:1fr;gap:22px;padding:0 0 28px}
.guide-feature img{height:auto;aspect-ratio:4/3;object-fit:cover}
.guide-feature-copy p,.reading-body p{font-size:16px;line-height:1.65}
.guide-answer summary{font-size:20px;line-height:1.3;padding:21px 28px 21px 0;min-height:64px}
.guide-answer .answer-content{padding:0 0 20px}
.planning-steps>.planning-step{padding:22px}
.planning-step h2{font-size:25px}
.guide-disclosure .guide-links{grid-template-columns:1fr;gap:0}
.guide-disclosure summary{font-size:17px;min-height:56px}
.guide-links{grid-template-columns:1fr;gap:0}
.guide-links a{min-height:64px;padding:18px 0}
.guide-links strong{font-size:20px;margin-bottom:6px}
.guide-links span{font-size:15px}
.price-comparison p{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0}
.price-comparison strong{font-size:17px}
.price-comparison span{font-size:16px}
.regional-page .local-venues,.venue-group ul,.local-venues{columns:1}
.service-note,.contact-panel{padding:22px;margin-top:25px}
.quote-layout h2{font-size:30px}
.quote-box{padding:20px}
.quote-grid{grid-template-columns:1fr;gap:20px}
.quote-field.wide{grid-column:auto}
.quote-field label{font-size:15px;line-height:1.4;margin-bottom:8px}
.quote-field input,.quote-field select,.quote-field textarea{font:16px/1.5 'DM Sans',Arial,sans-serif;min-height:50px;padding:12px;width:100%}
.quote-submit{width:100%;font-size:15px;min-height:52px}
.form-hint{font-size:14px;line-height:1.5}
.footer{padding:35px 0}
.footer .wrap,.page .footer .wrap{display:flex;flex-direction:column;align-items:stretch;gap:25px}
.footer-links,.page .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 15px;max-width:none}
.footer-links a{font-size:13px;min-height:48px}
.footer-bottom{justify-content:flex-start;gap:8px 20px;margin-top:24px}
.legal main{width:100%;padding:35px 20px}
.legal h1{font-size:32px}
@media(min-width:600px){
 :root{--page-gutter:32px}
 .actions,.page-hero .actions{flex-direction:row;align-items:center;gap:20px}
 .actions .btn{width:auto;min-width:180px}
 .page-hero h1{font-size:46px}
 .section h2{font-size:36px}
 .hero .actions{flex-direction:row;justify-content:center;gap:24px}
 .hero .actions .btn{width:auto}
 .stage-one h1{font-size:52px}
 .film-grid{grid-auto-columns:55%}
 .detail-grid,.planning-steps,.quotes,.venue-directory,.photo-pair,.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quote-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quote-field.wide{grid-column:1/-1}
 .price-comparison p{display:flex;justify-content:space-between}
 .footer-links,.page .footer-links{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1000px){
 :root{--page-gutter:48px}
 .nav,.page .nav{padding:20px 0}
 .logo,.page .logo{width:205px;height:67px}
 .menu{display:none}
 nav,nav.open,.page nav.open,.homepage nav.open{display:flex;position:static;flex-direction:row;align-items:center;width:auto;padding:0;gap:22px;font-size:13px}
 nav>a{padding:0}nav>.btn{margin-top:0;padding:12px 20px}
 .section,.section.intro,.regional-page .section{padding:75px 0}
 .section h2{font-size:48px}
 .page-hero,.regional-page .page-hero{padding:65px 0}
 .page-hero h1{font-size:62px}
 .lead,.page-hero .lead{font-size:19px;max-width:58ch}
 .hero.stage-one{min-height:650px}
 .hero-content{padding:70px 0}
 .stage-one h1{font-size:70px}
 .stage-one p.body{font-size:18px;max-width:45ch}
 .welcome-study,.intro,.feature,.faq,.story-body,.wedding-story,.alex-intro,.party-choice,.quote-layout{grid-template-columns:1fr 1fr;gap:60px}
 .coverage-grid,.service-deck,.cards,.planning-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .film-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;padding:0;gap:28px}
 .coverage-grid img,.service-card>img{height:290px;aspect-ratio:auto}
 .homepage .coverage-grid .ceremony-photo{height:290px;aspect-ratio:auto}
 .structured-guide>.guide-feature{grid-template-columns:1.1fr .9fr;gap:50px;padding-bottom:40px}
 .guide-feature img{height:380px;aspect-ratio:auto}
 .story-photo,.story-photo.ceremony-photo,.wedding-story img,.wedding-story video{max-height:720px}
 .quote-box{padding:32px}
 .quote-submit{width:auto;min-width:180px}
 .regional-page .local-venues{columns:3}
 .venue-group ul{columns:2}
 .guide-disclosure .guide-links{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer .wrap,.page .footer .wrap{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:45px}
 .footer-links,.page .footer-links{max-width:660px}
 .legal main{max-width:800px;padding:55px 24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Original photographs from the existing Mobile Beats website. */
.original-photo-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}.original-photo-grid figure{margin:0;min-width:0}.original-photo-grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px}.original-photo-grid figure:first-child img{object-position:center}.original-portrait img{display:block;width:100%;max-width:960px;height:auto;margin:auto;border-radius:6px}@media(min-width:700px){.original-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.homepage .original-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.setup-photo-grid,.supplied-video-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:24px}.setup-photo-grid figure{margin:0}.setup-photo-grid img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:6px}.supplied-video-grid video,.single-supplied-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#091525;border-radius:6px}.supplied-video-grid h3{margin-top:14px}.single-supplied-video{max-width:420px}@media(min-width:700px){.setup-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.supplied-video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
