/* ================================================================
   Manso Travel v06 — Zara / Inditex inspired
   Editorial minimalism: Helvetica, pure white, generous whitespace,
   full-bleed imagery, tiny uppercase detail text.
   ================================================================ */

/* ================================================================
   DESIGN SYSTEM — single source of truth
   ------------------------------------------------------------------
   Colors: pure B/W only.
   Fonts:
     --sans  → Helvetica (UI, body, big display titles at weight 100)
     --serif → Cormorant Garamond Light (editorial accents, chapter
               titles, pull quotes, careers title, next section)
   Type scale (use via .t-* classes):
     t-display  clamp(40, 6vw, 96)   / sans 100  / big hero
     t-title    clamp(26, 2.6vw, 40) / sans 100  / section title
     t-accent   clamp(30, 3.4vw, 48) / serif 300 / pull quote / serif editorial
     t-sub      26px                 / serif 300 / small editorial (value, package)
     t-body     17px                 / sans 200  / standard body
     t-caption  11px uppercase       / sans 200  / nav, CTAs
     t-label    10px uppercase       / sans 200  / crumbs, eyebrows
   Spacing:
     --pad-x       horizontal page margin
     --nav-h       nav bar height
     --gap-section vertical rhythm between sections (100/140 mobile/desktop)
     --gap-block   vertical rhythm within a section
     --crumb-top   absolute y of page crumb (Manso / Section  ·  2026)
     --title-top   absolute y of the first H1 on inner pages
   ================================================================ */
:root {
  /* Color */
  --bg: #ffffff;
  --fg: #000000;
  --muted: #000000;
  --line: rgba(0, 0, 0, 0.12);
  --line-strong: rgba(0, 0, 0, 0.7);

  /* Two-family editorial system:
     ── --serif: Cormorant Garamond Light — display titles only
        (F1), all caps, generous letter-spacing.
     ── --sans:  SF Pro / system-ui — every other text (F2 labels,
        F3 body, form fields, buttons), Ultralight (100). */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono:  var(--sans);

  /* Soft hairline tone — slightly softer than --line, used for
     internal dividers (list items, footer top, values top). */
  --line-soft: rgba(0, 0, 0, 0.14);

  /* Layout */
  --nav-h: 56px;
  --pad-x: clamp(16px, 4vw, 56px);
  --gap-section: clamp(100px, 12vw, 160px);
  --gap-block: clamp(40px, 6vw, 80px);
  --crumb-top: calc(var(--nav-h) + 32px);
  --title-top: calc(var(--nav-h) + 128px);

  /* ── Unified alignment system (every page uses these) ──────────
     pad-a:        horizontal page padding (alias of pad-x).
     pad-b:        vertical page padding inside a viewport block.
     y-title-top:  Y of the first big title across every page.
     y-small-top:  Y of the first line of a small paragraph block.
     x-small-left: X where small paragraphs start (right column).
     w-big:        width of the big-title column (~2/3 inner).
     w-small:      width of the small-paragraph column (= grid col 3).
     ──────────────────────────────────────────────────────────── */
  --pad-a: clamp(16px, 4vw, 56px);
  --pad-b: clamp(80px, 10vh, 128px);
  --y-title-top: calc(var(--nav-h) + 1.7 * var(--pad-b));
  --x-small-left: calc(2 * var(--pad-a) + 2 * (100% - 4 * var(--pad-a)) / 3);
  /* cell-267 ends exactly where cell-48BD starts (= --x-small-left)
     so the big title can never bleed into the small paragraph
     column. */
  --w-big: calc(var(--x-small-left) - var(--pad-a));
  --w-small: calc((100% - 3 * var(--pad-a)) - 2 * (100% - 4 * var(--pad-a)) / 3);

  /* ── THREE TYPE STYLES, ONE FAMILY (Inter). ────────────────────
     F1  super-large mixed case   → display titles
     F2  small uppercase          → nav, footer, eyebrows, labels
     F3  small mixed case         → body paragraphs, form fields,
                                    inline links inside body copy. */
  --f1-size: clamp(28px, 6.78vw, 78px);
  --f1-weight: 100; /* Ultralight — the thinnest standard weight. */
  --f1-lh: 1.05;
  --f1-ls: -0.025em;

  --f2-size: 11px;
  --f2-weight: 200; /* thin — matches v06 original navbar weight */
  --f2-lh: 1.8;
  --f2-ls: 0.22em;

  /* F3 = same size + tracking + weight as the navbar (F2), only
     the case and `text-transform` differ. Three fonts, two sizes
     only, and one weight (200). */
  --f3-size: 11px;
  --f3-weight: 200;
  --f3-lh: 1.8;
  --f3-ls: 0.22em;

  /* Legacy aliases — keep existing rules using f-display / f-body /
     f-ui working without changes. */
  --f-display-size: var(--f1-size);
  --f-display-lh: var(--f1-lh);
  --f-display-ls: var(--f1-ls);
  --f-body-size: var(--f3-size);
  --f-body-lh: var(--f3-lh);
  --f-body-ls: var(--f3-ls);
  --f-ui-size: var(--f2-size);
  --f-ui-lh: var(--f2-lh);
  --f-ui-ls: var(--f2-ls);

  /* ── UNIFORM LINE THICKNESS ─────────────────────────────────
     All hairlines on the site (borders, dividers, input
     underlines, the navbar bottom, button outlines, etc.) use
     this single token so they read as a single visual rule. */
  --hairline: 1px;

  /* Motion */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  /* Reserve space for the scrollbar on every page so the navbar
     never shifts horizontally between pages that scroll (home,
     about) and pages that don't (deck). overflow-y: scroll forces
     the scrollbar to always be rendered; scrollbar-gutter is the
     modern fallback for browsers that respect it. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  /* Default body inherits F3 (small, mixed case) — every element
     that doesn't explicitly opt into F1 or F2 will look like F3. */
  font-weight: var(--f3-weight);
  font-size: var(--f3-size);
  line-height: var(--f3-lh);
  letter-spacing: var(--f3-ls);
  text-transform: none;
}

/* Strict utility classes — only three text styles on the entire site. */
.t-f1 {
  font-family: var(--sans);
  font-weight: var(--f1-weight);
  font-size: var(--f1-size);
  line-height: var(--f1-lh);
  letter-spacing: var(--f1-ls);
  text-transform: none;
}
.t-f2 {
  font-family: var(--sans);
  font-weight: var(--f2-weight);
  font-size: var(--f2-size);
  line-height: var(--f2-lh);
  letter-spacing: var(--f2-ls);
  text-transform: uppercase;
}
.t-f3 {
  font-family: var(--sans);
  font-weight: var(--f3-weight);
  font-size: var(--f3-size);
  line-height: var(--f3-lh);
  letter-spacing: var(--f3-ls);
  text-transform: none;
}

/* Body is a vertical flex column with min-height = viewport, so the
   footer (last child) always sits at the bottom of the viewport on
   short pages and naturally below the content on long pages. The
   footer is never higher than the viewport's bottom edge. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body > .footer {
  margin-top: auto;
}

/* ================================================================
   TERMS PAGE — single long uppercase paragraph in the navbar/footer
   font, padded edge to edge.
   ================================================================ */

.terms {
  padding: calc(var(--nav-h) + clamp(80px, 10vh, 128px))
    var(--pad-x)
    calc(var(--terms-footer-h, 116px) + clamp(80px, 10vh, 128px));
}
.terms__copy {
  /* Body font system — Inter weight 200, mixed case, generous size. */
  font-family: var(--sans);
  font-size: var(--f-body-size);
  line-height: var(--f-body-lh);
  letter-spacing: var(--f-body-ls);
  font-weight: 200;
  text-transform: none;
  color: var(--fg);
  margin: 0;
  max-width: 100%;
}

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

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

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

/* ================================================================
   Typography — type scale (single source of truth)
   ================================================================ */

/* Big display (hero). SANS ultralight. */
.t-display {
  font-family: var(--sans);
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 100;
  margin: 0;
}

/* Section title. SANS ultralight (matches About chapter titles). */
.t-title {
  font-family: var(--sans);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 100;
  margin: 0;
}

/* Editorial accent — pull quote, next section, careers title when serif. */
.t-accent {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.2;
  letter-spacing: 0.005em;
  font-weight: 300;
  margin: 0;
}

/* Small editorial — value titles, package titles. */
.t-sub {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-weight: 300;
  margin: 0;
}

/* Body paragraph. */
.t-body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 200;
  max-width: 55ch;
}

/* Caption — nav links, CTAs, small uppercase. */
.t-caption {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 200;
}

/* Label — crumbs, eyebrows (tiny uppercase). */
.t-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 200;
  color: var(--muted);
}

/* ================================================================
   NAV
   ================================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  /* Truly transparent + slight blur. On home, the hero image is
     visible through the navbar with a soft blur. On other pages,
     the body is white, so the nav reads as white naturally. */
  background: transparent;
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 0;
  z-index: 100;
}

.nav.nav--bordered {
  border-bottom: 0;
}

/* Transparent nav (used on home) — very subtle blur, no background fill */
.nav.nav--transparent {
  background: transparent;
  backdrop-filter: saturate(1.1) blur(3px);
  -webkit-backdrop-filter: saturate(1.1) blur(3px);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.nav__brand img {
  display: block;
  height: 10px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 2px;
  transition: opacity 200ms var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__toggle {
  display: none;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav__toggle span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--fg);
  transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}

@media (max-width: 720px) {
  .nav__links {
    display: none;
  }
  .nav__toggle {
    display: inline-flex;
  }
  .nav--open .nav__links {
    display: flex;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px var(--pad-x) 32px;
    /* Always solid white — no blur, no translucency. */
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--line);
    gap: 18px;
  }
  .nav--open .nav__toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav--open .nav__toggle span:nth-child(2) {
    opacity: 0;
  }
  .nav--open .nav__toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* ================================================================
   HERO
   ================================================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
  /* Hero sits at page top; fixed transparent nav floats above it */
  margin-top: 0;
}

/* The whole hero is a link to About; image + overlay live inside it. */
.hero__link {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  text-decoration: none;
}

.hero__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Static — no pan, no zoom, no animation. */
  transform: none;
  animation: none;
}

@keyframes slow-pan {
  0% {
    transform: scale(1.15) translate(-1.5%, -1%);
  }
  50% {
    transform: scale(1.22) translate(1.2%, 1.4%);
  }
  100% {
    transform: scale(1.18) translate(-0.6%, 0.8%);
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 70%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

.hero__chrome {
  position: absolute;
  inset: 0;
  padding: calc(var(--nav-h) + 24px) var(--pad-x) 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}

.hero__eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.hero__tagline {
  max-width: 460px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.7;
}

.hero__index {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: right;
}

.hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  transition: background 300ms var(--ease), color 300ms var(--ease);
}

.hero__cta:hover {
  background: #fff;
  color: #000;
}

.hero__cta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Minimal arrow icon — leads into the site */
.hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: #000;
  transition: transform 500ms var(--ease), opacity 300ms var(--ease);
}
.hero__arrow svg {
  width: 44px;
  height: 44px;
}
.hero__arrow:hover {
  transform: translateX(8px);
  opacity: 0.85;
}

.hero__meta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.8;
}

/* ================================================================
   PAGE CRUMB — shared element anchored at the same top position
   on every inner page (Manso / Section left + year right)
   ================================================================ */

.page-crumb {
  position: absolute;
  top: var(--crumb-top);
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 10;
  pointer-events: none;
}
.page-crumb strong {
  color: var(--fg);
  font-weight: 200;
}

/* ================================================================
   PAGE HEADER (inner pages)
   ================================================================ */

.page-header {
  padding: calc(var(--nav-h) + 96px) var(--pad-x) 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 900px) {
  .page-header {
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
    padding-top: calc(var(--nav-h) + 120px);
    padding-bottom: 120px;
  }
  .page-header__crumb {
    grid-column: 1 / span 12;
  }
  .page-header__title {
    grid-column: 1 / span 8;
  }
  .page-header__aside {
    grid-column: 10 / span 3;
    align-self: end;
  }
}

.page-header__crumb {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 40px;
}

.page-header__crumb strong {
  color: var(--fg);
  font-weight: 200;
}

/* ================================================================
   SECTIONS
   ================================================================ */

/* Page rhythm — every section uses the same vertical breathing as .chapter */
.section {
  padding: var(--gap-section) var(--pad-x);
}

.section--tight {
  padding-top: 0;
}

.section--bleed {
  padding: 0;
}

.section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 60px;
}

@media (min-width: 900px) {
  .section__head {
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
    margin-bottom: 80px;
  }
  .section__head-label {
    grid-column: 1 / span 2;
  }
  .section__head-title {
    grid-column: 3 / span 7;
  }
  .section__head-aside {
    grid-column: 10 / span 3;
    align-self: end;
  }
}

/* ================================================================
   COLLECTION GRID (services as product tiles)
   ================================================================ */

.collection {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

@media (min-width: 720px) {
  .collection {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .collection--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f2f0ec;
}

.tile__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f2f0ec;
}

.tile__media img,
.tile__media .tile__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 900ms var(--ease), filter 600ms var(--ease);
}

.tile:hover .tile__media img,
.tile:hover .tile__bg {
  transform: scale(1.04);
  filter: contrast(1.05);
}

.tile__caption {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 4px 8px;
}

.tile__num {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}

.tile__label {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.tile__arrow {
  width: 20px;
  height: 20px;
  transition: transform 400ms var(--ease);
}

.tile:hover .tile__arrow {
  transform: translate(4px, -4px);
}

/* ================================================================
   SPLIT (image + text block)
   ================================================================ */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .split--reverse {
    direction: rtl;
  }
  .split--reverse > * {
    direction: ltr;
  }
}

.split__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.split__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 520px;
}

.split__kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ================================================================
   VALUES GRID
   ================================================================ */

.values-section {
  background: #ffffff;
  /* top matches the top gap (small paragraph → values).
     bottom is collapsed so that the gap to the big paragraph of block 4
     (which already reserves 1.7 × pad-b above its cell-267) equals the
     top gap visually.
     A small horizontal inset (--values-edge-gap) keeps the outer black
     hover boxes from reaching the viewport edge. Text alignment to the
     page padding is restored per value below. */
  --values-edge-gap: 16px;
  padding: clamp(80px, 10vh, 140px) var(--values-edge-gap) 0;
  box-sizing: border-box;
}

.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 720px) {
  .values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .values {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 720px) {
  .values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .values {
    grid-template-columns: repeat(4, 1fr);
  }
}

.value {
  /* Inner cells have symmetric horizontal padding so the hover boxes
     have breathing room. Outer cells (4n+1 / 4n in the 4-col layout,
     odd / even in the 2-col layout) zero out their outer side so the
     first letter of their text lands exactly on the page padding
     line — same alignment as the big titles and small paragraphs. */
  padding: 28px 28px;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  color: var(--fg);
  transition: background 350ms var(--ease), color 350ms var(--ease);
  min-height: 180px;
  box-sizing: border-box;
}

.value {
  transition: transform 350ms var(--ease);
  transform-origin: center center;
}
/* Hover — no background, no colour change. The cell scales up 10 %
   from its centre (forward, equally on every side). */
.value:hover {
  transform: scale(1.1);
}

/* Outer columns: zero out their outer padding so the first letter
   of text in the first column starts exactly at var(--pad-a) (same
   as every big title) and the last letter of text in the last column
   ends exactly at var(--pad-a) from the right (same as every small
   paragraph). The grid is positioned at pad-a by the parent .values. */
@media (min-width: 1100px) {
  .value:nth-child(4n + 1) { padding-left: 0; }
  .value:nth-child(4n)     { padding-right: 0; }
}
@media (min-width: 720px) and (max-width: 1099.98px) {
  .value:nth-child(odd)  { padding-left: 0; }
  .value:nth-child(even) { padding-right: 0; }
}
@media (max-width: 719.98px) {
  .value { padding-left: 0; padding-right: 0; }
}

.value__title {
  /* Same as the navbar text — short label → UPPERCASE. */
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 200;
  margin: 0;
}

.value__body {
  /* Same font system as the navbar — paragraph → mixed case. */
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.22em;
  text-transform: none;
  font-weight: 200;
  margin: 0;
}

/* ================================================================
   PARTNERS MARQUEE
   ================================================================ */

.partners {
  padding: 80px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.partners__rail {
  display: flex;
  width: max-content;
  gap: 60px;
  animation: marquee 80s linear infinite;
}

.partners__item {
  font-size: 20px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 200;
  white-space: nowrap;
  color: var(--fg);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ================================================================
   PACKAGE (base + add-ons)
   ================================================================ */

.package {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}

@media (min-width: 900px) {
  .package {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

.package__col {
  border-top: 1px solid var(--fg);
  padding-top: 24px;
}

.package__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}

.package__title h3 {
  /* t-accent — Base Package / Add Ons column headers like pull quotes */
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: 0.005em;
  text-transform: none;
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
}

.package__title span {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}

.package__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.package__list li {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.package__list li::before {
  content: counter(pkg, decimal-leading-zero);
  counter-increment: pkg;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.22em;
  align-self: center;
  margin-right: 16px;
}

.package__list {
  counter-reset: pkg;
}

/* ================================================================
   CONTACT
   ================================================================ */

.contact {
  position: relative;
  padding: var(--title-top) var(--pad-x) var(--gap-section);
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}

@media (min-width: 900px) {
  .contact {
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
    padding-top: var(--title-top);
  }
  .contact__lead {
    grid-column: 1 / span 5;
  }
  .contact__form {
    grid-column: 7 / span 6;
  }
}

.contact__phorn {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-top: 48px;
  opacity: 0.85;
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.contact__info a {
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: opacity 200ms;
}

.contact__info a:hover {
  opacity: 0.6;
}

/* v03-style social icons: outline by default, filled on hover */
.v03-socials {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.v03-social {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  color: var(--fg);
}

.v03-social__outline,
.v03-social__filled {
  position: absolute;
  inset: 0;
  transition: opacity 200ms var(--ease);
}

.v03-social__filled {
  opacity: 0;
}

.v03-social:hover .v03-social__outline {
  opacity: 0;
}

.v03-social:hover .v03-social__filled {
  opacity: 1;
}

.v03-social svg {
  width: 100%;
  height: 100%;
  display: block;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 600px) {
  .form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form__field label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.form__field input,
.form__field textarea {
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 10px 0;
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  transition: border-color 200ms var(--ease);
  resize: vertical;
}

.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-bottom-color: var(--fg);
}

.form__field textarea {
  min-height: 120px;
}

.form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  background: #000;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 240ms var(--ease), color 240ms var(--ease);
}

.form__submit:hover {
  background: #fff;
  color: #000;
  box-shadow: inset 0 0 0 1px #000;
}

.form__submit svg {
  width: 14px;
  height: 14px;
}

.form__msg {
  font-size: 13px;
  margin-top: 12px;
  color: var(--muted);
}

.form__msg--ok {
  color: #000;
}

/* ================================================================
   STATEMENT (big editorial text)
   ================================================================ */

.statement {
  padding: 140px var(--pad-x);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 900px) {
  .statement {
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
    padding: 180px var(--pad-x);
  }
  .statement__label {
    grid-column: 1 / span 2;
    align-self: start;
    padding-top: 14px;
  }
  .statement__text {
    grid-column: 3 / span 8;
  }
}

.statement__text {
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 200;
  margin: 0;
}

/* ================================================================
   FULL IMAGE BAND
   ================================================================ */

.band {
  width: 100%;
  height: 80vh;
  min-height: 520px;
  background-size: 110%;
  background-position: 50% 50%;
  animation: band-pan 18s ease-in-out infinite alternate;
  will-change: background-size, background-position;
}

.band--full {
  height: 100vh;
  min-height: 640px;
}

@keyframes band-pan {
  0% {
    background-size: 110%;
    background-position: 46% 48%;
  }
  50% {
    background-size: 118%;
    background-position: 54% 52%;
  }
  100% {
    background-size: 113%;
    background-position: 48% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .band {
    animation: none !important;
    background-size: cover;
    background-position: center;
  }
}

/* Plate — centered framed image, magazine-lámina treatment.
   Generous white margins, small italic caption below. */
.plate {
  padding: 80px var(--pad-x) 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.plate__frame {
  width: min(880px, 70vw);
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
}
.plate__caption {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  max-width: 40ch;
  line-height: 1.6;
}
@media (min-width: 900px) {
  .plate {
    padding: 120px var(--pad-x);
    gap: 28px;
  }
}

/* ================================================================
   NEXT SECTION — scroll-down cue at end of each page (Zara-style)
   Big centered title of next section + vertical hairline that grows.
   ================================================================ */

.next {
  padding: 120px var(--pad-x) 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: background 300ms var(--ease);
}

.next:hover .next__title {
  letter-spacing: 0.005em;
}
.next:hover .next__line {
  height: 90px;
}

.next__title {
  /* SERIF Cormorant — 15% smaller than the previous 10%-reduced size
     (27 × 0.85 = 22.95 / 3.06 × 0.85 = 2.601 / 43 × 0.85 = 36.55).
     Mixed case (no uppercase). */
  font-family: var(--serif);
  font-size: clamp(22.95px, 2.601vw, 36.55px);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-transform: none;
  font-weight: 300;
  margin: 0;
  transition: letter-spacing 400ms var(--ease);
}

.next__cue {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg);
  margin-top: 8px;
}

.next__line {
  display: block;
  width: 1px;
  height: 70px;
  background: var(--fg);
  margin-top: 8px;
  transition: height 500ms var(--ease);
}

/* ================================================================
   FOOTER — Zara-style: two centered rows, minimal, airy
   ================================================================ */

.footer {
  background: #ffffff;
  color: #000;
  /* Visually-balanced vertical padding (text baseline carries
     extra space below, so a smaller top inset reads as equal). */
  padding: 28px var(--pad-x) 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 32px;
}

.footer__col {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.footer__col--left {
  justify-self: start;
}

.footer__col--center {
  justify-self: center;
  text-align: center;
}

.footer__col--right {
  justify-self: end;
  gap: 28px;
}

.footer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 10% larger than before: 13 × 1.1 ≈ 14.3. */
  width: 14.3px;
  height: 14.3px;
  color: var(--fg);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
}

.footer__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
}

.footer__icon:hover {
  transform: translateY(-3px) scale(1.12);
  opacity: 0.7;
}

.footer__copy {
  /* F2 — small uppercase, Inter 200, 11px, 0.22em tracking. Same
     across the site so labels read as one type style. */
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 200;
  margin: 0;
  white-space: nowrap;
}

.footer__col--right a {
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 200;
  display: inline-block;
  transition: opacity 200ms,
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}

.footer__col--right a:hover {
  opacity: 0.7;
  transform: translateY(-3px);
}

@media (max-width: 720px) {
  .footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 24px;
  }
  .footer__col--left,
  .footer__col--center,
  .footer__col--right {
    justify-self: center;
  }
}

/* ================================================================
   UTILS
   ================================================================ */

.u-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

.u-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Serif utility for editorial accents — Cormorant Garamond Light (300) */
.u-serif {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.02em;
}
.u-serif-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
}

.u-mono-eyebrow {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.u-divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero__img,
  .partners__rail {
    animation: none !important;
  }
  .u-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ================================================================
   UNIFIED VIEWPORT BLOCKS — same alignment everywhere.
   Every "viewport block" (about's text frames, services hero, contact
   landing, terms/privacy intro, etc.) inherits the same rhythm:
   – padding-top  = 1.7 · pad-b   → big title sits at Y_TITLE_TOP
   – padding-bottom = pad-b       → small text sits Y_BOTTOM_PAD above
   – padding-x   = pad-a          → consistent horizontal margins
   The big title is anchored top-left (column A through line 3); the
   small paragraph is anchored bottom-right (column 3 through line B).
   ================================================================ */

.vw-block {
  position: relative;
  /* Each section is at least 100 vh so the bottom-anchored small
     paragraph in every block lands at the same Y offset from the
     section bottom — vp1 and vp2 align horizontally on a shared
     line. */
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(1.7 * var(--pad-b)) var(--pad-a) calc(1.7 * var(--pad-b));
  box-sizing: border-box;
  background: var(--bg);
  color: var(--fg);
}

/* Big title — IN FLOW at the top-left, original 1.20 × w-big width.
   The fixed margin-bottom below produces the SAME visual gap between
   big and small in every vw-block, regardless of how many lines the
   title runs. */
.cell-267 {
  position: relative;
  width: calc(var(--w-big) * 1.20);
  margin: 0 0 var(--gap-big-to-small, clamp(67px, 9.8vh, 126px)) 0;
  z-index: 2;
}
.vw-block--narrow .cell-267 {
  width: var(--w-big);
}
.cell-267__text {
  font-family: var(--sans);
  /* Display title: Inter ultralight 100. */
  font-size: clamp(25.2px, 6.78vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 100;
  color: var(--fg);
  margin: 0;
}

/* Small paragraph — IN FLOW directly below the big title. vp2's
   default sits against the LEFT padding. vp1 and vp4 push to the
   RIGHT with auto-margin so they stay in flow (consistent gap from
   the title's bottom is preserved by cell-267 margin-bottom). The
   cell-art illustration (z-index 1) sits behind the small paragraph
   (z-index 2) wherever they overlap. */
.cell-48BD {
  position: relative;
  width: calc(var(--w-small) * 1.15);
  margin: 0;
  z-index: 2;
}
.vw-block--first .cell-48BD,
.vw-block--narrow .cell-48BD {
  margin-left: auto;
}
.cell-48BD__text {
  font-family: var(--sans);
  /* Same font system as the navbar — Inter weight 200, 11 px,
     0.22em letter-spacing. Mixed case (no uppercase) for paragraphs. */
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.22em;
  text-transform: none;
  font-weight: 200;
  color: var(--fg);
  margin: 0;
}

/* First-block override — block 1 of any page sits right under the
   nav, so the top padding absorbs the navbar height. cell-267 is in
   flow now, so the padding alone positions it correctly. */
.vw-block--first {
  padding-top: calc(var(--nav-h) + 1.7 * var(--pad-b));
}

/* ── Scroll-reveal animation ────────────────────────────────────
   When a section (.vw-block, .values-vw, .vw-image) enters view,
   the IntersectionObserver in main.js adds .is-in-view, which
   fades the cell content in with a small upward translate. The
   stagger between title and small paragraph gives life without
   feeling busy. */

/* Sections are always visible from first paint. Movement between
   pages is handled exclusively by page-transition.js (slide-up /
   slide-down of the entire body). No per-section fade-in — what is
   on screen rides up with the rest, no second effect on top. */


/* ================================================================
   GATE — password screen. Lives in deck.html and is also injected
   into the rising transition panel on every other page.
   ================================================================ */

.gate {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.gate[hidden] { display: none; }
.gate__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(360px, 84vw);
}
.gate__label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 300;
  color: var(--fg);
}
.gate__row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.gate__input {
  flex: 1 1 auto;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 200;
  letter-spacing: 0.06em;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  outline: none;
  transition: border-color 200ms ease;
}
.gate__input:focus { border-bottom-color: var(--fg); }

.gate__submit {
  margin-left: 14px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--fg);
  cursor: pointer;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  transition: transform 250ms var(--ease);
}
.gate__submit svg {
  width: 28px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  display: block;
  overflow: visible;
  transform: translateY(6px);
}
.gate__submit:hover { transform: translateX(3px); }

.gate__toggle {
  position: absolute;
  right: 56px;
  bottom: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 200ms ease, color 200ms ease;
}
.gate__toggle:hover { opacity: 1; color: var(--fg); }
.gate__toggle .gate__icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}
.gate__toggle .gate__icon--eye      { display: block; }
.gate__toggle .gate__icon--eye-off  { display: none;  }
.gate__toggle[aria-pressed="true"] .gate__icon--eye      { display: none;  }
.gate__toggle[aria-pressed="true"] .gate__icon--eye-off  { display: block; }

.gate__error {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 300;
  color: var(--muted);
  min-height: 12px;
}
.gate.is-error .gate__input {
  border-bottom-color: var(--fg);
  animation: gate-shake 320ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes gate-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* Custom dot cursor removed — using the native pointer everywhere. */
.cursor { display: none !important; }

/* ================================================================
   CROSS-DOCUMENT VIEW TRANSITIONS
   ----------------------------------------------------------------
   Browsers that support cross-document view transitions (Chrome
   126+, Safari 18+, Edge 126+) will automatically crossfade
   between pages on same-origin navigation — no white flash, no
   scripts re-running visibly. Older browsers fall back to normal
   navigation (which still works fine via page-transition.js).
   ================================================================ */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
/* The navbar and footer keep their identity across pages so they
   feel pinned during the crossfade instead of fading. */
.nav { view-transition-name: nav; }
.footer { view-transition-name: footer; }
::view-transition-old(nav),
::view-transition-new(nav),
::view-transition-old(footer),
::view-transition-new(footer) {
  animation-duration: 0ms;
}

/* ================================================================
   NEXT-PAGE CTA — same visual treatment as the contact submit
   button (outlined → fills on hover) for consistency.
   ================================================================ */
.next-cta {
  padding: clamp(48px, 7vh, 88px) var(--pad-x) clamp(40px, 6vh, 72px);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Partner badges — Embark Beyond + Virtuoso, centred above the
   Services CTA. Logos rendered in greyscale so they sit on the
   monochrome editorial palette. Sized independently: Embark's
   wordmark fills its frame edge-to-edge, while Virtuoso's lettering
   is a smaller fraction of its frame, so the Virtuoso logo is sized
   larger overall to bring its letterforms up to the same visual
   weight as Embark's. The space above the row equals the space
   between values-vw and vp4's title (1.7 × pad-b on each side =
   3.4 × pad-b total) so the rhythm of the long scroll is preserved. */
.partners {
  margin-top: 0;
  /* Top padding pushes "a member of" further below vp4's small
     paragraph (1.7 × pad-b base, +30 %, +40 % cumulative ≈ 3.1×). */
  padding: calc(3.1 * var(--pad-b)) var(--pad-x) 0;
  /* Override the older marquee `.partners` rule's hairlines — this
     row is a clean, borderless logo pair. */
  border: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Distance between "a member of" and the logos = same as the
     distance between the logos and the Services button below
     (next-cta padding-top: clamp(48px, 7vh, 88px)). */
  gap: clamp(48px, 7vh, 88px);
}
.partners__lede {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--f-ui-size);
  line-height: var(--f-ui-lh);
  letter-spacing: var(--f-ui-ls);
  text-transform: uppercase;
  font-weight: 200;
  color: var(--fg);
  text-align: center;
}
.partners__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
}
.partners__logo {
  width: auto;
  display: block;
  object-fit: contain;
  filter: grayscale(100%) contrast(1.05);
}
.partners__logo--embark {
  /* Bumped a further 30 % (was clamp(36, 4.4vh, 52)). */
  height: clamp(47px, 5.7vh, 68px);
}
.partners__logo--virtuoso {
  /* Bumped another 30 % (was clamp(83, 10.4vh, 120)) so its
     lettering reads at the same weight as Embark's wordmark. */
  height: clamp(108px, 13.5vh, 156px);
  /* Lifted upward so the baseline of Virtuoso's lettering aligns
     with the baseline of Embark's lettering — Virtuoso's PNG has
     transparent space above the wordmark which would otherwise
     drop its visible letters below Embark's. */
  transform: translateY(-12%);
}
.next-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--fg);
  font-family: var(--sans);
  font-size: var(--f-ui-size);
  letter-spacing: var(--f-ui-ls);
  text-transform: uppercase;
  font-weight: 200;
  color: var(--fg);
  text-decoration: none;
  transition: background 250ms ease, color 250ms ease;
}
.next-cta__btn:hover { background: var(--fg); color: var(--bg); }
.next-cta__btn svg { width: 14px; height: 14px; stroke: currentColor; }

/* ================================================================
   GLOBAL HAIRLINES — footer and values grid get a top hairline so
   the editorial blocks read as separated, not floating.
   ================================================================ */
.footer {
  border-top: var(--hairline) solid var(--line-soft);
}
/* Footer variant — no icons in the left column (used on contact, where
   socials already live inline next to the frontdesk row). */
.footer--no-icons .footer__col--left { display: none; }
.footer--no-icons {
  grid-template-columns: 1fr auto;
}
.footer--no-icons .footer__col--center { justify-self: start; text-align: left; }
.values-vw {
  position: relative;
}

/* ================================================================
   PACKAGE LIST DIVIDERS — services package columns get a hairline
   between every list item so the lists read as a structured menu,
   not a loose word list.
   ================================================================ */
.package-col__list li {
  padding: clamp(8px, 1.2vh, 14px) 0;
  border-bottom: var(--hairline) solid var(--line-soft);
}
.package-col__list li:first-child {
  border-top: var(--hairline) solid var(--line-soft);
}

/* ================================================================
   CONTACT FRONTDESK — hairline above the frontdesk block (label,
   phone, email, socials) so it reads as a footer-style detail row
   inside the contact viewport. Mirrors the v07 treatment.
   ================================================================ */
.cell-48BD--frontdesk {
  border-top: var(--hairline) solid var(--line-soft);
  padding-top: clamp(16px, 2vh, 28px);
}

/* ================================================================
   GLOBAL REVEAL — sections are visible from first paint. The View
   Transitions API (or page-transition.js veil on browsers without
   support) already crossfades between pages, so a per-section
   fade-in stacks a second animation on top and reads as a glitch.
   The IntersectionObserver in main.js still toggles .is-in-view in
   case any sub-component wants to react, but no global fade-in is
   tied to it.
   ================================================================ */
.vw-block, .values-vw, .vw-image, .package-vw {
  opacity: 1;
  transform: none;
}
/* Values + package columns visible from first paint — no per-cell
   stagger that would conflict with the cross-document crossfade. */
.values-vw .value {
  opacity: 1;
  transform: none;
}
.values-vw .value:hover {
  transform: scale(1.1);
  z-index: 2;
}

.package-vw .package-col {
  opacity: 1;
  transform: none;
}

/* ================================================================
   PHONE LANDSCAPE — viewport >720px wide but only ~375px tall.
   Without this block the desktop hero rules apply (scale 1.15 +
   slow-pan + min-height 400px) and the image leaves a white strip
   instead of filling. Bring back the mobile-style hero so rotating
   the phone keeps the same edge-to-edge fill as portrait.
   ================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
  }
  .hero__img {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    animation: none !important;
    background-size: cover !important;
    background-position: center !important;
  }
  body:has(.hero) .nav {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: saturate(1.6) blur(22px) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(22px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vw-block, .values-vw, .vw-image, .package-vw,
  .vw-block .cell-267, .vw-block .cell-48BD, .vw-block .cell-art,
  .values-vw .value, .package-vw .package-col {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cursor { display: none; }
}

/* ================================================================
   MOBILE OVERHAUL ( ≤ 720px )
   ----------------------------------------------------------------
   The desktop layout positions every cell absolutely inside fixed
   100vh viewports — that breaks on narrow screens (overlap, tiny
   text, content trapped off-screen). On mobile we collapse the
   absolute grid into a natural vertical flow, bump the body type
   to a readable size, and tighten spacing.
   These rules sit at the end of the stylesheet and use !important
   selectively so they override the inline <style> blocks declared
   in each page's <head>.
   ================================================================ */
@media (max-width: 720px) {
  :root {
    --pad-x: 22px;
  }

  /* Viewport blocks: drop the 100vh constraint, let content set the
     height. Convert the absolute-positioned children to natural
     vertical flow with comfortable spacing between them. */
  .vw-block,
  .vw-block--first,
  .values-vw,
  .package-vw {
    min-height: 0 !important;
    height: auto !important;
    padding: 48px var(--pad-x) 48px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .vw-block--first {
    padding-top: calc(var(--nav-h) + 32px) !important;
  }

  /* Cells flow naturally: full width, no absolute positioning. */
  .cell-267,
  .cell-48BD,
  .cell-art {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    max-width: none !important;
  }
  /* About illustrations on mobile: image renders at its natural
     aspect ratio inside a flexible container — no fixed aspect, no
     overflow clipping. The image's max-width caps it on tablet,
     full width on phone. No transforms (those only apply on
     desktop where the absolute layout positions the cell). */
  .cell-art {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  .cell-art img {
    width: 100% !important;
    max-width: 280px !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    transform: none !important;
    display: block !important;
  }

  /* Full-bleed hero image on about: cover with bottom anchor so the
     foreground furniture is visible instead of cropping into a
     random corner of the studio. */
  .vw-image {
    height: 50vh !important;
    min-height: 50vh !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Display title — keep ultralight but cap so it never dwarfs the
     viewport. Reduced another 15 % (24 → 20 px floor / 34 → 29 px
     cap) so the Cormorant uppercase sits as a controlled headline
     instead of a hero. */
  .cell-267__text,
  .svc-caption-title,
  .careers__title {
    font-size: clamp(20px, 5.8vw, 29px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
  }

  /* Service card titles (mobile expandable list) — match the value
     titles' Cormorant uppercase treatment so the two list patterns
     read as the same family. */
  .svc-card__title {
    font-family: var(--serif) !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  /* Partners block — scale the lede + logos down on mobile so they
     don't dominate the foot of the page; keep the same vertical
     rhythm as the rest of the long scroll. */
  .partners {
    padding: clamp(96px, 18vh, 160px) var(--pad-x) 0 !important;
    gap: clamp(28px, 5vh, 48px) !important;
  }
  .partners__row {
    gap: clamp(20px, 4vw, 36px) !important;
  }
  .partners__logo--embark {
    height: clamp(34px, 5vh, 44px) !important;
  }
  .partners__logo--virtuoso {
    height: clamp(72px, 11vh, 100px) !important;
  }

  /* Mobile typography — original 11 px / 0.22 em system applied
     by the lockdown block at the end of this stylesheet. No bumps. */


  /* Values: single column, generous internal padding. Hover scale
     is meaningless on touch, so disable it. */
  .values-vw .values {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .values-vw .value {
    padding: 18px 0 !important;
    min-height: 0 !important;
    border-bottom: var(--hairline) solid var(--line-soft);
  }
  .values-vw .value:last-child { border-bottom: 0; }
  .values-vw .value:hover { transform: none !important; }

  /* Services package list: stack columns, keep dividers. */
  .package-vw {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .package-vw .package-col:nth-child(2),
  .package-vw .package-col:nth-child(2) .package-col__list li {
    text-align: left !important;
  }
  .package-col__title { margin-bottom: 16px !important; }

  /* Contact form: out of absolute positioning, full width, stacked. */
  .contact-form {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    gap: 18px !important;
  }
  .contact-form .form__row--2 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .contact-phorn {
    /* Extend past the page padding so the *visual* desk edges line
       up with the navbar logo's left edge and the menu toggle's
       right edge. mix-blend-mode: multiply collapses the PNG's
       light-grey background lines into the page's white body, so
       only the operator and desk drawing remain visible. */
    position: static !important;
    width: calc(100% + 2 * var(--pad-x)) !important;
    max-width: none !important;
    height: auto !important;
    display: block;
    margin: 8px calc(-1 * var(--pad-x)) 24px !important;
    object-fit: contain !important;
    object-position: center !important;
    /* Push the PNG's mid-grey background lines toward pure white
       while keeping the dark drawing intact. multiply alone keeps
       grey grey on a white page; the contrast+brightness filter
       lifts the lights into the page's body white. */
    mix-blend-mode: multiply;
    filter: contrast(1.18) brightness(1.06);
  }

  /* Frontdesk row — already stacks via the inline media query, but
     reinforce the larger type and spacing here. */
  .cell-48BD--frontdesk {
    position: static !important;
    margin-top: 16px;
    padding-top: 16px !important;
    gap: 14px !important;
  }
  .cell-48BD__links {
    flex-direction: column;
    gap: 6px !important;
    align-items: flex-start;
  }
  .cell-48BD__socials { gap: 18px !important; }
  .cell-48BD__socials a { width: 20px; height: 20px; }

  /* Cloches (services hero) — keep grid but smaller gap so 5 cloches
     still fit on a phone. */
  .cloches {
    gap: 6px !important;
  }

  /* Deck on mobile: side buttons larger touch target, HUD pinned to
     bottom-right but with safe padding. */
  .deck__side {
    width: 44px !important;
    height: 44px !important;
    opacity: 0.55 !important;
  }
  .deck__hud {
    bottom: 18px !important;
    right: 18px !important;
  }

  /* Hide the custom dot cursor on touch (already in @media hover:none
     but the dot div would still take layout if rules differ). */
  .cursor { display: none !important; }

  /* Home hero — image fills the viewport. background-position is
     set by the inline rule on index.html so it can be tuned per
     home crop. */
  .hero__img {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    animation: none !important;
    background-size: cover !important;
  }
  .hero {
    /* Mobile hero is shorter than 100vh so the wide image is less
       cropped — sides of the studio (chairs, palms, desks) stay
       visible. The inline rule on index.html sets the exact value. */
    margin-top: 0 !important;
  }
  /* Navbar is always solid white — no blur, no transparency, on
     every page. */
  .nav {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body:has(.hero) .nav { border-bottom: 0 !important; }

  /* Footer — single column stack on mobile, natural source order:
     icons (top) → copyright → links. */
  .footer {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 32px var(--pad-x) 32px !important;
    gap: 22px !important;
  }
  .footer__col--right {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px 22px !important;
    justify-self: center !important;
  }
  .footer__col--center {
    justify-self: center !important;
    text-align: center !important;
  }
  .footer__col--left {
    justify-content: center;
    gap: 22px !important;
  }
  .footer--no-icons {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   TYPE LOCKDOWN — three fonts, three formats, no exceptions.
   ----------------------------------------------------------------
   Every text element across the site is forced into exactly ONE of
   these three styles. No per-component drift, no half-tracked
   variants. This block is the single source of truth and sits at
   the end of the stylesheet so its !important rules win every
   cascade conflict.
   ────────────────────────────────────────────────────────────────
     F1 — DISPLAY
       Inter 100, clamp(28-78px), line-height 1.05, ls -0.025em,
       mixed case. Only one element type uses it: cell-267__text
       (the big editorial titles on every page).
     F2 — LABEL
       Inter 200, 11px, line-height 1.8, ls 0.22em, UPPERCASE.
       Used for nav, footer, all small labels and buttons.
     F3 — BODY
       Inter 200, 11px, line-height 1.8, ls 0.22em, mixed case.
       Used for every body paragraph and form field.
   ================================================================ */

/* ── F1 — DISPLAY (Cormorant Garamond Light, ALL CAPS) ─────── */
.cell-267__text,
.svc-caption-title,
.careers__title {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(26px, 4.1vw, 51px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
}

/* ── F2 — LABEL (uppercase) ────────────────────────────────── */
/* F2 — CHROME + BUTTONS (SF Pro Ultralight, uppercase, compact) */
.nav__link,
.nav__brand-text,
.footer__copy,
.footer__col--right a,
.form__submit,
.next-cta__btn,
.deck-cta__btn,
.deck__hud,
.deck__hud strong,
.deck__hud .sep,
.deck__hud .total,
.gate__label,
.gate__error {
  font-family: var(--sans) !important;
  font-weight: 100 !important;
  font-size: 11px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
}

/* F2 — EDITORIAL LABELS (SF Pro Ultralight, uppercase, body-sized) */
.value__title,
.value--expand .value__title,
.package-col__title,
.package-col__list li,
.cell-48BD__label,
.svc-card__title,
.svc-caption-title-meta,
.contact-form label {
  font-family: var(--sans) !important;
  font-weight: 100 !important;
  font-size: 21px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
}

/* ── F3 — BODY (SF Pro Ultralight, mixed case, no tracking) ── */
.cell-48BD__text,
.value__body,
.value--expand .value__body,
.svc-card__body,
.svc-caption-body,
.careers__body,
.contact-form input,
.contact-form textarea,
.cell-48BD a,
.cell-48BD__links a,
.gate__input {
  font-family: var(--sans) !important;
  font-weight: 100 !important;
  font-size: 21px !important;
  line-height: 1.53 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-style: normal !important;
}

/* Mobile — original Manso type system: F2 labels at 11 px / 0.22 em
   uppercase, F3 body mixed case at 11 px / 0 / 1.53. */
@media (max-width: 720px) {
  .nav__link,
  .nav__brand-text,
  .footer__copy,
  .footer__col--right a,
  .value__title,
  .value--expand .value__title,
  .package-col__title,
  .package-col__list li,
  .cell-48BD__label,
  .svc-card__title,
  .svc-caption-title-meta,
  .form__submit,
  .next-cta__btn,
  .deck-cta__btn,
  .contact-form label,
  .deck__hud,
  .deck__hud strong,
  .deck__hud .sep,
  .deck__hud .total,
  .gate__label,
  .gate__error {
    font-size: 11px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.22em !important;
  }
  .cell-48BD__text,
  .value__body,
  .value--expand .value__body,
  .svc-card__body,
  .svc-caption-body,
  .careers__body,
  .tools-cta__heading,
  .terms__copy,
  .package-col__list li,
  .contact-form label,
  .contact-form input,
  .contact-form textarea,
  .cell-48BD a,
  .cell-48BD__links a,
  .gate__input {
    /* Body copy bumped a further 20 % on mobile (11 → 13 → 16 px)
       so paragraphs read comfortably on phone screens. Includes the
       services Base Package / Add Ons list items and contact form
       labels — they share the small-paragraph F3 treatment instead
       of the F2 chrome they wear elsewhere. */
    font-family: var(--sans) !important;
    font-weight: 100 !important;
    font-size: 16px !important;
    line-height: 1.53 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  /* Every title inside the services page (Base Package / Add Ons
     column headers, expandable card titles) wears the same
     Cormorant uppercase as the value titles, so the type system
     reads as one family across the whole site on mobile. */
  .package-col__title {
    font-family: var(--serif) !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
}

/* ── Mixed-case overrides (DESKTOP ONLY) ────────────────────────
   On desktop a handful of F2-chromed elements read better in their
   native sentence case (as typed in HTML) than uppercase: the Base
   Package / Add Ons lists in services and the contact form's field
   labels. Tightened tracking (0.12em). On mobile these inherit the
   F3 small-paragraph treatment instead, so this override is scoped
   to ≥721 px to stay out of mobile's way. */
@media (min-width: 721px) {
  .package-col__list li,
  .contact-form label {
    text-transform: none !important;
    letter-spacing: 0.12em !important;
  }
}

/* ── Value titles — Cormorant uppercase thin ─────────────────────
   Each value title sits as a serif uppercase headline above its
   body copy. Sized so the longest title ("The Professional Heart")
   fits on a single line within its tile across desktop / tablet /
   mobile. white-space: nowrap guarantees one-liners. */
.value--expand .value__title,
.values .value__title {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(14px, 1.4vw, 20px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* ── Mobile service + value titles — Cormorant uppercase, both
   bumped 15 % from the previous mobile size (14 → 16 px) so the
   list patterns read with a touch more presence on phone screens. */
@media (max-width: 720px) {
  .value--expand .value__title,
  .values .value__title,
  .svc-card__title {
    font-family: var(--serif) !important;
    font-weight: 300 !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* Base Package / Add Ons column headers — Inter (SF Pro) at one
     step above the small paragraphs (16 → 18 px after the same
     15 % bump) so they read as section labels above the list. */
  .package-col__title {
    font-family: var(--sans) !important;
    font-weight: 100 !important;
    font-size: 18px !important;
    line-height: 1.53 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }
}