/* ============================================================
   D2LAL POP-UPS  —  d2lal-popups.css
   ------------------------------------------------------------
   Drop this into any D2LAL site and every pop-up behaves the
   same: at least 85% of the screen on any device, an X in the
   corner, and the page underneath frozen so the visitor comes
   back exactly where they were.

   Only the five --d2-* variables at the top are meant to be
   changed per site, so each brand keeps its own colours while
   the behaviour stays identical everywhere.
   ============================================================ */

:root{
  --d2-ink:#101010;
  --d2-paper:#ffffff;
  --d2-accent:#FFC800;
  --d2-accent-2:#E02B20;
  --d2-done:#7AB648;
  --d2-radius:14px;
}

body.d2-noscroll{overflow:hidden}

.d2-modal{
  position:fixed;inset:0;z-index:4000;
  background:rgba(10,10,10,.92);
  display:flex;align-items:center;justify-content:center;
  padding:1.6rem 1.2rem;
}
.d2-modal[hidden]{display:none}

.d2-box{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  width:min(1100px,96vw);
  background:var(--d2-paper);
  border:4px solid var(--d2-accent);
  border-radius:var(--d2-radius);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  /* the house rule: never less than 85% of the screen */
  height:88vh;
  height:calc(100dvh - 3.2rem);
  min-height:85vh;
  max-height:none;
}

/* video keeps its shape rather than stretching */
.d2-box.d2-video{height:auto;min-height:0;aspect-ratio:16/9;background:#000;border-radius:var(--d2-radius)}
.d2-box.d2-video .d2-body{padding:0}
.d2-box.d2-video iframe{width:100%;height:100%;border:0;display:block}

/* a message card sizes to its words — a "coming soon" notice
   blown up to full screen would read as an error, not a note */
.d2-box.d2-message{height:auto;min-height:0;width:min(520px,94vw);border-radius:var(--d2-radius)}

.d2-head{
  flex:0 0 auto;background:var(--d2-accent);color:var(--d2-ink);
  border-bottom:4px solid var(--d2-ink);padding:.9rem 3.8rem .9rem 1.2rem;
}
.d2-head[hidden]{display:none}
.d2-title{display:block;font-weight:700;font-size:1rem;line-height:1.25}
.d2-note{display:block;font-size:.83rem;margin-top:.2rem;opacity:.85}

.d2-body{
  flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;background:var(--d2-paper);
}
.d2-body iframe{width:100%;flex:1 1 auto;min-height:0;border:0;display:block;background:var(--d2-paper)}

/* image lightbox */
.d2-box.d2-image .d2-body{align-items:center;justify-content:center;padding:1rem;background:#111}
.d2-box.d2-image img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:6px}
.d2-cap{flex:0 0 auto;margin-top:.7rem;font-size:.9rem;text-align:center;color:#ddd}
.d2-box.d2-message .d2-cap{color:#555}

/* a note printed under a live preview — what we did for this client */
.d2-under{
  margin:0;padding:.85rem 1.2rem;text-align:center;color:var(--d2-ink);
  background:#F4F2EA;border-top:3px solid var(--d2-ink);font-size:.88rem;line-height:1.5;
}

/* message card body */
.d2-box.d2-message .d2-body{padding:1.3rem 1.4rem;gap:.7rem;font-size:.97rem;line-height:1.65;color:var(--d2-ink)}
.d2-copy{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.d2-copy code{
  flex:1 1 auto;font-size:1.15rem;font-weight:700;letter-spacing:.02em;
  background:#F4F2EA;border:2px solid var(--d2-ink);border-radius:8px;padding:.6rem .8rem;
  user-select:all;-webkit-user-select:all;
}
.d2-copybtn{
  flex:0 0 auto;border:2px solid var(--d2-ink);background:var(--d2-accent);color:var(--d2-ink);
  font:inherit;font-weight:700;padding:.6rem 1.1rem;border-radius:8px;cursor:pointer;
}
.d2-copybtn:hover{background:var(--d2-ink);color:var(--d2-accent)}

/* close X — outside the box on wide screens, tucked inside the
   header on phones so it can never sit off the edge */
.d2-close{
  position:absolute;top:-1.1rem;right:-1.1rem;z-index:3;
  width:2.9rem;height:2.9rem;border-radius:50%;
  background:var(--d2-accent);color:var(--d2-ink);border:3px solid var(--d2-ink);
  font:inherit;font-size:1.6rem;font-weight:700;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.d2-close:hover{background:var(--d2-accent-2);color:#fff}
.d2-head:not([hidden]) ~ .d2-close{
  top:.55rem;right:.55rem;width:2.4rem;height:2.4rem;font-size:1.35rem;
  background:var(--d2-ink);color:var(--d2-accent);box-shadow:none;
}
.d2-head:not([hidden]) ~ .d2-close:hover{background:var(--d2-accent-2);color:#fff}

.d2-done{
  flex:0 0 auto;width:100%;border:0;border-top:4px solid var(--d2-ink);
  background:var(--d2-done);color:#fff;font:inherit;font-weight:700;
  font-size:.98rem;letter-spacing:.03em;padding:1rem;cursor:pointer;
}
.d2-done:hover{background:var(--d2-ink);color:var(--d2-accent)}
.d2-done[hidden]{display:none}

.d2-modal :focus-visible{outline:3px solid var(--d2-accent);outline-offset:3px;border-radius:6px}

@media(max-width:640px){
  .d2-modal{padding:1rem .6rem}
  .d2-box{height:90vh;height:calc(100dvh - 2rem);min-height:88vh}
  .d2-box.d2-video{height:auto;min-height:0}
  .d2-box.d2-message{height:auto;min-height:0}
  .d2-close{top:-.85rem;right:-.35rem;width:2.5rem;height:2.5rem}
  .d2-head{padding:.75rem 3.4rem .75rem 1rem}
  .d2-title{font-size:.9rem}
  .d2-note{font-size:.77rem}
  .d2-done{padding:.9rem;font-size:.9rem}
  .d2-copy code{font-size:1.05rem}
}

@media (prefers-reduced-motion: reduce){
  .d2-modal,.d2-box{transition:none !important;animation:none !important}
}

/* thumbnails that open the lightbox */
img[data-d2gal]{cursor:zoom-in}
img[data-d2gal]:focus-visible{outline:3px solid var(--d2-accent);outline-offset:3px}

/* ---------- social icons ----------
   Each icon only exists when its address is filled in, so this row
   quietly shrinks to nothing rather than showing dead links. */
.d2-social{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1.1rem 0 0}
.d2-soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:50%;
  border:2px solid currentColor;color:inherit;text-decoration:none;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.d2-soc:hover{transform:translateY(-3px)}
.d2-soc svg{width:1.15rem;height:1.15rem;display:block}
@media(max-width:640px){
  .d2-social{gap:.5rem}
  .d2-soc{width:2.9rem;height:2.9rem}
}

/* ================= SWIPE TO THE LIVE SITE =================
   Two panels on one track: the project card, and that client's
   real website. The track is twice the width of the window it
   sits in, so each panel is exactly half of it and one is always
   filling the view. Only the track moves, which keeps the whole
   gesture on the compositor and smooth on a phone.           */
.d2-swipewrap{
  position:relative; flex:1 1 auto; min-height:0; overflow:hidden;
  border-radius:.6rem; touch-action:pan-y; outline:none;
}
.d2-swipewrap:focus-visible{ box-shadow:0 0 0 3px rgba(149,112,255,.55); }
.d2-swipe{
  display:flex; width:200%; height:100%;
  will-change:transform; transform:translate3d(0,0,0);
}
.d2-pane{
  width:50%; flex:0 0 50%; height:100%;
  overflow:auto; -webkit-overflow-scrolling:touch;
}
.d2-pane-b{ overflow:hidden; background:#0b0b0d; }
.d2-pane-b iframe{
  width:100%; height:100%; min-height:100%; border:0; display:block; background:#fff;
}
/* a panel that is off to the side must not be reachable by tabbing */
.d2-pane[aria-hidden="true"]{ visibility:hidden; }
.d2-swipe{ transition:transform .42s cubic-bezier(.22,.61,.36,1); }

.d2-swipehint{
  flex:0 0 auto; margin:.55rem 0 0; text-align:center;
  font-size:.82rem; opacity:.72; line-height:1.4;
}
.d2-dots{ flex:0 0 auto; display:flex; gap:.5rem; justify-content:center; padding:.5rem 0 .1rem; }
.d2-dot{
  width:.62rem; height:.62rem; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid currentColor; background:transparent; opacity:.45;
  transition:opacity .2s, transform .2s;
}
.d2-dot.on{ opacity:1; background:currentColor; transform:scale(1.15); }
.d2-dot:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

/* Visibility is toggled per panel, so nothing here may rely on
   scripts having run — with scripts off both panels simply show. */
html:not(.js) .d2-pane[aria-hidden="true"]{ visibility:visible; }

@media (prefers-reduced-motion: reduce){
  .d2-swipe{ transition:none; }
}
}

/* The way back out of a live preview. A framed site swallows every
   touch inside itself, so a swipe cannot be felt there — the way
   back has to be visible and tappable, not a hidden gesture. */
.d2-back{
  flex:0 0 auto; align-self:flex-start; margin-top:.6rem;
  padding:.5rem 1rem; border-radius:999px; cursor:pointer;
  border:1px solid currentColor; background:transparent; color:inherit;
  font:inherit; font-size:.86rem; opacity:.85;
}
.d2-back:hover,.d2-back:focus-visible{ opacity:1; }