/* ==========================================================================
   avinashanandsingh.com — home page styles

   Extracted 20 Sep 2026 from 21 inline <style> blocks (85.8 KB) that were
   scattered through index.html. Order is preserved exactly as it was in the
   document, so the cascade is unchanged; the block markers below say where
   each chunk came from.

   Loaded AFTER site-chrome.css, which is where the shared navbar and footer
   styles live. The two share no selectors.
   ========================================================================== */

/* ===== block 1 of 21 (was inline) ===== */
/* ===============================
   GLOBAL
================================ */
body{
  margin:0;
  font-family:'Montserrat', sans-serif;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe, #faf5ff);
  color:#1f2a44;
}

/* ===============================
   HEADINGS
================================ */
.policy-title{
  font-family:'Cinzel', serif;
  font-size:22px;
  font-weight:700;
  margin-bottom:30px;
  color:#0d1b4c;
}

.policy-heading{
  font-family:'Cinzel', serif;
  font-size:17px;
  font-weight:600;
  margin-top:30px;
  margin-bottom:10px;
  color:#0d1b4c;
}

/* ===============================
   BODY TEXT
================================ */
.policy-text,
.policy-container li{
  font-family:'Montserrat', sans-serif;
  font-size:14px;
  line-height:1.8;
  margin-bottom:10px;
  color:#2c2c2c;
}


/* ===============================
   VIDEO TOP-CENTER BUTTON
   =============================== */

.hero-video-btn{
  position: absolute;
  top: 24px;                 /* space from top of video */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;                /* above video & overlay */
}

/* When button becomes sticky after scroll */
.hero-video-btn.is-sticky{
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}


:root{
    /* change this once to tighten/loosen everywhere */
    --section-breath: clamp(48px, 6vw, 96px);
  }
 h2{
    font-family: "Cinzel", serif!important;
    margin: 0 0 0 16.8px; /* top right bottom left */
  }
  /* apply equal top/bottom to all sections */
  :where(section){
    padding-block: var(--section-breath) !important; /* override inline/older rules */
  }

  /* quick modifiers (use on individual sections when needed) */
  :where(section).breath-sm { --section-breath: clamp(28px, 4vw, 48px); }
  :where(section).breath-lg { --section-breath: clamp(72px, 8vw, 140px); }
  :where(section).breath-0,
  :where(section)[data-no-breath] { --section-breath: 0; }

  /* optional: nice anchor jump with sticky header (adjust if needed) */
  :root{ --sticky-header-h: 72px; }
  :target{ scroll-margin-top: var(--sticky-header-h); }

  .btn-style-two {
    background: #6c278adb;
    border-radius: 3px;
    border: none;
    color: #F8F8F8;
    font-family: var(--text-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 15.12px;
    overflow: hidden;
    padding: 22px 37px 22px 36px;
    position: relative;
    text-transform: uppercase;
    z-index: 0;
}
.hero-section {
  --ink:#1f1f1f;
  --muted:#202021;
  --line:#9290901f;
  --brand:#7b6ef6;
  --brand-2:#443867;
  --card:#121726cc;
  --radius:20px;
  --shadow:0 14px 40px rgba(0,0,0,.45);

  /* background-image:url(bg-video1.jpg); */
  color: var(--ink);
  padding: clamp(20px,4vw,48px) 0;
}

.hero-section .hero-wrap {
  /* max-width:1200px; */
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}

.hero-section .hero {
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items:center;
  
}

.hero-section .eyebrow {
  /* display:inline-flex; */
  align-items:center;
  gap:10px;
  padding:8px 4px;
    border-bottom: 1px solid var(--line);

  background:#1f1e1e00;
  font-weight:600;
  letter-spacing:.3px;
  color:var(--muted);
  font-family: cinzel, serif !important;
  color:#F8F8F8;

}
.hero-section .eyebrow i {
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));
  display:inline-block;
}

.hero-section h4 {
  margin:18px 0 10px;
 color: #1f1e1e;
  font-weight:800;
  line-height:1.05;
  font-size: clamp(36px, 6.2vw, 68px);
}
.hero-section .accent {
  background:linear-gradient(90deg, var(--brand-2), #fff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-section .sub {
  margin:14px 0 24px;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height:1.75;
  color:var(--muted);
  max-width: 62ch;
}

.hero-section .cta-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.hero-section .btn {
  padding:13px 18px;
  border-radius:12px;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  border:1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration:none;
}
.hero-section .btn-primary {
  background:linear-gradient(135deg,var(--brand),#5e52e6);
  color:#fff;
  box-shadow:0 10px 20px rgba(123,110,246,.28);
}
.hero-section .btn-primary:hover { transform: translateY(-1px); }
.hero-section .btn-outline {
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}
.hero-section .btn-outline:hover { background:#ffffff0a; }

.hero-section .masterclass-card {
  margin-top:180px;
  padding:18px 20px;
  border-radius:14px;
  /* background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); */
  background: linear-gradient(77deg, rgb(2 2 15), rgb(57 57 105 / 2%));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
 
}
.hero-section .masterclass-card h3 {
  margin:0 0 6px;
  font-size:20px;
  font-weight:100;
  font-family: cinzel, serif !important;
}
.hero-section .masterclass-card .date {
  font-size:18px;
  margin:0 0 14px;
  color: white;
}

.hero-section .photo-card {
  width:413px;
  height:551px;
  margin:0 auto;
  border-radius: var(--radius);
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  position:relative;
}
.hero-section .photo-card img {
  width:100%; height:100%;
  object-fit:cover;
}
.hero-section .glow {
  position:absolute; inset:-2px;
  border-radius: calc(var(--radius) + 2px);
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(244,201,93,.35), transparent 55%),
    radial-gradient(60% 80% at 10% 90%, rgba(123,110,246,.35), transparent 55%);
  filter: blur(28px);
  opacity:.5;
  color: white;
}

@media (max-width:980px){
  .hero-section .hero { grid-template-columns:1fr; gap:34px; }
  .hero-section .hero-right { order:-1; }
}
@media (max-width:520px){
  .hero-section .photo-card {
    width:min(413px, 88vw);
    height:calc(min(413px, 88vw) * 1.333);
  }
}
.shadow-effect {
		    background: #fff;
		    padding: 20px;
		    border-radius: 4px;
		    text-align: center;
	border:1px solid #ECECEC;
		    box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);
		}

    /* Card shell */
  .mc-card{
    background:#a49e8b7d;
    border:1px solid #9fbb87;          /* soft green like your ref */
    border-radius:12px;
    padding:clamp(1rem,3vw,1.25rem);
    font-family: cinzel, serif !important;  
  }

  /* 3-column grid: left | divider | right (no flexbox) */
  .mc-grid{
    display:grid;
    grid-template-columns: 1fr 1px minmax(165px,28%);
    column-gap:clamp(1rem,4vw,2.25rem);
    align-items:center; /* grid alignment only */
      font-family: cinzel, serif !important;  
  }
  @media (max-width:680px){
    .mc-grid{
      grid-template-columns: 1fr;       /* stack on mobile */
      row-gap:1rem;
    }
    .mc-divider{ display:none; }
    .mc-cta{ justify-self:start; }
  }

  /* Divider */
  .mc-divider{
    width:1px; height:85%;
    background: linear-gradient(#9fbb87,#9fbb87) no-repeat center/1px 100%;
    opacity:.85;
    justify-self:center;
  }

  /* Left block */
  .mc-title{
    margin:0 0 .65rem;
    color:#0f1113;
    font-size:clamp(1.05rem,3.4vw,1.35rem);
    line-height:1.35;
    color: rgb(244, 239, 239);
  }
  .mc-line{
    margin:.35rem 0;
    color:#0f1113;
    font-size:clamp(.95rem,2.2vw,1.05rem);
  }

  /* Time: looping "timer" animation */
  .mc-time{ white-space:nowrap; }
  .mc-colon{
    display:inline-block;
   animation: none !important;
    color: white;
  }
  @keyframes mc-blink{
    0%,49% { opacity:1; }
    50%,100% { opacity:0; }
  }

  /* Subtle progress shimmer under time (continuous loop) */
  .mc-timerbar{
    display:block;
    height:2px;
    margin-top:.35rem;
    background: linear-gradient(90deg, #9fbb87 0%, rgba(159,187,135,0) 30%, #9fbb87 60%, rgba(159,187,135,0) 90%);
    background-size: 200% 100%;
    animation: mc-progress 3.2s linear infinite;
    color: white;
  }
  @keyframes mc-progress{
    0%{ background-position: 0% 0; }
    100%{ background-position: 200% 0; }
  }

  /* Optional countdown line */
  .mc-countdown{
    margin:.5rem 0 0;
    font-size:clamp(.9rem,2vw,1rem);
    color:#334;
    opacity:.9;
  }

  /* Right CTA block (grid centering) */
  .mc-cta{
    display:grid; place-items:center;
  }
  .mc-btn{
    display:inline-block;
    padding:.85rem 1.6rem;
    border:2px solid #9fbb87;
    border-radius:14px;
    background:#fff;
    color:#0f1113;
    font-weight:700;
    text-decoration:none;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }
  .mc-btn:hover{ transform: translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.1); }
  .mc-btn:focus-visible{ outline:3px solid #7a5cff; outline-offset:2px; }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .mc-colon, .mc-timerbar{ animation:none !important;
    color: white; }
  }
  .hero-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: clamp(20px,4vw,48px) 0;
}

.hero-bg-video {
  position: absolute;
  inset: 0;               /* shorthand for top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;       /* behave like background-size: cover */
  z-index: -1;             /* stay behind content */
}

.hero-wrap {
  position: relative;
  z-index: 1;              /* ensures content is above video */
}
.hero-tagline{
  grid-column: 1 / -1;           /* if the parent becomes grid later, this still spans */
  text-align: center;            /* center the text */
  margin: 0 0 clamp(12px, 2vw, 20px);
  font-family: Cinzel, serif;
  font-weight:300;
  font-size: clamp(1.1rem, 2.1vw, 2rem);
  line-height: 1.25;
  letter-spacing: .2px;
  color: #F8F8F8;                /* white on video */
}
.masterclass-card.mc-card{
  display: block;                 /* keep as block so tagline aligns with mc-grid width */
}

/* Optional overlay to darken video for better text contrast */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* adjust opacity */
  z-index: 0;
}


/* ==================================================
   MOBILE GPU & PERFORMANCE OPTIMIZATIONS ONLY
   ================================================== */
@media (max-width: 768px) {

  /* ------------------------------
     Reduce layout & paint cost
     ------------------------------ */
  .hero-section {
    /* padding removed 20 Sep: written for the old hero, and its !important
       beat the rebuilt one and flattened it on phones. */
    contain: layout paint style; /* isolates repaint */
  }

  .hero-wrap {
    padding: 0 14px !important;
  }

  /* ------------------------------
     Video GPU optimization
     ------------------------------ */
  .hero-bg-video {
    object-fit: cover;
    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;
  }

  /* Lighter overlay on mobile (less blending cost) */
  .hero-section::before {
    background: rgba(0,0,0,0.28);
  }

  /* ------------------------------
     Hero layout stacking
     ------------------------------ */
  .hero {
    display: flex !important;
    flex-direction: column;
    gap: 16px !important;
  }

  .hero-left,
  .hero-right {
    width: 100%;
  }

  /* ------------------------------
     Masterclass card (lighter + tighter)
     ------------------------------ */
  .masterclass-card {
    margin-top: 8px !important;
    padding: 14px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.25);
  }

  /* Grid → column without reflow stress */
  .mc-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 14px;
  }

  .mc-divider {
    display: none !important;
  }

  /* ------------------------------
     Text scaling (readable + fast)
     ------------------------------ */
  .hero-tagline {
    font-size: 1rem !important;
    line-height: 1.35;
  }

  .mc-title {
    font-size: 1.25rem !important;
    line-height: 1.25;
  }

  .mc-line {
    font-size: .95rem !important;
  }

  .mc-countdown {
    font-size: .95rem;
  }

  /* ------------------------------
     CTA optimization
     ------------------------------ */
  .mc-cta {
    width: 100%;
  }

  .mc-btn {
    width: 100%;
    padding: 12px !important;
    border-radius: 12px;
    transform: translateZ(0);
  }

  /* ------------------------------
     Sticky video button (GPU safe)
     ------------------------------ */
  .hero-video-btn {
    top: 14px;
    transform: translate3d(-50%,0,0);
    will-change: transform;
  }

  .hero-video-btn.is-sticky {
    top: 10px;
    transform: translate3d(-50%,0,0);
  }

  /* ------------------------------
     Disable expensive animations
     ------------------------------ */
  .mc-timerbar {
    animation-duration: 4.5s;
  }

  @media (prefers-reduced-motion: reduce) {
    .mc-timerbar,
    .animate-btn {
      animation: none !important;
      transition: none !important;
    }
  }
}
/* =========================================
   MOBILE: FULL CENTER ALIGNMENT (ONLY)
   ========================================= */
@media (max-width: 768px) {

  /* Center the whole hero content */
  .hero {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .hero-left,
  .hero-right {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Center eyebrow + tagline */
  .eyebrow,
  .hero-tagline {
    text-align: center !important;
    justify-content: center;
    margin-inline: auto;
  }

  /* Masterclass card centered */
  .masterclass-card {
    margin-inline: auto !important;
    width: 100% !important;
    max-width: 520px;   /* keeps it readable */
  }

  /* Grid content centered */
  .mc-grid,
  .mc-left {
    text-align: center !important;
    justify-items: center;
    align-items: center;
  }

  /* Time line centered */
  .mc-time,
  .mc-line {
    justify-content: center;
    text-align: center;
  }

  /* CTA block perfectly centered */
  .mc-cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
    text-align: center;
  }

  .mc-btn {
    width: 100%;
    max-width: 320px;   /* nice mobile width */
    margin-inline: auto;
  }

  /* Countdown text center */
  .mc-countdown {
    text-align: center;
  }

  /* Sticky assessment button center */
  .hero-video-btn,
  .hero-video-btn.is-sticky {
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    text-align: center;
  }
}

/* ===== block 2 of 21 (was inline) ===== */
/* Kill the old dark overlay for this section only — the scrim below
     replaces it, and two stacked overlays made the video muddy. */
  .hero-section.mch::before { content: none; }

  .hero-section.mch {
    position: relative;
    isolation: isolate;          /* own stacking context, no z-index fights */
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-items: stretch;
    padding: clamp(40px, 8vw, 88px) clamp(16px, 5vw, 48px);
    color: #fff;
    /* The poster doubles as the section background, so the layout is
       identical whether or not the video ever loads. */
    background: #0b0820 url("hero-poster.webp") center / cover no-repeat;
  }

  /* svh avoids the jump when a mobile browser hides its URL bar.
     The vh line is the fallback for anything that lacks svh. */
  .hero-section.mch { min-height: clamp(520px, 80vh, 780px); }
  @supports (height: 1svh) {
    .hero-section.mch { min-height: clamp(520px, 80svh, 780px); }
  }

  /* A phone does not need 80% of a tall viewport for six lines of text. */
  @media (max-width: 639px) {
    .hero-section.mch { min-height: clamp(420px, 66svh, 560px); }
  }

  .mch-video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mch-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      180deg,
      rgba(8, 6, 20, 0.62) 0%,
      rgba(8, 6, 20, 0.38) 42%,
      rgba(8, 6, 20, 0.78) 100%
    );
  }

  .mch-inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
  }

  /* Content sits on the LEFT, as it did originally, leaving the right of
     the frame open so the video reads as the backdrop rather than as
     something behind a full-width card. A max-width rather than a grid
     column: these are block children, so the cap alone holds them
     against the left edge, and they go full width on a phone with no
     second rule to undo it. */
  @media (min-width: 900px) {
    .mch-tagline,
    .mch-card {
      max-width: 62%;
    }
  }

  .mch-tagline {
    margin: 0 0 clamp(18px, 3.5vw, 32px);
    text-align: center;
    font-family: "Cinzel", Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.02rem, 0.92rem + 1.5vw, 2rem);
    line-height: 1.3;
    color: #f6f3ff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
    text-wrap: balance;
  }

  .mch-card {
    background: rgba(12, 10, 28, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: clamp(14px, 2vw, 22px);
    padding: clamp(20px, 4vw, 40px);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  }

  /* Stacked by default. The two-column split only appears once there is
     genuinely room for it — no flex/grid mismatch, no !important. */
  .mch-body {
    display: grid;
    gap: clamp(22px, 4vw, 34px);
  }

  @media (min-width: 820px) {
    .mch-body {
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: clamp(30px, 4vw, 56px);
    }
    /* A border, not a separate divider element that can fall out of sync. */
    .mch-action {
      border-left: 1px solid rgba(255, 255, 255, 0.18);
      padding-left: clamp(26px, 3vw, 46px);
    }
  }

  .mch-title {
    margin: 0;
    font-family: "Cinzel", Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.3rem, 1.05rem + 1.5vw, 2.25rem);
    line-height: 1.25;
    color: #fff;
    text-wrap: balance;
  }

  .mch-title span {
    display: block;
    margin-top: 0.4em;
    font-size: 0.85em;
    color: #f2d89c;
  }

  .mch-meta {
    margin: clamp(16px, 2.5vw, 26px) 0 0;
    display: grid;
    gap: 0.55rem;
  }

  .mch-meta > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
  }

  .mch-meta dt {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: clamp(0.68rem, 0.64rem + 0.2vw, 0.78rem);
    color: #c6bdf0;
  }

  /* The colon is generated, so it cannot end up doubled the way the old
     markup did (a literal ":" span sat next to "Time :"). */
  .mch-meta dt::after { content: ":"; }

  .mch-meta dd {
    margin: 0;
    font-weight: 600;
    font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem);
    color: #fff;
  }

  .mch-action {
    display: grid;
    gap: clamp(12px, 2vw, 18px);
    justify-items: stretch;
  }
  @media (min-width: 820px) {
    .mch-action { justify-items: center; }
  }

  .mch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 clamp(26px, 3vw, 40px);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd87d, #efb33c);
    color: #2b1d05;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    touch-action: manipulation;
    box-shadow: 0 10px 26px -8px rgba(239, 179, 60, 0.6);
    transition: transform 0.18s ease, filter 0.18s ease;
  }
  .mch-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
  .mch-btn:active { transform: translateY(0) scale(0.99); }
  .mch-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

  .mch-countdown {
    margin: 0;
    text-align: center;
    font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #cdc6ea;
  }

  .mch-countdown #mc-cd {
    display: block;
    margin-top: 0.3rem;
    font-weight: 700;
    font-size: clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
    letter-spacing: 0.02em;
    text-transform: none;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  /* ---- Compact phone layout ----------------------------------------
     Same content, less of it. The two meta rows go side by side with the
     label stacked over the value, the countdown collapses onto one line,
     and the paddings come in — so the whole offer is readable without
     scrolling instead of running down the screen. */
  @media (max-width: 639px) {
    .hero-section.mch { padding: 30px 16px; }
    .mch-tagline { margin-bottom: 14px; font-size: clamp(0.95rem, 0.86rem + 1vw, 1.16rem); line-height: 1.28; }
    .mch-card { padding: 16px; border-radius: 14px; }
    .mch-body { gap: 16px; }
    .mch-title { font-size: clamp(1.1rem, 0.98rem + 1.3vw, 1.38rem); line-height: 1.24; }
    .mch-title span { margin-top: 0.22em; font-size: 0.8em; }

    .mch-meta { margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mch-meta > div { display: block; }
    .mch-meta dt { display: block; font-size: 0.64rem; }
    /* No trailing colon when the label sits ABOVE its value. */
    .mch-meta dt::after { content: none; }
    .mch-meta dd { display: block; margin-top: 2px; font-size: 0.92rem; }

    .mch-action { gap: 10px; }
    .mch-btn { min-height: 48px; font-size: 1rem; }
    .mch-countdown { font-size: 0.72rem; }
    .mch-countdown #mc-cd { display: inline; margin-top: 0; font-size: 0.86rem; }
  }

  /* A looping background video is motion. Hiding it falls back to the
     poster, which is already the section's background. */
  @media (prefers-reduced-motion: reduce) {
    .mch-video { display: none; }
    .mch-btn { transition: none; }
  }

/* ===== block 3 of 21 (was inline) ===== */
.featured-logos-wrap {
    background: #ffffff;
    height: 225px;              /* ✅ Fixed section height */
    max-height: 225px;
    overflow: hidden;
    display: flex;
    align-items: center;       /* ✅ Vertically center logos */
  }

  .logo-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 225px;             /* ✅ Match section height */
    display: flex;
    align-items: center;
    mask-image: linear-gradient(
      to right,
      transparent,
      black 10%,
      black 90%,
      transparent
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      black 10%,
      black 90%,
      transparent
    );
  }

  .logo-track {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: logo-scroll 22s linear infinite;
    will-change: transform;
  }

  .logo-item {
    width: 216px;
    height: 220px;            /* ✅ Your requested logo height */
    object-fit: contain;
    opacity: 0.9;
    filter: grayscale(100%);
    transition: transform 0.25s ease, filter 0.25s ease;
  }

  .logo-item:hover {
    transform: translateY(-4px) scale(1.03);
    filter: grayscale(0%);
    opacity: 1;
  }

  .logo-marquee:hover .logo-track {
    animation-play-state: paused;
  }

  @keyframes logo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ✅ Responsive Mobile Scaling */
  @media (max-width: 576px) {
    .featured-logos-wrap {
      height: 140px;
    }

    .logo-marquee {
      height: 140px;
    }

    .logo-track {
      gap: 2rem;
    }

    .logo-item {
      width: 140px;
      height: 120px;
    }
  }

/* ===== block 4 of 21 (was inline) ===== */
/* Show ONLY on mobile */
    #about-me-mobile { display: none; }
    @media (max-width: 767.98px) {
      #about-me-mobile { display: block !important; }
    }
    @media (min-width: 768px) {
      #about-me-mobile { display: none !important; }
    }

    /* Design tokens */
    :root {
      --ink: #111217;
      --muted: #40444a;
      --bg: #ffffff;
      --line: #bfe9b6;
      --radius: 18px;
      --shadow: 0 10px 26px rgba(0,0,0,0.10); /* a bit lighter for performance */
      --wrap: min(560px, 94vw);
    }

    #about-me-mobile {
      padding: 16px 0 0;
      color: var(--ink);
      font-family: "Montserrat",  sans-serif;
      background: transparent;
      font-size: clamp(1.4rem, 1.8vw + 0.5rem, 2rem);
    }

    #about-me-mobile .wrap {
      width: var(--wrap);
      margin: 0 auto 18px;
    }

    /* Image / hero figure */
    .hero-figure {
      margin: 0;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: var(--shadow);
      background: #000;
    }
   .aboutme-tmobile {
    font-size: clamp(1.4rem, 1.8vw + 0.5rem, 2rem);
    text-align: center;
}
    .hero-figure img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      aspect-ratio: 4 / 5;   /* vertical portrait, better on phones */
    }

    /* Card */
    .bio-card {
      position: relative;
      background: var(--bg);
      border: 2px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 8px 18px rgba(0,0,0,0.08);
      padding: clamp(12px, 4vw, 18px);
      margin-inline: auto;
      margin-top: -14px;                     /* overlap image */
      width: calc(var(--wrap) - 12px);       /* subtle inset */
    }

    .bio-card h3 {
      font-family: "Cinzel", serif;
      text-align: center;
      font-size: clamp(18px, 4.5vw, 20px);
      margin: 4px 0 8px;
    }

    .bio-card p {
      margin: 0.6rem 0;
      color: var(--muted);
      font-size: clamp(14px, 3.9vw, 15.5px);
      line-height: 1.6;
    }

    /* Extra small devices tweaks */
    @media (max-width: 360px) {
      #about-me-mobile {
        padding-top: 10px;
      }
      .bio-card {
        padding: 10px 12px;
        margin-top: -10px;
      }
      .bio-card p {
        font-size: 13.5px;
        line-height: 1.55;
      }
    }
    /* Center the Know More button */
#about-me-mobile .btn-style-two {
  display: block;
  width: max-content;
  margin: 18px auto 0;
  text-align: center;
}

/* ===== block 5 of 21 (was inline) ===== */
#who-i-am{
      --maxw: 1200px;
      --bg: #f9f6f1;
      --ink:#111;
      --muted:#363636;
      --brd:#e7e0d4;
      --shadow: 0 16px 36px rgba(0,0,0,.10);
      padding: clamp(2.5rem, 6vw, 5rem) 0;
      background: var(--bg);
      color: var(--ink);
    }

    /* Typography */
    #who-i-am h1,#who-i-am h2,#who-i-am h3{ font-family:"Cinzel",serif; }
    #who-i-am .subheading{ font-family:"Raleway",sans-serif; }
    #who-i-am p, #who-i-am a, #who-i-am button{ font-family:"Montserrat",sans-serif; }

    .who-container{ width:min(100% - 2rem, var(--maxw)); margin-inline:auto; }

    /* GRID layout (no flex); right column stretches to match left height */
    .who-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: clamp(1.25rem, 3vw, 2rem);
      align-items: stretch; /* ensures equal column heights */
    }
    @media (max-width: 992px){
      .who-grid{ grid-template-columns: 1fr; }
    }

    .who-title{
    font-size: clamp(1.2rem, 2.5vw, 2rem);

      font-weight: 700;
      margin: 0 0 1rem;
      letter-spacing:.01em;
    }
    .who-left p{
      margin:0 0 1rem;
      line-height:1.8;
      color: var(--muted);
      max-width: 70ch;
    }

    /* CTA button (simple) */
    .btn-style-two{
      display:inline-block;
      margin-top:.5rem;
      background:#6c39d6;
      color:#fff;
      border:0;
      border-radius:12px;
      padding:.8rem 1.2rem;
      font-weight:700;
      text-decoration:none;
      box-shadow: var(--shadow);
    }
    .btn-style-two:hover{ filter:brightness(1.05); }

    /* Right column: hero image with PIP video overlay */
    .who-media{
      position:relative;
      background:#fff;
      border:1px solid var(--brd);
      border-radius:14px;
      padding:.6rem;          /* white frame like the reference */
      box-shadow: var(--shadow);
      height: 100%;
      display:grid;           /* NO FLEXBOX */
    }
    .who-hero{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      border-radius:12px;
    }

    /* Small video overlay (bottom-right) */
    .pip{
      position:absolute;
      right: clamp(.6rem, 2vw, 1rem);
      bottom: clamp(.6rem, 2vw, 1rem);
      width: min(46%, 260px);
      background:#fff;
      border:1px solid var(--brd);
      border-radius:14px;
      padding:.4rem;
      box-shadow: 0 10px 26px rgba(0,0,0,.18);
    }
    .pip video{
      width:100%;
      height:auto;
      display:block;
      border-radius:12px;
      background:#000;
    }

    /* Keep proportions sensible on small screens */
    @media (max-width: 992px){
      .who-media{ height:auto; }
      .who-hero{ height:auto; }
      .pip{ width: 48%; }
    }
    @media (max-width: 560px){
      .pip{ width: 60%; }
    }

    /* =========================
       VISIBILITY (hide on mobile only)
       ========================= */
    /* Visible by default on larger screens */
    #who-i-am { display:block; }

    /* Hide at <= 767.98px (phones) */
    @media (max-width: 767.98px){
      #who-i-am { display:none !important; }
    }

/* ===== block 6 of 21 (was inline) ===== */
/* Typography */
    #featured h1, #featured h2, #featured h3 { font-family: "Cinzel", serif; }
    #featured p, #featured span { font-family: "Montserrat", sans-serif; }

    /* Section backdrop (keep color) */
    #featured{
      --maxw: 1240px;
      background: #fbf8f2;
      padding: clamp(2.5rem, 6vw, 5rem) 0;
    }

    .featured-wrap{
      width: min(100% - 2rem, var(--maxw));
      margin-inline: auto;
    }

    /* -------------------------
       AURORA GLASS BOX
       ------------------------- */
    .stats-panel{
      /* Aurora Colors (unchanged) */
      --bg: #0b0b12;
      --ink: #f7f7fb;
      --muted: #cbd0e6;
      --edge: #8a63ff;
      --grad: conic-gradient(from 180deg at 50% 50%, #8a63ff, #5ea0ff, #ff7bd3, #8a63ff);

      background:
        radial-gradient(1100px 700px at 5% 0%, rgba(138, 99, 255, .18), transparent 60%),
        radial-gradient(900px 600px at 95% 20%, rgba(94, 160, 255, .16), transparent 65%),
        radial-gradient(700px 500px at 50% 100%, rgba(255, 123, 211, .12), transparent 55%),
        var(--bg);

      border-radius: 20px;
      padding: clamp(1.4rem, 3.2vw, 2.4rem);

      /* Glass Effect */
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);

      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
      position: relative;
      overflow: hidden;
    }

    /* Aurora Glow Border */
    .stats-panel::before{
      content:"";
      position:absolute;
      inset:0;
      padding:3px;
      border-radius:20px;
      background: var(--grad);

      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
    }

    /* Grid (desktop / tablet) */
    .stats-grid{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(1rem, 3vw, 2.5rem);
      text-align:center;
      position: relative;
      z-index: 2;
    }

    @media (max-width: 1024px){
      .stats-grid{ grid-template-columns: repeat(2, 1fr); }
    }

    /* Base stat styles (for desktop) */
    .stat .value{
      font-weight: 800;
      font-size: clamp(2rem, 4.6vw, 3.3rem);
      color: var(--ink);
      text-shadow: 0 0 12px rgba(138, 99, 255, .4);
    }

    .stat .label{
      margin-top: .3rem;
      color: var(--muted);
      font-size: clamp(.95rem, 1.3vw, 1.05rem);
      letter-spacing: 0.3px;
    }

    /* =========================
       MODERN MOBILE LAYOUT
       ========================= */
    @media (max-width: 600px) {
      /* Tighter padding on section */
      #featured {
        padding: 1.5rem 0 1.9rem;
      }

      .featured-wrap{
        width: 100%;
        margin-inline: 0;
        padding-inline: 14px;
      }

      .stats-panel{
        padding: 1rem 0.9rem 1.1rem;
        border-radius: 14px;
        backdrop-filter: blur(12px) saturate(160%);
        -webkit-backdrop-filter: blur(12px) saturate(160%);
        box-shadow: 0 16px 40px rgba(0,0,0,.35);
      }

      .stats-panel::before{
        border-radius: 14px;
        padding: 2px;
      }

      /* 2×2 modern card grid */
      .stats-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
        text-align: left;
      }

      .stat{
        background: rgba(7,7,16,0.85); /* same dark palette, just transparent */
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.16);
        padding: 0.85rem 0.8rem 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.15rem;
      }

      .stat .value{
        font-size: clamp(1.7rem, 6.5vw, 2.2rem);
        text-shadow: 0 0 6px rgba(138,99,255,0.35);
        line-height: 1.1;
      }

      .stat .label{
        font-size: 0.78rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        opacity: 0.96;
      }

      /* Extra small screens */
      @media (max-width: 360px){
        .stat{
          padding: 0.7rem 0.65rem;
          border-radius: 12px;
        }
        .stat .value{
          font-size: 1.5rem;
        }
        .stat .label{
          font-size: 0.72rem;
          letter-spacing: 0.1em;
        }
      }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .stat{
        transition: none;
      }
    }

/* ===== block 7 of 21 (was inline) ===== */
/* ----------------- Theme ----------------- */
    #workshop-aurora{
      --bg: #0b0b12;
      --ink: #f7f7fb;
      --muted:#cbd0e6;
      --edge:#8a63ff;
      --grad: conic-gradient(from 180deg at 50% 50%, #8a63ff, #5ea0ff, #ff7bd3, #8a63ff);
      --shadow: 0 24px 64px rgba(0,0,0,.35);
      background:
        radial-gradient(1100px 700px at 5% 0%, rgba(138,99,255,.18), transparent 60%),
        radial-gradient(900px 600px at 95% 20%, rgba(94,160,255,.16), transparent 65%),
        radial-gradient(700px 500px at 50% 100%, rgba(255,123,211,.12), transparent 55%),
        var(--bg);
      color: var(--ink);
      padding: clamp(2.5rem, 6vw, 5rem) 0;
      position: relative;
      overflow: hidden;
    }

    /* Font mapping */
    #workshop-aurora h1,
    #workshop-aurora h2,
    #workshop-aurora h3,
    #workshop-aurora h4,
    #workshop-aurora h5,
    #workshop-aurora h6{
      font-family:"Cinzel",serif;
    }
    #workshop-aurora .subheading{
      font-family:"Raleway",sans-serif;
    }
    #workshop-aurora p{
      font-family:"Montserrat",sans-serif;
    }

    .wa-wrap{ width:min(100% - 2rem, 1220px); margin-inline:auto; }

    /* Decorative aurora blobs */
    .blob{
      position:absolute; filter: blur(48px); opacity:.35; pointer-events:none;
      width: 420px; height: 420px; border-radius:50%;
      background: radial-gradient(closest-side, #8a63ff 0 50%, transparent 51%);
      animation: float1 14s ease-in-out infinite alternate;
    }
    .blob.b2{
      right:-120px; top:-80px;
      background: radial-gradient(closest-side,#5ea0ff 0 50%,transparent 51%);
      animation: float2 16s ease-in-out infinite alternate;
    }
    @keyframes float1{ from{ transform: translate(-6%,2%) } to{ transform: translate(6%,-3%) } }
    @keyframes float2{ from{ transform: translate(4%,0) } to{ transform: translate(-6%,8%) } }

    /* Main card */
    .wa-card{
      position:relative; border-radius: 20px;
      padding: clamp(1.25rem, 3vw, 2rem);
      box-shadow: var(--shadow);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.12);
      overflow: hidden;
    }
    .wa-card::before{
      content:""; position:absolute; inset:-1px; border-radius:20px;
      padding:1px; background: var(--grad);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      animation: ring 12s linear infinite; opacity:.6;
    }
    @keyframes ring{ to{ transform: rotate(1turn) } }

    /* Grid layout */
    .wa-grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(1.2rem, 3vw, 2rem);
      align-items: stretch;
    }
    @media (max-width: 992px){
      .wa-grid{ grid-template-columns: 1fr; }
    }

    /* Left column */
    #wa-title{
      font-weight:300; letter-spacing:.02em; text-transform:uppercase;
      line-height:1.05; margin:0 0 .6rem;
    }
    .wa-sub{
      color:var(--muted); margin:0 0 1rem; font-size:clamp(1rem,2.2vw,1.12rem);
    }
    .wa-bullet-grid{
      display:grid; grid-template-columns: 1fr 1fr 1fr;
      gap: .75rem; margin:.6rem 0 1.2rem;
    }
    @media (max-width: 992px){
      .wa-bullet-grid{ grid-template-columns: 1fr; }
    }
    .wa-chip{
      display:grid; grid-template-columns: auto 1fr; gap:.7rem; align-items:start;
      background:#141425; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:.85rem 1rem;
    }
    .wa-ico{
      width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
      background: radial-gradient(80% 80% at 30% 30%, #fff 0 15%, rgba(255,255,255,.2) 16% 100%), #8a63ff;
      color:#0b0b12; font-weight:900; box-shadow: 0 8px 18px rgba(138,99,255,.35);
      font-family:"Montserrat",sans-serif;
    }

    /* CTA */
    .wa-cta-wrap{ display:grid; justify-items:start; }
    .wa-cta{
      display:inline-grid; grid-auto-flow:column; grid-auto-columns:max-content; align-items:center; gap:.7rem;
      padding:.95rem 1.35rem; border-radius:999px; text-decoration:none; font-weight:800;
      background: var(--grad); color:#0b0b12; box-shadow: 0 12px 28px rgba(138,99,255,.45);
      font-family:"Montserrat",sans-serif;
    }
    .wa-cta .badge-free{
      background:#0b0b12; color:#fff; padding:.2rem .55rem; border-radius:999px; font-size:.85rem;
    }

    /* Right column: Timer panel */
    .wa-panel{
      position:relative; background:#0f1121; border:1px solid rgba(255,255,255,.12);
      border-radius:14px; padding:1rem; display:grid; gap:1rem;
    }
    .wa-label{
      letter-spacing:.42em; font-weight:700; color:var(--muted);
      text-transform:uppercase; font-size:.9rem; margin:0;
    }
    .wa-timer{
      display:grid;
      grid-template-columns: repeat(7, auto);
      gap:.75rem; align-items:end;
    }
    .wa-box{
      display:grid; grid-template-rows:auto auto; gap:.35rem; text-align:center;
      background:#12152c; border:1px solid rgba(255,255,255,.08); border-radius:12px;
      padding:.8rem .9rem; min-width:84px;
      box-shadow: inset 0 10px 24px rgba(0,0,0,.3);
    }
    .wa-num{
      font-family:"Montserrat",sans-serif; font-weight:900;
      font-size:clamp(1.7rem,3.6vw,2.3rem); letter-spacing:.02em;
    }
    .wa-lbl{ color:var(--muted); font-size:.92rem; text-transform:lowercase; }
    .wa-colon{
      align-self:center; justify-self:center;
      font-size:clamp(1.6rem,3.6vw,2.3rem); opacity:.9;
    }
    .wa-sticker{
      position:absolute; right:.8rem; top:.8rem; background:#141425; color:#ffd;
      padding:.35rem .6rem; border:1px solid rgba(255,255,255,.12); border-radius:999px;
      font-weight:800; font-size:.85rem; font-family:"Montserrat",sans-serif;
    }

    /* --------- MOBILE FIX FOR TIMER (small screens) --------- */
    @media (max-width: 575.98px){
      .wa-panel{
        padding:0.9rem 0.8rem 1rem;
      }
      .wa-timer{
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 x 2 grid */
        gap:0.6rem;
      }
      .wa-box{
        min-width:0;
        padding:0.7rem 0.6rem;
      }
      .wa-colon{
        display:none; /* remove colons to save space */
      }
    }

/* ===== block 8 of 21 (was inline) ===== */
/* ===== Tokens / Background (mobile-first) ===== */
    #live-sessions{
      --maxw: 1240px;
      --cream-50: #fbf8f2;
      --ink: #101214;
      --muted: #151515;
      --accent: #7a5cff;
      --shadow: 0 18px 38px rgba(0,0,0,.10);
      background: var(--cream-50);
      color: var(--ink);
      padding: clamp(2.5rem, 6vw, 5rem) 0;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    /* ===== Typography ===== */
    #live-sessions h1, #live-sessions h2, #live-sessions h3 { font-family: "Cinzel", serif; }
    #live-sessions .subheading { font-family: "Montserrat", sans-serif; color: var(--muted); }
    #live-sessions p, #live-sessions a, #live-sessions button, #live-sessions small, #live-sessions span { font-family: "Montserrat", sans-serif; }

    /* ===== Container ===== */
    .live-wrap{
      width: min(100% - 2rem, var(--maxw));
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(1rem, 2.2vw, 1.5rem);
    }

    /* ===== Heading ===== */
    #live-title{
     font-size: clamp(1.2rem, 2.5vw, 2rem);
      font-weight: 700;
      margin: 0 0 .3em;
      line-height: 1.2;
    }
    .live-intro{
      margin: 0 0 clamp(1.25rem, 3vw, 2rem);
      font-size: clamp(.98rem, 1.3vw, 1.05rem);
      line-height: 1.75;
      max-width: 70ch;
    }

    /* ===== Cards grid ===== */
    .live-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(1.25rem, 2.8vw, 2.25rem);
      align-items: stretch;
    }
    @media (max-width: 992px){ .live-grid{ grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 576px){ .live-grid{ grid-template-columns: 1fr; } }

    /* ===== Card ===== */
    .live-card{
      border-radius: 28px;
      box-shadow: var(--shadow);
      border: 1px solid rgba(0,0,0,.08);
      display: grid;
      grid-template-rows: auto 1fr;
      padding: clamp(1rem, 2.2vw, 1.25rem);
      min-height: 100%;
      overflow: hidden;
    }

    /* ===== Figure (image/video) ===== */
    .live-figure{
      margin: 0 0 clamp(.8rem, 1.4vw, 1rem);
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 14px 28px rgba(0,0,0,.18) inset, 0 8px 18px rgba(0,0,0,.15);
      position: relative;
      isolation: isolate;
    }

    /* --- Reel format (9:16) --- */
    .live-figure.reel{
      aspect-ratio: 9 / 16;
      width: 100%;
      max-height: 65vh;
      margin-inline: auto;
      position: relative;
    }
    .live-figure.reel .live-media{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      border-radius: inherit;
      background: #000;
    }
    @media (min-width: 1200px){
      .live-figure.reel{ max-width: 420px; }
    }

    /* ===== CLICK OVERLAY (replaces hover) ===== */
    .about-btn{
      position:absolute;
      top:10px; right:10px;
      background:rgba(0,0,0,0.55);
      color:#fff;
      font-size:.70rem;
      font-weight:600;
      padding:4px 10px;
      border-radius:6px;
      cursor:pointer;
      border:1px solid rgba(255,255,255,0.4);
      transition:background .2s;
      z-index:3;
    }
    .about-btn:hover{ background:rgba(0,0,0,0.75); }

    .about-overlay{
      position:absolute;
      inset:0;
      background:rgba(122,92,255,0.92); /* #7a5cff transparent */
      color:#fff;
      padding: clamp(.9rem, 2vw, 1.1rem);
      font-size: 30px;
  line-height: 1.8;
      display:none;
      z-index:2;
      overflow:auto;
    }
    .about-overlay.active{ display:block; }

    /* ===== Details (meta + button) ===== */
    .live-details{
      display: grid;
      align-content: center;
      justify-items: center;
      gap: .8rem;
      min-height: clamp(6rem, 10vw, 8rem);
      text-align: center;
    }
    .live-meta{
      text-align: center;
      font-weight: 500;
      font-size: 0.8rem;
      line-height: 1.35;
      color: #4d4250;
      background: #fff3e0;
      border: 1px solid #99a299;
      border-radius: 12px;
      padding: 8px 14px;
      margin: 0;
      box-shadow: 0 6px 14px rgba(0,0,0,.18);
      display: inline-block;
    }
    .enroll{
      display: inline-block;
      background: #fff;
      color: #111;
      border: 2px solid #c9b6ff;
      padding: .6rem 1.1rem;
      border-radius: 8px;
      font-weight: 600;
      box-shadow: 0 6px 14px rgba(0,0,0,.08);
      text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .enroll:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.12); text-decoration: none; }
    .enroll:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }

    /* ===== Reduced motion ===== */
    @media (prefers-reduced-motion: reduce) {
      .live-figure.reel .live-media{ animation: none; }
      video.live-media{ autoplay: false; }
    }

/* ===== block 9 of 21 (was inline) ===== */
/* This rule lived inside <noscript> in index.html and belongs there, not here: as a plain stylesheet rule it hides the Live Sessions videos for every visitor. Restored to index.html 20 Sep 2026. */

/* ===== block 10 of 21 (was inline) ===== */
/* ===== Tokens / Background ===== */
    #recorded-sessions{
      --maxw: 1240px;
      --bg: #f9f6f1;
      --ink: #0f1113;
      --muted: #151515;
      --btn-brd: #b9a1ff;
      --radius-xl: 28px;
      --radius-img: 30px;
      --shadow: 0 18px 38px rgba(0,0,0,.12);
      background: var(--bg);
      color: var(--ink);
      padding: clamp(2.5rem, 6vw, 5rem) 0;
    }

    /* Container */
    .rs-wrap{ width:min(100% - 2rem, var(--maxw)); margin-inline:auto; }

    /* Heading */
    #rec-title{ font-size: clamp(1.2rem, 2.5vw, 2rem); font-weight:700; margin:0 0 .35em; }
    .rs-intro{ margin:0 0 clamp(1.25rem, 3vw, 2rem); color:var(--muted); font-size:clamp(.98rem,1.3vw,1.05rem); line-height:1.7; max-width:70ch; }

    /* Grid of 4 cards */
    .rs-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(1rem, 2.4vw, 2rem);
      align-items: stretch;
    }
    @media (max-width:1200px){ .rs-grid{ grid-template-columns:repeat(3,1fr); } }
    @media (max-width:900px){  .rs-grid{ grid-template-columns:repeat(2,1fr); } }
    @media (max-width:560px){  .rs-grid{ grid-template-columns:1fr; } }

    /* Card */
    .rs-card{
      position:relative;
      border:1px solid rgba(0,0,0,.08);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
      padding: clamp(1rem, 2.2vw, 1.25rem);
      display:grid;
      grid-template-rows:auto 1fr;
      min-height:100%;
    }

    /* Image */
    .rs-figure{
      position:relative;
      margin:0 0 clamp(.9rem,1.6vw,1.1rem);
      border-radius:var(--radius-img);
      overflow:hidden;
      box-shadow: inset 0 18px 32px rgba(0,0,0,.22),
                  inset 0 -10px 24px rgba(0,0,0,.18),
                  0 8px 18px rgba(0,0,0,.18);
    }
    .rs-figure img{ display:block; width:100%; height:auto; }

    /* About Button */
    .about-btn{
      position:absolute;
      top:10px; right:10px;
      background:rgba(40, 40, 40, 0.55);
      color:#fff;
      font-size:.75rem;
      font-weight:300;
      padding:4px 10px;
      border-radius:6px;
      cursor:pointer;
      border:1px solid rgba(255,255,255,0.4);
      transition:background .2s;
      z-index:3;
    }
    .about-btn:hover{ background:rgba(0,0,0,0.75); }

    /* About Overlay */
    .about-overlay{
      position:absolute;
      inset:0;
      background:rgba(122,92,255,0.92); /* #7a5cff transparent */
      color:#fff;
      padding:1rem;
      font-size:1rem;
      line-height:1.7;
      display:none;
      z-index:2;
      overflow:auto;
    }
    .about-overlay.active{ display:block; }

    /* Details */
    .rs-details{
      display:grid;
      align-content:center;
      justify-items:center;
      gap:.8rem;
      min-height: clamp(6rem, 10vw, 8rem);
    }

    .rs-meta{
      text-align:center;
      color: var(--muted);
      font-size: 0.75rem;
      line-height: 1.6;
      margin:0;
      background:#fff3e0;
      border:1px solid #99a299;
      border-radius:12px;
      padding:8px 14px;
      box-shadow:0 6px 14px rgba(0,0,0,.12);
      display:inline-block;
    }

    /* Enroll button */
    .rs-btn{
      display:inline-block;
      margin-inline:auto;
      background:#fff;
      color:#F8F8F8;
      border:2px solid var(--btn-brd);
      padding:.6rem 1.1rem; border-radius:12px; font-weight:600;
      text-decoration:none; box-shadow:0 6px 14px rgba(0,0,0,.08);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .rs-btn:hover{ transform:translateY(-2px); text-decoration:none; box-shadow:0 10px 20px rgba(0,0,0,.12); }
    .rs-btn:focus-visible{ outline:3px solid #7a5cff; color: w; outline-offset:2px; }
    /* ===== Spiral Border + Text Glow for all CTA buttons ===== */
/* Targets both button styles used on your cards */
.enroll,
.rs-btn{
  position: relative;
  isolation: isolate;           /* keeps pseudo-elements contained */
  overflow: hidden;             /* hide the animated border bleed */
  border: 2px solid transparent;/* we’ll paint the border via ::before */
  background: #733f82;             /* your existing button fill */
  /* Existing radius is fine; just ensure both have same rounding feel */
  border-radius: 12px;          /* .enroll already 8px; you can match if you want */
  color: #F8F8F8;
}

/* Animated spiral/conic border */
.enroll::before,
.rs-btn::before{
  content: "";
  position: absolute;
  inset: 0;                     /* cover full button */
  border-radius: inherit;
  padding: 2px;                 /* border thickness */
  background:
    conic-gradient(
      from 0deg,
      rgba(122,92,255,1) 0%,
      rgba(122,92,255,0.7) 15%,
      rgba(169,153,255,0.7) 35%,
      rgba(122,92,255,0.4) 55%,
      rgba(122,92,255,0.85) 75%,
      rgba(122,92,255,1) 100%
    );
  /* Create a hollow center so only the border ring shows */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spiral-rotate 3.75s linear infinite;
  z-index: 0;
}

/* Inner fill layer sits above the spinning border, below text */
.enroll::after,
.rs-btn::after{
  content: "";
  position: absolute;
  inset: 2px;                   /* must match ::before padding */
  border-radius: inherit;
 
  z-index: 1;
  color: #F8F8F8;
}

/* Put actual button text/content above both pseudo-elements */
.enroll,
.rs-btn{
  z-index: 2;
}

/* Text glow + gentle pulse */
.enroll,
.rs-btn{
  /* subtle constant glow */
  text-shadow:
    0 0 6px rgba(122,92,255,0.55),
    0 0 14px rgba(169,153,255,0.45);
  animation: cta-pulse 2.4s ease-in-out infinite;
}

/* Optional: make glow stronger on hover/focus */
.enroll:hover, .enroll:focus-visible,
.rs-btn:hover, .rs-btn:focus-visible{
  text-shadow:
    0 0 8px rgba(122,92,255,0.75),
    0 0 18px rgba(169,153,255,0.65);
}

/* Spiral rotation (gives a moving, spiral-like ring) */
@keyframes spiral-rotate{
  from{ transform: rotate(0deg); }
  to{   transform: rotate(360deg); }
}

/* Gentle breathing pulse for the whole button (kept subtle) */
@keyframes cta-pulse{
  0%, 100%{
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
  }
  50%{
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(122,92,255,0.18);
  }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce){
  .enroll::before, .rs-btn::before,
  .enroll, .rs-btn{
    animation: none !important;
    color: #000;
  }
}

/* ===== block 11 of 21 (was inline) ===== */
-->
  
    
<!--    #quote{-->
<!--      --accent: var(--accent);-->
<!--      --bg: #ffffff;-->
<!--      --muted: #6b6b6b;-->
<!--      --ink: #2a2a2a;-->
<!--      --card-radius: 28px;-->
<!--      padding: 48px 20px;-->
<!--      background: var(--bg);-->
<!--    }-->

<!--    .quote-container{-->
<!--      max-width:1200px;-->
<!--      margin:0 auto;-->
<!--      display:flex;-->
<!--      align-items:center;-->
<!--      gap:70px;  -->
<!--      padding:0 20px;-->
<!--    }-->

<!--    @media (min-width: 901px){-->
<!--      .quote-card{-->
<!--        margin-left:40px;  -->
<!--      }-->
<!--    }-->

<!--    .portrait-column{-->
<!--      flex:0 0 400px;-->
<!--      display:flex;-->
<!--      justify-content:center;-->
<!--      align-items:center;-->
<!--      min-height:590px;-->
<!--    }-->

<!--    .portrait-card{-->
<!--      position:relative;-->
<!--      width:476px;-->
<!--      height:618px;-->
<!--      border-radius:12px;-->
<!--      overflow:visible;-->
<!--      display:block;-->
<!--      transform:translateZ(0);-->
<!--    }-->

<!--   .portrait-card::before{-->
<!--  content:"";-->
<!--  position:absolute;-->
<!--  inset:0;-->
<!--  border-radius:inherit;-->

<!--  border: 1px solid #e7e0d4; -->

<!--  background: none;-->
<!--  -webkit-mask: none;-->
<!--  mask: none;-->
<!--  backdrop-filter: none;-->

<!--  pointer-events: none;-->
<!--  z-index: 3;-->

<!--  box-shadow:-->
<!--    0 10px 30px rgba(0,0,0,0.12);-->
<!--}-->
<!--.portrait-card{-->
<!--  border: 4px solid #e7e0d4;-->
<!--}-->

<!--.portrait-card::before{-->
<!--  inset:6px;-->
<!--  border: 1px solid #e7e0d4;-->
<!--}-->



<!--    .portrait-card img{-->
<!--      width:100%;-->
<!--      height:100%;-->
<!--      object-fit:cover;-->
<!--      border-radius:12px;-->
<!--      display:block;-->
<!--      position:relative;-->
<!--      z-index:2;-->
<!--     border: 1px solid   #e7e0d4;-->
<!--    }-->

<!--    .quote-card{-->
<!--      flex:1 1 0;-->
<!--      max-width:520px;-->
<!--      background:#fff;-->
<!--      border-radius:var(--card-radius);-->
<!--      padding:28px 32px;-->
<!--      display:flex;-->
<!--      flex-direction:column;-->
<!--      justify-content:center;-->
<!--      color:var(--accent);-->
<!--      box-shadow:0 12px 28px rgba(6,10,15,0.06);-->
<!--      position:relative;-->
<!--    }-->

<!--    .quote-label{-->
<!--      font-family:"Cinzel", serif;-->
<!--      font-weight:700;-->
<!--      font-size:1.02rem;-->
<!--      margin-bottom:10px;-->
<!--      color:var(--accent);-->
<!--    }-->

<!--    .quote-text{-->
<!--      font-family:"Montserrat", sans-serif;-->
<!--      font-size:1.02rem;-->
<!--      line-height:1.7;-->
<!--      color:#4b3a4f;-->
<!--      margin-bottom:12px;-->
<!--    }-->

<!--    .quote-author{-->
<!--      margin-top:8px;-->
<!--      font-weight:800;-->
<!--      font-family:"Montserrat", sans-serif;-->
<!--      font-size:1rem;-->
<!--      color:var(--accent);-->
<!--    }-->

<!--    .quote-card::after{-->
<!--      content:"";-->
<!--      position:absolute;-->
<!--      left:50%;-->
<!--      transform:translateX(-50%);-->
<!--      bottom:-28px;-->
<!--      width:60%;-->
<!--      height:30px;-->
<!--      background:radial-gradient(closest-side, rgba(0,0,0,0.06), rgba(0,0,0,0.01));-->
<!--      filter:blur(18px);-->
<!--      border-radius:50%;-->
<!--      z-index:-1;-->
<!--    }-->

<!--    @media (max-width:720px){-->
<!--      .quote-container{-->
<!--        flex-direction:column;-->
<!--        gap:18px;-->
<!--      }-->
<!--      .quote-card{-->
<!--        margin-left:0; -->
<!--      }-->
<!--    }-->

<!--@media (max-width: 576px){-->

<!--  #quote{-->
<!--    padding: 32px 14px;-->
<!--  }-->

<!--  .quote-container{-->
<!--    flex-direction: column;-->
<!--    gap: 20px;-->
<!--    padding: 0;-->
<!--  }-->

<!--  .portrait-column{-->
<!--    flex: none;-->
<!--    width: 100%;-->
<!--    min-height: auto;-->
<!--    justify-content: center;-->
<!--  }-->

<!--  .portrait-card{-->
<!--    width: 100%;-->
<!--    max-width: 320px;-->
<!--    height: auto;-->
<!--    aspect-ratio: 3 / 4;-->
<!--    border-radius: 14px;-->
<!--    border: 1px solid   #e7e0d4;-->
<!--  }-->

<!--  .portrait-card img{-->
<!--    border-radius: inherit;-->
<!--  }-->

  
<!--  .quote-card{-->
<!--    max-width: 100%;-->
<!--    padding: 22px 20px;-->
<!--    text-align: center;-->
<!--  }-->

<!--  .quote-label{-->
<!--    font-size: .95rem;-->
<!--  }-->

<!--  .quote-text{-->
<!--    font-size: .98rem;-->
<!--    line-height: 1.65;-->
<!--  }-->

<!--  .quote-author{-->
<!--    font-size: .95rem;-->
<!--  }-->

<!--  .quote-card::after{-->
<!--    bottom: -22px;-->
<!--    width: 50%;-->
<!--  }-->
<!--}-->

<!--@media (min-width: 577px) and (max-width: 900px){-->

<!--  .quote-container{-->
<!--    flex-direction: column;-->
<!--    gap: 28px;-->
<!--  }-->

<!--  .portrait-column{-->
<!--    min-height: auto;-->
<!--  }-->

<!--  .portrait-card{-->
<!--    width: 360px;-->
<!--    height: auto;-->
<!--    aspect-ratio: 3 / 4;-->
<!--  }-->

<!--  .quote-card{-->
<!--    margin-left: 0;-->
<!--    max-width: 620px;-->
<!--    text-align: center;-->
<!--  }-->
<!--}-->

<!--

/* ===== block 12 of 21 (was inline) ===== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&display=swap');

/* ================================
   MYSTICAL WATERMARK – FULL SECTION
================================ */
#quote{
  position:relative;
  overflow:hidden;
}

#quote::before{
  content:"";
  position:absolute;
  inset:0;

  /* Sacred geometry / alchemy style SVG */
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'>\
<circle cx='200' cy='200' r='140' fill='none' stroke='%236750a4' stroke-width='2'/>\
<circle cx='200' cy='200' r='90' fill='none' stroke='%236750a4' stroke-width='1.5'/>\
<polygon points='200,40 260,130 360,200 260,270 200,360 140,270 40,200 140,130' \
fill='none' stroke='%236750a4' stroke-width='1.5'/>\
</svg>");
    
  background-repeat:no-repeat;
  background-position:center;
  background-size:720px 720px; /* large, section-wide */

  opacity:0.035;               /* 🔑 watermark subtlety */
  pointer-events:none;
  z-index:0;
}

/* Keep section content above watermark */
#quote > *{
  position:relative;
  z-index:1;
}

/* ================================
   MATERIAL DESIGN 3 TOKENS
================================ */
:root{
  --md-primary:#6750a4;
  --md-on-surface:#1c1b1f;
  --md-surface:#ffffff;

  --elev-2:0 4px 10px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.12);
  --elev-3:0 10px 24px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.12);

  --radius-lg:28px;
}

#quote{
  padding:88px 16px;
  background:#fafafa;
}

/* ================================
   GRID LAYOUT (NO FLEX)
================================ */
.quote-shell{
  max-width:1200px; /* slightly wider overall */
  margin:0 auto;

  display:grid;
  grid-template-columns:520px 1fr; /* ✅ wider portrait column */
  gap:53px;
  align-items:center;
}

/* ================================
   PORTRAIT COLUMN (WIDER)
================================ */
.portrait-wrap{
  display:grid;
  place-items:center; /* grid-based centering */
}

.portrait-wrap img{
  
  max-width:480px;   /* ✅ wider image */
  height:580px;      /* taller editorial feel */
  object-fit:cover;

  background:var(--md-surface);
  border-radius:var(--radius-lg);
  border:6px solid #ffffff;

  box-shadow:var(--elev-3);
}

/* ================================
   MATERIAL CARD (QUOTE)
================================ */
.quote-panel{
  position:relative;
  background:var(--md-surface);
  border-radius:var(--radius-lg);
  padding:44px 46px 40px;
  box-shadow:var(--elev-2);
}

/* ================================
   START QUOTE MARK
================================ */
.quote-panel::before{
  content:"“";                /* opening quote */
  position:absolute;

  top:-28px;
  left:-36px;

  font-family: serif;
  font-size:196px;
  line-height:1;

  color:#6750a4;
  opacity:.50;

  pointer-events:none;
  z-index:0;
}


/* ================================
   MATERIAL TYPOGRAPHY
================================ */
/* ================================
   FINAL QUOTE TYPOGRAPHY (CINZEL)
================================ */
.quote-main{
  font-family: 'Cinzel', serif !important;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: .35px;
  color: var(--md-on-surface);
  margin: 0 0 22px;
}


.quote-author{
  font-family:'Cinzel', serif; /* ✅ */
  font-size:15px;
  font-weight:500;
  letter-spacing:.4px;
  color:#5f6368;
}

/* ================================
   RESPONSIVE (GRID ONLY)
================================ */
@media(max-width:1024px){
  .quote-shell{
    grid-template-columns:360px 1fr;
    gap:40px;
  }

  .portrait-wrap img{
    height:440px;
  }
}

@media(max-width:900px){
  .quote-shell{
    grid-template-columns:1fr; /* stack */
    gap:36px;
  }

  .portrait-wrap img{
    max-width:340px;
    height:400px;
  }

  .quote-panel{
    padding:34px 28px;
  }

  .quote-main{
    font-size:20px;
  }
}

@media(max-width:480px){
  #quote{
    padding:64px 14px;
  }

  .portrait-wrap img{
    max-width:400px;
    height:540px;
  }

  .quote-main{
    font-size:18px;
    line-height:1.55;
  }
}

/* ================================
   END QUOTE MARK (DECORATIVE)
================================ */
.quote-panel::after{
  content:"”"; /* closing quote */
  position:absolute;

  /* Position at end of text */
  bottom:-28px;
  right:-36px;

  font-family: serif;
  font-size:196px;
  line-height:1;

  color:#6750a4;
  opacity:.50;

  pointer-events:none;
  z-index:0;
}
/* Center author name */
.quote-author-center{
  text-align:center;
  display:block;
  margin-top:28px;
}

/* ===== block 13 of 21 (was inline) ===== */
section#product-testimonials{
  background:#f9f6f1;
}
    /* ===============================
       HEADER CONTAINER (CENTERED)
    =============================== */
    #product-testimonials .wrap{
      width: min(100% - 2rem, 1220px);
      margin-inline:auto;
    }

    #product-testimonials .hdr h2{
      font-size: clamp(1.2rem, 2.5vw, 2rem);
      font-weight: 700;
      margin: 0 0 .35em;
    }

    #product-testimonials .hdr .subheading{
      font-family: Montserrat, sans-serif;
      margin:0 0 1.5rem;
      color:#444;
    }

    /* ===============================
       FULL-WIDTH SLIDER
    =============================== */
    #product-testimonials .slider{
      position: relative;
      width: 100vw;              /* 🔥 FULL WIDTH */
      margin-left: 50%;
      transform: translateX(-50%);
    }

    #product-testimonials .viewport{
      width: 100vw;              /* 🔥 FULL WIDTH */
      overflow-x:auto;
      scrollbar-width:none;
      -webkit-overflow-scrolling: touch;
    }

    #product-testimonials .viewport::-webkit-scrollbar{
      display:none;
    }

    /* ===============================
       TRACK & CARDS
    =============================== */
    #product-testimonials .track{
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns: var(--card-w, 380px);
      gap:16px;
      padding:8px 5vw;           /* breathing space on big screens */
    }

    #product-testimonials .card{
      width: var(--card-w, 380px);
      height: 520px;
      border-radius:14px;
      overflow:hidden;
      box-shadow:0 8px 18px rgba(0,0,0,.12);
      background:#fff;
      border:1px solid #eee;
    }

    #product-testimonials .media img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* ===============================
       RESPONSIVE CARD SIZES
    =============================== */
    @media (max-width:1024px){
      #product-testimonials .track{ --card-w:320px; }
      #product-testimonials .card{
        height: calc(520px * (320 / 380));
      }
    }

    @media (max-width:640px){
      #product-testimonials .track{
        --card-w: min(88vw, 360px);
        padding-inline:16px;
      }
      #product-testimonials .card{
        aspect-ratio: 380 / 520;
        height:auto;
      }
    }

    /* ===============================
       DESKTOP ARROWS
    =============================== */
    #product-testimonials .outer-arrows{
      width:100%;
      display:flex;
      justify-content:center;
      gap:22px;
      margin-top:22px;
      pointer-events:none;
    }

    #product-testimonials .arrow-btn{
      pointer-events:auto;
      width:55px;
      height:55px;
      border-radius:50%;
      border:1px solid rgba(0,0,0,.35);
      background:rgba(0,0,0,.25);
      color:#fff;
      font-size:1.7rem;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:.25s;
    }

    #product-testimonials .arrow-btn:hover{
      background:rgba(0,0,0,.45);
      transform:translateY(-3px);
    }

    @media (max-width:1023px){
      #product-testimonials .outer-arrows{ display:none; }
    }

/* ===== block 14 of 21 (was inline) ===== */
/* -------- Scoped to #resulted-testimonials -------- */
    
    section#resulted-testimonials{
  background:#fafafa;
}

    /* Centered header container */
    #resulted-testimonials .wrap{ 
      width: min(100% - 2rem, 1220px); 
      margin-inline:auto; 
    }

    #resulted-testimonials .hdr h2{
      font-size: clamp(1.2rem, 2.5vw, 2rem);
      font-weight: 700;
      margin: 0 0 .35em;
    }

    #resulted-testimonials .hdr .subheading{
      font-family: Montserrat, sans-serif; 
      margin:0 0 1rem; 
      color:#444; 
    }

    /* ===============================
       FULL-WIDTH SLIDER (KEY CHANGE)
    =============================== */
    #resulted-testimonials .slider{
      width:100vw;
      margin-left:50%;
      transform:translateX(-50%);
    }

    #resulted-testimonials .viewport{
      width:100vw;
      overflow-x:auto;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
    }

    #resulted-testimonials .viewport::-webkit-scrollbar{
      display:none;
    }

    /* Track */
    #resulted-testimonials .track{
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns: var(--card-w);
      gap: var(--gap);
      padding:4px 5vw; /* breathing space on big screens */
    }

    /* Cards */
    #resulted-testimonials .track{
      --card-w:380px;
      --gap:16px;
    }

    #resulted-testimonials .card{
      width:var(--card-w); 
      height:520px;
      border-radius:14px;
      overflow:hidden;
      box-shadow:0 8px 18px rgba(0,0,0,.12);
      /* Not #fff: a white box on a near-white page is exactly what a broken image looks like. A warm neutral reads as a card waiting for its picture. */ background:#efe9e1;
      border:1px solid #eee;
    }

    #resulted-testimonials .media img{
      width:100%; 
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* Responsive Sizes */
    @media (max-width:1024px){
      #resulted-testimonials .track{ --card-w:320px; }
      #resulted-testimonials .card{
        height: calc(520px * (320/380));
      }
    }

    @media (max-width:640px){
      #resulted-testimonials .track{
        --card-w: min(88vw, 360px);
        padding-inline:16px;
      }
      #resulted-testimonials .card{
        aspect-ratio: 380 / 520;
        height:auto;
      }
    }

    /* Arrows */
    #resulted-testimonials .outer-arrows {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 22px;
      margin: 22px auto 0;
      pointer-events: none;
    }

    #resulted-testimonials .arrow-btn {
      pointer-events: auto;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,.35);
      background: rgba(0,0,0,.25);
      color: #fff;
      font-size: 1.7rem;
      cursor: pointer;
      display:flex;
      justify-content:center;
      align-items:center;
      transition: .25s;
    }

    #resulted-testimonials .arrow-btn:hover {
      background: rgba(0,0,0,.45);
      transform: translateY(-3px);
    }

    @media (min-width:1024px){
      #resulted-testimonials .outer-arrows { display:flex; }
    }

    @media (max-width:1023px){
      #resulted-testimonials .outer-arrows { display:none; }
    }

/* ===== block 15 of 21 (was inline) ===== */
-->
   
<!--    #result-testimonials{-->
<!--      padding: 60px 0;-->
<!--    }-->

<!--    #result-testimonials .wrap{ -->
<!--      width: min(100% - 2rem, 1220px); -->
<!--      margin-inline:auto; -->
<!--    }-->

<!--    #result-testimonials .hdr h2{ -->
<!--      font-family: Cinzel, serif; -->
<!--      margin: 0 0 .35em; -->
<!--    }-->
<!--    #result-testimonials .hdr .subheading{ -->
<!--      font-family: Montserrat, sans-serif; -->
<!--      margin:0 0 1rem; -->
<!--      color:#444; -->
<!--    }-->

   
<!--    #result-testimonials .slider{ display:block; }-->

<!--    #result-testimonials .viewport{-->
<!--      width: min(100%, 1188px);-->
<!--      margin-inline:auto;-->
<!--      overflow-x:auto;-->
<!--      scrollbar-width:none;-->
<!--      -webkit-overflow-scrolling: touch;-->
<!--      scroll-behavior: smooth;-->
<!--    }-->
<!--    #result-testimonials .viewport::-webkit-scrollbar{ display:none; }-->

<!--    #result-testimonials .track{-->
<!--      display:grid;-->
<!--      grid-auto-flow:column;-->
<!--      grid-auto-columns: 380px;-->
<!--      gap:16px;-->
<!--      padding:4px;-->
<!--    }-->

<!--    #result-testimonials .card{-->
<!--      width:380px; -->
<!--      height:520px;-->
<!--      border-radius:14px;-->
<!--      overflow:hidden;-->
<!--      box-shadow:0 8px 18px rgba(0,0,0,.12);-->
<!--      background:#fff;-->
<!--      border:1px solid #eee;-->
<!--    }-->
<!--    #result-testimonials .media img{-->
<!--      width:100%; -->
<!--      height:100%;-->
<!--      object-fit:contain;-->
<!--    }-->

   
<!--    #result-testimonials .track{ --card-w: 380px; --gap:16px; }-->
<!--    #result-testimonials .track{ grid-auto-columns: var(--card-w); gap: var(--gap); }-->
<!--    #result-testimonials .card{ width: var(--card-w); height: 520px; }-->

<!--    @media (max-width: 1024px){-->
<!--      #result-testimonials .track{ --card-w: 320px; }-->
<!--      #result-testimonials .card{ height: calc(520px * (320/380)); }-->
<!--    }-->
<!--    @media (max-width: 640px){-->
<!--      #result-testimonials .track{ --card-w: min(88vw, 360px); }-->
<!--      #result-testimonials .card{-->
<!--        width: var(--card-w);-->
<!--        aspect-ratio: 380 / 520;-->
<!--        height:auto;-->
<!--      }-->
<!--    }-->

   
<!--    #result-testimonials .arrow-controls{-->
<!--      width:100%;-->
<!--      display:flex;-->
<!--      justify-content:center;-->
<!--      align-items:center;-->
<!--      gap:22px;-->
<!--      margin-top:25px;-->
<!--      pointer-events:none;-->
<!--    }-->

<!--    #result-testimonials .arrow-btn{-->
<!--      pointer-events:auto;-->
<!--      width:55px;-->
<!--      height:55px;-->
<!--      display:flex;-->
<!--      justify-content:center;-->
<!--      align-items:center;-->
<!--      border-radius:50%;-->
<!--      border:1px solid rgba(0,0,0,.35);-->
<!--      background:rgba(0,0,0,0.25);-->
<!--      color:#fff;-->
<!--      font-size:1.7rem;-->
<!--      cursor:pointer;-->
<!--      transition:all .25s ease;-->
<!--    }-->

<!--    #result-testimonials .arrow-btn:hover{-->
<!--      background:rgba(0,0,0,0.45);-->
<!--      transform:translateY(-3px);-->
<!--    }-->

<!--    #result-testimonials .arrow-btn:disabled{-->
<!--      opacity:.45;-->
<!--      cursor:not-allowed;-->
<!--      transform:none;-->
<!--    }-->

    
<!--    @media (min-width:1024px){-->
<!--      #result-testimonials .arrow-controls{ display:flex; }-->
<!--    }-->
<!--    @media (max-width:1023px){-->
<!--      #result-testimonials .arrow-controls{ display:none; }-->
<!--    }-->

<!--

/* ===== block 16 of 21 (was inline) ===== */
/* ===== Tokens ===== */
  .parallax-hero{
    --maxw: 1240px;
    --ink: #ffffff;
    --muted: #e9e7ef;
    --purple: #6c39d6;
    --purple-2: #8e5fff;
    --shadow: 0 18px 42px rgba(0,0,0,.28);
    --hero-minh: min(78vh, 42rem);
    position: relative;
    min-height: var(--hero-minh);
    color: var(--ink);
    isolation: isolate;
    overflow: clip;
  }
  /* Background image with parallax (CSS first) */
  .parallax-hero .hero-bg{
    position:absolute; inset:0;
    background-image: var(--hero-img);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;   /* parallax on desktop */
    transform: translateZ(0);       /* GPU hint */
    z-index:-2;
  }
  /* Dark overlay for legibility */
  .parallax-hero .hero-dim{
    position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.25));
    z-index:-1;
  }

  /* Container (no Bootstrap grid to avoid flex) */
  .parallax-hero .hero-wrap{
    width:min(100% - 2rem, var(--maxw));
    margin-inline:auto;
    padding-block: clamp(3rem, 8vw, 6rem);
    min-height: var(--hero-minh);
    display:grid;              /* NO Flexbox */
    align-content: center;     /* vertical centering via grid */
  }

  .hero-grid{
    display:grid;              /* single column; room for CTAs */
    gap: clamp(1rem, 2.5vw, 1.5rem);
    max-width: 46rem;          /* keep text in a pleasant measure */
  }

  /* Typography */
  .hero-title{
    margin:0;
    font-family:"Cinzel", serif;
    font-weight:700;
    line-height:1.05;
    letter-spacing:.02em;
    font-size: clamp(2rem, 6vw, 3.5rem);
    text-shadow: 0 4px 16px rgba(0,0,0,.45);
  }
  .parallax-hero p, .parallax-hero a{ font-family:"Montserrat", sans-serif; }

  /* CTA row (grid; no flex) */
  .cta-row{
    display:grid;
    grid-template-columns: auto auto auto;
    gap: clamp(.8rem, 2vw, 1.25rem);
    align-items:center; /* grid alignment (OK) */
  }
  .cta.btn-primary{
    display:inline-block;
    background: linear-gradient(180deg, var(--purple), var(--purple-2));
    color:#fff; text-decoration:none; font-weight:700; letter-spacing:.04em;
    padding:.9rem 1.3rem; border-radius:12px; box-shadow: var(--shadow);
  }
  .cta.btn-primary:hover{ filter:brightness(1.05); text-decoration:none; }
  .cta.watch{
    display:inline-block; color:#fff; text-decoration:none; font-weight:600;
    padding:.6rem .2rem;
  }
  .cta.watch:hover{ text-decoration:underline; }

  /* Circular play button with soft ring */
  .play{
    position:relative; width:3.2rem; height:3.2rem; border-radius:50%;
    display:grid; place-items:center;   /* grid centering */
    background: var(--purple); color:#fff; text-decoration:none;
    box-shadow: 0 10px 24px rgba(108,57,214,.45), inset 0 0 0 4px rgba(255,255,255,.18);
  }
  .play .ring{
    position:absolute; inset:-8px; border-radius: inherit;
    border: 3px solid rgba(170,140,255,.55);
    filter: blur(.2px);
    animation: pulse 2.2s ease-in-out infinite;
  }
  @keyframes pulse{
    0% { transform: scale(0.96); opacity: .85; }
    70%{ transform: scale(1.08); opacity: .35; }
    100%{ transform: scale(0.96); opacity: .85; }
  }

  /* Responsive tweaks */
  @media (max-width: 768px){
    .hero-grid{ max-width: 100%; }
    .cta-row{ grid-template-columns: auto auto 3rem; } /* keep play button square */
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .play .ring{ animation: none !important; }
    .parallax-hero .hero-bg{ background-attachment: scroll; }
  }

/* ===== block 17 of 21 (was inline) ===== */
/* ================================
   BASE
================================ */
#gallery-section{
  background:#fafafa;
  font-family:'Cinzel', serif;
  padding: 24px 0;
}

/* ================================
   CAROUSEL WRAPPER
================================ */
#gallery-section .carousel{
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* ================================
   DESKTOP FULL FRAME
================================ */
@media (min-width:1024px){
  #gallery-section .carousel{
    max-width: 92vw;
    height: 78vh;              /* ⬅ full cinematic frame */
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

/* ================================
   SLIDES
================================ */
#gallery-section .slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .45s ease;
}

#gallery-section .slide.active{
  opacity:1;
  position:relative;
}

/* ================================
   IMAGE (NO CROP EVER)
================================ */
#gallery-section .slide-media{
  width:100%;
  height:auto;
  max-height:78vh;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

/* Desktop fill behavior */
@media (min-width:1024px){
  #gallery-section .slide-media{
    height:100%;
    max-height:100%;
  }
}


/* ================================
   CONTROLS
================================ */
#gallery-section .controls{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:18px;
}

#gallery-section .arrow-btn{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  color:#222;
  font-size:1.5rem;
  cursor:pointer;
}

/* ================================
   MOBILE (UNCHANGED)
================================ */
@media (max-width:1023px){
  #gallery-section .carousel{
    max-width:100%;
  }

  #gallery-section .slide-media{
    max-height:70vh;
  }

  #gallery-section .arrow-btn{
    width:44px;
    height:44px;
    font-size:1.3rem;
  }
}

/* ===== block 18 of 21 (was inline) ===== */
/* Basic utility for screen-reader only heading */
    #bni-video .visually-hidden{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      border:0;
    }

    /* Section background & layout */
#bni-video{
  --bg:#f9f6f1;
  width:100%;
  padding:clamp(2.5rem, 6vw, 5rem) 1rem;
  background:
    radial-gradient(900px 300px at 50% -10%, rgba(199, 173, 107, .12), transparent 70%),
    var(--bg);
  display:flex;
  justify-content:center;
  align-items:center;
}



    /* Centered responsive wrapper */
    #bni-video .video-shell{
      width:min(1200px, 100%);
      margin-inline:auto;
    }

    /* Responsive video frame (16:9 card) */
    #bni-video .video-frame{
      position:relative;
      width:100%;
      aspect-ratio:16 / 9;        /* key for responsiveness */
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 24px 60px rgba(0,0,0,.55);
      background:#000;
    }

    /* Video fills frame, keeps aspect via object-fit */
    #bni-video video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      -webkit-backface-visibility:hidden;
      backface-visibility:hidden;
      will-change:transform;
      z-index:1;
    }

    /* Unmute button */
    #bni-video .unmute-btn{
      position:absolute;
      right:12px;
      bottom:12px;
      background:rgba(0,0,0,0.65);
      color:#fff;
      border:1px solid rgba(255,255,255,0.5);
      border-radius:999px;
      padding:0.45rem 0.75rem;
      font:600 13px/1.1 "Montserrat",Arial,sans-serif;
      cursor:pointer;
      display:none;
      z-index:2;
      backdrop-filter:blur(6px);
    }
    #bni-video .unmute-btn:focus-visible{
      outline:3px solid #7a5cff;
      outline-offset:2px;
    }

    /* Small-screen tweaks */
    @media (max-width:575.98px){
      #bni-video{
        padding:1.5rem 0.75rem 2rem;
      }
      #bni-video .video-frame{
        border-radius:14px;
        box-shadow:0 18px 40px rgba(0,0,0,.55);
      }
      #bni-video .unmute-btn{
        right:8px;
        bottom:8px;
        font-size:12px;
        padding:0.35rem 0.6rem;
      }
    }

/* ===== block 19 of 21 (was inline) ===== */
/* Mobile-first hero (affects only mobile devices via media query below) */
.parallax-hero {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* background layer (image) */
.parallax-hero .hero-bg{
  position:absolute;
  inset:0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center center;
  filter: none;
  transform-origin:center center;
  will-change: transform, opacity;
  transition: transform 10s ease-out;
  /* subtle zoom for depth */
  transform: scale(1.02);
}

/* dimmer for contrast */
.parallax-hero .hero-dim{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(3,7,18,0.28) 0%, rgba(3,7,18,0.48) 60%, rgba(3,7,18,0.64) 100%);
  pointer-events:none;
}

/* content wrapper */
.parallax-hero .hero-wrap{
  position:relative;
  z-index:10;
  padding: calc(18px + var(--safe-top)) 16px 110px; /* leave room for sticky CTA */
  display:flex;
  align-items:flex-end;
  min-height: 56vh; /* mobile-friendly height */
  box-sizing:border-box;
}

/* grid to center content */
.parallax-hero .hero-grid{
  width:100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Title styles */
.hero-title{
  margin:0;
  color:#fff;
  font-weight:800;
  line-height:1.02;
  letter-spacing: -0.02em;
  text-transform:uppercase;
  text-align:left;
 font-size: clamp(1.2rem, 2.5vw, 2rem);/* responsive */
  -webkit-font-smoothing:antialiased;
  margin-bottom: 12px;
  text-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

/* CTA row in hero */
.cta-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:6px;
}

/* Primary hero button (large but not sticky) */
.cta.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background: linear-gradient(90deg,#C2A74E,#b9993d 120%);
  color:#06120a;
  font-weight:800;
  padding:14px 16px;
  border-radius:12px;
  text-decoration:none;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  min-height:52px;
  font-size:16px;
  border: none;
}

/* focus styles for accessibility */
.cta.btn-primary:focus,
.mobile-cta-btn:focus {
  outline: 3px solid rgba(194,167,78,0.18);
  outline-offset: 4px;
}

/* Sticky mobile CTA (bottom) */
.mobile-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  padding: 6px 12px;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* CTA button spanning full width but with side padding to look like app bar */
.mobile-cta-btn{
  
  max-width: 600px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  background: linear-gradient(90deg,#C2A74E,#b9993d 120%);
  color:#06120a;
  font-weight:900;
  font-size:17px;
  padding:14px 18px;
  border-radius:14px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.32);
  text-decoration:none;
  border: none;
  touch-action: manipulation;
}

/* hide the duplicate hero CTA (top) on very small screens to avoid clutter */
@media (max-width:420px){
  .hero-wrap{ padding-bottom: 140px; } /* extra room for sticky CTA */
  .cta.btn-primary{ display:none; } /* use sticky CTA instead */
  .hero-title{ font-size: clamp(20px, 9.2vw, 30px); }
}

/* ensure this mobile-only feel is applied; if you want to revert on desktop */
@media (min-width:768px){
  /* on desktop, make it look like regular hero (no sticky CTA) */
  .parallax-hero .hero-bg { transform: none; }
  .mobile-cta{ display:none; }
  .hero-wrap{ padding: 48px 28px; min-height: 44vh; align-items:center; }
  .hero-title{ font-size: clamp(1.2rem, 2.5vw, 2rem); text-align:left; }
  .cta.btn-primary{ display:inline-flex; }
}

/* small performance tweak: disable background transitions when reduced-motion */
@media (prefers-reduced-motion: reduce){
  .parallax-hero .hero-bg{ transition:none !important; transform:none !important; }
}

/* ===== block 20 of 21 (was inline) ===== */
.floatt{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	font-size:30px;
	box-shadow: 2px 2px 3px #999;
	z-index:100;
}

.my-float{
	margin-top:16px;
}

/* ===== block 21 of 21 (was inline) ===== */
#yt-popup-system .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.7);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    #yt-popup-system .popup-box {
      background: #000;
      width: 90%;
      max-width: 700px;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
    }

    #yt-popup-system iframe {
      width: 100%;
      height: 400px;
      border: none;
    }

    #yt-popup-system .close-btn {
      position: absolute;
      top: 8px;
      right: 10px;
      background: #fff;
      border: none;
      font-size: 18px;
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 6px;
    }

/* ==========================================================================
   #the-shift  (hero fix, 20 Sep 2026)

   The section's rules live in two conflicting .parallax-hero blocks earlier in
   this file (blocks 16 and 19, both lifted from inline <style>). This block is
   scoped to the section's own id so it settles the conflict without touching
   either - nothing else on the site uses #the-shift.
   ========================================================================== */

#the-shift {
   /* Block 16 sets min-height:min(78vh,42rem) while block 19 sizes the wrap at
      56vh/44vh, so the section was far taller than its content and the photo
      was zoomed to fill the difference. Let the content set the height. */
   min-height: 0;
   background: #0b1020;
}

#the-shift .hero-bg {
   /* WebP, and a size that suits the box rather than a 2048px original. */
   background-image: image-set(
      url("/hero_assets/shift-1920.webp") type("image/webp"),
      url("/bg-video1.jpg") type("image/jpeg")
   );

   /* The faces and raised arms are in the top half of the frame; the bottom
      40% is empty floor. Centring put the floor in view. */
   background-position: center 30%;
   background-size: cover;
   background-repeat: no-repeat;

   /* Block 16 asks for a fixed attachment, block 19 puts a transform on the
      same element. A transform makes the element a containing block, so fixed
      cannot behave as intended, and the pair renders wrongly on iOS Safari. */
   background-attachment: scroll;
   transform: none;
   transition: none;
   will-change: auto;
}

/* --- phones: give the photo its own band instead of cropping to 25% ------- */
@media (max-width: 767px) {
   #the-shift .hero-bg,
   #the-shift .hero-dim {
      /* A 16:10-ish band. Covering 2.37:1 into it keeps about two thirds of the
         group in frame, against a quarter when it filled the whole section. */
      inset: 0 0 auto 0;
      height: 62vw;
      max-height: 300px;
   }

   #the-shift .hero-bg {
      background-image: image-set(
         url("/hero_assets/shift-900.webp") type("image/webp"),
         url("/bg-video1.jpg") type("image/jpeg")
      );
   }

   #the-shift .hero-dim {
      /* Clear at the top so faces read; solid at the bottom so it meets the
         section colour with no seam. */
      background: linear-gradient(180deg,
         rgba(11, 16, 32, 0.10) 0%,
         rgba(11, 16, 32, 0.55) 62%,
         rgba(11, 16, 32, 1) 100%);
   }

   #the-shift .hero-wrap {
      /* Text sits below the band, on flat colour - legible over any photo. */
      padding: calc(min(62vw, 300px) + 18px) 18px calc(26px + var(--safe-bottom, 0px));
      min-height: 0;
      align-items: flex-start;
   }
}

/* --- type ---------------------------------------------------------------- */

#the-shift .hero-title {
   /* Block 19 caps this at 2rem, and between 421px and 767px its clamp floors
      it at 1.2rem - a 19px hero headline. */
   font-size: clamp(1.6rem, 1.15rem + 2.2vw, 3rem);
   line-height: 1.1;
   letter-spacing: 0.01em;
   margin-bottom: 18px;
   text-wrap: balance;
}

/* --- the button must exist on every phone -------------------------------- */

#the-shift .cta.btn-primary {
   /* Block 19 hides this below 420px in favour of a sticky .mobile-cta that is
      commented out in index.html, so the section had no call to action at all
      on most phones. */
   display: inline-flex;
   min-height: 52px;
   padding: 15px 26px;
   font-size: 1rem;
   letter-spacing: 0.04em;
   touch-action: manipulation;
}

@media (max-width: 420px) {
   #the-shift .cta-row { width: 100%; }
   #the-shift .cta.btn-primary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
   #the-shift .hero-bg { transform: none; transition: none; }
}