/* Belles and Beaus, homepage
 * ---------------------------------------------------------------------------
 * Direction: candlelight against brick. Jan's own photographs are warm light in
 * a dark room, so the page pairs a cool plum ground with warm gold light rather
 * than the cream-and-dusty-rose that any wedding brief would produce.
 *
 * SIGNATURE: the page turns to evening. The first two thirds are daylight
 * (cream, blush); the final third commits to night, so the striping tracks a
 * wedding day rather than decorating the page. Jan's job spans all of it.
 *
 * SCOPING: every rule sits under a .bb-* class that exists only on this page.
 * The global Customizer is untouched, so the other 43 pages are unaffected.
 */

:root {
  /* Client-approved family, re-ranked. Gold is promoted from an incidental in
     the logo ring to the accent; rose is demoted to a sparing italic tint. */
  --bb-cream:    #FBF7F2;
  --bb-blush:    #EFE0DC;
  --bb-plum:     #4B1F4D;   /* panels, buttons */
  --bb-ink:      #2A1428;   /* the night ground, warmer than a neutral black */
  --bb-gold:     #B0894F;   /* festoon light, on light grounds */
  --bb-gold-lit: #E7C489;   /* the same light, on dark grounds */
  --bb-rose:     #C99490;
  --bb-body:     #6A5868;
  --bb-on-dark:  rgba(255, 255, 255, .78);

  --bb-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --bb-sans:  "Karla", "Helvetica Neue", Arial, sans-serif;
  --bb-measure: 1200px;

  --bb-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- foundation */
.bb-sec {
  font-family: var(--bb-sans);
  color: var(--bb-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
}
/* Unclassed only: at 0-2-0 this otherwise beats .bb-lede and
   .bb-acc__summary (0-1-0) and flattens them back to the base size. */
.bb-sec p:not([class]) { font-size: inherit; line-height: inherit; }
.bb-sec h1, .bb-sec h2, .bb-sec h3, .bb-sec h4 {
  font-family: var(--bb-serif);
  font-weight: 400;
  color: var(--bb-ink);
  /* Fraunces is variable. Softness rounds the terminals so it reads handmade
     rather than editorial; a touch of wonk keeps it from feeling systematic. */
  font-variation-settings: "SOFT" 28, "WONK" 1, "opsz" 120;
  letter-spacing: -0.015em;
  line-height: 1.14;
}
.bb-sec p { color: inherit; }
.bb-sec a { color: inherit; }

/* Eyebrow. A gold hairline ties it to the accent without adding an ornament. */
.bb-eyebrow {
  font-family: var(--bb-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bb-gold);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.bb-eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: .4;
  max-width: 74px;
}
.bb-sec--night .bb-eyebrow { color: var(--bb-gold-lit); }

/* The italic accent line inside a display heading. */
.bb-accent {
  display: block;
  font-style: italic;
  color: var(--bb-rose);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
}
.bb-sec--night .bb-accent { color: var(--bb-gold-lit); }

/* Underlined utility link. The rule grows from the left on hover rather than
   simply changing colour, which reads as a deliberate action. */
.bb-link {
  font-family: var(--bb-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 7px;
  position: relative;
  color: var(--bb-plum);
}
.bb-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform 320ms var(--bb-ease);
}
.bb-link:hover::after { transform: scaleX(.4); }
.bb-sec--night .bb-link { color: var(--bb-gold-lit); }

/* Grounds. --------------------------------------------------------------- */
.bb-sec--cream { background: var(--bb-cream); }
.bb-sec--blush { background: var(--bb-blush); }

/* Flat dark ground. A radial warm bloom used to sit behind these sections; it
   read as a glow artefact rather than atmosphere, so it is gone. */
.bb-sec--night {
  background: var(--bb-ink);
  position: relative;
  overflow: hidden;
}
.bb-sec--night,
.bb-sec--night p { color: var(--bb-on-dark); }
.bb-sec--night h1, .bb-sec--night h2,
.bb-sec--night h3, .bb-sec--night h4 { color: #fff; }
.bb-sec--night > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ buttons */
.bb-sec .uk-button.uk-button-primary {
  background: var(--bb-plum);
  color: #fff;
  border-radius: 0;
  border: 0;
  font-family: var(--bb-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 36px;
  line-height: 58px;
  transition: background 220ms var(--bb-ease), transform 150ms var(--bb-ease);
}
.bb-sec .uk-button.uk-button-primary:hover { background: var(--bb-ink); }
.bb-sec .uk-button.uk-button-primary:active { transform: scale(.97); }

/* On night grounds the primary action becomes the light source. */
.bb-sec--night .uk-button.uk-button-primary {
  background: var(--bb-gold-lit);
  color: var(--bb-ink);
}
.bb-sec--night .uk-button.uk-button-primary:hover { background: #fff; }

/* Secondary action. Same footprint as the primary so it reads as a real
   choice, outlined so it stays clearly subordinate. */
.bb-sec .uk-button.uk-button-default {
  background: transparent;
  color: var(--bb-plum);
  border: 1px solid rgba(62, 13, 60, .38);
  border-radius: 0;
  font-family: var(--bb-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 30px;
  line-height: 56px;
  transition: border-color 220ms var(--bb-ease), background 220ms var(--bb-ease), transform 150ms var(--bb-ease);
}
.bb-sec .uk-button.uk-button-default:hover {
  border-color: var(--bb-plum);
  background: rgba(62, 13, 60, .05);
  color: var(--bb-plum);
}
.bb-sec .uk-button.uk-button-default:active { transform: scale(.97); }

.bb-sec .uk-button.uk-button-text {
  font-family: var(--bb-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bb-plum);
}

/* --------------------------------------------------------------------- hero */
.bb-hero {
  background: var(--bb-blush);
  position: relative;
  overflow: hidden;
}
/* The theme caps .uk-container at 1200px even with uk-container-expand, which
   stops full-bleed sections reaching the viewport edge. Released here only. */
.bb-hero .uk-container,
.bb-panels .uk-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* NOTE: do not add a blanket `.uk-grid > * { padding-left: 0 }` here. It also
   matches nested grids, which collapses the gap between the hero's two buttons.
   The rows set column_gap:collapse, so UIkit removes the gutter already. */
/* Left inset aligns the copy with the site's 1200px column while the panel
   itself bleeds to the viewport edge. */
.bb-hero .uk-grid > .bb-hero__copy { padding: 82px 5vw 82px max(24px, calc((100vw - var(--bb-measure)) / 2)); }
.bb-hero__copy h1 {
  /* Measured, not guessed: in Lora at 528px of column, the first line runs 526px
     at 44px (2px of margin, too tight to survive font-load variance) and 502px
     at 42px. Capped at 42. */
  font-size: clamp(36px, 3.8vw, 54px);
  margin: 0 0 26px;
  font-variation-settings: "SOFT" 24, "WONK" 1, "opsz" 144;
}
/* Exclude the eyebrow: it is also a <p>, and a 31em measure resolves against
   ITS font-size (11px = 341px), which silently forced it onto two lines. */
.bb-hero__copy p:not(.bb-eyebrow) { font-size: 19px; line-height: 1.7; max-width: 27em; }

.bb-hero__media { min-height: 660px; }

/* YOOtheme writes `background-size: <natural width> <natural height>` as an
   INLINE style on the tile, so a 3600px photo in a 720px column renders as a
   720px window onto it: a ~20% crop, massively zoomed. This is what made every
   hero image look like an unreadable close-up regardless of which one was used.
   Inline styles beat any selector, so !important is the only way to reach it. */
.bb-hero__media .uk-tile {
  background-size: cover !important;
  /* The top third of this frame is marquee ceiling and lighting truss.
     Dropping the focal point puts the couple, the LOVE letters and the
     reflected floor in the crop instead of the rigging. */
  background-position: 50% 64% !important;
}

/* This eyebrow is the longest on the page and sits in the narrowest column, so
   it drops the trailing hairline and tightens down a step to hold one line. */
.bb-hero__copy .bb-eyebrow::after { display: none; }
.bb-hero .uk-grid > .bb-hero__copy .bb-eyebrow { font-size: 11px; letter-spacing: .12em; }

/* Page-load sequence. One orchestrated moment rather than scattered effects:
   the photograph settles while the copy rises under it. */
.bb-hero__media .uk-panel { animation: bb-settle 1500ms var(--bb-ease) both; }
.bb-hero__copy > * { animation: bb-rise 800ms var(--bb-ease) both; }
.bb-hero__copy > *:nth-child(2) { animation-delay: 80ms; }
.bb-hero__copy > *:nth-child(3) { animation-delay: 170ms; }
.bb-hero__copy > *:nth-child(4) { animation-delay: 260ms; }
.bb-hero__copy > *:nth-child(5) { animation-delay: 350ms; }

@keyframes bb-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bb-settle {
  from { transform: scale(1.05); }
  to   { transform: none; }
}


/* ------------------------------------------------------------------- awards
 * Fourteen badges of wildly different aspect ratios, each in a fixed-height
 * card so they read as one row.
 *
 * It auto-scrolls rather than waiting to be scrolled because only seven fit at
 * 1440px, the cards are variable width so the eighth began exactly past the
 * edge with no partial card peeking, and macOS hides overlay scrollbars until
 * used. The row read as a set of exactly seven. A trust strip should not depend
 * on the visitor discovering an interaction.
 */
.bb-awards-band {
  background: var(--bb-ink);
  border-top: 1px solid rgba(231, 196, 137, .22);
  border-bottom: 1px solid rgba(231, 196, 137, .22);
}
.bb-awards-label {
  font-family: var(--bb-serif);
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.2;
  color: #fff;
  margin: 0;
  font-variation-settings: "SOFT" 28, "WONK" 1, "opsz" 96;
}
.bb-awards-label span {
  display: block;
  font-family: var(--bb-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bb-gold-lit);
  margin-top: 10px;
}

.bb-awards-viewport { overflow: hidden; }

.bb-awards {
  --bb-gap: 16px;
  display: flex;
  gap: var(--bb-gap);
  width: max-content;
  /* No horizontal padding. translateX(-50%) resolves against the border box, so
     left/right padding puts the loop out of step and shows a jump every cycle. */
  padding: 4px 0;
  margin: 0;
  list-style: none;
  animation: bb-marquee 70s linear infinite;
}
.bb-awards__set {
  display: flex;
  gap: var(--bb-gap);
  margin: 0; padding: 0;
  list-style: none;
}
.bb-awards-wrap:hover .bb-awards,
.bb-awards-wrap:focus-within .bb-awards { animation-play-state: paused; }

/* The track is [set][gap][set], so -50% lands half a gap short of a full set.
   Taking the extra half gap puts the clone's first badge exactly where the
   original's was, which is what makes the loop invisible. */
@keyframes bb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--bb-gap) / 2)); }
}

.bb-awards__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: 12px 20px;
  background: #fff;
  border-radius: 2px;
}
.bb-awards__item img {
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

/* Edge fades must match the band behind them or they show as visible bands. */
.bb-awards-wrap {
  position: relative;
  --bb-fade: 42, 20, 40;          /* var(--bb-ink) as an rgb triplet */
}
.bb-awards-wrap::before,
.bb-awards-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 44px;
  pointer-events: none;
  z-index: 1;
}
/* Fade to an explicit zero-alpha of the SAME colour. Fading to `transparent`
   interpolates through rgba(0,0,0,0) in WebKit and leaves a grey smudge. */
.bb-awards-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgb(var(--bb-fade)), rgba(var(--bb-fade), 0));
}
.bb-awards-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgb(var(--bb-fade)), rgba(var(--bb-fade), 0));
}

/* ------------------------------------------------------------- proposition */
.bb-lede {
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.68;
  color: var(--bb-ink);
}
.bb-sec h2 { font-size: clamp(28px, 2.9vw, 42px); margin: 0 0 24px; }
/* Supporting tier. Hire is the page's longest section and its commercial
   sidecar, not part of the styling argument, so its heading steps down. */
.bb-acc h2 { font-size: clamp(25px, 2.3vw, 34px); }

/* ---------------------------------------------------------- services heading
 * The heading strip must share the panels' left edge. Left in the theme's
 * centred 1200px container it sat ~260px further in than the panel copy below,
 * which is what made the section look misaligned.
 */
.bb-services-head .uk-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.bb-services-head__l { padding-left: 5vw; }
.bb-services-head__r { padding-right: 5vw; }

/* ----------------------------------------------------------------- services */
/* Must match the 0-2-0 above, or the gutter reset wipes this too. */
.bb-panels .uk-grid > .bb-panel { padding: 86px 5vw; }
.bb-panel--blush { background: var(--bb-blush); }
.bb-panel--plum  { background: var(--bb-plum); }
.bb-panel--plum, .bb-panel--plum p { color: var(--bb-on-dark); }
.bb-panel--plum h3 { color: #fff; }
.bb-panel--plum .bb-eyebrow { color: var(--bb-gold-lit); }
.bb-panel--plum .bb-link { color: var(--bb-gold-lit); }

/* Constrain the measure. Across a full 720px half the copy ran well past 100
   characters a line, which is what made these panels feel awkward: long lines
   top-left with a large dead area beneath them. */
.bb-panel .uk-panel > * { max-width: 30em; }
.bb-panel .bb-eyebrow { max-width: 22em; }
.bb-panel h3 { font-size: clamp(24px, 2.2vw, 32px); margin: 0 0 20px; }
.bb-panel p { line-height: 1.72; }

/* --------------------------------------------------------------------- hire
 * A typographic index that opens. Closed it reads as a list of categories;
 * opened it gives a photograph, a fuller description and a way through to the
 * category page. Native UIkit accordion, so Jan can edit every item in the
 * builder and the open/close behaviour and its keyboard support come for free.
 */
.bb-acc .uk-accordion { margin: 0; }
.bb-acc .uk-accordion > :nth-child(n+2) { margin-top: 0; }

/* YOOtheme renders accordion items as div.el-item, not <li>, so the rules are
   hung off that. The hairlines are what make it read as an index. */
.bb-acc .el-item { border-bottom: 1px solid rgba(43, 9, 41, .13); }
.bb-acc .el-item:first-child { border-top: 1px solid rgba(43, 9, 41, .13); }

.bb-acc .uk-accordion-title {
  font-family: var(--bb-serif);
  font-size: clamp(22px, 2.2vw, 31px);
  font-weight: 400;
  color: var(--bb-ink);
  padding: 26px 44px 26px 4px;
  margin: 0;
  position: relative;
  transition: padding-left 300ms var(--bb-ease), color 220ms var(--bb-ease);
}
/* UIkit ships a chevron on ::before. Both pseudo-elements are repurposed here
   as a plus that becomes a minus: the vertical stroke rotates away on open. */
.bb-acc .uk-accordion-title::before,
.bb-acc .uk-accordion-title::after {
  content: "";
  position: absolute;
  top: 50%;
  background-color: var(--bb-plum);
  background-image: none;
  margin: 0;
}
.bb-acc .uk-accordion-title::before {
  right: 4px;
  width: 15px;
  height: 1px;
  transform: translateY(-50%);
}
.bb-acc .uk-accordion-title::after {
  right: 11px;
  width: 1px;
  height: 15px;
  transform: translateY(-50%);
  transition: transform 300ms var(--bb-ease), opacity 220ms var(--bb-ease);
}
.bb-acc .uk-open > .uk-accordion-title::after {
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}

.bb-acc .uk-accordion-title:hover { padding-left: 20px; color: var(--bb-ink); }

/* Closed, this is a list of words. These give the rows presence without adding
   ornament: a tinted row on hover, a tan marker, and a hairline that darkens as
   you move down it, so it reads as something to open rather than a table. */
.bb-acc .el-item { transition: background 240ms var(--bb-ease); }
.bb-acc .el-item:hover { background: rgba(191, 162, 121, .12); }
.bb-acc .uk-open { background: rgba(191, 162, 121, .16); }
.bb-acc .uk-accordion-title::before,
.bb-acc .uk-accordion-title::after { background-color: var(--bb-plum); }
.bb-acc .uk-accordion-title::before { width: 17px; }
.bb-acc .uk-accordion-title::after  { height: 17px; }
.bb-acc .el-item:hover .uk-accordion-title::before,
.bb-acc .el-item:hover .uk-accordion-title::after { background-color: var(--bb-ink); }
/* Breathing room, and the marker clear of the edge once the row is tinted. */
.bb-acc .uk-accordion-title { padding-right: 56px; padding-left: 20px; }
.bb-acc .uk-accordion-title::before { right: 20px; }
.bb-acc .uk-accordion-title::after  { right: 28px; }
.bb-acc .uk-accordion-content { padding-left: 20px; padding-right: 20px; }

.bb-acc .uk-accordion-content {
  margin: 0;
  padding: 4px 4px 34px;
}
.bb-acc .uk-accordion-content img { display: block; width: 100%; height: auto; }
.bb-acc__summary {
  font-size: 18px;
  color: var(--bb-ink);
  margin-bottom: 10px;
}
.bb-acc .uk-accordion-content p { line-height: 1.72; }

/* ----------------------------------------------------- selected weddings */
.bb-frame { position: relative; display: block; margin: 0; }
.bb-frame img {
  display: block;
  width: 100%;
  /* Portrait-leaning crop gives the photograph the weight the section needs;
     a natural-ratio landscape floated small against the copy beside it. */
  height: clamp(420px, 46vw, 620px);
  object-fit: cover;
  object-position: center 55%;
}
.bb-frame::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255, 255, 255, .7);
  pointer-events: none;
}

.bb-pullquote {
  border-left: 2px solid var(--bb-gold);
  padding: 2px 0 2px 26px;
  margin: 36px 0 0;
  font-family: var(--bb-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.56;
  color: var(--bb-ink);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 96;
}
.bb-pullquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--bb-sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bb-body);
}

/* ----------------------------------------------------------------- timeline
 * The page's signature. Real time markers, not 01/02/03: the order carries
 * information the reader needs, and the labels say when rather than how many.
 */
.bb-when {
  padding-top: 26px;
  border-top: 1px solid rgba(231, 196, 137, .32);
  height: 100%;
}
.bb-when__marker {
  font-family: var(--bb-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bb-gold-lit);
  margin: 0 0 16px;
}
.bb-when h3 {
  font-size: 27px;
  margin: 0 0 12px;
  font-variation-settings: "SOFT" 28, "WONK" 1, "opsz" 72;
}
.bb-when p { font-size: 16px; line-height: 1.72; margin: 0; }

/* -------------------------------------------------------------- closing CTA
 * Over a photograph, not a third flat panel. Three dark blocks stacked at the
 * foot of the page read as one undifferentiated blend, so this ends on the work
 * itself: the first dance, which is what the CTA is actually asking for.
 *
 * The image is set here rather than through YOOtheme's section prop so the
 * overlay and the crop stay under our control. Trade-off: not editable in the
 * builder, unlike the gallery and the accordion.
 */
.bb-cta-band {
  position: relative;
  /* A pale wash, not a dark scrim. The previous treatment dropped an opaque
     charcoal layer over a high-key photograph, which read as harsh rather than
     calm. This image is already cream and gold, so it only needs quietening
     enough to carry text. */
  background-image:
    linear-gradient(rgba(250, 248, 244, .74), rgba(250, 248, 244, .74)),
    url("/wp-content/uploads/1SC87841-scaled.jpg");
  background-size: cover;
  background-position: center 55%;
}
.bb-cta-band,
.bb-cta-band p { color: var(--bb-body); }
.bb-cta-band h2 { color: var(--bb-ink); }
.bb-cta-band .bb-eyebrow { color: var(--bb-gold); justify-content: center; }
.bb-cta-band .bb-accent { color: var(--bb-gold); }

/* ----------------------------------------------------------------- evening
 * Timeline, proof and the ask share one dark ground. Hairlines separate them
 * instead of section seams, so the bottom of the page reads as one continuous
 * evening rather than three stacked blocks with overlapping glows.
 */
.bb-evening__proof {
  margin-top: 78px;
  padding-top: 64px;
  border-top: 1px solid rgba(224, 192, 138, .18);
}
.bb-evening__ask {
  margin-top: 74px;
  padding-top: 60px;
  border-top: 1px solid rgba(224, 192, 138, .18);
}

/* ------------------------------------------------------ sticky mobile enquiry
 * On a phone the page runs ~8,900px with exactly two enquiry points: the hero
 * and the closing CTA. That left 82% of the page — about nine screens — with no
 * way to act. This bar covers that stretch and retires at both ends, so it never
 * competes with a real CTA that is already on screen.
 *
 * Desktop keeps both CTAs in reach without it, so it is mobile-only.
 */
.bb-mcta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 99999;
  display: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid rgba(38, 38, 38, .12);
  box-shadow: 0 -6px 22px rgba(38, 38, 38, .09);
  transform: translateY(110%);
  transition: transform 260ms var(--bb-ease);
}
.bb-mcta__btn {
  display: block;
  text-align: center;
  background: var(--bb-plum);
  color: var(--bb-ink);
  font-family: var(--bb-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 52px;
  text-decoration: none;
}
.bb-mcta__btn:hover, .bb-mcta__btn:focus { color: var(--bb-ink); text-decoration: none; }
.bb-mcta--on { transform: none; }

@media (max-width: 768px) {
  .bb-mcta { display: block; }
  /* Lift the shop launcher clear of the bar rather than letting them collide.
     Scoped to the body flag, so it returns the moment the bar retires. */
  body.bb-mcta-on #booqable-launcher { bottom: 88px !important; transition: bottom 260ms var(--bb-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .bb-mcta { transition: none; }
  body.bb-mcta-on #booqable-launcher { transition: none; }
}

/* ------------------------------------------------------------ work gallery
 * YOOtheme ships these captions as a hover-reveal: .uk-transition-fade sits at
 * opacity 0 and only appears on :hover. On a touch screen there is no hover, so
 * every caption was unreachable on mobile -- which is most of this audience.
 *
 * So the caption is made permanent and moved to the foot of each frame, over a
 * gradient scrim. The scrim is what makes it work: .uk-light already sets the
 * text white, which is right over the dark frames and unreadable over the bright
 * ones (the coral arch on grass, the white trestle table) without something
 * behind it.
 */
/* Only the caption becomes permanent. The sibling .uk-overlay-primary is a
   full-frame rgba(38,38,38,.8) dimmer; making every .uk-transition-fade
   permanent turned that on too and greyed out all six photographs. It stays
   hover-only, where it belongs. */
.bb-work .el-item .uk-position-center.uk-transition-fade { opacity: 1; }
.bb-work .el-item .uk-position-center {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
  padding: 64px 18px 16px;
  background: linear-gradient(rgba(38, 38, 38, 0), rgba(38, 38, 38, .86));
  text-align: left;
}
.bb-work .el-item .uk-overlay { padding: 0; }
.bb-work .el-item .el-title {
  color: #fff;
  font-family: var(--bb-serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: normal;
  margin: 0;
}
.bb-work .el-item .el-meta {
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  margin: 4px 0 0;
}

/* -------------------------------------------------------------- testimonial */
.bb-testimonial { text-align: center; margin: 0; }
.bb-testimonial blockquote {
  margin: 0 auto;
  max-width: 30em;
  font-family: var(--bb-serif);
  font-style: italic;
  /* Was a 40px display quote in white. On this light ground the white was
     effectively invisible, and the size made it shout. Now it sits at reading
     scale in the body ink: present, quiet, and actually legible. */
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.62;
  color: var(--bb-body);
}
.bb-testimonial figcaption {
  margin-top: 22px;
  font-family: var(--bb-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* gold-lit is a dark-ground tone; on cream it disappeared. --bb-gold itself
     only reaches 4.31:1 at this size, so the caption uses a darker step to
     clear AA for small text. */
  color: #7A6038;
}

/* -------------------------------------------------------------- closing CTA */
.bb-cta h2 { color: #fff; }
.bb-cta__aside {
  border-left: 1px solid rgba(231, 196, 137, .3);
  padding-left: 34px;
}
.bb-cta__aside p {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--bb-gold-lit);
}
.bb-cta__aside strong {
  display: block;
  font-family: var(--bb-serif);
  font-size: 21px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 22px;
  font-variation-settings: "SOFT" 28, "WONK" 1, "opsz" 72;
}

/* ------------------------------------------------------------- breakpoints */
@media (max-width: 960px) {
  .bb-hero .uk-grid > .bb-hero__copy { padding: 58px 28px; }
  .bb-hero .bb-eyebrow { font-size: 11px; letter-spacing: .12em; margin-bottom: 16px; }
  .bb-hero__media { min-height: 360px; }
  .bb-panels .uk-grid > .bb-panel { padding: 54px 28px; }
  .bb-cta__aside { border-left: 0; border-top: 1px solid rgba(231, 196, 137, .3); padding: 30px 0 0; margin-top: 34px; }
}

@media (max-width: 640px) {
  .bb-awards__item { height: 76px; padding: 10px 14px; }
  /* Set the variable, not `gap`, so the loop offset stays in step. */
  .bb-awards { --bb-gap: 12px; animation-duration: 55s; }
  .bb-index a { flex-wrap: wrap; gap: 6px 14px; padding: 17px 4px; }
  .bb-index span { flex-basis: 100%; }
  .bb-frame::after { inset: 12px; }
}

/* --------------------------------------------------------------- a11y floor */
.bb-sec a:focus-visible,
.bb-sec .uk-button:focus-visible {
  outline: 2px solid var(--bb-gold);
  outline-offset: 3px;
}
.bb-sec--night a:focus-visible { outline-color: var(--bb-gold-lit); }

@media (prefers-reduced-motion: reduce) {
  .bb-awards {
    animation: none;
    width: auto;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .bb-awards-viewport { overflow: visible; }
  .bb-awards__set--clone { display: none; }
  .bb-hero__copy > *,
  .bb-hero__media .uk-panel { animation: none; }
  .bb-sec *, .bb-sec *::after { transition: none !important; }
}

/* ===================================================== SERVICE PAGES (shared)
 * Added for the service pages, starting with Wedding Packages. Everything here
 * is new and scoped to new class names, so the homepage's rendering is
 * unaffected even though it inlines this file.
 */

/* Secondary button on a dark ground. The base rule sets body-grey text, which
   on #262626 is dark-on-dark and effectively invisible. */
.bb-sec.bb-sec--night .uk-button.uk-button-default {
  /* 0-4-0: the variant's `.bb-sec .uk-button.uk-button-default` is 0-3-0 and
     is appended after this file, so a tie would lose. */
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.bb-sec.bb-sec--night .uk-button.uk-button-default:hover {
  color: var(--bb-ink);
  background: #fff;
  border-color: #fff;
}

/* In-page anchors land below the header rather than under it. */
.bb-anchor { display: block; scroll-margin-top: 110px; }

.bb-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------ package cards
 * Built as one HTML grid rather than three builder columns: equal heights come
 * free from CSS grid, and it sidesteps UIkit's `.uk-grid > *` padding reset
 * that ate the hero's padding on the homepage.
 */
.bb-pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.bb-pkg {
  display: flex;
  flex-direction: column;
  background: var(--bb-blush);
  padding: 40px 34px 34px;
}
.bb-pkg__guests {
  font-family: var(--bb-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bb-gold);
  margin: 0 0 10px;
}
.bb-sec .bb-pkg h3 {
  font-family: var(--bb-serif);
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--bb-ink);
  margin: 0 0 14px;
}
.bb-sec .bb-pkg .bb-pkg__for {
  font-size: 15px;
  line-height: 1.65;
  color: var(--bb-body);
  margin: 0 0 26px;
}
.bb-pkg__price {
  margin: 0 0 4px;
  font-family: var(--bb-serif);
  font-size: 40px;
  line-height: 1;
  color: var(--bb-ink);
}
.bb-pkg__price small {
  font-family: var(--bb-sans);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--bb-body);
  margin-right: 6px;
}
.bb-sec .bb-pkg .bb-pkg__basis {
  font-size: 12px;
  color: #6b6b6b;
  margin: 0 0 24px;
}
.bb-pkg__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(38, 38, 38, .12);
}
.bb-pkg__list li {
  position: relative;
  padding: 0 0 0 26px;
  margin: 0 0 11px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bb-body);
}
.bb-pkg__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--bb-gold);
  border-bottom: 1.5px solid var(--bb-gold);
  transform: rotate(-45deg);
}
.bb-pkg__more { margin-top: auto; }

/* Each card spans the grid's seven rows and adopts them, so the price, the
   list and the link sit on the same line in all three cards however long the
   description runs. Without subgrid, cards fall back to the flex column above. */
@supports (grid-template-rows: subgrid) {
  .bb-pkg {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

@media (max-width: 959px) {
  .bb-pkg-grid { grid-template-columns: 1fr; max-width: 560px; }
  .bb-pkg { padding: 34px 26px 28px; }
}

/* ------------------------------------------------------------------ tables */
.bb-table-wrap {
  margin-top: 36px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bb-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-family: var(--bb-sans);
  font-size: 15px;
  color: var(--bb-body);
}
.bb-table th, .bb-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(38, 38, 38, .1);
  vertical-align: middle;
}
.bb-table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bb-gold);
  border-bottom-color: rgba(38, 38, 38, .25);
}
.bb-table .bb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-table .bb-mark { text-align: center; white-space: nowrap; }
.bb-table tbody th[scope="row"] { font-weight: 400; color: var(--bb-ink); }
.bb-table .bb-group th {
  font-family: var(--bb-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--bb-ink);
  padding-top: 28px;
  border-bottom-color: rgba(38, 38, 38, .25);
}
.bb-table .bb-yes { color: var(--bb-gold); font-size: 17px; }
.bb-table .bb-no  { color: rgba(38, 38, 38, .3); }
/* The label column stays put while the figures scroll on a phone. */
.bb-table tbody th[scope="row"], .bb-table thead th:first-child {
  position: sticky; left: 0;
  background: var(--bb-table-bg, #fff);
}
.bb-sec--blush { --bb-table-bg: var(--bb-blush); }
.bb-sec--cream { --bb-table-bg: var(--bb-cream); }
.bb-table--narrow { max-width: 760px; }
.bb-note { font-size: 13px; color: #6b6b6b; margin-top: 18px; }

/* --------------------------------------------------------------------- FAQ */
.bb-faq { max-width: 780px; margin-top: 28px; }
.bb-faq details { border-bottom: 1px solid rgba(38, 38, 38, .14); }
.bb-faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 22px 48px 22px 0;
  font-family: var(--bb-serif);
  font-size: 20px;
  line-height: 1.35;
  color: var(--bb-ink);
}
.bb-faq summary::-webkit-details-marker { display: none; }
.bb-faq summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--bb-sans);
  font-size: 26px;
  font-weight: 300;
  color: var(--bb-plum);
  transition: transform 220ms var(--bb-ease);
}
.bb-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.bb-faq summary:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 3px; }
.bb-sec .bb-faq p { margin: -6px 0 24px; max-width: 62ch; }
@media (prefers-reduced-motion: reduce) {
  .bb-faq summary::after { transition: none; }
}

/* Hero photograph as a real <img> (service pages). Fills the column the way the
   homepage's background image does, but as an element it can carry alt text, a
   srcset and an eager, high-priority load. */
.bb-hero__media--img { position: relative; overflow: hidden; }
.bb-hero__media--img .bb-hero__img,
.bb-hero__media--img picture { position: absolute; inset: 0; margin: 0; }
.bb-hero__media--img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Links inside tables. Without this they inherit the row's ink colour and no
   underline, so they are indistinguishable from the plain labels around them. */
.bb-table a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--bb-plum);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.bb-table a:hover { color: var(--bb-gold); text-decoration-color: currentColor; }
.bb-table a:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }

/* ======================================================= PACKAGE BUILDER
 * Replaces the "Customise Your Package Here" link to a 2023 PDF. A real form:
 * it works without JavaScript; the script adds live prices and the estimate.
 */
.bb-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
  margin-top: 44px;
}
/* UIkit only applies border-box to its own classed controls; a plain input at
   width:100% then adds its padding and border on top and overflows the column. */
.bb-builder, .bb-builder * { box-sizing: border-box; }
.bb-builder fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bb-step { margin-bottom: 44px !important; }
.bb-step > legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  margin-bottom: 18px;
  font-family: var(--bb-serif);
  font-size: 24px;
  color: var(--bb-ink);
}
.bb-step__n {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--bb-plum);
  border-radius: 50%;
  font-family: var(--bb-sans);
  font-size: 13px;
  color: var(--bb-gold);
}
.bb-sec .bb-builder .bb-step__hint { font-size: 14px; line-height: 1.6; color: #5a5a5a; margin: 12px 0 0; }

.bb-field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--bb-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bb-gold);
}
/* 16px so iOS Safari does not zoom the page when the field is focused. */
.bb-field input {
  height: 52px;
  min-width: 260px;
  padding: 0 14px;
  border: 1px solid rgba(38, 38, 38, .28);
  border-radius: 0;
  background: #fff;
  font: 16px var(--bb-sans);
  color: var(--bb-ink);
}
.bb-field input:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }

/* Collection choices: radio inputs styled as selectable cards. */
.bb-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bb-choice { position: relative; display: block; cursor: pointer; }
.bb-choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bb-choice__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 20px 20px 18px;
  border: 1px solid rgba(38, 38, 38, .18);
  background: #fff;
  transition: border-color 160ms var(--bb-ease), background 160ms var(--bb-ease);
}
.bb-choice:hover .bb-choice__body { border-color: rgba(38, 38, 38, .45); }
.bb-choice input:checked + .bb-choice__body {
  border-color: var(--bb-ink);
  box-shadow: inset 0 0 0 1px var(--bb-ink);
  background: var(--bb-blush);
}
.bb-choice input:focus-visible + .bb-choice__body { outline: 2px solid var(--bb-gold); outline-offset: 3px; }
.bb-choice__name { font-family: var(--bb-serif); font-size: 20px; color: var(--bb-ink); }
.bb-choice__meta { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bb-gold); }
.bb-choice__price { margin-top: 10px; font-family: var(--bb-serif); font-size: 22px; color: var(--bb-ink); }

/* Extras: rows. Groups are styled further down, as collapsible <details>. */
.bb-extra {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(38, 38, 38, .1);
}
.bb-extra label { display: flex; flex-direction: column; flex: 1; cursor: pointer; }
.bb-extra__name { font-size: 15px; color: var(--bb-ink); }
.bb-extra__price { font-size: 13px; color: #5a5a5a; }
/* Checkboxes sit at the right, in the same column as the steppers, so every
   extra's control lines up. Visual order only: the DOM keeps input then label,
   so screen readers are unaffected, and the whole row stays clickable. */
.bb-extra input[type="checkbox"] { order: 2; width: 22px; height: 22px; margin: 0 11px; accent-color: var(--bb-ink); flex: none; }
.bb-qty { display: inline-flex; flex: none; border: 1px solid rgba(38, 38, 38, .25); }
.bb-qty__btn {
  width: 44px; height: 44px;
  border: 0;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  color: var(--bb-ink);
  cursor: pointer;
}
.bb-qty__btn:hover { background: var(--bb-blush); }
.bb-qty__btn:focus-visible, .bb-qty input:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: -2px; }
.bb-qty input {
  width: 52px;
  border: 0;
  border-left: 1px solid rgba(38, 38, 38, .15);
  border-right: 1px solid rgba(38, 38, 38, .15);
  text-align: center;
  font: 16px var(--bb-sans);
  color: var(--bb-ink);
  -moz-appearance: textfield;
}
.bb-qty input::-webkit-outer-spin-button,
.bb-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Summary: the dark panel is the section's anchor; it stays in view on desktop. */
.bb-summary {
  position: sticky;
  top: 110px;
  padding: 32px 30px 30px;
  background: var(--bb-ink);
  color: rgba(255, 255, 255, .82);
}
.bb-sec .bb-summary h3 {
  margin: 0 0 20px;
  font-family: var(--bb-serif);
  font-size: 24px;
  font-weight: 400;
  color: #fff;
}
.bb-summary__lines { margin: 0; }
.bb-summary__lines dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bb-gold-lit);
}
.bb-summary__lines dd { margin: 4px 0 16px; font-size: 15px; color: #fff; }
.bb-sec .bb-summary .bb-summary__total {
  margin: 6px 0 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.bb-summary__total span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bb-gold-lit);
}
.bb-summary__total strong {
  display: block;
  margin-top: 6px;
  font-family: var(--bb-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
}
.bb-sec .bb-summary .bb-summary__note { margin: 0 0 22px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.bb-sec .bb-summary .bb-summary__send { width: 100%; }

@media (max-width: 959px) {
  .bb-builder { grid-template-columns: 1fr; gap: 8px; }
  .bb-choices { grid-template-columns: 1fr; }
  /* In the flow on mobile, not docked: the sticky enquiry bar already owns the
     foot of the screen, and two docked bars would stack. */
  .bb-summary { position: static; }
  .bb-field input { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-choice__body { transition: none; }
}

/* Collapsible extras groups (the full hire price list is 34 items). */
.bb-extras { margin-top: 12px; border-top: 1px solid rgba(38, 38, 38, .14); }
.bb-extras:last-of-type { border-bottom: 1px solid rgba(38, 38, 38, .14); }
.bb-extras > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 16px 40px 16px 0;
  position: relative;
  list-style: none;
  cursor: pointer;
}
.bb-extras > summary::-webkit-details-marker { display: none; }
.bb-extras > summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font: 300 26px var(--bb-sans);
  color: var(--bb-plum);
  transition: transform 200ms var(--bb-ease);
}
.bb-extras[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.bb-extras > summary:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 3px; }
.bb-extras__name { font-family: var(--bb-serif); font-size: 19px; color: var(--bb-ink); }
.bb-extras__meta { font-size: 13px; color: #5a5a5a; white-space: nowrap; }
.bb-extras__count { color: var(--bb-gold); font-weight: 600; }
.bb-extras > fieldset { padding-bottom: 8px !important; }
.bb-extra__detail { font-size: 13px; line-height: 1.45; color: #5a5a5a; }
@media (prefers-reduced-motion: reduce) { .bb-extras > summary::after { transition: none; } }

/* Introduction (service pages): the opening paragraph stands as a serif
   statement on the left; the rest sits beside it at body size. */
.bb-sec .bb-intro p { margin: 0 0 1.1em; }
.bb-sec .bb-intro p:last-child { margin-bottom: 0; }
.bb-sec .bb-intro--lead p {
  font-family: var(--bb-serif);
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.45;
  color: var(--bb-ink);
}

/* Package cards sit on blush now that the intro above them is white. A blush
   card on a blush ground disappears, so cards turn white there. */
.bb-sec--blush .bb-pkg { background: #fff; }
/* Home (refresh) */
:root {
  --bb-cream:    #FFFFFF;   /* the site's own section ground */
  --bb-blush:    #F7F4EF;   /* alternating band, the tan at low saturation */
  --bb-plum:     #BFA279;   /* the site's existing primary button */
  --bb-ink:      #262626;   /* the site's existing dark/footer ground */
  --bb-gold:     #8A6F45;   /* small accent text: AA on white, #BFA279 is not */
  --bb-gold-lit: #D9C4A3;   /* the same accent, on dark */
  --bb-rose:     #9C7F55;   /* display italic. #A98D64 is 2.87:1 on the blush
                              ground, just under the 3:1 large-text bar. */
  --bb-body:     #3C3C3C;   /* the site's existing body colour */
  --bb-serif: Lora, Georgia, "Times New Roman", serif;
  --bb-sans:  "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
.bb-sec h1, .bb-sec h2, .bb-sec h3, .bb-sec h4,
.bb-accent, .bb-awards-label, .bb-index strong,
.bb-pullquote, .bb-testimonial blockquote, .bb-when h3, .bb-cta__aside strong
{ font-variation-settings: normal; }
.bb-sec h1, .bb-sec h2, .bb-sec h3, .bb-sec h4 { letter-spacing: normal; }

/* The dark service panel takes the site's dark ground, not the accent: a full
   half-width panel of #BFA279 would be far too much tan. */
.bb-panel--plum { background: var(--bb-ink); }

/* Ink on tan is about 7:1. The live site sets white on tan, which is ~2.2:1 and
   fails AA, so this keeps the colour and fixes the contrast. */
.bb-sec .uk-button.uk-button-primary { color: var(--bb-ink); }
.bb-sec .uk-button.uk-button-primary:hover { background: #A98D64; color: var(--bb-ink); }
.bb-sec--night .uk-button.uk-button-primary:hover { background: #fff; }
.bb-sec .uk-button.uk-button-default { color: var(--bb-body); border-color: rgba(60,60,60,.35); }
.bb-sec .uk-button.uk-button-default:hover { border-color: var(--bb-ink); background: rgba(60,60,60,.05); color: var(--bb-ink); }
.bb-link { color: var(--bb-gold); }