/* ==========================================================================
   MGEP — Mehmood Gas Engineers & Plumbers
   Bradford's honest boiler engineers.
   ========================================================================== */

@layer reset, tokens, base, components, utilities;

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.1; font-weight: 650; }
  p { text-wrap: pretty; }
  button { background: none; border: none; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }
}

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    /* Palette — dark luxury trade */
    --surface-0: oklch(11% 0.015 253);           /* deepest navy void */
    --surface-1: oklch(15% 0.02 253);            /* section alt */
    --surface-2: oklch(20% 0.025 253);           /* cards */
    --surface-3: oklch(26% 0.028 253);           /* elevated */
    --surface-glass: oklch(22% 0.025 253 / 0.6);

    --brand: oklch(32% 0.10 253);                /* logo navy */
    --accent: oklch(68% 0.17 140);               /* flame green */
    --accent-hi: oklch(78% 0.19 135);            /* green hi */
    --accent-lo: oklch(48% 0.14 145);            /* green lo */
    --accent-glow: oklch(78% 0.19 135 / 0.35);
    --accent-soft: color-mix(in oklch, var(--accent) 10%, transparent);

    --danger: oklch(62% 0.22 25);                /* emergency red */
    --danger-soft: oklch(32% 0.14 25 / 0.35);

    --text-hi: oklch(96% 0.006 80);              /* warm cream (not pure white) */
    --text-md: oklch(78% 0.008 80);
    --text-lo: oklch(58% 0.01 80);
    --text-muted: oklch(44% 0.012 253);

    --border-ghost: color-mix(in oklch, var(--text-hi) 12%, transparent);
    --border-accent: color-mix(in oklch, var(--accent) 40%, transparent);

    /* Type scale — fluid */
    --t-xs:      clamp(0.75rem, 0.4vw + 0.65rem, 0.85rem);
    --t-sm:      clamp(0.875rem, 0.4vw + 0.78rem, 0.95rem);
    --t-base:    clamp(1rem, 0.4vw + 0.9rem, 1.075rem);
    --t-lg:      clamp(1.125rem, 0.6vw + 1rem, 1.25rem);
    --t-xl:      clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
    --t-2xl:     clamp(1.5rem, 1.2vw + 1rem, 1.875rem);
    --t-3xl:     clamp(1.875rem, 2vw + 1rem, 2.5rem);
    --t-4xl:     clamp(2.25rem, 3vw + 1rem, 3.25rem);
    --t-5xl:     clamp(2.75rem, 4.5vw + 1rem, 4.25rem);
    --t-6xl:     clamp(3.5rem, 7vw + 1rem, 6rem);

    /* Spacing — 8pt grid */
    --s-1: 0.5rem;  --s-2: 1rem;  --s-3: 1.5rem;  --s-4: 2rem;
    --s-5: 3rem;    --s-6: 4rem;  --s-7: 6rem;    --s-8: 8rem;

    /* Radii */
    --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in: cubic-bezier(0.55, 0.05, 0.68, 0.19);
    --dur-fast: 150ms; --dur: 300ms; --dur-slow: 600ms; --dur-epic: 900ms;

    /* Shadows (glow, not drop) */
    --glow-sm: 0 0 12px -2px var(--accent-glow);
    --glow-md: 0 0 24px -4px var(--accent-glow);
    --glow-lg: 0 0 48px -8px var(--accent-glow), 0 0 80px -20px var(--accent-glow);
    --shadow-card: 0 12px 32px -12px oklch(0% 0 0 / 0.5);

    /* Layout */
    --header-h: 72px;
    --alert-h: 48px;
    --max-w: 1200px;

    /* Fonts */
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  }
}

/* ---------- BASE ---------- */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--t-base);
    color: var(--text-hi);
    background: var(--surface-0);
    overflow-x: hidden;
    min-height: 100vh;
  }

  /* Ambient noise/grain over surface for texture */
  body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(ellipse 80% 50% at 80% -10%, var(--accent-soft), transparent 60%),
      radial-gradient(ellipse 60% 40% at 10% 110%, var(--accent-soft), transparent 60%);
    z-index: -1;
  }

  h1 { font-family: var(--font-display); font-size: var(--t-5xl); letter-spacing: -0.025em; }
  h2 { font-family: var(--font-display); font-size: var(--t-4xl); letter-spacing: -0.02em; }
  h3 { font-family: var(--font-display); font-size: var(--t-2xl); letter-spacing: -0.015em; }
  h4 { font-family: var(--font-display); font-size: var(--t-xl); letter-spacing: -0.01em; }

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

  ::selection { background: var(--accent); color: oklch(15% 0.02 253); }

  em { font-style: normal; color: var(--accent); }

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

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* ---------- Eyebrow / section head ---------- */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    display: inline-block;
    margin-bottom: var(--s-2);
  }
  .eyebrow--warning { color: var(--danger); }

  .section-head {
    max-width: 680px;
    margin-bottom: var(--s-5);
  }
  .section-title { margin-bottom: var(--s-2); }
  .section-lede {
    color: var(--text-md);
    font-size: var(--t-lg);
    line-height: 1.5;
  }

  section { padding-block: clamp(var(--s-6), 8vw, var(--s-8)); }

  /* ---------- Alert bar ---------- */
  .alert-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: linear-gradient(90deg, var(--danger-soft), transparent 60%, var(--danger-soft));
    border-bottom: 1px solid color-mix(in oklch, var(--danger) 40%, transparent);
    transform-origin: top;
    transition: transform var(--dur) var(--ease), opacity var(--dur);
  }
  .alert-bar.is-hidden { transform: scaleY(0); opacity: 0; pointer-events: none; }

  .alert-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 0.7rem 1rem;
    font-size: var(--t-sm);
    color: var(--text-hi);
    width: min(100% - 1rem, var(--max-w));
    margin-inline: auto;
  }

  .alert-bar__dot {
    width: 8px; height: 8px;
    background: var(--danger);
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-dot 1.5s ease-in-out infinite;
  }

  .alert-bar__link {
    color: var(--danger);
    font-weight: 700;
    font-family: var(--font-mono);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .alert-bar__close {
    margin-left: auto;
    color: var(--text-md);
    padding: 4px;
    transition: color var(--dur-fast) var(--ease);
  }
  .alert-bar__close:hover { color: var(--text-hi); }

  @keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 var(--danger); opacity: 1; }
    50%      { box-shadow: 0 0 0 8px transparent; opacity: 0.7; }
  }

  /* ---------- Header ---------- */
  .header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    background: color-mix(in oklch, var(--surface-0) 80%, transparent);
    transition: background var(--dur) var(--ease), border-color var(--dur);
    border-bottom: 1px solid transparent;
  }
  .header.is-scrolled {
    background: color-mix(in oklch, var(--surface-1) 92%, transparent);
    border-bottom-color: var(--border-ghost);
  }

  .header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0.75rem 1rem;
    width: min(100% - 1rem, var(--max-w));
    margin-inline: auto;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
  }
  .logo img { width: 36px; height: 36px; }
  .logo__text { display: flex; flex-direction: column; line-height: 1; }
  .logo__mgep {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: var(--text-hi);
  }
  .logo__full {
    font-size: 0.7rem;
    color: var(--text-md);
    letter-spacing: 0.02em;
    margin-top: 2px;
  }

  .nav {
    display: flex;
    gap: var(--s-3);
    margin-left: var(--s-4);
  }
  .nav__link {
    font-size: var(--t-sm);
    color: var(--text-md);
    font-weight: 500;
    position: relative;
    padding: 6px 0;
    transition: color var(--dur-fast) var(--ease);
  }
  .nav__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .nav__link:hover { color: var(--text-hi); }
  .nav__link:hover::after { transform: scaleX(1); }

  .header__status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-md);
  }
  .status-dot {
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 0 var(--accent);
    animation: pulse-status 2.4s ease-in-out infinite;
  }
  @keyframes pulse-status {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 70%, transparent); }
    50%      { box-shadow: 0 0 0 10px transparent; }
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--r-full);
    font-weight: 600;
    font-size: var(--t-sm);
    letter-spacing: 0.01em;
    transition: transform var(--dur-fast) var(--ease),
                background var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                color var(--dur) var(--ease);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
  }
  .btn--lg { padding: 1rem 1.75rem; font-size: var(--t-base); }
  .btn--block { width: 100%; }

  .btn--primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-lo));
    color: oklch(12% 0.02 253);
    box-shadow: 0 0 0 0 var(--accent-glow);
  }
  .btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-hi), var(--accent));
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    border-radius: inherit;
  }
  .btn--primary > * { position: relative; z-index: 1; }
  .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-md), 0 0 32px -8px var(--accent-glow);
  }
  .btn--primary:hover::before { opacity: 1; }
  .btn--primary:active { transform: scale(0.97); }

  .btn--ghost {
    background: transparent;
    color: var(--text-hi);
    border: 1px solid var(--border-ghost);
  }
  .btn--ghost:hover {
    background: var(--surface-2);
    border-color: var(--border-accent);
  }

  .btn--phone {
    background: transparent;
    color: var(--text-hi);
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-accent);
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .btn--phone:hover {
    background: var(--accent-soft);
    box-shadow: var(--glow-sm);
  }
  .btn--phone__num { font-feature-settings: 'tnum' 1; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    padding-block: clamp(var(--s-5), 10vh, var(--s-7)) var(--s-7);
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: radial-gradient(ellipse 60% 70% at 50% 100%, var(--accent-soft), transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  .hero__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--s-6);
    align-items: center;
    width: min(100% - 2rem, var(--max-w));
    margin-inline: auto;
    position: relative;
    z-index: 1;
  }

  .hero__title {
    font-size: clamp(2.5rem, 5.5vw + 1rem, 5rem);
    line-height: 0.98;
    letter-spacing: -0.028em;
    font-weight: 680;
    margin-bottom: var(--s-3);
  }

  .hero__lede {
    font-size: var(--t-lg);
    color: var(--text-md);
    max-width: 52ch;
    margin-bottom: var(--s-4);
    line-height: 1.55;
  }

  .hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
  }

  .hero__proof {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border-ghost);
  }
  .hero__proof-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .proof-num {
    font-family: var(--font-mono);
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--text-hi);
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .proof-num.gas-safe { color: var(--accent); }
  .proof-label {
    font-size: var(--t-xs);
    color: var(--text-lo);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Flame 3D signature */
  .hero__visual {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero__flame {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .flame-svg {
    width: 70%;
    height: auto;
    filter: drop-shadow(0 0 30px var(--accent-glow)) drop-shadow(0 20px 40px oklch(0% 0 0 / 0.5));
    animation: flame-float 6s ease-in-out infinite;
    will-change: transform;
  }
  .flame-path, .flame-inner { transform-origin: center bottom; }
  .flame-inner { animation: flame-flicker 2.4s ease-in-out infinite; }
  .flame-ambient {
    position: absolute;
    inset: 20% 20% 10% 20%;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    filter: blur(40px);
    animation: flame-pulse 4s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
  }

  @keyframes flame-float {
    0%, 100% { transform: translateY(0) rotate(-0.5deg); }
    50%      { transform: translateY(-12px) rotate(0.5deg); }
  }
  @keyframes flame-flicker {
    0%, 100% { transform: scaleY(1) scaleX(1); opacity: 0.6; }
    33%      { transform: scaleY(0.96) scaleX(1.03); opacity: 0.8; }
    66%      { transform: scaleY(1.04) scaleX(0.97); opacity: 0.55; }
  }
  @keyframes flame-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 0.8; transform: scale(1.1); }
  }

  /* ---------- Trust strip ---------- */
  .trust-strip {
    background: var(--surface-1);
    padding-block: var(--s-4);
  }
  .trust-strip__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    justify-content: center;
    align-items: center;
    width: min(100% - 2rem, var(--max-w));
    margin-inline: auto;
  }
  .trust-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--t-sm);
    color: var(--text-md);
  }
  .trust-check { color: var(--accent); flex-shrink: 0; }
  .stars {
    color: var(--accent);
    font-size: var(--t-base);
    letter-spacing: 0.1em;
  }

  /* ---------- Service cards ---------- */
  .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-3);
  }

  .service-card {
    position: relative;
    padding: var(--s-4);
    background: var(--surface-1);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    isolation: isolate;
    transition: transform var(--dur) var(--ease), background var(--dur);
    overflow: hidden;
  }
  .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    background: conic-gradient(
      from var(--angle, 0deg),
      transparent 0%, transparent 40%,
      color-mix(in oklch, var(--accent) 60%, transparent) 50%,
      transparent 60%, transparent 100%
    );
    border-radius: inherit;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    z-index: -1;
    animation: conic-spin 6s linear infinite;
  }
  .service-card:hover::before { opacity: 1; }
  @keyframes conic-spin {
    to { --angle: 360deg; }
  }
  @property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  .service-card:hover {
    transform: translateY(-4px);
    background: var(--surface-2);
  }

  .service-card__tag {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
  }

  .service-card__icon {
    color: var(--accent);
    margin-bottom: var(--s-1);
  }
  .service-card__title { margin-bottom: 0; }
  .service-card__body { color: var(--text-md); font-size: var(--t-sm); line-height: 1.6; flex: 1; }
  .service-card__body strong { color: var(--text-hi); }
  .service-card__price {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    color: var(--text-md);
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--border-ghost);
    letter-spacing: 0.02em;
  }

  .service-card--highlight {
    background: linear-gradient(
      140deg,
      color-mix(in oklch, var(--accent) 8%, var(--surface-1)),
      var(--surface-1) 70%
    );
  }
  .service-card--highlight .service-card__price { color: var(--accent); }

  /* ---------- Gas safety steps ---------- */
  .gas-safety {
    background: var(--surface-1);
    border-top: 1px solid var(--border-ghost);
    border-bottom: 1px solid var(--border-ghost);
  }

  .safety-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-5);
  }
  .safety-step {
    background: var(--surface-2);
    border-radius: var(--r-lg);
    padding: var(--s-4);
    position: relative;
    overflow: hidden;
  }
  .safety-step__num {
    font-family: var(--font-mono);
    font-size: var(--t-3xl);
    color: var(--danger);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    display: block;
    margin-bottom: var(--s-2);
  }
  .safety-step h3 { margin-bottom: var(--s-1); }
  .safety-step p { color: var(--text-md); font-size: var(--t-sm); line-height: 1.6; }

  .safety-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    text-align: center;
    background: var(--surface-0);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    border: 1px solid var(--border-ghost);
  }
  .safety-cta > p { color: var(--text-md); font-size: var(--t-sm); }
  .safety-emergency {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: var(--s-2) var(--s-4);
    background: linear-gradient(135deg, var(--danger), oklch(52% 0.22 20));
    color: var(--text-hi);
    border-radius: var(--r-md);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur);
  }
  .safety-emergency:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -12px oklch(55% 0.22 25);
  }
  .safety-emergency__label {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.8;
  }
  .safety-emergency__num {
    font-family: var(--font-mono);
    font-size: var(--t-2xl);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .safety-note a { color: var(--accent); font-family: var(--font-mono); }

  /* ---------- Why grid ---------- */
  .why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-3);
  }
  .why-card {
    padding: var(--s-4);
    background: var(--surface-1);
    border-radius: var(--r-lg);
    transition: transform var(--dur) var(--ease), background var(--dur);
  }
  .why-card:hover {
    transform: translateY(-4px);
    background: var(--surface-2);
  }
  .why-num {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.15em;
    color: var(--accent);
    display: block;
    margin-bottom: var(--s-2);
  }
  .why-card h3 { margin-bottom: var(--s-1); font-size: var(--t-xl); }
  .why-card p { color: var(--text-md); font-size: var(--t-sm); line-height: 1.6; }
  .why-card em { color: var(--accent); font-style: normal; }

  /* ---------- Reviews (stacked deck) ---------- */
  .reviews-rating {
    font-family: var(--font-mono);
    color: var(--accent);
    display: inline-block;
    margin-right: 0.2em;
  }
  .reviews-star { font-family: var(--font-body); font-size: 0.8em; }

  .review-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-3);
  }

  .review-card {
    position: relative;
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    transition: transform var(--dur) var(--ease), background var(--dur);
    transform-style: preserve-3d;
    border: 1px solid var(--border-ghost);
  }
  .review-card:hover {
    background: color-mix(in oklch, var(--surface-2) 90%, var(--accent) 3%);
    border-color: var(--border-accent);
  }

  .review-card__stars {
    color: var(--accent);
    font-size: var(--t-lg);
    letter-spacing: 0.1em;
  }
  .review-card__quote {
    color: var(--text-hi);
    font-size: var(--t-base);
    line-height: 1.6;
    font-style: normal;
    font-family: var(--font-display);
    font-weight: 450;
    letter-spacing: -0.005em;
    flex: 1;
  }
  .review-card__quote strong { color: var(--accent); font-weight: 600; }
  .review-card__meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--text-lo);
    letter-spacing: 0.05em;
    padding-top: var(--s-2);
    border-top: 1px solid var(--border-ghost);
  }

  /* ---------- Landlord ---------- */
  .landlord { background: var(--surface-1); }

  .landlord__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-5);
    align-items: center;
  }
  .landlord__lede {
    color: var(--text-md);
    font-size: var(--t-lg);
    line-height: 1.55;
    margin-bottom: var(--s-3);
  }
  .landlord__benefits {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: var(--s-4);
  }
  .landlord__benefits li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-md);
    font-size: var(--t-sm);
  }
  .landlord__benefits svg { color: var(--accent); flex-shrink: 0; }

  .landlord__stat {
    background: var(--surface-2);
    border-radius: var(--r-xl);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-accent);
  }
  .landlord__stat::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: conic-gradient(from 0deg, transparent, var(--accent-soft), transparent);
    z-index: -1;
  }
  .stat-num {
    font-family: var(--font-mono);
    font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
    color: var(--accent);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .stat-num--sm { font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); }
  .stat-per { font-size: 0.5em; color: var(--text-md); }
  .stat-label {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-md);
  }
  .stat-divider {
    height: 1px;
    background: var(--border-ghost);
    margin-block: var(--s-2);
  }

  /* ---------- Postcode grid ---------- */
  .postcode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.75rem;
  }
  .postcode {
    padding: 1rem 0.5rem;
    background: var(--surface-1);
    border-radius: var(--r-md);
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    text-align: center;
    color: var(--text-md);
    letter-spacing: 0.02em;
    transition: all var(--dur-fast) var(--ease);
    border: 1px solid transparent;
  }
  .postcode:hover {
    background: var(--surface-2);
    color: var(--accent);
    border-color: var(--border-accent);
  }

  /* ---------- FAQ ---------- */
  .faq-list {
    max-width: 780px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .faq-item {
    background: var(--surface-1);
    border-radius: var(--r-md);
    padding: 0;
    transition: background var(--dur);
  }
  .faq-item[open] { background: var(--surface-2); }

  .faq-item summary {
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    font-size: var(--t-base);
    color: var(--text-hi);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  .faq-item summary::after {
    content: '+';
    font-family: var(--font-mono);
    font-size: var(--t-xl);
    color: var(--accent);
    transition: transform var(--dur) var(--ease);
    flex-shrink: 0;
  }
  .faq-item[open] summary::after { transform: rotate(45deg); }

  .faq-item p {
    padding: 0 1.5rem 1.5rem;
    color: var(--text-md);
    font-size: var(--t-sm);
    line-height: 1.6;
  }
  .faq-item a { color: var(--accent); }

  /* ---------- Contact ---------- */
  .contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    align-items: start;
  }
  .contact__lede {
    color: var(--text-md);
    font-size: var(--t-lg);
    margin-bottom: var(--s-4);
  }
  .contact__methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .contact-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface-1);
    border-radius: var(--r-md);
    transition: all var(--dur) var(--ease);
  }
  .contact-method:not(.contact-method--static):hover {
    background: var(--surface-2);
    transform: translateX(4px);
  }
  .contact-method svg { color: var(--accent); flex-shrink: 0; }
  .contact-method__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-lo);
    margin-bottom: 2px;
  }
  .contact-method__value {
    display: block;
    font-weight: 600;
    color: var(--text-hi);
  }

  .contact__form {
    background: var(--surface-1);
    border-radius: var(--r-xl);
    padding: var(--s-5);
    border: 1px solid var(--border-ghost);
  }
  .contact__form-title { font-size: var(--t-2xl); margin-bottom: 0.25rem; }
  .contact__form-sub {
    color: var(--text-md);
    font-size: var(--t-sm);
    margin-bottom: var(--s-3);
  }

  .field {
    margin-bottom: 1rem;
    position: relative;
  }
  .field label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-lo);
    margin-bottom: 0.4rem;
  }
  .muted { color: var(--text-lo); text-transform: none; letter-spacing: 0; font-weight: 400; }
  .field input, .field select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface-0);
    border: 1px solid var(--border-ghost);
    border-radius: var(--r-md);
    color: var(--text-hi);
    font-size: var(--t-base);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur);
  }
  .field input:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .field input::placeholder { color: var(--text-lo); }

  .contact__form-note {
    margin-top: 1rem;
    font-size: var(--t-xs);
    color: var(--text-lo);
    text-align: center;
  }

  /* ---------- Footer ---------- */
  .footer {
    background: var(--surface-1);
    border-top: 1px solid var(--border-ghost);
    padding-block: var(--s-5) var(--s-3);
    margin-top: var(--s-6);
  }
  .footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--s-4);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--border-ghost);
  }
  .footer__brand p {
    color: var(--text-md);
    font-size: var(--t-sm);
    margin-top: var(--s-2);
    line-height: 1.6;
  }
  .footer__col h4 {
    font-size: var(--t-sm);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-lo);
    margin-bottom: 1rem;
    font-weight: 500;
  }
  .footer__col ul { display: flex; flex-direction: column; gap: 0.5rem; }
  .footer__col li, .footer__col a {
    color: var(--text-md);
    font-size: var(--t-sm);
    transition: color var(--dur-fast) var(--ease);
  }
  .footer__col a:hover { color: var(--accent); }

  .footer__base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--s-3);
    font-size: var(--t-xs);
    color: var(--text-lo);
    flex-wrap: wrap;
    gap: 1rem;
  }
  .footer__tweb a {
    color: var(--accent);
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
  }

  /* ---------- Floating mobile call button ---------- */
  .fab-call {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 40;
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-lo));
    color: oklch(12% 0.02 253);
    border-radius: var(--r-full);
    font-weight: 700;
    font-size: var(--t-sm);
    box-shadow: 0 12px 32px -8px var(--accent-glow);
    animation: fab-pulse 2.5s ease-in-out infinite;
  }
  .fab-call.is-pulsed {
    animation: fab-pulse-big 600ms var(--ease) 2;
  }
  @keyframes fab-pulse {
    0%, 100% { box-shadow: 0 12px 32px -8px var(--accent-glow), 0 0 0 0 var(--accent-glow); }
    50%      { box-shadow: 0 12px 32px -8px var(--accent-glow), 0 0 0 12px transparent; }
  }
  @keyframes fab-pulse-big {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
  }

  /* ---------- Reveal utility — only applied when JS is enabled ---------- */
  .js-enabled [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .js-enabled [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   UTILITIES / RESPONSIVE
   ========================================================================== */
@layer utilities {

  @media (max-width: 960px) {
    .nav { display: none; }
    .header__status { display: none; }
    .logo__full { display: none; }
    .btn--phone__num { display: none; }
    .btn--phone { padding: 0.6rem; }

    .hero__grid { grid-template-columns: 1fr; gap: var(--s-4); }
    .hero__visual { aspect-ratio: 1 / 1; max-height: 380px; }
    .hero__proof { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }

    .landlord__grid { grid-template-columns: 1fr; }
    .contact__grid { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
    .fab-call { display: inline-flex; }
  }

  @media (max-width: 520px) {
    .alert-bar__inner { font-size: var(--t-xs); padding: 0.6rem 0.75rem; }
    .hero__title { font-size: clamp(2rem, 10vw, 3rem); }
    .hero__ctas { flex-direction: column; align-items: stretch; }
    .hero__ctas .btn { width: 100%; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__base { flex-direction: column; text-align: center; }
    .contact__form { padding: var(--s-3); }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .flame-svg, .flame-inner, .flame-ambient { animation: none; }
    [data-reveal] { opacity: 1; transform: none; }
  }

  /* Print */
  @media print {
    .alert-bar, .fab-call, .header__status, .hero__visual { display: none; }
  }
}