/* ============================================================
   KALARA  ->  GHL Page Settings > Custom CSS
   Raw rules only, no <style> wrapper.

   KALARA brand system (Brand Guidelines v1.0, July 2026).
   Porcelain leads every page; ivory for cards and panels; gold
   is the mark of completion, used with intention and never
   flooded; cedar grounds the text and the dark sections; noir
   is reserved for the footer. Champagne for hovers, borders,
   and small accents only, never body copy on light backgrounds.

   Type: Outfit Medium for bold headers, wordmark, buttons, and
   labels. Newsreader for headings, with Light Italic as the
   editorial accent voice. Figtree for body and tracked-caps
   eyebrows. Everything scoped under .lp-page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300;1,6..72,400&family=Figtree:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* Opt the whole document out of browser auto dark mode. GHL owns the
   page head, so this must live in CSS, not a meta tag. */
:root, html { color-scheme: only light; }

:root {
  /* KALARA palette */
  --lp-porcelain: #F4EFE8;  /* primary background, leads every page */
  --lp-ivory:     #FBF8F3;  /* cards, panels */
  --lp-gold:      #C9A961;  /* logo, buttons, moments of completion */
  --lp-champagne: #B08D57;  /* hover, borders, small accents */
  --lp-blush:     #DEC3B8;  /* soft support */
  --lp-cedar:     #2B2620;  /* primary text, dark sections */
  --lp-cedar-soft:#352F28;
  --lp-noir:      #211D1F;  /* deepest sections, footer */

  /* Text */
  --lp-text:       #2B2620;
  --lp-muted:      #6E6459;
  --lp-text-inv:   #F4EFE8;
  --lp-muted-inv:  #A99C8B;
  --lp-hairline:   #E2D8C8;
  --lp-hairline-inv: #453D33;

  --lp-font: 'Figtree', sans-serif;              /* body */
  --lp-serif: 'Newsreader', serif;                 /* headings + italic accents */
  --lp-display: 'Outfit', sans-serif;            /* wordmark, buttons, labels */
  --lp-maxw: 1160px;

  /* Grain texture, self-contained SVG noise */
  --lp-grain: 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Scoped reset */
.lp-page, .lp-page *, .lp-page *::before, .lp-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.lp-page { font-family: var(--lp-font); font-weight: 400; color: var(--lp-text); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; color-scheme: only light; forced-color-adjust: none; }
.lp-page img { max-width: 100%; display: block; }
.lp-page a { color: inherit; }
.lp-page input, .lp-page select, .lp-page textarea { font-size: 16px; }

/* Layout */
.lp-container { max-width: var(--lp-maxw); margin: 0 auto; padding: 0 24px; }
.lp-section { padding: 72px 0; }
@media (min-width: 768px) { .lp-section { padding: 112px 0; } }

/* ---- Surfaces with baked-in texture -------------------------------
   Porcelain leads; ivory for lighter passages; cedar for dark
   sections. Grain tile + soft ambient shading layered directly as
   background-image so nothing fights z-index. */
.lp-sec-ivory { background: var(--lp-ivory); }
.lp-sec-cream { background: var(--lp-porcelain); }

/* Textured variants: grain + soft ambient shading. */
.lp-sec-ivory.lp-textured {
  background-color: var(--lp-ivory);
  background-image:
    radial-gradient(900px 600px at 85% 0%, rgba(43,38,32,0.045), transparent 65%),
    radial-gradient(700px 500px at 8% 100%, rgba(43,38,32,0.03), transparent 60%),
    var(--lp-grain);
}
.lp-sec-cream.lp-textured {
  background-color: var(--lp-porcelain);
  background-image:
    radial-gradient(1000px 640px at 50% 0%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(800px 560px at 90% 100%, rgba(43,38,32,0.05), transparent 60%),
    var(--lp-grain);
}
.lp-sec-ink {
  background-color: var(--lp-cedar);
  color: var(--lp-text-inv);
  /* one soft ambient light, no grain */
  background-image: radial-gradient(900px 620px at 80% 10%, rgba(201,169,97,0.07), transparent 60%);
}

/* Type: Newsreader carries the headings, quiet and editorial */
.lp-page h1, .lp-page h2, .lp-display {
  font-family: var(--lp-serif); font-weight: 400; line-height: 1.14;
  letter-spacing: -0.005em;
}
.lp-page h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); }
.lp-page h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
/* Accent voice: Newsreader Light Italic, finished in gold on dark,
   champagne on light so it never washes out */
.lp-page h1 em, .lp-page h2 em, .lp-display em { font-style: italic; font-weight: 300; }
.lp-page h3 { font-family: var(--lp-display); font-size: 1.02rem; font-weight: 500; letter-spacing: 0.01em; }
.lp-lead { font-size: 1.05rem; font-weight: 400; color: var(--lp-muted); max-width: 58ch; }
.lp-sec-ink .lp-lead { color: var(--lp-muted-inv); }
@media (min-width: 768px) { .lp-lead { font-size: 1.12rem; } }

/* Eyebrow: Figtree bold, tracked caps, champagne */
.lp-eyebrow {
  display: inline-block; font-family: var(--lp-font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; margin-bottom: 20px; color: var(--lp-champagne);
}
.lp-sec-ink .lp-eyebrow, .lp-hero .lp-eyebrow { color: var(--lp-gold); }

/* The italic accent inside headlines (kept class name from the old
   system; now a serif voice, not a gradient) */
.lp-glow { font-family: var(--lp-serif); font-style: italic; font-weight: 300; color: var(--lp-champagne); }
.lp-sec-ink .lp-glow, .lp-hero .lp-glow { color: var(--lp-gold); }

/* Gold hairline rule: the small mark of completion */
.lp-rule-grad { height: 2px; width: 64px; background: var(--lp-gold); border: none; margin-bottom: 28px; }

/* ---- Buttons -------------------------------------------------------
   Gold primary with cedar type, per the guidelines. Outfit Medium,
   uppercase, tracked. Hover deepens to champagne. Works on light and
   dark surfaces alike, restated with !important so no GHL theme or
   builder style can outrank it. */
.lp-btn {
  display: inline-block; font-family: var(--lp-display); font-weight: 500;
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; padding: 16px 38px; cursor: pointer;
  background-color: #C9A961 !important; color: #2B2620 !important;
  border: 1px solid #C9A961; border-radius: 2px;
  transition: background-color 0.25s, border-color 0.25s;
}
.lp-btn:hover { background-color: #B08D57 !important; border-color: #B08D57; color: #2B2620 !important; }

/* Secondary: cedar outline on light surfaces */
.lp-btn--ghost {
  background-color: transparent !important; color: #2B2620 !important;
  border: 1px solid #2B2620;
}
.lp-btn--ghost:hover { background-color: rgba(43,38,32,0.06) !important; color: #2B2620 !important; }

/* ---- NAV ----------------------------------------------------- */
.lp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: var(--lp-porcelain); border-bottom: 1px solid var(--lp-hairline);
}
.lp-nav__inner { max-width: var(--lp-maxw); margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; }
.lp-nav__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.lp-nav__logo img { height: 34px; width: auto; }
/* Circle mark: the K inside the gold circle, wholeness */
.lp-nav__mark {
  width: 34px; height: 34px; flex: none; border: 1.5px solid var(--lp-gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--lp-display); font-weight: 500; font-size: 0.95rem; color: var(--lp-cedar);
}
/* Wordmark: Outfit Medium, wide tracked caps, cedar on porcelain */
.lp-nav__wordmark { font-family: var(--lp-display); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--lp-cedar); }
.lp-nav__links { display: none; }
.lp-nav__cta { display: none; }
.lp-nav__burger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.lp-nav__burger span { width: 22px; height: 2px; background: var(--lp-cedar); display: block; }
.lp-nav__drawer { display: none; border-top: 1px solid var(--lp-hairline); background: var(--lp-ivory); }
.lp-nav__drawer.is-open { display: block; }
.lp-nav__drawer a { display: block; padding: 16px 24px; text-decoration: none; font-family: var(--lp-display); font-weight: 500; font-size: 0.95rem; color: var(--lp-text); border-bottom: 1px solid var(--lp-hairline); }
/* Nav CTA: gold, restated with explicit scoped rules */
.lp-nav .lp-nav__cta {
  background-color: #C9A961 !important; color: #2B2620 !important;
  border: 1px solid #C9A961; border-radius: 2px;
}
.lp-nav .lp-nav__cta:hover { background-color: #B08D57 !important; border-color: #B08D57; color: #2B2620 !important; }

@media (min-width: 960px) {
  .lp-nav__links { display: flex; gap: 36px; }
  .lp-nav__links a { text-decoration: none; font-family: var(--lp-display); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-text); border-bottom: 2px solid transparent; transition: border-color 0.2s; }
  .lp-nav__links a:hover { border-bottom-color: var(--lp-champagne); }
  .lp-nav__cta { display: inline-block; padding: 12px 28px; }
  .lp-nav__burger, .lp-nav__drawer { display: none; }
}

/* ---- HERO ----------------------------------------------------- */
.lp-hero { position: relative; background: var(--lp-cedar); color: var(--lp-text-inv); overflow: hidden; }
.lp-hero__media { position: absolute; inset: 0; }
.lp-hero__media > video { width: 100%; height: 100%; object-fit: cover; }
/* Dynamic reel: two stacked layers crossfade; each layer is a grid of cells.
   The outgoing and incoming layers dissolve into each other on a long eased
   ramp, and each cell's media rises and slowly drifts (Ken Burns) so frames
   glide in and keep moving instead of snapping. */
.lp-hero__stage { position: absolute; inset: 0; }
.lp-hero__layer { position: absolute; inset: 0; display: grid; gap: 2px; opacity: 0; transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-hero__layer.is-on { opacity: 1; }
.lp-hero__layer[data-cells="1"] { grid-template-columns: 1fr; }
.lp-hero__layer[data-cells="2"] { grid-template-columns: 1fr 1fr; }
.lp-hero__layer[data-cells="3"] { grid-template-columns: 1fr 1fr 1fr; }
.lp-hero__layer[data-cells="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
@media (max-width: 640px) {
  .lp-hero__layer[data-cells="3"] { grid-template-columns: 1fr 1fr; }
  .lp-hero__layer[data-cells="4"] { grid-template-columns: 1fr 1fr; }
}
.lp-hero__cell { position: relative; overflow: hidden; }
.lp-hero__cell > img, .lp-hero__cell > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; will-change: transform, opacity; }
/* The hero reel is core content the owner asked to always animate, so both
   the crossfade and this entrance + Ken Burns drift run regardless of the
   reduced-motion preference (see the exemption in the quality-floor block).
   Each cell gets a different direction and a small stagger, so a grid beat
   reads as a choreographed montage rather than one flat swap. Pure
   transform/opacity (GPU compositor) -> no load-speed cost, no extra assets. */
.lp-hero__cell > img, .lp-hero__cell > video { animation: lp-kb-a 6.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.lp-hero__cell:nth-child(2) > img, .lp-hero__cell:nth-child(2) > video { animation-name: lp-kb-b; animation-delay: 0.08s; }
.lp-hero__cell:nth-child(3) > img, .lp-hero__cell:nth-child(3) > video { animation-name: lp-kb-c; animation-delay: 0.16s; }
.lp-hero__cell:nth-child(4) > img, .lp-hero__cell:nth-child(4) > video { animation-name: lp-kb-d; animation-delay: 0.24s; }
/* rise + zoom, drifting up-left */
@keyframes lp-kb-a { 0% { opacity: 0.5; transform: translateY(18px) scale(1.08); } 24% { opacity: 1; } 100% { transform: translateY(0) scale(1.15) translate(-1.8%, -1.4%); } }
/* in from the right, drifting right */
@keyframes lp-kb-b { 0% { opacity: 0.5; transform: translateX(22px) scale(1.08); } 24% { opacity: 1; } 100% { transform: translateX(0) scale(1.15) translate(1.8%, -1%); } }
/* in from the left, drifting down-left */
@keyframes lp-kb-c { 0% { opacity: 0.5; transform: translateX(-22px) scale(1.08); } 24% { opacity: 1; } 100% { transform: translateX(0) scale(1.15) translate(-1.4%, 1.4%); } }
/* punch-in, easing back out */
@keyframes lp-kb-d { 0% { opacity: 0.5; transform: scale(1.22); } 24% { opacity: 1; } 100% { transform: scale(1.08) translate(1.4%, 1%); } }
.lp-hero__scrim { position: absolute; inset: 0; background: rgba(33, 29, 31, 0.64); }
/* Ambient gold waves behind the hero (ported from the one-pager). Sits above
   the media/scrim, below the content. Decorative; JS honors reduced motion. */
.lp-hero__waves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.lp-hero__fallback {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 28px 32px; font-family: var(--lp-serif); font-weight: 300; font-style: italic;
  font-size: 0.95rem; color: rgba(244, 239, 232, 0.45);
}
.lp-hero__inner {
  position: relative; max-width: var(--lp-maxw); margin: 0 auto; padding: 176px 24px 96px;
  min-height: 88vh; display: flex; flex-direction: column; justify-content: center;
}
.lp-hero h1 { max-width: 18ch; color: var(--lp-porcelain); }
.lp-hero__sub { margin-top: 24px; font-weight: 400; font-size: 1.05rem; color: rgba(244, 239, 232, 0.85); max-width: 56ch; }
.lp-hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
@media (min-width: 768px) { .lp-hero__inner { padding-top: 200px; } .lp-hero__sub { font-size: 1.15rem; } }

/* ---- Client belt: continuous marquee --------------------------
   Two identical groups in the markup; the track slides one full
   group width for a seamless loop. Deliberately exempt from the
   reduced-motion kill: it is the page's one requested ambient
   motion, slow and linear. */
.lp-belt { background: var(--lp-ivory); border-top: 1px solid var(--lp-hairline); border-bottom: 1px solid var(--lp-hairline); overflow: hidden; padding: 22px 0; }
.lp-belt__track { display: flex; width: max-content; will-change: transform; animation: lp-marquee 32s linear infinite; }
.lp-belt__group { display: flex; flex: none; }
.lp-belt__item {
  display: flex; align-items: center; white-space: nowrap;
  font-family: var(--lp-display); font-weight: 500; font-size: 0.82rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--lp-muted);
  padding: 0 32px;
}
.lp-belt__item::after { content: ''; width: 5px; height: 5px; margin-left: 64px; background: var(--lp-gold); border-radius: 50%; display: inline-block; }
.lp-belt__item--logo { padding: 0 40px; }
.lp-belt__logo {
  height: 34px; width: auto; max-width: 190px; object-fit: contain; display: block;
  opacity: 0.72; filter: grayscale(1); transition: opacity 0.25s ease, filter 0.25s ease;
}
.lp-belt__item--logo:hover .lp-belt__logo { opacity: 1; filter: grayscale(0); }
/* White-on-transparent marks are inverted so they read on the ivory belt. */
.lp-belt__logo--invert { filter: invert(1) grayscale(1); }
.lp-belt__item--logo:hover .lp-belt__logo--invert { filter: invert(1); }
/* Square / icon marks get a taller box so they are not dwarfed by wordmarks. */
.lp-belt__logo--tall { height: 48px; }
.lp-belt:hover .lp-belt__track { animation-play-state: paused; }
@keyframes lp-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ---- WHO WE ARE ----------------------------------------------- */
.lp-who__grid { display: grid; gap: 56px; }
@media (min-width: 960px) { .lp-who__grid { grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; } }
/* Our Story - The Journey: pin the left intro while the timeline scrolls past,
   desktop only. It stays inside its own section because a sticky element can
   never scroll beyond its containing grid. */
@media (min-width: 960px) {
  .lp-journey__aside { position: sticky; top: 108px; align-self: start; }
}
.lp-who h2 { margin-bottom: 26px; }

.lp-ledger { border-top: 1px solid var(--lp-hairline); }
.lp-ledger__row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--lp-hairline); }
.lp-ledger__name { font-family: var(--lp-serif); font-size: 1.2rem; font-weight: 400; letter-spacing: -0.005em; }
.lp-ledger__note { font-size: 0.85rem; color: var(--lp-muted); text-align: right; max-width: 24ch; }

.lp-callout { margin-top: 40px; padding: 28px; background: var(--lp-ivory); border: 1px solid var(--lp-hairline); border-left: 2px solid var(--lp-gold); }
.lp-callout p { font-size: 0.95rem; color: var(--lp-muted); }
.lp-callout strong { color: var(--lp-text); font-weight: 700; }

/* Engine pipeline strip */
.lp-flow { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; border-top: 1px solid var(--lp-hairline); border-bottom: 1px solid var(--lp-hairline); padding: 22px 0; }
.lp-flow__step { font-family: var(--lp-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lp-text); }
.lp-flow__arrow { margin: 0 14px; font-weight: 500; color: var(--lp-gold); }

/* Signature element: division-of-labor diptych.
   Blush panel gets the stone treatment: heavier grain plus soft
   directional shading, warm against the cedar panel beside it. */
.lp-diptych { margin-top: 72px; display: grid; }
@media (min-width: 768px) { .lp-diptych { grid-template-columns: 1fr 1fr; } }
.lp-diptych__panel { padding: 56px 40px; }
@media (min-width: 768px) { .lp-diptych__panel { padding: 72px 56px; } }
.lp-diptych__panel--sand {
  background-color: var(--lp-blush); color: var(--lp-text);
  background-image:
    radial-gradient(560px 380px at 78% 22%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(620px 420px at 8% 100%, rgba(107,80,60,0.2), transparent 65%),
    var(--lp-grain), var(--lp-grain);
  background-size: auto, auto, 180px 180px, 97px 97px;
}
.lp-diptych__panel--ink { background: var(--lp-cedar); color: var(--lp-text-inv); }
.lp-diptych__label { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 18px; }
.lp-diptych__panel--sand .lp-diptych__label { color: #86685A; }
.lp-diptych__panel--ink .lp-diptych__label { color: var(--lp-gold); }
.lp-diptych__panel .lp-display { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.lp-diptych__sub { margin-top: 14px; font-size: 0.95rem; font-weight: 400; }
.lp-diptych__panel--sand .lp-diptych__sub { color: #6E5548; }
.lp-diptych__panel--ink .lp-diptych__sub { color: var(--lp-muted-inv); }

/* ---- SERVICES / THE COMPLETE SYSTEM ---------------------------- */
.lp-creatives__head { max-width: 640px; margin-bottom: 56px; }
.lp-creatives__head h2 { margin-bottom: 20px; }
.lp-creatives__grid { display: grid; border-top: 1px solid var(--lp-hairline); border-left: 1px solid var(--lp-hairline); }
@media (min-width: 640px) { .lp-creatives__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .lp-creatives__grid { grid-template-columns: repeat(4, 1fr); } }
.lp-creative { padding: 36px 28px 44px; border-right: 1px solid var(--lp-hairline); border-bottom: 1px solid var(--lp-hairline); border-top: 2px solid transparent; transition: background-color 0.25s, border-top-color 0.25s; }
.lp-creative:hover { background-color: var(--lp-porcelain); border-top-color: var(--lp-gold); }
.lp-creative h3 { font-size: 1.08rem; font-weight: 500; margin-bottom: 12px; }
.lp-creative p { font-size: 0.9rem; color: var(--lp-muted); }
/* Numbered service index, i through vii */
.lp-creative__num { display: block; font-family: var(--lp-serif); font-style: italic; font-weight: 300; font-size: 0.95rem; color: var(--lp-champagne); margin-bottom: 14px; }
/* Closing card: the quiet promise that completes the grid */
.lp-creative--note { background: var(--lp-cedar); color: var(--lp-text-inv); border-right: 1px solid var(--lp-cedar); border-bottom: 1px solid var(--lp-cedar); }
.lp-creative--note:hover { background-color: var(--lp-cedar); border-top-color: var(--lp-gold); }
.lp-creative--note p { color: var(--lp-muted-inv); }
.lp-creative--note .lp-display { font-size: 1.25rem; color: var(--lp-porcelain); }

/* Service tags: porcelain pills with champagne type */
.lp-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lp-tag {
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  background: var(--lp-porcelain); border: 1px solid var(--lp-hairline);
  font-family: var(--lp-display); font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-champagne);
}

/* ---- CEO FEATURE ------------------------------------------------ */
.lp-ceo__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .lp-ceo__grid { grid-template-columns: 5fr 6fr; gap: 88px; } }
.lp-ceo__portrait { position: relative; border: 1px solid var(--lp-hairline-inv); background: var(--lp-cedar-soft); aspect-ratio: 4 / 5; overflow: hidden; }
.lp-ceo__portrait img { width: 100%; height: 100%; object-fit: cover; }
.lp-ceo__portrait-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--lp-serif); font-weight: 300; font-style: italic; color: var(--lp-muted-inv); }
.lp-ceo h2 { color: var(--lp-porcelain); margin-bottom: 22px; }
.lp-ceo__copy p { color: var(--lp-muted-inv); font-weight: 400; }
.lp-ceo__copy p + p { margin-top: 16px; }
.lp-ceo__quote { margin-top: 24px; font-family: var(--lp-serif); font-style: italic; font-weight: 300; font-size: 1.3rem; line-height: 1.4; color: var(--lp-gold); max-width: 30ch; }
.lp-ceo__sig { margin-top: 28px; font-family: var(--lp-serif); font-weight: 300; font-style: italic; font-size: 1.35rem; color: var(--lp-text-inv); }
.lp-ceo__role { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lp-muted-inv); margin-top: 4px; }
.lp-ceo__actions { margin-top: 36px; }

/* ---- BOOKING CALENDAR ------------------------------------------- */
.lp-book { text-align: center; }
.lp-book .lp-rule-grad { margin-left: auto; margin-right: auto; }
.lp-book h2 { margin-bottom: 18px; }
.lp-book .lp-lead { margin: 0 auto 48px; }
.lp-book__calendar { max-width: 920px; margin: 0 auto; background: transparent; overflow: hidden; }
.lp-book__calendar iframe { width: 100%; border: none; display: block; }
/* Calendly inline widget: full width, seamless (no card). Give it a height tall
   enough that Calendly's own content fits without the inner iframe scrollbar;
   the resize script in the embed trims it to the reported content height. */
.lp-book__calendar .calendly-inline-widget { width: 100%; min-width: 320px; }
.lp-book__placeholder { min-height: 560px; display: flex; align-items: center; justify-content: center; font-family: var(--lp-serif); font-weight: 300; font-style: italic; font-size: 1.15rem; color: var(--lp-muted); padding: 24px; border: 1px solid var(--lp-hairline); background: var(--lp-ivory); }

/* ---- FOOTER ------------------------------------------------------
   Noir, the deepest surface, finished with a gold hairline. */
.lp-footer { background: var(--lp-noir); color: var(--lp-muted-inv); border-top: 2px solid var(--lp-gold); }
.lp-footer__inner { max-width: var(--lp-maxw); margin: 0 auto; padding: 72px 24px 40px; }
.lp-footer__top { display: grid; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--lp-hairline-inv); }
@media (min-width: 768px) { .lp-footer__top { grid-template-columns: 2fr 1fr 1fr; gap: 64px; } }
.lp-footer__brand img { height: 34px; width: auto; margin-bottom: 18px; }
.lp-footer__brand p { font-size: 0.9rem; font-weight: 400; max-width: 36ch; margin-top: 16px; }
/* Reversed wordmark: gold on the dark surface */
.lp-footer .lp-nav__wordmark { color: var(--lp-gold); }
.lp-footer .lp-nav__mark { border-color: var(--lp-gold); color: var(--lp-gold); }
.lp-footer__lockup { display: flex; align-items: center; gap: 12px; }
.lp-footer h4 { font-family: var(--lp-font); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lp-text-inv); margin-bottom: 18px; }
.lp-footer ul { list-style: none; }
.lp-footer li + li { margin-top: 10px; }
.lp-footer a { text-decoration: none; font-size: 0.9rem; color: var(--lp-muted-inv); border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.lp-footer a:hover { color: var(--lp-gold); border-bottom-color: var(--lp-champagne); }
.lp-footer__bottom { padding-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 0.8rem; }

/* Social row: circle buttons echoing the K mark */
.lp-social { display: flex; gap: 16px; margin-top: 24px; }
.lp-social a {
  width: 38px; height: 38px; border: 1px solid rgba(201,169,97,0.4); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--lp-muted-inv); transition: color 0.2s, border-color 0.2s;
}
.lp-social a:hover { color: var(--lp-gold); border-color: var(--lp-gold); border-bottom: 1px solid var(--lp-gold); }
.lp-social svg { width: 15px; height: 15px; display: block; }

/* ================= INNER PAGES ================= */

/* Page hero: shared header block for inner pages */
.lp-pagehero { padding: 160px 0 72px; }
.lp-pagehero h1 { max-width: 20ch; margin-bottom: 22px; }
@media (min-width: 768px) { .lp-pagehero { padding: 196px 0 100px; } }

/* ---- Our Story: acquisition timeline (a true sequence) ---- */
.lp-timeline { border-left: 1px solid var(--lp-hairline); margin-left: 6px; }
.lp-timeline__item { position: relative; padding: 0 0 48px 40px; }
.lp-timeline__item:last-child { padding-bottom: 0; }
.lp-timeline__item::before {
  content: ''; position: absolute; left: -6px; top: 8px;
  width: 11px; height: 11px; border-radius: 50%; background: var(--lp-gold);
}
.lp-timeline__era { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--lp-champagne); margin-bottom: 10px; }
.lp-timeline__item h3 { font-family: var(--lp-serif); font-size: 1.35rem; font-weight: 400; margin-bottom: 10px; letter-spacing: -0.005em; }
.lp-timeline__item p { font-size: 0.95rem; color: var(--lp-muted); max-width: 52ch; }

/* ---- Our Story: team cards ---- */
.lp-team__grid { display: grid; gap: 28px; }
@media (min-width: 640px) { .lp-team__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .lp-team__grid { grid-template-columns: repeat(3, 1fr); } }
.lp-team__card { border: 1px solid var(--lp-hairline); background: var(--lp-ivory); }
.lp-team__photo { aspect-ratio: 4 / 5; background: var(--lp-blush); display: flex; align-items: center; justify-content: center; font-family: var(--lp-serif); font-weight: 300; font-style: italic; font-size: 0.95rem; color: #86685A; border-bottom: 1px solid var(--lp-hairline); }
.lp-team__photo img { width: 100%; height: 100%; object-fit: cover; }
.lp-team__body { padding: 22px 24px 26px; }
.lp-team__name { font-family: var(--lp-serif); font-weight: 400; font-size: 1.15rem; letter-spacing: -0.005em; }
.lp-team__role { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lp-champagne); margin-top: 6px; }

/* ---- MedSpa Suite: service groups ---- */
.lp-suite__group { margin-bottom: 72px; }
.lp-suite__group:last-child { margin-bottom: 0; }
.lp-suite__group-title { font-family: var(--lp-serif); font-weight: 400; font-size: 1.4rem; letter-spacing: -0.005em; margin-bottom: 28px; }
.lp-suite__list { border-top: 1px solid var(--lp-hairline); }
.lp-suite__row { display: grid; gap: 8px; padding: 26px 0; border-bottom: 1px solid var(--lp-hairline); }
@media (min-width: 768px) { .lp-suite__row { grid-template-columns: 5fr 7fr; gap: 40px; align-items: baseline; } }
.lp-suite__name { font-family: var(--lp-serif); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.005em; }
.lp-suite__desc { font-size: 0.95rem; color: var(--lp-muted); }

/* ---- MedSpa Results: testimonial and success story boxes ---- */
.lp-results__grid { display: grid; gap: 28px; }
@media (min-width: 768px) { .lp-results__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .lp-results__grid { grid-template-columns: repeat(3, 1fr); } }
.lp-quote { border: 1px solid var(--lp-hairline); background: var(--lp-ivory); padding: 32px 28px; display: flex; flex-direction: column; border-top: 2px solid var(--lp-gold); }
.lp-quote__text { font-family: var(--lp-serif); font-weight: 300; font-size: 1.1rem; line-height: 1.5; font-style: italic; }
.lp-quote__meta { margin-top: auto; padding-top: 26px; }
.lp-quote__name { font-weight: 700; font-size: 0.9rem; }
.lp-quote__spa { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-champagne); margin-top: 3px; }
.lp-story { border: 1px solid var(--lp-hairline); background: var(--lp-ivory); padding: 32px 28px; }
.lp-story__stat { font-family: var(--lp-display); font-weight: 500; font-size: 2.4rem; letter-spacing: -0.01em; color: var(--lp-gold); }
.lp-story__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lp-champagne); margin: 6px 0 16px; }
.lp-story p { font-size: 0.92rem; color: var(--lp-muted); }

/* ---- Partner With Us ---- */
.lp-partner__grid { display: grid; gap: 48px; }
@media (min-width: 960px) { .lp-partner__grid { grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; } }
.lp-partner__pillars { border-top: 1px solid var(--lp-hairline-inv); }
.lp-partner__pillar { padding: 24px 0; border-bottom: 1px solid var(--lp-hairline-inv); }
.lp-partner__pillar h3 { font-family: var(--lp-serif); font-size: 1.1rem; font-weight: 400; margin-bottom: 8px; color: var(--lp-text-inv); }
.lp-partner__pillar p { font-size: 0.92rem; color: var(--lp-muted-inv); }
.lp-audit__box { max-width: 720px; margin: 0 auto; border: 1px solid var(--lp-hairline); background: var(--lp-ivory); padding: 48px 32px; text-align: center; border-top: 2px solid var(--lp-gold); }
@media (min-width: 768px) { .lp-audit__box { padding: 64px 72px; } }
.lp-audit__box h2 { margin-bottom: 18px; }
.lp-audit__points { list-style: none; margin: 28px 0 36px; border-top: 1px solid var(--lp-hairline); }
.lp-audit__points li { padding: 16px 0; border-bottom: 1px solid var(--lp-hairline); font-size: 0.95rem; color: var(--lp-muted); }
.lp-audit__points li strong { color: var(--lp-text); }

/* ---- Refer & Earn ---- */
.lp-reward-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .lp-reward-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-reward { border: 1px solid var(--lp-hairline); background: var(--lp-ivory); padding: 32px 28px 36px; border-top: 2px solid var(--lp-gold); }
.lp-reward__who { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lp-champagne); margin-bottom: 14px; }
.lp-reward__amount { font-family: var(--lp-serif); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.005em; line-height: 1.25; margin-bottom: 14px; color: var(--lp-champagne); }
.lp-reward__desc { font-size: 0.92rem; color: var(--lp-muted); }
.lp-reward__options { margin-top: 20px; border-top: 1px solid var(--lp-hairline); }
.lp-reward__option { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--lp-hairline); }
.lp-reward__tag { flex: none; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lp-champagne); }
.lp-reward__option-text { font-size: 0.9rem; color: var(--lp-text); }

.lp-rulelist { border-top: 1px solid var(--lp-hairline); max-width: 760px; }
.lp-rulelist__row { display: flex; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--lp-hairline); }
.lp-rulelist__num { flex: none; font-family: var(--lp-serif); font-style: italic; font-weight: 300; font-size: 1.05rem; color: var(--lp-gold); }
.lp-rulelist__text { font-size: 0.98rem; }

/* ---- Legal pages: Privacy Policy, Terms & Conditions ---- */
.lp-legal { max-width: 760px; }
.lp-legal h2 { font-size: 1.35rem; margin: 44px 0 14px; }
.lp-legal h2:first-child { margin-top: 0; }
.lp-legal p { font-size: 0.98rem; color: var(--lp-muted); margin-bottom: 14px; }
.lp-legal ul { margin: 0 0 14px 22px; font-size: 0.98rem; color: var(--lp-muted); }
.lp-legal li + li { margin-top: 6px; }
.lp-legal a { color: var(--lp-champagne); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.lp-legal a:hover { color: var(--lp-gold); }
.lp-legal strong { color: var(--lp-text); }
/* Cross-link between the two legal pages, sits under the page hero lead */
.lp-legal-nav { margin-top: 24px; font-size: 0.85rem; color: var(--lp-muted); }
.lp-legal-nav a { color: var(--lp-champagne); text-decoration: underline; text-underline-offset: 3px; }
.lp-legal-nav a:hover { color: var(--lp-gold); }

/* ---- Scroll reveal ------------------------------------------------ */
.lp-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.lp-reveal.is-in { opacity: 1; transform: none; }

/* ---- Quality floor ------------------------------------------------ */
.lp-page a:focus-visible, .lp-page button:focus-visible, .lp-page .lp-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  /* Reveals and transitions settle instantly; the belt keeps its
     slow linear drift by request. */
  .lp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-page * { transition-duration: 0.01ms !important; }
  /* Exempt the hero reel: it is core content the owner asked to always
     cycle and crossfade, so its layer fade keeps its full duration here. */
  .lp-page .lp-hero__layer { transition-duration: 0.85s !important; }
}

/* ---- Site-only shell (not needed inside GHL) ---------------------- */
body { margin: 0; background: var(--lp-porcelain); }

/* ================================================================
   v2 COMPONENTS (Aug 2026 rework)
   Wordmark-only logo, service highlight, case studies, accordion,
   case-study slider, simplified partner hero.
   ================================================================ */

/* ---- Wordmark logo lockup (no circle mark) --------------------------
   The brand primary logo is the KALARA wordmark, optionally with the
   tracked-caps tagline beneath (footer). Nav uses wordmark alone. */
.lp-nav__wordmark { white-space: nowrap; }
.lp-lockup { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lp-nav__tagline {
  display: block; font-family: var(--lp-font); font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--lp-muted);
}
.lp-footer__lockup { display: inline-flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.lp-footer .lp-nav__tagline { color: var(--lp-muted-inv); }

/* ---- Service highlight: the seven-services grid promoted up the page.
   Reuses .lp-creative cards; this adds the closing division-of-labor
   line the brand deck pairs with the seven services. */
.lp-services-line {
  margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: baseline;
  border-top: 1px solid var(--lp-hairline); padding-top: 28px;
}
.lp-services-line p { font-family: var(--lp-serif); font-weight: 400; font-size: 1.25rem; letter-spacing: -0.005em; }
.lp-services-line p em { font-style: italic; font-weight: 300; color: var(--lp-champagne); }

/* ---- Signature feature: the NSO Membership Engine ------------------
   Proprietary service headline. Copy panel on ivory, stat panel on
   cedar for contrast. */
.lp-signature { display: grid; border: 1px solid var(--lp-hairline); border-top: 2px solid var(--lp-gold); overflow: hidden; }
@media (min-width: 900px) { .lp-signature { grid-template-columns: 3fr 2fr; } }
.lp-signature__copy { background: var(--lp-ivory); padding: 44px 40px; }
.lp-signature__badge { display: inline-block; font-family: var(--lp-font); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lp-champagne); margin-bottom: 16px; }
.lp-signature__copy h3 { font-family: var(--lp-serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.005em; margin-bottom: 16px; }
.lp-signature__copy h3 em { font-style: italic; font-weight: 300; color: var(--lp-champagne); }
.lp-signature__copy p { font-size: 0.98rem; color: var(--lp-muted); max-width: 52ch; }
.lp-signature__stats { background: var(--lp-cedar); color: var(--lp-text-inv); display: grid; grid-template-columns: 1fr 1fr; }
.lp-signature__stat { padding: 34px 28px; border-top: 1px solid var(--lp-hairline-inv); border-left: 1px solid var(--lp-hairline-inv); }
.lp-signature__stat:nth-child(-n+2) { border-top: none; }
.lp-signature__stat:nth-child(odd) { border-left: none; }
.lp-signature__num { font-family: var(--lp-display); font-weight: 500; font-size: 2rem; letter-spacing: -0.01em; color: var(--lp-gold); }
.lp-signature__cap { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-muted-inv); margin-top: 8px; }

/* ---- Case-study cards (homepage 3-up) ------------------------------
   Extends .lp-story with a client label and a folded-in note. */
.lp-case { border: 1px solid var(--lp-hairline); background: var(--lp-ivory); padding: 32px 28px; display: flex; flex-direction: column; border-top: 2px solid var(--lp-gold); }
.lp-case__client { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lp-champagne); margin-bottom: 18px; }
.lp-case__stat { font-family: var(--lp-display); font-weight: 500; font-size: 2.4rem; letter-spacing: -0.01em; color: var(--lp-gold); }
.lp-case__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lp-muted); margin: 6px 0 16px; }
.lp-case__desc { font-size: 0.92rem; color: var(--lp-muted); }
.lp-cases__cta { margin-top: 48px; text-align: center; }
/* Case Studies: brand header above a grouped grid. Stacked, not inline: a
   small greyscale logo as a quiet section label, the note beneath it. */
.lp-brandhead { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--lp-hairline); }
.lp-page .lp-brandhead__logo { height: 22px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: 0.72; }
.lp-brandhead__note { margin: 0; font-size: 0.92rem; color: var(--lp-muted); max-width: 60ch; }

/* ---- Client logo tile (used where a real logo image is unset) ------ */
.lp-logo-tile {
  display: flex; align-items: center; justify-content: center; height: 44px;
  font-family: var(--lp-serif); font-weight: 400; font-style: italic; font-size: 1.05rem;
  color: var(--lp-text); letter-spacing: -0.005em;
}
.lp-logo-tile img { max-height: 44px; width: auto; }

/* ---- Accordion (Service Suite) ------------------------------------- */
.lp-acc { border-top: 1px solid var(--lp-hairline); }
.lp-acc__item { border-bottom: 1px solid var(--lp-hairline); }
/* Head reads left to right: expand affordance, thumbnail, title + benefit.
   The plus sits on the LEFT so the row obviously expands, per feedback. */
.lp-acc__head {
  width: 100%; display: flex; align-items: center; gap: 18px;
  padding: 20px 4px; background: none; border: none; cursor: pointer; text-align: left;
  color: var(--lp-text); transition: color 0.2s;
}
.lp-acc__head:hover { color: var(--lp-champagne); }
.lp-acc__thumb { flex: none; width: 54px; height: 54px; }
@media (min-width: 640px) { .lp-acc__thumb { width: 64px; height: 64px; } }
.lp-acc__titles { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-acc__title { font-family: var(--lp-serif); font-weight: 400; font-size: clamp(1.12rem, 2vw, 1.32rem); letter-spacing: -0.005em; line-height: 1.2; }
.lp-acc__benefit { font-family: var(--lp-font); font-size: 0.9rem; font-weight: 500; color: var(--lp-champagne); }
.lp-acc__icon { flex: none; position: relative; width: 18px; height: 18px; }
.lp-acc__icon::before, .lp-acc__icon::after { content: ''; position: absolute; background: var(--lp-gold); transition: transform 0.25s, opacity 0.25s; }
.lp-acc__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.lp-acc__icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
.lp-acc__item.is-open .lp-acc__icon::after { transform: scaleY(0); opacity: 0; }
.lp-acc__panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.lp-acc__item.is-open .lp-acc__panel { max-height: 760px; }
.lp-acc__inner { padding: 0 4px 30px; display: grid; gap: 20px; }
@media (min-width: 768px) { .lp-acc__inner { grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; } }
.lp-acc__detail { font-size: 0.98rem; color: var(--lp-muted); }
.lp-acc__detail strong { color: var(--lp-text); font-weight: 700; }
.lp-acc__aside { display: flex; flex-direction: column; gap: 14px; }
.lp-acc__aside .lp-btn { align-self: flex-start; }
.lp-acc__note { font-size: 0.85rem; color: var(--lp-muted); }

/* ---- Case-study slider (Case Studies page) ------------------------- */
.lp-cs-hero { display: grid; border: 1px solid var(--lp-hairline); border-top: 2px solid var(--lp-gold); overflow: hidden; }
@media (min-width: 900px) { .lp-cs-hero { grid-template-columns: 5fr 7fr; } }
.lp-cs-hero__side { background: var(--lp-cedar); color: var(--lp-text-inv); padding: 44px 40px; display: flex; flex-direction: column; gap: 22px; }
.lp-cs-hero__logo { min-height: 46px; display: flex; align-items: center; }
.lp-cs-hero__logo .lp-logo-tile { color: var(--lp-porcelain); justify-content: flex-start; }
.lp-cs-hero__bigstat { font-family: var(--lp-display); font-weight: 500; font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: -0.02em; color: var(--lp-gold); line-height: 1; }
.lp-cs-hero__bigcap { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-muted-inv); margin-top: 10px; }
.lp-cs-hero__mini { display: flex; flex-wrap: wrap; gap: 28px; margin-top: auto; }
.lp-cs-hero__mini div span { display: block; }
.lp-cs-hero__mini .n { font-family: var(--lp-display); font-weight: 500; font-size: 1.3rem; color: var(--lp-porcelain); }
.lp-cs-hero__mini .c { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-muted-inv); margin-top: 3px; }
.lp-cs-hero__body { background: var(--lp-ivory); padding: 44px 40px; }
.lp-cs-hero__client { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lp-champagne); margin-bottom: 14px; }
.lp-cs-hero__body h3 { font-family: var(--lp-serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.005em; margin-bottom: 16px; }
.lp-cs-hero__body p { font-size: 0.98rem; color: var(--lp-muted); margin-bottom: 16px; }
.lp-cs-hero__quote { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--lp-hairline); font-family: var(--lp-serif); font-style: italic; font-weight: 300; font-size: 1.12rem; line-height: 1.5; color: var(--lp-text); }
.lp-cs-hero__cite { display: block; margin-top: 12px; font-family: var(--lp-font); font-style: normal; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-champagne); }

.lp-slider { position: relative; margin-top: 56px; }
.lp-slider__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.lp-slider__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lp-slider__track::-webkit-scrollbar { display: none; }
.lp-slide { flex: 0 0 88%; scroll-snap-align: start; border: 1px solid var(--lp-hairline); background: var(--lp-ivory); border-top: 2px solid var(--lp-gold); padding: 32px 28px; display: flex; flex-direction: column; }
@media (min-width: 640px) { .lp-slide { flex-basis: 46%; } }
@media (min-width: 1024px) { .lp-slide { flex-basis: 31.5%; } }
.lp-slide__logo { min-height: 40px; display: flex; align-items: center; margin-bottom: 20px; }
.lp-slide__logo .lp-logo-tile { justify-content: flex-start; height: 40px; }
.lp-slide__stat { font-family: var(--lp-display); font-weight: 500; font-size: 2.1rem; letter-spacing: -0.01em; color: var(--lp-gold); }
.lp-slide__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lp-muted); margin: 6px 0 14px; }
.lp-slide__desc { font-size: 0.9rem; color: var(--lp-muted); }
.lp-slide__quote { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--lp-hairline); font-family: var(--lp-serif); font-style: italic; font-weight: 300; font-size: 0.98rem; color: var(--lp-text); }
.lp-slide__cite { display: block; margin-top: 10px; font-style: normal; font-family: var(--lp-font); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-champagne); }
.lp-slider__nav { display: flex; gap: 10px; flex: none; }
.lp-slider__btn { width: 44px; height: 44px; border: 1px solid var(--lp-cedar); background: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--lp-cedar); transition: background-color 0.2s, color 0.2s; }
.lp-slider__btn:hover { background: var(--lp-cedar); color: var(--lp-porcelain); }
.lp-slider__btn svg { width: 18px; height: 18px; }

/* ---- Simplified Partner / single above-fold panel ------------------ */
.lp-standalone { min-height: calc(100vh - 72px); display: flex; align-items: center; }
.lp-standalone .lp-container { width: 100%; }
.lp-cta-panel { max-width: 760px; }
.lp-cta-panel .lp-hero__actions, .lp-cta-panel .lp-ceo__actions { margin-top: 36px; }

/* ---- Auto-rotating callout boxes ----------------------------------
   One box visible at a time, cross-fading on a timer (JS). Boxes are
   sized tall enough to hold the longest of the three without scroll. */
.lp-rotator { position: relative; margin-top: 40px; }
.lp-rotator__viewport { position: relative; min-height: 260px; }
@media (min-width: 768px) { .lp-rotator__viewport { min-height: 200px; } }
.lp-rotator__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease;
  background: var(--lp-ivory); border: 1px solid var(--lp-hairline); border-left: 2px solid var(--lp-gold);
  padding: 30px 34px; display: flex; flex-direction: column; justify-content: center;
}
.lp-rotator__slide.is-active { opacity: 1; visibility: visible; }
.lp-rotator__label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lp-champagne); margin-bottom: 12px; }
.lp-rotator__slide p { font-size: 0.96rem; color: var(--lp-muted); }
.lp-rotator__slide strong { color: var(--lp-text); font-weight: 700; }
.lp-rotator__dots { display: flex; gap: 10px; margin-top: 20px; }
.lp-rotator__dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--lp-champagne); background: none; cursor: pointer; padding: 0; transition: background-color 0.2s, border-color 0.2s; }
.lp-rotator__dot[aria-current="true"] { background: var(--lp-gold); border-color: var(--lp-gold); }

/* ---- CTA case-study card (last card in the Case Studies grid) ------ */
.lp-case--cta { background: var(--lp-cedar); color: var(--lp-text-inv); border: 1px solid var(--lp-cedar); border-top: 2px solid var(--lp-gold); justify-content: center; }
.lp-case--cta h3 { font-family: var(--lp-serif); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.005em; color: var(--lp-porcelain); margin-bottom: 14px; }
.lp-case--cta h3 em { font-style: italic; font-weight: 300; color: var(--lp-gold); }
.lp-case--cta p { color: var(--lp-muted-inv); font-size: 0.95rem; margin-bottom: 26px; }

/* ================================================================
   v3 COMPONENTS (Aug 2026 feedback pass)
   "Instantly sold": media placeholders, hero wordmark, claim strip,
   Who We Help (KALARA means whole), pain callouts, How We Do It
   numbered progression, entire-chain strip, count-up revenue.
   Global rule: square corners on every image/video crop.
   ================================================================ */

/* ---- Media placeholders -------------------------------------------
   Real B-roll and photography drop straight in. Each slot holds its
   aspect ratio now so layout never shifts. Square corners only.
   Markup: <div class="lp-media lp-ar-16x9" data-media-id="hero-reel">
             <span class="lp-media__ph">Hero reel</span>
             <!-- <video autoplay muted loop playsinline poster>...  --></div> */
.lp-media { position: relative; overflow: hidden; background: var(--lp-cedar); display: block; border-radius: 0; }
.lp-media__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; font-family: var(--lp-display); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(244, 239, 232, 0.42); line-height: 1.5;
}
.lp-media__ph::before { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(244, 239, 232, 0.14); }
.lp-media > img, .lp-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-media--light { background: var(--lp-blush); }
.lp-media--light .lp-media__ph { color: rgba(43, 38, 32, 0.4); }
.lp-media--light .lp-media__ph::before { border-color: rgba(43, 38, 32, 0.14); }
.lp-media--mute { filter: grayscale(1) contrast(0.95); }  /* pain callouts: desaturated */
.lp-ar-16x9 { aspect-ratio: 16 / 9; }
.lp-ar-9x16 { aspect-ratio: 9 / 16; }
/* Portrait explainer video. Paused with native controls; a cedar frame shows
   until the poster/first frame loads, so an unset src reads as a calm dark
   panel rather than a broken element. Nothing downloads until play. */
.lp-page .lp-vid { position: relative; overflow: hidden; background: var(--lp-cedar); width: 100%; max-width: 300px; }
.lp-vid > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--lp-cedar); }
/* Video feature: portrait player beside its explanatory copy. */
.lp-vidfeat { display: grid; gap: 28px; align-items: center; margin-top: 40px; padding: 30px; border: 1px solid var(--lp-hairline); background: var(--lp-ivory); }
@media (min-width: 760px) { .lp-vidfeat { grid-template-columns: 300px 1fr; gap: 40px; padding: 34px 38px; } }
.lp-vidfeat .lp-vid { justify-self: center; }
.lp-vidfeat__body h3 { font-family: var(--lp-serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.005em; line-height: 1.2; margin: 8px 0 14px; }
.lp-vidfeat__body > p { font-size: 0.98rem; color: var(--lp-muted); max-width: 56ch; }
.lp-vidfeat__body .lp-eyebrow { margin-bottom: 0; }
.lp-vidfeat__body .lp-pain__icon { width: 38px; height: 38px; margin-bottom: 16px; }
.lp-vidfeat__body .lp-pain__q { font-family: var(--lp-serif); font-weight: 400; font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.3; letter-spacing: -0.005em; }
.lp-vidfeat__body .lp-pain__a { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lp-hairline); font-size: 0.92rem; color: var(--lp-muted); }
/* Hidden players: the site sets display on .lp-vid/.lp-vidfeat, so honor the
   hidden attribute explicitly. Videos are switched off with `hidden`, not
   removed, so re-enabling is a matter of dropping the attribute. */
.lp-page .lp-vid[hidden], .lp-page .lp-vidfeat[hidden] { display: none; }
/* A feature whose video is hidden collapses to a single column. */
.lp-vidfeat--novid { grid-template-columns: 1fr; }
/* Ink variant: the call-center "glue" feature keeps its cedar emphasis. */
.lp-vidfeat--ink { background: var(--lp-cedar); border-color: var(--lp-hairline-inv); border-top: 2px solid var(--lp-gold); margin-top: 14px; }
.lp-vidfeat--ink .lp-pain__q { color: var(--lp-porcelain); }
.lp-vidfeat--ink .lp-pain__a { color: var(--lp-muted-inv); border-top-color: var(--lp-hairline-inv); }
/* Case-study hero body with a portrait video beside the text. */
.lp-cs-hero__body--vid { display: grid; gap: 26px; align-items: start; }
@media (min-width: 1100px) { .lp-cs-hero__body--vid { grid-template-columns: 1fr 240px; gap: 32px; } .lp-cs-hero__body--vid .lp-vid { max-width: 240px; } }
.lp-ar-4x5  { aspect-ratio: 4 / 5; }
.lp-ar-1x1  { aspect-ratio: 1 / 1; }
.lp-ar-21x9 { aspect-ratio: 21 / 9; }

/* ---- Hero supporting line ------------------------------------------ */
.lp-hero__wholine { margin-top: 22px; font-size: 1.02rem; color: rgba(244, 239, 232, 0.82); max-width: 60ch; }
.lp-hero__kicker {
  display: inline-block; margin-top: 30px; font-family: var(--lp-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.4; color: var(--lp-porcelain); max-width: 30ch;
}

/* ---- Claim strip: "not another agency" + founder portrait ---------- */
.lp-claim { background: var(--lp-cedar); color: var(--lp-text-inv); }
.lp-claim__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .lp-claim__grid { grid-template-columns: 5fr 4fr; gap: 64px; } }
.lp-claim__portrait { max-width: 360px; }
@media (min-width: 900px) { .lp-claim__portrait { justify-self: end; width: 100%; } }
.lp-claim h2 { color: var(--lp-porcelain); }
.lp-claim h2 em { color: var(--lp-gold); }
.lp-claim p { color: var(--lp-muted-inv); margin-top: 20px; max-width: 46ch; }
.lp-claim__name { margin-top: 22px; font-family: var(--lp-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-gold); }

/* ---- Who We Help and Why: KALARA means whole ----------------------- */
.lp-whole__banner { margin-bottom: 48px; }
.lp-whole__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .lp-whole__grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } }
.lp-whole__word { font-family: var(--lp-serif); font-style: italic; font-weight: 300; color: var(--lp-champagne); }
.lp-whole__list { margin-top: 26px; display: grid; gap: 18px; }
.lp-whole__item { padding-left: 22px; border-left: 2px solid var(--lp-gold); }
.lp-whole__item strong { color: var(--lp-text); font-weight: 700; }
.lp-whole__item p { font-size: 0.98rem; color: var(--lp-muted); }

/* ---- Pain point callouts: feel seen, then the KALARA answer -------- */
/* Compact icon cards: a small line-icon, the question, and the KALARA answer.
   Three across on desktop, tighter than the old photo cards. */
.lp-pains--icons { display: grid; gap: 14px; margin-top: 8px; }
@media (min-width: 620px) { .lp-pains--icons { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .lp-pains--icons { grid-template-columns: repeat(3, 1fr); } }
.lp-pains--icons .lp-pain { display: block; border: 1px solid var(--lp-hairline); background: var(--lp-ivory); padding: 24px 22px; }
.lp-pain__icon { width: 38px; height: 38px; margin-bottom: 16px; }
.lp-pain__icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: var(--lp-gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lp-pains--icons .lp-pain__body { padding: 0; display: block; }
.lp-pains--icons .lp-pain__q { font-family: var(--lp-serif); font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.22rem); line-height: 1.3; color: var(--lp-text); letter-spacing: -0.005em; }
.lp-pains--icons .lp-pain__a { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lp-hairline); font-size: 0.9rem; color: var(--lp-muted); }
.lp-pains--icons .lp-pain__a strong { color: var(--lp-gold); font-weight: 700; letter-spacing: 0.02em; }
/* The call-center "glue" card sits in the grid like the others, set apart by an
   ink fill and a gold top accent so it still reads as the closer. */
.lp-pains--icons .lp-pain--glue { background: var(--lp-cedar); border-color: var(--lp-hairline-inv); border-top: 2px solid var(--lp-gold); }
.lp-pains--icons .lp-pain--glue .lp-pain__q { color: var(--lp-porcelain); }
.lp-pains--icons .lp-pain--glue .lp-pain__a { color: var(--lp-muted-inv); border-top-color: var(--lp-hairline-inv); }

/* Compact client quote: small photo + short quote, tight, no dead space. */
.lp-clientword { display: flex; align-items: center; gap: 26px; max-width: 660px; margin: 0 auto; padding: 26px 30px; border: 1px solid var(--lp-hairline); background: var(--lp-ivory); }
.lp-clientword__photo { width: 118px; flex: none; }
.lp-clientword__quote { margin: 0; font-family: var(--lp-serif); font-weight: 400; font-style: italic; font-size: clamp(1.15rem, 2.1vw, 1.4rem); line-height: 1.36; color: var(--lp-text); letter-spacing: -0.005em; }
.lp-clientword__cite { display: block; margin-top: 14px; font-family: var(--lp-display); font-style: normal; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-muted); }
@media (max-width: 520px) { .lp-clientword { flex-direction: column; text-align: center; gap: 18px; } .lp-clientword__photo { width: 108px; } }
.lp-pain__q { font-family: var(--lp-serif); font-weight: 400; font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.3; color: var(--lp-text); letter-spacing: -0.005em; }
.lp-pain__a { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--lp-hairline); font-size: 0.96rem; color: var(--lp-muted); }
.lp-pain__a strong { color: var(--lp-gold); font-weight: 700; letter-spacing: 0.02em; }
.lp-pain--glue { border-top: 2px solid var(--lp-gold); }
.lp-pain--glue .lp-pain__body { background: var(--lp-cedar); color: var(--lp-text-inv); }
.lp-pain--glue .lp-pain__q { color: var(--lp-porcelain); }
.lp-pain--glue .lp-pain__a { color: var(--lp-muted-inv); border-top-color: var(--lp-hairline-inv); }

/* ---- How We Do It: numbered progression on one thread -------------- */
.lp-how { margin-top: 8px; position: relative; display: grid; gap: 0; }
.lp-how__step { position: relative; display: grid; gap: 24px; padding: 34px 0; border-top: 1px solid var(--lp-hairline); }
.lp-how__step:first-child { border-top: none; }
@media (min-width: 820px) { .lp-how__step { grid-template-columns: 84px 1fr 5fr; gap: 32px; align-items: center; } }
@media (min-width: 820px) { .lp-how__step--flip .lp-how__media { order: 3; } }
.lp-how__num {
  font-family: var(--lp-display); font-weight: 600; font-size: 1.05rem; color: var(--lp-cedar);
  width: 52px; height: 52px; flex: none; border-radius: 50%; border: 1.5px solid var(--lp-gold);
  display: flex; align-items: center; justify-content: center; background: var(--lp-ivory);
}
.lp-how__copy h3 { font-family: var(--lp-display); font-size: 1.12rem; font-weight: 600; letter-spacing: 0.005em; margin-bottom: 10px; }
.lp-how__copy p { font-size: 0.96rem; color: var(--lp-muted); max-width: 52ch; }
.lp-how__copy .lp-how__sub { margin-top: 8px; font-size: 0.85rem; color: var(--lp-champagne); font-weight: 500; }
.lp-how__media { width: 100%; }
@media (max-width: 819px) { .lp-how__media { max-width: 420px; } }
/* Production gallery above the numbered steps: any BTS shots, square-cropped. */
.lp-how__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 48px; }
@media (min-width: 680px) { .lp-how__gallery { grid-template-columns: repeat(3, 1fr); } }
/* Text-only step rows (images moved to the gallery): number + copy, no media column. */
.lp-how--textonly .lp-how__step { padding: 26px 0; }
@media (min-width: 820px) { .lp-how--textonly .lp-how__step { grid-template-columns: 84px 1fr; align-items: baseline; } }
.lp-how--textonly .lp-how__copy p { max-width: 66ch; }

/* ---- How We Do It, Version B: the web (bubbles converging on one thread)
   Seven service nodes flow into a single hub, so the connection is the
   picture, not a list. On wide screens an SVG draws the convergence; on
   narrow screens the nodes stack and a chevron leads into the hub. */
.lp-web { margin-top: 8px; }
.lp-web__nodes { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .lp-web__nodes { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .lp-web__nodes { grid-template-columns: repeat(7, 1fr); } }
.lp-web__node {
  text-align: center; padding: 16px 10px; background: var(--lp-ivory);
  border: 1px solid var(--lp-hairline); border-top: 2px solid var(--lp-gold);
  font-family: var(--lp-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.005em;
  color: var(--lp-text); display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.lp-web__node small { font-family: var(--lp-font); font-weight: 500; font-size: 0.68rem; color: var(--lp-champagne); letter-spacing: 0; }
.lp-web__connect { position: relative; height: 26px; }
@media (min-width: 900px) { .lp-web__connect { height: 92px; } }
.lp-web__connect svg { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
@media (min-width: 900px) { .lp-web__connect svg { display: block; } }
.lp-web__chev { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--lp-gold); font-size: 1.4rem; line-height: 1; }
@media (min-width: 900px) { .lp-web__chev { display: none; } }
.lp-web__hub { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.lp-web__hub-eyebrow { font-family: var(--lp-font); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lp-champagne); }
.lp-web__hub-out {
  display: inline-block; padding: 20px 34px; background: var(--lp-cedar); color: var(--lp-gold);
  border-top: 2px solid var(--lp-gold); font-family: var(--lp-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.3; letter-spacing: -0.005em;
}

/* ---- KALARA handles the entire chain ------------------------------- */
.lp-chain__list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--lp-hairline-inv); }
.lp-chain__item { display: flex; gap: 18px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--lp-hairline-inv); }
.lp-chain__mark { font-family: var(--lp-display); font-weight: 600; font-size: 0.8rem; color: var(--lp-gold); flex: none; letter-spacing: 0.08em; }
.lp-chain__label { font-family: var(--lp-serif); font-weight: 400; font-size: 1.18rem; color: var(--lp-porcelain); letter-spacing: -0.005em; }
.lp-chain__note { color: var(--lp-muted-inv); font-size: 0.95rem; }
.lp-chain__strip { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .lp-chain__strip { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .lp-chain__strip { grid-template-columns: repeat(7, 1fr); } }
/* Chain icons: the whole chain as one row of luxury monoline medallions on ink. */
.lp-chainicons { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 560px) { .lp-chainicons { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (min-width: 900px) { .lp-chainicons { grid-template-columns: repeat(7, 1fr); gap: 14px; } }
.lp-chainicon { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.lp-chainicon__tile { position: relative; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%); border: 1px solid var(--lp-hairline-inv); }
.lp-chainicon__tile::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201, 169, 97, 0.34); pointer-events: none; }
.lp-chainicon__tile svg { position: relative; width: 44%; height: 44%; display: block; fill: none; stroke: var(--lp-gold); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
.lp-chainicon__label { font-family: var(--lp-display); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-muted-inv); }
/* How We Do It closing band: the chain icons and the vendors line, on ink,
   now living inside the How section rather than as a second section that
   repeated the same seven services. */
.lp-how__band { background: var(--lp-cedar); color: var(--lp-text-inv); margin-top: 56px; padding: 56px 0 64px; }
.lp-how__band .lp-chainicons { margin-top: 0; }
.lp-how__band .lp-chain__close { margin-top: 40px; }
.lp-chain__close { margin-top: 40px; font-family: var(--lp-serif); font-style: italic; font-weight: 300; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.4; color: var(--lp-porcelain); max-width: 40ch; }

/* ---- Count-up revenue figure (Case Studies) ----------------------- */
.lp-countup { font-family: var(--lp-display); font-weight: 600; letter-spacing: -0.02em; color: var(--lp-gold); font-variant-numeric: tabular-nums; line-height: 1; }
.lp-countup__sub { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-muted); margin-top: 10px; }
.lp-sec-ink .lp-countup__sub, .lp-cs-hero__side .lp-countup__sub { color: var(--lp-muted-inv); }

/* ---- Section intro helper ------------------------------------------ */
.lp-secintro { max-width: 680px; margin-bottom: 48px; }
.lp-secintro h2 { margin-bottom: 18px; }

/* ---- Service Suite: fully-open list (no accordions) ----------------
   Every service shows its detail immediately. One CTA per group sits
   at the bottom of the group, not inside each row. */
.lp-svc { border-top: 1px solid var(--lp-hairline); }
.lp-svc__item {
  display: grid; grid-template-columns: 64px 1fr; gap: 18px;
  padding: 28px 0; border-bottom: 1px solid var(--lp-hairline); align-items: start;
}
@media (min-width: 720px) { .lp-svc__item { grid-template-columns: 96px 1fr; gap: 30px; } }
.lp-svc__thumb { width: 100%; }
.lp-svc__title { font-family: var(--lp-serif); font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.005em; line-height: 1.2; margin-bottom: 6px; }
.lp-svc__benefit { font-family: var(--lp-font); font-weight: 500; font-size: 0.92rem; color: var(--lp-champagne); margin-bottom: 12px; }
.lp-svc__detail { font-size: 0.96rem; color: var(--lp-muted); max-width: 64ch; }
.lp-svc__detail strong { color: var(--lp-text); font-weight: 700; }
.lp-svc__cta { padding-top: 28px; }

/* ---- Become a Partner: partnership model cards --------------------- */
.lp-models { display: grid; gap: 20px; margin-top: 8px; }
@media (min-width: 820px) { .lp-models { grid-template-columns: 1fr 1fr; gap: 24px; } }
.lp-model { background: var(--lp-ivory); border: 1px solid var(--lp-hairline); border-top: 2px solid var(--lp-gold); padding: 34px 32px; display: flex; flex-direction: column; }
.lp-model__title { font-family: var(--lp-serif); font-weight: 400; font-size: clamp(1.45rem, 2.6vw, 1.95rem); letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 10px; }
.lp-model__title em { font-style: italic; font-weight: 300; color: var(--lp-champagne); }
.lp-model__for { font-family: var(--lp-font); font-weight: 700; color: var(--lp-text); font-size: 0.98rem; margin-bottom: 18px; }
.lp-model__desc { font-size: 0.96rem; color: var(--lp-muted); }
.lp-model__desc p + p { margin-top: 10px; }
.lp-model__best { margin-top: auto; padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--lp-hairline); font-size: 0.92rem; color: var(--lp-muted); }
.lp-model__best strong { color: var(--lp-gold); font-weight: 700; letter-spacing: 0.02em; }

/* ---- Service Suite: line-icon medallions (luxury monoline) --------
   Refined: fine 1px stroke, generous whitespace, an inset gold hairline
   frame in place of a heavy top bar, and a soft ivory-to-porcelain wash. */
.lp-svc__icon { position: relative; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--lp-ivory) 0%, var(--lp-porcelain) 100%); border: 1px solid var(--lp-hairline); }
.lp-svc__icon::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201, 169, 97, 0.38); pointer-events: none; }
.lp-svc__icon svg { position: relative; width: 46%; height: 46%; display: block; fill: none; stroke: var(--lp-gold); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }