/* ==========================================================================
   SALADIYAT - Strategic Connections. Exceptional Manufacturing.
   Palette: deep charcoal / warm cream / vibrant saffron + terracotta.
   Type: high-contrast serif display + geometric sans body.
   ========================================================================== */

:root {
  --ink:        #251a16;
  --ink-2:      #2f221c;
  --ink-3:      #3a2b23;

  --ivory:      #f9f4ea;
  --ivory-2:    #f3ebda;
  --ivory-3:    #ece0ca;

  /* Vibrant saffron accent, with legible variants for light and dark grounds. */
  --gold:       #d99a2b;
  --gold-ink:   #9d6512;
  --gold-soft:  #f0b95a;

  /* Terracotta secondary, used for editorial emphasis. */
  --clay:       #b8552f;
  --clay-soft:  #e69068;

  /* Legacy aliases so every accent flows from the two colours above. */
  --champagne:  var(--gold);
  --champagne-2:var(--gold-soft);

  --text:       #2a2822;
  --muted:      #6b655a;
  --on-dark:    #f2ece0;
  --on-dark-mut:rgba(242, 236, 224, .64);

  --line:       rgba(42, 40, 34, .14);
  --line-dark:  rgba(242, 236, 224, .16);

  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans:  "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1360px;
  --gut:  clamp(1.25rem, 5vw, 4rem);
  --sect: clamp(2.6rem, 4.4vw, 4.6rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- reset -- */

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.68;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--on-dark); padding: .9rem 1.4rem;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
}
.skip:focus { left: 0; }

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

/* ---------------------------------------------------------- typography -- */

.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.005em;
  margin: 0;
  color: inherit;
}

.display--xl  { font-size: clamp(2rem, 6.4vw, 5.6rem); }
.display--lg  { font-size: clamp(1.85rem, 4.6vw, 3.9rem); }
.display--md  { font-size: clamp(1.55rem, 3.1vw, 2.65rem); }
.display--sm  { font-size: clamp(1.3rem, 2.1vw, 1.85rem); line-height: 1.2; }

/* Long product and brand words must never widen the page. */
.display, .lede, .statement, p, li { overflow-wrap: break-word; }

.display em { font-style: italic; color: var(--clay); }
.section--ink .display em,
.section--ink-2 .display em,
.hero .display em { color: var(--gold-soft); }

.eyebrow {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1.1rem;
}
.eyebrow--dark { color: var(--gold-soft); }

.lede {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.55;
  font-weight: 300;
  color: var(--text);
  margin: 0 0 1.15rem;
}

p { margin: 0 0 1.05rem; }
p:last-child { margin-bottom: 0; }

.muted { color: var(--muted); }
.center { text-align: center; }

.rule {
  height: 1px; border: 0; margin: clamp(1.9rem, 3.4vw, 3.1rem) 0;
  background: var(--line);
}
.rule--dark { background: var(--line-dark); }

.statement {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.7vw, 2.3rem);
  line-height: 1.35;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  margin: 0;
}

.meta-line {
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--on-dark-mut);
  margin: 1.5rem 0 0;
}

/* ------------------------------------------------ contextual typography --

   Headings and paragraphs carry no classes in the markup. Each section
   assigns type from its own wrapper, so copy coming out of the database
   styles itself with no class hooks to maintain.

   The convention inside a section is:
     <small>   eyebrow label
     <h1>/<h2> section heading
     <h3>/<h4> sub-heading
     first <p> after a heading, or first <p> in a column   standfirst
     any other <p>                                          body copy
     <blockquote>                                           pull quote

   These rules sit before the component blocks below, so a component that
   needs its own size (.pillar h3, .step h3, .card h4) still overrides them.
   -------------------------------------------------------------------- */

.hero small,
.section small,
.closing small,
.page-hero small {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1.1rem;
}
.hero small,
.closing small,
.page-hero small,
.section--ink small,
.section--ink-2 small { color: var(--gold-soft); }

.hero h1,
.hero h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 6.4vw, 5.6rem);
  line-height: 1.06;
  letter-spacing: -.005em;
  margin: 0;
}

.section h2,
.closing h2,
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.85rem, 4.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.005em;
  margin: 0;
}
.closing h2 { font-size: clamp(2rem, 6.4vw, 5.6rem); }

.section h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  line-height: 1.2;
  margin: 0;
}

.hero h1 em, .hero h2 em, .section h2 em, .section h3 em { font-style: italic; }

/* Body copy, then the standfirst that opens a heading or a column. */
.section p { color: var(--muted); }
.section--ink p,
.section--ink-2 p,
.hero p,
.closing p { color: var(--on-dark-mut); }

.section h2 + p,
.split > div > p:first-child,
.hero h1 + p,
.hero h2 + p,
.closing h2 + p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.55;
  font-weight: 300;
  color: var(--text);
  margin: 0 0 1.15rem;
}
.section--ink h2 + p,
.section--ink-2 h2 + p,
.section--ink .split > div > p:first-child,
.section--ink-2 .split > div > p:first-child { color: var(--on-dark); }

.hero h1 + p,
.hero h2 + p,
.closing h2 + p { font-style: italic; color: var(--gold-soft); }

.section blockquote,
.section--ink blockquote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.7vw, 2.3rem);
  line-height: 1.35;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  margin: 0;
}
.section--ink blockquote,
.section--ink-2 blockquote { color: var(--on-dark); }

/* -------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 820px; }
.wrap--mid    { max-width: 1020px; }

section[id] { scroll-margin-top: 92px; }

.section { padding-block: var(--sect); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.section--ink   { background: var(--ink);   color: var(--on-dark); }
.section--ink-2 { background: var(--ink-2); color: var(--on-dark); }
.section--warm  { background: var(--ivory-2); }
.section--deep  { background: var(--ivory-3); }

.section--ink .lede,
.section--ink-2 .lede,
.section--ink h2 + p,
.section--ink-2 h2 + p { color: var(--on-dark); }
.section--ink .muted,
.section--ink-2 .muted { color: var(--on-dark-mut); }
.section--ink .rule,
.section--ink-2 .rule { background: var(--line-dark); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 3.8vw, 4rem);
  align-items: start;
}
.split--even   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--flip   { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--center { align-items: center; }

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}
.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}

.section-head { max-width: 780px; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------ wordmark -- */

/* The supplied wordmark is black artwork on a white ground. On dark surfaces
   it is inverted and screened; on light surfaces it is multiplied. Either way
   the white box disappears and only the letterforms remain. */
/* contrast() crushes the JPEG's off-white ground to pure black after
   inversion, so screen blending leaves no visible panel behind the letters. */
.wordmark {
  width: clamp(150px, 15vw, 208px);
  filter: invert(1) contrast(1.7);
  mix-blend-mode: screen;
}
.wordmark--light {
  filter: contrast(1.7);
  mix-blend-mode: multiply;
}
.wordmark--closing {
  width: clamp(150px, 16vw, 215px);
  margin: clamp(1.25rem, 2.2vw, 1.75rem) auto clamp(.9rem, 1.4vw, 1.2rem);
}
.wordmark--footer { width: clamp(140px, 14vw, 180px); margin-bottom: 1.75rem; }

/* ------------------------------------------------------------ masthead -- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
}

.masthead__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1.05rem var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transition: padding .4s var(--ease);
}
.masthead.is-condensed .masthead__inner { padding-block: .7rem; }

.masthead__brand { display: block; line-height: 0; flex: 0 0 auto; }
.masthead__brand .wordmark { width: clamp(124px, 11vw, 168px); transition: width .4s var(--ease); }
.masthead.is-condensed .masthead__brand .wordmark { width: clamp(106px, 9vw, 140px); }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.nav ul { display: flex; gap: clamp(.9rem, 1.8vw, 1.75rem); }
.nav li { white-space: nowrap; }

.nav a {
  display: inline-block;
  white-space: nowrap;
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--on-dark-mut);
  padding-block: .35rem;
  position: relative;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--champagne);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav a:hover { color: var(--on-dark); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--on-dark); }

.nav__cta { white-space: nowrap; padding: .75rem 1.3rem; font-size: .64rem; letter-spacing: .17em; }
@media (max-width: 1380px) { .nav__cta { display: none; } }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger__bars, .burger__bars::before, .burger__bars::after {
  content: ""; display: block;
  width: 24px; height: 1px; background: var(--on-dark);
  transition: transform .4s var(--ease), opacity .25s var(--ease);
}
.burger__bars::before { position: absolute; transform: translateY(-7px); }
.burger__bars::after  { position: absolute; transform: translateY(7px); }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after  { transform: rotate(-45deg); }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.9rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--ivory); }
.btn:hover::before { transform: scaleX(1); }

.btn--gold { border-color: var(--champagne); color: var(--champagne); }
.btn--gold::before { background: var(--champagne); }
.btn--gold:hover { color: var(--ink); }

.btn--ghost { border-color: var(--line-dark); color: var(--on-dark); }
.btn--ghost::before { background: var(--champagne); }
.btn--ghost:hover { color: var(--ink); border-color: var(--champagne); }

.btn--solid {
  background: var(--ink);
  color: var(--ivory);
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn--solid::before { display: none; }
.btn--solid:hover { background: var(--champagne); color: var(--ink); border-color: var(--champagne); }

.btn-row {
  display: flex; flex-wrap: wrap;
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  margin-top: clamp(1.4rem, 2.2vw, 1.9rem);
}
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-ink);
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(217, 154, 43, .45);
  transition: border-color .4s var(--ease), gap .4s var(--ease);
}
.section--ink .link-arrow,
.pathway .link-arrow { color: var(--gold-soft); }
.link-arrow::after { content: "\2192"; transition: transform .4s var(--ease); }
.link-arrow:hover { border-color: var(--gold); gap: 1.1rem; }
.link-arrow:hover::after { transform: translateX(3px); }

/* -------------------------------------------------------------- frames -- */

.frame {
  position: relative;
  overflow: hidden;
  background: var(--ivory-3);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

.frame--tall   { aspect-ratio: 4 / 5; }
.frame--wide   { aspect-ratio: 16 / 10; }
.frame--square { aspect-ratio: 1 / 1; }
.frame--band   { aspect-ratio: 21 / 5.5; }

/* Placeholder: a woven, fabric-like texture rather than an empty grey box. */
.frame__weave {
  position: absolute; inset: 0;
  background-color: var(--ink-2);
  background-image:
    repeating-linear-gradient(90deg, rgba(242,236,224,.055) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg,  rgba(242,236,224,.045) 0 1px, transparent 1px 7px),
    radial-gradient(120% 90% at 25% 15%, rgba(217,154,43,.28), transparent 62%),
    linear-gradient(140deg, #3a2b23 0%, #251a16 100%);
}
.frame__weave::after {
  content: "";
  position: absolute; inset: clamp(.8rem, 2vw, 1.4rem);
  border: 1px solid rgba(240, 185, 90, .24);
}

.frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-dark);
  background: linear-gradient(to top, rgba(18,18,15,.78), transparent);
}

.frame-stack { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.frame-stack--offset { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.frame-stack--offset > *:last-child { margin-top: clamp(2rem, 6vw, 5rem); }

/* ---------------------------------------------------------------- hero -- */

.hero {
  background: var(--ink);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.25rem, 4.5vw, 4rem) 0; /* the marquee closes the section */
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 78% 20%, rgba(217,154,43,.20), transparent 65%),
    radial-gradient(60% 60% at 10% 90%, rgba(184,85,47,.16), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.hero h1, .hero h2 { color: var(--on-dark); }
.hero h1 + p, .hero h2 + p {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-style: italic;
  color: var(--champagne-2);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 1.5rem;
  line-height: 1.5;
}
.hero p { color: var(--on-dark-mut); max-width: 56ch; }

/* ------------------------------------------------------------- marquee -- */

.marquee {
  position: relative;
  margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
  padding-block: clamp(.85rem, 1.6vw, 1.25rem);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__set {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.marquee__set li {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-right: clamp(2rem, 4vw, 3.5rem);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  color: var(--on-dark-mut);
}
.marquee__set li::after {
  content: "";
  width: 5px; height: 5px;
  background: var(--champagne);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

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

.marquee__track--slow    { animation-duration: 62s; }
.marquee__track--reverse { animation-direction: reverse; }

/* Light variant, used by the client bands. */
.marquee--light {
  border-color: var(--line);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.marquee--flush { margin-top: -1px; }

.marquee__set--clients li::after { content: none; }

.marquee__set--clients .client {
  display: flex;
  align-items: center;
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.75rem, 3.4vw, 3.25rem);
  font-family: var(--sans);
  font-size: clamp(.9rem, 1.15vw, 1.05rem);
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  transition: color .4s var(--ease);
}
/* Logos only — no names. Each cell is a fixed height so wordmarks of very
   different proportions still sit on one optical line. */
.marquee__set--clients .client {
  height: clamp(56px, 6vw, 78px);
  padding-inline: clamp(1.5rem, 3vw, 2.75rem);
  justify-content: center;
}
.client__mark {
  max-height: clamp(26px, 3vw, 38px);
  max-width: clamp(120px, 13vw, 175px);
  width: auto;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: .88;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.marquee__set--clients .client:hover .client__mark { opacity: 1; transform: scale(1.05); }

.clients .marquee:hover .marquee__track { animation-play-state: paused; }

/* ------------------------------------------------------ hero banners -- */

.banner { position: relative; }

.banner__slide { animation: slide-in .8s var(--ease) both; }
.banner__slide[hidden] { display: none; }

.banner__slide p:first-child {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 1.4rem;
}

.banner__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(1.4rem, 2.4vw, 2.1rem);
}
.banner__dots { display: flex; gap: .6rem; flex: 0 0 auto; }
.banner__dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 1px solid rgba(242, 236, 224, .38);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.banner__dot.is-active { background: var(--champagne); border-color: var(--champagne); }

.banner__progress { flex: 1 1 auto; height: 1px; background: var(--line-dark); overflow: hidden; }
.banner__progress span {
  display: block; height: 100%; width: 33.333%;
  background: var(--champagne);
  transition: transform .6s var(--ease);
}
.banner__nav > p {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  letter-spacing: .1em;
  color: var(--on-dark-mut);
}
.banner__nav > p span { color: var(--on-dark); }

.circle-btn--ghost { border-color: rgba(242, 236, 224, .3); color: var(--on-dark); }
.circle-btn--ghost:hover { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }

.page-hero {
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3.5rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(65% 60% at 82% 15%, rgba(217,154,43,.19), transparent 66%);
}
.page-hero .wrap { position: relative; }
.page-hero h1 { color: var(--on-dark); max-width: 18ch; }
.page-hero h1 + p { color: var(--on-dark-mut); max-width: 58ch; margin-top: clamp(1.5rem, 3vw, 2.25rem); font-family: var(--sans); font-size: 1rem; font-style: normal; }

/* --------------------------------------------------------------- cards -- */

.pillar { position: relative; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.section--ink .pillar, .section--ink-2 .pillar { border-color: var(--line-dark); }
.pillar h3 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  font-weight: 400;
  margin: 0 0 .9rem;
  letter-spacing: .005em;
}
.pillar p { color: var(--muted); margin: 0; }
.section--ink .pillar p, .section--ink-2 .pillar p { color: var(--on-dark-mut); }

.pathway {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(250px, 26vw, 330px);
  padding: clamp(1.9rem, 3.4vw, 3rem);
  overflow: hidden;
  color: var(--on-dark);
  background: var(--ink-2);
  isolation: isolate;
}
.pathway::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    repeating-linear-gradient(90deg, rgba(242,236,224,.05) 0 1px, transparent 1px 8px),
    radial-gradient(110% 80% at 80% 10%, rgba(217,154,43,.26), transparent 60%),
    linear-gradient(160deg, #3a2b23 0%, #251a16 100%);
  transform: scale(1.02);
  transition: transform 1s var(--ease);
}
.pathway:hover::before { transform: scale(1.07); }

/* The two audience cards are tinted apart: saffron for brands, terracotta for
   manufacturing partners. */
.cols-2 > .pathway:last-child::before {
  background-image:
    repeating-linear-gradient(90deg, rgba(242,236,224,.05) 0 1px, transparent 1px 8px),
    radial-gradient(110% 80% at 80% 10%, rgba(184,85,47,.34), transparent 62%),
    linear-gradient(160deg, #40291f 0%, #251a16 100%);
}
.cols-2 > .pathway:last-child p:first-child,
.cols-2 > .pathway:last-child .link-arrow { color: var(--clay-soft); }
.pathway p:first-child {
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--champagne-2); margin: 0;
}
.pathway h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.1;
  margin: auto 0 1rem;
}
.pathway p { color: var(--on-dark-mut); max-width: 100%; margin-bottom: 1.9rem; }

/* --------------------------------------------------------------- lists -- */

.criteria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 clamp(2rem, 4vw, 3.5rem);
}
.criteria li {
  padding: .72rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
  letter-spacing: .06em;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.criteria li::before {
  content: "";
  flex: 0 0 auto;
  width: 16px; height: 1px;
  background: var(--champagne);
  transform: translateY(-4px);
}
.section--ink .criteria li, .section--ink-2 .criteria li { border-color: var(--line-dark); }

.qualities { display: grid; gap: 0; }
.quality {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1rem, 1.8vw, 1.5rem) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.qualities .quality:last-child { border-bottom: 1px solid var(--line); }
.section--ink .quality, .section--ink-2 .quality { border-color: var(--line-dark); }
.section--ink .qualities .quality:last-child,
.section--ink-2 .qualities .quality:last-child { border-bottom-color: var(--line-dark); }
.quality h3 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  font-weight: 400;
  margin: 0;
}
.quality p { color: var(--muted); margin: 0; }
.section--ink .quality p, .section--ink-2 .quality p { color: var(--on-dark-mut); }

.steps { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1rem, 1.9vw, 1.55rem) 0;
  border-top: 1px solid var(--line-dark);
  align-items: baseline;
}
.step:last-child { border-bottom: 1px solid var(--line-dark); }
.step p:first-child {
  font-size: .72rem; letter-spacing: .26em;
  color: var(--champagne); margin: 0;
}
.step h3 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}
.step p { color: var(--on-dark-mut); margin: 0; }

/* Per-cell borders rather than a gap grid, so a part-filled last row leaves
   no empty panel behind. */
/* On a wide screen the three long stacked lists — qualities, steps and
   principles — run across the page instead of down it, which removes roughly a
   screen and a half of scrolling without losing a word. */
@media (min-width: 1000px) {
  .qualities,
  .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2.25rem);
  }

  .quality,
  .step {
    display: block;
    padding: 1.15rem 0 0;
    border-top: 1px solid var(--line);
  }
  .section--ink .quality,
  .section--ink-2 .step { border-top-color: var(--line-dark); }

  .qualities .quality:last-child,
  .step:last-child { border-bottom: 0; }

  .quality h3,
  .step h3 { font-size: clamp(1.1rem, 1.45vw, 1.4rem); margin-bottom: .55rem; }
  .step h3 { letter-spacing: .04em; }
  .step p:first-child { margin-bottom: .7rem; }
  .quality p,
  .step p { font-size: .92rem; }
}

.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.capabilities li {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ivory);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.3;
  transition: background .5s var(--ease), color .5s var(--ease);
}
.capabilities li:hover { background: var(--ink); color: var(--on-dark); }

.criteria--single { grid-template-columns: 1fr; max-width: 46ch; margin-block: clamp(1.5rem, 3vw, 2.25rem); }

/* ------------------------------------------------ pills & round buttons -- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.pill:hover { color: var(--ink); border-color: var(--ink); }
.pill[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }

.pill--solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
  padding-right: .5rem;
}
.pill--solid:hover { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }

.pill__arrow, .card__arrow {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--ink);
  font-size: .85rem;
  transition: transform .4s var(--ease);
}
.pill--solid:hover .pill__arrow { transform: translateX(3px); }

.circle-btn {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.circle-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.circle-btn--solid { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.circle-btn--solid:hover { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }
.circle-btn[disabled] { opacity: .3; pointer-events: none; }

/* ------------------------------------------------------- capability rail -- */

.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
}
.rail-controls { display: flex; gap: .75rem; flex: 0 0 auto; }

.rail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Without this, mandatory snapping cancels the track's leading inset and the
     first card sits flush to the viewport edge. */
  scroll-padding-inline-start: var(--gut);
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: .5rem;
}
.rail::-webkit-scrollbar { display: none; }

.rail__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding-inline: var(--gut);
  width: max-content;
}
/* Align the first card with the page grid on wide screens. */
@media (min-width: 1340px) {
  .rail__track { padding-inline: calc((100vw - var(--wrap)) / 2 + var(--gut)); }
  .rail { scroll-padding-inline-start: calc((100vw - var(--wrap)) / 2 + var(--gut)); }
}

.rail__item { flex: 0 0 auto; width: clamp(240px, 22vw, 300px); scroll-snap-align: start; }

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .6s var(--ease), border-color .6s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: rgba(217,154,43,.6); }

.card__media .frame { border-radius: 0; }
.card__body { padding: clamp(.85rem, 1.5vw, 1.15rem); flex: 1 1 auto; }
.card__body h4 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 .5rem;
}
.card__body > p { font-size: .82rem; color: var(--muted); margin: 0 0 1rem; letter-spacing: .04em; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li {
  padding: .35rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .8rem .8rem 1.4rem;
  border-top: 1px solid var(--line);
  background: var(--ivory-3);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.card__foot .card__arrow { background: var(--ink); color: var(--ivory); }
.card__foot:hover .card__arrow { transform: translateX(3px); }

.rail-progress {
  height: 1px;
  background: var(--line);
  margin-top: clamp(1.15rem, 2vw, 1.7rem);
  overflow: hidden;
}
.rail-progress span {
  display: block;
  height: 100%;
  width: 22%;
  background: var(--champagne);
  transition: transform .3s var(--ease), width .3s var(--ease);
}

/* -------------------------------------------------- programmes slider -- */

.slider-section { background: var(--ivory-2); }

.slider__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: clamp(1.6rem, 2.8vw, 2.4rem);
}

.slider__slide {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  animation: slide-in .7s var(--ease) both;
}
.slider__slide[hidden] { display: none; }

@keyframes slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.slider__copy h2 { margin-bottom: 1.25rem; }
.slider__copy small { margin-bottom: 1rem; }

.slider__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.slider__media-item .frame { border-radius: 18px; }
.slider__media-item--offset { margin-top: clamp(1.5rem, 4vw, 3.5rem); }

.slider__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(1.4rem, 2.4vw, 2.1rem);
}
.slider__buttons { display: flex; gap: .75rem; flex: 0 0 auto; }
.slider__progress { flex: 1 1 auto; height: 1px; background: var(--line); overflow: hidden; }
.slider__progress span {
  display: block; height: 100%; background: var(--champagne);
  width: 33.333%;
  transition: transform .5s var(--ease);
}
.slider__nav > p {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--ink);
}

.principles { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.principle {
  padding: clamp(1.05rem, 1.9vw, 1.55rem);
  border: 1px solid var(--line);
  background: var(--ivory);
}
.principle h3 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 400;
  margin: 0 0 .7rem;
}
.principle p { color: var(--muted); margin: 0; }

.tenets {
  display: grid;
  gap: clamp(.6rem, 1.4vw, 1rem);
  margin: clamp(1.4rem, 2.4vw, 2rem) 0 0;
}
.tenets li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.4;
  color: var(--ink);
}
.tenets li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  background: var(--champagne);
  transform: rotate(45deg) translateY(-2px);
}
.section--ink .tenets li,
.section--ink-2 .tenets li { color: var(--champagne-2); }

/* --------------------------------------------------------------- forms -- */

.form-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.6rem, 2.8vw, 2.4rem);
  flex-wrap: wrap;
}
.form-tabs button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  padding: 1rem 1.6rem 1.1rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.form-tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--champagne);
}

.form-panel[hidden] { display: none; }

.field-grid {
  display: grid;
  /* Three columns on a wide screen keeps the ten-field form to four rows. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.05rem, 1.9vw, 1.55rem);
}
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }

@media (max-width: 1000px) and (min-width: 861px) {
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field label {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: .75rem 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  border-radius: 0;
  transition: border-color .4s var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.7; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 1.35rem, calc(100% - 7px) 1.35rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--champagne);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(107,101,90,.5); }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form-consent {
  display: flex; gap: .9rem; align-items: flex-start;
  font-size: .84rem; color: var(--muted); line-height: 1.6;
  margin-top: clamp(1.15rem, 2vw, 1.7rem);
}
.form-consent input { margin-top: .35rem; accent-color: var(--champagne); }

.notice {
  padding: 1.1rem 1.5rem;
  border-left: 2px solid var(--champagne);
  background: var(--ivory-2);
  font-size: .95rem;
  margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
}
.notice--error { border-color: #9a3b28; }
.notice ul { margin: .6rem 0 0; padding-left: 1.1rem; list-style: disc; }

/* --------------------------------------------------------- legal pages -- */

.legal { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.legal h2 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin: clamp(2rem, 3.5vw, 3rem) 0 .85rem;
  padding-top: clamp(1.25rem, 2.2vw, 1.9rem);
  border-top: 1px solid var(--line);
}
.legal > div > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal p { color: var(--muted); }
.legal .lede { color: var(--text); }

.legal ul {
  display: grid;
  gap: .5rem;
  margin: 0 0 1.05rem;
}
.legal li {
  display: flex;
  gap: .9rem;
  color: var(--muted);
  line-height: 1.6;
}
.legal li::before {
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 1px;
  margin-top: .85em;
  background: var(--gold);
}

.legal a {
  color: var(--gold-ink);
  border-bottom: 1px solid rgba(217, 154, 43, .4);
  padding-bottom: .1rem;
  overflow-wrap: anywhere;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.legal a:hover { color: var(--clay); border-color: var(--clay); }

.legal__address {
  font-style: normal;
  margin-top: 1rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: var(--ivory-2);
  border-left: 2px solid var(--gold);
  color: var(--text);
  line-height: 1.9;
}

/* ------------------------------------------------------------- closing -- */

.closing {
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(2.25rem, 3.6vw, 3.4rem);
  position: relative;
  overflow: hidden;
}
.closing::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(217,154,43,.2), transparent 68%);
}
.closing .wrap { position: relative; }
.closing h2 { color: var(--on-dark); }
.closing h2 ~ p { color: var(--champagne-2); font-style: italic; }

/* The strapline under the closing wordmark: the last <small> in the block. */
.closing small:last-of-type {
  font-size: .72rem;
  font-weight: 300;
  letter-spacing: .24em;
  color: var(--on-dark-mut);
  margin: 1.5rem 0 0;
}

/* -------------------------------------------------------------- footer -- */

.footer {
  background: var(--ink-2);
  color: var(--on-dark-mut);
  padding-block: clamp(2.4rem, 3.8vw, 3.4rem) 1.4rem;
  font-size: .9rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr) minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 3.5vw, 3.5rem);
  padding-bottom: clamp(1.9rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line-dark);
}
.footer__col--brand p { max-width: 40ch; line-height: 1.7; }
.footer__col h3 {
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--champagne-2); margin: 0 0 1.35rem;
}
.footer__links { display: grid; gap: .8rem; }
.footer__links a { transition: color .3s var(--ease); }
.footer__links a:hover { color: var(--on-dark); }
.footer__contact { margin: 1.5rem 0 0; }
.footer__contact a { border-bottom: 1px solid var(--line-dark); padding-bottom: .2rem; }
.footer__contact a:hover { border-color: var(--champagne); color: var(--on-dark); }

.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 2rem;
  font-size: .76rem; letter-spacing: .1em;
}
.footer__base p { margin: 0; }

/* Social links, under the footer description. */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.4rem;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--gold-soft);
  transition: background-color .4s var(--ease), border-color .4s var(--ease),
              color .4s var(--ease), transform .4s var(--ease);
}
.footer__social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}

/* Address, email and telephone as one labelled, iconed block. */
.contact-list { display: grid; gap: 1.35rem; }

.contact-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
}

.contact-item__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--gold-soft);
  transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.contact-item:hover .contact-item__icon {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.contact-item__body { display: block; min-width: 0; }

.contact-item__title {
  display: block;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: .3rem;
}

.contact-item__value {
  display: block;
  font-style: normal;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--on-dark-mut);
  overflow-wrap: anywhere;
}
.contact-item__value a { transition: color .3s var(--ease); }
.contact-item__value a:hover { color: var(--on-dark); }

.contact-address {
  font-style: normal;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--text);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal a {
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: .15rem;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__legal a:hover { color: var(--gold-soft); border-color: var(--gold-soft); }

/* ------------------------------------------------------------- reveals -- */

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal[data-delay="1"].is-in { transition-delay: .1s; }
.reveal[data-delay="2"].is-in { transition-delay: .2s; }
.reveal[data-delay="3"].is-in { transition-delay: .3s; }
.reveal[data-delay="4"].is-in { transition-delay: .4s; }

/* --------------------------------------------------------- breakpoints -- */

@media (max-width: 1040px) {
  .nav__cta { display: none; }
  /* minmax(0, …) — a bare 1fr keeps min-width:auto and lets a long display
     heading widen the whole page. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__col--brand { grid-column: 1 / -1; }
  .footer__col--contact { grid-column: 1 / -1; }
  .footer__col--contact .contact-list {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem 2rem;
  }
}

@media (max-width: 860px) {
  .burger { display: inline-flex; position: relative; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem;
    padding: 3rem var(--gut);
    background: var(--ink);
    border-left: 1px solid var(--line-dark);
    transform: translateX(101%);
    transition: transform .55s var(--ease);
    z-index: 90;
  }
  .nav.is-open { transform: none; }
  .nav ul { flex-direction: column; gap: 1.4rem; }
  .nav a { font-size: .84rem; }
  .nav__cta { display: inline-flex; }

  body.nav-open { overflow: hidden; }

  .split, .split--even, .split--flip,
  .cols-3, .cols-2 { grid-template-columns: minmax(0, 1fr); }

  .step { grid-template-columns: 4rem minmax(0, 1fr); }
  .step p { grid-column: 2 / -1; }
  .quality { grid-template-columns: 1fr; gap: .5rem; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .frame-stack--offset > *:last-child { margin-top: 0; }

  .rail-head { flex-direction: column; align-items: flex-start; }
  .slider__slide { grid-template-columns: 1fr; }
  .slider__media-item--offset { margin-top: 0; }
  .slider__nav > p { display: none; }
}

@media (max-width: 640px) {
  /* Editorial line breaks are for wide screens; on a phone the copy should
     wrap naturally rather than overflow. */
  .hero h1 br, .hero h2 br { display: none; }
  .slider__media { grid-template-columns: minmax(0, 1fr); }
  .banner__nav > p { display: none; }
}

@media (max-width: 520px) {
  .criteria { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; justify-content: center; }
  .capabilities { grid-template-columns: minmax(0, 1fr); }
}

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

@media print {
  .masthead, .burger, .btn-row, .footer { display: none; }
  body { background: #fff; color: #000; }
}