/* ===========================================================
   Fokasu Collective — Design System
   Aesthetic: editorial, sand-and-ink, Byron Bay coastal premium
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Type Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7.5rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 1080px;
  --content-wide: 1320px;

  /* Fonts */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* LIGHT — sand & ink */
:root, [data-theme='light'] {
  --color-bg: #f4efe7;
  --color-surface: #faf6ef;
  --color-surface-2: #ffffff;
  --color-surface-offset: #ebe4d6;
  --color-surface-offset-2: #e0d8c6;
  --color-divider: #d8d0bf;
  --color-border: #c9c0ad;

  --color-text: #1a1814;
  --color-text-muted: #6b665c;
  --color-text-faint: #a39d8e;
  --color-text-inverse: #faf6ef;

  /* Primary — deep ocean ink */
  --color-primary: #0b3a44;
  --color-primary-hover: #082932;
  --color-primary-active: #051c23;
  --color-primary-highlight: #c8d5d8;

  /* Accent — warm terracotta (used sparingly for emphasis chips, sale-ish moments) */
  --color-accent: #b8593b;
  --color-accent-hover: #9c4528;

  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 6px 20px oklch(0.2 0.02 80 / 0.10);
  --shadow-lg: 0 18px 48px oklch(0.2 0.02 80 / 0.16);
}

/* DARK — moonlit ocean */
[data-theme='dark'] {
  --color-bg: #0f1316;
  --color-surface: #161b1f;
  --color-surface-2: #1c2227;
  --color-surface-offset: #1a2024;
  --color-surface-offset-2: #232a30;
  --color-divider: #262d33;
  --color-border: #353d44;

  --color-text: #e8e3d8;
  --color-text-muted: #918a7d;
  --color-text-faint: #5f5a52;
  --color-text-inverse: #0f1316;

  --color-primary: #6fb6c4;
  --color-primary-hover: #8acad7;
  --color-primary-active: #54a3b3;
  --color-primary-highlight: #2a3d44;

  --color-accent: #d97a5a;
  --color-accent-hover: #e88f72;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 20px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 18px 48px oklch(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0f1316;
    --color-surface: #161b1f;
    --color-surface-2: #1c2227;
    --color-surface-offset: #1a2024;
    --color-surface-offset-2: #232a30;
    --color-divider: #262d33;
    --color-border: #353d44;
    --color-text: #e8e3d8;
    --color-text-muted: #918a7d;
    --color-text-faint: #5f5a52;
    --color-text-inverse: #0f1316;
    --color-primary: #6fb6c4;
    --color-primary-hover: #8acad7;
    --color-primary-active: #54a3b3;
    --color-primary-highlight: #2a3d44;
    --color-accent: #d97a5a;
    --color-accent-hover: #e88f72;
  }
}

/* =========================================================== */
/* Layout primitives                                            */
/* =========================================================== */

.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-12));
}

.container--narrow { max-width: var(--content-narrow); }
.container--default { max-width: var(--content-default); }

section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* =========================================================== */
/* Header                                                       */
/* =========================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: oklch(from var(--color-bg) l c h / 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.site-header.is-scrolled { border-bottom-color: var(--color-divider); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-4);
}

.site-logo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none; color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.site-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-text); line-height: 1; }
.site-logo em { font-style: italic; color: var(--color-primary); font-weight: 400; font-size: 1em; letter-spacing: 0; }

.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav a {
  color: var(--color-text-muted); text-decoration: none;
  font-size: var(--text-sm); font-weight: 500;
}
.site-nav a:hover { color: var(--color-text); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  color: var(--color-text-muted);
}
.theme-toggle:hover { background: var(--color-surface-offset); color: var(--color-text); }

/* Mobile menu */
.menu-toggle { display: none; }
@media (max-width: 880px) {
  .site-nav { display: none; position: fixed; top: 64px; right: 0; bottom: 0; left: 0; height: calc(100vh - 64px); height: calc(100dvh - 64px); flex-direction: column; align-items: stretch; padding: var(--space-8); background: var(--color-bg); border-top: 1px solid var(--color-divider); gap: var(--space-2); z-index: 49; overflow-y: auto; }
  .site-nav.is-open { display: flex; }
  #header-cta { display: none; }
  .site-nav a { padding: var(--space-3) var(--space-4); font-size: var(--text-lg); border-bottom: 1px solid var(--color-divider); color: var(--color-text); font-family: var(--font-display); }
  .menu-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 38px; height: 38px; border-radius: var(--radius-full); color: var(--color-text); background: transparent; border: 1px solid var(--color-divider); cursor: pointer; }
  .menu-toggle:hover { background: var(--color-surface-offset); }
  .menu-toggle span { display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}

/* =========================================================== */
/* Buttons                                                      */
/* =========================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  border-radius: var(--radius-full);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  min-height: 44px;
}
.btn--primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--color-surface-offset); border-color: var(--color-text-muted); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); min-height: 52px; }

.btn .arrow { transition: transform var(--transition-interactive); }
.btn:hover .arrow { transform: translateX(4px); }

/* =========================================================== */
/* Hero                                                         */
/* =========================================================== */

.hero {
  position: relative;
  padding-block: clamp(var(--space-16), 12vw, var(--space-32));
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  align-items: end;
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-20); }
}

.hero__copy { max-width: 56ch; }
.hero__headline {
  font-size: clamp(2.75rem, 0.5rem + 5.5vw, 6rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.035em;
  margin-block: var(--space-6) var(--space-6);
}
.hero__headline em { font-style: italic; color: var(--color-primary); font-weight: 400; }
.hero__sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-bottom: var(--space-8);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero__meta { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-8); color: var(--color-text-muted); font-size: var(--text-sm); }
.hero__meta strong { color: var(--color-text); font-weight: 500; }

.hero__visual {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-3);
  aspect-ratio: 5 / 6;
  max-width: 560px;
  margin-inline: auto;
}
.hero__visual img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.hero__visual img:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
.hero__visual img:nth-child(2) { grid-row: 1; grid-column: 2; }
.hero__visual img:nth-child(3) { grid-row: 2; grid-column: 2; }

/* Travel strip */
.travel-strip {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  flex-wrap: wrap;
  width: fit-content;
}
.travel-strip__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #4ad17e;
  box-shadow: 0 0 0 4px oklch(from #4ad17e l c h / 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.travel-strip span { color: var(--color-text-muted); }
.travel-strip strong { color: var(--color-text); font-weight: 500; }

/* =========================================================== */
/* Trust bar                                                    */
/* =========================================================== */

.trust-bar {
  border-block: 1px solid var(--color-divider);
  padding-block: var(--space-8);
  background: var(--color-surface-offset);
}
.trust-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-8); flex-wrap: wrap;
}
.trust-bar__label {
  font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 500;
}
.trust-bar__logos {
  display: flex; gap: clamp(var(--space-6), 4vw, var(--space-12));
  align-items: center; flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}
.trust-bar__logos span { opacity: 0.75; letter-spacing: 0.03em; }

/* =========================================================== */
/* Services                                                     */
/* =========================================================== */

.section-head {
  display: grid; gap: var(--space-3);
  margin-bottom: var(--space-12);
}
.section-head h2 {
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: -0.025em;
  max-width: 22ch;
}
.section-head h2 em { font-style: italic; color: var(--color-primary); }
.section-head p { color: var(--color-text-muted); max-width: 60ch; font-size: var(--text-lg); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.service-card {
  display: flex; flex-direction: column;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.service-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-md);
}
.service-card__num {
  font-family: var(--font-display); font-style: italic;
  color: var(--color-text-faint); font-size: var(--text-sm); margin-bottom: var(--space-6);
}
.service-card h3 {
  font-size: var(--text-xl); font-weight: 400; margin-bottom: var(--space-3);
}
.service-card p { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-6); }
.service-card ul { list-style: none; display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.service-card ul li {
  font-size: var(--text-sm); color: var(--color-text-muted);
  padding-left: var(--space-4); position: relative;
}
.service-card ul li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
}
.service-card__link {
  margin-top: auto;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  color: var(--color-primary);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.service-card:hover .service-card__link .arrow { transform: translateX(4px); }

/* =========================================================== */
/* Portfolio                                                    */
/* =========================================================== */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}
.portfolio-item {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 4/5;
}
.portfolio-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.portfolio-item:hover img { transform: scale(1.04); }
.portfolio-item__caption {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  background: oklch(from var(--color-bg) l c h / 0.9);
  backdrop-filter: blur(8px);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text); font-weight: 500;
}
.portfolio-item--lg { grid-column: span 7; aspect-ratio: 4/3; }
.portfolio-item--md { grid-column: span 5; aspect-ratio: 4/5; }
.portfolio-item--sm { grid-column: span 4; aspect-ratio: 1/1; }
.portfolio-item--wide { grid-column: span 8; aspect-ratio: 16/9; }

@media (max-width: 720px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-item--lg, .portfolio-item--md, .portfolio-item--sm, .portfolio-item--wide { grid-column: span 2; aspect-ratio: 4/5; }
}

/* =========================================================== */
/* Process                                                      */
/* =========================================================== */

.process {
  background: var(--color-surface-offset);
  border-block: 1px solid var(--color-divider);
}
.process-grid {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-12);
}
.process-step {
  position: relative; padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.process-step__num {
  position: absolute; top: -1px; left: 0;
  width: 48px; height: 1px; background: var(--color-primary);
}
.process-step__label {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-xs); color: var(--color-primary);
  text-transform: uppercase; letter-spacing: 0.15em;
  margin-bottom: var(--space-3);
}
.process-step h3 { font-size: var(--text-lg); font-weight: 400; margin-bottom: var(--space-2); }
.process-step p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* =========================================================== */
/* Testimonials                                                 */
/* =========================================================== */

.testimonials-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.testimonial {
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.4;
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}
.testimonial blockquote::before { content: '"'; color: var(--color-primary); margin-right: 0.05em; }
.testimonial blockquote::after { content: '"'; }
.testimonial__person {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm);
}
.testimonial__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-base);
  flex-shrink: 0;
}
.testimonial__person strong { display: block; font-weight: 500; }
.testimonial__person span { color: var(--color-text-muted); font-size: var(--text-xs); }

/* =========================================================== */
/* Travel page section                                          */
/* =========================================================== */

.travel-section {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
[data-theme='dark'] .travel-section { background: var(--color-surface-2); }
.travel-section__inner {
  display: grid; gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .travel-section__inner { grid-template-columns: 1fr 1.2fr; }
}
.travel-section h2 {
  font-size: var(--text-2xl); font-weight: 300; letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
}
.travel-section h2 em { font-style: italic; opacity: 0.7; }
.travel-section p { opacity: 0.78; max-width: 50ch; }

.travel-list { display: grid; gap: var(--space-1); }
.travel-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid oklch(from white l c h / 0.16);
  font-size: var(--text-base);
}
.travel-row:last-child { border-bottom: none; }
.travel-row__when { font-family: var(--font-display); font-style: italic; opacity: 0.7; font-size: var(--text-sm); }
.travel-row__where { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; }
.travel-row__status {
  font-size: var(--text-xs); letter-spacing: 0.15em; text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  border: 1px solid oklch(from white l c h / 0.32);
  white-space: nowrap;
}
.travel-row__status--open { background: oklch(from #4ad17e l c h / 0.2); border-color: #4ad17e; }

/* =========================================================== */
/* FAQ                                                          */
/* =========================================================== */

.faq-list { display: grid; gap: var(--space-2); }
.faq-item {
  border-bottom: 1px solid var(--color-divider);
  padding-block: var(--space-4);
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
  list-style: none;
  padding-block: var(--space-3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: var(--text-xl);
  font-family: var(--font-body);
  color: var(--color-primary);
  transition: transform var(--transition-interactive);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body {
  padding-block: var(--space-3);
  color: var(--color-text-muted);
  max-width: 70ch;
}

/* =========================================================== */
/* Enquiry form                                                 */
/* =========================================================== */

.enquiry {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
}
.enquiry__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 960px) {
  .enquiry__inner { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-20); }
}
.enquiry__intro h2 {
  font-size: var(--text-2xl); font-weight: 300; letter-spacing: -0.025em;
  margin-bottom: var(--space-5);
}
.enquiry__intro h2 em { font-style: italic; color: var(--color-primary); }
.enquiry__intro p { color: var(--color-text-muted); margin-bottom: var(--space-6); font-size: var(--text-base); }
.enquiry__promise {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}
.enquiry__promise svg { flex-shrink: 0; color: var(--color-primary); margin-top: 2px; }
.enquiry__promise strong { display: block; color: var(--color-text); margin-bottom: var(--space-1); font-weight: 500; }
.enquiry__promise span { color: var(--color-text-muted); }

.form { display: grid; gap: var(--space-4); }
.form__row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.form__field { display: grid; gap: var(--space-2); }
.form__field label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}
.form__field input,
.form__field select,
.form__field textarea {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--color-text);
  width: 100%;
  min-height: 48px;
}
.form__field textarea { min-height: 120px; resize: vertical; }
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
  outline: none;
  box-shadow: 0 0 0 4px oklch(from var(--color-primary) l c h / 0.12);
}

.form__submit { margin-top: var(--space-3); }
.form__success {
  display: none;
  padding: var(--space-6);
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
}
.form__success.is-active { display: block; }
.form__success strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); color: var(--color-primary); }
.form__success p { color: inherit; opacity: 0.85; }
[data-theme='dark'] .form__success { color: var(--color-text); }
[data-theme='dark'] .form__success strong { color: var(--color-primary); }

/* =========================================================== */
/* Footer                                                       */
/* =========================================================== */

.site-footer {
  padding-block: var(--space-16) var(--space-8);
  background: var(--color-surface-offset);
  border-top: 1px solid var(--color-divider);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
@media (max-width: 720px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
.site-footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 500;
  margin-bottom: var(--space-4);
}
.site-footer__col ul { list-style: none; display: grid; gap: var(--space-2); }
.site-footer__col a {
  color: var(--color-text); text-decoration: none; font-size: var(--text-sm);
}
.site-footer__col a:hover { color: var(--color-primary); }
.site-footer__brand p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-4); max-width: 36ch; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6); border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs); color: var(--color-text-muted);
}

/* =========================================================== */
/* Inner page hero                                              */
/* =========================================================== */

.page-hero {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  border-bottom: 1px solid var(--color-divider);
}
.page-hero h1 {
  font-size: var(--text-2xl);
  font-weight: 300; letter-spacing: -0.03em;
  max-width: 22ch;
  margin-block: var(--space-4) var(--space-6);
}
.page-hero h1 em { font-style: italic; color: var(--color-primary); }
.page-hero p { color: var(--color-text-muted); font-size: var(--text-lg); max-width: 60ch; }
.breadcrumb { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text); }

/* Two-column content for service pages */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 960px) {
  .two-col { grid-template-columns: 1fr 1.4fr; gap: var(--space-20); }
}
.two-col__sticky {
  position: sticky; top: 100px; align-self: start;
}
.two-col__sticky h3 {
  font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-text-muted); font-weight: 500;
  margin-bottom: var(--space-3);
}

.prose h2 {
  font-size: var(--text-xl);
  font-weight: 400;
  margin-block: var(--space-12) var(--space-4);
  letter-spacing: -0.02em;
}
.prose h3 {
  font-size: var(--text-lg);
  font-weight: 500;
  font-family: var(--font-body);
  margin-block: var(--space-8) var(--space-3);
}
.prose p { margin-bottom: var(--space-4); color: var(--color-text); max-width: 68ch; }
.prose ul { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.prose ul li { margin-bottom: var(--space-2); max-width: 64ch; }
.prose a { color: var(--color-primary); }
.prose a.btn,
.prose a.btn--primary { color: var(--color-text-inverse); }
.prose a.btn--ghost { color: var(--color-text); }

/* CTA banner */
.cta-banner {
  margin-top: var(--space-16);
  padding: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.cta-banner h3 { font-size: var(--text-xl); font-weight: 300; margin-bottom: var(--space-3); letter-spacing: -0.02em; }
.cta-banner p { color: var(--color-text-muted); margin-bottom: var(--space-6); margin-inline: auto; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms ease, transform 800ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================== */
/* v2 — new components for rebuilt homepage                     */
/* =========================================================== */

/* --- Logo (header + footer) — horizontal lockup: icon + wordmark --- */
.logo { display: inline-flex; align-items: center; gap: 0.55em; text-decoration: none; color: var(--color-text); line-height: 1; }
.logo__icon { position: relative; width: 1.55em; height: 1.55em; flex: 0 0 auto; display: inline-block; }
.logo__icon-bar { position: absolute; left: 18%; right: 18%; top: 0; height: 0.16em; background: var(--color-primary); border-radius: 0.08em; }
.logo__icon-ring { position: absolute; left: 6%; right: 6%; top: 22%; bottom: 0; border: 0.16em solid var(--color-primary); border-radius: 50%; }
.logo__mark { font-family: var(--font-body); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.logo__o { position: relative; display: inline-block; color: inherit; font-weight: inherit; }
.logo__macron {
  position: absolute;
  left: 14%;
  right: 14%;
  top: -0.22em;
  height: 0.10em;
  background: var(--color-primary);
  border-radius: 0.04em;
  pointer-events: none;
}

/* --- Skip link --- */
.skip-link { position: absolute; left: -9999px; top: 0; padding: var(--space-2) var(--space-4); background: var(--color-primary); color: var(--color-text-inverse); z-index: 100; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* --- Hero — full-width image background with copy on left --- */
/* AAA legibility lock: ALL hero copy renders in solid near-white (#ffffff)
   at full opacity in BOTH themes. We never reduce alpha or flip to a dark
   colour, regardless of theme. The overlay gradients do the contrast work. */
.hero {
  --hero-text: #ffffff;            /* solid near-white — always full opacity */
  --hero-text-soft: #ffffff;        /* same colour, no opacity reduction */
  --hero-text-muted: #ffffff;       /* same colour, no opacity reduction */
  --hero-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 18px rgba(0,0,0,0.45);
  --hero-shadow-strong: 0 1px 2px rgba(0,0,0,0.65), 0 2px 24px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4);
  position: relative;
  isolation: isolate;
  min-height: clamp(580px, 86vh, 880px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--hero-text);
  background: #1a1814;
  margin-top: -1px; /* sit flush under sticky header */
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Locked hero (May 2026): subject centre-frame, palms framing both edges.
     Default to 50% 50% so neither palm is cropped. Per-breakpoint overrides below. */
  object-position: 50% 50%;
  display: block;
}
.hero__bg-overlay {
  position: absolute; inset: 0; z-index: -1;
  /* Three layered gradients:
     1. Left-edge dark plate — puts copy on a darker base.
     2. Top-to-middle dark band — ensures eyebrow/H1 zone is AAA readable,
        fades clear by mid-frame so the lower image stays natural.
     3. Soft bottom vignette — chip pill anchor. */
  background:
    linear-gradient(
      90deg,
      rgba(8,12,18,0.72) 0%,
      rgba(8,12,18,0.55) 28%,
      rgba(8,12,18,0.22) 52%,
      rgba(8,12,18,0.00) 78%
    ),
    linear-gradient(
      180deg,
      rgba(8,12,18,0.55) 0%,
      rgba(8,12,18,0.32) 28%,
      rgba(8,12,18,0.06) 52%,
      rgba(8,12,18,0.00) 70%,
      rgba(8,12,18,0.30) 100%
    );
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr;
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
  align-content: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 0.55fr) 1fr; }
  /* Locked hero (May 2026): subject is centre-frame walking away, palms
     framing left and right. We DO NOT scale or shift this image — both
     palms must remain visible to preserve the editorial composition the
     user approved. The hero text sits over the left palm + sky band; the
     subject occupies centre-frame; CTAs/chip sit on the right sky band. */
  .hero__bg img {
    object-position: 50% 50%;
    transform: none;
    transform-origin: 50% 50%;
  }
}
.hero__copy { max-width: 36ch; color: var(--hero-text); }
.hero .eyebrow {
  color: var(--hero-text);
  white-space: nowrap;
  text-shadow: var(--hero-shadow);
}
@media (max-width: 720px) { .hero .eyebrow { white-space: normal; } }
/* Override base hero headline sizing so it fits the constrained left column over image */
.hero .hero__headline {
  font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-block: var(--space-5) var(--space-5);
  color: var(--hero-text);
  text-shadow: var(--hero-shadow-strong);
}
.hero .hero__headline em {
  color: var(--hero-text);
  font-style: italic;
  font-weight: 400;
}
.hero .hero__sub {
  color: var(--hero-text);
  font-size: var(--text-base);
  max-width: 44ch;
  text-shadow: var(--hero-shadow);
  margin-bottom: var(--space-6);
}
.hero .hero__cta { margin-block: var(--space-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-block: var(--space-8); }
.hero__strip {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: 0; margin: 0;
}
.hero__strip li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(8,12,18,0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--hero-text); font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.hero__strip .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #4ad17e;
  box-shadow: 0 0 0 4px oklch(from #4ad17e l c h / 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
/* Strip variants: show the three full chips ONLY on wide desktop (≥1025px).
   Tablet portrait/landscape and mobile collapse to the single condensed chip
   so the stack stays clear of the subject. */
.hero__strip li.hero__strip-item--mobile { display: none; }
@media (max-width: 1023.98px) {
  .hero__strip li.hero__strip-item--full { display: none; }
  .hero__strip li.hero__strip-item--mobile { display: inline-flex; }
}

/* Hero CTA buttons — ghost variant uses solid white border + dark-tinted
   pane behind the label so it's always legible on the bright image. */
.hero .btn--ghost {
  background: rgba(8,12,18,0.30);
  border-color: rgba(255,255,255,0.75);
  color: var(--hero-text);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.hero .btn--ghost:hover {
  background: rgba(8,12,18,0.45);
  border-color: var(--hero-text);
}

/* ============================================================
   MOBILE HERO — LOCKED BASELINE (do not auto-tune)
   Goal: copy stack lives in the upper third over the sky;
   the woman sits in the lower half with no text on her body.
   Approach: NO transforms or zoom hacks. Just a tall hero,
   image anchored bottom-right via object-position so the
   subject stays low in the visible frame, copy anchored to
   top, and a strong top-down gradient for legibility.
   ============================================================ */
@media (max-width: 720px) {
  .hero {
    /* Tall hero so the woman sits in the lower half and the full upper
       half stays clear sky for the split text-left / controls-right
       composition. */
    /* Locked hero (May 2026) is 1080x603 (1.79:1). On mobile we want
       the full image to read — woman centre, palms framing edges —
       but cover-fit will zoom in if the hero is too tall. Use 100vh
       with a sensible cap so the image breathes without empty sky. */
    min-height: clamp(720px, 100vh, 920px);
    align-items: flex-start;
  }
  /* Reset any inherited transforms — we do NOT zoom the image. */
  .hero__bg {
    transform: none;
  }
  /* Mobile crop: place the woman in the lower-LEFT of the visible
     viewport so the right side stays clear for CTAs. The new HD
     source has her around 32% of source width — with mobile portrait
     cover crop showing ~24% of source width, object-position 33%
     centres the visible window at ~37% of source, putting her hat
     and body around 30–40% of the viewport, fully visible. */
  .hero__bg img {
    /* Locked hero (May 2026): centre-framed subject with palms left+right.
       50% 100% anchors bottom-centre so subject + sand sit low and the
       upper sky band stays clear for headline + upper-right controls. */
    object-position: 50% 100%;
    image-rendering: -webkit-optimize-contrast;
  }
  /* Strong top-down dark plate behind the copy band so white type pops
     against the cream sky in any lighting. Fades fully clear by ~50%
     so the lower half image stays untouched. Bottom 0–10% gets a soft
     vignette to sit the page seam against the next section. */
  .hero__bg-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(8,12,18,0.72) 0%,
        rgba(8,12,18,0.58) 12%,
        rgba(8,12,18,0.38) 24%,
        rgba(8,12,18,0.18) 36%,
        rgba(8,12,18,0.06) 44%,
        rgba(8,12,18,0.00) 52%,
        rgba(8,12,18,0.00) 92%,
        rgba(8,12,18,0.18) 100%
      );
  }
  /* Copy stack anchored to top of hero, tight padding so eyebrow sits
     just under the header. */
  .hero__inner {
    align-content: start;
    padding-top: clamp(var(--space-5), 3vw, var(--space-7));
    padding-bottom: var(--space-6);
  }
  /* Mobile SPLIT composition: text column LEFT (eyebrow, headline,
     subhead) — controls column RIGHT (Start a project, View work,
     chip). All controls live in the upper-right sky/sunset area and
     never cross over the woman, her hat, or her hair. */
  .hero__copy {
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    column-gap: var(--space-3);
    align-items: start;
  }
  /* Text column 1, rows 1-3 */
  .hero .eyebrow {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: var(--space-1);
    font-size: 0.6875rem;  /* compact to fit narrow column */
  }
  .hero .hero__headline {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(1.4rem, 0.7rem + 2.6vw, 1.85rem);
    line-height: 1.08;
    margin-block: var(--space-2) var(--space-2);
    max-width: 14ch;
  }
  .hero .hero__sub {
    grid-column: 1;
    grid-row: 3;
    max-width: 24ch;
    font-size: var(--text-sm);
    line-height: 1.4;
    margin-bottom: var(--space-3);
  }
  /* Controls column 2, vertical stack, anchored top so all three sit
     in the upper-right open sky area regardless of headline length. */
  .hero .hero__cta {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: end;
    margin: 0;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    width: 130px;
  }
  .hero .hero__cta .btn {
    padding-block: 0.55rem;
    padding-inline: 0.5rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    text-align: center;
    justify-content: center;
  }
  /* Chip under the CTA stack in column 2, also right-aligned */
  .hero__strip {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    justify-self: end;
    margin-top: 0;
    justify-content: flex-end;
    width: 130px;
  }
  .hero__strip li {
    padding-block: 0.4rem;
    padding-inline: 0.6rem;
    font-size: 0.6875rem;
    justify-content: center;
    width: 100%;
  }
}

/* Narrow phones (≤380px): tighten so the subhead never reaches the
   subject's hat. Shrink controls slightly, raise woman lower in the
   frame, trim copy widths so wrap height stays controlled. */
@media (max-width: 380px) {
  .hero {
    /* Narrow mobile (≤380px). Keep proportional to viewport so the
       image isn't cropped excessively. */
    min-height: clamp(760px, 110vh, 980px);
  }
  .hero__bg img {
    /* Locked hero (May 2026): centre-framed subject. Anchor bottom-centre
       so the subject + sand sit in the lower half and the sky band on top
       stays clear for the headline + upper-right controls. */
    object-position: 50% 100%;
  }
  .hero .hero__cta,
  .hero__strip {
    width: 116px;
  }
  .hero .hero__cta .btn {
    padding-block: 0.5rem;
    font-size: 0.78rem;
  }
  .hero .hero__headline {
    font-size: 1.45rem;
    max-width: 13ch;
  }
  .hero .hero__sub {
    font-size: 0.8rem;
    line-height: 1.32;
    max-width: 24ch;
    margin-bottom: var(--space-2);
  }
}

/* ============================================================
   TABLET PORTRAIT HERO — split composition for 721–1024px.
   Two-column grid inside .hero__copy: text block (eyebrow + H1 +
   subhead) on the LEFT; CTA pair + single chip on the RIGHT,
   floating over the open water/sunset negative space. Image
   shifted LEFT so the woman occupies the lower-left and the
   right side stays open horizon. Everything sits in the upper
   ~half so the woman's body remains untouched by overlay UI.
   ============================================================ */
@media (min-width: 721px) and (max-width: 1024px) {
  .hero {
    /* Shorter hero — wider visible crop of the source so the woman
       takes less viewport width, keeping clear sky on both sides for
       the split text-left / CTA-right composition. */
    min-height: 760px;
    max-height: 95vh;
    align-items: flex-start;
  }
  .hero__bg {
    transform: none;
  }
  /* Locked hero (May 2026): centre-framed subject with palms left+right.
     Anchor bottom-centre so the subject + sand sit low in the frame,
     and both palms stay visible to preserve the editorial composition. */
  .hero__bg img {
    /* Tablet portrait: subject centre, both palms visible at edges.
       50% 100% keeps the composition clean — woman walks into frame
       lower-centre and the open sunset/sky band runs across the top. */
    object-position: 50% 100%;
    image-rendering: -webkit-optimize-contrast;
  }
  /* Top-down dark plate up top for legibility on both columns,
     plus a soft right-edge plate so the CTA column gets its own
     subtle legibility pane against bright water. */
  .hero__bg-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(8,12,18,0.58) 0%,
        rgba(8,12,18,0.42) 14%,
        rgba(8,12,18,0.26) 28%,
        rgba(8,12,18,0.10) 40%,
        rgba(8,12,18,0.00) 52%,
        rgba(8,12,18,0.00) 92%,
        rgba(8,12,18,0.16) 100%
      ),
      linear-gradient(
        270deg,
        rgba(8,12,18,0.22) 0%,
        rgba(8,12,18,0.10) 24%,
        rgba(8,12,18,0.00) 48%
      );
  }
  .hero__inner {
    align-content: start;
    padding-top: clamp(var(--space-5), 3vw, var(--space-7));
    padding-bottom: var(--space-7);
  }
  /* SPLIT GRID: text column on the LEFT, CTA column on the RIGHT.
     Explicit row tracks let us bottom-anchor the CTA group to the
     subhead horizon (row 3 / subhead) rather than letting it float
     near the top of the column. */
  .hero__copy {
    max-width: none;
    display: grid;
    /* Tight side rails so the subject's hat (at ~28-40% of viewport)
       has clear space on both sides. Text col 220px max so subhead
       wraps before reaching the hat. CTA col 200px hugs the right. */
    grid-template-columns: 220px 1fr 200px;
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(var(--space-4), 3vw, var(--space-6));
    align-items: start;
  }
  /* Place text elements in column 1, one per row. */
  .hero .eyebrow {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: var(--space-2);
  }
  .hero .hero__headline {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(1.5rem, 0.9rem + 1.2vw, 2rem);
    line-height: 1.08;
    margin-block: var(--space-2) var(--space-3);
    max-width: 100%;
  }
  .hero .hero__sub {
    grid-column: 1;
    grid-row: 3;
    max-width: 100%;
    font-size: 0.92rem;
    line-height: 1.4;
    margin-bottom: var(--space-4);
  }
  /* CTA column anchored to TOP-RIGHT of the right column — the entire
     control cluster (CTAs + chip) hugs the right edge of the viewport
     in the upper-right open sky band, well clear of the subject. */
  .hero .hero__cta {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: end;
    margin: 0;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    width: 200px;
  }
  .hero .hero__cta .btn {
    padding-inline: clamp(1rem, 2vw, 1.4rem);
    font-size: var(--text-sm);
    white-space: nowrap;
    text-align: center;
    justify-content: center;
  }
  /* Single chip sits directly under the CTA stack at the top of the
     right column — keeps everything packed in the upper sky band. */
  .hero__strip {
    grid-column: 3;
    grid-row: 3;
    align-self: start;
    justify-self: end;
    margin-top: var(--space-3);
    justify-content: flex-end;
    width: 200px;
  }
  .hero__strip li {
    width: 100%;
    justify-content: center;
  }
}

/* Tablet portrait full range (721–1023.98px): hide the subhead in
   the hero. The new HD source has the woman near the centre of the
   visible frame at all tablet widths, so any subhead text wrap would
   reach her hat. Headline + CTAs convey the essential pitch; subhead
   returns at desktop 1024+ where the composition has more room. */
@media (min-width: 721px) and (max-width: 1023.98px) {
  .hero .hero__sub {
    display: none;
  }
  .hero .hero__headline {
    margin-bottom: var(--space-6);
    max-width: 14ch;
  }
}

/* Dark-mode toggle: deepen the left-edge + top dark plates a touch more
   so the white type sits on an even higher-contrast pane. Image mood
   (warm sunset hues, palm framing) is still visible through the gradient. */
[data-theme='dark'] .hero__bg-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(4,6,10,0.82) 0%,
      rgba(4,6,10,0.62) 28%,
      rgba(4,6,10,0.28) 52%,
      rgba(4,6,10,0.00) 78%
    ),
    linear-gradient(
      180deg,
      rgba(4,6,10,0.62) 0%,
      rgba(4,6,10,0.38) 28%,
      rgba(4,6,10,0.10) 52%,
      rgba(4,6,10,0.00) 70%,
      rgba(4,6,10,0.40) 100%
    );
}
[data-theme='dark'] .hero {
  /* Beef up text-shadow another notch in dark mode for AAA contrast. */
  --hero-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 2px 22px rgba(0,0,0,0.55);
  --hero-shadow-strong: 0 1px 2px rgba(0,0,0,0.8), 0 2px 28px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5);
}

/* Same dark-mode strengthening when the user prefers dark via OS (no
   manual toggle). Mirrors the explicit [data-theme='dark'] block. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero__bg-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(4,6,10,0.82) 0%,
        rgba(4,6,10,0.62) 28%,
        rgba(4,6,10,0.28) 52%,
        rgba(4,6,10,0.00) 78%
      ),
      linear-gradient(
        180deg,
        rgba(4,6,10,0.62) 0%,
        rgba(4,6,10,0.38) 28%,
        rgba(4,6,10,0.10) 52%,
        rgba(4,6,10,0.00) 70%,
        rgba(4,6,10,0.40) 100%
      );
  }
  :root:not([data-theme='light']) .hero {
    --hero-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 2px 22px rgba(0,0,0,0.55);
    --hero-shadow-strong: 0 1px 2px rgba(0,0,0,0.8), 0 2px 28px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5);
  }
}

/* --- Ticker --- */
.ticker { overflow: hidden; padding-block: var(--space-6); border-block: 1px solid var(--color-divider); background: var(--color-surface-offset); }
.ticker__track { display: inline-flex; gap: var(--space-6); white-space: nowrap; animation: ticker 60s linear infinite; font-family: var(--font-display); font-style: italic; color: var(--color-text-muted); font-size: var(--text-base); }
.ticker__track span { flex-shrink: 0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* --- Section spacing baseline --- */
.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }
.section-head__sub { color: var(--color-text-muted); max-width: 60ch; font-size: var(--text-lg); margin-top: var(--space-3); }
.eyebrow--inverse { color: oklch(from var(--color-text-inverse) l c h / 0.7); }
.section-head__sub--inverse { color: oklch(from var(--color-text-inverse) l c h / 0.75); }

/* --- Niche grid (Who we work with) --- */
.section--who { background: var(--color-bg); }
.niche-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-1); border-top: 1px solid var(--color-divider); border-left: 1px solid var(--color-divider); }
.niche {
  padding: var(--space-8);
  background: var(--color-bg);
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  margin: -1px 0 0 -1px;
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s ease, transform 0.25s ease;
}
a.niche:hover, a.niche:focus-visible { background: var(--color-surface-offset); }
a.niche:hover .niche__arrow, a.niche:focus-visible .niche__arrow { transform: translate(4px, -4px); opacity: 1; }
.niche__num { font-family: var(--font-display); font-style: italic; color: var(--color-primary); font-size: var(--text-sm); display: block; margin-bottom: var(--space-6); letter-spacing: 0.04em; }
.niche h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; letter-spacing: -0.01em; margin-bottom: var(--space-3); }
.niche p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; }
.niche__arrow {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  font-size: var(--text-base);
  color: var(--color-primary);
  opacity: 0.4;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* --- Services list (rows) --- */
.section--services { background: var(--color-surface-offset); border-block: 1px solid var(--color-divider); }
.service-list { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.service-row {
  display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: var(--space-6);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none; color: inherit;
  transition: background var(--transition-interactive), padding var(--transition-interactive);
}
.service-row:hover { background: var(--color-surface); padding-inline: var(--space-6); }
.service-row__num { font-family: var(--font-display); font-style: italic; color: var(--color-primary); font-size: var(--text-base); }
.service-row__body h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); font-weight: 300; letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.service-row__body p { color: var(--color-text-muted); font-size: var(--text-base); max-width: 60ch; }
.service-row__arrow { color: var(--color-primary); font-size: var(--text-xl); transition: transform var(--transition-interactive); }
.service-row:hover .service-row__arrow { transform: translateX(6px); }
@media (max-width: 720px) {
  .service-row { grid-template-columns: 40px 1fr; padding: var(--space-6) 0; }
  .service-row__arrow { display: none; }
}

/* --- Portfolio v2 --- */
.section--work { padding-top: clamp(var(--space-16), 9vw, var(--space-32)); }
.portfolio-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-3); }
.port-item { position: relative; overflow: hidden; border-radius: var(--radius-lg); display: block; text-decoration: none; color: inherit; aspect-ratio: 4/5; }
.port-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms cubic-bezier(0.2, 0.6, 0.2, 1); }
.port-item:hover img { transform: scale(1.05); }
.port-item__cap {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  background: oklch(from var(--color-bg) l c h / 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}
.port-item__tag { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-1); font-weight: 500; }
.port-item__cap h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 400; letter-spacing: -0.01em; }
.port-item--lg { grid-column: span 7; aspect-ratio: 4/3; }
.port-item--md { grid-column: span 5; aspect-ratio: 4/5; }
.port-item--md:nth-of-type(3n+4) { grid-column: span 4; }
.port-item--md:nth-of-type(3n+5) { grid-column: span 4; }
.port-item--md:nth-of-type(3n+6) { grid-column: span 4; }
@media (max-width: 720px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .port-item,
  .port-item--lg,
  .port-item--md,
  .port-item--md:nth-of-type(3n+4),
  .port-item--md:nth-of-type(3n+5),
  .port-item--md:nth-of-type(3n+6) { grid-column: span 2; aspect-ratio: 4/5; }
}
.work-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--color-divider); }
.work-cta p { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text-muted); }

/* --- Results / stats (dark band) --- */
.section--results {
  background: var(--color-primary);
  color: #faf6ef;
  /* lock inverse to a fixed light value so dark mode doesn't flip it to near-black */
  --color-text-inverse: #faf6ef;
}
[data-theme='dark'] .section--results { background: var(--color-surface-2); }
.section--results .section-head h2 { color: var(--color-text-inverse); }
.section--results .section-head h2 em { color: oklch(from var(--color-primary-highlight) l c h); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-8); margin-bottom: var(--space-16); padding-block: var(--space-8); border-block: 1px solid oklch(from var(--color-text-inverse) l c h / 0.18); }
.stat__num { font-family: var(--font-display); font-size: clamp(3rem, 1rem + 5vw, 5.5rem); font-weight: 300; letter-spacing: -0.04em; color: var(--color-text-inverse); line-height: 1; margin-bottom: var(--space-3); }
.stat__label { font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: oklch(from var(--color-text-inverse) l c h / 0.85); margin-bottom: var(--space-3); font-weight: 500; }
.stat__sub { color: oklch(from var(--color-text-inverse) l c h / 0.7); font-size: var(--text-sm); max-width: 36ch; line-height: 1.55; }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.quote { padding: var(--space-8); background: oklch(from var(--color-text-inverse) l c h / 0.04); border: 1px solid oklch(from var(--color-text-inverse) l c h / 0.15); border-radius: var(--radius-lg); margin: 0; }
.quote p { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 300; line-height: 1.4; letter-spacing: -0.005em; margin-bottom: var(--space-6); color: oklch(from var(--color-text-inverse) l c h / 0.95); }
.quote footer { font-size: var(--text-sm); color: oklch(from var(--color-text-inverse) l c h / 0.7); }
.quote cite { font-style: normal; color: var(--color-text-inverse); font-weight: 500; }

/* --- Travel availability card --- */
.section--travel { padding-block: clamp(var(--space-16), 9vw, var(--space-24)); background: var(--color-bg); }
.travel-card {
  background: var(--color-primary); color: #faf6ef;
  border-radius: var(--radius-xl); padding: clamp(var(--space-8), 5vw, var(--space-16));
  --color-text-inverse: #faf6ef;
}
[data-theme='dark'] .travel-card { background: var(--color-surface-2); border: 1px solid var(--color-border); }
.travel-card__head { max-width: 60ch; margin-bottom: var(--space-12); }
.travel-card__head h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; letter-spacing: -0.025em; color: var(--color-text-inverse); margin-block: var(--space-3); }
.travel-card__head h2 em { color: oklch(from var(--color-primary-highlight) l c h); font-style: italic; }
.travel-card__head p { color: oklch(from var(--color-text-inverse) l c h / 0.78); font-size: var(--text-base); max-width: 62ch; }
.travel-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid oklch(from var(--color-text-inverse) l c h / 0.2); }
.travel-list li {
  display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: var(--space-6);
  padding-block: var(--space-5);
  border-bottom: 1px solid oklch(from var(--color-text-inverse) l c h / 0.15);
}
.travel-list__when { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-text-inverse); letter-spacing: -0.01em; }
.travel-list__where { color: oklch(from var(--color-text-inverse) l c h / 0.78); font-size: var(--text-sm); }
.travel-list__status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: oklch(from var(--color-text-inverse) l c h / 0.08);
  border-radius: var(--radius-full); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: oklch(from var(--color-text-inverse) l c h / 0.8);
}
.status--open { background: oklch(0.6 0.13 145 / 0.25); color: #b8e9c4; }
.status--limited { background: oklch(0.7 0.16 50 / 0.25); color: #f5c79e; }
@media (max-width: 720px) {
  .travel-list li { grid-template-columns: 1fr; gap: var(--space-2); padding-block: var(--space-4); }
  .travel-list__status { justify-self: start; }
}
.travel-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-8); }
.travel-card__note { font-size: var(--text-xs); color: oklch(from var(--color-text-inverse) l c h / 0.6); letter-spacing: 0.05em; }
.btn--ghost-light { background: transparent; color: var(--color-text-inverse); border: 1px solid oklch(from var(--color-text-inverse) l c h / 0.4); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 500; }
.btn--ghost-light:hover { background: oklch(from var(--color-text-inverse) l c h / 0.08); border-color: var(--color-text-inverse); }

/* --- Process v2 --- */
.section--process { background: var(--color-surface-offset); border-block: 1px solid var(--color-divider); }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-8); margin-top: var(--space-12); }
.process-step { padding-top: var(--space-6); border-top: 1px solid var(--color-border); position: relative; }
.process-step::before { content: ''; position: absolute; top: -1px; left: 0; width: 48px; height: 1px; background: var(--color-primary); }
.process-step__num { font-family: var(--font-display); font-style: italic; color: var(--color-primary); font-size: var(--text-sm); margin-bottom: var(--space-4); display: block; letter-spacing: 0.04em; }
.process-step h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; margin-bottom: var(--space-3); letter-spacing: -0.01em; }
.process-step p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }

/* --- Packages --- */
.section--packages { background: var(--color-bg); }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.pkg {
  display: flex; flex-direction: column;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
}
.pkg--featured { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.pkg__badge {
  position: absolute; top: -12px; left: var(--space-6);
  background: var(--color-primary); color: var(--color-text-inverse);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
}
.pkg__num { font-family: var(--font-display); font-style: italic; color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-3); }
.pkg__head h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; letter-spacing: -0.015em; margin-bottom: var(--space-3); }
.pkg__price { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.pkg__price strong { color: var(--color-text); font-weight: 500; }
.pkg__meta { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-divider); }
.pkg__best { font-size: var(--text-sm); color: var(--color-text); font-style: italic; margin-bottom: var(--space-5); line-height: 1.55; }
.pkg__list { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid; gap: var(--space-3); }
.pkg__list li { font-size: var(--text-sm); color: var(--color-text-muted); padding-left: var(--space-5); position: relative; line-height: 1.5; }
.pkg__list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--color-primary); font-weight: 600; }
.btn--block { width: 100%; margin-top: auto; }
.pkg-note { text-align: center; margin-top: var(--space-12); color: var(--color-text-muted); font-size: var(--text-sm); }

/* --- Director / founder --- */
.section--director { background: var(--color-surface-offset); border-block: 1px solid var(--color-divider); }
.director { display: grid; gap: var(--space-12); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 880px) { .director { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-16); } }
.director__img { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-md); }
.director__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.director__copy h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; letter-spacing: -0.025em; margin-block: var(--space-3) var(--space-6); }
.director__copy p { color: var(--color-text-muted); font-size: var(--text-base); max-width: 60ch; margin-bottom: var(--space-4); line-height: 1.6; }
.director__credentials { list-style: none; padding: 0; margin: var(--space-8) 0; display: grid; gap: var(--space-3); }
.director__credentials li { font-size: var(--text-sm); color: var(--color-text-muted); padding-left: var(--space-5); position: relative; line-height: 1.55; }
.director__credentials li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 1px; background: var(--color-primary); }
.director__credentials strong { color: var(--color-text); font-weight: 500; }

/* --- FAQ v2 --- */
.section--faq { background: var(--color-bg); }
.faq { max-width: 880px; margin-inline: auto; }
.faq-list { border-top: 1px solid var(--color-divider); }
.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: var(--text-xl); color: var(--color-primary); transition: transform var(--transition-interactive); flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding-bottom: var(--space-6); color: var(--color-text-muted); font-size: var(--text-base); max-width: 70ch; line-height: 1.6; }

/* --- Enquiry / form v2 --- */
.section--enquiry { background: var(--color-surface-offset); border-top: 1px solid var(--color-divider); }
.enquiry { display: grid; gap: var(--space-12); grid-template-columns: 1fr; }
@media (min-width: 960px) { .enquiry { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-16); align-items: start; } }
.enquiry__copy h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; letter-spacing: -0.025em; margin-block: var(--space-3) var(--space-6); }
.enquiry__copy h2 em { font-style: italic; color: var(--color-primary); }
.enquiry__copy p { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-4); line-height: 1.6; }
.enquiry__alt { font-style: italic; color: var(--color-text-muted); }
.enquiry__promises { list-style: none; padding: 0; margin: var(--space-8) 0; display: grid; gap: var(--space-3); }
.enquiry__promises li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text); }
.enquiry__promises span { color: var(--color-primary); font-weight: 600; }
.enquiry__contact { font-size: var(--text-sm); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.enquiry__contact a { color: var(--color-primary); }

.enquiry__form { background: var(--color-surface); padding: clamp(var(--space-6), 4vw, var(--space-10)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); position: relative; }
.form__row { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.form__row--2 { grid-template-columns: 1fr; }
.form__row--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.form__field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.form__label { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 500; }
.form__field input, .form__field select, .form__field textarea {
  width: 100%; padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text);
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
  min-height: 48px;
}
.form__field textarea { min-height: 120px; resize: vertical; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { outline: none; border-color: var(--color-primary); background: var(--color-bg); }
.form__submit { margin-top: var(--space-6); }
.form__small { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.form__success { display: none; padding: var(--space-8); background: var(--color-primary); color: #faf6ef; border-radius: var(--radius-md); text-align: center; --color-text-inverse: #faf6ef; }
.form__success.is-active { display: block; }
.form__success h3 { font-family: var(--font-display); font-weight: 400; margin-bottom: var(--space-3); font-size: var(--text-xl); }

.form__error { display: none; margin-top: var(--space-4); padding: var(--space-6); background: #fdecec; color: #6b1f1f; border: 1px solid #e6b8b8; border-left: 3px solid #b03a3a; border-radius: var(--radius-md); }
.form__error.is-active { display: block; }
.form__error h3 { font-family: var(--font-display); font-weight: 400; margin-bottom: var(--space-2); font-size: var(--text-lg); color: #6b1f1f; }
.form__error-msg { font-weight: 500; margin-bottom: var(--space-2); }
.form__error-alt { font-size: var(--text-sm); opacity: 0.85; }
.form__error a { color: #6b1f1f; text-decoration: underline; }
[data-theme='dark'] .form__error { background: #2a1414; color: #f0c8c8; border-color: #5a2222; }
[data-theme='dark'] .form__error h3 { color: #f0c8c8; }
[data-theme='dark'] .form__error a { color: #f0c8c8; }

/* --- Footer --- */
.site-footer { background: var(--color-primary); color: #faf6ef; padding-block: var(--space-16) var(--space-8); --color-text-inverse: #faf6ef; }
[data-theme='dark'] .site-footer { background: var(--color-surface-2); }
.site-footer__inner { display: grid; gap: var(--space-12); }
.site-footer__brand p { color: oklch(from var(--color-text-inverse) l c h / 0.7); margin-top: var(--space-4); max-width: 50ch; font-size: var(--text-sm); line-height: 1.6; }
.site-footer .logo { color: var(--color-text-inverse); }
.site-footer .logo__macron,
.site-footer .logo__icon-bar { background: oklch(0.78 0.09 200); }
.site-footer .logo__icon-ring { border-color: oklch(0.78 0.09 200); }
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-8); padding-block: var(--space-8); border-block: 1px solid oklch(from var(--color-text-inverse) l c h / 0.15); }
.site-footer__cols h4 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 400; margin-bottom: var(--space-4); color: var(--color-text-inverse); }
.site-footer__cols a { display: block; color: oklch(from var(--color-text-inverse) l c h / 0.7); text-decoration: none; font-size: var(--text-sm); padding-block: var(--space-2); transition: color var(--transition-interactive); }
.site-footer__cols a:hover { color: var(--color-text-inverse); }

/* --- Social link — line icon + handle, baseline-aligned ---
   `flex` (not inline-flex) keeps each link on its own row in the footer
   stack, while still aligning the icon+text horizontally within the row. */
.site-footer__cols a.social-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;             /* consistent gap between icon and handle */
  padding-block: var(--space-2);
}
.site-footer__cols a.social-link .social-link__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  /* Optical correction so 16px line icons sit on the visual baseline of the
     16-ish px text caps. Slightly negative shift centres them with x-height. */
  transform: translateY(-0.5px);
  color: currentColor;       /* matches handle text colour */
  opacity: 0.85;             /* a touch softer than text so the handle leads */
  transition: opacity var(--transition-interactive), color var(--transition-interactive);
}
.site-footer__cols a.social-link:hover .social-link__icon { opacity: 1; }
.site-footer__base { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: oklch(from var(--color-text-inverse) l c h / 0.55); padding-top: var(--space-4); }

/* --- Reveal motion fix (safe defaults) --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =================== VIDEO ============================== */
/* Hero video — fills the large hero figure same as <img> */
.hero__img--video { position: relative; overflow: hidden; }
.hero__video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #1a1a1a;
}

/* "In motion" reel strip section */
.section--motion {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}
.section-head__desc { color: var(--color-text-muted); max-width: 56ch; margin-top: var(--space-2); }
.section-head__desc a { color: var(--color-primary); text-decoration: none; border-bottom: 1px solid currentColor; }
.section-head__desc a:hover { opacity: 0.8; }

.reel-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.reel-strip--two {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.reel {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: var(--shadow-md);
  aspect-ratio: 9 / 16;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.reel:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.reel video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.reel figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%);
  color: #f4efe7;
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: -0.01em;
}
.reel__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.3em;
}

@media (max-width: 880px) {
  .reel-strip { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .reel-strip--two { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .reel figcaption { padding: var(--space-5) var(--space-3) var(--space-3); font-size: 0.95rem; }
  .reel__tag { font-size: 0.65rem; }
}
@media (max-width: 560px) {
  .reel-strip,
  .reel-strip--two {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .reel { aspect-ratio: 9 / 14; }
}

/* Respect reduced-motion: pause autoplay if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reel video { animation-play-state: paused; }
}

/* ============================================================
   PRICING STRIP — compact teaser sitting above Selected Work.
   Editorial, not SaaS: thin top hairline rule per card,
   number eyebrow, display price, one-line tagline.
   Three columns desktop, stacked mobile.
   ============================================================ */
.section--price-strip {
  padding-block: clamp(var(--space-8), 6vw, var(--space-12));
}
.price-strip__head {
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-8));
  max-width: 56ch;
}
.price-strip__head h2 {
  font-size: clamp(1.5rem, 0.9rem + 1.6vw, 2rem);
  line-height: 1.15;
  margin: var(--space-2) 0 0;
}
.price-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 3vw, var(--space-6));
}
.price-strip__item {
  display: block;
  padding: clamp(var(--space-5), 2.6vw, var(--space-7)) 0 var(--space-3);
  border-top: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease;
}
.price-strip__item:hover { border-top-color: var(--color-primary); }
.price-strip__item--feature { border-top-color: var(--color-primary); }
.price-strip__num {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.price-strip__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 0.9rem + 1.2vw, 1.85rem);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.price-strip__price {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.price-strip__price strong {
  color: var(--color-text);
  font-weight: 600;
  white-space: nowrap;
}
.price-strip__line {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 30ch;
  margin: 0;
}
.price-strip__foot {
  margin-top: clamp(var(--space-5), 3vw, var(--space-7));
  font-size: var(--text-sm);
}
.price-strip__foot a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 180ms ease;
}
.price-strip__foot a:hover { opacity: 0.7; }

@media (max-width: 720px) {
  .price-strip { grid-template-columns: 1fr; gap: 0; }
  .price-strip__item { padding-block: var(--space-5) var(--space-4); }
}