/* ============================================================
   Funerals Live standalone site — page design system.
   Faithful to Agam's Figma "Funerals Live Design v2"
   (SryxvxM6MwQ41yeVoH7xYz). Loaded AFTER styles.css (which
   provides Poppins/Taviraj @font-face, the .fl-* chrome and
   Bootstrap). Everything here is Poppins-based per the design.

   Tokens:
     Green #1D4641 (section headings)   Plum #463351 (titles/body)
     Text #180026   Magenta #8B104E   Off-white #F7F6F3
     Mint #D9EFDE   Border #C0BAC4
     Radii 8 / 32 / 48px   Letter-spacing -0.018em on all copy
   ============================================================ */

:root {
    --fl-green: #1D4641;
    --fl-plum: #463351;
    --fl-ink: #180026;
    --fl-magenta: #8B104E;
    --fl-magenta-hover: #6E0C3D;
    --fl-offwhite: #F7F6F3;
    --fl-mint: #D9EFDE;
    --fl-border: #C0BAC4;
    --fl-tertiary: #4D1C34;
    --fl-secondary: #FFCCCF;
    --fl-muted: #807388;
    --fl-error: #FF4E68;
    /* Neutral grey wash for secondary/outline button hover — deliberately
       NOT the magenta primary fill, so an outline button never reads as the
       primary button on hover. #E8EEF4 is the shared "dropdown-hover"
       neutral from the Gaia palette (design-tokens.json). */
    --fl-grey-hover: #E8EEF4;
}

.fl-site {
    background: var(--fl-offwhite);
    font-family: "Poppins", sans-serif;
    letter-spacing: -0.018em;
}

/* Layout ---------------------------------------------------- */
.fl-section {
    padding: 80px 0;
}
.fl-section--tight {
    padding: 56px 0;
}
/* Figma frames all place FL page content at 80px gutters with a 1280px
   content column on a 1440 frame (verified across D - Home, FAQs, Blogs,
   About and the three package frames). max-width is the OUTER box, so it
   must be 1440 (1280 + 2x80) — 1360 was leaving the content 80px narrow
   on every page. */
.fl-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}

/* Typography ------------------------------------------------ */
.fl-h1 {
    font-weight: 600;
    font-size: 56px;
    line-height: 72px;
    letter-spacing: -0.018em;
    color: var(--fl-green);
    margin: 0;
}
.fl-h2 {
    font-weight: 600;
    font-size: 48px;
    line-height: 64px;
    letter-spacing: -0.018em;
    color: var(--fl-green);
    margin: 0;
}
.fl-lede {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0;
}
.fl-kicker {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.018em;
    margin: 0;
}

/* Buttons --------------------------------------------------- */
.fl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    border-radius: 8px;
    padding: 16px 24px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
    cursor: pointer;
}
.fl-btn--sm {
    padding: 12px 16px;
}
.fl-btn--fill {
    background: var(--fl-magenta);
    color: #fff;
    border: 1.5px solid var(--fl-magenta);
}
.fl-btn--fill:hover,
.fl-btn--fill:focus-visible {
    background: var(--fl-magenta-hover);
    border-color: var(--fl-magenta-hover);
    color: #fff;
}
.fl-btn--outline {
    background: #fff;
    color: var(--fl-magenta);
    border: 1.5px solid var(--fl-magenta);
}
/* Grey hover (keeps magenta text + border) — an outline button must not
   invert to the solid magenta primary fill on hover. */
.fl-btn--outline:hover,
.fl-btn--outline:focus-visible {
    background: var(--fl-grey-hover);
    color: var(--fl-magenta);
}

/* Header — reuses the Gaia header layout (.navbar/.container/.gnav/
   .gnav-link) with Funerals Live branding + magenta theme. ------ */
.fl-header.static-header,
.fl-header.static-header .navbar {
    background: var(--fl-offwhite);
}
.fl-header.static-header {
    border-bottom: 0;
}
/* Wide brand box for the FL wordmark logo (overrides the 64x64 Gaia
   beacon box) */
.fl-header.static-header .navbar .navbar-brand.fl-navbar-brand {
    width: auto;
    height: auto;
    padding: 0.5rem 0;
}
.fl-logo {
    height: 32px;
    width: auto;
    display: block;
}
.offcanvas .fl-logo { height: 28px; }

/* Wayfinding nav links never underline — in every state the pill
   background is the only hover/focus affordance (stated design rule).
   Declared explicitly so no inherited or third-party link styling can
   reintroduce an underline. */
.fl-header .navbar .nav-link.gnav-link.fl-gnav-link,
.fl-header .navbar .nav-link.gnav-link.fl-gnav-link:hover,
.fl-header .navbar .nav-link.gnav-link.fl-gnav-link:focus,
.fl-header .navbar .nav-link.gnav-link.fl-gnav-link:focus-visible,
.fl-header .navbar .nav-link.gnav-link.fl-gnav-link:active,
.offcanvas .nav-link.fl-gnav-link,
.offcanvas .nav-link.fl-gnav-link:hover,
.offcanvas .nav-link.fl-gnav-link:focus,
.offcanvas .nav-link.fl-gnav-link:focus-visible,
.offcanvas .nav-link.fl-gnav-link:active {
    text-decoration: none;
}

/* Magenta nav pills (Gaia .gnav-link spacing, FL colour) */
.fl-header .navbar .nav-link.gnav-link.fl-gnav-link {
    color: var(--fl-magenta);
    font-weight: 500;
}
.fl-header .navbar .nav-link.gnav-link.fl-gnav-link:hover,
.fl-header .navbar .nav-link.gnav-link.fl-gnav-link:focus-visible,
.fl-header .navbar .nav-item.dropdown.show > .nav-link.gnav-link.fl-gnav-link {
    background-color: rgba(139, 16, 78, 0.08);
    color: var(--fl-magenta);
}
.fl-header .gnav-chevron {
    border-color: var(--fl-magenta);
}
/* Mobile offcanvas links */
.offcanvas .nav-link.fl-gnav-link {
    color: var(--fl-magenta);
    font-weight: 500;
}

/* Packages dropdown */
.fl-header .fl-dropdown,
.offcanvas .fl-dropdown {
    border: 1px solid var(--fl-border);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 18px 40px -20px rgba(77, 28, 52, 0.28);
}
.fl-header .fl-dropdown .dropdown-item,
.offcanvas .fl-dropdown .dropdown-item {
    border-radius: 8px;
    color: var(--fl-plum);
    padding: 10px 12px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 16px;
    white-space: normal;
}
.fl-header .fl-dropdown .dropdown-item:hover,
.fl-header .fl-dropdown .dropdown-item:focus,
.offcanvas .fl-dropdown .dropdown-item:hover,
.offcanvas .fl-dropdown .dropdown-item:focus {
    background: var(--fl-offwhite);
    color: var(--fl-magenta);
}
/* Compact nav "Call us now" button */
.fl-btn--nav {
    padding: 10px 18px;
    font-size: 16px;
    line-height: 22px;
}
.fl-header .navbar .nav-link.btn.fl-btn--fill,
.fl-header .navbar .nav-link.btn.fl-btn--nav,
.fl-header .navbar .nav-link.btn.fl-btn--fill:hover,
.fl-header .navbar .nav-link.btn.fl-btn--fill:focus-visible,
.offcanvas .nav-link.btn.fl-btn--fill {
    color: #fff;
}

/* Mega-menu — reuses the Gaia Wise-style panel mechanism (.mega-panel/
   .mega-viewport/.mega-content driven by initMegaMenu in main.js) but
   re-themed to the Funerals Live magenta/plum palette. ------------- */
/* Open-trigger pill: FL magenta tint instead of Gaia green (the header
   flips white while a panel is open, so the pill reads on white). */
.fl-header:has(.mega-panel.is-open) .nav-mega.is-mega-open > .nav-link.gnav-link,
.fl-header .navbar .nav-mega.is-mega-open > .nav-link.gnav-link.fl-gnav-link {
    background-color: rgba(139, 16, 78, 0.08);
    color: var(--fl-magenta);
}
/* Panel + overlay: plum-tinted shadow */
.fl-site .mega-panel {
    box-shadow: 0 24px 24px -16px rgba(77, 28, 52, 0.16);
}
/* Featured card */
.fl-site .mega-card:hover {
    border-color: var(--fl-magenta);
    box-shadow: 0 8px 24px rgba(77, 28, 52, 0.16);
}
.fl-site .mega-card__title {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
}
.fl-site .mega-card__desc { color: var(--fl-plum); opacity: 0.75; }
.fl-site .mega-card__cta { color: var(--fl-magenta); }
.fl-site .mega-card__cta:hover { color: var(--fl-magenta-hover); }
/* Columns */
.fl-site .mega-subheader { color: var(--fl-plum); opacity: 0.6; }
.fl-site .mega-col-title { color: var(--fl-magenta); }
.fl-site .mega-col:hover .mega-col-title,
.fl-site .mega-col:focus-visible .mega-col-title { color: var(--fl-magenta-hover); }
.fl-site .mega-link { color: var(--fl-plum); }
.fl-site .mega-link:hover,
.fl-site .mega-link:focus-visible,
.fl-site .mega-pricing-link:hover,
.fl-site .mega-pricing-link:focus-visible {
    background: var(--fl-offwhite);
    color: var(--fl-magenta);
}
.fl-site .mega-sep { background: var(--fl-border); }
/* Pricing grid in the Packages mega-menu (Figma 4563:121766): four
   .mega-col cards two-up, in a section twice the width of a normal link
   column. .mega-col already provides the card, hover highlight, arrow and
   the "Starts at <strong>$X</strong>" line, so this only lays them out. */
/* The panel content sits on the same 80px gutters / 1280px column as the
   page (Figma megamenu Container x=80 w=1280). .mega-inner is a Bootstrap
   .container, which caps at 1320px on its own grid. */
.fl-site .mega-inner {
    max-width: 1440px;
    padding-left: 80px;
    padding-right: 80px;
}
.fl-site .mega-links .mega-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}
.fl-site .mega-section--wide { grid-column: span 2; }
.fl-site .fl-mega-pricing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    row-gap: 8px;
    padding-top: 8px;
}
.fl-site .mega-col:hover,
.fl-site .mega-col:focus-visible { background-color: var(--fl-offwhite); }
/* Show the whole artwork instead of cropping into it. The shared card uses
   background-size: cover, which enlarges and clips these assets (the tablet
   mock lost its top and bottom); contain keeps each image whole inside the
   400x240 well the design specifies. */
.fl-site .mega-card__img {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* "Powered by Gaia" tab — home page only (Figma 4574:122640). A fixed tab
   flush to the right edge, so only the left corners are rounded. The Gaia
   footer logo is reused: it carries the same #1D4641 ground and
   secondary/tertiary marks the badge specifies, at the same 1.9 aspect. */
.fl-powered-by {
    position: fixed;
    right: 0;
    top: 50%;
    /* Centred, then nudged 120px down the viewport. */
    transform: translateY(calc(-50% + 120px));
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--fl-green);
    padding: 8px 12px 8px 24px;
    border-radius: 40px 0 0 40px;
    text-decoration: none;
}
.fl-powered-by__label {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.018em;
    color: #D4E9CA;   /* Gaia/Secondary — the badge label colour in the design */
    margin: 0;
}
.fl-powered-by__logo {
    width: 76px;
    height: 40px;
    display: block;
}


/* Hero ------------------------------------------------------ */
.fl-hero__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* What is FLS ----------------------------------------------- */
.fl-round-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 48px;
    object-fit: cover;
}

/* Why choose us --------------------------------------------- */
.fl-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.fl-tile__img {
    width: 224px;
    height: 240px;
    object-fit: contain;
}
.fl-tile .fl-lede {
    text-align: center;
}

/* Testimonials ---------------------------------------------- */
.fl-testimonials {
    background: var(--fl-green);
    padding: 88px 0;
    text-align: center;
    color: #fff;
}
.fl-testimonials .fl-h2 {
    color: #fff;
    margin-bottom: 48px;
}
.fl-quote {
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.018em;
    color: #fff;
    margin: 0 0 24px;
}
.fl-quote-by {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin: 0;
}

/* Packages -------------------------------------------------- */
.fl-pkg {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
}
.fl-pkg__img {
    width: 100%;
    aspect-ratio: 408 / 360;
    object-fit: cover;
    border-radius: 32px;
    display: block;
}
.fl-pkg__title {
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0 0 16px;
}
.fl-pkg__text {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0;
}
.fl-pkg__body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1 0 auto;
}
.fl-pkg__cta {
    margin-top: auto;
}

/* FAQs (Figma 2376:25032 desktop / 4487:102507 mobile) ------- */
/* Hero: Figma is asymmetric — pt-80 (padding-hg), pb-0 — the 80px gap to
   the heading below comes from .fl-faq's own top padding instead (Figma's
   FAQs section itself is pt-80). .fl-section--tight alone (56px both
   sides) is shared with other pages, so this is a scoped addition, not a
   change to that class. */
.fl-faq-hero { padding: 80px 0 0; }
@media (max-width: 991.98px) {
    .fl-faq-hero { padding: 16px 0 0; }
}
/* Same reasoning for the FAQs section's own top padding: .fl-section
   alone (80px desktop / 56px mobile) is shared everywhere, so this scoped
   .fl-section.fl-faq override (needs the compound selector to out-rank
   .fl-section on specificity, since it's edited after .fl-section's own
   responsive rule later in this file) replaces it with Figma's 80/16. */
.fl-section.fl-faq { padding-top: 80px; }
@media (max-width: 991.98px) {
    .fl-section.fl-faq { padding-top: 16px; }
}
/* Fixed-width intro column + flexible accordion column, matching Figma's
   real layout — Bootstrap's col-lg-5/7 fractional grid only approximated
   this before (a proportional split, not Figma's fixed 416px sidebar). */
.fl-faq-layout {
    display: flex;
    align-items: flex-start;
    gap: 64px;
}
.fl-faq-layout__intro { width: 416px; flex-shrink: 0; }
.fl-faq-layout__accordion { flex: 1 1 0%; min-width: 0; }
.fl-faq-layout__lede { margin-top: 24px; }
@media (max-width: 991.98px) {
    .fl-faq-layout { flex-direction: column; gap: 32px; }
    .fl-faq-layout__intro { width: 100%; }
}

.fl-faq .accordion {
    --bs-accordion-border-color: var(--fl-border);
}
.fl-faq .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--fl-border);
}
.fl-faq .accordion-button {
    background: transparent;
    box-shadow: none;
    padding: 24px 8px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.018em;
    color: var(--fl-magenta);
}
.fl-faq .accordion-button:not(.collapsed) {
    color: var(--fl-magenta);
    box-shadow: none;
}
.fl-faq .accordion-button::after,
.fl-faq .accordion-button:not(.collapsed)::after {
    width: 24px;
    height: 24px;
    background-size: 24px;
}
@media (max-width: 767.98px) {
    /* Figma mobile: text16-bold (16/22) + py-16, vs desktop's text18...
       display20-bold (20/28) + py-24. */
    .fl-faq .accordion-button { padding: 16px 8px; font-size: 16px; line-height: 22px; }
}
/* Full-bleed page hero photo (FAQs / About) — 1280x560, radius 48 */
.fl-hero-photo {
    aspect-ratio: 1280 / 560;
    object-fit: cover;
}
@media (max-width: 991.98px) {
    /* Figma mobile crops shorter (fixed 160px tall in a ~327px column,
       ≈2.04:1) than the desktop ratio (≈2.29:1) reused before, and uses
       radius-xl (24px) instead of .fl-round-img's shared 32px. Combined
       selector so it out-ranks .fl-round-img's own mobile rule below,
       which stays untouched for pages that don't use .fl-hero-photo. */
    .fl-round-img.fl-hero-photo { aspect-ratio: 327 / 160; border-radius: 24px; }
}
.fl-faq .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238B104E' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a.75.75 0 0 1 .75.75v5.5h5.5a.75.75 0 0 1 0 1.5h-5.5v5.5a.75.75 0 0 1-1.5 0v-5.5h-5.5a.75.75 0 0 1 0-1.5h5.5v-5.5A.75.75 0 0 1 8 1'/%3E%3C/svg%3E");
}
.fl-faq .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238B104E' viewBox='0 0 16 16'%3E%3Cpath d='M1.75 7.25h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5'/%3E%3C/svg%3E");
    transform: none;
}
.fl-faq .accordion-body {
    padding: 0 0 24px;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--fl-plum);
}
.fl-faq a { color: var(--fl-magenta); }

/* Contact (Figma 4489:106475 desktop / 4489:107436 mobile) --
   Grid, not flex: Figma's stepper sits BELOW the form on mobile but
   ABOVE it in the desktop column stack, and grid-template-areas can
   reorder without duplicating the stepper markup. */
.fl-contact-hero__grid {
    display: grid;
    grid-template-columns: 593px 1fr;
    grid-template-areas: "intro form" "stepper form";
    gap: 40px 64px;
    align-items: start;
}
.fl-contact-hero__intro { grid-area: intro; display: flex; flex-direction: column; gap: 24px; }
.fl-contact-hero__intro .fl-lede { margin: 0; }
@media (max-width: 991.98px) {
    .fl-contact-hero__grid {
        grid-template-columns: 1fr;
        grid-template-areas: "intro" "form" "stepper";
        gap: 32px;
    }
}

.fl-contact-stepper { grid-area: stepper; display: flex; flex-direction: column; gap: 24px; }
.fl-contact-stepper__item { display: flex; gap: 24px; align-items: flex-start; }
.fl-contact-stepper__icon {
    flex-shrink: 0;
    width: 32px;
    font-size: 32px;
    line-height: 1;
    color: var(--fl-plum);
}
.fl-contact-stepper__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fl-contact-stepper__title {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0;
}
.fl-contact-stepper__desc {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0;
}
.fl-contact-stepper__desc a { color: var(--fl-magenta); font-weight: 500; text-decoration: underline; }
.fl-contact-stepper__sep { border: 0; border-top: 0.5px solid var(--fl-border); margin: 0; }

.fl-contact-form-card {
    grid-area: form;
    background: #fff;
    border-radius: 24px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
/* Grid, not flex-wrap: the card is narrower than 2×260px-basis + gap, so a
   flex-wrap approach wrapped Email/Mobile onto separate rows even on
   desktop — a real bug caught via screenshot vs. Figma, not a hypothetical.
   An even 2-column grid always fits, matching Figma at every width down to
   where .fl-contact-hero__grid itself stacks (991.98px), below which
   Email/Mobile stack too, per the mobile Figma. */
.fl-contact-form__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.fl-field--full { grid-column: 1 / -1; }
.fl-field--half { grid-column: span 1; }
@media (max-width: 991.98px) {
    .fl-contact-form__fields { grid-template-columns: 1fr; }
}
/* Floating-label fields (Figma 4489:107209): a 56px control with the label
   resting inside it, floating to the top on focus/fill. Matches Gaia's own
   M3 contact form pattern and the FL Figma's field styling (12px radius,
   ink border, muted placeholder). */
.fl-field { position: relative; }
.fl-field__required { color: var(--fl-error); }
.fl-field input,
.fl-field select,
.fl-field textarea {
    width: 100%;
    border: 1px solid var(--fl-ink);
    border-radius: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: var(--fl-ink);
    background: #fff;
}
.fl-field input,
.fl-field select {
    height: 56px;
    padding: 22px 16px 6px;
}
.fl-field textarea {
    min-height: 104px;
    padding: 22px 16px 12px;
    resize: vertical;
}
.fl-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23180026' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}
.fl-field label {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.018em;
    color: var(--fl-muted);
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, line-height .15s ease, transform .15s ease;
}
/* Textarea label rests at the top of the box, not vertically centred. */
.fl-field--area label {
    top: 16px;
    transform: none;
}
.fl-field input:focus ~ label,
.fl-field input:not(:placeholder-shown) ~ label,
.fl-field textarea:focus ~ label,
.fl-field textarea:not(:placeholder-shown) ~ label,
.fl-field select:focus ~ label,
.fl-field select:valid ~ label {
    top: 9px;
    transform: none;
    font-size: 12px;
    line-height: 16px;
}
.fl-field input:focus,
.fl-field select:focus,
.fl-field textarea:focus {
    outline: none;
    border-color: var(--fl-magenta);
}
/* Enhanced select (Gaia's .gselect listbox, main.js enhanceM3Selects).
   The native control is hidden and a button trigger takes its place, so the
   trigger has to carry the same 56px floating-label box as the other fields.
   The listbox itself is left in the shared Gaia styling — that is the
   pattern being adopted. */
.fl-field.m3-field { margin-bottom: 0; }
.fl-site .fl-field .gselect-trigger {
    width: 100%;
    height: 56px;
    padding: 22px 40px 6px 16px;
    border: 1px solid var(--fl-ink);
    border-radius: 12px;
    background: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: var(--fl-ink);
    text-align: left;
}
/* Keep the 1px border on focus — the shared rule thickens it to 2px, which
   would nudge the label and text by a pixel as the menu opens. */
.fl-site .fl-field .gselect-trigger:focus,
.fl-site .fl-field .gselect-trigger:focus-visible {
    outline: none;
    border: 1px solid var(--fl-magenta);
}
.fl-site .fl-field .gselect-trigger-icon { background-color: var(--fl-ink); }
/* Float the label once a value is chosen (enhanceM3Selects sets
   .gselect-filled on the field) or while the listbox is open. */
.fl-site .fl-field.gselect-filled label,
.fl-site .fl-field .gselect-trigger[aria-expanded="true"] ~ label {
    top: 9px;
    transform: none;
    font-size: 12px;
    line-height: 16px;
}
.fl-contact-form__anchor { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.fl-contact-form__submit {
    width: 100%;
    background: var(--fl-magenta);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.fl-contact-form__submit:hover,
.fl-contact-form__submit:focus-visible { background: var(--fl-magenta-hover); }
.fl-contact-form__submit:disabled { opacity: 0.6; cursor: default; }
.fl-contact-form__privacy {
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--fl-ink);
    margin: 0;
}
/* #48705B is a literal hex on this text layer in Figma, not a named
   token — matched exactly rather than substituted for a nearby token. */
.fl-contact-form__privacy a { color: #48705B; text-decoration: underline; }
.fl-contact-form__error {
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--fl-error);
    margin: 0;
}
.fl-contact-form__error a { color: inherit; text-decoration: underline; }

/* Split offering ------------------------------------------- */
.fl-split-card {
    border: 1px solid var(--fl-border);
    border-radius: 48px;
    padding: 40px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.fl-split-card--mint { background: var(--fl-mint); }
.fl-split-card--white { background: #fff; }
.fl-split-card__illus {
    width: 280px;
    max-width: 100%;
    height: auto;
    display: block;
}
.fl-split-card__title {
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0;
}
.fl-split-card__desc {
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.018em;
    color: var(--fl-ink);
    margin: 0;
}
.fl-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.fl-check-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: var(--fl-ink);
}
.fl-check-list li::before {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B104E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.fl-split-card__cta { margin-top: auto; padding-top: 8px; }

/* Package detail pages -------------------------------------- */
.fl-eyebrow {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0 0 8px;
}
.fl-package__desc {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0;
}
.fl-package__desc strong { font-weight: 600; }
.fl-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Relative + absolutely-positioned check (NOT flexbox): a direct inline
   child of a flex container — e.g. the <strong>Slideshow Tribute Video:</strong>
   lead-in — gets blockified into its own flex item, which split that label
   into a narrow column beside the rest of the sentence. Positioning the tick
   in the left padding instead lets the text (bold lead-in + body) flow as one
   normal run. 36px = 24px icon + 12px gap. */
.fl-feature-list li {
    position: relative;
    padding-left: 36px;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
}
.fl-feature-list li strong { font-weight: 600; }
.fl-feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    /* Plum check circle (#463351) per Figma 2376:24483 — the packages
       design uses plum ticks, not the magenta primary. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23463351'/%3E%3Cpath d='M7 12.5 10.5 16 17 8.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Checkout modal */
.fl-modal .modal-content {
    border: 0;
    border-radius: 24px;
    padding: 8px;
}
.fl-modal .modal-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.018em;
    color: var(--fl-green);
}
.fl-modal .modal-body p { color: var(--fl-plum); }

/* About page ------------------------------------------------ */
.fl-subheading {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.018em;
    color: var(--fl-green);
    margin: 0;
}
.fl-values {
    background: var(--fl-mint);
    border-radius: 48px;
    padding: 56px 40px;
}
.fl-value-icon { width: 88px; height: 88px; }
.fl-value__title {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.018em;
    color: var(--fl-green);
    margin: 16px 0 8px;
}
.fl-value__text {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--fl-ink);
    margin: 0;
}
.fl-team-img {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 280 / 336;
    object-fit: cover;
    border-radius: 24px;
}
.fl-team__name {
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0 0 4px;
}
.fl-team__role {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: var(--fl-plum);
    margin: 0 0 8px;
}

@media (max-width: 991.98px) {
    .fl-values { border-radius: 32px; padding: 40px 24px; }
}

/* Memorial listing (Past funerals) -------------------------- */
.fl-memorial {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--fl-border);
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fl-memorial:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -24px rgba(77, 28, 52, 0.30);
}
.fl-memorial__cover {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    display: block;
}
.fl-memorial__cover--empty {
    aspect-ratio: 4 / 3;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fl-mint);
    color: var(--fl-green);
}
.fl-memorial__cover--empty i { font-size: 44px; opacity: 0.7; }
.fl-memorial__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
    flex: 1 0 auto;
}
.fl-memorial__kicker {
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fl-magenta);
    margin: 0;
}
.fl-memorial__name {
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 2px 0 0;
}
.fl-memorial__dates {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: var(--fl-plum);
    margin: 0;
}
.fl-memorial__cta { margin-top: 16px; }

/* Past-funerals directory: compact rows + search ------------
   Scales to hundreds of services without a wall of large photos.
   Most entries have no portrait, so a small thumbnail + soft
   placeholder keeps every row calm and equal-weight. */
.fl-search-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.fl-search {
    width: 100%;
    max-width: 440px;
    padding: 14px 20px;
    border: 1.5px solid var(--fl-border);
    border-radius: 100px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: var(--fl-plum);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fl-search::placeholder { color: var(--fl-plum); opacity: 0.5; }
.fl-search:focus {
    outline: none;
    border-color: var(--fl-magenta);
    box-shadow: 0 0 0 3px rgba(139, 16, 78, 0.12);
}
.fl-search-count {
    text-align: center;
    font-size: 14px;
    color: var(--fl-plum);
    opacity: 0.7;
    margin: 0 0 28px;
}
.fl-mrow {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    background: #fff;
    border: 1px solid var(--fl-border);
    border-radius: 20px;
    padding: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fl-mrow:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -22px rgba(77, 28, 52, 0.28);
}
.fl-mrow__thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 16px;
    object-fit: cover;
    display: block;
}
.fl-mrow__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fl-mint);
    color: var(--fl-green);
}
.fl-mrow__thumb--empty i { font-size: 30px; opacity: 0.75; }
.fl-mrow__body { flex: 1 1 auto; min-width: 0; }
.fl-mrow__kicker {
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fl-magenta);
    margin: 0 0 2px;
}
.fl-mrow__name {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0;
}
.fl-mrow__dates {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--fl-plum);
    opacity: 0.8;
    margin: 2px 0 0;
}
.fl-mrow__cta { flex: 0 0 auto; }
@media (max-width: 439.98px) {
    .fl-mrow { flex-wrap: wrap; }
    .fl-mrow__cta { flex-basis: 100%; }
    .fl-mrow__cta .fl-btn { width: 100%; }
}

/* Service badges + watch page ------------------------------- */
.fl-memorial__badges { display: flex; gap: 8px; align-items: center; }
.fl-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 100px;
}
.fl-badge--upcoming { background: var(--fl-mint); color: var(--fl-green); }
.fl-badge--live { background: var(--fl-magenta); color: #fff; }
.fl-badge--live .fl-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
    animation: fl-pulse 1.4s ease-in-out infinite;
}
@keyframes fl-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.fl-video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
}
.fl-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.fl-watch-note {
    background: var(--fl-mint);
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
}
/* Memorial detail page: portrait + service context + per-recording label */
.fl-watch-portrait {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 24px;
    margin: 0 auto 20px;
    box-shadow: 0 18px 40px -22px rgba(77, 28, 52, 0.35);
}
.fl-watch-service {
    font-size: 16px;
    line-height: 24px;
    color: var(--fl-plum);
    opacity: 0.85;
    margin: 8px 0 0;
}
.fl-video-label {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0;
    text-align: center;
}
/* Online-memorial cross-sell (links to the free Gaia memorial) */
.fl-h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0;
}
.fl-memorial-cta {
    background: var(--fl-mint);
    border-radius: 24px;
    padding: 40px 32px;
    text-align: center;
}
.fl-mrow__memorial {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fl-magenta);
    text-decoration: none;
}
.fl-mrow__memorial:hover,
.fl-mrow__memorial:focus-visible {
    color: var(--fl-magenta-hover);
    text-decoration: underline;
}

/* Live tribute rail (watch page × online memorial) ---------- */
.fl-trib-live {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--fl-mint);
    color: var(--fl-green);
    border-radius: 16px;
    padding: 14px 20px;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 24px;
}
.fl-trib-live .fl-dot {
    flex: 0 0 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--fl-magenta);
    animation: fl-pulse 1.4s ease-in-out infinite;
}
.fl-trib-form-card {
    background: #fff;
    border: 1px solid var(--fl-border);
    border-radius: 24px;
    padding: 28px 24px;
}
.fl-trib-sub {
    font-size: 15px;
    line-height: 22px;
    color: var(--fl-plum);
    margin: 0 0 8px;
}
.fl-trib-sub a { color: var(--fl-magenta); }
.fl-trib-input {
    width: 100%;
    border: 1.5px solid var(--fl-border);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    color: var(--fl-ink);
    background: #fff;
    margin-bottom: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fl-trib-input:focus {
    outline: none;
    border-color: var(--fl-magenta);
    box-shadow: 0 0 0 3px rgba(139, 16, 78, 0.12);
}
.fl-trib-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.fl-trib-candle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--fl-border);
    border-radius: 100px;
    padding: 10px 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--fl-plum);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.fl-trib-candle:hover,
.fl-trib-candle:focus-visible { border-color: var(--fl-magenta); color: var(--fl-magenta); }
.fl-trib-candle.is-on {
    background: var(--fl-magenta);
    border-color: var(--fl-magenta);
    color: #fff;
}
.fl-trib-status {
    font-size: 14px;
    line-height: 20px;
    color: var(--fl-green);
    background: var(--fl-mint);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 12px 0 0;
}
.fl-trib-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fl-plum);
    background: var(--fl-offwhite);
    border: 1px solid var(--fl-border);
    border-radius: 100px;
    padding: 2px 8px;
    margin-right: 6px;
}
.fl-trib-flower-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.fl-trib-flower-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #FBF3F1;
    border: 1.5px solid var(--fl-border);
    border-radius: 16px;
    padding: 12px 8px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--fl-plum);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.fl-trib-flower-btn:hover,
.fl-trib-flower-btn:focus-visible { border-color: var(--fl-magenta); transform: translateY(-2px); }
.fl-trib-flower-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.fl-trib-flower-btn img { width: 40px; height: 40px; }
.fl-trib-flower-btn b { font-size: 14px; color: var(--fl-magenta); }
.fl-trib-gifts { margin-top: 16px; }
.fl-trib-gift-row { display: flex; gap: 8px; }
.fl-trib-gift-btn {
    flex: 1 1 0;
    background: #fff;
    border: 1.5px solid var(--fl-magenta);
    border-radius: 12px;
    padding: 10px 8px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--fl-magenta);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.fl-trib-gift-btn:hover,
.fl-trib-gift-btn:focus-visible { background: var(--fl-magenta); color: #fff; }
.fl-trib-gift-btn:disabled { opacity: 0.6; cursor: wait; }
.fl-trib-fine {
    font-size: 12px;
    line-height: 17px;
    color: var(--fl-plum);
    opacity: 0.75;
    margin: 8px 0 0;
}
.fl-trib-fine a { color: var(--fl-magenta); }
.fl-trib-wall-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}
.fl-trib-count { font-size: 14px; color: var(--fl-plum); opacity: 0.75; }
.fl-trib-wall {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 640px;
    overflow-y: auto;
    padding-right: 4px;
}
.fl-trib {
    background: #fff;
    border: 1px solid var(--fl-border);
    border-radius: 16px;
    padding: 16px 18px;
}
.fl-trib__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 15px;
    color: var(--fl-ink);
    margin-bottom: 4px;
}
.fl-trib__head .bi-fire { color: var(--fl-magenta); }
.fl-trib__head .bi-gift { color: var(--fl-green); }
.fl-trib__head time { font-size: 12px; color: var(--fl-plum); opacity: 0.7; margin-left: auto; }
.fl-trib p { font-size: 14px; line-height: 22px; color: var(--fl-plum); margin: 0; }
.fl-trib__note { opacity: 0.75; font-style: italic; }
.fl-trib--flowers { display: flex; gap: 14px; background: #FBF3F1; }
.fl-trib__flower { flex: 0 0 48px; width: 48px; height: 48px; }
.fl-trib__body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 991.98px) {
    .fl-trib-wall { max-height: 480px; }
}

/* Responsive ------------------------------------------------ */
@media (max-width: 991.98px) {
    .fl-container { padding: 0 24px; }
    .fl-section { padding: 56px 0; }
    .fl-h1 { font-size: 40px; line-height: 48px; }
    /* Figma mobile uses display32-bold (weight 700) vs desktop's
       display48-bold token, whose actual style is SemiBold (600) —
       confirmed across About's three H2s (hero, values band, team) and
       FAQs' own mobile heading token. */
    .fl-h2 { font-size: 32px; line-height: 40px; font-weight: 700; }
    .fl-quote { font-size: 22px; line-height: 30px; }
    .fl-testimonials { padding: 56px 0; }
    .fl-split-card { border-radius: 32px; padding: 32px 24px; }
    .fl-round-img { border-radius: 32px; }
}
@media (max-width: 575.98px) {
    .fl-h1 { font-size: 34px; line-height: 42px; }
}

/* Footer + newsletter — cloned from the Gaia app footer, recoloured to the
   Funerals Live palette (Figma SryxvxM6MwQ41yeVoH7xYz, node 2656:59850 +
   2656:59636). Overrides the shared styles.css versions (fl-site.css
   loads after).

   The "card overlapping the footer" look is Figma's own construction, not
   a cross-element trick: the newsletter card is a NORMAL-FLOW first child
   of the footer (partials/footer.html), sitting on top of an off-white
   rectangle (.fl-footer2__cream) that's absolutely positioned behind just
   the footer's top 144px, full-bleed. Because the card (64px padding top
   and bottom) is taller than that 144px band, its own bottom edge lands on
   bare magenta below the band — self-adjusting regardless of the card's
   rendered height, no negative margins anywhere. (An earlier version kept
   the card in a separate #subscribeNewsLetter element before #footer and
   tried to bridge the gap with gaiaapp.net's .demo-box negative-margin
   numbers — but that trick belongs to a shorter, unrelated "partner with
   us" card and never produced a real overlap for this taller one.) */
.fl-site .fl-newsletter-card {
    background: #fff;
    border: 2px solid var(--fl-tertiary);
    border-radius: 32px;
    padding: 64px 80px;
    box-shadow: 0 24px 48px -16px rgba(24, 0, 38, 0.22);
}
.fl-site .fl-newsletter-form {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.fl-site .fl-newsletter-title {
    flex: 1 1 240px;
    min-width: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.018em;
    color: var(--fl-ink);
    margin: 0;
}
.fl-site .fl-newsletter-group {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 0 1 400px;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--fl-border);
    border-radius: 8px;
    padding: 4px;
}
.fl-site .fl-newsletter-input {
    flex: 1 1 0%;
    min-width: 0;
    border: none;
    outline: none;
    padding-left: 12px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: var(--fl-ink);
}
.fl-site .fl-newsletter-input::placeholder { color: var(--fl-ink); opacity: 0.5; }
.fl-site .fl-newsletter-btn {
    /* explicit width/height override the shared, unscoped .fl-newsletter-btn
       circular-icon-button rule in styles.css (44x44, border-radius:50%) —
       this variant is a text button sized by its padding instead. */
    width: auto;
    height: auto;
    flex-shrink: 0;
    background: var(--fl-magenta);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.018em;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
.fl-site .fl-newsletter-btn:hover,
.fl-site .fl-newsletter-btn:focus-visible { background: var(--fl-magenta-hover); }
.fl-site .fl-newsletter-btn:disabled { opacity: 0.6; cursor: default; }
.fl-site .fl-newsletter-msg {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin: 16px 0 0;
}
.fl-site .fl-newsletter-msg--error { color: var(--fl-magenta); }
.fl-site .fl-newsletter-msg:not(.fl-newsletter-msg--error) { color: var(--fl-green); }
.fl-site .fl-newsletter-msg a { color: inherit; text-decoration: underline; }

.fl-site .fl-footer2 {
    position: relative;
    background: var(--fl-tertiary);
    overflow: clip;
    /* Reset the shared, unscoped `footer { padding: 80px 0; margin-top:
       100px; }` in styles.css (~line 3940, the old Gaia footer's own
       rule) — it targets the bare <footer> element, so it still applies
       here once nothing on .fl-footer2 itself competes for these
       properties (padding now lives on .fl-footer2__stack instead). */
    margin: 0;
    padding: 0;
}
/* Figma "Foreground": h-144px, full-bleed, pinned to the footer's true top
   edge (ignoring the stack's own padding below) — see the block comment
   above .fl-newsletter-card for why this produces the overlap. */
.fl-site .fl-footer2__cream {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 144px;
    background: var(--fl-offwhite);
}
.fl-site .fl-footer2__stack {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    /* padding-top/bottom only — the shorthand `padding` would clobber
       .fl-container's own `padding: 0 80px` (Figma padding-hg), since both
       classes land on the same element and this selector wins on
       specificity. Sides stay .fl-container's, same source of truth as
       every other section on the site. */
    padding-top: 48px;
    padding-bottom: 48px;
}
.fl-site .fl-footer2__content {
    display: flex;
    gap: 24px;
    padding: 40px 0 80px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.fl-site .fl-footer2__bio {
    flex: 1 0 0;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.fl-site .fl-footer2__company {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.fl-site .fl-footer2__lockup {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
/* Master lockup SVG (780x122 viewBox, ~6.39:1) — see the HTML comment above
   this element for why it's a recoloured copy rather than a filtered one. */
.fl-site .fl-footer2__logo { height: 40px; width: auto; display: block; }
.fl-site .fl-footer2__tagline {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.018em;
    color: #fff;
    margin: 0;
    max-width: 420px;
}
.fl-site .fl-footer2__tandem {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.fl-site .fl-footer2__info { display: flex; flex-direction: column; gap: 12px; width: 200px; }
.fl-site .fl-footer2__info-title {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: #fff;
    margin: 0;
}
.fl-site .fl-footer2__info-list { display: flex; flex-direction: column; gap: 8px; }
.fl-site .fl-footer2__info-line {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.018em;
    color: #fff;
    opacity: 0.7;
    margin: 0;
}
.fl-site .fl-footer2__info-line--accent { opacity: 1; color: #fff; }
.fl-site .fl-footer2__info-line--accent a { color: inherit; text-decoration: none; }
.fl-site .fl-footer2__info-line--accent a:hover { color: var(--fl-secondary); text-decoration: underline; }
.fl-site .fl-footer2__copy {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.018em;
    color: #fff;
    opacity: 0.7;
    margin: 0;
}
.fl-site .fl-footer2__sep { align-self: stretch; width: 1px; background: rgba(255, 255, 255, 0.2); margin: 0 8px; }
.fl-site .fl-footer2__col { width: 192px; flex-shrink: 0; }
.fl-site .fl-footer2__col-title {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: #fff;
    margin: 0 0 24px;
}
.fl-site .fl-footer2__list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.fl-site .fl-footer2__list li a {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.018em;
    color: #fff;
    text-decoration: none;
}
.fl-site .fl-footer2__list li a:hover { color: var(--fl-secondary); }
.fl-site .fl-footer2__list-status { display: flex; align-items: center; gap: 12px; }
.fl-site .fl-footer2__badge {
    background: #ff6;
    color: #805F01;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 20px;
    border-radius: 999px;
    padding: 3px 8px;
}
.fl-site .fl-footer2__base {
    display: flex;
    gap: 48px;
    align-items: center;
    padding-top: 48px;
    flex-wrap: wrap;
}
.fl-site .fl-footer2__disclaimer {
    flex: 1 0 0;
    min-width: 260px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.018em;
    color: #fff;
    opacity: 0.7;
    margin: 0;
}
.fl-site .fl-footer2__social { display: flex; gap: 24px; align-items: center; flex-shrink: 0; }
/* White rounded-square badges (Figma "Apps" component), not the shared
   magenta-circle .fl-social-icon used elsewhere on the site. */
.fl-site .fl-social-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    color: var(--fl-magenta);
    font-size: 15px;
    flex-shrink: 0;
}
.fl-site .fl-social-icon:hover { background: var(--fl-secondary); color: var(--fl-magenta); }

@media (max-width: 992px) {
    .fl-site .fl-newsletter-card { padding: 40px 32px; }
    .fl-site .fl-newsletter-form { gap: 24px; }
    .fl-site .fl-newsletter-title { font-size: 24px; line-height: 32px; }
    .fl-site .fl-footer2__content { flex-wrap: wrap; }
    .fl-site .fl-footer2__sep { display: none; }
    .fl-site .fl-footer2__col { width: 45%; }
}
@media (max-width: 640px) {
    .fl-site .fl-newsletter-form { flex-direction: column; align-items: stretch; }
    /* Both children's flex-basis (240px / 400px) would otherwise become
       their HEIGHT once the form switches to column direction. */
    .fl-site .fl-newsletter-title { flex: none; }
    .fl-site .fl-newsletter-group { flex: none; width: 100%; }
    .fl-site .fl-footer2__col { width: 100%; }
    .fl-site .fl-footer2__base { flex-direction: column; align-items: flex-start; }
}

/* About page (Figma 2376:25161 desktop / 4487:99580 mobile) --------- */
/* Hero→"About us" gap (Figma: 40px desktop / 32px mobile). The hero and
   "About us" are two separate stacked sections (.fl-section--tight +
   .fl-section), each with their own top+bottom padding, so left alone
   they'd stack to 136px/112px. Zeroing the hero's bottom padding here and
   giving "About us" an exact top padding below replaces that combined gap
   with Figma's real number — .fl-section--tight/.fl-section themselves
   are shared with other pages, so both overrides are scoped classes. */
.fl-about-hero { padding-bottom: 0; }
.fl-section.fl-about-us { padding-top: 40px; }
@media (max-width: 991.98px) {
    .fl-section.fl-about-us { padding-top: 32px; }
}
/* "About us" heading→body gap (Figma gap-lg=24 desktop / gap-md=16
   mobile) — replaces the mb-5 (48px) utility, removed from the markup for
   the same !important reason noted below on the values band/team headings. */
.fl-about-us__heading { margin-bottom: 24px; }
@media (max-width: 991.98px) {
    .fl-about-us__heading { margin-bottom: 16px; }
}
/* Two-column body copy: Figma's gutter and paragraph spacing are both
   gap-lg (24px) — replaces the row g-4 g-lg-5 (48px gutter at lg+) /
   d-flex flex-column gap-3 (16px paragraph gap) combo, which only
   approximated it. */
.fl-about-us__grid {
    display: flex;
    gap: 24px;
}
.fl-about-us__col {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (max-width: 991.98px) {
    .fl-about-us__grid { flex-direction: column; }
}

/* About v2 — full-width dark green "What we value" band (Figma 2376:25193) */
.fl-values-band {
    background: var(--fl-green);
    padding: 80px 0;
}
@media (max-width: 991.98px) {
    .fl-values-band { padding: 56px 0; }
}
/* Heading→cards gap (Figma gap-2xl=40 desktop / gap-xl=32 mobile) — replaces
   the mb-5 (48px) utility, which can't be beaten on specificity alone since
   Bootstrap's margin utilities carry !important, so it's removed from the
   markup rather than overridden here. */
.fl-values-band .fl-h2 { color: #fff; margin-bottom: 40px; }
@media (max-width: 991.98px) {
    .fl-values-band .fl-h2 { margin-bottom: 32px; }
}
.fl-values-band .fl-value__title {
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.018em;
    color: #fff;
    margin: 24px 0 16px;
}
.fl-values-band .fl-value__text {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: #fff;
    margin: 0;
}

/* Team v2 (Figma 2376:25212): 32px-radius portraits, 28px ink names.
   Name→role and role→LinkedIn gaps both set to a uniform 16px (gap-md),
   overriding the base .fl-team__name/.fl-team__role margins above (4px /
   8px) — same class + later in the cascade wins. Heading→grid gap (Figma
   gap-2xl=40, same both breakpoints) is .fl-team-heading, replacing the
   mb-5 (48px) utility for the same !important reason noted on the values
   band above. */
.fl-team-img { border-radius: 32px; }
.fl-team-heading { margin-bottom: 40px; }
.fl-team__name {
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    color: var(--fl-ink);
    margin: 0 0 16px;
}
.fl-team__role {
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 16px;
}

/* Blog landing + article shell
   (Figma 2376:25070 desktop / 4490:107921 mobile).

   Desktop: 2 columns of 628px tiles, 24px column gap, 48px row gap, in a
   48px-padded section. Mobile: 1 column, 40px row gap, 40px section
   padding. Both breakpoints are measured straight off those two frames.

   .fl-section alone is 80/56px and shared with every other page, so the
   blog's 48/40 lives on this scoped compound selector instead. */
.fl-section.fl-blog-section {
    padding: 48px 0;
}
.fl-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    row-gap: 48px;
}
/* Tile is a flex column so the CTA can bottom-align across a row when two
   neighbouring titles wrap to different line counts — every Figma row is
   uniform, and this keeps it uniform for real-world titles too. */
.fl-blog-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.fl-blog-tile__img {
    width: 100%;
    aspect-ratio: 628 / 360;
    object-fit: cover;
    border-radius: 32px;
    display: block;
}
.fl-blog-tile__title {
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 24px 0 16px;
}
/* Figma clamps the description to exactly 3 lines (72px at 24px
   line-height) and ellipsises the overflow. */
.fl-blog-tile__desc {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0 0 32px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.fl-blog-tile__cta {
    margin-top: auto;
    align-self: flex-start;
}

@media (max-width: 991.98px) {
    .fl-section.fl-blog-section { padding: 40px 0; }
    .fl-blog-grid {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }
    /* Mobile frame: 327x200 image, 24px display type, 24px gap to the CTA,
       and a full-width button. */
    .fl-blog-tile__img { aspect-ratio: 327 / 200; }
    .fl-blog-tile__title { font-size: 24px; line-height: 32px; }
    .fl-blog-tile__desc { margin-bottom: 24px; }
    .fl-blog-tile__cta { align-self: stretch; width: 100%; }
}

/* Blog article pages (Phase 1b — articles migrated natively).
   Long-form reading column; generous line-height for body copy. */
.fl-article {
    max-width: 800px;
    margin: 0 auto;
}
.fl-article__date {
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fl-magenta);
    margin: 0 0 12px;
}
.fl-article__title {
    font-weight: 600;
    font-size: 40px;
    line-height: 52px;
    letter-spacing: -0.018em;
    color: var(--fl-green);
    margin: 0 0 32px;
}
.fl-article__hero {
    width: 100%;
    aspect-ratio: 800 / 440;
    object-fit: cover;
    border-radius: 32px;
    display: block;
    margin: 0 0 40px;
}
.fl-article__body p {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 0 0 20px;
}
.fl-article__body h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.018em;
    color: var(--fl-green);
    margin: 40px 0 16px;
}
.fl-article__body h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
    margin: 32px 0 12px;
}
.fl-article__body ul,
.fl-article__body ol {
    margin: 0 0 20px;
    padding-left: 24px;
}
.fl-article__body li {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.018em;
    color: var(--fl-plum);
}
.fl-article__body li p { margin: 0; }
.fl-article__body strong { font-weight: 600; color: var(--fl-ink); }
.fl-article__body a { color: var(--fl-magenta); }
.fl-article__body a:hover,
.fl-article__body a:focus-visible { color: var(--fl-magenta-hover); }
.fl-article__back { margin-top: 24px; }
@media (max-width: 575.98px) {
    .fl-article__title { font-size: 30px; line-height: 40px; }
    .fl-article__hero { border-radius: 24px; }
}