/* ============================================================================
   BOLTEN — Global Advisory and Corporate Services LLC FZ
   Site stylesheet · quiet-luxury, light & alive · consumes tokens.css
   ========================================================================== */
@import url("tokens.css");

/* ---- RESET / BASE ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--bt-font-sans);
  font-size: var(--bt-text-sm);
  line-height: var(--bt-leading-body);
  color: var(--bt-ink);
  background: var(--bt-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
::selection { background: var(--bt-claret); color: var(--bt-ivory); }

h1, h2, h3, h4 {
  font-family: var(--bt-font-display);
  font-weight: 500;
  line-height: var(--bt-leading-tight);
  letter-spacing: var(--bt-tracking-tight);
  color: var(--bt-ink-950);
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--bt-claret); }

/* ---- LAYOUT ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--bt-container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.container--wide { max-width: var(--bt-container-wide); }
.section { padding-block: var(--bt-space-section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.bg-porcelain { background: var(--bt-porcelain); }
.bg-ivory     { background: var(--bt-ivory); }
.bg-alabaster { background: var(--bt-alabaster); }
.bg-mist      { background: var(--bt-mist); }
.bg-dark      { background: var(--bt-claret-deep); color: var(--bt-on-dark); }

/* ---- TYPOGRAPHY HELPERS ------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--bt-font-label);
  font-size: var(--bt-text-xs);
  font-weight: 500;
  letter-spacing: var(--bt-tracking-wide);
  text-transform: uppercase;
  color: var(--bt-claret);
}
.eyebrow::before {
  content: "";
  width: 1.8rem;
  height: 1px;
  background: var(--bt-line-claret);
}
.eyebrow--center { justify-content: center; }
.eyebrow--plain::before { display: none; }
.bg-dark .eyebrow { color: var(--bt-stone-soft); }
.bg-dark .eyebrow::before { background: var(--bt-line-on-dark); }

.lead { font-size: var(--bt-text-md); color: var(--bt-ink-soft); max-width: 60ch; }
.muted { color: var(--bt-ink-soft); }
.measure { max-width: var(--bt-container-text); }

.display-2 { font-size: clamp(2rem, 4.4vw, var(--bt-text-4xl)); }
.display-3 { font-size: clamp(1.7rem, 3.2vw, var(--bt-text-2xl)); }

.section-head { max-width: 56ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(2.2rem, 4.8vw, var(--bt-text-5xl)); margin-top: var(--bt-space-3); letter-spacing: -0.015em; }
.section-head p { margin-top: var(--bt-space-4); }

/* ---- BUTTONS ------------------------------------------------------------ */
.btn {
  --_bg: var(--bt-claret);
  --_fg: var(--bt-ivory);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95rem 1.7rem;
  font-family: var(--bt-font-label);
  font-size: var(--bt-text-xs);
  font-weight: 500;
  letter-spacing: var(--bt-tracking-wide);
  text-transform: uppercase;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bg);
  border-radius: var(--bt-radius-sm);
  transition: background var(--bt-dur-base) var(--bt-ease-out),
              color var(--bt-dur-base) var(--bt-ease-out),
              border-color var(--bt-dur-base) var(--bt-ease-out),
              transform var(--bt-dur-base) var(--bt-ease-out),
              box-shadow var(--bt-dur-base) var(--bt-ease-out);
}
.btn svg { width: 1em; height: 1em; transition: transform var(--bt-dur-base) var(--bt-ease-out); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--bt-shadow-claret); background: var(--bt-claret-soft); border-color: var(--bt-claret-soft); }
.btn:hover svg { transform: translateX(3px); }

.btn--ghost {
  --_bg: transparent;
  --_fg: var(--bt-ink-900);
  border-color: var(--bt-line-strong);
}
.btn--ghost:hover { background: transparent; color: var(--bt-claret); border-color: var(--bt-line-claret); box-shadow: none; }

.btn--ivory { --_bg: var(--bt-ivory); --_fg: var(--bt-claret-deep); border-color: var(--bt-ivory); }
.btn--ivory:hover { background: #fff; border-color: #fff; }
.btn--on-dark-ghost { --_bg: transparent; --_fg: var(--bt-ivory); border-color: var(--bt-line-on-dark); }
.btn--on-dark-ghost:hover { background: rgba(247,244,237,0.08); color: var(--bt-ivory); border-color: rgba(247,244,237,0.4); box-shadow: none; }

/* text link with animated underline */
.tlink {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--bt-font-label);
  font-size: var(--bt-text-xs);
  font-weight: 500;
  letter-spacing: var(--bt-tracking-wide);
  text-transform: uppercase;
  color: var(--bt-claret);
}
.tlink svg { width: 0.85em; height: 0.85em; transition: transform var(--bt-dur-base) var(--bt-ease-out); }
.tlink::after {
  content: ""; position: absolute;
}
.tlink span { position: relative; }
.tlink span::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--bt-dur-base) var(--bt-ease-out);
}
.tlink:hover span::after { transform: scaleX(1); }
.tlink:hover svg { transform: translateX(4px); }
.bg-dark .tlink { color: var(--bt-ivory); }

/* ============================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background var(--bt-dur-base) var(--bt-ease-out),
              box-shadow var(--bt-dur-base) var(--bt-ease-out),
              border-color var(--bt-dur-base) var(--bt-ease-out);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bt-space-5);
  padding-block: 1.15rem;
}
.nav.is-scrolled {
  background: rgba(252,251,248,0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--bt-line);
  box-shadow: var(--bt-shadow-sm);
}
/* when drawer open: drop backdrop-filter so fixed children aren't trapped */
.nav.is-open { background: var(--bt-porcelain); -webkit-backdrop-filter: none; backdrop-filter: none; }

.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__brand .brand-word { height: 20px; width: auto; }
.nav__brand .brand-mark { display: block; height: 40px; width: auto; }
.nav.is-scrolled .brand-word { height: 18px; }
.nav.is-scrolled .brand-mark { height: 35px; }

.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); }
.nav__links a {
  font-family: var(--bt-font-label);
  font-size: var(--bt-text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bt-ink-800);
  position: relative;
  padding-block: 0.3rem;
  transition: color var(--bt-dur-base) var(--bt-ease-out);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--bt-claret); transform: scaleX(0); transform-origin: left;
  transition: transform var(--bt-dur-base) var(--bt-ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--bt-claret); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: var(--bt-space-5); }
.nav__cta { padding: 0.7rem 1.25rem; }

.nav__burger {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  position: relative; margin-right: -8px;
}
.nav__burger span {
  position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--bt-ink-900);
  transition: transform var(--bt-dur-base) var(--bt-ease-out), opacity var(--bt-dur-fast);
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 22px; }
.nav__burger span:nth-child(3) { top: 28px; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.nav__drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bt-porcelain);
  padding: 6rem clamp(1.5rem, 8vw, 3rem) 2.5rem;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--bt-dur-slow) var(--bt-ease-cinematic);
  visibility: hidden;
}
.nav.is-open ~ .nav__drawer,
.nav__drawer.is-open { transform: translateX(0); visibility: visible; }
.nav__drawer a.drawer-link {
  font-family: var(--bt-font-display);
  font-size: var(--bt-text-2xl);
  color: var(--bt-ink-900);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--bt-line);
  display: flex; justify-content: space-between; align-items: center;
}
.nav__drawer a.drawer-link span { font-family: var(--bt-font-label); font-size: var(--bt-text-xs); color: var(--bt-stone); }
.nav__drawer .drawer-cta { margin-top: auto; }
.nav__drawer .btn { width: 100%; justify-content: center; }
.nav__drawer .drawer-meta {
  margin-top: 1.5rem; font-size: var(--bt-text-xs); color: var(--bt-ink-muted);
  font-family: var(--bt-font-label); letter-spacing: 0.04em;
}

/* ============================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 6rem;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg::before {
  /* warm radial glow, top-right */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(107,26,43,0.10) 0%, rgba(107,26,43,0) 42%),
    radial-gradient(90% 80% at 10% 100%, rgba(168,154,130,0.14) 0%, rgba(168,154,130,0) 50%);
}
/* ghost monogram — an intentional compositional layer, not hidden behind the
   photo. Pushed far right & scaled up so the G's bowl and tail bleed into the
   open porcelain above, right and below the skyline card; legible as a G. */
.hero__bg .hero__mark {
  position: absolute; left: 3%; bottom: -16%; top: auto;
  width: min(40vw, 560px); opacity: 0.045; filter: none;
}
.hero__inner {
  position: relative; z-index: 1;
  width: 100%;
}
.hero__col { min-width: 0; max-width: min(56%, 46rem); padding-bottom: 5rem; }
.hero__title {
  font-size: clamp(2.8rem, 4.5vw, 4.4rem);
  line-height: 0.99; letter-spacing: -0.015em;
  margin-top: var(--bt-space-5);
  text-wrap: balance;
}
.hero__lead { margin-top: var(--bt-space-6); font-size: var(--bt-text-lg); color: var(--bt-ink-soft); max-width: 42ch; }
.hero__actions { margin-top: var(--bt-space-6); display: flex; flex-wrap: wrap; gap: var(--bt-space-4); }
.hero__meta {
  margin-top: var(--bt-space-7);
  display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.6rem);
  padding-top: var(--bt-space-5); border-top: 1px solid var(--bt-line);
}
.hero__meta .item { }
.hero__meta .k { font-family: var(--bt-font-display); font-size: var(--bt-text-lg); color: var(--bt-claret); display: block; }
.hero__meta .v { font-family: var(--bt-font-label); font-size: var(--bt-text-2xs); letter-spacing: var(--bt-tracking-wide); text-transform: uppercase; color: var(--bt-ink-muted); }

/* full-bleed image panel — anchored to the hero, edge-to-edge, no card frame.
   z-index 1: the resting signature arc passes BEHIND the photo, not over it */
.hero__visual { position: absolute; top: 0; right: 0; bottom: 0; width: min(43vw, 780px); z-index: 1; }
.hero__frame {
  position: absolute; inset: 0; border-radius: 0;
  overflow: hidden; box-shadow: none;
}
/* porcelain veil under the nav zone — the panel still bleeds to the top edge,
   but the dark ink nav links stay readable over any slide */
.hero__visual::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8.5rem;
  background: linear-gradient(180deg,
    rgba(252, 251, 248, 0.94) 0%, rgba(252, 251, 248, 0.72) 42%, rgba(252, 251, 248, 0) 100%);
  z-index: 2; pointer-events: none;
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.02) brightness(1.02) sepia(0.06); }
.hero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(76,17,30,0) 55%, rgba(76,17,30,0.28) 100%); }

/* hero slideshow — a slow self-dissolving rotation; it should be FELT, not
   watched. Long crossfade, no movement of the frame itself. */
.hf-img { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s var(--bt-ease-in-out); }
.hf-img.is-on { opacity: 1; }
.hf-dots {
  position: absolute; right: 16px; bottom: 14px; z-index: 2;
  display: flex; gap: 7px;
}
.hf-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(247, 244, 237, 0.42);
  transition: background 0.6s var(--bt-ease-out), transform 0.6s var(--bt-ease-out);
}
.hf-dots i.is-on { background: rgba(247, 244, 237, 0.95); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
  .hf-img { transition: none; }
}
/* on-image caption: a quiet hairline annotation, not a floating card */
.hero__badge {
  position: absolute; left: 2.2rem; bottom: 2.4rem; z-index: 2;
  background: none; border: 0; border-left: 1px solid rgba(247, 244, 237, 0.55);
  padding: 0.25rem 0 0.25rem 1.1rem; border-radius: 0;
  box-shadow: none; max-width: 18rem;
}
.hero__badge .t { font-family: var(--bt-font-display); font-size: var(--bt-text-lg); color: var(--bt-ivory); line-height: 1.2; }
.hero__badge .d { font-size: var(--bt-text-2xs); color: rgba(247, 244, 237, 0.75); margin-top: 0.3rem; }

.scroll-cue {
  /* anchored to the content column's left edge — same x as the eyebrow/title */
  position: absolute; bottom: 1.8rem; z-index: 2;
  left: calc(max((100% - var(--bt-container)) / 2, 0px) + clamp(1.25rem, 5vw, 3rem));
  font-family: var(--bt-font-label); font-size: var(--bt-text-2xs); letter-spacing: var(--bt-tracking-wider);
  text-transform: uppercase; color: var(--bt-ink-muted);
  display: flex; flex-direction: row; align-items: center; gap: 0.7rem;
}
.scroll-cue .line { width: 3rem; height: 1px; background: var(--bt-line-strong); overflow: hidden; position: relative; }
.scroll-cue .line::after {
  content: ""; position: absolute; inset: 0; background: var(--bt-claret);
  animation: cue 2.4s var(--bt-ease-in-out) infinite;
}
@keyframes cue { 0% { transform: translateX(-100%);} 60%,100% { transform: translateX(100%);} }
/* short viewports: the centred hero content reaches the bottom edge — the cue
   would collide with the meta row, so it steps aside entirely */
@media (max-height: 800px) { .scroll-cue { display: none; } }

/* ---- page header (sub pages) ------------------------------------------- */
.page-header {
  position: relative; padding-top: 9rem; padding-bottom: var(--bt-space-8);
  overflow: hidden;
}
.page-header::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 92% 0%, rgba(107,26,43,0.08), rgba(107,26,43,0) 50%);
}
.page-header .inner { position: relative; }
.page-header h1 { font-size: clamp(2.8rem, 6vw, var(--bt-text-6xl)); margin-top: var(--bt-space-4); letter-spacing: -0.015em; }
.page-header p { margin-top: var(--bt-space-5); }
.crumbs { font-family: var(--bt-font-label); font-size: var(--bt-text-2xs); letter-spacing: var(--bt-tracking-wide); text-transform: uppercase; color: var(--bt-ink-muted); }
.crumbs a:hover { color: var(--bt-claret); }
.crumbs span { color: var(--bt-claret); }

/* ============================================================================
   PILLARS :: EDITORIAL SLIDER  ── full-bleed, three sütun as oversized slides
   ----------------------------------------------------------------------------
   Behaviour in script.js (SLIDER): buttery drag/swipe + arrows + keyboard +
   gentle autoplay drift that pauses on interaction. Transform/opacity only;
   reduced-motion → instant cuts, no drift (see media query at end of block).
   ========================================================================== */
.bt-slider .section-head { max-width: 60ch; }

/* full-bleed stage breaks out of the container (body has overflow-x:hidden) */
.bt-slider__stage {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: clamp(2.4rem, 5vw, 4rem);
}

.bt-slider__viewport {
  position: relative; overflow: hidden;
  cursor: grab; outline: none;
  background: var(--bt-claret-deep);
}
.bt-slider__viewport:active { cursor: grabbing; }
.bt-slider__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--bt-claret-soft); }

.bt-slider__track {
  display: flex; width: 100%;
  transition: transform 820ms var(--bt-ease-cinematic);
  will-change: transform;
}
.bt-slider.is-dragging .bt-slider__track { transition: none; }

/* ---- a slide ----------------------------------------------------------- */
.bt-slide {
  position: relative; flex: 0 0 100%; width: 100%;
  min-height: clamp(460px, 76vh, 760px);
  display: flex; overflow: hidden;
  background: var(--bt-claret-deep);
}
.bt-slide__media { position: absolute; inset: 0; }
.bt-slide__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.08); transform-origin: 60% 42%;
  transition: transform 1400ms var(--bt-ease-cinematic);
}
.bt-slide.is-active .bt-slide__media img { transform: scale(1.005); }

/* claret scrim — left-weighted so the editorial copy stays legible, with a
   deepened foot for the stacked mobile layout */
.bt-slide__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(38,9,16,0.94) 0%, rgba(38,9,16,0.84) 40%, rgba(38,9,16,0.62) 64%, rgba(38,9,16,0.18) 86%, rgba(38,9,16,0.06) 100%),
    linear-gradient(180deg, rgba(38,9,16,0) 40%, rgba(38,9,16,0.5) 100%);
}

.bt-slide__inner {
  position: relative; z-index: 2; width: 100%;
  display: flex; align-items: center; gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(3.2rem, 7vw, 5.5rem);
}

/* giant ghost numeral — a quiet editorial watermark beside the copy */
.bt-slide__num {
  font-family: var(--bt-font-display); font-weight: 500; font-style: italic;
  font-size: clamp(7rem, 19vw, 17rem); line-height: 0.78;
  color: transparent; -webkit-text-stroke: 1px rgba(247,244,237,0.22);
  letter-spacing: -0.03em; flex: none; user-select: none;
  margin-right: clamp(0.5rem, 3vw, 2.5rem);
  transform: translateX(-14px); opacity: 0;
  transition: transform 760ms var(--bt-ease-cinematic) 60ms, opacity 760ms var(--bt-ease-cinematic) 60ms;
}
.bt-slide.is-active .bt-slide__num { transform: none; opacity: 1; }

.bt-slide__body { max-width: 38ch; color: var(--bt-on-dark); }
/* the body content rises into place each time a slide becomes active */
.bt-slide__body > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity 700ms var(--bt-ease-cinematic), transform 700ms var(--bt-ease-cinematic);
}
.bt-slide.is-active .bt-slide__body > * { opacity: 1; transform: none; }
.bt-slide.is-active .bt-slide__body > *:nth-child(1) { transition-delay: 120ms; }
.bt-slide.is-active .bt-slide__body > *:nth-child(2) { transition-delay: 200ms; }
.bt-slide.is-active .bt-slide__body > *:nth-child(3) { transition-delay: 290ms; }
.bt-slide.is-active .bt-slide__body > *:nth-child(4) { transition-delay: 380ms; }
.bt-slide.is-active .bt-slide__body > *:nth-child(5) { transition-delay: 470ms; }

.bt-slide__eyebrow {
  display: inline-block; font-family: var(--bt-font-label); font-weight: 500;
  font-size: var(--bt-text-xs); letter-spacing: var(--bt-tracking-wide);
  text-transform: uppercase; color: var(--bt-stone-soft);
}
.bt-slide__title {
  font-size: clamp(2.8rem, 7vw, var(--bt-text-6xl)); line-height: 1.0;
  color: var(--bt-ivory); margin-top: var(--bt-space-3);
}
.bt-slide__desc {
  margin-top: var(--bt-space-5); color: var(--bt-on-dark-soft);
  font-size: var(--bt-text-md); line-height: 1.6; max-width: 44ch;
}
.bt-slide__tags {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--bt-space-6);
}
.bt-slide__tags li {
  font-family: var(--bt-font-label); font-size: var(--bt-text-2xs);
  letter-spacing: var(--bt-tracking-wide); text-transform: uppercase;
  color: var(--bt-ivory); padding: 0.5rem 0.9rem;
  border: 1px solid var(--bt-line-on-dark); border-radius: var(--bt-radius-pill);
  background: rgba(247,244,237,0.04);
}
.bt-slide__body .tlink { margin-top: var(--bt-space-6); }
.tlink--ivory { color: var(--bt-ivory); }
.tlink--ivory:hover { color: #fff; }

/* ---- controls : counter · progress · arrows --------------------------- */
.bt-slider__controls {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  margin-top: var(--bt-space-6);
}
.bt-slider__count {
  font-family: var(--bt-font-label); font-size: var(--bt-text-xs);
  letter-spacing: var(--bt-tracking-wide); color: var(--bt-ink-muted);
  display: inline-flex; gap: 0.55em; flex: none;
}
.bt-slider__count [data-slider-current] { color: var(--bt-claret); }
.bt-slider__count .sep { color: var(--bt-stone); }
.bt-slider__progress {
  flex: 1; height: 2px; background: var(--bt-line-strong); position: relative; overflow: hidden;
}
.bt-slider__bar {
  position: absolute; left: 0; top: 0; height: 100%; width: 33.333%;
  background: var(--bt-claret); transform-origin: left;
  transition: transform 820ms var(--bt-ease-cinematic);
}
.bt-slider__nav { display: flex; gap: 0.6rem; flex: none; }
.bt-slider__btn {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border: 1px solid var(--bt-line-strong); border-radius: var(--bt-radius-pill);
  background: transparent; color: var(--bt-ink-900);
  transition: background var(--bt-dur-base) var(--bt-ease-out),
              color var(--bt-dur-base) var(--bt-ease-out),
              border-color var(--bt-dur-base) var(--bt-ease-out),
              transform var(--bt-dur-base) var(--bt-ease-out);
}
.bt-slider__btn svg { width: 1.1rem; height: 1.1rem; }
.bt-slider__btn:hover { background: var(--bt-claret); color: var(--bt-ivory); border-color: var(--bt-claret); }
.bt-slider__btn:active { transform: scale(0.94); }
.bt-slider__btn:focus-visible { outline: 2px solid var(--bt-claret-soft); outline-offset: 2px; }

@media (max-width: 720px) {
  .bt-slide__inner { padding-block: clamp(2.6rem, 9vw, 4rem); }
  .bt-slide__num { position: absolute; top: clamp(1rem, 5vw, 2rem); right: clamp(1rem, 5vw, 2rem); margin: 0; }
  .bt-slide__title { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .bt-slide__desc { font-size: var(--bt-text-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .bt-slider__track { transition: none; }
  .bt-slide__media img { transform: scale(1.02); transition: none; }
  .bt-slide__num { transition: none; }
  .bt-slide__body > * { opacity: 1; transform: none; transition: none; }
  .bt-slider__bar { transition: none; }
}

/* ============================================================================
   APPROACH / VALUES (quality columns)
   ========================================================================== */
/* editorial ledger: oversized Cormorant numerals against hairline rows */
.qualities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2.5rem, 6vw, 5.5rem); margin-top: var(--bt-space-8); }
.quality {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: clamp(1.3rem, 2.6vw, 2.2rem);
  border-top: 1px solid var(--bt-line-claret);
  padding-block: clamp(1.8rem, 3.4vw, 2.6rem);
}
.quality .no {
  grid-row: 1 / span 2;
  font-family: var(--bt-font-display); font-size: clamp(2.6rem, 4.6vw, 3.8rem);
  line-height: 0.88; color: var(--bt-claret); opacity: 0.9; letter-spacing: -0.02em;
}
.quality h3 { font-size: var(--bt-text-xl); }
.quality p { margin-top: var(--bt-space-3); color: var(--bt-ink-soft); font-size: var(--bt-text-sm); max-width: 40ch; }

/* ---- split feature (image + text) -------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media .frame { position: relative; border-radius: var(--bt-radius-md); overflow: hidden; box-shadow: var(--bt-shadow-md); aspect-ratio: 5/6; }
.split__media .frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.68) contrast(1.02) sepia(0.08); }
.split__media .frame--wide { aspect-ratio: 4/3; }
.split__media .ornament { position: absolute; inset: 0; border: 1px solid var(--bt-line-claret); border-radius: var(--bt-radius-md); transform: translate(1.2rem, 1.2rem); z-index: -1; }
.split__body h2 { font-size: clamp(1.9rem, 3.6vw, var(--bt-text-4xl)); margin-top: var(--bt-space-4); }
.split__body p { margin-top: var(--bt-space-5); color: var(--bt-ink-soft); }
.split__body .actions { margin-top: var(--bt-space-6); }

/* monogram block (Kerim Bölten / portrait placeholder) */
.monogram {
  aspect-ratio: 5/6; border-radius: var(--bt-radius-md);
  background:
    linear-gradient(150deg, var(--bt-claret) 0%, var(--bt-claret-deep) 100%);
  position: relative; overflow: hidden; display: grid; place-items: center;
  box-shadow: var(--bt-shadow-lg);
}
.monogram::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(247,244,237,0.10) 1px, transparent 0);
  background-size: 22px 22px; opacity: 0.5;
}
.monogram img { position: relative; width: 56%; opacity: 0.95; }
.monogram .cap { position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center; font-family: var(--bt-font-label); font-size: var(--bt-text-2xs); letter-spacing: var(--bt-tracking-wider); text-transform: uppercase; color: var(--bt-on-dark-soft); }

/* seal treatment: a silken light sweeps across the claret card on hover,
   and the card carries a whisper of depth as it scrolls (see script.js) */
.monogram::after {
  content: ""; position: absolute; inset: -40% -65%;
  background: linear-gradient(115deg,
    transparent 42%, rgba(247, 244, 237, 0.13) 50%, transparent 58%);
  transform: translateX(-120%) rotate(0.001deg);
  transition: transform 1.25s var(--bt-ease-cinematic);
  pointer-events: none;
}
.split__media:hover .monogram::after { transform: translateX(120%); }
.monogram { will-change: transform; transition: transform 0.2s linear; }
@media (prefers-reduced-motion: reduce) {
  .monogram { transition: none; transform: none !important; }
  .monogram::after { display: none; }
}

/* ============================================================================
   ARC SEAM — the brand's signature line, recurring between sections.
   The same gesture as the intro/hero orbit: a thin claret arc that draws
   itself once when it enters the view, then rests as part of the page.
   ========================================================================== */
.arc-seam { position: relative; height: clamp(80px, 12vw, 170px); pointer-events: none; overflow: hidden; }
.arc-seam svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.arc-seam path {
  fill: none; stroke: var(--bt-claret); stroke-width: 1.3; vector-effect: non-scaling-stroke;
  stroke-linecap: round; opacity: 0.26;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.7s var(--bt-ease-cinematic) 0.15s;
}
.arc-seam.is-in path { stroke-dashoffset: 0; }
.arc-seam--ivory path { stroke: var(--bt-ivory); opacity: 0.32; }
@media (prefers-reduced-motion: reduce) {
  .arc-seam path { stroke-dashoffset: 0; transition: none; }
}

/* ============================================================================
   MANIFESTO (dark band)
   ========================================================================== */
.manifesto { text-align: center; }
.manifesto .quote {
  font-family: var(--bt-font-display); font-weight: 500;
  font-size: clamp(2rem, 4.8vw, var(--bt-text-5xl)); line-height: 1.14;
  color: var(--bt-on-dark); max-width: 24ch; margin-inline: auto; letter-spacing: -0.012em;
}
.manifesto .quote em { color: var(--bt-stone-soft); }
.manifesto .by { margin-top: var(--bt-space-6); font-family: var(--bt-font-label); font-size: var(--bt-text-xs); letter-spacing: var(--bt-tracking-wide); text-transform: uppercase; color: var(--bt-on-dark-soft); }
.manifesto .mark { width: 64px; margin: 0 auto var(--bt-space-6); opacity: 0.9; }

/* ---- marquee (service keywords) -----------------------------------------
   An editorial ticker, not a stock ticker: serif-italic and letterspaced-caps
   items alternate in rhythm, separated by a tiny globe glyph (ring + equator,
   a nod to the mark). Items are real links — hover pauses the belt, inks the
   word claret and wipes a hairline underline in. */
.marquee { overflow: hidden; padding-block: var(--bt-space-5); border-block: 1px solid var(--bt-line); }
.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; }
.mq-it {
  white-space: nowrap; padding-inline: 1.7rem; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 1.7rem calc(100% - 0.18em) / 0 1px no-repeat;
  transition: color 0.35s var(--bt-ease-out), background-size 0.5s var(--bt-ease-cinematic);
}
.mq-it:hover { color: var(--bt-claret); background-size: calc(100% - 3.4rem) 1px; }
.mq-serif {
  font-family: var(--bt-font-display); font-style: italic;
  font-size: var(--bt-text-xl); color: var(--bt-ink-muted);
}
.mq-sep {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(107, 26, 43, 0.45); position: relative;
}
.mq-sep::before {
  content: ""; position: absolute; left: -1.5px; right: -1.5px; top: 50%;
  height: 1px; background: rgba(107, 26, 43, 0.45);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================================
   PROCESS (numbered steps)
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bt-space-5); margin-top: var(--bt-space-8); counter-reset: step; }
.step { text-align: left; }
.step .n { font-family: var(--bt-font-display); font-size: var(--bt-text-4xl); color: var(--bt-claret); line-height: 1; }
.step h3 { font-size: var(--bt-text-md); margin-top: var(--bt-space-4); font-family: var(--bt-font-sans); font-weight: 600; letter-spacing: 0; }
.step p { margin-top: var(--bt-space-3); color: var(--bt-ink-soft); font-size: var(--bt-text-sm); }
.step .bar { height: 1px; background: var(--bt-line); margin-top: var(--bt-space-5); position: relative; }
.step .bar::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 2.5rem; background: var(--bt-claret); }

/* ============================================================================
   SERVICES PAGE — expanded pillars
   ========================================================================== */
.svc-block { padding-block: var(--bt-space-8); border-top: 1px solid var(--bt-line); }
.svc-block:first-of-type { border-top: 0; }
.svc-head { display: grid; grid-template-columns: auto 1fr; gap: var(--bt-space-5); align-items: start; }
.svc-head .ic { width: 3rem; height: 3rem; color: var(--bt-claret); }
.svc-head h2 { font-size: clamp(1.8rem, 3.6vw, var(--bt-text-3xl)); }
.svc-head .no { font-family: var(--bt-font-label); font-size: var(--bt-text-2xs); letter-spacing: var(--bt-tracking-widest); color: var(--bt-stone); }
.svc-head p { margin-top: var(--bt-space-3); color: var(--bt-ink-soft); max-width: 60ch; }
/* the services ledger: hairline rows with Cormorant numerals — a law-firm
   schedule, not a card wall */
.svc-grid { display: block; margin-top: var(--bt-space-6); counter-reset: svc; }
.svc-item {
  counter-increment: svc;
  display: grid; grid-template-columns: 4.2rem minmax(0, 17rem) 1fr;
  column-gap: clamp(1.2rem, 3vw, 2.8rem); align-items: baseline;
  background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--bt-line);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0.4rem;
  transition: background var(--bt-dur-base) var(--bt-ease-out);
}
.svc-grid .svc-item:last-child { border-bottom: 1px solid var(--bt-line); }
.svc-item::before {
  content: counter(svc, decimal-leading-zero);
  font-family: var(--bt-font-display); font-size: var(--bt-text-xl);
  line-height: 1; color: var(--bt-claret); opacity: 0.8; letter-spacing: -0.01em;
}
.svc-item h3 { font-size: var(--bt-text-md); margin: 0; }
.svc-item p { margin: 0; color: var(--bt-ink-soft); font-size: var(--bt-text-sm); }
.svc-item:hover { background: linear-gradient(90deg, var(--bt-mist) 0%, rgba(248,241,241,0) 72%); }
.svc-item h3 { font-size: var(--bt-text-md); font-family: var(--bt-font-sans); font-weight: 600; letter-spacing: 0; display: flex; align-items: baseline; gap: 0.6rem; }
.svc-item h3::before { content: ""; width: 6px; height: 6px; background: var(--bt-claret); border-radius: 1px; flex: none; transform: rotate(45deg); }
.svc-item p { margin-top: var(--bt-space-3); color: var(--bt-ink-soft); font-size: var(--bt-text-sm); }

/* ============================================================================
   CTA BAND (dark)
   ========================================================================== */
.cta { text-align: center; position: relative; overflow: hidden; background: var(--bt-claret); border-bottom: 1px solid rgba(0,0,0,0.18); }
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 50% 0%, rgba(138,51,68,0.45), rgba(76,17,30,0) 60%);
}
.cta__inner { position: relative; }
.cta__mark { width: 120px; margin: 0 auto var(--bt-space-6); }
.cta h2 { font-size: clamp(2rem, 4.6vw, var(--bt-text-4xl)); color: var(--bt-ivory); max-width: 20ch; margin-inline: auto; }
.cta p { margin-top: var(--bt-space-5); color: var(--bt-on-dark-soft); max-width: 48ch; margin-inline: auto; }
.cta .actions { margin-top: var(--bt-space-7); display: flex; gap: var(--bt-space-4); justify-content: center; flex-wrap: wrap; }

/* ============================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); }
.contact-info .row { padding-block: var(--bt-space-5); border-top: 1px solid var(--bt-line); }
.contact-info .row:first-child { border-top: 0; padding-top: 0; }
.contact-info .lbl { font-family: var(--bt-font-label); font-size: var(--bt-text-2xs); letter-spacing: var(--bt-tracking-wide); text-transform: uppercase; color: var(--bt-stone); }
.contact-info .val { font-family: var(--bt-font-display); font-size: var(--bt-text-lg); color: var(--bt-ink-900); margin-top: 0.35rem; }
.contact-info .val a:hover { color: var(--bt-claret); }
.contact-info .note { font-size: var(--bt-text-2xs); color: var(--bt-ink-muted); margin-top: 0.3rem; }

.form { background: var(--bt-bg-elevated); border: 1px solid var(--bt-line); border-radius: var(--bt-radius-md); padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--bt-shadow-sm); }
.field { margin-bottom: var(--bt-space-5); }
.field label { display: block; font-family: var(--bt-font-label); font-size: var(--bt-text-2xs); letter-spacing: var(--bt-tracking-wide); text-transform: uppercase; color: var(--bt-ink-muted); margin-bottom: 0.5rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.85rem 1rem; font: inherit; font-size: var(--bt-text-sm);
  color: var(--bt-ink-900); background: var(--bt-porcelain);
  border: 1px solid var(--bt-line-strong); border-radius: var(--bt-radius-sm);
  transition: border-color var(--bt-dur-base) var(--bt-ease-out), box-shadow var(--bt-dur-base) var(--bt-ease-out);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--bt-claret); box-shadow: 0 0 0 3px var(--bt-claret-wash); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bt-space-5); }
.form .btn { width: 100%; justify-content: center; }
.form .legal { font-size: var(--bt-text-2xs); color: var(--bt-ink-muted); margin-top: var(--bt-space-4); }

.map-ph {
  margin-top: var(--bt-space-7); border-radius: var(--bt-radius-md); overflow: hidden;
  border: 1px solid var(--bt-line); position: relative; aspect-ratio: 21/7; background: var(--bt-alabaster);
  display: grid; place-items: center;
}
.map-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) saturate(0.7) brightness(1.04); opacity: 0.5; }
.map-ph .pin { position: relative; text-align: center; font-family: var(--bt-font-label); font-size: var(--bt-text-2xs); letter-spacing: var(--bt-tracking-wide); text-transform: uppercase; color: var(--bt-ink-800); background: var(--bt-porcelain); padding: 0.8rem 1.2rem; border: 1px solid var(--bt-line); border-radius: var(--bt-radius-pill); box-shadow: var(--bt-shadow-sm); }

/* fact rows (about page) */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bt-space-5); margin-top: var(--bt-space-7); }
.fact { text-align: center; padding: var(--bt-space-6) var(--bt-space-4); border: 1px solid var(--bt-line); border-radius: var(--bt-radius-md); background: var(--bt-bg-elevated); }
.fact .k { font-family: var(--bt-font-display); font-size: var(--bt-text-2xl); color: var(--bt-claret); }
.fact .v { font-family: var(--bt-font-label); font-size: var(--bt-text-2xs); letter-spacing: var(--bt-tracking-wide); text-transform: uppercase; color: var(--bt-ink-muted); margin-top: 0.4rem; }

/* timeline / values list */
.vlist { margin-top: var(--bt-space-7); }
.vlist .vitem { display: grid; grid-template-columns: 4rem 1fr; gap: var(--bt-space-5); padding-block: var(--bt-space-5); border-top: 1px solid var(--bt-line); align-items: baseline; }
.vlist .vitem:last-child { border-bottom: 1px solid var(--bt-line); }
.vlist .vitem .no { font-family: var(--bt-font-display); font-size: var(--bt-text-xl); color: var(--bt-claret); }
.vlist .vitem h3 { font-size: var(--bt-text-lg); }
.vlist .vitem p { margin-top: var(--bt-space-2); color: var(--bt-ink-soft); }

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--bt-claret-deep); color: var(--bt-on-dark); padding-top: var(--bt-space-9); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--bt-space-7); padding-bottom: var(--bt-space-8); border-bottom: 1px solid var(--bt-line-on-dark); }
.footer__brand .logo { width: 190px; margin-bottom: var(--bt-space-5); }
.footer__brand p { color: var(--bt-on-dark-soft); font-size: var(--bt-text-sm); max-width: 34ch; }
.footer h4 { font-family: var(--bt-font-label); font-size: var(--bt-text-2xs); font-weight: 500; letter-spacing: var(--bt-tracking-wide); text-transform: uppercase; color: var(--bt-stone-soft); margin-bottom: var(--bt-space-4); }
.footer__col a, .footer__col li { color: var(--bt-on-dark-soft); font-size: var(--bt-text-sm); display: block; padding-block: 0.35rem; transition: color var(--bt-dur-base) var(--bt-ease-out); }
.footer__col a:hover { color: var(--bt-ivory); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--bt-space-4); justify-content: space-between; align-items: center; padding-block: var(--bt-space-5); }
.footer__bottom p, .footer__bottom a { font-size: var(--bt-text-2xs); color: var(--bt-on-dark-soft); }
.footer__bottom a:hover { color: var(--bt-ivory); }
.footer__legal { font-size: var(--bt-text-2xs); color: rgba(247,244,237,0.45); padding-bottom: var(--bt-space-6); max-width: 90ch; }

/* ============================================================================
   COOKIE BANNER
   ========================================================================== */
.cookie {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%) translateY(150%);
  z-index: 120; width: min(640px, calc(100vw - 2rem));
  background: var(--bt-porcelain); border: 1px solid var(--bt-line); border-radius: var(--bt-radius-md);
  box-shadow: var(--bt-shadow-lg); padding: 1.1rem 1.3rem;
  display: flex; align-items: center; gap: var(--bt-space-5);
  transition: transform var(--bt-dur-slow) var(--bt-ease-cinematic);
}
.cookie.is-in { transform: translateX(-50%) translateY(0); }
.cookie p { font-size: var(--bt-text-xs); color: var(--bt-ink-soft); flex: 1; }
.cookie a { color: var(--bt-claret); text-decoration: underline; text-underline-offset: 2px; }
.cookie .btn { padding: 0.6rem 1.2rem; white-space: nowrap; }

/* ============================================================================
   REVEAL MOTION
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--bt-dur-cine) var(--bt-ease-cinematic), transform var(--bt-dur-cine) var(--bt-ease-cinematic); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 80ms; }
.reveal[data-d="2"] { transition-delay: 160ms; }
.reveal[data-d="3"] { transition-delay: 240ms; }
.reveal[data-d="4"] { transition-delay: 320ms; }
/* QA: full-page capture mode — neutralise full-height hero so layout reads */
.qa .hero { min-height: auto; padding-block: 8rem 5rem; }
.qa .scroll-cue { display: none; }

/* ============================================================================
   INTRO / PAGE-OPEN :: "YÖRÜNGE MÜHRÜ ÇİZER" (the orbit inscribes the mark)
   ----------------------------------------------------------------------------
   One overlay, one continuous gesture. On a porcelain field the claret orbit —
   the identical arc that rests on the hero — draws once; in its wake the
   embossed BG·globe monogram inks in (it was already there, faint, like a
   watermark in the porcelain), a hairline settles, then the wordmark rises.
   The field lifts and the SAME arc remains on the hero beneath: one shot.
   data-intro="full"  → fresh arrival: arc + mark + wordmark beat (~2.35s)
   data-intro="mark"  → reload / back-forward: arc + mark only      (~1.5s)
   Internal same-origin navigation skips it entirely (see script.js).
   ========================================================================== */
html.intro-active, html.intro-active body { overflow: hidden; }
html.intro-skip .intro { display: none; }

.intro {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bt-porcelain);
  display: grid; place-items: center;
  transition: opacity 0.85s var(--bt-ease-cinematic),
              transform 0.95s var(--bt-ease-cinematic),
              visibility 0.95s var(--bt-ease-cinematic);
}
/* a barely-there warm claret vignette so the porcelain field has depth */
.intro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 95% at 84% 8%, rgba(107,26,43,0.07) 0%, rgba(107,26,43,0) 46%),
    radial-gradient(100% 90% at 50% 120%, rgba(168,154,130,0.10) 0%, rgba(168,154,130,0) 55%);
  opacity: 0; transition: opacity 1.1s var(--bt-ease-cinematic);
}
.intro.is-armed::after { opacity: 1; }

.intro__stage { position: absolute; inset: 0; display: grid; place-items: center; }

/* the orbit — same viewBox / path / slice mapping as the hero arc, so it lands
   in the identical screen position and survives the curtain lift unbroken */
.intro__orbit {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 0;
}
.intro__orbit path {
  fill: none; stroke: var(--bt-claret);
  stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
}
/* the arc is the SIGNATURE: it draws beneath the assembled logo, and the
   moment it completes the curtain lifts (JS hold = draw end). */
.intro.is-armed .intro__orbit path {
  animation:
    intro-orbit-draw 1050ms var(--bt-ease-cinematic) 950ms forwards,
    intro-orbit-settle 700ms var(--bt-ease-out) 2000ms forwards;
}
.intro.is-armed[data-intro="mark"] .intro__orbit path {
  animation:
    intro-orbit-draw 1050ms var(--bt-ease-cinematic) 600ms forwards,
    intro-orbit-settle 700ms var(--bt-ease-out) 1650ms forwards;
}
@keyframes intro-orbit-draw {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  12%  { opacity: 0.9; }
  100% { stroke-dashoffset: 0; opacity: 0.9; }
}
@keyframes intro-orbit-settle { to { opacity: 0.18; } }

/* the lockup the arc paints into being */
.intro__lockup {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 3vh, 26px);
}
/* the mark ASSEMBLES: over a faint embossed ghost, the B curtain opens from
   the left, the G from the right, and the globe rises into the G's bowl and
   locks. Pure clip+transform — the layers are the same traced path, so the
   final state is pixel-identical to the logo. */
.intro__mark {
  width: min(300px, 52vw); height: auto; display: block; overflow: visible;
  transform: scale(1.045);
  transition: transform 0.9s var(--bt-ease-cinematic);
}
.intro.is-armed .intro__mark { transform: none; transition-delay: 0.55s; }
.intro__mark g { fill: var(--bt-claret); }
.intro__mark .imk-ghost { opacity: 0.05; }
.intro__mark .imk-b { clip-path: inset(0 100% 0 0); transform: translateX(-26px); opacity: 0; }
.intro__mark .imk-g { clip-path: inset(0 0 0 100%); transform: translateX(26px); opacity: 0; }
.intro__mark .imk-globe { transform: translateY(44px); opacity: 0; }
.intro.is-armed .intro__mark .imk-b { animation: imk-b-in 1.05s var(--bt-ease-cinematic) 0.10s both; }
.intro.is-armed .intro__mark .imk-g { animation: imk-g-in 1.05s var(--bt-ease-cinematic) 0.18s both; }
.intro.is-armed .intro__mark .imk-globe { animation: imk-globe-in 0.9s var(--bt-ease-cinematic) 0.52s both; }
@keyframes imk-b-in {
  0%   { clip-path: inset(0 100% 0 0); transform: translateX(-26px); opacity: 0; }
  28%  { opacity: 1; }
  100% { clip-path: inset(0 52.5% 0 0); transform: none; opacity: 1; }
}
@keyframes imk-g-in {
  0%   { clip-path: inset(0 0 0 100%); transform: translateX(26px); opacity: 0; }
  28%  { opacity: 1; }
  100% { clip-path: inset(0 0 0 47.1%); transform: none; opacity: 1; }
}
@keyframes imk-globe-in {
  0%   { transform: translateY(44px); opacity: 0; }
  38%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* hairline rule beneath, drawn outward */
.intro__rule {
  width: min(216px, 40vw); height: 1px; background: var(--bt-line-claret);
  transform-origin: center; transform: scaleX(0);
  transition: transform 0.66s var(--bt-ease-cinematic);
}
.intro.is-armed .intro__rule { transform: scaleX(1); transition-delay: 0.5s; }

/* QUIET WORDMARK BEAT — fresh arrival only; rises after the mark settles */
.intro[data-intro="mark"] .intro__word { display: none; }
.intro__word { display: flex; flex-direction: column; align-items: center; gap: clamp(7px, 1.2vh, 11px); }
.intro__wordmark { width: min(252px, 50vw); height: auto; display: block; opacity: 0; transform: translateY(13px);
  transition: opacity 0.74s var(--bt-ease-cinematic), transform 0.74s var(--bt-ease-cinematic); }
.intro__tag { width: min(252px, 50vw); height: auto; display: block; opacity: 0; transform: translateY(8px);
  transition: opacity 0.66s var(--bt-ease-out), transform 0.66s var(--bt-ease-out); }
.intro.is-armed[data-intro="full"] .intro__wordmark { opacity: 1; transform: none; transition-delay: 0.72s; }
.intro.is-armed[data-intro="full"] .intro__tag { opacity: 0.82; transform: none; transition-delay: 0.9s; }

/* skip affordance */
.intro__skip {
  position: absolute; bottom: var(--bt-space-6); right: var(--bt-space-6);
  font-family: var(--bt-font-label); font-size: var(--bt-text-2xs);
  letter-spacing: var(--bt-tracking-wide); text-transform: uppercase;
  color: var(--bt-claret); background: none; border: 0; cursor: pointer;
  opacity: 0; transition: opacity 0.6s var(--bt-ease-out) 0.9s;
}
.intro.is-armed .intro__skip { opacity: 0.55; }
.intro__skip:hover { opacity: 0.9; }

/* leave: the porcelain field lifts a touch and dissolves to reveal the hero,
   while the hero's resting arc (identical position) holds — one continuous shot */
.intro.is-leaving { opacity: 0; visibility: hidden; transform: translateY(-1.8%); }

@media (max-width: 700px) {
  .intro__mark { width: min(220px, 56vw); }
  .intro__wordmark, .intro__tag { width: min(208px, 56vw); }
  .intro__rule { width: min(168px, 46vw); }
}
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---- HERO HANDOFF :: hero entrance choreographed to the curtain lift ------
   Everything keys off html.intro-active: while the overlay covers, the hero is
   held in its start state (hidden behind the field); when the controller
   removes the class at lift, the elements transition to their resting state —
   so the title assembling, the skyline blooming and the arc all feel like the
   continuation of the intro, not a separate animation. No-intro paths (internal
   nav, reduced-motion, no-JS) never get the class → content simply present. */
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: block; will-change: transform;
  transition: transform 0.9s var(--bt-ease-cinematic);
}
.hero__title .line:nth-child(1) > span { transition-delay: 0.12s; }
.hero__title .line:nth-child(2) > span { transition-delay: 0.40s; } /* italic lands last */
html.intro-active .hero__title .line > span { transform: translateY(116%); transition: none; }

.hero__frame { transition: transform 1.15s var(--bt-ease-cinematic), filter 1.15s var(--bt-ease-cinematic); }
html.intro-active .hero__frame { transform: scale(1.06); filter: blur(6px); transition: none; }

/* ============================================================================
   SIGNATURE MOMENT :: "THE ORBIT"  ── dial / remove this block to disable ──
   The arc's DRAW now happens in the intro overlay (it inscribes the mark). On
   the hero the arc simply RESTS at a quiet hairline — and because the intro
   arc shares its exact viewBox/path/slice mapping and settles to this same
   opacity before the curtain lifts, the gesture reads as one unbroken line
   carried from the intro into the page. The hero copy & skyline entrance is
   driven by the HERO HANDOFF block above.
   ========================================================================== */
/* the resting arc lives on the porcelain only: it slips UNDER the photo panel
   (z-order) and its left tail fades out of nothing before the scroll cue */
.hero__orbit {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.hero__orbit path {
  fill: none; stroke: url(#orbitFade);
  stroke-width: 1.6; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  opacity: 0;
}
/* resting state — the arc is simply present as a quiet claret hairline */
.hero__orbit path { stroke-dashoffset: 0; opacity: 0.18; }

/* ============================================================================
   LIVELINESS PASS  ── calm, ambient, additive · transform/opacity only ──
   Keeps the page quietly alive between signature moments. Nothing competes
   with reading; every loop is slow, low-contrast and ignorable.
   ========================================================================== */

/* hero photo — barely-there ken-burns drift (≤6% travel, very slow) */
.hero__frame img { animation: bt-kenburns 28s var(--bt-ease-in-out) infinite alternate; transform-origin: 62% 38%; }
@keyframes bt-kenburns { from { transform: scale(1.001); } to { transform: scale(1.055) translate(-1.4%, -1%); } }

/* faint hero globe-mark — slow "breathe" so the field is never dead still */
.hero__mark { animation: bt-globe-breathe 20s var(--bt-ease-in-out) infinite alternate; }
@keyframes bt-globe-breathe { from { transform: translateY(-50%) scale(1); } to { transform: translateY(-50%) scale(1.04); } }

/* eyebrow hairline draws itself in with its reveal */
.reveal .eyebrow::before,
.eyebrow.reveal::before {
  transform-origin: left; transform: scaleX(0);
  transition: transform var(--bt-dur-slow) var(--bt-ease-out) 220ms;
}
.reveal.is-in .eyebrow::before,
.eyebrow.reveal.is-in::before { transform: scaleX(1); }

/* process step — the claret tick extends as the step reveals */
.step .bar::after { transform-origin: left; transform: scaleX(0); transition: transform var(--bt-dur-cine) var(--bt-ease-cinematic) 260ms; }
.step.reveal.is-in .bar::after, .step.is-in .bar::after { transform: scaleX(1); }

/* marquee — soft edge fade so keywords resolve out of nothing (polish) */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* footer links — quiet intent on hover */
.footer__col a { transition: color var(--bt-dur-base) var(--bt-ease-out), transform var(--bt-dur-base) var(--bt-ease-out); }
.footer__col a:hover { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue .line::after { animation: none; }
  .marquee__track { animation: none; }
  .hero__orbit path { stroke-dashoffset: 0; opacity: 0.18; }
  .hero__frame img { animation: none; }
  .hero__frame { transform: none; filter: none; transition: none; }
  .hero__title .line > span { transform: none; transition: none; }
  .hero__mark { animation: none; transform: translateY(-50%); }
  .reveal .eyebrow::before, .eyebrow.reveal::before { transform: scaleX(1); transition: none; }
  .step .bar::after { transform: scaleX(1); transition: none; }
  .footer__col a:hover { transform: none; }
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--bt-space-6); }
  .footer__brand { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--bt-space-7) var(--bt-space-5); }
}
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .hero { display: block; min-height: auto; padding-block: 8rem 0; }
  .hero__col { max-width: none; padding-bottom: 3rem; }
  .hero__visual { position: relative; width: 100%; height: 58vw; min-height: 300px; }
  .hero__visual::before { display: none; }
  .hero__badge { left: 1.4rem; bottom: 1.6rem; }
  .scroll-cue { display: none; }
  .qualities { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media { max-width: 30rem; margin-inline: auto; }
  .contact-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .qualities { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .svc-item { grid-template-columns: 2.8rem 1fr; row-gap: 0.4rem; }
  .svc-item p { grid-column: 2; }
  .svc-head { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .form .row2 { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__meta { gap: 1.2rem 1.8rem; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .cookie { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie .btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   LANG TOGGLE
   Small borderless pill in the nav, matching the Jost label register.
   Sits inside .nav__right between the CTA and the burger; on mobile the CTA
   hides but the toggle stays visible next to the burger.
   Also mirrored inside the mobile drawer for full-menu access.
   ========================================================================== */
.lang-toggle {
  font-family: var(--bt-font-label);
  font-size: var(--bt-text-2xs);
  font-weight: 600;
  letter-spacing: var(--bt-tracking-wide);
  text-transform: uppercase;
  color: var(--bt-ink-700);
  background: none;
  border: 1px solid var(--bt-line-strong);
  border-radius: var(--bt-radius-sm);
  padding: 0.38rem 0.7rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--bt-dur-base) var(--bt-ease-out),
              border-color var(--bt-dur-base) var(--bt-ease-out);
  white-space: nowrap;
  flex-shrink: 0;
}
.lang-toggle:hover,
.lang-toggle:focus-visible {
  color: var(--bt-claret);
  border-color: var(--bt-line-claret);
  outline: none;
}
/* drawer placement */
.drawer-lang {
  margin-top: var(--bt-space-4);
  display: flex;
  align-items: center;
  gap: var(--bt-space-3);
}
.drawer-lang .lang-toggle {
  font-size: var(--bt-text-xs);
  padding: 0.55rem 1rem;
  border-color: var(--bt-line-strong);
}