/*=========================================================
ROSE ACCENTS

.eyebrow-rose and .btn-rose now live in common.css - both are used
by the Designers and Style Report pages too (.btn-rose previously
lived only here, so those two pages' buttons rendered unstyled).
=========================================================*/

/*=========================================================
FOUNDER HERO
=========================================================*/

.founder-hero{

    padding:0;

    background:var(--rose-tint);

}

.founder-hero-inner{

    display:grid;

    grid-template-columns:1fr 1.3fr;

    align-items:center;

    min-height:610px;

}

/* Text panel padding, paragraph type and image sizing come from the
   shared split-hero rules in common.css. */
.founder-hero-text h1{

    margin-top:16px;

}

.founder-hero-image{

    position:relative;

    height:100%;

    min-height:610px;

}

/* Fade shape/colour are shared - this hero's own fade width. */
.founder-hero-image::before{

    width:150px;

}

/*=========================================================
WHY I STARTED
=========================================================*/

.founder-why{

    padding:60px 0;

}

.founder-why .section-heading{

    text-align:center;

    margin-bottom:45px;

}

.founder-why .section-heading h2{

    font-size:38px;

    margin-bottom:10px;

}

.founder-why .section-divider,
.founder-journey .section-divider{

    margin:0 auto;

}

.founder-why-grid{

    display:grid;

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

}











/*=========================================================
WHAT DRIVES ME
=========================================================*/

.founder-drives{

    padding:20px 0 60px;

}

.founder-drives-band{

    display:grid;

    grid-template-columns:1fr 1.25fr;

    align-items:center;

    background:var(--rose-tint);

}

.founder-drives-text{

    padding:46px 40px;

}

.founder-drives-text h2{

    font-size:34px;

    line-height:1.25;

    margin-bottom:8px;

}

.founder-drives-text p{

    font-size:13px;

    line-height:1.85;

    margin-bottom:14px;

}

.founder-drives-text p:last-child{

    margin-bottom:0;

}

.founder-drives-image{

    position:relative;

    height:100%;

}

.founder-drives-image img{

    width:100%;

    height:100%;

    min-height:400px;

    object-fit:cover;

}

/* Fade shape/colour are shared with the split-hero fades in
   common.css - this band's own fade width. */
.founder-drives-image::before{

    width:110px;

}

/*=========================================================
THE JOURNEY SO FAR
=========================================================*/

.founder-journey{

    padding:40px 0 65px;

}

.founder-journey .section-heading{

    text-align:center;

    margin-bottom:40px;

}

.founder-journey .section-heading h2{

    font-size:38px;

    margin-bottom:10px;

}

.journey-track{

    position:relative;

    display:grid;

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

    gap:20px;

    padding-top:34px;

}

/* Connecting rule behind the dots */
.journey-track::before{

    content:"";

    position:absolute;

    top:5px;

    left:10%;

    right:10%;

    height:1px;

    background:var(--border);

}

.journey-step{

    position:relative;

    text-align:center;

    padding:0 14px;

}

.journey-dot{

    position:absolute;

    top:-33px;

    left:50%;

    transform:translateX(-50%);

    width:11px;

    height:11px;

    border-radius:50%;

    background:#c07f7d;

}







/*=========================================================
MY PROMISE + QUOTE
=========================================================*/

.founder-promise{

    padding:20px 0 60px;

}

.founder-promise-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.founder-promise-list h2,
.founder-belief h2{

    font-size:36px;

    margin-bottom:8px;

}

.founder-promise-list ul{

    margin-top:30px;

}

.founder-promise-list li{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:22px;

}

.promise-badge{

    flex-shrink:0;

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--rose-tint);

    display:flex;

    align-items:center;

    justify-content:center;

}

.promise-badge img{

    width:22px;

    height:22px;

}

.promise-content{

    display:flex;

    flex-direction:column;

    gap:4px;

    padding-top:8px;

}

.promise-title{

    display:block;

    font-size:15px;

    font-weight:600;

    color:var(--text);

}

.promise-text{

    display:block;

    font-size:13px;

    line-height:1.6;

    color:var(--text-light);

}

.founder-belief{

    background:var(--rose-tint);

    padding:38px 44px 44px;

    margin:0;

}

.founder-belief .section-divider{

    margin-bottom:24px;

}

.founder-belief p{

    font-size:13.5px;

    line-height:1.8;

    margin-bottom:18px;

}

.founder-belief p:last-child{

    margin-bottom:0;

}

/*=========================================================
COME SAY HELLO
=========================================================*/

.founder-hello{

    padding:0 0 70px;

}

/* Band shape, image sizing, text padding and type come from the
   shared .cta-band family in common.css - only the grid ratio and
   image height are this band's own (a three-panel layout: photo,
   personal note, illustrated sign-off - unlike Designers/Style
   Report's plain two-panel band). Because this overrides the shared
   ratio, its 992px collapse to one column must live here too, in the
   RESPONSIVE block below - common.css's own collapse rule cannot win
   a specificity tie against this unconditional rule, since this
   stylesheet always loads after common.css regardless of viewport. */
.founder-hello-band{

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

}

.founder-hello-image img{

    height:420px;

}

.founder-hello-text{

    padding:28px 34px;

}

.founder-hello-heading{

    font-size:36px;

    color:var(--rose-deep);

}

.founder-hello-text p{

    font-size:17px;

    line-height:1.7;

}

.founder-hello-divider{

    display:flex;

    align-items:center;

    gap:10px;

    max-width:220px;

    margin:18px 0 0;

}

.founder-hello-divider-line{

    flex:1;

    height:1px;

    background:var(--primary);

}

.founder-hello-divider-dot{

    flex-shrink:0;

    width:8px;

    height:8px;

    background:var(--primary);

    transform:rotate(45deg);

}

.founder-hello-signature{

    font-family:"Caveat",cursive;

    font-weight:700;

    font-size:36px;

    color:var(--rose-deep);

    margin-top:6px;

}

.founder-hello-visual{

    position:relative;

    height:420px;

    overflow:hidden;

}

.founder-hello-sketch{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    pointer-events:none;

}

.founder-hello-cta{

    position:absolute;

    left:16px;

    bottom:24px;

    margin-top:0;

}

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

@media(max-width:1200px){

.founder-why-grid{

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

    gap:34px 0;

}

.founder-why-item:nth-child(2){

    border-right:none;

}

.journey-track{

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

    gap:36px 20px;

}

.journey-track::before{

    display:none;

}

.journey-dot{

    display:none;

}

}

@media(max-width:992px){

.founder-hero-inner,
.founder-drives-band,
.founder-promise-grid,
.founder-hello-band{

    grid-template-columns:1fr;

    gap:0;

}

.founder-hero-image{

    min-height:380px;

    order:-1;

}

/* .founder-hero-image::before disable is shared in common.css.
   founder-drives-image is not part of that shared set (it's the only
   page using this fade outside a hero), so its own disable stays
   local. */
.founder-drives-image::before{

    display:none;

}

.founder-drives-image img{

    min-height:300px;

}

.founder-promise-grid{

    gap:44px;

}

.founder-hello-image img{

    height:320px;

}

.founder-hello-text{

    padding:0 24px 30px;

}

.founder-hello-divider{

    margin:14px auto 16px;

}

.founder-hello-visual{

    height:280px;

}

.founder-hello-cta{

    left:50%;

    transform:translateX(-50%);

}

}

@media(max-width:768px){

.founder-why-grid{

    grid-template-columns:1fr;

    gap:34px;

}



.journey-track{

    grid-template-columns:1fr;

    gap:32px;

}

.founder-belief{

    padding:30px 26px 34px;

}

.founder-belief h2{

    padding:0;

}

.founder-drives-text,
.founder-promise-list h2{

    padding:0;

}

.founder-drives-text{

    padding:34px 22px;

}


.founder-why-item{
    border-right:none;
    padding:0;
}

}