/* ===========================================================
   BrewByte — gallery-wall theme
   Palette derived from the logo: teal ring, gilded gold edge,
   sage botanicals, cream paper.
   =========================================================== */

:root {
    /* BrewByte palette — navy + royal blue + cyan (variable names kept) */
    --teal:        #15294F;   /* deep navy (primary brand) */
    --teal-deep:   #0E1F3D;   /* darkest navy */
    --gold:        #2A6FD6;   /* royal blue (accent) */
    --gold-soft:   #2BC4F3;   /* bright cyan */
    --sage:        #22B8E6;   /* cyan */
    --cream:       #F1ECE3;   /* warm off-white (matches logo bg) */
    --cream-deep:  #E7E2D6;
    --ink:         #2E3440;   /* charcoal (the "brew" text) */
    --ink-soft:    #5B6470;
    --line:        #DEDACF;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-script: 'Dancing Script', cursive;

    --maxw: 1180px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
    position: relative;
    overflow-x: hidden;
    font-family: var(--font-body);
    color: var(--ink);
    background-color: var(--cream);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px;
}

/* ---- Typography ---- */
.section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--teal);
}

.eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.script-eyebrow {
    font-family: var(--font-script);
    font-size: 1.7rem;
    color: var(--gold);
    margin-bottom: 0.4rem;
}
.script-eyebrow.light { color: var(--gold-soft); }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    padding: 14px 30px;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.35s var(--ease);
    border: 1.5px solid transparent;
    white-space: nowrap;
}
.btn-solid {
    background: var(--teal);
    color: var(--cream);
    border-color: var(--teal);
}
.btn-solid:hover {
    background: var(--gold);
    border-color: var(--gold);
    transform: translateY(-2px);
}
.btn-line {
    background: transparent;
    color: var(--teal);
    border-color: var(--teal);
}
.btn-line:hover {
    background: var(--teal);
    color: var(--cream);
    transform: translateY(-2px);
}
.btn-line-light {
    background: transparent;
    color: var(--cream);
    border-color: rgba(241, 236, 227, 0.55);
}
.btn-line-light:hover {
    background: var(--cream);
    color: var(--teal);
    border-color: var(--cream);
    transform: translateY(-2px);
}

/* ---- Header ---- */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(241, 236, 227, 0.82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
}
.brand-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 10px rgba(21, 41, 79, 0.18);
}
.brand-logo.small { width: 38px; height: 38px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--teal);
}
.brand-tag {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.nav { display: flex; gap: 2.4rem; }
.nav a {
    text-decoration: none;
    color: var(--ink);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    padding: 4px 0;
}
.nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1.5px;
    background: var(--gold);
    transition: width 0.3s var(--ease);
}
.nav a:hover { color: var(--teal); }
.nav a:hover::after { width: 100%; }

/* ---- Hero (the framed thesis) ---- */
.hero {
    padding: 70px 0 90px;
}
.hero-frame {
    position: relative;
    text-align: center;
    padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px);
    background: transparent;
}
.hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--teal);
    margin-bottom: 1.3rem;
}
.hero-sub {
    max-width: 580px;
    margin: 0 auto 2.4rem;
    font-size: 1.1rem;
    color: var(--ink-soft);
}
.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
/* botanical leaf accents echoing the logo */
.leaf {
    position: absolute;
    width: 120px; height: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    pointer-events: none;
}
.leaf-tl {
    top: -18px; left: -18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2322B8E6' stroke-width='1.4'%3E%3Cpath d='M10 90 Q40 60 80 20'/%3E%3C/g%3E%3Cg fill='%2322B8E6' opacity='0.85'%3E%3Cellipse cx='30' cy='62' rx='11' ry='5' transform='rotate(-40 30 62)'/%3E%3Cellipse cx='46' cy='48' rx='11' ry='5' transform='rotate(-40 46 48)'/%3E%3Cellipse cx='62' cy='34' rx='11' ry='5' transform='rotate(-40 62 34)'/%3E%3Cellipse cx='40' cy='74' rx='10' ry='4.5' transform='rotate(-40 40 74)'/%3E%3C/g%3E%3C/svg%3E");
}
.leaf-br {
    bottom: -18px; right: -18px;
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232A6FD6' stroke-width='1.4'%3E%3Cpath d='M10 90 Q40 60 80 20'/%3E%3C/g%3E%3Cg fill='%232BC4F3' opacity='0.85'%3E%3Cellipse cx='30' cy='62' rx='11' ry='5' transform='rotate(-40 30 62)'/%3E%3Cellipse cx='46' cy='48' rx='11' ry='5' transform='rotate(-40 46 48)'/%3E%3Cellipse cx='62' cy='34' rx='11' ry='5' transform='rotate(-40 62 34)'/%3E%3Cellipse cx='40' cy='74' rx='10' ry='4.5' transform='rotate(-40 40 74)'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Values strip ---- */
.values {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--cream-deep);
}
.values-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 22px 28px;
}
.value {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--teal);
}
.value-mark { color: var(--gold); }

/* ---- Section heads ---- */
.section-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 3.2rem;
}
.section-lead {
    margin-top: 0.9rem;
    color: var(--ink-soft);
    font-size: 1.05rem;
}

/* ---- Collections: the gallery wall ---- */
.collections { padding: 96px 0; }

.gallery-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 38px;
}

/* matted frame card — the signature element */
.frame-card {
    background: #fff;
    padding: 16px 16px 0;
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px -28px rgba(21, 41, 79, 0.55);
    cursor: pointer;
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
    display: flex;
    flex-direction: column;
}
.frame-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 60px -30px rgba(21, 41, 79, 0.6);
}
.frame-mat {
    position: relative;
    padding: 10px;
    border: 1px solid var(--gold);
    background: var(--cream);
    overflow: hidden;
}
.frame-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease);
}
.frame-card:hover .frame-img { transform: scale(1.05); }

.frame-count {
    position: absolute;
    top: 18px; right: 18px;
    background: rgba(21, 41, 79, 0.92);
    color: var(--cream);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    padding: 5px 11px;
    border-radius: 2px;
}

/* museum caption plate */
.frame-plate {
    text-align: center;
    padding: 18px 10px 22px;
}
.frame-plate h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--teal);
    margin-bottom: 0.25rem;
}
.frame-plate p {
    color: var(--ink-soft);
    font-size: 0.92rem;
    margin-bottom: 0.9rem;
}
.frame-view {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}
.frame-view::after {
    content: ' →';
    transition: margin-left 0.3s var(--ease);
    display: inline-block;
}
.frame-card:hover .frame-view::after { margin-left: 5px; }

/* ---- Craft section ---- */
.craft {
    background: var(--teal);
    color: var(--cream);
    padding: 96px 0;
}
.craft-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
}
.craft-text .section-title { color: var(--cream); }
.craft-text .eyebrow { color: var(--gold-soft); }
.craft-text p {
    color: rgba(241, 236, 227, 0.82);
    margin: 1.2rem 0;
    font-size: 1.05rem;
}
.craft-text .btn-line {
    color: var(--cream);
    border-color: rgba(241, 236, 227, 0.55);
    margin-top: 0.6rem;
}
.craft-text .btn-line:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--cream);
}
.craft-quote {
    position: relative;
    padding: 40px 36px;
    border: 1px solid rgba(43, 196, 243, 0.4);
    outline: 1px solid rgba(43, 196, 243, 0.4);
    outline-offset: 6px;
}
.quote-mark {
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 0.6;
    color: var(--gold-soft);
    display: block;
    margin-bottom: 0.5rem;
}
.craft-quote p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--cream);
    margin-bottom: 1rem;
}
.craft-quote cite {
    font-style: normal;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--gold-soft);
}

/* ---- Contact ---- */
.contact {
    background: var(--cream-deep);
    padding: 96px 0;
}
.contact-frame {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    background: var(--teal);
    color: var(--cream);
    padding: clamp(48px, 6vw, 76px) 32px;
    border: 1px solid var(--gold);
    outline: 1px solid var(--gold);
    outline-offset: 7px;
}
.contact-frame .section-title.light { color: var(--cream); }
.contact-lead {
    color: rgba(241, 236, 227, 0.82);
    margin: 1rem auto 2.2rem;
    max-width: 460px;
}
.contact-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Footer ---- */
.footer {
    background: var(--teal-deep);
    color: rgba(241, 236, 227, 0.75);
    padding: 48px 0;
}
.footer-inner { text-align: center; }
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}
.footer-brand .brand-name { color: var(--cream); }
.footer-note { font-size: 0.95rem; margin-bottom: 0.4rem; }
.footer-copy { font-size: 0.82rem; opacity: 0.6; }

/* ===========================================================
   Gallery modal + lightbox
   =========================================================== */
.gallery-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(14, 31, 61, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1000;
    padding: 40px 20px;
    overflow-y: auto;
}
.gallery-modal.open { display: block; }
.gallery-modal-content {
    background: var(--cream);
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: rise 0.4s var(--ease);
}
@keyframes rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.gallery-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    background: var(--teal);
}
.gallery-modal-header h3 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--cream);
    font-size: 1.6rem;
}
.modal-close {
    background: none;
    border: none;
    color: var(--cream);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    width: 42px; height: 42px;
    border-radius: 50%;
    transition: background 0.2s ease;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.18); }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 28px;
}
.gallery-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid var(--line);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.gallery-img:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 26px rgba(21, 41, 79, 0.3);
}

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1100;
    justify-content: center;
    align-items: center;
    padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-close { position: absolute; top: 22px; right: 28px; font-size: 2.6rem; }

/* ===========================================================
   Product detail page
   =========================================================== */
.product-page { padding: 40px 0 90px; }
.back-link {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.25s var(--ease);
}
.back-link:hover { color: var(--teal); }
.product-loading { color: var(--ink-soft); padding: 40px 0; }

.product {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: start;
}

/* media */
.product-main-frame {
    background: #fff;
    padding: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 24px 50px -34px rgba(21, 41, 79, 0.6);
}
.product-main-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    border: 1px solid var(--gold);
    cursor: zoom-in;
}
.product-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--line);
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
}
.thumb:hover { opacity: 1; }
.thumb.active { opacity: 1; border-color: var(--gold); border-width: 2px; }

/* info */
.product-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1.1;
    color: var(--teal);
    margin-bottom: 0.8rem;
}
.product-desc {
    color: var(--ink-soft);
    margin-bottom: 2rem;
    font-size: 1.02rem;
}

.opt-group { margin-bottom: 1.6rem; }
.opt-label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 0.7rem;
}
.opt-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}
.opt-label-row .opt-label { margin-bottom: 0; }
.size-guide-toggle {
    background: none;
    border: none;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
}
.size-guide-toggle:hover { color: var(--teal); }
.size-guide {
    margin-top: 16px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
}
.size-guide-svg { display: block; max-width: 420px; height: auto; }
.size-guide-img { width: 100%; max-width: 460px; height: auto; display: block; }
.size-guide-note {
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.opt-row { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 10px 20px;
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.25s var(--ease);
}
.opt:hover { border-color: var(--gold); }
.opt.selected {
    background: var(--teal);
    color: var(--cream);
    border-color: var(--teal);
}

.order-box {
    margin: 2rem 0;
    padding: 22px;
    background: var(--cream-deep);
    border: 1px solid var(--line);
}
.order-note { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 1rem; }
.order-note.ready { color: var(--teal); font-weight: 500; }
.product-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.material { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.material-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--teal);
    margin-bottom: 0.6rem;
}
.material p { color: var(--ink-soft); font-size: 0.98rem; }

@media (max-width: 820px) {
    .product { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
    .product-actions .btn { width: 100%; }
}

/* ===========================================================
   Hero ambient (parallax orbs + drifting botanicals)
   =========================================================== */
.hero-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    transition: transform 0.5s var(--ease);
}
.hero .container { position: relative; z-index: 1; }

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
}
.orb-gold {
    width: 360px; height: 360px;
    top: -80px; left: 4%;
    background: radial-gradient(circle, rgba(43, 196, 243, 0.55), transparent 70%);
    animation: float1 14s ease-in-out infinite;
}
.orb-sage {
    width: 420px; height: 420px;
    bottom: -120px; right: 2%;
    background: radial-gradient(circle, rgba(34, 184, 230, 0.5), transparent 70%);
    animation: float2 18s ease-in-out infinite;
}

/* .sprig = rising steam wisp */
.sprig {
    position: absolute;
    width: 210px; height: 210px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.45;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2322B8E6' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M38 90 q-15 -19 0 -36 q15 -19 0 -36'/%3E%3Cpath d='M62 90 q-15 -19 0 -36 q15 -19 0 -36'/%3E%3C/g%3E%3C/svg%3E");
}
.sprig-1 { top: 6%;  left: 3%;  animation: drift1 16s ease-in-out infinite; }
.sprig-2 { bottom: 4%; left: 9%; --r: 120deg; animation: drift2 20s ease-in-out infinite; }
.sprig-3 { top: 10%; right: 4%; width: 170px; height: 170px; transform: scaleX(-1); animation: drift1 22s ease-in-out infinite; }
.sprig-4 { bottom: 8%; right: 12%; width: 150px; height: 150px; --r: 200deg; animation: drift2 18s ease-in-out infinite; }

/* soft blooms */
.bloom {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.55;
}
.bloom-1 {
    width: 130px; height: 130px;
    top: 18%; right: 16%;
    animation: drift1 19s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%232BC4F3' opacity='0.9'%3E%3Cellipse cx='50' cy='28' rx='10' ry='20'/%3E%3Cellipse cx='50' cy='72' rx='10' ry='20'/%3E%3Cellipse cx='28' cy='50' rx='20' ry='10'/%3E%3Cellipse cx='72' cy='50' rx='20' ry='10'/%3E%3Cellipse cx='35' cy='35' rx='14' ry='14' transform='rotate(45 35 35)'/%3E%3Cellipse cx='65' cy='65' rx='14' ry='14'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='9' fill='%232A6FD6'/%3E%3C/svg%3E");
}
.bloom-2 {
    width: 90px; height: 90px;
    top: 64%; left: 24%;
    --r: 0deg;
    animation: drift2 15s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%2322B8E6' opacity='0.95'%3E%3Cellipse cx='50' cy='30' rx='9' ry='18'/%3E%3Cellipse cx='50' cy='70' rx='9' ry='18'/%3E%3Cellipse cx='30' cy='50' rx='18' ry='9'/%3E%3Cellipse cx='70' cy='50' rx='18' ry='9'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='8' fill='%232BC4F3'/%3E%3C/svg%3E");
}
.bloom-3 {
    width: 70px; height: 70px;
    top: 30%; left: 14%;
    animation: drift1 13s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%232BC4F3' opacity='0.85'%3E%3Cellipse cx='50' cy='32' rx='8' ry='16'/%3E%3Cellipse cx='50' cy='68' rx='8' ry='16'/%3E%3Cellipse cx='32' cy='50' rx='16' ry='8'/%3E%3Cellipse cx='68' cy='50' rx='16' ry='8'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='7' fill='%232A6FD6'/%3E%3C/svg%3E");
}

@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(26px, 30px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-32px, -22px); } }
@keyframes drift1 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-24px) rotate(8deg); } }
@keyframes drift2 { 0%,100% { transform: translateY(0) rotate(var(--r,120deg)); } 50% { transform: translateY(22px) rotate(calc(var(--r,120deg) + 8deg)); } }

/* ---- Page-wide ambient (fixed, behind all content) ---- */
.page-ambient {
    position: absolute;     /* scrolls with the page, spans full height */
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;            /* above the page background, below content */
    pointer-events: none;
    overflow: hidden;
}
/* keep real content above the ambient layer */
.header, .hero, .values, .collections, .craft, .contact, .footer { position: relative; z-index: 1; }
/* let the fixed botanicals show through the cream sections */
.collections { background: transparent; }

/* spread of botanicals across the whole viewport */
.pa { width: 200px; height: 200px; opacity: 0.42; }
/* .pa-bloom = coffee bean */
.pa-bloom {
    opacity: 0.42;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='rotate(25 50 50)'%3E%3Cellipse cx='50' cy='50' rx='25' ry='37' fill='%2315294F'/%3E%3Cpath d='M50 15 Q37 50 50 85' fill='none' stroke='%232BC4F3' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E");
}
/* .pa6 / .pa8 = coffee mug */
.pa6, .pa8 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2322B8E6' stroke-width='6' stroke-linejoin='round'%3E%3Cpath d='M28 38 H66 V58 a19 19 0 0 1 -38 0 Z'/%3E%3Cpath d='M66 42 a12 12 0 0 1 0 20'/%3E%3Cpath d='M30 74 H64' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}
.pa-orb-a { top: 30%; left: -60px; }
.pa-orb-b { top: 70%; right: -80px; }

.pa1  { top: 4%;  left: 2%;  animation: drift1 17s ease-in-out infinite; }
.pa2  { top: 30%; right: 3%; width: 160px; height: 160px; transform: scaleX(-1); animation: drift1 21s ease-in-out infinite; }
.pa3  { top: 46%; left: 5%;  width: 110px; height: 110px; animation: drift2 16s ease-in-out infinite; --r: 0deg; }
.pa4  { top: 62%; right: 6%; width: 180px; height: 180px; --r: 200deg; animation: drift2 23s ease-in-out infinite; }
.pa5  { top: 84%; left: 4%;  width: 120px; height: 120px; animation: drift1 19s ease-in-out infinite; }
.pa6  { top: 14%; right: 14%; width: 90px; height: 90px;  --r: 40deg; animation: drift2 14s ease-in-out infinite; }
.pa7  { top: 38%; left: 12%; width: 130px; height: 130px; --r: 90deg; animation: drift2 18s ease-in-out infinite; }
.pa8  { top: 56%; right: 16%; width: 80px; height: 80px;  animation: drift1 13s ease-in-out infinite; }
.pa9  { top: 76%; right: 10%; width: 150px; height: 150px; transform: scaleX(-1); animation: drift1 20s ease-in-out infinite; }
.pa10 { top: 92%; right: 20%; width: 90px; height: 90px;  --r: 0deg; animation: drift2 15s ease-in-out infinite; }

/* ---- Per-section ambient (for sections with opaque backgrounds) ---- */
.craft, .contact { overflow: hidden; }
.craft .container, .contact .container { position: relative; z-index: 1; }
.section-ambient {
    position: absolute;
    inset: -40px;          /* bleed so parallax shift never reveals an edge */
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    will-change: transform;
    transition: transform 0.4s var(--ease);
}
.sd, .bd {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}
/* coffee motifs for sections — read well on navy and on cream */
/* .sd = coffee mug (outline) */
.sd {
    width: 170px; height: 170px; opacity: 0.22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232BC4F3' stroke-width='5' stroke-linejoin='round'%3E%3Cpath d='M28 38 H66 V58 a19 19 0 0 1 -38 0 Z'/%3E%3Cpath d='M66 42 a12 12 0 0 1 0 20'/%3E%3Cpath d='M30 74 H64' stroke-linecap='round'/%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M40 30 q-7 -9 0 -18'/%3E%3Cpath d='M54 30 q-7 -9 0 -18'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* .bd = coffee bean */
.bd {
    width: 95px; height: 95px; opacity: 0.24;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='rotate(25 50 50)'%3E%3Cellipse cx='50' cy='50' rx='25' ry='37' fill='%232BC4F3'/%3E%3Cpath d='M50 15 Q37 50 50 85' fill='none' stroke='%2315294F' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E");
}
/* a touch stronger on the light contact section */
.contact .sd { opacity: 0.32; }
.contact .bd { opacity: 0.34; }

.sd1 { top: -24px; left: 2%;  animation: drift1 18s ease-in-out infinite; }
.sd2 { bottom: -16px; right: 7%; transform: scaleX(-1); animation: drift1 22s ease-in-out infinite; }
.bd1 { top: 28%; right: 5%;   --r: 0deg; animation: drift2 16s ease-in-out infinite; }
.sd3 { top: 8%;  left: 3%;    animation: drift1 19s ease-in-out infinite; }
.bd2 { bottom: 14%; right: 6%; --r: 0deg; animation: drift2 15s ease-in-out infinite; }
.bd3 { top: 16%; right: 13%;  width: 80px; height: 80px; animation: drift1 13s ease-in-out infinite; }

/* gallery wall gets perspective so cards can tilt */
.gallery-wall { perspective: 1100px; }
.frame-card { will-change: transform; transform-style: preserve-3d; }

/* ===========================================================
   Hero machine (isometric brew engine)
   =========================================================== */
.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 40px;
}
.hero-grid .hero-frame { text-align: left; padding-left: 0; padding-right: 0; }
.hero-grid .hero-sub { margin-left: 0; }
.hero-grid .hero-actions { justify-content: flex-start; }

.hero-machine { display: flex; justify-content: center; }
.machine-svg {
    width: 100%;
    max-width: 460px;
    height: auto;
    overflow: visible;
    animation: machineIn 0.9s var(--ease) both;
    animation-delay: 1.6s;
}
@keyframes machineIn {
    from { opacity: 0; transform: translateY(22px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

/* --- artisan scene (master cycle 4.5s) --- */

/* working arm + head rhythm */
.arm { transform-origin: 0 0; animation: working 1.15s ease-in-out infinite; }
@keyframes working { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(13deg); } }
.head { transform-box: fill-box; transform-origin: center bottom; animation: headBob 1.15s ease-in-out infinite; }
@keyframes headBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(1.5px) rotate(1.5deg); } }
.eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.8s ease-in-out infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }

/* raw blank arriving from the left */
.blank2 { transform-box: fill-box; transform-origin: center; animation: blankIn 4.5s ease-in-out infinite; }
@keyframes blankIn {
    0%   { transform: translate(-70px, 0); opacity: 0; }
    10%  { opacity: 1; }
    26%  { transform: translate(46px, 0);  opacity: 1; }
    42%  { transform: translate(52px, 0);  opacity: 1; }
    49%  { transform: translate(52px, 0);  opacity: 0; }
    100% { transform: translate(52px, 0);  opacity: 0; }
}

/* finished framed artwork emerging at center, then sliding to the right */
.artwork2 { transform-box: fill-box; transform-origin: bottom; animation: artOut 4.5s ease-in-out infinite; }
@keyframes artOut {
    0%, 52% { transform: translate(-62px, 10px) scale(0.95); opacity: 0; }
    64%     { transform: translate(-62px, -3px) scale(1.02); opacity: 1; }
    72%     { transform: translate(-62px, 0) scale(1);       opacity: 1; }
    88%     { transform: translate(0, 0) scale(1);           opacity: 1; }
    96%     { opacity: 1; }
    100%    { transform: translate(8px, -4px);               opacity: 0; }
}

/* gloss sheen sweeping across the finished frame */
.sheen { opacity: 0; animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen {
    0%, 78%   { transform: translateX(-4px) skewX(-16deg); opacity: 0; }
    84%       { opacity: 0.8; }
    93%       { transform: translateX(60px) skewX(-16deg); opacity: 0.8; }
    97%, 100% { transform: translateX(60px) skewX(-16deg); opacity: 0; }
}

/* sparkles during the work phase */
.spark { transform-box: fill-box; transform-origin: center; opacity: 0; animation: sparkFloat 4.5s ease-out infinite; }
.spark2 { animation-delay: 0.35s; }
.spark3 { animation-delay: 0.7s; }
@keyframes sparkFloat {
    0%, 22% { transform: translateY(0) scale(0.3) rotate(0);      opacity: 0; }
    34%     { transform: translateY(-9px) scale(1) rotate(45deg);  opacity: 1; }
    50%     { transform: translateY(-20px) scale(0.4) rotate(85deg); opacity: 0; }
    100%    { opacity: 0; }
}

/* ambient particles */
.dust { transform-box: fill-box; transform-origin: center; opacity: 0; }
.d1 { animation: dust 8s ease-in-out infinite; }
.d2 { animation: dust 10s ease-in-out infinite 1.5s; }
.d3 { animation: dust 9s ease-in-out infinite 3s; }
.d4 { animation: dust 11s ease-in-out infinite 4.5s; }
@keyframes dust {
    0%   { transform: translateY(12px); opacity: 0; }
    25%  { opacity: 0.5; }
    100% { transform: translateY(-46px); opacity: 0; }
}

/* processing LEDs */
.led { animation: ledPulse 1.4s ease-in-out infinite; }
.led2 { animation-delay: 0.25s; }
.led3 { animation-delay: 0.5s; }
@keyframes ledPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; gap: 24px; }
    .hero-grid .hero-frame { text-align: center; }
    .hero-grid .hero-sub { margin: 0 auto 2.4rem; }
    .hero-grid .hero-actions { justify-content: center; }
    .hero-machine { order: 2; }
    .machine-svg { max-width: 340px; }
}

@media (prefers-reduced-motion: reduce) {
    .machine-svg { animation: none; opacity: 1; transform: none; }
    .arm, .head, .eyes, .blank2, .artwork2, .sheen, .spark, .dust { animation: none !important; }
    .blank2, .spark, .dust, .sheen { opacity: 0; }
    .arm, .head { transform: none; }
    .artwork2 { opacity: 1; transform: none; }
}

/* ===========================================================
   Landing intro animation
   =========================================================== */
.intro {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    animation: introOut 0.7s var(--ease) forwards;
    animation-delay: 1.5s;
}
.intro-badge {
    position: relative;
    width: 120px;
    height: 120px;
    animation: badgePop 0.8s var(--ease) both;
}
.intro-logo {
    position: absolute;
    inset: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    border-radius: 50%;
    object-fit: cover;
    opacity: 0;
    animation: logoFade 0.7s var(--ease) forwards;
    animation-delay: 0.35s;
}
.intro-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.intro-ring circle {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 352;
    stroke-dashoffset: 352;
    animation: ringDraw 1.2s var(--ease) forwards;
    animation-delay: 0.1s;
}

@keyframes ringDraw { to { stroke-dashoffset: 0; } }
@keyframes logoFade { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes badgePop  { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes introOut {
    to { opacity: 0; visibility: hidden; transform: translateY(-24px); }
}

/* Hero load sequence — plays as the intro lifts away */
.hero-frame { animation: frameSettle 0.9s var(--ease) both; animation-delay: 1.55s; }
.hero-frame > .script-eyebrow { animation: heroRise 0.7s var(--ease) both; animation-delay: 1.95s; }
.hero-frame > .hero-title    { animation: heroRise 0.7s var(--ease) both; animation-delay: 2.08s; }
.hero-frame > .hero-sub      { animation: heroRise 0.7s var(--ease) both; animation-delay: 2.22s; }
.hero-frame > .hero-actions  { animation: heroRise 0.7s var(--ease) both; animation-delay: 2.36s; }
.hero-frame > .leaf          { animation: leafIn 1s var(--ease) both; animation-delay: 2.3s; }

@keyframes frameSettle {
    from { opacity: 0; transform: scale(0.965); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes heroRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes leafIn {
    from { opacity: 0; transform: scale(0.8); }
}
.leaf-br { animation-name: leafInFlipped; }
@keyframes leafInFlipped {
    from { opacity: 0; transform: rotate(180deg) scale(0.8); }
    to   { opacity: 0.5; transform: rotate(180deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .intro { display: none; }
    .hero-frame, .hero-frame > * { animation: none !important; opacity: 1 !important; transform: none !important; }
    .page-ambient, .section-ambient { display: none; }
    .orb, .sprig, .bloom, .sd, .bd { animation: none !important; }
}

/* ===========================================================
   Scroll reveal
   =========================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 860px) {
    .craft-grid { grid-template-columns: 1fr; gap: 40px; }
    .nav { gap: 1.5rem; }
}

@media (max-width: 640px) {
    .nav { display: none; }
    .header-inner { height: 66px; }
    .values-row { justify-content: center; gap: 0.8rem 1.6rem; }
    .value { font-size: 0.85rem; }
    .hero { padding: 40px 0 60px; }
    .collections, .craft, .contact { padding: 64px 0; }
    .gallery-wall { gap: 26px; }
    .leaf { width: 80px; height: 80px; }
    .btn { width: 100%; }
    .hero-actions, .contact-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn:hover, .frame-card:hover { transform: none; }
}