/* ==========================================================================
   Northstar Group — style.css
   Pure CSS. No frameworks. Served from Apache (/var/www/html).
   ========================================================================== */

:root {
  --navy:        #0B2340;   /* hero, nav, footer */
  --navy-mid:    #1A3A5C;   /* card hover, secondary sections */
  --cream:       #F4EDD8;   /* warm light sections */
  --cream-light: #FAF6EE;   /* lightest background */
  --rope:        #C9A45C;   /* gold accent — borders, CTAs, highlights */
  --rope-dark:   #8B6914;   /* deep gold — rope stripe second color */
  --white:       #FFFFFF;
  --text:        #0B2340;
  --muted:       #4A6B8A;
  --light:       #A8C0D6;

  /* Paper grain — a tiling SVG turbulence swatch at ~4% opacity, shared by
     every light/gold band. Reads as sand/linen tooth, not visual noise; it is
     a static image, so it costs nothing after first paint. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");

  /* Motion tokens — one easing voice for the whole site. Entrances use the
     expressive expo-out; hovers use the same curve at a shorter duration.
     Premium reads slow: entrances sit at 0.7–0.9s, micro-interactions 0.25s. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro:   0.25s;
  --dur-hover:   0.35s;
  --dur-reveal:  0.8s;
}

/* ---------- Reset & base ------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  background: var(--cream-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.4em;
  letter-spacing: 0.01em;
}

/* Fluid type scale — display sizes earn their hierarchy. Cormorant Garamond
   needs real size to carry the page; body/UI text stays put. */
h1 { font-size: clamp(34px, 5vw, 54px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 24px; font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

/* ---------- Layout helpers ---------------------------------------------- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Roomier default section rhythm; grids below add their own air so the
   header block (eyebrow → title → intro) breathes before content starts. */
section { padding: 96px 0; }

.section-navy        { background: var(--navy);        color: var(--white); }
.section-navy-mid    { background: var(--navy-mid);    color: var(--white); }

/* Light and gold bands carry material, not flat fills. Each stacks:
     1. paper grain (see --grain) — the sand/linen tooth of the coastal theme,
     2. a barely-there vertical tonal drift, so the band reads lit from above
        rather than painted one hex edge to edge,
     3. a faint warm glow or watermark anchored to ONE corner, so the empty
        side of a sparse section is occupied on purpose.
   .section-cream additionally carries the north-star watermark cropped off
   its top-right edge — the hero's ambient star restated in navy-on-cream.
   Everything is a background layer: markup untouched, text contrast intact. */
.section-cream {
  color: var(--text);
  background-color: var(--cream);
  background-image:
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 57,43 98,50 57,57 50,98 43,57 2,50 43,43' fill='%230B2340' fill-opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(900px 480px at 86% -6%, rgba(201, 164, 92, 0.14), transparent 70%),
    linear-gradient(180deg, #F7F1E0 0%, #F4EDD8 45%, #EFE5C9 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, right -130px top -90px, 0 0, 0 0;
  background-size: 160px 160px, 480px 480px, 100% 100%, 100% 100%;
}
.section-cream-light {
  color: var(--text);
  background-color: var(--cream-light);
  background-image:
    var(--grain),
    radial-gradient(760px 420px at 6% 106%, rgba(201, 164, 92, 0.11), transparent 70%),
    linear-gradient(180deg, #FDFAF3 0%, #FAF6EE 50%, #F6F0E1 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 160px 160px, 100% 100%, 100% 100%;
}
.section-rope {
  position: relative;
  color: var(--navy);
  background-color: var(--rope);
  background-image:
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 57,43 98,50 57,57 50,98 43,57 2,50 43,43' fill='%230B2340' fill-opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #D5B375 0%, #C9A45C 52%, #BB9349 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, right -90px bottom -110px, 0 0;
  background-size: 160px 160px, 360px 360px, 100% 100%;
}
/* Fine navy keyline just inside the gold band — chart/certificate framing
   that turns the accent color into a deliberate plate instead of a large
   flat fill. Decorative only, so it never intercepts clicks. */
.section-rope::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(11, 35, 64, 0.28);
  pointer-events: none;
}

.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rope);
  margin: 0 0 1.1rem;
}

/* Chart-style section numbering — a quiet nautical annotation ("01  WHAT WE
   DO") that breaks the interchangeable-template feel. Pure CSS counters,
   gated behind :has() support; hero eyebrows (inside <header>) are excluded. */
@supports selector(:has(*)) {
  body { counter-reset: ns-section; }
  section:has(> .container .eyebrow) { counter-increment: ns-section; }
  section .eyebrow::before {
    content: counter(ns-section, decimal-leading-zero);
    display: inline-block;
    margin-right: 0.9em;
    opacity: 0.55;
    font-weight: 400;
  }
}

/* Deep-gold ink on light grounds — #C9A45C sings on navy but washes out on
   cream (≈1.9:1). The palette's existing dark gold keeps the same voice at
   readable contrast, and gives the light bands a second gold register. */
.section-cream .eyebrow,
.section-cream-light .eyebrow { color: var(--rope-dark); }
.section-cream .stat-num,
.section-cream-light .stat-num { color: var(--rope-dark); }

.section-title {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 0.6em;
}

/* Short gold rule under every section title — line-work at a scale between
   eyebrow text and the full rope bands. It anchors the header block to the
   section instead of letting it float in the negative space. */
.section-title::after {
  content: '';
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 0.45em;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--rope-dark), var(--rope) 62%, rgba(201, 164, 92, 0));
}
/* The rule draws in left→right once the title has landed (JS pages only —
   without JS it simply renders complete). Reduced motion is neutralised in
   the global reduce block below. */
.js .section-title.reveal::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out) 0.55s;
}
.js .section-title.reveal.revealed::after { transform: scaleX(1); }

/* Italic serif accent word — the same voice the client sites use. Gold-on-navy
   headlines get a cream accent; light sections get deep gold. */
.hero h1 em { font-style: italic; color: var(--cream); }
.section-title em { font-style: italic; color: var(--rope-dark); }
.section-navy .section-title em,
.section-navy-mid .section-title em { color: var(--rope); }

.section-intro {
  max-width: 720px;
  font-size: 19px;
  color: var(--muted);
}
.section-navy .section-intro,
.section-navy-mid .section-intro { color: var(--light); }

.text-center { text-align: center; }

/* ---------- Rope divider (signature motif) ------------------------------ */
.rope-divider {
  height: 6px;
  width: 100%;
  border: none;
  margin: 0;
  /* Static woven-gold band — the signature motif, but NOT animated.
     A continuously looping background shimmer was removed: it ran forever,
     drained battery, and read busier than the brand wants. */
  background: repeating-linear-gradient(
    90deg,
    var(--rope) 0px,
    var(--rope) 4px,
    var(--rope-dark) 4px,
    var(--rope-dark) 8px
  );
}

/* Divider variants — alternated down the page so section breaks don't all
   read as the identical woven rope. Calmer, un-animated treatments. */
.rope-divider.rope-solid {
  height: 4px;
  background: linear-gradient(90deg, var(--rope-dark), var(--rope) 50%, var(--rope-dark));
  background-size: 100% 100%;
  animation: none;
}
.rope-divider.rope-hairline {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rope) 50%, transparent);
  background-size: 100% 100%;
  animation: none;
}

/* ---------- Buttons ------------------------------------------------------ */
.btn-primary,
.btn-secondary {
  display: inline-block;
  font: 500 14px/1 'DM Sans', sans-serif;
  padding: 14px 32px;
  border-radius: 3px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1.5px solid transparent;
}

.btn-primary {
  background: var(--rope);
  color: var(--navy);
  transition: background var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.btn-primary:hover {
  background: var(--rope-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11, 35, 64, 0.28);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-secondary {
  background: transparent;
  color: var(--rope);
  border: 1.5px solid var(--rope);
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn-secondary:hover {
  background: var(--rope);
  color: var(--navy);
}
.btn-secondary:active { transform: scale(0.98); }

/* Keyboard focus — visible everywhere, on brand. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--rope);
  outline-offset: 3px;
  border-radius: 2px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* ---------- Navigation --------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--navy);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.nav.scrolled {
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; /* anchor for the sliding nav indicator */
}

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--rope);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* "Product" tag next to Servus so it doesn't read as a typo of "Services" */
.nav-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px 1px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--rope);
  border-radius: 999px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.nav-links a:hover .nav-badge,
.nav-links a.active .nav-badge { background: var(--rope); color: var(--navy); }

.nav-links a {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: var(--white);
  padding: 4px 0;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--rope); }

.nav-links a::after {
  content: '';
  display: block;
  height: 1.5px;
  background: var(--rope);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--rope);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* ---------- Hero --------------------------------------------------------- */
.hero {
  background: var(--navy);
  color: var(--white);
  padding: 168px 0 100px;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* contain the hero's layered bg + star in one stacking context */
}

/* Home hero photographic background (index.html only, via .hero-home).
   A navy scrim — heavier on the left where the copy sits — keeps the light
   headline/subhead readable while the photo shows through on the open right
   side. Solid navy underneath is the fallback if the image is missing. */
.hero-home { background-color: var(--navy); }

/* The photo and the navy scrim are split into two stacked layers so ONLY the
   photo can move (the slow Ken Burns drift) while the scrim stays perfectly
   still over the copy. ::before = photo (animated), ::after = scrim (static,
   visually identical to the previous single composited background). */
.hero-home::before,
.hero-home::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-home::before {
  z-index: 0;
  background: url('../assets/hero-home.jpg') no-repeat center right;
  background-size: cover;
}
.hero-home::after {
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(11, 35, 64, 0.98) 0%,
    rgba(11, 35, 64, 0.92) 40%,
    rgba(11, 35, 64, 0.60) 72%,
    rgba(11, 35, 64, 0.34) 100%);
}
/* Keep the hero copy (and the ambient star) above the two background layers. */
.hero > .container { position: relative; z-index: 3; }

/* Ken Burns drift. The old 6%-over-24s loop was mathematically animated but
   perceptually static under the scrim — the drift now covers enough distance
   to register, and `alternate` removes the mid-loop snap-back. */
@media (prefers-reduced-motion: no-preference) {
  .hero-home::before {
    will-change: transform;
    animation: kenBurns 26s ease-in-out infinite alternate;
  }
}
@keyframes kenBurns {
  from { transform: scale(1.03) translateX(0); }
  to   { transform: scale(1.12) translateX(-1.8%); }
}

.hero-short { padding: 0; min-height: 40vh; display: flex; align-items: center; }
.hero-short .container { padding-top: 100px; padding-bottom: 60px; }

.hero h1 {
  font-size: clamp(36px, 6.2vw, 72px);
  line-height: 1.04;
  max-width: 16ch;
  margin-bottom: 0.45em;
  color: var(--rope);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.hero .eyebrow { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }
.hero .subhead {
  font-size: clamp(18px, 1.7vw, 21px);
  color: var(--cream);
  max-width: 56ch;
  font-weight: 300;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* Hero entrance animation hooks.
   The hidden start-state only applies when JS is active (html.js), so the
   headline and body copy render immediately if JS is slow, blocked, or fails.
   Critical content must never depend on JS to be visible. */
.js .anim { opacity: 0; transform: translateY(20px); }
.js .anim-fade { opacity: 0; transform: none; }
.anim-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

/* Hero text reveals via pure CSS, so the headline/intro are NEVER dependent on
   main.js running. If JS is slow, blocked, or fails, the animation still
   completes and the words appear. (Reduced-motion users skip the motion below
   and the global reduced-motion rule keeps everything visible.)

   Choreography: the headline is the star — eyebrow leads, the clip-reveal
   lines land, THEN the subhead and buttons follow. Delays are keyed off the
   element's role (not child position) so pages without an eyebrow still
   sequence correctly. On repeat page views within a session (html.revisit)
   the sequence compresses so browsing doesn't feel gated. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .anim,
  .js .hero .anim-fade { animation: heroReveal 0.85s var(--ease-out) both; }
  .js .hero h1.anim  { animation-delay: 0.12s; } /* fallback if line-split fails */
  .js .hero .subhead { animation-delay: 0.65s; }
  .js .hero .btn-row { animation-delay: 0.82s; }
  .js.revisit .hero .subhead { animation-delay: 0.28s; }
  .js.revisit .hero .btn-row { animation-delay: 0.40s; }
}
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Card grids --------------------------------------------------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
}

.card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-radius: 6px;
  padding: 2.25rem 1.9rem;
  border: 1px solid rgba(11, 35, 64, 0.06);
  transition: transform var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}
/* Resting elevation for white surfaces on the cream bands. Without it the
   cards sat only a 6%-alpha border away from the background and dissolved
   into the section; a soft two-layer ambient shadow seats them as material.
   (On navy sections the navy-tinted shadow reads as ~nothing — harmless.) */
.card,
.quote-card,
.phase-card,
.feature-emoji,
.care-card,
.price-card:not(.price-card--featured) {
  box-shadow: 0 1px 2px rgba(11, 35, 64, 0.05), 0 10px 28px rgba(11, 35, 64, 0.07);
}
/* Gold top-accent draws in on hover — a small, restrained signal of intent. */
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rope);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(11, 35, 64, 0.12);
}
.card:hover::after { transform: scaleX(1); }
.card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  color: var(--rope);
}
.card-icon svg { width: 100%; height: 100%; }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--muted); font-size: 16px; }

/* Cards on dark sections */
.section-navy .card,
.section-navy-mid .card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 164, 92, 0.25);
}
.section-navy .card p,
.section-navy-mid .card p { color: var(--light); }
.section-navy .card h3,
.section-navy-mid .card h3 { color: var(--white); }

/* ---------- Value / stat items ------------------------------------------ */
.value-item h3 { color: var(--rope); margin-bottom: 0.4rem; }
.value-item p  { color: var(--light); font-size: 16px; }

.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 700;
  color: var(--rope);
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}

/* ---------- Stat band (data proof points) ------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.75rem;
  margin-top: 3.2rem;
}
.stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.stat-block .stat-num { font-size: 58px; margin-bottom: 0.25rem; }
.stat-block h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}
.stat-block p { font-size: 15px; color: var(--muted); margin: 0; }

.section-navy .stat-block h3,
.section-navy-mid .stat-block h3 { color: var(--white); }
.section-navy .stat-block p,
.section-navy-mid .stat-block p { color: var(--light); }

.stat-source {
  margin-top: 2.4rem;
  font-size: 12.5px;
  font-style: italic;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.section-navy .stat-source,
.section-navy-mid .stat-source { color: rgba(168, 192, 214, 0.75); }

/* ---------- CTA banner --------------------------------------------------- */
.cta-banner { text-align: center; }
.cta-banner h2 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 0.3em; }
/* Small north star above the banner headline — the brand mark used as
   typographic punctuation where the site speaks loudest. Gold-band only. */
.section-rope.cta-banner h2::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 57,43 98,50 57,57 50,98 43,57 2,50 43,43' fill='%230B2340' fill-opacity='0.55'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cta-banner p { max-width: 48ch; margin: 0 auto 0.5em; }
.cta-banner .btn-row { justify-content: center; }

/* ---------- About: story two-column ------------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2.5rem;
}
.story-grid p { color: var(--muted); }
.pull-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  line-height: 1.3;
  color: var(--rope);
  border-left: 3px solid var(--rope);
  padding-left: 1.4rem;
}

/* ---------- Phase cards (rope left border) ------------------------------ */
.phase-card {
  background: var(--white);
  border-left: 4px solid var(--rope);
  border-radius: 0 6px 6px 0;
  padding: 1.9rem 1.9rem;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.phase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(11, 35, 64, 0.12);
}
.phase-card h3 { margin-bottom: 0.4rem; }
.phase-card p { color: var(--muted); font-size: 16px; }

/* ---------- AI feature rows --------------------------------------------- */
.feature-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.6rem;
  align-items: start;
  padding: 2rem;
  border-radius: 8px;
}
.feature-row + .feature-row { margin-top: 1rem; }
.feature-row:nth-child(odd)  { background: var(--cream-light); }
.feature-row:nth-child(even) { background: var(--white); border: 1px solid rgba(11,35,64,0.06); }
.feature-icon {
  width: 56px; height: 56px;
  color: var(--rope);
}
.feature-icon svg { width: 100%; height: 100%; }
.feature-row h3 { margin-bottom: 0.3rem; }
.feature-row p  { color: var(--muted); font-size: 16px; }

/* ---------- Tech badges -------------------------------------------------- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0 1.5rem;
}
.badge {
  border: 1.5px solid var(--rope);
  color: var(--rope);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ---------- Servus emoji feature grid ----------------------------------- */
.feature-emoji {
  background: var(--white);
  border-radius: 8px;
  padding: 2rem;
  border: 1px solid rgba(11,35,64,0.06);
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.feature-emoji:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(11, 35, 64, 0.12);
}
.feature-emoji .emoji { font-size: 30px; display: block; margin-bottom: 0.8rem; }
.feature-emoji h3 { margin-bottom: 0.35rem; }
.feature-emoji p  { color: var(--muted); font-size: 16px; }

/* ---------- Numbered steps ---------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
  counter-reset: step;
}
.step { position: relative; padding-top: 0.5rem; }
.step .step-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--rope);
  line-height: 1;
  display: block;
  margin-bottom: 0.6rem;
}
.step p { color: var(--light); font-size: 16px; }

/* ---------- Teaser link -------------------------------------------------- */
.teaser { text-align: center; }
.teaser p { font-size: 22px; max-width: 60ch; margin: 0 auto; }
.teaser a.inline-link {
  color: var(--navy);
  font-weight: 500;
  border-bottom: 2px solid var(--navy);
  white-space: nowrap;
}
.teaser a.inline-link:hover { color: var(--rope-dark); border-color: var(--rope-dark); }

/* ---------- Contact ------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3.5rem;
  margin-top: 1rem;
}

.form-field { margin-bottom: 1.3rem; }
.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.45rem;
}
.form-field input,
.form-field textarea {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid rgba(11, 35, 64, 0.18);
  border-radius: 4px;
  padding: 12px 14px;
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--rope);
  box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.18);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field.invalid input,
.form-field.invalid textarea { border-color: #b3402f; }
.field-error {
  display: none;
  color: #b3402f;
  font-size: 13px;
  margin-top: 0.3rem;
}
.form-field.invalid .field-error { display: block; }

.form-success {
  display: none;
  background: rgba(201, 164, 92, 0.14);
  border: 1.5px solid var(--rope);
  border-radius: 6px;
  padding: 1.4rem 1.6rem;
  color: var(--navy);
  font-size: 17px;
}
.form-success.show { display: block; }

.contact-info h3 { color: var(--navy); }
.contact-info dl { margin: 1.4rem 0 0; }
.contact-info dt {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rope-dark);
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.contact-info dd {
  margin: 0 0 1.2rem;
  font-size: 17px;
  color: var(--text);
}
.contact-info dd a:hover { color: var(--rope-dark); }

.contact-divider { display: none; }

/* ---------- Footer ------------------------------------------------------- */
.footer {
  background: var(--navy);
  text-align: center;
}
.footer-inner {
  padding: 2.6rem 2rem;
}
.footer p {
  color: var(--rope);
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.14em;
  margin: 0 0 0.5rem;
}
.footer p:last-child { margin-bottom: 0; }
.footer a:hover { color: var(--white); }

/* Pittsburgh's coordinates — the north-star motif, stated plainly. */
.footer .footer-coords {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(201, 164, 92, 0.6);
}
.footer .footer-credit {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(244, 237, 216, 0.7);
}

/* ---------- Scroll reveal ----------------------------------------------- */
/* Elements now trigger only once they sit ~90px INSIDE the viewport (see the
   IntersectionObserver rootMargin in main.js). The old 12%-visible trigger
   meant most reveals finished at the screen edge before the eye arrived —
   the single biggest reason the site read as static. */
.reveal {
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.js .reveal {
  opacity: 0;
  transform: translateY(32px);
}
.js .reveal-fade { transform: none; }
.js .eyebrow.reveal { transform: translateY(14px); }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.js .eyebrow.reveal.revealed { transform: translateY(0); }

/* Section-header cascade: eyebrow → title → intro. The three usually enter
   the viewport together; these small offsets turn "everything at once" into
   a read order. */
.section-title.reveal { transition-delay: 90ms; }
.section-intro.reveal { transition-delay: 190ms; }

/* Staggered grid children — entrance runs as a keyframe animation (backwards
   fill only), NOT a delayed transition. The old transition-delay approach
   left 80–240ms delays attached to the children forever, so card hovers
   lagged noticeably after reveal. Once the animation ends, each component's
   own hover transition applies untouched. */
.stagger { opacity: 1; transform: none; }
.js .stagger { opacity: 1; transform: none; } /* container never double-fades (e.g. .reveal.stagger) */
.js .stagger > * { opacity: 0; }
.stagger.revealed > * {
  opacity: 1;
  animation: staggerRise 0.7s var(--ease-out) backwards;
}
.stagger.revealed > *:nth-child(1) { animation-delay: 70ms; }
.stagger.revealed > *:nth-child(2) { animation-delay: 150ms; }
.stagger.revealed > *:nth-child(3) { animation-delay: 230ms; }
.stagger.revealed > *:nth-child(4) { animation-delay: 310ms; }
.stagger.revealed > *:nth-child(5) { animation-delay: 390ms; }
.stagger.revealed > *:nth-child(6) { animation-delay: 470ms; }
.stagger.revealed > *:nth-child(7) { animation-delay: 550ms; }
.stagger.revealed > *:nth-child(8) { animation-delay: 630ms; }
@keyframes staggerRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Skip link (a11y) -------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  z-index: 2000;
  background: var(--rope);
  color: var(--navy);
  font: 500 14px/1 'DM Sans', sans-serif;
  padding: 13px 20px;
  border-radius: 4px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* ---------- Portfolio / work cards -------------------------------------- */
.work-card {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(201, 164, 92, 0.2);
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.work-thumb {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 70% 30%, rgba(201, 164, 92, 0.18), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
}
.work-thumb span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px;
  font-weight: 700;
  color: rgba(201, 164, 92, 0.55);
  letter-spacing: 0.05em;
}
.work-body { padding: 1.5rem 1.6rem 1.8rem; }
.work-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rope-dark);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.work-card h3 { color: var(--navy); margin-bottom: 0.4rem; }
.work-card p { color: var(--muted); font-size: 15px; }

/* ---------- Testimonial quote cards ------------------------------------- */
.quote-card {
  background: var(--white);
  border-radius: 8px;
  border: 1px solid rgba(11, 35, 64, 0.06);
  padding: 1.6rem 1.8rem 1.7rem;
  margin: 0;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.quote-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(11, 35, 64, 0.12); }
.quote-mark {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  line-height: 0.7;
  height: 30px;
  color: var(--rope);
}
.quote-card blockquote {
  margin: 0 0 1.2rem;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}
.quote-card figcaption { display: flex; flex-direction: column; }
.quote-name { font-weight: 500; color: var(--navy); }
.quote-role { font-size: 13px; color: var(--muted); }

/* ---------- Value icons (Built Different) ------------------------------- */
.value-icon { width: 38px; height: 38px; color: var(--rope); margin-bottom: 0.9rem; }
.value-icon svg { width: 100%; height: 100%; }

/* ---------- FAQ accordion (native details/summary, no JS) --------------- */
.faq-list { max-width: 780px; margin-top: 2.4rem; }
.faq-item { border-bottom: 1px solid rgba(11, 35, 64, 0.12); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.2rem 1.15rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  color: var(--navy);
  position: relative;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--rope-dark); }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  line-height: 1;
  color: var(--rope);
}
.faq-item[open] summary::after { content: '\2013'; }
.faq-item summary:focus-visible { outline: 2px solid var(--rope); outline-offset: 3px; }
.faq-a { padding: 0 0 1.3rem; }
.faq-a p { color: var(--muted); font-size: 16px; margin: 0; }

/* ---------- Pricing emphasis -------------------------------------------- */
#pricing .section-intro strong { color: var(--navy); font-weight: 600; }

/* ---------- Footer social + legal --------------------------------------- */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.4rem 0 1rem;
}
.footer-social a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 164, 92, 0.4);
  border-radius: 50%;
  color: var(--rope);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.footer-social a:hover { background: var(--rope); color: var(--navy); border-color: var(--rope); }
.footer-social svg { width: 18px; height: 18px; }
.footer-legal a { border-bottom: 1px solid rgba(201, 164, 92, 0.4); }
.footer-legal a:hover { color: var(--white); }

/* ---------- Pricing tiers ----------------------------------------------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
}
.price-card {
  background: var(--white);
  border: 1px solid rgba(11, 35, 64, 0.08);
  border-radius: 8px;
  padding: 2.1rem 1.9rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(11, 35, 64, 0.12); }

/* Middle tier emphasized */
.price-card--featured {
  border: 1.5px solid var(--rope);
  box-shadow: 0 14px 36px rgba(11, 35, 64, 0.16);
  position: relative;
}
@media (min-width: 861px) {
  .price-card--featured { transform: scale(1.045); }
  .price-card--featured:hover { transform: scale(1.045) translateY(-4px); }
}
.price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rope);
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.price-tier {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  color: var(--navy);
  margin-bottom: 0.15rem;
}
.price-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px;
  font-weight: 700;
  color: var(--rope-dark);
  line-height: 1;
  margin: 0.2rem 0 0.9rem;
}
.price-per { font-size: 18px; font-weight: 400; color: var(--muted); }
.price-for { color: var(--muted); font-size: 15px; margin-bottom: 1.1rem; }

.price-list {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(11, 35, 64, 0.08);
}
.price-list li {
  position: relative;
  padding: 0 0 0.6rem 1.5rem;
  font-size: 15px;
  color: var(--text);
}
.price-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: var(--rope);
  border-radius: 50%;
}
.price-cta { display: block; margin-top: auto; text-align: center; }
.price-note {
  max-width: 640px;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.section-navy .price-note,
.section-navy-mid .price-note { color: var(--light); }

/* Care plans — simpler 2-up */
.care-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
  max-width: 760px;
}
.care-card {
  background: var(--white);
  border: 1px solid rgba(11, 35, 64, 0.08);
  border-radius: 8px;
  padding: 2rem 1.9rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.care-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(11, 35, 64, 0.12); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  /* Heading sizes are handled by the fluid clamp() scale above. */
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--navy);
    padding: 0 2rem;
    max-height: 0;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .nav.nav-open .nav-links {
    max-height: 340px;
    padding: 0.5rem 2rem 1.2rem;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(201,164,92,0.15);
  }
  .nav-links a::after { display: none; }

  section { padding: 64px 0; }
  .hero { padding: 130px 0 70px; }
  /* On narrow screens the copy spans full width, so use a vertical scrim. */
  .hero-home::before { background-position: center center; }
  .hero-home::after {
    background: linear-gradient(180deg, rgba(11, 35, 64, 0.94) 0%, rgba(11, 35, 64, 0.84) 100%);
  }

  .grid-3, .grid-2, .steps { grid-template-columns: 1fr; }
  .price-grid, .care-grid { grid-template-columns: 1fr; }
  .price-card--featured { transform: none; }
  .stat-grid, .stat-grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1.5rem; }
  .stat-block .stat-num { font-size: 48px; }
  .story-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .pull-quote { font-size: 24px; }

  /* Watermark star scales down so it stays a whisper on narrow bands. */
  .section-cream {
    background-position: 0 0, right -90px top -60px, 0 0, 0 0;
    background-size: 160px 160px, 300px 300px, 100% 100%, 100% 100%;
  }
  .section-rope {
    background-position: 0 0, right -60px bottom -70px, 0 0;
    background-size: 160px 160px, 230px 230px, 100% 100%;
  }
  .section-rope::before { inset: 10px; }

  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-divider {
    display: block;
    height: 6px;
    margin: 0.5rem 0;
    background: repeating-linear-gradient(90deg,
      var(--rope) 0px, var(--rope) 4px, var(--rope-dark) 4px, var(--rope-dark) 8px);
  }
}

@media (max-width: 520px) {
  .container { padding: 0 1.3rem; }
  .nav-inner { padding: 0 1.3rem; }
  .stat-grid, .stat-grid.cols-3 { grid-template-columns: 1fr; }
  .btn-row { flex-direction: column; }
  .btn-primary, .btn-secondary { text-align: center; }
}

/* ==========================================================================
   Reduced motion — disable ALL animation & transition
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .rope-divider { animation: none !important; }
  .anim, .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .section-title.reveal::after { transform: none !important; }
}

/* ==========================================================================
   Kinetic polish layer
   Pure CSS (+ a little vanilla JS in main.js). Every motion below is either
   gated behind a (prefers-reduced-motion: no-preference) guard or neutralised
   in the reduce block at the very end of this section.
   ========================================================================== */

/* ---- 11. Nav slide-down on first page load ----------------------------- */
/* Skipped on repeat views in the same session (html.revisit) — replaying the
   full entrance on every internal navigation reads as template behaviour. */
@media (prefers-reduced-motion: no-preference) {
  .js .nav { animation: navDrop 0.5s var(--ease-out) both; }
  .js.revisit .nav { animation: none; }
}
@keyframes navDrop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---- 4. Sliding nav indicator ------------------------------------------ */
/* A single underline that follows the hovered item and returns to the active
   page. Appended into .nav-inner by JS; until then (or without JS) the original
   per-link underline remains as the fallback. Desktop only. */
.nav-indicator {
  position: absolute;
  top: 0;            /* JS sets the real top so it sits just under the link text */
  left: 0;
  width: 0;
  height: 2px;
  background: var(--rope);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transition: left 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease;
}
.nav-indicator.ready { opacity: 1; }
.nav.has-indicator .nav-links a::after { display: none; }
@media (max-width: 860px) {
  .nav-indicator { display: none; }                    /* horizontal slider is desktop-only */
  .nav.has-indicator .nav-links a::after { display: block; }
}

/* ---- 2. Hero headline clip reveal -------------------------------------- */
/* JS splits the headline into visual lines wrapped in .line-wrap > .line and
   each line rises up through the clip mask. The pre-split holding state keeps
   the headline hidden (and cancels the shared .anim fade) until the lines are
   built, so there is never a double-reveal flash. */
.hero h1.hero-headline-prep { opacity: 0 !important; animation: none !important; }
.hero-headline .line-wrap { display: block; overflow: hidden; }
.hero-headline .line {
  display: block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform;
}
.hero-headline.clip-in .line {
  animation: lineReveal 0.9s var(--ease-out) forwards;
}
@keyframes lineReveal {
  to { transform: translateY(0); opacity: 1; }
}

/* ---- 3. First rope divider draws in after the hero entrance ------------ */
/* One-time left-to-right reveal via clip-path (no pattern distortion). This is
   NOT the old looping rope shimmer — that stays retired; this fires once. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero + .rope-divider {
    clip-path: inset(0 100% 0 0);
    animation: drawLine 0.9s var(--ease-out) 1.05s forwards;
  }
  .js.revisit .hero + .rope-divider { animation-delay: 0.4s; }
}
@keyframes drawLine {
  to { clip-path: inset(0 0 0 0); }
}

/* ---- 10. Ambient north star in the hero -------------------------------- */
.hero-star {
  position: absolute;
  top: 96px;
  right: 6%;
  width: 150px;
  height: 150px;
  color: var(--rope);
  opacity: 0.08;
  z-index: 2;            /* above scrim, below the copy (z-index 3) */
  pointer-events: none;
}
.hero-star svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-star { will-change: transform; animation: rotateStar 60s linear infinite; }
}
@keyframes rotateStar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (max-width: 600px) {
  .hero-star { width: 96px; height: 96px; top: 84px; right: 4%; opacity: 0.06; }
}

/* ---- 5. Service card lift + icon reaction on hover --------------------- */
/* The lift rule is scoped past the staggered rest-state (.stagger.revealed > *,
   which otherwise pins transform back to 0 at equal specificity) so the hover
   actually takes effect on revealed cards. */
.card:hover,
.stagger.revealed > .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(11, 35, 64, 0.18),
              0 8px 16px rgba(11, 35, 64, 0.10);
}
.card-icon { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center; }
.card:hover .card-icon {
  transform: scale(1.15) rotate(6deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* slight spring */
}

/* ---- 6. AI feature rows slide in alternately from left / right --------- */
/* These rows already carry .reveal; we only swap the entrance offset from
   translateY to translateX, then let the shared revealed state reset it.
   Alternating direction (odd left, even right) matches the zebra backgrounds
   and keeps four identical rows from reading as one repeated trick. */
.js .feature-row.reveal { transform: translateX(-40px); }
.js .feature-row.reveal:nth-child(even) { transform: translateX(40px); }
.js .feature-row.reveal.revealed { transform: none; }
.feature-row .feature-icon { transition: transform 0.3s ease; }
@media (prefers-reduced-motion: no-preference) {
  .feature-row.revealed .feature-icon { animation: iconPulse 0.6s ease 0.2s; }
}
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}

/* ---- 9. Primary button shimmer (ghost-button fill already exists) ------ */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover::after { left: 150%; transition: left 0.6s ease-in-out; }
}

/* ---- Reduced motion: hard stops for everything in this layer ----------- */
@media (prefers-reduced-motion: reduce) {
  .hero-home::before,
  .hero-star,
  .js .nav { animation: none !important; transform: none !important; }
  .hero + .rope-divider { clip-path: none !important; animation: none !important; }
  .hero-headline .line { transform: none !important; opacity: 1 !important; }
  .hero h1.hero-headline-prep { opacity: 1 !important; }
  .nav-indicator { display: none !important; }
  .btn-primary::after { display: none !important; }
}