/* ==========================================================================
   MAISON GOGOLADZE
   Design system for an international private advisory firm.

   Palette   paper (warm off-white) / ink (blue black) / brass (restrained accent)
   Type      Fraunces (editorial display serif) + Inter (body & interface)
   Grid      12 columns, one gutter scale, one vertical rhythm scale
   Motion    one idiom only: a slow rise and fade on entry
   ========================================================================== */

/* ============================ 1. TOKENS ================================== */

:root {
  /* Grounds. Warm, paper based, low chroma. */
  --paper:        #F6F3EC;
  --paper-2:      #EFEBE1;
  --paper-3:      #E6E1D4;

  /* Ink. A blue black with enough depth to sit under large display type. */
  --ink:          #111A23;
  --ink-2:        #33414F;
  --ink-3:        #59646D;   /* 4.65:1 on the darkest paper band */

  /* Accent. Brass rather than gold: lower chroma, closer to a printed
     metallic ink than to a luxury cliche. Used for hairlines, eyebrows
     and small marks, never for large fills.

     Both accents clear 4.5:1 as text on every ground they are used on,
     including the darkest paper band. The eyebrow is 11.5px, so it has to
     be legible rather than merely decorative. */
  --brass:        #775F3A;   /* 4.65:1 on the darkest paper band */
  --brass-2:      #C6AC7C;   /* 8.02:1 on ink */

  --line:         rgba(17, 26, 35, 0.13);
  --line-2:       rgba(17, 26, 35, 0.26);
  --line-dark:    rgba(246, 243, 236, 0.16);
  --line-dark-2:  rgba(246, 243, 236, 0.30);

  --on-dark:      rgba(246, 243, 236, 0.74);
  --on-dark-2:    rgba(246, 243, 236, 0.50);

  /* Type families */
  /* Georgia and Palatino stand in for Fraunces far better than Times does,
     which matters because the display face carries the whole hierarchy. */
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale. Wide contrast between display and body is the point:
     the display voice is large and quiet, the body voice is small and dense. */
  --t-display: clamp(46px, 7vw, 104px);
  --t-h1:      clamp(36px, 5vw, 66px);
  --t-h2:      clamp(27px, 3.3vw, 44px);
  --t-h3:      clamp(19px, 1.5vw, 24px);
  --t-h4:      17px;
  --t-lede:    clamp(19px, 1.45vw, 23px);
  --t-body:    17px;
  --t-small:   15px;
  --t-meta:    11.5px;

  /* Rhythm. Every section uses the same vertical scale. */
  --section-y:   clamp(88px, 10.5vw, 164px);
  --section-y-s: clamp(60px, 7vw, 104px);
  --gutter:      clamp(22px, 4.2vw, 68px);
  --col-gap:     clamp(20px, 2.6vw, 42px);
  --maxw:        1280px;
  --maxw-text:   62ch;
}

/* ============================ 2. RESET =================================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--ui);
  font-size: var(--t-body);
  line-height: 1.72;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 14px 22px; font-size: var(--t-meta);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ============================ 3. TYPOGRAPHY ============================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.018em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.22; letter-spacing: -0.012em; }
h4 { font-size: var(--t-h4); line-height: 1.35; letter-spacing: -0.005em; }

.display {
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.026em;
  font-weight: 300;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.56;
  color: var(--ink-2);
  max-width: var(--maxw-text);
  letter-spacing: -0.003em;
}

.prose { max-width: var(--maxw-text); }
.prose p + p { margin-top: 0; }

.small { font-size: var(--t-small); line-height: 1.68; }
.muted { color: var(--ink-3); }

.eyebrow {
  font-family: var(--ui);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  line-height: 1.4;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.8;
}
.eyebrow.plain::before { display: none; }
.eyebrow.center { justify-content: center; }

.rule {
  border: none;
  height: 1px;
  background: var(--line);
  margin: 0;
}
.rule.short { width: 64px; background: var(--brass); }

.pull {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144;
  font-weight: 300;
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
}

/* Dark contexts */
.on-ink { background: var(--ink); color: var(--on-dark); }
.hero .eyebrow, .page-head .eyebrow, .cta .eyebrow { color: var(--brass-2); }
.hero .muted, .page-head .muted, .cta .muted { color: var(--on-dark-2); }
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--paper); }
.on-ink .lede { color: var(--on-dark); }
.on-ink .eyebrow { color: var(--brass-2); }
.on-ink .rule { background: var(--line-dark); }
.on-ink .muted { color: var(--on-dark-2); }

/* ============================ 4. LAYOUT ================================= */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: var(--section-y) 0; }
section.tight { padding: var(--section-y-s) 0; }
section.flush-top { padding-top: 0; }
section.flush-bottom { padding-bottom: 0; }

.band-2 { background: var(--paper-2); }
.band-3 { background: var(--paper-3); }

/* The single 12 column grid every section aligns to. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
}
.grid.rows { row-gap: clamp(44px, 5vw, 84px); }

/* Width is set on the end line only. Setting the shorthand instead would
   overwrite grid-column-start, and a following .start-N would then leave the
   item one track wide. */
.c3  { grid-column-end: span 3; }
.c4  { grid-column-end: span 4; }
.c5  { grid-column-end: span 5; }
.c6  { grid-column-end: span 6; }
.c7  { grid-column-end: span 7; }
.c8  { grid-column-end: span 8; }
.c9  { grid-column-end: span 9; }
.c10 { grid-column-end: span 10; }
.c12 { grid-column-end: span 12; }

.start-2 { grid-column-start: 2; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }

.self-center { align-self: center; }
.self-end { align-self: end; }

.stack-s  > * + * { margin-top: 14px; }
.stack-m  > * + * { margin-top: 26px; }
.stack-l  > * + * { margin-top: 42px; }

.section-head { max-width: 780px; margin-bottom: clamp(44px, 5vw, 76px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lede { margin-top: 24px; }

/* ============================ 5. HEADER ================================= */

.util-bar {
  background: var(--ink);
  color: var(--on-dark-2);
}
.util-bar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
}
.util-note {
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
}
.lang-switch a {
  padding: 3px 9px;
  color: var(--on-dark-2);
  transition: color 0.25s ease;
}
.lang-switch a:hover { color: var(--paper); }
.lang-switch a.active { color: var(--paper); }
.lang-switch .sep { color: rgba(246, 243, 236, 0.24); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 243, 236, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 86px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: none;
}
.brand-mark { width: 30px; height: 37px; flex: none; }
.brand-name {
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-size: 16px;
  letter-spacing: 0.09em;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}
.brand-name .sub {
  display: block;
  font-family: var(--ui);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--ink-3);
  margin-top: 5px;
}

nav.main-nav { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 30px); }

nav.main-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
  transition: color 0.25s ease;
}
nav.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
nav.main-nav a:hover { color: var(--ink); }
nav.main-nav a:hover::after { transform: scaleX(1); }
nav.main-nav a.active { color: var(--ink); }
nav.main-nav a.active::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 0 10px 10px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 1px;
  background: var(--ink);
  margin: 6px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================ 6. BUTTONS & LINKS ======================== */

.btn {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 17px 34px;
  display: inline-block;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }

.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--brass); border-color: var(--brass); color: var(--paper); }

/* Every dark ground shares one set of button and link styles. The hero,
   interior page headers, CTA bands and the language gate are all dark, so
   they are listed alongside .on-ink rather than restating the rules. */
.on-ink .btn, .hero .btn, .page-head .btn, .cta .btn, .gate .btn {
  border-color: var(--line-dark-2);
  color: var(--paper);
  background: transparent;
}
.on-ink .btn:hover, .hero .btn:hover, .page-head .btn:hover, .cta .btn:hover, .gate .btn:hover {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.on-ink .btn-solid, .hero .btn-solid, .page-head .btn-solid, .cta .btn-solid, .gate .btn-solid {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.on-ink .btn-solid:hover, .hero .btn-solid:hover, .page-head .btn-solid:hover,
.cta .btn-solid:hover, .gate .btn-solid:hover {
  background: var(--brass-2); border-color: var(--brass-2); color: var(--ink);
}

/* Quiet text link with a rule that draws itself. The default link idiom. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 9px;
  position: relative;
}
.link::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-2);
}
.link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.link:hover::after { transform: scaleX(1); }
.link .arrow { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.link:hover .arrow { transform: translateX(5px); }

.on-ink .link, .hero .link, .page-head .link, .cta .link { color: var(--paper); }
.on-ink .link::before, .hero .link::before, .page-head .link::before,
.cta .link::before { background: var(--line-dark-2); }
.on-ink .link::after, .hero .link::after, .page-head .link::after,
.cta .link::after { background: var(--brass-2); }

/* ============================ 7. HERO =================================== */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  min-height: min(86vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.62) contrast(1.06) brightness(0.86);
}
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(17,26,35,0.62) 0%, rgba(17,26,35,0.50) 42%, rgba(17,26,35,0.93) 100%),
    linear-gradient(92deg, rgba(17,26,35,0.72) 0%, rgba(17,26,35,0.18) 68%);
}
.hero .wrap {
  position: relative;
  width: 100%;
  padding-top: clamp(120px, 17vh, 200px);
  padding-bottom: clamp(56px, 7vh, 92px);
}
.hero .display { color: var(--paper); }
.hero .lede { color: var(--on-dark); max-width: 46ch; }

.hero-foot {
  margin-top: clamp(48px, 7vh, 84px);
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  align-items: baseline;
  justify-content: space-between;
}
.hero-locations {
  font-size: var(--t-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

/* Interior page header. Quieter than the home hero. */
.page-head {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(88px, 12vh, 150px) 0 clamp(56px, 8vh, 92px);
  overflow: hidden;
}
.page-head-media { position: absolute; inset: 0; }
.page-head-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.05) brightness(0.78);
}
.page-head-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(17,26,35,0.90) 0%, rgba(17,26,35,0.62) 60%, rgba(17,26,35,0.78) 100%);
}
.page-head .wrap { position: relative; }
.page-head h1 { color: var(--paper); max-width: 18ch; }
.page-head .lede { color: var(--on-dark); margin-top: 28px; max-width: 54ch; }

/* ============================ 8. PHOTOGRAPHY ============================ */

/* One treatment across the whole library so images read as one commission
   rather than as assorted stock. */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
}
.photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.76) contrast(1.05);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(205deg, rgba(17,26,35,0.10), rgba(138,110,67,0.07));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.photo.hover-zoom:hover img { transform: scale(1.03); }

/* A portrait is the one thing the library grade should not be applied to at
   full strength. Pulling the saturation down and laying a brass cast over
   skin reads as unwell rather than considered. Portraits keep a much lighter
   version of the same treatment, so they still belong to the set. */
.photo.is-portrait img { filter: saturate(0.94) contrast(1.02); }
.photo.is-portrait::after { opacity: 0.3; }

.ar-21-9 { aspect-ratio: 21 / 9; }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-3-2  { aspect-ratio: 3 / 2; }
.ar-4-3  { aspect-ratio: 4 / 3; }
.ar-1-1  { aspect-ratio: 1 / 1; }
.ar-4-5  { aspect-ratio: 4 / 5; }
.ar-3-4  { aspect-ratio: 3 / 4; }

.caption {
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 14px;
}
.on-ink .caption { color: var(--on-dark-2); }

/* ============================ 9. FIGURE ROW ============================= */

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.figures.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figure {
  padding: clamp(32px, 3.6vw, 52px) clamp(20px, 2.4vw, 36px);
  border-right: 1px solid var(--line);
}
.figure:last-child { border-right: none; }
.figure .val {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144;
  font-weight: 300;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
  margin-bottom: 14px;
}
.figure .key {
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.55;
}
.on-ink .figures { border-color: var(--line-dark); }
.on-ink .figure { border-right-color: var(--line-dark); }
.on-ink .figure .val { color: var(--paper); }
.on-ink .figure .key { color: var(--on-dark-2); }

/* ============================ 10. OBJECTIVES ============================ */

/* The six client objectives. A number, a name, a body: all on the same grid. */
.objective {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  padding: clamp(38px, 4.2vw, 62px) 0;
  border-top: 1px solid var(--line);
}
.objective:last-child { border-bottom: 1px solid var(--line); }

.objective .obj-index {
  grid-column: span 1;
  font-family: var(--ui);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brass);
  padding-top: 9px;
}
.objective .obj-name { grid-column: span 4; }
.objective .obj-name h2 {
  font-size: clamp(24px, 2.5vw, 34px);
  letter-spacing: -0.018em;
}
.objective .obj-name .obj-sub {
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 14px;
}
.objective .obj-body { grid-column: span 7; }

/* ============================ 11. CARDS & LISTS ========================= */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.band-2 .card { background: var(--paper); }
.card h3 { margin-bottom: 16px; }
.card .card-foot { margin-top: auto; padding-top: 30px; }

/* A profile of a client we work with. Quiet, hairline separated. */
.profile {
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.profile h3 {
  font-size: 21px;
  margin-bottom: 12px;
}
.profile p { color: var(--ink-3); font-size: var(--t-small); }
.on-ink .profile { border-top-color: var(--line-dark); }
.on-ink .profile p { color: var(--on-dark-2); }

ul.marks {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.marks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: var(--t-small);
  line-height: 1.62;
}
ul.marks li:last-child { margin-bottom: 0; }
ul.marks li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 13px; height: 1px;
  background: var(--brass);
}
.on-ink ul.marks li::before { background: var(--brass-2); }

/* Numbered process steps. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--col-gap);
  border-top: 1px solid var(--line);
}
.step { padding-top: 30px; }
.step .n {
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brass);
  display: block;
  margin-bottom: 20px;
}
.step h3 { font-size: 20px; margin-bottom: 12px; }
.step p { font-size: var(--t-small); color: var(--ink-3); }
.on-ink .steps { border-top-color: var(--line-dark); }
.on-ink .step p { color: var(--on-dark-2); }
/* The light ground accent is far too dark to read on ink. Every brass mark
   that can appear on a dark section needs its dark ground counterpart. */
.on-ink .step .n,
.on-ink .obj-index,
.on-ink .cr-label,
.on-ink .form-status { color: var(--brass-2); }

/* ============================ 12. CORRIDORS DIAGRAM ===================== */

.corridor-map-wrap { overflow-x: auto; overflow-y: hidden; }

.corridor-map {
  width: 100%;
  height: auto;
  display: block;
}
.corridor-map .graticule {
  fill: none;
  stroke: var(--brass-2);
  stroke-width: 0.6;
  opacity: 0.14;
}
.corridor-map .landmass {
  fill: rgba(246, 243, 236, 0.045);
  stroke: rgba(246, 243, 236, 0.16);
  stroke-width: 0.8;
}
.corridor-map .route {
  fill: none;
  stroke: var(--brass-2);
  stroke-width: 1;
  opacity: 0.62;
}
.js .corridor-map .route {
  stroke-dasharray: var(--len, 900);
  stroke-dashoffset: var(--len, 900);
}
.corridor-map .node { fill: var(--brass-2); }
.corridor-map .hub-dot { fill: var(--paper); }
.corridor-map .node-ring { fill: none; stroke: var(--brass-2); stroke-width: 1; opacity: 0.5; }
.corridor-map .hub-ring { fill: none; stroke: var(--paper); stroke-width: 1; opacity: 0.9; }
.corridor-map .hub-pulse { fill: none; stroke: var(--paper); stroke-width: 1; opacity: 0.22; }
.corridor-map text {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--on-dark);
}
.corridor-map text.hub { fill: var(--paper); font-size: 13px; letter-spacing: 0.24em; }
.corridor-map text.sub { fill: var(--on-dark-2); font-size: 9.5px; letter-spacing: 0.16em; font-weight: 500; }

/* The routes draw themselves once, when the diagram comes into view. */
.corridor-map.is-visible .route {
  animation: draw 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.corridor-map.is-visible .route:nth-of-type(1) { animation-delay: 0.05s; }
.corridor-map.is-visible .route:nth-of-type(2) { animation-delay: 0.18s; }
.corridor-map.is-visible .route:nth-of-type(3) { animation-delay: 0.31s; }
.corridor-map.is-visible .route:nth-of-type(4) { animation-delay: 0.44s; }
.corridor-map.is-visible .route:nth-of-type(5) { animation-delay: 0.57s; }

@keyframes draw { to { stroke-dashoffset: 0; } }

/* Corridor entries listed beneath the diagram. */
.corridor-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  padding: clamp(30px, 3.4vw, 46px) 0;
  border-top: 1px solid var(--line);
}
.corridor-row:last-child { border-bottom: 1px solid var(--line); }
.corridor-row .cr-name { grid-column: span 4; }
.corridor-row .cr-name h3 { font-size: clamp(21px, 2vw, 27px); }
.corridor-row .cr-orient { grid-column: span 4; }
.corridor-row .cr-client { grid-column: span 4; }
.corridor-row .cr-label {
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.corridor-row p { font-size: var(--t-small); }
.on-ink .corridor-row { border-color: var(--line-dark); }
.on-ink .corridor-row .cr-label { color: var(--on-dark-2); }

/* Two way bridge: inbound and outbound side by side. */
.bridge {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
}
.bridge > div { padding: clamp(30px, 3.4vw, 52px); }
.bridge > div + div { border-left: 1px solid var(--line); }
.bridge .dir {
  font-size: var(--t-meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 22px;
}
.on-ink .bridge { border-color: var(--line-dark); }
.on-ink .bridge > div + div { border-left-color: var(--line-dark); }
.on-ink .bridge .dir { color: var(--brass-2); }

/* ============================ 13. CTA & FOOTER ========================== */

.cta {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(84px, 10vw, 148px) 0;
}
.cta h2 { color: var(--paper); max-width: 20ch; }
.cta .cta-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: end;
}
.cta .cta-copy { grid-column-end: span 7; }
.cta .cta-act { grid-column: 9 / span 4; justify-self: end; }

.site-footer {
  background: var(--ink);
  color: var(--on-dark-2);
  padding: clamp(64px, 7vw, 96px) 0 34px;
  font-size: var(--t-small);
  border-top: 1px solid var(--line-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  padding-bottom: clamp(44px, 5vw, 68px);
  border-bottom: 1px solid var(--line-dark);
}
/* 3 + 2 + 2 + 2 + 3 = 12. The columns have to add up or the last one wraps
   onto a second row underneath the brand. */
.footer-brand { grid-column: span 3; }
.footer-col { grid-column: span 2; }
.footer-col.wide { grid-column: span 3; }

.footer-brand .brand-mark {
  width: 34px; height: 42px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  margin-bottom: 22px;
}
.footer-brand-name {
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  color: var(--paper);
  font-size: 19px;
  letter-spacing: 0.06em;
}
.footer-tagline {
  color: var(--on-dark-2);
  font-size: var(--t-small);
  margin-top: 14px;
  max-width: 34ch;
  line-height: 1.6;
}

.footer-col h2 {
  font-family: var(--ui);
  color: var(--paper);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.footer-col a, .footer-col p {
  display: block;
  margin-bottom: 6px;
  color: var(--on-dark-2);
  transition: color 0.25s ease;
  line-height: 1.5;
}
/* Padding rather than margin, so the link itself is the target. */
.footer-col a { padding: 4px 0; }
.footer-col a:hover { color: var(--brass-2); }

.footer-legal {
  padding-top: 30px;
  /* 5.56:1 on ink. The scope of services notice is the one piece of small
     print a reader may actually need, so it is not dimmed to decoration. */
  color: rgba(246, 243, 236, 0.55);
  font-size: 12.5px;
  line-height: 1.7;
}
.footer-legal .scope { max-width: 92ch; margin-bottom: 22px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================ 14. MOTION =============================== */

/* One idiom, used everywhere: a slow rise and fade. Stagger via --d.

   The hidden state is gated on .js. Only scripting can add .is-visible, so
   without it this rule would leave most of the page permanently invisible.
   The flag is set during head parsing, so there is no flash beforehand. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .corridor-map .route { stroke-dashoffset: 0; }
}

/* ============================ 15. TOOLS =============================== */

.tool-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(40px, 4.6vw, 64px);
  flex-wrap: wrap;
}
.tool-tab {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 18px 30px 17px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
  margin-bottom: -1px;
}
.tool-tab:hover { color: var(--ink); }
.tool-tab.active { color: var(--ink); border-bottom-color: var(--brass); }

.tool-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(28px, 3.4vw, 54px);
}

.field-group { margin-bottom: 32px; }
.field-group:last-child { margin-bottom: 0; }
.field-group label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--ui);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.field-group label .val {
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.01em;
}
.field-group input[type="range"] {
  width: 100%;
  accent-color: var(--brass);
  height: 22px;
}
.field-group input[type="number"], .field-group select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-2);
  padding: 11px 2px;
  font-family: var(--ui);
  font-size: 19px;
  color: var(--ink);
}
.field-group input[type="number"]:focus, .field-group select:focus {
  outline: none;
  border-bottom-color: var(--brass);
}

.result-panel { background: var(--ink); color: var(--on-dark); padding: clamp(28px, 3vw, 42px); }
.result-panel .result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
}
.result-panel .result-row:last-child { border-bottom: none; }
.result-panel .result-label {
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  max-width: 22ch;
}
.result-panel .result-value {
  font-family: var(--display);
  font-variation-settings: 'opsz' 96;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: -0.015em;
  color: var(--paper);
  white-space: nowrap;
}
.result-panel .result-value.gold { color: var(--brass-2); }
.result-panel .result-value.big { font-size: 33px; }

.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th {
  font-family: var(--ui);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 0 12px 14px 0;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.compare-table td {
  padding: 17px 12px 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.compare-table tr.highlight td { background: rgba(138, 110, 67, 0.07); font-weight: 600; color: var(--ink); }
.compare-table tr.highlight td:first-child { box-shadow: inset 2px 0 0 var(--brass); padding-left: 14px; }
.compare-table .bar-track { background: var(--paper-3); height: 6px; width: 100%; position: relative; overflow: hidden; }
.compare-table .bar-fill { background: var(--ink-3); height: 100%; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.compare-table tr.highlight .bar-fill { background: var(--brass); }

.disclaimer {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-3);
  padding: 26px 30px;
  background: var(--paper-2);
  border-left: 1px solid var(--brass);
  margin-top: 38px;
}
.disclaimer strong { color: var(--ink-2); font-weight: 600; }

/* ============================ 16. FORMS ================================ */

.contact-form label {
  display: block;
  font-family: var(--ui);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-2);
  padding: 13px 2px;
  font-family: var(--ui);
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 32px;
  transition: border-color 0.25s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: none; border-bottom-color: var(--brass); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.form-status { font-size: var(--t-small); margin-top: 16px; color: var(--brass); }

/* Direct contact routes. Given weight, because a serious enquirer wants a
   person rather than a form, but kept in the site's own language: a hairline
   block that fills on hover, not a floating coloured bubble. */
.direct {
  display: block;
  border: 1px solid var(--line-2);
  padding: 24px 26px;
  margin-bottom: 14px;
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease, color 0.4s ease;
}
.direct:hover { background: var(--ink); border-color: var(--ink); }
.direct-label {
  display: block;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
  transition: color 0.4s ease;
}
.direct-value {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.4s ease;
  overflow-wrap: anywhere;
}
.direct-note {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin-top: 10px;
  transition: color 0.4s ease;
}
.direct:hover .direct-label { color: var(--brass-2); }
.direct:hover .direct-value { color: var(--paper); }
.direct:hover .direct-note { color: var(--on-dark-2); }

.contact-detail {
  border-top: 1px solid var(--line);
  padding: 26px 0;
}
.contact-detail h3 { font-size: 19px; margin-bottom: 8px; }
.contact-detail p a { display: inline-block; padding: 4px 0; }
.contact-detail p { color: var(--ink-3); font-size: var(--t-small); }
.contact-detail:first-of-type { margin-top: 30px; }
.contact-detail:last-of-type { border-bottom: 1px solid var(--line); }

/* ============================ 17. LANGUAGE GATE ======================== */

.gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ink);
  color: var(--on-dark);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.gate-media { position: absolute; inset: 0; }
.gate-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.5) brightness(0.6); }
.gate-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,26,35,0.86), rgba(17,26,35,0.94));
}
.gate .wrap { position: relative; }
.gate .brand-mark { width: 44px; height: 54px; filter: brightness(0) invert(1); margin-bottom: 40px; }
.gate h1 {
  color: var(--paper);
  font-size: clamp(30px, 4.6vw, 58px);
  font-weight: 300;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.gate .gate-sub { color: var(--on-dark-2); margin-top: 24px; max-width: 48ch; }
.gate-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--line-dark);
}
.gate-locations {
  margin-top: 44px;
  font-size: var(--t-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.55);
}

/* ============================ 18. RESPONSIVE =========================== */

@media (max-width: 1080px) {
  /* The blur has to go here. A backdrop-filter makes the header a containing
     block for fixed position descendants, which would trap the navigation
     panel inside the 74px header instead of letting it fill the viewport. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--paper);
  }
  .site-header .wrap { height: 74px; }
  .util-bar .wrap { justify-content: flex-end; }
  .util-note { display: none; }
  .brand-name .sub { display: none; }

  /* The panel fills the viewport from the very top and pads its links down
     past the bar and the header, rather than starting below them. Starting
     below left a strip of live page above it: at the top of the document that
     strip was the utility bar, and once scrolled it was the page itself,
     because a sticky header stops sticking when an ancestor is given
     overflow:hidden. A panel that reaches y=0 cannot leave a gap whatever
     the chrome above it is doing. */
  nav.main-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: 0;
    padding-top: calc(var(--chrome-h, 113px) + 8px);
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-right: var(--gutter);
    padding-bottom: 48px;
    padding-left: var(--gutter);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Slides down from under the header. A sideways slide would park the
       closed panel to the right of the viewport, which extends the page's
       scroll width and lets the whole site drag horizontally on a phone. */
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.42s;
    z-index: 99;
  }
  nav.main-nav.open { transform: translateY(0); visibility: visible; }
  nav.main-nav a {
    font-size: 15px;
    letter-spacing: 0.08em;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
  }
  nav.main-nav a::after { display: none; }
  nav.main-nav a.active { color: var(--brass); }
  /* With the panel open, the bar and the header are pinned so they stay
     where the panel expects them, and the page underneath is held still. */
  html.nav-open .util-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 101;
  }
  html.nav-open .site-header {
    position: fixed;
    top: var(--util-h, 38px); left: 0; right: 0;
    z-index: 100;
  }

  /* The panel is a sibling of the brand and the button inside the header, so
     covering the full viewport would otherwise paint over both of them and
     leave no way to close it. They are lifted above the panel instead. */
  html.nav-open .brand,
  html.nav-open .nav-toggle {
    position: relative;
    z-index: 102;
  }

  .nav-toggle { display: block; }

  .cta .cta-copy { grid-column: 1 / -1; }
  .cta .cta-act { grid-column: 1 / -1; justify-self: start; margin-top: 40px; }
}

@media (max-width: 900px) {
  /* Full width, start line included. Resetting only grid-column-start here
     would leave a definite end line against an auto start, which collapses
     the item to a single track. */
  .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10,
  .start-2, .start-6, .start-7, .start-8 { grid-column: 1 / -1; }

  .figures, .figures.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure { border-bottom: 1px solid var(--line); }
  .figure:nth-child(2n) { border-right: none; }
  .figure:last-child { border-bottom: none; }
  /* An odd item left alone on the last row takes the full width rather than
     leaving a half empty cell with a dangling rule. */
  .figure:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }
  .on-ink .figure { border-bottom-color: var(--line-dark); }

  /* Tall portrait crops become unusable once they are full bleed on a narrow
     screen, so the whole library steps down to a landscape crop. */
  .ar-4-5, .ar-3-4 { aspect-ratio: 3 / 2; }
  .ar-21-9 { aspect-ratio: 16 / 9; }

  .objective .obj-index { grid-column: 1 / -1; padding-top: 0; margin-bottom: -14px; }
  .objective .obj-name { grid-column: 1 / -1; }
  .objective .obj-body { grid-column: 1 / -1; }

  .corridor-row .cr-name,
  .corridor-row .cr-orient,
  .corridor-row .cr-client { grid-column: 1 / -1; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }

  .bridge { grid-template-columns: 1fr; }
  .bridge > div + div { border-left: none; border-top: 1px solid var(--line); }
  .on-ink .bridge > div + div { border-top-color: var(--line-dark); }

  .footer-brand { grid-column: 1 / -1; }
  .footer-col { grid-column: span 6; }
  .footer-col.wide { grid-column: span 6; }
}

@media (max-width: 760px) {
  /* Below this width the labels would shrink past legibility, so the diagram
     keeps a usable size and scrolls inside its own container instead. The
     negative margin lets it bleed to the screen edges so the scroll reads as
     intentional. */
  .corridor-map-wrap {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
  }
  .corridor-map { min-width: 620px; }
}

@media (max-width: 900px) {
  /* Footer links sit at a comfortable tap size on touch screens rather than
     the tight 23px the desktop rhythm gives them. */
  .footer-col a {
    padding: 7px 0;
    margin-bottom: 2px;
  }
  .contact-detail p a {
    display: inline-block;
    padding: 6px 0;
  }
}

@media (max-width: 620px) {
  :root { --t-body: 16.5px; }
  .hero { min-height: 0; padding-bottom: 0; }
  .figures, .figures.four { grid-template-columns: 1fr; }
  .figure { border-right: none; }
  .figure:last-child { border-bottom: none; }
  .steps { grid-template-columns: 1fr; }
  .tool-tabs { display: grid; grid-template-columns: 1fr; }
  .tool-tab { text-align: left; padding: 15px 0; border-bottom: 1px solid var(--line); }
  .tool-tab.active { border-bottom-color: var(--brass); }
  .form-row { grid-template-columns: 1fr; }
  .result-panel .result-value.big { font-size: 26px; }
  .compare-table th, .compare-table td { padding-right: 8px; font-size: 14px; }
  .footer-col, .footer-col.wide { grid-column: 1 / -1; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
}

/* Holding the page still while the navigation panel is open. The body is
   taken out of flow at a negative offset equal to the scroll position, which
   is the one approach iOS Safari respects; main.js restores the position when
   the panel closes. */
html.nav-open,
html.nav-open body {
  overflow: hidden;
}
html.nav-open body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}