*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }  :root {    --rose:     #C4748A;    --rose-dk:  #8B3A5A;    --blush:    #F2D4DA;    --petal:    #FDF5F7;    --mauve:    #C9A0B0;    --cream:    #FAF7F2;    --warm:     #EDE6DC;    --dark:     #2A1A22;    --mid:      #6B4A58;    --gold:     #C4A882;  }  html { scroll-behavior: smooth; }  body {    font-family: 'Lato', sans-serif;    font-weight: 300;    color: var(--dark);    background: var(--cream);    overflow-x: hidden;  }  /* ── HERO ─────────────────────────────────────────────── */  .hero {    min-height: 100vh;    display: grid;    grid-template-columns: 2fr 3fr;    position: relative;    overflow: hidden;  }  .hero-image {    position: relative;    overflow: hidden;    max-height: 100vh;  }  .hero-image img {    width: 100%;    height: 100%;    object-fit: cover;    object-position: center 8%;    filter: saturate(0.9);    image-rendering: -webkit-optimize-contrast;  }  .hero-image::after {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(to right, transparent 60%, var(--cream) 100%);  }  .hero-content {    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    text-align: center;    padding: 80px 60px 80px 40px;    position: relative;  }  .hero-eyebrow {    font-size: 8px;    letter-spacing: 4px;    text-transform: uppercase;    color: var(--rose);    font-weight: 500;    margin-bottom: 24px;    opacity: 0;    animation: fadeUp 0.8s ease forwards 0.2s;    white-space: nowrap;  }  .hero-name {    font-family: 'Cormorant Garamond', serif;    font-size: clamp(52px, 6vw, 80px);    font-weight: 300;    line-height: 1;    color: var(--dark);    margin-bottom: 8px;    opacity: 0;    animation: fadeUp 0.8s ease forwards 0.4s;  }  .own-word { color: #1A1A1A; }  @media (max-width: 768px) { .own-word { color: var(--dark); } }  .hero-name span[style*="color:var(--rose)"] { color: #E8A0B4 !important; }  .hero-handle {    font-size: 11px;    letter-spacing: 4px;    text-transform: lowercase;    color: var(--mauve);    margin-bottom: 40px;    opacity: 0;    animation: fadeUp 0.8s ease forwards 0.5s;  }  .hero-divider {    width: 40px;    height: 1px;    background: var(--rose);    margin-bottom: 32px;    opacity: 0;    animation: fadeUp 0.8s ease forwards 0.6s;  }  .hero-tagline {    font-family: 'Josefin Sans', sans-serif;    font-size: clamp(10px, 1vw, 12px);    font-style: normal;    font-weight: 300;    letter-spacing: 3px;    text-transform: uppercase;    line-height: 1.8;    white-space: nowrap;    color: var(--mid);    max-width: none;    margin-bottom: 48px;    opacity: 0;    animation: fadeUp 0.8s ease forwards 0.7s;  }  .hero-stats {    display: flex;    gap: 40px;    opacity: 0;    animation: fadeUp 0.8s ease forwards 0.9s;  }  .stat { text-align: left; }  .stat-num {    font-family: 'Cormorant Garamond', serif;    font-size: 36px;    font-weight: 400;    color: var(--rose-dk);    line-height: 1;  }  .stat-label {    font-family: 'Josefin Sans', sans-serif;    font-size: 9px;    letter-spacing: 3px;    text-transform: uppercase;    color: var(--mauve);    margin-top: 4px;  }  .hero-pink-bar {    position: absolute;    top: 0;    right: 0;    width: 4px;    height: 100%;    background: linear-gradient(to bottom, var(--blush), var(--rose), var(--blush));    opacity: 0.4;  }  /* ── NAVIGATION ────────────────────────────────────────── */  nav {    position: fixed;    top: 0;    left: 0;    right: 0;    z-index: 100;    display: flex;    justify-content: space-between;    align-items: center;    padding: 24px 60px;    background: rgba(250, 247, 242, 0.9);    backdrop-filter: blur(12px);    border-bottom: 1px solid rgba(196, 116, 138, 0.15);  }  .nav-logo {    font-family: 'Cormorant Garamond', serif;    font-size: 18px;    font-style: italic;    color: var(--rose-dk);    text-decoration: none;  }  .nav-links {    display: flex;    gap: 40px;    list-style: none;  }  .nav-links a {    font-family: 'Josefin Sans', sans-serif;    font-size: 10px;    letter-spacing: 3px;    text-transform: uppercase;    color: var(--mid);    text-decoration: none;    transition: color 0.3s;  }  .nav-links a:hover { color: var(--rose); }  /* ── SECTIONS ──────────────────────────────────────────── */  section {    padding: 100px 60px;    max-width: 1200px;    margin: 0 auto;  }  .section-eyebrow {    font-family: 'Cormorant Garamond', serif;    font-size: 12px;    letter-spacing: 5px;    text-transform: uppercase;    color: var(--rose);    font-weight: 600;    margin-bottom: 4px;  }  .section-title {    font-family: 'Cormorant Garamond', serif;    font-size: clamp(36px, 4vw, 56px);    font-weight: 300;    line-height: 1.1;    color: var(--dark);    margin-bottom: 40px;  }  .section-title em { font-style: italic; color: var(--rose); }  /* ── ABOUT ─────────────────────────────────────────────── */  #about { max-width: 1200px; }  .about-row {    display: grid;    grid-template-columns: 1.8fr 1fr;    gap: 80px;    align-items: center;    margin-bottom: 80px;  }  .about-row-reverse {    grid-template-columns: 1fr 1.8fr;  }  .about-row-image img {    width: 100%;    height: 100%;    object-fit: cover;    object-position: center top;    display: block;  }  .about-row-image { overflow: hidden; }  .about-row-text { text-align: left; }  .about-row-text p {    font-size: 15px;    line-height: 1.3;    color: var(--mid);    margin-bottom: 28px;    font-weight: 300;  }  @media (max-width: 768px) {    .about-row {      grid-template-columns: 1fr;      gap: 32px;      margin-bottom: 48px;    }    .about-row-reverse .about-row-image { order: 1; }  .about-row-reverse .about-row-text { order: -1; }  }  .about-grid {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 80px;    align-items: start;  }  .about-image {    position: relative;    align-self: start;  }  .about-image img {    width: 100%;    height: 460px;    object-fit: cover;    object-position: center 30%;  }  .about-image::before {    content: '';    position: absolute;    top: -16px;    left: -16px;    right: 16px;    bottom: 16px;    border: 1px solid var(--blush);    z-index: -1;  }  .about-text p {    font-size: 18px;    line-height: 1.6;    color: var(--dark);    margin-bottom: 28px;    text-align: left;    font-weight: 400;    max-width: 680px;  }  .about-text .section-eyebrow { text-align: center; }  .about-text .section-title { text-align: center; }  @media (min-width: 769px) {    .about-text p {      font-size: 18px;      line-height: 1.6;      color: var(--dark);      max-width: 680px;      margin-left: 0;      margin-right: auto;      margin-bottom: 28px;      letter-spacing: 0.3px;      word-spacing: 1px;      text-align: left;      font-weight: 400;    }    .about-text .section-eyebrow { text-align: left; }    .about-text .section-title { text-align: left; }    .about-text { text-align: left; }    .about-mantra { text-align: left; }    .about-title { text-align: center !important; }    .about-image { order: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; align-self: start; width: 100%; }    .about-image > div { aspect-ratio: 2/3; overflow: hidden; }    .about-image > div img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }    .about-grid { grid-template-columns: 1fr; gap: 48px; }    .about-text { order: 2; text-align: center !important; max-width: 100%; margin: 0 auto; }    .about-text p { text-align: left !important; margin-left: 0; margin-right: auto; color: var(--dark); font-weight: 400; }    .about-text .section-eyebrow { text-align: center !important; }    .about-text .section-title { text-align: center !important; }    .about-mantra { text-align: center !important; }  }  @media (min-width: 769px) {    .brand-title { color: var(--dark) !important; }    .brand-title em { color: var(--rose) !important; }  }      max-width: 700px;      margin: 0 auto;      text-align: center;    }    #work > div:first-child p,    #work > div:first-child h2,    #work > div:first-child .section-eyebrow {      text-align: center;    }  }  .about-text p strong {    color: var(--rose-dk);    font-weight: 400;  }  .about-mantra {    font-family: 'Cormorant Garamond', serif;    font-size: 22px;    font-style: italic;    color: var(--rose-dk);    line-height: 1.6;    border-left: 2px solid var(--rose);    padding-left: 24px;    margin-top: 32px;  }  /* ── STATS BAND ────────────────────────────────────────── */  .stats-band {    background: var(--dark);    padding: 60px;    max-width: 100%;  }  .stats-band-inner {    max-width: 1200px;    margin: 0 auto;    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 40px;    text-align: center;    justify-items: center;    align-items: start;  }  .stats-band .stat-num {    font-size: 48px;    color: var(--blush);    min-height: 64px;    display: flex;    align-items: center;    justify-content: center;  }  .stats-band .stat {    text-align: center;    display: flex;    flex-direction: column;    align-items: center;    justify-content: flex-start;  }  .stats-band .stat-label {    color: var(--mauve);    min-height: 40px;    display: flex;    align-items: center;    justify-content: center;    text-align: center;  }  .stats-band .stat-desc {    font-size: 10px;    color: rgba(201, 160, 176, 0.6);    margin-top: 4px;    letter-spacing: 1px;  }  /* ── BRAND WORK ────────────────────────────────────────── */  .brand-card {    background: white;    margin-bottom: 80px;    display: grid;    grid-template-columns: 1fr 1fr;    overflow: hidden;    box-shadow: 0 2px 40px rgba(139, 58, 90, 0.06);  }  .brand-card.reverse { direction: rtl; }  .brand-card.reverse > * { direction: ltr; }  .brand-card-content {    padding: 60px;    display: flex;    flex-direction: column;    justify-content: center;  }  .brand-logo-text {    font-size: 10px;    letter-spacing: 5px;    text-transform: uppercase;    color: var(--mauve);    margin-bottom: 20px;    display: flex;    align-items: center;    gap: 12px;  }  .brand-logo-text::after {    content: '';    flex: 1;    height: 1px;    background: var(--blush);  }  .brand-card-title {    font-family: 'Cormorant Garamond', serif;    font-size: 32px;    font-weight: 300;    color: var(--dark);    margin-bottom: 16px;    line-height: 1.2;  }  .brand-card-title em { font-style: italic; color: var(--rose); }  .brand-card-desc {    font-size: 18px;    line-height: 1.8;    color: var(--mid);    margin-bottom: 32px;  }  .video-links {    display: flex;    flex-direction: column;    gap: 12px;  }  .video-link {    display: flex;    align-items: center;    gap: 12px;    text-decoration: none;    padding: 14px 20px;    border: 1px solid var(--blush);    color: var(--rose-dk);    font-size: 11px;    letter-spacing: 2px;    text-transform: uppercase;    transition: all 0.3s ease;    background: var(--petal);  }  .video-link:hover {    background: var(--rose);    color: white;    border-color: var(--rose);  }  .video-link-icon {    width: 28px;    height: 28px;    border-radius: 50%;    background: var(--blush);    display: flex;    align-items: center;    justify-content: center;    font-size: 12px;    transition: background 0.3s;  }  .video-link:hover .video-link-icon {    background: rgba(255,255,255,0.2);  }  .brand-card-image {    position: relative;    overflow: hidden;    min-height: 400px;    background: var(--warm);  }  .brand-card-image img {    width: 100%;    height: 100%;    object-fit: cover;    transition: transform 0.6s ease;  }  .brand-card:hover .brand-card-image img {    transform: scale(1.03);  }  /* ── ALSO WORKED WITH ──────────────────────────────────── */  .collab-strip {    display: flex;    gap: 48px;    align-items: center;    flex-wrap: wrap;    margin-top: 40px;  }  .collab-name {    font-family: 'Cormorant Garamond', serif;    font-size: 32px;    font-style: italic;    color: var(--mauve);    font-weight: 300;    position: relative;    padding-bottom: 4px;  }  .collab-name::after {    content: '';    position: absolute;    bottom: 0;    left: 0;    width: 0;    height: 1px;    background: var(--rose);    transition: width 0.3s;  }  .collab-name:hover::after { width: 100%; }  /* ── CONTENT GALLERY ───────────────────────────────────── */  .gallery-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 2px;    margin-top: 40px;  }  .gallery-item {    aspect-ratio: 3/4;    overflow: hidden;    position: relative;  }  .gallery-item img {    width: 100%;    height: 100%;    object-fit: cover;    object-position: center top;    transition: transform 0.5s ease;    filter: saturate(0.85);  }  .gallery-item:hover img {    transform: scale(1.05);    filter: saturate(1);  }  /* ── WHAT I OFFER ──────────────────────────────────────── */  .offers-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 32px;    margin-top: 48px;  }  .offer-card {    padding: 40px 32px;    background: white;    border-top: 2px solid var(--blush);  }  .offer-num {    font-family: 'Cormorant Garamond', serif;    font-size: 48px;    color: var(--blush);    font-weight: 300;    line-height: 1;    margin-bottom: 16px;    text-align: center;  }  .offer-title {    font-family: 'Josefin Sans', sans-serif;    font-size: 11px;    letter-spacing: 3px;    text-transform: uppercase;    color: var(--rose-dk);    margin-bottom: 12px;    font-weight: 600;    text-align: center;  }  .offer-desc {    font-size: 18px;    line-height: 1.8;    color: var(--mid);    text-align: center;  }  /* ── INSTAGRAM GRID ────────────────────────────────────── */  .ig-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 8px;    margin-bottom: 48px;  }  .ig-item {    aspect-ratio: 1/1;    overflow: hidden;    position: relative;  }  .ig-item img {    width: 100%;    height: 100%;    object-fit: cover;    transition: transform 0.4s ease;    filter: saturate(0.9);  }  .ig-item:hover img {    transform: scale(1.07);    filter: saturate(1);  }  .ig-placeholder {    width: 100%;    height: 100%;    background: linear-gradient(135deg, var(--blush) 0%, var(--warm) 50%, var(--mauve) 100%);    transition: transform 0.4s ease;  }  .ig-item:hover .ig-placeholder {    transform: scale(1.07);  }  .ig-follow-btn {    display: inline-block;    padding: 16px 48px;    border: 1px solid var(--rose);    color: var(--rose-dk);    text-decoration: none;    font-size: 10px;    letter-spacing: 4px;    text-transform: uppercase;    transition: all 0.3s ease;  }  .ig-follow-btn:hover {    background: var(--rose);    color: white;  }  @media (max-width: 768px) {    .ig-grid { gap: 4px; }  }  /* ── CONTACT ───────────────────────────────────────────── */  .contact-section {    background: var(--dark);    padding: 100px 60px;    text-align: center;    max-width: 100%;  }  .contact-inner {    max-width: 600px;    margin: 0 auto;  }  .contact-section .section-eyebrow { color: var(--mauve); }  .contact-section .section-title {    color: var(--blush);    margin-bottom: 16px;  }  .contact-section .section-title em { color: var(--rose); }  .contact-desc {    font-size: 14px;    line-height: 1.8;    color: var(--mauve);    margin-bottom: 48px;  }  .contact-button {    display: inline-block;    padding: 18px 48px;    background: var(--rose);    color: white;    text-decoration: none;    font-size: 10px;    letter-spacing: 4px;    text-transform: uppercase;    transition: background 0.3s;  }  .contact-button:hover { background: var(--rose-dk); }  .contact-handles {    margin-top: 48px;    display: flex;    justify-content: center;    gap: 40px;  }  .contact-handle {    font-size: 11px;    letter-spacing: 2px;    color: var(--mauve);    text-transform: uppercase;  }  /* ── FOOTER ────────────────────────────────────────────── */  footer {    background: var(--dark);    border-top: 1px solid rgba(201, 160, 176, 0.15);    padding: 32px 60px;    display: flex;    justify-content: space-between;    align-items: center;    max-width: 100%;  }  .footer-logo {    font-family: 'Cormorant Garamond', serif;    font-size: 16px;    font-style: italic;    color: var(--rose);  }  .footer-copy {    font-size: 10px;    letter-spacing: 2px;    color: var(--mauve);    opacity: 0.6;  }  /* ── ANIMATIONS ────────────────────────────────────────── */  @keyframes fadeUp {    from { opacity: 0; transform: translateY(24px); }    to   { opacity: 1; transform: translateY(0); }  }  @keyframes marquee {    from { transform: translateX(0); }    to   { transform: translateX(-50%); }  }  .fade-in {    opacity: 0;    transform: translateY(32px);    transition: opacity 0.7s ease, transform 0.7s ease;  }  .fade-in.visible {    opacity: 1;    transform: translateY(0);  }  /* ── PINK ACCENT LINE ──────────────────────────────────── */  .pink-line {    width: 1px;    height: 80px;    background: linear-gradient(to bottom, transparent, var(--rose), transparent);    margin: 0 auto 48px;  }  /* ── BRAND SECTION SPACING ──────────────────────────────── */    #work { padding-top: 60px !important; padding-bottom: 40px !important; }  #work .section-title { margin-bottom: 12px; }  /* ── RESPONSIVE ────────────────────────────────────────── */  @media (max-width: 768px) {    nav { padding: 20px 24px; }    .nav-links { display: none; }    /* Hero */    .hero { grid-template-columns: 1fr !important; min-height: auto; }    .hero-image { height: 45vh !important; max-height: 360px; overflow: hidden; display: block !important; }    .hero-image::after { background: linear-gradient(to top, var(--cream) 0%, transparent 60%); }    .hero-content { padding: 32px 24px; overflow: hidden; }    .hero-tagline { white-space: nowrap !important; font-size: 8px !important; letter-spacing: 1.5px !important; text-align: center; }    .hero-name { font-size: clamp(36px, 8vw, 52px) !important; }    .hero-handle { font-size: 9px !important; letter-spacing: 2px !important; }    /* Fix text overflow everywhere */    body { overflow-x: hidden; }    section { padding: 48px 24px; max-width: 100%; overflow: hidden; }    p, h1, h2, h3, .about-text p {       max-width: 100%;       word-wrap: break-word;      overflow-wrap: break-word;    }    /* About title white on dark mobile background */    .about-title { color: var(--dark) !important; white-space: nowrap; font-size: clamp(14px, 4vw, 20px) !important; letter-spacing: 2px !important; }    .brand-title { color: var(--rose) !important; }    .brand-title em { color: var(--dark) !important; }    /* Her edit title - lighter pink on mobile */    .her-edit-title { color: var(--dark) !important; }    .her-edit-title em { color: var(--rose) !important; }    .about-grid { grid-template-columns: 1fr; gap: 32px; display: flex; flex-direction: column; }    .about-image { max-width: 100%; order: 1; }    .about-image img { height: 320px; max-width: 100%; }    .about-image::before { display: none; }    .about-text { padding: 0; max-width: 100%; order: 2; position: static; z-index: auto; }    .about-image { order: 2; }    @media (min-width: 769px) {      .about-text { order: 1; }      .about-image { order: 2; }    }    /* Brand cards */    .brand-card { display: block; max-width: 100%; }    #work div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }    .brand-card.reverse { direction: ltr; }    .brand-card-content { padding: 32px 24px; }    .brand-card-image { min-height: 280px; max-height: 320px; }    /* Gallery */    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }    /* Offers */    .offers-grid { grid-template-columns: 1fr; gap: 16px; }    /* Stats band */    .stats-band { padding: 40px 24px; }    .stats-band-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }    /* Contact */    .contact-section { padding: 60px 24px; }    .contact-handles { flex-direction: column; gap: 12px; }    /* Footer */    footer { padding: 24px; flex-direction: column; gap: 12px; text-align: center; }    /* Fix any horizontal overflow */    .hero, .stats-band, .about-grid, .brand-card, section { overflow-x: hidden; }    .brand-row { grid-template-columns: 1fr !important; padding: 0 24px !important; }    .about-row-text { text-align: center !important; }  .about-row-text p, .about-row-text h3 { text-align: center !important; }    #work div[style*="grid-template-columns"] { gap: 16px !important; }  .brand-row { gap: 16px !important; }  .brand-card { margin-bottom: 16px !important; }    .also-worked-banner { margin-top: 0 !important; }    .about-title { display: none !important; }  .about-title + p { display: none !important; }  }