/* ==========================================================================
   Ebony & Ivory — ebonyivory.co
   Hand-built stylesheet. Tokens lifted from the original Astra/Spectra build.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Two coppers, not one. Copper is a light hue, so a single tone cannot both
     read as copper on a heading and stay legible at 12px. --copper carries the
     headings and the counters (large text, needs 3:1); --copper-deep carries
     eyebrows, links and button fills (small text, needs 4.5:1). Both clear WCAG
     AA on white, grey and cream. */
  --copper:       #9B6234;
  --copper-deep:  #8A5B36;

  /* Kept as aliases so nothing downstream breaks. */
  --brown:        var(--copper-deep);
  --brown-dark:   #6E4726;

  --ink:          #000000;
  --ink-soft:     #262626;
  --grey:         #e5e3e0;
  --cream:        #f8f6f3;
  --white:        #ffffff;
  --rule:         rgba(0, 0, 0, .14);

  --font-display: 'Philosopher', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-ui:      'Cabin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --container:    1200px;
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);
  --section-y:    clamp(3.5rem, 8vw, 7rem);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe { max-width: 100%; display: block; }
[hidden] { display: none !important; }
img { height: auto; }

a { color: var(--brown); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brown-dark); }

:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--copper);
}

h1 { font-size: clamp(2.35rem, 5.2vw, 4.0625rem); }  /* 65px */
h2 { font-size: clamp(1.85rem, 3.6vw, 2.375rem); }   /* 38px */
h3 { font-size: clamp(1.7rem, 3.2vw, 2.125rem); }    /* 34px */
h4 { font-size: clamp(1.4rem, 2.4vw, 1.8125rem); }   /* 29px */
h5 { font-size: 1.25rem; }

/* Lets a semantic h1 carry h2's visual weight, so heading order stays correct
   on pages whose lead heading is visually secondary. */
.title--md { font-size: clamp(1.85rem, 3.6vw, 2.375rem); }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }
strong { font-weight: 700; }

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .75rem;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brown);
  margin: 0 0 1.1em;
}

.lede { font-size: 1.0625rem; }

/* --- Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--grey  { background: var(--grey); }
.section--cream { background: var(--cream); }
.section--dark  { background: var(--ink); color: var(--white); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark a { color: var(--white); }

.center { text-align: center; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .75rem;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px 35px;
  border: 1px solid var(--brown);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn--solid {
  background: var(--brown);
  color: var(--white);
}
.btn--solid:hover,
.btn--solid:focus-visible {
  background: var(--brown-dark);
  border-color: var(--brown-dark);
  color: var(--white);
}

.btn--outline {
  background: transparent;
  color: var(--brown);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--brown);
  color: var(--white);
}

/* Outline button sitting on a dark section */
.section--dark .btn--outline {
  color: var(--white);
  border-color: var(--white);
}
.section--dark .btn--outline:hover,
.section--dark .btn--outline:focus-visible {
  background: var(--white);
  color: var(--ink);
}

.btn__arrow { width: 1em; height: 1em; flex: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-row--center { justify-content: center; }

/* --- Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brown);
  color: var(--white);
  padding: 12px 20px;
  z-index: 100;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.skip-link:focus {
  left: 0;
  color: var(--white);
}

/* --- Header --------------------------------------------------------------- */
.site-header {
  padding-block: clamp(1.25rem, 3vw, 2rem);
  background: var(--white);
}
.site-header .container {
  display: flex;
  justify-content: center;
}
.site-logo { width: 170px; height: auto; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 7vw, 6rem);
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; }
}
.hero h1 { margin-bottom: .6em; }
.hero__copy p { max-width: 46em; }
.hero .btn-row { margin-top: 2.5rem; }

/* Mobile-only hero photo above the headline — mirrors the live site,
   which leads with a still on small screens and puts the video below. */
.hero__mobile { display: block; margin-bottom: clamp(1.75rem, 5vw, 2.5rem); }
.hero__mobile img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: center 28%;
}
@media (min-width: 900px) {
  .hero__mobile { display: none; }
}

.hero__media {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 620px;
  margin-inline: auto;
  width: 100%;
  background: var(--grey);
  overflow: hidden;
}
.hero__media video,
.hero__media iframe,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* --- Full-bleed image band ------------------------------------------------ */
.band {
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 320px;
  object-fit: cover;
  object-position: center 30%;
}
@media (max-width: 640px) {
  .band { aspect-ratio: 4 / 3; min-height: 0; }
}

/* --- Two-column founder blocks -------------------------------------------- */
.founders {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.founders__col h3 { margin-bottom: .55em; }
@media (min-width: 800px) {
  .founders { grid-template-columns: 1fr 1fr; }
  .founders__col--right { text-align: right; }
}

/* --- Portrait trio -------------------------------------------------------- */
.trio {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 720px) {
  .trio { grid-template-columns: 1fr 1.1fr 1fr; }
}
.trio img { width: 100%; object-fit: cover; }
.trio__side  { aspect-ratio: 4 / 3; }
.trio__centre { aspect-ratio: 3 / 4; }

/* --- Intersection list ---------------------------------------------------- */
.intersection {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  list-style: none;
  padding: 0;
}
.intersection li { margin-bottom: .35em; }
.intersection b { color: var(--brown); font-weight: 700; }

/* --- Offer cards ---------------------------------------------------------- */
.cards {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 800px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
.card { text-align: center; }
.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 1.75rem;
}
.card__num {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--brown);
  margin-bottom: .75rem;
}
.card h3 { margin-bottom: .7em; }
.card p { margin-bottom: 1.4em; }

/* --- Split feature -------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}

.collage { position: relative; }
.collage__main {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.collage__inset {
  position: absolute;
  right: -6%;
  top: 8%;
  width: 46%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 6px solid var(--white);
}
@media (max-width: 560px) {
  .collage__inset { right: 0; width: 40%; border-width: 4px; }
}

/* --- Feature list --------------------------------------------------------- */
.features { margin-top: 2.5rem; }
.feature { margin-bottom: 1.75rem; }
.feature__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.feature__dash {
  flex: none;
  width: 22px;
  height: 3px;
  background: var(--brown);
  transform: translateY(-.35em);
}
.feature h3 {
  font-size: 1.25rem;
  margin: 0 0 .4em;
  color: var(--brown-dark);
}
.feature p { margin: 0 0 0 calc(22px + 1rem); }

/* --- Stats ---------------------------------------------------------------- */
.stats {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 800px) {
  .stats { grid-template-columns: 1.2fr 1fr 1fr; }
}
/* Specificity matters here. `.stat p` is 0-1-1 and the figure is itself a <p>
   inside .stat, so a bare `.stat__figure` (0-1-0) loses the cascade and the
   number renders at body size. Scoping it to `.stat .stat__figure` (0-2-0)
   wins. Do not flatten this selector. */
.stat .stat__figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--copper);
  margin-bottom: .3em;
  /* Fixed-width digits so the number doesn't jitter while counting up */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.stat p { font-size: .95rem; }

/* --- Testimonials --------------------------------------------------------- */
.testimonials {
  position: relative;
  background-color: var(--ink-soft);
  background-size: cover;
  background-position: center;
  color: var(--white);
  isolation: isolate;
}
.testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Horizontal gradient, not a flat wash. The stairway photo is bright
     limestone, so a uniform overlay dark enough to keep white text legible
     also makes the whole band read heavy. This lets the photo (and the woman
     on the stairs) show through on the left, and keeps the density behind the
     testimonial text on the right, where legibility is needed. */
  background: linear-gradient(90deg,
              rgba(0, 0, 0, .40) 0%,
              rgba(0, 0, 0, .50) 45%,
              rgba(0, 0, 0, .64) 100%);
  z-index: -1;
}
/* Single column below 900px: text sits over the full-width image, so it needs
   an even wash rather than a horizontal one. Still lighter than the old .68. */
@media (max-width: 899px) {
  .testimonials::before {
    background: rgba(0, 0, 0, .60);
  }
}
.testimonials h2 { color: var(--white); }
/* Top-align the two testimonial columns so the "What Our Clients Say" heading
   sits up near the first testimonial rather than floating in the vertical
   centre of a tall section. */
@media (min-width: 900px) {
  .testimonials .split { align-items: start; }
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: .6;
  color: var(--white);
  display: block;
  margin-bottom: .35em;
}
.testimonial + .testimonial {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
}
.testimonial { border-bottom: 1px solid rgba(255, 255, 255, .55); padding-bottom: 2rem; }
.testimonial p { font-size: 1.0625rem; }
.testimonial cite {
  font-style: normal;
  font-size: .95rem;
  color: rgba(255, 255, 255, .85);
}
.stars { color: #e8b64c; letter-spacing: .1em; margin-bottom: .75rem; }

/* --- Contact / form ------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 860px) {
  .contact-grid { grid-template-columns: 1.15fr .85fr; }
}

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--ink-soft);
}
.field__optional { font-weight: 400; color: #777; }
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fafafa;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  padding: 14px 16px;
}
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--copper-deep);
  outline-offset: 0;
  border-color: var(--copper-deep);
  background: var(--white);
}
.field textarea { min-height: 130px; resize: vertical; }

/* Telephone input group.
   The prefix used to be absolutely positioned with height:100%, which resolved
   against .field — and .field contains the label too, so the prefix stood taller
   than the input and sat proud of it. It is now a flex row that owns the border,
   with a borderless input inside, so the two can never drift apart. */
.input-group {
  display: flex;
  align-items: stretch;
  background: #fafafa;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  overflow: hidden;
}
.input-group:focus-within {
  border-color: var(--copper-deep);
  outline: 2px solid var(--copper-deep);
  outline-offset: 0;
  background: var(--white);
}
.input-group__prefix {
  display: flex;
  align-items: center;
  gap: .4em;
  padding: 0 14px;
  font-size: .95rem;
  line-height: 1;
  color: #666;
  background: #f2f0ee;
  border-right: 1px solid #d8d8d8;
  white-space: nowrap;
  user-select: none;
}
.input-group input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 14px 16px;
}
.input-group input:focus {
  outline: none;
  background: transparent;
}

/* Honeypot — hidden from humans, present for bots */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Turnstile renders its own iframe; this only spaces it from the Send button. */
.cf-turnstile { margin-bottom: 1.5rem; }

.form-status {
  margin-top: 1rem;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: .95rem;
}
.form-status[hidden] { display: none; }
.form-status--ok   { background: #eef6ef; border: 1px solid #bcd9c0; color: #24502c; }
.form-status--err  { background: #fdeeee; border: 1px solid #e6bcbc; color: #7a2020; }

.field-error {
  display: block;
  margin-top: .35rem;
  font-size: .85rem;
  color: #a32323;
}
.field-error[hidden] { display: none; }

button[disabled] { opacity: .6; cursor: progress; }

/* --- Contact details panel ------------------------------------------------ */
/* Three contact details sit side by side, as on the original. They shrink
   rather than wrap — an email address is what would otherwise break the row. */
.details__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 1.25rem 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.details__row--single { grid-template-columns: 1fr; }
.details__row + .details__row { padding-top: 1.5rem; }
.details__row:last-child { border-bottom: 0; }
.details__row > div { min-width: 0; }
.details dt {
  font-size: .85rem;
  color: #6b6b6b;
  margin-bottom: .25rem;
}
.details dd {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.details dd.details__email { font-size: .9375rem; }
.details dd a { text-decoration: none; }
.details dd a:hover { text-decoration: underline; }

.map {
  width: 100%;
  height: clamp(320px, 45vw, 520px);
  border: 0;
  display: block;
}

/* --- Embed slot (tickets) ------------------------------------------------- */
.embed-slot {
  margin-top: clamp(2rem, 5vw, 3rem);
  min-height: 320px;
}
.embed-slot iframe { width: 100%; border: 0; }

.embed-notice {
  background: var(--cream);
  padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  border-radius: 8px;
}
.embed-notice__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  line-height: 1.2;
  color: var(--copper);
  margin-bottom: .5em;
}

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .8);
  padding-block: 2.5rem;
  text-align: center;
  font-size: .9rem;
}
.site-footer a { color: rgba(255, 255, 255, .8); }
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }

/* --- Back to top ---------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--brown);
  color: var(--white);
  border: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 50;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--brown-dark); }