/* Mastertex International
   Engineered and quiet, like a technical textile: white and mist-grey pages,
   deep indigo denim for the hero, the process and the specimen plates, thin
   rules, and Jost set light in wide-spaced capitals. Copper is kept for
   stitching and map pins. */

:root {
  --ink: #141a26;
  --indigo: #18213a;
  --indigo-2: #232e4d;
  --text: #2e3440;
  --grey: #5d6471;
  --line: #dfe3e9;
  --line-strong: #c9cfd8;
  --line-dark: rgb(255 255 255 / .16);
  --mist: #f2f4f7;
  --thread: #c9963f;
  --thread-light: #dcab55;

  /* The wash range, raw to bleach */
  --raw: #18223f;
  --rinse: #22305a;
  --darkstone: #2f4777;
  --midstone: #44629a;
  --lightstone: #9fb6d5;
  --bleach: #d3deed;
  --cotton: #f2f6fa;

  --wa: #25d366;
  --wa-deep: #1da851;
  --error: #a3241c;

  --font: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --gap: clamp(16px, 2vw, 28px);
  --header-h: 76px;

  /* Denim surface: fibre noise, vertical slub streaks and a right-hand twill. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --slub: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6 .012' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='.55'/%3E%3C/svg%3E");
  --twill: repeating-linear-gradient(120deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 2px, rgb(0 0 0 / .12) 2px 3px);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* Headings are wide-spaced capitals, kept to a modest size. */
h1, h2, h3 {
  color: var(--ink);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.375rem);
  line-height: 1.14;
  letter-spacing: .06em;
}

h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); }

h3 {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .18em;
}

p { text-wrap: pretty; }

/* A larger line of copy that leads a section. */
.statement {
  color: var(--ink);
  font-size: clamp(1.375rem, 2.1vw, 1.75rem);
  font-weight: 400;
  line-height: 1.4;
}

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

.hero :focus-visible,
.section-dark :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

.nowrap { white-space: nowrap; }

/* ---------- Denim surface ---------- */

.denim {
  background-color: var(--bg, var(--indigo));
  background-image: var(--noise), var(--slub), var(--twill);
  background-blend-mode: soft-light, overlay, normal;
}

/* A specimen plate: a panel of indigo denim set into a light page. */
.plate {
  --bg: var(--indigo);
  color: #fff;
}

/* ---------- Buttons ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 0;
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--bleach); }

.btn-line-light { border-color: rgb(255 255 255 / .55); color: #fff; }
.btn-line-light:hover { border-color: #fff; background: rgb(255 255 255 / .08); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--indigo-2); }

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

.btn-wa { background: var(--wa); color: var(--ink); }
.btn-wa:hover { background: #3fe07c; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / .97);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.wordmark {
  display: inline-grid;
  justify-items: center;
  gap: 6px;
  color: var(--ink);
  line-height: 1;
  text-decoration: none;
}

.wordmark-name {
  margin-right: -0.32em; /* cancels the trailing letter-space so the mark centres */
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.wordmark-sub {
  width: 100%;
  padding-top: 6px;
  border-top: 1px solid currentColor;
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: .62em;
  text-align: center;
  text-indent: .62em;
  text-transform: uppercase;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}

.nav-list a {
  padding-block: 6px;
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat;
  color: var(--text);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-size .25s ease, color .2s ease;
}

.nav-list a:hover {
  background-size: 100% 1px;
  color: var(--ink);
}

.nav-list .nav-cta {
  padding: 11px 18px;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
}

.nav-list .nav-cta:hover {
  background: var(--ink);
  color: #fff;
}

.nav-toggle { display: none; }

@media (max-width: 1099px) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 18px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .js .nav-list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--gutter) 28px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgb(20 26 38 / .08);
  }

  .js .nav-list:not(.is-open) { display: none; }

  .js .nav-list a {
    display: block;
    padding-block: 16px;
    border-bottom: 1px solid var(--line);
    background: none;
    font-size: .75rem;
  }

  .js .nav-list .nav-cta {
    margin-top: 20px;
    padding-block: 15px;
    border: 1px solid var(--ink);
    text-align: center;
  }

  /* Without JavaScript the links simply wrap under the logo. */
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: 14px; }
  html:not(.js) .nav-list { flex-wrap: wrap; }
}

/* ---------- Hero ---------- */

.hero {
  --bg: var(--indigo);
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* Light falling across the cloth from the top right. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 85% 15%, rgb(120 150 210 / .16), transparent 70%),
    linear-gradient(transparent 55%, rgb(5 9 20 / .35));
  pointer-events: none;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--gap);
  min-height: min(calc(100svh - var(--header-h) - 116px), 760px);
  padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 64px);
}

.hero-copy { grid-column: 1 / 7; }

.hero h1 { color: #fff; }

.lead {
  max-width: 31em;
  margin-top: 28px;
  color: rgb(255 255 255 / .76);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.hero .actions { margin-top: 40px; }

/* The tech-pack flat: white line drawing, copper stitching, parts called out. */
.techflat {
  grid-column: 7 / 13;
  margin-inline: -12px;
}

.techflat svg {
  width: 100%;
  height: auto;
}

.tf-line,
.tf-loop {
  fill: none;
  stroke: rgb(255 255 255 / .92);
  stroke-width: .5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tf-loop { fill: var(--indigo); }

.tf-stitch {
  fill: none;
  stroke: var(--thread-light);
  stroke-width: .42;
  stroke-dasharray: 1.3 1.1;
  stroke-linecap: round;
}

.tf-metal { fill: var(--thread-light); }

.tf-lead {
  fill: none;
  stroke: rgb(255 255 255 / .42);
  stroke-width: 1;
}

.tf-dot {
  fill: var(--indigo);
  stroke: #fff;
  stroke-width: 1.2;
}

.tf-label {
  fill: rgb(255 255 255 / .82);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .2em;
}

.tf-view { fill: rgb(255 255 255 / .5); }

@media (prefers-reduced-motion: no-preference) {
  .tf-line {
    stroke-dasharray: 1;
    animation: plot 1.6s cubic-bezier(.4, .1, .2, 1) .2s both;
  }

  .tf-stitch, .tf-loop, .tf-metal {
    animation: appear .8s ease 1.4s both;
  }

  .tf-callouts > g {
    animation: appear .6s ease both;
    animation-delay: calc(1.6s + var(--i) * 90ms);
  }

  .tf-view { animation: appear .6s ease 2.4s both; }

  @keyframes plot {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }

  @keyframes appear {
    from { opacity: 0; }
  }
}

/* Key facts along the foot of the hero. */
.hero-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.hero-specs div {
  padding: 22px 24px 30px 0;
}

.hero-specs div + div {
  padding-left: 24px;
  border-left: 1px solid var(--line-dark);
}

.hero-specs dt {
  color: rgb(255 255 255 / .55);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero-specs dd {
  margin-top: 6px;
  color: #fff;
  font-size: .9375rem;
  line-height: 1.5;
}

@media (max-width: 999px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .hero-copy,
  .techflat { grid-column: 1; }

  .techflat {
    width: min(100%, 640px);
    margin: 48px auto 0;
  }

  .hero-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero-specs div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .hero-specs div:nth-child(n + 3) { border-top: 1px solid var(--line-dark); }
}

/* On a phone the labels would be too small to read, so the drawing is left
   to the product tiles below. */
@media (max-width: 599px) {
  .techflat { display: none; }
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(88px, 10vw, 144px);
  scroll-margin-top: var(--header-h);
}

.section-mist { background: var(--mist); }

.section-dark {
  --bg: var(--indigo);
  color: rgb(255 255 255 / .74);
}

.section-dark h2,
.section-dark h3 { color: #fff; }

.section-intro {
  max-width: 46rem;
  margin: 0 auto clamp(56px, 6vw, 88px);
  text-align: center;
}

.section-intro p {
  margin-top: 22px;
  color: var(--grey);
  font-size: 1.0625rem;
}

.section-dark .section-intro p { color: rgb(255 255 255 / .74); }

.block { margin-top: clamp(72px, 8vw, 112px); }

.block-title { margin-bottom: 24px; }

/* ---------- What we make ---------- */

.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px var(--gap);
}

.product-media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--mist);
}

.flat {
  width: 64%;
  height: auto;
  aspect-ratio: 160 / 200;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flat .stitch {
  stroke: var(--thread);
  stroke-width: 1;
  stroke-dasharray: 2.6 2.2;
}

.flat .loop { fill: var(--mist); }

.flat .metal {
  fill: var(--thread);
  stroke: none;
}

.product h3 { margin-top: 22px; }

.product p {
  margin-top: 6px;
  color: var(--grey);
  font-size: .9375rem;
}

.products-note {
  margin-top: 56px;
  color: var(--grey);
  text-align: center;
}

@media (max-width: 899px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Product development ---------- */

.development {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 48px var(--gap);
}

.development-copy { grid-column: 1 / 6; }

.development-copy .statement { margin-top: 24px; }

.development-copy h3 { margin-top: 36px; }

.development-copy p:not(.statement) {
  margin-top: 10px;
  color: var(--grey);
}

/* A mood board: the jacket look runs tall on the left, two detail crops
   stack beside it, and the tassel trim runs across the foot. Each photo is
   cropped to its cell, keeping the part that matters in view. */
.development-photos {
  grid-column: 7 / 13;
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: 1fr 1fr auto;
  gap: 12px;
}

.dp {
  position: relative;
  overflow: hidden;
  background: var(--line);
}

.dp img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dp-jacket {
  grid-row: 1 / 3;
  aspect-ratio: 3 / 4;
}

.dp-jacket img { object-position: 30% 50%; }

.dp-patch,
.dp-skirt { grid-column: 2; }

.dp-patch img,
.dp-skirt img { object-position: 50% 100%; }

.dp-tassels {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 1;
}

.dp-tassels img { object-position: 50% 78%; }

@media (max-width: 899px) {
  .development-copy,
  .development-photos { grid-column: 1 / -1; }
}

/* ---------- Laundry ---------- */

.laundry {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: clamp(48px, 6vw, 80px) var(--gap);
}

/* The wash card: fabric swatches hung from a stitched band, pinked at the hem. */
.washcard {
  grid-column: 1 / 7;
  display: grid;
  gap: 28px;
  padding: clamp(32px, 5vw, 64px) clamp(28px, 4.5vw, 60px) clamp(24px, 3vw, 36px);
}

.washcard-card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: clamp(300px, 32vw, 420px);
}

.washcard-band {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-inline: -10px;
  padding-bottom: 6px;
  background: var(--cotton);
  box-shadow: 0 6px 14px rgb(0 0 0 / .35);
}

.washcard-band::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 7px;
  left: 12px;
  height: 1px;
  background: linear-gradient(90deg, var(--thread) 0 5px, transparent 5px 9px) 0 0 / 9px 100% repeat-x;
}

.washcard-brand {
  color: var(--ink);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(5px, .8vw, 9px);
  margin-top: -4px;
}

.swatch {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / .4));
}

.swatch-cloth {
  --tooth: 6px;
  position: absolute;
  inset: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) var(--tooth) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) var(--tooth) repeat-x;
}

.swatch-label {
  position: relative;
  color: rgb(255 255 255 / .85);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.swatch-light .swatch-label { color: var(--ink); }

.washcard figcaption {
  max-width: 34em;
  color: rgb(255 255 255 / .66);
  font-size: .8125rem;
  line-height: 1.6;
}

.laundry-copy { grid-column: 8 / 13; }

.laundry-copy .statement { margin-top: 24px; }

.laundry-copy h3 { margin-top: 36px; }

.laundry-copy p:not(.statement) {
  margin-top: 10px;
  color: var(--grey);
}

.wash-photos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.wash-photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 999px) {
  .washcard,
  .laundry-copy { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
  .wash-photos { grid-template-columns: minmax(0, 1fr); }
  .washcard-card { height: 300px; }
}

/* ---------- How we work ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
}

.steps li {
  padding: 26px 0 44px;
  border-top: 1px solid var(--line-dark);
}

.step-n {
  display: block;
  color: var(--thread-light);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  font-variant-numeric: tabular-nums;
}

.steps h3 { margin-top: 18px; }

.steps p {
  max-width: 22em;
  margin-top: 10px;
  font-size: .9375rem;
  line-height: 1.65;
}

.terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px var(--gap);
}

.terms div,
.facts div {
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
}

.terms dt {
  color: #fff;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .14em;
}

.terms dd,
.facts dd {
  max-width: 22em;
  margin-top: 14px;
  font-size: .9375rem;
  line-height: 1.65;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px var(--gap);
}

.facts dt {
  color: #fff;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.facts dd {
  max-width: 26em;
  margin-top: 10px;
}

.facts a {
  color: #fff;
  text-decoration-color: var(--thread-light);
  text-underline-offset: 3px;
}

@media (max-width: 999px) {
  .steps,
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 759px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li { padding-bottom: 32px; }
}

/* ---------- Factories ---------- */

.network {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 40px var(--gap);
}

/* The map: Natural Earth land in a twill hatch (assets/map.svg), stitched routes
   from Hong Kong drawn over it, and pins and labels placed in HTML so they stay
   the same size at any width. */
.factory-map {
  grid-column: 1 / 8;
  position: relative;
  margin: 0;
  aspect-ratio: 760.2 / 580.5;
  overflow: hidden;
}

.map-base,
.map-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-marks path {
  fill: none;
  stroke: var(--thread-light);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.map-labels {
  position: absolute;
  inset: 0;
}

.map-label {
  position: absolute;
  top: calc(var(--y) * 1%);
  left: calc(var(--x) * 1%);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgb(10 15 30 / .8);
  transform: translate(-6px, -50%); /* centres the pin on the place */
}

.map-label.is-left {
  flex-direction: row-reverse;
  text-align: right;
  transform: translate(calc(-100% + 6px), -50%);
}

.map-name small {
  display: block;
  margin-top: 2px;
  color: rgb(255 255 255 / .62);
  font-size: .625rem;
  letter-spacing: .14em;
}

/* Factories are copper buttons, offices are open rings. */
.map-label::before,
.key {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(0 0 0 / .3) 0 1.5px, var(--thread-light) 2px);
}

.map-label::before { box-shadow: 0 0 0 3px var(--bg); }

.map-label.is-office::before,
.key-office {
  border: 2px solid #fff;
  background: var(--bg);
}

.factory-map figcaption {
  position: absolute;
  bottom: 18px;
  left: 20px;
}

.map-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(255 255 255 / .7);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.key { display: inline-block; }
.key-office { margin-left: 12px; }

.network-side { grid-column: 9 / 13; }

/* Group figures in a two-by-two grid. */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.figures div {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--line);
}

.figures div:nth-child(even) {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.figures dt {
  color: var(--ink);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.figures dd {
  margin-top: 4px;
  color: var(--grey);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sites { margin-top: 36px; }

.sites li {
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}

.sites li:first-child { border-top: 1px solid var(--line); }

.sites h3 span {
  margin-left: 8px;
  color: var(--grey);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: none;
}

.sites p {
  margin-top: 4px;
  color: var(--grey);
  font-size: .9375rem;
}

.sites-note {
  margin-top: 18px;
  color: var(--grey);
  font-size: .875rem;
}

/* Photos from the factory floor. */
.floor {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--gap);
  margin-top: clamp(72px, 8vw, 112px);
}

.floor-copy { grid-column: 1 / 4; }

.floor-copy p {
  margin-top: 12px;
  color: var(--grey);
}

.floor-photos {
  grid-column: 4 / 13;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 14px;
}

.floor-photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 215 / 199;
  object-fit: cover;
}

.floor-photos figcaption {
  margin-top: 10px;
  color: var(--grey);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.offices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px var(--gap);
}

.offices li {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--grey);
  font-size: .9375rem;
}

.offices strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 999px) {
  .factory-map,
  .network-side,
  .floor-copy,
  .floor-photos { grid-column: 1 / -1; }

  .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .map-label { gap: 6px; font-size: .5625rem; }
  .map-name small { display: none; }
  .factory-map figcaption { top: 12px; bottom: auto; left: 14px; } /* clears the Phnom Penh label */
  .floor-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offices { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Responsibility ---------- */

.resp-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px var(--gap);
}

.resp-cols > div {
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}

.resp-cols p {
  margin-top: 12px;
  color: var(--grey);
  font-size: .9375rem;
}

/* Accreditation logos, each on a white tile. */
.cert-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.cert-logos li {
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.cert-logos img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 859px) {
  .resp-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- About ---------- */

.story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 48px var(--gap);
}

.story-media { grid-column: 1 / 6; }

.story-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.story-copy { grid-column: 7 / 13; }

.story-copy .statement { margin-top: 28px; }

.story-copy p:not(.statement) {
  max-width: 32em;
  margin-top: 20px;
  color: var(--grey);
}

/* Showroom photos, laid out like the factory floor set. */
.showroom {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--gap);
  margin-top: clamp(72px, 8vw, 112px);
}

.showroom-copy { grid-column: 1 / 4; }

.showroom-copy p {
  margin-top: 12px;
  color: var(--grey);
}

.showroom-copy .btn { margin-top: 28px; }

.showroom-photos {
  grid-column: 4 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.showroom-photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 999px) {
  .showroom-copy,
  .showroom-photos { grid-column: 1 / -1; }
}

.brands-block {
  margin-top: clamp(88px, 10vw, 136px);
  text-align: center;
}

/* Each brand on a white tile, so its own colours read cleanly. Logos are sized
   in index.html so wide and compact marks look equally heavy. */
.brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.brands li {
  display: grid;
  place-items: center;
  flex: 0 0 calc((100% - 5 * 12px) / 6);
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.brands img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 999px) {
  .story-media { grid-column: 1 / 6; }
  .story-copy { grid-column: 6 / 13; }
  .brands li { flex-basis: calc((100% - 3 * 12px) / 4); }
}

@media (max-width: 759px) {
  .story-media,
  .story-copy { grid-column: 1 / -1; }

  .story-media { width: min(100%, 420px); }
  .brands li { flex-basis: calc((100% - 12px) / 2); min-height: 88px; }
  .brands img { max-width: 86%; }
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 56px var(--gap);
}

.contact-main { grid-column: 1 / 8; }

.contact-details {
  grid-column: 9 / 13;
  padding-top: 6px;
}

.contact-intro {
  max-width: 34em;
  margin-top: 20px;
  color: var(--grey);
  font-size: 1.0625rem;
}

.enquiry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  margin-top: 44px;
}

.field {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field-full { grid-column: 1 / -1; }

.field label,
.field legend {
  padding: 0;
  color: var(--ink);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.field legend { margin-bottom: 12px; }

.enquiry input[type="text"],
.enquiry select,
.enquiry textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.enquiry textarea {
  min-height: 150px;
  line-height: 1.6;
  resize: vertical;
}

.enquiry ::placeholder { color: #7a818d; }

.enquiry :is(input, select, textarea):focus-visible {
  border-color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 0;
}

.enquiry [aria-invalid="true"] { border-color: var(--error); }

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checks label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.checks label:has(input:checked) {
  border-color: var(--ink);
  background: var(--bleach);
}

.checks label:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.checks input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
}

.checks input:focus-visible { outline: none; }

.form-error {
  grid-column: 1 / -1;
  color: var(--error);
  font-weight: 500;
}

.form-note {
  color: var(--grey);
  font-size: .875rem;
}

.contact-details dl div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 12px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line-strong);
}

.contact-details dl div:first-child { border-top: 1px solid var(--ink); }

.contact-details dt {
  padding-top: 3px;
  color: var(--grey);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.contact-details dd { color: var(--ink); }

.contact-details dd a {
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.contact-details dd a:hover { text-decoration-color: currentColor; }

/* The office map, toned down to sit with the rest of the page. */
.map {
  aspect-ratio: 4 / 3;
  margin-top: 28px;
  overflow: hidden;
  background: var(--line);
}

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

@media (max-width: 899px) {
  .contact-main,
  .contact-details { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
  .enquiry { grid-template-columns: minmax(0, 1fr); }
  .enquiry .btn { width: 100%; }
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: clamp(64px, 8vw, 96px) 104px; /* the bottom clears the WhatsApp button */
  background: var(--ink);
  color: rgb(255 255 255 / .68);
}

.site-footer .wordmark { color: #fff; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-dark);
}

.footer-grid p { font-size: .9375rem; }

.footer-grid .footer-label {
  margin-bottom: 10px;
  color: rgb(255 255 255 / .45);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.footer-tag { margin-top: 20px; }

.footer-links {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 6px;
  font-size: .9375rem;
}

.footer-links a,
.footer-base a {
  text-decoration-color: rgb(255 255 255 / .3);
  text-underline-offset: 4px;
}

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  color: rgb(255 255 255 / .5);
  font-size: .75rem;
  letter-spacing: .08em;
}

@media (max-width: 999px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Floating WhatsApp button ---------- */

.wa-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  text-decoration: none;
}

.wa-float-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--wa-deep);
  box-shadow: 0 8px 22px rgb(20 26 38 / .28), 0 2px 6px rgb(20 26 38 / .16);
  transition: transform .15s ease, background-color .15s ease;
}

.wa-float-icon svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

/* Positioned outside the button so the hidden label never adds a clickable area. */
.wa-float-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  padding: 10px 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgb(20 26 38 / .18);
  color: var(--ink);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition: opacity .18s ease, transform .18s ease;
}

.wa-float:hover .wa-float-icon { background: #178f44; transform: translateY(-2px); }

.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label {
  opacity: 1;
  transform: translate(0, -50%);
}

.wa-float:focus-visible { outline: none; }

.wa-float:focus-visible .wa-float-icon {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff, 0 8px 22px rgb(20 26 38 / .28);
}

@media (hover: none) {
  .wa-float-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}