/* Silka is the brand's own typeface and the site's original CMS served these
 * two faces from its own /files; they are vendored here so the pages don't
 * depend on that host. Inter (the nav and the accordion titles) comes from
 * Google Fonts, as it did before. */
@font-face {
  font-family: 'Silka';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/silka-regular-webfont.woff') format('woff');
}
@font-face {
  font-family: 'Silka Bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/silka-bold.woff') format('woff');
}

:root {
  /* Palette, straight off the original site's custom properties. */
  --accent: #f57e20;          /* hsl(26.48 91.42% 54.31%) — h2, nav, buttons */
  --navy: #004484;            /* hsl(209.09 100% 25.88%) — h1, h3, h4        */
  --ink: #000000;             /* body copy                                   */
  --ink-soft: #55555a;
  --link: #2a2497;
  --link-hover: #2e4de6;
  --line: #e3e3df;
  --bg: #ffffff;
  --sand: #f1f1ef;
  --dark: #000000;
  --dark-soft: #333333;

  /* Silka for body and headings, Inter for the nav — as the CMS had it. */
  --font: 'Silka', Arial, Helvetica, sans-serif;
  --font-bold: 'Silka Bold', 'Silka', Arial, Helvetica, sans-serif;
  --font-ui: 'Inter', Arial, Helvetica, sans-serif;

  /* The CMS's three row widths, and the 20px of padding every column carries
   * (so a 3-of-12 column in a narrow section comes out at the 223px the
   * original lays out). */
  --measure: 1170px;
  --measure-narrow: 1053px;
  --measure-wide: 1345px;
  --col-pad: 20px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 14px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.85;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 12px 20px;
  font-family: var(--font-ui); font-weight: 600;
}
.skip-link:focus { left: 0; }

:where(a, button, summary, input):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

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

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--dark);
  color: #fff;
}
.site-header a { text-decoration: none; }

/* Header: 152px tall on desktop, with the logo at the 285x82 the original
 * renders it. */
.header-inner {
  width: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
  padding: 35px 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand { flex: 0 0 auto; }
.brand img { width: 285px; height: auto; display: block; }

.nav-toggle {
  margin-left: auto;
  display: none;
  align-items: center; gap: 10px;
  background: none; border: 0;
  color: var(--accent);
  font-family: var(--font-ui); font-size: 18px; cursor: pointer;
  padding: 8px 4px;
}
.nav-toggle-bars { display: block; width: 22px; height: 2px; background: currentColor; position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }

.header-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px);
}
.header-nav a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--accent);
}
.header-nav .nav-link { padding: 9px 22px; }
.header-nav .nav-link:hover { color: #fff; }

.lang-switch { display: flex; gap: 10px; align-items: center; }
.lang-switch a { color: #fff; }
.lang-switch a:hover { color: var(--accent); }
/* On desktop the original shows only the language you are not reading. */
@media (min-width: 900px) { .lang-switch a[aria-current='true'] { display: none; } }
@media (max-width: 899px) { .lang-switch a[aria-current='true'] { color: var(--accent); } }

/* Three button looks, as the CMS defines them: default is the orange one,
 * primary the black one, inverse a pale blue pill with a border. All three are
 * uppercase Silka Bold at 14px with wide tracking. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .63em 2.4em;
  border: 0 solid transparent;
  border-radius: 0;
  font-family: var(--font-bold);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--sm { font-size: 12px; }

.btn--default { background: var(--accent); color: #fff; }
.btn--default:hover { background: var(--ink); color: var(--accent); }

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #fff; color: var(--ink); }

.btn--inverse {
  background: #8ed6f5;
  color: #fff;
  border: 2px solid #8ed6f5;
  border-radius: 30px;
}
.btn--inverse:hover { color: var(--navy); }

/* The header's DEMO button is its own thing: an orange pill with black text,
 * set in Inter like the rest of the nav rather than in Silka. */
.btn--nav {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: none;
  line-height: 1.4;
  padding: 9px 22px;
  border-radius: 30px;
  background: var(--accent);
  color: #000;
}
.header-nav .btn--nav { color: #000; }
.header-nav .btn--nav:hover { background: #fff; color: #000; }

/* --------------------------------------------------------------- sections */

.section { padding: clamp(44px, 7vw, 96px) 0; }
.section--low { padding: clamp(28px, 4.5vw, 56px) 0; }
.section--sand { background: var(--sand); }
.section--dark { background: var(--dark); color: #fff; }
.section--dark-soft { background: var(--dark-soft); color: #fff; }
.section--accent { background: var(--accent); color: #fff; }
.section--dark a, .section--dark-soft a, .section--accent a { color: inherit; }
.section--accent .btn { background: #fff; color: var(--ink); border-color: #fff; }
.section--accent .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.section--dark .btn, .section--dark-soft .btn { background: var(--accent); border-color: var(--accent); color: #fff; }

/* The CMS's .row-main is 1170px of *content*, centred, with the gutter outside
 * it — so the hero column comes out at the 560px the original lays out. */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
  /* Content sits 20px inside the row, like a single column would; rows pull
   * back out over it so their own columns keep the full grid width. */
  padding-inline: var(--col-pad);
}
.wrap > .row { margin-inline: calc(-1 * var(--col-pad)); }
.section--narrow .wrap { --measure: var(--measure-narrow); }
.section--wide .wrap { --measure: var(--measure-wide); }

/* ------------------------------------------------------------------- grid */

/* 12 columns, no gutter between tracks: the spacing comes from each column's
 * own 20px of padding, which is how the CMS's grid is built. */
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}
.row + .row { margin-top: 0; }
.col { grid-column: span 12; min-width: 0; padding-inline: var(--col-pad); }
/* A row nested inside a column pulls back out over that column's padding, so
 * its own columns keep the parent grid's rhythm instead of being inset twice
 * (the CMS does the same with margin: 0 -20px). */
.col > .row, .col > .block > .row { margin-inline: calc(-1 * var(--col-pad)); }

@media (min-width: 760px) {
  .col-1  { grid-column: span 1; }  .col-2  { grid-column: span 2; }
  .col-3  { grid-column: span 3; }  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }  .col-8  { grid-column: span 8; }
  .col-9  { grid-column: span 9; }  .col-10 { grid-column: span 10; }
  .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }
}

/* A card group: a row of items that each declare how many fit across it
 * (--w: 2 means half-width). Below the stacking width every card goes full
 * width, so the same markup reads as a column on a phone. */
.cards {
  --cards-gap: 10px;        /* the CMS's default container gap */
  display: flex;
  flex-wrap: wrap;
  gap: var(--cards-gap);
  align-items: flex-start;
}
.cards--centered { justify-content: center; align-items: center; }
.card-col {
  --w: 1;
  flex: 1 1 calc((100% - (var(--w) - 1) * var(--cards-gap)) / var(--w));
  max-width: calc((100% - (var(--w) - 1) * var(--cards-gap)) / var(--w));
  min-width: 0;
}
.cards--logos .card-col img {
  margin: 0 auto;
  max-height: 68px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 759px) {
  .card-col { flex-basis: 100%; max-width: 100%; }
  /* Logo strips stay multi-up on a phone — full-width logos look broken. */
  .cards--logos .card-col { flex-basis: calc(50% - var(--cards-gap)); max-width: calc(50% - var(--cards-gap)); }
}

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


/* The type scale is the original's, breakpoint for breakpoint: h1 31 → 38 → 48,
 * h2 24 → 30 → 38, h3 18 → 22 → 28, h4 a flat 16. Headings are set in Silka —
 * h1, h2 and h4 in the bold face, h3 in the regular one — and carry their own
 * colours rather than inheriting the body's. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-bold);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  margin: 29px 0 10px;
}
h1 { color: var(--navy); font-size: 31px; line-height: 1.4; margin-bottom: 15px; }
h2 { color: var(--accent); font-size: 24px; line-height: 1.3; }
h3 { color: var(--navy); font-size: 18px; line-height: 1.3; font-family: var(--font); }
h4 { color: var(--navy); font-size: 16px; line-height: 1.71; letter-spacing: -.2px; }
h5, h6 { color: var(--navy); font-size: 16px; line-height: 1.71; }

/* Blocks themselves carry no margin — spacing is the spacer elements, the
 * heading margins and the paragraph padding, exactly as the CMS had it. Only
 * a card's own body is tightened, since a card is a box, not page flow. */
.card-body > :first-child { margin-top: 0; padding-top: 0; }
.card-body > :last-child { margin-bottom: 0; padding-bottom: 0; }

@media (min-width: 720px) {
  h1 { font-size: 38px; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; }
}
@media (min-width: 993px) {
  h1 { font-size: 48px; line-height: 1; }
  h2 { font-size: 38px; }
  h3 { font-size: 28px; }
  h4 { line-height: 1.6; }
}

/* On a dark or orange ground every heading goes white, as --h*-color-inverse
 * did on the original. */
.section--dark :is(h1, h2, h3, h4, h5, h6),
.section--dark-soft :is(h1, h2, h3, h4, h5, h6),
.section--accent :is(h1, h2, h3, h4, h5, h6),
.site-footer :is(h1, h2, h3, h4, h5, h6) { color: #fff; }

/* <strong> asks for 500; Silka ships 400 and 700, so — exactly as on the
 * original — it resolves to the regular face and reads as emphasis, not as a
 * second, heavier voice. */
strong, b { font-weight: 500; }

/* The CMS's per-element colour and alignment classes, carried across so an
 * orange eyebrow over a navy heading, or a centred intro, still reads that
 * way. The class names are doubled so a colour the author set on the element
 * outranks the colour its heading level — or its section's ground — would
 * otherwise give it, which is how the original behaved. */
.c-accent.c-accent { color: var(--accent); }
.c-navy.c-navy     { color: var(--navy); }
.c-ink.c-ink       { color: var(--ink); }
.c-dim.c-dim       { color: #333333; }
.c-mute.c-mute     { color: #bcbcbc; }
.c-slate.c-slate   { color: #4d6581; }
.c-white.c-white   { color: #ffffff; }
.c-sky.c-sky       { color: #8ed6f5; }

.t-center { text-align: center; }
.t-left   { text-align: left; }
.t-right  { text-align: right; }
.t-start  { text-align: start; }
.t-end    { text-align: end; }
.t-justify { text-align: justify; }

p, li, td, th { font-size: 16px; line-height: 1.6; letter-spacing: 0; }
@media (min-width: 993px) { p, li, td, th { line-height: 1.8; } }

p { padding: .9rem 0; margin: 0; }
p:first-child { padding-top: 0; }
p:last-child { padding-bottom: 0; }

/* The CMS sets a size per element as well as per heading level — the hero lede
 * is an h2 at "text-size-4-large", the numbered steps are h1s at
 * "text-size-1-large" — so these override whatever the tag would give. */
.ts-1    { font-size: 31px; line-height: 1.4; letter-spacing: 0; }
.ts-1-lg { font-size: 37px; line-height: 1.4; letter-spacing: 0; }
.ts-2    { font-size: 24px; line-height: 1.3; letter-spacing: 0; }
.ts-2-lg { font-size: 29px; line-height: 1.3; letter-spacing: 0; }
.ts-3    { font-size: 18px; line-height: 1.3; letter-spacing: 0; }
.ts-3-lg { font-size: 22px; line-height: 1.3; letter-spacing: 0; }
.ts-4    { font-size: 16px; line-height: 1.71; letter-spacing: -.2px; }
.ts-4-lg { font-size: 19px; line-height: 1.71; letter-spacing: 0; }
.ts-base { font-size: 16px; line-height: 1.6; letter-spacing: 0; }
.ts-small { font-size: 13px; }

@media (min-width: 720px) {
  .ts-1 { font-size: 38px; }   .ts-1-lg { font-size: 46px; }
  .ts-2 { font-size: 30px; }   .ts-2-lg { font-size: 36px; }
  .ts-3 { font-size: 22px; }   .ts-3-lg { font-size: 26px; }
}
@media (min-width: 993px) {
  .ts-1 { font-size: 48px; line-height: 1; }
  .ts-1-lg { font-size: 137px; line-height: 1; }
  .ts-2 { font-size: 38px; }   .ts-2-lg { font-size: 46px; }
  .ts-3 { font-size: 28px; }   .ts-3-lg { font-size: 34px; }
  .ts-4, .ts-4-lg { line-height: 1.6; }
  .ts-base { line-height: 1.8; }
}

.text ul, .text ol { margin: 0 0 1em; padding-left: 1.3em; }
.text li { margin-bottom: .5em; }
.text li::marker { color: var(--accent); }

.text blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
}

.text a { color: var(--link); text-underline-offset: 3px; }
.text a:hover { color: var(--link-hover); }
.section--dark .text a, .section--dark-soft .text a, .section--accent .text a { color: #fff; }

.text table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.text th, .text td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }

figure { margin: 0; }
figcaption { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.section--dark figcaption, .section--accent figcaption { color: rgba(255,255,255,.75); }

.image img { border-radius: var(--radius); }
.image--plain img { border-radius: 0; }

/* The CMS spaced blocks with explicit spacer elements rather than margins;
 * each carries its own desktop and mobile height. */
.spacer { height: var(--h, 24px); }
@media (max-width: 719px) { .spacer { height: var(--hm, var(--h, 24px)); } }

.divider { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.section--dark .divider, .section--dark-soft .divider, .section--accent .divider {
  border-top-color: rgba(255, 255, 255, .25);
}

/* A picture-and-words card: team members, captioned photos, icon features. */
.card { display: flex; flex-direction: column; gap: 14px; }
.card img { border-radius: var(--radius); width: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.card .card-body > :first-child { margin-top: 0; }
.card .card-body > :last-child { margin-bottom: 0; }
.card h3 { color: var(--accent); margin: 0 0 .2em; }
.card p { padding: 0; color: var(--ink-soft); }
.section--dark .card p, .section--accent .card p { color: rgba(255,255,255,.8); }

/* --------------------------------------------------------------- countdown */

.countdown-title { font-weight: 700; margin: 0 0 14px; }
.countdown-boxes { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; }
.countdown-value {
  background: var(--dark);
  color: #fff;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  padding: 14px 18px;
  border-radius: 6px;
  min-width: 72px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.countdown-label { margin-top: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.countdown.is-expired { font-size: 1.4rem; font-weight: 800; letter-spacing: .05em; }

/* --------------------------------------------------------------- accordion */

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 18px;
  color: var(--navy);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '';
  position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.accordion details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.accordion .accordion-body { padding: 0 0 22px; }

/* ----------------------------------------------------------------- entries */

.entries {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.entry a {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.entry a:hover { border-color: var(--accent); transform: translateY(-2px); }
.entry img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.entry-title {
  padding: 18px 20px 22px;
  font-family: var(--font-bold);
  font-size: 18px; line-height: 1.35;
  color: var(--navy);
}
.entry-title::after { content: ' →'; color: var(--accent); }

/* ------------------------------------------------------------- demo modal */

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--gutter); }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.modal-card {
  position: relative;
  width: min(100%, 520px);
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
  background: var(--bg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--ink-soft);
  padding: 4px 8px;
}
.modal-close:hover { color: var(--accent); }
.modal-card h2 { margin-top: 0; }
.modal-intro { color: var(--ink-soft); }

.field { display: block; margin-bottom: 16px; }
.field-label { display: block; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;                 /* below 16px iOS zooms the page on focus */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 13px;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 84px; }
.field-invalid input, .field-invalid textarea { border-color: #c0392b; }

/* The honeypot has to be reachable by a bot reading the DOM and invisible to
 * everyone else — off-screen rather than display:none, which some bots skip. */
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error { color: #c0392b; font-size: 15px; margin: 0 0 12px; padding: 0; }
.form-privacy { color: var(--ink-soft); font-size: 13px; margin: 14px 0 0; padding: 0; }
.demo-form button[type="submit"] { width: 100%; }
.demo-form button[disabled] { opacity: .65; cursor: progress; }
.modal-done h2 { color: var(--accent); }

body.modal-open { overflow: hidden; }

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

.site-footer {
  background: var(--dark);
  color: #fff;
  padding: clamp(44px, 6vw, 72px) 0 40px;
}
.site-footer a { color: #fff; }
.footer-grid {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}
.footer-grid h2 { color: #fff; }
.footer-address { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.8); font-style: normal; }
.footer-contact { font-family: var(--font-bold); }
.footer-bottom {
  max-width: var(--measure);
  margin: 40px auto 0;
  padding: 22px var(--gutter) 0;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  font-family: var(--font-ui); font-size: 13px; color: rgba(255,255,255,.65);
}
.footer-bottom a { color: rgba(255,255,255,.8); }

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

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .header-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 6px;
    background: var(--dark);
    padding: 12px var(--gutter) 26px;
    border-top: 1px solid rgba(255,255,255,.15);
  }
  .header-nav.is-open { display: flex; }
  .header-nav a { font-size: 16px; letter-spacing: 0; padding: 10px 0; color: #e2f3ff; }
  .header-nav .btn { color: #fff; }
  .site-header { position: relative; }
}

/* Without JS the menu can't toggle, so show it inline rather than hide it. */
html:not(.js) .header-nav { display: flex; }
html:not(.js) .nav-toggle { display: none; }