@charset "utf-8";

/*
Theme Name: Archivia - Architecture & Interiors Photographer HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Keystone Correct & Plumb Line
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Split Menu
   3.5 Home Mega Menu
   3.6 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Arrows & Tabs
   7.2 Chips & Checks
   7.3 Accordion
   7.4 Post Cards
   7.5 Tables, Steps & Days
8. Cards
   8.1 Project Cards
   8.2 Packages
   8.3 Estimate Engine
   8.4 Team & Voices
   8.5 Practices
   8.6 Frames & Peeks
   8.7 Licensing
9. Home One
   9.1 Hero Slider
   9.2 The Practice
   9.3 The Building Rises
   9.4 Night Bands & Voices
   9.5 Call To Action
10. Home Two
   10.1 Night Search Hero
   10.2 The Archive Grid
   10.3 A Plan Lights Up
   10.4 Shared Shoot
11. Home Three
   11.1 Mist Ground & Carousel
   11.2 Passepartout Grid
   11.3 Interiors & Team
   11.4 Down The Stairwell
12. Inner Pages
   12.1 Sidebar & Widgets
   12.2 Rows, Choices & Pages
13. Inner Page Sections
   13.1 Booking Calendar & Choices
   13.2 Process & Proofing
   13.3 About & Team
   13.4 Booking Wizard
   13.5 Contact & Account
14. Projects, Packages & Licensing
   14.1 Projects & Gallery
   14.2 Project Singles
   14.3 Packages & Rates
   14.4 Practices & Licensing
   14.5 Voices Band
15. Blog & Account
   15.1 Blog List
   15.2 Blog Details
   15.3 Account Pages
   15.4 Coming Soon & 404
16. Subheader
17. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes) */
  --vc-ink: #111112;
  --vc-ink-rgb: 17, 17, 18;
  --vc-white: #FFFFFF;
  /* the base's lemon: fills and marks only (arrows, the plumb bob, guides, the selection); ink text sits on it */
  --vc-lemon: #5BC8F5;
  --vc-lemon-rgb: 91, 200, 245;
  --vc-on-lemon: #111112;
  /* drafting lines for the drawn plans and elevations */
  --vc-draft: #111112;
  /* the booking calendar's signals */
  --vc-free: #3F9468;
  --vc-hold: #D8A531;
  --vc-booked: #C4473A;
  /* semantic: white is the default; [data-theme="dark"] is the night studio */
  --vc-bg: #FFFFFF;
  --vc-bg-rgb: 255, 255, 255;
  --vc-band: #F5F5F4;
  --vc-band-rgb: 245, 245, 244;
  --vc-plate: #EFEFEE;
  --vc-surface: #FFFFFF;
  --vc-surface-rgb: 255, 255, 255;
  --vc-heading: #111112;
  --vc-heading-rgb: 17, 17, 18;
  --vc-text: #5F5F62;
  --vc-muted: #6B6B6E;
  --vc-line: #E3E3E3;
  --vc-line-2: rgba(17, 17, 18, 0.22);
  --vc-field: #F4F4F3;
  --vc-primary: #111112;
  --vc-on-primary: #FFFFFF;
  --vc-accent-text: #08627F;
  --vc-free-text: #23704A;
  --vc-booked-text: #A8352A;
  --vc-hold-text: #168A94;
  --vc-night: #0E0E0F;
  --vc-night-rgb: 14, 14, 15;
  --vc-shadow: 0 18px 44px rgba(17, 17, 18, 0.07);
  --vc-shadow-lg: 0 30px 70px rgba(17, 17, 18, 0.16);
  --vc-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* type: the base's Montserrat capitals, Literata for the copy */
  --vc-ff-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --vc-ff-body: 'Literata', Georgia, 'Times New Roman', serif;
  --vc-fs-h1: clamp(34px, 3.9vw, 66px);
  --vc-fs-h2: clamp(26px, 2.5vw, 40px);
  --vc-fs-h3: clamp(19px, 1.45vw, 23px);
  --vc-fs-h4: 18px;
  --vc-fs-h5: 15px;
  --vc-fs-h6: 12.5px;
  /* WebGL Brise-Soleil: the shadow fins' ink and strength */
  --gl-1: #111112;
  --gl-2: #5BC8F5;
  --gl-alpha: 0.075;
}
[data-theme="dark"] {
  --vc-bg: #0E0E0F;
  --vc-bg-rgb: 14, 14, 15;
  --vc-band: #161618;
  --vc-band-rgb: 22, 22, 24;
  --vc-plate: #202022;
  --vc-surface: #18181A;
  --vc-surface-rgb: 24, 24, 26;
  --vc-heading: #F2F2F2;
  --vc-heading-rgb: 242, 242, 242;
  --vc-text: #B4B4B8;
  --vc-muted: #A0A0A5;
  --vc-line: rgba(242, 242, 242, 0.12);
  --vc-line-2: rgba(242, 242, 242, 0.24);
  --vc-field: #1F1F21;
  --vc-primary: #F2F2F2;
  --vc-on-primary: #0E0E0F;
  --vc-accent-text: #5BC8F5;
  --vc-free-text: #7DCFA3;
  --vc-booked-text: #FF9283;
  --vc-hold-text: #97E9EE;
  --vc-night: #08080A;
  --vc-night-rgb: 8, 8, 10;
  --vc-draft: #F2F2F2;
  --vc-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  --vc-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
  --gl-1: #000000;
  --gl-2: #5BC8F5;
  --gl-alpha: 0.22;
}
/* bands that stay dark in both themes (the footer, Home 2's hero, the night bands) */
.is-night {
  --vc-heading: #F2F2F2;
  --vc-heading-rgb: 242, 242, 242;
  --vc-text: rgba(242, 242, 242, 0.74);
  --vc-muted: rgba(242, 242, 242, 0.66);
  --vc-line: rgba(242, 242, 242, 0.12);
  --vc-line-2: rgba(242, 242, 242, 0.26);
  --vc-accent-text: #5BC8F5;
  --vc-free-text: #7DCFA3;
  --vc-booked-text: #FF9283;
  --vc-hold-text: #97E9EE;
  --vc-surface: #1A1A1C;
  --vc-surface-rgb: 26, 26, 28;
  --vc-plate: #232325;
  --vc-field: rgba(242, 242, 242, 0.07);
  --vc-primary: #F2F2F2;
  --vc-on-primary: #111112;
  --vc-draft: #F2F2F2;
  --gl-1: #000000;
  --gl-2: #5BC8F5;
  --gl-alpha: 0.2;
  background-color: var(--vc-night);
  color: var(--vc-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--vc-bg);
  color: var(--vc-text);
  font-family: var(--vc-ff-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--vc-ease), background-color 0.3s var(--vc-ease);
}
a:hover {
  color: var(--vc-accent-text);
}
strong,
b {
  font-weight: 500;
  color: var(--vc-heading);
}
::selection {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
:focus-visible {
  outline: 2px solid var(--vc-heading);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(var(--vc-lemon-rgb), 0.9);
}

/*----- 1.1 Typography -----*/
/* the base's voice: Montserrat capitals tracked wide (h1 .24em, h2 .19em); Literata for the copy */
h1, h2, h3, h4, h5, h6,
.vc-h1, .vc-h2, .vc-h3, .vc-h4, .vc-h5, .vc-h6 {
  margin: 0;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-weight: 600;
  text-transform: uppercase;
}
h1,
.vc-h1 {
  font-size: var(--vc-fs-h1);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.24em;
}
h2,
.vc-h2 {
  font-size: var(--vc-fs-h2);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.19em;
}
h3,
.vc-h3 {
  font-size: var(--vc-fs-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
}
h4,
.vc-h4 {
  font-size: var(--vc-fs-h4);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
}
h5,
.vc-h5 {
  font-size: var(--vc-fs-h5);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
h6,
.vc-h6 {
  font-size: var(--vc-fs-h6);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.16em;
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
/* the lead under a title: Literata, a step larger */
.vc-lead {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--vc-text);
}
/* Montserrat figures: prices, dates, counts, the light's times */
.vc-num {
  font-family: var(--vc-ff-head);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.vc-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* R3 word rise: each word climbs out of a padded mask (main.js splits the words) */
.vc-words .w {
  display: inline-block;
  overflow: hidden;
  padding: 0.14em 0.08em 0.18em;
  margin: -0.14em -0.08em -0.18em;
  vertical-align: top;
}
.vc-words .w > span {
  display: inline-block;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.vc-bg-band {
  background-color: var(--vc-band);
}
/* photo band: one style everywhere (a cover photo under an ink wash from the copy side, white copy) */
.vc-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--vc-ink);
  --vc-heading: #FFFFFF;
  --vc-heading-rgb: 255, 255, 255;
  --vc-text: rgba(255, 255, 255, 0.86);
  --vc-muted: rgba(255, 255, 255, 0.74);
  --vc-accent-text: #5BC8F5;
  --vc-line: rgba(255, 255, 255, 0.2);
  --vc-line-2: rgba(255, 255, 255, 0.32);
  --vc-primary: #FFFFFF;
  --vc-on-primary: #111112;
  color: var(--vc-text);
}
.vc-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vc-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(14, 14, 15, 0.86) 0%, rgba(14, 14, 15, 0.62) 48%, rgba(14, 14, 15, 0.2) 100%);
}
.vc-photo-band.is-center::after {
  background: radial-gradient(ellipse at 50% 55%, rgba(14, 14, 15, 0.7) 0%, rgba(14, 14, 15, 0.52) 60%, rgba(14, 14, 15, 0.42) 100%);
}

/*----- 1.3 Section Titles -----*/
/* the base's centred spaced-caps title; an eyebrow in tiny tracked caps after a lemon square */
.vc-title {
  margin-bottom: 64px;
}
.vc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.vc-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: var(--vc-lemon);
  box-shadow: inset 0 0 0 1px rgba(var(--vc-ink-rgb), 0.18);
}
.vc-title h2 {
  max-width: 980px;
}
/* a short plumb line under a title: a hairline dropping to a lemon bob (draws down on reveal) */
.vc-rule {
  position: relative;
  display: block;
  width: 9px;
  height: 46px;
  margin-top: 24px;
  transform-origin: top center;
}
.vc-rule::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 1px;
  height: 34px;
  background: var(--vc-heading);
}
.vc-rule::after {
  content: "";
  position: absolute;
  left: 0;
  top: 33px;
  width: 9px;
  height: 13px;
  background: linear-gradient(180deg, var(--vc-heading) 0 28%, var(--vc-lemon) 28% 100%);
  clip-path: polygon(50% 100%, 0 38%, 22% 0, 78% 0, 100% 38%);
}
.vc-title .vc-lead {
  max-width: 680px;
  margin: 24px 0 0;
}
.vc-title.text-center h2,
.vc-title.text-center .vc-lead {
  margin-left: auto;
  margin-right: auto;
}
.vc-title.text-center .vc-rule,
.text-center .vc-rule {
  margin-left: auto;
  margin-right: auto;
}
.vc-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.vc-title.is-split .vc-lead {
  max-width: 480px;
  margin: 0;
}

/*----- 1.4 Buttons & Links -----*/
/* the base's square black button in tracked Montserrat caps; the hover takes the base's lemon, the arrow slides out
   and its twin slides in */
.vc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  padding: 0 32px;
  border: 0;
  border-radius: 2px;
  background: var(--vc-primary);
  color: var(--vc-on-primary);
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--vc-ease), color 0.35s var(--vc-ease), box-shadow 0.35s var(--vc-ease), transform 0.35s var(--vc-ease);
}
.vc-btn i {
  position: relative;
  font-size: 11px;
  transition: transform 0.4s var(--vc-ease), opacity 0.3s ease;
}
.vc-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -22px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.vc-btn:hover {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  box-shadow: 0 14px 30px rgba(var(--vc-ink-rgb), 0.14);
  transform: translateY(-2px);
}
.vc-btn:hover i.fa-arrow-right {
  transform: translateX(22px);
}
.vc-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.vc-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
/* tonal: a pale face, ink letters */
.vc-btn.is-tonal {
  background: var(--vc-plate);
  color: var(--vc-heading);
}
.vc-bg-band .vc-btn.is-tonal {
  background: var(--vc-surface);
}
.vc-btn.is-tonal:hover {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.vc-btn.is-light {
  background: #FFFFFF;
  color: var(--vc-ink);
}
.vc-btn.is-lemon {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.vc-btn.is-lemon:hover {
  background: #FFFFFF;
  color: var(--vc-ink);
}
.vc-btn.is-sm {
  height: 44px;
  padding: 0 20px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
}
.vc-btn.is-block {
  width: 100%;
}
.vc-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.is-night .vc-btn.is-tonal,
.vc-photo-band .vc-btn.is-tonal {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.is-night .vc-btn.is-tonal:hover,
.vc-photo-band .vc-btn.is-tonal:hover {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
/* "read more": tracked caps over a hairline that lengthens */
.vc-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.vc-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--vc-lemon);
  transition: width 0.45s var(--vc-ease);
}
.vc-more i {
  font-size: 10px;
  transition: transform 0.35s var(--vc-ease);
}
.vc-more:hover {
  color: var(--vc-heading);
}
.vc-more:hover::after {
  width: 100%;
}
.vc-more:hover i {
  transform: translateX(5px);
}
.vc-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

/*----- 1.5 Forms -----*/
.vc-field {
  position: relative;
  margin-bottom: 20px;
}
.vc-field label,
.vc-label {
  display: block;
  margin-bottom: 8px;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* tonal fields: a pale face, no outline; the focus draws an ink line under them */
.vc-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 48px 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: var(--vc-field);
  color: var(--vc-heading);
  font-family: var(--vc-ff-body);
  font-size: 16px;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.vc-bg-band .vc-input {
  background: var(--vc-surface);
}
.vc-input[type="number"] {
  padding-right: 12px;
}
textarea.vc-input {
  height: 170px;
  padding-top: 16px;
  resize: vertical;
}
.vc-input::placeholder {
  color: var(--vc-muted);
}
.vc-input:focus {
  border-bottom-color: var(--vc-heading);
  box-shadow: inset 0 -3px 0 var(--vc-lemon);
  outline: 0;
}
.vc-input.is-invalid {
  border-bottom-color: var(--vc-booked);
  box-shadow: inset 0 -1px 0 var(--vc-booked);
}
.vc-input[type="date"] {
  color-scheme: light;
}
[data-theme="dark"] .vc-input[type="date"],
.is-night .vc-input[type="date"] {
  color-scheme: dark;
}
.vc-field > i {
  position: absolute;
  right: 20px;
  top: 50px;
  color: var(--vc-heading);
  font-size: 14px;
  opacity: 0.7;
  pointer-events: none;
}
.vc-field.is-area > i {
  top: 54px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--vc-muted);
}
.form-status.is-ok {
  color: var(--vc-free-text);
}
.form-status.is-error {
  color: var(--vc-booked-text);
}
.vc-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.vc-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  accent-color: var(--vc-ink);
}
[data-theme="dark"] .vc-check input,
.is-night .vc-check input {
  accent-color: var(--vc-lemon);
}
/* a native range slider in the house colours */
.vc-range {
  width: 100%;
  accent-color: var(--vc-ink);
}
[data-theme="dark"] .vc-range {
  accent-color: var(--vc-lemon);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.vc-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vc-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vc-plate);
  color: var(--vc-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--vc-ease);
}
.vc-social a:hover {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  transform: translateY(-3px);
}
.is-night .vc-social a {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
/* a round portrait beside a name */
.vc-face {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.vc-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  font-size: 20px;
  transition: transform 0.4s var(--vc-ease), background-color 0.4s ease, color 0.4s ease;
}
.vc-play i {
  margin-left: 4px;
}
.vc-play:hover {
  background: #FFFFFF;
  color: var(--vc-ink);
  transform: scale(1.06);
}
/* the booking calendar's signals and the light: a round dot and its line */
.vc-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vc-muted);
}
.vc-dot.is-free,
[data-state="free"] > .vc-dot,
[data-state="open"] > .vc-dot {
  background: var(--vc-free);
  box-shadow: 0 0 0 4px rgba(63, 148, 104, 0.18);
}
.vc-dot.is-hold,
[data-state="hold"] > .vc-dot,
[data-state="blue"] > .vc-dot {
  background: var(--vc-hold);
  box-shadow: 0 0 0 4px rgba(216, 165, 49, 0.2);
}
.vc-dot.is-booked,
[data-state="booked"] > .vc-dot,
[data-state="onsite"] > .vc-dot {
  background: var(--vc-booked);
  box-shadow: 0 0 0 4px rgba(196, 71, 58, 0.18);
}
.vc-dot.is-closed,
[data-state="closed"] > .vc-dot {
  background: var(--vc-muted);
}
.vc-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--vc-heading);
}
.vc-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--vc-heading);
  font-size: 12px;
}
/* a small tag in tracked caps */
.vc-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* label / value rows: rates, credits, what a package includes (never bullet pills) */
.vc-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vc-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--vc-line);
  font-size: 15.5px;
}
.vc-rows li:first-child {
  border-top: 1px solid var(--vc-line);
}
.vc-rows li > span {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vc-rows li > b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.vc-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--vc-ink);
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: var(--vc-shadow-lg);
  transform: translate(-50%, 160%);
  transition: transform 0.5s var(--vc-ease);
}
.vc-toast i {
  color: var(--vc-lemon);
}
.vc-toast.is-shown {
  transform: translate(-50%, 0);
}
.vc-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--vc-ease), background-color 0.3s ease;
}
.vc-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.vc-back-top:hover {
  background: var(--vc-ink);
  color: #FFFFFF;
}
/* WebGL layers sit under a section's content */
.vc-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.vc-gl.is-on {
  opacity: 1;
}
/* line icons in two inks: ink lines on white (the default), white lines in the dark theme and on the night bands */
.vc-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
}
.vc-ico img {
  width: 100%;
  height: 100%;
}
.vc-ico .ico-light,
[data-theme="dark"] .vc-ico .ico-ink,
.is-night .vc-ico .ico-ink,
.vc-photo-band .vc-ico .ico-ink {
  display: none;
}
[data-theme="dark"] .vc-ico .ico-light,
.is-night .vc-ico .ico-light,
.vc-photo-band .vc-ico .ico-light {
  display: block;
}
/* the mark in two inks the same way */
.vc-ink-pair .ink-light,
[data-theme="dark"] .vc-ink-pair .ink-dark,
.is-night .vc-ink-pair .ink-dark {
  display: none;
}
[data-theme="dark"] .vc-ink-pair .ink-light,
.is-night .vc-ink-pair .ink-light {
  display: block;
}
/* avatar group: overlapping round faces, a +N, two short lines */
.vc-avatars {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.vc-avatars .faces {
  display: inline-flex;
}
.vc-avatars .faces img,
.vc-avatars .faces .more {
  width: 46px;
  height: 46px;
  margin-inline-start: -12px;
  border: 3px solid var(--vc-bg);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.vc-avatars .faces img:first-child {
  margin-inline-start: 0;
}
.vc-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
}
.vc-avatars .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: 14.5px;
  color: var(--vc-muted);
}
.vc-avatars .txt b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vc-bg-band .vc-avatars .faces img,
.vc-bg-band .vc-avatars .faces .more {
  border-color: var(--vc-band);
}
.is-night .vc-avatars .faces img,
.is-night .vc-avatars .faces .more,
.vc-photo-band .vc-avatars .faces img,
.vc-photo-band .vc-avatars .faces .more {
  border-color: var(--vc-ink);
}
/* the real review average and count */
.vc-review {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.vc-review > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--vc-plate);
  color: var(--vc-heading);
  font-size: 18px;
}
.vc-review .rv-score {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
}
.vc-review .rv-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vc-review small {
  color: var(--vc-muted);
  font-size: 13.5px;
}

/*----- 1.7 Keystone Correct & Plumb Line -----*/
/* Keystone Correct: a photo starts with converging verticals (a perspective tilt from its foot) and straightens to
   true; two lemon guides at its edges go from converging to parallel and fade (main.js drives the tilt) */
.vc-key {
  position: relative;
  overflow: hidden;
}
.vc-key > img,
.vc-key > .key-img {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}
.vc-key > .key-guide {
  position: absolute;
  top: -4%;
  bottom: -4%;
  z-index: 4;
  width: 1px;
  background: var(--vc-lemon);
  box-shadow: 0 0 0 0.5px rgba(var(--vc-ink-rgb), 0.25);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.vc-key > .key-guide.is-l {
  left: 16%;
}
.vc-key > .key-guide.is-r {
  right: 16%;
}
.js .vc-key.is-pending > img,
.js .vc-key.is-pending > .key-img {
  visibility: hidden;
}
/* plumb line: a hairline drops beside the card and a lemon bob swings once and settles */
.vc-plumb {
  position: relative;
}
.vc-plumb::before,
.vc-plumb::after {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  z-index: 6;
  pointer-events: none;
}
.vc-plumb::before {
  top: 0;
  width: 1px;
  height: calc(100% - 12px);
  background: var(--vc-heading);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.2, 1);
}
.vc-plumb::after {
  top: 0;
  width: 9px;
  height: 13px;
  margin-inline-start: -4px;
  background: linear-gradient(180deg, var(--vc-heading) 0 28%, var(--vc-lemon) 28% 100%);
  clip-path: polygon(50% 100%, 0 38%, 22% 0, 78% 0, 100% 38%);
  opacity: 0;
  transition: top 0.7s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.2s ease;
}
.vc-plumb:hover::before,
.vc-plumb:focus-within::before {
  transform: scaleY(1);
}
.vc-plumb:hover::after,
.vc-plumb:focus-within::after {
  top: calc(100% - 13px);
  opacity: 1;
  animation: vc-bob 1.4s 0.55s ease-out both;
}
@keyframes vc-bob {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(4px);
  }
  42% {
    transform: translateX(-3px);
  }
  64% {
    transform: translateX(1.5px);
  }
  82% {
    transform: translateX(-0.6px);
  }
  100% {
    transform: translateX(0);
  }
}
/* inside a slider or a clipped frame the line drops just inside the card instead */
.swiper .vc-plumb::before,
.swiper .vc-plumb::after,
.vc-plumb.is-inside::before,
.vc-plumb.is-inside::after {
  inset-inline-start: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .vc-plumb:hover::after {
    animation: none;
  }
}

/*======================
2. Preloader
========================*/
/* Plan to Elevation: a floor plan draws on, tilts back and its walls rise into the south elevation; the name comes up
   under the ground line and the panel lifts (main.js draws the house on the canvas) */
.vc-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--vc-bg);
  pointer-events: none;
}
.js .vc-preloader {
  pointer-events: auto;
}
.no-js .vc-preloader,
.vc-preloader.is-done {
  display: none;
}
.pre-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* the drawing's title block, top left: plan, then elevation */
.pre-label {
  position: absolute;
  left: 44px;
  top: 40px;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.pre-scale {
  position: absolute;
  right: 44px;
  top: 40px;
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.pre-mark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
}
.pre-mark img {
  height: 26px;
  width: auto;
}
.pre-mark .logo-light,
[data-theme="dark"] .pre-mark .logo-main {
  display: none;
}
[data-theme="dark"] .pre-mark .logo-light {
  display: block;
}
.mk-line {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/*======================
3. Header
========================*/
/* Archivia's header in three moods: style one is the base's white bar (logo left, the tiny tracked menu right; Home 1
   and the inner pages), style two the same bar laid transparent over Home 2's night hero, style three the base's
   centred logo between two halves of the menu (Home 3). */
.vc-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--vc-bg);
  --hd-ink: var(--vc-heading);
  --hd-hover: var(--vc-heading);
  --hd-icon: var(--vc-plate);
  --hd-line: var(--vc-line);
  --hd-top: var(--vc-band);
  --hd-top-ink: var(--vc-text);
}
.vc-header .wide {
  display: flex;
  align-items: center;
  padding: 0 44px;
}
.vc-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.vc-logo img {
  height: 22px;
  width: auto;
}
.vc-logo .logo-light,
[data-theme="dark"] .vc-logo .logo-main {
  display: none;
}
[data-theme="dark"] .vc-logo .logo-light {
  display: block;
}
/* over the night hero the logo is always the white one */
.header-style-two:not(.is-sticky) .vc-logo .logo-main {
  display: none;
}
.header-style-two:not(.is-sticky) .vc-logo .logo-light {
  display: block;
}
.header-style-two {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  --hd-bar: transparent;
  --hd-ink: #FFFFFF;
  --hd-hover: #FFFFFF;
  --hd-icon: rgba(255, 255, 255, 0.12);
  --hd-line: rgba(255, 255, 255, 0.14);
  --hd-top: rgba(0, 0, 0, 0.3);
  --hd-top-ink: rgba(255, 255, 255, 0.82);
}

/*----- 3.1 Top Bar -----*/
/* the light today: tonight's blue hour at the studio and the next shoot day; links, currency, language */
.header-top {
  height: 40px;
  background: var(--hd-top);
  color: var(--hd-top-ink);
  font-size: 13.5px;
  overflow: visible;
  transition: height 0.4s var(--vc-ease), opacity 0.3s ease;
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-top a:hover {
  color: var(--hd-ink);
}
.vc-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.vc-live b,
.header-top b {
  font-weight: 500;
  color: var(--hd-ink);
}
.header-top .top-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header-top .top-light i {
  color: var(--hd-ink);
  font-size: 12px;
}
.header-top .top-right > a {
  position: relative;
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.header-top .vc-lang .lang-btn,
.header-top .vc-cur .cur-btn {
  height: 28px;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-family: var(--vc-ff-head);
  font-size: 11px;
}
.header-top .vc-lang .lang-btn:hover,
.header-top .vc-lang .lang-btn[aria-expanded="true"],
.header-top .vc-cur .cur-btn:hover,
.header-top .vc-cur .cur-btn[aria-expanded="true"] {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.header-top .top-right > a + a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--vc-lemon);
  transform: translateY(-50%);
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 96px;
  gap: 40px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.vc-theme-toggle .ti-sun,
[data-theme="dark"] .vc-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .vc-theme-toggle .ti-sun {
  display: inline-block;
}
.header-actions .header-btn {
  margin-left: 8px;
}
.header-style-two:not(.is-sticky) .header-btn {
  background: #FFFFFF;
  color: var(--vc-ink);
}
.header-style-two:not(.is-sticky) .header-btn:hover {
  background: var(--vc-lemon);
}
/* the base's menu mark: three short lines, the middle one shorter */
.vc-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.vc-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--hd-ink);
  transition: width 0.3s var(--vc-ease);
}
.vc-menu-toggle span:nth-child(2) {
  width: 14px;
}
.vc-menu-toggle span:nth-child(3) {
  width: 18px;
}
.vc-menu-toggle:hover span {
  width: 22px;
}

/*----- 3.3 Main Menu -----*/
/* the base's menu: tiny Montserrat capitals, tracked; no underline - hover and the current page by colour only */
.vc-nav {
  margin-left: auto;
}
.vc-nav > ul {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vc-nav li {
  position: relative;
}
.vc-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 38px 0;
  color: var(--hd-ink);
  font-family: var(--vc-ff-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.62;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.vc-nav > ul > li > a i {
  font-size: 7px;
  opacity: 0.7;
  transition: transform 0.3s var(--vc-ease);
}
.vc-nav > ul > li:hover > a,
.vc-nav > ul > li.active > a {
  color: var(--hd-hover);
  opacity: 1;
}
.vc-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.vc-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -28px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  background: var(--vc-surface);
  box-shadow: var(--vc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--vc-ease), transform 0.35s var(--vc-ease), visibility 0.3s;
}
.vc-nav .sub-menu::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 3px;
  background: var(--vc-lemon);
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.vc-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.vc-nav li:hover > .sub-menu,
.vc-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.vc-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 28px;
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s var(--vc-ease), padding 0.35s var(--vc-ease);
}
.vc-nav .sub-menu a i {
  font-size: 8px;
  color: var(--vc-muted);
}
.vc-nav .sub-menu li:hover > a,
.vc-nav .sub-menu li.active > a {
  padding-left: 36px;
  color: var(--vc-heading);
}
.vc-nav .sub-menu .sub-menu {
  top: -16px;
  left: 100%;
}
.vc-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.4 Split Menu -----*/
/* style three: the logo centred between the two halves of the menu (the base's centred-logo home) */
.header-style-three .header-main .wide {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
}
.header-style-three .vc-nav {
  margin: 0;
}
.header-style-three .vc-nav.is-left > ul {
  justify-content: flex-end;
}
.header-style-three .hd-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.header-style-three .vc-logo {
  justify-self: center;
}
.header-style-three .vc-logo img {
  height: 24px;
}
.header-style-three .header-right {
  margin: 0;
}

/*----- 3.5 Home Mega Menu -----*/
.vc-nav .has-mega {
  position: static;
}
.vc-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(980px, calc(100vw - 60px));
  padding: 30px;
  background: var(--vc-surface);
  box-shadow: var(--vc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--vc-ease), transform 0.35s var(--vc-ease), visibility 0.3s;
}
.vc-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.vc-nav .mega-menu::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 3px;
  background: var(--vc-lemon);
}
.vc-nav .has-mega:hover > .mega-menu,
.vc-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--vc-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--vc-plate);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--vc-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mega-meta b {
  font-family: var(--vc-ff-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mega-card.is-current .mega-meta small,
.mega-card:hover .mega-meta small {
  color: var(--vc-heading);
}
.mega-card.is-current .shot,
.mega-card:hover .shot {
  box-shadow: 0 0 0 3px var(--vc-lemon);
}

/*----- 3.6 Sticky Header -----*/
.vc-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  --hd-bar: var(--vc-bg);
  --hd-ink: var(--vc-heading);
  --hd-hover: var(--vc-heading);
  --hd-icon: var(--vc-plate);
  --hd-line: var(--vc-line);
  animation: vc-header-in 0.6s var(--vc-ease) both;
}
.vc-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
.vc-header.is-sticky .header-main {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
}
.vc-header.is-sticky .header-main .wide {
  height: 74px;
}
.vc-header.is-sticky .vc-nav > ul > li > a {
  padding: 27px 0;
}
.vc-header-spacer {
  display: none;
}
.vc-header-spacer.is-on {
  display: block;
}
@keyframes vc-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.vc-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--vc-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--vc-ease), box-shadow 0.6s var(--vc-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.vc-offcanvas.open {
  box-shadow: var(--vc-shadow-lg);
  transform: none;
}
.vc-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(12, 12, 12, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.vc-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--vc-line);
}
.offcanvas-head .vc-logo img {
  height: 22px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--vc-plate);
  color: var(--vc-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--vc-ease);
}
.offcanvas-close:hover {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--vc-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--vc-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--vc-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--vc-line);
  color: var(--vc-text);
  font-size: 15.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--vc-lemon);
  color: var(--vc-heading);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  font-family: var(--vc-ff-head);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vc-lemon);
}
.oc-phone {
  color: #FFFFFF;
  font-family: var(--vc-ff-head);
  font-size: 22px;
  font-weight: 500;
}
.oc-mail {
  color: var(--vc-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}
.oc-live {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 32px;
  background: var(--vc-band);
  color: var(--vc-heading);
  font-family: var(--vc-ff-body);
  font-size: 14px;
}
.offcanvas-foot .vc-cur .cur-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.vc-select {
  position: relative;
}
.vc-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.vc-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--vc-field);
  font-size: 15px;
  text-align: left;
  color: var(--vc-heading);
  transition: border-color 0.3s var(--vc-ease);
}
.vc-select.is-open .select-button,
.vc-select .select-button:hover {
  border-color: var(--vc-heading);
}
.vc-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vc-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--vc-accent-text);
  transition: transform 0.35s var(--vc-ease);
}
.vc-select.is-open .select-button i {
  transform: rotate(180deg);
}
.vc-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--vc-surface);
  border-top: 3px solid var(--vc-lemon);
  box-shadow: var(--vc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--vc-ease), transform 0.3s var(--vc-ease), visibility 0.3s;
}
.vc-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 3px solid var(--vc-lemon);
  transform: translateY(-10px);
}
.vc-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.vc-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--vc-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--vc-ease), color 0.2s var(--vc-ease);
}
.vc-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vc-accent-text);
}
.vc-select .select-option .option-meta.is-none {
  color: var(--vc-muted);
}
.vc-select .select-option.is-focused,
.vc-select .select-option:hover {
  background-color: var(--vc-plate);
}
.vc-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.vc-select .select-option.is-selected {
  color: var(--vc-accent-text);
}
.vc-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--vc-accent-text);
}
.vc-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--vc-plate);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.vc-lang {
  position: relative;
  flex-shrink: 0;
}
.vc-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--vc-ff-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vc-lang .lang-btn:hover,
.vc-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--vc-ink);
}
.vc-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.vc-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.vc-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.vc-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--vc-plate);
  color: var(--vc-heading);
}
.vc-lang.is-icon .lang-btn:hover,
.vc-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.vc-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 0;
  background: var(--vc-surface);
  box-shadow: var(--vc-shadow-lg);
  font-family: var(--vc-ff-body);
  text-align: start;
  white-space: normal;
}
.vc-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.vc-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.vc-lang .lang-menu[hidden] {
  display: none;
}
.vc-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vc-muted);
}
.vc-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vc-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--vc-line);
}
.vc-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--vc-heading);
  font-family: var(--vc-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.vc-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--vc-muted);
}
.vc-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--vc-accent-text);
  opacity: 0;
}
.vc-lang .lang-item:hover,
.vc-lang .lang-item[aria-pressed="true"] {
  background: var(--vc-plate);
}
.vc-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.vc-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.vc-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--vc-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--vc-muted);
}
/* the currency picker beside it: the same face, a menu of three currencies; every price on the page repaints */
.vc-cur {
  position: relative;
  flex-shrink: 0;
}
.vc-cur .cur-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vc-cur .cur-btn b {
  font-weight: 500;
  color: var(--vc-hd-ink, inherit);
}
.vc-cur .cur-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.vc-cur .cur-btn:hover,
.vc-cur .cur-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--vc-ink);
}
.vc-cur .cur-btn:hover b,
.vc-cur .cur-btn[aria-expanded="true"] b {
  color: inherit;
}
.vc-cur .cur-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.vc-cur.is-up .cur-btn {
  height: 46px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.1);
}
.vc-cur .cur-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 232px;
  padding: 10px;
  background: var(--vc-surface);
  box-shadow: var(--vc-shadow-lg);
  font-family: var(--vc-ff-body);
  text-align: start;
}
.vc-cur.is-up .cur-menu {
  top: auto;
  bottom: calc(100% + 12px);
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.vc-cur .cur-menu[hidden] {
  display: none;
}
.vc-cur .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vc-muted);
}
.vc-cur .cur-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  color: var(--vc-heading);
  font-size: 14.5px;
  font-weight: 500;
  text-align: start;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.vc-cur .cur-item b {
  width: 18px;
  color: var(--vc-accent-text);
  font-family: var(--vc-ff-head);
  font-weight: 500;
}
.vc-cur .cur-item i {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--vc-accent-text);
  opacity: 0;
}
.vc-cur .cur-item:hover,
.vc-cur .cur-item[aria-pressed="true"] {
  background: var(--vc-plate);
}
.vc-cur .cur-item[aria-pressed="true"] i {
  opacity: 1;
}

/*======================
7. Components
========================*/
/*----- 7.1 Arrows & Tabs -----*/
/* the base's slider arrow: a small lemon square with an ink chevron */
.vc-arrow,
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 0;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--vc-ease);
}
.vc-arrow:hover,
.slider-arrow:hover {
  background: var(--vc-ink);
  color: #FFFFFF;
}
.vc-arrow.swiper-button-disabled,
.slider-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}
.is-night .vc-arrow:hover,
.vc-photo-band .vc-arrow:hover,
[data-theme="dark"] .vc-arrow:hover {
  background: #FFFFFF;
  color: var(--vc-ink);
}
.rail-arrows {
  display: flex;
  gap: 8px;
}
.title-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
  text-align: end;
}
/* the slide counter: 01 - 03 on a short rule */
.hero-count {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}
.hero-count i {
  display: block;
  width: 34px;
  height: 1px;
  background: var(--vc-line-2);
}
/* filter tabs: the base's category links in tiny tracked caps, the active one on a lemon bar */
.vc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
}
.vc-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.vc-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 3px;
  background: var(--vc-lemon);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--vc-ease);
}
.vc-tabs button:hover,
.vc-tabs button.is-active {
  color: var(--vc-heading);
}
.vc-tabs button.is-active::after {
  transform: scaleX(1);
}
.vc-count {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vc-empty {
  margin: 40px 0 0;
  text-align: center;
}
/* a segmented control: tonal faces, the pressed one in ink */
.vc-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--vc-plate);
}
.vc-seg button {
  height: 40px;
  padding: 0 16px;
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vc-seg button:hover {
  color: var(--vc-heading);
}
.vc-seg button.is-on,
.vc-seg button.is-active {
  background: var(--vc-primary);
  color: var(--vc-on-primary);
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--vc-heading);
  opacity: 0.25;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--vc-lemon);
  box-shadow: inset 0 0 0 1px rgba(var(--vc-ink-rgb), 0.3);
}
.is-hidden,
.is-unmatched {
  display: none !important;
}

/*----- 7.2 Chips & Checks -----*/
/* a tonal check card: a pale face, the checked one in ink with a lemon edge */
.vc-chip-check {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.vc-chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vc-chip-check > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  background: var(--vc-plate);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.vc-chip-check b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vc-chip-check small {
  color: var(--vc-muted);
  font-size: 13.5px;
}
.vc-chip-check input:checked + span {
  background: var(--vc-primary);
  box-shadow: inset 4px 0 0 var(--vc-lemon);
}
.vc-chip-check input:checked + span b,
.vc-chip-check input:checked + span small {
  color: var(--vc-on-primary);
}
.vc-chip-check input:focus-visible + span {
  outline: 2px solid var(--vc-heading);
  outline-offset: 2px;
}
.vc-chip-check.is-fixed > span {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--vc-line);
}
.vc-bg-band .vc-chip-check > span {
  background: var(--vc-surface);
}
/* a package check card: the line icon, the name, the unit price; a lemon tick when on */
.vc-pk-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.vc-pk-check {
  position: relative;
  display: block;
  cursor: pointer;
}
.vc-pk-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pkc-face {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px 18px 16px;
  background: var(--vc-plate);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.pkc-face .vc-ico {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}
.pkc-face b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pkc-face small {
  color: var(--vc-muted);
  font-size: 13.5px;
}
.pkc-tick {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--vc-surface);
  color: transparent;
  font-size: 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vc-pk-check input:checked ~ .pkc-face {
  background: var(--vc-surface);
  box-shadow: inset 0 0 0 2px var(--vc-heading);
}
.vc-pk-check input:checked ~ .pkc-tick {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.vc-pk-check input:focus-visible ~ .pkc-face {
  outline: 2px solid var(--vc-heading);
  outline-offset: 2px;
}

/*----- 7.3 Accordion -----*/
.vc-accordion .acc-item {
  border-bottom: 1px solid var(--vc-line);
}
.vc-accordion .acc-item:first-child {
  border-top: 1px solid var(--vc-line);
}
.acc-title {
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: start;
  text-transform: uppercase;
}
.acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--vc-plate);
  color: var(--vc-heading);
  font-size: 10px;
  transition: transform 0.35s var(--vc-ease), background-color 0.3s ease, color 0.3s ease;
}
.acc-item.is-open .acc-head i {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  transform: rotate(45deg);
}
.acc-body {
  padding: 0 60px 24px 0;
}
.acc-body p {
  margin: 0;
}

/*----- 7.4 Post Cards -----*/
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pcd-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pcd-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--vc-ease);
}
.post-card:hover .pcd-img img {
  transform: scale(1.04);
}
.pcd-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 22px 0 0;
}
.pcd-meta {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pcd-meta b {
  margin-right: 8px;
  color: var(--vc-heading);
  font-weight: 600;
}
.pcd-body h3 {
  margin-bottom: 6px;
}
.pcd-body .vc-more {
  align-self: flex-start;
  margin-top: auto;
}

/*----- 7.5 Tables, Steps & Days -----*/
/* positioned, so the visually hidden labels in its cells scroll with it instead of widening the page */
.vc-table-wrap {
  position: relative;
  overflow-x: auto;
}
.vc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.vc-table th,
.vc-table td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--vc-line);
  text-align: start;
  vertical-align: middle;
}
.vc-table thead th {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vc-table tbody th {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vc-table tbody th small {
  display: block;
  margin-top: 4px;
  color: var(--vc-muted);
  font-family: var(--vc-ff-body);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.vc-table td {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* six steps on a hairline, each with its number */
.vc-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px;
  border-top: 1px solid var(--vc-line);
}
.vc-steps li {
  position: relative;
  padding-top: 30px;
}
.vc-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 9px;
  height: 9px;
  background: var(--vc-lemon);
  box-shadow: inset 0 0 0 1px rgba(var(--vc-ink-rgb), 0.25);
}
.vc-steps .vc-num {
  display: block;
  margin-bottom: 14px;
  color: var(--vc-muted);
  font-size: 13px;
}
.vc-steps h3 {
  margin-bottom: 10px;
}
.vc-steps p {
  font-size: 15px;
}
/* the next free shoot days (main.js fills them from the calendar) */
.free-days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.free-days li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.1);
  border-inline-start: 3px solid var(--vc-lemon);
}
.free-days b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.free-days span {
  color: var(--vc-text);
  font-family: var(--vc-ff-head);
  font-size: 15px;
  font-weight: 500;
}

/*======================
8. Cards
========================*/
/*----- 8.1 Project Cards -----*/
/* the base's portfolio item: the frame, then a centred caption - the title in tiny tracked caps, a grey line under it */
.vc-proj {
  display: block;
  color: var(--vc-heading);
}
.pj-photo {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--vc-plate);
}
.pj-photo.is-tall {
  aspect-ratio: 4 / 5;
}
.pj-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--vc-ease);
}
.vc-proj:hover .pj-photo img {
  transform: scale(1.035);
}
.pj-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 20px;
  text-align: center;
}
.pj-title {
  margin: 0;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pj-meta {
  color: var(--vc-muted);
  font-size: 14px;
  line-height: 1.4;
}
.vc-proj:hover .pj-title {
  color: var(--vc-heading);
}
/* the staggered two columns (Home 01): the right column starts lower */
.vc-stagger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 70px;
  max-width: 1080px;
  margin: 0 auto;
}
.st-col.is-right {
  padding-top: 180px;
}
.st-tile {
  margin-bottom: 80px;
}
.st-foot {
  margin-top: 10px;
}

/*----- 8.2 Packages -----*/
/* the base's centred line-icon services: icon, caps name, a line of copy, the unit price */
.vc-svc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 44px 30px 38px;
  background: var(--vc-surface);
  text-align: center;
  transition: transform 0.45s var(--vc-ease), box-shadow 0.45s var(--vc-ease);
}
.vc-svc:hover {
  transform: translateY(-6px);
  box-shadow: var(--vc-shadow);
}
.vc-svc p {
  margin: 0;
  font-size: 15px;
}
.svc-rate {
  margin-top: auto;
  padding-top: 8px;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.h1-pk-foot {
  margin-top: 46px;
}
/* a package card: the photo, the icon and unit price, the name, what it includes as rows */
.vc-pk {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--vc-surface);
  transition: box-shadow 0.45s var(--vc-ease), transform 0.45s var(--vc-ease);
}
.vc-pk:hover {
  transform: translateY(-6px);
  box-shadow: var(--vc-shadow);
}
.vc-bg-band .vc-pk {
  background: var(--vc-surface);
}
.pk-photo {
  display: block;
  aspect-ratio: 16 / 10;
}
.pk-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--vc-ease);
}
.vc-pk:hover .pk-photo img {
  transform: scale(1.04);
}
.pk-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 28px 30px 32px;
}
.pk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pk-head .vc-ico {
  width: 48px;
  height: 48px;
}
.pk-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.pk-unit b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pk-unit small {
  color: var(--vc-muted);
  font-size: 13.5px;
}
.pk-body p {
  margin: 0;
  font-size: 15.5px;
}
.pk-body .vc-more {
  align-self: flex-start;
  margin-top: auto;
}

/*----- 8.3 Estimate Engine -----*/
.vc-quote .qt-step {
  padding: 34px 0;
  border-top: 1px solid var(--vc-line);
}
.vc-quote .qt-step:first-child {
  padding-top: 0;
  border-top: 0;
}
.qt-step > h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.qt-step > h3 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  font-size: 11px;
  letter-spacing: 0;
}
.qt-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qt-note {
  margin: 0 0 14px;
  font-size: 15px;
}
.qt-extras + .qt-note {
  margin-top: 24px;
}
.qt-units {
  margin-top: 18px;
}
.qt-rush {
  margin-top: 20px;
}
/* the quick estimate (Home 01 night band, Home 03) */
.vc-quote.is-mini .vc-field {
  margin-bottom: 0;
}
.qq-total {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 56px;
}
.qq-total b {
  color: var(--vc-heading);
  font-size: 30px;
  line-height: 1.1;
}
.qq-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--vc-line);
  font-size: 15px;
}
/* the summary: the reference, the lines, the totals, the facts, who else pays */
.vc-qsum {
  position: sticky;
  top: 110px;
  padding: 34px 32px;
  background: var(--vc-band);
}
.vc-qsum .qs-ref {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  font-family: var(--vc-ff-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vc-qsum .qs-ref span {
  color: var(--vc-muted);
}
.vc-qsum .qs-ref b {
  padding: 3px 8px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.vc-qsum > h3 {
  margin-bottom: 20px;
}
.qs-lines li > span,
.sh-rows li > span {
  max-width: 62%;
  font-family: var(--vc-ff-body);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.qs-totals {
  margin-top: 18px;
}
.qs-totals li.is-total > span,
.qs-totals li.is-total > b {
  color: var(--vc-heading);
}
.qs-totals li.is-total > b {
  font-size: 24px;
  font-weight: 600;
}
.qs-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}
.qs-facts p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 12px;
  background: var(--vc-surface);
}
.qs-facts span {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.qs-facts b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 13.5px;
  font-weight: 600;
}
.qs-shares {
  margin-bottom: 22px;
}
.vc-qsum .vc-btns {
  margin-top: 6px;
}

/*----- 8.4 Team & Voices -----*/
.vc-member {
  height: 100%;
}
.mb-photo {
  display: block;
  aspect-ratio: 4 / 4.6;
  margin-bottom: 22px;
  background: var(--vc-plate);
}
.mb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.1s var(--vc-ease);
}
.vc-member:hover .mb-photo img {
  transform: scale(1.035);
}
.vc-member h3 {
  margin-bottom: 6px;
}
.mb-role {
  margin: 0 0 8px;
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mb-field {
  margin: 0;
  font-size: 15px;
}
.vc-voice {
  margin: 0;
}
.vc-voice blockquote {
  margin: 0 0 30px;
}
.vc-voice blockquote p {
  color: var(--vc-heading);
  font-size: 23px;
  line-height: 1.55;
}
.vc-voice figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
}
.vc-voice figcaption span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.vc-voice figcaption b {
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vc-voice figcaption small {
  color: var(--vc-muted);
  font-size: 14px;
}

/*----- 8.5 Practices -----*/
/* the practices A to Z: a row each - a thumbnail, the name, its projects, licences and since */
.vc-practice {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 120px 120px 110px 30px;
  align-items: center;
  gap: 26px;
  padding: 18px 0;
  border-bottom: 1px solid var(--vc-line);
  color: var(--vc-heading);
}
.vc-practice:first-child {
  border-top: 1px solid var(--vc-line);
}
.pr-thumb {
  display: block;
  aspect-ratio: 4 / 3;
}
.pr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pr-name b {
  display: block;
  font-family: var(--vc-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pr-name small {
  color: var(--vc-muted);
  font-size: 14px;
}
.pr-num {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.pr-num b {
  font-family: var(--vc-ff-head);
  font-size: 24px;
  font-weight: 600;
}
.pr-num small,
.pr-since {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vc-practice > i {
  justify-self: end;
  font-size: 12px;
  transition: transform 0.35s var(--vc-ease);
}
.vc-practice:hover {
  color: var(--vc-heading);
}
.vc-practice:hover > i {
  transform: translateX(6px);
}
/* the practices we shoot for, set in caps (the base's partner band without lettered marks) */
.practice-names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}
.practice-names li {
  border-bottom: 1px solid var(--vc-line);
}
.practice-names a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: clamp(15px, 1.3vw, 20px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.practice-names a::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--vc-lemon);
  transform: scale(0);
  transition: transform 0.35s var(--vc-ease);
}
.practice-names a:hover::after {
  transform: scale(1);
}

/*----- 8.6 Frames & Peeks -----*/
/* the base's passepartout: the photo floats in a white mat on the mist ground */
.vc-frame {
  display: block;
  color: var(--vc-heading);
}
.fr-mat {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
  background: var(--vc-surface);
  box-shadow: 0 1px 0 rgba(var(--vc-ink-rgb), 0.04);
  transition: box-shadow 0.45s var(--vc-ease), transform 0.45s var(--vc-ease);
}
.vc-frame:hover .fr-mat {
  transform: translateY(-4px);
  box-shadow: var(--vc-shadow);
}
.fr-photo {
  display: block;
  width: 100%;
}
.fr-photo img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.fr-cap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
}
.fr-cap .pj-meta {
  font-size: 13.5px;
}
/* the centred carousel's frame and caption (Home 03) */
.peek-card {
  display: block;
  color: var(--vc-heading);
}
.peek-photo {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--vc-plate);
}
.peek-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--vc-ease), filter 0.6s ease;
}
.peek-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 18px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.peek-cap b {
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.peek-cap span {
  color: var(--vc-muted);
  font-size: 14px;
}
.swiper-slide-active .peek-cap {
  opacity: 1;
}
.swiper-slide:not(.swiper-slide-active) .peek-photo img {
  filter: saturate(0.55) brightness(1.04);
}

/*----- 8.7 Licensing -----*/
.vc-party {
  position: relative;
  display: block;
  cursor: pointer;
}
.vc-party input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vc-party > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--vc-plate);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.vc-party b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vc-party small {
  color: var(--vc-muted);
  font-size: 14px;
}
.vc-party input:checked + span {
  background: var(--vc-surface);
  box-shadow: inset 0 0 0 2px var(--vc-heading), inset 6px 0 0 var(--vc-lemon);
}
.vc-party input:focus-visible + span {
  outline: 2px solid var(--vc-heading);
  outline-offset: 2px;
}
.sh-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sh-step {
  padding: 30px 0;
  border-top: 1px solid var(--vc-line);
}
.sh-step:first-child {
  padding-top: 0;
  border-top: 0;
}
.sh-step > h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.sh-step > h3 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  font-size: 11px;
  letter-spacing: 0;
}
.sh-presets {
  margin-bottom: 20px;
}
.sh-rows li > span small {
  display: block;
  color: var(--vc-muted);
  font-size: 13px;
}
.sh-sum .vc-btn {
  margin-top: 24px;
}
.lm-table td {
  text-align: center;
}
.lm-table td .fa-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  font-size: 10px;
}
.lm-table td .fa-minus {
  color: var(--vc-line-2);
}
.lm-add {
  font-size: 12.5px;
}

/*======================
9. Home One
========================*/
/*----- 9.1 Hero Slider -----*/
/* the base's centred spaced-caps title over a boxed frame; the caption, the count and the lemon arrows under it */
.h1-hero {
  padding-top: 64px;
}
.h1-hero .swiper {
  overflow: hidden;
}
.h1-hero .hero-copy {
  margin-bottom: 44px;
  text-align: center;
}
.h1-hero .hero-copy .vc-eyebrow {
  justify-content: center;
}
.h1-hero h1,
.h1-hero .vc-h1 {
  margin: 0;
}
.hero-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 7.4;
  overflow: hidden;
  background: var(--vc-plate);
}
.hero-frame .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding-top: 22px;
}
.hero-caps {
  position: relative;
  min-height: 46px;
}
.hero-cap {
  position: absolute;
  inset: 0 auto auto 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--vc-heading);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.hero-cap.is-on {
  opacity: 1;
  visibility: visible;
}
.hero-cap b {
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-cap span {
  color: var(--vc-muted);
  font-size: 14px;
}
.hero-arrows {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/*----- 9.2 The Practice -----*/
.h1-practice h2 {
  margin-bottom: 22px;
}
.h1-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 36px;
  margin-top: 34px;
}

/*----- 9.3 The Building Rises -----*/
/* the elevation on a mist plate beside the photograph it becomes */
.rise-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  min-height: 600px;
}
.rise-draw {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px 28px 24px;
  background: var(--vc-band);
}
.rise-draw svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
}
.rise-draw svg line,
.rise-draw svg rect {
  vector-effect: non-scaling-stroke;
}
.rise-ground {
  stroke: var(--vc-draft);
  stroke-width: 2;
}
.rise-dim line {
  stroke: var(--vc-muted);
  stroke-width: 1;
}
.rise-dim text {
  fill: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.rf-shell {
  fill: none;
  stroke: var(--vc-draft);
  stroke-width: 1.3;
}
.rf-glass {
  fill: rgba(var(--vc-ink-rgb), 0.05);
}
[data-theme="dark"] .rf-glass {
  fill: rgba(255, 255, 255, 0.06);
}
.rf-slab {
  stroke: var(--vc-draft);
  stroke-width: 3;
}
.rf-mull line {
  stroke: var(--vc-draft);
  stroke-width: 0.8;
}
.rise-floor:last-of-type .rf-glass {
  fill: rgba(var(--vc-lemon-rgb), 0.7);
}
.rise-roof rect,
.rise-roof line {
  fill: none;
  stroke: var(--vc-draft);
  stroke-width: 1.3;
}
.rise-read {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: start;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 18px;
}
.rise-read span {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rise-read b {
  min-width: 70px;
  color: var(--vc-heading);
  font-size: 24px;
}
.rise-photo {
  position: relative;
  overflow: hidden;
  background: var(--vc-band);
}
.rise-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rise-cap {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 7px 12px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/*----- 9.4 Night Bands & Voices -----*/
.h1-estimate,
.vc-practices,
.h2-architects,
.h3-stair {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.voice-photo {
  aspect-ratio: 4 / 5;
}
.voice-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h1-voices h2 {
  margin-bottom: 34px;
}
.voice-slider {
  width: 100%;
  margin: 0;
}
.voice-nav {
  display: flex;
  gap: 8px;
  margin-top: 36px;
}
.vc-practices h2 {
  margin-bottom: 18px;
}
.vc-practices .vc-more {
  margin-top: 8px;
}

/*----- 9.5 Call To Action -----*/
.vc-cta h2 {
  margin-bottom: 20px;
}
.vc-cta .vc-btns {
  margin-top: 30px;
}
.cta-days {
  padding: 26px;
  background: rgba(14, 14, 15, 0.55);
  backdrop-filter: blur(6px);
}

/*======================
10. Home Two
========================*/
/*----- 10.1 Night Search Hero -----*/
/* the base's night hero over an aerial: a centred title, the search, the slider's count and arrows at its foot */
.h2-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(100vh, 900px);
  padding: 180px 0 130px;
  overflow: clip;
}
.h2-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.h2-bg .swiper-slide {
  overflow: hidden;
}
.h2-bg .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h2-bg .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.62) 0%, rgba(8, 8, 10, 0.5) 45%, rgba(8, 8, 10, 0.78) 100%);
}
.h2-bg .hero-copy {
  position: absolute;
  left: 44px;
  bottom: 44px;
  z-index: 2;
}
.h2-bg .hero-copy .vc-eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}
.h2-hero-in {
  position: relative;
  z-index: 2;
  text-align: center;
}
.h2-hero-in h1 {
  color: #FFFFFF;
}
.h2-hero-in .vc-lead {
  max-width: 640px;
  margin: 24px auto 0;
  color: rgba(255, 255, 255, 0.82);
}
.h2-search {
  display: flex;
  max-width: 700px;
  margin: 40px auto 0;
  background: #FFFFFF;
}
.h2-search input {
  flex: 1;
  min-width: 0;
  height: 64px;
  padding: 0 24px;
  border: 0;
  background: transparent;
  color: var(--vc-ink);
  font-family: var(--vc-ff-body);
  font-size: 16px;
}
.h2-search input::placeholder {
  color: #6B6B6E;
}
.h2-search input:focus {
  outline: 0;
  box-shadow: inset 0 -3px 0 var(--vc-lemon);
}
.h2-search button {
  width: 64px;
  height: 64px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.h2-search button:hover {
  background: var(--vc-ink);
  color: #FFFFFF;
}
.h2-hero-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
}
.h2-hero-foot .hero-count {
  color: #FFFFFF;
}
.h2-hero-foot .hero-count i {
  background: rgba(255, 255, 255, 0.4);
}
.h2-hero-foot .hero-arrows {
  display: flex;
  gap: 8px;
}

/*----- 10.2 The Archive Grid -----*/
.h2-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  margin-bottom: 44px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vc-line);
}
.ar-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 54px 30px;
}
.ar-item {
  grid-column: span 4;
}
.ar-item.is-w5 {
  grid-column: span 5;
}
.ar-item.is-w6 {
  grid-column: span 6;
}
.ar-item.is-w7 {
  grid-column: span 7;
}
.ar-item .pj-photo {
  aspect-ratio: auto;
  height: clamp(240px, 23vw, 400px);
}
.h2-grid .st-foot {
  margin-top: 60px;
}

/*----- 10.3 A Plan Lights Up -----*/
/* the plan on its sheet, the room's photograph and the room list beside it */
.plan-stage {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 50px;
  align-items: start;
}
.plan-draw {
  padding: 34px;
  background: var(--vc-surface);
}
.plan-draw svg {
  display: block;
  width: 100%;
  height: auto;
}
.plan-draw svg rect,
.plan-draw svg path,
.plan-draw svg line {
  vector-effect: non-scaling-stroke;
}
.pl-room {
  fill: var(--vc-surface);
  transition: fill 0.6s ease;
}
.pl-room.is-static {
  fill: rgba(var(--vc-ink-rgb), 0.03);
}
.pl-room.is-seen {
  fill: rgba(var(--vc-lemon-rgb), 0.22);
}
.pl-room.is-lit {
  fill: rgba(var(--vc-lemon-rgb), 0.9);
}
.pl-walls path,
.pl-walls rect {
  fill: none;
  stroke: var(--vc-draft);
  stroke-width: 3;
}
.pl-walls .pl-outer {
  stroke-width: 7;
}
.pl-doors path {
  fill: none;
  stroke: var(--vc-draft);
  stroke-width: 1;
}
.pl-treads line {
  stroke: var(--vc-draft);
  stroke-width: 0.8;
  opacity: 0.6;
}
.pl-name,
.pl-n {
  fill: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-anchor: middle;
  text-transform: uppercase;
}
.pl-name.is-static {
  fill: var(--vc-muted);
}
.pl-area {
  fill: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10px;
  font-weight: 500;
  text-anchor: middle;
}
.pl-north {
  fill: var(--vc-draft);
}
[data-theme="dark"] .pl-room.is-lit + .pl-name {
  fill: var(--vc-on-lemon);
}
.pl-photos {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--vc-plate);
}
.pl-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.pl-photo.is-on {
  opacity: 1;
}
.pl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pl-photo figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 10px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pl-read {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 22px 0 16px;
}
.pl-read span:first-child {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pl-read b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pl-read .vc-num {
  margin-inline-start: auto;
  color: var(--vc-muted);
}
.pl-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--vc-line);
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.4s ease;
}
.pl-list li b {
  margin-inline-start: auto;
  font-weight: 500;
}
.pl-list li .vc-num {
  width: 26px;
}
.pl-list li.is-seen {
  color: var(--vc-text);
}
.pl-list li.is-on {
  color: var(--vc-heading);
  box-shadow: inset 3px 0 0 var(--vc-lemon);
  padding-inline-start: 12px;
}

/*----- 10.4 Shared Shoot -----*/
.share-photo {
  aspect-ratio: 4 / 3.3;
}
.share-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h2-share h2 {
  margin-bottom: 22px;
}
.h2-share .vc-rows {
  margin: 30px 0;
}

/*======================
11. Home Three
========================*/
/*----- 11.1 Mist Ground & Carousel -----*/
/* Home 03 sits on the base's mist ground; the white sections are plates on it */
body.vc-mist {
  background: var(--vc-band);
}
.vc-mist .header-style-three {
  --hd-bar: var(--vc-band);
  --hd-top: var(--vc-bg);
}
.vc-mist .vc-header.is-sticky {
  --hd-bar: var(--vc-band);
}
.h3-hero {
  padding-top: 56px;
  overflow: clip;
}
.h3-head {
  margin-bottom: 44px;
  text-align: center;
}
.h3-head .vc-eyebrow {
  justify-content: center;
}
.h3-peek {
  overflow: visible;
}
.h3-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 26px;
}

/*----- 11.2 Passepartout Grid -----*/
.fr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  align-items: start;
  gap: 40px 30px;
}
.fr-item.is-wide {
  grid-column: span 2;
}
.fr-item.is-wide .fr-photo img {
  aspect-ratio: 16 / 10;
}
.fr-item.is-portrait .fr-photo img {
  aspect-ratio: 4 / 5;
}
.fr-item.is-square .fr-photo img {
  aspect-ratio: 1 / 1;
}

/*----- 11.3 Interiors & Team -----*/
.h3-interiors,
.h3-team {
  background: var(--vc-bg);
}
.h3-interiors h2 {
  margin-bottom: 22px;
}
.h3-interiors .vc-rows {
  margin-top: 30px;
}
.h3-est {
  padding: 32px;
  background: var(--vc-band);
}
.h3-est > h3 {
  margin-bottom: 22px;
}
.h3-est .vc-input {
  background: var(--vc-surface);
}
.h3-est .qq-total b {
  font-size: 26px;
}
.h3-est-photo {
  aspect-ratio: 16 / 8;
}
.h3-est-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 11.4 Down The Stairwell -----*/
.stair-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 620px;
  margin-inline-start: auto;
}
.stair-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.stair-read {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.stair-read span {
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.stair-read b {
  color: var(--vc-on-lemon);
  font-size: 16px;
}
.h3-stair h2 {
  margin-bottom: 22px;
}
.h3-stair .vc-rows {
  margin: 30px 0;
}

/*======================
12. Inner Pages
========================*/
/*----- 12.1 Sidebar & Widgets -----*/
/* the sidebar is quiet: a small heading, a short stroke, plain lists, each widget on a pale plate */
.vc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.vc-sidebar .widget {
  padding: 34px 32px;
  background: var(--vc-plate);
}
.vc-sidebar .widget > h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.vc-sidebar .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--vc-lemon);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 58px 0 18px;
  border: 1px solid var(--vc-line);
  background: var(--vc-surface);
  color: var(--vc-heading);
  font-family: var(--vc-ff-body);
  font-size: 16px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-color: var(--vc-heading);
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-search button:hover {
  background: var(--vc-ink);
  color: #FFFFFF;
}
.widget-cats li a,
.widget-cats li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--vc-line-2);
  color: var(--vc-text);
  font-size: 16px;
  text-align: start;
  transition: color 0.3s ease, padding 0.3s var(--vc-ease);
}
.widget-cats li:first-child a,
.widget-cats li:first-child button {
  padding-top: 0;
}
.widget-cats li:last-child a,
.widget-cats li:last-child button {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--vc-muted);
  font-size: 14px;
}
.widget-cats li a:hover,
.widget-cats li button:hover,
.widget-cats li button.is-active {
  color: var(--vc-accent-text);
}
.widget-cats li button.is-active span {
  color: var(--vc-accent-text);
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 15px 20px;
  background: var(--vc-surface);
  color: var(--vc-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li:last-child a {
  margin-bottom: 0;
}
.widget-nav li a i {
  color: var(--vc-accent-text);
  font-size: 13px;
  transition: transform 0.3s var(--vc-ease), color 0.3s ease;
}
.widget-nav li a:hover,
.widget-nav li a.is-current {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.widget-nav li a:hover i,
.widget-nav li a.is-current i {
  color: var(--vc-ink);
  transform: translateX(4px);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vc-line-2);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--vc-ease);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--vc-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.side-posts h3 a {
  color: var(--vc-heading);
}
.side-posts h3 a:hover {
  color: var(--vc-accent-text);
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a {
  color: var(--vc-text);
}
.widget-tags a:hover {
  color: var(--vc-accent-text);
}
.vc-sidebar .widget.widget-cta {
  position: relative;
  padding: 44px 34px;
  background: var(--vc-night);
  text-align: center;
}
.widget-cta .vc-script {
  display: block;
  color: var(--vc-lemon);
  font-size: 26px;
  line-height: 1.2;
}
.widget-cta h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.widget-cta p {
  margin-bottom: 24px;
}
.widget-line .line-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vc-line-2);
}
.widget-line .line-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.widget-line .vc-ico {
  width: 54px;
  height: 54px;
}
.line-row small {
  display: block;
  color: var(--vc-muted);
  font-size: 13px;
}
.line-row b {
  color: var(--vc-heading);
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.line-row:hover b {
  color: var(--vc-accent-text);
}

/*----- 12.2 Rows, Choices & Pages -----*/
.vc-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 24px;
  color: var(--vc-heading);
  font-size: 18px;
  font-weight: 500;
}
.sum-total b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-body);
  font-size: 30px;
  font-weight: 400;
}
.vc-kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--vc-line);
}
.vc-kv li:first-child {
  border-top: 1px solid var(--vc-line);
}
.vc-kv li b {
  color: var(--vc-heading);
  font-weight: 500;
  text-align: end;
}
.vc-kv.is-plain li:first-child {
  border-top: 0;
}
.choice-list {
  display: grid;
  gap: 12px;
}
.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 60px 16px 18px;
  background: var(--vc-plate);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.vc-bg-band .choice-card,
.vc-bg-band .choice-card {
  background: var(--vc-surface);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card:hover {
  box-shadow: inset 3px 0 0 var(--vc-line-2);
}
.choice-card:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--vc-lemon-rgb), 0.5);
}
.choice-card.is-checked {
  background: var(--vc-band);
  box-shadow: inset 3px 0 0 var(--vc-lemon);
}
.choice-card.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.choice-ico {
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vc-plate);
  color: var(--vc-accent-text);
  font-size: 18px;
}
.choice-card.is-checked .choice-ico {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.choice-body b {
  color: var(--vc-heading);
  font-size: 17px;
  font-weight: 500;
}
.choice-body span {
  color: var(--vc-muted);
  font-size: 14.5px;
}
.choice-tick {
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--vc-line-2);
  color: transparent;
  font-size: 11px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.choice-card.is-checked .choice-tick {
  background: var(--vc-lemon);
  box-shadow: none;
  color: var(--vc-ink);
}
.vc-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 60px;
}
.vc-pagination a,
.vc-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--vc-plate);
  color: var(--vc-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vc-pagination a i {
  color: var(--vc-accent-text);
  font-size: 13px;
}
.vc-pagination .is-current,
.vc-pagination a:hover,
.vc-pagination a:hover i {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.vc-zoom {
  display: block;
  overflow: hidden;
}
.vc-zoom img {
  width: 100%;
  transition: transform 0.9s var(--vc-ease);
}
.vc-zoom:hover img {
  transform: scale(1.05);
}
.grid-empty {
  padding: 40px 0;
  color: var(--vc-muted);
  text-align: center;
}
.is-unmatched,
[data-filter-grid] > .is-hidden {
  display: none;
}
.vc-range {
  width: 100%;
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 0;
  background: var(--vc-line-2);
  accent-color: var(--vc-ink);
  appearance: none;
  -webkit-appearance: none;
}
.vc-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 5px solid var(--vc-surface);
  border-radius: 50%;
  background: var(--vc-lemon);
  box-shadow: 0 2px 8px rgba(8, 11, 15, 0.25);
  cursor: pointer;
  -webkit-appearance: none;
}
.vc-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--vc-surface);
  border-radius: 50%;
  background: var(--vc-lemon);
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--vc-muted);
  font-size: 14px;
}

/* chips: tonal round faces for amounts, days and times (the input stays in the form, hidden) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-choice > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  background: var(--vc-plate);
  color: var(--vc-heading);
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vc-panel .chip-choice > span {
  background: var(--vc-plate);
}
.chip-choice:hover > span {
  background: var(--vc-band);
}
.chip-choice input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(var(--vc-lemon-rgb), 0.55);
}
.chip-choice.is-checked > span {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.chip-choice > span small {
  color: var(--vc-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip-choice.is-off {
  cursor: not-allowed;
}
.chip-choice.is-off > span {
  opacity: 0.5;
  text-decoration: line-through;
}

/*======================
13. Inner Page Sections
========================*/
/*----- 13.1 Booking Calendar & Choices -----*/
/* the shoot types as radio cards */
.wz-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}
.vc-choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.vc-choice input {
  position: absolute;
  opacity: 0;
}
.ch-face {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  padding: 24px 20px;
  background: var(--vc-field);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.ch-face .vc-ico {
  width: 44px;
  height: 44px;
}
.ch-face b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ch-face small {
  color: var(--vc-muted);
  font-size: 14px;
}
.vc-choice input:checked + .ch-face {
  background: var(--vc-surface);
  box-shadow: inset 0 0 0 1px var(--vc-heading), inset 0 3px 0 var(--vc-lemon);
}
.vc-choice input:focus-visible + .ch-face {
  outline: 2px solid var(--vc-heading);
  outline-offset: 2px;
}
.wz-len {
  margin-bottom: 20px;
}
.wz-len label {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.wz-len input {
  position: absolute;
  opacity: 0;
}
.wz-len span {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.wz-len input:checked + span {
  background: var(--vc-primary);
  color: var(--vc-on-primary);
}
.wz-len input:focus-visible + span {
  outline: 2px solid var(--vc-heading);
}
.wz-days {
  max-width: 220px;
}
.wz-sub {
  margin-bottom: 20px;
}
/* the booking calendar: free, on hold, booked, closed, from the studio's rule */
.vc-cal {
  padding: 26px;
  background: var(--vc-band);
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cal-head b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cal-week,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-week span {
  padding-bottom: 8px;
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
.cd-day {
  position: relative;
  aspect-ratio: 1.3 / 1;
  background: var(--vc-surface);
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cd-day::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
}
.cd-day.is-free::after {
  background: var(--vc-free);
}
.cd-day.is-hold::after {
  background: var(--vc-hold);
}
.cd-day.is-booked::after {
  background: var(--vc-lemon);
}
.cd-day.is-free:hover {
  background: var(--vc-plate);
}
.cd-day[disabled] {
  color: var(--vc-muted);
  cursor: not-allowed;
  opacity: 0.55;
}
.cd-day.is-closed,
.cd-day.is-lead,
.cd-day.is-past {
  background: transparent;
}
.cd-day.is-on {
  background: var(--vc-primary);
  color: var(--vc-on-primary);
}
.cal-key {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  font-size: 14px;
}
.cal-key li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cal-key i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vc-muted);
}
.cal-key i.is-free {
  background: var(--vc-free);
}
.cal-key i.is-hold {
  background: var(--vc-hold);
}
.cal-key i.is-booked {
  background: var(--vc-lemon);
}
.vc-booking .vc-status {
  margin-top: 18px;
}
.wz-review {
  margin-bottom: 26px;
}
.wz-side .ws-sums li.is-total b {
  font-size: 26px;
  font-weight: 300;
}
.ws-note {
  font-size: 14.5px;
}
.wz-done .vc-ico {
  margin-bottom: 18px;
}

/*----- 13.2 Process & Proofing -----*/
/* the six steps laid out like a contact sheet: a numbered frame and the step, three across */
.ps-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px 40px;
}
.ps-frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 26px;
  background: var(--vc-plate);
}
.ps-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps-frame b {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  padding: 10px 14px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  font-family: var(--vc-ff-head);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.ps-copy .vc-ico {
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
}
.ps-copy h3 {
  margin-bottom: 10px;
}
.ps-time {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.vc-process-faq h2 {
  margin-bottom: 16px;
}
.vc-process-faq .vc-lead {
  margin-bottom: 30px;
}
/* client proofing */
.pf-head {
  display: grid;
  grid-template-columns: 1fr 400px;
  align-items: start;
  gap: 60px;
  margin-bottom: 50px;
}
.pf-gallery h2 {
  margin-bottom: 18px;
}
.pf-panel {
  padding: 34px 30px;
  background: var(--vc-band);
}
.pf-count {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pf-count b {
  color: var(--vc-heading);
  font-size: 52px;
  font-weight: 200;
  line-height: 1;
}
.pf-count span {
  color: var(--vc-muted);
}
.pf-bar {
  height: 3px;
  margin: 16px 0 12px;
  background: var(--vc-line);
}
.pf-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--vc-lemon);
  transition: width 0.4s var(--vc-ease);
}
.pf-line {
  margin-bottom: 18px;
  font-size: 15px;
}
.pf-panel .vc-rows {
  margin-bottom: 22px;
}
.pf-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.pf-hint {
  color: var(--vc-muted);
  font-size: 15px;
}
.pf-hint i {
  color: var(--vc-accent-text);
}
.vc-proof {
  margin: 0;
}
.pf-photo {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--vc-plate);
}
.pf-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vc-proof figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px 0;
  color: var(--vc-muted);
  font-size: 13px;
}
.pf-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vc-plate);
  color: var(--vc-heading);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--vc-ease);
}
.pf-pick:hover {
  transform: scale(1.08);
}
.pf-pick.is-on {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.is-picked .pf-photo {
  box-shadow: 0 0 0 2px var(--vc-lemon);
}

/*----- 13.3 About & Team -----*/
.ab-photo,
.pr-photo {
  aspect-ratio: 4 / 5;
  background: var(--vc-plate);
}
.vc-about h2,
.vc-profile h2 {
  margin-bottom: 18px;
}
.vc-about .vc-lead,
.vc-profile .vc-lead {
  margin-bottom: 22px;
}
.ab-facts,
.vc-profile .vc-rows {
  margin: 30px 0 34px;
}
.mf-copy {
  max-width: 820px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.88);
}
.mf-copy h2 {
  margin-bottom: 26px;
}
.mf-mark {
  display: block;
  width: auto;
  height: 72px;
  margin: 34px auto 0;
}
.vc-roster .vc-lead {
  margin: 18px 0 30px;
}
.vc-roster .vc-rows {
  margin-bottom: 30px;
}
.pr-social {
  margin-top: 6px;
}

/*----- 13.4 Booking Wizard -----*/
.wz-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 50px;
  border-bottom: 1px solid var(--vc-line);
}
.wz-steps button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px 12px 18px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--vc-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: start;
  text-transform: uppercase;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.wz-steps button b {
  font-family: var(--vc-ff-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.wz-steps button.is-done {
  color: var(--vc-heading);
}
.wz-steps button.is-done b::after {
  content: " \f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  color: var(--vc-free-text);
}
.wz-steps button.is-active {
  border-color: var(--vc-heading);
  color: var(--vc-heading);
}
.wz-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wz-step legend {
  float: left;
  width: 100%;
  margin-bottom: 26px;
}
.wz-step legend + * {
  clear: both;
}
.ws-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.ws-txt small {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11.5px;
}
.ws-txt b {
  color: var(--vc-heading);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ws-txt em {
  color: var(--vc-text);
  font-family: var(--vc-ff-head);
  font-size: 12.5px;
  font-style: normal;
}
.wz-sub {
  margin-bottom: 14px;
}
.wz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--vc-line);
}
.wz-count {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 13px;
}
.wz-nav [data-wz-next],
.wz-nav [data-wz-submit] {
  margin-inline-start: 0;
}
.wz-done {
  padding: 44px;
  background: var(--vc-band);
  text-align: center;
}
.wz-done h3 {
  margin-bottom: 14px;
}
.wz-done .vc-btns {
  justify-content: center;
  margin-top: 26px;
}
.wz-side {
  position: sticky;
  top: 110px;
  background: var(--vc-surface);
  box-shadow: var(--vc-shadow);
}
.wz-side img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ws-body {
  padding: 26px;
}
.ws-body .vc-eyebrow {
  margin-bottom: 8px;
}
.ws-when {
  margin: 8px 0 18px;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 13.5px;
}
.ws-lines li {
  font-size: 13px;
}
.ws-lines li > span {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vc-text);
}
.ws-sums {
  margin: 14px 0 16px;
}
.ws-sums li:first-child {
  border-top: 0;
}

/*----- 13.5 Contact & Account -----*/
.info-card {
  height: 100%;
  padding: 40px 32px;
  background: var(--vc-band);
  text-align: center;
  transition: transform 0.45s var(--vc-ease), box-shadow 0.45s var(--vc-ease);
}
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--vc-shadow-lg);
}
.info-card .vc-ico {
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
}
.info-card h3 {
  margin-bottom: 12px;
}
.info-card p {
  margin-bottom: 14px;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}
.contact-hours {
  margin-top: 24px;
}
.article-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 30px 0;
  padding: 22px 26px;
}
.ab-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 13.5px;
  line-height: 1.5;
}
.ab-txt b {
  color: var(--vc-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.dash-who img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.dash-who h2 {
  margin: 0;
}
.dash-who span {
  color: var(--vc-muted);
  font-size: 13.5px;
}
.dash-counts {
  margin-bottom: 24px;
}
.dash-tabs {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--vc-plate);
  color: var(--vc-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: start;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dash-tabs .vc-ico {
  width: 34px;
  height: 34px;
}
.dash-tabs button.is-active {
  background: var(--vc-primary);
  color: var(--vc-on-primary);
}
.dash-tabs button.is-active .ico-ink {
  display: none;
}
.dash-tabs button.is-active .ico-light {
  display: block;
}
[data-theme="dark"] .dash-tabs button.is-active .ico-light {
  display: none;
}
[data-theme="dark"] .dash-tabs button.is-active .ico-ink {
  display: block;
}
.dash-panel > h2 {
  margin-bottom: 24px;
}
.acc-bookings,
.acc-orders {
  display: grid;
  gap: 8px;
  margin-bottom: 30px;
}
.ab-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 12px;
  background: var(--vc-band);
}
.ab-row img {
  width: 90px;
  height: 66px;
  object-fit: cover;
}
.ab-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.ab-main > span:last-child {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 12.5px;
}
.ab-price {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-weight: 500;
}
.acc-orders li {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  gap: 16px;
  padding: 14px 18px;
  background: var(--vc-band);
  font-family: var(--vc-ff-head);
  font-size: 13px;
}
.acc-orders li b {
  color: var(--vc-heading);
  font-weight: 500;
}
.acc-empty {
  margin-bottom: 26px;
  padding: 22px;
  background: var(--vc-band);
  color: var(--vc-muted);
}
.account-form.is-plain {
  padding: 0;
  box-shadow: none;
}
.faq-group + .faq-group {
  margin-top: 60px;
}
.faq-group .vc-accordion {
  margin-top: 26px;
}

/*======================
14. Projects, Packages & Licensing
========================*/
/*----- 14.1 Projects & Gallery -----*/
.work-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  margin-bottom: 50px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--vc-line);
}
.work-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.work-bar .vc-field {
  width: 200px;
  margin: 0;
}
.work-bar .vc-input {
  height: 46px;
}
.work-search .vc-input {
  padding-right: 44px;
}
.work-search > i {
  top: 16px;
}
.work-count {
  margin-bottom: 30px;
}
.grid-empty {
  margin-top: 30px;
}
/* the base's pinterest gallery: CSS columns of frames */
.vc-masonry {
  columns: 4 260px;
  column-gap: 24px;
}
.mz-item {
  margin: 0 0 24px;
  break-inside: avoid;
}
.mz-item a {
  display: block;
}
.mz-item img {
  display: block;
  width: 100%;
  height: auto;
}

/*----- 14.2 Project Singles -----*/
.ss-credits h2,
.ss-side h2 {
  margin-bottom: 20px;
}
.ss-credits .vc-rows {
  margin-bottom: 30px;
}
.ss-credits .vc-rows li > b a:hover {
  color: var(--vc-heading);
  box-shadow: inset 0 -2px 0 var(--vc-lemon);
}
.ss-copy h2 {
  margin-bottom: 18px;
}
.ss-copy .vc-lead {
  margin-bottom: 24px;
}
.ss-copy h3 {
  margin: 44px 0 16px;
}
.ss-copy .vc-btns {
  margin-top: 30px;
}
.is-sticky {
  position: sticky;
  top: 120px;
}
/* the big-images single: every frame full width, one after another */
.ss-big {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  max-width: 1180px;
  margin: 90px auto 0;
}
.pd-big {
  grid-column: 1 / -1;
}
.pd-big.is-half {
  grid-column: auto;
}
.pd-big.is-half a {
  aspect-ratio: 4 / 5;
}
.pd-big {
  margin: 0;
}
.pd-big a {
  display: block;
  aspect-ratio: 16 / 9.2;
  background: var(--vc-plate);
}
.pd-big img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-pair {
  margin-top: 6px;
}
.ss-pair a {
  display: block;
  aspect-ratio: 4 / 5;
}
.ss-pair img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-licence {
  margin-top: 18px;
}
/* the small-masonry single: two columns of frames beside the project */
.ss-masonry {
  columns: 2;
  column-gap: 24px;
}
.ss-side .vc-lead {
  margin: 18px 0;
}
.ss-side .vc-rows {
  margin: 26px 0 30px;
}
/* the big slider single: the centre frame full, its neighbours dimmed */
.ss-slider .swiper-slide {
  transition: opacity 0.5s ease;
}
.ss-slider .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.ss-slider .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.45;
}
.ss-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}
.ss-hint {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
/* previous / next project */
.vc-story-nav {
  border-top: 1px solid var(--vc-line);
}
.vc-project-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  padding: 40px 0;
}
.vc-project-nav a {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--vc-heading);
}
.vc-project-nav img {
  width: 96px;
  height: 72px;
  object-fit: cover;
}
.vc-project-nav small {
  display: block;
  margin-bottom: 4px;
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.vc-project-nav b {
  font-family: var(--vc-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vc-project-nav .pn-next {
  justify-content: flex-end;
  text-align: end;
}
.vc-project-nav .pn-all {
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.vc-project-nav a:hover b {
  box-shadow: inset 0 -3px 0 var(--vc-lemon);
}
/* the practice page's last card: a call for the next building */
.vc-next-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  height: 100%;
  min-height: 300px;
  padding: 34px;
  background: var(--vc-surface);
  color: var(--vc-heading);
  box-shadow: inset 0 0 0 1px var(--vc-line);
}
.vc-next-card .nc-line {
  color: var(--vc-text);
}
.pr-voice {
  margin-top: 36px;
  padding: 34px;
  background: var(--vc-band);
}
.pr-voice blockquote p {
  font-size: 20px;
}

/*----- 14.3 Packages & Rates -----*/
.inc-photo,
.lic-photo {
  aspect-ratio: 4 / 3.4;
}
.inc-photo img,
.lic-photo img,
.ab-photo img,
.pr-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vc-includes h2 {
  margin-bottom: 16px;
}
.vc-includes .vc-rows {
  margin: 26px 0 34px;
}
.vc-levels h2,
.vc-licence-intro h2 {
  margin-bottom: 20px;
}
.vc-levels .vc-status {
  margin-top: 24px;
}
.vc-licence-intro .vc-rows {
  margin-top: 30px;
}
.sv-body > h2 {
  margin-bottom: 18px;
}
.sv-body > h3 {
  margin: 50px 0 20px;
}
.sv-body .vc-lead {
  margin-bottom: 20px;
}
.sv-day {
  margin-top: 16px;
}
.sv-card {
  height: 100%;
  padding: 32px 30px;
  background: var(--vc-band);
}
.sv-card.is-night {
  background: var(--vc-night);
}
.sv-price {
  margin: 10px 0 18px;
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
}
.sv-price small {
  color: var(--vc-muted);
  font-family: var(--vc-ff-body);
  font-size: 15px;
  font-weight: 400;
}
.sv-sample li.is-total > span,
.sv-sample li.is-total > b {
  color: var(--vc-heading);
}
.sv-sample li.is-total > b {
  font-size: 22px;
  font-weight: 600;
}
.sv-sample li > span {
  font-family: var(--vc-ff-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.sv-frames {
  margin-bottom: 10px;
}
.vc-table tbody th a {
  color: var(--vc-heading);
}
.vc-table tbody tr {
  transition: background-color 0.3s ease;
}
.vc-table tbody tr:hover {
  background: var(--vc-band);
}
.qt-panel {
  padding: 44px 40px;
  background: var(--vc-surface);
}
.vc-quote-sec .vc-qsum {
  background: var(--vc-surface);
}
.part-col .vc-ico {
  margin-bottom: 18px;
}
.part-col h3 {
  margin-bottom: 18px;
}

/*----- 14.4 Practices & Licensing -----*/
.practice-list.is-page .vc-practice {
  grid-template-columns: 130px minmax(0, 1fr) 120px 150px 110px 30px;
}
.vc-practice-share h2,
.h2-share h2 {
  margin-bottom: 22px;
}
.vc-practice-share .vc-rows {
  margin: 30px 0;
}
.vc-practice-single h2 {
  margin-bottom: 20px;
}
.vc-share-sec .vc-qsum {
  top: 120px;
}
.lm-table thead th:first-child {
  text-align: start;
}
.lm-table thead th {
  text-align: center;
  white-space: normal;
}

/*----- 14.5 Voices Band -----*/
.voices-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  max-width: 980px;
  margin: 0 auto;
}
.voices-wrap .swiper {
  width: 100%;
  margin: 0;
}
.vc-voices .vc-voice {
  text-align: center;
}
.vc-voices .vc-voice figcaption {
  justify-content: center;
}
.voices-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 40px;
  margin-top: 50px;
}

/*======================
15. Blog & Account
========================*/
/*----- 15.1 Blog List -----*/
/* the journal: wide photo posts with a date tile, and quote and link posts between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--vc-ease);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 84px;
  background: var(--vc-lemon);
  color: var(--vc-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.post-date b {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 15, 0.28);
}
.post-thumb.is-video .vc-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -45px 0 0 -45px;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .slider-arrow {
  pointer-events: auto;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--vc-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .vc-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--vc-accent-text);
}
.bp-body h3 a {
  color: var(--vc-heading);
}
.bp-body h3 a:hover {
  color: var(--vc-accent-text);
}
.bp-body .vc-rule {
  margin: 18px 0 20px;
}
.bp-body p {
  margin-bottom: 18px;
}
/* the quote post: a night card with the title set large in light caps and a faint quote mark behind it */
.blog-post.is-quote {
  position: relative;
  padding: 56px 60px;
  overflow: hidden;
  background: var(--vc-ink);
  --vc-heading: #EEF0F2;
}
.blog-post.is-quote .pcd-meta,
.blog-post.is-quote .pcd-meta a {
  color: #5BC8F5;
}
.blog-post.is-quote .pcd-meta a:hover {
  color: #EEF0F2;
}
.blog-post.is-quote h3 {
  position: relative;
  max-width: 560px;
  margin: 12px 0 18px;
}
.blog-post.is-quote h3 a {
  color: #EEF0F2;
}
.blog-post.is-quote h3 a:hover {
  color: #5BC8F5;
}
.blog-post .nc-by {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-post.is-quote .nc-by {
  color: rgba(238, 240, 242, 0.78);
}
.bp-glyph {
  position: absolute;
  right: 50px;
  bottom: 30px;
  color: rgba(238, 240, 242, 0.1);
  font-size: 120px;
}

/*----- 15.2 Blog Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 0;
}
.article-body > .vc-rule {
  margin: 20px 0 26px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 40px 0;
  padding: 44px 50px 40px;
  background: var(--vc-band);
  border-inline-start: 4px solid var(--vc-heading);
}
.article-quote p {
  margin-bottom: 14px;
  color: var(--vc-heading);
  font-size: 24px;
  line-height: 1.5;
}
.article-quote cite {
  color: var(--vc-accent-text);
  font-size: 42px;
  font-style: normal;
  line-height: 1;
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair img {
  height: 300px;
  object-fit: cover;
}
.article-rows {
  margin: 26px 0;
}
.article-rows > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vc-line);
}
.article-rows > div:first-child {
  border-top: 1px solid var(--vc-line);
}
.article-rows dt {
  color: var(--vc-heading);
  font-weight: 500;
}
.article-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-block: 1px solid var(--vc-line);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vc-lemon);
  color: var(--vc-ink);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.share-copy:hover,
.share-copy.is-done {
  background: var(--vc-ink);
  color: #FFFFFF;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding: 40px;
  background: var(--vc-plate);
}
.author-box img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box .vc-eyebrow {
  display: block;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
}
.post-nav .pn-prev,
.post-nav .pn-next {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 42%;
  color: var(--vc-heading);
}
.post-nav .pn-next {
  text-align: end;
}
.post-nav small {
  display: block;
  color: var(--vc-accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-nav b {
  font-weight: 500;
}
.post-nav > a > i {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--vc-plate);
  color: var(--vc-accent-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-nav > a:hover > i {
  background: var(--vc-lemon);
  color: var(--vc-ink);
}
.post-nav .pn-all {
  color: var(--vc-accent-text);
  font-size: 22px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--vc-line);
}
.comment-list li > img {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list li > div {
  flex: 1 1 0;
  min-width: 0;
}
.comment-list b {
  margin-right: 14px;
  color: var(--vc-heading);
  font-size: 18px;
  font-weight: 500;
}
.comment-list li > div > span {
  color: var(--vc-muted);
  font-size: 13.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex: 1 1 100%;
  padding-inline-start: 92px;
}
.comment-list ul li {
  padding-bottom: 0;
  border-bottom: 0;
}
.comment-form {
  margin-top: 46px;
}

/*----- 15.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--vc-surface);
  box-shadow: var(--vc-shadow-lg);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 46px;
  overflow: hidden;
  background: var(--vc-ink);
}
.account-side .as-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(8, 11, 15, 0.1) 0%, rgba(8, 11, 15, 0.55) 45%, rgba(8, 11, 15, 0.95) 100%);
}
.account-side > .vc-gl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 140px;
}
.account-side .as-seal {
  width: 96px;
}
.as-copy {
  margin-top: auto;
}
.as-copy .vc-script {
  color: var(--vc-lemon);
  font-size: 44px;
  line-height: 1;
}
.as-copy h2 {
  margin: 4px 0 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.85);
}
.as-copy .vc-avatars .faces img,
.as-copy .vc-avatars .more {
  border-color: var(--vc-ink);
}
.account-form {
  padding: 56px 54px;
}
.account-form .vc-eyebrow {
  display: block;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--vc-accent-text);
  font-weight: 500;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.pass-toggle {
  position: absolute;
  top: 37px;
  right: 8px;
  width: 42px;
  height: 42px;
  color: var(--vc-accent-text);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--vc-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--vc-booked);
  transition: width 0.4s var(--vc-ease), background-color 0.4s ease;
}
.pass-meter span[data-score="2"] {
  background: var(--vc-lemon);
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--vc-free);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--vc-muted);
  font-size: 13px;
}

/*----- 15.4 Coming Soon & 404 -----*/
/* a photograph on one side, the page on the other, the seal on the seam */
.vc-bare-page {
  min-height: 100vh;
  background: var(--vc-bg);
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  z-index: 2;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.bare-seal {
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 2;
  width: 140px;
  margin-top: -70px;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 9% 80px 12%;
  overflow: hidden;
}
.bare-inner > .vc-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-logo img {
  width: auto;
  height: 58px;
}
.bare-inner h1 {
  max-width: 620px;
}
.bare-inner .vc-rule {
  margin: 24px 0;
}
.bare-inner .vc-lead {
  max-width: 560px;
}
.bare-inner .vc-btns {
  margin-top: 34px;
}
.error-code {
  display: block;
  margin-bottom: 6px;
  color: var(--vc-accent-text);
  font-size: clamp(120px, 13vw, 210px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.bare-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}
.bare-line .vc-ico {
  width: 58px;
  height: 58px;
}
.bare-line small {
  display: block;
  color: var(--vc-muted);
  font-size: 13px;
}
.bare-line b {
  color: var(--vc-heading);
  font-size: 22px;
  font-weight: 500;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 36px 0;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  background: var(--vc-surface);
  color: var(--vc-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.launch-count .is-gold,
.launch-count .is-gold b {
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
}
.launch-count b {
  font-family: var(--vc-ff-head);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bare-news {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
}
.bare-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--vc-surface);
  color: var(--vc-heading);
  font-family: var(--vc-ff-body);
  font-size: 16px;
  outline: 0;
}
.bare-news input:focus {
  border-color: var(--vc-lemon);
}
.bare-news .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.mini-nav .slider-arrow {
  border-color: transparent;
  background: var(--vc-surface);
  color: var(--vc-ink);
}
/* the white aperture seal on a black disc, so it reads on the photograph and on the paper alike */
.bare-seal {
  box-shadow: var(--vc-shadow-lg);
}

/*======================
16. Subheader
========================*/
/* the inner page title: the base's centred spaced-caps title on a mist band under the Brise-Soleil's shadow fins,
   the crumbs above it, the lead under it; with a photograph, a wide frame that straightens as it lands and stands half
   on the band, half on the page */
.vc-subheader {
  position: relative;
  isolation: isolate;
  padding: 96px 0 100px;
  overflow: clip;
  background: var(--vc-band);
  text-align: center;
}
.vc-subheader.has-photo {
  padding-bottom: 0;
  background: linear-gradient(180deg, var(--vc-band) 0, var(--vc-band) calc(100% - 180px), var(--vc-bg) calc(100% - 180px));
}
.vc-mist .vc-subheader.has-photo {
  background: var(--vc-band);
}
.vc-subheader .vc-gl {
  bottom: 180px;
  height: auto;
}
.vc-subheader:not(.has-photo) .vc-gl {
  bottom: 0;
}
.sub-copy {
  max-width: 900px;
  margin: 0 auto;
}
.vc-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-bottom: 26px;
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.vc-crumbs a:hover {
  color: var(--vc-heading);
}
.vc-crumbs > span:last-child {
  color: var(--vc-heading);
}
.vc-crumbs .sep {
  width: 6px;
  height: 6px;
  background: var(--vc-lemon);
  box-shadow: inset 0 0 0 1px rgba(var(--vc-ink-rgb), 0.2);
}
.vc-subheader h1 {
  margin: 0;
}
.vc-subheader .vc-lead {
  max-width: 640px;
  margin: 24px auto 0;
}
.sub-photo {
  aspect-ratio: 16 / 6.4;
  margin-top: 64px;
}
.sub-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*======================
17. Footer
========================*/
/* the base's thin footer grown up: the logo and line, the tower in two-point perspective with the next free day, the
   studio, today's light, bookings and the letter, then the copyright row */
.vc-footer {
  position: relative;
  padding-top: 80px;
}
.footer-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--vc-line);
}
.footer-logo img {
  height: 22px;
  width: auto;
}
.footer-line {
  margin: 0;
  color: var(--vc-muted);
  font-size: 15px;
}
.footer-tower {
  position: relative;
  height: 340px;
  border-bottom: 1px solid var(--vc-line);
}
.footer-tower canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.tower-cta {
  position: absolute;
  right: 0;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  transition: background-color 0.35s ease, transform 0.35s var(--vc-ease);
}
.tower-cta .vc-eyebrow {
  margin: 0;
  color: var(--vc-on-lemon);
}
.tower-cta .vc-eyebrow::before {
  background: var(--vc-ink);
  box-shadow: none;
}
.tower-cta .tc-day {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.tower-cta .tc-go {
  font-family: var(--vc-ff-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tower-cta .tc-go i {
  margin-inline-start: 6px;
  transition: transform 0.35s var(--vc-ease);
}
.tower-cta:hover {
  color: var(--vc-on-lemon);
  transform: translateY(-4px);
}
.tower-cta:hover .tc-go i {
  transform: translateX(5px);
}
.footer-cols {
  padding: 60px 0 50px;
}
.vc-footer .widget h2 {
  margin-bottom: 22px;
}
.footer-address {
  margin-bottom: 14px;
  color: var(--vc-heading);
  font-size: 15.5px;
}
.vc-footer .vc-status {
  margin-bottom: 18px;
  font-size: 14px;
}
.hours-list li,
.light-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--vc-line);
  font-size: 14px;
}
.hours-list li span,
.light-list li span {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hours-list li b,
.light-list li b {
  color: var(--vc-heading);
  font-family: var(--vc-ff-head);
  font-size: 13px;
  font-weight: 500;
}
.hours-list li.is-today span,
.hours-list li.is-today b {
  color: var(--vc-lemon);
}
.light-note {
  margin: 14px 0 0;
  color: var(--vc-muted);
  font-size: 13.5px;
}
.footer-contact li + li {
  margin-top: 10px;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--vc-text);
  font-size: 15px;
}
.footer-contact a i {
  width: 16px;
  color: var(--vc-lemon);
  font-size: 13px;
}
.footer-contact a:hover {
  color: #FFFFFF;
}
.nl-note {
  margin-bottom: 18px;
  font-size: 15px;
}
.vc-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.vc-newsletter .vc-input {
  flex: 1;
  min-width: 0;
  padding-right: 20px;
}
.nl-btn {
  width: 56px;
  height: 56px;
  background: var(--vc-lemon);
  color: var(--vc-on-lemon);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nl-btn:hover {
  background: #FFFFFF;
  color: var(--vc-ink);
}
.vc-newsletter .form-status {
  flex-basis: 100%;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--vc-line);
  font-size: 14px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: #FFFFFF;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.footer-links a {
  font-family: var(--vc-ff-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer-bottom .coords {
  color: var(--vc-muted);
  font-family: var(--vc-ff-head);
  font-size: 11px;
  letter-spacing: 0.12em;
}