:root {
--bg: #0d0806;
--bg-dark: #070402;
--bg-light: #17100c;
--groove: #050302;
--slope: #140c08;
--crest: #241710;
--highlight: #3a251b;
--card: rgba(22, 14, 10, 0.94);
--input: rgba(10, 6, 4, 0.92);
--brass: #c9a86a;
--brass-light: #e2c485;
--brass-soft: rgba(201, 168, 106, 0.18);
--text: #f9f6f0;
--muted: #c8bcac;
--border: rgba(201, 168, 106, 0.3);
--border-soft: rgba(249, 246, 240, 0.12);
--error: #ff6b5b;
--serif: "Playfair Display", Georgia, serif;
--sans: "Plus Jakarta Sans", sans-serif;
--container: 1400px;
--pad: clamp(1.15rem, 3.5vw, 3rem);
--header: 5.25rem;
--mobile-bar: 4.25rem;
--radius: 16px;
--radius-small: 7px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
scroll-behavior: smooth;
scroll-padding-top: var(--header);
background: var(--bg);
color: var(--text);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
}

body {
min-height: 100vh;
overflow-x: hidden;
padding-bottom: calc(var(--mobile-bar) + env(safe-area-inset-bottom, 0px));
background: var(--bg);
color: var(--text);
}

body.scroll-locked,
body.menu-open {
overflow: hidden;
}

a {
color: inherit;
text-decoration: none;
}

button,
input,
select,
textarea {
font: inherit;
color: inherit;
}

button {
border: 0;
background: none;
cursor: pointer;
}

ul {
list-style: none;
}

img {
display: block;
max-width: 100%;
}

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

.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--pad);
}

.section-eyebrow {
margin-bottom: 1rem;
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: var(--brass-light);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}

.section-eyebrow::before,
.section-eyebrow::after {
content: "";
width: 32px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--brass));
}

.section-eyebrow::after {
transform: scaleX(-1);
}

.section-title {
color: var(--text);
font-family: var(--serif);
font-size: clamp(2.1rem, 4.5vw, 4rem);
font-weight: 600;
line-height: 1.08;
}

.section-title span {
color: var(--brass);
font-style: italic;
}

.primary-button,
.outline-button {
min-height: 50px;
padding: 0 1.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
border: 1px solid var(--brass);
border-radius: var(--radius-small);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
transition:
transform 0.3s ease,
background 0.3s ease,
color 0.3s ease,
box-shadow 0.3s ease;
}

.primary-button {
background: var(--brass);
color: #0d0806;
}

.primary-button:hover {
background: var(--brass-light);
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(201, 168, 106, 0.25);
}

.outline-button {
background: transparent;
color: var(--brass-light);
}

.outline-button:hover {
background: rgba(201, 168, 106, 0.1);
transform: translateY(-3px);
}

/* Header */

.site-header {
position: fixed;
inset: 0 0 auto;
z-index: 100;
width: 100%;
height: var(--header);
border-bottom: 1px solid var(--border-soft);
background: rgba(13, 8, 6, 0.82);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition:
background 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}

.site-header.is-scrolled {
border-bottom-color: var(--border);
background: rgba(10, 6, 4, 0.96);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7);
}

.nav-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}

.brand-logo {
  position: relative;
  z-index: 110;
  display: flex;
  align-items: center;
}

.brand-logo__img {
  width: auto;
  max-width: 260px;
  height: auto;
  max-height: 56px;
  display: block;
  object-fit: contain;
}

.footer-brand__logo-link {
  display: inline-block;
  margin-bottom: 1rem;
}

.footer-brand__img {
  width: auto;
  max-width: 260px;
  height: auto;
  max-height: 56px;
  display: block;
  object-fit: contain;
}

@media (max-width: 768px) {
  .brand-logo__img {
    max-width: 190px;
    max-height: 48px;
  }

  .footer-brand__img {
    max-width: 240px;
    max-height: 52px;
  }
}

.nav-links {
display: none;
align-items: center;
gap: clamp(0.75rem, 1.25vw, 1.6rem);
}

.nav-link {
position: relative;
padding-block: 0.35rem;
color: rgba(249, 246, 240, 0.86);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.02em;
transition: color 0.3s ease;
}

.nav-link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5px;
background: var(--brass);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s var(--ease);
}

.nav-link:hover,
.nav-link.is-active {
color: var(--brass-light);
}

.nav-link:hover::after,
.nav-link.is-active::after {
transform: scaleX(1);
transform-origin: left;
}

.nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}

.nav-cta {
display: none;
min-height: 44px;
padding: 0 1.25rem;
align-items: center;
justify-content: center;
border: 1px solid var(--brass);
border-radius: var(--radius-small);
background: var(--brass);
color: #0d0806;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
transition: background 0.3s ease, transform 0.2s ease;
}

.nav-cta:hover {
background: var(--brass-light);
transform: translateY(-2px);
}

.menu-toggle {
position: relative;
z-index: 110;
width: 48px;
height: 48px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border: 1px solid var(--border);
border-radius: var(--radius-small);
background: rgba(22, 14, 10, 0.85);
transition: border-color 0.25s ease, background 0.25s ease;
}

.menu-toggle:hover {
border-color: var(--brass);
}

.menu-toggle__bar {
width: 20px;
height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform 0.35s var(--ease), opacity 0.25s ease, background-color 0.3s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar {
background: var(--brass-light);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu */

.mobile-menu {
position: fixed;
inset: 0;
z-index: 95;
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-top: calc(var(--header) + env(safe-area-inset-top, 0px) + 0.75rem);
padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
padding-inline: var(--pad);
background-color: var(--bg);
background-image:
radial-gradient(circle at 85% 15%, rgba(201, 168, 106, 0.16), transparent 55%),
radial-gradient(circle at 15% 85%, rgba(168, 112, 68, 0.12), transparent 50%),
repeating-linear-gradient(
90deg,
var(--groove) 0,
var(--groove) 2px,
var(--slope) 2.5px,
var(--crest) 6px,
var(--highlight) 7px,
var(--crest) 8.5px,
var(--slope) 12px,
var(--groove) 14px
);
clip-path: circle(0% at calc(100% - clamp(1.5rem, 4vw, 3rem)) calc(var(--header) / 2));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
clip-path 0.5s var(--ease),
opacity 0.35s ease,
visibility 0.35s ease;
}

.mobile-menu.is-open {
clip-path: circle(160% at calc(100% - clamp(1.5rem, 4vw, 3rem)) calc(var(--header) / 2));
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.mobile-menu__inner {
width: 100%;
max-width: 580px;
margin: 0 auto;
display: flex;
flex-direction: column;
}

.mobile-menu__list {
display: flex;
flex-direction: column;
gap: 0.35rem;
}

.mobile-menu__list li {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.35s ease, transform 0.4s var(--ease);
}

.mobile-menu.is-open .mobile-menu__list li {
opacity: 1;
transform: translateY(0);
transition-delay: calc(var(--i, 0) * 50ms + 100ms);
}

.mobile-menu__link {
display: inline-flex;
align-items: baseline;
gap: 0.85rem;
padding-block: 0.45rem;
color: var(--text);
font-family: var(--serif);
font-size: clamp(1.75rem, 6.5vw, 2.35rem);
font-weight: 600;
line-height: 1.15;
transition: color 0.25s ease, transform 0.25s ease;
}

.mobile-menu__num {
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--brass);
}

.mobile-menu__label {
position: relative;
}

.mobile-menu__link:hover,
.mobile-menu__link:focus-visible,
.mobile-menu__link.is-active {
color: var(--brass-light);
transform: translateX(6px);
}

.mobile-menu__link.is-active .mobile-menu__label::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
background: var(--brass);
}

.mobile-menu__actions {
margin-top: 1.85rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.mobile-menu__quote-btn {
width: 100%;
min-height: 52px;
padding: 0 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
border: 1px solid var(--brass);
border-radius: var(--radius-small);
background: var(--brass);
color: #0d0806;
font-family: var(--sans);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 0 10px 24px rgba(201, 168, 106, 0.22);
transition: background 0.3s ease, transform 0.2s ease;
}

.mobile-menu__quote-btn:hover {
background: var(--brass-light);
transform: translateY(-2px);
}

.mobile-menu__subactions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}

.mobile-menu__contact-btn {
min-height: 48px;
padding: 0.5rem 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: 1px solid var(--border);
border-radius: var(--radius-small);
background: rgba(22, 14, 10, 0.85);
color: var(--text);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.mobile-menu__contact-btn svg {
flex-shrink: 0;
}

.mobile-menu__contact-btn--call:hover {
border-color: var(--brass);
color: var(--brass-light);
}

.mobile-menu__contact-btn--wa {
border-color: rgba(37, 211, 102, 0.4);
color: #25d366;
}

.mobile-menu__contact-btn--wa:hover {
background: rgba(37, 211, 102, 0.12);
border-color: #25d366;
}

.mobile-menu__offices {
margin-top: 1.65rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.mobile-office-card {
padding: 0.85rem 1rem;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
}

.mobile-office-card__badge {
margin-bottom: 0.3rem;
color: var(--brass-light);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.mobile-office-card__addr {
color: var(--muted);
font-size: 0.78rem;
line-height: 1.45;
margin-bottom: 0.45rem;
}

.mobile-office-card__link {
display: inline-flex;
align-items: center;
color: var(--brass);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: color 0.2s ease;
}

.mobile-office-card__link:hover {
color: var(--brass-light);
}

.mobile-menu__footer {
margin-top: 1.65rem;
padding-top: 1rem;
border-top: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
gap: 0.4rem;
}

.mobile-menu__mail {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--brass-light);
font-size: 0.82rem;
font-weight: 600;
transition: color 0.2s ease;
}

.mobile-menu__mail:hover {
color: var(--text);
}

.mobile-menu__hours {
color: var(--muted);
font-size: 0.72rem;
}

/* Hero */

.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
padding-top: calc(var(--header) + 3.75rem);
padding-bottom: 3rem;
display: flex;
align-items: center;
overflow: hidden;
background-color: var(--bg);
background-image:
radial-gradient(ellipse 70% 60% at 20% 25%, rgba(201, 168, 106, 0.18), transparent 70%),
radial-gradient(ellipse 60% 50% at 82% 65%, rgba(168, 112, 68, 0.14), transparent 75%),
linear-gradient(
180deg,
rgba(13, 8, 6, 0.82),
rgba(13, 8, 6, 0.25) 35%,
rgba(13, 8, 6, 0.4) 75%,
rgba(13, 8, 6, 0.95)
),
repeating-linear-gradient(
90deg,
var(--groove) 0,
var(--groove) 2px,
var(--slope) 2.5px,
var(--crest) 6px,
var(--highlight) 7px,
var(--crest) 8.5px,
var(--slope) 12px,
var(--groove) 14px
);
}

.hero__grid {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: 2.25rem;
}

body.quote-open .hero__grid {
z-index: 200;
}

/* Ceiling Lights */

.hero__ceiling-lights {
position: absolute;
top: var(--header);
left: 0;
z-index: 1;
width: 100%;
height: min(620px, 72vh);
overflow: hidden;
pointer-events: none;
}

.hero__ceiling-lights::before {
content: "";
position: absolute;
inset: 0 0 auto;
width: 100%;
height: 34px;
border-bottom: 1px solid rgba(201, 168, 106, 0.2);
background: linear-gradient(
180deg,
rgba(48, 29, 19, 0.98),
rgba(25, 15, 10, 0.98) 54%,
rgba(7, 4, 3, 0.98)
);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.82);
}

.hero-spotlight {
--light-size: clamp(220px, 25vw, 370px);
--beam-height: clamp(330px, 44vw, 530px);
position: absolute;
top: 7px;
left: var(--light-x);
width: 1px;
height: 1px;
transform: translateX(-50%);
}

.hero-spotlight__fixture {
position: absolute;
top: 0;
left: 50%;
z-index: 4;
width: clamp(52px, 5vw, 72px);
height: clamp(42px, 4.5vw, 62px);
border-radius: 7px 7px 15px 15px;
background: linear-gradient(
90deg,
#020101,
#18110d 18%,
#070403 52%,
#1a120d 82%,
#020101
);
transform: translateX(-50%);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.85);
}

.hero-spotlight__fixture::before {
content: "";
position: absolute;
left: 10%;
bottom: -4px;
width: 80%;
height: 12px;
border-radius: 50%;
background: radial-gradient(
ellipse,
#fffaf0,
#ffe7a7 35%,
#d09b45 60%,
#17100b 65%,
#020101 100%
);
box-shadow: 0 2px 8px rgba(255, 220, 145, 0.65);
}

.hero-spotlight__beam {
position: absolute;
top: clamp(39px, 4vw, 56px);
left: 50%;
width: var(--light-size);
height: var(--beam-height);
clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
background: radial-gradient(
ellipse at 50% 8%,
rgba(255, 246, 209, 0.38),
rgba(255, 224, 157, 0.25) 15%,
rgba(236, 180, 93, 0.14) 37%,
transparent 78%
);
opacity: 0.88;
filter: blur(8px);
mix-blend-mode: screen;
transform: translateX(-50%);
}

.hero-spotlight::after {
content: "";
position: absolute;
top: clamp(210px, 27vw, 325px);
left: 50%;
width: calc(var(--light-size) * 0.9);
height: clamp(130px, 16vw, 210px);
border-radius: 50%;
background: radial-gradient(
ellipse,
rgba(255, 229, 170, 0.24),
rgba(231, 177, 96, 0.13) 32%,
transparent 76%
);
filter: blur(16px);
transform: translateX(-50%);
}

/* Hero Content */

.hero__eyebrow {
display: inline-flex;
margin-bottom: 1rem;
padding: 0.4rem 0.9rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--brass-soft);
color: var(--brass-light);
font-size: 0.73rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
}

.hero__title {
margin-bottom: 0.65rem;
}

.hero__kicker {
display: block;
margin-bottom: 0.9rem;
padding-left: 0.75rem;
border-left: 2px solid var(--brass);
color: var(--brass);
font-family: var(--sans);
font-size: clamp(0.86rem, 1.05vw, 1rem);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.hero__headline {
display: block;
font-family: var(--serif);
font-size: clamp(2.15rem, 3.8vw, 3.45rem);
font-weight: 600;
line-height: 1.08;
color: var(--text);
}

.hero__headline em {
color: var(--brass);
font-style: italic;
}

.hero__subtext {
margin-bottom: 1.35rem;
color: var(--muted);
font-size: clamp(0.92rem, 1.05vw, 1rem);
line-height: 1.65;
}

.mobile-quote-trigger {
width: 100%;
min-height: 52px;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-small);
background: var(--brass);
color: #0d0806;
font-size: 0.84rem;
font-weight: 700;
text-transform: uppercase;
}

/* Quote Form */

.lead-modal-backdrop {
display: contents;
}

.lead-card {
padding: 1.45rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--card);
backdrop-filter: blur(16px);
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.65);
}

.lead-card__header {
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}

.lead-card__title {
font-family: var(--serif);
font-size: 1.2rem;
}

.lead-card__close {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
color: var(--muted);
transition: color 0.2s ease, border-color 0.2s ease;
}

.lead-card__close:hover {
color: var(--text);
border-color: var(--brass);
}

.lead-form {
display: grid;
gap: 0.85rem;
}

.form-field {
display: flex;
flex-direction: column;
gap: 0.32rem;
}

.form-label {
color: var(--muted);
font-size: 0.74rem;
font-weight: 600;
}

.form-input,
.form-select {
width: 100%;
min-height: 46px;
padding: 0 0.9rem;
border: 1px solid rgba(201, 168, 106, 0.32);
border-radius: var(--radius-small);
background: var(--input);
}

.form-input:focus,
.form-select:focus {
outline: none;
border-color: var(--brass);
box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.2);
}

.form-select option {
background: #170e0a;
}

.form-row {
display: grid;
grid-template-columns: 1fr;
gap: 0.8rem;
}

.form-error {
display: none;
color: var(--error);
font-size: 0.76rem;
}

.form-error.is-visible {
display: block;
}

.form-submit {
min-height: 50px;
border-radius: var(--radius-small);
background: var(--brass);
color: #0d0806;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
transition: background 0.3s ease;
}

.form-submit:hover {
background: var(--brass-light);
}

.form-success {
display: none;
padding: 1.25rem;
border: 1px solid var(--brass);
border-radius: var(--radius-small);
background: rgba(201, 168, 106, 0.15);
text-align: center;
}

.form-success.is-visible {
display: block;
}

.form-success__title {
color: var(--brass-light);
font-family: var(--serif);
font-size: 1.2rem;
}

.form-success__text {
margin-top: 0.4rem;
color: var(--muted);
font-size: 0.85rem;
}

.trust-badges {
margin-top: 1.15rem;
display: flex;
flex-wrap: wrap;
gap: 0.85rem 1.35rem;
}

.trust-badge {
font-size: 0.76rem;
font-weight: 600;
}

/* Slider */

.transformation-showcase {
display: flex;
flex-direction: column;
gap: 1rem;
}

.ba-slider {
position: relative;
width: 100%;
aspect-ratio: 16 / 10.5;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 32px 70px rgba(0, 0, 0, 0.75);
user-select: none;
touch-action: pan-y;
transition: opacity 0.22s ease;
}

.ba-slider.is-switching {
opacity: 0.35;
}

.ba-slider__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}

.ba-slider__before-wrap {
position: absolute;
inset: 0;
z-index: 2;
clip-path: inset(0 calc(100% - var(--slider-pos, 50%)) 0 0);
}

.ba-slider__before-wrap .ba-slider__img {
filter: saturate(0.2) contrast(0.95) brightness(0.85);
}

.ba-label {
position: absolute;
top: 1rem;
z-index: 4;
padding: 0.38rem 0.85rem;
border-radius: 4px;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
}

.ba-label--before {
left: 1rem;
background: rgba(10, 6, 4, 0.85);
}

.ba-label--after {
right: 1rem;
background: var(--brass);
color: #0d0806;
}

.ba-handle {
position: absolute;
top: 0;
bottom: 0;
left: var(--slider-pos, 50%);
z-index: 5;
width: 3px;
background: var(--brass-light);
cursor: ew-resize;
transform: translateX(-50%);
}

.ba-handle__knob {
position: absolute;
top: 50%;
left: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--brass-light);
border-radius: 50%;
background: #120a07;
color: var(--brass-light);
transform: translate(-50%, -50%);
}

.ba-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.65rem;
}

.ba-tab {
min-height: 50px;
padding: 0.52rem;
border: 1px solid var(--border-soft);
border-radius: var(--radius-small);
background: var(--card);
color: var(--muted);
font-size: 0.76rem;
font-weight: 700;
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.ba-tab.is-active {
border-color: var(--brass);
background: var(--brass);
color: #0d0806;
}

.scroll-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem;
color: var(--muted);
font-size: 0.75rem;
}

.scroll-footer__link {
color: var(--brass-light);
font-weight: 600;
}

/* Services */

.services-section {
position: relative;
padding: clamp(4.5rem, 8vw, 7.5rem) 0;
background:
radial-gradient(circle at 85% 5%, rgba(201, 168, 106, 0.17), transparent 28%),
linear-gradient(180deg, #0d0806, #120b08 48%, #0a0604);
}

.services-header {
max-width: 820px;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
text-align: center;
}

.services-header .section-title {
margin-bottom: 1.15rem;
}

.services-description {
color: var(--muted);
line-height: 1.75;
}

.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}

.service-card {
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
background: linear-gradient(145deg, #231610, #0f0906);
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.34);
transition: transform 0.4s var(--ease), border-color 0.4s ease;
}

.service-card:hover {
border-color: var(--brass);
transform: translateY(-8px);
}

.service-card__media {
position: relative;
height: 210px;
overflow: hidden;
}

.service-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.75s var(--ease);
}

.service-card:hover .service-card__image {
transform: scale(1.08);
}

.service-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 35%, rgba(15, 9, 6, 0.94));
}

.service-card__number,
.service-card__badge {
position: absolute;
top: 1rem;
z-index: 3;
padding: 0.4rem 0.7rem;
border: 1px solid rgba(226, 196, 133, 0.45);
border-radius: 999px;
background: rgba(10, 6, 4, 0.75);
color: var(--brass-light);
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
}

.service-card__number {
left: 1rem;
}

.service-card__badge {
right: 1rem;
}

.service-card__content {
flex: 1;
padding: 1.25rem 1.45rem 1.5rem;
display: flex;
flex-direction: column;
}

.service-card__title {
margin-bottom: 0.7rem;
font-family: var(--serif);
font-size: 1.4rem;
}

.service-card__description {
margin-bottom: 1.25rem;
color: var(--muted);
font-size: 0.87rem;
line-height: 1.65;
}

.service-card__link {
margin-top: auto;
align-self: flex-start;
color: var(--brass-light);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
transition: color 0.2s ease, transform 0.2s ease;
}

.service-card__link:hover {
color: var(--text);
transform: translateX(4px);
}

.services-cta {
margin-top: 3rem;
padding: clamp(1.5rem, 4vw, 2.5rem);
display: flex;
flex-direction: column;
gap: 1.4rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: linear-gradient(100deg, #251710, #110a07);
}

.services-cta__title {
margin-bottom: 0.45rem;
font-family: var(--serif);
font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.services-cta__text {
color: var(--muted);
line-height: 1.65;
}

.services-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}



/* About */

.about-section {
position: relative;
padding: clamp(5rem, 9vw, 8rem) 0;
background:
radial-gradient(circle at 12% 15%, rgba(201, 168, 106, 0.13), transparent 30%),
linear-gradient(180deg, #0a0604, #120b08 48%, #0c0705);
}

.about-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(3rem, 7vw, 6rem);
align-items: center;
}

.about-visual {
position: relative;
min-height: 520px;
}

.about-image-main {
position: absolute;
top: 0;
left: 0;
width: 78%;
height: 82%;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 35px 75px rgba(0, 0, 0, 0.58);
}

.about-image-small {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 52%;
height: 50%;
overflow: hidden;
border: 5px solid #100906;
border-radius: var(--radius);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65);
}

.about-image-main img,
.about-image-small img {
width: 100%;
height: 100%;
object-fit: cover;
}

.about-experience {
position: absolute;
left: 7%;
bottom: 5%;
z-index: 4;
width: 145px;
min-height: 145px;
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid var(--brass);
border-radius: 50%;
background: rgba(18, 10, 7, 0.94);
text-align: center;
}

.about-experience strong {
color: var(--brass-light);
font-family: var(--serif);
font-size: 2.25rem;
}

.about-experience span {
color: var(--muted);
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
}

.about-content .section-title {
margin-bottom: 1.25rem;
}

.about-lead {
margin-bottom: 1rem;
font-size: 1.05rem;
line-height: 1.75;
}

.about-description {
margin-bottom: 1.65rem;
color: var(--muted);
font-size: 0.94rem;
line-height: 1.8;
}

.about-features {
margin-bottom: 2rem;
display: grid;
grid-template-columns: 1fr;
gap: 0.8rem;
}

.about-feature {
padding: 0.8rem 0.9rem;
display: flex;
gap: 0.75rem;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: rgba(255, 255, 255, 0.025);
}

.about-feature__icon {
width: 27px;
height: 27px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--brass-soft);
color: var(--brass-light);
}

.about-feature strong {
display: block;
margin-bottom: 0.2rem;
font-size: 0.85rem;
}

.about-feature span {
color: var(--muted);
font-size: 0.76rem;
line-height: 1.5;
}

.about-stats {
margin-bottom: 2rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
border: 1px solid var(--border);
border-radius: var(--radius);
background: rgba(201, 168, 106, 0.055);
}

.about-stat {
padding: 1.15rem 0.8rem;
text-align: center;
border-right: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}

.about-stat:nth-child(2n) {
border-right: none;
}

.about-stat:nth-child(n+3) {
border-bottom: none;
}

.about-stat strong {
display: block;
color: var(--brass-light);
font-family: var(--serif);
font-size: 2rem;
}

.about-stat span {
color: var(--muted);
font-size: 0.68rem;
text-transform: uppercase;
}

.about-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

/* Areas Section */

.areas-section {
position: relative;
padding: clamp(4.5rem, 8vw, 7.5rem) 0;
background:
radial-gradient(circle at 85% 15%, rgba(201, 168, 106, 0.12), transparent 32%),
linear-gradient(180deg, #0c0705, #140d09 50%, #0c0705);
}

.areas-header {
max-width: 820px;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
text-align: center;
}

.areas-header .section-title {
margin-bottom: 1.15rem;
}

.areas-description {
color: var(--muted);
line-height: 1.75;
}

.areas-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
}

.area-group-card {
padding: clamp(1.4rem, 3.2vw, 2.2rem);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
background: linear-gradient(145deg, #1e130d, #0e0805);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.area-group-card__header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}

.area-group-card__badge {
padding: 0.25rem 0.65rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--brass-soft);
color: var(--brass-light);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.area-group__title {
font-family: var(--serif);
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
color: var(--text);
}

.area-group-card__text {
color: var(--muted);
font-size: 0.88rem;
line-height: 1.7;
margin-bottom: 1.35rem;
}

.area-tags {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}

.area-tag {
padding: 0.38rem 0.85rem;
border: 1px solid rgba(201, 168, 106, 0.28);
border-radius: 999px;
background: rgba(22, 14, 10, 0.75);
color: rgba(249, 246, 240, 0.9);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.02em;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.area-tag:hover {
border-color: var(--brass);
background: var(--brass-soft);
color: var(--brass-light);
}

/* FAQ Section */

.faq-section {
position: relative;
padding: clamp(4.5rem, 8vw, 7.5rem) 0;
background:
radial-gradient(circle at 15% 20%, rgba(201, 168, 106, 0.1), transparent 30%),
linear-gradient(180deg, #0c0705, #110a07 50%, #0c0705);
}

.faq-header {
max-width: 820px;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
text-align: center;
}

.faq-header .section-title {
margin-bottom: 1.15rem;
}

.faq-description {
color: var(--muted);
line-height: 1.75;
}

.faq-list {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
}

.faq-item {
border: 1px solid var(--border-soft);
border-radius: var(--radius);
background: linear-gradient(145deg, #1b110b, #0d0805);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
overflow: hidden;
transition: border-color 0.25s ease;
}

.faq-item[open] {
border-color: var(--border);
}

.faq-summary {
list-style: none;
cursor: pointer;
padding: 1.25rem 1.45rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
user-select: none;
}

.faq-summary::-webkit-details-marker {
display: none;
}

.faq-question {
font-family: var(--serif);
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
font-weight: 600;
color: var(--text);
line-height: 1.35;
}

.faq-chevron {
width: 32px;
height: 32px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--border-soft);
background: rgba(22, 14, 10, 0.8);
color: var(--brass-light);
transition: transform 0.3s var(--ease), border-color 0.25s ease;
}

.faq-item[open] .faq-chevron {
transform: rotate(180deg);
border-color: var(--brass);
}

.faq-answer {
padding: 0 1.45rem 1.35rem;
color: var(--muted);
font-size: 0.88rem;
line-height: 1.75;
border-top: 1px solid rgba(201, 168, 106, 0.12);
padding-top: 1rem;
}

/* Contact Section & Office Cards */

.contact-section {
position: relative;
padding: clamp(4.5rem, 8vw, 7.5rem) 0;
background:
radial-gradient(circle at 15% 10%, rgba(201, 168, 106, 0.12), transparent 30%),
radial-gradient(circle at 85% 85%, rgba(168, 112, 68, 0.1), transparent 32%),
linear-gradient(180deg, #0c0705, #110a07 50%, #080403);
}

.contact-header {
max-width: 820px;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
text-align: center;
}

.contact-header .section-title {
margin-bottom: 1.15rem;
}

.contact-description {
color: var(--muted);
line-height: 1.75;
}

.contact-layout {
display: flex;
flex-direction: column;
gap: 2.5rem;
}

.office-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
}

.office-card {
display: flex;
flex-direction: column;
padding: clamp(1.4rem, 3vw, 2rem);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
background: linear-gradient(145deg, #1f140e, #0e0805);
box-shadow: 0 24px 55px rgba(0, 0, 0, 0.45);
transition: border-color 0.35s ease, transform 0.35s var(--ease);
}

.office-card:hover {
border-color: var(--border);
transform: translateY(-4px);
}

.office-card__header {
margin-bottom: 1.25rem;
}

.office-card__tag {
display: inline-block;
margin-bottom: 0.4rem;
padding: 0.25rem 0.65rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--brass-soft);
color: var(--brass-light);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.office-card__title {
font-family: var(--serif);
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
color: var(--text);
}

.office-card__details {
display: grid;
gap: 0.85rem;
margin-bottom: 1.5rem;
}

.office-detail {
display: flex;
align-items: flex-start;
gap: 0.75rem;
color: var(--muted);
font-size: 0.85rem;
line-height: 1.55;
}

.office-detail svg {
flex-shrink: 0;
margin-top: 0.2rem;
color: var(--brass);
}

.office-address {
font-style: normal;
color: var(--text);
}

.office-link {
color: var(--brass-light);
transition: color 0.2s ease;
}

.office-link:hover {
color: var(--text);
}

.map-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
margin-bottom: 1.4rem;
overflow: hidden;
border: 1px solid var(--border-soft);
border-radius: var(--radius-small);
background: #0a0604;
}

.map-facade {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: #120b08;
background-image:
radial-gradient(circle at 50% 50%, rgba(201, 168, 106, 0.12), transparent 70%),
repeating-linear-gradient(45deg, #090503 0, #090503 10px, #140d09 10px, #140d09 12px);
transition: opacity 0.3s ease, visibility 0.3s ease;
}

.map-facade.is-loaded {
opacity: 0;
visibility: hidden;
pointer-events: none;
}

.map-facade__overlay {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
padding: 1rem;
}

.map-facade__icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--border);
background: rgba(13, 8, 6, 0.9);
color: var(--brass-light);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.map-facade__title {
font-family: var(--serif);
font-size: 0.95rem;
color: var(--text);
}

.map-facade__btn {
margin-top: 0.2rem;
padding: 0.35rem 0.85rem;
border: 1px solid var(--brass);
border-radius: 999px;
background: var(--brass-soft);
color: var(--brass-light);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background 0.2s ease, color 0.2s ease;
}

.map-facade:hover .map-facade__btn,
.map-facade:focus-visible .map-facade__btn {
background: var(--brass);
color: #0d0806;
}

.map-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
filter: grayscale(0.3) contrast(1.1) brightness(0.85);
transition: filter 0.4s ease;
}

.map-container:hover .map-iframe {
filter: none;
}

.office-card__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}

.office-btn {
min-height: 42px;
padding: 0.45rem 0.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
border: 1px solid var(--border);
border-radius: var(--radius-small);
background: rgba(22, 14, 10, 0.8);
color: var(--text);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.office-btn:hover {
border-color: var(--brass);
color: var(--brass-light);
transform: translateY(-2px);
}

.office-btn--primary {
background: var(--brass);
border-color: var(--brass);
color: #0d0806;
}

.office-btn--primary:hover {
background: var(--brass-light);
border-color: var(--brass-light);
color: #0d0806;
}

.office-btn--wa {
border-color: rgba(37, 211, 102, 0.45);
color: #25d366;
}

.office-btn--wa:hover {
background: rgba(37, 211, 102, 0.12);
border-color: #25d366;
color: #25d366;
}

.office-card__subactions {
margin-top: 1rem;
padding-top: 0.85rem;
border-top: 1px solid var(--border-soft);
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
}

.office-sublink {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--brass-light);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.02em;
transition: color 0.2s ease;
}

.office-sublink:hover {
color: var(--text);
}

.contact-form-wrap {
width: 100%;
max-width: 860px;
margin: 0 auto;
}

.contact-form-card {
padding: clamp(1.5rem, 3.5vw, 2.5rem);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--card);
backdrop-filter: blur(16px);
box-shadow: 0 28px 65px rgba(0, 0, 0, 0.6);
}

.contact-form__title {
font-family: var(--serif);
font-size: clamp(1.4rem, 2.5vw, 2rem);
color: var(--text);
margin-bottom: 0.4rem;
}

.contact-form__sub {
color: var(--muted);
font-size: 0.88rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}

.contact-form {
display: grid;
gap: 0.95rem;
}

.form-textarea {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
resize: vertical;
min-height: 80px;
}

/* Footer */

.site-footer {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: #070402;
background-image:
radial-gradient(circle at 80% 10%, rgba(201, 168, 106, 0.12), transparent 30%),
repeating-linear-gradient(
90deg,
#070402 0,
#070402 10px,
#0c0705 10px,
#0c0705 12px
);
}

.site-footer::before {
content: "";
position: absolute;
top: 0;
left: 50%;
z-index: -1;
width: min(1200px, 92%);
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(201, 168, 106, 0.7),
transparent
);
transform: translateX(-50%);
}

.footer-cta-wrap {
padding-top: clamp(3.5rem, 7vw, 5.5rem);
}

.footer-cta {
position: relative;
overflow: hidden;
padding: clamp(1.6rem, 4vw, 2.8rem);
display: flex;
flex-direction: column;
gap: 1.4rem;
border: 1px solid rgba(201, 168, 106, 0.38);
border-radius: var(--radius);
background:
radial-gradient(circle at 90% 20%, rgba(201, 168, 106, 0.2), transparent 38%),
linear-gradient(110deg, rgba(43, 27, 19, 0.98), rgba(17, 10, 7, 0.98));
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.footer-cta__eyebrow {
margin-bottom: 0.5rem;
color: var(--brass-light);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}

.footer-cta__title {
margin-bottom: 0.55rem;
font-family: var(--serif);
font-size: clamp(1.7rem, 3.4vw, 2.8rem);
font-weight: 600;
line-height: 1.15;
}

.footer-cta__text {
max-width: 680px;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.7;
}

.footer-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.footer-main {
padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.5rem;
}

.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}

.footer-brand__name {
display: inline-block;
margin-bottom: 0.35rem;
color: var(--text);
font-family: var(--serif);
font-size: clamp(1.55rem, 2.5vw, 2rem);
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}

.footer-brand__tagline {
margin-bottom: 1.15rem;
color: var(--brass);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}

.footer-brand__description {
max-width: 430px;
margin-bottom: 1.4rem;
color: var(--muted);
font-size: 0.87rem;
line-height: 1.75;
}

.footer-socials {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}

.footer-social {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
background: rgba(255, 255, 255, 0.025);
color: var(--brass-light);
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}

.footer-social:hover {
background: var(--brass);
color: #0d0806;
transform: translateY(-3px);
}

.footer-heading {
position: relative;
margin-bottom: 1.25rem;
padding-bottom: 0.7rem;
font-family: var(--serif);
font-size: 1.15rem;
font-weight: 600;
}

.footer-heading::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 42px;
height: 1px;
background: var(--brass);
}

.footer-links {
display: grid;
gap: 0.75rem;
}

.footer-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--muted);
font-size: 0.84rem;
text-align: left;
transition: color 0.25s ease, transform 0.25s ease;
}

.footer-link::before {
content: "";
width: 5px;
height: 5px;
flex-shrink: 0;
border-radius: 50%;
background: var(--brass);
}

.footer-link:hover {
color: var(--brass-light);
transform: translateX(4px);
}

.footer-contact-list {
display: grid;
gap: 1.1rem;
}

.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}

.footer-contact-icon {
width: 34px;
height: 34px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
color: var(--brass-light);
}

.footer-contact-content strong {
display: block;
margin-bottom: 0.2rem;
color: var(--text);
font-size: 0.74rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}

.footer-contact-content a,
.footer-contact-content span {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.55;
transition: color 0.25s ease;
}

.footer-contact-content a:hover {
color: var(--brass-light);
}

.footer-bottom {
border-top: 1px solid var(--border-soft);
background: rgba(0, 0, 0, 0.25);
}

.footer-bottom__inner {
min-height: 72px;
padding-block: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.7rem;
color: var(--muted);
font-size: 0.73rem;
text-align: center;
}

.footer-legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.8rem 1.2rem;
}

.footer-legal a:hover {
color: var(--brass-light);
}

/* Back To Top */

.back-to-top {
position: fixed;
right: 1rem;
bottom: calc(
var(--mobile-bar) +
env(safe-area-inset-bottom, 0px) +
1rem
);
z-index: 80;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--brass);
border-radius: 50%;
background: rgba(18, 10, 7, 0.95);
color: var(--brass-light);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(15px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
transition:
opacity 0.3s ease,
visibility 0.3s ease,
transform 0.3s ease,
background 0.3s ease;
}

.back-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}

.back-to-top:hover {
background: var(--brass);
color: #0d0806;
}

/* Mobile Sticky Bar */

.mobile-sticky-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 90;
width: 100%;
min-height: var(--mobile-bar);
padding:
7px
max(8px, env(safe-area-inset-right, 0px))
calc(7px + env(safe-area-inset-bottom, 0px))
max(8px, env(safe-area-inset-left, 0px));
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 7px;
border-top: 1px solid rgba(201, 168, 106, 0.38);
background: linear-gradient(
180deg,
rgba(26, 16, 11, 0.97),
rgba(8, 5, 3, 0.99)
);
box-shadow:
0 -12px 35px rgba(0, 0, 0, 0.62),
0 -1px 0 rgba(255, 255, 255, 0.03);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition: transform 0.35s var(--ease), opacity 0.3s ease;
}

body.menu-open .mobile-sticky-bar,
body.quote-open .mobile-sticky-bar {
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}

.mobile-sticky-bar__btn {
min-width: 0;
min-height: 50px;
padding: 0.55rem 0.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
overflow: hidden;
border: 1px solid rgba(201, 168, 106, 0.32);
border-radius: 8px;
background: linear-gradient(
145deg,
rgba(42, 27, 19, 0.95),
rgba(17, 10, 7, 0.98)
);
color: rgba(249, 246, 240, 0.95);
font-family: var(--sans);
font-size: clamp(0.66rem, 2.75vw, 0.76rem);
font-weight: 700;
line-height: 1;
letter-spacing: 0.035em;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
0 5px 14px rgba(0, 0, 0, 0.22);
transition:
transform 0.2s ease,
border-color 0.2s ease,
background 0.2s ease,
color 0.2s ease;
}

.mobile-sticky-bar__btn svg {
flex-shrink: 0;
color: var(--brass-light);
}

.mobile-sticky-bar__btn[href*="wa.me"] svg {
color: #25d366;
}

.mobile-sticky-bar__btn:hover,
.mobile-sticky-bar__btn:focus-visible {
border-color: var(--brass);
background: linear-gradient(
145deg,
rgba(57, 38, 27, 0.98),
rgba(25, 15, 10, 0.98)
);
color: var(--brass-light);
}

.mobile-sticky-bar__btn:active {
transform: scale(0.97);
}

.mobile-sticky-bar__btn--primary {
border-color: var(--brass);
background: linear-gradient(
135deg,
var(--brass-light),
var(--brass)
);
color: #0d0806;
box-shadow:
0 8px 22px rgba(201, 168, 106, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mobile-sticky-bar__btn--primary svg {
color: #0d0806;
}

.mobile-sticky-bar__btn--primary:hover,
.mobile-sticky-bar__btn--primary:focus-visible {
border-color: #f0d89e;
background: linear-gradient(135deg, #efd89d, var(--brass-light));
color: #0d0806;
}

/* Responsive */

@media (min-width: 540px) {
.form-row {
grid-template-columns: 1fr 1fr;
}
}

@media (min-width: 600px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}

.about-features {
grid-template-columns: repeat(2, 1fr);
}

.about-stats {
grid-template-columns: repeat(4, 1fr);
}

.about-stat {
border-bottom: none;
border-right: 1px solid var(--border-soft);
}

.about-stat:nth-child(2n) {
border-right: 1px solid var(--border-soft);
}

.about-stat:last-child {
border-right: none;
}

.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 900px) {
.services-grid {
grid-template-columns: repeat(3, 1fr);
}

.service-card--featured {
grid-column: span 2;
}

.services-cta,
.footer-cta {
flex-direction: row;
align-items: center;
justify-content: space-between;
}

.about-grid {
grid-template-columns: 0.95fr 1.05fr;
}

.areas-grid,
.office-cards-grid {
grid-template-columns: repeat(2, 1fr);
}

.footer-grid {
grid-template-columns: 1.4fr 0.75fr 0.9fr 1.15fr;
}

.footer-bottom__inner {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}

@media (min-width: 1024px) {
body {
padding-bottom: 0;
}

.nav-links {
display: flex;
}

.nav-cta {
display: inline-flex;
}

.menu-toggle,
.mobile-menu,
.mobile-quote-trigger,
.mobile-sticky-bar {
display: none !important;
}

.hero__grid {
grid-template-columns: 4.1fr 5.9fr;
gap: clamp(2rem, 3.5vw, 3.75rem);
}

.lead-card__close {
display: none;
}

.back-to-top {
right: 1.5rem;
bottom: 1.5rem;
}
}

@media (min-width: 1200px) {
.services-grid {
grid-template-columns: repeat(4, 1fr);
}

.service-card--featured {
grid-column: span 1;
}

.service-card--featured .service-card__media {
height: 210px;
}
}

@media (max-width: 1023px) {
body.quote-open {
overflow: hidden;
}

.hero {
padding-top: calc(var(--header) + 5rem);
}

.hero-spotlight:nth-child(2) {
display: none;
}

.hero-spotlight:nth-child(1) {
left: 24% !important;
}

.hero-spotlight:nth-child(3) {
left: 76% !important;
}

.lead-modal-backdrop {
position: fixed;
inset: 0;
z-index: 120;
display: block;
background: rgba(6, 4, 3, 0.82);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lead-modal-backdrop.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.lead-card {
position: fixed;
bottom: 0;
left: 0;
z-index: 125;
width: 100%;
max-height: 90svh;
padding-bottom: calc(1.45rem + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
border-radius: 20px 20px 0 0;
background: #170e0a;
transform: translateY(100%);
transition: transform 0.4s var(--ease);
}

.lead-modal-backdrop.is-open .lead-card {
transform: translateY(0);
}
}

@media (max-width: 899px) {
.about-visual {
min-height: 570px;
}
}

.calc .calc__header {
  text-align: center;
}

@media (max-width: 599px) {
  .section-eyebrow::before {
    display: none;
  }

  .calc .section-eyebrow::after {
    display: none;
  }

.services-header,
.areas-header,
.faq-header,
.contact-header {
text-align: left;
}

.services-cta__actions,
.about-actions,
.footer-cta__actions {
width: 100%;
flex-direction: column;
}

.primary-button,
.outline-button {
width: 100%;
}

.about-visual {
min-height: 440px;
}

.about-image-main {
width: 88%;
height: 78%;
}

.about-image-small {
width: 58%;
height: 47%;
}

.about-experience {
left: 2%;
width: 120px;
min-height: 120px;
}

.ba-tabs {
gap: 0.35rem;
}

.ba-tab {
padding: 0.35rem 0.15rem;
font-size: 0.66rem;
}

.office-card__actions {
flex-direction: column;
}

.office-btn {
width: 100%;
}
}

@media (max-width: 374px) {
.mobile-sticky-bar {
gap: 5px;
padding-right: 5px;
padding-left: 5px;
}

.mobile-sticky-bar__btn {
min-height: 48px;
padding-inline: 0.2rem;
gap: 0.25rem;
font-size: 0.61rem;
letter-spacing: 0.01em;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}

.mobile-menu,
.mobile-menu__list li {
clip-path: none !important;
transition: none !important;
}
}

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"] {
border-color: var(--error);
}

.form-input[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus {
border-color: var(--error);
box-shadow: 0 0 0 3px rgba(255, 107, 91, 0.2);
}

.form-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
}

.trust-badge,
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}

.badge-icon {
flex-shrink: 0;
color: var(--brass-light);
}

.form-success__wa-btn {
margin-top: 1rem;
width: 100%;
}

.form-success__reset-btn {
margin-top: 0.75rem;
width: 100%;
}

/* ==========================================================================
Portfolio Section & Lightbox
========================================================================== */

.portfolio-section {
position: relative;
padding: clamp(4.5rem, 8vw, 7.5rem) 0;
background:
radial-gradient(circle at 15% 15%, rgba(201, 168, 106, 0.12), transparent 35%),
linear-gradient(180deg, #0a0604, #120b08 50%, #0d0806);
}

.portfolio-header {
max-width: 820px;
margin: 0 auto clamp(2rem, 4vw, 3.5rem);
text-align: center;
}

.portfolio-header .section-title {
margin-bottom: 1.15rem;
}

.portfolio-description {
color: var(--muted);
line-height: 1.75;
}

.portfolio-filters-wrap {
margin-bottom: clamp(2rem, 4vw, 3.25rem);
display: flex;
justify-content: center;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.5rem;
}

.portfolio-filters {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem;
border: 1px solid var(--border-soft);
border-radius: 999px;
background: rgba(22, 14, 10, 0.85);
backdrop-filter: blur(12px);
}

.portfolio-filter {
position: relative;
z-index: 2;
min-height: 40px;
padding: 0 1.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--muted);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
transition: color 0.25s ease;
}

.portfolio-filter:hover {
color: var(--text);
}

.portfolio-filter.is-active {
color: #0d0806;
}

.portfolio-filter__indicator {
position: absolute;
top: 0.35rem;
bottom: 0.35rem;
left: 0;
z-index: 1;
border-radius: 999px;
background: linear-gradient(135deg, var(--brass-light), var(--brass));
box-shadow: 0 4px 14px rgba(201, 168, 106, 0.3);
transition: transform 0.35s var(--ease), width 0.35s var(--ease);
pointer-events: none;
}

.portfolio-grid {
display: grid;
grid-template-columns: 1fr;
grid-auto-flow: dense;
gap: 1.25rem;
}

.portfolio-item {
position: relative;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-soft);
background: #150d09;
cursor: pointer;
transition:
transform 0.4s var(--ease),
border-color 0.4s ease,
opacity 0.4s ease,
box-shadow 0.4s ease;
}

.portfolio-item.is-extra {
display: none;
}

.portfolio-item.is-hidden {
display: none !important;
}

.portfolio-item.is-animating {
opacity: 0;
transform: scale(0.94);
}

.portfolio-item:hover,
.portfolio-item:focus-visible {
border-color: var(--brass);
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
}

.portfolio-item__media {
position: relative;
width: 100%;
height: 100%;
min-height: 280px;
overflow: hidden;
}

.portfolio-item__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease), filter 0.5s ease;
}

.portfolio-item:hover .portfolio-item__img,
.portfolio-item:focus-visible .portfolio-item__img {
transform: scale(1.08);
filter: brightness(0.85);
}

.portfolio-item__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
background: linear-gradient(
180deg,
rgba(10, 6, 4, 0) 30%,
rgba(10, 6, 4, 0.6) 60%,
rgba(8, 5, 3, 0.95) 100%
);
opacity: 0.95;
transition: opacity 0.3s ease;
}

.portfolio-item__info {
display: flex;
flex-direction: column;
gap: 0.35rem;
transform: translateY(6px);
transition: transform 0.35s var(--ease);
}

.portfolio-item:hover .portfolio-item__info,
.portfolio-item:focus-visible .portfolio-item__info {
transform: translateY(0);
}

.portfolio-item__badge {
align-self: flex-start;
padding: 0.22rem 0.65rem;
border-radius: 999px;
background: var(--brass);
color: #0d0806;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.portfolio-item__title {
color: var(--text);
font-family: var(--serif);
font-size: clamp(1.05rem, 1.4vw, 1.35rem);
font-weight: 600;
line-height: 1.25;
}

.portfolio-item__location {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--brass-light);
font-size: 0.74rem;
font-weight: 500;
}

.portfolio-item__zoom {
position: absolute;
top: 1rem;
right: 1rem;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--border);
background: rgba(13, 8, 6, 0.85);
color: var(--brass-light);
opacity: 0;
transform: scale(0.8);
transition: opacity 0.3s ease, transform 0.3s var(--ease), background 0.2s ease;
}

.portfolio-item:hover .portfolio-item__zoom,
.portfolio-item:focus-visible .portfolio-item__zoom {
opacity: 1;
transform: scale(1);
}

.portfolio-actions {
margin-top: clamp(2.5rem, 5vw, 4rem);
display: flex;
justify-content: center;
}

.portfolio-load-more {
min-width: 220px;
}

/* Lightbox Modal */

.portfolio-lightbox {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(0.75rem, 2.5vw, 2rem);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s ease, visibility 0.35s ease;
}

.portfolio-lightbox.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.portfolio-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(6, 4, 3, 0.94);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}

.portfolio-lightbox__content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1100px;
max-height: 94vh;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius);
background: #140d09;
box-shadow: 0 35px 80px rgba(0, 0, 0, 0.85);
transform: scale(0.94);
transition: transform 0.35s var(--ease);
}

.portfolio-lightbox.is-open .portfolio-lightbox__content {
transform: scale(1);
}

.portfolio-lightbox__header {
padding: 1rem 1.4rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border-soft);
background: rgba(22, 14, 10, 0.95);
}

.portfolio-lightbox__meta {
display: flex;
align-items: center;
gap: 0.85rem;
}

.portfolio-lightbox__badge {
padding: 0.25rem 0.75rem;
border-radius: 999px;
background: var(--brass-soft);
border: 1px solid var(--border);
color: var(--brass-light);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.portfolio-lightbox__counter {
color: var(--muted);
font-size: 0.76rem;
font-weight: 600;
}

.portfolio-lightbox__close {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
color: var(--muted);
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.portfolio-lightbox__close:hover,
.portfolio-lightbox__close:focus-visible {
color: var(--text);
border-color: var(--brass);
background: rgba(201, 168, 106, 0.15);
}

.portfolio-lightbox__stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
min-height: min(480px, 55vh);
background: #090503;
overflow: hidden;
}

.portfolio-lightbox__img-wrap {
width: 100%;
height: 100%;
max-height: min(560px, 62vh);
display: flex;
align-items: center;
justify-content: center;
}

.portfolio-lightbox__img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: opacity 0.25s ease;
}

.portfolio-lightbox__nav {
position: absolute;
top: 50%;
z-index: 5;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
background: rgba(18, 11, 7, 0.85);
color: var(--brass-light);
backdrop-filter: blur(8px);
transform: translateY(-50%);
transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.portfolio-lightbox__nav:hover,
.portfolio-lightbox__nav:focus-visible {
background: var(--brass);
border-color: var(--brass);
color: #0d0806;
transform: translateY(-50%) scale(1.08);
}

.portfolio-lightbox__nav--prev {
left: 1rem;
}

.portfolio-lightbox__nav--next {
right: 1rem;
}

.portfolio-lightbox__footer {
padding: 1.25rem 1.4rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-top: 1px solid var(--border-soft);
background: rgba(22, 14, 10, 0.95);
}

.portfolio-lightbox__info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}

.portfolio-lightbox__title {
color: var(--text);
font-family: var(--serif);
font-size: clamp(1.15rem, 1.8vw, 1.4rem);
}

.portfolio-lightbox__loc {
color: var(--brass-light);
font-size: 0.8rem;
font-weight: 500;
}

.portfolio-lightbox__cta {
min-height: 44px;
padding: 0 1.25rem;
font-size: 0.72rem;
}

/* ==========================================================================
Process Section
========================================================================== */

.process-section {
position: relative;
padding: clamp(4.5rem, 8vw, 7.5rem) 0;
background:
radial-gradient(circle at 85% 20%, rgba(201, 168, 106, 0.12), transparent 35%),
linear-gradient(180deg, #0d0806, #140d09 50%, #0a0604);
}

.process-header {
max-width: 820px;
margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
text-align: center;
}

.process-header .section-title {
margin-bottom: 1.15rem;
}

.process-description {
color: var(--muted);
line-height: 1.75;
}

.process-timeline {
position: relative;
max-width: 1240px;
margin: 0 auto;
}

.process-timeline__line {
display: none;
position: absolute;
top: 42px;
left: 5%;
right: 5%;
height: 2px;
background: var(--border-soft);
z-index: 1;
}

.process-timeline__progress {
width: 0%;
height: 100%;
background: linear-gradient(90deg, var(--brass), var(--brass-light));
box-shadow: 0 0 12px var(--brass);
transition: width 1.2s var(--ease);
}

.process-steps {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
position: relative;
z-index: 2;
}

.process-step {
display: flex;
gap: 1.25rem;
padding: 1.5rem;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
background: linear-gradient(145deg, #1d120c, #0e0805);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.6s var(--ease),
transform 0.6s var(--ease),
border-color 0.3s ease;
}

.process-step.is-revealed {
opacity: 1;
transform: translateY(0);
}

.process-step:hover {
border-color: var(--brass);
}

.process-step__marker {
position: relative;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}

.process-step__num {
font-family: var(--serif);
font-size: 1.75rem;
font-weight: 700;
color: var(--brass-light);
line-height: 1;
}

.process-step__icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--border);
background: rgba(22, 14, 10, 0.9);
color: var(--brass-light);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.process-step__body {
display: flex;
flex-direction: column;
gap: 0.45rem;
}

.process-step__title {
color: var(--text);
font-family: var(--serif);
font-size: 1.2rem;
font-weight: 600;
}

.process-step__text {
color: var(--muted);
font-size: 0.86rem;
line-height: 1.65;
}



/* ==========================================================================
Testimonials Section
========================================================================== */

.testimonials-section {
position: relative;
padding: clamp(4.5rem, 8vw, 7.5rem) 0;
overflow: hidden;
background:
radial-gradient(ellipse 60% 40% at 50% 15%, rgba(201, 168, 106, 0.15), transparent 70%),
linear-gradient(180deg, #090503, #150d08 50%, #090503);
}

.testimonials-bg-quote {
position: absolute;
top: 6%;
right: 5%;
width: min(380px, 45vw);
height: min(380px, 45vw);
color: var(--brass);
opacity: 0.06;
pointer-events: none;
z-index: 1;
}

.testimonials-header {
position: relative;
z-index: 2;
max-width: 820px;
margin: 0 auto clamp(2rem, 4vw, 3.5rem);
text-align: center;
}

.testimonials-header .section-title {
margin-bottom: 1.35rem;
}

.testimonials-summary {
display: flex;
justify-content: center;
}

.testimonials-summary__badge {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem 1.25rem;
padding: 0.65rem 1.4rem;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(22, 14, 10, 0.85);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.google-icon {
flex-shrink: 0;
}

.testimonials-summary__score {
display: flex;
align-items: center;
gap: 0.5rem;
}

.testimonials-summary__score strong {
font-family: var(--serif);
font-size: 1.35rem;
color: var(--text);
line-height: 1;
}

.testimonials-stars {
display: inline-flex;
gap: 2px;
color: var(--brass);
}

.testimonials-summary__text {
color: var(--muted);
font-size: 0.78rem;
font-weight: 500;
}

.testimonials-summary__link {
color: var(--brass-light);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: color 0.2s ease;
}

.testimonials-summary__link:hover {
color: var(--text);
}

.testimonials-carousel {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
}

.testimonials-track {
display: flex;
gap: 1.4rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 1.5rem 0.5rem;
scrollbar-width: none;
}

.testimonials-track::-webkit-scrollbar {
display: none;
}

.testimonial-card {
flex: 0 0 calc(100% - 2.5rem);
max-width: 440px;
scroll-snap-align: center;
padding: clamp(1.4rem, 3vw, 2.2rem);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
background: linear-gradient(145deg, #1c110b, #0d0805);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.25rem;
transition:
transform 0.45s var(--ease),
border-color 0.45s ease,
box-shadow 0.45s ease;
}

.testimonial-card__stars {
display: flex;
gap: 3px;
color: var(--brass);
}

.testimonial-card__quote {
color: rgba(249, 246, 240, 0.92);
font-family: var(--serif);
font-size: clamp(0.98rem, 1.15vw, 1.12rem);
font-style: italic;
line-height: 1.65;
}

.testimonial-card__author {
display: flex;
align-items: center;
gap: 0.85rem;
padding-top: 1rem;
border-top: 1px solid var(--border-soft);
}

.testimonial-card__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--brass);
box-shadow: 0 4px 12px rgba(201, 168, 106, 0.3);
}

.testimonial-card__details {
display: flex;
flex-direction: column;
gap: 0.15rem;
}

.testimonial-card__name {
color: var(--text);
font-size: 0.9rem;
font-weight: 700;
}

.testimonial-card__location {
color: var(--muted);
font-size: 0.74rem;
}

.testimonial-card__tag {
color: var(--brass-light);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 0.2rem;
}

.testimonials-controls {
margin-top: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
}

.testimonials-btn {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
background: rgba(22, 14, 10, 0.85);
color: var(--brass-light);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, color 0.2s ease;
}

.testimonials-btn:hover,
.testimonials-btn:focus-visible {
background: var(--brass);
border-color: var(--brass);
color: #0d0806;
transform: scale(1.08);
}

.testimonials-dots {
display: flex;
align-items: center;
gap: 0.5rem;
}

.testimonials-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid var(--brass);
background: transparent;
transition: width 0.3s var(--ease), background 0.3s ease, border-radius 0.3s ease;
}

.testimonials-dot.is-active {
width: 28px;
border-radius: 999px;
background: var(--brass);
}

/* ==========================================================================
Responsive Adaptations for Added Sections
========================================================================== */

@media (min-width: 600px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}

.testimonial-card {
flex: 0 0 calc(50% - 0.7rem);
}
}

@media (min-width: 900px) {
.portfolio-grid {
grid-template-columns: repeat(3, 1fr);
}

.portfolio-item--wide {
grid-column: span 2;
}

.portfolio-item--tall {
grid-row: span 2;
}
}

@media (min-width: 1024px) {
.portfolio-grid {
grid-template-columns: repeat(4, 1fr);
}

.process-timeline__line {
display: block;
}

.process-steps {
grid-template-columns: repeat(5, 1fr);
gap: 1.5rem;
}

.process-step {
flex-direction: column;
text-align: center;
padding: 1.75rem 1.15rem 1.5rem;
}

.process-step__marker {
align-items: center;
margin-bottom: 0.85rem;
}

.testimonial-card {
flex: 0 0 calc(33.333% - 0.95rem);
}

.testimonial-card.is-active {
transform: translateY(-8px) scale(1.02);
border-color: var(--brass);
box-shadow: 0 20px 50px rgba(201, 168, 106, 0.22);
}
}

@media (max-width: 599px) {
.portfolio-header,
.process-header,
.testimonials-header {
text-align: left;
}

.portfolio-filters-wrap {
justify-content: flex-start;
}

.testimonials-summary__badge {
border-radius: var(--radius-small);
justify-content: flex-start;
width: 100%;
}

.portfolio-lightbox__footer {
flex-direction: column;
align-items: stretch;
}

.portfolio-lightbox__cta {
width: 100%;
}

.portfolio-lightbox__nav {
width: 40px;
height: 40px;
}

.portfolio-lightbox__nav--prev {
left: 0.5rem;
}

.portfolio-lightbox__nav--next {
right: 0.5rem;
}
}

/* ==========================================================================
Luxury Polish & Animations (Task 1, 2, 3)
========================================================================== */

/* Film Grain Overlay */
.film-grain {
position: fixed;
inset: 0;
z-index: 40;
pointer-events: none;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Scroll Progress Bar */
.scroll-progress-bar {
position: fixed;
top: 0;
left: 0;
height: 2.5px;
width: 0%;
z-index: 150;
background: linear-gradient(90deg, #c9a86a, #ffe5aa, #c9a86a);
box-shadow: 0 0 10px rgba(226, 196, 133, 0.7);
pointer-events: none;
transition: width 0.08s linear;
}

/* Typography Refinements */
body {
line-height: 1.7;
}

p:not(.brand-logo__sub):not(.mobile-office-card__badge) {
max-width: 70ch;
}

/* Gold Gradient Shimmer on Titles */
@keyframes textShimmer {
0% {
background-position: 0% center;
}
100% {
background-position: 220% center;
}
}

.section-title span,
.hero__headline em {
display: inline-block;
background: linear-gradient(110deg, #c9a86a 0%, #fff2d1 28%, #e2c485 50%, #c9a86a 75%, #a8834a 100%);
background-size: 220% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textShimmer 8s linear infinite;
}

/* --------------------------------------------------------------------------
Task 1: Glowing & Shining Buttons
-------------------------------------------------------------------------- */

@keyframes shineSweep {
0% {
left: -85%;
}
25% {
left: 135%;
}
100% {
left: 135%;
}
}

@keyframes brassGlowPulse {
0%, 100% {
box-shadow: 0 0 16px rgba(201, 168, 106, 0.28), 0 4px 12px rgba(0, 0, 0, 0.35);
}
50% {
box-shadow: 0 0 34px rgba(226, 196, 133, 0.52), 0 8px 24px rgba(201, 168, 106, 0.3);
}
}

@keyframes breathingGlow {
0%, 100% {
box-shadow: 0 0 14px rgba(201, 168, 106, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
50% {
box-shadow: 0 0 32px rgba(226, 196, 133, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
}

/* Primary Brass Buttons */
.primary-button,
.nav-cta,
.form-submit,
.mobile-menu__quote-btn,
.mobile-quote-trigger,
.office-btn--primary,
.portfolio-lightbox__cta {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #f0d89e 0%, #c9a86a 50%, #a8834a 100%);
color: #0d0806;
border: 1px solid var(--brass);
animation: brassGlowPulse 4s ease-in-out infinite;
transition: transform 0.3s var(--ease), box-shadow 0.3s ease, background 0.3s ease;
}

/* Diagonal Shine Sweep */
.primary-button::before,
.nav-cta::before,
.form-submit::before,
.mobile-menu__quote-btn::before,
.mobile-quote-trigger::before,
.office-btn--primary::before,
.portfolio-lightbox__cta::before {
content: "";
position: absolute;
top: -50%;
left: -85%;
width: 45%;
height: 200%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
transform: skewX(-20deg);
pointer-events: none;
animation: shineSweep 4s ease-in-out infinite;
}

.primary-button:hover::before,
.nav-cta:hover::before,
.form-submit:hover::before,
.mobile-menu__quote-btn:hover::before,
.mobile-quote-trigger:hover::before,
.office-btn--primary:hover::before,
.portfolio-lightbox__cta:hover::before {
animation: none;
transform: skewX(-20deg) translateX(360%);
transition: transform 0.6s ease;
}

.primary-button:hover,
.nav-cta:hover,
.form-submit:hover,
.mobile-menu__quote-btn:hover,
.mobile-quote-trigger:hover,
.office-btn--primary:hover,
.portfolio-lightbox__cta:hover {
transform: translateY(-3px);
box-shadow: 0 0 38px rgba(226, 196, 133, 0.65), 0 12px 28px rgba(0, 0, 0, 0.5);
background: linear-gradient(135deg, #f6e4b8 0%, #d4b476 50%, #b28e53 100%);
}

.primary-button:active,
.nav-cta:active,
.form-submit:active,
.mobile-menu__quote-btn:active,
.mobile-quote-trigger:active,
.office-btn--primary:active,
.portfolio-lightbox__cta:active {
transform: scale(0.97);
}

/* Outline Buttons Hover Fill */
.outline-button {
position: relative;
overflow: hidden;
z-index: 1;
border: 1px solid var(--brass);
color: var(--brass-light);
transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.outline-button::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(135deg, rgba(201, 168, 106, 0.24), rgba(226, 196, 133, 0.12));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s var(--ease);
}

.outline-button:hover::before,
.outline-button:focus-visible::before {
transform: scaleX(1);
}

.outline-button:hover,
.outline-button:focus-visible {
border-color: var(--brass-light);
box-shadow: 0 0 24px rgba(201, 168, 106, 0.38);
color: #fff2d1;
transform: translateY(-3px);
}

/* Sticky Bar & Hero Mobile CTA Gentle Breathing */
.mobile-sticky-bar__btn--primary,
.mobile-quote-trigger {
animation: breathingGlow 3s ease-in-out infinite;
}

/* Active Tabs and Carousel Controls Glow */
.ba-tab.is-active {
box-shadow: 0 0 20px rgba(201, 168, 106, 0.45);
}

.testimonials-btn:hover,
.portfolio-lightbox__nav:hover {
box-shadow: 0 0 22px rgba(226, 196, 133, 0.55);
}

/* Button Ripple */
.btn-ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
transform: scale(0);
pointer-events: none;
animation: rippleAnim 0.6s linear forwards;
}

@keyframes rippleAnim {
to {
transform: scale(4);
opacity: 0;
}
}

/* --------------------------------------------------------------------------
Task 2: Cinematic Ken Burns Animation on Service Images
-------------------------------------------------------------------------- */

@keyframes kenBurnsZoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.12);
}
}

.service-card__media {
position: relative;
overflow: hidden;
}

.service-card__media::before {
content: "";
position: absolute;
top: -60%;
left: -80%;
width: 50%;
height: 220%;
background: linear-gradient(90deg, transparent, rgba(226, 196, 133, 0.28), transparent);
transform: skewX(-20deg);
z-index: 2;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}

.service-card:hover .service-card__media::before {
opacity: 1;
animation: shineSweep 1.2s ease forwards;
}

.service-card__image {
will-change: transform;
}

/* Run continuous Ken Burns only when .is-in-view */
.service-card.is-in-view .service-card__image {
animation: kenBurnsZoom 13s ease-in-out infinite alternate;
animation-play-state: running;
}

.service-card:not(.is-in-view) .service-card__image {
animation-play-state: paused;
}

/* Different origins & delays so cards don't animate in sync */
.services-grid article:nth-child(1) .service-card__image {
animation-delay: 0s;
transform-origin: 30% 40%;
}
.services-grid article:nth-child(2) .service-card__image {
animation-delay: 2s;
transform-origin: 70% 60%;
}
.services-grid article:nth-child(3) .service-card__image {
animation-delay: 4s;
transform-origin: 40% 70%;
}
.services-grid article:nth-child(4) .service-card__image {
animation-delay: 1.5s;
transform-origin: 60% 30%;
}
.services-grid article:nth-child(5) .service-card__image {
animation-delay: 3s;
transform-origin: 50% 50%;
}
.services-grid article:nth-child(6) .service-card__image {
animation-delay: 5s;
transform-origin: 35% 65%;
}
.services-grid article:nth-child(7) .service-card__image {
animation-delay: 2.5s;
transform-origin: 65% 35%;
}
.services-grid article:nth-child(8) .service-card__image {
animation-delay: 4.5s;
transform-origin: 50% 30%;
}

/* Desktop Hover Zoom & Lift */
@media (hover: hover) {
.service-card:hover {
transform: translateY(-8px);
border-color: var(--brass);
box-shadow: 0 20px 48px rgba(201, 168, 106, 0.25);
}

.service-card:hover .service-card__image {
animation-play-state: paused;
transform: scale(1.18);
filter: brightness(1.08);
transition: transform 0.6s var(--ease), filter 0.6s ease;
}

.service-card:hover .service-card__link {
transform: translateX(6px);
color: var(--text);
}
}

/* About Images Ken Burns Zoom */
.about-visual.is-in-view .about-image-main img {
animation: kenBurnsZoom 15s ease-in-out infinite alternate;
transform-origin: 45% 45%;
}

.about-visual.is-in-view .about-image-small img {
animation: kenBurnsZoom 14s ease-in-out infinite alternate;
animation-delay: 2s;
transform-origin: 55% 55%;
}

/* --------------------------------------------------------------------------
Task 3: Site-Wide Scroll Reveals
-------------------------------------------------------------------------- */

html.js .reveal-fade {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

html.js .reveal-fade.is-revealed {
opacity: 1;
transform: translateY(0);
}

html.js .reveal-clip {
clip-path: inset(0 100% 0 0);
transition: clip-path 0.9s var(--ease);
}

html.js .reveal-clip.is-revealed {
clip-path: inset(0 0 0 0);
}

/* Reduced Motion Safeguard */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition-duration: 0.01ms !important;
}

.primary-button,
.nav-cta,
.form-submit,
.mobile-menu__quote-btn,
.mobile-quote-trigger,
.mobile-sticky-bar__btn--primary,
.service-card__image,
.about-image-main img,
.about-image-small img,
.section-title span,
.hero__headline em {
animation: none !important;
transform: none !important;
}

html.js .reveal-fade {
opacity: 1 !important;
transform: none !important;
}

html.js .reveal-clip {
clip-path: none !important;
}
}

/* ===== DESKTOP FLOATING DOCK ===== */

.desk-dock {
display: none;
}

@media (min-width: 1024px) {
.desk-dock {
position: fixed;
left: 24px;
bottom: 28px;
z-index: 90;
display: flex;
flex-direction: column;
gap: 14px;
}

.desk-dock__btn {
position: relative;
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(201, 168, 106, 0.45);
border-radius: 50%;
background: linear-gradient(145deg, #24160f 0%, #0d0806 100%);
color: var(--brass-light);
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.58),
inset 0 1px 0 rgba(240, 216, 158, 0.22);
cursor: pointer;
text-decoration: none;
appearance: none;
-webkit-appearance: none;
outline: none;
transition:
transform 0.35s var(--ease),
background 0.35s var(--ease),
color 0.35s var(--ease),
border-color 0.35s ease,
box-shadow 0.35s var(--ease);
}

.desk-dock__btn svg {
flex-shrink: 0;
transition: color 0.35s var(--ease), transform 0.3s ease;
}

.desk-dock__btn:hover,
.desk-dock__btn:focus-visible {
transform: translateY(-3px);
background: linear-gradient(135deg, #f0d89e 0%, #c9a86a 50%, #a8834a 100%);
color: #0d0806;
border-color: var(--brass-light);
box-shadow:
0 0 24px rgba(226, 196, 133, 0.5),
0 12px 28px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.desk-dock__btn:focus-visible {
outline: 2px solid var(--brass-light);
outline-offset: 4px;
}

.desk-dock__btn:active {
transform: translateY(-1px) scale(0.97);
}

/* WhatsApp specific styling & pulse */
.desk-dock__btn--wa {
color: #25d366;
border-color: rgba(37, 211, 102, 0.42);
}

.desk-dock__btn--wa::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1.5px solid rgba(37, 211, 102, 0.65);
pointer-events: none;
animation: waDockPulse 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

@keyframes waDockPulse {
0% {
transform: scale(0.95);
opacity: 0.95;
}
65% {
transform: scale(1.45);
opacity: 0;
}
100% {
transform: scale(1.45);
opacity: 0;
}
}

.desk-dock__btn--wa:hover,
.desk-dock__btn--wa:focus-visible {
color: #0d0806;
border-color: var(--brass-light);
}

.desk-dock__btn--wa:hover::before,
.desk-dock__btn--wa:focus-visible::before {
border-color: rgba(226, 196, 133, 0.65);
}

/* Tooltip Labels */
.desk-dock__label {
position: absolute;
left: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(-8px);
opacity: 0;
visibility: hidden;
pointer-events: none;
white-space: nowrap;
padding: 0.45rem 1rem;
border-radius: 999px;
background: rgba(18, 11, 7, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(201, 168, 106, 0.45);
color: var(--text);
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.3;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
transition:
opacity 0.3s ease,
transform 0.35s var(--ease),
visibility 0.3s ease;
}

.desk-dock__btn:hover .desk-dock__label,
.desk-dock__btn:focus-visible .desk-dock__label {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
}
}

@media (prefers-reduced-motion: reduce) {
.desk-dock__btn,
.desk-dock__label,
.desk-dock__btn--wa::before {
animation: none !important;
transition: none !important;
}
}

/* ===== GALLERY + LIGHTBOX ===== */

.gallery {
position: relative;
padding: clamp(4.5rem, 8vw, 7.5rem) 0;
background:
radial-gradient(circle at 18% 12%, rgba(201, 168, 106, 0.12), transparent 32%),
radial-gradient(circle at 82% 88%, rgba(168, 112, 68, 0.1), transparent 36%),
linear-gradient(180deg, #0a0604, #130c08 50%, #0d0806);
}

.gallery__header {
max-width: 840px;
margin: 0 auto clamp(2rem, 4vw, 3.5rem);
text-align: center;
}

.gallery__header .section-eyebrow {
margin-bottom: 1rem;
}

.gallery__title {
margin-bottom: 1.15rem;
color: var(--text);
font-family: var(--serif);
font-size: clamp(2.1rem, 4.5vw, 4rem);
font-weight: 600;
line-height: 1.08;
}

.gallery__title em {
font-style: italic;
display: inline-block;
background: linear-gradient(110deg, #c9a86a 0%, #fff2d1 28%, #e2c485 50%, #c9a86a 75%, #a8834a 100%);
background-size: 220% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textShimmer 8s linear infinite;
}

.gallery__intro {
color: var(--muted);
line-height: 1.75;
font-size: clamp(0.92rem, 1.05vw, 1.02rem);
margin-inline: auto;
max-width: 68ch;
}

.gallery__filters {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 auto clamp(2rem, 4.5vw, 3.25rem);
padding: 0.4rem 0.5rem;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
justify-content: flex-start;
}

.gallery__filters::-webkit-scrollbar {
display: none;
}

@media (min-width: 768px) {
.gallery__filters {
justify-content: center;
flex-wrap: wrap;
}
}

.gallery__filter {
flex-shrink: 0;
min-height: 42px;
padding: 0.5rem 1.25rem;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(22, 14, 10, 0.82);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--text);
font-family: var(--sans);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.25s ease;
}

.gallery__filter:hover {
border-color: var(--brass-light);
color: #fff2d1;
transform: translateY(-2px);
}

.gallery__filter.is-active,
.gallery__filter[aria-selected="true"] {
border-color: var(--brass);
background: linear-gradient(135deg, var(--brass-light) 0%, var(--brass) 100%);
color: #0d0806;
box-shadow: 0 4px 18px rgba(201, 168, 106, 0.35);
transform: translateY(-2px);
}

.gallery__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1rem, 2vw, 1.25rem);
grid-auto-flow: dense;
}

@media (min-width: 600px) {
.gallery__grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 1024px) {
.gallery__grid {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 260px;
}

.gallery__item--wide {
grid-column: span 2;
}

.gallery__item--tall {
grid-row: span 2;
}
}

.gallery__item {
position: relative;
margin: 0;
border-radius: 14px;
overflow: hidden;
background: #140d09;
border: 1px solid var(--border-soft);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
animation: galleryItemFadeIn 0.45s var(--ease) forwards;
transition:
border-color 0.4s ease,
box-shadow 0.4s ease,
transform 0.4s var(--ease);
}

@keyframes galleryItemFadeIn {
from {
opacity: 0;
transform: scale(0.97) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

.gallery__item.is-hidden {
display: none !important;
}

.gallery__open {
position: relative;
display: block;
width: 100%;
height: 100%;
min-height: 280px;
padding: 0;
margin: 0;
border: 0;
background: none;
cursor: zoom-in;
overflow: hidden;
text-align: left;
}

@media (min-width: 1024px) {
.gallery__open {
min-height: 100%;
}
}

.gallery__open:focus-visible {
outline: 2px solid var(--brass);
outline-offset: -2px;
}

.gallery__open img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s var(--ease), filter 0.6s ease;
}

.gallery__open::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(13, 8, 6, 0) 35%,
rgba(13, 8, 6, 0.5) 65%,
rgba(13, 8, 6, 0.95) 100%
);
pointer-events: none;
transition: opacity 0.4s ease;
}

.gallery__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
padding: 1.25rem 1.4rem;
pointer-events: none;
display: flex;
flex-direction: column;
gap: 0.3rem;
transition: transform 0.4s var(--ease), opacity 0.4s ease;
}

.gallery__tag {
font-family: var(--sans);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brass-light);
}

.gallery__name {
font-family: var(--serif);
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
font-weight: 600;
line-height: 1.25;
color: var(--text);
}





/* Hover behavior for desktop/pointer */
@media (hover: hover) and (min-width: 1024px) {
.gallery__item::before {
content: "";
position: absolute;
inset: 0;
z-index: 4;
border-radius: 14px;
border: 1px solid transparent;
pointer-events: none;
transition: border-color 0.4s ease;
}

.gallery__open::after {
opacity: 0.7;
}

.gallery__caption {
opacity: 0;
transform: translateY(12px);
}

.gallery__item:hover,
.gallery__item:focus-within {
border-color: var(--brass);
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65);
transform: translateY(-4px);
}

.gallery__item:hover::before,
.gallery__item:focus-within::before {
border-color: rgba(226, 196, 133, 0.5);
}

.gallery__item:hover .gallery__open img,
.gallery__item:focus-within .gallery__open img {
transform: scale(1.08);
}

.gallery__item:hover .gallery__open::after,
.gallery__item:focus-within .gallery__open::after {
opacity: 0.98;
}

.gallery__item:hover .gallery__caption,
.gallery__item:focus-within .gallery__caption {
opacity: 1;
transform: translateY(0);
}
}

/* Touch / Mobile: Caption always visible */
@media (hover: none), (max-width: 1023px) {
.gallery__caption {
opacity: 1;
transform: translateY(0);
}

.gallery__open::after {
opacity: 0.92;
}
}

/* Gallery Call To Action */
.gallery__cta {
margin-top: clamp(2.5rem, 5vw, 4rem);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.15rem;
}

.gallery__cta-text {
color: var(--muted);
font-size: clamp(0.9rem, 1.1vw, 1.05rem);
margin: 0;
}

/* Lightbox Modal */
body.lightbox-open {
overflow: hidden !important;
}

.lightbox {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 3vw, 2.5rem);
background: rgba(10, 6, 4, 0.95);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
animation: lightboxFadeIn 0.3s ease forwards;
}

.lightbox[hidden] {
display: none !important;
}

@keyframes lightboxFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.lightbox__figure {
position: relative;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 90vw;
max-height: 80vh;
}

.lightbox__img {
display: block;
max-width: 90vw;
max-height: 70vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 12px;
border: 1px solid var(--border);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.85);
animation: lightboxImgScale 0.35s var(--ease) forwards;
}

@keyframes lightboxImgScale {
from {
transform: scale(0.95);
opacity: 0.8;
}
to {
transform: scale(1);
opacity: 1;
}
}

.lightbox__caption {
margin-top: 1rem;
color: var(--text);
font-family: var(--serif);
font-size: clamp(1rem, 1.6vw, 1.25rem);
font-weight: 500;
text-align: center;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.lightbox__count {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
color: var(--brass-light);
font-family: var(--sans);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.3rem 0.9rem;
border-radius: 999px;
background: rgba(22, 14, 10, 0.85);
border: 1px solid var(--border-soft);
pointer-events: none;
}

/* Lightbox Controls */
.lightbox__close,
.lightbox__prev,
.lightbox__next {
position: absolute;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid var(--border);
background: rgba(22, 14, 10, 0.85);
color: var(--brass-light);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 310;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
transition:
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__prev:hover,
.lightbox__prev:focus-visible,
.lightbox__next:hover,
.lightbox__next:focus-visible {
background: var(--brass);
border-color: var(--brass);
color: #0d0806;
box-shadow: 0 0 22px rgba(201, 168, 106, 0.55);
transform: scale(1.08);
outline: none;
}

.lightbox__close {
top: 1.5rem;
right: 1.5rem;
}

.lightbox__prev {
left: 1.5rem;
top: 50%;
transform: translateY(-50%);
}

.lightbox__prev:hover,
.lightbox__prev:focus-visible {
transform: translateY(-50%) scale(1.08);
}

.lightbox__next {
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
}

.lightbox__next:hover,
.lightbox__next:focus-visible {
transform: translateY(-50%) scale(1.08);
}

/* Mobile Lightbox Controls */
@media (max-width: 767px) {
.lightbox__close {
top: 1rem;
right: 1rem;
width: 44px;
height: 44px;
}

.lightbox__prev,
.lightbox__next {
top: auto;
bottom: 1.25rem;
transform: none;
width: 46px;
height: 46px;
}

.lightbox__prev {
left: 1.25rem;
}

.lightbox__next {
right: 1.25rem;
}

.lightbox__prev:hover,
.lightbox__prev:focus-visible,
.lightbox__next:hover,
.lightbox__next:focus-visible {
transform: scale(1.06);
}

.lightbox__count {
bottom: 1.6rem;
font-size: 0.7rem;
padding: 0.25rem 0.65rem;
}
}

@media (prefers-reduced-motion: reduce) {
.gallery__item,
.gallery__open img,
.gallery__caption,
.gallery__item::before,
.lightbox,
.lightbox__img,
.gallery__title em {
animation: none !important;
transition: none !important;
transform: none !important;
}

.gallery__caption {
opacity: 1 !important;
}
}

/* ===== GALLERY – IMAGE ONLY (no text) ===== */

.gallery__caption {
display: none !important;
}

.gallery__open::after,
.gallery__item::before {
display: none !important;
content: none !important;
background: none !important;
opacity: 0 !important;
}

.gallery__item {
border-radius: 14px;
overflow: hidden;
transition:
border-color 0.4s ease,
box-shadow 0.4s ease,
transform 0.4s var(--ease);
}

.gallery__open {
cursor: zoom-in;
}

.gallery__open:focus-visible {
outline: 2px solid var(--brass);
outline-offset: -2px;
}

.gallery__open img {
transition: transform 1s var(--ease);
}

@media (hover: hover) {
.gallery__item:hover,
.gallery__item:focus-within {
border-color: var(--brass);
box-shadow:
inset 0 0 0 1px rgba(226, 196, 133, 0.45),
0 20px 45px rgba(0, 0, 0, 0.65);
transform: translateY(-4px);
}

.gallery__item:hover .gallery__open img,
.gallery__item:focus-within .gallery__open img {
transform: scale(1.06);
}
}

.lightbox__caption {
display: none !important;
}

@media (prefers-reduced-motion: reduce) {
.gallery__item:hover,
.gallery__item:focus-within,
.gallery__item:hover .gallery__open img,
.gallery__item:focus-within .gallery__open img {
transform: none !important;
}
}

/* ===== v9: LCP FIX + COST CALCULATOR ===== */

/* Metric-adjusted local fallbacks: no additional font downloads.
   Values target the common Google Fonts builds. Recheck when font files change.
   size-adjust is accounted for in the ascent/descent overrides. */

@font-face {
font-family: "Ashoka Playfair Fallback";
src: local("Georgia");
font-style: normal;
font-weight: 400 500;
size-adjust: 106.76%;
ascent-override: 101.35%;
descent-override: 23.51%;
line-gap-override: 0%;
}

@font-face {
font-family: "Ashoka Playfair Fallback";
src: local("Georgia Bold"), local("Georgia-Bold");
font-style: normal;
font-weight: 600 900;
size-adjust: 106.76%;
ascent-override: 101.35%;
descent-override: 23.51%;
line-gap-override: 0%;
}

@font-face {
font-family: "Ashoka Playfair Fallback";
src: local("Georgia Italic"), local("Georgia-Italic");
font-style: italic;
font-weight: 400 500;
size-adjust: 106.76%;
ascent-override: 101.35%;
descent-override: 23.51%;
line-gap-override: 0%;
}

@font-face {
font-family: "Ashoka Playfair Fallback";
src: local("Georgia Bold Italic"), local("Georgia-BoldItalic");
font-style: italic;
font-weight: 600 900;
size-adjust: 106.76%;
ascent-override: 101.35%;
descent-override: 23.51%;
line-gap-override: 0%;
}

@font-face {
font-family: "Ashoka Jakarta Fallback";
src: local("Arial"), local("ArialMT");
font-style: normal;
font-weight: 200 500;
size-adjust: 103.36%;
ascent-override: 100.43%;
descent-override: 21.48%;
line-gap-override: 0%;
}

@font-face {
font-family: "Ashoka Jakarta Fallback";
src: local("Arial Bold"), local("Arial-BoldMT");
font-style: normal;
font-weight: 600 800;
size-adjust: 103.36%;
ascent-override: 100.43%;
descent-override: 21.48%;
line-gap-override: 0%;
}

@font-face {
font-family: "Ashoka Jakarta Fallback";
src: local("Arial Italic"), local("Arial-ItalicMT");
font-style: italic;
font-weight: 200 500;
size-adjust: 103.36%;
ascent-override: 100.43%;
descent-override: 21.48%;
line-gap-override: 0%;
}

@font-face {
font-family: "Ashoka Jakarta Fallback";
src: local("Arial Bold Italic"), local("Arial-BoldItalicMT");
font-style: italic;
font-weight: 600 800;
size-adjust: 103.36%;
ascent-override: 100.43%;
descent-override: 21.48%;
line-gap-override: 0%;
}

:root {
--serif: "Playfair Display", "Ashoka Playfair Fallback", Georgia, "Times New Roman", serif;
--sans: "Plus Jakarta Sans", "Ashoka Jakarta Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* LCP: never gate the hero or slider behind JS reveal/switching states.
   Do not reset every hero descendant: the quote modal must remain closed,
   and the slider handle and decorative lights retain their positioning. */

html .hero,
html .hero__grid,
html .transformation-showcase,
html .ba-slider,
html .ba-slider.is-switching,
html .ba-slider__img,
html #afterImg,
html.js .hero:is(.reveal-fade, .reveal-clip),
html.js .hero :is(.reveal-fade, .reveal-clip),
html.js :is(.hero__grid, .transformation-showcase, .ba-slider, .ba-slider__img):is(.reveal-fade, .reveal-clip),
html.js :is(.reveal-fade, .reveal-clip):has(.hero),
html.js :is(.reveal-fade, .reveal-clip):has(.ba-slider) {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
translate: none !important;
rotate: none !important;
scale: none !important;
animation: none !important;
transition: none !important;
clip-path: none !important;
content-visibility: visible !important;
}

/* Images are present immediately; the before wrapper alone owns the split. */

html .ba-slider__img,
html #afterImg {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
animation: none !important;
transition: none !important;
transform: none !important;
clip-path: none !important;
}

/* CSS supplies the initial 50/50 split; JS may still update --slider-pos.
   No !important on the variable, so dragging is not frozen at 50%. */

.ba-slider {
--slider-pos: 50%;
}

html .ba-slider .ba-slider__before-wrap {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
animation: none !important;
transition: none !important;
clip-path: inset(0 calc(100% - var(--slider-pos, 50%)) 0 0) !important;
}

.ba-handle {
left: var(--slider-pos, 50%);
}

/* Keep headline accents readable without a shimmer/paint dependency. */

html .hero__headline em {
color: var(--brass);
font-style: italic;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: currentColor;
animation: none !important;
transition: none !important;
}

/* Cost calculator: section rhythm and typography. */

.calc {
--calc-gap: clamp(1.25rem, 2.5vw, 2rem);
--calc-padding: clamp(22px, 2.5vw, 28px);
position: relative;
padding-block: clamp(4.5rem, 8vw, 7.5rem);
color: var(--text);
font-family: var(--sans);
color-scheme: dark;
background:
radial-gradient(circle at 85% 8%, rgba(201, 168, 106, 0.14), transparent 32%),
radial-gradient(circle at 10% 90%, rgba(168, 112, 68, 0.08), transparent 35%),
linear-gradient(180deg, #0d0806, #140d09 50%, #0a0604);
}

.calc,
.calc * {
min-width: 0;
}

.calc :is(.calc__title, .calc__intro) {
margin-inline: auto;
text-align: center;
}

.calc__title {
max-width: 22ch;
margin-bottom: 1.15rem;
color: var(--text);
font-family: var(--serif);
font-size: clamp(2.1rem, 4.5vw, 4rem);
font-weight: 600;
line-height: 1.08;
text-wrap: balance;
overflow-wrap: break-word;
}

.calc__title em {
color: var(--brass);
font-style: italic;
}

.calc .calc__intro {
max-width: 68ch;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
color: var(--muted);
font-size: clamp(0.92rem, 1.05vw, 1rem);
line-height: 1.75;
text-wrap: pretty;
}

.calc__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: var(--calc-gap);
}

.calc__form {
display: grid;
gap: 1.25rem;
margin: 0;
}

.calc__step {
position: relative;
width: 100%;
margin: 0;
padding: var(--calc-padding);
border: 1px solid var(--border);
border-radius: var(--radius);
background:
linear-gradient(145deg, rgba(39, 25, 17, 0.9), rgba(16, 10, 7, 0.94));
box-shadow:
inset 0 1px 0 rgba(249, 246, 240, 0.035),
0 16px 38px rgba(0, 0, 0, 0.24);
}

/* Blur only when supported; opaque gradients remain the base fallback. */

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.calc__step {
background: linear-gradient(145deg, rgba(39, 25, 17, 0.78), rgba(16, 10, 7, 0.88));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
}

.calc__legend {
max-width: 100%;
margin-bottom: 1rem;
padding-inline: 0.35rem;
color: var(--text);
font-family: var(--sans);
font-size: clamp(0.95rem, 1.2vw, 1.08rem);
font-weight: 600;
line-height: 1.5;
overflow-wrap: anywhere;
}

/* Also supports a heading used instead of a fieldset legend. */

.calc__legend:not(legend) {
display: flex;
align-items: baseline;
gap: 0.65rem;
padding-inline: 0;
}

.calc__num {
display: inline-block;
margin-inline-end: 0.55rem;
color: var(--brass-light);
font-family: var(--serif);
font-size: 1.75rem;
font-weight: 600;
line-height: 1;
font-variant-numeric: lining-nums tabular-nums;
}

.calc__hint {
display: block;
margin-block: 0.6rem 1rem;
color: var(--muted);
font-size: 0.78rem;
font-weight: 400;
line-height: 1.65;
}

.calc__hint:last-child {
margin-bottom: 0;
}

/* Accessible native controls: visually hidden, still focusable.
   Supports both label > input and input + label structures. */

.calc input:is([type="radio"], [type="checkbox"]) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
}

/* Label shells; no display:none on any interactive input. */

.calc :is(.calc__pill, .calc__check, .calc__card):not(input) {
position: relative;
isolation: isolate;
max-width: 100%;
min-height: 48px;
border: 1px solid rgba(201, 168, 106, 0.28);
background:
linear-gradient(135deg, rgba(35, 23, 16, 0.96), rgba(13, 8, 6, 0.98));
color: var(--muted);
font-family: var(--sans);
font-size: 0.85rem;
font-weight: 600;
line-height: 1.5;
cursor: pointer;
touch-action: manipulation;
overflow-wrap: anywhere;
transition:
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}

.calc .calc__pill:not(input) {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0 0.45rem 0.6rem 0;
padding: 0.7rem 2.65rem 0.7rem 1rem;
border-radius: 999px;
vertical-align: top;
}

.calc .calc__check:not(input) {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.65rem;
padding: 0.8rem 2.75rem 0.8rem 1rem;
border-radius: 10px;
}

.calc .calc__card:not(input) {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.4rem;
margin-bottom: 0.75rem;
padding: 1.25rem 2.6rem 1.25rem 1rem;
border-radius: 12px;
}

.calc__card :is(strong, b) {
color: var(--text);
font-family: var(--serif);
font-size: 1.15rem;
font-weight: 600;
line-height: 1.3;
}

.calc__card :is(small, .calc__hint) {
margin: 0;
color: var(--muted);
font-size: 0.76rem;
font-weight: 400;
line-height: 1.6;
}

/* CSS check marker: an actual drawn tick rather than a font glyph. */

.calc :is(.calc__pill, .calc__check, .calc__card):not(input)::after {
content: "";
position: absolute;
top: 50%;
right: 1rem;
width: 7px;
height: 12px;
border: solid var(--brass-light);
border-width: 0 2px 2px 0;
opacity: 0;
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}

.calc .calc__card:not(input)::after {
top: 1.3rem;
transform: rotate(45deg);
}

/* Gradient border + walnut fill + restrained gold halo. */

.calc :is(.calc__pill, .calc__check, .calc__card):has(input:checked),
.calc input:checked + :is(.calc__pill, .calc__check, .calc__card) {
border-color: transparent;
background:
linear-gradient(135deg, #2c1e13, #160e09) padding-box,
linear-gradient(135deg, #efd89d, #c9a86a 48%, #8e6b37) border-box;
color: var(--text);
box-shadow:
inset 0 0 20px rgba(201, 168, 106, 0.055),
0 0 0 1px rgba(201, 168, 106, 0.12),
0 6px 20px rgba(201, 168, 106, 0.12);
}

.calc :is(.calc__pill, .calc__check, .calc__card):has(input:checked)::after,
.calc input:checked + :is(.calc__pill, .calc__check, .calc__card)::after {
opacity: 1;
}

.calc :is(.calc__pill, .calc__check, .calc__card):has(input:focus-visible),
.calc input:focus-visible + :is(.calc__pill, .calc__check, .calc__card),
.calc :is(.calc__pill, .calc__check, .calc__card):focus-visible {
outline: 2px solid var(--brass-light);
outline-offset: 4px;
}

/* A nested label still receives the full available tap target. */

.calc :is(.calc__pill, .calc__check, .calc__card) > label {
display: block;
width: 100%;
cursor: inherit;
}

.calc :is(.calc__pill, .calc__check, .calc__card):has(input:disabled),
.calc input:disabled + :is(.calc__pill, .calc__check, .calc__card) {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
}

@media (hover: hover) {
.calc :is(.calc__pill, .calc__check, .calc__card):not(input):hover {
border-color: var(--brass);
color: var(--text);
}

.calc :is(.calc__pill, .calc__check, .calc__card):has(input:disabled):hover,
.calc input:disabled + :is(.calc__pill, .calc__check, .calc__card):hover {
border-color: var(--border);
}
}

/* Finish options: handles a dedicated wrapper or direct fieldset children.
   Other step contents remain full width. */

.calc__step:has(> .calc__card),
.calc__step > :not(.calc__card):has(> .calc__card) {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}

.calc__step:has(> .calc__card) > :not(.calc__card):not(input) {
grid-column: 1 / -1;
}

.calc__step:has(> .calc__card) > .calc__card,
.calc__step > :not(.calc__card):has(> .calc__card) > .calc__card {
height: 100%;
margin: 0;
}

/* Area input: explicit 16px text avoids mobile focus zoom. */

.calc #calcArea {
display: block;
width: 100%;
max-width: 100%;
min-height: 48px;
margin-block: 0.75rem;
padding: 0.7rem 0.9rem;
border: 1px solid rgba(201, 168, 106, 0.32);
border-radius: var(--radius-small);
background: var(--input);
color: var(--text);
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
font-variant-numeric: lining-nums tabular-nums;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.calc #calcArea:focus-visible {
outline: 2px solid var(--brass-light);
outline-offset: 3px;
border-color: var(--brass);
box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.12);
}

.calc #calcArea[aria-invalid="true"] {
border-color: var(--error);
}

/* The range itself has a 44px hit area; the visible track remains slim.
   A static brass track requires no JS-driven progress custom property. */

.calc #calcAreaRange {
display: block;
appearance: none;
-webkit-appearance: none;
width: 100%;
max-width: 100%;
height: 44px;
min-height: 44px;
margin-block: 0.5rem;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
cursor: pointer;
accent-color: var(--brass);
touch-action: pan-y;
}

.calc #calcAreaRange::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
border: 1px solid rgba(226, 196, 133, 0.22);
border-radius: 999px;
background: linear-gradient(90deg, #806039, #c9a86a 55%, #e2c485);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.calc #calcAreaRange::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 26px;
height: 26px;
margin-top: -11px;
border: 2px solid #f0d89e;
border-radius: 50%;
background: linear-gradient(135deg, #efd89d, #c9a86a 60%, #a8834a);
box-shadow:
0 0 0 5px rgba(201, 168, 106, 0.12),
0 3px 10px rgba(0, 0, 0, 0.45);
cursor: grab;
}

.calc #calcAreaRange::-moz-range-track {
width: 100%;
height: 6px;
border: 1px solid rgba(226, 196, 133, 0.22);
border-radius: 999px;
background: linear-gradient(90deg, #806039, #c9a86a 55%, #e2c485);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.calc #calcAreaRange::-moz-range-progress {
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, #a8834a, #e2c485);
}

.calc #calcAreaRange::-moz-range-thumb {
width: 22px;
height: 22px;
border: 2px solid #f0d89e;
border-radius: 50%;
background: linear-gradient(135deg, #efd89d, #c9a86a 60%, #a8834a);
box-shadow:
0 0 0 5px rgba(201, 168, 106, 0.12),
0 3px 10px rgba(0, 0, 0, 0.45);
cursor: grab;
}

.calc #calcAreaRange:focus-visible {
outline: 2px solid var(--brass-light);
outline-offset: 4px;
}

.calc #calcAreaRange:active::-webkit-slider-thumb {
cursor: grabbing;
}

.calc #calcAreaRange:active::-moz-range-thumb {
cursor: grabbing;
}

.calc #calcAreaRange:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* Result: naturally follows the form on mobile; sticky on desktop. */

.calc__result {
position: relative;
align-self: start;
width: 100%;
max-width: 100%;
padding: var(--calc-padding);
border: 1px solid rgba(201, 168, 106, 0.55);
border-radius: var(--radius);
background:
radial-gradient(ellipse at 100% 0, rgba(201, 168, 106, 0.14), transparent 60%),
linear-gradient(145deg, #27190f, #110a07 55%, #0b0705);
box-shadow:
inset 0 1px 0 rgba(240, 216, 158, 0.14),
inset 0 0 42px rgba(201, 168, 106, 0.045),
0 24px 55px rgba(0, 0, 0, 0.4);
}

.calc__result-label {
display: block;
margin-bottom: 0.65rem;
color: var(--muted);
font-size: 0.7rem;
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.13em;
text-transform: uppercase;
}

.calc__total {
display: block;
min-height: 1.25em;
margin-block: 0 0.5rem;
color: var(--brass-light);
font-family: var(--serif);
font-size: clamp(2.4rem, 3.8vw, 3rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.025em;
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "lnum" 1, "tnum" 1;
overflow-wrap: anywhere;
}

/* Stable figures and reserved line height avoid a fade on every update. */

.calc__total :is(span, output),
.calc__persqft,
.calc__breakdown {
font-variant-numeric: lining-nums tabular-nums;
}

.calc__persqft {
display: block;
margin-bottom: 1.5rem;
color: var(--muted);
font-size: 0.85rem;
line-height: 1.6;
overflow-wrap: anywhere;
}

.calc__breakdown {
width: 100%;
margin-block: 1.25rem 1.5rem;
padding: 0;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 0.82rem;
line-height: 1.6;
list-style: none;
}

.calc__breakdown > :is(div, li),
.calc__breakdown tbody > tr {
border-bottom: 1px solid var(--border-soft);
}

.calc__breakdown > :is(div, li) {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding-block: 0.8rem;
}

.calc__breakdown > :is(div, li) > :first-child {
flex: 1 1 auto;
overflow-wrap: anywhere;
}

.calc__breakdown > :is(div, li) > :last-child {
flex: 0 1 auto;
margin: 0;
color: var(--text);
font-weight: 600;
text-align: right;
overflow-wrap: anywhere;
}

.calc__breakdown dt,
.calc__breakdown dd {
margin: 0;
}

dl.calc__breakdown {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, auto);
column-gap: 0.75rem;
}

dl.calc__breakdown > :is(dt, dd) {
padding-block: 0.8rem;
border-bottom: 1px solid var(--border-soft);
overflow-wrap: anywhere;
}

dl.calc__breakdown > dd {
color: var(--text);
font-weight: 600;
text-align: right;
}

dl.calc__breakdown > div {
grid-column: 1 / -1;
}

table.calc__breakdown {
border-collapse: collapse;
table-layout: fixed;
}

.calc__breakdown :is(th, td) {
padding-block: 0.8rem;
font-weight: 400;
text-align: left;
vertical-align: top;
overflow-wrap: anywhere;
}

.calc__breakdown :is(th, td):last-child {
padding-left: 0.75rem;
color: var(--text);
font-weight: 600;
text-align: right;
}

.calc__timeline {
display: block;
margin-block: 0 1.25rem;
padding: 0.85rem 1rem;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(201, 168, 106, 0.065);
color: var(--brass-light);
font-size: 0.82rem;
font-weight: 500;
line-height: 1.65;
overflow-wrap: anywhere;
}

/* Full-width stacked actions. Shared existing button animations are disabled
   only inside the calculator result, preventing constant glow repaints. */

.calc__result :is(.primary-button, .outline-button, .calc__wa, button[type="submit"]) {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
min-height: 50px;
padding: 0.85rem 1rem;
margin: 0;
border: 1px solid var(--brass);
border-radius: var(--radius-small);
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
white-space: normal;
overflow-wrap: anywhere;
animation: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}

.calc__result :is(.primary-button, .outline-button, .calc__wa, button[type="submit"])::before {
content: none;
animation: none;
}

.calc__result :is(.primary-button, button[type="submit"]) {
background: linear-gradient(135deg, #efd89d, #c9a86a 58%, #af8c51);
color: #0d0806;
box-shadow: 0 8px 22px rgba(201, 168, 106, 0.13);
}

.calc__result .outline-button {
background: rgba(13, 8, 6, 0.65);
color: var(--brass-light);
}

.calc .calc__wa {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
min-height: 50px;
padding: 0.85rem 1rem;
border: 1px solid rgba(201, 168, 106, 0.55);
border-radius: var(--radius-small);
background: linear-gradient(135deg, #322216, #1b120c);
color: var(--brass-light);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.5;
text-align: center;
text-transform: uppercase;
white-space: normal;
overflow-wrap: anywhere;
}

.calc__wa svg {
flex: 0 0 auto;
width: 20px;
height: 20px;
color: #25d366;
}

/* Handles adjacent actions, action wrappers, and individual action rows. */

.calc__result :is(.primary-button, .outline-button, .calc__wa, button[type="submit"])
+ :is(.primary-button, .outline-button, .calc__wa, button[type="submit"]) {
margin-top: 12px;
}

.calc__result > :has(> :is(.primary-button, .outline-button, .calc__wa, button[type="submit"])) {
display: flex;
flex-direction: column;
gap: 12px;
}

.calc__result > :has(> :is(.primary-button, .outline-button, .calc__wa, button[type="submit"]))
:where(.primary-button, .outline-button, .calc__wa, button[type="submit"]) {
margin: 0;
}

.calc__result > :has(> :is(.primary-button, .outline-button, .calc__wa, button[type="submit"]))
+ :has(> :is(.primary-button, .outline-button, .calc__wa, button[type="submit"])) {
margin-top: 12px;
}

.calc__result :is(.primary-button, .outline-button, .calc__wa, button[type="submit"]):focus-visible {
outline: 2px solid var(--brass-light);
outline-offset: 4px;
}

@media (hover: hover) {
.calc__result :is(.primary-button, .outline-button, .calc__wa, button[type="submit"]):hover {
transform: none;
border-color: var(--brass-light);
box-shadow: 0 0 22px rgba(201, 168, 106, 0.18);
}
}

.calc__note {
display: block;
margin-top: 1rem;
color: var(--muted);
font-size: 0.73rem;
font-weight: 400;
line-height: 1.75;
overflow-wrap: anywhere;
}

.calc__note a {
color: var(--brass-light);
text-decoration: underline;
text-underline-offset: 3px;
}

/* Responsive layout. */

@media (min-width: 768px) {
.calc__step:has(> .calc__card),
.calc__step > :not(.calc__card):has(> .calc__card) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calc .calc__card:not(input) {
min-height: 132px;
}
}

@media (min-width: 1024px) {
.calc__layout {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.calc__result {
position: sticky;
top: calc(var(--header, 5.25rem) + 24px);
}
}

/* At 320px, allow labels and totals to wrap rather than widening the grid.
   No section overflow clipping: keyboard focus rings remain visible. */

@media (max-width: 374px) {
.calc .calc__pill:not(input) {
margin-right: 0.25rem;
padding-left: 0.8rem;
font-size: 0.8rem;
}

.calc__legend {
font-size: 0.9rem;
}

.calc__breakdown > :is(div, li) {
flex-wrap: wrap;
row-gap: 0.25rem;
}

.calc__breakdown > :is(div, li) > :last-child {
margin-left: auto;
}

.calc__result :is(.primary-button, .outline-button, .calc__wa, button[type="submit"]) {
padding-inline: 0.65rem;
letter-spacing: 0.025em;
}
}

/* Reduced motion: fully disabled, not merely shortened. */

@media (prefers-reduced-motion: reduce) {
.calc,
.calc *,
.calc *::before,
.calc *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}