/* =========================================
   ONY FLOWERS — shared site styles
   Palette & type matched to the homepage / logo
   (blush rose · cream · sage · soft gold · charcoal-plum)
   Reuses the original class names so all subpages restyle.
   ========================================= */
:root {
    /* Brand palette */
    --cream: #FAF6EF;
    --cream-deep: #F1E7D6;
    --paper: #FBF5EA;
    --rose: #C2778C;
    --rose-dark: #A2596F;
    --gold: #BE9650;
    --gold-soft: #ECD8A6;
    --sage: #7E9070;
    --sage-soft: #9DAE90;
    --ink: #332730;
    --blush: #F2D8DF;

    /* Mapped legacy tokens (used by inline styles in the page HTML) */
    --color-primary: #A2596F;   /* deep rose — subheads, FAQ summaries, primary btn */
    --color-secondary: #BE9650; /* soft gold — accents / .text-gold */
    --color-accent: #F2D8DF;    /* blush */
    --color-bg: #FAF6EF;
    --color-text: #332730;
    --color-white: #FFFFFF;
    --color-off-white: #FBF5EA;

    /* Typography */
    --font-heading: 'Fraunces', serif;
    --font-body: 'Hanken Grotesk', sans-serif;
    --font-mono: 'Courier Prime', monospace;
    --font-script: 'Pinyon Script', cursive;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    --container-width: 1200px;
    --header-height: 92px;
    --radius-sm: 10px;
    --radius-md: 18px;
    --shadow: 4px 4px 0 var(--ink);
    --shadow-sm: 3px 3px 0 var(--ink);

    --transition-fast: 0.25s ease;
    --transition-smooth: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; font-size: 16px; }

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: var(--spacing-sm);
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.4rem, 3vw, 2.1rem); }
h4 { font-size: 1.2rem; }

p { margin-bottom: var(--spacing-sm); color: #5a4d54; }

a { text-decoration: none; color: inherit; transition: color var(--transition-fast); }
img, video { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
strong { color: var(--ink); }

/* =========================================
   UTILITIES
   ========================================= */
.container { width: 90%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--spacing-sm); }
.grid { display: grid; gap: var(--spacing-md); }
.flex { display: flex; gap: var(--spacing-sm); }
.flex-center { display: flex; justify-content: center; align-items: center; }
.section-padding { padding: var(--spacing-lg) 0; }
.text-center { text-align: center; }
.text-gold { color: var(--gold); font-style: italic; }

/* Buttons — pill + offset shadow (homepage style) */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px;
    border-radius: 40px;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: .02em;
    font-size: 0.92rem;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .2s;
    border: 2.5px solid var(--ink);
    background: var(--gold);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--rose); color: var(--paper); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }

/* =========================================
   HEADER / NAV  (unified with the homepage)
   ========================================= */
.ticker{background:var(--sage);color:var(--paper);border-bottom:3px solid var(--ink);overflow:hidden;white-space:nowrap}
.ticker__track{display:inline-block;padding:9px 0;animation:scroll 30s linear infinite;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:13px}
.ticker__track span{margin:0 22px}
.ticker__track i{color:var(--gold-soft);width:13px;height:13px;vertical-align:-2px;margin:0 4px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

header{position:sticky;top:0;left:0;width:100%;height:auto;background:rgba(250,246,239,.92);backdrop-filter:blur(10px);z-index:1000;border-bottom:3px solid var(--ink);display:block}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;max-width:var(--container-width);margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center}
.brand img{height:58px;width:auto}
.nav__links{display:flex;gap:22px;align-items:center}
.nav__links>a,.nav__item>a{font-family:var(--font-body);font-weight:600;font-size:15px;position:relative;color:var(--ink);padding:6px 0;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.nav__links>a::after,.nav__item>a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2.5px;background:var(--rose);transition:width .25s}
.nav__links>a:hover::after,.nav__item>a:hover::after{width:100%}
.nav__item{position:relative;display:inline-flex;align-items:center}
.nav__chev{width:14px;height:14px;transition:transform .25s}
.nav__item:hover .nav__chev{transform:rotate(180deg)}
.nav__dd{position:absolute;top:150%;left:50%;transform:translateX(-50%) translateY(10px);background:var(--cream);border:2.5px solid var(--ink);border-radius:16px;padding:8px;min-width:235px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.25s;z-index:50}
.nav__dd::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav__item:hover .nav__dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__dd a{display:block;padding:9px 14px;border-radius:9px;font-size:14px;white-space:nowrap;font-weight:600;color:var(--ink)}
.nav__dd a::after{display:none}
.nav__dd a:hover{background:var(--cream-deep);color:var(--rose-dark)}
.btn--red{background:var(--rose);color:var(--paper)}
.btn--ghost{background:transparent}
.btn--lg{padding:15px 28px;font-size:17px}
.btn i{width:17px;height:17px}
.nav__menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--ink)}
.nav__menu-btn i{width:26px;height:26px}
.drawer{position:fixed;inset:0;z-index:400;background:var(--cream);transform:translateX(100%);transition:transform .35s;display:flex;flex-direction:column;padding:84px 32px 40px;overflow-y:auto}
.drawer.open{transform:none}
.drawer>a{font-family:var(--font-heading);font-size:26px;font-weight:800;padding:11px 0;border-bottom:2px solid rgba(51,39,48,.12);color:var(--ink)}
.drawer__group{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);margin-top:22px;margin-bottom:4px}
.drawer a.drawer__sub{font-family:var(--font-body);font-size:17px;font-weight:600;padding:8px 0;border-bottom:1px solid rgba(51,39,48,.08)}
.drawer__close{position:absolute;top:22px;right:26px;background:none;border:none;cursor:pointer;color:var(--ink)}
.drawer__close i{width:30px;height:30px}
@media(max-width:1024px){
  .nav__links{display:none}
  .nav .btn--red{display:none}
  .nav__menu-btn{display:block}
}
/* legacy classes — unused after nav unification, kept harmless */
.hamburger { display: none; }

/* =========================================
   HERO (subpage inline backgrounds)
   ========================================= */
.hero {
    position: relative; min-height: 56vh; width: 100%; overflow: hidden;
    display: flex; align-items: center; justify-content: center; color: var(--color-white);
}
.hero-video {
    position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -1; transform: translate(-50%, -50%);
    object-fit: cover; filter: brightness(0.6);
}
.hero-content { text-align: center; max-width: 820px; position: relative; z-index: 1; padding: var(--spacing-md); }
.hero h1 { color: var(--color-white); margin-bottom: var(--spacing-md); animation: fadeUp 1s ease-out; }
.hero h1 .em, .hero .em { color: var(--blush); font-style: italic; }
.hero p { font-size: 1.25rem; color: rgba(255, 255, 255, 0.92); margin-bottom: var(--spacing-lg); animation: fadeUp 1.2s ease-out; }
/* Decorative subpage hero frame */
.hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
    background: radial-gradient(circle at 13px -6px, transparent 13px, var(--cream) 14px) repeat-x;
    background-size: 26px 26px;
}

/* =========================================
   SECTIONS / CARDS
   ========================================= */
.services-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: var(--spacing-md); }
.service-card {
    background: var(--paper);
    padding: var(--spacing-md);
    border: 3px solid var(--ink);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.service-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.service-card h3 { font-size: 1.5rem; margin-bottom: var(--spacing-xs); }

/* Article + sidebar layout */
.content-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--spacing-lg); align-items: start; }
.main-content { font-size: 1.04rem; }
.main-content > h2 { margin-top: 0.5rem; }
.main-content h2, .main-content h3 { margin-top: 1.4rem; }
.main-content h4 { margin-top: 1.2rem; color: var(--rose-dark) !important; }
.main-content p { color: #5a4d54; }
.main-content a:not(.btn) { color: var(--rose-dark); font-weight: 600; border-bottom: 1.5px solid var(--blush); }
.main-content a:not(.btn):hover { border-bottom-color: var(--rose); }
.main-content hr { border: 0; border-top: 2px dashed var(--blush) !important; }
.main-content ul li::marker { color: var(--rose); }

.sidebar { position: sticky; top: calc(var(--header-height) + 20px); }
.sidebar-widget {
    background: var(--cream);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    border: 3px solid var(--ink);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.sidebar-widget h3, .sidebar-widget h4 { color: var(--ink); }
.sidemenu li a { font-weight: 600; color: var(--ink); }
.sidemenu li a:hover { color: var(--rose-dark); }

/* FAQ accordion (uses <details>) */
.faq-accordion details { border-bottom: 2px solid var(--cream-deep) !important; }
.faq-accordion summary { color: var(--rose-dark) !important; font-family: var(--font-body); font-weight: 700; }
.faq-accordion summary::marker { color: var(--rose); }

/* =========================================
   FOOTER
   ========================================= */
footer { background: var(--ink); color: var(--cream); padding: var(--spacing-lg) 0 var(--spacing-md); border-top: 3px solid var(--gold); }
.footer-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
footer h4 { color: var(--gold); margin-bottom: var(--spacing-md); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
footer p { color: #cdbfca; }
footer a { display: block; margin-bottom: var(--spacing-xs); color: #d9ccd6; }
footer a:hover { color: var(--gold-soft); }
.copyright { text-align: center; border-top: 1px solid #4a3d46; padding-top: var(--spacing-md); font-size: 0.85rem; color: #b3a5b0; font-family: var(--font-mono); letter-spacing: .04em; }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
    .nav-links {
        display: none; flex-direction: column; align-items: flex-start;
        position: absolute; top: var(--header-height); left: 0; width: 100%;
        background: var(--cream); padding: var(--spacing-md);
        box-shadow: 0 10px 20px rgba(51, 39, 48, 0.12);
        border-bottom: 3px solid var(--ink);
        max-height: 80vh; overflow-y: auto; gap: var(--spacing-sm);
    }
    .nav-links.active { display: flex; }
    .hamburger { display: block; }
    .dropdown { width: 100%; display: block; }
    .dropbtn { width: 100%; text-align: left; display: flex; justify-content: space-between; }
    .dropbtn::after { content: '+'; position: static; width: auto; height: auto; background: none; color: var(--rose); }
    .dropdown:hover .dropdown-content { display: none; }
    .dropdown.active .dropdown-content {
        display: block; position: static; box-shadow: none; border: none;
        background: rgba(51, 39, 48, 0.04); width: 100%; opacity: 1; transform: none; padding-left: var(--spacing-sm);
    }
    .dropdown.active .dropbtn::after { content: '-'; }
}
@media (max-width: 768px) {
    .content-layout { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2.5rem; }
}

/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-scroll { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-scroll.visible { opacity: 1; transform: translateY(0); }

/* Falling-petals canvas overlay (kept from original) */
#flower-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; opacity: 1; }