/*==========================================================

THE 57 TABS METHOD
Website by Millie

==========================================================*/


/*==========================================================
ROOT
==========================================================*/

:root{

    --background:#FAF8F6;

    --white:#FFFFFF;

    --text:#1F1F1F;

    --subtle:#666666;

    --border:#EAE5E0;

    --pink:#F4B8C8;

    --rose:#E89CB3;

    --container:1280px;

    --radius:20px;

    --shadow:0 30px 80px rgba(31,31,31,.08);

    --transition:.35s ease;

}


/*==========================================================
RESET
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:'Inter',sans-serif;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

    overflow-x:hidden;

}

img{

    width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

button{

    font:inherit;

}


/*==========================================================
GLOBAL
==========================================================*/

.container{

    width:min(92%,var(--container));

    margin:auto;

}

section{

    padding:70px 0;

}

.section-heading{

    margin-bottom:70px;

}

.section-title{

    font-family:'Fraunces',serif;

    font-weight:300;

    font-size:clamp(3rem,5vw,4.8rem);

    line-height:.95;

    letter-spacing:-2px;

    max-width:760px;

}

.section-eyebrow{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:28px;

}

.chapter{

    color:var(--rose);

    font-family:'Fraunces',serif;

    font-style:italic;

    font-size:.95rem;

}

.eyebrow-text{

    letter-spacing:4px;

    font-size:.72rem;

    text-transform:uppercase;

    color:var(--subtle);

}


/*==========================================================
TYPOGRAPHY
==========================================================*/

h1,h2,h3,h4,h5,h6{

    font-family:'Fraunces',serif;

    font-weight:300;

}

p{

    color:var(--subtle);

    line-height:1.9;

    font-size:1.03rem;

}


/*==========================================================
BUTTONS
==========================================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    background:var(--text);

    color:var(--white);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        color .35s ease;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(20,20,20,.12);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border:1px solid var(--border);

    border-radius:999px;

    background:#fff;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;

}

.btn-secondary:hover{

    transform:translateY(-4px);

    background:#fff;

    border-color:var(--rose);

    box-shadow:0 18px 35px rgba(20,20,20,.08);

}

/*==========================================================
HEADER
==========================================================*/

.header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:rgba(250,248,246,.82);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(234,229,224,.65);

}

.navbar{

    height:92px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    font-family:'Fraunces',serif;

    font-size:1.45rem;

    font-weight:300;

    letter-spacing:-.5px;

    transition:var(--transition);

}

.logo:hover{

    opacity:.7;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:48px;

}

.nav-links a{

    position:relative;

    font-size:.92rem;

    font-weight:500;

    color:var(--subtle);

    transition:var(--transition);

}

.nav-links a:hover{ 
    color:var(--rose);

}

.nav-links a.active{

    color:var(--text);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:1px;

    background:var(--text);

    transform:scaleX(0);

    transform-origin:left;

    transition:.3s ease;

}

.nav-links a:hover::after,

.nav-links a.active::after{

    transform:scaleX(1);

}

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

.hero{

    padding:110px 0 40px;

}



.hero-content{

    display:grid;

    grid-template-columns:54% 46%;

    gap:90px;

    align-items:center;

    min-height:70vh;

}

.hero-text{

    animation:fadeUp .8s ease forwards;

}

.hero-title{

    font-family:'Fraunces',serif;

    font-weight:300;

    font-size:clamp(5rem,7.5vw,8rem);

    line-height:.9;

    letter-spacing:-4px;

    margin:32px 0;

}

.hero-title span{

    display:block;

    color:var(--rose);

    font-style:italic;

}

.hero-description{

    max-width:470px;

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    min-height:430px;

}


/*==========================================================
BROWSER HERO
==========================================================*/

.floating-tabs{

    position:absolute;

    inset:0;

}

.floating-tab{

    position:absolute;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px 14px 0 0;

    font-size:.8rem;

    color:var(--subtle);

    box-shadow:0 20px 45px rgba(31,31,31,.06);

    animation:float 10s ease-in-out infinite;

    white-space:nowrap;

}

.floating-tab::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--pink);

    flex-shrink:0;

}

.tab-1{
    top:0;
    left:40px;
}

.tab-2{
    top:55px;
    left:190px;
}

.tab-3{
    top:110px;
    left:335px;
}

.tab-4{
    top:165px;
    left:80px;
}

.tab-5{
    top:220px;
    left:250px;
}

.tab-6{
    top:275px;
    left:320px;
}

.tab-7{
    top:330px;
    left:150px;
}

.tab-8{
    top:385px;
    left:325px;
}

.tab-9{
    top:440px;
    left:45px;
}

.tab-10{
    top:495px;
    left:210px;
}

.tab-11{
    top:550px;
    left:335px;
}

.tab-12{
    top:605px;
    left:125px;
}

.browser{

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    max-width:620px;

}


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

.philosophy{

    margin-top:40px;

}

.philosophy .section-title{

    max-width:980px;

    font-size:clamp(3rem,5vw,5.2rem);

    line-height:1.05;

}

.philosophy .section-title em{

    color:var(--rose);

    font-style:italic;

}

.philosophy-grid{

    display:grid;

    grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);

    gap:90px;

    align-items:start;

}

.philosophy-text{

    width:100%;

    max-width:700px;

}

.philosophy-text p{

    margin-bottom:24px;

}

.philosophy-card{

    background:#fff;

    border:1px solid rgba(244,184,200,0.7);

    border-radius:24px;

    padding:42px;

    box-shadow:0 12px 30px rgba(31,31,31,.05);

    align-self:start;

}

.card-label{

    display:block;

    font-size:.72rem;

    letter-spacing:3px;

    color:var(--subtle);

    margin-bottom:24px;

}

.philosophy-card h3{

    font-size:2.2rem;

    line-height:1.05;

    margin-bottom:18px;

}


/*==========================================================
WHAT I DO
==========================================================*/

.services-preview{

    margin-top:70px;

}

.services-preview .section-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:40px;

    margin-bottom:60px;

}

.services-grid{

    display:grid;

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

    gap:24px;

    max-width:1260px;

}

.service-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:22px;

    padding:34px;

    transition:var(--transition);

    box-shadow:0 16px 45px rgba(20,20,20,.06);

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:var(--rose);

}

.service-number{

    display:block;

    font-size:.72rem;

    letter-spacing:3px;

    color:var(--subtle);

    margin-bottom:32px;

}

.service-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.service-icon{

    color:var(--rose);

    font-size:1.2rem;

}

.service-card h3{

    font-size:2.2rem;

    margin-bottom:18px;

}

.service-card p{

    max-width:320px;

}

.pricing-link{

    font-size:.9rem;

    color:var(--subtle);

    border-bottom:1px solid currentColor;

    padding-bottom:2px;

    transition:var(--transition);

}

.pricing-link:hover{

    color:var(--rose);

}

/*==========================================================
FEATURED CASE STUDY
==========================================================*/

.featured-project{

    margin-top:70px;

}

.project-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    background:#fff;

    border:1px solid var(--border);

    border-radius:32px;

    padding:70px;

    box-shadow:var(--shadow);

}

.case-study-label{

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.72rem;

    margin-bottom:20px;

}

.project-title{

    font-size:clamp(3rem,5vw,4.5rem);

    line-height:.95;

    margin-bottom:25px;

}

.project-description{

    max-width:520px;

    margin-bottom:40px;

}

.project-stats{

    display:grid;

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

    gap:25px;

    margin-bottom:40px;

}

.project-stats span{

    display:block;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:2px;

    color:var(--subtle);

    margin-bottom:8px;

}

.project-stats strong{

    font-weight:600;

    color:var(--text);

}

.project-preview {
    height: 520px;
    background: linear-gradient(180deg, #ffffff, #f5f5f5);
    border: 1px solid var(--border);
    border-radius: 18px !important;
    overflow: hidden !important;
}

.project-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 18px !important;
}

.about-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 18px;
}

.text-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-weight:600;

    transition:var(--transition);

}

.text-link:hover{

    gap:14px;

}

/* =========================
   PORTFOLIO PROJECTS
========================= */

.portfolio-project {
    width: min(92%, var(--container));
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 160px;
}

.portfolio-project .section-eyebrow {
    margin-bottom: 35px;
}

.portfolio-preview {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(42, 42, 42, 0.12);
    border-radius: 18px;
    background: #f5f3f1;
    margin-bottom: 45px;
}

.portfolio-preview video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.portfolio-project-content {
    max-width: 900px;
}

.portfolio-project-content .section-title {
    margin-bottom: 20px;
}

.portfolio-project-content > div:first-child p {
    max-width: 700px;
}

.portfolio-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin: 30px 0;
}

.portfolio-details span {
    display: block;
    padding: 12px 18px;
    border: 1px solid rgba(42, 42, 42, 0.12);
    border-radius: 999px;
    font-size: 13px;
    color: #666;
}

/* =========================
   COMING SOON
========================= */

.portfolio-placeholder {
    min-height: 360px;
    border: 1px solid rgba(42, 42, 42, 0.12);
    border-radius: 22px;
    background: #f5f3f1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 55px 40px;
}

.placeholder-content {
    max-width: 600px;
}

.placeholder-number {
    display: block;
    font-size: 12px;
    letter-spacing: 0.15em;
    color: #c99aa7;
    margin-bottom: 25px;
}

.placeholder-content h2 {
    font-family: var(--serif-font);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 400;
    line-height: 1.05;
    margin-bottom: 25px;
}

.placeholder-content p {
    max-width: 500px;
    margin: 0 auto 30px;
}

.placeholder-status {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #999;
}

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

@media (max-width: 768px) {

    .portfolio-project {
        margin-bottom: 100px;
    }

    .portfolio-preview {
        border-radius: 14px;
        margin-bottom: 30px;
    }

    .portfolio-details {
        grid-template-columns: 1fr;
    }

    .portfolio-placeholder {
        min-height: 400px;
        padding: 50px 25px;
        border-radius: 14px;
    }

    .placeholder-content h2 {
        font-size: 40px;
    }

}

/*==========================================================
PROCESS
==========================================================*/

.process{

    margin-top:70px;

}

.process-list{

    max-width:760px;

    margin:70px 0 0;

}

.process-list li{

    display:grid;

    grid-template-columns:80px 1fr;

    gap:30px;

    align-items:flex-start;

    margin-bottom:50px;

}

.process-number{

    font-family:'Fraunces',serif;

    font-size:2rem;

    font-style:italic;

    color:var(--rose);

}

.process-list h3{

    font-size:2.4rem;

    margin-bottom:12px;

}

.process-list div{

    border-bottom:1px solid var(--border);

    padding-bottom:45px;

}


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

.about-preview{

    margin-top:70px;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-placeholder{

    aspect-ratio:4/5;

    border-radius:30px;

    border:1px solid var(--border);

    background:linear-gradient(135deg,#fde8ef,#f4f2ee);

    position:relative;

    overflow:hidden;

}

.about-name{

    position:absolute;

    inset:0;

    display:grid;

    place-items:center;

    font-family:'Fraunces',serif;

    font-size:5rem;

    font-style:italic;

    color:rgba(31,31,31,.15);

}

.about-tag{

    position:absolute;

    left:30px;

    bottom:30px;

    background:#fff;

    border:1px solid var(--border);

    padding:12px 18px;

    border-radius:999px;

    font-size:.8rem;

}

.about-content p{

    max-width:520px;

    margin:35px 0 45px;

}

/* =========================
   MY STORY
========================= */

.story-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
    margin-top: 50px;
}

.story-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(42, 42, 42, 0.12);
    border-radius: 18px;
    overflow: hidden;
    background: #f4f1ee;
}

.story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.15);
}

.story-content {
    max-width: 600px;
}

.story-content .section-title {
    margin-bottom: 35px;
}

.story-content .investment-card {
    margin: 0;
}

.story-content {
    order: 1;
}

.story-image {
    order: 2;
}

/* MOBILE */

@media (max-width: 768px) {

    .story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 35px;
    }

    .story-image {
        aspect-ratio: 4 / 5;
    }

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

}

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

.final-cta{

    margin-top:70px;

    text-align:center;

}

.cta-wrapper{

    max-width:900px;

    margin:auto;

}

.cta-wrapper .section-eyebrow{

    justify-content:center;

}

.cta-wrapper h2{

    font-size:clamp(4rem,7vw,7rem);

    line-height:.95;

    margin:30px auto;

    text-align:center;

    width:100%;

}

.cta-wrapper p{

    max-width:600px;

    margin:0 auto 45px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.signature{

    margin-top:70px;

    display:flex;

    justify-content:center;

}

.signature img{

    display:block;

    width:260px;

    max-width:70%;

    height:auto;

}

.project-cta-buttons {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 24px;
}

/*==========================================================
FOOTER
==========================================================*/

.footer{

    margin-top:100px;

    padding:80px 0 40px;

    border-top:1px solid var(--border);

    background:var(--background);

}

.footer-content{

    text-align:center;

    max-width:700px;

    margin:0 auto;

}

.footer-content h3{

    font-size:2rem;

    margin-bottom:14px;

}

.footer-content p{

    color:var(--subtle);

    margin-bottom:24px;

}

.footer-signature{

    width:170px;

    display:block;

    margin:18px auto 0;

}

.footer-group{

    margin-bottom:40px;

}

.footer-heading{

    display:block;

    font-size:.75rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--subtle);

    margin-bottom:18px;

}

.footer-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:32px;

    flex-wrap:wrap;

}

.footer-nav a{

    position:relative;

    color:var(--text);

    text-decoration:none;

    transition:.3s ease;

}

.footer-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:1px;

    background:var(--accent);

    transition:.3s ease;

}

.footer-nav a:hover::after{

    width:100%;

}

.footer-nav a:hover{

    color:var(--accent);

}
.footer-nav a:hover{

    color:var(--accent);

}

.footer-bottom{

    border-top:1px solid var(--border);

    padding-top:30px;

    text-align:center;

}

.footer-bottom p{

    color:var(--subtle);

    font-size:.9rem;

}

.footer-eyebrow{

    justify-content:center;

    margin-bottom:18px;

}
.footer-links{

    max-width:900px;

    margin:45px auto;

}

.footer-group:not(:last-child){

    margin-bottom:28px;

}

.footer-nav a:hover{

    color:var(--accent);

    transform:translateY(-2px);

}

/*==========================================================
SERVICES HERO
==========================================================*/

.services-hero{

    padding-top:40px;

}

.services-hero h1{

    margin-top:30px;

    margin-bottom:30px;

}

.hero-subtitle{

    max-width:650px;

    font-size:1.15rem;

    line-height:1.8;

    color:var(--subtle);

}

.services-hero{
    padding-top:40px;
    text-align:left;
}

.services-hero .section-eyebrow{

    justify-content:flex-start;

}
/*==========================================================
PACKAGES
==========================================================*/

.services-packages{

    margin-top:70px;

}

.packages-list{

    margin-top:70px;

    border-top:1px solid var(--border);

}

.package-row{

    display:grid;

    grid-template-columns:100px 1.2fr 1fr 40px;

    gap:50px;

    align-items:center;

    padding:45px 0;

    border-bottom:1px solid var(--border);

    text-decoration:none;

    color:inherit;

    transition:.35s ease;

}

.package-row:hover{

    padding-left:18px;

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

}

.package-number{

    font-family:'Fraunces',serif;

    font-style:italic;

    color:var(--rose);

    font-size:1.5rem;

}

.package-title h3{

    font-size:2.4rem;

    margin-bottom:12px;

}

.package-title p{

    color:var(--subtle);

}

.package-description p{

    margin-bottom:12px;

    color:var(--subtle);

    line-height:1.7;

}

.package-description span{

    font-size:.75rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--subtle);

}

.package-row i{

    justify-self:end;

    font-size:1.2rem;

    transition:.35s;

}

.package-row:hover i{

    transform:translate(6px,-6px);

    color:var(--rose);

}

.soon{

    opacity:.65;

    cursor:default;

}

.soon:hover{

    padding-left:0;

    background:none;

}

.soon-badge{

    justify-self:end;

    border:1px solid var(--border);

    padding:8px 16px;

    border-radius:999px;

    font-size:.75rem;

    letter-spacing:2px;

    text-transform:uppercase;

}

/*==========================================================
COMPARISON TABLE
==========================================================*/

.package-comparison{

    margin-top:70px;

}

.comparison-table{

    margin-top:60px;

    overflow-x:auto;

    border:1px solid var(--border);

    border-radius:14px;

    background:#fff;

}

.comparison-table table{

    width:100%;

    border-collapse:collapse;

}

.comparison-table th{

    font-weight:600;

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:2px;

    color:var(--subtle);

    padding:26px;

    text-align:left;

    border-bottom:1px solid var(--border);

}

.comparison-table td{

    padding:22px 26px;

    border-bottom:1px solid var(--border);

}

.comparison-table tbody tr{

    transition:.3s;

}

.comparison-table tbody tr:hover{

    background:#faf8f6;

}

.comparison-table tbody tr:last-child td{

    border-bottom:none;

}

/* ACTIVE PACKAGE */

.launch-table th:nth-child(2),
.launch-table td:nth-child(2),

.growth-table th:nth-child(3),
.growth-table td:nth-child(3),

.ecommerce-table th:nth-child(4),
.ecommerce-table td:nth-child(4),

.bespoke-table th:nth-child(5),
.bespoke-table td:nth-child(5){

    background:#fdf5f7;
    font-weight:600;
    color:var(--heading);
}

.launch-table th:nth-child(2),
.growth-table th:nth-child(3),
.ecommerce-table th:nth-child(4),
.bespoke-table th:nth-child(5){

    letter-spacing:2px;
}

/*==========================================================
CARE PLANS
==========================================================*/

.care-plans{

    margin-top:70px;

}

.care-grid{

    display:grid;

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

    gap:28px;

    margin-top:60px;

}

.care-card{
    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    padding:36px;

    transition:.35s;
}

.care-card:hover{
    transform:translateY(-5px);

    border-color:var(--rose);
}

.care-card.featured{

    border:2px solid var(--rose);

}

.care-label{

    display:inline-block;

    margin-bottom:24px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:.72rem;

    color:var(--subtle);

}

.care-card h3{

    font-size:2rem;

    margin-bottom:20px;

}

.care-card ul{

    margin:28px 0;

    padding-left:18px;

}

.care-card li{

    margin-bottom:14px;

}

.text-link{

    color:var(--rose);

}

/*==========================================================
WEBSITE ENHANCEMENTS
==========================================================*/

.extras{

    margin-top:70px;

}

.extras-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:28px;

    margin-top:40px;

}

.project-overview-grid .extra-card {
    min-height: 150px;
    height: 180px;
}

.project-overview-grid .extra-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.extra-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    padding:34px;
    min-height:240px;
    height:100%;
    display:flex;
    flex-direction:column;
    transition:.35s ease;
    position:relative;
    box-sizing:border-box;
}

.extra-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(233,184,200,.18);

    color:var(--accent);

    margin-bottom:22px;

}

.extra-icon svg{

    width:22px;

    height:22px;

    stroke-width:1.8;

}

.extra-card h3{

    font-size:1.3rem;

    margin-bottom:14px;

}

.extra-card p{

    color:var(--subtle);

    line-height:1.8;

    margin-bottom:auto;

}

.extras .extra-card::after{

    content:"Available as an enhancement →";

    margin-top:26px;

    font-size:.85rem;

    color:var(--accent);

    font-weight:500;

}

.extra-card:hover{

    transform:translateY(-8px);

    border-color:var(--rose);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.instagram-emoji{
    display:inline-block;
    transform:translateY(-2px);
}

/*==========================================================
PACKAGE HERO
==========================================================*/

.package-hero{

    padding-top:40px;

}

.package-hero .container{

    max-width:1200px;

}

.package-hero .hero-title{

    margin-top:30px;

    margin-bottom:30px;

}

.package-hero .hero-subtitle{

    max-width:650px;

    font-size:1.15rem;

    line-height:1.8;

    color:var(--subtle);

    margin-bottom:45px;

}

/*==========================================================
WHO IT'S FOR
==========================================================*/

.who-for{

    margin-top:70px;

}

/*==========================================================
EVERYTHING INCLUDED
==========================================================*/

.included{

    margin-top:70px;

}

.included-grid{

    display:grid;

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

    gap:24px;

    margin-top:60px;

}

.included-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:22px;

    padding:36px;

    transition:var(--transition);

    box-shadow:0 16px 45px rgba(20,20,20,.06);

}

.included-card:hover{

    transform:translateY(-6px);

    border-color:var(--rose);

}

.card-number{

    display:block;

    margin-bottom:26px;

    font-size:.72rem;

    letter-spacing:3px;

    color:var(--subtle);

}

.included-card h3{

    font-size:2rem;

    margin-bottom:18px;

}

.included-card p{

    max-width:340px;

}

/*==========================================================
THE JOURNEY
==========================================================*/

.journey{

    margin-top:70px;

}

.journey-grid{

    display:grid;

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

    gap:22px;

    margin-top:60px;

}

.journey-step{

    background:#fff;

    border:1px solid var(--border);

    border-radius:22px;

    padding:30px;

    transition:var(--transition);

}

.journey-step:hover{

    transform:translateY(-6px);

    border-color:var(--rose);

}

.journey-step span{

    display:inline-block;

    margin-bottom:20px;

    font-family:'Fraunces',serif;

    color:var(--rose);

    font-style:italic;

    font-size:1.4rem;

}

.journey-step h3{

    font-size:1.7rem;

    margin-bottom:14px;

}

/*==========================================================
INVESTMENT
==========================================================*/

.investment {
    margin-top: 70px;
}

.investment-card {
    width: min(760px, 100%);
    margin: 60px auto 0;
    background: #fff8f9;
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 56px;
    box-shadow: 0 16px 45px rgba(20,20,20,.06);
    transition: .35s ease;
}

.investment-card:hover {
    transform: translateY(-5px);
    border-color: var(--rose);
}

.investment-content {
    max-width: 620px;
    margin: 0 auto;
}

.investment-label {
    display: inline-block;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--subtle);
    margin-bottom: 18px;
}

.investment-card h3 {
    font-size: 4rem;
    margin-bottom: 20px;
}

.investment-intro {
    max-width: 560px;
    margin-bottom: 30px;
}

.investment-includes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 40px;
    margin: 30px 0;
    padding: 24px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.investment-includes p {
    margin: 8px 0;
}

.investment-note {
    font-size: .85rem;
    color: var(--subtle);
    margin-bottom: 24px;
}

.investment-card .btn-primary {
    display: inline-block;
}

@media (max-width: 768px) {

    .investment-card {
        padding: 36px 28px;
    }

    .investment-card h3 {
        font-size: 2.8rem;
    }

    .investment-includes {
        grid-template-columns: 1fr;
        gap: 4px;
    }

}

/*==========================================================
PACKAGE FAQ
==========================================================*/

.package-faq{

    margin-top:70px;

}

.faq-list{

    margin-top:60px;

}

.faq-item{

    border-bottom:1px solid var(--border);

}

.faq-question{

    width:100%;

    background:none;

    border:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 0;

    cursor:pointer;

    font-size:1.1rem;

    font-weight:500;

    text-align:left;

}

.faq-question i{

    transition:.35s;

    color:var(--rose);

}

.faq-item.active {
    
    background:#fff8f9;

    border-radius:18px;

    padding-inline:24px;


}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.faq-answer p{

    padding-bottom:28px;

    color:var(--subtle);

    max-width:700px;

}

/*==========================================================
SCROLL REVEAL
==========================================================*/

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

img{

    transition:
        transform .8s ease,
        filter .8s ease;

}

img:hover{

    transform:scale(1.03);

}

/*==========================================================
LEGAL PAGES
==========================================================*/

.last-updated{

    margin-top:28px;

    color:var(--subtle);

    font-size:.9rem;

}

.legal-page{

    padding:80px 0;

}

.legal-section{

    margin-bottom:80px;

}

.legal-section:last-child{

    margin-bottom:0;

}

.legal-section p{

    max-width:760px;

    margin-bottom:18px;

}

.work-highlights{

    display:grid;

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

    gap:14px;

    margin:34px 0;

}

.work-highlights span{

    background:#fff;

    border:1px solid var(--border);

    border-radius:999px;

    padding:12px 18px;

    font-size:.9rem;

    text-align:center;

}

.contact-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(233,184,200,.18);

    color:var(--accent);

    margin-bottom:22px;

}

.contact-icon svg{

    width:22px;

    height:22px;

    stroke-width:1.8;

}


/* ABOUT HERO ALIGNMENT */

.about-page .package-hero .container{

    max-width:1200px;

}

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

.about-hero{

    padding-top:40px;

}

.about-hero .section-eyebrow{

    justify-content:flex-start;

}


/*==========================================================
CONTACT HERO
==========================================================*/

.contact-hero{

    padding-top:40px;

}

.contact-hero .section-eyebrow{

    justify-content:flex-start;

}

.section-heading {
    margin-bottom: 50px;
}

.section-description {
    margin-bottom: 22px;
}

.section-description.response-time {
    margin-top: 14px;
    margin-bottom: 0;
}

.section-heading {
    margin-bottom: 50px;
}

.section-heading .section-title {
    margin-bottom: 30px;
}

/*==========================================================
CASE STUDY HERO
==========================================================*/

.case-study-hero{

    padding-top:40px;

}

.case-study-hero .container{

    max-width:1200px;

}

.case-study-hero .section-eyebrow{

    justify-content:flex-start;

}

.case-study-hero .hero-title{

    margin-top:30px;

    margin-bottom:30px;

}

.case-study-hero .hero-subtitle{

    max-width:650px;

    font-size:1.15rem;

    line-height:1.8;

    color:var(--subtle);

    margin-bottom:45px;

}

.audience-pills{

    display:grid;

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

    gap:18px;

    margin-top:50px;

}

.audience-pill{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:20px 24px;

    min-height:72px;

    display:flex;

    align-items:center;

    font-size:.9rem;

    line-height:1.5;

    color:var(--subtle);

    box-sizing:border-box;

}

/* =========================================================
   WEBSITE SHOWCASE
========================================================= */

.website-showcase {
    padding: 140px 0;
    overflow: hidden;
}

.website-showcase .section-heading {
    max-width: 700px;
    margin-bottom: 70px;
}


/* FEATURED VIDEO */

.website-feature {
    margin-bottom: 90px;
}

.website-feature-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(42, 42, 42, 0.12);
    border-radius: 18px;
    background: #f5f5f5;
}

.website-feature-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.website-feature-caption {
    display: flex;
    gap: 25px;
    margin-top: 22px;
    align-items: flex-start;
}

.website-feature-caption > span {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #cfa6b1;
    padding-top: 5px;
}

.website-feature-caption h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 400;
}

.website-feature-caption p {
    margin: 0;
    max-width: 550px;
}


/* HORIZONTAL GALLERY */

.website-gallery-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}

.website-gallery {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    justify-content: center;
    padding: 10px max(6vw, calc((100vw - 1100px) / 2)) 30px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(42, 42, 42, 0.25) transparent;
}

.website-gallery::-webkit-scrollbar {
    height: 5px;
}

.website-gallery::-webkit-scrollbar-track {
    background: transparent;
}

.website-gallery::-webkit-scrollbar-thumb {
    background: rgba(42, 42, 42, 0.25);
    border-radius: 20px;
}


/* GALLERY CARDS */

.website-gallery-item {
    flex: 0 0 min(650px, 78vw);
    margin: 0;
    scroll-snap-align: start;
}

.website-gallery-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(42, 42, 42, 0.12);
    border-radius: 16px;
    background: #f5f5f5;
}

.website-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.website-gallery-item:hover .website-gallery-image img {
    transform: scale(1.025);
}


/* CAPTIONS */

.website-gallery-item figcaption {
    display: flex;
    gap: 18px;
    margin-top: 18px;
    align-items: flex-start;
}

.website-gallery-item figcaption > span {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #cfa6b1;
    padding-top: 4px;
}

.website-gallery-item h3 {
    margin: 0 0 5px;
    font-size: 20px;
    font-weight: 400;
}

.website-gallery-item p {
    margin: 0;
    font-size: 13px;
}


/* MOBILE */

@media (max-width: 768px) {

    .website-showcase {
        padding: 90px 0;
    }

    .website-showcase .section-heading {
        margin-bottom: 45px;
    }

    .website-feature {
        margin-bottom: 60px;
    }

    .website-feature-media {
        border-radius: 12px;
    }

    .website-gallery {
        gap: 18px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .website-gallery-item {
        flex: 0 0 82vw;
    }

}

.legal-section {
    padding: 80px 0;
    border-bottom: 1px solid rgba(42, 42, 42, 0.10);
}

.legal-section:last-child {
    border-bottom: none;
}

.legal-section .section-eyebrow {
    margin-bottom: 24px;
}

.legal-section .section-title {
    margin-bottom: 28px;
}

.legal-section p {
    max-width: 850px;
    margin-bottom: 18px;
    line-height: 1.8;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.last-updated {
    margin-top: 25px;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #888;
}

.hero-content h1 .text-rose {
    color: #d9a8b5;
}

.live-website-heading {
    text-align: center;
}

.live-website-heading .section-eyebrow {
    justify-content: center;
}

.live-website-heading .section-title {
    text-align: center;
}

.live-website-heading .section-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}