/* ==========================================================================
   MICHELE ROYS — prototype stylesheet
   Palette sampled directly from the live site (micheleroys.com), then
   deepened/desaturated slightly for a more modern, authoritative register:
   ink   #22495A  -> headline text / primary button / dark section bg
   plum  #9F6FB2  -> accent, eyebrows, numbering, links
   wash  #F9ECFD  -> soft section background
   Elementor mapping notes are left as HTML comments throughout the pages.
   ========================================================================== */

:root{
  /* -- color --------------------------------------------------------- */
  --ink:        #22495A;   /* primary dark navy-teal (from live site) */
  --ink-70:     #4A6572;
  --ink-45:     #7E949C;
  --clay:       #9F6FB2;   /* purple accent — exact hex from the live site */
  --clay-dark:  #7F5590;
  --clay-tint:  #EBD4F0;   /* light purple tint, for dark backgrounds */
  --surface:    #674874;   /* deep plum — derived from --clay, used for bold
                              full-bleed surfaces (hero, quote blocks, CTA
                              banners) so purple carries the visual weight
                              instead of navy, per client direction */
  --cream:      #F9ECFD;   /* soft lavender-pink section wash — exact hex from the live site */
  --paper:      #FFFFFF;
  --line:       rgba(34,73,90,0.14);
  --line-soft:  rgba(34,73,90,0.08);

  /* -- type ------------------------------------------------------------ */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* -- layout ------------------------------------------------------------ */
  --container: 1180px;
  --container-narrow: 760px;
  --radius: 3px;
  --radius-lg: 12px;
  --gap: clamp(1.5rem, 3vw, 3rem);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; width:100%; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.container--narrow{ max-width: var(--container-narrow); }

section{ position:relative; }
.section{ padding-block: clamp(4rem, 8vw, 7.5rem); }
.section--tight{ padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--cream{ background: var(--cream); border-top: 1px solid rgba(34,73,90,0.08); }
.section--ink{ background: var(--surface); color: var(--cream); }
.section--white{ background: var(--paper); }
.section--bordered{ border-top: 1px solid var(--line); }

/* -- eyebrow / labels ---------------------------------------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 1rem;
}
.eyebrow::before{
  content:"";
  width: 22px; height:1px;
  background: var(--clay);
  display:inline-block;
}
.section--ink .eyebrow{ color: var(--clay-tint); }
.section--ink .eyebrow::before{ background: var(--clay-tint); }

/* -- type scale ------------------------------------------------------ */
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--ink);
}
.section--ink h1, .section--ink h2, .section--ink h3{ color: var(--paper); }

h1, .h1{ font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500;}
h2, .h2{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3, .h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); }

.lede{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-70);
  max-width: 46ch;
  margin: 0 0 1.75rem;
}
.section--ink .lede{ color: rgba(249,236,253,0.78); }

p{ margin: 0 0 1.1rem; color: var(--ink-70); }
p:last-child{ margin-bottom:0; }
.section--ink p{ color: rgba(249,236,253,0.78); }

.quote-mark{ font-family: var(--font-display); font-style: italic; }

/* -- buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: 0.95rem 1.9rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing:.02em;
  border-radius: var(--radius);
  border:1px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
  white-space: nowrap;
}
.btn-row{ display:flex; flex-wrap:wrap; gap: 1rem; align-items:center; }
.btn--primary{ background: var(--clay); color: var(--paper); border-color: var(--clay); }
.btn--primary:hover{ background: var(--clay-dark); border-color: var(--clay-dark); transform: translateY(-1px); }
.btn--outline{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover{ background: var(--ink); color: var(--cream); }
.section--ink .btn--outline{ color: var(--cream); border-color: rgba(249,236,253,0.5); }
.section--ink .btn--outline:hover{ background: var(--cream); color: var(--ink); }
.btn--clay{ background: var(--clay); color: var(--paper); border-color: var(--clay); }
.btn--clay:hover{ background: var(--clay-dark); }
.btn--ghost{ padding: .6rem 0; font-size:.85rem; border-bottom: 1px solid var(--ink); border-radius:0; }
.btn--ghost:hover{ color: var(--clay); border-color: var(--clay); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* Buttons placed on the bold plum surface (hero, quote blocks, CTA banners,
   teaser) invert to a cream fill — a purple button on a purple surface has
   too little contrast, so it flips to the light wash colour instead. */
.hero .btn--primary,
.hero-split .btn--primary,
.quote-block .btn--primary,
.cta-banner .btn--primary,
.teaser .btn--primary,
.teaser-bleed .btn--primary{
  background: var(--cream); border-color: var(--cream); color: var(--surface);
}
.hero .btn--primary:hover,
.hero-split .btn--primary:hover,
.quote-block .btn--primary:hover,
.cta-banner .btn--primary:hover,
.teaser .btn--primary:hover,
.teaser-bleed .btn--primary:hover{ background: var(--paper); border-color: var(--paper); }

.hero .btn--outline,
.hero-split .btn--outline,
.quote-block .btn--outline,
.cta-banner .btn--outline,
.teaser .btn--outline,
.teaser-bleed .btn--outline{
  color: var(--cream); border-color: rgba(249,236,253,.55);
}
.hero .btn--outline:hover,
.hero-split .btn--outline:hover,
.quote-block .btn--outline:hover,
.cta-banner .btn--outline:hover,
.teaser .btn--outline:hover,
.teaser-bleed .btn--outline:hover{ background: var(--cream); color: var(--surface); }

/* ==========================================================================
   HEADER / NAV — ELEMENTOR: Site Header template, sticky, transparent->solid
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(249,236,253,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 1.15rem;
}
.nav-logo{
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
.nav-links{
  display:flex; align-items:center; gap: clamp(1.25rem, 2.5vw, 2.4rem);
}
.nav-links a{ text-transform: uppercase; letter-spacing: .03em; }
.nav-links a:not(.btn){
  font-size: .88rem;
  font-weight: 500;
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.nav-links a:not(.btn):hover,
.nav-links a.is-active:not(.btn){
  border-color: var(--clay);
  color: var(--clay-dark);
}
.nav-links .btn{ padding: .65rem 1.4rem; }
.nav-toggle{
  display:none;
  background:none; border:none; padding:.5rem;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ width:22px; height:2px; background: var(--ink); display:block; }

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset: 64px 0 0 0;
    background: var(--cream);
    flex-direction:column;
    align-items:flex-start;
    padding: 2rem clamp(1.25rem,4vw,2.5rem);
    gap: 1.5rem;
    transform: translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .nav-links.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav-links .btn{ margin-top:.5rem; }
}

/* ==========================================================================
   HERO — ELEMENTOR: Section, full width, background video/image + overlay
   ========================================================================== */
.hero{
  position:relative;
  min-height: 88vh;
  display:flex;
  align-items:flex-end;
  color: var(--cream);
  overflow:hidden;
  background: var(--surface);
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(159,111,178,.22), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(159,111,178,.10), transparent 55%),
    var(--surface);
}
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(103,72,116,.15) 0%, rgba(103,72,116,.45) 55%, rgba(103,72,116,.90) 100%);
}
.hero-media__badge{
  position:absolute; top:1.5rem; right:1.5rem; z-index:1;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(249,236,253,0.75);
  border:1px solid rgba(249,236,253,0.35);
  padding:.4rem .7rem;
}
.hero-content{ position:relative; z-index:1; padding-block: 3.5rem 4rem; }
.hero .eyebrow{ color: var(--clay-tint); }
.hero .eyebrow::before{ background: var(--clay-tint); }
.hero h1{ color: var(--paper); max-width: 18ch; }
.hero .lede{ color: rgba(249,236,253,0.85); max-width: 52ch; font-size: clamp(1.05rem,1.5vw,1.3rem);}

.hero--page{ min-height:56vh; align-items:center; }
.hero--page .hero-content{ padding-block: 4rem; }

.cta-band{
  display:inline-flex; flex-wrap:wrap; gap: .9rem;
  background: rgba(249,236,253,0.08);
  border: 1px solid rgba(249,236,253,0.18);
  padding: 1.1rem;
  margin-top: 2rem;
}
.hero .cta-band .btn--outline{ color:var(--cream); border-color: rgba(249,236,253,.55); }
.hero .cta-band .btn--outline:hover{ background: var(--cream); color: var(--ink); }
.hero-subline{
  margin-top: 1.1rem;
  font-size:.85rem;
  letter-spacing:.04em;
  color: rgba(249,236,253,0.65);
}

/* ==========================================================================
   HOME HERO — full-bleed split (photo | solid colour panel), no container
   gutters, matching the kriscarr.com composition: photo one side, content
   panel the other, both edge-to-edge and full height.
   ELEMENTOR: Section, full width / no gap, 2 columns, Column bg = image /
   solid colour respectively, vertical align middle.
   ========================================================================== */
.hero-split{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 88vh;
}
.hero-split-media{ position:relative; background: var(--surface); }
.hero-split-media .ph-media{ position:absolute; inset:0; border-radius:0; min-height:0; }
.hero-split-content{
  background: var(--surface);
  color: var(--cream);
  display:flex;
  align-items:center;
  position:relative;
}
.hero-split-content::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(159,111,178,.35), transparent 60%),
    radial-gradient(100% 80% at 0% 100%, rgba(103,72,116,.4), transparent 55%);
}
.hero-split-inner{ position:relative; padding: clamp(2.5rem,5vw,4.5rem); max-width: 560px; }
.hero-split .eyebrow{ color: var(--clay-tint); }
.hero-split .eyebrow::before{ background: var(--clay-tint); }
.hero-split h1{ color: var(--paper); font-size: clamp(2.2rem, 3.4vw, 3.1rem); }
.hero-split .lede{ color: rgba(249,236,253,.85); max-width: 42ch; }
.hero-split .btn--primary{ background: var(--cream); border-color: var(--cream); color: var(--surface); }
.hero-split .btn--primary:hover{ background: var(--paper); border-color: var(--paper); }
.hero-split .btn--outline{ color: var(--cream); border-color: rgba(249,236,253,.55); }
.hero-split .btn--outline:hover{ background: var(--cream); color: var(--surface); }
.hero-split .hero-subline{ color: rgba(249,236,253,.6); }
@media (max-width: 900px){
  .hero-split{ grid-template-columns: 1fr; min-height:auto; }
  .hero-split-media{ min-height: 44vh; }
  .hero-split-inner{ max-width:none; }
}
.hero-stripe{ height: 10px; background: var(--clay); }

/* ==========================================================================
   FULL-BLEED PHOTO + CARD (Section 3 home) — no container, edge to edge
   ELEMENTOR: Section, full width / no gap
   ========================================================================== */
.bleed-banner{ position:relative; }
.bleed-banner .photo-banner-bg{
  aspect-ratio: auto;
  min-height: clamp(360px, 46vw, 640px);
  border-radius: 0;
}
.bleed-banner .photo-banner-card{ box-shadow: 0 30px 70px rgba(34,73,90,.25); }

/* ==========================================================================
   FULL-BLEED SPLIT TEASER ("I am Michele Roys") — mirrors kriscarr.com's
   "I'm Kris" section: solid colour panel + photo, both edge-to-edge.
   ========================================================================== */
.teaser-bleed{ display:grid; grid-template-columns: 1fr 1fr; background: var(--surface); color: var(--cream); }
.teaser-bleed-content{ display:flex; align-items:center; position:relative; }
.teaser-bleed-inner{ padding: clamp(2.5rem,5vw,4.5rem); max-width: 520px; margin-inline:auto; }
.teaser-bleed h1, .teaser-bleed h2, .teaser-bleed h3{ color: var(--paper); }
.teaser-bleed p{ color: rgba(249,236,253,.82); }
.teaser-bleed .eyebrow{ color: var(--clay-tint); }
.teaser-bleed .eyebrow::before{ background: var(--clay-tint); }
.teaser-bleed-media{ position:relative; min-height: 420px; }
.teaser-bleed-media .ph-media{ position:absolute; inset:0; border-radius:0; min-height:0; }
@media (max-width: 860px){
  .teaser-bleed{ grid-template-columns:1fr; }
  .teaser-bleed-media{ order:-1; min-height:320px; }
  .teaser-bleed-inner{ margin-inline:0; max-width:none; }
}

/* ==========================================================================
   LOGO MARQUEE — ELEMENTOR: Logo Carousel widget (Pro)
   ========================================================================== */
.logos{ padding-block: 2.75rem; background: var(--paper); overflow:hidden; }
.logos .eyebrow{ justify-content:center; display:flex; }
.logos-track-wrap{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos-track{
  display:flex; align-items:center; gap: 3.5rem;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.logos-track div{
  height: 34px; padding-inline:1.3rem;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink-45);
  background: var(--cream);
  border-radius: var(--radius);
  white-space:nowrap;
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================================
   INTRO TEASER (I am Michele Roys) — ELEMENTOR: Section, 2 columns, image bg
   ========================================================================== */
.teaser{ background: var(--surface); color: var(--cream); }
.teaser h1, .teaser h2, .teaser h3, .teaser h4{ color: var(--paper); }
.teaser p{ color: rgba(249,236,253,0.8); }
.teaser-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items:center;
}
.teaser-media{ aspect-ratio: 4/5; overflow:hidden; border-radius: var(--radius-lg); }
.teaser-media img{ width:100%; height:100%; object-fit:cover; }
.placeholder-note{
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--clay-dark); opacity:.85; margin-top:1rem; display:block;
}
.teaser .placeholder-note, .site-footer .placeholder-note{ color: var(--clay-tint); opacity:.8; }
@media (max-width: 860px){ .teaser-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PHOTO BANNER + CENTERED CARD — Section 3 home ("push harder" text)
   ELEMENTOR: Section, background image, inner Section (content width) centered
   ========================================================================== */
.photo-banner{ position:relative; }
.photo-banner-bg{ aspect-ratio: 21/9; border-radius: var(--radius-lg); overflow:hidden; }
.photo-banner-card{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(480px, 88%);
  background:var(--paper);
  padding: clamp(1.75rem,3vw,2.5rem);
  box-shadow: 0 24px 55px rgba(34,73,90,.22);
  text-align:center;
  border-radius: var(--radius-lg);
}
.photo-banner-card .lede{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.15rem,1.8vw,1.4rem); color:var(--ink); max-width:none; margin-bottom:1rem; }
.photo-banner-card p:not(.lede){ font-size:.95rem; }
@media (max-width: 760px){
  .photo-banner-bg{ aspect-ratio:4/3; }
  .photo-banner-card{
    position:static; transform:none; width:100%; margin-top:1.25rem;
    box-shadow:none; border:1px solid var(--line);
  }
}

/* ==========================================================================
   REVIEW CARDS — Section 6 ("Reviews"), side by side like the reference grid
   ELEMENTOR: 3x Image Box widgets in a Grid container, hairline dividers
   ========================================================================== */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
.review-card{ background:var(--paper); text-align:left; padding: clamp(1.5rem,2.5vw,2rem); transition: transform .25s ease, box-shadow .25s ease; }
.review-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px rgba(34,73,90,.08); position:relative; z-index:1; }
.review-card-media{ aspect-ratio:4/3; margin-bottom:1.1rem; }
.review-card-head{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.6rem; }
.review-card-num{ font-family:var(--font-display); color:var(--clay); font-size:1.05rem; }
.review-card-name{ font-size:.92rem; font-weight:600; }
.review-card blockquote{
  font-family: var(--font-display); font-style:italic; font-weight:400;
  font-size:1rem; color:var(--ink-70); margin:0 0 .9rem;
}
.review-card .review-card-link{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--clay-dark);
  border-bottom:1px solid var(--clay); padding-bottom:.15rem;
}
@media (max-width:860px){ .review-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PROTOCOL — signature element — ELEMENTOR: Custom HTML widget
   ========================================================================== */
.protocol{
  display:grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items:center;
}
.protocol-dial{
  position:relative;
  width: min(100%, 380px);
  aspect-ratio:1;
  margin-inline:auto;
}
.protocol-dial svg{ width:100%; height:100%; }
.protocol-ring{ transform-origin: 50% 50%; }
.protocol-ring-label{ display:none; }
.protocol-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.15rem;
}
.protocol-center span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--clay-dark); }
.protocol-center strong{ font-family: var(--font-display); font-size:1.15rem; font-weight:500; }

.protocol-point{
  position:absolute;
  font-family: var(--font-display);
  font-size:.95rem;
  color: var(--clay-dark);
}
.protocol-point--01{ top:-1.9rem; left:50%; transform:translateX(-50%); }
.protocol-point--02{ top:50%; right:-2.1rem; transform:translateY(-50%); }
.protocol-point--03{ bottom:-1.9rem; left:50%; transform:translateX(-50%); }
.protocol-point--04{ top:50%; left:-2.1rem; transform:translateY(-50%); }

/* orbiting marker — gives the (rotationally symmetric) ring visible motion
   without altering its resting appearance, matching the client's mockup */
.protocol-orbit{ position:absolute; inset:0; animation: dial-spin 9s linear infinite; }
.protocol-orbit::before{
  content:""; position:absolute; top:-3px; left:50%;
  width:7px; height:7px; border-radius:50%;
  background: var(--clay); transform:translateX(-50%);
  box-shadow: 0 0 10px 2px rgba(159,111,178,.55);
}
@keyframes dial-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .protocol-orbit{ animation:none; } }
/* keep the side labels from overflowing the viewport on narrow phones,
   where the dial fills 100% of the available column width */
@media (max-width: 480px){
  .protocol-point--02{ right: -.6rem; }
  .protocol-point--04{ left: -.6rem; }
}

.protocol-steps{ display:flex; flex-direction:column; }
.protocol-step{
  display:grid; grid-template-columns: 2.4rem 1fr; gap: 1rem;
  padding-block: 1.15rem;
  border-top: 1px solid var(--line);
}
.protocol-step:last-child{ border-bottom: 1px solid var(--line); }
.protocol-step-num{ font-family: var(--font-display); color: var(--clay); font-size:1rem; font-weight:500; }
.protocol-step h4{ margin: 0 0 .3rem; font-size:1.05rem; }
.protocol-step p{ margin:0; max-width:55ch; }
@media (max-width: 860px){ .protocol{ grid-template-columns:1fr; } }

/* four-up variant used on The Protocol page */
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
.steps-grid .protocol-step{ background: var(--paper); border:none; padding: 2rem 1.5rem; grid-template-columns:1fr; }
.steps-grid .protocol-step-num{ font-size:1.6rem; }
@media (max-width: 900px){ .steps-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .steps-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   QUOTE BLOCK — ELEMENTOR: Section, ink background
   ========================================================================== */
.quote-block{ background: var(--surface); color: var(--cream); text-align:center; }
.quote-block blockquote{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  line-height:1.35;
  max-width: 20ch;
  margin: 0 auto 1.5rem;
  color: var(--paper);
}
.quote-block cite{
  display:block; font-style:normal;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--clay-tint);
}

/* ==========================================================================
   TESTIMONIAL CAROUSEL — ELEMENTOR: Testimonial Carousel widget (Pro)
   ========================================================================== */
.reviews-slider{ position:relative; max-width: 760px; margin-inline:auto; text-align:center; }
.review-slide{ display:none; }
.review-slide.is-active{ display:block; animation: fade .5s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.review-slide blockquote{
  font-family: var(--font-display); font-style:italic; font-weight:400;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--ink);
  margin: 0 0 1.25rem;
}
.review-slide cite{ font-style:normal; font-size:.82rem; color: var(--ink-45); display:block; }
.review-slide cite b{ color:var(--ink); font-weight:600; }
.reviews-nav{ display:flex; justify-content:center; gap: .6rem; margin-top: 2rem; }
.reviews-nav button{
  width:8px; height:8px; border-radius:50%;
  border: 1px solid var(--ink-45); background:transparent; padding:0;
}
.reviews-nav button.is-active{ background: var(--clay); border-color: var(--clay); }
.reviews-empty-flag{
  display:inline-block; margin-top:2.5rem; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--clay-dark); border:1px dashed var(--clay); padding:.5rem 1rem;
}

/* ==========================================================================
   CARDS — audience / speaking formats
   ========================================================================== */
.card-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
.card-grid--four{ grid-template-columns: repeat(4, 1fr); }
.card{ background: var(--paper); padding: clamp(1.75rem, 3vw, 2.75rem); display:flex; flex-direction:column; transition: transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px rgba(34,73,90,.08); position:relative; z-index:1; }
.card .eyebrow{ margin-bottom: .5rem; }
.card h3{ margin-bottom: .6rem; }
.card .card-kicker{ font-size:.78rem; color: var(--clay-dark); font-weight:600; letter-spacing:.03em; margin-bottom:.9rem; }
.card ul{ margin: 1.1rem 0 1.4rem; display:flex; flex-direction:column; gap:.6rem; }
.card ul li{
  padding-left: 1.1rem; position:relative; font-size:.94rem; color: var(--ink-70);
}
.card ul li::before{ content:"—"; position:absolute; left:0; color: var(--clay); }
.card .btn{ margin-top:auto; align-self:flex-start; }
@media (max-width: 860px){ .card-grid, .card-grid--four{ grid-template-columns:1fr; } }
@media (min-width:861px) and (max-width:1080px){ .card-grid--four{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   LIST BLOCKS — formats / includes / who-i-work-with
   ========================================================================== */
.two-col-list{ display:grid; grid-template-columns:1fr 1fr; gap: var(--gap); }
.list-block h4{ font-family: var(--font-body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--clay-dark); margin-bottom:1.1rem; }
.list-block ul{ display:flex; flex-direction:column; gap:.85rem; }
.list-block li{ padding-bottom:.85rem; border-bottom:1px solid var(--line); font-size:1.02rem; }
.list-block li:last-child{ border-bottom:none; }
@media (max-width:760px){ .two-col-list{ grid-template-columns:1fr; gap:2.5rem; } }

.chip-list{ display:flex; flex-wrap:wrap; gap:.7rem; }
.chip{
  font-size:.85rem; padding:.6rem 1.1rem; border:1px solid var(--line);
  color: var(--ink-70); border-radius: 100px; transition: border-color .2s ease, color .2s ease;
}
.chip:hover{ border-color: var(--clay); color: var(--clay-dark); }

/* ==========================================================================
   RESULT / PROCESS STEPS (3-up, The Protocol page section 4)
   ========================================================================== */
.result-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.result-grid .num{ font-family: var(--font-display); font-size:2.5rem; color: var(--clay); margin-bottom:.75rem; display:block; }
@media (max-width:860px){ .result-grid{ grid-template-columns:1fr; gap:2.25rem; } }

/* ==========================================================================
   STATEMENT (single centered line)
   ========================================================================== */
.statement{ text-align:center; }
.statement p{
  font-family: var(--font-display); font-style:italic; font-weight:400;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--ink); max-width: 26ch; margin-inline:auto;
}

/* ==========================================================================
   CTA BANNER (booking teaser on Home / closing CTAs)
   ========================================================================== */
.cta-banner{
  position:relative; overflow:hidden;
  background: var(--surface); color: var(--cream);
  text-align:center;
}
.cta-banner-media{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(80% 120% at 85% 20%, rgba(159,111,178,.20), transparent 60%),
    radial-gradient(60% 80% at 5% 100%, rgba(159,111,178,.10), transparent 55%);
}
.cta-banner-media img{ width:100%; height:100%; object-fit:cover; }
.cta-banner .container{ position:relative; z-index:1; }
.cta-banner h1, .cta-banner h2, .cta-banner h3{ color:var(--paper); max-width:20ch; margin-inline:auto; }
.cta-banner .lede{ color: rgba(249,236,253,.8); margin-inline:auto; }
.quote-block h1, .quote-block h2, .quote-block h3{ color: var(--paper); }
.quote-block .lede, .quote-block p{ color: rgba(249,236,253,.78); }
.cta-banner .btn-row{ justify-content:center; margin-top:1.75rem; }

/* ==========================================================================
   PODCAST / BOOK triptych
   ========================================================================== */
.triptych{ display:grid; grid-template-columns:repeat(3,1fr); gap: 1px; background:var(--line); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
.triptych .card{ text-align:left; }
@media (max-width:900px){ .triptych{ grid-template-columns:1fr; } }

/* ==========================================================================
   EVENTS LIST (empty state)
   ========================================================================== */
.events-empty{
  border: 1px dashed var(--line); padding: 3rem 2rem; text-align:center; border-radius: var(--radius-lg);
}
.events-empty p{ margin:0; }

/* ==========================================================================
   FORM — Book Michele page — ELEMENTOR: WPForms / Fluent Forms widget
   ========================================================================== */
.booking-layout{ display:grid; grid-template-columns: .85fr 1.15fr; gap: var(--gap); align-items:start; }
.info-card{ background: var(--paper); padding: clamp(1.75rem,3vw,2.5rem); border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgba(34,73,90,.08); }
.info-card h3{ font-size:1.2rem; }
.info-row{ padding-block:1rem; border-top:1px solid var(--line); }
.info-row:first-of-type{ margin-top:1.2rem; }
.info-row h4{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--clay-dark); margin:0 0 .35rem; font-family:var(--font-body); }
.info-row p, .info-row a{ margin:0; font-size:.98rem; }
.info-row ul{ display:flex; flex-direction:column; gap:.4rem; margin-top:.3rem; }

.field{ margin-bottom: 1.3rem; }
.field label{ display:block; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-70); margin-bottom:.5rem; }
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--line); background: var(--paper);
  padding: .85rem 1rem; color: var(--ink); border-radius: var(--radius);
  transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--clay); outline:none; }
.field textarea{ resize:vertical; min-height:110px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
@media (max-width:760px){ .booking-layout{ grid-template-columns:1fr; } .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.82rem; color: var(--ink-45); margin-top:1rem; }

/* ==========================================================================
   FOOTER — ELEMENTOR: Site Footer template
   ========================================================================== */
.site-footer{ background: var(--ink); color: rgba(249,236,253,.85); }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gap);
  padding-block: clamp(3rem,6vw,5rem) 3rem;
}
.footer-brand{ font-family: var(--font-display); font-size:1.3rem; color:var(--paper); margin-bottom:.9rem; }
.footer-col h5{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--clay-tint); margin:0 0 1.1rem; font-family: var(--font-body); }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ font-size:.92rem; opacity:.85; }
.footer-col a:hover{ opacity:1; color: var(--clay-tint); }
.footer-bottom{
  border-top:1px solid rgba(249,236,253,.14);
  padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:.78rem; opacity:.65;
}
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* -- scroll reveal --------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* -- placeholder-asset tag (prototype only) ----------------------------- */
.ph-tag{
  position:absolute; z-index:2; top:.75rem; left:.75rem;
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  background: rgba(34,73,90,.82); color:#fff;
  padding:.32rem .55rem;
}
.media-wrap{ position:relative; }

/* -- CSS-only media placeholder (no external image dependency) --------- */
.ph-media{
  width:100%; height:100%;
  min-height: 220px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  background:
    linear-gradient(135deg, rgba(159,111,178,.14) 0%, transparent 45%),
    linear-gradient(315deg, rgba(34,73,90,.08) 0%, transparent 55%),
    var(--cream);
  color: var(--ink-45);
  text-align:center;
  border-radius: var(--radius-lg);
}
.ph-media svg{ width:24px; height:24px; opacity:.4; flex-shrink:0; }
.ph-media span{ font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; max-width:22ch; line-height:1.5; opacity:.75; }
.ph-media--dark{
  background:
    linear-gradient(135deg, rgba(159,111,178,.22) 0%, transparent 50%),
    linear-gradient(315deg, rgba(249,236,253,.06) 0%, transparent 60%);
  color: rgba(249,236,253,.65);
}

/* -- build note banner (prototype only, not for WP) -------------------- */
.build-note{
  background:#fff3e0; color:#7a4a00; font-size:.78rem; text-align:center;
  padding:.55rem 1rem; border-bottom:1px solid #f0d9ad;
}
.build-note b{ font-weight:700; }