@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;0,600;0,700;1,300&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root{
  --navy-deep:#063263;
  --navy-slate:#334770;
  --blue:#1877F2;
  --teal:#00CDC4;

  --amber:#FFBD36;
  --pink:#F77EC3;
  --green:#00AD00;
  --orange:#FF6100;
  --yellow:#F9DD00;
  --purple:#925EEF;

  --ink:#0b1b2e;
  --paper:#f5f7fb;
  --white:#ffffff;

  --font-head:'Poppins', 'Segoe UI', sans-serif;
  --font-body:'General Sans','Segoe UI', sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-normal: 480ms;

  /* Reserved horizontal clearance so the fixed dot-nav rail (numbered
     circles only, no long labels) and the prev/next arrow buttons never
     sit on top of slide content. */
  --rail-right: clamp(120px, 14vw, 180px);
  --rail-left: clamp(70px, 10vw, 110px);
  --content-pad-x: clamp(20px, 6vw, 80px);
}

@media (max-width:900px){
  :root{
    /* dot-nav is hidden below 900px, so the right rail only needs to
       clear the (repositioned) next arrow button. */
    --rail-right: 74px;
    --rail-left: 60px;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font-body);
  background:var(--navy-deep);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- progress bar ---------- */
#progress-bar{
  position:fixed; top:0; left:0; width:100%; height:3px;
  background:rgba(255,255,255,0.12); z-index:60;
}
#progress-fill{
  height:100%; width:0%; background:linear-gradient(90deg,var(--teal),var(--blue));
  transition:width var(--dur-normal) var(--ease-out-expo);
}

/* ---------- dot navigation ---------- */
#dot-nav{
  position:fixed; right:clamp(14px,2.4vw,32px); top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
.dot{
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:none; border:none; padding:4px;
}
.dot-num{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:rgba(6,32,66,0.92); border:1px solid rgba(255,255,255,0.4);
  color:#fff; font-family:var(--font-body); font-size:11px; font-weight:700;
  box-shadow:0 3px 12px rgba(6,20,40,0.5);
  transition:transform 220ms var(--ease-out-expo), background 220ms, box-shadow 220ms;
}
.dot:hover .dot-num{
  transform:scale(1.45);
  background:var(--blue);
  box-shadow:0 6px 18px rgba(24,119,242,0.55);
}
.dot.active .dot-num{
  background:var(--teal); box-shadow:0 0 0 4px rgba(0,205,196,0.3);
}

/* ---------- arrows ---------- */
.nav-arrow{
  position:fixed; top:50%; transform:translateY(-50%); z-index:60;
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.22);
  background:rgba(6,50,99,0.55); backdrop-filter:blur(6px); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background 200ms, border-color 200ms, transform 200ms;
}
.nav-arrow:hover{ background:var(--blue); border-color:var(--blue); }
.nav-arrow:disabled{ opacity:0.25; cursor:default; }
.nav-arrow:disabled:hover{ background:rgba(6,50,99,0.55); border-color:rgba(255,255,255,0.22); }
#prev-btn{ left:clamp(10px,2vw,28px); }
#next-btn{ right:clamp(66px,7vw,110px); }

/* ---------- download-as-PDF button ---------- */
.download-btn{
  position:fixed; top:18px; right:18px; z-index:70;
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,0.28);
  background:rgba(6,50,99,0.6); backdrop-filter:blur(6px); color:#fff; cursor:pointer;
  font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.03em;
  transition:background 200ms, transform 200ms, opacity 200ms;
}
.download-btn:hover{ background:var(--blue); transform:translateY(-2px); }
.download-btn:disabled{ opacity:.65; cursor:wait; transform:none; }
@media (max-width:900px){
  .download-btn-label{ display:none; }
  .download-btn{ padding:10px; top:12px; right:12px; }
}

/* ---------- deck / slides ---------- */
#deck{ position:relative; width:100vw; height:100vh; }
.slide{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  transform:translateX(40px) scale(0.99);
  transition:opacity var(--dur-normal) var(--ease-out-expo), transform var(--dur-normal) var(--ease-out-expo);
  overflow-y:auto; overflow-x:hidden;
}
.slide.active{ opacity:1; pointer-events:auto; transform:translateX(0) scale(1); z-index:5; }
.slide.prev-out{ transform:translateX(-40px) scale(0.99); }

.slide::-webkit-scrollbar{ width:8px; }
.slide::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.18); border-radius:8px; }

/* ---------- cover slide ---------- */
.cover{
  background:
    radial-gradient(circle at 82% 12%, rgba(0,205,196,0.35), transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(24,119,242,0.35), transparent 45%),
    linear-gradient(160deg, var(--navy-deep) 0%, #041f40 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6vh max(6vw, var(--rail-right)) 6vh max(6vw, var(--rail-left));
  position:relative;
}
.cover::before, .cover::after{
  content:''; position:absolute; border:1px solid rgba(255,255,255,0.14); border-radius:32px;
}
.cover::before{ top:6%; left:6%; right:34%; bottom:58%; border-top:none; border-left:none; }
.cover::after{ bottom:8%; right:6%; left:34%; top:58%; border-bottom:none; border-right:none; }
.cover-logo{ width:min(240px,34vw); margin-bottom:clamp(28px,5vh,56px); filter:drop-shadow(0 8px 30px rgba(0,0,0,0.35)); }
.cover-eyebrow{
  font-family:var(--font-body); font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  font-size:clamp(11px,1.1vw,13px); color:var(--teal); margin-bottom:18px;
}
.cover h1{
  font-family:var(--font-head); font-weight:300; color:#fff; margin:0;
  font-size:clamp(2.1rem,5.4vw,4.4rem); line-height:1.08; max-width:16ch;
}
.cover h1 strong{ font-weight:600; color:var(--teal); display:block; }
.cover p.sub{
  font-family:var(--font-body); color:rgba(255,255,255,0.72); font-size:clamp(15px,1.5vw,19px);
  margin:clamp(18px,3vh,30px) 0 0; max-width:44ch; line-height:1.6;
}
.cover-cta{
  margin-top:clamp(32px,6vh,56px); display:flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  font-size:13px; color:#fff; cursor:pointer; padding:14px 26px; border-radius:999px;
  background:var(--blue); transition:transform 220ms var(--ease-out-expo), background 220ms;
}
.cover-cta:hover{ background:var(--teal); transform:translateY(-2px); }

/* ---------- section slide layout ---------- */
.section-slide{ background:var(--paper); }
.section-head{
  position:sticky; top:0; z-index:10;
  padding:clamp(28px,6vh,64px) max(var(--content-pad-x), var(--rail-right)) clamp(18px,3vh,28px) max(var(--content-pad-x), var(--rail-left));
  background:linear-gradient(180deg, var(--paper) 78%, rgba(245,247,251,0));
}
.section-kicker{
  font-family:var(--font-body); font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  font-size:12px; color:var(--accent, var(--blue)); margin:0 0 10px;
}
.section-head h2{
  font-family:var(--font-head); font-weight:600; color:var(--navy-deep); margin:0;
  font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.1; max-width:22ch;
}
.section-count{
  font-family:var(--font-body); color:var(--navy-slate); opacity:.75; font-size:13px; margin-top:10px;
}
.section-rule{ height:4px; width:64px; border-radius:4px; background:var(--accent, var(--blue)); margin-top:18px; }

.section-body{ padding:0 max(var(--content-pad-x), var(--rail-right)) clamp(60px,10vh,110px) max(var(--content-pad-x), var(--rail-left)); }

/* ---------- carousel ---------- */
.carousel{
  position:relative; width:100%; aspect-ratio:16/8; max-height:56vh; border-radius:20px;
  overflow:hidden; margin-bottom:clamp(28px,5vh,52px); background:#0c1c33;
  box-shadow:0 24px 50px -20px rgba(6,50,99,0.45);
  touch-action:pan-y;
}
.carousel.is-swipeable{ cursor:grab; }
.carousel.is-swipeable.dragging{ cursor:grabbing; }
.carousel.is-swipeable.dragging .carousel-slide.active img{ transition:none; }
.carousel-track{ position:relative; width:100%; height:100%; }
.carousel-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 700ms ease;
}
.carousel-slide.active{ opacity:1; }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel-fade{
  position:absolute; left:0; right:0; bottom:0; height:40%;
  background:linear-gradient(0deg, rgba(6,20,40,0.55), transparent);
  pointer-events:none;
}
.carousel-ctrl{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  background:rgba(6,20,40,0.5); border:1px solid rgba(255,255,255,0.3); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3;
  transition:background 180ms;
}
.carousel-ctrl:hover{ background:var(--blue); }
.carousel-ctrl.prev{ left:16px; } .carousel-ctrl.next{ right:16px; }
.carousel-dots{
  position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:7px; z-index:3;
}
.carousel-dots button{
  width:7px; height:7px; border-radius:50%; border:none; background:rgba(255,255,255,0.4); cursor:pointer; padding:0;
}
.carousel-dots button.active{ background:#fff; width:20px; border-radius:5px; }

/* ---------- photo -> Facebook link badge ---------- */
.carousel-photo-link{
  position:absolute; z-index:4; display:flex; align-items:center; gap:6px;
  bottom:14px; right:14px; padding:6px 12px 6px 8px; border-radius:999px;
  background:rgba(6,20,40,0.6); border:1px solid rgba(255,255,255,0.28); color:#fff;
  font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.03em;
  text-decoration:none; backdrop-filter:blur(4px);
  transition:background 180ms, transform 180ms;
}
.carousel-photo-link:hover{ background:var(--blue); transform:translateY(-2px); }
.poster-photo-link{ bottom:10px; right:10px; }

/* ---------- poster grid ---------- */
.poster-grid{
  columns: 4 240px; column-gap:18px;
}
.poster-grid figure{
  position:relative;
  break-inside:avoid; margin:0 0 18px; border-radius:14px; overflow:hidden;
  background:#fff; box-shadow:0 10px 26px -14px rgba(6,50,99,0.28);
  transition:transform 260ms var(--ease-out-expo), box-shadow 260ms;
}
.poster-grid figure:hover{ transform:translateY(-4px); box-shadow:0 18px 32px -14px rgba(6,50,99,0.4); }
.poster-grid img{ width:100%; height:auto; display:block; }

@media (max-width:900px){
  .poster-grid{ columns:2 160px; }
  .nav-arrow{ width:38px; height:38px; }
  #next-btn{ right:16px; }
  #prev-btn{ left:16px; }
  #dot-nav{ display:none; }
}
@media (max-width:560px){
  .poster-grid{ columns:1; }
  .carousel{ aspect-ratio:4/3; max-height:40vh; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .slide, .carousel-slide, #progress-fill, .dot-mark{ transition:none !important; }
}

/* ---------- print / "Download PDF" output ----------
   Turns the swipeable single-page deck into a plain, linear document so the
   browser's native print-to-PDF pipeline (triggered by #download-btn) renders
   every slide, every carousel photo and every poster with the page's real
   fonts/images — no canvas re-rendering, so nothing gets lost or re-drawn.
   Forced to landscape and laid out as a compact photo grid (instead of one
   big image per page) so the export doesn't balloon into dozens of pages. */
@page{ size: landscape; margin: 10mm; }

@media print{
  #progress-bar, #dot-nav, .nav-arrow, .download-btn, .cover-cta,
  .carousel-ctrl, .carousel-dots, .carousel-fade, .carousel-photo-link{
    display:none !important;
  }

  html, body{
    height:auto !important; overflow:visible !important; background:#fff !important;
  }

  #deck{ position:static !important; width:auto !important; height:auto !important; }

  .slide{
    position:static !important; opacity:1 !important; pointer-events:auto !important;
    transform:none !important; overflow:visible !important;
    min-height:0 !important;
    page-break-after:always; break-after:page;
  }
  .slide:last-child{ page-break-after:auto; break-after:auto; }

  .cover{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
    min-height:100vh !important; height:100vh !important; width:100% !important;
    padding:16px !important; justify-content:center !important;
    margin:0 !important; box-sizing:border-box !important;
  }
  .cover-logo{ width:120px !important; margin-bottom:14px !important; }
  .cover-eyebrow{ margin-bottom:8px !important; }
  .cover h1{ font-size:1.8rem !important; }
  .cover p.sub{ font-size:12px !important; margin:10px 0 0 !important; }

  .section-head{
    position:static !important; background:none !important;
    padding:0 0 8px !important;
  }
  .section-kicker{ font-size:9px !important; margin-bottom:3px !important; }
  .section-head h2{ font-size:1.25rem !important; max-width:none !important; }
  .section-count{ font-size:10px !important; margin-top:4px !important; }
  .section-rule{ height:3px !important; margin-top:8px !important; }

  .section-body{ padding:0 !important; }

  /* Compact contact-sheet grid instead of one large image per page */
  .carousel{
    position:static !important; aspect-ratio:auto !important; max-height:none !important;
    height:auto !important; overflow:visible !important; box-shadow:none !important;
    background:none !important; margin-bottom:10px !important; border-radius:0 !important;
  }
  .carousel-track{
    display:grid !important; grid-template-columns:repeat(5, 1fr) !important;
    gap:5px !important; position:static !important; height:auto !important;
  }
  .carousel-slide{
    position:static !important; opacity:1 !important; display:block !important;
    margin:0 !important; break-inside:avoid; page-break-inside:avoid;
    aspect-ratio:4/3; border-radius:3px; overflow:hidden;
  }
  .carousel-slide img{
    width:100% !important; height:100% !important; object-fit:cover !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }

  .poster-grid{ columns:6 !important; column-gap:5px !important; }
  .poster-grid figure{
    margin:0 0 5px !important; box-shadow:none !important;
    break-inside:avoid; page-break-inside:avoid;
  }
  .poster-grid img{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}