/* SempraVita: the same frame as terel.io (frosted bands over a field of light), in the
   colours and type of the SempraVita logo (brand/palette.json, Montserrat). */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Montserrat-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Montserrat-Bold.woff2) format("woff2");
}

:root {
  --paper: #FFFFFF;
  --ink: #0A2A6E;     /* the wordmark's ink */
  --navy: #0B3781;
  --quiet: #3D4F70;
  --link: #1B85A6;    /* the logo's blue */
  --leaf: #49BA8E;
  --frost: rgba(255, 255, 255, 0.74);
  --width: 1160px;                       /* wider than terel.io's 1080: Montserrat runs wide */
  --name: clamp(2rem, 4.4vw, 3.1rem);    /* the name in the bottom band */
  --motto: clamp(1.1rem, 2.1vw, 1.45rem);
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Without JavaScript there is no animated light; a still wash stands in for it. */
  background: linear-gradient(125deg, #E0F2F7 0%, #E3F6F1 35%, #E9F7EC 60%, #DEEAF8 100%) fixed;
}

.js body { background: transparent; } /* the canvas behind it carries the light */

.light {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

main {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.stage {
  flex: 1;
  min-height: max(38svh, 24rem); /* room for the drawing above the caption, even in short windows */
  position: relative;
}

/* The playing offer, in its own words, at the foot of the stage. */
.caption {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(40rem, calc(100% - 32px));
  margin: 0;
  padding: 0.55rem 1.1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance; /* even lines: no single word left on the last one */
  opacity: 0;
  transition: opacity 0.45s ease; /* = CAPTION_FADE in site.js: out, change words, in */
}
.caption.show { opacity: 1; }
.caption strong { display: block; font-weight: 700; } /* the "For …" line, centred above the sentence */
.no-js .caption, html:not(.js) .caption { display: none; }

@media (max-width: 640px) {
  .caption { font-size: 0.95rem; }
}

.band {
  background: var(--frost);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  backdrop-filter: blur(28px) saturate(1.15);
  padding: 2.25rem 16px 1.25rem; /* fixed, not from the window height, so the bands never change size */
}

.band-inner {
  max-width: var(--width);
  margin: 0 auto;
}

/* ---- top band: what SempraVita is ---- */
.intro { padding-bottom: 2rem; }

.lede {
  margin: 0 auto;      /* the paragraph is centred in the band; its lines are left-aligned */
  max-width: 46rem;
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  line-height: 1.45;
}

/* The offers in the stage: with JavaScript the caption shows them one at a time, so the
   list is visually hidden (still read by screen readers); without it, a plain list. */
.js .stage h2,
.js .offers {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stage h2 { margin: 0 auto; padding: 1.5rem 16px 0.5rem; max-width: var(--width); font-size: 1rem; }
.offers { margin: 0 auto; padding: 0 16px 1.5rem 2.2rem; max-width: var(--width); }
.offers strong { display: block; }

/* ---- bottom band: as on terel.io ---- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem 3rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

/* The colour emblem, as tall as the name and motto together. */
.logo {
  flex: none;
  height: calc(var(--name) * 1.05 + var(--motto) * 1.8);
  width: auto;
}

h1 {
  margin: 0;
  font-weight: 400;
  font-size: var(--name);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.motto {
  margin: 0.3em 0 0;
  font-size: var(--motto);
  letter-spacing: 0.03em;
  color: var(--quiet);
}

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  font-size: 1.05rem;
}

address { font-style: normal; }

dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.1rem 1.1rem;
  margin: 0;
}

dt { color: var(--quiet); }
dd { margin: 0; }

footer {
  max-width: var(--width);
  margin: 2rem auto 0;
  font-size: 0.9rem;
  color: var(--quiet);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { color: var(--link); }

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

@media (max-width: 640px) {
  .foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .caption { transition: none; }
}