:root{
    /* === BRAND COLORS — matched to the Keystone logo === */
    --orange:       #EE5A1F;   /* primary — orange flame */
    --orange-dark:  #C9420F;
    --orange-light: #FBD9C7;
    --ink:          #0B0B0B;   /* near-black like the logo silhouette */
    --ink-2:        #1A1A1A;
    --cream:        #F7F4EE;   /* warm neutral background */
    --cream-2:      #EFE9DD;
    --mortar:       #5E574F;   /* muted body text */
    --gold:         #E0A93C;
  }
  html{ scroll-behavior:smooth; scroll-padding-top:104px; /* keeps anchor targets clear of the sticky header */ }
  :focus-visible{ outline:3px solid var(--orange); outline-offset:2px; border-radius:4px; }
  body{
    font-family:'DM Sans','Google Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    color:var(--ink);
    background:var(--cream);
    -webkit-font-smoothing:antialiased;
    font-feature-settings:"ss01","cv11";
  }
  .font-display{ font-family:'DM Sans','Google Sans',sans-serif; letter-spacing:-0.025em; font-weight:800; }

  .bg-orange{ background:var(--orange); }
  .bg-orange-dark{ background:var(--orange-dark); }
  .bg-ink{ background:var(--ink); }
  .bg-cream{ background:var(--cream); }
  .bg-cream-2{ background:var(--cream-2); }
  .text-orange{ color:var(--orange); }
  .text-ink{ color:var(--ink); }
  .text-mortar{ color:var(--mortar); }
  .border-orange{ border-color:var(--orange); }
  .ring-orange{ --tw-ring-color:var(--orange); }

  /* Buttons */
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-weight:600; border-radius:.65rem; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; cursor:pointer; letter-spacing:-0.01em; }
  .btn-primary{ background:var(--orange); color:#fff; padding:.95rem 1.45rem; box-shadow:0 10px 22px -10px rgba(238,90,31,.55), inset 0 -2px 0 rgba(0,0,0,.18); }
  .btn-primary:hover{ background:var(--orange-dark); transform:translateY(-1px); }
  .btn-ghost{ background:rgba(255,255,255,.10); color:#fff; padding:.95rem 1.45rem; border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(8px); }
  .btn-ghost:hover{ background:rgba(255,255,255,.20); }
  .btn-dark{ background:var(--ink); color:#fff; padding:.8rem 1.15rem; }
  .btn-dark:hover{ background:var(--ink-2); }

  /* Hero */
  .hero{
    position:relative;
    background:
      linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.50) 35%, rgba(8,8,8,.88) 100%),
      url('../images/hero.jpg') 72% 28% / cover no-repeat;
    /* 72% 28% = horizontal/vertical focal point — frames the chimneys in the upper right */
  }
  @media (max-width: 768px){
    /* Smaller image + cover so the photo always fills the hero (no gray gap) */
    .hero{
      background-image:
        linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.50) 35%, rgba(8,8,8,.88) 100%),
        url('../images/hero-960.jpg');
      background-position: 70% 30%;
    }
  }
  .orange-divider{
    height:5px;
    background:linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  }

  /* Service card */
  .svc{
    background:#fff; border:1px solid #EAE2D2; border-radius:14px; padding:1.5rem;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .svc:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(11,11,11,.28); border-color:var(--orange-light); }
  .svc .ico{
    width:48px;height:48px;border-radius:12px;
    background:linear-gradient(135deg, var(--orange), var(--orange-dark));
    color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px -10px rgba(238,90,31,.55);
  }

  /* Section heading kicker */
  .kicker{ display:inline-flex; align-items:center; gap:.55rem; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:700; color:var(--orange); }
  .kicker::before{ content:""; width:28px; height:2px; background:var(--orange); display:inline-block; }

  /* Before / After */
  .ba{ position:relative; border-radius:14px; overflow:hidden; box-shadow:0 20px 40px -24px rgba(0,0,0,.5); background:#1a1a1a; }
  .ba img{ width:100%; height:300px; object-fit:cover; display:block; transition:transform .35s ease; }
  .ba:hover img{ transform:scale(1.03); }
  .ba .tag{ position:absolute; top:.75rem; left:.75rem; background:rgba(11,11,11,.85); color:#fff; padding:.32rem .7rem; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  .ba .tag.after{ background:var(--orange); }

  /* FAQ */
  details.faq{ border:1px solid #EAE2D2; border-radius:12px; background:#fff; padding:0; transition:box-shadow .2s ease; }
  details.faq + details.faq{ margin-top:.75rem; }
  details.faq[open]{ box-shadow:0 14px 30px -22px rgba(0,0,0,.28); }
  details.faq summary{ list-style:none; cursor:pointer; padding:1.1rem 1.25rem; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
  details.faq summary::-webkit-details-marker{ display:none; }
  details.faq .ans{ padding:0 1.25rem 1.25rem; color:#4a4540; line-height:1.65; }
  details.faq summary .chev{ transition:transform .2s ease; color:var(--orange); flex-shrink:0; }
  details.faq[open] summary .chev{ transform:rotate(180deg); }

  /* Sticky mobile CTA */
  .sticky-cta{ position:fixed; bottom:0; left:0; right:0; z-index:60; background:var(--ink); padding:.6rem .6rem calc(.6rem + env(safe-area-inset-bottom, 0px)); display:none; gap:.5rem; box-shadow:0 -8px 24px -10px rgba(0,0,0,.45); }
  .sticky-cta a{ flex:1; }
  @media (max-width: 768px){ .sticky-cta{ display:flex; } main{ padding-bottom:72px; } }

  /* Mobile slide-down menu */
  .mobile-nav{
    position:fixed; top:86px; left:0; right:0; z-index:49;
    background:#fff; border-bottom:1px solid #EAE2D2;
    box-shadow:0 24px 40px -20px rgba(0,0,0,.25);
    padding:.5rem 1.25rem 1.1rem;
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
  }
  .mobile-nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .mobile-nav a{ display:block; padding:.8rem .25rem; font-weight:600; border-bottom:1px solid #F2EADA; }
  .mobile-nav a.mobile-nav-cta{ border-bottom:none; }
  .menu-btn .icon-close{ display:none; }
  .menu-btn[aria-expanded="true"] .icon-close{ display:block; }
  .menu-btn[aria-expanded="true"] .icon-burger{ display:none; }

  /* Star */
  .star{ color:var(--gold); }

  /* Logo flame flicker (subtle) */
  @keyframes flicker { 0%,100%{ transform:translateY(0) scaleY(1);} 50%{ transform:translateY(-1px) scaleY(1.04);} }
  .logo-flame{ transform-origin:center bottom; animation:flicker 2.4s ease-in-out infinite; }

  /* =========================================================
     3D CHIMNEY SCENE — pure CSS, no libraries
     ========================================================= */
  .chimney-scene{
    perspective: 1400px;
    perspective-origin: 50% 38%;
    position: relative;
    height: 560px;
    display:flex; align-items:center; justify-content:center;
  }
  .chimney-stage{
    position:relative;
    width:160px; height:340px;
    transform-style: preserve-3d;
    animation: chimneyRotate 24s linear infinite;
  }
  .chimney-scene:hover .chimney-stage{ animation-play-state: paused; }
  @keyframes chimneyRotate{
    from{ transform: rotateX(-8deg) rotateY(0deg); }
    to  { transform: rotateX(-8deg) rotateY(360deg); }
  }
  /* Brick walls */
  .face{
    position:absolute;
    width:160px; height:340px;
    background:
      /* brick courses */
      repeating-linear-gradient(0deg,
        #7a3320 0 36px,
        #5e2615 36px 40px),
      /* vertical mortar joints (offset every other course handled by overlay) */
      repeating-linear-gradient(90deg,
        rgba(0,0,0,0) 0 78px,
        rgba(0,0,0,.55) 78px 82px);
    background-blend-mode: multiply;
    box-shadow:
      inset 0 0 80px rgba(0,0,0,.45),
      inset 0 -40px 60px rgba(0,0,0,.35);
  }
  .face-front{ transform: translateZ(80px); }
  .face-back { transform: rotateY(180deg) translateZ(80px); }
  .face-left { width:160px; transform: rotateY(-90deg) translateZ(80px); }
  .face-right{ width:160px; transform: rotateY(90deg) translateZ(80px); }

  /* Open top — looking down into the flue */
  .flue-interior{
    position:absolute; left:18px; right:18px; top:0;
    height:80px;
    background: linear-gradient(180deg, #1a0d07 0%, #0a0604 60%, #000 100%);
    transform: rotateX(90deg) translateZ(-1px);
    transform-origin: top center;
  }

  /* Crown slab on top */
  .crown-slab{
    position:absolute;
    width:184px; height:22px;
    left:-12px; top:-4px;
    transform: translateZ(0px);
    transform-style: preserve-3d;
  }
  .crown-top{
    position:absolute; inset:0;
    background: linear-gradient(180deg, #e2d8c3, #b9ad94 75%, #978a72);
    border-radius:3px;
    transform: rotateX(90deg) translateZ(11px);
    box-shadow: 0 0 30px rgba(0,0,0,.4);
  }
  .crown-front{ position:absolute; inset:0; background:linear-gradient(180deg,#bdb094,#8e8270); transform: translateZ(96px); }
  .crown-back { position:absolute; inset:0; background:linear-gradient(180deg,#9c917a,#6f6452); transform: rotateY(180deg) translateZ(96px); }
  .crown-left { position:absolute; width:184px; inset:0; background:linear-gradient(90deg,#8e8270,#bdb094); transform: rotateY(-90deg) translateZ(92px); }
  .crown-right{ position:absolute; width:184px; inset:0; background:linear-gradient(90deg,#bdb094,#8e8270); transform: rotateY( 90deg) translateZ(92px); }

  /* Stainless steel cap floating above */
  .cap-group{
    position:absolute; top:-80px; left:50%;
    width:120px; height:60px;
    transform: translateX(-50%);
    transform-style:preserve-3d;
  }
  .cap-mesh{
    position:absolute; left:20px; top:25px;
    width:80px; height:50px;
    background:
      repeating-linear-gradient( 45deg, #111 0 3px, transparent 3px 7px),
      repeating-linear-gradient(-45deg, #111 0 3px, transparent 3px 7px),
      #2a2a2a;
    border-radius:2px;
    box-shadow:inset 0 0 8px #000;
  }
  .cap-lid{
    position:absolute; left:-4px; top:-2px;
    width:128px; height:30px;
    background: linear-gradient(180deg,#dadde3 0%, #a8acb4 60%, #6e7178 100%);
    border-radius:3px;
    box-shadow: 0 6px 14px rgba(0,0,0,.45);
    transform: rotateX(15deg);
    transform-origin: center bottom;
  }

  /* Flame visible inside flue */
  .flame3d{
    position:absolute; left:50%; top:30px;
    width:36px; height:60px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center bottom, #fff1c2 0%, #ffc35a 25%, #ee5a1f 55%, rgba(238,90,31,0) 90%);
    border-radius:50% 50% 30% 30%;
    filter: blur(1.5px);
    animation: flame3dFlicker .32s ease-in-out infinite alternate;
    z-index:1;
  }
  @keyframes flame3dFlicker{
    from{ transform: translateX(-50%) scaleY(1) scaleX(1);   opacity:.92; }
    to  { transform: translateX(-50%) scaleY(1.18) scaleX(.93); opacity:1; }
  }

  /* Smoke trails — outside the rotating stage */
  .smoke{
    position:absolute; left:50%; top:30%;
    transform: translateX(-50%);
    pointer-events:none;
    z-index:2;
  }
  .smoke span{
    position:absolute; left:-18px;
    width:38px; height:38px;
    background: radial-gradient(circle, rgba(220,215,210,.6), rgba(220,215,210,0) 70%);
    border-radius:50%;
    filter: blur(8px);
    animation: smokeRise 5s linear infinite;
  }
  .smoke span:nth-child(1){ animation-delay: 0s;   left:-30px; }
  .smoke span:nth-child(2){ animation-delay: 1.2s; left:-10px; }
  .smoke span:nth-child(3){ animation-delay: 2.4s; left:10px;  }
  .smoke span:nth-child(4){ animation-delay: 3.6s; left:-20px; }
  .smoke span:nth-child(5){ animation-delay: 4.5s; left:0px;   }
  @keyframes smokeRise{
    0%   { transform: translate3d(0,30px,0) scale(.5); opacity:0; }
    25%  { opacity:.7; }
    100% { transform: translate3d(35px,-260px,0) scale(2.6); opacity:0; }
  }

  /* Ground shadow */
  .chimney-ground{
    position:absolute; bottom:30px; left:50%;
    transform: translateX(-50%) rotateX(70deg);
    width:260px; height:80px;
    background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%);
    filter: blur(2px);
    z-index:0;
  }

  /* Callout labels */
  .chimney-callouts{ list-style:none; padding:0; margin:0; }
  .chimney-callouts li{
    position:relative; padding-left: 32px;
    margin-bottom: 1.1rem;
  }
  .chimney-callouts li::before{
    content:""; position:absolute; left:0; top:.5em;
    width:16px; height:16px; border-radius:50%;
    background:var(--orange);
    box-shadow: 0 0 0 4px rgba(238,90,31,.18);
  }
  .chimney-callouts strong{ display:block; font-weight:700; font-size:1.05rem; color:#fff; }
  .chimney-callouts span{ display:block; font-size:.88rem; color:rgba(255,255,255,.65); margin-top:.15rem; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .chimney-stage, .flame3d, .smoke span, .logo-flame, .text-cta-btn .pulse{ animation: none !important; }
  }
  @media (max-width: 768px){
    .chimney-scene{ height:440px; }
    .chimney-stage{ width:120px; height:260px; }
    .face{ width:120px; height:260px; }
    .face-front{ transform: translateZ(60px); }
    .face-back { transform: rotateY(180deg) translateZ(60px); }
    .face-left { transform: rotateY(-90deg) translateZ(60px); }
    .face-right{ transform: rotateY( 90deg) translateZ(60px); }
    .crown-slab{ width:140px; left:-10px; }
    .crown-front{ transform: translateZ(72px); }
    .crown-back { transform: rotateY(180deg) translateZ(72px); }
    .crown-left { transform: rotateY(-90deg) translateZ(70px); }
    .crown-right{ transform: rotateY( 90deg) translateZ(70px); }
    .cap-group{ width:96px; top:-66px; }
    .cap-mesh{ left:16px; top:22px; width:64px; height:38px; }
    .cap-lid { width:104px; height:24px; }
  }

  /* =========================================================
     DIAGNOSE QUIZ
     ========================================================= */
  .quiz-card{ background:#fff; border:1px solid #EAE2D2; border-radius:18px; padding:1.5rem 1.5rem 1.75rem; box-shadow:0 30px 60px -35px rgba(0,0,0,.25); }
  .quiz-progress{ height:6px; background:#F2EADA; border-radius:999px; overflow:hidden; }
  .quiz-progress > i{ display:block; height:100%; background:linear-gradient(90deg,var(--orange),var(--orange-dark)); width:0; transition:width .35s ease; }
  .quiz-step{ display:none; }
  .quiz-step.active{ display:block; animation:quizIn .35s ease both; }
  @keyframes quizIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
  .quiz-option{ display:flex; align-items:center; gap:.85rem; width:100%; text-align:left; padding:1rem 1.1rem; background:#FBF7EE; border:1.5px solid #EAE2D2; border-radius:12px; font-weight:600; transition:all .15s ease; cursor:pointer; }
  .quiz-option:hover{ border-color:var(--orange); background:#fff; transform:translateY(-1px); }
  .quiz-option .dot{ width:22px; height:22px; border-radius:50%; border:2px solid #D5C9B0; flex-shrink:0; }
  .quiz-option.is-selected{ border-color:var(--orange); background:#fff; }
  .quiz-option.is-selected .dot{ border-color:var(--orange); background:var(--orange); box-shadow:inset 0 0 0 3px #fff; }

  /* =========================================================
     BEFORE/AFTER SLIDER
     ========================================================= */
  .ba-slider{ position:relative; width:100%; max-width:980px; margin:0 auto; aspect-ratio: 16/10; border-radius:18px; overflow:hidden; user-select:none; box-shadow:0 30px 60px -25px rgba(0,0,0,.55); cursor:ew-resize; background:#000; touch-action:pan-y; }
  .ba-slider img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none; }
  /* Before image sits on top, clipped from the right — left side = before, right side = after */
  .ba-slider .ba-before-wrap{ position:absolute; inset:0; clip-path:inset(0 50% 0 0); }
  .ba-slider .ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:4px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 24px rgba(0,0,0,.4); transform:translateX(-50%); }
  .ba-slider .ba-handle::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:999px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.45); }
  .ba-slider .ba-handle::after{ content:"⇄"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--orange); font-weight:900; font-size:22px; pointer-events:none; }
  .ba-slider .ba-lbl{ position:absolute; bottom:1rem; padding:.32rem .75rem; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; }
  .ba-slider .ba-lbl.before{ left:1rem; background:rgba(11,11,11,.85); }
  .ba-slider .ba-lbl.after{ right:1rem; background:var(--orange); }

  /* =========================================================
     STAT COUNTER
     ========================================================= */
  .stat-num{ font-family:'DM Sans',sans-serif; font-weight:800; font-size:clamp(2.5rem,6vw,4.5rem); line-height:1; letter-spacing:-0.03em; color:#fff; }
  .stat-num .suffix{ color:var(--orange); }

  /* =========================================================
     ANNUAL CARE PLAN
     ========================================================= */
  .careplan{ background:linear-gradient(135deg, #0B0B0B 0%, #1F1A14 100%); border-radius:24px; padding:clamp(2rem,4vw,3.5rem); position:relative; overflow:hidden; }
  .careplan::before{ content:""; position:absolute; right:-40px; top:-40px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(238,90,31,.35), transparent 70%); }
  .careplan-badge{ display:inline-flex; align-items:center; gap:.5rem; background:var(--orange); color:#fff; padding:.4rem .85rem; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
  .careplan-price{ font-family:'DM Sans',sans-serif; font-weight:800; font-size:clamp(3rem,7vw,5rem); letter-spacing:-0.04em; color:#fff; line-height:.95; }
  .careplan-price .currency{ font-size:.5em; vertical-align:.4em; color:var(--orange); margin-right:.05em; }
  .careplan-price .per{ font-size:.32em; font-weight:600; color:rgba(255,255,255,.6); letter-spacing:0; }
  .careplan-list li{ display:flex; align-items:flex-start; gap:.75rem; padding:.6rem 0; color:rgba(255,255,255,.85); }
  .careplan-list li svg{ flex-shrink:0; color:var(--orange); margin-top:.15rem; }

  /* =========================================================
     TEXT-A-PHOTO FLOATING CTA
     ========================================================= */
  .text-cta{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:55; }
  @media (max-width:768px){ .text-cta{ bottom:5rem; right:.85rem; } }
  .text-cta-btn{ display:inline-flex; align-items:center; gap:.55rem; background:var(--orange); color:#fff; font-weight:700; padding:.85rem 1.1rem; border-radius:999px; box-shadow:0 14px 30px -10px rgba(238,90,31,.7), 0 0 0 4px rgba(238,90,31,.18); cursor:pointer; transition:transform .15s ease, box-shadow .2s ease; border:none; font-size:.92rem; }
  .text-cta-btn:hover{ transform:translateY(-2px); }
  .text-cta-btn .pulse{ width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:textPulse 1.6s infinite; }
  @keyframes textPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.7);} 70%{ box-shadow:0 0 0 12px rgba(255,255,255,0);} 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0);} }
  .text-cta-pop{ position:absolute; right:0; bottom:calc(100% + 12px); width:300px; background:#fff; border:1px solid #EAE2D2; border-radius:16px; box-shadow:0 30px 60px -20px rgba(0,0,0,.35); padding:1.1rem; opacity:0; transform:translateY(8px) scale(.98); pointer-events:none; transition:all .2s ease; }
  .text-cta.is-open .text-cta-pop{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .text-cta-pop .close{ position:absolute; top:.5rem; right:.5rem; background:transparent; border:none; cursor:pointer; color:#888; font-size:1.1rem; padding:.25rem .4rem; }