/*==================================================
    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
====================================================*/

/*==================================================
    ABOUT PAGE
====================================================*/


/*==================================================
    63. ABOUT HERO
====================================================*/

.about-hero{

    background:var(--cream);

    padding-top:170px;

    overflow:hidden;

}

.about-hero-grid{

    display:grid;

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

    gap:6rem;

    align-items:center;

}

.about-copy{

    max-width:640px;

}

.about-copy h1{

    margin-bottom:2rem;

}

.about-copy .lead{

    margin-bottom:0;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    display:block;

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

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

}

.about-image::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

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

    top:-60px;

    right:-60px;

    z-index:-1;

}



/*==================================================
    64. WHY MASUTANE
====================================================*/

.why-masutane{

    background:var(--white);

    text-align:center;

}

.why-masutane .narrow{

    max-width:850px;

    margin:auto;

}

.why-masutane h2{

    max-width:720px;

    margin-inline:auto;

}

.why-masutane .lead{

    max-width:680px;

    margin:2rem auto;

}

.why-masutane p{

    max-width:760px;

    margin:1.75rem auto;

}



/*==================================================
    65. OUR PHILOSOPHY
====================================================*/

.our-philosophy{

    background:var(--cream);

}

.philosophy-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.principle{

    background:var(--white);

    padding:3rem;

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

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

    position:relative;

    transition:var(--ease);

    overflow:hidden;

}

.principle:hover{

    transform:translateY(-10px);

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

}

.principle::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:var(--gold);

    transition:.45s ease;

}

.principle:hover::after{

    width:100%;

}

.principle-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    border-radius:50%;

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

    color:var(--gold);

    font-weight:700;

    margin-bottom:2rem;

}

.principle h3{

    margin-bottom:1rem;

}

.principle p{

    margin:0;

}



/*==================================================
    66. FOUNDER STORY
====================================================*/

.founder-story{

    background:var(--white);

}

.founder-layout{

    display:grid;

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

    gap:6rem;

    align-items:center;

}

.founder-image{

    position:relative;

}

.founder-image img{

    width:100%;

    display:block;

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

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

}

.founder-copy{

    max-width:620px;

}

.founder-copy h2{

    margin-bottom:1.5rem;

}

.founder-copy p{

    margin-bottom:1.6rem;

}

.founder-copy p:last-child{

    margin-bottom:0;

}

.founder-image::after{

    content:"";

    position:absolute;

    bottom:-35px;

    left:-35px;

    width:140px;

    height:140px;

    border:2px solid rgba(196,153,76,.25);

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

    z-index:-1;

}



/*==================================================
    67. SHARED ABOUT STYLES
====================================================*/

.about-copy,
.founder-copy{

    position:relative;

}

.about-copy .section-line,
.founder-copy .section-line{

    margin-bottom:1.5rem;

}

.principle,
.founder-layout{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.principle.active,
.founder-layout.active{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
    68. HOW WE THINK
====================================================*/

.how-we-think{

    background:var(--cream);

    overflow:hidden;

}

.thinking-diagram{

    position:relative;

    margin-top:5rem;

    min-height:700px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.centre-circle{

    width:260px;

    height:260px;

    border-radius:50%;

    background:var(--burgundy);

    color:var(--cream);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:2rem;

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

    position:relative;

    z-index:5;

}

.centre-circle h3{

    color:var(--cream);

    font-size:2rem;

    margin-bottom:.75rem;

}

.centre-circle p{

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

    margin:0;

}

.thinking-node{

    position:absolute;

    width:280px;

    background:var(--white);

    padding:2.5rem;

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

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

    text-align:center;

    transition:var(--ease);

}

.thinking-node:hover{

    transform:translateY(-8px);

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

}

.thinking-node h3{

    color:var(--burgundy);

    margin-bottom:1rem;

}

.node-top{

    top:0;

    left:50%;

    transform:translateX(-50%);

}

.node-left{

    left:0;

    top:50%;

    transform:translateY(-50%);

}

.node-right{

    right:0;

    top:50%;

    transform:translateY(-50%);

}

/* Connector Lines */

.node-top::after{

    content:"";

    position:absolute;

    width:2px;

    height:120px;

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

    left:50%;

    bottom:-120px;

}

.node-left::after{

    content:"";

    position:absolute;

    width:120px;

    height:2px;

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

    right:-120px;

    top:50%;

}

.node-right::after{

    content:"";

    position:absolute;

    width:120px;

    height:2px;

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

    left:-120px;

    top:50%;

}



/*==================================================
    69. WHAT WE'VE LEARNED
====================================================*/

.what-we-learned{

    background:var(--white);

}

.lessons-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.lesson{

    background:var(--cream);

    padding:3rem;

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

    position:relative;

    transition:var(--ease);

    overflow:hidden;

}

.lesson:hover{

    transform:translateY(-10px);

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

}

.lesson span{

    display:block;

    color:var(--gold);

    font-weight:700;

    font-size:1rem;

    margin-bottom:1.5rem;

    letter-spacing:.08em;

}

.lesson p{

    color:var(--burgundy);

    font-size:1.25rem;

    line-height:1.8;

    margin:0;

}

.lesson::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:var(--gold);

    transition:.45s;

}

.lesson:hover::after{

    width:100%;

}



/*==================================================
    70. OUR IMPACT
====================================================*/

.our-impact{

    background:var(--cream);

}

.impact-layout{

    display:grid;

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

    gap:6rem;

    align-items:center;

}

.impact-copy{

    max-width:620px;

}

.impact-copy h2{

    margin-bottom:1.5rem;

}

.impact-copy p{

    margin-bottom:1.6rem;

}

.impact-image{

    position:relative;

}

.impact-image img{

    width:100%;

    display:block;

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

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

}

.impact-image::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

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

    top:-45px;

    left:-45px;

    z-index:-1;

}



/*==================================================
    71. VALUES IN ACTION
====================================================*/

.values-action{

    background:var(--white);

}

.values-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.values-grid article{

    background:var(--cream);

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

    padding:3rem;

    transition:var(--ease);

    border-left:4px solid transparent;

}

.values-grid article:hover{

    border-left-color:var(--gold);

    transform:translateX(8px);

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

}

.values-grid h3{

    margin-bottom:1rem;

    color:var(--burgundy);

}

.values-grid p{

    margin:0;

}



/*==================================================
    72. SHARED SECTION POLISH
====================================================*/

.lesson,
.thinking-node,
.impact-layout,
.values-grid article{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.lesson.active,
.thinking-node.active,
.impact-layout.active,
.values-grid article.active{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
    73. ABOUT CTA
====================================================*/

.about-cta{

    background:var(--cream);

}

.about-cta-card{

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

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

    padding:5rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:4rem;

    position:relative;

    overflow:hidden;

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

}

.about-cta-card::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    right:-170px;

    top:-170px;

}

.about-cta-content{

    max-width:650px;

    position:relative;

    z-index:2;

}

.about-cta-content h2{

    color:var(--cream);

    margin-bottom:1.5rem;

}

.about-cta-content p{

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

    margin-bottom:0;

}

.section-line.light{

    background:var(--gold);

}

.eyebrow.light{

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

}

.about-cta-actions{

    display:flex;

    flex-direction:column;

    gap:1rem;

    position:relative;

    z-index:2;

}

.about-cta-actions .btn-primary{

    background:var(--cream);

    color:var(--burgundy);

}

.about-cta-actions .btn-primary:hover{

    background:#fff;

}

.about-cta-actions .btn-secondary{

    border-color:rgba(245,240,237,.35);

    color:var(--cream);

}

.about-cta-actions .btn-secondary:hover{

    border-color:var(--gold);

}



/*==================================================
    74. ABOUT ANIMATIONS
====================================================*/

.about-copy,
.about-image,
.principle,
.founder-layout,
.thinking-node,
.lesson,
.impact-layout,
.values-grid article,
.about-cta-card{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.about-copy.active,
.about-image.active,
.principle.active,
.founder-layout.active,
.thinking-node.active,
.lesson.active,
.impact-layout.active,
.values-grid article.active,
.about-cta-card.active{

    opacity:1;

    transform:translateY(0);

}



/*==================================================
    75. RESPONSIVE
====================================================*/

@media(max-width:1100px){

.about-hero-grid{

    grid-template-columns:1fr;

    gap:4rem;

}

.founder-layout{

    grid-template-columns:1fr;

}

.impact-layout{

    grid-template-columns:1fr;

}

.philosophy-grid{

    grid-template-columns:1fr;

}

.lessons-grid{

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

}

.values-grid{

    grid-template-columns:1fr;

}

.about-cta-card{

    flex-direction:column;

    align-items:flex-start;

}

.thinking-diagram{

    min-height:auto;

    display:flex;

    flex-direction:column;

    gap:2.5rem;

}

.thinking-node{

    position:relative;

    width:100%;

    max-width:500px;

    left:auto;

    right:auto;

    top:auto;

    transform:none !important;

}

.node-top::after,
.node-left::after,
.node-right::after{

    display:none;

}

}



@media(max-width:768px){

.about-hero{

    padding-top:140px;

}

.lessons-grid{

    grid-template-columns:1fr;

}

.about-cta-card{

    padding:3rem 2rem;

}

.about-cta-actions{

    width:100%;

}

.about-cta-actions .btn-primary,
.about-cta-actions .btn-secondary{

    width:100%;

    justify-content:center;

}

.centre-circle{

    width:220px;

    height:220px;

}

.centre-circle h3{

    font-size:1.7rem;

}

.thinking-node{

    padding:2rem;

}

.principle,
.lesson,
.values-grid article{

    padding:2.25rem;

}

}



@media(max-width:480px){

.about-copy h1{

    font-size:2.6rem;

}

.about-copy .lead{

    font-size:1.15rem;

}

.why-masutane p{

    text-align:left;

}

.lesson p{

    font-size:1.1rem;

}

.centre-circle{

    width:190px;

    height:190px;

    padding:1.5rem;

}

.centre-circle h3{

    font-size:1.5rem;

}

}



/*==================================================
    76. ACCESSIBILITY & POLISH
====================================================*/

.principle:focus-within,
.lesson:focus-within,
.values-grid article:focus-within,
.about-cta-card a:focus-visible{

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

    outline-offset:5px;

}

.about-image img,
.founder-image img,
.impact-image img{

    transition:transform .8s ease;

}

.about-image:hover img,
.founder-image:hover img,
.impact-image:hover img{

    transform:scale(1.02);

}

.principle::before,
.lesson::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid transparent;

    transition:.35s ease;

}

.principle:hover::before,
.lesson:hover::before{

    border-color:rgba(196,153,76,.18);

}



/*==================================================
    END ABOUT PAGE
====================================================*/

/*==================================================
    CONTACT PAGE
====================================================*/


/*==================================================
    77. CONTACT HERO
====================================================*/

.contact-hero{

    background:var(--cream);

    padding-top:170px;

    overflow:hidden;

}

.contact-hero-grid{

    display:grid;

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

    gap:6rem;

    align-items:center;

}

.contact-copy{

    max-width:650px;

}

.contact-copy h1{

    margin-bottom:2rem;

}

.contact-copy .lead{

    margin-bottom:0;

}

.contact-image{

    position:relative;

}

.contact-image img{

    width:100%;

    display:block;

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

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

}

.contact-image::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

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

    top:-50px;

    right:-50px;

    z-index:-1;

}



/*==================================================
    78. CHOOSE YOUR CONVERSATION
====================================================*/

.conversation-types{

    background:var(--white);

}

.conversation-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.conversation-card{

    background:var(--cream);

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

    padding:3rem;

    cursor:pointer;

    position:relative;

    transition:var(--ease);

    border:1px solid transparent;

    overflow:hidden;

}

.conversation-card:hover{

    transform:translateY(-8px);

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

    border-color:rgba(196,153,76,.35);

}

.conversation-card.active{

    background:var(--white);

    border-color:var(--gold);

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

}

.conversation-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:var(--gold);

    transition:.45s ease;

}

.conversation-card:hover::after,

.conversation-card.active::after{

    width:100%;

}

.conversation-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    border-radius:50%;

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

    color:var(--gold);

    font-weight:700;

    margin-bottom:1.75rem;

}

.conversation-card h3{

    color:var(--burgundy);

    margin-bottom:1rem;

}

.conversation-card p{

    margin:0;

}



/*==================================================
    79. CONTACT FORM
====================================================*/

.contact-form-section{

    background:var(--cream);

}

.contact-layout{

    display:grid;

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

    gap:5rem;

    align-items:start;

}

.contact-form-copy{

    max-width:500px;

    position:sticky;

    top:140px;

}

.contact-form{

    background:var(--white);

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

    padding:3.5rem;

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

}

.form-row{

    display:grid;

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

    gap:1.5rem;

    margin-bottom:1.75rem;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    color:var(--burgundy);

    font-weight:600;

    margin-bottom:.75rem;

    font-size:.95rem;

}

.form-group small{

    color:#888;

    font-weight:400;

}

.form-group input,

.form-group textarea{

    width:100%;

    background:var(--cream);

    border:1px solid transparent;

    border-radius:14px;

    padding:1rem 1.25rem;

    font-size:1rem;

    color:var(--charcoal);

    transition:var(--ease);

    font-family:inherit;

}

.form-group textarea{

    resize:vertical;

    min-height:180px;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#999;

}

.form-group input:focus,

.form-group textarea:focus{

    outline:none;

    border-color:var(--gold);

    background:var(--white);

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

}

.contact-form .btn-primary{

    margin-top:2rem;

    width:100%;

    justify-content:center;

}



/*==================================================
    80. CONTACT SHARED STYLES
====================================================*/

.contact-copy,
.contact-image,
.conversation-card,
.contact-form{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.contact-copy.active,
.contact-image.active,
.conversation-card.active,
.contact-form.active{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
    81. WHAT HAPPENS NEXT
====================================================*/

.what-happens-next{

    background:var(--white);

}

.process-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

    position:relative;

}

.process-step{

    background:var(--cream);

    padding:3rem 2.5rem;

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

    position:relative;

    transition:var(--ease);

    overflow:hidden;

}

.process-step:hover{

    transform:translateY(-10px);

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

}

.process-step::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:var(--gold);

    transition:.45s ease;

}

.process-step:hover::after{

    width:100%;

}

.process-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    border-radius:50%;

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

    color:var(--gold);

    font-weight:700;

    margin-bottom:2rem;

}

.process-step h3{

    margin-bottom:1rem;

    color:var(--burgundy);

}

.process-step p{

    margin:0;

}



/*==================================================
    82. CONTACT DETAILS
====================================================*/

.contact-details{

    background:var(--cream);

}

.contact-cards{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.contact-card{

    background:var(--white);

    padding:3rem;

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

    text-align:center;

    transition:var(--ease);

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

}

.contact-card:hover{

    transform:translateY(-8px);

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

}

.contact-icon{

    width:72px;

    height:72px;

    margin:0 auto 2rem;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.5rem;

    color:var(--gold);

}

.contact-card h3{

    color:var(--burgundy);

    margin-bottom:1rem;

}

.contact-card p{

    margin-bottom:1.5rem;

}

.contact-card span{

    display:block;

    color:#666;

    font-size:.95rem;

}

.contact-card a{

    color:var(--burgundy);

    font-weight:600;

    text-decoration:none;

    transition:.3s ease;

}

.contact-card a:hover{

    color:var(--gold);

}



/*==================================================
    83. FAQ
====================================================*/

.contact-faq{

    background:var(--white);

}

.contact-faq .narrow{

    max-width:850px;

    margin:auto;

}

.faq-list{

    margin-top:4rem;

}

.faq-item{

    background:var(--cream);

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

    margin-bottom:1.25rem;

    overflow:hidden;

    transition:var(--ease);

}

.faq-item[open]{

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

}

.faq-item summary{

    list-style:none;

    cursor:pointer;

    padding:1.75rem 2rem;

    font-weight:600;

    color:var(--burgundy);

    position:relative;

    transition:.3s ease;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary::after{

    content:"+";

    position:absolute;

    right:2rem;

    top:50%;

    transform:translateY(-50%);

    color:var(--gold);

    font-size:1.5rem;

    transition:.3s ease;

}

.faq-item[open] summary::after{

    content:"−";

}

.faq-item p{

    padding:0 2rem 2rem;

    margin:0;

    color:var(--charcoal);

    line-height:1.8;

}



/*==================================================
    84. CONTACT SECTION ANIMATIONS
====================================================*/

.process-step,
.contact-card,
.faq-item{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.process-step.active,
.contact-card.active,
.faq-item.active{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
    85. CONTACT CTA
====================================================*/

.contact-cta{

    background:var(--cream);

}

.contact-cta-card{

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

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

    padding:5rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:4rem;

    position:relative;

    overflow:hidden;

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

}

.contact-cta-card::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    right:-170px;

    top:-170px;

}

.contact-cta-content{

    max-width:650px;

    position:relative;

    z-index:2;

}

.contact-cta-content h2{

    color:var(--cream);

    margin-bottom:1.5rem;

}

.contact-cta-content p{

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

    margin-bottom:0;

}

.contact-cta-actions{

    display:flex;

    flex-direction:column;

    gap:1rem;

    position:relative;

    z-index:2;

}

.contact-cta-actions .btn-primary{

    background:var(--cream);

    color:var(--burgundy);

}

.contact-cta-actions .btn-primary:hover{

    background:#fff;

}

.contact-cta-actions .btn-secondary{

    color:var(--cream);

    border-color:rgba(245,240,237,.35);

}

.contact-cta-actions .btn-secondary:hover{

    border-color:var(--gold);

}



/*==================================================
    86. CONTACT ANIMATIONS
====================================================*/

.contact-cta-card{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.contact-cta-card.active{

    opacity:1;

    transform:translateY(0);

}

.contact-image img,

.contact-card,

.conversation-card,

.process-step{

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

.contact-image:hover img{

    transform:scale(1.03);

}



/*==================================================
    87. RESPONSIVE
====================================================*/

@media(max-width:1200px){

.contact-layout{

    grid-template-columns:1fr;

    gap:4rem;

}

.contact-form-copy{

    position:relative;

    top:auto;

    max-width:100%;

}

.process-grid{

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

}

.contact-cards{

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

}

}



@media(max-width:900px){

.contact-hero-grid{

    grid-template-columns:1fr;

    gap:4rem;

}

.conversation-grid{

    grid-template-columns:1fr;

}

.form-row{

    grid-template-columns:1fr;

}

.contact-cta-card{

    flex-direction:column;

    align-items:flex-start;

}

}



@media(max-width:768px){

.contact-hero{

    padding-top:140px;

}

.process-grid{

    grid-template-columns:1fr;

}

.contact-cards{

    grid-template-columns:1fr;

}

.contact-form{

    padding:2.5rem;

}

.contact-cta-card{

    padding:3rem 2rem;

}

.contact-cta-actions{

    width:100%;

}

.contact-cta-actions .btn-primary,

.contact-cta-actions .btn-secondary{

    width:100%;

    justify-content:center;

}

}



@media(max-width:480px){

.contact-copy h1{

    font-size:2.6rem;

}

.contact-copy .lead{

    font-size:1.15rem;

}

.conversation-card,

.process-step,

.contact-card{

    padding:2rem;

}

.contact-form{

    padding:2rem 1.5rem;

}

.faq-item summary{

    padding:1.5rem;

    padding-right:3.5rem;

}

.faq-item p{

    padding:0 1.5rem 1.5rem;

}

}



/*==================================================
    88. ACCESSIBILITY
====================================================*/

.contact-form input:focus-visible,

.contact-form textarea:focus-visible,

.conversation-card:focus-visible,

.contact-card a:focus-visible,

.faq-item summary:focus-visible,

.contact-cta-card a:focus-visible{

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

    outline-offset:4px;

}

.conversation-card,

.process-step,

.contact-card{

    position:relative;

}

.conversation-card::before,

.process-step::before,

.contact-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid transparent;

    transition:.35s ease;

}

.conversation-card:hover::before,

.process-step:hover::before,

.contact-card:hover::before{

    border-color:rgba(196,153,76,.20);

}



/*==================================================
    89. FORM SUCCESS & ERROR STATES
====================================================*/

.form-group.success input,

.form-group.success textarea{

    border-color:var(--moss);

    box-shadow:0 0 0 4px rgba(74,103,65,.08);

}

.form-group.error input,

.form-group.error textarea{

    border-color:var(--terracotta);

    box-shadow:0 0 0 4px rgba(200,74,44,.08);

}

.form-message{

    display:none;

    margin-top:1.5rem;

    padding:1rem 1.5rem;

    border-radius:12px;

    font-size:.95rem;

}

.form-message.success{

    display:block;

    background:rgba(74,103,65,.08);

    color:var(--moss);

}

.form-message.error{

    display:block;

    background:rgba(200,74,44,.08);

    color:var(--terracotta);

}



/*==================================================
    END CONTACT PAGE
====================================================*/