/* ==========================================================================
   CM Labels & Packaging — site.css
   Single-page site. Token-driven. No framework, no build step.

   Contents
     01  Font face
     02  Design tokens
     03  Reset & base
     04  Typography
     05  Layout primitives
     06  Links & buttons
     07  Header & navigation
     08  Hero
     09  Section components
     10  Forms
     11  Footer
     12  Motion
   ========================================================================== */


/* 01  FONT FACE ============================================================
   Manrope ships as a single variable font — one 25 KB file covers every
   weight the site uses. Self-hosted so there is no third-party request. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}


/* 02  DESIGN TOKENS ======================================================== */

:root {
  /* Brand */
  --navy: #212F62;
  --burgundy: #8C1B24;
  --cream: #F5F1E8;
  --black: #000000;
  --white: #FFFFFF;

  /* Tints of burgundy, not new brand colours. Display type only, and only on
     navy grounds — see the accent contrast rule in section 04.
     --blush-pale is the hero eyebrow; it measures 10.6:1 on the hero. */
  --blush: #D7A5AA;
  --blush-pale: #EDD6D9;

  /* Derived roles */
  --ink: var(--navy);
  --ink-soft: #5E6679;
  --ink-soft-invert: rgba(255, 255, 255, .66);
  --line: rgba(33, 47, 98, .16);
  --line-invert: rgba(255, 255, 255, .22);

  /* Structure */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4.5vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 7.8rem);
  --header-h: 92px;

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

@media (max-width: 900px) {
  :root { --header-h: 72px; }
}


/* 03  RESET & BASE ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, picture, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
}
.on-dark :focus-visible,
.header :focus-visible,
.footer :focus-visible { outline-color: var(--blush); }

::selection { background: var(--navy); color: var(--white); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 999;
  transform: translateY(-120%);
  background: var(--burgundy);
  color: var(--white);
  padding: .8rem 1.4rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

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


/* 04  TYPOGRAPHY ===========================================================
   Heavy and tightly tracked. The weight and the negative letter-spacing are
   what separate this from a traditional editorial setting. */

h1, .h1 {
  font-size: clamp(3.625rem, 7.6vw, 6.75rem);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 700;
}

h2, .h2 {
  font-size: clamp(2.1rem, 1.2rem + 4.4vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 700;
}

h3, .h3 {
  font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: -.032em;
  font-weight: 700;
}

/* THE ACCENT CONTRAST RULE
   Blush measures 5.98:1 on navy but only 2.14:1 on white — it fails AA on any
   light ground. So the accent colour follows the section, it is not fixed.
   Default (light grounds) is burgundy at 9.1:1; dark grounds get blush. */
.accent { color: var(--burgundy); }
.section--navy .accent,
.hero .accent,
.on-dark .accent { color: var(--blush); }

/* An optional break for headlines that wrap badly on narrow screens. The
   space authored before it means the line still reads correctly when hidden. */
.br-sm { display: none; }
@media (max-width: 620px) { .br-sm { display: inline; } }

.eyebrow {
  display: block;
  margin: 0 0 clamp(1.1rem, 2vw, 1.5rem);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--burgundy);
}
.section--navy .eyebrow,
.on-dark .eyebrow { color: var(--blush); }
/* The hero ground is darker than the navy sections, so the eyebrow can sit
   back a shade further without losing contrast. */
.hero .eyebrow { color: var(--blush-pale); }

.lede {
  font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 36rem;
}
.on-dark .lede, .section--navy .lede { color: var(--ink-soft-invert); }

.prose { color: var(--ink-soft); max-width: 34rem; }
.prose + .prose { margin-top: 1.15rem; }
.on-dark .prose, .section--navy .prose { color: var(--ink-soft-invert); }

.on-dark, .section--navy { color: var(--white); }


/* 05  LAYOUT PRIMITIVES ==================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--navy { background: var(--navy); }
.section--cream { background: var(--cream); }
.section--flush-bottom { padding-bottom: 0; }

/* Big heading left, small note right, aligned on the baseline. */
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.4rem);
}
.section-note {
  max-width: 21rem;
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.section--navy .section-note, .on-dark .section-note { color: var(--ink-soft-invert); }

/* Stacks well above the usual tablet breakpoint: at 1024 the two-column
   heading left the h2 just 557px against a 64px type size, which wrapped any
   headline longer than a couple of words. */
@media (max-width: 1150px) {
  .section-heading { grid-template-columns: 1fr; align-items: start; }
  .section-note { max-width: 32rem; }
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6.25rem); }
}


/* 06  LINKS & BUTTONS ======================================================
   The diagonal arrow marks a call to action; the horizontal arrow stays for
   quieter inline text links. */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  min-height: 52px;
  padding: 0 1.45rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn .arrow { font-size: 1em; line-height: 1; transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translate(2px, -2px); }

.btn--light { background: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--cream); }

.btn--dark { background: var(--navy); color: var(--white); }
.btn--dark:hover { background: var(--burgundy); }

.btn--outline { border-color: rgba(255, 255, 255, .5); color: var(--white); }
.btn--outline:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

.btn--full { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid currentColor;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--navy);
}
.text-link .arrow { transition: transform .35s var(--ease); }
.text-link:hover .arrow { transform: translateX(.3rem); }
.on-dark .text-link, .section--navy .text-link, .hero .text-link { color: var(--white); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 1.9rem);
}


/* 07  HEADER & NAVIGATION ==================================================
   Transparent over the hero with the cream knockout mark, then solid white
   with the full-colour mark once the page scrolls. */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: var(--white);
  /* A soft floor behind the bar so the nav stays legible whatever photograph
     sits in the hero. Measured white-on-ground here is ~7:1; without it the
     current image gives ~4.9:1 and a brighter one would fail outright. */
  background: linear-gradient(to bottom, rgba(16, 24, 47, .55), rgba(16, 24, 47, 0));
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.header.is-scrolled {
  background: var(--white);
  color: var(--navy);
  border-bottom-color: var(--line);
}

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo { display: block; flex: none; position: relative; }
.logo img {
  height: clamp(32px, 3.6vw, 48px);
  width: auto;
  display: block;
}
/* Specificity has to beat `.logo img` above, hence the doubled selector. */
.logo .logo__colour { display: none; }
.header.is-scrolled .logo .logo__cream { display: none; }
.header.is-scrolled .logo .logo__colour { display: block; }

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: clamp(1.5rem, 2.4vw, 2rem); }
}

.nav__link {
  position: relative;
  padding-block: .4rem;
  font-size: .82rem;
  font-weight: 600;
  opacity: .86;
  transition: opacity .25s var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="true"] { opacity: 1; }
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav__cta {
  min-height: 44px;
  padding: 0 1.1rem;
  gap: .85rem;
  font-size: .76rem;
  border: 1px solid rgba(255, 255, 255, .5);
  color: var(--white);
}
.nav__cta:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.header.is-scrolled .nav__cta { background: var(--navy); border-color: var(--navy); color: var(--white); }
.header.is-scrolled .nav__cta:hover { background: var(--burgundy); border-color: var(--burgundy); }

.header__cta { display: none; }
@media (min-width: 1000px) { .header__cta { display: inline-flex; } }

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }

.nav-toggle span {
  display: block;
  width: 25px; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* Full-screen mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--navy);
  color: var(--white);
  padding: calc(var(--header-h) + clamp(2rem, 7vh, 4rem)) var(--gutter) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  /* visibility is switched instantly on open (0s, no delay) and held back
     until the fade finishes on close. Transitioning it the usual way leaves
     the overlay visibility:hidden for a whole frame, and a hidden element
     cannot take focus — which stranded keyboard users whenever the frame
     loop was throttled. */
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear 0s;
}
@media (min-width: 1000px) { .menu { display: none; } }

.menu__list li { border-top: 1px solid var(--line-invert); }
.menu__list li:last-child { border-bottom: 1px solid var(--line-invert); }

.menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(.9rem, 2.4vh, 1.3rem) 0;
  font-size: clamp(1.7rem, 8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.menu__link span { font-size: .62rem; font-weight: 800; letter-spacing: .14em; color: var(--blush); }
.menu.is-open .menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(55ms * var(--i, 0) + 100ms);
}
.menu__foot { padding-top: clamp(2rem, 5vh, 3rem); }


/* 08  HERO =================================================================
   A pure CSS composition — no photograph. Five stacked layers, matching the
   reference build in cm-labels-website/styles.css:

     1  base    navy -> burgundy diagonal
     2  veil    navy, heaviest on the left so the burgundy glow survives only
                bottom-right, and the headline always has a dark ground
     3  dots    a faint field, one dot per 28px tile
     4  grid    a single crosshair across the centre
     5  frame   a large rotated rectangle, clipped by the hero

   Because nothing blends with a photograph any more, the duotone and the
   legibility scrim are both gone — layer 2 is already .98 opaque behind the
   type at the left edge. */

.hero {
  position: relative;
  /* The reference fixes this at 820px; keeping it viewport-aware stops short
     laptop screens from being forced to scroll. 51.25rem == 820px. */
  min-height: clamp(36rem, 100svh, 51.25rem);
  display: flex;
  align-items: center;
  overflow: hidden;          /* contains the 70vw frame below */
  background: var(--navy);
  color: var(--white);
  padding-top: var(--header-h);
}

.hero__media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(33, 47, 98, .98) 0%,
      rgba(33, 47, 98, .84) 45%,
      rgba(33, 47, 98, .55) 100%),
    linear-gradient(135deg, #10182F, var(--burgundy) 160%);
}

/* The rotated frame. */
.hero__media::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 70vw;
  height: 90vh;
  border: 1px solid rgba(255, 255, 255, .12);
  transform: rotate(-20deg);
}

.hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 75% 30%, rgba(255, 255, 255, .10) 0 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .35;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49.9%, rgba(255, 255, 255, .08) 50%, transparent 50.1%),
    linear-gradient(0deg,  transparent 0 49.9%, rgba(255, 255, 255, .08) 50%, transparent 50.1%);
  background-size: 100% 100%;
  opacity: .22;
}

.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__title { max-width: 800px; }
.hero__lede {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 570px;
  color: rgba(255, 255, 255, .78);
}
.hero__actions { margin-top: clamp(2rem, 4vw, 2.4rem); }

.hero__side {
  position: absolute;
  right: 2.4rem;
  bottom: 2.6rem;
  z-index: 2;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  opacity: .6;
  writing-mode: vertical-rl;
}
@media (max-width: 1000px) { .hero__side { display: none; } }

@media (max-width: 560px) {
  /* The two calls to action sit side by side until there is no room for them. */
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  /* At the 58px floor "your business." wraps, breaking the headline into three
     ragged lines. Scaling down on narrow screens keeps it to the intended two. */
  .hero__title { font-size: clamp(2.5rem, 11.2vw, 3.625rem); }
}


/* 09  SECTION COMPONENTS =================================================== */

/* --- Numbered index list (Industries) ------------------------------------
   The photograph sits in its own always-present grid column so revealing it
   causes no layout shift. Below 900px it moves under the row and stays
   visible, because there is no hover on a phone. */

.index-list { border-top: 1px solid var(--line-invert); }

.index-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 15rem 2.5rem;
  align-items: center;
  gap: 0 1.5rem;
  padding: clamp(1.4rem, 2.4vw, 1.95rem) 0;
  border-bottom: 1px solid var(--line-invert);
  color: var(--white);
  transition: padding-left .3s var(--ease), background .3s var(--ease);
}
.index-row:hover,
.index-row:focus-visible {
  padding-left: 1rem;
  background: linear-gradient(90deg, rgba(140, 27, 36, .38), transparent 70%);
}

.index-row__num { font-size: .69rem; font-weight: 800; letter-spacing: .1em; color: var(--blush); }
.index-row__name {
  font-size: clamp(1.5rem, .9rem + 2.2vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.index-row__arrow { text-align: right; font-size: 1.15rem; color: var(--blush); transition: transform .35s var(--ease); }
.index-row:hover .index-row__arrow { transform: translate(3px, -3px); }

.index-row__media { overflow: hidden; height: 6.25rem; }
.index-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.index-row:hover .index-row__media img,
.index-row:focus-visible .index-row__media img { opacity: .92; transform: none; }

@media (max-width: 900px) {
  .index-row {
    grid-template-columns: 3rem minmax(0, 1fr) 2rem;
    gap: .75rem 1rem;
  }
  .index-row:hover, .index-row:focus-visible { padding-left: 0; }
  /* Explicit placement, or the arrow falls to a third row under the photo. */
  .index-row__num { grid-row: 1; grid-column: 1; }
  .index-row__name { grid-row: 1; grid-column: 2; }
  .index-row__arrow { grid-row: 1; grid-column: 3; align-self: start; }
  .index-row__media { grid-row: 2; grid-column: 1 / -1; height: auto; aspect-ratio: 16 / 7; margin-top: .4rem; }
  .index-row__media img { opacity: .92; transform: none; }
}

/* --- Bordered card grid (Solutions) -------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (max-width: 860px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  position: relative;
  min-height: clamp(19rem, 26vw, 24rem);
  padding: clamp(1.4rem, 2.6vw, 2.15rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
.card--featured {
  background: var(--navy);
  color: var(--white);
  border-right-color: var(--navy);
}
.card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 48%, rgba(140, 27, 36, .42));
  pointer-events: none;
}
.card > * { position: relative; z-index: 1; }

.card__num { font-size: .69rem; font-weight: 800; letter-spacing: .1em; opacity: .55; }
.card__kicker {
  margin: 0 0 .85rem;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.card--featured .card__kicker { color: var(--blush); }
.card h3 { max-width: 20ch; }
.card__text { margin: 1.15rem 0 0; max-width: 34ch; font-size: .8125rem; line-height: 1.6; color: var(--ink-soft); }
.card--featured .card__text { color: rgba(255, 255, 255, .72); }
.card__mark { position: absolute; right: clamp(1.4rem, 2.6vw, 2.15rem); top: clamp(1.4rem, 2.6vw, 2.15rem); font-size: 1.1rem; color: var(--blush); }

/* --- Process (PRINT / FINISH / DELIVER) ---------------------------------- */

.approach-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 960px) { .approach-layout { grid-template-columns: 1fr 1.2fr; } }

.process { display: flex; align-items: center; }
.process__step { min-width: 7.5rem; display: flex; flex-direction: column; gap: .45rem; }
.process__step span { font-size: .63rem; font-weight: 800; letter-spacing: .1em; color: var(--burgundy); }
.process__step strong { font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.process__step small { font-size: .72rem; color: var(--ink-soft); }
.process__line { flex: 1; height: 1px; margin: 0 .9rem; background: var(--navy); opacity: .2; }

@media (max-width: 760px) {
  .process { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .process__line { width: 1px; height: 1.6rem; flex: none; margin: 0 0 0 .3rem; }
}

/* --- Numbered principles (Why CM) ---------------------------------------- */

.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.principles__item {
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.4rem) 0;
  border-right: 1px solid var(--line);
  margin-right: clamp(1rem, 2vw, 1.6rem);
}
.principles__item:last-child { border-right: 0; margin-right: 0; }
.principles__item span {
  display: block;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--burgundy);
}
.principles__item strong { display: block; margin-bottom: .5rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.principles__item p { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 900px) { .principles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .principles { grid-template-columns: 1fr; }
  .principles__item {
    border-right: 0; margin-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
  }
  .principles__item:last-child { border-bottom: 0; }
  .principles__item span { margin-bottom: 1.4rem; }
}

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

.blocks { border-top: 1px solid var(--line-invert); }
.blocks__item {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 1.8rem) 0 clamp(1.5rem, 2.6vw, 1.9rem) 3.4rem;
  border-bottom: 1px solid var(--line-invert);
}
.blocks__item span {
  position: absolute;
  left: 0; top: clamp(1.55rem, 2.6vw, 1.95rem);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--blush);
}
.blocks__item h3 { margin-bottom: .55rem; font-size: 1.15rem; letter-spacing: -.02em; }
.blocks__item p { margin: 0; max-width: 34rem; font-size: .8125rem; line-height: 1.65; color: var(--ink-soft-invert); }

.responsibility__media { margin-top: clamp(2.5rem, 5vw, 4rem); overflow: hidden; isolation: isolate; background: var(--navy); }
.responsibility__media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  /* This source is much brighter than the hero photograph, so it needs
     pulling down before the screen pass or the duotone washes out. */
  filter: grayscale(1) contrast(1.18) brightness(.62);
  mix-blend-mode: screen;
}
.responsibility__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blush);
  mix-blend-mode: multiply;
  opacity: .55;
}
.responsibility__media { position: relative; }

/* --- Full-bleed image band ------------------------------------------------ */

.band { width: 100%; overflow: hidden; background: var(--navy); }
.band img { width: 100%; aspect-ratio: 32 / 9; object-fit: cover; }
@media (max-width: 760px) { .band img { aspect-ratio: 16 / 9; } }


/* 10  FORMS ================================================================ */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}
@media (min-width: 960px) { .contact-layout { grid-template-columns: .85fr 1.15fr; } }

.contact-lead { margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(2rem, 4vw, 2.8rem); color: var(--ink-soft); max-width: 28rem; }
.contact-detail { margin-bottom: 1.4rem; font-size: .875rem; }
.contact-detail span {
  display: block;
  margin-bottom: .35rem;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.contact-detail address { font-style: normal; }
.contact-detail a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.contact-detail a:hover { border-bottom-color: var(--burgundy); }

.form { display: grid; gap: clamp(1.1rem, 2.2vw, 1.5rem); }
@media (min-width: 640px) {
  .form { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.field label {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.field .req { color: var(--burgundy); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .75rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(33, 47, 98, .28);
  border-radius: 0;
  font-size: .9rem;
  color: var(--navy);
  transition: border-color .25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%),
                    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: right 7px center, right 2px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 1.75rem;
  cursor: pointer;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input::placeholder, .field textarea::placeholder { color: rgba(33, 47, 98, .38); }

.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: rgba(33, 47, 98, .5); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--burgundy); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 4px;
}

.field .error { font-size: .75rem; color: var(--burgundy); }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-bottom-color: var(--burgundy); }

.form__actions { grid-column: 1 / -1; }
.form-status { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: var(--burgundy); }

.form-success { border-top: 2px solid var(--navy); padding-top: clamp(1.4rem, 3vw, 1.9rem); }
.form-success p { margin-top: .75rem; font-size: .9rem; color: var(--ink-soft); }
[hidden] { display: none !important; }

.map {
  width: 100%;
  height: clamp(16rem, 36vw, 26rem);
  border: 0;
  filter: grayscale(1) contrast(.94) brightness(1.03);
}


/* 11  FOOTER =============================================================== */

.footer {
  background: var(--black);
  color: var(--white);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2rem);
}

.footer__top {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 860px) { .footer__top { grid-template-columns: 1.4fr 1fr 1.2fr; } }

.wordmark { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.wordmark span {
  display: block;
  margin-top: .45rem;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .62);
}
.footer__blurb { margin-top: 1.2rem; max-width: 26ch; font-size: .82rem; color: rgba(255, 255, 255, .62); }

.footer__heading {
  margin-bottom: 1.1rem;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.footer__nav li + li { margin-top: .6rem; }
.footer__nav a, .footer__contact a { font-size: .85rem; color: rgba(255, 255, 255, .82); transition: color .25s var(--ease); }
.footer__nav a:hover, .footer__contact a:hover { color: var(--white); }
.footer__contact address { font-style: normal; font-size: .85rem; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.footer__email { margin-top: .8rem; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: clamp(1.1rem, 2vw, 1.4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 2rem;
  font-size: .68rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .62);
}
.back-top { border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 3px; }


/* 12  MOTION ===============================================================
   Reveals are opt-in via [data-reveal] and gated on .js, so content is never
   hidden when the script fails to run. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}