:root{
    --ivory:      #F7F2EA;
    --ivory-warm: #EFE6D5;
    --sage:       #7E8A72;
    --deep-sage:  #0B4B3A;
    --forest:     #0B4B3A;
    --forest-deep:#07301F;
    --emerald-mid:#0E5A45;
    --terracotta: #C58E74;
    --gold:       #C89A2A;
    --gold-soft:  rgba(200,154,42,.55);
    --taupe:      #B9AA97;
    --charcoal:   #40463E;

    --serif:'Cormorant Garamond','Georgia',serif;
    --sans:'DM Sans','Helvetica Neue',Arial,sans-serif;

    --maxw:1180px;
    --gutter:clamp(22px, 5vw, 64px);
  }



*{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--ivory);
    color:var(--charcoal);
    font-family:var(--sans);
    font-weight:400;
    line-height:1.7;
    font-size:21px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }




img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

  /* ---------- shared type ---------- */
  .eyebrow{
    font-family:var(--sans);
    font-weight:600;
    font-size:13px;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:var(--gold);
    margin:0;
  }
  .eyebrow.dark{ color:var(--deep-sage); }
  .display{
    font-family:var(--serif);
    font-weight:500;
    line-height:1.08;
    letter-spacing:.005em;
    margin:0;
  }
  .display .g{ color:var(--gold); }
  .display .t{ color:var(--terracotta); }
  em, .it{ font-style:italic; }

  .lede{ font-size:clamp(18px,2.1vw,21px); line-height:1.75; color:var(--charcoal); }
  .lede.on-dark{ color:rgba(247,242,234,.82); }

  .diamond{
    display:flex; align-items:center; justify-content:center; gap:16px;
    color:var(--gold-soft);
  }
  .diamond::before,.diamond::after{
    content:""; height:1px; width:44px; background:currentColor;
  }
  .diamond span{ color:var(--gold); font-size:11px; transform:rotate(45deg); display:inline-block; }

  /* ---------- heart mark (brand glyph) ---------- */
  .mark{ width:46px; height:42px; }
  .mark path{ fill:none; stroke:var(--gold); stroke-width:2.4; }



/* ==================================================
   NAVBAR
================================================== */

header.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background: rgba(247, 242, 234, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(185, 170, 151, 0.35);
}

.nav-in {
    width: 100%;
    /* max-width: 1400px; */
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 74px;
    padding-left: clamp(22px, 4vw, 56px);
    padding-right: clamp(22px, 4vw, 56px);
}


/* ==================================================
   BRAND
================================================== */

.brandlink {
    display: flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;
    white-space: nowrap;
}

.brandlink .mark {
    width: 30px;
    height: 28px;
    flex-shrink: 0;
}

.wordmark {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 25px;
    letter-spacing: .22em;
    color: var(--deep-sage);
    padding-left: .22em;

    white-space: nowrap;
}


/* ==================================================
   DESKTOP NAVIGATION
================================================== */

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: clamp(20px, 2.5vw, 40px);

    flex: 1;
    margin-left: clamp(20px, 3vw, 45px);
    margin-right: clamp(15px, 2vw, 30px);

    white-space: nowrap;
}

.nav-links a {
    position: relative;

    display: inline-block;

    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .03em;

    color: var(--charcoal);

    padding: 6px 0;

    white-space: nowrap;
}

.nav-links a::after {
    content: "";

    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;

    height: 1px;

    background: var(--gold);

    transition: right .3s ease;
}

.nav-links a:hover::after {
    right: 0;
}


/* ==================================================
   NAV CTA
================================================== */

.nav-cta {
    display: flex;
    align-items: center;
    gap: 18px;

    flex-shrink: 0;
}

.nav-cta .btn {
    padding: 11px 22px;
}


/* ==================================================
   HAMBURGER
================================================== */

.burger {
    display: none;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 5px;

    width: 42px;
    height: 42px;

    padding: 8px;

    background: transparent;
    border: none;

    cursor: pointer;
}

.burger span {
    display: block;

    width: 24px;
    height: 2px;

    background: var(--deep-sage);

    transition: transform .3s ease, opacity .3s ease;
}


/* ==================================================
   MOBILE MENU
================================================== */

.mobile-menu {
    display: none;
}


/* ==================================================
   TABLET + MOBILE
   <= 1024px
================================================== */

@media (max-width: 1024px) {

    /* Hide desktop navigation */
    .nav-links {
        display: none;
    }

    /* Hide desktop outline CTA */
    .nav-cta .btn-outline {
        display: none;
    }

    /* Show hamburger */
    .burger {
        display: flex;
    }

    /* Mobile menu */
    .mobile-menu {
        display: block;

        width: 100%;

        background: var(--ivory);

        border-bottom: 1px solid rgba(185, 170, 151, .4);

        max-height: 0;
        overflow: hidden;

        transition: max-height .35s ease;
    }

    .mobile-menu.open {
        max-height: 400px;
    }

    .mobile-menu a {
       

        font-family: var(--sans);
       

        color: var(--charcoal);

        border-top: 1px solid rgba(185, 170, 151, .3);

        transition:
            color .25s ease,
            background .25s ease;
    }

    .mobile-menu a:hover {
        color: var(--deep-sage);
        background: rgba(200, 154, 42, .06);
    }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 576px) {

    .nav-in {
        min-height: 68px;
    }

    .brandlink {
        gap: 9px;
    }

    .brandlink .mark {
        width: 27px;
        height: 25px;
    }

    .wordmark {
        font-size: 21px;
        letter-spacing: .16em;
        padding-left: .16em;
    }

    .burger {
        width: 40px;
        height: 40px;
    }

    .burger span {
        width: 23px;
    }
}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (max-width: 380px) {

    .nav-in {
        min-height: 64px;
    }

    .brandlink .mark {
        width: 25px;
        height: 23px;
    }

    .wordmark {
        font-size: 18px;
        letter-spacing: .14em;
        padding-left: .14em;
    }

    .burger {
        width: 38px;
        height: 38px;
    }

    .burger span {
        width: 22px;
    }
}
/* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:.6em;
    font-family:var(--sans); font-weight:500; font-size:15px;
    letter-spacing:.02em;
    padding:15px 30px; border-radius:2px;
    border:1px solid transparent; cursor:pointer;
    transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  }
  .btn-gold{ background:var(--gold); color:#08331F; }
  .btn-gold:hover{ background:#d9b24f; transform:translateY(-2px); }
  .btn-outline{ border-color:var(--gold-soft); color:var(--gold); background:transparent; }
  .btn-outline:hover{ border-color:var(--gold); background:rgba(200,154,42,.10); }
  .btn-forest{ background:var(--deep-sage); color:var(--ivory); }
  .btn-forest:hover{ background:var(--forest); transform:translateY(-2px); }








  /* ---------- responsive ---------- */
  @media(max-width:860px){
    

    .guide-top{ grid-template-columns:1fr; }
    .guide-top .medallion{ order:-1; max-width:280px; }
    .lead-row{ grid-template-columns:84px 1fr; gap:22px; }
    .obj-grid{ grid-template-columns:1fr; gap:0; }
    .obj-mission{ grid-template-columns:1fr; gap:24px; }
    .form{ flex-direction:column; }
    .form .btn{ justify-content:center; }
  }

   @media(prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    .btn:hover,.conv:hover{ transform:none !important; }
  }








/* ==================================================
   HERO — FULLY RESPONSIVE / NO OVERFLOW
================================================== */

.hero {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
    position: relative;
    width: 100%;
    min-height: calc(100svh - 74px);

    background:
        radial-gradient(
            120% 80% at 50% 0%,
            rgba(200,154,42,.10),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            var(--forest) 0%,
            var(--forest-deep) 100%
        );

    color: var(--ivory);
    overflow: hidden;

    box-sizing: border-box;
}

.hero *,
.hero *::before,
.hero *::after {
    box-sizing: border-box;
}


/* ==================================================
   DECORATIVE FRAME
================================================== */

.hero-frame {
    position: absolute;
    inset: clamp(8px, 2vw, 34px);

    border: 1px solid var(--gold-soft);

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


/* ==================================================
   HERO INNER
================================================== */

.hero-in {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: var(--maxw, 1400px);

    min-height: calc(100svh - 74px);

    margin: 0 auto;

    padding: clamp(10px, 4vh, 10px)
             clamp(10px, 4vw, 10px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


/* ==================================================
   LOGO MARK
================================================== */

.hero .mark {
    display: block;

    width: clamp(34px, 4vw, 54px);
    height: auto;

    margin: 0 0 clamp(12px, 1.8vh, 22px);

    flex-shrink: 0;
}


/* ==================================================
   WORDMARK
================================================== */

.hero .wordmark-lg {
    font-family: var(--serif);
    font-weight: 500;

    font-size: clamp(28px, 4.5vw, 50px);
    line-height: 1;

    letter-spacing: clamp(.08em, .8vw, .26em);

    color: var(--ivory);

    margin: 0;
    padding-left: clamp(.08em, .8vw, .26em);

    max-width: 100%;

    overflow-wrap: normal;
}


/* ==================================================
   SUBTITLE
================================================== */

.hero .lockup-sub {
    max-width: 100%;

    font-size: clamp(7px, .75vw, 12px);

    line-height: 1.3;

    letter-spacing: clamp(.14em, .3vw, .44em);

    color: var(--gold);

    font-weight: 500;

    margin: clamp(8px, 1.2vh, 14px) 0 0;

    padding-left: clamp(.14em, .3vw, .44em);
}


/* ==================================================
   GOLD RULE
================================================== */

.hero .rule {
    width: clamp(38px, 4vw, 64px);
    height: 1px;

    flex-shrink: 0;

    background: var(--gold-soft);

    margin:
        clamp(16px, 2.5vh, 30px)
        0
        clamp(22px, 4vh, 46px);
}


/* ==================================================
   MAIN HEADING
================================================== */

.hero h1 {
    width: 100%;
    max-width: 1100px;

    font-family: var(--serif);
    font-weight: 500;

    font-size: clamp(30px, 5vw, 70px);

    line-height: 1.06;

    letter-spacing: .005em;

    margin: 0 0 clamp(16px, 2.2vh, 28px);

    padding: 0;

    overflow-wrap: break-word;
    word-break: normal;
}

.hero h1 .g {
    color: var(--gold);
    font-style: italic;
    /* font-weight:bolder; */
}


/* ==================================================
   DESCRIPTION
================================================== */

.hero .lede {
    width: 100%;
    max-width: 780px;

    margin: 0 auto;

    padding: 0;

    font-size: clamp(14px, 1.5vw, 21px);

    line-height: 1.6;

    color: rgba(247,242,234,.84);
}


/* ==================================================
   BUTTONS
================================================== */

.hero-actions {
    width: 100%;

    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: clamp(22px, 3.5vh, 44px);
}

.hero-actions .btn {
    min-width: 165px;

    justify-content: center;

    white-space: nowrap;
}


/* ==================================================
   HERO CORE
================================================== */

.hero-core {
    width: 100%;

    margin-top: clamp(30px, 5vh, 75px) !important;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: clamp(10px, 1.7vh, 20px);
}


/* ==================================================
   DIAMOND
================================================== */

.hero-core .diamond {
    width: 100%;
    flex-shrink: 0;
}

.hero-core .diamond::before,
.hero-core .diamond::after {
    width: clamp(24px, 3vw, 44px);
}


/* ==================================================
   CORE LINE
================================================== */

.core-line {
    width: 100%;
    max-width: 900px;

    margin: 0;
    padding: 0 5px;

    font-family: var(--sans);
    font-weight: 600;

    font-size: clamp(8px, .8vw, 12px);

    line-height: 1.7;

    letter-spacing: clamp(.06em, .15vw, .24em);

    text-transform: uppercase;

    color: rgba(247,242,234,.6);

    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 5px clamp(8px, 1.5vw, 22px);
}

.core-line b {
    color: var(--gold);
    font-weight: 600;
}

.core-line .sep {
    color: var(--gold-soft);
}


/* ==================================================
   LARGE DESKTOP
   1200px+
================================================== */

@media (min-width: 1200px) {

    .hero-in {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .hero h1 {
        max-width: 1100px;
    }

    .hero .lede {
        max-width: 780px;
    }
}


/* ==================================================
   LAPTOP / DESKTOP
   769px - 1199px
================================================== */

@media (min-width: 769px) and (max-width: 1199px) {

    .hero {
        min-height: calc(100svh - 74px);
    }

    .hero-in {
        min-height: calc(100svh - 74px);

        padding:
            25px
            clamp(10px, 4vw, 10px);
    }

    .hero .mark {
        width: 44px;
    }

    .hero .wordmark-lg {
        font-size: clamp(32px, 4.5vw, 46px);
    }

    .hero h1 {
        max-width: 850px;

        font-size: clamp(40px, 5.5vw, 50px);
    }

    .hero .lede {
        max-width: 680px;
    }

    .hero-actions {
        margin-top: 28px;
    }

    .hero-core {
        margin-top: 45px !important;
    }
}


/* ==================================================
   TABLET
   481px - 768px
================================================== */

@media (max-width: 768px) {

    .hero {
        

        overflow: hidden;
    }

    .hero-frame {
        inset: 10px;
    }

    .hero-in {
       

        padding:
            50px
            clamp(10px, 5vw, 10px)
            60px;

        justify-content: flex-start;
    }


    /* Logo */

    .hero .mark {
        width: 42px;

        margin-bottom: 16px;
    }


    /* Wordmark */

    .hero .wordmark-lg {
        font-size: clamp(30px, 7vw, 44px);

        letter-spacing: .15em;

        padding-left: .15em;

        white-space: nowrap;
    }


    /* Subtitle */

    .hero .lockup-sub {
        font-size: 9px;

        letter-spacing: .24em;

        padding-left: .24em;

        margin-top: 10px;
    }


    /* Rule */

    .hero .rule {
        width: 48px;

        margin-top: 22px;
        margin-bottom: 32px;
    }


    /* Heading */

    .hero h1 {
        max-width: 650px;

        font-size: clamp(32px, 7vw, 50px);

        line-height: 1.08;

        margin-bottom: 18px;
    }


    /* Description */

    .hero .lede {
        max-width: 620px;

        font-size: 16px;

        line-height: 1.65;
    }


    /* Buttons */

    .hero-actions {
        margin-top: 28px;

        gap: 10px;
    }

    .hero-actions .btn {
        min-width: 150px;

        padding: 12px 18px;

        font-size: 14px;
    }


    /* Core */

    .hero-core {
        margin-top: 48px !important;

        gap: 15px;
    }

    .core-line {
        max-width: 600px;

        font-size: 9px;

        letter-spacing: .10em;

        gap: 5px 10px;
    }
}


/* ==================================================
   MOBILE
   480px AND BELOW
================================================== */

@media (max-width: 480px) {

    .hero-frame {
        inset: 7px;
    }

    .hero-in {
        padding:
            35px
            16px
            40px;

        width: 100%;
    }


    /* Logo */

    .hero .mark {
        width: 36px;

        margin-bottom: 14px;
    }


    /* Wordmark */

    .hero .wordmark-lg {
        font-size: clamp(25px, 8vw, 32px);

        letter-spacing: .10em;

        padding-left: .10em;

        white-space: nowrap;
    }


    /* Subtitle */

    .hero .lockup-sub {
        font-size: 7px;

        letter-spacing: .17em;

        padding-left: .17em;

        margin-top: 9px;
    }


    /* Rule */

    .hero .rule {
        width: 40px;

        margin-top: 19px;
        margin-bottom: 27px;
    }


    /* Heading */

    .hero h1 {
        width: 100%;
        max-width: 390px;

        font-size: clamp(29px, 8.5vw, 32px);

        line-height: 1.1;

        margin-bottom: 16px;
    }


    /* Description */

    .hero .lede {
        width: 100%;
        max-width: 390px;

        font-size: 15px;

        line-height: 1.6;
    }


    /* Buttons */

    .hero-actions {
        flex-direction: column;

        width: 100%;

        gap: 9px;

        margin-top: 25px;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 330px;

        min-width: 0;

        padding: 12px 16px;

        font-size: 14px;
    }


    /* Core */

    .hero-core {
        margin-top: 42px !important;

        gap: 13px;
    }

    .hero-core .diamond::before,
    .hero-core .diamond::after {
        width: 26px;
    }

    .core-line {
        max-width: 350px;

        font-size: 8px;

        line-height: 1.75;

        letter-spacing: .07em;

        gap: 4px 8px;

        padding-inline: 0;
    }
}


/* ==================================================
   SMALL MOBILE
   360px AND BELOW
================================================== */

@media (max-width: 360px) {

    .hero-frame {
        inset: 5px;
    }

    .hero-in {
        padding:
            28px
            12px
            32px;
    }


    .hero .mark {
        width: 32px;

        margin-bottom: 11px;
    }


    .hero .wordmark-lg {
        font-size: 24px;

        letter-spacing: .08em;

        padding-left: .08em;
    }


    .hero .lockup-sub {
        font-size: 6px;

        letter-spacing: .13em;

        padding-left: .13em;
    }


    .hero .rule {
        width: 34px;

        margin-top: 17px;
        margin-bottom: 22px;
    }


    .hero h1 {
        font-size: 27px;

        line-height: 1.12;

        margin-bottom: 14px;
    }


    .hero .lede {
        font-size: 13.5px;

        line-height: 1.58;
    }


    .hero-actions {
        margin-top: 21px;

        gap: 8px;
    }

    .hero-actions .btn {
        max-width: 285px;

        font-size: 13px;

        padding: 11px 14px;
    }


    .hero-core {
        margin-top: 34px !important;

        gap: 11px;
    }

    .hero-core .diamond::before,
    .hero-core .diamond::after {
        width: 21px;
    }

    .core-line {
        max-width: 300px;

        font-size: 7px;

        letter-spacing: .055em;

        gap: 3px 6px;
    }
}


/* ==================================================
   SHORT LAPTOP SCREEN
   769px+ AND HEIGHT <= 750px
================================================== */

@media (min-width: 769px) and (max-height: 750px) {

    .hero-in {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .hero .mark {
        width: 36px;
        margin-bottom: 10px;
    }

    .hero .wordmark-lg {
        font-size: 36px;
    }

    .hero .lockup-sub {
        margin-top: 7px;
    }

    .hero .rule {
        margin-top: 14px;
        margin-bottom: 20px;
    }

    .hero h1 {
        font-size: clamp(34px, 4.5vw, 50px);
        line-height: 1.04;
        margin-bottom: 14px;
    }

    .hero .lede {
        font-size: 15px;
        line-height: 1.5;
    }

    .hero-actions {
        margin-top: 18px;
    }

    .hero-core {
        margin-top: 26px !important;
        gap: 9px;
    }

    .core-line {
        font-size: 8px;
        line-height: 1.5;
    }
}


/* ==================================================
   VERY SHORT DESKTOP
   769px+ AND HEIGHT <= 620px
================================================== */

@media (min-width: 769px) and (max-height: 620px) {

    .hero {
      
    }

    .hero-in {
     

        padding-top: 10px;
        padding-bottom: 10px;
    }

    .hero .mark {
        width: 28px;
        margin-bottom: 6px;
    }

    .hero .wordmark-lg {
        font-size: 30px;
    }

    .hero .lockup-sub {
        font-size: 7px;
        margin-top: 5px;
    }

    .hero .rule {
        width: 32px;

        margin-top: 10px;
        margin-bottom: 14px;
    }

    .hero h1 {
        font-size: 34px;

        line-height: 1.03;

        margin-bottom: 10px;
    }

    .hero .lede {
        font-size: 13px;

        line-height: 1.4;

        max-width: 650px;
    }

    .hero-actions {
        margin-top: 13px;

        gap: 8px;
    }

    .hero-actions .btn {
        padding: 9px 16px;
        font-size: 13px;
    }

    .hero-core {
        margin-top: 10px !important;

        gap: 6px;
    }

    .hero-core .diamond::before,
    .hero-core .diamond::after {
        width: 20px;
    }

    .core-line {
        font-size: 7px;

        line-height: 1.4;

        letter-spacing: .05em;
    }
}


/* ==================================================
   ULTRA-WIDE SCREENS
================================================== */

@media (min-width: 1600px) {

    .hero-in {
        max-width: 1500px;
    }

    .hero h1 {
        max-width: 1150px;
    }
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .hero *,
    .hero *::before,
    .hero *::after {
        animation: none !important;
        transition: none !important;
    }
}

  /* ---------- generic section ---------- */
  section{ padding-block:clamp(72px,11vw,80px); }
  .section-head{ max-width:40ch; }
  .section-head.center{ margin-inline:auto; text-align:center; }
  .section-head .eyebrow{ margin-bottom:22px; }
  .section-head h2{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(32px,5vw,50px); line-height:1.08; color:var(--deep-sage); margin:0;
  }
  .section-head h2 .g{ color:var(--gold); font-style:italic; }
  .section-head h2 .t{ color:var(--terracotta); font-style:italic; }

  /* ---------- empathy ---------- */
  .empathy{ background:var(--ivory); }
  .empathy .inner{ max-width:760px; margin-inline:auto; text-align:center; }
  .empathy .big{
    font-family:var(--serif); font-weight:500; font-style:italic;
    font-size:clamp(26px,3.4vw,50px); line-height:1.32; color:var(--deep-sage);
    margin:34px 0 0;
  }
  .empathy p{ margin:26px 0 0; }
  .whisper{ color:var(--terracotta); font-style:italic; }

  /* ---------- LEAD approach (signature) ---------- */
  .approach{ background:var(--ivory-warm); }
  .approach .section-head{ margin-bottom:clamp(48px,7vw,80px); }
  .lead-list{ display:flex; flex-direction:column; }
  .lead-row{
    display:grid; grid-template-columns:132px 1fr; gap:clamp(24px,4vw,56px);
    align-items:start;
    padding-block:clamp(30px,4vw,44px);
    border-top:1px solid rgba(11,75,58,.18);
  }
  .lead-row:last-child{ border-bottom:1px solid rgba(11,75,58,.18); }
  .initial{
    position:relative;
    aspect-ratio:1; width:100%; max-width:120px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--gold-soft);
    background:
      radial-gradient(120% 120% at 30% 20%, rgba(200,154,42,.10), transparent 60%),
      var(--ivory);
  }
  .initial::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(11,75,58,.22); }
  .initial span{
    font-family:var(--serif); font-weight:600; font-style:italic;
    font-size:clamp(48px,7vw,72px); color:var(--deep-sage); line-height:1;
    padding-left:.04em;
  }
  .lead-body .no{
    font-size:12px; letter-spacing:.28em; text-transform:uppercase;
    color:var(--gold); font-weight:600; margin:0 0 10px;
  }
  .lead-body h3{
    font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.6vw,40px);
    line-height:1.1; color:var(--deep-sage); margin:0 0 14px;
  }
  .lead-body p{ margin:0; max-width:58ch; color:var(--charcoal); }
  .approach-note{
    margin-top:clamp(44px,6vw,68px); text-align:center;
    font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,28px);
    color:var(--sage);
  }

  /* ---------- philosophy (dark) ---------- */
  .philosophy{
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(200,154,42,.08), transparent 55%),
      linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
    color:var(--ivory); text-align:center;
  }
  .philosophy .inner{ max-width:820px; margin-inline:auto; }
  .philosophy h2{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(38px,6vw,50px); line-height:1.06; margin:0 0 40px;
  }
  .philosophy h2 .g{ color:var(--gold); font-style:italic; }
  .anchor{
    border:1px solid var(--gold-soft);
    padding:clamp(30px,5vw,48px);
    margin:0 auto 44px; max-width:640px;
    background:rgba(0,0,0,.08);
  }
  .anchor .ar{
    font-family:var(--serif); font-size:clamp(26px,4vw,36px); color:var(--ivory);
    direction:rtl; line-height:1.7; margin:0 0 18px;
  }
  .anchor .tr{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.4vw,23px); color:rgba(247,242,234,.9); margin:0 0 14px; }
  .anchor .ref{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0; }
  .philosophy .close{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,26px); color:rgba(247,242,234,.88); max-width:52ch; margin:0 auto; }
  .philosophy .close .g{ color:var(--gold); }

  /* ==================================================
   OBJECTIVES SECTION
================================================== */

.objectives {
    background: var(--ivory);
    width: 100%;
}

.objectives .section-head {
    margin-bottom: clamp(40px, 6vw, 68px);
}

.objectives .intro {
    margin-top: 22px;
    /* max-width: 1400px; */
    margin-left: auto;
    margin-right: auto;
}


/* ==================================================
   OBJECTIVES GRID
================================================== */

.obj-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: clamp(30px, 5vw, 72px);
    row-gap: 0;

    width: 100%;
}


/* ==================================================
   OBJECTIVE ITEM
================================================== */

.obj {
    display: grid;

    grid-template-columns: 60px minmax(0, 1fr);

    gap: clamp(16px, 2vw, 22px);

    align-items: start;

    min-width: 0;

    padding: clamp(24px, 3vw, 30px) 0;

    border-top: 1px solid rgba(11, 75, 58, .16);
}


/* ==================================================
   OBJECTIVE NUMBER
================================================== */

.obj-num {
    width: 60px;
    height: 60px;

    flex: none;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--forest);

    border-radius: 3px;

    font-family: var(--serif);
    font-weight: 600;
    font-style: italic;
    font-size: 28px;

    color: var(--gold);

    line-height: 1;

    position: relative;
}

.obj-num::after {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(200, 154, 42, .3);

    border-radius: 2px;
}


/* ==================================================
   OBJECTIVE CONTENT
================================================== */

.obj-main {
    min-width: 0;
}

.obj-head {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 9px;

    min-width: 0;
}

.obj-ic {
    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    color: var(--gold);

    margin-top: 2px;
}

.obj-ic svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.obj h3 {
    font-family: var(--serif);
    font-weight: 600;

    font-size: clamp(21px, 2.4vw, 26px);

    line-height: 1.14;

    color: var(--deep-sage);

    margin: 0;

    overflow-wrap: break-word;
    word-wrap: break-word;
}

.obj p {
    margin: 0;

    font-size: 16px;

    line-height: 1.62;

    color: var(--charcoal);

    overflow-wrap: break-word;
}


/* ==================================================
   MISSION BOX
================================================== */

.obj-mission {
    margin-top: clamp(45px, 7vw, 76px);

    background:
        radial-gradient(
            120% 130% at 12% 0%,
            rgba(200, 154, 42, .10),
            transparent 55%
        ),
        linear-gradient(
            150deg,
            var(--emerald-mid) 0%,
            var(--forest) 45%,
            var(--forest-deep) 100%
        );

    color: var(--ivory);

    border-radius: 5px;

    padding: clamp(38px, 6vw, 66px)
             clamp(26px, 5vw, 72px);

    display: grid;

    grid-template-columns: auto minmax(0, 1fr);

    gap: clamp(26px, 5vw, 56px);

    align-items: center;

    width: 100%;

    overflow: hidden;
}

.obj-mission .mark {
    width: 54px;
    height: 50px;

    flex-shrink: 0;
}

.obj-mission .m-eye {
    font-size: 12px;

    letter-spacing: .32em;

    text-transform: uppercase;

    color: var(--gold);

    font-weight: 600;

    margin: 0 0 16px;
}

.obj-mission h3 {
    font-family: var(--serif);

    font-weight: 500;

    font-size: clamp(26px, 3.6vw, 40px);

    line-height: 1.12;

    margin: 0 0 18px;

    color: var(--ivory);
}

.obj-mission p {
    margin: 0;

    font-size: clamp(17px, 1.9vw, 20px);

    line-height: 1.7;

    color: rgba(247, 242, 234, .85);

    max-width: 60ch;
}

.obj-mission p b {
    color: var(--gold);

    font-weight: 500;
}

.obj-mission .m-core {
    margin-top: 26px;

    font-size: 12px;

    letter-spacing: .2em;

    text-transform: uppercase;

    font-weight: 600;

    color: rgba(247, 242, 234, .6);

    display: flex;

    flex-wrap: wrap;

    gap: 10px 18px;
}

.obj-mission .m-core .sep {
    color: var(--gold-soft);
}


/* ==================================================
   LARGE DESKTOP
   1200px+
================================================== */

@media (min-width: 1200px) {

    .obj-grid {
        column-gap: 72px;
    }

    .obj {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .obj h3 {
        font-size: 26px;
    }

}


/* ==================================================
   TABLET
   769px - 1199px
================================================== */

@media (min-width: 769px) and (max-width: 1199px) {

    .obj-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: clamp(24px, 4vw, 48px);
    }

    .obj {
        grid-template-columns: 52px minmax(0, 1fr);

        gap: 16px;

        padding: 24px 0;
    }

    .obj-num {
        width: 52px;
        height: 52px;

        font-size: 24px;
    }

    .obj-num::after {
        inset: 4px;
    }

    .obj-head {
        gap: 9px;
    }

    .obj-ic {
        width: 20px;
        height: 20px;

        flex-basis: 20px;
    }

    .obj h3 {
        font-size: clamp(20px, 2.3vw, 24px);
    }

    .obj p {
        font-size: 15px;
        line-height: 1.6;
    }

    .obj-mission {
        grid-template-columns: 48px minmax(0, 1fr);

        gap: 28px;

        padding: 48px 40px;
    }

    .obj-mission .mark {
        width: 48px;
        height: 44px;
    }
}


/* ==================================================
   MOBILE
   481px - 768px
================================================== */

@media (max-width: 768px) {

    .objectives .section-head {
        margin-bottom: 42px;
    }

    .objectives .intro {
        margin-top: 18px;
    }


    /* One objective per row */
    .obj-grid {
        grid-template-columns: 1fr;

        column-gap: 0;
    }

    .obj {
        grid-template-columns: 52px minmax(0, 1fr);

        gap: 16px;

        padding: 22px 0;
    }

    .obj-num {
        width: 52px;
        height: 52px;

        font-size: 24px;
    }

    .obj-num::after {
        inset: 4px;
    }

    .obj-head {
        gap: 9px;

        margin-bottom: 8px;
    }

    .obj-ic {
        width: 20px;
        height: 20px;

        flex-basis: 20px;

        margin-top: 1px;
    }

    .obj h3 {
        font-size: clamp(20px, 5vw, 24px);

        line-height: 1.18;
    }

    .obj p {
        font-size: 15px;

        line-height: 1.65;
    }


    /* Mission */
    .obj-mission {
        margin-top: 48px;

        grid-template-columns: 1fr;

        gap: 24px;

        padding: 40px 28px;
    }

    .obj-mission .mark {
        width: 50px;
        height: 46px;
    }

    .obj-mission h3 {
        font-size: clamp(28px, 7vw, 36px);

        margin-bottom: 16px;
    }

    .obj-mission p {
        font-size: 17px;

        line-height: 1.65;
    }

    .obj-mission .m-core {
        margin-top: 22px;

        gap: 8px 12px;

        line-height: 1.5;
    }
}


/* ==================================================
   SMALL MOBILE
   <= 480px
================================================== */

@media (max-width: 480px) {

    .objectives .section-head {
        margin-bottom: 34px;
    }

    .obj {
        grid-template-columns: 44px minmax(0, 1fr);

        gap: 13px;

        padding: 20px 0;
    }

    .obj-num {
        width: 44px;
        height: 44px;

        font-size: 21px;
    }

    .obj-num::after {
        inset: 3px;
    }

    .obj-head {
        gap: 7px;

        align-items: flex-start;
    }

    .obj-ic {
        width: 18px;
        height: 18px;

        flex-basis: 18px;
    }

    .obj h3 {
        font-size: 20px;

        line-height: 1.2;
    }

    .obj p {
        font-size: 14px;

        line-height: 1.65;
    }


    /* Mission */
    .obj-mission {
        margin-top: 38px;

        padding: 32px 20px;

        border-radius: 4px;

        gap: 20px;
    }

    .obj-mission .mark {
        width: 44px;
        height: 40px;
    }

    .obj-mission .m-eye {
        font-size: 10px;

        letter-spacing: .25em;

        margin-bottom: 12px;
    }

    .obj-mission h3 {
        font-size: 28px;

        line-height: 1.15;

        margin-bottom: 14px;
    }

    .obj-mission p {
        font-size: 16px;

        line-height: 1.65;
    }

    .obj-mission .m-core {
        margin-top: 20px;

        font-size: 10px;

        letter-spacing: .12em;

        gap: 7px 10px;
    }
}


/* ==================================================
   VERY SMALL MOBILE
   <= 360px
================================================== */

@media (max-width: 360px) {

    .obj {
        grid-template-columns: 40px minmax(0, 1fr);

        gap: 11px;
    }

    .obj-num {
        width: 40px;
        height: 40px;

        font-size: 19px;
    }

    .obj h3 {
        font-size: 18px;
    }

    .obj p {
        font-size: 13.5px;
    }

    .obj-ic {
        width: 17px;
        height: 17px;

        flex-basis: 17px;
    }

    .obj-mission {
        padding: 28px 17px;
    }

    .obj-mission h3 {
        font-size: 25px;
    }

    .obj-mission p {
        font-size: 15px;
    }
}

/* ==================================================
   CONVERSATIONS / FREE GUIDE
================================================== */

.guide {
    background: var(--ivory);
    width: 100%;
    overflow: hidden;
}

.guide-top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: clamp(35px, 6vw, 72px);
    align-items: center;
    margin-bottom: clamp(48px, 7vw, 72px);
}


/* ---------- TEXT ---------- */

.guide-top > :first-child {
    min-width: 0;
}


/* ---------- MEDALLION ---------- */

.guide-top .medallion {
    position: relative;
    width: min(100%, 360px);
    margin-inline: auto;
}

.guide-top .medallion .disc {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    border-radius: 50%;

    background: var(--ivory);

    border: 1px solid var(--gold-soft);

    box-shadow: 0 24px 60px rgba(7,48,31,.16);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16%;

    overflow: hidden;
}

.guide-top .medallion .disc::before {
    content: "";

    position: absolute;
    inset: 14px;

    border-radius: 50%;

    border: 1px solid rgba(11,75,58,.20);

    pointer-events: none;
}

.guide-top .medallion img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}


/* ---------- BADGE ---------- */

.guide-top .badge {
    position: absolute;

    left: 50%;
    bottom: 6%;

    transform: translateX(-50%);

    background: var(--deep-sage);
    color: var(--ivory);

    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 600;

    padding: 9px 20px;

    border-radius: 999px;

    white-space: nowrap;

    z-index: 2;
}


/* ==================================================
   CONVERSATION CARDS
================================================== */

.conv-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;

    width: 100%;
}

.conv {
    min-width: 0;

    background: var(--ivory-warm);

    border: 1px solid rgba(185,170,151,.5);

    padding: clamp(26px,3vw,34px)
             clamp(22px,2.5vw,32px);

    border-radius: 3px;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.conv:hover {
    transform: translateY(-4px);

    box-shadow: 0 18px 40px rgba(7,48,31,.12);

    border-color: var(--gold-soft);
}

.conv .num {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;

    font-size: clamp(28px,3vw,34px);

    color: var(--gold);

    line-height: 1;

    display: block;

    margin-bottom: 16px;
}

.conv h4 {
    font-family: var(--serif);
    font-weight: 600;

    font-size: clamp(21px,2.2vw,26px);

    color: var(--deep-sage);

    margin: 0 0 10px;

    line-height: 1.15;

    overflow-wrap: break-word;
}

.conv p {
    margin: 0;

    font-size: 16px;
    line-height: 1.6;

    color: var(--charcoal);

    overflow-wrap: break-word;
}


/* ---------- CTA ---------- */

.conv.cta-card {
    background: var(--forest);
    color: var(--ivory);

    border-color: transparent;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.conv.cta-card h4 {
    color: var(--ivory);
}

.conv.cta-card p {
    color: rgba(247,242,234,.8);
    margin-bottom: 22px;
}

.conv.cta-card a {
    display: inline-block;

    width: fit-content;

    color: var(--gold);

    font-weight: 600;

    font-size: 15px;

    letter-spacing: .02em;
}

.conv.cta-card a:hover {
    text-decoration: underline;
}


/* ==================================================
   TABLET
   769px - 1199px
================================================== */

@media (min-width: 769px) and (max-width: 1199px) {

    .guide-top {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, .75fr);

        gap: 40px;
    }

    .guide-top .medallion {
        width: min(100%, 300px);
    }

    .conv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .conv {
        padding: 28px 24px;
    }
}


/* ==================================================
   MOBILE
   768px AND BELOW
================================================== */

@media (max-width: 768px) {

    .guide-top {
        display: flex;
        flex-direction: column;

        gap: 30px;

        margin-bottom: 45px;

        text-align: center;
    }


    /* Text first */
    .guide-top > :first-child {
        order: 1;

        width: 100%;
    }


    /* Image second */
    .guide-top .medallion {
        order: 2;

        width: min(62vw, 280px);

        margin: 0 auto;
    }


    .guide-top .medallion .disc {
        padding: 14%;
    }

    .guide-top .medallion .disc::before {
        inset: 9px;
    }


    /* Badge */
    .guide-top .badge {
        bottom: 5%;

        font-size: 8px;

        letter-spacing: .14em;

        padding: 8px 14px;
    }


    /* Cards */
    .conv-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .conv {
        padding: 26px 22px;

        text-align: left;
    }

    .conv h4 {
        font-size: 23px;
    }

    .conv p {
        font-size: 15px;
    }
}


/* ==================================================
   SMALL MOBILE
   480px AND BELOW
================================================== */

@media (max-width: 480px) {

    .guide-top {
        gap: 25px;

        margin-bottom: 38px;
    }


    /* Smaller image */
    .guide-top .medallion {
        width: min(64vw, 245px);
    }


    .guide-top .medallion .disc {
        padding: 13%;
    }

    .guide-top .medallion .disc::before {
        inset: 7px;
    }


    /* Smaller badge */
    .guide-top .badge {
        font-size: 7px;

        letter-spacing: .11em;

        padding: 7px 11px;
    }


    /* Cards */
    .conv-grid {
        gap: 14px;
    }

    .conv {
        padding: 23px 18px;
    }

    .conv .num {
        font-size: 27px;

        margin-bottom: 12px;
    }

    .conv h4 {
        font-size: 21px;

        line-height: 1.2;
    }

    .conv p {
        font-size: 14px;

        line-height: 1.65;
    }

    .conv.cta-card {
        padding: 25px 18px;
    }
}


/* ==================================================
   VERY SMALL MOBILE
   360px AND BELOW
================================================== */

@media (max-width: 360px) {

    .guide-top {
        gap: 22px;
    }

    .guide-top .medallion {
        width: 65vw;
        max-width: 220px;
    }

    .guide-top .badge {
        font-size: 6.5px;
        padding: 6px 9px;
    }

    .conv {
        padding: 21px 16px;
    }

    .conv h4 {
        font-size: 19px;
    }

    .conv p {
        font-size: 13.5px;
    }
}

  /* ---------- signup ---------- */
  .signup{ background:var(--ivory-warm); }
  .signup .card{
    max-width:720px; 
    margin-inline:auto; text-align:center;
    border:1px solid var(--gold-soft);
    padding:clamp(40px,6vw,64px) clamp(26px,5vw,60px);
    background:var(--ivory);
  }
  .signup .mark{ margin:0 auto 22px; width:40px; height:36px; }
  .signup h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,50px); color:var(--deep-sage); margin:0 0 16px; line-height:1.1; }
  .signup p{ margin:0 auto 30px; 
    /* max-width:1400px; */
 }
  .form{ display:flex; gap:12px; max-width:480px; margin:0 auto; }
  .form input{
    flex:1; font-family:var(--sans); font-size:16px;
    padding:15px 18px; border:1px solid var(--taupe); border-radius:2px;
    background:var(--ivory); color:var(--charcoal); min-width:0;
  }
  .form input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,154,42,.18); }
  .form .btn{ white-space:nowrap; }
  .form-note{ margin:18px 0 0; font-size:13px; color:var(--sage); letter-spacing:.02em; }
  .form-done{ display:none; font-family:var(--serif); font-style:italic; font-size:clamp(20px,3vw,26px); color:var(--deep-sage); }
  .form-done.show{ display:block; }

  /* ---------- community ---------- */
  .community{ background:var(--ivory); text-align:center; }
  .community .inner{ 
    max-width:640px;
     margin-inline:auto; }
  .community .mark{ margin:0 auto 24px; }
  .community h2{ font-family:var(--serif); font-weight:500; font-size:clamp(30px,4.6vw,50px); color:var(--deep-sage); margin:0 0 18px; line-height:1.1; }
  .community h2 .g{ color:var(--gold); font-style:italic; }
  .community p{ margin:0 auto 34px; max-width:44ch; }
  .handle{ font-weight:600; letter-spacing:.02em; color:var(--deep-sage); }

  /* ---------- footer ---------- */
  footer{
    background:var(--forest-deep); color:rgba(247,242,234,.75);
    padding-block:clamp(56px,8vw,80px); text-align:center;
  }
  footer .mark{ margin:0 auto 22px; }
  footer .fwordmark{
    font-family:var(--serif); font-weight:500; font-size:30px; letter-spacing:.24em;
    color:var(--ivory); padding-left:.24em;
  }
  footer .fsub{ font-size:11px; letter-spacing:.4em; color:var(--gold); margin-top:12px; padding-left:.4em; }
  footer .fcore{
    margin:34px 0 30px; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(247,242,234,.6); display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px;
  }
  footer .fcore .sep{ color:var(--gold-soft); }
  footer .fhandle{ color:var(--gold); font-weight:600; letter-spacing:.24em; font-size:13px; }
  footer .legal{ margin-top:26px; font-size:12px; color:rgba(247,242,234,.42); letter-spacing:.03em; }

  /* ---------- reveal animation ---------- */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ 
    opacity:1; 
    transform:none;
    /* max-width: 1400px; */
   }
  .reveal.d1{ transition-delay:.08s; }
  .reveal.d2{ transition-delay:.16s; }
  .reveal.d3{ transition-delay:.24s; }
  .reveal.d4{ transition-delay:.32s; }

 .heading {
    font-size: 50px;
    line-height: 1.2;
}

/* Large tablets */
@media (max-width: 1199px) {
    .heading {
        font-size: 50px !important;
    }
}

/* Tablets */
@media (max-width: 991px) {
    .heading {
        font-size: 50px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .heading {
        font-size: 36px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .heading {
        font-size:36px !important;
    }
}

  :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }





  


   .qudwah-meaning-section {
            width: 100%;
            padding: 90px 20px;
            background: #f7f5f0;
            box-sizing: border-box;
        }

        .qudwah-container {
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
        }




        .qudwah-header {
            text-align: center;
            margin-bottom: 45px;
        }

        .qudwah-header h2 {
            margin: 0;
            color: #0b4b3a;
            font-family: var(--serif);
            font-size: clamp(42px, 5vw, 50px);
            font-weight: 400;
            line-height: 1.05;
            letter-spacing: -1px;
        }

        .qudwah-ornament {
            width: 160px;
            margin: 15px auto 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .qudwah-ornament span {
            width: 55px;
            height: 1px;
            background: #c49a3a;
        }

        .qudwah-ornament b {
            color: #c49a3a;
            font-size: 14px;
            font-weight: 400;
        }

        .qudwah-header p {
            max-width: 850px;
            margin: 0 auto;
            color: #555;
            font-family: Arial, sans-serif;
            font-size: 20px;
            line-height: 1.6;
        }

        .arabic-text {
            margin-left: 5px;
            color: #111;
            font-family: "Times New Roman", serif;
            font-size: 40px;
            direction: rtl;
        }




        .qudwah-cards {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 28px;
            align-items: stretch;
        }




        .qudwah-card {
            min-width: 0;
            height: 100%;
            display: flex;
            background: #073f30;
            border-radius: 4px;
            overflow: hidden;
            box-sizing: border-box;

            box-shadow:
                0 12px 30px rgba(0, 0, 0, 0.10);
        }

        .card-content {
            width: 100%;
            min-height: 600px;
            padding: 45px 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            color: #f8f5ec;
        }




        .card-label {
            display: block;
            margin-bottom: 20px;
            color: #d1a63e;
            font-family: var(--sans);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 3px;
            line-height: 1.5;
            text-align: center;
        }




        .card-one h3 {
            margin: 0;
            color: #fffdf5;
            font-family: var(--serif);
            font-size: clamp(38px, 3.2vw, 50px);
            font-weight: 400;
            letter-spacing: 2px;
            line-height: 1;
        }

        .arabic-decoration {
            margin: 15px 0 30px;
            color: #d5a52f;
            font-family: "Times New Roman", serif;
            font-size: 34px;
            direction: rtl;
        }

        .card-description {
            max-width: 330px;
            margin: 0 auto;
            color: #eeeae0;
            font-family:var(--serif);
            font-style: italic;
            font-size: 18px;
            line-height: 1.55;
            text-align: center;
        }

        .italic {
            font-style: italic;
        }

        .card-highlight {
            margin-top:30px;
          
            color: #fffdf5;
            font-family:var(--sans);
            font-size: 20px;
            font-weight: 400;
            line-height: 1.22;
            text-align: center;
        }

        .card-highlight span {
            color: #d6a738;
        }




        .card-two {
            justify-content: flex-start;
        }

        .intro-text {
            max-width: 355px;
            margin: 0 auto;
            color: #f0eee5;
            font-family:var(--serif);
            font-style: italic;
            font-size: 18px;
            line-height: 1.65;
            text-align: center;
        }

        .meaning-pair {
            width: 100%;
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 7px;
        }

        .meaning-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .meaning-item strong {
            color: #d5a52f;
            font-family: var(--serif);
            font-size: 22px;
            font-weight: 400;
        }

        .meaning-item span {
            margin-top: 3px;
            color: #fffdf5;
            font-family: var(--sans);
            font-size: 18px;
        }

        .plus {
            color: #d5a52f;
            font-family: var(--sans);
            font-size: 20px;
        }

        .quote-mark {
            margin-top: auto;
            color: #d5a52f;
           font-family: var(--sans);
            font-size: 48px;
            line-height: .7;
        }

        .card-two blockquote {
            margin: 10px 0 0;
            color: #f8f5eb;
            font-family: var(--sans);
            font-size: 20px;
            font-style: italic;
            line-height: 1.4;
            text-align: center;
        }




        .card-three {
            justify-content: flex-start;
        }

        .ideas {
            width: 100%;
            margin-top: 10px;
        }

        .idea {
            text-align: center;
            margin-bottom: 28px;
        }

        .idea:last-child {
            margin-bottom: 0;
        }

        .roman {
            display: block;
            margin-bottom: 5px;
            color: #d5a52f;
            font-family: var(--sans);
            font-size: 21px;
            font-style: italic;
        }

        .idea p {
            margin: 0;
            color: #fffdf5;
            font-family: var(--sans);
            font-size: 18px;
            line-height: 1.4;
        }

        .card-divider {
            width: 100%;
            height: 1px;
            margin: auto 0 25px;
            background: rgba(213, 165, 47, .55);
        }

        .bottom-text {
            margin: 0;
            color: #e8e5da;
            font-family: var(--serif);
            font-style: italic;
            font-size: 18px;
            line-height: 1.55;
            text-align: center;
        }

        .bottom-text span {
            color: #d5a52f;
        }




        @media (max-width: 1200px) {

            .qudwah-meaning-section {
                padding: 75px 20px;
            }

            .qudwah-cards {
                gap: 20px;
            }

            .card-content {
                padding: 40px 28px;
            }

            .card-highlight {
                font-size: 20px;
            }

            .card-description {
                font-size: 16px;
            }

        }




        @media (max-width: 991px) {

            .qudwah-header {
                margin-bottom: 35px;
            }

            .qudwah-header p {
                font-size: 18px;
            }

            .qudwah-cards {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .qudwah-card {
                min-height: 560px;
            }

            .card-content {
                min-height: 560px;
                padding: 38px 28px;
            }

            /* Third card takes full width */
            .qudwah-card:nth-child(3) {
                grid-column: 1 / -1;
                width: 100%;
            }

            .card-three {
                max-width: 650px;
                margin: 0 auto;
            }

        }




        @media (max-width: 767px) {

            .qudwah-meaning-section {
                padding: 60px 16px;
            }

            .qudwah-header {
                margin-bottom: 30px;
            }

            .qudwah-header h2 {
                font-size: 42px;
            }

            .qudwah-header p {
                font-size: 16px;
                line-height: 1.6;
            }

            .arabic-text {
                font-size: 40px;
            }

            .qudwah-cards {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .qudwah-card,
            .qudwah-card:nth-child(3) {
                grid-column: auto;
                width: 100%;
                min-height: auto;
            }

            .card-content {
                min-height: 0;
                padding: 42px 25px;
            }

            .card-description {
                max-width: 400px;
            }

            .card-highlight {
                margin-top: 45px;
                padding-top: 0;
                font-size: 20px;
            }

            .card-two blockquote {
                margin-top: 25px;
            }

            .card-divider {
                margin-top: 40px;
            }

        }




        @media (max-width: 480px) {

            .qudwah-meaning-section {
                padding: 45px 12px;
            }

            .qudwah-header h2 {
                font-size: 36px;
            }

            .qudwah-header p {
                font-size: 15px;
            }

            .qudwah-ornament {
                margin: 12px auto;
            }

            .card-content {
                padding: 35px 20px;
            }

            .card-label {
                font-size: 9px;
                letter-spacing: 2px;
            }

            .card-one h3 {
                font-size: 38px;
            }

            .arabic-decoration {
                font-size: 30px;
            }

            .card-description {
                font-size: 15px;
            }

            .card-highlight {
                font-size: 20px;
            }

            .intro-text {
                font-size: 14px;
            }

            .card-two blockquote {
                font-size: 19px;
            }

            .idea p {
                font-size: 17px;
            }

            .bottom-text {
                font-size: 14px;
            }

        }










        /* ================================
   APPROACH - MOBILE LAYOUT
================================ */

@media (max-width: 767px) {

    .lead-row {
        display: grid;
        grid-template-columns: 95px 1fr;
        align-items: start;
        column-gap: 25px;
        width: 100%;
    }

    .initial {
        width: 95px;
        height: 110px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lead-body {
        min-width: 0;
    }

    .lead-body .no {
        margin-top: 0;
    }

    .lead-body h3 {
        margin-top: 8px;
    }

    .lead-body > p:last-child {
        margin-top: 12px;
    }

}