/* The one stylesheet every page uses. The content security policy
   (infra/locals.tf) allows styles from this site and Google Fonts only. */

:root {
  --zenith: #0F3D6E;     /* deep sky, text and headings */
  --celeste: #2E7CC4;    /* brand blue */
  --haze: #BFDFF4;       /* horizon */
  --mist: #EEF6FC;       /* pale sky surface */
  --white: #FFFFFF;
  --ink-soft: #46627F;   /* secondary text */
  --line: #D3E4F1;

  --measure: 38rem;
  --wide: 72rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--zenith);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: flex; flex-direction: column; }
main > .wrap { width: 100%; }
img, svg { max-width: 100%; }
a { color: var(--celeste); text-underline-offset: 0.2em; }
a:hover { color: var(--zenith); }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- header, laid over the sky ---------- */
.site-head {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  padding-top: env(safe-area-inset-top, 0px);
}
.site-head .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--zenith); }
.brand svg { width: 3.4rem; height: auto; flex: none; }
/* The cog inside the logo's cloud turns while the logo is hovered or
   focused, and stops where it is when the pointer leaves. It stands
   still for anyone who asks for less motion. */
.brand .cog {
  transform-box: fill-box; transform-origin: center;
  animation: turn 4s linear infinite paused;
}
.brand:hover .cog, .brand:focus-visible .cog { animation-play-state: running; }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .brand .cog { animation: none; } }
.brand span { font-weight: 500; font-size: 1.6rem; letter-spacing: -0.015em; }
@media (max-width: 560px) { .brand svg { width: 2.8rem; } .brand span { font-size: 1.3rem; } }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; align-items: center; font-size: 0.95rem; }
.site-nav a { color: var(--zenith); text-decoration: none; font-weight: 400; }
.site-nav a:hover { color: var(--celeste); }
.site-nav a[aria-current] { color: var(--celeste); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.45em; }
@media (max-width: 560px) { .site-nav { gap: 0.5rem 1.25rem; font-size: 0.9rem; } }

/* ---------- the sky: the top of every page ---------- */
.sky {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #8EC4EA 0%, var(--haze) 45%, var(--mist) 80%, var(--white) 100%);
  padding: clamp(10rem, 22vh, 13rem) 0 clamp(6rem, 14vh, 9rem);
}
.sky.page { padding: clamp(9.5rem, 18vh, 11rem) 0 clamp(3.5rem, 7vh, 4.5rem); }
/* the content of a page follows its sky closely, under the same heading */
.sky.page + section { padding-top: clamp(1rem, 2.5vw, 1.75rem); }
.sky .cloud { position: absolute; fill: var(--white); pointer-events: none; }
/* Ten clouds drift from right to left across the whole sky, each at its
   own height, size and speed: each starts just past the right edge and
   ends just past the left one, so the jump back to the start is never on
   screen. The durations share no common factor, so the clouds never line
   up the same way twice in practice; the negative delays scatter them
   across the sky when the page opens. Nearer (bigger) clouds move faster.
   The base cloud stays put. */
.sky .d1 { width: 26rem; top: 14%; left: 100%; opacity: 0.9;  animation: drift 197s linear -61s infinite; }
.sky .d2 { width: 14rem; top: 50%; left: 100%; opacity: 0.6;  animation: drift 331s linear -197s infinite; }
.sky .d3 { width: 19rem; top: 32%; left: 100%; opacity: 0.75; animation: drift 263s linear -233s infinite; }
.sky .d4 { width: 9rem;  top: 6%;  left: 100%; opacity: 0.5;  animation: drift 419s linear -127s infinite; }
.sky .d5 { width: 12rem; top: 64%; left: 100%; opacity: 0.55; animation: drift 373s linear -311s infinite; }
.sky .d6 { width: 22rem; top: 42%; left: 100%; opacity: 0.8;  animation: drift 229s linear -17s infinite; }
.sky .d7 { width: 8rem;  top: 24%; left: 100%; opacity: 0.45; animation: drift 461s linear -207s infinite; }
.sky .d8 { width: 16rem; top: 2%;  left: 100%; opacity: 0.65; animation: drift 293s linear -190s infinite; }
.sky .d9 { width: 11rem; top: 74%; left: 100%; opacity: 0.5;  animation: drift 401s linear -59s infinite; }
.sky .d10 { width: 30rem; top: 56%; left: 100%; opacity: 0.85; animation: drift 181s linear -72s infinite; }
.sky .base { width: 40rem; bottom: -7rem; left: -8rem; }
/* On a phone the same ten would fill the screen, so four remain, smaller
   and fainter, and the base cloud shrinks with them. Their speed
   follows from the size, as on a wide screen. */
@media (max-width: 560px) {
  .sky .d2, .sky .d3, .sky .d5, .sky .d7, .sky .d8, .sky .d10 { display: none; }
  .sky .d1 { width: 13rem; opacity: 0.7; }
  .sky .d4 { width: 6rem;  top: 44%; opacity: 0.45; }
  .sky .d6 { width: 10rem; top: 66%; opacity: 0.6; }
  .sky .d9 { width: 7rem;  top: 30%; opacity: 0.45; }
  .sky .base { width: 24rem; bottom: -5rem; left: -6rem; }
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 100%)); } }
/* Without motion, each cloud stays where its delay put it. */
@media (prefers-reduced-motion: reduce) { .sky .cloud { animation-play-state: paused; } }

.hero { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  max-width: 14ch;
  letter-spacing: -0.03em;
}
.sky.page .hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); max-width: 18ch; }
.hero p {
  margin-top: 1.5rem; max-width: var(--measure);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft);
}
.hero .actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.btn {
  display: inline-block; background: var(--zenith); color: var(--white);
  padding: 0.85rem 1.6rem; border-radius: 999px; text-decoration: none; font-weight: 500;
}
.btn:hover { background: var(--celeste); color: var(--white); }
.btn.outline { background: transparent; color: var(--zenith); border: 1.5px solid var(--zenith); padding: calc(0.85rem - 1.5px) calc(1.6rem - 1.5px); }
.btn.outline:hover { background: var(--zenith); color: var(--white); }
.quiet { font-weight: 400; color: var(--zenith); }
/* a heading with a label beside it, wrapping under it on a narrow screen */
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.badge {
  display: inline-block;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--celeste); background: var(--white); border: 1.5px solid var(--celeste);
  border-radius: 999px; padding: 0.25rem 0.85rem;
}
.mail { display: inline-block; margin-top: 2rem; font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 500; color: var(--zenith); overflow-wrap: anywhere; }
.mail:hover { color: var(--celeste); }

/* ---------- sections ---------- */
section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
section.tint { background: var(--mist); }
.lead { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: var(--measure); }
.lead h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.lead p { color: var(--ink-soft); }

/* services: three columns divided by altitude lines, not cards */
.services { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.service { padding: 2rem 2rem 0 0; }
.service + .service { padding-left: 2rem; border-left: 1px solid var(--line); }
.service h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.service p { color: var(--ink-soft); font-size: 1rem; }
.service ul { margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.95rem; }
.service li { padding: 0.35rem 0; border-top: 1px dashed var(--line); }
@media (max-width: 860px) {
  .services { grid-template-columns: 1fr; }
  .service, .service + .service { padding: 2rem 0; border-left: 0; }
  .service + .service { border-top: 1px solid var(--line); }
}

/* approach: a real sequence, so numbered */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: step; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1.5px solid var(--celeste); color: var(--celeste); font-weight: 500; margin-bottom: 1rem;
}
.steps h2 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.steps p { color: var(--ink-soft); font-size: 0.97rem; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* short feature list: the product */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.features li { border-top: 1.5px solid var(--celeste); padding-top: 1rem; }
.features h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.features p { color: var(--ink-soft); font-size: 0.97rem; }
@media (max-width: 960px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* about */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.about-grid h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.about-grid .body { display: grid; gap: 1.1rem; max-width: var(--measure); color: var(--ink-soft); }
.about-grid .body strong { color: var(--zenith); font-weight: 500; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* a closing line that sends people to the contact page: on a page shorter
   than the window it sits on the footer, the free space above it */
.next { margin-top: auto; }
.next p { max-width: var(--measure); color: var(--ink-soft); }
.next .btn { margin-top: 1.25rem; }

/* ---------- long text: the privacy policy ---------- */
.policy { max-width: 42rem; padding: clamp(1rem, 3vw, 2rem) 0 clamp(4rem, 8vw, 6rem); }
.policy h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 3rem 0 1rem; }
.policy h2:first-child { margin-top: 0; }
.policy h3 { font-size: 1.1rem; margin: 1.75rem 0 0.5rem; }
.policy p, .policy li { color: var(--ink-soft); }
.policy p + p { margin-top: 0.9rem; }
.policy ul { margin: 0.75rem 0 0; padding-left: 1.25rem; }
.policy li { margin: 0.35rem 0; }
.policy strong { color: var(--zenith); font-weight: 500; }
.policy address { font-style: normal; color: var(--ink-soft); }
.policy a { overflow-wrap: anywhere; }

/* ---------- footer ---------- */
footer { background: var(--zenith); color: var(--haze); font-size: 0.875rem; padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom, 0px)); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; }
footer a { color: var(--white); }
footer dl { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; }
footer dt { display: inline; opacity: 0.7; }
footer dd { display: inline; margin: 0 0 0 0.35rem; color: var(--white); }