/* =========================================================
   THE INNER SHIFT — ABOUT / MY STORY
   Clean editorial version
   - No decorative text over images
   - No unnecessary micro-labels / rails
   - No decorative section lines
   - Large readable type
   - Hover + scroll animation
   ========================================================= */

.tis-about,
.tis-about * { box-sizing:border-box; }

.tis-about {
    --ink:#171513;
    --muted:#625b53;
    --cream:#f6f2eb;
    --paper:#eee8de;
    --dark:#191714;
    --dark-2:#24201b;
    --gold:#b9832d;
    --gold-soft:#d5ad69;
    --white:#faf8f3;
    color:var(--ink);
    background:var(--cream);
    overflow:clip;
}

.about-container {
    width:min(1180px, calc(100% - 72px));
    margin:0 auto;
}

/* HERO */
/* =========================================================
   THE INNER SHIFT
   HERO — MEET KRITIMA
   ========================================================= */

/* =========================================================
   01 — MEET KRITIMA / HERO
   ========================================================= */

.about-hero {
    position: relative;

    padding: 166px 0 40px;

    background: #f7f4ee;

    overflow: hidden;
}


/* =========================================================
   SUBTLE BACKGROUND DETAIL
   ========================================================= */

.about-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

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

    border: 1px solid rgba(185, 131, 45, .07);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   HERO GRID
   ========================================================= */

.hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(390px, .82fr);

    align-items: center;

    gap: clamp(65px, 8vw, 115px);
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.hero-copy {
    position: relative;

    max-width: 650px;
}


/* =========================================================
   TOP LABEL
   ========================================================= */

.hero-intro-label {
    display: block;

    margin-bottom: 30px;

    padding-left: 18px;

    position: relative;

    color: #82796e;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: .21em;

    text-transform: uppercase;
}


/* tiny gold mark */

.hero-intro-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 7px;
    height: 1px;

    background: #b9832d;

    transform: translateY(-50%);
}


/* =========================================================
   NAME BLOCK
   ========================================================= */

.hero-name-block {
    margin-bottom: 24px;
}


/* =========================================================
   MEET
   ========================================================= */

.hero-meet {
    display: block;

    margin-bottom: 8px;

    color: var(--ink);

   

    font-size: clamp(30px, 3vw, 40px);

    font-weight: 500;

    font-style: italic;

    line-height: .9;

    letter-spacing: -.025em;
}


/* =========================================================
   NAME
   ========================================================= */

.hero-copy h1 {
    display: flex;

    flex-direction: column;

    margin: 0;

    color: var(--gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(72px, 7vw, 98px);

    font-weight: 400;

    line-height: .9;

    letter-spacing: -.02em;
}


/* second name line */

.hero-copy h1 span {
    display: block;

    margin-left: 48px;

    color: var(--gold);
}


/* =========================================================
   ROLE
   ========================================================= */

.hero-role {
    max-width: 560px;

    margin: 0;

    color: #9a7440;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.6;

    letter-spacing: .015em;
}


/* =========================================================
   INTRO
   ========================================================= */

.hero-intro {
    max-width: 500px;

    margin: 17px 0 0;

    color: #625b53;

    font-family: "DM Sans", sans-serif;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.75;
}


/* =========================================================
   HERO BUTTON
   ========================================================= */

.tis-hero-button {
    margin-top: 30px;
}


/* =========================================================
   HERO IMAGE WRAPPER
   ========================================================= */

.hero-photo-wrap {
    position: relative;

    width: min(100%, 455px);

    justify-self: end;

    padding:
        0
        18px
        18px
        0;
}


/* =========================================================
   IMAGE BACKING
   ========================================================= */

.hero-photo-back {
    position: absolute;

    top: 18px;
    left: 18px;

    width: calc(100% - 18px);
    height: calc(100% - 18px);

    background: #dfcfb7;

    /*
       IMPORTANT:
       only top-right rounded
    */

    border-radius:
        0
        48px
        0
        0;

    z-index: 0;

    transition:
        transform .7s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.hero-photo {
    position: relative;

    z-index: 2;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #ddd5ca;

    /*
       ONLY TOP-RIGHT CORNER
    */

    border-radius:
        0
        42px
        0
        0;

    box-shadow:
        0 25px 60px rgba(40,30,20,.13);
}


/* =========================================================
   IMAGE
   ========================================================= */

.hero-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 25%;

    transform: scale(1.01);

    transition:
        transform 1s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   INNER FRAME
   ========================================================= */

.hero-photo-border {
    position: absolute;

    z-index: 4;

    top: 12px;
    right: 30px;
    bottom: 30px;
    left: 12px;

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

    /*
       only top-right rounded
    */

    border-radius:
        0
        31px
        0
        0;

    pointer-events: none;
}


/* =========================================================
   GOLD TOP-RIGHT CORNER
   ========================================================= */

.hero-photo::before {
    content: "";

    position: absolute;

    z-index: 5;

    top: 0;
    right: 0;

    width: 72px;
    height: 72px;

    border-top: 2px solid #b9832d;
    border-right: 2px solid #b9832d;

    border-radius:
        0
        42px
        0
        0;

    pointer-events: none;
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.hero-photo-wrap:hover .hero-photo img {
    transform: scale(1.045);
}


.hero-photo-wrap:hover .hero-photo-back {
    transform: translate(6px, 6px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .about-hero {
        padding: 110px 0 95px;
    }


    .hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, .82fr);

        gap: 55px;
    }


    .hero-copy h1 {
        font-size: clamp(62px, 7vw, 82px);
    }


    .hero-copy h1 span {
        margin-left: 38px;
    }


    .hero-meet {
        font-size: 34px;
    }


    .hero-photo-wrap {
        width: min(100%, 400px);
    }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 800px) {

    .about-hero {
        padding: 85px 0 85px;
    }


    .hero-grid {
        grid-template-columns: 1fr;
padding-top: 45px;
        gap: 55px;
    }


    .hero-copy {
        max-width: 680px;
    }


    .hero-copy h1 {
        font-size: clamp(65px, 11vw, 82px);
    }


    .hero-meet {
        font-size: 35px;
    }


    .hero-photo-wrap {
        width: min(100%, 430px);

        justify-self: start;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .about-hero {
        padding: 68px 0 72px;
    }


    .hero-grid {
        gap: 45px;
    }


    .hero-copy {
        max-width: 100%;
    }


    /* label */

    .hero-intro-label {
        margin-bottom: 23px;

        padding-left: 14px;

        font-size: 7.5px;

        letter-spacing: .15em;
    }


    .hero-intro-label::before {
        width: 6px;
    }


    /* meet */

    .hero-meet {
        margin-bottom: 7px;

        font-size: 28px;
    }


    /* name */

    .hero-name-block {
        margin-bottom: 19px;
    }


    .hero-copy h1 {
        font-size: clamp(50px, 14vw, 62px);

        line-height: .87;
    }


    .hero-copy h1 span {
        margin-left: 30px;
    }


    /* role */

    .hero-role {
        max-width: 340px;

        font-size: 10px;

        line-height: 1.55;
    }


    /* intro */

    .hero-intro {
        max-width: 400px;

        margin-top: 14px;

        font-size: 13px;

        line-height: 1.7;
    }


    /* button */

    .tis-hero-button {
        margin-top: 25px;
    }


    .tis-btn-primary {
        padding:
            6px
            7px
            6px
            17px;

        font-size: 8px;
    }


    .tis-btn-primary i {
        width: 31px;
        height: 31px;

        font-size: 13px;
    }


    /* image */

    .hero-photo-wrap {
        width: min(100%, 350px);

        margin: 0 auto;

        padding:
            0
            14px
            14px
            0;
    }


    .hero-photo-back {
        top: 14px;
        left: 14px;

        border-radius:
            0
            34px
            0
            0;
    }


    .hero-photo {
        border-radius:
            0
            30px
            0
            0;
    }


    .hero-photo-border {
        top: 9px;
        right: 23px;
        bottom: 23px;
        left: 9px;

        border-radius:
            0
            22px
            0
            0;
    }


    .hero-photo::before {
        width: 53px;
        height: 53px;

        border-radius:
            0
            30px
            0
            0;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .about-hero {
        padding-top: 58px;
    }


    .hero-intro-label {
        font-size: 7px;

        letter-spacing: .12em;
    }


    .hero-meet {
        font-size: 25px;
    }


    .hero-copy h1 {
        font-size: 46px;
    }


    .hero-copy h1 span {
        margin-left: 24px;
    }


    .hero-role {
        font-size: 9px;
    }


    .hero-intro {
        font-size: 12.5px;
    }


    .hero-photo-wrap {
        width: 310px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .hero-photo img,
    .hero-photo-back,
    .tis-btn-primary,
    .tis-btn-primary i {
        transition: none !important;
    }
}
/* =========================================================
   HERO → STORY SVG TRANSITION
   ========================================================= */

.hero-section-divider {
    position: relative;

    width: 100%;
    height: 105px;

    margin-top: -1px;

    background: #f6f2eb;

    overflow: hidden;

    z-index: 5;
}


/* SVG */

.hero-section-divider svg {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 100%;

    display: block;
}


/* soft cream shape */

.hero-section-divider .divider-fill {
    fill: #eee8de;
}


/* main golden curve */

.hero-section-divider .divider-line {
    fill: none;

    stroke: #b9832d;

    stroke-width: 1.2;

    stroke-linecap: round;

    opacity: .55;
}


/* second subtle flowing line */

.hero-section-divider .divider-flow {
    fill: none;

    stroke: #cfa45e;

    stroke-width: .8;

    stroke-linecap: round;

    opacity: .35;

    stroke-dasharray: 8 12;

    animation: dividerFlow 12s linear infinite;
}


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

@keyframes dividerFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -160;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .hero-section-divider {
        height: 70px;
    }

    .hero-section-divider .divider-line {
        stroke-width: 1;
    }

    .hero-section-divider .divider-flow {
        stroke-width: .7;
    }
}


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

    .hero-section-divider .divider-flow {
        animation: none;
    }
}
/* =========================================================
   JOURNEY / KRITIMA'S STORY
   ========================================================= */

.journey {
    position: relative;

    padding: 82px 0 95px;

    background: #eee8de;

    overflow: hidden;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.journey-label {
    display: block;

    margin-bottom: 45px;

    color: #b9832d;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .24em;

    text-transform: uppercase;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.journey-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, .78fr)
        minmax(0, 1.22fr);

    gap: clamp(55px, 8vw, 105px);

    align-items: center;
}


/* =========================================================
   IMAGE DESIGN
   ========================================================= */

.journey-image {
    position: relative;

    width: min(100%, 455px);

    padding:
        0
        22px
        22px
        0;
}


/* soft background card */

.journey-image-shadow {
    position: absolute;

    top: 20px;
    left: 22px;

    width: calc(100% - 22px);
    height: calc(100% - 22px);

    background: #dcd0bd;

    border-radius: 2px 45px 2px 45px;

    z-index: 0;

    transition:
        transform .7s cubic-bezier(.22,1,.36,1);
}


/* golden frame */

.journey-image-frame {
    position: relative;

    z-index: 2;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #ddd4c8;

    border-radius: 2px 38px 2px 38px;

    box-shadow:
        0 25px 55px rgba(40, 30, 20, .13);
}


/* actual image */

.journey-image-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 27%;

    transform: scale(1.01);

    transition:
        transform 1s cubic-bezier(.22,1,.36,1);
}


/* gold outline */

.journey-image-frame::after {
    content: "";

    position: absolute;

    inset: 13px;

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

    border-radius: 2px 29px 2px 29px;

    pointer-events: none;
}


/* small golden corner */

.journey-image-corner {
    position: absolute;

    right: 2px;
    bottom: 2px;

    width: 48px;
    height: 48px;

    border-right: 2px solid #b9832d;
    border-bottom: 2px solid #b9832d;

    z-index: 4;

    transition:
        transform .6s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.journey-image:hover .journey-image-frame img {
    transform: scale(1.045);
}

.journey-image:hover .journey-image-shadow {
    transform: translate(7px, 7px);
}

.journey-image:hover .journey-image-corner {
    transform: translate(5px, 5px);
}


/* =========================================================
   CONTENT
   ========================================================= */

.journey-copy {
    max-width: 700px;
}


.journey-copy h2 {
    margin: 0 0 27px;

    color: #171513;

   

    font-size: clamp(44px, 4.7vw, 60px);

    font-weight: 500;

    line-height: .98;

    letter-spacing: -.045em;
}


.journey-copy h2 em {
    display: block;

    color: #b9832d;

    font-style: italic;

    font-weight: 400;
     font-family:
        Georgia,
        "Times New Roman",
        serif;
}


/* =========================================================
   PARAGRAPHS
   ========================================================= */

.journey-copy > p {
    max-width: 670px;

    margin: 0 0 14px;

    color: #625b53;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.72;
}


/* =========================================================
   TURNING POINT
   ========================================================= */

.journey-turn {
    display: grid;

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

    align-items: center;

    gap: 25px;

    max-width: 680px;

    margin-top: 30px;

    padding: 22px 25px;

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

    border-radius: 3px;

    box-shadow:
        0 12px 35px rgba(40,30,20,.045);
}


.journey-turn > div:not(.journey-turn-arrow) {
    min-width: 0;
}


.journey-turn span {
    display: block;

    margin-bottom: 7px;

    color: #9a9187;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.journey-turn p {
    margin: 0;

    color: #211e1a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    font-style: italic;

    line-height: 1.25;
}


.journey-turn-arrow {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #b9832d;

    color: #fff;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    transition:
        transform .4s ease;
}


.journey-turn:hover .journey-turn-arrow {
    transform: translateX(5px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .journey {
        padding: 75px 0 85px;
    }

    .journey-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .journey-image {
        width: min(100%, 530px);
    }

    .journey-copy {
        max-width: 700px;
    }

    .journey-copy h2 {
        font-size: clamp(46px, 8vw, 68px);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .journey {
        padding: 65px 0 70px;
    }

    .journey-label {
        margin-bottom: 32px;

        font-size: 9px;

        letter-spacing: .18em;
    }

    .journey-grid {
        gap: 42px;
    }


    /* image */

    .journey-image {
        padding:
            0
            13px
            13px
            0;
    }

    .journey-image-shadow {
        top: 13px;
        left: 13px;

        border-radius: 2px 30px 2px 30px;
    }

    .journey-image-frame {
        border-radius: 2px 28px 2px 28px;
    }

    .journey-image-frame::after {
        inset: 9px;

        border-radius: 2px 21px 2px 21px;
    }

    .journey-image-corner {
        width: 32px;
        height: 32px;

        right: 0;
        bottom: 0;
    }


    /* content */

    .journey-copy h2 {
        margin-bottom: 23px;

        font-size: 40px;

        line-height: .98;
    }

    .journey-copy > p {
        font-size: 14px;

        line-height: 1.72;
    }


    /* turning point */

    .journey-turn {
        grid-template-columns: 1fr;

        gap: 13px;

        margin-top: 27px;

        padding: 20px;
    }

    .journey-turn-arrow {
        width: 31px;
        height: 31px;

        font-size: 12px;

        transform: rotate(90deg);
    }

    .journey-turn:hover .journey-turn-arrow {
        transform: rotate(90deg) translateX(4px);
    }

    .journey-turn p {
        font-size: 18px;
    }
}
/* =========================================================
   THE INNER SHIFT
   DARK EDITORIAL SECTION
   ========================================================= */

.shift {
    position: relative;

    padding: 105px 0 115px;

    background: #29251f;

    color: #f8f5ef;

    overflow: hidden;
}


/* =========================================================
   SOFT BACKGROUND DETAILS
   ========================================================= */

.shift::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

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

    border: 1px solid rgba(202,160,82,.08);

    border-radius: 50%;

    pointer-events: none;
}


.shift::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -170px;
    bottom: -170px;

    border: 1px solid rgba(202,160,82,.055);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   SECTION NAME
   ========================================================= */

.shift-label {
    display: block;

    margin-bottom: 48px;

    color: #d0a45d;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .24em;

    text-transform: uppercase;
}


/* =========================================================
   GRID
   ========================================================= */

.shift-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, .85fr);

    align-items: center;

    gap: clamp(65px, 9vw, 120px);
}


/* =========================================================
   CONTENT
   ========================================================= */

.shift-copy {
    max-width: 700px;
}


.shift-copy h2 {
    margin: 0 0 30px;

    color: #f8f5ef;

   

    font-size: clamp(50px, 5.2vw, 70px);

    font-weight: 500;

    line-height: .96;

    letter-spacing: -.05em;
}


.shift-copy h2 em {
    display: block;
 font-family:
        Georgia,
        "Times New Roman",
        serif;
    margin-top: 4px;

    color: #d0a45d;

    font-style: italic;

    font-weight: 400;
}


/* =========================================================
   LEAD TEXT
   ========================================================= */

.shift-lead {
    max-width: 620px;

    margin: 0;

    color: rgba(248,245,239,.70);

    font-family: "DM Sans", sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.8;
}


/* =========================================================
   QUESTION
   ========================================================= */

.shift-question {
    position: relative;

    max-width: 610px;

    margin: 38px 0 0;

    padding: 22px 0 22px 25px;

    color: #f8f5ef;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;

    font-weight: 400;

    font-style: italic;

    line-height: 1.4;
}


/* gold vertical accent */

.shift-question::before {
    content: "";

    position: absolute;

    left: 0;
    top: 18px;
    bottom: 18px;

    width: 2px;

    background: #b9832d;
}


/* =========================================================
   IMAGE AREA
   ========================================================= */

.shift-image-wrap {
    position: relative;

    width: min(100%, 455px);

    justify-self: end;

    padding:
        0
        20px
        20px
        0;
}


/* warm background behind image */

.shift-image-back {
    position: absolute;

    top: 20px;
    left: 22px;

    width: calc(100% - 22px);
    height: calc(100% - 20px);

    background: #51483d;

    border-radius:
        2px
        42px
        2px
        42px;

    z-index: 0;

    transition:
        transform .7s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   IMAGE FRAME
   ========================================================= */

.shift-image-frame {
    position: relative;

    z-index: 2;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #3a342d;

    border-radius:
        2px
        35px
        2px
        35px;

    box-shadow:
        0 30px 65px rgba(0,0,0,.30);
}


/* image */

.shift-image-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 30%;

    transform: scale(1.01);

    transition:
        transform 1.1s cubic-bezier(.22,1,.36,1),
        filter .7s ease;
}


/* subtle inner frame */

.shift-image-frame::after {
    content: "";

    position: absolute;

    inset: 12px;

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

    border-radius:
        2px
        27px
        2px
        27px;

    pointer-events: none;
}


/* =========================================================
   GOLDEN CORNER
   ========================================================= */

.shift-image-corner {
    position: absolute;

    right: 1px;
    bottom: 1px;

    width: 48px;
    height: 48px;

    border-right: 2px solid #c18d38;
    border-bottom: 2px solid #c18d38;

    z-index: 4;

    transition:
        transform .6s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.shift-image-wrap:hover .shift-image-frame img {
    transform: scale(1.045);
}

.shift-image-wrap:hover .shift-image-back {
    transform: translate(7px, 7px);
}

.shift-image-wrap:hover .shift-image-corner {
    transform: translate(5px, 5px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .shift {
        padding:
            90px
            0
            95px;
    }

    .shift-label {
        margin-bottom: 42px;
    }

    .shift-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .shift-copy {
        max-width: 700px;
    }

    .shift-image-wrap {
        width: min(100%, 540px);

        justify-self: start;
    }

    .shift-copy h2 {
        font-size: clamp(48px, 8vw, 72px);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .shift {
        padding:
            70px
            0
            75px;
    }

    .shift-label {
        margin-bottom: 34px;

        font-size: 9px;

        letter-spacing: .18em;
    }

    .shift-grid {
        gap: 43px;
    }

    .shift-copy h2 {
        margin-bottom: 23px;

        font-size: 40px;

        line-height: .98;
    }

    .shift-lead {
        font-size: 14px;

        line-height: 1.75;
    }

    .shift-question {
        margin-top: 29px;

        padding:
            18px
            0
            18px
            20px;

        font-size: 20px;
    }

    .shift-question::before {
        top: 14px;
        bottom: 14px;
    }


    /* image */

    .shift-image-wrap {
        padding:
            0
            13px
            13px
            0;
    }

    .shift-image-back {
        top: 13px;
        left: 13px;

        border-radius:
            2px
            30px
            2px
            30px;
    }

    .shift-image-frame {
        border-radius:
            2px
            27px
            2px
            27px;
    }

    .shift-image-frame::after {
        inset: 9px;

        border-radius:
            2px
            21px
            2px
            21px;
    }

    .shift-image-corner {
        width: 33px;
        height: 33px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .shift-image-frame img,
    .shift-image-back,
    .shift-image-corner {
        transition: none !important;
    }
}
/* =========================================================
   THE WORK
   ========================================================= */
/* =========================================================
   THE WORK — COMPLETE SECTION
   ========================================================= */

.work {
    position: relative;

    padding: 82px 0 88px;

    background: #ffffff;

    color: #171513;

    overflow: hidden;
}


/* =========================================================
   SUBTLE BACKGROUND
   ========================================================= */

.work::before {
    content: "";

    position: absolute;

    width: 460px;
    height: 460px;

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

    border: 1px solid rgba(185, 131, 45, .06);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   TOP LABEL
   ========================================================= */

.work-label {
    display: inline-block;

    position: relative;

    margin-bottom: 24px;

    padding-left: 17px;

    color: #b9832d;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: .22em;

    text-transform: uppercase;
}


/* Small gold mark */

.work-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 7px;
    height: 1px;

    background: #b9832d;

    transform: translateY(-50%);
}


/* =========================================================
   HEADING AREA
   ========================================================= */

.work-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, .75fr);

    align-items: end;

    gap: clamp(50px, 8vw, 110px);

    margin-bottom: 42px;
}


/* =========================================================
   HEADING
   ========================================================= */

.work-title h2 {
    margin: 0;

    color: #171513;

   

    font-size: clamp(54px, 5.5vw, 70px);

    font-weight: 500;

    line-height: .9;

    letter-spacing: -.055em;
}


/* Elegant gold second line */

.work-title h2 em {
    display: block;
     font-family:
        Georgia,
        "Times New Roman",
        serif;

    margin-left: 46px;

    color: #b9832d;

    font-weight: 400;

    font-style: italic;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.work-description {
    max-width: 470px;

    padding-bottom: 4px;
}


.work-description p {
    margin: 0;

    color: #625b53;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.75;
}


/* =========================================================
   SIX CARDS
   ========================================================= */

.work-list {
    display: grid;

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

    gap: 12px;
}


/* =========================================================
   CARD
   ========================================================= */

.work-item {
    position: relative;

    display: grid;

    grid-template-columns: 38px minmax(0, 1fr);

    gap: 17px;

    min-height: 135px;

    padding: 23px 25px;

    box-sizing: border-box;

    background: #faf9f6;

    border: 1px solid #e7e1d8;

    border-radius: 4px;

    overflow: hidden;

    color: #171513;

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/* =========================================================
   GOLD BOTTOM ACCENT
   ========================================================= */

.work-item::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #b9832d;

    transition:
        width .4s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   NUMBER
   ========================================================= */

.work-number {
    display: block;

    padding-top: 2px;

    color: #b9832d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1;

    transition:
        transform .35s ease;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.work-item h3 {
    margin: 0 0 8px;

    color: #211e1a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;

    font-weight: 500;

    line-height: 1.15;

    letter-spacing: -.015em;

    opacity: 1;

    visibility: visible;

    transition:
        color .3s ease;
}


/* =========================================================
   CARD DESCRIPTION
   ========================================================= */

.work-item p {
    max-width: 450px;

    margin: 0;

    color: #625b53;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.6;

    opacity: 1;

    visibility: visible;

    transition:
        color .3s ease;
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.work-item:hover {
    transform: translateY(-4px);

    background: #ffffff;

    border-color: #b9832d;

    box-shadow:
        0 14px 34px rgba(48, 37, 24, .08);
}


.work-item:hover::after {
    width: 100%;
}


.work-item:hover .work-number {
    transform: translateX(4px);
}


.work-item:hover h3 {
    color: #a87322;
}


.work-item:hover p {
    color: #514a43;
}


/* =========================================================
   REVEAL SAFETY
   ========================================================= */

.work-item.reveal,
.work-item.reveal h3,
.work-item.reveal p,
.work-item.reveal .work-number {
    visibility: visible;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .work {
        padding: 72px 0 78px;
    }


    .work-heading {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 34px;
    }


    .work-title h2 {
        font-size: clamp(50px, 8vw, 68px);
    }


    .work-title h2 em {
        margin-left: 38px;
    }


    .work-description {
        max-width: 560px;

        padding-bottom: 0;
    }


    .work-description p {
        font-size: 13.5px;
    }


    .work-item {
        min-height: 145px;

        padding: 22px 21px;

        grid-template-columns: 32px minmax(0, 1fr);

        gap: 15px;
    }


    .work-item h3 {
        font-size: 21px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .work {
        padding: 62px 0 68px;
    }


    /* label */

    .work-label {
        margin-bottom: 21px;

        font-size: 8px;

        letter-spacing: .18em;
    }


    /* heading */

    .work-heading {
        gap: 17px;

        margin-bottom: 30px;
    }


    .work-title h2 {
        font-size: 43px;

        line-height: .92;
    }


    .work-title h2 em {
        margin-left: 25px;
    }


    /* description */

    .work-description {
        max-width: 100%;
    }


    .work-description p {
        font-size: 13px;

        line-height: 1.7;
    }


    /* cards */

    .work-list {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .work-item {
        min-height: 0;

        grid-template-columns: 29px minmax(0, 1fr);

        gap: 12px;

        padding: 20px 17px;
    }


    .work-number {
        font-size: 15px;
    }


    .work-item h3 {
        margin-bottom: 7px;

        font-size: 20px;

        line-height: 1.18;
    }


    .work-item p {
        font-size: 12.5px;

        line-height: 1.6;
    }


    /* slightly softer mobile hover */

    .work-item:hover {
        transform: translateY(-2px);

        box-shadow:
            0 10px 25px rgba(48, 37, 24, .07);
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .work {
        padding: 55px 0 62px;
    }


    .work-title h2 {
        font-size: 39px;
    }


    .work-title h2 em {
        margin-left: 20px;
    }


    .work-description p {
        font-size: 12.5px;
    }


    .work-item {
        padding: 18px 15px;

        grid-template-columns: 26px minmax(0, 1fr);

        gap: 10px;
    }


    .work-item h3 {
        font-size: 19px;
    }


    .work-item p {
        font-size: 12px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .work-item,
    .work-item::after,
    .work-number,
    .work-item h3,
    .work-item p {
        transition: none !important;
    }
}
/* =========================================================
   05 — MENTOR + CTA
   ========================================================= */

.influence {
    position: relative;

    padding: 85px 0 95px;

    background: var(--cream);

    overflow: hidden;
}


/* =========================================================
   MENTOR FEATURE
   ========================================================= */

.mentor-feature {
    position: relative;

    display: grid;

    grid-template-columns: 260px 1fr;

    align-items: center;

    gap: 55px;

    max-width: 820px;

    margin: 0 auto;

    padding: 35px 45px;

    background: #fdfdfc;

    border: 1px solid #e9e1d5;

    border-radius: 2px;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        border-color .4s ease,
        box-shadow .45s ease;
}


.mentor-feature:hover {
    transform: translateY(-4px);

    border-color: rgba(185,131,45,.45);

    box-shadow:
        0 18px 45px rgba(40,30,20,.07);
}


/* =========================================================
   MENTOR IMAGE
   ========================================================= */

.mentor-photo {
    position: relative;

    width: 220px;

    padding: 0 12px 12px 0;

    justify-self: center;
}


.mentor-photo-offset {
    position: absolute;

    top: 12px;
    left: 12px;

    width: calc(100% - 12px);
    height: calc(100% - 12px);

    background: #dfcfb7;

    border-radius: 2px 32px 2px 32px;

    transition:
        transform .65s cubic-bezier(.22,1,.36,1);
}


.mentor-photo-inner {
    position: relative;

    z-index: 2;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-radius: 2px 28px 2px 28px;

    background: #ddd5ca;

    box-shadow:
        0 16px 35px rgba(35,25,15,.11);
}


.mentor-photo-inner img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 18%;

    transition:
        transform .9s cubic-bezier(.22,1,.36,1);
}


/* inner golden line */

.mentor-photo-inner::after {
    content: "";

    position: absolute;

    inset: 9px;

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

    border-radius: 2px 21px 2px 21px;

    pointer-events: none;
}


/* image hover */

.mentor-feature:hover .mentor-photo-offset {
    transform: translate(6px,6px);
}

.mentor-feature:hover .mentor-photo-inner img {
    transform: scale(1.04);
}


/* =========================================================
   MENTOR CONTENT
   ========================================================= */

.mentor-content {
    max-width: 470px;
}


.mentor-label {
    display: block;

    margin-bottom: 13px;

    color: #b9832d;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .20em;

    line-height: 1;

    text-transform: uppercase;
}


.mentor-content h2 {
    margin: 0 0 15px;

    color: #1b1815;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(40px, 4.2vw, 56px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -.04em;
}


.mentor-content p {
    max-width: 430px;

    margin: 0;

    color: #696159;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    line-height: 1.75;
}


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

.final-cta {
    max-width: 900px;

    margin: 40px auto 0;

    padding-top: 70px;

    text-align: center;

    /* border-top: 1px solid #e4ddd2; */
}


.final-cta h2 {
    max-width: 900px;

    margin: 0 auto;

    color: #171513;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(42px, 4.8vw, 60px);

    font-weight: 400;

    line-height: .98;

    letter-spacing: -.05em;
}


.final-cta h2 em {
    display: block;

    margin-top: 5px;

    color: #b9832d;

    font-style: italic;
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.final-cta-button {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    padding: 7px 8px 7px 20px;

    background: #b9832d;

    border-radius: 50px;

    color: #ffffff;

    text-decoration: none;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        background .3s ease,
        box-shadow .3s ease;
}


.final-cta-button b {
    display: grid;

    place-items: center;

    width: 33px;
    height: 33px;

    background: #fffaf2;

    border-radius: 50%;

    color: #b9832d;

    font-size: 14px;

    font-weight: 500;

    transition:
        transform .4s ease;
}


.final-cta-button:hover {
    transform: translateY(-4px);

    background: #a87322;

    box-shadow:
        0 14px 30px rgba(185,131,45,.20);
}


.final-cta-button:hover b {
    transform: rotate(45deg);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .influence {
        padding: 75px 0 85px;
    }

    .mentor-feature {
        grid-template-columns: 230px 1fr;

        gap: 40px;

        padding: 30px 35px;
    }

    .mentor-photo {
        width: 200px;
    }

    .final-cta {
        margin-top: 70px;

        padding-top: 60px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .influence {
        padding: 60px 0 70px;
    }

    .mentor-feature {
        grid-template-columns: 1fr;

        gap: 28px;

        padding: 25px 20px;

        text-align: center;
    }

    .mentor-photo {
        width: 190px;

        margin: 0 auto;
    }

    .mentor-content {
        max-width: 100%;
    }

    .mentor-label {
        font-size: 8px;
    }

    .mentor-content h2 {
        margin-bottom: 12px;

        font-size: 37px;
    }

    .mentor-content p {
        font-size: 13px;

        line-height: 1.7;
    }


    /* CTA */

    .final-cta {
        margin-top: 55px;

        padding-top: 50px;
    }

    .final-cta h2 {
        font-size: 35px;

        line-height: 1;
    }

    .final-cta-button {
        margin-top: 25px;

        font-size: 8px;

        padding-left: 17px;
    }

    .final-cta-button b {
        width: 30px;
        height: 30px;
    }
}