/* ============================================
   Theme: 4D Restoration Child Theme
   Merged Global Styles + Responsive Clamp Layout + Page Styles
   ============================================ */

/* CSS Variables for easy theme management */
:root {
 /* Brand Colors */
 --primary-color: #4F62AD;
 --secondary-color: #6351A2;
 --text-color: #1a1a1d; /* Default Light Mode Text */
 --accent-color: #967F3C; /* Gold Accent Color */

 /* Fonts */
 --font-display: 'Tablet Gothic', sans-serif;
 --font-body: 'Noto Sans', sans-serif;

 /* Breakpoints */
 --breakpoint-mobilePortrait: 480px;
 --breakpoint-mobileLandscape: 768px; /* Tablet Portrait */
 --breakpoint-tabletPortrait: 1024px; /* Tablet Landscape / Small Laptop */
 --breakpoint-tabletLandscape: 1200px;
 --breakpoint-laptop: 1366px;
 --breakpoint-widescreen: 2400px;

 /* Clamp-based Padding */
 --fluid-side-padding-min: 1.25rem; /* 20px */
 --fluid-side-padding-max: 5rem;   /* 80px */

 /* Section Padding Variables */
 --section-padding-xxl-min: 9.375rem; /* 150px */
 --section-padding-xxl-max: 10rem;    /* 160px */
 --section-padding-xl-min: 6.875rem; /* 110px */
 --section-padding-xl-max: 7.5rem;    /* 120px */
 --section-padding-l-min: 5.625rem;  /* 90px */
 --section-padding-l-max: 6.25rem;    /* 100px */
 --section-padding-m-min: 5rem;     /* 80px */
 --section-padding-m-max: 5rem;     /* 80px */
 --section-padding-s-min: 3.75rem;    /* 60px */
 --section-padding-s-max: 3.75rem;    /* 60px */
 --section-padding-xs-min: 2.5rem;    /* 40px */
 --section-padding-xs-max: 2.5rem;    /* 40px */
 --section-padding-xxs-min: 1.5rem;  /* 24px */
 --section-padding-xxs-max: 1.5rem;  /* 24px */
 --section-header-padding-min: 1.25rem;
 --section-header-padding-max: 1.25rem;

 /* Layout Sizes */
 --section-hero-height: 100vh;
 --section-offset-header: 80px; /* Adjust if header height changes */
 --section-narrow-l: 75rem; /* 1200px */
 --section-narrow-m: 62.5rem; /* 1000px */
 --section-narrow-s: 50rem; /* 800px */
 --section-narrow-xs: 45rem; /* 720px */

 /* Dark Mode Variables */
 --dm-bg: #1A1A1D;
 --dm-text-primary: #F3F4F6;
 --dm-text-secondary: #AEAEB2;
 --dm-surface-bg: #2D2D30;
 --dm-surface-bg-lighter: rgba(255, 255, 255, 0.04);
 --dm-border-color: #444448;
 --dm-border-color-lighter: rgba(255, 255, 255, 0.1);
 --dm-shadow-color: rgba(0, 0, 0, 0.4);
 --dm-shadow-color-lighter: rgba(0,0,0,0.3);
 --dm-primary-accent: var(--primary-color, #4F62AD);
 --dm-secondary-accent: var(--secondary-color, #6351A2);
 --dm-gold-accent: var(--accent-color, #967F3C);

 /* Transition */
 --transition-fast: 0.2s ease-out;
 --transition-med: 0.3s ease-in-out;
}

/* ============================================
   Global Styles & Resets
   ============================================ */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

html {
 scroll-behavior: smooth;
 font-size: 16px; /* Base font size */
}
@media (max-width: 768px) {
  html {
    font-size: 15px; /* Slightly smaller base on mobile */
  }
}

body {
 font-family: var(--font-body);
 color: var(--text-color);
 background-color: #fff; /* Light mode default */
 line-height: 1.65; /* Slightly increased for readability */
 overflow-x: hidden;
}

body.dark-mode {
  background-color: var(--dm-bg);
  color: var(--dm-text-primary);
}

/* Basic Typography */
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-display);
 color: var(--text-color);
 line-height: 1.25; /* Adjusted line-height */
 font-weight: 600;
 margin-bottom: clamp(1rem, 2vw, 1.5rem); /* More consistent bottom margin */
 text-wrap: balance; /* Attempt to balance lines, prevent orphans */
}
h5, h6 { text-wrap: initial; } /* Disable balance on short headings */


h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(2.2rem, 4.5vw + 1rem, 3.8rem); font-weight: 700; } /* Adjusted h2 size */
h3 { font-size: clamp(1.6rem, 3.5vw + 1rem, 2.7rem); } /* Adjusted h3 size */
h4 { font-size: clamp(1.25rem, 2.5vw + 0.8rem, 1.75rem); }
h5 { font-size: clamp(1.1rem, 2vw + 0.7rem, 1.35rem); line-height: 1.3; } /* Tighter line height */
h6 { font-size: clamp(1rem, 1.8vw + 0.6rem, 1.15rem); line-height: 1.3; }


body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--dm-text-primary);
}

p {
 margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem); /* Increased bottom margin */
 max-width: 70ch; /* General paragraph width limit */
}
p:last-child, p:last-of-type { margin-bottom: 0; } /* Remove margin on last p */

a {
 color: var(--primary-color);
 text-decoration: none;
 transition: color var(--transition-fast);
}
a:hover, a:focus {
 color: var(--accent-color);
 text-decoration: underline; /* Default underline on hover/focus */
}
a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    text-decoration: none;
    border-radius: 2px;
}
body.dark-mode a { color: var(--dm-primary-accent); }
body.dark-mode a:hover, body.dark-mode a:focus { color: var(--dm-gold-accent); }
body.dark-mode a:focus-visible { outline-color: var(--dm-gold-accent); }


strong, b { font-weight: 600; }
body.dark-mode strong, body.dark-mode b { color: var(--dm-gold-accent); }


ul, ol { margin-bottom: 1rem; padding-left: 1.5em; }
li { margin-bottom: 0.5rem; }


/* Layout Containers */
.container {
 width: 90%; max-width: var(--section-narrow-l);
 margin-left: auto; margin-right: auto;
 padding-left: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max));
 padding-right: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max));
}

.section-narrow-l { max-width: var(--section-narrow-l); margin-left: auto; margin-right: auto; }
.section-narrow-m { max-width: var(--section-narrow-m); margin-left: auto; margin-right: auto; }
.section-narrow-s { max-width: var(--section-narrow-s); margin-left: auto; margin-right: auto; }
.section-narrow-xs { max-width: var(--section-narrow-xs); margin-left: auto; margin-right: auto; }

body > *:not(.container) .section-narrow-xs,
body > *:not(.container) .section-narrow-s,
body > *:not(.container) .section-narrow-m,
body > *:not(.container) .section-narrow-l {
     padding-left: var(--fluid-side-padding-min);
     padding-right: var(--fluid-side-padding-min);
}

/* Section Padding Utilities */
/* ... (Padding utilities remain the same) ... */
.section-padding-l { padding-top: clamp(var(--section-padding-l-min), 7vw, var(--section-padding-l-max)); padding-bottom: clamp(var(--section-padding-l-min), 7vw, var(--section-padding-l-max)); }


/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center > * { margin-left: auto; margin-right: auto; }


/* Elementor Specific Overrides (if needed) */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--section-narrow-l); }

/* ============================================
   Animation Base Styles & Helpers
   ============================================ */
/* ... (Animation base styles from original CSS remain the same) ... */
.reveal-text {} /* Example */
.hero-headline .char { visibility: hidden; display: inline-block; }

/* ============================================
   Component: Buttons & Links
   ============================================ */
/* ... (Button and Link styles from original CSS remain the same) ... */
.magnet-button {
 display: inline-block; margin: 0 auto; text-align: center; width: auto;
 max-width: max-content; padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2.5rem);
 background-color: var(--primary-color); color: #fff; border: none; border-radius: 50px;
 font-family: var(--font-display); font-size: clamp(1rem, 1.8vw + 0.5rem, 1.125rem); font-weight: 600;
 cursor: pointer; transition: transform var(--transition-fast), background-color var(--transition-fast);
 will-change: transform; backface-visibility: hidden;
}
.magnet-button:hover, .magnet-button:focus { background-color: var(--secondary-color); color: #fff; text-decoration: none; transform: scale(1.05); }
.magnet-button:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
body.dark-mode .magnet-button { background-color: var(--dm-primary-accent); }
body.dark-mode .magnet-button:hover, body.dark-mode .magnet-button:focus { background-color: var(--dm-secondary-accent); }
body.dark-mode .magnet-button:focus-visible { outline-color: var(--dm-gold-accent); }

.fourd-link-accent { color: var(--secondary-color); text-decoration: none; position: relative; display: inline-block; font-weight: 500; transition: color var(--transition-fast); }
.fourd-link-accent::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px; background-color: var(--accent-color); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-med); }
.fourd-link-accent:hover, .fourd-link-accent:focus { color: var(--primary-color); transform: none; text-decoration: none; } /* Adjusted hover */
.fourd-link-accent:hover::after, .fourd-link-accent:focus-visible::after { transform: scaleX(1); }
body.dark-mode .fourd-link-accent { color: var(--dm-secondary-accent); }
body.dark-mode .fourd-link-accent:hover, body.dark-mode .fourd-link-accent:focus { color: var(--dm-primary-accent); }
body.dark-mode .fourd-link-accent::after { background-color: var(--dm-gold-accent); }

.fourd-link-accent-button { color: #fff !important; text-decoration: none !important; display: inline-block; }
.fourd-link-accent-button:hover, .fourd-link-accent-button:focus { color: #fff !important; transform: scale(1.05); }

.fourd-kw-shimmer { font-weight: bold; color: var(--accent-color); }
body.dark-mode .fourd-kw-shimmer { color: var(--dm-gold-accent); }

/* ============================================
   WHO WE ARE - HERO SECTION STYLES
   ============================================ */
/* ... (Hero section styles from original CSS remain the same) ... */
.animated-background-wrapper { position: relative; overflow: hidden; width: 100%; background-color: var(--dm-bg); }
#hero-background-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.who-we-are-hero { position: relative; z-index: 1; pointer-events: auto; min-height: 75vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5rem 1.5rem; color: var(--dm-text-primary); }
.hero-content { max-width: 900px; pointer-events: auto; }
.hero-headline { font-size: clamp(2.8rem, 7vw, 5.2rem); font-weight: 700; margin-bottom: 1.5rem; line-height: 1.15; color: var(--dm-text-primary); overflow-wrap: break-word; }
.hero-subheading { font-size: clamp(1.1rem, 3vw, 1.5rem); max-width: 700px; margin: 0 auto; line-height: 1.7; color: var(--dm-text-secondary); }

/* ============================================
   List Item Text Color Fix for Dark Sections
   ============================================ */

/* Add this class to <li> elements requiring light text on dark backgrounds */
.li-text-on-dark {
    color: var(--dm-text-primary) !important;
}

/* Ensure common children inherit the correct color forcefully */
.li-text-on-dark p,
.li-text-on-dark strong {
    color: inherit !important; /* Inherit the color set on the li */
}

/* Override link colors specifically within these list items if needed */
.li-text-on-dark a.fourd-link-accent {
    color: var(--dm-secondary-accent) !important; /* Use a light accent color */
    /* text-decoration: underline !important; /* Optional: Add underline for visibility */
}
.li-text-on-dark a.fourd-link-accent:hover,
.li-text-on-dark a.fourd-link-accent:focus {
    color: var(--dm-primary-accent) !important; /* Brighter accent on hover */
}
/* Hide ::after if forcing text-decoration */
.li-text-on-dark a.fourd-link-accent::after {
   display: none !important;
}


/* Ensure checkmark color is correct */
.li-text-on-dark strong .fourd-kw-shimmer {
    color: var(--dm-gold-accent) !important; /* Use dark mode gold */
}
/* ============================================
   Insurance & Process Sections (Existing Styles)
   ============================================ */
.insurance-section { margin: clamp(2rem, 4vw, 3rem) 0; padding: clamp(1rem, 2vw, 1.5rem); background-color: rgba(79, 98, 173, 0.05); border-radius: 8px; }
.insurance-section p { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.keyword { font-weight: 500; position: relative; }
.negative-keyword { color: #e74c3c; }
.company-name { color: var(--primary-color); }

.process-container { margin: clamp(1.5rem, 3vw, 2rem) 0; }
.mb-4 { margin-bottom: clamp(1.5rem, 3vw, 2rem) !important; }
.process-steps { max-width: var(--section-narrow-s); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2rem); } /* Adjusted width and gap */
.process-step { padding-left: 0; border-left: none; position: relative; }
.step-content { padding: clamp(1.5rem, 3vw, 2rem); background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border-radius: 8px; border-left: 4px solid var(--primary-color); }
.step-title { display: flex; align-items: center; margin-bottom: clamp(1rem, 2vw, 1.5rem); color: var(--primary-color); gap: 1rem; } /* Increased gap */
.step-title h4 { margin-bottom: 0; font-size: 1.25rem; line-height: 1.3; text-wrap: balance; } /* Style H4 in steps */
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: var(--primary-color); color: white; font-weight: bold; flex-shrink: 0; }
.step-content p { font-size: 1rem; line-height: 1.65; } /* Ensure consistent text size */

/* Dark Mode Process Steps */
body.dark-mode .process-step { border-left-color: var(--dm-primary-accent); }
body.dark-mode .step-content { background: var(--dm-surface-bg); box-shadow: 0 4px 12px var(--dm-shadow-color-lighter); border-left-color: var(--dm-primary-accent); }
body.dark-mode .step-title { color: var(--dm-primary-accent); }
body.dark-mode .step-title h4 { color: var(--dm-primary-accent); } /* Ensure h4 color */
body.dark-mode .step-number { background-color: var(--dm-primary-accent); color: var(--dm-bg); }
body.dark-mode .step-content p { color: var(--dm-text-secondary); }


/* ===========================================================
   CASE‑STUDY CAROUSEL  –  FINAL OVERRIDES  (v3 uniform height)
   =========================================================== */

/* 1 ▸ outer strip (white frame already present) */
.cs-section-dark{
  background:transparent;
  overflow:hidden;
  border-radius:28px;
  padding:clamp(3rem,6vw,5rem) 0;
}

/* 2 ▸ make wrapper stretch all slides to same height */
.swiper-wrapper{
  align-items:stretch;              /* NEW — equal slide heights   */
}

/* 3 ▸ Slide: fixed width, stretches to wrapper height */
.swiper-slide{
  flex:0 0 clamp(300px,28vw,560px); /* identical width             */
  display:flex;
  justify-content:center;
  align-items:stretch;              /* card fills slide height     */
  padding:clamp(1rem,3vw,2rem);     /* gap between card & frame    */
}

/* 4 ▸ Card surface & layout */
.cs-card{
  background:rgba(99,81,162,.92);
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;
  box-shadow:0 10px 24px rgba(0,0,0,.30);
  width:100%;
  height:100%;                      /* fills slide height          */
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding:clamp(2rem,4vw,3rem);
  text-align:left;
}

/* dark‑mode variant */
body.dark-mode .cs-card{
  background:rgba(99,81,162,.85);
  border-color:rgba(255,255,255,.25);
}

/* 5 ▸ Force light text + gold accents */
.cs-card, .cs-card *      { color:#fff !important; }
.cs-card strong           { color:var(--accent-color,#967F3C) !important; }

/* 6 ▸ Typography tweaks */
.cs-title{
  margin:0;
  font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.3;
}
.cs-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.cs-quote{
  font-style:italic;
  font-size:.95rem;
  line-height:1.6;
  margin:0;
}

/* 7 ▸ Button pinned to bottom */
.cs-btn{
  margin-top:auto;                   /* keeps buttons aligned       */
}
.cs-btn:hover,
.cs-btn:focus{
  background-color:var(--accent-color,#967F3C);
}

/* 8 ▸ Mobile fine‑tune */
@media (max-width:600px){
  .swiper-slide{ flex:0 0 90%; }
  .cs-card{
    padding:clamp(1.5rem,5vw,2.25rem);
  }
}




/* ============================================
   GSAP Utility Keywords & Links (Existing Styles)
   ============================================ */
/* ... (Keyword/Link styles from original CSS remain the same) ... */
.fourd-kw-halo { color: var(--primary-color); }
body.dark-mode .fourd-kw-halo { color: var(--dm-primary-accent); }
.fourd-kw-shimmer { font-weight: bold; color: var(--accent-color); }
body.dark-mode .fourd-kw-shimmer { color: var(--dm-gold-accent); }
.fourd-kw-scanline { color: var(--secondary-color); }
body.dark-mode .fourd-kw-scanline { color: var(--dm-secondary-accent); }
.fourd-kw-letterspace { letter-spacing: 0.5px; font-weight: 600; }
.fourd-phrase-highlight-sweep { position: relative; color: var(--primary-color); }

.fourd-link-accent-button { color: #fff !important; text-decoration: none !important; display: inline-block; }
.fourd-link-accent-button:hover, .fourd-link-accent-button:focus { color: #fff !important; transform: scale(1.05); }

.button-container { display: flex; justify-content: center; margin-top: 2rem; } /* Ensure button container style exists */

/* ============================================
   Three.js Smoke Container (If Used)
   ============================================ */
/* ... (Smoke styles remain the same) ... */

/* ============================================
   Spacing & Layout Utilities (Existing Styles)
   ============================================ */
.section-narrow-xs { max-width: var(--section-narrow-xs); margin: 0 auto; padding: 0 1rem; }
.section-narrow-m { max-width: var(--section-narrow-m); margin: 0 auto; padding: 0 1rem; }
.text-center { text-align: center; }
.text-center > * { margin-left: auto; margin-right: auto; }

/* ===========================================================
   CERTIFICATION CARDS  – new (replaces old “process-step” look)
   =========================================================== */

.cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1.5rem,3vw,2rem);
  max-width:var(--section-narrow-m);
  margin:0 auto;
}

.cert-card{
  background:rgba(99,81,162,.92);
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  padding:clamp(1.75rem,4vw,2.75rem);
  display:flex;
  flex-direction:column;
  gap:1rem;
  color:#fff;
}
body.dark-mode .cert-card{
  background:rgba(99,81,162,.85);
  border-color:rgba(255,255,255,.25);
}

.cert-card__head{display:flex;align-items:center;gap:.85rem;margin-bottom:.5rem;}
.cert-card__icon{
  flex-shrink:0;
  width:36px;height:36px;border-radius:50%;
  background:var(--accent-color);
  color:#1A1A1D;
  font-weight:700;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
}
.cert-card__title{margin:0;font-size:1.25rem;line-height:1.3;color:#1a1a1d;}

.cert-card a.fourd-link-accent{color:#FFDFA3;}
.cert-card a.fourd-link-accent::after{background:#FFDFA3;}
.cert-card p:last-child{margin-bottom:0;}

/* Benefits blocks */
.cert-benefits{
  display:grid;
  gap:clamp(2rem,4vw,3rem);                /* ↑ missing semicolon fixed */
}
@media(min-width:768px){
  .cert-benefits{grid-template-columns:1fr 1fr;}
}

.benefit-block{
  background:rgba(99,81,162,.15);
  border-radius:16px;
  padding:clamp(1.75rem,4vw,2.5rem);       /* ↑ missing semicolon fixed */
}
body.dark-mode .benefit-block{background:rgba(255,255,255,.05);}

.benefit-list{
  list-style:none;
  margin:0;
  padding-left:1.75rem;
  display:flex;
  flex-direction:column;
  gap:1.25rem;                             /* ↑ missing semicolon fixed */
}
.benefit-list li{position:relative;}
.benefit-list li strong{display:block;margin-bottom:.25rem;font-size:1.1rem;}
.benefit-list li::before{
  content:"✓";
  position:absolute;left:-1.75rem;top:.15em;
  font-weight:700;color:var(--accent-color);
}
body.dark-mode .benefit-list li::before{color:var(--dm-gold-accent);}

/* Make long links wrap prettier */
.certifications-section a{word-break:break-word;}

/* ===========================================================
   CERTIFICATION CARDS – layout / spacing tweak  (v1.1)
   =========================================================== */

/* 1 ▸ a little more vertical air for the whole section */
.certifications-section{
  padding-block:clamp(4rem,8vw,6rem);   /* ↑ more top / bottom space */
}

/* 2 ▸ wider row‑gap between card rows */
.cert-grid{
  gap:clamp(2rem,4vw,3rem);             /* was 1.5‑2rem */
  margin-bottom:clamp(3rem,6vw,4rem);   /* space before benefits blocks */
}

/* 3 ▸ make the “Specialized Skills …” card span both columns on ≥768 px
   ‑‑‑ add class="cert-card cert-card--wide" to that <article> only */
@media(min-width:768px){
  .cert-card--wide{grid-column:1 / -1;}
}

/* 4 ▸ dark‑text headings inside the purple cards */
.cert-card__title{
  color:#1A1A1D;                        /* requested heading color */
}
body.dark-mode .cert-card__title{
  color:#1A1A1D;                        /* keep the same in dark mode */
}

/* -----------------------------------------------------------
   CERTIFICATION CARDS – extra breathing‑room (v1.2)
   ----------------------------------------------------------- */

/* 1 ▸ more air *above* the purple card grid  */
.cert-grid{
  margin-top:clamp(2.5rem,6vw,4rem);   /* was ~0 –‑ now ↑ 40‑64 px */
}

/* 2 ▸ bigger vertical gap *between* the two card rows         */
@media(min-width:768px){
  .cert-grid{row-gap:clamp(2.5rem,5vw,4rem);}  /* was 2rem   */
}
/* on mobile it uses the single gap value already set –
   no change needed there                                       */

/* 3 ▸ extra space before the benefits blocks */
.cert-benefits{
  margin-top:clamp(3rem,7vw,5rem);     /* adds ~48‑80 px      */
}

/* 4 ▸ more room after the intro paragraph                      */
.intro-paragraph{
  margin-bottom:clamp(2.5rem,6vw,4rem);
}


/* ============================================
   DARK MODE - Story Timeline Styles
   ============================================ */
/* ... (Timeline styles from original CSS remain the same) ... */
.story-timeline-container { position: relative; z-index: 1; pointer-events: auto; max-width: 900px; margin: 60px auto; padding: 40px 20px; color: var(--dm-text-primary); }
.story-timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background-color: var(--dm-primary-accent); transform: translateX(-50%); z-index: 0; }
.story-timeline-item { position: relative; margin-bottom: 50px; width: calc(50% - 40px); pointer-events: auto; z-index: 1; opacity: 1; transform: translateY(0px); }
.story-timeline-item--left { left: 0; padding-right: 40px; text-align: right; }
.story-timeline-item--right { left: calc(50% + 40px); padding-left: 0; text-align: left; }
.story-timeline-marker { position: absolute; top: 5px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--dm-gold-accent); border: 3px solid var(--dm-bg); z-index: 2; pointer-events: auto; transform: scale(1); opacity: 1; }
.story-timeline-item--left .story-timeline-marker { right: -49px; }
.story-timeline-item--right .story-timeline-marker { left: -49px; }
.story-timeline-content { background-color: var(--dm-surface-bg-lighter); padding: 20px 25px; border-radius: 8px; border: 1px solid var(--dm-border-color-lighter); box-shadow: 0 3px 8px var(--dm-shadow-color-lighter); position: relative; z-index: 1; pointer-events: auto; color: var(--dm-text-primary); }
.timeline-title { color: var(--dm-primary-accent) !important; margin-top: 0; margin-bottom: 0.75rem; font-size: 1.4rem; font-weight: 600; }
.timeline-subtitle { font-style: italic; color: var(--dm-text-secondary); margin-bottom: 0.75rem; font-size: 1rem; display: block; }
.story-timeline-content p { color: var(--dm-text-primary); line-height: 1.6; margin-bottom: 1rem; }
.story-timeline-content p:last-child { margin-bottom: 0; }
.timeline-list { list-style: none; padding-left: 0; margin-top: 0.75rem; text-align: left; color: var(--dm-text-primary); }
.timeline-list li { margin-bottom: 0.5rem; padding-left: 20px; position: relative; }
.timeline-list li::before { content: '✓'; position: absolute; left: 0; color: var(--dm-gold-accent); font-weight: bold; }
.timeline-quote { border-left: 4px solid var(--dm-gold-accent); padding-left: 20px; margin: 1.2rem 0; font-style: italic; color: #dddddd; font-size: 1.1rem; }
.timeline-quote blockquote { margin: 0; }
.story-timeline-content strong { color: var(--dm-gold-accent); font-weight: 600; }
@media (max-width: 768px) { .story-timeline-line { left: 25px; transform: translateX(0); } .story-timeline-item, .story-timeline-item--left, .story-timeline-item--right { width: calc(100% - 45px); left: 45px; text-align: left; padding-right: 0; padding-left: 0; } .story-timeline-item--left .story-timeline-marker, .story-timeline-item--right .story-timeline-marker { left: -34px; right: auto; top: 8px; } .timeline-title { font-size: 1.25rem; } .timeline-quote { font-size: 1rem; } .story-timeline-content { padding: 15px 20px; } }

/* ============================================
   Heading Link Inheritance Fix
   ============================================ */
.link-inherits-heading, .link-inherits-heading:link, .link-inherits-heading:visited { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; line-height: inherit; text-decoration: none !important; vertical-align: baseline; text-transform: inherit; letter-spacing: inherit; }
.link-inherits-heading:hover, .link-inherits-heading:focus, .link-inherits-heading:active { color: inherit !important; text-decoration: none !important; background-color: transparent; }
a.fourd-link-accent.link-inherits-heading::after { display: none !important; }
a.fourd-link-accent.link-inherits-heading:hover, a.fourd-link-accent.link-inherits-heading:focus { transform: none !important; }
.link-inherits-heading:focus-visible { outline-offset: 2px; outline: 2px solid currentColor; }

/* ============================================
   Misc & Fallbacks
   ============================================ */
/* ... (Misc styles remain the same) ... */
.calendly-embed-wrapper {
  position: relative;
  padding-bottom: 125%; /* Adjust for desired height-to-width ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.calendly-embed-wrapper .calendly-inline-widget {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.calendly-inline-widget {
  overflow: visible !important;
}