:root{
    --gold:#E39829;          /* brand orange, treated as refined gold */
    --gold-soft:#edc079;
    --gold-deep:#b9781a;
    --green:#5a9e6f;         /* sparing low-carbon accent, sits beside brand orange */
    --green-soft:#8fd0a3;
    --green-line:rgba(90,158,111,.32);
    --black:#000000;
    --ink:#0a0a0b;           /* deep charcoal canvas */
    --ink-2:#101012;
    --panel:#141416;
    --panel-2:#1a1a1d;
    --line:rgba(227,152,41,.16);
    --line-soft:rgba(255,255,255,.08);
    --line-strong:rgba(227,152,41,.34);
    --white:#FFFFFF;
    --grey-1:#ece9e4;        /* warm off-white for body on dark */
    --grey-2:#bdb9b2;
    --grey-3:#8c8881;
    --grey-4:#5d5a55;
    --field:#0a0a0c;
    --maxw:1180px;
    --display:'Fraunces',Georgia,'Times New Roman',serif;
    --ui:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    --body:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:110px}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

  body{
    margin:0;
    font-family:var(--body);
    color:var(--grey-1);
    background:var(--ink);
    line-height:1.66;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:clip;
  }

  h1,h2,h3{
    font-family:var(--display);
    color:var(--white);
    line-height:1.07;
    margin:0;
    font-weight:500;
    letter-spacing:-.012em;
  }
  p{margin:0}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

  /* Skip link + visible focus for accessibility */
  .skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#1a1003;font-family:var(--ui);font-weight:600;padding:12px 18px;z-index:200;border-radius:2px}
  .skip:focus{left:12px;top:12px}
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
    outline:3px solid var(--gold);
    outline-offset:3px;
    border-radius:4px;
  }

  /* refined eyebrow / kicker */
  .eyebrow{
    font-family:var(--ui);
    text-transform:uppercase;
    letter-spacing:.34em;
    font-size:.68rem;
    font-weight:600;
    color:var(--gold);
    display:inline-flex;
    align-items:center;
    gap:14px;
  }
  .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);opacity:.7}

  /* ---------- BUTTONS ---------- */
  .btn{
    font-family:var(--ui);font-weight:600;font-size:.9rem;letter-spacing:.01em;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:14px 26px;cursor:pointer;border:1px solid transparent;
    transition:transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
    white-space:nowrap;border-radius:2px;
  }
  .btn-primary{background:var(--gold);color:#1a1003;box-shadow:0 10px 30px rgba(227,152,41,.18)}
  .btn-primary:hover{background:var(--gold-soft);transform:translateY(-2px);box-shadow:0 14px 38px rgba(227,152,41,.30)}
  .btn-ghost{background:transparent;color:var(--grey-1);border-color:var(--line-strong)}
  .btn-ghost:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold-soft)}
  .btn-lg{padding:17px 32px;font-size:.96rem}
  .btn-block{width:100%}
  @media (prefers-reduced-motion: reduce){.btn:hover{transform:none}}

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky;top:0;z-index:60;
    background:rgba(10,10,11,.82);
    backdrop-filter:blur(16px) saturate(115%);
    -webkit-backdrop-filter:blur(16px) saturate(115%);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-inner{display:flex;align-items:center;gap:16px;height:86px}
  /* Logo enlarged ~50% (36px to 54px) so "360 VID Virtual Tours" reads clearly */
  .nav-logo img{height:54px;width:auto}
  .nav-links{display:flex;gap:15px;margin-left:auto;align-items:center}
  .nav-item{position:relative;display:flex;align-items:center}
  .nav-links>a, .nav-top{
    font-family:var(--ui);font-weight:500;font-size:.82rem;color:var(--grey-2);
    letter-spacing:.005em;padding:6px 1px;position:relative;transition:color .2s ease;
    background:none;border:0;cursor:pointer;white-space:nowrap;
  }
  .nav-top{display:inline-flex;align-items:center;gap:5px}
  .nav-top svg{width:10px;height:10px;opacity:.85;transition:transform .2s ease}
  .nav-links>a:hover, .nav-top:hover,
  .nav-item:hover .nav-top, .nav-item:focus-within .nav-top, .nav-item.open .nav-top{color:var(--white)}
  .nav-item:hover .nav-top svg, .nav-item:focus-within .nav-top svg, .nav-item.open .nav-top svg{transform:rotate(180deg)}
  .nav-links>a::after, .nav-top::after{
    content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
    background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
  }
  .nav-links>a:hover::after, .nav-top:hover::after{transform:scaleX(1)}
  /* dropdown menus (hover, focus-within, or .open via click for touch) */
  .dropdown{
    position:absolute;top:calc(100% + 12px);left:50%;
    min-width:238px;background:rgba(13,13,16,.98);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid var(--line-soft);border-radius:8px;padding:8px;
    display:flex;flex-direction:column;gap:1px;
    box-shadow:0 26px 64px rgba(0,0,0,.6);z-index:80;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateX(-50%) translateY(6px);
    transition:opacity .2s ease, transform .2s ease;
  }
  /* Invisible hover bridge across the 12px gap between the button and the menu,
     spanning the full menu width, so moving the mouse to any child (incl. the
     left edge) never crosses a dead zone and the menu does not close early. */
  .dropdown::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
  .nav-item:hover .dropdown, .nav-item:focus-within .dropdown, .nav-item.open .dropdown{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  }
  .dropdown a{font-family:var(--ui);font-size:.82rem;font-weight:500;color:var(--grey-2);padding:9px 13px;border-radius:5px;white-space:nowrap}
  .dropdown a::after{display:none}
  .dropdown a:hover{background:rgba(227,152,41,.1);color:var(--white)}
  .dropdown .dd-note{font-family:var(--ui);font-size:.74rem;font-weight:500;color:var(--grey-3);padding:8px 13px 9px;line-height:1.45;white-space:normal;max-width:238px;border-bottom:1px solid var(--line-soft);margin-bottom:5px}
  .dropdown .dd-sub{font-family:var(--ui);font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-4);padding:8px 13px 4px}
  @media (prefers-reduced-motion: reduce){.dropdown,.nav-top svg{transition:none}}
  .nav-phones{display:flex;flex-direction:column;align-items:flex-end;line-height:1.18;gap:1px}
  .nav-tel{font-family:var(--ui);font-weight:600;color:var(--grey-1);font-size:.84rem;white-space:nowrap;letter-spacing:.01em}
  .nav-tel:hover{color:var(--gold-soft)}
  .nav-tel--tf{font-size:.84rem;font-weight:600;color:var(--gold-soft);letter-spacing:.01em}
  .nap-tf{font-size:.92em}
  .nav-cta{margin-left:2px;padding:11px 18px;font-size:.82rem}
  /* hamburger (mobile) */
  .nav-burger{display:none;background:none;border:1px solid var(--line-soft);border-radius:6px;width:46px;height:42px;cursor:pointer;align-items:center;justify-content:center;color:var(--grey-1)}
  .nav-burger svg{width:22px;height:22px}
  .nav-burger .x{display:none}
  .nav-open .nav-burger .bars{display:none}
  .nav-open .nav-burger .x{display:block}
  .mobile-menu{display:none;border-top:1px solid var(--line-soft);background:rgba(10,10,11,.99);max-height:calc(100vh - 86px);overflow-y:auto}
  .nav-open .mobile-menu{display:block}
  .mm-wrap{padding:8px 0 24px}
  .mobile-menu .mm-link{display:block;font-family:var(--ui);font-weight:600;font-size:1rem;color:var(--grey-1);padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .mobile-menu details{border-bottom:1px solid var(--line-soft)}
  .mobile-menu summary{display:flex;align-items:center;justify-content:space-between;font-family:var(--ui);font-weight:600;font-size:1rem;color:var(--grey-1);padding:14px 0;cursor:pointer;list-style:none}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu summary svg{width:14px;height:14px;color:var(--gold);transition:transform .2s ease}
  .mobile-menu details[open] summary svg{transform:rotate(180deg)}
  .mobile-menu .mm-sub{display:flex;flex-direction:column;padding:0 0 12px}
  .mobile-menu .mm-sub a{font-family:var(--ui);font-size:.9rem;color:var(--grey-2);padding:9px 12px}
  .mobile-menu .mm-sub a:hover{color:var(--gold)}
  .mobile-menu .mm-note{font-family:var(--ui);font-size:.8rem;color:var(--grey-4);padding:4px 12px 10px;line-height:1.5}
  .mobile-menu .mm-cta{margin:18px 0 0;display:flex;flex-direction:column;gap:12px}
  .mobile-menu .mm-tel{font-family:var(--ui);font-weight:600;color:var(--grey-1);font-size:.95rem;display:inline-flex;align-items:center;gap:9px;padding:6px 0}
  .mobile-menu .mm-tel svg{color:var(--gold)}
  @media (prefers-reduced-motion: reduce){.mobile-menu summary svg{transition:none}}
  @media (max-width:1120px){
    .nav-links,.nav-tel,.nav-phones,.nav-cta{display:none}
    .nav-burger{display:inline-flex;margin-left:auto}
  }
  @media (min-width:1121px){ .mobile-menu{display:none !important} }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;overflow:hidden;isolation:isolate;
    border-bottom:1px solid var(--line-soft);
    padding:44px 0 40px;
  }
  .hero-stage{position:absolute;inset:0;z-index:-2;background:#060607;overflow:hidden}
  .h-wash{
    position:absolute;inset:-10%;
    background:
      radial-gradient(80% 60% at 76% 18%, rgba(227,152,41,.16), transparent 58%),
      radial-gradient(90% 90% at 50% 130%, rgba(227,152,41,.08), transparent 60%),
      linear-gradient(180deg,#0c0c0e 0%, #08080a 60%, #060607 100%);
  }
  /* fine concentric "panorama" rings, the inside-a-tour cue, drawn in CSS */
  .h-rings{
    position:absolute;left:-16%;top:46%;transform:translateY(-50%);
    width:720px;height:720px;border-radius:50%;
    background:repeating-radial-gradient(circle at center,
      rgba(227,152,41,.10) 0 1px, transparent 1px 58px);
    -webkit-mask-image:radial-gradient(circle at center,#000 8%,transparent 72%);
    mask-image:radial-gradient(circle at center,#000 8%,transparent 72%);
    opacity:.6;animation:spin 90s linear infinite;
  }
  .h-grain{
    position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  @keyframes spin{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}

  .hero-grid{display:grid;grid-template-columns:1fr 1.04fr;gap:46px;align-items:start;position:relative;z-index:1}
  .hero h1{
    font-size:clamp(2.3rem,4.4vw,3.5rem);
    font-weight:500;letter-spacing:-.018em;margin:14px 0 0;
    text-wrap:balance;
  }
  .hero h1 .em{font-style:italic;color:var(--gold)}
  .hero .sub{
    font-family:var(--body);
    font-size:clamp(1rem,1.25vw,1.08rem);
    color:var(--grey-2);margin-top:13px;max-width:540px;
  }
  .hero-points{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:11px}
  .hero-points li{display:flex;gap:12px;align-items:flex-start;font-family:var(--ui);font-size:.9rem;color:var(--grey-1)}
  .hero-points svg{flex:none;color:var(--gold);margin-top:3px}

  /* ---------- HERO: real Google rating + trust chips + CTA (above the fold) ---------- */
  .stars{display:inline-flex;gap:2px;color:var(--gold);line-height:0}
  .stars svg{width:16px;height:16px;display:block}
  .g-rating{display:inline-flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:16px;padding:9px 16px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(227,152,41,.06)}
  .g-rating .g-score{font-family:var(--ui);font-weight:700;font-size:1.06rem;color:var(--white);letter-spacing:.01em}
  .g-rating .g-count{font-family:var(--ui);font-weight:600;font-size:.82rem;color:var(--grey-2)}
  /* Marquee credentials: the owner's headline trust proof, above the fold */
  .hero-marquee{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
  .hero-marquee li{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:.78rem;color:var(--white);border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px;background:linear-gradient(180deg,rgba(227,152,41,.12),rgba(227,152,41,.05))}
  .hero-marquee li svg{width:15px;height:15px;color:var(--gold);flex:none}
  .hero-marquee li .mq-sup{color:var(--gold-soft);font-weight:700}
  .hero-trust{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
  .hero-trust li{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:600;font-size:.76rem;color:var(--grey-1);border:1px solid var(--line-soft);border-radius:999px;padding:7px 13px;background:#0c0c0e}
  .hero-trust li svg{width:14px;height:14px;color:var(--gold);flex:none}
  /* compact above-the-fold credential chips, consolidated into one tidy block:
     Canadian, low-carbon, since 2014, insured, WCAG. Small inline chips, two rows at most. */
  .hero-creds{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:7px;max-width:560px}
  .hero-creds li{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);font-weight:600;font-size:.72rem;color:var(--white);border:1px solid var(--line-strong);border-radius:999px;padding:5px 11px;background:linear-gradient(180deg,rgba(227,152,41,.12),rgba(227,152,41,.05))}
  .hero-creds li svg{width:13px;height:13px;color:var(--gold);flex:none}
  .hero-creds a{display:inline-flex;align-items:center;gap:7px}
  .hero-creds a:hover{color:var(--gold-soft)}
  .hero-creds .cred-green{border-color:var(--green-line);background:linear-gradient(180deg,rgba(90,158,111,.16),rgba(90,158,111,.05))}
  .hero-creds .cred-green svg{color:var(--green-soft)}
  .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:18px}
  .hero-cta .hero-tel{font-family:var(--ui);font-weight:600;color:var(--grey-1);font-size:.9rem;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
  .hero-cta .hero-tel svg{color:var(--gold)}
  .hero-cta .hero-tel:hover{color:var(--gold-soft)}
  .hero-cta .hero-tels{display:flex;flex-direction:column;gap:5px}
  .hero-cta .hero-tel--tf{color:var(--gold-soft)}
  .hero-cta .hero-tel--tf:hover{color:var(--gold)}

  /* ---------- LIVE 360 PANO (hero, the product, made large) ---------- */
  .hero-visual{position:relative;z-index:1}
  .pano-block{margin-top:0}
  .pano-frame{position:relative;border:1px solid var(--line-strong);border-radius:5px;overflow:hidden;background:#060607;box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.03)}
  #pano-hero{width:100%;height:480px;background:#060607}
  .pano-fallback{width:100%;height:480px;object-fit:cover}
  .pano-cap-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 15px;border-top:1px solid var(--line-soft);background:rgba(0,0,0,.55)}
  .pano-cap{font-family:var(--ui);font-size:.82rem;color:var(--grey-1);font-weight:600;letter-spacing:.01em}
  .cap-illus{font-weight:400;font-style:italic;opacity:.72}
  /* thin translucent hint pinned INSIDE the viewer (hero + modal), not under it */
  .pano-drag-overlay{
    position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;
    display:inline-flex;align-items:center;gap:7px;
    font-family:var(--ui);font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    color:var(--grey-1);background:rgba(6,6,8,.6);border:1px solid var(--line-strong);border-radius:999px;padding:6px 13px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.4);
  }
  .pano-drag-overlay svg{width:14px;height:14px;color:var(--gold);flex:none}
  .scene-switch{margin-top:16px}
  .scene-switch .ssk{font-family:var(--ui);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-3);margin:0 0 11px;display:flex;align-items:center;gap:10px}
  .scene-switch .ssk::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.7}
  .scene-btns{display:flex;flex-wrap:wrap;gap:8px}
  .scene-btn{font-family:var(--ui);font-weight:500;font-size:.78rem;line-height:1.2;color:var(--grey-2);background:#0c0c0e;border:1px solid var(--line-soft);border-radius:999px;padding:8px 14px;cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}
  .scene-btn:hover{border-color:var(--line-strong);color:var(--white)}
  .scene-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-soft);background:rgba(227,152,41,.08);box-shadow:inset 0 0 0 1px var(--gold)}
  .scene-btn b{font-weight:600;color:inherit}
  .scene-btn .seg{color:var(--grey-4);font-weight:500}
  .scene-btn[aria-pressed="true"] .seg{color:var(--gold)}
  @media (max-width:980px){#pano-hero,.pano-fallback{height:320px}}

  /* ---------- CONCIERGE QUALIFIER (the Scope your tour tool, first section below hero) ---------- */
  .scope-band{padding:52px 0;background:linear-gradient(180deg,#0c0c0e,#080809);border-bottom:1px solid var(--line-soft)}
  .scope-band .scope-intro{max-width:780px;margin:0 auto 22px;text-align:center}
  .scope-band .scope-intro .eyebrow{justify-content:center}
  .scope-band .scope-intro h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:500;margin-top:14px}
  .scope-band .scope-intro h2 .em{font-style:italic;color:var(--gold)}
  .scope-band .scope-intro p{font-family:var(--ui);font-size:.9rem;color:var(--grey-3);margin-top:12px}
  .qbox{
    position:relative;border:1px solid var(--line-strong);
    background:linear-gradient(180deg,#0f0f12,#0a0a0c);
    border-radius:4px;overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
    max-width:780px;margin:0 auto;
    scroll-margin-top:110px;  /* clears the sticky nav so the full top of the form (progress + step 1 heading) shows after a #scope jump */
  }
  .qbox-top{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:18px 24px;border-bottom:1px solid var(--line-soft);
    background:linear-gradient(180deg,rgba(227,152,41,.07),transparent);
  }
  .qbox-top .tt{display:flex;align-items:center;gap:12px;font-family:var(--display);font-style:italic;font-weight:500;font-size:1.18rem;color:var(--white)}
  .qbox-top .tt svg{color:var(--gold);flex:none}
  .qbox-top .est{font-family:var(--ui);font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-strong);border-radius:999px;padding:5px 11px}

  /* progress */
  .qprog{padding:20px 24px 0}
  .qprog-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
  .qprog-row .lab{font-family:var(--ui);font-size:.64rem;font-weight:600;color:var(--grey-3);text-transform:uppercase;letter-spacing:.18em}
  .qprog-row .cnt{font-family:var(--ui);font-size:.78rem;color:var(--grey-3)}
  .qbar{height:2px;background:var(--line-soft);overflow:hidden}
  .qbar i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));transition:width .45s cubic-bezier(.2,.7,.2,1)}
  @media (prefers-reduced-motion:reduce){.qbar i{transition:none}}

  .qbody{padding:22px 24px 8px;min-height:248px}
  .qstep{display:none;border:0;margin:0;padding:0;min-inline-size:auto}
  .qstep.active{display:block;animation:qfade .3s ease}
  @keyframes qfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.qstep.active{animation:none}}
  .qstep .qq{font-family:var(--display);font-weight:500;font-size:1.34rem;color:var(--white);margin:0 0 6px;padding:0;display:block;line-height:1.2}
  .qstep .qhint{font-family:var(--ui);font-size:.84rem;color:var(--grey-3);margin:0 0 18px}

  /* option chips (radio cards) */
  .qopts{display:grid;gap:9px}
  .qopts.two{grid-template-columns:1fr 1fr}
  .qopt{position:relative}
  .qopt input{position:absolute;opacity:0;width:1px;height:1px}
  .qopt label{
    display:flex;align-items:center;gap:13px;cursor:pointer;
    border:1px solid var(--line-soft);border-radius:2px;padding:14px 15px;
    font-family:var(--ui);font-weight:500;font-size:.92rem;color:var(--grey-1);
    background:#0c0c0e;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
  }
  .qopt label .ic{width:34px;height:34px;border-radius:2px;border:1px solid var(--line-strong);color:var(--gold);display:flex;align-items:center;justify-content:center;flex:none;background:rgba(227,152,41,.06)}
  .qopt label .ic svg{width:18px;height:18px}
  .qopt label .sub{display:block;font-weight:400;font-size:.76rem;color:var(--grey-3);margin-top:2px}
  .qopt label:hover{border-color:var(--line-strong);background:#0f0f12}
  .qopt input:checked + label{border-color:var(--gold);background:rgba(227,152,41,.08);box-shadow:inset 0 0 0 1px var(--gold)}
  .qopt input:focus-visible + label{outline:3px solid var(--gold);outline-offset:2px}

  /* contact + fallback fields */
  .field{margin-bottom:14px}
  .field label{display:block;font-family:var(--ui);font-weight:600;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px;color:var(--grey-2)}
  .field label .req{color:var(--gold)}
  .field input,.field select{
    width:100%;padding:12px 14px;border:1px solid var(--line-soft);border-radius:2px;
    font-family:var(--body);font-size:.95rem;color:var(--white);background:var(--field);
    transition:border-color .2s ease,background .2s ease;
  }
  .field input::placeholder{color:var(--grey-4)}
  .field input:focus,.field select:focus{border-color:var(--gold);background:#0d0d10;outline:none}
  /* optional file input (site plans / floorplans) */
  .field input[type=file]{padding:9px 12px;font-family:var(--ui);font-size:.84rem;color:var(--grey-2);line-height:1.5;cursor:pointer}
  .field input[type=file]::file-selector-button{font-family:var(--ui);font-weight:600;font-size:.76rem;color:#1a1003;background:var(--gold);border:0;border-radius:2px;padding:8px 13px;margin-right:12px;cursor:pointer}
  .field input[type=file]::-webkit-file-upload-button{font-family:var(--ui);font-weight:600;font-size:.76rem;color:#1a1003;background:var(--gold);border:0;border-radius:2px;padding:8px 13px;margin-right:12px;cursor:pointer}
  .field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23E39829' stroke-width='2'><path d='M3 5l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

  /* estimate panel */
  .qest{border:1px solid var(--line-strong);border-radius:3px;padding:18px 20px;margin-bottom:18px;background:linear-gradient(180deg,rgba(227,152,41,.10),transparent)}
  .qest .ek{font-family:var(--ui);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
  .qest .ev{font-family:var(--display);font-size:1.9rem;font-weight:500;color:var(--white);line-height:1.1;margin:0 0 7px;letter-spacing:-.02em}
  .qest .ed{font-family:var(--ui);font-size:.84rem;color:var(--grey-2);margin:0}
  .qsummary{font-family:var(--ui);font-size:.78rem;color:var(--grey-3);margin:0 0 16px}
  .qsummary b{color:var(--grey-1);font-weight:600}

  /* nav buttons */
  .qnav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-top:1px solid var(--line-soft);background:rgba(0,0,0,.25)}
  .qback{background:none;border:0;color:var(--grey-3);font-family:var(--ui);font-weight:600;font-size:.86rem;cursor:pointer;padding:8px 6px;display:inline-flex;align-items:center;gap:7px;border-radius:4px;transition:color .2s ease}
  .qback:hover{color:var(--white)}
  .qback[hidden]{visibility:hidden}
  .qnext[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
  .qfine{font-family:var(--ui);font-size:.72rem;color:var(--grey-4);text-align:center;padding:0 24px 18px;margin:0}

  /* marketing consent (CASL): express opt-in, optional, never pre-checked */
  .qconsent{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:16px}
  .qconsent .clead{font-family:var(--ui);font-size:.78rem;color:var(--grey-2);margin:0 0 12px}
  .qcheck{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px}
  .qcheck:last-child{margin-bottom:0}
  .qcheck input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--gold);cursor:pointer}
  .qcheck label{font-family:var(--ui);font-size:.82rem;color:var(--grey-2);line-height:1.5;cursor:pointer}

  /* success */
  .qdone{display:none;text-align:center;padding:38px 26px 44px}
  .qdone .chk{width:60px;height:60px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(227,152,41,.08);color:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
  .qdone h3{font-family:var(--display);font-size:1.5rem;font-weight:500}
  .qdone p{font-family:var(--ui);color:var(--grey-2);max-width:38ch;margin:10px auto 0;font-size:.92rem}
  .qdone a{color:var(--gold-soft)}
  .qdone a:hover{color:var(--gold)}

  /* fallback plain form (shown when no JS / reduced motion) */
  .qualifier-fallback{padding:26px 24px 24px}
  .qualifier-fallback h3{font-family:var(--display);font-size:1.4rem;font-weight:500;margin-bottom:4px}
  .qualifier-fallback .sub{font-family:var(--ui);font-size:.86rem;color:var(--grey-3);margin-bottom:20px}
  .qfb-status{display:none;margin-top:16px;padding:13px 16px;border-radius:3px;border:1px solid var(--line-strong);background:rgba(227,152,41,.08);color:var(--gold-soft);font-family:var(--ui);font-size:.88rem}
  .qfb-fine{font-family:var(--ui);font-size:.74rem;color:var(--grey-4);margin:14px 0 0;text-align:center}
  /* JS-state visibility: enhanced -> show stepper, hide fallback. default -> opposite. */
  .qualifier{display:none}
  .enhanced .qualifier{display:block}
  .enhanced .qualifier-fallback{display:none}

  /* ---------- TRUST BAR ---------- */
  .trust{background:var(--black);border-bottom:1px solid var(--line-soft)}
  /* compact marquee-credentials strip relocated out of the hero, sits atop the trust bar */
  .cred-strip{list-style:none;margin:0;padding:22px 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;border-bottom:1px solid var(--line-soft)}
  .cred-strip li{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:.78rem;color:var(--white);border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px;background:linear-gradient(180deg,rgba(227,152,41,.12),rgba(227,152,41,.05))}
  .cred-strip li svg{width:15px;height:15px;color:var(--gold);flex:none}
  .cred-strip .mq-sup{color:var(--gold-soft);font-weight:700}
  .trust-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  .trust-item{display:flex;align-items:center;gap:13px;padding:20px 22px;border-left:1px solid var(--line-soft)}
  .trust-item:first-child{border-left:0}
  .trust-item svg{flex:none;color:var(--gold)}
  .trust-item b{display:block;font-family:var(--ui);font-weight:600;color:var(--white);font-size:.9rem;line-height:1.25}
  .trust-item span{font-family:var(--ui);font-size:.76rem;color:var(--grey-3)}
  @media(max-width:860px){.trust-inner{grid-template-columns:1fr 1fr}.trust-item:nth-child(odd){border-left:0}.trust-item:nth-child(n+3){border-top:1px solid var(--line-soft)}}
  @media(max-width:480px){.trust-inner{grid-template-columns:1fr}.trust-item{border-left:0;border-top:1px solid var(--line-soft)}.trust-item:first-child{border-top:0}}

  /* ---------- CLIENT LOGO WALL (understated, premium trust band) ---------- */
  .clients{background:linear-gradient(180deg,#0c0c0e,#080809);border-bottom:1px solid var(--line-soft);padding:36px 0}
  .clients-head{text-align:center;max-width:640px;margin:0 auto 24px}
  .clients-head .eyebrow{justify-content:center}
  .clients-head h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:500;margin-top:16px}
  .clients-head h2 .em{font-style:italic;color:var(--gold)}
  .clients-head p{font-family:var(--ui);font-size:.86rem;color:var(--grey-3);margin-top:14px}
  /* Refined, muted cream chips with hairline dividers above/below. Understated, not a bright billboard. */
  /* Tiles roughly doubled (134x68 to 270x138, logo padding scaled up) so the brand text inside reads clearly. Still wraps; fewer per row is fine. */
  .logo-wall{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;list-style:none;margin:0;padding:24px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
  .logo-wall li{flex:0 0 auto}
  .logo-tile{width:270px;height:138px;background:#ece7dd;border-radius:8px;border:1px solid rgba(236,231,221,.12);display:flex;align-items:center;justify-content:center;padding:24px 32px;box-shadow:none}
  .logo-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
  /* City of Edmonton svg is dark-recolored; let it fill the light tile so it reads (was tiny/white before) */
  .logo-tile--fill{padding:18px 24px}
  .logo-tile--fill img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
  @media(max-width:680px){.logo-tile{width:80vw;height:118px;padding:18px 24px}}
  /* selected-clients named row (marquee tours with no logo file) */
  .named-clients{margin-top:30px;text-align:center}
  .named-clients .nk{font-family:var(--ui);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-3);margin:0 0 16px;display:inline-flex;align-items:center;gap:10px}
  .named-clients .nk::before,.named-clients .nk::after{content:"";width:22px;height:1px;background:var(--gold);opacity:.7}
  .named-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;list-style:none;padding:0;margin:0;gap:6px 0}
  .named-row li{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.02rem;color:var(--grey-1);padding:0 18px;position:relative;line-height:1.35;text-wrap:balance}
  .named-row li::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.6}
  .named-row li:last-child::after{display:none}

  /* ---------- FEATURED TOURS STRIP (relocated out of the hero) ---------- */
  /* The canonical list of real published tours. Each chip opens that scene in the
     fullscreen tour modal (reuses openTour). Lives below the hero, above the logo wall. */
  .featured{background:var(--ink);border-bottom:1px solid var(--line-soft);padding:30px 0}
  .featured-head{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin-bottom:16px}
  .featured-head .fk{font-family:var(--ui);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:10px}
  .featured-head .fk::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.7}
  .featured-head .fnote{font-family:var(--ui);font-size:.82rem;color:var(--grey-3)}
  .feat-row{display:flex;flex-wrap:wrap;gap:9px}
  .feat-tour{font-family:var(--ui);font-weight:500;font-size:.8rem;line-height:1.2;color:var(--grey-1);background:#0c0c0e;border:1px solid var(--line-soft);border-radius:999px;padding:9px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:border-color .18s ease,color .18s ease,background .18s ease}
  .feat-tour:hover{border-color:var(--gold);color:var(--white);background:rgba(227,152,41,.08)}
  .feat-tour b{font-weight:600;color:inherit}
  .feat-tour .seg{color:var(--grey-4);font-weight:500}
  .feat-tour:hover .seg{color:var(--gold-soft)}
  .feat-tour svg{width:14px;height:14px;color:var(--gold);flex:none;opacity:.85}

  /* ---------- REVIEWS (real Google reviews) ---------- */
  .rev-agg{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;border:1px solid var(--line-strong);border-radius:999px;padding:12px 24px;background:rgba(227,152,41,.06);margin-top:20px}
  .rev-agg .stars svg{width:20px;height:20px}
  .rev-agg .ra-score{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.5rem;color:var(--white);line-height:1}
  .rev-agg .ra-of{font-family:var(--ui);font-size:.82rem;font-weight:600;color:var(--grey-2)}
  /* denser 2x2 card grid keeps all 4 quotes but trims height ~40% */
  .reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
  .review{background:var(--ink);padding:17px 19px;display:flex;flex-direction:column;gap:9px}
  .review .stars svg{width:15px;height:15px}
  .review blockquote{margin:0;font-family:var(--body);font-size:.86rem;color:var(--grey-1);line-height:1.52}
  .review .rmeta{margin-top:auto;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
  .review .rwho{font-family:var(--ui);font-weight:600;font-size:.82rem;color:var(--grey-2)}
  .review .rtag{font-family:var(--ui);font-weight:600;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-strong);border-radius:999px;padding:5px 11px;display:inline-flex;align-items:center;gap:6px}
  .review .rtag svg{width:12px;height:12px;flex:none}
  .rev-all{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--ui);font-weight:600;color:var(--gold);font-size:.88rem;transition:gap .2s ease}
  .rev-all:hover{color:var(--gold-soft);gap:13px}

  /* ---------- SECTION SHELL ---------- */
  section{position:relative}
  .band{padding:64px 0}
  .band-ink{background:var(--ink)}
  .band-panel{background:linear-gradient(180deg,#0c0c0e,#080809)}
  .band-black{background:var(--black)}
  .sec-head{max-width:720px;margin-bottom:36px}
  .sec-head h2{font-size:clamp(2rem,3.7vw,3.1rem);margin-top:20px;font-weight:500}
  .sec-head h2 .em{font-style:italic;color:var(--gold)}
  .sec-head p{color:var(--grey-2);margin-top:20px;font-size:1.06rem}
  .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .sec-head.center .eyebrow{justify-content:center}

  /* scroll reveal */
  html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  html.js .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1 !important;transform:none !important;transition:none}
    .h-rings{animation:none !important}
  }

  /* ---------- BUYER PATHS ---------- */
  /* align-items:stretch keeps the three columns equal-height and top-aligned, so a wrapping bullet never kicks a column out of line */
  .paths{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
  .path{
    position:relative;background:var(--ink);padding:30px 30px 28px;overflow:hidden;
    display:flex;flex-direction:column;transition:background .3s ease;
  }
  .path .phead{display:flex;align-items:center;gap:0;min-height:24px}
  .path:hover{background:var(--panel)}
  .path::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--gold);transition:width .4s ease}
  .path:hover::after{width:100%}
  @media (prefers-reduced-motion: reduce){.path::after{transition:none}}
  .path .num{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1.1rem}
  .path .tag{font-family:var(--ui);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-4);margin-left:10px}
  .path h3{font-size:1.6rem;margin:18px 0 14px;font-weight:500}
  .path .lede{color:var(--grey-2);font-size:.95rem}
  .path ul{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px}
  .path li{display:flex;gap:11px;color:var(--grey-2);font-size:.89rem;font-family:var(--ui)}
  .path li svg{flex:none;color:var(--gold);margin-top:3px}
  .path .pathlink{font-family:var(--ui);font-weight:600;color:var(--gold);font-size:.85rem;display:inline-flex;align-items:center;gap:8px;letter-spacing:.02em;margin-top:auto;transition:gap .2s ease}
  .path .pathlink:hover{gap:13px}
  .badge-airgap{display:inline-block;font-family:var(--ui);font-weight:600;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px;margin-bottom:12px}

  /* ---------- PROOF GALLERY (real 360 thumbnails) ---------- */
  .gallery-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
  .scroller{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:1px;background:var(--line-soft);
    border:1px solid var(--line-soft);
  }
  .scroller::-webkit-scrollbar{height:8px}
  .scroller::-webkit-scrollbar-thumb{background:var(--grey-4)}
  .scroller::-webkit-scrollbar-track{background:transparent}
  button.tour{
    scroll-snap-align:start;background:var(--ink);display:flex;flex-direction:column;
    text-align:left;border:0;font:inherit;color:inherit;padding:0;cursor:pointer;
    transition:background .3s ease;
  }
  button.tour:hover{background:var(--panel)}
  .tour-visual{
    position:relative;aspect-ratio:16/10;overflow:hidden;background:#070708;
    border-bottom:1px solid var(--line-soft);
  }
  .tour-visual img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
  .tour:hover .tour-visual img{transform:scale(1.05)}
  .tour-visual::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.62))}
  .tour-visual .vlabel{
    position:absolute;left:12px;bottom:12px;z-index:2;
    font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--white);background:rgba(0,0,0,.55);border:1px solid var(--line-strong);
    padding:6px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;
    transition:background .2s ease,border-color .2s ease;
  }
  .tour-visual .vlabel svg{color:var(--gold)}
  .tour:hover .tour-visual .vlabel{background:rgba(227,152,41,.16);border-color:var(--gold)}
  .tour-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
  .tour-body .cat{font-family:var(--ui);font-weight:600;color:var(--gold);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase}
  .tour-body h3{font-size:1.24rem;font-weight:500}
  .tour-body p{color:var(--grey-3);font-size:.89rem}
  @media (prefers-reduced-motion: reduce){.tour:hover .tour-visual img{transform:none}}
  .scroll-hint{font-family:var(--ui);font-size:.78rem;color:var(--grey-4);display:inline-flex;align-items:center;gap:8px}
  .proof-note{margin-top:20px;font-family:var(--ui);font-size:.82rem;color:var(--grey-4);max-width:78ch}
  /* compact thumbnail strip: the 9 real panos as small clickable tiles that load the hero viewer (no duplication of the big hero cards) */
  .thumb-strip{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
  .thumb-strip li{flex:0 0 auto}
  button.thumb{position:relative;width:166px;display:flex;flex-direction:column;text-align:left;border:1px solid var(--line-soft);background:var(--ink);font:inherit;color:inherit;padding:0;cursor:pointer;border-radius:3px;overflow:hidden;transition:border-color .2s ease,background .2s ease}
  button.thumb:hover{border-color:var(--gold);background:var(--panel)}
  .thumb img{width:100%;height:100px;object-fit:cover;display:block;border-bottom:1px solid var(--line-soft)}
  .thumb .tcap{padding:8px 10px 9px;font-family:var(--ui);font-size:.72rem;font-weight:600;color:var(--grey-1);line-height:1.25}
  .thumb .ttag{display:block;margin-top:2px;font-weight:600;font-size:.6rem;letter-spacing:.03em;color:var(--gold)}
  @media(max-width:680px){button.thumb{width:46vw}.thumb img{height:88px}}
  /* proof/work gallery: sector groups of thumbnail tiles */
  .proof-group{margin-top:34px}
  .proof-group:first-of-type{margin-top:6px}
  .proof-group>h3{font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;display:flex;align-items:center;gap:10px}
  .proof-group>h3::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.7}

  /* ---------- CREDIBILITY: 360 photo vs cloud 3D ---------- */
  .cred{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
  .cred-copy h2{font-size:clamp(1.9rem,3.1vw,2.7rem);margin-bottom:20px;font-weight:500}
  .cred-copy h2 .em{font-style:italic;color:var(--gold)}
  .cred-copy p{color:var(--grey-2);margin-bottom:16px}
  .cred-copy .note{font-family:var(--ui);font-size:.9rem;color:var(--grey-2);border-left:2px solid var(--gold);padding-left:18px;margin-top:6px}
  .cred-card{border:1px solid var(--line-soft);background:linear-gradient(180deg,#0e0e11,#0a0a0c)}
  .cred-split{display:grid;grid-template-columns:1fr 1fr}
  .cs{padding:22px 24px}
  .cs+.cs{border-left:1px solid var(--line-soft)}
  .cs h3,.cs h4{font-family:var(--ui);font-size:.95rem;margin:0 0 16px;display:flex;align-items:center;gap:10px;color:var(--white);font-weight:600}
  .cs ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
  .cs li{font-family:var(--ui);font-size:.85rem;color:var(--grey-2);display:flex;gap:10px}
  .cs li svg{flex:none;margin-top:2px}
  .cs.win{background:linear-gradient(180deg,rgba(227,152,41,.07),transparent)}
  .cs.win li svg{color:var(--gold)}
  .cs.alt h3,.cs.alt h4{color:var(--grey-2)} .cs.alt li{color:var(--grey-3)} .cs.alt li svg{color:var(--grey-4)}

  /* ---------- PRICING ---------- */
  .price{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
  .tier{background:var(--ink);padding:30px 28px;display:flex;flex-direction:column}
  .tier.feature{background:linear-gradient(180deg,rgba(227,152,41,.08),var(--panel));position:relative}
  .tier.feature{overflow:visible}
  .tier.feature::before{content:"Most programs";position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-family:var(--ui);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);background:var(--ink);border:1px solid var(--gold);border-radius:999px;padding:4px 12px;white-space:nowrap;z-index:2}
  .tier .seg{font-family:var(--ui);font-weight:600;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
  .tier .amt{font-family:var(--display);font-weight:500;color:var(--white);font-size:2.4rem;margin:16px 0 4px;letter-spacing:-.02em}
  .tier .amt small{font-family:var(--ui);font-size:.84rem;color:var(--grey-3);font-weight:500}
  .tier .who{color:var(--grey-2);font-size:.93rem;margin-bottom:20px}
  .tier ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
  .tier li{font-family:var(--ui);font-size:.87rem;color:var(--grey-2);display:flex;gap:10px}
  .tier li svg{flex:none;color:var(--gold);margin-top:3px}
  .tier .tier-cta{margin-top:auto}
  .price-foot{margin-top:20px;color:var(--grey-4);font-family:var(--ui);font-size:.86rem;text-align:center}
  /* "How we price" callout: per photo and per quality grade, not per square foot */
  .how-price{border:1px solid var(--line-strong);border-left:3px solid var(--gold);border-radius:4px;background:linear-gradient(180deg,rgba(227,152,41,.10),transparent);padding:22px 26px;margin:0 0 24px}
  .how-price .hp-k{font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .how-price .hp-k svg{width:16px;height:16px;flex:none}
  .how-price p{font-family:var(--ui);font-size:.97rem;color:var(--grey-1);line-height:1.62;margin:0}
  .how-price p b{color:var(--white);font-weight:600}

  /* ---------- CAPTURE-GRADE SLIDER (drag to compare grades) ---------- */
  .grade-tool{max-width:1000px;margin:0 auto}
  .grade-stage{position:relative;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;background:#060607;box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.03)}
  .grade-stage img{width:100%;max-width:100%;height:auto;display:block;aspect-ratio:2/1;object-fit:cover}
  .grade-badge{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--ui);font-weight:600;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--white);background:rgba(6,6,8,.62);border:1px solid var(--line-strong);border-radius:999px;padding:9px 16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.4)}
  .grade-badge b{color:var(--gold-soft);font-weight:700}
  .grade-controls{margin-top:26px;padding:0 4px}
  .grade-controls input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep),var(--gold));cursor:pointer;margin:0}
  .grade-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--gold);border:3px solid #1a1003;box-shadow:0 4px 16px rgba(227,152,41,.55);cursor:pointer}
  .grade-controls input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--gold);border:3px solid #1a1003;box-shadow:0 4px 16px rgba(227,152,41,.55);cursor:pointer}
  .grade-controls input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:transparent}
  .grade-ticks{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--ui);font-size:.72rem;font-weight:600;color:var(--grey-3);gap:8px}
  .grade-ticks span{flex:1;text-align:center}
  .grade-ticks span:first-child{text-align:left}
  .grade-ticks span:last-child{text-align:right}
  .grade-ticks span.on{color:var(--gold-soft)}
  .grade-cap{font-family:var(--ui);font-size:.92rem;color:var(--grey-2);line-height:1.6;max-width:820px;margin:24px auto 0;text-align:center}

  /* ---------- FINAL CTA ---------- */
  .final{position:relative;overflow:hidden;border-top:1px solid var(--line-soft);background:var(--black)}
  .final .h-wash{position:absolute;inset:0;z-index:0}
  .final-inner{position:relative;z-index:1;text-align:center;padding:64px 0;max-width:760px;margin:0 auto}
  .final h2{font-size:clamp(2.1rem,4.2vw,3.5rem);font-weight:500}
  .final h2 .em{font-style:italic;color:var(--gold)}
  .final p{color:var(--grey-2);margin:22px auto 36px;font-size:1.08rem;max-width:560px}
  .final-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .final-tel{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--ui);font-weight:600;color:var(--grey-1);font-size:.9rem}
  .final-tel svg{color:var(--gold)}
  .final-tel:hover{color:var(--gold-soft)}
  .final-tels{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:24px}
  .final-tels .final-tel{margin-top:0}
  .final-tel--tf{color:var(--gold-soft);font-size:.84rem}
  .final-tel--tf:hover{color:var(--gold)}

  /* ---------- FOOTER ---------- */
  footer{background:var(--black);border-top:1px solid var(--line-soft);padding:52px 0 32px}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px}
  .foot-logo img{height:58px;margin-bottom:20px}
  .foot-grid p{color:var(--grey-3);font-size:.89rem}
  .foot-sisters{margin-top:16px;font-size:.82rem;color:var(--grey-3);line-height:1.6}
  .foot-sisters a{color:var(--gold-soft);font-family:var(--ui);font-weight:600}
  .foot-sisters a:hover{color:var(--gold)}
  .foot-sister-logo{height:22px;width:auto;display:inline-block;vertical-align:middle;margin-left:10px;opacity:.9}
  .foot-col h3,.foot-col h4{font-family:var(--ui);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-4);margin:0 0 18px;font-weight:600}
  .foot-col a{display:block;color:var(--grey-2);font-family:var(--ui);font-size:.89rem;padding:5px 0;transition:color .2s}
  .foot-col a:hover{color:var(--gold)}
  address.nap{font-style:normal;color:var(--grey-2);font-size:.9rem;line-height:1.95;font-family:var(--ui)}
  address.nap strong{color:var(--white);font-weight:600}
  address.nap a{color:var(--gold-soft)}
  address.nap a:hover{color:var(--gold)}
  .foot-bottom{border-top:1px solid var(--line-soft);margin-top:36px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;color:var(--grey-4);font-family:var(--ui);font-size:.78rem}
  .foot-bottom a{color:var(--grey-4)} .foot-bottom a:hover{color:var(--grey-2)}

  /* ---------- PROOF LEDE (relocated intro paragraph) ---------- */
  .proof-lede{font-family:var(--ui);font-size:.95rem;color:var(--grey-2);max-width:82ch;line-height:1.62;margin:0 0 26px}
  .proof-lede b{color:var(--grey-1);font-weight:600}

  /* ---------- USE-CASE CARDS ---------- */
  .uses{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
  .use{background:var(--ink);padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;transition:background .3s ease}
  .use:hover{background:var(--panel)}
  .use .uic{width:40px;height:40px;border-radius:3px;border:1px solid var(--line-strong);background:rgba(227,152,41,.06);color:var(--gold);display:flex;align-items:center;justify-content:center;flex:none}
  .use .uic svg{width:21px;height:21px}
  .use h3{font-size:1.12rem;font-weight:500}
  .use p{font-family:var(--ui);font-size:.86rem;color:var(--grey-2);line-height:1.5}
  @media(max-width:900px){.uses{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.uses{grid-template-columns:1fr}}

  /* ---------- HOW IT WORKS ---------- */
  .how{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
  .how-step{background:var(--ink);padding:26px 22px;display:flex;flex-direction:column;gap:11px}
  .how-step .hn{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1.5rem;line-height:1}
  .how-step h3{font-size:1.04rem;font-weight:500}
  .how-step p{font-family:var(--ui);font-size:.83rem;color:var(--grey-2);line-height:1.5}
  @media(max-width:900px){.how{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.how{grid-template-columns:1fr}}

  /* ---------- DEPOSITIONING (why $7,000, not $700) ---------- */
  .depo{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
  .depo-col{background:var(--ink);padding:28px 24px;display:flex;flex-direction:column}
  .depo-col.mid{background:linear-gradient(180deg,rgba(227,152,41,.10),var(--panel));position:relative}
  .depo-col.mid::before{content:"Right value";position:absolute;top:16px;right:16px;font-family:var(--ui);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-strong);border-radius:999px;padding:4px 10px}
  .depo-col .dk{font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-4)}
  .depo-col.mid .dk{color:var(--gold)}
  .depo-col .dprice{font-family:var(--display);font-weight:500;color:var(--white);font-size:1.5rem;margin:12px 0 4px;letter-spacing:-.01em}
  .depo-col .dwho{font-family:var(--ui);font-size:.84rem;color:var(--grey-3);margin-bottom:16px}
  .depo-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
  .depo-col li{font-family:var(--ui);font-size:.84rem;color:var(--grey-2);display:flex;gap:9px}
  .depo-col li svg{flex:none;margin-top:2px;color:var(--grey-4)}
  .depo-col.mid li svg{color:var(--gold)}
  .depo-verdict{margin:26px auto 0;text-align:center;font-family:var(--display);font-style:italic;font-size:clamp(1.12rem,2vw,1.4rem);color:var(--white);max-width:780px;line-height:1.42}
  .depo-verdict b{color:var(--gold-soft);font-style:normal;font-weight:500}
  @media(max-width:880px){.depo{grid-template-columns:1fr}}
  .depo-complement{margin:16px auto 0;text-align:center;font-family:var(--ui);font-size:.94rem;color:var(--grey-2);max-width:780px;line-height:1.6}
  .depo-complement b{color:var(--gold-soft);font-weight:600}

  /* ---------- QUALITY & CAPABILITY ---------- */
  .qual{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
  .qcard{background:var(--ink);padding:24px 22px 26px;display:flex;flex-direction:column;gap:11px;transition:background .3s ease}
  .qcard:hover{background:var(--panel)}
  .qcard .qic{width:40px;height:40px;border-radius:3px;border:1px solid var(--line-strong);background:rgba(227,152,41,.06);color:var(--gold);display:flex;align-items:center;justify-content:center;flex:none}
  .qcard .qic svg{width:21px;height:21px}
  .qcard h3{font-size:1.06rem;font-weight:500}
  .qcard p{font-family:var(--ui);font-size:.84rem;color:var(--grey-2);line-height:1.5}
  .qcard p b{color:var(--white);font-weight:600}
  @media(max-width:900px){.qual{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.qual{grid-template-columns:1fr}}

  /* ---------- GREEN / LOW-CARBON (green accent alongside brand orange) ---------- */
  .green{background:linear-gradient(180deg,#0a0f0c,#080b09);border-top:1px solid var(--green-line);border-bottom:1px solid var(--green-line)}
  .green .eyebrow{color:var(--green-soft)}
  .green .eyebrow::before{background:var(--green-soft)}
  .green .sec-head h2 .em{color:var(--green-soft);font-style:italic}
  .green-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
  .green-pt{background:#090d0a;padding:22px 24px;display:flex;gap:13px;align-items:flex-start}
  .green-pt svg{flex:none;width:22px;height:22px;color:var(--green-soft);margin-top:2px}
  .green-pt p{font-family:var(--ui);font-size:.89rem;color:var(--grey-1);line-height:1.52}
  .green-pt b{color:var(--white);font-weight:600}
  @media(max-width:760px){.green-grid{grid-template-columns:1fr}}

  /* ---------- FAQ ACCORDION ---------- */
  .faq{max-width:840px;margin:0 auto}
  .faq details{border:1px solid var(--line-soft);border-radius:4px;background:linear-gradient(180deg,#0e0e11,#0a0a0c);margin-bottom:10px;overflow:hidden}
  .faq details[open]{border-color:var(--line-strong)}
  .faq summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--ui);font-weight:600;font-size:.98rem;color:var(--white)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .fic{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);color:var(--gold);display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
  .faq summary .fic svg{width:13px;height:13px}
  .faq details[open] summary .fic{transform:rotate(45deg)}
  .faq .fa-body{padding:0 22px 20px;font-family:var(--body);font-size:.92rem;color:var(--grey-2);line-height:1.6}
  @media (prefers-reduced-motion: reduce){.faq summary .fic{transition:none}}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .hero{padding:44px 0 40px}
    .hero-grid{grid-template-columns:1fr;gap:30px;align-items:start}
    .hero-copy{max-width:580px}
    .scope-band{padding:40px 0}
    .paths,.price{grid-template-columns:1fr}
    .cred{grid-template-columns:1fr;gap:30px}
    .foot-grid{grid-template-columns:1fr 1fr}
    .band{padding:44px 0}
  }
  @media (max-width:560px){
    .wrap{padding:0 20px}
    .qopts.two{grid-template-columns:1fr}
    .field-row{grid-template-columns:1fr}
    .cred-split{grid-template-columns:1fr}
    .cs+.cs{border-left:0;border-top:1px solid var(--line-soft)}
    .reviews-grid{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
  }

  /* ---------- "EXPLORE FULL TOUR" trigger (under hero pano) ---------- */
  .pano-actions{margin-top:14px}
  .pano-open{gap:11px}
  .pano-open svg{width:18px;height:18px;flex:none}
  /* Homepage hero: drag hint moves to top-left so the Explore-tour button sits beside it,
     overlaid on the photo. Scoped to .has-cta so sub-page panos are untouched. */
  .pano-frame.has-cta .pano-drag-overlay{left:14px;transform:none}
  .pano-cta-overlay{position:absolute;top:10px;right:10px;z-index:7;display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.01em;color:#fff;padding:8px 13px;border-radius:999px;background:rgba(8,8,10,.6);border:1px solid rgba(255,255,255,.24);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:pointer;transition:background .15s ease,border-color .15s ease}
  .pano-cta-overlay svg{width:15px;height:15px;flex:none}
  .pano-cta-overlay:hover{background:rgba(8,8,10,.82);border-color:rgba(255,255,255,.4)}
  .pano-cta-overlay:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* Featured real tours, kept above the fold under the live hero preview. */
  .hero-featured{margin-top:16px}
  .hero-featured .featured-head{margin-bottom:11px}
  .hero-featured .fk{font-size:.95rem}
  @media (max-width:560px){.pano-cta-overlay{font-size:.66rem;padding:7px 10px}.pano-cta-overlay svg{width:13px;height:13px}}

  /* ---------- FULLSCREEN TOUR MODAL (second Pannellum viewer + hotspots + persistent CTA) ---------- */
  .tour-modal{position:fixed;inset:0;z-index:300;display:none}
  .tour-modal.open{display:block}
  .tour-modal[hidden]{display:none}
  .tm-backdrop{position:absolute;inset:0;background:rgba(4,4,5,.88);backdrop-filter:blur(6px) saturate(110%);-webkit-backdrop-filter:blur(6px) saturate(110%)}
  .tm-panel{
    position:absolute;inset:2.4vh 2.4vw;display:flex;flex-direction:column;
    background:var(--ink);border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;
    box-shadow:0 50px 120px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.03);
  }
  .tm-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(227,152,41,.07),transparent)}
  .tm-cap{font-family:var(--ui);font-weight:600;font-size:.92rem;color:var(--white);letter-spacing:.01em;flex:1;min-width:0;line-height:1.3}
  .tm-eyebrow{font-family:var(--ui);font-weight:600;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-strong);border-radius:999px;padding:5px 11px;flex:none;display:inline-flex;align-items:center;gap:7px}
  .tm-eyebrow svg{width:12px;height:12px}
  .tm-close{flex:none;width:42px;height:42px;border-radius:6px;border:1px solid var(--line-soft);background:#0c0c0e;color:var(--grey-1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .18s ease,color .18s ease,background .18s ease}
  .tm-close:hover{border-color:var(--gold);color:var(--gold-soft);background:var(--panel)}
  .tm-close svg{width:20px;height:20px}
  .tm-stage{position:relative;flex:1;min-height:0;background:#060607}
  #pano-modal{position:absolute;inset:0;width:100%;height:100%;background:#060607}
  /* persistent CTA overlay: pinned over the pano, always visible while exploring */
  .tm-cta{
    position:absolute;left:0;right:0;bottom:0;z-index:5;
    display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;
    padding:14px 18px;
    background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.32) 65%,transparent);
    pointer-events:none;
  }
  .tm-cta .tm-cta-lead{margin-right:auto;font-family:var(--ui);font-weight:600;font-size:.8rem;color:var(--grey-1);pointer-events:none;display:flex;align-items:center;gap:9px}
  .tm-cta .tm-cta-lead svg{width:16px;height:16px;color:var(--gold);flex:none}
  .tm-cta .btn{pointer-events:auto;box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .tm-cta .tm-cta-call{background:rgba(10,10,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .tm-cta .tm-cta-call svg{width:17px;height:17px;color:var(--gold)}
  /* in-modal scene switcher: move between full tours without leaving fullscreen */
  .tm-switch{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-top:1px solid var(--line-soft);background:rgba(0,0,0,.4);max-height:30vh;overflow-y:auto}
  .tm-sbtn{font-family:var(--ui);font-weight:500;font-size:.76rem;line-height:1.2;color:var(--grey-2);background:#0c0c0e;border:1px solid var(--line-soft);border-radius:999px;padding:8px 14px;cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}
  .tm-sbtn:hover{border-color:var(--line-strong);color:var(--white)}
  .tm-sbtn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-soft);background:rgba(227,152,41,.08);box-shadow:inset 0 0 0 1px var(--gold)}
  @media (max-width:680px){
    .tm-panel{inset:0;border-radius:0;border:0}
    .tm-cta{justify-content:stretch}
    .tm-cta .btn{flex:1 1 auto;justify-content:center}
    .tm-cta .tm-cta-lead{display:none}
  }
  @media (prefers-reduced-motion: reduce){.tm-close{transition:none}.tm-sbtn{transition:none}}

  /* ---------- SCOPE YOUR TOUR MODAL (the qualifier as a popup) ---------- */
  .scope-modal{position:fixed;inset:0;z-index:320;display:none}
  .scope-modal.open{display:block}
  .scope-modal[hidden]{display:none}
  .sm-backdrop{position:fixed;inset:0;background:rgba(4,4,5,.88);backdrop-filter:blur(6px) saturate(110%);-webkit-backdrop-filter:blur(6px) saturate(110%)}
  .sm-scroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(4vh,22px) 20px}
  .sm-panel{
    position:relative;width:100%;max-width:820px;margin:0 auto;
    background:var(--ink);border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;
    box-shadow:0 50px 120px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.03);
    animation:smIn .26s cubic-bezier(.2,.7,.2,1);
  }
  @keyframes smIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion: reduce){.sm-panel{animation:none}}
  .sm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 4px}
  .sm-intro{flex:1;min-width:0}
  .sm-intro .eyebrow{margin-bottom:12px}
  .sm-intro h2{font-size:clamp(1.4rem,2.5vw,1.95rem);font-weight:500;letter-spacing:-.012em}
  .sm-intro h2 .em{font-style:italic;color:var(--gold)}
  .sm-intro p{font-family:var(--ui);font-size:.88rem;color:var(--grey-3);margin-top:11px}
  .sm-close{flex:none;width:42px;height:42px;border-radius:6px;border:1px solid var(--line-soft);background:#0c0c0e;color:var(--grey-1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .18s ease,color .18s ease,background .18s ease}
  .sm-close:hover{border-color:var(--gold);color:var(--gold-soft);background:var(--panel)}
  .sm-close svg{width:20px;height:20px}
  .sm-body{padding:18px 24px 26px}
  /* the qbox inside the modal needs no scroll-margin or drop shadow doubling */
  .scope-modal .qbox{max-width:none;box-shadow:none;scroll-margin-top:0}
  @media (prefers-reduced-motion: reduce){.sm-close{transition:none}}
  @media (max-width:560px){.sm-body{padding:14px 16px 20px}.sm-head{padding:18px 16px 2px}.sm-scroll{padding:0}}

/* --- NO-JS fallback only: render the scope modal inline (it cannot be opened
   without JS). MUST be gated on html:not(.js) or it forces the closed modal
   visible inline on every page even with JS on. --- */
    html:not(.js) #scopeModal[hidden]{display:block !important;position:static}
    html:not(.js) #scopeModal .sm-backdrop{display:none}
    html:not(.js) #scopeModal .sm-scroll{position:static;overflow:visible;padding:40px 0}
    html:not(.js) #scopeModal .sm-panel{animation:none}
    html:not(.js) #scopeModal .sm-close{display:none}
  

/* === production overrides (appended) === */
/* (b) AA contrast: lift the small muted labels off the failing --grey-4 (#5d5a55). */
.seg{color:#b8b2a8}
.feat-tour .seg{color:#b8b2a8}
.foot-col h4,.foot-col h3{color:#b8b2a8}
/* (c) tap targets: >=44px touch height for primary controls on small screens. */
@media (max-width:760px){.btn,.nav a,.mobile-menu a,.seg,.feat-tour{min-height:44px}}

/* ===== Sub-page breadcrumb (vertical/geo landing pages, e.g. /public-sector/municipal/) ===== */
.crumb{border-bottom:1px solid var(--line-soft);background:var(--ink-2)}
.crumb .wrap{display:flex;align-items:center;gap:9px;padding-top:13px;padding-bottom:13px;font-family:var(--ui);font-size:.82rem;font-weight:600;letter-spacing:.01em}
.crumb a{display:inline-flex;align-items:center;gap:6px;color:var(--grey-3);transition:color .2s ease}
.crumb a:hover{color:var(--gold-soft)}
.crumb .crumb-sep{color:var(--grey-4)}
.crumb .crumb-here{color:var(--grey-1)}

/* ===== Contact page: two-column form + details, scoped ===== */
.contact-cols{display:grid;grid-template-columns:1.05fr .85fr;gap:40px;align-items:start}
/* message textarea matches the .field input/select styling exactly */
.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line-soft);border-radius:2px;font-family:var(--body);font-size:.95rem;color:var(--white);background:var(--field);line-height:1.6;min-height:120px;resize:vertical;transition:border-color .2s ease,background .2s ease}
.field textarea::placeholder{color:var(--grey-4)}
.field textarea:focus{border-color:var(--gold);background:#0d0d10;outline:none}
/* right-hand details card */
.contact-info{border:1px solid var(--line-strong);border-radius:4px;background:linear-gradient(180deg,#0f0f12,#0a0a0c);padding:26px 26px 28px}
.contact-info h3{font-size:1.4rem;font-weight:500;margin-bottom:4px}
.ci-row{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line-soft)}
.ci-row:first-of-type{padding-top:18px}
.ci-row>svg{width:20px;height:20px;color:var(--gold);flex:none;margin-top:3px}
.ci-row .ci-k{font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 5px}
.ci-row .ci-v{font-family:var(--ui);font-size:.92rem;color:var(--grey-2);line-height:1.65;margin:0}
.ci-row .ci-v a{color:var(--gold-soft)}
.ci-row .ci-v a:hover{color:var(--gold)}
/* static, consent-clean map placeholder (no third-party iframe) */
.contact-map{position:relative;margin-top:20px;min-height:172px;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;background:linear-gradient(135deg,#0c0c0e,#111114);display:flex;align-items:center;justify-content:center;text-align:center}
.contact-map .cm-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(227,152,41,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(227,152,41,.07) 1px,transparent 1px);background-size:34px 34px}
.contact-map .cm-pin{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--ui);padding:16px}
.contact-map .cm-pin svg{width:30px;height:30px;color:var(--gold)}
.contact-map .cm-pin b{color:var(--white);font-weight:600;font-size:.96rem}
.contact-map .cm-pin span{color:var(--grey-2);font-size:.82rem}
@media (max-width:980px){.contact-cols{grid-template-columns:1fr;gap:30px}}

/* AA contrast fix: footer bottom bar text + legal links were #5d5a55 (3.05:1). */
.foot-bottom, .foot-bottom span, .foot-bottom #yr{color:#b8b2a8}
.foot-bottom a{color:#cfc9bf}
.foot-bottom a:hover{color:var(--gold-soft)}

/* Little Canadian flag accent on the "Canadian-delivered" trust label. */
.caf{height:.84em;width:auto;margin-left:6px;vertical-align:-0.04em;border-radius:1.5px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}

/* Locations hub: single-column hero + responsive grid of city links. */
.hero-grid--single{grid-template-columns:1fr}
.loc-list{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 18px}
.loc-list a{display:inline-flex;align-items:center;gap:9px;padding:9px 6px;color:var(--grey-1);font-family:var(--ui);font-weight:500;font-size:.94rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06);transition:color .15s ease}
.loc-list a svg{width:15px;height:15px;color:var(--gold);flex:none}
.loc-list a:hover{color:var(--white)}

/* Legal / long-form prose pages (privacy, terms, accessibility). */
.legal{max-width:760px;margin:0 auto}
.legal-eyebrow{font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;color:var(--gold);margin:0 0 10px}
.legal h1{margin:0 0 6px}
.legal-updated{font-family:var(--ui);font-size:.82rem;color:var(--grey-2);margin:0 0 26px}
.legal-note{font-family:var(--ui);font-size:.86rem;color:var(--grey-1);background:rgba(255,255,255,.04);border:1px solid var(--line-soft);border-left:3px solid var(--gold);border-radius:4px;padding:12px 16px;margin:0 0 26px}
.legal h2{font-size:1.18rem;margin:30px 0 10px}
.legal p{color:var(--grey-1);line-height:1.7;margin:0 0 14px}
.legal ul{color:var(--grey-1);line-height:1.7;margin:0 0 14px;padding-left:22px}
.legal li{margin:4px 0}
.legal a{color:var(--gold-soft)}
.legal a:hover{color:var(--gold)}
.legal-back{margin-top:30px}

/* Blog: article pages + index grid. */
.post{max-width:740px;margin:0 auto}
.post-head{margin:0 0 28px;padding:0 0 22px;border-bottom:1px solid var(--line-soft)}
.post-cat{display:inline-block;font-family:var(--ui);text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;font-weight:700;color:var(--gold);border:1px solid var(--line-soft);border-radius:999px;padding:4px 12px}
.post-date{font-family:var(--ui);font-size:.8rem;color:var(--grey-2);margin:0 0 0 10px}
.post h1{margin:16px 0 10px;font-size:2.05rem;line-height:1.12}
.post-dek{font-size:1.12rem;line-height:1.55;color:var(--grey-1);margin:0 0 16px}
.post-byline{font-family:var(--ui);font-size:.84rem;color:var(--grey-2)}
.post-body h2{font-size:1.32rem;margin:32px 0 12px}
.post-body h3{font-size:1.08rem;margin:24px 0 8px}
.post-body p{color:var(--grey-1);line-height:1.75;margin:0 0 16px}
.post-body ul,.post-body ol{color:var(--grey-1);line-height:1.75;margin:0 0 16px;padding-left:22px}
.post-body li{margin:6px 0}
.post-body a:not(.btn){color:var(--gold-soft)}
.post-body a:not(.btn):hover{color:var(--gold)}
.post-body blockquote{margin:20px 0;padding:4px 0 4px 20px;border-left:3px solid var(--gold);color:var(--white);font-size:1.08rem;font-style:italic}
.post-cta{margin:30px 0;padding:22px 24px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);border-radius:8px}
.post-cta p{margin:0 0 14px;color:var(--grey-1)}
.post-related{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-soft)}
.post-related h2{font-size:1.05rem;margin:0 0 12px}
.post-related ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.post-related a{color:var(--gold-soft);font-family:var(--ui);font-size:.95rem}
.post-related a:hover{color:var(--gold)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;margin:26px 0 0}
.post-card{display:flex;flex-direction:column;background:#0c0c0e;border:1px solid var(--line-soft);border-radius:9px;padding:22px;transition:border-color .15s ease,transform .15s ease}
.post-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.post-card .pc-meta{font-family:var(--ui);font-size:.72rem;letter-spacing:.04em;color:var(--grey-2);margin:0 0 9px;text-transform:uppercase}
.post-card .pc-meta b{color:var(--gold)}
.post-card h3{font-size:1.12rem;line-height:1.25;margin:0 0 9px}
.post-card h3 a{color:var(--white);text-decoration:none}
.post-card:hover h3 a{color:var(--gold-soft)}
.post-card p{color:var(--grey-1);line-height:1.6;font-size:.92rem;margin:0 0 14px;flex:1}
.post-card .pc-read{font-family:var(--ui);font-weight:600;font-size:.84rem;color:var(--gold-soft)}
/* Nav: Blog as a plain top-level link (no dropdown), + mobile blog link */
.nav-top--link{text-decoration:none}
.mm-link{display:block;padding:15px 0;font-family:var(--ui);font-weight:600;font-size:1.05rem;color:var(--white);text-decoration:none;border-top:1px solid var(--line-soft)}
.mm-link:hover{color:var(--gold)}
/* Hero "Snake" border: a light segment chases the photo perimeter until the visitor engages. */
.pano-frame .pano-snake{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;border-radius:inherit}
.pano-frame .pano-snake rect{fill:none;stroke:var(--gold);stroke-width:3;filter:drop-shadow(0 0 5px var(--gold)) drop-shadow(0 0 2px var(--gold))}
.pano-frame.engaged .pano-snake{opacity:0;transition:opacity .55s ease}
/* No Pannellum loading bar; fade the photo in when it is ready. */
.pnlm-load-box{display:none!important}
.pano-frame.pano-fade #pano-hero{opacity:0}
.pano-frame.pano-fade.pano-ready #pano-hero{opacity:1;transition:opacity .7s ease}
/* Hero photo-gallery dots (curated Seton highlights inside the viewer). */
.pano-frame .pano-dots{position:absolute;left:0;right:0;bottom:54px;display:flex;justify-content:center;gap:9px;z-index:5;pointer-events:none}
.pano-frame .pano-dot{pointer-events:auto;width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:rgba(0,0,0,.4);cursor:pointer;padding:0;transition:background .2s ease,border-color .2s ease,width .2s ease,transform .2s ease}
.pano-frame .pano-dot:hover{border-color:var(--gold);transform:scale(1.15)}
.pano-frame .pano-dot.active{background:var(--gold);border-color:var(--gold);width:24px;border-radius:6px}
/* Footer social row */
.foot-social{display:flex;gap:12px;margin:16px 0 0}
.foot-rating{display:inline-flex;align-items:center;gap:8px;margin-top:15px;font-family:var(--ui);font-size:.86rem;color:#cbbfae;text-decoration:none}
.foot-rating:hover{color:#f3ead9}
.foot-rating b{color:#f3ead9}
.foot-stars{color:#f0b429;letter-spacing:1px;font-size:.95rem}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line-soft);border-radius:7px;color:var(--grey-1);transition:color .15s ease,border-color .15s ease}
.foot-social a:hover{color:var(--white);border-color:var(--gold)}
.foot-social svg{width:17px;height:17px}

/* ---------- COOKIE CONSENT (self-hosted, granular) ---------- */
.consent-banner{position:fixed;left:18px;bottom:18px;z-index:1000;max-width:360px;width:calc(100% - 36px);background:var(--panel,#1c1813);border:1px solid var(--line-strong,#3a3127);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.45);padding:15px 16px}
.cb-inner{display:block}
.cb-text{font-family:var(--ui);font-size:.78rem;color:var(--grey-2,#b8b2a8);margin:0 0 11px;line-height:1.5}
.cb-text a{color:var(--gold-soft,#f0c074)}
.cb-actions{display:flex;gap:10px;flex-wrap:wrap}
.cb-btn{font-family:var(--ui);font-weight:600;font-size:.78rem;padding:8px 11px;border-radius:7px;cursor:pointer;border:1px solid transparent;white-space:nowrap;flex:1}
.cb-ghost{background:transparent;border-color:var(--line-strong,#3a3127);color:var(--grey-1,#cfc9bf)}
.cb-ghost:hover{border-color:var(--gold,#e39829);color:#fff}
.cb-accept{background:var(--gold,#e39829);color:#1a1003;border-color:var(--gold,#e39829)}
.cb-accept:hover{filter:brightness(1.07)}
.consent-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:20px}
.cm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.cm-panel{position:relative;background:var(--panel,#1c1813);border:1px solid var(--line-strong,#3a3127);border-radius:14px;max-width:520px;width:100%;padding:26px 26px 22px;max-height:90vh;overflow:auto}
.cm-panel h2{font-family:var(--display);color:#fff;font-size:1.4rem;margin:0 0 8px}
.cm-lead{font-family:var(--ui);font-size:.85rem;color:var(--grey-2,#b8b2a8);margin:0 0 18px;line-height:1.5}
.cm-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:13px 0;border-top:1px solid var(--line,#2c2620)}
.cm-l{display:flex;flex-direction:column;gap:2px}
.cm-l b{font-family:var(--ui);color:#fff;font-size:.92rem}
.cm-l small{font-family:var(--ui);color:var(--grey-3,#9c958a);font-size:.78rem;line-height:1.4}
.cm-row input[type=checkbox]{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--gold,#e39829);cursor:pointer}
.cm-row input:disabled{opacity:.5;cursor:not-allowed}
.cm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
@media(max-width:560px){.cb-actions{width:100%}.cb-btn{flex:1}}

/* WCAG 1.4.1 (Use of Color): inline text links underlined so they are distinguishable without relying on colour alone */
.post-body a:not(.btn), .fa-body a, .legal a, .legal-back a,
.band p a:not(.btn):not(.pathlink), .band li a:not(.btn):not(.pathlink),
.final p a:not(.btn), .ci-v a, .cb-text a, .cm-lead a,
.foot-sisters a, .pano-cap a, .sub a:not(.btn){
  text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.06em;
}

/* FIX: a class with explicit display overrides the [hidden] attribute, so the consent modal would never close. */
.consent-modal[hidden],.consent-banner[hidden]{display:none !important}
.cm-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;background:transparent;color:var(--grey-2,#b8b2a8);font-size:26px;line-height:1;cursor:pointer;border-radius:8px}
.cm-close:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- 360 VIDEO PLAYER (videography page; three.js videosphere, lazy) ---------- */
.v360-stage{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:2/1;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line-strong,#3a3127)}
.v360-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v360-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab;touch-action:none}
.v360-stage.playing .v360-poster,.v360-stage.playing .v360-play,.v360-stage.playing .v360-badge{display:none}
.v360-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border:0;border-radius:50%;background:rgba(227,152,41,.92);color:#1a1003;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.v360-play svg{width:30px;height:30px;margin-left:4px}
.v360-play:hover{background:var(--gold,#e39829);transform:translate(-50%,-50%) scale(1.06)}
.v360-badge{position:absolute;top:12px;left:14px;font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:5px 10px;border-radius:6px}
.v360-drag{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-family:var(--ui);font-size:.74rem;color:#fff;background:rgba(0,0,0,.5);padding:5px 12px;border-radius:999px;opacity:0}
.v360-stage.playing .v360-drag{opacity:1;animation:v360fade 4s 1.2s forwards}
.v360-feature{max-width:1100px;margin:0 auto 24px}
.v360-feature .v360-stage{max-width:none;margin:0}
.v360-feature figcaption{margin-top:10px;text-align:center;font-family:var(--ui);font-size:.9rem;color:#e9c79a}
.v360-hero{max-width:none;margin:0;aspect-ratio:4/3;border-radius:18px}
.v360-snake{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;border-radius:inherit}
.v360-snake rect{fill:none;stroke:var(--gold,#e39829);stroke-width:3;filter:drop-shadow(0 0 5px var(--gold,#e39829)) drop-shadow(0 0 2px var(--gold,#e39829))}
.v360-stage.playing .v360-snake{opacity:0;transition:opacity .5s ease}
.v360-ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(transparent,rgba(0,0,0,.6));z-index:7}
.v360-ctrlbtn{appearance:none;width:42px;height:42px;border-radius:50%;background:rgba(18,14,9,.82);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.25);transition:background .15s,color .15s}
.v360-ctrlbtn svg{width:20px;height:20px}
.v360-ctrlbtn:hover{background:var(--gold,#e39829);color:#1a1206}
.v360-panhint{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);font-size:.8rem;color:#f3ead9;background:rgba(10,8,6,.5);padding:5px 11px;border-radius:999px}
.v360-panhint svg{width:16px;height:16px}
.v360-hero-desc{margin-top:14px;font-family:var(--ui);font-size:.92rem;line-height:1.55;color:#cbbfae}
.v360-hero-desc b{color:#f3ead9}
.v360-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1080px;margin:0 auto}
.v360-fs{margin-left:auto}
.v360-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}
.v360-modal.show{opacity:1}
.v360-modal[hidden]{display:none}
.v360-modal-back{position:absolute;inset:0;background:rgba(8,6,4,.9);cursor:zoom-out}
.v360-modal-body{position:relative;width:min(94vw,160vh);aspect-ratio:16/9;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.v360-stage.v360-in-modal{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0;border-radius:14px;overflow:hidden}
.v360-modal-x{position:absolute;top:-15px;right:-15px;z-index:14;width:44px;height:44px;border:0;border-radius:50%;background:#0e0b08;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.v360-modal-x:hover{background:#1c1712}
.v360-modal-x svg{width:22px;height:22px}
body.v360-modal-open{overflow:hidden}
.thanks-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}
.thanks-modal.show{opacity:1}
.thanks-modal[hidden]{display:none}
.thanks-back{position:absolute;inset:0;background:rgba(8,6,4,.78);cursor:pointer}
.thanks-card{position:relative;background:#fff;color:#1a1611;max-width:440px;width:calc(100% - 36px);border-radius:16px;padding:34px 30px 30px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.thanks-x{position:absolute;top:8px;right:12px;border:0;background:none;font-size:1.7rem;line-height:1;color:#8a8175;cursor:pointer}
.thanks-x:hover{color:#1a1611}
.thanks-ico{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#1f7a44;color:#fff;margin-bottom:14px}
.thanks-ico svg{width:30px;height:30px}
.thanks-card h2{margin:0 0 8px;font-size:1.5rem}
.thanks-msg{margin:0 0 20px;color:#574f44;line-height:1.55}
.thanks-card .thanks-ok{cursor:pointer}
body.thanks-open{overflow:hidden}
@media(max-width:600px){.v360-modal-body{width:96vw}.v360-modal-x{top:6px;right:6px}}
.v360-grid .v360-stage{max-width:none;margin:0}
.v360-item{margin:0}
.v360-item figcaption{margin-top:10px;text-align:center;font-family:var(--ui);font-size:.86rem;color:#cbbfae}
@media(max-width:900px){.v360-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.v360-grid{grid-template-columns:1fr}}
@keyframes v360fade{to{opacity:0}}

/* ---------- Capture-grade 360 grader (homepage): live pannellum viewer ---------- */
#grade-pano{width:100%;height:480px;background:#0a0a0c;border-radius:inherit;cursor:grab}
#grade-pano:active{cursor:grabbing}
@media(max-width:980px){#grade-pano{height:340px}}
.grade-hint{position:absolute;bottom:12px;right:14px;font-family:var(--ui);font-size:.72rem;color:#fff;background:rgba(0,0,0,.5);padding:5px 11px;border-radius:999px;pointer-events:none}

/* ---------- Capture-grade comparison (homepage): wipe + 4-up strip ---------- */
.grade-lead{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:center}
@media(max-width:760px){.grade-lead{grid-template-columns:1fr}}
.grade-ref{margin:0}
.grade-ref img{width:100%;height:auto;border-radius:10px;display:block;border:1px solid var(--line,#2c2620)}
.grade-ref figcaption{font-family:var(--ui);font-size:.76rem;color:#9a8f80;margin-top:8px;text-align:center;line-height:1.4}
.grade-wipe{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/1;overflow:hidden;border-radius:12px;border:1px solid #3a3127;user-select:none;touch-action:none}
.gw-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gw-top{clip-path:inset(0 50% 0 0)}
.gw-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.45);pointer-events:none}
.gw-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.55)}
.gw-knob::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:8px;border-left:3px solid #1a1003;border-right:3px solid #1a1003}
.gw-tag{position:absolute;top:10px;font-family:var(--ui);font-size:.74rem;font-weight:800;letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.62);padding:4px 10px;border-radius:6px;pointer-events:none}
.gw-tag-l{left:10px}.gw-tag-r{right:10px}
.grade-wipe input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.grade-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
@media(max-width:620px){.grade-strip{grid-template-columns:repeat(2,1fr)}}
.grade-strip figure{margin:0}
.grade-strip img{width:100%;height:auto;border-radius:8px;display:block;border:1px solid #2c2620}
.grade-strip figcaption{font-family:var(--ui);font-size:.76rem;color:#cbbfae;margin-top:7px;text-align:center}
.grade-strip figcaption b{color:var(--gold,#e39829);margin-right:6px;font-weight:800}

/* ---------- grade comparison: larger wipe + grade buttons (overrides) ---------- */
.grade-lead{grid-template-columns:260px 1fr;align-items:start}
.grade-cmp{min-width:0}
.grade-wipe{max-width:none}
.grade-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.grade-btns button{font-family:var(--ui);font-size:.84rem;font-weight:800;color:#cbbfae;background:#1c1814;border:1px solid #3a3127;border-radius:9px;padding:9px 6px;cursor:pointer;display:flex;flex-direction:column;gap:2px;line-height:1.1;transition:background .15s,border-color .15s,color .15s}
.grade-btns button small{font-weight:600;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:#9a8f80}
.grade-btns button:hover{border-color:var(--gold,#e39829);color:#fff}
.grade-btns button.on{background:var(--gold,#e39829);border-color:var(--gold,#e39829);color:#1a1003}
.grade-btns button.on small{color:#3a2a08}

/* ---------- grade comparison: static 1x4 side-by-side ---------- */
.grade-ref-top{max-width:520px;margin:0 auto 20px}
.grade-ref-top img{width:100%;height:auto;border-radius:10px;display:block;border:1px solid #2c2620}
.grade-ref-top figcaption{font-family:var(--ui);font-size:.78rem;color:#9a8f80;margin-top:8px;text-align:center;line-height:1.45}
.grade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:680px){.grade-grid{grid-template-columns:repeat(2,1fr)}}
.grade-grid figure{margin:0}
.grade-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;border:1px solid #3a3127}
.grade-grid figcaption{font-family:var(--ui);font-size:.82rem;color:#cbbfae;margin-top:9px;text-align:center}
.grade-grid figcaption b{display:block;color:var(--gold,#e39829);font-weight:800;font-size:1.02rem;letter-spacing:.02em}
.grade-grid-3{grid-template-columns:repeat(3,1fr)}
.grade-grid-3 img{aspect-ratio:3/2}
@media(max-width:680px){.grade-grid-3{grid-template-columns:1fr}}
.grade-viewer-wrap{position:relative;max-width:1040px;margin:0 auto}
.grade-viewer{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid #3a3127;background:#0d0b08;touch-action:none}
.grade-viewer .pnlm-load-box{background:#0d0b08}
.grade-toggle{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:rgba(10,8,6,.74);backdrop-filter:blur(6px);border:1px solid #4a3f2e;border-radius:999px;padding:3px;z-index:6}
.grade-toggle button{appearance:none;border:0;background:transparent;color:#cbbfae;font-family:var(--ui);font-weight:700;font-size:.86rem;padding:7px 18px;border-radius:999px;cursor:pointer;letter-spacing:.03em;transition:background .15s,color .15s}
.grade-toggle button.is-on{background:var(--gold,#e39829);color:#1a1206}
.grade-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(10,8,6,.72);color:#e9dcc6;font-size:.76rem;padding:5px 13px;border-radius:999px;pointer-events:none;z-index:6;font-family:var(--ui)}
/* capture-grade before/after slider */
.qslider{position:relative;max-width:1100px;margin:0 auto;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid #3a3127;background:#0d0b08;user-select:none;touch-action:none}
.qslider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.qs-before{clip-path:inset(0 58% 0 0)}
.qs-handle{position:absolute;top:0;bottom:0;left:42%;width:2px;margin-left:-1px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.35);z-index:4;pointer-events:none}
.qs-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(18,14,9,.78);border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.qs-handle::before{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;z-index:1}
.qs-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.qs-tag{position:absolute;bottom:12px;font-family:var(--ui);font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:999px;background:rgba(10,8,6,.74);color:#f3ead9;z-index:3;pointer-events:none}
.qs-tag-l{left:12px}
.qs-tag-r{right:12px;color:#ffdfae}
.qs-grades{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:rgba(10,8,6,.78);border:1px solid #4a3f2e;border-radius:999px;padding:3px;z-index:6}
.qs-grades button{appearance:none;border:0;background:transparent;color:#cbbfae;font-family:var(--ui);font-weight:700;font-size:.8rem;padding:6px 14px;border-radius:999px;cursor:pointer}
.qs-grades button.is-on{background:var(--gold,#e39829);color:#1a1206}