/* ============================================================
   TND Technologies — design system
   Colours: TND Brand Kit (brand/TND_Colours.txt is the source of truth)
   Proportion: white + Cloud 60% · Navy 20% · Blue 15% · Orange 5%
   Type: Space Grotesk (headings, prices, labels) · IBM Plex Sans (body). Labels are 12px caps; nothing below 12px.
   ============================================================ */

:root {
  --ink: #0A1B3D;           /* Navy — body text */
  --ink-soft: #4A5672;      /* Slate — secondary text */
  --muted: #4A5672;         /* Slate — captions (7.3:1 on white) */
  --surface: #F4F6FA;       /* Cloud — page */
  --surface-2: #FFFFFF;     /* cards, header */
  --line: #DCE1EB;
  --brand: #0047BB;         /* TND Blue — logo, links, secondary buttons */
  --brand-hover: #00358C;   /* Blue Deep — hover and pressed */
  --brand-deep: #0A1B3D;    /* Navy — dark bands, footer */
  /* Signal Orange is for buttons, offers and badges only. Orange fills carry NAVY text
     (white on orange is 2.9:1). Never use orange as text on a light background. */
  --orange: #FF6B1A;
  --orange-deep: #E2560D;   /* hover on orange buttons */
  --accent-strong: var(--brand); /* accents on light backgrounds */
  --accent: #8FB3FF;        /* Sky — links, icons and keylines on Navy */
  --brand-tint: #E6EDF8;    /* Blue Mist — tinted panels */
  --cream: #FFFFFF;         /* text on dark bands */
  --success: #157A34;
  --error: #D93025;

  --btn-radius: 10px;     /* buttons (brand kit); badges and chips stay pills */
  --radius: 16px;
  --radius-lg: 26px;
  --container: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--surface-2); /* white page; Cloud is for tiles */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; } /* keep the hidden attribute winning over display rules (e.g. the mini-cart thumbnail pair) */

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }

.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;
}

/* ---------- shared bits ---------- */
.eyebrow {
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  font-size: .82rem;
  color: var(--brand);       
  margin-bottom: 0.7rem;
}
.eyebrow-light { color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.03em;
  padding: 0.85rem 1.6rem;
  border-radius: var(--btn-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  text-transform: uppercase;
}
.btn-primary { background: var(--orange); color: var(--ink); box-shadow: 0 8px 22px -10px rgba(255,107,26,.6); }
.btn-primary:hover { background: var(--orange-deep); transform: translateY(-2px); }
.btn-brand { background: var(--brand); color: #fff; box-shadow: 0 8px 22px -12px rgba(0,71,187,.65); }
.btn-brand:hover { background: var(--brand-hover); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }

.link-arrow {
  font-family: "Space Grotesk", sans-serif; font-weight: 600; letter-spacing: .03em;
  color: var(--brand); display: inline-flex; gap: .4rem; align-items: center;
}
.link-arrow span { transition: transform .2s var(--ease); }
/* Phones: a 44px tap target without moving anything (the padding is cancelled by the margin). */
@media (max-width: 940px) {
  .link-arrow { padding-block: .7rem; margin-block: -.7rem; }
  .line-tile .link-arrow { padding-block: 0; } /* the whole tile is the link */
  .custom-logo-link { display: inline-block; padding-block: 5px; margin-block: -5px; }
}
.link-arrow:hover span { transform: translateX(4px); }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
/* TND Blue is 2.1:1 on Navy, so dark sections take the Sky ring. */
:is(.inside, .announce-bar, .site-footer) :focus-visible { outline-color: var(--accent); }
.home-maker :focus-visible { outline-color: #fff; } /* TND Blue band */
::selection { background: var(--brand); color: #fff; }

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-tight { padding-top: 0; }

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; margin-bottom: 2.6rem;
}
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }

/* ---------- header ---------- */
.site-header {
  /* Sticks with the announce bar scrolled out of view (--announce-h is its measured height,
     set in site.js). The header's own height never changes on scroll: resizing a sticky
     header makes the browser adjust the scroll position, which re-triggers the resize and
     shakes the header near the top of the page. */
  position: sticky; top: calc(-1 * var(--announce-h, 42px)); z-index: 50;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s, background .25s var(--ease);
}
.site-header.scrolled {
  background: rgba(255,255,255,.94);
  border-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(10,27,61,.5);
}
/* Logged-in admin bar is fixed at the top — offset the sticky header so it
   doesn't slide underneath and get clipped. WP: 32px desktop, 46px ≤782px. At ≤600px the
   admin bar scrolls away with the page, so no offset is needed. */
body.admin-bar .site-header { top: calc(32px - var(--announce-h, 42px)); }
@media (max-width: 782px) { body.admin-bar .site-header { top: calc(46px - var(--announce-h, 42px)); } }
@media (max-width: 600px) { body.admin-bar .site-header { top: calc(-1 * var(--announce-h, 42px)); } }
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 72px; }

/* Proposition bar: full-width navy strip that scrolls away with the page,
   leaving the logo row stuck to the top. */
.announce-bar {
  background: var(--brand-deep);
  color: rgba(255,255,255,.92);
}
.announce-inner {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  min-height: 42px; padding-block: .5rem;
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}
.announce-item { display: inline-flex; align-items: center; gap: .45rem; text-align: center; }
@media (max-width: 480px) { .announce-inner { font-size: .75rem; letter-spacing: 0; } } /* one line on a phone */
.announce-item svg { color: var(--accent); flex-shrink: 0; }

/* Back-to-top: reveals after scrolling, bottom-right, above content. */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60; width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--brand-deep); color: var(--cream);
  box-shadow: 0 10px 26px -10px rgba(10,27,61,.6);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .18s var(--ease);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--orange); color: var(--ink); transform: translateY(-2px); }

.brand { display: inline-flex; align-items: center; gap: .6rem; }

.main-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.main-nav a {
  font-weight: 500; font-size: .95rem; color: var(--ink-soft);
  position: relative; padding: .3rem 0;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--brand); transition: width .22s var(--ease);
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: .35rem; }
.icon-btn {
  background: none; border: 0; color: var(--ink); cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; transition: background .18s;
}
.icon-btn:hover { background: var(--brand-tint); color: var(--brand); }
.icon-btn:active { transform: scale(.92); }

/* Native core/search rendered as a round icon button matching .icon-btn. */
.tnd-search { margin: 0; }
.tnd-search .wp-block-search__button {
  background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; transition: background .18s;
}
.tnd-search .wp-block-search__button:hover { background: var(--brand-tint); color: var(--brand); }
.tnd-search .wp-block-search__button svg { width: 20px; height: 20px; fill: currentColor; }
.tnd-search .wp-block-search__input { border: 1px solid var(--line); border-radius: 999px; padding: .5rem .9rem; font-family: "IBM Plex Sans", sans-serif; }

/* ---------- home ---------- */
/* The home page is a stack of full-width tiles on white, 12px apart: one idea and one big
   picture per tile. Product photos sit straight on the tile colour (multiply blends a white
   photo background away), so product photos should be shot on white. */
.home main { margin-top: 0; display: flex; flex-direction: column; gap: 12px; }
.home main > * { margin-block: 0; }

/* Heading and copy blocks. */
.maker-copy h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); text-wrap: balance; }
.maker-copy p { color: var(--ink-soft); max-width: 52ch; margin-top: 1rem; }
.maker-copy .maker-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

.hero h1, .shop-header h1, .inside h2, .line-tile h2, .home-range h2, .after h2, .home-maker h2 {
  font-weight: 600; line-height: 1; letter-spacing: -0.04em; text-wrap: balance;
}
.shop-header h1, .inside h2, .home-range h2, .after h2, .home-maker h2 { font-size: clamp(2rem, 5.2vw, 4rem); }
.hero-lede, .range-lede, .shop-header .lede, .inside .maker-copy p {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.4; color: var(--ink-soft);
  max-width: 42ch; margin: 1.3rem auto 0; text-wrap: balance;
}

.shop-header { text-align: center; padding: clamp(1.25rem, 3vw, 2.25rem) 0 clamp(1.25rem, 2.5vw, 2rem); }
.shop-header .lede { max-width: 52ch; }
.section-shop .shop-filters { justify-content: safe center; } /* safe: a scrolling row must not centre its first chip off screen */

/* Tile 1: the pitch, then the Featured product (layout in blocks.css). */
.hero {
  text-align: center; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 82%, #fff, rgba(255,255,255,0) 72%), var(--surface);
  padding: clamp(1.75rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 3rem);
}
.hero h1 { font-size: clamp(2.2rem, min(7.4vw, 7.5vh), 4.25rem); } /* vh: short laptop screens keep the buy bar in view */
.hero h1 span { display: block; } /* the two sentences never share a line */
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .9rem 1.8rem; margin-top: 1.8rem; }
.hero-actions .link-arrow { min-height: 44px; }
@keyframes hero-rise { from { transform: translateY(28px) scale(.96); } }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--accent); transform: translateY(-2px); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); }

/* Why it costs more (patterns/inside.php), on Navy: a full-width tile on the home page, a rounded
   panel on the product page. On the home page it carries the page's one Sweep (brand guidelines). */
.home-why, .inside {
  color: var(--cream);
  background: radial-gradient(80% 60% at 50% 118%, rgba(0,71,187,.85), rgba(0,71,187,0) 70%), var(--brand-deep);
}
.home-why { --sweep: clamp(10px, 1.4vw, 18px); position: relative; overflow: hidden; scroll-margin-top: 80px; }
.inside { text-align: center; margin-top: clamp(3rem, 7vw, 5rem); padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 4rem); border-radius: var(--radius-lg); }
.home .inside { background: none; margin-top: 0; padding: 0; border-radius: 0; }
.home-why::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: var(--sweep);
  background: var(--brand); border-top-right-radius: calc(var(--sweep) * 1.34) 100%;
}
.inside h2 { color: #fff; }
.inside .maker-copy p { color: rgba(255,255,255,.82); max-width: 46ch; }
.inside .label-rows { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 5vw, 4.5rem); max-width: 900px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; text-align: left; }
.inside .label-row { display: block; border: 0; padding: 0; }
.inside .label-row dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* read out, not shown */
.inside .label-row dd { color: rgba(255,255,255,.82); }
.inside .label-big { color: #fff; font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: -0.03em; margin: 0 0 .5rem; }
.inside .label-row a { color: var(--accent); }
.inside .label-row a:hover { color: #fff; }

/* Tiles 3 and 4: the two product lines, side by side. */
.home-lines { padding: 0 12px; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.line-tile {
  display: flex; flex-direction: column; align-items: center; height: 100%; text-align: center; overflow: hidden;
  background: var(--surface); padding: clamp(2.5rem, 5vw, 4rem) 1.5rem 0;
}
.lines li + li .line-tile { background: var(--brand-tint); }
.line-tile:focus-visible { outline-offset: -4px; }
.line-tile h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
.line-desc { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.45; max-width: 32ch; margin-top: .8rem; text-wrap: balance; }
.line-tile .link-arrow { margin: 1rem 0 1.5rem; }
.line-tile img { margin-top: auto; width: auto; height: clamp(240px, 30vw, 440px); object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.line-tile:hover img { transform: scale(1.04); }
.line-tile:hover .link-arrow span { transform: translateX(4px); }

/* The range (card layout in blocks.css). */
.home-range .section-head { flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
.range-lede { margin-top: 1rem; }

/* After you order. */
.after { background: var(--surface); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.after-grid { max-width: 860px; }
.after-copy { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.after-copy p { color: var(--ink-soft); max-width: 44ch; margin: 1rem auto 0; text-wrap: balance; }
.after-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; }
.after-links a { color: var(--brand); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.after-links a:hover { color: var(--brand-hover); }

/* The company, on TND Blue. */
.home-maker { background: var(--brand); color: #fff; }
.home-maker h2 { color: #fff; }
.home-maker .maker-copy { text-align: center; }
.home-maker .maker-copy p { color: rgba(255,255,255,.9); max-width: 56ch; margin-inline: auto; font-size: 1.1rem; }
.home-maker .maker-copy .maker-actions { justify-content: center; max-width: none; }
.home-maker .maker-copy .maker-legal { font-size: .82rem; line-height: 1.6; max-width: none; margin-top: 2.2rem; }

.home .newsletter { padding: clamp(2rem, 5vw, 4rem) 0; }

/* ---------- ruled fact rows ---------- */
/* Field name on the left, the fact on the right. Used on light surfaces, on Navy, and in the product buy box. */
.label-rows { margin: 0; }
.label-row {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0 1.25rem;
  padding: .7rem 0; border-top: 1px solid var(--line);
}
.label-row:first-child { border-top: 0; }
.label-row dt {
  font-family: "Space Grotesk", Arial, sans-serif; font-weight: 600; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: .32rem;
}
.label-row dd { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.label-row dd strong { display: block; color: var(--ink); font-weight: 600; }
.label-big {
  display: block; font-family: "Space Grotesk", Arial, sans-serif; font-weight: 700;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ink); margin-bottom: .15rem; font-variant-numeric: tabular-nums;
}
.label-row a { color: var(--brand); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.label-row a:hover { color: var(--brand-hover); text-decoration-thickness: 2px; }
.label-rows--ruled, .label-rows--dark { border-top: 2px solid var(--ink); }
.label-rows--dark { border-top-color: var(--cream); }
.label-rows--dark .label-row { border-top-color: rgba(255,255,255,.2); }
.label-rows--dark dt { color: rgba(255,255,255,.72); }
.label-rows--dark dd { color: rgba(255,255,255,.82); }
.label-rows--dark dd strong, .label-rows--dark .label-big { color: var(--cream); }

/* ---------- product card bits ---------- */
.tag {
  position: absolute; top: .8rem; left: .8rem;
  font-family: "Space Grotesk", Arial, sans-serif; font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .08em;
  background: rgba(10,27,61,.86); color: var(--cream);
  padding: .25rem .6rem; border-radius: 999px;
}
.price { font-family: "Space Grotesk", Arial, sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--ink); }

/* A centred closing tile (About, Support): heading, one line, one button. */
.newsletter-inner.cta-tile { text-align: center; grid-template-columns: 1fr; justify-items: center; }
.newsletter-inner.cta-tile p { margin: .6rem auto 1.4rem; }

/* ---------- newsletter ---------- */
.newsletter { padding: clamp(3rem, 7vw, 5rem) 0; }
.newsletter-inner {
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.6rem);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center;
}
.newsletter h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .6rem; }
.newsletter p { color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }
.news-form { display: flex; flex-wrap: wrap; gap: .6rem; }
/* Message shown after a form posts back (inc/forms.php). Inherits text colour, so it reads on light and dark sections. */
form[id$="-form"] { scroll-margin-top: 110px; } /* Clear the sticky header when the redirect jumps here. */
.form-note { flex-basis: 100%; margin: 0 0 1rem; padding: .75rem 1rem; border: 2px solid currentColor; border-radius: 12px; font-weight: 600; }
.form-note.is-error { border-style: dashed; }
.news-form input {
  flex: 1; padding: .85rem 1.1rem; border-radius: var(--btn-radius); border: 2px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-size: 1rem; font-family: "IBM Plex Sans", Arial, sans-serif;
}
.news-form input::placeholder { color: var(--muted); }
.news-form input:focus { border-color: var(--brand); }
.news-form input:focus:not(:focus-visible) { outline: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--brand-deep); color: rgba(255,255,255,.75); padding-top: 3.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
.footer-brand p { margin-top: 1rem; max-width: 36ch; font-size: .95rem; }
.footer-brand .made { color: rgba(255,255,255,.6); font-size: .88rem; }
.footer-social { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; }
.footer-social-link {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--cream); border: 1px solid rgba(255,255,255,.22); transition: color .15s, border-color .15s, background .15s;
}
.footer-social-link:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.footer-handle { margin-left: .35rem; font-size: .88rem; color: rgba(255,255,255,.7); }
.footer-col h2 { font-family: "Space Grotesk", Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: .95rem; color: var(--cream); margin-bottom: 1rem; }
.footer-col a { display: block; padding: .32rem 0; font-size: .95rem; transition: color .15s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 1.4rem 0;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .88rem; font-family: "Space Grotesk", Arial, sans-serif; letter-spacing: .02em;
}

.footer-legal {
  padding: 0 0 1.4rem;
  font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,.7);
}

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .lines { grid-template-columns: 1fr; }
  .newsletter-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }

  /* Block nav handles its own mobile overlay (wp:navigation overlayMenu),
     so we keep cart + account reachable on mobile and only drop the search icon
     (phones search from inside the menu: .nav-search in blocks.css). */
  .header-actions .icon-btn--search { display: none; }
}
@media (max-width: 560px) {
  .label-row { grid-template-columns: 1fr; padding-block: .85rem; }
  .label-row dt { padding-top: 0; margin-bottom: .2rem; }
  .hero-actions .btn { width: 100%; }
  .inside .label-rows { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .news-form { flex-direction: column; }
  .news-form .btn { width: 100%; }
}

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