.elementor-kit-5{--e-global-color-primary:#4CAF82;--e-global-color-secondary:#17513A;--e-global-color-text:#F2F7F4;--e-global-color-accent:#0A0F0C;--e-global-color-brandhover:#63C899;--e-global-color-surfdeep:#0E1712;--e-global-color-surf2dark:#131D17;--e-global-color-surf3dark:#1A261F;--e-global-color-paper:#FAFBF9;--e-global-color-paperpure:#FFFFFF;--e-global-color-paper3:#F0F3EF;--e-global-color-muteddark:#93A79B;--e-global-color-mutedlight:#5F6D65;--e-global-color-dimdark:#708379;--e-global-color-dimlight:#6C7670;--e-global-color-featlight:#DCEAE1;--e-global-color-accentink:#07120C;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-size:50px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1.02em;--e-global-typography-primary-letter-spacing:-0.03em;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-size:25px;--e-global-typography-secondary-font-weight:800;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.05em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:16.5px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.55em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-size:11.5px;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0.2em;--e-global-typography-dispxl-font-family:"Archivo";--e-global-typography-dispxl-font-size:74px;--e-global-typography-dispxl-font-weight:800;--e-global-typography-dispxl-text-transform:uppercase;--e-global-typography-dispxl-line-height:1.02em;--e-global-typography-dispxl-letter-spacing:-0.03em;--e-global-typography-displ-font-family:"Archivo";--e-global-typography-displ-font-size:66px;--e-global-typography-displ-font-weight:800;--e-global-typography-displ-text-transform:uppercase;--e-global-typography-displ-line-height:1.02em;--e-global-typography-displ-letter-spacing:-0.03em;--e-global-typography-dispxs-font-family:"Archivo";--e-global-typography-dispxs-font-size:17px;--e-global-typography-dispxs-font-weight:800;--e-global-typography-dispxs-text-transform:uppercase;--e-global-typography-dispxs-line-height:1.1em;--e-global-typography-dispxs-letter-spacing:-0.01em;--e-global-typography-lede-font-family:"Archivo";--e-global-typography-lede-font-size:16px;--e-global-typography-lede-font-weight:400;--e-global-typography-lede-text-transform:none;--e-global-typography-lede-line-height:1.55em;--e-global-typography-lede-letter-spacing:0em;--e-global-typography-label-font-family:"Archivo";--e-global-typography-label-font-size:11px;--e-global-typography-label-font-weight:700;--e-global-typography-label-text-transform:uppercase;--e-global-typography-label-line-height:1.4em;--e-global-typography-label-letter-spacing:0.16em;--e-global-typography-button-font-family:"Archivo";--e-global-typography-button-font-size:15px;--e-global-typography-button-font-weight:700;--e-global-typography-button-text-transform:none;--e-global-typography-button-line-height:1.55em;--e-global-typography-button-letter-spacing:0em;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1023px){.elementor-kit-5{--e-global-typography-primary-font-size:39px;--e-global-typography-secondary-font-size:20px;--e-global-typography-dispxl-font-size:53px;--e-global-typography-displ-font-size:51px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:600px){.elementor-kit-5{--e-global-typography-primary-font-size:26px;--e-global-typography-secondary-font-size:18px;--e-global-typography-dispxl-font-size:31px;--e-global-typography-displ-font-size:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ---------- 0. BASE TYPE ------------------------------------------------
   From signature.css `body`. Family only reaches elements Elementor has not
   given an explicit typography global, which is most body copy on the site. */
body{
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:16.5px;
  line-height:1.55;
}

/* ==========================================================================
   JDiN BEATZ — Elementor global CSS layer
   Paste into: Elementor → Site Settings → Custom CSS
   Derived from mockups/assets/signature.css

   SCOPE RULE: this file carries ONLY what Elementor cannot express natively —
   the ground-token system, the Archivo width axis, and the four motion pieces.
   Anything Elementor CAN do (padding, colors on a single widget, flex gaps)
   is set in the editor against a global, NOT added here.

   No CSS reset here on purpose: Hello Elementor plus Elementor's own normalize
   already handle it, and a `*{margin:0}` reset fights the editor.
   ========================================================================== */

/* ---------- 1. GROUND TOKENS ---------------------------------------------
   Apply one of these as a container CSS class. Every component below styles
   through the tokens, so a section changes ground with one class change. */
.s-dark{
  --bg:#0A0F0C; --sur-2:#131D17; --sur-3:#1A261F;
  --ink:#F2F7F4; --muted:#93A79B; --dim:#6F8278;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --brand:#4CAF82; --brand-ink:#07120C; --feat:#17513A;
  background:var(--bg); color:var(--ink);
}
.s-deep{
  --bg:#0E1712; --sur-2:#16211B; --sur-3:#1C2822;
  --ink:#F2F7F4; --muted:#93A79B; --dim:#708379;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --brand:#4CAF82; --brand-ink:#07120C; --feat:#17513A;
  background:var(--bg); color:var(--ink);
}
.s-light{
  --bg:#FAFBF9; --sur-2:#FFFFFF; --sur-3:#F0F3EF;
  --ink:#0A0F0C; --muted:#5F6D65; --dim:#6C7670;
  --line:rgba(10,15,12,.12); --line-2:rgba(10,15,12,.24);
  --brand:#17513A; --brand-ink:#FAFBF9; --feat:#DCEAE1;
  background:var(--bg); color:var(--ink);
}
.s-accent{
  --bg:#4CAF82; --sur-2:#43A377; --sur-3:#3D9A6F;
  --ink:#06120B; --muted:rgba(6,18,11,.82); --dim:rgba(6,18,11,.76);
  --line:rgba(6,18,11,.18); --line-2:rgba(6,18,11,.34);
  --brand:#06120B; --brand-ink:#4CAF82; --feat:#3D9A6F;
  background:var(--bg); color:var(--ink);
}
:root{ --r:14px; --ri:10px; --ease:cubic-bezier(.16,1,.3,1); }

/* ---------- 2. ARCHIVO WIDTH AXIS ----------------------------------------
   DIVISION OF LABOUR: the Global Fonts own size, weight, transform,
   line-height and letter-spacing, and stay editable in Site Settings.
   These classes add ONLY the width axis, which Elementor has no control for.
   Do not re-declare font-size or weight here — that would shadow the global. */
.disp{ font-stretch:118%; text-wrap:balance; }
/* Emphasis inside a headline is the accent green on the SAME family, never an
   italic and never a second typeface. */
.disp em{ font-style:normal; color:var(--brand); }
.disp-112{ font-stretch:112%; }          /* card h3, item h3, table th */
.logo-mark{ font-stretch:118%; }

/* ---------- 3. GROUND-AWARE TYPE ----------------------------------------
   Colour only. These exist because the value depends on the ground the
   section declares, which a flat global colour cannot express. */
.lede{ color:var(--muted); max-width:50ch; }
.eyebrow{ color:var(--brand); display:block; }
.muted{ color:var(--muted); }
.dim{ color:var(--dim); }
.badge{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px;
  background:var(--feat); color:var(--ink); font-size:12.5px; font-weight:700; letter-spacing:.05em;
}
.tbc{
  border:1px dashed var(--line-2); color:var(--dim); font-style:italic; font-size:12.5px;
  padding:2px 9px; border-radius:999px;
  /* Not nowrap: some placeholders are a full sentence and would overflow. */
  white-space:normal; display:inline;
}
.more{
  font-size:14.5px; font-weight:700; color:var(--brand);
  border-bottom:2px solid var(--brand); padding-bottom:2px;
}
/* Hairline rules and surfaces that must follow the ground */
.hair-top{ border-top:1px solid var(--line); }
.hair-bottom{ border-bottom:1px solid var(--line); }
.surface-2{ background:var(--sur-2); border:1px solid var(--line); border-radius:var(--r); }

/* ---------- 4. BUTTONS ---------------------------------------------------
   Elementor Button widget plus one of these classes. Padding/radius live here so
   every button on the site stays identical without per-widget styling. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border-radius:999px; font-weight:700; font-size:15px;
  white-space:nowrap; border:1px solid transparent;
  transition:transform .18s var(--ease), background .18s, border-color .18s, color .18s;
}
.btn:active{ transform:scale(.98); }
.btn-acc{ background:#4CAF82; color:#07120C; }
.btn-acc:hover{ background:#63C899; transform:translateY(-1px); }
.btn-line{ border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn-line:hover{ border-color:var(--ink); }
.btn-ink{ background:var(--ink); color:var(--bg); }
.btn-ink:hover{ transform:translateY(-1px); opacity:.9; }

/* ---------- 5. PHOTO CARD ------------------------------------------------
   Built as a container carrying the photo as its BACKGROUND (native Elementor
   control), so only the scrim and the bottom-weighting live here. */
/* Sizing, padding and bottom-weighting are set natively on the container.
   Only the scrim, the radius and the hover lift live here. */
.card{
  position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
  transition:transform .25s var(--ease), border-color .25s;
}
.card:hover{ transform:translateY(-3px); border-color:rgba(76,175,130,.5); }
.card::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(6,11,8,.94) 14%,rgba(6,11,8,.1) 62%);
}
.card > *{ position:relative; z-index:1; }
.card .pill{
  position:absolute; top:16px; left:16px; z-index:2;
  background:var(--brand); color:#07120C;
  padding:6px 13px; border-radius:999px; width:auto;
}
.card .card-p{ color:#B7C7BD; }
.card .go{ display:inline-flex; gap:7px; align-items:center; margin-top:14px; }

/* ---------- 6. PACKAGE ROWS ---------------------------------------------
   Native Price List widget: its own dotted separator IS the reference's
   leader, so only the ground-aware rule and the tabular figures live here. */
.menu .elementor-price-list-item{
  padding:20px 0; border-bottom:1px solid var(--line);
}
.menu .elementor-price-list-price{ font-variant-numeric:tabular-nums; }
.menu .elementor-price-list-description{ max-width:44ch; margin-top:7px; }
.menu .elementor-price-list-separator{ border-bottom-style:dotted; }

/* ---------- 7. MOSAIC ----------------------------------------------------
   The columns, the gap and the 2x2 span are all set natively on the grid
   container, including the responsive column counts. Declaring
   grid-template-columns here would override Elementor's tablet/mobile values,
   so the only rule needed is the row height (see section 11). */

/* ---------- 8. SCHEDULE TABLE ------------------------------------------- */
.sched{ width:100%; border-collapse:collapse; }
.sched th, .sched td{ text-align:left; padding:15px 18px; font-size:15px; }
.sched thead th{
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid var(--line-2);
}
.sched tbody tr{ border-bottom:1px solid var(--line); transition:background .2s; }
.sched tbody tr:hover{ background:var(--sur-3); }
.sched tbody th{ font-stretch:112%; font-weight:800; font-size:16.5px; text-transform:uppercase; }
.sched .n{ color:var(--brand); font-variant-numeric:tabular-nums; font-weight:800; width:54px; }
.sched td{ color:var(--muted); }

/* ---------- 9. INCLUSIONS TICK LIST ------------------------------------- */
.incl .tick{
  flex:none; width:22px; height:22px; border-radius:50%; background:var(--feat);
  color:var(--brand); display:grid; place-items:center; font-size:11px; font-weight:800;
}

/* ---------- 10. MOTION --------------------------------------------------
   All four motion pieces, each gated on prefers-reduced-motion. */
.stamp{ width:clamp(96px,9.5vw,134px); height:clamp(96px,9.5vw,134px); }
.stamp text{
  font-size:14.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; fill:currentColor;
}
.diag{
  transform:rotate(-2.2deg); background:#4CAF82; color:#07120C; padding:15px 0;
  overflow:hidden; display:flex; margin:0 -6vw; width:112vw;
}
.diag-track{ display:flex; flex:none; gap:32px; padding-right:32px; align-items:center; }
.diag span{
  font-stretch:118%; font-weight:800; text-transform:uppercase;
  font-size:clamp(15px,1.8vw,22px); white-space:nowrap;
}

@media (prefers-reduced-motion: no-preference){
  .stamp{ animation:jb-spin 24s linear infinite; }
  @keyframes jb-spin{ to{ transform:rotate(360deg); } }
  .diag-track{ animation:jb-slide 30s linear infinite; }
  @keyframes jb-slide{ to{ transform:translateX(-100%); } }
}

/* ---------- 11. IMAGE FRAMING -------------------------------------------
   Aspect ratio and object-fit. Elementor sets neither, so there is no
   conflict with its layout variables. */
.phero-shot img{
  aspect-ratio:4/3; object-fit:cover; width:100%;
  border-radius:var(--r); border:1px solid var(--line);
}
.phero-shot{ position:relative; }
.phero-stamp{ position:absolute; right:14px; bottom:14px; z-index:2; }
.pair-a img, .pair-b img{
  aspect-ratio:3/4; object-fit:cover; width:100%; border-radius:var(--r);
}
/* The grid container supplies the columns and the 2x2 span natively. Only the
   ROW HEIGHT has no Elementor control: its rows control emits
   `repeat(N, 1fr)`, and 1fr against auto-height content collapses to zero.
   Neutralise that and use fixed auto-rows, as the reference does. */
/* Two class .elementor-kit-5s, because Elementor's own per-element rule
   (.elementor-element-xxxxxxx) has equal specificity and loads later. */
.elementor-element.mosaic{
  --e-con-grid-template-rows:none;
  grid-template-rows:none;
  grid-auto-rows:clamp(120px,14vw,198px);
}
.mosaic-cell{ overflow:hidden; min-height:0; }
.mosaic-cell, .mosaic-img, .mosaic-img .elementor-widget-container{ height:100%; }
.mosaic-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
.mosaic-cell:hover .mosaic-img img{ transform:scale(1.06); }

/* ---------- 12. REVIEW CARD --------------------------------------------- */
.rev{
  background:var(--sur-2); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:transform .25s var(--ease), border-color .25s;
}
.rev:hover{ transform:translateY(-3px); border-color:rgba(76,175,130,.45); }
.rev-ph img{ aspect-ratio:16/10; object-fit:cover; width:100%; display:block; }
.rev-bd{ padding:22px 24px 26px !important; }
.rev-q q{ quotes:"201C" "201D"; }
.rev .who b{ display:block; color:var(--ink); }
.rev .who{ color:var(--muted); margin-top:auto; }

/* ---------- 13. SMALL COMPONENTS ---------------------------------------- */
.crumbs{ color:var(--dim); font-size:12.5px; margin-bottom:20px; }
.crumbs a:hover{ color:var(--brand); }
.crumbs span{ opacity:.5; padding:0 6px; }
.crumbs b{ color:var(--muted); font-weight:400; }

.facts .elementor-icon-list-item{
  border-top:1px solid var(--line); padding:13px 0; align-items:flex-start;
}
.facts .elementor-icon-list-text{ display:flex; gap:16px; width:100%; }
.facts b{
  flex:none; width:104px; color:var(--dim); font-size:14px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.facts span{ font-size:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }

.incl .elementor-icon-list-item{
  border-bottom:1px solid var(--line); padding:15px 0; align-items:flex-start;
}
.incl b{ display:block; font-weight:700; font-size:15.5px; }
.incl span{ display:block; font-size:14px; color:var(--muted); margin-top:3px; }

.cta .elementor-widget-container{ text-align:center; }
.cta .tel{ margin-top:20px; font-variant-numeric:tabular-nums; }

/* ---------- 14. RESPONSIVE ----------------------------------------------
   Elementor breakpoints are set to tablet 1023 / mobile 600 to match.
   Only what Elementor cannot reflow on its own is repeated here. */
@media (max-width:1023px){
  .sched{ display:block; overflow-x:auto; white-space:nowrap; }
  .phero-stamp{ display:none; }
}
@media (max-width:600px){
  .facts .elementor-icon-list-text{ flex-direction:column; gap:4px; }
  .facts b{ width:auto; }
}

/* ---------- 15. HEADER --------------------------------------------------
   Fixed 70px bar. Page heroes already carry the matching top padding, so the
   header overlays nothing. */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:70;
  background:rgba(10,15,12,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.logo span{ color:var(--brand); }
.header-actions{ justify-content:flex-end; }
.site-header .tel{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Mega menu: Elementor renders this widget as .elementor-widget-n-menu */
.nav-links .e-n-menu-title-text{ white-space:nowrap; }
.sub-panel{ border:1px solid rgba(255,255,255,.12); border-radius:var(--r); }
.sub-item .elementor-icon-box-wrapper{ align-items:flex-start; }
.sub-item .elementor-icon-box-icon{
  width:34px; height:34px; border-radius:9px; background:var(--feat);
  display:grid; place-items:center; flex:none;
}
.sub-item .elementor-icon-box-icon i{ color:var(--brand); font-size:15px; }
.sub-item .elementor-icon-box-title{ margin-bottom:2px; }
.sub-item:hover{ background:var(--sur-3); border-radius:var(--ri); }
.sub-foot{ border-top:1px solid rgba(255,255,255,.09); }

/* ---------- 16. FOOTER -------------------------------------------------- */
.foot-h{ margin-bottom:15px; }
.foot-list .elementor-icon-list-item{ padding:0 0 9px; }
.foot-list .elementor-icon-list-text{ color:#C3D2C9; font-size:14.5px; }
.foot-list a:hover .elementor-icon-list-text{ color:var(--brand); }
.foot-blurb{ max-width:30ch; }
.foot-base{ border-top:1px solid var(--line); }
.foot-base a:hover{ color:var(--brand); }

/* ---------- 17. HEADER RESPONSIVE --------------------------------------- */
@media (max-width:1023px){
  .site-header .tel{ display:none; }
}

/* ---------- 18. HOMEPAGE HERO -------------------------------------------
   The headline overlapping the photograph is the composition; the negative
   margin is set natively on the heading. Only framing lives here. */
.hero-shot img{
  aspect-ratio:16/10; object-fit:cover; width:100%;
  border-radius:var(--r); border:1px solid var(--line);
}
.hero-shot-2 img{
  aspect-ratio:4/3; object-fit:cover; width:100%;
  border-radius:var(--r); border:1px solid var(--line);
}
.hero-h1{ position:relative; z-index:2; text-shadow:0 2px 32px rgba(4,10,6,.7); }
.hero-stamp{ flex:none; }
.hero-top .lede{ font-size:15px; }

/* ---------- 19. DIAGONAL MARQUEE ---------------------------------------
   Two identical tracks make the loop seamless. Rotation and the 30s
   translate have no Elementor control, so they live here. */
.diag-wrap{ overflow:hidden; background:#0A0F0C; }
/* Literal brand green on purpose: this band sits outside any ground, so
   var(--brand) would be undefined here and the band would render transparent. */
.diag{
  transform:rotate(-2.2deg); background:#4CAF82; color:#07120C;
  margin:0 -6vw; width:112vw; overflow:hidden;
}
/* Two .elementor-kit-5s: Elementor's container rule sets flex-shrink, which would
   squeeze the tracks and overlap the text instead of letting them run off. */
.diag > .diag-track{ flex:0 0 auto; padding-right:32px; align-items:center; }
.diag-text{ white-space:nowrap; }
@media (prefers-reduced-motion: no-preference){
  .diag-track{ animation:jb-slide 30s linear infinite; }
}

/* ---------- 20. PROOF STRIP --------------------------------------------- */
.stats{ border-top:1px solid var(--line-2); }
.stats .stat{ padding:24px 24px 0 0; }
.stats .stat + .stat{ border-left:1px solid var(--line); padding-left:24px; }
.stat-b{ font-variant-numeric:tabular-nums; }
.stat-s{ font-size:13.5px; color:var(--muted); }
.venues-k{ color:var(--dim); flex:none; }
.venues .sl{ color:var(--brand); }
@media (max-width:1023px){
  .stats .stat{ flex-basis:50%; }
  .stats .stat:nth-child(3){ border-left:none; padding-left:0; }
  .stats .stat:nth-child(n+3){ border-top:1px solid var(--line); margin-top:6px; }
}
@media (max-width:600px){
  .stats .stat + .stat{ border-left:none; padding-left:0; }
}

/* ---------- 21. ADD-ONS SPLIT ------------------------------------------- */
.blk-a{ position:relative; }
.blk-a .blk-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); }
.blk-stamp{ position:absolute; top:30px; right:30px; z-index:2; }
.menu-deep .elementor-price-list-item:last-child{ border-bottom:0; }

/* ---------- 22. BLOG CARDS ---------------------------------------------- */
.post .post-ph img{
  aspect-ratio:16/10; object-fit:cover; width:100%;
  border-radius:var(--r); transition:transform .7s var(--ease);
}
.post .post-ph{ overflow:hidden; border-radius:var(--r); margin-bottom:13px; }
.post:hover .post-ph img{ transform:scale(1.05); }
.post-cat{ margin-bottom:7px; }
.post-sub{ color:var(--dim); font-size:13px; margin-top:7px; }

/* ---------- 23. CONTACT DETAILS ----------------------------------------- */
.contact-list .contact-item{ padding:19px 0; border-bottom:1px solid var(--line); }
.contact-item .elementor-icon-box-icon{
  width:38px; height:38px; border-radius:10px; background:var(--feat);
  display:grid; place-items:center; flex:none;
}
.contact-item .elementor-icon-box-icon i{ color:var(--brand); font-size:16px; }
.contact-item .elementor-icon-box-title b{
  display:block; font-stretch:112%; font-weight:800; font-size:17px;
  letter-spacing:-.01em; color:var(--ink); margin-top:5px;
}
.contact-item .elementor-icon-box-title a:hover{ color:var(--brand); }

/* ---------- 24. SIDE CARD ------------------------------------------------ */
.side-card{
  background:var(--sur-2); border:1px solid var(--line); border-radius:var(--r);
}
.side{ position:sticky; top:96px; }
@media (max-width:1023px){ .side{ position:static; } }
.toc .elementor-icon-list-item{
  border-left:2px solid var(--line); padding:7px 0 7px 14px;
}
.toc .elementor-icon-list-item:hover{ border-left-color:var(--brand); }

/* ---------- 25. LONG-FORM PROSE ----------------------------------------- */
.prose{ max-width:68ch; font-size:17px; }
.prose > * + *{ margin-top:19px; }
.prose h2{
  font-stretch:118%; font-weight:800; text-transform:uppercase;
  letter-spacing:-.025em; line-height:1.08;
  font-size:clamp(21px,2.5vw,31px); margin-top:44px; color:var(--ink);
}
.prose h3{
  font-stretch:112%; font-weight:800; text-transform:uppercase;
  letter-spacing:-.015em; font-size:clamp(17px,1.9vw,21px);
  margin-top:32px; color:var(--ink);
}
.prose p{ color:var(--muted); }
.prose strong{ color:var(--ink); font-weight:700; }
.prose a{ color:var(--brand); border-bottom:1px solid var(--brand); }
.prose ul, .prose ol{
  padding-left:22px; color:var(--muted);
  display:flex; flex-direction:column; gap:9px;
}
.prose li::marker{ color:var(--brand); }

/* ---------- 26. FORM STYLING (WPForms) ----------------------------------- */
.wpforms-field-label{
  font-size:11px !important; font-weight:700 !important; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted) !important;
}
.wpforms-field input[type="text"], .wpforms-field input[type="email"],
.wpforms-field input[type="tel"], .wpforms-field input[type="date"],
.wpforms-field input[type="number"], .wpforms-field select,
.wpforms-field textarea{
  background:var(--sur-2); border:1px solid var(--line-2); border-radius:var(--ri);
  padding:13px 15px; color:var(--ink); font-family:inherit; font-size:16px;
  transition:border-color .18s; width:100%;
}
.wpforms-field input:focus, .wpforms-field select:focus, .wpforms-field textarea:focus{
  outline:none; border-color:var(--brand);
}
.wpforms-submit{
  background:#4CAF82 !important; color:#07120C !important; border:0 !important;
  border-radius:999px !important; padding:14px 28px !important;
  font-weight:700 !important; font-size:15px !important; cursor:pointer;
}
.wpforms-submit:hover{ background:#63C899 !important; }
/* The inline date band sits on the accent ground: underline-only fields. */
.dbf .wpforms-field input, .dbf .wpforms-field select{
  background:transparent; border:0; border-bottom:2px solid var(--line-2);
  border-radius:0; padding:10px 2px;
}
.dbf .wpforms-field input:focus, .dbf .wpforms-field select:focus{
  border-bottom-color:var(--ink);
}
.dbf .wpforms-submit{ background:var(--ink) !important; color:var(--bg) !important; }

/* ---------- 27. BLOG ARCHIVE -------------------------------------------- */
.chips .chip{
  padding:9px 17px; border-radius:999px; border:1px solid var(--line-2);
  transition:border-color .18s, color .18s, background .18s;
}
.chips .chip:hover{ border-color:var(--ink); color:var(--ink); }
.archive-posts .elementor-post{ margin-bottom:0; }
.archive-posts .elementor-post__thumbnail{
  border-radius:var(--r); overflow:hidden; aspect-ratio:16/10;
}
.archive-posts .elementor-post__thumbnail img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.archive-posts .elementor-post:hover .elementor-post__thumbnail img{ transform:scale(1.05); }
.archive-posts .elementor-post__title{ margin:7px 0; line-height:1.2; }
.archive-posts .elementor-post__read-more{
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); border-bottom:2px solid var(--brand); padding-bottom:2px;
}
.elementor-pagination .page-numbers{
  min-width:42px; height:42px; display:inline-grid; place-items:center;
  border-radius:999px; border:1px solid var(--line);
  font-size:14.5px; font-weight:700; padding:0 14px; color:var(--ink);
}
.elementor-pagination .page-numbers.current{
  background:var(--brand); border-color:var(--brand); color:var(--brand-ink);
}

/* ---------- 28. SINGLE POST --------------------------------------------- */
.post-hero-img img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r);
}
.meta-row .elementor-icon-list-item{ color:var(--dim); font-size:13.5px; }

/* ---------- 29. 404 ------------------------------------------------------ */
.e404-code{ opacity:.16; line-height:.85; }
.e404 h1{ margin-top:-.28em; position:relative; }

/* ---------- 30. POPUP ---------------------------------------------------- */
.popup-lead{ border-radius:var(--r); }
.popup-tel a{ color:var(--brand); border-bottom:1px solid var(--brand); }

/* ---------- 31. OVERFLOW GUARDS ------------------------------------------
   A flex item defaults to min-width:auto, so it refuses to shrink below its
   longest unbreakable string (a phone number, an email address) and pushes the
   whole row past the viewport. This is the standard fix and it applies to
   every nested container. */
.e-con.e-flex > .e-con{ min-width:0; }
/* Long values inside a narrow column must be allowed to break. */
.contact-item .elementor-icon-box-title b{ overflow-wrap:anywhere; }

/* ---------- 32. INLINE ICON SIZING ---------------------------------------
   With Inline Font Icons on, Elementor renders icons as <svg> with a viewBox
   and no width/height. Inside a fixed-size tile that SVG expands to hundreds
   of pixels and blows the row out sideways. Size it from the font-size, which
   is how the icon font behaved. */
.elementor-icon-box-icon .elementor-icon{
  display:inline-flex; align-items:center; justify-content:center; width:auto;
}
.elementor-icon-box-icon .e-font-icon-svg{ width:1em; height:1em; }
.contact-item .elementor-icon-box-icon .e-font-icon-svg{ width:16px; height:16px; }
.sub-item .elementor-icon-box-icon .e-font-icon-svg{ width:15px; height:15px; }


/* ---------- 3b. GROUND-AWARE COLOUR GUARD --------------------------------
   Elementor re-emits its own theme-style rules into every page, header and
   footer stylesheet: `.elementor-widget-text-editor{color:var(--e-global-color-text)}`
   and friends. Those are (0,1,0) and load AFTER this stylesheet, so they tied
   with the single-class rules in section 3 and won on source order. On light and
   accent grounds that painted body copy in the dark-ground ink #F2F7F4, which is
   1.04:1 against #FAFBF9 and therefore invisible. Three fixes, all needed.

   (a) Rebind Elementor's own text global to the ground's ink, so ANY widget
       resolves a readable colour even when it carries no design class. */
.s-dark, .s-deep, .s-light, .s-accent{ --e-global-color-text: var(--ink); }

/* (b) Hello Elementor's reset.css sets `a{color:#cc3366}` at (0,0,1). Every link
       the design did not colour rendered in the theme's pink: 3.9:1 on the dark
       ground, and off-palette everywhere. Links take the surrounding ink instead,
       which is what section 3 already assumes. */
.s-dark a:not(.elementor-button), .s-deep a:not(.elementor-button),
.s-light a:not(.elementor-button), .s-accent a:not(.elementor-button){ color: inherit; }

/* (c) Restore the intended tone where a design class sits on the widget wrapper
       and therefore ties with Elementor's widget rule. Doubling the class takes
       these to (0,2,0); the `.elementor-heading-title` variants clear the
       (0,2,0) heading rule and so are written at (0,3,0). */
.lede.lede, .muted.muted, .stat-s.stat-s{ color: var(--muted); }
.dim.dim, .crumbs.crumbs, .venues-k.venues-k, .post-sub.post-sub{ color: var(--dim); }
.more.more, .eyebrow.eyebrow{ color: var(--brand); }
.badge.badge, .btn-line.btn-line{ color: var(--ink); }
.eyebrow.eyebrow .elementor-heading-title{ color: var(--brand); }
.disp.disp .elementor-heading-title{ color: var(--ink); }
.post-sub.post-sub .elementor-heading-title{ color: var(--dim); }

/* ---------- 4b. BUTTON: STYLE THE ANCHOR, NOT THE WRAPPER ----------------
   Elementor puts a widget's `_css_classes` on the widget WRAPPER and renders the
   real control as a child `<a class="elementor-button">`. Section 4 therefore
   painted the wrapper green while the anchor inside kept Elementor's own default
   (#0A0F0C ground, 3px radius), which is why every CTA rendered as a dark square
   sitting inside a green pill instead of a single pill. All 58 buttons carry the
   right classes; only the .elementor-kit-5 target was wrong. Written at (0,3,0) so it
   clears `.elementor-widget-button .elementor-button` from the page stylesheet. */
.elementor-widget-button.btn{ background:transparent; border:0; padding:0; }
.btn.btn .elementor-button{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border-radius:999px; font-weight:700; font-size:15px;
  white-space:nowrap; border:1px solid transparent; text-decoration:none;
  transition:transform .18s var(--ease), background .18s, border-color .18s, color .18s;
}
.btn.btn .elementor-button:active{ transform:scale(.98); }
.btn.btn-acc .elementor-button{ background:#4CAF82; color:#07120C; }
.btn.btn-acc .elementor-button:hover{ background:#63C899; transform:translateY(-1px); }
.btn.btn-line .elementor-button{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn.btn-line .elementor-button:hover{ border-color:var(--ink); }
.btn.btn-ink .elementor-button{ background:var(--ink); color:var(--bg); }

/* ---------- 9. ELEMENTOR STRUCTURE MAP -----------------------------------
   The original port carried only what "Elementor cannot express natively" and
   left the rest to per-widget editor settings. Those settings were never
   applied, so 108 type and colour rules from signature.css had no effect on the
   live build: body copy fell back to the theme font, package cards rendered at
   Elementor's defaults, and both forms lost their layout entirely.

   This section restores those rules against the markup Elementor actually
   renders. Every value is copied from signature.css. Selectors are written one
   class deeper than Elementor's own widget rules, because the kit stylesheet
   loads BEFORE the per-page stylesheets and would otherwise lose every tie.
   ------------------------------------------------------------------------ */

/* ===== 9.1 FORMS — reference `.dbf` and `.form` on WPForms markup =========
   WPForms stacks every field in a block container. The reference date band is a
   single flex row and the contact form is a two-column grid. */

/* --- date band (.dbf): one inline row, underline-only fields --- */
.dbf .wpforms-field-container{
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
}
.dbf .wpforms-field-container .wpforms-field{
  flex:1 1 148px; padding:0; display:flex; flex-direction:column; gap:7px;
}
.dbf .wpforms-field-container .wpforms-field-hp{ display:none !important; }
.dbf .wpforms-field-label{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0; display:block;
}
.dbf .wpforms-field input,
.dbf .wpforms-field select{
  background:transparent; border:0; border-bottom:2px solid var(--line-2);
  border-radius:0; padding:10px 2px; color:var(--ink);
  font-family:inherit; font-size:16px; width:100%; box-shadow:none;
}
.dbf .wpforms-field input:focus,
.dbf .wpforms-field select:focus{ outline:none; border-bottom-color:var(--ink); box-shadow:none; }
.dbf .wpforms-field input::placeholder{ color:var(--dim); }
.dbf .wpforms-submit-container{ flex:0 0 auto; padding:0; margin:0; }
.dbf button.wpforms-submit{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:999px; border:1px solid transparent;
  font-family:inherit; font-weight:700; font-size:15px; white-space:nowrap;
  background:var(--ink); color:var(--bg); cursor:pointer;
}
.dbf button.wpforms-submit:hover{ opacity:.9; }

/* --- contact form (.form): two-column grid, boxed fields --- */
.form .wpforms-field-container{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.form .wpforms-field-container .wpforms-field{
  padding:0; display:flex; flex-direction:column; gap:8px;
}
/* Long fields run the full width, as `.form .f.full` does in the reference. */
.form .wpforms-field-container .wpforms-field.jdin-full,
.form .wpforms-field-container .wpforms-field-textarea,
.form .wpforms-field-container .wpforms-field-hp{ grid-column:1/-1; }
.form .wpforms-field-container .wpforms-field-hp{ display:none !important; }
.form .wpforms-field-label{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0; display:block;
}
.form .wpforms-field input,
.form .wpforms-field select,
.form .wpforms-field textarea{
  background:var(--sur-2); border:1px solid var(--line-2); border-radius:var(--ri);
  padding:13px 14px; color:var(--ink); font-family:inherit; font-size:16px;
  width:100%; box-shadow:none;
}
.form .wpforms-field input:focus,
.form .wpforms-field select:focus,
.form .wpforms-field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:none; }
.form .wpforms-field input::placeholder,
.form .wpforms-field textarea::placeholder{ color:var(--dim); }
.form .wpforms-field textarea{ resize:vertical; min-height:132px; }
.form .wpforms-submit-container{ grid-column:1/-1; justify-self:start; padding:0; }
.form button.wpforms-submit{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:999px; border:1px solid transparent;
  font-family:inherit; font-weight:700; font-size:15px; white-space:nowrap;
  background:#4CAF82; color:#07120C; cursor:pointer;
}
.form button.wpforms-submit:hover{ background:#63C899; }

/* ===== 9.2 PACKAGE CARDS — reference `.item` on the Price List widget ===== */
.menu.menu .elementor-price-list-title{
  font-stretch:112%; font-weight:800; font-size:17px;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.55;
  margin:0; color:var(--ink);
}
/* price and description typography are set on the widget (Elementor emits those
   at (0,4,0), which no kit rule can outrank). Only the max-width lives here. */
.menu.menu .elementor-price-list-description{ max-width:44ch; margin-top:7px; }
.menu.menu .elementor-price-list-separator{ border-bottom-style:dotted; border-bottom-width:2px; }
/* .elementor-price-list-header is the row wrapper holding title, leader and price. */
.menu.menu .elementor-price-list-header{ align-items:baseline; gap:10px; }

/* ===== 9.3 STATS AND VENUES ============================================== */
.stats .elementor-heading-title{
  font-stretch:118%; font-weight:800; font-size:clamp(23px,2.4vw,32px);
  line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums;
  text-transform:none;
}
.stats.stats .stat-s{ font-size:13.5px; }
.venues .venues-k{
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
.venues .elementor-heading-title{
  font-stretch:112%; font-weight:800; font-size:clamp(15px,1.6vw,20px);
  text-transform:uppercase; letter-spacing:-.01em;
}

/* ===== 9.4 SERVICE CARDS ================================================= */
.card .pill .elementor-heading-title{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-stretch:100%; line-height:1.2; color:#07120C;
}
.card .elementor-widget-text-editor{ font-size:14px; color:#B7C7BD; }
.card .go .elementor-heading-title{
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#4CAF82; font-stretch:100%;
}

/* ===== 9.5 FAQ — reference `.faq summary` on the Accordion widget ======== */
.faq .elementor-tab-title{
  font-stretch:112%; font-weight:800; font-size:clamp(16px,1.8vw,19px);
  text-transform:uppercase; letter-spacing:-.01em;
}
.faq .elementor-tab-content{ color:var(--muted); font-size:15.5px; }

/* ===== 9.6 BLOG — post cards and category chips ========================== */
.post .elementor-heading-title{
  font-stretch:112%; font-weight:800; font-size:16.5px; text-transform:uppercase;
  letter-spacing:-.015em; line-height:1.2;
}
.post .elementor-widget-text-editor{ font-size:14px; color:var(--muted); }
.chips .elementor-heading-title{
  font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  font-stretch:100%;
}

/* ===== 9.7 INCLUSIONS, REVIEWS, SIDE CARD, TOC ========================== */
.incl .elementor-icon-list-text{ font-size:15.5px; }
.rev .st{ letter-spacing:2px; font-size:13px; }
.rev q{ font-size:15.5px; line-height:1.5; }
.side-card .elementor-heading-title{
  font-stretch:112%; font-weight:800; font-size:16px;
  text-transform:uppercase; letter-spacing:-.01em;
}
.side-card .elementor-widget-text-editor{ font-size:14.5px; color:var(--muted); }
.side-card .elementor-icon-list-text{ font-size:14.5px; color:var(--muted); }
.toc .elementor-icon-list-text{ font-size:14.5px; color:var(--muted); }
.meta-row .elementor-icon-list-text{ font-size:13.5px; color:var(--dim); }

/* ===== 9.8 CONTACT DETAIL LIST ========================================== */
.contact-item .elementor-icon-box-title{
  font-stretch:112%; font-weight:800; font-size:17px; letter-spacing:-.01em;
}
.contact-item .elementor-icon-box-description{ font-size:14px; color:var(--muted); }

/* ===== 9.9 DISPLAY SIZES THAT ARE FLUID IN THE REFERENCE ================
   The typography globals carry a single fixed size each. The reference sizes
   these three with clamp(), so the live build was 10px over on the date band
   and 12px under on the closing call to action at 1440. */
.cta .disp .elementor-heading-title{ font-size:clamp(27px,4.6vw,62px); }
/* The date band section carries no dateband class, so key off the form it contains. */
.s-accent:has(.dbf) .disp .elementor-heading-title{ font-size:clamp(23px,3vw,40px); }

/* ===== 9.10 HERO AND 404 COMPOSITION ====================================
   The home headline lift is set natively on the widget (Advanced > Margin) now
   that the key is right, and section 18 already carries its z-index and shadow.
   Only the 404 heading, which has no widget-level margin, is set here. */
.e404 .disp .elementor-heading-title{ margin-top:-.32em; position:relative; }

/* ===== 9.11 DETAIL THE PORT ROUNDED OFF =================================
   Small values dropped when signature.css was ported. Each is one declaration
   the reference sets and the live build lost. */
.incl b{ letter-spacing:-.005em; }
.incl.incl span{ font-size:14px; color:var(--muted); }
.sched.sched tbody th{ letter-spacing:-.01em; }
.facts.facts b, .facts.facts span{ letter-spacing:.05em; }
.crumbs.crumbs{ font-size:12.5px; }
.rev.rev q{ font-size:15.5px; line-height:1.5; }

/* ===== 9.13 PRICE LIST COLOUR FOLLOWS THE GROUND ========================
   signature.css sets no colour on `.item h3` or `.item .amt`, so both take
   the ground ink. The add-ons block puts the amount in brand instead.
   Written at (0,3,0) to clear Elementor's own widget rule. */
.menu.menu .elementor-price-list-title,
.menu.menu .elementor-price-list-price{ color:var(--ink); }
.menu.menu .elementor-price-list-description{ color:var(--muted); }
.blk-b .menu.menu .elementor-price-list-price{ color:var(--brand); }

/* ===== 9.14 LINE HEIGHT RECOMPUTES FROM THE ELEMENT'S OWN SIZE ==========
   signature.css sets `line-height:1.55` on body as a UNITLESS number, so every
   element recomputes its leading from its own font-size. Elementor instead emits
   the typography global's line-height in `em`, which resolves to a fixed LENGTH
   on the widget and is then inherited by its children. So anywhere the design
   makes a child smaller than its widget - the spec rows, the inclusion lists,
   card and post copy - the child kept the widget's larger leading: 25.6px of
   leading on 14px text. That is the single largest remaining difference against
   the reference, at 185 elements across all 15 pages. */
.facts b, .facts span,
.incl b, .incl span,
.card .elementor-widget-text-editor,
.menu.menu .elementor-price-list-description,
.post .elementor-widget-text-editor,
.side-card .elementor-widget-text-editor,
.side-card .elementor-icon-list-text,
.toc .elementor-icon-list-text,
.meta-row .elementor-icon-list-text,
.contact-item .elementor-icon-box-description,
.stats.stats .stat-s,
.chips .elementor-heading-title{ line-height:1.55; }

/* Reference `.incl b` computes 14px, not the 15.5px of the row it sits in. */
.incl.incl b{ font-size:14px; }

/* The reference button takes the body's 1.55 leading, giving a 52px control.
   Elementor's own button line-height of 1.2 made it 48px. */
.btn.btn .elementor-button{ line-height:1.55; }

/* ===== 9.12 FEATURED PACKAGE ROW =======================================
   Generated by qa/gen-featured.mjs from the reference markup. Regenerate if
   the package order or the recommended package changes.

   The .elementor-kit-5 goes through the <li>: Elementor wraps each
   .elementor-price-list-item in its own <li>, so nth-child on the item
   itself is always 1 and never advances. */
/* home: reference highlights "Signature" (item 2 of 2) */
.elementor-39 .elementor-element-100006b .elementor-price-list > li:nth-child(2) .elementor-price-list-title,
.elementor-39 .elementor-element-100006b .elementor-price-list > li:nth-child(2) .elementor-price-list-price{ color:var(--brand); }

/* wedding: reference highlights "Signature" (item 2 of 2) */
.elementor-41 .elementor-element-100004a .elementor-price-list > li:nth-child(2) .elementor-price-list-title,
.elementor-41 .elementor-element-100004a .elementor-price-list > li:nth-child(2) .elementor-price-list-price{ color:var(--brand); }

/* corporate: reference highlights "Signature" (item 2 of 2) */
.elementor-42 .elementor-element-100004a .elementor-price-list > li:nth-child(2) .elementor-price-list-title,
.elementor-42 .elementor-element-100004a .elementor-price-list > li:nth-child(2) .elementor-price-list-price{ color:var(--brand); }

/* private: reference highlights "Essential" (item 1 of 2) */
.elementor-43 .elementor-element-100004a .elementor-price-list > li:nth-child(1) .elementor-price-list-title,
.elementor-43 .elementor-element-100004a .elementor-price-list > li:nth-child(1) .elementor-price-list-price{ color:var(--brand); }

/* holiday: reference highlights "Signature" (item 2 of 2) */
.elementor-44 .elementor-element-100004a .elementor-price-list > li:nth-child(2) .elementor-price-list-title,
.elementor-44 .elementor-element-100004a .elementor-price-list > li:nth-child(2) .elementor-price-list-price{ color:var(--brand); }

/* mitzvah: reference highlights "Signature" (item 1 of 2) */
.elementor-45 .elementor-element-100004a .elementor-price-list > li:nth-child(1) .elementor-price-list-title,
.elementor-45 .elementor-element-100004a .elementor-price-list > li:nth-child(1) .elementor-price-list-price{ color:var(--brand); }

/* photobooth: reference highlights "Photobooth" (item 1 of 2) */
.elementor-46 .elementor-element-100004a .elementor-price-list > li:nth-child(1) .elementor-price-list-title,
.elementor-46 .elementor-element-100004a .elementor-price-list > li:nth-child(1) .elementor-price-list-price{ color:var(--brand); }

/* ===== 9.15 BUTTONS =====================================================
   Three defects, all systemic, all confirmed against the reference with
   qa/probe-buttons.mjs. Every .elementor-kit-5 below is written to win on SPECIFICITY
   alone, because Elementor re-emits its widget rules into the header/page
   stylesheets, which load after the kit stylesheet - a tie loses on order.

   (a) The header and mega-menu CTAs rendered UPPERCASE with .2em tracking:
   193px wide against the reference's 140px. Elementor's base button rule binds
   text-transform and letter-spacing to the ACCENT typography global, which in
   this kit is the nav-link style. Body buttons escape it because they still
   carry the `button` global; the two header CTAs do not - fix-hdrbtn.php gave
   them custom typography and only re-stated family/size/weight/line-height, so
   both properties fell through to accent. signature.css `.btn` resets all three
   for every button, so port that reset rather than patch the two widgets. */
.btn.btn .elementor-button{ text-transform:none; letter-spacing:0; font-stretch:100%; }

/* (b) The reference resizes the header CTA at its own two nav breakpoints, and
   neither was ported. At <=1023px the nav collapses and the CTA moves into the
   drawer, where `.drawer .btn` restores the full 15px/14px-28px body size; at
   <=600px the bar CTA itself steps down to `nav.site .btn{padding:9px 15px;
   font-size:13px}`. One Elementor Mega Menu widget plays both the desktop `.sub`
   dropdown and the mobile drawer, so the drawer size is set by breakpoint. */
@media (max-width:1023px){
  header .e-n-menu-content .btn.btn.btn .elementor-button{ font-size:15px; padding:14px 28px; }
}
@media (max-width:600px){
  header .btn.btn.btn .elementor-button{ font-size:13px; padding:9px 15px; }
  header .e-n-menu-content .btn.btn.btn .elementor-button{ font-size:15px; padding:14px 28px; }
}

/* (c) The WPForms submit came out 161x41 against the reference's 163x46.
   Two causes. The 2px of width is section 9.1's own `.wpforms-submit{border:0
   !important}`, which outranks the `border:1px solid transparent` that the
   `.form`/`.dbf` rules below it set. The 5px of height is WPForms' own
   `div.wpforms-container-full button[type=submit]`, which pins an explicit
   `height:var(--wpforms-button-size-height)` and `line-height:100%` at (0,2,2)
   - one class more specific than `.form button.wpforms-submit`, so the padding
   and leading the component rule sets never decided the box at all. The
   reference button is a plain `<button class="btn">`: auto height, `normal`
   leading, 1px transparent border. */
.form button.wpforms-submit,
.dbf  button.wpforms-submit{
  height:auto !important;
  line-height:normal !important;
  border:1px solid transparent !important;
}

/* ===== 9.16 CONTAINER GUTTERS - THE REFERENCE `.wrap` ===================
   signature.css puts every section's content in `.wrap{max-width:1300px;
   margin:0 auto;padding:0 clamp(18px,3vw,40px)}`, so the content column is
   1220px at 1440, 722px at 768 and 354px at 390. The build set the kit's
   container width to 1300 but never ported the padding, and Elementor's own
   default gutter took over instead: `.e-con` resolves every side to
   `var(--container-default-padding-*, 10px)`, so each nested container added
   10px of its own on all four sides. The content column came out 1280 wide
   starting 30px left of the reference, and every nested row added 10px of
   vertical padding the reference does not have.

   Defining the four variables costs nothing in specificity - they are only the
   FALLBACK in each `--padding-*` declaration - so any padding the build set on
   a specific container still wins. The wrap inset then goes on `.e-con-inner`,
   which is where Elementor caps the boxed width. */
:root{
  --container-default-padding-top:0px;    --container-default-padding-right:0px;
  --container-default-padding-bottom:0px; --container-default-padding-left:0px;
}
.e-con.e-con-boxed > .e-con-inner{ padding-inline: clamp(18px,3vw,40px); }

/* ===== 9.17 FOOTER COLUMNS =============================================
   The reference footer is `.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr;
   gap:clamp(22px,3vw,42px)}`, dropping to `1fr 1fr` at 1023 and `1fr` with a
   26px gap at 600. The build made it a nowrap flex row with percentage widths
   and `flex_direction_tablet:column`, so at tablet all four columns stacked -
   a 432px-tall footer became 1035px, the single largest vertical error on
   every page. Elementor forces `--display:flex` on a flex container, so the
   grid has to be declared here; the doubled class clears the per-element gap
   and width rules Elementor emits at (0,2,0). */
.foot-grid.foot-grid{
  display:grid !important;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(22px,3vw,42px) !important;
}
.foot-grid.foot-grid > .e-con{ width:auto !important; }
@media (max-width:1023px){ .foot-grid.foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .foot-grid.foot-grid{ grid-template-columns:1fr; gap:26px !important; }
}

/* ===== 9.18 ICON LIST ROW PADDING ======================================
   Section 9.1 already ported `.incl li{padding:15px 0}` and `.facts li{padding:
   13px 0}` from the reference, but wrote them as `.incl .elementor-icon-list-item`
   - (0,2,0), which is exactly the specificity of Elementor's own
   `.elementor-widget-icon-list .elementor-icon-list-item`. The widget rule is
   re-emitted into every page stylesheet, which loads after the kit stylesheet,
   so the tie was decided on source order and the design rule never applied:
   every inclusion and spec row rendered with no vertical padding at all, the
   single largest remaining vertical error on the service pages. Doubling the
   ground class takes these to (0,3,0), which no source order can flip. */
.incl.incl .elementor-icon-list-item{
  padding:15px 0; border-bottom:1px solid var(--line); align-items:flex-start;
}
.facts.facts .elementor-icon-list-item{
  padding:13px 0; border-top:1px solid var(--line); align-items:flex-start;
}

/* ===== 9.19 FORMS ON THE ELEMENTOR FORM WIDGET =========================
   Both site forms moved off WPForms onto the Elementor Form widget, so the
   WPForms .elementor-kit-5s in section 9.1 no longer match anything. These rules port
   the same two reference designs onto the new markup:

     .form  contact page - `grid-template-columns:1fr 1fr;gap:18px`, boxed
            fields on --sur-2, full-width rows for venue/message/button/note.
     .dbf   date band - `display:flex;gap:12px;flex-wrap:wrap;align-items:
            flex-end`, fields `flex:1 1 148px`, underline-only controls.

   The ground class is repeated FOUR times. `{{WRAPPER}}` expands to
   `.elementor-47 .elementor-element.elementor-element-1000011` - THREE classes,
   not two. The Form widget writes its own style controls
   against `{{WRAPPER}} .elementor-field-group .elementor-field`, which is
   (0,4,0), and `{{WRAPPER}} .elementor-button[type="submit"]` at (0,3,1);
   those land in the page stylesheet, which loads after the kit stylesheet, so
   anything at or below (0,4,0) either ties and loses on source order or is
   simply outranked. `.form.form.form.form .elementor-field-group .elementor-field`
   is (0,5,0) and settles it. */

/* ---- groups and labels, shared ---- */
.form.form.form.form .elementor-field-group,
.dbf.dbf.dbf.dbf   .elementor-field-group{
  padding:0; margin:0; display:flex; flex-direction:column; align-items:stretch;
  width:auto; max-width:none;
}
/* Elementor gives each control `flex-basis:100%`. In the reference the group is
   a COLUMN flex, where that basis resolves against the height and stretches the
   control to fill the group - so it has to be reset to content sizing. */
.form.form.form.form .elementor-field-group > *,
.dbf.dbf.dbf.dbf   .elementor-field-group > *{ flex:0 0 auto; }

.form.form.form.form .elementor-field-label,
.dbf.dbf.dbf.dbf   .elementor-field-label{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); line-height:1.55; padding:0; margin:0;
}

/* Elementor wraps a select in a div and paints its own caret; the reference
   styles the bare control, so the wrapper is made transparent to layout. */
.form.form.form.form .elementor-select-wrapper,
.dbf.dbf.dbf.dbf   .elementor-select-wrapper{ display:block; }
.form.form.form.form .select-caret-down-wrapper,
.dbf.dbf.dbf.dbf   .select-caret-down-wrapper{ display:none; }

/* ---- contact form: two-column grid, boxed fields ---- */
.form.form.form.form .elementor-form-fields-wrapper{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0;
}
.form.form.form.form .elementor-field-group{ gap:8px; }
/* reference `.f.full`, plus the button and the note, span both columns */
.form.form.form.form .elementor-col-100,
.form.form.form.form .elementor-field-type-submit,
.form.form.form.form .elementor-field-type-html{ grid-column:1/-1; }

.form.form.form.form .elementor-field-group .elementor-field:not(.elementor-select-wrapper){
  background-color:var(--sur-2); border:1px solid var(--line-2);
  border-radius:var(--ri); padding:13px 15px; color:var(--ink);
  font-family:inherit; font-size:16px; line-height:normal; width:100%; height:auto;
  box-shadow:none; transition:border-color .18s;
}
.form.form.form.form .elementor-field-group .elementor-field:not(.elementor-select-wrapper):focus{
  outline:none; border-color:var(--brand); box-shadow:none;
}
.form.form.form.form .elementor-field-group .elementor-field:not(.elementor-select-wrapper)::placeholder{ color:var(--dim); }
.form.form.form.form .elementor-field-group textarea.elementor-field{ resize:vertical; min-height:132px; }
.form.form.form.form .note{ font-size:13px; color:var(--dim); margin:0; }

/* ---- date band: underline-only fields on the accent ground ---- */
.dbf.dbf.dbf.dbf .elementor-form-fields-wrapper{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:0;
}
.dbf.dbf.dbf.dbf .elementor-field-group{ flex:1 1 148px; gap:7px; }
.dbf.dbf.dbf.dbf .elementor-field-type-submit{ flex:0 0 auto; }

.dbf.dbf.dbf.dbf .elementor-field-group .elementor-field:not(.elementor-select-wrapper){
  background-color:transparent; border:0; border-bottom:2px solid var(--line-2);
  border-radius:0; padding:10px 2px; color:var(--ink);
  font-family:inherit; font-size:16px; line-height:normal;
  width:100%; height:auto; box-shadow:none;
}
.dbf.dbf.dbf.dbf .elementor-field-group .elementor-field:not(.elementor-select-wrapper):focus{
  outline:none; border-bottom-color:var(--ink); box-shadow:none;
}
.dbf.dbf.dbf.dbf .elementor-field-group .elementor-field:not(.elementor-select-wrapper)::placeholder{ color:var(--dim); }

/* ---- submit: the reference button is .btn-acc on contact, .btn-ink in the band ---- */
.form.form.form.form .e-form__buttons,
.dbf.dbf.dbf.dbf   .e-form__buttons{ padding:0; margin:0; }
.form.form.form.form .elementor-button,
.dbf.dbf.dbf.dbf   .elementor-button{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border-radius:999px; border:1px solid transparent;
  font-family:inherit; font-weight:700; font-size:15px; line-height:normal;
  letter-spacing:0; text-transform:none; font-stretch:100%;
  white-space:nowrap; width:auto; height:auto; cursor:pointer;
  transition:transform .18s var(--ease), background .18s, border-color .18s, color .18s;
}
.form.form.form.form .elementor-button{ background-color:#4CAF82; color:#07120C; }
.form.form.form.form .elementor-button:hover{ background-color:#63C899; transform:translateY(-1px); }
.dbf.dbf.dbf.dbf   .elementor-button{ background-color:var(--ink); color:var(--bg); }
.dbf.dbf.dbf.dbf   .elementor-button:hover{ transform:translateY(-1px); opacity:.9; }

/* Elementor's inline validation and success notices follow the ground tokens. */
.form.form.form.form .elementor-message,
.dbf.dbf.dbf.dbf   .elementor-message{ font-size:14px; color:var(--ink); }
.form.form.form.form .elementor-message.elementor-message-danger,
.dbf.dbf.dbf.dbf   .elementor-message.elementor-message-danger{ color:#E8705F; }

/* Elementor puts `.elementor-field` on the select WRAPPER, not the control, and
   styles the control itself through `{{WRAPPER}} .elementor-field-group
   .elementor-select-wrapper select` at (0,5,0). Adding the element takes these
   to (0,5,1). The box rules above carry `:not(.elementor-select-wrapper)` for
   the same reason - it both skips the wrapper, which must not be painted as a
   second box around the control, and matches Elementor own (0,5,0) .elementor-kit-5
   one class higher. */
.form.form.form.form .elementor-field-group .elementor-select-wrapper select{
  background-color:var(--sur-2); border:1px solid var(--line-2);
  border-radius:var(--ri); padding:13px 15px; color:var(--ink);
  font-family:inherit; font-size:16px; line-height:normal; width:100%; height:auto;
  box-shadow:none; -webkit-appearance:auto; appearance:auto;
}
.dbf.dbf.dbf.dbf .elementor-field-group .elementor-select-wrapper select{
  background-color:transparent; border:0; border-bottom:2px solid var(--line-2);
  border-radius:0; padding:10px 2px; color:var(--ink);
  font-family:inherit; font-size:16px; line-height:normal; width:100%; height:auto;
  box-shadow:none; -webkit-appearance:auto; appearance:auto;
}

/* The submit sits in a field group, which the rules above make a stretching
   column - that is what widened the button to the full row. The reference is
   `justify-self:start`, so the group packs it to the start instead. */
.form.form.form.form .elementor-field-type-submit,
.dbf.dbf.dbf.dbf   .elementor-field-type-submit{ align-items:flex-start; }
.form.form.form.form .elementor-field-type-submit .elementor-button{ background-color:#4CAF82; color:#07120C; }
.dbf.dbf.dbf.dbf   .elementor-field-type-submit .elementor-button{ background-color:var(--ink); color:var(--bg); }

/* The reference forms are block-level and fill their column: `.dbf` fills the
   date-band grid cell and `.form` fills the 1.15fr contact column, with the
   fields flexing inside. The Elementor widget instead shrink-wraps to the
   intrinsic width of its fields, leaving the date band 514px wide in a 582px
   cell, so it is stretched back here. */
.form.form.form.form,
.dbf.dbf.dbf.dbf{ width:100%; align-self:stretch; }

/* ===== 9.20 CONTACT COLUMNS ============================================
   Reference `.contact-grid{grid-template-columns:1.15fr .85fr;gap:clamp(28px,
   4.4vw,72px)}`, collapsing to one column at 1023. The build used a flex row
   with fixed 57%/43% widths and a fixed 72px gap; because the percentages are
   of the full row and the gap is added on top, the two columns overflow and
   shrink, and the form column came out 534px against the reference's 665px.
   Elementor forces `--display:flex` on a flex container, so the grid is
   declared here and the per-element widths are cleared. */
.contact-grid.contact-grid{
  display:grid !important;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4.4vw,72px) !important;
  align-items:start;
}
.contact-grid.contact-grid > .e-con{ width:auto !important; }
@media (max-width:1023px){ .contact-grid.contact-grid{ grid-template-columns:1fr; } }

/* Elementor always renders the submit group last, but the reference prints the
   note AFTER the button, inside the form. Grid honours `order`, so the note is
   moved past the submit rather than restructured. */
.form.form.form.form .elementor-field-type-html{ order:1; }/* End custom CSS */