/* elades website — one stylesheet for every page.
   Brand: elades Brand Guidelines v1 (colours, type, 24px/12px radii). */

/* ---------- Tokens ---------- */
:root {
  --blue: #0033FF;        /* elades Blue: headings, links, buttons */
  --blue-dark: #072C9A;   /* Blue 06: link hover */
  --blue-tile: #0029CC;   /* tiles on the blue band */
  --blue-01: #E8F0FF;     /* pale tile behind product images */
  --blue-02: #C0D5FE;     /* focus halo on fields */
  --pale: #D7DDF3;        /* body text on blue */
  --cream: #FAF7F0;       /* page background */
  --cream-tile: #EFEBE2;  /* form tile */
  --navy: #0D2769;        /* body text */
  --grey-02: #D7D4CE;     /* borders */
  --grey-04: #8F8C85;     /* field borders */
  --grey-05: #625F59;     /* captions */
  --radius: 24px;         /* surfaces */
  --radius-control: 12px; /* buttons and fields */
  --container: 1360px;
  --gutter: 40px;
}

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("../fonts/manrope-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2"); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
html.smooth { scroll-behavior: smooth; }           /* turned on after load, so a deep link does not animate from the top */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--navy);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}
main { flex: 1 0 auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--blue); }
h1 { font-size: clamp(38px, 4.3vw, 60px); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(32px, 3.2vw, 44px); }
h3 { font-size: 28px; line-height: 1.2; color: var(--navy); }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
img, svg { display: block; max-width: 100%; }
section[id] { scroll-margin-top: 24px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.label { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--blue); }
.lede { font-size: 20px; line-height: 1.55; }
.link { color: var(--blue); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }   /* so that the hidden attribute wins over display rules such as .form */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px;
  border: 2px solid transparent;                   /* visible in Windows High Contrast mode */
  border-radius: var(--radius-control);
  background: var(--blue); color: var(--cream);
  font: 700 17px/1 "Manrope", sans-serif; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--blue-dark); color: var(--cream); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.btn--nav { height: 48px; padding: 0 22px; font-size: 16px; }

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: var(--radius-control); }
.band a:focus-visible, .band button:focus-visible, .footer a:focus-visible { outline-color: var(--cream); }
input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-02); }

/* ---------- Top bar ---------- */
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 24px; padding-bottom: 24px; }
.logo { display: block; color: var(--blue); text-decoration: none; }
.logo svg { height: 26.25px; width: auto; fill: currentColor; }
.nav { display: flex; align-items: center; gap: 36px; }
.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__links a { font-size: 16px; font-weight: 700; color: var(--navy); text-decoration: none; }
.nav__links a:hover { color: var(--blue); }
.nav__menu { display: none; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; align-items: center; justify-content: center; }
.nav__menu svg { width: 28px; height: 28px; }
.nav__menu .icon-close { display: none; }
.nav__menu[aria-expanded="true"] .icon-open { display: none; }
.nav__menu[aria-expanded="true"] .icon-close { display: block; }
.menu { display: none; flex-direction: column; gap: 4px; padding-top: 8px; padding-bottom: 32px; }
.menu[data-open="true"] { display: flex; }
.menu a { display: flex; align-items: center; min-height: 52px; font-size: 20px; font-weight: 700; color: var(--navy); text-decoration: none; }

/* ---------- Hero ---------- */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; padding-top: 56px; padding-bottom: 112px; }
.hero__copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero__copy .lede { max-width: 560px; }
.hero__actions { margin-top: 12px; }
.hero__media { flex: 1 1 440px; min-width: 0; max-width: 640px; margin: 0 auto; }

/* Rotating word: a fixed slot as wide as the longest word, so the rest of the line never moves */
.rot { display: inline-grid; overflow: hidden; vertical-align: top; text-align: left; padding: 0.1em 0 0.28em; margin: -0.1em 0 -0.28em; }
.rot > span { grid-area: 1 / 1; animation: rot 12s cubic-bezier(.45, 0, .2, 1) infinite both; }
.rot > span:nth-child(2) { animation-delay: 3s; }
.rot > span:nth-child(3) { animation-delay: 6s; }
.rot > span:nth-child(4) { animation-delay: 9s; }
@keyframes rot { 0% { transform: translateY(-125%); opacity: 0; } 6% { transform: none; opacity: 1; } 21% { transform: none; opacity: 1; } 27%, 100% { transform: translateY(135%); opacity: 0; } }
/* The script measures each word and sets --w1 to --w4, so the box is as wide as the word on show.
   Without the script the box stays as wide as the longest word. The timeline runs 0.48s ahead of
   the words so that the change from the last word to the first does not cross the loop point. */
.rot--fit { width: var(--w1); animation: rot-fit 12s cubic-bezier(.45, 0, .2, 1) infinite; animation-delay: calc(-0.48s - var(--rot-elapsed, 0s)); }
@keyframes rot-fit { 0% { width: var(--w4); } 10%, 25% { width: var(--w1); } 35%, 50% { width: var(--w2); } 60%, 75% { width: var(--w3); } 85%, 100% { width: var(--w4); } }

/* Hero animation: a 1080×1080 composition scaled to the box by js/site.js (CSS fallback: desktop scale) */
.stage { position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: var(--radius); overflow: hidden; background: #6DB646; color: var(--navy); font-family: "Manrope", sans-serif; }
.stage__inner { position: absolute; left: 0; top: 0; width: 1080px; height: 1080px; transform-origin: 0 0; transform: scale(0.5926); }
.stage__poster { display: none; }
.stage .anim { animation-duration: 10s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22, .8, .24, 1); animation-delay: var(--seek, 0s); }
.stage .a-prog { animation-timing-function: cubic-bezier(.45, 0, .3, 1); transform-origin: 0 50%; }
.stage .a-cur { animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
.a-cardA { animation-name: cardA; } .a-chk { animation-name: chk; } .a-done { animation-name: done; } .a-prog { animation-name: prog; }
.a-t1 { animation-name: t1; } .a-t2 { animation-name: t2; } .a-t3 { animation-name: t3; }
.a-cardB { animation-name: cardB; } .a-c1 { animation-name: c1; } .a-c2 { animation-name: c2; } .a-c3 { animation-name: c3; }
.a-area { animation-name: area; } .a-btn { animation-name: btn; } .a-sent { animation-name: sent; } .a-cur { animation-name: cur; }
@keyframes cardA { 0% { opacity: 0; transform: translateY(28px) scale(.97); } 4.55%, 31.82% { opacity: 1; transform: none; } 36.36%, 100% { opacity: 0; transform: translateY(-20px) scale(.97); } }
@keyframes chk { 0%, 26.36% { opacity: 1; } 28.18%, 100% { opacity: 0; } }
@keyframes done { 0%, 26.36% { opacity: 0; transform: scale(.85); } 28.18%, 100% { opacity: 1; transform: none; } }
@keyframes prog { 0%, 10% { transform: scaleX(0); } 24.55%, 100% { transform: scaleX(1); } }
@keyframes t1 { 0%, 12.73% { opacity: 0; transform: scale(.4); } 14.09% { opacity: 1; transform: scale(1.15); } 15%, 100% { opacity: 1; transform: scale(1); } }
@keyframes t2 { 0%, 17.27% { opacity: 0; transform: scale(.4); } 18.64% { opacity: 1; transform: scale(1.15); } 19.55%, 100% { opacity: 1; transform: scale(1); } }
@keyframes t3 { 0%, 21.82% { opacity: 0; transform: scale(.4); } 23.18% { opacity: 1; transform: scale(1.15); } 24.09%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cardB { 0%, 36.36% { opacity: 0; transform: translateY(28px) scale(.97); } 41.82%, 95.5% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.98); } }
@keyframes c1 { 0%, 45.45% { opacity: 0; transform: translateY(16px) scale(.96); } 49.55%, 95.5% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes c2 { 0%, 49.09% { opacity: 0; transform: translateY(16px) scale(.96); } 53.18%, 95.5% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes c3 { 0%, 52.73% { opacity: 0; transform: translateY(16px) scale(.96); } 56.82%, 95.5% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes area { 0%, 63.64% { height: 0; opacity: 0; } 68.18%, 100% { height: 92px; opacity: 1; } }
@keyframes btn { 0%, 72.27% { opacity: 1; transform: none; background: #0033FF; } 73.18% { opacity: 1; transform: scale(.95); background: #072C9A; } 74.55%, 75.45% { opacity: 1; transform: none; background: #072C9A; } 76.82%, 100% { opacity: 0; transform: none; background: #072C9A; } }
@keyframes sent { 0%, 75.91% { opacity: 0; transform: translateY(8px); } 78.18%, 100% { opacity: 1; transform: none; } }
@keyframes cur { 0%, 66.36% { opacity: 0; transform: translate(260px, 110px); } 67.27% { opacity: 1; transform: translate(260px, 110px); } 72.27% { opacity: 1; transform: translate(0, 0) scale(1); } 73.18% { opacity: 1; transform: translate(0, 0) scale(.86); } 74.55% { opacity: 1; transform: translate(0, 0) scale(1); } 78.18% { opacity: 1; transform: translate(40px, 30px); } 80%, 100% { opacity: 0; transform: translate(60px, 44px); } }

/* ---------- How It Works ---------- */
.how { padding-top: 32px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 72px; }
.section-head { display: flex; flex-direction: column; gap: 20px; max-width: 800px; }
.steps { display: flex; flex-direction: column; gap: 96px; }
.step { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 72px; }
.step__text { flex: 1 1 320px; min-width: 0; max-width: 480px; display: flex; flex-direction: column; gap: 16px; }
.step__num { font-size: 56px; line-height: 1; letter-spacing: -0.02em; color: var(--blue); }
.step__text h3 { margin-top: 8px; }
.step__figure { flex: 1 1 480px; min-width: 0; margin: 0; }
.shot { width: 100%; padding: 12px 12px 4px; border-radius: var(--radius); background: var(--blue-01); }
.shot img { width: 100%; height: auto; }

/* ---------- Privacy and Security (blue band) ---------- */
.band { background: var(--blue); color: var(--pale); }
.band .container { padding-top: 112px; padding-bottom: 112px; display: flex; flex-direction: column; gap: 56px; }
.band .label, .band h2 { color: var(--cream); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tile { padding: 32px; border-radius: var(--radius); background: var(--blue-tile); display: flex; flex-direction: column; gap: 16px; }
.tile--wide { grid-column: span 2; }
.tile svg { width: 32px; height: 32px; stroke: var(--cream); }
.tile h3 { font-size: 20px; line-height: 1.3; color: var(--cream); }
.tile p { font-size: 16px; }

/* ---------- Our Team ---------- */
.team { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 40px; }
.team__text { display: flex; flex-wrap: wrap; gap: 24px 72px; }
.team__text p { flex: 1 1 400px; min-width: 0; }

/* ---------- Talk to us ---------- */
.contact { padding-bottom: 120px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 72px; }
.contact__copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding-top: 24px; }
.contact__copy .lede { max-width: 480px; }
.contact__form { flex: 1 1 440px; min-width: 0; max-width: 600px; }
.form { margin: 0; padding: 40px; border-radius: var(--radius); background: var(--cream-tile); display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; line-height: 20px; font-weight: 600; }
.field input { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--grey-04); border-radius: var(--radius-control); background: #fff; font: 16px "Manrope", sans-serif; color: var(--navy); }
.field input[aria-invalid="true"] { border: 2px solid var(--blue); }
.field__error { display: none; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--blue-dark); }
.field__error svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.field--error .field__error { display: flex; }
.form .btn { margin-top: 8px; align-self: flex-start; }
.form__status { display: none; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--blue-dark); }
.form__status[data-show="true"] { display: block; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* spam trap, hidden from people */
.thanks { display: none; padding: 40px; border-radius: var(--radius); background: var(--cream-tile); flex-direction: column; gap: 16px; }
.thanks[data-show="true"] { display: flex; }
.thanks svg { width: 40px; height: 40px; }
.thanks h3 { font-size: 28px; }

/* ---------- Footer ---------- */
.footer { background: var(--blue); color: var(--pale); }
.footer .container { padding-top: 64px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 48px; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 72px; }
.footer__about { flex: 1 1 320px; min-width: 0; max-width: 480px; display: flex; flex-direction: column; gap: 16px; }
.footer .logo { color: var(--cream); }
.footer .logo svg { height: 24px; }
.footer__line { font-size: 17px; line-height: 1.55; color: var(--cream); }
.footer__ack, .footer__copy { font-size: 15px; line-height: 1.55; }
.footer__links { display: flex; flex-direction: column; gap: 12px; }
.footer__links a { font-size: 16px; font-weight: 500; color: var(--cream); text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }

/* ---------- Text pages (privacy, 404) ---------- */
.page { padding-top: 56px; padding-bottom: 120px; }
.page--centre { padding-top: 96px; padding-bottom: 140px; display: flex; flex-direction: column; justify-content: center; }
.prose { max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.prose h1 { font-size: clamp(36px, 3.6vw, 52px); margin-bottom: 12px; }
.prose h2 { font-size: 26px; line-height: 1.25; margin-top: 24px; color: var(--navy); }
.prose ul { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.notfound { max-width: 640px; display: flex; flex-direction: column; gap: 24px; }
.notfound .lede { max-width: none; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 900px) {
  .nav__links, .btn--nav { display: none; }
  .nav__menu { display: flex; }
  .tiles { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .tile--wide { grid-column: auto; }
  .shot { margin-left: -28px; margin-right: -28px; width: auto; }   /* product images run close to the screen edge */
}
@media (min-width: 901px) { .menu { display: none !important; } }
/* The rotating word changes width, so the headline has fixed line breaks and does not re-wrap.
   The word and "to make" share a line. On a narrow phone that line is too long, so the word has its own line. */
.rot-line { white-space: nowrap; }
.rot-br-sm { display: none; }
@media (max-width: 480px) { .rot-line { white-space: normal; } .rot-br { display: none; } .rot-br-sm { display: inline; } }

/* ---------- Reduced motion, forced colours, print ---------- */
@media (prefers-reduced-motion: reduce) {
  html.smooth { scroll-behavior: auto; }
  .rot > span { animation: none; }
  .rot > span:not(:first-child) { visibility: hidden; }
  .rot--fit { animation: none; }
  .stage { --seek: -6s; }                           /* hold the recommendation beat */
  .stage .anim { animation-play-state: paused; }
}
@media (forced-colors: active) {
  .tile svg { stroke: CanvasText; }
  .nav__menu svg, .thanks svg, .field__error svg { stroke: CanvasText; }
}
@media print {
  .nav, .menu, .stage, .hero__media, .form, .thanks { display: none !important; }
  body, .band, .footer, .tile, .shot { background: #fff !important; color: #000 !important; }
  h1, h2, h3, .label, a { color: #000 !important; }
  .rot > span:not(:first-child) { display: none; }
  .rot--fit { animation: none; width: auto; }
}