/* ==========================================================================
   Innovocean
   Static one-pager. No build step, no framework.
   Brand source: the Innovocean style guide. See DESIGN.md.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Gesta is the brand text face but is not licensed for web here, so it is
   named first in every stack: licence it, drop in an @font-face block, and
   nothing else needs to change. Until then, Archivo stands in.             */

@font-face {
  font-family: Archivo;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url("assets/fonts/archivo-narrow-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Brand, from the style guide. Do not add to these. */
  --navy:   #1E3258;
  --red:    #C91E00;
  --silver: #A4A4A4;
  --sky:    #A2D2FB;
  --green:  #139100;
  --grey:   #565656;

  /* Grounds. Tints of --navy, not new brand colours. */
  --deep:   #152442;
  --deeper: #0F1B31;
  --wash:   #F1F5FA;

  /* Text roles */
  --ink:        var(--navy);
  --ink-2:      var(--grey);
  --ink-light:  #FFFFFF;
  --ink-light-2:#C9D6E8;

  --hair-light: #DCE3EC;

  --sans:   Gesta, Archivo, "Helvetica Neue", Arial, sans-serif;
  --narrow: "Gesta Condensed", "Archivo Narrow", Archivo, "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(20px, 5vw, 56px);
  --maxw: 1240px;
  --head: 72px;

  --pad-section: clamp(4.5rem, 8vw, 7.5rem);
}

/* --- Reset -------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* --- Layout primitives -------------------------------------------------- */

.wrap {
  width: min(100% - 2 * var(--gut), var(--maxw));
  margin-inline: auto;
}

.section { padding-block: var(--pad-section); }
.section--wash { background: var(--wash); }

.section--deep {
  background: var(--deep);
  color: var(--ink-light);
}

.section--deep p { color: var(--ink-light-2); }

section[id], main > section { scroll-margin-top: calc(var(--head) + 8px); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--narrow);
  text-decoration: none;
}
.skip:focus { left: 0; }


/* --- Type patterns ------------------------------------------------------ */

.eyebrow {
  font-family: var(--narrow);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 1.5rem;
}

.section--deep .eyebrow,
.about .eyebrow { color: var(--sky); }

h2 {
  font-size: clamp(1.875rem, 3vw, 2.625rem);
  line-height: 1.12;
  letter-spacing: -0.016em;
}

h3 {
  font-size: 1.3125rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.section--deep .lead { color: var(--ink-light-2); }

/* Section head: eyebrow + H2 left, supporting copy right. */
.sechead {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.sechead__lead h2 { max-width: 22ch; }
.sechead__body { max-width: 60ch; }
.sechead__body > * + * { margin-top: 1.25rem; }

@media (min-width: 900px) {
  .sechead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* --- Image plates ------------------------------------------------------
   One treatment for every supporting image so nine photographs read as one
   family rather than a stock collage.

   Full colour is reserved for real subjects, the hero and Erik's portrait,
   and for the two images whose whole point is the logo in situ, the flag
   and the signage. A duotone there would recolour the logo.

   .plate--duo carries all five process images, so the Services scale is one
   uniform family. The image contributes luminance and the navy ground
   contributes hue and saturation, so warm sticky notes and neon glows
   resolve to brand blue.
   Where mix-blend-mode is unsupported the image simply shows in colour.  */

.plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  background: var(--navy);
  border-radius: 2px;
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plate--duo img {
  filter: contrast(1.18) brightness(0.9);
  mix-blend-mode: luminosity;
}

/* A navy veil over the duotone, so the plates sit at the same depth as the
   navy sections rather than floating pale against white. */
.plate--duo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: 0.14;
  pointer-events: none;
}

/* Full-bleed image band, used once, between Why and Team. */
.band { margin: 0; }

.band img {
  width: 100%;
  height: clamp(180px, 24vw, 300px);
  object-fit: cover;
  object-position: 34% 42%;   /* favour the sign and wall over the warm timber */
}

/* --- Buttons and links -------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 0.9375rem 1.625rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--narrow);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--navy);
  border-radius: 3px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn:hover { background: var(--deeper); border-color: var(--deeper); }

.btn--sm { padding: 0.6875rem 1.125rem; font-size: 0.75rem; }

.btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}
.btn--light:hover { background: var(--sky); border-color: var(--sky); color: var(--navy); }

/* Secondary action on a photograph: outlined so it does not compete with the
   solid primary next to it. */
.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

/* Text link: navy, with a rule that turns red on hover. The only other red. */
.tlink {
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--sky);
  padding-bottom: 2px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.tlink:hover { border-color: var(--red); color: var(--red); }

/* --- Masthead ----------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.93);
  border-bottom: 1px solid var(--hair-light);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
}

.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--head);
}

.masthead__logo { display: block; flex: none; }
.masthead__logo img { width: auto; height: 30px; }

.sitenav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.sitenav__list a:not(.btn) {
  font-family: var(--narrow);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease;
}

.sitenav__list a:not(.btn):hover { border-bottom-color: var(--red); }

/* Toggle is hidden on desktop and only shown once JS is confirmed. */
.navtoggle { display: none; }

.navtoggle__bars,
.navtoggle__bars::before,
.navtoggle__bars::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--navy);
}

.navtoggle__bars { position: relative; }
.navtoggle__bars::before,
.navtoggle__bars::after { content: ""; position: absolute; left: 0; }
.navtoggle__bars::before { top: -6px; }
.navtoggle__bars::after { top: 6px; }

@media (max-width: 899px) {
  .js .navtoggle {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    margin-right: -0.75rem;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--navy);
    font-family: var(--narrow);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .js .sitenav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--hair-light);
    box-shadow: 0 18px 40px -24px rgba(30, 50, 88, 0.4);
  }

  .js.nav-open .sitenav { display: block; }

  .sitenav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gut) 1.5rem;
  }

  .sitenav__list li + li { border-top: 1px solid var(--hair-light); }
  .sitenav__list a:not(.btn) { display: block; padding: 1rem 0; border-bottom: 0; }
  .sitenav__list .btn { margin-top: 1.25rem; text-align: center; }
  .sitenav__list li:has(.btn) { border-top: 0; }
}

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

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(84vh, 720px);
  padding-block: clamp(4rem, 10vh, 7rem);
  background: var(--deep);
  color: #fff;
  overflow: hidden;
  /* The horizon: the photograph's own horizon carried out as a hairline,
     forming the seam between the image and the clients strip. Used once. */
  border-bottom: 1px solid var(--sky);
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { display: block; width: 100%; height: 100%; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(21, 36, 66, 0.94) 0%,
      rgba(21, 36, 66, 0.82) 30%,
      rgba(21, 36, 66, 0.22) 62%,
      rgba(21, 36, 66, 0) 88%);
}

.hero__in { position: relative; max-width: 46rem; }

.hero__eyebrow {
  font-family: var(--narrow);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 1.75rem;
}

.hero__title {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-weight: 500;
}

.hero__lead {
  max-width: 34ch;
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  color: #E4EDF8;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

@media (max-width: 599px) {
  .hero {
    align-items: flex-end;
    min-height: min(88vh, 640px);
  }
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(21, 36, 66, 0.35) 0%,
        rgba(21, 36, 66, 0.72) 45%,
        rgba(21, 36, 66, 0.94) 100%);
  }
  .hero__lead { max-width: none; }
  /* Keep the bulk carrier inside the tall mobile crop. */
  .hero__media img { object-position: 74% 50%; }
}

/* --- Clients strip ----------------------------------------------------- */

.clients {
  background: var(--deep);
  color: #fff;
  padding-block: 1.5rem;
}

.clients__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem clamp(1.5rem, 4vw, 3.5rem);
}

.clients__label {
  font-family: var(--narrow);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
}

.clients__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.5rem, 3vw, 2.5rem);
}

.clients__list a {
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.clients__list a:hover { color: var(--sky); border-bottom-color: var(--sky); }

/* --- Approach ----------------------------------------------------------- */

.approach {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.approach__text h2 { max-width: 22ch; margin-bottom: 1.5rem; }
.approach__text .lead { max-width: 54ch; }
.approach__text p + p { margin-top: 1.25rem; }
.approach__pic { aspect-ratio: 1; }

@media (min-width: 900px) {
  .approach { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); }
}

/* ==========================================================================
   The draft scale
   Signature element. Ships carry graduated draft marks on the hull with a
   load line disc showing maximum permitted immersion. The five processes
   hang off that scale, reading downwards into deeper water. Used once.
   ========================================================================== */

.scale {
  --rail: 68px;      /* x-position of the vertical hairline */
  --gauge: 104px;    /* width of the gauge column */
  --tick-top: 0.8rem;/* distance from row top to the major tick */
  position: relative;
}

/* The rail itself, running from the first major tick to the foot of the scale. */
.scale::before {
  content: "";
  position: absolute;
  left: var(--rail);
  top: var(--tick-top);
  bottom: 0;
  width: 1px;
  background: var(--navy);
  opacity: 0.3;
}

/* Fine graduation every 22px, so the rail reads as an instrument, not a border. */
.scale::after {
  content: "";
  position: absolute;
  left: calc(var(--rail) + 1px);
  top: var(--tick-top);
  bottom: 0;
  width: 8px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--navy) 0 1px,
    transparent 1px 22px
  );
  opacity: 0.28;
  pointer-events: none;
}

.scale__row {
  display: grid;
  grid-template-columns: var(--gauge) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.scale__row:first-child { padding-top: 0; }
.scale__row:last-child { padding-bottom: 0; }

/* Gauge cell: number to the left of the rail, major tick to the right. */
.scale__gauge {
  position: relative;
  grid-row: 1 / span 3;   /* name, plate, description stack beside it */
}

.scale__num {
  position: absolute;
  right: calc(var(--gauge) - var(--rail) + 14px);
  top: 0;
  font-family: var(--narrow);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--mark, var(--navy));
}

.scale__gauge::after {
  content: "";
  position: absolute;
  left: var(--rail);
  top: calc(var(--tick-top) + 0.5px);
  width: 32px;
  height: 1px;
  background: var(--mark, var(--navy));
  opacity: var(--mark-opacity, 0.7);
}

.scale__name {
  grid-column: 2;
  color: var(--navy);
  margin-bottom: 0.625rem;
}

.scale__pic {
  grid-column: 2;
  aspect-ratio: 3 / 2;      /* wide crop while it sits above the description */
  margin-bottom: 1.5rem;
}

.scale__body { grid-column: 2; }
.scale__body p { max-width: 60ch; color: var(--ink-2); }

/* eMission: the only green on the page, carried by the tick alone. The plate
   stays navy like the other four. A green duotone was tried and rejected:
   at full strength it out-shouts the red load line disc, and mixed toward
   navy it reads murky. In navy the eMission lockup is still legible. */
.scale__row--green { --mark: var(--green); --mark-opacity: 1; }

/* Changemaker: the load line disc replaces the tick. Maximum immersion,
   at the bottom of the scale. The page's one red graphic moment. */
.scale__row--load { --mark: var(--red); }
.scale__row--load .scale__gauge::after { display: none; }

/* The disc is centred on the rail; its bar runs mostly to the right so it
   clears the gauge number to the left. */
.loadline {
  position: absolute;
  left: calc(var(--rail) - 18px);
  top: calc(var(--tick-top) - 17.5px);
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* Desktop: a specification layout. Mark, name, description, plate. The plate
   occupies the column that would otherwise sit empty to the right. */
@media (min-width: 1000px) {
  .scale__row {
    grid-template-columns:
      var(--gauge) minmax(150px, 200px) minmax(0, 1fr) clamp(160px, 15vw, 200px);
    column-gap: clamp(1.5rem, 2.6vw, 2.5rem);
  }
  .scale__gauge { grid-row: 1; }
  .scale__name { grid-column: 2; grid-row: 1; align-self: start; margin-bottom: 0; }
  .scale__body { grid-column: 3; grid-row: 1; }
  .scale__body p { max-width: 60ch; }
  .scale__pic {
    grid-column: 4;
    grid-row: 1;
    aspect-ratio: 1;
    margin-bottom: 0;
  }
}

@media (max-width: 599px) {
  .scale { --rail: 30px; --gauge: 54px; }
  .scale__num { right: calc(var(--gauge) - var(--rail) + 12px); }
  .scale__gauge::after { width: 14px; }
  .scale__row { column-gap: 0.875rem; }
  .loadline {
    left: calc(var(--rail) - 12px);
    top: calc(var(--tick-top) - 11.5px);
    width: 24px;
    height: 24px;
  }
}

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

.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* The line-art lockup, used as intended: a watermark, once. */
.about__watermark {
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -1.5rem;          /* px, not %, so it stays put at any section height */
  width: min(88%, 1000px);
  filter: brightness(0) invert(1);
  opacity: 0.09;
  pointer-events: none;
}

.about__in {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
}

.about__head h2 { max-width: 26ch; }
.about__body > * + * { margin-top: 1.25rem; }
.about__body { max-width: 58ch; }

@media (min-width: 900px) {
  .about__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
}

/* --- Why --------------------------------------------------------------- */

.reasons {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 5rem);
}

@media (min-width: 760px) {
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* No numbering here: these four are not a sequence, and numbers would echo
   the draft scale and weaken it. */
.reasons__item h3 {
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.reasons__item p { color: var(--ink-2); max-width: 46ch; }

/* --- Team -------------------------------------------------------------- */

.person {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

@media (min-width: 760px) {
  .person { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
}

.person__portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--wash);
  border-radius: 3px;
}

/* Full colour: a person is never a duotone. Weighted upwards for the head. */
.person__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.person__name { color: var(--navy); }

.person__role {
  font-family: var(--narrow);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-block: 0.5rem 1.25rem;
}

.person__body p:not(.person__role) { color: var(--ink-2); max-width: 60ch; }
.person__body p + p { margin-top: 1.25rem; }

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

/* The branded container sits behind a heavy navy scrim, so it reads as
   texture rather than as a second photograph competing with the details. */
.contact-sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.contact-sec__media { position: absolute; inset: 0; z-index: -2; }

.contact-sec__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.contact-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Heavy enough that the printed lockup stays texture and does not read as a
     second watermark competing with the one in About. */
  background: linear-gradient(90deg,
    rgba(21, 36, 66, 0.97) 0%,
    rgba(21, 36, 66, 0.94) 42%,
    rgba(21, 36, 66, 0.88) 100%);
}

.contact {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr); align-items: start; }
}

.contact__head h2 { max-width: 20ch; }
.contact__head .lead { max-width: 46ch; margin-top: 1.25rem; }
.contact__cta { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

.contact__details {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.contact__details dt {
  font-family: var(--narrow);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 0.375rem;
}

.contact__details dd {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  font-weight: 500;
}

.contact__details a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(162, 210, 251, 0.45);
  padding-bottom: 2px;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.contact__details a:hover { color: var(--sky); border-bottom-color: var(--sky); }

/* Postal address sits under its phone number as secondary information, so it
   reads as detail rather than as another action. */
.contact__addr {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-light-2);
}

@media (min-width: 480px) and (max-width: 899px) {
  .contact__details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

.foot {
  background: var(--deeper);
  color: var(--ink-light-2);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.foot__in {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
}

@media (min-width: 900px) {
  .foot__in {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    gap: 3rem;
  }
  .foot__legal { text-align: right; }
  .foot__social ul { justify-content: center; }
}

.foot__lockup { width: auto; height: clamp(40px, 5vw, 52px); }

.foot__social ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

.foot__social a {
  font-family: var(--narrow);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.foot__social a:hover { color: var(--sky); border-bottom-color: var(--sky); }

.foot__legal {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--silver);
}

/* Plain text link, deliberately not a logo or a visual endorsement. */
.foot__legal a {
  color: var(--silver);
  text-decoration: underline;
  text-decoration-color: rgba(164, 164, 164, 0.45);
  text-underline-offset: 2px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.foot__legal a:hover { color: #fff; text-decoration-color: #fff; }