/* ═══════════════════════════════════════════════════════
   Maangalyam Events & Hospitality
   Intro · Weddings (beige + maroon) · Corporate (navy)
   Galleries are uniform grids. Every tile in a gallery
   shares one ratio, so rows align exactly.
   ═══════════════════════════════════════════════════════ */

:root{
  --brass:#C9A24B;
  --brass-soft:#E3C888;
  --gold-ink:#8A6520;

  --maroon:#5C1526;
  --maroon-deep:#42101C;
  --beige:#F2E9DB;
  --beige-2:#E7DBC8;
  --beige-3:#FAF5EC;
  --beige-dark:#E2D4BC;
  --beige-dark-2:#D8C8AC;

  --navy:#08192B;
  --navy-2:#0E2A46;
  --navy-3:#061523;
  --bone:#F4F0E7;

  --ink:#14110F;
  --ink-2:#1F1A17;

  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(20px,5vw,80px);
  --maxw:1320px;
  --gap:clamp(14px,1.6vw,22px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--body);font-weight:300;font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--ink);color:var(--bone);
}
img{max-width:100%;display:block;height:auto}
figure,blockquote{margin:0}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(2.3rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.8rem,3.9vw,3rem)}
h3{font-size:clamp(1.1rem,1.7vw,1.42rem)}
p{margin:0 0 1.1em}
strong{font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding:clamp(56px,7.5vw,112px) 0;position:relative}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:12px;z-index:200;background:var(--accent);color:var(--bg);padding:10px 16px}

/* ── skins ─────────────────────────────────────────── */
.skin{background:var(--bg);color:var(--fg)}
[data-skin="intro"]{
  --bg:var(--ink); --bg-2:var(--ink-2); --bg-3:#0C0A09;
  --fg:#F6F2EB; --fg-dim:#CFC6B8; --mute:#948878;
  --accent:var(--brass); --accent-2:var(--brass-soft);
  --line:rgba(201,162,75,.32); --line-soft:rgba(246,242,235,.14);
  --label:var(--mono);
}
/* weddings: beige carries the page, maroon carries the bands */
[data-skin="wedding"]{
  --bg:#4E1220; --bg-2:#3B0D18; --bg-3:#340C16;
  --fg:#F7EFE6; --fg-dim:#E3D2C9; --mute:#BE9B93;
  --accent:var(--brass); --accent-2:var(--brass-soft);
  --line:rgba(201,162,75,.36); --line-soft:rgba(247,239,230,.18);
  --label:var(--body);
}
/* the beige bands flip back to dark type */
[data-skin="wedding"] .band-2{
  --bg:var(--beige); --bg-2:var(--beige-3); --bg-3:var(--beige-2);
  --fg:#42101C; --fg-dim:#5A4034; --mute:#8A6F60;
  --accent:var(--gold-ink); --accent-2:#5C1526;
  --line:rgba(92,21,38,.30); --line-soft:rgba(92,21,38,.18);
  background:var(--beige); color:#42101C;
}
/* a darker beige, so Stations and Stalls breaks the run of maroon pages */
[data-skin="wedding"] .band-4{
  --bg:var(--beige-dark); --bg-2:var(--beige-dark-2); --bg-3:var(--beige-2);
  --fg:#42101C; --fg-dim:#5A4034; --mute:#7E634F;
  --accent:var(--gold-ink); --accent-2:#5C1526;
  --line:rgba(92,21,38,.30); --line-soft:rgba(92,21,38,.20);
  background:var(--beige-dark); color:#42101C;
}
[data-skin="wedding"] .band-4 .cell,
[data-skin="wedding"] .band-4 .scard{background:var(--beige-dark)}
[data-skin="wedding"] .band-4 .scard:hover{background:var(--beige-3)}
/* dark brown base, so the services page steps away from the maroon */
[data-skin="wedding"] .band-brown{
  --bg:#241A15; --bg-2:#2E2119; --bg-3:#1A1210;
  --fg:#F4E9DC; --fg-dim:#DCC9B6; --mute:#A88E77;
  --accent:var(--brass); --accent-2:var(--brass-soft);
  --line:rgba(201,162,75,.32); --line-soft:rgba(244,233,220,.16);
  background:#241A15; color:#F4E9DC;
}
[data-skin="wedding"] .band-brown .cell{background:#2E2119}
[data-skin="wedding"] .band-brown h2,[data-skin="wedding"] .band-brown h3{color:#F7EFE6}
[data-skin="wedding"] .band-brown .cell li{color:#DCC9B6;border-bottom-color:rgba(244,233,220,.14)}

/* coffee and gold for the couples page, in theme but not maroon */
[data-skin="wedding"] .band-emerald{
  --bg:#33241A; --bg-2:#3F2E21; --bg-3:#251A12;
  --fg:#F5EDE1; --fg-dim:#E0CFBB; --mute:#AD9276;
  --accent:var(--brass); --accent-2:var(--brass-soft);
  --line:rgba(201,162,75,.34); --line-soft:rgba(245,237,225,.16);
  background:#33241A; color:#F5EDE1;
}
[data-skin="wedding"] .band-emerald .cell{background:#3F2E21}
[data-skin="wedding"] .band-emerald h2,[data-skin="wedding"] .band-emerald h3{color:#F9F1E6}
[data-skin="wedding"] .band-emerald .tile figcaption{color:#E0CFBB}
[data-skin="wedding"] .band-emerald .qb-tint{background:linear-gradient(90deg,rgba(37,26,18,.92) 0%,rgba(37,26,18,.74) 46%,rgba(37,26,18,.32) 100%)}
/* a thin gold line around each couple, the way the black and white frame carries one */
[data-skin="wedding"] .band-emerald .tile .tile-img{
  padding:7px;background:#251A12;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.85);
}
[data-skin="wedding"] .band-2 .cell{background:var(--beige)}
[data-skin="wedding"] .band-2 .callsheet{background:var(--beige-3)}
[data-skin="wedding"] .band-2 .roster-total{background:#5C1526}
[data-skin="wedding"] .band-2 .roster-total span{color:var(--brass-soft)}
[data-skin="wedding"] .band-2 .roster-total b{color:var(--beige)}
[data-skin="corporate"]{
  --bg:var(--navy); --bg-2:var(--navy-2); --bg-3:var(--navy-3);
  --fg:var(--bone); --fg-dim:#D6D0C2; --mute:#8FA3B6;
  --accent:var(--brass); --accent-2:var(--brass-soft);
  --line:rgba(201,162,75,.28); --line-soft:rgba(244,240,231,.14);
  --label:var(--mono);
}
/* maroon bands inside the beige wedding page flip to light type */
[data-skin="wedding"] .band-3{color:var(--beige)}
[data-skin="wedding"] .band-3 .cell{background:var(--maroon);color:var(--beige)}
[data-skin="wedding"] .band-3 .lede,[data-skin="wedding"] .band-3 p{color:rgba(242,233,219,.82)}
[data-skin="wedding"] .band-3 h2,[data-skin="wedding"] .band-3 h3{color:var(--beige)}
[data-skin="wedding"] .band-3 .eyebrow,[data-skin="wedding"] .band-3 .mini{color:var(--brass-soft)}
[data-skin="wedding"] .band-3 .eyebrow::after,[data-skin="wedding"] .band-3 .eyebrow::before{background:rgba(201,162,75,.45)}
[data-skin="wedding"] .band-3 .cols-3,[data-skin="wedding"] .band-3 .cols-4{background:rgba(242,233,219,.2);border-color:rgba(242,233,219,.2)}
[data-skin="wedding"] .band-3 .cell li{color:rgba(242,233,219,.82);border-bottom-color:rgba(242,233,219,.16)}
[data-skin="wedding"] .band-3 .btn{border-color:var(--brass-soft);color:var(--brass-soft)}
[data-skin="wedding"] .band-3 .btn:hover{background:var(--brass-soft);color:var(--maroon)}
[data-skin="wedding"] .band-3 .tile figcaption{color:rgba(242,233,219,.8)}

/* ── type utilities ────────────────────────────────── */
.eyebrow{
  font-family:var(--label);font-size:.66rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:14px;margin:0 0 20px;
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:110px;background:var(--line)}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{content:"";height:1px;flex:1;max-width:110px;background:var(--line)}
.lede{font-size:clamp(1rem,1.25vw,1.1rem);color:var(--fg-dim);max-width:62ch;font-weight:300}
.mini{font-family:var(--label);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.centered{text-align:center}
.centered .lede{margin-left:auto;margin-right:auto}
.note{font-size:.78rem;color:var(--mute);line-height:1.65;margin:14px 0 0}

.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--label);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:14px 26px;
  border:1px solid var(--accent);color:var(--accent);text-decoration:none;background:transparent;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s;
}
.btn:hover,.btn:focus-visible{background:var(--accent);color:var(--bg)}
.btn.solid{background:var(--accent);color:var(--bg)}
.btn.solid:hover{background:var(--accent-2);border-color:var(--accent-2)}
[data-skin="wedding"] .btn.solid{background:var(--maroon);border-color:var(--maroon);color:var(--beige)}
[data-skin="wedding"] .btn.solid:hover{background:var(--maroon-deep);border-color:var(--maroon-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.centered .btn-row{justify-content:center}

/* ── masthead ──────────────────────────────────────── */
.mast{
  position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:12px var(--pad);
  border-bottom:1px solid transparent;transition:background .35s,border-color .35s,transform .4s;
}
.mast.stuck{background:var(--mast-bg);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
body[data-skin="intro"] .mast.stuck{--mast-bg:rgba(20,17,15,.94)}
body[data-skin="wedding"] .mast.stuck{--mast-bg:rgba(242,233,219,.95)}
body[data-skin="corporate"] .mast.stuck{--mast-bg:rgba(8,25,43,.94)}
body[data-skin="wedding"] .mast{--fg-dim:#5A4034;--accent:#8A6520;--line:rgba(92,21,38,.28);--mute:#8A6F60;--bg:#F2E9DB}
body[data-skin="corporate"] .mast{--fg-dim:#D6D0C2;--accent:#C9A24B;--line:rgba(201,162,75,.28);--mute:#8FA3B6;--bg:#08192B}
body[data-skin="intro"] .mast{--fg-dim:#CFC6B8;--accent:#C9A24B;--line:rgba(201,162,75,.32);--mute:#948878;--bg:#14110F}
.mast.tucked{transform:translateY(-105%)}
.brandmark{display:flex;flex-direction:column;line-height:1;text-decoration:none;flex:none;color:var(--fg-dim)}
.brandmark b{font-family:var(--display);font-size:1.2rem;font-weight:600}
.brandmark span{font-family:var(--label);font-size:.53rem;letter-spacing:.26em;color:var(--mute);margin-top:5px;text-transform:uppercase}
.tabs{display:flex;border:1px solid var(--line);flex:none}
.tab{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:11px 20px;color:var(--fg-dim);
  font-family:var(--label);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;transition:background .3s,color .3s;text-decoration:none;
}
.tab + .tab{border-left:1px solid var(--line)}
.tab:hover{color:var(--accent)}
.tab[aria-selected="true"]{background:var(--accent);color:var(--bg);font-weight:500}
@media(max-width:660px){.tab{padding:10px 12px;font-size:.58rem;letter-spacing:.1em}}
.mast-links{display:flex;gap:20px;align-items:center;flex:none}
.mast-links a{font-family:var(--label);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--fg-dim);transition:color .2s}
.mast-links a:hover{color:var(--accent)}
@media(max-width:1080px){.mast-links a:not(.btn){display:none}}
@media(max-width:400px){.brandmark span{display:none}}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:0 50%;z-index:95}

/* ── introduction ──────────────────────────────────── */
.intro{min-height:100svh;display:flex;align-items:center;padding:130px 0 70px}
.intro h1{max-width:19ch;margin:0 auto}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:clamp(38px,4.5vw,60px)}
@media(max-width:820px){.doors{grid-template-columns:1fr}}
.door{
  position:relative;display:block;text-decoration:none;overflow:hidden;border:1px solid var(--line);
  transition:border-color .35s,transform .5s cubic-bezier(.2,.7,.3,1);
}
.door:hover{border-color:var(--accent);transform:translateY(-4px)}
.door-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#000}
.door-media img{width:100%;height:100%;object-fit:cover;opacity:.66;transition:transform .9s cubic-bezier(.2,.7,.3,1),opacity .5s}
.door:hover .door-media img{transform:scale(1.05);opacity:.8}
.door-tint{position:absolute;inset:0}
.door-w .door-tint{background:linear-gradient(180deg,rgba(66,16,28,.28),rgba(66,16,28,.94))}
.door-c .door-tint{background:linear-gradient(180deg,rgba(8,25,43,.28),rgba(8,25,43,.94))}
.door-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.6vw,32px);text-align:left}
.door-body .mini{color:var(--brass-soft)}
.door-body h2{font-size:clamp(1.5rem,2.5vw,2.15rem);margin:10px 0 8px;color:#F6F2EB}
.door-body p{font-size:.87rem;color:rgba(246,242,235,.78);margin:0;max-width:44ch}
.door-go{display:inline-flex;align-items:center;gap:9px;margin-top:15px;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-soft)}
.door-go i{font-style:normal;transition:transform .3s}
.door:hover .door-go i{transform:translateX(6px)}

/* ── enquiry pair on the landing page ──────────────── */
.enq-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:40px}
@media(max-width:820px){.enq-pair{grid-template-columns:1fr}}
.enq-card{
  border:1px solid var(--line);padding:clamp(26px,3vw,40px);text-decoration:none;display:flex;
  flex-direction:column;background:var(--bg-2);transition:border-color .3s,background .3s;
}
.enq-card:hover{border-color:var(--accent);background:var(--bg-3)}
.enq-card h3{font-size:clamp(1.3rem,2vw,1.7rem);margin:12px 0 10px}
.enq-card p{font-size:.88rem;color:var(--fg-dim);margin:0 0 20px}
.enq-card .btn{align-self:flex-start;margin-top:auto}

/* ── stats ─────────────────────────────────────────── */
.stats{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-2);padding:0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(24px,3vw,36px) 8px;text-align:center;border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;color:var(--accent);line-height:1}
.stat span{font-family:var(--label);font-size:.57rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);display:block;margin-top:10px}
@media(max-width:720px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line-soft)}
}

/* ── founder ───────────────────────────────────────── */
.founder-top{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,4.5vw,68px);align-items:center}
@media(max-width:900px){.founder-top{grid-template-columns:1fr}}
.founder-portrait{overflow:hidden}
.founder-portrait img{width:100%;transform:scale(1.05);transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.founder-portrait.in img{transform:scale(1)}
.founder-quote{font-size:clamp(1.55rem,2.9vw,2.5rem);line-height:1.18;max-width:20ch}
.founder-quote em{font-style:italic;color:var(--accent)}
.rule{display:block;height:1px;background:var(--accent);width:100%;transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.2,.7,.3,1) .2s;margin:22px 0}
.in .rule{transform:scaleX(1)}
.sign{display:flex;align-items:baseline;gap:15px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.sign b{font-family:var(--display);font-size:1.35rem;font-weight:600}
.sign span{font-family:var(--label);font-size:.59rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.facts{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,46px);margin-top:24px}
.facts b{display:block;font-family:var(--display);font-size:1.9rem;color:var(--accent);line-height:1}
.facts span{font-family:var(--label);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

.ftabs{margin-top:clamp(42px,5.5vw,74px)}
.ftabs-strip{display:flex;border-bottom:1px solid var(--line-soft);position:relative;overflow-x:auto;scrollbar-width:none}
.ftabs-strip::-webkit-scrollbar{display:none}
.ftab{appearance:none;border:0;background:transparent;cursor:pointer;padding:14px 22px 16px;color:var(--fg-dim);opacity:.6;white-space:nowrap;font-family:var(--display);font-size:1.1rem;font-weight:600;transition:opacity .25s,color .25s}
.ftab:first-child{padding-left:0}
.ftab:hover{opacity:.85}
.ftab[aria-selected="true"]{opacity:1;color:var(--accent)}
.ftab-ind{position:absolute;bottom:-1px;left:0;height:2px;background:var(--accent);width:0;transition:transform .45s cubic-bezier(.2,.7,.3,1),width .45s}
.ftabs-body{padding-top:clamp(26px,3vw,40px);min-height:200px}
.fpanel h3{font-size:clamp(1.3rem,2.1vw,1.75rem);color:var(--accent);margin-bottom:16px}
.fpanel p{color:var(--fg-dim);max-width:66ch}
.fpanel.play > *{opacity:0;transform:translateY(14px);animation:lineIn .6s cubic-bezier(.2,.7,.3,1) forwards}
.fpanel.play > *:nth-child(1){animation-delay:.05s}
.fpanel.play > *:nth-child(2){animation-delay:.14s}
.fpanel.play > *:nth-child(3){animation-delay:.23s}
.fpanel.play > *:nth-child(4){animation-delay:.32s}
.fpanel.play > *:nth-child(5){animation-delay:.41s}
@keyframes lineIn{to{opacity:1;transform:none}}

/* ── division bar and hero ─────────────────────────── */
.divbar{background:var(--bg-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
[data-skin="wedding"] .divbar{background:var(--maroon)}
[data-skin="wedding"] .divbar .mini{color:var(--brass-soft)}
[data-skin="wedding"] .divbar .tab{color:rgba(242,233,219,.78);border-color:rgba(201,162,75,.4)}
[data-skin="wedding"] .divbar .tabs{border-color:rgba(201,162,75,.4)}
[data-skin="wedding"] .divbar .tab[aria-selected="true"]{background:var(--brass);color:var(--maroon-deep)}
.divbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px var(--pad);max-width:var(--maxw);margin:0 auto}
@media(max-width:700px){.divbar .mini{display:none}.divbar-inner{justify-content:center}}
.dhero{padding-top:clamp(56px,6vw,84px)}
.geo{display:flex;flex-wrap:wrap;gap:7px 20px;margin-bottom:20px;font-family:var(--label);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.centered .geo{justify-content:center}
.geo span{position:relative;padding-left:13px}
.geo span::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}
.cover-slide{margin-top:clamp(28px,3.5vw,44px);border:1px solid var(--line);background:#000}
.cover-slide img{width:100%}

/* ══ UNIFORM GALLERIES ══
   Every tile shares one ratio, so every row lines up.   */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(32px,4vw,48px)}
.gallery.g2{grid-template-columns:repeat(2,1fr)}
.gallery.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.gallery,.gallery.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery,.gallery.g2,.gallery.g4{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;overflow:hidden}
.tile-img{overflow:hidden;background:var(--bg-2)}
.tile img{width:100%;aspect-ratio:4/5;object-fit:fill;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.gallery.land .tile img{aspect-ratio:3/2}
.gallery.sq .tile img{aspect-ratio:1/1}
.tile:hover img{transform:scale(1.04)}
.tile figcaption{
  font-family:var(--label);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);padding:12px 2px 0;min-height:2.6em;
}

/* side-by-side media next to copy, same uniform ratio */
.media-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.media-duo img{width:100%;aspect-ratio:4/5;object-fit:fill}
/* a pair of landscape photographs side by side came out half the height of a
   portrait pair and read as an afterthought. stacked, held to the outer edge,
   they carry the same weight as the rest of the section. */
.media-duo.land{grid-template-columns:1fr;max-width:80%}
.cap:nth-child(even) .media-duo.land{margin-left:auto}
.cap:nth-child(odd) .media-duo.land{margin-right:auto}
@media(max-width:900px){.media-duo.land{max-width:100%;margin:0}}
.media-duo.land img{aspect-ratio:3/2;object-fit:fill}
.media-solo img{width:100%;aspect-ratio:3/2;object-fit:fill}
@media(max-width:520px){.media-duo{grid-template-columns:1fr}}

/* ── quote banner over a full photograph ───────────── */
.quote-banner{position:relative;overflow:hidden;margin-top:clamp(34px,4vw,52px)}
.quote-banner img{width:100%;aspect-ratio:21/9;object-fit:cover}
@media(max-width:760px){.quote-banner img{aspect-ratio:4/5}}
.quote-banner .qb-tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(66,16,28,.90) 0%,rgba(66,16,28,.72) 46%,rgba(66,16,28,.34) 100%)}
.quote-banner .qb-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,5vw,72px);max-width:44rem}
.quote-banner blockquote p{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,2.15rem);line-height:1.3;font-style:italic;color:#F7F1E8;margin:0}
.quote-banner cite{display:block;margin-top:18px;font-family:var(--label);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-soft);font-style:normal}

/* ── grids and cards ───────────────────────────────── */
.cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media(max-width:1000px){.cols-4{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cols-4,.cols-3{grid-template-columns:1fr}}
.cell{background:var(--bg);padding:clamp(22px,2.4vw,32px)}
.cell h3{margin-bottom:12px}
.cell p{color:var(--mute);font-size:.87rem;margin:0}
.cell ul{list-style:none;margin:0;padding:0}
.cell li{font-size:.87rem;color:var(--fg-dim);padding:10px 0;border-bottom:1px solid var(--line-soft)}
.cell li:last-child{border-bottom:0}
.cell .mini{display:block;margin-bottom:14px}
.band-2{background:var(--bg-2)}
.band-2 .cell{background:var(--bg-2)}
.band-3{background:var(--bg-3)}
.band-3 .cell{background:var(--bg-3)}
.band-brown,.band-emerald{background:var(--bg-2)}
.band-4{background:var(--bg-2)}
.band-4 .cell{background:var(--bg-2)}

/* ════════ corporate section tints ════════ */
/* three sections carry their own base so the navy does not run flat */
[data-skin="corporate"] .band-plum{
  --bg:#180F29; --bg-2:#201535; --bg-3:#140C22;
  --accent-2:#D98BC4;
  --line:rgba(214,124,186,.30); --line-soft:rgba(244,240,231,.14);
  background:#180F29;
}
[data-skin="corporate"] .band-plum .cell{background:#201535}
[data-skin="corporate"] .band-plum .eyebrow{color:#E29CD0}
[data-skin="corporate"] .band-plum .eyebrow::before,
[data-skin="corporate"] .band-plum .eyebrow::after{background:rgba(226,156,208,.45)}

[data-skin="corporate"] .band-aqua{
  --bg:#062A2D; --bg-2:#083539; --bg-3:#04211F;
  --accent:#E8C452; --accent-2:#F2D97C;
  --line:rgba(232,196,82,.28); --line-soft:rgba(244,240,231,.14);
  background:#062A2D;
}
[data-skin="corporate"] .band-aqua .cell{background:#083539}
[data-skin="corporate"] .band-aqua .tile figcaption{color:#EBD9A6}

[data-skin="corporate"] .band-forest{
  --bg:#06231E; --bg-2:#093029; --bg-3:#041A16;
  --accent-2:#8FD8B4;
  --line:rgba(143,216,180,.26); --line-soft:rgba(244,240,231,.14);
  background:#06231E;
}
[data-skin="corporate"] .band-forest .cell{background:#093029}
[data-skin="corporate"] .band-forest .eyebrow{color:#8FD8B4}
[data-skin="corporate"] .band-forest .eyebrow::before,
[data-skin="corporate"] .band-forest .eyebrow::after{background:rgba(143,216,180,.4)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,70px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.cap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,62px);align-items:center;margin-bottom:clamp(46px,6vw,92px)}
.cap:last-child{margin-bottom:0}
.cap:nth-child(even) .cap-media{order:2}
@media(max-width:900px){.cap{grid-template-columns:1fr}.cap:nth-child(even) .cap-media{order:0}}
.cap ul{list-style:none;padding:0;margin:20px 0 0}
.cap li{padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:.89rem;color:var(--fg-dim);display:flex;gap:13px;align-items:baseline}
.cap li::before{content:"";width:5px;height:5px;background:var(--accent);flex:none;transform:translateY(-2px)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);margin-top:42px}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{border-top:1px solid var(--line);padding-top:18px}
.step h3{margin:12px 0 9px}
.step p{font-size:.85rem;color:var(--mute);margin:0}
.clients-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:38px}
@media(max-width:900px){.clients-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.clients-grid{grid-template-columns:1fr 1fr}}
.client{background:var(--bg);padding:20px 10px;text-align:center;font-family:var(--label);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);display:flex;align-items:center;justify-content:center;min-height:64px;transition:background .25s,color .25s}
.client:hover{background:var(--bg-2);color:var(--accent)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,46px);margin-top:42px}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}
.quote p{font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.35;color:var(--fg);font-style:italic}
.quote cite{font-family:var(--label);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-style:normal;display:block;padding-top:15px;border-top:1px solid var(--line)}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:36px}
@media(max-width:800px){.contact-cards{grid-template-columns:1fr}}
.ccard{border:1px solid var(--line);padding:24px 22px;text-decoration:none;display:block;transition:background .25s,border-color .25s}
.ccard:hover{background:var(--bg-2);border-color:var(--accent)}
.ccard span{display:block;font-family:var(--label);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:11px}
.ccard b{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--fg);word-break:break-word}

/* ── planners ──────────────────────────────────────── */
.planner-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,56px);align-items:start}
@media(max-width:940px){.planner-grid{grid-template-columns:1fr}}
.field{margin-bottom:24px}
.fl{display:block;font-family:var(--label);font-size:.61rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:11px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--body);font-size:.81rem;padding:9px 15px;border:1px solid var(--line-soft);background:transparent;color:var(--fg-dim);cursor:pointer;transition:all .2s}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:500}
[data-skin="wedding"] .chip[aria-pressed="true"]{background:var(--maroon);border-color:var(--maroon);color:var(--beige)}
input[type=range]{width:100%;accent-color:var(--accent);margin-top:6px}
.bignum{font-family:var(--display);font-size:2.1rem;color:var(--accent);line-height:1}
.bignum small{font-family:var(--label);font-size:.57rem;letter-spacing:.18em;color:var(--mute);text-transform:uppercase;margin-left:8px}
.textin{width:100%;background:var(--bg-2);color:var(--fg);border:1px solid var(--line-soft);padding:12px 14px;font:inherit;font-size:.9rem}
.textin:focus{outline:none;border-color:var(--accent)}
.stepper{display:flex;align-items:center;border:1px solid var(--line-soft);width:max-content}
.stepper button{width:40px;height:40px;border:0;background:transparent;color:var(--accent);cursor:pointer;font-size:1.05rem;transition:background .2s}
.stepper button:hover{background:var(--accent);color:var(--bg)}
.stepper input{width:62px;height:40px;border:0;border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);background:transparent;color:var(--fg);text-align:center;font-family:var(--mono);font-size:.92rem;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.roleset{display:block}
.rolerow{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.rolerow .rn{font-size:.88rem;color:var(--fg)}
.rolerow .rh{font-size:.72rem;color:var(--mute);display:block;margin-top:3px}
.callsheet{border:1px solid var(--line);background:var(--bg-2);position:sticky;top:88px}
@media(max-width:940px){.callsheet{position:static}}
.callsheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--line)}
.callsheet-head b{font-family:var(--display);font-size:1.35rem;font-weight:600}
.callsheet-head span{font-family:var(--label);font-size:.59rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.roster{padding:6px 22px 14px;max-height:420px;overflow:auto}
.roster-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.roster-row:last-child{border-bottom:0}
.roster-row .r-name{font-size:.86rem;color:var(--fg-dim)}
.roster-row .r-count{font-family:var(--mono);font-size:.9rem;color:var(--accent);font-weight:500}
.roster-sub{font-family:var(--label);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding:16px 0 4px}
.roster-empty{padding:26px 0;color:var(--mute);font-size:.86rem}
.roster-total{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-top:1px solid var(--line);background:var(--bg-3)}
[data-skin="wedding"] .roster-total{background:var(--maroon)}
[data-skin="wedding"] .roster-total span{color:var(--brass-soft)}
[data-skin="wedding"] .roster-total b{color:var(--beige)}
.roster-total span{font-family:var(--label);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.roster-total b{font-family:var(--display);font-size:1.8rem}
.callsheet-foot{padding:18px 22px;display:flex;gap:11px;flex-wrap:wrap}

/* ── footer ────────────────────────────────────────── */
footer{background:var(--bg-3);color:var(--fg);padding:clamp(46px,6vw,72px) 0 30px;border-top:1px solid var(--line-soft)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,52px)}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr}}
footer h4{font-family:var(--label);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 16px}
footer p,footer li{font-size:.81rem;color:var(--mute);line-height:1.75}
footer ul{list-style:none;padding:0;margin:0}
footer li a{text-decoration:none;transition:color .2s}
footer li a:hover{color:var(--accent-2)}
.seo-note{font-size:.74rem;color:var(--mute);opacity:.8;line-height:1.75;margin-top:28px}
.foot-bottom{margin-top:38px;padding-top:20px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--label);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* ── motion ────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.stagger.in > *{opacity:0;transform:translateY(16px);animation:lineIn .7s cubic-bezier(.2,.7,.3,1) forwards}
.stagger.in > *:nth-child(1){animation-delay:.04s}
.stagger.in > *:nth-child(2){animation-delay:.09s}
.stagger.in > *:nth-child(3){animation-delay:.14s}
.stagger.in > *:nth-child(4){animation-delay:.19s}
.stagger.in > *:nth-child(5){animation-delay:.24s}
.stagger.in > *:nth-child(6){animation-delay:.29s}
.stagger.in > *:nth-child(7){animation-delay:.34s}
.stagger.in > *:nth-child(8){animation-delay:.39s}
.stagger.in > *:nth-child(n+9){animation-delay:.44s}
.panel[hidden]{display:none}
.panel{animation:fadeUp .55s cubic-bezier(.2,.7,.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rv,.stagger.in > *,.fpanel.play > *{opacity:1;transform:none;transition:none;animation:none}
  .panel{animation:none}
  .tile img,.door-media img,.founder-portrait img{transition:none;transform:none}
  .rule{transform:scaleX(1);transition:none}
}


/* ── in page enquiry form ──────────────────────────── */
.modal{position:fixed;inset:0;z-index:200;display:none}
.modal.open{display:block}
.modal-scrim{position:absolute;inset:0;background:rgba(12,10,9,.72);backdrop-filter:blur(4px)}
.modal-card{
  position:relative;max-width:760px;margin:4vh auto;max-height:92vh;overflow:auto;
  background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:clamp(24px,3.5vw,44px);
}
.modal-close{position:absolute;top:12px;right:14px;background:transparent;border:0;color:var(--mute);font-size:1.6rem;cursor:pointer;line-height:1}
.modal-close:hover{color:var(--accent)}
.mseg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 26px}
.mseg button{border:1px solid var(--line);background:transparent;color:var(--fg);padding:16px;cursor:pointer;text-align:left;transition:background .25s,border-color .25s;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.mseg button strong{display:block;font-family:var(--display);font-size:1.2rem;margin-bottom:4px}
.mseg button span{font-size:.78rem;color:var(--mute)}
.mseg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.mseg button[aria-pressed="true"] span{color:var(--bg);opacity:.8}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.mrow,.mseg{grid-template-columns:1fr}}
.mf{margin-bottom:14px}
.mf label{display:block;font-size:.76rem;color:var(--fg-dim);margin-bottom:7px}
.mf input,.mf select,.mf textarea{width:100%;background:var(--bg-2);color:var(--fg);border:1px solid var(--line-soft);padding:12px 13px;font:inherit;font-size:.9rem}
.mf textarea{min-height:96px;resize:vertical}
.mf input:focus,.mf select:focus,.mf textarea:focus{outline:none;border-color:var(--accent)}
.mf.bad input{border-color:#C0392B}
.mf .err{display:none;font-size:.74rem;color:#E06B5C;margin-top:5px}
.mf.bad .err{display:block}
.mactions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.msent{display:none;border:1px solid var(--accent);padding:18px;margin-top:18px;background:var(--bg-2)}
.msent.show{display:block}
.msum{white-space:pre-wrap;font-family:var(--mono);font-size:.74rem;line-height:1.65;margin-top:10px;max-height:220px;overflow:auto;color:var(--fg-dim)}

/* ════════ masthead, made to read clearly ════════ */
.brandmark b{font-size:1.42rem;font-weight:700;letter-spacing:.005em;color:var(--fg)}
.brandmark span{font-size:.58rem;letter-spacing:.24em;font-weight:500;color:var(--fg-dim);opacity:.95}
.mast-links a{font-size:.68rem;font-weight:500;letter-spacing:.18em;color:var(--fg)}
.tab{font-weight:500;color:var(--fg)}
.mast{padding-top:15px;padding-bottom:15px}

/* ════════ the role list fills its column ════════ */
.roleset{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.4vw,34px)}
.roleset .roster-sub{grid-column:1 / -1}
@media(max-width:1180px){.roleset{grid-template-columns:1fr}}
.rolerow .rn{font-size:.9rem;font-weight:400}
.rolerow .rh{font-size:.73rem}
.stepper button{width:38px;height:38px}
.stepper input{width:56px;height:38px}

/* what happens next, under the call sheet */
.next-panel{border:1px solid var(--line);padding:clamp(20px,2.4vw,28px);margin-top:18px;background:var(--bg-2)}
.next-panel h4{font-family:var(--label);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 16px;font-weight:500}
.next-panel ol{list-style:none;margin:0 0 20px;padding:0;counter-reset:n}
.next-panel li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:.86rem;color:var(--fg-dim)}
.next-panel li:last-of-type{border-bottom:0}
.next-panel li span{font-family:var(--mono);font-size:.66rem;color:var(--accent);flex:none}

/* ════════ the enquiry form carries its division's colour ════════ */
.modal-card[data-skin="wedding"]{
  --bg:#4E1220; --bg-2:#3B0D18; --fg:#F7EFE6; --fg-dim:#E3D2C9; --mute:#BE9B93;
  --accent:var(--brass); --accent-2:var(--brass-soft);
  --line:rgba(201,162,75,.36); --line-soft:rgba(247,239,230,.18);
  background:#4E1220; color:#F7EFE6;
}
.modal-card[data-skin="corporate"]{
  --bg:#08192B; --bg-2:#0E2A46; --fg:#F4F0E7; --fg-dim:#D6D0C2; --mute:#8FA3B6;
  --accent:var(--brass); --accent-2:var(--brass-soft);
  --line:rgba(201,162,75,.28); --line-soft:rgba(244,240,231,.14);
  background:#08192B; color:#F4F0E7;
}
.modal-card[data-skin] .eyebrow,.modal-card[data-skin] h2{color:var(--fg)}
.modal-card[data-skin] .eyebrow{color:var(--accent)}

/* ════════ further motion ════════ */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes softFade{from{opacity:0}to{opacity:1}}
.intro h1{animation:riseIn .9s cubic-bezier(.2,.7,.3,1) both}
.intro .eyebrow{animation:softFade 1s ease .1s both}
.intro > .wrap > .lede{animation:riseIn .9s cubic-bezier(.2,.7,.3,1) .18s both}
.dhero h1{animation:riseIn .8s cubic-bezier(.2,.7,.3,1) both}
.dhero .geo,.dhero .lede{animation:softFade .9s ease .16s both}

/* headings draw a hairline as they arrive */
.rv h2::after{content:"";display:block;height:1px;width:0;background:var(--accent);opacity:.5;margin-top:14px;transition:width .9s cubic-bezier(.2,.7,.3,1) .25s}
.rv.in h2::after{width:64px}
.centered.rv h2::after,.rv .centered h2::after{margin-left:auto;margin-right:auto}

/* tiles lift a little on hover */
.tile{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.tile:hover{transform:translateY(-5px)}
.cell{transition:background .35s ease}
.cell:hover{background:var(--bg-2)}
.stat b{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.stat:hover b{transform:translateY(-3px)}
.ccard,.enq-card{transition:transform .4s cubic-bezier(.2,.7,.3,1),background .3s,border-color .3s}
.ccard:hover,.enq-card:hover{transform:translateY(-4px)}
.btn{transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn:hover{transform:translateY(-2px)}
.modal.open .modal-card{animation:riseIn .45s cubic-bezier(.2,.7,.3,1) both}
.chip{transition:all .2s ease,transform .2s}
.chip:hover{transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){
  .intro h1,.intro .eyebrow,.intro > .wrap > .lede,.dhero h1,.dhero .geo,.dhero .lede,
  .modal.open .modal-card{animation:none}
  .rv h2::after{transition:none;width:64px}
  .tile:hover,.ccard:hover,.enq-card:hover,.btn:hover,.chip:hover,.stat:hover b{transform:none}
}

#crew-builder .planner-grid{grid-template-columns:1.3fr .82fr}
@media(max-width:1100px){#crew-builder .planner-grid{grid-template-columns:1fr}}
.roleset{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.rolerow{grid-template-columns:1fr auto;gap:10px}
.rolerow .rn{line-height:1.35}

/* call sheet column: wider, with buttons that never wrap awkwardly */
#crew-builder .planner-grid{grid-template-columns:1.12fr .95fr}
@media(max-width:1100px){#crew-builder .planner-grid{grid-template-columns:1fr}}
.callsheet-foot{flex-direction:column}
.callsheet-foot .btn{width:100%;justify-content:center}
.next-panel .btn{width:100%;justify-content:center}

/* the wedding planners read a little larger */
#rsvp-planner .rolerow .rn,#crew-builder .rolerow .rn{font-size:.94rem}
#rsvp-planner .rolerow .rh,#crew-builder .rolerow .rh{font-size:.76rem}
#crew-builder .roster-row .r-name,#rsvp-planner .roster-row .r-name{font-size:.9rem}
#crew-builder .roster-row .r-count,#rsvp-planner .roster-row .r-count{font-size:.95rem}
#crew-builder .callsheet-head b,#rsvp-planner .callsheet-head b{font-size:1.5rem}
#crew-builder .roster-total b,#rsvp-planner .roster-total b{font-size:2.1rem}
#crew-builder .fl,#rsvp-planner .fl{font-size:.66rem}
#crew-builder .roster,#rsvp-planner .roster{max-height:none}

/* pages that carry the skin on <body> (the enquiry page) take its colours */
body[data-skin="wedding"]{background:#4E1220;color:#F7EFE6}
body[data-skin="corporate"]{background:#08192B;color:#F4F0E7}
body[data-skin="wedding"] .seg button[aria-pressed="true"],
body[data-skin="corporate"] .seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}

/* ════════ compact wedding call sheet ════════ */
#crew-builder .planner-grid{display:block}

.cb-settings{
  display:grid;grid-template-columns:.9fr .9fr 1.5fr;gap:clamp(20px,2.6vw,40px);
  align-items:start;padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);
  background:var(--bg-2);margin-bottom:clamp(20px,2.4vw,28px);
}
@media(max-width:900px){.cb-settings{grid-template-columns:1fr 1fr}.cb-fn{grid-column:1 / -1}}
@media(max-width:560px){.cb-settings{grid-template-columns:1fr}}
.cb-field .bignum{font-size:1.9rem;margin-bottom:4px}
.cb-field .chips .chip{padding:8px 13px;font-size:.79rem}

/* five wide columns, one per department: no long scrolling */
.roleset{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:0 clamp(16px,2vw,30px)}
.rolegroup{border-top:1px solid var(--line);padding-top:12px}
.rolegroup h4{
  font-family:var(--label);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 6px;font-weight:500;
}
.rolegroup .rolerow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line-soft);
}
.rolegroup .rolerow:last-child{border-bottom:0}
.rolegroup .rn{font-size:.82rem;line-height:1.3;color:var(--fg)}
.rolegroup .stepper{flex:none}
.rolegroup .stepper button{width:30px;height:30px;font-size:.95rem}
.rolegroup .stepper input{width:42px;height:30px;font-size:.82rem}

/* one summary bar rather than a tall panel */
.cb-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(20px,2.4vw,28px);padding:16px clamp(18px,2.2vw,26px);
  background:#5C1526;color:var(--beige);border:1px solid var(--line);
}
.cb-total{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cb-total .fl{color:var(--brass-soft)}
.cb-total b{font-family:var(--display);font-size:2.1rem;line-height:1;color:var(--beige)}
.cb-total em{font-style:normal;font-family:var(--label);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,233,219,.7)}
.cb-actions{display:flex;flex-wrap:wrap;gap:10px}
.cb-bar .btn{border-color:var(--brass);color:var(--brass-soft);padding:11px 18px}
.cb-bar .btn:hover{background:var(--brass);color:#5C1526}
.cb-bar .btn.solid{background:var(--brass);color:#4E1220;border-color:var(--brass)}
.cb-bar .btn.solid:hover{background:var(--brass-soft);border-color:var(--brass-soft)}

.cb-sheet{margin-top:16px;border:1px solid var(--line-soft)}
.cb-sheet summary{
  cursor:pointer;padding:13px 18px;font-family:var(--label);font-size:.63rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.cb-sheet summary::marker{color:var(--accent)}
.cb-sheet .roster{padding:0 18px 8px;max-height:none}
.cb-sheet .note{padding:0 18px 16px;margin-top:0}

/* keep it to two columns on phones so it stays short there too */
@media(max-width:700px){
  .roleset{grid-template-columns:1fr 1fr;gap:0 14px}
  .rolegroup .rn{font-size:.76rem}
  .rolegroup .stepper button{width:26px;height:28px}
  .rolegroup .stepper input{width:34px;height:28px;font-size:.76rem}
  .cb-bar{flex-direction:column;align-items:stretch}
  .cb-actions .btn{width:100%;justify-content:center}
}
@media(max-width:380px){.roleset{grid-template-columns:1fr}}

/* ════════ call sheet, sized to one screen ════════ */
.cb{padding-top:clamp(38px,4vw,58px);padding-bottom:clamp(38px,4vw,58px)}
.cb h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.cb h2::after{display:none}

.cb-top{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(22px,3vw,44px);align-items:start;margin-bottom:22px}
@media(max-width:1000px){.cb-top{grid-template-columns:1fr}}

.cb .cb-settings{
  display:grid;grid-template-columns:auto auto 1fr;gap:14px clamp(16px,2vw,26px);
  padding:16px clamp(16px,2vw,22px);border:1px solid var(--line);background:var(--bg-2);margin:0;
}
.cb .cb-fn{grid-column:1 / -1}
@media(max-width:620px){.cb .cb-settings{grid-template-columns:1fr 1fr}}
.cb .cb-field .fl{margin-bottom:6px}
.cb .bignum{font-size:1.5rem;margin-bottom:2px}
.cb .cb-field input[type=range]{width:120px;margin-top:2px}
.cb .textin{padding:7px 10px;font-size:.82rem;width:130px}
.cb .cb-fn .chip{padding:6px 11px;font-size:.74rem}
.cb .stepper button{width:28px;height:30px}
.cb .stepper input{width:40px;height:30px;font-size:.8rem}

/* one column per department keeps every column short */
.cb .roleset{display:grid;grid-template-columns:repeat(6,1fr);gap:0 clamp(12px,1.5vw,22px)}
@media(max-width:1200px){.cb .roleset{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.cb .roleset{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.cb .roleset{grid-template-columns:1fr}}
.cb .rolegroup{border-top:1px solid var(--line);padding-top:9px;margin-bottom:14px}
.cb .rolegroup h4{font-size:.55rem;letter-spacing:.16em;margin:0 0 4px}
.cb .rolegroup .rolerow{padding:5px 0;gap:6px}
.cb .rolegroup .rn{font-size:.76rem;line-height:1.25}
.cb .rolegroup .stepper button{width:24px;height:26px;font-size:.85rem}
.cb .rolegroup .stepper input{width:32px;height:26px;font-size:.76rem}

.cb .cb-bar{margin-top:14px;padding:13px 18px}
.cb .cb-total b{font-size:1.8rem}
.cb .cb-bar .btn{padding:10px 16px;font-size:.65rem}
.cb .cb-sheet{margin-top:12px}
.cb .cb-sheet summary{padding:10px 16px;font-size:.6rem}

/* ════════ coverage feedback and presets ════════ */
.cb-presets{grid-column:1 / -1}
.cb-presets .chip{padding:7px 13px;font-size:.76rem}

.rolegroup h4{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cover{
  font-family:var(--label);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;font-weight:500;white-space:nowrap;
  border:1px solid currentColor;opacity:.9;
}
.cover.is-balanced{color:#4E8A5C}
.cover.is-light{color:#C08A2E}
.cover.is-generous{color:#9C6BA8}
[data-skin="corporate"] .cover.is-balanced{color:#6FBF86}

.cb-ratio{
  font-family:var(--label);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-soft);padding-left:14px;margin-left:2px;border-left:1px solid rgba(201,162,75,.4);
}
@media(max-width:760px){.cb-ratio{border-left:0;padding-left:0;width:100%}}

/* ════════ call sheet: one typeface, bolder, clearer ════════ */
.cb .rolegroup .rn{
  font-family:var(--body);font-size:.8rem;font-weight:500;color:var(--fg);letter-spacing:.005em;
}
.cb .rolegroup .stepper input{
  font-family:var(--body);font-weight:600;font-size:.86rem;color:var(--fg);
}
.cb .rolegroup h4{font-size:.6rem;font-weight:600;letter-spacing:.14em}
.cb .cb-total b{font-family:var(--body);font-weight:600;font-size:1.6rem;letter-spacing:.01em}
.cb .roster-row .r-name{font-family:var(--body);font-weight:500}
.cb .roster-row .r-count{font-family:var(--body);font-weight:600}
.cb .cb-field .bignum{font-family:var(--body);font-weight:600;font-size:1.35rem}
.cb .stepper input{font-family:var(--body);font-weight:600}
.cb .fl{font-weight:600}
.cb .cover{font-weight:600}

/* the expandable sheet reads as an instruction */
.cb-sheet summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-transform:none;letter-spacing:.02em;font-family:var(--body);font-size:.85rem;font-weight:600}
.sum-hint{font-weight:400;font-size:.78rem;color:var(--mute);text-transform:none;letter-spacing:0}
.cb-sheet[open] summary{border-bottom:1px solid var(--line-soft)}

/* ════════ contact cards: address stays on one line ════════ */
.ccard-mail{
  font-family:var(--body)!important;font-size:clamp(.82rem,1.05vw,.98rem)!important;
  font-weight:500;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}
.ccard b{white-space:nowrap}

/* ════════ a hairline frame around the enquiry form ════════ */
.form-frame{
  border:1px solid var(--accent);padding:clamp(22px,3vw,38px);
  background:rgba(201,162,75,.045);
}
.modal-card .mrow,.modal-card .mf{position:relative}
.modal-frame{border:1px solid var(--accent);padding:clamp(20px,2.6vw,30px);background:rgba(201,162,75,.05);margin-top:6px}

/* ════════ vendor network ════════ */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(34px,4vw,52px)}
@media(max-width:1000px){.vgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.vgrid{grid-template-columns:1fr}}
.vcard{border:1px solid var(--line);padding:clamp(22px,2.4vw,30px);position:relative;transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.3,1)}
.vcard:hover{border-color:var(--accent);transform:translateY(-4px)}
.vnum{position:absolute;top:16px;right:18px;font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--accent);opacity:.7}
.vcard h3{font-size:clamp(1.15rem,1.6vw,1.34rem);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.vcard ul{list-style:none;margin:0;padding:0}
.vcard li{font-size:.85rem;font-weight:400;color:var(--fg-dim);padding:6px 0 6px 16px;position:relative;line-height:1.45}
.vcard li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:5px;background:var(--accent)}
.vcard-cta{display:flex;flex-direction:column;justify-content:center;background:rgba(201,162,75,.09);border-color:var(--accent)}
.vcard-cta p{font-size:.88rem;color:var(--fg-dim);margin-bottom:20px}
.vcard-cta .btn{align-self:flex-start}

/* ════════ stations and stalls ════════ */
.sgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:clamp(32px,4vw,48px)}
@media(max-width:1100px){.sgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.sgrid{grid-template-columns:repeat(2,1fr)}}
.scard{background:var(--bg);padding:22px 18px;display:flex;flex-direction:column;gap:10px;min-height:118px;transition:background .3s}
.scard:hover{background:var(--bg-2)}
.scard span{font-family:var(--body);font-size:.68rem;font-weight:600;letter-spacing:.14em;color:var(--accent)}
.scard h4{font-family:var(--display);font-size:1.06rem;font-weight:600;line-height:1.25;margin:0;color:var(--fg)}

/* ════════ call sheet bar, more visible ════════ */
.cb .cb-bar{padding:18px clamp(20px,2.4vw,28px)}
.cb .cb-total .fl{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--brass-soft)}
.cb .cb-total b{font-size:2.2rem;font-weight:700;color:#fff}
.cb .cb-total em{font-size:.72rem;font-weight:600;color:rgba(247,239,230,.9);letter-spacing:.1em}
.cb-sheet summary{font-size:.95rem;font-weight:700;color:var(--fg)}
.sum-hint{font-size:.86rem;font-weight:500;color:var(--fg-dim)}
.cb .cb-bar .btn{font-size:.68rem;font-weight:600;padding:12px 18px}

/* ════════ contact details: a face that suits numbers ════════ */
.ccard b,
.ccard-mail,
.cb-total b,
footer a[href^="tel"],
footer a[href^="https://wa.me"],
footer a[href^="mailto"]{
  font-family:var(--body)!important;
  font-weight:600;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:.015em;
}
.ccard b{font-size:clamp(.95rem,1.25vw,1.15rem);line-height:1.4}
.ccard-mail{font-size:clamp(.82rem,1.02vw,.95rem);font-weight:500}
footer p a{font-family:var(--body);font-weight:500;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.015em}
.modal-card .mf input,.modal-card .mf select,.modal-card .mf textarea,
.form-frame input,.form-frame select,.form-frame textarea{
  font-family:var(--body);font-variant-numeric:tabular-nums lining-nums;
}

/* Instagram mark in the masthead */
.ig-link{display:inline-flex;align-items:center;justify-content:center;color:var(--fg-dim);transition:color .25s,transform .25s}
.ig-link:hover{color:var(--accent);transform:translateY(-2px)}

/* ════════ contact details, sized to be read ════════ */
.contact-cards .ccard{padding:26px 24px;display:flex;flex-direction:column;justify-content:center;min-height:120px}
.contact-cards .ccard span{font-size:.6rem;letter-spacing:.22em;margin-bottom:14px;font-weight:600}
.contact-cards .ccard b{
  font-family:var(--body)!important;font-weight:600;
  font-size:clamp(1.02rem,1.35vw,1.22rem)!important;
  letter-spacing:.02em;line-height:1.35;
  font-variant-numeric:lining-nums tabular-nums;
}
.contact-cards .ccard-mail{
  font-size:clamp(.92rem,1.15vw,1.05rem)!important;font-weight:600;letter-spacing:.01em;
}
footer p a{font-size:.9rem;font-weight:600;letter-spacing:.02em;line-height:2}

/* the same treatment on the enquiry page cards */
.side .ccard b{font-family:var(--body)!important;font-weight:600;font-size:clamp(1rem,1.3vw,1.18rem)!important;
  letter-spacing:.02em;font-variant-numeric:lining-nums tabular-nums}

/* ════════ contact cards, three columns of equal width ════════ */
/* 1fr lets a long address widen its own column, so the three cards came out
   uneven. minmax(0,1fr) holds them to a third each and the value is allowed
   to shrink to fit rather than run past the border. */
.contact-cards,
.side{grid-template-columns:minmax(0,1fr) minmax(0,1.42fr) minmax(0,1fr)}

.contact-cards .ccard,
.side .ccard{
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:26px 24px;min-height:126px;min-width:0;
}
.contact-cards .ccard span,
.side .ccard span{
  display:block;font-size:.6rem;letter-spacing:.2em;font-weight:600;
  margin:0 0 auto;padding-bottom:14px;
}
.contact-cards .ccard b,
.side .ccard b{
  display:block;min-width:0;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.35;
}
/* the address is the longest value, so it sets its own size */
.contact-cards .ccard-mail,
.side .ccard-mail{
  font-size:clamp(.8rem,1.02vw,.98rem)!important;font-weight:600;letter-spacing:.005em;
}
/* the enquiry page column is narrower, so its cards run a little tighter */
.side .ccard{padding:24px 17px}
.side .ccard b{font-size:clamp(.88rem,1.07vw,1.01rem)!important}
.side .ccard-mail{font-size:clamp(.72rem,.92vw,.86rem)!important;letter-spacing:0}
@media(max-width:940px){
  .contact-cards,.side{grid-template-columns:1fr}
  .contact-cards .ccard,.side .ccard{min-height:0}
}