/* ==========================================================================
   ONCE CONTENT — COMPONENTS
   Nav, footer, buttons, cards, FAQ, forms, badges, quotes.
   ========================================================================== */

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.9em;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-editorial), color var(--dur-fast) var(--ease-editorial), border-color var(--dur-fast) var(--ease-editorial), transform var(--dur-fast) var(--ease-editorial);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--brown);
  color: var(--on-brown);
  border-color: var(--brown);
}
.btn--primary:hover { background: var(--brown-ink); border-color: var(--brown-ink); }

.btn--ghost {
  background: transparent;
  color: var(--brown-ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--brown); color: var(--on-brown); border-color: var(--brown); }

.btn--on-brown {
  background: var(--cream);
  color: var(--brown-ink);
  border-color: var(--cream);
}
.btn--on-brown:hover { background: var(--on-brown); }

.btn--ghost-on-brown {
  background: transparent;
  color: var(--on-brown);
  border-color: rgba(244,238,227,0.4);
}
.btn--ghost-on-brown:hover { background: rgba(244,238,227,0.12); border-color: var(--on-brown); }

.btn--text {
  padding: 0;
  border: none;
  font-size: var(--fs-small);
  color: var(--brown-ink);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding-bottom: 0.15em;
}
.btn--text:hover { border-color: var(--brown-ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------- Site nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(227, 216, 197, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-editorial), background var(--dur-fast) var(--ease-editorial);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
  gap: var(--space-md);
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--brown-ink);
  white-space: nowrap;
}
.wordmark em { font-style: italic; color: var(--taupe); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.8vw, 2.1rem);
}
.nav-links a {
  text-decoration: none;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  color: var(--brown-ink);
  position: relative;
  padding-block: 0.25em;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--brown-ink);
  transition: right var(--dur-fast) var(--ease-editorial);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { right: 0; }
.nav-links a[aria-current="page"] { color: var(--brown-ink); font-weight: 600; }

.nav-cta { display: flex; align-items: center; gap: var(--space-sm); }
.nav-cta .btn { padding: 0.75em 1.5em; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  position: relative;
  z-index: 700;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--brown-ink);
  transition: transform var(--dur-fast) var(--ease-editorial), opacity var(--dur-fast) var(--ease-editorial);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Off-canvas mobile menu — hidden by default at every viewport; only
   opened via JS (which only exposes the hamburger trigger under the
   880px breakpoint below), but kept structurally hidden here regardless
   so it can never render inline if JS or the trigger is unavailable. */
.mobile-menu {
  position: fixed;
  inset: 0;
  top: 0;
  background: var(--cream);
  z-index: 600;
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--container-pad) var(--space-lg);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-med) var(--ease-editorial), visibility 0s linear var(--dur-med);
  overflow-y: auto;
}
.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--dur-med) var(--ease-editorial), visibility 0s linear 0s;
}
.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-menu-links {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.mobile-menu-links a {
  font-family: var(--font-serif);
  font-size: 2rem;
  text-decoration: none;
  color: var(--brown-ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-xs);
  display: block;
}
.mobile-menu-footer {
  margin-top: auto;
  padding-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-cta .btn--ghost { display: none; }
  .nav-toggle { display: flex; }
}

body.menu-open { overflow: hidden; }

/* -------------------------------------------------------------- Site footer */
.site-footer {
  background: var(--brown);
  color: var(--on-brown-muted);
  padding-block: var(--space-xl) var(--space-md);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.footer-brand .wordmark { color: var(--on-brown); }
.footer-brand p { margin-top: var(--space-sm); max-width: 26ch; color: var(--on-brown-muted); }
.footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--taupe-light) !important;
  font-size: 1.05rem;
  margin-top: 0.9rem !important;
}
.footer-col h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-brown);
  margin-bottom: var(--space-sm);
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.65em; }
.footer-col a {
  text-decoration: none;
  color: var(--on-brown-muted);
  font-size: var(--fs-small);
  transition: color var(--dur-fast);
}
.footer-col a:hover { color: var(--on-brown); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--on-brown-muted);
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Collection / package card */
.collection-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--space-md);
  position: relative;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.collection-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.collection-card--featured { border-color: var(--brown); }
.collection-card__badge {
  position: absolute;
  top: -1px; right: var(--space-md);
  background: var(--brown);
  color: var(--on-brown);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 0.5em 0.9em;
}
.collection-card__num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--taupe);
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}
.collection-card__head {
  margin-bottom: 0.35em;
}
.collection-card__name { font-size: var(--fs-h3); }
.collection-card__hours {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--taupe);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.collection-card__desc {
  color: var(--brown-soft);
  margin-bottom: var(--space-sm);
}
.collection-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-bottom: var(--space-md);
  flex-grow: 1;
}
.collection-card__list li {
  display: flex;
  gap: 0.7em;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.collection-card__list li::before {
  content: '';
  flex-shrink: 0;
  width: 5px; height: 5px;
  margin-top: 0.55em;
  background: var(--taupe);
  border-radius: 50%;
}
.collection-card__foot { margin-top: auto; }
.collection-card__line {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--brown-soft);
  margin-bottom: var(--space-sm);
}

/* Add-on row */
.addon-row {
  padding-block: var(--space-md);
  border-top: 1px solid var(--line);
}
.addon-row:last-child { border-bottom: 1px solid var(--line); }
.addon-row__name { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; }
.addon-row__desc { color: var(--brown-soft); font-size: var(--fs-small); margin-top: 0.35em; max-width: 48ch; }

/* Portfolio card */
.portfolio-card { display: block; text-decoration: none; color: inherit; }
.portfolio-card__media { margin-bottom: var(--space-sm); }
.portfolio-card__media .frame { transition: transform var(--dur-slow) var(--ease-editorial); }
.portfolio-card:hover .frame img { transform: scale(1.035); }
.portfolio-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.portfolio-card__names { font-size: var(--fs-h4); font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); }
.portfolio-card__venue { color: var(--taupe); font-size: var(--fs-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-top: 0.4em; }

/* Portfolio video frame (click-to-play, nothing downloads until pressed) */
.video-frame { position: relative; cursor: pointer; background: var(--brown); }
.video-frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: rgba(244, 238, 227, 0.92);
  color: var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  padding-left: 3px;
  border: none;
  transition: transform var(--dur-fast) var(--ease-editorial), background var(--dur-fast);
}
.video-frame:hover .video-play-btn { transform: translate(-50%, -50%) scale(1.08); background: var(--on-brown); }
.portfolio-card__video { width: 100%; height: 100%; object-fit: cover; background: #000; }

/* Placeholder media (clearly labelled, per brand rule: never fabricate) */
.placeholder-media {
  background: linear-gradient(155deg, var(--cream-deep), var(--cream-light));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--brown-soft);
  padding: var(--space-sm);
}
.placeholder-media__inner { max-width: 22ch; }
.placeholder-media__inner .eyebrow { justify-content: center; margin-bottom: 0.6em; }
.placeholder-media__inner .eyebrow::before { display: none; }
.placeholder-media__inner p { font-size: var(--fs-small); }

/* Testimonial */
.testimonial-card {
  padding: var(--space-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.testimonial-card blockquote {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-sm);
  color: var(--brown-ink);
}
.testimonial-card cite {
  display: block;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  color: var(--taupe);
}

/* Vendor/collection "good fit" checklist */
.fit-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.fit-list li { display: flex; gap: 0.85em; align-items: flex-start; font-size: var(--fs-small); }
.fit-list .icon { flex-shrink: 0; margin-top: 0.15em; }
.fit-list--yes .icon { color: var(--brown); }
.fit-list--no .icon { color: var(--taupe); }

/* Process steps */
.process-step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-top: 1px solid var(--line);
}
.process-step:last-child { border-bottom: 1px solid var(--line); }
.process-step__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--taupe);
}
.process-step__title { font-family: var(--font-sans); font-weight: 600; margin-bottom: 0.4em; }
.process-step__desc { color: var(--brown-soft); max-width: 52ch; }

/* Pull quote / atmosphere line */
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--brown-ink);
  text-align: center;
  max-width: 34ch;
  margin-inline: auto;
}

/* ---- FAQ accordion ---- */
.faq-item {
  border-top: 1px solid var(--line);
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  text-align: left;
  padding-block: var(--space-sm);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--brown-ink);
}
.faq-item__icon {
  flex-shrink: 0;
  width: 1.1rem; height: 1.1rem;
  position: relative;
}
.faq-item__icon::before, .faq-item__icon::after {
  content: '';
  position: absolute;
  background: var(--brown-ink);
  transition: transform var(--dur-fast) var(--ease-editorial), opacity var(--dur-fast) var(--ease-editorial);
}
.faq-item__icon::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-item__icon::after { top: 0; left: 50%; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.faq-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-med) var(--ease-editorial);
}
.faq-item__a-inner {
  padding-bottom: var(--space-sm);
  color: var(--brown-soft);
  max-width: 62ch;
}

/* ---- Forms ---- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-md);
}
.form-field { display: flex; flex-direction: column; gap: 0.55em; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brown-soft);
}
.form-field .hint { font-size: var(--fs-small); color: var(--taupe); font-weight: 400; text-transform: none; letter-spacing: 0; }
.form-field input,
.form-field select,
.form-field textarea {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  font-size: var(--fs-body);
  color: var(--brown-ink);
  transition: border-color var(--dur-fast);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--taupe); opacity: 0.8; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--brown); }
.form-field textarea { resize: vertical; min-height: 7.5rem; }
.radio-group { display: flex; flex-wrap: wrap; gap: 0.6em; }
.radio-chip {
  position: relative;
}
.radio-chip input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.radio-chip span {
  display: inline-flex;
  padding: 0.6em 1.1em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--fs-small);
  background: var(--surface);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.radio-chip input:checked + span { background: var(--brown); color: var(--on-brown); border-color: var(--brown); }
.radio-chip input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---- Badges (awards etc.) ---- */
.credential-strip {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.credential-strip img { width: 64px; height: 64px; object-fit: contain; }
.credential-strip__text { font-size: var(--fs-small); color: var(--brown-soft); max-width: 30ch; }

/* ---- "Are we a fit" split ---- */
.split-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
@media (max-width: 720px) {
  .split-list-grid { grid-template-columns: 1fr; }
}

/* ---- Sticky mobile enquire bar ---- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  background: var(--brown);
  padding: 0.8rem var(--container-pad);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  box-shadow: 0 -8px 24px rgba(42,19,4,0.18);
}
.sticky-cta span { color: var(--on-brown); font-size: var(--fs-small); }
.sticky-cta .btn { padding: 0.7em 1.3em; }
@media (max-width: 720px) {
  .sticky-cta.is-active { display: flex; }
  body { padding-bottom: 0; }
}

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--brown);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-media img, .hero-media video {
    animation: hero-kenburns 22s var(--ease-editorial) forwards;
  }
}
@keyframes hero-kenburns {
  from { transform: scale(1.11); }
  to { transform: scale(1.0); }
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(30,14,3,0.82) 0%, rgba(30,14,3,0.32) 46%, rgba(30,14,3,0.18) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  padding-top: clamp(7rem, 16vw, 11rem);
  color: var(--on-brown);
  max-width: 46rem;
}
.hero-content .eyebrow { color: var(--taupe-light); margin-bottom: var(--space-sm); }
.hero-content h1 { color: var(--on-brown); }
.hero-content h1 em { color: var(--taupe-light); font-style: italic; }
.hero-lead {
  color: var(--on-brown);
  margin-top: var(--space-sm);
  max-width: 34ch;
  font-size: var(--fs-lead);
}
.hero-sub {
  color: var(--on-brown-muted);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  margin-top: 0.6em;
  margin-bottom: var(--space-md);
}
.hero .btn-row { margin-top: var(--space-md); }

.hero-scroll-cue {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3.25rem);
  bottom: var(--space-md);
  z-index: 2;
  width: 1px;
  height: 52px;
  background: linear-gradient(0deg, transparent, rgba(244,238,227,0.55));
}
.hero-scroll-cue::after {
  content: '';
  position: absolute;
  left: -2px; top: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--on-brown);
  animation: scroll-cue 2.6s var(--ease-editorial) infinite;
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue::after { animation: none; top: 40%; } }
@keyframes scroll-cue {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}
@media (max-width: 720px) {
  .hero { min-height: 88vh; }
  .hero-scroll-cue { display: none; }
}

/* ---- Sub-page header (non-hero pages) ---- */
.page-intro {
  padding-top: clamp(6.5rem, 12vw, 9rem);
  padding-bottom: var(--space-xl);
}
.page-intro .eyebrow { margin-bottom: var(--space-sm); }
.page-intro .lead { margin-top: var(--space-md); max-width: 56ch; }

/* ---- Enquiry CTA card ---- */
.enquiry-cta {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--space-xl) var(--space-lg);
}

.info-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.info-list li {
  display: flex;
  gap: 0.85em;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--brown-soft);
}
.info-list li::before {
  content: '';
  flex-shrink: 0;
  width: 5px; height: 5px;
  margin-top: 0.5em;
  background: var(--taupe);
  border-radius: 50%;
}

/* ---- Marquee-free logo/vendor strip ---- */
.wrap-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
}