/* ==========================================================================
   REYES TREE SERVICE & HARDSCAPE DESIGNS LLC — Design System & Styles
   Tokens -> Base -> Layout -> Components -> Sections -> Utilities -> Media
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Palette */
  --navy-900: #0a1a2b;
  --navy-800: #0f2438;
  --navy-700: #163350;
  --navy-600: #1f4266;
  --gold-600: #a9821a;
  --gold-500: #c6a134;
  --gold-400: #d9bb5c;
  --gold-300: #ead999;
  --ivory-100: #faf7f0;
  --ivory-200: #f4eee0;
  --ivory-300: #ece2cb;
  --stone-400: #d9cba9;
  --green-600: #52684a;
  --green-700: #3f5039;
  --white: #ffffff;
  --ink-900: #14202c;
  --ink-700: #384754;
  --ink-500: #5c6b78;
  --ink-on-navy: #eef2f6;
  --ink-on-navy-soft: #b9c6d3;

  /* Semantic */
  --color-bg: var(--ivory-100);
  --color-surface: var(--white);
  --color-text: var(--ink-900);
  --color-text-soft: var(--ink-500);
  --color-primary: var(--navy-900);
  --color-accent: var(--gold-500);

  /* Typography */
  --font-serif: "Cormorant Garamond", "Cormorant", Garamond, Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-h1: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.50rem, 1.1rem + 0.8vw, 1.65rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --lh-tight: 1.15;
  --lh-normal: 1.6;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 5.5rem;
  --sp-16: 7.5rem;

  /* Radius & shadow */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-square: 2px;
  --shadow-sm: 0 2px 10px rgba(10, 26, 43, 0.08);
  --shadow-md: 0 10px 30px rgba(10, 26, 43, 0.12);
  --shadow-lg: 0 24px 60px rgba(10, 26, 43, 0.22);
  --shadow-gold: 0 8px 24px rgba(198, 161, 52, 0.35);

  /* Motion */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-med: 320ms;
  --dur-slow: 550ms;

  --container-w: 1240px;
  --header-h: 84px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--navy-900);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
  font-weight: 700;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--sp-4); color: var(--color-text-soft); }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* Visible, high-contrast focus for every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.container { width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: var(--sp-5); }
@media (max-width: 640px) { .container { padding-inline: var(--sp-4); } }

.section { padding-block: var(--sp-12); }
@media (max-width: 900px) { .section { padding-block: var(--sp-10); } }
@media (max-width: 560px) { .section { padding-block: var(--sp-8); } }

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--gold-600);
  margin-bottom: var(--sp-3);
}
.section-head { max-width: 760px; margin: 0 auto var(--sp-8); text-align: center; }
/* Not scoped to .section-head — this same italic-serif tagline style is
   also used standalone, e.g. the About section's two-column copy block. */
p.section-line { font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: var(--fs-lead); color: var(--navy-700); margin: 0 0 var(--sp-4); }
.section-head p.section-line { margin: 0; }
/* Get In Touch: one blank line between the two intro paragraphs */
#contact .section-head p.section-line + p.section-line { margin-top: 1.5em; margin-top: 1lh; }
.section--on-navy .section-head h2, .section--on-navy .section-head p { color: var(--ink-on-navy); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--navy-900); color: var(--white); padding: 0.85rem 1.25rem;
  border-radius: 0 0 10px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-square);
  font-weight: 700;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium);
  min-height: 48px;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { box-shadow: 0 12px 30px rgba(198, 161, 52, 0.45); }

.btn-outline-light {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
  backdrop-filter: blur(6px);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--white); }

.btn-ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--ink-on-navy);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.1); }

.btn-navy {
  background: var(--navy-900);
  color: var(--white);
}
.btn-navy:hover { background: var(--navy-700); }

.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 500;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  gap: var(--sp-5);
}
.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand img { height: 46px; width: auto; }
.brand__text { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; line-height: 1.15; }
.brand__name { font-family: var(--font-sans); font-weight: 700; color: var(--gold-300); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.brand__tag { font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-300); white-space: nowrap; }
/* Header logo image (white artwork on transparent background) */
.site-header .brand__logo { height: 66px; width: auto; display: block; }
@media (max-width: 640px) { .site-header .brand__logo { height: 58px; } }

.nav-primary { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.nav-links {
  display: flex; align-items: center;
  gap: 0.65rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.nav-links li { flex: 0 0 auto; }
.nav-links a {
  display: inline-block;
  color: var(--ink-on-navy-soft);
  font-weight: 600;
  font-size: 0.96rem;
  white-space: nowrap;
  padding: 0.4rem 0.05rem;
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: var(--gold-500); transition: right var(--dur-med) var(--ease-premium);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--white); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }

.nav-cta {
  display: none;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.65rem 0.95rem;
  font-size: 0.92rem;
}
@media (min-width: 1260px) { .nav-cta { display: inline-flex; } }

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-square);
  width: 46px; height: 46px; align-items: center; justify-content: center;
  color: var(--white);
}
@media (max-width: 1024px) {
  .nav-links, .nav-cta.desktop-only { display: none; }
  .nav-toggle { display: inline-flex; }
}

.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-med) var(--ease-premium), opacity var(--dur-med) var(--ease-premium), top var(--dur-med) var(--ease-premium);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 600;
  background: var(--navy-900);
  display: flex; flex-direction: column;
  padding: var(--sp-5);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-premium), transform var(--dur-med) var(--ease-premium), visibility 0s linear var(--dur-med);
}
.mobile-nav.is-open {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  transition: opacity var(--dur-med) var(--ease-premium), transform var(--dur-med) var(--ease-premium), visibility 0s;
}
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.mobile-nav__close {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-square);
  width: 46px; height: 46px; color: var(--white); display: inline-flex; align-items: center; justify-content: center;
}
.mobile-nav__links { display: flex; flex-direction: column; gap: 0.4rem; margin-top: var(--sp-6); overflow-y: auto; }
.mobile-nav__links a {
  color: var(--white); font-family: var(--font-serif); font-size: 1.5rem; padding: 0.7rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav__cta { margin-top: var(--sp-6); }
body.nav-open { overflow: hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-900);
  perspective: 1400px;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
@media (max-width: 700px) { .hero__media video, .hero__media img { object-position: 55% 30%; } }
/* Two-video crossfade (driven by js/main.js). Without JS, only the first video shows. */
.hero__media .hero__video + .hero__video { opacity: 0; }
.hero__media.is-sequenced .hero__video { opacity: 0; z-index: 0; transition: opacity 1.2s ease-in-out; }
.hero__media.is-sequenced .hero__video.is-back { opacity: 1; z-index: 1; transition: none; }
.hero__media.is-sequenced .hero__video.is-front { opacity: 1; z-index: 2; }

.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: none; /* no dimming: hero videos show at their original brightness and color */
}
.hero__placeholder {
  position: absolute; inset: 0; z-index: 1;
  display: none;
  align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
  color: var(--ink-on-navy-soft);
  padding: var(--sp-6);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hero__placeholder.is-visible { display: flex; }

.hero__content { position: relative; z-index: 2; width: 100%; padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-10); }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--gold-300); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem;
  margin-bottom: var(--sp-4);
}
.hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold-400); display: inline-block; }
.hero h1 { color: var(--white); max-width: 16ch; margin-bottom: var(--sp-5); }
.hero__desc { color: var(--ink-on-navy-soft); font-size: var(--fs-lead); max-width: 46ch; margin-bottom: var(--sp-7); }
.hero__content p { color: var(--white); max-width: 46ch; margin-bottom: var(--sp-7); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Hero title + intro text, shown above the "What We Do" heading */
.services-intro { max-width: 760px; margin: 0 auto var(--sp-8); text-align: center; }
.services-intro h1 { margin-bottom: var(--sp-5); }
.services-intro__desc { color: var(--ink-500); font-size: var(--fs-lead); margin-bottom: var(--sp-7); }
.services-intro p { color: var(--ink-700); }

/* Intro splash (homepage: first visit per session, and every "Home" menu click;
   shown only when <html> has .has-intro). No text over the logo. Timeline (~8.6s),
   measured from the moment every image is decoded (.intro-wait holds frame one):
     0–0.6s    solid white logo fades in on black
     then each image gets a 0.6s slot inside the logo, with 0.5s of white logo between —
     full-colour photos first, then the white-toned plans:
     0.6s photo #1 · 1.7s photo #2 · 2.8s photo #3 · 3.9s plan #1 · 5.0s plan #2 ·
     6.1s plan #3 · 6.7–7.2s white logo
     7.2–8.6s  portal zoom (.is-portal, added by index.html): the white leaves the letters
               so the hero video shows through them, then the black layer with the logo
               cut out of it scales through the "R" past the screen edges and dissolves.
   Skip / Escape use .is-leaving instead: a quick 0.7s fade onto the hero video. */
.intro-splash {
  display: none;
  position: fixed; inset: 0; z-index: 10000;
  background-color: #000;
  touch-action: none; overscroll-behavior: none;
  transition: opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  /* Logo size per device; the height cap (logo ratio 613:300) keeps it on screen in landscape */
  --intro-fit-h: calc((100vh - 140px) * 2.043);
  --intro-logo-w: min(86vw, 400px, var(--intro-fit-h));   /* phone */
}
@supports (height: 100dvh) {
  .intro-splash { --intro-fit-h: calc((100dvh - 140px) * 2.043); }
}
@media (min-width: 600px) {
  .intro-splash { --intro-logo-w: min(78vw, 560px, var(--intro-fit-h)); }   /* tablet */
}
@media (min-width: 1025px) {
  .intro-splash { --intro-logo-w: min(60vw, 820px, var(--intro-fit-h)); }   /* desktop */
}
.has-intro .intro-splash { display: block; }
/* Lock scrolling (incl. iOS touch scrolling) while the intro is on screen */
.intro-lock, .intro-lock body { overflow: hidden; overscroll-behavior: none; touch-action: none; }
.intro-splash.is-leaving { opacity: 0; pointer-events: none; }
/* Portal hand-off: the splash's own black drops away (the portal layer below supplies the
   black around the letters) so the hero video underneath shows through the logo */
.intro-splash.is-portal { background-color: transparent; pointer-events: none; }
.is-portal .intro-splash__reel { animation: introReelOut 0.3s ease-in both; }
.is-portal .intro-splash__skip { opacity: 0; transition: opacity 0.2s ease; }

/* The reel: a full-viewport, solid white layer cut to the logo silhouette.
   Uses the alpha channel of images/logo/intro-logo.webp (613x300). */
.intro-splash__reel {
  position: absolute; inset: 0;
  background: #fff;
  -webkit-mask: url("../images/logo/intro-logo.webp") center / var(--intro-logo-w) auto no-repeat;
          mask: url("../images/logo/intro-logo.webp") center / var(--intro-logo-w) auto no-repeat;
  animation: introReelIn 0.45s ease-out both;
}
/* Each photo covers exactly the logo's box (same centre, width and 613:300 ratio as
   the mask), so it fills every letter and the icon without stretching; per-photo
   background-position in index.html picks which part of the photo shows. */
.intro-splash__fill {
  position: absolute; top: 50%; left: 50%;
  width: var(--intro-logo-w); aspect-ratio: 613 / 300;
  transform: translate(-50%, -50%);
  background-size: cover; background-position: center;
  opacity: 0;
  filter: saturate(1.15) contrast(1.05);
}
/* Image → white logo → image …: all but the last fade back out within their slot so the
   white silhouette shows between them; the last one stays until the hand-off.
   Opacity-only, so it composites cheaply and stays smooth on phones. */
.intro-splash__fill:nth-child(1) { animation: introFlash 0.5s ease-in-out 0.6s both; }
.intro-splash__fill:nth-child(2) { animation: introFlash 0.5s ease-in-out 1.35s both; }
.intro-splash__fill:nth-child(3) { animation: introFlash 0.5s ease-in-out 2.1s both; }
.intro-splash__fill:nth-child(4) { animation: introFlash 0.5s ease-in-out 2.85s both; }
.intro-splash__fill:nth-child(5) { animation: introFlash 0.5s ease-in-out 3.6s both; }
.intro-splash__fill:nth-child(6) { animation: introFlash 0.5s ease-in-out 4.35s both; }
.intro-splash__fill:nth-child(7) { animation: introFlash 0.5s ease-in-out 5.1s both; }
.intro-splash__fill:nth-child(8) { animation: introFlash 0.5s ease-in-out 5.85s both; }
.intro-splash__fill:nth-child(9) { animation: introFlash 0.5s ease-in-out 6.6s both; }
.intro-splash__fill:nth-child(10) { animation: introFlash 0.5s ease-in-out 7.35s both; }
.intro-splash__fill:nth-child(11) { animation: introFlash 0.5s ease-in-out 8.1s both; }
.intro-splash__fill:nth-child(12) { animation: introFlash 0.5s ease-in-out 8.85s both; }
.intro-splash__fill:nth-child(13) { animation: introFlash 0.5s ease-in-out 9.6s both; }

/* Portal: a full-viewport black layer with the logo cut OUT of it (inverse mask: logo
   XOR a full rectangle), so the letters are windows onto the hero video. It scales up
   around a point inside the thickest stroke of the logo (the stem of the "R", measured
   from the logo: 37.93% left of and 0.65% below the logo's centre, in logo widths),
   so the zoom travels through the letter itself rather than into black. GPU-composited
   (will-change + translate3d), and it dissolves as it passes the screen edges. */
.intro-splash__portal {
  display: none;
  position: absolute; inset: 0;
  background: #000;
  -webkit-mask-image: url("../images/logo/intro-logo.webp"), linear-gradient(#000, #000);
  -webkit-mask-size: var(--intro-logo-w) auto, 100% 100%;
  -webkit-mask-position: center, 0 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
          mask-image: url("../images/logo/intro-logo.webp"), linear-gradient(#000, #000);
          mask-size: var(--intro-logo-w) auto, 100% 100%;
          mask-position: center, 0 0;
          mask-repeat: no-repeat;
          mask-composite: exclude;
  transform-origin: calc(50% - var(--intro-logo-w) * 0.3793) calc(50% + var(--intro-logo-w) * 0.0065);
  will-change: transform, opacity;
}
.is-portal .intro-splash__portal {
  display: block;
  animation: introPortal 1.1s cubic-bezier(0.7, 0, 0.84, 0) 0.3s both;
}

.intro-splash__skip {
  position: absolute; z-index: 2;
  right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  padding: 0.6rem 1.1rem; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-square);
  background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em;
  transition: background var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium);
}
.intro-splash__skip:hover { background: rgba(0, 0, 0, 0.75); border-color: #fff; }
.intro-splash__skip:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }

/* No mask support: show the plain logo instead of the reel */
.intro-splash__logo { display: none; }
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .intro-splash__reel { display: none; }
  .intro-splash__logo {
    display: block; position: absolute; top: 50%; left: 50%;
    width: var(--intro-logo-w); height: auto; transform: translate(-50%, -50%);
  }
}

/* Hold everything on the first frame until the images are ready (see index.html) */
.intro-wait .intro-splash__reel,
.intro-wait .intro-splash__fill { animation-play-state: paused; }
/* Header slides into place once the intro hands off to the hero */
.intro-reveal .site-header { animation: introHeader 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }

@keyframes introReelIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes introReelOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes introPortal {
  0%   { transform: translate3d(0, 0, 0) scale(1);  opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(70); opacity: 0; }
}
@keyframes introFill { from { opacity: 0; } to { opacity: 1; } }
@keyframes introFlash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes introHeader {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

/* Entrance animation */
.hero__media, .hero__content > * { will-change: transform, opacity, filter; }
.js-entrance .hero__media {
  transform: scale(1.12) translateZ(0) rotateX(1.5deg);
  filter: blur(14px);
  opacity: 0.10;
}
.js-entrance-ready .hero__media {
  transform: scale(1) translateZ(0) rotateX(0deg);
  filter: blur(0);
  opacity: 1;
  transition: transform 1.3s var(--ease-premium), filter 1.3s var(--ease-premium), opacity 1.1s var(--ease-premium);
}
.js-entrance .hero__content > * { opacity: 0; transform: translateX(40px); }
.js-entrance-ready .hero__content > *  {
  opacity: 1; transform: translateX(0);
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium);
}
.js-entrance-ready .hero__eyebrow { transition-delay: 0.25s; }
.js-entrance-ready .hero__content > h1 { transition-delay: 0.38s; }
.js-entrance-ready .hero__desc { transition-delay: 0.52s; }
.js-entrance-ready .hero__content > p { transition-delay: 0.66s; }
.js-entrance-ready .hero__actions { transition-delay: 0.8s; }
@media (prefers-reduced-motion: reduce) {
  .js-entrance .hero__media, .js-entrance-ready .hero__media { transform: none; filter: none; opacity: 1; transition: none; }
  .js-entrance .hero__content > *, .js-entrance-ready .hero__content > * { opacity: 1; transform: none; transition: none; }
}

/* Slogan over the hero video: plays once with the entrance (and again on each "Home"
   replay, which re-adds .js-entrance-ready), never on video loops.
   ~0.8s reveal · ~1.5s hold · ~1s zoom-and-dissolve, then stays hidden. Blur is on the text only. */
.hero__slogan {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding-inline: 16px;
  pointer-events: none;
  overflow: hidden;
}
.hero__slogan span {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.1rem, 8.5vw, 6rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
  /* soft white halo; fades out with the text since the animation drives opacity */
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.30),
    0 0 20px rgba(255, 255, 255, 0.18),
    0 0 36px rgba(255, 255, 255, 0.10);
  opacity: 0;
  will-change: transform, opacity, filter;
}
.js-entrance-ready .hero__slogan span { animation: heroSlogan 3.3s 0.3s both; }
@keyframes heroSlogan {
  0%     { opacity: 0; filter: blur(8px); transform: scale(0.95); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  24.2%  { opacity: 1; filter: blur(0);   transform: scale(1);    animation-timing-function: linear; }
  69.7%  { opacity: 1; filter: blur(0);   transform: scale(1);    animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }
  100%   { opacity: 0; filter: blur(6px); transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .js-entrance-ready .hero__slogan span { animation: heroSloganStill 2.6s 0.3s both; }
}
@keyframes heroSloganStill {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  background: var(--navy-800);
  border-block: 1px solid rgba(198, 161, 52, 0.35);
  overflow: hidden;
  position: relative;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__seg {
  display: flex; align-items: center; white-space: nowrap;
  padding-block: 0.85rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ivory-200);
  letter-spacing: 0.02em;
}
.marquee__seg .dot { color: var(--gold-400); margin-inline: 1.1rem; font-size: 0.9rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee.reduced-motion { overflow-x: auto; }
.marquee.reduced-motion .marquee__track { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 980px) { .services-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }

.service-card {
  background: var(--color-surface);
  border-radius: var(--radius-square);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  transition: transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium);
  border: 1px solid rgba(10, 26, 43, 0.05);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-premium); }
.service-card:hover .service-card__media img { transform: scale(1.05); }
.service-card__icon {
  position: absolute; top: 16px; left: 16px;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(10, 26, 43, 0.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; color: var(--gold-300);
}
.service-card__body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
.service-card__body h3 { margin-bottom: var(--sp-3); }
.service-card__body > p { flex: 1; }

.service-list-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--navy-800); font-weight: 700; font-size: 0.92rem;
  background: none; border: none; padding: 0.4rem 0; margin-top: var(--sp-2);
}
.service-list-toggle .chev { transition: transform var(--dur-fast) var(--ease-premium); }
.service-list-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.service-sublist {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows var(--dur-med) var(--ease-premium);
}
.service-sublist.is-open { grid-template-rows: 1fr; }
.service-sublist__inner { min-height: 0; padding-top: var(--sp-3); }
.service-sublist__inner > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1rem; }
.service-sublist__heading {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-600);
  margin: var(--sp-4) 0 0.4rem;
}
.service-sublist__heading:first-child { margin-top: 0; }
.service-sublist li {
  font-size: 0.9rem; color: var(--ink-700);
  display: flex; align-items: flex-start; gap: 0.55rem;
}
.service-sublist li .li-icon {
  flex: none; width: 20px; height: 20px; margin-top: 0.05rem;
  color: var(--gold-600);
}
.service-sublist li span { padding-top: 0.05rem; }

.service-card__cta {
  margin-top: var(--sp-5);
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--navy-900); font-weight: 700; font-size: 0.92rem;
  border-top: 1px solid rgba(10, 26, 43, 0.08); padding-top: var(--sp-4);
}
.service-card__cta svg { transition: transform var(--dur-fast) var(--ease-premium); }
.service-card__cta:hover svg, .service-card__cta:focus-visible svg { transform: translateX(4px); }

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 980px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 250ms var(--ease-premium), box-shadow 250ms var(--ease-premium);
  border: 1px solid rgba(10, 26, 43, 0.05);
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .why-card:hover { transform: scale(1.03); box-shadow: var(--shadow-md); z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .why-card { transition: none; }
  .why-card:hover { transform: none; }
}
.why-card__icon {
  width: 62px; height: 62px; margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: linear-gradient(160deg, var(--ivory-200), var(--stone-400));
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-800);
}
.why-card h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); }
.why-card p { font-size: 0.94rem; margin: 0; }

/* ==========================================================================
   OUR PROCESS
   ========================================================================== */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 980px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }
.process-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium);
  border: 1px solid rgba(10, 26, 43, 0.05);
}
.process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.process-card__step {
  width: 48px; height: 48px; margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem;
}
.process-card h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); }
.process-card p { font-size: 0.94rem; margin: 0; }
/* Auto-playing step reveal loop (js/main.js adds .process-anim and sets --p / --b per card).
   Unrevealed cards stay faintly visible; each step's number blooms in with a soft gold
   glow that peaks mid-reveal. Uses `translate`/`scale` so the hover lift still works. */
.process-anim .process-card {
  opacity: calc(0.15 + 0.85 * var(--p, 0));
  translate: 0 calc((1 - var(--p, 0)) * 28px);
  will-change: opacity, translate;
}
.process-anim .process-card__step {
  position: relative;
  scale: var(--p, 0);
}
.process-anim .process-card__step::before,
.process-anim .process-card__step::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-400) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.process-anim .process-card__step::before {
  inset: -22px;
  opacity: calc(0.55 * var(--b, 0));
  scale: calc(0.6 + 0.6 * var(--b, 0));
}
.process-anim .process-card__step::after {
  inset: -8px;
  opacity: calc(0.4 * var(--b, 0));
  translate: calc(var(--b, 0) * 42px) 0;
}

/* ==========================================================================
   DIY PLANS PREVIEW
   ========================================================================== */
.diy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .diy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .diy-grid { grid-template-columns: 1fr; } }
.diy-card {
  position: relative; border-radius: var(--radius-square); overflow: hidden; aspect-ratio: 4/3;
  background: var(--navy-900);
  border: 1px solid rgba(198, 161, 52, 0.35);
  display: flex; align-items: flex-end; padding: var(--sp-5);
  color: var(--white); text-align: left; width: 100%; cursor: pointer;
  transition: transform var(--dur-med) var(--ease-premium);
}
.diy-card:hover, .diy-card:focus-visible { transform: translateY(-4px); }
.diy-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 26, 43, 0.88), rgba(10, 26, 43, 0.05) 55%);
}
.diy-card__badge {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 2;
  background: var(--gold-500); color: var(--navy-900); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
}
.diy-card__media { position: absolute; inset: 0; }
.diy-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-premium);
}
.diy-card:hover .diy-card__media img, .diy-card:focus-visible .diy-card__media img { transform: scale(1.06); }
.diy-card__placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  color: rgba(255, 255, 255, 0.5); text-align: center; padding: var(--sp-5);
}
.diy-card__placeholder svg { width: 38px; height: 38px; opacity: 0.7; }
.diy-card__placeholder span { font-family: var(--font-sans); font-size: 0.7rem; line-height: 1.4; word-break: break-word; }
.diy-card__title { position: relative; z-index: 2; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
/* About photo frame: a thin gold border with a soft band of light travelling slowly
   around it, plus a hairline gold frame offset behind the photo that gently floats.
   Both move only with transform (GPU-composited); nothing changes the layout. */
.about-media { position: relative; isolation: isolate; --about-offset: 18px; }
@media (max-width: 600px) { .about-media { --about-offset: 10px; } }

/* Offset floating frame (sits down-left so it never pushes past the right edge on phones) */
.about-media::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: var(--about-offset) var(--about-offset) calc(var(--about-offset) * -1) calc(var(--about-offset) * -1);
  border: 1px solid var(--gold-600); border-radius: var(--radius-square);
  background: linear-gradient(150deg, rgba(217, 187, 92, 0.12), rgba(217, 187, 92, 0) 60%);
}

/* The gold border: 3px of padding over a gold base, with the travelling light rotating
   underneath (an oversized conic-gradient spun with transform, clipped by the frame) */
.about-media__frame {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 4/5; padding: 3px;
  border-radius: var(--radius-square);
  background: linear-gradient(150deg, var(--gold-600), var(--gold-400) 50%, var(--gold-600));
  box-shadow: var(--shadow-lg);
}
.about-media__frame::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 50%; left: 50%; width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 290deg,
    var(--gold-300) 325deg, #fffbea 345deg, rgba(255, 255, 255, 0) 360deg);
}
.about-media__frame picture { display: block; height: 100%; overflow: hidden; border-radius: var(--radius-square); }
.about-media__frame img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
  /* Slow zoom on the About photo only; eases in and back out so there is no jump */
  .about-media__frame img { animation: aboutSlowZoom 16s ease-in-out infinite alternate; will-change: transform; }
  .about-media__frame::before { animation: aboutBorderSweep 7s linear infinite; will-change: transform; }
  .about-media::before { animation: aboutFrameFloat 6s ease-in-out infinite alternate; will-change: transform; }
}
@keyframes aboutSlowZoom { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes aboutBorderSweep {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes aboutFrameFloat {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(5px, -5px, 0); }
}
.about-copy .icon-row { display: flex; gap: var(--sp-6); margin-top: var(--sp-6); flex-wrap: wrap; }
.icon-row__item { display: flex; align-items: center; gap: 0.55rem; color: var(--navy-800); font-weight: 700; font-size: 0.92rem; }
.icon-row__item svg { color: var(--gold-600); }

/* ==========================================================================
   SERVICE AREAS
   ========================================================================== */
.areas-panel {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  color: var(--white);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.areas-panel::before {
  content: ""; position: absolute; inset: 0; opacity: 0.15; pointer-events: none;
  background-image: radial-gradient(circle at 20% 20%, var(--gold-400) 0, transparent 2px),
    radial-gradient(circle at 80% 75%, var(--gold-400) 0, transparent 2px);
  background-size: 46px 46px;
}
.areas-panel__grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 900px) { .areas-panel__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.areas-pin { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--gold-300); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; margin-bottom: var(--sp-3); }
.areas-panel h2 { color: var(--white); }
.areas-main-coverage { font-family: var(--font-serif); font-size: 1.35rem; color: var(--gold-300); margin-bottom: var(--sp-4); }
.areas-panel p { color: var(--ink-on-navy-soft); }
.areas-note { font-size: 0.85rem; font-style: italic; margin-top: var(--sp-5); }
/* City list: map pin + name, two columns where there's room, one on narrow phones */
.areas-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1.5rem;
}
@media (max-width: 420px) { .areas-list { grid-template-columns: 1fr; } }
.areas-list li {
  display: flex; align-items: center; gap: 0.55rem;
  color: var(--ink-on-navy); font-size: 0.95rem; font-weight: 600; line-height: 1.3;
}
.areas-list__pin { flex: 0 0 auto; width: 20px; height: 20px; fill: var(--gold-400); }
.areas-radius { margin-top: var(--sp-5); font-weight: 600; }
.areas-panel__visual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 420px;
}

.areas-panel__image {
  display: block;
  width: 100%;
  max-width: 470px;
  height: 390px;
  object-fit: cover;
  border-radius: var(--radius-square);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

@media (max-width: 768px) {
  .areas-panel__visual {
    min-height: auto;
    margin-top: 32px;
    justify-content: center;
  }

  .areas-panel__image {
    width: 100%;
    max-width: none;
    height: 280px;
    object-fit: cover;
  }
}
/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.sample-flag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ivory-300); color: var(--navy-800);
  padding: 0.45rem 1rem; border-radius: var(--radius-pill);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 auto var(--sp-6); display: table;
}
.google-rating {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-5); padding: 0.85rem 1.4rem;
  background: var(--color-surface); border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-sm); border: 1px solid rgba(10, 26, 43, 0.05);
  text-align: left; max-width: 100%;
}
.google-rating__logo { flex: none; }
.google-rating__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.google-rating__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-700); }
.google-rating__stars { color: #FBBC05; font-size: 1.35rem; line-height: 1.1; letter-spacing: 0.12em; }
.google-rating__text { font-size: 0.94rem; color: var(--navy-900); }
.testimonial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card {
  background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--sp-6);
  box-shadow: var(--shadow-sm); border: 1px solid rgba(10, 26, 43, 0.05);
  display: flex; flex-direction: column;
}
.testimonial-card__quote-mark { font-family: var(--font-serif); font-size: 2.6rem; color: var(--gold-400); line-height: 1; margin-bottom: 0.25rem; }
.testimonial-card blockquote { margin: 0 0 var(--sp-5); font-style: italic; color: var(--ink-700); flex: 1; }
.testimonial-card__name { font-weight: 700; color: var(--navy-900); }
.testimonial-card__role { font-size: 0.85rem; color: var(--ink-500); }
.testimonial-card__stars {
  margin: 10px 0 18px;
  color: #c9a24a; /* gold */
  font-size: 20px;
  line-height: 1;
  letter-spacing: 3px;
  text-shadow: 0 0 6px rgba(201, 162, 74, 0.5), 0 0 16px rgba(201, 162, 74, 0.3);
  transition: text-shadow var(--dur-med) var(--ease-premium);
}
.testimonial-card:hover .testimonial-card__stars {
  text-shadow: 0 0 8px rgba(201, 162, 74, 0.8), 0 0 22px rgba(201, 162, 74, 0.55), 0 0 36px rgba(201, 162, 74, 0.3);
}
@media (prefers-reduced-motion: no-preference) {
  .testimonial-card__stars { animation: starGlow 3.2s ease-in-out infinite; }
}
@keyframes starGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(201, 162, 74, 0.45), 0 0 14px rgba(201, 162, 74, 0.25); }
  50% { text-shadow: 0 0 10px rgba(201, 162, 74, 0.85), 0 0 26px rgba(201, 162, 74, 0.5); }
}


/* ==========================================================================
   CONTACT / ESTIMATE FORM
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info-card {
  background: var(--navy-900); color: var(--white);
  border-radius: var(--radius-xl); padding: var(--sp-7);
  box-shadow: var(--shadow-lg);
}
.contact-info-card h3 { color: var(--white); }
.contact-info-list { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-6); }
.contact-info-item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-info-item__icon {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: rgba(198, 161, 52, 0.16); color: var(--gold-300);
  display: flex; align-items: center; justify-content: center;
}
.contact-info-item strong { display: block; color: var(--white); margin-bottom: 0.15rem; }
.contact-info-item span, .contact-info-item a { color: var(--ink-on-navy-soft); font-size: 0.94rem; }
.contact-info-item a:hover { color: var(--gold-300); }
.social-row { display: flex; gap: 0.6rem; margin-top: var(--sp-6); }
.social-row a {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex; align-items: center; justify-content: center; color: var(--white);
  transition: background var(--dur-fast) var(--ease-premium);
}
.social-row a:hover { background: rgba(255, 255, 255, 0.12); }
.social-title { margin-top: var(--sp-6); font-weight: 700; color: var(--white); }
.social-title + .social-row { margin-top: var(--sp-3); }
/* Contact card: platform brand colors */
.contact-info-card .social-row a { transition: filter var(--dur-fast) var(--ease-premium); }
.contact-info-card .social-row a:hover { filter: brightness(1.15); }
.contact-info-card .social-row a[href*="facebook.com"],
.contact-info-card .social-row a[href*="facebook.com"]:hover { background: #1877F2; border-color: #1877F2; }
.contact-info-card .social-row a[href*="instagram.com"],
.contact-info-card .social-row a[href*="instagram.com"]:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border-color: transparent;
}
.contact-info-card .social-row a[href*="tiktok.com"],
.contact-info-card .social-row a[href*="tiktok.com"]:hover { background: #000000; }
.contact-info-card .social-row a[href*="youtube.com"],
.contact-info-card .social-row a[href*="youtube.com"]:hover { background: #FF0000; border-color: #FF0000; }

.contact-form-card {
  background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--sp-7);
  box-shadow: var(--shadow-lg); border: 1px solid rgba(10, 26, 43, 0.05);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--sp-5); }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 700; font-size: 0.9rem; color: var(--navy-900); }
.form-field .req { color: var(--gold-600); }
.form-field input, .form-field select, .form-field textarea {
  border: 1.5px solid var(--ivory-300); background: var(--ivory-100);
  border-radius: var(--radius-sm); padding: 0.8rem 1rem; font: inherit; color: var(--ink-900);
  transition: border-color var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--gold-500); background: var(--white); outline: none;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: #b3392f; }
.field-error { color: #b3392f; font-size: 0.82rem; min-height: 1em; }
.form-radio-group { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.form-radio-group label { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; color: var(--ink-700); }

.hp-field { position: absolute; left: -9999px; top: -9999px; }

.form-privacy { font-size: 0.82rem; color: var(--ink-500); margin-top: var(--sp-2); }
.form-status {
  border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: var(--sp-5);
  font-weight: 600; font-size: 0.94rem; display: none;
}
.form-status.is-visible { display: block; }
.form-status--success { background: #e7f2e5; color: var(--green-700); border: 1px solid #bcdcb4; }
.form-status--error { background: #fbe9e7; color: #8a2e24; border: 1px solid #f0c3bc; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--navy-900); color: var(--ink-on-navy-soft); padding-block: var(--sp-10) var(--sp-6); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-7); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--sp-4); }
.footer-brand img { height: 44px; width: auto; }
.footer-tag { max-width: 32ch; font-size: 0.92rem; }
.footer-col h4 { color: var(--white); font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { font-size: 0.92rem; }
.footer-col a:hover { color: var(--gold-300); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: var(--sp-8); padding-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
  font-size: 0.82rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* ==========================================================================
   DIY MODAL (native <dialog>)
   ========================================================================== */
.diy-modal {
  border: none; border-radius: var(--radius-xl); padding: 0; max-width: 480px; width: calc(100% - 2.5rem);
  box-shadow: var(--shadow-lg); background: var(--color-surface);
}
.diy-modal::backdrop { background: rgba(6, 13, 22, 0.7); backdrop-filter: blur(2px); }
.diy-modal__inner { padding: var(--sp-7); position: relative; }
.diy-modal__icon {
  width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(150deg, var(--gold-300), var(--gold-600));
  display: flex; align-items: center; justify-content: center; color: var(--navy-900); margin-bottom: var(--sp-5);
}
.diy-modal__close {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  width: 40px; height: 40px; border-radius: 50%; background: var(--ivory-200); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center; border: none;
}
.diy-modal__close:hover { background: var(--stone-400); }
.diy-modal h2 { font-size: 1.4rem; margin-bottom: var(--sp-3); }
.diy-modal p { margin-bottom: var(--sp-3); }
.diy-modal .optional-note { font-size: 0.88rem; }
.diy-modal__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--sp-6); }

/* ==========================================================================
   FLOATING ESTIMATE BUTTON
   ========================================================================== */
.floating-cta {
  position: fixed;
  right: max(1.1rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 400;
}
.floating-cta__btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.9rem 1.4rem;
  min-height: 48px;
  border-radius: var(--radius-square);
  background: rgba(10, 26, 43, 0.62);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-weight: 700; font-size: 0.92rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: background var(--dur-med) var(--ease-premium), transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium);
}
@supports not (backdrop-filter: blur(1px)) {
  .floating-cta__btn { background: rgba(15, 36, 56, 0.82); }
}
.floating-cta__btn:hover, .floating-cta__btn:focus-visible, .floating-cta__btn.is-pressed {
  background: var(--navy-900);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.floating-cta__btn:active { transform: translateY(-1px); }

.floating-cta__border {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.floating-cta__border::before {
  content: ""; position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, transparent 0%, transparent 78%, var(--gold-300) 92%, var(--white) 96%, var(--gold-300) 100%);
  animation: travel 6s linear infinite;
}
.floating-cta__btn:hover .floating-cta__border::before { filter: brightness(1.25); }
@keyframes travel { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .floating-cta__border::before { animation: none; background: none; }
  .floating-cta__border { border: 1.5px solid var(--gold-400); background: none; -webkit-mask: none; mask: none; padding: 0; inset: -1.5px; }
}

/* ==========================================================================
   LEGAL PAGES (shared minimal shell)
   ========================================================================== */
.legal-hero { background: var(--navy-900); color: var(--white); padding-block: var(--sp-10) var(--sp-8); }
.legal-hero h1 { color: var(--white); margin-bottom: var(--sp-2); }
.legal-body { padding-block: var(--sp-10); max-width: 780px; }
.legal-body h2 { margin-top: var(--sp-8); }
.legal-body ul { list-style: disc; padding-left: 1.4rem; margin-bottom: var(--sp-4); }
.legal-body li { margin-bottom: 0.4rem; color: var(--ink-700); }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--gold-300); font-weight: 700; margin-bottom: var(--sp-5); }

/* ==========================================================================
   MISC UTILITIES
   ========================================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.bg-navy { background: var(--navy-900); }
.text-center { text-align: center; }

/* ==========================================================================
   WORK GRID (#our-work — one photo card per service, no interaction)
   ========================================================================== */
.work-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6);
}
@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; }
}

.work-card {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: zoom-in;
  font: inherit; text-align: inherit;
}

.work-card__media {
  position: relative;
  width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-square);
  overflow: hidden; box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium);
}
.work-card__media img { width: 100%; height: 100%; object-fit: cover; }
.work-card:hover .work-card__media { box-shadow: var(--shadow-lg); }

/* Mobile / touch: a clear pressed state since there's no hover to rely on. */
.work-card:active .work-card__media { box-shadow: var(--shadow-sm); transform: scale(0.98); }

.work-card__label {
  margin-top: var(--sp-4);
  font-family: var(--font-sans); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-900);
  transition: color var(--dur-fast) var(--ease-premium);
}
.work-card:hover .work-card__label { color: var(--gold-600); }

/* Hover / keyboard-focus overlay on gallery photos (homepage work cards +
   full portfolio tiles), built by SiteLightbox.hoverOverlay() in
   js/lightbox.js: a bordered classification box, a larger subtitle below it
   (lower-left), and a zoom icon (lower-right). It sits on top of the image
   inside its fixed-ratio frame, so it never changes the card's size, and
   ignores pointer events so a click anywhere still opens the lightbox.
   Sizes scale with the tile's own width (container query units), so the
   text fits both the large homepage cards and the small portfolio tiles. */
.photo-hover {
  position: absolute; inset: 0; z-index: 1;
  container-type: inline-size;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem;
  padding: clamp(0.7rem, 5cqi, 1.5rem);
  background: linear-gradient(to top, rgba(6, 13, 22, 0.62), rgba(6, 13, 22, 0.16) 58%, rgba(6, 13, 22, 0));
  color: var(--white); text-align: left;
  opacity: 0; pointer-events: none;
  transition: opacity 250ms var(--ease-premium);
}
.photo-hover__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.photo-hover__tag {
  display: inline-flex; padding: 0.4em 0.7em;
  border: 1px solid rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.1);
  font-family: var(--font-sans); font-weight: 700; font-size: clamp(0.62rem, 3.6cqi, 0.78rem);
  letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; white-space: nowrap;
}
.photo-hover__subtitle {
  margin-top: 0.55em;
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(0.95rem, 6.2cqi, 1.75rem);
  line-height: 1.12; overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.photo-hover__zoom {
  flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(2.1rem, 12cqi, 2.8rem); height: clamp(2.1rem, 12cqi, 2.8rem);
  border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 50%;
  background: rgba(6, 13, 22, 0.35);
}
.work-card:hover .photo-hover,
.work-card:focus-visible .photo-hover,
.portfolio-item:hover .photo-hover,
.portfolio-item:focus-visible .photo-hover { opacity: 1; }
/* Touch devices have no hover: keep the labels visible so the content and
   the zoom affordance are still discoverable. */
@media (hover: none) {
  .photo-hover { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-hover { transition: none; }
}

.work-grid-cta { text-align: center; margin-bottom: var(--sp-8); }

.btn-outline-navy {
  background: transparent; border-color: var(--navy-900); color: var(--navy-900);
}
.btn-outline-navy:hover { background: var(--navy-900); color: var(--white); }

/* ==========================================================================
   PROJECT DETAIL PAGE (projects/project.html)
   ========================================================================== */
.project-detail { padding-block: var(--sp-10) var(--sp-12); }
.project-detail__back { margin-bottom: var(--sp-6); }
.project-detail__loading { text-align: center; color: var(--ink-500); padding-block: var(--sp-10); }
.project-detail__footer-nav { text-align: center; margin-top: var(--sp-10); }

.project-not-found { max-width: 560px; margin: 0 auto; text-align: center; padding-block: var(--sp-8); }
.project-not-found .btn { margin-top: var(--sp-4); }

.project-hero { max-width: 760px; margin: 0 auto var(--sp-8); text-align: center; }
.project-hero__summary { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); color: var(--navy-700); margin: 0; }

.project-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5);
  margin-bottom: var(--sp-10);
}
.project-gallery__item {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  border: none; padding: 0; margin: 0; border-radius: var(--radius-square);
  overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; background: var(--navy-900);
  transition: box-shadow var(--dur-fast) var(--ease-premium);
}
.project-gallery__item:hover { box-shadow: var(--shadow-md); }
.project-gallery__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-premium);
}
.project-gallery__item:hover img { transform: scale(1.06); }
.project-gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.6rem 0.9rem; font-size: 0.82rem; font-weight: 700; text-align: left;
  color: var(--white); background: linear-gradient(0deg, rgba(10, 26, 43, 0.78), rgba(10, 26, 43, 0));
}

.project-layout {
  display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 800px) {
  .project-layout { grid-template-columns: 1fr; }
}
.project-description h2 { font-size: var(--fs-h3); }
.project-description p { color: var(--ink-700); }

.project-meta {
  background: var(--ivory-200); border-radius: var(--radius-lg); padding: var(--sp-6);
  border: 1px solid rgba(10, 26, 43, 0.06);
}
.project-meta h2 { font-size: 1.05rem; margin-bottom: var(--sp-4); }
.project-meta dl { margin: 0 0 var(--sp-6); }
.project-meta dt {
  font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 0.7rem; color: var(--gold-600); margin-bottom: 0.3rem;
}
.project-meta dt:not(:first-child) { margin-top: var(--sp-4); }
.project-meta dd { margin: 0; color: var(--ink-700); }
.project-meta dd ul { margin: 0; }
.project-meta dd li {
  position: relative; padding-left: 1rem; margin-bottom: 0.3rem; font-size: 0.92rem;
}
.project-meta dd li::before { content: "\2022"; position: absolute; left: 0; color: var(--gold-500); }

/* ==========================================================================
   SHOP PRODUCT PAGE (shop/product.html)
   ========================================================================== */
.shop-product__layout {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-8);
  align-items: start; margin-bottom: var(--sp-8);
}
@media (max-width: 800px) {
  .shop-product__layout { grid-template-columns: 1fr; }
}

.shop-product__main {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  border: none; padding: 0; border-radius: var(--radius-square); overflow: hidden;
  box-shadow: var(--shadow-md); cursor: pointer; background: var(--navy-900);
}
.shop-product__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-product__zoom {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4);
  width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
}

.shop-product__thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.shop-thumb {
  width: 72px; height: 72px; border-radius: var(--radius-square); overflow: hidden;
  border: 2px solid transparent; padding: 0; cursor: pointer; opacity: 0.65;
  transition: opacity var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium);
}
.shop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-thumb:hover { opacity: 1; }
.shop-thumb.is-active { opacity: 1; border-color: var(--gold-500); }

.shop-product__badge {
  display: inline-block; background: var(--gold-500); color: var(--navy-900);
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); margin-bottom: var(--sp-3);
}
.shop-product__price { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; color: var(--navy-900); margin-bottom: var(--sp-3); }
.shop-product__price--soon { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 700; color: var(--ink-500); }
.shop-product__summary { color: var(--ink-700); margin-bottom: var(--sp-5); }

.shop-product__buy { margin-bottom: 0.6rem; }
.shop-product__soon-note { font-size: 0.85rem; color: var(--ink-500); margin-bottom: var(--sp-5); }

.shop-product__included { margin-bottom: var(--sp-5); }
.shop-product__included h2 { font-size: 1rem; margin-bottom: var(--sp-3); }
.shop-product__included ul { margin: 0; }
.shop-product__included li {
  position: relative; padding-left: 1.1rem; margin-bottom: 0.4rem; color: var(--ink-700); font-size: 0.95rem;
}
.shop-product__included li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold-600); font-weight: 700; }

.shop-accordion { border-top: 1px solid rgba(10, 26, 43, 0.1); padding-block: var(--sp-4); }
.shop-accordion summary {
  cursor: pointer; font-weight: 700; color: var(--navy-900); list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.shop-accordion summary::-webkit-details-marker { display: none; }
.shop-accordion summary::after {
  content: ""; width: 10px; height: 10px; border-right: 2px solid var(--ink-500); border-bottom: 2px solid var(--ink-500);
  transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-premium); margin-left: var(--sp-3); flex-shrink: 0;
}
.shop-accordion[open] summary::after { transform: rotate(-135deg); }
.shop-accordion__body { padding-top: var(--sp-3); color: var(--ink-700); }
.shop-accordion__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   SHARED IMAGE LIGHTBOX (native <dialog>, injected by js/lightbox.js)
   Used for: homepage quick-view cards, project detail pages, and the full
   portfolio page. A visible CTA button is opt-in per call.
   The dialog itself is a transparent, viewport-sized layer: the photo sits
   directly on the dark backdrop (no panel behind it) and is sized to fit the
   screen, so the viewer never needs to scroll.
   ========================================================================== */
.site-lightbox {
  border: none; padding: 0; margin: 0;
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  background: transparent; overflow: hidden;
}
.site-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.site-lightbox::backdrop { background: rgba(6, 13, 22, 0.88); backdrop-filter: blur(3px); }
.site-lightbox__inner { display: flex; align-items: center; justify-content: center; padding: 4rem 5rem 1rem; }

.site-lightbox__figure {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  max-height: calc(100dvh - 5rem); /* long captions shrink the photo instead of overflowing */
  animation: lightbox-in var(--dur-fast) var(--ease-premium);
}
.site-lightbox__img {
  display: block; width: auto; height: auto; min-height: 0;
  max-width: min(1400px, calc(100vw - 10rem)); max-height: calc(100dvh - 8.5rem);
  object-fit: contain; box-shadow: var(--shadow-lg);
}
.site-lightbox__caption { color: var(--white); text-align: center; font-weight: 700; padding: var(--sp-4) var(--sp-4) 0; }
.site-lightbox__counter { color: var(--ink-on-navy-soft); text-align: center; font-size: 0.85rem; padding: 0.3rem var(--sp-4) 0; }
.site-lightbox__cta { display: flex; margin: var(--sp-4) auto 0; }
@keyframes lightbox-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .site-lightbox__inner { padding: 4rem 0.75rem 1rem; }
  .site-lightbox__img { max-width: calc(100vw - 1.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .site-lightbox__figure { animation: none; }
}

.site-lightbox__close,
.site-lightbox__nav {
  position: absolute; border: none; border-radius: 50%; background: rgba(10, 26, 43, 0.55); color: var(--white);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-premium);
}
.site-lightbox__close:hover,
.site-lightbox__nav:hover { background: rgba(10, 26, 43, 0.85); }
.site-lightbox__close { top: var(--sp-4); right: var(--sp-4); width: 40px; height: 40px; z-index: 2; }
.site-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; z-index: 2; }
.site-lightbox__nav--prev { left: var(--sp-4); }
.site-lightbox__nav--next { right: var(--sp-4); }
@media (max-width: 640px) {
  .site-lightbox__nav { width: 40px; height: 40px; }
  .site-lightbox__nav--prev { left: var(--sp-2); }
  .site-lightbox__nav--next { right: var(--sp-2); }
}

/* An explicit `display` above wins over the UA [hidden] stylesheet rule
   (author styles beat user-agent styles regardless of specificity), so
   toggling .hidden from JS needs these to actually take effect. */
.site-lightbox__nav[hidden],
.site-lightbox__cta[hidden],
.site-lightbox__counter[hidden] { display: none; }

/* ==========================================================================
   SERVICE FILTER PILLS (gallery/index.html — filter the full portfolio)
   ========================================================================== */
.gallery-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.filter-btn {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.88rem;
  padding: 0.65rem 1.4rem; border-radius: var(--radius-square);
  border: 1.5px solid var(--stone-400); background: var(--white);
  color: var(--navy-800); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium);
}
.filter-btn:hover { border-color: var(--gold-500); color: var(--navy-900); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.filter-btn.is-active {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border-color: var(--navy-900); color: var(--white);
  box-shadow: var(--shadow-md);
}
.filter-btn.is-active:hover { color: var(--white); transform: translateY(-2px); }

/* ==========================================================================
   FULL PORTFOLIO GRID (gallery/index.html)
   ========================================================================== */
.portfolio-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5);
}
.portfolio-item {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  border: none; padding: 0; margin: 0; border-radius: var(--radius-square);
  overflow: hidden; box-shadow: var(--shadow-sm); cursor: zoom-in; background: var(--ivory-200);
  transition: box-shadow var(--dur-fast) var(--ease-premium);
}
.portfolio-item[hidden] { display: none; }
.portfolio-item:hover,
.portfolio-item:focus-visible { box-shadow: var(--shadow-lg); }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.floating-cta {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 9999;
}

.floating-cta__btn {
  position: relative;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 15px 23px;

  border: none;
  border-radius: var(--radius-square);

  background: #111;
  color: #fff;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;

  cursor: pointer;

  box-shadow: 0 8px 25px rgba(0,0,0,.25);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

/* TADA EFFECT */
.tada-effect {
  animation: tada 4s ease-in-out infinite;
}

@keyframes tada {

  0% {
    transform: scale(1) rotate(0deg);
  }

  5% {
    transform: scale(.95) rotate(-2deg);
  }

  10% {
    transform: scale(1.05) rotate(2deg);
  }

  15% {
    transform: scale(1.05) rotate(-2deg);
  }

  20% {
    transform: scale(1.05) rotate(2deg);
  }

  25% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }

}

/* Hover */
.floating-cta__btn:hover {
  transform: translateY(-4px) scale(1.03);

  box-shadow:
    0 14px 35px rgba(0,0,0,.35);
}

/* Icon */
.floating-cta__btn svg {
  transition: transform .3s ease;
}

.floating-cta__btn:hover svg {
  transform: translateX(3px);
}

/* Animated border */
.floating-cta__border {
  position: absolute;
  inset: 0;

  border-radius: inherit;

  border: 1px solid rgba(255,255,255,.2);

  pointer-events: none;
}

/* Hover glow: a soft light tracing the perimeter clockwise.
   ::before is the blurred halo, ::after re-paints the button face over it
   so the light only shows around the outer edge. */
@property --cta-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes ctaGlowTravel { to { --cta-angle: 360deg; } }

.floating-cta__btn { overflow: visible; isolation: isolate; }
.floating-cta__btn::before,
.floating-cta__btn::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.floating-cta__btn::before {
  inset: -2px;
  background: conic-gradient(from var(--cta-angle), transparent 0%, transparent 70%, var(--gold-300) 90%, var(--white) 96%, var(--gold-300) 100%);
  filter: blur(7px);
  opacity: 0;
  transition: opacity .5s ease;
  animation: ctaGlowTravel 6s linear infinite;
}
.floating-cta__btn::after {
  inset: 0;
  background: inherit;
}
.floating-cta__border::before {
  opacity: 0;
  transition: opacity .5s ease;
}
@media (hover: hover) {
  .floating-cta__btn:hover::before { opacity: .7; }
  .floating-cta__btn:hover .floating-cta__border::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-cta__btn::before {
    animation: none;
    background: var(--gold-300);
  }
}

/* Mobile */
@media (max-width: 600px) {

  .floating-cta {
    right: 15px;
    bottom: 15px;
  }

  .floating-cta__btn {
    padding: 13px 18px;
    font-size: 13px;
  }

}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

  .tada-effect {
    animation: none;
  }

}

/* ==========================================================================
   EMERGENCY TITLE (gold line above the main menu links; takes no layout space)
   ========================================================================== */
.nav-links { position: relative; }
.emergency-title {
  margin: 0;
  display: flex; align-items: center; gap: 0.4rem;
  pointer-events: none;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--gold-400);
}
.emergency-title strong { font-weight: 700; }
.emergency-title__clock { flex: 0 0 auto; color: var(--gold-400); }
.emergency-title__text {
  background: linear-gradient(100deg,
    var(--gold-500) 0%, var(--gold-400) 40%, #fff3c8 50%, var(--gold-400) 60%, var(--gold-500) 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: emergencyGoldSweep 7s ease-in-out 1s infinite;
}
.emergency-title__hand {
  transform-origin: 12px 12px;
  animation: emergencyClockTick 12s steps(12) infinite;
}

/* Desktop: sits in the header's top band, centered above the links
   (absolutely positioned, so it takes no space in the menu row; hidden with the links at <=1024px) */
.nav-links .emergency-title--desktop {
  position: absolute; left: 50%;
  top: calc(50% - var(--header-h) / 2 + 5px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.78rem;
}

/* Click-to-call number: gold like the rest of the message, not a menu-link style */
.emergency-title a,
.nav-links .emergency-title a {
  display: inline; padding: 0;
  font: inherit; font-weight: 700; color: inherit; white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
}
.nav-links .emergency-title a::after { content: none; }
.emergency-title a:hover,
.emergency-title a:focus-visible,
.nav-links .emergency-title a:hover,
.nav-links .emergency-title a:focus-visible { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-400); }

/* Mobile/tablet: in the expanded menu, above the links (inside their top margin) */
.emergency-title--mobile {
  position: absolute; left: 0; right: 0;
  top: calc(var(--sp-5) + var(--header-h) - 0.35rem);
  justify-content: center; align-items: flex-start;
  text-align: center;
  font-size: 0.8rem;
}
.emergency-title--mobile .emergency-title__clock { margin-top: 0.05em; }

/* Hold the animations while the homepage intro splash is playing */
.has-intro .emergency-title__text,
.has-intro .emergency-title__hand { animation-play-state: paused; }

@keyframes emergencyGoldSweep {
  0% { background-position: 100% 0; }
  30%, 100% { background-position: 0 0; }
}
@keyframes emergencyClockTick {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .emergency-title__text, .emergency-title__hand { animation: none; }
  .emergency-title__text { background-position: 50% 0; }
}

/* DIY Shop cards link to the estimate form: keep its top clear of the sticky header */
#estimate-form { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
/* "Services" menu link lands on the service cards, clear of the sticky header */
#service-cards { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
/* Menu links: below 900px the section top padding is shorter than the sticky header,
   so offset the jump to keep each section's heading clear of it */
@media (max-width: 900px) {
  #services, #our-work, #why-choose-us, #our-process, #service-areas, #testimonials { scroll-margin-top: var(--header-h); }
}

/* ==========================================================================
   Typography standardization: one style per text role, site-wide.
   Main headings (gold) > subheadings > paragraphs, built only from the
   existing tokens; sizes stay responsive through the --fs-* clamps.
   Text on dark panels keeps the existing light tones for readability.
   Navigation, buttons, forms and footer link-list labels are left alone.
   Kept last in the file so it takes precedence over section rules.
   ========================================================================== */

/* Main headings: section titles */
#main-content h1,
.legal-hero h1,
#main-content h2:not(.project-description h2):not(.project-meta h2):not(.shop-product__included h2):not(.diy-modal h2) {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: normal;
  line-height: var(--lh-tight);
  color: var(--gold-600);
}
#main-content h1, .legal-hero h1 { font-size: var(--fs-h1); }
#main-content h2:not(.project-description h2):not(.project-meta h2):not(.shop-product__included h2):not(.diy-modal h2) { font-size: var(--fs-h2); }
/* About Us / Our Vision labels: same type as the "Our Mission" h1 */
#main-content .section-eyebrow.about-heading {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 700;
  font-style: normal;
  letter-spacing: normal;
  line-height: var(--lh-tight);
  text-transform: none;
  color: var(--gold-600);
}

/* Subheadings: card titles, section taglines, page summaries, sub-section titles */
#main-content h3:not(.diy-modal h3),
#main-content p.section-line,
#main-content p.project-hero__summary,
#main-content :is(.project-description, .project-meta, .shop-product__included) h2,
#main-content p.social-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-style: normal;
  line-height: var(--lh-tight);
  color: var(--navy-900);
}

/* Paragraphs */
#main-content p:not(.section-line):not(.project-hero__summary):not(.social-title):not(.shop-product__price):not(form p):not(.diy-modal p),
.legal-hero p,
.site-footer p {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-normal);
  color: var(--ink-500);
}

/* Same roles on dark panels: existing light tones */
#main-content #contact .contact-info-card h3,
#main-content #contact p.social-title { color: var(--ink-on-navy); }
#main-content #service-areas p,
.legal-hero p,
.site-footer p.footer-tag { color: var(--ink-on-navy-soft); }