/* Signature hero: garage door. The door is closed until the visitor opens it; the video plays the door rising,
   then the page's sections appear as glass tiles on the garage floor. Colours come from the theme variables. */
.gd{position:relative;isolation:isolate;height:calc(100svh - 68px);min-height:560px;max-height:920px;overflow:hidden;background:#111;color:#fff;perspective:1400px}
.gd-scene{position:absolute;inset:0;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(1.06);transition:transform .25s ease-out;will-change:transform}
.gd-frame{position:absolute;left:50%;top:50%;width:max(100%,calc((100svh - 68px) * 16 / 9));aspect-ratio:16/9;transform:translate(-50%,-50%)}
.gd-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#1a1d21}
.gd-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,10,13,.55) 0%,rgba(8,10,13,0) 26%),linear-gradient(0deg,rgba(8,10,13,.88) 0%,rgba(8,10,13,0) 58%);transition:opacity .8s ease}
.gd[data-state="inside"] .gd-shade{opacity:.85}

.gd-open{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:3;display:grid;justify-items:center;gap:14px;border:0;background:none;color:inherit;cursor:pointer;padding:20px;transition:opacity .5s ease,transform .5s ease}
.gd-ring{position:relative;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);box-shadow:0 14px 40px rgba(0,0,0,.45);transition:transform .2s ease}
.gd-ring::before,.gd-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:gd-pulse 2.4s ease-out infinite}
.gd-ring::after{animation-delay:1.2s}
.gd-open:hover .gd-ring{transform:scale(1.06)}
.gd-label{font:700 .9rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;background:rgba(14,18,23,.66);border:1px solid rgba(255,255,255,.2);padding:10px 16px;border-radius:999px;backdrop-filter:blur(8px)}
@keyframes gd-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}

.gd-intro{position:absolute;z-index:2;left:0;right:0;bottom:40px;transition:opacity .5s ease,transform .5s ease}
.gd-intro h1{max-width:15ch;margin-bottom:.35em}
.gd-intro .eyebrow{color:#fff;opacity:.92}
.gd-intro .lede{max-width:52ch;opacity:.92}

.gd[data-state="opening"] .gd-intro,.gd[data-state="inside"] .gd-intro{opacity:0;transform:translateY(24px);pointer-events:none}
.gd[data-state="opening"] .gd-open,.gd[data-state="inside"] .gd-open{opacity:0;transform:translate(-50%,-50%) scale(.6);pointer-events:none}

.gd-skip{position:absolute;z-index:4;right:20px;bottom:24px;display:none;min-height:44px;padding:10px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(14,18,23,.66);color:#fff;font:600 .9rem var(--font-body);cursor:pointer;backdrop-filter:blur(8px)}
.gd[data-state="opening"] .gd-skip{display:block}

.gd-inside{position:absolute;z-index:3;left:0;right:0;bottom:28px;display:none;flex-direction:column;gap:14px;perspective:1100px}
.gd[data-state="inside"] .gd-inside{display:flex}
.gd-inside-head h2{margin:0;font-size:clamp(1.6rem,3.4vw,2.4rem);color:#fff}
.gd-inside-head p{margin:4px 0 0;opacity:.85}
.gd-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:760px;transform:rotateX(14deg);transform-origin:50% 100%}
.gd-tiles li{animation:gd-rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.gd-tile{display:flex;flex-direction:column;gap:6px;height:100%;min-height:64px;padding:16px;border-radius:14px;text-decoration:none;color:#fff;background:rgba(14,18,23,.66);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);transition:transform .2s ease,background-color .2s ease,border-color .2s ease}
.gd-tile:hover{transform:translateY(-6px);background:rgba(28,34,42,.85);border-color:var(--accent)}
.gd-tile strong{font:var(--h-weight) 1.1rem/1.2 var(--font-heading);letter-spacing:var(--h-track)}
.gd-tile span{font-size:.85rem;opacity:.8}
.gd-tile-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.gd-tile-primary:hover{background:var(--accent);filter:brightness(1.08)}
@keyframes gd-rise{from{opacity:0;transform:translateY(34px) rotateX(-24deg)}to{opacity:1;transform:none}}
.gd-replay{align-self:flex-start;display:flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;color:#fff;opacity:.8;cursor:pointer;font:500 .9rem var(--font-body);padding:8px 0}
.gd-replay:hover{opacity:1}

/* Phones load the door-centred portrait video (8:9) and show it full width at the top of the hero. */
@media (max-width:699px){
  .gd{height:calc(100svh - 64px);min-height:620px;background:#0d0f12}
  .gd-scene{transform:none}
  .gd-frame{top:0;left:0;width:100%;aspect-ratio:8/9;transform:none}
  .gd-shade{background:linear-gradient(180deg,rgba(8,10,13,.35) 0%,rgba(8,10,13,0) 22%),linear-gradient(0deg,#0d0f12 0%,rgba(13,15,18,.9) 34%,rgba(13,15,18,0) 62%)}
  .gd-open{top:30%}
}
@media (max-width:760px){
  .gd-ring{width:68px;height:68px}
  .gd-tiles{grid-template-columns:repeat(2,minmax(0,1fr));transform:none}
  .gd-tile{padding:12px;min-height:56px}
  .gd-tile span{display:none}
  .gd-tile-primary span{display:block}
  .gd-inside-head p{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gd-scene{transition:none;transform:scale(1.02)}
  .gd-ring::before,.gd-ring::after,.gd-tiles li{animation:none}
  .gd-tiles{transform:none}
}