/* ==========================================================================
   Matt MacIsaac Music: shared styles for every page.

   One design for the whole site:
   - a deep, slightly grey ocean blue frames every page (header, footer, dark bands)
   - every page opens with a pale blue band, a small label, the main heading
     and a short black line under it
   - content sits in one 1200px column with the same side margins everywhere

   The palette: five main colours and four supporting ones.
     Main:        ocean, black, white, light blue, light orange (buy button only)
     Supporting:  mid blue (links and small labels), pale blue (sections),
                  grey (secondary text), light grey (lines; quieter text on dark)
   The hover and divider shades are slightly lighter versions of these.

   Change a colour or size here and it changes on every page.
   ========================================================================== */

:root {
  /* Colour: main. Warm neutrals with the dark frame; no accent colour, so photos carry the colour */
  --ocean: #161F25;           /* deep ocean blue, softened with grey: header, footer, dark bands, main buttons */
  --ink: #1C1A18;             /* soft warm black: body text and links */
  --title: #182230;           /* dark blue-black: headings, big numbers, prices and the line under page titles */
  --paper: #FFFFFF;           /* white: page, cards, form fields */
  --tint: #F5F2ED;            /* warm off-white: page openings and alternate sections */
  --muted: #5C5853;           /* warm grey: small labels, secondary text, form field borders */

  /* Colour: supporting */
  --on-dark: #FFFFFF;         /* white: text on dark bands */
  --sky: #D9D3CA;             /* warm stone: accents on dark bands, current menu item, step numbers, quote marks */
  --line: #E4DFD8;            /* light warm grey: card borders and dividers */
  --on-dark-muted: #DDD8D0;   /* quieter text on dark bands */
  --link: #1C1A18;            /* links use the text colour, underlined */
  --buy: #161F25;             /* the main buy button uses the dark frame colour, with white text */

  /* Hover and divider shades of the colours above */
  --ocean-hover: #27353C;
  --ocean-line: #313D44;      /* dividers on the dark bands */
  --buy-hover: #27353C;

  /* Only seen when a form can't be sent */
  --error: #A3352B;

  /* Type */
  --display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --body: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Layout: the same on every page */
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(32px, 4vw, 48px);   /* space above and below each section: 48px on a computer, 32px on a phone */
  --radius: 12px;

  color-scheme: light;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
p { margin: 0; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--sky); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 20;
  background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 6px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* ---------- Header and menu ---------- */

.site-header { background: var(--ocean); color: var(--on-dark); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 24px; min-height: 72px; padding-block: 10px;
}
.brand { color: var(--on-dark); text-decoration: none; padding-block: 4px; }
.brand:hover { color: var(--on-dark); }
.brand-name { font-family: var(--display); font-size: 25px; font-weight: 600; line-height: 1.1; }
.site-nav { display: flex; flex-wrap: wrap; margin-right: -10px; }
.site-nav a {
  color: var(--on-dark); text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 10px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 6px;
}
.site-nav a:hover { background: rgba(153, 198, 239, 0.16); color: var(--on-dark); }
.site-nav a[aria-current="page"] {
  color: var(--sky); text-decoration: underline; text-decoration-color: var(--sky);
  text-decoration-thickness: 3px; text-underline-offset: 8px;
}
/* Phones: the five menu items sit on one line under the name */
@media (max-width: 560px) {
  .site-header .wrap { justify-content: center; text-align: center; padding-inline: 12px; }
  .site-nav { margin: 0; justify-content: center; }
  .site-nav a { padding: 8px 6px; font-size: 13.5px; }
}
@media (max-width: 389px) {
  .site-nav a { padding: 8px 4px; font-size: 13px; }
}

/* ---------- Type ---------- */

h1, h2, h3 { font-family: var(--display); color: var(--title); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(42px, 6vw, 66px); line-height: 1.04; font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: clamp(31px, 3.6vw, 43px); line-height: 1.1; font-weight: 500; }
h3 { font-size: 24px; line-height: 1.2; font-weight: 600; }

/* Small capitals label above headings, with a short dash */
.eyebrow { display: block; font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; display: inline-block; width: 28px; height: 3px; margin-right: 12px; border-radius: 2px; background: currentColor; vertical-align: 0.3em; }
.eyebrow.plain::before { display: none; }
/* Section labels: the only heading on some sections, so a larger size of the small label */
.section-label { font-size: 16px; line-height: 1.3; letter-spacing: 0.18em; }
.section-label::before { width: 36px; margin-right: 14px; }
@media (max-width: 640px) { .section-label { font-size: 14px; } .section-label::before { width: 30px; margin-right: 12px; } }

.lead { font-size: clamp(18px, 2vw, 20px); line-height: 1.6; color: var(--ink); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: 15px; color: var(--muted); }

/* ---------- Sections ---------- */

.section { padding-block: var(--section); }
.section-tint { background: var(--tint); }
.section-tight { padding-block: var(--section); }
/* Even spacing: when a line of text is the very first or last thing in a section, site.js marks it
   and the extra space above its capitals or below its baseline is trimmed. Every section then has the
   same visible space at top and bottom, whether it starts or ends with text, a picture or a card. */
.edge-top { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.edge-bottom { text-box-trim: trim-end; text-box-edge: cap alphabetic; }
.edge-top.edge-bottom { text-box-trim: trim-both; }
.section-rule { border-top: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-lg { display: flex; flex-direction: column; gap: var(--section); }   /* same as the space at the top and bottom of a section */
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.section-head p { color: var(--muted); }
/* A heading block's first and last lines are trimmed like the section edges (see .edge-top), so the space
   from a section's top to its heading equals the space from the heading to the cards or text below it. */
.section-head > :first-child { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.section-head > :last-child { text-box-trim: trim-end; text-box-edge: cap alphabetic; }
.section-head > :only-child { text-box-trim: trim-both; }
.split { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Dark bands: same ocean blue as the header and footer */
.on-dark { background: var(--ocean); color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--on-dark); }
.on-dark .eyebrow { color: var(--sky); }
.on-dark .lead { color: var(--on-dark); }
.on-dark .muted, .on-dark .small, .on-dark .section-head p { color: var(--on-dark-muted); }
.on-dark a:not(.btn) { color: var(--on-dark); text-decoration-color: var(--sky); }
.on-dark a:not(.btn):hover { color: var(--sky); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 22px; border-radius: 8px; border: 2px solid transparent;
  font-family: var(--body); font-size: 16px; font-weight: 700; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--ocean); border-color: var(--ocean); color: var(--on-dark); }
.btn-primary:hover { background: var(--ocean-hover); border-color: var(--ocean-hover); color: var(--on-dark); }
.btn-outline { background: var(--paper); color: var(--ocean); border-color: var(--ocean); }
.btn-outline:hover { background: var(--tint); color: var(--ocean); }
.btn-light { background: var(--on-dark); border-color: var(--on-dark); color: var(--ocean); }
.btn-light:hover { background: var(--sky); border-color: var(--sky); color: var(--ocean); }
.btn-ghost-light { background: transparent; color: var(--on-dark); border-color: rgba(255, 255, 255, 0.6); }
.btn-ghost-light:hover { background: rgba(153, 198, 239, 0.16); color: var(--on-dark); }
.btn:disabled { opacity: 0.7; cursor: wait; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-block { width: 100%; }
.btn .arrow { display: inline-block; }

/* Payhip buy buttons: the print book is the light orange call to action; the PDF
   button is the usual outlined button. Payhip's script may add its own inline
   styles, so ours are made firm. */
a.btn.payhip-buy-button {
  display: inline-flex !important; min-height: 50px !important; padding: 12px 22px !important;
  font-family: var(--body) !important; font-size: 16px !important; font-weight: 700 !important;
  line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important;
  border-radius: 8px !important; border: 2px solid var(--ocean) !important; box-shadow: none !important; text-shadow: none !important;
}
a.btn-primary.payhip-buy-button { background: var(--buy) !important; border-color: var(--buy-hover) !important; color: var(--on-dark) !important; }
a.btn-primary.payhip-buy-button:hover { background: var(--buy-hover) !important; border-color: var(--buy-hover) !important; color: var(--on-dark) !important; }
a.btn-outline.payhip-buy-button { background: var(--paper) !important; color: var(--ocean) !important; }
a.btn-outline.payhip-buy-button:hover { background: var(--tint) !important; }

/* ---------- Page opening (the same on every page) ---------- */

.hero { background: var(--tint); padding-block: var(--section); }
/* The heading starts at the same height on every page; the picture beside it is centred */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
/* The black line under the main heading. site.js sizes it to the heading's last line. */
.hero-copy h1::after {
  content: ""; display: block; width: var(--rule-w, 160px); max-width: 100%; height: 3px;
  margin-top: 20px; margin-left: var(--rule-x, 0px); border-radius: 2px; background: var(--title);
}
/* A label that sits inside the main heading (so search engines read it as part of the heading) */
.hero-copy h1 .eyebrow { display: flex; margin-bottom: 22px; line-height: 1.6; letter-spacing: 0.2em; }
.hero-sub { font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: -8px; }
.hero-media { min-width: 0; align-self: center; }

/* Framed stage photo: the photo's black background disappears into the ocean-blue frame */
.photo-frame { background: var(--ocean); border-radius: var(--radius); overflow: hidden; }
/* Studio portraits: shown as they are, cropped from the top so the face is never cut off */
.photo-frame img { width: 100%; max-height: 480px; object-fit: cover; object-position: 50% 10%; }
@media (max-width: 860px) { .photo-frame img { max-height: 340px; } }

/* Book cover */
.cover-img { width: 100%; border-radius: 3px; box-shadow: 0 30px 60px -22px rgba(22, 31, 37, 0.5), 0 4px 12px rgba(22, 31, 37, 0.18); }

/* ---------- Cards ---------- */

.card-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card-grid-3, .card-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.card.featured { border: 2px solid var(--ocean); }
.card p { color: var(--muted); }
.card .eyebrow::before { display: none; }
a.card { color: var(--ink); text-decoration: none; transition: border-color 0.15s ease; }
a.card:hover { border-color: var(--ocean); color: var(--ink); }
.card .go { margin-top: auto; font-weight: 700; color: var(--link); font-size: 15px; }

/* Ticked lists */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; line-height: 1.5; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 0.38em; width: 13px; height: 7px;
  border-left: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(-45deg);
}

/* Big numbers strip (book) */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; }
@media (max-width: 720px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts .big { display: block; font-family: var(--display); font-size: clamp(34px, 4vw, 44px); line-height: 1.05; color: var(--title); }
.facts .small { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.facts.left { text-align: left; grid-template-columns: repeat(3, max-content); gap: 20px 44px; }

/* Numbered steps: light blue circles */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.steps li::before {
  content: counter(step); font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--title);
  background: var(--sky); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.steps strong { font-size: 18px; color: var(--ink); }
.steps p { color: var(--muted); }

/* Questions and answers (open and close) */
.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; font-family: var(--display); font-size: 21px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--body); font-size: 24px; line-height: 1; color: var(--ink); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 20px; color: var(--muted); max-width: 68ch; }

/* Review quotes (home and About): three across, stacked on smaller screens */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .quotes { grid-template-columns: minmax(0, 1fr); } }
.quote { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.quote::before { content: "\201C"; font-family: var(--display); font-size: 72px; line-height: 0.5; height: 26px; color: var(--sky); }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--display); font-size: 23px; line-height: 1.35; color: var(--ink); }
.quote figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted); }
.quote figcaption a { font-weight: 700; color: var(--link); text-decoration: none; }
.quote figcaption a:hover { text-decoration: underline; }
.quote figcaption .who { font-weight: 700; color: var(--link); }

/* A large review quote on a dark band (book and About pages) */
.pull-quote { margin: 0 auto; max-width: 900px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pull-quote::before { content: "\201C"; font-family: var(--display); font-size: 96px; line-height: 0.5; height: 34px; color: var(--sky); }
.pull-quote blockquote { margin: 0; }
.pull-quote blockquote p { font-family: var(--display); font-size: clamp(30px, 4.2vw, 48px); line-height: 1.15; color: var(--on-dark); text-wrap: balance; }
.pull-quote figcaption { font-size: 15px; color: var(--on-dark-muted); }
.pull-quote figcaption strong { color: var(--on-dark); }
/* A single short review quote on one line (book page) */
.line-quote { margin: 0 auto; max-width: 720px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.line-quote blockquote { margin: 0; }
.line-quote blockquote p { font-family: var(--display); font-size: 22px; line-height: 1.35; color: var(--ink); }
.line-quote blockquote p::before { content: "\201C"; } .line-quote blockquote p::after { content: "\201D"; }
.line-quote figcaption { font-size: 14px; font-weight: 700; color: var(--link); }
.line-quote.left { margin: 0; text-align: left; }
.line-quote figcaption a { color: inherit; text-decoration: none; }
.line-quote figcaption a:hover { text-decoration: underline; }

/* ---------- Forms ---------- */

.form { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: 15px; color: var(--ink); }
.field .hint { font-size: 14px; color: var(--muted); }
.field input, .field select, .field textarea, .inline-form input {
  font-family: var(--body); font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--muted); border-radius: 8px; padding: 12px 14px; min-height: 50px; width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus, .inline-form input:focus { border-color: var(--ocean); outline: 3px solid rgba(55, 116, 173, 0.25); outline-offset: 0; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink); }
.check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ocean); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input { flex: 1 1 240px; }
.form-error { color: var(--error); font-size: 15px; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ocean); color: var(--on-dark-muted); }
.site-footer .wrap { padding-block: 48px 28px; display: flex; flex-direction: column; gap: 32px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 48px; }
.footer-brand { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.footer-brand .brand-name { color: var(--on-dark); }
.footer-brand p { font-size: 15px; line-height: 1.6; }
.footer-col { display: flex; flex-direction: column; gap: 4px; }
.footer-col .label { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky); margin-bottom: 4px; }
.footer-col a { color: var(--on-dark); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; font-size: 15px; }
.footer-col a:hover { text-decoration: underline; color: var(--on-dark); }
.socials { display: flex; gap: 6px; margin-left: -10px; }
.socials a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--on-dark); }
.socials a:hover { background: rgba(153, 198, 239, 0.16); text-decoration: none; }
.socials svg { width: 22px; height: 22px; }
.footer-base { border-top: 1px solid var(--ocean-line); padding-top: 20px; font-size: 13px; }

/* ==========================================================================
   Animation (all switched off for visitors whose device asks for less motion)

   data-reveal          fades and rises into view on scroll
   data-reveal-group    its children reveal one after another
   data-count-to="71"   the number counts up when it comes into view
   class="lift"         rises slightly on hover
   class="tilt"         tips toward the viewer on hover (book cover)
   .hero-copy           its lines rise in as the page opens
   class="settle-in"    fades in and settles from slightly larger
   ========================================================================== */

/* Scroll reveals are only hidden once the page has confirmed it can show them (see site.js) */
.motion [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms),
              transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
}
.motion [data-reveal].is-in, .motion.reveal-all [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: mm-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > *:nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > *:nth-child(3) { animation-delay: 0.16s; }
  .hero-copy > *:nth-child(4) { animation-delay: 0.24s; }
  .hero-copy > *:nth-child(5) { animation-delay: 0.32s; }
  .hero-copy > *:nth-child(6) { animation-delay: 0.40s; }
  .hero-media { animation: mm-rise 1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .settle-in { animation: mm-settle 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  /* The line draws across after the heading appears */
  .hero-copy h1::after { transform-origin: left; animation: mm-draw 0.9s 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  .lift { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.15s ease; }
  .lift:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(22, 31, 37, 0.45); }
  .tilt { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .tilt:hover { transform: perspective(1000px) rotateY(-7deg) rotateX(2deg) translateY(-4px); }
  .nudge .arrow { transition: transform 0.2s ease; }
  .nudge:hover .arrow { transform: translateX(4px); }

  /* Once a card has revealed (site.js adds .reveal-done), its hover effect takes over */
  .motion .lift.reveal-done { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.15s ease; }
  .motion .lift.reveal-done:hover { transform: translateY(-4px); }
  .motion .tilt.reveal-done { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .motion .tilt.reveal-done:hover { transform: perspective(1000px) rotateY(-7deg) rotateX(2deg) translateY(-4px); }

  @keyframes mm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes mm-settle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
  @keyframes mm-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}