/* ============================================================
   TNR PROTOGRAPHY — MOBILE-FIRST ENHANCEMENTS
   Rewrites layout, spacing, and interaction for touch/small screens.
   Applied after main.css; desktop remains intact via min-width guards.
   ============================================================ */

/* ── PERFORMANCE: font-display swap & will-change reductions ── */
* {
  -webkit-tap-highlight-color: transparent;
}
html {
  /* Prevent iOS font-size inflation */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── TOUCH TARGETS ── Minimum 44px on all interactive elements ── */
/* Touch targets — minimum 44px on interactive elements */
a:not(.svc-print):not(.cat-card):not(.strip-item),
button:not(.svc-print):not(.nav-burger):not(.nav-cta),
input, select, textarea {
  min-height: 44px;
}
/* Reset for elements that shouldn't stretch */
p a, .section-label, .award-tag, .marquee-track span,
.strip-item-label, .svc-stack-hint, .app-world-badge,
.footer-copy, .divider {
  min-height: unset;
  display: revert;
}

/* ── BASE MOBILE (< 768px) ─────────────────────────────────── */
@media (max-width: 767px) {

  /* --- Layout containers --- */
  .container,
  .container-wide {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  section {
    padding: 3.8rem 0;
  }

  /* --- Navigation --- */
  /* viewport-fit=cover lets content sit under the notch/status bar.
     Offset the fixed nav by the safe-area inset so the bar (and the
     hamburger) drop BELOW the status bar / Dynamic Island, where the
     OS would otherwise intercept taps. Falls back to plain height on
     browsers without env() support. */
  #nav {
    height: 58px;
    height: calc(58px + env(safe-area-inset-top, 0px));
    padding: 0 1.1rem;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(1.1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.1rem, env(safe-area-inset-right, 0px));
  }
  #nav.scrolled {
    height: 52px;
    height: calc(52px + env(safe-area-inset-top, 0px));
  }
  .nav-logo img {
    height: 34px;
  }
  /* Larger burger tap target, kept above the drawer overlay */
  .nav-burger {
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 2;
  }
  /* Drawer: bigger tap targets, top padding for status bar */
  .nav-drawer {
    padding-top: env(safe-area-inset-top, 0px);
    gap: 0;
  }
  .nav-drawer a {
    font-size: 2.4rem;
    width: 100%;
    text-align: center;
    padding: 0.7rem 1rem;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Hero ─ full-bleed, legible on small screens --- */
  #hero {
    min-height: 100svh; /* small viewport height: avoids browser chrome overlap */
    min-height: 100vh;
  }
  #hero-logo-scene {
    gap: 0.7rem;
    width: 92%;
    top: 44%;
  }
  #hero-logo-img {
    width: min(220px, 60vw);
  }
  #hero-scene-tagline {
    font-size: clamp(2.2rem, 10vw, 3.6rem);
  }
  #hero-scene-sub {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
  }

  /* CTAs stack vertically */
  .hero-inner {
    bottom: 8rem;
    width: 100%;
    padding: 0 1.1rem;
  }
  .hero-cta {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
  }
  .hero-cta .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* Scroll hint lower to avoid clipping */
  .scroll-hint {
    bottom: 1.6rem;
  }

  /* Silhouette — scale to viewport */
  .hero-silhouette {
    height: auto;
  }

  /* --- Gallery strip — faster on mobile, smaller height --- */
  .gallery-strip {
    height: 160px;
  }
  .strip-track {
    height: 160px;
    animation-duration: 34s; /* faster feels snappier on mobile */
  }
  .strip-item {
    height: 160px;
  }
  .strip-item img {
    height: 160px;
  }
  .gallery-strip::before,
  .gallery-strip::after {
    width: 48px;
  }

  /* --- Section labels & titles --- */
  .section-label {
    font-size: 0.6rem;
  }
  .section-title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  /* --- Reveal animation: shorter travel on mobile (saves paint) --- */
  .reveal        { transform: translateY(20px); }
  .reveal-left   { transform: translateX(-20px); }
  .reveal-right  { transform: translateX(20px); }
  .reveal, .reveal-left, .reveal-right {
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }

  /* --- Awards section --- */
  #awards-hero {
    padding: 3rem 0;
  }
  .awards-header {
    margin-bottom: 1.5rem;
  }
  .awards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem;
  }
  .award-img-wrap:nth-child(1),
  .award-img-wrap:nth-child(2),
  .award-img-wrap:nth-child(3),
  .award-img-wrap:nth-child(4) {
    aspect-ratio: 4/3;
  }
  .award-img-wrap img {
    height: 100%;
  }
  .award-tag {
    font-size: 0.44rem;
    padding: 0.18rem 0.45rem;
  }
  .awards-footer {
    grid-template-columns: 1fr !important;
    gap: 1.4rem;
    padding-top: 1.2rem;
  }
  .awards-stat-col {
    display: none !important; /* already hidden at 900px, belt-and-braces */
  }
  .awards-footer-text p {
    font-size: 0.84rem;
  }

  /* --- Intro section ─ stack vertically --- */
  #intro {
    padding: 3.5rem 0;
  }
  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .intro-img-wrap {
    height: 260px !important;
    position: relative;
  }
  .intro-img-main {
    width: 80%;
    height: 100%;
  }
  .intro-img-sub {
    width: 48%;
    height: 55%;
    border-width: 3px;
  }
  .intro-text p {
    font-size: 0.88rem;
  }

  /* --- Services (stacked print piles) --- */
  #services-preview {
    padding: 3.5rem 0;
  }
  .svc-block {
    grid-template-columns: 1fr !important;
    gap: 0;
    margin-top: 2.5rem;
  }
  .svc-panel {
    padding: 1rem 0 2rem;
    border-bottom: 1px solid var(--border);
  }
  .svc-panel:last-child {
    border-bottom: none;
  }
  .svc-collage {
    --svc-stack-height: 200px;
    margin: 0 0.8rem 1.5rem;
  }
  .svc-stack-actions {
    gap: 0.4rem;
  }
  .svc-stack-btn {
    font-size: 0.54rem;
    padding: 0.55rem 0.65rem;
    min-height: 40px;
  }
  .svc-text {
    padding: 0 1.4rem;
  }
  .svc-num {
    font-size: 2.2rem;
  }
  .svc-name {
    font-size: 1.6rem;
  }
  .svc-desc-text {
    font-size: 0.82rem;
  }
  /* Make svc-link an actual big tap target */
  .svc-link {
    margin-top: 0.8rem;
    padding: 0.5rem 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* --- Marquee --- */
  .marquee-wrap {
    padding: 1.8rem 0;
  }
  .marquee-track span {
    font-size: 0.95rem;
  }
  .marquee-track {
    animation-duration: 18s;
  }

  /* --- Portfolio categories --- */
  #categories {
    padding: 3.5rem 0;
  }
  .cat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem;
    margin-top: 2rem;
  }
  .cat-card {
    aspect-ratio: 3/4; /* Portrait on mobile for impact */
  }
  .cat-card:nth-child(1),
  .cat-card:nth-child(2) {
    grid-column: auto;
    aspect-ratio: 3/4;
  }
  .cat-card-inner {
    padding: 0.9rem;
  }
  .cat-card-inner span {
    font-size: 0.5rem;
    letter-spacing: 0.2em;
  }
  .cat-card-inner h3 {
    font-size: 1.3rem;
  }

  /* --- App feature --- */
  #app-feature {
    padding: 3.5rem 0;
  }
  .app-hero-row {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
  .app-stat-block {
    display: none !important;
  }
  .app-hero-tagline {
    font-size: 0.9rem;
  }
  /* App main block: stack on mobile */
  .app-main-block {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .app-logo-icon {
    max-width: 100px;
  }
  .app-trust-row {
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.8rem !important;
  }
  .app-trust-pill {
    font-size: 0.54rem;
    padding: 0.28rem 0.65rem;
  }
  .app-cta-row {
    margin-top: 1rem !important;
    justify-content: flex-start;
  }
  .app-feat-title {
    font-size: 1.4rem !important;
  }
  .app-feat-desc {
    font-size: 0.84rem !important;
  }
  .app-world-badge {
    font-size: 0.5rem;
  }

  /* --- Closing CTA --- */
  #logo-feature {
    padding: 5rem 0;
  }
  .logo-feature-inner img {
    height: 80px;
    margin-bottom: 1.4rem;
  }
  .logo-feature-title {
    font-size: clamp(1.8rem, 7vw, 3rem);
  }
  .logo-feature-sub {
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    margin-bottom: 1.8rem;
  }
  /* Hide ponga/nikau decorations to save render on small screens */
  .cta-fern-l,
  .cta-fern-r {
    display: none;
  }

  /* --- Footer --- */
  footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 1.8rem;
    padding: 2.4rem 1.1rem;
  }
  .footer-brand img {
    height: 36px;
  }
  .footer-brand p {
    font-size: 0.78rem;
  }
  .footer-col h4 {
    font-size: 0.6rem;
  }
  .footer-col li a {
    font-size: 0.82rem;
    min-height: 36px;
    display: flex;
    align-items: center;
  }
  .footer-bottom {
    padding: 1rem 1.1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }
  .footer-copy {
    font-size: 0.58rem;
  }
  .footer-social {
    gap: 1.2rem;
  }
  .footer-social a {
    font-size: 0.6rem;
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  /* --- Lightbox ─ full screen on mobile --- */
  #lb-img {
    max-width: 98vw;
    max-height: 80vh;
  }
  #lb-close {
    top: max(1rem, env(safe-area-inset-top, 1rem));
    right: 1rem;
    width: 40px;
    height: 40px;
    min-height: unset;
  }
  #lb-prev, #lb-next {
    width: 44px;
    height: 44px;
    min-height: unset;
  }
  #lb-prev {
    left: 0.6rem;
  }
  #lb-next {
    right: 0.6rem;
  }
  #lb-caption {
    bottom: 1rem;
    font-size: 0.54rem;
  }
  #lb-counter {
    bottom: 1rem;
    right: 1rem;
    font-size: 0.54rem;
  }

  /* --- Page hero (non-home pages) --- */
  .page-hero {
    height: 42vh;
    min-height: 280px;
  }
  .page-hero-content {
    padding: 0 1.1rem 2rem;
  }
  .page-hero-title {
    font-size: clamp(2.4rem, 9vw, 3.6rem);
  }

  /* --- Buttons ─ larger hit area --- */
  .btn {
    padding: 0.9rem 1.6rem;
    font-size: 0.68rem;
    min-height: 48px;
  }

  /* --- Divider alignment --- */
  .divider {
    margin: 1rem 0;
  }

  /* --- Lead text smaller --- */
  .lead {
    font-size: 0.92rem;
  }

  /* --- Nikau silhouette divider: hide complex SVG on small screens --- */
  .sil-divider {
    display: none;
  }
}

/* ── SMALL PHONES (< 390px) ─────────────────────────────────── */
@media (max-width: 389px) {
  #hero-logo-img {
    width: 180px;
  }
  #hero-scene-tagline {
    font-size: 2rem;
  }
  .cat-grid {
    grid-template-columns: 1fr !important;
  }
  .cat-card {
    aspect-ratio: 16/9;
  }
  .awards-grid {
    grid-template-columns: 1fr !important;
  }
  .award-img-wrap img {
    height: 220px;
  }
  .section-title {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }
}

/* ── TABLET (768px – 1023px) ──────────────────────────────────
   Tighten desktop layout without full mobile treatment.
   ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .container,
  .container-wide,
  .footer-main,
  .footer-bottom {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  #nav {
    padding: 0 2rem;
  }
  section {
    padding: 5rem 0;
  }

  /* Services 2-col stays but collage smaller */
  .svc-collage {
    --svc-stack-height: 210px;
  }
  .svc-text {
    padding: 0 1.6rem;
  }

  /* Awards grid 2-col */
  .awards-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .award-img-wrap:nth-child(1),
  .award-img-wrap:nth-child(2),
  .award-img-wrap:nth-child(3),
  .award-img-wrap:nth-child(4) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
  }

  /* Intro grid: single col to allow images to breathe */
  .intro-grid {
    grid-template-columns: 1fr !important;
  }
  .intro-img-wrap {
    height: 420px !important;
  }

  /* App block: stack */
  .app-hero-row {
    grid-template-columns: 1fr !important;
  }
  .app-stat-block {
    display: none !important;
  }
}

/* ── PERFORMANCE OPTIMISATIONS ─────────────────────────────── */

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .strip-track,
  .marquee-track {
    animation: none !important;
  }
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scroll-line {
    animation: none !important;
  }
  .svc-print {
    transition: none !important;
  }
}

/* Disable expensive effects on low-end devices */
@media (max-width: 767px) {
  /* Remove backdrop-filter on mobile (GPU expensive); nav stays solid black */
  #nav,
  #nav.scrolled {
    background: rgba(8,10,12,0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-drawer {
    background: rgba(8,10,12,0.99);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .award-pill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(13,37,53,0.92);
  }
  #lb-close,
  #lb-prev,
  #lb-next {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(7,9,13,0.88);
  }

  /* Remove parallax-style scaling on hero bg (causes compositing layers) */
  .page-hero-bg {
    transform: none !important;
  }
  .page-hero-bg.loaded {
    transform: none !important;
  }

  /* Reduce box-shadows on stacked prints */
  .svc-print {
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  }

  /* Image rendering hint for scaled images */
  img {
    image-rendering: auto;
  }

  /* Reduce animation complexity */
  .hover-lift:hover {
    transform: none;
  }
}

/* ── SAFE AREA INSETS (notched phones, home indicator) ──────── */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    footer {
      padding-bottom: env(safe-area-inset-bottom);
    }
    #hero {
      padding-top: env(safe-area-inset-top);
    }
  }
}

/* ── DARK MODE ─ already dark theme, just ensure no flash ───── */
@media (prefers-color-scheme: dark) {
  :root {