/* ACCESS Europe – main stylesheet.
 *
 * Mobile first. Measurements come from the XD artboards
 * (430 iPhone, 820 iPad, 1280 and 1920 desktop); vw-based values are the
 * desktop pixel size divided by 1920.
 *
 * Absolute url("/assets/...") references are fingerprinted at build time
 * (see lib/assets.js), so always use that form for fonts and images.
 */

/* ---------- Fonts (self-hosted Source Sans 3, SIL OFL 1.1) ---------- */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-300-normal.ee4e7226.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: "Source Sans 3";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-ext-300-normal.0eee682f.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-400-normal.0f73f35e.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: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-ext-400-normal.f5706bb0.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-600-normal.14527d19.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: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-ext-600-normal.5727d1da.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-700-normal.ae35266f.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: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-ext-700-normal.6a9fd742.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

/* ---------- Design tokens ---------- */

:root {
  --font-sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --color-text: #000;
  --color-muted: #828282;
  --color-accent: #94c506;
  --color-heading: #0a4683;
  --color-band: #ececec;
  --color-divider: #707070;
  --color-footer-text: #bfbfbf;
  --color-bg: #fff;

  --gradient-header: linear-gradient(90deg, #0d354c 0%, #09507b 30.6%, #0f71a5 52%, #148dbc 69%, #38d395 100%);
  --gradient-footer: linear-gradient(90deg, #020d1f 0%, #4b4b4b 100%);

  --header-height: max(60px, 6.25vw);
  --footer-height: 80px;
  --gutter: max(30px, 7.29vw);
}

@media (min-width: 768px) {
  :root {
    --footer-height: 60px;
  }
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

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

a {
  color: var(--color-accent);
}

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

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

/* ---------- Header ---------- */

.site-header {
  background: var(--gradient-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--header-height);
  padding-inline: var(--gutter);
}

.site-header__logo img {
  /* 55px logo in a 120px header on the 1920 artboard */
  height: calc(var(--header-height) * 0.46);
  width: auto;
}

@media (min-width: 768px) {
  .site-header__inner {
    justify-content: flex-start;
  }
}

/* ---------- Main ---------- */

.site-main {
  flex: 1;
  /* The footer is fixed to the viewport; keep the last content above it. */
  padding-bottom: var(--footer-height);
}

/* ---------- Footer (fixed to the bottom of the viewport) ---------- */

.site-footer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  min-height: var(--footer-height);
  display: flex;
  align-items: center;
  background: var(--gradient-footer);
  color: var(--color-footer-text);
}

.site-footer__inner {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
}

.site-footer__copyright {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(1.5rem, 2.6vw, 50px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav a {
  display: inline-block;
  padding-block: 6px;
  color: var(--color-footer-text);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-footer__nav a:hover,
.site-footer__nav a[aria-current="page"] {
  color: #fff;
}

@media (min-width: 768px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-block: 0;
  }

  /* iPad artboard: 10px copyright (raised to 12px for legibility), 14px links */
  .site-footer__copyright {
    text-align: center;
    font-size: 12px;
  }

  .site-footer__nav a {
    font-size: 14px;
  }
}

/* 1280 and 1920 artboards: 16px copyright, 18px links */
@media (min-width: 1280px) {
  .site-footer__copyright {
    font-size: 16px;
    /* 0.01em on the 1280 artboard, 0.05em on the 1920 one */
    letter-spacing: clamp(0.16px, -1.12px + 0.1vw, 0.8px);
  }

  .site-footer__nav a {
    font-size: 18px;
  }
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 30px;
  padding: 0.2em 1.5em;
  border-radius: 4px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* ---------- Home: product tiles ----------
 *
 * Stacked below 1024px (artboards 430 and 820), side by side from 1024px
 * (artboards 1280 and 1920). Sizes interpolate linearly between the two
 * artboards of each layout and are clamped outside them.
 *
 * Vertical spacing is between line boxes; with Source Sans 3 metrics the
 * cap height of a line sits at (line-height / 2 - 0.348em) from its top,
 * which is how the paddings below were derived from the artboards.
 */

.products {
  --p-gutter: clamp(30px, -27.33px + 13.3333vw, 82px);
  --p-gutter-right: var(--p-gutter);
  --p-pad: clamp(22.5px, -37.59px + 13.9744vw, 77px);
  --p-pad-bottom: clamp(30px, -14.1px + 10.2564vw, 70px);
  --p-title: clamp(22px, 14.28px + 1.7949vw, 29px);
  --p-gap1: clamp(10.6px, 6.85px + 0.8718vw, 14px);
  --p-tagline: clamp(16px, 6.08px + 2.3077vw, 25px);
  --p-tagline-lh: clamp(20px, 6.77px + 3.0769vw, 32px);
  --p-gap2: clamp(22.4px, 12.92px + 2.2051vw, 31px);
  --p-btn-h: clamp(30px, 13.46px + 3.8462vw, 45px);
  --p-btn-w: clamp(120px, 71.49px + 11.2821vw, 164px);
  --p-btn-font: clamp(15px, 7.28px + 1.7949vw, 22px);
  --p-btn-radius: clamp(4px, -0.41px + 1.0256vw, 8px);

  display: grid;
}

@media (min-width: 1024px) {
  .products {
    --p-gutter: clamp(80px, -40px + 9.375vw, 140px);
    --p-gutter-right: clamp(60px, -100px + 12.5vw, 140px);
    --p-pad: clamp(66px, 52px + 1.0938vw, 73px);
    --p-pad-bottom: clamp(61px, 31px + 2.3438vw, 76px);
    --p-title: clamp(30px, 20px + 0.7812vw, 35px);
    --p-gap1: clamp(13px, 16px - 0.1562vw, 14px);
    --p-tagline: clamp(22px, 14px + 0.625vw, 26px);
    --p-tagline-lh: clamp(28px, 16px + 0.9375vw, 34px);
    --p-gap2: clamp(24px, 4px + 1.5625vw, 34px);
    --p-btn-h: clamp(35px, -3px + 2.9688vw, 54px);
    --p-btn-w: clamp(128px, 4px + 9.6875vw, 190px);
    --p-btn-font: clamp(18px, 2px + 1.25vw, 26px);
    --p-btn-radius: clamp(6px, 2px + 0.3125vw, 8px);
    --p-divider-top: clamp(62px, 46px + 1.25vw, 70px);
    --p-divider-bottom: clamp(61px, 31px + 2.3438vw, 76px);

    grid-template-columns: 1fr 1fr;
  }
}

.product {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.product__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.product__body {
  position: relative;
  flex: 1;
  padding: var(--p-pad) var(--p-gutter) var(--p-pad-bottom);
  color: var(--color-muted);
}

.product + .product .product__body {
  padding-inline-start: var(--p-gutter-right);
}

@media (min-width: 1024px) {
  .product + .product .product__body::before {
    content: "";
    position: absolute;
    inset: var(--p-divider-top) auto var(--p-divider-bottom) 0;
    width: 1px;
    background: var(--color-footer-text);
  }
}

.product__name {
  margin: 0;
  font-size: var(--p-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.product__tagline {
  max-width: var(--p-tagline-width, 24em);
  margin: var(--p-gap1) 0 var(--p-gap2);
  font-size: var(--p-tagline);
  line-height: var(--p-tagline-lh);
  letter-spacing: 0.02em;
}

.product .button {
  min-width: var(--p-btn-w);
  height: var(--p-btn-h);
  min-height: 0;
  padding: 0 1em;
  border-radius: var(--p-btn-radius);
  font-size: var(--p-btn-font);
  letter-spacing: 0.03em;
}

/* ---------- Text pages: Legal Notice, Privacy Policy, 404 ----------
 *
 * Grey title band below the header; on screens tall enough, header and band
 * stay in place while the text scrolls, and the text fades out above the
 * fixed footer (as in the XD artboards). The text column is centred:
 * 380px (430 artboard), 580px (820), 665px (1280), 1000px (1920).
 */

:root {
  --fade-height: 146px;
}

@media (min-width: 1280px) {
  :root {
    --fade-height: clamp(146px, 78px + 5.3125vw, 180px);
  }
}

.legal__column {
  --legal-column: clamp(380px, 159.5px + 51.282vw, 580px);

  width: min(100% - 50px, var(--legal-column));
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .legal__column {
    --legal-column: clamp(580px, -5px + 52.344vw, 1000px);
  }
}

.legal__intro {
  position: relative;
  padding: 38px 0 32px;
  background: var(--color-band);
}

@media (min-height: 600px) {
  .page-legal .site-header {
    position: sticky;
    top: 0;
    z-index: 6;
  }

  .legal__intro {
    position: sticky;
    top: var(--header-height);
    z-index: 5;
  }
}

/* Phone: top right corner of the band. */
.legal__back {
  position: absolute;
  top: 16px;
  right: 16px;
  border-radius: 50%;
}

.legal__back img {
  width: 34px;
  height: 34px;
}

@media (min-width: 768px) {
  .legal__intro-inner {
    position: relative;
  }

  /* Left of the title, level with its capitals. */
  .legal__back {
    top: 7px;
    right: auto;
    left: -72px;
  }
}

.legal__title {
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(35px, 23.97px + 2.5641vw, 45px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.legal__lead {
  margin: 12px 0 0;
  font-size: clamp(16px, 10.49px + 1.2821vw, 21px);
  font-weight: 300;
  line-height: clamp(22px, 13.18px + 2.0513vw, 30px);
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {
  .legal__lead {
    margin-top: 10px;
    letter-spacing: 0.05em;
  }
}

.legal__address {
  margin-top: 28px;
  font-size: 15px;
  font-style: normal;
  line-height: 24px;
  letter-spacing: 0.01em;
}

.legal__address strong {
  font-weight: 600;
}

.legal__body {
  padding: 42px 0 var(--fade-height);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
}

.legal__body p,
.legal__body ul {
  margin: 0 0 24px;
}

.legal__body ul {
  padding-left: 1.25em;
}

.legal__body a {
  color: var(--color-accent);
  text-decoration: none;
}

.legal__body a:hover,
.legal__body a:focus-visible {
  text-decoration: underline;
}

.legal__body h2,
.legal__body h3,
.legal__body h4 {
  margin: 0;
  color: var(--color-text);
}

/* Privacy Policy outline */
.legal__body h2 {
  margin: 48px 0 24px;
  font-size: 23px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.legal__body h3,
.legal__body .section-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.legal__body h4 {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}

/* Legal Notice: small upper-case labels, larger section title */
.legal__body .label {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.legal__body .section-title {
  margin: 24px 0 24px;
}

.legal__body > :first-child {
  margin-top: 0;
}

/* Fade above the fixed footer */
.legal::after {
  content: "";
  position: fixed;
  inset: auto 0 var(--footer-height) 0;
  z-index: 4;
  height: var(--fade-height);
  background: linear-gradient(rgb(255 255 255 / 0), #fff);
  pointer-events: none;
}