/* ==========================================================================
   LISTENERS CHOICE - STYLESHEET
   ==========================================================================
   This file controls how index.html LOOKS: colors, fonts, sizes, spacing and
   the layout on desktops, tablets and phones. The page content itself
   (words, links, images) lives in index.html.

   HOW THE FILE IS ORGANIZED (top to bottom, same order as the page):
     1.  Design tokens (colors, sizes)     <- change the look of the whole site here
     2.  Base / reset styles
     3.  Reusable pieces (icons, eyebrow labels)
     4.  Header and navigation
     5.  Buttons
     6.  Hero
     7.  Trust strip
     8.  Generic sections, Services cards
     9.  Brands
     10. Process steps
     11. Owner
     12. Insurance band
     13. Reviews
     14. FAQ
     15. Contact
     16. Footer and designer credit
     17. Mobile "Call now" button
     18. Responsive rules (tablet, then phone)
     19. Accessibility: reduced motion

   HOW CSS READS (quick primer):
     .name { property: value; }   styles every element with class="name"
     var(--ink)                   "use the color named --ink from the tokens"
     rem                          a size relative to the base text size
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   These named values are used everywhere below. Change a value here and the
   whole site updates. Colors are written as hex codes (#rrggbb).
   ========================================================================== */
:root {
  /* Main brand colors */
  --ink: #1f2a44;          /* deep indigo: headings, header text, dark bands, footer */
  --accent: #3f6b5b;       /* sage green: icons, eyebrow labels, links, insurance band */
  --accent-dark: #2f5446;  /* darker sage: link color */
  --cta: #f2b04a;          /* warm amber: call buttons ("cta" = call to action) */
  --cta-dark: #e29a2e;     /* darker amber: button hover state */

  /* Backgrounds */
  --cream: #faf6ef;        /* warm off-white: alternating section backgrounds */
  --mist: #eaf0ec;         /* pale sage: hero gradient, testimonial cards */

  /* Thin border lines */
  --line: #dfe4e0;         /* cool gray-green lines (header, cards) */
  --line-warm: #e8e0d2;    /* warm beige lines (on cream sections) */

  /* Text colors */
  --text: #232b3a;         /* normal body text */
  --muted: #566074;        /* softer gray-blue text for secondary info */

  /* Sizing */
  --radius: 16px;          /* how rounded the corners of cards are */
  --header-h: 72px;        /* height of the sticky header; used to offset anchor jumps */
}


/* ==========================================================================
   2. BASE / RESET STYLES
   Sensible defaults applied to the whole page.
   ========================================================================== */

/* Make width/height include padding and borders. This makes sizing math
   predictable and is standard practice on modern sites. */
*, *::before, *::after { box-sizing: border-box; }

/* Smooth scrolling when a menu link jumps to a section.
   scroll-padding-top stops the sticky header from covering the section title
   after a jump. */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

/* Default text styling. Body text is deliberately large (1.125rem is about
   18px) and has generous line height, because many visitors are older. */
body {
  margin: 0;
  font: 400 1.125rem/1.7 "Inter", system-ui, sans-serif;  /* weight size/line-height font */
  color: var(--text);
  background: #fff;
}

/* Images and SVGs never grow wider than the space they are in. */
img, svg { max-width: 100%; }

/* Default link color. Individual components override this where needed. */
a { color: var(--accent-dark); }

/* All headings: tight line spacing, small gap below, dark ink color. */
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; color: var(--ink); }
/* The two biggest heading levels use the serif font for an elegant look. */
h1, h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -.01em; }

/* Paragraphs get a space underneath. */
p { margin: 0 0 1em; }

/* .wrap = the centered content column used inside every section.
   It is at most 1140px wide, with at least 20px of space on each side
   (100% - 40px) on small screens. margin-inline: auto centers it. */
.wrap { width: min(1140px, 100% - 40px); margin-inline: auto; }

/* .narrow = a slimmer column, used for the FAQ so long lines stay readable. */
.narrow { max-width: 820px; }

/* "Skip to content" link: parked far off-screen until a keyboard user tabs
   to it, then it slides into view at the top-left. */
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* Keyboard focus ring: a clear dark outline shows which link or button is
   selected when someone navigates with the Tab key. Important for accessibility. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }


/* ==========================================================================
   3. REUSABLE PIECES
   ========================================================================== */

/* Line icons from the hidden icon library in index.html.
   fill: none + stroke: currentColor draws them as outlines in whatever text
   color the parent has (so setting "color" on a parent recolors the icon). */
.icon {
  width: 44px; height: 44px; flex: none;   /* flex: none = never shrink in a flex row */
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* "Eyebrow": the small uppercase green label that sits above headings. */
.eyebrow {
  margin: 0 0 .75em; font-size: .85rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}


/* ==========================================================================
   4. HEADER AND NAVIGATION
   ========================================================================== */

/* The header stays pinned to the top of the screen while scrolling
   (position: sticky). It is slightly see-through white with a soft blur
   (backdrop-filter) so content scrolling underneath looks polished.
   z-index keeps it above everything else. */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }

/* Logo on the left, menu on the right (space-between pushes them apart). */
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }

/* The logo link: ear icon next to the business name. */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 600 1.4rem "Fraunces", serif; }
.brand-mark { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Stacks the business name above the small owner line. */
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
/* The small "DARYLE CONLIN, OWNER" line: tiny, gray, spaced-out capitals.
   Deliberately much quieter than the business name. */
.brand-text small { margin-top: 3px; font: 500 .72rem "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Desktop menu: links in a horizontal row. */
.nav { display: flex; align-items: center; gap: 24px; }
.nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 1rem; }
.nav a:hover { color: var(--accent); }

/* The phone number in the menu is styled as an amber pill button. */
.nav .nav-call { background: var(--cta); color: var(--ink); padding: 10px 20px; border-radius: 999px; font-weight: 700; }
.nav .nav-call:hover { background: var(--cta-dark); color: var(--ink); }

/* Hamburger button: hidden on desktop (display: none). It is turned on for
   phones in the responsive section further down. The three <span> elements
   inside are the three horizontal bars. */
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--ink); margin: 6px 0; }


/* ==========================================================================
   5. BUTTONS
   Three variants, all pill shaped (border-radius: 999px = fully rounded):
     .btn        solid amber (the main call button)
     .btn-ghost  outlined, for secondary actions
     .btn-light  white, for use on colored backgrounds (insurance band)
   ========================================================================== */

/* A row of buttons that wraps onto a new line if there is not enough room. */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-block; padding: 16px 30px; border-radius: 999px;
  background: var(--cta); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.05rem;
  border: 2px solid var(--cta); transition: background .15s, border-color .15s, color .15s;
}
/* Dark text on amber is used (not white) because it has much better contrast. */
.btn:hover { background: var(--cta-dark); border-color: var(--cta-dark); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: var(--cream); border-color: var(--cream); }


/* ==========================================================================
   6. HERO (opening section)
   ========================================================================== */

/* Soft diagonal gradient from pale sage to cream.
   overflow: hidden stops the illustration's shadow from spilling out. */
.hero { background: linear-gradient(135deg, var(--mist) 0%, var(--cream) 100%); overflow: hidden; }

/* Two columns: text takes a little more room (1.15fr) than the picture (.85fr).
   "fr" units split the available space in proportion. */
.hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding-block: 88px; }

/* clamp(min, preferred, max) makes the headline scale smoothly with the
   screen width, but never smaller than 2.5rem or bigger than 4.25rem. */
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); }
/* The italic green words inside the headline ("that matter."). */
.hero h1 em { font-style: italic; color: var(--accent); }

/* The larger intro paragraph under the headline. */
.lead { font-size: 1.3rem; color: var(--muted); max-width: 34em; margin-bottom: 1.5em; }

/* The three short bullet points. Wrapping row, no default bullet dots. */
.hero-points { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); font-size: 1rem; }
/* Adds a green check mark before each point. "\2713" is the check mark character. */
.hero-points li::before { content: "\2713"; color: var(--accent); font-weight: 700; margin-right: 8px; }

/* The illustration column: capped at 420px wide and pushed to the right. */
.hero-art { max-width: 420px; margin-left: auto; width: 100%; }
/* A soft shadow follows the illustration's shape (drop-shadow, unlike
   box-shadow, respects the rounded arch outline). */
.hero-art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(31,42,68,.18)); }


/* ==========================================================================
   7. TRUST STRIP (dark band of four facts)
   ========================================================================== */
.trust { background: var(--ink); color: #fff; }
/* Four equal columns, text centered. */
.trust-inner { list-style: none; margin-inline: auto; padding: 28px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.trust strong { display: block; font: 600 1.4rem "Fraunces", serif; }   /* the bold fact */
.trust span { font-size: .95rem; color: #b9c3d9; }                      /* the small caption */


/* ==========================================================================
   8. GENERIC SECTIONS AND THE SERVICES CARDS
   ========================================================================== */

/* Standard vertical spacing for a content section. */
.section { padding: 96px 0; }

/* Centered intro block (eyebrow + heading + paragraph) at the top of sections. */
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
/* The last paragraph in the intro is a bit softer in color. */
.section-head p:last-child { color: var(--muted); margin-bottom: 0; }

/* Services grid: 3 equal columns on desktop (reduced on smaller screens below). */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { padding: 32px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(31,42,68,.05); transition: transform .15s, box-shadow .15s; }
/* On hover a card lifts up slightly and its shadow grows. */
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(31,42,68,.12); }
.card .icon { color: var(--accent); margin-bottom: 16px; }
.card h3 { font-size: 1.3rem; }
.card p { margin: 0; color: var(--muted); font-size: 1.02rem; }


/* ==========================================================================
   9. BRANDS SECTION
   ========================================================================== */

/* Cream background to alternate with the white sections around it. */
.brands { background: var(--cream); }

/* Three brand cards side by side. */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Each card has a thick green line across the top as a design accent. */
.brand-card { background: #fff; border-radius: var(--radius); padding: 36px 32px; border-top: 5px solid var(--accent); box-shadow: 0 2px 10px rgba(31,42,68,.06); }
/* The brand name (Phonak, Oticon, Starkey) set large in the serif font. */
.wordmark { font: 600 2rem "Fraunces", serif; margin-bottom: .1em; }
/* Short slogan under the name. */
.tagline { color: var(--accent); font-weight: 600; margin-bottom: .75em; }
.brand-card p:last-child { margin: 0; color: var(--muted); font-size: 1.02rem; }

/* "Styles we fit" heading and its four small boxes. */
.subhead { margin: 64px 0 20px; font-size: 1.5rem; text-align: center; }
.styles { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.styles li { background: #fff; border-radius: 12px; padding: 20px; border: 1px solid var(--line-warm); }
.styles strong { display: block; color: var(--ink); }
.styles span { color: var(--muted); font-size: .95rem; }

/* Small trademark disclaimer under the styles. */
.fineprint { text-align: center; font-size: .85rem; color: var(--muted); margin: 0; }


/* ==========================================================================
   10. PROCESS STEPS ("How it works")
   ========================================================================== */

/* Four equal columns. (counter-reset is leftover and not used; harmless.) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: s; }
.steps li { text-align: center; }
/* The green number circle: a 64px square with fully rounded corners = circle.
   display: grid + place-items: center centers the number inside. */
.num { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 1.6rem "Fraunces", serif; }
.steps h3 { font-size: 1.25rem; }
.steps p { color: var(--muted); font-size: 1.02rem; }


/* ==========================================================================
   11. OWNER SECTION (kept subtle on purpose)
   A compact band, quieter than the main sections, so the business name
   stays the star and Daryle is introduced without taking over.
   ========================================================================== */
.owner { background: var(--cream); padding: 56px 0; border-block: 1px solid var(--line-warm); }
/* Avatar on the left, text on the right. */
.owner-inner { display: flex; align-items: center; gap: 36px; max-width: 880px; }
/* The "DC" circle (placeholder for a photo). The box-shadow draws two rings:
   a cream gap (6px) and a thin green outer ring (8px). */
.owner-avatar {
  flex: none; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%;
  background: var(--ink); color: #fff; font: 600 2.2rem "Fraunces", serif; letter-spacing: .02em;
  box-shadow: 0 0 0 6px var(--cream), 0 0 0 8px var(--accent);
}
.owner h2 { font-size: 1.9rem; margin-bottom: .35em; }
.owner p:last-child { margin: 0; color: var(--muted); }
.owner .eyebrow { margin-bottom: .35em; }


/* ==========================================================================
   12. INSURANCE BAND (green call-out)
   ========================================================================== */
.insurance { background: var(--accent); color: #fff; }
/* Icon, text, then the button pushed to the far right. */
.insurance-inner { display: flex; align-items: center; gap: 28px; padding-block: 48px; }
.insurance .icon { width: 64px; height: 64px; }
.insurance h2 { color: #fff; font-size: 1.9rem; }
.insurance p { margin: 0; color: #e3efe9; }
/* margin-left: auto shoves the button to the right edge.
   white-space: nowrap keeps "Call to check" on one line. */
.insurance .btn { margin-left: auto; white-space: nowrap; }


/* ==========================================================================
   13. REVIEWS (testimonials)
   ========================================================================== */

/* A 6-column grid. Most cards span 2 columns (so 3 fit across a row), while
   the first two span 3 columns each (so 2 wide cards sit on the top row). */
.quotes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.quote { grid-column: span 2; margin: 0; padding: 32px; border-radius: var(--radius); background: var(--mist); display: flex; flex-direction: column; }
.quote:nth-child(1) { grid-column: span 3; }   /* 1st testimonial: wide */
.quote:nth-child(2) { grid-column: span 3; }   /* 2nd testimonial: wide */

/* The five gold stars. */
.stars { display: flex; gap: 3px; margin-bottom: 14px; color: #f2a900; }
.stars svg { width: 22px; height: 22px; }

/* The quote text. flex: 1 makes it fill space so all names line up at the bottom. */
.quote blockquote { margin: 0 0 18px; font-size: 1.1rem; color: var(--ink); flex: 1; }
/* Patient name in bold; the extra note (like "fourth pair") in lighter weight. */
.quote figcaption { font-weight: 700; color: var(--ink); }
.quote figcaption span { font-weight: 400; color: var(--muted); }


/* ==========================================================================
   14. FAQ (click-to-open questions)
   Uses the browser's built-in <details> / <summary> elements.
   ========================================================================== */
.faq { background: var(--cream); }
details { background: #fff; border-radius: 12px; margin-bottom: 12px; border: 1px solid var(--line-warm); }

/* The clickable question row. list-style: none removes the default arrow. */
summary { cursor: pointer; padding: 22px 26px; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
/* Same arrow removal, for Safari/Chrome. */
summary::-webkit-details-marker { display: none; }
/* Draw our own "+" on the right when closed... */
summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--accent); }
/* ...and a "minus" ("\2212") when the question is open. */
details[open] summary::after { content: "\2212"; }
/* The answer text that appears when opened. */
details p { padding: 0 26px 22px; margin: 0; color: var(--muted); }


/* ==========================================================================
   15. CONTACT
   ========================================================================== */

/* Two columns: details (1 part) and map (1.2 parts). */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: stretch; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; align-content: start; }
/* Each row = icon on the left, text on the right. */
.contact-list li { display: flex; gap: 18px; }
.contact-list .icon { width: 36px; height: 36px; color: var(--accent); margin-top: 4px; }
.contact-list strong { display: block; color: var(--ink); font-size: 1.05rem; }   /* label, e.g. "Phone" */
.contact-list small { display: block; color: var(--muted); font-size: .95rem; }    /* extra note */
/* The big phone number, in the serif font and without an underline. */
.big-phone { font: 600 1.9rem "Fraunces", serif; text-decoration: none; }
/* The Google map: full width of its column, at least 380px tall. */
.map { width: 100%; min-height: 380px; border: 0; border-radius: var(--radius); box-shadow: 0 6px 24px rgba(31,42,68,.15); }


/* ==========================================================================
   16. FOOTER AND DESIGNER CREDIT
   ========================================================================== */

/* Dark footer band. */
.site-footer { background: var(--ink); color: #c3cbe0; padding: 48px 0; font-size: 1rem; }

/* Thin white strip below the footer: "Website made by Northeastern IT LLC". */
.credit { background: #fff; padding: 16px 0; text-align: center; font-size: .85rem; color: var(--muted); }
.credit a { color: var(--ink); font-weight: 600; }

/* Business info on the left, copyright on the right (wraps on small screens). */
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.site-footer strong { color: #fff; font: 600 1.3rem "Fraunces", serif; }
.site-footer p { margin: .4em 0 0; }
.site-footer a { color: #fff; }
/* Owner name and license line: small and quiet. */
.site-footer .footer-owner { margin: 0; color: #8d98b5; font-size: .9rem; }
/* Copyright text sits at the bottom-right. */
.copy { color: #8d98b5; align-self: flex-end; }


/* ==========================================================================
   17. FLOATING "CALL NOW" BUTTON (phones only)
   Hidden by default; the phone rules at the bottom of this file turn it on.
   ========================================================================== */
.mobile-call { display: none; }


/* ==========================================================================
   18. RESPONSIVE RULES
   "@media (max-width: X)" means: apply these rules only when the screen is
   X pixels wide or narrower. They run in order from tablet down to phone,
   and later rules build on earlier ones.
   ========================================================================== */

/* ---- TABLET and small laptops (960px and narrower) ---- */
@media (max-width: 960px) {
  /* Hero: stack text above the illustration, less padding. */
  .hero-inner { grid-template-columns: 1fr; padding-block: 56px; }
  /* Illustration: smaller and centered under the text. */
  .hero-art { max-width: 320px; margin: 8px auto 0; }
  /* Cards and brand cards: 3 across becomes 2 across. */
  .cards, .brand-grid { grid-template-columns: 1fr 1fr; }
  /* Style boxes and steps: 4 across becomes 2 across. */
  .styles, .steps { grid-template-columns: 1fr 1fr; }
  .trust-inner { grid-template-columns: 1fr 1fr; }
  /* Testimonials: one per row. grid-column: auto cancels the "span" rules. */
  .quotes { grid-template-columns: 1fr; }
  .quote, .quote:nth-child(1), .quote:nth-child(2) { grid-column: auto; }
  /* Contact: map drops below the details. */
  .contact-grid { grid-template-columns: 1fr; }
  /* Insurance band: button wraps under the text. */
  .insurance-inner { flex-wrap: wrap; }
  .insurance .btn { margin-left: 0; }
  /* Less vertical space between sections. */
  .section { padding: 64px 0; }
}

/* ---- SMALL TABLETS and PHONES (820px and narrower): hamburger menu ---- */
@media (max-width: 820px) {
  /* Show the hamburger button. */
  .nav-toggle { display: block; }
  /* The menu becomes a dropdown panel under the header. It is hidden
     (display: none) until the script adds the "open" class. */
  .nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; background: #fff;
    padding: 8px 20px 20px; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
  /* The script adds class="open" to show the dropdown. */
  .nav.open { display: flex; }
  /* Menu links get big tappable rows with dividers. */
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav .nav-call { text-align: center; margin-top: 12px; border-bottom: 0; }
}

/* ---- PHONES (600px and narrower) ---- */
@media (max-width: 600px) {
  /* Slightly smaller base text. */
  body { font-size: 1.0625rem; }
  /* Owner section: stack the avatar above the text, centered. */
  .owner-inner { flex-direction: column; text-align: center; gap: 20px; }
  /* Extra space under the designer credit so the floating Call button
     never covers it when the visitor reaches the bottom of the page. */
  .credit { padding-bottom: 88px; }
  /* Everything becomes a single column. */
  .cards, .brand-grid, .styles, .steps { grid-template-columns: 1fr; }
  /* Turn on the floating Call Now button: pinned 16px from the bottom and
     sides of the screen (position: fixed) and above other content (z-index). */
  .mobile-call {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30;
    padding: 16px; border-radius: 999px; background: var(--cta); color: var(--ink);
    font-weight: 700; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  }
  /* Phone icon inside that button. */
  .mobile-call svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}


/* ==========================================================================
   19. ACCESSIBILITY: REDUCED MOTION
   Some people set their device to avoid animation (it can cause dizziness).
   For them, turn off smooth scrolling and the card hover lift.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { transition: none; }
}