@font-face{font-family:Figtree;src:url(assets/fonts/Figtree-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(assets/fonts/Figtree-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Figtree;src:url(assets/fonts/Figtree-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Caprasimo;src:url(assets/fonts/Caprasimo-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--cream:#f8f0e8;--green:#1c3a2c;--coral:#a8452f;--line:#d8c9b1;--line-strong:#8a7a62;--ink:#272820}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
/* On pages with the floating bar, anything scrolled into view (a tabbed-to button,
   a find-in-page match) stops above the bar instead of underneath it. */
html:has(body.has-floating-actions){scroll-padding-bottom:96px}
body{margin:0;background:var(--cream);color:var(--ink);font:18px/1.6 Figtree,sans-serif}
a{color:inherit;text-underline-offset:5px}
button,a{-webkit-tap-highlight-color:transparent}
/* Buttons use the page font, not the browser's default (it was Arial on "Send request"). */
button{font-family:inherit}
a:focus-visible{outline:3px solid var(--coral);outline-offset:6px}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:auto;padding:0 48px}
.skip{position:absolute;left:10px;top:-100px;background:white;padding:12px;z-index:70}
.skip:focus{top:10px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Typography and shared pieces */
h1,h2,h3{color:var(--green);font-family:Caprasimo,Georgia,serif;font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,4.7vw,66px);letter-spacing:-.035em}
h1 em,h2 em{font-style:normal;color:var(--coral)}
h2{font-size:clamp(32px,3.4vw,46px);letter-spacing:-.02em}
h3{font-size:27px}
p{margin:20px 0;text-wrap:pretty}
.nowrap{white-space:nowrap}
.eyebrow{font-size:12px;letter-spacing:.17em;font-weight:700;color:var(--coral);margin:0 0 20px}
.intro{font-size:19px;line-height:1.5;margin-top:28px}
/* A quiet italic line between the headline and the intro, e.g. the homepage's "Population: two and growing." */
.hero-tagline{font-size:16px;font-style:italic;line-height:1.4;color:#615d51;margin:28px 0 0}
.hero-tagline+.intro{margin-top:10px}
.text-link{font-size:16px;font-weight:700}
.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;border:0;background:var(--green);color:var(--cream);text-decoration:none;padding:15px 24px;border-radius:4px;font-size:16px;font-weight:700;transition:background .2s}
.button:hover{background:#2e5b45}
.button.small{padding:10px 20px}
.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}
.section-heading{display:flex;justify-content:space-between;align-items:end;align-items:last baseline;gap:30px;margin-bottom:32px}
.section-heading p:last-child{font-size:16px;margin:0}

/* Header */
.nav{max-width:1340px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:18px 48px;border-bottom:1px solid var(--line);gap:24px}
.nav nav{display:flex;font-size:15px}
.nav nav a{text-decoration:none}
.nav nav a[aria-current]{color:var(--green);font-weight:700}
/* The header row lists the site's pages, Home included to match the menus. The
   "On this page" group only shows in the collapsed menu. */
@media(min-width:1001px){
/* A lighter desktop header: bigger links (Ze, 27 Sep 2026). */
.nav nav{font-size:17px}
.nav>.button.small{font-size:16px;padding:12px 22px}
.nav-pages{display:flex;gap:40px}
.nav-group-title,.nav-sections{display:none}
.nav nav a{padding-block:4px;background:linear-gradient(currentColor,currentColor) 50% 100%/0 2px no-repeat;transition:background-size .25s ease}
.nav nav a:hover,.nav nav a:focus-visible,.nav nav a[aria-current="page"]{background-size:100% 2px}
.nav nav a[aria-current="page"]{background-image:linear-gradient(var(--coral),var(--coral))}
}
.menu-toggle{display:none}

/* Brand mark: the rose crest from the design-system deck, shared by header and footer */
.brand-home{display:inline-flex;align-items:center;text-decoration:none}
.brand-crest{display:block;width:auto;height:68px}
/* One header crest size at every width (Ze, 27 Sep 2026); the footer keeps its larger one. */
.nav .brand-crest{height:56px}
.footer-brand .brand-crest{height:96px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(28px,4vw,48px);padding-top:64px;padding-bottom:80px}
.hero-copy,.hero-photo{min-width:0}
.hero-copy>p:not(.eyebrow){max-width:430px}
.hero-eyebrow>span{display:block}
.hero-event-types{margin-top:6px;letter-spacing:.06em;text-wrap:balance}
.hero .actions .button{width:auto;max-width:100%;min-height:54px;padding:14px 22px;font-size:16px;line-height:1.5;gap:12px}
/* One desktop headline size on every page (Ze, 27 Sep 2026), up to 56px. That's the largest
   size at which every headline fits its column: the 404's "took a wrong turn" needs 583px at
   66px in a 510px column. The tablet and phone rules further down take over at 1000px. */
.hero h1{font-size:clamp(40px,4.4vw,56px)}
.hero-photo{margin:0;width:100%;justify-self:center;align-self:center;position:relative;background:#d9d0c5;border-radius:5px;overflow:hidden}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:1400 / 933;object-fit:contain}

/* Live video */
.watch{padding-top:45px;border-top:1px solid var(--line);padding-bottom:55px}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-frame-still{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* Loading sequence: a black layer fades in over the still (and hides the player
   loading underneath), the crest pops up over a loading count, and the whole
   loader fades away once YouTube is playing. */
.video-loader{position:absolute;inset:0;z-index:2;background:#000;animation:to-black .6s ease .1s both;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#fff;pointer-events:none;transition:opacity .45s ease,visibility 0s}
.video-loader-crest{width:clamp(104px,14vw,176px);height:auto;animation:crest-pop .6s cubic-bezier(.2,.9,.3,1.35) .3s both}
.video-loader-count{margin:0;font-size:15px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.82);animation:fade-in .4s ease .55s both}
.video-frame.is-ready .video-frame-still{display:none}
.video-frame.is-ready .video-loader{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
@keyframes to-black{from{background-color:rgba(0,0,0,0)}to{background-color:#000}}
@keyframes crest-pop{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.video-loader-crest{animation:fade-in .3s ease .2s both}}
.video-preview{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:5px;background:var(--green);color:white}
button.video-preview{width:100%;padding:0;border:0;font:inherit;text-align:left;cursor:pointer}
button.video-preview:focus-visible{outline:3px solid var(--coral);outline-offset:6px}
.video-preview>img{width:100%;height:100%;object-fit:cover}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--cream);color:var(--green);font-size:28px;padding-left:4px;z-index:1;box-shadow:0 4px 30px #0004}
.video-preview:hover .video-play{background:white}
.video-fallback{display:inline-block;margin-top:14px}

/* Lineups */
.lineups{padding-top:38px;padding-bottom:75px}
.lineup-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lineup{padding:28px 22px;display:flex;flex-direction:column;text-decoration:none;border-right:1px solid var(--line);transition:background .2s}
.lineup:first-child{border-left:1px solid var(--line)}
.lineup:hover{background:#eee2d5}
.lineup-num{color:var(--coral);font:40px Caprasimo,Georgia,serif;margin-bottom:30px}
.lineup-unit{font-size:.6em;margin-left:2px}
.lineup h3{font-size:24px}
.lineup-descriptor{font-size:16px;font-weight:700;color:var(--coral);margin:12px 0 8px}
.lineup-use{font-size:16px;line-height:1.45;margin:0 0 14px}
.lineup-instrumentation{font-size:14px;line-height:1.45;color:#615d51;margin:0 0 20px}
.watch-link{font-size:15px;font-weight:700;margin-top:auto;display:flex;justify-content:space-between}
.lineup small{font-size:12px;letter-spacing:.1em;margin-top:10px;color:#615d51}
@supports (grid-template-rows:subgrid){
 .lineup{display:grid;grid-template-rows:subgrid;grid-row:span 7}
}
.lineup-footer{display:flex;justify-content:space-between;align-items:baseline;gap:16px 32px;padding-top:20px}
.lineup-footer p{margin:0;font-size:16px}
.lineup-footer p:last-child:not(:only-child){text-align:right}

/* Reviews */
.reviews{background:var(--green);color:var(--cream);padding:56px 0}
.reviews-inner{max-width:920px;text-align:center}
.reviews h2{color:var(--cream)}
.review-rating{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:16px}
.review-stars{display:flex;justify-content:center;gap:5px;color:#fbc76b}
.reviews .review-score{margin:0;font-size:15px;color:var(--cream)}
.review-stars svg{width:21px;height:21px;fill:currentColor}
/* Quotes in the body face for easy reading; the Caprasimo heading carries the brand */
.reviews blockquote{font-size:18px;line-height:1.6;margin:0 0 14px}
.review-list.is-carousel blockquote{min-height:87px}
.reviews p{font-size:16px;margin:12px 0}
.review-list{list-style:none;max-width:680px;margin:32px auto 8px;padding:0}
.reviews .review-list p{font-size:15px;margin:0 0 20px;color:#d8e3dc}
.reviews .review-list strong{color:var(--cream)}
.review-list>li+li{border-top:1px solid #2e5b45;margin-top:20px;padding-top:4px}
.review-list.is-carousel>li+li{border-top:0;margin-top:0;padding-top:0}
.review-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0}
.review-controls[hidden]{display:none}
/* Same square buttons and counter as the photo stacks (Ze, 2 Oct 2026), in colours for the green band. */
.review-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #a7c9b5;border-radius:8px;background:transparent;color:var(--cream);font-size:20px;cursor:pointer;transition:background .2s}
.review-controls button:hover{background:#2e5b45}
.review-controls button:focus-visible{outline:3px solid #fbc76b;outline-offset:4px}
.review-controls span{min-width:56px;font-size:13px;font-weight:700;letter-spacing:.12em;text-align:center;color:#cbd7d0}
.reviews .text-link{display:inline-block;margin-top:4px}
.reviews a:focus-visible{outline-color:#fbc76b}

/* Story and original music */
.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding-top:95px;padding-bottom:95px}
.about>img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:5px}
.about p{font-size:17px;max-width:34em}
.about>div>p:last-child{margin-bottom:0}
.pronounce{color:#615d51;white-space:nowrap}
.original-music{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:48px;padding-top:48px;padding-bottom:64px;border-top:1px solid var(--line)}
.original-music iframe{display:block;border:0;border-radius:12px;max-width:100%}
.original-music p:not(.eyebrow){max-width:400px}

/* Contact and enquiry form */
.contact{background:#eee2d5;text-align:center;padding:96px 0}
.contact h2{color:var(--green);font-size:clamp(42px,5vw,62px);line-height:1.08}
.contact p{font-size:17px}
.contact-inner{max-width:820px}
.contact .contact-inner>p{max-width:560px;margin:22px auto 0}
.contact .contact-inner>.contact-estimate{margin-top:14px;font-size:15px}
.contact-estimate a{white-space:nowrap}
.contact [data-email]{overflow-wrap:anywhere;max-width:100%;text-decoration:underline}
.enquiry-form{margin:38px auto 0;max-width:760px;text-align:left}
.enquiry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.form-field{display:flex;min-width:0;flex-direction:column;gap:7px}
.form-field-wide{margin-top:20px}
/* An odd last field takes the full row, so the grid never ends on a gap. */
.enquiry-grid>.form-field:last-child:nth-child(odd){grid-column:1/-1}
.form-field label{font-size:15px;font-weight:700;color:var(--green)}
.form-field input,.form-field select,.form-field textarea{width:100%;min-width:0;max-width:100%;border:1px solid var(--line-strong);border-radius:4px;background:var(--cream);color:var(--ink);font:inherit;font-size:16px;line-height:1.4;padding:13px 14px;box-shadow:none}
@supports(-webkit-touch-callout:none){
.form-field input[type="date"]{padding-left:0;padding-right:0}
.form-field input[type="date"]::-webkit-date-and-time-value{padding-left:14px;padding-right:14px;text-align:left}
}
.form-field input:not([type=checkbox]):not([type=radio]),.form-field select{min-height:52px}
/* Browsers indent a select's text about 4px past its padding; this lines it up with the inputs. */
.form-field select{cursor:pointer;padding-left:10px}
.form-field textarea{resize:vertical;min-height:112px}
.form-field input::placeholder,.form-field textarea::placeholder{color:#6b6559;opacity:1}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:3px solid var(--coral);outline-offset:2px;border-color:var(--coral)}
.form-field.has-error input,.form-field.has-error select,.form-field.has-error textarea{border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral)}
.form-field .field-error{margin:0;color:#6c2519;font-size:14px;font-weight:700;line-height:1.4}
.form-field .field-error::before{content:"!";content:"!" / "";display:inline-grid;place-items:center;width:17px;height:17px;margin-right:7px;border-radius:50%;background:#6c2519;color:#fff;font-size:12px;line-height:1;vertical-align:1px}
.form-note{font-size:14px!important;margin:14px 0 0!important;color:#615d51}
.form-error{margin:14px 0 0!important;padding:10px 12px;background:#f8d9d1;color:#6c2519;font-size:15px!important;font-weight:700;border-left:3px solid var(--coral)}
.enquiry-submit{width:100%;min-height:56px;margin-top:24px;border:0;cursor:pointer;font-family:Figtree,sans-serif}
.enquiry-submit:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.email-option{display:block;width:max-content;max-width:100%;margin:20px auto 0;color:var(--green);font-size:15px;font-weight:700;text-align:center;text-underline-offset:5px}
.email-option:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
/* Corporate: planners often need an email trail, so email sits beside WhatsApp as an equal choice. */
.enquiry-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.enquiry-actions .enquiry-submit{margin-top:0}
/* Same height for both buttons, side by side or stacked: both carry a 1px border
   (WhatsApp's is see-through) and the same line height. */
.enquiry-actions .button{min-height:56px;line-height:1.4;border:1px solid var(--green)}
.enquiry-actions .enquiry-submit{border-color:transparent}
.button-outline,.contact .button-outline[data-email]{min-height:56px;border:1px solid var(--green);background:transparent;color:var(--green);text-decoration:none}
.button-outline:hover,.contact .button-outline[data-email]:hover{background:var(--cream)}
.button-outline:focus-visible{outline:3px solid var(--coral);outline-offset:4px}

/* Weddings page */
.breadcrumb{padding-top:22px;font-size:14px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;color:#615d51}
.breadcrumb li+li::before{content:"\203A";margin-right:8px;color:var(--line-strong)}
.breadcrumb a{color:var(--green)}
/* The breadcrumb and email links are small text, so an invisible hit area makes them
   44px tall to tap without moving anything around them. */
.breadcrumb a,.email-option{position:relative}
.breadcrumb a::after{content:"";position:absolute;inset:-14px -10px}
.email-option::after{content:"";position:absolute;inset:-10px -4px}
.moments{padding-top:45px;padding-bottom:75px;border-top:1px solid var(--line)}
.moment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 48px}
.moment h3{font-size:22px;color:var(--coral)}
.moment p{font-size:16px;line-height:1.5;margin:10px 0 0;max-width:34em}
.prose{padding-top:48px;padding-bottom:75px;border-top:1px solid var(--line)}
.prose h2{font-size:clamp(28px,3.4vw,38px)}
.prose h2+p{margin-top:16px}
.prose p{font-size:17px;line-height:1.6;max-width:34em;margin:16px 0 0}
.prose h2:not(:first-child){margin-top:64px}
.prose-text>p:last-child{margin-top:28px}
/* Stacked photo carousel beside the prose text. app.js sets each card's data-pos;
   the HTML ships with the first three placed, so it still looks right without it. */
.prose-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:64px;align-items:center}
.stack-stage{position:relative;aspect-ratio:1/.9;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.stack-card{position:absolute;top:50%;left:0;width:64%;aspect-ratio:3/4;margin:0;border-radius:6px;overflow:hidden;background:var(--green);box-shadow:0 18px 40px rgba(28,58,44,.18);transform-origin:left center;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s ease,filter .6s ease}
/* The photos ignore the pointer so a mouse drag swipes instead of picking up the image. */
.stack-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.stack-card[data-pos="0"]{transform:translate(0,-50%);z-index:4;cursor:pointer}
.stack-card[data-pos="1"]{transform:translate(42%,-50%) scale(.8);z-index:3;filter:brightness(.92)}
.stack-card[data-pos="2"]{transform:translate(86%,-50%) scale(.64);z-index:2;filter:brightness(.85)}
.stack-card[data-pos="far"]{transform:translate(100%,-50%) scale(.54);z-index:1;opacity:0}
.stack-card[data-pos="gone"]{transform:translate(-18%,-50%) scale(1.02);z-index:5;opacity:0;pointer-events:none}
/* Landscape photos show whole, over a blurred and enlarged copy of themselves. */
.stack-card.is-wide{background:#1c1c1a}
.stack-card .stack-fill{position:absolute;inset:0;filter:blur(18px) brightness(.75);transform:scale(1.2)}
.stack-card.is-wide img:not(.stack-fill){position:relative;object-fit:contain}
.stack-controls{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:18px}
.stack-controls[hidden]{display:none}
.stack-count{margin-right:auto;font-size:13px;letter-spacing:.12em;font-weight:700;color:#615d51}
.stack-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--cream);color:var(--green);font-size:20px;cursor:pointer;transition:background .2s}
.stack-controls button:hover{background:#eee2d5}
.stack-controls button:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
/* The pause button shows pause while the photos move on by themselves, play once stopped. */
.stack-pause .icon-play,.stack-pause.is-paused .icon-pause{display:none}
.stack-pause.is-paused .icon-play{display:block}
.stack-controls .stack-count{margin-left:6px}
@media(max-width:900px){
.prose-layout{grid-template-columns:minmax(0,1fr);gap:40px}
.stack{width:100%;max-width:440px;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){.stack-card{transition:none}}
.proof{padding-top:48px;padding-bottom:75px;border-top:1px solid var(--line)}
.client-label{margin:52px 0 20px;font-size:12px;letter-spacing:.17em;font-weight:700;color:#615d51;text-align:center}
.client-logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 52px}
.client-logos img{display:block;width:auto;max-width:100%;opacity:.82}
/* Optical balance (Ze, 29 Sep 2026): each logo is centred by its whole shape, so the
   Amazon smile lifts its word and the Coach carriage drops its word. Nudge them halfway
   towards a shared centre line; percentages scale with the logo on every screen. */
.client-logos img[alt="Amazon"]{transform:translateY(10%)}
.client-logos img[alt="Coach"]{transform:translateY(-16%)}
.client-logos img[alt="Shiseido"]{transform:translateY(-4%)}
/* Homepage: photo cards into the weddings and corporate pages, closing the lineups */
.plan-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:64px}
/* The text sits in the flow at the bottom, and overflow:clip (not hidden) lets the card
   grow past its 3:2 shape when the text is enlarged instead of cutting the heading off. */
.plan-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 32px;aspect-ratio:3/2;overflow:hidden;overflow:clip;border-radius:5px;background:var(--green);color:var(--cream);text-decoration:none}
.plan-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.plan-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,24,18,.88) 0%,rgba(15,24,18,.45) 38%,rgba(15,24,18,0) 65%)}
.plan-card-text{position:relative;z-index:1}
/* Below desktop the heading wraps higher up the photo, so the shade reaches further.
   Two to a row (701-1023px) it stops lower so the top of each photo stays clear. */
@media(max-width:1023px){.plan-card::after{background:linear-gradient(to top,rgba(15,24,18,.9) 0%,rgba(15,24,18,.7) 55%,rgba(15,24,18,0) 78%)}.plan-card h3{text-shadow:0 1px 12px rgba(15,24,18,.55)}}
@media(max-width:700px){.plan-card::after{background:linear-gradient(to top,rgba(15,24,18,.9) 0%,rgba(15,24,18,.62) 55%,rgba(15,24,18,0) 88%)}}
/* The corporate photo's bright stage screen sits behind its heading in places, so that
   card's shade reaches higher two to a row, and on the smallest phones it stays darker
   higher up and the photo shifts left. */
@media(min-width:701px) and (max-width:1023px){.plan-card[href="corporate-events.html"]::after{background:linear-gradient(to top,rgba(15,24,18,.9) 0%,rgba(15,24,18,.72) 58%,rgba(15,24,18,0) 85%)}}
/* Just above two to a row, slimmer side padding keeps "See how we fit your programme →"
   on one line, so the heading above it stays low over the shade. */
@media(min-width:701px) and (max-width:760px){.plan-card{padding-left:26px;padding-right:26px}}
@media(max-width:359px){.plan-card[href="corporate-events.html"]::after{background:linear-gradient(to top,rgba(15,24,18,.92) 0%,rgba(15,24,18,.74) 60%,rgba(15,24,18,.35) 100%)}.plan-card[href="corporate-events.html"] img{object-position:0 50%}}
.plan-card h3{color:var(--cream);font-size:clamp(22px,calc(3.5vw - 10px),34px);line-height:1.15;margin:0 0 10px}
.plan-card-link{font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.plan-card:hover img{transform:scale(1.03)}
.plan-card:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
/* Homepage and Corporate: where you may have seen us, heading beside a 2 x 2 grid,
   logos below */
.home-proof{padding-top:56px;padding-bottom:56px}
.seen-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:32px 64px}
.seen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px}
.seen-item{border-top:1px solid var(--line);padding-top:14px}
.seen-item h3{font-size:22px;color:var(--coral)}
.seen-item p{font-size:16px;line-height:1.5;margin:8px 0 0}
.home-proof .client-label{margin:56px 0 24px}
/* Contact: say what the WhatsApp button does */
/* Scoped to beat .contact p (17px), which otherwise sets the size on the homepage,
   weddings and corporate forms */
.form-reassure,.contact .form-reassure{margin:14px 0 0;font-size:15px;color:#615d51;text-align:center;text-wrap:balance}
.contact .contact-inner>.contact-crosslink{margin-top:40px;font-size:16px}
.faq{padding-top:56px;padding-bottom:64px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
/* Service-page FAQs are grouped under short subheads; each group closes with its own line. */
.faq-group{margin:44px 0 12px;font-size:22px;color:var(--coral)}
/* Rows stop where a long answer would, so the +/− stays near the question on wide screens. */
.faq details,.faq-group{max-width:760px}
.section-heading+.faq-group{margin-top:8px}
.faq details:has(+.faq-group){border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 2px;font-size:17px;font-weight:700;color:var(--green);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--coral);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--coral)}
.faq summary:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.faq details p{font-size:16px;line-height:1.6;max-width:34em;margin:0 2px 22px}

/* Footer */
footer{border-top:1px solid var(--line)}
.footer-inner{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:40px;padding-top:52px;padding-bottom:36px}
.footer-brand p{margin:16px 0 0;font-size:15px;max-width:290px;text-wrap:pretty}
.footer-heading{margin:0;color:var(--coral);font-family:Figtree,sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.4;text-transform:uppercase}
.footer-nav,.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.footer-heading+a{margin-top:0}
/* Every footer link is a 44px-tall tap target (roadmap P7, Ze, 28 Sep 2026). */
.footer-nav a,.footer-contact a{display:inline-flex;align-items:center;gap:.3em;min-height:44px;font-size:15px;text-decoration:none;overflow-wrap:anywhere}
.footer-nav a:hover,.footer-contact a:hover{text-decoration:underline}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;padding-bottom:30px;border-top:1px solid var(--line)}
.footer-base span{color:#615d51;font-size:14px}

/* Homepage floating bar: estimator link and a menu of page sections. */
.floating-actions{position:fixed;right:max(32px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:10;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px)}
.floating-actions[hidden]{display:none}
.floating-actions:focus{outline:none}
/* The bar never hides now, so the page ends with room for it: the last line of the
   footer can always scroll clear of it. */
.has-floating-actions .footer-base{padding-bottom:104px}
.floating-estimate{display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;border:1px solid #f8f0e8;border-radius:999px;background:var(--green);color:var(--cream);font-size:15px;font-weight:700;line-height:1.35;text-decoration:none;white-space:nowrap;box-shadow:0 7px 22px rgba(28,58,44,.28)}
.floating-estimate:hover{background:#2e5b45}
.floating-menu-toggle{position:relative;flex:none;width:48px;height:48px;padding:0;border:1px solid var(--green);border-radius:50%;background:var(--cream);color:var(--green);cursor:pointer;box-shadow:0 7px 22px rgba(28,58,44,.2)}
.floating-menu-toggle:hover{background:#eee2d5}
.floating-menu-toggle span{position:absolute;left:14px;top:22px;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.floating-menu-toggle span:nth-child(1){transform:translateY(-6px)}
.floating-menu-toggle span:nth-child(3){transform:translateY(6px)}
.menu-open .floating-menu-toggle span:nth-child(1){transform:rotate(45deg)}
.menu-open .floating-menu-toggle span:nth-child(2){opacity:0}
.menu-open .floating-menu-toggle span:nth-child(3){transform:rotate(-45deg)}
/* A cream halo under the coral ring keeps it visible over the green sections too. */
.floating-estimate:focus-visible,.floating-menu-toggle:focus-visible{outline:3px solid var(--coral);outline-offset:2px;box-shadow:0 0 0 2px var(--cream),0 7px 22px rgba(28,58,44,.28)}
.floating-menu{position:absolute;right:0;bottom:calc(100% + 10px);display:flex;flex-direction:column;min-width:200px;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--cream);box-shadow:0 12px 32px rgba(28,58,44,.22);transform-origin:bottom right;transition:opacity .22s ease-out,transform .22s ease-out}
.floating-menu[hidden]{display:none}
.floating-menu:not(.is-open){opacity:0;transform:translateY(10px) scale(.96)}
.floating-menu-group{display:flex;flex-direction:column}
.floating-menu-title{margin:8px 14px 2px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.floating-menu a{display:flex;flex:none;align-items:center;min-height:44px;padding:4px 14px;border-radius:5px;color:var(--ink);font-size:15px;text-decoration:none}
/* The current page is marked by weight and a coral bar, so it never reads as one of the coral group titles. */
.floating-menu a[aria-current]{color:var(--green);font-weight:700;border-radius:0 5px 5px 0;box-shadow:inset 3px 0 0 var(--coral)}
.floating-menu a:hover{background:#eee2d5}
.floating-menu a:focus-visible{outline:3px solid var(--coral);outline-offset:-3px}
.floating-menu .floating-menu-top{margin-bottom:4px;color:var(--green);font-weight:700;border-bottom:1px solid var(--line);border-radius:5px 5px 0 0}
/* Phones get the smallest comfortable tap size so the bar covers as little as possible. */
@media(max-width:600px){
.floating-actions{right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));gap:8px}
.floating-estimate{min-height:44px;padding:9px 16px;font-size:14px}
.floating-menu-toggle{width:44px;height:44px}
.floating-menu-toggle span{left:12px;top:20px}
html:has(body.has-floating-actions){scroll-padding-bottom:76px}
}
@media(prefers-reduced-motion:reduce){.floating-menu,.floating-menu-toggle span{transition:none}}

/* Desktop shortcut for returning from the lower sections without adding a mobile control. */

@media(min-width:1001px) and (max-width:1100px){
.nav-pages{gap:24px}
/* The hero text column is narrowest here: "Tell us about your day" and its estimate
   link need 18px more than they get at 1001px, so tighten the row to keep one line. */
.hero .actions{gap:12px}
.hero .actions .button{padding-left:18px;padding-right:18px}
}

@media(max-width:1000px){
.hero{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:40px;padding-bottom:48px}
.hero-copy{width:100%;max-width:680px;justify-self:start}
.hero-copy>p:not(.eyebrow){max-width:580px}
.hero-photo{justify-self:stretch}
.hero h1{font-size:clamp(40px,6.5vw,60px)}
.hero-event-types{text-wrap:initial}
/* Collapse the header menu here: the full link row needs about 980px. */
.nav{flex-wrap:wrap;gap:12px}
.nav>a:first-child{margin-right:auto}
.menu-ready .menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid var(--green);border-radius:4px;background:transparent;color:var(--green);font:700 15px Figtree,sans-serif;cursor:pointer}
.menu-toggle:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.nav nav{order:4;flex-basis:100%;flex-direction:column;gap:18px;padding-top:14px;border-top:1px solid var(--line)}
.nav.menu-ready nav{display:none}
.nav.menu-open nav{display:flex}
.nav-group{display:flex;flex-direction:column}
.nav-group-title{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.nav nav a{display:flex;align-items:center;min-height:44px;padding:4px 0;border-bottom:1px solid var(--line)}
.nav nav a[aria-current]{padding-left:12px;box-shadow:inset 3px 0 0 var(--coral)}
/* The menu opens over the page (Ze, 27 Sep 2026): the header stays on top of a dimmed
   backdrop, and this page's sections sit in two columns so the menu fits a small phone. */
.nav{position:relative;z-index:60;background:var(--cream)}
.nav.menu-open nav{position:absolute;top:100%;left:0;right:0;padding:14px 0 18px;padding-left:inherit;padding-right:inherit;background:var(--cream);border-bottom:1px solid var(--line);max-height:calc(100vh - var(--menu-top,89px));max-height:calc(100dvh - var(--menu-top,89px));overflow-y:auto;overscroll-behavior:contain}
.nav-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
.nav-sections .nav-group-title{grid-column:1/-1}
.menu-backdrop{position:fixed;inset:0;z-index:55;background:rgba(20,30,24,.45)}
.menu-backdrop[hidden]{display:none}
.menu-lock{overflow:hidden}
}

@media(max-width:900px){
.wrap{padding-left:28px;padding-right:28px}
.nav{padding:18px 28px}
.lineup-grid{grid-template-columns:repeat(2,1fr)}
.lineup:nth-child(3){border-left:1px solid var(--line)}
.lineup:nth-child(-n+2){border-bottom:1px solid var(--line)}
.about{grid-template-columns:minmax(0,1fr);gap:35px}
.footer-inner{grid-template-columns:1fr 1fr;gap:32px}
.footer-brand{grid-column:1/-1}
.about>img{aspect-ratio:1;max-width:520px;justify-self:center}
.section-heading{display:block}
.section-heading p:last-child{margin-top:20px}
}

@media(max-width:800px){
.original-music{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:36px;padding-bottom:44px}
.moment-grid{grid-template-columns:minmax(0,1fr);gap:28px}
.client-logos{gap:24px 36px}
}

@media(max-width:700px){
.lineup-footer{flex-direction:column;gap:12px}
.lineup-footer p:last-child{text-align:left}
}

@media(max-width:600px){
body{font-size:16px}
.text-link{display:inline-block;min-height:44px;padding:9px 4px;margin-left:-4px;margin-right:-4px}
.nav{padding:16px 22px}
.nav .small{font-size:14px;min-height:44px}
.hero h1{font-size:clamp(36px,8.5vw,49px)}
.hero-event-types{text-wrap:balance}
.intro{font-size:16px}
.hero-tagline{font-size:14px}
.hero-eyebrow{font-size:11px}
.hero .actions{gap:12px}
.watch{padding-top:35px;padding-bottom:32px}
.lineups{padding-top:16px}
.video-play{width:56px;height:56px;font-size:22px}
.lineup{padding:22px 14px}
.lineup h3{font-size:22px}
.lineup-num{margin-bottom:20px}
.reviews{padding:40px 0}
.reviews blockquote{font-size:17px}
.review-list.is-carousel blockquote{min-height:0}
.about{grid-template-columns:1fr;padding-top:55px;padding-bottom:55px}
.about>img{aspect-ratio:1}
.contact{padding:64px 0}
.contact h2{font-size:clamp(36px,9vw,42px)}
.contact .button{width:100%;font-size:15px;padding:15px}
.enquiry-form{margin-top:30px}
.enquiry-grid{grid-template-columns:1fr;gap:16px}
.enquiry-actions{grid-template-columns:1fr}
.form-field-wide{margin-top:16px}
.form-field input,.form-field select,.form-field textarea{font-size:16px;padding:12px 13px}
.form-field select{padding-left:9px}
@supports(-webkit-touch-callout:none){
.form-field input[type="date"]{padding-left:0;padding-right:0}
.form-field input[type="date"]::-webkit-date-and-time-value{padding-left:13px;padding-right:13px}
}
.enquiry-submit,.contact .enquiry-email{font-size:16px!important}
.email-option{margin-top:18px}
.footer-inner{grid-template-columns:1fr;gap:30px;padding-top:40px;padding-bottom:28px}
.footer-base{padding-bottom:26px}
.has-floating-actions .footer-base{padding-bottom:84px}
}

@media(max-width:480px){
.lineup-grid{grid-template-columns:minmax(0,1fr)}
.lineup{border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 20px}
.lineup:last-child{border-bottom:0}
.lineup-num{margin-bottom:14px}
}

@media(max-width:400px){
.nav{padding-left:16px;padding-right:16px;gap:8px}
.nav .small{padding:10px 12px}
.menu-ready .menu-toggle{padding:8px 10px}
}

@media(max-width:350px){
.hero h1{font-size:33px}
#not-found-title{font-size:29px}
}

/* Scroll reveal: app.js adds .reveal only to things below the screen at load, then
   .is-revealed as each one scrolls into view. Opacity and transform only, so the
   layout never shifts. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-revealed{opacity:1;transform:none}
@media print{.reveal{opacity:1;transform:none;transition:none}}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition:none!important}
}

@media(max-width:800px){
.seen-layout{grid-template-columns:minmax(0,1fr);gap:24px}
.seen-grid{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media(max-width:700px){
.plan-cards{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:48px}
.plan-card{aspect-ratio:16/10}
.plan-card{padding:20px 22px}
.plan-card h3{font-size:26px;margin-bottom:8px}
}
@media(max-width:600px){
.home-proof{padding-top:40px;padding-bottom:40px}
.home-proof .client-label{margin-top:44px}
.form-reassure,.contact .form-reassure{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.plan-card img{transition:none}}
/* Below 780px the five logos no longer fit on one row, so they sit in a fixed 3 + 2 grid
   at 80% of their desktop height and Coach never ends up alone on the last row.
   Centred on both pages. */
@media(max-width:780px){
.client-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 10px;justify-items:center;align-items:center;max-width:340px;margin:0 auto}
.client-logos li{grid-column:span 2}
.client-logos li:nth-child(n+4){grid-column:span 3}
.client-logos img{object-fit:contain}
.client-logos li:nth-child(1) img{height:24px}
.client-logos li:nth-child(2) img{height:27px}
.client-logos li:nth-child(3) img{height:18px}
.client-logos li:nth-child(4) img{height:24px}
.client-logos li:nth-child(5) img{height:32px}
}

/* Shared rhythm for the service pages, including adjoining cream sections. */
.service-page .moments,.service-page .lineups,.service-page .prose,.service-page .proof,.service-page .faq{padding-top:48px;padding-bottom:48px}
@media(max-width:600px){
.service-page .moments,.service-page .lineups,.service-page .prose,.service-page .proof,.service-page .faq{padding-top:32px;padding-bottom:32px}
}

/* Colour bands break up long cream pages (homepage, Weddings, Corporate). Each
   band reaches the window edges while its content keeps the page width. */
.band{background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);border-top:0}
.band-sand{--band:#eee2d5}
.band-green{--band:var(--green);color:var(--cream)}
.band-coral{--band:var(--coral);color:var(--cream)}
.band-green h2,.band-coral h2,.band-green .text-link,.band-coral .text-link{color:var(--cream)}
.band-green a:focus-visible,.band-green button:focus-visible{outline-color:#fbc76b}
.band-coral a:focus-visible{outline-color:var(--cream)}
.band + section,.watch-cinema + section{border-top:0}
.original-music.band{padding-top:64px;padding-bottom:72px}
@media(max-width:800px){
.original-music.band{padding-top:44px;padding-bottom:48px}
}

/* The video section runs edge to edge like a trailer (Ze, 28 Sep 2026): the still fills
   the screen width, the heading sits over its lower edge, and the play button is a
   frosted pill. Once the video plays, the caption fades out so it never covers
   YouTube's controls and nothing on the page moves. The heading comes first in the
   page for screen readers. */
.watch-cinema{position:relative;padding:0;border-top:0;background:#000;color:#fff}
.watch-cinema .video-preview,.watch-cinema .video-frame{border-radius:0;aspect-ratio:auto;height:min(78vh,56.25vw);min-height:360px;background:#000}
.watch-cinema .video-preview>img,.watch-cinema .video-frame-still{object-position:50% 40%;transform:scale(var(--still-zoom,1))}
/* A page with a busier still can deepen the lower fade behind its caption. */
.watch-cinema .video-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,var(--fade-bottom,.8)) 0%,rgba(0,0,0,var(--fade-mid,.15)) 45%,rgba(0,0,0,.35) 100%);pointer-events:none}
.watch-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:48px;pointer-events:none}
.watch-caption .section-heading{margin:0}
.watch-caption .eyebrow{color:#fbc76b;margin-bottom:12px}
.watch-cinema h2{color:#fff;font-size:clamp(34px,5vw,64px)}
.watch-caption .video-fallback{flex:none;color:#fff;pointer-events:auto}
.watch-caption a:focus-visible{outline-color:#fbc76b}
.watch-cinema button.video-preview:focus-visible{outline:3px solid #fbc76b;outline-offset:-8px}
.watch-cinema .video-play{width:auto;height:auto;padding:18px 28px 18px 24px;border-radius:999px;grid-auto-flow:column;gap:12px;background:rgba(20,30,24,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.55);color:#fff;font-size:17px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:none;z-index:3;transition:background .2s,transform .4s ease}
.watch-cinema .video-preview:hover .video-play{background:rgba(20,30,24,.7)}
/* Same cue as the "Planning a wedding?" cards: the still eases to 1.03 and the pill to 1.04
   (keeping its centring translate). Hover only on devices that can hover, so a tap on a phone
   doesn't leave the still zoomed; keyboard focus gets it everywhere. Only the button's still
   scales, never the loading still inside .video-frame. */
.watch-cinema .video-preview>img{transition:transform .4s ease}
.watch-cinema button.video-preview:focus-visible>img{transform:scale(calc(var(--still-zoom,1) * 1.03))}
.watch-cinema button.video-preview:focus-visible .video-play{background:rgba(20,30,24,.7);transform:translate(-50%,-50%) scale(1.04)}
@media(hover:hover){
.watch-cinema .video-preview:hover>img{transform:scale(calc(var(--still-zoom,1) * 1.03))}
.watch-cinema .video-preview:hover .video-play{transform:translate(-50%,-50%) scale(1.04)}
}
.watch-cinema .video-play svg{width:16px;height:18px}
.watch-caption{transition:opacity .3s ease,visibility 0s}
.watch-cinema.is-playing .watch-caption{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.watch-cinema.is-playing .video-frame{background:#000}
@media(max-width:1000px){
.watch-caption{padding-bottom:32px}
}
@media(max-width:600px){
/* The player keeps the still's tall box and shows the video letterboxed in it,
   so nothing below jumps when play is pressed. */
.watch-cinema .video-preview,.watch-cinema .video-frame{height:auto;aspect-ratio:4/5;min-height:0}
/* A page can move its still sideways in the tall phone crop, so a face isn't
   hidden behind the play button (Weddings, Ze, 28 Sep 2026). */
/* It can also zoom in from the bottom edge, which lifts faces clear of the centred
   play button (Weddings, Ze, 29 Sep 2026). The same zoom stays on the loading still. */
.watch-cinema .video-preview>img,.watch-cinema .video-frame-still{object-position:var(--phone-focus-x,50%) 40%;--still-zoom:var(--phone-zoom,1);transform-origin:var(--phone-focus-x,50%) 100%}
.watch-cinema .video-play{padding:14px 22px 14px 18px;font-size:16px}
.watch-caption{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:24px}
}