/* ── Martinez Construction — self-hosted fonts (font-display: swap) ────────── */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
    /* Martinez Construction — Warm Premium Palette (OKLCH)
       Single gold accent thread. Metallic gold #D4AF37
       (oklch 0.74 0.13 82) — refined, quiet-luxury metallic finish.
       Warmth from charcoal + warm white, never a competing hue. */
    --martinez-gold: oklch(0.74 0.13 82);
    --martinez-gold-light: oklch(0.8 0.12 85);
    /* Metallic gold for badges — #D4AF37, the same metallic gold as the
       primary accent. Used for trust badges, premium pills, and the gold
       seal SVG. Never bronze. */
    --badge-gold: oklch(0.74 0.13 82);
    --badge-gold-deep: oklch(0.66 0.13 80);
    --martinez-white: oklch(0.985 0.008 75);
    --martinez-off-white: oklch(0.985 0.008 75);
    --martinez-light-gray: oklch(0.96 0.008 75);
    --martinez-charcoal: oklch(0.18 0.008 65);
    --martinez-deep-charcoal: oklch(0.13 0.012 50);
    --martinez-warm-white: oklch(0.985 0.008 75);
    --martinez-warm-gray: oklch(0.96 0.008 75);
    --martinez-gold-gradient: linear-gradient(
      135deg,
      oklch(0.74 0.13 82),
      oklch(0.8 0.12 85),
      oklch(0.74 0.13 82)
    );

    /* 2026 Premium Remodel — cinematic hero + gold-outline icon system.
       Solid black navbar surface (true black, not charcoal) for the pinned
       top bar with white links + gold logo/buttons. Hero trust overlay
       gradients read from charcoal → transparent so real drone/concrete
       photos sit behind bold trust-building copy. */
    --nav-black: oklch(0.12 0.012 50);
    --nav-black-deep: oklch(0.09 0.012 50);
    /* 2026 polish — lightened hero overlays: only a light shadow overlay so
       the real drone/concrete photos stay clear and content reads cleanly.
       Opacity reduced from the previous 0.25/0.55/0.88 to a lighter gradient. */
    --hero-overlay: linear-gradient(
      180deg,
      oklch(0.12 0.012 50 / 0.12) 0%,
      oklch(0.12 0.012 50 / 0.3) 45%,
      oklch(0.09 0.012 50 / 0.55) 100%
    );
    --hero-overlay-side: linear-gradient(
      90deg,
      oklch(0.09 0.012 50 / 0.45) 0%,
      oklch(0.09 0.012 50 / 0.22) 55%,
      transparent 100%
    );
    --mega-menu-surface: oklch(0.985 0.006 75);
    --gold-outline: oklch(0.74 0.13 82);
    --gold-outline-soft: oklch(0.74 0.13 82 / 0.35);
    --icon-chip: oklch(0.99 0.005 75);

    /* Premium typography tokens — Space Grotesk display, DM Sans body,
       Instrument Serif Italic script accent */
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
    --font-mono: "Space Grotesk", ui-monospace, monospace;
    --font-script: "Instrument Serif", Georgia, serif;

    /* Light Mode Tokens — warm white page bg, charcoal text, toned gold */
    --background: oklch(0.985 0.008 75);
    --foreground: oklch(0.205 0.008 65);
    --card: oklch(0.995 0.006 75);
    --card-foreground: oklch(0.205 0.008 65);
    --popover: oklch(0.995 0.006 75);
    --popover-foreground: oklch(0.205 0.008 65);
    --primary: oklch(0.74 0.13 82);
    --primary-foreground: oklch(0.985 0.008 75);
    --secondary: oklch(0.96 0.008 75);
    --secondary-foreground: oklch(0.205 0.008 65);
    --muted: oklch(0.96 0.008 75);
    --muted-foreground: oklch(0.5 0.008 65);
    --accent: oklch(0.74 0.13 82);
    --accent-foreground: oklch(0.985 0.008 75);
    --destructive: oklch(0.55 0.22 25);
    --destructive-foreground: oklch(0.985 0.008 75);
    --border: oklch(0.74 0.13 82 / 1);
    --input: oklch(0.74 0.13 82 / 1);
    --ring: oklch(0.74 0.13 82);
    --radius: 0.5rem;
  }

.dark {
    /* Dark mode — warm charcoal with warm undertone, toned gold accent */
    --background: oklch(0.13 0.012 50);
    --foreground: oklch(0.985 0.008 75);
    --card: oklch(0.13 0.012 50);
    --card-foreground: oklch(0.985 0.008 75);
    --popover: oklch(0.13 0.012 50);
    --popover-foreground: oklch(0.985 0.008 75);
    --primary: oklch(0.74 0.13 82);
    --primary-foreground: oklch(0.985 0.008 75);
    --secondary: oklch(0.18 0.008 65);
    --secondary-foreground: oklch(0.985 0.008 75);
    --muted: oklch(0.18 0.008 65);
    --muted-foreground: oklch(0.6 0.008 65);
    --accent: oklch(0.18 0.008 65);
    --accent-foreground: oklch(0.985 0.008 75);
    --destructive: oklch(0.45 0.22 25);
    --destructive-foreground: oklch(0.985 0.008 75);
    --border: oklch(0.74 0.13 82 / 1);
    --input: oklch(0.74 0.13 82 / 1);
    --ring: oklch(0.74 0.13 82);
  }

* {
  border-color: oklch(var(--border));
}

body {
  background-color: oklch(var(--background));
  color: oklch(var(--foreground));
    font-family: "DM Sans", system-ui, -apple-system, sans-serif;
    line-height: 1.8;
}

@media (max-width: 768px) {
    body {
      line-height: 1.9;
    }
  }

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.3;
    font-weight: 600;
  }

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

h2 {
    font-size: 1.875rem;
    font-weight: 700;
  }

h3 {
    font-size: 1.375rem;
    font-weight: 600;
  }

p {
    line-height: 1.8;
  }

/* Instrument Serif italic for script accents like 'Se habla español' */

.testimonial-text {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-size: 1.125rem;
    font-weight: 400;
  }

/* Smooth scroll behavior + prevent horizontal overflow globally.
     Mobile lockdown: vertical scroll only — no horizontal drag, no
     sideways bounce/rubber-band. touch-action: pan-y permits vertical
     panning only; overscroll-behavior-x: none kills the horizontal
     overscroll bounce. */

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
    touch-action: pan-y;
    overscroll-behavior-x: none;
  }

html,
  body {
    overflow-x: hidden;
    max-width: 100%;
    touch-action: pan-y;
    overscroll-behavior-x: none;
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-5 {
  left: 1.25rem;
}
.left-\[50\%\] {
  left: 50%;
}
.left-\[60\%\] {
  left: 60%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-1\/4 {
  top: 25%;
}
.top-2 {
  top: 0.5rem;
}
.top-3 {
  top: 0.75rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[90\] {
  z-index: 90;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.col-span-7 {
  grid-column: span 7 / span 7;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.m-0 {
  margin: 0px;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-9 {
  margin-bottom: 2.25rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[220px\] {
  height: 220px;
}
.h-\[250px\] {
  height: 250px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[450px\] {
  height: 450px;
}
.h-\[58\%\] {
  height: 58%;
}
.h-\[64px\] {
  height: 64px;
}
.h-\[700px\] {
  height: 700px;
}
.h-\[72px\] {
  height: 72px;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[48px\] {
  min-height: 48px;
}
.min-h-\[52px\] {
  min-height: 52px;
}
.min-h-\[54px\] {
  min-height: 54px;
}
.min-h-\[60px\] {
  min-height: 60px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[64px\] {
  min-height: 64px;
}
.min-h-\[90vh\] {
  min-height: 90vh;
}
.min-h-\[96px\] {
  min-height: 96px;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.min-h-touch {
  min-height: 60px;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[250px\] {
  width: 250px;
}
.w-\[450px\] {
  width: 450px;
}
.w-\[58\%\] {
  width: 58%;
}
.w-\[700px\] {
  width: 700px;
}
.w-\[720px\] {
  width: 720px;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.min-w-touch {
  min-width: 60px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[120px\] {
  max-width: 120px;
}
.max-w-\[140px\] {
  max-width: 140px;
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[900px\] {
  max-width: 900px;
}
.max-w-\[92vw\] {
  max-width: 92vw;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-top {
  transform-origin: top;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px {
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-2 {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes card-reveal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.animate-card-reveal {
  animation: card-reveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes count-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-count-up {
  animation: count-up 0.4s ease-out forwards;
}
@keyframes hero-ken-burns {
  from {
    transform: scale(1) translateY(0);
  }
  to {
    transform: scale(1.08) translateY(-1.5%);
  }
}
.animate-hero-ken-burns {
  animation: hero-ken-burns 18s ease-out forwards;
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-hero-rise {
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-none {
  list-style-type: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2\.5 {
  row-gap: 0.625rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.self-stretch {
  align-self: stretch;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-wrap {
  text-wrap: wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-gold {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-l-\[5px\] {
  border-left-width: 5px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[\#c8a83a\] {
  --tw-border-opacity: 1;
  border-color: rgb(200 168 58 / var(--tw-border-opacity, 1));
}
.border-\[\#c8a83a\]\/25 {
  border-color: rgb(200 168 58 / 0.25);
}
.border-\[\#d4af37\] {
  --tw-border-opacity: 1;
  border-color: rgb(212 175 55 / var(--tw-border-opacity, 1));
}
.border-\[\#d4af37\]\/10 {
  border-color: rgb(212 175 55 / 0.1);
}
.border-\[\#d4af37\]\/15 {
  border-color: rgb(212 175 55 / 0.15);
}
.border-\[\#d4af37\]\/20 {
  border-color: rgb(212 175 55 / 0.2);
}
.border-\[\#d4af37\]\/30 {
  border-color: rgb(212 175 55 / 0.3);
}
.border-\[\#d4af37\]\/40 {
  border-color: rgb(212 175 55 / 0.4);
}
.border-\[\#d4af37\]\/50 {
  border-color: rgb(212 175 55 / 0.5);
}
.border-\[\#d4af37\]\/60 {
  border-color: rgb(212 175 55 / 0.6);
}
.border-\[\#e8c860\] {
  --tw-border-opacity: 1;
  border-color: rgb(232 200 96 / var(--tw-border-opacity, 1));
}
.border-\[\#e8c860\]\/15 {
  border-color: rgb(232 200 96 / 0.15);
}
.border-\[\#e8c860\]\/30 {
  border-color: rgb(232 200 96 / 0.3);
}
.border-\[\#e8c860\]\/50 {
  border-color: rgb(232 200 96 / 0.5);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-input {
  border-color: oklch(var(--input));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#111\] {
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1a1a1a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
}
.bg-\[\#d4af37\] {
  --tw-bg-opacity: 1;
  background-color: rgb(212 175 55 / var(--tw-bg-opacity, 1));
}
.bg-\[\#d4af37\]\/10 {
  background-color: rgb(212 175 55 / 0.1);
}
.bg-\[\#d4af37\]\/15 {
  background-color: rgb(212 175 55 / 0.15);
}
.bg-\[\#d4af37\]\/20 {
  background-color: rgb(212 175 55 / 0.2);
}
.bg-\[\#d4af37\]\/60 {
  background-color: rgb(212 175 55 / 0.6);
}
.bg-\[\#e8c860\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 200 96 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e8c860\]\/15 {
  background-color: rgb(232 200 96 / 0.15);
}
.bg-\[\#e8c860\]\/20 {
  background-color: rgb(232 200 96 / 0.2);
}
.bg-\[\#f9f6ef\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 246 239 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f9f7f0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 247 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#faf9f6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 249 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffdf0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 253 240 / var(--tw-bg-opacity, 1));
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-martinez-white {
  background-color: oklch(0.985 0.008 75);
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: oklch(var(--primary) / 0.1);
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-primary\/5 {
  background-color: oklch(var(--primary) / 0.05);
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.bg-white\/\[0\.02\] {
  background-color: rgb(255 255 255 / 0.02);
}
.bg-\[radial-gradient\(ellipse_at_bottom_left\2c rgba\(212\2c 175\2c 55\2c 0\.12\)\2c transparent_60\%\)\] {
  background-image: radial-gradient(ellipse at bottom left,rgba(212,175,55,0.12),transparent 60%);
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-\[\#d4af37\] {
  --tw-gradient-from: #d4af37 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(212 175 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-martinez-charcoal {
  --tw-gradient-from: oklch(0.18 0.008 65) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary {
  --tw-gradient-from: oklch(var(--primary) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: oklch(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#d4af37\] {
  --tw-gradient-to: rgb(212 175 55 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #d4af37 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#d4af37\]\/40 {
  --tw-gradient-to: rgb(212 175 55 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(212 175 55 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary {
  --tw-gradient-to: oklch(var(--primary) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), oklch(var(--primary) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#e6c454\] {
  --tw-gradient-to: #e6c454 var(--tw-gradient-to-position);
}
.to-martinez-deep-charcoal {
  --tw-gradient-to: oklch(0.13 0.012 50) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-yellow-500 {
  --tw-gradient-to: #eab308 var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-center {
  -o-object-position: center;
     object-position: center;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[2px\] {
  padding: 2px;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-9 {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-14 {
  padding-bottom: 3.5rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-28 {
  padding-bottom: 7rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pb-36 {
  padding-bottom: 9rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-0 {
  padding-left: 0px;
}
.pl-11 {
  padding-left: 2.75rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-display {
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-script {
  font-family: "Instrument Serif", Georgia, serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.0\] {
  line-height: 1.0;
}
.leading-\[1\.7\] {
  line-height: 1.7;
}
.leading-\[1\.95\] {
  line-height: 1.95;
}
.leading-\[1\.9\] {
  line-height: 1.9;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\#111\] {
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
}
.text-\[\#1a1a1a\] {
  --tw-text-opacity: 1;
  color: rgb(26 26 26 / var(--tw-text-opacity, 1));
}
.text-\[\#1a1a1a\]\/40 {
  color: rgb(26 26 26 / 0.4);
}
.text-\[\#1a1a1a\]\/45 {
  color: rgb(26 26 26 / 0.45);
}
.text-\[\#1a1a1a\]\/50 {
  color: rgb(26 26 26 / 0.5);
}
.text-\[\#1a1a1a\]\/55 {
  color: rgb(26 26 26 / 0.55);
}
.text-\[\#1a1a1a\]\/60 {
  color: rgb(26 26 26 / 0.6);
}
.text-\[\#1a1a1a\]\/70 {
  color: rgb(26 26 26 / 0.7);
}
.text-\[\#1a1a1a\]\/75 {
  color: rgb(26 26 26 / 0.75);
}
.text-\[\#1a1a1a\]\/80 {
  color: rgb(26 26 26 / 0.8);
}
.text-\[\#1a1a1a\]\/85 {
  color: rgb(26 26 26 / 0.85);
}
.text-\[\#1c1815\] {
  --tw-text-opacity: 1;
  color: rgb(28 24 21 / var(--tw-text-opacity, 1));
}
.text-\[\#333\] {
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}
.text-\[\#444\] {
  --tw-text-opacity: 1;
  color: rgb(68 68 68 / var(--tw-text-opacity, 1));
}
.text-\[\#555\] {
  --tw-text-opacity: 1;
  color: rgb(85 85 85 / var(--tw-text-opacity, 1));
}
.text-\[\#666\] {
  --tw-text-opacity: 1;
  color: rgb(102 102 102 / var(--tw-text-opacity, 1));
}
.text-\[\#b8960c\] {
  --tw-text-opacity: 1;
  color: rgb(184 150 12 / var(--tw-text-opacity, 1));
}
.text-\[\#c8a83a\] {
  --tw-text-opacity: 1;
  color: rgb(200 168 58 / var(--tw-text-opacity, 1));
}
.text-\[\#d4af37\] {
  --tw-text-opacity: 1;
  color: rgb(212 175 55 / var(--tw-text-opacity, 1));
}
.text-\[\#d4af37\]\/0 {
  color: rgb(212 175 55 / 0);
}
.text-\[\#d4af37\]\/50 {
  color: rgb(212 175 55 / 0.5);
}
.text-\[\#d4af37\]\/60 {
  color: rgb(212 175 55 / 0.6);
}
.text-\[\#d4af37\]\/80 {
  color: rgb(212 175 55 / 0.8);
}
.text-\[\#e8c860\] {
  --tw-text-opacity: 1;
  color: rgb(232 200 96 / var(--tw-text-opacity, 1));
}
.text-\[oklch\(0\.72_0\.16_82\)\] {
  color: oklch(0.72 0.16 82);
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-martinez-charcoal {
  color: oklch(0.18 0.008 65);
}
.text-martinez-gold {
  color: oklch(0.74 0.13 82);
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/65 {
  color: rgb(255 255 255 / 0.65);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: none;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-\[0\.08\] {
  opacity: 0.08;
}
.mix-blend-overlay {
  mix-blend-mode: overlay;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_16px_rgba\(212\2c 175\2c 55\2c 0\.25\)\] {
  --tw-shadow: 0 0 16px rgba(212,175,55,0.25);
  --tw-shadow-colored: 0 0 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_20px_rgba\(212\2c 175\2c 55\2c 0\.25\)\] {
  --tw-shadow: 0 0 20px rgba(212,175,55,0.25);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_30px_oklch\(0\.85_0\.15_85\/0\.15\)\] {
  --tw-shadow: 0 0 30px oklch(0.85 0.15 85/0.15);
  --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_24px_rgba\(0\2c 0\2c 0\2c 0\.4\)\] {
  --tw-shadow: 0 12px 24px rgba(0,0,0,0.4);
  --tw-shadow-colored: 0 12px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_16px_rgba\(212\2c 175\2c 55\2c 0\.5\)\] {
  --tw-shadow: 0 4px 16px rgba(212,175,55,0.5);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_20px_rgba\(212\2c 175\2c 55\2c 0\.12\)\] {
  --tw-shadow: 0 4px 20px rgba(212,175,55,0.12);
  --tw-shadow-colored: 0 4px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_30px_rgba\(212\2c 175\2c 55\2c 0\.1\)\] {
  --tw-shadow: 0 4px 30px rgba(212,175,55,0.1);
  --tw-shadow-colored: 0 4px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_40px_rgba\(212\2c 175\2c 55\2c 0\.12\)\] {
  --tw-shadow: 0 4px 40px rgba(212,175,55,0.12);
  --tw-shadow-colored: 0 4px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_40px_rgba\(212\2c 175\2c 55\2c 0\.2\)\] {
  --tw-shadow: 0 8px 40px rgba(212,175,55,0.2);
  --tw-shadow-colored: 0 8px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card-elevated {
  --tw-shadow: 0 10px 30px oklch(0 0 0 / 0.15), 0 4px 12px oklch(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color), 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card-subtle {
  --tw-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-gold-glow {
  --tw-shadow: 0 2px 6px oklch(0 0 0 / 0.15), 0 6px 16px oklch(0 0 0 / 0.1);
  --tw-shadow-colored: 0 2px 6px var(--tw-shadow-color), 0 6px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-gold-glow-soft {
  --tw-shadow: 0 1px 3px oklch(0 0 0 / 0.08);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-red-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity, 1));
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.will-change-scroll {
  will-change: scroll-position;
}
.will-change-transform {
  will-change: transform;
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.fade-out {
  --tw-exit-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.paused {
  animation-play-state: paused;
}
/* ── Gold border utilities (consume --martinez-gold token) ──────────────── */
.border-gold {
    border: 2px solid var(--martinez-gold);
  }
.border-gold-light {
    border: 2px solid color-mix(in oklch, var(--martinez-gold) 40%, transparent);
  }
.border-gold-thin {
    border: 1px solid var(--martinez-gold);
  }
/* ── Gold divider line — replaces black horizontal lines sitewide ────────── */
/*    A clean 1px brushed-brass gold horizontal rule. Use for the divider
        above "Trust Us", section separators, and any straight hairline that
        previously rendered black. Draws in on `.visible` via width 0→100%. */
.divider-gold {
    display: block;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(
      90deg,
      oklch(0.74 0.13 82) 0%,
      oklch(0.8 0.12 85) 50%,
      oklch(0.74 0.13 82) 100%
    );
  }
/* ── Gold section divider — guaranteed gold hairline for section breaks ── */
/*    2026 polish: the three homepage section dividers (a) between "What
        Our Customers Say" and "Why Bell County & Central Texas Trust Us",
        (b) the line above "Frequently Asked Questions" under the "See Full
        Gallery" button, and (c) the line under "Frequently Asked Questions"
        MUST render gold. Apply this class to any of those divider lines to
        force the brushed-brass gold accent. 2px for legibility on mobile. */
.section-divider-gold {
    display: block;
    width: 100%;
    height: 2px;
    border: none;
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      oklch(0.74 0.13 82) 18%,
      oklch(0.8 0.12 85) 50%,
      oklch(0.74 0.13 82) 82%,
      transparent 100%
    );
  }
/* ── Mobile horizontal scroll / carousel strip ─────────────────────────── */
/*    2026 polish: lets content sit side-by-side on phones with a smooth
        horizontal snap-scroll instead of endless vertical stacking. Apply
        .mobile-hscroll to a flex container and .mobile-hscroll-item to each
        child (fixed min-width so they snap as cards). Text stays readable —
        item text uses the body font at a comfortable size. */
@media (max-width: 768px) {
    .mobile-hscroll {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 0.75rem;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      scrollbar-color: oklch(0.74 0.13 82 / 0.5) transparent;
      padding-bottom: 0.5rem;
      margin-right: -0.9rem;
      padding-right: 0.9rem;
    }

    .mobile-hscroll-item {
      flex: 0 0 78%;
      scroll-snap-align: start;
      min-width: 0;
    }

    .mobile-hscroll-item.mobile-hscroll-half {
      flex: 0 0 46%;
    }

    .mobile-hscroll::-webkit-scrollbar {
      height: 6px;
    }

    .mobile-hscroll::-webkit-scrollbar-thumb {
      background: oklch(0.74 0.13 82 / 0.45);
      border-radius: 3px;
    }
  }
/* ── Gold image outline — 2px gold frame around photos/gallery images ────── */
/*    Matches the gold-outline treatment requested for gallery image frames.
        Uses a crisp 2px gold border + faint gold glow so images read as framed
        premium assets against warm-white surfaces. */
.img-gold-outline {
    border: 2px solid var(--martinez-gold);
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px oklch(0.74 0.13 82 / 0.18), 0 8px 24px
      oklch(0 0 0 / 0.1);
  }
/* ── Gold button box — gold box, black text, gold text on hover ──────────── */
/*    Learn More / Get Quote buttons: a solid gold box with charcoal/black
        ink for AA+ contrast. On hover the box brightens and the label turns
        gold (over a deeper gold fill) — the requested "Learn More text turns
        gold on hover" behavior. 60px min touch target. */
.btn-gold-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    min-height: 60px;
    color: oklch(0.18 0.008 65);
    background-color: var(--martinez-gold);
    background-image: linear-gradient(
      135deg,
      oklch(0.74 0.13 82) 0%,
      oklch(0.8 0.12 85) 50%,
      oklch(0.74 0.13 82) 100%
    );
    border: 1px solid oklch(0.62 0.13 76);
    box-shadow: 0 2px 6px oklch(0.74 0.13 82 / 0.3), inset 0 1px 0
      oklch(0.92 0.1 82 / 0.5);
    transition: transform 0.2s ease, box-shadow 0.3s ease, color 0.2s ease,
      background-image 0.2s ease;
    cursor: pointer;
    text-decoration: none;
  }
.btn-gold-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px oklch(0 0 0 / 0.12);
    background-image: linear-gradient(
      135deg,
      oklch(0.8 0.12 85) 0%,
      oklch(0.74 0.13 82) 50%,
      oklch(0.8 0.12 85) 100%
    );
    color: var(--martinez-gold);
  }
.btn-gold-box:active {
    transform: translateY(0) scale(0.98);
  }
/* ── Gold FAQ divider — gold hairline between FAQ items ──────────────────── */
/*    Replaces black FAQ separators with a thin gold rule so the accordion
        reads as part of the gold/black/white brand system. */
.faq-divider-gold {
    height: 1px;
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      oklch(0.74 0.13 82 / 0.55) 50%,
      transparent 100%
    );
  }
/* ── Gold circular-frame icon — matches the roofing_system value props ───── */
/*    The 5 value-proposition icons in the attached roofing-system infographic
        are gold line-art symbols enclosed in thin gold circular frames,
        medium-weight stroke, metallic gold gradient. This is the exact style
        the concrete icon must match sitewide. Apply to the icon's wrapper:
        a thin 1.5px gold circle frame with a centered gold line-art glyph. */
.icon-gold-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 1.5px solid var(--martinez-gold);
    color: var(--martinez-gold);
    background: transparent;
    flex-shrink: 0;
  }
.icon-gold-circle svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
/* Larger variant for hero/feature blocks */
.icon-gold-circle-lg {
    width: 4rem;
    height: 4rem;
  }
.icon-gold-circle-lg svg {
    width: 2rem;
    height: 2rem;
  }
/* ── Premium shadow hierarchy ──────────────────────────────────────────── */
/*    Service-card button glow NEUTRALIZED (2026 polish): the gold glow /
        hover glow classes below no longer emit a gold box-shadow. Buttons
        stay plain black with no glow on hover. Only neutral dark shadows
        remain for elevation. */
.shadow-gold-glow {
    box-shadow: 0 2px 6px oklch(0 0 0 / 0.15), 0 6px 16px oklch(0 0 0 / 0.1);
  }
.shadow-gold-glow-soft {
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.08);
  }
.shadow-card-elevated {
    box-shadow: 0 10px 30px oklch(0 0 0 / 0.15), 0 4px 12px oklch(0 0 0 / 0.1);
  }
.shadow-card-subtle {
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  }
.gold-glow-hover {
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s
      ease;
  }
.gold-glow-hover:hover {
    box-shadow: 0 2px 6px oklch(0 0 0 / 0.12);
    border-color: var(--martinez-gold);
    transform: translateY(-2px);
  }
/* ── Trust badge styling ────────────────────────────────────────────────── */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  background-color: oklch(var(--primary) / 0.05);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
    border: 2px solid color-mix(in oklch, var(--martinez-gold) 40%, transparent);
}
@media print {
  .trust-badge {
    border: 1px solid #1a1a1a;
  }
}
/* ── Card styling premium ───────────────────────────────────────────────── */
.card-premium {
  border-radius: var(--radius);
  border-width: 1px;
  background-color: oklch(var(--card));
  --tw-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    border: 1px solid var(--martinez-gold);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
}
@media print {
  .card-premium {
    border: 1px solid #1a1a1a;
  }
}
.card-premium-hover {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  animation-duration: 300ms;
}
.card-premium-hover:hover {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
  --tw-shadow: 0 10px 30px oklch(0 0 0 / 0.15), 0 4px 12px oklch(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color), 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    box-shadow: 0 10px 30px oklch(0 0 0 / 0.15), 0 4px 12px oklch(0 0 0 / 0.1);
}
/* ── Typography refinement ──────────────────────────────────────────────── */
.headline-hero {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
@media (max-width: 767px) {
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */

    /* Cards: smaller padding, tighter gaps */

    /* Stats section compact */
    .text-5xl.md\:text-6xl.headline-hero {
      font-size: 2rem;
    }

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
  }
.headline-section {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 900;
  line-height: 1.375;
}
@media (max-width: 767px) {
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */

    /* Cards: smaller padding, tighter gaps */

    /* Stats section compact */
    .text-5xl.md\:text-6xl.headline-section {
      font-size: 2rem;
    }

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
  }
@media (min-width: 768px) {
  .headline-section {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}
.text-emphasis {
  font-weight: 700;
  color: oklch(var(--foreground));
}
/* ── Space Grotesk display typography ────────────────────────────────────── */
.font-display {
    font-family: var(--font-display);
  }
.headline-serif {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
  }
.headline-serif-hero {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
  }
/* ── Instrument Serif italic script accent ─────────────────────────────── */
.font-script {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 400;
  }
.script-accent {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
/* ── Toned-down brushed brass gold gradients ─────────────────────────────── */
/*    Brushed brass range oklch(0.74 0.13 82) → oklch(0.8 0.12 85) →
        oklch(0.74 0.13 82). No cream highlight, no harsh shine. Refined,
        quiet-luxury metallic finish. Use on text, borders, badges, dividers. */
.gold-metallic {
    background-image: linear-gradient(
      135deg,
      oklch(0.74 0.13 82) 0%,
      oklch(0.8 0.12 85) 50%,
      oklch(0.74 0.13 82) 100%
    );
  }
.gold-metallic-text {
    background-image: linear-gradient(
      135deg,
      oklch(0.74 0.13 82) 0%,
      oklch(0.8 0.12 85) 50%,
      oklch(0.74 0.13 82) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
.gold-line {
    background-image: linear-gradient(
      90deg,
      oklch(0.74 0.13 82) 0%,
      oklch(0.8 0.12 85) 50%,
      oklch(0.74 0.13 82) 100%
    );
  }
.gold-badge-bg {
    /* Basic gold-yellow — flat, no metallic sheen, no cream highlight. */
    background-color: var(--badge-gold);
    background-image: linear-gradient(
      135deg,
      var(--badge-gold) 0%,
      var(--badge-gold-deep) 100%
    );
  }
/* ── Marble texture utilities ────────────────────────────────────────────── */
/*    Subtle marble veining overlay — used on hero, service cards, CTA
        banners, footer, About/Insurance hero sections. Layered radial +
        linear gradients in warm white + faint charcoal veins. */
.marble-texture {
    background-color: oklch(0.985 0.008 75);
    background-image: radial-gradient(
        ellipse 80% 60% at 20% 30%,
        oklch(0.96 0.008 75 / 0.6) 0%,
        transparent 50%
      ),
      radial-gradient(
        ellipse 60% 80% at 80% 70%,
        oklch(0.94 0.01 70 / 0.4) 0%,
        transparent 50%
      ),
      linear-gradient(
        115deg,
        oklch(0.985 0.008 75) 0%,
        oklch(0.97 0.006 75) 40%,
        oklch(0.985 0.008 75) 60%,
        oklch(0.96 0.008 75) 100%
      ),
      linear-gradient(
        65deg,
        transparent 30%,
        oklch(0.18 0.008 65 / 0.03) 50%,
        transparent 70%
      );
    background-size: 100% 100%, 100% 100%, 100% 100%, 200% 100%;
  }
.marble-texture-subtle {
    background-color: oklch(0.985 0.008 75);
    background-image: radial-gradient(
        ellipse 70% 50% at 30% 40%,
        oklch(0.96 0.008 75 / 0.4) 0%,
        transparent 60%
      ),
      linear-gradient(
        115deg,
        oklch(0.985 0.008 75) 0%,
        oklch(0.975 0.006 75) 50%,
        oklch(0.985 0.008 75) 100%
      );
  }
/* ── Curved gold divider — signature curve from the business card ─────────── */
/*    Replaces all straight gold lines sitewide. A curved SVG divider that
        draws inward on scroll. Use as a section boundary or hero divider. */
.curved-gold-divider {
    position: relative;
    width: 100%;
    height: 40px;
    overflow: hidden;
    pointer-events: none;
  }
.curved-gold-divider::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0,20 C300,0 900,40 1200,20' fill='none' stroke='%23' stroke-width='2'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
.curved-gold-divider::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0,20 C300,0 900,40 1200,20' fill='none' stroke='oklch(0.74 0.13 82)' stroke-width='2' stroke-dasharray='1600' stroke-dashoffset='1600'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  }
.curved-gold-divider.visible::after {
    stroke-dashoffset: 0;
  }
/* ── Curved divider draw — animated draw-in variant ───────────────────────── */
.curved-divider-draw {
    position: relative;
    width: 100%;
    height: 40px;
    overflow: hidden;
    pointer-events: none;
  }
.curved-divider-draw svg {
    width: 100%;
    height: 100%;
    display: block;
  }
.curved-divider-draw svg path {
    fill: none;
    stroke: oklch(0.74 0.13 82);
    stroke-width: 2;
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
  }
.curved-divider-draw.visible svg path {
    stroke-dashoffset: 0;
  }
/* ── Gold seal motif utilities ────────────────────────────────────────────── */
/*    Circular gold seal (MC monogram, Texas outline, EST. 2006) reused as
        watermark, divider center, loader, and hover state. */
.seal-watermark {
    position: absolute;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='46' fill='none' stroke='oklch(0.74 0.13 82)' stroke-width='2'/><circle cx='50' cy='50' r='40' fill='none' stroke='oklch(0.74 0.13 82)' stroke-width='1'/><text x='50' y='44' text-anchor='middle' font-family='serif' font-size='14' font-weight='700' fill='oklch(0.74 0.13 82)'>MC</text><text x='50' y='60' text-anchor='middle' font-family='serif' font-size='6' fill='oklch(0.74 0.13 82)'>EST. 2006</text><text x='50' y='70' text-anchor='middle' font-family='serif' font-size='5' fill='oklch(0.74 0.13 82)'>TEXAS</text></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
/* ── Seal loader — rotating gold seal for first-load spinner ──────────────── */
.seal-loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid oklch(0.74 0.13 82 / 0.2);
    border-top-color: oklch(0.74 0.13 82);
    animation: sealSpin 0.9s linear infinite;
    position: relative;
  }
.seal-loader::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px solid oklch(0.74 0.13 82 / 0.3);
    border-bottom-color: oklch(0.8 0.12 85);
    animation: sealSpin 1.4s linear infinite reverse;
  }
@keyframes sealSpin {
    to {
      transform: rotate(360deg);
    }
  }
/* ── Seal hover — gold seal draws in on hover for trust badges ────────────── */
.seal-hover {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
.seal-hover::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid oklch(0.74 0.13 82 / 0.4);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s ease, transform 0.4s
      cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
  }
.seal-hover:hover::before {
    opacity: 1;
    transform: scale(1);
  }
.seal-hover:hover {
    transform: translateY(-2px);
  }
/* White-circle seals get a soft gold-tinted lift on hover so the disc
     reads as a distinct premium chip against both light and dark backgrounds.
     Only transform + opacity animate; the shadow is a filter, not layout. */
.seal-hover:hover svg {
    filter: drop-shadow(0 4px 10px oklch(0.74 0.13 82 / 0.22));
    transition: filter 0.3s ease;
  }
/* ── Draw-line — gold line draws width 0 → 100% on scroll-reveal visible ── */
.draw-line {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    overflow: hidden;
  }
.draw-line::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 0%;
    height: 100%;
    background-image: linear-gradient(
      90deg,
      oklch(0.74 0.13 82) 0%,
      oklch(0.8 0.12 85) 50%,
      oklch(0.74 0.13 82) 100%
    );
    transition: width 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.15s;
  }
.draw-line.visible::after {
    width: 100%;
  }
/* ── Card-lift — translateY(-4px) + toned gold glow on hover ─────────────── */
/*    Resting state carries a 1px gold outline (never black) so service
        cards read as gold-outlined even before hover. Hover lifts + glows. */
.card-lift {
    border: 1px solid var(--martinez-gold);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow
      0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.35s ease;
    will-change: transform;
  }
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 20px oklch(0.74 0.13 82 / 0.18), 0 0 40px
      oklch(0.74 0.13 82 / 0.08), 0 12px 32px oklch(0 0 0 / 0.12);
    border-color: var(--martinez-gold);
  }
/* ── Fade-in-soft — gentle opacity-only entrance ────────────────────────── */
.fade-in-soft {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
  }
.fade-in-soft.visible {
    opacity: 1;
  }
/* ── Compact premium spacing — nothing oversized ────────────────────────── */
.section-tight {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
@media (min-width: 768px) {
    .section-tight {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
  }
.section-premium {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
@media (min-width: 768px) {
    .section-premium {
      padding-top: 5.5rem;
      padding-bottom: 5.5rem;
    }
  }
.stack-tight {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
.gap-premium {
    gap: 1.25rem;
  }
@media (min-width: 768px) {
    .gap-premium {
      gap: 1.75rem;
    }
  }
/* ── Navbar pill badge — small gold pill for 'Se Habla Español' ─────────── */
/*    Compact, subtle, never dominant. Sits in the navbar (desktop + the
         compressed mobile navbar) and the contact form only — exactly 3
         placements sitewide. Uses the basic gold-yellow badge token (flat,
         NOT brushed brass) with charcoal text for AA+ contrast on the gold
         pill, and a faint warm-white text variant for use on the dark
         charcoal navbar via .nav-pill-badge-on-dark. */
.nav-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    background-color: var(--badge-gold);
    background-image: linear-gradient(
      135deg,
      var(--badge-gold) 0%,
      var(--badge-gold-deep) 100%
    );
    color: oklch(0.18 0.008 65);
    border: 1px solid var(--badge-gold-deep);
    box-shadow: 0 1px 2px oklch(0.72 0.16 82 / 0.25);
  }
/* Pill badge on the dark charcoal navbar — text switches to warm white so
     the pill reads cleanly against the dark nav background while the gold
     pill fill stays the same. */
.nav-pill-badge-on-dark {
    color: oklch(0.985 0.008 75);
  }
/* ── Compressed desktop-style mobile navbar ─────────────────────────────── */
/*    Mobile navbar is COMPRESSED, not collapsed. It keeps the desktop
         horizontal link row visible (smaller text, tighter gaps) instead of
         hiding behind a hamburger. A "More" text link opens the overflow
         (Services dropdown + secondary links) — never a hamburger icon.
         Touch targets stay ≥44px. Scoped to max-width: 768px. */
@media (max-width: 768px) {
    .navbar-mobile-compressed {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.4rem 0.6rem;
      min-height: 56px;
    }

    .navbar-mobile-compressed .nav-link-compressed {
      display: inline-flex;
      align-items: center;
      padding: 0.4rem 0.5rem;
      font-family: var(--font-display);
      font-size: 0.78rem;
      font-weight: 600;
      line-height: 1;
      color: oklch(0.985 0.008 75);
      min-height: 44px;
      white-space: nowrap;
      transition: color 0.2s ease;
    }

    .navbar-mobile-compressed .nav-link-compressed:hover,
    .navbar-mobile-compressed .nav-link-compressed.active {
      color: var(--badge-gold);
    }

    /* "More" overflow trigger — text label, NOT a hamburger icon */
    .navbar-mobile-compressed .nav-more-trigger {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      padding: 0.4rem 0.5rem;
      font-family: var(--font-display);
      font-size: 0.78rem;
      font-weight: 600;
      line-height: 1;
      color: oklch(0.985 0.008 75);
      min-height: 44px;
      white-space: nowrap;
      background: transparent;
      border: none;
      cursor: pointer;
    }

    .navbar-mobile-compressed .nav-more-trigger:hover {
      color: var(--badge-gold);
    }

    /* Overflow panel — slides down under the compressed row, full-width
       charcoal surface matching the navbar, with the remaining links + the
       Services dropdown + Se Habla Español pill (only if not already in the
       compressed row). */
    .navbar-mobile-overflow {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: oklch(0.13 0.012 50);
      border-top: 1px solid oklch(0.74 0.13 82 / 0.3);
      box-shadow: 0 12px 24px oklch(0 0 0 / 0.4);
      padding: 0.5rem 0.75rem 0.75rem;
      z-index: 50;
    }

    .navbar-mobile-overflow .overflow-link {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 0.5rem 0.25rem;
      font-family: var(--font-display);
      font-size: 0.85rem;
      font-weight: 600;
      color: oklch(0.985 0.008 75);
      border-bottom: 1px solid oklch(0.74 0.13 82 / 0.15);
    }

    .navbar-mobile-overflow .overflow-link:last-child {
      border-bottom: none;
    }

    .navbar-mobile-overflow .overflow-link:hover,
    .navbar-mobile-overflow .overflow-link.active {
      color: var(--badge-gold);
    }

    
    .navbar-mobile-compressed .nav-link-compressed.\!active {
      color: var(--badge-gold) !important;
    }

    /* "More" overflow trigger — text label, NOT a hamburger icon */

    /* Overflow panel — slides down under the compressed row, full-width
       charcoal surface matching the navbar, with the remaining links + the
       Services dropdown + Se Habla Español pill (only if not already in the
       compressed row). */

    
    .navbar-mobile-overflow .overflow-link.\!active {
      color: var(--badge-gold) !important;
    }

    
    .navbar-mobile-compressed .nav-link-compressed.\!active {
      color: var(--badge-gold) !important;
    }

    /* "More" overflow trigger — text label, NOT a hamburger icon */

    /* Overflow panel — slides down under the compressed row, full-width
       charcoal surface matching the navbar, with the remaining links + the
       Services dropdown + Se Habla Español pill (only if not already in the
       compressed row). */

    
    .navbar-mobile-overflow .overflow-link.\!active {
      color: var(--badge-gold) !important;
    }
  }
/* ── Call This Lead button — proper gold button for lead cards ──────────── */
/*    A solid gold CTA used on lead cards / detail pages to dial the main
         phone (254-245-5846). Renders as a real <a>/<button>, never raw HTML.
         Label shows "Call Now" only — never the number. Uses the brushed
         brass gold gradient (non-badge) so it reads as a primary action,
         distinct from the flat gold-yellow badges. */
.btn-call-lead {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    border-radius: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    min-height: 56px;
    color: oklch(0.985 0.008 75);
    background-image: linear-gradient(
      135deg,
      oklch(0.74 0.13 82) 0%,
      oklch(0.8 0.12 85) 50%,
      oklch(0.74 0.13 82) 100%
    );
    border: 1px solid oklch(0.56 0.11 75);
    box-shadow: 0 2px 6px oklch(0.74 0.13 82 / 0.3), inset 0 1px 0
      oklch(0.82 0.12 80 / 0.4);
    transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.2s ease;
    cursor: pointer;
    text-decoration: none;
  }
.btn-call-lead:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px oklch(0 0 0 / 0.12);
    filter: brightness(1.05);
  }
.btn-call-lead:active {
    transform: translateY(0) scale(0.98);
  }
.btn-call-lead svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
  }
/* ── Subtle city image — small, non-dominant per-city photo ──────────────── */
/*    Used on each of the 10 city pages. Small (max 400px wide), 16:9,
         rounded, thin gold border, lazy-loaded, never a hero block. Sits
         beside or just above the local intro paragraph as a quiet visual
         anchor — the daylight Bell County hero stays the page signature. */
.city-image-subtle {
    display: block;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid oklch(0.74 0.13 82 / 0.35);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
    background-color: oklch(0.96 0.008 75);
  }
.city-image-wrap {
    max-width: 400px;
    margin: 0 auto 1.25rem;
  }
.city-image-caption {
    margin-top: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--muted-foreground);
    text-align: center;
    letter-spacing: 0.01em;
  }
/* ── Cohesive brand tokens ──────────────────────────────────────────────── */
.badge-premium {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
    /* Basic gold-yellow — flat 2-stop, no cream highlight, no metallic sheen. */
    background-color: var(--badge-gold);
    background-image: linear-gradient(
      135deg,
      var(--badge-gold) 0%,
      var(--badge-gold-deep) 100%
    );
    color: oklch(0.18 0.008 65);
    border: 1px solid var(--badge-gold-deep);
    box-shadow: 0 1px 2px oklch(0.72 0.16 82 / 0.25);
}
/* ── Badge-on-dark — readable text when a badge sits on a black/dark bg ──── */
/*    Apply alongside .badge-premium or .gold-badge-bg. Switches text to
        warm white so the badge reads cleanly on charcoal/deep-charcoal. */
.badge-on-dark {
    color: oklch(0.985 0.008 75);
  }
.badge-on-dark-gold {
    color: var(--badge-gold);
  }
/* ── Readable service badge — white bg, charcoal text, gold-yellow accent ── */
/*    Replaces the unreadable black-background badges on service pages.
        White surface guarantees legibility on every badge regardless of the
        surrounding section. Gold-yellow is used ONLY as a thin border +
        subtle glow accent — never as the fill — so the badge stays readable
        while still reading as part of the gold/black/white brand system. */
.badge-readable {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    background-color: oklch(0.99 0.005 75);
    color: var(--martinez-charcoal);
    border: 1px solid var(--badge-gold);
    box-shadow: 0 1px 3px oklch(0.82 0.16 85 / 0.18), inset 0 1px 0
      oklch(0.995 0.006 75 / 0.9);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
  }
.badge-readable:hover {
    border-color: var(--badge-gold-deep);
    box-shadow: 0 2px 8px oklch(0.82 0.16 85 / 0.28), inset 0 1px 0
      oklch(0.995 0.006 75 / 0.9);
  }
/* ── Premium city-page hero — warm gradient overlay + centered content ───── */
/*    Layered warm gradient from transparent → charcoal/70 so daylight city
        imagery reads cleanly at the top and fades to charcoal at the base,
        where the headline + sub copy sit. min-height keeps the hero
        substantial without forcing a fixed pixel height. Centered content
        via flex column. Pair with .city-image-subtle for the quiet city
        anchor image below the hero. */
.city-hero-premium {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 320px;
    padding: 3rem 1.5rem 2.5rem;
    overflow: hidden;
    background-color: var(--martinez-deep-charcoal);
  }
@media (min-width: 768px) {
    .city-hero-premium {
      min-height: 420px;
      padding: 4.5rem 2rem 3.5rem;
    }
  }
.city-hero-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      oklch(0.13 0.012 50 / 0.2) 45%,
      oklch(0.13 0.012 50 / 0.45) 100%
    );
    pointer-events: none;
    z-index: 0;
  }
.city-hero-premium > * {
    position: relative;
    z-index: 1;
  }
.city-hero-premium h1,
  .city-hero-premium h2 {
    color: oklch(0.985 0.008 75);
    text-align: center;
    max-width: 760px;
  }
.city-hero-premium p {
    color: oklch(0.985 0.008 75 / 0.85);
    text-align: center;
    max-width: 640px;
  }
/* ── Premium service-card hover — gold accent border + lift ──────────────── */
/*    A refined hover state for service cards: gold accent border draws in,
        card lifts -4px, smooth transition. Distinct from .card-lift by
        scoping the accent to the border (not a full glow) so the lift reads
        as a quiet premium gesture rather than a flashy effect. */
.service-card-premium {
    border: 1px solid var(--martinez-gold);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      border-color 0.35s ease, box-shadow 0.35s
      cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }
.service-card-premium:hover {
    transform: translateY(-4px);
    border-color: var(--martinez-gold);
    box-shadow: 0 12px 28px oklch(0 0 0 / 0.1), 0 0 0 1px
      oklch(0.74 0.13 82 / 0.25);
  }
/* ── Premium review-quote card — warm-white bg + gold left accent ─────────── */
/*    Warm-white surface with a gold left border accent (4px) signals a
        pull-quote / testimonial. Pair with .quote-mark-bg for the decorative
        opening quote. Quote styling: serif body, tighter line-height, and a
        muted attribution row. */
.review-card-premium {
    position: relative;
    background-color: oklch(0.985 0.008 75);
    border: 1px solid oklch(0.74 0.13 82 / 0.18);
    border-left: 4px solid var(--martinez-gold);
    border-radius: 0.5rem;
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: 0 2px 10px oklch(0 0 0 / 0.05), inset 0 1px 0
      oklch(0.995 0.006 75 / 0.8);
  }
.review-card-premium > p,
  .review-card-premium .review-quote {
    font-family: var(--font-script);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--martinez-charcoal);
  }
.review-card-premium .review-attribution {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
/* ── Neighborhood pill grid — gold-tinted bg, dark text, rounded-full ─────── */
/*    Small pills for the neighborhoods-served list on city pages. Gold-tinted
        (NOT solid gold) background keeps them quiet and readable; dark
        charcoal text. Hover deepens the gold tint + lifts slightly. */
.neighborhood-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.95rem;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    background-color: oklch(0.82 0.16 85 / 0.14);
    color: var(--martinez-charcoal);
    border: 1px solid oklch(0.82 0.16 85 / 0.35);
    transition: background-color 0.25s ease, border-color 0.25s ease, transform
      0.2s ease;
  }
.neighborhood-pill:hover {
    background-color: oklch(0.82 0.16 85 / 0.24);
    border-color: oklch(0.82 0.16 85 / 0.6);
    transform: translateY(-1px);
  }
/* ── Nav marble streaks — VERY faint gold veining over dark charcoal ────── */
/*    Layered faint gold-tinted radial + linear gradients at 3-6% opacity
        to suggest marble veining. The background still reads as dark
        charcoal — the streaks are a whisper, not a wash. */
.nav-marble-streaks {
    background-color: oklch(0.18 0.008 65);
    background-image: radial-gradient(
        ellipse 70% 120% at 18% 20%,
        oklch(0.82 0.16 85 / 0.05) 0%,
        transparent 55%
      ),
      radial-gradient(
        ellipse 50% 140% at 82% 80%,
        oklch(0.82 0.16 85 / 0.04) 0%,
        transparent 60%
      ),
      linear-gradient(
        118deg,
        transparent 28%,
        oklch(0.82 0.16 85 / 0.035) 42%,
        transparent 52%
      ),
      linear-gradient(
        72deg,
        transparent 35%,
        oklch(0.82 0.16 85 / 0.03) 48%,
        transparent 58%
      ),
      linear-gradient(
        95deg,
        transparent 60%,
        oklch(0.82 0.16 85 / 0.025) 70%,
        transparent 80%
      );
    background-size: 100% 100%, 100% 100%, 220% 100%, 200% 100%, 240% 100%;
  }
.section-premium-bg {
    background: linear-gradient(
      180deg,
      oklch(0.985 0.008 75) 0%,
      oklch(0.96 0.008 75) 50%,
      oklch(0.985 0.008 75) 100%
    );
  }
/* ── Refined card-premium — toned gold border + soft inner highlight ────── */
.card-premium {
  border-radius: var(--radius);
  background-color: oklch(var(--card));
  --tw-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
    border: 1px solid oklch(0.74 0.13 82 / 0.35);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.06), inset 0 1px 0
      oklch(0.99 0.006 75 / 0.8);
}
/* ── FAQ accordion — contained width + white-open / gold-text states ─────── */
/*    The whole accordion is capped at --faq-max-width (560px desktop) and
       centered so it never stretches edge-to-edge. Two-column mode splits
       that contained width in half — each column is tight. Override per-page
       by setting --faq-max-width on a wrapper. Mobile gets a distinct,
       narrower cap with real side gutters (see .faq-accordion-mobile below). */
.faq-accordion {
    --faq-max-width: 560px;
    max-width: var(--faq-max-width);
    margin-left: auto;
    margin-right: auto;
  }
/* ── FAQ header — tighter, more scannable ─────────────────────────────────── */
.faq-header {
    max-width: 100%;
  }
.faq-title {
    letter-spacing: -0.01em;
  }
/* ── FAQ columns independent — side-by-side columns don't match heights ─── */
.faq-columns-independent {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
  }
.faq-columns-independent > * {
    flex: 1 1 0;
    min-width: 0;
    align-self: flex-start;
  }
/* ── FAQ card states ─────────────────────────────────────────────────────── */
/*    Closed: white card, thin gold border, ALL text black.
       Open: card stays WHITE (not gold). Question stays bold black.
       Answer: **bold** segments render BOLDED BLACK, the rest renders
       martinez-gold (gold accent on white — readable + on-brand). */
.faq-card {
    border-radius: 0.75rem;
  }
.faq-card-closed .faq-question {
    color: #1a1a1a;
  }
.faq-card-open {
    background-color: #ffffff;
    border-color: #d4af37;
    box-shadow: 0 4px 16px oklch(0.74 0.13 82 / 0.18);
  }
.faq-card-open .faq-question-open {
    color: #000;
  }
/* Answer text on the white open-state box: charcoal for body (WCAG AA),
     gold reserved for bold accent segments only. Gold #d4af37 on white
     fails WCAG AA (~2.6:1) for body text, so the non-bold answer text
     uses charcoal #1a1a1a and gold is used only for the bold accents. */
.faq-answer-open .faq-answer-text {
    color: #1a1a1a;
    /* 2026 polish — visible gold glow on the answer text when the FAQ is
       open. Charcoal body color is preserved for WCAG AA readability; the
       layered oklch gold text-shadow is a clearly perceptible premium glow
       (not a color change) that reads as gold radiating around the text. */
    text-shadow: 0 0 4px oklch(0.74 0.13 82 / 0.55), 0 0 10px
      oklch(0.74 0.13 82 / 0.4), 0 0 22px oklch(0.74 0.13 82 / 0.28);
  }
.faq-answer-open .faq-answer-bold {
    color: #d4af37;
    /* Bold accent segments get an even stronger gold glow so the
       highlighted answer phrases visibly radiate when the FAQ is open. */
    text-shadow: 0 0 4px oklch(0.74 0.13 82 / 0.7), 0 0 10px
      oklch(0.74 0.13 82 / 0.5), 0 0 20px oklch(0.74 0.13 82 / 0.35);
  }
/* ── FAQ mobile — distinct native treatment ──────────────────────────────── */
/*    Narrower cap so boxes don't stretch edge-to-edge on phones — leaves
       real side gutters. Comfortable tap targets (≥48px), readable text size,
       smooth open/close animation. Scoped to max-width: 768px. Desktop is
       NEVER affected. */
@media (max-width: 768px) {
    .faq-accordion {
      --faq-max-width: 92vw;
      max-width: min(92vw, 460px);
      padding-left: 0;
      padding-right: 0;
    }

    .faq-columns-independent {
      gap: 0.75rem;
    }

    .faq-list-single,
    .faq-column {
      gap: 0.75rem;
    }

    .faq-card {
      border-radius: 0.625rem;
    }

    .faq-question-btn {
      min-height: 48px !important;
      padding: 0.875rem 1rem !important;
      gap: 0.75rem !important;
    }

    .faq-question {
      font-size: 0.9rem !important;
      line-height: 1.35 !important;
    }

    .faq-icon {
      width: 1.5rem !important;
      height: 1.5rem !important;
    }

    .faq-answer {
      padding: 0.5rem 1rem 1rem !important;
      font-size: 0.875rem !important;
      line-height: 1.6 !important;
    }

    .faq-answer-open {
      border-top-color: oklch(0.74 0.13 82 / 0.2) !important;
    }

    /* Smooth open/close on mobile — slightly snappier easing for a native feel */
    .faq-answer-wrap {
      transition: max-height 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity
        0.22s ease !important;
    }
  }
/* Very small phones — keep boxes readable, never edge-to-edge */
@media (max-width: 380px) {
    .faq-accordion {
      max-width: 94vw;
    }

    .faq-question {
      font-size: 0.85rem !important;
    }

    .faq-answer {
      font-size: 0.82rem !important;
    }
  }
/* ── Fast image loading — content-visibility + will-change hints ─────────── */
/*    2026 polish: below-fold sections skip layout/paint until they scroll
        near the viewport (content-visibility: auto) so the page paints
        instantly. Images decode crisply and get will-change hints for smooth
        GPU-accelerated reveal. Preload-friendly — the LCP hero stays above
        the fold and is never deferred. Apply the utility classes in the
        frontend; the gold/dark-charcoal design system is untouched. */
.cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
.cv-auto-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 1px;
  }
.img-render-crisp {
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
.will-change-transform {
    will-change: transform;
  }
.will-change-opacity {
    will-change: opacity;
  }
.will-change-scroll {
    will-change: scroll-position;
  }
/* ── Hero-quiet — deep charcoal bg, single subtle gold radial glow ──────── */
/*    No photo, no pattern. Faint gold hairline via ::before.                */
.hero-quiet {
    position: relative;
    background-color: #1a1a1a;
    background-image: radial-gradient(
      ellipse 60% 50% at 50% 35%,
      oklch(0.74 0.13 82 / 0.12) 0%,
      oklch(0.74 0.13 82 / 0.04) 35%,
      transparent 70%
    );
    overflow: hidden;
  }
.hero-quiet::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 720px;
    height: 1px;
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      oklch(0.74 0.13 82 / 0.5) 50%,
      transparent 100%
    );
  }
/* ── Button styling ─────────────────────────────────────────────────────── */
.btn-primary-gold {
  border-radius: var(--radius);
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  color: oklch(var(--primary-foreground));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  animation-duration: 200ms;
    min-height: 56px;
}
@media (max-width: 767px) {
    /* Ensure no horizontal scroll ever */

    /* Service hero compact on mobile */

    /* Minimum tap target for all interactive elements */

    /* Footer columns stack cleanly */

    /* Map does not overflow */

    /* Responsive map height — shorter on mobile, no horizontal scroll */

    /* ── Mobile dopamine scroll animations ──────────────── */

    /* Smooth scale-up reveal for cards — satisfying spring pop as they enter */

    /* Gold line sweep — draws in from left when section enters */

    /* Slide up with gentle bounce for section headings */

    /* Fade in with slight left-drift for supporting text */

    /* CTA button spring bounce-in */

    /* Staggered card reveals (≈0.07s apart) */

    /* Micro-interaction: button tap feedback */

    /* Visual divider stripe between sections — warm charcoal undertone */

    /* Compact section padding on mobile */

    /* Progress pulse dot */

    /* Shimmer highlight on cards when they enter */
    @keyframes shimmerOnce {
    }

    /* Icon pulse for sticky call button */
    @keyframes iconPulse {
    }

    /* Ensure no horizontal overflow */

    /* Compact hero text on mobile */

    /* Section rhythm — sections don't force minimum height */

    /* Card grid mobile single column */

    /* ── Mobile 2-column grid for cards ─────────────────────────────────── */

    /* ── Compact card — tighter padding for mobile 2-col layout ─────────── */

    /* ── Horizontal steps row — all 3 steps visible at once ─────────────── */

    /* ── FAQ 2-column compact layout ────────────────────────────────────── */
    .mobile-faq-item .btn-primary-gold.pb-6 {
      padding: 0.5rem 0.75rem 0.625rem;
      font-size: 0.6rem;
      line-height: 1.4;
    }

    /* ── City tags horizontal wrap row ──────────────────────────────────── */

    /* ── Emergency strip compact ─────────────────────────────────────────── */
  }
.btn-primary-gold:hover {
  --tw-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
}
.btn-primary-gold:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.btn-secondary-outlined {
  border-radius: var(--radius);
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  animation-duration: 200ms;
    min-height: 56px;
}
@media (max-width: 767px) {
    /* Ensure no horizontal scroll ever */

    /* Service hero compact on mobile */

    /* Minimum tap target for all interactive elements */

    /* Footer columns stack cleanly */

    /* Map does not overflow */

    /* Responsive map height — shorter on mobile, no horizontal scroll */

    /* ── Mobile dopamine scroll animations ──────────────── */

    /* Smooth scale-up reveal for cards — satisfying spring pop as they enter */

    /* Gold line sweep — draws in from left when section enters */

    /* Slide up with gentle bounce for section headings */

    /* Fade in with slight left-drift for supporting text */

    /* CTA button spring bounce-in */

    /* Staggered card reveals (≈0.07s apart) */

    /* Micro-interaction: button tap feedback */

    /* Visual divider stripe between sections — warm charcoal undertone */

    /* Compact section padding on mobile */

    /* Progress pulse dot */

    /* Shimmer highlight on cards when they enter */
    @keyframes shimmerOnce {
    }

    /* Icon pulse for sticky call button */
    @keyframes iconPulse {
    }

    /* Ensure no horizontal overflow */

    /* Compact hero text on mobile */

    /* Section rhythm — sections don't force minimum height */

    /* Card grid mobile single column */

    /* ── Mobile 2-column grid for cards ─────────────────────────────────── */

    /* ── Compact card — tighter padding for mobile 2-col layout ─────────── */

    /* ── Horizontal steps row — all 3 steps visible at once ─────────────── */

    /* ── FAQ 2-column compact layout ────────────────────────────────────── */
    .mobile-faq-item .btn-secondary-outlined.pb-6 {
      padding: 0.5rem 0.75rem 0.625rem;
      font-size: 0.6rem;
      line-height: 1.4;
    }

    /* ── City tags horizontal wrap row ──────────────────────────────────── */

    /* ── Emergency strip compact ─────────────────────────────────────────── */
  }
.btn-secondary-outlined:hover {
  background-color: oklch(var(--primary) / 0.05);
}
.btn-secondary-outlined:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* ── Gallery CTA — rich saturated gold with dark ink text for max contrast ── */
/*    The muted --primary gold washes out against the warm-white gallery
        background (reads white-on-white). This variant uses a richer gold
        (#D4AF37 ≈ oklch(0.74 0.15 80)) with charcoal ink text so the button
        is unambiguously visible. Scoped to the gallery Coming Soon page. */
.btn-gallery-gold {
  border-radius: var(--radius);
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-weight: 600;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  animation-duration: 200ms;
    min-height: 56px;
}
.btn-gallery-gold:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.btn-gallery-gold {
    background: oklch(0.74 0.15 80);
    color: oklch(0.21 0.012 65);
    border: 1px solid oklch(0.62 0.13 76);
    box-shadow: 0 4px 14px oklch(0.74 0.15 80 / 0.35), inset 0 1px 0
      oklch(0.92 0.1 82 / 0.6);
  }
.btn-gallery-gold:hover {
    background: oklch(0.78 0.15 82);
    box-shadow: 0 6px 20px oklch(0.74 0.15 80 / 0.45), inset 0 1px 0
      oklch(0.92 0.1 82 / 0.7);
  }
/* ============================================================
     PREMIUM ESTIMATE FORM — Apple/Samsung 2026 rebuild
     3-color discipline: white bg, charcoal #222 text, gold #D4AF37
     accents. Black submit button only. Inter typography weights:
     400 body, 600 labels, 700 CTAs. Subtle motion, generous
     whitespace (24px padding min, 32px between steps).
     ============================================================ */
/* ── Form container — clean white card, thin gold border ── */
.premium-form {
    position: relative;
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #d4af37;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }
@media (min-width: 768px) {
    .premium-form {
      max-width: 600px;
      padding: 1.25rem;
    }
  }
/* ── Form header — progress bar + step labels ── */
.premium-form-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
  }
/* Progress bar — simple horizontal bar, gold fill on light track */
.premium-form-progress {
    position: relative;
    width: 100%;
    height: 3px;
    border-radius: 9999px;
    background-color: oklch(0.92 0.006 75);
    overflow: hidden;
  }
.premium-form-progress::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--premium-progress, 0%);
    border-radius: 9999px;
    background-color: #d4af37;
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
/* Step labels row — 1. Contact, 2. Service, 3. Details, 4. Review */
.premium-form-step-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
  }
.premium-step-label {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: oklch(0.6 0.006 75);
    transition: color 0.3s ease;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
  }
.premium-step-label.is-active {
    color: #d4af37;
    font-weight: 700;
  }
.premium-step-label.is-complete {
    color: #d4af37;
  }
/* ── Step panel — slide/fade transition between steps ── */
.premium-form-step {
    display: none;
    opacity: 0;
  }
.premium-form-step.is-active {
    display: block;
    opacity: 1;
  }
.premium-form-step.is-entering {
    animation: premiumStepSlideIn 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94)
      forwards;
  }
@keyframes premiumStepSlideIn {
    from {
      opacity: 0;
      transform: translateX(12px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
/* Step heading — charcoal, tight spacing */
.premium-form-step-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #222222;
    margin: 0 0 0.25rem;
  }
@media (min-width: 768px) {
    .premium-form-step-title {
      font-size: 1.3rem;
    }
  }
.premium-form-step-subtitle {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    color: oklch(0.45 0.006 75);
    margin: 0 0 1.1rem;
  }
/* ── Inputs — white bg, gold border, gold focus glow ── */
.premium-form-input,
  .premium-form-textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: #222222;
    background-color: #ffffff;
    border: 1px solid #d4af37;
    border-radius: 0.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 44px;
  }
.premium-form-textarea {
    min-height: 96px;
    resize: vertical;
  }
.premium-form-input::-moz-placeholder, .premium-form-textarea::-moz-placeholder {
    color: oklch(0.65 0.006 75);
  }
.premium-form-input::placeholder,
  .premium-form-textarea::placeholder {
    color: oklch(0.65 0.006 75);
  }
.premium-form-input:focus,
  .premium-form-textarea:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
  }
/* Field wrapper */
.premium-form-field {
    position: relative;
    margin-bottom: 0.875rem;
  }
/* Field label — 600 weight, charcoal, tight */
.premium-form-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #222222;
    margin-bottom: 0.3rem;
  }
/* Field helper / error text */
.premium-form-helper {
    margin-top: 0.3rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    color: oklch(0.55 0.006 75);
  }
.premium-form-helper.is-error {
    color: oklch(0.55 0.18 25);
  }
/* Invalid input state — red border */
.premium-form-input.is-invalid,
  .premium-form-textarea.is-invalid {
    border-color: oklch(0.55 0.18 25);
    box-shadow: 0 0 0 3px oklch(0.55 0.18 25 / 0.1);
  }
/* ── Service selection cards — compact horizontal row ── */
/*    5 tight cards, edge-to-edge with thin gold dividers, no gaps.
        Dense, premium. Selected: border thickens + subtle gold fill tint
        + gold checkmark corner. */
.premium-service-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid #d4af37;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #ffffff;
  }
.premium-service-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.375rem;
    min-height: 60px;
    background-color: #ffffff;
    border: none;
    border-right: 1px solid #d4af37;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-family: var(--font-body);
  }
.premium-service-card:last-child {
    border-right: none;
  }
.premium-service-card:hover {
    background-color: rgba(212, 175, 55, 0.06);
  }
.premium-service-card.is-selected {
    background-color: rgba(212, 175, 55, 0.1);
    box-shadow: inset 0 0 0 2px #d4af37;
    z-index: 1;
  }
/* Service card icon — 22px gold line-art, top-center. lucide-react icons
     (e.g. Wrench) render as <svg> and inherit sizing from this wrapper. */
.premium-service-card-icon {
    width: 22px;
    height: 22px;
    color: #d4af37;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
.premium-service-card-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
/* Service card label — bold uppercase 10-11px, centered below */
.premium-service-card-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    color: #222222;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
/* Selected checkmark corner — gold check */
.premium-service-card-check {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    color: #d4af37;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s
      cubic-bezier(0.34, 1.56, 0.64, 1);
  }
.premium-service-card.is-selected .premium-service-card-check {
    opacity: 1;
    transform: scale(1);
  }
/* ── Scope option cards (Step 3 Details) ── */
.premium-form-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    color: #222222;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #d4af37;
    border-radius: 0.5rem;
    cursor: pointer;
    min-height: 48px;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow
      0.2s ease;
  }
.premium-form-option:hover {
    border-color: #d4af37;
    background-color: rgba(212, 175, 55, 0.06);
  }
.premium-form-option.is-selected {
    border-color: #d4af37;
    border-width: 2px;
    background-color: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 0 1px #d4af37;
  }
/* Selected checkmark indicator */
.premium-form-option .premium-option-check {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 14px;
    height: 14px;
    color: #d4af37;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s
      cubic-bezier(0.34, 1.56, 0.64, 1);
  }
.premium-form-option.is-selected .premium-option-check {
    opacity: 1;
    transform: scale(1);
  }
/* ── Submit button — BLACK bg, gold hover ── */
.premium-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    min-height: 46px;
    color: #ffffff;
    background-color: #000000;
    border: 1px solid #d4af37;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform
      0.1s ease;
  }
.premium-form-button:hover {
    background-color: #d4af37;
    border-color: #d4af37;
    color: #222222;
  }
.premium-form-button:active {
    transform: scale(0.98);
  }
.premium-form-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #000000;
    border-color: #d4af37;
    color: #ffffff;
  }
/* Secondary / back button — outlined, transparent bg */
.premium-form-button.is-secondary {
    background-color: transparent;
    color: #222222;
    border: 1px solid #d4af37;
  }
.premium-form-button.is-secondary:hover {
    background-color: rgba(212, 175, 55, 0.08);
    border-color: #d4af37;
    color: #222222;
  }
/* Button row — back + continue side by side */
.premium-form-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
  }
.premium-form-actions .premium-form-button {
    flex: 1 1 0;
  }
/* ── Loading state ── */
.premium-form-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: #222222;
    background-color: rgba(212, 175, 55, 0.08);
    border: 1px solid #d4af37;
    border-radius: 0.5rem;
    min-height: 46px;
  }
.premium-form-loading-spinner {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.25);
    border-top-color: #d4af37;
    animation: premiumGoldSpin 0.9s linear infinite;
    flex-shrink: 0;
  }
@keyframes premiumGoldSpin {
    to {
      transform: rotate(360deg);
    }
  }
/* ── Success state — premium thank-you screen ── */
.premium-form-success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.25rem 1.25rem 1.5rem;
    animation: premiumStepSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
      forwards;
  }
.premium-form-success.is-visible {
    display: flex;
  }
/* Checkmark circle — gold ring draws in, then the check draws */
.premium-form-checkmark {
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 1.25rem;
  }
.premium-form-checkmark svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
.premium-form-checkmark .premium-checkmark-circle {
    fill: none;
    stroke: #d4af37;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 276;
    stroke-dashoffset: 276;
    animation: premiumCheckmarkDraw 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }
.premium-form-checkmark .premium-checkmark-stroke {
    fill: none;
    stroke: #d4af37;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: premiumCheckmarkDraw 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.45s
      forwards;
  }
@keyframes premiumCheckmarkDraw {
    to {
      stroke-dashoffset: 0;
    }
  }
.premium-form-success-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #222222;
    margin: 0 0 0.5rem;
  }
.premium-form-success-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    color: oklch(0.4 0.006 75);
    margin: 0 0 1.5rem;
    max-width: 380px;
  }
/* "If you have any questions, call" — subtle lead-in to the gold button */
.premium-form-success-callout {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    color: oklch(0.5 0.006 75);
    margin: 0 0 0.625rem;
  }
/* Gold call button — prominent, on-brand. Solid gold bg, charcoal text,
     phone icon. Stands apart from the black submit button used elsewhere. */
.premium-form-success-call-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    min-height: 52px;
    color: #1a1a1a;
    background-color: #d4af37;
    border: 1px solid #d4af37;
    border-radius: 9999px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow
      0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
  }
.premium-form-success-call-button svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }
.premium-form-success-call-button:hover {
    background-color: #c9a52f;
    border-color: #c9a52f;
    box-shadow: 0 6px 22px rgba(212, 175, 55, 0.5);
    transform: translateY(-1px);
  }
.premium-form-success-call-button:active {
    transform: scale(0.98);
  }
.premium-form-success-call-button:focus-visible {
    outline: 2px solid #d4af37;
    outline-offset: 3px;
  }
/* ── Form footer ── */
.premium-form-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid oklch(0.9 0.006 75);
  }
.premium-form-footer .premium-form-trust {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: oklch(0.55 0.006 75);
    text-align: center;
  }
/* ── Review step summary rows ── */
.premium-review-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid oklch(0.92 0.006 75);
  }
.premium-review-row:last-child {
    border-bottom: none;
  }
.premium-review-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: oklch(0.55 0.006 75);
    flex-shrink: 0;
    min-width: 80px;
  }
.premium-review-value {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    color: #222222;
    text-align: right;
    flex: 1 1 0;
    min-width: 0;
    word-break: break-word;
  }
/* ── Mobile responsiveness ── */
@media (max-width: 767px) {
    .premium-form {
      padding: 0.875rem;
      border-radius: 0.625rem;
    }

    .premium-form-step-title {
      font-size: 1.1rem;
    }

    .premium-form-step-subtitle {
      font-size: 0.825rem;
      margin-bottom: 1rem;
    }

    .premium-form-input,
    .premium-form-textarea {
      padding: 0.75rem 0.875rem;
      min-height: 48px;
      font-size: 1rem; /* 16px prevents iOS zoom-on-focus */
    }

    .premium-form-button {
      min-height: 48px;
      padding: 0.875rem 1.25rem;
    }

    /* Service cards: 2 rows (3+2) on mobile via flex-wrap */
    .premium-service-row {
      flex-wrap: wrap;
    }

    .premium-service-card {
      flex: 1 1 33.333%;
      min-height: 58px;
      border-right: 1px solid #d4af37;
      border-bottom: 1px solid #d4af37;
    }

    /* Remove right border on every 3rd card to keep grid clean */
    .premium-service-card:nth-child(3n) {
      border-right: none;
    }

    /* Last row (cards 4,5) — remove bottom border */
    .premium-service-card:nth-last-child(-n + 2) {
      border-bottom: none;
    }

    /* Card 4 (first of last row) gets right border back */
    .premium-service-card:nth-child(4) {
      border-right: 1px solid #d4af37;
    }

    /* Card 5 (last) — no right border */
    .premium-service-card:last-child {
      border-right: none;
    }

    /* Action buttons stack full-width on mobile */
    .premium-form-actions {
      flex-direction: column-reverse;
      gap: 0.5rem;
    }

    .premium-form-actions .premium-form-button {
      width: 100%;
    }

    .premium-form-checkmark {
      width: 68px;
      height: 68px;
    }

    /* Step labels smaller on mobile */
    .premium-step-label {
      font-size: 0.62rem;
    }
  }
/* Very small phones (≤380px) */
@media (max-width: 380px) {
    .premium-form {
      padding: 0.75rem;
    }

    .premium-service-card-label {
      font-size: 0.58rem;
    }
  }
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .premium-form-step.is-entering {
      animation: premiumStepFadeIn 0.2s ease forwards;
    }

    .premium-form-loading-spinner {
      animation-duration: 2s;
    }

    .premium-form-progress::after {
      transition: width 0.2s linear;
    }
  }
@keyframes premiumStepFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
/* ── PREMIUM GALLERY REBUILD — gallery cards, skeleton, carousel,
        callout, hero header, trust signals, View More.
        Extends existing tokens — no new colors, no new fonts.
        ============================================================ */
/* ── Gallery hero header — bold headline + gold accent line ─────────────── */
/*    Uses .headline-serif-hero for the title; .gold-line beneath as a
        horizontal gold gradient accent. Centered, premium, generous
        vertical breathing room. */
.gallery-hero-header {
    text-align: center;
    padding: 2.5rem 1.25rem 1.75rem;
  }
@media (min-width: 768px) {
    .gallery-hero-header {
      padding: 3.5rem 2rem 2.25rem;
    }
  }
.gallery-hero-header .gallery-hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    font-size: clamp(1.85rem, 5vw, 2.75rem);
    color: var(--martinez-charcoal);
    margin: 0 0 0.75rem;
  }
.gallery-hero-header .gallery-hero-subtext {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.6;
    color: var(--muted-foreground);
    max-width: 620px;
    margin: 0 auto 1.25rem;
  }
.gallery-hero-header .gallery-hero-line {
    width: 72px;
    height: 3px;
    border-radius: 2px;
    margin: 0 auto;
    background-image: linear-gradient(
      90deg,
      oklch(0.74 0.13 82) 0%,
      oklch(0.8 0.12 85) 50%,
      oklch(0.74 0.13 82) 100%
    );
  }
/* ── Gallery top CTA row — Call Now + Free Estimate gold buttons ────────── */
/*    Centered row of two .btn-gallery-gold buttons at the top of the
        gallery. Stacks to full-width on mobile with comfortable gaps. */
.gallery-top-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1rem;
    padding: 0 1.25rem 1.5rem;
  }
@media (min-width: 768px) {
    .gallery-top-cta {
      gap: 1rem 1.25rem;
      padding: 0 2rem 2rem;
    }
  }
/* ── Premium gallery card — UNIFORM SMALLER card, NO hover movement ──────── */
/*    Uniform 4/3 photo aspect across the entire gallery (slightly smaller
       than the prior 16/10 "Brick Home New Roof" card) so more cards fit
       per row on desktop in a clean grid. 2px brushed brass gold border,
       rounded-xl, clean white bg, subtle drop shadow.
       HOVER RULE: images stay COMPLETELY STILL — no translateY, no scale,
       no bounce, no transform on hover or active. At most a subtle shadow
       change on hover. Built on existing tokens — does NOT duplicate
       .card-premium (different border weight + aspect + no-lift spec). */
.gallery-card-premium {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: oklch(0.995 0.006 75);
    border: 2px solid var(--martinez-gold);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.08), inset 0 1px 0
      oklch(0.995 0.006 75 / 0.9);
    /* NO transform transition — images must stay completely still.
       Only box-shadow + border-color may transition on hover. */
    transition: box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      border-color 0.3s ease;
    /* will-change intentionally omitted — no transform to animate */
  }
/* Desktop hover: subtle shadow change ONLY — NO movement, NO transform */
@media (hover: hover) and (pointer: fine) {
    .gallery-card-premium:hover {
      box-shadow: 0 8px 22px oklch(0 0 0 / 0.12), 0 2px 8px oklch(0 0 0 / 0.06),
        0 0 0 1px oklch(0.74 0.13 82 / 0.25);
      border-color: var(--martinez-gold-light);
      /* transform: NONE — images stay completely still on hover */
    }
  }
/* Mobile tap: NO scale, NO movement — images stay completely still */
@media (hover: none) {
    .gallery-card-premium:active {
      /* transform: NONE — no scale on tap, images stay still */
      box-shadow: 0 6px 18px oklch(0 0 0 / 0.1), 0 0 0 1px
        oklch(0.74 0.13 82 / 0.2);
    }
  }
/* Photo frame — uniform 4/3 aspect, object-fit cover (no stretching) */
.gallery-card-premium .gallery-card-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: oklch(0.96 0.008 75);
    overflow: hidden;
    /* NO hover transform on the photo frame — completely still */
  }
.gallery-card-premium .gallery-card-photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    /* NO hover transform/scale on the image — completely still */
  }
/* Small gold service-type label pill in the top-left corner of the photo */
.gallery-card-premium .gallery-card-label {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    background-color: oklch(0.99 0.005 75);
    color: var(--martinez-charcoal);
    border: 1px solid var(--martinez-gold);
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.15);
  }
/* Short project title beneath the photo */
.gallery-card-premium .gallery-card-title {
    padding: 0.85rem 1rem 1rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--martinez-charcoal);
  }
/* ── Gallery skeleton loading — gold-tinted shimmer placeholder ─────────── */
/*    Subtle gold-tinted shimmer sweep over a warm-grey block. Used as a
        placeholder while project images load. The shimmer is a soft 8%
        gold sweep — never garish, never a hard flash. */
.gallery-skeleton {
    position: relative;
    overflow: hidden;
    background-color: oklch(0.94 0.008 75);
  }
.gallery-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      oklch(0.74 0.13 82 / 0.08) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: galleryShimmer 1.6s ease-in-out infinite;
  }
@keyframes galleryShimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
/* Skeleton variant matching the gallery card photo aspect (4/3 — same as
     .gallery-card-photo so skeletons never jump size when the real image
     loads). */
.gallery-skeleton-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
  }
/* Skeleton variant for the title line beneath */
.gallery-skeleton-line {
    height: 0.95rem;
    border-radius: 0.25rem;
    margin: 0.85rem 1rem 1rem;
  }
/* ── Gallery image fade-in — opacity 0 → 1 when image finishes loading ──── */
/*    Apply to the <img>. Start invisible; add .is-loaded (or set
        opacity via the onLoad handler) to fade in. Smooth 600ms ease. */
.gallery-img-fade-in {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
.gallery-img-fade-in.is-loaded {
    opacity: 1;
  }
/* ── Project carousel — smooth crossfade between slides ─────────────────── */
/*    Container is relative; slides are absolutely positioned and
         crossfade via opacity (500ms ease). Active slide is visible;
         inactive slides are hidden (opacity 0, pointer-events none) but
         kept in DOM for the fade transition.
         CAROUSEL RESIZE: the container uses the SAME 4/3 aspect ratio as
         the uniform gallery cards (.gallery-card-photo) so carousel cards
         match the new smaller uniform gallery card size. Slides fill the
         container with object-fit: cover (no stretching). */
.carousel-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.75rem;
    /* Gold image outline — 2px gold frame around the homepage gallery
       images (matches .img-gold-outline). Replaces the faint gold border
       so the project photos read as framed premium assets. */
    border: 2px solid var(--martinez-gold);
    box-shadow: 0 0 0 1px oklch(0.74 0.13 82 / 0.18), 0 8px 24px
      oklch(0 0 0 / 0.1);
    background-color: oklch(0.13 0.012 50);
  }
.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Anti-flicker: transition OPACITY ONLY. No transform, no layout.
       0.5s ease matches the original crossfade timing. will-change keeps
       the fade on the compositor thread so the active slide never
       stutters when the index changes. */
    transition: opacity 0.5s ease;
    will-change: opacity;
    pointer-events: none;
  }
.carousel-slide.carousel-slide-active {
    opacity: 1;
    pointer-events: auto;
    /* active slide fills the 4/3 container — no longer defines height */
  }
.carousel-slide img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    /* Anti-flicker: the <img> NEVER animates opacity or transform. The
       wrapper .carousel-slide owns the crossfade. Keeping the img static
       prevents the nested-opacity-transition conflict (0.5s wrapper vs
       0.6s img) that caused visible jitter on each rotation. */
  }
/* Carousel slide overlay — service label pill + project title.
     MATCHES .gallery-card-premium .gallery-card-label / .gallery-card-title
     exactly so carousel cards read as the same uniform premium cards as the
     gallery grid. Same gold border, same rounded pill, same label/title
     treatment — only the title sits over a charcoal gradient scrim instead
     of beneath the photo on white. */
.carousel-slide .carousel-slide-label {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    background-color: oklch(0.99 0.005 75);
    color: var(--martinez-charcoal);
    border: 1px solid var(--martinez-gold);
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.15);
  }
.carousel-slide .carousel-slide-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 2rem 1rem 0.85rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: oklch(0.985 0.008 75);
    background: linear-gradient(
      180deg,
      transparent 0%,
      oklch(0.13 0.012 50 / 0.55) 60%,
      oklch(0.13 0.012 50 / 0.85) 100%
    );
  }
/* Carousel arrow controls — gold on dark, desktop-visible */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 9999px;
    background-color: oklch(0.13 0.012 50 / 0.65);
    color: var(--martinez-gold-light);
    border: 1px solid oklch(0.74 0.13 82 / 0.5);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s
      ease;
    backdrop-filter: blur(4px);
  }
.carousel-arrow:hover {
    background-color: oklch(0.13 0.012 50 / 0.85);
    color: oklch(0.985 0.008 75);
  }
.carousel-arrow:active {
    transform: translateY(-50%) scale(0.94);
  }
.carousel-arrow-prev {
    left: 0.75rem;
  }
.carousel-arrow-next {
    right: 0.75rem;
  }
/* Hide arrows on touch devices — swipe is the primary control there */
@media (hover: none) {
    .carousel-arrow {
      display: none;
    }
  }
/* Carousel dot indicators */
.carousel-dots {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: oklch(0.985 0.008 75 / 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.2s ease;
  }
.carousel-dot.carousel-dot-active {
    background-color: var(--martinez-gold-light);
    transform: scale(1.25);
  }
/* ── Gallery callout banner — "Your project could look like this" ────────── */
/*    2px brushed brass gold border, warm white background, premium
        padding. Single CTA slot on the right (gold "Get My Free Estimate"
        button). Stacks vertically on mobile. */
.gallery-callout {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.75rem 1.5rem;
    background-color: oklch(0.985 0.008 75);
    border: 2px solid var(--martinez-gold);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px oklch(0 0 0 / 0.05), inset 0 1px 0
      oklch(0.995 0.006 75 / 0.9);
  }
@media (min-width: 768px) {
    .gallery-callout {
      padding: 2.25rem 2.5rem;
      gap: 2rem;
    }
  }
.gallery-callout .gallery-callout-text {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.5;
    color: var(--martinez-charcoal);
    flex: 1 1 320px;
    min-width: 0;
  }
.gallery-callout .gallery-callout-text strong {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--martinez-charcoal);
  }
.gallery-callout .gallery-callout-cta {
    flex: 0 0 auto;
  }
/* ── Trust signals row — centered, muted, gold bullet separators ────────── */
/*    A centered row of trust signals separated by gold dots. Wraps
        gracefully on mobile. Muted text, gold bullets. */
.trust-signals-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0;
    padding: 1.5rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--muted-foreground);
    text-align: center;
  }
@media (min-width: 640px) {
    .trust-signals-row {
      gap: 0.75rem 0;
      font-size: 1rem;
    }
  }
.trust-signals-row .trust-signal-item {
    display: inline-flex;
    align-items: center;
    padding: 0 1.25rem;
    white-space: nowrap;
  }
/* Gold bullet separator between items (except the last) */
.trust-signals-row .trust-signal-item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 1.25rem;
    border-radius: 9999px;
    background-color: var(--martinez-gold);
  }
/* On mobile, stack vertically with the bullet becoming a top dot */
@media (max-width: 639px) {
    .trust-signals-row {
      flex-direction: column;
      gap: 0.5rem;
    }

    .trust-signals-row .trust-signal-item {
      padding: 0;
    }

    .trust-signals-row .trust-signal-item:not(:last-child)::after {
      margin-left: 0;
      margin-top: 0.5rem;
    }
  }
/* ── View More button — reuses .btn-gallery-gold, no new class ───────────── */
/*    The existing .btn-gallery-gold (rich saturated gold oklch 0.74 0.15 80
        with charcoal ink text) is the correct View More button. A centered
        wrapper utility for placement below the grid: */
.gallery-view-more-wrap {
    display: flex;
    justify-content: center;
    padding: 2rem 1.25rem 1rem;
  }
/* ── Gallery grid — uniform smaller cards, more per row on desktop ──────── */
/*    1 col mobile → 2 col sm → 3 col lg → 4 col xl. Tight uniform gaps
       so the smaller uniform 4/3 cards read as a clean premium grid. */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1.25rem;
  }
@media (min-width: 640px) {
    .gallery-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
      padding: 0 2rem;
    }
  }
@media (min-width: 1024px) {
    .gallery-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      padding: 0 2rem;
    }
  }
@media (min-width: 1280px) {
    .gallery-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      padding: 0 2rem;
    }
  }
/* ── Gallery fade-in for newly loaded "View More" cards ──────────────────── */
/*    Apply to cards appended via View More. They start invisible and
       fade in smoothly. Opacity-only entrance (NO transform/translate) so
       the grid stays perfectly still as new cards appear. */
.gallery-card-enter {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
.gallery-card-enter.gallery-card-enter-visible {
    opacity: 1;
  }
/* ── Respect reduced motion for gallery + carousel animations ───────────── */
@media (prefers-reduced-motion: reduce) {
    .gallery-skeleton::after {
      animation: none;
    }
    .gallery-img-fade-in,
    .gallery-card-enter {
      opacity: 1;
      transform: none;
      transition: none;
    }
    /* Carousel: keep the active/inactive opacity distinction (so slides
       don't all stack visibly) but drop the transition for users who
       prefer reduced motion. The active slide is shown instantly; the
       inactive ones are hidden instantly. No fade, no transform. */
    .carousel-slide {
      transform: none;
      transition: none;
    }
    .gallery-card-premium,
    .gallery-card-premium:hover,
    .gallery-card-premium:active {
      transform: none;
      transition: none;
    }
  }
/* ── FAQ accordion premium ──────────────────────────────────────────────── */
.faq-item {
  border-radius: var(--radius);
  border-width: 1px;
  padding: 1rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  animation-duration: 200ms;
    border: 2px solid color-mix(in oklch, var(--martinez-gold) 40%, transparent);
}
@media print {
  .faq-item {
    border: 1px solid #1a1a1a;
  }
}
.faq-item-active {
  border-width: 2px;
  background-color: oklch(var(--primary) / 0.05);
    border: 2px solid var(--martinez-gold);
}
@media print {
  .faq-item-active {
    border: 1px solid #1a1a1a;
  }
}
/* ── Testimonial card ───────────────────────────────────────────────────── */
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  border-width: 1px;
  background-color: oklch(var(--card));
  --tw-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    border: 1px solid var(--martinez-gold);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
}
@media print {
  .testimonial-card {
    border: 1px solid #1a1a1a;
  }
}
.testimonial-card {
  border-radius: var(--radius);
  background-color: oklch(var(--card));
  --tw-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
    border: 1px solid oklch(0.74 0.13 82 / 0.35);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.06), inset 0 1px 0
      oklch(0.99 0.006 75 / 0.8);
}
@media (max-width: 767px) {
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */

    /* Cards: smaller padding, tighter gaps */
    .testimonial-card {
      padding: 0.75rem;
    }

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
  }
@media print {
  .testimonial-card {
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: none;
    backdrop-filter: none;
    border: 1px solid #1a1a1a;
  }
}
/* ── Process step lines ─────────────────────────────────────────────────── */
.process-line {
  position: absolute;
  top: 25%;
  left: 60%;
  right: 0px;
  display: none;
  height: 0.25rem;
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: oklch(var(--primary) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: oklch(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: oklch(var(--primary) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), oklch(var(--primary) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
@media (min-width: 768px) {
  .process-line {
    display: block;
  }
}
/* ── Icon micro-animations (hover/tap gold glow pulse) ────────────────── */
@keyframes iconGlowPulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 oklch(0.74 0.13 82 / 0.5);
      filter: drop-shadow(0 0 4px oklch(0.74 0.13 82 / 0.25));
    }
    50% {
      box-shadow: 0 0 12px 4px oklch(0.74 0.13 82 / 0.25);
      filter: drop-shadow(0 0 8px oklch(0.74 0.13 82 / 0.4));
    }
  }
@keyframes iconScale {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.08);
    }
    100% {
      transform: scale(1);
    }
  }
.icon-hover-glow {
    transition: all 0.25s ease;
  }
.icon-hover-glow:hover,
  .icon-hover-glow:active {
    animation: iconGlowPulse 0.5s ease-out forwards;
  }
.icon-scale {
    transition: transform 0.2s ease;
  }
.icon-scale:hover,
  .icon-scale:active {
    animation: iconScale 0.35s ease-out forwards;
  }
/* ── Decorative quote mark background for reviews ────────────────────── */
.quote-mark-bg {
    position: relative;
  }
.quote-mark-bg::before {
    content: '"';
    position: absolute;
    top: -8px;
    left: -4px;
    font-size: 4rem;
    font-family: Georgia, serif;
    font-weight: 700;
    color: oklch(0.74 0.13 82 / 0.1);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
  }
.quote-mark-bg p,
  .quote-mark-bg span {
    position: relative;
    z-index: 1;
  }
/* ── Minimum touch target sizes for mobile ──────────────────────────────── */
.min-h-touch {
    min-height: 56px;
  }
.min-w-touch {
    min-width: 44px;
  }
/* ── Enhanced mobile spacing utilities ──────────────────────────────────── */
@media (max-width: 768px) {
    .mobile-spacious {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }

    .mobile-section-spacing {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    .mobile-card-spacing {
      padding: 1.25rem;
    }

    .mobile-text-spacing {
      margin-bottom: 1.5rem;
    }
  }
/* =============================================
     MOBILE-FIRST RESPONSIVE IMPROVEMENTS
     ============================================= */
/* Headings scale down gracefully on small screens */
@media (max-width: 640px) {
    h1 {
      font-size: 1.65rem !important;
      line-height: 1.2 !important;
    }

    h2 {
      font-size: 1.25rem !important;
      line-height: 1.25 !important;
    }

    h3 {
      font-size: 1.0rem !important;
    }

    p {
      font-size: 0.82rem;
      line-height: 1.65;
    }
  }
/* Section padding utility — tighter on mobile, spacious on desktop */
.section-padding {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
@media (min-width: 768px) {
    .section-padding {
      padding-top: 5rem;
      padding-bottom: 5rem;
    }
  }
/* Stats bar: 2-column on mobile, 4-column on desktop */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
@media (min-width: 768px) {
    .stats-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
/* Form inputs — comfortable on mobile */
@media (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select {
      min-height: 48px;
      font-size: 1rem;
    }
  }
/* Card grid — single column on mobile, responsive up */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
@media (min-width: 640px) {
    .card-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
@media (min-width: 1024px) {
    .card-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
/* ── Hero load animations (stagger on page load) ────────────────────────── */
@keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
@keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
@keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
@keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
/* Hero stagger classes — applied on load (not scroll) */
.hero-stagger-1 {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
  }
.hero-stagger-2 {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  }
.hero-stagger-3 {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
  }
.hero-stagger-4 {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
  }
.hero-stagger-5 {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
  }
.hero-stagger-6 {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards;
  }
/* ── Slide-in from sides — premium overshoot easing ─────────────────────── */
/*    cubic-bezier(0.34, 1.56, 0.64, 1) gives a slight spring past the target  */
.slide-from-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform
      0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
.slide-from-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform
      0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
.slide-from-left.visible,
  .slide-from-right.visible {
    opacity: 1;
    transform: translateX(0);
  }
/* ── Scroll reveal base — smooth deceleration ───────────────────────────── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform
      0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
/* Stagger delay variants — tighter 0.1s steps for snappy cascade */
.stagger-1 {
    transition-delay: 0.08s;
  }
.stagger-2 {
    transition-delay: 0.16s;
  }
.stagger-3 {
    transition-delay: 0.24s;
  }
.stagger-4 {
    transition-delay: 0.32s;
  }
.stagger-5 {
    transition-delay: 0.40s;
  }
/* ── Gold draw-underline — strong ease-in-out cinematic draw ────────────── */
/*    transform-origin: left so the line draws from the left edge outward     */
.draw-underline {
    position: relative;
    display: inline-block;
  }
.draw-underline::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    height: 4px;
    width: 100%;
    background: var(--martinez-gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    /* Strong ease-in-out: slow start, fast middle, slow finish */
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  }
.draw-underline.visible::after {
    transform: scaleX(1);
  }
/* ── Hero underline — same draw mechanic for service page titles ─────────── */
.hero-underline {
    position: relative;
    display: inline-block;
  }
.hero-underline::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(
      90deg,
      var(--martinez-gold),
      color-mix(in oklch, var(--martinez-gold) 80%, transparent),
      color-mix(in oklch, var(--martinez-gold) 40%, transparent)
    );
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  }
.hero-underline.visible::after,
  .hero-underline-active::after {
    transform: scaleX(1);
  }
/* ── Luxury fade — for section background overlays ──────────────────────── */
.luxury-fade {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
  }
.luxury-fade.visible {
    opacity: 1;
  }
/* ── Count-up trigger class — when .visible added, number animates in ────── */
.count-up-trigger {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform
      0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
.count-up-trigger.visible {
    opacity: 1;
    transform: translateY(0);
  }
/* ── Staggered card reveal — keyframe for programmatic use ─────────────── */
@keyframes cardReveal {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
.animate-card-reveal {
    /* smooth decelerate with subtle scale-up */
    animation: cardReveal 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
  }
/* ── Number counter animation ────────────────────────────────────────────── */
@keyframes countUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
.animate-count-up {
    animation: countUp 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
/* ── Golden streaks diagonal animation (service/about heroes) ───────────── */
@keyframes golden-sweep {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 300% 300%;
    }
  }
@keyframes gold-pulse-subtle {
    0%,
    100% {
      opacity: 0.5;
      transform: scale(1);
    }
    50% {
      opacity: 0.85;
      transform: scale(1.06);
    }
  }
/* ── Service page hero — animated gold diagonal shimmer ─────────────────── */
@keyframes shimmer-sweep {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 200% 200%;
    }
  }
/* ── Gold radial pulse glow ───────────────────────────────────────────────── */
@keyframes gold-pulse {
    0%,
    100% {
      opacity: 0.6;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.08);
    }
  }
/* ── FAQ answer smooth expand ───────────────────────────────────────────── */
@keyframes faqExpand {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
.faq-answer-enter {
    animation: faqExpand 0.25s ease-out forwards;
  }
/* ── General fade in for page entry ────────────────────────────────────── */
.animate-fade-in {
    animation: fadeInUp 0.5s ease-out forwards;
  }
/* ── Hero parallax (desktop only) ────────────────────────────────────────── */
@media (min-width: 769px) {
    .hero-parallax {
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
    }
  }
@media (max-width: 768px) {
    .hero-parallax {
      background-attachment: scroll;
      background-size: cover;
      background-position: center;
    }
  }
/* ── Checkmark draw animation for confirmation screen ──────────────────── */
@keyframes checkmarkDraw {
    from {
      stroke-dashoffset: 30;
      opacity: 0;
    }
    to {
      stroke-dashoffset: 0;
      opacity: 1;
    }
  }
.checkmark-draw {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: checkmarkDraw 0.6s ease-out 0.3s forwards;
  }
/* ── Respect reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .checkmark-draw {
      stroke-dashoffset: 0;
      opacity: 1;
      animation: none;
    }
    .scroll-reveal,
    .slide-from-left,
    .slide-from-right,
    .draw-underline,
    .hero-underline,
    .luxury-fade,
    .count-up-trigger,
    .hero-stagger-1,
    .hero-stagger-2,
    .hero-stagger-3,
    .hero-stagger-4,
    .hero-stagger-5,
    .hero-stagger-6,
    .fade-in-soft,
    .card-lift,
    .draw-line,
    .draw-line::after,
    .curved-gold-divider::after,
    .curved-divider-draw svg path,
    .seal-loader,
    .seal-loader::after {
      opacity: 1;
      transform: none;
      animation: none;
      transition: none;
    }
    .draw-underline::after,
    .hero-underline::after {
      transform: scaleX(1);
      transition: none;
    }
    .draw-line::after {
      width: 100%;
    }
    .curved-gold-divider::after,
    .curved-divider-draw svg path {
      stroke-dashoffset: 0;
    }
  }
/* ====================================================
     MOBILE-SPECIFIC OVERRIDES (max-width: 767px)
     Desktop (768px+) is NEVER affected by these rules.
     ==================================================== */
@media (max-width: 767px) {
    /* Ensure no horizontal scroll ever */
    body,
    #root {
      overflow-x: hidden;
      max-width: 100vw;
    }

    /* Service hero compact on mobile */
    .service-hero-compact {
      height: 200px !important;
      min-height: 180px !important;
      max-height: 220px !important;
    }

    /* Minimum tap target for all interactive elements */
    button,
    a,
    [role="button"] {
      min-height: 44px;
    }

    /* Footer columns stack cleanly */
    .footer-grid {
      grid-template-columns: 1fr !important;
    }

    /* Map does not overflow */
    .static-map-container {
      width: 100%;
      overflow: hidden;
    }

    /* Responsive map height — shorter on mobile, no horizontal scroll */
    .static-map-wrap {
      width: 100%;
      overflow: hidden;
      max-width: 100%;
    }
    .static-map-wrap iframe {
      height: 320px !important;
      max-height: 60vh;
      width: 100% !important;
    }

    /* ── Mobile dopamine scroll animations ──────────────── */

    /* Smooth scale-up reveal for cards — satisfying spring pop as they enter */
    .mobile-card-reveal {
      opacity: 0;
      transform: translateY(20px) scale(0.85);
      transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform
        0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .mobile-card-reveal.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Gold line sweep — draws in from left when section enters */
    .mobile-gold-line {
      position: relative;
    }
    .mobile-gold-line::before {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 0;
      height: 2px;
      width: 0%;
      background: var(--martinez-gold);
      transition: width 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    }
    .mobile-gold-line.visible::before {
      width: 40px;
    }

    /* Slide up with gentle bounce for section headings */
    .mobile-heading-reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s,
        transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.1s;
    }
    .mobile-heading-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Fade in with slight left-drift for supporting text */
    .mobile-text-reveal {
      opacity: 0;
      transform: translateX(-10px);
      transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s,
        transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
    }
    .mobile-text-reveal.visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* CTA button spring bounce-in */
    .mobile-cta-reveal {
      opacity: 0;
      transform: translateY(12px) scale(0.9);
      transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s,
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
    }
    .mobile-cta-reveal.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Staggered card reveals (≈0.07s apart) */
    .mobile-stagger-1 {
      transition-delay: 0.05s !important;
    }
    .mobile-stagger-2 {
      transition-delay: 0.12s !important;
    }
    .mobile-stagger-3 {
      transition-delay: 0.19s !important;
    }
    .mobile-stagger-4 {
      transition-delay: 0.26s !important;
    }

    /* Micro-interaction: button tap feedback */
    .mobile-tap-scale {
      transition: transform 0.1s ease;
    }
    .mobile-tap-scale:active {
      transform: scale(0.97);
    }

    /* Visual divider stripe between sections — warm charcoal undertone */
    .mobile-section-stripe {
      background: linear-gradient(
        135deg,
        oklch(0.1 0.012 50) 0%,
        oklch(0.18 0.008 65) 100%
      );
    }

    /* Compact section padding on mobile */
    .mobile-compact {
      padding-top: 1.25rem !important;
      padding-bottom: 1.25rem !important;
    }

    /* Progress pulse dot */
    .mobile-progress-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--martinez-gold);
      opacity: 0;
      transform: scale(0);
      transition: opacity 0.3s ease, transform 0.3s
        cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .mobile-progress-dot.visible {
      opacity: 1;
      transform: scale(1);
    }

    /* Shimmer highlight on cards when they enter */
    @keyframes shimmerOnce {
      0% {
        background-position: -200% center;
      }
      100% {
        background-position: 200% center;
      }
    }
    .mobile-shimmer-once.visible {
      animation: shimmerOnce 0.8s ease-out forwards;
      background: linear-gradient(
        90deg,
        transparent 0%,
        oklch(0.74 0.13 82 / 0.08) 50%,
        transparent 100%
      );
      background-size: 200% auto;
    }

    /* Icon pulse for sticky call button */
    @keyframes iconPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.15);
      }
    }
    .sticky-call-icon-pulse {
      animation: iconPulse 2.5s ease-in-out infinite;
      display: inline-block;
    }

    /* Ensure no horizontal overflow */
    .overflow-x-safe {
      overflow-x: hidden;
      max-width: 100vw;
    }

    /* Compact hero text on mobile */
    .hero-compact-mobile h1 {
      font-size: 1.75rem;
      line-height: 1.2;
    }

    /* Section rhythm — sections don't force minimum height */
    .section-rhythm-mobile {
      min-height: unset !important;
    }

    /* Card grid mobile single column */
    .mobile-single-col {
      grid-template-columns: 1fr !important;
    }

    /* ── Mobile 2-column grid for cards ─────────────────────────────────── */
    .mobile-2col {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 0.5rem !important;
    }

    /* ── Compact card — tighter padding for mobile 2-col layout ─────────── */
    .mobile-compact-card {
      padding: 0.625rem !important;
    }
    .mobile-compact-card .w-14.h-14 {
      width: 2rem !important;
      height: 2rem !important;
      margin-bottom: 0.5rem !important;
    }
    .mobile-compact-card .w-7.h-7 {
      width: 1.1rem !important;
      height: 1.1rem !important;
    }
    .mobile-compact-card h3 {
      font-size: 0.75rem !important;
      margin-bottom: 0.25rem !important;
      line-height: 1.3 !important;
    }
    .mobile-compact-card p {
      font-size: 0.65rem !important;
      line-height: 1.4 !important;
    }

    /* ── Horizontal steps row — all 3 steps visible at once ─────────────── */
    .mobile-steps-row {
      display: flex !important;
      flex-direction: row !important;
      gap: 0 !important;
      align-items: flex-start !important;
    }
    .mobile-step-item {
      flex: 1 !important;
      padding-left: 0.25rem !important;
      padding-right: 0.25rem !important;
    }

    /* ── FAQ 2-column compact layout ────────────────────────────────────── */
    .mobile-faq-2col {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 0.5rem !important;
      max-width: 100% !important;
    }
    .mobile-faq-item {
      margin: 0 !important;
    }
    .mobile-faq-item button {
      padding: 0.625rem 0.75rem !important;
      min-height: unset !important;
    }
    .mobile-faq-item button span:first-child {
      font-size: 0.65rem !important;
      line-height: 1.35 !important;
    }
    .mobile-faq-item .px-6.pb-6 {
      padding: 0.5rem 0.75rem 0.625rem !important;
      font-size: 0.6rem !important;
      line-height: 1.4 !important;
    }

    /* ── City tags horizontal wrap row ──────────────────────────────────── */
    .mobile-horizontal-row {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 0.375rem !important;
    }
    .city-tag {
      padding: 0.25rem 0.625rem !important;
      font-size: 0.65rem !important;
    }
    .city-tag svg {
      width: 0.65rem !important;
      height: 0.65rem !important;
    }

    /* ── Emergency strip compact ─────────────────────────────────────────── */
    .emergency-compact {
      padding-top: 0.875rem !important;
      padding-bottom: 0.875rem !important;
    }
    .emergency-compact h2 {
      font-size: 1.25rem !important;
      margin-bottom: 0.375rem !important;
    }
    .emergency-compact p {
      font-size: 0.7rem !important;
      margin-bottom: 0.25rem !important;
    }
    .emergency-compact a[href^="tel"].text-4xl {
      font-size: 1.4rem !important;
    }
    .emergency-compact .urgency-badge {
      margin-bottom: 0.5rem !important;
    }
    .emergency-compact .urgency-badge span:last-child {
      font-size: 0.6rem !important;
    }
  }
/* ── Mobile full remodel: tighter sections, smaller fonts, less scroll ── */
@media (max-width: 767px) {
    /* Hero: compact — fits more above fold */
    .hero-section-home {
      min-height: 48vh !important;
    }

    /* Reduce all section py-24 / py-20 to compact equivalents */
    section[aria-label] {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }

    /* Tighter container padding */
    .container {
      padding-left: 0.9rem !important;
      padding-right: 0.9rem !important;
    }

    /* Reduce section heading margins */
    .text-center.mb-16,
    .text-center.mb-12 {
      margin-bottom: 1rem !important;
    }

    /* Cards: smaller padding, tighter gaps */
    .grid.gap-6,
    .grid.gap-8 {
      gap: 0.625rem !important;
    }

    .p-7 {
      padding: 0.875rem !important;
    }
    .p-6 {
      padding: 0.75rem !important;
    }
    .p-5 {
      padding: 0.625rem !important;
    }

    /* Stats section compact */
    .text-5xl.md\:text-6xl.font-black {
      font-size: 2rem !important;
    }

    /* Smaller buttons on mobile */
    .min-h-\[60px\] {
      min-height: 48px !important;
      font-size: 0.85rem !important;
      padding-top: 0.75rem !important;
      padding-bottom: 0.75rem !important;
    }
    .min-h-\[52px\] {
      min-height: 44px !important;
    }

    /* Trust bar — smaller text, tighter gap */
    .gap-x-8 {
      gap: 0.5rem !important;
    }

    /* Scroll reveal on mobile: smaller displacement */
    .scroll-reveal {
      transform: translateY(10px) !important;
    }
    .mobile-card-reveal {
      transform: translateY(10px) scale(0.95) !important;
    }
  }
/* Respect reduced motion — include all mobile classes */
@media (prefers-reduced-motion: reduce) {
    .mobile-card-reveal,
    .mobile-heading-reveal,
    .mobile-text-reveal,
    .mobile-cta-reveal,
    .mobile-gold-line::before,
    .sticky-call-icon-pulse {
      opacity: 1;
      transform: none;
      animation: none;
      transition: none;
    }
    .mobile-gold-line::before {
      width: 40px;
    }
  }
/* ============================================================
     2026 PREMIUM REMODEL — cinematic hero, top service bar,
     mega-menu, gold-outline icon system, bilingual toggle.
     ADD layer — existing tokens/classes untouched.
     ============================================================ */
/* ── Cinematic hero — full-bleed real photo + trust overlay ──────── */
/*    Full-bleed <picture> hero (drone roofing + concrete broom-finish
        shots). The image sits behind a layered charcoal trust overlay so
        bold white + gold copy reads cleanly at any viewport. Left-aligned
        content on a side scrim for premium editorial rhythm. */
.hero-cinematic {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(520px, 82vh, 860px);
    overflow: hidden;
    background-color: var(--nav-black-deep);
  }
.hero-cinematic .hero-cinematic-media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
.hero-cinematic .hero-cinematic-media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
/* Trust overlay — charcoal bottom + left scrim so copy stays legible */
.hero-cinematic::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--hero-overlay), var(--hero-overlay-side);
    pointer-events: none;
  }
.hero-cinematic > * {
    position: relative;
    z-index: 2;
  }
/* Bold trust-building eyebrow + headline over the photo */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--martinez-gold-light);
  }
.hero-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background-image: linear-gradient(90deg, var(--martinez-gold), transparent);
  }
.hero-cinematic h1 {
    color: oklch(0.985 0.008 75);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    max-width: 15ch;
    text-wrap: balance;
  }
.hero-cinematic .hero-subcopy {
    color: oklch(0.985 0.008 75 / 0.85);
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.6;
    max-width: 46ch;
  }
.hero-cinematic .hero-gold-accent {
    background-image: linear-gradient(
      135deg,
      oklch(0.74 0.13 82) 0%,
      oklch(0.85 0.12 88) 50%,
      oklch(0.74 0.13 82) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
/* ── Top service bar — slim black strip above the main navbar ─────── */
/*    Modern 2026 top bar: phone, service area tagline, bilingual
        EN/ES toggle, and a compact "Free Estimate" gold link. Solid
        black, white text, gold accents. Sits above the pinned navbar. */
.top-service-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 2rem;
    background-color: var(--nav-black-deep);
    color: oklch(0.985 0.008 75 / 0.85);
    font-family: var(--font-body);
    font-size: 0.8rem;
    border-bottom: 1px solid oklch(0.74 0.13 82 / 0.25);
  }
.top-service-bar a {
    color: oklch(0.985 0.008 75 / 0.9);
    text-decoration: none;
    transition: color 0.2s ease;
  }
.top-service-bar a:hover {
    color: var(--martinez-gold-light);
  }
.top-service-bar .top-bar-phone {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--martinez-gold-light);
  }
/* ── Bilingual toggle (EN/ES) ─────────────────────────────────────── */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid oklch(0.74 0.13 82 / 0.4);
    border-radius: 9999px;
    padding: 0.2rem 0.5rem;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
.lang-toggle button {
    background: none;
    border: none;
    padding: 0.15rem 0.4rem;
    border-radius: 9999px;
    color: oklch(0.985 0.008 75 / 0.6);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
  }
.lang-toggle button.lang-active {
    color: oklch(0.985 0.008 75);
    background-color: oklch(0.74 0.13 82 / 0.22);
  }
/* ── Mega-menu panel — clean white surface, gold hairline ─────────── */
/*    Modern service mega-menu: white card, subtle gold top hairline,
        generous columns, gold-outline service icons per column. */
.mega-menu-panel {
    background-color: var(--mega-menu-surface);
    border: 1px solid oklch(0.74 0.13 82 / 0.3);
    border-top: 3px solid var(--martinez-gold);
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 24px 48px oklch(0 0 0 / 0.18), 0 8px 20px oklch(0 0 0 / 0.1);
  }
.mega-menu-panel .mega-menu-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--martinez-charcoal);
  }
.mega-menu-panel a {
    color: var(--martinez-charcoal);
    text-decoration: none;
    transition: color 0.2s ease;
  }
.mega-menu-panel a:hover {
    color: var(--martinez-gold);
  }
/* ── Gold-outline SVG icon system ─────────────────────────────────── */
/*    Consistent high-quality gold-outline line-art for ALL service
        icons, badges, and decorative elements. stroke = currentColor
        so the icon inherits gold on light surfaces and gold-light on
        dark surfaces. 1.6 stroke, round caps/joins, no fill. */
.icon-gold-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--martinez-gold);
    flex-shrink: 0;
  }
.icon-gold-outline svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
.icon-gold-outline.icon-lg {
    width: 2.25rem;
    height: 2.25rem;
  }
.icon-gold-outline.icon-xl {
    width: 3rem;
    height: 3rem;
  }
.icon-gold-outline.on-dark {
    color: var(--martinez-gold-light);
  }
/* Icon chip — white circle + gold-outline ring (the preserved badge
     system). Gold-outline icon centered inside. */
.icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background-color: var(--icon-chip);
    border: 2px solid var(--martinez-gold);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.06), inset 0 1px 0
      oklch(0.995 0.006 75 / 0.9);
    color: var(--martinez-gold);
    flex-shrink: 0;
  }
.icon-chip svg {
    width: 1.75rem;
    height: 1.75rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
.icon-chip.on-dark {
    background-color: oklch(0.985 0.006 75);
    color: var(--martinez-gold);
  }
/* ── Trust badge — white circle + gold-outline (preserved system) ─── */
.trust-badge-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: 9999px;
    background-color: oklch(0.985 0.006 75);
    border: 1px solid var(--martinez-gold);
    color: var(--martinez-charcoal);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.08);
  }
.trust-badge-outline svg {
    width: 1rem;
    height: 1rem;
    stroke: var(--martinez-gold);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
.trust-badge-outline.on-dark {
    background-color: oklch(0.12 0.012 50);
    color: oklch(0.985 0.008 75);
    border-color: oklch(0.74 0.13 82 / 0.6);
  }
/* ── Concrete slab badge container ──────────────────────────────────────── */
/*    Premium white-circle + gold-outline badge style shared by ALL trade
        badges. The redesigned concrete SLAB icon (clean square/rectangular
        slab, gold outline) renders inside this exact container so it matches
        the roof/fence/storm badges. Mirrors .icon-chip exactly. */
.badge-slab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background-color: var(--icon-chip);
    border: 2px solid var(--martinez-gold);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.06), inset 0 1px 0
      oklch(0.995 0.006 75 / 0.9);
    color: var(--martinez-gold);
    flex-shrink: 0;
  }
.badge-slab svg {
    width: 1.75rem;
    height: 1.75rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
.badge-slab.on-dark {
    background-color: oklch(0.985 0.006 75);
    color: var(--martinez-gold);
  }
/* ── Insurance 5-step claim process — premium cards ────────────────────── */
/*    'Our Insurance Claim Process' rebuilt as polished premium cards.
        Each step: white-circle + gold-outline icon tile (matching the badge
        system), gold number badge, title + description on a warm-white card
        with a 1px gold border. Cards lift + glow on hover; steps reveal in
        a smooth staggered cascade on scroll (.visible). */
.insurance-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
@media (min-width: 640px) {
    .insurance-steps-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
  }
@media (min-width: 1024px) {
    .insurance-steps-grid {
      grid-template-columns: repeat(5, 1fr);
      gap: 1.25rem;
    }
  }
.insurance-step-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1.75rem 1.25rem;
    background-color: oklch(0.995 0.006 75);
    border: 1px solid var(--martinez-gold);
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.06), inset 0 1px 0
      oklch(0.995 0.006 75 / 0.9);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow
      0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.35s ease;
    will-change: transform;
  }
.insurance-step-card:hover {
    transform: translateY(-4px);
    border-color: var(--martinez-gold-light);
    box-shadow: 0 12px 28px oklch(0 0 0 / 0.1), 0 0 0 1px
      oklch(0.74 0.13 82 / 0.25);
  }
/* Gold number badge — small circle, top-right corner */
.insurance-step-number {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: var(--badge-gold);
    color: oklch(0.18 0.008 65);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--badge-gold-deep);
    box-shadow: 0 1px 2px oklch(0.72 0.16 82 / 0.25);
  }
/* Icon tile — white circle + gold-outline ring (matches badge system) */
.insurance-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background-color: oklch(0.99 0.005 75);
    border: 2px solid var(--martinez-gold);
    color: var(--martinez-gold);
    flex-shrink: 0;
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.06), inset 0 1px 0
      oklch(0.995 0.006 75 / 0.9);
  }
.insurance-step-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
.insurance-step-card h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--martinez-charcoal);
    margin: 0;
  }
.insurance-step-card p {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0;
    max-width: 22ch;
  }
/* Step reveal — smooth staggered cascade on scroll (.visible) */
.insurance-step-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform
      0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
.insurance-step-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
.insurance-step-reveal.insurance-step-delay-1 {
    transition-delay: 0.08s;
  }
.insurance-step-reveal.insurance-step-delay-2 {
    transition-delay: 0.16s;
  }
.insurance-step-reveal.insurance-step-delay-3 {
    transition-delay: 0.24s;
  }
.insurance-step-reveal.insurance-step-delay-4 {
    transition-delay: 0.32s;
  }
@media (prefers-reduced-motion: reduce) {
    .insurance-step-reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .insurance-step-card {
      transform: none;
      transition: none;
    }
  }
/* ── Cinematic CTA row — gold primary + outlined secondary over photo ── */
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }
.hero-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0.85rem 1.75rem;
    border-radius: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: oklch(0.985 0.008 75);
    background-image: linear-gradient(
      135deg,
      oklch(0.74 0.13 82) 0%,
      oklch(0.82 0.12 86) 50%,
      oklch(0.74 0.13 82) 100%
    );
    border: 1px solid oklch(0.56 0.11 75);
    box-shadow: 0 4px 14px oklch(0 0 0 / 0.25), inset 0 1px 0
      oklch(0.85 0.12 82 / 0.45);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.2s ease;
  }
.hero-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 28px oklch(0.74 0.13 82 / 0.4), 0 8px 24px
      oklch(0 0 0 / 0.3);
    filter: brightness(1.05);
  }
.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0.85rem 1.75rem;
    border-radius: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    /* Rich gold fill + charcoal ink text — readable on both light and dark
       surfaces. Replaces the old white-on-translucent-white treatment that
       was unreadable on light sections (e.g. 'See Full Gallery'). */
    color: oklch(0.21 0.012 65);
    background: oklch(0.74 0.15 80);
    border: 1px solid oklch(0.62 0.13 76);
    box-shadow: 0 4px 14px oklch(0.74 0.15 80 / 0.35), inset 0 1px 0
      oklch(0.92 0.1 82 / 0.6);
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform
      0.2s ease, box-shadow 0.3s ease;
  }
.hero-cta-secondary:hover {
    background: oklch(0.78 0.15 82);
    border-color: oklch(0.66 0.13 78);
    box-shadow: 0 6px 20px oklch(0.74 0.15 80 / 0.45), inset 0 1px 0
      oklch(0.92 0.1 82 / 0.7);
    transform: translateY(-2px);
  }
/* ── Cinematic trust strip — white-circle gold-outline badges row ── */
.hero-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid oklch(0.74 0.13 82 / 0.35);
  }
/* Respect reduced motion for the new 2026 layer */
@media (prefers-reduced-motion: reduce) {
    .hero-cinematic .hero-cinematic-media img,
    .hero-cta-primary,
    .hero-cta-secondary {
      transform: none;
      transition: none;
    }
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}

/* ── Mega-menu inner scroll — slim gold-tinted scrollbar ─────────────────── */
.mega-menu-scroll {
  scrollbar-width: thin;
  scrollbar-color: oklch(0.74 0.13 82 / 0.4) transparent;
}

.mega-menu-scroll::-webkit-scrollbar {
  width: 6px;
}

.mega-menu-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.mega-menu-scroll::-webkit-scrollbar-thumb {
  background: oklch(0.74 0.13 82 / 0.35);
  border-radius: 3px;
}

.mega-menu-scroll::-webkit-scrollbar-thumb:hover {
  background: oklch(0.74 0.13 82 / 0.6);
}

/* ── Custom scrollbar styling (toned gold) ──────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: oklch(0.96 0.008 75);
}

::-webkit-scrollbar-thumb {
  background: oklch(0.74 0.13 82);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: oklch(0.56 0.11 75);
}

/* ============================================================
   MOBILE REMODEL — SIDE-BY-SIDE LAYOUT SYSTEM
   All rules scoped to max-width: 768px / 640px.
   Desktop (min-width: 769px) is NEVER affected.
   ============================================================ */

@media (max-width: 768px) {
  /* ── 1. 2-column card grids ─────────────────────────────────── */
  .mobile-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

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

  .mobile-horizontal-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .mobile-compact-card {
    padding: 0.75rem;
    border-radius: 8px;
  }

  .mobile-compact-card p,
  .mobile-compact-card span {
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .mobile-compact-card h3,
  .mobile-compact-card h4 {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
  }

  /* ── 2. Section compression ─────────────────────────────────── */
  .mobile-section-tight {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .section-rhythm-mobile {
    min-height: unset !important;
    padding: 1.5rem 1rem !important;
  }

  section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  /* ── 3. Horizontal steps/process strip ──────────────────────── */
  .mobile-steps-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.375rem;
    overflow-x: hidden;
  }

  .mobile-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
  }

  .mobile-step-item .step-num {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    border-radius: 50%;
  }

  .mobile-step-item .step-title {
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 0.3rem;
    line-height: 1.2;
  }

  .mobile-step-item .step-desc {
    font-size: 0.65rem;
    opacity: 0.8;
    margin-top: 0.2rem;
    line-height: 1.3;
  }

  /* ── 4. FAQ 2-column layout ─────────────────────────────────── */
  .mobile-faq-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .mobile-faq-item {
    background: oklch(0.74 0.13 82 / 0.05);
    border: 1px solid oklch(0.74 0.13 82 / 0.2);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
  }

  .mobile-faq-item .faq-q {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--martinez-charcoal);
    line-height: 1.3;
  }

  .mobile-faq-item .faq-a {
    font-size: 0.72rem;
    color: oklch(0.4 0.008 65);
    margin-top: 0.4rem;
    line-height: 1.5;
  }

  /* ── 5. Promise pillars 2-col ───────────────────────────────── */
  .promise-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.625rem !important;
  }

  .promise-card {
    padding: 0.875rem !important;
    min-height: unset !important;
  }

  .promise-card h3 {
    font-size: 0.85rem !important;
  }

  .promise-card p {
    font-size: 0.75rem !important;
  }

  /* ── 6. Stats grid 2-col reinforced ────────────────────────── */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  /* ── 7. Service features 2-col ─────────────────────────────── */
  .service-features-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .service-feature-card {
    padding: 0.75rem !important;
  }

  .service-feature-card h3 {
    font-size: 0.82rem !important;
  }

  .service-feature-card p {
    font-size: 0.72rem !important;
  }

  /* ── 8. Trust strip horizontal row ─────────────────────────── */
  .trust-strip,
  .trust-items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 0.375rem 0.75rem;
  }

  .trust-item {
    min-width: unset;
    flex: 0 0 auto;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
  }

  /* ── 9. Reviews side-by-side ────────────────────────────────── */
  .reviews-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .review-card {
    padding: 0.75rem !important;
  }

  .review-card p {
    font-size: 0.72rem !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
  }

  /* ── 10. Service hero height reinforced ─────────────────────── */
  .service-hero-compact {
    height: 180px !important;
    min-height: 160px !important;
  }

  /* ── 11. City tags horizontal wrap ─────────────────────────── */
  .city-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .city-tag {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
  }

  /* ── 12. Process cards 2-col ────────────────────────────────── */
  .process-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .process-card {
    padding: 0.75rem !important;
  }

  .process-card h3 {
    font-size: 0.82rem !important;
  }

  .process-card p {
    font-size: 0.72rem !important;
  }
}

/* Additional tightening at 640px breakpoint */
@media (max-width: 640px) {
  .service-hero-compact {
    height: 180px !important;
    min-height: 160px !important;
  }

  /* Hero h1 smallest breakpoint */
  .service-hero-compact h1,
  [class*="hero"] h1 {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
  }

  /* 2-col grids stay 2-col even at 360px — items are compact enough */
  .mobile-2col,
  .mobile-2col-wide {
    grid-template-columns: 1fr 1fr;
  }

  /* Very small screens: single-col fallback for review/faq 2col */
  @media (max-width: 380px) {
    .reviews-grid,
    .mobile-faq-2col {
      grid-template-columns: 1fr !important;
    }
  }
}

/* ============================================================
   PRINT STYLES — Photo Checklist
   Clean printed version: white background, readable text,
   visible checkbox boxes, no dark backgrounds or shadows.
   ============================================================ */
@media print {
  /* Force light backgrounds and dark text everywhere */
  body,
  .section-premium-bg,
  .card-premium,
  [class*="bg-"] {
    background: #ffffff !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* Remove gold-tinted borders, use clean dark hairlines */
  .card-premium,
  .border-gold-light,
  .border-gold-thin,
  .border-gold {
    border: 1px solid #1a1a1a !important;
  }

  /* Hide screen-only chrome */
  .print\:hidden {
    display: none !important;
  }

  /* Show print-only blocks */
  .print\:block {
    display: block !important;
  }

  /* Reset entrance animations so content is visible immediately */
  .scroll-reveal,
  .fade-in-soft,
  .card-lift,
  .curved-gold-divider::after,
  .curved-divider-draw svg path {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }

  /* Typography — readable sizes, no line-through on completed items */
  h1,
  h2,
  h3 {
    color: #1a1a1a !important;
  }

  .line-through {
    text-decoration: line-through;
    color: #555 !important;
  }

  /* Meta labels readable */
  dt,
  dd,
  p,
  span {
    color: #1a1a1a !important;
  }

  /* Page margins for print */
  @page {
    margin: 1.5cm;
  }

  /* Avoid breaking a checklist row across pages */
  article {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Section headers stay with their first item */
  h2 {
    -moz-column-break-after: avoid;
         break-after: avoid;
    page-break-after: avoid;
  }
}
.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground *::-moz-selection {
  color: oklch(var(--primary-foreground));
}
.selection\:text-primary-foreground *::selection {
  color: oklch(var(--primary-foreground));
}
.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground::-moz-selection {
  color: oklch(var(--primary-foreground));
}
.selection\:text-primary-foreground::selection {
  color: oklch(var(--primary-foreground));
}
.file\:inline-flex::file-selector-button {
  display: inline-flex;
}
.file\:h-7::file-selector-button {
  height: 1.75rem;
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-foreground::file-selector-button {
  color: oklch(var(--foreground));
}
@media (max-width: 767px) {
    /* Ensure no horizontal scroll ever */

    /* Service hero compact on mobile */

    /* Minimum tap target for all interactive elements */

    /* Footer columns stack cleanly */

    /* Map does not overflow */

    /* Responsive map height — shorter on mobile, no horizontal scroll */

    /* ── Mobile dopamine scroll animations ──────────────── */

    /* Smooth scale-up reveal for cards — satisfying spring pop as they enter */

    /* Gold line sweep — draws in from left when section enters */

    /* Slide up with gentle bounce for section headings */

    /* Fade in with slight left-drift for supporting text */

    /* CTA button spring bounce-in */

    /* Staggered card reveals (≈0.07s apart) */

    /* Micro-interaction: button tap feedback */

    /* Visual divider stripe between sections — warm charcoal undertone */

    /* Compact section padding on mobile */

    /* Progress pulse dot */

    /* Shimmer highlight on cards when they enter */
    @keyframes shimmerOnce {
      0% {
        background-position: -200% center;
      }
      100% {
        background-position: 200% center;
      }
    }

    /* Icon pulse for sticky call button */
    @keyframes iconPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.15);
      }
    }

    /* Ensure no horizontal overflow */

    /* Compact hero text on mobile */

    /* Section rhythm — sections don't force minimum height */

    /* Card grid mobile single column */

    /* ── Mobile 2-column grid for cards ─────────────────────────────────── */

    /* ── Compact card — tighter padding for mobile 2-col layout ─────────── */
    .mobile-compact-card .file\:h-7.w-7::file-selector-button {
      width: 1.1rem !important;
      height: 1.1rem !important;
    }

    /* ── Horizontal steps row — all 3 steps visible at once ─────────────── */

    /* ── FAQ 2-column compact layout ────────────────────────────────────── */

    /* ── City tags horizontal wrap row ──────────────────────────────────── */

    /* ── Emergency strip compact ─────────────────────────────────────────── */
  }
.placeholder\:text-gray-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.placeholder\:text-gray-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}
.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}
.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}
.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}
.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[\#d4af37\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(212 175 55 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#d4af37\]\/40:hover {
  border-color: rgb(212 175 55 / 0.4);
}
.hover\:border-\[\#d4af37\]\/45:hover {
  border-color: rgb(212 175 55 / 0.45);
}
.hover\:border-\[\#d4af37\]\/70:hover {
  border-color: rgb(212 175 55 / 0.7);
}
.hover\:border-\[\#e8c860\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(232 200 96 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#222\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(34 34 34 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#d4af37\]\/10:hover {
  background-color: rgb(212 175 55 / 0.1);
}
.hover\:bg-\[\#d4af37\]\/5:hover {
  background-color: rgb(212 175 55 / 0.05);
}
.hover\:bg-\[\#e8c860\]\/10:hover {
  background-color: rgb(232 200 96 / 0.1);
}
.hover\:bg-\[\#e8c860\]\/90:hover {
  background-color: rgb(232 200 96 / 0.9);
}
.hover\:bg-\[\#f5dc7a\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 220 122 / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-black:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted\/50:hover {
  background-color: oklch(var(--muted) / 0.5);
}
.hover\:bg-primary\/5:hover {
  background-color: oklch(var(--primary) / 0.05);
}
.hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
.hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}
.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-white\/90:hover {
  background-color: rgb(255 255 255 / 0.9);
}
.hover\:from-\[\#f5d96a\]:hover {
  --tw-gradient-from: #f5d96a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 217 106 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-\[\#eacb55\]:hover {
  --tw-gradient-to: #eacb55 var(--tw-gradient-to-position);
}
.hover\:text-\[\#c8a83a\]:hover {
  --tw-text-opacity: 1;
  color: rgb(200 168 58 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#d4af37\]:hover {
  --tw-text-opacity: 1;
  color: rgb(212 175 55 / var(--tw-text-opacity, 1));
}
.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}
.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}
.hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_0_40px_rgba\(212\2c 175\2c 55\2c 0\.5\)\]:hover {
  --tw-shadow: 0 0 40px rgba(212,175,55,0.5);
  --tw-shadow-colored: 0 0 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_4px_20px_rgba\(212\2c 175\2c 55\2c 0\.14\)\]:hover {
  --tw-shadow: 0 4px 20px rgba(212,175,55,0.14);
  --tw-shadow-colored: 0 4px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_4px_20px_rgba\(212\2c 175\2c 55\2c 0\.5\)\]:hover {
  --tw-shadow: 0 4px 20px rgba(212,175,55,0.5);
  --tw-shadow-colored: 0 4px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_6px_24px_rgba\(212\2c 175\2c 55\2c 0\.7\)\]:hover {
  --tw-shadow: 0 6px 24px rgba(212,175,55,0.7);
  --tw-shadow-colored: 0 6px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_6px_28px_rgba\(212\2c 175\2c 55\2c 0\.2\)\]:hover {
  --tw-shadow: 0 6px 28px rgba(212,175,55,0.2);
  --tw-shadow-colored: 0 6px 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_8px_50px_rgba\(212\2c 175\2c 55\2c 0\.35\)\]:hover {
  --tw-shadow: 0 8px 50px rgba(212,175,55,0.35);
  --tw-shadow-colored: 0 8px 50px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-card-elevated:hover {
  --tw-shadow: 0 10px 30px oklch(0 0 0 / 0.15), 0 4px 12px oklch(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color), 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-card-subtle:hover {
  --tw-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-gold-glow:hover {
  --tw-shadow: 0 2px 6px oklch(0 0 0 / 0.15), 0 6px 16px oklch(0 0 0 / 0.1);
  --tw-shadow-colored: 0 2px 6px var(--tw-shadow-color), 0 6px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-gold-glow-soft:hover {
  --tw-shadow: 0 1px 3px oklch(0 0 0 / 0.08);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-4:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.hover\:shadow-gold-glow:hover {
    box-shadow: 0 2px 6px oklch(0 0 0 / 0.15), 0 6px 16px oklch(0 0 0 / 0.1);
  }
.hover\:shadow-gold-glow-soft:hover {
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.08);
  }
.hover\:shadow-card-elevated:hover {
    box-shadow: 0 10px 30px oklch(0 0 0 / 0.15), 0 4px 12px oklch(0 0 0 / 0.1);
  }
.hover\:shadow-card-subtle:hover {
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  }
.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}
.focus\:z-10:focus {
  z-index: 10;
}
.focus\:border-gray-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-gray-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:z-10:focus-visible {
  z-index: 10;
}
.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.focus-visible\:outline:focus-visible {
  outline-style: solid;
}
.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}
.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}
.focus-visible\:outline-offset-4:focus-visible {
  outline-offset: 4px;
}
.focus-visible\:outline-\[\#d4af37\]:focus-visible {
  outline-color: #d4af37;
}
.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-4:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-\[3px\]:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}
.focus-visible\:ring-primary:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--primary) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-transparent:focus-visible {
  --tw-ring-offset-color: transparent;
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.99\]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:bg-sidebar-accent:active {
  background-color: oklch(var(--sidebar-accent));
}
.active\:text-sidebar-accent-foreground:active {
  color: oklch(var(--sidebar-accent-foreground));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:scale-100:disabled {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-70:disabled {
  opacity: 0.7;
}
.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:bg-\[\#d4af37\] {
  --tw-bg-opacity: 1;
  background-color: rgb(212 175 55 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-\[\#d4af37\] {
  --tw-text-opacity: 1;
  color: rgb(212 175 55 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-50 {
  opacity: 0.5;
}
.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}
.has-\[\>svg\]\:gap-x-3:has(>svg) {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}
.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}
.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}
.aria-selected\:text-muted-foreground[aria-selected="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
  left: 0px;
  right: 0px;
}
.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
  top: 0px;
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
  top: 0px;
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
  left: 0px;
  right: 0px;
}
.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
  left: 0px;
}
.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
  right: 0px;
}
.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
  top: 0px;
}
.data-\[active\=true\]\:z-10[data-active="true"] {
  z-index: 10;
}
.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
  margin-top: 6rem;
}
.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
  margin-bottom: 6rem;
}
.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
}
.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
  height: 100%;
}
.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}
.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[size\=default\]\:h-9[data-size="default"] {
  height: 2.25rem;
}
.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
}
.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
}
.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
}
.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}
.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}
.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
}
.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
}
.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}
.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}
.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
}
.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
}
.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
}
.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
}
.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
}
.data-\[active\=true\]\:border-ring[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
  background-color: oklch(var(--accent) / 0.5);
}
.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: oklch(var(--sidebar-accent));
}
.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: oklch(var(--background));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: oklch(var(--accent) / 0.5);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: oklch(var(--input));
}
.data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
}
.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}
.data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: oklch(var(--sidebar-accent-foreground));
}
.data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: oklch(var(--primary-foreground));
}
.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}
.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[variant\=outline\]\:shadow-xs[data-variant="outline"] {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}
.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}
.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}
.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}
.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}
.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
  display: flex;
}
.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
  align-items: center;
}
.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
  gap: 0.5rem;
}
.\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > * {
  color: oklch(var(--destructive) / 0.9);
}
.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}
.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
  border-left-width: 1px;
}
.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: oklch(var(--sidebar-accent));
}
.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: oklch(var(--sidebar-accent-foreground));
}
.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: oklch(var(--destructive) / 0.1);
}
.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
  pointer-events: none;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
}
.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}
.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
  top: 100%;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
  margin-top: 0.375rem;
}
.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
  display: block;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
  overflow: hidden;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: var(--radius);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border {
  border-width: 1px;
}
.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}
.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  background-color: oklch(var(--popover));
}
.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
  text-align: center;
}
.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
  text-align: center;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}
.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
  opacity: 0.5;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
}
@media (max-width: 767px) {
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */
    .group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center.mb-16,.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center.mb-12 {
      margin-bottom: 1rem !important;
    }

    /* Cards: smaller padding, tighter gaps */

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */
    .group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center.mb-16,.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center.mb-12 {
      margin-bottom: 1rem !important;
    }

    /* Cards: smaller padding, tighter gaps */

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */
    .group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center.mb-16,.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center.mb-12 {
      margin-bottom: 1rem !important;
    }

    /* Cards: smaller padding, tighter gaps */

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */
    .group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center.mb-16,.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center.mb-12 {
      margin-bottom: 1rem !important;
    }

    /* Cards: smaller padding, tighter gaps */

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
  }
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}
.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover {
  background-color: oklch(var(--sidebar));
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}
.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}
.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}
.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}
.dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
}
.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}
.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
}
.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
}
.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}
.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
}
.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary-foreground));
}
.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
}
.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  color: oklch(var(--foreground));
}
.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
}
@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:flex {
    display: flex;
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:max-w-lg {
    max-width: 32rem;
  }
  .sm\:max-w-sm {
    max-width: 24rem;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:justify-end {
    justify-content: flex-end;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }
  .sm\:gap-4 {
    gap: 1rem;
  }
  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .sm\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .sm\:pl-2\.5 {
    padding-left: 0.625rem;
  }
  .sm\:pr-2\.5 {
    padding-right: 0.625rem;
  }
  .sm\:text-left {
    text-align: left;
  }
  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  @media (max-width: 767px) {
    /* Ensure no horizontal scroll ever */

    /* Service hero compact on mobile */

    /* Minimum tap target for all interactive elements */

    /* Footer columns stack cleanly */

    /* Map does not overflow */

    /* Responsive map height — shorter on mobile, no horizontal scroll */

    /* ── Mobile dopamine scroll animations ──────────────── */

    /* Smooth scale-up reveal for cards — satisfying spring pop as they enter */

    /* Gold line sweep — draws in from left when section enters */

    /* Slide up with gentle bounce for section headings */

    /* Fade in with slight left-drift for supporting text */

    /* CTA button spring bounce-in */

    /* Staggered card reveals (≈0.07s apart) */

    /* Micro-interaction: button tap feedback */

    /* Visual divider stripe between sections — warm charcoal undertone */

    /* Compact section padding on mobile */

    /* Progress pulse dot */

    /* Shimmer highlight on cards when they enter */
    @keyframes shimmerOnce {
      0% {
        background-position: -200% center;
      }
      100% {
        background-position: 200% center;
      }
    }

    /* Icon pulse for sticky call button */
    @keyframes iconPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.15);
      }
    }

    /* Ensure no horizontal overflow */

    /* Compact hero text on mobile */

    /* Section rhythm — sections don't force minimum height */

    /* Card grid mobile single column */

    /* ── Mobile 2-column grid for cards ─────────────────────────────────── */

    /* ── Compact card — tighter padding for mobile 2-col layout ─────────── */

    /* ── Horizontal steps row — all 3 steps visible at once ─────────────── */

    /* ── FAQ 2-column compact layout ────────────────────────────────────── */
    .mobile-faq-item .sm\:px-6.pb-6 {
      padding: 0.5rem 0.75rem 0.625rem !important;
      font-size: 0.6rem !important;
      line-height: 1.4 !important;
    }

    /* ── City tags horizontal wrap row ──────────────────────────────────── */

    /* ── Emergency strip compact ─────────────────────────────────────────── */
    /* Ensure no horizontal scroll ever */

    /* Service hero compact on mobile */

    /* Minimum tap target for all interactive elements */

    /* Footer columns stack cleanly */

    /* Map does not overflow */

    /* Responsive map height — shorter on mobile, no horizontal scroll */

    /* ── Mobile dopamine scroll animations ──────────────── */

    /* Smooth scale-up reveal for cards — satisfying spring pop as they enter */

    /* Gold line sweep — draws in from left when section enters */

    /* Slide up with gentle bounce for section headings */

    /* Fade in with slight left-drift for supporting text */

    /* CTA button spring bounce-in */

    /* Staggered card reveals (≈0.07s apart) */

    /* Micro-interaction: button tap feedback */

    /* Visual divider stripe between sections — warm charcoal undertone */

    /* Compact section padding on mobile */

    /* Progress pulse dot */

    /* Shimmer highlight on cards when they enter */
    @keyframes shimmerOnce {
      0% {
        background-position: -200% center;
      }
      100% {
        background-position: 200% center;
      }
    }

    /* Icon pulse for sticky call button */
    @keyframes iconPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.15);
      }
    }

    /* Ensure no horizontal overflow */

    /* Compact hero text on mobile */

    /* Section rhythm — sections don't force minimum height */

    /* Card grid mobile single column */

    /* ── Mobile 2-column grid for cards ─────────────────────────────────── */

    /* ── Compact card — tighter padding for mobile 2-col layout ─────────── */

    /* ── Horizontal steps row — all 3 steps visible at once ─────────────── */

    /* ── FAQ 2-column compact layout ────────────────────────────────────── */

    /* ── City tags horizontal wrap row ──────────────────────────────────── */

    /* ── Emergency strip compact ─────────────────────────────────────────── */
    .emergency-compact a.sm\:text-4xl[href^="tel"] {
      font-size: 1.4rem !important;
    }
  }

  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"] {
    max-width: 24rem;
  }

  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
    max-width: 24rem;
  }
}
@media (min-width: 768px) {
  .md\:absolute {
    position: absolute;
  }
  .md\:bottom-8 {
    bottom: 2rem;
  }
  .md\:right-8 {
    right: 2rem;
  }
  .md\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .md\:mb-10 {
    margin-bottom: 2.5rem;
  }
  .md\:mb-12 {
    margin-bottom: 3rem;
  }
  .md\:mb-14 {
    margin-bottom: 3.5rem;
  }
  .md\:mb-16 {
    margin-bottom: 4rem;
  }
  .md\:mb-2 {
    margin-bottom: 0.5rem;
  }
  .md\:mb-4 {
    margin-bottom: 1rem;
  }
  .md\:mb-5 {
    margin-bottom: 1.25rem;
  }
  .md\:mb-6 {
    margin-bottom: 1.5rem;
  }
  .md\:mb-7 {
    margin-bottom: 1.75rem;
  }
  .md\:mb-8 {
    margin-bottom: 2rem;
  }
  .md\:mb-9 {
    margin-bottom: 2.25rem;
  }
  .md\:mt-10 {
    margin-top: 2.5rem;
  }
  .md\:mt-12 {
    margin-top: 3rem;
  }
  .md\:mt-14 {
    margin-top: 3.5rem;
  }
  .md\:mt-16 {
    margin-top: 4rem;
  }
  .md\:mt-5 {
    margin-top: 1.25rem;
  }
  .md\:mt-8 {
    margin-top: 2rem;
  }
  .md\:line-clamp-none {
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: none;
  }
  .md\:block {
    display: block;
  }
  .md\:flex {
    display: flex;
  }
  .md\:inline-flex {
    display: inline-flex;
  }
  .md\:h-0 {
    height: 0px;
  }
  .md\:h-10 {
    height: 2.5rem;
  }
  .md\:h-14 {
    height: 3.5rem;
  }
  .md\:h-20 {
    height: 5rem;
  }
  .md\:h-4 {
    height: 1rem;
  }
  .md\:h-5 {
    height: 1.25rem;
  }
  .md\:h-\[300px\] {
    height: 300px;
  }
  .md\:h-\[76px\] {
    height: 76px;
  }
  .md\:w-10 {
    width: 2.5rem;
  }
  .md\:w-14 {
    width: 3.5rem;
  }
  .md\:w-20 {
    width: 5rem;
  }
  .md\:w-4 {
    width: 1rem;
  }
  .md\:w-5 {
    width: 1.25rem;
  }
  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }
  .md\:w-auto {
    width: auto;
  }
  .md\:max-w-none {
    max-width: none;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:items-start {
    align-items: flex-start;
  }
  .md\:justify-start {
    justify-content: flex-start;
  }
  .md\:gap-1\.5 {
    gap: 0.375rem;
  }
  .md\:gap-10 {
    gap: 2.5rem;
  }
  .md\:gap-12 {
    gap: 3rem;
  }
  .md\:gap-2\.5 {
    gap: 0.625rem;
  }
  .md\:gap-3 {
    gap: 0.75rem;
  }
  .md\:gap-4 {
    gap: 1rem;
  }
  .md\:gap-5 {
    gap: 1.25rem;
  }
  .md\:gap-6 {
    gap: 1.5rem;
  }
  .md\:gap-8 {
    gap: 2rem;
  }
  .md\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  }
  .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }
  .md\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }
  .md\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }
  .md\:p-10 {
    padding: 2.5rem;
  }
  .md\:p-12 {
    padding: 3rem;
  }
  .md\:p-5 {
    padding: 1.25rem;
  }
  .md\:p-6 {
    padding: 1.5rem;
  }
  .md\:p-7 {
    padding: 1.75rem;
  }
  .md\:p-8 {
    padding: 2rem;
  }
  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .md\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .md\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .md\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .md\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .md\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .md\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .md\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .md\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .md\:py-36 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .md\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .md\:pb-10 {
    padding-bottom: 2.5rem;
  }
  .md\:pb-14 {
    padding-bottom: 3.5rem;
  }
  .md\:pb-20 {
    padding-bottom: 5rem;
  }
  .md\:pb-24 {
    padding-bottom: 6rem;
  }
  .md\:pb-28 {
    padding-bottom: 7rem;
  }
  .md\:pb-8 {
    padding-bottom: 2rem;
  }
  .md\:pt-14 {
    padding-top: 3.5rem;
  }
  .md\:pt-20 {
    padding-top: 5rem;
  }
  .md\:text-left {
    text-align: left;
  }
  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .md\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .md\:opacity-0 {
    opacity: 0;
  }

  @media (max-width: 767px) {
    /* Ensure no horizontal scroll ever */

    /* Service hero compact on mobile */

    /* Minimum tap target for all interactive elements */

    /* Footer columns stack cleanly */

    /* Map does not overflow */

    /* Responsive map height — shorter on mobile, no horizontal scroll */

    /* ── Mobile dopamine scroll animations ──────────────── */

    /* Smooth scale-up reveal for cards — satisfying spring pop as they enter */

    /* Gold line sweep — draws in from left when section enters */

    /* Slide up with gentle bounce for section headings */

    /* Fade in with slight left-drift for supporting text */

    /* CTA button spring bounce-in */

    /* Staggered card reveals (≈0.07s apart) */

    /* Micro-interaction: button tap feedback */

    /* Visual divider stripe between sections — warm charcoal undertone */

    /* Compact section padding on mobile */

    /* Progress pulse dot */

    /* Shimmer highlight on cards when they enter */
    @keyframes shimmerOnce {
      0% {
        background-position: -200% center;
      }
      100% {
        background-position: 200% center;
      }
    }

    /* Icon pulse for sticky call button */
    @keyframes iconPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.15);
      }
    }

    /* Ensure no horizontal overflow */

    /* Compact hero text on mobile */

    /* Section rhythm — sections don't force minimum height */

    /* Card grid mobile single column */

    /* ── Mobile 2-column grid for cards ─────────────────────────────────── */

    /* ── Compact card — tighter padding for mobile 2-col layout ─────────── */
    .mobile-compact-card .md\:w-14.h-14 {
      width: 2rem !important;
      height: 2rem !important;
      margin-bottom: 0.5rem !important;
    }

    /* ── Horizontal steps row — all 3 steps visible at once ─────────────── */

    /* ── FAQ 2-column compact layout ────────────────────────────────────── */

    /* ── City tags horizontal wrap row ──────────────────────────────────── */

    /* ── Emergency strip compact ─────────────────────────────────────────── */
    /* Ensure no horizontal scroll ever */

    /* Service hero compact on mobile */

    /* Minimum tap target for all interactive elements */

    /* Footer columns stack cleanly */

    /* Map does not overflow */

    /* Responsive map height — shorter on mobile, no horizontal scroll */

    /* ── Mobile dopamine scroll animations ──────────────── */

    /* Smooth scale-up reveal for cards — satisfying spring pop as they enter */

    /* Gold line sweep — draws in from left when section enters */

    /* Slide up with gentle bounce for section headings */

    /* Fade in with slight left-drift for supporting text */

    /* CTA button spring bounce-in */

    /* Staggered card reveals (≈0.07s apart) */

    /* Micro-interaction: button tap feedback */

    /* Visual divider stripe between sections — warm charcoal undertone */

    /* Compact section padding on mobile */

    /* Progress pulse dot */

    /* Shimmer highlight on cards when they enter */
    @keyframes shimmerOnce {
      0% {
        background-position: -200% center;
      }
      100% {
        background-position: 200% center;
      }
    }

    /* Icon pulse for sticky call button */
    @keyframes iconPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.15);
      }
    }

    /* Ensure no horizontal overflow */

    /* Compact hero text on mobile */

    /* Section rhythm — sections don't force minimum height */

    /* Card grid mobile single column */

    /* ── Mobile 2-column grid for cards ─────────────────────────────────── */

    /* ── Compact card — tighter padding for mobile 2-col layout ─────────── */
    .mobile-compact-card .md\:h-14.w-14 {
      width: 2rem !important;
      height: 2rem !important;
      margin-bottom: 0.5rem !important;
    }

    /* ── Horizontal steps row — all 3 steps visible at once ─────────────── */

    /* ── FAQ 2-column compact layout ────────────────────────────────────── */

    /* ── City tags horizontal wrap row ──────────────────────────────────── */

    /* ── Emergency strip compact ─────────────────────────────────────────── */
    /* Ensure no horizontal scroll ever */

    /* Service hero compact on mobile */

    /* Minimum tap target for all interactive elements */

    /* Footer columns stack cleanly */

    /* Map does not overflow */

    /* Responsive map height — shorter on mobile, no horizontal scroll */

    /* ── Mobile dopamine scroll animations ──────────────── */

    /* Smooth scale-up reveal for cards — satisfying spring pop as they enter */

    /* Gold line sweep — draws in from left when section enters */

    /* Slide up with gentle bounce for section headings */

    /* Fade in with slight left-drift for supporting text */

    /* CTA button spring bounce-in */

    /* Staggered card reveals (≈0.07s apart) */

    /* Micro-interaction: button tap feedback */

    /* Visual divider stripe between sections — warm charcoal undertone */

    /* Compact section padding on mobile */

    /* Progress pulse dot */

    /* Shimmer highlight on cards when they enter */
    @keyframes shimmerOnce {
      0% {
        background-position: -200% center;
      }
      100% {
        background-position: 200% center;
      }
    }

    /* Icon pulse for sticky call button */
    @keyframes iconPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.15);
      }
    }

    /* Ensure no horizontal overflow */

    /* Compact hero text on mobile */

    /* Section rhythm — sections don't force minimum height */

    /* Card grid mobile single column */

    /* ── Mobile 2-column grid for cards ─────────────────────────────────── */

    /* ── Compact card — tighter padding for mobile 2-col layout ─────────── */

    /* ── Horizontal steps row — all 3 steps visible at once ─────────────── */

    /* ── FAQ 2-column compact layout ────────────────────────────────────── */
    .mobile-faq-item .md\:px-6.pb-6 {
      padding: 0.5rem 0.75rem 0.625rem !important;
      font-size: 0.6rem !important;
      line-height: 1.4 !important;
    }

    /* ── City tags horizontal wrap row ──────────────────────────────────── */

    /* ── Emergency strip compact ─────────────────────────────────────────── */
    /* Ensure no horizontal scroll ever */

    /* Service hero compact on mobile */

    /* Minimum tap target for all interactive elements */

    /* Footer columns stack cleanly */

    /* Map does not overflow */

    /* Responsive map height — shorter on mobile, no horizontal scroll */

    /* ── Mobile dopamine scroll animations ──────────────── */

    /* Smooth scale-up reveal for cards — satisfying spring pop as they enter */

    /* Gold line sweep — draws in from left when section enters */

    /* Slide up with gentle bounce for section headings */

    /* Fade in with slight left-drift for supporting text */

    /* CTA button spring bounce-in */

    /* Staggered card reveals (≈0.07s apart) */

    /* Micro-interaction: button tap feedback */

    /* Visual divider stripe between sections — warm charcoal undertone */

    /* Compact section padding on mobile */

    /* Progress pulse dot */

    /* Shimmer highlight on cards when they enter */
    @keyframes shimmerOnce {
      0% {
        background-position: -200% center;
      }
      100% {
        background-position: 200% center;
      }
    }

    /* Icon pulse for sticky call button */
    @keyframes iconPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.15);
      }
    }

    /* Ensure no horizontal overflow */

    /* Compact hero text on mobile */

    /* Section rhythm — sections don't force minimum height */

    /* Card grid mobile single column */

    /* ── Mobile 2-column grid for cards ─────────────────────────────────── */

    /* ── Compact card — tighter padding for mobile 2-col layout ─────────── */

    /* ── Horizontal steps row — all 3 steps visible at once ─────────────── */

    /* ── FAQ 2-column compact layout ────────────────────────────────────── */

    /* ── City tags horizontal wrap row ──────────────────────────────────── */

    /* ── Emergency strip compact ─────────────────────────────────────────── */
    .emergency-compact a.md\:text-4xl[href^="tel"] {
      font-size: 1.4rem !important;
    }
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */
    .md\:mb-16.text-center {
      margin-bottom: 1rem !important;
    }

    /* Cards: smaller padding, tighter gaps */

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */
    .md\:mb-12
    .text-center {
      margin-bottom: 1rem !important;
    }

    /* Cards: smaller padding, tighter gaps */

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */

    /* Cards: smaller padding, tighter gaps */
    .md\:gap-6.grid {
      gap: 0.625rem !important;
    }

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */

    /* Cards: smaller padding, tighter gaps */
    .md\:gap-8
    .grid {
      gap: 0.625rem !important;
    }

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */

    /* Cards: smaller padding, tighter gaps */

    .md\:p-7 {
      padding: 0.875rem !important;
    }

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */

    /* Cards: smaller padding, tighter gaps */
    .md\:p-6 {
      padding: 0.75rem !important;
    }

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */

    /* Cards: smaller padding, tighter gaps */
    .md\:p-5 {
      padding: 0.625rem !important;
    }

    /* Stats section compact */

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
    /* Hero: compact — fits more above fold */

    /* Reduce all section py-24 / py-20 to compact equivalents */

    /* Tighter container padding */

    /* Reduce section heading margins */

    /* Cards: smaller padding, tighter gaps */

    /* Stats section compact */
    .md\:text-5xl.md\:text-6xl.font-black {
      font-size: 2rem !important;
    }

    /* Smaller buttons on mobile */

    /* Trust bar — smaller text, tighter gap */

    /* Scroll reveal on mobile: smaller displacement */
  }
  .md\:after\:hidden::after {
    content: var(--tw-content);
    display: none;
  }
  .md\:hover\:-translate-y-1:hover {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .md\:hover\:shadow-\[0_8px_32px_rgba\(212\2c 175\2c 55\2c 0\.25\)\]:hover {
    --tw-shadow: 0 8px 32px rgba(212,175,55,0.25);
    --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }
  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }
  .peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2 {
    margin-left: 0.5rem;
  }
  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 0.75rem;
  }
  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }
  .lg\:top-24 {
    top: 6rem;
  }
  .lg\:order-1 {
    order: 1;
  }
  .lg\:order-2 {
    order: 2;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:inline-flex {
    display: inline-flex;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:w-1\/2 {
    width: 50%;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[1fr_360px\] {
    grid-template-columns: 1fr 360px;
  }
  .lg\:grid-cols-\[380px_1fr\] {
    grid-template-columns: 380px 1fr;
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .lg\:border-t-0 {
    border-top-width: 0px;
  }
  .lg\:p-10 {
    padding: 2.5rem;
  }
  .lg\:p-12 {
    padding: 3rem;
  }
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .lg\:py-44 {
    padding-top: 11rem;
    padding-bottom: 11rem;
  }
  .lg\:pt-0 {
    padding-top: 0px;
  }
  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  .lg\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  @media (max-width: 767px) {
    /* Ensure no horizontal scroll ever */

    /* Service hero compact on mobile */

    /* Minimum tap target for all interactive elements */

    /* Footer columns stack cleanly */

    /* Map does not overflow */

    /* Responsive map height — shorter on mobile, no horizontal scroll */

    /* ── Mobile dopamine scroll animations ──────────────── */

    /* Smooth scale-up reveal for cards — satisfying spring pop as they enter */

    /* Gold line sweep — draws in from left when section enters */

    /* Slide up with gentle bounce for section headings */

    /* Fade in with slight left-drift for supporting text */

    /* CTA button spring bounce-in */

    /* Staggered card reveals (≈0.07s apart) */

    /* Micro-interaction: button tap feedback */

    /* Visual divider stripe between sections — warm charcoal undertone */

    /* Compact section padding on mobile */

    /* Progress pulse dot */

    /* Shimmer highlight on cards when they enter */
    @keyframes shimmerOnce {
      0% {
        background-position: -200% center;
      }
      100% {
        background-position: 200% center;
      }
    }

    /* Icon pulse for sticky call button */
    @keyframes iconPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.15);
      }
    }

    /* Ensure no horizontal overflow */

    /* Compact hero text on mobile */

    /* Section rhythm — sections don't force minimum height */

    /* Card grid mobile single column */

    /* ── Mobile 2-column grid for cards ─────────────────────────────────── */

    /* ── Compact card — tighter padding for mobile 2-col layout ─────────── */

    /* ── Horizontal steps row — all 3 steps visible at once ─────────────── */

    /* ── FAQ 2-column compact layout ────────────────────────────────────── */

    /* ── City tags horizontal wrap row ──────────────────────────────────── */

    /* ── Emergency strip compact ─────────────────────────────────────────── */
    .emergency-compact a.lg\:text-4xl[href^="tel"] {
      font-size: 1.4rem !important;
    }
  }
}
.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>button\]\:hidden>button {
  display: none;
}
.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
}
.\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
}
.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}
.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}
.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}
.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}
.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}
.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}
.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}
.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}
.\[\&\>svg\]\:translate-y-0\.5>svg {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>svg\]\:text-current>svg {
  color: currentColor;
}
.\[\&\>svg\]\:text-muted-foreground>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: oklch(var(--sidebar-accent-foreground));
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: oklch(var(--muted-foreground) / 1);
}
.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: oklch(var(--muted) / 1);
}
.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: oklch(var(--muted) / 1);
}
.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}
.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}
[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}
[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}
[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}
[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}
[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
a.\[a\&\]\:hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
}
a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}