/* Ceol Music — design tokens mirror DESIGN.md frontmatter 1:1.
   Every color the stylesheet paints is declared here; no rule below this block
   may introduce a literal hex. */
:root {
  /* Forest — surfaces and text on light */
  --forest-deep: #123527;
  --forest-night: #0d2a1e;
  --forest-black: #0b2218;
  --forest-panel: #1b4432; /* gallery-tile surface inside the room panel */
  --forest-ink: #2c4a3c;   /* unselected tab label on fog-mist */
  --forest-mid: #2f6a4f;
  --forest-sage: #4b7a63;
  --forest-muted: #4b6b5b;
  --forest-faint: #5b7569; /* darkened from #7d9488 during extraction, then again from #5f7a6d in audit follow-up — that step passed 4.5:1 against pure white but only 4.41:1 against the actual ivory-paper page background it's most often used on */

  /* Neutrals */
  --ivory-paper: #faf8f4;
  --cream-surface: #f6f2ea;
  --paper-white: #ffffff;
  --mint-tint: #e2eede;
  --mint-pale: #cfe2ca;
  --fog-mist: #f2f5ef;
  --fog-tint: #eef3ea; /* middle stop of the contact panel gradient */

  /* Rosewood — the single accent */
  --rosewood-ink: #7d3e54;   /* accent text on rosewood-tint; the AA-safe step */
  --rosewood-deep: #a8546f;
  --rosewood-bloom: #f0b3c6;
  --rosewood-tint: #f6e6ea;
  --rosewood-mist: rgba(140, 72, 94, .22); /* far edge of the hero scrim */

  /* Light-on-dark ramp — brightest to quietest */
  --sage-bright: #f1f6ee; /* headings and selected-tab label on forest surfaces */
  --sage-light: #e5efe6;  /* credential strip, mobile nav links */
  --sage-soft: #d3e2d7;   /* hero lede, desktop nav links, hero stat labels */
  --mist-text: #a9d3ba;   /* hero eyebrow */
  --sage-dim: #a9c6b4;    /* secondary copy on forest surfaces */
  --sage-mist: #9dbfaa;   /* gallery-tile captions */
  --sage-pale: #8fb59d;   /* room-panel eyebrow */

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: Outfit, system-ui, sans-serif;

  --rounded-focus: 4px; /* documented exception: traces browser outlines, not containers */
  --rounded-sm: 14px;
  --rounded-md: 20px;
  --rounded-lg: 26px;
  --rounded-xl: 32px;
  --rounded-pill: 999px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-section: clamp(64px, 9vw, 110px);

  /* Measured sticky-header height. The wordmark sets it on wide viewports; the
     48px menu button sets it once the nav collapses at 880px. */
  --header-h: 73px;

  --shadow-hero-card: 0 20px 50px -26px rgba(0, 0, 0, .6);
  --shadow-card-hover: 0 18px 40px -26px rgba(18, 53, 39, .5);

  --ease-rise: cubic-bezier(.22, .68, .28, 1);
  --border-hairline-dark-bg: 1px solid rgba(246, 242, 234, .18);
}

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory-paper);
  color: var(--forest-deep);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--forest-mid); text-decoration: none; }
a:hover { color: var(--rosewood-deep); }
::selection { background: var(--rosewood-tint); color: var(--forest-deep); }
button, input, textarea { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--rosewood-deep);
  outline-offset: 2px;
  border-radius: var(--rounded-focus);
}

.page {
  width: 100%;
  position: relative;
}

/* Skip link — first thing in the tab order, visible only when focused. */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 80;
  padding: 13px 22px;
  border-radius: var(--rounded-pill);
  background: var(--cream-surface);
  color: var(--forest-deep);
  font-size: 15px;
  font-weight: 500;
  transform: translateY(-140%);
  transition: transform .2s var(--ease-rise);
}
.skip-link:focus-visible { transform: none; color: var(--forest-deep); }

/* Motion */
@keyframes ceolrise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Bounded: the hero photo settles rather than drifting forever. Perpetual
   ambient motion is a barrier for the audience this page is built for. */
@keyframes ceoldrift { from { transform: scale(1.08); } to { transform: scale(1); } }

.rise > * { animation: ceolrise 1s var(--ease-rise) both; }
.rise > *:nth-child(1) { animation-delay: .12s; }
.rise > *:nth-child(2) { animation-delay: .32s; }
.hero__bg.drift { animation: ceoldrift 20s var(--ease-rise) forwards; }

/* The hidden state is scoped to .js so the no-JS baseline is fully readable —
   without this, every revealed section stays at opacity 0 if the script fails. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-rise), transform .8s var(--ease-rise);
}
.js [data-reveal="fade"] { transform: none; transition: opacity .9s ease; }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise > *, .hero__bg.drift, .js [data-reveal] { animation: none; transition: none; }
  .skip-link { transition: none; }
}

/* Layout primitives */
.container { max-width: 1440px; margin: 0 auto; padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); }
.section { padding-top: var(--space-section); padding-bottom: var(--space-section); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--rounded-pill);
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  text-align: center;
}
.btn--cream { padding: 15px 30px; background: var(--cream-surface); color: var(--forest-deep); }
.btn--cream:hover { background: var(--rosewood-bloom); color: var(--forest-deep); }
.btn--dark { padding: 15px 24px; background: var(--forest-deep); color: var(--ivory-paper); }
.btn--dark:hover { background: var(--forest-mid); }
.btn--ghost { padding: 15px 28px; background: transparent; color: var(--cream-surface); border: 1px solid rgba(246, 242, 234, .4); }
.btn--ghost:hover { background: rgba(246, 242, 234, .12); color: var(--cream-surface); }

/* Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(18px, 4vw, 40px);
  background: rgba(11, 34, 24, .9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: var(--border-hairline-dark-bg);
}
.site-header__mark { display: inline-flex; align-items: center; min-height: 44px; }
.site-header__mark img { height: 38px; width: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 30px); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 400; color: var(--sage-soft); }
.site-nav a:hover { color: var(--rosewood-bloom); }
.site-nav__cta { padding: 11px 22px; border-radius: var(--rounded-pill); background: var(--cream-surface); color: var(--forest-deep) !important; font-weight: 500; }
.site-nav__cta:hover { background: var(--rosewood-bloom) !important; }

.menu-toggle {
  width: 48px;
  height: 48px;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid rgba(246, 242, 234, .28);
  border-radius: var(--rounded-sm);
  cursor: pointer;
}
.menu-toggle span { display: block; height: 1.5px; background: var(--cream-surface); }

.mobile-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px 18px;
  background: rgba(11, 34, 24, .98);
  border-bottom: 1px solid rgba(246, 242, 234, .14);
}
.mobile-nav a { padding: 14px 8px; font-size: 17px; color: var(--sage-light); border-bottom: 1px solid rgba(246, 242, 234, .1); }
.mobile-nav a:hover { color: var(--rosewood-bloom); }
.mobile-nav .site-nav__cta { margin-top: 12px; padding: 15px 8px; text-align: center; font-size: 17px; border-bottom: none; }
.site-header.is-open .mobile-nav { display: flex; }

@media (max-width: 879px) {
  :root { --header-h: 77px; } /* the 48px menu button, not the wordmark, sets the height here */
  .site-nav { display: none; }
  .menu-toggle { display: flex; }
}
@media (min-width: 880px) {
  .mobile-nav { display: none !important; }
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  padding: clamp(44px, 7vh, 86px) clamp(20px, 4vw, 56px) clamp(32px, 5vh, 60px);
  background: var(--forest-night);
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 46%; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(9, 32, 22, .93) 0%, rgba(11, 38, 26, .82) 40%, rgba(13, 42, 30, .34) 72%, var(--rosewood-mist) 100%);
}
.hero__grain {
  position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 6px);
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 56px);
  align-items: flex-end;
}
.hero__copy { flex: 1 1 440px; min-width: 0; }
.hero__eyebrow { margin: 0 0 clamp(14px, 2vh, 22px); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--mist-text); font-weight: 500; }
.hero__title {
  margin: 0 0 clamp(16px, 2.2vh, 26px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.9vw, 4.625rem);
  line-height: 1.03;
  letter-spacing: -.015em;
  color: var(--cream-surface);
  text-wrap: balance;
}
.hero__title em { font-style: italic; color: var(--rosewood-bloom); }
.hero__lede { margin: 0 0 clamp(22px, 3vh, 34px); max-width: 50ch; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; color: var(--sage-soft); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 3vh, 38px); max-width: 440px; }
.stat {
  flex: 1;
  background: rgba(255, 255, 255, .09);
  border: var(--border-hairline-dark-bg);
  border-radius: var(--rounded-md);
  padding: 18px 20px;
}
.stat__num { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--cream-surface); }
.stat__num small { font-size: 18px; }
/* sage-soft, not sage-dim: the white .09 tile fill lifts the backdrop, and the
   quieter step measured 4.21:1 over the brightest part of the photograph. */
.stat__label { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--sage-soft); }

.strings-panel {
  flex: 1 1 300px;
  max-width: 420px;
  /* .68, not .52: the panel floats over the photograph's brightest region and
     the quieter body step measured 3.91:1 through the thinner fill. */
  background: rgba(9, 30, 21, .68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--border-hairline-dark-bg);
  border-radius: var(--rounded-lg);
  padding: 24px 26px 22px;
  box-shadow: var(--shadow-hero-card);
}
.strings-panel__title { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--cream-surface); }
.strings-panel__desc { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--sage-dim); }
.strings { display: flex; gap: 10px; align-items: flex-end; height: clamp(88px, 12vh, 118px); }
.string-bar {
  flex: 1;
  border: 1px solid rgba(18, 53, 39, .16);
  border-radius: var(--rounded-sm);
  cursor: pointer;
  background: linear-gradient(180deg, var(--mint-tint), var(--mint-pale));
  color: var(--forest-deep);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  transition: transform .18s ease, background .25s ease, color .25s ease;
}
.string-bar[data-height="1"] { height: 50%; }
.string-bar[data-height="2"] { height: 67%; }
.string-bar[data-height="3"] { height: 84%; }
.string-bar[data-height="4"] { height: 100%; }
.string-bar.is-playing { background: var(--rosewood-deep); color: var(--paper-white); transform: translateY(-4px); }

/* Credential strip */
.credential-strip {
  display: flex;
  gap: 4px clamp(14px, 3vw, 44px);
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 22px clamp(20px, 4vw, 40px);
  background: var(--forest-deep);
  color: var(--sage-light);
}
.credential-strip li { font-size: 14px; letter-spacing: .02em; }
/* The separator is drawn, not written, so it can never wrap to a line of its
   own and is never announced by a screen reader. */
.credential-strip li + li::before { content: '·'; opacity: .45; margin-right: clamp(14px, 3vw, 44px); }

/* About */
.about { display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 64px); align-items: flex-start; }
.about__portrait { flex: 1 1 280px; max-width: 440px; position: sticky; top: 96px; }
.about__eyebrow { margin: 0 0 18px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--forest-sage); font-weight: 500; }
.portrait-frame {
  position: relative;
  border-radius: var(--rounded-xl);
  overflow: hidden;
  background: var(--mint-tint);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(18, 53, 39, .1);
}
.portrait-frame::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(18, 53, 39, .07) 0 2px, transparent 2px 11px);
}
.portrait-frame__label { position: relative; text-align: center; padding: 22px; }
.portrait-frame__label img { width: 74px; height: auto; opacity: .5; margin: 0 auto 14px; }
/* forest-muted, not forest-sage: the sage step measured 4.11:1 on mint-tint. */
.portrait-frame__label p { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .06em; color: var(--forest-muted); }

.about__body { flex: 2 1 430px; min-width: 0; }
.about__body h2 {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.125rem, 3.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--forest-deep);
  text-wrap: balance;
}
.about__paragraphs { display: grid; gap: 20px; max-width: 60ch; }
.about__paragraphs p { margin: 0; font-size: 18px; line-height: 1.68; color: var(--forest-muted); text-wrap: pretty; }

.pull-quote {
  margin-top: 38px;
  padding: 28px 30px;
  border-radius: var(--rounded-md);
  background: var(--rosewood-tint);
  border: 1px solid rgba(168, 84, 111, .16);
}
.pull-quote p:first-child { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.45; color: var(--rosewood-ink); text-wrap: pretty; }
/* rosewood-ink, not rosewood-deep: the accent measured 4.19:1 on its own tint. */
.pull-quote cite { display: block; margin: 14px 0 0; font-size: 14px; font-style: normal; color: var(--rosewood-ink); }

/* Services */
.services { background: var(--fog-mist); border-top: 1px solid rgba(18, 53, 39, .08); border-bottom: 1px solid rgba(18, 53, 39, .08); }
.services__head { max-width: 1440px; margin: 0 auto 14px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.services__head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.125rem, 3.6vw, 3.25rem); line-height: 1.08; color: var(--forest-deep); }
.services__head p { margin: 0; max-width: 38ch; font-size: 16px; line-height: 1.6; color: var(--forest-muted); }

.tabs { max-width: 1440px; margin: 34px auto 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.tab {
  padding: 14px 24px;
  border-radius: var(--rounded-pill);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid rgba(18, 53, 39, .2);
  background: transparent;
  color: var(--forest-ink);
  transition: all .2s ease;
}
.tab[aria-selected="true"] { border-color: transparent; background: var(--forest-deep); color: var(--sage-bright); }

.service-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 20px; }
.service-grid[hidden] { display: none; }
.service-card {
  background: var(--paper-white);
  border: 1px solid rgba(18, 53, 39, .1);
  border-radius: var(--rounded-lg);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.service-card__num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--mint-tint);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; color: var(--forest-mid);
}
.service-card h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--forest-deep); }
/* The grow belongs to the body copy alone — letting the meta line grow too
   split the slack between them and knocked the price rules out of alignment
   across a row. */
.service-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--forest-muted); text-wrap: pretty; }
.service-card p:not(.service-card__meta) { flex: 1; }
.service-card__meta { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid rgba(18, 53, 39, .09); font-size: 14px; color: var(--forest-faint); }

/* Training / credentials */
.training { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: flex-start; }
.training__intro { flex: 1 1 300px; min-width: 0; }
.training__intro .eyebrow { margin: 0 0 14px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--forest-sage); font-weight: 500; }
.training__intro h2 { margin: 0 0 20px; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.125rem, 3.6vw, 3.25rem); line-height: 1.1; color: var(--forest-deep); }
.training__intro p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--forest-muted); max-width: 40ch; }

.credential-list { flex: 1.4 1 420px; min-width: 0; display: grid; gap: 0; border-top: 1px solid rgba(18, 53, 39, .14); list-style: none; margin: 0; padding: 0; }
.credential-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: baseline; padding: 20px 2px; border-bottom: 1px solid rgba(18, 53, 39, .14); }
.credential-row__title { font-size: 18px; color: var(--forest-deep); }
.credential-row__meta { font-size: 14px; color: var(--forest-faint); text-align: right; }

/* Once the meta wraps below its title, right-alignment reads as a mistake —
   stack the pair and let both sit on the same left edge. */
@media (max-width: 559px) {
  .credential-row { flex-direction: column; gap: 4px; }
  .credential-row__meta { text-align: left; }
}

/* Room / gallery */
.room-panel { border-radius: var(--rounded-xl); overflow: hidden; background: var(--forest-deep); padding: clamp(34px, 5vw, 64px) clamp(24px, 4vw, 56px); }
.room-panel__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 38px; }
.room-panel__head .eyebrow { margin: 0 0 14px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-pale); font-weight: 500; }
.room-panel__head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.125rem, 3.6vw, 3.25rem); line-height: 1.1; color: var(--sage-bright); }
.room-panel__head p { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.6; color: var(--sage-dim); }
/* 132px, not 180px: the tiles sit inside both the container's and the room
   panel's padding, leaving 302px at a 390px viewport. Anything above 143px
   forced a single column, and four square tiles became ~1,200px of stacked
   placeholder hatch. Measured, not guessed. */
.room-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--rounded-md);
  overflow: hidden;
  background: var(--forest-panel);
  border: 1px solid rgba(241, 246, 238, .14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-tile::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(241, 246, 238, .08) 0 2px, transparent 2px 11px);
}
.gallery-tile span { position: relative; font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .06em; color: var(--sage-mist); text-align: center; padding: 0 14px; }

/* Contact */
.contact-panel {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 56px);
  align-items: flex-start;
  background: linear-gradient(150deg, var(--rosewood-tint) 0%, var(--fog-tint) 62%, var(--mint-tint) 100%);
  border: 1px solid rgba(18, 53, 39, .1);
  border-radius: var(--rounded-xl);
  padding: clamp(32px, 5vw, 56px) clamp(22px, 4vw, 52px);
}
.contact-panel__intro { flex: 1 1 320px; min-width: 0; }
/* rosewood-ink, not rosewood-deep: the accent measured 4.19:1 against the
   gradient's rosewood stop, which sits directly behind this label. */
.contact-panel__intro .eyebrow { margin: 0 0 14px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--rosewood-ink); font-weight: 500; }
.contact-panel__intro h2 { margin: 0 0 22px; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.125rem, 3.6vw, 3.25rem); line-height: 1.08; color: var(--forest-deep); }
.contact-panel__intro p { margin: 0 0 26px; font-size: 16px; line-height: 1.65; color: var(--forest-muted); max-width: 36ch; }
.contact-details { display: grid; gap: 4px; font-size: 16px; color: var(--forest-muted); list-style: none; padding: 0; margin: 0; }
/* These two links are the standing alternative to the form; at 20px tall they
   were the smallest targets on the page. */
.contact-details a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-details .muted { color: var(--forest-muted); padding-top: 10px; }

.form-panel {
  flex: 1.3 1 340px;
  min-width: 0;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(18, 53, 39, .1);
  border-radius: var(--rounded-lg);
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 30px) 26px;
}
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field:last-of-type { margin-bottom: 0; }
.field span { font-size: 14px; color: var(--forest-muted); font-weight: 500; }
.field input, .field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border-radius: var(--rounded-sm);
  border: 1px solid rgba(18, 53, 39, .2);
  background: var(--paper-white);
  font-size: 16px;
  color: var(--forest-deep);
  resize: vertical;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--rosewood-deep); }
.field textarea { min-height: 96px; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--rosewood-deep);
  outline-offset: 2px;
}

.topic-fieldset { border: none; padding: 0; margin: 0 0 16px; }
.topic-fieldset legend { font-size: 14px; color: var(--forest-muted); font-weight: 500; padding: 0 0 7px; }
.topic-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip label {
  display: inline-flex;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--rounded-pill);
  cursor: pointer;
  font-size: 14px;
  border: 1px solid rgba(18, 53, 39, .2);
  background: transparent;
  color: var(--forest-muted);
  font-weight: 400;
  transition: all .15s ease;
}
.chip input:checked + label { border-color: transparent; background: var(--mint-tint); color: var(--forest-deep); font-weight: 500; }
.chip input:focus-visible + label { outline: 2px solid var(--rosewood-deep); outline-offset: 2px; }

.form-submit { margin-top: 4px; width: 100%; }
.form-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--forest-faint); }

/* Sending / failure states — the enquiry is the page's only conversion point,
   so a failed send has to say so rather than disappear. */
.form-submit[aria-disabled="true"] { opacity: .7; cursor: progress; }
.form-error {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: var(--rounded-sm);
  background: var(--rosewood-tint);
  border: 1px solid rgba(168, 84, 111, .28);
  font-size: 14px;
  line-height: 1.55;
  color: var(--rosewood-ink);
}
.form-error a { color: var(--rosewood-ink); text-decoration: underline; }

.form-thanks { display: grid; gap: 12px; padding: 26px 4px; text-align: center; }
.form-thanks h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--forest-deep); }
.form-thanks h3:focus-visible { outline: 2px solid var(--rosewood-deep); outline-offset: 6px; }
.form-thanks p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--forest-muted); }
.form-thanks button {
  justify-self: center;
  margin-top: 8px;
  padding: 13px 24px;
  border-radius: var(--rounded-pill);
  border: 1px solid rgba(18, 53, 39, .2);
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  color: var(--forest-deep);
}

/* Footer */
.site-footer {
  border-top: 1px solid rgba(18, 53, 39, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 44px;
  padding-bottom: 52px;
}
.site-footer img { height: 30px; width: auto; opacity: .85; }
.site-footer p { margin: 0; font-size: 14px; color: var(--forest-faint); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .tagline { font-size: 13px; color: var(--forest-faint); }

/* ==========================================================================
   Coming-soon holding page (pages/coming-soon.html), served at ceolmusic.com
   while the full site is finished. Option C: a full-bleed photo under a forest scrim.
   Every rule is scoped to body.cs / .cs-* so nothing here touches the homepage.
   ========================================================================== */
body.cs {
  --cs-pad-x: clamp(20px, 4vw, 56px);
  --cs-hair-dark: color-mix(in oklch, var(--ivory-paper) 22%, transparent);
  --cs-hair: color-mix(in oklch, var(--forest-deep) 12%, transparent);
  background: var(--forest-deep);
  color: var(--ivory-paper);
  font-size: 17px;
  line-height: 1.6;
}
.cs h1, .cs h2 { font-family: var(--font-display); font-weight: 400; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.cs p { text-wrap: pretty; }
.cs :focus-visible { outline-color: var(--ivory-paper); outline-offset: 3px; }
/* Visually hidden, still read by screen readers (e.g. "opens in a new tab"). */
.cs .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cs-cap { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }

.cs-panel {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column;
}
.cs-panel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; z-index: -2; }
.cs-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--forest-deep) 60%, transparent) 0%, transparent 24%),
    linear-gradient(90deg, color-mix(in oklch, var(--forest-deep) 95%, transparent) 0%, color-mix(in oklch, var(--forest-deep) 74%, transparent) 48%, color-mix(in oklch, var(--forest-deep) 30%, transparent) 100%);
}

.cs-hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 22px var(--cs-pad-x); }
.cs-hdr .cs-cap { color: var(--sage-soft); }
.cs-hdr .cs-cap:last-child { text-align: right; }
.cs-hdr__logo { height: 52px; width: auto; }

.cs-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: clamp(28px, 5vw, 72px); padding: clamp(32px, 6vw, 72px) var(--cs-pad-x) clamp(28px, 4vw, 48px); }
.cs-soon { color: var(--sage-soft); margin: 0 0 18px; }
.cs h1 { font-size: clamp(52px, 8vw, 124px); line-height: .98; max-width: 11ch; }
.cs h1 em { font-style: italic; }
.cs-lede { max-width: 46ch; margin: 26px 0 0; color: var(--sage-soft); font-size: clamp(17px, 1.5vw, 19px); }
.cs-reach { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cs-ghost {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: var(--rounded-pill); border: 1px solid var(--cs-hair-dark);
  color: var(--ivory-paper); font-size: 15px; font-weight: 500;
  background: color-mix(in oklch, var(--forest-deep) 30%, transparent);
}
.cs-ghost:hover {
  color: var(--ivory-paper); /* overrides the global a:hover rosewood, which would fail contrast here */
  background: color-mix(in oklch, var(--forest-deep) 62%, transparent);
  border-color: color-mix(in oklch, var(--ivory-paper) 40%, transparent);
}

/* Workshop card: frosted glass anchored bottom-right */
.cs-card {
  justify-self: end; width: min(420px, 100%); padding: 26px 26px 24px; border-radius: 22px;
  background: color-mix(in oklch, var(--ivory-paper) 92%, transparent); backdrop-filter: blur(16px);
  color: var(--forest-deep); box-shadow: var(--shadow-hero-card);
}
.cs-card :focus-visible { outline-color: var(--forest-deep); }
.cs-card__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cs-card__top .cs-cap { color: var(--forest-muted); }
.cs-card__haus { height: 46px; width: auto; }
.cs-card h2 { font-size: 40px; line-height: 1.02; margin: 14px 0 0; }
.cs-card h2 em { color: var(--rosewood-deep); }
.cs-card__with { margin: 8px 0 0; font-size: 15px; color: var(--forest-muted); }
.cs-card dl { margin: 18px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 15px; border-top: 1px solid var(--cs-hair); padding-top: 16px; }
.cs-card dt { color: var(--forest-muted); }
.cs-card dd { margin: 0; font-weight: 500; }
.cs-btn {
  display: flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 20px;
  border-radius: var(--rounded-pill); background: var(--forest-deep); color: var(--ivory-paper);
  font-size: 16px; font-weight: 500;
}
.cs-btn:hover { background: var(--forest-panel); color: var(--ivory-paper); }

.cs-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin: 0 var(--cs-pad-x); padding: 18px 0 22px;
  border-top: 1px solid var(--cs-hair-dark); font-size: 13px; color: var(--sage-soft);
}

@media (max-width: 879px) {
  .cs-hdr { grid-template-columns: 1fr; justify-items: center; }
  .cs-hdr .cs-cap { display: none; }
  .cs-main { grid-template-columns: 1fr; align-items: start; }
  .cs-card { justify-self: stretch; width: 100%; }
  .cs-panel::before { background: linear-gradient(180deg, color-mix(in oklch, var(--forest-deep) 70%, transparent) 0%, color-mix(in oklch, var(--forest-deep) 88%, transparent) 45%, color-mix(in oklch, var(--forest-deep) 96%, transparent) 100%); }
}