:root {
      --bg: #0A0E14;
      --bg-2: #0F141C;
      --bg-elev: #161D27;
      --line: rgba(255, 255, 255, 0.08);
      --line-strong: rgba(255, 255, 255, 0.16);
      --ink: #F4EFE6;
      --ink-soft: #BFB7A8;
      --ink-mute: #7A7264;
      --amber: #FFB547;
      --amber-soft: #FFD68A;
      --amber-glow: rgba(255, 181, 71, 0.35);
      --cyan: #6FD3E6;
      --green: #6CD9A8;
      --display: 'Fraunces', 'Times New Roman', serif;
      --body: 'Manrope', system-ui, -apple-system, sans-serif;
      --radius: 14px;
      --radius-lg: 22px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      font-family: var(--body);
      background: var(--bg);
      color: var(--ink);
      line-height: 1.55;
      overflow-x: hidden;
      font-weight: 400;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

    /* ---------- Reusable ---------- */
    .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

    .eyebrow {
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--amber);
    }

    h1, h2, h3, h4 {
      font-family: var(--display);
      font-weight: 500;
      letter-spacing: -0.015em;
      line-height: 1.05;
      font-variation-settings: "opsz" 144;
    }

    .display {
      font-size: clamp(44px, 9vw, 92px);
      font-weight: 400;
      letter-spacing: -0.025em;
    }
    .display em {
      font-style: italic;
      font-weight: 300;
      color: var(--amber-soft);
    }

    .section-title {
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 400;
      letter-spacing: -0.02em;
    }
    .section-title em {
      font-style: italic;
      font-weight: 300;
      color: var(--amber-soft);
    }

    .lede {
      font-size: clamp(16px, 2vw, 19px);
      color: var(--ink-soft);
      font-weight: 400;
      max-width: 560px;
    }

    /* ---------- Button ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px 28px;
      background: linear-gradient(180deg, #FFC36B 0%, #FFB547 100%);
      color: #1A1306;
      font-weight: 600;
      font-size: 16px;
      border-radius: 999px;
      transition: transform 0.2s ease, box-shadow 0.3s ease;
      box-shadow:
        0 0 0 1px rgba(255, 181, 71, 0.5),
        0 12px 40px -8px var(--amber-glow),
        0 0 50px -10px var(--amber-glow);
      letter-spacing: -0.005em;
    }
    .btn:hover {
      transform: translateY(-2px);
      box-shadow:
        0 0 0 1px rgba(255, 181, 71, 0.8),
        0 18px 50px -8px rgba(255, 181, 71, 0.5),
        0 0 80px -10px rgba(255, 181, 71, 0.6);
    }
    .btn .arrow { transition: transform 0.2s ease; }
    .btn:hover .arrow { transform: translateX(4px); }
    .btn.ghost {
      background: transparent;
      color: var(--ink);
      box-shadow: 0 0 0 1px var(--line-strong);
    }
    .btn.ghost:hover { box-shadow: 0 0 0 1px var(--ink); }

    /* ---------- Nav ---------- */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 50;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      background: rgba(10, 14, 20, 0.7);
      border-bottom: 1px solid var(--line);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      max-width: 1180px;
      margin: 0 auto;
    }
    .logo {
      font-family: var(--display);
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.02em;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .logo-dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      background: var(--amber);
      box-shadow: 0 0 14px var(--amber-glow), 0 0 22px var(--amber-glow);
      animation: pulse 2.4s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.85); }
    }
    .nav-cta {
      padding: 10px 20px;
      font-size: 14px;
      border-radius: 999px;
      background: linear-gradient(180deg, #FFC36B 0%, #FFB547 100%);
      color: #1A1306;
      font-weight: 600;
      transition: box-shadow 0.2s ease;
    }
    .nav-cta:hover {
      box-shadow: 0 0 24px -2px var(--amber-glow);
    }

    /* ---------- Hero ---------- */
    .hero {
      position: relative;
      min-height: 100vh;
      padding: 120px 0 80px;
      display: flex;
      align-items: center;
      overflow: hidden;
      isolation: isolate;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 181, 71, 0.12), transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 30%, rgba(111, 211, 230, 0.06), transparent 60%),
        var(--bg);
    }
    .hero-image {
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image: url('/images/permanent-christmas-led-outdoor-lights-by-home-one.webp');
      background-size: cover;
      background-position: center;
      opacity: 0.32;
      mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.6) 100%);
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.6) 100%);
    }
    .hero-content {
      max-width: 880px;
      animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .hero .eyebrow { margin-bottom: 24px; }
    .hero h1 { margin-bottom: 28px; max-width: 14ch; }
    .hero .lede { margin-bottom: 38px; font-size: clamp(17px, 2.2vw, 21px); max-width: 620px; }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
    }
    .booking-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      font-size: 13px;
      border-radius: 999px;
      background: rgba(108, 217, 168, 0.1);
      color: var(--green);
      border: 1px solid rgba(108, 217, 168, 0.3);
      font-weight: 500;
    }
    .booking-badge::before {
      content: '';
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 10px var(--green);
      animation: pulse 1.8s ease-in-out infinite;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ---------- Sections ---------- */
    section { padding: 100px 0; position: relative; }
    @media (max-width: 768px) {
      section { padding: 72px 0; }
    }

    .section-header {
      max-width: 720px;
      margin-bottom: 64px;
    }
    .section-header .eyebrow { margin-bottom: 16px; }
    .section-header h2 { margin-bottom: 20px; }

    /* ---------- Value Props ---------- */
    .props {
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
      border-top: 1px solid var(--line);
    }
    .props-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    @media (max-width: 880px) {
      .props-grid { grid-template-columns: 1fr; }
    }
    .prop {
      padding: 36px 30px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      position: relative;
      overflow: hidden;
      transition: border-color 0.3s ease, transform 0.3s ease;
    }
    .prop:hover {
      border-color: var(--line-strong);
      transform: translateY(-4px);
    }
    .prop-icon {
      width: 52px; height: 52px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(255, 181, 71, 0.18), rgba(255, 181, 71, 0.05));
      border: 1px solid rgba(255, 181, 71, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      color: var(--amber);
    }
    .prop h3 {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 12px;
      letter-spacing: -0.01em;
    }
    .prop p {
      color: var(--ink-soft);
      font-size: 15px;
      line-height: 1.6;
    }

    /* ---------- Gallery ---------- */
    .gallery { background: var(--bg-2); border-top: 1px solid var(--line); }
    .tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 40px;
      flex-wrap: wrap;
      padding: 6px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: 999px;
      width: fit-content;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .tab {
      padding: 11px 22px;
      font-size: 14px;
      border-radius: 999px;
      color: var(--ink-soft);
      transition: all 0.25s ease;
      font-weight: 500;
      white-space: nowrap;
    }
    .tab:hover { color: var(--ink); }
    .tab.active {
      background: var(--ink);
      color: var(--bg);
    }
    .gallery-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    @media (max-width: 720px) {
      .gallery-wrap { grid-template-columns: 1fr; }
    }
    .gallery-img {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      aspect-ratio: 4/3;
      background: var(--bg-elev);
    }
    .gallery-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.4s ease;
    }
    .gallery-img .label {
      position: absolute;
      top: 16px;
      left: 16px;
      padding: 6px 14px;
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-weight: 600;
      border-radius: 999px;
      background: rgba(10, 14, 20, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: var(--ink);
      border: 1px solid var(--line-strong);
    }
    .gallery-img.after .label {
      background: var(--amber);
      color: #1A1306;
      border-color: var(--amber);
    }

    /* ---------- Stats ---------- */
    .stats { background: var(--bg); border-top: 1px solid var(--line); }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    @media (max-width: 720px) {
      .stats-grid { grid-template-columns: 1fr; }
    }
    .stat {
      padding: 48px 32px;
      text-align: center;
      border-right: 1px solid var(--line);
    }
    .stat:last-child { border-right: none; }
    @media (max-width: 720px) {
      .stat { border-right: none; border-bottom: 1px solid var(--line); }
      .stat:last-child { border-bottom: none; }
    }
    .stat-num {
      font-family: var(--display);
      font-size: clamp(48px, 6vw, 68px);
      font-weight: 400;
      color: var(--amber);
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 12px;
    }
    .stat-label {
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-mute);
      font-weight: 500;
    }

    /* ---------- Testimonials ---------- */
    .testimonials { background: var(--bg-2); border-top: 1px solid var(--line); }
    .testi-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    @media (max-width: 800px) {
      .testi-grid { grid-template-columns: 1fr; }
    }
    .testi {
      padding: 38px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      position: relative;
    }
    .testi .quote-mark {
      font-family: var(--display);
      font-size: 80px;
      line-height: 0.6;
      color: var(--amber);
      opacity: 0.35;
      margin-bottom: 8px;
    }
    .testi blockquote {
      font-family: var(--display);
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.4;
      font-weight: 400;
      margin-bottom: 24px;
      color: var(--ink);
    }
    .testi-author {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .testi-author-img {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--bg);
      overflow: hidden;
      border: 1px solid var(--line-strong);
    }
    .testi-author-img img {
      width: 100%; height: 100%; object-fit: cover;
    }
    .testi-author-info { flex: 1; }
    .testi-author-name {
      font-weight: 600;
      font-size: 15px;
      color: var(--ink);
    }
    .testi-author-loc {
      font-size: 13px;
      color: var(--ink-mute);
    }
    .stars {
      color: var(--amber);
      letter-spacing: 2px;
      font-size: 14px;
    }

    /* ---------- Steps ---------- */
    .steps { background: var(--bg); border-top: 1px solid var(--line); }
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      counter-reset: step;
    }
    @media (max-width: 800px) {
      .steps-grid { grid-template-columns: 1fr; }
    }
    .step {
      padding: 36px 32px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--bg-2);
      position: relative;
      counter-increment: step;
    }
    .step::before {
      content: "0" counter(step);
      font-family: var(--display);
      font-size: 14px;
      font-weight: 500;
      color: var(--amber);
      letter-spacing: 0.05em;
    }
    .step h3 {
      font-size: 24px;
      font-weight: 500;
      margin: 18px 0 12px;
      letter-spacing: -0.01em;
    }
    .step p {
      color: var(--ink-soft);
      font-size: 15px;
      line-height: 1.6;
    }

    /* ---------- Form ---------- */
    .form-section {
      background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 181, 71, 0.12), transparent 70%),
        var(--bg);
      border-top: 1px solid var(--line);
    }
    .form-wrap {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }
    .form-wrap .section-header {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      margin-bottom: 48px;
    }
    .form-wrap .lede { margin-left: auto; margin-right: auto; }

    .quote-form {
      text-align: left;
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 40px;
    }
    @media (max-width: 600px) {
      .quote-form { padding: 28px 22px; }
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
    @media (max-width: 600px) {
      .form-row { grid-template-columns: 1fr; }
    }
    .field { display: flex; flex-direction: column; gap: 8px; }
    .field.full { grid-column: 1 / -1; }
    .field label {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-soft);
      letter-spacing: 0.02em;
    }
    .field input,
    .field select,
    .field textarea {
      padding: 14px 16px;
      font-family: inherit;
      font-size: 15px;
      background: var(--bg);
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      color: var(--ink);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      width: 100%;
    }
    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--amber);
      box-shadow: 0 0 0 3px rgba(255, 181, 71, 0.18);
    }
    .field textarea { resize: vertical; min-height: 100px; font-family: inherit; }
    .field select {
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BFB7A8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      padding-right: 40px;
    }
    .form-submit {
      margin-top: 24px;
      width: 100%;
      padding: 20px;
      font-size: 17px;
    }
    .form-disclaimer {
      margin-top: 18px;
      font-size: 12px;
      color: var(--ink-mute);
      text-align: center;
      line-height: 1.5;
    }

    /* Success state */
    .form-success {
      display: none;
      padding: 60px 30px;
      text-align: center;
      background: var(--bg-elev);
      border: 1px solid rgba(108, 217, 168, 0.4);
      border-radius: var(--radius-lg);
    }
    .form-success.show { display: block; }
    .form-success.show ~ .quote-form { display: none; }
    .form-success .check {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: rgba(108, 217, 168, 0.15);
      color: var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      font-size: 32px;
    }
    .form-success h3 {
      font-size: 32px;
      font-weight: 400;
      margin-bottom: 14px;
    }
    .form-success p {
      color: var(--ink-soft);
      max-width: 420px;
      margin: 0 auto;
    }

    /* ---------- Footer ---------- */
    footer {
      padding: 64px 0 40px;
      background: var(--bg);
      border-top: 1px solid var(--line);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 48px;
    }
    @media (max-width: 760px) {
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
      .footer-col ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 24px;
      }
      .footer-col li { margin-bottom: 0; }
    }
    .footer-brand p {
      color: var(--ink-soft);
      font-size: 14px;
      line-height: 1.6;
      margin-top: 14px;
      max-width: 380px;
    }
    .footer-col h4 {
      font-family: var(--body);
      font-size: 12px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--ink-mute);
      font-weight: 600;
      margin-bottom: 16px;
    }
    .footer-col ul { list-style: none; }
    .footer-col li {
      font-size: 14px;
      color: var(--ink-soft);
      margin-bottom: 10px;
    }
    .footer-bottom {
      padding-top: 28px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: var(--ink-mute);
      flex-wrap: wrap;
      gap: 16px;
    }

    /* ---------- Reveal animation ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }