/*==================================================
    MASUTANE DESIGN SYSTEM
    Learning Hub
====================================================*/


/*==================================================
    01. GOOGLE FONT (Temporary)
    Replace with Candara if web licensed.
====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&display=swap');


/*==================================================
    02. ROOT VARIABLES
====================================================*/

:root{

    /* Brand */

    --burgundy:#38060B;
    --gold:#C4994C;
    --cream:#F5F0ED;
    --charcoal:#2D2D2D;

    /* Working */

    --sand:#EDE3D5;
    --moss:#4A6741;
    --terracotta:#C84A2C;

    /* Neutrals */

    --white:#FFFFFF;
    --grey:#767676;
    --light-border:#DDD2C7;

    /* Shadows */

    --shadow-sm:
        0 8px 20px rgba(0,0,0,.04);

    --shadow-md:
        0 18px 45px rgba(0,0,0,.08);

    --shadow-lg:
        0 28px 80px rgba(0,0,0,.10);

    /* Radius */

    --radius-sm:10px;
    --radius-md:18px;
    --radius-lg:28px;
    --radius-xl:40px;

    /* Width */

    --container:1280px;
    --narrow:760px;

    /* Spacing */

    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:2rem;
    --space-lg:4rem;
    --space-xl:6rem;
    --space-2xl:8rem;
    --space-3xl:10rem;

    /* Typography */

    --hero:clamp(3.5rem,6vw,4.5rem);

    --h2:clamp(2.2rem,4vw,3rem);

    --h3:1.7rem;

    --lead:1.35rem;

    --body:1.08rem;

    --small:.92rem;

    /* Animation */

    --ease:.35s ease;

}


/*==================================================
    03. RESET
====================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--cream);

    color:var(--charcoal);

    font-family:
    Candara,
    "Source Sans 3",
    sans-serif;

    font-size:var(--body);

    line-height:1.7;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

}

img{

    display:block;

    width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    border:none;

    background:none;

    font:inherit;

    cursor:pointer;

}

ul{

    list-style:none;

}


/*==================================================
    04. LAYOUT
====================================================*/

.container{

    width:min(var(--container),92%);

    margin-inline:auto;

}

.narrow{

    max-width:var(--narrow);

}

section{

    padding:
    var(--space-2xl)
    0;

}

.section-line{

    width:70px;

    height:2px;

    background:var(--gold);

    margin-bottom:1.4rem;

}

.gold-divider{

    width:120px;

    height:1px;

    background:var(--gold);

    margin-inline:auto;

    margin-bottom:2rem;

}

.eyebrow{

    display:inline-block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.85rem;

    margin-bottom:1rem;

}

.section-heading{

    text-align:center;

    margin-bottom:5rem;

}


/*==================================================
    05. TYPOGRAPHY
====================================================*/

h1,
h2,
h3,
h4{

    font-weight:600;

    color:var(--burgundy);

    line-height:1.18;

}

h1{

    font-size:var(--hero);

    max-width:760px;

}

h2{

    font-size:var(--h2);

    margin-bottom:1.4rem;

}

h3{

    font-size:var(--h3);

}

p{

    color:var(--charcoal);

    margin-bottom:1.3rem;

}

.lead{

    font-size:var(--lead);

    line-height:1.65;

    max-width:720px;

}

blockquote{

    font-size:2rem;

    line-height:1.5;

    color:var(--burgundy);

    text-align:center;

}


/*==================================================
    06. BUTTONS
====================================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        16px
        34px;

    background:var(--burgundy);

    color:var(--cream);

    border-radius:999px;

    transition:var(--ease);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    color:var(--burgundy);

    font-weight:600;

    transition:var(--ease);

}

.btn-secondary::after{

    content:"→";

    transition:var(--ease);

}

.btn-secondary:hover::after{

    transform:translateX(6px);

}

.btn-text{

    color:var(--burgundy);

    font-weight:600;

    position:relative;

}

.btn-text::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:100%;

    height:1px;

    background:var(--gold);

}


/*==================================================
    07. HEADER
====================================================*/

.site-header{

    position:fixed;

    inset:0 0 auto 0;

    z-index:1000;

    padding:1.25rem 0;

    transition:var(--ease);

}

.site-header.scrolled{

    background:rgba(245,240,237,.95);

    backdrop-filter:blur(14px);

    box-shadow:var(--shadow-sm);

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo img{

    width:200px;

}

.nav-menu{

    display:flex;

    align-items:center;

    gap:2.5rem;

}

.nav-menu a{

    position:relative;

    font-weight:600;

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:1px;

    background:var(--gold);

    transition:var(--ease);

}

.nav-menu a:hover::after,

.nav-menu .active::after{

    width:100%;

}

.mobile-toggle{

    display:none;

}


/*==================================================
    08. HERO
====================================================*/

.learning-hero{

    padding-top:180px;

    min-height:100vh;

    display:flex;

    align-items:center;

    background:

        linear-gradient(
        to bottom,
        #F8F3EF,
        #F5F0ED);

}

.hero-grid{

    display:grid;

    grid-template-columns:

        1.05fr
        .95fr;

    gap:5rem;

    align-items:center;

}

.hero-copy{

    max-width:700px;

}

.hero-actions{

    display:flex;

    gap:1.5rem;

    margin-top:3rem;

}

.hero-media{

    position:relative;

}

.image-frame{

    background:var(--sand);

    padding:24px;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

}

.image-frame img{

    border-radius:24px;

}

.floating-card{

    position:absolute;

    bottom:-30px;

    right:-20px;

    background:white;

    width:290px;

    padding:2rem;

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-md);

}

.floating-card span{

    color:var(--gold);

    font-size:.82rem;

    letter-spacing:.15em;

    text-transform:uppercase;

}

.floating-card h3{

    margin:

        .75rem
        0;

}

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:1rem;

}

.scroll-line{

    width:1px;

    height:60px;

    background:var(--gold);

}
/*==================================================
    09. INTRODUCTION
====================================================*/

.intro-section{

    background:var(--cream);

}

.intro-section .narrow{

    text-align:center;

}

.intro-section h2{

    max-width:700px;

    margin-inline:auto;

}

.intro-section p{

    max-width:700px;

    margin-inline:auto;

}

.intro-section .lead{

    margin-bottom:2rem;

}


/*==================================================
    10. SECTION DIVIDER
====================================================*/

.section-divider{

    padding:0 0 var(--space-xl);

}

.section-divider .container{

    text-align:center;

}

.section-divider p{

    color:var(--grey);

    max-width:620px;

    margin-inline:auto;

}


/*==================================================
    11. FEATURED LEARNING
====================================================*/

.featured-learning{

    background:var(--white);

}

.learning-feature{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:5rem;

    align-items:center;

    margin-bottom:var(--space-3xl);

}

.learning-feature:last-child{

    margin-bottom:0;

}

.learning-feature.reverse{

    direction:rtl;

}

.learning-feature.reverse>*{

    direction:ltr;

}

.feature-media{

    position:relative;

}

.feature-media img{

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

}

.book-cover img{

    max-width:430px;

    margin-inline:auto;

}

.feature-content{

    max-width:560px;

}

.feature-list{

    margin:2rem 0;

}

.feature-list li{

    position:relative;

    padding-left:2rem;

    margin-bottom:1rem;

    color:var(--charcoal);

}

.feature-list li::before{

    content:"";

    position:absolute;

    left:0;

    top:12px;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--gold);

}


/*==================================================
    12. WRITING
====================================================*/

.writing-preview{

    background:var(--cream);

}

.article-grid{

    display:grid;

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

    gap:2rem;

}

.article-card{

    background:var(--white);

    border-radius:var(--radius-md);

    overflow:hidden;

    transition:var(--ease);

    box-shadow:var(--shadow-sm);

}

.article-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.article-card img{

    aspect-ratio:16/10;

    object-fit:cover;

    transition:1.2s;

}

.article-card:hover img{

    transform:scale(1.05);

}

.article-content{

    padding:2rem;

}

.article-content span{

    color:var(--gold);

    text-transform:uppercase;

    font-size:.82rem;

    letter-spacing:.12em;

}

.article-content h3{

    margin:1rem 0;

}

.article-content a{

    display:inline-flex;

    margin-top:1.5rem;

    color:var(--burgundy);

    font-weight:600;

}


/*==================================================
    13. QUOTE
====================================================*/

.quote-section{

    background:var(--sand);

}

.quote-section .narrow{

    text-align:center;

}

.quote-mark{

    font-size:7rem;

    color:var(--gold);

    line-height:1;

    margin-bottom:1rem;

}

.quote-author{

    margin-top:2.5rem;

}

.quote-author strong{

    display:block;

    color:var(--burgundy);

    font-size:1.15rem;

}

.quote-author span{

    color:var(--grey);

}


/*==================================================
    14. RESOURCE STRIP
====================================================*/

.resource-strip{

    background:var(--white);

}

.resource-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:2rem;

}

.resource-card{

    background:var(--cream);

    padding:2.5rem;

    border-radius:var(--radius-md);

    transition:var(--ease);

    position:relative;

}

.resource-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.resource-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:var(--sand);

    color:var(--burgundy);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.6rem;

    margin-bottom:1.5rem;

}

.resource-card h3{

    margin-bottom:1rem;

}

.coming-label{

    display:inline-block;

    margin-top:1.5rem;

    color:var(--gold);

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:.15em;

}


/*==================================================
    15. BRIDGE CTA
====================================================*/

.bridge-section{

    background:var(--cream);

}

.bridge-card{

    background:var(--burgundy);

    color:var(--cream);

    border-radius:var(--radius-xl);

    padding:5rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:4rem;

    overflow:hidden;

    position:relative;

}

.bridge-card::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(255,255,255,.03);

    right:-120px;

    top:-150px;

}

.bridge-copy{

    max-width:650px;

    position:relative;

    z-index:2;

}

.bridge-card h2{

    color:var(--cream);

}

.bridge-card p{

    color:rgba(245,240,237,.88);

}

.bridge-card .eyebrow{

    color:var(--gold);

}

.bridge-card .btn-primary{

    background:var(--cream);

    color:var(--burgundy);

    flex-shrink:0;

}


/*==================================================
    16. NEWSLETTER
====================================================*/

.newsletter{

    background:var(--sand);

}

.newsletter-card{

    background:var(--cream);

    border-radius:var(--radius-xl);

    padding:5rem;

    text-align:center;

    box-shadow:var(--shadow-md);

}

.newsletter-card h2{

    margin-bottom:1rem;

}

.newsletter-card p{

    max-width:620px;

    margin-inline:auto;

}

.newsletter-form{

    display:flex;

    gap:1rem;

    justify-content:center;

    margin-top:3rem;

    flex-wrap:wrap;

}

.newsletter-form input{

    width:280px;

    padding:18px 20px;

    border:1px solid var(--light-border);

    background:var(--white);

    border-radius:999px;

    font:inherit;

    transition:var(--ease);

}

.newsletter-form input:focus{

    outline:none;

    border-color:var(--gold);

}

.newsletter-form button{

    border:none;

}


/*==================================================
    17. FOOTER
====================================================*/

.site-footer{

    background:var(--burgundy);

    color:var(--cream);

    padding-top:5rem;

    padding-bottom:2rem;

}

.footer-top{

    display:flex;

    justify-content:space-between;

    gap:5rem;

    margin-bottom:4rem;

}

.footer-brand{

    max-width:320px;

}

.footer-brand img{

    width:170px;

    margin-bottom:1.5rem;

}

.footer-brand p{

    color:rgba(245,240,237,.75);

}

.footer-links{

    display:grid;

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

    gap:4rem;

}

.footer-links h4{

    color:var(--cream);

    margin-bottom:1.25rem;

}

.footer-links a{

    display:block;

    margin-bottom:.9rem;

    color:rgba(245,240,237,.75);

    transition:var(--ease);

}

.footer-links a:hover{

    color:var(--gold);

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:2rem;

    text-align:center;

}

.footer-bottom p{

    color:rgba(245,240,237,.65);

    margin:0;

}
/*==================================================
    18. REVEAL ANIMATIONS
====================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .9s ease,
        transform .9s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

.fade{

    opacity:0;

    transition:1s ease;

}

.fade.active{

    opacity:1;

}

.zoom{

    overflow:hidden;

}

.zoom img{

    transition:transform 1.2s ease;

}

.zoom:hover img{

    transform:scale(1.06);

}



/*==================================================
    19. IMAGE HOVER
====================================================*/

.feature-media{

    overflow:hidden;

    border-radius:var(--radius-lg);

}

.feature-media img{

    transition:transform 1.2s ease;

}

.feature-media:hover img{

    transform:scale(1.04);

}



/*==================================================
    20. LINK UNDERLINES
====================================================*/

a{

    transition:var(--ease);

}

.nav-menu a:hover{

    color:var(--burgundy);

}

.footer-links a:hover{

    padding-left:8px;

}



/*==================================================
    21. FORM STATES
====================================================*/

input::placeholder{

    color:#999;

}

input:focus{

    box-shadow:

        0 0 0 4px rgba(196,153,76,.15);

}

button:focus,

a:focus,

input:focus{

    outline:none;

}



/*==================================================
    22. UTILITIES
====================================================*/

.text-center{

    text-align:center;

}

.mb-0{

    margin-bottom:0;

}

.mb-sm{

    margin-bottom:1rem;

}

.mb-md{

    margin-bottom:2rem;

}

.mb-lg{

    margin-bottom:4rem;

}

.hidden{

    display:none;

}

.shadow{

    box-shadow:var(--shadow-lg);

}

.rounded{

    border-radius:var(--radius-lg);

}



/*==================================================
    23. MOBILE NAVIGATION
====================================================*/

.mobile-toggle{

    width:48px;

    height:48px;

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:6px;

}

.mobile-toggle span{

    width:24px;

    height:2px;

    background:var(--burgundy);

    transition:var(--ease);

}

.mobile-toggle.active span:nth-child(1){

    transform:

        rotate(45deg)

        translateY(8px);

}

.mobile-toggle.active span:nth-child(2){

    opacity:0;

}

.mobile-toggle.active span:nth-child(3){

    transform:

        rotate(-45deg)

        translateY(-8px);

}



/*==================================================
    24. TABLET
====================================================*/

@media(max-width:1100px){

.hero-grid{

    grid-template-columns:1fr;

    gap:4rem;

}

.learning-feature{

    grid-template-columns:1fr;

}

.learning-feature.reverse{

    direction:ltr;

}

.feature-content{

    max-width:100%;

}

.article-grid{

    grid-template-columns:1fr 1fr;

}

.resource-grid{

    grid-template-columns:1fr 1fr;

}

.bridge-card{

    flex-direction:column;

    align-items:flex-start;

}

.footer-top{

    flex-direction:column;

}

.footer-links{

    grid-template-columns:repeat(2,1fr);

}

}



/*==================================================
    25. MOBILE
====================================================*/

@media(max-width:768px){

:root{

    --hero:3rem;

    --h2:2.3rem;

    --lead:1.15rem;

}

section{

    padding:5rem 0;

}

.site-header{

    padding:1rem 0;

}

.nav-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    height:100vh;

    background:var(--cream);

    flex-direction:column;

    justify-content:center;

    gap:2rem;

    transition:.4s;

    box-shadow:-10px 0 40px rgba(0,0,0,.08);

}

.nav-menu.active{

    right:0;

}

.mobile-toggle{

    display:flex;

}

.hero-actions{

    flex-direction:column;

    align-items:flex-start;

}

.floating-card{

    position:relative;

    width:100%;

    bottom:auto;

    right:auto;

    margin-top:2rem;

}

.article-grid{

    grid-template-columns:1fr;

}

.resource-grid{

    grid-template-columns:1fr;

}

.newsletter-card{

    padding:3rem 2rem;

}

.newsletter-form{

    flex-direction:column;

}

.newsletter-form input{

    width:100%;

}

.newsletter-form button{

    width:100%;

}

.footer-links{

    grid-template-columns:1fr;

}

blockquote{

    font-size:1.55rem;

}

.quote-mark{

    font-size:5rem;

}

.bridge-card{

    padding:3rem 2rem;

}

}



/*==================================================
    26. SMALL PHONES
====================================================*/

@media(max-width:480px){

.container{

    width:92%;

}

h1{

    font-size:2.6rem;

}

.hero-actions{

    gap:1rem;

}

.btn-primary{

    width:100%;

}

.btn-secondary{

    width:100%;

}

.image-frame{

    padding:14px;

}

.newsletter-card{

    border-radius:20px;

}

}



/*==================================================
    27. REDUCED MOTION
====================================================*/

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

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}



/*==================================================
    END
====================================================*/

/*==================================================
    WORKING HUB
====================================================*/


/*==================================================
    28. WORKING HERO
====================================================*/

.working-hero{

    background:
    linear-gradient(
    135deg,
    var(--burgundy) 0%,
    #4a0c13 100%);

    color:var(--cream);

    padding-top:180px;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    position:relative;

}

.working-hero::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(196,153,76,.12),
    transparent 70%);

    right:-250px;
    top:-250px;

}

.working-hero-grid{

    display:grid;

    grid-template-columns:
    1fr
    .95fr;

    gap:6rem;

    align-items:center;

    position:relative;

    z-index:2;

}

.working-copy h1{

    color:var(--cream);

    max-width:700px;

}

.working-copy p{

    color:rgba(245,240,237,.88);

}

.working-copy .section-line{

    background:var(--gold);

}

.working-copy .eyebrow{

    color:var(--gold);

}

.working-image{

    position:relative;

}

.hero-image-frame{

    background:rgba(255,255,255,.05);

    padding:24px;

    border-radius:36px;

    backdrop-filter:blur(10px);

}

.hero-image-frame img{

    border-radius:24px;

}



/*==================================================
    29. INTRO
====================================================*/

.working-intro{

    background:var(--cream);

}

.working-intro .narrow{

    text-align:center;

}

.working-intro h2{

    max-width:760px;

    margin-inline:auto;

}

.working-intro p{

    max-width:720px;

    margin-inline:auto;

}



/*==================================================
    30. PRINCIPLES
====================================================*/

.working-principles{

    background:var(--white);

}

.principles-grid{

    display:grid;

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

    gap:2rem;

}

.principle-card{

    padding:3rem;

    border-top:3px solid var(--gold);

    background:var(--cream);

    transition:var(--ease);

}

.principle-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.principle-number{

    display:block;

    font-size:3rem;

    color:rgba(56,6,11,.12);

    font-weight:700;

    margin-bottom:1rem;

}

.principle-card h3{

    margin-bottom:1rem;

}



/*==================================================
    31. WAYS WE WORK
====================================================*/

.ways-working{

    background:var(--sand);

}

.service-feature{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:5rem;

    align-items:center;

    margin-bottom:8rem;

}

.service-feature:last-child{

    margin-bottom:0;

}

.service-feature.reverse{

    direction:rtl;

}

.service-feature.reverse>*{

    direction:ltr;

}

.service-image{

    overflow:hidden;

    border-radius:28px;

}

.service-image img{

    border-radius:28px;

    transition:1.2s;

    box-shadow:var(--shadow-lg);

}

.service-image:hover img{

    transform:scale(1.04);

}

.service-copy{

    max-width:560px;

}

.service-copy h2{

    margin-bottom:1.5rem;

}

.service-copy p{

    margin-bottom:2rem;

}

.service-copy .eyebrow{

    color:var(--gold);

}

/*==================================================
    32. FEATURED CASE STUDY
====================================================*/

.featured-case{

    background:var(--white);

}

.case-layout{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:6rem;

    align-items:center;

}

.case-image{

    overflow:hidden;

    border-radius:var(--radius-xl);

    position:relative;

}

.case-image img{

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

    transition:1.2s;

}

.case-image:hover img{

    transform:scale(1.04);

}

.case-content{

    max-width:560px;

}

.case-content .lead{

    margin-bottom:2rem;

}

.case-content p:last-of-type{

    margin-bottom:2.5rem;

}



/*==================================================
    33. RESEARCH SECTORS
====================================================*/

.research-sectors{

    background:var(--cream);

}

.sector-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:1px;

    background:var(--light-border);

    margin-top:4rem;

}

.sector{

    background:var(--cream);

    padding:3.5rem 2rem;

    text-align:center;

    font-size:1.4rem;

    font-weight:600;

    color:var(--burgundy);

    transition:var(--ease);

}

.sector:hover{

    background:var(--burgundy);

    color:var(--cream);

}



/*==================================================
    34. PROJECT JOURNEY
====================================================*/

.project-journey{

    background:var(--white);

}

.journey-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:2rem;

    margin-top:5rem;

}

.journey-step{

    text-align:center;

    position:relative;

}

.journey-step span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--sand);

    color:var(--burgundy);

    font-weight:700;

    font-size:1.15rem;

    margin-bottom:1.75rem;

}

.journey-step h3{

    margin-bottom:1rem;

}

.journey-step::after{

    content:"";

    position:absolute;

    top:35px;

    left:calc(100% - 15px);

    width:30px;

    height:1px;

    background:var(--gold);

}

.journey-step:last-child::after{

    display:none;

}



/*==================================================
    35. SECTION EMPHASIS
====================================================*/

.featured-case,
.project-journey{

    position:relative;

}

.featured-case::before,
.project-journey::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        var(--gold),
        transparent
    );

}



/*==================================================
    36. FEATURE DETAILS
====================================================*/

.service-copy ul{

    margin:2rem 0;

}

.service-copy li{

    position:relative;

    padding-left:1.75rem;

    margin-bottom:.9rem;

}

.service-copy li::before{

    content:"";

    position:absolute;

    left:0;

    top:11px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--gold);

}



/*==================================================
    37. LARGE STATEMENT BLOCK
====================================================*/

.statement-block{

    background:var(--burgundy);

    color:var(--cream);

    text-align:center;

    padding:7rem 0;

}

.statement-block h2{

    color:var(--cream);

    max-width:900px;

    margin-inline:auto;

}

.statement-block p{

    color:rgba(245,240,237,.85);

    max-width:720px;

    margin:2rem auto 0;

}



/*==================================================
    38. IMAGE TREATMENT
====================================================*/

.service-image,
.case-image{

    background:var(--sand);

    padding:18px;

}

.service-image img,
.case-image img{

    display:block;

    width:100%;

    object-fit:cover;

}



/*==================================================
    39. SUBTLE GOLD ACCENTS
====================================================*/

.service-copy h2::after,
.case-content h2::after{

    content:"";

    display:block;

    width:70px;

    height:2px;

    background:var(--gold);

    margin-top:1rem;

}



/*==================================================
    40. SECTION TRANSITIONS
====================================================*/

.working-principles,
.ways-working,
.featured-case,
.research-sectors,
.project-journey{

    overflow:hidden;

}

/*==================================================
    41. CLIENT VOICES
====================================================*/

.client-voices{

    background:var(--sand);

}

.testimonial-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.testimonial-card{

    background:var(--white);

    padding:3rem;

    border-radius:var(--radius-lg);

    position:relative;

    transition:var(--ease);

    box-shadow:var(--shadow-sm);

}

.testimonial-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.testimonial-card .quote-mark{

    font-size:4rem;

    color:var(--gold);

    line-height:1;

    margin-bottom:1.5rem;

}

.testimonial-card p{

    margin-bottom:2rem;

}

.testimonial-author strong{

    display:block;

    color:var(--burgundy);

    font-size:1rem;

    margin-bottom:.4rem;

}

.testimonial-author span{

    color:var(--grey);

    font-size:.95rem;

}



/*==================================================
    42. FINAL CTA
====================================================*/

.working-cta{

    background:var(--cream);

}

.working-cta-card{

    background:linear-gradient(
        135deg,
        var(--burgundy),
        #4b0d14
    );

    border-radius:var(--radius-xl);

    padding:5rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:4rem;

    overflow:hidden;

    position:relative;

}

.working-cta-card::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,255,255,.03);

    top:-180px;

    right:-180px;

}

.working-cta-content{

    max-width:700px;

    position:relative;

    z-index:2;

}

.working-cta-content h2{

    color:var(--cream);

}

.working-cta-content p{

    color:rgba(245,240,237,.88);

}

.working-cta-actions{

    display:flex;

    flex-direction:column;

    gap:1rem;

    align-items:flex-start;

    position:relative;

    z-index:2;

}

.working-cta .btn-primary{

    background:var(--cream);

    color:var(--burgundy);

}

.working-cta .btn-secondary{

    color:var(--cream);

}



/*==================================================
    43. WORKING PAGE REVEALS
====================================================*/

.service-feature,

.case-layout,

.principle-card,

.testimonial-card,

.journey-step,

.sector{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.service-feature.active,

.case-layout.active,

.principle-card.active,

.testimonial-card.active,

.journey-step.active,

.sector.active{

    opacity:1;

    transform:translateY(0);

}



/*==================================================
    44. WORKING IMAGE EFFECTS
====================================================*/

.hero-image-frame,

.service-image,

.case-image{

    transition:var(--ease);

}

.hero-image-frame:hover,

.service-image:hover,

.case-image:hover{

    transform:translateY(-6px);

}



/*==================================================
    45. RESPONSIVE
====================================================*/

@media(max-width:1100px){

.working-hero-grid{

    grid-template-columns:1fr;

    gap:4rem;

}

.service-feature{

    grid-template-columns:1fr;

}

.service-feature.reverse{

    direction:ltr;

}

.case-layout{

    grid-template-columns:1fr;

}

.principles-grid{

    grid-template-columns:1fr;

}

.testimonial-grid{

    grid-template-columns:1fr;

}

.journey-grid{

    grid-template-columns:repeat(2,1fr);

}

.journey-step::after{

    display:none;

}

.sector-grid{

    grid-template-columns:repeat(2,1fr);

}

.working-cta-card{

    flex-direction:column;

    align-items:flex-start;

}

}



@media(max-width:768px){

.working-hero{

    min-height:auto;

    padding-top:140px;

    padding-bottom:5rem;

}

.hero-image-frame{

    padding:16px;

}

.principle-card{

    padding:2rem;

}

.service-feature{

    gap:2.5rem;

    margin-bottom:5rem;

}

.case-layout{

    gap:3rem;

}

.sector{

    padding:2rem 1rem;

    font-size:1.1rem;

}

.journey-grid{

    grid-template-columns:1fr;

}

.testimonial-card{

    padding:2rem;

}

.working-cta-card{

    padding:3rem 2rem;

}

.working-cta-actions{

    width:100%;

}

.working-cta-actions .btn-primary,

.working-cta-actions .btn-secondary{

    width:100%;

    justify-content:center;

}

}



@media(max-width:480px){

.working-copy h1{

    font-size:2.5rem;

}

.section-heading{

    margin-bottom:3rem;

}

.service-copy,

.case-content{

    max-width:100%;

}

.sector-grid{

    grid-template-columns:1fr;

}

}



/*==================================================
    46. PRINT
====================================================*/

@media print{

.site-header,

.site-footer,

.hero-actions,

.working-cta,

.newsletter{

    display:none !important;

}

body{

    background:#fff;

    color:#000;

}

section{

    padding:2rem 0;

}

}



/*==================================================
    END OF WORKING HUB
====================================================*/

/*==================================================
    WRITING HUB
====================================================*/


/*==================================================
    47. WRITING HERO
====================================================*/

.writing-hero{

    background:var(--cream);

    padding-top:170px;

    overflow:hidden;

}

.writing-hero-grid{

    display:grid;

    grid-template-columns:1fr .9fr;

    gap:6rem;

    align-items:center;

}

.writing-copy h1{

    max-width:720px;

    margin-bottom:2rem;

}

.writing-copy .lead{

    max-width:620px;

}

.writing-image{

    position:relative;

}

.writing-image img{

    width:100%;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

    display:block;

}

.writing-image::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(196,153,76,.12);

    bottom:-60px;

    left:-60px;

    z-index:-1;

}



/*==================================================
    48. FEATURED ARTICLE
====================================================*/

.featured-writing{

    background:var(--white);

}

.featured-article{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:5rem;

    align-items:center;

}

.featured-image{

    overflow:hidden;

    border-radius:var(--radius-xl);

    background:var(--sand);

    padding:18px;

}

.featured-image img{

    width:100%;

    display:block;

    border-radius:calc(var(--radius-xl) - 8px);

    transition:1.2s;

}

.featured-image:hover img{

    transform:scale(1.03);

}

.featured-content{

    max-width:560px;

}

.article-category{

    display:inline-block;

    margin-bottom:1rem;

    color:var(--gold);

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

    font-size:.82rem;

}

.featured-content h2{

    margin-bottom:1.5rem;

}

.featured-content h2::after{

    content:"";

    display:block;

    width:70px;

    height:2px;

    background:var(--gold);

    margin-top:1rem;

}

.article-meta{

    display:flex;

    gap:2rem;

    margin:2rem 0;

    color:#777;

    font-size:.95rem;

}



/*==================================================
    49. WRITING INTRO
====================================================*/

.writing-intro{

    background:var(--cream);

    text-align:center;

}

.writing-intro .narrow{

    max-width:820px;

    margin-inline:auto;

}

.writing-intro h2{

    max-width:720px;

    margin-inline:auto;

}

.writing-intro p{

    max-width:700px;

    margin-inline:auto;

}



/*==================================================
    50. LATEST WRITING
====================================================*/

.latest-writing{

    background:var(--white);

}

.writing-grid{

    display:grid;

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

    gap:2.5rem;

    margin-top:4rem;

}



/*==================================================
    51. ARTICLE CARDS
====================================================*/

.writing-card{

    background:var(--cream);

    border-radius:var(--radius-lg);

    overflow:hidden;

    transition:var(--ease);

    box-shadow:var(--shadow-sm);

}

.writing-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.writing-card-image{

    overflow:hidden;

}

.writing-card-image img{

    width:100%;

    display:block;

    transition:1s;

}

.writing-card:hover img{

    transform:scale(1.05);

}

.writing-card-content{

    padding:2rem;

}

.writing-card-content h3{

    margin:1rem 0;

    min-height:78px;

}

.writing-card-content p{

    margin-bottom:1.75rem;

}

.writing-card-content a{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    color:var(--burgundy);

    font-weight:600;

    text-decoration:none;

    transition:var(--ease);

}

.writing-card-content a:hover{

    color:var(--gold);

    gap:.8rem;

}



/*==================================================
    52. SHARED ARTICLE EFFECTS
====================================================*/

.featured-article,
.writing-card{

    position:relative;

}

.featured-article::before{

    content:"";

    position:absolute;

    top:-25px;

    left:0;

    width:80px;

    height:2px;

    background:var(--gold);

}

.writing-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:var(--gold);

    transition:.45s ease;

}

.writing-card:hover::after{

    width:100%;

}

/*==================================================
    53. RESEARCH THEMES
====================================================*/

.writing-themes{

    background:var(--cream);

}

.themes-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1px;

    background:rgba(56,6,11,.08);

    margin-top:4rem;

}

.theme-item{

    background:var(--cream);

    padding:3.5rem;

    text-decoration:none;

    transition:var(--ease);

    position:relative;

    overflow:hidden;

}

.theme-item::before{

    content:"";

    position:absolute;

    left:3.5rem;

    bottom:2.4rem;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.45s ease;

}

.theme-item:hover::before{

    width:70px;

}

.theme-item h3{

    color:var(--burgundy);

    margin-bottom:1rem;

    transition:var(--ease);

}

.theme-item span{

    color:#7b7b7b;

    font-size:.95rem;

    transition:var(--ease);

}

.theme-item:hover{

    background:var(--white);

}

.theme-item:hover h3{

    transform:translateX(10px);

}

.theme-item:hover span{

    color:var(--gold);

}



/*==================================================
    54. EDITORIAL QUOTE
====================================================*/

.editorial-quote{

    background:var(--burgundy);

    text-align:center;

    padding:8rem 0;

    position:relative;

    overflow:hidden;

}

.editorial-quote::before{

    content:"“";

    position:absolute;

    top:-50px;

    left:50%;

    transform:translateX(-50%);

    font-size:18rem;

    color:rgba(255,255,255,.04);

    font-family:Georgia, serif;

}

.editorial-quote blockquote{

    max-width:900px;

    margin:0 auto;

    color:var(--cream);

    font-size:2rem;

    line-height:1.6;

    font-weight:500;

    position:relative;

    z-index:2;

}

.editorial-quote cite{

    display:block;

    margin-top:2.5rem;

    color:rgba(245,240,237,.75);

    font-style:normal;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-size:.85rem;

}



/*==================================================
    55. POPULAR WRITING
====================================================*/

.popular-writing{

    background:var(--white);

}

.editorial-story{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:5rem;

    align-items:center;

    margin-bottom:7rem;

}

.editorial-story:last-child{

    margin-bottom:0;

}

.editorial-story.reverse{

    grid-template-columns:.9fr 1.1fr;

}

.story-image{

    background:var(--sand);

    padding:18px;

    border-radius:var(--radius-xl);

    overflow:hidden;

}

.story-image img{

    width:100%;

    display:block;

    border-radius:calc(var(--radius-xl) - 8px);

    transition:1s;

}

.story-image:hover img{

    transform:scale(1.04);

}

.story-content{

    max-width:540px;

}

.story-content h2{

    margin:1rem 0 1.5rem;

}

.story-content h2::after{

    content:"";

    display:block;

    width:70px;

    height:2px;

    background:var(--gold);

    margin-top:1rem;

}

.story-content p{

    margin-bottom:2rem;

}



/*==================================================
    56. FIELD NOTES
====================================================*/

.field-notes{

    background:var(--cream);

}

.notes-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.note-card{

    background:var(--white);

    padding:3rem;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    position:relative;

    transition:var(--ease);

    min-height:230px;

    display:flex;

    align-items:center;

}

.note-card::before{

    content:"✦";

    position:absolute;

    top:22px;

    right:24px;

    color:var(--gold);

    font-size:1.2rem;

}

.note-card p{

    font-size:1.2rem;

    line-height:1.8;

    color:var(--burgundy);

    margin:0;

}

.note-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}



/*==================================================
    57. EDITORIAL DETAILS
====================================================*/

.editorial-story,
.theme-item,
.note-card{

    position:relative;

}

.editorial-story::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3rem;

    width:100%;

    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(196,153,76,.45),
        transparent
    );

}

.editorial-story:last-child::after{

    display:none;

}

/*==================================================
    58. WRITING NEWSLETTER
====================================================*/

.writing-newsletter{

    background:var(--white);

}

.newsletter-layout{

    display:grid;

    grid-template-columns:1fr .9fr;

    gap:5rem;

    align-items:center;

}

.newsletter-content{

    max-width:620px;

}

.newsletter-form{

    background:var(--cream);

    padding:3rem;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

}

.newsletter-form .form-group{

    margin-bottom:1.75rem;

}

.newsletter-form label{

    display:block;

    margin-bottom:.75rem;

    color:var(--burgundy);

    font-weight:600;

}

.newsletter-form input{

    width:100%;

    padding:1rem 1.25rem;

    border:1px solid rgba(56,6,11,.15);

    border-radius:10px;

    background:#fff;

    font-size:1rem;

    color:var(--charcoal);

    transition:var(--ease);

}

.newsletter-form input:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(196,153,76,.12);

}

.newsletter-form button{

    width:100%;

}



/*==================================================
    59. EXPLORE MORE
====================================================*/

.writing-explore{

    background:var(--cream);

}

.explore-card{

    background:linear-gradient(
        135deg,
        var(--burgundy),
        #4d0f16
    );

    border-radius:var(--radius-xl);

    padding:5rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:4rem;

    overflow:hidden;

    position:relative;

}

.explore-card::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(255,255,255,.03);

    right:-180px;

    top:-180px;

}

.explore-content{

    max-width:620px;

    position:relative;

    z-index:2;

}

.explore-content h2{

    color:var(--cream);

}

.explore-content p{

    color:rgba(245,240,237,.86);

}

.explore-actions{

    display:flex;

    flex-direction:column;

    gap:1rem;

    position:relative;

    z-index:2;

}

.explore-actions .btn-primary{

    background:var(--cream);

    color:var(--burgundy);

}

.explore-actions .btn-secondary{

    color:var(--cream);

}



/*==================================================
    60. WRITING ANIMATIONS
====================================================*/

.featured-article,
.writing-card,
.theme-item,
.editorial-story,
.note-card,
.newsletter-layout,
.explore-card{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.featured-article.active,
.writing-card.active,
.theme-item.active,
.editorial-story.active,
.note-card.active,
.newsletter-layout.active,
.explore-card.active{

    opacity:1;

    transform:translateY(0);

}



/*==================================================
    61. RESPONSIVE
====================================================*/

@media(max-width:1100px){

.writing-hero-grid{

    grid-template-columns:1fr;

    gap:4rem;

}

.featured-article{

    grid-template-columns:1fr;

}

.writing-grid{

    grid-template-columns:repeat(2,1fr);

}

.themes-grid{

    grid-template-columns:1fr;

}

.editorial-story,
.editorial-story.reverse{

    grid-template-columns:1fr;

}

.notes-grid{

    grid-template-columns:repeat(2,1fr);

}

.newsletter-layout{

    grid-template-columns:1fr;

}

.explore-card{

    flex-direction:column;

    align-items:flex-start;

}

}



@media(max-width:768px){

.writing-hero{

    padding-top:140px;

}

.writing-grid{

    grid-template-columns:1fr;

}

.notes-grid{

    grid-template-columns:1fr;

}

.theme-item{

    padding:2.5rem;

}

.note-card{

    padding:2rem;

    min-height:180px;

}

.editorial-quote{

    padding:5rem 0;

}

.editorial-quote blockquote{

    font-size:1.5rem;

}

.newsletter-form{

    padding:2rem;

}

.explore-card{

    padding:3rem 2rem;

}

.explore-actions{

    width:100%;

}

.explore-actions .btn-primary,
.explore-actions .btn-secondary{

    width:100%;

    justify-content:center;

}

}



@media(max-width:480px){

.writing-copy h1{

    font-size:2.5rem;

}

.article-meta{

    flex-direction:column;

    gap:.5rem;

}

.theme-item{

    padding:2rem;

}

.story-content{

    max-width:100%;

}

.note-card p{

    font-size:1.05rem;

}

}



/*==================================================
    62. WRITING POLISH
====================================================*/

.theme-item:focus-visible,
.writing-card:focus-within,
.editorial-story a:focus-visible,
.newsletter-form input:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:4px;

}

::selection{

    background:rgba(196,153,76,.25);

    color:var(--burgundy);

}



/*==================================================
    END OF WRITING HUB
====================================================*/

/*==================================================
    HOME V2
    PART 1
====================================================*/


/*==================================================
    1. SHARED HEADER
====================================================*/

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:1.5rem 0;

    transition:.4s ease;

    background:rgba(245,240,237,.92);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(196,153,76,.08);

}

.site-header.scrolled{

    padding:1rem 0;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

}

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.brand img{

    height:58px;

    display:block;

}

.nav-menu{

    display:flex;

    align-items:center;

    gap:3rem;

}

.nav-menu ul{

    display:flex;

    align-items:center;

    gap:2.25rem;

    list-style:none;

    margin:0;

    padding:0;

}

.nav-menu a{

    text-decoration:none;

    color:var(--charcoal);

    font-weight:600;

    transition:.35s ease;

    position:relative;

}

.nav-menu a:hover,

.nav-menu a.active{

    color:var(--burgundy);

}

.nav-menu ul a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.35s ease;

}

.nav-menu ul a:hover::after,

.nav-menu ul a.active::after{

    width:100%;

}

.nav-cta{

    margin-left:1rem;

}

.menu-toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    background:none;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    width:28px;

    height:2px;

    background:var(--burgundy);

    margin:6px auto;

    transition:.35s ease;

}



/*==================================================
    2. BUTTON SYSTEM
====================================================*/

.btn-primary,

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:15px 34px;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    transition:.35s ease;

    cursor:pointer;

}

.btn-primary{

    background:var(--burgundy);

    color:var(--cream);

}

.btn-primary:hover{

    background:#541017;

    transform:translateY(-2px);

    box-shadow:0 14px 30px rgba(56,6,11,.18);

}

.btn-secondary{

    border:1px solid rgba(255,255,255,.35);

    color:var(--cream);

    background:transparent;

}

.btn-secondary:hover{

    background:rgba(255,255,255,.08);

    border-color:var(--gold);

}



/*==================================================
    3. HERO
====================================================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-background{

    position:absolute;

    inset:0;

}

.hero-background img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(90deg, 
        rgba(56, 6, 11, 0.92), 
        rgba(56, 6, 11, 0.4)), 
        rgba(56, 6, 11, 0.4)

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:720px;

    color:var(--cream);

}

.hero-content h1{

    color:var(--cream);

    font-size:clamp(3.8rem,6vw,5.2rem);

    line-height:1.05;

    margin:1rem 0 2rem;

}

.hero-content .lead{

    color:rgba(245,240,237,.90);

    font-size:1.3rem;

    line-height:1.8;

    margin-bottom:3rem;

    max-width:650px;

}

.hero-actions{

    display:flex;

    gap:1.25rem;

    flex-wrap:wrap;

}



/*==================================================
    4. SHARED EDITORIAL HEADINGS
====================================================*/

.section-heading{

    max-width:760px;

    margin:0 auto 5rem;

}

.section-line{

    width:80px;

    height:3px;

    background:var(--gold);

    margin-bottom:1.25rem;

}

.section-line.light{

    background:rgba(245,240,237,.85);

}

.eyebrow{

    display:block;

    margin-bottom:1rem;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.22em;

    color:var(--gold);

    text-transform:uppercase;

}

.eyebrow.light{

    color:rgba(245,240,237,.85);

}

.section-heading h2{

    margin-bottom:1.5rem;

}

.section-heading p{

    max-width:650px;

    margin:0;

}



/*==================================================
    5. GLOBAL HOME SPACING
====================================================*/

.hero,

.audience-strip,

.about-preview,

.featured-learning,

.featured-writing,

.home-cta{

    position:relative;

}

.audience-strip,

.about-preview,

.featured-learning,

.featured-writing,

.home-cta{

    padding:7rem 0;

}

/*==================================================
    HOME V2
    PART 2
====================================================*/


/*==================================================
    6. TWO PATHS
====================================================*/

.audience-strip{

    background:var(--cream);

}

.audience-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:2.5rem;

}

.path-card{

    background:var(--white);

    border-radius:28px;

    padding:3.5rem;

    position:relative;

    overflow:hidden;

    transition:all .4s ease;

    box-shadow:var(--shadow-sm);

}

.path-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.path-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:var(--gold);

    transition:.45s ease;

}

.path-card:hover::after{

    width:100%;

}

.card-top{

    margin-bottom:2rem;

}

.path-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.55rem 1rem;

    background:rgba(196,153,76,.10);

    border-radius:999px;

    color:var(--gold);

    font-size:.78rem;

    letter-spacing:.18em;

    font-weight:700;

}

.path-card h3{

    margin-bottom:1.4rem;

    color:var(--burgundy);

}

.path-card p{

    margin-bottom:2rem;

}

.path-list{

    list-style:none;

    padding:0;

    margin:0 0 2rem;

}

.path-list li{

    padding:.8rem 0;

    border-bottom:1px solid rgba(0,0,0,.06);

    color:var(--charcoal);

    position:relative;

    padding-left:1.5rem;

}

.path-list li::before{

    content:"•";

    color:var(--gold);

    position:absolute;

    left:0;

}

.text-link{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    color:var(--burgundy);

    font-weight:600;

    text-decoration:none;

    transition:.3s ease;

}

.text-link span{

    transition:.3s ease;

}

.text-link:hover span{

    transform:translateX(5px);

}



/*==================================================
    7. ABOUT PREVIEW
====================================================*/

.about-preview{

    background:var(--white);

}

.about-preview-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    display:block;

    border-radius:32px;

    box-shadow:var(--shadow-lg);

}

.about-image::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:rgba(196,153,76,.10);

    border-radius:50%;

    top:-50px;

    left:-50px;

    z-index:-1;

}

.about-content{

    max-width:620px;

}

.about-content h2{

    margin:1rem 0 2rem;

}

.about-content .lead{

    margin-bottom:2rem;

}



/*==================================================
    8. FEATURED LEARNING
====================================================*/

.featured-learning{

    background:var(--cream);

}

.learning-grid{

    display:grid;

    grid-template-columns:1fr;

}

.learning-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    background:var(--white);

    overflow:hidden;

    border-radius:30px;

    box-shadow:var(--shadow-md);

    transition:.4s ease;

}

.learning-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.card-image{

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.learning-card:hover .card-image img{

    transform:scale(1.06);

}

.card-content{

    padding:4rem;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.card-label{

    display:inline-block;

    margin-bottom:1rem;

    color:var(--gold);

    letter-spacing:.16em;

    font-size:.78rem;

    font-weight:700;

}

.card-content h3{

    margin-bottom:1.5rem;

}

.card-content p{

    margin-bottom:2rem;

}



/*==================================================
    9. FEATURED WRITING
====================================================*/

.featured-writing{

    background:var(--white);

}

.writing-preview{

    max-width:1100px;

    margin:auto;

}

.writing-card{

    display:grid;

    grid-template-columns:420px 1fr;

    overflow:hidden;

    background:var(--cream);

    border-radius:28px;

    transition:.4s ease;

}

.writing-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.writing-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.writing-card:hover img{

    transform:scale(1.05);

}

.writing-content{

    padding:4rem;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.writing-content span{

    display:block;

    margin-bottom:1rem;

    color:var(--gold);

    letter-spacing:.15em;

    font-weight:700;

    font-size:.8rem;

}

.writing-content h3{

    margin-bottom:1.5rem;

}

.writing-content p{

    margin-bottom:2rem;

}

/*==================================================
    HOME V2
    PART 3
====================================================*/


/*==================================================
    10. FINAL CTA
====================================================*/

.home-cta{

    background:var(--cream);

}

.cta-panel{

    background:linear-gradient(
        135deg,
        var(--burgundy),
        #4b0c12
    );

    border-radius:32px;

    padding:5rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:4rem;

    overflow:hidden;

    position:relative;

    box-shadow:var(--shadow-lg);

}

.cta-panel::before{

    content:"";

    position:absolute;

    right:-180px;

    top:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

}

.cta-panel>*{

    position:relative;

    z-index:2;

}

.cta-panel h2{

    color:var(--cream);

    margin:1rem 0 1.5rem;

}

.cta-panel p{

    color:rgba(245,240,237,.88);

    max-width:620px;

    margin:0;

}

.cta-buttons{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.cta-buttons .btn-primary{

    background:var(--cream);

    color:var(--burgundy);

}

.cta-buttons .btn-primary:hover{

    background:#ffffff;

}

.cta-buttons .btn-secondary{

    border-color:rgba(255,255,255,.35);

    color:var(--cream);

}



/*==================================================
    11. SHARED FOOTER
====================================================*/

.site-footer{

    background:var(--burgundy);

    padding:5rem 0 2rem;

    color:rgba(245,240,237,.85);

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:3rem;

    margin-bottom:3rem;

}

.footer-logo{

    height:100px;

    margin-bottom:1.5rem;

}

.site-footer h4{

    color:var(--cream);

    margin-bottom:1.5rem;

}

.site-footer ul{

    list-style:none;

    margin:0;

    padding:0;

}

.site-footer li{

    margin-bottom:.9rem;

}

.site-footer a{

    color:rgba(245,240,237,.82);

    text-decoration:none;

    transition:.3s ease;

}

.site-footer a:hover{

    color:var(--gold);

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:2rem;

    text-align:center;

    font-size:.92rem;

}



/*==================================================
    12. REVEAL ANIMATIONS
====================================================*/

.section-heading,

.path-card,

.about-image,

.about-content,

.learning-card,

.writing-card,

.cta-panel{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.active{

    opacity:1;

    transform:translateY(0);

}



/*==================================================
    13. PREMIUM HOVER EFFECTS
====================================================*/

.path-card,

.learning-card,

.writing-card{

    will-change:transform;

}

.path-card:hover,

.learning-card:hover,

.writing-card:hover{

    transform:translateY(-10px);

}

.btn-primary,

.btn-secondary,

.text-link{

    transition:

        background .35s ease,

        color .35s ease,

        transform .35s ease,

        box-shadow .35s ease;

}

.btn-primary:hover,

.btn-secondary:hover{

    transform:translateY(-3px);

}

.about-image img,

.card-image img,

.writing-card img{

    transition:

        transform .8s ease;

}



/*==================================================
    14. RESPONSIVE
====================================================*/

@media(max-width:1200px){

.footer-grid{

    grid-template-columns:repeat(2,1fr);

}

.about-preview-grid{

    gap:4rem;

}

}



@media(max-width:992px){

.hero{

    min-height:auto;

    padding:180px 0 120px;

}

.hero-content{

    max-width:100%;

}

.audience-grid,

.about-preview-grid,

.learning-card,

.writing-card{

    grid-template-columns:1fr;

}

.writing-card img{

    height:320px;

}

.card-image{

    min-height:340px;

}

.cta-panel{

    flex-direction:column;

    align-items:flex-start;

}

}



@media(max-width:768px){

.site-header{

    padding:1rem 0;

}

.menu-toggle{

    display:block;

}

.nav-menu{

    position:fixed;

    top:85px;

    right:-100%;

    width:320px;

    height:calc(100vh - 85px);

    background:var(--cream);

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    padding:3rem 2rem;

    transition:.4s ease;

    box-shadow:-12px 0 40px rgba(0,0,0,.08);

}

.nav-menu.active{

    right:0;

}

.nav-menu ul{

    flex-direction:column;

    align-items:flex-start;

    gap:1.5rem;

    width:100%;

}

.nav-cta{

    margin:2rem 0 0;

    width:100%;

}

.nav-cta.btn-primary{

    width:100%;

    justify-content:center;

}

.hero-content h1{

    font-size:3rem;

}

.hero-actions{

    flex-direction:column;

    align-items:flex-start;

}

.hero-actions .btn-primary,

.hero-actions .btn-secondary{

    width:100%;

    justify-content:center;

}

.path-card,

.card-content,

.writing-content{

    padding:2.5rem;

}

.cta-panel{

    padding:3rem 2rem;

}

}



@media(max-width:480px){

.section-heading{

    margin-bottom:3rem;

}

.hero-content h1{

    font-size:2.45rem;

}

.hero-content .lead{

    font-size:1.1rem;

}

.footer-grid{

    grid-template-columns:1fr;

}

.footer-bottom{

    text-align:left;

}

}



/*==================================================
    15. ACCESSIBILITY
====================================================*/

a:focus-visible,

button:focus-visible,

.menu-toggle:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:4px;

}

::selection{

    background:var(--gold);

    color:var(--burgundy);

}

/*==================================================
    16. Extra Addition
====================================================*/
.btn-primary,
.btn-secondary{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    width:14px;

    height:14px;

    background:rgba(255,255,255,.35);

    border-radius:50%;

    transform:translate(-50%,-50%) scale(0);

    animation:ripple .6s ease-out;

    pointer-events:none;

}

@keyframes ripple{

    to{

        transform:translate(-50%,-50%) scale(20);

        opacity:0;

    }

}

/*==================================================
    END HOME V2
====================================================*/