/* ==========================================================================
   UNGROUND — site stylesheet
   --------------------------------------------------------------------------
   This is the ONLY stylesheet for the whole site.

   START HERE: the ":root" block below holds every colour, font and spacing
   value used on the site. Changing a value there changes it everywhere.
   You very rarely need to touch anything further down.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS  —  edit these
   ========================================================================== */

:root {

  /* ---- Brand -------------------------------------------------------------
     Two colours carry the whole site: graphite and Mars red.
     There is no pure white anywhere; the lightest tone is a warm off-grey.
  ------------------------------------------------------------------------ */
  --c-brand:       #d6453d;   /* Mars red: buttons, highlights, accents      */
  --c-brand-dark:  #b93830;   /* hover state for filled buttons              */
  --c-brand-text:  #ec6a61;   /* a lighter red, for red TEXT on dark panels  */
  --c-brand-soft:  rgba(214, 69, 61, .14);   /* tinted icon backgrounds      */
  --c-on-brand:    #fcefed;   /* text sitting on a red fill                  */

  /* ---- Graphite surfaces, darkest to lightest ---- */
  --c-deep:        #0f1113;   /* hero, dark sections, footer  */
  --c-ink:         #17191c;   /* the page background          */
  --c-surface:     #1c1f22;   /* alternating section panels   */
  --c-raised:      #23262a;   /* cards, tiles, form fields    */
  --c-line:        #2f3338;   /* borders and dividers         */

  /* ---- Text ---- */
  --c-title:       #e9e5e1;   /* headings          */
  --c-body:        #aba7a2;   /* paragraphs        */
  --c-muted:       #8a8681;   /* captions, hints   */

  /* ---- Feedback (kept clear of the brand red so errors still read) ---- */
  --c-warn:        #f0b429;
  --c-warn-bg:     rgba(240, 180, 41, .12);
  --c-ok:          #59c08a;
  --c-ok-bg:       rgba(89, 192, 138, .12);

  /* ---- Typography --------------------------------------------------------
     Uses the fonts already installed on the visitor's device, so the site
     loads instantly and needs no external font service.
     To use a custom font: add its <link> to each page's <head> and put the
     font name first in the list below.
  ------------------------------------------------------------------------ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --fs-hero:    clamp(2.25rem, 5.2vw, 3.85rem);   /* h1 on the home page   */
  --fs-h1:      clamp(2rem,   4.2vw, 3rem);       /* h1 on inner pages     */
  --fs-h2:      clamp(1.65rem, 3.1vw, 2.4rem);    /* section headings      */
  --fs-h3:      clamp(1.15rem, 1.8vw, 1.35rem);   /* card headings         */
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.22rem);   /* intro paragraphs      */
  --fs-body:    1rem;
  --fs-small:   0.875rem;

  /* ---- Layout ---- */
  --maxw:        1180px;   /* page content width */
  --maxw-narrow: 760px;    /* width used for centred text blocks */
  --gutter:      24px;     /* space between content and screen edge */
  --section-y:   clamp(64px, 8vw, 112px);   /* vertical padding per section */
  --page-hero-y: clamp(56px, 7vw, 92px);    /* padding inside an inner page's hero */

  /* ---- Shape and depth ---- */
  --radius:      14px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .22);
  --shadow-md: 0 10px 34px rgba(0, 0, 0, .38);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, .5);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;   /* stops the sticky header covering anchors */
  background: var(--c-ink);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-body);
  background: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--c-title);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }

p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-brand-text); text-decoration: none; }
a:hover { color: var(--c-brand); text-decoration: underline; }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--c-line); margin: 2.5rem 0; }

/* Keyboard focus ring, visible for keyboard users, hidden for mouse users. */
:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* "Skip to content" link, revealed only when tabbed to. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-brand); color: var(--c-on-brand);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: var(--c-on-brand); }

/* Hidden from view but read out by screen readers. */
.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;
}


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* Alternating section background */
.section--surface { background: var(--c-surface); }

/* Centred heading block that sits above a grid */
.section-head {
  max-width: var(--maxw-narrow);
  margin: 0 auto clamp(36px, 5vw, 60px);
  text-align: center;
}
.section-head p { font-size: var(--fs-lead); }

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

/* Generic responsive grid. Use .grid.cols-2 / .cols-3 / .cols-4 */
.grid { display: grid; gap: 28px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .85em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease),
              color .18s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-brand);
  color: var(--c-on-brand);
  box-shadow: 0 8px 22px rgba(214, 69, 61, .3);
}
.btn--primary:hover { background: var(--c-brand-dark); color: var(--c-on-brand); }

.btn--outline {
  background: transparent;
  border-color: var(--c-line);
  color: var(--c-title);
}
.btn--outline:hover { border-color: var(--c-brand); color: var(--c-brand-text); }

/* Outline button for the strongest dark panels and the red band */
.btn--ghost {
  background: transparent;
  border-color: rgba(233, 229, 225, .32);
  color: var(--c-title);
}
.btn--ghost:hover {
  background: rgba(233, 229, 225, .08);
  border-color: rgba(233, 229, 225, .55);
  color: var(--c-title);
}

.btn--lg { padding: 1em 2em; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* Row of buttons that wraps neatly on small screens */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }


/* ==========================================================================
   5. SITE HEADER  /  NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 17, 19, .88);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--c-line);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 74px;
}

/* --- Logo (the mark is inline SVG in the HTML so it inherits this colour) --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--c-title);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.03em;
  text-decoration: none;
  flex: none;
}
.logo:hover { color: var(--c-title); text-decoration: none; }
.logo svg { width: 30px; height: 30px; color: var(--c-brand); }

/* --- Nav links ---
   ":not(.btn)" keeps these rules away from the "Book a demo" button, which
   styles itself. Without it the plain-link colour would override the button's. */
.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.nav a:not(.btn) {
  padding: .5rem .85rem;
  border-radius: var(--radius-pill);
  color: var(--c-body);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav a:not(.btn):hover {
  background: rgba(233, 229, 225, .06);
  color: var(--c-title);
  text-decoration: none;
}

/* Add class="is-current" to the link for the page you're on. */
.nav a.is-current { color: var(--c-brand-text); font-weight: 600; }

.nav .btn { margin-left: 10px; }

/* --- Mobile menu button (hidden on desktop) --- */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  color: var(--c-title);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; margin: auto; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }


/* ==========================================================================
   6. HERO  (home page)
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--c-deep);
  padding-block: clamp(64px, 8vw, 108px);
}

/* Soft glow behind the hero. Purely decorative, delete if you don't want it. */
.hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(214, 69, 61, .30), transparent 62%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -40%; left: -12%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(214, 69, 61, .12), transparent 64%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero h1 { font-size: var(--fs-hero); margin-bottom: .55em; }
.hero .lead { margin-bottom: 2rem; max-width: 34em; }

.hero-media img,
.hero-media video {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}


/* ==========================================================================
   7. PAGE HERO  (inner pages)
   ========================================================================== */

.page-hero {
  background: var(--c-deep);
  padding-block: var(--page-hero-y);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* The top edge of this glow reads as a horizontal line across the band.
   Anchoring it to the TOP of the hero (rather than the bottom) puts that line
   across the heading at the same height on every page, however long the text
   underneath happens to be. */
.page-hero::before {
  content: "";
  position: absolute;
  top: calc(var(--page-hero-y) + 28px);
  left: 0; right: 0;
  height: 420px;
  background: radial-gradient(ellipse at 50% 0%, rgba(214, 69, 61, .26), transparent 65%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero p {
  font-size: var(--fs-lead);
  max-width: var(--maxw-narrow);
  margin-inline: auto;
}


/* ==========================================================================
   8. CARDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--c-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(214, 69, 61, .45);
}

/* Round icon badge at the top of a card */
.card-icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
}
.card-icon svg { width: 26px; height: 26px; }


/* ==========================================================================
   9. FEATURE ROW  (media beside text, alternating sides)
   ========================================================================== */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
}
.feature-row + .feature-row { margin-top: clamp(56px, 7vw, 96px); }

/* Add class="is-reversed" to put the image on the right instead of the left. */
.feature-row.is-reversed .feature-media { order: 2; }

/* Works for both an <img> and a <video> in the media slot. */
.feature-media img,
.feature-media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.feature-media video { background: var(--c-deep); }

/* Bulleted list with tick marks, used inside feature rows */
.ticks { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.ticks li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .7rem;
}
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .35em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ec6a61' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}


/* ==========================================================================
   10. TILES  (applications grid)
   ========================================================================== */

.tile {
  padding: 26px;
  background: var(--c-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.tile:hover { border-color: var(--c-brand); transform: translateY(-3px); }
.tile h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.tile p { font-size: var(--fs-small); margin: 0; }
.tile-mark {
  width: 34px; height: 34px;
  margin-bottom: 1rem;
  color: var(--c-brand-text);
}


/* ==========================================================================
   11. CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--c-brand-dark), var(--c-brand) 60%, #e05a51);
  color: var(--c-on-brand);
  text-align: center;
  padding-block: clamp(56px, 7vw, 90px);
}
.cta-band h2 { color: var(--c-on-brand); }
.cta-band p { font-size: var(--fs-lead); max-width: 46em; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 2rem; }

/* Inside the red band the filled button flips to graphite. */
.cta-band .btn--primary {
  background: var(--c-deep);
  color: var(--c-title);
  box-shadow: var(--shadow-md);
}
.cta-band .btn--primary:hover { background: var(--c-ink); color: var(--c-title); }
.cta-band .btn--ghost {
  border-color: rgba(252, 239, 237, .5);
  color: var(--c-on-brand);
}
.cta-band .btn--ghost:hover {
  background: rgba(252, 239, 237, .12);
  color: var(--c-on-brand);
}


/* ==========================================================================
   12. FORMS
   ========================================================================== */

.form-card {
  padding: clamp(26px, 4vw, 42px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.field { margin-bottom: 1.15rem; }

/* Two fields side by side (stacks on mobile) */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.field label {
  display: block;
  margin-bottom: .4rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-title);
}
.field .optional { font-weight: 400; color: var(--c-muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem 1rem;
  font: inherit;
  font-size: .97rem;
  color: var(--c-title);
  background: var(--c-raised);
  border: 1px solid var(--c-line);
  border-radius: 11px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--c-muted); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 4px rgba(214, 69, 61, .2);
}

/* Amber state applied by JavaScript when a required field is empty. Amber
   rather than red, so it can't be mistaken for the brand colour. */
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--c-warn); }
.field-error {
  display: none;
  margin-top: .35rem;
  font-size: var(--fs-small);
  color: var(--c-warn);
}
.field.has-error .field-error { display: block; }

/* Checkbox row */
.field-check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: 1.5rem;
}
/* The browser's default checkbox is a white box, which would be the one piece
   of white on the site. This draws it in graphite instead, filling red when
   ticked. */
.field-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin: .25rem 0 0;
  flex: none;
  display: grid;
  place-content: center;
  background: var(--c-raised);
  border: 1px solid var(--c-line);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.field-check input[type="checkbox"]::before {
  content: "";
  width: 11px; height: 11px;
  background: var(--c-on-brand);
  transform: scale(0);
  transition: transform .12s var(--ease);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.field-check input[type="checkbox"]:hover { border-color: var(--c-brand); }
.field-check input[type="checkbox"]:checked {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.field-check input[type="checkbox"]:checked::before { transform: scale(1); }
.field-check label { font-size: var(--fs-small); font-weight: 400; color: var(--c-body); margin: 0; }
.field-check.has-error label { color: var(--c-warn); }
.field-check.has-error input { outline: 2px solid var(--c-warn); outline-offset: 2px; }

/* Spam trap. The field inside is a real input, but parked where nobody will
   ever see it, so anything that fills it in is a bot. Don't "tidy" this away. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Message shown after the form is submitted */
.form-status {
  display: none;
  margin-top: 1.1rem;
  padding: .9rem 1.1rem;
  border-radius: 11px;
  font-size: var(--fs-small);
}
.form-status.is-visible { display: block; }
.form-status.is-ok    { background: var(--c-ok-bg);   color: var(--c-ok);   border: 1px solid rgba(89, 192, 138, .35); }
.form-status.is-error { background: var(--c-warn-bg); color: var(--c-warn); border: 1px solid rgba(240, 180, 41, .35); }

.form-footnote { margin-top: 1.1rem; font-size: var(--fs-small); color: var(--c-muted); }


/* ==========================================================================
   13. CONTACT DETAILS
   ========================================================================== */

.contact-item { display: flex; gap: 1rem; margin-bottom: 1.9rem; }
.contact-item svg {
  width: 22px; height: 22px;
  flex: none;
  margin-top: .28rem;
  color: var(--c-brand-text);
}
.contact-item h3 { font-size: 1rem; margin-bottom: .2rem; }
.contact-item p { margin: 0; font-size: .95rem; }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--c-deep);
  color: var(--c-muted);
  padding-top: clamp(52px, 6vw, 76px);
  font-size: .95rem;
  border-top: 1px solid var(--c-line);
}
/* ":not(.btn)" so the footer's "Book a demo" button keeps its own colours. */
.site-footer a:not(.btn) { color: var(--c-body); }
.site-footer a:not(.btn):hover { color: var(--c-brand-text); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: clamp(40px, 5vw, 60px);
}
.site-footer .logo { margin-bottom: 1rem; }

.footer-col h3 {
  margin-bottom: 1.1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-title);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .6rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
}
.footer-bottom p { margin: 0; }


/* ==========================================================================
   15. SUBTLE ENTRANCE ANIMATION
   Elements with class="reveal" fade up as they scroll into view (see main.js).
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

/* --- Tablet --- */
@media (max-width: 960px) {
  .hero .container    { grid-template-columns: 1fr; }
  .hero-media         { order: -1; max-width: 560px; }
  .feature-row        { grid-template-columns: 1fr; }
  .feature-row.is-reversed .feature-media { order: -1; }
  .cols-4             { grid-template-columns: repeat(2, 1fr); }
  .cols-3             { grid-template-columns: repeat(2, 1fr); }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 34px; }
}

/* --- Mobile: collapse the nav into a drop-down panel --- */
@media (max-width: 820px) {
  .nav-toggle { display: grid; }

  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 14px var(--gutter) 22px;
    background: var(--c-deep);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: .8rem 1rem; border-radius: 10px; }
  .nav .btn { margin: 10px 0 0; }

  .site-header .container { position: relative; }
}

/* --- Small phones --- */
@media (max-width: 620px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .field-pair               { grid-template-columns: 1fr; }
  .footer-grid              { grid-template-columns: 1fr; }
  .btn                      { width: 100%; }
  .btn-row                  { flex-direction: column; }
  .card                     { padding: 26px; }
}

/* --- Respect the visitor's "reduce motion" system setting --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}