/* =========================================================
   5 LIFE CO. — 5lifeco.com — shared styles for every page
   ========================================================= */

:root {
    --black: #050505;
    --panel: #0a0a0a;
    --panel-2: #0d0d0c;
    --gold: #b99a63;
    --white: #f4f1eb;
    --muted: #aaa49a;
    --border: rgba(255,255,255,.12);
    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans: "Montserrat", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 72px; }

body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: var(--sans);
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

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

/* The brush-stroke 5 logo, used everywhere the number 5 appears in text */
img.fl-5 {
    display: inline-block;
    height: 1.15em;
    width: auto;
    max-width: none;
    vertical-align: -0.2em;
    margin: 0 0.04em 0 0;
}

.fl-kicker img.fl-5,
.fl-partner-name img.fl-5,
.fl-button img.fl-5,
.fl-link img.fl-5,
.fl-footer img.fl-5,
.fl-num + img.fl-5,
.fl-tag-list img.fl-5 { height: 1.7em; vertical-align: -0.55em; }

.fl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.fl-container { max-width: 1600px; margin: 0 auto; padding: 0 55px; }

.fl-narrow { max-width: 1200px; margin: 0 auto; }

/* ================= TEXT ================= */

.fl-kicker {
    margin: 0 0 12px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #d8d1c6;
}

.fl-heading {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 500;
    line-height: 1.08;
    color: var(--white);
}

.fl-heading-xl { font-size: 54px; line-height: 1.02; }

.fl-copy {
    margin: 0 0 14px;
    max-width: 520px;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--muted);
}

.fl-copy-short { max-width: 360px; font-size: 17px; margin-bottom: 0; }

.fl-gold-line { width: 38px; height: 1px; background: var(--gold); margin: 26px 0; }

.fl-link {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    width: fit-content;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #f1eee8;
}

.fl-arrow {
    width: 38px;
    height: 1px;
    background: var(--gold);
    position: relative;
    transition: width .3s ease;
}

.fl-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
    transform: rotate(45deg);
}

.fl-link:hover .fl-arrow { width: 50px; }

.fl-button {
    display: inline-block;
    padding: 16px 30px;
    border: 1px solid var(--gold);
    background: transparent;
    color: #f1eee8;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

.fl-button:hover { background: var(--gold); color: #0a0a0a; }

/* ================= NAVIGATION ================= */

.fl-nav {
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(5,5,5,.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(6px);
}

.fl-nav-inner {
    height: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 55px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.fl-logo { display: flex; align-items: center; height: 64px; width: fit-content; }

.fl-logo img { width: auto; max-width: 48px; max-height: 44px; object-fit: contain; }

.fl-menu { height: 64px; display: flex; align-items: center; gap: 44px; }

.fl-menu-item {
    height: 64px;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.3px;
    text-transform: uppercase;
    color: #eee;
    cursor: pointer;
    white-space: nowrap;
}

.fl-menu-item::after {
    content: "";
    position: absolute;
    bottom: 14px;
    left: 0;
    height: 1px;
    width: 0;
    background: var(--gold);
    transition: width .3s ease;
}

.fl-menu-item:hover::after,
.fl-menu-item.active::after { width: 100%; }

.fl-dropdown {
    position: absolute;
    top: 64px;
    left: 0;
    width: 210px;
    background: rgba(8,8,8,.98);
    border: 1px solid var(--border);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.fl-menu-dropdown:hover .fl-dropdown,
.fl-menu-dropdown:focus-within .fl-dropdown { opacity: 1; visibility: visible; }

.fl-dropdown a {
    display: block;
    padding: 16px 20px;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #e8e4dc;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: background .25s ease, padding .25s ease;
}

.fl-dropdown a:last-child { border-bottom: none; }

.fl-dropdown a:hover { background: #151515; padding-left: 25px; }

.fl-mobile-button {
    display: none;
    justify-self: end;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 0;
    background: transparent;
    color: #fff;
    padding: 9px 12px;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 2px;
    line-height: 1;
    cursor: pointer;
}

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

.fl-hero {
    min-height: 460px;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #0b0a09;
    background-image: url("../img/hero-bottle.jpg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right center;
}

.fl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(0,0,0,.96) 0%,
        rgba(0,0,0,.8) 35%,
        rgba(0,0,0,.1) 62%,
        rgba(0,0,0,.2) 100%);
    pointer-events: none;
}

.fl-hero-content {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 56px 55px;
    position: relative;
    z-index: 2;
}

.fl-hero-text { width: min(560px, 100%); margin-left: 6%; text-align: center; }

.fl-hero-title { margin: 0; font-weight: inherit; }

.fl-hero-logo { display: block; width: 150px; margin: 0 auto 16px; }

.fl-hero-logo img { width: 100%; height: auto; }

.fl-title {
    display: block;
    margin: 0;
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 14px;
    padding-left: 14px;
    color: #f3efe7;
}

.fl-subtitle {
    margin-top: 16px;
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #c9c3b9;
}

.fl-hero-text .fl-gold-line { margin: 26px auto; }

.fl-tagline {
    margin: 0;
    font-family: var(--serif);
    font-size: 23px;
    font-style: italic;
    font-weight: 500;
    color: #e4dfd6;
}

/* ================= INNER PAGE HERO ================= */

.fl-page-hero {
    position: relative;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(ellipse at 78% 45%, rgba(185,154,99,.13), transparent 50%),
        radial-gradient(ellipse at 10% 0%, rgba(185,154,99,.06), transparent 45%),
        var(--black);
}

.fl-page-hero-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 90px 55px 80px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 50px;
    align-items: center;
}

.fl-page-hero-text { padding-left: 24px; border-left: 1px solid var(--gold); }

.fl-page-hero-text .fl-copy { max-width: 560px; }

.fl-page-hero-art { display: flex; justify-content: center; align-items: center; }

.fl-page-hero-art img { max-height: 460px; width: auto; }

.fl-page-hero-mark { opacity: .9; max-height: 260px !important; }

.fl-specs {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #d8d1c6;
}

.fl-specs span { padding-left: 14px; border-left: 1px solid rgba(185,154,99,.6); }

/* ================= WINE + CLOTHING ROW ================= */

.fl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border);
    background: var(--panel);
}

.fl-feature {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 22px;
    padding: 18px 36px;
}

.fl-feature + .fl-feature { border-left: 1px solid var(--border); }

.fl-image-panel {
    min-height: 232px;
    background-color: #0b0b0b;
    background-size: cover;
    background-position: center;
    filter: grayscale(1) brightness(.88);
}

.fl-wine-image { background-image: url("../img/wine-label.jpg"); background-position: center 42%; }

.fl-info {
    padding: 22px 0 22px 22px;
    border-left: 1px solid var(--gold);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Photos always show in black and white */
.fl-photo { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }

.fl-hero-photo { max-height: 460px !important; width: auto; filter: grayscale(1) contrast(1.06) brightness(.85) !important; }

/* ================= SECTIONS ================= */

.fl-section { border-top: 1px solid var(--border); background: var(--black); }

.fl-section-alt { background: var(--panel-2); }

.fl-section-glow {
    background:
        radial-gradient(ellipse at 15% 0%, rgba(185,154,99,.08), transparent 55%),
        var(--black);
}

.fl-section-inner { max-width: 1600px; margin: 0 auto; padding: 72px 55px; }

.fl-section-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }

.fl-section-head .fl-copy { max-width: none; margin-left: auto; margin-right: auto; }

.fl-section-head .fl-heading { font-size: 40px; }

/* Story + meanings */

.fl-story { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; }

.fl-story-main { padding-left: 22px; border-left: 1px solid var(--gold); }

.fl-story-main .fl-heading { font-size: 40px; }

.fl-meaning-list { list-style: none; margin: 0; padding: 0; }

.fl-meaning-list li {
    display: flex;
    align-items: baseline;
    gap: 22px;
    margin: 0;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
    color: #e9e4db;
}

.fl-meaning-list li:first-child { border-top: 1px solid rgba(255,255,255,.08); }

.fl-num { min-width: 26px; font-size: 10px; letter-spacing: 2px; color: var(--gold); }

/* Cards (pillars, categories, services) */

.fl-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 34px 40px;
}

.fl-card-grid-3 { grid-template-columns: repeat(3, 1fr); }

.fl-card-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* No boxes: each item sits under a fine line that turns gold on hover */
.fl-card {
    position: relative;
    display: block;
    padding: 26px 0 6px;
    border-top: 1px solid rgba(255,255,255,.16);
    transition: border-color .4s ease;
}

a.fl-card:hover, .fl-card:hover { border-top-color: var(--gold); }

.fl-card-num {
    font-family: var(--serif);
    font-size: 44px;
    font-weight: 500;
    line-height: 1;
    color: rgba(185,154,99,.55);
}

.fl-card-name {
    margin: 18px 0 12px;
    font-family: var(--serif);
    font-size: 23px;
    font-weight: 500;
    line-height: 1.15;
    color: var(--white);
}

.fl-card-line { width: 23px; height: 1px; background: var(--gold); margin-bottom: 14px; }

.fl-card p {
    margin: 0;
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    color: #9e9991;
}

/* Pillar detail blocks (Lifestyle page) */

.fl-pillar-block {
    display: grid;
    grid-template-columns: 120px 1fr 1.3fr;
    gap: 36px;
    padding: 44px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    scroll-margin-top: 80px;
}

.fl-pillar-block:first-child { border-top: 1px solid rgba(255,255,255,.08); }

.fl-pillar-block .fl-card-num { font-size: 60px; }

.fl-pillar-block .fl-heading { font-size: 34px; }

.fl-tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; align-content: flex-start; }

.fl-tag-list li {
    padding: 9px 0;
    border-bottom: 1px solid rgba(185,154,99,.35);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e3ded4;
}

/* Words from the label */

.fl-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 34px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 34px;
    font-weight: 500;
    color: #e9e4db;
}

.fl-words span:nth-child(even) { color: var(--gold); }

/* Two-column image + text */

.fl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.fl-split-img { height: 460px; overflow: hidden; background: #000; }

.fl-split-img .fl-photo { filter: grayscale(1) contrast(1.06) brightness(.82); }

/* Call to action band */

.fl-cta { text-align: center; }

.fl-cta .fl-copy { margin: 0 auto 26px; max-width: 560px; }

/* ================= BALSAMO + PARTNERS ================= */

.fl-bottom { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }

.fl-balsamo {
    min-height: 270px;
    padding: 48px 55px 48px 18%;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.95) 100%),
        url("../img/balsamo-bg.jpg");
    background-color: #090909;
    background-size: cover;
    background-position: left center;
}

.fl-balsamo-content { max-width: 440px; padding-left: 24px; border-left: 1px solid var(--gold); }

.fl-partners { padding: 34px 50px 40px; background: #080808; border-left: 1px solid var(--border); }

.fl-partner-subtitle {
    margin: 0 0 22px;
    font-family: var(--serif);
    font-size: 20px;
    font-style: italic;
    font-weight: 500;
    color: #eee9df;
}

.fl-partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }

.fl-partner-card {
    padding: 24px 0 0;
    border-top: 1px solid rgba(255,255,255,.16);
    transition: border-color .4s ease;
}

.fl-partner-card:hover { border-top-color: var(--gold); }

.fl-partner-name { margin-bottom: 14px; font-size: 12px; letter-spacing: 4px; color: #eee8de; }

.fl-partner-copy {
    margin: 0;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: #9e9991;
}

.fl-partner-card .fl-link { margin-top: 16px; font-size: 9px; }

.fl-partner-card .fl-arrow { width: 26px; }

/* ================= CONTACT FORM ================= */

.fl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }

.fl-field { display: flex; flex-direction: column; gap: 8px; }

.fl-field-full { grid-column: 1 / -1; }

.fl-field label {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #d8d1c6;
}

.fl-field input,
.fl-field select,
.fl-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 0;
    background: #0b0b0b;
    color: var(--white);
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
}

.fl-field select { font-family: var(--sans); font-size: 13px; letter-spacing: 1px; }

.fl-field textarea { min-height: 170px; resize: vertical; }

.fl-field input:focus,
.fl-field select:focus,
.fl-field textarea:focus { outline: none; border-color: var(--gold); }

.fl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fl-notice {
    display: none;
    margin-bottom: 26px;
    padding: 16px 20px;
    border: 1px solid var(--gold);
    font-family: var(--serif);
    font-size: 18px;
    color: #eee9df;
}

.fl-notice.show { display: block; }

.fl-contact-aside .fl-meaning-list li { font-size: 18px; }

/* ================= INSTAGRAM ================= */

.fl-ig-handle a { transition: color .3s ease; }

.fl-ig-handle a:hover { color: var(--gold); }

.fl-ig-head { padding-bottom: 0; }

/* Edge-to-edge strip of six photos */
.fl-ig-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }

.fl-ig-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
}

.fl-ig-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.06) brightness(.8);
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}

.fl-ig-tile:hover img { transform: scale(1.06); filter: grayscale(1) contrast(1.06) brightness(.45); }

.fl-ig-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transition: opacity .5s ease;
}

.fl-ig-tile:hover .fl-ig-hover { opacity: 1; }

.fl-ig-foot { padding: 44px 22px 64px; }

/* ================= ENLIGHTENMENT =================
   The all-seeing eye: gold-line triangle, slow light rays, the 5 as the pupil. */

.fl-light {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(185,154,99,.10), transparent 55%),
        var(--black);
}

.fl-light-inner { max-width: 760px; text-align: center; padding-top: 80px; padding-bottom: 84px; }

.fl-eye { display: block; width: 210px; height: auto; margin: 0 auto 34px; overflow: visible; }

.fl-eye-rays { stroke: rgba(185,154,99,.45); stroke-width: .7; transform-origin: 120px 125px; animation: fl-rays 90s linear infinite; }

@keyframes fl-rays { to { transform: rotate(360deg); } }

.fl-light .fl-heading { font-size: 44px; }

.fl-light .fl-copy { max-width: 560px; margin-left: auto; margin-right: auto; }

.fl-invite {
    margin: 22px auto 0;
    max-width: 600px;
    font-family: var(--serif);
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
    color: #ece7de;
}

.fl-signature { margin-top: 34px; display: inline-flex; align-items: center; gap: 12px; }

.fl-signature img { height: 36px; width: auto; }

.fl-signature span { font-family: var(--serif); font-size: 20px; letter-spacing: 8px; color: var(--white); }

.fl-motto { margin-top: 18px; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); }

@media (prefers-reduced-motion: reduce) { .fl-eye-rays { animation: none; } }

@media (max-width: 640px) {
    .fl-light-inner { padding-top: 60px; padding-bottom: 64px; }
    .fl-eye { width: 170px; margin-bottom: 28px; }
    .fl-light .fl-heading { font-size: 34px; }
    .fl-invite { font-size: 21px; }
}

/* ================= HOROSCOPES (Entertainment page) ================= */

@font-face {
    font-family: "Five Zodiac";
    src: url("../fonts/zodiac.woff2") format("woff2"), url("../fonts/zodiac.woff") format("woff");
    font-display: swap;
}

.fl-zodiac {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 14px;
    max-width: 1120px;
    margin: 0 auto;
}

.fl-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.fl-sign-glyph {
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(185,154,99,.42);
    border-radius: 50%;
    font-family: "Five Zodiac", "Noto Sans Symbols", serif;
    font-size: 40px;
    line-height: 1;
    color: var(--gold);
    transition: border-color .4s ease, background .4s ease, box-shadow .4s ease, color .4s ease;
}

.fl-sign:hover .fl-sign-glyph,
.fl-sign:focus-visible .fl-sign-glyph {
    border-color: var(--gold);
    background: rgba(185,154,99,.07);
    box-shadow: 0 0 36px rgba(185,154,99,.2);
    color: #e6d2a8;
}

.fl-sign:focus-visible { outline: none; }

.fl-sign-name { margin-top: 4px; font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--white); }

.fl-sign-dates { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: #8f8a82; }

.fl-zodiac-note {
    margin: 50px auto 0;
    text-align: center;
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #6f6b65;
}

/* The reading */
.fl-reading {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse at 50% 32%, rgba(185,154,99,.12), transparent 55%),
        rgba(4,4,4,.992);
    animation: fl-fade .4s ease;
}

.fl-reading[hidden] { display: none; }

@keyframes fl-fade { from { opacity: 0; } to { opacity: 1; } }

.fl-reading-box {
    position: relative;
    width: min(640px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 50px 30px 26px;
    text-align: center;
}

.fl-reading-close {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 8px 4px;
    border: 0;
    background: none;
    color: #d8d1c6;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
}

.fl-reading-close span { font-size: 15px; letter-spacing: 0; margin-left: 4px; vertical-align: -1px; }

.fl-reading-close:hover { color: var(--gold); }

.fl-reading-glyph {
    font-family: "Five Zodiac", "Noto Sans Symbols", serif;
    font-size: 66px;
    line-height: 1;
    color: var(--gold);
    text-shadow: 0 0 40px rgba(185,154,99,.35);
}

.fl-reading .fl-heading { margin: 16px 0 6px; font-size: 46px; }

.fl-reading-dates { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: #8f8a82; }

.fl-reading .fl-gold-line { margin: 26px auto; }

.fl-reading-text {
    max-width: 520px;
    margin: 0 auto 30px;
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 500;
    line-height: 1.42;
    color: #ece7de;
}

.fl-reading-last { font-size: 19px; color: var(--muted); margin-bottom: 10px; }

.fl-last .fl-kicker { color: #8f8a82; }

.fl-reading-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
}

.fl-reading-nav button {
    min-width: 100px;
    padding: 8px 0;
    border: 0;
    background: none;
    color: #d8d1c6;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
}

#flReadingPrev { text-align: left; }

#flReadingNext { text-align: right; }

.fl-reading-nav button:hover { color: var(--gold); }

.fl-reading-nav .fl-signature { margin-top: 0; }

.fl-reading-nav .fl-signature img { height: 26px; }

.fl-reading-nav .fl-signature span { font-size: 15px; letter-spacing: 6px; }

@media (max-width: 900px) {
    .fl-zodiac { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
    .fl-zodiac { grid-template-columns: repeat(3, 1fr); gap: 30px 6px; }
    .fl-sign-glyph { width: 76px; height: 76px; font-size: 33px; }
    .fl-sign-name { font-size: 19px; }
    .fl-sign-dates { font-size: 8px; letter-spacing: 1.5px; }
    .fl-reading { padding: 14px; align-items: flex-start; }
    .fl-reading-box { padding: 48px 8px 20px; max-height: calc(100vh - 28px); }
    .fl-reading .fl-heading { font-size: 38px; }
    .fl-reading-text { font-size: 22px; }
    .fl-reading-last { font-size: 18px; }
    .fl-reading-nav button { min-width: 80px; }
    .fl-reading-nav .fl-signature span { display: none; }
}

/* ================= BOTTOM COLLAGE =================
   Black-and-white photos in even rows. Every photo keeps its own shape
   (nothing is cropped, no faces cut off); each row lines up edge to edge. */

.fl-mosaic {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 4px;
}

.fl-mosaic figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    flex: calc(var(--r) * 100) 1 calc(var(--r) * 180px);
    background: #000;
}

/* keeps a short last row from stretching (site.js lets a nearly full last row fill out) */
.fl-mosaic::after { content: ""; flex: 100000 1 0; }

.fl-mosaic.fl-fill-last::after { display: none; }

.fl-mosaic img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(1) brightness(.82);
    transition: filter .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.fl-mosaic figure:hover img { filter: grayscale(1) brightness(1); transform: scale(1.03); }

/* Every product and page photo stays black and white */
.fl-page-hero-art img { filter: grayscale(1); }

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

.fl-footer {
    padding: 30px 55px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #77736d;
}

.fl-footer-links { display: flex; flex-wrap: wrap; gap: 25px; }

.fl-footer a:hover { color: #ddd; }

.fl-footer-note {
    padding: 0 55px 30px;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #5f5b55;
}

/* ================= AGE CHECK ================= */

.fl-age {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(185,154,99,.12), transparent 55%),
        rgba(5,5,5,.985);
}

.fl-age-box { max-width: 460px; text-align: center; }

.fl-age-box > img { width: 90px; margin: 0 auto 26px; }

.fl-age-box .fl-heading { font-size: 34px; }

.fl-age-box .fl-copy { margin: 0 auto 28px; }

.fl-age-actions { display: flex; justify-content: center; gap: 14px; }

body.fl-locked { overflow: hidden; }

/* ================= RESPONSIVE ================= */

@media (max-width: 1200px) {
    .fl-nav-inner { padding: 0 30px; }
    .fl-menu { gap: 26px; }
    .fl-hero-content,
    .fl-section-inner,
    .fl-page-hero-inner { padding-left: 35px; padding-right: 35px; }
    .fl-hero-text { margin-left: 0; }
    .fl-row { grid-template-columns: 1fr; }
    .fl-feature + .fl-feature { border-left: none; border-top: 1px solid var(--border); }
    .fl-bottom { grid-template-columns: 1fr; }
    .fl-balsamo { padding-left: 35px; }
    .fl-partners { border-left: none; border-top: 1px solid var(--border); }
    .fl-pillar-block { grid-template-columns: 90px 1fr; }
    .fl-pillar-block .fl-tag-list { grid-column: 2; }
}

@media (max-width: 900px) {
    .fl-nav { height: 65px; }
    .fl-nav-inner { padding: 0 20px; grid-template-columns: 1fr auto; }
    .fl-mobile-button { display: block; }

    .fl-menu {
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        right: 0;
        height: auto;
        max-height: calc(100vh - 65px);
        overflow-y: auto;
        padding: 10px 20px 20px;
        background: #070707;
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .fl-menu.mobile-open { display: flex; }

    .fl-menu-item { height: 50px; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); }

    .fl-menu-item::after { display: none; }

    .fl-menu-dropdown { display: block; height: auto; line-height: 50px; }

    .fl-dropdown {
        position: static;
        width: 100%;
        display: none;
        opacity: 1;
        visibility: visible;
        border: none;
        border-left: 1px solid var(--gold);
        margin: 0 0 12px;
    }

    .fl-menu-dropdown.mobile-dropdown-open .fl-dropdown { display: block; }

    .fl-dropdown a { padding: 14px 16px; }

    /* Home hero: text on top, bottle centered underneath */
    .fl-hero {
        min-height: 880px;
        align-items: flex-start;
        background-size: auto 430px;
        background-position: left calc(50vw - 645px) bottom 10px;
    }

    .fl-hero::before {
        background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 50%, rgba(0,0,0,0) 100%);
    }

    .fl-hero-text { margin: 0 auto; }

    .fl-story,
    .fl-split,
    .fl-page-hero-inner { grid-template-columns: 1fr; gap: 44px; }

    .fl-page-hero-inner { padding-top: 64px; padding-bottom: 60px; }

    .fl-page-hero-art img { max-height: 380px; }

    .fl-card-grid-3,
    .fl-card-grid-4 { grid-template-columns: repeat(2, 1fr); }

    .fl-ig-strip { grid-template-columns: repeat(3, 1fr); }

    .fl-mosaic figure { flex-basis: calc(var(--r) * 140px); }

    .fl-split-img { height: 360px; }

    .fl-hero-photo { max-height: 440px !important; }

    .fl-heading-xl { font-size: 44px; }
}

@media (max-width: 640px) {
    .fl-hero { min-height: 780px; }
    .fl-hero-content { padding: 50px 22px; }
    .fl-hero-logo { width: 120px; }
    .fl-title { font-size: 32px; letter-spacing: 10px; padding-left: 10px; }
    .fl-subtitle { font-size: 9px; letter-spacing: 2.2px; white-space: nowrap; }
    .fl-feature { grid-template-columns: 1fr; padding: 20px 22px 28px; }
    .fl-image-panel { min-height: 240px; }
    .fl-mosaic { gap: 3px; padding: 0 3px; }
    .fl-mosaic figure { flex-basis: calc(var(--r) * 112px); }
    .fl-heading,
    .fl-story-main .fl-heading,
    .fl-section-head .fl-heading,
    .fl-pillar-block .fl-heading { font-size: 31px; }
    .fl-heading-xl { font-size: 38px; }
    .fl-section-inner { padding: 56px 22px; }
    .fl-page-hero-inner { padding: 52px 22px 48px; }
    .fl-balsamo { padding: 44px 22px; }
    .fl-partners { padding: 34px 22px 40px; }
    .fl-partner-grid,
    .fl-form { grid-template-columns: 1fr; }
    .fl-pillar-block { grid-template-columns: 1fr; gap: 18px; padding: 36px 0; }
    .fl-card-grid-3,
    .fl-card-grid-4 { grid-template-columns: 1fr; }
    .fl-card { padding: 22px 0 4px; }
    .fl-ig-strip { gap: 2px; }
    .fl-ig-foot { padding: 36px 22px 52px; }
    .fl-card-num { font-size: 36px; }
    .fl-pillar-block .fl-tag-list { grid-column: auto; }
    .fl-words { font-size: 26px; gap: 6px 22px; }
    .fl-footer { padding: 25px 22px; flex-direction: column; gap: 15px; text-align: center; }
    .fl-footer-links { justify-content: center; }
    .fl-footer-note { padding: 0 22px 26px; text-align: center; }
}

/* Seven menu items: tighten them a little on mid-size screens */
@media (max-width: 1100px) and (min-width: 901px) {
    .fl-menu { gap: 20px; }
    .fl-menu-item { font-size: 10px; letter-spacing: 1.8px; }
}

/* Very small phones */
@media (max-width: 359px) {
    .fl-subtitle { font-size: 8px; letter-spacing: 1.3px; }
}