/* Holy Kow Weddings scroll-story site
 Palette from purple Highland cow logo + political blue accents */

:root {
 --purple-deep: #2f1543;
 --purple: #5c2d82;
 --purple-mid: #7a45a0;
 --purple-soft: #a56fc4;
 --lavender: #d4b7e8;
 --lavender-mist: #f3eaf9;
 --blue: #1e4f9c;
 --blue-deep: #163a74;
 --blue-soft: #3d6fba;
 --cream: #fcfaf8;
 --ivory: #f7f2ec;
 --white: #ffffff;
 --ink: #1c1324;
 --ink-soft: #4d4158;
 --line: rgba(92, 45, 130, 0.12);
 --shadow: 0 22px 60px rgba(47, 21, 67, 0.12);
 --chrome-h: 64px;
 --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
 --font-script: "Great Vibes", "Segoe Script", cursive;
 --font-body: "Montserrat", system-ui, -apple-system, sans-serif;
 --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
 scroll-behavior: smooth;
}

body {
 font-family: var(--font-body);
 font-weight: 300;
 color: var(--ink);
 background: var(--cream);
 line-height: 1.75;
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
}

img {
 max-width: 100%;
 display: block;
}

a {
 color: inherit;
 text-decoration: none;
}

strong {
 font-weight: 500;
}

/* ========== CHROME ========== */
.site-chrome {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 120;
 height: var(--chrome-h);
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 1.15rem;
 background: rgba(252, 250, 248, 0.82);
 backdrop-filter: blur(16px) saturate(140%);
 -webkit-backdrop-filter: blur(16px) saturate(140%);
 border-bottom: 1px solid transparent;
 transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-chrome.is-scrolled {
 background: rgba(252, 250, 248, 0.94);
 border-bottom-color: var(--line);
 box-shadow: 0 8px 30px rgba(47, 21, 67, 0.06);
}

.chrome-brand {
 display: inline-flex;
 align-items: center;
 gap: 0.7rem;
 min-width: 0;
}

.chrome-cow {
 width: 42px;
 height: 42px;
 object-fit: contain;
 filter: drop-shadow(0 4px 10px rgba(92, 45, 130, 0.18));
}

.chrome-wordmark {
 font-family: var(--font-display);
 font-size: 1.15rem;
 font-weight: 400;
 letter-spacing: 0.04em;
 color: var(--purple-deep);
 white-space: nowrap;
}

.chrome-wordmark em {
 font-style: italic;
 font-weight: 300;
 color: var(--purple-mid);
}

.chrome-actions {
 display: inline-flex;
 align-items: center;
 gap: 0.65rem;
}

.chrome-contact {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 84px;
 height: 36px;
 padding: 0 0.9rem;
 border: 1px solid var(--blue);
 border-radius: 2px;
 background: var(--blue);
 color: var(--white);
 font-size: 0.62rem;
 font-weight: 500;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.chrome-contact:hover {
 background: transparent;
 color: var(--blue);
}

.hamburger {
 width: 36px;
 height: 36px;
 border: 1px solid rgba(92, 45, 130, 0.22);
 background: transparent;
 border-radius: 3px;
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 5px;
 cursor: pointer;
 transition: background 0.2s ease, border-color 0.2s ease;
}

.hamburger span {
 display: block;
 width: 16px;
 height: 1.5px;
 background: var(--purple);
 transition: transform 0.25s ease, opacity 0.2s ease;
}

.hamburger:hover {
 background: var(--lavender-mist);
 border-color: var(--purple);
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
 transform: translateY(6.5px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
 opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
 transform: translateY(-6.5px) rotate(-45deg);
}

/* ========== DRAWER ========== */
.drawer {
 position: fixed;
 top: 0;
 right: 0;
 z-index: 200;
 width: min(340px, 88vw);
 height: 100vh;
 background: linear-gradient(165deg, var(--purple-deep), #3d1f58 55%, var(--blue-deep));
 color: var(--white);
 padding: 1.75rem 1.6rem 2rem;
 transform: translateX(105%);
 transition: transform 0.4s var(--ease);
 display: flex;
 flex-direction: column;
 box-shadow: -12px 0 50px rgba(0, 0, 0, 0.28);
}

.drawer.is-open {
 transform: translateX(0);
}

.drawer-close {
 align-self: flex-end;
 background: none;
 border: none;
 color: var(--lavender);
 font-size: 2rem;
 line-height: 1;
 cursor: pointer;
}

.drawer-eyebrow {
 margin: 0.5rem 0 1rem;
 font-size: 0.68rem;
 letter-spacing: 0.28em;
 text-transform: uppercase;
 color: var(--lavender);
 opacity: 0.85;
}

.drawer ul {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 0.15rem;
}

.drawer a {
 display: block;
 padding: 0.72rem 0;
 font-family: var(--font-display);
 font-size: 1.7rem;
 font-weight: 400;
 letter-spacing: 0.02em;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 transition: color 0.2s ease, padding-left 0.2s ease;
}

.drawer a:hover {
 color: var(--lavender);
 padding-left: 0.35rem;
}

.drawer-cta {
 margin-top: 1.5rem;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 46px;
 border: 1px solid rgba(255, 255, 255, 0.45);
 border-radius: 2px;
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 transition: background 0.2s ease, color 0.2s ease;
}

.drawer-cta:hover {
 background: var(--white);
 color: var(--purple-deep);
}

.drawer-tag {
 margin-top: auto;
 padding-top: 2rem;
 font-size: 0.72rem;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--lavender);
 opacity: 0.8;
}

.drawer-overlay {
 position: fixed;
 inset: 0;
 z-index: 150;
 background: rgba(28, 19, 36, 0.48);
 backdrop-filter: blur(2px);
 opacity: 0;
 transition: opacity 0.3s ease;
 pointer-events: none;
}

.drawer-overlay.is-open {
 opacity: 1;
 pointer-events: auto;
}

/* ========== HERO ========== */
.hero {
 position: relative;
 /* Fill the first screen without becoming a giant empty stage on tall displays */
 min-height: min(100svh, 920px);
 min-height: min(100vh, 920px);
 padding: calc(var(--chrome-h) + 1.25rem) clamp(1.25rem, 4vw, 3.5rem) 4.25rem;
 background:
 radial-gradient(ellipse 70% 50% at 85% 20%, rgba(212, 183, 232, 0.28), transparent 60%),
 radial-gradient(ellipse 50% 40% at 10% 80%, rgba(30, 79, 156, 0.06), transparent 55%),
 var(--white);
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
 align-items: center;
 gap: 1rem 2.5rem;
 overflow: hidden;
}

.hero-copy {
 position: relative;
 z-index: 3;
 max-width: 680px;
 padding: 0.5rem 0 1rem;
 align-self: center;
}

.hero-eyebrow {
 font-size: 0.72rem;
 font-weight: 400;
 letter-spacing: 0.32em;
 text-transform: uppercase;
 color: var(--blue);
 margin-bottom: 1.25rem;
}

.hero-hook {
 font-family: var(--font-display);
 font-weight: 300;
 font-size: clamp(2.6rem, 6.2vw, 4.6rem);
 line-height: 1.08;
 letter-spacing: 0.01em;
 color: var(--purple-deep);
 margin-bottom: 1.35rem;
}

.hero-hook span {
 font-style: italic;
 font-weight: 400;
 color: var(--purple-mid);
}

.hero-lede {
 font-size: clamp(0.98rem, 1.4vw, 1.08rem);
 color: var(--ink-soft);
 max-width: 34rem;
 margin-bottom: 1.85rem;
 font-weight: 300;
}

.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
}

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 padding: 0.85rem 1.5rem;
 border-radius: 2px;
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
 transform: translateY(-1px);
}

.btn-primary {
 background: var(--purple);
 color: var(--white);
 border: 1px solid var(--purple);
}

.btn-primary:hover {
 background: var(--purple-deep);
 border-color: var(--purple-deep);
}

.btn-ghost {
 background: transparent;
 color: var(--blue);
 border: 1px solid rgba(30, 79, 156, 0.35);
}

.btn-ghost:hover {
 border-color: var(--blue);
 background: rgba(30, 79, 156, 0.04);
}

.hero-brand {
 position: relative;
 z-index: 3;
 display: flex;
 align-items: flex-end;
 justify-content: flex-start;
 gap: 0.2rem 0.85rem;
 min-height: 0;
 padding: 0.25rem 0 0.25rem;
 align-self: end;
 margin-bottom: 0.5rem;
}

.hero-cow {
 width: min(380px, 42vw);
 height: auto;
 filter: drop-shadow(0 18px 40px rgba(92, 45, 130, 0.18));
 transform-origin: bottom center;
 animation: cow-float 7s ease-in-out infinite;
}

@keyframes cow-float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-8px); }
}

.hero-title-stack {
 padding-bottom: 1.6rem;
}

.script-mark {
 font-family: var(--font-script);
 font-size: clamp(3rem, 7vw, 5.2rem);
 line-height: 0.95;
 color: var(--purple);
 text-shadow: 0 8px 30px rgba(92, 45, 130, 0.12);
}

.script-sub {
 font-family: var(--font-display);
 font-size: clamp(1.35rem, 2.8vw, 2rem);
 font-weight: 300;
 letter-spacing: 0.28em;
 text-transform: uppercase;
 color: var(--blue);
 margin-top: 0.15rem;
}

.hero-locale {
 margin-top: 0.7rem;
 font-size: 0.68rem;
 letter-spacing: 0.24em;
 text-transform: uppercase;
 color: var(--ink-soft);
}





/* Butterflies */
.butterflies {
 position: absolute;
 inset: 0;
 pointer-events: none;
 z-index: 2;
 overflow: hidden;
}

.butterfly {
 position: absolute;
 width: var(--size, 28px);
 height: var(--size, 28px);
 left: var(--x, 50%);
 bottom: -40px;
 opacity: 0;
 color: var(--wing, var(--purple-mid));
 animation: flutter var(--dur, 14s) linear var(--delay, 0s) infinite;
 will-change: transform, opacity;
}

.butterfly svg {
 width: 100%;
 height: 100%;
 display: block;
 filter: drop-shadow(0 4px 8px rgba(92, 45, 130, 0.18));
}

.butterfly .wing-l,
.butterfly .wing-r {
 transform-origin: center;
 transform-box: fill-box;
 animation: wing 0.35s ease-in-out infinite alternate;
}

.butterfly .wing-r {
 animation-delay: 0.08s;
}

@keyframes wing {
 from { transform: scaleX(1) rotate(0deg); }
 to { transform: scaleX(0.72) rotate(-8deg); }
}

@keyframes flutter {
 0% {
 opacity: 0;
 transform: translate3d(0, 0, 0) rotate(-8deg) scale(0.85);
 }
 8% { opacity: 0.85; }
 50% {
 opacity: 0.95;
 transform: translate3d(var(--drift, 40px), -48vh, 0) rotate(12deg) scale(1);
 }
 100% {
 opacity: 0;
 transform: translate3d(calc(var(--drift, 40px) * -0.4), -105vh, 0) rotate(-6deg) scale(0.9);
 }
}

/* Hero entrance: visible by default; animation only enhances */
.reveal-hero {
 opacity: 1;
 transform: translateY(0);
}

body.js-ready .reveal-hero {
 opacity: 0;
 transform: translateY(28px);
 animation: rise-in 1.05s var(--ease) forwards;
 animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes rise-in {
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

/* ========== NAV BAR ========== */
.nav-bar {
 position: sticky;
 top: var(--chrome-h);
 z-index: 90;
 background: var(--purple-deep);
 color: var(--white);
 min-height: 54px;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 8px 28px rgba(47, 21, 67, 0.22);
}

.nav-bar ul {
 list-style: none;
 width: min(1100px, 100%);
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: clamp(0.65rem, 3.5vw, 2.6rem);
 padding: 0.65rem 1rem;
}

.nav-bar a {
 font-size: 0.7rem;
 font-weight: 400;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 padding: 0.4rem 0.1rem;
 position: relative;
 transition: color 0.2s ease;
}

.nav-bar a::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 1px;
 background: var(--lavender);
 transform: scaleX(0);
 transition: transform 0.25s ease;
}

.nav-bar a:hover {
 color: var(--lavender);
}

.nav-bar a:hover::after,
.nav-bar a.is-active::after {
 transform: scaleX(1);
}

.nav-bar a.is-active {
 color: var(--lavender);
}

.drawer a.is-active {
 color: var(--lavender);
}

/* ========== SHARED ========== */
.eyebrow {
 display: inline-block;
 margin-bottom: 0.95rem;
 font-size: 0.68rem;
 font-weight: 500;
 letter-spacing: 0.28em;
 text-transform: uppercase;
 color: var(--blue);
}

.eyebrow.light {
 color: var(--lavender);
}

.section-head {
 max-width: 760px;
 margin: 0 auto 2.75rem;
 text-align: center;
 padding: 0 1.25rem;
}

.section-head h2,
.dream-intro h2,
.about-copy h2,
.story-text h3,
.contact-copy h2,
.freeze-panel h2 {
 font-family: var(--font-display);
 font-weight: 400;
 line-height: 1.18;
 color: var(--purple-deep);
}

.section-head h2 {
 font-size: clamp(2rem, 4vw, 3rem);
 margin-bottom: 1rem;
}

.section-head p {
 color: var(--ink-soft);
 font-size: 1rem;
}

.text-link {
 display: inline-block;
 margin-top: 1.2rem;
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--blue);
 border-bottom: 1px solid transparent;
 transition: border-color 0.2s ease, color 0.2s ease;
}

.text-link:hover {
 border-color: var(--blue);
 color: var(--blue-deep);
}

/* Scroll reveals, Well Wed style: rise from below + fade */
.reveal {
 opacity: 0;
 transform: translate3d(0, 56px, 0);
 transition:
 opacity 1.05s var(--ease),
 transform 1.15s var(--ease);
 transition-delay: var(--reveal-delay, 0ms);
 will-change: opacity, transform;
}

.reveal.is-visible {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}

.reveal-media {
 transform: translate3d(0, 72px, 0);
 transition-duration: 1.25s, 1.35s;
}

.reveal-media.is-visible {
 transform: translate3d(0, 0, 0);
}

.reveal-media img {
 transform: translate3d(0, 18px, 0) scale(1.03);
 transition: transform 1.4s var(--ease);
}

.reveal-media.is-visible img {
 transform: translate3d(0, 0, 0) scale(1);
}

/* ========== INNER PAGE HERO ========== */
.page-inner {
 padding-top: var(--chrome-h);
}

.page-inner .nav-bar {
 position: sticky;
 top: var(--chrome-h);
}

.page-hero {
 padding: 3.25rem 1.5rem 3rem;
 background:
 radial-gradient(ellipse 60% 80% at 90% 0%, rgba(212, 183, 232, 0.28), transparent 55%),
 var(--white);
 text-align: center;
 border-bottom: 1px solid var(--line);
}

.page-hero--dark {
 background:
 radial-gradient(ellipse at top right, rgba(122, 69, 160, 0.35), transparent 50%),
 radial-gradient(ellipse at bottom left, rgba(30, 79, 156, 0.25), transparent 45%),
 var(--purple-deep);
 border-bottom: none;
 color: var(--white);
}

.page-hero-inner {
 max-width: 780px;
 margin: 0 auto;
}

.page-hero h1 {
 font-family: var(--font-display);
 font-weight: 400;
 font-size: clamp(2.2rem, 4.6vw, 3.4rem);
 line-height: 1.15;
 color: var(--purple-deep);
 margin-bottom: 1rem;
}

.page-hero--dark h1 {
 color: var(--white);
}

.page-hero p {
 color: var(--ink-soft);
 font-size: 1.05rem;
 max-width: 40rem;
 margin: 0 auto;
}

.page-hero--dark p {
 color: rgba(255, 255, 255, 0.82);
}

.page-about .about-page,
.packages-page,
.gallery-page {
 padding-top: clamp(3rem, 6vw, 4.5rem);
}

.about-story {
 margin-top: 1rem;
}

.home-cta {
 padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem;
 background: var(--white);
 text-align: center;
}

.home-cta-inner {
 max-width: 680px;
 margin: 0 auto;
}

.home-cta h2 {
 font-family: var(--font-display);
 font-weight: 400;
 font-size: clamp(2rem, 3.8vw, 2.8rem);
 color: var(--purple-deep);
 margin-bottom: 0.85rem;
}

.home-cta p {
 color: var(--ink-soft);
 margin-bottom: 1.5rem;
}

.home-cta .hero-actions {
 justify-content: center;
}

.packages-foot {
 margin-top: 3rem;
}

.packages-foot .btn {
 display: inline-flex;
}

.footer-nav {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 0.85rem 1.35rem;
 margin: 1rem 0 0.35rem;
}

.footer-nav a {
 font-size: 0.68rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.7);
 transition: color 0.2s ease;
}

.footer-nav a:hover {
 color: var(--lavender);
}

.contact-page {
 /* already styled by .contact */
}

.page-contact .nav-bar {
 background: #261036;
}

/* ========== DREAM / STORY ========== */
.dream {
 padding: clamp(4rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 3rem);
 background:
 linear-gradient(180deg, var(--white), var(--cream) 40%, var(--ivory));
}

.dream-intro {
 max-width: 820px;
 margin: 0 auto 3.5rem;
 padding: 0 1.35rem;
 text-align: center;
}

.dream-intro h2 {
 font-size: clamp(2rem, 4.4vw, 3.25rem);
 margin-bottom: 1.25rem;
}

.dream-intro p {
 color: var(--ink-soft);
 font-size: 1.05rem;
 max-width: 40rem;
 margin: 0 auto;
}

.story-layers {
 display: flex;
 flex-direction: column;
 gap: 0;
}

.story-card {
 display: grid;
 grid-template-columns: 1.05fr 0.95fr;
 min-height: min(78vh, 720px);
 background: var(--white);
}

.story-card:nth-child(even),
.story-card--reverse {
 background: var(--cream);
}

.story-card--reverse .story-media {
 order: 2;
}

.story-card--reverse .story-text {
 order: 1;
}

.story-media {
 position: relative;
 min-height: 360px;
 overflow: hidden;
}

.story-media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 25%;
 transition: transform 1.1s var(--ease);
}

.story-card:hover .story-media img {
 transform: scale(1.04);
}

.story-text {
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding: clamp(2.4rem, 6vw, 5rem) clamp(1.6rem, 5vw, 4.5rem);
 max-width: 620px;
 width: 100%;
 margin: 0 auto;
}

.story-text h3 {
 font-size: clamp(1.85rem, 3vw, 2.55rem);
 margin-bottom: 1.1rem;
}

.story-text p {
 color: var(--ink-soft);
 font-size: 1rem;
}

/* ========== ABOUT ========== */
.about {
 padding: clamp(4rem, 8vw, 6.5rem) 1.25rem;
 background: var(--white);
}

.about-grid {
 max-width: 1180px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 0.95fr 1.05fr;
 gap: clamp(2rem, 5vw, 4rem);
 align-items: center;
}

.about-copy h2 {
 font-size: clamp(2rem, 3.5vw, 2.9rem);
 margin-bottom: 1.2rem;
}

.about-copy p {
 color: var(--ink-soft);
 margin-bottom: 1rem;
}

.about-points {
 list-style: none;
 margin: 1.25rem 0 0.5rem;
 display: grid;
 gap: 0.55rem;
}

.about-points li {
 position: relative;
 padding-left: 1.3rem;
 color: var(--ink-soft);
 font-size: 0.95rem;
}

.about-points li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.55em;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--lavender), var(--blue));
}

.about-visual {
 display: grid;
 grid-template-columns: 1.15fr 0.85fr;
 gap: 0.85rem;
 align-items: stretch;
}

.about-portrait-card {
 margin: 0;
 position: relative;
 border-radius: 6px;
 overflow: hidden;
 box-shadow: var(--shadow);
 background: var(--lavender-mist);
 min-height: 420px;
}

.about-portrait {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 18%;
 display: block;
 min-height: 420px;
}

.about-portrait-card figcaption {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 1.5rem 1.1rem 1rem;
 background: linear-gradient(to top, rgba(33, 15, 48, 0.82), transparent);
 color: var(--white);
 display: grid;
 gap: 0.2rem;
}

.about-portrait-name {
 font-family: var(--font-display);
 font-size: 1.45rem;
 font-weight: 400;
 letter-spacing: 0.02em;
}

.about-portrait-role {
 font-size: 0.68rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--lavender);
 opacity: 0.95;
}

.about-side-shots {
 display: grid;
 grid-template-rows: 1fr 1fr;
 gap: 0.85rem;
 min-height: 420px;
}

.about-side-shots img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 4px;
 box-shadow: var(--shadow);
 min-height: 0;
}

.about-mosaic {
 display: grid;
 grid-template-columns: 1.1fr 0.9fr;
 grid-template-rows: 220px 220px;
 gap: 0.85rem;
 min-height: 460px;
}

.about-mosaic img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 4px;
 box-shadow: var(--shadow);
}

.mosaic-a {
 grid-row: 1 / span 2;
 object-position: center 20%;
}

.mosaic-b {
 object-position: center 15%;
}

.mosaic-c {
 object-position: center 30%;
}

/* ========== TESTIMONIALS ========== */
.testimonials {
 padding: clamp(4rem, 8vw, 6rem) 1.25rem;
 background:
 radial-gradient(ellipse 70% 60% at 50% 0%, rgba(212, 183, 232, 0.22), transparent 60%),
 var(--cream);
}

.testimonials--about {
 background:
 radial-gradient(ellipse 60% 50% at 80% 20%, rgba(30, 79, 156, 0.06), transparent 55%),
 var(--ivory);
}

.testimonials-inner {
 max-width: 1180px;
 margin: 0 auto;
}

.testimonials .section-head {
 text-align: center;
 max-width: 36rem;
 margin: 0 auto 2.25rem;
}

.testimonials .section-head h2 {
 font-family: var(--font-display);
 font-weight: 300;
 font-size: clamp(2rem, 3.8vw, 2.85rem);
 color: var(--purple-deep);
 margin: 0.55rem 0 0.7rem;
}

.testimonials .section-head p {
 color: var(--ink-soft);
 font-size: 0.98rem;
}

.testimonial-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1.1rem;
}

.testimonial {
 margin: 0;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 8px;
 padding: 1.55rem 1.45rem 1.35rem;
 box-shadow: 0 14px 40px rgba(47, 21, 67, 0.05);
 display: flex;
 flex-direction: column;
 gap: 1.15rem;
}

.testimonial p {
 font-family: var(--font-display);
 font-size: clamp(1.2rem, 2vw, 1.4rem);
 font-weight: 400;
 font-style: italic;
 line-height: 1.45;
 color: var(--purple-deep);
 quotes: "“" "”";
}

.testimonial p::before {
 content: open-quote;
 color: var(--purple-soft);
}

.testimonial p::after {
 content: close-quote;
 color: var(--purple-soft);
}

.testimonial footer {
 display: grid;
 gap: 0.2rem;
 margin-top: auto;
 padding-top: 0.85rem;
 border-top: 1px solid var(--line);
}

.testimonial cite {
 font-style: normal;
 font-family: var(--font-body);
 font-size: 0.78rem;
 font-weight: 500;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--blue);
}

.testimonial footer span {
 font-size: 0.82rem;
 color: var(--ink-soft);
}

.testimonials--about .testimonial-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ========== PACKAGES ========== */
.packages {
 padding: clamp(4rem, 8vw, 6.5rem) 1.25rem;
 background:
 radial-gradient(ellipse at top, rgba(212, 183, 232, 0.28), transparent 50%),
 var(--ivory);
}

.package-grid {
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.15rem;
}

.pkg {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 6px;
 padding: 1.6rem 1.4rem 1.5rem;
 box-shadow: 0 10px 30px rgba(47, 21, 67, 0.04);
 display: flex;
 flex-direction: column;
 transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pkg:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow);
 border-color: rgba(92, 45, 130, 0.22);
}

.pkg--featured {
 border-color: rgba(30, 79, 156, 0.35);
 background:
 linear-gradient(180deg, rgba(30, 79, 156, 0.05), transparent 40%),
 var(--white);
 box-shadow: 0 16px 40px rgba(30, 79, 156, 0.1);
}

.pkg-tier {
 font-size: 0.65rem;
 letter-spacing: 0.24em;
 text-transform: uppercase;
 color: var(--blue);
 margin-bottom: 0.55rem;
 font-weight: 500;
}

.pkg h3 {
 font-family: var(--font-display);
 font-weight: 500;
 font-size: 1.7rem;
 color: var(--purple-deep);
 margin-bottom: 0.7rem;
 line-height: 1.2;
}

.pkg-price {
 font-size: 0.92rem;
 color: var(--ink-soft);
 margin-bottom: 0.2rem;
}

.pkg-price span {
 font-family: var(--font-display);
 font-size: 1.55rem;
 font-weight: 500;
 color: var(--purple);
}

.pkg-price.alt span {
 color: var(--blue);
}

.pkg-sub {
 font-size: 0.85rem;
 color: var(--ink-soft);
 margin: 0.25rem 0 0.6rem;
 font-style: italic;
 font-family: var(--font-display);
}

.pkg ul {
 list-style: none;
 margin-top: 1rem;
 display: grid;
 gap: 0.45rem;
 flex: 0 1 auto;
 align-content: start;
}

.pkg li {
 position: relative;
 padding-left: 1rem;
 font-size: 0.88rem;
 color: var(--ink-soft);
 line-height: 1.45;
}

.pkg li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.55em;
 width: 5px;
 height: 5px;
 border-radius: 50%;
 background: var(--purple-soft);
}

.pkg-note {
 margin-top: 1rem;
 font-size: 0.78rem;
 color: var(--ink-soft);
 font-style: italic;
 opacity: 0.85;
}

.extras {
 max-width: 1200px;
 margin: 1.5rem auto 0;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem;
}

.extra {
 background: rgba(255, 255, 255, 0.7);
 border: 1px dashed rgba(92, 45, 130, 0.22);
 border-radius: 6px;
 padding: 1.25rem 1.4rem;
}

.extra h4 {
 font-family: var(--font-display);
 font-size: 1.35rem;
 font-weight: 500;
 color: var(--purple-deep);
 margin-bottom: 0.3rem;
}

.extra p {
 color: var(--ink-soft);
 font-size: 0.95rem;
}

/* ========== GALLERY ========== */
.gallery {
 padding: clamp(4rem, 8vw, 6.5rem) 1.25rem;
 background: var(--white);
}

.masonry {
 max-width: 1240px;
 margin: 0 auto;
 columns: 4 220px;
 column-gap: 0.85rem;
}

.masonry figure {
 break-inside: avoid;
 margin: 0 0 0.85rem;
 overflow: hidden;
 border-radius: 4px;
 background: var(--lavender-mist);
 box-shadow: 0 10px 28px rgba(47, 21, 67, 0.08);
}

.masonry img {
 width: 100%;
 height: auto;
 display: block;
 transition: transform 0.8s var(--ease), filter 0.4s ease;
 filter: saturate(1.02);
}

.masonry figure:hover img {
 transform: scale(1.04);
}

/* ========== FREEZE FRAME (sticky photo, scrolling content) ========== */
.freeze {
 position: relative;
 /* section height comes from freeze-scroll content */
 background: #1a0f24;
}

.freeze-sticky {
 position: sticky;
 top: 0;
 z-index: 0;
 height: 100vh;
 height: 100svh;
 width: 100%;
 overflow: hidden;
}

.freeze-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 40%;
 display: block;
 /* locked still - no ken burns, no parallax drift */
 transform: none;
}

.freeze-shade {
 position: absolute;
 inset: 0;
 pointer-events: none;
 background:
 linear-gradient(
 to bottom,
 rgba(28, 19, 36, 0.22) 0%,
 rgba(28, 19, 36, 0.12) 35%,
 rgba(28, 19, 36, 0.45) 70%,
 rgba(28, 19, 36, 0.72) 100%
 );
}

.freeze-scroll {
 position: relative;
 z-index: 1;
 /* pull content up so it rides over the sticky photo */
 margin-top: -100vh;
 margin-top: -100svh;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 0 1.25rem;
 pointer-events: none;
}

.freeze-lead {
 height: 72vh;
 height: 72svh;
 width: 100%;
 flex-shrink: 0;
}

.freeze-panel {
 pointer-events: auto;
 width: min(640px, 100%);
 margin: 0 auto 28vh;
 padding: 1.85rem 1.85rem 1.7rem;
 border-radius: 14px;
 border: 1px solid rgba(255, 255, 255, 0.32);
 background: rgba(255, 255, 255, 0.16);
 backdrop-filter: blur(18px) saturate(140%);
 -webkit-backdrop-filter: blur(18px) saturate(140%);
 box-shadow: 0 22px 55px rgba(10, 6, 18, 0.28);
 color: var(--white);
 text-align: center;
}

.freeze-panel--accent {
 background: rgba(33, 15, 48, 0.42);
 border-color: rgba(212, 183, 232, 0.35);
}

.freeze-panel h2 {
 color: var(--white);
 font-family: var(--font-display);
 font-weight: 300;
 font-size: clamp(1.9rem, 3.5vw, 2.7rem);
 margin: 0.45rem 0 0.85rem;
}

.freeze-panel p {
 font-family: var(--font-display);
 font-size: clamp(1.12rem, 2.1vw, 1.4rem);
 font-weight: 400;
 line-height: 1.45;
 text-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
 color: rgba(255, 255, 255, 0.94);
}

.freeze-punch {
 margin-top: 0.9rem !important;
 font-style: italic;
 font-weight: 500 !important;
 color: var(--lavender-mist);
 letter-spacing: 0.04em;
}

.freeze-panel--cta {
 background: rgba(252, 250, 248, 0.14);
 border-color: rgba(255, 255, 255, 0.4);
}

.freeze-actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 0.7rem;
 margin-top: 1.35rem;
 pointer-events: auto;
}

.freeze-panel--cta .btn-primary {
 background: var(--white);
 color: var(--purple-deep);
 border-color: var(--white);
}

.freeze-panel--cta .btn-primary:hover {
 background: var(--lavender-mist);
 border-color: var(--lavender-mist);
 color: var(--purple-deep);
}

.freeze-btn-ghost {
 color: var(--white) !important;
 border-color: rgba(255, 255, 255, 0.55) !important;
}

.freeze-btn-ghost:hover {
 background: rgba(255, 255, 255, 0.12) !important;
 border-color: var(--white) !important;
 color: var(--white) !important;
}

.freeze-tail {
 height: 36vh;
 height: 36svh;
 width: 100%;
 flex-shrink: 0;
}

/* ========== CONTACT ========== */
.contact {
 background:
 radial-gradient(ellipse at top right, rgba(122, 69, 160, 0.35), transparent 50%),
 radial-gradient(ellipse at bottom left, rgba(30, 79, 156, 0.28), transparent 45%),
 var(--purple-deep);
 color: var(--white);
 padding: clamp(4rem, 8vw, 6.5rem) 1.25rem;
}

.contact-inner {
 max-width: 1080px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 0.9fr 1.1fr;
 gap: clamp(2rem, 5vw, 4rem);
 align-items: start;
}

.contact-copy h2 {
 color: var(--white);
 font-size: clamp(2rem, 3.6vw, 3rem);
 margin-bottom: 1rem;
}

.contact-copy p {
 color: rgba(255, 255, 255, 0.82);
 font-size: 1rem;
 margin-bottom: 1.5rem;
}

.contact-direct {
 display: grid;
 gap: 0.45rem;
}

.contact-direct a {
 font-family: var(--font-display);
 font-size: 1.45rem;
 color: var(--lavender);
 border-bottom: 1px solid transparent;
 width: fit-content;
 transition: border-color 0.2s ease, color 0.2s ease;
}

.contact-direct a:hover {
 color: var(--white);
 border-color: rgba(255, 255, 255, 0.45);
}

.contact-direct span {
 font-size: 0.72rem;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.65);
}

.contact-form {
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: 10px;
 padding: 1.5rem;
 backdrop-filter: blur(8px);
}

.form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.85rem;
}

.contact-form label {
 display: grid;
 gap: 0.4rem;
 margin-bottom: 0.85rem;
 font-size: 0.68rem;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.72);
}

.optional {
 letter-spacing: 0.08em;
 text-transform: none;
 opacity: 0.7;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
 width: 100%;
 border: 1px solid rgba(255, 255, 255, 0.16);
 background: rgba(255, 255, 255, 0.08);
 color: var(--white);
 border-radius: 3px;
 padding: 0.85rem 0.95rem;
 font-family: var(--font-body);
 font-size: 0.95rem;
 font-weight: 300;
 outline: none;
 transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-form select {
 appearance: none;
 -webkit-appearance: none;
 background-image:
 linear-gradient(45deg, transparent 50%, rgba(212, 183, 232, 0.95) 50%),
 linear-gradient(135deg, rgba(212, 183, 232, 0.95) 50%, transparent 50%),
 linear-gradient(to right, transparent, transparent);
 background-position:
 calc(100% - 18px) calc(50% - 3px),
 calc(100% - 12px) calc(50% - 3px),
 0 0;
 background-size: 6px 6px, 6px 6px, 100% 100%;
 background-repeat: no-repeat;
 padding-right: 2.2rem;
 cursor: pointer;
}

.contact-form select option {
 color: var(--ink);
 background: var(--white);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
 color: rgba(255, 255, 255, 0.4);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
 border-color: rgba(212, 183, 232, 0.7);
 background-color: rgba(255, 255, 255, 0.12);
}

.contact-form .btn-primary {
 width: 100%;
 margin-top: 0.35rem;
 background: var(--white);
 color: var(--purple-deep);
 border-color: var(--white);
}

.contact-form .btn-primary:hover {
 background: var(--lavender-mist);
 border-color: var(--lavender-mist);
}

.contact-form .btn-primary:disabled {
 opacity: 0.85;
 cursor: default;
 transform: none;
}

.form-note {
 margin-top: 0.9rem;
 font-size: 0.82rem;
 color: rgba(255, 255, 255, 0.62);
 text-transform: none;
 letter-spacing: 0;
}

.form-note a {
 color: var(--lavender);
 border-bottom: 1px solid rgba(212, 183, 232, 0.35);
}

/* ========== FOOTER ========== */
.site-footer {
 background: #210f30;
 color: rgba(255, 255, 255, 0.72);
 text-align: center;
 padding: 2.75rem 1.25rem 2rem;
}

.footer-top {
 max-width: 920px;
 margin: 0 auto 1.35rem;
 display: grid;
 grid-template-columns: 1fr 1.2fr;
 gap: 1.5rem 2rem;
 align-items: center;
 text-align: left;
}

.footer-brand {
 display: grid;
 justify-items: center;
 text-align: center;
 gap: 0.15rem;
}

.footer-cow {
 width: 72px;
 height: 72px;
 margin: 0 auto 0.35rem;
 object-fit: contain;
 filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
}

.footer-script {
 font-family: var(--font-script);
 font-size: 2rem;
 color: var(--lavender);
 margin-bottom: 0.1rem;
}

.footer-locale,
.site-footer p {
 font-size: 0.85rem;
}

.footer-contact-strip {
 display: flex;
 align-items: center;
 gap: 1rem;
 padding: 1rem 1.15rem;
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 10px;
 background: rgba(255, 255, 255, 0.04);
}

.footer-portrait {
 width: 64px;
 height: 64px;
 border-radius: 50%;
 object-fit: cover;
 object-position: center 20%;
 flex-shrink: 0;
 border: 2px solid rgba(212, 183, 232, 0.45);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.footer-contact-copy {
 display: grid;
 gap: 0.22rem;
 min-width: 0;
}

.footer-contact-label {
 font-size: 0.62rem !important;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: rgba(212, 183, 232, 0.75) !important;
 margin: 0;
}

.footer-contact-name {
 font-family: var(--font-display);
 font-size: 1.2rem !important;
 color: var(--white) !important;
 margin: 0;
 line-height: 1.2;
}

.footer-contact-copy a {
 width: fit-content;
 color: var(--lavender);
 font-size: 0.92rem;
 border-bottom: 1px solid transparent;
 transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-contact-copy a:hover {
 color: var(--white);
 border-bottom-color: rgba(255, 255, 255, 0.35);
}

.footer-ig {
 font-size: 0.82rem !important;
}

.footer-area {
 font-size: 0.72rem;
 letter-spacing: 0.06em;
 color: rgba(255, 255, 255, 0.55);
 margin-top: 0.15rem;
}

.fineprint {
 margin-top: 0.85rem;
 font-size: 0.72rem !important;
 letter-spacing: 0.08em;
 opacity: 0.65;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 980px) {
 .hero {
 grid-template-columns: 1fr;
 align-items: start;
 min-height: auto;
 padding-bottom: 4.5rem;
 }

 .hero-copy {
 order: 1;
 padding-top: 1.25rem;
 }

 .hero-brand {
 order: 2;
 min-height: 0;
 justify-content: center;
 align-self: center;
 margin-top: 0.5rem;
 }

 .story-card,
 .story-card--reverse {
 grid-template-columns: 1fr;
 min-height: 0;
 }

 .story-card--reverse .story-media,
 .story-card--reverse .story-text {
 order: initial;
 }

 .story-media {
 min-height: 320px;
 max-height: 460px;
 }

 .about-grid,
 .contact-inner,
 .footer-top {
 grid-template-columns: 1fr;
 }

 .footer-top {
 text-align: center;
 }

 .footer-contact-strip {
 justify-content: center;
 text-align: left;
 max-width: 420px;
 margin: 0 auto;
 }

 .about-visual {
 max-width: 520px;
 margin: 0 auto;
 width: 100%;
 }

 .testimonial-grid,
 .testimonials--about .testimonial-grid {
 grid-template-columns: 1fr 1fr;
 }

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

 .masonry {
 columns: 3 180px;
 }
}

@media (max-width: 680px) {
 .chrome-wordmark {
 display: none;
 }

 .hero-hook {
 font-size: clamp(2.25rem, 10vw, 3rem);
 }

 .hero-cow {
 width: min(220px, 58vw);
 }

 .script-mark {
 font-size: clamp(2.4rem, 12vw, 3.4rem);
 }

 .package-grid,
 .extras,
 .form-row,
 .testimonial-grid,
 .testimonials--about .testimonial-grid {
 grid-template-columns: 1fr;
 }

 .about-visual {
 grid-template-columns: 1fr;
 }

 .about-side-shots {
 grid-template-rows: none;
 grid-template-columns: 1fr 1fr;
 min-height: 0;
 }

 .about-side-shots img {
 min-height: 160px;
 aspect-ratio: 4 / 3;
 }

 .about-portrait,
 .about-portrait-card {
 min-height: 360px;
 }

 .about-mosaic {
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 180px 180px;
 min-height: 0;
 }

 .mosaic-a {
 grid-row: auto;
 }

 .footer-contact-strip {
 flex-direction: column;
 text-align: center;
 align-items: center;
 }

 .footer-contact-copy {
 justify-items: center;
 }

 .footer-contact-copy a {
 margin-left: auto;
 margin-right: auto;
 }

 .masonry {
 columns: 2 140px;
 }

 .nav-bar {
 display: none;
 }

 .freeze-lead {
 height: 58vh;
 height: 58svh;
 }

 .freeze-panel {
 margin-bottom: 22vh;
 padding: 1.45rem 1.25rem 1.35rem;
 }

 .freeze-tail {
 height: 28vh;
 height: 28svh;
 }
}

@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .reveal,
 .reveal-hero,
 .butterfly,
 .hero-cow {
 animation: none !important;
 transition: none !important;
 }
 .reveal,
 .reveal-hero {
 opacity: 1;
 transform: none;
 }
}