/**
 * DJ Nick Dean - design system
 * ----------------------------------------------------------------------------
 * Tokens plus the component styling Flatsome's own modules cannot express.
 *
 * Rule of thumb followed here: anything a UX Builder module can already do is
 * left to the module, so the client can keep editing it. What lives in this
 * file is the stuff with no builder control - pseudo-elements, gradients,
 * hover choreography, and overrides where a Flatsome default fights the brand.
 *
 * Loaded from functions.php with a filemtime() cache buster.
 */

/* ===========================================================================
   1. TOKENS
   =========================================================================== */

:root {
  /* Neutrals - the black/white spine. Never pure #000 for a large field; the
     announcement bar is the single exception and sets its own colour. */
  --nd-black: #000000;
  --nd-ink-900: #0B0B0C;
  --nd-ink-800: #141416;
  --nd-ink-700: #1E1E21;
  --nd-ink-600: #2A2A2E;
  --nd-ink-400: #6E6E75;
  --nd-ink-300: #9A9AA1;
  --nd-line-200: #E4E1DA;
  --nd-bone-100: #F4F1EC;
  --nd-white: #FFFFFF;

  /* Gold - the single accent. Champagne, never brassy. */
  --nd-gold-50: #FBF6EA;
  --nd-gold-200: #EAD9AE;
  --nd-gold-400: #D8BC7C;
  --nd-gold-500: #C7A15A;
  --nd-gold-600: #A8823F;
  --nd-gold-700: #7C5F2B;
  --nd-gold-gradient: linear-gradient(90deg, #A8823F 0%, #E3CB90 48%, #A8823F 100%);

  /* Semantic aliases */
  --text-strong: var(--nd-ink-900);
  --text-body: #33333A;
  --text-muted: var(--nd-ink-400);
  --text-on-dark: var(--nd-white);
  --text-on-dark-muted: var(--nd-ink-300);
  --text-accent: var(--nd-gold-600);        /* gold on WHITE steps down to 600 */
  --text-accent-on-dark: var(--nd-gold-500);

  --surface-page: var(--nd-white);
  --surface-band: var(--nd-bone-100);
  --surface-dark: var(--nd-ink-900);
  --surface-card: var(--nd-white);
  --surface-card-dark: var(--nd-ink-700);

  --border-hairline: var(--nd-line-200);
  --border-hairline-dark: var(--nd-ink-600);
  --border-accent: var(--nd-gold-500);

  --action-primary-bg: var(--nd-gold-500);
  --action-primary-fg: var(--nd-ink-900);
  --action-primary-bg-hover: var(--nd-gold-400);
  --action-secondary-fg: var(--nd-white);
  --action-secondary-border: rgba(255, 255, 255, .55);

  --focus-ring: var(--nd-gold-400);

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --fs-display-1: clamp(3rem, 6.2vw, 5.5rem);
  --fs-display-2: clamp(2.5rem, 4.4vw, 4rem);
  --fs-display-3: 2.75rem;
  --fs-h4: 1.5rem;
  --fs-lead: 1.1875rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-nav: 0.8125rem;

  --lh-display: 1.04;
  --lh-heading: 1.15;
  --lh-lead: 1.62;
  --lh-body: 1.72;

  --ls-display: -0.01em;
  --ls-heading: 0.005em;
  --ls-eyebrow: 0.28em;   /* the signature wide tracking */
  --ls-nav: 0.14em;
  --ls-button: 0.16em;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
  --space-9: 64px; --space-10: 80px; --space-11: 104px; --space-12: 128px;
  --space-13: 160px;

  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;
  --card-pad: 32px;
  --card-pad-lg: 40px;

  /* Radius + borders */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 999px;

  /* Elevation. Tinted to the ink, never pure black. */
  --shadow-card: 0 1px 2px rgba(11, 11, 12, .04), 0 8px 24px rgba(11, 11, 12, .06);
  --shadow-card-hover: 0 2px 4px rgba(11, 11, 12, .06), 0 18px 44px rgba(11, 11, 12, .12);
  --shadow-modal: 0 32px 80px rgba(11, 11, 12, .34);

  /* Scrims - text over photography never sits on raw image. */
  --scrim-bottom: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,.10) 40%, rgba(11,11,12,.82) 100%);
  --scrim-full: linear-gradient(180deg, rgba(11,11,12,.58) 0%, rgba(11,11,12,.46) 45%, rgba(11,11,12,.78) 100%);
  --scrim-left: linear-gradient(90deg, rgba(11,11,12,.80) 0%, rgba(11,11,12,.35) 55%, rgba(11,11,12,0) 100%);

  /* Motion. No bounce, no spring, no overshoot anywhere. */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;
  --ease-standard: cubic-bezier(.22, .61, .36, 1);
  --hover-lift: -2px;
  --press-scale: .985;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
  /* Flatsome's own scroll-in animations are class-driven, so collapse them too. */
  .animated,
  [class*="animate-"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===========================================================================
   2. GRID
   Flatsome ships a 30px gutter (15px per column side). The design calls for 24.
   Scoped away from row-small / row-large / row-collapse, which have their own
   deliberate gutters that the builder exposes as options.
   =========================================================================== */

/* Only the column padding is touched. Flatsome centres a .row with
   margin-left/right:auto, so setting explicit margins here (to offset the
   padding) silently destroys the centring and pushes every row flush left. */
.row:not(.row-small):not(.row-large):not(.row-collapse) > .col {
  padding-left: 12px;
  padding-right: 12px;
}

/* Narrow measure for intro copy and the FAQ column. */
.nd-narrow {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* ===========================================================================
   3. TYPOGRAPHY
   =========================================================================== */

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.nd-display {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  font-weight: var(--fw-light);
  text-transform: none;
}

h1 {
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h2 { font-size: var(--fs-display-2); }
h3 { font-size: var(--fs-display-3); }

/* Lead paragraph - the 19px/300 intro under a section heading. */
.nd-lead {
  font-family: var(--font-ui);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-lead);
  color: var(--text-body);
}

.nd-small {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* Eyebrow - wide-tracked caps above a heading. The brand's signature device. */
.nd-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0 0 var(--space-4);
}

/* Card titles are the one hybrid: serif, but uppercase and tracked. */
.nd-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-strong);
}

/* Dark-section inversions.
   Flatsome's .dark sets colour:#f1f1f1, an off-palette near-white that leaks
   into every dark band. Replaced with the palette's own on-dark ink. */
.dark { color: var(--text-on-dark); }

.dark .nd-eyebrow,
.nd-on-dark .nd-eyebrow { color: var(--text-accent-on-dark); }

.dark .nd-lead,
.nd-on-dark .nd-lead { color: var(--text-on-dark-muted); }

.dark .nd-small,
.nd-on-dark .nd-small { color: var(--text-on-dark-muted); }

.dark .nd-card-title,
.nd-on-dark .nd-card-title { color: var(--text-on-dark); }

/* ===========================================================================
   4. THE GOLD RULE
   A 1px gradient hairline, optionally carrying an 8px open diamond at centre.
   Pure ornament with no builder equivalent, hence CSS.
   =========================================================================== */

/* Two gradient segments with a gap, with the diamond sitting in the gap - not a
   single line masked behind an opaque block. The mask approach would paint a
   solid rectangle over whatever is behind it, which breaks the moment the rule
   sits on photography (as it does in every page hero). */
.nd-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 160px;
  height: 8px;
  border: 0;
  margin: var(--space-5) auto;
  background: none;
}

.nd-rule::before,
.nd-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--nd-gold-gradient);
}

.nd-rule-d {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border: 1px solid var(--nd-gold-500);
}

/* Left-aligned variant, for split sections where the heading is not centred. */
.nd-rule--left { margin-left: 0; margin-right: 0; }

/* Diamond as a standalone glyph: open ornament, or filled list bullet. */
.nd-diamond {
  display: inline-block;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border: 1px solid var(--nd-gold-500);
}

.nd-diamond--filled {
  background: var(--nd-gold-500);
  border-color: var(--nd-gold-500);
}

/* Larger open diamond, used above the home page's pain-point columns. */
.nd-diamond--lg { width: 14px; height: 14px; }

/* Pain-point question heading: serif, but at card-title size and regular
   weight so the question reads as a question rather than a section heading. */
.nd-pain-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  margin: var(--space-5) 0 var(--space-3);
}

/* ===========================================================================
   5. BUTTONS
   Four treatments and no others. Flatsome's defaults (heavy shadow, its own
   radius and letter-spacing) are overridden here.
   =========================================================================== */

/* Flatsome's own button classes are styled directly rather than through a
   parallel set, so a button added later in UX Builder inherits the brand with
   no extra class to remember.

   Four Flatsome defaults actively fight this design:
   - .button sets color:#fff. White on the gold primary is 2.4:1 and fails WCAG
     AA; the brand's ink label on gold is 8.1:1. This is a contrast fix, not a
     preference.
   - Sizing is height-based (min-height:2.5em, line-height:2.4em), so padding
     alone cannot produce the specified sizes - the height has to be released.
   - Hover darkens with `inset 0 0 0 100px rgba(0,0,0,.2)`. The brand lightens
     the fill instead.
   - .is-outline is 2px. Every border in this brand is 1px. */

/* NOTE the :not(.icon) guards below. Flatsome uses icon buttons for square /
   circular controls that set their own width and height - the back-to-top
   button, slider arrows, social icons - and its own rules exclude them the same
   way (`button:not(.icon)`). Applying text-button padding to those stretches
   them vertically against a fixed width, which is what skewed the round
   back-to-top button into an oval. */
.button,
button,
input[type="submit"],
.quform-submit {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-sm);
  box-shadow: none;
  text-shadow: none;
  margin-right: 0;
  transition:
    background-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

/* Sizing applies to text buttons only - icon buttons keep their own geometry. */
.button:not(.icon),
input[type="submit"],
.quform-submit {
  min-height: 0;
  padding: 16px 32px;
}

/* Flatsome gives the label span its own line-height, which reintroduces the
   extra height the padding above is trying to control. */
.button:not(.icon) span { line-height: 1; }

.button.is-small:not(.icon)  { padding: 11px 20px; font-size: 11px; }
.button.is-medium:not(.icon) { padding: 16px 32px; font-size: var(--fs-eyebrow); }
.button.is-large:not(.icon)  { padding: 20px 44px; font-size: 13px; }

.button.is-outline:not(.icon) { line-height: 1; border-width: 1px; }

/* Flatsome's darkening inset shadow, removed everywhere. */
.button:hover,
button:hover,
input[type="submit"]:hover,
.quform-submit:hover {
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.button:active,
button:active,
.quform-submit:active {
  transform: scale(var(--press-scale));
}

/* Spacing between side-by-side buttons.
   Flatsome's default 1em right margin is cleared above, so pairs need their own
   gap. Note the rendered gap lands ~4px wider than this margin: Flatsome's
   [button] template emits trailing whitespace, and between two inline-block
   buttons that collapses to a space which adds to the margin. 20px here reads
   as 24px on screen, which is the agreed spacing. */
.button + .button { margin-left: 20px; }

/* Once they wrap, a left margin would push the second button off-centre. */
@media (max-width: 549px) {
  .button + .button { margin-left: 0; margin-top: 12px; }
}

/* Primary - gold fill, ink label. */
.button.primary,
input[type="submit"],
.quform-submit {
  background-color: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
}

.button.primary:hover,
input[type="submit"]:hover,
.quform-submit:hover {
  background-color: var(--action-primary-bg-hover);
  border-color: var(--action-primary-bg-hover);
  color: var(--action-primary-fg);
}

/* Secondary - outline on light grounds, fills black on hover. */
.button.secondary.is-outline {
  background-color: transparent;
  border-color: var(--text-strong);
  color: var(--text-strong);
}

.button.secondary.is-outline:hover {
  background-color: var(--text-strong);
  border-color: var(--text-strong);
  color: var(--nd-white);
}

/* Outline light - over photography only. Flatsome's .white rules carry
   !important, so these have to as well. */
.button.white.is-outline {
  background-color: transparent !important;
  border-color: var(--action-secondary-border);
  color: var(--nd-white) !important;
}

.button.white.is-outline:hover {
  background-color: var(--nd-white) !important;
  border-color: var(--nd-white);
  color: var(--nd-ink-900) !important;
}

/* Ghost - an in-card text link, no fill or border. */
.button.is-link {
  padding: 0;
  letter-spacing: var(--ls-nav);
  color: var(--text-accent);
}

.button.is-link:hover { color: var(--nd-gold-700); }

.dark .button.is-link { color: var(--text-accent-on-dark); }
.dark .button.is-link:hover { color: var(--nd-gold-200); opacity: 1; }

/* The arrow.
   Delivered as a pseudo-element rather than typed into every label: it keeps
   labels clean for whoever edits them later, guarantees the glyph is never
   forgotten, and lets it slide independently of the text on hover. */
.nd-cta::after,
.quform-button-submit-text::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  font-size: 1.15em;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-standard);
}

.nd-cta:hover::after,
.quform-submit:hover .quform-button-submit-text::after {
  transform: translateX(3px);
}

/* ===========================================================================
   6. ANNOUNCEMENT BAR
   The one place pure #000 is allowed.
   =========================================================================== */

#top-bar {
  background-color: var(--nd-black);
}

#top-bar .nd-announce {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--nd-gold-500);
}

#top-bar .nav > li > a { padding: 10px 0; }

/* ===========================================================================
   7. HEADER
   =========================================================================== */

/* No rule under the header in any state - at rest or condensed. The header
   separates from the page by its own dark ground, not by an edge. */
.header-wrapper,
.header-wrapper.stuck,
.header-main,
.header-bottom {
  border-bottom: 0;
  box-shadow: none;
}

.header-wrapper {
  transition: background-color var(--dur-base) var(--ease-standard);
}

/* Condensed state. Flatsome adds .stuck at 40px of scroll via flatsome.js -
   this rule has no matching class in any static HTML, so do not prune it. */
.header-wrapper.stuck .header-main {
  background-color: rgba(11, 11, 12, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.header-main .logo img { max-height: 62px; width: auto; transition: max-height var(--dur-base) var(--ease-standard); }
.stuck .header-main .logo img { max-height: 46px; }

/* Nav: caps, tracked, with a gold underline that grows from the left. */
.header-main .nav > li > a {
  font-family: var(--font-ui);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--nd-white);
  position: relative;
}

.header-main .nav > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 1px;
  background: var(--nd-gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-standard);
}

.header-main .nav > li > a:hover::after,
.header-main .nav > li.current-menu-item > a::after,
.header-main .nav > li.current-menu-parent > a::after,
.header-main .nav > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* Flatsome draws its own underline on hover; the brand supplies its own. */
.header-main .nav > li > a .nav-top-link::before { display: none; }

/* Dropdown panel.
   No border by design decision - the panel reads as a floating dark surface and
   the drop shadow (a Customizer setting) does the separating. The shadow is
   deliberately NOT overridden here so that setting stays in charge.
   Selectors carry .nav-dropdown-default as well as .nav-dropdown because
   Flatsome's own rules use the -default class; matching it only on one class
   ties on specificity and loses on source order. */
.nav-dropdown,
.nav-dropdown.nav-dropdown-default {
  background-color: var(--nd-ink-900);
  border: 0;
  min-width: 210px;
  border-radius: 0;
}

.nav-dropdown.nav-dropdown-default > li > a,
.nav-dropdown > li > a {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nd-white);
  padding: 11px 18px;
  /* Flatsome draws a rgba(255,255,255,.2) rule under every dropdown link. */
  border: 0;
}

.nav-dropdown.nav-dropdown-default > li > a:hover,
.nav-dropdown > li > a:hover {
  color: var(--nd-gold-500);
  background: transparent;
}

/* The current page's entry in a dropdown is gold, matching the gold underline
   the top-level nav uses to mark the active item. */
.nav-dropdown.nav-dropdown-default > li.current-menu-item > a,
.nav-dropdown.nav-dropdown-default > li.current-menu-ancestor > a,
.nav-dropdown.nav-dropdown-default > li.current-menu-parent > a,
.nav-dropdown > li.current-menu-item > a,
.nav-dropdown > li.current-menu-ancestor > a,
.nav-dropdown > li.current-menu-parent > a {
  color: var(--nd-gold-500);
}

/* ===========================================================================
   8. SECTIONS AND SCRIMS
   =========================================================================== */

.nd-band-bone { background-color: var(--surface-band); }
.nd-band-dark { background-color: var(--surface-dark); }

/* Flatsome's overlay setting takes a flat colour only, so the real protection
   gradients are applied by class instead. It compiles the flat colour to
   #section_<id> .section-bg-overlay, so !important is needed to win on
   specificity; `background` (not background-color) so the gradient replaces the
   colour rather than layering under it. Both section and banner overlays are
   covered - they use different element classes. */
.nd-scrim-full .section-bg-overlay,
.nd-scrim-full .banner-bg-overlay,
.nd-scrim-full .bg-overlay { background: var(--scrim-full) !important; }

.nd-scrim-bottom .section-bg-overlay,
.nd-scrim-bottom .banner-bg-overlay,
.nd-scrim-bottom .bg-overlay { background: var(--scrim-bottom) !important; }

.nd-scrim-left .section-bg-overlay,
.nd-scrim-left .banner-bg-overlay,
.nd-scrim-left .bg-overlay { background: var(--scrim-left) !important; }

/* Section rhythm is a builder setting, not CSS: [section padding="104px"
   padding__sm="56px"] compiles to a mobile-first pair on its own. Leave it to
   the builder so the client can change it.

   The page hero is the one exception. It needs 128px top and 104px bottom, and
   the padding attribute writes a single value into BOTH properties - a
   shorthand there produces invalid CSS that browsers drop. Flatsome compiles
   that value to #section_<id>, so an ID outranks any class and !important is
   the only way a class can win. */
.section.nd-page-hero {
  padding-top: 128px !important;
  padding-bottom: 104px !important;
}

@media (max-width: 549px) {
  .section.nd-page-hero {
    padding-top: 72px !important;
    padding-bottom: 56px !important;
  }
}

/* ===========================================================================
   9. CARDS
   White, hairline, 3px radius, quiet shadow. Lifts 2px on hover and scales any
   inner image. Flatsome's default card shadows are far heavier than the brand.
   =========================================================================== */

.nd-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}

.nd-card:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-card-hover);
}

.nd-card .nd-card-body { padding: var(--card-pad); }

.nd-card img { transition: transform var(--dur-slow) var(--ease-standard); }
.nd-card:hover img { transform: scale(1.04); }

/* Service card - the whole card is the link. */
.nd-service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.nd-service-card:hover { color: inherit; }

.nd-service-card .nd-card-media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.nd-service-card .nd-card-media img { width: 100%; height: 100%; object-fit: cover; }

.nd-service-card .nd-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad);
}

.nd-card-link {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-top: auto;
}

.nd-service-card:hover .nd-card-link { color: var(--nd-gold-700); }

/* Equal-height service cards, same chain as the package row. */
.nd-card-row > .col { display: flex; }
.nd-card-row > .col > .col-inner { display: flex; width: 100%; }

/* Home hero needs a floor height regardless of content. */
.nd-hero-home { min-height: 660px; display: flex; align-items: center; }

@media (max-width: 549px) {
  .nd-hero-home { min-height: 520px; }
}

/* The home headline is deliberately set to a narrow measure so it breaks into
   three short lines. The stacked period-separated fragment is the brand's
   signature headline treatment, so the wrap is the design, not an accident. */
.nd-hero-home h1 {
  max-width: 14ch;
  margin-left: auto;
  margin-right: auto;
}

/* Body copy stays inside a comfortable reading measure. */
.nd-hero-home .nd-lead {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* Hero caps line under the headline. */
.nd-hero-locations {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--nd-white);
}

/* Reviews carousel - gold diamond pagination, matching the brand's glyph.
   Flatsome renders dots through Flickity, which has no builder control for
   their shape or colour. */
/* Flickity positions its dots `absolute; bottom:15px`, which lays them over the
   bottom of the cards rather than below the slider. Returning them to the
   normal flow is what actually moves them down - a margin alone does nothing
   while they are absolutely positioned. */
.nd-review-slider .flickity-page-dots {
  position: static;
  bottom: auto;
  height: auto;
  margin: 40px 0 0;
  padding: 0;
  line-height: 1;
}

/* The diamond is drawn at 12px but rotating it 45 degrees makes the visible
   width its diagonal, ~17px. */
.nd-review-slider .flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  margin: 0 10px;
  border: 1px solid var(--nd-gold-500);
  border-radius: 0;
  transform: rotate(45deg);
  background: transparent;
  opacity: 1;
  transition: background-color var(--dur-base) var(--ease-standard);
}

.nd-review-slider .flickity-page-dots .dot:hover { background: var(--nd-gold-400); }

.nd-review-slider .flickity-page-dots .dot.is-selected { background: var(--nd-gold-500); }

/* Venue logo strip on the home page carries no city label. */
.nd-venue-strip .nd-venue-logo { border: 0; min-height: 120px; padding: var(--space-4); }

/* ===========================================================================
   10. ACCORDION (FAQ)
   Hairline dividers only - no boxes - with a gold plus that becomes a minus.
   =========================================================================== */

.nd-accordion .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
}

.nd-accordion .accordion-title {
  position: relative;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-strong);
  background: transparent;
  border: 0;
  padding: 20px 48px 20px 0;
  transition: color var(--dur-fast) var(--ease-standard);
}

.nd-accordion .accordion-title:hover,
.nd-accordion .accordion-title.active { color: var(--text-accent); }

/* Flatsome's own toggle glyph, replaced by the brand's plus/minus. */
.nd-accordion .accordion-title .toggle { display: none; }

.nd-accordion .accordion-title::before,
.nd-accordion .accordion-title::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  background: var(--nd-gold-500);
  transition: transform var(--dur-base) var(--ease-standard);
}

/* Horizontal bar of the cross. */
.nd-accordion .accordion-title::before {
  width: 12px;
  height: 1px;
  transform: translateY(-50%);
}

/* Vertical bar collapses to nothing when open, turning + into -. */
.nd-accordion .accordion-title::after {
  width: 1px;
  height: 12px;
  margin-right: 5.5px;
  transform: translateY(-50%) scaleY(1);
}

.nd-accordion .accordion-title.active::after { transform: translateY(-50%) scaleY(0); }

.nd-accordion .accordion-inner {
  padding: 0 48px 24px 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ===========================================================================
   11. FORMS (Quform)
   =========================================================================== */

/* Quform ships its own theme stylesheet scoped to .quform-theme-light, which
   outranks single-class selectors. Everything below is scoped to
   .quform.quform-theme-light (both classes sit on the same wrapper) so these
   rules win on specificity rather than with !important.
   Quform renders the label as label.quform-label-text inside .quform-label,
   not as a direct child of .quform-element. */
.quform.quform-theme-light .quform-label-text {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* The brand has no semantic red. Quform sets the asterisk with a four-class
   rule (.quform-theme-light .quform-label>.quform-label-text>.quform-required),
   so this has to carry five to win. */
.quform.quform-theme-light .quform-label > .quform-label-text > .quform-required {
  color: var(--nd-gold-500);
}

/* Quform's light theme accent is a green (#89C712) that surfaces in the
   submit spinner. Brought back to the one accent this brand allows. */
.quform.quform-theme-light .quform-loading-spinner,
.quform.quform-theme-light .quform-loading-spinner-inner {
  color: var(--nd-gold-500);
  border-left-color: var(--nd-gold-500);
}

.quform.quform-theme-light .quform-field-text,
.quform.quform-theme-light .quform-field-email,
.quform.quform-theme-light .quform-field-date,
.quform.quform-theme-light .quform-field-select,
.quform.quform-theme-light .quform-field-textarea {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--text-body);
  background: var(--nd-white);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: none;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

/* Never the browser default focus treatment on form controls. */
.quform.quform-theme-light .quform-field-text:focus,
.quform.quform-theme-light .quform-field-email:focus,
.quform.quform-theme-light .quform-field-date:focus,
.quform.quform-theme-light .quform-field-select:focus,
.quform.quform-theme-light .quform-field-textarea:focus {
  border-color: var(--nd-gold-500);
  box-shadow: 0 0 0 3px rgba(199, 161, 90, .18);
  outline: none;
}

/* Select chevron drawn from borders - no icon library in this brand. */
.quform.quform-theme-light .quform-field-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  padding-right: 44px;
}

.quform-element-select .quform-input { position: relative; }

.quform-element-select .quform-input::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1px solid var(--nd-gold-500);
  border-bottom: 1px solid var(--nd-gold-500);
  transform: rotate(45deg);
  pointer-events: none;
}

.quform.quform-theme-light .quform-submit {
  width: 100%;
  background-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
  border: 1px solid var(--action-primary-bg);
  border-radius: var(--radius-sm);
  padding: 16px 32px;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  box-shadow: none;
}

.quform.quform-theme-light .quform-submit:hover {
  background-color: var(--action-primary-bg-hover);
  border-color: var(--action-primary-bg-hover);
  color: var(--action-primary-fg);
  box-shadow: none;
}

/* reCAPTCHA v3 badge.
   Google's terms allow hiding the floating badge ONLY if the required
   attribution is shown in the form instead. That text ships as .nd-recaptcha-
   note alongside every [quform] embed - if this rule is ever kept while that
   note is removed, the site is out of compliance with Google's terms.
   visibility rather than display, which the widget tolerates more reliably. */
.grecaptcha-badge { visibility: hidden; }

.nd-recaptcha-note {
  margin-top: var(--space-4);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}

.nd-recaptcha-note a {
  color: var(--text-accent);
  text-decoration: underline;
}

.dark .nd-recaptcha-note,
.nd-on-dark .nd-recaptcha-note { color: var(--text-on-dark-muted); }

/* ===========================================================================
   12. VENUE TILES
   =========================================================================== */

/* Logo tile: black line art, dimmed, tile border warms to gold on hover. */
.nd-venue-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 150px;
  padding: var(--space-5);
  border: 1px solid var(--border-hairline);
  transition: border-color var(--dur-base) var(--ease-standard);
}

.nd-venue-logo img {
  max-width: 170px;
  max-height: 64px;
  width: auto;
  opacity: .68;
  transition: opacity var(--dur-base) var(--ease-standard);
}

.nd-venue-logo:hover { border-color: var(--border-accent); }
.nd-venue-logo:hover img { opacity: 1; }

.nd-venue-logo .nd-venue-city {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: transparent;
  margin-top: var(--space-3);
  transition: color var(--dur-base) var(--ease-standard);
}

.nd-venue-logo:hover .nd-venue-city { color: var(--text-accent); }

/* Photo tile: the only image filter in the brand. */
.nd-venue-tile img {
  filter: grayscale(1);
  transition:
    filter var(--dur-slow) var(--ease-standard),
    transform var(--dur-slow) var(--ease-standard);
}

.nd-venue-tile:hover img {
  filter: grayscale(0);
  transform: scale(1.05);
}

/* ===========================================================================
   13. REVIEW CARD
   =========================================================================== */

.nd-review {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--card-pad);
}

.nd-review .nd-stars { color: var(--nd-gold-500); letter-spacing: .18em; }

.nd-review .nd-review-headline {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin: var(--space-4) 0 var(--space-3);
}

/* Italic display type needs extra leading so descenders in y/g/j/p/q clear. */
.nd-review .nd-review-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text-strong);
}

.nd-review .nd-review-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nd-review .nd-review-name { color: var(--text-strong); font-weight: var(--fw-semibold); }
.nd-review .nd-review-source { color: var(--text-muted); }

/* ===========================================================================
   14. PACKAGE CARD
   =========================================================================== */

/* Equal-height cards across the row. Flatsome's columns stretch, but .col-inner
   does not pass that height down on its own, so the chain has to be made
   explicit from column to card. */
.nd-package-row > .col { display: flex; }
.nd-package-row > .col > .col-inner { display: flex; width: 100%; }

.nd-package {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad-lg);
}

/* The feature list absorbs the slack so every card's CTA sits on the same line. */
.nd-package .nd-feature-list { flex: 1; }

.nd-package .nd-package-head { display: flex; flex-direction: column; gap: 6px; }
.nd-package .nd-package-blurb { margin: 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-muted); }

.nd-package .nd-package-name {
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  color: var(--text-strong);
}

.nd-package .nd-package-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* The featured tier inverts and takes a gold border. */
.nd-package--featured {
  background: var(--nd-ink-900);
  border-color: var(--nd-gold-500);
  box-shadow: var(--shadow-modal);
}

.nd-package--featured .nd-package-name { color: var(--text-on-dark); }
.nd-package--featured .nd-package-sub { color: var(--text-accent-on-dark); }

/* The blurb is the muted line; the features themselves stay at full white so
   the featured tier does not read as less legible than the plain ones. */
.nd-package--featured .nd-package-blurb { color: var(--text-on-dark-muted); }
.nd-package--featured .nd-feature-list li { color: var(--text-on-dark); }

/* "Most popular" tag straddling the top edge. */
.nd-package--featured .nd-package-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--nd-gold-500);
  color: var(--nd-ink-900);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  padding: 7px 16px;
  white-space: nowrap;
}

/* Feature lists use the filled gold diamond as the bullet. */
.nd-feature-list { list-style: none; margin: 0; padding: 0; }

.nd-feature-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.nd-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--nd-gold-500);
}

/* Special offers: a gold caps title over a hairline, no box. */
.nd-offer {
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.nd-offer .nd-offer-title {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-accent);
}

.nd-offer p { margin: 6px 0 0; }

/* ===========================================================================
   15. STEP CARD
   =========================================================================== */

.nd-step { border-top: 1px solid var(--border-hairline-dark); padding-top: var(--space-5); }

.nd-step .nd-step-num {
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--nd-gold-500);
}

.nd-step .nd-step-title {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin: var(--space-4) 0 var(--space-3);
}

/* ---------------------------------------------------------------------------
   Hairline feature list - gold diamond bullet with a rule under each row.
   Used on DJ/MC, Photo Booth and Lighting.
   --------------------------------------------------------------------------- */

.nd-hairline-list { list-style: none; margin: 0; padding: 0; }

.nd-hairline-list li {
  position: relative;
  padding: 0 0 var(--space-4) 24px;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-body);
}

.nd-hairline-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--nd-gold-500);
}

.dark .nd-hairline-list li,
.nd-on-dark .nd-hairline-list li {
  color: var(--nd-white);
  border-bottom-color: var(--border-hairline-dark);
}

/* Two-up variant for "What's Included". */
.nd-hairline-list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-9); }

@media (max-width: 849px) {
  .nd-hairline-list--2col { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   The Nick Dean Difference - open diamond beside a paragraph, rule above.
   --------------------------------------------------------------------------- */

.nd-diff {
  display: flex;
  gap: var(--space-5);
  border-top: 1px solid var(--border-hairline-dark);
  padding-top: var(--space-5);
  margin-bottom: var(--space-8);
}

.nd-diff::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 9px;
  transform: rotate(45deg);
  border: 1px solid var(--nd-gold-500);
}

.nd-diff p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-on-dark-muted); }
.nd-diff strong { color: var(--nd-white); font-weight: var(--fw-semibold); }

/* ---------------------------------------------------------------------------
   Reviews page - stat row and the masonry column flow.
   --------------------------------------------------------------------------- */

.nd-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-7); }
.nd-stat { text-align: center; }

/* Flatsome centres block children of a text-center column with
   `.text-center > div, .text-center > div > div { margin: 0 auto }`, which
   lands on each stat. Inside a flex row an auto margin absorbs ALL the free
   space, so the stats were pinned to opposite ends and the gap above did
   nothing. Zeroing the horizontal margins hands spacing back to `gap`. */
.nd-stats > .nd-stat,
.nd-trust > * {
  margin-left: 0;
  margin-right: 0;
}

.nd-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--text-accent);
}

.nd-stat-label {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* CSS columns rather than a grid, so uneven review lengths pack naturally. */
.nd-review-masonry { column-count: 3; column-gap: var(--space-6); }

.nd-review-masonry > * {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: var(--space-6);
}

@media (max-width: 849px) { .nd-review-masonry { column-count: 2; } }
@media (max-width: 549px) { .nd-review-masonry { column-count: 1; } }

/* ---------------------------------------------------------------------------
   Venue photo tile - the only image filter in the brand.
   --------------------------------------------------------------------------- */

.nd-venue-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 3 / 4;
}

.nd-venue-tile img { width: 100%; height: 100%; object-fit: cover; }

.nd-venue-tile .nd-venue-cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--space-5);
  background: var(--scrim-bottom);
}

.nd-venue-tile .nd-venue-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--nd-white);
}

.nd-venue-tile .nd-venue-loc {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--nd-gold-500);
}

/* Bordered callout card, used for the photo booth bundle panel. */
.nd-callout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  height: 100%;
  border: 1px solid var(--border-hairline-dark);
  border-radius: var(--radius-md);
  padding: var(--card-pad-lg);
}

/* Images carry the brand's 3px radius wherever they appear in content. */
.nd-media img { border-radius: var(--radius-md); }

/* Contact form card. */
.nd-form-card {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad-lg);
  background: var(--surface-card);
}

/* Contact details block, hairline above. */
.nd-contact-meta {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.nd-contact-meta a { display: inline-block; margin-top: var(--space-3); }

/* ===========================================================================
   16. TRUST BAR
   Service areas and claims separated by gold diamonds.
   =========================================================================== */

.nd-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  font-family: var(--font-ui);
  /* Scales with viewport rather than sitting at a flat size, so it grows on a
     wide screen without wrapping on a narrow one. The longest strip (the About
     page's three claims) is the constraint: its text width grows with the font
     size because the tracking is em-based, so a flat 14px overflows a ~994px
     container on a 1024px laptop and breaks to two lines. This holds at 12px
     there, reaches ~13px at 1280 and caps at 14px once there is room for it. */
  font-size: clamp(12px, 1.02vw, 14px);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nd-trust > * + *::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: var(--space-4);
  transform: rotate(45deg);
  background: var(--nd-gold-500);
  vertical-align: middle;
}

.dark .nd-trust,
.nd-on-dark .nd-trust { color: var(--text-on-dark-muted); }

/* ===========================================================================
   17. FOOTER
   =========================================================================== */

.footer-wrapper { background-color: var(--surface-dark); }

.nd-footer-heading {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: var(--space-5);
}

/* The only pill radius in the system. */
.nd-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-hairline-dark);
  border-radius: var(--radius-pill);
  color: var(--nd-gold-500);
  transition: border-color var(--dur-base) var(--ease-standard);
}

.nd-social-btn:hover { border-color: var(--nd-gold-500); color: var(--nd-gold-500); }

.nd-footer-logo img { max-height: 72px; width: auto; }

/* Footer links.
   Keyed off the footer region rather than a list class: the link columns are
   authored in UX Builder as <p><a>…<br></p>, so any class-based hook would stop
   matching the moment that block is edited. Buttons are excluded so a CTA in
   the footer keeps its own treatment. */
.footer-wrapper a:not(.button):not(.icon),
#footer a:not(.button):not(.icon) {
  font-size: var(--fs-small);
  /* Gold-600 is the palette's muted gold. On the #0B0B0C footer it measures
     5.5:1, so it clears WCAG AA for body text while still reading as gold
     rather than as the full-strength accent. */
  color: var(--nd-gold-600);
}

.footer-wrapper a:not(.button):not(.icon):hover,
#footer a:not(.button):not(.icon):hover {
  color: var(--nd-gold-500);
}

/* Optional list form, if a link column is ever rebuilt as a real list. */
.nd-footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The footer's bottom bar is styled directly in UX Builder (its own section
   with a lighter ground), so no .nd-footer-bottom rule is needed here. */

.nd-footer-copy {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nd-ink-400);
}

.nd-trust--right { justify-content: flex-end; }

@media (max-width: 849px) {
  .nd-trust--right { justify-content: flex-start; }
}

/* The bottom bar is built into the footer UX Block, so Flatsome's own absolute
   footer would be a second, unstyled copy of the same thing. */
.absolute-footer { display: none; }

/* ===========================================================================
   18. LINKS AND FOCUS
   =========================================================================== */

a { color: var(--text-accent); transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--nd-gold-700); text-decoration: none; }

.dark a,
.nd-on-dark a { color: var(--text-accent-on-dark); }

/* Never suppressed. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}