/* ==========================================================================
   RESPONSIVE LAYER — loaded last so it overrides desktop rules.

   Strategy:
   - Breakpoints: ≤1024 (tablet portrait), ≤768 (phone), ≤480 (small phone).
   - Heavy effects (cube canvas, GSAP, marquee clip) are kept where they still
     read well; only sizes/positions are adapted. The horizontal cards/wheel
     pin is collapsed to a static stacked block on mobile (cards section is
     being redesigned anyway, so we just neutralize the pin and clip).
   - Cursor square is hidden on coarse pointers (touch); heavy listeners get
     gated in JS via matchMedia('(pointer: coarse)').
   ========================================================================== */

/* Allow native browser scrolling on mobile (Lenis still applies on desktop).
   `overflow-x: clip` stays on body to kill horizontal bleed from marquees. */
@media (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; }
  /* Cursor square is desktop-only */
  #cursorSquare { display: none !important; }
}

/* ==========================================================================
   DESKTOP MID (1200–1500px) — hero description column narrower
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1500px) {
  .hero-bottom-right { max-width: 320px; }
}

/* ==========================================================================
   TABLET (≤1024px) — moderate adaptation
   ========================================================================== */
@media (max-width: 1024px) {
  /* Header switches to the hamburger menu: hide the inline hero nav + CTA, leave just the
     logo, and force the fixed hamburger visible (it otherwise only appears on scroll via JS). */
  .hero-top { gap: 20px; grid-template-columns: 1fr auto; }
  .hero-top-logo-img { height: 76px; }
  .hero-top-nav { display: none; }
  .hero-top-cta { display: none; }
  .hamburger-fixed {
    opacity: 1 !important;
    pointer-events: all !important;
  }
  .hamburger-fixed span { background: var(--white); }

  /* HOME ONLY: the hamburger lives IN the header (scrolls with the page) instead of being a
     fixed element that floats / pops in on scroll. position:absolute (vs fixed) keeps it at
     the top-right of the header and scrolls it away with the hero. Scoped to .home so the
     other pages (#mainNav.au-nav, fixed header) keep their own behaviour. */
  .home .hamburger-fixed {
    position: absolute;
    top: 42px;
    right: 20px;
  }

  /* HOME ONLY: clicking the hamburger opens a compact DROPDOWN of pages anchored under it,
     instead of the full-screen overlay. It's absolute (scrolls with the header) and sits
     above the cube canvas / sections via a high z-index. */
  .home .menu-overlay {
    position: absolute;
    top: 84px;
    right: 20px;
    left: auto;
    bottom: auto;
    width: max-content;
    min-width: 220px;
    height: auto;
    background: rgba(10, 10, 10, 0.96);
    padding: 22px 26px;
    gap: 16px;
    align-items: flex-start;
    border-radius: 4px;
    z-index: 100050;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .home .menu-overlay.open { transform: translateY(0); }
  .home .menu-overlay a { font-size: 16px; letter-spacing: 2px; }

  /* About: stack the columns vertically and left-align them — .about-title on top, then the
     body column below it (single-column grid, both columns justified to the start). */
  .about-content { gap: 36px; grid-template-columns: 1fr; }
  .about-col-left { align-self: start; justify-self: start; }
  .about-col-right {
    align-self: start;
    justify-self: start;
    max-width: 100%;
    top: 0;
    margin-top: 45vh; /* leaves room for the cube to sit between the title and the body */
  }

  /* Lift the hero-bottom above the fixed cube canvas (z 100002) so the cube passes
     BEHIND it as the page scrolls. Possible because the bar lives in the root stacking
     context (sibling of #cubeHeroContent) — see index.html / cube-hero.css.
     Also stack its columns vertically with the order reversed (right column — description +
     contact info — on top, the email link below). */
  .hero-bottom {
    z-index: 100006;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
  }
  .hero-bottom-right { max-width: 100%; }

  /* WWD list: reduce title size */
  .wwd-title { font-size: 56px; }
  .wwd-item-title { font-size: 44px; }
  .wwd-item-desc { font-size: 18px; }
  .wwd-item { grid-template-columns: 50px 1fr 1fr; gap: 20px; padding: 36px 0; }

  /* Approach intro */
  .approach-slide { padding: 0 6vw; }

  /* Footer logo lockup: keep the whole "favicon + KASTELO" lockup fully inside the viewport
     at any width (it's clipped by .pre-footer-dark's overflow:hidden if it overflows). Size
     the favicon, gap and text fluidly (vw + clamp) and conservatively so favicon_w + gap +
     text(~5.2em for KASTELO) + 2×padding always fits within 100vw, down to the smallest phones.
     >1024px keeps the base (larger) sizing, which already fits. */
  .footer-logo-lockup { gap: clamp(12px, 2vw, 24px); }
  .footer-favicon {
    width: clamp(44px, 9vw, 110px);
    height: clamp(58px, 11.8vw, 145px);
    gap: clamp(3px, 0.5vw, 6px);
  }
  .footer-logo-text { font-size: clamp(26px, 12vw, 180px); }
}

/* ==========================================================================
   LANDSCAPE TABLETS / SMALL LAPTOPS (1025–1366px) — pair with the reduced cube
   factor in cube-hero.js: nudge the hero-bottom lower so it clears the cube.
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1366px) {
  .hero-bottom { bottom: 2.5%; }
}

/* ==========================================================================
   MOBILE (≤768px) — collapse to single column + simplified effects
   ========================================================================== */
@media (max-width: 768px) {

  /* ────────── HERO (cube + bars + marquees) ────────── */

  /* The Three.js cube canvas is fixed-positioned globally. On mobile we keep
     it but rely on cube-hero.js to lower its DPR/scale (see js patch). */

  /* Top bar: hide inline nav + CTA, show hamburger instead */
  .hero-top {
    grid-template-columns: 1fr auto;
    gap: 16px;
    top: 20px;
    left: 20px;
    right: 20px;
  }
  .hero-top-logo-img { height: 80px; }
  .hero-top-nav { display: none; }
  .hero-top-cta { display: none; }

  /* Hamburger always visible on mobile (overrides JS opacity gate) */
  .hamburger-fixed {
    opacity: 1 !important;
    pointer-events: all !important;
    top: 22px;
    right: 20px;
    width: 28px;
    height: 22px;
  }
  .hamburger-fixed span { background: var(--white); }

  /* Marquee text: shrink so it remains readable but still big */
  .hero-marquee-track span {
    font-size: clamp(40px, 18vw, 90px);
  }
  /* Centre the marquee on the cube. --cube-center-y is the cube's real on-screen centre,
     published by cube-hero.js (the fixed canvas is shorter than 100vh on mobile because of
     the browser toolbars, so a plain top:50% would land below the cube). translateY(-50%)
     from the base rule still vertically centres the marquee box on that point. */
  .hero-marquee { top: var(--cube-center-y, 50%); }

  /* Bottom bar: stack columns vertically and sit it directly below the cube
     (cube is centred at 50%, so its bottom edge ≈ 50% + half the resting cube size,
     published by cube-hero.js as --cube-rest-px). The 56vw fallback matches the phone
     factor (0.56 × min edge ≈ 0.56 × vw) before the JS variable is set. */
  .hero-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 24px;
    top: calc(var(--cube-center-y, 50%) + var(--cube-rest-px, 56vw) / 2 + 72px);
    bottom: auto;
    left: 20px;
    right: 20px;
  }
  .hero-bottom-right { max-width: 100%; gap: 22px; }
  .hero-bottom-desc { font-size: 18px; line-height: 1.55; }
  .hero-bottom-info { gap: 16px; flex-wrap: wrap; }
  .hero-bottom-info span { font-size: 11px; letter-spacing: 1px; }
  .hero-bottom-left a { font-size: 11px; letter-spacing: 1.2px; }

  /* ────────── LOADER ────────── */
  .loader-grid {
    grid-template-columns: repeat(3, 24px);
    grid-template-rows: repeat(4, 24px);
    gap: 3px;
  }
  .loader-block { width: 24px; height: 24px; }
  .loader-content { gap: 36px; }

  /* ────────── ABOUT ────────── */
  .about-section {
    padding: 14vh 20px 50vh 20px;
  }
  .about-content {
    grid-template-columns: 1fr;
    gap: 36px;
    min-height: auto;
  }
  .about-col-right {
    align-self: start;
    justify-self: start;
    max-width: 100%;
    top: 0; /* cancel desktop's top:20vh; mobile offsets via margin-top instead */
    margin-top: 60vh; /* leaves room for the cube to sit between title and body */
  }
  .about-title { font-size: clamp(32px, 9vw, 56px); }
  .about-subtitle { font-size: 22px; }
  .about-desc { font-size: 18px; margin-bottom: 28px; }
  .about-btn { padding: 12px 24px; font-size: 12px; letter-spacing: 1.2px; }

  /* ────────── WHAT WE DO (services list) ────────── */
  .wwd-section { padding: 0 20px; }
  .wwd-header { max-width: 100%; margin-bottom: 60px; padding-top: 80px; }
  .wwd-label { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 18px; }
  .wwd-title { font-size: clamp(34px, 8vw, 48px); line-height: 1.1; }
  .wwd-title br { display: none; }

  .wwd-list { padding-bottom: 60px; }
  .wwd-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0;
  }
  .wwd-num { font-size: 14px; letter-spacing: 1.5px; }
  .wwd-item-title { font-size: clamp(26px, 7vw, 36px); }
  .wwd-item-desc {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.55;
    max-width: 100%;
  }
  .wwd-item { opacity: 1 !important; } /* always-on visibility on mobile */

  /* ────────── DIFFERENTIALS (already stacks at 1024) ────────── */
  #differentials { padding: 80px 20px 100px; }
  .diff-header { margin-bottom: 48px; }
  .diff-item.large {
    padding: 48px 28px;
    min-height: 320px;
  }
  .diff-item.large .diff-item-num { font-size: 120px; top: 12px; right: 16px; }
  .diff-item.large .diff-item-title { font-size: 26px; }
  .diff-item.large .diff-item-text { font-size: 14px; }
  .diff-item.small, .diff-item.accent-item {
    padding: 28px 22px;
    min-height: 200px;
  }
  .diff-bottom-row { gap: 14px; }
  .diff-wide { padding: 28px 22px; gap: 18px; }

  /* ────────── SUSTAINABILITY ────────── */
  #sustainability { padding: 80px 20px; }
  .sust-header { margin-bottom: 48px; }
  .sust-pillar { padding: 36px 24px; }
  .sust-pillar-title { font-size: 20px; }
  .sust-marquee { margin-top: 48px; }
  .sust-marquee-item { font-size: 13px; gap: 10px; }
  .sust-marquee-track { gap: 32px; }

  /* ────────── VIDEO VERTICAL ────────── */
  /* (de-pin lives in the combined coarse-pointer block below so it also covers touch tablets) */
  .wwd-video {
    width: min(94vw, 1700px);
    border-radius: 4px;
  }

  /* ────────── APPROACH HORIZONTAL → VERTICAL STACK on mobile ──────────
     The cards section is being redesigned. Here we just neutralize the
     scroll-pinned horizontal track so the page flows naturally.            */
  .sa-slide-wrapper--first {
    height: auto !important;
  }
  .sa-slide-wrapper--first .sa-slide-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .sa-slide-wrapper--first .sa-slide-track {
    width: 100% !important;
    transform: none !important;
    flex-direction: column;
  }
  .sa-slide-wrapper--first .approach-slide {
    width: 100% !important;
    height: auto !important;
    padding: 80px 20px;
  }
  .sa-slide-wrapper--first .approach-slide-title {
    font-size: clamp(34px, 9vw, 56px);
    max-width: 100%;
    margin-bottom: 24px;
  }
  .sa-slide-wrapper--first .approach-slide-desc {
    font-size: clamp(16px, 4.5vw, 20px);
    max-width: 100%;
  }
  /* Hide the cards peek/cascade entirely on mobile (section being redesigned) */
  .sa-slide-wrapper--first .cards-s1-peek {
    display: none !important;
  }
  /* Hide the second wrapper if present (legacy) */
  .sa-slide-wrapper--second {
    display: none !important;
  }
  .wwd-bottom-text { display: none !important; }

  /* ────────── PRE-FOOTER ────────── */
  .pre-footer {
    padding: 8vh 20px;
    min-height: 70vh;
  }
  .pre-footer h2 {
    font-size: clamp(36px, 10vw, 58px);
    margin-bottom: 32px;
  }
  .pre-footer-btn { padding: 14px 28px; font-size: 12px; letter-spacing: 1.2px; }

  /* Orange square: the base clamp floor of 440px is wider than a phone viewport, so it filled
     the screen instead of scaling. Drop the floor here and let it stay a proportional centred
     square (vmin-based) so the text overlaps/extends past it like on desktop (print 2). */
  .au-prefooter-shatter {
    width: clamp(300px, 78vmin, 480px);
    height: clamp(300px, 78vmin, 480px);
  }

  /* Pre-footer banner */
  .pre-footer-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 20px;
    gap: 28px;
  }
  .pre-footer-banner h2 { font-size: clamp(28px, 8vw, 44px); }
  .pre-footer-cta { padding: 14px 26px; font-size: 12px; letter-spacing: 1.2px; }

  /* Footer logo lockup — layout only; favicon/text sizing is the fluid rule in the ≤1024
     block above (which also covers ≤768/≤480), so the lockup always fits the viewport. */
  .footer-logo-lockup {
    padding: 40px 20px 32px;
    align-items: flex-end;
  }

  /* ────────── FOOTER ────────── */
  .site-footer { padding: 60px 20px 0; }
  .footer-body {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 40px;
  }
  .site-footer h3 { font-size: 16px; margin-bottom: 16px; }
  .info-site-footer, .footer-col a { font-size: 14px; line-height: 1.6; }
  .footer-email-input { font-size: 12px; padding: 10px 14px; }
  .footer-email-submit { padding: 10px 18px; font-size: 10px; }
  .footer-bottom { padding: 20px 0 0; }
  .footer-bottom-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-bottom-links {
    gap: 18px;
    flex-wrap: wrap;
  }
  .footer-bottom-links a { font-size: 10px; letter-spacing: 1.2px; }
  .footer-copyright { font-size: 11px; padding-bottom: 20px; }

  /* Menu overlay items: tighter spacing on small viewports */
  .menu-overlay { gap: 22px; }
  .menu-overlay a { font-size: 22px; letter-spacing: 4px; }
}

/* ==========================================================================
   VIDEO VERTICAL — de-pin on every device that SKIPS the block-mask staircase.
   The staircase only runs when !_isMobile, where _isMobile = (max-width:768px),(pointer:coarse)
   in horizontal-sequences.js. We mirror that exact condition here so touch TABLETS (coarse
   pointer, >768px) also drop the 100vh/130vh pin — otherwise the short 16:9 video stays
   centred in a 100vh orange pane, leaving a huge void above and below it. With the pin gone
   the pane sizes to the video plus a small proportional vh gap.
   ========================================================================== */
@media (max-width: 768px), (pointer: coarse) {
  .video-vertical-wrapper { height: auto; }
  .video-vertical-sticky { position: relative; height: auto; }
  .video-vertical-sticky .sa-pane--video { height: auto; padding: 4vh 0 8vh; }
}
/* Larger touch screens (tablets, >767px): a touch more breathing room top & bottom. */
@media (min-width: 768px) and (pointer: coarse) {
  .video-vertical-sticky .sa-pane--video { padding: 9vh 0 11vh; }
}

/* 768–1200px: shrink the pre-footer's centring height so its content sits closer to the
   card3d-section above (whose bottom padding is also reduced in index.html). */
@media (min-width: 768px) and (max-width: 1200px) {
  .pre-footer { min-height: 78vh; padding-top: 6vh; }

  /* Trim the about-section's tail (its big bottom padding) so the gap to the What We Do
     section is smaller. The orange-cube expansion, which runs across this tail, tightens
     to match. */
  .about-section { padding-bottom: 80vh; }
}

/* 768–1024px: tighten the about → What We Do gap even further (smaller about tail). */
@media (min-width: 768px) and (max-width: 1024px) {
  .about-section { padding-bottom: 52vh; }
}

/* <1200px: let the What We Do header span the full width (base is 50%). */
@media (max-width: 1200px) {
  .wwd-header { max-width: 100%; }
}

/* ==========================================================================
   SMALL MOBILE (≤480px)
   ========================================================================== */
@media (max-width: 480px) {
  .hero-top-logo-img { height: 66px; }
  .hero-marquee-track span { font-size: 56px; }
  .hero-bottom-desc { font-size: 18px; }
  .hero-bottom { gap: 20px; }

  .loader-grid {
    grid-template-columns: repeat(3, 20px);
    grid-template-rows: repeat(4, 20px);
  }
  .loader-block { width: 20px; height: 20px; }

  .about-section { padding: 12vh 18px 40vh; }
  .about-col-right { margin-top: 50vh; }

  .wwd-section { padding: 0 18px; }
  .wwd-header { padding-top: 60px; }
  .wwd-title { font-size: 32px; }
  .wwd-item-title { font-size: 26px; }

  #differentials { padding: 60px 18px 80px; }
  .diff-item.large { padding: 36px 22px; min-height: 280px; }

  #sustainability { padding: 60px 18px; }

  .pre-footer h2 { font-size: 38px; }
  .pre-footer-banner h2 { font-size: 28px; }
  /* footer logo sizing handled by the fluid ≤1024 rule (keeps the lockup inside the viewport) */

  .site-footer { padding: 48px 18px 0; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-marquee-track.hero-marquee-animate { animation: none !important; }
  .sust-marquee-track { animation: none !important; }
  .about-orbit { animation: none !important; }
}