/* ─── TOKENS ─────────────────────────────────────────────── */
    :root {
      --orange:      #E87722;   /* Schluter Systems brand orange */
      --orange-light:#FF9248;
      --orange-pale: #FBD9BC;
      --gold-deep:   #A4501A;
      --black:       #0D0D0D;
      --charcoal:    #1C1C1C;
      --slate:       #2A2A2A;
      --warm-gray:   #6B6560;
      --ivory:       #F4EDE0;
      --light:       #F8F6F2;
      --white:       #FFFFFF;
      --border:      rgba(232,119,34,0.22);
      --hairline:    rgba(255,255,255,0.07);

      --serif:  'Playfair Display', Georgia, serif;
      --sans:   'Inter', system-ui, sans-serif;
      --italic: 'Cormorant Garamond', Georgia, serif;

      --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --max: 1240px;
    }

    /* ─── RESET ──────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body { font-family: var(--sans); background: var(--black); color: var(--white); overflow-x: hidden; }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }

    /* ─── UTILITIES ──────────────────────────────────────────── */
    .container { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

    .orange-label {
      display: inline-block;
      font-family: var(--sans);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 16px;
    }

    .section-title {
      font-family: var(--serif);
      font-size: clamp(2.6rem, 5vw, 4.2rem);
      font-weight: 400;
      line-height: 1.15;
      color: var(--white);
    }

    .section-title em {
      font-style: italic;
      color: var(--orange-light);
    }

    .body-text {
      font-family: var(--sans);
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(255,255,255,0.62);
      max-width: 540px;
    }

    .btn-orange {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 36px;
      background: var(--orange);
      color: var(--black);
      font-family: var(--sans);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s;
    }

    .btn-orange:hover {
      background: var(--orange-light);
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(232,119,34,0.35);
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 35px;
      background: transparent;
      color: var(--white);
      font-family: var(--sans);
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: 1px solid rgba(255,255,255,0.3);
      cursor: pointer;
      transition: all 0.3s var(--ease);
    }

    .btn-ghost:hover {
      border-color: var(--orange);
      color: var(--orange);
    }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    }
    .reveal.in { opacity: 1; transform: none; }
    .reveal-l { opacity: 0; transform: translateX(-36px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
    .reveal-l.in { opacity: 1; transform: none; }
    .reveal-r { opacity: 0; transform: translateX(36px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
    .reveal-r.in { opacity: 1; transform: none; }

    /* Orange divider line */
    .orange-line {
      width: 48px;
      height: 2px;
      background: var(--orange);
      margin: 20px 0 28px;
    }

    /* ─── NAVIGATION ─────────────────────────────────────────── */
    #nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 900;
      padding: 20px 0;
      transition: padding 0.4s, background 0.4s, backdrop-filter 0.4s;
    }
    #nav.scrolled {
      padding: 12px 0;
      background: rgba(13,13,13,0.95);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    .nav-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .nav-logo-img { height: 110px; max-height: 110px; object-fit: contain; transition: height 0.3s ease; }
    #nav.scrolled .nav-logo-img { height: 84px; }
    @media (max-width: 1180px) { .nav-logo-img { height: 84px; } #nav.scrolled .nav-logo-img { height: 68px; } }
    @media (max-width: 768px)  { .nav-logo-img { height: 64px; } #nav.scrolled .nav-logo-img { height: 56px; } }
    .nav-links {
      display: flex;
      gap: 26px;
      margin-left: -20px;
      list-style: none;
    }
    .nav-links a {
      font-size: 0.74rem;
      font-weight: 500;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      transition: color 0.3s;
      padding: 6px 0;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
    }
    .nav-links a:hover, .nav-links a.is-current { color: var(--orange); }
    .nav-links a.is-current { position: relative; }
    .nav-links a.is-current::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: -8px;
      height: 1px;
      background: var(--orange);
    }
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .nav-phone {
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 1.5px;
      color: rgba(255,255,255,0.8);
      transition: color 0.3s;
    }
    .nav-phone:hover { color: var(--orange); }
    .nav-cta { padding: 11px 24px; font-size: 0.75rem; }
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
    }
    .hamburger span {
      width: 24px;
      height: 1.5px;
      background: var(--white);
      transition: all 0.3s;
    }

    /* Mobile Drawer */
    .drawer {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--charcoal);
      z-index: 950;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 36px;
    }
    .drawer.open { display: flex; }
    .drawer-close {
      position: absolute;
      top: 28px; right: 28px;
      background: none;
      border: none;
      color: var(--white);
      font-size: 1.6rem;
      cursor: pointer;
    }
    .drawer a {
      font-family: var(--serif);
      font-size: 2rem;
      color: var(--white);
      transition: color 0.3s;
    }
    .drawer a:hover { color: var(--orange); }

    /* ─── HERO ───────────────────────────────────────────────── */
    #hero {
      position: relative;
      overflow: hidden;
    }

    /* Centered content column, sits on top of the full-bleed photo */
    .hero-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 150px 24px 80px;
      max-width: 720px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .hero-form-card, .offer-stack { text-align: left; }

    /* Right panel — stretch to match left */

    .hero-headline {
      font-family: var(--serif);
      font-size: clamp(2.2rem, 3.5vw, 3.4rem);
      font-weight: 400;
      line-height: 1.18;
      color: var(--white);
      margin-bottom: 12px;
    }
    .hero-headline em {
      font-style: italic;
      color: var(--orange-light);
      display: block;
    }

    .hero-sub {
      font-family: var(--italic);
      font-size: 1.15rem;
      font-style: italic;
      font-weight: 300;
      color: rgba(255,255,255,0.55);
      margin-bottom: 32px;
      line-height: 1.7;
    }

    /* Estimate form embedded in hero */
    .hero-form-card {
      background: #FDFAF5;
      padding: 36px 30px 28px;
      margin-top: 8px;
      max-width: 460px;
      margin-left: auto;
      margin-right: auto;
      border-top: 3px solid var(--orange);
      box-shadow: 0 16px 52px rgba(0,0,0,0.22), 0 1px 0 rgba(232,148,26,0.18);
    }
    .hero-form-card h3 {
      font-family: var(--serif);
      font-size: 1.75rem;
      font-weight: 600;
      color: var(--black);
      margin-bottom: 6px;
      text-align: center;
      line-height: 1.2;
    }
    .hero-form-card h3::after {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(232,148,26,0.45), transparent);
      margin: 14px auto 0;
    }
    .hero-form-card .form-note {
      font-size: 0.8rem;
      color: var(--warm-gray);
      margin-bottom: 22px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .form-eyebrow {
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: var(--orange);
      text-align: center;
      margin-bottom: 10px;
    }
    .resp-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(232,148,26,0.1);
      color: var(--orange);
      border-radius: 20px;
      padding: 2px 9px;
      font-weight: 700;
      font-size: 0.73rem;
    }
    .form-concierge-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 0.7rem;
      color: #aaa;
      margin-top: 13px;
      text-align: center;
      letter-spacing: 0.3px;
    }
    .form-concierge-note i { color: #ccc; font-size: 0.68rem; }
    .form-field {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 18px;
    }
    .form-field label {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #666;
    }
    .form-field input,
    .form-field select,
    .form-field textarea {
      padding: 15px 16px;
      border: 1px solid #E3DDD5;
      font-family: var(--sans);
      font-size: 1.05rem;
      color: var(--black);
      background: #FAF8F4;
      outline: none;
      width: 100%;
      transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
      border-radius: 0;
      min-height: 52px;
      -webkit-appearance: none;
    }
    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
      border-color: var(--orange);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(232,148,26,0.09);
    }
    .form-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .form-field textarea { min-height: 72px; resize: vertical; }
    .form-submit {
      width: 100%;
      justify-content: center;
      margin-top: 4px;
      padding: 16px;
    }
    .form-privacy {
      text-align: center;
      font-size: 0.75rem;
      color: #999;
      margin-top: 10px;
    }

    /* Right: PNW Scene — fills to match left panel */
    .hero-right {
      position: relative;
      overflow: hidden;
    }

    .pnw-scene {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .pnw-sky {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, #1a3a5c 0%, #2d5a7b 30%, #4a7fa5 55%, #87aec5 75%, #b8d4e3 90%, #d4e7d0 100%);
    }

    /* Clouds */
    .cloud {
      position: absolute;
      background: rgba(255,255,255,0.4);
      border-radius: 50px;
      animation: drift linear infinite;
    }
    .cloud::before, .cloud::after {
      content: '';
      position: absolute;
      background: rgba(255,255,255,0.4);
      border-radius: 50%;
    }
    @keyframes drift {
      from { transform: translateX(-200px); }
      to { transform: translateX(calc(100vw + 200px)); }
    }

    /* Animated van */
    .van-container {
      position: relative;
      z-index: 5;
      padding: 0 24px 0;
      animation: float 4s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    .van-road {
      height: 64px;
      background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
      position: relative;
      overflow: hidden;
      z-index: 4;
    }
    .road-center {
      position: absolute;
      top: 50%;
      height: 3px;
      left: 0; right: 0;
      background: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.35) 0px, rgba(255,255,255,0.35) 60px,
        transparent 60px, transparent 120px
      );
      animation: roadScroll 1.2s linear infinite;
    }
    @keyframes roadScroll {
      from { background-position: 0 0; }
      to { background-position: 120px 0; }
    }

    /* ─── PROMISE BAR ────────────────────────────────────────── */
    #promise {
      background: var(--charcoal);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 0;
    }
    .promise-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
    .promise-item {
      padding: 32px 28px;
      border-right: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 16px;
      transition: background 0.3s;
    }
    .promise-item:last-child { border-right: none; }
    .promise-item:hover { background: rgba(232,119,34,0.05); }
    .promise-icon {
      font-size: 1.3rem;
      color: var(--orange);
      flex-shrink: 0;
    }
    .promise-text strong {
      display: block;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 2px;
    }
    .promise-text span {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.45);
    }

    /* ─── PHILOSOPHY ─────────────────────────────────────────── */
    #philosophy {
      padding: 140px 0;
      background: var(--black);
    }
    .philosophy-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
      align-items: center;
    }
    .philosophy-quote {
      font-family: var(--italic);
      font-size: clamp(1.6rem, 2.5vw, 2.4rem);
      font-style: italic;
      font-weight: 300;
      line-height: 1.55;
      color: rgba(255,255,255,0.85);
      border-left: 3px solid var(--orange);
      padding-left: 32px;
    }
    .philosophy-points {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    .philosophy-point {
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }
    .point-num {
      font-family: var(--serif);
      font-size: 2rem;
      font-weight: 400;
      color: var(--orange);
      opacity: 0.5;
      line-height: 1;
      min-width: 40px;
    }
    .point-text strong {
      display: block;
      font-size: 1rem;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 6px;
      letter-spacing: 0.5px;
    }
    .point-text p {
      font-size: 0.9rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.7;
    }

    /* ─── SERVICES ───────────────────────────────────────────── */
    #services {
      padding: 140px 0;
      background: var(--charcoal);
    }
    .services-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: end;
      margin-bottom: 72px;
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .service-tile {
      background: var(--slate);
      padding: 44px 36px;
      position: relative;
      overflow: hidden;
      cursor: default;
      transition: background 0.4s var(--ease);
    }
    .service-tile::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 100%;
      height: 3px;
      background: var(--orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s var(--ease);
    }
    .service-tile:hover { background: #2F2F2F; }
    .service-tile:hover::after { transform: scaleX(1); }
    .tile-icon {
      font-size: 1.8rem;
      margin-bottom: 20px;
    }
    .tile-title {
      font-family: var(--serif);
      font-size: 1.35rem;
      font-weight: 500;
      color: var(--white);
      margin-bottom: 12px;
    }
    .tile-body {
      font-size: 0.88rem;
      font-weight: 300;
      color: rgba(255,255,255,0.48);
      line-height: 1.75;
    }
    .tile-orange-tag {
      display: inline-block;
      margin-top: 18px;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--orange);
    }

    /* ─── GALLERY ────────────────────────────────────────────── */
    #gallery {
      padding: 140px 0;
      background: var(--black);
    }
    .gallery-header {
      text-align: center;
      margin-bottom: 60px;
    }
    .gallery-header .body-text { margin: 0 auto; }

    /* Portfolio — categorized cover cards with expandable sub-galleries */
    .cat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .cat-card {
      position: relative;
      background: var(--charcoal);
      border: 1px solid rgba(255,255,255,0.06);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .cat-card-drag {
      display: none;
      position: absolute;
      top: 14px; left: 14px;
      width: 30px; height: 30px;
      border-radius: 6px;
      background: rgba(30,30,30,0.85);
      color: #fff;
      border: none;
      font-size: 15px;
      line-height: 1;
      cursor: grab;
      z-index: 5;
      align-items: center;
      justify-content: center;
    }
    body.bv-edit .cat-card-drag { display: flex; }
    .cat-card-drag:active { cursor: grabbing; }
    .cat-card.dragging-card { opacity: 0.35; }
    .cat-card.card-drag-over { outline: 3px solid var(--orange); outline-offset: -3px; }
    .cat-cover {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #000;
      cursor: pointer;
      border: 0;
      padding: 0;
      display: block;
    }
    .cat-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s var(--ease);
    }
    .cat-cover:hover img { transform: scale(1.05); }
    .cat-cover-edit {
      display: none;
      position: absolute;
      top: 14px; right: 14px;
      align-items: center;
      gap: 5px;
      background: rgba(30,30,30,0.85);
      color: #fff;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 7px 12px;
      border-radius: 20px;
      z-index: 3;
      cursor: pointer;
    }
    body.bv-edit .cat-cover-edit { display: inline-flex; }
    .cat-cover-edit:hover { background: rgba(232,148,26,0.9); color: #1a1a1a; }
    .cat-cover-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 22px 20px;
      color: var(--white);
      text-align: left;
    }
    .cat-name {
      font-family: var(--serif);
      font-size: 1.55rem;
      font-weight: 600;
      line-height: 1.15;
      color: var(--white);
    }
    .cat-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 6px;
    }
    .cat-count {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--orange);
    }
    .cat-toggle {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--orange);
      color: var(--black);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      transition: transform 0.3s ease;
    }
    .cat-card.is-open .cat-toggle { transform: rotate(45deg); }
    .cat-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease;
      background: #0F0F0F;
    }
    .cat-card.is-open .cat-panel { max-height: 9000px; }
    .cat-photos {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      padding: 4px;
    }
    .cat-photo {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      cursor: pointer;
    }
    .cat-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s var(--ease);
    }
    .cat-photo:hover img { transform: scale(1.06); }
    .cat-photo-label {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 10px 12px;
      background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
      color: var(--white);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .cat-photo:hover .cat-photo-label { opacity: 1; }

    /* Lightbox */
    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.97);
      z-index: 9999;
      align-items: center;
      justify-content: center;
    }
    .lightbox.open { display: flex; }
    .lightbox img {
      max-width: 88vw;
      max-height: 88vh;
      object-fit: contain;
      transition: transform 0.2s ease;
      transform-origin: center center;
      cursor: zoom-in;
    }
    .lb-close {
      position: absolute;
      top: 24px; right: 32px;
      background: none;
      border: none;
      color: rgba(255,255,255,0.7);
      font-size: 1.8rem;
      cursor: pointer;
    }
    .lb-close:hover { color: var(--orange); }
    .lb-zoom-bar {
      position: absolute;
      bottom: 28px; left: 50%;
      transform: translateX(-50%);
      display: flex; gap: 10px; align-items: center;
      background: rgba(255,255,255,0.12);
      backdrop-filter: blur(8px);
      border-radius: 40px;
      padding: 8px 18px;
    }
    .lb-zoom-bar button {
      background: rgba(255,255,255,0.15);
      border: none; color: #fff;
      width: 36px; height: 36px;
      border-radius: 50%;
      font-size: 1.3rem; font-weight: 700;
      cursor: pointer; line-height: 1;
      transition: background 0.2s;
    }
    .lb-zoom-bar button:hover { background: var(--orange); color: #111; }
    .lb-zoom-level {
      color: rgba(255,255,255,0.8);
      font-size: 0.85rem; font-weight: 600;
      min-width: 38px; text-align: center;
    }
    /* Photo swap overlay in edit mode */
    body.bv-edit .cat-photo { position: relative; }
    body.bv-edit .cat-photo::after {
      content: '📷 Replace';
      position: absolute; inset: 0;
      background: rgba(232,148,26,0.7);
      color: #fff; font-weight: 700; font-size: 0.9rem;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.2s;
      pointer-events: none; border-radius: 4px;
    }
    body.bv-edit .cat-photo:hover::after { opacity: 1; }
    body.bv-edit .cat-photo { cursor: pointer; }

    /* Add-photo control (edit mode only) */
    .cat-photo-add {
      display: none;
      aspect-ratio: 4 / 3;
      border: 2px dashed rgba(232,148,26,0.5);
      border-radius: 4px;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 6px;
      padding: 10px;
    }
    body.bv-edit .cat-photo-add { display: flex; }
    .cat-photo-add button {
      background: rgba(232,148,26,0.12);
      border: 1px solid rgba(232,148,26,0.5);
      color: #E8941A;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 7px 4px;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .cat-photo-add button:hover { background: rgba(232,148,26,0.28); }
    .cat-photo-del {
      display: none;
      position: absolute;
      top: 4px; right: 4px;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: rgba(192,57,43,0.9);
      color: #fff;
      border: none;
      font-size: 13px;
      line-height: 1;
      cursor: pointer;
      z-index: 2;
    }
    body.bv-edit .cat-photo-del { display: block; }

    /* Zoom & reposition tool (edit mode only) */
    .cat-photo-pos {
      display: none;
      position: absolute;
      top: 4px; left: 4px;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: rgba(30,30,30,0.85);
      color: #fff;
      border: none;
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      z-index: 3;
      align-items: center;
      justify-content: center;
    }
    body.bv-edit .cat-photo-pos { display: flex; }
    .cat-photo.positioning { cursor: grab; z-index: 5; }
    .cat-photo.positioning.dragging { cursor: grabbing; }
    .cat-photo.positioning::after { display: none !important; }
    .cat-photo.positioning img { transition: none; }
    .cat-photo-pos-bar {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px;
      background: rgba(0,0,0,0.75);
      z-index: 6;
    }
    .cat-photo-pos-bar button {
      background: rgba(232,148,26,0.85);
      border: none;
      color: #1a1a1a;
      font-weight: 700;
      width: 24px; height: 24px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.85rem;
      line-height: 1;
    }
    .cat-photo-pos-bar button.done {
      width: auto;
      padding: 0 10px;
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .cat-photo-pos-zoom {
      color: #fff;
      font-size: 0.7rem;
      min-width: 34px;
      text-align: center;
    }

    /* Drag handle for reordering photos within a category (edit mode only) */
    .cat-photo-drag {
      display: none;
      position: absolute;
      bottom: 4px; right: 4px;
      width: 22px; height: 22px;
      border-radius: 4px;
      background: rgba(30,30,30,0.85);
      color: #fff;
      border: none;
      font-size: 13px;
      line-height: 1;
      cursor: grab;
      z-index: 4;
      align-items: center;
      justify-content: center;
    }
    body.bv-edit .cat-photo-drag { display: flex; }
    .cat-photo-drag:active { cursor: grabbing; }
    .cat-photo.dragging-tile { opacity: 0.35; }
    .cat-photo.drag-over { outline: 3px solid var(--orange); outline-offset: -3px; }
    .cat-photo-add.drag-over { outline: 3px solid var(--orange); outline-offset: -3px; }

    /* "Set as cover photo" button (edit mode only) */
    .cat-photo-cover {
      display: none;
      position: absolute;
      bottom: 4px; left: 4px;
      width: 22px; height: 22px;
      border-radius: 4px;
      background: rgba(30,30,30,0.85);
      color: #fff;
      border: none;
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      z-index: 4;
      align-items: center;
      justify-content: center;
    }
    body.bv-edit .cat-photo-cover { display: flex; }
    .cat-photo-cover:hover { background: rgba(232,148,26,0.9); color: #1a1a1a; }

    /* ─── REVIEWS ────────────────────────────────────────────── */
    #reviews {
      padding: 140px 0;
      background: var(--charcoal);
    }
    .reviews-header {
      text-align: center;
      margin-bottom: 24px;
    }
    .google-trust {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 64px;
    }
    .g-word {
      font-size: 1.3rem;
      font-weight: 800;
    }
    .g-word .Gc { color: #4285F4; }
    .g-word .Go { color: #DB4437; }
    .g-word .Go2 { color: #F4B400; }
    .g-word .Gg { color: #4285F4; }
    .g-word .Gl { color: #0F9D58; }
    .g-word .Ge { color: #DB4437; }
    .g-stars { font-size: 1.3rem; color: #F4B400; letter-spacing: 3px; }
    .g-score {
      font-family: var(--serif);
      font-size: 2.2rem;
      font-weight: 400;
      color: var(--white);
    }
    .g-count {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.4);
      letter-spacing: 1px;
    }

    /* Carousel */
    .carousel-outer { position: relative; overflow: hidden; }
    .carousel-track {
      display: flex;
      gap: 24px;
      transition: transform 0.55s var(--ease);
    }
    .review-card {
      width: calc(33.333% - 16px);
      min-width: calc(33.333% - 16px);
      flex-shrink: 0;
      background: var(--slate);
      border: 1px solid var(--border);
      padding: 36px 32px;
      position: relative;
    }
    .rc-quote {
      font-family: var(--serif);
      font-size: 3.5rem;
      color: var(--orange);
      opacity: 0.25;
      line-height: 0.6;
      margin-bottom: 16px;
    }
    .rc-text {
      font-family: var(--italic);
      font-size: 1.02rem;
      font-style: italic;
      font-weight: 300;
      color: rgba(255,255,255,0.75);
      line-height: 1.75;
      margin-bottom: 28px;
    }
    .rc-stars { color: #F4B400; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 16px; }
    .rc-reviewer {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .rc-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--white);
      flex-shrink: 0;
    }
    .rc-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--white);
    }
    .rc-location {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.35);
      letter-spacing: 1px;
    }

    .carousel-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 40px;
    }
    .c-btn {
      width: 46px;
      height: 46px;
      border: 1px solid var(--orange);
      background: transparent;
      color: var(--orange);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }
    .c-btn:hover { background: var(--orange); color: var(--black); }
    .c-dots { display: flex; gap: 6px; }
    .c-dot {
      width: 7px; height: 7px;
      background: rgba(255,255,255,0.2);
      cursor: pointer;
      transition: all 0.3s;
    }
    .c-dot.active {
      background: var(--orange);
      width: 22px;
    }
    .reviews-cta-wrap {
      text-align: center;
      margin-top: 40px;
    }

    /* ─── CORETEC PRODUCTS ────────────────────────────────────── */
    #coretec {
      padding: 140px 0 100px;
      background: var(--charcoal);
      position: relative;
      overflow: hidden;
    }
    #coretec::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 30% 20%, rgba(232,119,34,0.06) 0%, transparent 70%);
    }
    .coretec-header {
      text-align: center;
      margin-bottom: 60px;
      position: relative;
    }
    .coretec-header .body-text { margin: 0 auto; max-width: 620px; }
    .coretec-benefits {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 56px;
      position: relative;
    }
    .benefit-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 22px;
      border: 1px solid var(--border);
      background: rgba(232,119,34,0.05);
      font-family: var(--sans);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--orange);
    }
    .benefit-badge i { font-size: 1rem; }
    /* ── Tone-based collection cards ──────────────────────────── */
    .collections-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3px;
      margin-bottom: 56px;
      position: relative;
    }
    .collection-card {
      background: #0a0a0a;
      overflow: hidden;
      transition: transform 0.4s var(--ease), box-shadow 0.4s;
      display: flex;
      flex-direction: column;
      cursor: pointer;
    }
    .collection-card:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(0,0,0,0.55); }

    /* Photo / gradient header */
    .cc-photo-wrap {
      position: relative;
      height: 175px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .cc-photo {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 8s linear;
      display: block;
    }
    .collection-card:hover .cc-photo { transform: scale(1.06); }
    .cc-photo-gradient {
      width: 100%; height: 100%;
      transition: transform 8s linear;
    }
    .collection-card:hover .cc-photo-gradient { transform: scale(1.06); }
    .cc-photo-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.62) 100%);
    }
    .cc-tone-badge {
      position: absolute; bottom: 16px; left: 18px;
      font-family: var(--sans);
      font-size: 0.58rem; font-weight: 800; letter-spacing: 4px; text-transform: uppercase;
      color: rgba(255,255,255,0.92);
      background: rgba(0,0,0,0.55);
      padding: 5px 10px;
      backdrop-filter: blur(6px);
    }

    /* Color swatches row */
    .cc-swatches {
      display: flex;
      gap: 5px;
      padding: 11px 14px 4px;
      align-items: center;
      flex-wrap: wrap;
    }
    .cc-swatch-lbl {
      font-size: 0.54rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.22);
      margin-right: 3px;
    }
    .cc-swatch {
      width: 18px; height: 18px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.12);
      flex-shrink: 0;
      transition: transform 0.2s, border-color 0.2s;
      position: relative;
      cursor: default;
    }
    .cc-swatch:hover { transform: scale(1.3); border-color: rgba(255,255,255,0.55); z-index: 2; }
    .cc-swatch::after {
      content: attr(title);
      position: absolute; bottom: calc(100% + 5px); left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.92); color: #fff;
      font-family: var(--sans); font-size: 0.56rem; white-space: nowrap; padding: 3px 7px;
      opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 10;
    }
    .cc-swatch:hover::after { opacity: 1; }

    /* Card body */
    .collection-card-body { padding: 10px 14px 0; flex: 1; }
    .collection-tag {
      display: inline-block;
      font-size: 0.56rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--orange); margin-bottom: 6px;
    }
    .collection-card-body h3 {
      font-family: var(--serif);
      font-size: 1.05rem; font-weight: 500;
      color: var(--white); margin-bottom: 7px;
      line-height: 1.25;
    }
    .collection-card-body p {
      font-size: 0.76rem; color: rgba(255,255,255,0.42);
      line-height: 1.65; margin-bottom: 0;
    }
    .cc-room-tip {
      font-size: 0.68rem !important;
      color: rgba(255,255,255,0.24) !important;
      font-style: italic;
      margin-top: 6px !important;
      line-height: 1.4 !important;
    }
    .cc-product-name {
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 1px;
      color: rgba(255,255,255,0.28);
      margin-top: 8px;
      font-style: normal;
    }

    /* Bottom CTA — full-width tap target */
    .cc-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      margin-top: 14px;
      background: rgba(232,119,34,0.07);
      border-top: 1px solid var(--border);
      font-family: var(--sans);
      font-size: 0.62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--orange);
      transition: background 0.25s, color 0.25s;
      text-decoration: none;
    }
    .cc-cta:hover { background: var(--orange); color: var(--black); }
    .cc-cta .cc-cta-arrow { transition: transform 0.25s; flex-shrink: 0; }
    .cc-cta:hover .cc-cta-arrow { transform: translateX(4px); }

    @media (max-width: 1024px) {
      .collections-grid { grid-template-columns: repeat(2, 1fr); gap: 3px; }
      .cc-photo-wrap { height: 200px; }
    }
    @media (max-width: 600px) {
      .collections-grid { grid-template-columns: 1fr; gap: 4px; }
      .cc-photo-wrap { height: 220px; }
    }
    .coretec-ctas {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      position: relative;
    }
    .btn-ghost-light {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 36px;
      background: transparent;
      color: var(--orange);
      font-family: var(--sans);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: 2px solid var(--orange);
      cursor: pointer;
      transition: background 0.3s, color 0.3s, transform 0.3s;
    }
    .btn-ghost-light:hover {
      background: var(--orange);
      color: var(--black);
      transform: translateY(-2px);
    }

    /* ─── VISUALIZER ─────────────────────────────────────────── */
    #visualizer {
      padding: 140px 0;
      background: var(--black);
      position: relative;
      overflow: hidden;
    }
    #visualizer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 70% 50%, rgba(232,119,34,0.05) 0%, transparent 60%);
    }
    .viz-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
    }
    .viz-steps-list {
      display: flex;
      flex-direction: column;
      gap: 28px;
      margin: 32px 0;
    }
    .viz-step {
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }
    .viz-num {
      font-family: var(--serif);
      font-size: 1.6rem;
      font-weight: 400;
      color: var(--orange);
      opacity: 0.7;
      min-width: 32px;
      line-height: 1.1;
    }
    .viz-step-text strong {
      display: block;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 4px;
      letter-spacing: 0.5px;
    }
    .viz-step-text p {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.45);
      line-height: 1.65;
    }
    .viz-card {
      border: 1px solid var(--border);
      padding: 52px 44px;
      text-align: center;
      background: rgba(232,119,34,0.04);
      backdrop-filter: blur(8px);
    }
    .viz-icon { font-size: 3.5rem; margin-bottom: 20px; display: block; }
    .viz-card h3 {
      font-family: var(--serif);
      font-size: 1.7rem;
      font-weight: 500;
      color: var(--white);
      margin-bottom: 12px;
    }
    .viz-card p {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.7;
      margin-bottom: 28px;
    }
    .viz-card .btn-orange { width: 100%; justify-content: center; }

    /* ─── WARRANTY BAND ──────────────────────────────────────── */
    #warranty {
      padding: 90px 0;
      background: var(--orange);
    }
    .warranty-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }
    .warranty-left h2 {
      font-family: var(--serif);
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 500;
      color: var(--black);
      margin-bottom: 12px;
    }
    .warranty-left p {
      font-size: 1rem;
      color: rgba(0,0,0,0.65);
      max-width: 500px;
      line-height: 1.7;
    }
    .warranty-badge {
      display: flex;
      align-items: center;
      gap: 16px;
      background: rgba(0,0,0,0.12);
      padding: 24px 36px;
      flex-shrink: 0;
    }
    .w-num {
      font-family: var(--serif);
      font-size: 5rem;
      font-weight: 400;
      color: var(--black);
      line-height: 1;
    }
    .w-icon {
      font-size: 3.4rem;
      color: var(--black);
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .w-info strong {
      display: block;
      font-size: 1rem;
      font-weight: 700;
      color: var(--black);
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .w-info span {
      font-size: 0.8rem;
      color: rgba(0,0,0,0.55);
    }

    /* ─── ABOUT ──────────────────────────────────────────────── */
    #about {
      padding: 96px 0;
      background: var(--charcoal);
    }
    .about-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .about-img-wrap { position: relative; }
    .about-photo {
      width: 100%;
      aspect-ratio: 3/4;
      object-fit: cover;
    }
    .about-accent-box {
      position: absolute;
      bottom: -24px;
      right: -24px;
      background: var(--orange);
      padding: 24px 28px;
      text-align: center;
    }
    .about-accent-box .big-num {
      font-family: var(--serif);
      font-size: 3rem;
      font-weight: 400;
      color: var(--black);
      line-height: 1;
      display: block;
    }
    .about-accent-box .big-label {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(0,0,0,0.7);
    }
    .about-content .body-text { max-width: 100%; margin-bottom: 24px; }

    /* ── About Story (restructured for readability) ── */
    .about-story { margin: 0 0 32px; }
    .about-story p { font-size: 0.98rem; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0 0 12px; max-width: 100%; font-weight: 300; }
    .about-story p strong { color: var(--white); font-weight: 600; }
    .about-story p em { font-style: italic; color: rgba(255,255,255,0.95); }
    .about-story .pull { font-family: var(--italic, var(--serif)); font-style: italic; font-size: 1.18rem; line-height: 1.4; color: var(--orange-light); border-left: 3px solid var(--orange); padding: 4px 0 4px 16px; margin: 16px 0; font-weight: 400; }
    .about-story .pull strong { color: var(--orange); font-weight: 600; }
    .about-story .about-divider { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,148,26,0.4), transparent); margin: 22px 0; width: 70%; }
    .about-story .about-mission { font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; color: var(--white); font-weight: 500; margin: 14px 0 16px; padding: 14px 18px; background: linear-gradient(90deg, rgba(232,148,26,0.10), rgba(232,148,26,0)); border-left: 4px solid var(--orange); }
    .about-story .about-signoff { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--orange-light); letter-spacing: 0.01em; margin-top: 16px; text-align: left; }
    @media (max-width: 768px) {
      .about-story p { font-size: 1rem; line-height: 1.78; }
      .about-story .pull { font-family: var(--italic, var(--serif)); font-style: italic; font-size: 1.18rem; line-height: 1.4; color: var(--orange-light); border-left: 3px solid var(--orange); padding: 4px 0 4px 16px; margin: 16px 0; font-weight: 400; }
      .about-story .about-mission { font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; color: var(--white); font-weight: 500; margin: 14px 0 16px; padding: 14px 18px; background: linear-gradient(90deg, rgba(232,148,26,0.10), rgba(232,148,26,0)); border-left: 4px solid var(--orange); }
      .about-story .about-signoff { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--orange-light); letter-spacing: 0.01em; margin-top: 16px; text-align: left; }
    }

    .about-signature {
      font-family: var(--italic);
      font-size: 1.8rem;
      font-style: italic;
      color: var(--orange);
      margin: 8px 0 28px;
    }
    .about-values {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin: 32px 0;
    }
    .av-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .av-item:last-child { border-bottom: none; }
    .av-icon { color: var(--orange); font-size: 1rem; margin-top: 2px; }
    .av-text strong {
      display: block;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 4px;
    }
    .av-text p {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.45);
      line-height: 1.65;
    }

    /* ─── SERVICE AREAS ──────────────────────────────────────── */
    #areas {
      padding: 140px 0;
      background: var(--black);
    }
    .areas-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }
    .area-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 28px 0;
    }
    .area-pill {
      padding: 9px 20px;
      border: 1px solid var(--border);
      font-size: 0.8rem;
      font-weight: 500;
      color: rgba(255,255,255,0.65);
      letter-spacing: 1px;
      transition: all 0.3s;
    }
    .area-pill:hover {
      border-color: var(--orange);
      color: var(--orange);
    }
    .areas-map-frame {
      width: 100%;
      height: 420px;
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }
    .areas-map-frame iframe {
      width: 100%;
      height: 100%;
      border: none;
      filter: invert(0.9) hue-rotate(180deg) saturate(0.4);
    }

    /* ─── FINAL CTA ──────────────────────────────────────────── */
    #cta {
      padding: 160px 0;
      background: var(--charcoal);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    #cta::before {
      content: '';
      position: absolute;
      top: -200px;
      left: 50%;
      transform: translateX(-50%);
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(232,119,34,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .cta-inner { position: relative; }
    .cta-inner .section-title { margin-bottom: 16px; }
    .cta-inner .body-text {
      margin: 0 auto 48px;
      font-size: 1.05rem;
    }
    .cta-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .cta-phone {
      font-family: var(--sans);
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      padding: 15px 35px;
      border: 1px solid rgba(255,255,255,0.2);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: all 0.3s;
    }
    .cta-phone:hover { border-color: var(--orange); color: var(--orange); }

    /* ─── FOOTER ─────────────────────────────────────────────── */
    footer {
      background: #080808;
      padding: 72px 0 32px;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.6fr;
      gap: 52px;
      margin-bottom: 52px;
    }
    .f-logo { height: 46px; margin-bottom: 18px; }
    .f-about {
      font-size: 0.85rem;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(255,255,255,0.38);
      margin-bottom: 24px;
    }
    .f-socials { display: flex; gap: 10px; }
    .f-social {
      width: 36px; height: 36px;
      border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.45);
      font-size: 0.85rem;
      transition: all 0.3s;
    }
    .f-social:hover { border-color: var(--orange); color: var(--orange); }
    .f-heading {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 20px;
    }
    .f-links { display: flex; flex-direction: column; gap: 10px; list-style: none; }
    .f-links a {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.4);
      transition: color 0.3s;
    }
    .f-links a:hover { color: var(--orange); }
    .f-contact { display: flex; flex-direction: column; gap: 14px; }
    .f-contact-row {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .f-contact-row i { color: var(--orange); font-size: 0.82rem; margin-top: 3px; }
    .f-contact-row span, .f-contact-row a {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.4);
      line-height: 1.5;
      transition: color 0.3s;
    }
    .f-contact-row a:hover { color: var(--orange); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.05);
      padding-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-bottom p {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.2);
    }

    /* ─── RESPONSIVE ─────────────────────────────────────────── */
    @media (max-width: 1024px) {
      .hero-left { padding: 120px 32px 60px; }
      .services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
      .cat-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .promise-grid { grid-template-columns: repeat(2, 1fr); }
      .services-header { grid-template-columns: 1fr; gap: 24px; }
      .collections-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
      .container { padding: 0 20px; }
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .nav-phone { display: none; }
      .philosophy-inner, .about-inner, .viz-inner, .areas-inner, .warranty-inner { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: 1fr; }
      .cat-grid { grid-template-columns: 1fr; }
      .carousel-track .review-card { width: 100%; min-width: 100%; }
      .promise-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .about-accent-box { right: 0; bottom: 0; }
      .collections-grid { grid-template-columns: 1fr; }
      .coretec-benefits { gap: 8px; }
      .benefit-badge { padding: 10px 16px; font-size: 0.7rem; }
    }

    @media (max-width: 480px) {
      .hero-left { padding: 100px 20px 48px; }
      .promise-grid { grid-template-columns: 1fr; }
      .form-row-2 { grid-template-columns: 1fr; }
      .cat-name { font-size: 1.35rem; }
    }

    /* ── Tablet nav fitment (7 links must fit) ──────────────── */
    @media (max-width: 1180px) {
      .nav-links { gap: 18px; }
      .nav-links a { font-size: 0.7rem; letter-spacing: 1.2px; }
    }

    /* ── Mobile polish for new components ───────────────────── */
    @media (max-width: 768px) {
      #process, #care, #faq { padding: 90px 0; }
      .process-header, .care-header, .faq-header { margin-bottom: 48px; }
      .process-step { padding: 28px 22px; }
      .care-cell { padding: 28px 22px; }
      .faq-q { font-size: 1rem; padding: 22px 0; gap: 16px; }
      .faq-a p { font-size: 0.92rem; }
      .care-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 8px;
        margin: 0 -20px 40px;
        padding-left: 20px;
        padding-right: 20px;
        scrollbar-width: none;
      }
      .care-tabs::-webkit-scrollbar { display: none; }
      .care-tab { flex: 0 0 auto; }
      .offer-stack { padding: 18px 16px; }
      .offer-stack li { font-size: 0.9rem; }
      .hero-form-card { padding: 28px 22px; }
      .hero-form-card h3 { font-size: 1.5rem; }
      .hero-headline { font-size: clamp(1.95rem, 7vw, 2.4rem); }
      .hero-sub { font-size: 1rem; }
      /* Sticky CTA: respect iPhone home-bar safe area */
      .sticky-cta { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
      body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    }

    @media (max-width: 480px) {
      .hero-form-card h3 { font-size: 1.25rem; }
      .form-note { font-size: 0.85rem; }
      .form-field label { font-size: 0.8rem; }
      .form-field input, .form-field select, .form-field textarea { font-size: 1.05rem; }
      .form-submit { padding: 18px; font-size: 0.85rem; letter-spacing: 1.5px; }
      .care-pro-tip { padding: 28px 22px; }
    }

    /* Reduce-motion respect */
    @media (prefers-reduced-motion: reduce) {
      .reveal, .reveal-l, .reveal-r { opacity: 1 !important; transform: none !important; }
      .hero-stage-photo { transition: opacity 0.4s !important; transform: none !important; }
      * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    }

    /* ═══════════════════════════════════════════════════════════
       NEW COMPONENTS (added 2026-04 — luxury hero, sticky CTA,
       offer stack, concierge process, care guide, FAQ)
       ═══════════════════════════════════════════════════════════ */

    /* ─── HERO PHOTO STAGE (replaces van animation) ──────────── */
    .hero-stage {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background: var(--black);
    }
    .hero-stage-photo {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transform: scale(1.06);
      transition: opacity 1.6s var(--ease), transform 9s linear;
      will-change: opacity, transform;
    }
    .hero-stage-photo.is-active {
      opacity: 1;
      transform: scale(1);
    }
    .hero-stage::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(13,13,13,0.78) 0%, rgba(13,13,13,0.6) 45%, rgba(13,13,13,0.72) 100%);
      pointer-events: none;
      z-index: 2;
    }
    .hero-stage-overlay {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin: 10px 0 6px;
    }
    .hero-stage-quote {
      font-family: var(--italic);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.3rem, 2.2vw, 1.95rem);
      line-height: 1.45;
      color: rgba(255,255,255,0.94);
      max-width: 520px;
      margin: 0 auto;
      text-shadow: 0 2px 18px rgba(0,0,0,0.45);
    }
    .hero-stage-attrib {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--orange);
    }
    .hero-stage-trust {
      display: flex;
      gap: 22px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 16px 22px;
      background: rgba(13,13,13,0.65);
      backdrop-filter: blur(10px);
      border: 1px solid var(--border);
    }
    .hero-stage-trust .ts-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
    }
    .hero-stage-trust .ts-item i { color: var(--orange); }

    /* ─── HERO OFFER STACK (Hormozi grand-slam visualization) ─ */
    .offer-stack {
      margin-top: 22px;
      padding: 20px 22px;
      background: linear-gradient(135deg, rgba(232,148,26,0.07) 0%, rgba(253,250,245,0.6) 100%);
      border: 1px solid rgba(232,148,26,0.18);
      border-left: 3px solid var(--orange);
    }
    .offer-stack-title {
      font-size: 0.63rem;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 12px;
    }
    .offer-stack ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }
    .offer-stack li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 0.9rem;
      color: rgba(13,13,13,0.82);
      line-height: 1.45;
    }
    .offer-stack li i {
      color: var(--orange);
      font-size: 0.78rem;
      width: 14px;
      margin-top: 4px;
      flex-shrink: 0;
    }
    .offer-stack li strong { font-weight: 600; color: var(--black); }
    .offer-stack-value {
      font-size: 0.72rem;
      color: var(--orange);
      font-weight: 700;
      margin-left: 4px;
    }

    /* ─── STICKY MOBILE CTA BAR (conversion lift) ────────────── */
    .sticky-cta {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 880;
      background: rgba(13,13,13,0.96);
      backdrop-filter: blur(14px);
      border-top: 1px solid var(--border);
      padding: 10px 14px;
      gap: 8px;
      box-shadow: 0 -10px 40px rgba(0,0,0,0.45);
    }
    .sticky-cta a {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 12px;
      font-family: var(--sans);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      transition: transform 0.2s, background 0.2s;
    }
    .sticky-cta .sc-call {
      background: transparent;
      color: var(--orange);
      border: 1px solid var(--orange);
    }
    .sticky-cta .sc-quote {
      background: var(--orange);
      color: var(--black);
    }
    .sticky-cta a:active { transform: translateY(1px); }
    @media (max-width: 768px) {
      .sticky-cta { display: flex; }
      body { padding-bottom: 76px; }
    }

    /* ─── CREDENTIALS STRIP ─────────────────────────────────── */
    #credentials {
      padding: 72px 0;
      background: var(--black);
      border-bottom: 1px solid var(--border);
      text-align: center;
    }
    .cred-grid {
      margin-top: 28px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 24px;
    }
    .cred-card {
      flex: 0 1 340px;
      padding: 28px 26px 26px;
      border: 1px solid var(--border);
      background: rgba(232,119,34,0.035);
    }
    .cred-seal {
      height: 120px;
      display: flex; align-items: center; justify-content: center;
      background: #fff;
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 20px;
    }
    .cred-seal img { max-height: 100%; max-width: 100%; display: block; }
    .cred-card h3 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: 1.2rem;
      color: var(--white);
      margin-bottom: 8px;
    }
    .cred-card p {
      font-size: 0.92rem;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(255,255,255,0.7);
    }
    .cred-card p strong { color: var(--white); font-weight: 500; }
    @media (max-width: 720px) {
      #credentials { padding: 56px 0; }
      .cred-card { flex-basis: 100%; }
    }

    /* ─── PROCESS SECTION — "The Bayview Process" (by request) ─── */
    #process {
      padding: 150px 0 140px;
      background: var(--black);
      position: relative;
      overflow: hidden;
    }
    #process::before {
      content: '';
      position: absolute;
      top: -160px; left: 50%;
      transform: translateX(-50%);
      width: 1000px; height: 640px;
      background: radial-gradient(ellipse, rgba(232,119,34,0.06) 0%, transparent 68%);
      pointer-events: none;
    }
    .bp-layout {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 96px;
      align-items: start;
      position: relative;
    }
    .bp-intro { position: sticky; top: 150px; }
    .bp-lede {
      margin-top: 26px;
      font-size: 1.08rem;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(255,255,255,0.72);
    }
    .bp-lede + .bp-lede { margin-top: 16px; }
    .bp-capacity {
      margin-top: 40px;
      padding-top: 26px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 2.4px;
      text-transform: uppercase;
      color: var(--orange-pale);
    }
    .bp-capacity::before {
      content: '';
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 0 5px rgba(232,119,34,0.14);
      flex-shrink: 0;
    }

    /* ── Vertical journey ── */
    .bp-steps { list-style: none; margin: 0; padding: 0; position: relative; }
    .bp-steps::before {
      content: '';
      position: absolute;
      left: 28px; top: 28px; bottom: 60px;
      width: 1px;
      background: linear-gradient(180deg, rgba(232,119,34,0.45) 0%, rgba(232,119,34,0.12) 100%);
    }
    .bp-step {
      display: grid;
      grid-template-columns: 57px 1fr;
      gap: 30px;
      padding-bottom: 56px;
      position: relative;
    }
    .bp-step:last-child { padding-bottom: 0; }
    .bp-num {
      width: 57px; height: 57px;
      border-radius: 50%;
      border: 1px solid rgba(232,119,34,0.45);
      background: var(--black);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--serif);
      font-style: italic;
      font-size: 1.25rem;
      color: var(--orange);
      position: relative; z-index: 1;
      transition: background 0.5s var(--ease), color 0.5s var(--ease);
    }
    .bp-step:hover .bp-num { background: var(--orange); color: var(--black); }
    .bp-meta {
      display: inline-block;
      margin-bottom: 10px;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      color: var(--orange-pale);
      opacity: 0.85;
    }
    .bp-step h3 {
      font-family: var(--serif);
      font-size: 1.55rem;
      font-weight: 500;
      line-height: 1.25;
      color: var(--white);
      margin-bottom: 12px;
    }
    .bp-step p {
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(255,255,255,0.68);
      max-width: 54ch;
    }
    .bp-step p strong { color: rgba(255,255,255,0.92); font-weight: 500; }

    /* ── Fit + investment panel ── */
    .bp-fit {
      margin-top: 110px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.015);
    }
    .bp-fit-col { padding: 52px 52px 48px; }
    .bp-fit-col + .bp-fit-col {
      border-left: 1px solid var(--border);
      background: rgba(232,119,34,0.045);
    }
    .bp-fit h3 {
      font-family: var(--serif);
      font-size: 1.7rem;
      font-weight: 500;
      line-height: 1.25;
      color: var(--white);
      margin: 14px 0 28px;
    }
    .bp-fit h3 em { color: var(--orange); }
    .bp-checks { list-style: none; margin: 0; padding: 0; }
    .bp-checks li {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 16px;
      padding: 15px 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.65;
      color: rgba(255,255,255,0.8);
    }
    .bp-checks li:last-child { border-bottom: none; }
    .bp-checks i {
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1px solid rgba(232,119,34,0.5);
      color: var(--orange);
      font-size: 0.68rem;
      display: flex; align-items: center; justify-content: center;
      margin-top: 1px;
    }
    .bp-price {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 20px;
      padding: 18px 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .bp-price-name {
      font-family: var(--serif);
      font-size: 1.12rem;
      color: var(--white);
    }
    .bp-price-name small {
      display: block;
      margin-top: 4px;
      font-family: var(--sans);
      font-size: 0.82rem;
      font-weight: 300;
      color: rgba(255,255,255,0.58);
      line-height: 1.5;
    }
    .bp-price-amt {
      font-family: var(--serif);
      font-size: 1.35rem;
      color: var(--orange);
      white-space: nowrap;
    }
    .bp-price-amt span {
      font-family: var(--sans);
      font-size: 0.7rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      margin-right: 6px;
    }
    .bp-price-note {
      margin-top: 22px;
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(255,255,255,0.58);
    }

    /* ── Gracious close ── */
    .bp-close { text-align: center; margin-top: 90px; }
    .bp-close-quote {
      font-family: var(--italic);
      font-style: italic;
      font-size: 1.45rem;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(255,255,255,0.88);
      max-width: 640px;
      margin: 0 auto 34px;
    }
    .bp-close-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
      flex-wrap: wrap;
    }
    .bp-close-phone {
      color: rgba(255,255,255,0.72);
      font-size: 0.95rem;
      text-decoration: none;
      border-bottom: 1px solid rgba(232,119,34,0.4);
      padding-bottom: 2px;
    }
    .bp-close-phone:hover { color: var(--white); border-color: var(--orange); }

    /* ── Responsive ── */
    @media (max-width: 1000px) {
      .bp-layout { grid-template-columns: 1fr; gap: 64px; }
      .bp-intro { position: static; text-align: center; max-width: 640px; margin: 0 auto; }
      .bp-capacity { justify-content: center; }
      .bp-fit { grid-template-columns: 1fr; }
      .bp-fit-col + .bp-fit-col { border-left: none; border-top: 1px solid var(--border); }
    }
    @media (max-width: 720px) {
      #process { padding: 96px 0; }
      .bp-steps::before { left: 22px; }
      .bp-step { grid-template-columns: 45px 1fr; gap: 20px; padding-bottom: 44px; }
      .bp-num { width: 45px; height: 45px; font-size: 1.05rem; }
      .bp-step h3 { font-size: 1.32rem; }
      .bp-fit { margin-top: 80px; }
      .bp-fit-col { padding: 36px 24px; }
      .bp-fit h3 { font-size: 1.45rem; }
      .bp-close { margin-top: 64px; }
      .bp-close-quote { font-size: 1.2rem; }
      .bp-close-actions { flex-direction: column; gap: 18px; }
    }

    /* ─── CARE GUIDE SECTION ─────────────────────────────────── */
    #care {
      padding: 140px 0;
      background: var(--charcoal);
      position: relative;
    }
    .care-header {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 60px;
    }
    .care-header .body-text { margin: 18px auto 0; }

    .care-tabs {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 56px;
    }
    .care-tab {
      padding: 11px 24px;
      font-family: var(--sans);
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      background: transparent;
      color: rgba(255,255,255,0.55);
      border: 1px solid var(--hairline);
      cursor: pointer;
      transition: all 0.3s;
    }
    .care-tab:hover { color: var(--orange); border-color: var(--orange); }
    .care-tab.active {
      background: var(--orange);
      color: var(--black);
      border-color: var(--orange);
    }

    .care-panel { display: none; }
    .care-panel.active { display: block; }

    .care-panel-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr 1fr;
      gap: 1px;
      background: var(--hairline);
      border: 1px solid var(--hairline);
    }
    @media (max-width: 1024px) { .care-panel-grid { grid-template-columns: 1fr; } }

    .care-cell {
      background: var(--slate);
      padding: 38px 32px;
    }
    .care-cell h3 {
      font-family: var(--serif);
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--white);
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .care-cell h3 i { color: var(--orange); font-size: 1.05rem; }
    .care-emoji {
      display: inline-block;
      font-size: 1.45rem;
      line-height: 1;
      margin-right: 6px;
      filter: saturate(1.05);
    }
    .care-cell h4 {
      font-family: var(--sans);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--orange);
      margin: 22px 0 10px;
    }
    .care-cell h4:first-of-type { margin-top: 4px; }
    .care-cell ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .care-cell li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 0.86rem;
      color: rgba(255,255,255,0.7);
      line-height: 1.6;
      font-weight: 300;
    }
    .care-cell li i {
      color: var(--orange);
      font-size: 0.68rem;
      margin-top: 7px;
      flex-shrink: 0;
    }
    .care-cell.danger li i { color: #E66D52; }
    .care-cell strong { color: var(--white); font-weight: 600; }

    .care-pro-tip {
      margin-top: 56px;
      padding: 36px 40px;
      background: rgba(200,146,42,0.05);
      border: 1px solid var(--border);
      border-left: 3px solid var(--orange);
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 28px;
      align-items: center;
    }
    .care-pro-tip .cpt-icon {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: rgba(200,146,42,0.12);
      display: flex; align-items: center; justify-content: center;
      color: var(--orange);
      font-size: 1.3rem;
      flex-shrink: 0;
    }
    .care-pro-tip .cpt-text strong {
      display: block;
      font-family: var(--serif);
      font-size: 1.15rem;
      font-weight: 500;
      color: var(--white);
      margin-bottom: 4px;
    }
    .care-pro-tip .cpt-text p {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.6);
      line-height: 1.7;
      margin: 0;
    }
    @media (max-width: 768px) {
      .care-pro-tip { grid-template-columns: 1fr; text-align: center; }
      .care-pro-tip .cpt-icon { margin: 0 auto; }
    }

    /* ─── FAQ ACCORDION ──────────────────────────────────────── */
    #faq {
      padding: 140px 0;
      background: var(--black);
    }
    .faq-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 64px;
    }
    .faq-header .body-text { margin: 18px auto 0; }
    .faq-list {
      max-width: 880px;
      margin: 0 auto;
    }
    .faq-item {
      border-bottom: 1px solid var(--hairline);
      position: relative;
    }
    .faq-item-del {
      display: none;
      position: absolute;
      top: 14px;
      right: -36px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #c0392b;
      color: #fff;
      border: none;
      cursor: pointer;
      font-size: 0.85rem;
      line-height: 1;
      z-index: 5;
    }
    .faq-item-del:hover { background: #a93226; transform: scale(1.05); }
    body.bv-edit .faq-item-del { display: block; }
    @media (max-width: 900px) {
      .faq-item-del { right: 0; top: -2px; }
    }
    .faq-q {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      padding: 28px 0;
      background: transparent;
      border: none;
      cursor: pointer;
      text-align: left;
      font-family: var(--serif);
      font-size: 1.15rem;
      font-weight: 500;
      color: var(--white);
      transition: color 0.3s;
    }
    .faq-q:hover { color: var(--orange); }
    .faq-q .faq-i {
      width: 28px; height: 28px;
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      color: var(--orange);
      font-size: 0.8rem;
      flex-shrink: 0;
      transition: all 0.3s;
    }
    .faq-item.open .faq-q .faq-i { transform: rotate(45deg); background: var(--orange); color: var(--black); }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.45s var(--ease), padding 0.45s var(--ease);
    }
    .faq-item.open .faq-a {
      max-height: 600px;
      padding-bottom: 28px;
    }
    .faq-a p {
      font-size: 0.95rem;
      font-weight: 300;
      color: rgba(255,255,255,0.6);
      line-height: 1.85;
      max-width: 760px;
    }

/* ── carried over: cleanup shim ── */
  /* Constrain any user-uploaded photos so they don't blow out layout */
  .about-photo, .about-img-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  /* Ensure reasonable about-photo aspect & size */
  .about-img-wrap { max-width: 520px; }
  .about-img-wrap img { width: 100%; aspect-ratio: 4 / 5; }
  /* Hero carousel: prevent any data-URI from overflowing */
  .hero-stage-photo { background-size: cover !important; background-position: center !important; }
  /* Anchor scroll offset so nav doesn't overlap section headings */
  html { scroll-padding-top: 110px; }
  /* Belt & suspenders: hide any leftover editor-only elements if scripts re-add them */
  .img-ov, .sec-ctrls, .card-ctrls, #ed-bar, #ed-panel, #ed-toast { display: none !important; }

  /* ── Top nav: keep everything on ONE line, no overlap ── */
  #nav .container { max-width: min(1280px, 96vw); }
  .nav-wrap { gap: 14px; flex-wrap: nowrap; }
  .nav-links { gap: 14px; flex-wrap: nowrap; margin-left: 0; }
  .nav-links a {
    font-size: 0.78rem;
    padding: 6px 2px;
    letter-spacing: 1.2px;
    white-space: nowrap;
  }
  .nav-actions { gap: 12px; flex-wrap: nowrap; }
  .nav-phone { font-size: 0.86rem; font-weight: 600; white-space: nowrap; }
  .nav-cta { font-size: 0.72rem; padding: 10px 18px; min-height: 40px; white-space: nowrap; }
  /* Below ~1280px: shrink the logo a bit so links have room */
  @media (max-width: 1280px) {
    .nav-logo-img { height: 72px; }
    #nav.scrolled .nav-logo-img { height: 60px; }
    .nav-links { gap: 10px; }
    .nav-links a { font-size: 0.72rem; letter-spacing: 1px; }
  }
  /* ── Mobile drawer & sticky CTA: keep tap-friendly sizes ── */
  .hamburger { padding: 12px; min-width: 48px; min-height: 48px; }
  .drawer a { font-size: 20px; padding: 16px 8px; min-height: 48px; display: flex; align-items: center; }
  .sc-call, .sc-quote { font-size: 16px; padding: 14px 16px; min-height: 48px; }
  /* Form fields: easier to tap & read */
  .hero-form-card input, .hero-form-card select, .hero-form-card textarea {
    font-size: 16px; min-height: 44px;
  }


/* ═══════════════════════════════════════════════════════════════
   4-PAGE SITE COMPONENTS (rebuild 2026-11-12)
   Brand: orange #E87722 on black/charcoal; Playfair / Inter / Cormorant.
   ═══════════════════════════════════════════════════════════════ */
.sec { padding: 120px 0; position: relative; background: var(--black); }
.sec-alt { background: var(--charcoal); }
.sec-head { text-align: center; max-width: 700px; margin: 0 auto 64px; }
.sec-head .body-text { margin: 18px auto 0; }
.sec-cta { text-align: center; margin-top: 56px; }

/* Logo: canonical dark rectangular logo, no plate behind it */
.nav-logo-img, #nav.scrolled .nav-logo-img { height: 58px !important; max-height: 58px; width: auto; border-radius: 4px; }
.f-logo { height: 64px; border-radius: 4px; }
@media (max-width: 768px) { .nav-logo-img, #nav.scrolled .nav-logo-img { height: 46px !important; } }
.nav-links a.is-page { color: var(--orange); }

/* ── Home hero ── */
.home-hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: 170px 0 110px; overflow: hidden; background: var(--black); }
.home-hero .hh-photo { position: absolute; inset: 0; background-size: cover; background-position: center 70%; }
.home-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.72) 55%, rgba(13,13,13,.96) 100%); }
.home-hero .container { position: relative; z-index: 1; text-align: center; }
.hh-eyebrow { display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--orange-pale); margin-bottom: 22px; }
.home-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.08; color: var(--white); max-width: 960px; margin: 0 auto; }
.home-hero h1 em { color: var(--orange); font-style: italic; }
.hh-sub { font-size: 1.15rem; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,.82); max-width: 680px; margin: 26px auto 0; }
.hh-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.hh-proof { margin-top: 44px; display: flex; gap: 14px 28px; justify-content: center; flex-wrap: wrap; font-size: .76rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.75); }
.hh-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hh-proof i { color: var(--orange); }

/* ── Inner page hero ── */
.page-hero { position: relative; padding: 190px 0 110px; overflow: hidden; background: var(--black); }
.page-hero .ph-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,13,13,.94) 0%, rgba(13,13,13,.78) 50%, rgba(13,13,13,.45) 100%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.1; max-width: 760px; }
.page-hero h1 em { color: var(--orange); }
.page-hero .hh-sub { margin: 24px 0 0; max-width: 620px; }
.page-hero .hh-actions { justify-content: flex-start; }
@media (max-width: 720px) { .page-hero { padding: 150px 0 80px; } .page-hero::after { background: rgba(13,13,13,.8); } }

/* ── Trust stats ── */
.trust-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 56px; }
.ts-item { background: var(--black); padding: 28px 18px; text-align: center; }
.ts-num { font-family: var(--serif); font-size: 2rem; color: var(--orange); line-height: 1.1; }
.ts-label { margin-top: 8px; font-size: .72rem; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,.7); }
@media (max-width: 820px) { .trust-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Credentials (shared) ── */
.cred-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; }
.cred-card { flex: 0 1 340px; padding: 28px 26px 26px; border: 1px solid var(--border); background: rgba(232,119,34,.035); text-align: center; }
.cred-seal { height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; padding: 10px; margin-bottom: 20px; }
.cred-seal img { max-height: 100%; max-width: 100%; display: block; }
.cred-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--white); margin-bottom: 8px; }
.cred-card p { font-size: .92rem; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.72); }
.cred-card p strong { color: var(--white); font-weight: 500; }
@media (max-width: 720px) { .cred-card { flex-basis: 100%; } }

/* ── Two service doors ── */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.svc-card { position: relative; display: block; min-height: 460px; overflow: hidden; text-decoration: none; color: var(--white); border: 1px solid var(--border); }
.svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 6s var(--ease); }
.svc-card:hover img { transform: scale(1.05); }
.svc-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,.05) 15%, rgba(13,13,13,.7) 50%, rgba(13,13,13,.96) 100%); }
.svc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px; z-index: 1; }
.svc-body h3 { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; margin: 8px 0 10px; }
.svc-body p { font-weight: 300; line-height: 1.7; color: rgba(255,255,255,.8); max-width: 44ch; }
.svc-link { display: inline-flex; gap: 10px; align-items: center; margin-top: 18px; font-size: .78rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); }
@media (max-width: 820px) { .svc-grid { grid-template-columns: 1fr; } .svc-card { min-height: 380px; } }

/* ── Before / after slider ── */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ba-grid.two { grid-template-columns: repeat(2, 1fr); }
.ba-item { display: flex; flex-direction: column; }
.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border); background: var(--charcoal); --pos: 50%; user-select: none; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba .ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--white); transform: translateX(-1px); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--black); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; font-size: .8rem; box-shadow: 0 6px 18px rgba(0,0,0,.45); pointer-events: none; }
.ba-tag { position: absolute; top: 12px; padding: 5px 10px; font-size: .64rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; background: rgba(13,13,13,.78); color: var(--white); pointer-events: none; }
.ba-tag.b { left: 12px; } .ba-tag.a { right: 12px; color: var(--orange); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-cap { padding: 18px 2px 0; }
.ba-type { font-size: .7rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); }
.ba-cap h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 6px 0 6px; }
.ba-cap p { font-size: .92rem; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,.7); }
@media (max-width: 1000px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ba-grid, .ba-grid.two { grid-template-columns: 1fr; } }
.ba-filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.ba-filters button { background: transparent; border: 1px solid var(--border); color: rgba(255,255,255,.8); padding: 11px 22px; font: 600 .74rem/1 var(--sans); letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer; border-radius: 999px; }
.ba-filters button.on { background: var(--orange); color: var(--black); border-color: var(--orange); }

/* ── Feature grid (why Bayview / what we install) ── */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feat-grid.three { grid-template-columns: repeat(3, 1fr); }
.feat { padding: 34px 28px; border: 1px solid var(--border); background: rgba(255,255,255,.015); }
.feat-icon { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(232,119,34,.45); color: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 20px; }
.feat h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin-bottom: 10px; }
.feat p { font-size: .96rem; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.72); }
.feat-photo { margin: -34px -28px 24px; aspect-ratio: 16 / 10; overflow: hidden; }
.feat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } .feat-grid.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .feat-grid, .feat-grid.three { grid-template-columns: 1fr; } }

/* ── Split block (story / craftsmanship) ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split-photo { aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--border); }
.split-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split .body-text + .body-text { margin-top: 16px; }
.check-list { list-style: none; margin: 26px 0 0; padding: 0; }
.check-list li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 1rem; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.82); }
.check-list li:last-child { border-bottom: none; }
.check-list i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(232,119,34,.5); color: var(--orange); font-size: .68rem; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.check-list strong { color: var(--white); font-weight: 500; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } .split-photo { aspect-ratio: 4 / 3; } }

/* ── Craft photo strip ── */
.craft-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.craft { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--border); }
.craft img { width: 100%; height: 100%; object-fit: cover; display: block; }
.craft figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 16px; background: linear-gradient(0deg, rgba(13,13,13,.9), transparent); font-size: .74rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }
@media (max-width: 900px) { .craft-grid { grid-template-columns: 1fr 1fr; } }

/* ── Reviews grid (live Google reviews) ── */
.rv-score { display: flex; justify-content: center; align-items: center; gap: 14px; margin: -30px 0 44px; font-size: .9rem; color: rgba(255,255,255,.75); }
.rv-score b { font-family: var(--serif); font-size: 2rem; color: var(--white); font-weight: 500; }
.rv-score .stars { color: var(--orange); letter-spacing: 2px; }
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rv-grid .review-card { min-width: 0; height: 100%; }
.rv-fallback { text-align: center; padding: 40px 24px; border: 1px solid var(--border); grid-column: 1 / -1; }
.rv-fallback p { color: rgba(255,255,255,.75); margin-bottom: 20px; font-weight: 300; }
@media (max-width: 1000px) { .rv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rv-grid { grid-template-columns: 1fr; } }

/* ── Project inquiry form ── */
.pf-wrap { max-width: 860px; margin: 0 auto; background: rgba(255,255,255,.02); border: 1px solid var(--border); padding: 56px 56px 48px; }
.pf-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: rgba(232,119,34,.06); border-left: 3px solid var(--orange); font-size: .92rem; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.8); margin-bottom: 40px; }
.pf-note i { color: var(--orange); margin-top: 4px; }
.pf-part { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; margin: 8px 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pf-part span { color: var(--orange); font-style: italic; margin-right: 8px; }
.pf-q { border: none; padding: 0; margin: 0 0 30px; }
.pf-q legend, .pf-label { display: block; font-size: .98rem; font-weight: 500; color: var(--white); margin-bottom: 4px; }
.pf-hint { display: block; font-size: .82rem; font-weight: 300; color: rgba(255,255,255,.55); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.chip span { display: inline-block; padding: 13px 18px; min-height: 46px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: .92rem; color: rgba(255,255,255,.85); background: rgba(255,255,255,.02); transition: all .2s ease; cursor: pointer; }
.chip:hover span { border-color: rgba(232,119,34,.6); }
.chip input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--black); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--orange-light); outline-offset: 2px; }
.pf-wrap .form-field label { color: var(--white); }
.pf-wrap .form-field input, .pf-wrap .form-field select, .pf-wrap .form-field textarea { font-size: 16px; min-height: 48px; }
.pf-photos { margin: 6px 0 26px; font-size: .9rem; font-weight: 300; color: rgba(255,255,255,.75); }
.pf-photos i { color: var(--orange); margin-right: 8px; }
.pf-photos a { color: var(--orange); }
.pf-submit { width: 100%; justify-content: center; font-size: .86rem; padding: 18px; }
.pf-thanks { display: none; text-align: center; padding: 30px 10px; }
.pf-thanks h3 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin: 14px 0 12px; }
.pf-thanks p { color: rgba(255,255,255,.78); line-height: 1.8; font-weight: 300; }
@media (max-width: 720px) { .pf-wrap { padding: 34px 20px 30px; } .chip span { font-size: .9rem; padding: 12px 16px; } }

/* ── Story ── */
.story-quote { font-family: var(--italic); font-style: italic; font-size: 1.6rem; line-height: 1.45; color: var(--white); margin: 18px 0 22px; }
.story-sign { margin-top: 24px; font-family: var(--italic); font-style: italic; font-size: 1.2rem; color: var(--orange-light); }

/* ── Areas line ── */
.areas-line { margin-top: 18px; font-size: .86rem; line-height: 1.8; color: rgba(255,255,255,.6); }

/* Phones: logo gets the top bar; the sticky bottom bar carries Call + Start */
@media (max-width: 768px) {
  .nav-actions .nav-cta, .nav-actions .nav-phone { display: none !important; }
  .nav-logo-img, #nav.scrolled .nav-logo-img { height: 50px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PROJECT QUIZ ("Let's Talk About Your Project"), 2026-11-12
   Warm ivory quiz card on the dark page, one question per screen.
   ═══════════════════════════════════════════════════════════════ */
#start { background: radial-gradient(ellipse at 20% 0%, rgba(232,119,34,.14), transparent 55%), var(--black); }
.qz-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.qz-side { position: sticky; top: 120px; }
.qz-side .section-title { margin: 12px 0 16px; }
.qz-time { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(232,119,34,.12); border: 1px solid rgba(232,119,34,.4); color: var(--orange-pale); font-size: .8rem; font-weight: 600; letter-spacing: 1px; }
.qz-perks { list-style: none; padding: 0; margin: 28px 0 30px; }
.qz-perks li { display: flex; gap: 14px; align-items: center; padding: 12px 0; color: rgba(255,255,255,.85); font-size: .98rem; }
.qz-perks i { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: rgba(232,119,34,.14); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.qz-photos { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; height: 280px; overflow: hidden; }
.qz-photos img { min-height: 0; }
.qz-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.qz-photos img:first-child { grid-row: span 2; }

.qz-card { background: var(--light); color: var(--charcoal); border-radius: 22px; padding: 34px 36px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(232,119,34,.35); position: relative; overflow: hidden; }
.qz-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--orange), var(--orange-light), var(--gold-deep)); }
.qz-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.qz-count { font-size: .74rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-deep); }
.qz-back { background: none; border: 0; color: var(--warm-gray); font: 600 .85rem var(--sans); cursor: pointer; padding: 6px 0; visibility: hidden; }
.qz-back:hover { color: var(--orange); }
.qz-bar { height: 8px; background: #E8E2D8; border-radius: 999px; overflow: hidden; margin-bottom: 26px; }
.qz-bar span { display: block; height: 100%; width: 14%; background: linear-gradient(90deg, var(--orange), var(--orange-light)); border-radius: 999px; transition: width .45s var(--ease); }

.qz-step { display: none; border: 0; padding: 0; margin: 0; animation: qzIn .4s var(--ease); }
.qz-step.on { display: block; }
@keyframes qzIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.qz-emoji { font-size: 2.1rem; line-height: 1; margin-bottom: 12px; display: block; }
.qz-q { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; color: var(--black); margin: 0 0 6px; }
.qz-hint { font-size: .95rem; color: var(--warm-gray); margin: 0 0 22px; line-height: 1.6; }

.qz-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.qz-opts.three { grid-template-columns: repeat(3, 1fr); }
.qz-opt { position: relative; display: block; cursor: pointer; }
.qz-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qz-face { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; min-height: 120px; height: 100%; padding: 18px 14px; background: #fff; border: 2px solid #E3DCD1; border-radius: 16px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.qz-opt:hover .qz-face { transform: translateY(-3px); border-color: rgba(232,119,34,.6); box-shadow: 0 10px 24px rgba(164,80,26,.14); }
.qz-face i { font-size: 1.7rem; color: var(--orange); }
.qz-face b { font-size: 1rem; font-weight: 600; color: var(--charcoal); line-height: 1.3; }
.qz-face small { font-size: .8rem; color: var(--warm-gray); line-height: 1.4; }
.qz-opt.photo .qz-face { padding: 0 0 14px; overflow: hidden; justify-content: flex-start; }
.qz-opt.photo img { width: 100%; height: 130px; object-fit: cover; display: block; }
.qz-opt input:checked + .qz-face { border-color: var(--orange); background: #FFF6EE; box-shadow: 0 0 0 4px rgba(232,119,34,.18); }
.qz-opt input:checked + .qz-face::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font-size: .8rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.qz-opt input:focus-visible + .qz-face { outline: 3px solid var(--orange); outline-offset: 2px; }
.qz-dollars { font-family: var(--serif); font-size: 1.35rem; color: var(--orange); letter-spacing: 2px; }

.qz-card .form-field label { color: var(--charcoal); }
.qz-card .form-field input, .qz-card .form-field select, .qz-card .form-field textarea { background: #fff; border: 2px solid #E3DCD1; color: var(--charcoal); border-radius: 12px; font-size: 16px; min-height: 50px; }
.qz-card .form-field input:focus, .qz-card .form-field select:focus, .qz-card .form-field textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(232,119,34,.15); }
.qz-card .form-field textarea { min-height: 130px; }
.qz-card .pf-photos { color: var(--warm-gray); }
.qz-next { margin-top: 22px; width: 100%; justify-content: center; font-size: .86rem; padding: 17px; border-radius: 12px; }
.qz-skip { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--warm-gray); font: 500 .88rem var(--sans); cursor: pointer; text-decoration: underline; }
.qz-cheer { min-height: 22px; margin-top: 14px; text-align: center; font-size: .92rem; font-weight: 600; color: var(--gold-deep); }
.qz-card .form-privacy { color: var(--warm-gray); text-align: center; margin-top: 12px; }
.qz-card .pf-thanks { color: var(--charcoal); }
.qz-card .pf-thanks h3 { color: var(--black); }
.qz-card .pf-thanks p { color: var(--warm-gray); }
.qz-confetti { font-size: 3rem; display: block; margin-bottom: 6px; }

@media (max-width: 1000px) {
  .qz-layout { grid-template-columns: 1fr; gap: 32px; }
  .qz-side { position: static; text-align: center; }
  .qz-perks { display: none; }
  .qz-photos { display: none; }
}
@media (max-width: 600px) {
  .qz-card { padding: 28px 18px 24px; border-radius: 18px; }
  .qz-opts.three { grid-template-columns: repeat(2, 1fr); }
  .qz-face { min-height: 104px; }
  .qz-opt.photo img { height: 100px; }
}
/* Edit Mode: show every question at once so all of it can be edited */
html.bv-edit .qz-step { display: block !important; margin-bottom: 34px; padding-bottom: 24px; border-bottom: 2px dashed #E3DCD1; }
html.bv-edit .pf-thanks { display: block !important; }

.qz-card.pf-wrap { width: 100%; max-width: none; margin: 0; }

/* Quiz: honest note when "The lowest price" is chosen */
.qz-note { display: flex; gap: 14px; margin-top: 18px; padding: 18px 18px 20px; background: #FFF6EE; border: 2px solid rgba(232,119,34,.35); border-radius: 16px; animation: qzIn .35s var(--ease); }
.qz-note[hidden] { display: none; }
.qz-note > i { color: var(--orange); font-size: 1.2rem; margin-top: 3px; }
.qz-note b { display: block; color: var(--black); font-size: 1rem; margin-bottom: 6px; }
.qz-note p { color: var(--warm-gray); font-size: .94rem; line-height: 1.65; margin: 0 0 14px; }
.qz-note .btn-orange { border-radius: 10px; font-size: .78rem; padding: 13px 18px; }
html.bv-edit .qz-note[hidden] { display: flex !important; }

/* ═══ QUIZ STYLE VARIANTS (add one class to <section id="start">) ═══
   qzv-luxe     : dark card, full-bleed photo tiles, orange glow
   qzv-showroom : quiz floats on a big project photo, frosted glass
   qzv-chat     : feels like texting with the Bayview team          */
#start.qzv-luxe .qz-layout, #start.qzv-showroom .qz-layout, #start.qzv-chat .qz-layout { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; gap: 34px; }
#start.qzv-luxe .qz-side, #start.qzv-showroom .qz-side, #start.qzv-chat .qz-side { position: static; text-align: center; }
#start.qzv-luxe .qz-perks, #start.qzv-showroom .qz-perks, #start.qzv-chat .qz-perks { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; margin: 18px 0 0; }
#start.qzv-luxe .qz-perks li, #start.qzv-showroom .qz-perks li, #start.qzv-chat .qz-perks li { padding: 4px 0; font-size: .88rem; }
#start.qzv-luxe .qz-perks i, #start.qzv-showroom .qz-perks i, #start.qzv-chat .qz-perks i { width: 28px; height: 28px; font-size: .8rem; }
#start.qzv-luxe .qz-photos, #start.qzv-showroom .qz-photos, #start.qzv-chat .qz-photos { display: none; }

/* B · Dark Luxe */
#start.qzv-luxe .qz-card { background: linear-gradient(160deg, #222 0%, #151515 100%); color: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(232,119,34,.45), 0 0 60px rgba(232,119,34,.12); }
#start.qzv-luxe .qz-q { color: #fff; }
#start.qzv-luxe .qz-hint, #start.qzv-luxe .qz-back { color: rgba(255,255,255,.6); }
#start.qzv-luxe .qz-count { color: var(--orange-light); }
#start.qzv-luxe .qz-bar { background: rgba(255,255,255,.1); }
#start.qzv-luxe .qz-face { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
#start.qzv-luxe .qz-face b { color: #fff; }
#start.qzv-luxe .qz-face small { color: rgba(255,255,255,.55); }
#start.qzv-luxe .qz-opt input:checked + .qz-face { background: rgba(232,119,34,.16); border-color: var(--orange); box-shadow: 0 0 0 4px rgba(232,119,34,.22), 0 0 30px rgba(232,119,34,.25); }
#start.qzv-luxe .qz-opt.photo .qz-face { position: relative; min-height: 190px; padding: 0; justify-content: flex-end; }
#start.qzv-luxe .qz-opt.photo img { position: absolute; inset: 0; height: 100%; }
#start.qzv-luxe .qz-opt.photo .qz-face::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(13,13,13,.9)); }
#start.qzv-luxe .qz-opt.photo b, #start.qzv-luxe .qz-opt.photo small { position: relative; z-index: 1; }
#start.qzv-luxe .qz-opt.photo b { font-family: var(--serif); font-size: 1.25rem; padding: 0 12px; }
#start.qzv-luxe .qz-opt.photo small { padding: 0 12px 14px; margin-top: -6px; }
#start.qzv-luxe .qz-opt.photo b:last-child { padding-bottom: 16px; }
#start.qzv-luxe .qz-card .form-field label { color: rgba(255,255,255,.8); }
#start.qzv-luxe .qz-card .form-field input, #start.qzv-luxe .qz-card .form-field select, #start.qzv-luxe .qz-card .form-field textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
#start.qzv-luxe .qz-note { background: rgba(232,119,34,.1); }
#start.qzv-luxe .qz-note b { color: #fff; } #start.qzv-luxe .qz-note p, #start.qzv-luxe .qz-card .pf-photos, #start.qzv-luxe .qz-card .form-privacy { color: rgba(255,255,255,.65); }
#start.qzv-luxe .qz-cheer { color: var(--orange-light); }
#start.qzv-luxe .pf-thanks h3 { color: #fff; } #start.qzv-luxe .pf-thanks p { color: rgba(255,255,255,.7); }

/* C · Showroom */
#start.qzv-showroom { background: var(--black); padding: 140px 0; position: relative; overflow: hidden; }
#start .qz-bg { display: none; }
#start.qzv-showroom .qz-bg { display: block; position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; }
#start.qzv-showroom::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(13,13,13,.72), rgba(13,13,13,.86)); z-index: 0; pointer-events: none; }
#start.qzv-showroom > .container { position: relative; z-index: 1; }
@media (max-width: 1000px) { #start.qzv-showroom .qz-bg { background-attachment: scroll; } #start.qzv-showroom { padding: 96px 0; } }
#start.qzv-showroom .qz-card { background: rgba(255,255,255,.1); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); color: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.25); }
#start.qzv-showroom .qz-q { color: #fff; }
#start.qzv-showroom .qz-hint, #start.qzv-showroom .qz-back { color: rgba(255,255,255,.75); }
#start.qzv-showroom .qz-count { color: var(--orange-pale); }
#start.qzv-showroom .qz-bar { background: rgba(255,255,255,.2); }
#start.qzv-showroom .qz-face { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
#start.qzv-showroom .qz-face b { color: #fff; } #start.qzv-showroom .qz-face small { color: rgba(255,255,255,.7); }
#start.qzv-showroom .qz-face i { color: var(--orange-light); }
#start.qzv-showroom .qz-opt input:checked + .qz-face { background: rgba(232,119,34,.35); border-color: var(--orange-light); }
#start.qzv-showroom .qz-card .form-field label { color: #fff; }
#start.qzv-showroom .qz-note { background: rgba(13,13,13,.5); } #start.qzv-showroom .qz-note b { color: #fff; } #start.qzv-showroom .qz-note p { color: rgba(255,255,255,.75); }
#start.qzv-showroom .qz-card .pf-photos, #start.qzv-showroom .qz-card .form-privacy, #start.qzv-showroom .qz-cheer { color: rgba(255,255,255,.8); }
#start.qzv-showroom .pf-thanks h3 { color: #fff; } #start.qzv-showroom .pf-thanks p { color: rgba(255,255,255,.8); }

/* D · Text Chat */
#start.qzv-chat .qz-layout { max-width: 640px; }
#start.qzv-chat .qz-card { background: #F2EEE7; border-radius: 28px; padding: 0 0 26px; }
#start.qzv-chat .qz-card::before { display: none; }
#start.qzv-chat .qz-form { padding: 0 22px; }
#start.qzv-chat .qz-top { margin: 0 -22px 0; padding: 16px 22px; background: #1C1C1C; color: #fff; border-radius: 28px 28px 0 0; }
#start.qzv-chat .qz-top::after { content: 'Bayview Flooring Team'; order: -1; font: 600 .95rem var(--sans); color: #fff; margin-right: auto; padding-left: 46px; position: relative; }
#start.qzv-chat .qz-top::before { content: '\f015'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 22px; top: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
#start.qzv-chat .qz-top { position: relative; }
#start.qzv-chat .qz-back { order: 1; color: rgba(255,255,255,.7); }
#start.qzv-chat .qz-count { color: var(--orange-light); order: 2; }
#start.qzv-chat .qz-bar { margin: 0 -22px 22px; border-radius: 0; height: 5px; }
#start.qzv-chat .qz-emoji { display: none; }
#start.qzv-chat .qz-q { display: inline-block; max-width: 88%; background: #fff; color: var(--charcoal); font-family: var(--sans); font-weight: 500; font-size: 1.12rem; line-height: 1.45; padding: 14px 18px; border-radius: 20px 20px 20px 6px; box-shadow: 0 2px 6px rgba(0,0,0,.06); margin-bottom: 8px; }
#start.qzv-chat .qz-hint { display: inline-block; max-width: 88%; background: #fff; color: var(--warm-gray); font-size: .92rem; padding: 10px 16px; border-radius: 6px 20px 20px 20px; margin-bottom: 18px; }
#start.qzv-chat .qz-opts, #start.qzv-chat .qz-opts.three { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
#start.qzv-chat .qz-face { flex-direction: row; min-height: 0; padding: 12px 18px; border-radius: 999px; gap: 10px; background: #fff; border: 2px solid var(--orange); }
#start.qzv-chat .qz-face i { font-size: 1rem; }
#start.qzv-chat .qz-face small { display: none; }
#start.qzv-chat .qz-face b { font-size: .95rem; color: var(--gold-deep); }
#start.qzv-chat .qz-opt.photo .qz-face { padding: 5px 18px 5px 5px; }
#start.qzv-chat .qz-opt.photo img { width: 40px; height: 40px; border-radius: 50%; }
#start.qzv-chat .qz-opt input:checked + .qz-face { background: var(--orange); }
#start.qzv-chat .qz-opt input:checked + .qz-face b, #start.qzv-chat .qz-opt input:checked + .qz-face i { color: #fff; }
#start.qzv-chat .qz-opt input:checked + .qz-face::after { display: none; }
#start.qzv-chat .qz-dollars { font-size: 1rem; }
#start.qzv-chat .pf-thanks { padding: 36px 22px 10px; }
#start.qzv-luxe .qz-opt.photo b, #start.qzv-luxe .qz-opt.photo small { text-shadow: 0 2px 10px rgba(0,0,0,.85); }
#start.qzv-luxe .qz-opt.photo small { color: rgba(255,255,255,.9); }
#start.qzv-luxe .qz-opt.photo .qz-face::before { background: linear-gradient(180deg, transparent 25%, rgba(13,13,13,.95)); }
/* Showroom layer order: photo (0) → dark tint (1) → content (2) */
#start.qzv-showroom .qz-bg { z-index: 0; }
#start.qzv-showroom::before { z-index: 1; }
#start.qzv-showroom > .container { z-index: 2; }

/* ── FAQ v2 (2026-11-13): multi-paragraph answers + process list ── */
.faq-item.open .faq-a { max-height: 2000px; }
.faq-a p + p, .faq-a ol + p, .faq-a p + ol { margin-top: 14px; }
.faq-steps { margin: 0; padding-left: 1.3em; max-width: 760px; }
.faq-steps li { font-size: 0.95rem; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.75; padding: 3px 0; }
.faq-steps li::marker { color: var(--orange); font-family: var(--serif); }
.faq-a strong { color: rgba(255,255,255,0.9); font-weight: 500; }
.faq-more { text-align: center; margin-top: 44px; font-size: 0.95rem; color: rgba(255,255,255,0.6); }
.faq-more a { color: var(--orange); text-decoration: none; font-weight: 500; }

/* ── 7-step process: tighter spacing ── */
.bp-steps.bp-compact .bp-step { padding-bottom: 34px; gap: 26px; }
.bp-steps.bp-compact .bp-step:last-child { padding-bottom: 0; }
.bp-steps.bp-compact .bp-step h3 { font-size: 1.35rem; margin-bottom: 4px; }
.bp-steps.bp-compact .bp-step p { line-height: 1.6; }
.bp-steps.bp-compact .bp-num { width: 50px; height: 50px; font-size: 1.1rem; }
.bp-steps.bp-compact::before { left: 25px; top: 25px; bottom: 40px; }
.bp-steps.bp-compact .bp-step { grid-template-columns: 50px 1fr; }

/* ── Closing invitation between FAQ and quiz ── */
.final-cta { position: relative; overflow: hidden; padding: 130px 0; background: var(--black); text-align: center; isolation: isolate; }
.final-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.55; }
.final-cta::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(13,13,13,0.5) 0%, rgba(13,13,13,0.85) 80%); pointer-events: none; }
.final-cta .container { position: relative; z-index: 2; }
.final-cta-inner { max-width: 720px; margin: 0 auto; }
.final-cta .section-title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.final-cta .body-text { margin: 22px auto 38px; max-width: 560px; color: rgba(255,255,255,0.78); }
.final-cta .btn-orange { display: inline-flex; align-items: center; gap: 12px; }
@media (max-width: 768px) {
  .final-cta { padding: 90px 0; }
  .bp-steps.bp-compact .bp-step h3 { font-size: 1.2rem; }
}

/* ── Promise fine print (2026-11-13) ── */
.promise-note { max-width: 760px; margin: 36px auto 0; text-align: center; font-size: 0.78rem; line-height: 1.7; color: rgba(255,255,255,0.45); }

/* ── Bayview Promises: engraved "charter" panel (2026-11-14) ── */
#promise .sec-head { margin-bottom: 0; }
.pledge { position: relative; margin: 60px auto 0; max-width: 1180px; padding: 10px; border: 1px solid rgba(232,119,34,0.38); }
.pledge::before, .pledge::after { content: ''; position: absolute; width: 34px; height: 34px; pointer-events: none; }
.pledge::before { top: -1px; left: -1px; border-top: 2px solid var(--orange); border-left: 2px solid var(--orange); }
.pledge::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--orange); border-right: 2px solid var(--orange); }
.pledge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(232,119,34,0.16);
  background: radial-gradient(ellipse at 50% 0%, rgba(232,119,34,0.07) 0%, transparent 70%), rgba(13,13,13,0.35); }
.pledge-item { padding: 60px 34px 54px; text-align: center; position: relative; }
.pledge-item + .pledge-item::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(232,119,34,0.35), transparent); }
.pledge-num { display: block; font-family: var(--italic); font-style: italic; font-weight: 300; font-size: 3.6rem; line-height: 1;
  color: var(--orange); letter-spacing: 2px; }
.pledge-rule { display: block; width: 38px; height: 1px; margin: 24px auto 22px; background: var(--orange); opacity: 0.7; }
.pledge-item h3 { font-family: var(--serif); font-size: 1.32rem; font-weight: 500; line-height: 1.3; color: var(--white); margin: 0 0 14px; }
.pledge-item p { font-size: 0.93rem; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,0.66); max-width: 30ch; margin: 0 auto; }
.pledge-seal { display: flex; align-items: center; gap: 22px; padding: 22px 28px 12px; }
.pledge-seal::before, .pledge-seal::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,119,34,0.4)); }
.pledge-seal::after { background: linear-gradient(90deg, rgba(232,119,34,0.4), transparent); }
.pledge-seal span { font-size: 0.72rem; font-weight: 600; letter-spacing: 3.2px; text-transform: uppercase; color: var(--orange-pale); white-space: nowrap; }
@media (max-width: 1024px) {
  .pledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pledge-item:nth-child(3)::before { display: none; }
  .pledge-item:nth-child(n+3) { border-top: 1px solid rgba(232,119,34,0.14); }
}
@media (max-width: 640px) {
  .pledge { margin-top: 44px; padding: 7px; }
  .pledge-grid { grid-template-columns: 1fr; }
  .pledge-item { padding: 44px 26px 40px; }
  .pledge-item::before { display: none; }
  .pledge-item + .pledge-item { border-top: 1px solid rgba(232,119,34,0.14); }
  .pledge-num { font-size: 3rem; }
  .pledge-seal span { white-space: normal; text-align: center; letter-spacing: 2.4px; }
}

/* ── Hero award badges (2026-11-14) ── */
.hh-badges { margin: 56px auto 0; display: flex; justify-content: center; align-items: flex-start; gap: 22px 64px; flex-wrap: wrap; max-width: 1000px; }
.hh-badge { margin: 0; display: flex; flex-direction: column; align-items: center; width: 220px; }
.hh-badge img { height: 180px; width: auto; max-width: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.55)); transition: transform .4s var(--ease); }
.hh-badge.hh-badge-wide { width: 270px; }
.hh-badge.hh-badge-wide img { height: 156px; margin: 12px 0; }
.hh-badge:hover img { transform: translateY(-4px); }
.hh-badge figcaption { margin-top: 16px; font-size: .72rem; font-weight: 600; letter-spacing: 1.8px; line-height: 1.6; text-transform: uppercase; color: rgba(255,255,255,.82); text-align: center; }
@media (max-width: 768px) {
  .hh-badges { gap: 18px 14px; margin-top: 40px; flex-wrap: nowrap; }
  .hh-badge, .hh-badge.hh-badge-wide { width: 33%; }
  .hh-badge img { height: 92px; }
  .hh-badge.hh-badge-wide img { height: 74px; margin: 9px 0; }
  .hh-badge figcaption { font-size: .58rem; letter-spacing: 1px; margin-top: 10px; }
}

/* ── Credential badges, no white box (2026-11-14) ── */
.cred-seal.cred-seal-clear { background: none; border-radius: 0; padding: 0; height: 180px; margin-bottom: 24px; }
.cred-seal.cred-seal-clear img { height: 180px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0,0,0,.5)); }
.cred-seal.cred-seal-clear.cred-seal-wide img { height: 156px; }

/* center short quiz subtitles (2026-11-14) */
#start.qzv-showroom .qz-side .body-text { margin-left: auto; margin-right: auto; }

/* ── Closing invitation, now part of the FAQ section (2026-11-14) ── */
.faq-close { max-width: 720px; margin: 64px auto 0; padding-top: 60px; text-align: center; position: relative; }
.faq-close::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--orange), transparent); }
.faq-close .section-title { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.faq-close .body-text { margin: 22px auto 36px; max-width: 560px; }
.faq-close .btn-orange { display: inline-flex; align-items: center; gap: 12px; }
@media (max-width: 768px) { .faq-close { margin-top: 60px; padding-top: 52px; } }

/* ── Quiz icons instead of emoji (2026-11-14) ── */
.qz-emoji.qz-icon { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(232,119,34,.55);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--orange);
  background: rgba(232,119,34,.06); margin-bottom: 18px; }
.qz-confetti.qz-icon { width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--orange); margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--orange); background: rgba(232,119,34,.08); }

/* ── Bigger logo (2026-11-14) ── */
.nav-logo-img { height: 104px !important; max-height: none !important; width: auto; transition: height .35s ease; }
#nav.scrolled .nav-logo-img { height: 76px !important; }
@media (max-width: 1180px) { .nav-logo-img { height: 88px !important; } #nav.scrolled .nav-logo-img { height: 68px !important; } }
@media (max-width: 768px) { .nav-logo-img { height: 70px !important; } #nav.scrolled .nav-logo-img { height: 58px !important; } }

/* ═══ Go-live polish (2026-11-14) ═══ */
/* Even line breaks: headings split evenly, paragraphs never end on one stray word */
h1, h2, h3, .section-title, .qz-q, .hh-eyebrow, .orange-label { text-wrap: balance; }
p, li, figcaption, .faq-q, .qz-face b, .qz-face small { text-wrap: pretty; }
.nw { white-space: nowrap; }

/* Promise section had zero padding from an old rule */
#promise.sec { padding: 120px 0; }
@media (max-width: 768px) { #promise.sec { padding: 80px 0; } }

/* Section intros: wider subtitle so short lines fit on one line */
.sec-head { max-width: 780px; }
.sec-head .body-text { max-width: 660px; }

/* Same-colour sections stacked back to back no longer double their padding */

/* Service cards: both titles sit on one line on desktop */
.svc-body h3 { font-size: 1.75rem; }

/* Promise titles on one line on wide screens */
.pledge-item { padding: 60px 20px 54px; }
.pledge-item h3 { font-size: 1.16rem; }
@media (min-width: 1256px) { .pledge-item h3 { white-space: nowrap; } }

/* How It Works: heading on two lines instead of three */
.bp-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
#process .section-title { font-size: clamp(2.4rem, 4vw, 3.5rem); }

/* Gap between a heading and the paragraph under it in split layouts */
.split .section-title + .body-text, .split .section-title + p { margin-top: 22px; }

/* Credential cert number */
.cred-card .cred-cert { margin-top: 10px; font-weight: 600; font-size: .86rem; letter-spacing: 1px; color: var(--white); }

/* Home hero: less empty space under the buttons */
.home-hero { min-height: 84vh; padding-bottom: 90px; }

@media (max-width: 768px) {
  .home-hero { min-height: 0; padding: 140px 0 80px; }
  .bp-layout { grid-template-columns: 1fr; gap: 40px; }
  /* Bathroom card label readable over light photos */
  .svc-card::after { background: linear-gradient(180deg, rgba(13,13,13,.2) 0%, rgba(13,13,13,.8) 40%, rgba(13,13,13,.97) 100%); }
  /* Buttons never wrap onto two lines */
  .btn-orange, .btn-ghost { letter-spacing: 1.4px; padding-left: 20px; padding-right: 20px; max-width: 100%; text-wrap: balance; }
  .qz-time { white-space: nowrap; }
}
/* stacked charcoal sections: no doubled gap (beats the old #id padding rules) */
/* card labels stay readable over bright photos */
.svc-body .orange-label { text-shadow: 0 1px 10px rgba(0,0,0,.85); }
@media (max-width: 768px) {
  .svc-card::after { background: linear-gradient(180deg, rgba(13,13,13,.45) 0%, rgba(13,13,13,.86) 30%, rgba(13,13,13,.97) 100%) !important; }
  #reviews, #services { padding-bottom: 80px; }
}

/* ═══ Section backgrounds (2026-11-14): two quiet darks, gold seam with diamond ═══ */
:root { --bv-d0: #0D0C0B; --bv-d1: #161412; --bv-lift: #1B1916; }
section.bv-bg0, section.bv-bg1 { position: relative; border: 0 !important; padding-top: 120px !important; padding-bottom: 120px !important; }
section.bv-bg0 { background: var(--bv-d0) !important; }
section.bv-bg1 { background: var(--bv-d1) !important; }
#process:not(.bv-seam)::before { display: none !important; }
/* gold hairline + small diamond where each section begins */
section.bv-seam::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1180px, 88%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,119,34,.45), transparent); pointer-events: none; }
section.bv-seam::before { content: '' !important; display: block !important; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px;
  transform: translateX(-50%) rotate(45deg); background: var(--bv-d0); border: 1px solid rgba(232,119,34,.7); z-index: 2; pointer-events: none; }
/* cards sit one shade lighter than the section */
.bv-bg0 .cred-card, .bv-bg1 .cred-card, .bv-bg0 .rv-fallback, .bv-bg1 .rv-fallback, .bv-bg0 .ts-item, .bv-bg1 .ts-item, .bv-bg0 .pledge-grid, .bv-bg1 .pledge-grid,
.bv-bg0 .feat, .bv-bg1 .feat { background: var(--bv-lift) !important; }
/* easier-to-read body text on dark */
.bv-bg0 .body-text, .bv-bg1 .body-text, .bv-bg0 p, .bv-bg1 p { color: rgba(255,255,255,.74); }
/* section labels framed by short gold lines */
.sec-head .orange-label, .faq-header .orange-label { display: inline-flex; align-items: center; gap: 14px; }
.sec-head .orange-label::before, .sec-head .orange-label::after, .faq-header .orange-label::before, .faq-header .orange-label::after { content: ''; width: 34px; height: 1px; background: rgba(232,119,34,.6); }
.split .orange-label, .bp-intro .orange-label { display: inline-flex; align-items: center; gap: 14px; }
.split .orange-label::before, .bp-intro .orange-label::before { content: ''; width: 34px; height: 1px; background: rgba(232,119,34,.6); }
/* offset gold frame behind feature photos */
.split-photo { overflow: visible !important; position: relative; isolation: isolate; }
.split-photo::after { content: ''; position: absolute; inset: 0; transform: translate(18px, 18px); border: 1px solid rgba(232,119,34,.45); z-index: -1; pointer-events: none; }
@media (max-width: 768px) {
  section.bv-bg0, section.bv-bg1 { padding-top: 80px !important; padding-bottom: 80px !important; }
  .split-photo::after { transform: translate(10px, 10px); }
}
#process.bv-seam::before { content: '' !important; display: block !important; top: -4px !important; left: 50% !important; width: 8px !important; height: 8px !important; transform: translateX(-50%) rotate(45deg) !important; background: var(--bv-d0) !important; border: 1px solid rgba(232,119,34,.7) !important; }
#process.bv-seam { overflow: visible !important; }
html body section.bv-bg0[id], html body section.bv-bg1[id] { padding-top: 120px !important; padding-bottom: 120px !important; }
@media (max-width: 768px) { html body section.bv-bg0[id], html body section.bv-bg1[id] { padding-top: 80px !important; padding-bottom: 80px !important; } }

/* Photo zoom set in Edit Mode: the photo scales inside its own frame and never spills over */
img.bv-zoom { transform: scale(var(--z, 1)); clip-path: inset(calc(50% - 50% / var(--z, 1))); }
.svc-card:hover img.bv-zoom { transform: scale(calc(var(--z, 1) * 1.05)); }

/* ── Welcome Aboard thank-you (2026-11-14) ── */
#start .pf-thanks { padding: 34px 18px 18px; }
#start .pf-thanks .qz-icon { width: 72px; height: 72px; font-size: 1.6rem; border-color: rgba(232,119,34,.8); background: rgba(232,119,34,.08); box-shadow: 0 0 0 6px rgba(232,119,34,.06); }
#start .pf-thanks h3 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.2; margin: 20px auto 16px; max-width: 520px; text-wrap: balance; }
#start .pf-thanks h3 em { color: var(--orange); font-style: italic; }
#start .pf-thanks > p { max-width: 520px; margin: 0 auto; }
.pf-voyage { max-width: 440px; margin: 30px auto 0; padding: 26px 26px 20px; border-top: 1px solid rgba(232,119,34,.35); border-bottom: 1px solid rgba(232,119,34,.35); }
.pf-voyage-label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; }
.pf-voyage ol { list-style: none; margin: 0; padding: 0; text-align: left; }
.pf-voyage li { display: flex; align-items: center; gap: 16px; padding: 8px 0; color: rgba(255,255,255,.85); font-size: .98rem; line-height: 1.5; }
.pf-voyage li b { flex: 0 0 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(232,119,34,.6); display: flex; align-items: center; justify-content: center; font-family: var(--italic); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--orange); }
#start .pf-thanks .pf-photos-note { margin-top: 24px; font-size: .9rem; font-style: italic; color: rgba(255,255,255,.65); }
.pf-photos-note a { color: var(--orange); text-decoration: none; font-weight: 500; font-style: normal; }

/* ═══ Hero call-to-action buttons: big, warm, hard to miss (2026-11-14) ═══ */
.hh-actions { gap: 18px; margin-top: 44px; align-items: center; }
.home-hero .hh-actions .btn-orange, .page-hero .hh-actions .btn-orange {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 24px 46px; font-size: 1rem; letter-spacing: 2.4px; border-radius: 3px; gap: 14px;
  background: linear-gradient(135deg, #F08A3A 0%, #E87722 55%, #D4661A 100%);
  box-shadow: 0 0 0 1px rgba(255,180,120,.35) inset, 0 14px 40px -10px rgba(232,119,34,.75), 0 0 60px -12px rgba(232,119,34,.6);
  animation: bvGlow 3.2s ease-in-out infinite;
}
.home-hero .hh-actions .btn-orange i, .page-hero .hh-actions .btn-orange i { font-size: 1.05em; transition: transform .35s var(--ease); }
.home-hero .hh-actions .btn-orange:hover, .page-hero .hh-actions .btn-orange:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255,200,150,.5) inset, 0 20px 50px -10px rgba(232,119,34,.9), 0 0 80px -10px rgba(232,119,34,.7); }
.home-hero .hh-actions .btn-orange:hover i, .page-hero .hh-actions .btn-orange:hover i { transform: translateX(6px); }
/* a soft light sweep across the button every few seconds */
.home-hero .hh-actions .btn-orange::after, .page-hero .hh-actions .btn-orange::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg);
  animation: bvSheen 4.5s ease-in-out infinite 1.2s;
}
@keyframes bvSheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@keyframes bvGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,180,120,.35) inset, 0 14px 40px -10px rgba(232,119,34,.7), 0 0 50px -14px rgba(232,119,34,.5); }
                    50% { box-shadow: 0 0 0 1px rgba(255,180,120,.45) inset, 0 16px 46px -10px rgba(232,119,34,.9), 0 0 70px -10px rgba(232,119,34,.7); } }
/* secondary button: bigger too, but quieter */
.home-hero .hh-actions .btn-ghost { padding: 23px 40px; font-size: .92rem; letter-spacing: 2.2px; border: 1px solid rgba(255,255,255,.55); background: rgba(13,13,13,.35); backdrop-filter: blur(4px); border-radius: 3px; }
.home-hero .hh-actions .btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .hh-actions .btn-orange, .hh-actions .btn-orange::after { animation: none !important; } }
@media (max-width: 768px) {
  .hh-actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 34px; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
  .page-hero .hh-actions { margin-left: 0; }
  .home-hero .hh-actions .btn-orange, .page-hero .hh-actions .btn-orange { justify-content: center; padding: 22px 20px; font-size: .95rem; letter-spacing: 1.8px; white-space: normal; text-align: center; }
  .home-hero .hh-actions .btn-ghost { justify-content: center; padding: 18px 20px; font-size: .8rem; }
}

/* ═══ Awards: Black Marble & Gold plaques (2026-11-14) ═══ */
#credentials .cred-grid { gap: 28px; }
#credentials .cred-card { position: relative; flex: 0 1 340px; padding: 40px 30px 34px !important; border: 0 !important;
  background:
    linear-gradient(118deg, transparent 38%, rgba(255,255,255,.035) 40%, transparent 44%),
    linear-gradient(62deg, transparent 60%, rgba(255,255,255,.025) 61%, transparent 64%),
    radial-gradient(ellipse at 30% 10%, #262220, #121010 70%) !important;
  box-shadow: 0 0 0 1px #8a6c3a, 0 0 0 5px #141210, 0 0 0 6px rgba(201,162,92,.6), 0 30px 60px -28px rgba(0,0,0,.95) !important; }
#credentials .cred-card::before { content: '\2605\2605\2605\2605\2605'; display: block; text-align: center; font-size: .66rem; letter-spacing: 7px; padding-left: 7px; color: #c9a25c; margin-bottom: 18px; }
#credentials .cred-seal { margin-bottom: 26px !important; }
#credentials .cred-card h3 { font-size: 1.15rem; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(201,162,92,.35);
  background: linear-gradient(180deg, #f3dcab, #c9a25c); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
#credentials .cred-card p { font-size: .88rem; }
#credentials .cred-card .cred-cert { color: #c9a25c !important; letter-spacing: 2px; font-size: .78rem; }

/* ═══ Hero description as a marble & gold plaque, matching the awards (2026-11-14) ═══ */
.hh-plaque { position: relative; max-width: 760px; margin: 34px auto 0; padding: 34px 48px 30px;
  background:
    linear-gradient(118deg, transparent 38%, rgba(255,255,255,.035) 40%, transparent 44%),
    linear-gradient(62deg, transparent 60%, rgba(255,255,255,.025) 61%, transparent 64%),
    radial-gradient(ellipse at 30% 10%, rgba(38,34,32,.86), rgba(18,16,16,.9) 70%);
  box-shadow: 0 0 0 1px #8a6c3a, 0 0 0 5px rgba(20,18,16,.92), 0 0 0 6px rgba(201,162,92,.6), 0 30px 60px -28px rgba(0,0,0,.95);
  backdrop-filter: blur(3px); }
.hh-plaque::before { content: '\2605\2605\2605\2605\2605'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 0 14px 0 21px; letter-spacing: 7px; font-size: .66rem; line-height: 18px; color: #c9a25c; background: #141210; }
.home-hero .hh-plaque .hh-sub { margin: 0 auto; max-width: none; font-family: var(--italic); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.6; letter-spacing: .2px; color: rgba(255,255,255,.9); text-wrap: balance; }
.hh-you { font-style: normal; font-family: var(--serif); font-weight: 600; letter-spacing: 1px;
  background: linear-gradient(180deg, #f3dcab, #c9a25c); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 768px) {
  .hh-plaque { margin-top: 26px; padding: 28px 22px 24px; }
  .home-hero .hh-plaque .hh-sub { font-size: 1.12rem; line-height: 1.55; }
}

/* Hero statement, open gold-rule style (final, 2026-11-14) */
.home-hero .hh-plaque.hh-open { background: none; box-shadow: none; backdrop-filter: none; padding: 34px 10px 32px; max-width: 780px; text-align: center; }
.home-hero .hh-plaque.hh-open::before { background: transparent; top: -9px; }
.home-hero .hh-plaque.hh-open::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #c9a25c 20%, #c9a25c 80%, transparent); }
.hh-rule-top { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #c9a25c 20%, #c9a25c calc(50% - 64px), transparent calc(50% - 64px), transparent calc(50% + 64px), #c9a25c calc(50% + 64px), #c9a25c 80%, transparent); }
.hh-open .hx-lead { margin: 0 auto 16px; max-width: 620px; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: 3px; line-height: 1.9; text-transform: uppercase; color: #e9cf98; text-wrap: balance; text-shadow: 0 2px 16px rgba(0,0,0,.85); }
.hh-open .hx-big { margin: 0; font-family: var(--serif); font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.55; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.85); }
@media (max-width: 768px) { .hh-open .hx-lead { font-size: .72rem; letter-spacing: 2.2px; } .hh-open .hx-big { font-size: 1.15rem; } }

/* Hero statement, Option B: headline + three pillars (2026-11-14) */
.hh-b .hx-big { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.2; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.85); }
.hh-b .hx-big em { font-style: italic; background: linear-gradient(180deg, #f3dcab, #c9a25c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hh-b .hx-pillars { margin: 0; font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.9); text-shadow: 0 2px 16px rgba(0,0,0,.85); }
.hh-b .hx-pillars .hh-you { letter-spacing: 3px; font-family: var(--sans); font-weight: 700; }
.hh-b .hx-pillars .d { display: inline-block; width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid #c9a25c; margin: 0 18px; vertical-align: middle; position: relative; top: -2px; }
@media (max-width: 768px) { .hh-b .hx-pillars .d { display: none; } .hh-b .hx-pillars .p { display: block; padding: 3px 0; } }

/* Hero award line with badge (2026-11-14) */
.hx-badgeline { display: flex; align-items: center; justify-content: center; gap: 18px; }
.hx-badge { height: 76px; width: auto; flex-shrink: 0; filter: drop-shadow(0 8px 18px rgba(0,0,0,.7)); }
@media (max-width: 768px) {
  .hx-badgeline { gap: 12px; text-align: left; font-size: 1.15rem !important; }
  .hx-badge { height: 58px; }
  .hh-b .hx-big { margin-bottom: 12px; }
  .home-hero .hh-plaque.hh-open { padding: 26px 4px 22px; }
}

/* Google reviews pill under the hero buttons + stats bar stars (2026-11-14) */
.ts-stars { color: var(--orange); letter-spacing: 1px; }
.hh-rev { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 10px 20px 10px 10px; border-radius: 999px; text-decoration: none; color: #fff;
  font-size: .86rem; font-weight: 500; letter-spacing: .3px; background: rgba(13,13,13,.55); border: 1px solid rgba(201,162,92,.5); backdrop-filter: blur(6px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.8); transition: border-color .3s; }
.hh-rev .g { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: #4285F4; font-size: .95rem; }
.hh-rev .st { color: #e9b24a; letter-spacing: 2px; font-size: 1rem; }
.hh-rev .sep { width: 1px; height: 16px; background: rgba(255,255,255,.3); }
.hh-rev b { color: #e9cf98; }
.hh-rev:hover { border-color: #e9cf98; }
@media (max-width: 768px) {
  .home-hero .container { display: flex; flex-direction: column; align-items: center; }
  .home-hero .container > * { max-width: 100%; }
  .home-hero .hh-actions { order: 5; margin-top: 16px !important; }
  .hh-rev { order: 4; margin-top: 20px; }
}
/* keep each hero pillar phrase whole */
.hh-b .hx-pillars .p { white-space: nowrap; }
@media (min-width: 769px) { .home-hero .hh-plaque.hh-open.hh-b { max-width: 900px; } .hh-b .hx-pillars { letter-spacing: 2.6px; } .hh-b .hx-pillars .d { margin: 0 14px; } }

/* ═══ Header (2026-11-14): transparent logo, no box ═══ */
.nav-logo-img { border-radius: 0 !important; background: none !important; filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }

/* anchor jumps land below the fixed header */
section[id] { scroll-margin-top: 90px; }

/* All-reviews list (2026-11-14) */
.rv-grid .rc-text.clamp { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rc-more { background: none; border: 0; padding: 0; margin: -6px 0 14px; color: var(--orange); font: 600 .78rem var(--sans); letter-spacing: 1px; cursor: pointer; }
.rv-more-wrap { text-align: center; margin-top: 36px; }
.rc-location .fa-google { color: var(--orange); margin-right: 4px; }
.rv-grid .review-card { width: auto !important; min-width: 0 !important; display: flex; flex-direction: column; background: var(--bv-lift, #1B1916); border-color: rgba(201,162,92,.28); }
.rv-grid .rc-text { font-family: var(--sans); font-style: normal; font-size: .95rem; line-height: 1.7; color: rgba(255,255,255,.82); flex: 1; }
.rv-grid .rc-reviewer { margin-top: auto; }
.rv-grid .rc-stars { color: #e9b24a; letter-spacing: 2px; }

/* "One Thing, Done Exceptionally Well": three flooring projects (2026-11-15) */
.svc-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.svc-grid.three .svc-card { min-height: 520px; }
.svc-grid.three .svc-body { padding: 26px; }
.svc-grid.three .svc-body h3 { font-size: 1.45rem; }
.svc-more { text-align: center; margin-top: 40px; }
@media (max-width: 1000px) { .svc-grid.three { grid-template-columns: 1fr 1fr; } .svc-grid.three .svc-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .svc-grid.three { grid-template-columns: 1fr; } .svc-grid.three .svc-card { min-height: 400px; } }
@media (max-width: 768px) { .svc-grid.three .svc-card::after { background: linear-gradient(180deg, rgba(13,13,13,0) 35%, rgba(13,13,13,.75) 70%, rgba(13,13,13,.95) 100%) !important; } }

/* Project cards: listing-style. Photo on top (floor fully visible), caption underneath (2026-11-15) */
.svc-grid.three .svc-card { min-height: 0 !important; display: flex; flex-direction: column; background: var(--bv-lift, #1B1916); }
.svc-grid.three .svc-card::after { display: none !important; }
.svc-grid.three .svc-card img { position: relative !important; inset: auto; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.svc-grid.three .svc-body { position: relative !important; padding: 22px 24px 26px; border-top: 1px solid rgba(201,162,92,.35); }
.svc-grid.three .svc-body h3 { margin: 6px 0 8px; }
.svc-grid.three .svc-body p { color: rgba(255,255,255,.72); }
.svc-grid.three .svc-card:hover img { transform: scale(1.03); }
.svc-grid.three .svc-card { overflow: hidden; }
.svc-grid.three .svc-card img { aspect-ratio: 3 / 4 !important; }

/* Installer of the Year line under "One Thing, Done Exceptionally Well" (2026-11-15) */
.svc-award { max-width: 640px; margin: 22px auto 0; font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,.78); text-wrap: pretty; }
.svc-award-tag { display: block; margin-bottom: 12px; font-size: .72rem; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: #e9cf98; }
.svc-award-tag::before, .svc-award-tag::after { content: '\2605'; color: #c9a25c; margin: 0 10px; font-size: .7rem; }
.svc-award em { font-family: var(--italic); font-style: italic; font-size: 1.12em; color: #e9cf98; white-space: nowrap; }
@media (max-width: 768px) { .svc-award { font-size: .95rem; } .svc-award em { white-space: normal; } .svc-award-tag { letter-spacing: 1.8px; line-height: 1.7; } }
@media (min-width: 769px) { .svc-award { max-width: 800px; } .svc-award-tag { white-space: nowrap; } }

/* Hero: show the WHOLE photo. The full image sits centered; a soft blurred copy fills the sides (2026-11-15) */
.home-hero .hh-photo.hh-photo-full { background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 0; }
.home-hero .hh-photo.hh-photo-full::before { content: ''; position: absolute; inset: -40px; z-index: -1; background-image: inherit; background-size: cover; background-position: center;
  filter: blur(28px) brightness(.55) saturate(1.1); }
.home-hero .hh-photo.hh-photo-full { isolation: isolate; overflow: hidden; }
@media (max-width: 768px) { .home-hero .hh-photo.hh-photo-full { background-size: cover; background-position: 40% center; } }
.home-hero .hh-photo.hh-photo-full { background-size: 0 0 !important; }
.home-hero .hh-photo.hh-photo-full::after { content: ''; position: absolute; inset: 0; z-index: 1; background-image: inherit; background-size: contain; background-repeat: no-repeat; background-position: center;
  box-shadow: none; }
@media (max-width: 768px) { .home-hero .hh-photo.hh-photo-full::after { background-size: cover; background-position: 40% center; } }
@media (min-width: 769px) { .home-hero .hh-photo.hh-photo-full::after { -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 46vh), #000 calc(50% - 38vh), #000 calc(50% + 38vh), transparent calc(50% + 46vh)); mask-image: linear-gradient(90deg, transparent calc(50% - 46vh), #000 calc(50% - 38vh), #000 calc(50% + 38vh), transparent calc(50% + 46vh)); } }
@media (min-width: 769px) {
  .home-hero .hh-photo.hh-photo-full::after { inset: 0 auto 0 50%; height: 100%; width: auto; aspect-ratio: 1179 / 1572; transform: translateX(-50%); background-size: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
}

/* ═══════════════════════════════════════════════════════════════════
   LUXE FINISH (2026-11-15): the marble & gold "plaque" language from the
   awards section, applied consistently across every page.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --gold: #c9a25c; --gold-hi: #e9cf98; --gold-deep: #8a6c3a;
  --marble: linear-gradient(118deg, transparent 38%, rgba(255,255,255,.035) 40%, transparent 44%),
            linear-gradient(62deg, transparent 60%, rgba(255,255,255,.025) 61%, transparent 64%),
            radial-gradient(ellipse at 30% 10%, #262220, #121010 70%);
  --plaque-frame: 0 0 0 1px var(--gold-deep), 0 0 0 5px #141210, 0 0 0 6px rgba(201,162,92,.6), 0 30px 60px -28px rgba(0,0,0,.95);
  --thin-frame: 0 0 0 1px rgba(201,162,92,.55), 0 0 0 4px #141210, 0 0 0 5px rgba(201,162,92,.28), 0 24px 50px -26px rgba(0,0,0,.9);
}

/* Section titles: a small gold ornament under every heading */
.sec-head .section-title::after, .faq-header .section-title::after, .bp-intro .section-title::after {
  content: '\2605\2605\2605\2605\2605'; display: block; margin: 18px auto 0; font-family: var(--sans); font-style: normal; font-size: .62rem; letter-spacing: 7px; padding-left: 7px; color: var(--gold); line-height: 1; }
.bp-intro .section-title::after { margin-left: 0; padding-left: 0; }

/* Stats bar → one plaque with gold dividers and gold numerals */
.trust-stats { background: var(--marble) !important; border: 0 !important; box-shadow: var(--plaque-frame); gap: 0 !important; }
.trust-stats .ts-item { background: transparent !important; position: relative; }
.trust-stats .ts-item + .ts-item::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(180deg, transparent, rgba(201,162,92,.5), transparent); }
.ts-num { background: linear-gradient(180deg, #f3dcab, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
@media (max-width: 820px) { .trust-stats .ts-item:nth-child(3)::before { display: none; } .trust-stats .ts-item:nth-child(n+3) { border-top: 1px solid rgba(201,162,92,.18); } }

/* Cards (project cards, service cards, reviews, review box) → plaques */
.svc-grid.three .svc-card, .feat, .rv-grid .review-card, .rv-fallback {
  background: var(--marble) !important; border: 0 !important; box-shadow: var(--plaque-frame) !important; }
.svc-grid.three .svc-body { border-top: 1px solid rgba(201,162,92,.4) !important; }
.svc-grid.three .svc-body h3, .feat h3, .rv-grid .rc-name { background: linear-gradient(180deg, #f3dcab, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.feat-photo { border-bottom: 1px solid rgba(201,162,92,.4); }
.feat-grid { gap: 30px; }
.rv-grid { gap: 30px; }
.rv-grid .rc-quote { color: var(--gold) !important; opacity: .5; }
.rv-grid .rc-stars, .rv-score .stars { color: var(--gold-hi) !important; }
.rv-fallback { padding: 46px 30px !important; }

/* Before / after sliders → framed like gallery prints */
.ba { border: 0 !important; box-shadow: var(--thin-frame); }
.ba-grid { gap: 34px; }
.ba-cap { padding-top: 22px; }
.ba-cap h3 { background: linear-gradient(180deg, #f3dcab, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ba-tag { border: 1px solid rgba(201,162,92,.55); }

/* Craftsmanship photos + feature photos */
.craft, .split-photo img { box-shadow: var(--thin-frame); border: 0 !important; }
.split-photo { border: 0 !important; }
.craft figcaption { color: var(--gold-hi); }

/* How It Works: gold numerals and gold thread */
.bp-num { border-color: var(--gold) !important; background: #141210 !important; color: var(--gold-hi) !important; box-shadow: 0 0 0 4px #141210, 0 0 0 5px rgba(201,162,92,.3); }
.bp-step:hover .bp-num { background: var(--gold) !important; color: #141210 !important; }
.bp-steps::before { background: linear-gradient(180deg, rgba(201,162,92,.6), rgba(201,162,92,.12)) !important; }
.bp-step h3 { background: linear-gradient(180deg, #f3dcab, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bp-meta { color: var(--gold-hi) !important; }

/* Check lists (Why Choose Bayview, etc.) */
.check-list i { border-color: var(--gold) !important; color: var(--gold-hi) !important; }
.check-list li { border-bottom-color: rgba(201,162,92,.16) !important; }

/* FAQ → one plaque panel */
.faq-list { background: var(--marble); box-shadow: var(--plaque-frame); padding: 14px 40px; }
.faq-item { border-bottom-color: rgba(201,162,92,.22) !important; }
.faq-item:last-child { border-bottom: 0 !important; }
.faq-q .faq-i { border-color: var(--gold) !important; color: var(--gold-hi) !important; }
.faq-item.open .faq-q .faq-i { background: var(--gold) !important; color: #141210 !important; }
.faq-q:hover { color: var(--gold-hi) !important; }
@media (max-width: 768px) { .faq-list { padding: 6px 20px; } }

/* Questionnaire card → marble plaque (glass removed) */
#start.qzv-showroom .qz-card { background: var(--marble) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; box-shadow: var(--plaque-frame), 0 40px 90px rgba(0,0,0,.6) !important; }
#start.qzv-showroom .qz-card::before { height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
#start.qzv-showroom .qz-bar { background: rgba(201,162,92,.18); }
#start.qzv-showroom .qz-face { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(201,162,92,.35) !important; border-radius: 4px !important; }
#start.qzv-showroom .qz-opt:hover .qz-face { border-color: var(--gold) !important; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
#start.qzv-showroom .qz-opt input:checked + .qz-face { background: rgba(201,162,92,.16) !important; border-color: var(--gold-hi) !important; box-shadow: 0 0 0 3px rgba(201,162,92,.25) !important; }
#start.qzv-showroom .qz-face i { color: var(--gold-hi) !important; }
#start.qzv-showroom .qz-count { color: var(--gold-hi) !important; }
#start.qzv-showroom .qz-card input, #start.qzv-showroom .qz-card select, #start.qzv-showroom .qz-card textarea { border-radius: 2px; border-color: rgba(201,162,92,.35) !important; }
.qz-emoji.qz-icon, .qz-confetti.qz-icon { border-color: var(--gold) !important; color: var(--gold-hi) !important; background: rgba(201,162,92,.07) !important; }
.qz-time { background: rgba(13,13,13,.55) !important; border-color: rgba(201,162,92,.55) !important; color: var(--gold-hi) !important; }

/* Footer: gold hairline and gold accents */
footer { border-top: 0 !important; position: relative; }
footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1180px, 88%); height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.f-heading { color: var(--gold-hi) !important; }
.f-social { border-color: rgba(201,162,92,.45) !important; color: var(--gold-hi) !important; }
.f-social:hover { border-color: var(--gold) !important; background: rgba(201,162,92,.12); }

/* Promises panel → same gold plaque */
.pledge { border-color: rgba(201,162,92,.55) !important; }
.pledge::before, .pledge::after { border-color: var(--gold) !important; }
.pledge-grid { background: var(--marble) !important; border-color: rgba(201,162,92,.3) !important; }
.pledge-num { background: linear-gradient(180deg, #f3dcab, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.pledge-rule { background: var(--gold) !important; }
.pledge-item + .pledge-item::before { background: linear-gradient(180deg, transparent, rgba(201,162,92,.45), transparent) !important; }
.pledge-seal span { color: var(--gold-hi) !important; }
.pledge-seal::before, .pledge-seal::after { background: linear-gradient(90deg, transparent, rgba(201,162,92,.5)) !important; }
.pledge-seal::after { background: linear-gradient(90deg, rgba(201,162,92,.5), transparent) !important; }
[data-filter-group] button:not(.on) { border-color: rgba(201,162,92,.45) !important; color: var(--gold-hi) !important; }

/* Hide the "Powered by Netlify" badge. The site is on a paid Netlify plan
   (Personal, 2026-11-15), where Netlify itself makes the badge hideable. It
   overlapped the mobile call/quiz bar. */
#nl-badge-frame{display:none !important}