/* ============================================================================
   PACK: Light Editorial
   Warm "paper" canvas, Fraunces serif headings with an italic clay accent, one
   restrained terracotta, generous whitespace + hairline rules. Reads like an
   upscale architecture/interiors magazine. Best for remodelers, custom builders,
   luxury home services, interiors, landscape design — calm, warm, premium.
   Scoped under body.pack-light-editorial so it only applies when opted in; it
   restyles the shared .x-* kit, so it drops straight into the generator later.
   The base components ship DARK (white-on-dark via --brand-secondary), so most of
   this pack is a deliberate inversion to the light/paper aesthetic.
   ============================================================================ */
body.pack-light-editorial {
  --brand-bg: #F7F2E9;          /* warm off-white "paper" */
  --brand-bg-alt: #EFE8DA;      /* slightly deeper paper for alt bands */
  --brand-text: #22201B;        /* deep warm ink */
  --brand-text-muted: #6E665A;  /* muted ink for secondary copy */
  --brand-primary: #B25733;     /* restrained terracotta / clay accent */
  --brand-secondary: #22201B;   /* ink — drives footer + dark tiles */
  --brand-border: #E0D8C8;      /* hairline border */
  --radius: 6px;                /* calmer, less rounded than the dark pack */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  background: #F7F2E9;
  color: #22201B;
}
body.pack-light-editorial { font-family: var(--font-body); }

/* Header — solid paper, hairline bottom rule, ink nav.
   NOTE: no backdrop-filter (it breaks the mobile slide-in menu). */
body.pack-light-editorial .site-header { background: #F7F2E9; border-bottom: 1px solid #E0D8C8; }
body.pack-light-editorial .nav-logo { color: #22201B; font-weight: 600; letter-spacing: .005em; }
body.pack-light-editorial .nav-links > li > a { color: #2c2a24; letter-spacing: .015em; }
body.pack-light-editorial .nav-links > li > a:hover { color: #B25733; }
body.pack-light-editorial .nav-toggle { color: #22201B; }
/* Nav CTA — quiet outlined ink, not a loud filled pill (keeps the header calm). */
body.pack-light-editorial .nav-cta { background: transparent; color: #22201B !important; border: 1px solid #22201B; border-radius: 100px; font-weight: 600; }
body.pack-light-editorial .nav-cta:hover { background: #22201B; color: #F7F2E9 !important; opacity: 1; }

/* Hero — airy paper. Override the base dark + the .x-hero--gradient variant
   (which would otherwise blend secondary→primary). Soft warm radial tint on the
   art layer + a hairline top rule; light and open, never a dark glow. */
body.pack-light-editorial .x-hero,
body.pack-light-editorial .x-hero--gradient { background: #F7F2E9; color: #22201B; min-height: 88vh; }
body.pack-light-editorial .x-hero-art {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(1000px 560px at 80% 12%, rgba(178,87,51,.08), transparent 60%),
    radial-gradient(760px 620px at 6% 98%, rgba(178,87,51,.045), transparent 62%),
    linear-gradient(180deg, #FAF6EE 0%, #F2EBDD 100%);
  border-top: 1px solid #ECE3D2;
}
/* Faint "paper grain" — a barely-there warm dot texture, masked to the upper
   area so the type still sits on clean paper. Subtle on purpose. */
body.pack-light-editorial .x-hero-art::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(34,32,27,.022) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 64% 30%, #000, transparent 80%);
  mask-image: radial-gradient(circle at 64% 30%, #000, transparent 80%);
}
body.pack-light-editorial .x-hero .container { z-index: 2; }
body.pack-light-editorial .x-hero h1 {
  font-family: var(--font-heading); font-weight: 450; letter-spacing: -.015em;
  line-height: 1.06; font-size: clamp(2.6rem, 6.2vw, 4.8rem); max-width: 17ch;
  color: #22201B; text-shadow: none;
}
body.pack-light-editorial .x-hero h1 em { font-style: italic; color: #B25733; font-weight: 450; }
body.pack-light-editorial .x-hero .x-sub { color: #57503F; }

/* Eyebrow — understated outlined label in terracotta on transparent, with a
   short leading rule instead of a loud solid pill. */
body.pack-light-editorial .x-eyebrow {
  background: transparent; color: #9C4A2A; border: 0; border-radius: 0;
  padding: 0; margin-bottom: 22px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; font-size: 11.5px;
}
body.pack-light-editorial .x-eyebrow::before {
  content: ''; width: 26px; height: 1px; background: #B25733; margin-right: 2px;
}

/* Hero chips — ink text, terracotta icons, hairline divider above. */
body.pack-light-editorial .x-chips { border-top: 1px solid #E0D8C8; }
body.pack-light-editorial .x-chip { color: #4a4438; font-weight: 600; }
body.pack-light-editorial .x-chip svg { color: #B25733; }

/* Buttons — primary solid terracotta (white text); ghost = ink outline on light
   (base assumes white-on-dark, so re-set border + text to ink). */
body.pack-light-editorial .x-btn { font-weight: 600; letter-spacing: .01em; }
body.pack-light-editorial .x-btn-primary { background: #B25733; color: #fff; box-shadow: 0 12px 30px rgba(178,87,51,.20); }
body.pack-light-editorial .x-btn-primary:hover { background: #9C4A2A; color: #fff; }
body.pack-light-editorial .x-btn-ghost { background: transparent; color: #22201B; border: 1px solid rgba(34,32,27,.35); }
body.pack-light-editorial .x-btn-ghost:hover { background: rgba(34,32,27,.05); color: #22201B; border-color: #22201B; }
/* .x-btn-white sits on the ink Big-CTA band below — keep it readable there. */
body.pack-light-editorial .x-btn-white { background: #F7F2E9; color: #22201B; }
body.pack-light-editorial .x-btn-white:hover { background: #fff; color: #22201B; }

/* Stat strip — light paper-alt band, hairline rules, ink serif numerals,
   muted labels. (Override base dark.) */
body.pack-light-editorial .x-stats { background: #EFE8DA; color: #22201B; border-top: 1px solid #E0D8C8; border-bottom: 1px solid #E0D8C8; }
body.pack-light-editorial .x-stat .num { font-family: var(--font-heading); font-weight: 450; color: #22201B; }
body.pack-light-editorial .x-stat .lbl { color: #6E665A; }
/* Mobile spec-sheet dividers default to white (over dark) — re-tint to ink. */
@media (max-width:680px){
  body.pack-light-editorial .x-stat { border-bottom-color: rgba(34,32,27,.10); }
  body.pack-light-editorial .x-stat:last-child { border-bottom: 0; }
}

/* Section headings — serif ink h2, terracotta kicker, muted ink lead. */
body.pack-light-editorial .x-head h2 { font-family: var(--font-heading); font-weight: 450; color: #22201B; letter-spacing: -.015em; }
body.pack-light-editorial .x-head .k { color: #9C4A2A; letter-spacing: .2em; }
body.pack-light-editorial .x-head p { color: #6E665A; }

/* Service tiles — KEPT as elegant dark image cards (white text sits over the
   .x-svc-ph gradient + base scrim, so it must stay light). Refined for the pack:
   serif h3, calmer radius + hairline border, gentle lift with a terracotta
   bottom-edge sweep + warm arrow on hover. */
body.pack-light-editorial .x-svc { border-radius: 8px; border: 1px solid #E0D8C8; box-shadow: 0 14px 34px rgba(34,32,27,.10); transition: transform .35s ease, box-shadow .35s ease; }
body.pack-light-editorial .x-svc::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #B25733; transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.16,.7,.3,1); z-index: 3; }
body.pack-light-editorial .x-svc:hover { transform: translateY(-5px); box-shadow: 0 24px 54px rgba(34,32,27,.16); }
body.pack-light-editorial .x-svc:hover::before { transform: scaleX(1); }
body.pack-light-editorial .x-svc h3 { font-family: var(--font-heading); font-weight: 450; }
body.pack-light-editorial .x-svc .x-arrow span { color: #e8a07e; }

/* Signature statement — calm light band, large Fraunces ink quote, italic
   terracotta em, a soft oversized open-quote mark. (Override the dark default
   from showcase.css.) */
body.pack-light-editorial .x-statement { position: relative; background: #EFE8DA; color: #22201B; border-top: 1px solid #E0D8C8; border-bottom: 1px solid #E0D8C8; overflow: hidden; }
body.pack-light-editorial .x-statement::before { content: '\201C'; position: absolute; top: -.16em; left: 50%; transform: translateX(-50%); font-family: var(--font-heading); font-size: 15rem; line-height: 1; color: rgba(178,87,51,.12); pointer-events: none; }
body.pack-light-editorial .x-statement p { position: relative; font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.55rem,3.3vw,2.5rem); line-height: 1.4; color: #2a2820; }
body.pack-light-editorial .x-statement em { color: #B25733; font-style: italic; }

/* Why-us — soft terracotta-tint chip with terracotta icon, ink heading. */
body.pack-light-editorial .x-feat .ic { background: rgba(178,87,51,.10); border: 1px solid rgba(178,87,51,.22); }
body.pack-light-editorial .x-feat .ic svg { color: #B25733; }
body.pack-light-editorial .x-feat h4 { color: #22201B; }
body.pack-light-editorial .x-feat p { color: #6E665A; }

/* Process — large faded terracotta serif numeral, ink heading. */
body.pack-light-editorial .x-step .n { font-family: var(--font-heading); font-weight: 450; color: rgba(178,87,51,.30); }
body.pack-light-editorial .x-step h4 { color: #22201B; }
body.pack-light-editorial .x-step p { color: #6E665A; }

/* FAQ — ink summary, terracotta +/- marker, hairline dividers. */
body.pack-light-editorial .x-faq details { border-bottom: 1px solid #E0D8C8; }
body.pack-light-editorial .x-faq summary { color: #22201B; }
body.pack-light-editorial .x-faq summary::after { color: #B25733; }
body.pack-light-editorial .x-faq details p { color: #6E665A; }

/* Big CTA — deep INK band with paper text + an outlined paper button (NOT the
   default solid-terracotta slab; ink reads more luxe). Override base, which
   uses --brand-primary. */
body.pack-light-editorial .x-bigcta { background: #22201B; color: #F7F2E9; }
body.pack-light-editorial .x-bigcta h2 { font-family: var(--font-heading); font-weight: 450; color: #F7F2E9; letter-spacing: -.015em; }
body.pack-light-editorial .x-bigcta p { color: rgba(247,242,233,.82); }
body.pack-light-editorial .x-bigcta .x-btn-white { background: transparent; color: #F7F2E9; border: 1px solid rgba(247,242,233,.5); }
body.pack-light-editorial .x-bigcta .x-btn-white:hover { background: #F7F2E9; color: #22201B; border-color: #F7F2E9; }

/* Footer — deep ink (base footer already assumes dark + white text, and
   --brand-secondary is ink, so it mostly works; warm the headings/links so they
   read as paper rather than stark white). */
body.pack-light-editorial .site-footer { background: #22201B; color: rgba(247,242,233,.78); border-top: 1px solid #2f2c25; }
body.pack-light-editorial .footer-grid h4 { color: #F7F2E9; font-family: var(--font-heading); font-weight: 450; letter-spacing: .005em; }
body.pack-light-editorial .footer-links a { color: rgba(247,242,233,.72); }
body.pack-light-editorial .footer-links a:hover { color: #e8a07e; }
body.pack-light-editorial .footer-bottom { border-top: 1px solid rgba(247,242,233,.14); }
body.pack-light-editorial .footer-bottom a { color: #e8a07e; }

/* Motion — the shared .reveal already handles the gentle fade/rise; this pack
   leaves it understated on purpose (no extra glow/slide), so nothing to add. */