/*
 * raag.consulting — all styles.
 *
 * Colours, the fluid type scale and the spacing scale are carried over from the
 * WordPress theme this site replaces, so the design matches the old one.
 */

/* Figtree, self-hosted, declared exactly as the original site declared it.
   Two things here are deliberate:
   - format("truetype"), not "truetype-variations" — Safari doesn't recognise the
     latter and silently discards the whole @font-face, falling back to a system sans.
   - only the 400 and 600 instances, as the original had. Headings still ask for
     700, exactly as the original did, so a browser resolves the pair the same way
     here as it did on the old site. */
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/Figtree-VariableFont_wght.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/Figtree-VariableFont_wght.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #1f7cec;
  --primary-hover: #3993ff;
  --mono-1: #0d3c74;   /* headings, nav, hero */
  --mono-2: #64748b;   /* body copy */
  --mono-3: #e2e8f0;   /* team + contact bands */
  --mono-4: #f8fafc;   /* intro band, cards */
  --featured: #0a284b; /* footer */
  --base: #ffffff;
  --ink: #000000;
  --nav-pill: #f1f5f9;

  --fs-hero:  clamp(33.419px, 2.089rem + ((1vw - 3.2px) * 3.021), 60px);
  --fs-h2:    clamp(27.894px, 1.743rem + ((1vw - 3.2px) * 2.285), 48px);
  --fs-h3:    clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 1.586), 36px);
  --fs-lead:  clamp(16.834px, 1.052rem + ((1vw - 3.2px) * 1.042), 26px);
  --fs-body:  clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.682), 20px);
  /* The theme's two small sizes, which are NOT the same: superbfont-small grows
     to 18px, superbfont-xsmall is a flat 16px. */
  --fs-small:  clamp(16px, 1rem + ((1vw - 3.2px) * 0.227), 18px);
  --fs-xsmall: 16px;

  --sp-xxs: clamp(5px, 1vw, 10px);
  --sp-xs:  clamp(10px, 2vw, 20px);
  --sp-sm:  clamp(20px, 4vw, 40px);
  --sp-md:  clamp(30px, 6vw, 60px);
  --sp-lg:  clamp(40px, 8vw, 80px);

  --max: 1200px;
  --max-narrow: 800px;

  /* The theme's block gap — the default space between stacked blocks. */
  --gap: 1.5rem;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-body);
  /* A percentage, not a number, exactly as the original declared it: descendants
     inherit the *computed* 30px rather than recomputing 1.5 against their own
     font-size. That's what gives the buttons and nav links their roomy height. */
  line-height: 150%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The root page hides itself only while swapping to a non-English language.
   main.js always clears .i18n-pending, including when translations fail. */
:root.i18n-pending body { opacity: 0; }
body { transition: opacity 0.2s ease; }

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* The theme sets every heading to 600 and line-height 1.4, then tightens h1/h2
   to 1.2. Asking for 700 here would be wrong twice over: the copy is lighter
   than that, and the only Figtree faces declared are 400 and 600. */
h1, h2, h3 {
  color: var(--mono-1);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}
h1, h2 { line-height: 1.2; }

p { margin: 0; line-height: 1.4; }

/* Content is exactly --max wide once the viewport can fit it, and inset by --sp-sm
   below that. The original site had zero root padding, so padding here instead of
   width would make every band --sp-sm narrower than the old design. */
.shell {
  width: min(var(--max), 100% - 2 * var(--sp-sm));
  margin-inline: auto;
}
.shell.narrow { max-width: var(--max-narrow); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--mono-1);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

/* ---------------------------------------------------------------- buttons */

/* The theme's buttons sit on the *body's* line box, not their own font size —
   that extra leading is most of what makes them as tall as the original's. The
   wrapping <p> would otherwise hand down its 1.4, so restate it here. */
.btn {
  display: inline-block;
  border-radius: 100px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: calc(var(--fs-body) * 1.5);
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }

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

/* Both outline buttons on the page carry the theme's chunky 5px mono-1 border. */
.btn-outline {
  background: transparent;
  color: var(--mono-1);
  border: 5px solid var(--mono-1);
  padding: 0.667em 1.333em;
}
.btn-outline:hover { background: var(--mono-4); }

.btn-ghost {
  background: transparent;
  color: var(--mono-1);
  border: 1px solid var(--mono-2);
  line-height: 1.4;
}
.btn-ghost:hover { border-color: var(--mono-1); background: #fff; }

.btn-sm { font-size: 15px; padding: 0.55em 1.15em; line-height: 1.4; }
.btn-lg { font-size: clamp(17px, 1.6vw, 20px); padding: 0.8em 1.8em; }

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

.site-header { padding-block: 15px; }

/* The pill has no vertical padding of its own — its height comes from the logo
   side, which pads by --sp-xs twice (once on the column, once on the image).
   That's 131px at desktop, the same as the original. */
.nav-pill {
  background: var(--nav-pill);
  border-radius: 40px;
  padding-inline: 25px;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

/* A quarter of the bar, with the logo centred in it, as in the original. */
.brand {
  flex: 0 1 25%;
  display: flex;
  justify-content: center;
  padding-block: var(--sp-xs);
}
.brand img {
  width: 169px;
  height: auto;
  display: block;
  margin-block: var(--sp-xs);
}

.nav-panel {
  flex: 0 1 75%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.5vw, 36px);
  padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) 0;
}

/* The menu takes the space between the logo and the language switch and centres
   itself in it, so the switch stays pinned right. */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--mono-1);
  font-weight: 700;
  font-size: var(--fs-xsmall);
  white-space: nowrap;
}

/* Flag plus code — EN / ET / ES. The full language name lives in the link's
   aria-label so screen readers still announce something meaningful. */
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--mono-2);
  padding: 5px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.lang-switch a:hover { text-decoration: none; color: var(--mono-1); }
.lang-switch a[aria-current="true"] {
  background: #fff;
  color: var(--mono-1);
}
.lang-switch img {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  display: block;
}

.nav-toggle,
.nav-close {
  display: none;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--mono-1);
}
.nav-toggle svg,
.nav-close svg { display: block; fill: currentColor; }

@media (max-width: 960px) {
  .nav-toggle { display: block; margin-left: auto; }

  .brand { flex: 0 0 auto; justify-content: flex-start; }

  .nav-panel {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--base);
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-sm);
    margin-left: 0;
    padding: var(--sp-sm);
    /* Kept in the DOM but inert until opened, so nothing inside is tabbable.
       visibility flips instantly on open and only after the fade on close, so
       the panel is never visible-but-unclickable. */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  body.nav-open .nav-panel {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }
  body.nav-open { overflow: hidden; }

  .nav-close {
    display: block;
    position: absolute;
    top: 22px;
    right: max(var(--sp-sm), 25px);
  }

  .site-nav ul {
    flex-direction: column;
    gap: var(--sp-xs);
  }
  .site-nav a { font-size: clamp(20px, 5vw, 26px); }

  /* The overlay is white, so the active pill needs the opposite fill. */
  .lang-switch a[aria-current="true"] { background: var(--nav-pill); }
}

/* ------------------------------------------------------------------- hero */

/* The block gap below the header is real white space in the original — the
   patterned band starts 24px under the pill, not flush against it. */
.hero {
  position: relative;
  margin-top: var(--gap);
  padding-inline: 20px;
  background: url("assets/img/hero-bg.svg") center / cover no-repeat;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: -1;
}

.hero-inner {
  text-align: center;
  padding-block: var(--sp-md);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 { font-size: var(--fs-hero); }

.hero-sub {
  font-size: var(--fs-lead);
  color: var(--ink);
  margin-top: var(--sp-xs);
}

.hero-cta { margin-top: var(--sp-lg); }

/* The width is fixed by JS to the widest word so the headline never reflows. */
.rotating-word {
  transition:
    opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  vertical-align: baseline;
  will-change: opacity, transform;
}
.rotating-word.is-fading { opacity: 0; transform: scale(0.98); }

/* ------------------------------------------------------------------ bands */

.band { padding-block: var(--sp-lg); }
.band-soft { background: var(--mono-4); }
.band-tint { background: var(--mono-3); }

.section-title {
  font-size: var(--fs-h2);
  text-align: center;
  padding-bottom: var(--sp-xxs);
}
.section-sub {
  text-align: center;
  color: var(--mono-2);
  max-width: 60ch;
  margin: 0 auto var(--sp-sm);
}

.intro { text-align: center; }
/* Full content width, inset like the original's group padding — 1120px of text
   at desktop, not the 800px reading measure I had here first. */
.intro .shell { padding-inline: var(--sp-sm); }
.intro h2 {
  font-size: var(--fs-h2);
  line-height: 1;
  margin-bottom: calc(var(--sp-xs) + var(--gap));
}
.intro p {
  color: var(--mono-2);
  text-align: left;
  font-size: var(--fs-small);
}
/* The original is one paragraph with blank lines between, so the gap is exactly
   one line — not a smaller typographic margin. */
.intro p + p { margin-top: 1.4em; }
.intro .intro-cta {
  text-align: center;
  margin-top: calc(var(--sp-xs) + var(--gap));
}
.intro .intro-cta .btn { padding: var(--sp-xxs); }

/* ------------------------------------------------------------------ cards */

.card-grid {
  display: grid;
  gap: var(--gap);
  margin-top: 2em;
}
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* Children stretch rather than shrink-wrap, so a long heading breaks at the
   card's width the way the original's does. */
.card {
  background: var(--mono-4);
  padding: var(--sp-sm);
  border-radius: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.band-soft .card { background: var(--base); }

.card-icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-inline: auto;
  margin-bottom: var(--gap);
}

.card h3 { font-size: var(--fs-body); }
.card p {
  color: var(--mono-2);
  font-size: var(--fs-xsmall);
  margin-top: var(--sp-xxs);
}

.app-icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 6px 28px rgba(13, 60, 116, 0.18);
  margin-inline: auto;
  margin-bottom: var(--sp-xxs);
}
.app-card h3 { font-size: var(--fs-h3); }
/* Scoped to .card so it outranks `.card p`, whose margin-top would otherwise
   beat the `auto` that pins the buttons to the bottom of every card. */
.card .app-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding-top: var(--sp-xs);
}

@media (max-width: 820px) {
  .card-grid.cols-3,
  .card-grid.cols-2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- clients */

/* Five equal columns with each logo centred in its own, as in the original —
   not a centred row, which bunches them together. */
.client-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--sp-sm);
  padding-block: var(--sp-xs);
}
.client-logos img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}
/* ADM and Spinbooth are set smaller in the original. */
.client-logos a:nth-child(2) img,
.client-logos a:nth-child(4) img { width: 120px; height: 120px; }
.client-logos a { display: block; }
.client-logos a:hover { text-decoration: none; opacity: 0.75; }

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--sp-sm);
  row-gap: var(--sp-md);
  padding: var(--sp-lg) var(--sp-xs);
  margin-top: var(--sp-xs);
}
.testimonials figure { margin: 0; }
.testimonials blockquote { margin: 0; }
.testimonials p {
  color: var(--mono-2);
  font-size: var(--fs-xsmall);
  margin-top: var(--sp-xxs);
}
.testimonials figcaption {
  color: var(--mono-1);
  font-weight: 600;
  line-height: 1.4;
  font-size: clamp(18px, 1.125rem + ((1vw - 3.2px) * 0.227), 20px);
}

@media (max-width: 820px) {
  .testimonials { grid-template-columns: 1fr; }
  .client-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .client-logos { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------- team */

.team-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team-card img {
  width: 270px;
  height: 270px;
  border-radius: 74px;
  object-fit: cover;
  margin-bottom: var(--sp-xs);
}
.team-card h3 {
  font-size: clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 1.147), 28px);
}
.team-card p { color: var(--ink); }

/* ---------------------------------------------------------------- contact */

/* Team and contact share the same tint and read as one block, so they use the
   original's tighter padding instead of the full band rhythm — otherwise the two
   sections' padding stacks into a large empty gap between them. */
#team { padding-block: var(--sp-sm); }

.contact {
  text-align: center;
  padding-block: var(--sp-xs) var(--sp-sm);
}
.contact h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-xxs);
}
.contact p { margin-bottom: var(--sp-xs); }
.contact p:last-child { margin-bottom: 0; }

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

.site-footer {
  background: var(--featured);
  color: #fff;
  padding-block: var(--sp-md) var(--sp-sm);
}
.site-footer a { color: #fff; }

.footer-top {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.footer-info { flex: 1 1 70%; }
.footer-stamp { flex: 0 1 30%; }
/* stamp.svg is A4-shaped; the design shows it in a square box, letterboxed. */
.footer-stamp img {
  display: block;
  width: 370px;
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
}

/* The original letterboxes the footer logo in a 16:9 box, which is where the
   air between it and the company name comes from. */
.footer-logo {
  display: block;          /* no inline baseline gap under it */
  width: 187px;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--sp-xxs);
}
.footer-company {
  font-size: clamp(14.642px, 0.915rem + ((1vw - 3.2px) * 0.836), 22px);
  font-weight: 600;
}
.footer-email { margin-top: 1.4em; }
/* line-height:0 so the icon's line box is exactly the icon, no baseline gap. */
.footer-social { margin-top: var(--gap); line-height: 0; }
.footer-social a { display: inline-block; color: var(--mono-2); }
.footer-social a:hover { color: #fff; }
.footer-social svg { display: block; fill: currentColor; }

.footer-copy {
  text-align: center;
  font-size: var(--fs-xsmall);
  padding-block: var(--sp-md) var(--sp-xs);
}

@media (max-width: 820px) {
  .footer-top { flex-direction: column; text-align: center; }
  .footer-stamp img { width: 260px; }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}