/* =========================================================
   MARK ROBERTS MAGICIAN
   ABOUT PAGE CSS
   Scoped Version
   No conflicts with global style.css
========================================================= */


/* =========================================================
   ABOUT HERO
========================================================= */


.mr-about-hero {

    position:relative;
    min-height:900px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#050505;

}



.mr-about-hero-image {

    position:absolute;
    inset:0;

}



.mr-about-hero-image img {

    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;

}




.mr-about-hero-overlay {


    position:absolute;
    inset:0;


    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.75) 45%,
        rgba(0,0,0,.35) 100%
    );


}



.mr-about-hero-content {


    position:relative;
    z-index:3;

    max-width:760px;

    color:#fff;


}



.mr-about-hero-content h1 {


    margin:25px 0;


    font-family:var(--font-display);


    font-size:
    clamp(3rem,6vw,5.8rem);


    line-height:1.05;


    letter-spacing:.02em;


}



.mr-about-hero-content h1 span {


    color:var(--red);


}



.mr-about-hero-content p {


    max-width:620px;


    font-size:1.25rem;


    line-height:1.8;


    color:#ddd;


}






/* =========================================================
   INTRODUCTION SECTION
========================================================= */


.mr-about-intro-grid {


    display:grid;


    grid-template-columns:
    minmax(300px,450px)
    1fr;


    gap:90px;


    align-items:center;


}






/* IMAGE */


.mr-about-image {


    position:relative;


}



.mr-about-image > img {
    display:block;
    width:100%;
height:auto;
    filter:

    grayscale(15%)

    contrast(110%);


}

.mr-about-image::before {


    content:"";


    position:absolute;


    inset:20px;


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


    pointer-events:none;


    z-index:2;


}





/* MONOGRAM */


.mr-about-mark {


	position:absolute;
	right:-45px;
	bottom:-45px;
	width:140px;
	 height:140px;
	 padding:8px;
	  background:#050505;
	 border-radius:50%;
	 box-shadow: 0 25px 60px rgba(0,0,0,.65);
	 z-index:5;


}



.mr-about-mark img {
	width:100%;
	height:100%;
 	display:block;
	border-radius:50%;

}

/* CONTENT */


.mr-about-content {
max-width:650px;

}

.mr-about-content h2 {


    font-family:var(--font-display);
 font-size:
 clamp(2rem,4vw,3.5rem);
line-height:1.2;
 margin-bottom:35px;


}





.mr-about-content p {


    font-size:1.1rem;


    line-height:1.9;


    color:#444;


    margin-bottom:25px;


}






/* =========================================================
   JOURNEY SECTION
========================================================= */


.mr-about-journey {


    background:#080808;


    color:white;


}



.mr-about-story-grid {


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:80px;


    align-items:center;


}




.mr-about-story-content h2 {


    font-family:var(--font-display);


    font-size:

    clamp(2rem,4vw,3.5rem);


    line-height:1.2;


}




.mr-about-story-content p {


    color:#ccc;


    font-size:1.1rem;


    line-height:1.9;


    margin-bottom:25px;


}



.mr-about-story-image img {


    width:100%;


    display:block;


}





/* =========================================================
   PHILOSOPHY
========================================================= */


.mr-about-philosophy {


    background:

    linear-gradient(
    135deg,
    #111,
    #050505
    );


    color:white;


    text-align:center;


    padding:120px 20px;


}




.mr-about-philosophy-content {


    max-width:900px;


    margin:auto;


}



.mr-about-philosophy h2 {


    font-family:var(--font-display);


    font-size:

    clamp(2rem,4vw,3.8rem);


}



.mr-about-philosophy p {


    color:#ccc;


    font-size:1.2rem;


    line-height:1.9;


    margin:30px auto;


}



.mr-about-philosophy blockquote {


    margin:50px auto 0;


    font-family:var(--font-display);


    font-size:2rem;


    line-height:1.5;


    color:white;


}






/* =========================================================
   PILLARS
========================================================= */


.mr-about-pillar-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}




.mr-about-pillar-card {


    padding:45px 35px;


    background:


    linear-gradient(
        145deg,
        #171717,
        #090909
    );


    border:

    1px solid rgba(255,255,255,.08);


}



.mr-about-pillar-card span {


    color:var(--red);


    font-family:var(--font-display);


    font-size:2rem;


}



.mr-about-pillar-card h3 {


    color:white;


    font-family:var(--font-display);


    font-size:1.8rem;


    margin:20px 0;


}



.mr-about-pillar-card p {


    color:#bbb;


    line-height:1.8;


}






/* =========================================================
   PERFORMANCE FEATURE
========================================================= */


.mr-about-feature {


    position:relative;


    min-height:700px;


    display:flex;


    align-items:center;


    overflow:hidden;


}




.mr-about-feature-image {


    position:absolute;


    inset:0;


}



.mr-about-feature-image img {


    width:100%;


    height:100%;


    object-fit:cover;


}





.mr-about-feature-overlay {


    position:absolute;


    inset:0;


    background:


    linear-gradient(
    90deg,
    rgba(0,0,0,.9),
    rgba(0,0,0,.4)
    );


}



.mr-about-feature-content {


    position:relative;


    z-index:2;


    max-width:650px;


    color:white;


}



.mr-about-feature-content h2 {


    font-family:var(--font-display);


    font-size:

    clamp(2rem,5vw,4rem);


}






/* =========================================================
   WHY CHOOSE MARK
========================================================= */


.mr-about-choice {


    background:#090909;


    color:white;


}



.mr-about-choice-grid {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}




.mr-about-choice-item {


    padding:35px;


    border:

    1px solid rgba(255,255,255,.1);


}



.mr-about-choice-item strong {


    display:block;


    color:var(--red);


    font-size:2rem;


    font-family:var(--font-display);


}



.mr-about-choice-item h3 {


    font-family:var(--font-display);


    margin:20px 0;


}



.mr-about-choice-item p {


    color:#bbb;


    line-height:1.8;


}






/* =========================================================
   STATS
========================================================= */


.mr-about-stats-grid {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:30px;


    text-align:center;


}



.mr-about-stat strong {


    display:block;


    font-family:var(--font-display);


    font-size:3rem;


    color:var(--red);


}



.mr-about-stat span {


    color:#555;


}






/* =========================================================
   FINAL CTA
========================================================= */


.mr-about-cta {


    position:relative;


    padding:120px 20px;


    background:

    url("/assets/images/about/mark-roberts-about-hero.webp")

    center/cover;


    color:white;


}



.mr-about-cta-overlay {


    position:absolute;


    inset:0;


    background:

    rgba(0,0,0,.8);


}



.mr-about-cta-content {


    position:relative;


    z-index:2;


    max-width:800px;


}



.mr-about-cta h2 {


    font-family:var(--font-display);


    font-size:

    clamp(2.5rem,5vw,4rem);


}





/* =========================================================
   REVEAL ANIMATION
========================================================= */


.reveal {


    opacity:0;


    transform:translateY(30px);


    transition:

    opacity .8s ease,

    transform .8s ease;


}



.reveal.visible {


    opacity:1;


    transform:none;


}





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


@media(max-width:1100px){


.mr-about-choice-grid {


    grid-template-columns:

    repeat(2,1fr);


}



.mr-about-pillar-grid {


    grid-template-columns:1fr;


}



}



@media(max-width:900px){


.mr-about-hero {


    min-height:700px;


}



.mr-about-intro-grid,


.mr-about-story-grid {


    grid-template-columns:1fr;


    gap:50px;


}




.mr-about-mark {
    width:100px;
    height:100px;
    right:20px;
    bottom:-30px;


}



.mr-about-stats-grid {


    grid-template-columns:

    repeat(2,1fr);


}



}



@media(max-width:600px){



.mr-about-stats-grid,


.mr-about-choice-grid {


    grid-template-columns:1fr;


}



.mr-about-hero-content h1 {


    font-size:2.8rem;


}



}