/* ============================================================
   ROOT
============================================================ */

:root{

  --bg:#FFFAF0;
  --bg-alt:#F8F4EC;

  --surface:#FFFFFF;

  --text:#1D2433;
  --text-soft:#667085;
  --text-light:#8A93A5;

  --white:#ffffff;

  --copper:#C4892A;
  --copper-dim:rgba(196,137,42,.08);
  --copper-rule:rgba(196,137,42,.18);

  --rule:#E6DDD0;

  --serif:"Playfair Display",serif;
  --sans:"DM Sans",sans-serif;

  --pad-x:72px;
  --pad-x-mobile:22px;

}


/* ============================================================
   BASE
============================================================ */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  background:var(--bg);

  color:var(--text);

  font-family:var(--sans);

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

section{
  padding:72px var(--pad-x);
}

.section-divider{
  border-top:1px solid var(--rule);
}

/* ==========================================================
   PLAYBOOK HERO
========================================================== */

.pb-hero{
    max-width:1280px;
    margin:90px auto 80px;
    padding:0 40px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:80px;
    align-items:start;
}

.pbh-kicker{
    margin:0 0 18px;
    font-size:.74rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:700;
}

.pbh-h1{
    margin:0;
    font-family:var(--serif);
    font-size:clamp(52px,6vw,82px);
    line-height:.95;
    font-weight:300;
    color:var(--navy);
    letter-spacing:-.04em;
}

.pbh-h1 em{
    font-style:italic;
    color:var(--gold);
}

.pbh-intro{
    margin:0 0 34px;
    font-size:1.08rem;
    line-height:1.95;
    color:var(--ink-light);
}

.pbh-distinction{
    background:#fff;
    border:1px solid rgba(8,24,54,.08);
    border-radius:26px;
    padding:34px;
    box-shadow:0 18px 45px rgba(8,24,54,.06);
    position:relative;
}

.pbh-distinction::before{
    content:"";
    position:absolute;
    left:0;
    top:32px;
    bottom:32px;
    width:4px;
    border-radius:50px;
    background:var(--gold);
}

.pbh-dist-label{
    margin:0 0 14px;
    padding-left:20px;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.73rem;
    color:var(--gold);
    font-weight:700;
}

.pbh-dist-text{
    margin:0;
    padding-left:20px;
    font-size:1rem;
    line-height:1.9;
    color:var(--ink-light);
}

/* Mobile */

@media (max-width:980px){

    .pb-hero{
        grid-template-columns:1fr;
        gap:55px;
        padding:0 24px;
        margin:70px auto;
    }

    .pbh-h1{
        font-size:clamp(42px,12vw,62px);
    }

}

/* ==========================================================
   WHO THIS IS FOR STRIP
========================================================== */

.who-strip{
    max-width:1280px;
    margin:0 auto 90px;
    padding:48px 40px;
    background:#fff;
    border:1px solid rgba(8,24,54,.08);
    border-radius:34px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    box-shadow:0 18px 45px rgba(8,24,54,.05);
}

.ws-label{
    margin:0 0 14px;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.74rem;
    color:var(--gold);
    font-weight:700;
}

.ws-title{
    margin:0;
    font-family:var(--serif);
    font-size:clamp(34px,3vw,52px);
    line-height:1.12;
    font-weight:300;
    color:var(--navy);
}

.ws-title em{
    color:var(--gold);
    font-style:italic;
}

.ws-right{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:flex-start;
    align-content:flex-start;
}

.ws-tag{
    display:inline-flex;
    align-items:center;
    padding:16px 22px;
    background:var(--cream);
    border:1px solid rgba(193,154,107,.18);
    border-radius:999px;
    color:var(--navy);
    font-size:.93rem;
    line-height:1.55;
    transition:.35s;
}

.ws-tag:hover{
    transform:translateY(-3px);
    background:#fff;
    border-color:var(--gold);
    box-shadow:0 10px 25px rgba(8,24,54,.08);
}

/* Mobile */

@media (max-width:980px){

    .who-strip{
        grid-template-columns:1fr;
        gap:40px;
        padding:40px 24px;
        margin:0 20px 70px;
    }

    .ws-title{
        font-size:clamp(28px,8vw,42px);
    }

}

/* ==========================================================
   FOUR PLAYBOOK GUIDES
========================================================== */

.guides-section{
    max-width:1280px;
    margin:0 auto 110px;
    padding:0 40px;
}

.gs-label{
    margin:0 0 14px;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.74rem;
    font-weight:700;
    color:var(--gold);
}

.gs-title{
    margin:0 0 18px;
    font-family:var(--serif);
    font-size:clamp(36px,3.2vw,56px);
    line-height:1.08;
    font-weight:300;
    color:var(--navy);
}

.gs-desc{
    max-width:760px;
    margin:0 0 60px;
    font-size:1.05rem;
    line-height:1.9;
    color:var(--ink-light);
}

.guides-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:34px;
}

.guide-card{
    display:flex;
    flex-direction:column;
    position:relative;
    padding:42px;
    background:#fff;
    border:1px solid rgba(8,24,54,.08);
    border-radius:30px;
    text-decoration:none;
    color:inherit;
    transition:.35s ease;
    overflow:hidden;
    box-shadow:0 16px 40px rgba(8,24,54,.05);
}

.guide-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 60px rgba(8,24,54,.10);
    border-color:rgba(193,154,107,.35);
}

.guide-card.featured{
    border:2px solid rgba(193,154,107,.35);
    background:linear-gradient(180deg,#fff 0%,#FFFCF6 100%);
}

.gc-stat{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:24px;
}

.gc-stat-num{
    font-family:var(--serif);
    font-size:2rem;
    font-weight:300;
    color:var(--gold);
}

.gc-stat-label{
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:var(--ink-light);
}

.gc-num{
    margin:0 0 12px;
    font-size:.8rem;
    letter-spacing:.25em;
    color:var(--gold);
    text-transform:uppercase;
    font-weight:700;
}

.gc-badge{
    display:inline-flex;
    align-self:flex-start;
    margin-bottom:18px;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(193,154,107,.12);
    color:var(--gold);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.gc-h2{
    margin:0 0 18px;
    font-family:var(--serif);
    font-size:2rem;
    line-height:1.18;
    font-weight:300;
    color:var(--navy);
}

.gc-term{
    margin-bottom:20px;
    color:var(--gold);
    font-size:.9rem;
    font-weight:600;
}

.gc-desc-text{
    margin:0 0 28px;
    line-height:1.9;
    color:var(--ink-light);
    flex:1;
}

.gc-steps{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:30px;
}

.gc-step{
    padding:8px 16px;
    background:var(--cream);
    border-radius:999px;
    border:1px solid rgba(193,154,107,.18);
    font-size:.8rem;
    color:var(--navy);
}

.gc-cta{
    margin-top:auto;
    font-weight:700;
    color:var(--gold);
    transition:.3s;
}

.guide-card:hover .gc-cta{
    transform:translateX(6px);
}

/* Mobile */

@media (max-width:1000px){

    .guides-section{
        padding:0 24px;
        margin-bottom:80px;
    }

    .guides-grid{
        grid-template-columns:1fr;
    }

    .guide-card{
        padding:34px;
    }

    .gc-h2{
        font-size:1.7rem;
    }

}

/* ==========================================================
   DISTINCTION SECTION
========================================================== */

.distinction-section{
    max-width:1280px;
    margin:0 auto 110px;
    padding:0 40px;
    text-align:center;
}

.ds-label{
    margin:0 0 14px;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.74rem;
    font-weight:700;
    color:var(--gold);
}

.ds-title{
    max-width:900px;
    margin:0 auto 60px;
    font-family:var(--serif);
    font-size:clamp(38px,3vw,56px);
    line-height:1.12;
    font-weight:300;
    color:var(--navy);
}

.ds-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.distinction-card{
    background:#fff;
    border:1px solid rgba(8,24,54,.08);
    border-radius:28px;
    padding:40px 34px;
    text-align:left;
    transition:.35s;
    box-shadow:0 18px 42px rgba(8,24,54,.05);
}

.distinction-card:hover{
    transform:translateY(-8px);
    border-color:rgba(193,154,107,.35);
    box-shadow:0 28px 55px rgba(8,24,54,.10);
}

.dc-icon{
    margin:0 0 24px;
    font-size:2.3rem;
    line-height:1;
}

.dc-title{
    margin:0 0 16px;
    font-family:var(--serif);
    font-size:1.6rem;
    line-height:1.25;
    font-weight:300;
    color:var(--navy);
}

.dc-desc{
    margin:0;
    line-height:1.9;
    color:var(--ink-light);
}

/* ==========================================================
   AUTHOR STRIP
========================================================== */

.author-strip{
    max-width:1280px;
    margin:0 auto 110px;
    padding:52px;
    background:#081836;
    color:#fff;
    border-radius:34px;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:55px;
    align-items:center;
}

.as-photo{
    aspect-ratio:1;
    border-radius:24px;
    background:linear-gradient(135deg,#1B2D56,#081836);
    border:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:26px;
}

.as-photo-label{
    margin:0;
    font-family:var(--serif);
    font-size:1.4rem;
    color:#fff;
}

.as-label{
    margin:0 0 10px;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.72rem;
    color:#D4AF37;
    font-weight:700;
}

.as-title{
    margin:0 0 22px;
    font-family:var(--serif);
    font-size:clamp(34px,2.8vw,46px);
    line-height:1.18;
    font-weight:300;
    color:#fff;
}

.as-body{
    margin:0 0 30px;
    line-height:1.9;
    color:rgba(255,255,255,.82);
}

.cred-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.cred-pill{
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(212,175,55,.25);
    color:#F7F3EA;
    font-size:.82rem;
}

/* Mobile */

@media (max-width:980px){

    .distinction-section{
        padding:0 24px;
        margin-bottom:80px;
    }

    .ds-grid{
        grid-template-columns:1fr;
    }

    .author-strip{
        grid-template-columns:1fr;
        padding:40px 28px;
        margin:0 20px 80px;
        gap:36px;
        text-align:center;
    }

    .cred-row{
        justify-content:center;
    }

}

/* ==========================================================
   MAHAT BRIDGE
========================================================== */

.bridge{
    max-width:1280px;
    margin:0 auto 110px;
    padding:55px;
    background:linear-gradient(135deg,#081836 0%,#10254D 100%);
    border-radius:34px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    box-shadow:0 30px 70px rgba(8,24,54,.18);
}

.bridge .container{
    padding:0;
    margin:0;
    max-width:none;
}

.br-label{
    margin:0 0 16px;
    font-size:.74rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--gold);
}

.br-body{
    margin:0 0 28px;
    font-size:1.02rem;
    line-height:1.95;
    color:rgba(255,255,255,.82);
}

.br-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 26px;
    border-radius:999px;
    background:var(--gold);
    color:#081836;
    text-decoration:none;
    font-weight:700;
    transition:.35s;
}

.br-link:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(212,175,55,.35);
}

/* ==========================================================
   SUBSCRIBE STRIP
========================================================== */

.sub-strip{
    max-width:1280px;
    margin:0 auto 90px;
    padding:48px;
    background:#fff;
    border:1px solid rgba(8,24,54,.08);
    border-radius:30px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:50px;
    align-items:center;
    box-shadow:0 18px 45px rgba(8,24,54,.05);
}

.sub-strip .container{
    padding:0;
    margin:0;
    max-width:none;
}

.ss-label{
    margin:0 0 10px;
    font-size:.74rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:700;
}

.ss-title{
    margin:0 0 14px;
    font-family:var(--serif);
    font-size:clamp(30px,2.5vw,42px);
    line-height:1.15;
    font-weight:300;
    color:var(--navy);
}

.ss-body{
    margin:0;
    line-height:1.8;
    color:var(--ink-light);
}

.ss-form{
    display:flex;
    gap:16px;
    align-items:center;
}

.ss-input{
    width:320px;
    padding:16px 22px;
    border-radius:999px;
    border:1px solid rgba(8,24,54,.12);
    background:var(--cream);
    font-size:.95rem;
    outline:none;
    transition:.3s;
}

.ss-input:focus{
    border-color:var(--gold);
    background:#fff;
}

.ss-btn{
    padding:16px 34px;
    border:none;
    border-radius:999px;
    background:var(--navy);
    color:#fff;
    cursor:pointer;
    font-weight:700;
    transition:.35s;
}

.ss-btn:hover{
    background:var(--gold);
    color:#081836;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:980px){

    .bridge{
        grid-template-columns:1fr;
        gap:40px;
        padding:38px 28px;
        margin:0 20px 70px;
    }

    .sub-strip{
        grid-template-columns:1fr;
        padding:38px 28px;
        margin:0 20px 70px;
    }

    .ss-form{
        flex-direction:column;
        align-items:stretch;
    }

    .ss-input{
        width:100%;
    }

    .ss-btn{
        width:100%;
    }

}