/* Layout and components. All colour, type and spacing comes from tokens.css,
   which is generated from the client's brand. Nothing here hardcodes a colour. */
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-9999px;padding:.6rem 1rem;background:var(--color-primary);color:var(--color-on-primary)}
.skip:focus{left:1rem;top:1rem;z-index:100}
.container{width:100%;max-width:var(--container-width);margin-inline:auto;padding-inline:var(--space-md)}
.container.narrow{max-width:44rem}
.muted{color:var(--color-text-muted)}
.small{font-size:var(--text-sm)}

/* header */
.site-header{background:var(--color-background);border-bottom:1px solid var(--color-border)}
.site-header.sticky{position:sticky;top:0;z-index:50}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding-block:var(--space-sm)}
.logo{font-weight:700;font-size:var(--text-lg);color:var(--color-text);text-decoration:none}
.site-header nav{display:flex;align-items:center;gap:var(--space-md)}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:.5rem}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--color-text)}

/* hero */
.hero{padding-block:var(--space-3xl);background:var(--color-surface);position:relative}
.hero[style*="--hero-image"]::before{content:"";position:absolute;inset:0;
  background:var(--hero-image) center/cover;opacity:.18}
.hero .container{position:relative}
.hero h1{margin:0 0 var(--space-sm);max-width:20ch}
.hero .lede{font-size:var(--text-lg);color:var(--color-text-muted);max-width:52ch;margin:0 0 var(--space-lg)}
.hero-centered{text-align:center}
.hero-centered h1,.hero-centered .lede{margin-inline:auto}
.hero-split .container{display:grid;gap:var(--space-xl);grid-template-columns:1fr 1fr;align-items:center}

/* bands */
.band{padding-block:var(--space-2xl)}
.band.alt{background:var(--color-surface)}
.rhythm-compact .band{padding-block:var(--space-xl)}
.rhythm-spacious .band{padding-block:var(--space-3xl)}
.band h2{margin:0 0 var(--space-lg)}
.split{display:grid;gap:var(--space-xl);grid-template-columns:1fr 1fr;align-items:center}

/* cards */
.cards{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.card{background:var(--color-background);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:var(--space-lg)}
.card .icon{font-size:var(--text-2xl);line-height:1;margin-bottom:var(--space-xs)}
.card h3{margin:0 0 var(--space-2xs);font-size:var(--text-lg)}
.card p{margin:0;color:var(--color-text-muted)}

.gallery{display:grid;gap:var(--space-sm);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover}

.quotes{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
blockquote{margin:0;padding:var(--space-lg);background:var(--color-background);
  border-left:3px solid var(--color-primary);border-radius:var(--radius)}
blockquote p{margin:0 0 var(--space-sm);font-style:italic}
cite{font-style:normal;font-weight:600;font-size:var(--text-sm)}

/* form */
.contact-form{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-md)}
.contact-form .two{display:grid;gap:var(--space-sm);grid-template-columns:1fr 1fr}
.contact-form label{display:flex;flex-direction:column;gap:.25rem;font-size:var(--text-sm);font-weight:600}
.contact-form input,.contact-form textarea{
  font:inherit;font-weight:400;padding:.6rem .7rem;border:1px solid var(--color-border);
  border-radius:6px;background:var(--color-background);color:var(--color-text)}
.contact-form input:focus,.contact-form textarea:focus{
  outline:3px solid var(--color-primary);outline-offset:1px}
.contact-form .button{align-self:flex-start;border:0}
/* honeypot: hidden from people, visible to bots. Not display:none — some bots
   skip those. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
.site-footer{background:var(--color-surface);border-top:1px solid var(--color-border);
  padding-block:var(--space-xl) var(--space-md);margin-top:var(--space-2xl)}
.site-footer .cols{display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.site-footer p{margin:.2rem 0}
.site-footer address{font-style:normal;color:var(--color-text-muted)}
.social{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.legal{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-border);
  color:var(--color-text-muted)}
.button.large{padding:.8rem 1.6rem;font-size:var(--text-lg)}

@media (max-width:48rem){
  .nav-toggle{display:flex}
  .site-header nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--color-background);
    border-bottom:1px solid var(--color-border);padding:var(--space-sm)}
  .site-header nav.open{display:flex}
  .site-header nav a{padding:.7rem var(--space-sm)}
  .split,.hero-split .container,.contact-form .two{grid-template-columns:1fr}
}

/* ── additional section types ──────────────────────────────────────────── */
.menu-list { display: flex; flex-direction: column; }
.menu-row { display: flex; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); }
.menu-row:last-child { border-bottom: 0; }
.menu-row .price { font-weight: 700; white-space: nowrap; color: var(--color-primary); }

.card.person img { width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); margin-bottom: var(--space-sm); }
.card.person .role { color: var(--color-primary); font-weight: 600;
  font-size: var(--text-sm); margin: 0 0 var(--space-2xs); }

.card.tier .amount { font-size: var(--text-2xl); font-weight: 800; margin: 0 0 var(--space-sm); }
.card.tier.featured { border-color: var(--color-primary); border-width: 2px; }
.ticks { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.ticks li { padding-left: 1.4em; position: relative; margin: .3em 0; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }

details.faq { border-bottom: 1px solid var(--color-border); padding: var(--space-sm) 0; }
details.faq summary { cursor: pointer; font-weight: 600; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; float: right; color: var(--color-primary); font-weight: 700; }
details.faq[open] summary::after { content: "−"; }
details.faq p { margin: var(--space-xs) 0 0; color: var(--color-text-muted); }

.event { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-md);
  padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
.event:last-child { border-bottom: 0; }
.event .when { font-weight: 700; color: var(--color-primary); }
.event h3 { margin: 0 0 var(--space-3xs); font-size: var(--text-lg); }
.event p { margin: 0; }

.cta-band { background: var(--color-primary); color: var(--color-on-primary);
  padding-block: var(--space-2xl); text-align: center; }
.cta-band h2 { margin: 0 0 var(--space-xs); }
.cta-band p { margin: 0 0 var(--space-lg); opacity: .9; }
.cta-band .button { background: var(--color-on-primary); color: var(--color-primary); }
.cta-band .button:hover { background: var(--color-on-primary); opacity: .9; }

@media (max-width: 40rem) { .event { grid-template-columns: 1fr; gap: var(--space-2xs); } }

/* Two logos: the full lock-up on wide screens, a compact mark on narrow ones.
   With only one supplied, that one is always shown. */
.logo-compact { display: none; }
@media (max-width: 34rem) {
  .logo .logo-full:not(:only-child) { display: none; }
  .logo .logo-compact { display: block; }
}

/* Build stamp in the footer. Deliberately quiet — it is for you and for a
   support call, not a design element. Still selectable, so it can be quoted. */
.site-footer .build-stamp {
  margin-left: .6rem;
  opacity: .55;
  font-variant-numeric: tabular-nums;
  font-size: .85em;
}