/* ---- tokens.css ---- */
/* ============================================================================
   TOKENS — Bonnie Glen Pavilion.

   The colours, fonts and the few shared values the stylesheets use, measured
   on the original site (2026-10-13). Sizes are written in the component files
   as the original's own px values, not as tokens.
   ========================================================================= */

:root {
  /* ---- brand ----------------------------------------------------------
     Gold is the nav band and the gold buttons. Blush is the accent: links,
     hovers, the topbar phone number, the footer email. */
  --gold: #d4af37;
  --gold-dark: #b8942a;
  --blush: #e9c0a4;

  /* ---- neutrals ------------------------------------------------------- */
  --ink: #000000;          /* headings, topbar address, footer phone */
  --body: #999999;         /* body copy — the dominant text colour */
  --white: #ffffff;
  --off-white: #f9f9f9;
  --line: #e5e5e5;
  --rule: #cccccc;         /* footer "back to top" */

  /* ---- type -----------------------------------------------------------
     Prata for headings (400 only — anything heavier is synthesised, which
     the original relies on). PT Serif for everything else. */
  --font-heading: "Prata", Georgia, "Times New Roman", serif;
  --font: "PT Serif", Georgia, "Times New Roman", serif;
  --fs-small: 0.875rem;    /* 14px */
  --ls-btn: 2px;

  /* ---- chrome --------------------------------------------------------- */
  --radius-pill: 35px;     /* measured on the primary button */
  --transition: 0.2s ease-in-out;   /* measured on buttons */
}

/* ---- base/fonts.css ---- */
/* Self-hosted Prata + PT Serif (latin, latin-ext).
   Self-hosting keeps the CSP free of a font CDN and means the site cannot
   break because a third party changed something. */

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/pt-serif-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/pt-serif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/pt-serif-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/pt-serif-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/prata-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* PT Serif italics and Abril Fatface: the original loads both from Google
   Fonts (the theme asks for PT Serif 400i/700i; WPBakery asks for Abril Fatface
   wherever a custom heading uses it: one post and the gallery page headings). */

@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/pt-serif-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/pt-serif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/pt-serif-700-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/pt-serif-700-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/abril-fatface-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato, as the original's calendar plugin (Calendarize-it) ships it: regular
   and bold, from the plugin's own folder. (Its "light" face is declared with
   font-weight: lighter, which is not a valid descriptor, so browsers never use
   it; text the plugin sets at weight 300 renders in the regular face.) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lato-reg.woff') format('woff');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/lato-bol.woff') format('woff');
}

/* Anton: the original's "Rentals" and "Related Services" headings on
   /services-2/ (Google Fonts, SIL Open Font License), latin only. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- base/reset.css ---- */
/* ---- reset & document defaults ------------------------------------------
   The original's defaults (Bootstrap 3 + the Grenda theme), measured:
   body PT Serif 16px/30px #999; links #000, #e9c0a4 on hover and focus;
   paragraphs and lists 13px apart; images inline and middle-aligned.
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

a { color: var(--ink); text-decoration: none; background-color: transparent; }
a:hover,
a:focus { color: var(--blush); text-decoration: none; }

p { margin: 0 0 13px; }
ul, ol { margin-top: 0; margin-bottom: 13px; }
ul ul, ul ol, ol ul, ol ol { margin-bottom: 0; }
b, strong { font-weight: 700; color: #000; }   /* the theme sets bold text black everywhere */
hr { margin: 26px 0; border: 0; border-top: 1px solid #eee; }
figure { margin: 0; }

/* Keyboard focus. The original shows none anywhere; this appears only for
   keyboard users, so it changes nothing a mouse or touch visitor sees. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 100000;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
}
.skip-link:focus { top: 12px; color: var(--white); }

/* ---- base/typography.css ---- */
/* ---- typography ----------------------------------------------------------
   The original's heading defaults: Prata at weight 700. Prata ships 400 only,
   so the browser synthesises the bold, and the original depends on that look;
   the rebuild does the same. Sizes are fixed px, as on the original.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 13px 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
h1 { font-size: 45px; }
h2 { font-size: 34px; }
h3 { font-size: 28px; }
h4 { font-size: 23px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

h1 a, h2 a, h3 a, h4 a, h5 a { color: var(--ink); }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover { color: var(--blush); }

.text-center { text-align: center; }
.text-right { text-align: right; }

/* The original's heading reveal (Grenda): see src/scripts/50-reveal.js. */
.js .widget-text-heading .widget-heading,
.js .widget-text-heading .subtitle,
.js .page-banner .bread-title,
.js .page-banner .breadcrumb {
  opacity: 0;
  transition: opacity 1.2s 0s, transform 1.2s 0s;
  transform-origin: 0 0;
  will-change: opacity, transform;
}
.js .widget-text-heading .widget-heading,
.js .page-banner .bread-title { transform: translate3d(0, -10px, 200px); }
.js .widget-text-heading .subtitle,
.js .page-banner .breadcrumb { transform: translate3d(0, 10px, 200px); }
.js .heading-box .widget-heading,
.js .heading-box .subtitle,
.js .heading-box .bread-title,
.js .heading-box .breadcrumb {
  opacity: 1;
  transform: translateZ(0);
}
.js .heading-box .widget-heading,
.js .heading-box .bread-title { transition: opacity 1s 0.2s, transform 1s 0.2s; }
.js .heading-box .subtitle,
.js .heading-box .breadcrumb { transition: opacity 1s 0.4s, transform 1s 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .js .widget-text-heading .widget-heading,
  .js .widget-text-heading .subtitle,
  .js .page-banner .bread-title,
  .js .page-banner .breadcrumb { opacity: 1; transform: none; transition: none; }
}

/* Colours the original's editor set inline on text runs (style="color:…"). The
   CSP here allows no style attributes, so they are classes. */
.c-ink { color: var(--ink); }
.c-blue { color: #0000ff; }
.c-blue2 { color: #3366ff; }
.c-red { color: #ff0000; }
.c-green { color: #008000; }
/* Departure: the original's editor coloured 85 runs of post text white, on a
   white page, so visitors cannot read them (they predate the current theme).
   Here they take the surrounding text colour instead. */
.c-white { color: inherit; }
.ta-center { text-align: center; }
.ta-left { text-align: left; }
.fs-16 { font-size: 16px; }
.ff-abril { font-family: "Abril Fatface", serif; }
.ff-anton { font-family: "Anton", sans-serif; }
.fw-400 { font-weight: 400; }
.h1-size { font-size: 45px; }

/* The original's large italic lines (home page welcome, /menus/): a 36/60
   italic span in black. */
.lead-italic { font-size: 36px; font-style: italic; font-weight: 400; line-height: 60px; color: #000; }
.menu-item-title { margin: 0 0 13px; font-size: 28px; }

/* ---- base/layout.css ---- */
/* ---- layout --------------------------------------------------------------
   The original's container: full width with 20px padding, then fixed widths
   of 768px from 768, 1000px from 992 and 1280px from 1200.

   One departure: the original's container is wider than the window between
   992 and 999px (1000px) and between 1200 and 1279px (1280px), so it starts at
   the left edge and the theme's overflow-x: hidden cuts off its right side, up
   to 80px of it (measured at 1200: twelve elements end at x = 1280). Here
   max-width: 100% keeps it inside the window in those two ranges; at every
   other width it changes nothing.
   -------------------------------------------------------------------------- */

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 100%;
}
.container::before,
.container::after { content: " "; display: table; }
.container::after { clear: both; }
@media (min-width: 768px)  { .container { width: 768px; } }
@media (min-width: 992px)  { .container { width: 1000px; } }
@media (min-width: 1200px) { .container { width: 1280px; } }

/* ---- base/vc.css ---- */
/* ---- WPBakery rows and columns -------------------------------------------
   Every page of the original is WPBakery rows. These are its layout rules,
   so a page here can be written with the same structure and land on the same
   pixels:

     .vc-row         margin 0 -15px        (columns carry 15px each side)
     .vc-col         a column; .vc-col-inner carries the 15px padding
     widths          sm from 768px, md from 992px, lg from 1200px
     .vc-el          a content element: 35px below it (wpb_content_element)
     .vc-text        a text block: its last child has no bottom margin
   -------------------------------------------------------------------------- */

.vc-row { margin-left: -15px; margin-right: -15px; }
.vc-row::before,
.vc-row::after { content: " "; display: table; }
.vc-row::after { clear: both; }

.vc-col { position: relative; float: left; width: 100%; min-height: 1px; }
.vc-col-inner { padding-left: 15px; padding-right: 15px; }
.vc-col-inner::before,
.vc-col-inner::after { content: " "; display: table; }
/* Column padding the page's editor overrode (vc_custom_* rules on the
   original): none, or 20px a side. */
.vc-col-inner--flush { padding-left: 0; padding-right: 0; }
.vc-col-inner--20 { padding-left: 20px; padding-right: 20px; }
.vc-col-inner::after { clear: both; }

@media (min-width: 768px) {
  .vc-sm-2  { width: 16.66666667%; }
  .vc-sm-3  { width: 25%; }
  .vc-sm-4  { width: 33.33333333%; }
  .vc-sm-6  { width: 50%; }
  .vc-sm-8  { width: 66.66666667%; }
  .vc-sm-9  { width: 75%; }
  .vc-sm-10 { width: 83.33333333%; }
  .vc-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
  .vc-md-offset-1 { margin-left: 8.33333333%; }
  .vc-md-offset-2 { margin-left: 16.66666667%; }
  .vc-md-2  { width: 16.66666667%; }
  .vc-md-3  { width: 25%; }
  .vc-md-4  { width: 33.33333333%; }
  .vc-md-6  { width: 50%; }
  .vc-md-8  { width: 66.66666667%; }
  .vc-md-10 { width: 83.33333333%; }
  .vc-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
  .vc-lg-offset-1 { margin-left: 8.33333333%; }
  .vc-lg-offset-2 { margin-left: 16.66666667%; }
  .vc-lg-offset-6 { margin-left: 50%; }
  .vc-lg-2  { width: 16.66666667%; }
  .vc-lg-3  { width: 25%; }
  .vc-lg-4  { width: 33.33333333%; }
  .vc-lg-6  { width: 50%; }
  .vc-lg-8  { width: 66.66666667%; }
  .vc-lg-10 { width: 83.33333333%; }
  .vc-lg-12 { width: 100%; }
}

.vc-el { margin-bottom: 35px; }
.vc-text > :last-child { margin-bottom: 0; }

/* An inner row that keeps its columns' edges (WPBakery's no-gap rows). */
.vc-row--nogutter { margin-left: 0; margin-right: 0; }

/* Full-bleed row (WPBakery "stretch row"). WPBakery clips these rows
   (overflow: hidden), so a grid's negative gutter margin inside one does not
   widen the page. */
.vc-stretch {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
/* ...padded back in so its columns line up with the page, as a stretched row
   that is not "stretch content" is. */
.vc-stretch--pad {
  padding-left: calc(50vw - 50% - 15px);
  padding-right: calc(50vw - 50% - 15px);
}

.vc-space { display: block; }
/* WPBakery's empty space element, by its height in px (style="height: 30px" on
   the original; the CSP here allows no style attributes). */
.vc-space-10 { height: 10px; }
.vc-space-20 { height: 20px; }
.vc-space-30 { height: 30px; }
.vc-space-40 { height: 40px; }
.vc-space-43 { height: 43px; }
.vc-space-45 { height: 45px; }
.vc-space-50 { height: 50px; }
.vc-space-60 { height: 60px; }
.vc-space-70 { height: 70px; }
.vc-space-75 { height: 75px; }
.vc-space-80 { height: 80px; }
.vc-space-100 { height: 100px; }
.vc-space-120 { height: 120px; }
.vc-space-150 { height: 150px; }

/* WPBakery's custom heading, as the original sets it on the gallery pages:
   Abril Fatface 34/51, centred, black (its links too, hovered or not). The
   Prata variant is the heading on /page-gallery/. */
.vc-heading {
  margin: 0 0 6.25px;
  font-family: "Abril Fatface", serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 51px;
  text-align: center;
  color: #000;
}
.vc-heading a,
.vc-heading a:hover { color: inherit; }
.vc-heading--prata { font-family: var(--font-heading); font-size: 36px; line-height: 70px; }

/* A WPBakery custom heading as the page sets it: the theme's heading, its own
   6.25px below, and whatever font, size and alignment the editor chose, as
   utility classes (ff-*, fw-*, ta-*). */
.vc-ch { margin: 0 0 6.25px; }

/* Bootstrap's hidden-xs + hidden-sm, as WPBakery spacers use them: hidden
   below 992px. Last in the file, so it wins over .vc-space's display. */
@media (max-width: 991px) {
  .hidden-sm-down { display: none; }
}
/* hidden-xs alone (below 768px), and hidden-xs + sm + md (below 1200px). */
@media (max-width: 767px) {
  .hidden-xs { display: none; }
}
@media (max-width: 1199px) {
  .hidden-md-down { display: none; }
}

/* ---- components/button.css ---- */
/* ---- buttons -------------------------------------------------------------
   The contact form's send button, sized as the original's "SETUP AN
   APPOINTMENT" button was measured:
   294x66, padding 24px 50px, border-radius 35px, background #D4AF37,
   PT Serif 12px/700, 2px tracking, uppercase, transition .2s ease-in-out.

   The hover is a lift: the original's `.btn-primary:hover` sets
   `transform: translateY(-5px)`. No shadow, no colour change on the primary.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 24px 50px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 0.75rem;         /* 12px */
  font-weight: 700;
  /* 24px padding + a 16px line box + the 1px borders = the original's
     measured 66px. */
  line-height: 1.3333;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}

.btn:hover,
.btn:focus-visible { transform: translateY(-5px); }

.btn--primary {
  background: var(--gold);
  color: var(--white);
}
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--gold-dark); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:focus-visible { transform: none; }
}

/* ---- components/header.css ---- */
/* ---- header --------------------------------------------------------------
   The original's two headers, value for value (Grenda theme, measured in
   Chrome on bonnieglenpavilion.com, 2026-10-13).

   >= 992px  the desktop header: a white top row (address | logo | call us),
             then a 73px gold band with a white bump under the logo and the
             menu in two centred groups.
   <  992px  the phone/tablet header: a white bar with the menu button on the
             left and the square logo at its natural size (312px on a 390px
             phone, 512px at 768). No gold band, no phone number: that is the
             original.

   Breakpoints are the original's: 992 (headers swap), 1199/1200 (spacing
   tightens below), 768 (container).
   -------------------------------------------------------------------------- */

.icon { display: inline-block; width: auto; height: 1em; fill: currentColor; vertical-align: -0.125em; }

/* ---- phone / tablet header ---------------------------------------------- */

.topbar-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}
.topbar-mobile .nav-toggle {
  display: inline-block;
  padding: 12px 20px;
  margin: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--body);
  font-size: 20px;
  line-height: 26px;
  cursor: pointer;
  /* The original's button is 59px wide in a 48px slot, so it overlaps the logo
     by 11px; flex: none keeps that. */
  flex: none;
  width: 59px;
  margin-right: -11px;
}
.topbar-mobile .nav-toggle .icon { width: calc(1536em / 1792); height: 1em; vertical-align: -3px; }
.topbar-mobile .nav-toggle:hover { color: var(--blush); }
.topbar-mobile .logo { display: block; flex: 0 1 auto; min-width: 0; }
.topbar-mobile .logo img { display: block; max-width: 100%; height: auto; }

.site-header { display: none; }

@media (min-width: 992px) {
  .topbar-mobile { display: none; }
  .site-header { display: block; position: relative; z-index: 100; }
}

/* ---- desktop: top row ---------------------------------------------------- */

.header-top {
  position: relative;
  padding: 35px 0 25px;
  margin-bottom: -2px;
  background: var(--white);
}
@media (max-width: 1199px) {
  .header-top > .container { padding: 0; }
}

.header-top-inner {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  line-height: 24px;
  color: var(--ink);
}
.ht-col { width: 33.3333%; flex: none; }
.ht-col--logo { text-align: center; }
.ht-col--logo .logo { display: inline; }
.ht-col--logo img { display: inline; max-width: 100%; height: auto; vertical-align: middle; }

.header-info-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-info-wrapper > * { flex: 1 1 0%; margin: 0; padding: 0 5px; }

.header-address,
.header-call { position: relative; overflow: hidden; }
.header-call { text-align: right; }
.header-call .title { display: block; color: var(--body); }
.header-call .phone { display: block; font-size: 18px; color: var(--blush); }
.header-call .phone:hover,
.header-call .phone:focus { color: var(--blush); }

@media (min-width: 1199px) {
  .header-right > :first-child { padding: 0 44px 0 0; }
  .header-right > :last-child { padding: 0 0 0 44px; }
  .header-left > .header-call { padding: 0 60px 0 20px; }

  /* The short grey rule after the address and after the phone: a full-width
     line starting 30px before the box's edge, clipped by overflow: hidden. */
  .header-address::after,
  .header-call::after {
    content: "";
    position: absolute;
    left: calc(100% - 30px);
    bottom: 17px;
    width: 100%;
    height: 1px;
    background: var(--line);
    z-index: 0;
  }
}

/* ---- desktop: gold band -------------------------------------------------- */

.header-menu { background: var(--gold); }

/* The white bump that hangs from the top of the band under the logo. Its box
   is 34px (an inline SVG in a 30px line) and the -33px margin lets the menu
   ride up over it, so the band measures 73px. */
.header-image {
  height: 34px;
  margin-bottom: -33px;
  text-align: center;
  line-height: 30px;
  fill: var(--white);
}
.header-image svg { vertical-align: baseline; }

.mainmenu { position: relative; }
.mainmenu::after { content: ""; display: table; clear: both; }

.main-nav {
  display: flex;
  justify-content: center;
  width: 40%;
  float: left;
  border: 1px solid transparent;
}
.main-nav--right { float: right; }

.nav-list { margin: 0; padding: 0; list-style: none; }
.nav-list > li {
  display: inline-block;
  position: relative;
  padding: 0 20px;
}
@media (max-width: 1199px) {
  .nav-list > li { padding: 0 10px; }
}
.nav-list > li > a {
  display: block;
  position: relative;
  padding: 22px 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--white);
  transition: all 0.35s ease 0s;
}
.nav-list > li > a:hover,
.nav-list > li > a:focus { color: var(--white); }

/* The original's caret is a zero-width <b> with the Font Awesome angle-down
   positioned after it, 22px from the top of the link. */
.nav-list .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
}
.nav-list .caret .icon {
  position: absolute;
  top: 22px;
  width: calc(1152em / 1792);
  height: 26px;
  font-size: 12px;
  vertical-align: top;
}

/* ---- desktop: drop-down and fly-out --------------------------------------- */

.sub-nav {
  position: absolute;
  top: 100%;
  left: 20px;
  z-index: 999;
  min-width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--white);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 1199px) {
  .nav-list > li > .sub-nav { left: 10px; }
}
.sub-nav .sub-nav { top: 0; left: 100%; }
.sub-nav li { position: relative; display: block; }
.sub-nav a {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.62857;
  color: var(--ink);
  white-space: nowrap;
  transition: all 0.2s linear;
}
.sub-nav li:hover > a,
.sub-nav li:focus-within > a { color: var(--blush); }

.nav-list li:hover > .sub-nav,
.nav-list li:focus-within > .sub-nav {
  opacity: 1;
  visibility: visible;
  transform: translate(0);
}

/* ---- phone menu: the off-canvas panel ------------------------------------ */

.site-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  width: 345px;
  max-width: 80%;
  overflow-y: auto;
  background: var(--white);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  text-align: left;
  transform: translateX(-100%);
  transition: transform 0.3s ease-out, visibility 0s linear 0.3s;
  visibility: hidden;
}
.site-drawer[hidden] { display: block; }
.site-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease-out, visibility 0s linear 0s;
}

.offcanvas-head {
  display: flex;
  align-items: center;
  background: var(--blush);
  color: var(--white);
}
.drawer-close {
  padding: 14px 25px;
  margin: 0;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--white);
  font-size: 16px;
  line-height: 26px;
  cursor: pointer;
}
.drawer-close .icon { width: calc(1408em / 1792); vertical-align: -2px; }
.drawer-close:hover { color: var(--blush); }
.offcanvas-title { padding-left: 20px; line-height: 30px; }

.site-drawer nav { padding: 0 20px; }
.drawer-nav { margin: 7px 0 0; padding: 0; list-style: none; }
/* The panel's padding is cancelled on the list, so rows run edge to edge as
   on the original. */
.drawer-nav { margin-left: -20px; margin-right: -20px; }
.drawer-nav > li { position: relative; display: block; border-bottom: 1px solid var(--line); }
.drawer-nav a {
  display: block;
  padding: 10px 15px;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
}
.drawer-nav a:hover,
.drawer-nav a:focus,
.drawer-nav li.is-active > a { color: var(--blush); }

.drawer-nav .caret {
  position: absolute;
  top: 12px;
  right: 10px;
  z-index: 9;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid var(--line);
  background: #f5f5f5;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.drawer-nav .caret .icon { width: calc(1152em / 1792); vertical-align: -2px; }

.drawer-nav .sub-nav {
  position: relative;
  top: auto;
  left: auto;
  min-width: 0;
  padding: 0 10px 10px 40px;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
.drawer-nav .sub-nav[hidden] { display: none; }
.drawer-nav .sub-nav a { padding-top: 10px; padding-bottom: 10px; font-size: 15px; font-weight: 400; }

/* Tapping beside the open panel closes it. The original draws nothing there,
   so neither does this. */
.nav-backdrop { position: fixed; inset: 0; z-index: 99998; background: transparent; }
.nav-backdrop[hidden] { display: none; }

@media (min-width: 992px) {
  .site-drawer, .nav-backdrop { display: none !important; }
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Fly-out opened to the left when the right would run off the window (see
   20-nav.js); a departure from the original, which lets it be cut off. */
.sub-nav .sub-nav.sub-nav--left { left: auto; right: 100%; }

/* ---- components/page-banner.css ---- */
/* ---- title band ----------------------------------------------------------
   The original's "breadcrumb" band (Grenda's .pbr-breadscrumb), on posts,
   events, archives and some pages (measured on /faq/, 2026-10-13):

     >= 769px   padding 120px 0, margin-bottom 80px  (370px tall at 1440)
     <= 768px   padding 50px 0,  margin-bottom 60px  (191px at 390)
     title      Prata 700, white: 60px/90px from 991px, 34px/51px below
     breadcrumb PT Serif 12px/30px 700, 1px tracking, uppercase, white,
                items separated by a Font Awesome angle-right, 10px each side

   The photo is a fixed background at its natural size, positioned 50% -15px,
   as on the original. Departure: the original's photo is the Grenda theme's
   demo image (a plate of crab legs, bg_breadcrumb.jpg), which is the theme
   vendor's preview art, not the client's. This band uses a photograph of the
   client's own hall instead (assets/img/page-banner.jpg).

   The title is an <h1> here (an <h2> on the original) so every page keeps one
   main heading; it is styled to look identical.
   -------------------------------------------------------------------------- */

.page-banner {
  position: relative;
  margin-bottom: 80px;
  padding: 120px 0;
  text-align: center;
  background: url("/assets/img/page-banner.jpg") 50% -15px / auto no-repeat fixed;
}
@media (max-width: 768px) {
  .page-banner { margin-bottom: 60px; padding: 50px 0; }
}

.page-banner .bread-title {
  margin: 0;
  padding: 0;
  font-size: 34px;
  line-height: 1.5;
  color: var(--white);
}
@media (min-width: 991px) {
  .page-banner .bread-title { font-size: 60px; }
}

.page-banner .breadcrumb {
  position: relative;
  margin: 0;
  padding: 5px 0;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
}
.page-banner .breadcrumb > li { display: inline-block; }
.page-banner .breadcrumb a { color: var(--white); }
.page-banner .breadcrumb a:hover,
.page-banner .breadcrumb a:focus { color: var(--blush); }
.page-banner .breadcrumb .sep {
  display: inline-block;
  padding: 0 10px;
  color: var(--white);
}
.page-banner .breadcrumb .sep .icon { width: calc(640em / 1792); vertical-align: -0.1em; }

/* Pages with neither a title band nor a slider: the original's theme script
   adds 100px under the desktop header (#pbr-masthead.not-breadscrumb). */
@media (min-width: 992px) {
  .no-banner .site-header { padding-bottom: 100px; }
}

/* The services archive and the seven service pages: the original sets its own
   photo here (one of the client's, bonnie-glen-pavilion-elegant-wedding-141),
   scaled to the full width of the window (background-size: 100%). */
.page-banner--services {
  background-image: url("/assets/img/gallery/elegant-decor-wedding/bonnie-glen-pavilion-elegant-wedding-141.jpg");
  background-size: 100%;
}

/* ---- components/heading.css ---- */
/* ---- section headings ---------------------------------------------------------
   The theme's "text heading" widget (Grenda's .widget-text-heading), measured
   on the home page and the footer band (2026-10-13): the heading in Prata
   60/70 (44/50 up to 1199px), the subtitle in 14px capitals with 3px
   tracking, 20px above and below the pair. It fades in as it scrolls into
   view (src/scripts/50-reveal.js, base/typography.css).

     style 1   the home page's sections: inline-block, heading and subtitle
               indented 100px, a 1px blush rule running out to the left of the
               heading's last line; centred, with no rule or indent, up to
               768px
     style 2   the footer band: the subtitle above the heading, which is
               Prata 700 on a 100px line at every width
   ------------------------------------------------------------------------------ */

.widget-text-heading { padding: 20px 0; }
.widget-text-heading .widget-heading {
  margin: 13px 0 7px;
  font-family: var(--font-heading);
  font-size: 60px;
  font-weight: 400;
  line-height: 70px;
  text-transform: none;
  color: #000;
}
@media (max-width: 1199px) {
  .widget-text-heading .widget-heading { font-size: 44px; line-height: 50px; }
}
.widget-text-heading .subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 36px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--body);
}

.widget-text-heading.heading-style1 { display: inline-block; overflow: hidden; }
.heading-style1 .heading-text { position: relative; display: inline-block; }
.heading-style1 .heading-text::after {
  content: "";
  position: absolute;
  right: calc(100% + 30px);
  bottom: 17px;
  z-index: 0;
  width: 100%;
  height: 1px;
  background: var(--blush);
}
.heading-style1 .widget-heading,
.heading-style1 .subtitle { padding-left: 100px; }
@media (max-width: 768px) {
  .widget-text-heading.heading-style1 { display: block; text-align: center; }
  .heading-style1 .heading-text::after { display: none; }
  .heading-style1 .widget-heading,
  .heading-style1 .subtitle { padding-left: 0; }
}

.widget-text-heading.heading-style2 { display: flex; flex-direction: column-reverse; }
.widget-text-heading.heading-style2 .widget-heading { font-size: 60px; font-weight: 700; line-height: 100px; }

.margin-left-20 { margin-left: 20px; }

/* ---- components/home.css ---- */
/* ---- home page -------------------------------------------------------------
   The original's home page, measured 2026-10-13 at 1440/1024/768/390.
   -------------------------------------------------------------------------- */

/* ---- slider -----------------------------------------------------------------
   Slider Revolution, as the original sets it up: full width, a 1920 x 880
   design scaled to the window (660px tall at 1440). Every layer is placed
   from the slider's centre by its design offset times width/1920, and sized
   the same way (rounded to whole pixels, as the slider does), except two
   "learn more" buttons the original marks non-responsive, which keep their
   12px size. Each slide shows for 7.02s and
   fades in over 1.28s; its photo slowly zooms (Ken Burns, 10s, to 115% or
   130%); its layers rise in one after another. Arrows show while the pointer
   is over the slider, from 768px. src/scripts/25-slider.js. Without JS the
   first slide shows, still. */

.rs {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1920 / 880;
  container-type: inline-size;
  background: #000;
}
.rs-slide {
  --u: calc(100cqw / 1920);
  --kb-end: 1.3;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1.28s ease, visibility 0s linear 1.28s;
}
.rs-slide.is-active {
  z-index: 2;
  visibility: visible;
  opacity: 1;
  transition: opacity 1.28s ease;
}
.rs-slide--wedding { --kb-end: 1.15; }
.rs-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.js .rs-slide.is-active .rs-bg { animation: rs-kenburns 10s linear both; }
@keyframes rs-kenburns {
  from { transform: scale(1); }
  to { transform: scale(var(--kb-end)); }
}

.rs-l { position: absolute; z-index: 3; margin: 0; }
.rs-text {
  font-size: round(calc(var(--u) * 32), 1px);
  font-weight: 700;
  line-height: round(calc(var(--u) * 50), 1px);
  white-space: nowrap;
  color: var(--white);
}
.rs-line { display: block; width: round(calc(var(--u) * 100), 1px); height: round(calc(var(--u) * 2), 1px); background: var(--white); }
.rs-word { max-width: none; height: auto; }
.rs-btn {
  font-size: round(calc(var(--u) * 12), 1px);
  line-height: round(calc(var(--u) * 24), 1px);
  padding: round(calc(var(--u) * 18), 1px) round(calc(var(--u) * 55), 1px);
  border: round(calc(var(--u) * 3), 1px) solid #000;
  border-radius: 30px;
  background: var(--blush);
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}
.rs-btn--fixed {
  padding: 18px 55px;
  border-width: 3px;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 1px;
  color: #000;
}
.rs-btn:hover,
.rs-btn:focus { border-width: 0; background: var(--white); color: #000; }

/* Centred layers: the layer's centre at the slider's centre plus its offset. */
.rs-text,
.rs-line,
.rs-btn,
.rs-slide--catering .rs-word,
.rs-slide--party .rs-word { translate: -50% -50%; }

.rs-slide--wedding .rs-word { left: calc(var(--u) * 396); top: calc(var(--u) * 220); width: calc(var(--u) * 1013); }
.rs-slide--wedding .rs-text { left: calc(50% + var(--u) * 15); top: calc(50% + var(--u) * 28); }
.rs-slide--wedding .rs-line { left: calc(50% + var(--u) * -49); top: calc(50% + var(--u) * 85); }
.rs-slide--wedding .rs-btn { left: calc(50% + var(--u) * -43); top: calc(50% + var(--u) * 154); }
@media (max-width: 1023px) {
  .rs-slide--wedding .rs-btn { display: none; }
}

.rs-slide--catering .rs-word { left: calc(50% + var(--u) * -13); top: calc(50% + var(--u) * -76); width: calc(var(--u) * 861); }
.rs-slide--catering .rs-text { left: calc(50% + var(--u) * -10); top: calc(50% + var(--u) * 16); }
.rs-slide--catering .rs-line { left: calc(50% + var(--u) * -49); top: calc(50% + var(--u) * 85); }
.rs-slide--catering .rs-btn { left: calc(50% + var(--u) * -43); top: calc(50% + var(--u) * 154); }

.rs-slide--party .rs-word { left: calc(50% + var(--u) * 23); top: calc(50% + var(--u) * -18); width: calc(var(--u) * 850); }
.rs-slide--party .rs-text { left: calc(50% + var(--u) * -11); top: calc(50% + var(--u) * 95); }
.rs-slide--party .rs-line { left: calc(50% + var(--u) * -28); top: calc(50% + var(--u) * 140); }
.rs-slide--party .rs-btn { left: calc(50% + var(--u) * -26); top: calc(50% + var(--u) * 210); }

/* Layers rise in (from 100% of their height below, fading in) one after
   another, with the original's delays and durations; the Wedding wordmark
   fades in where it is. */
.js .rs-slide.is-active .rs-text { animation: rs-rise 2s cubic-bezier(0.86, 0, 0.07, 1) 0.84s both; }
.js .rs-slide.is-active .rs-word { animation: rs-rise 2.17s cubic-bezier(0.86, 0, 0.07, 1) 1.06s both; }
.js .rs-slide--wedding.is-active .rs-word { animation: rs-fade 2.17s cubic-bezier(0.645, 0.045, 0.355, 1) 1.06s both; }
.js .rs-slide--catering.is-active .rs-word { animation-duration: 1.99s; animation-delay: 1.09s; }
.js .rs-slide.is-active .rs-btn { animation: rs-rise 2.23s cubic-bezier(0.86, 0, 0.07, 1) 1.29s both; }
.js .rs-slide--catering.is-active .rs-btn { animation-duration: 2.07s; animation-delay: 1.45s; }
.js .rs-slide.is-active .rs-line { animation: rs-rise 2.38s cubic-bezier(0.86, 0, 0.07, 1) 1.46s both; }
.js .rs-slide--catering.is-active .rs-line { animation-duration: 2.28s; animation-delay: 1.79s; }
@keyframes rs-rise {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes rs-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.rs-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(201, 201, 201, 0.75);
  color: var(--white);
  opacity: 0;
  cursor: pointer;
  translate: 0 -50%;
  transition: opacity 0.2s, background-color 0.2s;
}
.rs-arrow svg { width: 10px; height: 16px; }
.rs-arrow--prev { left: 60px; }
.rs-arrow--next { right: 60px; }
.rs:hover .rs-arrow,
.rs-arrow:focus-visible { opacity: 1; }
.rs-arrow:hover { background: #000; }
.rs-arrow { display: none; }
.js .rs-arrow { display: flex; }
@media (max-width: 767px) {
  .js .rs-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-slide,
  .rs-slide.is-active { transition: none; }
  .js .rs-slide.is-active .rs-bg,
  .js .rs-slide.is-active .rs-l { animation: none; }
}

/* ---- sections ------------------------------------------------------------- */

.home-welcome { padding: 60px 0; }

/* About Us and the reviews: a white panel on a full-width photo, the row
   padded so the panel lines up with the page. */
.home-panel { padding-top: 35px; background: var(--white); }
.home-panel--flush { padding: 0; }
.home-about { background: url("/assets/img/home/slide-party.jpg") center / cover no-repeat; }
.home-about-inner { padding: 0 50px 60px; }
.pl-20 { padding-left: 20px; }

.home-flowers img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
  .home-whyus { margin-top: -150px; }
}

.home-reviews { background: url("/assets/img/home/band-testimonials.jpg") center / cover no-repeat; }

.home-pt35 { padding-top: 35px; }
.home-team { padding-bottom: 80px; }

.home-contact { background: #f5efec url("/assets/img/home/band-contact.jpg") center / cover no-repeat; }
.home-contact-photo > .vc-col-inner { padding-top: 35px; }
@media (min-width: 991px) {
  .home-contact-photo > .vc-col-inner { height: 700px; }
}

/* ---- news ---------------------------------------------------------------------
   The theme's blog carousel: three posts across (two up to 768px, one up to
   479px), 20px either side of each; arrows only when there are more posts
   than fit (src/scripts/30-carousel.js). */

.widget-blog { margin-bottom: 40px; padding: 20px 0; }
.pc { position: relative; }
.pc-viewport { overflow: hidden; }
.pc-track { display: flex; transition: transform 0.3s ease; }
.pc-item { flex: 0 0 33.33333333%; min-width: 0; padding: 0 20px; }
@media (max-width: 768px) {
  .pc-item { flex-basis: 50%; }
}
@media (max-width: 479px) {
  .pc-item { flex-basis: 100%; }
}
.pc .post-item { margin: 10px 0 20px; }
.pc .entry-title { margin: 7px 0; font-family: var(--font); font-size: 20px; font-weight: 700; line-height: 36px; }
.pc .entry-title a { color: var(--ink); }
.pc .entry-title a:hover { color: var(--blush); }
.pc-buttons { display: none; }
.pc.has-more .pc-buttons { display: block; }
.pc-prev,
.pc-next {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 2px solid #d8d8d8;
  background: var(--white) url("/assets/img/theme/left.png") no-repeat 50%;
  cursor: pointer;
  translate: 0 -50%;
  transition: all 0.3s ease 0s;
}
.pc-next { right: 0; background-image: url("/assets/img/theme/right.png"); }
.pc-prev { left: 0; }
.pc-prev:hover,
.pc-next:hover { border-color: var(--blush); background-color: var(--blush); }
@media (max-width: 768px) {
  .pc-prev,
  .pc-next { border: 0; }
}

/* ---- components/team.css ---- */
/* ---- team cards ----------------------------------------------------------
   The original's "pbr-team" element (About): a circular 260px photo (200px at
   768px and below), name in Prata 20px, role beneath. A dark wash
   (rgba(51,40,41,.35)) fades over the photo in 0.3s while the card is
   hovered; it carries no icons on this site.
   -------------------------------------------------------------------------- */

.team {
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
  text-align: center;
}
.team-image {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
}
@media (max-width: 768px) {
  .team-image { width: 200px; height: 200px; }
}
.team-image img { display: block; width: 100%; height: 100%; }
.team-social {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background-color: rgba(51, 40, 41, 0.35);
  opacity: 0;
  transition: all 0.3s ease;
}
.team:hover .team-social { opacity: 1; }

.team-content { padding-top: 25px; }
.team-name { margin: 13px 0; font-size: 20px; line-height: 30px; }
.team-position { margin-bottom: 15px; }

/* ---- components/post.css ---- */
/* ---- single post ---------------------------------------------------------
   The original's post page (Grenda, left sidebar), measured on
   /a-truly-modern-kitchen/ (2026-10-13):

     >= 992px  sidebar 3/12 on the left, article 9/12; columns 20px each side
     <  992px  one column, the sidebar FIRST (it comes first in the markup)

   Sidebar: "Categories" (blush dot, 12px bold uppercase #999 links, a 1px
   blush underline that grows across on hover in 0.9s) and "Recent Posts" (the
   four newest, 14px/40px bold, a grey ring before each).
   Article: date (blush) | categories | author, title PT Serif 30/36 bold, the
   body, "Share this" with 30px Facebook and email squares, prev/next posts.
   -------------------------------------------------------------------------- */

.layout-row { margin-left: -20px; margin-right: -20px; }
.layout-row::after { content: ""; display: table; clear: both; }
.layout-sidebar,
.layout-main { position: relative; min-height: 1px; padding: 0 20px; }
@media (min-width: 992px) {
  .layout-sidebar { float: left; width: 25%; }
  .layout-main { float: left; width: 75%; }
}

/* ---- sidebar ---------------------------------------------------------- */

.sidebar .widget { margin-bottom: 60px; }
.sidebar .widget-title {
  position: relative;
  margin: 0 10px 30px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 44px;
  text-transform: capitalize;
  color: var(--ink);
}
.widget-categories .widget-title { margin: 0; }

.widget-categories ul { margin: 0; padding: 0; list-style: none; }
.widget-categories li {
  position: relative;
  padding: 8px 1px;
  border-bottom: 1px solid #e4e4e4;
}
.widget-categories li:last-child { border: none; }
.widget-categories li::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--blush);
  transition: all 0.9s ease;
}
.widget-categories li:hover::before { width: 100%; z-index: 9; }
.widget-categories a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--body);
}
.widget-categories a:hover,
.widget-categories li:hover > a { color: var(--blush); }
.widget-categories .dot {
  width: calc(1536em / 1792);
  height: 1em;
  margin-right: 10px;
  font-size: 5px;
  color: var(--blush);
  vertical-align: 0.2em;
}

/* Each item keeps its title's 1px margins inside it (42px a line, not 41), as
   on the original, where the item is a media-layout box that clips. */
.widget-recent .item-post { overflow: hidden; }
.widget-recent .item-post .entry-title {
  display: table;
  margin: 1px 0;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  line-height: 40px;
}
.widget-recent .item-post .entry-title::before {
  content: "";
  display: table-cell;
  width: 14px;
}
.widget-recent .item-post .entry-title a { display: table-cell; color: var(--ink); }
.widget-recent .item-post .entry-title a:hover { color: var(--blush); }

/* ---- article ------------------------------------------------------------ */

.post-inner { padding-top: 44px; }
.post-inner::after { content: ""; display: table; clear: both; }
.post-thumbnail { padding-bottom: 30px; }
.post-thumbnail img { display: block; }

.blog-top { font-size: 14px; line-height: 30px; }
.blog-top .entry-date { color: var(--blush); }
.entry-author::before { content: "|"; padding: 0 4px; color: var(--blush); }

.post-single .entry-title {
  margin: 7px 0;
  font-family: var(--font);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: var(--ink);
}
.post-single .entry-content { padding-top: 20px; }
.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child,
.entry-content h5:first-child,
.entry-content h6:first-child { margin-top: 0; }

.tag-links-wrapper {
  clear: both;
  margin-top: 60px;
  padding-top: 50px;
  border-top: 1px solid #ebebeb;
  font-size: 14px;
}
@media (max-width: 767px) {
  .tag-links-wrapper { padding-top: 40px; }
}
.tag-content { padding-bottom: 10px; }
.tag-content::after { content: ""; display: table; clear: both; }
.tag-content h6 {
  float: left;
  margin: 5px 10px 0 0;
  font-size: 14px;
  line-height: 21px;
}
.social-share { line-height: 30px; }
.social-share a {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  vertical-align: top;
  color: var(--white);
  transition: all 0.2s ease-out;
}
.social-share a:hover,
.social-share a:focus { color: var(--white); }
.share-facebook { background: #3b5998; }
.share-email { background: var(--line); }
.share-facebook .icon { width: calc(1024em / 1792); }
.share-email .icon { width: 1em; }

.nav-links {
  display: flex;
  margin-top: 40px;
  padding: 30px 0;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 24px;
  color: var(--body);
}
.nav-links > a,
.nav-links > .nav-gap { flex: 1; display: block; color: var(--ink); }
.nav-links .meta-nav {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--body);
  transition: 0.3s;
}
.prev-post,
.next-post { position: relative; display: block; }
.prev-post { float: left; padding-left: 30px; }
.next-post { float: right; padding-right: 30px; text-align: right; }
.nav-links > a::after { content: ""; display: table; clear: both; }
.nav-arrow {
  position: absolute;
  top: 50%;
  width: calc(640em / 1792);
  height: 1em;
  font-size: 36px;
  color: var(--rule);
  transform: translateY(-50%);
  transition: 0.3s;
}
.prev-post .nav-arrow { left: 0; }
.next-post .nav-arrow { right: 0; }

.related-posts { margin: 50px 0; }

/* ---- post body: the original's editor markup ----------------------------- */

.alignnone { margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto; clear: both; }
.alignright { float: right; margin: 5px 0 20px 20px; clear: both; }
.alignleft { float: left; margin: 5px 20px 20px 0; }

.wp-gallery { margin: -7px; }
.wp-gallery-item { position: relative; float: left; padding: 7px; overflow: hidden; }
.wp-gallery-cols-2 .wp-gallery-item { max-width: 50%; }
.wp-gallery-cols-3 .wp-gallery-item { max-width: 33.33%; }
.wp-gallery-cols-4 .wp-gallery-item { max-width: 25%; }

/* ---- archives (category, author, blog) -------------------------------------
   Measured on /category/news/: each post is a 44px/38px-padded block ruled
   below in #e5e5e5, title 26px/36px, "read more" in 12px blush capitals with
   a 50px line after it that grows to 43% while the post is hovered (0.9s).
   The excerpt's own "Continue reading" link is hidden, as on the original. */

.post-archive .post-inner {
  padding: 44px 0 38px;
  border-bottom: 1px solid var(--line);
}
.post-archive .entry-title {
  margin: 7px 0;
  font-family: var(--font);
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
}
.post-archive .entry-title a { color: var(--ink); }
.post-archive .entry-title a:hover { color: var(--blush); }
.post-archive .entry-content > p:empty { display: none; }
.more-link { display: none; }

.readmore { margin-top: 20px; }
/* "read more" and the theme's .button-line link ("read full story" on the
   home page) are the same element. */
.readmore a,
.button-line {
  position: relative;
  display: inline-block;
  padding-right: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blush);
}
.readmore a::after,
.button-line::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 0;
  z-index: 0;
  width: 50px;
  height: 1px;
  background: var(--blush);
  transition: all 0.9s ease;
}
.post-inner:hover .readmore a::after { width: 43%; z-index: 9; transform-origin: 100% 50%; }

.paging-navigation { padding: 30px 0; text-align: center; }
.pagination { display: inline-block; margin: 0 0 30px; padding-left: 0; }
.pagination .page-numbers {
  border: 1px solid var(--line);
  padding: 6px 12px;
  margin: 5px;
  color: var(--ink);
}
.pagination a.page-numbers:hover,
.pagination .current { color: var(--blush); border-color: var(--blush); }

@media (min-width: 992px) {
  .layout-main--full { width: 100%; }
}
.post-archive--wide .entry-title,
.post-archive--small .entry-title { font-size: 20px; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- components/event.css ---- */
/* ---- event page ----------------------------------------------------------
   The original's Calendarize-it event page, measured on
   /events/2023-alexandria-moulding-xmas-party/ (2026-10-13) at 1440/768/390.

   The two boxes are Bootstrap 2's fluid grid, which the plugin ships: a span6
   is 48.718% with a 2.564% gap, and every span is at least 30px tall -- so the
   empty rows the plugin prints (an "Organizer" with nothing in it, unused
   slots) each still take 30px, and that is what makes the boxes the height
   they are. Below 768px every span is full width.

   The boxes are set in Lato, which the original's calendar plugin loads from
   its own folder (regular and bold); self-hosted here (base/fonts.css).
   -------------------------------------------------------------------------- */

/* The theme pads an event by 20px only when it has a featured image set
   (.events.hentry.has-post-thumbnail): 176 of the 181 do. */
.event-single.has-thumb { padding-top: 20px; }

.event-name {
  display: block;
  margin: 0 3px -6px 0;
  font-size: 21px;
  line-height: 30px;
  color: var(--body);
}

/* ---- the fluid grid ------------------------------------------------------ */

.event-single .row-fluid { width: 100%; }
.event-single .row-fluid::before,
.event-single .row-fluid::after { content: ""; display: table; line-height: 0; }
.event-single .row-fluid::after { clear: both; }
.event-single .row-fluid [class*="span"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.564102564102564%;
  box-sizing: border-box;
}
.event-single .row-fluid [class*="span"]:first-child { margin-left: 0; }
.event-single .row-fluid .span12 { width: 100%; }
.event-single .row-fluid .span6 { width: 48.717948717948715%; }
@media (max-width: 767px) {
  .event-single .row-fluid [class*="span"] { float: none; display: block; width: 100%; margin-left: 0; }
  .event-single .row-fluid .span12,
  .event-single .row-fluid .span6 { width: 100%; }
}

/* ---- the boxes ----------------------------------------------------------- */

.fe-box {
  position: relative;
  width: 100%;
  margin: 0 auto 35px;
  padding: 1px;
  border: 1px solid #ebebeb;
  background-color: var(--white);
  line-height: 1.625;
}
.fe-box2 { width: 100%; height: 100%; background-color: var(--off-white); }
.fe-holder {
  position: relative;
  margin: 0;
  padding: 8px 15px;
  font-family: "Lato", sans-serif;
}
.fe-box--vbox .fe-holder { line-height: 24px; }

.rhc-cell { display: block; }
.rhc-cell--empty { display: none; }
.rhc-cell--label { margin-bottom: 10px; font-size: 21px; font-weight: 400; }
.fe-label {
  display: block;
  width: 100%;
  margin: 0 3px -6px 0;
  font-weight: 700;
  color: inherit;
}
.rhc-cell--label .fe-label { font-weight: 400; }
.fe-value { display: inline; }
.rhc-taxonomy-link { display: block; color: var(--ink); }

.fe-map-holder.span6 {
  float: right !important;
  margin: 1.2% 1.8% 0.5% 0 !important;
}

/* ---- iCal button and dialog ---------------------------------------------- */

.rhc-ical { display: block; position: relative; margin: 10px 0; }
/* The original's button is a span inside its own line box, and that row
   measures 61px (button 34px, its 20px bottom margin, and the line box's
   descent); a <button> here, so the row is given that height directly. */
.fe-value .rhc-ical { height: 61px; }
/* The plugin prints a <br> after each box and hides it. */
.fe-box + br { display: none; }
.fc-button-icalendar {
  display: inline-block;
  margin: 0 0 20px;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  background-color: #3498db;
  color: var(--white);
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.25s linear;
}
.fc-button-icalendar:hover,
.fc-button-icalendar:focus { background-color: #5dade2; }

.ical-dialog {
  position: absolute;
  top: 0;
  left: 75px;
  z-index: 50;
  display: block;
  width: 460px;
  max-width: calc(100vw - 40px);
  background: #3498db;
  color: var(--white);
  font-family: "Lato", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
.ical-dialog[hidden] { display: none; }
.ical-dialog-head { display: block; height: 40px; background: #2980b9; text-align: right; }
.ical-close {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: 22px;
  line-height: 24px;
  cursor: pointer;
}
.ical-close .icon { width: calc(1408em / 1792); }
.ical-dialog-body { display: block; padding: 18px 12px 24px; }
.ical-label { display: block; margin-bottom: 18px; }
.ical-url {
  display: block;
  width: 270px;
  max-width: 100%;
  margin-top: 6px;
  padding: 2px 4px;
  border: 0;
  background: #f1f1f1;
  /* Departure: the original's URL is near-white on this light grey, which
     cannot be read; dark text here. */
  color: #333;
  font-family: monospace;
  font-size: 13px;
  resize: none;
}
.ical-desc { display: block; margin-bottom: 18px; }
.ical-ics {
  display: block;
  margin: 0 10px;
  padding: 10px;
  background: #34495e;
  color: var(--white);
  text-align: center;
}
.ical-ics:hover,
.ical-ics:focus { color: var(--white); opacity: 0.9; }

/* ---- components/carousel.css ---- */
/* ---- testimonials carousel -------------------------------------------------
   The theme's testimonials widget (owl carousel), as the original shows it on
   the home page and /services-2/, measured 2026-10-13: one review at a time,
   no autoplay and no dots; an 80px square arrow button either side of the
   empty avatar, 100px above the bottom (ruled in #d8d8d8 from 1200px); the theme's blush quote mark above the
   review and its flourish under it. Reviews slide (300ms) and the box takes
   the height of the one showing (500ms), as owl's autoHeight does.
   src/scripts/30-carousel.js. Without JS every review shows, one under the
   other. -------------------------------------------------------------------- */

.tst { padding: 30px 0; }
@media (max-width: 767px) {
  .tst { padding: 20px 0; }
}
.tst-carousel { position: relative; }
.js .tst-viewport { overflow: hidden; transition: height 0.5s ease-in-out; }
.js .tst-track { display: flex; align-items: flex-start; transition: transform 0.3s ease; }
.tst-item { flex: 0 0 100%; min-width: 0; padding: 0 20px; }

.tst-body {
  position: relative;
  overflow: hidden;
  padding: 60px 10px 10px;
  background: url("/assets/img/theme/quote.png") no-repeat 50% 0;
  text-align: center;
}
.tst-quote {
  position: relative;
  margin-bottom: 64px;
  padding: 45px 0 40px;
  background: url("/assets/img/theme/bg1-testimonial.png") no-repeat 50% 100%;
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 54px;
  color: #000;
}
.tst-avatar { width: 80px; height: 80px; margin: 0 auto; overflow: hidden; }
.tst-name { margin: 30px 0 0; font-size: 20px; line-height: 30px; }

.tst-buttons { display: none; }
.js .tst-buttons {
  position: absolute;
  bottom: 100px;
  left: 0;
  display: block;
  width: 100%;
  text-align: center;
}
.tst-prev,
.tst-next {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 0 60px;
  border: 2px solid #d8d8d8;
  background: url("/assets/img/theme/left.png") no-repeat 50%;
  vertical-align: top;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}
.tst-next { background-image: url("/assets/img/theme/right.png"); }
.tst-prev:hover,
.tst-next:hover,
.tst-prev:focus-visible,
.tst-next:focus-visible { border-color: var(--blush); background-color: var(--blush); }
@media (max-width: 1199px) {
  .tst-prev,
  .tst-next { border: 0; }
}
/* Below 768px the theme takes the arrows out of the line and shrinks them to
   40px: they sit at the left and right edges, still 100px above the bottom. */
@media (max-width: 767px) {
  .js .tst-buttons { height: 0; }
  .tst-prev,
  .tst-next { position: absolute; top: 0; width: 40px; height: 40px; margin: 0; }
  .tst-prev { left: 0; }
  .tst-next { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .tst-viewport,
  .js .tst-track { transition: none; }
}

/* ---- components/gallery.css ---- */
/* ---- galleries -----------------------------------------------------------
   The original's WPBakery grids and its prettyPhoto lightbox, measured on the
   twelve /page-gallery/<slug>/ pages, /page-gallery/ and
   /wedding-decor-gallery/ (2026-10-13) at 1440/1024/768/390.

   Masonry media grid (.mgrid): six columns from 768px, one below. Each column
   is a sixth of the grid plus its gutter (5px on the gallery pages, 20px on
   /page-gallery/), and each photo sits in it with 40px of space to its right
   and below (20px below 1200px), so the photo is the column less 40px. The
   photo is drawn 60px wider than its box and shifted 50px left, and slides
   back on hover while a 30% black veil darkens it. src/scripts/40-gallery.js
   stacks the photos into the shortest column, in order, as the original's
   masonry does; without JS they wrap in rows.
   -------------------------------------------------------------------------- */

.mgrid-wrap { padding-top: 30px; margin-bottom: 35px; }
.mgrid { position: relative; }
.mgrid::after { content: ""; display: table; clear: both; }
.mgrid--g5 { margin: 0 -5px -5px 0; }
.mgrid--g20 { margin: 0 -20px -20px 0; }

.mgrid-item {
  float: left;
  width: 100%;
  min-height: 1px;
  padding: 0 40px 40px 0;
}
@media (min-width: 768px) {
  .mgrid-item { width: 16.66666667%; }
}
@media (max-width: 1199px) {
  .mgrid-item { padding: 0 20px 20px 0; }
}
.mgrid.is-laid .mgrid-item { position: absolute; float: none; }

.mgrid-zone,
.bgrid-zone {
  position: relative;
  display: block;
  overflow: hidden;
}
.mgrid-zone img {
  position: relative;
  display: block;
  width: calc(100% + 60px);
  max-width: none;
  height: auto;
  min-height: 100%;
  transform: translate3d(-50px, 0, 0);
  transition: opacity 0.35s, transform 0.35s;
}
.mgrid-zone::after,
.bgrid-zone::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0.3;
  pointer-events: none;
  transition: all 0.3s;
}
.mgrid-zone:hover::after,
.mgrid-zone:focus-visible::after,
.bgrid-zone:hover::after,
.bgrid-zone:focus-visible::after { opacity: 1; }
.mgrid-zone:hover img,
.mgrid-zone:focus-visible img { transform: translateZ(0); }

/* The grids come in with animate.css's zoomIn (photo grids) and fadeIn
   (the square tiles), as the original's do once they have loaded. */
@keyframes zoomIn {
  from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mgrid--anim .mgrid-item { animation: zoomIn 1s both; }
.js .bgrid-item { animation: fadeIn 1s both; }

/* ---- square tiles (/wedding-decor-gallery/) --------------------------------
   A basic grid of one: the photo cropped square (cover, centred), the same
   40px (20px below 1200px) of space right and below, 30px above and below the
   grid and 35px after it. */

.bgrid-wrap { padding: 30px 0; margin-bottom: 35px; }
.bgrid-item { padding: 0 40px 40px 0; }
@media (max-width: 1199px) {
  .bgrid-item { padding: 0 20px 20px 0; }
}
.bgrid-zone { aspect-ratio: 1 / 1; }
.bgrid-zone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- the "Gallery" widget (/page-gallery/) --------------------------------
   The theme's gallery carousel, showing its one gallery: a 2:3 photo with the
   name over it. Its slides are a third of the row (half up to 768px, the
   whole row up to 479px) less 20px each side; from 1400px the theme indents
   the row by half a slide. */

.widget-gallery { position: relative; margin-bottom: 40px; }
.widget-gallery .widget-title {
  position: relative;
  margin: 0 10px 30px 0;
  padding-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 44px;
  color: #000;
}
.gal-slide {
  position: relative;
  overflow: hidden;
  width: calc(100% / 3 - 40px);
  margin-left: 20px;
}
.gal-slide img { display: block; width: 100%; height: auto; }
@media (min-width: 1400px) {
  .gal-slide { margin-left: calc(20px + (100% / 3 - 40px) / 2); }
}
@media (max-width: 768px) {
  .gal-slide { width: calc(50% - 40px); }
}
@media (max-width: 479px) {
  .gal-slide { width: calc(100% - 40px); }
}
.gal-slide-title,
.gal-slide-title:hover,
.gal-slide-title:focus {
  position: absolute;
  bottom: 15%;
  left: 10%;
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  line-height: 60px;
  color: var(--white);
}
@media (max-width: 1199px) {
  .gal-slide-title,
  .gal-slide-title:hover,
  .gal-slide-title:focus { padding: 0 20px; font-size: 24px; line-height: 36px; }
}

/* ---- lightbox ---------------------------------------------------------------
   prettyPhoto's default theme, as the original opens every gallery photo: a
   70% black overlay, a white box in a 5px dark rim and an 8px light frame, the
   file name under the photo in 11px bold grey, a round close button, and an
   expand button when the photo had to be shrunk to fit. One photo at a time,
   as there. Built by src/scripts/40-gallery.js. */

.pp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: #000;
  opacity: 0;
  transition: opacity 0.2s;
}
.pp-overlay.is-open { opacity: 0.7; }
.pp-holder {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: auto;
  opacity: 0;
  transition: opacity 0.2s;
}
.pp-holder.is-open { opacity: 1; }
.pp-overlay[hidden],
.pp-holder[hidden] { display: none; }

.pp-frame {
  position: absolute;
  padding: 8px;
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  background: #f8f8f8;
  background-clip: padding-box;
}
.pp-content { position: relative; background: var(--white); }
.pp-img { display: block; max-width: none; }
.pp-details { position: relative; height: 31px; margin: 5px 0 2px; }
.pp-desc {
  margin: 5px 50px 5px 0;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  color: #999;
}

.pp-close,
.pp-expand {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #c9c9c9;
  border-radius: 50%;
  background: linear-gradient(#fff, #e4e4e4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  color: #666;
  cursor: pointer;
}
.pp-close { top: 1px; right: 2px; width: 27px; height: 27px; }
.pp-expand { top: 10px; right: 11px; z-index: 2; width: 28px; height: 28px; background: #f4f4f4; }
.pp-close svg { width: 11px; height: 11px; }
.pp-expand svg { width: 16px; height: 16px; }
.pp-close:hover,
.pp-expand:hover { color: #333; }
.pp-expand[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mgrid--anim .mgrid-item,
  .js .bgrid-item { animation: none; }
  .mgrid-zone img,
  .pp-overlay,
  .pp-holder { transition: none; }
}

/* ---- components/service.css ---- */
/* ---- services ------------------------------------------------------------
   The original's Opal Service pages, measured on /opal_service/ and
   /opal_service/wedding/ (2026-10-13).

   Archive: four columns from 768px (one below), 20px each side, 40px under
   each; the fifth card starts a new row. A card is its photo, darkened by a
   50% black veil at 30% (80% while the card is hovered), the name centred
   over it in Prata 36/60 white (blush when hovered), then the summary and
   "read more".

   A service page: the content in the left 9/12 from 992px; "Overview" in
   Prata 36/70 over a rule, the summary in 18/36, the photo at full width with
   30px above and below, then WPBakery rows of headings and accordions.
   -------------------------------------------------------------------------- */

.svc-grid { margin: 0 -20px; }
.svc-grid::after { content: ""; display: table; clear: both; }
.svc-card {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  margin-bottom: 40px;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .svc-card { width: 25%; }
}
.svc-card--first { clear: both; }

.svc-media { position: relative; }
.svc-media img { display: block; width: 100%; height: auto; }
.svc-media-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0.3;
  pointer-events: none;
  transition: all 0.3s;
}
.svc-card:hover .svc-media-link::after { opacity: 0.8; }
.svc-title {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 100%;
  margin: 0 5%;
  text-align: center;
}
.svc-title h2 { margin: 13px 0; font-size: 23px; line-height: 34.5px; }
.svc-title a {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  line-height: 60px;
  color: var(--white);
}
.svc-title a:hover,
.svc-title a:focus { color: var(--blush); }
.svc-box { padding-top: 20px; }

/* ---- a service page ------------------------------------------------------ */

.svc-side { position: relative; float: right; width: 100%; min-height: 1px; padding: 0 20px; }
@media (min-width: 992px) {
  .svc-side { width: 25%; }
}
.svc-overview-title {
  margin: 0 0 25px;
  padding: 0 0 15px;
  border-bottom: 1px solid #e5e5e5;
  font-size: 36px;
  font-weight: 400;
  line-height: 70px;
  color: #000;
}
.svc-excerpt p { margin: 0 0 13px; font-size: 18px; line-height: 36px; }
.svc-image { margin: 30px 0; }
.svc-image img { display: block; width: 100%; height: auto; }
.svc-detail-inner { padding-top: 10px; }
.svc-heading {
  margin: 0 0 6.25px;
  font-size: 36px;
  font-weight: 400;
  line-height: 70px;
  text-align: left;
  color: #000;
}

/* ---- accordion -------------------------------------------------------------
   WPBakery's accordion (vc_tta) as the original styles it: one panel open at a
   time (clicking the open one leaves it open), the open panel ruled above and
   below in #d9d9d9, the others ruled above only. Titles in Prata 18/36 with
   the number in blush bold; a 12px plus (minus when open) at the left; the
   text in 18/36 indented 40px. src/scripts/42-accordion.js. Without JS every
   panel is open.

   Departure: at 768px and below the original hides every panel's title
   (display: none), so a phone shows the first panel's text and nothing else,
   and the other panels cannot be opened. The titles stay here. */

.tta { margin-bottom: 21.7391px; }
.tta-panel.is-active { border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; }
.tta-title {
  margin: 0;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid transparent;
  font-size: 18px;
  font-weight: 400;
  line-height: 36px;
  color: #000;
}
.tta-panel:not(:first-child) .tta-title { margin-top: -1px; }
.tta-panel:not(:last-child) .tta-title { margin-bottom: -1px; }
.tta-panel.is-active .tta-title { padding-top: 20px; border-top: 0; }
.tta-toggle {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 20px 10px 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.tta-text { padding-left: 38px; letter-spacing: 0.7px; }
.tta-text strong { padding-right: 5px; font-weight: 700; color: var(--blush); }
.tta-icon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-6px);
}
.tta-icon::before,
.tta-icon::after {
  content: "";
  position: absolute;
}
.tta-icon::before { top: 50%; left: 0; width: 12px; height: 2px; border-top: 2px solid #666; transform: translateY(-50%); }
.tta-icon::after { top: 0; left: 50%; width: 2px; height: 12px; border-left: 2px solid #666; transform: translateX(-50%); }
.tta-panel.is-active .tta-icon::after { display: none; }
.tta-body {
  padding: 10px 10px 30px 40px;
  background: var(--white);
  font-size: 18px;
  line-height: 36px;
}
.tta-body > :last-child { margin-bottom: 0; }
.js .tta-panel:not(.is-active) .tta-body { display: none; }

/* ---- feature boxes (/services-2/) ---------------------------------------------
   The theme's feature box (default style, icon on the left): the icon a fifth
   of the width, the text the rest with 37px before it (10px up to 768px, and
   10px lower below 768px); the title in Prata 20/30, blush while the box is
   hovered; 30px under each box. */

.fbox { display: flex; margin-bottom: 30px; }
.fbox-image { width: 20%; }
.fbox-content { width: 80%; padding-left: 37px; }
.fbox-title { margin: 0 0 13px; font-size: 20px; font-weight: 400; line-height: 30px; transition: color 0.3s; }
.fbox:hover .fbox-title { color: var(--blush); }
@media (max-width: 768px) {
  .fbox { padding: 0 20px; }
  .fbox-content { padding-left: 10px; }
}
@media (max-width: 767px) {
  .fbox-content { margin-top: 10px; }
}

/* ---- components/toggle.css ---- */
/* ---- toggles (/faq/) ---------------------------------------------------------
   WPBakery's toggle as the original's FAQ styles it, measured on /faq/
   (2026-10-13): each toggle 22px above and below, ruled under in #e5e5e5 (not
   the last); the question in Prata 20/36 after a 14px minus (a plus while
   closed); the answer 16px under it and 21.74px above the rule, indented
   24.2px. Toggles open and close independently; the first starts open.
   src/scripts/42-accordion.js. Without JS every answer shows.

   The heading row is the original's: PT Serif 40/60, 15px under its row; the
   list sits 35px below it, as the original's tab panel does. */

.faq-head { margin-bottom: 15px; }
.faq-title { font-family: var(--font); font-size: 40px; font-weight: 400; line-height: 60px; text-align: left; color: #000; }
.faq-body { margin-bottom: 50px; }
.tgl-list { padding: 35px 0; }

.tgl { padding: 22px 0; border-bottom: 1px solid var(--line); }
.tgl:last-child { border-bottom: 0; }
.tgl-heading { margin: 0; font-size: 20px; font-weight: 400; line-height: 36px; }
.tgl-title {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 0 0 24.2px;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  text-align: left;
  color: #000;
  cursor: pointer;
}
.tgl-icon {
  position: absolute;
  top: 17px;
  left: 0;
  width: 14px;
  height: 2px;
  background: #000;
}
.tgl-icon::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 6px;
  width: 2px;
  height: 14px;
  background: #000;
}
.tgl.is-open .tgl-icon::before { display: none; }
.tgl-content { margin: 16px 0 21.7391px; padding-left: 24.2px; }
.js .tgl:not(.is-open) .tgl-content { display: none; }

/* ---- components/notfound.css ---- */
/* ---- 404 ------------------------------------------------------------------
   The original's not-found page (Grenda's .notfound-page), measured 2026-10-13:
   the theme's flower photo along the bottom (cover); 120px above and 360px
   below (50 and 100 up to 1199px); "404" in Prata 200px on a 70px line with
   30px under it (100px below 768px); the subtitle in blush Prata 48/60 with
   34px above it (24px, no space, below 768px); the text in PT Serif 24/30
   black; the two links bold blush, 10px either side. */

.notfound-page {
  padding: 120px 0 360px;
  background: url("/assets/img/theme/bg_404.jpg") no-repeat 50% 100% / cover;
}
@media (max-width: 1199px) {
  .notfound-page { padding: 50px 0 100px; }
}
.nf-title,
.nf-subtitle { margin: 13px 0; font-family: var(--font-heading); font-weight: 400; }
.nf-title { padding-bottom: 30px; font-size: 200px; line-height: 70px; color: #000; }
.nf-subtitle { padding-top: 34px; font-size: 48px; line-height: 60px; color: var(--blush); }
@media (max-width: 767px) {
  .nf-title { font-size: 100px; }
  .nf-subtitle { padding-top: 0; font-size: 24px; }
}
.error-description p,
.page-action { font-size: 24px; line-height: 30px; color: #000; }
.page-action { margin-top: 20px; }
.btn-link { margin: 10px; font-weight: 700; color: var(--blush); }

/* ---- components/calendar.css ---- */
/* ---- events calendar -----------------------------------------------------
   The original's Calendarize-it calendar (FullCalendar 1 with the plugin's
   flat theme), measured on /events/ at 1440 and 390 (2026-10-13). The script
   is src/scripts/45-calendar.js. Set in Lato, the plugin's own font (regular
   and bold; see base/fonts.css).
   -------------------------------------------------------------------------- */

.rhcalendar {
  position: relative;
  margin-top: 60px;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 30px;
  color: var(--body);
}

.venue-top-info { font-family: "Lato", sans-serif; }
.venue-name { font-size: 21px; line-height: 30px; color: var(--body); }

/* ---- toolbar ------------------------------------------------------------ */

.fc-header { position: relative; min-height: 61px; text-align: left; }
.fc-header::after { content: ""; display: table; clear: both; }
.fc-header-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
}
.fc-header-title h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 51px;
  color: var(--ink);
}
.fc-header-left { float: left; position: relative; z-index: 1; }
.fc-header-right { float: right; position: relative; z-index: 1; text-align: right; }
.fc-header-space { display: inline-block; padding-left: 10px; }
.fc-button-group { display: inline-block; white-space: nowrap; }

.fc-header .fc-button {
  position: relative;
  display: inline-block;
  margin: 0 0 20px;
  padding: 5px 15px 6px;
  border: 0;
  border-radius: 0;
  background-color: #3498db;
  color: var(--white);
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.9;
  vertical-align: top;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.25s linear;
}
.fc-header .fc-button:hover,
.fc-header .fc-button:focus-visible { background-color: #5dade2; color: var(--white); }
.fc-header .fc-button.fc-state-active { background-color: #34495e; }
.fc-header .fc-button.fc-state-active:hover { background-color: #5dade2; }
.fc-header .fc-button.fc-state-disabled,
.fc-header .fc-button:disabled { opacity: 0.65; cursor: default; background-color: #3498db; }
.fc-header-left > .fc-button,
.fc-button-group > .fc-button:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.fc-header-left > .fc-button,
.fc-button-group > .fc-button:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.fc-header .fc-button-prevYear,
.fc-header .fc-button-prev,
.fc-header .fc-button-next,
.fc-header .fc-button-nextYear { width: 30px; padding-left: 0; padding-right: 0; text-align: center; }
.fc-button-prevYear .icon,
.fc-button-prev .icon,
.fc-button-next .icon,
.fc-button-nextYear .icon { font-size: 16px; vertical-align: -2px; }
.fc-button-prev .icon,
.fc-button-next .icon { width: calc(640em / 1792); }
.fc-button-prevYear .icon,
.fc-button-nextYear .icon { width: calc(1024em / 1792); }

/* 481-884: the title moves above the buttons; up to 768 the two button
   groups are centred rows of their own. */
@media (min-width: 481px) and (max-width: 884px) {
  .fc-header { margin-top: 40px; }
  .fc-header-title { top: -41px; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .fc-header-left,
  .fc-header-right { float: none; text-align: center; }
  /* the 15px below the toolbar collapses away beside the floated groups on a
     wide screen, and shows here where they are not floated */
  .fc-header { margin-bottom: 15px; }
}

/* At 480px and below the plugin stacks the toolbar: the title first, then
   full-width buttons, the four arrows sharing one row. */
@media (max-width: 480px) {
  .rhcalendar { margin-top: 40px; }
  .fc-header { margin-bottom: 15px; }
  .fc-header-title { top: -40px; }
  .fc-header-left,
  .fc-header-right { float: none; text-align: center; }
  .fc-header .fc-button { display: block; width: 100%; margin: 0 0 2px; padding: 10px 0; border-radius: 0 !important; }
  .fc-header-space { display: none; }
  .fc-header-left > .fc-button-group { display: flex; gap: 2px; margin-bottom: 2px; }
  .fc-header-left > .fc-button-group .fc-button { flex: 1; width: auto; min-height: 49px; margin: 0; padding: 9px 0; }
  .fc-header-right .fc-button-group { display: block; }
}

/* ---- content and the slide between periods ------------------------------ */

.fc-content { position: relative; overflow: hidden; }
.fc-view-entering,
.fc-view-leaving {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1);   /* easeInOutExpo, as the original's */
}
.fc-view-entering { position: relative; }
.fc-content { transition: height 0.6s cubic-bezier(0.87, 0, 0.13, 1); }

/* ---- event list (the default view) --------------------------------------- */

.fc-event-list-date { position: relative; margin: 10px 0; text-align: center; }
.fc-event-list-date::before,
.fc-event-list-date::after {
  content: " ";
  position: absolute;
  width: 30%;
  height: 4px;
}
.fc-event-list-date::before { top: 23px; left: 70%; border-bottom: 4px double #e3e3e3; }
.fc-event-list-date::after { top: 21px; right: 70%; border-bottom: 4px double #e6e6e6; }
.fc-event-list-date-header {
  position: relative;
  z-index: 1;
  width: 35%;
  margin: 0 auto;
  font-size: 18px;
  line-height: 2.6;
}
.fc-event-list-item { min-height: 240px; margin: 0 0 10px; padding: 20px 10px; }
.fc-event-list-item h4 { margin: -13px 0 20px; font-size: 23px; line-height: 1.5; }
.fc-event-list-title { font-family: var(--font-heading); font-size: 22px; font-weight: 400; line-height: 33px; color: var(--ink); }

.elist-dbox {
  position: relative;
  margin: 0 0 35px;
  padding: 1px;
  border: 1px solid #ebebeb;
  background: var(--white);
}
.elist-dbox2 { background: var(--off-white); }
.elist-dbox2::after { content: ""; display: table; clear: both; }
.elist-holder { float: left; width: 65.81196581196582%; padding: 10px; }
.elist-image { float: left; width: 31.62393162393162%; min-height: 30px; margin: 10px 0; }
.elist-image img {
  position: relative;
  left: 14px;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: auto;
  padding: 5px;
  border: 1px solid #ebebeb;
  background: var(--white);
}
/* The title row is a floated Bootstrap column on the original, so the label's
   -6px bottom margin stays inside it; flow-root does the same here. */
.elist-title { display: flow-root; min-height: 30px; margin-bottom: 10px; font-size: 21px; }
.elist-title .fe-label { font-weight: 400; }
.elist-dbox .fe-label { display: block; margin: 0 3px -6px 0; font-weight: 700; }
.elist-cols::after { content: ""; display: table; clear: both; }
.elist-col { float: left; width: 48.717948717948715%; min-height: 30px; }
.elist-col--2 { margin-left: 2.564102564102564%; }
.elist-cell { min-height: 56px; }
.fc-start, .fc-end { font-size: 13px; margin: 0 0 10px; }
.elist-description { margin: 0 0 10px; padding: 10px 0; font-size: 14px; line-height: normal; }
/* The plugin's breakpoints for this box (Bootstrap 2 responsive plus its own):
   768-979 slightly different column widths; 481-768 the image drops below at
   95.5% (its picture 98.2%); up to 767 every column is full width; up to 480
   the image is 93% (its picture 97.2%). */
@media (min-width: 768px) and (max-width: 979px) {
  .elist-holder { width: 65.74585635359117%; }
  .elist-image { width: 31.491712707182323%; }
  .elist-col { width: 48.61878453038674%; }
  .elist-col--2 { margin-left: 2.7624309392265194%; }
}
@media (max-width: 767px) {
  .elist-holder,
  .elist-col { float: none; width: 100%; margin-left: 0; }
  .elist-image { float: none; width: 100%; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .elist-image { float: left; width: 95.5%; margin: 10px auto; }
  .elist-image img { left: 0; width: 98.2%; }
}
@media (max-width: 480px) {
  .elist-image { width: 93%; margin: 10px auto; }
  .elist-image img { left: 0; width: 97.2%; margin: 0 auto; }
}
@media (max-width: 540px) {
  .fc-event-list-date-header { width: 85%; }
  .fc-event-list-item { padding: 10px; }
  /* the plugin's featured-image wrapper has a 20px bottom margin here, which
     collapses with the holder's 10px */
  .elist-image { margin-bottom: 20px; }
}
@media (max-width: 767px) {
  .elist-title { display: block; }
}
.fc-no-list-events-message { padding: 30px 0; text-align: center; }

/* ---- month ----------------------------------------------------------------- */

.fc-month-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.fc-month-table th {
  padding: 0;
  border: 1px solid #ddd;
  border-width: 1px 0 1px 1px;
  font-weight: 700;
  line-height: 29px;
  text-align: left;
}
.fc-month-table th:last-child { border-right-width: 1px; }
.fc-month-table td {
  padding: 6px 1px 6px 0;
  border: 1px solid #ddd;
  border-width: 0 0 1px 1px;
  vertical-align: top;
}
.fc-month-table td:last-child { border-right-width: 1px; }
.fc-month-table td.fc-today { background: #fcf8e3; }
.fc-day-number { padding: 0 10px; text-align: right; }
.fc-other-month .fc-day-number { opacity: 0.3; }
.fc-day-content { padding: 2px 0 1px 1px; }

.fc-event {
  display: block;
  margin: 0 0 1px;
  border: 1px solid #36c;
  background-color: #36c;
  color: var(--white);
  font-size: 0.85em;
  cursor: pointer;
}
.fc-event:hover,
.fc-event:focus { opacity: 0.9; color: inherit; }
.fc-event-inner { display: block; overflow: hidden; padding: 2px; line-height: 14.96px; }
.fc-event-time { padding-right: 3px; font-size: 12px; font-weight: 700; line-height: 18px; }
.fc-event-title { padding-right: 3px; font-size: 12px; line-height: 18px; }

.fc-month-mobile .fc-mday { border-bottom: 1px solid #eee; }
.fc-month-mobile .fc-day-number { font-weight: 700; }
.fc-month-mobile .fc-mday.fc-today { background: #fcf8e3; }

/* ---- week and day ------------------------------------------------------ */

.fc-agenda { position: relative; }
.fc-agenda-days { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.fc-agenda-days th,
.fc-agenda-days td { border: 1px solid #ddd; border-width: 1px 0 1px 1px; }
.fc-agenda-days th:last-child,
.fc-agenda-days td:last-child { border-right-width: 1px; }
.fc-agenda-axis { width: 57px; padding: 0 4px; font-weight: 400; text-align: left; white-space: nowrap; }
.fc-col-head { font-weight: 700; text-align: left; }
.fc-agenda-days .fc-today { background: #fcf8e3; }
.fc-agenda-allday th,
.fc-agenda-allday td { height: 44px; vertical-align: top; }
.fc-agenda-allday .fc-day-content { padding: 2px 2px 0; }
.fc-agenda-divider { height: 4px; border: 1px solid #ddd; }
.fc-agenda-scroll { position: relative; overflow-x: hidden; overflow-y: auto; }
.fc-agenda-slots-wrap { position: relative; }
.fc-agenda-slots { position: relative; z-index: 1; width: 100%; border-collapse: separate; border-spacing: 0; }
.fc-today-col { position: absolute; top: 0; bottom: 0; z-index: 0; background: #fcf8e3; }
.fc-agenda-slots th,
.fc-agenda-slots td { height: 30px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; }
.fc-agenda-slots td { border-right: 1px solid #ddd; }
.fc-agenda-slots tr.fc-minor th,
.fc-agenda-slots tr.fc-minor td { border-top-style: dotted; }
.fc-agenda-slots th { width: 57px; padding: 0 4px; font-weight: 400; text-align: left; white-space: nowrap; }
.fc-agenda-events { position: absolute; inset: 0; pointer-events: none; }
.fc-event-vert { position: absolute; pointer-events: auto; padding: 0 2px; overflow: hidden; font-size: 0.85em; line-height: 18px; }
.fc-event-vert .fc-event-time,
.fc-event-vert .fc-event-title { display: block; }

/* ---- tooltip ---------------------------------------------------------- */

.fct-tooltip {
  position: absolute;
  z-index: 20;
  width: 330px;
  border-left: 4px solid #36c;
  border-radius: 4px;
  background: #fafafa;
  box-shadow: -7px 8px 0 0 #e6e6e6;
  font-size: 14px;
  line-height: 1.4;
}
.fct-arrow { position: absolute; top: 50px; width: 0; height: 0; border: 10px solid transparent; }
.fc-tip-right .fct-arrow { left: -24px; border-right-color: #fafafa; }
.fc-tip-left .fct-arrow { right: -20px; border-left-color: #fafafa; }
.fct-header { position: relative; padding: 18px 40px 6px 16px; }
.fc-title a { font-weight: 700; color: var(--ink); }
.fc-close-tooltip {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: #ccc;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.fc-close-tooltip .icon { width: calc(1408em / 1792); }
.fct-footer .fc-image img { display: block; width: 100%; height: auto; }

/* ---- filter dialog ------------------------------------------------------ */

.fc-filters-dialog {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 620px;
  max-width: 100%;
  background: #f5f5f5;
  box-shadow: 0 1px 12px 0 #cecece;
}
.fc-filters-dialog[hidden] { display: none; }
.fbd-head { height: 36px; padding: 7px 10px; text-align: right; }
.fbd-close { padding: 0 4px; border: 0; background: none; color: #ccc; font-size: 22px; line-height: 22px; cursor: pointer; }
.fbd-close .icon { width: calc(1408em / 1792); }
.fbd-body { margin: 7px 7px 0; font-size: 13px; }
.fbd-tab {
  margin: 0 0 3px;
  padding: 6px;
  border-radius: 6px;
  background: #34495e;
  color: var(--white);
  font-size: 13px;
  line-height: 1.7;
}
.fbd-panel { min-height: 200px; padding: 0.5em 1%; border-radius: 6px; margin-bottom: 3px; background: var(--white); line-height: 1.4; }
.fbd-unchecked { display: block; width: 48%; margin-left: 50%; max-height: 300px; overflow-y: auto; }
.fbd-cell { display: block; margin: 5px 0; font-weight: 700; color: var(--body); }
.fbd-dialog-controls { padding: 7px 10px 7px 7px; }
.fbd-dialog-controls::after { content: ""; display: table; clear: both; }
.fbd-dg-remove,
.fbd-dg-apply {
  padding: 5px 15px;
  border: 0;
  border-radius: 2px;
  background: #3498db;
  color: var(--white);
  font-family: "Lato", sans-serif;
  font-size: 15px;
  cursor: pointer;
}
.fbd-dg-remove { float: left; }
.fbd-dg-apply { float: right; }

/* ---- footer ---------------------------------------------------------- */

/* The original's footer row measures 70px: its button (41px, 20px margin)
   sits in a line box that adds the rest. */
.rhcalendar .fc-footer { min-height: 70px; margin-top: 20px; text-align: left; }
.rhcalendar .fc-footer .fc-button-icalendar {
  margin: 0 0 20px 3px;
  padding: 5px 15px 6px;
  font-size: 16px;
  line-height: 1.9;
}
.rhcalendar-ical { position: relative; display: inline-block; }
.rhcalendar-ical .ical-dialog { top: 48px; left: 0; }

/* ---- components/form.css ---- */
/* ---- forms ---------------------------------------------------------------
   The original had no working form anywhere: the homepage printed
   `[contact-form-7 id="4"]` as text, /contact-2/ printed two more broken
   shortcodes, and /reservations/ printed two dead booking shortcodes. So
   there is nothing here to reproduce — this is written from scratch.
   -------------------------------------------------------------------------- */

.form-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.form-field { display: grid; gap: 6px; }
.form-field--wide { grid-column: 1 / -1; }

.form-field label {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink);
}

.form-field .req { color: var(--gold-dark); }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  font-family: var(--font);
  /* 1rem minimum or iOS Safari zooms the page on focus. */
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color var(--transition);
}

.form-field textarea { min-height: 150px; resize: vertical; }

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

.form-actions { margin-top: 22px; }

.form-status {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: var(--fs-small);
}
.form-status:empty { display: none; }
.form-status.is-ok  { background: #eef4ec; color: #3f5c3a; }
.form-status.is-err { background: #fdf1ec; color: #8a4b32; }

.form-note {
  margin: 14px 0 0;
  font-size: var(--fs-small);
  color: var(--body);
}

/* Honeypot — a cheap second layer alongside Turnstile. Off-screen rather than
   display:none, which some bots detect. */
.form-hp {
  position: absolute;
  left: -5000px;
  width: 1px; height: 1px;
  overflow: hidden;
}
/* The wrapper is 1px but the input inside it keeps its intrinsic size, which
   reads as a 153x21 control to an auditor. Nothing should ever focus it. */
.form-hp input { width: 1px; height: 1px; padding: 0; border: 0; }

/* Turnstile renders its own iframe into this div, so the box is not ours to
   style — but its SIZE is ours to reserve. Without a reserved box the div is
   0px until api.js loads and then jumps to 300x65, shoving the submit button
   down the page just as someone reaches for it. 300x65 is the "normal" widget,
   the default when data-size is not set. */
.cf-turnstile {
  min-height: 65px;
  margin: 4px 0;
}

/* ---- components/footer.css ---- */
/* ---- footer --------------------------------------------------------------
   The original's footer, on every page (measured at 1440 and 390 on
   /about/, 2026-10-13):

     1. a full-width photo band, 508px at 1440: "upcoming events? book now",
        "Let Us Make Your Events Flawless" (Prata 60/100, 700) and a gold
        "Setup an appointment" button. The photo is a fixed background
        (the theme forces background-attachment: fixed on WPBakery's parallax
        layer), so the band is a window onto a photo that stays put.
     2. four columns from 992px (4/12, 4/12, 2/12, 2/12), two-up from 768px,
        stacked below:
        call us, email us, the Facebook icon, back to top.
     3. the copyright bar, ruled at the top, split from 768px, centred below.
   -------------------------------------------------------------------------- */

.site-footer { padding-top: 60px; }

/* ---- 1. the photo band ---------------------------------------------------- */

.send_request {
  position: relative;
  overflow: hidden;
  /* Full bleed out of the container, as WPBakery's "stretch row" does. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-bottom: 50px;
  background: url("/assets/img/footer-cta.jpg") center / cover no-repeat;
}
.send_request-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/assets/img/footer-cta.jpg") 50% 0 / cover no-repeat fixed;
}
.send_request-inner { position: relative; z-index: 1; padding: 35px 15px 0; }

.empty-space { display: block; }
.empty-space--md { height: 70px; }
.empty-space--20 { height: 20px; }
@media (max-width: 991px) { .empty-space--md { display: none; } }

.send_request .widget-heading,
.send_request .subtitle { color: var(--white); }

/* WPBakery's large round button, as the original styles it. */
.btn-container { margin-bottom: 21.73913px; }
.btn-container--center { text-align: center; }
.vc-btn {
  display: inline-block;
  position: relative;
  padding: 24px 50px;
  border: 1px solid transparent;
  border-radius: 35px;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  transition: all 0.2s ease-in-out;
}
.vc-btn--gold,
.vc-btn--gold:hover,
.vc-btn--gold:focus { background-color: var(--gold); color: var(--white); }

/* ---- 2. the four columns -------------------------------------------------- */

.footer-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  padding-top: 20px;
}
/* WPBakery classes vc_col-sm-6 vc_col-sm-12 vc_col-md-4|2: in its stylesheet
   sm-6 comes after sm-12, so the columns go two-up from 768px, not stacked. */
.footer-col { width: 100%; padding: 35px 15px 0; }
@media (min-width: 768px) {
  .footer-col { width: 50%; }
}
@media (min-width: 992px) {
  .footer-col--4 { width: 33.33333333%; }
  .footer-col--2 { width: 16.66666667%; }
}

.footer-label { margin: 0 0 5px; }
.footer-phone {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  text-align: left;
}
.footer-phone a { color: var(--ink); }
.footer-phone a:hover,
.footer-phone a:focus { color: var(--blush); }

.footer-email { margin: 0 0 35px; }
.footer-email .mailto { font-size: 24px; line-height: 36px; color: var(--blush); }

.footer-facebook { display: inline-block; margin-bottom: 35px; vertical-align: top; }
.footer-facebook img { display: block; width: 96px; height: 96px; }

.footer-totop { margin: 0 0 35px; }
.scrollup {
  margin-left: -30px;
  padding: 8px 0 8px 30px;
  border-left: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rule);
}
.scrollup:hover,
.scrollup:focus { color: var(--blush); }
/* The arrow is glued to "top" (the original's is an ::after), so the two wrap
   together in a narrow column. */
.scrollup .nowrap { white-space: nowrap; }
.scrollup .icon {
  width: calc(1152em / 1792);
  margin-left: 15px;
  color: var(--blush);
  vertical-align: -2px;
}

/* ---- 3. copyright ---------------------------------------------------------- */

.footer-copyright { margin-top: 45px; background: var(--white); color: var(--body); }
.copyright-inner {
  display: flex;
  justify-content: space-between;
  padding: 45px 0;
  border-top: 1px solid var(--line);
  background: var(--white);
}
.copyright-inner p { margin: 0; }
@media (max-width: 767px) {
  .copyright-inner { display: block; text-align: center; }
}

/* Pages whose front matter says footerCta: false (the original's /faq/). */
.no-footer-cta .send_request { display: none; }

/* ---- utilities.css ---- */
/* ---- utilities -----------------------------------------------------------
   Last in the manifest, so these win. Keep the list short: a utility that
   needs a variant belongs in a component file instead.
   -------------------------------------------------------------------------- */

.mb-0 { margin-bottom: 0 !important; }
.text-center { text-align: center; }

@media print {
  .site-header, .topbar-mobile, .site-drawer, .nav-backdrop, .send_request,
  .footer-totop { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}