/* Basic Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #33353a;
    background-color: #f7f4f2;
    line-height: 1.6;
}

/* Color tokens (roughly inspired by the mock) */
:root {
    --bg-main: #f7f4f2;
    --bg-light: #ffffff;
    --bg-accent: #f3dfcf;
    --bg-dark: #31343a;
    --text-main: #33353a;
    --text-white: #ffffff;
    --text-muted: #6f7074;
    --text-darkgrey: rgb(65, 72, 78);
    --accent: #c28b64;
    --accent-dark: rgb(203, 159, 93);
    --soundslike: rgb(184, 168, 140);
    --header-nav-text: rgb(171, 107, 70);
    --highlights-bg: rgb(246, 243, 236);
}

/* Layout helpers */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: 4rem 0;
    display: block;
    unicode-bidi: isolate;
}

.section-light {
    background-color: var(--bg-light);
}

.section-dark {
    background-color: var(--bg-dark);
    color: #f5f5f5;
}

.section-split {
    background-color: var(--bg-main);
}

/* Typography */
h1,
h2,
h3 {
    font-family: "Playfair Display", "Times New Roman", serif;
    color: var(--text-main);
}

.section-dark h1,
.section-dark h2,
.section-dark h3 {
    color: #ffffff;
}

.section-title {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: var(--accent-dark);
    margin-bottom: 0.5rem;
}

/* Header / Nav */
.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
    background: rgb(246, 243, 236);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.nav-bar {
    min-height: 7rem;
    display: flex;
    align-items: center;      /* vertically center all three */
    padding: 0.75rem 1.5rem;
    justify-content: flex-start;   /* changed from space-between */
}

.nav-bar a {
    font-size: 1rem;
}

.nav-bar img {
    max-height: 4.5rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.logo-text {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.7rem;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.9rem;

    margin-left: auto;        /* pushes nav + button to the right */
    margin-right: 1.5rem;     /* space between nav and CONTACT button */
}

.main-nav a {
    text-decoration: none;
    margin-top: 2rem;
    color: var(--header-nav-text);
    position: relative;
    letter-spacing: 0.08em;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.15rem;
    width: 0;
    height: 1px;
    background-color: var(--accent);
    transition: width 0.2s;
}

.main-nav a:hover::after {
    width: 100%;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 1.4rem;
    margin-top: 2rem;
    border-radius: 999px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    max-width: 190px;
    font-size: 1.1rem;
    font-weight: 400;
    transition: background-color 0.2s ease, color 0.2s ease,
    transform 0.1s ease, box-shadow 0.1s ease;
    letter-spacing: 0.05em;
}

/*.btn.small {*/
/*    padding: 0.5rem 1.2rem;*/
/*    font-size: 0.85rem;*/
/*}*/

.btn.small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 300px;
    padding: 0.3rem 1.2rem;
}

.btn-light {
    background-color: #ffffff;
    color: var(--text-main);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.btn-light:hover {
    background-color: #f9f5f2;
    transform: translateY(-1px);
}

.btn-dark {
    background-color: var(--header-nav-text);
    color: #ffffff;
}

.btn-dark:hover {
    background-color: #202226;
    transform: translateY(-1px);
}

.btn-outline {
    border: 2px solid var(--header-nav-text);
    background: transparent;
    color: var(--header-nav-text);
}

.btn-outline:hover {
    background-color: var(--text-main);
    color: #ffffff;
}

.hero {
    position: relative;
    display: flex;             /* make hero a flex container */
    flex-direction: column;
    min-height: 80vh;
    padding: 6rem 0 0;         /* room for the fixed nav */
    background: var(--accent-dark);

    background-image: url("images/nutritionwithsisi.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position-y: 10px;
}

.hero img {
    /*max-width: 1000px;*/
    max-width: 100%;
}

/* Row with text on the left, photo on the right */
.hero-row {
    flex: 1;                          /* fill hero height */
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: stretch;              /* ⬅️ was flex-end */
    gap: 2rem;
}

/* Left column: center text vertically within the hero */
.hero-copy {
    flex: 1 1 50%;
    display: flex;
    color: white;
    flex-direction: column;
    justify-content: center;          /* centers text vertically */
    letter-spacing: 0.05em;
}

.hero-copy h1 {
    line-height: 1.05;
    color: white;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

/* Right column: keep image bottom-right */
.hero-photo {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;            /* ⬅️ bottom of hero-row */
    justify-content: flex-end;
}

.sisi {
    max-height: 600px;
    width: auto;
    display: block;
    padding-right: 15%;
    padding-bottom: 0;
}

@media (max-width: 900px) {
    /* Keep it as a row, just tighten spacing + sizes */
    .hero-row {
        gap: 1.5rem;
    }

    .hero-copy p {
        font-size: 0.95rem;
    }

    .sisi {
        max-height: 380px;
        padding-right: 5%;
    }
}


.hero-title {
    font-size: 2.4rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: white;
}

.hero-title span {
    font-weight: 700;
}

.hero-subtitle {
    margin-bottom: 0.9rem;
    font-size: 0.98rem;
    max-width: 35rem;
}

.hero-subtitle.small {
    opacity: 0.9;
    font-size: 0.9rem;
}

/* Bullet list section */
.bullet-list {
    list-style: none;
    margin-top: 1rem;
}

.bullet-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: 0.94rem;
}

.bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
}

/* Split layout */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
    gap: 3rem;
    align-items: center;
}

.split-media {
    position: relative;
}

.coach-photo-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #ddd;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #555;
}

.split-content p {
    margin-bottom: 0.9rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Process grid */
.process-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.process-item {
    background: #fff8f3;
    border-radius: 1rem;
    padding: 1.4rem 1.3rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.process-item h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.process-item p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* CTA within section */
.section-cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* Stories / Testimonial */
.stories-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr);
    gap: 3rem;
    align-items: center;
}

.stories-text p {
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: #f3f3f3;
}

.quote-mark {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.4rem;
    color: #f3dfcf;
}

.stories-photos {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.photo-card {
    width: 100px;
    height: 180px;
    border-radius: 0.7rem;
    background: #f3dfcf;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #5b4635;
    transform: rotate(-5deg);
}

.photo-card:nth-child(2) {
    transform: rotate(2deg);
}

.photo-card:nth-child(3) {
    transform: rotate(5deg);
}

/* Footer */
.site-footer {
    background: #18191d;
    color: #d2d3d7;
    padding: 1.5rem 0;
    font-size: 0.85rem;
    min-height: 200px;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-links a {
    color: #d2d3d7;
    text-decoration: none;
}

/* Responsive tweaks */
@media (max-width: 900px) {
    .main-nav {
        display: none; /* simple: hide nav on small screens for now */
    }

    .hero {
        align-items: flex-end;
        min-height: 65vh;
    }

    .hero-content {
        padding-bottom: 5rem;
    }

    .split {
        grid-template-columns: 1fr;
    }

    .stories-layout {
        grid-template-columns: 1fr;
    }

    .stories-photos {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .hero-title {
        font-size: 2rem;
        color: white;
    }

    .section {
        padding: 3rem 0;
    }

    .photo-card {
        width: 85px;
        height: 150px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* About / Meet Sisi section */

.about-section {
    background: #fdfaf6;
}

/* Two-column layout */
.about-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}


/* Left block */
.about-photo-block {
    flex: 0 0 auto;
    text-align: center;
    margin-left: 6rem;
}

/* The circle container */
.about-photo-circle {
    width: 250px;                /* adjust to taste */
    height: 250px;
    border-radius: 50%;          /* makes it a circle */
    background: #b67949;         /* circle background color, similar to mock */
    overflow: hidden;            /* hide outside part of the image */
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;         /* or flex-end if you want her lower */
    justify-content: center;
}

/* The actual img */
.about-photo-img {
    width: 100%;                 /* slightly zoomed in */
    height: auto;
    object-fit: cover;           /* if you change to width:100%; height:100% */
    transform: translateX(-10px) translateY(120px);
}

/* Text under the circle */
.about-role {
    font-size: 1.1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.about-name {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 400;
}

/* Right column text */
.about-copy {
    flex: 1 1 50%;
    padding-top: 2rem;
    max-width: 540px;
    display: flex;
    flex-direction: column;
}

.about-heading {
    font-family: "Roboto", "Times New Roman", serif;
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 300;
    color: var(--text-darkgrey);
}

.about-heading span {
    font-weight: 700;
}

.about-copy p {
    margin-bottom: 0.9rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.about-copy .btn {
    padding: 0.5rem 1rem;
    min-width: 300px;
    align-self: flex-end;       /* pushes it to the right edge */
    margin-top: 1.8rem;         /* space above button */
}

.about-highlight {
    position: relative;
    padding-left: 1.9rem;
    font-weight: 500;
    color: #444;
}

.about-highlight::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #b67949;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Responsive tweaks */
@media (max-width: 900px) {
    .about-row {
        flex-direction: column;
        text-align: center;
    }

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

    .about-highlight {
        padding-left: 0;
    }

    .about-highlight::before {
        display: none; /* easier on small screens */
    }
}

/* Highlights section (3 columns with arrows) */

.highlights-section {
    background: var(--highlights-bg); /* or var(--bg-main) if you prefer */
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.highlights-row {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.highlight {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    max-width: 400px;
    position: relative;
    padding-top: 0;      /* no need for top padding now */
}

/*!* Arrow container *!*/
/*.highlight-arrow {*/
/*    margin-bottom: 0.75rem;*/
/*    color: #b38268;          !* arrow color; could also use var(--accent) *!*/
/*}*/

/* text column (title on top, body below) */
.highlight-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.highlight-arrow {
    flex: 0 0 auto;
    /* lift the arrow a little so it feels like it’s curving down */
    transform: translateY(-10px) scaleX(0.6) scaleY(-0.6);
    color: #000;          /* black arrow */
}

/* Use the SVG with CSS-controlled size */
.feature-arrow {
    display: block;
    width: 60px;                 /* tweak to match size in the design */
    height: auto;
    color: var(--accent);
}

.feature-arrow path {
    fill: var(--accent);         /* <— set the arrow color here */
}

/* Heading + body */
.highlight-title {
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #44484f;
    margin-bottom: 0.7rem;
}

.highlight-body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
}


/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
    .highlights-row {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .highlight {
        max-width: 520px;
        text-align: center;
    }

    .highlight-arrow {
        margin-left: auto;
        margin-right: auto;
    }
}

#soundslike {
    background-color: var(--soundslike);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

#soundslike .container {
    align-content: center;
    align-items: center;
    justify-content: center;
}

.container h2 {
    /*color: white;*/
    justify-self: center;
    font-family: 'Roboto', sans-serif;
}

.coaching-heading-container {
    display: flex;
    justify-content: center;
}

.coaching-heading-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 960px;
}

#coaching h2 {
    justify-self: left;
    font-family: 'Roboto', sans-serif;
}

#soundslike img {
    max-width: 900px;
}

@media (max-width: 900px) {
    #soundslike img {
        max-width: 90%;
    }
}

/* ===== COACHING SECTION ===== */

.coaching-section {
    background: white;
}

/* two columns */
.coaching-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    max-width: 960px;
}

/* LEFT column */
.coaching-copy {
    flex: 0.5 1 55%;
}

.coaching-heading {
    font-size: 1.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #44484f;
    margin-bottom: 1.5rem;
}

/* bullet list */
.coaching-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}

.coaching-list li {
    position: relative;
    padding-left: 2.4rem;
    margin-bottom: 1.2rem;
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* check icon */
.coaching-list li::before {
    content: "✔";                /* simple checkmark; swap with SVG if you like */
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid #44484f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #44484f;
}

/* bold first part */
.coaching-list li strong {
    font-weight: 700;
    color: #44484f;
}

/* bottom sentence + button */
.coaching-bottom-copy {
    margin: 2rem 0 1.5rem;
    font-size: 0.98rem;
    color: #44484f;
}

#begin-journey {
    min-width: 275px;
}

/* RIGHT column */
.coaching-visual {
    flex: 0 0 auto;
    position: relative;
    width: 400px;       /* adjust to taste */
    height: 400px;
    align-self: start;
    margin-top: 1rem;
}

/* circular food photo */
.coaching-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #d29b60; /* border color peeking behind photo */
}

.coaching-meal-img {
    width: 116%;
    height: 116%;
    object-fit: cover;
    translate: 0 -64px;
}

/* coffee cup overlapping the circle */
.coaching-coffee {
    position: absolute;
    bottom: -54px;
    left: 19%;
    transform: translateX(-50%) scaleX(1.8) scaleY(1.8);
    width: 140px;         /* adjust to match design */
    height: auto;
    filter: drop-shadow(0 18px 25px rgba(0,0,0,0.25));
}

/* arrow pointing toward text/coffee */
.coaching-arrow {
    position: absolute;
    bottom: -0px;
    left: -70px;
    color: #b38268;      /* brown accent */
    transform: rotate(-32deg) scalex(-0.6) scaley(0.6);
}

.coaching-arrow-svg {
    width: 60px;
    height: auto;
}

/* responsive tweaks */
@media (max-width: 900px) {
    /*.coaching-row {*/
    /*    flex-direction: column;*/
    /*    align-items: center;*/
    /*    text-align: left;*/
    /*}*/

    /*.coaching-copy {*/
    /*    width: 100%;*/
    /*}*/

    /*.coaching-visual {*/
    /*    margin-top: 2rem;*/
    /*    width: 260px;*/
    /*    height: 260px;*/
    /*}*/

    /*.coaching-coffee {*/
    /*    width: 110px;*/
    /*    bottom: -30px;*/
    /*}*/

    .coaching-row {
        max-width: 900px;
    }

    .coaching-arrow-svg {
        display: none;
    }
}

/* Whole section background */
.transformation-section {
    background: rgb(219, 209, 176)
}

/* Big heading */
.transform-heading {
    text-align: center;
    font-size: 1.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #44484f;
    margin-bottom: 3rem;
}

/* 3 columns */
.transform-grid {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
}

/* each column */
.transform-item {
    flex: 1 1 0;
    max-width: 340px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* blob wrapper */
.transform-blob {
    position: relative;
    width: 260px;          /* adjust to taste */
    aspect-ratio: 4 / 3;   /* keeps a blob-like proportion */
    margin: 0 auto 1.5rem;
}

/* blob shape (background) */
.transform-blob-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgb(232, 237, 216);        /* light greenish blob color */
}

.transform-blob-shape path {
    fill: currentColor;    /* use the color above */
}

/* content on top of the blob */
.transform-blob-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 0.6rem;
}

/* icons inside blob */
.transform-icon {
    width: 116.637px;
    height: 86.3114px;
    color: #262626;       /* black-ish outline */
    fill: rgb(55, 55, 55);
    stroke-width: 0.01px;
    margin-top: -10px;
    transform: scale(0.8);
}

#center-blob-path {
    transform: translatex(42px);
}

#center-blob-icon {
    transform: rotate(-22deg) scale(0.8);
}

#last-blob {
    transform: translateX(24px) translateY(-44px) rotate(42deg) scale(1);
    height: 300px;
}

/* heading on blob */
.transform-blob-inner h3 {
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #33353a;
}

/* description text below blob */
.transform-item p {
    margin-top: 0.25rem;
    font-weight: 300;
}

/* Center CTA button and give extra breathing room */
.transform-cta {
    margin-top: 2.5rem;
}

#coaching-options-btn {
    min-width: 300px;
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
    .transform-grid {
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }

    .transform-item {
        max-width: 520px;
    }

    .transform-blob {
        width: 240px;
    }
}

/* ===== TESTIMONIAL / STORIES SECTION ===== */

.stories-section {
    background: #c8955b; /* warm tan, tweak to match your hero */
    color: #fff;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.stories-slider {
    overflow: hidden;
}

/* track */
.stories-track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

.stories-slide {
    min-width: 100%;
    flex-shrink: 0;
}

/* main row: text left, photos right */
.stories-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

/* LEFT COLUMN */
.stories-quote-col {
    flex: 1 1 45%;
    max-width: 420px;
    position: relative;
}

.stories-quote-mark {
    color: #d9b984;  /* slightly lighter than section bg */
    margin-bottom: 0.5rem;
}

.stories-quote-mark svg {
    width: 64px;
    height: auto;
    color: #d9b984;  /* slightly lighter than section bg */
    fill: #d9b984;
    transform: rotate(180deg) scale(1.2);
}

.stories-main-quote {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.stories-sub-quote {
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.stories-author {
    font-weight: 600;
    margin-bottom: 2rem;
}

.stories-btn {
    border-color: #8d5c37;
    color: #fff;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    max-width: 500px;
    justify-self: center;
    align-self: center;
    align-content: center;
}

.stories-btn:hover {
    background: #8d5c37;
    border-color: #8d5c37;
}

/* RIGHT COLUMN: blobs + photos */
.stories-photos-col {
    flex: 1 1 55%;
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    position: relative;
    margin-top: 1rem;
}

/* blob wrapper */
.story-blob {
    position: relative;
    width: 260px;
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* blob background */
.story-blob-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: #d9b984;  /* slightly lighter than section bg */
}

.story-blob-shape path {
    /*rotate: 90deg;*/
    transform: rotate(90deg) translateX(-100px) translateY(-315px) scaleX(200%) scaleY(250%);
    fill: #d9b984;  /* solid fill; change if needed */
}

.story-blob .after path {
    /*rotate: 90deg;*/
    transform: rotate(100deg) translateX(-130px) translateY(-325px) scaleX(200%) scaleY(250%);
    fill: #d9b984;  /* solid fill; change if needed */
}

/* polaroid frame */
.story-polaroid {
    /*position: absolute;*/
    width: 80%;
    background: #fdf7f0;
    padding: 0.6rem;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
}

/* slight rotations to mimic screenshot */
.story-polaroid.before {
    transform: rotate(-6deg);
}

.story-polaroid.after {
    transform: rotate(3deg);
    width: 90%;
}

#jiangbo-after {
    width: 85%;
}

.story-polaroid img {
    display: block;
    width: 100%;
    height: auto;
}

/* BEFORE / AFTER label */
.story-label {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff7e8;
}

/* decorative arrow */
.stories-arrow {
    position: absolute;
    bottom: 2rem;
    right: 1.5rem;
    color: #7a3f2a;
}

.stories-arrow-svg {
    width: 70px;
    height: auto;
}

/* dots */
.stories-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2.5rem;
}

.stories-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.25);
    padding: 0;
    cursor: pointer;
}

.stories-dots .dot.active {
    background: #f0c08a; /* highlight color */
}


/* ===== Responsive ===== */

@media (max-width: 900px) {
    .stories-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .stories-photos-col {
        width: 100%;
        justify-content: center;
        margin-top: 2rem;
    }

    .story-blob {
        width: 220px;
    }

    .stories-arrow {
        bottom: 1rem;
        right: 50%;
        transform: translateX(60%);
    }
}

@media (max-width: 600px) {
    .stories-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .stories-main-quote {
        font-size: 1.25rem;
    }

    .stories-row {
        gap: 2rem;
    }

    .stories-photos-col {
        flex-direction: row;
        gap: 1.5rem;
    }

    .story-blob {
        width: 180px;
    }
}

/* ==== Discovery Call CTA ==== */

.discovery-cta {
    background: #fdf7f0;              /* soft light background */
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.discovery-cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

/* Photo left */
.discovery-photo {
    flex: 0 0 38%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.discovery-photo img {
    max-height: 426px;
    width: auto;
    display: block;
    margin-bottom: -65px;
}

/* Text right */
.discovery-content {
    flex: 1 1 60%;
    position: relative;
}

/* little paper plane */
.discovery-plane {
    /*color: var(--accent-dark);*/
    margin-bottom: 0.2rem;
    transform: translateX(-8rem) translateY(4.5rem);  /* nudge left like the design */
}

.discovery-plane svg {
    width: 100px;
    height: auto;
    transform: rotate(-10deg);
    stroke-width: 0;
}

/* main heading */
.discovery-heading {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: 2.1rem;
    line-height: 1.3;
    color: var(--text-main);
    margin-bottom: 2rem;
}

/* CTA button */
.discovery-btn {
    background: #b56a3b;
    color: #ffffff;
    border-radius: 999px;
    padding: 0.85rem 2.6rem;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

#book-call {
    max-width: 500px;
}

.discovery-btn:hover {
    background: #9a5730;
    transform: translateY(-1px);
}

/* subcopy under button */
.discovery-subcopy {
    margin-top: 1.6rem;
    max-width: 34rem;
    font-size: 0.98rem;
    color: var(--text-main);
}

/* squiggle arrow under button */
.discovery-arrow {
    position: absolute;
    right: 16%;
    bottom: -1.5rem;
    color: #9a5730;
}

.discovery-arrow svg {
    width: 60px;
    height: auto;
}

/* ===== Responsive tweaks ===== */

@media (max-width: 900px) {
    .discovery-cta-row {
        flex-direction: column;
        text-align: center;
    }

    .discovery-photo {
        order: -1;   /* photo on top on mobile */
    }

    .discovery-plane {
        transform: none;
        display: inline-block;
    }

    .discovery-heading {
        font-size: 1.8rem;
    }

    .discovery-content {
        align-items: center;
    }

    .discovery-subcopy {
        margin-left: auto;
        margin-right: auto;
    }

    .discovery-arrow {
        position: static;
        margin-top: 1.2rem;
    }
}


/* === Footer nav bar === */

.footer-nav {
    background-color: #c48957;                 /* base tan */
    /* optional: subtle pattern image like the hero */
    /* background-image: url("images/footer-pattern.png"); */
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 0.9rem 0;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
}

/* spacer to push nav toward center with icon on right */
.footer-spacer {
    flex: 1 1 0;
}

/* nav links */

.footer-links {
    display: flex;
    gap: 2.3rem;
    font-size: 1rem;
    letter-spacing: 0.04em;
}

/*.footer-links a {*/
/*    text-decoration: none;*/
/*    color: #fff;*/
/*    position: relative;*/
/*}*/

.footer-links a {
    text-decoration: none;
    color: #fff;
    position: relative;
    letter-spacing: 0.08em;
}

.footer-links a::after {
    text-decoration: none;
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.15rem;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width 0.2s;
}

.footer-links a:hover::after {
    width: 100%;
}

/* Instagram icon on the far right */

.footer-instagram {
    margin-left: auto;
    text-decoration: none;
    color: #fff;
}

.ig-circle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ig-circle svg {
    width: 18px;
    height: 18px;
}

/* responsive tweaks */

@media (max-width: 800px) {
    .footer-inner {
        justify-content: center;
    }

    .footer-spacer {
        display: none;
    }

    /*.footer-links {*/
    /*    flex-wrap: wrap;*/
    /*    justify-content: center;*/
    /*    gap: 1.2rem;*/
    /*    text-align: center;*/
    /*}*/

    .footer-instagram {
        margin-left: 1.5rem;
    }
}

/* ===== Meet Sisi – intro section ===== */

.meet-hero {
    background: #fdf7f0;              /* same light cream you’ve been using */
    padding: 12rem 0 0;
}

.meet-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

/* Left side: circular backdrop + image */
.meet-photo {
    flex: 0 0 40%;
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* the tan circle behind Sisi */
.meet-photo-circle {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #c48957;              /* warm tan / accent */
}

/* Sisi image on top of the circle */
.meet-photo-img {
    position: relative;
    max-height: 440px;
    object-fit: cover;
    width: auto;
    display: block;
}

/* Right side: quote + button */
.meet-copy {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.meet-quote {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #3b3f45;
    max-width: 40rem;
    margin-bottom: 2.5rem;
}

/* emphasize phrases as in the mock */
.meet-quote strong {
    font-weight: 700;
}

/* CTA button – reusing your pill style */
.meet-cta {
    background: #b56a3b;
    color: #ffffff;
    border-radius: 999px;
    padding: 0.9rem 2.8rem;
    font-size: 0.98rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    max-width: 300px;
}

.meet-cta:hover {
    background: #9a5730;
    transform: translateY(-1px);
}

/* ===== Responsive ===== */

@media (max-width: 900px) {
    .meet-hero-row {
        flex-direction: column;
        text-align: center;
        gap: 2.5rem;
    }

    .meet-photo {
        flex: 0 0 auto;
    }

    .meet-copy {
        align-items: center;
    }

    .meet-quote {
        font-size: 1.2rem;
    }
}

/* === Meet Sisi: "My Story" section === */

.story-section {
    background: #aa7e64;          /* tweak to match your tan; or use var(--accent) */
    color: #fff;
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
}

.story-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem;
}

.story-text {
    flex: 1 1 55%;
    max-width: 680px;
}

/* small uppercase line */
.story-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: #ffe7cc;
}

/* big title */
.story-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: 1.9rem;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.8rem;
}

.story-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: #fffaf3;
    margin-bottom: 1.2rem;
}

/* highlighted sentence with circular icon */
.story-highlight {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    margin: 1.8rem 0;
}

.story-highlight-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #f5ddc3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c28b64;
    font-size: 1.2rem;
    font-weight: 700;
}

.story-highlight p {
    margin: 0;
    font-weight: 600;
}

/* right-hand image */
.story-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;          /* choose the height you want shown */
    overflow: hidden;
}

.story-photo-img {
    /*max-height: 100vh;    !* adjust to taste *!*/
    display: block;
    height: 88%;           /* fill the wrapper vertically */
    width: auto;
    object-fit: cover;      /* keep aspect ratio, fill the box */
    /*object-position: 85% 20%;*/
    /*transform: translateX(100px) translateY(420px);*/
}

/* Responsive layout */
@media (max-width: 900px) {
    .story-inner {
        flex-direction: column;
        gap: 2.5rem;
    }

    .story-photo {
        order: -1;              /* show photo first on mobile, like your mock */
        justify-content: center;
    }

    .story-text {
        max-width: 100%;
    }

    .story-title {
        font-size: 1.6rem;
    }
}

/* === Meet Sisi – "What makes my approach different" === */

.meet-approach {
    background: var(--bg-main); /* same as page background */
    padding: 5rem 0;
}

.approach-layout {
    display: flex;
    align-items: center;
    gap: 4rem;
}

/* Left arch card */
.approach-visual {
    position: relative;
    flex: 0 0 300px;          /* width of the card */
}

.approach-arch {
    background: #e8d1c1;      /* soft beige arch */
    border-radius: 999px 999px 0 0; /* arch top */
    height: 580px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.approach-photo {
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: cover;        /* in case you switch to height:100% later */
    display: block;
    transform: scale(200%) translateY(-60px);
}

/* Bottom label band */
.approach-arch-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.8rem 2rem 1.9rem;
    background: #c28b64;
    color: #fff;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 1.6rem;
    line-height: 1.6;
    min-height: 160px;
}

.approach-arch-label span {
    display: block;
}

/* Right column */
.approach-copy {
    flex: 1 1 auto;
}

.approach-heading {
    font-size: 1.6rem;
    margin-bottom: 1.8rem;
    color: var(--text-main);
}

#explore-how-it-works {
    max-width: 400px;
}

/* Bullet items */
.approach-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    margin-bottom: 1.2rem;
    align-items: flex-start;
}

.approach-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #c28b64;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.approach-text h3 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: var(--text-main);
}

.approach-text p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Accent button for this section */
.btn.btn-accent {
    margin-top: 2rem;
    background: #c28b64;
    color: #fff;
    border-radius: 999px;
    padding-inline: 2.4rem;
}

.btn.btn-accent:hover {
    background: #8b5f3a; /* slightly darker; tweak to taste */
}

/* Responsive */
@media (max-width: 900px) {
    .approach-layout {
        flex-direction: column;
        align-items: center;
        text-align: left;
    }

    .approach-visual {
        flex-basis: auto;
    }

    .approach-copy {
        width: 100%;
    }

    .approach-heading {
        text-align: left;
    }
}

/* === Meet Sisi – "Who I work with" === */

.meet-who {
    background: var(--bg-main);
    padding: 5rem 0;
}

.who-layout {
    display: flex;
    align-items: flex-start;
    gap: 6rem;
}

/* Left arch card */
.who-visual {
    position: relative;
    flex: 0 0 300px;
}

.who-arch {
    background: var(--accent);      /* warm tan arch */
    border-radius: 999px 999px 999px 999px;
    background: var(--accent-dark);      /* soft beige arch */
    height: 580px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.who-photo {
    width: 80%;
    height: 80%;
    object-fit: cover;
    object-position: center bottom;  /* adjust to taste */
    display: block;
}

/* Round badge at top-right */
.logo-badge {
    position: absolute;
    top: 1.6rem;
    right: -1.2rem;
    width: 96px;
    height: 96px;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

.logo-badge img {
    width: 100%;
}

/* Right column */
.who-copy {
    flex: 1 1 auto;
    max-width: 640px;
}

.who-heading {
    font-size: 1.7rem;
    margin-bottom: 1.5rem;
    color: var(--text-main);
}

/* Bullet list */
.who-list {
    list-style: disc;
    padding-left: 1.2rem;
    margin-bottom: 2.2rem;
}

.who-list li {
    margin-bottom: 0.6rem;
    font-size: 0.96rem;
    color: var(--text-muted);
}

.who-list li strong {
    color: var(--text-main);
}

/* CTA alignment */
.who-cta {
    padding-inline: 2.4rem;
    max-width: 300px;
}

/* Responsive */
@media (max-width: 900px) {
    .who-layout {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

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

    .who-heading {
        text-align: left;
    }
}

/* === Trusted by clients section === */

.trusted-section {
    background: #b7aa8c; /* warm taupe like screenshot */
    padding: 5rem 0;
    color: #f7f4f2;
}

.trusted-inner {
    max-width: 1100px;
}

.trusted-title {
    text-align: center;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 1.7rem;
    color: #3f444b;
    margin-bottom: 3.5rem;
}

/* 2x2 layout */
.trusted-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem 4.5rem;
}

/* Each item = bubble + quote */
.trusted-item {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 2.2rem;
    align-items: start;
}

/* Speech bubble */
.trusted-bubble {
    position: relative;
    padding: 1.3rem 1.4rem 1.2rem;
    border-radius: 0;              /* square like screenshot */
    text-align: center;
}

.trusted-bubble.light {
    background: #f3efe7;
    color: #3f444b;
}

.trusted-bubble.dark {
    background: #3f444b;
    color: #f3efe7;
}

/* bubble tail */
.trusted-bubble::after {
    content: "";
    position: absolute;
    left: 22px;
    bottom: -18px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 0 solid transparent;
    border-top: 18px solid;
}

.trusted-bubble.light::after {
    border-top-color: #f3efe7;
}

.trusted-bubble.dark::after {
    border-top-color: #3f444b;
}

.trusted-name {
    font-size: 2rem;
    font-family: "Playfair Display", "Times New Roman", serif;
    margin-bottom: 0.2rem;
}

.trusted-loc {
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

/* Quote body */
.trusted-quote p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.78);
}

.trusted-quote {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Stars */
.trusted-stars {
    font-size: 1.25rem;
    letter-spacing: 0.25em;
}

.trusted-stars.dark {
    color: #3f444b;
}

.trusted-stars.light {
    color: #ffffff;
}

/* Responsive */
@media (max-width: 1000px) {
    .trusted-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .trusted-item {
        grid-template-columns: 200px minmax(0, 1fr);
    }
}

@media (max-width: 650px) {
    .trusted-item {
        grid-template-columns: 1fr;
        row-gap: 1.2rem;
    }

    .trusted-bubble {
        max-width: 260px;
    }

    .trusted-quote p {
        font-size: 0.98rem;
    }
}

.contact-section {
    background: #cdbb97; /* sand/tan like screenshot */
    padding: 12rem 0 6rem;
}

.contact-inner {
    max-width: 860px;
}

.contact-title {
    font-size: 2.2rem;
    color: #3f444b;
    margin-bottom: 1rem;
}

.contact-subtitle {
    color: #3f444b;
    opacity: 0.85;
    line-height: 1.6;
    max-width: 720px;
    margin-bottom: 2.5rem;
}

.contact-form {
    display: grid;
    gap: 1.2rem;
    max-width: 760px;
}

.contact-form label {
    display: grid;
    gap: 0.45rem;
    color: #3f444b;
    font-size: 1rem;
}

.contact-form input,
.contact-form select {
    height: 44px;
    padding: 0 0.9rem;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    background: #fff;
    font-size: 1rem;
}