/* ==========================================================================
   AAA Florida Home Inspections — compiled stylesheet
   Replaces the Tailwind CDN. Contains only the utilities this page uses.
   If you add new Tailwind class names to index.html they will do nothing
   until a matching rule is added here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset (Tailwind Preflight, trimmed to what this page relies on)
   -------------------------------------------------------------------------- */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  tab-size: 4;
}
body { line-height: inherit; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
ul, ol { list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
button, select { text-transform: none; }
button, [type='button'], [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}
:disabled { cursor: default; }
textarea { resize: vertical; }
::placeholder { opacity: 1; color: #9CA3AF; }

img, svg, video, canvas, iframe, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }

[hidden] { display: none; }

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --ink:    #0E2E34;
  --slate:  #4A6A70;
  --teal:   #0E6E78;
  --tealdk: #0B565E;
  --gold:   #E0921B;
  --soft:   #F4F7F7;
  --line:   #DFE7E7;
}

/* --------------------------------------------------------------------------
   3. Type scale + component classes
   -------------------------------------------------------------------------- */
.h1 { font-size: clamp(2.4rem, 6.2vw, 4.5rem);  line-height: 1.02; letter-spacing: -.03em;  font-weight: 800; }
.h2 { font-size: clamp(1.85rem, 3.8vw, 2.9rem); line-height: 1.1;  letter-spacing: -.025em; font-weight: 800; }
.h3 { font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.25; letter-spacing: -.015em; font-weight: 700; }
.label { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--teal); color: #fff; }

/* Hero scrim ---------------------------------------------------------------
   Wide screens: heavy on the left where the text sits, clearing to near
   transparent on the right so the footage is plainly visible.
   Narrow screens: the copy spans the full width, so it fades top to bottom.
   Raise the first two values if your clip is bright and the headline softens. */
.hero-scrim {
  background: linear-gradient(100deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.60) 38%,
    rgba(255,255,255,.18) 68%,
    rgba(255,255,255,.04) 100%);
}
@media (max-width: 640px) {
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(255,255,255,.86) 0%,
      rgba(255,255,255,.66) 55%,
      rgba(255,255,255,.42) 100%);
  }
}

/* Hero video: scale the 16:9 Vimeo iframe so it always covers the section */
.video-bg iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;
  min-width: 177.78vh; min-height: 100%;
  border: 0; pointer-events: none;
}

/* Scroll reveal + stagger */
.motion-ok .reveal    { opacity: 0; transform: translateY(18px); }
.motion-ok .reveal.in { opacity: 1; transform: none;
                        transition: opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1); }
.motion-ok .reveal.r1.in { transition-delay: .09s; }
.motion-ok .reveal.r2.in { transition-delay: .18s; }
.motion-ok .reveal.r3.in { transition-delay: .27s; }

/* Hero entrance */
@media (prefers-reduced-motion: no-preference) {
  .anim-up { opacity: 0; animation: up .85s cubic-bezier(.2,.7,.3,1) forwards; }
  .a1 { animation-delay: .10s; } .a2 { animation-delay: .22s; }
  .a3 { animation-delay: .34s; } .a4 { animation-delay: .46s; }
}
@keyframes up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Shared interaction motion */
.lift { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease; }
.motion-ok .lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(14,46,52,.45); }

/* Reading progress under the header */
#progress { transform-origin: 0 50%; transform: scaleX(0); transition: transform .12s linear; }

/* 3D slider ----------------------------------------------------------------
   Rotated side slides reach past the container; clip so the page never
   scrolls sideways. `clip` (not `hidden`) avoids a new scroll container. */
#gallery { overflow-x: hidden; overflow-x: clip; }
#stage { perspective: 1500px; perspective-origin: 50% 50%; }
.slide { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d;
         backface-visibility: hidden; will-change: transform, opacity; }
.motion-ok .slide { transition: transform .7s cubic-bezier(.22,.68,.28,1),
                                opacity   .7s cubic-bezier(.22,.68,.28,1); }
.slide img { transition: filter .7s ease; filter: saturate(.55) brightness(.94); }
.slide.is-active img { filter: none; }
.slide.is-active { cursor: zoom-in; }
#stage.dragging .slide { transition: none; }
.dot { transition: width .3s cubic-bezier(.2,.7,.3,1), background-color .3s ease; }

#lightbox[hidden] { display: none; }

/* --------------------------------------------------------------------------
   4. Utilities
   -------------------------------------------------------------------------- */

/* Layout ------------------------------------------------------------------ */
.static   { position: static; }
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky   { position: sticky; }

.inset-0   { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.top-0     { top: 0; }
.top-4     { top: 1rem; }
.bottom-0  { bottom: 0; }
.bottom-5  { bottom: 1.25rem; }
.left-0    { left: 0; }
.left-2    { left: .5rem; }
.left-1\/2 { left: 50%; }
.right-0   { right: 0; }
.right-2   { right: .5rem; }
.right-4   { right: 1rem; }

.isolate { isolation: isolate; }
.z-50    { z-index: 50; }
.z-\[60\] { z-index: 60; }
.z-\[70\] { z-index: 70; }
.-z-10   { z-index: -10; }
.-z-20   { z-index: -20; }

.block       { display: block; }
.inline-flex { display: inline-flex; }
.flex        { display: flex; }
.grid        { display: grid; }
.hidden      { display: none; }

.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.place-items-center { place-items: center; }
.shrink-0        { flex-shrink: 0; }

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

.gap-2   { gap: .5rem; }
.gap-2\.5 { gap: .625rem; }
.gap-3   { gap: .75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-9   { gap: 2.25rem; }
.gap-10  { gap: 2.5rem; }
.gap-12  { gap: 3rem; }
.gap-px  { gap: 1px; }

.space-y-2 > * + * { margin-top: .5rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1    { margin-top: .25rem; }
.mt-1\.5 { margin-top: .375rem; }
.mt-2    { margin-top: .5rem; }
.mt-3    { margin-top: .75rem; }
.mt-4    { margin-top: 1rem; }
.mt-5    { margin-top: 1.25rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-7    { margin-top: 1.75rem; }
.mt-8    { margin-top: 2rem; }
.mt-10   { margin-top: 2.5rem; }
.mt-12   { margin-top: 3rem; }

.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.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-8  { padding-left: 2rem;    padding-right: 2rem; }
.px-10 { padding-left: 2.5rem;  padding-right: 2.5rem; }
.py-2    { padding-top: .5rem;    padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem;  padding-bottom: .625rem; }
.py-3    { padding-top: .75rem;   padding-bottom: .75rem; }
.py-3\.5 { padding-top: .875rem;  padding-bottom: .875rem; }
.py-4    { padding-top: 1rem;     padding-bottom: 1rem; }
.py-14   { padding-top: 3.5rem;   padding-bottom: 3.5rem; }
.py-16   { padding-top: 4rem;     padding-bottom: 4rem; }
.py-20   { padding-top: 5rem;     padding-bottom: 5rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-8  { padding-top: 2rem; }
.pb-24 { padding-bottom: 6rem; }
.pl-3  { padding-left: .75rem; }
.pr-5  { padding-right: 1.25rem; }

/* Sizing ------------------------------------------------------------------ */
.h-1\.5 { height: .375rem; }
.h-2    { height: .5rem; }
.h-7    { height: 1.75rem; }
.h-10   { height: 2.5rem; }
.h-11   { height: 2.75rem; }
.h-12   { height: 3rem; }
.h-px   { height: 1px; }
.h-full { height: 100%; }
.h-\[2px\]     { height: 2px; }
.h-\[4\.5rem\] { height: 4.5rem; }
.h-\[clamp\(200px\2c 42vw\2c 460px\)\] { height: clamp(200px, 42vw, 460px); }

.w-1\.5 { width: .375rem; }
.w-2    { width: .5rem; }
.w-7    { width: 1.75rem; }
.w-10   { width: 2.5rem; }
.w-11   { width: 2.75rem; }
.w-12   { width: 3rem; }
.w-full { width: 100%; }
.w-\[clamp\(240px\2c 52vw\2c 620px\)\] { width: clamp(240px, 52vw, 620px); }

.min-h-\[1\.2em\] { min-height: 1.2em; }
.max-h-\[86vh\]   { max-height: 86vh; }
.max-w-full { max-width: 100%; }
.max-w-sm   { max-width: 24rem; }
.max-w-lg   { max-width: 32rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-content { max-width: 76rem; }

.aspect-\[13\/8\] { aspect-ratio: 13 / 8; }

/* Typography -------------------------------------------------------------- */
.font-sans { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.text-sm  { font-size: .875rem;  line-height: 1.25rem; }
.text-xl  { font-size: 1.25rem;  line-height: 1.75rem; }
.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-\[13px\]      { font-size: 13px; }
.text-\[14px\]      { font-size: 14px; }
.text-\[15px\]      { font-size: 15px; }
.text-\[17px\]      { font-size: 17px; }
.text-\[1\.0625rem\] { font-size: 1.0625rem; }

.leading-none    { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.tracking-tight  { letter-spacing: -.025em; }
.text-center     { text-align: center; }
.break-all       { word-break: break-all; }
.antialiased     { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.underline { text-decoration-line: underline; }
.underline-offset-4 { text-underline-offset: 4px; }
.decoration-gold\/40 { text-decoration-color: rgba(224,146,27,.4); }

/* Colour ------------------------------------------------------------------ */
.text-ink   { color: var(--ink); }
.text-slate { color: var(--slate); }
.text-teal  { color: var(--teal); }
.text-gold  { color: var(--gold); }
.text-white { color: #fff; }
.text-white\/40 { color: rgba(255,255,255,.40); }
.text-white\/70 { color: rgba(255,255,255,.70); }
.text-white\/80 { color: rgba(255,255,255,.80); }
.text-white\/85 { color: rgba(255,255,255,.85); }
.text-\[\#1877F2\] { color: #1877F2; }
.text-\[\#0A66C2\] { color: #0A66C2; }
.text-\[\#D32323\] { color: #D32323; }

.bg-ink   { background-color: var(--ink); }
.bg-teal  { background-color: var(--teal); }
.bg-gold  { background-color: var(--gold); }
.bg-soft  { background-color: var(--soft); }
.bg-line  { background-color: var(--line); }
.bg-white { background-color: #fff; }
.bg-ink\/95   { background-color: rgba(14,46,52,.95); }
.bg-white\/90 { background-color: rgba(255,255,255,.90); }
.bg-white\/92 { background-color: rgba(255,255,255,.92); }

/* Borders ----------------------------------------------------------------- */
.border   { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-line       { border-color: var(--line); }
.border-white\/10  { border-color: rgba(255,255,255,.10); }
.border-white\/15  { border-color: rgba(255,255,255,.15); }
.border-white\/20  { border-color: rgba(255,255,255,.20); }
.border-white\/25  { border-color: rgba(255,255,255,.25); }
.rounded-full { border-radius: 9999px; }

/* Effects ----------------------------------------------------------------- */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(14,46,52,.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(14,46,52,.10), 0 4px 6px -4px rgba(14,46,52,.10); }
.shadow-\[0_24px_50px_-30px_rgba\(14\2c 46\2c 52\2c \.7\)\] { box-shadow: 0 24px 50px -30px rgba(14,46,52,.7); }

.backdrop-blur    { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); }

.overflow-hidden { overflow: hidden; }
.object-cover    { object-fit: cover; }
.object-contain  { object-fit: contain; }
.pointer-events-none { pointer-events: none; }
.touch-pan-y { touch-action: pan-y; }
.resize-y    { resize: vertical; }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.-translate-x-1\/2 { transform: translateX(-50%); }

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s;
}
.duration-300 { transition-duration: .3s; }

.scroll-smooth { scroll-behavior: smooth; }
.scroll-mt-24  { scroll-margin-top: 6rem; }

.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;
}

/* --------------------------------------------------------------------------
   5. Interaction variants
   -------------------------------------------------------------------------- */
.hover\:bg-teal:hover     { background-color: var(--teal); }
.hover\:bg-tealdk:hover   { background-color: var(--tealdk); }
.hover\:bg-slate:hover    { background-color: var(--slate); }
.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,.10); }
.hover\:bg-\[\#1877F2\]:hover { background-color: #1877F2; }
.hover\:bg-\[\#0A66C2\]:hover { background-color: #0A66C2; }
.hover\:bg-\[\#D32323\]:hover { background-color: #D32323; }

.hover\:text-teal:hover   { color: var(--teal); }
.hover\:text-tealdk:hover { color: var(--tealdk); }
.hover\:text-white:hover  { color: #fff; }

.hover\:border-teal:hover { border-color: var(--teal); }
.hover\:border-\[\#1877F2\]:hover { border-color: #1877F2; }
.hover\:border-\[\#0A66C2\]:hover { border-color: #0A66C2; }
.hover\:border-\[\#D32323\]:hover { border-color: #D32323; }

.hover\:decoration-gold:hover { text-decoration-color: var(--gold); }
.hover\:-translate-y-1:hover  { transform: translateY(-.25rem); }

.group:hover .group-hover\:bg-\[\#1877F2\] { background-color: #1877F2; }
.group:hover .group-hover\:bg-\[\#0A66C2\] { background-color: #0A66C2; }
.group:hover .group-hover\:bg-\[\#D32323\] { background-color: #D32323; }
.group:hover .group-hover\:border-\[\#1877F2\] { border-color: #1877F2; }
.group:hover .group-hover\:border-\[\#0A66C2\] { border-color: #0A66C2; }
.group:hover .group-hover\:border-\[\#D32323\] { border-color: #D32323; }
.group:hover .group-hover\:text-white { color: #fff; }
.group:hover .group-hover\:translate-x-1 { transform: translateX(.25rem); }

.focus\:border-teal:focus { border-color: var(--teal); }
.focus\:bg-white:focus    { background-color: #fff; }
.focus\:bg-teal:focus     { background-color: var(--teal); }
.focus\:text-white:focus  { color: #fff; }
.focus\:fixed:focus       { position: fixed; }
.focus\:top-3:focus       { top: .75rem; }
.focus\:left-3:focus      { left: .75rem; }
.focus\:z-\[60\]:focus    { z-index: 60; }
.focus\:px-4:focus        { padding-left: 1rem; padding-right: 1rem; }
.focus\:py-2:focus        { padding-top: .5rem; padding-bottom: .5rem; }
.focus\:label:focus       { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.focus\:not-sr-only:focus {
  position: static; width: auto; height: auto; padding: 0; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .sm\:flex        { display: flex; }
  .sm\:w-auto      { width: auto; }
  .sm\:p-8         { padding: 2rem; }
  .sm\:px-8        { padding-left: 2rem; padding-right: 2rem; }
  .sm\:left-6      { left: 1.5rem; }
  .sm\:right-6     { right: 1.5rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:hidden      { display: none; }
  .md\:inline-flex { display: inline-flex; }
  .md\:pb-0        { padding-bottom: 0; }
}

@media (min-width: 1024px) {
  .lg\:flex   { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:sticky { position: sticky; }
  .lg\:top-28 { top: 7rem; }
  .lg\:p-10   { padding: 2.5rem; }
  .lg\:py-20  { padding-top: 5rem; padding-bottom: 5rem; }
  .lg\:py-24  { padding-top: 6rem; padding-bottom: 6rem; }
  .lg\:py-28  { padding-top: 7rem; padding-bottom: 7rem; }
  .lg\:gap-10 { gap: 2.5rem; }
  .lg\:gap-14 { gap: 3.5rem; }
  .lg\:gap-16 { gap: 4rem; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-\[minmax\(0\2c 1\.5fr\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
}