/* extra styles for hero, showcase, etc. */
.hero-wrap {
  position: relative; overflow: hidden;
  padding: var(--pme-hero-py, 80px) 0 calc(var(--pme-hero-py, 80px) * 1.4);
  background: linear-gradient(180deg, #FBFAF7 0%, #FFFFFF 100%);
}
.heartbeat-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
/* heartbeat ECG line — synced to the 3D heart's calm 60 BPM (1.0s period) */
.heartbeat-line {
  stroke-dasharray: 3200;
  stroke-dashoffset: 3200;
  animation: heartbeat 4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(200,240,80,.45));
}
@keyframes heartbeat {
  0%   { stroke-dashoffset: 3200; }
  100% { stroke-dashoffset: -3200; }
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px;
  position: relative; z-index: 2; align-items: center;
}
@media (max-width: 980px){ .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero-eyebrow-row { display:flex; align-items:center; gap:20px; margin-bottom: 28px; }
.hero-sub { font-size: 19px; line-height: 1.5; color: var(--pme-ink-2); max-width: 540px; margin: 32px 0 40px; }
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stat-strip {
  margin-top: 80px; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--pme-rule); padding-top: 32px; gap: 24px;
}
@media (max-width: 720px){ .hero-stat-strip { grid-template-columns: 1fr 1fr; } }
.hero-stat .n { font-family: var(--serif); font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--pme-forest-deep); }
.hero-stat .l { font-size: 13px; color: var(--pme-ink-3); margin-top: 8px; max-width: 200px; line-height: 1.4; }

/* ============== HERO SLIDESHOW (single image, fade) ============== */
.hero-slideshow {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 28px; overflow: hidden;
  background: var(--pme-paper);
  border: 1px solid var(--pme-rule);
  box-shadow: 0 40px 100px -40px rgba(14,26,20,0.25);
}
.hs-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hs-frame.is-active { opacity: 1; }
.hs-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,26,20,0.15) 0%, transparent 35%, transparent 65%, rgba(14,26,20,0.4) 100%);
}
.hs-hud-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding: 18px 22px;
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: .14em; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  pointer-events: none;
}
.hs-dots {
  position: absolute; bottom: 18px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.hs-dot {
  width: 28px; height: 3px; border: 0; padding: 0;
  background: rgba(255,255,255,0.4); cursor: pointer;
  transition: background .25s, width .25s;
}
.hs-dot.on { background: var(--pme-lime); width: 40px; }
.hs-dot:hover:not(.on) { background: rgba(255,255,255,0.7); }
.heart3d-wrap {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 55%, #FFF8F2 0%, #F4ECE0 55%, #E8DDC8 100%);
  border: 1px solid var(--pme-rule);
  box-shadow:
    0 40px 100px -40px rgba(60,30,30,0.18),
    inset 0 0 100px rgba(168,34,42,0.06);
}
.heart-photo-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.heart-halo {
  position: absolute; left: 50%; top: 52%;
  width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(220,80,90,0.32) 0%,
    rgba(180,40,50,0.16) 35%,
    transparent 70%);
  filter: blur(18px);
  animation: heart-pulse 1s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
.heart-halo--2 {
  width: 95%;
  background: radial-gradient(circle,
    rgba(200,240,80,0.18) 0%,
    rgba(46,174,63,0.10) 40%,
    transparent 75%);
  filter: blur(28px);
  animation-delay: -.05s;
}
.heart-photo {
  position: relative; z-index: 2;
  width: 78%; height: 78%;
  object-fit: cover;
  border-radius: 22px;
  box-shadow:
    0 30px 60px -22px rgba(60,20,20,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.4);
  animation: heart-pulse 1s cubic-bezier(.4,0,.2,1) infinite;
  transform-origin: 50% 55%;
  filter: contrast(1.04) saturate(1.05);
}
.heart-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, transparent 50%, rgba(40,15,15,0.18) 100%);
  mix-blend-mode: multiply;
}

/* The lub-dub: two beats inside one 1.0s period (60 BPM).
   Lub = bigger contraction at ~10%, dub = smaller at ~30%, then rest. */
@keyframes heart-pulse {
  0%   { transform: translate(-50%, -50%) scale(1.000); }
  8%   { transform: translate(-50%, -50%) scale(1.060); }   /* LUB */
  16%  { transform: translate(-50%, -50%) scale(1.010); }
  26%  { transform: translate(-50%, -50%) scale(1.040); }   /* DUB */
  36%  { transform: translate(-50%, -50%) scale(1.005); }
  100% { transform: translate(-50%, -50%) scale(1.000); }   /* rest */
}
/* The img isn't translated, so it gets its own keyframes (scale only) */
.heart-photo {
  animation-name: heart-pulse-img;
}
@keyframes heart-pulse-img {
  0%   { transform: scale(1.000); }
  8%   { transform: scale(1.055); }
  16%  { transform: scale(1.010); }
  26%  { transform: scale(1.038); }
  36%  { transform: scale(1.005); }
  100% { transform: scale(1.000); }
}

.heart3d-hud-top, .heart3d-hud-bot {
  position: absolute; left: 0; right: 0; padding: 18px 22px;
  display: flex; justify-content: space-between; pointer-events: none; z-index: 3;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.heart3d-hud-top { top: 0; color: var(--pme-forest-deep); }
.heart3d-hud-bot { bottom: 0; color: var(--pme-ink-3); justify-content: center; }

/* ============== ARCANE-STYLE 3D BEATING SHOWCASE ============== */
.arcane-showcase {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: 28px; overflow: hidden; cursor: grab;
  /* deep teal/forest void with painterly bloom */
  background:
    radial-gradient(ellipse at 50% 110%, #1A3A2E 0%, #0A1A14 55%, #050D0A 100%),
    radial-gradient(circle at 50% 50%, #0E2A20 0%, #050D0A 70%);
  background-blend-mode: screen;
  border: 1px solid #1d3328;
  box-shadow:
    0 40px 100px -40px rgba(0,0,0,0.7),
    inset 0 0 120px rgba(200,240,80,0.06);
  perspective: 1400px;
  perspective-origin: 50% 55%;
}
.arcane-showcase:active { cursor: grabbing; }

/* atmospheric layers */
.arc-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, transparent 30%, rgba(0,0,0,0.65) 90%);
  mix-blend-mode: multiply;
}
.arc-rays {
  position: absolute; inset: -10%; pointer-events: none;
  background:
    conic-gradient(from 200deg at 50% 60%,
      transparent 0deg,
      rgba(200,240,80,0.05) 40deg,
      transparent 80deg,
      rgba(46,174,63,0.06) 160deg,
      transparent 220deg,
      rgba(200,240,80,0.04) 300deg,
      transparent 360deg);
  filter: blur(40px);
  animation: arc-rays-spin 28s linear infinite;
}
@keyframes arc-rays-spin { to { transform: rotate(360deg); } }
.arc-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.arc-stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  display: flex; align-items: center; justify-content: center;
}

/* central pulse — the "beating" */
.arc-pulse {
  position: absolute; left: 50%; top: 56%; width: 60%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,240,80,0.35) 0%, rgba(46,174,63,0.18) 30%, transparent 65%);
  filter: blur(30px);
  animation: arc-beat 1.4s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
@keyframes arc-beat {
  0%, 100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.7; }
  18%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  28%      { transform: translate(-50%, -50%) scale(0.95); opacity: 0.85; }
  42%      { transform: translate(-50%, -50%) scale(1.02); opacity: 0.95; }
  60%      { transform: translate(-50%, -50%) scale(0.85); opacity: 0.65; }
}

/* the rotating ring */
.arc-ring {
  position: relative;
  width: 60%; aspect-ratio: 1;
  transform-style: preserve-3d;
  /* sync subtle ring breath with pulse */
  animation: arc-ring-breath 1.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes arc-ring-breath {
  0%, 100% { filter: brightness(1); }
  18% { filter: brightness(1.15); }
  60% { filter: brightness(0.95); }
}

.arc-card {
  position: absolute; inset: 0; margin: auto;
  width: 56%; aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
  transition: filter .2s linear, opacity .2s linear;
}
.arc-card-inner {
  position: absolute; inset: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0A1A14;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.8),
    inset 0 0 0 1px rgba(200,240,80,0.18);
}
.arc-card-inner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: contrast(1.05) saturate(0.85) hue-rotate(-8deg);
}
/* painterly stylized overlay — teal shadows + lime highlights */
.arc-card-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,26,20,0) 40%, rgba(10,26,20,0.85) 100%),
    linear-gradient(135deg, rgba(46,174,63,0.18) 0%, transparent 50%, rgba(200,240,80,0.12) 100%);
  mix-blend-mode: overlay;
}
.arc-card-rim {
  position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(200,240,80,0.35),
    inset 0 0 30px rgba(200,240,80,0.12);
}
.arc-card-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.25;
  background: repeating-linear-gradient(
    0deg,
    rgba(200,240,80,0.08) 0px,
    rgba(200,240,80,0.08) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
}
.arc-card.is-active .arc-card-rim {
  box-shadow:
    inset 0 0 0 1.5px rgba(200,240,80,0.85),
    inset 0 0 60px rgba(200,240,80,0.25),
    0 0 60px rgba(200,240,80,0.35);
}

/* floor reflection */
.arc-floor {
  position: absolute; left: 10%; right: 10%; bottom: 14%; height: 24px;
  background: radial-gradient(ellipse at center, rgba(200,240,80,0.4) 0%, rgba(46,174,63,0.15) 40%, transparent 75%);
  filter: blur(8px);
  animation: arc-floor-pulse 1.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes arc-floor-pulse {
  0%, 100% { opacity: 0.6; transform: scaleX(0.9); }
  18% { opacity: 1; transform: scaleX(1.05); }
}

/* HUD */
.arc-hud-top, .arc-hud-bot {
  position: absolute; left: 0; right: 0; padding: 18px 24px;
  display: flex; justify-content: space-between; pointer-events: none; z-index: 3;
  font-size: 11px; letter-spacing: .14em;
}
.arc-hud-top { top: 0; color: rgba(200,240,80,0.8); }
.arc-hud-bot { bottom: 0; color: rgba(255,255,255,0.55); justify-content: center; }

/* Sections — padding driven by density tweak */
.section { padding: var(--pme-section-py, 100px) 0; }
.section-tight { padding: calc(var(--pme-section-py, 100px) * 0.64) 0; }

/* Catalog grid */
.catalog-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 32px; }
.catalog-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pme-gap);
}
@media (max-width: 1100px){ .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px){ .catalog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .catalog-grid { grid-template-columns: 1fr; } }

/* Maintenance band */
.service-band {
  position: relative; background: #1A2620; color: #fff;
  padding: 90px 0; overflow: hidden;
}
.service-band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 90% 10%, rgba(200,240,80,0.18) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(46,174,63,0.14) 0%, transparent 50%);
  pointer-events:none;
}
.service-band .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position:relative; z-index:1; }
@media (max-width: 900px){ .service-band .grid { grid-template-columns: 1fr; gap: 40px; } }
.service-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.service-feature {
  border: 1px solid #1f2a23; border-radius: 14px; padding: 20px;
  transition: border-color .25s, transform .25s, background .25s;
}
.service-feature:hover { border-color: var(--pme-lime); transform: translateY(-3px); background: rgba(200,240,80,0.04); }
.service-feature .num { font-family: var(--mono); color: var(--pme-lime); font-size: 11px; letter-spacing: .14em; }
.service-feature h4 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 8px 0 6px; color:#fff; }
.service-feature p { font-size: 13px; color: #a4b0a8; line-height: 1.5; margin: 0; }

/* Story */
.story-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
@media (max-width: 900px){ .story-grid { grid-template-columns: 1fr; gap: 30px; } }
.story-text p { font-size: 18px; line-height: 1.7; color: var(--pme-ink-2); }
.story-text p + p { margin-top: 18px; }
.story-pull {
  border-left: 2px solid var(--pme-forest);
  padding: 6px 0 6px 24px; margin: 28px 0;
  font-family: var(--serif); font-size: 26px; line-height: 1.3; color: var(--pme-ink); letter-spacing: -0.01em;
}

/* CTA band */
.cta-band {
  background: var(--pme-forest-deep); color: #fff; border-radius: 24px;
  padding: 70px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center;
  position: relative; overflow: hidden;
}
.cta-band::before{
  content:""; position:absolute; right: -100px; top: -100px; width:400px; height:400px;
  background: radial-gradient(circle, rgba(200,240,80,0.5), transparent 70%); filter: blur(40px);
}
@media (max-width: 800px){ .cta-band { grid-template-columns: 1fr; padding: 40px; } }

/* Categories tiles */
.cat-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1100px){ .cat-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px){ .cat-tiles { grid-template-columns: repeat(2, 1fr); } }
.cat-tile {
  position: relative; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden;
  background: var(--pme-paper); border: 1px solid var(--pme-rule);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .25s;
}
.cat-tile:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -28px rgba(14,26,20,0.3); border-color: var(--pme-forest); }
.cat-tile-glyph {
  position: absolute; right: 18px; top: 18px; color: var(--pme-forest);
  opacity: .55; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s;
}
.cat-tile:hover .cat-tile-glyph { transform: rotate(-12deg) scale(1.1); opacity: .9; color: var(--pme-forest-deep); }
.cat-tile h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0; letter-spacing: -0.01em; }
.cat-tile .num { font-family: var(--mono); font-size: 11px; color: var(--pme-ink-3); margin-bottom: 8px; }
.cat-tile .arrow {
  margin-top: 12px; width: 36px; height: 36px; border-radius: 999px;
  background: var(--pme-ink); color: #fff;
  display:flex; align-items:center; justify-content:center;
  transition: background .25s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.cat-tile:hover .arrow { background: var(--pme-lime); color: var(--pme-forest-deep); transform: translateX(4px); }
.cat-tile .arrow svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Logo canvas swatches */
.logo-card {
  background: #fff; border-radius: 16px; border: 1px solid var(--pme-rule);
  padding: 40px; display: flex; flex-direction: column; gap: 24px;
}
.logo-card .lockup { display: flex; align-items: center; gap: 16px; }
.logo-card h3 { font-family: var(--serif); font-weight: 400; margin: 0; font-size: 22px; }
.logo-card p { font-size: 14px; color: var(--pme-ink-3); line-height: 1.5; margin: 0; }
.logo-card .swatch-row { display: flex; gap: 10px; }
.logo-card .sw { flex: 1; height: 40px; border-radius: 8px; border:1px solid rgba(0,0,0,.05); }

/* Quote drawer */
.quote-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  background: var(--pme-ink); color: #fff;
  padding: 14px 18px; border-radius: 999px; border: 0;
  display: inline-flex; gap: 10px; align-items: center;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.4);
  transition: transform .25s, background .25s;
}
.quote-fab:hover { transform: translateY(-2px); background: var(--pme-forest-deep); }
.quote-fab .badge {
  background: var(--pme-lime); color: var(--pme-forest-deep);
  border-radius: 999px; padding: 2px 8px; font-family: var(--mono); font-size: 10px;
}