/* ═══════════════════════════════════════════════════════════════
   EXCALIBUR HAULING — STYLES
   ═══════════════════════════════════════════════════════════════ */

:root {
    --gold: #c9942a;
    --gold-light: #e8b84b;
    --gold-dark: #8a6010;
    --silver: #b8bfc8;
    --silver-light: #dde3ea;
    --bg-deep: #0a0b0d;
    --bg-dark: #111318;
    --bg-mid: #181c22;
    --bg-card: #1c2028;
    --text: #dde3ea;
    --text-muted: #8a909a;
    --border: rgba(201,148,42,0.18);
    --radius: 4px;
  }

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

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg-deep);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* ── NOISE TEXTURE OVERLAY ── */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
  }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5%;
    height: 70px;
    background: rgba(10,11,13,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }

  .nav-logo {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none;
  }
  .nav-logo img { height: 46px; width: 46px; object-fit: contain; }
  .nav-logo-text {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.08em;
    line-height: 1.2;
  }
  .nav-logo-text span { display: block; font-size: 0.6rem; color: var(--silver); letter-spacing: 0.18em; font-weight: 400; }

  .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
  .nav-links a {
    color: var(--silver);
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--gold-light); }

  .nav-cta {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #000 !important;
    padding: 8px 20px;
    border-radius: var(--radius);
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    transition: opacity 0.2s !important;
  }
  .nav-cta:hover { opacity: 0.85; color: #000 !important; }

  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
  .hamburger span { display: block; width: 24px; height: 2px; background: var(--silver); border-radius: 2px; transition: 0.3s; }

  /* ── HERO ── */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 100px 5% 60px;
  }

  .hero-bg {
    position: absolute; inset: 0;
    background: url('../img/hero-truck-trailer.png') center/cover no-repeat;
    filter: brightness(0.22) saturate(0.6);
    z-index: 0;
  }

  .hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,11,13,0.55) 0%, rgba(10,11,13,0.1) 50%, rgba(10,11,13,0.95) 100%);
    z-index: 1;
  }

  .hero-content { position: relative; z-index: 2; max-width: 820px; }

  .hero-badge {
    display: inline-block;
    border: 1px solid var(--gold);
    color: var(--gold-light);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 2px;
    margin-bottom: 28px;
    animation: fadeUp 0.8s ease both;
  }

  .hero-logo {
    width: min(220px, 38vw);
    margin: 0 auto 32px;
    display: block;
    filter: drop-shadow(0 0 40px rgba(201,148,42,0.3));
    animation: fadeUp 0.9s 0.1s ease both;
  }

  .hero h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(2.2rem, 7vw, 5rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
    animation: fadeUp 1s 0.2s ease both;
  }

  .hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero-tagline {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 400;
    color: var(--silver);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 40px;
    animation: fadeUp 1s 0.3s ease both;
  }

  .hero-actions {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    animation: fadeUp 1s 0.4s ease both;
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
    color: #000;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 14px 36px;
    border-radius: var(--radius);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 24px rgba(201,148,42,0.3);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(201,148,42,0.45); }

  .btn-outline {
    background: transparent;
    color: var(--silver-light);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 13px 36px;
    border-radius: var(--radius);
    text-decoration: none;
    border: 1px solid rgba(184,191,200,0.35);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
  }
  .btn-outline:hover { border-color: var(--gold); color: var(--gold-light); }

  .hero-scroll {
    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
    z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: var(--text-muted);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: fadeIn 1.5s 1s ease both;
  }
  .scroll-line {
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scrollPulse 2s infinite;
  }

  /* ── DIVIDER ── */
  .gold-divider {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 0;
  }

  /* ── SECTIONS ── */
  section { position: relative; z-index: 1; }

  .section-inner { max-width: 1100px; margin: 0 auto; padding: 80px 5%; }

  .section-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
  }

  .section-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
  }

  .section-sub {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 540px;
    line-height: 1.7;
  }

  /* ── WHY US STRIP ── */
  .why-strip {
    background: var(--bg-mid);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .why-strip .section-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    padding: 0 5%;
  }
  .why-item {
    padding: 36px 28px;
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  }
  .why-item:last-child { border-right: none; }
  .why-icon {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
  }
  .why-item h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--silver-light);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .why-item p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

  /* ── SERVICES ── */
  .services-bg { background: var(--bg-dark); }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 48px;
  }

  .service-card {
    background: var(--bg-card);
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: background 0.25s;
  }
  .service-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s ease;
  }
  .service-card:hover { background: #21262f; }
  .service-card:hover::before { transform: scaleX(1); }

  .service-icon {
    font-size: 2rem;
    margin-bottom: 16px;
    display: block;
  }
  .service-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--silver-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }
  .service-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; }

  .service-tag {
    display: inline-block;
    margin-top: 16px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--gold);
    text-transform: uppercase;
    border: 1px solid var(--gold-dark);
    padding: 3px 10px;
    border-radius: 2px;
  }

  /* ── ABOUT / PHOTO ── */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 48px;
  }
  @media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } }

  .about-photo {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .about-photo img {
    width: 100%; display: block;
    border-radius: 4px;
    filter: brightness(0.88) saturate(0.85);
  }
  .about-photo::after {
    content: '';
    position: absolute; inset: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    pointer-events: none;
  }
  .about-photo-accent {
    position: absolute;
    bottom: -1px; left: -1px; right: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  }

  .about-text { display: flex; flex-direction: column; gap: 20px; }
  .about-text p { color: var(--text-muted); font-size: 0.97rem; line-height: 1.75; }

  .stat-row {
    display: flex;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
  }
  .stat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(28, 32, 40, 0.6);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
  }
  .stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
  }
  .stat-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--silver-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
  }

  /* ── SERVICE AREA ── */
  .area-bg { background: var(--bg-mid); }

  .area-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-top: 48px;
  }
  @media (max-width: 768px) { .area-content { grid-template-columns: 1fr; } }

  .area-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .area-list li {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--silver);
    letter-spacing: 0.06em;
  }
  .area-list li::before {
    content: '◆';
    color: var(--gold);
    font-size: 0.55rem;
    flex-shrink: 0;
  }

  .area-note {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    padding: 24px 28px;
    border-radius: var(--radius);
    margin-top: 24px;
  }
  .area-note p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; }
  .area-note strong { color: var(--silver-light); }

  /* ── CTA BAND ── */
  .cta-band {
    background: linear-gradient(135deg, #151009 0%, #1a1200 40%, #0f0c06 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .cta-band .section-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 32px;
  }
  .cta-band h2 {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
  }
  .cta-band h2 span { color: var(--gold-light); }
  .cta-band p { color: var(--text-muted); font-size: 0.95rem; margin-top: 6px; }
  .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

  /* ── CONTACT ── */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 48px;
  }
  @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }

  .contact-info { display: flex; flex-direction: column; gap: 24px; }

  .contact-item {
    display: flex; align-items: flex-start; gap: 16px;
  }
  .contact-item-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
  }
  .contact-item-text h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
  }
  .contact-item-text a,
  .contact-item-text p {
    color: var(--silver-light);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s;
  }
  .contact-item-text a:hover { color: var(--gold-light); }

  /* ── FORM ── */
  .contact-form { display: flex; flex-direction: column; gap: 14px; }

  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }

  .form-group { display: flex; flex-direction: column; gap: 6px; }
  .form-group label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    background: var(--bg-card);
    border: 1px solid rgba(184,191,200,0.15);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
  }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: var(--gold);
  }
  .form-group select { cursor: pointer; }
  .form-group select option { background: var(--bg-card); }
  .form-group textarea { resize: vertical; min-height: 100px; }

  .form-submit {
    margin-top: 4px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
    color: #000;
    border: none;
    border-radius: var(--radius);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .form-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(201,148,42,0.35); }

  /* ── FOOTER ── */
  footer {
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
    padding: 48px 5% 32px;
  }
  .footer-inner { max-width: 1100px; margin: 0 auto; }

  .footer-top {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 24px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
  }

  .footer-logo { display: flex; align-items: center; gap: 12px; }
  .footer-logo img { height: 52px; }
  .footer-logo-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.06em;
    line-height: 1.25;
  }
  .footer-logo-name small {
    display: block;
    font-size: 0.6rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 400;
  }

  .footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
  .footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.2s;
  }
  .footer-links a:hover { color: var(--gold-light); }

  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
  }
  .footer-copy { font-size: 0.8rem; color: var(--text-muted); }
  .footer-copy span { color: var(--gold-dark); }
  .footer-domain {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
  }

  /* ── MOBILE NAV ── */
  .mobile-nav {
    display: none;
    position: fixed; top: 70px; left: 0; right: 0;
    background: rgba(10,11,13,0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    z-index: 99;
    padding: 20px 5% 28px;
    flex-direction: column; gap: 4px;
  }
  .mobile-nav.open { display: flex; }
  .mobile-nav a {
    color: var(--silver);
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 0;
    border-bottom: 1px solid rgba(201,148,42,0.08);
    transition: color 0.2s;
  }
  .mobile-nav a:last-child { border-bottom: none; }
  .mobile-nav a:hover { color: var(--gold-light); }
  .mobile-nav .mob-cta {
    margin-top: 8px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #000 !important;
    text-align: center;
    padding: 14px !important;
    border-radius: var(--radius);
    border-bottom: none !important;
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50%       { opacity: 1;   transform: scaleY(1.15); }
  }

  /* Reveal animation:
     By default, reveal items are visible. JS adds .js-loaded to <html>
     and then hides them until they scroll into view.
     This guarantees content shows even if JS fails. */
  .reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .js-loaded .reveal {
    opacity: 0;
    transform: translateY(28px);
  }
  .js-loaded .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 820px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .why-item { border-right: none; border-bottom: 1px solid var(--border); }
    .why-item:last-child { border-bottom: none; }
  }
  @media (max-width: 540px) {
    .hero-actions { flex-direction: column; align-items: center; }
    .btn-primary, .btn-outline { width: 100%; text-align: center; }
    .cta-band .section-inner { flex-direction: column; }
    .stat-row { gap: 10px; }
    .stat { padding: 10px 14px; }
    .stat-num { font-size: 0.92rem; }
    .stat-label { font-size: 0.76rem; }
  }

/* ─────────────── BLOCK 2: FAB + BACK-TO-TOP + PRICING ─────────────── */

/* ── FLOATING CALL BUTTON ── */
  .fab-call {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #8a6010, #c9942a);
    color: #000;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(201,148,42,0.45);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .fab-call:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,148,42,0.55); }
  /* Hide on desktop — less intrusive */
  @media (min-width: 820px) { .fab-call span { display: inline; } }

  /* ── BACK TO TOP ── */
  .back-to-top {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 200;
    width: 44px; height: 44px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--gold-light);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
  }
  .back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }

  /* ── TESTIMONIALS ── */
  .testimonials-bg { background: var(--bg-dark); }
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 48px;
  }
  .testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 28px;
    position: relative;
  }
  .testimonial-card::before {
    content: '"';
    position: absolute;
    top: 16px; right: 20px;
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    color: var(--gold-dark);
    opacity: 0.4;
    line-height: 1;
  }
  .stars { color: var(--gold-light); font-size: 0.9rem; margin-bottom: 12px; letter-spacing: 2px; }
  .testimonial-text { color: var(--text-muted); font-size: 0.93rem; line-height: 1.7; margin-bottom: 16px; font-style: italic; }
  .testimonial-author {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--silver-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .testimonial-author span { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

  /* ── PRICING GUIDE ── */
  .pricing-bg { background: var(--bg-mid); }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 48px;
  }
  .pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 24px;
    text-align: center;
    transition: border-color 0.25s;
  }
  .pricing-card:hover { border-color: var(--gold-dark); }
  .pricing-icon { font-size: 1.8rem; margin-bottom: 12px; display: block; }
  .pricing-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--silver-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
  }
  .pricing-range {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: var(--gold-light);
    margin-bottom: 6px;
  }
  .pricing-note { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
  .pricing-disclaimer {
    text-align: center;
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
  }
  .pricing-disclaimer strong { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   SEASONAL BANNER
   Sits above the nav; collapses to multi-row on small phones.
   ═══════════════════════════════════════════════════════════════ */

.seasonal-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: #0a0b0d;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transform: translateY(0);
  transition: transform 0.35s ease, opacity 0.25s ease;
}

.seasonal-banner.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* When banner is visible, push the rest of the page down by its actual measured height */
body.banner-visible nav { top: var(--banner-h, 44px); }
body.banner-visible { padding-top: var(--banner-h, 44px); }

.seasonal-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 56px 10px 20px; /* right padding leaves room for close btn */
  max-width: 1400px;
  margin: 0 auto;
  min-height: 44px;
}

.seasonal-icon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.seasonal-inner p {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.35;
  margin: 0;
  color: #0a0b0d;
}

.seasonal-inner p strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.seasonal-cta {
  flex-shrink: 0;
  background: #0a0b0d;
  color: var(--gold-light) !important;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.4);
  transition: background 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
}

.seasonal-cta:hover,
.seasonal-cta:focus-visible {
  background: #1c2028;
  color: #fff !important;
  transform: translateY(-1px);
}

.seasonal-close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #0a0b0d;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  padding: 0;
  line-height: 1;
}

.seasonal-close:hover,
.seasonal-close:focus-visible {
  background: rgba(0,0,0,0.18);
  transform: translateY(-50%) scale(1.08);
}

/* ── Tablet & smaller (≤860px) ── */
@media (max-width: 860px) {
  .seasonal-inner {
    gap: 10px;
    padding: 9px 48px 9px 16px;
  }
  .seasonal-inner p { font-size: 0.85rem; }
  .seasonal-cta {
    font-size: 0.72rem;
    padding: 6px 12px;
    letter-spacing: 0.08em;
  }
}

/* ── Phone (≤560px): stack content vertically ── */
@media (max-width: 560px) {
  .seasonal-inner {
    flex-direction: column;
    gap: 8px;
    padding: 10px 44px 10px 14px;
    text-align: center;
    min-height: 0;
  }
  .seasonal-icon {
    font-size: 1.4rem;
    margin-bottom: 2px;
  }
  .seasonal-inner p {
    font-size: 0.82rem;
    line-height: 1.3;
  }
  .seasonal-inner p strong {
    display: block;
    margin-bottom: 2px;
  }
  .seasonal-cta {
    font-size: 0.7rem;
    padding: 5px 14px;
  }
  .seasonal-close {
    top: 8px;
    right: 8px;
    transform: none;
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }
  .seasonal-close:hover,
  .seasonal-close:focus-visible {
    transform: scale(1.08);
  }

  /* Banner height is now measured dynamically via JS — no hardcoded override needed */
}

/* ── Very small phones (≤360px): trim further ── */
@media (max-width: 360px) {
  .seasonal-inner { padding: 9px 40px 9px 12px; }
  .seasonal-inner p { font-size: 0.78rem; }
  .seasonal-cta { font-size: 0.68rem; padding: 5px 12px; }
}


/* ═══════════════════════════════════════════════════════════════
   AVAILABILITY BADGE (in hero)
   ═══════════════════════════════════════════════════════════════ */
.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 24, 30, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 9px 18px;
  margin-top: 20px;
  margin-bottom: 32px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--silver-light);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  animation: fadeInUp 0.6s ease 0.8s forwards;
}
.availability-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #4caf50;
  box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  animation: availabilityPulse 2s ease-out infinite;
  flex-shrink: 0;
}
.availability-dot.busy { background: #d97706; }
.availability-dot.full { background: #c44; }
@keyframes availabilityPulse {
  0%   { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   HERO — KEN BURNS SLOW ZOOM
   ═══════════════════════════════════════════════════════════════ */
.hero-bg {
  animation: kenBurns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .availability-badge { animation: none; opacity: 1; transform: none; }
  .availability-dot { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MEDIEVAL THEME POLISH
   ═══════════════════════════════════════════════════════════════ */

/* — Sword-crossguard divider — replaces the plain gold line — */
.gold-divider {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dark) 20%, var(--gold) 50%, var(--gold-dark) 80%, transparent 100%);
  margin: 0;
  overflow: visible;
}
.gold-divider::before,
.gold-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 8px rgba(201, 148, 42, 0.4);
}
.gold-divider::before { left: 50%; margin-left: -42px; }
.gold-divider::after  { left: 50%; margin-left:  34px; }
/* center diamond */
.gold-divider {
  background-image:
    linear-gradient(90deg, transparent 0%, var(--gold-dark) 20%, var(--gold) 50%, var(--gold-dark) 80%, transparent 100%),
    radial-gradient(circle, var(--gold-light) 2px, transparent 3px);
  background-repeat: no-repeat;
  background-position: 0 50%, 50% 50%;
  background-size: 100% 1px, 12px 12px;
}

/* — Blade-strike underline on nav links — */
.nav-links a:not(.nav-cta) {
  position: relative;
  padding-bottom: 4px;
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  transform: translateX(-50%);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:not(.nav-cta):hover::after {
  width: 110%;
}

/* — Section titles get small flanking marks — */
.section-title {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   BACK-TO-TOP — SHIELD
   ═══════════════════════════════════════════════════════════════ */
.back-to-top .shield-icon {
  width: 22px;
  height: 26px;
  color: var(--gold-light);
  transition: transform 0.25s, color 0.25s;
}
.back-to-top:hover .shield-icon {
  color: #fff;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   MILEAGE ESTIMATE CARD (in form)
   ═══════════════════════════════════════════════════════════════ */
.mileage-estimate {
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(201,148,42,0.08), rgba(201,148,42,0.02));
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s, transform 0.3s;
}
.mileage-estimate.visible {
  opacity: 1;
  transform: translateY(0);
}
.mileage-estimate.loading {
  border-color: rgba(184, 191, 200, 0.2);
  background: rgba(28, 32, 40, 0.5);
}
.mileage-estimate-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.mileage-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.mileage-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mileage-content strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.04em;
}
.mileage-content span {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   SMS OPT-IN CHECKBOX
   ═══════════════════════════════════════════════════════════════ */
.form-checkbox {
  margin-top: 8px;
}
.form-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.form-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  background: rgba(28, 32, 40, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}
.form-checkbox label:hover {
  border-color: var(--gold-dark);
  background: rgba(28, 32, 40, 0.75);
}
.checkbox-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gold);
  border-radius: 3px;
  background: var(--bg-deep);
  position: relative;
  margin-top: 1px;
  transition: background 0.2s, border-color 0.2s;
}
.checkbox-box::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--bg-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.18s ease;
}
.form-checkbox input:checked + label .checkbox-box {
  background: var(--gold);
  border-color: var(--gold);
}
.form-checkbox input:checked + label .checkbox-box::after {
  transform: rotate(45deg) scale(1);
}
.form-checkbox input:focus-visible + label {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
.checkbox-text {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
}
.checkbox-text small {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   MEET THE OPERATOR
   ═══════════════════════════════════════════════════════════════ */
.operator-section {
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-deep) 100%);
}
.operator-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.operator-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.operator-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.operator-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-mid) 100%);
  color: var(--gold-dark);
}
.operator-photo-placeholder span {
  font-size: 3.5rem;
  opacity: 0.6;
}
.operator-photo-placeholder small {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.operator-bio {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.operator-quote {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.35;
  padding-left: 20px;
  border-left: 3px solid var(--gold);
  margin: 0;
}
.operator-text {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text);
}
.operator-text em {
  color: var(--text-muted);
}
.operator-signature {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  font-size: 0.92rem;
}
@media (max-width: 720px) {
  .operator-card {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 480px;
  }
  .operator-quote { font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE AREA MAP — town markers / legend styling
   ═══════════════════════════════════════════════════════════════ */
.area-map-wrap {
  position: relative;
}
.map-legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(10, 11, 13, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--silver-light);
  pointer-events: none;
  max-width: 220px;
}
.map-legend-title {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold-light);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
  display: block;
  font-size: 0.72rem;
}
.map-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.map-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.map-legend-dot.hq { background: var(--gold); box-shadow: 0 0 0 2px rgba(232, 184, 75, 0.3); }
.map-legend-dot.zone { background: var(--silver); opacity: 0.6; }
@media (max-width: 600px) {
  .map-legend {
    bottom: 8px;
    left: 8px;
    padding: 10px 12px;
    font-size: 0.7rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   SERVICE MAP — needs explicit height for Google Maps to render
   ═══════════════════════════════════════════════════════════════ */
.service-map {
  width: 100%;
  height: 460px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
}

/* The legend overlay is inside .area-map-wrap which must be relative
   so the absolute-positioned legend anchors to it correctly. */
.area-map-wrap {
  position: relative;
}

@media (max-width: 768px) {
  .service-map { height: 360px; }
}
@media (max-width: 480px) {
  .service-map { height: 300px; }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX — hidden until JS opens it
   The lightbox markup exists but the gallery isn't wired yet,
   so we keep it fully hidden. When gallery photos are added,
   JS will toggle the .open class.
   ═══════════════════════════════════════════════════════════════ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lightbox.open {
  display: flex;
  opacity: 1;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(28, 32, 40, 0.7);
  border: 1px solid var(--border);
  color: var(--silver-light);
  cursor: pointer;
  font-size: 1.4rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  z-index: 2;
  backdrop-filter: blur(8px);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--gold);
  color: #000;
  transform: scale(1.08);
}
.lightbox-prev:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-content {
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 16px 60px rgba(0,0,0,0.6);
}
.lightbox-info {
  text-align: center;
  color: var(--silver-light);
  max-width: 640px;
  padding: 0 12px;
}
.lightbox-info h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.lightbox-info p {
  font-size: 0.95rem;
  color: var(--silver);
  line-height: 1.5;
}

/* Mobile lightbox adjustments */
@media (max-width: 640px) {
  .lightbox { padding: 12px; }
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev  { left: 8px; }
  .lightbox-next  { right: 8px; }
  .lightbox-content { max-width: 100%; gap: 12px; }
  .lightbox-content img { max-height: 65vh; }
  .lightbox-info h3 { font-size: 1rem; }
  .lightbox-info p { font-size: 0.85rem; }
}


/* ═══════════════════════════════════════════════════════════════
   STICKY QUOTE CTA
   Appears after hero, hides when contact section is in view.
   Sits ABOVE the Call Now FAB (which always anchors bottom-right)
   so they never overlap on any screen size.
   ═══════════════════════════════════════════════════════════════ */
.sticky-cta {
  position: fixed;
  bottom: 88px;           /* sits above the Call FAB */
  right: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  color: #000;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 8px 28px rgba(201, 148, 42, 0.35), 0 2px 6px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sticky-cta.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sticky-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 36px rgba(201, 148, 42, 0.5), 0 4px 8px rgba(0,0,0,0.4);
}
.sticky-cta-icon { font-size: 1rem; line-height: 1; }

/* Tighter on small phones */
@media (max-width: 480px) {
  .sticky-cta {
    bottom: 80px;
    right: 16px;
    padding: 10px 16px;
    font-size: 0.78rem;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BACK-TO-TOP — sword draws on hover
   ═══════════════════════════════════════════════════════════════ */
.back-to-top .shield-icon { overflow: visible; }
.back-to-top .sword-blade {
  /* Use stroke-dasharray to "draw" the blade on hover */
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  transition: stroke-dashoffset 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.back-to-top .sword-cross,
.back-to-top .sword-pommel {
  opacity: 0;
  transition: opacity 0.25s ease 0.35s;
}
.back-to-top:hover .sword-blade {
  stroke-dashoffset: 0;
}
.back-to-top:hover .sword-cross,
.back-to-top:hover .sword-pommel {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top .sword-blade { stroke-dashoffset: 0; }
  .back-to-top .sword-cross,
  .back-to-top .sword-pommel { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION ENTRANCE WIPE
   A subtle gold sweep when each major section first enters view.
   Lightweight, one-time per section, respects reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
section[id] {
  position: relative;
  overflow: hidden;
}
section[id]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  width: 0;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 148, 42, 0.02) 35%,
    rgba(232, 184, 75, 0.04) 50%,
    rgba(201, 148, 42, 0.02) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  transition: none;
}
section[id].section-wiped::after {
  width: 130%;
  transition: width 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Hero already has its own animation — skip */
#home::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  section[id]::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PLACES AUTOCOMPLETE — style the suggestion dropdown to match site
   The .pac-container is injected by Google; we override its styles.
   ═══════════════════════════════════════════════════════════════ */
.pac-container {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
  font-family: 'Barlow', sans-serif !important;
  margin-top: 4px;
}
.pac-item {
  background: transparent !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  border-top: 1px solid rgba(201,148,42,0.08) !important;
  font-size: 0.92rem !important;
  cursor: pointer;
}
.pac-item:first-child { border-top: none !important; }
.pac-item:hover,
.pac-item-selected {
  background: rgba(201, 148, 42, 0.1) !important;
}
.pac-item-query {
  color: var(--gold-light) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}
.pac-matched {
  color: var(--gold-light) !important;
  font-weight: 700 !important;
}
.pac-icon {
  filter: brightness(0) saturate(100%) invert(72%) sepia(56%) saturate(486%) hue-rotate(8deg) brightness(94%) contrast(89%);
}
/* Keep "powered by Google" attribution visible to comply with Maps TOS */
.pac-logo::after {
  background-color: var(--bg-card) !important;
  border-top: 1px solid rgba(201,148,42,0.1);
}


/* ═══════════════════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════════════════ */
.gallery-bg {
  background: var(--bg-mid);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 48px;
}
.gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  padding: 0;
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s;
}
.gallery-tile:hover,
.gallery-tile:focus-visible {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  outline: none;
}
.gallery-tile:hover img,
.gallery-tile:focus-visible img {
  transform: scale(1.06);
  filter: brightness(1.08);
}
.gallery-tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 14px 12px;
  background: linear-gradient(
    180deg,
    rgba(10, 11, 13, 0) 0%,
    rgba(10, 11, 13, 0.85) 100%
  );
  color: var(--gold-light);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  pointer-events: none;
}

@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 520px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .gallery-tile-label { font-size: 0.78rem; padding: 24px 12px 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   HOVER & LOADING STATE POLISH
   World-class micro-interactions: subtle, fast, consistent.
   ═══════════════════════════════════════════════════════════════ */

/* ── Form input focus states — gold glow ── */
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.contact-form input:hover:not(:focus),
.contact-form select:hover:not(:focus),
.contact-form textarea:hover:not(:focus) {
  border-color: rgba(201, 148, 42, 0.4);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 148, 42, 0.15);
  background-color: rgba(28, 32, 40, 0.9);
}

/* ── Service cards — smooth hover ── */
.service-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              background 0.25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 148, 42, 0.2);
}
.service-card:active {
  transform: translateY(-1px);
  transition: transform 0.1s ease;
}

/* ── Buttons — pressed/active states ── */
.btn-primary,
.btn-secondary,
.cta-band-btn,
.nav-cta,
.mob-cta,
.seasonal-cta,
.form-submit {
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              background 0.2s ease,
              filter 0.2s ease;
}
.btn-primary:hover,
.cta-band-btn:hover,
.seasonal-cta:hover,
.form-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201, 148, 42, 0.45);
  filter: brightness(1.08);
}
.btn-primary:active,
.cta-band-btn:active,
.seasonal-cta:active,
.form-submit:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(201, 148, 42, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  color: var(--gold-light);
}
.btn-secondary:active {
  transform: translateY(0);
  transition: transform 0.08s ease;
}

/* ── Nav links — active state press ── */
nav .nav-links a:active {
  color: var(--gold);
  transition: color 0.05s ease;
}

/* ── Form submit button — loading spinner ── */
.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
}
.form-submit:disabled {
  cursor: wait;
  opacity: 0.85;
}
.form-submit.loading::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Lightbox — loading spinner while big image loads ── */
.lightbox-content {
  position: relative;
}
.lightbox.open::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 3px solid rgba(232, 184, 75, 0.2);
  border-top-color: var(--gold-light);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 1;
  pointer-events: none;
}
.lightbox-content img {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.3);
}

/* ── Contact items — phone/email/hours hover lift ── */
.contact-item {
  transition: transform 0.25s ease, background 0.25s ease;
}
.contact-item:hover {
  transform: translateX(4px);
  background: rgba(201, 148, 42, 0.04);
}
.contact-item a {
  transition: color 0.2s ease;
}
.contact-item a:hover {
  color: var(--gold-light);
}

/* ── Pricing cards — hover lift ── */
.pricing-card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pricing-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* ── Testimonial cards — gentle hover ── */
.testimonial {
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.testimonial:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 148, 42, 0.4);
}

/* ── Footer links — gold on hover ── */
.footer-links a,
.footer-bottom a {
  transition: color 0.2s ease;
}
.footer-links a:hover,
.footer-bottom a:hover {
  color: var(--gold-light);
}

/* ── Why-Us strip items ── */
.why-item {
  transition: transform 0.25s ease;
}
.why-item:hover {
  transform: translateY(-3px);
}
.why-item-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.why-item:hover .why-item-icon {
  transform: scale(1.12) rotate(-3deg);
}

/* ── Checkbox label hover ── */
.form-checkbox-label {
  transition: color 0.2s ease;
  cursor: pointer;
}
.form-checkbox-label:hover {
  color: var(--gold-light);
}

/* ── Active page transitions: smooth scroll behavior already set; add cursor feedback for interactive elements ── */
button, .gallery-tile, .nav-cta, a {
  -webkit-tap-highlight-color: rgba(201, 148, 42, 0.2);
}

/* ── Reduced motion: respect the user's preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.05ms !important;
  }
}