/* ==========================================================================
   SEE Institute — website v2.1
   Design tokens taken directly from the approved v2.1 design.
   ========================================================================== */

:root {
  /* Brand teal. 2.53:1 on white, so it is used for GRAPHICS ONLY -- rules,
     borders, decorative accents. Never for text, and never as a background
     behind text. */
  --teal: #2bb5a8;
  /* Same hue, dark enough for AA text on white (4.95) and on --surface (4.56),
     and to carry white text itself (4.95). Used for all teal text, links,
     focus indicators and teal button grounds. */
  --teal-text: #1e7d74;
  --teal-text-hover: #196961;
  --teal-dark: #239b90;
  --teal-light: #5ed0c4;
  --teal-pale: #9be8dd;
  --teal-deep: #0f6b60;
  --teal-wash: #eaf6f4;
  --teal-soft: #d6f2ee;
  /* Tints for text sitting ON the darker --teal-text panel. #d6f2ee only
     reaches 4.20 there, so these are lifted until they clear AA. */
  --on-teal: #eafaf7;
  --on-teal-accent: #ffffff;

  --ink: #172126;
  --ink-deep: #10181b;
  --body: #53615b;
  --body-soft: #5c6862;
  --muted: #68736d;

  --line: #dde2df;
  --line-strong: #c9d1cd;
  --line-soft: #e7eae8;

  --surface: #f4f6f5;
  --white: #fff;

  --on-dark: #e2ebe5;
  --on-dark-soft: #c5d3cb;
  --on-dark-muted: #b9c8c1;
  --on-dark-faint: #7f8d87;

  --display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: 64px;
  --nav-h: 76px;
}

@media (max-width: 1100px) { :root { --gutter: 40px; } }
@media (max-width: 720px)  { :root { --gutter: 20px; --nav-h: 64px; } }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

/* Any anchored jump must clear the sticky masthead. */
[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }

h1, h2, h3, h4, p { margin: 0; }
/* `height: auto` is load-bearing, not tidiness. Every <img> on this site
   carries width and height attributes so the browser can reserve the space
   before the file arrives, and those attributes map to presentational hints.
   With both of them set and no author rule for height, the used height is the
   attribute's raw pixel value and any declared `aspect-ratio` is ignored:
   .projcard's 4/3 never applied, so the three project images rendered 413px
   wide by 676, 958 and 1281px tall — their intrinsic heights — which is what
   made that grid ragged. Anything that genuinely wants to fill a box sets its
   own height and still wins on specificity. */
img { max-width: 100%; display: block; height: auto; }
button { font: inherit; color: inherit; }

a { color: var(--teal-text); text-decoration: none; }
a:hover { color: var(--teal-text-hover); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #c3ccc7; border-radius: 5px; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

.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;
}

/* --------------------------------------------------------------- type ---- */

.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .95;
  text-transform: uppercase;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--teal-text);
  text-transform: uppercase;
}
.eyebrow--wide { letter-spacing: .22em; font-size: 13px; font-weight: 600; }
.eyebrow--light { color: var(--teal-light); }

.lede { font-size: 17px; line-height: 1.55; }
.prose { font-size: 16px; line-height: 1.6; color: var(--body); }
.prose + .prose { margin-top: 14px; }

.accent { color: var(--teal-text); }
.accent-light { color: var(--teal-light); }

.tbc {
  font-size: 13px;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  padding: 10px 14px;
  align-self: flex-start;
  line-height: 1.5;
}
.tbc--dark { color: #8fa39a; border-color: rgba(255,255,255,.3); padding: 12px 16px; }

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

.section { padding: 80px var(--gutter); }
.section--tight { padding: 72px var(--gutter); }
.section--tall { padding: 88px var(--gutter); }
.section--head { padding: 96px var(--gutter) 72px; }
.section--last { padding-bottom: 96px; }
.section--surface { background: var(--surface); }
.section--ink { background: var(--ink); color: #fff; }
.section--deep { background: var(--ink-deep); color: #fff; }
.rule-top { border-top: 1px solid var(--line); }
.rule-bottom { border-bottom: 1px solid var(--line); }

.stack { display: flex; flex-direction: column; }
.stack-6 { gap: 6px; } .stack-10 { gap: 10px; } .stack-12 { gap: 12px; }
.stack-14 { gap: 14px; } .stack-16 { gap: 16px; } .stack-18 { gap: 18px; }
.stack-20 { gap: 20px; } .stack-24 { gap: 24px; } .stack-28 { gap: 28px; }
.stack-32 { gap: 32px; } .stack-40 { gap: 40px; } .stack-48 { gap: 48px; }

.grid { display: grid; }
.grid--2 { grid-template-columns: 1fr 1fr; gap: 64px; }
.grid--2-tight { grid-template-columns: 1fr 1fr; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.grid--3-tight { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.align-end { align-items: end; }
.align-center { align-items: center; }
.measure { max-width: 760px; }
.measure-wide { max-width: 1100px; }

/* --------------------------------------------------------------- header ---- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line-soft);
}

.masthead__bar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 var(--gutter);
  white-space: nowrap;
}

.masthead__logo { flex-shrink: 0; }
.masthead__logo img { height: 44px; width: auto; object-fit: contain; }

.masthead__nav {
  display: flex;
  gap: 28px;
  font-size: 16px;
  font-weight: 500;
  color: #3c4a44;
  flex-shrink: 0;
  align-items: center;
}

.navlink {
  color: inherit;
  cursor: pointer;
  padding: 8px 0;
  background: none;
  border: 0;
  font-weight: 500;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.navlink:hover, .navlink:focus-visible { color: var(--teal-text); }
.navlink[aria-expanded="true"] { color: var(--teal-text); font-weight: 600; }
.navlink__caret { font-size: 11px; line-height: 1; }
.navlink.is-current { color: var(--teal-text); font-weight: 600; }

.masthead__cta {
  margin-left: auto;
  background: var(--teal-text);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 22px;
  flex-shrink: 0;
}
.masthead__cta:hover { background: var(--teal-text-hover); color: #fff; }

.burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}
.burger i { display: block; width: 22px; height: 2.5px; background: var(--ink); }

/* megamenu */

.megamenu {
  display: none;
  background: var(--white);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(23,33,38,.18);
  padding: 32px var(--gutter) 36px;
}
.megamenu.is-open { display: block; }

.megamenu__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.megamenu__col {
  padding: 4px 22px 8px;
  border-left: 2px solid var(--teal);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
}
.megamenu__col:hover { background: var(--surface); color: inherit; }
.megamenu__col b {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--ink);
}
.megamenu__col span { font-size: 14px; line-height: 1.45; color: var(--body); }

.megamenu__biz { display: flex; flex-direction: column; gap: 22px; }
.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 32px;
}
.bizcard {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
}
.bizcard:hover { border-color: var(--teal); color: inherit; }
.bizcard b { font-family: var(--display); font-size: 18px; color: var(--ink); }
.bizcard span { font-size: 14px; line-height: 1.45; color: var(--body); }
.bizcard i { color: var(--muted); }

/* mobile drawer */

.drawer {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 55;
  background: var(--white);
  overflow-y: auto;
  padding: 8px 20px 48px;
  border-top: 1px solid var(--line-soft);
}
.drawer.is-open { display: block; }
.drawer__link {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.drawer__group { border-bottom: 1px solid var(--line); }
.drawer__toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-align: left;
}
.drawer__toggle span:last-child { color: var(--teal-text); font-size: 15px; }
.drawer__panel { display: none; padding: 0 0 14px; }
.drawer__panel.is-open { display: block; }
.drawer__sub {
  display: block;
  padding: 11px 0 11px 16px;
  border-left: 2px solid var(--teal);
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.4;
}
.drawer__sub b { display: block; font-family: var(--display); font-size: 16px; letter-spacing: .03em; }
.drawer__sub span { font-size: 13px; color: var(--body); }
.drawer__cta { margin-top: 26px; width: 100%; justify-content: center; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 26px;
  border: 0;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--teal { background: var(--teal-text); color: #fff; }
.btn--teal:hover { background: var(--teal-text-hover); color: #fff; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--teal-text); color: #fff; }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: #e8efe9; color: var(--ink); }
.btn--white-teal { background: #fff; color: var(--teal-text); }
.btn--white-teal:hover { background: var(--teal-soft); color: var(--teal-text-hover); }
.btn--outline { border: 1.5px solid var(--ink); color: var(--ink); background: none; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--outline-light { border: 1.5px solid #fff; color: #fff; background: none; }
.btn--outline-light:hover { background: #fff; color: var(--ink); }
.btn--loud {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 16px 32px;
  text-transform: uppercase;
}
.btn--book {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 14px 28px;
}

.textlink {
  align-self: flex-start;
  font-size: 15px;
  font-weight: 600;
  color: var(--teal-text);
  border-bottom: 1.5px solid var(--teal-text);
  padding-bottom: 2px;
  cursor: pointer;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
}
.textlink:hover { color: var(--ink); border-color: var(--ink); }

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

.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.hero--home { min-height: 480px; }
.hero--page { min-height: 520px; }
.hero--tall { min-height: 560px; }
.hero--taller { min-height: 600px; }
.hero--lab { min-height: 620px; }
.hero--fest { min-height: 720px; }

.hero__media, .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim { position: absolute; inset: 0; }
.hero__scrim--left { background: linear-gradient(90deg, rgba(14,22,20,.78) 0%, rgba(14,22,20,.45) 50%, rgba(14,22,20,.1) 100%); }
.hero__scrim--down { background: linear-gradient(180deg, rgba(14,22,20,.1) 0%, rgba(14,22,20,.85) 100%); }
.hero__scrim--deep { background: linear-gradient(180deg, rgba(14,22,20,.1) 0%, rgba(14,22,20,.88) 100%); }
.hero__scrim--fest { background: linear-gradient(180deg, rgba(16,24,27,.2) 0%, rgba(16,24,27,.95) 100%); }

.hero__body {
  position: relative;
  width: 100%;
  padding: 56px var(--gutter);
}
.hero__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
.hero__split--wide { grid-template-columns: 1.2fr 1fr; }

.hero h1 { font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.h-58 { font-size: 58px; line-height: .95; letter-spacing: -.03em; }
.h-64 { font-size: 64px; line-height: .92; letter-spacing: -.035em; }
.h-68 { font-size: 68px; line-height: .92; letter-spacing: -.035em; }
.h-72 { font-size: 72px; line-height: .92; letter-spacing: -.035em; }
.h-80 { font-size: 80px; line-height: .9; letter-spacing: -.04em; }
.h-96 { font-size: 96px; line-height: .9; letter-spacing: -.04em; }
.h-56 { font-size: 56px; line-height: .95; letter-spacing: -.035em; }
.h-52 { font-size: 52px; line-height: .95; letter-spacing: -.03em; }
.h-48 { font-size: 48px; line-height: .95; letter-spacing: -.03em; }
.h-44 { font-size: 44px; line-height: .95; letter-spacing: -.03em; }
.h-40 { font-size: 40px; line-height: 1; letter-spacing: -.025em; }
.h-26 { font-size: 26px; line-height: 1.05; letter-spacing: -.02em; }

.hero__strap {
  font-family: var(--display);
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ---------------------------------------------------------- route strip ---- */

.routes {
  background: var(--white);
  border-top: 3px solid var(--teal);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.route {
  padding: 28px;
  border-right: 1px solid var(--line);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: inherit;
}
.route:first-child { padding-left: 0; }
.route:last-child { padding-right: 0; border-right: 0; }
.route:hover { background: var(--surface); color: inherit; }
.route__num { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--teal-text); margin-top: 6px; }
.route b { font-family: var(--display); font-size: 24px; letter-spacing: -.01em; color: var(--ink); }
.route span.route__desc { font-size: 15px; color: var(--body); }

/* ------------------------------------------------------------ lab block ---- */

.labblock {
  background: var(--surface);
  padding: 72px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.labblock__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 420px; }
.labblock__pic { position: relative; overflow: hidden; }
.labblock__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------- cards, tiles --- */

.projcard { display: flex; flex-direction: column; gap: 12px; color: inherit; }
.projcard:hover { color: inherit; }
.projcard:hover h3 { color: var(--teal-text); }
.projcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.projcard__tag {
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--teal-text);
  margin-top: 6px;
}
.projcard h3 {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
}
.projcard p { font-size: 15px; line-height: 1.5; color: var(--body); }

.tilecard { display: flex; flex-direction: column; gap: 14px; color: inherit; }
.tilecard:hover { color: inherit; }
.tilecard:hover h3 { color: var(--teal-text); }
.tilecard img { width: 100%; height: 240px; object-fit: cover; }
.tilecard__tag { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--teal-text); }
.tilecard h3 { font-family: var(--display); font-size: 22px; letter-spacing: -.01em; color: var(--ink); }
.tilecard p { font-size: 15px; line-height: 1.5; color: var(--body); }

.boxcard {
  border: 1px solid var(--line);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  /* These render as <button> where they open the enquiry form; without this
     the UA default button background (#efefef) shows through, which both
     breaks the look and drops text contrast below AA. */
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.boxcard:hover { border-color: var(--teal); color: inherit; }
.boxcard__tag { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--teal-text); }
.boxcard h3 {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
.boxcard p { font-size: 15px; line-height: 1.5; color: var(--body); }
.boxcard__meta { font-size: 13px; color: var(--body-soft); margin-top: auto; }

/* ------------------------------------------------------------ big promo ---- */

.promo {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,22,20,0) 30%, rgba(14,22,20,.9) 100%); }
.promo__body { position: relative; padding: 36px; display: flex; flex-direction: column; gap: 12px; }
.promo__body h3, .promo__body h2 {
  font-family: var(--display);
  font-size: 44px;
  line-height: .95;
  letter-spacing: -.025em;
  font-weight: 800;
  text-transform: uppercase;
}
.promo p { font-size: 16px; line-height: 1.5; color: var(--on-dark); max-width: 520px; }
.promo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.promo__when { font-size: 14px; color: var(--on-dark-soft); }

.promo--wide { min-height: 420px; margin: 0 var(--gutter); }
.promo--wide .promo__scrim { background: linear-gradient(90deg, rgba(14,22,20,.9) 0%, rgba(14,22,20,.4) 70%, rgba(14,22,20,.1) 100%); }
.promo--wide .promo__body { padding: 48px; max-width: 640px; gap: 14px; }
.promo--wide h2 { font-size: 52px; letter-spacing: -.03em; }

.pill {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
  padding: 5px 9px;
  display: inline-block;
}
.pill--teal { background: var(--teal-text); color: #fff; }
.pill--ghost { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ diary list --- */

.diary { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.diary__item {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  flex: 1;
  color: inherit;
}
.diary__item:hover { background: var(--surface); color: inherit; }
.diary__date { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.diary__date b { font-family: var(--display); font-size: 30px; letter-spacing: -.02em; color: var(--ink); }
.diary__date span { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--teal-text); margin-top: 4px; }
.diary__meta { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--muted); }
.diary__body { display: flex; flex-direction: column; gap: 6px; }
.diary__body h3 {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
.diary__body p { font-size: 14px; line-height: 1.5; color: var(--body); }
.diary__when { font-size: 14px; color: var(--body-soft); }
.diary__more {
  margin-top: auto;
  padding: 22px 0 0;
  display: flex;
  align-items: flex-end;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -.01em;
  font-weight: 800;
  color: var(--teal-text);
  line-height: 1;
}
.diary__more:hover { color: var(--ink); }

/* ------------------------------------------------------------- listings ---- */

.chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: none;
  cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip.is-on, .chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.listings { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.listing {
  display: grid;
  grid-template-columns: 120px 1fr 240px 180px;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  color: inherit;
  text-align: left;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
  width: 100%;
}
.listing:hover { background: var(--surface); color: inherit; }
.listing__date { display: flex; flex-direction: column; }
.listing__date b { font-family: var(--display); font-size: 26px; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.listing__date span { font-size: 12px; letter-spacing: .1em; font-weight: 600; color: var(--body-soft); }
.listing__main { display: flex; flex-direction: column; gap: 6px; }
.listing__type { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--teal-text); }
.listing__main b { font-family: var(--display); font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.listing__where { font-size: 14px; color: var(--body); }
.badge {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
  padding: 6px 10px;
  justify-self: end;
  text-align: center;
}
.badge--created { background: var(--teal-text); color: #fff; }
.badge--hosted { border: 1px solid var(--muted); color: var(--body); }
.listings__empty { padding: 40px 0; font-size: 16px; color: var(--body); }

/* --------------------------------------------------------------- courses --- */

.courses { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.course {
  display: grid;
  grid-template-columns: 150px 1fr 200px 160px 140px;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  cursor: pointer;
  text-align: left;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  color: inherit;
}
.course:hover { background: var(--surface); }
.course__type { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--teal-text); }
.course b { font-family: var(--display); font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.course__cell { font-size: 14px; color: var(--body); }
.course__price { font-size: 14px; color: var(--ink); font-weight: 600; text-align: right; }

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

.rowlist { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.rowlist__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
}
.rowlist__row:last-child { border-bottom: 0; }
.rowlist__row b { font-family: var(--display); font-size: 16px; color: var(--ink); }
.rowlist__row span { font-size: 14px; line-height: 1.5; color: var(--body); }

.rowlist--links .rowlist__row { grid-template-columns: 170px 1fr; align-items: baseline; padding: 18px 0; }
.rowlist--links .rowlist__row:last-child { border-bottom: 1px solid var(--line); }
.rowlist--links .rowlist__row:hover b { color: var(--teal-text); }
.rowlist--links .rowlist__row b { font-size: 18px; letter-spacing: .04em; }
.rowlist--links .rowlist__row span { font-size: 15px; }
.rowlist--biz .rowlist__row { padding: 16px 0; }
.rowlist--biz .rowlist__row b { font-size: 17px; letter-spacing: 0; }
.rowlist--biz .rowlist__row span { font-size: 15px; }

/* ------------------------------------------------------- what-we-do rows --- */

.dorow {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  color: inherit;
}
.dorow:hover h2 { color: var(--teal-text); }
.dorow h2 { font-family: var(--display); font-size: 40px; letter-spacing: -.02em; font-weight: 800; color: var(--ink); }
.dorow p { font-size: 16px; line-height: 1.6; color: var(--body); }
.dorow__go { font-size: 15px; font-weight: 600; color: var(--teal-text); text-align: right; }

/* ---------------------------------------------------------- process band --- */

.band {
  background: var(--teal-text);
  color: #fff;
  padding: 32px var(--gutter);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.band > div { padding: 0 20px; border-right: 1px solid rgba(255,255,255,.3); }
.band > div:first-child { padding-left: 0; }
.band > div:last-child { padding-right: 0; border-right: 0; }
.band b { font-family: var(--display); font-size: 20px; letter-spacing: .02em; }

.band--fest {
  background: none;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.15);
  grid-template-columns: repeat(6, 1fr);
}
.band--fest > div { padding: 28px 24px; border-right: 1px solid rgba(255,255,255,.15); }
.band--fest > div:first-child { padding-left: 0; }
.band--fest > div:last-child { padding-right: 0; border-right: 0; }
.band--fest b { font-family: var(--display); font-size: 24px; letter-spacing: -.01em; }

.factbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.factbar > div {
  padding: 28px var(--gutter);
  border-right: 1px solid rgba(255,255,255,.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.factbar > div:last-child { border-right: 0; }
.factbar b { font-family: var(--display); font-size: 22px; }
.factbar span { font-size: 11px; letter-spacing: .16em; font-weight: 700; color: var(--teal-light); }

/* ------------------------------------------------------------- split art --- */

.splitart { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.splitart img { width: 100%; height: 100%; object-fit: cover; }
.splitart__panel {
  padding: 72px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.splitart__panel--teal { background: var(--teal-text); color: #fff; }
.splitart__panel--teal p { color: var(--on-teal); }
.splitart__panel--teal .eyebrow,
.splitart__panel--teal .eyebrow--light { color: var(--on-teal-accent); }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.pillar {
  padding: 56px 48px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pillar:first-child { padding-left: var(--gutter); }
.pillar:last-child { padding-right: var(--gutter); border-right: 0; }
.pillar h3 {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
}
.pillar p { font-size: 15px; line-height: 1.6; color: var(--body); }

/* -------------------------------------------------------------- feature ---- */

.feature {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,22,20,.1) 0%, rgba(14,22,20,.9) 100%); }
.feature__body {
  position: relative;
  padding: 80px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  width: 100%;
}
.feature__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: 2px solid var(--teal-light);
  padding-left: 32px;
}
.feature__aside h3 {
  font-family: var(--display);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--teal-light);
}

.duo {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a grid item's automatic minimum is its content,
     so the unbreakable word EXPERIMENT pushed this wider than the screen. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.duo > div {
  padding: 56px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.duo > div:first-child { border-right: 1px solid var(--line); }
.duo h2 { font-family: var(--display); font-size: clamp(30px, 8vw, 44px); letter-spacing: -.025em; font-weight: 800; color: var(--ink); }
.duo p { font-size: 16px; line-height: 1.6; color: var(--body); }

/* ----------------------------------------------------------------- form ---- */

.formcard { background: #fff; padding: 36px; display: flex; flex-direction: column; gap: 16px; }
.formcard--modal { padding: 44px 48px; gap: 20px; }

.field {
  border: 1px solid var(--line-strong);
  padding: 14px 16px;
  font-size: 14px;
  font-family: var(--sans);
  color: var(--ink);
  background: #fff;
  width: 100%;
  border-radius: 0;
}
.field::placeholder { color: var(--muted); }
.field:focus { outline: 2px solid var(--teal-text); outline-offset: -2px; }
.field--area { min-height: 80px; resize: vertical; }
.field--select { appearance: none; cursor: pointer; padding-right: 40px; }

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field-label {
  font-size: 14px;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
}
.field-label--teal { font-size: 12px; color: var(--teal-text); }

.selectwrap { position: relative; display: block; }
.selectwrap::after {
  content: "▾";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--body);
  pointer-events: none;
}
.selectwrap .field { padding: 16px 18px; font-size: 16px; }

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--body);
  line-height: 1.4;
  cursor: pointer;
}
.consent input {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin: 1px 0 0;
  accent-color: var(--teal-text);
}

.topicchips { display: flex; flex-wrap: wrap; gap: 8px; }
.topicchip {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: none;
  cursor: pointer;
}
.topicchip:hover { background: var(--teal-wash); }
.topicchip[aria-pressed="true"] { background: var(--teal-text); color: #fff; border-color: var(--teal-text); }

.formnote { font-size: 13px; color: var(--body); }
.formerror { font-size: 13px; color: #b3261e; font-weight: 600; }
[hidden] { display: none !important; }

.thanks h3 {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}
.formcard .thanks h3 { font-size: 28px; }

/* modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(14,24,22,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal__panel {
  background: #fff;
  width: 600px;
  max-width: 100%;
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 40px 90px rgba(0,0,0,.35);
  position: relative;
}
.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--body);
  cursor: pointer;
  padding: 6px 10px;
}
.modal__close:hover { color: var(--ink); }

/* ------------------------------------------------------------ work-with ---- */

.workwith {
  background: var(--ink);
  padding: 88px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  color: #fff;
}
/* Fluid, not a fixed 56px: "BUILD TOGETHER?" carries .nowrap to keep the
   phrase on one line, and at a fixed 56px uppercase that line is 526px wide —
   wider than a phone, which gave the whole home page a horizontal scrollbar. */
.workwith h2 { font-family: var(--display); font-size: clamp(30px, 7vw, 56px); line-height: .95; letter-spacing: -.035em; font-weight: 800; text-transform: uppercase; }
.workwith p { font-size: 17px; line-height: 1.55; color: var(--on-dark); max-width: 560px; }
/* The photograph is 16:9 and composed with both people and the planting beds
   in frame. `flex: 1` let this box absorb whatever height the column had left,
   which at desktop made it a 3.25:1 letterbox — only 55% of the frame's height
   survived, cutting the pair off at the hips and keeping a lot of empty dome.
   Matching the box to the asset means cover has nothing to crop. */
.workwith__pic { flex: 0 0 auto; aspect-ratio: 16 / 9; position: relative; overflow: hidden; margin-top: 8px; }
.workwith__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------- venues ---- */

.venuecard { display: flex; flex-direction: column; gap: 14px; }
.venuecard img { width: 100%; height: 340px; object-fit: cover; }
.venuecard h2 { font-family: var(--display); font-size: 28px; letter-spacing: -.02em; color: var(--ink); }
.venuecard span { font-size: 14px; color: var(--body-soft); line-height: 1.5; }

.notice {
  margin: 0 var(--gutter) 96px;
  background: var(--surface);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.notice p { font-size: 15px; line-height: 1.55; color: var(--body); }
.notice b { color: var(--ink); }

/* ---------------------------------------------------------------- visit ---- */

.visit { display: grid; grid-template-columns: 1fr 1fr; min-height: 700px; }
.visit__panel { padding: 96px var(--gutter); display: flex; flex-direction: column; gap: 40px; }
.visit__address { display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.visit__address b { font-family: var(--display); font-size: 20px; }
.visit__map { position: relative; background: #e4e9e6; min-height: 700px; }
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visit__card {
  position: absolute;
  left: 32px; bottom: 32px;
  background: #fff;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
  z-index: 2;
}
.visit__card b { font-family: var(--display); font-size: 16px; color: var(--ink); }
.visit__card span { font-size: 13px; color: var(--body); }

.contactroutes { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.contactroute {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  text-align: left;
}
.contactroute b { font-family: var(--display); font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.contactroute span { font-size: 14px; color: var(--body-soft); }
.contactroute:hover b, .contactroute:hover span { color: var(--teal-text); }

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

.footer {
  background: var(--ink-deep);
  color: #fff;
  padding: 64px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.footer__cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr .8fr;
  gap: 40px;
}
.footer__brand { display: flex; flex-direction: column; gap: 18px; }
.footer__brand img { height: 46px; width: auto; object-fit: contain; align-self: flex-start; }
.footer__brand span { font-size: 14px; color: var(--on-dark-muted); line-height: 1.6; }
.footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--on-dark-muted); }
.footer__col h2 {
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--teal-light);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.footer__col a { color: var(--on-dark-muted); }
.footer__col a:hover { color: #fff; }
.footer__legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--on-dark-faint);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 22px;
}
.footer__legal a { color: var(--on-dark-faint); }
.footer__legal a:hover { color: #fff; }
.footer__legal div { display: flex; gap: 22px; flex-wrap: wrap; }

/* ------------------------------------------------------------- fest page --- */

.fest { background: var(--ink-deep); color: #fff; }
.fest .eyebrow { color: var(--teal-light); }
.fest p { color: var(--on-dark-soft); }

/* ------------------------------------------------------------ legal page --- */

.legal { padding: 96px var(--gutter); max-width: 820px; }
/* Fluid: "ACCESSIBILITY" is one unbreakable word, and at a fixed 56px
   uppercase it is wider than a 320px screen. */
.legal h1 { font-family: var(--display); font-size: clamp(32px, 9vw, 56px); line-height: .95; letter-spacing: -.03em; font-weight: 800; text-transform: uppercase; overflow-wrap: break-word; }
.legal h2 { font-family: var(--display); font-size: 24px; letter-spacing: -.01em; margin-top: 36px; }
.legal p { font-size: 16px; line-height: 1.65; color: var(--body); margin-top: 14px; }
.legal ul { font-size: 16px; line-height: 1.65; color: var(--body); margin: 14px 0 0; padding-left: 22px; }
.legal li { margin-bottom: 8px; }

/* ==========================================================================
   Responsive — mirrors the approved mobile layout notes:
   same section order, headline scales to 40px, four routes become a 2x2 grid,
   projects and events stack with full-width CTAs, nav collapses to a menu
   plus a persistent "Book a venue" button.
   ========================================================================== */

@media (max-width: 1280px) {
  .h-96 { font-size: 76px; }
  .h-80 { font-size: 66px; }
  .h-72 { font-size: 60px; }
  .h-68 { font-size: 56px; }
  .h-64 { font-size: 54px; }
  .h-58 { font-size: 50px; }
  .h-56 { font-size: 46px; }
  .h-52 { font-size: 44px; }
  .h-48 { font-size: 42px; }
  .listing { grid-template-columns: 100px 1fr 200px 150px; }
  .course { grid-template-columns: 130px 1fr 170px 140px 110px; }
  .dorow { grid-template-columns: 200px 1fr 220px; gap: 28px; }
}

@media (max-width: 1080px) {
  .masthead__nav, .masthead__cta { display: none; }
  .burger { display: flex; }
  .megamenu { display: none !important; }

  .grid--2, .grid--3, .grid--3-tight, .grid--2-tight { grid-template-columns: 1fr; gap: 32px; }
  .hero__split, .hero__split--wide { grid-template-columns: 1fr; gap: 20px; }
  .labblock { grid-template-columns: 1fr; gap: 28px; padding: 48px var(--gutter); }
  .labblock__pics { height: 240px; gap: 8px; }
  .workwith { grid-template-columns: 1fr; gap: 28px; padding: 56px var(--gutter); }
  .splitart { grid-template-columns: 1fr; min-height: 0; }
  .splitart img { height: 280px; }
  .splitart__panel { padding: 48px var(--gutter); }
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--line); padding: 40px var(--gutter); }
  .pillar:last-child { border-bottom: 0; }
  .feature { min-height: 0; }
  .feature__body { grid-template-columns: 1fr; gap: 32px; padding: 56px var(--gutter); }
  .duo { grid-template-columns: 1fr; }
  .duo > div { padding: 40px var(--gutter); }
  .duo > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .visit { grid-template-columns: 1fr; min-height: 0; }
  .visit__panel { padding: 56px var(--gutter); gap: 32px; }
  .visit__map { min-height: 420px; }
  .band { grid-template-columns: repeat(2, 1fr); gap: 0 0; row-gap: 14px; }
  .band > div { border-right: 0; padding: 0; }
  .band--fest { grid-template-columns: repeat(2, 1fr); }
  .band--fest > div { padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .factbar { grid-template-columns: 1fr; }
  .factbar > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .factbar > div:last-child { border-bottom: 0; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .notice { grid-template-columns: 1fr; gap: 20px; }
  .dorow { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .dorow__go { text-align: left; }
  .promo--wide .promo__body { padding: 32px; }
  .promo--wide h2 { font-size: 40px; }
  .section, .section--tight, .section--tall { padding: 56px var(--gutter); }
  .section--head { padding: 64px var(--gutter) 40px; }
  .section--last { padding-bottom: 64px; }
  .rowlist__row { grid-template-columns: 1fr; gap: 6px; }
  .rowlist--links .rowlist__row, .rowlist--biz .rowlist__row { grid-template-columns: 1fr; }
  .venuecard img { height: 260px; }
  .hero__body { padding: 40px var(--gutter); }
  .labblock, .workwith { align-items: start; }
}

@media (max-width: 720px) {
  .h-96, .h-80, .h-72, .h-68, .h-64, .h-58, .h-56, .h-52, .h-48 { font-size: 40px; line-height: .95; letter-spacing: -.03em; }
  .h-44 { font-size: 34px; }
  .h-40 { font-size: 32px; }
  .h-26 { font-size: 22px; }
  .hero__strap { font-size: 19px; }
  .lede { font-size: 15px; }
  .prose { font-size: 14px; line-height: 1.55; }

  .masthead__logo img { height: 30px; }

  .routes { grid-template-columns: 1fr 1fr; padding: 0; }
  .route { padding: 18px 16px; gap: 10px; border-bottom: 1px solid var(--line); }
  .route:first-child, .route:last-child { padding: 18px 16px; }
  .route:nth-child(2n) { border-right: 0; }
  .route:nth-child(n+3) { border-bottom: 0; }
  .route b { font-size: 17px; }
  .route span.route__desc { font-size: 12px; }
  .route__num { font-size: 11px; margin-top: 4px; }

  .promo { min-height: 300px; }
  .promo--wide { margin: 0 var(--gutter); min-height: 300px; }
  .promo__body { padding: 20px; }
  .promo__body h3, .promo__body h2, .promo--wide h2 { font-size: 30px; }
  .promo p { font-size: 14px; }
  .promo__foot { flex-direction: column; align-items: flex-start; gap: 12px; }

  .btn { width: 100%; }
  .btn--inline { width: auto; }
  .promo__foot .btn, .hero .btn { width: auto; }

  .diary__item { grid-template-columns: 48px 1fr; gap: 14px; padding: 16px 0; }
  .diary__date b { font-size: 24px; }
  .diary__body h3 { font-size: 17px; }
  .diary__more { font-size: 18px; }

  .listing { grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 0; }
  .listing__where { grid-column: 2; font-size: 13px; }
  .badge { grid-column: 2; justify-self: start; }
  .listing__main b { font-size: 17px; }

  .course { grid-template-columns: 1fr auto; gap: 6px 14px; padding: 18px 0; }
  .course__type { grid-column: 1 / -1; }
  .course b { grid-column: 1 / -1; font-size: 17px; }
  .course__cell { grid-column: 1 / -1; }
  .course__price { grid-column: 1 / -1; text-align: left; }

  .formcard, .formcard--modal { padding: 20px; }
  .field-pair { grid-template-columns: 1fr; }
  .modal { padding: 0; align-items: stretch; }
  .modal__panel { max-height: 100vh; width: 100%; }

  .footer { padding: 40px var(--gutter) 28px; gap: 32px; }
  .footer__cols { grid-template-columns: 1fr; gap: 28px; }

  .tilecard img { height: 200px; }
  .venuecard img { height: 220px; }
  .notice { margin: 0 var(--gutter) 56px; padding: 24px; }
  .visit__card { left: 20px; bottom: 20px; }
  .legal { padding: 56px var(--gutter); }
  .legal h1 { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

@media print {
  .masthead, .drawer, .modal, .burger { display: none !important; }
  body { color: #000; }
}

/* Mobile hero framing — matches the approved mobile comp. */
@media (max-width: 720px) {
  .hero--home .hero__media img { object-position: 55% 85% !important; }
  .hero__scrim--left { background: linear-gradient(180deg, rgba(14,22,20,.1) 0%, rgba(14,22,20,.85) 100%); }
}

/* Brand marks — centred in their cell, capped so a vector mark can't balloon.
   The anchor carries the width; the image fills it. Sizing the image off a
   shrink-to-fit parent collapses it to zero. */
.brandmark {
  justify-self: center;
  align-self: center;
  display: block;
  max-width: 100%;
  padding: 8px 0;
}
.brandmark img {
  width: var(--mark-w, 340px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 1080px) { .brandmark { justify-self: start; } }

/* --------------------------------------------------- brand sections -------- */
/* Ground colour for a partner/business section. Near-white neutral, taken from
   the supplied swatch — and the tone these lockups need, since most of the
   2050 mark (the "twenty", the brackets, the strapline) is near-black and
   would disappear on a dark panel.
   To change it, change this one value. */
:root { --brandsection-bg: #f4f6f5; }

.brandsection {
  background: var(--brandsection-bg);
  border-top: 1px solid var(--line);
  /* The masthead is sticky, so an anchored jump must clear it. */
  scroll-margin-top: calc(var(--nav-h) + 8px);
}


/* ==========================================================================
   Accessibility
   ========================================================================== */

/* WCAG 1.4.1 — a link inside a run of text must not rely on colour alone.
   Scoped to prose so nav items, buttons and card links keep their own
   treatment (those are distinguishable by position and shape). */
.prose a,
.lede a,
.consent a,
.notice p a,
.legal p a,
.legal li a,
.listings__empty a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose a:hover,
.lede a:hover,
.consent a:hover,
.notice p a:hover,
.legal p a:hover,
.legal li a:hover {
  text-decoration-thickness: 2px;
}

/* A visible focus ring on every interactive element, including on dark
   panels where the teal ring would otherwise disappear. */
.section--ink :focus-visible,
.section--deep :focus-visible,
.hero :focus-visible,
.feature :focus-visible,
.promo :focus-visible,
.workwith :focus-visible,
.footer :focus-visible,
.fest :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Honour a request for more contrast where the OS exposes one. */
@media (prefers-contrast: more) {
  :root {
    --body: #2c3630;
    --body-soft: #3d4a44;
    --muted: #4a5651;
    --line: #9aa5a0;
    --line-strong: #7e8a85;
  }
  .prose a, .lede a, .consent a { text-decoration-thickness: 2px; }
}

/* Screen-reader-only text that becomes visible when focused (skip targets). */
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* --- teal on dark grounds -------------------------------------------------
   --teal-text is tuned for white and --surface. On the dark heroes, ink
   panels and scrimmed photography it drops to ~2.4-3.5:1, which is worse
   than the original brand teal was. Dark contexts use --teal-light instead
   (6.4-9.3:1 over the same scrim, 8.8:1 on --ink).
   Automated checkers report text-over-image as "incomplete" rather than
   failing, so this pairing has to be reasoned about rather than measured. */
.on-dark .accent,
.on-dark .eyebrow,
.on-dark .statement .accent,
.hero .accent,
.hero .eyebrow,
.section--ink .accent,
.section--ink .eyebrow,
.section--deep .accent,
.section--deep .eyebrow,
.feature .accent,
.feature .eyebrow,
.promo .accent,
.promo .eyebrow,
.promo .tilecard__tag,
.workwith .accent,
.workwith .eyebrow,
.fest .accent,
.fest .eyebrow,
.footer .accent {
  color: var(--teal-light);
}

/* Links inside dark panels need the light tint too. */
.on-dark a:not(.btn):not(.link-on-dark),
.section--ink a:not(.btn),
.section--deep a:not(.btn),
.feature a:not(.btn),
.workwith a:not(.btn),
.fest a:not(.btn) {
  color: var(--teal-light);
}
.on-dark a:not(.btn):not(.link-on-dark):hover,
.section--ink a:not(.btn):hover,
.section--deep a:not(.btn):hover,
.feature a:not(.btn):hover,
.workwith a:not(.btn):hover,
.fest a:not(.btn):hover {
  color: var(--teal-pale);
}

/* The teal process band carries white text on --teal-text, so its own
   accents must stay white rather than inheriting a teal tint. */
.band .accent, .band .eyebrow { color: #fff; }

/* A light card nested inside a dark section is a light ground again -- the
   enquiry form sits on white inside the dark "Work with SEE" panel, where the
   light teal drops to 1.85:1. Revert to the light-ground tokens. */
.formcard a:not(.btn),
.formcard .accent,
.formcard .eyebrow {
  color: var(--teal-text);
}
.formcard a:not(.btn):hover {
  color: var(--teal-text-hover);
}

/* ==========================================================================
   Accessibility preferences panel
   ========================================================================== */

.a11y {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 110;          /* above the page, below the enquiry dialog (120) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.a11y__toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--teal-text);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(23, 33, 38, .32);
  transition: background .15s ease, transform .15s ease;
}
.a11y__toggle:hover { background: var(--teal-text-hover); transform: translateY(-1px); }
.a11y__toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a11y__icon { width: 30px; height: 30px; display: block; }

.a11y__panel {
  order: -1;                     /* opens above the button */
  width: 320px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(23, 33, 38, .28);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.a11y__panel[hidden] { display: none; }

.a11y__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a11y__head h2 {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.a11y__close {
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--body);
  cursor: pointer;
  padding: 2px 6px;
}
.a11y__close:hover { color: var(--ink); }

.a11y__note { font-size: 13px; line-height: 1.45; color: var(--body); }

.a11y__group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.a11y__group legend {
  padding: 0;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--teal-text);
}
.a11y__row { display: flex; gap: 6px; flex-wrap: wrap; }

.a11y__opt {
  flex: 1 1 auto;
  min-width: 84px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.a11y__opt:hover { border-color: var(--ink); }
.a11y__opt[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.a11y__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-size: 13px;
}
.a11y__reset {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--teal-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.a11y__reset:hover { color: var(--teal-text-hover); }

@media (max-width: 720px) {
  .a11y { right: 14px; bottom: 14px; }
  .a11y__toggle { width: 46px; height: 46px; }
  .a11y__icon { width: 26px; height: 26px; }
  .a11y__panel { width: calc(100vw - 28px); }
}

/* Nothing should print. */
@media print { .a11y { display: none !important; } }

/* --- what the preferences actually do ----------------------------------- */

/* Text size. The stylesheet is in px, so scaling the root font-size would
   not move most of it. Zoom on the content blocks does, and leaves the
   panel itself at a stable size so its controls stay reachable. */
[data-a11y-text="115"] .masthead,
[data-a11y-text="115"] main,
[data-a11y-text="115"] .footer { zoom: 1.15; }
[data-a11y-text="130"] .masthead,
[data-a11y-text="130"] main,
[data-a11y-text="130"] .footer { zoom: 1.30; }

/* High contrast. Same direction as the prefers-contrast block, pushed
   further: darker text, stronger rules, underlined links. */
[data-a11y-contrast="high"] {
  --body: #1d2621;
  --body-soft: #29332e;
  --muted: #333d38;
  --line: #7e8a85;
  --line-strong: #5e6a65;
  --teal-text: #14625b;
  --teal-text-hover: #0d4a45;
  --on-dark-muted: #eaf2ee;
  --on-dark-soft: #eaf2ee;
  --on-dark: #f4faf7;
  --on-dark-faint: #cfdad4;
}
[data-a11y-contrast="high"] .prose a,
[data-a11y-contrast="high"] .lede a,
[data-a11y-contrast="high"] .legal a { text-decoration-thickness: 2px; }
[data-a11y-contrast="high"] .hero__scrim--left,
[data-a11y-contrast="high"] .hero__scrim--down,
[data-a11y-contrast="high"] .hero__scrim--deep,
[data-a11y-contrast="high"] .hero__scrim--fest,
[data-a11y-contrast="high"] .promo__scrim,
[data-a11y-contrast="high"] .feature__scrim {
  background: rgba(9, 14, 12, .82);
}
[data-a11y-contrast="high"] :focus-visible { outline-width: 4px; }

/* Reduced motion, chosen explicitly rather than read from the OS. */
[data-a11y-motion="reduced"] * {
  transition: none !important;
  animation: none !important;
}
[data-a11y-motion="reduced"] { scroll-behavior: auto !important; }

/* Underline every link, not just the ones inside prose. */
[data-a11y-links="underline"] a:not(.btn):not(.masthead__cta):not(.a11y__toggle) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Outbound-link marker on group brand entries. */
.outbound {
  display: inline-block;
  font-size: .78em;
  line-height: 1;
  margin-left: 3px;
  vertical-align: 1px;
  opacity: .75;
}
a:hover .outbound { opacity: 1; }

/* ==========================================================================
   About + Living Lab (content refresh)
   ========================================================================== */

.hero--lab-xl { min-height: 760px; }
.hero--about  { min-height: 640px; }
.hero__body   { padding: 64px var(--gutter); }

.hero__scrim--lab {
  background: linear-gradient(180deg, rgba(14,22,20,.15) 0%, rgba(14,22,20,.42) 45%, rgba(14,22,20,.94) 100%);
}
.hero__scrim--about {
  background: linear-gradient(180deg, rgba(14,22,20,.1) 0%, rgba(14,22,20,.9) 100%);
}

.h-112 { font-size: 112px; line-height: .88; letter-spacing: -.04em; }
.h-78  { font-size: 78px;  line-height: .92; letter-spacing: -.04em; }
.h-30  { font-size: 30px;  line-height: 1;   letter-spacing: -.025em; }

/* The heavy Archivo pull-quote used through both pages. */
.statement {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
}
.statement--26 { font-size: 26px; }
.hero .statement,
.on-dark .statement { color: #fff; }

/* Link inside dark hero copy — the light tint, still underlined. */
.link-on-dark {
  color: var(--teal-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-on-dark:hover { color: var(--teal-pale); }

/* ---- Living Lab: dark split with the stacked domain list --------------- */

.labsplit {
  background: var(--ink);
  color: #fff;
  padding: 96px var(--gutter) 88px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: stretch;
}

.keylist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.4);
}
.keylist li {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-size: 40px;
  line-height: 1;
  color: #fff;
  flex: 1;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding: 10px 0;
}
.keylist__last { color: var(--teal-light); }

/* ---- image mosaics ---------------------------------------------------- */

.mosaic { display: grid; gap: 8px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaic--5 { grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 300px 300px; }
.mosaic--5 .mosaic__tall { grid-row: span 2; }
.mosaic--3 { grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 380px; }

/* ---- "what can be explored" ------------------------------------------- */

.exploregrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 48px;
}
.explorecard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 2px solid var(--ink);
  padding-top: 24px;
}
.explorecard h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.025em;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}
.explorecard p { font-size: 17px; line-height: 1.6; color: var(--body); }

/* ---- dot-separated statement blocks ----------------------------------- */

.bigline {
  font-family: var(--display);
  font-size: 46px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.bigline--light { color: #fff; }
.bigline--22 { font-size: 22px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; }
.bigline__dot { color: var(--teal-light); }
.bigline__dot--teal { color: var(--teal-text); }

.textlink--light { color: var(--teal-light); border-color: var(--teal-light); }
.textlink--light:hover { color: var(--teal-pale); border-color: var(--teal-pale); }

/* ---- inline dark CTA bar ---------------------------------------------- */

.ctabar {
  margin: 48px var(--gutter) 96px;
  background: var(--ink-deep);
  color: #fff;
  padding: 36px 40px;
  display: flex;
  justify-content: center;
  gap: 48px;
  align-items: center;
}
.ctabar h2 { white-space: nowrap; }
.ctabar p {
  font-size: 18px;
  line-height: 1.45;
  color: var(--on-dark-soft);
  text-wrap: balance;
  flex: 1;
}
.ctabar .btn { white-space: nowrap; flex-shrink: 0; }

/* ---- About: the six question cards ------------------------------------ */

.qgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.qcard {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.qcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,22,20,0) 35%, rgba(14,22,20,.9) 100%);
}
.qcard__body { position: relative; padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.qcard h3 {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 800;
  text-transform: uppercase;
}
.qcard p { font-size: 14px; line-height: 1.5; color: var(--on-dark); }

/* ---- About: ideas in practice ----------------------------------------- */

.ideacard { display: flex; flex-direction: column; gap: 14px; color: inherit; }
.ideacard:hover { color: inherit; }
.ideacard:hover h3 { color: var(--teal-text); }
.ideacard img { width: 100%; height: 260px; object-fit: cover; }
.ideacard__tag {
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--teal-text);
  text-transform: uppercase;
}
.ideacard h3 {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--ink);
}
.ideacard p { font-size: 15px; line-height: 1.55; color: var(--body); }
.ideacard__cta { font-size: 14px; font-weight: 600; color: var(--teal-text); margin-top: auto; }

/* ---- About: people / planet / technology rows ------------------------- */

.rowlist--pillars { align-self: center; width: 100%; }
.rowlist--pillars .rowlist__row { grid-template-columns: 200px 1fr; gap: 24px; padding: 20px 0; align-items: baseline; }
.rowlist--pillars .rowlist__row:last-child { border-bottom: 1px solid var(--line); }
.rowlist--pillars b {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-transform: uppercase;
}
.rowlist--pillars span { font-size: 15px; line-height: 1.5; color: var(--body); }

.fillimg { width: 100%; height: 100%; object-fit: cover; min-height: 0; }

/* ---- About: closing panel -------------------------------------------- */

.ctapanel {
  margin: 64px var(--gutter) 96px;
  background: var(--ink-deep);
  color: #fff;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 420px;
}
.ctapanel__body {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.ctapanel p { font-size: 17px; line-height: 1.55; color: var(--on-dark); max-width: 560px; }
.ctapanel img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }

/* ---- responsive ------------------------------------------------------- */

@media (max-width: 1280px) {
  .h-112 { font-size: 84px; }
  .h-78  { font-size: 62px; }
  .bigline { font-size: 38px; }
  .keylist li { font-size: 32px; }
  .exploregrid { gap: 40px 32px; }
}

@media (max-width: 1080px) {
  .hero--lab-xl { min-height: 560px; }
  .hero--about { min-height: 480px; }
  .labsplit { grid-template-columns: 1fr; gap: 40px; padding: 56px var(--gutter); }
  .keylist li { font-size: 28px; padding: 8px 0; }
  .mosaic--5 { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px 220px; }
  .mosaic--5 .mosaic__tall { grid-row: span 1; grid-column: span 2; }
  .mosaic--3 { grid-template-columns: 1fr; grid-template-rows: 240px 240px 240px; }
  .exploregrid { grid-template-columns: 1fr 1fr; }
  .qgrid { grid-template-columns: 1fr 1fr; }
  .ctabar { flex-direction: column; align-items: flex-start; gap: 20px; margin: 40px var(--gutter) 64px; }
  .ctabar h2 { white-space: normal; }
  .ctapanel { grid-template-columns: 1fr; min-height: 0; margin: 40px var(--gutter) 64px; }
  .ctapanel__body { padding: 40px var(--gutter); }
  .ctapanel img { height: 280px; }
  .rowlist--pillars .rowlist__row { grid-template-columns: 1fr; gap: 6px; }
  .statement--26 { font-size: 21px; }
}

@media (max-width: 720px) {
  .h-112, .h-78 { font-size: 40px; line-height: .95; letter-spacing: -.03em; }
  .h-30 { font-size: 24px; }
  .statement, .statement--26 { font-size: 17px; }
  .bigline { font-size: 24px; }
  .bigline--22 { font-size: 17px; }
  .keylist li { font-size: 22px; }
  .exploregrid { grid-template-columns: 1fr; gap: 32px; }
  .explorecard h3 { font-size: 24px; }
  .qgrid { grid-template-columns: 1fr; }
  .qcard { height: 320px; }
  .mosaic--5 { grid-template-columns: 1fr; grid-template-rows: repeat(5, 200px); }
  .mosaic--5 .mosaic__tall { grid-column: span 1; }
  .hero__body { padding: 32px var(--gutter); }
  .ideacard img { height: 200px; }
}