/* Valence — site styles. Page layout lives inline in each page (from the design canvas);
   this file adds the font, base styles, interaction states and the tablet/phone layouts. */

@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #1B2AB8; color: #F4F1EA; font-family: Archivo, 'Arial Narrow', sans-serif; }
img, video { max-width: 100%; }
a { color: #F4F1EA; text-decoration: none; }
a:hover { color: #FFB23F; }
button { font-family: inherit; cursor: pointer; background: transparent; color: #F4F1EA; }
:focus-visible { outline: 3px solid #FFB23F; outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 50; padding: 10px 16px; background: #FFB23F; color: #0E1560; font-weight: 600; text-transform: uppercase; }
.skip:focus { top: 16px; color: #0E1560; }
.v h1, .v h2, .v h3, .v p, .v blockquote { overflow-wrap: break-word; }

/* Links on amber and off-white stay navy */
.v [style*="background: #FFB23F"] a, .v [style*="background: #F4F1EA"] a { color: #0E1560; }
.v [style*="background: #FFB23F"] a:hover { color: #0E1560; border-bottom-width: 4px !important; }

/* Project tiles: no colour change on hover, gentle image lift */
.v a[data-tile]:hover { color: inherit; }
.v a[data-tile] img, .v a[data-tile] video { transition: filter .3s ease, transform .6s ease; }
.v a[data-tile]:hover img, .v a[data-tile]:hover video { filter: brightness(0.75) !important; transform: scale(1.03); }

/* Filter buttons: selected state */
.v button[aria-pressed="true"] { background: #F4F1EA !important; color: #1B2AB8 !important; border-color: #F4F1EA !important; }
.v button[aria-pressed="false"] { background: transparent; color: #F4F1EA; }

/* Chapter list: the chapter in view */
.v nav[aria-label="Chapters"] a.is-current { color: #FFB23F !important; border-top-color: #F4F1EA !important; }
.v nav[aria-label="Chapters"] a:not(.is-current) { color: #F4F1EA !important; border-top-color: #5360D0 !important; }
.v nav[aria-label="Chapters"] { position: sticky; top: 24px; }

/* Headings never exceed the screen */
.v [style*="font-size: 120px"] { font-size: min(120px, 11vw) !important; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .v [style*="px 48px"], .v [style*=" 0 48px"] { padding-left: 32px !important; padding-right: 32px !important; }
  .v [style*="left: 48px; right: 48px"] { left: 32px !important; right: 32px !important; }
  .v [style*="grid-template-columns: repeat(3"][style*="grid-auto-rows"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 280px !important; }
  .v [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 40px !important; }
  .v nav[aria-label="Chapters"] { display: none !important; }
  .v nav[aria-label="Chapters"] + div { grid-column: 1 / -1 !important; }
  .v [style*="height: 760px"] { height: 56vw !important; }
  .v [style*="height: 700px"] { height: 600px !important; }
}

/* ---------- Phone: three sizes become 44 / 19 / 14 ---------- */
@media (max-width: 700px) {
  .v [style*="px 48px"], .v [style*=" 0 48px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .v [style*="left: 48px; right: 48px"] { left: 16px !important; right: 16px !important; bottom: 24px !important; }
  .v [style*="font-size: 120px"] { font-size: 44px !important; line-height: 0.9 !important; }
  .v [style*="font-size: 28px"] { font-size: 19px !important; }
  .v [style*="font-size: 20px"] { font-size: 14px !important; }
  .v header nav { gap: 20px !important; }
  .v [style*="padding: 160px"] { padding-top: 80px !important; }
  .v [style*="padding: 120px"] { padding-top: 64px !important; }
  .v [style*="margin-top: 160px"], .v [style*="margin-top: 120px"] { margin-top: 64px !important; }
  .v [style*="padding: 96px"], .v [style*="padding: 80px"], .v [style*="padding: 72px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  .v [style*="repeat(12"], .v [style*="repeat(5"], .v [style*="repeat(3"], .v [style*="repeat(2"],
  .v [style*="grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
  .v [style*="repeat(12"] > *, .v [style*="repeat(3"] > *, .v [style*="repeat(2"] > * { grid-column: 1 / -1 !important; }
  .v [style*="grid-auto-rows"] { grid-auto-rows: 240px !important; gap: 8px !important; }
  .v [style*="grid-row: span 2"] { grid-row: span 1 !important; }
  .v [style*="grid-template-columns: 64px minmax(0, 1fr)"] { grid-template-columns: 32px minmax(0, 1fr) !important; column-gap: 12px !important; }
  .v [style*="grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr)"] { row-gap: 8px !important; }
  .v [style*="height: 700px"] { height: 480px !important; }
  .v [style*="height: 760px"] { height: 62vw !important; }
  .v [style*="padding: 40px; min-height: 280px"] { padding: 24px !important; min-height: 200px !important; }
  .v [style*="padding: 32px; min-height: 320px"] { padding: 20px !important; min-height: 0 !important; }
  .v [style*="padding: 20px 22px"] { padding: 14px !important; }
  .v [style*="padding: 20px 22px"] [style*="padding: 4px 8px"] { display: none; }
  .v [style*="gap: 80px"] { gap: 48px !important; }
  .v [role="group"] { flex-wrap: wrap; }
  .v [aria-label="Filter by lead discipline"] { width: 100%; }
  .v [aria-label="Filter by lead discipline"] button { flex: 1 1 0; padding: 0 8px !important; }
  .v [aria-label="Filter by type"] button { padding: 0 12px !important; }
}

/* Services page: descriptions tuck beside the last line of each name on wide screens only */
@media (max-width: 1100px) {
  .v [style*="margin: -130px 0 0"] { margin-top: 0 !important; }
}
@media (max-width: 700px) {
  .v [style*="padding-left: calc"] { padding-left: 0 !important; }
  .v [style*="padding: 40px 40px 48px"] { padding: 24px 16px 28px !important; }
}

/* Case study image viewer: click any picture to see it large */
.v img[data-zoom] { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 64px 72px; background: rgba(14, 21, 96, 0.98); }
.lb.is-open { display: flex; }
.lb img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; display: block; cursor: zoom-out; }
.lb p { margin: 0; color: #F4F1EA; font-stretch: 95%; font-weight: 600; font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; }
.lb button { position: absolute; width: 56px; height: 56px; border: 2px solid #F4F1EA; background: transparent; color: #F4F1EA; font-family: inherit; font-weight: 600; font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lb button:hover { background: #F4F1EA; color: #0E1560; }
.lb .lb-close { top: 16px; right: 16px; }
.lb .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
body.lb-lock { overflow: hidden; }
@media (max-width: 700px) {
  .lb { padding: 72px 12px 88px; }
  .lb p { font-size: 14px; }
  .lb button { width: 48px; height: 48px; font-size: 22px; }
  .lb .lb-prev, .lb .lb-next { top: auto; bottom: 16px; transform: none; }
  .lb .lb-prev { left: 16px; } .lb .lb-next { right: 16px; }
}