/* ============================================================
   enhance-v2.css  —  refinement layer over the v2 build
   Additive only. Delete the <link> in index.html to fully revert.
   Goals: smooth-scroll support, tighter hero fold, cohesive motion,
   soft atmosphere, micro-detail. Keeps brand, fonts, sections.
   ============================================================ */

:root {
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-2: .7s;
  --glow-mint: rgba(120, 209, 196, .20);
  --glow-teal: rgba(20, 168, 154, .13);
  --glow-deep: rgba(20, 168, 154, .20);
}

/* ---- Lenis smooth scroll base ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ---- No-JS safety: reveals visible if JS never runs ---- */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }

/* ---- Selection + scrollbar ---- */
::selection { background: var(--mark); color: var(--ink); }
html { scrollbar-color: #9ec9c1 var(--bg-mint-2); }
@media (min-width: 769px) {
  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-track { background: var(--bg-mint-2); }
  ::-webkit-scrollbar-thumb { background: #9ec9c1; border-radius: 999px; border: 3px solid var(--bg-mint-2); }
  ::-webkit-scrollbar-thumb:hover { background: var(--teal-bright); }
}

/* ============================================================
   Hero fold — pull content up, less dead space on tall screens
   ============================================================ */
.hero {
  min-height: clamp(560px, 84svh, 752px);
  padding-top: clamp(14px, 2.5vw, 28px);
  padding-bottom: clamp(44px, 6vw, 78px);
}

/* ============================================================
   Atmosphere — soft lit backgrounds (subtle, complements v2)
   ============================================================ */
.hero, #services, #portfolio, #about, #contact, #testimonials, .site-footer { position: relative; isolation: isolate; }
.hero > .wrap, .section-pad > .wrap, .site-footer > .wrap { position: relative; z-index: 1; }

.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(44% 54% at 82% 26%, var(--glow-mint), transparent 70%),
    radial-gradient(38% 50% at 6% 86%, var(--glow-teal), transparent 72%);
}
#services::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(34% 40% at 94% 6%, rgba(120,209,196,.12), transparent 70%);
}
#portfolio::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(42% 48% at 98% 94%, rgba(20,168,154,.09), transparent 72%);
}
#about::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 88% 16%, var(--glow-mint), transparent 66%);
}
#contact::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(38% 48% at 10% 12%, var(--glow-mint), transparent 70%);
}
#testimonials::before, .site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 60% at 16% 0%, var(--glow-deep), transparent 68%),
    radial-gradient(46% 60% at 94% 100%, rgba(120,209,196,.10), transparent 70%);
}
#testimonials .wrap, .site-footer .wrap { position: relative; z-index: 1; }

/* faint film grain for a premium, less-flat feel */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

/* ============================================================
   Motion — blur-to-sharp reveals + staggered grids
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(26px); filter: blur(6px);
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              filter var(--dur-2) var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }

.services-grid .service-card:nth-child(1) { transition-delay: .03s; }
.services-grid .service-card:nth-child(2) { transition-delay: .11s; }
.services-grid .service-card:nth-child(3) { transition-delay: .19s; }
.services-grid .service-card:nth-child(4) { transition-delay: .27s; }
.store-grid .product:nth-child(2) { transition-delay: .12s; }

/* gentle idle float on decorative blobs */
.hero-art .blob, .about-art .blob { animation: floatBlob 9s ease-in-out infinite; }
@keyframes floatBlob { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-13px,0) scale(1.03); } }

/* parallax targets (driven by enhance-v2.js) */
.hero-art, .about-art img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: opacity .3s ease; transform: none; filter: none; }
  .hero-art .blob, .about-art .blob { animation: none; }
}

/* ============================================================
   Micro-detail — buttons, cards
   ============================================================ */
/* Buttons: clean SOLID teal. The old gradient ended in a near-black teal at the
   bottom-right, which made the rounded edge look harsh. Solid fill keeps edges
   crisp; a soft, focused drop shadow gives lift without a wide halo. */
.btn-primary, .nav-cta, .to-top { box-shadow: 0 10px 24px -6px rgba(15, 118, 110, .35); }
.btn-primary:hover, .nav-cta:hover, .to-top:hover { box-shadow: 0 14px 30px -8px rgba(15, 118, 110, .42); }

.service-card { transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s var(--ease-out); }
.service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: #bfe0d9; }
.service-card .svc-ico { transition: transform .3s var(--ease-out), background .3s var(--ease-out); }
.service-card:hover .svc-ico { transform: translateY(-2px) scale(1.06); background: var(--bg-mint); }
.product:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.case-media img, .case-media video { transition: transform .4s var(--ease-out), box-shadow .3s ease; }
.case-media img:hover, .case-media video:hover { transform: scale(1.02); box-shadow: 0 14px 34px rgba(12,39,35,.2); }
.chip { transition: background .2s ease, transform .2s ease; }
.chip:hover { background: var(--bg-mint); transform: translateY(-1px); }

/* marquee: a touch slower */
.marquee-track { animation-duration: 46s; }

/* ---- Mobile header: never let brand + CTA + toggle collide ---- */
@media (max-width: 600px) {
  .nav-cta { padding: 7px 13px; font-size: .85rem; }
}
@media (max-width: 460px) {
  /* keep the DT mark, drop the wordmark so the header always fits */
  .brand span { display: none; }
}

/* ============================================================
   Compact density — tighter sections so a focal point fits the
   viewport and reads as one clean unit while scrolling.
   ============================================================ */
body { font-size: 16px; }

.section-pad { padding: clamp(38px, 4.6vw, 72px) 0; }
.section-head { margin-bottom: clamp(20px, 2.6vw, 32px); }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-head p { font-size: 1.04rem; margin-top: 12px; }

.hero .lead { font-size: clamp(1.04rem, 1.3vw, 1.18rem); margin: 18px 0 4px; }
.hero-actions { margin-top: 26px; }
.socials { margin-top: 26px; }

/* Services: tighter cards + grid */
.services-grid { gap: 16px; }
.service-card { padding: clamp(20px, 2.3vw, 28px); }
.service-card .svc-top { margin-bottom: 12px; }
.service-card p { margin: 0 0 16px; }
.svc-anim { height: 84px; }

/* Store: tighter */
.store-grid { gap: 20px; }
.product-body { padding: 22px; }

/* About: tighter heading (overrides the inline size) + copy */
#about .about-body h2 { font-size: clamp(1.7rem, 3vw, 2.4rem) !important; margin-bottom: 16px !important; }
.about-body p { font-size: 1.02rem; }
.about-meta { margin: 22px 0 24px; }

/* Contact: tighter heading + form */
.contact-aside h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.contact-aside p { font-size: 1.04rem; }
.form-card { padding: clamp(22px, 3vw, 32px); }
.field { margin-bottom: 14px; }
.field input, .field textarea { padding: 11px 14px; }
.field textarea { min-height: 104px; }
#contactForm .cf-turnstile { margin: 2px 0 18px; display: flex; justify-content: center; }

/* Portfolio: slightly shorter media so the active case fits cleanly */
#portfolio .cases .case .case-media img,
#portfolio .cases .case .case-media video { max-height: 400px; }

/* ---- Reserve image space (stops layout shift / CLS, keeps snap targets stable) ---- */
#portfolio .cases .case .case-media { min-height: clamp(260px, 32vw, 420px); }
.about-art { aspect-ratio: 1 / 1; }
.about-art img { height: 100%; object-fit: contain; }

/* ============================================================
   Services - four equal columns, diagram on top, short copy,
   subtle index (Variation 1). Equal weight, no card dominates.
   ============================================================ */
.services-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1080px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .services-grid { grid-template-columns: 1fr; } }

.services-grid .service-card { position: relative; padding: 24px; }
.services-grid .service-card .svc-anim { order: -1; margin: 0 0 18px; height: 150px; }
.services-grid .service-card .svc-top { margin-bottom: 12px; }
.services-grid .service-card h3 { font-size: 1.16rem; }
.services-grid .service-card p { font-size: 1rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.services-grid .service-card .idx { display: none; }

/* ============================================================
   Services cards — refined preview panels + a hover that brings
   the card to life (icon fills, panel frame warms, card lifts).
   ============================================================ */
.services-grid { gap: 18px; }
.services-grid .service-card {
  border-color: var(--line);
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 30px);
}
.services-grid .service-card .svc-anim {
  height: 158px; margin: 0 0 20px;
  border-radius: 13px;
  background: linear-gradient(165deg, #ecf5f2 0%, #fbfdfc 78%);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.services-grid .service-card .svc-top { gap: 13px; margin-bottom: 13px; }
.services-grid .service-card h3 { font-size: 1.18rem; line-height: 1.22; letter-spacing: -.01em; }
.services-grid .service-card p { color: var(--muted); }
.services-grid .service-card .svc-ico { transition: background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out); }
.services-grid .service-card:hover .svc-anim { border-color: #b8ddd5; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px rgba(12,39,35,.06); }
.services-grid .service-card:hover .svc-ico { background: var(--teal); color: #fff; transform: translateY(-1px); }

/* ---- Pause CSS animations in a section while it is offscreen (perf/battery) ---- */
.anim-paused, .anim-paused * { animation-play-state: paused !important; }

/* ============================================================
   Color-theory refinements. Brand stays teal/mint; this just
   cools the neutral to the brand temperature, adds ONE disciplined
   warm accent (the missing 60-30-10 "10") used only on the live
   pip + one payoff metric, and closes the AA contrast gaps.
   ============================================================ */
:root {
  --bg: #f5f7f6;            /* cool neutral (~150deg) so the cool teal reads true, not muddy */
  --muted: #536d66;         /* AA-safe on white AND on the mint panels (old #5e756f failed on mint) */
  --mark: #a9e0d6;          /* highlight + selection pop a touch more without going loud */
  --accent: #c2702a;        /* muted warm-clay complement of teal: the focal accent */
  --accent-soft: #e0915a;   /* lighter sibling, legible on the dark sections */
  --glow-deep: rgba(94, 234, 212, .16);  /* a lit mint pool on dark, not a grey smudge */
}

/* Surgical warm accent: the live pip and the single payoff metric only.
   Never on buttons, links, eyebrows, chips, or headings (those stay teal). */
@keyframes pulseWarm { 0% { box-shadow: 0 0 0 0 rgba(194,112,42,.5); } 70% { box-shadow: 0 0 0 8px rgba(194,112,42,0); } 100% { box-shadow: 0 0 0 0 rgba(194,112,42,0); } }
.ad-live i { background: var(--accent); animation: pulseWarm 2.2s infinite; }
.ad-num { color: var(--accent); }

/* Cool the lone warm island (desktop pill nav) into the brand temperature */
@media (min-width: 721px) {
  .nav-links { background: #eef2f1; border-color: rgba(12,39,35,.07); }
  .nav-links a:not(.nav-cta) { color: var(--ink-soft); }
  .nav-links a:not(.nav-cta):hover { color: var(--ink); background: rgba(12,39,35,.05); }
  .nav-links a.active:not(.nav-cta) { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(12,39,35,.14), 0 0 0 1px rgba(12,39,35,.05); }
}

/* ============================================================
   Industries trust band (honest social proof: real sectors shipped for)
   ============================================================ */
.industries { padding: clamp(26px, 3.4vw, 44px) 0; background: var(--surface); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.ind-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; text-align: center; }
.ind-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ind-tags li { font-family: var(--font-head); font-weight: 500; font-size: 1rem; color: var(--ink-soft); padding: 8px 17px; border-radius: 999px; background: var(--bg-mint-2); border: 1px solid var(--line-soft); }

/* ============================================================
   Responsive fix: the active portfolio case must STACK on
   tablet/mobile (the .active rule outweighs the base single-col
   rule, so it needs an equally-specific override here).
   ============================================================ */
@media (max-width: 940px) {
  #portfolio .cases .case.active { grid-template-columns: 1fr; }
  #portfolio .cases .case.active .case-media { order: -1; }
}

/* ============================================================
   VISUAL ELEVATION — confident editorial type, real spatial
   rhythm + gestalt grouping, layered depth, navigation polish.
   Supersedes the earlier compact pass (made under a zoom mistake).
   ============================================================ */

/* Softer, layered depth tokens */
:root {
  --shadow-sm: 0 1px 2px rgba(12,39,35,.04), 0 3px 10px rgba(12,39,35,.05);
  --shadow-md: 0 5px 16px rgba(12,39,35,.06), 0 20px 44px rgba(12,39,35,.08);
  --shadow-lg: 0 12px 32px rgba(12,39,35,.09), 0 34px 70px rgba(12,39,35,.13);
}

/* Type & vertical rhythm — tightened density pass (2026-06).
   Target: focal point of each section fits a ~690px laptop viewport.
   Section padding ~64px (was ~110), section h2 ~38px (was 51),
   body 16px (was 17). Modern reference rhythm (Linear/Stripe-class). */
body { font-size: 16px; line-height: 1.6; }
.section-pad { padding: clamp(40px, 4.4vw, 72px) 0; }
.section-head { max-width: 660px; margin-bottom: clamp(22px, 2.8vw, 38px); }
.section-head h2 { font-size: clamp(1.7rem, 2.9vw, 2.35rem); line-height: 1.1; letter-spacing: -.024em; }
.section-head p { font-size: 1.04rem; line-height: 1.55; color: var(--muted); margin-top: 14px; max-width: 54ch; text-wrap: balance; }

/* Eyebrow: precise editorial mono label with a hairline rule */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .7rem; letter-spacing: .22em; margin-bottom: 16px; color: var(--teal); }
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--teal); opacity: .65; flex: none; }
#testimonials .eyebrow, .band .band-label { color: var(--teal-bright); }

/* Hero: commanding but contained */
.hero { min-height: clamp(520px, 84svh, 760px); }
.hero h1 { font-size: clamp(1.95rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -.024em; }
.hero .lead { font-size: clamp(1.04rem, 1.25vw, 1.18rem); line-height: 1.55; max-width: 46ch; margin: 20px 0 0; color: var(--ink-soft); text-wrap: balance; }
.hero-actions { margin-top: 28px; }
.socials { margin-top: 28px; gap: 24px; }

/* Cards & components: hairline borders, layered depth, calmer internal rhythm */
.service-card { padding: clamp(26px, 2.8vw, 36px); border-color: var(--line-soft); }
.product-body { padding: clamp(26px, 3vw, 34px); }
.form-card { padding: clamp(30px, 3.5vw, 44px); }
.service-card:hover, .product:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.industries { padding: clamp(30px, 3.6vw, 50px) 0; }

/* Section grouping: a single hairline does the figure/ground work */
#services, #portfolio, #testimonials, #store, #about, #contact, .industries { border-top: 1px solid var(--line-soft); }

/* Navigation: a slim scroll-progress rail + crisper sticky shadow */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 100; background: linear-gradient(90deg, var(--teal-bright), var(--teal)); box-shadow: 0 0 8px rgba(20,168,154,.45); pointer-events: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }
.site-header.scrolled { box-shadow: 0 1px 0 rgba(12,39,35,.06), 0 8px 28px rgba(12,39,35,.05); }

/* ============================================================
   Footer responsive fix — three grid children (brand, Navigate,
   Connect) were colliding in two columns. Put the brand block
   full-width on top, link columns aligned side by side below.
   ============================================================ */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 28px; align-items: start; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand .ai-links { flex-wrap: wrap; }
}
@media (max-width: 440px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Hero balance — widen the content so the side gutters aren't so
   empty, and right-align the hero visual so its right edge lines
   up with the header "Get in touch" CTA above it.
   ============================================================ */
:root { --maxw: 1280px; }
@media (min-width: 941px) { .hero-art { justify-self: end; } }

/* ============================================================
   Hero headline — clean two-line lockup on desktop. The phrase
   needs ~723px for a balanced break ("...useful and" / "your
   operations effortless.") but the copy column is ~642px, so it
   falls to three lines. On wide screens (layout pinned at the
   1280 cap, where there is clearance to the visual) let the H1
   alone borrow the empty gutter and honor an explicit break.
   Below 1280 the break is suppressed and it wraps naturally.
   ============================================================ */
.hero h1 .h1br { display: none; }
@media (min-width: 1280px) {
  .hero h1 { width: max-content; max-width: 760px; }
  .hero h1 .h1br { display: inline; }
}

/* ============================================================
   Contact — balance the short aside against the tall form: a
   reassurance line + vertical centering so neither side floats.
   ============================================================ */
.contact-grid { align-items: center; }
.contact-note { color: var(--muted); font-size: 1.02rem; line-height: 1.65; margin-top: 30px; max-width: 40ch; }
@media (max-width: 940px) { .contact-grid { align-items: start; } .contact-note { margin-top: 22px; } }

/* ============================================================
   Services - Variation 1: four equal columns, diagram on top.
   Equal weight, bigger diagrams, short scannable copy.
   ============================================================ */
.services-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1080px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .services-grid { grid-template-columns: 1fr; } }

.services-grid .service-card { padding: 22px; }
.services-grid .service-card .svc-anim { order: -1; margin: 0 0 14px; height: 122px; }
.services-grid .service-card .svc-top { margin-bottom: 10px; }
.services-grid .service-card h3 { font-size: 1.16rem; }
.services-grid .service-card p { font-size: 1rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
@media (max-width: 1080px) { .services-grid .service-card .svc-anim { height: 120px; } }

/* ============================================================
   MOBILE NAV — Editorial Index Drawer  (additive; <=720px only)
   Desktop pill nav (>=721px) stays byte-identical: .mi/.ma and the
   .nav-drawer-foot are display:none until the breakpoint, and .ml
   renders the label inline exactly as the bare text did.
   The index-row layout targets ONLY '.nav-links > a' (the 5 direct
   links) so the deeper footer links (CTA/mail/socials) are never
   caught by the row grid/border/opacity/hover. Footer rules carry a
   '.nav-drawer-foot' prefix to win the cascade over base '.nav-links a'.
   Easing is the site curve cubic-bezier(.16,1,.3,1).
   ============================================================ */
.nav-links a .mi,
.nav-links a .ma,
.nav-drawer-foot { display: none; }

@media (max-width: 720px) {
  /* ---- Drawer sheet: drops from under the 64px header bar so the
     brand logo + close (X) stay visible above it ---- */
  .nav-links {
    position: fixed;
    inset: 64px 0 auto 0;
    padding: 46px 0 max(22px, env(safe-area-inset-bottom)) 0;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 28px 60px -22px rgba(12, 39, 35, .28);
    transform: translateY(-130%);
    transition: transform .42s cubic-bezier(.16,1,.3,1);
    max-height: calc(100svh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 90;
  }
  .nav-links.open { transform: translateY(0); }

  .nav-links::before {
    content: "MENU";
    position: absolute;
    top: 18px; left: 22px;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .28em;
    color: var(--muted);
    opacity: .8;
  }

  /* Hide the header's own "Get in touch" pill while the drawer is open
     (the drawer footer carries the CTA) — keeps the open header to just
     brand + X. Keys off the data-lock the existing JS already sets. */
  .nav-cta { transition: opacity .25s ease; }
  .site-header[data-lock="1"] .nav-cta { opacity: 0; pointer-events: none; }

  /* ---- Index rows (5 direct-child links only) ---- */
  .nav-links > a {
    position: relative;
    display: grid;
    grid-template-columns: 2.4rem 1fr auto;
    align-items: center;
    gap: 14px;
    margin: 0 14px;
    padding: 18px 8px;
    border-radius: 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    background: transparent;
    opacity: 0;
    transform: translateY(8px);
    transition: background .25s cubic-bezier(.16,1,.3,1),
                padding-left .35s cubic-bezier(.16,1,.3,1);
  }
  .nav-links > a:first-of-type { margin-top: 6px; }
  .nav-links a:not(.nav-cta)::after { display: none; content: none; }

  .nav-links > a .mi {
    display: block;
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    transition: color .25s cubic-bezier(.16,1,.3,1);
  }
  .nav-links > a .ml {
    display: block;
    font-family: var(--font-head);
    font-size: 1.34rem;
    font-weight: 500;
    letter-spacing: -.018em;
    line-height: 1.1;
    color: inherit;
  }
  .nav-links > a .ma {
    display: block;
    width: 19px; height: 19px;
    color: var(--teal);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s cubic-bezier(.16,1,.3,1),
                transform .35s cubic-bezier(.16,1,.3,1);
    justify-self: end;
  }

  .nav-links > a:hover,
  .nav-links > a:focus-visible,
  .nav-links > a:active,
  .nav-links > a.active:not(.nav-cta) {
    background: var(--bg-mint-2);
    padding-left: 16px;
  }
  .nav-links > a:hover .ma,
  .nav-links > a:focus-visible .ma,
  .nav-links > a:active .ma,
  .nav-links > a.active:not(.nav-cta) .ma { opacity: 1; transform: translateX(0); }
  .nav-links > a.active:not(.nav-cta) .ml { color: var(--teal-deep); }
  .nav-links > a.active:not(.nav-cta) .mi { color: var(--accent); }
  .nav-links > a:focus-visible { outline-offset: -3px; }

  /* ---- Staggered reveal on open ---- */
  .nav-links.open > a {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .4s cubic-bezier(.16,1,.3,1),
                transform .45s cubic-bezier(.16,1,.3,1),
                background .25s cubic-bezier(.16,1,.3,1),
                padding-left .35s cubic-bezier(.16,1,.3,1);
  }
  .nav-links.open > a:nth-of-type(1) { transition-delay: .08s; }
  .nav-links.open > a:nth-of-type(2) { transition-delay: .13s; }
  .nav-links.open > a:nth-of-type(3) { transition-delay: .18s; }
  .nav-links.open > a:nth-of-type(4) { transition-delay: .23s; }
  .nav-links.open > a:nth-of-type(5) { transition-delay: .28s; }

  /* ---- Drawer footer: CTA + email + socials ---- */
  .nav-drawer-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin: 22px 22px 4px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    opacity: 0;
    transform: translateY(8px);
  }
  .nav-links.open .nav-drawer-foot {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .4s cubic-bezier(.16,1,.3,1) .34s,
                transform .45s cubic-bezier(.16,1,.3,1) .34s;
  }
  .nav-drawer-foot .nav-drawer-cta.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 15px 20px;
    font-size: 1rem;
    border-radius: 999px;
    color: #fff;
    background: var(--teal);
  }
  .nav-drawer-foot .nav-drawer-cta.btn.btn-primary:hover,
  .nav-drawer-foot .nav-drawer-cta.btn.btn-primary:focus-visible {
    background: var(--teal-deep);
    color: #fff;
  }
  .nav-drawer-foot .nav-drawer-cta svg { width: 17px; height: 17px; }
  .nav-drawer-foot .nav-drawer-mail {
    padding: 8px 0;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .01em;
    color: var(--ink-soft);
    background: transparent;
    text-align: center;
    transition: color .2s ease;
  }
  .nav-drawer-foot .nav-drawer-mail:hover,
  .nav-drawer-foot .nav-drawer-mail:focus-visible { color: var(--teal); background: transparent; }
  .nav-drawer-social { display: flex; justify-content: center; gap: 10px; }
  .nav-drawer-foot .nav-drawer-social a {
    display: grid;
    place-items: center;
    padding: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    background: var(--surface);
    transition: color .2s ease, border-color .2s ease, background .2s ease,
                transform .2s cubic-bezier(.16,1,.3,1);
  }
  .nav-drawer-foot .nav-drawer-social a svg { width: 18px; height: 18px; }
  .nav-drawer-foot .nav-drawer-social a:hover,
  .nav-drawer-foot .nav-drawer-social a:focus-visible {
    color: var(--teal);
    border-color: var(--mark);
    background: var(--bg-mint-2);
    transform: translateY(-2px);
  }

  /* ---- Hamburger -> X morph (keys off existing aria-expanded) ---- */
  .nav-toggle { position: relative; z-index: 95; }
  .nav-toggle span { transform-origin: center; transition: transform .34s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header { z-index: 100; }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .nav-links { transition: none; }
  .nav-links > a,
  .nav-links.open > a,
  .nav-drawer-foot,
  .nav-links.open .nav-drawer-foot {
    opacity: 1;
    transform: none;
    transition: background .2s ease, padding-left .2s ease;
  }
  .nav-links > a .ma { transition: opacity .15s linear; }
  .nav-toggle span { transition: none; }
}

/* ============================================================
   STORE — Framed-mockup product cards (Concept 2). Compact, light,
   CTA-led. Each card shows the real tool in a browser window. Cards
   cap their width and center, so two products sit tidily now and a
   third flows in later. #store-scoped so it beats the base rules.
   ============================================================ */
#store .store-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: clamp(20px, 2.2vw, 28px);
  align-items: stretch;
}
#store .product {
  flex: 0 1 360px;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s;
}
#store .product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #bfe1da; }

/* Browser-window media */
#store .product-media {
  display: block;
  height: auto;
  aspect-ratio: auto;
  padding: 12px 12px 0;
  border: 0;
  border-radius: 0;
  background: radial-gradient(120% 90% at 50% 0%, #f1faf8, var(--bg-mint-2));
  overflow: visible;
}
#store .product-media::after { display: none; }
#store .pm-win {
  border-radius: 9px 9px 0 0;
  overflow: hidden;
  border: 1px solid rgba(12,39,35,.08);
  border-bottom: 0;
  box-shadow: 0 -1px 0 #fff inset, 0 12px 26px rgba(12,39,35,.16);
  background: #fff;
}
#store .pm-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
}
#store .pm-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
#store .pm-file { margin-left: 9px; font-family: var(--font-mono); font-size: .62rem; color: var(--muted); }
#store .pm-shot { height: 150px; overflow: hidden; background: #fff; }
#store .pm-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.16);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
#store .product:hover .pm-shot img { transform: scale(1.2); }

/* Body */
#store .product-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
#store .prod-tag {
  position: static;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 8px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#store .product-body h3 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 7px;
}
#store .product-body .prod-lead {
  color: var(--ink-soft);
  font-size: .94rem;
  line-height: 1.48;
  margin: 0 0 18px;
  text-align: left;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#store .product-body .prod-action {
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
  display: flex;
}
#store .product-body .prod-cta {
  width: auto;
  align-self: flex-start;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: .9rem;
}
#store .product-body .prod-cta svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
#store .product:hover .prod-cta svg,
#store .product-body .prod-cta:hover svg,
#store .product-body .prod-cta:focus-visible svg { transform: translateX(3px); }

/* Accessibility */
#store .product-media:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--radius); }
#store .product-body .prod-cta:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  #store .product,
  #store .pm-shot img,
  #store .product-body .prod-cta svg { transition: none; }
  #store .product:hover { transform: none; }
  #store .product:hover .pm-shot img { transform: none; }
}
@media (max-width: 720px) {
  #store .product { flex: 1 1 100%; max-width: 440px; }
}

/* ---- Placeholder slot for an upcoming product ---- */
#store .product.is-slot { border-style: dashed; box-shadow: none; background: transparent; }
#store .product.is-slot:hover { transform: none; box-shadow: none; border-color: var(--mark); }
#store .product.is-slot .product-media { background: transparent; padding: 12px 12px 0; }
#store .pm-slot {
  height: 184px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: repeating-linear-gradient(135deg, #eef4f2 0 10px, #e7f1ee 10px 20px);
}
#store .pm-slot span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
#store .pm-slot svg { width: 15px; height: 15px; color: var(--teal-bright); }
#store .product.is-slot h3 { color: var(--ink-soft); }
#store .prod-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
  transition: color .2s ease, border-color .2s ease;
}
#store .prod-ghost svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
#store .prod-ghost:hover { color: var(--teal); border-color: var(--teal); }
#store .prod-ghost:hover svg { transform: translateX(3px); }

/* Honeypot field: visually gone, still in the DOM for bots */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }