/* =============================================================================
   INOWA JAPAN
   Design system: warm bone/parchment ground, near-black ink, bronze hairlines.
   Reference vibe: Aman, Haven Japan, Deneb Stories. Quiet, editorial, spacious.
   No framework. Everything below is hand written.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Ground */
  --bone:        #f4f1ea;   /* page background, warm parchment */
  --bone-2:      #ece7dc;   /* alternating band */
  --bone-3:      #e2dccf;   /* placeholder fills */

  /* Ink */
  --ink:         #1b1a18;   /* headlines, buttons */
  --ink-2:       #4a4642;   /* strong body */
  --ink-soft:    #6e6860;   /* body copy, captions */

  /* Accent */
  --bronze:      #a8845c;   /* labels, hairline highlights */
  --bronze-deep: #8a6942;
  --clay:        #8c5a44;   /* rare warm accent */
  --error:       #b82a20;   /* form validation only */
  --error-tint:  rgba(184, 42, 32, 0.045);

  /* Lines */
  --line:        rgba(27, 26, 24, 0.14);
  --line-soft:   rgba(27, 26, 24, 0.08);
  --line-light:  rgba(255, 255, 255, 0.22);

  /* Type */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --sans:    "Jost", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* Metrics */
  --header-h: 78px;
  --wrap: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------ base -- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink-2);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, figure, blockquote, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(168, 132, 92, 0.25); }

:focus-visible {
  outline: 1px solid var(--bronze);
  outline-offset: 4px;
}

/* ------------------------------------------------------------ typography -- */
.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--bronze);
}

.lede {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.9;
  color: var(--ink-soft);
}

.section-head { max-width: 44rem; }
.section-head .display {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  margin-top: 1.6rem;
}
.section-head .lede { margin-top: 1.5rem; }

/* ---------------------------------------------------------------- layout -- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Anchor links land below the fixed header rather than under it */
section[id],
div[id] { scroll-margin-top: var(--header-h); }

.section { padding-block: clamp(5rem, 11vw, 9.5rem); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.band { background: var(--bone-2); }
.hairline { height: 1px; background: var(--line-soft); border: 0; }

/* ---------------------------------------------------------------- header -- */
/* The header is absent on arrival so the opening frame is pure film. It drops
   in as soon as the visitor scrolls, and withdraws again at the very top. */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--header-h);
  background: var(--bone);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.header.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* The header spans the full viewport width (as Aman and Haven do) rather than
   sitting inside the 1280px content column, so the nav has room to breathe. */
.header__inner,
.menu-panel__bar { max-width: none; }

.header__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Left and right groups size to their content; the wordmark is centred on the
   viewport independently, so a long nav can never squash or displace it. */
.header__left {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-width: 0;
}
.header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6rem;
  flex: none;
}

.header .wordmark,
.menu-panel__bar .wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Wordmark ------------------------------------------------------------- */
.wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.24rem;
  color: var(--ink);
}
.wordmark__name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.34em;
  text-indent: 0.34em;   /* optically re-centre the tracked text */
}
.wordmark__sub {
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wordmark--lg .wordmark__name { font-size: 2.4rem; }
.wordmark--lg .wordmark__sub { font-size: 0.66rem; }

/* Menu trigger --------------------------------------------------------- */
.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex: none;
  white-space: nowrap;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.menu-trigger__bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
}
.menu-trigger__bars span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease), width 0.4s var(--ease);
}
.menu-trigger__bars span:nth-child(1) { width: 24px; }
.menu-trigger__bars span:nth-child(2) { width: 16px; }
.menu-trigger:hover .menu-trigger__bars span:nth-child(2) { width: 24px; }
.menu-trigger__label { display: inline; }

/* Header links --------------------------------------------------------- */
.header__nav { display: flex; align-items: center; gap: 1.8rem; flex: none; }
.nav-link {
  position: relative;
  white-space: nowrap;      /* never let a label break across lines */
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  padding-block: 0.35rem;
  transition: color 0.35s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2.2rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.btn--solid { background: var(--ink); color: var(--bone); }
.btn--solid:hover { background: var(--clay); }

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

.btn--light {
  border: 1px solid var(--line-light);
  color: #fff;
}
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Solid light button, used on the dark closing band */
.btn--invert { background: #fff; color: var(--ink); border: 1px solid #fff; }
.btn--invert:hover { background: var(--clay); border-color: var(--clay); color: #fff; }

.btn--sm { padding: 0.85rem 1.6rem; font-size: 0.7rem; }
.btn svg { flex: none; }

/* Quiet text link with rule ------------------------------------------- */
.link-line {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.link-line__rule {
  display: block;
  width: 2.2rem;
  height: 1px;
  background: var(--bronze);
  transition: width 0.5s var(--ease);
}
.link-line:hover .link-line__rule { width: 3.4rem; }

/* ------------------------------------------------------------ menu panel -- */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bone);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
              visibility 0s linear 0.6s;
}
.menu-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.menu-panel__bar {
  position: relative;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.menu-close {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.menu-close__x {
  position: relative;
  width: 20px;
  height: 20px;
}
.menu-close__x::before,
.menu-close__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease);
}
.menu-close__x::before { transform: rotate(45deg); }
.menu-close__x::after { transform: rotate(-45deg); }
.menu-close:hover .menu-close__x::before { transform: rotate(135deg); }
.menu-close:hover .menu-close__x::after { transform: rotate(45deg); }

.menu-panel__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-content: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  overflow-y: auto;
}

.menu-nav { display: flex; flex-direction: column; }
.menu-nav a {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.35;
  color: var(--ink);
  opacity: 0;
  transform: translateY(0.9rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
              color 0.35s var(--ease);
}
.menu-panel.is-open .menu-nav a { opacity: 1; transform: none; }
.menu-nav a:hover { color: var(--bronze-deep); font-style: italic; }

.menu-aside {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(1.5rem, 3vw, 3rem);
}
.menu-aside__group p { font-size: 0.95rem; color: var(--ink-2); }
.menu-aside__group .eyebrow { display: block; margin-bottom: 0.7rem; }
.menu-aside a:hover { color: var(--bronze-deep); }

/* ------------------------------------------------------------------ hero -- */
/* Full viewport: with the header withdrawn, the film owns the whole screen */
.hero {
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: var(--ink);
}

.hero__media,
.hero__layer,
.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The film sits at the very back. `isolation` keeps the two video layers'
   z-indexes contained here, so they stack against each other and never over
   the scrim, the scroll cue or the hero title, which carry no z-index of
   their own and would otherwise be painted underneath them. */
.hero__media {
  z-index: 0;
  isolation: isolate;
}

/* Two stacked video layers cross-fade into one another. The incoming clip
   fades up on top of the outgoing one, which stays opaque underneath, so the
   blend never dips to a darker mid-point the way a true cross-fade does.

   The layer is pinned to whole pixels on its own compositor surface. Without
   this, a video scaled to a fractional size shimmers along fine detail. */
.hero__layer {
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
  transition: opacity var(--hero-fade, 1600ms) linear;
}
.hero__layer.is-active { opacity: 1; }
.hero__layer.is-front { z-index: 2; }

/* The slow drift is for the gradient stand-in only. Applying it to real
   footage made the picture shimmer: continuously rescaling a video by a
   fraction of a pixel each frame sets fine detail crawling. The films carry
   their own movement, so they play at their natural size, rock steady. */
.hero__fallback {
  animation: drift 26s var(--ease) infinite alternate;
}

@keyframes drift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.1); }
}

/* Shown until a real video file is dropped in (see README) */
.hero__fallback {
  background:
    radial-gradient(70% 55% at 22% 18%, rgba(196, 158, 118, 0.5), transparent 62%),
    radial-gradient(60% 60% at 82% 78%, rgba(140, 90, 68, 0.55), transparent 60%),
    linear-gradient(160deg, #2b2723 0%, #171512 55%, #221d19 100%);
}
.hero__fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
  background-size: 26px 26px;
}
.hero.has-video .hero__fallback { display: none; }

/* Everything above the film declares its layer explicitly */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(12, 11, 10, 0.32) 0%, transparent 28%),
    linear-gradient(to top, rgba(12, 11, 10, 0.62) 0%, transparent 46%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* The opening frame carries no words. The title and caption rise into view on
   the first scroll, and settle back out again when the visitor returns to the
   top. The scroll cue does the opposite: it is the only mark on the film. */
.hero__overlay,
.hero__caption {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.hero.is-scrolled .hero__overlay,
.hero.is-scrolled .hero__caption {
  opacity: 1;
  transform: none;
}

.hero__overlay {
  max-width: 46rem;
  color: #fff;
}
.hero__overlay .eyebrow { color: rgba(255, 255, 255, 0.72); }
.hero__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.16;
  margin-top: 1.4rem;
  color: #fff;
  text-shadow: 0 1px 40px rgba(0, 0, 0, 0.35);
}
.hero__title em { font-style: italic; }

.hero__foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.hero__caption {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* Vertical scroll cue (Haven Japan): the word set on its side, a thin arrow
   drifting downward beneath it. ---------------------------------------- */
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  z-index: 3;            /* above the hero's centred text column */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  color: #fff;
  transition: opacity 0.6s var(--ease);
}
.scroll-cue:hover { opacity: 0.7; }
.hero.is-scrolled .scroll-cue { opacity: 0; pointer-events: none; }

/* The cue sits mid-frame, where the scrim does not reach, so it has to hold
   its own against whatever the film is showing: a bright sunset sky washed
   out plain white text completely. A soft shadow keeps it legible over both
   a blown-out sky and a dark alley without adding any visible box. */
.scroll-cue__label {
  writing-mode: vertical-rl;
  font-size: 1.28rem;    /* twice the original 0.64rem */
  letter-spacing: 0.34em;
  text-indent: 0.34em;   /* offset the trailing gap so it reads centred */
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 0 22px rgba(0, 0, 0, 0.45);
}

/* Set in CSS rather than on the SVG so the stroke scales up with it */
.scroll-cue__arrow {
  width: 22px;
  height: 36px;
  overflow: visible;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
  animation: cue 2.8s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(-3px); opacity: 0.45; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

/* Sound toggle for the hero film --------------------------------------- */
.hero__sound {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.5rem, 5vw, 4rem);
  z-index: 3;
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.hero.has-video .hero__sound { display: inline-flex; }
.hero__sound:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ------------------------------------------------------------- statement -- */
.statement { text-align: center; }
.statement .rule-mark {
  width: 1px;
  height: 3.5rem;
  background: var(--bronze);
  margin: 0 auto 2.5rem;
  opacity: 0.6;
}
.statement__text {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 52rem;
  margin: 0 auto;
}
.statement__text em { font-style: italic; color: var(--bronze-deep); }
.statement__sig {
  margin-top: 2.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------------- stats -- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.stat {
  padding: clamp(2rem, 3.5vw, 3rem) 1.5rem;
  text-align: center;
  border-left: 1px solid var(--line-soft);
}
.stat:first-child { border-left: 0; }
.stat__value {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1;
  color: var(--ink);
}
.stat__label {
  margin-top: 0.85rem;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------- experiences -- */
.exp-grid {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3.5vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
}

.exp {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* One link covers the whole card, so the photograph, the title, the text and
   the Enquire line all lead to the enquiry page, while screen readers and the
   keyboard still see a single, properly labelled link. */
.exp__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.exp:hover .exp__title { color: var(--bronze-deep); }
.exp:hover .link-line__rule { width: 3.4rem; }
.exp__title { transition: color 0.4s var(--ease); }
.exp__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone-3);
}
.exp__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.exp:hover .exp__media img { transform: scale(1.05); }

.media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.9rem;
  align-content: center;
  color: rgba(27, 26, 24, 0.3);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.5), transparent 60%),
    linear-gradient(160deg, var(--bone-3), #d6cfc0);
}
.media-placeholder span {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.exp__city {
  margin-top: 1.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze);
}
.exp__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.25;
  margin-top: 0.7rem;
  color: var(--ink);
}
.exp__text {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--ink-soft);
  flex: 1;
}
.exp__tags,
.member__tags {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.exp__tags li,
.member__tags li { display: flex; align-items: center; }
.exp__tags li + li::before,
.member__tags li + li::before {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bronze);
  margin-right: 1.1rem;
}
.exp__link { margin-top: 1.6rem; }

/* ----------------------------------------------------------------- about -- */
.about {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone-3);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.about__body { max-width: 36rem; }
.about__body .display {
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin-top: 1.5rem;
}
.about__paras { margin-top: 1.8rem; display: grid; gap: 1.4rem; }
.about__paras p { color: var(--ink-soft); line-height: 1.9; }
.about__sig {
  margin-top: 2rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--ink);
}
.about__list {
  margin-top: 2.2rem;
  display: grid;
  gap: 0.9rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 1.8rem;
}
.about__list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--ink-2);
}
/* Sits below the highlights, set on its own line so the rule reads as a
   quiet invitation rather than another list item. Larger than the Enquire
   lines on the tour cards, since here it is the only way onward. */
.about__link {
  margin-top: 2rem;
  font-size: calc(0.74rem * 1.6);
}
.about__link:hover { color: var(--bronze-deep); }

.about__list li::before {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1px;
  background: var(--bronze);
  transform: translateY(-0.35rem);
}

/* ------------------------------------------------------------------ team -- */
/* Each person leading Inowa gets a wide row on team.html, reusing .about,
   .portrait and .about__body so the rows match the team band on the home
   page and inherit its responsive behaviour.

   From the second row down, the portrait crosses to the other side and the
   columns mirror with it, so two people of equal standing read as a pair
   rather than as a list. A hairline separates one from the next. */
.team-lead + .team-lead {
  margin-top: clamp(3.5rem, 8vw, 7rem);
  padding-top: clamp(3.5rem, 8vw, 7rem);
  border-top: 1px solid var(--line-soft);
}
.team-lead:nth-child(even) { grid-template-columns: 1fr 0.85fr; }
.team-lead:nth-child(even) .portrait { order: 2; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 2.5vw, 2.5rem);
}

.member { display: flex; flex-direction: column; }
.member__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone-3);
}
.member__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.member:hover .member__media img { transform: scale(1.04); }

.member__role {
  margin-top: 1.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze);
}
.member__name {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.25;
  margin-top: 0.7rem;
  color: var(--ink);
}
.member__text {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--ink-soft);
  flex: 1;
}
.member__text p + p { margin-top: 1rem; }

/* ---------------------------------------------------------------- values -- */
.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.value { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.value__num {
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--bronze);
}
.value__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.45rem;
  margin-top: 1rem;
  color: var(--ink);
}
.value__text {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- itinerary -- */
.itinerary {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.itinerary__aside { align-self: start; position: sticky; top: calc(var(--header-h) + 3rem); }
.day-label {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.2rem;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 0.7rem 1.3rem;
}
.day-label::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bronze);
}

.timeline { border-top: 1px solid var(--line-soft); }
.stop {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.9rem;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left 0.5s var(--ease);
}
.stop:hover { padding-left: 0.6rem; }
.stop__time {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--bronze-deep);
  letter-spacing: 0.06em;
}
.stop__place {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}
.stop__note {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- reviews -- */
.reviews {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}
.review {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
.review__mark {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--bronze);
  opacity: 0.55;
}
.review__quote {
  margin-top: 1.6rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.32rem;
  line-height: 1.6;
  color: var(--ink);
  flex: 1;
}
.review__by {
  margin-top: 2rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.review__by strong { display: block; color: var(--ink); font-weight: 400; margin-bottom: 0.4rem; }

/* --------------------------------------------------------------- gallery -- */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.6rem);
}
/* A hung wall rather than a grid of equal squares. Every tile brings its own
   width (--span), its own frame shape (--ratio) and an optional downward nudge
   (--drop), all set from js/content.js. Tiles sit at the top of their row so
   the frames stagger naturally instead of stretching to match each other. */
.tile {
  grid-column: span var(--span, 3);
  margin-top: var(--drop, 0);
  align-self: start;
}
.tile__frame {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 3);
  overflow: hidden;
  background: var(--bone-3);
}
.tile__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
/* On hover a bronze hairline draws itself across the top edge while the
   photograph creeps closer: the one moment of play in an otherwise still page */
.tile__frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--bronze);
  transition: width 0.9s var(--ease);
  z-index: 2;
}
.tile:hover .tile__frame::after { width: 100%; }
.tile:hover .tile__frame img { transform: scale(1.06); }

.tile__caption {
  margin-top: 0.9rem;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- contact form -- */
.contact { max-width: 46rem; margin: 0 auto; text-align: center; }
.contact__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.15;
  color: var(--ink);
  margin-top: 1.4rem;
}
.contact__intro {
  margin: 1.4rem auto 0;
  max-width: 34rem;
  color: var(--ink-soft);
  line-height: 1.9;
}

/* Bronze rule with a small mountain seal, as on the reference page */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 2.2rem 0 0;
}
.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  width: clamp(3rem, 14vw, 9rem);
}
.ornament::before { background: linear-gradient(to right, transparent, var(--bronze)); }
.ornament::after  { background: linear-gradient(to left,  transparent, var(--bronze)); }
.ornament__seal {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: linear-gradient(150deg, #c19f72, var(--bronze-deep));
  color: var(--bone);
  flex: none;
}

/* Fields ---------------------------------------------------------------- */
.cform {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: left;
  display: grid;
  gap: 1.9rem;
}
.cform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 1.8rem;
}
.cform__field { display: flex; flex-direction: column; }

.cform label {
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin-bottom: 0.7rem;
}
.contact__required {
  margin-top: 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cform input,
.cform select,
.cform textarea {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(168, 132, 92, 0.5);
  border-radius: 0;
  padding: 0.65rem 0.1rem;
  width: 100%;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.cform input::placeholder,
.cform textarea::placeholder { color: rgba(110, 104, 96, 0.65); }

.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

/* The message box is a filled panel, as on the reference */
.cform textarea {
  background: #fdfcfa;
  border: 1px solid rgba(168, 132, 92, 0.34);
  padding: 1.1rem 1.2rem;
  min-height: 12rem;
  line-height: 1.8;
  resize: vertical;
}
.cform textarea:focus { border-color: var(--bronze-deep); }

/* Country code + number sit on one line */
.cform__phone {
  display: grid;
  grid-template-columns: minmax(8.5rem, 12rem) 1fr;
  gap: 1.2rem;
}
.cform select {
  cursor: pointer;
  /* chevron drawn in CSS so no image request is needed */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bronze-deep) 50%),
    linear-gradient(135deg, var(--bronze-deep) 50%, transparent 50%);
  background-position: right 0.85rem center, right 0.5rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.8rem;
}
.cform select option { color: var(--ink); background: var(--bone); }

/* Validation ------------------------------------------------------------ */
.cform__error {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--error);
  margin-top: 0.5rem;
  min-height: 1rem;
}

/* A missing field is ringed in red on all four sides, not just underlined,
   so it is obvious at a glance which ones still need filling in. */
.cform__field.has-error input,
.cform__field.has-error textarea,
.cform__field.has-error select {
  border: 1px solid var(--error);
  background: var(--error-tint);
  padding-left: 0.85rem;
  padding-right: 0.85rem;
  box-shadow: 0 0 0 3px rgba(184, 42, 32, 0.1);
}
.cform__field.has-error textarea { padding: 1.1rem 1.2rem; }
.cform__field.has-error label { color: var(--error); }
.cform__field.has-error input:focus,
.cform__field.has-error textarea:focus { border-color: var(--error); }

.cform__actions {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.cform__actions .btn { min-width: 16rem; }
.cform button[disabled] { opacity: 0.55; cursor: default; }

.cform__status {
  font-size: 0.92rem;
  line-height: 1.8;
  text-align: center;
  color: var(--ink-soft);
  max-width: 34rem;
}
.cform__status.is-ok { color: var(--bronze-deep); }
.cform__status.is-bad { color: var(--error); }
.cform__status a { border-bottom: 1px solid var(--bronze); }

/* Standalone pages (contact, team, the policies) --------------------------
   Only the home page opens on a film. Everywhere else there is nothing to
   protect, so the header is present from the start rather than dropping in
   on the first scroll. */
body:not([data-page="home"]) .header {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
body:not([data-page="home"]) main { padding-top: var(--header-h); }

/* Partners page ----------------------------------------------------------
   The capability list reuses .values from the home page. Only the trade
   contact block below it is new: a row of small labelled details that
   reflows into a column as the screen narrows. */
.trade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.6rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-soft);
}
.trade__label {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze);
}
.trade__value { font-size: 0.95rem; line-height: 1.7; color: var(--ink-2); }
.trade__value a { border-bottom: 1px solid var(--line); }
.trade__value a:hover { color: var(--bronze-deep); border-color: var(--bronze); }

.partners__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Policy pages ----------------------------------------------------------- */
.legal { max-width: 44rem; }
.legal .display {
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin-top: 1.5rem;
}
.legal__body { margin-top: 2.2rem; display: grid; gap: 1.4rem; }
.legal__body p { color: var(--ink-soft); line-height: 1.9; }
.legal__back { margin-top: 3rem; }
.legal__back:hover { color: var(--bronze-deep); }

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

  /* The dialling code stays beside the number on a phone rather than stacking
     above it. The code keeps a fixed, modest column and the number takes
     everything left over, since that is the field being typed into.
     minmax(0, 1fr) is what stops the number field's own intrinsic width from
     pushing the pair wider than the screen. */
  .cform__phone {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.9rem;
  }
  /* Tuck the chevron in so the narrower column shows as much of the country
     name as it can before clipping */
  .cform__phone select {
    padding-right: 1.35rem;
    background-position: right 0.55rem center, right 0.2rem center;
  }

  .cform__actions .btn { width: 100%; min-width: 0; }
}

/* ------------------------------------------------------------------- cta -- */
.cta {
  position: relative;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(168, 132, 92, 0.22), transparent 65%),
    radial-gradient(50% 50% at 85% 100%, rgba(140, 90, 68, 0.24), transparent 60%);
}
.cta > * { position: relative; }
.cta .eyebrow { color: var(--bronze); }
.cta__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.15;
  color: #fff;
  margin: 1.6rem auto 0;
  max-width: 22ch;
}
.cta__text {
  margin: 1.6rem auto 0;
  max-width: 40rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.9;
}
.cta__actions {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.cta__socials {
  margin-top: 3.5rem;
  display: flex;
  justify-content: center;
  gap: 1.6rem;
}
.cta__note {
  margin-top: 2.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease),
              background 0.4s var(--ease);
}
.icon-btn:hover { color: var(--ink); background: #fff; border-color: #fff; }
.icon-btn--dark { border-color: var(--line); color: var(--ink-soft); }
.icon-btn--dark:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ---------------------------------------------------------------- footer -- */
.footer { background: var(--bone); }
.footer__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-soft);
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.footer__nav a:hover { color: var(--ink); }
.footer__socials { display: flex; gap: 0.8rem; justify-content: flex-end; }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.8rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

/* The policy lines sit between the company line and the location, in the
   same small type. Each is quiet text until its page exists, so only the
   ones that lead somewhere answer to the cursor. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
}
.footer__legal a:hover { color: var(--ink); }

/* The trade button, in the footer beside the policy lines and at the foot
   of the menu panel. Smaller than a page button, since in the footer it
   shares a row with the smallest type on the site. */
.btn--trade {
  padding: 0.7rem 1.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

/* ------------------------------------------------------------------- fab -- */
.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.4rem;
  background: var(--ink);
  color: var(--bone);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 12px 40px rgba(27, 26, 24, 0.22);
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
              background 0.4s var(--ease);
}
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover { background: var(--clay); }

/* ---------------------------------------------------------------- motion -- */
.reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1024px) {
  .exp-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  /* On a tablet the six-column wall is too fine to read. Every photograph
     takes half the width and keeps its own shape; the offsets come off so
     the two columns stay level. */
  .tile {
    grid-column: span 3;
    margin-top: 0;
  }
  .about,
  .itinerary { grid-template-columns: 1fr; }
  /* Stacked, every portrait sits above its text: the mirrored row would
     otherwise drop that one person's photograph below their introduction */
  .team-lead:nth-child(even) { grid-template-columns: 1fr; }
  .team-lead:nth-child(even) .portrait { order: 0; }
  .itinerary__aside { position: static; }
  .portrait { max-width: 26rem; }
  .reviews { grid-template-columns: 1fr; }
  .review { padding-top: 1.6rem; }
  .menu-panel__body { grid-template-columns: 1fr; align-content: start; }
  .menu-aside {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding-left: 0;
    padding-top: 2rem;
    margin-top: 2.5rem;
  }
}

/* Below this width the inline links would crowd the centred wordmark, so the
   header falls back to Menu + wordmark + Book Now. Every link still lives in
   the full-screen menu. */
@media (max-width: 1359px) {
  .header__nav { display: none; }
}

@media (max-width: 720px) {
  :root { --header-h: 66px; }
  .menu-trigger__label { display: none; }
  .wordmark__name { font-size: 1.15rem; letter-spacing: 0.28em; text-indent: 0.28em; }
  .wordmark__sub { font-size: 0.46rem; letter-spacing: 0.42em; text-indent: 0.42em; }
  .header .btn { padding: 0.7rem 1rem; font-size: 0.62rem; letter-spacing: 0.14em; }

  /* The cue stays on phones, just smaller and tucked nearer the edge. It can
     never crowd the hero title, because the two swap over: the cue fades out
     on the same scroll that brings the title in. */
  .scroll-cue {
    right: 0.6rem;
    gap: 1rem;
  }
  .scroll-cue__label {
    font-size: 1.1rem;   /* twice the original 0.55rem */
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }
  .scroll-cue__arrow { width: 18px; height: 30px; }

  .hero__sound { bottom: auto; top: calc(1.5rem); }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.2rem; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }

  .exp-grid,
  .team-grid,
  .values { grid-template-columns: 1fr; }
  /* Two even columns on a phone. Each photograph keeps its own shape, so the
     wall still alternates upright and landscape instead of flattening into
     identical squares. The hand-placed offsets are dropped: there is not
     enough width left for them to read as anything but a misalignment. */
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .tile {
    grid-column: span 1;
    margin-top: 0;
  }

  .stop { grid-template-columns: 1fr; gap: 0.4rem; }

  .footer__top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__socials { justify-content: center; }
  .footer__base { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero__fallback { animation: none; transform: none; }
  .scroll-cue__arrow { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}