.elementor-kit-78{--e-global-color-primary:#2B251C;--e-global-color-secondary:#5A4F3F;--e-global-color-text:#2B251C;--e-global-color-accent:#B46A45;--e-global-color-ed75879:#FDF8EC;--e-global-color-6a69331:#F6EEDB;--e-global-color-ff4c274:#E3D7B6;--e-global-color-16ae66d:#8A7C64;--e-global-color-8e1f160:#C89758;--e-global-color-f46ca70:#8E9A7C;--e-global-color-277ea07:#3A4B66;--e-global-color-3a22450:#C5917B;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-size:16px;--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Quicksand";--e-global-typography-secondary-font-size:12px;--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Nunito Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Quicksand";--e-global-typography-accent-font-weight:500;}.elementor-kit-78 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;gap:2px;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   LUMIO · Studio Noro — Elementor PRO stylesheet (slimmed)
   ────────────────────────────────────────────────────────────
   Paste into WPCode → CSS Snippet (Site-Wide Header).

   This is the PRO version. It removes the hand-rolled header,
   nav, hamburger-drawer, and button-text hacks that Elementor
   Pro now handles natively (Theme Builder, Nav Menu widget,
   Popup Builder, Loop Grid). What remains is the brand layer:
   design tokens, paper texture, typography treatment, and the
   bespoke "studio feel" component styles no widget provides.

   ⚠ The paper-canvas URL is already pointed at your Media
   Library upload. If you move the file, update §2.
============================================================ */


/* ─── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --lm-paper:        #fdf8ec;
  --lm-paper-2:      #f6eedb;
  --lm-paper-3:      #ede3c8;
  --lm-paper-deep:   #e3d7b6;

  --lm-ink:          #2b251c;
  --lm-ink-2:        #5a4f3f;
  --lm-ink-3:        #8a7c64;
  --lm-ink-line:     rgba(43, 37, 28, 0.16);

  --lm-rust:         #b46a45;
  --lm-ochre:        #c89758;
  --lm-terracotta:   #c1755a;
  --lm-sage:         #8e9a7c;
  --lm-moss:         #5d6b4e;
  --lm-indigo:       #3a4b66;
  --lm-mauve:        #9a7c8e;
  --lm-teal:         #5a8b8a;
  --lm-rose:         #c5917b;

  --lm-accent:       var(--lm-rust);

  --lm-f-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --lm-f-ui:      "Quicksand", "Avenir Next", "Nunito Sans", system-ui, sans-serif;
  --lm-f-body:    "Nunito Sans", "Avenir Next", "Quicksand", system-ui, sans-serif;

  --lm-section-y: clamp(64px, 9vw, 140px);
  --lm-gutter:    clamp(20px, 4vw, 64px);
}


/* ─── 2. PAGE BACKGROUND + PAPER TEXTURE ───────────────────── */
body {
  background: var(--lm-paper);
  color: var(--lm-ink);
  font-family: var(--lm-f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 600px) { body { font-size: 16px; } }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  background-image: url("https://lumio-staging.dev.newzenith.ph/wp-content/uploads/2026/05/paper-canvas.png");
  background-size: 320px auto;
  background-repeat: repeat;
  opacity: 0.22;
  mix-blend-mode: multiply;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(255, 250, 238, 0.55), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(180, 150, 100, 0.12), transparent 65%);
}

/* Keep horizontal overflow tamed; images never overflow */
html, body { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; height: auto; }


/* ─── 3. TYPOGRAPHY ────────────────────────────────────────── */
/* Make every Elementor heading default to the display serif */
.elementor-heading-title {
  font-family: var(--lm-f-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--lm-ink);
}
.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(28px, 4.6vw, 64px); }
.elementor-widget-heading h3.elementor-heading-title { font-size: clamp(20px, 2.2vw, 32px); }

/* Hero headline treatment — apply classes to two Heading widgets */
.lumio-headline-lead,
.lumio-headline-lead .elementor-heading-title {
  font-family: var(--lm-f-display) !important;
  font-size: clamp(28px, 5vw, 76px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  display: block !important;
}
.lumio-headline-name,
.lumio-headline-name .elementor-heading-title {
  font-family: var(--lm-f-display) !important;
  font-size: clamp(70px, 14vw, 200px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  line-height: 0.95 !important;
  display: block !important;
  max-width: 100%;
  word-break: keep-all;
}
@media (max-width: 600px) {
  .lumio-headline-name,
  .lumio-headline-name .elementor-heading-title {
    font-size: clamp(60px, 18vw, 120px) !important;
    letter-spacing: 0 !important;
  }
}
@media (max-width: 380px) {
  .lumio-headline-name,
  .lumio-headline-name .elementor-heading-title {
    font-size: clamp(48px, 16vw, 72px) !important;
  }
}

.lumio-lede {
  font-size: clamp(16px, 1.4vw, 21px);
  color: var(--lm-ink-2);
  line-height: 1.55;
  max-width: 56ch;
  text-wrap: pretty;
}
.lumio-muted { color: var(--lm-ink-2); }
.lumio-faint { color: var(--lm-ink-3); }


/* ─── 4. EYEBROW (kicker label) ────────────────────────────── */
/* HTML widget: <span class="lumio-eyebrow">Problem &amp; Løsning</span> */
.lumio-eyebrow {
  font-family: var(--lm-f-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lm-ink-3);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.lumio-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--lm-ink-3);
}
@media (max-width: 480px) {
  .lumio-eyebrow { font-size: 11px; letter-spacing: 0.18em; gap: 10px; }
  .lumio-eyebrow::before { width: 20px; }
}


/* ─── 5. BUTTONS ───────────────────────────────────────────── */
/* You CAN style buttons globally in Pro (Site Settings → Buttons),
   but these classes keep the exact pill look. Apply CSS Classes:
   lumio-btn lumio-btn-primary  /  lumio-btn lumio-btn-ghost  /  lumio-btn lumio-btn-link */
.elementor-button.lumio-btn,
a.lumio-btn {
  font-family: var(--lm-f-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  padding: 14px 26px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
  line-height: 1 !important;
}
.elementor-button.lumio-btn-primary,
a.lumio-btn-primary {
  background-color: var(--lm-ink) !important;
  color: var(--lm-paper) !important;
}
.elementor-button.lumio-btn-primary:hover,
a.lumio-btn-primary:hover {
  background-color: #14110c !important;
  color: var(--lm-paper) !important;
  transform: translateY(-1px);
}
.elementor-button.lumio-btn-ghost,
a.lumio-btn-ghost {
  background-color: transparent !important;
  color: var(--lm-ink) !important;
  border-color: var(--lm-ink-line) !important;
}
.elementor-button.lumio-btn-ghost:hover,
a.lumio-btn-ghost:hover {
  background-color: rgba(43, 37, 28, 0.05) !important;
  border-color: rgba(43, 37, 28, 0.3) !important;
}
.elementor-button.lumio-btn-link,
a.lumio-btn-link {
  background-color: transparent !important;
  color: var(--lm-ink) !important;
  padding: 0 0 4px 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--lm-ink-line) !important;
}
.elementor-button.lumio-btn-link:hover,
a.lumio-btn-link:hover { border-bottom-color: var(--lm-ink) !important; }

/* Header CTA suffix — translatable HTML, hidden below 1100px:
   <a class="lumio-btn lumio-btn-primary">
     <span>Tilmeld dig</span><span class="lumio-cta-extra"> — få 20% rabat</span>
   </a> */
@media (max-width: 1100px) { .lumio-cta-extra { display: none !important; } }

/* Header offer line beside the CTA (Text Editor widget, class lumio-header-offer).
   Hidden on mobile/tablet to save space — the button alone carries the action. */
.lumio-header-offer {
  font-family: var(--lm-f-ui);
  font-size: 13px;
  color: var(--lm-ink-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 768px) {
  .lumio-header-offer { display: none; }
}


/* ─── 6. NAV MENU WIDGET — brand styling ───────────────────── */
/* Pro's Nav Menu widget. Most styling is in the widget panel,
   but these align it to the brand and handle the sticky header. */
.lumio-header {
  transition: background .3s ease, backdrop-filter .3s ease;
}
.lumio-header.elementor-sticky--effects {
  background: rgba(253, 248, 236, 0.88) !important;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--lm-ink-line);
}
/* Nav links — Quicksand, underline on hover */
.lumio-header .elementor-nav-menu .elementor-item {
  font-family: var(--lm-f-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--lm-ink-2) !important;
}
.lumio-header .elementor-nav-menu .elementor-item:hover {
  color: var(--lm-ink) !important;
}


/* ─── 7. LOGO ──────────────────────────────────────────────── */
/* If using an Image widget for the logo, just set its size in the
   widget. If using HTML widget with the N-mark + wordmark: */
.lumio-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--lm-ink);
  font-family: var(--lm-f-display);
}
.lumio-logo-mark {
  width: 36px; height: 36px;
  border: 1px solid var(--lm-ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-style: italic;
  flex-shrink: 0;
}
.lumio-logo-word {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Image-based logo */
.lumio-logo-img { height: 40px; width: auto; display: block; }
@media (max-width: 600px) {
  .lumio-logo-mark { width: 30px; height: 30px; font-size: 17px; }
  .lumio-logo-word { font-size: 18px; }
  .lumio-logo-img  { height: 32px; }
}
@media (max-width: 380px) {
  .lumio-logo-word { display: none; }
  .lumio-logo-img  { height: 28px; }
}

/* Mobile: pin logo to the far left, CTA to the far right.
   Put CSS Class `lumio-header-bar` on the header's inner row container. */
@media (max-width: 980px) {
  .lumio-header-bar,
  .lumio-header-bar > .e-con-inner {
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }
  /* Logo column hugs the left, doesn't grow/center */
  .lumio-header-bar .lumio-logo,
  .lumio-header-bar .lumio-logo-img {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}


/* ─── 8. SECTION PADDING + HEAD HELPERS ────────────────────── */
/* Apply `lumio-section` to every section's OUTER container — gives
   consistent vertical rhythm + side gutters without hand-typing
   clamp() into Elementor's padding fields. */
.lumio-section {
  padding-top: var(--lm-section-y);
  padding-bottom: var(--lm-section-y);
  padding-left: var(--lm-gutter);
  padding-right: var(--lm-gutter);
}
.lumio-section-tight {
  padding-top: clamp(48px, 7vw, 110px);
  padding-bottom: clamp(48px, 7vw, 110px);
  padding-left: var(--lm-gutter);
  padding-right: var(--lm-gutter);
}

.lumio-section-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(32px, 5vw, 72px);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.lumio-section-head-left {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: clamp(32px, 5vw, 72px);
}


/* ─── 9. HERO ──────────────────────────────────────────────── */
.lumio-hero-meta {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: inline-flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--lm-f-ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lm-ink-3);
}
.lumio-hero-meta li { display: inline-flex; align-items: center; position: relative; }
.lumio-hero-meta li + li::before {
  content: "·";
  position: absolute;
  left: -16px;
  color: var(--lm-ink-3);
}
@media (max-width: 600px) {
  .lumio-hero-meta { flex-direction: column; gap: 8px; font-size: 11px; }
  .lumio-hero-meta li + li::before { display: none; }
}
.lumio-pagenum {
  font-family: var(--lm-f-display);
  font-style: italic;
  color: var(--lm-ink-3);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-align: center;
}


/* ─── 10. PROBLEM / SOLUTION LISTS ─────────────────────────── */
.lumio-ps-kicker {
  font-family: var(--lm-f-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
}
.lumio-ps-kicker-problem  { color: var(--lm-rust); }
.lumio-ps-kicker-solution { color: var(--lm-moss); }
.lumio-ps-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lumio-ps-list li {
  padding-left: 22px;
  position: relative;
  font-size: 16px;
  color: var(--lm-ink-2);
}
.lumio-ps-list li::before {
  content: "·";
  position: absolute;
  left: 6px; top: -2px;
  font-size: 28px;
  line-height: 1;
  color: var(--lm-ink-3);
}
.lumio-ps-list-check li::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--lm-moss);
  border-radius: 50%;
  top: 9px; left: 4px;
  font-size: 0;
}


/* ─── 11. GROWS STAGES ─────────────────────────────────────── */
.lumio-stage-art {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.lumio-stage-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.lumio-stage-motif {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--lm-f-ui);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(43, 37, 28, 0.6);
  background: rgba(253, 248, 236, 0.85);
  padding: 4px 10px;
  border-radius: 999px;
}
.lumio-age {
  font-family: var(--lm-f-display);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 22px);
  color: var(--lm-ink-2);
}
.lumio-grows-footnote {
  text-align: center;
  margin-top: clamp(32px, 5vw, 64px);
  font-family: var(--lm-f-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--lm-ink-2);
}
@media (max-width: 820px) { .lumio-stage-art { aspect-ratio: 4 / 3; } }


/* ─── 12. HOW-IT-WORKS STEPS ───────────────────────────────── */
.lumio-step-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lm-ink-line);
}
.lumio-step-num {
  font-family: var(--lm-f-display);
  font-style: italic;
  font-size: 26px;
  color: var(--lm-ink-2);
}
.lumio-step-art {
  aspect-ratio: 5 / 4;
  border-radius: 2px;
  overflow: hidden;
  background: var(--lm-paper-2);
}
.lumio-step-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ─── 12b. IMAGE BOX VARIANT (simpler How-It-Works / Grows) ── */
/* Apply CSS Class `lumio-imgbox` to an Image Box widget for the
   image+title+description-in-one-widget layout. Drops the 01/icon row. */
.lumio-imgbox .elementor-image-box-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.lumio-imgbox .elementor-image-box-img {
  width: 100% !important;
  margin: 0 0 4px 0 !important;
}
.lumio-imgbox .elementor-image-box-img img {
  width: 100% !important;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.lumio-imgbox .elementor-image-box-title,
.lumio-imgbox .elementor-image-box-content .elementor-image-box-title {
  font-family: var(--lm-f-display) !important;
  font-weight: 600 !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.1 !important;
  color: var(--lm-ink) !important;
  margin: 0 0 8px 0 !important;
}
.lumio-imgbox .elementor-image-box-description {
  font-family: var(--lm-f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--lm-ink-2);
  margin: 0;
}
/* Grows variant — taller 4:5 image + motif handled separately */
.lumio-imgbox-tall .elementor-image-box-img img {
  aspect-ratio: 4 / 5;
}

/* ─── 12c. STEPS GRID (auto-wrap, replaces stack class) ────── */
/* Put `lumio-steps-grid` on the steps CONTAINER instead of
   lumio-stack-mobile. Columns auto-wrap: 5→3→2→1 as width shrinks. */
.lumio-steps-grid,
.lumio-steps-grid > .e-con-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: clamp(24px, 3vw, 40px) !important;
  justify-content: center;
}
.lumio-steps-grid > .e-con,
.lumio-steps-grid > .e-con-inner > .e-con {
  flex: 0 1 200px !important;
  max-width: 240px !important;
  min-width: 180px !important;
}
/* Tablet: cap at 3 across */
@media (max-width: 1024px) {
  .lumio-steps-grid > .e-con,
  .lumio-steps-grid > .e-con-inner > .e-con {
    flex: 0 1 30% !important;
    max-width: 32% !important;
  }
}
/* Small tablet / large phone: 2 across */
@media (max-width: 780px) {
  .lumio-steps-grid > .e-con,
  .lumio-steps-grid > .e-con-inner > .e-con {
    flex: 0 1 44% !important;
    max-width: 46% !important;
  }
}
/* Phone: 1 column */
@media (max-width: 540px) {
  .lumio-steps-grid > .e-con,
  .lumio-steps-grid > .e-con-inner > .e-con {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* ─── 13. WHY PILLARS ──────────────────────────────────────── */
.lumio-pillar-kicker {
  font-family: var(--lm-f-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--lm-ochre);
}

/* Icon Box variant — apply class `lumio-pillar` to an Icon Box widget */
.lumio-pillar {
  padding-top: 20px !important;
  border-top: 1px solid var(--lm-ink-line);
}
.lumio-pillar .elementor-icon-box-wrapper {
  text-align: left;
}
.lumio-pillar .elementor-icon-box-icon {
  margin-bottom: 14px !important;
}
.lumio-pillar .elementor-icon-box-icon .elementor-icon {
  color: var(--lm-ochre);
  fill: var(--lm-ochre);
  font-size: 26px;
}
.lumio-pillar .elementor-icon-box-title {
  font-family: var(--lm-f-display) !important;
  font-weight: 500 !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  line-height: 1.15 !important;
  color: var(--lm-ink) !important;
  margin: 0 0 8px 0 !important;
}
.lumio-pillar .elementor-icon-box-description {
  font-family: var(--lm-f-body) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--lm-ink-2) !important;
  margin: 0 !important;
}

/* ─── 13a. PILLARS GRID (5 → 3 → 1 across breakpoints) ─────── */
/* Put `lumio-pillars-grid` on the CONTAINER holding the Icon Boxes.
   Desktop: 5 across · Tablet: 3 across · Mobile: 1. */
.lumio-pillars-grid,
.lumio-pillars-grid > .e-con-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  gap: clamp(24px, 3vw, 48px) !important;
  align-items: stretch;
  justify-content: center;
}
.lumio-pillars-grid > .e-con,
.lumio-pillars-grid > .e-con-inner > .e-con,
.lumio-pillars-grid > .elementor-widget {
  flex: 1 1 0 !important;          /* 5 equal columns on desktop */
  min-width: 0 !important;
  max-width: none !important;
}
/* Tablet: 3 across */
@media (max-width: 1024px) {
  .lumio-pillars-grid > .e-con,
  .lumio-pillars-grid > .e-con-inner > .e-con,
  .lumio-pillars-grid > .elementor-widget {
    flex: 1 1 28% !important;
    max-width: 31% !important;
  }
}
/* Mobile: 1 column */
@media (max-width: 600px) {
  .lumio-pillars-grid,
  .lumio-pillars-grid > .e-con-inner {
    flex-direction: column !important;
  }
  .lumio-pillars-grid > .e-con,
  .lumio-pillars-grid > .e-con-inner > .e-con,
  .lumio-pillars-grid > .elementor-widget {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ─── 13b. GROWS GRID (spread 3 stages full width) ─────────── */
/* Put `lumio-grows-grid` on the 3-stage CONTAINER so the columns
   fill the section width evenly instead of clustering center.
   Each column gets equal share with a comfortable gap. */
.lumio-grows-grid,
.lumio-grows-grid > .e-con-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: clamp(32px, 4vw, 64px) !important;
  justify-content: space-between;
  align-items: stretch;
}
.lumio-grows-grid > .e-con,
.lumio-grows-grid > .e-con-inner > .e-con {
  flex: 1 1 0 !important;       /* equal width, grow to fill */
  min-width: 0 !important;
  max-width: none !important;
}
/* Tablet: 1 column, full width */
@media (max-width: 980px) {
  .lumio-grows-grid,
  .lumio-grows-grid > .e-con-inner {
    flex-direction: column !important;
  }
  .lumio-grows-grid > .e-con,
  .lumio-grows-grid > .e-con-inner > .e-con {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}


/* ─── 14. THEME CARDS (Loop Grid template) ─────────────────── */
.lumio-theme-card-art {
  width: 100%;
  aspect-ratio: 3 / 2;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.lumio-theme-card-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.lumio-pill {
  font-family: var(--lm-f-ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  display: inline-block;
  background: rgba(253, 248, 236, 0.92);
  color: var(--lm-ink-2);
}
.lumio-pill-released { background: var(--lm-ink); color: var(--lm-paper); }
.lumio-theme-card-age {
  font-family: var(--lm-f-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lm-ink-3);
}
/* Card surface + hover (apply to the Loop item container) */
.lumio-card {
  background: rgba(255, 250, 238, 0.4);
  border: 1px solid var(--lm-ink-line);
  border-radius: 4px;
  padding: clamp(16px, 2vw, 22px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lumio-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 60px -36px rgba(43, 37, 28, 0.4);
  border-color: rgba(43, 37, 28, 0.3);
}


/* ─── 15. WATERCOLOR PLACEHOLDER FRAME ─────────────────────── */
.lumio-wc {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--lm-paper-2);
  box-shadow: 0 1px 0 rgba(43, 37, 28, 0.06),
              0 20px 60px -30px rgba(43, 37, 28, 0.25);
}
.lumio-wc img { display: block; width: 100%; height: 100%; object-fit: cover; }


/* ─── 16. FAQ (Pro Accordion) ──────────────────────────────── */
.lumio-faq .e-n-accordion,
.lumio-faq .elementor-accordion {
  border-top: 1px solid var(--lm-ink-line);
  border-radius: 0 !important;
}
/* Kill the full box border on every item — keep only a bottom hairline */
.lumio-faq .e-n-accordion-item,
.lumio-faq details.e-n-accordion-item,
.lumio-faq .elementor-accordion-item {
  border: 0 !important;
  border-bottom: 1px solid var(--lm-ink-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* The clickable summary/title row */
.lumio-faq .e-n-accordion-item-title,
.lumio-faq summary.e-n-accordion-item-title,
.lumio-faq .elementor-tab-title {
  font-family: var(--lm-f-display) !important;
  font-size: clamp(18px, 1.8vw, 26px) !important;
  color: var(--lm-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px 0 !important;
  box-shadow: none !important;
}
/* The answer content container (nested accordion wraps it in .e-con) */
.lumio-faq .e-n-accordion-item .e-con,
.lumio-faq .e-n-accordion-item > .e-con-inner,
.lumio-faq .elementor-tab-content {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--lm-ink-2);
  font-family: var(--lm-f-body);
  font-size: 15px;
  line-height: 1.6;
  padding: 0 0 24px 0 !important;
}


/* ─── 17. FINAL CTA + FORM ─────────────────────────────────── */
.lumio-final-cta-h {
  font-family: var(--lm-f-display);
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.05;
}
.lumio-form { width: 100%; max-width: 460px; margin: 0 auto; }

/* MOBILE-FIRST: default = vertical stack, full-width fields + button.
   Structure-agnostic: works whether CF7 wraps fields in <p> or not.
   `display:contents` flattens the <p> wrappers so the flex container
   sees the actual field-control spans + submit as its items. */
.lumio-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 14px;
}
.lumio-form > p { margin: 0 !important; display: contents; }
.lumio-form .wpcf7-form-control-wrap,
.lumio-form .wpcf7-submit,
.lumio-form input[type="submit"] {
  width: 100% !important;
  display: block;
}
.lumio-form .wpcf7-response-output,
.wpcf7 .wpcf7-response-output { width: 100%; margin: 8px 0 0 !important; }

/* DESKTOP ONLY (>1024px): email + age + button on one row */
@media (min-width: 1025px) {
  .lumio-form {
    max-width: 680px;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
  }
  .lumio-form .wpcf7-form-control-wrap[data-name="your-email"] { flex: 1 1 260px; }
  .lumio-form .wpcf7-form-control-wrap[data-name="child-age"]  { flex: 0 1 200px; }
  .lumio-form .wpcf7-form-control-wrap,
  .lumio-form .wpcf7-submit,
  .lumio-form input[type="submit"] { width: auto !important; }
  .lumio-form .wpcf7-submit,
  .lumio-form input[type="submit"] { flex: 0 0 auto; }
}
.lumio-form input[type="email"],
.lumio-form input[type="text"],
.lumio-form select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--lm-ink-line);
  border-radius: 999px;
  background: rgba(255, 250, 238, 0.6);
  font-family: var(--lm-f-body);
  font-size: 15px;
  color: var(--lm-ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.lumio-form input:focus, .lumio-form select:focus {
  border-color: var(--lm-ink-2);
  background: rgba(255, 250, 238, 0.9);
}
.lumio-form input[type="submit"],
.lumio-form .wpcf7-submit {
  width: auto;
  padding: 14px 28px;
  background: var(--lm-ink);
  color: var(--lm-paper);
  border: none;
  border-radius: 999px;
  font-family: var(--lm-f-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  height: 100%;
}

/* Tablet & mobile: form stacks by default (mobile-first, see above).
   Single row is applied only at min-width:1025px. */



/* ─── 18. THEME POPUP (Pro Popup Builder) ──────────────────── */
/* Pro's Popup Builder handles the modal shell + triggers. These
   just brand the radio pills + form fields inside the popup. */
.lumio-popup-form fieldset { border: 0; padding: 0; margin: 0; }
.lumio-popup-form .wpcf7-list-item { display: inline-block; margin: 0 6px 6px 0; }
.lumio-popup-form .wpcf7-list-item label {
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--lm-ink-line);
  border-radius: 999px;
  font-family: var(--lm-f-ui);
  font-size: 13px;
}
.lumio-popup-form .wpcf7-list-item label:has(input:checked) {
  background: var(--lm-ink);
  color: var(--lm-paper);
  border-color: var(--lm-ink);
}


/* ─── 19. FOOTER ───────────────────────────────────────────── */
.lumio-footer-kicker {
  font-family: var(--lm-f-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--lm-ink-2);
}
.lumio-footer-contact {
  font-family: var(--lm-f-display);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--lm-ink);
  text-decoration: none;
}
.lumio-footer-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lumio-footer-list a {
  color: var(--lm-ink);
  text-decoration: none;
  font-family: var(--lm-f-ui);
  font-size: 14px;
}
.lumio-footer-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lumio-footer-base {
  font-family: var(--lm-f-ui);
  font-size: 12px;
  color: var(--lm-ink-3);
}


/* ─── 20. MISC ─────────────────────────────────────────────── */
::selection { background: var(--lm-ochre); color: var(--lm-paper); }
:focus-visible { outline: 2px solid var(--lm-ochre); outline-offset: 3px; border-radius: 4px; }
html { scroll-behavior: smooth; }

/* Reusable stacking utilities — add to any container's CSS Classes
   to force its children to stack on smaller screens. */
@media (max-width: 980px) {
  .lumio-stack-tablet, .lumio-stack-tablet > .e-con-inner { flex-direction: column !important; }
  .lumio-stack-tablet > .e-con, .lumio-stack-tablet > .e-con-inner > .e-con { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 720px) {
  .lumio-stack-mobile, .lumio-stack-mobile > .e-con-inner { flex-direction: column !important; }
  .lumio-stack-mobile > .e-con, .lumio-stack-mobile > .e-con-inner > .e-con { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 768px) {
  .lumio-header .elementor-button {
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 9px 14px !important;
    letter-spacing: 0.03em !important;
  }
}/* End custom CSS */