@charset "UTF-8";
/* ============================================================================
   Vertex Kitchens — single common stylesheet
   ----------------------------------------------------------------------------
   Rebuilt from values measured on the live source (Elementor global/post CSS
   plus screenshots), not copied from the source's framework bundles. The
   source shipped ~717 KB of Elementor + Astra + Font Awesome CSS per page;
   none of it is used here.

   Contents
     1. Design tokens
     2. Fonts
     3. Reset
     4. Base
     5. Layout
     6. Topbar
     7. Header and navigation
     8. Hero
     9. Sections and components
    10. Footer call-to-action
    11. Forms
    12. Utilities
   ========================================================================= */

/* 1. Design tokens -------------------------------------------------------- */
:root {
  /* Colour — sampled from a real screenshot and the source's own rules */
  --c-topbar: #ec8641;         /* top strip background */
  --c-accent: #f23e03;         /* CALL pill / primary action */
  --c-brand: #ec8641;          /* nav hover, brand accent */
  --c-gold: #c4b583;           /* footer rule, hover tint */
  --c-ink: #252930;            /* display headings */
  --c-ink-alt: #001c31;        /* secondary display headings */
  --c-heading: rgba(0, 0, 0, .8);
  --c-body: #7a7a7a;           /* body copy */
  --c-strong: #54595f;         /* card titles */
  --c-quote: #727982;          /* testimonial text */
  --c-name: #16202f;           /* testimonial name */
  --c-nav: #303030;            /* nav links */
  --c-cream: #c7bca4;
  --c-white: #fff;
  --c-surface: #fff;
  --c-surface-alt: #f9f9f9;
  --c-surface-tint: #f5f7fa;
  --c-footer: #4b4b4b;
  --c-footer-text: #c9c9c9;
  --c-rule: #8e8e8e;           /* dotted rule around the nav */
  --c-hairline: #e5e5e5;
  --c-whatsapp: #25d366;
  --c-whatsapp-hover: #128c7e;
  --c-error: #c0392b;
  --c-success: #1e7a45;

  /* Type — the source loads Roboto, Roboto Slab, Prata and Karla */
  --f-display: "Roboto Slab", "Rockwell", Georgia, serif;
  --f-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-brand: "Prata", Georgia, serif;
  --f-label: "Karla", system-ui, Arial, sans-serif;
  --f-alt: "Proza Libre", "Roboto", system-ui, sans-serif;
  --f-alt-heading: "Josefin Sans", "Roboto", system-ui, sans-serif;
  --f-alt-body: "Raleway", "Roboto", system-ui, sans-serif;
  --f-contact: "Vidaloka", "Prata", Georgia, serif;

  --step--1: 15px;
  --step-0: 16px;
  --step-1: 18px;
  --step-2: clamp(2rem, 4.5vw, 2.9rem);
  --step-3: clamp(2.25rem, 5vw, 3rem);
  --step-4: clamp(2.5rem, 6vw, 4.5rem);
  --hero-title: clamp(2rem, 3.5vw, 3.5rem);

  /* Space */
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  --wrap: 1200px;
  --gutter: 20px;

  --radius-pill: 100px;
  --shadow-card: -6px 8px 0 0 rgba(216, 218, 220, .26);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .12);
}

/* 2. Fonts — self-hosted, no runtime Google Fonts request ---------------- */
/* Roboto and Roboto Slab are variable fonts. Google's own CSS serves the same
   woff2 URL for every requested weight of each family, so one @font-face with a
   weight range replaces four — verified against the Google Fonts CSS API, and
   the weight-specific files it produced were byte-identical duplicates.
   Nothing below is fetched at runtime; every face is self-hosted. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/roboto-400.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/roboto-slab-400.woff2") format("woff2");
}
@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/prata-400.woff2") format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/karla-700.woff2") format("woff2");
}

/* The two Elementor service pages and the contact page were built on different
   Elementor templates by different hands, and each pulled its own display face
   from Google Fonts. Keeping them means the pages still look like the source;
   only the weights actually used are shipped, latin subset. */
@font-face {
  font-family: "Proza Libre";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/proza-libre-400.woff2") format("woff2");
}
@font-face {
  font-family: "Proza Libre";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/proza-libre-600.woff2") format("woff2");
}
/* Josefin Sans is a variable font (wght 100-700); one file covers 400 and 600. */
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/assets/fonts/josefin-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/raleway-500.woff2") format("woff2");
}
@font-face {
  font-family: "Vidaloka";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/vidaloka-400.woff2") format("woff2");
}

/* 3. Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}
ul, ol { padding: 0; }
img, svg, iframe, video { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

/* 4. Base ---------------------------------------------------------------- */
body {
  font-family: var(--f-body);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-body);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-ink);
}
a { color: inherit; }
a:hover { color: var(--c-brand); }
p + p { margin-top: 1em; }
strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

/* 5. Layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 1000px; }
.wrap--tight { max-width: 620px; }

.section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section--intro { padding-block: clamp(3rem, 6vw, 5rem); }
.section--alt { background: var(--c-surface-alt); }
.section--tint { background: var(--c-surface-tint); }
.section--flush { padding-block: 0; }

/* Section heading sizes measured from the source */
.section__title {
  font-family: var(--f-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
  color: var(--c-ink);
  margin-bottom: var(--space-md);
}
.section__title--sans {
  font-family: var(--f-body);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.1666;
  color: var(--c-heading);
}
.section__lede {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.9;
  max-width: 62ch;
  margin-inline: auto;
}
.section--alt .section__lede,
.section--tint .section__lede { color: var(--c-body); }
.section__head { text-align: center; margin-bottom: var(--space-lg); }

.grid { display: grid; gap: var(--space-md); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }

/* 6. Topbar -------------------------------------------------------------- */
.topbar {
  background: var(--c-topbar);
  color: var(--c-white);
  font-size: var(--step--1);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 36px;
}
.topbar__list,
.topbar__social {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
}
.topbar__social { gap: 18px; }
.topbar__item {
  display: inline-flex;
  align-items: center;
  color: var(--c-white);
  text-decoration: none;
}
a.topbar__item:hover { color: var(--c-white); text-decoration: underline; }
.topbar__icon { display: inline-flex; }
.topbar__text { padding-left: 11px; }
.topbar__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  text-decoration: none;
  padding: .35em;
}
.topbar__social-link:hover { color: var(--c-white); opacity: .8; }

@media (max-width: 767px) {
  .topbar__inner { justify-content: center; text-align: center; }
  .topbar__list { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .topbar { font-size: 13px; }
}

/* 7. Header and navigation ----------------------------------------------- */
.site-header__brand {
  text-align: center;
  padding-block: 10px;
}
.site-header__logo { display: inline-block; }
.site-header__logo img { width: 242px; }
.site-header__name {
  font-family: var(--f-display);
  font-size: 2rem;
  color: var(--c-ink);
}

.site-header__navbar { border-block: 1px dotted var(--c-rule); }
.site-header__navinner { display: flex; justify-content: center; }

.nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
}
.nav__item { position: relative; }
.nav__item > a,
.nav__disclosure {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: 16px 41px;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--c-nav);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.nav__item > a:hover,
.nav__disclosure:hover { color: var(--c-brand); }
.nav__item > a[aria-current="page"] { color: var(--c-brand); font-weight: 500; }
.nav__caret { display: inline-flex; transition: transform .2s ease; }
.nav__item--has-children[data-open="true"] .nav__caret { transform: rotate(180deg); }

.nav__submenu {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  min-width: 230px;
  list-style: none;
  margin: 0;
  padding: .35rem 0;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  box-shadow: var(--shadow-pop);
  display: none;
}
.nav__item--has-children:hover .nav__submenu,
.nav__item--has-children:focus-within .nav__submenu,
.nav__item--has-children[data-open="true"] .nav__submenu { display: block; }
.nav__submenu a {
  display: block;
  padding: 10px 22px;
  font-size: var(--step--1);
  color: var(--c-nav);
  text-decoration: none;
}
.nav__submenu a:hover { background: var(--c-surface-alt); color: var(--c-brand); }
.nav__submenu a[aria-current="page"] { color: var(--c-brand); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  background: var(--c-nav);
  margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 1024px) {
  .site-header__brand { padding-block: 30px; }
  .site-header__navinner { flex-direction: column; align-items: stretch; }
  .nav-toggle { display: block; margin-inline: auto; }
  .nav { display: none; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; padding-block: .5rem; }
  .nav__item > a,
  .nav__disclosure { padding: 14px 10px; width: 100%; justify-content: space-between; }
  .nav__submenu {
    position: static;
    translate: none;
    display: none;
    border: 0;
    box-shadow: none;
    background: var(--c-surface-alt);
    padding-left: 1rem;
  }
  .nav__item--has-children:hover .nav__submenu,
  .nav__item--has-children:focus-within .nav__submenu { display: none; }
  .nav__item--has-children[data-open="true"] .nav__submenu { display: block; }
}
@media (max-width: 767px) {
  .site-header__logo img { width: 160px; }
  .site-header__brand { padding-block: 10px; }
}

/* 8. Hero ---------------------------------------------------------------- */
/* Hero. The source is a two-slide Swiper whose slides are 65vh tall on desktop
   (40vh tablet, 35vh phone). Rebuilt as one static full-bleed image with the
   same proportions and a pixel floor so it never collapses on a short window;
   the slider itself is dropped, since the design does not need it. */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: max(380px, 65vh);
  background-color: #1a1411;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  overflow: hidden;
}
/* No dark overlay: the source slider has no background overlay, so the image
   is shown as-is over the slide's flat background colour. */
.hero__bg {
  position: absolute;
  inset: 0;
  display: block;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__inner { position: relative; z-index: 1; padding-block: var(--space-xl); }
.hero__title {
  font-family: var(--f-display);
  font-size: var(--hero-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--space-sm);
}
.hero__lede {
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.6vw, 23px);
  font-weight: 400;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .88);
  margin-bottom: var(--space-md);
}
.hero--plain { min-height: 0; background: var(--c-surface-alt); text-align: left; }
.hero--plain .hero__title { color: var(--c-ink); }

@media (max-width: 1024px) {
  .hero { min-height: max(320px, 40vh); }
}
@media (max-width: 767px) {
  .hero { min-height: max(280px, 35vh); }
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--f-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85em 1.8em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
  border-radius: var(--radius-pill);
}
.btn--primary:hover { background: #d13603; border-color: #d13603; color: var(--c-white); }
.btn--ghost {
  background: transparent;
  border-color: var(--c-accent);
  color: var(--c-accent);
  border-radius: var(--radius-pill);
}
.btn--ghost:hover { background: var(--c-accent); color: var(--c-white); }

/* 9. Sections and components --------------------------------------------- */
/* Intro: heading + standfirst left, body copy right */
.intro__title {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  margin-bottom: var(--space-sm);
}
.intro__standfirst { font-size: var(--step-1); }
.intro__body {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.9;
}
.intro__body p + p { margin-top: 1.2em; }

/* Service cards */
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.card__media { display: block; overflow: hidden; }
.card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 341 / 506;
  object-fit: cover;
  transition: transform .4s ease;
}
.card:hover .card__media img { transform: scale(1.04); }
.card__title {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-strong);
}
.card:hover .card__title { color: var(--c-brand); }
.card__text {
  display: block;
  margin-top: .5rem;
  font-size: var(--step--1);
  color: var(--c-body);
}

/* Feature icons ("Vertex Means") */
.feature { text-align: center; }
.feature__icon img { width: 120px; height: auto; }
.feature__title {
  font-family: var(--f-body);
  font-size: 20px;
  font-weight: 400;
  color: var(--c-strong);
  margin-top: var(--space-sm);
}

/* Testimonials */
.quote {
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  padding: 40px 40px 35px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.quote__text {
  font-size: var(--step--1);
  line-height: 26px;
  color: var(--c-quote);
  flex: 1 1 auto;
}
.quote__name {
  font-family: var(--f-brand);
  font-size: 20px;
  line-height: 26px;
  color: var(--c-name);
  margin-top: var(--space-sm);
}

/* Simple content pages (classic WordPress pages) */
.prose { max-width: 78ch; }
.prose h2 { font-family: var(--f-display); font-size: var(--step-2); margin-block: 1.6em .6em; }
.prose h3 { font-family: var(--f-body); font-size: 1.35rem; font-weight: 500; color: var(--c-strong); margin-block: 1.4em .5em; }
.prose p { margin-bottom: 1em; }
.prose a { color: var(--c-accent); text-decoration: underline; }
.prose a:hover { color: var(--c-brand); }
.prose ul, .prose ol { margin: 0 0 1em 1.3em; }
.prose li { margin-bottom: .4em; }
.prose img { margin-block: 1.2em; }

/* Classic Astra page shell, measured on the source:
   page background #f5f5f5 with a 1200px centred white card inset by ~64px top
   and ~60px bottom; card padding 5.34em 6.67em (3.34em 2.4em tablet,
   1.5em 2.14em phone); title 40px/400; body copy #808285, not the Elementor
   pages' #7a7a7a. The card is drawn on the existing .wrap element, so the page
   markup stays a flat heading + content with no extra nesting. */
.classic-page {
  background: #f5f5f5;
  padding: clamp(2rem, 4.5vw, 64px) 0 clamp(2rem, 4vw, 60px);
  color: #808285;
}
.classic-page > .wrap {
  background: var(--c-surface);
  max-width: 1200px;
  padding: clamp(1.5rem, 5vw, 5.34rem) clamp(1rem, 7vw, 6.67rem);
  margin-inline: auto;
}
.classic-page__title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: #808285;
  margin-bottom: .2em;
}
.classic-page__body { margin-top: var(--space-md); max-width: none; }
.classic-page__body p { margin-bottom: 1em; }
.classic-page__body h2, .classic-page__body h3 { color: #808285; }
.classic-page__body a { color: var(--c-accent); text-decoration: underline; }

@media (max-width: 1024px) {
  .classic-page > .wrap { padding: 3.34em 2.4em; }
}
@media (max-width: 767px) {
  .classic-page > .wrap { padding: 1.5em 1.1em; }
}

/* Galleries */
.gallery { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gallery a { display: block; overflow: hidden; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.gallery a:hover img { transform: scale(1.04); }

/* WordPress-style captioned gallery (finish swatches and captioned projects) */
.gallery--captioned { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery--captioned figure { margin: 0; text-align: center; }
.gallery--captioned img { aspect-ratio: 300 / 125; }
.gallery--captioned figcaption {
  font-size: 14px;
  color: var(--c-body);
  margin-top: .6rem;
}
/* The lightbox viewer needs a zoom cursor to read as "opens a viewer". */
.gallery__item { cursor: zoom-in; }

/* Lightbox viewer for Elementor-style galleries.
   Native <dialog>, so Escape, focus containment and the backdrop are the
   browser's job, not hand-written JavaScript's. */
.lightbox {
  width: min(1100px, 94vw);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: #111;
  color: #fff;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .82); }
.lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.lightbox__bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
}
.lightbox__count { font-size: 14px; color: rgba(255, 255, 255, .75); margin: 0; }
.lightbox__close {
  font: inherit;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  padding: .35em .9em;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .22); }
.lightbox__stage {
  margin: 0;
  grid-column: 2;
  display: grid;
  place-items: center;
  padding: 0 0 .9rem;
  min-height: 0;
  /* Keeps the viewer from collapsing to an empty sliver while the image loads. */
  min-width: min(70vw, 720px);
  min-height: min(50vh, 380px);
}
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__caption {
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
  text-align: center;
  margin-top: .7rem;
}
.lightbox__nav {
  font: inherit;
  font-size: 2.4rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  width: 2.6rem;
  height: 3.4rem;
  cursor: pointer;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.lightbox__nav--prev { grid-column: 1; margin-left: .6rem; }
.lightbox__nav--next { grid-column: 3; margin-right: .6rem; }
.lightbox__nav[disabled] { opacity: .3; cursor: default; }

@media (max-width: 600px) {
  .lightbox[open] { grid-template-columns: 1fr; }
  .lightbox__stage { grid-column: 1; }
  .lightbox__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 2.2rem;
    height: 3rem;
  }
  .lightbox__nav--prev { left: .3rem; margin-left: 0; }
  .lightbox__nav--next { right: .3rem; margin-right: 0; }
  .lightbox__img { max-height: 70vh; }
}

/* Banner used by the two Elementor service pages and the contact page */
.banner {
  position: relative;
  background-color: #000;
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--c-white);
  padding-block: 20px;
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .4);
}
.banner__inner {
  position: relative;
  z-index: 1;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.banner__eyebrow {
  font-family: var(--f-alt);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.banner__rule { display: block; height: 1px; background: var(--c-white); margin-block: 15px; }
.banner__title {
  font-family: var(--f-alt);
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-white);
}
.banner__lede {
  font-family: var(--f-alt);
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 1px;
  margin-top: var(--space-sm);
  max-width: 50%;
}
.banner__cta {
  align-self: flex-start;
  margin-top: var(--space-md);
  padding: .7em 0;
  font-family: var(--f-alt);
  font-size: .9rem;
  line-height: 1.8;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-white);
  border-top: 1px solid var(--c-white);
}
.banner__cta:hover { color: var(--c-white); opacity: .8; }

/* Service-page headings use their own faces (measured on the source) */
.alt-title {
  font-family: var(--f-alt-heading);
  font-size: clamp(1.9rem, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -2.5px;
  text-transform: capitalize;
  color: var(--c-strong);
  text-align: center;
  margin-bottom: var(--space-md);
}
.alt-lede {
  font-family: var(--f-alt-body);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--c-body);
  max-width: 78ch;
  margin-inline: auto;
}
.alt-heading {
  font-family: var(--f-alt);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--c-body);
}

/* Orange uppercase tag list (finish names) */
.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.8rem;
  list-style: none;
  margin: var(--space-md) 0 0;
}
.taglist li {
  font-size: .8em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #f36d21;
}

@media (max-width: 767px) {
  .banner__lede { max-width: 100%; }
  .banner__inner { min-height: 320px; }
}

/* Breadcrumbs */
.crumbs { font-size: var(--step--1); padding-block: var(--space-sm); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; margin: 0; }
.crumbs li::after { content: "/"; margin-left: .5em; color: var(--c-hairline); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { text-decoration: none; }
.crumbs [aria-current="page"] { color: var(--c-strong); }

/* Contact details block */
.contact-list { list-style: none; margin: 0; }
.contact-list li { margin-bottom: 1rem; display: flex; gap: .75rem; align-items: flex-start; }
.contact-list svg { flex: 0 0 auto; margin-top: .25rem; color: var(--c-accent); }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* 10. Footer call-to-action ---------------------------------------------- */
.cta {
  background: var(--c-footer);
  color: var(--c-footer-text);
  padding-block: clamp(3rem, 8vw, 100px);
}
.cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
.cta__title {
  font-family: var(--f-display);
  font-size: var(--hero-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-white);
}
.cta__rule { display: block; width: 67px; height: 2px; background: var(--c-gold); margin: 15px 0; }
.cta__phone {
  font-family: var(--f-display);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.cta__phone a { text-decoration: none; color: inherit; }
.cta__phone a:hover { color: var(--c-white); }
.cta__text { font-size: var(--step--1); font-weight: 300; line-height: 1.6; margin-top: var(--space-sm); }
.cta__text p { margin-bottom: .5em; }
.cta__social { display: flex; gap: 1.2rem; list-style: none; margin-top: var(--space-md); }
.cta__social a { display: inline-flex; color: rgba(255, 255, 255, .92); }
.cta__social a:hover { color: var(--c-white); }

.cta__map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  background: #5c5c5c;
}
.cta__mapfallback {
  font-size: 13px;
  color: var(--c-footer-text);
  margin-top: .6rem;
}
.cta__mapfallback a { color: var(--c-gold); }

.site-footer__bar {
  background: #3a3a3a;
  color: var(--c-footer-text);
  font-size: 14px;
  padding-block: 1.1rem;
  text-align: center;
}

.whatsapp-fab {
  position: fixed;
  z-index: 60;
  right: 8px;
  bottom: 8px;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-whatsapp);
  color: var(--c-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: background-color .25s ease;
}
.whatsapp-fab:hover { background: var(--c-whatsapp-hover); color: var(--c-white); }

@media (max-width: 900px) {
  .cta__inner { grid-template-columns: 1fr; }
  .cta__map iframe { height: 260px; }
}

/* 11. Forms -------------------------------------------------------------- */
.form { max-width: 620px; }
.form__row { margin-bottom: 1.1rem; }
.form__row--half { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form label {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--c-strong);
  margin-bottom: .35rem;
}
.form .req { color: var(--c-accent); }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  padding: .75rem .9rem;
  font-size: var(--step-0);
  color: var(--c-strong);
  background: var(--c-surface);
  border: 1px solid #d5d8dc;
  border-radius: 3px;
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus,
.form textarea:focus { border-color: var(--c-brand); }
.form__error {
  display: block;
  font-size: 14px;
  color: var(--c-error);
  margin-top: .3rem;
}
.form__field--invalid input,
.form__field--invalid textarea { border-color: var(--c-error); }
.form__consent { display: flex; gap: .6rem; align-items: flex-start; font-size: 14px; }
.form__consent input { margin-top: .3rem; }
.form__consent label { font-weight: 400; margin: 0; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.form__status {
  padding: .85rem 1rem;
  border-left: 4px solid var(--c-success);
  background: #f2f9f4;
  color: var(--c-success);
  margin-bottom: 1.2rem;
}
.form__status--error { border-left-color: var(--c-error); background: #fdf3f2; color: var(--c-error); }
.form__fallback { font-size: var(--step--1); margin-top: 1.2rem; }

@media (max-width: 600px) {
  .form__row--half { grid-template-columns: 1fr; }
}

/* Contact page — measured from the source (Elementor template 8).
   The white card sits INSIDE the banner section, so the background image runs
   behind it: banner padding 300px 0 150px with the image at top center, and a
   1140px-wide white card with 130px padding on top of it. */
.contact-banner {
  background-color: #e3ecef;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: auto;
  padding: 300px 0 150px;
}
.contact-card {
  background: var(--c-surface);
  max-width: 1140px;
  margin-inline: auto;
  padding: clamp(2rem, 9vw, 130px);
}
.contact-eyebrow {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #60626b;
  text-align: center;
}
.contact-rule {
  display: block;
  width: 35%;
  height: 1px;
  margin: 2px auto;
  background: #5cb1cd;
}
.contact-title {
  font-family: var(--f-contact);
  font-size: 40px;
  font-weight: 400;
  text-transform: uppercase;
  color: #000;
  text-align: center;
  padding-top: 15px;
}
.contact-info-title {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-strong);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.form--contact { max-width: 100%; margin-top: var(--space-lg); }
.form--contact .form__row--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 38px;
}
.form--contact .form__row { margin-bottom: 26px; }
.form--contact label {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-strong);
}
.form--contact input[type="text"],
.form--contact input[type="email"],
.form--contact input[type="tel"],
.form--contact textarea {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 1.7;
  color: #919ca7;
  background: var(--c-surface);
  border: 0;
  border-bottom: 1px solid #d5d8dc;
  border-radius: 0;
  padding: .6rem 0;
}
.form--contact textarea { border: 1px solid #d5d8dc; padding: .7rem .8rem; }
.form--contact input:focus,
.form--contact textarea:focus { border-color: #5cb1cd; }
.form--contact .btn--primary {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4.1px;
  line-height: 1.9;
  text-transform: uppercase;
  background: var(--c-surface);
  color: #000;
  border: 2px solid #000;
  border-radius: 0;
  padding: .8em 1.6em;
}
.form--contact .btn--primary:hover { background: #000; color: #fff; border-color: #000; }
.form--contact .form__actions { justify-content: center; }

@media (max-width: 767px) {
  .contact-banner { padding: 140px 0 70px; background-size: cover; }
  .form--contact .form__row--3 { grid-template-columns: 1fr; gap: 0; }
}

/* 12. Utilities ---------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  color: var(--c-ink);
  padding: .75rem 1rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }
.text-center { text-align: center; }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Responsive collapse of the main grids */
@media (max-width: 1024px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (max-width: 767px) {
  .grid--3, .grid--5, .grid--2 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card:hover .card__media img,
  .gallery a:hover img { transform: none; }
}

@media print {
  .topbar, .site-header__navbar, .whatsapp-fab, .cta__map { display: none; }
}