/* =====================================================================
   Tetiana Chaykovskaya — Culinary R&D Portfolio
   Clean, single-source design system. No stacked overrides.
   Sections:  1 Tokens · 2 Reset/base · 3 Typography · 4 Layout
              5 Header/nav · 6 Buttons/chips · 7 Hero · 8 Showcase
              9 Gallery · 10 Consulting · 11 Lab · 12 Contact/footer
              13 Lightbox · 14 Loader/fx · 15 Reveal · 16 Responsive
   ===================================================================== */

/* 1 ── DESIGN TOKENS ────────────────────────────────────────────── */
:root {
  /* palette */
  --ivory: #fbf7ef;
  --paper: #f3eadf;
  --paper-deep: #ece0d1;
  --champagne: #c39a52;
  --champagne-soft: #d8b77b;
  --rose: #e9bfc4;
  --sage: #c8d4bf;
  --ink: #23211f;
  --ink-soft: #4a443d;
  --muted: #837a6e;
  --line: rgba(61, 42, 21, .14);
  --line-soft: rgba(61, 42, 21, .08);
  --white: #fff;

  /* type */
  --display: "Playfair Display", Georgia, serif;
  --body: "Hanken Grotesk", "Inter", system-ui, sans-serif;

  /* fluid type scale */
  --fs-eyebrow: clamp(.66rem, .6rem + .25vw, .76rem);
  --fs-body: clamp(1rem, .96rem + .25vw, 1.12rem);
  --fs-lede: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  --fs-h3: clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  --fs-h2: clamp(2.1rem, 1.55rem + 2.6vw, 3.5rem);
  --fs-h1: clamp(2.9rem, 1.9rem + 4.6vw, 5.6rem);

  /* spacing & shape */
  --header-h: 74px;
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 7vh, 7rem);
  --radius: 22px;
  --radius-lg: 30px;
  --shadow: 0 30px 70px -28px rgba(77, 55, 31, .35);
  --shadow-soft: 0 18px 44px -26px rgba(77, 55, 31, .4);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fade: 1100ms;
}

/* 2 ── RESET / BASE ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

em {
  font-style: italic;
}

::selection {
  background: var(--champagne-soft);
  color: var(--ink);
}

/* atmospheric paper backdrop */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(216, 183, 123, .18), transparent 55%),
    radial-gradient(90% 80% at -10% 110%, rgba(200, 212, 191, .22), transparent 55%),
    var(--ivory);
}

/* 3 ── TYPOGRAPHY ───────────────────────────────────────────────── */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--ink);
}

.display em {
  color: var(--champagne);
  font-weight: 500;
}

h1.display,
.hero__title {
  font-size: var(--fs-h1);
}

h2.display {
  font-size: var(--fs-h2);
}

h3 {
  font-family: var(--display);
  font-weight: 500;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.1rem;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  font-weight: 300;
}

.rule {
  display: block;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--champagne), transparent);
  margin: 1.4rem 0;
}

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

.section {
  position: relative;
  padding-block: var(--section-pad);
  scroll-margin-top: var(--header-h);
}

/* full-viewport editorial sections */
.hero,
.showcase-section {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.showcase-section--alt {
  background: linear-gradient(180deg, transparent, rgba(236, 224, 209, .5), transparent);
}

.section-head {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 4vh, 3.4rem);
}

.section-head--left {
  margin-inline: 0;
  text-align: left;
}

.section-head h2 {
  margin: .1em 0 .5rem;
}

.section-head--left .lede {
  max-width: 52ch;
}

.section-head .lede {
  margin-inline: auto;
}

.section-head--left .lede {
  margin-inline: 0;
}

/* reusable framed image (hero + contact) */
.framed {
  position: relative;
  isolation: isolate;
}

.framed__echo {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--champagne);
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: .55;
}

.framed__img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  background: var(--paper-deep);
}

/* 5 ── HEADER / NAV ─────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}

.header.is-stuck {
  background: rgba(251, 247, 239, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
}

.brand {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: .02em;
}

.brand span {
  color: var(--champagne);
}

.nav {
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.9rem);
  align-items: center;
}

/* wrapper is transparent on desktop so the top bar row is unchanged;
   on mobile it becomes a left-aligned, centered column (see mobile block) */
.nav__links {
  display: contents;
}

.nav a {
  position: relative;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-soft);
  padding: .3rem 0;
  transition: color .3s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

.nav a:hover,
.nav a.is-active {
  color: var(--ink);
}

.nav a:hover::after,
.nav a.is-active::after {
  transform: scaleX(1);
}

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 70;
}

.menu-btn span {
  width: 24px;
  height: 1.6px;
  background: var(--ink);
  transition: transform .35s var(--ease), opacity .3s var(--ease);
}

.menu-btn[aria-expanded="true"] span:first-child {
  transform: translateY(3.8px) rotate(45deg);
}

.menu-btn[aria-expanded="true"] span:last-child {
  transform: translateY(-3.8px) rotate(-45deg);
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(35, 33, 31, .45);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
}

.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

/* 6 ── BUTTONS / CHIPS ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .05em;
  padding: .85rem 1.6rem;
  border-radius: 100px;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.btn--sm {
  padding: .6rem 1.15rem;
  font-size: .78rem;
}

.btn--solid {
  background: var(--ink);
  color: var(--ivory);
}

.btn--solid:hover {
  background: var(--champagne);
  color: var(--ink);
  transform: translateY(-2px);
}

.btn--line {
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn--line:hover {
  border-color: var(--champagne);
  color: var(--champagne);
  transform: translateY(-2px);
}

.chip {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: .5rem 1.15rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: all .3s var(--ease);
}

.chip:hover {
  border-color: var(--champagne);
  color: var(--ink);
}

.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

/* 7 ── HERO ─────────────────────────────────────────────────────── */
.hero {
  padding-top: calc(var(--header-h) + 1.5rem);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.hero__title {
  margin-bottom: .35rem;
}

.hero__role {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 1.8rem 0;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}

.hero__stats strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  color: var(--champagne);
  font-weight: 500;
}

.hero__stats span {
  font-size: .82rem;
  color: var(--muted);
}

.hero__visual {
  position: relative;
}

.hero__visual .framed__img {
  aspect-ratio: 4 / 5;
  object-position: top center;
}

.hero__quote {
  position: absolute;
  left: -8px;
  bottom: -26px;
  max-width: 280px;
  background: var(--white);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--ink-soft);
  box-shadow: var(--shadow-soft);
}

.hero__quote i {
  color: var(--champagne);
  margin-right: .35rem;
}

/* 8 ── SHOWCASE (the reusable "Universe" engine) ────────────────── */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}

.showcase--mirror .showcase__copy {
  order: 2;
}

.showcase--mirror .showcase__stage {
  order: 1;
}

.showcase__copy h2 {
  margin-bottom: .6rem;
}

.showcase__copy .lede {
  margin-bottom: 1.8rem;
}

.showcase__caption {
  border-left: 2px solid var(--champagne);
  padding-left: 1.1rem;
  margin-bottom: 1.6rem;
  min-height: 6.5rem;
}

.showcase__index {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--champagne);
  margin-bottom: .4rem;
}

.showcase__title {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-bottom: .35rem;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.showcase__text {
  color: var(--ink-soft);
  max-width: 42ch;
  font-weight: 300;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.showcase__caption.is-swapping .showcase__title,
.showcase__caption.is-swapping .showcase__text {
  opacity: 0;
  transform: translateY(6px);
}

.showcase__dots {
  display: flex;
  gap: .55rem;
  margin-top: 1.6rem;
}

.showcase__dots button {
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  transition: background .35s var(--ease);
}

.showcase__dots button.is-active {
  background: var(--champagne);
}

/* image stage — dominant, rounded, no white flash (dark backing) */
.showcase__stage {
  position: relative;
}

.showcase__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.showcase__frame .framed__echo {
  inset: 16px -16px -16px 16px;
  z-index: 0;
}

.showcase__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--fade) var(--ease);
  will-change: opacity;
}

.showcase__img.is-active {
  opacity: 1;
}

.showcase__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, .25);
  z-index: 2;
}

.showcase__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--champagne-soft);
}

/* universe variant: tighter heading + pillars */
.universe__head {
  line-height: 1.02;
  margin-bottom: 1.6rem;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.4rem;
  margin: 1.7rem 0 .4rem;
}

.pillars li {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.pillars svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--champagne);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: .45rem;
}

.pillars strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
}

.pillars span {
  font-size: .8rem;
  color: var(--muted);
}

/* recognition badges */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.4rem 0;
}

.badges span {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .03em;
  padding: .4rem .85rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

/* 9 ── GALLERY ──────────────────────────────────────────────────── */
.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  margin-bottom: clamp(1.6rem, 3vh, 2.4rem);
}

.gallery__shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.5rem);
}

.gallery__stage {
  position: relative;
}

.gallery__frame {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow: var(--shadow);
  cursor: zoom-in;
}

.gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 800ms var(--ease);
}

.gallery__img.is-active {
  opacity: 1;
}

.gallery__nav {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(251, 247, 239, .7);
  backdrop-filter: blur(6px);
  font-size: 1.5rem;
  color: var(--ink);
  transition: all .3s var(--ease);
}

.gallery__nav:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}

.gallery__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1000px;
  margin: 1.4rem auto 0;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line-soft);
}

.gallery__kicker {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--champagne);
}

.gallery__title {
  font-size: var(--fs-h3);
  margin-top: .2rem;
}

.gallery__counter {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--muted);
  white-space: nowrap;
}

.gallery__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  max-width: 1000px;
  margin: 1.4rem auto 0;
}

.gallery__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: all .3s var(--ease);
}

.gallery__dots button.is-active {
  background: var(--champagne);
  transform: scale(1.35);
}

.gallery__hint {
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
  margin-top: 1rem;
}


/* Recognition certificates: show complete certificates without cropping */
.showcase[data-showcase="recognition"] .showcase__frame {
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #fff, var(--paper));
}

.showcase[data-showcase="recognition"] .showcase__img {
  object-fit: contain;
  padding: clamp(.45rem, 1.4vw, .9rem);
  background: #fff;
}

.showcase[data-showcase="recognition"] .showcase__frame .framed__echo {
  display: none;
}

/* 10 ── CONSULTING ──────────────────────────────────────────────── */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

.tag-row span {
  font-size: .8rem;
  padding: .5rem 1rem;
  border-radius: 100px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
  box-shadow: var(--shadow-soft);
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}

.capability {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.capability:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.capability i {
  font-size: 1.5rem;
  color: var(--champagne);
}

.capability h3 {
  font-size: 1.2rem;
  margin: .7rem 0 .8rem;
}

.capability ul {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.capability li {
  font-size: .9rem;
  color: var(--ink-soft);
  padding-left: 1rem;
  position: relative;
}

.capability li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--champagne);
}

/* 11 ── R&D / LAB ───────────────────────────────────────────────── */

/* Timeline */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.2vw, 1rem);
  counter-reset: step;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.timeline__step {
  position: relative;
  padding: 2.4rem 1.8rem 2rem;
  border-top: 2px solid rgba(195, 154, 82, .5);
  border-left: 1px solid rgba(195, 154, 82, .14);
  border-right: 1px solid rgba(195, 154, 82, .14);
  border-bottom: 1px solid rgba(195, 154, 82, .14);
  border-radius: 0 0 var(--radius) var(--radius);
  background: rgba(255, 255, 255, .45);
}

.timeline__num {
  font-family: var(--display);
  font-size: clamp(3.2rem, 4.5vw, 5rem);
  color: rgba(195, 154, 82, .38);
  display: block;
  line-height: 1;
  margin-bottom: 1.4rem;
  letter-spacing: -.02em;
}

.timeline__step h3 {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .5rem;
  letter-spacing: .01em;
}

.timeline__step p {
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* Signal row — elegant pill badges */
.signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.8rem, 2vw, 1.4rem);
  justify-content: center;
  margin-top: clamp(2.4rem, 5vh, 3.6rem);
  padding-top: 2.4rem;
  border-top: 1px solid rgba(195, 154, 82, .28);
}

.signal-row li {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid rgba(195, 154, 82, .45);
  border-radius: 50px;
  padding: .45rem 1.15rem .45rem .85rem;
}

.signal-row i {
  color: var(--champagne);
  font-size: 1.15rem;
}

/* 12 ── CONTACT / FOOTER ────────────────────────────────────────── */
.contact__inner {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.contact__visual .framed__img {
  aspect-ratio: 4 / 5;
}

.contact__sign {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.6rem;
  font-size: .85rem;
  color: var(--muted);
}

.contact__sign span {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--champagne);
  border: 1px solid var(--champagne);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.contact__copy h2 {
  margin-bottom: .6rem;
}

.contact__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin-top: 2rem;
}

.contact__link {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .95rem 1.1rem;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}

.contact__link:hover {
  transform: translateY(-3px);
  border-color: var(--champagne);
}

.contact__link i {
  font-size: 1.35rem;
  color: var(--champagne);
  flex: 0 0 1.6rem;
  display: inline-flex;
  justify-content: center;
}

.contact__link span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.contact__link strong {
  font-size: .92rem;
}

.contact__link small {
  font-size: .76rem;
  color: var(--muted);
}

.footer {
  text-align: center;
  padding: 2.6rem var(--gutter);
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: .82rem;
}

.footer__credit {
  margin-top: .35rem;
}

.footer__credit a {
  color: var(--champagne);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}

.footer__credit a:hover {
  border-bottom-color: var(--champagne);
}

/* 13 ── LIGHTBOX ────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(25, 22, 20, .92);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
  padding: clamp(1rem, 5vw, 3rem);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-width: min(92vw, 1100px);
  max-height: 82vh;
  width: auto;
  border-radius: 14px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}

.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
  color: var(--ivory);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  display: grid;
  place-items: center;
  transition: background .3s var(--ease);
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, .12);
}

.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 2rem;
  color: var(--ivory);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  display: grid;
  place-items: center;
  transition: background .3s var(--ease);
}

.lightbox__arrow:hover {
  background: rgba(255, 255, 255, .12);
}

.lightbox__arrow--prev {
  left: clamp(.5rem, 3vw, 2rem);
}

.lightbox__arrow--next {
  right: clamp(.5rem, 3vw, 2rem);
}

.lightbox__caption {
  position: absolute;
  bottom: clamp(1rem, 4vw, 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(251, 247, 239, .85);
  font-size: .9rem;
  letter-spacing: .04em;
}

/* 14 ── LOADER / FX ─────────────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}

.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.loader__mark {
  font-family: var(--display);
  font-size: 3rem;
  letter-spacing: .1em;
  color: var(--ink);
}

.loader__label {
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

.loader__bar {
  width: 160px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.loader__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--champagne);
  transition: width .5s var(--ease);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--champagne);
  z-index: 80;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 15 ── REVEAL ON SCROLL ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* stagger children for grids/rows */
.capability-grid .reveal.is-in,
.timeline .reveal.is-in {
  transition-delay: var(--d, 0ms);
}

/* 16 ── RESPONSIVE ──────────────────────────────────────────────── */

/* short laptops (MacBook 13") — tighten vertical rhythm so nothing crops */
@media (min-height: 600px) and (max-height: 860px) and (min-width: 900px) {
  :root {
    --section-pad: clamp(3rem, 5vh, 4.5rem);
  }

  .hero,
  .showcase-section {
    min-height: 100svh;
  }

  .showcase__frame,
  .contact__visual .framed__img {
    aspect-ratio: 5 / 5.4;
  }

  .hero__visual .framed__img {
    aspect-ratio: 3 / 4;
  }

  .showcase__caption {
    min-height: 5.5rem;
  }
}

/* tablet / small laptop */
@media (max-width: 1080px) {
  .capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* stack to single column + mobile nav */
@media (max-width: 899px) {
  :root {
    --header-h: 64px;
  }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 65;
    height: 100svh;
    width: min(78vw, 320px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.6rem;
    padding: 2rem 2.4rem;
    background: var(--ivory);
    box-shadow: -20px 0 60px -30px rgba(77, 55, 31, .5);
    transform: translateX(100%);
    transition: transform .45s var(--ease);
  }

  .nav.is-open {
    transform: translateX(0);
  }

  .nav a {
    font-size: 1.15rem;
    color: var(--ink);
  }

  .nav a::after {
    display: none;
  }

  .menu-btn {
    display: flex;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 2.5rem);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .hero__visual {
    order: 1;
    max-width: 420px;
    margin-inline: auto;
  }

  .hero__quote {
    position: static;
    max-width: none;
    margin-top: 1.4rem;
  }

  .lede,
  .section-head .lede {
    margin-inline: auto;
  }

  .section-head--left .lede {
    margin-inline: 0;
  }

  /* mobile sections: heading/copy first, image second */
  .showcase-section {
    min-height: auto;
  }

  .showcase,
  .showcase--mirror {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .showcase__copy,
  .showcase--mirror .showcase__copy {
    order: 0;
  }

  .showcase__stage,
  .showcase--mirror .showcase__stage {
    order: 1;
  }

  .showcase__frame {
    aspect-ratio: 4 / 3;
    max-width: 540px;
    margin-inline: auto;
    width: 100%;
  }

  .showcase__frame .framed__echo {
    display: none;
  }

  .showcase__caption {
    min-height: auto;
  }

  .gallery__shell {
    grid-template-columns: 1fr;
  }

  .gallery__nav {
    display: none;
  }

  .gallery__hint {
    display: block;
  }

  .contact__inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .contact__visual {
    order: 1;
    max-width: 360px;
    margin-inline: auto;
  }

  .contact__copy {
    order: 0;
  }
}

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

  .timeline {
    grid-template-columns: 1fr;
  }

  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact__links {
    grid-template-columns: 1fr;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .gallery__frame {
    aspect-ratio: 4 / 5;
  }

  .gallery__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }

  .framed__echo {
    display: none;
  }

  .gallery__dots {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .25rem .35rem .35rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gallery__dots::-webkit-scrollbar {
    display: none;
  }

  .gallery__dots button {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    scroll-snap-align: center;
  }

  .gallery__dots button.is-active {
    transform: scale(1.45);
  }

  .showcase[data-showcase="recognition"] .showcase__frame {
    aspect-ratio: 16 / 11;
    max-width: 100%;
  }

  .showcase[data-showcase="recognition"] .showcase__img {
    padding: .35rem;
  }

}

/* very small phones */
@media (max-width: 360px) {
  .pillars {
    grid-template-columns: 1fr;
  }

  .hero__stats {
    gap: 1rem 1.6rem;
  }
}

/* large desktops — keep image-led calm, cap growth */
@media (min-width: 1500px) {
  :root {
    --container: 1340px;
  }
}

/* accessibility / motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
   FINAL MOBILE / SECTION REFINEMENT PATCH
   Purpose:
   - Every mobile section starts with heading/copy, then image/content media.
   - Alternate section backgrounds so consecutive areas feel separated.
   - Recognition certificates fit cleanly without cropping or heavy extra space.
   - Gallery dots stay as one swipe indicator line on mobile.
   ===================================================================== */

/* Calm alternating section backgrounds across the page */
main>.section {
  background: var(--ivory);
}

main>.section:nth-of-type(even) {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(216, 183, 123, .10), transparent 52%),
    var(--paper);
}

main>.section:nth-of-type(odd) {
  background:
    radial-gradient(80% 70% at 0% 100%, rgba(200, 212, 191, .12), transparent 55%),
    var(--ivory);
}

/* Keep alternate showcase sections from blending into the previous section */
.showcase-section--alt {
  background:
    radial-gradient(90% 80% at 100% 100%, rgba(195, 154, 82, .12), transparent 54%),
    var(--paper-deep) !important;
}

/* Recognition: certificate frame behaves like a document, not a cropped food image */
.showcase[data-showcase="recognition"] .showcase__frame {
  aspect-ratio: 1.48 / 1;
  border-radius: 24px;
  background: transparent;
  box-shadow: 0 22px 54px -30px rgba(77, 55, 31, .42);
}

.showcase[data-showcase="recognition"] .showcase__img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  background: transparent !important;
}

.showcase[data-showcase="recognition"] .showcase__bar {
  display: none;
}

/* Mobile-first reading rhythm: title/copy first, image second, always */
@media (max-width: 899px) {
  .section {
    padding-block: clamp(3.4rem, 8vh, 5rem);
  }

  .hero__inner,
  .showcase,
  .showcase--mirror,
  .contact__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero__copy,
  .showcase__copy,
  .showcase--mirror .showcase__copy,
  .contact__copy,
  .section-head {
    order: 1 !important;
  }

  .hero__visual,
  .showcase__stage,
  .showcase--mirror .showcase__stage,
  .contact__visual,
  .gallery__shell,
  .capability-grid,
  .timeline,
  .signal-row {
    order: 2 !important;
  }

  .showcase__copy,
  .section-head,
  .section-head--left {
    text-align: left;
    margin-inline: 0;
  }

  .showcase__copy .lede,
  .section-head .lede,
  .section-head--left .lede,
  .lede {
    margin-inline: 0;
  }

  .showcase__stage {
    width: 100%;
  }

  /* Food/portrait showcase images stay elegant but not too tall on phones */
  .showcase:not([data-showcase="recognition"]) .showcase__frame {
    aspect-ratio: 4 / 3.15;
  }

  /* Recognition certificate: larger, complete, and with little empty frame */
  .showcase[data-showcase="recognition"] .showcase__frame {
    width: 100%;
    max-width: 680px;
    aspect-ratio: 1.48 / 1 !important;
    margin-inline: auto;
    border-radius: 20px;
  }

  .showcase[data-showcase="recognition"] .showcase__img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
  }
}

@media (max-width: 600px) {

  /* One clean row of dots: user understands swipe without visual clutter */
  .gallery__dots {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .35rem .2rem .45rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .gallery__dots::-webkit-scrollbar {
    display: none;
  }

  .gallery__dots button {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    opacity: .8;
  }

  .gallery__dots button.is-active {
    width: 18px;
    border-radius: 999px;
    transform: none;
    opacity: 1;
  }

  /* Better certificate fit on narrow phones */
  .showcase[data-showcase="recognition"] .showcase__frame {
    aspect-ratio: 1.46 / 1 !important;
    border-radius: 18px;
  }
}

/* =====================================================================
   FINAL MOBILE SHOWCASE ORDER PATCH
   Mobile showcase rhythm:
   eyebrow → title → subtitle → image → slide description/details.
   This keeps the image directly after the main heading area instead of
   pushing it below the dynamic description.
   ===================================================================== */
@media (max-width: 899px) {

  .showcase,
  .showcase--mirror {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
    align-items: start;
  }

  /* Let the text children and media become direct grid items on mobile. */
  .showcase__copy,
  .showcase--mirror .showcase__copy {
    display: contents !important;
  }

  .showcase__copy>.eyebrow {
    order: 1 !important;
    width: 100%;
    margin-bottom: .85rem;
  }

  .showcase__copy>h2,
  .showcase__copy>.display {
    order: 2 !important;
    width: 100%;
    margin-bottom: .45rem;
  }

  .showcase__copy>.lede {
    order: 3 !important;
    width: 100%;
    margin: 0 0 .85rem !important;
    max-width: 46ch;
  }

  .showcase__stage,
  .showcase--mirror .showcase__stage {
    order: 4 !important;
    width: 100%;
    margin: .15rem 0 1.2rem;
  }

  .showcase__caption {
    order: 5 !important;
    width: 100%;
    margin: 0 0 1rem;
  }

  .pillars,
  .badges,
  .showcase__copy>.btn {
    order: 6 !important;
    width: 100%;
  }

  .showcase__dots {
    order: 7 !important;
    width: 100%;
    margin-top: .4rem;
  }

  .showcase__stage+.showcase__caption {
    margin-top: 0;
  }
}

/* =====================================================================
   FINAL MOBILE HEADER BRAND PATCH
   On phones, avoid repeating the full name directly above the hero title.
   Keep the full name in the hero only and turn the navbar brand into a
   quiet TC monogram.
   ===================================================================== */
@media (max-width: 899px) {
  .header .brand {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: var(--champagne);
  }

  .header .brand span {
    display: none !important;
  }

  .header .brand::before {
    content: "TC";
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--champagne);
  }
}

/* =====================================================================
   FINAL HERO MOBILE POSITION PATCH
   Mobile hero rhythm:
   eyebrow → name → role → image/quote → description → buttons → stats.
   The hero photo must sit directly after the name/title area, not after
   the description, buttons, and stats.
   ===================================================================== */
@media (max-width: 899px) {
  .hero__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    align-items: start !important;
  }

  /* Break the copy wrapper only on mobile so the image can be placed
     between the role and the description without changing desktop layout. */
  .hero__copy {
    display: contents !important;
  }

  .hero__copy>.eyebrow {
    order: 1 !important;
    width: 100%;
    margin-bottom: .55rem !important;
  }

  .hero__title {
    order: 2 !important;
    width: 100%;
    margin-bottom: .25rem !important;
  }

  .hero__role {
    order: 3 !important;
    width: 100%;
    margin-bottom: 1.15rem !important;
  }

  .hero__visual {
    order: 4 !important;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 1.15rem !important;
  }

  .hero__copy>.rule {
    order: 5 !important;
    width: 64px;
    margin: .15rem 0 1.1rem !important;
  }

  .hero__copy>.lede {
    order: 6 !important;
    width: 100%;
    margin: 0 0 1.35rem !important;
  }

  .hero__actions {
    order: 7 !important;
    width: 100%;
    margin: 0 0 1.55rem !important;
  }

  .hero__stats {
    order: 8 !important;
    width: 100%;
    margin-top: .2rem;
  }

  .hero__quote {
    margin-top: 1rem !important;
  }
}

/* =====================================================================
   FINAL FONT-ONLY PATCH
   Client request: remove the curly/italic feeling while keeping the same
   layout, spacing, mobile ordering, colors, and behaviour.
   ===================================================================== */
:root {
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Keep highlighted words gold, but not curly/italic. */
em,
.display em,
.hero__title em,
.universe__head em,
.hero__role,
.hero__quote {
  font-style: normal !important;
}

/* Make the main name feel premium but cleaner and less decorative. */
.display,
.brand,
.loader__mark,
.hero__role,
.hero__quote,
.hero__stats strong,
.timeline__num,
.gallery__counter,
.contact__sign span {
  font-family: var(--display) !important;
}

/* Slightly reduce the dramatic curve/contrast of the large hero name. */
.hero__title {
  letter-spacing: -0.025em;
}

.hero__title em {
  font-weight: 600;
}

/* Quote should read clean, not handwritten. */
.hero__quote {
  font-weight: 500;
}


/* Contact outro placement: title/subtitle first, photo second, buttons third */
.contact__inner {
  grid-template-columns: 1fr;
  max-width: 920px;
}

.contact__copy {
  width: 100%;
}

.contact__visual {
  max-width: 520px;
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
}

.contact__visual .framed__img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.contact__links {
  margin-top: clamp(1.7rem, 3vw, 2.3rem);
}

@media (max-width: 899px) {

  .contact__inner,
  .contact__copy {
    display: block !important;
  }

  .contact__visual {
    order: initial !important;
    max-width: 360px;
    margin: 1.8rem auto 0;
  }

  .contact__links {
    margin-top: 1.7rem;
  }
}

/* =====================================================================
   FINAL MOBILE GALLERY FILTER PATCH
   Keep all gallery filter chips on one clean horizontal line on phones.
   ===================================================================== */
@media (max-width: 899px) {
  .gallery__filters {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .35rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin-bottom: 1.5rem !important;
  }

  .gallery__filters .chip {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: .68rem !important;
    letter-spacing: .01em !important;
    padding: .42rem .58rem !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 370px) {
  .gallery__filters {
    gap: .25rem !important;
  }

  .gallery__filters .chip {
    font-size: .64rem !important;
    padding: .38rem .5rem !important;
  }
}

/* =====================================================================
   FINAL MOBILE CENTERED TEXT PATCH
   Client request: center all section text on mobile only while preserving
   desktop layout, image order, gallery behavior, and existing structure.
   ===================================================================== */
@media (max-width: 899px) {

  /* Global section text alignment on mobile */
  .section,
  .section-head,
  .section-head--left,
  .hero__copy,
  .hero__title,
  .hero__role,
  .hero .lede,
  .showcase__copy,
  .showcase__copy .lede,
  .showcase__caption,
  .showcase__title,
  .showcase__text,
  .gallery__meta,
  .gallery__caption,
  .gallery__title,
  .gallery__kicker,
  .gallery__counter,
  .gallery__hint,
  .consulting,
  .lab,
  .timeline__step,
  .capability,
  .contact__copy,
  .contact__links,
  .footer {
    text-align: center !important;
  }

  /* Center text blocks that previously had left-only margins */
  .lede,
  .section-head .lede,
  .section-head--left .lede,
  .showcase__text,
  .hero__copy>.lede,
  .contact__copy .lede {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center decorative rules under mobile headings */
  .rule,
  .hero__copy>.rule {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Showcase detail card: remove left editorial border on mobile and use a centered top accent */
  .showcase__caption {
    border-left: 0 !important;
    border-top: 2px solid var(--champagne) !important;
    padding-left: 0 !important;
    padding-top: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .showcase__dots,
  .gallery__dots,
  .signal-row,
  .badges,
  .tag-row,
  .hero__actions {
    justify-content: center !important;
  }

  /* Center universe pillars and consulting/service content */
  .pillars li,
  .capability,
  .timeline__step,
  .contact__link span {
    align-items: center !important;
    text-align: center !important;
  }

  .capability li {
    padding-left: 0 !important;
    text-align: center !important;
  }

  .capability li::before {
    display: none !important;
  }

  /* Gallery title/counter should stack cleanly when centered */
  .gallery__meta {
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: .35rem !important;
  }

  .gallery__counter {
    width: 100% !important;
  }

  /* Hero highlight numbers centered */
  .hero__stats {
    justify-content: center !important;
    text-align: center !important;
  }

  .hero__stats li {
    text-align: center !important;
  }
}


/* =====================================================================
   FINAL CREAMY PALETTE + CONTACT BUTTON CENTERING PATCH
   Client request: softer creamy text/color mood and cleaner centered
   contact buttons on mobile. Desktop layout remains unchanged.
   ===================================================================== */

/* Softer, creamier luxury palette */
:root {
  --ivory: #fffaf1;
  --paper: #f6ebdc;
  --paper-deep: #ead9c4;
  --champagne: #b98a45;
  --champagne-soft: #d7b879;
  --rose: #ead0c7;
  --sage: #d4d8c5;
  --ink: #3a3028;
  --ink-soft: #6d6054;
  --muted: #9a8b79;
  --line: rgba(107, 82, 52, .16);
  --line-soft: rgba(107, 82, 52, .09);
  --white: #fffdf8;
}

/* Make the page feel creamier without reducing readability */
body {
  color: var(--ink);
  background: var(--ivory);
}

body::before {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(215, 184, 121, .22), transparent 55%),
    radial-gradient(90% 80% at -10% 110%, rgba(218, 202, 178, .28), transparent 55%),
    linear-gradient(180deg, #fffaf1 0%, #fbf2e5 100%);
}

.display,
h3,
.brand,
.loader__mark {
  color: var(--ink);
}

.lede,
.showcase__text,
.timeline__step p,
.capability li,
.contact__link small,
.hero__stats span,
.footer {
  color: var(--ink-soft);
}

.eyebrow,
.display em,
.brand span,
.hero__stats strong,
.timeline__num,
.contact__link i,
.contact__sign span {
  color: var(--champagne);
}

.header.is-stuck {
  background: rgba(255, 250, 241, .86);
}

/* Creamier cards/buttons */
.hero__quote,
.capability,
.contact__link,
.tag-row span {
  background: rgba(255, 253, 248, .86);
  border-color: var(--line-soft);
}

.btn--solid {
  background: #2f2924;
  color: #fff8ec;
}

.btn--solid:hover {
  background: var(--champagne);
  color: #fffaf1;
}

.btn--line,
.chip {
  background: rgba(255, 253, 248, .45);
  border-color: var(--line);
  color: var(--ink-soft);
}

/* Mobile: keep contact buttons beautifully centered */
@media (max-width: 899px) {
  .contact__links {
    justify-items: center !important;
  }

  .contact__link {
    width: min(100%, 330px) !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: .7rem !important;
    padding: 1rem 1.15rem !important;
  }

  .contact__link i {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .contact__link span {
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
  }

  .contact__link strong,
  .contact__link small {
    width: 100% !important;
    text-align: center !important;
  }

  .contact__link small {
    overflow-wrap: anywhere !important;
  }
}


/* =====================================================================
   FINAL CLIENT REVISION  ·  authoritative overrides (loaded last)
   ---------------------------------------------------------------------
   1  Classic, simple, readable serif (Lora) — no curly / italic feel
   2  Creamy mood + TWO alternating cream tones between consecutive pages
   3  Portrait 9:16 showcases (Philosophy / Experience / Universe) shown
      FULL — never cropped, capped to the viewport, centered
   4  Philosophy auto-rotates every 2s (paired with script.js)
   5  Recognition certificate fits its frame & shows complete (no crop)
   6  Gallery on mobile: 9:16 fully visible + animated swipe cue
   7  Consulting elevated to the same premium level as the rest
   8  Mobile = centered, app-like, luxury menu, centered contact buttons
   ===================================================================== */

/* 1 ── TYPOGRAPHY : classic · simple · readable ─────────────────── */
:root {
  --display: "Lora", Georgia, "Times New Roman", serif;
}

.display,
.brand,
.loader__mark,
.hero__role,
.hero__quote,
.hero__stats strong,
.timeline__num,
.gallery__counter,
.contact__sign span,
.pillars strong,
.nav__mark,
h3 {
  font-family: var(--display) !important;
}

/* nothing curly / italic anywhere */
em,
.display em,
.hero__title em,
.universe__head em,
.hero__role,
.hero__quote {
  font-style: normal !important;
}

.display {
  letter-spacing: -.004em;
  line-height: 1.12;
}

.display em {
  font-weight: 600;
}

.hero__title {
  letter-spacing: -.012em;
  font-weight: 600;
}

.hero__role {
  font-weight: 500;
}

.hero__quote {
  font-weight: 500;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* 2 ── ONE CREAM + ONE BROWN→GOLD, ALTERNATING PER SECTION ─────────
   The page alternates between a single creamy tone and a rich brown→gold
   tone. On the brown→gold sections the palette tokens are re-mapped, so
   every heading, body line, accent and border recolours to warm cream
   automatically and stays perfectly readable. */
:root {
  --cream: #f4e1d3;
  /* the single creamy tone — airy, soft */
  --cream-a: #f4e1d3;
  --cream-b: #ecd3c1;
  --ivory: #f4e1d3;
  --gold-bright: #e7c277;
  /* accent gold used on the dark sections */
}

body {
  background: var(--cream);
}

body::before {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(201, 154, 82, .10), transparent 55%),
    radial-gradient(95% 80% at -10% 110%, rgba(212, 196, 170, .16), transparent 55%),
    var(--cream);
}

/* CREAM sections (odd) — warm cream, dark ink */
main>.section:nth-of-type(odd) {
  background:
    radial-gradient(90% 70% at 0% 100%, rgba(201, 154, 82, .08), transparent 55%),
    var(--cream) !important;
}

/* BROWN→GOLD sections (even) — cream text + gold accents via token remap */
main>.section:nth-of-type(even) {
  --ink: #fbf3e3;
  --ink-soft: #e8d9bd;
  --muted: #c9b187;
  --champagne: var(--gold-bright);
  --line: rgba(231, 194, 119, .26);
  --line-soft: rgba(231, 194, 119, .14);
  --paper-deep: #241a0d;
  color: #fbf3e3 !important;
  background:
    radial-gradient(100% 80% at 100% 0%, rgba(231, 194, 119, .16), transparent 55%),
    linear-gradient(155deg, #211708 0%, #3a2a13 46%, #6b4e22 100%) !important;
}

/* let the alternating rhythm govern; remove the old single-tone override */
.showcase-section--alt {
  background: none;
}

/* dark-section accents (consulting is now a borderless row list, styled below) */
main>.section:nth-of-type(even) .btn--line {
  border-color: rgba(231, 194, 119, .4);
}

/* the certificate frame stays light so the document pops on brown→gold */
main>.section:nth-of-type(even) .showcase[data-showcase="recognition"] .showcase__frame {
  background: #fffdf8 !important;
  border-color: rgba(231, 194, 119, .3);
}

/* 3 ── ADAPTIVE SHOWCASE FRAMES — fit each image exactly ───────────
   The real photos are mixed ratios (landscape / square / portrait), so a
   fixed 9:16 frame left ugly empty bands. Instead the frame hugs the
   ACTIVE image's natural ratio (measured in script.js): every image is
   shown in full, never cropped, with no letterbox bands. */
.showcase:not([data-showcase="recognition"]) .showcase__stage {
  display: flex;
  justify-content: center;
  align-items: center;
}

.showcase:not([data-showcase="recognition"]) .showcase__frame {
  aspect-ratio: 4 / 5;
  /* graceful default until JS measures */
  width: 100%;
  max-width: 540px;
  height: auto;
  max-height: 82vh;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  background: var(--paper-deep);
  transition: aspect-ratio .55s var(--ease);
}

.showcase:not([data-showcase="recognition"]) .showcase__img {
  object-fit: cover;
  /* frame ratio == image ratio → no crop */
  object-position: center;
}

.showcase:not([data-showcase="recognition"]) .showcase__frame .framed__echo {
  display: none;
}

/* 5 ── RECOGNITION CERTIFICATE — COMPLETE & UNCROPPED ──────────── */
.showcase[data-showcase="recognition"] .showcase__stage {
  display: flex;
  justify-content: center;
  align-items: center;
}

.showcase[data-showcase="recognition"] .showcase__frame {
  /* Fixed HEIGHT keeps the section identical on both slides → no page jump.
     width:auto + the JS-measured aspect-ratio makes the card hug each
     certificate exactly → no extra white space inside the frame. */
  height: min(68vh, 540px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  background: #fffdf8 !important;
  border: 1px solid rgba(107, 82, 52, .14);
  border-radius: 18px;
  box-shadow: 0 22px 54px -30px rgba(77, 55, 31, .42);
  overflow: hidden;
}

.showcase[data-showcase="recognition"] .showcase__img {
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 6 ── GALLERY SWIPE CUE (mobile guidance) ─────────────────────── */
.swipe-cue {
  display: none;
}

@keyframes cueHand {

  0%,
  100% {
    transform: translateX(-7px);
  }

  50% {
    transform: translateX(7px);
  }
}

@keyframes cueFade {

  0%,
  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* 7 ── CONSULTING — TWO-COLUMN EDITORIAL STRUCTURE ─────────────────
   Sticky intro (title + service tags) on the left; the four capabilities
   become a clean vertical list of rows with hairline dividers on the
   right — a calmer, more editorial structure than the old card grid. */
.consulting__layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.consulting__intro {
  position: sticky;
  top: calc(var(--header-h) + 1.6rem);
}

.consulting__intro .section-head {
  margin-bottom: clamp(1.4rem, 3vh, 2rem);
}

#consulting .section-head h2 {
  max-width: 15ch;
}

#consulting .tag-row {
  gap: .5rem;
  margin: 0;
}

#consulting .tag-row span {
  background: rgba(255, 250, 240, .05);
  border: 1px solid rgba(231, 194, 119, .26);
  box-shadow: none;
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #efe0c4;
  padding: .48rem .85rem;
}

#consulting .capability-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-template-columns: none;
}

#consulting .capability {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "no head" "no body";
  column-gap: 1.3rem;
  align-items: start;
  background: none;
  border: 0;
  border-top: 1px solid rgba(231, 194, 119, .2);
  border-radius: 0;
  box-shadow: none;
  padding: 1.5rem 0;
  transition: none;
}

#consulting .capability:last-child {
  border-bottom: 1px solid rgba(231, 194, 119, .2);
}

#consulting .capability__no {
  grid-area: no;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--champagne);
  opacity: .7;
  padding-top: .15rem;
  min-width: 1.8em;
}

#consulting .capability__head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: .7rem;
}

#consulting .capability i {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(231, 194, 119, .14);
  font-size: 1.15rem;
  color: var(--champagne);
  flex: 0 0 auto;
}

#consulting .capability h3 {
  font-size: 1.18rem;
  margin: 0;
}

#consulting .capability ul {
  grid-area: body;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.2rem;
  margin-top: .65rem;
}

#consulting .capability li {
  position: relative;
  padding-left: .95rem;
  font-size: .9rem;
}

#consulting .capability li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--champagne);
}

/* gold sweep along the row divider on hover */
#consulting .capability::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--champagne), transparent);
  transition: width .5s var(--ease);
}

#consulting .capability:hover::after {
  width: 100%;
}

/* =====================================================================
   8 ── MOBILE  ·  centered, app-like, full luxury  (max-width: 899px)
   This block is intentionally last so it wins the cascade.
   ===================================================================== */
@media (max-width: 899px) {

  /* ---- 8a · Luxury full-screen menu --------------------------------- */
  .nav {
    counter-reset: navi;
    width: 100% !important;
    max-width: 100% !important;
    height: 100svh;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: .15rem;
    padding: max(5.5rem, 12vh) 1.8rem 2.4rem;
    overflow-y: auto;
    background:
      radial-gradient(120% 55% at 50% 0%, rgba(201, 154, 82, .12), transparent 60%),
      linear-gradient(180deg, var(--cream-a), var(--cream-b)) !important;
    box-shadow: none !important;
    transform: translateX(100%);
  }

  .nav.is-open {
    transform: translateX(0);
  }

  .nav__eyebrow {
    display: block;
    width: min(80vw, 330px);
    margin: 0 auto .7rem;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--champagne);
  }

  /* centered container; every row, the eyebrow and the footer share its edges
     → one clean, consistent alignment (professional indexed menu) */
  .nav__links {
    display: flex;
    flex-direction: column;
    width: min(80vw, 330px);
    margin-inline: auto;
    border-top: 1px solid rgba(107, 82, 52, .16);
  }

  .nav a {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    width: 100%;
    padding: 1.05rem .2rem;
    border-bottom: 1px solid rgba(107, 82, 52, .16);
    font-family: var(--display);
    font-size: 1.4rem !important;
    font-weight: 500;
    color: var(--ink) !important;
    counter-increment: navi;
    opacity: 0;
    transform: translateY(12px);
    transition: color .3s var(--ease), padding-left .35s var(--ease);
  }

  .nav.is-open a {
    animation: navIn .5s var(--ease) forwards;
  }

  .nav.is-open a:nth-of-type(1) {
    animation-delay: .05s;
  }

  .nav.is-open a:nth-of-type(2) {
    animation-delay: .09s;
  }

  .nav.is-open a:nth-of-type(3) {
    animation-delay: .13s;
  }

  .nav.is-open a:nth-of-type(4) {
    animation-delay: .17s;
  }

  .nav.is-open a:nth-of-type(5) {
    animation-delay: .21s;
  }

  .nav.is-open a:nth-of-type(6) {
    animation-delay: .25s;
  }

  .nav.is-open a:nth-of-type(7) {
    animation-delay: .29s;
  }

  .nav.is-open a:nth-of-type(8) {
    animation-delay: .33s;
  }

  .nav.is-open a:nth-of-type(9) {
    animation-delay: .37s;
  }

  /* index numbers sit in a fixed-width column → perfectly aligned */
  .nav a::before {
    content: counter(navi, decimal-leading-zero);
    flex: 0 0 2.1em;
    font-family: var(--body);
    font-size: .6rem;
    letter-spacing: .14em;
    color: var(--champagne);
    opacity: .65;
    align-self: center;
  }

  .nav a::after {
    display: none;
  }

  .nav a:hover,
  .nav a.is-active {
    color: var(--champagne) !important;
    padding-left: .7rem;
  }

  /* footer lockup aligned to the same centered container */
  .nav__sign {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: min(80vw, 330px);
    margin: 1.9rem auto 0;
    font-size: .72rem;
    letter-spacing: .05em;
    color: var(--muted);
  }

  .nav__mark {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--champagne);
    border-radius: 50%;
    color: var(--champagne);
    font-size: 1rem;
  }

  @keyframes navIn {
    to {
      opacity: 1;
      transform: none;
    }
  }

  .menu-btn {
    z-index: 80 !important;
  }

  .section,
  .section-head,
  .section-head--left,
  .hero__copy,
  .showcase__copy,
  .contact__copy,
  .showcase__caption,
  .gallery__meta,
  .gallery__caption {
    text-align: center !important;
  }

  .lede,
  .showcase__copy .lede,
  .section-head .lede,
  .section-head--left .lede,
  .showcase__text,
  .contact__copy .lede {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .rule {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .showcase__caption {
    border-left: 0 !important;
    border-top: 2px solid var(--champagne) !important;
    padding-left: 0 !important;
    padding-top: 1rem !important;
    margin-inline: auto !important;
  }

  .showcase__dots,
  .gallery__dots,
  .signal-row,
  .badges,
  .tag-row,
  .hero__actions,
  .pillars {
    justify-content: center !important;
  }

  .pillars li {
    align-items: center !important;
    text-align: center !important;
  }


  .showcase:not([data-showcase="recognition"]) .showcase__frame {
    width: min(86vw, 420px) !important;
    max-width: 420px !important;
    max-height: 74vh !important;
    height: auto !important;
    margin-inline: auto !important;
  }


  .gallery__frame {
    width: min(90vw, 420px) !important;
    max-width: 420px !important;
    max-height: 74vh !important;
    margin-inline: auto !important;
    background: var(--paper-deep) !important;
  }

  .gallery__img {
    object-fit: cover !important;
  }

  .swipe-cue {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .48rem .9rem;
    border-radius: 999px;
    background: rgba(35, 33, 31, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff8ec;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    pointer-events: none;
    animation: cueFade 4.8s ease forwards;
  }

  .swipe-cue i {
    font-size: 1rem;
    opacity: .8;
  }

  .swipe-cue__hand {
    display: inline-grid;
    animation: cueHand 1.4s var(--ease) infinite;
  }

  .swipe-cue em {
    font-style: normal;
  }

  .swipe-cue.is-hidden {
    opacity: 0 !important;
    visibility: hidden;
  }


  .showcase[data-showcase="recognition"] .showcase__frame {
    height: min(54vh, 86vw) !important;
    width: auto !important;
    max-width: 90vw !important;
    margin-inline: auto !important;
  }

  .consulting__layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .consulting__intro {
    position: static !important;
    text-align: center !important;
  }

  #consulting .section-head,
  #consulting .section-head h2,
  #consulting .section-head .lede {
    text-align: center !important;
    margin-inline: auto !important;
  }

  #consulting .section-head h2 {
    max-width: 100%;
  }

  #consulting .tag-row {
    justify-content: center !important;
  }

  #consulting .capability {
    grid-template-columns: 1fr !important;
    grid-template-areas: "no" "head" "body" !important;
    justify-items: center !important;
    text-align: center !important;
    column-gap: 0 !important;
    padding: 1.6rem 0 !important;
  }

  #consulting .capability__no {
    padding-top: 0 !important;
    margin-bottom: .5rem;
  }

  #consulting .capability__head {
    justify-content: center !important;
  }

  #consulting .capability ul {
    justify-content: center !important;
    margin-top: .7rem;
  }

  #consulting .capability li {
    padding-left: .95rem !important;
    text-align: left !important;
  }


  .timeline__step {
    text-align: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }

  .timeline__step::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    margin: 0 auto .9rem;
    background: var(--champagne);
  }

  .contact__links {
    justify-items: center !important;
  }

  .contact__link {
    width: min(100%, 340px) !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    gap: 1rem !important;
    padding: 1rem 1.5rem !important;
  }

  /* icon and text stay together, left-aligned; icons line up across buttons */
  .contact__link span,
  .contact__link strong,
  .contact__link small {
    text-align: left !important;
  }

  .contact__visual {
    margin-inline: auto !important;
  }
}

@media (max-width: 600px) {
  #consulting .capability-grid {
    grid-template-columns: 1fr !important;
  }

  .swipe-cue {
    font-size: .64rem;
    padding: .42rem .8rem;
  }
}

@media (min-width: 900px) {

  .nav__eyebrow,
  .nav__sign {
    display: none !important;
  }
}

.gallery__frame {
  transition: aspect-ratio .5s var(--ease);
  max-height: 80vh;
}

/* smooth caption + counter swap, synced to the image crossfade (desktop + mobile) */
.gallery__meta {
  transition: opacity 350ms var(--ease);
}

.gallery__meta.is-swapping {
  opacity: 0;
}