/* Midlands Casual Modern Design System - Custom CSS Variables & Animations */

:root {
  /* Light Mode Colors */
  --color-background: #fbf9f8;
  --color-on-background: #1b1c1c;
  
  --color-surface: #fbf9f8;
  --color-on-surface: #1b1c1c;
  --color-surface-variant: #e4e2e1;
  --color-on-surface-variant: #59413c;
  
  --color-surface-dim: #dcd9d9;
  --color-surface-bright: #fbf9f8;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f6f3f2;
  --color-surface-container: #f0eded;
  --color-surface-container-high: #eae8e7;
  --color-surface-container-highest: #e4e2e1;
  
  --color-inverse-surface: #303030;
  --color-inverse-on-surface: #f3f0f0;
  
  --color-outline: #8d716b;
  --color-outline-variant: #e1bfb8;
  --color-surface-tint: #ad3219;
  
  --color-primary: #aa2f16;
  --color-on-primary: #ffffff;
  --color-primary-container: #cc472c;
  --color-on-primary-container: #fffbff;
  --color-inverse-primary: #ffb4a4;
  
  --color-secondary: #486366;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #cae8eb;
  --color-on-secondary-container: #4e696c;
  
  --color-tertiary: #5d5d50;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #767567;
  --color-on-tertiary-container: #fffbff;
  
  --color-primary-fixed: #ffdad3;
  --color-primary-fixed-dim: #ffb4a4;
  --color-on-primary-fixed: #3e0500;
  --color-on-primary-fixed-variant: #8c1902;
  
  --color-secondary-fixed: #cae8eb;
  --color-secondary-fixed-dim: #afcccf;
  --color-on-secondary-fixed: #021f22;
  --color-on-secondary-fixed-variant: #304b4e;
  
  --color-tertiary-fixed: #e6e3d2;
  --color-tertiary-fixed-dim: #c9c7b7;
  --color-on-tertiary-fixed: #1c1c12;
  --color-on-tertiary-fixed-variant: #48473b;
  
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  
  /* Layout Spacing */
  --spacing-margin-mobile: 20px;
  --spacing-margin-desktop: 64px;
  --spacing-gutter: 24px;
  --spacing-container-max: 1280px;
  --spacing-unit: 8px;
}

html.dark {
  /* Dark Mode Colors */
  --color-background: #111313;
  --color-on-background: #f1edea;
  
  --color-surface: #111313;
  --color-on-surface: #f1edea;
  --color-surface-variant: #524340;
  --color-on-surface-variant: #d5c2be;
  
  --color-surface-dim: #0c0e0e;
  --color-surface-bright: #1b1d1d;
  --color-surface-container-lowest: #070909;
  --color-surface-container-low: #191c1c;
  --color-surface-container: #1d2020;
  --color-surface-container-high: #272a2a;
  --color-surface-container-highest: #323535;
  
  --color-inverse-surface: #eae0db;
  --color-inverse-on-surface: #1b1c1c;
  
  --color-outline: #9d8c88;
  --color-outline-variant: #524340;
  --color-surface-tint: #ffb4a4;
  
  --color-primary: #ffb4a4;
  --color-on-primary: #630e00;
  --color-primary-container: #aa2f16;
  --color-on-primary-container: #ffdad3;
  --color-inverse-primary: #aa2f16;
  
  --color-secondary: #afcccf;
  --color-on-secondary: #193437;
  --color-secondary-container: #304b4e;
  --color-on-secondary-container: #cae8eb;
  
  --color-tertiary: #c9c7b7;
  --color-on-tertiary: #303126;
  --color-tertiary-container: #48473b;
  --color-on-tertiary-container: #e6e3d2;
  
  /* Keep fixed colors consistent or tweak for accessibility */
  --color-primary-fixed: #ffdad3;
  --color-primary-fixed-dim: #ffb4a4;
  --color-on-primary-fixed: #3e0500;
  --color-on-primary-fixed-variant: #8c1902;
  
  --color-secondary-fixed: #cae8eb;
  --color-secondary-fixed-dim: #afcccf;
  --color-on-secondary-fixed: #021f22;
  --color-on-secondary-fixed-variant: #304b4e;
  
  --color-tertiary-fixed: #e6e3d2;
  --color-tertiary-fixed-dim: #c9c7b7;
  --color-on-tertiary-fixed: #1c1c12;
  --color-on-tertiary-fixed-variant: #48473b;
  
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;
}

/* Base Styles */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--color-background);
  color: var(--color-on-background);
  transition: background-color 0.4s ease, color 0.4s ease;
}

h1, h2, h3, h4, h5, h6, .font-quicksand {
  font-family: 'Quicksand', sans-serif;
}

/* Material Symbols Outlined Custom Configuration */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Bubble Headings */
.bubble-heading {
  display: inline-block;
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  padding: 8px 24px;
  border-radius: 9999px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bubble-heading-primary {
  background-color: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed-variant);
}

/* Tonal layer */
.tonal-layer {
  background-color: rgba(230, 227, 210, 0.15); /* tertiary-fixed at low opacity */
}
.dark .tonal-layer {
  background-color: rgba(72, 71, 59, 0.2);
}

/* Soft Glow Hover Effects */
.soft-glow-hover {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.soft-glow-hover:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px -10px rgba(170, 47, 22, 0.16); /* primary tinted shadow */
  border-color: rgba(170, 47, 22, 0.3);
}
.dark .soft-glow-hover:hover {
  box-shadow: 0 20px 40px -10px rgba(255, 180, 164, 0.12); /* primary fixed dim tinted shadow */
  border-color: rgba(255, 180, 164, 0.3);
}

.soft-glow-hover-secondary {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.soft-glow-hover-secondary:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px -10px rgba(72, 99, 102, 0.16); /* secondary tinted shadow */
  border-color: rgba(72, 99, 102, 0.3);
}
.dark .soft-glow-hover-secondary:hover {
  box-shadow: 0 20px 40px -10px rgba(175, 204, 207, 0.12);
  border-color: rgba(175, 204, 207, 0.3);
}

/* Header scroll animations */
header.scrolled {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: rgba(251, 249, 248, 0.85);
  box-shadow: 0 10px 30px -10px rgba(72, 99, 102, 0.08);
  border-bottom: 1px solid rgba(141, 113, 107, 0.15);
}
html.dark header.scrolled {
  background-color: rgba(17, 19, 19, 0.85);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(157, 140, 136, 0.15);
}

/* Navbar Underline Reveal Animation */
header nav a {
  position: relative;
  display: inline-block;
}
header nav a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--color-primary);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
header nav a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
header nav a:has(img)::after,
header nav a:has(span.font-headline-sm)::after,
header nav a.bg-primary::after,
header nav a.bg-secondary::after,
header nav a.bg-surface-container-low::after,
header nav a[onclick]::after {
  display: none;
}

/* Theme Toggle Icon Spin */
#theme-toggle span, #theme-toggle-mobile span {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#theme-toggle:hover span, #theme-toggle-mobile:hover span {
  transform: rotate(30deg) scale(1.1);
}

/* Arrow move animation */
.button-pop:hover .material-symbols-outlined {
  transform: translateX(4px);
}
.button-pop .material-symbols-outlined {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll reveal initial states and directions */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.reveal-left {
  transform: translateX(-30px);
}
.reveal-on-scroll.reveal-right {
  transform: translateX(30px);
}
.reveal-on-scroll.reveal-scale {
  transform: scale(0.96);
}
/* "Sudden" pop-in: instead of the slow gentle rise, this element snaps
   into view with a quick, springy scale when you scroll to it. */
.reveal-on-scroll.reveal-pop {
  transform: scale(0.8);
  transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Micro-animations and custom effects */
.button-pop {
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
}
.button-pop:hover {
  transform: scale(1.02);
}
.button-pop:active {
  transform: scale(0.97);
}

/* Estimator Input Styling */
.calculator-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(170, 47, 22, 0.15);
  outline: none;
}
.dark .calculator-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 180, 164, 0.15);
}

/* Custom background pattern for CTA */
.dots-pattern {
  background-image: radial-gradient(circle at 2px 2px, var(--color-outline-variant) 1px, transparent 0);
  background-size: 32px 32px;
}
.dark .dots-pattern {
  background-image: radial-gradient(circle at 2px 2px, rgba(225, 191, 184, 0.08) 1px, transparent 0);
}

/* Dialog Backdrop and Modal transitions */
.modal-backdrop {
  backdrop-filter: blur(8px);
  background-color: rgba(27, 28, 28, 0.4);
  transition: opacity 0.3s ease;
}
.dark .modal-backdrop {
  background-color: rgba(7, 9, 9, 0.6);
}

.modal-content {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

/* FAQ accordion transition */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}
.faq-item.active .faq-content {
  max-height: 200px;
  opacity: 1;
}

/* Gradient background fills */
.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #d4452a 100%);
}
.gradient-secondary {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #34484b 100%);
}
.gradient-cream {
  background: linear-gradient(135deg, var(--color-surface-container-low) 0%, var(--color-surface-container-high) 100%);
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface-container-low);
}
::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-outline);
}
.dark ::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--color-outline);
}

/* ============================================================
   Hero scrolling text bands ("digital success" style)
   ------------------------------------------------------------
   Two rows of big brand words that slide across the top of the
   home page: the top row drifts to the left, the bottom row
   drifts to the right. It is purely decorative eye-candy — it
   gives the page a lively, modern feel and needs no clicking.
   ============================================================ */

/* The outer band. It's full width and hides any words that
   slide off the left/right edges. */
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* A soft fade on each edge so words appear and disappear
     gently instead of being chopped off with a hard line. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* The moving strip of words. In the HTML we list the SAME set of
   words twice, side by side. This strip then slides left by
   exactly half its own width and loops forever, so it reads as
   one never-ending ribbon with no visible "jump". */
.marquee__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: marquee-left 45s linear infinite;
}

/* The second row uses the same idea but travels the other way. */
.marquee__track--reverse {
  animation-name: marquee-right;
}

/* One word (plus the little star that follows it). */
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 5.5vw, 4rem);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--color-on-surface);
}

/* The little sparkle between words, always in the brand orange. */
.marquee__star {
  color: var(--color-primary);
  font-size: 0.6em;
}

/* "Outlined" words: see-through in the middle with just an
   outline. Used on the second row for variety, matching the
   mixed solid/outline look of the reference hero. */
.marquee__item--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-outline);
          text-stroke: 1.5px var(--color-outline);
}

/* The two directions of travel. Sliding by 50% works because the
   word list is duplicated exactly once in the HTML. */
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Hovering the mouse over a row pauses it, so it's easy to read. */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* If a visitor has asked their device to "reduce motion" (an
   accessibility setting), we hold the words still for them. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ============================================================
   Hero gradient background ("digital success" / ShaderGradient look)
   ------------------------------------------------------------
   A full-bleed, silky blend of teal -> orange -> blue that slowly
   flows across the whole hero. It's inspired by the ShaderGradient
   3D background, but rebuilt in plain CSS so it stays fast and needs
   no 3D library. Decorative only.

   How it works: a base diagonal gradient fills the whole area with
   the three colours, then three big blurred "blobs" of the SAME
   colours drift on top and melt into it, giving the silky, moving,
   liquid-metal feel of the reference. A grain layer sits over the
   top (matching the reference's grain='on' setting).
   ============================================================ */
.hero-aurora {
  position: absolute;
  inset: 0;             /* fill the whole hero box */
  overflow: hidden;     /* clip the glow to the hero area */
  z-index: 0;           /* sits behind the hero text (which is z-10) */
  pointer-events: none; /* never blocks clicks on the buttons */
  /* Plain page colour — the interactive box grid sits on top of this. */
  background: var(--color-surface);
}

/* ---- Interactive "background boxes" (Aceternity-style), brand colours ----
   A big grid of cells, skewed for a dynamic look; each cell flashes a brand
   colour when the cursor passes over it, then fades back. */
.boxes {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 240%;
  display: flex;
  transform: translate(-50%, -50%) skewX(-44deg) skewY(14deg) scale(1);
  pointer-events: auto;      /* re-enable hover (the hero-aurora parent turns it off) */
}
.box-col { display: flex; flex-direction: column; flex-shrink: 0; }
.box {
  width: 56px;
  height: 30px;
  flex-shrink: 0;
  border-right: 1px solid rgba(141, 113, 107, 0.22);
  border-top: 1px solid rgba(141, 113, 107, 0.22);
  background-color: transparent;
}
.dark .box { border-color: rgba(225, 191, 184, 0.08); }

/* Vignette: only a whisper of fade right at the very outside edges, so the
   grid reads across the WHOLE first screen instead of washing out early.
   (transparent = grid fully visible; solid = covered by the page colour.) */
.boxes-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--color-surface);
  -webkit-mask-image: radial-gradient(150% 130% at 50% 50%, transparent 0%, transparent 82%, #000 100%);
          mask-image: radial-gradient(150% 130% at 50% 50%, transparent 0%, transparent 82%, #000 100%);
}

/* ============================================================
   Hero call-to-action buttons (pill BOX + "wipe-fill" hover)
   ------------------------------------------------------------
   These are proper pill-shaped buttons. At rest the label is a
   hollow outline inside the pill; on hover a solid, glowing copy
   of the words wipes across from left to right. The hover effect
   is adapted from a Uiverse.io effect by satyamchaudharydev,
   recoloured to our brand and made readable in light + dark mode.
   ============================================================ */
.stroke-btn {
  /* --border-right: the little "wipe edge" that follows the fill.
     --box-bg: the pill's fill colour (set per button by the variants below).
     --text-stroke-color: colour of the resting outline text.
     --animation-color: colour that wipes in and glows on hover. */
  --border-right: 6px;
  --box-bg: var(--color-primary);
  --text-stroke-color: rgba(255, 255, 255, 0.9);
  --animation-color: #ffffff;

  position: relative;
  display: inline-block;
  /* The padding + fill + radius are what make it a solid BOX. */
  padding: 0.9rem 2.25rem;
  border: 2px solid rgba(255, 255, 255, 0.35); /* subtle light ring */
  border-radius: 9999px;              /* full pill shape */
  background: var(--box-bg);          /* filled in a brand colour */
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;                   /* keep the wipe inside the pill */
  transition: transform 0.25s ease, box-shadow 0.25s ease;

  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  letter-spacing: 2px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;

  color: transparent;                                 /* hollow text... */
  -webkit-text-stroke: 1px var(--text-stroke-color);  /* ...with an outline */
}

/* Colour variants — each button filled in one of the brand colours. */
.stroke-btn--primary   { --box-bg: var(--color-primary); }   /* orange CTA */
.stroke-btn--secondary { --box-bg: var(--color-secondary); } /* teal CTA */

/* A gentle lift + soft shadow on hover, so it still feels like a button. */
.stroke-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(27, 28, 28, 0.28);
}

/* The solid, glowing copy of the text that wipes across on hover. It
   sits exactly over the resting text (same padding) and starts at
   zero width, so nothing shows until you hover. */
.stroke-btn .hover-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  padding: inherit;          /* match the button padding so text lines up */
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  color: var(--animation-color);
  -webkit-text-stroke: 1px var(--animation-color);
  transition: width 0.5s ease;
}

/* On hover: reveal the solid text fully, show the wipe edge, and glow. */
.stroke-btn:hover .hover-text {
  width: 100%;
  border-right: var(--border-right) solid var(--animation-color);
  filter: drop-shadow(0 0 18px var(--animation-color));
}

/* For visitors who prefer reduced motion, skip the wipe animation. */
@media (prefers-reduced-motion: reduce) {
  .stroke-btn .hover-text {
    transition: none;
  }
}

/* ============================================================
   Pricing cards — hover "stand out" effect
   ------------------------------------------------------------
   Each pricing plan card lifts up, gains a brand-orange border,
   and shows a soft orange glow when the visitor hovers it, so the
   plan they're looking at clearly stands out. (The icon filling
   with colour is handled by Tailwind group-hover in the HTML.)
   ============================================================ */
.price-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
.price-card:hover {
  transform: translateY(-10px);
  border-color: var(--color-primary);
  box-shadow: 0 24px 50px -12px rgba(170, 47, 22, 0.22); /* soft orange glow */
}
.dark .price-card:hover {
  box-shadow: 0 24px 50px -12px rgba(255, 180, 164, 0.16);
}

/* The featured (dark teal) card sits slightly raised already; on hover
   it lifts a touch more and glows a little stronger. */
.price-card--featured:hover {
  box-shadow: 0 30px 60px -12px rgba(170, 47, 22, 0.32);
}

/* Respect reduced-motion: no lifting, just the border/glow. */
@media (prefers-reduced-motion: reduce) {
  .price-card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .price-card:hover {
    transform: none;
  }
}

/* ============================================================
   Service flip cards (Uiverse-style, recoloured to our brand)
   ------------------------------------------------------------
   Each service is a card that flips over when you hover it: the
   FRONT shows the icon and service name; the BACK (revealed by the
   flip) shows the short description and a "Learn more" link.
   Adapted from a Uiverse.io effect by joe-watson-sbf, recoloured
   to the brand orange + cream palette.
   ============================================================ */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 22rem;
  perspective: 1000px;   /* gives the flip its 3D depth */
  position: relative;    /* anchor for the glowing border ring */
  border-radius: 1rem;   /* so the glow ring follows the rounded corners */
}

/* The piece that actually rotates. Both faces are stuck to it back
   to back, and it spins 180 degrees on hover. */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

/* Flip on hover, and also on keyboard focus so the back's link is
   reachable without a mouse. */
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}

/* The two faces sit exactly on top of each other. backface-visibility
   hides whichever face is currently turned away from you. */
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(141, 113, 107, 0.18); /* subtle neutral edge */
  border-radius: 1rem;
  box-shadow: 0 10px 24px -10px rgba(27, 28, 28, 0.12); /* soft neutral shadow */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: auto;
}

/* FRONT — clean solid surface (no coloured hue). */
.flip-card-front {
  background: var(--color-surface-container-lowest);
}

/* BACK — brand orange, white text. Pre-rotated so it faces us once
   the card flips. */
.flip-card-back {
  background: linear-gradient(120deg,
      var(--color-primary) 30%,
      var(--color-primary-container) 100%);
  color: #ffffff;
  transform: rotateY(180deg);
  gap: 1.25rem;
}

/* Front bits */
.flip-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(170, 47, 22, 0.10);
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.flip-card-icon .material-symbols-outlined { font-size: 1.75rem; }

.flip-card-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  opacity: 0.85;
  margin-bottom: 0.35rem;
}
.flip-card-title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--color-on-surface);
}
.flip-card-hint {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--color-on-surface-variant);
  opacity: 0.7;
}
.flip-card-hint .material-symbols-outlined { font-size: 1rem; }

/* Back bits */
.flip-card-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
}
.flip-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #ffffff;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  transition: background 0.2s ease;
}
.flip-card-link:hover { background: rgba(255, 255, 255, 0.16); }
.flip-card-link .material-symbols-outlined { font-size: 1rem; }

/* Reduced motion: flip instantly instead of the slow spin. */
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner { transition: none; }
}

/* ============================================================
   Glowing border effect (Aceternity-style), in brand colours
   ------------------------------------------------------------
   When you hover one of these cards, a soft coloured light traces
   its border and follows your mouse around the edge. The bright
   spot's position comes from a --glow-angle variable that a small
   script (in index.html) updates as the pointer moves.
   ============================================================ */
.glow-card {
  position: relative;
}

/* The glowing ring itself. It's a conic-gradient (a colour sweep
   around a circle) shown only on the border, using the classic
   "gradient border" mask trick. Hidden until you hover. */
.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;                    /* thickness of the glowing ring */
  background: conic-gradient(from calc(var(--glow-angle, 90deg) - 55deg),
      transparent 0deg,
      var(--color-primary) 30deg,   /* brand orange */
      var(--color-secondary) 75deg, /* brand teal */
      transparent 110deg);
  /* Show the gradient only in the 2px border band, not the middle. */
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

/* Reveal the glow on hover or keyboard focus. */
.glow-card:hover::before,
.glow-card:focus-within::before {
  opacity: 1;
}

/* Keep the card's real content sitting above the glow ring. */
.glow-card > * {
  position: relative;
  z-index: 2;
}

/* On a flip card, lift the glow ring ABOVE the flipping faces so it stays
   visible while the card keeps spinning on hover. */
.flip-card.glow-card::before {
  z-index: 3;
}

/* ============================================================
   Animated testimonials (Aceternity-style)
   ------------------------------------------------------------
   A stack of author avatars on the left that shuffle as the quote
   on the right changes. Auto-plays and can be stepped with the
   prev/next arrows. Recoloured to the brand palette.
   ============================================================ */
.at-wrap {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .at-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* Left column: the square area the avatars are stacked inside. */
.at-images {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  aspect-ratio: 1;
}

/* Each avatar is a big rounded tile with the person's initials. They
   sit on top of each other; the active one comes to the front while
   the others sit behind, slightly rotated (a "stack of cards" look).
   The script sets the live transform/opacity on each. */
.at-avatar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.75rem;
  box-shadow: 0 18px 40px -12px rgba(27, 28, 28, 0.35);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 12vw, 5rem);
  color: #ffffff;
  user-select: none;
  opacity: 0.5;
  z-index: 10;
}
/* Brand-coloured tiles + sensible defaults before the script runs
   (avatar 1 starts at the front). */
.at-avatar--1 {
  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-container));
  opacity: 1;
  z-index: 30;
  transform: rotate(0deg) scale(1);
}
.at-avatar--2 {
  background: linear-gradient(145deg, var(--color-secondary), #3a5457);
  transform: rotate(7deg) scale(0.92);
}
.at-avatar--3 {
  background: linear-gradient(145deg, #cc472c, #e8613f);
  transform: rotate(-5deg) scale(0.92);
}

/* Right column: rating, quote, author, arrows. */
.at-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.at-stars {
  display: flex;
  gap: 0.15rem;
  color: var(--color-tertiary);
}
.at-stars .material-symbols-outlined { font-size: 1.4rem; }

.at-quote {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  line-height: 1.5;
  color: var(--color-on-surface);
}
.at-name {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-on-surface);
}
.at-role {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--color-on-surface-variant);
  opacity: 0.8;
}
.at-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.at-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container-high);
  color: var(--color-secondary);
  border: 1px solid var(--color-outline-variant);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.at-btn:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
  transform: translateY(-2px);
}

/* The quote fades up each time it changes. */
@keyframes at-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.at-quote.at-animate { animation: at-fade-in 0.5s ease; }

/* ============================================================
   Typewriter effect (hero headline)
   ------------------------------------------------------------
   A small script types the headline out letter by letter with a
   blinking cursor. This is just the cursor styling.
   ============================================================ */
.tw-cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 4px;
  vertical-align: -0.05em;
  background: var(--color-primary);
  animation: tw-blink 0.9s steps(1) infinite;
}
@keyframes tw-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ============================================================
   Hero-highlight effect (footer call-to-action)
   ------------------------------------------------------------
   Two parts: (1) a "marker pen" highlight that sweeps in behind a
   phrase when the section scrolls into view, and (2) a soft spotlight
   on the dotted background that follows the mouse.
   ============================================================ */

/* The marker highlight. It starts at 0 width and grows to full once
   the section is revealed (the reveal observer adds .revealed). */
.hl-highlight {
  padding: 0 0.25em;
  border-radius: 0.4em;
  color: #ffffff;
  background-image: linear-gradient(90deg,
      var(--color-primary), var(--color-primary-container));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: background-size 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
/* The marker fills when its own observer marks it lit (reliable on every
   page), or when the section reveals (kept as a fallback). */
.hl-highlight.hl-lit,
.reveal-on-scroll.revealed .hl-highlight {
  background-size: 100% 100%;
}

/* The mouse-following spotlight over the dotted CTA panel. */
.hl-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%),
      rgba(255, 180, 164, 0.28), transparent 70%);
}
.hl-surface:hover::before { opacity: 1; }

/* Reduced motion: no typing or sweeping, just show everything. */
@media (prefers-reduced-motion: reduce) {
  .tw-cursor { animation: none; }
  .hl-highlight { transition: none; background-size: 100% 100%; }
}

/* ============================================================
   Hero ripple effect
   ------------------------------------------------------------
   As you move or drag the mouse across the hero, expanding rings
   spawn under the cursor and fade out, like ripples on water.
   The rings live in .ripple-layer (behind the hero text); a small
   script in index.html creates them.
   ============================================================ */
.ripple-layer {
  position: absolute;
  inset: 0;
  z-index: 1;            /* above the gradient, below the hero text (z-10) */
  overflow: hidden;
  pointer-events: none;  /* never blocks the buttons */
}
.ripple {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.3), inset 0 0 12px rgba(255, 255, 255, 0.25);
  animation: heroRipple 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes heroRipple {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: .65; }
  100% { transform: translate(-50%, -50%) scale(13); opacity: 0; }
}

/* ============================================================
   Pinned scroll reveal ("Why Midlands Ads" section)
   ------------------------------------------------------------
   The section is wrapped in a tall .pin-wrap. Inside, .pin-sticky
   sticks to the viewport so the page appears to hold still while
   you scroll THROUGH the wrap. A script (whyPin in index.html)
   reads how far you've scrolled and fades/slides the heading and
   cards in one by one. Only enabled on wider screens; on phones it
   just shows normally.
   ============================================================ */
.pin-wrap { position: relative; }
.why-reveal { opacity: 0; transform: translateY(44px); }

@media (min-width: 768px) {
  .pin-wrap { height: 220vh; }               /* the extra height = scroll runway */
  .pin-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
}

/* ============================================================
   Hero blend + scroll fade
   ------------------------------------------------------------
   .hero-blend melts the colourful hero into the page colour at the
   bottom, so there is no hard edge. A script also fades the whole
   hero out as you scroll past it (setting opacity/transform inline).
   ============================================================ */
.hero-blend {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: 2;                 /* above the gradient + ripples, below the text */
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-surface) 92%);
}
/* Smooth the fade a touch as the numbers update on scroll. The wrapper lets
   mouse events pass THROUGH to the boxes behind it, while the actual links
   stay clickable. */
#heroContent { transition: opacity .12s linear, transform .12s linear; pointer-events: none; }
#heroContent a { pointer-events: auto; }

/* Each "blob" is a big, heavily-blurred circle of one colour. They
   drift slowly and blend into the base to create the flowing look. */
.hero-aurora__blob {
  position: absolute;
  width: 75vw;
  min-width: 560px;
  aspect-ratio: 1;      /* keep them perfectly round */
  border-radius: 9999px;
  filter: blur(90px);   /* the big blur is what makes it silky */
  opacity: 0.85;
  will-change: transform;
}

/* Blob 1 — ORANGE, drifts around the middle-left */
.hero-aurora__blob--1 {
  top: -25%;
  left: -12%;
  background: #cc472c;  /* brand orange (primary-container) */
  animation: aurora-drift-1 20s ease-in-out infinite;
}

/* Blob 2 — TEAL, drifts around the top-right */
.hero-aurora__blob--2 {
  top: -30%;
  right: -18%;
  background: #7fb8bd;  /* brand teal (lightened secondary) */
  animation: aurora-drift-2 24s ease-in-out infinite;
}

/* Blob 3 — soft BLUE, drifts along the bottom */
.hero-aurora__blob--3 {
  bottom: -35%;
  left: 25%;
  background: #ffb4a4;  /* brand light coral (primary-fixed-dim) */
  animation: aurora-drift-3 28s ease-in-out infinite;
}

/* In dark mode, lay a soft dark wash over the colours so the light
   hero text stays easy to read. */
.dark .hero-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 22, 0.35);
}

/* A faint film of grain over the whole thing — this recreates the
   grain='on' setting from the reference. It's a tiny inline SVG
   noise texture, so nothing extra needs downloading. */
.hero-aurora__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.12;
  mix-blend-mode: overlay;
}

/* The three gentle drifting motions. Different timings on each blob
   make the overall movement feel organic rather than mechanical. */
@keyframes aurora-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(14%, 12%) scale(1.2); }
}
@keyframes aurora-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-14%, 14%) scale(1.15); }
}
@keyframes aurora-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1.1); }
  50%      { transform: translate(10%, -14%) scale(0.9); }
}

/* Hold the colours still for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-aurora__blob {
    animation: none;
  }
}

/* ============================================================
   "How we work" bento cards — dark-mode friendly
   ------------------------------------------------------------
   In dark mode the plain cards used the same colour as the page
   itself, so they vanished and only a hard, bright outline showed.
   These rules lift the card slightly off the background and soften
   the outline, so the edges are gentle instead of glaring.
   ============================================================ */
.bento-card {
  background: var(--color-surface);
  border: 1px solid rgba(141, 113, 107, 0.16); /* soft warm hairline */
  transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}
html.dark .bento-card {
  /* Lifted a step above the page colour so the card is visible as a
     panel, without needing a bright border to define it. */
  background: var(--color-surface-container-low);
  border-color: rgba(255, 255, 255, 0.07);
}
.bento-card:hover { border-color: rgba(170, 47, 22, 0.30); }
html.dark .bento-card:hover { border-color: rgba(255, 180, 164, 0.28); }

/* The two solid colour cards: in dark mode take the edge off the
   fill so they sit with the rest of the page instead of shouting. */
html.dark .bento-card--solid {
  filter: saturate(0.9) brightness(0.92);
}
.bento-card--solid { transition: transform .3s ease, filter .3s ease; }

/* ---- Typewriter for headings that type when scrolled into view ---- */
[data-type-on-view] { min-height: 1em; }
.tw-cursor-sm {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: currentColor;
  animation: tw-blink 1s step-end infinite;
}

/* ============================================================
   Timeline — the "How we work" 4-step plan
   ------------------------------------------------------------
   A plain vertical timeline: a line down the left with a marker
   for each step. The page scrolls normally the whole way. Each
   step fades in as it comes up the screen and fades back out as
   it passes, so there is always one step in front of you.
   ============================================================ */
.tml {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding-left: 2.75rem;
}

/* The line itself, and the brand-coloured bar that fills it as you scroll. */
.tml-line {
  position: absolute;
  left: 0.5rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: rgba(141, 113, 107, 0.20);
  border-radius: 9999px;
  overflow: hidden;
}
html.dark .tml-line { background: rgba(255, 255, 255, 0.10); }
.tml-line__fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0%;                     /* the script sets this as you scroll */
  background: var(--color-primary);
  border-radius: 9999px;
}

/* --- Each step --- */
.tml-item {
  position: relative;
  padding: 4.5rem 0;
  /* The script fades these in and out; this is the starting state. */
  opacity: 0.12;
  transition: opacity .35s linear;
}
@media (min-width: 800px) { .tml-item { padding: 7rem 0; } }

/* The dot sitting on the line next to each step. */
.tml-marker {
  position: absolute;
  left: -2.75rem;
  top: 5.6rem;
  width: 1.0625rem;
  height: 1.0625rem;
  margin-left: -0.03rem;
  border-radius: 9999px;
  background: var(--color-surface);
  border: 2px solid rgba(141, 113, 107, 0.30);
  transition: background-color .4s ease, border-color .4s ease, transform .4s ease;
}
@media (min-width: 800px) { .tml-marker { top: 8.1rem; } }
html.dark .tml-marker { background: var(--color-surface); border-color: rgba(255, 255, 255, 0.18); }
.tml-item.is-current .tml-marker {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.25);
}

/* Headings in our brand red, body in the standard muted tone. */
.tml-item__title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
html.dark .tml-item__title { color: var(--color-primary-fixed-dim); }
.tml-item__body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-on-surface-variant);
}

@media (max-width: 799px) {
  .tml { padding-left: 2.25rem; }
  .tml-marker { left: -2.25rem; }
  .tml-item__title { font-size: 1.4rem; }
  .tml-item__body { font-size: 1rem; }
}

/* Reduced motion: everything visible, nothing fading. */
@media (prefers-reduced-motion: reduce) {
  .tml-item { opacity: 1 !important; }
}

/* ============================================================
   BLOG PAGE
   ============================================================ */

/* --- Thin reading-progress bar pinned to the very top of the page --- */
.read-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 60;                 /* above the header */
  background: transparent;
  pointer-events: none;
}
.read-bar span {
  display: block;
  height: 100%;
  width: 0%;                   /* the script sets this as you scroll */
  background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
}

/* --- Hero, with soft brand-coloured lights drifting behind it --- */
.blog-hero { position: relative; overflow: hidden; }
.blog-hero__lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.55;
}
.orb {
  position: absolute;
  border-radius: 9999px;
  /* Each light drifts slowly on its own loop, so the background is never
     quite the same twice. */
  animation: orb-drift 22s ease-in-out infinite;
}
.orb--1 {
  width: 26rem; height: 26rem;
  top: -8rem; left: -6rem;
  background: var(--color-primary-fixed-dim);
}
.orb--2 {
  width: 22rem; height: 22rem;
  top: -4rem; right: -4rem;
  background: var(--color-secondary-container);
  animation-duration: 27s;
  animation-direction: reverse;
}
.orb--3 {
  width: 18rem; height: 18rem;
  bottom: -8rem; left: 45%;
  background: var(--color-tertiary-fixed-dim);
  animation-duration: 31s;
}
html.dark .blog-hero__lights { opacity: 0.22; }
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(3rem, 2rem) scale(1.08); }
  66%      { transform: translate(-2rem, 3rem) scale(0.95); }
}

/* --- Search box --- */
.blog-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 26rem;
  margin: 0 auto;
  padding: 0.85rem 1.35rem;
  border-radius: 9999px;
  background: var(--color-surface);
  border: 1px solid rgba(141, 113, 107, 0.20);
  transition: border-color .3s ease, box-shadow .3s ease;
}
html.dark .blog-search { border-color: rgba(255, 255, 255, 0.10); background: var(--color-surface-container-low); }
.blog-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(170, 47, 22, 0.10);
}
.blog-search .material-symbols-outlined { color: var(--color-on-surface-variant); font-size: 1.25rem; }
.blog-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  color: var(--color-on-surface);
}
.blog-search input::placeholder { color: var(--color-on-surface-variant); opacity: 0.7; }

/* --- Topic filter chips --- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  padding-top: 0.5rem;
}
.chip {
  padding: 0.5rem 1.15rem;
  border-radius: 9999px;
  border: 1px solid rgba(141, 113, 107, 0.22);
  background: transparent;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
html.dark .chip { border-color: rgba(255, 255, 255, 0.12); }
.chip:hover { transform: translateY(-2px); border-color: var(--color-primary); color: var(--color-primary); }
.chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
html.dark .chip.is-active { color: #ffffff; }

/* --- Shared post bits --- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
  opacity: 0.85;
}
.post-tag {
  padding: 0.2rem 0.7rem;
  border-radius: 9999px;
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  font-weight: 700;
  opacity: 1;
}
.soon-pill {
  padding: 0.2rem 0.7rem;
  border-radius: 9999px;
  border: 1px dashed rgba(141, 113, 107, 0.45);
  font-weight: 700;
}
html.dark .soon-pill { border-color: rgba(255, 255, 255, 0.25); }

.read-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: var(--color-primary);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
}
html.dark .read-link { color: var(--color-primary-fixed-dim); }
.read-link .material-symbols-outlined {
  font-size: 1.1rem;
  transition: transform .3s ease;
}
.feature-card:hover .read-link .material-symbols-outlined { transform: translateX(5px); }

/* --- Featured post --- */
.feature-card {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--color-surface-container-low);
  border: 1px solid rgba(141, 113, 107, 0.14);
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
}
html.dark .feature-card { border-color: rgba(255, 255, 255, 0.07); }
@media (min-width: 800px) { .feature-card { grid-template-columns: 20rem 1fr; } }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(170, 47, 22, 0.35); }

.feature-card__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  background: linear-gradient(140deg, var(--color-primary), var(--color-primary-container));
}
.feature-card__pill {
  position: absolute;
  top: 1.25rem; left: 1.25rem;
  padding: 0.25rem 0.85rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.feature-card__icon {
  font-size: 4.5rem;
  color: rgba(255, 255, 255, 0.9);
  transition: transform .45s ease;
}
.feature-card:hover .feature-card__icon { transform: scale(1.12) rotate(-6deg); }

.feature-card__body { padding: 2.25rem; display: flex; flex-direction: column; }
.feature-card__title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--color-on-surface);
  margin-bottom: 0.85rem;
  transition: color .3s ease;
}
.feature-card:hover .feature-card__title { color: var(--color-primary); }
.feature-card__text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-on-surface-variant);
  margin-bottom: 1.5rem;
}

/* --- The grid of posts --- */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding-top: 1.5rem;
}
@media (min-width: 700px)  { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-radius: 1rem;
  background: var(--color-surface-container-low);
  border: 1px solid rgba(141, 113, 107, 0.14);
  overflow: hidden;
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}
html.dark .post-card { border-color: rgba(255, 255, 255, 0.07); }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(170, 47, 22, 0.3); }

/* A thin colour bar that grows across the top of the card on hover. */
.post-card__accent {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
  transition: width .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-card:hover .post-card__accent { width: 100%; }

.post-card__title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--color-on-surface);
  margin-bottom: 0.75rem;
}
.post-card__text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-on-surface-variant);
}
/* Posts that aren't written yet: slightly held back, and not clickable. */
.post-card.is-soon { opacity: 0.82; cursor: default; }
.post-card.is-soon:hover { transform: translateY(-2px); }

/* Cards fade up one after another when the grid first comes into view. */
.post-card.stagger-in {
  opacity: 0;
  transform: translateY(18px);
}
.post-card.stagger-in.shown {
  opacity: 0.82;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Cards hidden by a search or a filter. */
.post-card.filtered-out,
.feature-card.filtered-out { display: none; }

.no-results {
  text-align: center;
  padding: 3rem 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--color-on-surface-variant);
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Closing call to action --- */
.blog-cta {
  position: relative;
  text-align: center;
  padding: 4rem 2rem;
  border-radius: 1.5rem;
  background: var(--color-surface-container-low);
  border: 1px solid rgba(141, 113, 107, 0.14);
  overflow: hidden;
}
html.dark .blog-cta { border-color: rgba(255, 255, 255, 0.07); }

/* Reduced motion: no drifting lights, no staggered entrance. */
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  .post-card.stagger-in { opacity: 0.82; transform: none; }
}

/* --- Closing prompt at the bottom of each blog post --- */
.post-end {
  margin-top: 4rem;
  padding: 2.5rem;
  border-radius: 1.25rem;
  text-align: center;
  background: var(--color-surface-container-low);
  border: 1px solid rgba(141, 113, 107, 0.14);
}
html.dark .post-end { border-color: rgba(255, 255, 255, 0.07); }
.post-end__title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-on-surface);
  margin-bottom: 0.75rem;
}
.post-end__text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--color-on-surface-variant);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

/* ============================================================
   BLOG HERO — falling beams that collide (Aceternity style)
   ------------------------------------------------------------
   Thin brand-coloured beams fall from the top of the hero and,
   when they reach the floor, burst into a little shower of sparks.
   It sits on a plain white background, the same in light and dark
   mode (a deliberate bright "island" at the top of the page).
   ============================================================ */
.blog-hero--beams {
  background: #ffffff !important;   /* plain white, both themes */
  min-height: 32rem;
  display: flex;
  align-items: center;
}
.blog-hero--beams > .relative { width: 100%; }

/* Keep the words readable on white even in dark mode. */
.blog-hero--beams .text-on-surface,
html.dark .blog-hero--beams .text-on-surface { color: #1b1c1c; }
.blog-hero--beams .text-on-surface-variant,
html.dark .blog-hero--beams .text-on-surface-variant { color: #59413c; }
.blog-hero--beams .text-primary,
html.dark .blog-hero--beams .text-primary { color: #aa2f16; }
/* The search box is always the light version on this white hero. */
html.dark .blog-hero--beams .blog-search { background: #ffffff; border-color: rgba(141, 113, 107, 0.20); }
html.dark .blog-hero--beams .blog-search input { color: #1b1c1c; }
html.dark .blog-hero--beams .blog-search input::placeholder { color: #59413c; opacity: 0.7; }
html.dark .blog-hero--beams .blog-search .material-symbols-outlined { color: #59413c; }

/* The area the beams fall through. */
.beams {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* A single beam: a thin line with the colour gathered at its leading (bottom)
   tip, so it looks like it's falling head-first. */
/* The meteor's position is set frame-by-frame by the blogBeams script, so it
   carries no CSS animation of its own — that would fight the script. */
.beam {
  position: absolute;
  top: -9999px;               /* parked off-screen until the script places it */
  width: 2px;
  border-radius: 9999px;
  opacity: 0.9;
}

/* The burst of sparks where a beam hits the floor. */
.beam-burst { position: absolute; bottom: 0; width: 0; height: 0; }
.spark {
  position: absolute;
  left: 0; bottom: 0;
  width: 4px; height: 4px;
  border-radius: 9999px;
  animation: spark-burst 1s ease-out forwards;
}
@keyframes spark-burst {
  0%   { transform: translate(0, 0) scale(1);   opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* The faint "floor" the beams collide with. */
.beams-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(141, 113, 107, 0.4), transparent);
}

/* --- Blog post hero image (the branded illustration under the title) --- */
.post-hero-img {
  width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
  border-radius: 1rem;
  margin-bottom: 2.75rem;
  border: 1px solid rgba(141, 113, 107, 0.12);
}
html.dark .post-hero-img { border-color: rgba(255, 255, 255, 0.07); }

/* --- Thumbnail across the top of each grid card --- */
.post-card__thumb {
  display: block;
  width: calc(100% + 3.5rem);      /* bleed out to the card edges */
  margin: -1.75rem -1.75rem 1.25rem;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}
/* --- Featured card illustration fills its panel --- */
.feature-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Pricing: minimum ad-spend line under each price --- */
.price-minspend {
  margin-top: -0.35rem;
  margin-bottom: 0.85rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary);
}
.price-minspend span { font-weight: 500; color: var(--color-on-surface-variant); }
/* On the dark featured card the text needs the lighter pairing. */
.price-minspend--featured { color: var(--color-primary-fixed-dim); }
.price-minspend--featured span { color: rgba(255, 255, 255, 0.75); }

/* --- Pricing: "something else / cheaper?" call-out band --- */
.talk-band {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 2.25rem 2.5rem;
  border-radius: 1.25rem;
  background: var(--color-secondary-container);
  border: 1px solid rgba(72, 99, 102, 0.18);
}
@media (min-width: 800px) {
  .talk-band { flex-direction: row; align-items: center; justify-content: space-between; }
}
html.dark .talk-band { border-color: rgba(255, 255, 255, 0.08); }
.talk-band__text h3 { color: var(--color-on-secondary-container); }
.talk-band__text p { color: var(--color-on-secondary-container); opacity: 0.9; max-width: 44rem; }

.talk-band__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 9999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease;
}
.talk-band__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(170, 47, 22, 0.5); }
.talk-band__btn .material-symbols-outlined { font-size: 1.2rem; }