@import "https://unpkg.com/open-props";

:root {

  /* ── TYPE SCALE ── */
  --text-xs:    clamp(0.75rem, 1.5vw, 0.875rem);  /* Labels, tags, fine print */
  --text-sm:    clamp(0.875rem, 1.8vw, 1rem);      /* Captions, secondary body */
  --text-base:  clamp(1rem, 2vw, 1.125rem);        /* Main body copy, list items */
  --text-md:    clamp(1.1rem, 2.5vw, 1.35rem);     /* Lead paragraphs, subtitles */
  --text-lg:    clamp(1.25rem, 3vw, 1.75rem);      /* H3, card headings */
  --text-xl:    clamp(1.5rem, 4vw, 2.25rem);       /* H2, section headings */
  --text-2xl:   clamp(2rem, 5vw, 3rem);            /* H1, hero headings */
  --text-3xl:   clamp(2.5rem, 6vw, 4rem);          /* Hero display / jumbo headline */
  --text-display: clamp(3rem, 8vw, 5.25rem);       /* 48px → 84px — hero display headlines only */

  /* ── SPACING SCALE ── */
  --space-1:    clamp(4px, 1vw, 8px);              /* Tight gaps, icon spacing */
  --space-2:    clamp(8px, 2vw, 16px);             /* Inner element gaps */
  --space-3:    clamp(16px, 3vw, 24px);            /* Card padding, container side pad */
  --space-4:    clamp(24px, 4vw, 40px);            /* Component padding */
  --space-5:    clamp(40px, 6vw, 64px);            /* Section padding vertical */
  --space-6:    clamp(64px, 8vw, 100px);           /* Large section padding */
  --space-7:    clamp(80px, 10vw, 140px);          /* Hero padding vertical */
  --space-8:    clamp(120px, 14vw, 260px);         /* Hero top padding — nav clearance only */

  /* ── MAX WIDTHS ── */
  --width-content: 1160px;   /* Standard container — most sections */
  --width-wide:    1440px;   /* Expansive sections — stats bars, logo strips */
  --width-prose:   680px;    /* Body text, hero subtitles, narrow columns */
  /* Full bleed (hero, image bands, colour sections) = no max-width on section,
     .container inside still constrains content to --width-content */

  /* ── BORDER RADIUS ── */
  --radius-btn:    6px;      /* Buttons */
  --radius-card:   12px;     /* Cards, panels */
  --radius-badge:  50px;     /* Tags, pills, badges */
  --radius-input:  8px;      /* Form inputs */
  --radius-round:  9999px;   /* Fully round — avatars, icon circles */
  --radius-lg:     20px;     /* larger cards, panels */
  --radius-xl:     28px;     /* feature cards, prominent panels */

  /* ── SHADOWS ── */
  --shadow-card:   0 2px 12px rgba(0,0,0,0.08);          /* Default card elevation */
  --shadow-card-hover: 0 8px 28px rgba(0,0,0,0.14);      /* Card on hover */
  --shadow-nav:    0 2px 16px rgba(0,0,0,0.10);          /* Sticky nav */
  --shadow-modal:  0 16px 48px rgba(0,0,0,0.22);         /* Modals, drawers */
  --shadow-btn:    0 2px 8px rgba(0,0,0,0.14);           /* Button depth */

  /* ── Z-INDEX SCALE ── */
  --z-base:        0;        /* Default flow */
  --z-raised:      10;       /* Cards on hover, tooltips */
  --z-dropdown:    100;      /* Dropdowns, select menus */
  --z-sticky:      200;      /* Sticky nav */
  --z-sticky-under: 199;     /* Elements tucked just beneath sticky nav (e.g. mobile menu) */
  --z-overlay:     300;      /* Page overlays, backdrops */
  --z-modal:       400;      /* Modals, drawers */
  --z-toast:       500;      /* Notifications, toasts */
  --z-float:       999;      /* Floating action buttons — always topmost */

  /* ── LINE HEIGHTS ── */
  --leading-tight:   1.1;    /* Large display headings, hero H1 */
  --leading-snug:    1.3;    /* H2, H3, card headings */
  --leading-normal:  1.6;    /* Body copy */
  --leading-relaxed: 1.8;    /* Long-form text, blog content */

  /* ── LETTER SPACING ── */
  --tracking-tight:  -0.04em;  /* Large hero headings */
  --tracking-normal:  0;       /* Body copy */
  --tracking-wide:    0.04em;  /* Tags, badges, labels */
  --tracking-wider:   0.08em;  /* Uppercase section labels */

  /* ── TRANSITIONS ── */
  --transition-fast:   all 0.15s ease;           /* Hover colour changes */
  --transition-base:   all 0.25s ease;           /* Standard hover effects */
  --transition-slow:   all 0.4s ease;            /* Panel opens, expands */
  --transition-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); /* Springy pop */

  /* ── BORDERS ── */
  --border-subtle:  1px solid rgba(0,0,0,0.08);   /* Card borders, dividers */
  --border-medium:  1px solid rgba(0,0,0,0.15);   /* Input borders */
  --border-strong:  2px solid currentColor;        /* Focus rings, accents */

  /* ── ASPECT RATIOS ── */
  --ratio-hero:     16 / 7;   /* Hero images */
  --ratio-card:     4 / 3;    /* Card images */
  --ratio-thumb:    1 / 1;    /* Square thumbnails, avatars */
  --ratio-wide:     21 / 9;   /* Cinematic banner images */

  /* ── BUTTON SIZING ── */
  --btn-sm-padding:   6px 14px;     /* Small — inline CTAs, tags */
  --btn-sm-font:      var(--text-xs);
  --btn-md-padding:   12px 28px;    /* Medium — default button */
  --btn-md-font:      var(--text-sm);
  --btn-lg-padding:   16px 40px;    /* Large — primary hero CTA */
  --btn-lg-font:      var(--text-base);

}

/* ── BRAND TOKENS (from brand-design.md) ── */
:root {
  --brand-primary:   #e02b20;
  --brand-primary-text: #ff5a4f;
  --brand-secondary: #b01818;
  --brand-dark:      #111111;
  --surface-0:       #0b0b0b;
  --surface-1:       #171717;
  --surface-2:       #202020;
  --surface-3:       #2b2b2b;
  --brand-light:     #f4f4f4;
  --white:           #ffffff;
  --text-body:       #d2d2d2;
  --text-muted:      #a8a8a8;
  --star:            #f5c542;
  --border:          rgba(255,255,255,0.14);
  --shadow-btn-brand:       0 4px 16px rgba(224,43,32,0.30);
  --shadow-btn-brand-hover: 0 8px 28px rgba(176,24,24,0.35);
  --shadow-float-brand:     0 6px 20px rgba(224,43,32,0.35);
  --font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
}

/* ── RESET + BASE ── */
*, *::before, *::after {box-sizing: border-box;}
html {scroll-behavior: smooth;scroll-padding-top: var(--space-7);}
body {margin: 0;background: var(--brand-dark);color: var(--text-body);font-family: var(--font-body);font-size: var(--text-base);line-height: var(--leading-normal);-webkit-font-smoothing: antialiased;}
img, video, iframe {display: block;max-width: 100%;}
a {color: inherit;text-decoration: none;}
h1, h2, h3, p, ul, dl, dd {margin: 0;}
ul {padding: 0;list-style: none;}
button {font: inherit;color: inherit;cursor: pointer;}
h1, h2, h3 {font-family: var(--font-head);color: var(--white);line-height: var(--leading-tight);text-transform: uppercase;letter-spacing: 0.01em;}
h1 {font-size: var(--text-3xl);font-weight: 800;}
h2 {font-size: var(--text-2xl);font-weight: 800;}
h3 {font-size: var(--text-lg);font-weight: 700;line-height: var(--leading-snug);}
:focus-visible {outline: var(--border-strong);outline-color: var(--brand-primary-text);outline-offset: 3px;}
.sr-only {position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;}
main {overflow-x: clip;}
.section {padding: var(--space-6) 0;}
.section--tight {padding: var(--space-5) 0;}
.section-head {max-width: var(--width-prose);margin-bottom: var(--space-4);}
.section-head p {margin-top: var(--space-2);font-size: var(--text-md);color: var(--text-body);}
.skip-link {position: absolute;left: var(--space-2);top: calc(var(--space-7) * -1);z-index: var(--z-toast);background: var(--brand-primary);color: var(--white);padding: var(--space-2) var(--space-3);border-radius: var(--radius-btn);}
.skip-link:focus {top: var(--space-2);}

/* ── CONTAINERS ── */
.container        {max-width: var(--width-content);margin: 0 auto;padding: 0 var(--space-3);}
.container--wide  {max-width: var(--width-wide);margin: 0 auto;padding: 0 var(--space-3);}
.container--prose {max-width: var(--width-prose);margin: 0 auto;padding: 0 var(--space-3);}

/* ── BUTTONS ── */
.btn {display: inline-flex;align-items: center;justify-content: center;gap: var(--space-1);border: 2px solid transparent;border-radius: var(--radius-btn);font-family: var(--font-head);font-weight: 700;text-transform: uppercase;letter-spacing: var(--tracking-wide);white-space: nowrap;transition: var(--transition-base);}
.btn:active {transform: translateY(1px) scale(0.98);}
.btn--md {padding: var(--btn-md-padding);font-size: var(--text-base);}
.btn--lg {padding: var(--btn-lg-padding);font-size: var(--text-md);}
.btn--sm {padding: var(--btn-sm-padding);font-size: var(--text-sm);}
.btn--primary {background: var(--brand-primary);color: var(--white);box-shadow: var(--shadow-btn-brand);}
.btn--primary:hover {background: var(--brand-secondary);box-shadow: var(--shadow-btn-brand-hover);}
.btn--ghost {background: rgba(17,17,17,0.55);color: var(--white);border-color: rgba(255,255,255,0.7);}
.btn--ghost:hover {background: var(--white);color: var(--brand-dark);}
.btn--outline {background: transparent;color: var(--white);border-color: rgba(255,255,255,0.6);}
.btn--outline:hover {background: var(--white);border-color: var(--white);color: var(--brand-dark);}

/* ── NAV ── */
.nav-wrap {position: fixed;top: 0;left: 0;right: 0;z-index: var(--z-sticky);background: rgba(17,17,17,0.9);backdrop-filter: blur(12px);border-bottom: 1px solid var(--border);transition: transform 0.35s ease;}
.nav-wrap.hidden {transform: translateY(-100%);}
.nav {display: flex;align-items: center;justify-content: space-between;gap: var(--space-3);max-width: var(--width-wide);margin: 0 auto;padding: var(--space-1) var(--space-3);}
.nav__brand {display: flex;align-items: center;gap: var(--space-2);}
.nav__brand img {width: auto;height: 44px;}
.nav-links {display: flex;gap: var(--space-4);}
.nav-links a {font-family: var(--font-head);font-weight: 600;font-size: var(--text-base);text-transform: uppercase;letter-spacing: var(--tracking-wide);color: var(--text-body);padding: var(--space-1) 0;border-bottom: 2px solid transparent;transition: var(--transition-fast);}
.nav-links a:hover, .nav-links a.active {color: var(--white);border-bottom-color: var(--brand-primary);}
.nav__cta {display: flex;align-items: center;gap: var(--space-3);}
.nav__phone {font-family: var(--font-head);font-weight: 700;font-size: var(--text-md);color: var(--white);white-space: nowrap;}
.nav__phone:hover {color: var(--brand-primary-text);}
.ham {display: none;width: 44px;height: 44px;background: transparent;border: 1px solid var(--border);border-radius: var(--radius-btn);position: relative;}
.ham span {position: absolute;left: 11px;right: 11px;height: 2px;background: var(--white);transition: var(--transition-base);}
.ham span:nth-child(1) {top: 14px;}
.ham span:nth-child(2) {top: 21px;}
.ham span:nth-child(3) {top: 28px;}
.ham.open span:nth-child(1) {top: 21px;transform: rotate(45deg);}
.ham.open span:nth-child(2) {opacity: 0;}
.ham.open span:nth-child(3) {top: 21px;transform: rotate(-45deg);}
.nav-progress {height: 2px;background: transparent;}
.nav-progress span {display: block;height: 100%;width: 0;background: var(--brand-primary);}
.mob-nav {display: none;position: fixed;left: 0;right: 0;top: 0;z-index: var(--z-sticky-under);background: var(--surface-1);border-bottom: 1px solid var(--border);padding: var(--space-7) var(--space-3) var(--space-4);flex-direction: column;gap: var(--space-1);}
.mob-nav.open {display: flex;}
.mob-nav a {font-family: var(--font-head);font-weight: 700;font-size: var(--text-lg);text-transform: uppercase;color: var(--white);padding: var(--space-2) 0;border-bottom: 1px solid var(--border);}
.mob-nav .btn {margin-top: var(--space-2);border-bottom: 2px solid transparent;}

/* ── HERO ── */
.hero {position: relative;isolation: isolate;display: flex;align-items: center;justify-content: center;text-align: center;min-height: 62svh;padding: var(--space-7) 0;overflow: hidden;}
.hero__media {position: absolute;inset: 0;z-index: -2;}
.hero__media img, .hero__media video {width: 100%;height: 100%;object-fit: cover;}
.hero::after {content: "";position: absolute;inset: 0;z-index: -1;background: linear-gradient(180deg, rgba(17,17,17,0.82) 0%, rgba(17,17,17,0.62) 55%, rgba(17,17,17,0.9) 100%);}
.hero__content {max-width: 64rem;margin: 0 auto;}
.hero__content {max-width: var(--width-content);}
.hero__content h1 {font-size: var(--text-3xl);max-width: 20em;margin: 0 auto;text-wrap: balance;}
.hero__sub {text-wrap: balance;margin: var(--space-3) auto 0;max-width: 38rem;font-size: var(--text-lg);color: #ececec;}
@keyframes rise {from {opacity: 0;transform: translateY(24px);} to {opacity: 1;transform: none;}}
.hero__content > * {animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;}
.hero__content > *:nth-child(2) {animation-delay: 0.12s;}
.hero__content > *:nth-child(3) {animation-delay: 0.24s;}

/* ── REGO BAR (straddles the hero edge) ── */
.rego {position: relative;z-index: var(--z-raised);margin-top: calc(var(--space-6) * -1);padding-bottom: var(--space-5);}
.rego__card {display: grid;grid-template-columns: 1.5fr 1fr;border-radius: var(--radius-lg);overflow: hidden;border: 1px solid var(--border);box-shadow: var(--shadow-modal);}
.rego__book {background: var(--surface-2);padding: var(--space-4);display: flex;flex-direction: column;justify-content: flex-start;gap: var(--space-2);}
.rego__book h2, .rego__call h2 {font-size: var(--text-xl);line-height: var(--leading-tight);}
.rego__book p {font-size: var(--text-sm);color: var(--text-muted);}
.rego__label {font-size: var(--text-sm);font-weight: 600;color: var(--white);}
.rego__row {display: flex;gap: var(--space-2);}
.plate {flex: 1;display: flex;min-width: 0;background: var(--white);border-radius: var(--radius-input);border: 2px solid var(--white);overflow: hidden;}
.plate__state {display: grid;place-items: center;padding: 0 var(--space-3);background: var(--brand-light);border-right: 2px solid var(--brand-dark);font-family: var(--font-head);font-weight: 800;font-size: var(--text-base);color: var(--brand-dark);}
.plate input {flex: 1;min-width: 0;border: 0;background: var(--white);padding: var(--space-2) var(--space-3);font-family: var(--font-head);font-weight: 800;font-size: var(--text-lg);letter-spacing: 0.12em;text-transform: uppercase;color: var(--brand-dark);}
.plate input::placeholder {color: #6b6b6b;}
.plate input:focus-visible {outline: none;}
.plate:focus-within {border-color: var(--brand-primary);}
.rego__call {position: relative;isolation: isolate;overflow: hidden;background: var(--surface-3);border-left: 1px solid var(--border);padding: var(--space-4);display: flex;flex-direction: column;justify-content: flex-start;gap: var(--space-2);}
.rego__call::after {content: "";position: absolute;z-index: -1;right: -12%;bottom: -22%;width: 78%;aspect-ratio: 192 / 136;background: url("/assets/images/logo-mark.png") no-repeat center / contain;opacity: 0.07;filter: grayscale(1);pointer-events: none;}
.rego__phone {margin-top: var(--space-3);font-family: var(--font-head);font-weight: 800;font-size: var(--text-3xl);line-height: var(--leading-tight);color: var(--brand-primary);white-space: nowrap;}
.rego__phone:hover {color: var(--white);}
.rego__call .rating {gap: 0;line-height: var(--leading-tight);font-size: var(--text-md);color: var(--white);}
.rego__call .stars {font-size: var(--text-xl);line-height: var(--leading-tight);color: var(--star);}
.rating {display: inline-flex;align-items: center;flex-wrap: wrap;gap: var(--space-1);font-size: var(--text-sm);}
.stars {color: var(--star);letter-spacing: 0.1em;}

/* ── SERVICES (tabs + bento) ── */
.tabs {display: flex;flex-wrap: wrap;gap: var(--space-2);margin-bottom: var(--space-4);}
.tab {padding: var(--space-1) var(--space-4);border-radius: var(--radius-badge);border: 1px solid var(--border);background: var(--surface-1);font-family: var(--font-head);font-weight: 700;font-size: var(--text-md);text-transform: uppercase;letter-spacing: var(--tracking-wide);color: var(--text-body);transition: var(--transition-base);}
.tab:hover {border-color: var(--white);color: var(--white);}
.tab[aria-selected="true"] {background: var(--brand-primary);border-color: var(--brand-primary);color: var(--white);}
.tabpanel[hidden] {display: none;}
.tabpanel {animation: rise 0.5s ease both;}
.bento {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, minmax(15rem, 1fr));gap: var(--space-2);}
.bento--wide-first .svc:nth-child(1) {grid-column: 1 / 3;grid-row: 1 / 3;}
.bento--wide-first .svc:nth-child(2) {grid-column: 3;grid-row: 1;}
.bento--wide-first .svc:nth-child(3) {grid-column: 3;grid-row: 2;}
.bento--four .svc:nth-child(1) {grid-column: 1;grid-row: 1 / 3;}
.bento--four .svc:nth-child(2) {grid-column: 2;grid-row: 1;}
.bento--four .svc:nth-child(3) {grid-column: 3;grid-row: 1;}
.bento--four .svc:nth-child(4) {grid-column: 2 / 4;grid-row: 2;}
.svc {position: relative;isolation: isolate;display: flex;align-items: flex-end;overflow: hidden;border-radius: var(--radius-card);border: 1px solid var(--border);background: var(--surface-1);}
.svc img {position: absolute;inset: 0;z-index: -2;width: 100%;height: 100%;object-fit: cover;transition: transform 0.6s ease;}
.svc::after {content: "";position: absolute;inset: 0;z-index: -1;background: linear-gradient(0deg, rgba(11,11,11,0.94) 0%, rgba(11,11,11,0.45) 48%, rgba(11,11,11,0.05) 100%);}
.svc:hover img {transform: scale(1.05);}
.svc__body {padding: var(--space-4);max-width: 34rem;}
.svc__body h3 {position: relative;padding-bottom: var(--space-1);}
.svc__body h3::after {content: "";position: absolute;left: 0;bottom: 0;width: 2.5rem;height: 3px;background: var(--brand-primary);transition: width 0.4s ease;}
.svc:hover h3::after {width: 5rem;}
.svc__body p {margin-top: var(--space-1);font-size: var(--text-sm);color: #e0e0e0;}

/* ── BRAND MARQUEE ── */
.brands {padding: var(--space-5) 0;border-top: 1px solid var(--border);border-bottom: 1px solid var(--border);background: var(--surface-0);}
.brands__title {text-align: center;font-family: var(--font-head);font-weight: 600;font-size: var(--text-md);text-transform: uppercase;letter-spacing: var(--tracking-wider);color: var(--text-muted);margin-bottom: var(--space-4);padding: 0 var(--space-3);}
.marquee {overflow: hidden;-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.marquee + .marquee {margin-top: var(--space-4);}
.marquee__track {display: flex;width: max-content;animation: marquee 70s linear infinite;will-change: transform;}
.marquee--reverse .marquee__track {animation-direction: reverse;}
.marquee:hover .marquee__track {animation-play-state: paused;}
.marquee__group {display: flex;flex: none;align-items: center;gap: var(--space-6);padding-right: var(--space-6);}
.marquee__group img {flex: none;height: 90px;width: auto;max-width: 20rem;object-fit: contain;opacity: 0.8;}
.marquee--reverse .marquee__group img {filter: brightness(0) invert(1);}
@keyframes marquee {from {transform: translate3d(0,0,0);} to {transform: translate3d(-50%,0,0);}}

/* ── FEATURE REVIEW ── */
.feature {position: relative;isolation: isolate;padding: var(--space-7) 0;overflow: hidden;}
.feature__media {position: absolute;inset: 0;z-index: -2;}
.feature__media img {width: 100%;height: 100%;object-fit: cover;}
.feature::after {content: "";position: absolute;inset: 0;z-index: -1;background: linear-gradient(90deg, rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.7) 50%, rgba(17,17,17,0.25) 100%);}
.feature blockquote {margin: 0;max-width: 40rem;}
.feature .stars {font-size: var(--text-lg);}
.feature blockquote p {margin-top: var(--space-2);font-family: var(--font-head);font-weight: 700;font-size: var(--text-xl);line-height: var(--leading-snug);color: var(--white);}
.feature cite {display: block;margin-top: var(--space-3);font-style: normal;font-size: var(--text-sm);color: #e0e0e0;}

/* ── REVIEWS ── */
.reviews__head {display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: var(--space-2) var(--space-4);margin-bottom: var(--space-4);}
.reviews__link {font-family: var(--font-head);font-weight: 700;font-size: var(--text-md);text-transform: uppercase;letter-spacing: var(--tracking-wide);color: var(--white);transition: var(--transition-fast);}
.reviews__link:hover {color: var(--brand-primary-text);}
.review {--unit: calc((100% - 2 * var(--space-2)) / 3);flex: 0 0 var(--unit);scroll-snap-align: start;margin: 0;display: flex;flex-direction: column;gap: var(--space-3);padding: var(--space-3);background: var(--surface-1);border: 1px solid var(--border);border-radius: var(--radius-card);}
.review p {font-size: var(--text-base);color: var(--white);}
.review--wide {flex-basis: calc(var(--unit) * 2 + var(--space-2));}
.review__top {display: flex;align-items: center;gap: var(--space-2);}
.review__who {flex: 1;min-width: 0;font-size: var(--text-sm);color: var(--text-muted);}
.review__who strong {display: block;color: var(--white);font-weight: 600;font-size: var(--text-sm);white-space: nowrap;}
.review__top .stars {flex: none;font-size: var(--text-xs);letter-spacing: 0;}
.avatar {flex: none;display: grid;place-items: center;width: 40px;height: 40px;border-radius: var(--radius-round);font-family: var(--font-head);font-weight: 700;font-size: var(--text-md);letter-spacing: 0.04em;color: var(--white);}
.avatar--1 {background: #b5483f;}
.avatar--2 {background: #3b7a8c;}
.avatar--3 {background: #6a5aa8;}
.avatar--4 {background: #4f7f5a;}
.avatar--5 {background: #a2733a;}

/* ── REVIEWS CAROUSEL ── */
.rcar__viewport {overflow-x: auto;scroll-snap-type: x mandatory;scrollbar-width: none;border-radius: var(--radius-card);}
.rcar__viewport::-webkit-scrollbar {display: none;}
.rcar__track {display: flex;gap: var(--space-2);}
.rcar__controls {display: flex;justify-content: flex-end;gap: var(--space-2);margin-top: var(--space-3);}
.rcar__btn {display: grid;place-items: center;width: 48px;height: 48px;border-radius: var(--radius-round);border: 1px solid var(--border);background: var(--surface-1);font-size: var(--text-md);color: var(--white);transition: var(--transition-base);}
.rcar__btn:hover {background: var(--brand-primary);border-color: var(--brand-primary);}

/* ── AREAS ── */
.areas {background: var(--surface-0);border-top: 1px solid var(--border);border-bottom: 1px solid var(--border);}
.areas__inner {display: grid;grid-template-columns: 1fr 1.4fr;gap: var(--space-5);align-items: center;}
.pills {display: flex;flex-wrap: wrap;gap: var(--space-2);}
.pill {padding: var(--space-1) var(--space-3);border-radius: var(--radius-badge);border: 1px solid var(--border);background: var(--surface-2);font-size: var(--text-sm);font-weight: 500;color: var(--white);}
.pill--home {background: var(--brand-primary);border-color: var(--brand-primary);}

/* ── CONTACT ── */
.areas__note {margin-top: var(--space-2);}
.contact__btn {align-self: flex-start;}
.contact__row .hours {margin-top: var(--space-1);}
.contact__grid {display: grid;grid-template-columns: 1fr 1.2fr;gap: var(--space-4);}
.contact__card {display: flex;flex-direction: column;gap: var(--space-3);padding: var(--space-4);background: var(--surface-1);border: 1px solid var(--border);border-radius: var(--radius-card);}
.contact__row dt {font-family: var(--font-head);font-weight: 700;font-size: var(--text-sm);text-transform: uppercase;letter-spacing: var(--tracking-wider);color: var(--brand-primary-text);}
.contact__row dd {margin-top: var(--space-1);font-size: var(--text-md);color: var(--white);}
.contact__row dd a:hover {color: var(--brand-primary-text);}
.hours {display: grid;grid-template-columns: auto 1fr;gap: var(--space-1) var(--space-4);font-size: var(--text-base);}
.contact__row .hours dt {margin: 0;font-family: var(--font-body);font-weight: 400;font-size: var(--text-base);text-transform: none;letter-spacing: var(--tracking-normal);color: var(--text-body);}
.contact__row .hours dd {margin: 0;font-size: var(--text-base);color: var(--text-body);}
.contact__row .hours .is-today {color: var(--white);font-weight: 700;}
.map {border-radius: var(--radius-card);overflow: hidden;border: 1px solid var(--border);min-height: 24rem;background: var(--surface-1);}
.map iframe {width: 100%;height: 100%;min-height: 24rem;border: 0;filter: grayscale(1) invert(0.92) contrast(0.9);}

/* ── SOCIALS ── */
.socials__grid {display: grid;grid-template-columns: 1fr 1fr;gap: var(--space-4);align-items: stretch;}
.fb-frame {border-radius: var(--radius-card);overflow: hidden;border: 1px solid var(--border);background: var(--surface-1);}
.fb-frame iframe {width: 100%;height: 100%;min-height: 31rem;border: 0;}
.social-links {display: grid;grid-template-rows: repeat(3, 1fr);gap: var(--space-2);}
.social-link {position: relative;isolation: isolate;display: flex;align-items: center;gap: var(--space-3);padding: var(--space-4);overflow: hidden;border-radius: var(--radius-card);border: 1px solid var(--border);}
.social-link img.bg {position: absolute;inset: 0;z-index: -2;width: 100%;height: 100%;object-fit: cover;transition: transform 0.6s ease;}
.social-link::after {content: "";position: absolute;inset: 0;z-index: -1;background: linear-gradient(90deg, rgba(11,11,11,0.92), rgba(11,11,11,0.5));}
.social-link:hover img.bg {transform: scale(1.05);}
.social-link img.ico {width: 32px;height: 32px;flex: none;}
.social-link strong {display: block;font-family: var(--font-head);font-weight: 800;font-size: var(--text-lg);text-transform: uppercase;color: var(--white);line-height: var(--leading-tight);}
.social-link span {font-size: var(--text-sm);color: #e0e0e0;}

/* ── FOOTER ── */
.footer {background: var(--surface-0);border-top: 1px solid var(--border);font-size: var(--text-sm);}
.footer__grid {display: grid;grid-template-columns: 1.2fr 1.3fr 1fr 1.5fr;gap: var(--space-4);padding-top: var(--space-5);padding-bottom: var(--space-5);}
.footer__brand > img {width: 180px;height: auto;margin-bottom: var(--space-2);}
.footer__brand p {color: var(--text-body);}
.footer__link {display: inline-block;margin-top: var(--space-1);font-family: var(--font-head);font-weight: 700;font-size: var(--text-base);text-transform: uppercase;letter-spacing: var(--tracking-wide);color: var(--white);transition: var(--transition-fast);}
.footer__link:hover {color: var(--brand-primary-text);}
.footer h3 {font-size: var(--text-base);margin-bottom: var(--space-2);}
.footer li {margin-bottom: var(--space-1);}
.footer__areas {columns: 2;column-gap: var(--space-3);}
.footer__areas li {break-inside: avoid;}
.footer li a {color: var(--text-body);transition: var(--transition-fast);}
.footer li a:hover {color: var(--white);}
.footer__social {display: flex;align-items: center;gap: var(--space-2);margin-top: var(--space-3);}
.footer__social a {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border: 1px solid var(--border);border-radius: var(--radius-btn);transition: var(--transition-base);}
.footer__social a:hover {border-color: var(--brand-primary);background: var(--surface-2);}
.footer__social img {display: block;width: 18px;height: 18px;margin: 0;}
.footer__social .ico-tiktok {filter: drop-shadow(-1px -1px 0 #25F4EE) drop-shadow(1px 1px 0 #FE2C55);}
.ig-icon {display: block;width: 18px;height: 18px;background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);-webkit-mask: url("https://cdn.simpleicons.org/instagram") center / contain no-repeat;mask: url("https://cdn.simpleicons.org/instagram") center / contain no-repeat;}
.footer__bar {border-top: 1px solid var(--border);padding: var(--space-3) 0;color: var(--text-muted);}
.footer__bar-inner {display: grid;grid-template-columns: repeat(3, 1fr);align-items: center;gap: var(--space-2);}
.footer__bar-inner > :nth-child(2) {text-align: center;}
.footer__bar-inner > :nth-child(3) {text-align: right;}
.footer__bar a.frw {color: var(--text-muted);text-decoration: underline;text-underline-offset: 3px;}
.footer__bar a.frw:hover {color: var(--white);}
.footer__bar .heart {display: inline-block;color: var(--brand-primary-text);vertical-align: -2px;}
.ack-bar {text-align: center;border-top: 1px solid var(--border);padding: var(--space-3) 0;background: var(--brand-dark);color: var(--text-muted);font-size: var(--text-xs);}
.wa-float {position: fixed;right: var(--space-3);bottom: var(--space-3);z-index: var(--z-float);display: grid;place-items: center;width: 56px;height: 56px;border-radius: var(--radius-round);background: var(--brand-primary);box-shadow: var(--shadow-float-brand);transition: var(--transition-spring);}
.wa-float:hover {transform: scale(1.08);background: var(--brand-secondary);}
.wa-float img {width: 28px;height: 28px;}

/* ── SCROLL REVEAL (base-design.md section 5) ── */
[data-reveal]                {opacity: 0;transition: opacity 0.6s ease, transform 0.6s ease;}
[data-reveal="fade-up"]      {transform: translateY(32px);}
[data-reveal="fade-in"]      {transform: none;}
[data-reveal="slide-left"]   {transform: translateX(-40px);}
[data-reveal="slide-right"]  {transform: translateX(40px);}
[data-reveal].revealed       {opacity: 1;transform: none;}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .nav-links, .nav__phone {display: none;}
  .ham {display: block;}
  .rego__card {grid-template-columns: 1fr;}
  .rego__call {border-left: 0;border-top: 1px solid var(--border);}
  .bento {grid-template-columns: 1fr 1fr;grid-template-rows: none;grid-auto-rows: minmax(15rem, auto);}
  .bento--wide-first .svc:nth-child(n), .bento--four .svc:nth-child(n) {grid-column: auto;grid-row: auto;}
  .bento--wide-first .svc:nth-child(1), .bento--four .svc:nth-child(1) {grid-column: 1 / 3;}
  .bento--four .svc:nth-child(4) {grid-column: 1 / 3;}
      .review {--unit: calc((100% - var(--space-2)) / 2);}
  .review--wide {flex-basis: 100%;}
  .areas__inner, .contact__grid, .socials__grid {grid-template-columns: 1fr;}
  .footer__grid {grid-template-columns: 1fr 1fr;}
  .footer__bar-inner {grid-template-columns: 1fr;text-align: center;}
  .footer__bar-inner > :nth-child(2), .footer__bar-inner > :nth-child(3) {text-align: center;}
}
@media (max-width: 640px) {
  .hero {min-height: 54svh;}
  .rego__row {flex-direction: column;}
  .bento {grid-template-columns: 1fr;}
  .bento--wide-first .svc:nth-child(n), .bento--four .svc:nth-child(n) {grid-column: 1;}
      .review, .review--wide {flex-basis: 100%;}
  .footer__grid {grid-template-columns: 1fr;}
  .nav__cta .btn {display: none;}
  .nav__brand img {height: 36px;}
  .marquee__group img {height: 64px;}
  .ack-bar .container {padding-left: var(--space-7);padding-right: var(--space-7);}
  .footer__bar-inner {padding-right: var(--space-3);}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  .hero__content > *, .tabpanel {animation: none;}
  .marquee__track {animation: none;}
  [data-reveal] {opacity: 1;transform: none;transition: none;}
  .svc img, .social-link img.bg {transition: none;}
}