/* QEBA Limited: base theme (light page, pastel cards, serif headings, dark pill buttons). Loaded first on every page; page CSS overrides it.
   COLOURS: every colour on the site comes from the variables in :root below.
   To restyle, change the values there (do not put hex or rgb colours in other CSS).
   Transparent versions are made with color-mix(in srgb, var(--name) 40%, transparent). */

:root {
  /* Colour: light grey page, white and pastel cards, black cards, blue "selection" accent (palette from sketch.com) */
  --bg: #f5f5f5;
  --bg-alt: #f5f5f5;
  --bg-dark: #212123;      /* dark pills and buttons */
  --surface: #ffffff;      /* white cards */
  --ink: #0b0b0d;          /* black cards */
  --navy: #1b2a52;
  --text: #212123;
  --text-muted: #5c5c63;
  --text-on-dark: #ffffff;
  --accent: #4a5cff;
  --accent-strong: #3a49e6;
  --accent-glow: #7b88ff;
  --border: #e6e6ea;
  --white: #ffffff;
  --accent-soft: #a5acff;
  --lavender: #dedcfb;     /* pastel card and tag colours */
  --rose: #f6d8e2;
  --blush: #f3e3e0;
  --peach: #f7dcd2;
  --mint: #b6ebdd;
  --sky: #d6e6fb;
  --periwinkle: #c2bbf4;   /* hero gradient: strong lavender on the right, orchid-pink at lower left */
  --orchid: #f0c2ec;
  --blue-wash: #b5d6f4;    /* page hero tints (each inner page picks two of these) */
  --mint-wash: #c6efdf;
  --amber-wash: #f8cfae;
  --pink-wash: #f6bfd3;
  --rose-wash: #f3b9d2;
  --violet-wash: #d3c4f6;
  --hero-a: var(--periwinkle);  /* current page hero gradient: pages override these two */
  --hero-b: var(--orchid);
  --ring-violet: #8f7ae8;   /* hero button outline colours (stronger versions of the hero washes) */
  --ring-orchid: #e88adf;
  --ring-blue: #5aa8e8;
  --ring-mint: #3fc79b;
  --ring-gold: #e9b647;
  --ring-coral: #ea8f78;
  --ring-pink: #ea6fa4;
  --ring-a: var(--ring-violet);  /* current page button outline: pages override these two */
  --ring-b: var(--ring-orchid);
  --rainbow-1: #f48c2b;    /* gradient strip on the contact card */
  --rainbow-2: #dc5f9b;
  --rainbow-3: #b34ad3;
  --rainbow-4: #744bd0;
  --rainbow-5: #6f8bfd;
  --rainbow-6: #32adf7;

  /* Type */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.7rem, 1.4rem + 1.5vw, 2.5rem);
  --step-3: clamp(2.4rem, 1.6rem + 3.8vw, 4.4rem);

  /* Space */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(3rem, 2rem + 5vw, 6rem);
  --dark-top: color-mix(in srgb, var(--ink) 90%, var(--white));    /* dark cards: black lifted 10% towards white at the top, a touch darker (4%) at the bottom */
  --dark-bottom: color-mix(in srgb, var(--ink) 96%, var(--white));
  --gutter: clamp(1.25rem, 0.75rem + 1.8vw, 2rem);  /* gap between cards, steps and gallery tiles, same everywhere */

  --content-width: 72rem;
  --radius: 1.5rem;
  --header-h: 4.5rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2 { font-family: var(--font-display); line-height: 1.02; letter-spacing: -0.025em; font-weight: 500; margin: 0 0 var(--space-2); }
h3, h4 { line-height: 1.15; letter-spacing: -0.01em; font-weight: 600; margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-2); }

a { color: var(--accent-strong); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Layout: section = full-width band, .content = constrained wrapper */
.section { padding: var(--space-5) var(--space-3); }
.content {
  max-width: var(--content-width);
  margin-inline: auto;
  container-type: inline-size;
  container-name: content;
}

/* Header and nav: transparent over the hero glow */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: calc(var(--header-h) * -1); /* hero slides up underneath */
  /* Whiter frosted glass so the bar stays readable over anything scrolling beneath it */
  background: color-mix(in srgb, var(--white) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid color-mix(in srgb, var(--white) 70%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--text) 25%, transparent);
  color: var(--text);
  padding: var(--space-2) var(--space-3);
}
/* At the very top of the page the bar is clear over the hero, then frosts over as you scroll (CSS only, no JavaScript).
   Browsers without scroll-linked animations just show the frosted bar all the time. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header {
      animation: header-frost linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 140px;
    }
    @keyframes header-frost {
      from {
        background-color: transparent;
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
        border-bottom-color: transparent;
        box-shadow: none;
      }
    }
  }
}
.site-header .content {
  min-height: calc(var(--header-h) - 2 * var(--space-2));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.site-logo { display: block; line-height: 0; }
.site-logo img { display: block; width: auto; height: 1.75rem; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-3); row-gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--text); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.page-ai-tools .site-nav a[href="ai-tools.html"],
.page-business-applications .site-nav a[href="business-applications.html"],
.page-digital-signage .site-nav a[href="digital-signage.html"],
.page-web-design .site-nav a[href="web-design.html"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* Footer */
.site-footer {
  background: var(--bg);
  color: var(--text-muted);
  padding: var(--space-4) var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  text-align: center;
}
.site-footer a { color: inherit; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem var(--space-3); list-style: none; margin: 0 0 var(--space-2); padding: 0; }

/* Buttons: dark pills, outline variant */
.button {
  display: inline-block;
  padding: 0.8em 1.6em;
  border-radius: 999px;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.button:hover { background: var(--accent-strong); transform: translateY(-2px); }
.button-outline { background: transparent; border: 1.5px solid var(--bg-dark); color: var(--text); }
.button-outline:hover { background: var(--bg-dark); color: var(--text-on-dark); }


/* ---------- Shared components (used by every page) ---------- */

/* Tags: small pastel pills above headings */
.tag {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--peach);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag-peach { background: var(--peach); }
.tag-mint { background: var(--mint); }
.tag-lavender { background: var(--lavender); }

/* Section header: tag, big serif title and intro on the left, button on the right */
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-head .button { justify-self: start; }
.section-title { font-size: var(--step-3); max-width: 14ch; }
.section-intro { font-size: var(--step-0); color: var(--text); max-width: 46ch; margin: 0; }
.section-head-sub { margin-top: var(--space-5); }
.subhead { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); max-width: 20ch; margin: 0 0 var(--space-2); letter-spacing: -0.02em; }
.eyebrow { color: var(--accent-strong); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: var(--space-1); }

/* Hero: pale wash (two colours set per page by --hero-a and --hero-b), headline left, lead and buttons right */
.section-hero {
  background:
    linear-gradient(transparent 85%, var(--bg)),
    radial-gradient(90rem 62rem at 105% 30%, var(--hero-a), transparent 75%),
    radial-gradient(70rem 52rem at -10% 80%, var(--hero-b), transparent 75%),
    radial-gradient(70rem 40rem at 60% 62%, color-mix(in srgb, var(--lavender) 90%, transparent), transparent 72%),
    radial-gradient(50rem 24rem at 15% 0%, color-mix(in srgb, var(--lavender) 55%, transparent), transparent 70%),
    var(--bg);
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: var(--space-5);
  overflow: hidden;
}
.hero-grid { display: grid; gap: var(--space-3); }
.section-hero h1 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.6rem); max-width: 16ch; letter-spacing: -0.03em; margin: 0; }
.section-hero h1 em { font-style: normal; background: linear-gradient(transparent 64%, color-mix(in srgb, var(--mint) 90%, transparent) 64%, color-mix(in srgb, var(--mint) 90%, transparent) 92%, transparent 92%); }
.hero-lead { font-size: var(--step-1); max-width: 30ch; margin: 0 0 var(--space-3); line-height: 1.4; }
.hero-lead strong { font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Hero buttons: glossy dark button with a coloured ring (--ring-a to --ring-b, follows the page colours) and a soft frosted partner */
.hero-actions .button {
  padding: 0.95em 1.9em;
  border: 5px solid transparent;
  border-radius: 1.15rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 80%, var(--white)), var(--ink)) padding-box,
    linear-gradient(135deg, var(--ring-a), var(--ring-b)) border-box;
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--white) 35%, transparent), inset 0 -3px 8px color-mix(in srgb, var(--white) 10%, transparent), 0 0.4rem 1rem -0.4rem color-mix(in srgb, var(--ring-b) 70%, transparent);
  color: var(--text-on-dark);
}
.hero-actions .button:hover { background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 70%, var(--white)), color-mix(in srgb, var(--ink) 92%, var(--white))) padding-box,
    linear-gradient(135deg, var(--ring-a), var(--ring-b)) border-box; }
.hero-actions .button-outline {
  border: 1.5px solid color-mix(in srgb, var(--ring-b) 35%, transparent);
  background: color-mix(in srgb, var(--white) 55%, transparent);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--white) 80%, transparent);
  color: var(--ink);
  margin-block: 5px;
}
.hero-actions .button-outline:hover { background: color-mix(in srgb, var(--white) 85%, transparent); color: var(--ink); }

/* Page tint: one pastel colour from this page's hero, fading from a little see-through at the top to a little stronger at the bottom; used on every card so each page has one colour family */
body { --tint-top: color-mix(in srgb, var(--hero-a) 26%, transparent); --tint-bottom: color-mix(in srgb, var(--hero-a) 46%, var(--white)); }

/* Cards: rounded, text at the top, picture bleeding off the bottom edge */
.cards { display: grid; gap: var(--gutter); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.card {
  --pad: var(--space-4);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--pad);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom));
}
.card h3 { font-size: var(--step-1); max-width: 18ch; }
.card p { margin: 0 0 var(--space-3); max-width: 40ch; }
.card-more { display: inline-block; align-self: flex-start; margin: 0 0 var(--space-3); font-weight: 600; color: inherit; text-underline-offset: 0.25em; }
.card-image { width: calc(100% + 2 * var(--pad)); max-width: none; height: auto; margin: auto calc(var(--pad) * -1) calc(var(--pad) * -1); border-radius: 1.25rem 1.25rem 0 0; }
/* .card-pastel, .card-rose and .card-white are all just the page tint (set on .card); only .card-dark stands out */
.card-dark { background: linear-gradient(180deg, var(--dark-top) 40%, var(--dark-bottom)); color: var(--text-on-dark); }

/* Small cards: the same page tint; a dark one can stand out */
.cards-small .card.card-dark, .cards-small .card:nth-child(4) { background: linear-gradient(180deg, var(--dark-top) 40%, var(--dark-bottom)); color: var(--text-on-dark); }
.card h4 { font-size: var(--step-1); line-height: 1.15; margin: 0 0 var(--space-2); }
.cards + .cards { margin-top: var(--gutter); }
.cards-small p { margin: 0; }
.cards-small .card-more { margin: var(--space-2) 0 0; }
.note { color: var(--text-muted); margin: var(--space-3) 0 0; font-size: 0.95rem; }

/* Split layout, checklist */
.split { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.checklist li { padding-left: 2rem; position: relative; font-weight: 500; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-strong); font-weight: 800; }

/* How it works: pastel cards, each with a small frosted number chip (like the numbered rows on sketch.com); on wide screens a dotted line joins the chips from step to step */
.section-how { background: var(--bg-alt); }
.steps { display: grid; gap: var(--gutter); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step {
  --chip: 3rem;
  --chip-top: var(--space-4);
  counter-increment: step;
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + var(--chip) + var(--space-3));   /* narrow screens: text sits to the right of the number */
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom));
}
.step::before {
  content: counter(step);
  position: absolute;
  top: var(--chip-top);
  left: var(--space-4);
  display: grid;
  place-items: center;
  width: var(--chip);
  height: var(--chip);
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 75%, transparent);
  box-shadow: inset 0 0 0 1px var(--white), 0 0.5rem 1.25rem -0.5rem color-mix(in srgb, var(--ink) 35%, transparent);
  color: var(--ink);
  font-weight: 600;
  font-size: 1.25rem;
}
/* Narrow screens: a dotted arrow runs straight down from each number to the next one, in the page's ring colour */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--chip-top) + var(--chip) + 0.5rem);
  left: calc(var(--space-4) + var(--chip) / 2 - 0.6rem);
  width: 1.2rem;
  height: calc(100% + var(--gutter) - var(--chip) - 1rem);
  background: var(--ring-a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M10 0 V100' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-dasharray='0.1 8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% calc(100% - 0.8rem) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 4 L8 12 L13.5 4' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 1.1rem 1.1rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M10 0 V100' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-dasharray='0.1 8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% calc(100% - 0.8rem) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 4 L8 12 L13.5 4' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 1.1rem 1.1rem no-repeat;
  pointer-events: none;
}
.step h3 { font-size: var(--step-1); }
.step p { margin: 0; }

/* White panel with a title, text and a checklist */
.why { padding: var(--space-4); background: var(--surface); border-radius: var(--radius); }
.why h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); letter-spacing: -0.02em; }
.why p { max-width: 46ch; }

/* Black project panel, like sketch.com's dark tiles */
.project-panel { padding: clamp(1.5rem, 5cqi, 4rem); border-radius: var(--radius); background: linear-gradient(180deg, var(--dark-top) 45%, var(--dark-bottom)); color: var(--text-on-dark); }
.project-title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); margin-bottom: var(--space-1); }
.project-text { font-size: var(--step-1); max-width: 30ch; }
.project-panel .button { background: var(--white); color: var(--ink); }
.project-panel .button:hover { background: var(--lavender); }
.project-panel .checklist li::before { color: var(--mint); }

/* Contact / call-to-action card: white with the rainbow strip along the bottom */
.section-contact .content {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 6cqi, 5rem) clamp(1.25rem, 6cqi, 5rem) calc(clamp(1.5rem, 6cqi, 5rem) + 0.75rem);
  border-radius: var(--radius);
  background: var(--surface);
}
.section-contact .content::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0.75rem;
  background: linear-gradient(90deg, var(--rainbow-1), var(--rainbow-2), var(--rainbow-3), var(--rainbow-4), var(--rainbow-5), var(--rainbow-6));
}
.section-contact .section-title { max-width: 16ch; }
.section-contact .section-intro { margin-bottom: var(--space-3); }
.contact-email { margin: var(--space-3) 0 0; }
.contact-email a { color: var(--text); }

/* Wider containers: enhance the single-column default */
@container content (min-width: 40rem) {
  .section-head { grid-template-columns: 1fr auto; align-items: end; }
  .section-head .button { justify-self: end; }
  .hero-grid { grid-template-columns: 1.2fr 1fr; align-items: end; }
  .cards-small { grid-template-columns: repeat(2, 1fr); }
  .why .checklist { grid-template-columns: 1fr 1fr; }
}
@container content (min-width: 52rem) {
  /* Bento grid: wide and narrow cards alternate across a 12-column grid */
  .cards-bento { grid-template-columns: repeat(12, 1fr); }
  .cards-bento .card { grid-column: span 5; min-height: 34rem; }
  .cards-bento .card-wide { grid-column: span 7; }
}
@container content (min-width: 60rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  /* Wide screens: the number goes above the text, with a curving dotted arrow from each chip to the next one */
  .step { --chip-top: var(--space-3); padding: calc(var(--space-4) + var(--chip) + var(--space-2)) var(--space-4) var(--space-4); }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--chip-top) + var(--chip) / 2 - 0.5rem);
    left: calc(var(--space-4) + var(--chip) + 0.5rem);
    width: calc(100% + var(--gutter) - var(--chip) - 1rem);
    height: 3rem;
    background: var(--ring-a);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 48' preserveAspectRatio='none'%3E%3Cpath d='M0 8 C30 8 30 40 50 40 S70 8 100 8' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-dasharray='0.1 8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5 L12 8 L4 13.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 0 top -0.05rem / 1.1rem 1.1rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 48' preserveAspectRatio='none'%3E%3Cpath d='M0 8 C30 8 30 40 50 40 S70 8 100 8' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-dasharray='0.1 8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5 L12 8 L4 13.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 0 top -0.05rem / 1.1rem 1.1rem no-repeat;
    pointer-events: none;
  }
  .cards-small { grid-template-columns: repeat(4, 1fr); }
  .cards-small.cards-three { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Motion (subtle, CSS only, switched off for people who prefer reduced motion).
   1. The hero rises into place one piece at a time when the page loads.
   2. Cards, steps and panels fade up as they scroll into view, using scroll-driven animation.
      The range is in vh (a share of the screen height) counted from the moment the element's top edge reaches the
      bottom of the screen, so tall and short elements take the same amount of scrolling (percentages would scale
      with element height) and it adapts to small and large screens.
      Browsers without it (older Firefox and Safari) just show everything normally. */
@media (prefers-reduced-motion: no-preference) {
  .section-hero .tag, .section-hero h1, .section-hero .hero-lead, .section-hero .hero-actions, .hero-visual, .slideshow-wrap {
    animation: rise 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .section-hero h1 { animation-delay: 0.2s; }
  .section-hero .hero-lead { animation-delay: 0.4s; }
  .section-hero .hero-actions { animation-delay: 0.6s; }
  .hero-visual, .slideshow-wrap { animation-delay: 0.85s; }
  @keyframes rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Scroll reveal settings (all in screen-height units): how far up the screen an element is before it starts,
       how much scrolling the fade takes, and the gap between neighbours in a row */
    :root { --reveal-start: 5vh; --reveal-length: 20vh; --reveal-stagger: 6vh; }
    .section:not(.section-hero) .section-head, .card, .step, .why, .project-panel, .template-grid figure, .section-contact .content {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: cover calc(var(--reveal-start) + var(--n, 0) * var(--reveal-stagger)) cover calc(var(--reveal-start) + var(--reveal-length) + var(--n, 0) * var(--reveal-stagger));
    }
    /* Neighbours in a row arrive one after another: each one is --reveal-stagger later than the one before */
    .card:nth-child(2), .step:nth-child(2), .template-grid li:nth-child(2) figure { --n: 1; }
    .card:nth-child(3), .step:nth-child(3), .template-grid li:nth-child(3) figure { --n: 2; }
    .card:nth-child(4), .template-grid li:nth-child(4) figure { --n: 3; }
    @keyframes reveal { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}