:root {
  --charcoal: #221F1C;
  --champagne: #B49F86;
  --ivory: #F0EAE3;
  --ivory-muted: rgba(240, 234, 227, 0.64);
  --gold-muted: rgba(180, 159, 134, 0.48);
  --hairline: rgba(180, 159, 134, 0.22);
  --pad-x: clamp(1.35rem, 4vw, 4.75rem);
  --pad-y: clamp(1.25rem, 3.2vw, 3.1rem);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--charcoal);
  color: var(--ivory);
}

html { color-scheme: dark; }

body {
  min-height: 100svh;
  overflow: hidden;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; }

.site-shell {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--charcoal);
}

/* Warm tonal variation: designed to feel material rather than digitally flat. */
.ambient {
  position: absolute;
  inset: -16%;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(240, 234, 227, 0.037), transparent 31%),
    radial-gradient(circle at 18% 20%, rgba(180, 159, 134, 0.027), transparent 34%),
    radial-gradient(circle at 82% 77%, rgba(180, 159, 134, 0.021), transparent 37%),
    linear-gradient(118deg, rgba(255,255,255,0.012), transparent 28%, rgba(180,159,134,0.012) 69%, transparent);
  transform: scale(1.04);
  transition: transform 1800ms cubic-bezier(.16,1,.3,1);
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0.026;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
}

.experience {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--pad-y) var(--pad-x);
}

/*
  Six-point settled capability map:
  top middle: Global Travel Trade
  upper left/right: Sourcing & Procurement / Due Diligence & Compliance
  lower left/right: Supply Chain & Logistics / Market Development
  bottom middle: Trade Orchestration
*/
.capability-field {
  position: absolute;
  inset: 8.5vh 7vw 15.5vh;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  align-items: center;
  pointer-events: none;
}

.capability {
  position: relative;
  display: block;
  margin: 0;
  max-width: min(29vw, 28rem);
  font-size: clamp(0.91rem, 1.18vw, 1.18rem);
  font-weight: 400;
  letter-spacing: 0.038em;
  line-height: 1.3;
  color: var(--champagne);
  opacity: 0;
  visibility: hidden;
  text-wrap: balance;
  will-change: transform, opacity, filter, color;
}

.c1 { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; }
.c2 { grid-column: 3; grid-row: 2; justify-self: end; text-align: right; }
.c3 { grid-column: 1; grid-row: 3; justify-self: start; text-align: left; }
.c4 { grid-column: 3; grid-row: 3; justify-self: end; text-align: right; }
.c5 { grid-column: 1 / -1; grid-row: 1; justify-self: center; text-align: center; }
.c6 { grid-column: 1 / -1; grid-row: 4; justify-self: center; text-align: center; }

.brand-lockup {
  position: relative;
  z-index: 4;
  width: min(1040px, 91vw);
  text-align: center;
  transform: translateY(-0.7vh);
}

.brand-rule,
.brand-kicker,
#brand-title,
.positioning,
.partner-email {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity, filter;
}

.brand-rule {
  display: block;
  width: clamp(2.8rem, 5vw, 4.4rem);
  height: 1px;
  margin: 0 auto 1.45rem;
  background: var(--champagne);
  transform-origin: center;
}

.brand-kicker {
  margin: 0 0 1.35rem;
  font-size: clamp(.58rem, .72vw, .72rem);
  font-weight: 500;
  letter-spacing: .27em;
  text-transform: uppercase;
  color: var(--gold-muted);
}

#brand-title {
  margin: 0;
  padding-left: .16em;
  font-size: clamp(2.35rem, 5.45vw, 5.7rem);
  line-height: 1.03;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champagne);
  text-wrap: balance;
}

.positioning {
  width: min(720px, 86vw);
  margin: 2.2rem auto 0;
  font-size: clamp(.92rem, 1.16vw, 1.08rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .025em;
  color: var(--ivory-muted);
  text-wrap: balance;
}

.partner-email {
  position: relative;
  display: inline-block;
  margin-top: 2.25rem;
  padding: .25rem .05rem .55rem;
  text-decoration: none;
  font-size: clamp(.76rem, .88vw, .88rem);
  font-weight: 400;
  letter-spacing: .095em;
  color: rgba(180, 159, 134, .86);
}

.partner-email::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(.16);
  transform-origin: center;
  opacity: .42;
  transition: transform 420ms cubic-bezier(.16,1,.3,1), opacity 420ms ease;
}

.partner-email:hover::after,
.partner-email:focus-visible::after {
  transform: scaleX(1);
  opacity: .86;
}

.partner-email:focus-visible,
.site-footer a:focus-visible,
.replay:focus-visible {
  outline: 1px solid rgba(180, 159, 134, .58);
  outline-offset: 6px;
}

.site-footer {
  position: absolute;
  z-index: 7;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: max(var(--pad-y), env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-size: .65rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(180, 159, 134, .42);
  opacity: 0;
  visibility: hidden;
}

.site-footer a {
  text-decoration: none;
  color: inherit;
  transition: color 220ms ease;
}

.site-footer a:hover { color: rgba(240,234,227,.76); }

.replay {
  position: absolute;
  top: max(var(--pad-y), env(safe-area-inset-top));
  right: var(--pad-x);
  z-index: 7;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(180,159,134,.42);
  font: inherit;
  font-size: .63rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: color 220ms ease;
}

.replay:hover { color: rgba(240,234,227,.68); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 760px) {
  :root {
    --pad-x: 1.3rem;
    --pad-y: 1.3rem;
  }

  .experience { padding-bottom: 5.35rem; }

  .capability-field {
    inset: 8.5vh 4.5vw 18vh;
    grid-template-columns: 1fr .38fr 1fr;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .capability {
    max-width: 38vw;
    font-size: clamp(.62rem, 2.45vw, .82rem);
    line-height: 1.32;
    letter-spacing: .018em;
  }

  .c5,
  .c6 { max-width: 76vw; }

  .brand-lockup {
    width: 100%;
    transform: translateY(-1.5vh);
  }

  .brand-rule { margin-bottom: 1.15rem; }

  #brand-title {
    padding-left: .11em;
    font-size: clamp(2rem, 10.6vw, 3.55rem);
    letter-spacing: .11em;
    line-height: 1.08;
  }

  .brand-kicker {
    margin-bottom: 1rem;
    font-size: .55rem;
    letter-spacing: .22em;
  }

  .positioning {
    width: min(91vw, 31rem);
    margin-top: 1.65rem;
    font-size: .9rem;
    line-height: 1.6;
  }

  .partner-email {
    margin-top: 1.7rem;
    font-size: .76rem;
    letter-spacing: .075em;
  }

  .site-footer {
    left: var(--pad-x);
    right: var(--pad-x);
    font-size: .56rem;
    letter-spacing: .08em;
  }

  .copyright { display: none; }
  .site-footer { justify-content: flex-end; }
  .replay { font-size: .56rem; }
}

@media (max-width: 430px) {
  .capability { font-size: clamp(.58rem, 2.35vw, .72rem); }
}

@media (max-height: 650px) and (min-width: 761px) {
  .brand-lockup { transform: translateY(-2vh); }
  .positioning { margin-top: 1.4rem; }
  .partner-email { margin-top: 1.4rem; }
  .capability-field { inset: 5.5vh 7vw 12.5vh; }
}

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

  .capability-field { display: none; }
  .brand-rule,
  .brand-kicker,
  #brand-title,
  .positioning,
  .partner-email,
  .site-footer,
  .replay {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
  }

  .replay { display: none; }
}