/* ---------------------------------------------------------------------------
   Theme tokens for Bluerendr.

     pages        white, with a cool off-white for tinted panels
     ink          near-black, used for the dark panels and all text
     accent       Best Buy blue #0046BE, with a deeper blue for hover and a
                  pale tint for pills and highlights
     headings     Sora 500/600, tight tracking
     body         Inter 400, 150% leading

   Swap values here and the whole site follows; nothing below hard-codes a
   colour. Text on the accent is always --on-accent, never --ink, because the
   accent is dark enough to need white type.
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* --- palette --- */
  --bg-01: #ffffff;
  --bg-02: #f4f6fa;
  --bg-03: #e9edf4;
  --accent: #0046be;
  --accent-deep: #00308f;
  --accent-soft: #e4ecfb;
  /* the same hue lifted for type on the black panels; the brand blue itself
     is 2.4:1 against black, which is not readable as text */
  --accent-bright: #5b9bff;
  --on-accent: #ffffff;
  /* Star gold for review stars; blue stars read as links. */
  --star: #e8a33d;

  --ink: #0b0b0c;
  --ink-soft: #1f2328;
  --muted: #5b6472;

  /* The dark panels: black, with a faint blue wash in one corner so a big
     flat area does not look like a missing image. */
  --panel: #0b0b0c;
  --panel-cool: #0e1a33;
  --panel-warm: #15161a;
  --n-01: #fafbfc;
  --n-02: #f3f4f6;
  --n-03: #ebedf0;
  --n-04: #e1e4e9;
  --n-05: #d2d6dd;
  --n-06: #bfc5ce;
  --n-08: #9aa3af;
  --white: #fff;

  --white-10: #ffffff1a;
  --white-20: #fff3;
  --white-40: #fff6;
  --white-60: #fff9;
  --white-80: #fffc;

  --overlay-01: #00000014;
  --overlay-02: #0000004d;
  --overlay-03: #000000a6;

  /* on light surfaces */
  --fg: var(--ink);
  --fg-muted: var(--muted);

  /* Card accents. The names are stored in config, so they stay; the values
     are blue-leaning tints that sit on white without shouting. */
  --a-clay: #dbe6fb;
  --a-sage: #dcefe6;
  --a-butter: #fdf0cf;
  --a-stone: #e7eaef;
  --a-sky: #c9dcff;
  --a-blush: #f1e2ea;

  --ok: #1e7f4f;
  --ok-bright: #3ddc84;   /* the same green, for the dark chat header */
  --bad: #b3261e;

  /* --- sizes --- */
  --s-4xs: 0.25rem;
  --s-3xs: 0.5rem;
  --s-2xs: 0.75rem;
  --s-xs: 1rem;
  --s-s: 1.25rem;
  --s-m: 1.5rem;
  --s-l: 2rem;
  --s-xl: 2.5rem;
  --s-2xl: 3rem;
  --s-3xl: 4rem;
  --s-4xl: 5rem;
  --s-5xl: 6rem;

  --container: 1240px;
  --container-pad: 5rem;

  /* --- type --- */
  --font-heading: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --h1: 3.75rem;
  --h2: 2.5rem;
  --h3: 2.125rem;
  --h4: 1.75rem;
  --h5: 1.375rem;
  --h6: 1.125rem;
  --body-l: 1.125rem;
  --body: 1rem;
  --body-s: 0.875rem;

  --lh-s: 108%;
  --lh-m: 125%;
  --lh-l: 150%;

  /* --- motion and depth --- */
  --t-fast: 0.2s ease;
  --t: 0.4s ease;
  --t-slow: 0.55s ease;
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --reveal: 0.9s;

  --shadow-card: 0 14px 34px #0b1a3a1f;
  --shadow-card-soft: 0 8px 24px #0b1a3a14;
  --shadow-nav: 0 1px 0 #0b0b0c14;
  --shadow-panel: 0 20px 40px #00000040;
  --shadow-tilt: 0 10px 30px #0b1a3a1a;
}

@media (max-width: 991px) {
  :root {
    --container-pad: 3rem;
    --h1: 3rem;
    --h2: 2.125rem;
    --h3: 1.75rem;
    --h4: 1.5rem;
    --h5: 1.25rem;
    --h6: 1.0625rem;
    --body-l: 1.0625rem;
  }
}

@media (max-width: 767px) {
  :root {
    --container-pad: 1.25rem;
    --h1: 2.25rem;
    --h2: 1.75rem;
    --h3: 1.5rem;
    --h4: 1.375rem;
    --h5: 1.1875rem;
    --h6: 1.0625rem;
  }
}

/* --- base ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--bg-01);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--lh-l);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: var(--lh-s);
}

.display-h1 { font-size: var(--h1); }
.display-h2 { font-size: var(--h2); }
.display-h3 { font-size: var(--h3); letter-spacing: -0.03em; }
.display-h4 { font-size: var(--h4); letter-spacing: -0.03em; line-height: var(--lh-m); }
.display-h5 { font-size: var(--h5); letter-spacing: -0.025em; line-height: var(--lh-m); }
.display-h6 { font-size: var(--h6); letter-spacing: -0.02em; line-height: var(--lh-m); }

p { margin: 0; }

/* figure and blockquote carry a 40px UA margin that quietly shrinks every
   grid cell they sit in */
figure,
blockquote {
  margin: 0;
}

.paragraph { font-size: var(--body); line-height: var(--lh-l); }
.large-paragraph { font-size: var(--body-l); line-height: var(--lh-l); }
.small-paragraph { font-size: var(--body-s); line-height: var(--lh-l); }
.t-muted { color: var(--fg-muted); }

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

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

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

/* --- layout ---------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-xl);
}

.container.centered { align-items: center; }

.section {
  width: 100%;
  padding-block: var(--s-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: clip;
}

@media (max-width: 991px) {
  .section { padding-block: var(--s-s); }
}

/* A black panel, inset from the page edge, with a faint blue wash so a large
   flat area does not read as a missing image. */
.section.inverse {
  background:
    radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--panel-cool) 90%, transparent) 0%, transparent 60%),
    radial-gradient(50% 60% at 10% 90%, color-mix(in srgb, var(--panel-warm) 80%, transparent) 0%, transparent 60%),
    var(--panel);
  border: 0;
  border-radius: var(--s-l);
  width: calc(100% - 2 * var(--s-m));
  margin-inline: var(--s-m);
  padding-block: var(--s-3xl);
  --fg: var(--white);
  --fg-muted: var(--white-80);
  color: var(--white);
}

@media (max-width: 991px) {
  .section.inverse {
    width: calc(100% - 2 * var(--s-2xs));
    margin-inline: var(--s-2xs);
    border-radius: var(--s-m);
    padding-block: var(--s-2xl);
  }
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-s);
  max-width: 600px;
  text-align: center;
}

/* Centred headers keep the 600px measure. A left-aligned one sits above a full
   width grid, so it runs the same width as the cards under it and ends on the
   same right edge rather than stopping short. */
.section-header.left {
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  text-align: left;
}

/* a tag pill hugs its text instead of stretching to the column */
.section-header .tag { align-self: center; }
.section-header.left .tag { align-self: flex-start; }

/* Any element that sets `display` in a class outranks the UA stylesheet's
   [hidden] rule, so hiding it via the attribute silently does nothing. */
[hidden] {
  display: none !important;
}

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

/* --- tags and buttons ------------------------------------------------------ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3xs);
  padding: 0.3rem 0.75rem;
  border-radius: var(--s-xl);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: var(--lh-m);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section.inverse .tag {
  background: var(--white-10);
  color: var(--white);
}

.tag.number {
  background: var(--accent);
  color: var(--on-accent);
  font-variant-numeric: tabular-nums;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2xs);
  height: 48px;
  padding: var(--s-3xs) var(--s-3xs) var(--s-3xs) var(--s-s);
  border: 1px solid var(--accent);
  border-radius: var(--s-xl);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--body);
  font-weight: 600;
  line-height: var(--lh-m);
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}

.button:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px #0046be33;
}

/* the black alternative */
.button--accent {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.button--accent:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  box-shadow: 0 10px 24px #0000002e;
}

.button--outline {
  background: transparent;
  color: var(--fg);
  border-color: var(--n-05);
  padding-inline: var(--s-s);
}

.button--outline:hover {
  background: var(--bg-02);
  border-color: var(--ink);
  box-shadow: none;
}

.section.inverse .button--outline { border-color: var(--white-40); }
.section.inverse .button--outline:hover { background: var(--white-10); border-color: var(--white); }

.button__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--s-xl);
  background: var(--white);
  color: var(--accent);
  overflow: clip;
}

.button--accent .button__icon {
  background: var(--white);
  color: var(--ink);
}

.button--outline .button__icon {
  background: var(--accent);
  color: var(--on-accent);
}

.button__icon svg { transition: transform var(--t); }
.button:hover .button__icon svg { transform: translateX(2px); }

/* --- reveal-on-scroll ------------------------------------------------------ */
/* Sections arrive rather than just appear: travel, a touch of scale and a blur
   that resolves.
   This is an ANIMATION, not a transition, on purpose. A transition here is
   fragile: any element that declares its own `transition` for hover, as
   .case-study does for its shadow, replaces this one wholesale and the reveal
   silently stops working. An animation cannot be clobbered that way. */
@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(44px) scale(0.97);
    filter: blur(4px);
  }
  /* Clear the blur well before the move finishes. Each property interpolates
     independently, so the travel and fade carry on to 100% while the blur is
     already gone. Letting it run the full duration, which is what happened
     when this became an animation, leaves the page looking soft for too long,
     and it is worst on first paint above the fold. */
  40% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes reveal-in-plain {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

[data-reveal] { opacity: 0; }

[data-reveal].is-in {
  animation: reveal-in var(--reveal) var(--ease-out-quart) var(--reveal-delay, 0ms) both;
}

/* for the banner photo, where blurring a full width bitmap costs more than it adds */
[data-reveal-plain].is-in {
  animation-name: reveal-in-plain;
}

/* Only hint the compositor while an element is still waiting. Leaving
   will-change on fifty elements for the life of the page is how you get a
   sluggish scroll on a phone. */
[data-reveal]:not(.is-in) { will-change: opacity, transform, filter; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* the blur has to be cleared here too, or the page just stays fuzzy */
  [data-reveal] { opacity: 1; transform: none; filter: none; }
}