/* styles.css - Complete Website Styles */


/* BASE/RESET STYLES | Fonts, colors, body, links, headings, etc. */ 


/* Reset box-sizing for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Font smoothing for better rendering */
body, html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Body base styles */
body {
  margin-top: 0;
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-size: 1.08em;
  line-height: 1.7;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* JS keeps this updated to match the current fixed navbar height */
:root {
  --nav-offset: 120px;
}

/* Headings: consistent font, weight, spacing */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 700;
  color: #fff;
  margin-top: 0;
  margin-bottom: 0.6em;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

h1 { font-size: 2.8em; }
h2 { font-size: 2em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; }
h6 { font-size: 0.95em; }

/* Paragraphs: readable and spaced */
p {
  font-size: 1.08em;
  line-height: 1.7;
  margin-bottom: 1.2em;
  color: #fff;
}

/* Links: modern color and hover effect */
a {
  color: #e53935;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: #FF6666;
  text-decoration: underline;
}


/* Spacer utility classes for vertical spacing */
.spacer {
  width: 100%;
  display: block;
}
.spacer-30 { height: 30px; }
.spacer-40 { height: 40px; }
.spacer-80 { height: 80px; }
.spacer-100 { height: 100px; }
/* Add more as needed */




.quote {
  font-style: italic;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 300;           /* thin */
  font-size: 1.15em;          /* slightly larger, adjust as needed */
  color: #fff;                /* pure white, or use #eee for softer */
  margin: 28px 0;             /* space above and below each quote */
  display: block;
  letter-spacing: 0.5px;
}


.highlight {
  color: #e53935;
  font-weight: bold;
}


/* LAYOUT & UTILITY CLASSES | .section, .spacer, .container, .center, .hidden, etc. */
.section {
  display: none;
  min-height: 100vh;
  padding: 0 25px 40px 25px;
  position: relative;
  margin: 0;
}

.section.active {
  display: block;
}

#home.section {
  display: block;
  padding-top: 0;
}

.section-header {
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 25px auto 35px;
  max-width: 800px;
  text-align: center;
  position: relative;
}

.section-header:hover {
  color: #FF6666;
}

.section-header h2 {
  margin: 0;
  font-size: 2.6em;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 0 15px rgba(255, 102, 102, 0.4);
}

.section-content {
  padding: 20px;
  font-size: 1.1em;
  line-height: 1.7;
  margin-top: 25px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}





/* DESKTOP NAVIGATION | .navbar, .logo, .menu, .hamburger, etc.  */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: transparent;
  padding: 0;
  z-index: 900;
  animation: fadeIn 0.8s ease-out;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.logo {
  position: fixed;
  left: 34px;
  top: 12px;
  width: 50px;
  height: 50px;
  z-index: 1001;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: auto;
}

.logo:hover {
  /* Desktop logo hover animation removed (was sticky/broken in some browsers). */
  transform: none;
  filter: none;
}

/* Mobile-only: short tap feedback on logo, reset quickly */
@media (hover: none) and (pointer: coarse) {
  .logo.logo-tap-animate {
    transform: scale(1.06) rotate(4deg);
    filter: drop-shadow(0 0 8px rgba(255, 102, 102, 0.55));
  }
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: none;
}



.navbar a {
  color: #FFF;
  text-decoration: none;
  margin: 0 10px;
  font-size: 0.95em;
  font-weight: 400;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  padding: 6px 2px;
}

.navbar a:hover {
  color: #FF6666;
  transform: translateY(-3px);
  text-decoration: none;
}

.navbar a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #FF6666;
  transition: width 0.3s ease;
}

.navbar a:hover::after {
  width: 100%;
}

/* Logo link in navbar: no hover underline/bar/shift */
.navbar > a {
  padding: 0;
  margin: 0;
}
.navbar > a::after {
  content: none;
}
.navbar > a:hover {
  transform: none;
  text-decoration: none;
}

.navbar a.active {
  color: #FF6666;
  font-weight: 700;
  border-bottom: 2px solid #FF6666;
}

.new-label {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72em;
  font-weight: 500;
  font-style: italic;
  color: #FF6666;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.hamburger {
  display: none;
  font-size: 1.8em;
  cursor: pointer;
  color: #FFF;
  margin: 0 20px;
  transition: all 0.3s;
}

.hamburger:hover {
  color: #FF6666;
}

/* Scroll behavior */
.navbar.hidden {
  transform: translateY(-100%);
}





/* ...existing code... */

/* Mobile Hamburger and Dropdown */
@media (max-width: 768px) {
  .navbar {
    display: flex;
    /* Stretch the banner vertically; logo/hamburger override to top-align */
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;

    /* Important: avoid a hard height cap so the Nostr pill can grow taller.
       Keep a minimum for layout stability, but allow content-driven height. */
    min-height: 92px;
    height: auto;
    padding: 6px 20px;
  }

  /* On mobile the logo must be in-flow so the banner can sit between logo and hamburger */
  .logo {
    position: static;
    left: auto;
    top: auto;
  }
  
  .hamburger {
    display: block;
    cursor: pointer;
    font-size: 24px;
    position: static;
    margin: 0;
    top: 12px;
    right: 34px; /* Adjusted to match logo's left margin for better alignment */
    z-index: 1001;
    align-self: flex-start;
  }
  
  .menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #000000;
    width: 200px;
    flex-direction: column;
    padding: 10px;
    animation: slideDown 0.3s ease-out;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }

  /* Keep the logo vertically centered even when navbar stretches */
  .logo {
    align-self: flex-start;
  }
  .menu-dropdown a {
    margin: 5px 0;
    color: white;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 16px;
    padding: 10px 12px; /* better tap target */
    border-bottom: 0;   /* your desktop active style uses border-bottom; not great in dropdown */
  }

  /* In the dropdown: match desktop feel (letters + underline), no full-row rectangle */
  .menu-dropdown a::after { content: none !important; }
  .menu-dropdown a.active {
    color: #FF6666;
    font-weight: 700;
    background: transparent;
    border-radius: 0;
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-color: #FF6666;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  .menu-dropdown a:hover {
    color: #FF6666;
    text-shadow: none;
    text-decoration: underline;
    text-decoration-color: #FF6666;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  /* Mobile dropdown: keep “New!” attached to Arctic (inline) */
  .menu-dropdown a .new-label {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    margin-left: 6px;
    font-size: 0.8em;
    line-height: 1;
    white-space: nowrap;
  }
  .hamburger.active + .menu-dropdown { display: flex; }

  .hamburger.active,
  .hamburger.has-active-section {
  color: #FF6666;
  }

  /* Optional: small dot indicator */
  .hamburger.has-active-section::after {
  content: none;
  display: none;
}



  
}

/* Slide Animation */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Ensure DESKTOP MENU shows and is positioned like original */
@media (min-width: 769px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .hamburger { display: none; }
  .menu-dropdown {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    margin-right: 34px; /* Added right margin for breathing room */
    position: relative;
  }
  .menu-dropdown a {
    margin: 0 10px;
  }
}

/* Tablet: prefer hamburger to avoid wrapped/overlapping nav links */
@media (min-width: 769px) and (max-width: 1024px) {
  .hamburger {
    display: block;
    cursor: pointer;
    font-size: 24px;
    position: static;
    margin: 0;
    z-index: 1001;
  }

  .menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #000000;
    width: 220px;
    flex-direction: column;
    padding: 10px;
    animation: slideDown 0.3s ease-out;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    margin-top: 0;
    margin-right: 0;
  }

  .menu-dropdown a {
    margin: 5px 0;
    color: white;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 16px;
    padding: 10px 12px;
    border-bottom: 0;
  }

  .menu-dropdown a::after { content: none !important; }

  .hamburger.active + .menu-dropdown { display: flex; }
}

/* Arweave section: keep the ASCII sketch readable on tablet/mobile */
.arweave-section pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Debug helper (opt-in): add class "debug-layout" to <body> */
body.debug-layout * {
  outline: 1px solid rgba(255, 0, 0, 0.28);
}
body.debug-layout *:hover {
  outline: 2px solid rgba(0, 255, 255, 0.6);
}
/* ...existing code... */









/* KEYFRAMES */



/*REUSABLE COMPONENTS | Collapsible: .collapsible-block, .collapsible-header, .collapsible-content, .collapse-arrow
Scroll/Animation: .spacer, .fadeIn, .slide-row, etc.
Modal: .modal, .modal-close
Zoom: (If you have image zoom, e.g., .zoom-img)
Carousel/Slider: .wheel, .wheel-item, .gallery-container
Hero: .hero-block, .hero-img, .hero-text, .hero-video, .hero-overlay
Text Blocks: .black-block, .black-block-content
Buttons: .button, .read-more
Quotes: .quote
Testimonials: .testimonial, .testimonial__carousel, etc. /*
/* REUSABLE COMPONENTS */

/* Standard Black Text Block */
.text-block {
  background: #000;
  color: #fff;
  padding: 60px 30px;
  border-radius: 12px;
  margin: 40px auto 0 auto;
  max-width: 1200px;
  box-shadow: none;
}
.text-block-content {
  max-width: 900px;
  margin: 0 auto;
}

/* Standard Alternating Image/Text Block */
.image-text-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  max-width: 1200px;
  margin: 40px auto 0 auto;
  padding: 40px 30px;
  background: none;
  border-radius: 0;
}
.image-text-block img {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
.image-text-block .text {
  flex: 1;
  color: #fff;
  text-align: left;
  padding: 0 32px;
  background: none;
}
.small-text {
  font-size: 0.9em;
  color: #888;
}

/* Footer helper: ~50% smaller than .small-text when needed */
.tiny-text {
  font-size: 0.45em;
}

/* Utility: show only on mobile */
.mobile-only {
  display: none;
}

.hack-between-image {
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 0 12px;
  box-sizing: border-box;
}
.hack-between-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
}

/* Standard Alternating Image/Text Block - Left/Right Layouts */
.image-text-block.left img {
  order: 1;
}
.image-text-block.left .text {
  order: 2;
}
.image-text-block.right .text {
  order: 1;
}
.image-text-block.right img {
  order: 2;
}

/* Photo Grid: 2 rows, 4 images each */
.photo-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 150px auto 0 auto;
  max-width: 1200px;
}
.photo-row {
  display: flex;
  gap: 18px;
  justify-content: center;
}
.photo-row img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  cursor: zoom-in;
}

.media-row img {
  cursor: zoom-in;
}

/* Image with Button Overlay (more home) */
.image-button-block {
  background: #000;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  display: block;
}

.image-button-block img {
  width: 100vw;
  max-width: 100vw;
  /* Prevent 100vw images from creating horizontal scroll when placed inside padded containers */
  margin-left: calc(50% - 50vw);
  height: 700px;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  border: none;
  display: block;
  object-fit: cover;
}

.image-button-block .button {
  margin-top: 18px;
  padding: 12px 28px;
  font-size: 1.05em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.button:hover {
  background: rgba(255, 102, 102, 0.15);
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(255, 102, 102, 0.2);
}

/* Disabled button (e.g., “Available Soon”) */
.button.button-disabled,
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.button.button-disabled:hover,
.button[aria-disabled="true"]:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
  text-decoration: none;
}

.image-button-block .button:hover {
  background: rgba(255, 102, 102, 0.15);
  box-shadow: 0 5px 20px rgba(255, 102, 102, 0.2);
  /* Remove transform so it doesn't move */
  transform: translate(-50%, -50%);
}


/* Remove box-shadow and border from overlay blocks and images (except media carousel/grid) */
.image-overlay-block img,
.image-overlay-block .text,
.image-overlay-block div[style*="background"] {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.text-block,
.text-block-content {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.image-text-block img,
.image-text-block .text {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.image-overlay-block img:hover {
  border: none !important;
  box-shadow: none !important;
}

/* COLLAPSED state:S hide content */

.collapsed .section-content {
  display: none;
}

/* Collapsible Block Styles */
.collapsible-block {
  background: #111;
  border-radius: 12px;
  margin: 40px auto 0 auto;
  max-width: 1200px;
  box-shadow: none;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

/* Collapsible Header: width transition */
.collapsible-header {
  cursor: pointer;
  padding: 24px 30px;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  font-size: 1.0em;
  border-bottom: 1px solid #333;
  width: 100%;
  transition: width 0.3s;
  border-radius: 12px;
  margin: 0;
  gap: 24px; 
}

.collapsible-header h1,
.collapsible-header h2,
.collapsible-header h3 {
  margin: 0;
  padding: 0;
  line-height: 1.15;
  display: flex;
  align-items: center;
}

.collapsible-block:not(.collapsed) .collapsible-header {
  width: 100%; /* expanded width */
  border-radius: 12px 12px 0 0;
}

/* Collapse Arrow */
.collapse-arrow {
  font-size: 2em;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transition: transform 0.2s;
}

.collapsible-block.collapsed .collapse-arrow {
  transform: rotate(-90deg);
}

/* Collapsible Content */
.collapsible-content {
  padding: 32px 30px;
  display: block;
  transition: max-height 0.3s, opacity 0.3s;
  max-height: 12000px;
  opacity: 1;
}

.collapsible-block.collapsed .collapsible-content {
  max-height: 0;
  opacity: 0;
  padding: 0 30px;
  overflow: hidden;
}

.read-more {
  color: #FF6666;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-block;
  margin-top: 15px;
}

.read-more:hover {
  text-decoration: underline;
  transform: translateX(5px);
}

.button {
  padding: 12px 28px;
  background: transparent;
  color: #FF6666;
  border: 2px solid #FF6666;
  border-radius: 8px;
  font-size: 1.05em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-block;
  margin-top: 20px;
  text-align: center;
  letter-spacing: 0.5px;
}

.button:hover {
  background: rgba(255, 102, 102, 0.15);
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(255, 102, 102, 0.2);
}

.image-button-container {
  position: relative;
  display: inline-block;
}

.image-button-container .button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin-top: 0; /* override if needed */
}









/*TESTIMONIALS FOR ALL PAGES*/
/* Testimonials Block */
.testimonial-logo {
  text-align: center;
  margin-top: 0;
  margin-bottom: 40px;
}

.trusted-by-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.trusted-by-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: #fff;
  opacity: 0.75;
  white-space: nowrap;
}

.trusted-by-arrow {
  display: inline-block;
  font-size: 1.55em;
  line-height: 1;
  margin-right: 22px; /* more space between arrow tip and infinity */
  transform: translateY(2px);
  animation: trustedByNudge 1.35s ease-in-out infinite;
  -webkit-text-stroke: 0.6px currentColor;
  text-shadow:
    0.4px 0 0 currentColor,
    -0.4px 0 0 currentColor,
    0 0.4px 0 currentColor,
    0 -0.4px 0 currentColor;
}

.trusted-by-infinity {
  position: relative;
  display: inline-block;
  font-size: 4.08em; /* ~2.4x of the original 1.7em */
  line-height: 0.92;
}

.trusted-by-almost {
  position: absolute;
  top: 6px;
  right: -22px;
  font-size: 8px;
  color: #777;
  letter-spacing: 0.2px;
}

@keyframes trustedByNudge {
  0%, 100% { transform: translateY(2px) translateX(0); }
  50% { transform: translateY(2px) translateX(6px); }
}

/* Mobile-only: hide the arrow + infinity + ^(almost) marks (keep desktop as-is) */
@media (max-width: 768px) {
  .trusted-by-arrow,
  .trusted-by-infinity,
  .trusted-by-almost {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .trusted-by-lockup {
    gap: 4px;
  }

  .trusted-by-arrow {
    font-size: 1.35em;
    margin-right: 16px;
  }

  .trusted-by-infinity {
    font-size: 3.25em;
  }

  .trusted-by-almost {
    font-size: 7px;
    right: -18px;
    top: 4px;
  }
}

@media (max-width: 360px) {
  .trusted-by-infinity {
    font-size: 2.9em;
  }

  .trusted-by-arrow {
    margin-right: 14px;
  }
}
.testimonial-logo img,
.testimonial img[alt="Trusted By"] {
  max-width: 100%;
  height: auto;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.testimonial__h2 {
  margin: 0 0 32px;
  text-align: center;
  font-size: 2.5em;
}

.testimonial__carousel {
  margin-bottom: 32px;
}

.testimonial__slide {
  display: none;
  text-align: center;
}
.testimonial__slide--active {
  display: block;
}

.testimonial__dots {
  margin-top: 24px;
  margin-bottom: 24px;
  text-align: center;
}

.testimonial__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 4px;
  cursor: pointer;
  transition: background 0.3s;
}
.testimonial__dot--active {
  background: #FF6666;
}

.testimonial__content-wrapper {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}


/* Home: 1# FAQ (Videos) */
#faq-1-videos {
  max-width: 980px;
}

#faq-1-videos .collapsible-header {
  justify-content: center;
  gap: 12px;
}

#faq-1-videos .collapsible-header h2 {
  font-size: 1.35em;
  text-align: center;
  margin: 0;
}

#faq-1-videos .faq-conversation p {
  margin: 0 0 10px;
}

#faq-1-videos .collapsible-content {
  padding: 22px 20px;
}

#faq-1-videos .faq-closer {
  margin-top: 18px;
}

#faq-1-videos .faq-gap {
  height: 12px;
}

#faq-1-videos .faq-gap.faq-gap--large {
  height: 18px;
}

#faq-1-videos .faq-signoff {
  margin: 12px 0 0;
  font-style: italic;
}

#faq-1-videos .faq-fineprint {
  margin-top: 18px;
  font-size: 0.72em;
  color: #777;
  line-height: 1.55;
}

@media (max-width: 768px) {
  #faq-1-videos .collapsible-header {
    padding: 20px 18px;
  }
  #faq-1-videos .collapsible-header h2 {
    font-size: 1.1em;
  }

  #faq-1-videos {
    max-width: 100%;
  }

  /* Match desktop feel: slightly smaller body text + tighter padding on mobile */
  #faq-1-videos .collapsible-content {
    padding: 20px 18px;
  }

  #faq-1-videos .faq-conversation p {
    font-size: 0.98em;
    line-height: 1.6;
  }

  /* Mobile: FYI fineprint should be ~50% smaller */
  #faq-1-videos p.faq-fineprint {
    font-size: 0.36em !important;
    line-height: 1.45;
  }
}

@media (max-width: 425px) {
  #faq-1-videos .collapsible-header h2 {
    font-size: 0.98em;
  }

  #faq-1-videos .collapsible-content {
    padding: 18px 16px;
  }

  /* Mobile: keep header “connected”, but ensure ▼ has inner padding and title stays visually centered */
  #faq-1-videos .collapsible-header {
    justify-content: space-between;
    gap: 12px;
    padding: 18px 26px; /* more right padding so ▼ never hugs the edge */
  }

  #faq-1-videos .collapsible-header h2 {
    flex: 1;
    text-align: center;
    margin: 0;
  }

  #faq-1-videos .collapse-arrow {
    flex: 0 0 auto;
    font-size: 1.45em;
    margin-left: 12px;
    margin-right: 4px; /* slight inset from the inner edge */
  }

}

@media (max-width: 360px) {
  #faq-1-videos .faq-conversation p {
    font-size: 0.95em;
  }

  #faq-1-videos .collapsible-header h2 {
    font-size: 0.92em;
  }

  #faq-1-videos .collapse-arrow {
    font-size: 1.5em;
  }
}



/* WORK SECTORS for all pages */

.work-sectors-block {
  text-align: center;
}

.work-sectors-title {
  font-size: 2.8em;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 32px;
  color: #fff;
}

.work-sectors-groups {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.work-sectors-row {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.work-sector-btn {
  min-width: 200px;
}

.work-sectors-tags {
  margin-top: 38px;
}

.work-sectors-tags strong {
  color: #fff;
  font-size: 1.15em;
}

/* Activities list (Winter/Summer) */
.activity-list {
  margin: 12px 0 0;
  padding-left: 0;
  list-style: none;
}
.activity-list li {
  position: relative;
  padding-left: 14px;
  margin: 7px 0;
  line-height: 1.35;
}
.activity-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.9;
}

.activity-list li.activity-more {
  padding-left: 0;
}

.activity-list li.activity-more::before {
  content: "";
}





/* HERO IMG AND VIDEO SHARED */
.hero-block {
  position: relative;
  width: 100vw;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  margin-top: 0 !important;
}

.hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.7);
  z-index: 1;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100vw;
  min-height: 100vh;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  background: #000;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
  z-index: 2;
}

.hero-text {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 12px #000;
  padding: 0 24px;
}

.hero-text h1 {
  font-size: 4.5em;
  margin-bottom: 25px;
  text-shadow: 0 0 25px rgba(255,255,255,0.6);
  letter-spacing: 1px;
  font-weight: 700;
  line-height: 1.1;
}

.hero-text h2 {
  font-size: 4em;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 18px;
  text-shadow: 0 0 25px rgba(255,255,255,0.6);
}

.hero-text h3 {
  font-size: 1.7em;
  font-weight: 300;
  margin-bottom: 32px;
  text-shadow: 0 0 15px rgba(255,255,255,0.5);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}







/* HOME PAGE styles */
/* Home Hero Block */
.home-hero-block {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.home-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100vw;
  min-height: 100vh;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.85);
}

.home-hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.18));
  z-index: 2;
}

.hero-content.home-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 12px #000;
  padding: 0 24px;
}

.home-hero-title {
  font-size: 4.5em;
  margin-bottom: 25px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.1;
}

.home-hero-subtitle {
  font-size: 2em;
  font-weight: 200;
  margin-bottom: 18px;
}

.home-hero-title,
.home-hero-subtitle {
  opacity: 0;
  transition: opacity 1.2s ease-in;
}
.home-hero-title.visible,
.home-hero-subtitle.visible {
  opacity: 1;
}

.home-hero-content .quote {
  font-style: italic;
  color: #bbb;
  font-size: 1em;
}

.home-hero-button-row {
  margin-bottom: 24px;
}

.home-hero-signature {
  font-size: 0.9em;
  color: #fff;
  margin-top: 18px;
  font-weight: 400;
  letter-spacing: 0.3px;
  line-height: 1.35;
}

.home-hero-signature strong {
  font-weight: 400;
}

/* Blinking cursor for typing effect */
.typing-cursor {
  display: inline-block;
  width: 1ch;
  animation: blink 0.8s steps(1) infinite;
  color: #fff;
  font-weight: 900;
  font-size: 1em;
  vertical-align: middle;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (max-width: 425px) {
  .home-hero-block {
    margin-top: 120px; /* Matches nav height; adjust if needed */
  }
}



/* home SUB Testimonials/Company Logos Block standard */




/*home MediaSub secton for with "Media button" */
#Mediasub .media-image-btn {
  top: 38%; /* Move up from 50% (center) to 40% (higher) */
}




/* home Black Text Block: Work Sectors  - see standard styles */


/*home secton for decentralize with "hack button" */
#centralized-decentralized .button {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
#centralized-decentralized {
  position: relative;
}


/* home Sub Experience Block */
/* Experience Block */
.experience-content {
  text-align: center;
}

.experience-title {
  font-size: 2.8em;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 32px;
  color: #fff;
}

.experience-list {
  margin: 0;
  font-size: 1.1em;
}


/*About Image Sub-Section (Text Left) */
/* About Overlay Block (unique to About) */
.about-overlay-block.section,
.neuromagic-overlay-block.section {
  min-height: auto;
  padding: 0;
}

.about-overlay-block {
  position: relative;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.about-overlay-img {
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: 10px;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.about-overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 40px;
  pointer-events: none;
}

.about-overlay-text {
  background: transparent;
  padding: 0;
  color: #fff;
  pointer-events: auto;
  border-radius: 0;
}

.about-overlay-title {
  color: #fff;
  font-size: 2em;
  margin-bottom: 12px;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}

.about-overlay-desc {
  color: #fff;
  font-size: 1.1em;
  font-weight: 300;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}

.about-overlay-btn {
  margin-top: 18px;
  display: inline-block;
}


/* Neuromagic Image Sub-Section (Text Right) */
/* Neuromagic Overlay Block (Text Right) */
.neuromagic-overlay-block {
  position: relative;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
}

.neuromagic-overlay-img {
  width: 100%;
  display: block;
  filter: brightness(0.7);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.neuromagic-overlay-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 28px; /* slightly more to the right */
  pointer-events: none;
}

.neuromagic-overlay-text {
  background: transparent;
  padding: 0;
  color: #fff;
  pointer-events: auto;
  border-radius: 0;
  box-shadow: none;
}

.neuromagic-overlay-title {
  color: #fff;
  font-size: 2em;
  margin-bottom: 12px;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}

.neuromagic-overlay-desc {
  color: #fff;
  font-size: 1.1em;
  font-weight: 300;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}

.neuromagic-overlay-btn {
  margin-top: 18px;
  display: inline-block;
}




/* Digital Fingerprint Sub-Section (Text Right) *//*
inside digital fingerprint css kode */

/* Jack of All Trades Sub-Section */
.jackofall-block {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 40px 0;
}

.jackofall-title {
  font-size: 2.5em;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0;
}

.jackofall-list {
  list-style: none;
  padding: 0;
  font-size: 1.15em;
  font-weight: 400;
  margin: 0;
}

.jackofall-list li {
  margin: 0;
  padding: 14px 0;
}

.jackofall-list li:not(.jackofall-lead)::before {
  content: "";
  display: block;
  width: 9ch; /* ~7–10 letters */
  margin: 0 auto 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.jackofall-lead {
  font-size: 1.3em;
  font-weight: 200;
  margin-bottom: 0;
  padding-bottom: 14px;
}

.jackofall-end {
  margin-top: 0;
}

/*Love to learn & learn to Love Block*/
/* Love to Learn & Learn to Love Block */
.love-learn-block {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 60px 0;
}

.love-learn-title {
  font-size: 2.5em;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0;
}





/*PAGES STYLES */



/* About Page Styles */
.about-section {
  background: #000;
  color: #fff;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* About Hero Header */
.about-hero {
  position: relative;
  width: 100vw;
  height: 180vh; /* Increased height for bigger image */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.about-hero-img {
  width: 100vw;
  height: 180vh; /* Match container height */
  object-fit: cover;
  filter: brightness(0.7);
}

.about-hero-text {
  position: absolute;
  top: 12%;
  left: 5vw;
  width: 50vw;
  max-width: 700px;
  color: #fff;
  z-index: 2;
  text-align: left;
  text-shadow: 0 2px 12px #000;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.about-title {
  font-size: 4em;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 25px rgba(0,0,0,0.6);
  text-align: left;
}

.about-quotes .quote {
  font-size: 1.3em;
  font-style: italic;
  margin: 6px 0;
  color: #e0e0e0;
  text-align: left;
  line-height: 1.25;
}

.about-dedication {
  margin-top: 18px;
  max-width: none;
}

.about-daily-label {
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 0.85em;
  color: #e0e0e0;
}

.about-main-text {
  font-size: 0.98em;
  margin: 0 0 12px;
  color: #fff;
  text-align: left;
  line-height: 1.55;
}

.about-highlight {
  color: #e53935;
  font-size: 0.9em;
  display: block;
  margin-top: 18px;
}

.about-linklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.about-link {
  color: #e53935;
  text-decoration: underline;
  word-break: break-all;
}



/* Black Blocks */
.about-black-block {
  background: #000;
  color: #fff;
  padding: 60px 30px;
  border-radius: 12px;
  margin: 40px auto 0 auto;
  max-width: 1200px;
  box-shadow: none;
}
.about-black-content {
  max-width: 800px;
  margin: 0 auto;
}

/* Passion Block */
.passion-block .passion-title {
  text-align: center;
}

.passion-block .passion-desc {
  text-align: center;
  margin-top: 32px;
}

.passion-gallery {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.passion-item {
  text-align: center;
  max-width: 240px;
}

.passion-item img {
  width: 240px;         /* or your preferred fixed width */
  height: 240px;        /* or your preferred fixed height */
  object-fit: cover;    /* ensures the image fills the box and is cropped if needed */
  border: none;         /* removes any border */
  box-shadow: none;     /* removes any shadow */
  border-radius: 10px;  /* optional: keeps rounded corners, set to 0 for square */
  margin-bottom: 10px;
  background: none;     /* ensures no background */
}

.passion-item h3 {
  margin: 0;
  font-size: 1.1em;
  color: #fff;
}

/* Timeline Block */
.text-block-timeline-content {
  font-size: 1.08em;
  line-height: 1.7;
  color: #fff;
}

/* About > Quick BIO spacing */
.bio-header {
  margin: 0 0 22px;
}

.bio-kicker,
.bio-byline {
  display: block;
}

.bio-kicker {
  margin: 0;
}

.bio-byline {
  margin-top: 12px;
}

.bio-title {
  margin-top: 0;
  margin-bottom: 18px;
}

/* About > Reminders/Recommendations */
.bio-notes {
  margin: 22px 0 10px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.bio-notes-title {
  margin: 18px 0 10px;
  font-size: 1.05em;
  font-weight: 700;
}

.bio-notes-list {
  margin: 0 0 16px;
  padding-left: 18px;
}

.bio-notes-list li {
  margin: 6px 0;
}

.lifetime-block {
  margin-top: 40px;
  background: #111;
  border-radius: 12px;
  box-shadow: none;
}
.lifetime-block .about-black-content {
  text-align: center;
}


.futevolei-hero-block {
  display: flex;
  align-items: center;
  background: #181818;
  border-radius: 16px;
  padding: 32px 24px;
  margin-bottom: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  gap: 32px;
}

.futevolei-hero-img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  background: #222;
}

.futevolei-hero-text {
  flex: 1;
  color: #fff;
  text-align: left;
}

.futevolei-title {
  font-size: 2.8em;
  font-weight: 800;
  margin-bottom: 12px;
  color: #fff;
  letter-spacing: 1px;
}

.futevolei-btn {
  display: inline-block;
  background: #e53935;
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1.1em;
  margin-top: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.2s;
}
.futevolei-btn:hover {
  background: #b71c1c;
}




/*HACK PAGE STYLE */
/* PATCH: Use flex for vertical placement instead of absolute */
.hack-hero-block {
  display: flex;
  align-items: flex-start; /* or center */
  justify-content: center;
  position: relative;
  height: 100vh;
}
.hack-hero-text {
  position: static;
  margin-top: 21vh; /* shared title height */
  width: 100%;
  max-width: 700px;
  text-align: center;
  color: #fff;
  z-index: 3;
  padding: 0 24px;
}

/* Hack hero: match About vibe (less glow, more clarity) */
.hack-hero-text h2 {
  margin-bottom: 14px;
  text-shadow: 0 2px 12px #000;
}
.hack-hero-text h2 strong {
  font-weight: 700;
}
.hack-hero-subtitle {
  margin: 0;
  font-size: 1.05em;
  line-height: 1.4;
  text-shadow: 0 2px 12px #000;
}

/* Shared hero title sizing across pages (exclude About) */
#hack .hack-hero-text h2,
#arctic .arctic-hero-text h2,
#neuromagic .neuromagic-hero-text h2,
#media .media-title-block h1 {
  font-size: 3.2em;
}

/* Arctic + Neuromagic hero: match Hack/About vibe (less glow, cleaner spacing) */
.arctic-hero-text h2,
.neuromagic-hero-text h2 {
  margin-bottom: 14px;
  text-shadow: 0 2px 12px #000;
}

.arctic-hero-subtitle,
.neuromagic-hero-subtitle {
  margin: 0;
  font-size: 1.05em;
  line-height: 1.4;
  text-shadow: 0 2px 12px #000;
}

/* E-HACKBOOK Section Styles */
.book-cover {
  width: 260px;
  height: 340px;
  margin: 0 auto 32px auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 1.5px 0 #e53935;
  border-radius: 18px;
  background: #111;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-matrix-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 18px;
  z-index: 0;
  pointer-events: none;
}
.book-content {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  padding: 30px 14px 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}
.book-title, .book-author, .book-tagline, .book-subtitle, .book-workbook {
  font-family: 'Poppins', Arial, sans-serif;
  text-align: center;
  text-shadow: 0 2px 10px #000;
}
.book-title {
  font-size: 1.5em;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 18px rgba(229,57,53,0.85);
}
.book-author {
  font-size: 1.05em;
  font-weight: 500;
  color: #fff;
  margin-bottom: 14px;
}
.book-tagline {
  font-size: 0.88em;
  font-style: italic;
  color: #fff;
  margin-top: 14px;
  margin-bottom: 8px;
}
.book-subtitle {
  font-size: 0.82em;
  color: #fff;
  margin-bottom: 0;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.25;
}

.book-ai {
  font-family: 'Poppins', Arial, sans-serif;
  text-align: center;
  text-shadow: 0 2px 10px #000;
  font-size: 0.74em;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.9;
}
.book-workbook {
  position: absolute;
  bottom: 18px;
  left: 0; right: 0;
  font-size: 0.95em;
  font-weight: 600;
  color: #fff;
  letter-spacing: 2px;
  opacity: 0.95;
}

.e-hackbook-bg-block {
  position: relative;
  background: #000;
  padding: 60px 0;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 44px;
  overflow: visible;
}

.e-hackbook-block {
  position: relative;
  z-index: 2;
  background: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  max-width: 900px;
  margin: 0 auto;
}
.e-hackbook-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.e-hackbook-block .book-cover { margin: 0; }
.e-hackbook-text { max-width: 420px; }
.e-hackbook-text h2 {
  font-size: 2.2em;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 18px;
  text-align: left;
}
.e-hackbook-text p {
  font-style: italic;
  text-align: left;
}

.e-hackbook-cta {
  text-align: center;
  margin-top: 26px;
}
.e-hackbook-cta .button {
  margin-top: 0;
}

/*Life hack cards 3*/
.life-hacks-cards-block {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: stretch;
  background: #000;
  padding: 48px 0;
  max-width: 1200px;
  margin: 0 auto 60px auto;
}
.lh-card {
  background: #181818;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 32px 22px;
  flex: 1 1 0;
  min-width: 240px;
  max-width: 340px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.lh-card h3 {
  width: 100%;
  text-align: left;
  font-size: 1.38em;
  font-weight: 600;
  margin-bottom: 22px;
  letter-spacing: 0.5px;
}
.lh-card ul {
  text-align: left;
  padding: 0;
  margin: 0 0 14px 0;
  font-size: 1em;
  font-weight: 300;
  list-style: none;
  width: 100%;
}
.lh-card li {
  margin-bottom: 12px;
  line-height: 1.5;
}
.lh-card strong {
  font-weight: 500;
  color: #fff;
}
.lh-note {
  font-size: 0.97em;
  color: #bbb;
  margin-top: 8px;
  font-style: italic;
  font-weight: 300;
  text-align: left;
  width: 100%;
}
.lh-card h4 {
  font-size: 1em;
  color: #fff;
  font-weight: 400;
  margin-top: 14px;
}
.hack-signature {
  text-align: center;
  color: #fff;
  background: #000;
  font-size: 1.08em;
  padding: 28px 0 18px 0;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}


/* ARCTIC STYLE PAGE*/
.arctic-hero-block {
  display: flex;
  align-items: flex-start; /* or center */
  justify-content: center;
  position: relative;
  height: 100vh;
}
.arctic-hero-text {
  position: static;
  margin-top: 21vh; /* shared title height */
  width: 100%;
  max-width: 700px;
  text-align: center;
  color: #fff;
  z-index: 3;
  padding: 0 24px;
}

/* NEUROMAGIC PAGE  STYLE*/
/* PATCH: Use flex for vertical placement instead of absolute */
.neuromagic-hero-block {
  display: flex;
  align-items: flex-start; /* or center */
  justify-content: center;
  position: relative;
  height: 100vh;
}
.neuromagic-hero-text {
  position: static;
  margin-top: 21vh; /* shared title height */
  width: 100%;
  max-width: 700px;
  text-align: center;
  color: #fff;
  z-index: 3;
  padding: 0 24px;
}
#neuromagic-video-block,
#neuromagic-video-block-home { /* 6. Bottom Video Block - Neuromagic Special */
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #000;
  box-shadow: none;
  border: none;
}
#neuromagic-video,
#neuromagic-video-home {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100vw;
  min-height: 100vh;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  filter: none;
  border: none;
  box-shadow: none;
  pointer-events: none; /* disables hover effect */
}



/* MEDIA PAGE STYLE */
.media-section {
  background: #000;
  color: #fff;
  min-height: 100vh;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.media-title-block {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 30px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  margin-top: 21vh;
  margin-bottom: 0px;
}

.media-title-block h1 {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 700;      /* 700 = bold/fat */
  font-size: 3em;        /* Adjust size as needed */
  letter-spacing: 2px;   /* Optional: space out letters */
  color: #fff;           /* Or any color you want */
  margin-bottom: 24px;   /* Space below heading */
}

.media-carousel-block {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0px 30px 12px 30px; /* tighter space below carousel */
  max-width: 800px;
  margin: 0 auto;
  margin-top: 0;
  margin-bottom: 28px;
  text-align: center;
}

/* Carousel container tweaks */
.gallery-container {
  perspective: 1200px;
  width: 100%;
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  margin: 0px auto;
}

/* Media Wheel carousel styling (adjust as needed) */
.wheel {
  position: relative;
  margin: 0 auto;
  width: 800px;
  height: 800px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.wheel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  height: 240px;
  transform-origin: center center -400px;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s;
  opacity: 0.7;
}

.wheel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  border: 2px solid #222;
}

.wheel-item.active {
  opacity: 1;
  box-shadow: 0 12px 40px rgba(255,102,102,0.25);
  border: none;
  z-index: 2;
}

/* Tablet: scale the media wheel so it never overflows the viewport */
@media (min-width: 769px) and (max-width: 1024px) {
  .gallery-container {
    height: clamp(520px, 72vw, 720px);
  }

  .wheel {
    width: clamp(520px, 72vw, 720px);
    height: clamp(520px, 72vw, 720px);
  }

  .wheel-item {
    width: clamp(240px, 36vw, 320px);
    height: auto;
    aspect-ratio: 10 / 7;
    transform-origin: center center calc(-1 * clamp(280px, 38vw, 400px));
  }
}

/* Media SLIDE Rowstyling (adjust as needed) */
.media-sliding-grid {
  overflow: hidden;
  width: 100vw;
  /* Keep full-bleed but avoid mobile "scroll into black" due to container padding */
  margin-left: calc(50% - 50vw);
  background: #000;
  margin: 85px auto 40px auto;
  padding: 0;

  /* Mobile/touch: prevent horizontal pan weirdness while rows animate */
  touch-action: pan-y;
}

.media-row {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: slide-row 30s linear infinite;
}

.media-row:nth-child(2) {
  animation-duration: 45s; /* Different speed for variety */
}

.media-row img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  background: none;

  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

@keyframes slide-row {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.media-bottom-block {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 100px 30px 40px 30px; /* Example: more space below bottom block */
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 0px;
  text-align: center;
}

.media-bottom-block h1 {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 500;      /* 700 = bold/fat */
  font-size: 2em;        /* Adjust size as needed */
  letter-spacing: 2px;   /* Optional: space out letters */
  color: #fff;           /* Or any color you want */
  margin-bottom: 24px;   /* Space below heading */
}





.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}


.modal-content {
  position: relative;
  max-width: min(92vw, 1200px);
  max-height: 92vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(255, 102, 102, 0.5);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  pointer-events: auto;
  color: #FFF;
  font-size: 2.2em;
  line-height: 1;
  width: 44px;
  height: 44px;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s;
}

.modal-close:hover {
  color: #FF6666;
  transform: rotate(90deg);
}

#media .content {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  padding: 30px;
}

#media .content h3 {
  font-weight: 700;
  font-size: 1.8em;
  margin-bottom: 25px;
  color: #FF6666;
}

#media .content p {
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 25px;
  font-size: 1.1em;
}

#media .content .quote {
  font-style: italic;
  color: #FF6666;
  margin: 30px 0;
  padding-left: 30px;
  border-left: 3px solid #FF6666;
  font-size: 1.2em;
}



/* FOOTER STYLE */

footer .footer-links a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

footer .footer-links a:hover {
  color: #FF6666;
  text-decoration: underline;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;      /* centers horizontally */
  justify-content: center;  /* centers vertically if you set a height */
  text-align: center;
  padding: 26px 18px;
  box-sizing: border-box;
}

footer .footer-links {
  display: flex;
  gap: 16px; /* tighter */
  justify-content: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

footer .footer-links a {
  margin: 0;
  display: inline-block;
  font-size: 0.95em;
}

@media (max-width: 480px) {
  footer {
    padding: 22px 16px;
  }
  footer .footer-links {
    gap: 12px;
  }
  footer .footer-links a {
    font-size: 0.88em;
  }
}

/* POLICY + ARWEAVE PAGES */
.policy-section,
.arweave-section {
  /* Keep headings clear of the fixed navbar even when it grows on mobile */
  padding-top: calc(var(--nav-offset, 120px) + 30px);
}

.policy-section h2,
.arweave-section h2 {
  text-align: center;
  margin: 0 auto 18px;
}

.policy-section .text-block-content h3 {
  margin: 22px 0 10px;
  font-weight: 700;
}

.policy-section .text-block-content p {
  margin: 0 0 12px;
  line-height: 1.6;
}

.policy-section .text-block-content ul {
  margin: 10px 0 14px;
  padding-left: 18px;
}

.policy-section .text-block-content li {
  margin: 8px 0;
  line-height: 1.55;
}

.arweave-section pre {
  margin: 14px 0 18px;
  padding: 12px 0 12px 18px;
  border-left: 3px solid #FF6666;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.95em;
  line-height: 1.5;
}

/* Arweave page: more breathing room between mini-sections */
.arweave-section .text-block-content h3 {
  margin: 30px 0 12px;
}

.arweave-section .text-block-content p {
  margin: 0 0 14px;
}

.arweave-section .text-block-content ul {
  margin: 10px 0 18px;
  padding-left: 18px;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }

  /* Hack: on mobile, show the Intro image only between sections (avoid duplicates) */
  #hack .hack-intro-image {
    display: none;
  }
  .policy-section,
  .arweave-section {
    padding-top: calc(var(--nav-offset, 120px) + 30px);
  }

  .policy-section .text-block-content h3 {
    margin-top: 18px;
  }
  .policy-section .text-block-content ul {
    padding-left: 16px;
  }
}



/*CONTACT PAGE STYLE*/
#contact .content {
  max-width: 1000px;         /* limits the width for better readability */
  margin: 100px 25px 25px 25px;           /* centers the block horizontally */
  padding: 30px 20px;       /* adds space on left/right and top/bottom */
  background: none;         /* optional, keeps background transparent */
  box-sizing: border-box;   /* ensures padding is included in width */
}

/* Contact page: compact, readable layout */
#contact.contact-section {
  padding-top: 150px;
}

/* Send recordings: match Contact top offset to clear fixed navbar */
#send-recordings.contact-section {
  padding-top: 150px;
}

#send-recordings h2 {
  text-align: center;
  margin: 0 auto 18px;
}

#send-recordings .send-media-context {
  color: #777;
  font-size: 0.9em;
  margin: 6px 0 16px;
}

#send-recordings .send-media-step3 {
  margin-bottom: 18px;
}

#send-recordings .send-media-permission {
  margin-top: 0;
}

#contact h2 {
  text-align: center;
  margin: 0 auto 18px;
}

#contact .text-block-content {
  max-width: 900px;
}

#contact .contact-lead {
  margin: 0 0 42px;
}

#contact .contact-spec {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 10px 0 38px;
}

#contact .contact-spec-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: start;
}

#contact .contact-label {
  font-weight: 700;
  color: #FF6666;
}

#contact .contact-value {
  color: #fff;
}

#contact .contact-callout {
  margin: 34px 0;
  padding: 12px 0 12px 18px;
  border-left: 3px solid #FF6666;
}

#contact .contact-subtitle {
  margin: 52px 0 12px;
}

#contact .contact-details p {
  margin: 0 0 10px;
  padding: 10px 0 10px 18px;
  border-left: 3px solid rgba(255, 102, 102, 0.6);
}

#contact .contact-details {
  margin-bottom: 186px;
}

#contact .contact-hint {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.9em;
  color: #777;
}

/* Phone reveal toggle */
#contact .contact-reveal {
  margin: 0 0 10px;
  padding: 10px 0 10px 18px;
  border-left: 3px solid rgba(255, 102, 102, 0.6);
}

#contact .contact-reveal summary {
  cursor: pointer;
  font-weight: 700;
  color: #fff;
}

#contact .contact-reveal summary:hover {
  color: #FF6666;
}

#contact .contact-reveal-body {
  margin-top: 10px;
}

#contact .contact-reveal-value {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Make everything below the contact details smaller + uniform */
#contact .contact-fineprint {
  margin-top: 26px;
  font-size: 0.9em;
  color: #ddd;
}

#contact .contact-fineprint .small-text {
  font-size: inherit;
  color: inherit;
}

#contact .contact-faq {
  margin-bottom: 28px;
}

#contact .contact-linklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#contact .contact-fineprint p {
  font-size: inherit;
}

#contact .contact-fineprint .quote {
  margin: 18px 0 10px;
}

/* Collapsible Q&A (no JS) */
#contact .contact-faq details {
  margin: 10px 0;
  padding: 10px 0 10px 18px;
  border-left: 3px solid rgba(255, 102, 102, 0.6);
}

#contact .contact-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: #fff;
}

#contact .contact-faq summary:hover {
  color: #FF6666;
}

#contact .contact-faq details p {
  margin: 10px 0 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  #contact.contact-section {
    padding-top: 112px;
  }

  #contact .contact-spec-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  #contact .contact-label {
    font-size: 0.95em;
  }
}



/* Responsive adjustments */
/* ========== TABLET LANDSCAPE (≤1024px) ========== */
@media (max-width: 1024px) {
  .home-hero-title { font-size: 3.2em; }
  .home-hero-subtitle { font-size: 1.3em; }
  .hero h1 {
    font-size: 3.8em;
  }

  .hero h2 {
    font-size: 1.5em;
  }
  
  .section-header h2 {
    font-size: 2.3em;
  }
}


/* ========== TABLET PORTRAIT (≤991px) ========== */
@media (max-width: 991px) {
  .text-block,
  .image-text-block {
    max-width: 98vw;
    padding: 20px 5vw;
  }
  .image-text-block img {
    max-width: 220px;
  }
  .image-button-block {
    max-width: 98vw;
    padding: 20px 5vw;
  }
  .image-button-block img {
    max-width: 90vw;
  }
  .work-sectors-title {
    font-size: 2em;
  }
  .work-sector-btn {
    min-width: 140px;
    font-size: 1em;
  }
  .work-sectors-row {
    gap: 12px;
  }
 .photo-grid {
    max-width: 98vw;
    padding: 20px 5vw;
  }
  .photo-row {
    flex-wrap: wrap;
  }
  .photo-row img {
    width: 70px;
    height: 45px;
  }
  .collapsible-header {
    width: 98vw;
    padding: 18px 5vw;
    font-size: 1.1em;
  }
  .collapsible-block:not(.collapsed) .collapsible-header {
    width: 98vw;
  }
  .collapsible-content {
    padding: 18px 5vw;
  }
  #Mediasub .media-image-btn {
    top: 35%;
  }

  /* Aboutsub */
  .about-overlay-content {
    width: 70%;
    padding-left: 10px;
  }
  .about-overlay-img {
    width: 100%;
    margin-right: 0;
  }
  .neuromagic-overlay-content {
    width: 70%;
    padding-right: 10px;
  }
  .neuromagic-overlay-img {
    width: 100%;
  }

  /*ABOUT PAGESTYLES */
  .about-hero {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 24px 0;
    height: auto;
    min-height: 0;
  }
  .about-hero-text {
    position: relative;
    top: auto;
    left: auto;
    width: 90vw;
    max-width: 98vw;
    padding: 0 5vw;
  }
  .about-hero-img {
    width: 90vw;
    max-width: 520px;
    height: auto;
    max-height: 60vh;
  }
  .about-title {
    font-size: clamp(1.45em, 6vw, 1.7em);
  }
 
  .futevolei-hero-block {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 8px;
    gap: 18px;
  }
  .futevolei-hero-img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-bottom: 12px;
  }
  .futevolei-title {
    font-size: 2em;
  }

  .about-hero,
  .about-black-block,
  .timeline-block,
  .passion-block {
    max-width: 98vw;
    padding: 20px 5vw;
  }
  .passion-gallery {
    gap: 18px;
  }
  .passion-item {
    width: 120px;
  }
  .passion-item img {
    width: 100px;
    height: 75px;
  }
  .life-hacks-cards-block {
    flex-direction: column;
    gap: 18px;
    padding: 22px 0;
  }
  .lh-card {
    max-width: 100%;
    margin: 0 auto;
  }

  /* Neuromagic Page Styles */
  #neuromagic-video-block,
  #neuromagic-video-block-home {
    max-width: 98vw;
    padding: 20px 5vw;
  }
  #neuromagic-video,
  #neuromagic-video-home {
    min-width: 100vw;
    min-height: 60vh;
  }
}


/* ========== MOBILE LARGE (≤768px) ========== */
@media (max-width: 768px) {
  .home-hero-block { height: 60vh; }
  .home-hero-title { font-size: 2em; }
  .home-hero-subtitle { font-size: 1em; }

  /* Mobile: ensure hero videos fit shorter hero containers (e.g., 60vh) */
  .hero-video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: none;
  }

  /* Mobile: add more black space between Work Sectors tags and Decentralized */
  #centralized-decentralized {
    margin-top: 52px;
  }

  /* Mobile-only: nudge Media button down a bit (desktop unchanged) */
  #Mediasub .media-image-btn {
    top: 50%;
    /* Move up by 20% of the button's own height */
    transform: translate(-50%, -50%) translateY(-24%);
  }

  /* Keep the mobile header layout stable and allow the Nostr pill to be taller.
     Note: this block appears later in the file than the hamburger/navbar rules,
     so it must NOT reintroduce a height cap or wrap behavior. */
  #mobile-top-block .navbar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    min-height: 92px;
    height: auto;
    padding: 6px 20px;
    flex-wrap: nowrap;
  }
  
  /* Only style the direct logo link here; avoid overriding dropdown links */
  #mobile-top-block .navbar > a {
    font-size: 0.95em;
    margin: 0 10px;
    padding: 6px 3px;
  }
  
  .hamburger {
    display: block;
  }
  
  .section {
    padding: 100px 20px 30px;
  }

  /* Mobile: keep Policy/Arweave headings clear of the fixed navbar.
     This must override the generic `.section { padding: ... }` above. */
  .section.policy-section,
  .section.arweave-section {
    padding-top: calc(var(--nav-offset, 120px) + 30px);
  }
  
  .hero {
    padding-top: 0;
  }
  
  .hero h1 {
    font-size: 3em;
  }
  
  .hero h2 {
    font-size: 1.3em;
    margin-bottom: 50px;
  }

  .hero-block {
    height: 60vh;
  }
  .hero-text h1 {
    font-size: 2.8em;
  }
  .hero-text h2 {
    font-size: 1.7em;
  }
  .hero-text h3 {
    font-size: 1.2em;
    margin-bottom: 24px;
  }
  
  
  .section-header h2 {
    font-size: 2em;
  }

  .home-hero-block { 
    height: 60vh; 
  }

  .home-hero-title { 
    font-size: 2em; 
  }

  .home-hero-subtitle { 
    font-size: 1em;
  }

  .experience-title {
    font-size: 1.6em;
    margin-bottom: 18px;
  }
  .experience-content {
    padding: 0 8px;
  }

  .experience-content p,
  .experience-content li {
    font-size: 0.95em;
    font-weight: 300;
    line-height: 1.55;
  }

  .experience-list {
    font-size: 0.95em;
    font-weight: 300;
    line-height: 1.55;
  }
  
  /* Media wheel (mobile): keep the same design, just bigger and centered */
  .gallery-container {
    height: min(420px, 92vw);
  }

  .wheel {
    width: min(420px, 92vw);
    height: min(420px, 92vw);
    margin: 0 auto;
  }

  /* ~2.5x of the old 100x70 sizing */
  .wheel-item {
    width: min(250px, 86vw);
    height: auto;
    aspect-ratio: 10 / 7;
    transform-origin: center center -300px;
  }

  .work-sectors-title {
    font-size: 1.3em;
    margin-bottom: 18px;
  }
  .work-sectors-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 12px;
  }
  .work-sectors-row {
    display: contents;
  }
  .work-sector-btn {
    min-width: 0;
    width: 100%;
    font-size: clamp(0.66em, 3.3vw, 0.78em);
    padding: 10px 8px;
    box-sizing: border-box;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
  }
  .work-sectors-tags {
    margin-top: 18px;
  }
  .work-sectors-tags strong {
    font-size: 0.95em;
    font-weight: 400;
  }
  .testimonial__content-wrapper {
    padding: 0 8px;
  }
  .testimonial__h2 {
    font-size: 1.3em;
  }

  /* Mobile: testimonial text size (match overall mobile typographic scale) */
  .testimonial__slide p {
    font-size: 0.92em;
    line-height: 1.45;
  }

  /* Mobile: teaser overlay typography (About + Neuromagic) */
  .about-overlay-title,
  .neuromagic-overlay-title {
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .about-overlay-desc,
  .neuromagic-overlay-desc {
    font-size: 0.92em;
    font-weight: 300;
    line-height: 1.4;
    margin: 0;
  }

  /* Mobile: reduce black space between Experience and About */
  .spacer-experience-about {
    height: 40px;
  }

  /* Mobile: reduce black space around About + Neuromagic teaser blocks */
  .about-overlay-block.section,
  .neuromagic-overlay-block.section {
    padding: 0;
  }
  .neuromagic-overlay-block.section {
    margin-top: 88px;
  }

  /* Mobile: place About teaser text slightly lower */
  .about-overlay-text {
    transform: translateY(8px);
  }

  /* Mobile: move Neuromagic teaser text slightly to the right */
  /* Mobile: keep consistent edge padding and constrain text width */
  .about-overlay-content {
    padding-left: 16px;
  }
  .neuromagic-overlay-content {
    padding-right: 16px;
  }
  .about-overlay-text,
  .neuromagic-overlay-text {
    width: min(16ch, 70vw);
    max-width: 16ch;
  }
  .neuromagic-overlay-text {
    transform: none;
  }

  /* Mobile: make teaser "Read More..." buttons ~50% smaller */
  .about-overlay-btn,
  .neuromagic-overlay-btn {
    font-size: 0.525em;
    padding: 6px 14px;
    border-width: 1px;
    margin-top: 4px;
  }

  /* Mobile: reduce black space between Neuromagic teaser and Digital Fingerprint */
  .spacer-neuromagic-fingerprint {
    height: 40px;
  }

  /* Mobile: remove dark filter on Neuromagic teaser image */
  .neuromagic-overlay-img {
    filter: none;
  }

  /* Mobile: Jack Of All Trades (FYI) block typography */
  .jackofall-block {
    padding: 24px 0;
  }
  .jackofall-title {
    font-size: 1.4em;
    margin: 0 0 10px;
  }
  .jackofall-list {
    font-size: 0.95em;
    line-height: 1.5;
  }

  /* Mobile: reduce the big gap above photo grid */
  .photo-grid {
    margin: 24px auto 0;
    padding: 0 12px;
    gap: 12px;
  }
  .photo-row {
    gap: 12px;
  }

  /* Mobile: remove extra black space around the HOME neuromagic video */
  .spacer-neuromagic-video-top,
  .spacer-neuromagic-video-bottom {
    height: 0;
  }

  /* Mobile-only: move the Hack button up by 20% of its own height */
  #centralized-decentralized .button {
    transform: translateX(-50%) translateY(-40%);
  }
  .passion-gallery {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  /* ABOUT page: prevent horizontal overflow and tighten typography for 425/375/320 */
  #about.about-section {
    padding: 112px 0 30px;
  }

  #about .about-hero {
    width: 100%;
    max-width: 98vw;
    padding: 18px 0 10px;
  }

  #about .about-hero-text {
    width: min(92vw, 680px);
    padding: 0 5vw;
    text-shadow: 0 2px 10px #000;
  }

  #about .about-quotes .quote {
    font-size: 1.02em;
    line-height: 1.25;
  }

  #about .about-main-text {
    font-size: 0.95em;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  #about .about-highlight {
    font-size: 0.82em;
    line-height: 1.45;
  }

  /* Passion: keep items readable (not tiny thumbnails) */
  #about .passion-item {
    width: min(340px, 90vw);
    max-width: none;
  }

  #about .passion-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* Timeline copy: reduce density on small screens */
  #about .text-block-timeline-content {
    font-size: 0.98em;
    line-height: 1.6;
  }

  /* HACK page: mobile hero + E-Hackbook stacking */
  #hack .hack-hero-block {
    height: 60vh;
    align-items: flex-start;
  }
  #hack .hack-hero-text {
    margin-top: 8vh;
    padding: 0 18px;
  }
  #hack .hack-hero-text h2 {
    font-size: 2em;
    letter-spacing: 1px;
  }
  #hack .hack-hero-subtitle {
    font-size: 1em;
  }

  /* HACK: match Home-ish mobile body sizing */
  #hack .text-block-content p,
  #hack .text-block-content li,
  #hack .image-text-block .text p,
  #hack .image-text-block .text li {
    font-size: 0.95em;
    font-weight: 300;
    line-height: 1.55;
  }

  #hack .e-hackbook-bg-block {
    padding: 40px 0 54px;
  }

  #hack .hack-between-image {
    margin-top: 22px;
    margin-bottom: 10px;
  }
  #hack .e-hackbook-block {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 0 12px;
  }
  #hack .e-hackbook-left {
    width: 100%;
    align-items: center;
  }
  #hack .e-hackbook-text {
    max-width: 100%;
  }
  #hack .e-hackbook-text h2 {
    font-size: 1.7em;
    margin-bottom: 12px;
  }
  #hack .e-hackbook-text p {
    font-size: 0.98em;
    line-height: 1.55;
  }

  #hack .e-hackbook-left .e-hackbook-cta {
    padding: 0;
    margin-top: 22px;
  }

  /* Hack signature: match Work Sectors tag size on mobile */
  #hack .hack-signature strong {
    font-size: 0.95em;
    font-weight: 400;
  }

  /* ARCTIC + NEUROMAGIC: mobile hero alignment */
  #arctic .arctic-hero-block,
  #neuromagic .neuromagic-hero-block {
    height: 60vh;
    align-items: flex-start;
  }
  #arctic .arctic-hero-text,
  #neuromagic .neuromagic-hero-text {
    margin-top: 8vh;
  }
  #arctic .arctic-hero-text h2 {
    font-size: 2em;
    letter-spacing: 1px;
  }
  #neuromagic .neuromagic-hero-text h2 {
    font-size: 2em;
    letter-spacing: 1px;
  }
  #arctic .arctic-hero-subtitle,
  #neuromagic .neuromagic-hero-subtitle {
    font-size: 1em;
  }

  /* ARCTIC + NEUROMAGIC: match Home-ish mobile body sizing */
  #arctic .text-block-content p,
  #arctic .text-block-content li,
  #arctic .image-text-block .text p,
  #arctic .image-text-block .text li,
  #neuromagic .text-block-content p,
  #neuromagic .text-block-content li,
  #neuromagic .image-text-block .text p,
  #neuromagic .image-text-block .text li {
    font-size: 0.95em;
    font-weight: 300;
    line-height: 1.55;
  }

  /* Arctic: mobile photo grid symmetry without duplicating images
     Show first 8 images per row (4x2), hide the remainder. */
  #arctic .photo-grid .photo-row img:nth-child(n + 9) {
    display: none;
  }

  /* Arctic: put key images above their titles on mobile */
  #arctic .arctic-summer-image,
  #arctic .arctic-campfire-image {
    order: -1;
  }

  /* Arctic: make the key images slightly narrower on mobile (≈5% padding each side) */
  #arctic .arctic-summer-image,
  #arctic .arctic-campfire-image {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* Neuromagic: put the right-block images above their titles on mobile */
  #neuromagic .image-text-block.right img {
    order: -1;
  }
  #neuromagic .image-text-block.right .text {
    order: 0;
  }

  /* ARCTIC + NEUROMAGIC: stack alternating blocks (don’t affect Home/About) */
  #hack .image-text-block,
  #arctic .image-text-block,
  #neuromagic .image-text-block {
    flex-direction: column;
    gap: 18px;
  }
  #hack .image-text-block img,
  #arctic .image-text-block img,
  #neuromagic .image-text-block img {
    max-width: 100%;
  }
  #hack .image-text-block .text,
  #arctic .image-text-block .text,
  #neuromagic .image-text-block .text {
    padding: 0;
    width: 100%;
  }

  /* Neuromagic: keep bottom video block from being over-tall on mobile */
  #neuromagic-video-block,
  #neuromagic-video-block-home {
    height: 60vh;
  }
  #neuromagic-video,
  #neuromagic-video-home {
    min-height: 60vh;
  }

  /* MEDIA: add top padding to clear fixed navbar */
  #media.media-section {
    padding-top: 112px;
  }
  #media .media-title-block {
    margin-top: 0;
    padding: 0 20px;
  }
  #media .media-title-block h1 {
    font-size: 2em;
    margin-bottom: 16px;
  }
  #media .media-title-block p {
    font-size: 1em;
  }
  #media .media-carousel-block {
    padding: 0 20px 30px;
    margin-bottom: 160px;
  }

  /* MEDIA: match Home-ish mobile body sizing */
  #media .media-bottom-block h1 {
    font-size: 1.6em;
  }
  #media .media-bottom-block p {
    font-size: 0.95em;
    font-weight: 300;
    line-height: 1.55;
  }
}


/* ========== MOBILE SMALL (≤480px) ========== */
@media (max-width: 480px) {
  .logo {
    left: 15px;
    top: 10px;
    width: 36px;
    height: 36px;
  }
  
  .navbar a {
    font-size: 0.85em;
    margin: 0 8px;
  }
  
  .section {
    padding: 90px 15px 25px;
  }

  /* Mobile (small): prevent big black gaps around teaser image sections */
  .about-overlay-block.section,
  .neuromagic-overlay-block.section {
    padding: 0;
  }
  .neuromagic-overlay-block.section {
    margin-top: 88px;
  }
  
  #hero {
    padding-top: 0;
  }
  
  #hero h1 {
    font-size: 2.4em;
  }
  
  #hero h2 {
    font-size: 1.1em;
  }

  .hero-block {
    height: 40vh;
  }
  .hero-text h1 {
    font-size: 1.8em;
  }
  .hero-text h2 {
    font-size: 1.1em;
  }
  .hero-text h3 {
    font-size: 1em;
  }

  
  .section-header h2 {
    font-size: 1.8em;
  }
  
  .section-content {
    padding: 20px 15px;
    font-size: 1em;
  }

  /* About page: 375/425 tuning */
  #about.about-section {
    padding-top: 104px;
  }

  /* About page: bottom "3 buttons" (collapsible headers) inset from edges */
  #about .collapsible-block {
    width: calc(100% - 28px);
    margin-left: 14px;
    margin-right: 14px;
  }
  #about .collapsible-header,
  #about .collapsible-block:not(.collapsed) .collapsible-header {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    gap: 16px;
  }
  #about .collapsible-header h2 {
    font-size: 1.15em;
    line-height: 1.15;
  }
  #about .collapse-arrow {
    font-size: 1.6em;
  }
  #about .about-title {
    font-size: 1.5em;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  #about .about-quotes .quote {
    font-size: 0.98em;
  }
  #about .about-main-text {
    font-size: 0.92em;
  }

  /* About page: Experience carousel spacing (keeps Home carousel unchanged) */
  #experience-about .testimonial-logo {
    margin-bottom: 18px;
  }
  #experience-about .testimonial__h2 {
    margin: 0 0 14px;
    font-size: 1.25em;
  }
  #experience-about .testimonial__carousel {
    margin-bottom: 18px;
  }
  #experience-about .testimonial__dots {
    margin-top: 14px;
    margin-bottom: 14px;
  }
  #experience-about .testimonial__content-wrapper {
    padding: 0 12px;
  }
  #experience-about .testimonial__slide p {
    font-size: 0.9em;
    line-height: 1.5;
  }

  /* HACK page: smaller book cover + tighter cards */
  #hack .book-cover {
    width: 220px;
    height: 300px;
    border-radius: 16px;
  }
  #hack .book-matrix-canvas {
    border-radius: 16px;
  }
  #hack .book-content {
    padding: 26px 12px 16px;
  }
  #hack .book-title {
    font-size: 1.35em;
  }
  #hack .book-author {
    font-size: 0.98em;
  }
  #hack .book-subtitle {
    font-size: 0.78em;
  }
  #hack .book-tagline {
    font-size: 0.84em;
  }
  #hack .book-ai {
    font-size: 0.7em;
  }
  #hack .book-workbook {
    font-size: 0.9em;
  }

  #hack .lh-card {
    padding: 22px 16px;
  }
  #hack .lh-card h3 {
    font-size: 1.25em;
    margin-bottom: 16px;
  }

  /* ARCTIC + NEUROMAGIC: slightly shorter heroes on small phones */
  #arctic .arctic-hero-block,
  #neuromagic .neuromagic-hero-block {
    height: 52vh;
  }

  /* Neuromagic: bottom video block shorter on small phones */
  #neuromagic-video-block,
  #neuromagic-video-block-home {
    height: 52vh;
  }

  /* MEDIA: tighten vertical space */
  #media .media-carousel-block {
    margin-bottom: 120px;
  }
  
  .wheel {
    width: 280px;
    height: 280px;
  }
  
  .modal-close {
    top: 20px;
    right: 20px;
    font-size: 2em;
  }
}

/* ========== MOBILE XS (≤360px) ========== */
@media (max-width: 360px) {
  /* 320px tuning: make overlay text columns tighter */
  .about-overlay-text {
    width: min(12ch, 70vw);
    max-width: 12ch;
  }

  .neuromagic-overlay-content {
    padding-right: 10px;
  }

  .neuromagic-overlay-text {
    width: min(15ch, 70vw);
    max-width: 15ch;
  }

  /* Footer copyright: smaller + inset from edges */
  footer {
    padding: 18px 0;
  }
  footer .small-text {
    font-size: 0.7em;
    padding: 0 14px;
    line-height: 1.35;
  }

  /* About page: 320px tuning */
  #about .about-title {
    font-size: 1.38em;
  }
  #about .about-hero-text {
    padding: 0 16px;
  }
  #about .about-quotes .quote {
    font-size: 0.94em;
  }

  /* About page: Experience carousel 320px */
  #experience-about .testimonial__h2 {
    font-size: 1.15em;
  }

  /* HACK page: ultra-small scaling */
  #hack .hack-hero-block {
    height: 52vh;
  }
  #hack .hack-hero-text {
    margin-top: 7vh;
  }
  #hack .hack-hero-text h2 {
    font-size: 1.38em;
  }
  #hack .book-cover {
    width: 200px;
    height: 280px;
  }
  #hack .book-title {
    font-size: 1.25em;
    margin-bottom: 6px;
  }
  #hack .book-author {
    font-size: 0.92em;
    margin-bottom: 8px;
  }
  #hack .book-subtitle {
    font-size: 0.72em;
    line-height: 1.2;
  }
  #hack .book-tagline {
    font-size: 0.78em;
    margin-top: 10px;
    margin-bottom: 6px;
  }
  #hack .book-ai {
    font-size: 0.66em;
  }
  #hack .book-workbook {
    font-size: 0.82em;
    bottom: 14px;
    letter-spacing: 1.6px;
  }
  #hack .book-content {
    padding: 22px 10px 14px;
  }
  #hack .e-hackbook-text p {
    font-size: 0.94em;
  }

  /* ARCTIC + NEUROMAGIC: ultra-small scaling */
  #arctic .arctic-hero-block,
  #neuromagic .neuromagic-hero-block {
    height: 48vh;
  }

  #arctic .arctic-hero-text,
  #neuromagic .neuromagic-hero-text {
    margin-top: 7vh;
  }

  #arctic .arctic-hero-text h2 {
    font-size: 1.38em;
  }

  #neuromagic-video-block,
  #neuromagic-video-block-home {
    height: 48vh;
  }

  #media .media-title-block h1 {
    font-size: 1.9em;
  }
  #media .media-carousel-block {
    margin-bottom: 96px;
  }
}