/* Dalian Morning — homepage
   Built 1:1 from the approved design canvas (Bodoni Moda + Manrope,
   ivory ground, clay accent, dark factory/markets bands).
   Desktop layout matches the 1440 comp; breakpoints below were added
   because the comp is desktop-only. */

:root {
  --bg:          #F7F7F4;
  --white:       #FFFFFF;
  --ink:         #1A1917;
  --body:        #3A3835;
  --muted:       #55514B;
  /* Small grey labels. The comp used #8C857B everywhere; on the ivory ground
     that measures 3.4:1, under the 4.5:1 AA minimum for text below 24px.
     Light surfaces get a darker grey, dark surfaces a lighter one. */
  --faint:       #6F685E;
  --faint-dark:  #9A9287;
  --line:        #E1E0DA;
  --line-strong: #C9C7C0;
  --img-bg:      #E9E9E5;

  --dark:        #211D19;
  --dark-deep:   #1A1917;
  --dark-line-2: #332E28;
  --on-dark:     #E6E2DB;
  --on-dark-mut: #BDB7AD;
  --on-dark-dim: #8E877C;

  --clay:        #9E4E34;
  --clay-bright: #B75F43;
  --clay-soft:   #D08A6C;

  --serif: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Content width grows on wide screens: 1280 up to a 1440 viewport (unchanged),
     then widens smoothly to 1696 (1600 of content) by a 2000 viewport, and stops there. */
  --shell: clamp(1280px, calc(74.3vw + 210px), 1696px);
  --gutter: 48px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }

/* Display serif (headings and figures). Bodoni Moda's optical size follows the font size by
   default, which at 50–112px makes the hairlines nearly vanish. Pin a lower optical size and a
   medium weight so strokes hold up. The DALIAN MORNING wordmarks keep the default cut.
   Small serif headings (20–32px) get their own, sturdier cut — see "Small serif" at the end of this file. */
.hero__title, .s-title {
  font-weight: 500;
  font-variation-settings: 'opsz' 24;
}
p, dd, figcaption { text-wrap: pretty; }

a { color: var(--clay); }
a:hover { color: #7E3D28; }
::selection { background: var(--clay-bright); color: #FFFFFF; }

img { display: block; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-decoration: none;
}
.skip:focus { left: 0; color: #FFFFFF; }

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

/* ---------- NAV ---------- */

/* Frosted, tucked away while reading down and back on the way up (script.js). On the homepage it floats over
   the film instead and is clear at the top of the page (.home rules below). */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 247, 244, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(26, 25, 23, 0.08);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease;
}
.nav.is-hidden { transform: translateY(-100%); }
/* With the menu open the bar must not frame it (a backdrop filter or transform would trap the full-screen list). */
.nav:has(.nav__links.is-open) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); transform: none; }

.home .nav { position: fixed; left: 0; right: 0; }
.home .nav__inner { height: 60px; transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.home .nav.is-top {
  background: linear-gradient(to bottom, rgba(247, 247, 244, 0.55), rgba(247, 247, 244, 0));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.home .nav.is-top .nav__inner { height: 76px; }
:root:has(body.home) { scroll-padding-top: 64px; }    /* anchors land below the floating bar */

.nav__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__brand {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav__brand:hover { color: var(--ink); }

.nav__links {
  position: relative;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  gap: 28px;
}

/* A hairline grows under the link the pointer is on; on the homepage a clay line slides to the section on screen. */
.nav__links a {
  position: relative;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--ink);
  opacity: 0.72;
  white-space: nowrap;
  padding: 8px 0;
  transition: opacity 0.25s ease;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__links a:hover, .nav__links a.is-current { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-current::after { display: none; }
.nav__ind {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 1px;
  height: 1.5px;
  background: var(--clay-bright);
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.nav__tools {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav__toggle span {
  width: 20px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- HERO ---------- */

.hero {
  position: relative;
  display: grid;
  aspect-ratio: 1916 / 821;
  overflow: hidden;
  background: var(--bg);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  background: #EDEAE4;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__scrim {
  position: absolute;
  inset: 0 auto 0 0;
  width: 60%;
  background: linear-gradient(to right, rgba(247, 247, 244, 0.18), rgba(247, 247, 244, 0) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  grid-area: 1 / 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__copy { max-width: 560px; }

.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--faint);
}

.hero__rule {
  width: 44px;
  height: 1px;
  background: #B9B4AA;
  margin-top: 14px;
}

.hero__title {
  margin-top: 26px;
  font-family: var(--serif);
  font-size: 80px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.05em;
}
.line { display: block; }

.hero__sub {
  margin-top: 28px;
  max-width: 300px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: 40px;
}
.hero__cue-line { width: 1px; height: 30px; background: #B9B4AA; }
.hero__cue-text {
  margin-top: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--muted);
}

/* The opening film (hero-film.js). The still (its last frame) stays underneath; the video covers it once it plays. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero__intro, .hero__play { display: none; }

/* With the film the hero is 16:9 and fills the screen under the floating nav. */
.hero--film { aspect-ratio: auto; height: max(560px, min(56.25vw, 100vh)); height: max(560px, min(56.25vw, 100svh)); }
.hero--film .hero__video { opacity: 1; }
.hero--film .hero__title { font-size: clamp(56px, 4.6vw, 80px); }   /* keeps "the garment." on the studio wall */
.home .hero:not(.hero--film) .hero__inner { padding-top: 76px; }  /* the still: clear of the floating nav */

/* "DALIAN MORNING" over the sky between the buildings, like the title of a film: each letter comes out of
   soft focus from a little nearer, one after another (home.js splits them), then the spacing slowly opens. */
.hero--film .hero__intro {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  z-index: 2;
  text-align: center;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.hero--film.is-intro .hero__intro { opacity: 1; }
.hero__mark {
  font: 500 clamp(40px, 4.2vw, 74px)/1 var(--serif);
  font-variation-settings: 'opsz' 24;
  letter-spacing: 0.16em;
  padding-left: 0.16em;                /* the spacing after the last letter, so the word sits centred */
  color: var(--ink);
  white-space: nowrap;
  transition: letter-spacing 4.5s cubic-bezier(0.16, 1, 0.3, 1), padding-left 4.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__ch {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 0.18em, 0) scale(1.3);
  text-shadow: 0 0 36px rgba(247, 247, 244, 0.75), 0 10px 24px rgba(26, 25, 23, 0.16);
  transition: opacity 0.9s ease calc(var(--i) * 55ms), filter 1.2s ease calc(var(--i) * 55ms),
              transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 55ms);
}
.hero__mark-sub {
  margin-top: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  color: var(--ink);
  text-shadow: 0 0 4px rgba(247, 247, 244, 0.95), 0 0 16px rgba(247, 247, 244, 0.8);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease 1.1s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.1s;
}
.hero__mark-sub span { opacity: 0.5; }
.hero--film.is-intro .hero__mark { letter-spacing: 0.24em; padding-left: 0.24em; }
.hero--film.is-intro .hero__ch { opacity: 1; filter: none; transform: none; }
.hero--film.is-intro .hero__mark-sub { opacity: 1; transform: none; }

/* The headline as lettering on the studio wall at the end of the film. Drawn flat at a fixed size; home.js maps
   it onto the wall with a perspective transform. Multiply lets the wall's light and shade show through, as if
   the letters were painted on the plaster. Where the wall cannot be fitted, the flat headline stays. */
.hero__wall {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: none;
  transform-origin: 0 0;
  white-space: nowrap;
  color: #2A2622;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hero--film .hero__wall { display: block; visibility: hidden; }   /* laid out (so it can be measured), unseen until fitted */
.hero--film.is-walled .hero__wall { visibility: visible; }
.hero--film.is-walled .hero__copy { display: none; }
.hero__wall-eyebrow { font-size: 22px; font-weight: 700; letter-spacing: 0.32em; }
.hero__wall-title {
  margin-top: 26px;
  font: 500 150px/1 var(--serif);
  font-variation-settings: 'opsz' 24;
  letter-spacing: -0.01em;
  padding-bottom: 0.08em;
  text-shadow: -3px 3px 4px rgba(26, 25, 23, 0.14);     /* standing a little off the wall; the light comes from the windows on the right */
}
.hero__wall-sub { margin-top: 30px; font-size: 30px; letter-spacing: 0.01em; }
/* At the end of the film the line of lettering is uncovered from the near end to the far end. */
.hero__wall-eyebrow, .hero__wall-sub { opacity: 0; transition: opacity 1s ease; }
.hero__wall-title { clip-path: inset(-30% 100% -40% 0); transition: clip-path 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
.hero--film.is-end .hero__wall-title { clip-path: inset(-30% -3% -40% 0); }
.hero--film.is-end .hero__wall-eyebrow { opacity: 0.8; }
.hero--film.is-end .hero__wall-sub { opacity: 0.85; transition-delay: 1.4s; }

/* The headline waits for the end of the film, then arrives the way it does on the still. */
.hero--film .hero__copy { visibility: hidden; }
.hero--film .hero__eyebrow, .hero--film .line, .hero--film .hero__sub { animation: none; }
.hero--film.is-end .hero__copy { visibility: visible; }
.hero--film.is-end .hero__eyebrow { animation: dmFade 0.8s ease-out both; }
.hero--film.is-end .line { animation: dmLine 1.15s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero--film.is-end .line--1 { animation-delay: 0.15s; }
.hero--film.is-end .line--2 { animation-delay: 0.29s; }
.hero--film.is-end .hero__sub { animation: dmRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both; }
.hero--film .hero__img { animation: none; }

/* Pause / play / replay. */
.hero--film .hero__play {
  display: grid;
  place-items: center;
  position: absolute;
  right: var(--gutter);
  bottom: 40px;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(26, 25, 23, 0.18);
  border-radius: 50%;
  background: rgba(247, 247, 244, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero--film .hero__play[hidden] { display: none; }
.hero__play:hover { background: rgba(247, 247, 244, 0.95); border-color: rgba(26, 25, 23, 0.35); }
.hero__play:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero__play svg { display: none; width: 16px; height: 16px; fill: currentColor; }
.hero__play[data-state="pause"] .hero__play-pause,
.hero__play[data-state="play"] .hero__play-play,
.hero__play[data-state="replay"] .hero__play-replay { display: block; }

/* ---------- SECTIONS ---------- */

/* One layout system for every homepage section (and the same head as the Our Story page):
   same container, same vertical rhythm, "—— LABEL" + serif title. Backgrounds alternate
   between the page tone and white. */
.hs { padding: 96px 0; background: var(--bg); }
.hs--white { background: var(--white); }

/* A short clay rule, then the label (no section numbers: the order can change freely). */
.h-label {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--faint);
}
.h-label::before {
  content: '';
  flex: none;
  width: 32px;
  height: 1px;
  margin-right: 14px;
  background: var(--clay);
}

.s-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 56px;
  margin-bottom: 48px;
}
/* The title keeps its one line; anything beside it (a "see all" link) gives way instead. */
.s-head > div:first-child { flex: 0 0 auto; max-width: 100%; }

.s-title {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.s-title--contact { font-size: 48px; }

/* Quiet "see all" link that sits on the head's baseline. */
.h-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.h-link span { font-size: 16px; font-weight: 400; letter-spacing: 0; transition: transform 0.2s ease; }
.h-link:hover { color: var(--clay); border-bottom-color: var(--clay); }
.h-link:hover span { transform: translateX(4px); }

/* Primary button — shared look with the Our Story page (.os-btn). */
.btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  height: 52px;
  flex-shrink: 0;
  padding: 0 26px;
  border: 0;
  background: var(--clay);
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn span { font-size: 16px; font-weight: 400; letter-spacing: 0; transition: transform 0.2s ease; }
.btn:hover { background: #7E3D28; color: #FFFFFF; }
.btn:hover span { transform: translateX(4px); }

/* ---------- 01 WHAT WE MAKE ---------- */

/* Four across, portrait 4:5 crops. Each card links to its collection category. */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.cap { display: block; color: inherit; text-decoration: none; }

.cap__media {
  position: relative;
  overflow: hidden;
  background: var(--img-bg);
  aspect-ratio: 4 / 5;
}
.cap__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.cap:hover .cap__media img { transform: scale(1.03); }

/* Per-garment focal points, as set in the comp. */
.cap--trench .cap__media img,
.cap--jacket .cap__media img { object-position: center 40%; }
.cap--down .cap__media img { object-position: center 45%; }

.cap__name {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
}

.cap__desc {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.cap__more {
  display: inline-flex;
  gap: 10px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--clay);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cap:hover .cap__more,
.cap:focus-visible .cap__more { opacity: 1; transform: none; }

/* ---------- 02 HOW WE WORK ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.step { display: flex; flex-direction: column; }

/* Numbered and joined by a hairline, like the Our Story timeline. */
.step__no {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--clay);
}
.step__no::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); }

.step__img {
  width: 100%;
  height: auto; /* the width/height attributes only reserve space; the crop is 4:3 */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--img-bg);
}

.step__title {
  margin-top: 20px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}

.step__desc {
  margin: 8px 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.step__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.step__lead { font-size: 13px; font-weight: 600; color: var(--clay); }

/* Two info rows under the steps, read as one block: key figures, then engagement models.
   One hairline above the pair; the second row just follows. */
.glance {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.engage { margin-top: 36px; }
.glance__head,
.engage__head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--faint);
}

.glance__row {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px;
}
.glance__row dt { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--faint); }
.glance__row dd {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  font-variation-settings: 'opsz' 24;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.glance__row dd.glance__unit {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  font-variation-settings: normal;
  line-height: 1.5;
  color: var(--muted);
  white-space: normal;
}

.engage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 40px; }
.engage__head { grid-column: 1 / -1; }
.engage__name { font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--ink); }
.engage__desc { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------- 03 FABRICS / 05 OUR STORY — contained image + text ---------- */

/* The image stretches to the height of the text column, so the two sides always balance. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 96px;
  align-items: stretch;
}
.feature--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.feature--flip .feature__media { order: 2; }

.feature__media {
  position: relative;
  margin: 0;
  min-height: 480px;
  overflow: hidden;
  background: var(--img-bg);
}
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.feature__body { display: flex; flex-direction: column; justify-content: center; max-width: 600px; padding: 24px 0; }
.feature__lead { margin-top: 28px; font-size: 17px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
.feature__lead:first-child { margin-top: 0; }
.feature__lead + .feature__lead { margin-top: 14px; }
.feature__body .btn { margin-top: 40px; }

/* Fabrics: the two businesses side by side, then a row of cloth swatches. */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.offer { padding-top: 20px; border-top: 1px solid var(--line-strong); }
.offer__label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--clay); }
.offer__title { margin-top: 14px; font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--ink); }
.offer__desc { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--body); text-wrap: pretty; }

.swatches { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch { display: flex; flex-direction: column; }
/* A square of cloth with a pinked (zigzag) bottom edge, like a swatch cut with pinking shears. */
.swatch__cloth {
  display: block;
  aspect-ratio: 1;
  background-color: var(--cloth);
  background-image: var(--weave, none), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.swatch:hover .swatch__cloth { transform: translateY(-6px); }
.swatch__name { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink); }

.swatch--wool      { --cloth: #B08658; }
.swatch--cashmere  { --cloth: #D6C7AE; --weave: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.22), transparent 60%); }
.swatch--gabardine { --cloth: #9F9679; --weave: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 4px); }
.swatch--shell {
  --cloth: #2E3A4A;
  --weave: linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 45%, rgba(255, 255, 255, 0.07) 72%, transparent),
           repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 9px),
           repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 9px);
}

.facts {
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 56px;
}
.fact__label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--faint); }
.fact__value { margin-top: 8px; font-family: var(--serif); font-size: 32px; color: var(--ink); }

/* ---------- 04 MARKETS — 3D globe (drawn by markets-globe.js) ---------- */

.gx { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }

/* Full globe, free to turn in any direction. Height is set to the globe size by the script. */
.gx__stage { position: relative; height: 640px; cursor: grab; }
.gx__stage:active { cursor: grabbing; }
.gx__globe { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.gx-routes { position: absolute; left: 0; top: 0; pointer-events: none; }   /* route lights, between the globe and the pins */
.gx__hint { position: absolute; left: 0; bottom: 0; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--faint); }

/* Pins that ride on the globe */
.gx-anchor { width: 0; height: 0; }
.gx-pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; transform: translate(-7px, -50%); cursor: pointer; pointer-events: auto; white-space: nowrap; }
.gx-pin__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 3px rgba(var(--gx-glow, 208, 138, 108), 0), 0 2px 8px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.45s ease; }
.gx-pin__name { padding: 3px 7px; background: rgba(255, 255, 255, 0.92); font: 700 11px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.gx-pin__year { margin-left: 6px; font-weight: 600; color: var(--clay); }
.gx-pin.is-active .gx-pin__dot { transform: scale(1.35); }
/* A route's light has just arrived: the pin glows for a moment. */
.gx-pin.is-arrive .gx-pin__dot { transform: scale(1.3); box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 7px rgba(var(--gx-glow, 208, 138, 108), 0.4), 0 2px 8px rgba(0, 0, 0, 0.2); }
.gx-pin.is-active.is-arrive .gx-pin__dot { transform: scale(1.5); }
.gx-pin.is-active .gx-pin__name { background: var(--ink); color: #FFFFFF; }
.gx-pin.is-active .gx-pin__year { color: var(--clay-soft); }
.gx-pin--origin .gx-pin__dot { background: var(--ink); }
.gx-pin--left { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }

/* Card: photo + what we make there; re-blooms each time the place changes */
/* All places share one card height (set by markets-globe.js); the facts row sits on the bottom edge. */
.gx-card { display: flex; flex-direction: column; background: #FFFFFF; box-shadow: 0 24px 60px rgba(26, 25, 23, 0.12); overflow: hidden; }
.gx-card.is-blooming { animation: gxBloom 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.gx-card.is-blooming .gx-card__photo img { animation: gxFocus 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes gxBloom { from { clip-path: circle(0% at 0% 50%); } to { clip-path: circle(150% at 0% 50%); } }
@keyframes gxFocus { from { transform: scale(1.15); filter: blur(8px); } to { transform: none; filter: none; } }
.gx-card__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--img-bg); }
.gx-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.gx-card__tag { position: absolute; left: 14px; top: 14px; padding: 5px 9px; background: rgba(255, 255, 255, 0.92); font: 700 11px/1 var(--sans); letter-spacing: 0.16em; color: var(--ink); }
/* Gallery arrows (Dalian card): hidden until the card has more than one photo. */
.gx-card__photo img.is-swapping { animation: gxSwap .6s ease both; }
@keyframes gxSwap { from { opacity: 0.2; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.gx-card__nav {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  font: 400 24px/1 var(--serif);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s ease;
}
.gx-card__nav--prev { left: 14px; }
.gx-card__nav--next { right: 14px; }
.gx-card__nav:hover { background: #FFFFFF; }
.has-gallery .gx-card__nav { display: grid; }
.has-gallery:hover .gx-card__nav, .gx-card__nav:focus-visible { opacity: 1; }
.gx-card__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; }
.gx-card__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transition: background 0.25s ease, transform 0.25s ease; }
.gx-card__dots span.is-on { background: #FFFFFF; transform: scale(1.3); }
.gx-card__body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 24px; }
.gx-card__country { font: 500 32px/1.1 var(--serif); font-variation-settings: 'opsz' 24; color: var(--ink); }
.gx-card__since { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--clay); }
.gx-card__line { margin: 14px 0 20px; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: balance; }
.gx-card__line:empty { display: none; }
.gx-card__facts { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 16px; }
.gx-card__facts:empty { display: none; }
.gx-card__facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--faint); }
.gx-card__facts dd { margin-top: 4px; font: 500 22px/1.1 var(--serif); font-variation-settings: 'opsz' 24; color: var(--ink); white-space: nowrap; }
.gx-card__facts dd small { margin-left: 3px; font: 500 12px/1 var(--sans); color: var(--muted); }
/* A market card has one text fact (what we handle for that market), set in the body face. */
.gx-card__facts.is-text { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 16px; }
.gx-card__facts.is-text dd { margin: 0; font: 500 15px/1.5 var(--sans); white-space: normal; }

.gx__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gx__tabs button { padding: 8px 12px; border: 1px solid var(--line-strong); background: #FFFFFF; font: 700 11px/1 var(--sans); letter-spacing: 0.14em; color: var(--ink); cursor: pointer; }
.gx__tabs button.is-active { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }

/* ---------- 06 CONTACT ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
  gap: 56px;
  align-items: stretch;
}

.contact__media {
  position: relative;
  margin: 0;
  min-height: 560px;
  overflow: hidden;
  background: var(--img-bg);
}
.contact__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.contact__intro { display: flex; flex-direction: column; }
.contact__lead { margin-top: 24px; font-size: 17px; line-height: 1.65; color: var(--body); text-wrap: pretty; }

/* A real person, so the form doesn't feel like shouting into a void. */
.person {
  margin-top: 36px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 18px;
}
.person__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #EDE7DD;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--clay);
}
.person__name { font-size: 16px; font-weight: 600; color: var(--ink); }
.person__role { margin-top: 2px; font-size: 14px; color: var(--muted); }
.person__reply { margin-top: 6px; font-size: 13px; color: var(--faint); }

.channels { margin: 24px 0 0; }
.channels > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.channels dt { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--faint); }
.channels dd { font-size: 15px; color: var(--ink); text-align: right; }
.channels a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--clay-bright); }
.channels a:hover { color: var(--clay); }

.form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.field { display: flex; flex-direction: column; gap: 7px; }
.field--grow { flex-grow: 1; min-height: 0; }

.field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--faint);
}
.field__opt { font-weight: 500; letter-spacing: 0.04em; text-transform: none; }

.field input,
.field textarea {
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}
.field input { height: 44px; padding: 0 12px; }
.field textarea { flex-grow: 1; min-height: 120px; padding: 12px; resize: none; }
.field input::placeholder,
.field textarea::placeholder { color: #A39C91; }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--clay-bright); outline: none; }

.field--file input { height: auto; padding: 12px 0; border-bottom: 0; font-size: 14px; color: var(--muted); }
.field--file input::file-selector-button {
  margin-right: 16px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.12em;
  color: var(--ink);
  cursor: pointer;
}
.field--file input::file-selector-button:hover { border-color: var(--clay); color: var(--clay); }

.form .btn { margin-top: 6px; }
/* Honeypot for spam bots: off-screen, never seen or tabbed to by people. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* After sending, the thank-you line replaces the fields. */
.form__sent { font: 500 24px/1.35 var(--serif); font-variation-settings: 'opsz' 24; color: var(--ink); }
.form.is-sent > :not(.form__sent) { display: none; }
.form__note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.form__note a { color: var(--ink); }
.footer__legal a { color: inherit; }

/* ---------- FOOTER ---------- */

.footer { background: var(--dark-deep); padding: 48px 0 32px; }

.footer__top {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.footer__brand { flex-grow: 1; }
.footer__wordmark {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.14em;
  color: #FFFFFF;
}
.footer__tag {
  margin-top: 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--faint-dark);
}
.footer__contact { display: flex; gap: 24px; align-items: baseline; margin-top: 22px; font-size: 13px; color: var(--on-dark-mut); }
.footer__contact a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.footer__contact a:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }
.footer__contact span { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; }

.footer__nav { display: flex; gap: 30px; flex-wrap: wrap; }
.footer__nav a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--on-dark-mut);
}
.footer__nav a:hover { color: #FFFFFF; }

.footer__bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--dark-line-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__legal { font-size: 10px; letter-spacing: 0.14em; color: var(--on-dark-dim); }
.footer__top-link {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--on-dark-mut);
}
.footer__top-link:hover { color: #FFFFFF; }

/* ---------- MOTION ---------- */

@keyframes dmSettle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes dmLine   { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes dmRise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dmFade   { from { opacity: 0; } to { opacity: 1; } }

.hero__img   { animation: dmSettle 2.2s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nav__inner  { animation: dmFade 0.8s ease-out 0.15s both; }
.hero__eyebrow { animation: dmFade 0.8s ease-out 0.25s both; }
.line        { animation: dmLine 1.15s cubic-bezier(0.16, 1, 0.3, 1) both; }
.line--1     { animation-delay: 0.45s; }
.line--2     { animation-delay: 0.59s; }
.hero__sub   { animation: dmRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both; }
.hero__cue   { animation: dmRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.45s both; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Page-to-page transition (homepage ↔ Our Story). Cross-document view transitions:
   Chrome/Edge 126+ and Safari 18.2+; other browsers simply navigate as normal.
   The old page lifts away, the new one rises in; the nav is its own layer so it stays put. */
@view-transition { navigation: auto; }

.nav { view-transition-name: site-nav; }

@keyframes dmPageOut { to { opacity: 0; transform: translateY(-24px); } }
@keyframes dmPageIn  { from { opacity: 0; transform: translateY(32px); } }

::view-transition-old(root) { animation: dmPageOut 0.35s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: dmPageIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
::view-transition-group(site-nav) { animation-duration: 0.4s; }

/* ---------- RESPONSIVE (not in the desktop comp) ---------- */

@media (max-width: 1180px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
  .s-title { font-size: 48px; }
  .hero__title { font-size: 66px; }
  .feature { gap: 64px; }
}

/* Seven nav links need ~1,110px on one row; collapse to the menu below that. */
/* The menu opens over the whole screen, its links arriving one after another. */
@media (max-width: 1120px) {
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 96px var(--gutter) 48px;
    background: var(--bg);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font: 500 30px/1.2 var(--serif);
    letter-spacing: 0;
  }
  .nav__links.is-open a { animation: dmRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .nav__links.is-open a:nth-child(2) { animation-delay: 0.05s; }
  .nav__links.is-open a:nth-child(3) { animation-delay: 0.1s; }
  .nav__links.is-open a:nth-child(4) { animation-delay: 0.15s; }
  .nav__links.is-open a:nth-child(5) { animation-delay: 0.2s; }
  .nav__links.is-open a:nth-child(6) { animation-delay: 0.25s; }
  .nav__links a::after, .nav__ind { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__tools { margin-left: auto; }
}

@media (max-width: 1180px) {
  /* Contact: three columns get too narrow here — drop the photo, keep the person and the form side by side. */
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact__media { display: none; }
  .glance__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
}

/* Below ~1080 a one-line title plus its side text no longer fit side by side: stack them. */
@media (max-width: 1080px) {
  .s-head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 960px) {
  :root { --gutter: 32px; }

  /* Four 4:5 crops get too narrow to read below this — pair them up. */
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }

  .s-head { margin-bottom: 40px; }

  .feature,
  .feature--flip { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .feature--flip .feature__media { order: 0; }
  .feature__media { min-height: 0; aspect-ratio: 5 / 4; }

  .gx { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .hero__media { width: 100%; }
  .hero__scrim {
    width: 100%;
    background: linear-gradient(to bottom, rgba(247, 247, 244, 0.97) 0%, rgba(247, 247, 244, 0.92) 46%, rgba(247, 247, 244, 0.55) 100%);
  }
  /* The film keeps its light: the headline lands on the plain studio wall, not on a wash. */
  .hero--film .hero__scrim { width: 60%; background: linear-gradient(to right, rgba(247, 247, 244, 0.3), rgba(247, 247, 244, 0)); }
}

@media (max-width: 720px) {
  .hs { padding: 72px 0; }

  .hero, .hero__inner { min-height: 540px; }
  .hero { aspect-ratio: auto; }   /* with the fixed wide ratio, the 540px minimum height would force the hero 1,260px wide */
  .hero__title { font-size: 48px; }
  .s-title, .s-title--contact { font-size: 38px; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engage { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 56px; }
  .glance { margin-top: 56px; }
  .glance__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .glance__row dd { font-size: 30px; }
  .gx-pin__name { font-size: 10px; letter-spacing: 0.1em; }

  .facts { gap: 32px; }
  .contact { grid-template-columns: minmax(0, 1fr); gap: 48px; }

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

@media (max-width: 560px) {
  .cap-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cap__name { font-size: 28px; }
  .facts { grid-template-columns: repeat(2, auto); }
}

@media (max-width: 460px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .offers { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__img, .nav__inner, .hero__eyebrow, .line, .hero__sub, .hero__cue { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cap:hover .cap__media img { transform: none; }
  .cap__more { opacity: 1; transform: none; }
  .gx-card.is-blooming, .gx-card.is-blooming .gx-card__photo img { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Small serif (20–32px headings and figures). At these sizes the display cut's hairlines read as
   grey, so use Bodoni Moda's small optical size (sturdier strokes) and a semibold weight.
   Kept last: several of these use the `font:` shorthand above, which resets variation settings. */
.cap__name, .step__title, .engage__name, .offer__title, .fact__value,
.gx-card__country, .gx-card__facts dd, .form__sent {
  font-weight: 600;
  font-variation-settings: 'opsz' 11;
}