/*---------------------------------------------"
// Template Name: Fit-Nation
// Description:  Fit-Nation Html Template
// Version: 1.0.0

===============================================   
STYLE SHEET INDEXING
|
|___ Fonts
|___ Variables
|___ Responsive
|___ Reset Styles
|___ Spacing
|___ Helper Classes
|___ Buttons
|___ Headings
|___ Layout Styles
|___ END STYLE SHEET INDEXING

--------------------------------------------*/
/*-------------------------
    Fonts
-------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* ============================================================
   THEME TOKENS — replaced per generation by the builder.
   ============================================================ */
:root {
  --vt-primary: #7cb0fd;
  --vt-ink: #0C0C0D;
  --vt-panel: #1E1F20;
  --vt-panel_2: #141516;
  --vt-border: #45474F;
  --vt-muted: #92949F;
  --vt-paper: #FAF7F2;
  --vt-white: #FAFAFA;

  /* Derived from the one accent so every tinted surface stays in its hue
     family for free. On a near-black ground the accent carries all of the
     difference between colourways, so the big grounds below are mixed hard
     enough to actually register (pitfalls #28, #36) — a 10% mix into black
     is the same colour for any two accents. Type on these stays light. */
  --vt-accent-veil: color-mix(in srgb, var(--vt-primary) 22%, var(--vt-ink));
  --vt-accent-band: color-mix(in srgb, var(--vt-primary) 40%, var(--vt-ink));
  --vt-accent-panel: color-mix(in srgb, var(--vt-primary) 24%, var(--vt-panel));
  --vt-accent-edge: color-mix(in srgb, var(--vt-primary) 52%, var(--vt-border));
  /* The weak one is for chips and eyebrows whose *text* is the accent —
     deepening that ground would regress the source theme's own contrast. */
  --vt-accent-chip: color-mix(in srgb, var(--vt-primary) 12%, var(--vt-ink));
}

@font-face {
  font-family: "Nexa";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../css/fonts/Nexa-Heavy.ttf) format("truetype");
}
/*-------------------------
    Variables
-------------------------*/
/* Fonts */
/* Colors */
/* Transitions */
/* Border-Radius */
/* Gap */
/*-------------------------
    Responsive Styles
-------------------------*/
/*-------------------------
    Reset Styles
-------------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.container-fluid {
  padding-right: calc(var(--bs-gutter-x) * 0.75);
  padding-left: calc(var(--bs-gutter-x) * 0.75);
}
@media (min-width: 1200px) {
  .container-fluid {
    padding: 0 5vw;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .container-fluid {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
}

/*-------------------------
  Typography
-------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  color: var(--vt-muted);
  background-color: var(--vt-ink);
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: clamp(16px, 0.938vw, 32px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21.6px */
  height: 100%;
}
@media (max-width: 399px) {
  body {
    font-size: 14px;
  }
}
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background-color: var(--vt-panel_2);
  border-radius: 3px;
}
body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--vt-panel);
}

a {
  display: inline-block;
  text-decoration: none;
  color: unset;
  transition: all 0.3s ease-in-out;
}
a:hover {
  color: var(--vt-primary);
  transition: all 0.3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6,
address,
p,
pre,
blockquote,
table,
hr {
  margin: 0;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-bottom: 0;
}

h1,
.h1 {
  font-family: "Inter", sans-serif;
  font-size: clamp(46px, 3.594vw, 118px);
  /* 69px */
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  /* 96px */
  letter-spacing: -2.1px;
}
@media (max-width: 1199px) {
  h1,
  .h1 {
    font-size: clamp(42px, 4.003vw, 69px);
    /* 48px */
  }
}
@media (max-width: 820px) {
  h1,
  .h1 {
    font-size: clamp(36px, 4.878vw, 54px);
    /* 40px */
  }
}

h2,
.h2 {
  font-family: "Inter", sans-serif;
  font-size: clamp(42px, 2.865vw, 100px); /* 55px */
  font-weight: 500;
  line-height: 120%;
}
@media (max-width: 1199px) {
  h2,
  .h2 {
    font-size: clamp(38px, 3.336vw, 56px); /* 40px */
  }
}
@media (max-width: 820px) {
  h2,
  .h2 {
    font-size: clamp(30px, 4.146vw, 42px); /* 34px */
  }
}

h3,
.h3 {
  font-family: "Inter", sans-serif;
  font-size: clamp(38px, 2.292vw, 72px);
  /* 44px */
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
@media (max-width: 1199px) {
  h3,
  .h3 {
    font-size: clamp(32px, 3.169vw, 49px);
    /* 38px */
  }
}
@media (max-width: 820px) {
  h3,
  .h3 {
    font-size: clamp(27px, 3.902vw, 38px);
    /* 32px */
  }
}

h4,
.h4 {
  font-family: "Inter", sans-serif;
  font-size: clamp(32px, 1.823vw, 58px);
  /* 35px */
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  /* 42px */
}
@media (max-width: 1199px) {
  h4,
  .h4 {
    font-size: clamp(29px, 2.752vw, 40px);
    /* 33px */
  }
}
@media (max-width: 820px) {
  h4,
  .h4 {
    font-size: clamp(23px, 3.293vw, 30px);
    /* 27px */
  }
}

h5,
.h5 {
  font-family: "Inter", sans-serif;
  font-size: clamp(24px, 1.458vw, 48px);
  /* 28px */
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  /* 33.6px */
}
@media (max-width: 1199px) {
  h5,
  .h5 {
    font-size: clamp(23px, 2.085vw, 32px);
    /* 25px */
  }
}
@media (max-width: 820px) {
  h5,
  .h5 {
    font-size: clamp(19px, 2.439vw, 24px);
    /* 20px */
  }
}

h6,
.h6 {
  font-family: "Inter", sans-serif;
  font-size: clamp(20px, 1.198vw, 40px); /* 23px */
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  /* 27.6px */
}
@media (max-width: 1199px) {
  h6,
  .h6 {
    font-size: clamp(21px, 1.918vw, 28px);
    /* 23px */
  }
}
@media (max-width: 820px) {
  h6,
  .h6 {
    font-size: clamp(18px, 2.317vw, 21px);
    /* 19px */
  }
}

.text-18,
p {
  font-family: "Poppins", sans-serif;
  font-size: clamp(16px, 0.938vw, 32px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 21.6px */
}
@media (max-width: 399px) {
  .text-18,
  p {
    font-size: 14px;
  }
}

.eyebrow {
  color: var(--vt-primary);
  text-transform: uppercase;
  font-size: clamp(13px, 0.729vw, 26px);
  /* 14px */
  font-family: "Inter", sans-serif;
  font-weight: 600;
  line-height: 120%;
}

.subtitle {
  font-size: clamp(14px, 0.729vw, 28px);
  /* 14px */
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

span {
  display: inline-block;
}

b,
strong {
  font-family: "Poppins", sans-serif;
}

.hr-line {
  width: 100%;
  height: 1px;
  background: var(--vt-border);
}
.hr-line.line-3 {
  height: 3px;
  width: clamp(24px, 2.5vw, 64px);
  background: var(--vt-primary);
}

/*-------------------------
Helpers
-------------------------*/
.color-primary {
  color: var(--vt-primary) !important;
}

.light-gray {
  color: var(--vt-muted) !important;
}

.lightest-gray {
  color: var(--vt-paper) !important;
}

.color-white {
  color: var(--vt-white);
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-900 {
  font-weight: 900;
}

.font-ter {
  font-family: "Nexa", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
}

.br-18 {
  border-radius: clamp(14px, 0.938vw, 36px);
}

.br-24 {
  border-radius: clamp(18px, 1.25vw, 48px);
}

/*----------------------------------------*/
/*  SPACE CSS START
/*----------------------------------------*/

.mb-80 {
  margin-bottom: clamp(48px, 4.167vw, 160px);
}
@media (max-width: 575px) {
  .mb-80 {
    margin-bottom: 40px;
  }
}

.mb-64 {
  margin-bottom: clamp(32px, 3.33vw, 128px);
}
@media (max-width: 767px) {
  .mb-64 {
    margin-bottom: 26px;
  }
}

.mb-48 {
  margin-bottom: clamp(24px, 2.5vw, 96px);
}
@media (max-width: 767px) {
  .mb-48 {
    margin-bottom: 20px;
  }
}

.mb-40 {
  margin-bottom: clamp(24px, 2.083vw, 80px);
}
@media (max-width: 575px) {
  .mb-40 {
    margin-bottom: 20px;
  }
}

.mb-32 {
  margin-bottom: 32px;
}
@media (max-width: 1599px) {
  .mb-32 {
    margin-bottom: 29px;
  }
}
@media (max-width: 1399px) {
  .mb-32 {
    margin-bottom: 27px;
  }
}
@media (max-width: 1199px) {
  .mb-32 {
    margin-bottom: 25px;
  }
}
@media (max-width: 991px) {
  .mb-32 {
    margin-bottom: 22px;
  }
}
@media (max-width: 767px) {
  .mb-32 {
    margin-bottom: 20px;
  }
}

.mb-24 {
  margin-bottom: 24px;
}
@media (max-width: 1199px) {
  .mb-24 {
    margin-bottom: 22px;
  }
}
@media (max-width: 991px) {
  .mb-24 {
    margin-bottom: 22px;
  }
}
@media (max-width: 767px) {
  .mb-24 {
    margin-bottom: 20px;
  }
}

.mb-16 {
  margin-bottom: 16px;
}
@media (max-width: 1199px) {
  .mb-16 {
    margin-bottom: 15px;
  }
}
@media (max-width: 991px) {
  .mb-16 {
    margin-bottom: 14px;
  }
}
@media (max-width: 767px) {
  .mb-16 {
    margin-bottom: 10px;
  }
}

.mb-12 {
  margin-bottom: 12px;
}
@media (max-width: 1199px) {
  .mb-12 {
    margin-bottom: 11px;
  }
}
@media (max-width: 991px) {
  .mb-12 {
    margin-bottom: 10px;
  }
}
@media (max-width: 767px) {
  .mb-12 {
    margin-bottom: 8px;
  }
}

.mb-8 {
  margin-bottom: 8px;
}
@media (max-width: 767px) {
  .mb-8 {
    margin-bottom: 6px;
  }
}

.mb-6 {
  margin-bottom: 6px;
}
@media (max-width: 767px) {
  .mb-6 {
    margin-bottom: 4px;
  }
}

.py-80 {
  padding: clamp(48px, 4.167vw, 160px) 0;
}
@media (max-width: 575px) {
  .py-80 {
    padding: 40px 0;
  }
}

.pt-80 {
  padding-top: clamp(48px, 4.167vw, 160px);
}
@media (max-width: 575px) {
  .pt-80 {
    padding-top: 40px;
  }
}

.pb-40 {
  padding-bottom: clamp(24px, 2.083vw, 80px);
}
@media (max-width: 575px) {
  .pb-40 {
    padding-bottom: 20px;
  }
}

.gap-8 {
  gap: clamp(4px, 0.417vw, 16px);
}

.gap-12 {
  gap: clamp(8px, 0.625vw, 24px);
}

.gap-16 {
  gap: clamp(12px, 0.833vw, 32px);
}

.gap-24 {
  gap: clamp(18px, 1.25vw, 48px);
}

/*-------------------------
Elements
-------------------------*/
.cus-btn {
  border-radius: clamp(8px, 0.625vw, 24px);
  border: 0;
  padding: clamp(12px, 0.885vw, 28px) clamp(16px, 1.667vw, 64px);
  z-index: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: var(--vt-primary);
  background-image: none;
  color: var(--vt-panel);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: clamp(16px, 0.938vw, 28px);
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 21.6px */
  margin: 0;
  text-transform: uppercase;
}
@media (max-width: 399px) {
  .cus-btn {
    font-size: 14px;
  }
}
.cus-btn.btn-small {
  padding: clamp(9px, 0.677vw, 20px) clamp(16px, 1.667vw, 48px);
}
.cus-btn:disabled {
  cursor: default;
}
.cus-btn:-moz-focusring {
  outline: auto;
}
.cus-btn svg {
  display: block;
  vertical-align: middle;
}
.cus-btn [hidden] {
  display: none;
}
.cus-btn,
.cus-btn .text-container {
  overflow: hidden;
  position: relative;
}
.cus-btn .text-container {
  display: block;
}
.cus-btn .text {
  display: block;
  position: relative;
}
.cus-btn:hover {
  color: var(--vt-panel);
}
.cus-btn:hover .text {
  -webkit-animation: move-up-alternate 0.3s forwards;
  animation: move-up-alternate 0.3s forwards;
}
.cus-btn:after, .cus-btn:before {
  --skew: 0.2;
  background: #fff;
  content: "";
  display: block;
  height: 102%;
  left: calc(-50% - 50% * var(--skew));
  pointer-events: none;
  position: absolute;
  top: -104%;
  transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
  transition: transform 0.2s ease;
  width: 100%;
}
.cus-btn:after {
  --progress: 0%;
  left: calc(50% + 50% * var(--skew));
  top: 102%;
  z-index: -1;
}
.cus-btn:hover:before {
  --progress: 100%;
}
.cus-btn:hover:after {
  --progress: -102%;
}

@-webkit-keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  to {
    transform: translateY(0);
  }
}

@-webkit-keyframes move-up-alternate2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes move-up-alternate2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  to {
    transform: translateY(0);
  }
}

.scrollToTopBtn {
  background: transparent;
  border: 2px solid var(--vt-primary);
  border-radius: clamp(4px, 0.417vw, 16px);
  color: var(--vt-primary);
  cursor: pointer;
  font-size: clamp(18px, 1.25vw, 48px);
  line-height: 48px;
  display: grid;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 2.5vw, 120px);
  height: clamp(40px, 2.5vw, 120px);
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 100;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.5s ease;
}
.scrollToTopBtn:hover {
  box-shadow: 0 0 15px var(--vt-primary);
  background: var(--vt-primary);
  color: var(--vt-panel);
  transition: all 0.3s ease-in-out;
}

.showBtn {
  opacity: 1;
  transform: translateY(0);
}

/*-------------------------
  Form Styling
-------------------------*/
textarea.form-control {
  min-height: 130px;
  max-height: 150px;
}
@media (max-width: 578px) {
  textarea.form-control {
    min-height: 80px;
    max-height: 80px;
  }
}

.form-control {
  padding: clamp(12px, 1.042vw, 32px) clamp(16px, 1.25vw, 40px);
  border-radius: clamp(8px, 0.625vw, 24px);
  border: 0.5px solid var(--vt-muted);
  background: var(--vt-panel);
  font-family: "Poppins", sans-serif;
  font-size: clamp(14px, 0.833vw, 22px); /* 14px */
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  position: relative;
  color: var(--vt-white);
  box-shadow: none;
}
.form-control:-webkit-autofill, .form-control:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}
.form-control:focus {
  background: var(--vt-panel);
  box-shadow: none;
  outline: 0;
  color: var(--vt-white) !important;
}
.form-control:hover {
  color: var(--vt-white) !important;
}
.form-control::placeholder {
  color: var(--vt-muted);
  opacity: 1;
}

.input-block {
  position: relative;
}
.input-block svg, .input-block i {
  position: absolute;
  top: clamp(13px, 1.094vw, 32px);
  right: clamp(16px, 1.25vw, 32px);
  width: clamp(18px, 1.042vw, 34px);
  height: clamp(18px, 1.042vw, 34px);
}

/*-------------------------
  layouts
-------------------------*/
.header {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  padding: clamp(12px, 1vw, 32px) 0;
  width: 100%;
  background: transparent;
}
@media (max-width: 580px) {
  .header {
    padding: 16px 0;
  }
}
.header .navigation {
  width: 100%;
  position: relative;
}
.header .navigation .header-logo {
  width: clamp(120px, 10.417vw, 370px);
}
@media (max-width: 1024px) {
  .header .navigation .header-logo {
    width: 80%;
  }
}
.header .navigation .menu-button-right {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.333vw, 72px);
  border: 1px solid var(--vt-white);
  border-radius: clamp(8px, 0.625vw, 24px);
}
@media (max-width: 1199px) {
  .header .navigation .menu-button-right {
    display: none;
  }
}
.header .navigation .menu-button-right .main-menu__nav {
  margin-left: auto;
  margin-right: auto;
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list,
.header .navigation .menu-button-right .main-menu__nav .main-menu__list ul,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  align-items: center;
  display: none;
}
@media screen and (min-width: 1200px) {
  .header .navigation .menu-button-right .main-menu__nav .main-menu__list,
  .header .navigation .menu-button-right .main-menu__nav .main-menu__list ul,
  .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list,
  .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list ul {
    display: flex;
    gap: clamp(18px, 1.25vw, 48px);
  }
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list > li,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li {
  position: relative;
  padding: clamp(12px, 0.833vw, 32px) 0;
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list > li:first-child,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li:first-child {
  padding-left: clamp(12px, 0.833vw, 32px);
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list > li:last-child,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li:last-child {
  padding-right: clamp(12px, 0.833vw, 32px);
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a {
  font-size: clamp(16px, 0.938vw, 28px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21.6px */
  padding: clamp(4px, 0.208vw, 8px) clamp(8px, 0.417vw, 16px);
  text-transform: capitalize;
  color: var(--vt-white);
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.25vw, 48px) !important;
  position: relative;
  transition: all all 0.3s ease-in-out;
  border-radius: clamp(4px, 0.417vw, 16px);
}
@media (max-width: 399px) {
  .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a,
  .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a {
    font-size: 14px;
  }
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a.active, .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a:hover,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a.active,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a:hover {
  background: var(--vt-white);
  color: var(--vt-panel);
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list > li.current a, .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li:hover a,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li.current a,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li:hover a {
  background: var(--vt-white);
  color: var(--vt-panel);
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: clamp(200px, 10.938vw, 450px);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transform: scaleY(0) translateZ(100px);
  backface-visibility: hidden;
  transition: opacity all 0.3s ease-in-out, visibility all 0.3s ease-in-out, transform 700ms ease;
  z-index: 99;
  background: var(--vt-white);
  padding: 0;
  border-radius: clamp(2px, 0.208vw, 8px);
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li {
  flex: 1 1 100%;
  width: 100%;
  position: relative;
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > a,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > a {
  font-size: clamp(14px, 0.833vw, 28px);
  line-height: 26px;
  color: var(--vt-ink);
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: center;
  padding: clamp(5px, 0.365vw, 40px) clamp(10px, 0.625vw, 64px);
  height: clamp(52px, 2.917vw, 84px);
  transition: 400ms;
  border-radius: clamp(2px, 0.208vw, 8px);
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li.current > a, .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li:hover > a,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li.current > a,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li:hover > a {
  background-color: var(--vt-primary);
  color: var(--vt-panel);
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > ul,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > ul {
  top: 0;
  left: calc(100% + 20px);
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > ul ul,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > ul ul {
  display: flex;
}
.header .navigation .menu-button-right .main-menu__nav .main-menu__list li:hover > ul,
.header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:hover > ul {
  opacity: 1;
  visibility: visible;
  gap: 0;
  transform: scaleY(1) translateZ(0px);
  transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header .navigation .menu-button-right .main-menu__nav .main-menu__list li:nth-last-child(1) ul li > ul, .header .navigation .menu-button-right .main-menu__nav .main-menu__list li:nth-last-child(2) ul li > ul,
  .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:nth-last-child(1) ul li > ul,
  .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:nth-last-child(2) ul li > ul {
    left: auto;
    right: calc(100% + 20px);
  }
}
.header .navigation .main-menu__right {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.25vw, 48px) !important;
}
.header .navigation .main-menu__right i {
  color: var(--vt-panel_2);
  font-size: clamp(20px, 1.25vw, 32px);
}

.mobile-nav__toggler {
  font-size: 24px;
  font-weight: 200;
  color: var(--vt-white);
  cursor: pointer;
  transition: 500ms;
  display: none;
}
@media (max-width: 1099px) {
  .mobile-nav__toggler {
    display: flex;
  }
}
.mobile-nav__toggler:hover {
  color: var(--vt-primary);
}

/*--------------------------------------------------------------
# Mobile Nav
--------------------------------------------------------------*/
.mobile-nav__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  transform: translateX(-100%);
  transform-origin: left center;
  transition: transform 500ms ease 500ms, visibility 500ms ease 500ms;
  visibility: hidden;
  position: fixed;
}
.mobile-nav__wrapper.expanded {
  opacity: 1;
  transform: translateX(0%);
  visibility: visible;
  transition: transform 500ms ease 0ms, visibility 500ms ease 0ms;
}
.mobile-nav__wrapper.expanded .mobile-nav__content {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms;
}
.mobile-nav__wrapper .mobile-nav__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--vt-ink);
  opacity: 0.3;
}
.mobile-nav__wrapper .mobile-nav__content {
  width: 300px;
  background-color: var(--vt-ink);
  z-index: 10;
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 15px;
  padding-right: 15px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms;
}
@media (max-width: 490px) {
  .mobile-nav__wrapper .mobile-nav__content {
    width: clamp(270px, 55.102vw, 450px);
  }
}
.mobile-nav__wrapper .mobile-nav__content .main-menu__nav {
  display: block;
  padding: 0;
}
.mobile-nav__wrapper .mobile-nav__content .logo-box {
  margin-bottom: 40px;
  display: flex;
}
.mobile-nav__wrapper .mobile-nav__content .logo-box img {
  width: clamp(120px, 15.625vw, 320px);
}
.mobile-nav__wrapper .mobile-nav__content .main-menu__list,
.mobile-nav__wrapper .mobile-nav__content .main-menu__list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.mobile-nav__wrapper .mobile-nav__content .main-menu__list ul {
  display: none;
  border-top: 1px solid RGBA(255, 255, 255, 0.1);
}
.mobile-nav__wrapper .mobile-nav__content .main-menu__list ul li > a {
  padding-left: 1em;
}
.mobile-nav__wrapper .mobile-nav__content .main-menu__list ul li:not(:last-child) {
  border-bottom: 1px solid RGBA(255, 255, 255, 0.1);
}
.mobile-nav__wrapper .mobile-nav__content .main-menu__list li:not(:last-child) {
  border-bottom: 1px solid RGBA(255, 255, 255, 0.1);
}
.mobile-nav__wrapper .mobile-nav__content .main-menu__list li a {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  color: var(--vt-white);
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  text-transform: capitalize;
  font-weight: 500;
  height: 46px;
  letter-spacing: 0.8px;
  align-items: center;
  transition: 500ms;
}
.mobile-nav__wrapper .mobile-nav__content .main-menu__list li a.expanded {
  color: var(--vt-primary);
}
.mobile-nav__wrapper .mobile-nav__content .main-menu__list li a button {
  width: 30px;
  height: 30px;
  background-color: var(--vt-primary);
  border: none;
  outline: none;
  color: var(--vt-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-90deg);
  transition: transform 500ms ease;
}
.mobile-nav__wrapper .mobile-nav__content .main-menu__list li a button.expanded {
  transform: rotate(0deg);
  background-color: var(--vt-white);
  color: var(--vt-ink);
}
.mobile-nav__wrapper .mobile-nav__close {
  position: absolute;
  top: 20px;
  right: 15px;
  font-size: 18px;
  color: var(--vt-white);
  cursor: pointer;
}

.mobile-nav__contact {
  margin-bottom: 0;
  margin-top: 20px;
  margin-bottom: 20px;
}
.mobile-nav__contact li {
  color: var(--vt-white);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
}
.mobile-nav__contact li + li {
  margin-top: 15px;
}
.mobile-nav__contact li a {
  color: inherit;
  transition: 500ms;
}
.mobile-nav__contact li a:hover {
  color: var(--vt-primary);
}
.mobile-nav__contact li i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--vt-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 14px;
  margin-right: 10px;
  color: var(--vt-panel);
}

.mobile-nav__container .main-menu__logo,
.mobile-nav__container .main-menu__right {
  display: none;
}

.hero-banner-sec {
  background-color: var(--vt-accent-veil);
  background-image: url("../media/hero/hero-bg.png");
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  background-position: center;
  background-size: cover;
  /* The section's own background has to sit behind ::before, and the header is
     absolutely positioned over the top of it. */
  position: relative;
  isolation: isolate;
}
@media (max-width: 1024px) {
  .hero-banner-sec {
    position: relative;
    padding-top: 135%;
  }
}
@media (max-width: 820px) {
  .hero-banner-sec {
    padding-top: 146%;
    overflow-x: hidden;
  }
}
@media (max-width: 768px) {
  .hero-banner-sec {
    padding-top: 134%;
  }
}
@media (max-width: 576px) {
  .hero-banner-sec {
    height: 100vh;
  }
}
.hero-banner-sec .banner-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(84px, 5.573vw, 160px);
  position: relative;
}
/* The scrim that keeps the headline readable belongs on the SECTION, not on
   .banner-image — that box lives inside .container-fluid, so a gradient on it
   stopped at the container's 5vw padding and painted a hard-edged panel across
   the middle of the hero, hiding the background image the theme relies on.
   Full-bleed and translucent instead: the smoke texture stays visible edge to
   edge and only darkens under the type. */
.hero-banner-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--vt-ink) 82%, transparent) 0%, color-mix(in srgb, var(--vt-ink) 52%, transparent) 30%, color-mix(in srgb, var(--vt-ink) 14%, transparent) 58%, rgba(0, 0, 0, 0) 78%);
}
@media (max-width: 1024px) {
  .hero-banner-sec .banner-image {
    position: absolute;
    bottom: 0;
    right: 0px;
    padding: 0;
    text-align: end;
    display: unset;
  }
}
@media (max-width: 820px) {
  .hero-banner-sec .banner-image {
    right: -162px;
  }
}
@media (max-width: 768px) {
  .hero-banner-sec .banner-image {
    right: -148px;
  }
}
@media (max-width: 490px) {
  .hero-banner-sec .banner-image {
    right: -142px;
  }
}
.hero-banner-sec .banner-image img {
  width: 49.74vw;
  aspect-ratio: 955 / 900;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  /* The theme's hero art was a transparent cut-out, so it had no edges and the
     smoke behind it showed through. A generated photograph is a hard-edged
     rectangle, so its edges are feathered back into the ground. Two linear
     masks intersected rather than one radial: a radial big enough to keep the
     middle of the picture never reaches zero alpha at the sides, which is
     exactly how the hard edge survived the first attempt.
     The darkening is here and not on the section because the headline crosses
     the picture, and a bright photograph would swallow it. */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 28%, #000 72%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 14%, #000 66%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 28%, #000 72%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 14%, #000 66%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
  filter: brightness(0.66) contrast(1.04);
}
@media (max-width: 1024px) {
  .hero-banner-sec .banner-image img {
    width: 93%;
  }
}
@media (max-width: 820px) {
  .hero-banner-sec .banner-image img {
    width: 88%;
  }
}
@media (max-width: 768px) {
  .hero-banner-sec .banner-image img {
    width: 80%;
  }
}
@media (max-width: 768px) {
  .hero-banner-sec .banner-image img {
    width: 80%;
  }
}
@media (max-width: 490px) {
  .hero-banner-sec .banner-image img {
    width: 92%;
  }
}
.hero-banner-sec .banner-wrapper {
  position: relative;
}
@media (max-width: 1024px) {
  .hero-banner-sec .banner-wrapper {
    position: unset;
  }
}
.hero-banner-sec .banner-wrapper .banner-left-block {
  position: absolute;
  top: 13.25vw;
  left: 0;
  max-width: min(47vw, 1080px);
}
@media (max-width: 1024px) {
  .hero-banner-sec .banner-wrapper .banner-left-block {
    max-width: min(78vw, 720px);
  }
}
@media (max-width: 1024px) {
  .hero-banner-sec .banner-wrapper .banner-left-block {
    left: 24px;
  }
}
@media (max-width: 490px) {
  .hero-banner-sec .banner-wrapper .banner-left-block {
    top: 116px;
    left: 16px;
    width: 85%;
  }
}
.hero-banner-sec .banner-wrapper .banner-left-block h1,
.hero-banner-sec .banner-wrapper .banner-left-block .h1 {
  font-size: clamp(61px, 8.333vw, 220px);
  font-weight: 900;
  line-height: 100%;
  letter-spacing: -4.8px;
  font-style: normal;
  font-family: "Nexa", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  /* The theme's fade is per LINE, not per block: its fixture headline was two
     separate one-line elements, so each got its own white-to-grey ramp. A
     generated headline wraps, and one gradient stretched over the whole box
     left the lower lines washed out. Tiling the same ramp at exactly one line
     height reproduces the original on every line, however many there are. */
  background-image: linear-gradient(180deg, var(--vt-white) 50%, rgba(153, 153, 153, 0.2) 89.06%);
  background-size: 100% 1em;
  background-repeat: repeat-y;
  background-origin: content-box;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-banner-sec .banner-wrapper .banner-left-block.hero-size-2 h1,
.hero-banner-sec .banner-wrapper .banner-left-block.hero-size-2 .h1 {
  font-size: clamp(44px, 5.9vw, 150px);
  letter-spacing: -3.4px;
}
.hero-banner-sec .banner-wrapper .banner-left-block.hero-size-3 h1,
.hero-banner-sec .banner-wrapper .banner-left-block.hero-size-3 .h1 {
  font-size: clamp(34px, 4.4vw, 112px);
  letter-spacing: -2.4px;
  line-height: 108%;
}
.hero-banner-sec .banner-wrapper .banner-left-block.hero-size-3 h1 {
  background-size: 100% 1.08em;
}
.hero-banner-sec .banner-wrapper .banner-right-block {
  position: absolute;
  top: 12.5vw;
  right: 0;
  width: clamp(350px, 25.469vw, 650px);
  display: flex;
  gap: 19.792vw;
  flex-direction: column;
}
@media (max-width: 1599px) {
  .hero-banner-sec .banner-wrapper .banner-right-block {
    gap: 13.133vw;
  }
}
@media (max-width: 1699px) {
  .hero-banner-sec .banner-wrapper .banner-right-block {
    gap: 8.578vw;
  }
}
@media (max-width: 1024px) {
  .hero-banner-sec .banner-wrapper .banner-right-block {
    top: unset;
    right: unset;
    bottom: 40px;
    left: 24px;
  }
}

.about-sec .about-block {
  position: relative;
  width: 100%;
}
@media (max-width: 1024px) {
  .about-sec .about-block {
    width: 100%;
  }
}
.about-sec .about-block .image-box {
  border-radius: clamp(18px, 1.25vw, 48px);
  overflow: hidden;
  width: 100%;
}
.about-sec .about-block .image-box img {
  -webkit-transition: all 0.35s linear 0s;
  transition: all 0.35s linear 0s;
  border-radius: clamp(18px, 1.25vw, 48px);
  width: 100%;
}
@media (max-width: 1024px) {
  .about-sec .about-block .image-box img {
    width: 100%;
  }
}
.about-sec .about-block .content-box {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 0 clamp(16px, 6.667vw, 160px) clamp(16px, 3.333vw, 96px);
}
.about-sec .about-block .content-box.box-2 {
  padding: 0 0 clamp(16px, 1.667vw, 60px) clamp(16px, 1.667vw, 60px);
}
.about-sec .about-block .content-box h2, .about-sec .about-block .content-box .h5 {
  color: var(--vt-white);
  transition: all 0.3s ease-in-out;
}
.about-sec .about-block .content-box h5 {
  color: var(--vt-panel);
  transition: all 0.3s ease-in-out;
}
.about-sec .about-block:hover .image-box img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.35s linear 0s;
  transition: all 0.35s linear 0s;
}
.about-sec .about-block:hover .content-box h2, .about-sec .about-block:hover .content-box .h5 {
  color: var(--vt-primary);
  transition: all 0.3s ease-in-out;
}
.about-sec .about-block:hover .content-box h5 {
  color: var(--vt-white);
  transition: all 0.3s ease-in-out;
}

.service-sec .services-wrapper .service-block {
  padding: clamp(18px, 2.5vw, 64px) 0;
  border: 1px solid var(--vt-muted);
  border-left: 0;
  border-right: 0;
}
.service-sec .services-wrapper .service-block .sub-block-1 {
  display: flex;
  align-items: center;
  gap: clamp(48px, 3.333vw, 128px);
}
.service-sec .services-wrapper .service-block .sub-block-1 .image-box {
  border-radius: clamp(28px, 2.5vw, 72px);
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  width: clamp(40%, 13.958vw, 480px);
}
.service-sec .services-wrapper .service-block .sub-block-1 .image-box img {
  width: 100%;
  border-radius: clamp(28px, 2.5vw, 72px);
  -webkit-transition: all 0.35s linear 0s;
  transition: all 0.35s linear 0s;
}
.service-sec .services-wrapper .service-block .sub-block-1 .title-text h2 {
  color: var(--vt-white);
  transition: all 0.3s ease-in-out;
}
.service-sec .services-wrapper .service-block .sub-block-2 {
  display: flex;
  align-items: center;
  gap: clamp(48px, 3.333vw, 128px);
}
.service-sec .services-wrapper .service-block .sub-block-2 svg {
  transition: all 0.3s ease-in-out;
}
.service-sec .services-wrapper .service-block .sub-block-2 svg path {
  transition: all 0.3s ease-in-out;
}
.service-sec .services-wrapper .service-block:hover .sub-block-1 .image-box {
  transform: translateX(32px);
  transition: all 0.3s ease-in-out;
}
.service-sec .services-wrapper .service-block:hover .sub-block-1 .image-box img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.35s linear 0s;
  transition: all 0.35s linear 0s;
}
.service-sec .services-wrapper .service-block:hover .sub-block-1 h2 {
  color: var(--vt-primary);
  transition: all 0.3s ease-in-out;
}
.service-sec .services-wrapper .service-block:hover .sub-block-2 svg {
  transition: all 0.3s ease-in-out;
  transform: rotate(45deg);
}
.service-sec .services-wrapper .service-block:hover .sub-block-2 svg path {
  stroke: var(--vt-primary);
}

.benefit-sec .images-wrapper {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.25vw, 48px) !important;
}
.benefit-sec .images-wrapper .benefit-image {
  position: relative;
}
.benefit-sec .images-wrapper .benefit-image .object-image {
  width: 21.563vw;
}
@media (max-width: 1024px) {
  .benefit-sec .images-wrapper .benefit-image .object-image {
    width: 100%;
  }
}
.benefit-sec .images-wrapper .benefit-image .circular-image {
  position: absolute;
  top: -66px;
  right: -75px;
  width: 7.5vw;
}
@media (max-width: 1399px) {
  .benefit-sec .images-wrapper .benefit-image .circular-image {
    top: -48px;
    right: -56px;
  }
}
@media (max-width: 1024px) {
  .benefit-sec .images-wrapper .benefit-image .circular-image {
    top: -64px;
    right: -80px;
    width: auto;
  }
}
@media (max-width: 992px) {
  .benefit-sec .images-wrapper .benefit-image .circular-image {
    top: -40px;
    right: -54px;
    width: 23%;
  }
}
@media (max-width: 899px) {
  .benefit-sec .images-wrapper .benefit-image .circular-image {
    display: none;
  }
}

/* The theme filled this band with a photograph of an identifiable person,
   which would ship on every generated site. Replaced with the palette plus
   the theme's own diagonal-slash motif drawn in CSS — it repaints per
   colourway, so it also carries the accent across a large surface. */
.inner-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: radial-gradient(120% 140% at 12% 0%, var(--vt-accent-band) 0%, color-mix(in srgb, var(--vt-accent-veil) 70%, var(--vt-ink)) 42%, var(--vt-ink) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  padding: clamp(64px, 8.594vw, 220px) 0;
}
.inner-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--vt-primary) 22%, transparent) 0 2px, transparent 2px 26px);
}
.inner-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -18%;
  right: -6%;
  width: clamp(240px, 34vw, 660px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vt-primary) 26%, transparent) 0%, transparent 68%);
}
.inner-banner .banner-block {
  display: flex;
  align-items: center;
  gap: clamp(12px, 0.833vw, 32px);
}
.inner-banner .banner-block .icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(48px, 4.167vw, 120px);
  height: clamp(48px, 4.167vw, 120px);
  border-radius: 50%;
  background: var(--vt-white);
}
.inner-banner .banner-block .icon-box svg {
  /* Matches the pictogram size the theme's PNG icons rendered at. */
  width: clamp(30px, 2.5vw, 96px);
  height: clamp(30px, 2.5vw, 96px);
}
/* The theme's three supporting paragraphs were identical in length, so the
   blocks lined up on their own. Database copy varies, so the columns stretch to
   a shared height and every paragraph is given three lines of room — it is
   never cut, a shorter one simply leaves the space empty. */
.inner-banner .banner-block {
  align-items: flex-start;
  height: 100%;
  /* Fills its third of the row, so a short paragraph does not leave the block
     narrower than the other two. */
  width: 100%;
}
.inner-banner .heading > .row > [class*=col-] > .row {
  align-items: stretch;
}
.inner-banner .heading > .row > [class*=col-] > .row > [class*=col-] {
  display: flex;
}
.inner-banner .banner-block .text {
  min-width: 0;
}
.inner-banner .banner-block .text p {
  min-height: calc(3 * 1.5em);
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .inner-banner .banner-block .text p {
    min-height: 0;
  }
}

.testimonial-sec .verticle-text {
  display: flex;
  align-items: center;
  place-content: center;
  /* Auto, so the rail is whatever height its label needs — the theme's fixed
     23.438vw box was cut to fit one word. */
  width: auto;
  height: auto;
  flex-shrink: 0;
}
@media (max-width: 490px) {
  .testimonial-sec .verticle-text {
    display: none;
  }
}
.testimonial-sec .verticle-text .text {
  display: flex;
  align-items: center;
  place-self: stretch;
  align-self: center;
  gap: clamp(18px, 1.25vw, 48px) !important;
  font-size: clamp(15px, 1.11vw, 26px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--vt-white);
  text-transform: uppercase;
  padding: 1.042vw 1.875vw;
  background: var(--vt-panel);
  border-radius: clamp(4px, 0.417vw, 16px);
  border: 1px solid var(--vt-muted);
  /* Was a fixed-size box spun with rotate(270deg), which fit the theme's
     one-word label and clipped anything longer. Real writing-mode instead, so
     the rail grows with whatever company name it is given. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  width: auto;
  height: auto;
  white-space: nowrap;
}
@media (max-width: 1699px) {
  .testimonial-sec .verticle-text .text {
    gap: 4px !important;
  }
}
@media (max-width: 1499px) {
  .testimonial-sec .verticle-text .text {
    gap: 8px !important;
  }
}
.testimonial-sec .verticle-text .text svg {
  width: clamp(24px, 1.719vw, 48px);
  height: clamp(13px, 1.25vw, 40px);
}
.testimonial-sec .testimonial-image {
  width: 100%;
}
@media (max-width: 1024px) {
  .testimonial-sec .testimonial-image {
    width: 100%;
  }
}
.testimonial-sec .testimonial-image img {
  width: 100%;
  border: 1px solid var(--vt-muted);
  border-radius: clamp(18px, 1.25vw, 48px);
}
@media (max-width: 1024px) {
  .testimonial-sec .testimonial-image img {
    width: 100%;
  }
}

.blog-sec .blog-container {
  position: relative;
  height: 100%;
  width: 100%;
}
.blog-sec .blog-container .image-block {
  overflow: hidden;
  border-radius: clamp(18px, 1.25vw, 48px);
  height: 100%;
  width: 100%;
}
.blog-sec .blog-container .image-block img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  -webkit-transition: all 0.35s linear 0s;
  transition: all 0.35s linear 0s;
  border-radius: clamp(18px, 1.25vw, 48px);
}
.blog-sec .blog-container .image-block.shine {
  position: relative;
  overflow: hidden;
}
.blog-sec .blog-container .image-block.shine::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  content: "";
  display: block;
  height: 100%;
  left: -85%;
  position: absolute;
  top: 0;
  transform: skewX(25deg);
  width: 50%;
  z-index: 2;
  pointer-events: none;
}
@keyframes shine {
  100% {
    left: 125%;
  }
}
.blog-sec .blog-container .content-block {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: clamp(16px, 1.667vw, 48px);
}
.blog-sec .blog-container .content-block h5 {
  color: var(--vt-white);
  transition: all 0.3s ease-in-out;
}
.blog-sec .blog-container .content-block img {
  width: clamp(16px, 1.25vw, 32px);
  height: clamp(16px, 1.25vw, 32px);
}
.blog-sec .blog-container:hover .image-block img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.35s linear 0s;
  transition: all 0.35s linear 0s;
}
.blog-sec .blog-container:hover .image-block.shine:hover::before, .blog-sec .blog-container:hover .image-block.shine:focus::before {
  animation: shine 0.85s;
}
.blog-sec .blog-container:hover .content-block h5 {
  color: var(--vt-primary);
  transition: all 0.3s ease-in-out;
}
.blog-sec .blog-list-container {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.25vw, 48px) !important;
}
.blog-sec .blog-list-container .image-block {
  height: 100%;
  overflow: hidden;
  border-radius: clamp(18px, 1.25vw, 48px);
  display: flex;
  flex-shrink: 0;
}
@media (max-width: 490px) {
  .blog-sec .blog-list-container .image-block {
    width: 120px;
  }
}
.blog-sec .blog-list-container .image-block img {
  -webkit-transition: all 0.35s linear 0s;
  transition: all 0.35s linear 0s;
  border-radius: clamp(18px, 1.25vw, 48px);
}
.blog-sec .blog-list-container .image-block.shine {
  position: relative;
  overflow: hidden;
}
.blog-sec .blog-list-container .image-block.shine::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  content: "";
  display: block;
  height: 100%;
  left: -85%;
  position: absolute;
  top: 0;
  transform: skewX(25deg);
  width: 50%;
  z-index: 2;
  pointer-events: none;
}
@keyframes shine {
  100% {
    left: 125%;
  }
}
.blog-sec .blog-list-container .content-block .icon-box {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.417vw, 16px);
}
.blog-sec .blog-list-container .content-block .icon-box img {
  width: clamp(16px, 1.042vw, 32px);
  height: clamp(16px, 1.042vw, 32px);
}
.blog-sec .blog-list-container .content-block .title-text {
  transition: all 0.3s ease-in-out;
}
.blog-sec .blog-list-container:hover .image-block img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.35s linear 0s;
  transition: all 0.35s linear 0s;
}
.blog-sec .blog-list-container:hover .image-block.shine:hover::before, .blog-sec .blog-list-container:hover .image-block.shine:focus::before {
  animation: shine 0.85s;
}
.blog-sec .blog-list-container:hover .content-block .title-text {
  color: var(--vt-primary);
  transition: all 0.3s ease-in-out;
}

/* The source art was a photograph of a specific interior. It is now a flat
   near-white grey texture, multiplied by an accent tint — same tonal band as
   the original, business-neutral, and it repaints with the colourway. */
.title-banner {
  background-color: var(--vt-accent-veil);
  background-image: url("../media/backgrounds/title-banner.png");
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  background-position: center;
  background-size: cover;
  height: calc(clamp(140px, 15.26vw, 580px) + clamp(64px, 5.573vw, 220px));
  display: grid;
  align-items: center;
  justify-content: center;
}
.title-banner h1 {
  font-family: "Nexa", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-size: clamp(48px, 6.25vw, 160px);
  font-style: normal;
  font-weight: 900;
  line-height: 130%; /* 120px */
  letter-spacing: -3.6px;
  background-image: linear-gradient(180deg, var(--vt-white) 68%, rgba(153, 153, 153, 0.3) 85%);
  background-size: 100% 1.3em;
  background-repeat: repeat-y;
  background-origin: content-box;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: capitalize;
  padding-top: clamp(48px, 5vw, 150px);
}

.sidebar {
  padding: clamp(12px, 1.25vw, 32px);
  border-radius: clamp(18px, 1.25vw, 48px);
  border: 1px solid var(--vt-muted);
  background: var(--vt-panel);
}

.blog-sidebar form {
  position: relative;
  display: flex;
}
.blog-sidebar form input {
  border-radius: clamp(12px, 0.833vw, 32px) 0 0 clamp(12px, 0.833vw, 32px);
  background: var(--vt-panel);
  border: 1px solid var(--vt-muted);
}
.blog-sidebar form button {
  transition: all 0.3s ease-in-out;
  padding: clamp(12px, 0.833vw, 24px) clamp(18px, 1.667vw, 48px);
  background: var(--vt-primary);
  border-radius: 0 clamp(12px, 0.833vw, 32px) clamp(12px, 0.833vw, 32px) 0;
  border: 1px solid var(--vt-primary);
}
.blog-sidebar form button i {
  transition: all 0.3s ease-in-out;
  color: var(--vt-panel);
  font-size: clamp(18px, 1.042vw, 36px);
}
.blog-sidebar form button:hover {
  transition: all 0.3s ease-in-out;
  background: var(--vt-border);
  border: 1px solid var(--vt-muted);
}
.blog-sidebar form button:hover i {
  transition: all 0.3s ease-in-out;
  color: var(--vt-white);
}
.blog-sidebar .content-block {
  padding: clamp(12px, 1.25vw, 40px);
  border-radius: clamp(18px, 1.25vw, 48px);
  border: 1px solid var(--vt-muted);
  background: var(--vt-panel);
}
.blog-sidebar .content-block .sidebar-block {
  display: flex;
  align-items: center;
  gap: clamp(12px, 0.833vw, 32px);
}
.blog-sidebar .content-block .sidebar-block .img-box {
  overflow: hidden;
  border-radius: clamp(4px, 0.417vw, 16px);
  display: flex;
  flex-shrink: 0;
  width: clamp(60px, 4.167vw, 140px);
  height: clamp(60px, 4.167vw, 140px);
}
.blog-sidebar .content-block .sidebar-block .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: all 0.35s linear 0s;
  transition: all 0.35s linear 0s;
  border-radius: clamp(4px, 0.417vw, 16px);
}
.blog-sidebar .content-block .sidebar-block .content-box p:first-child {
  color: var(--vt-white);
  transition: all 0.3s ease-in-out;
}
.blog-sidebar .content-block .sidebar-block:hover .img-box {
  transition: all 0.3s ease-in-out;
}
.blog-sidebar .content-block .sidebar-block:hover .img-box img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.35s linear 0s;
  transition: all 0.35s linear 0s;
}
.blog-sidebar .content-block .sidebar-block:hover .content-box p:first-child {
  color: var(--vt-primary);
  transition: all 0.3s ease-in-out;
}

.blog-detail-page {
  position: relative;
}
.blog-detail-page .blog-detail-wrapper .main-image {
  position: relative;
}
.blog-detail-page .blog-detail-wrapper button {
  border: 0;
}

.contact-wrapper {
  position: relative;
}
@media (max-width: 1599px) {
  .contact-wrapper .form-container {
    height: 85%;
  }
}
@media (max-width: 1599px) {
  .contact-wrapper .form-container form {
    height: 100%;
  }
}
@media (max-width: 1599px) {
  .contact-wrapper .form-container form .form-wrapper {
    height: 100%;
  }
}
.contact-wrapper .contact-text-container {
  border-radius: clamp(8px, 0.625vw, 24px);
  height: 100%;
}
.contact-wrapper .contact-text-container .detail-wrapper .detail-block {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.625vw, 24px);
  padding: clamp(12px, 0.833vw, 24px);
  transition: all 0.3s ease-in-out;
  border: 1px solid var(--vt-ink);
}
.contact-wrapper .contact-text-container .detail-wrapper .detail-block .icon-box svg {
  width: clamp(26px, 2.083vw, 64px);
}
.contact-wrapper .contact-text-container .detail-wrapper .detail-block h6 {
  color: var(--vt-white);
  transition: all 0.3s ease-in-out;
}
.contact-wrapper .contact-text-container .detail-wrapper .detail-block p {
  transition: all 0.3s ease-in-out;
}
.contact-wrapper .contact-text-container .detail-wrapper .detail-block:hover {
  background: var(--vt-panel);
  border-radius: clamp(8px, 0.625vw, 24px);
  transition: all 0.3s ease-in-out;
  border: 1px solid var(--vt-muted);
}
.contact-wrapper .contact-text-container .detail-wrapper .detail-block:hover h6 {
  color: var(--vt-white);
  transition: all 0.3s ease-in-out;
}
.contact-wrapper .contact-text-container .detail-wrapper .detail-block:hover p {
  color: var(--vt-white);
  transition: all 0.3s ease-in-out;
}
.contact-wrapper .contact-text-container button {
  border: 0;
}
.contact-wrapper .form-container {
  padding: clamp(16px, 1.667vw, 48px);
  border: 1px solid var(--vt-muted);
  border-radius: clamp(18px, 1.25vw, 48px);
  background: var(--vt-panel);
}

.newsletter-form {
  padding: 0 24px;
}
@media (max-width: 1399px) {
  .newsletter-form {
    padding: 0;
  }
}
.newsletter-form form {
  position: relative;
}
.newsletter-form form input {
  padding: clamp(16px, 1.4vw, 35px) clamp(16px, 1.25vw, 40px);
}
.newsletter-form form button {
  position: absolute;
  top: 16px;
  right: 16px;
}
@media (min-width: 2299px) {
  .newsletter-form form button {
    top: 20px;
    right: 20px;
  }
}
@media (min-width: 3299px) {
  .newsletter-form form button {
    top: 16px;
    right: 16px;
  }
}
@media (max-width: 1399px) {
  .newsletter-form form button {
    top: 12px;
    right: 12px;
  }
}
@media (max-width: 1024px) {
  .newsletter-form form button {
    top: 11px;
  }
}
@media (max-width: 490px) {
  .newsletter-form form button {
    top: 10px;
    right: 10px;
  }
}

footer .social-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 0.938vw, 36px) !important;
}
footer .social-links li a {
  width: clamp(40px, 3.33vw, 120px);
  height: clamp(40px, 3.33vw, 120px);
  border: 2px solid var(--vt-primary);
  border-radius: 50%;
  background: transparent;
  transition: all 0.3s ease-in-out;
  display: grid;
  align-items: center;
  justify-content: center;
}
footer .social-links li a svg {
  width: clamp(18px, 1.667vw, 64px);
  height: clamp(18px, 1.667vw, 64px);
}
footer .social-links li a svg path {
  transition: all 0.3s ease-in-out;
}
footer .social-links li:hover a {
  background: var(--vt-primary);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 15px var(--vt-primary);
}
footer .social-links li:hover a svg path {
  fill: var(--vt-panel);
  transition: all 0.3s ease-in-out;
}
footer .footer-link li a {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.417vw, 16px);
  color: var(--vt-muted);
}
footer .footer-link li a svg {
  transition: all 0.3s ease-in-out;
}
footer .footer-link li:hover a {
  transition: all 0.3s ease-in-out;
  color: var(--vt-primary);
}
footer .footer-link li:hover a svg {
  transform: rotate(30deg);
  transition: all 0.3s ease-in-out;
}
footer .footer-info-block li {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.625vw, 24px);
}
footer .footer-info-block li .icon-box img {
  width: clamp(24px, 2.083vw, 64px);
  height: clamp(24px, 2.083vw, 64px);
}

/* ============================================================
   GENERATOR CONVERSION LAYER
   Everything below exists because the page is now filled from a
   database instead of from the theme's own fixtures. Grouped rather
   than edited in place so the source theme stays readable.
   ============================================================ */

/* --- 1. Brand ------------------------------------------------
   generateLogo returns a logo or nothing, so both a logo slot and a
   wordmark slot ship; the builder hides whichever is unused. The size
   caps matter because logo_src falls back to a content image, and an
   uncapped photo takes over the header (pitfall #15). */
.brand-text {
  font-family: "Nexa", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 1.354vw, 40px);
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--vt-white);
  text-transform: uppercase;
}
.header .navigation .header-logo,
.mobile-nav__wrapper .mobile-nav__content .logo-box img,
footer .logo-block .footer-logo {
  max-height: clamp(34px, 2.6vw, 74px);
  width: auto;
  max-width: clamp(120px, 10.417vw, 370px);
  -o-object-fit: contain;
  object-fit: contain;
  /* Recraft returns the mark in whatever colours it chose, and all three slots
     sit on --vt-ink in every colourway. brightness(0) crushes the artwork to
     black and invert(1) lifts it to white; alpha is left alone, so a
     transparent-background PNG keeps its transparency and only the mark
     repaints. Doing it here rather than per-palette is safe because the
     manifest fixes ink at #0C0C0D across all six colourways. */
  filter: brightness(0) invert(1);
}

/* --- 2. Database imagery arrives at any aspect ratio ---------
   Never let it set a box's height (pitfall #8). Each ratio below is the
   one the theme's own fixture used, so the composition is unchanged. */
.about-sec .about-block .image-box img {
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
}
.about-sec .about-block.block-tall .image-box img {
  aspect-ratio: 852 / 876;
}
.about-sec .about-block.block-wide .image-box img {
  aspect-ratio: 2 / 1;
}
.about-sec .about-block.block-square .image-box img {
  aspect-ratio: 414 / 426;
}
.service-sec .services-wrapper .service-block .sub-block-1 .image-box img {
  display: block;
  aspect-ratio: 268 / 120;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
/* The theme's service titles are two words, so the image box never had to
   defend its width. Generated titles are long, and as a flex item the box was
   being shrunk from 341px to 255px by the title beside it. */
.service-sec .services-wrapper .service-block .sub-block-1 .image-box {
  flex-shrink: 0;
}
.service-sec .services-wrapper .service-block .sub-block-1 .title-text {
  min-width: 0;
}
/* Every paragraph in the theme was the same length, so its arrows lined up by
   accident. With database copy the paragraph has to claim the free space, or
   the arrow slides left on short entries and the column of arrows breaks up. */
.service-sec .services-wrapper .service-block .sub-block-2 p {
  flex: 1 1 auto;
  min-width: 0;
}
.service-sec .services-wrapper .service-block .sub-block-2 svg {
  flex: 0 0 auto;
  width: clamp(28px, 2.292vw, 56px);
  height: clamp(28px, 2.292vw, 56px);
}
.benefit-sec .images-wrapper .benefit-image .object-image {
  display: block;
  aspect-ratio: 414 / 586;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
.testimonial-sec .testimonial-image img {
  display: block;
  aspect-ratio: 751 / 451;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
.blog-sec .blog-container {
  min-height: clamp(320px, 26vw, 700px);
}
.blog-sec .blog-container .image-block img {
  display: block;
  min-height: clamp(320px, 26vw, 700px);
}
.blog-sec .blog-list-container .image-block {
  width: clamp(96px, 8.85vw, 250px);
}
.blog-sec .blog-list-container .image-block img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
.blog-sidebar .content-block .sidebar-block .img-box img,
.sidebar .content-block .sidebar-block .img-box img {
  display: block;
  aspect-ratio: 1;
  -o-object-fit: cover;
  object-fit: cover;
}
.blog-detail-page .blog-detail-wrapper .main-image img,
.policy-page .policy-wrapper .main-image img {
  display: block;
  aspect-ratio: 1290 / 600;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
/* Inline images inside DB-authored article bodies. */
.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: clamp(8px, 0.625vw, 24px);
  margin: clamp(16px, 1.25vw, 40px) 0;
}

/* --- 3. Blog tiles equalise by flex, never by clamping -------
   A tile's title and excerpt link through to the whole article, so those
   two are the only strings on the page allowed to be shortened, and even
   then the card must not cut them off visually (pitfall #17). */
.blog-sec .blog-list-container {
  align-items: stretch;
}
.blog-sec .blog-list-container .content-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* --- 4. Hero featured post -----------------------------------
   Replaces the theme's video widget: one real article, linked. */
.hero-banner-sec .banner-right-block .hero-post {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.25vw, 48px) !important;
  padding: clamp(12px, 0.833vw, 28px);
  border-radius: clamp(14px, 0.938vw, 36px);
  border: 1px solid var(--vt-accent-edge);
  background: color-mix(in srgb, var(--vt-accent-panel) 82%, transparent);
  transition: all 0.3s ease-in-out;
  width: 100%;
}
.hero-banner-sec .banner-right-block .hero-post:hover {
  border-color: var(--vt-primary);
  transform: translateY(-4px);
}
.hero-banner-sec .banner-right-block .hero-post .image-box {
  width: clamp(72px, 6.25vw, 180px);
  flex-shrink: 0;
}
.hero-banner-sec .banner-right-block .hero-post .image-box .thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: cover;
  object-fit: cover;
  border: 1px solid var(--vt-paper);
}
.hero-banner-sec .banner-right-block .hero-post .content-box {
  min-width: 0;
}
.hero-banner-sec .banner-right-block .hero-post .content-box .post-title {
  color: var(--vt-white);
  transition: all 0.3s ease-in-out;
}
.hero-banner-sec .banner-right-block .hero-post:hover .content-box .post-title {
  color: var(--vt-primary);
}

/* --- 4b. Hero entrance --------------------------------------
   Replaces the theme's WOW.js reveal. Every animated box on this page was in
   the hero, and WOW holds its boxes at visibility:hidden until it decides to
   show them — so the site's own headline could still be invisible when the
   generator takes the thumbnail (pitfall #30). It was also choreographed to
   start after the 1.72s preloader curtain, which is gone (pitfall #29).

   The rule that makes this safe: NO animation-fill-mode and NO delay. Without
   `backwards` fill the element renders at its normal, visible state before the
   animation starts, and if animations are frozen or disabled it simply stays
   visible. The stagger comes from different durations rather than delays, so
   nothing is ever waiting in an invisible state. */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
}
@keyframes hero-left {
  from {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
  }
}
@keyframes hero-right {
  from {
    opacity: 0;
    transform: translate3d(32px, 0, 0);
  }
}
.hero-in-1 {
  animation: hero-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-in-2 {
  animation: hero-left 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-in-3 {
  animation: hero-left 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-in-4 {
  animation: hero-right 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-in-5 {
  animation: hero-right 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-in {
    animation: none;
  }
}

/* --- 5. Vision block ----------------------------------------
   Was one slide of a testimonial carousel. There is no testimonial data,
   so it is a single static about block now; the slider, the invented
   quotes and the stock avatars are gone. */
.testimonial-sec .testimonial-block {
  padding: clamp(16px, 1.667vw, 48px);
  border-radius: clamp(18px, 1.25vw, 48px);
  border: 1px solid var(--vt-accent-edge);
  background: var(--vt-accent-panel);
}

/* --- 6. The palette has to reach the page --------------------
   On a near-black ground the accent carries every bit of the difference
   between colourways, so the panels that cover the most area are mixed
   from it rather than hardcoded neutrals (pitfalls #22, #28, #36). */
/* The tile caption overlays the image; it is already absolutely positioned by
   the theme, and it paints over the scrim below because it comes later in the
   DOM. It only needs lifting above the ::after, never re-positioning. */
.blog-sec .blog-container .content-block {
  z-index: 1;
}
.blog-sec .blog-container .image-block::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: clamp(18px, 1.25vw, 48px);
  pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--vt-accent-band) 92%, transparent) 0%, color-mix(in srgb, var(--vt-accent-veil) 40%, transparent) 46%, transparent 78%);
}
.sidebar,
.blog-sidebar .content-block {
  background: var(--vt-accent-panel);
  border: 1px solid var(--vt-accent-edge);
}
.contact-wrapper .form-container {
  background: var(--vt-accent-panel);
  border: 1px solid var(--vt-accent-edge);
}
.contact-wrapper {
  background: linear-gradient(180deg, var(--vt-ink) 0%, var(--vt-accent-veil) 100%);
}
footer {
  background: linear-gradient(180deg, var(--vt-accent-veil) 0%, var(--vt-ink) 62%);
}
/* The theme styled a hand-written pull-quote block. Article bodies arrive from
   the database, so the same treatment is bound to <blockquote> instead. */
.article-body blockquote {
  margin: clamp(16px, 1.25vw, 40px) 0;
  padding: clamp(16px, 1.25vw, 32px);
  border-radius: clamp(5px, 0.521vw, 20px);
  border-left: 2px solid var(--vt-primary);
  background: var(--vt-accent-panel);
}
.article-body blockquote > :last-child {
  margin-bottom: 0;
}
.about-sec .about-block .image-box {
  background: var(--vt-accent-panel);
  position: relative;
}
/* The theme set the second tile's caption in near-black, because its fixture
   photograph was a light one. Generated photographs are any brightness, so all
   four captions are light over a scrim instead — otherwise the caption
   disappears on a dark picture. */
.about-sec .about-block .image-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: clamp(18px, 1.25vw, 48px);
  pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--vt-ink) 92%, transparent) 0%, color-mix(in srgb, var(--vt-ink) 46%, transparent) 38%, transparent 70%);
}
.about-sec .about-block .content-box {
  z-index: 1;
}
.about-sec .about-block .content-box h5 {
  color: var(--vt-white);
}
.about-sec .about-block:hover .content-box h5 {
  color: var(--vt-primary);
}

/* --- 7. Detail-page sidebar chrome --------------------------- */
.blog-sidebar form {
  position: relative;
}

/* In-this-article list. Built from the article's own <h2>s, so it is
   empty when the body has none — hidden rather than showing a bare box. */
.toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.toc-list li + li {
  margin-top: clamp(10px, 0.625vw, 24px);
}
.toc-list a {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 0.521vw, 18px);
  color: var(--vt-paper);
  transition: all 0.3s ease-in-out;
}
.toc-list a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  flex-shrink: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--vt-muted);
  transition: all 0.3s ease-in-out;
}
.toc-list a:hover,
.toc-list a.active {
  color: var(--vt-primary);
}
.toc-list a:hover::before,
.toc-list a.active::before {
  color: var(--vt-primary);
}
.toc-block:has(.toc-list:empty) {
  display: none;
}

/* --- 8. Title banner sizing ---------------------------------
   The theme's fixture heading was two words at 6.25vw. Article titles are
   not, and the heading may not be truncated, so the builder tags the
   banner by title length instead. Short titles keep the original size. */
.title-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: auto;
  min-height: calc(clamp(140px, 15.26vw, 580px) + clamp(64px, 5.573vw, 220px));
  padding-bottom: clamp(24px, 2.5vw, 72px);
}
.title-banner .container-fluid {
  min-width: 0;
}
.title-banner h1 {
  overflow-wrap: break-word;
  text-wrap: balance;
  /* The theme centred its two-word fixture heading via `justify-content` on the
     grid, which only centres while the text is narrower than the column. A
     wrapped article title filled the column and silently went left-aligned, so
     the two page types stopped matching. */
  text-align: center;
}
/* The steps stay close to the theme's own 6.25vw so the banner still reads as
   the original's; only a genuinely long title drops a size. */
.title-banner.title-size-2 h1 {
  font-size: clamp(38px, 4.6vw, 118px);
  letter-spacing: -2.4px;
  background-size: 100% 1.3em;
}
.title-banner.title-size-3 h1 {
  font-size: clamp(30px, 3.4vw, 86px);
  letter-spacing: -1.6px;
  background-size: 100% 1.3em;
}

/* The theme's banner was a photograph. Ours is a site image behind the flattened
   texture, tinted with the accent — photographic depth like the original,
   without a gym interior baked into every generated site. */
.title-banner .banner-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0.62;
}
.title-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--vt-ink) 68%, transparent) 0%, color-mix(in srgb, var(--vt-accent-veil) 42%, transparent) 52%, color-mix(in srgb, var(--vt-ink) 72%, transparent) 100%);
}

/* --- 9. Article and policy body -----------------------------
   Both page types wrap their DB-authored copy in .article-body. The theme's
   heading sizes are tuned for section titles, which is far too large inside a
   running article, so the body gets its own scale and vertical rhythm. */
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  color: var(--vt-white);
  scroll-margin-top: clamp(80px, 7vw, 180px);
}
.article-body h2 {
  font-size: clamp(23px, 1.75vw, 44px);
  line-height: 130%;
  letter-spacing: normal;
  margin: clamp(28px, 2.08vw, 64px) 0 clamp(10px, 0.73vw, 22px);
}
.article-body h3 {
  font-size: clamp(20px, 1.46vw, 36px);
  line-height: 135%;
  margin: clamp(24px, 1.77vw, 54px) 0 clamp(10px, 0.63vw, 20px);
}
.article-body h4,
.article-body h5,
.article-body h6 {
  font-size: clamp(18px, 1.25vw, 30px);
  line-height: 140%;
  margin: clamp(20px, 1.46vw, 44px) 0 clamp(8px, 0.52vw, 18px);
}
.article-body p,
.article-body li {
  color: var(--vt-paper);
}
.article-body p {
  margin-bottom: clamp(14px, 1.04vw, 30px);
}
.article-body ul,
.article-body ol {
  padding-left: clamp(18px, 1.25vw, 40px);
  margin-bottom: clamp(16px, 1.25vw, 40px);
}
.article-body li {
  margin-bottom: clamp(6px, 0.42vw, 14px);
}
.article-body li::marker {
  color: var(--vt-primary);
}
.article-body a {
  color: var(--vt-primary);
  text-decoration: underline;
}
.article-body > :first-child {
  margin-top: 0;
}
.article-body > :last-child {
  margin-bottom: 0;
}
/* Article tables can be wider than the column; they scroll inside their own
   wrapper instead of pushing the page wider (pitfall #5). */
.article-body .table-scroll {
  width: 100%;
  overflow-x: auto;
  margin-bottom: clamp(16px, 1.25vw, 40px);
}
.article-body table {
  min-width: 0;
  color: var(--vt-paper);
}
.article-body table th,
.article-body table td {
  padding: clamp(8px, 0.63vw, 20px) clamp(10px, 0.83vw, 26px);
  border: 1px solid var(--vt-border);
}
.article-body table th {
  color: var(--vt-white);
  text-align: left;
}

/* --- 10. Footer contact rows -------------------------------
   The theme's rows were address / phone / opening hours, drawn with three PNG
   glyphs. The data budget carries address, email and the policy links, so the
   third row changed and the artwork had to change with it — a clock beside
   "Email" and a phone beside "Policies" was simply the wrong picture. */
footer .footer-info-block li .icon-box svg {
  width: clamp(24px, 2.083vw, 64px);
  height: clamp(24px, 2.083vw, 64px);
  display: block;
}
footer .footer-info-block li {
  align-items: flex-start;
}

/* --- 10. Footer policy links -------------------------------- */
footer .policy-links li a {
  color: var(--vt-muted);
  transition: all 0.3s ease-in-out;
}
footer .policy-links li a:hover {
  color: var(--vt-primary);
}

/* --- 10b. Inline icons -------------------------------------
   The theme pulled four glyphs from a Font Awesome Pro drop that weighed
   ~15 MB in stylesheet plus webfonts — and copyStaticAssets ships whatever is
   left in the folder (pitfall #13). They are inline SVG now, sized in em and
   painted with currentColor so every rule the theme wrote for the <i> element
   (its colour, its font-size, the round chip in the mobile drawer) still
   applies unchanged. */
.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
}
.ui-icon svg {
  width: 1em;
  height: 1em;
  display: block;
  flex-shrink: 0;
}
.mobile-nav__contact li .ui-icon svg {
  width: 0.9em;
  height: 0.9em;
}

/* --- 11. Form status messages ------------------------------- */
.alert-msg {
  margin-top: clamp(8px, 0.625vw, 20px);
  margin-bottom: 0;
  color: var(--vt-primary);
  min-height: 1px;
}
.alert-msg:empty {
  display: none;
}
.newsletter-form .alert-msg {
  color: var(--vt-primary);
}

/* --- 12. Empty-slot guards ---------------------------------
   Section headings and eyebrows collapse rather than leaving a gap when a
   payload does not carry the field behind them. */
.heading .eyebrow:empty,
.heading h1:empty,
.heading h2:empty,
.heading h3:empty,
.heading h4:empty,
.heading p:empty,
.testimonial-block h4:empty,
.testimonial-block p:empty,
.banner-left-block h4:empty,
.banner-left-block h1:empty,
.banner-right-block > p:empty {
  display: none;
}
.about-sec .about-block .content-box h2:empty,
.about-sec .about-block .content-box h5:empty,
.about-sec .about-block .content-box p:empty {
  display: none;
}

/* --- 13. No horizontal overflow at any width ---------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
.row {
  --bs-gutter-x: 1.5rem;
}
.services-wrapper,
.footer-wrapper,
.newsletter-container {
  min-width: 0;
}

.brand-text { display: none !important; }

.comp_details { display: none !important; }