/* ================================================================
   MICHAELISM METAVERSE — MOBILE RESPONSIVE OVERRIDE CSS
   Complements Tilda export without modifying minified vendor files.

   Breakpoints covered:
     768px  — Tablets / iPad portrait
     640px  — Large phones / small tablets
     480px  — Standard phone portrait
     414px  — iPhone Plus / large Android
     375px  — Standard iPhone / common Android
     320px  — iPhone SE / small phones
   + landscape orientation (max-height: 500px)
   + safe area for notched iPhones
   + prefers-reduced-motion

   Section map:
     A  — Global overflow & viewport lock
     B  — Container / grid overrides
     C  — Typography scaling (below 480px)
     D  — T396 artboard global mobile strategy
     E1 — Hero: rec763455061
     E2 — NFT Characters: rec763948034
     E3 — MICH Token Banner: rec758740845
     E4 — Roadmap Header: rec774864558
     E5 — Lore / Parallax: rec774333230
     E6 — Banner bars (85px / 50px)
     E7 — NFT Gallery / Communities: rec763949130
     E8 — Content sections (full-page 100vh)
     E9 — Full-page text: rec787081549
     E10 — Tokenomics: rec780151864
     E11 — Contact/Social: rec844663929
     F  — T720 Newsletter cover: rec758740853
     G  — T1036 Social links: rec789636690
     H  — Global image overflow protection
     I  — Form mobile optimisation
     J  — Landscape phone handling
     K  — Safe area support (notched iPhones)
     L  — Performance: disable parallax & heavy effects on mobile
================================================================ */


/* ================================================================
   A. GLOBAL OVERFLOW & VIEWPORT LOCK
   Prevents absolutely-positioned elements from creating h-scroll.
================================================================ */

html,
body,
#allrecords,
.t-records {
  max-width: 100%;
  overflow-x: hidden;
}

/* Images must never overflow their containers */
.t396__elem img,
.t396__elem picture,
.t-img,
.tn-atom img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 960px) {
  .t396,
  .t396__artboard {
    overflow: hidden;
    max-width: 100vw;
  }
}


/* ================================================================
   B. CONTAINER / GRID OVERRIDES
   Tilda grid stops at max-width: 640px inside the 960px breakpoint.
   On a 375px phone the 640px container still overflows.
================================================================ */

@media screen and (max-width: 640px) {
  .t-container,
  .t-container_10,
  .t-container_8 {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 480px) {
  .t-container,
  .t-container_10,
  .t-container_8 {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media screen and (max-width: 375px) {
  .t-container,
  .t-container_10,
  .t-container_8 {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media screen and (max-width: 320px) {
  .t-container,
  .t-container_10,
  .t-container_8 {
    padding-left: 6px;
    padding-right: 6px;
  }
}


/* ================================================================
   C. TYPOGRAPHY SCALING (below 480px — not covered by existing CSS)
   Tilda blocks CSS already handles 640px and 480px for standard
   utility classes. We extend down to 320px.
================================================================ */

@media screen and (max-width: 414px) {
  .t-title_sm  { font-size: 24px !important; line-height: 1.2 !important; }
  .t-title_md  { font-size: 26px !important; line-height: 1.2 !important; }
  .t-descr_xl  { font-size: 16px !important; line-height: 1.45 !important; }
  .t-descr_lg  { font-size: 15px !important; line-height: 1.45 !important; }
  .t-text_md   { font-size: 14px !important; line-height: 1.45 !important; }
  .t-text_sm   { font-size: 13px !important; line-height: 1.45 !important; }
}

@media screen and (max-width: 375px) {
  .t-title_sm  { font-size: 22px !important; line-height: 1.2 !important; }
  .t-title_md  { font-size: 24px !important; line-height: 1.2 !important; }
  .t-descr_xl  { font-size: 15px !important; }
  .t-descr_lg  { font-size: 14px !important; }
}

@media screen and (max-width: 320px) {
  .t-title_sm,
  .t-title_md  { font-size: 20px !important; line-height: 1.15 !important; }
  .t-descr_xl,
  .t-descr_lg  { font-size: 13px !important; }
  .t-text_sm,
  .t-text_xs   { font-size: 11px !important; }
}


/* ================================================================
   D. T396 ARTBOARD — GLOBAL MOBILE STRATEGY
   Switch from JS-zoom + absolute layout to reflowed column layout.
   `!important` is required to beat Tilda JS inline style.height.
================================================================ */

@media screen and (max-width: 768px) {
  /* Artboard: let height grow to natural content size */
  .t396__artboard {
    height: auto !important;
    min-height: unset !important;
    overflow: visible;
  }

  .t396__filter,
  .t396__carrier {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* All absolutely-positioned artboard elements → reflow */
  .t396__elem {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    zoom: 1 !important;
    margin: 8px auto;
  }

  /* Buttons */
  .t-btn {
    width: 100% !important;
    max-width: 360px;
    min-height: 48px;
    margin: 8px auto !important;
    display: block;
    box-sizing: border-box;
  }

  /* Section padding */
  .t-rec {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

@media screen and (max-width: 640px) {
  .t396__elem { margin: 6px auto; }
  .t-rec {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* Grid columns → single column */
  .t-col,
  .t-col_2,
  .t-col_3,
  .t-col_4,
  .t-col_6 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (max-width: 480px) {
  .t396__elem { margin: 4px auto; }
  .t-rec {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

@media screen and (max-width: 375px) {
  .t-rec {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .t-btn {
    font-size: 14px !important;
    padding: 12px 20px !important;
  }
}

@media screen and (max-width: 320px) {
  .t-btn {
    font-size: 13px !important;
    min-height: 44px;
  }
}


/* ================================================================
   E1. HERO — rec763455061
   Video hero with logo overlays.
   Already has data-artboard-screens="320,480,640,960,1200,1840"
   so existing mobile breakpoints are in the inline style.
================================================================ */

@media screen and (max-width: 480px) {
  #rec763455061 .tn-atom__videoiframe {
    width: 100% !important;
    height: 100% !important;
  }
  #rec763455061 .tn-atom__img {
    max-width: 100vw;
    height: auto;
  }
}

@media screen and (max-width: 375px) {
  #rec763455061 .t396__artboard,
  #rec763455061 .t396__filter,
  #rec763455061 .t396__carrier {
    min-height: 380px !important;
  }
}

@media screen and (max-width: 320px) {
  #rec763455061 .t396__artboard,
  #rec763455061 .t396__filter,
  #rec763455061 .t396__carrier {
    min-height: 320px !important;
  }
}


/* ================================================================
   E2. NFT CHARACTERS — rec763948034
   Character showcase, screens="1000,1200" only.
   Decorative gallery — reduce height proportionally.
================================================================ */

@media screen and (max-width: 768px) {
  #rec763948034 .t396__artboard,
  #rec763948034 .t396__filter,
  #rec763948034 .t396__carrier {
    min-height: 400px !important;
    height: 50vh !important;
    overflow: hidden;
  }
}

@media screen and (max-width: 480px) {
  #rec763948034 .t396__artboard,
  #rec763948034 .t396__filter,
  #rec763948034 .t396__carrier {
    min-height: 280px !important;
    height: 40vh !important;
  }
}

@media screen and (max-width: 375px) {
  #rec763948034 .t396__artboard,
  #rec763948034 .t396__filter,
  #rec763948034 .t396__carrier {
    min-height: 220px !important;
    height: 35vh !important;
  }
}


/* ================================================================
   E3. MICH TOKEN BANNER — rec758740845
   310px fixed. Screens: 320,480,640,960,1200 (best covered section).
================================================================ */

@media screen and (max-width: 375px) {
  #rec758740845 .t396__artboard,
  #rec758740845 .t396__filter,
  #rec758740845 .t396__carrier {
    height: auto !important;
    min-height: 280px;
  }
  #rec758740845 .tn-elem[data-elem-id="1717148392154"] .tn-atom {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
}

@media screen and (max-width: 320px) {
  #rec758740845 .t396__artboard,
  #rec758740845 .t396__filter,
  #rec758740845 .t396__carrier {
    min-height: 240px;
  }
  #rec758740845 .tn-elem[data-elem-id="1717148392154"] .tn-atom {
    font-size: 16px !important;
  }
}


/* ================================================================
   E4. ROADMAP HEADER — rec774864558
   1120px fixed height, screens: 960,1200 only.
   At 375px zoom = 0.39 → 1120px section becomes blank space.
================================================================ */

@media screen and (max-width: 768px) {
  #rec774864558 .t396__artboard,
  #rec774864558 .t396__filter,
  #rec774864558 .t396__carrier {
    height: 600px !important;
    min-height: 600px !important;
  }
}

@media screen and (max-width: 480px) {
  #rec774864558 .t396__artboard,
  #rec774864558 .t396__filter,
  #rec774864558 .t396__carrier {
    height: 400px !important;
    min-height: 400px !important;
  }
}

@media screen and (max-width: 375px) {
  #rec774864558 .t396__artboard,
  #rec774864558 .t396__filter,
  #rec774864558 .t396__carrier {
    height: 320px !important;
    min-height: 320px !important;
  }
}


/* ================================================================
   E5. LORE / PARALLAX — rec774333230
   100vh / min-height 684px, screens: 960,1200,1840.
   Parallax background-attachment: fixed not supported on iOS.
================================================================ */

@media screen and (max-width: 768px) {
  #rec774333230 .t396__artboard,
  #rec774333230 .t396__filter,
  #rec774333230 .t396__carrier {
    min-height: 400px !important;
    height: 60vh !important;
  }
  #rec774333230 .t396__carrier-wrapper {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
  }
}

@media screen and (max-width: 480px) {
  #rec774333230 .t396__artboard,
  #rec774333230 .t396__filter,
  #rec774333230 .t396__carrier {
    min-height: 280px !important;
    height: 50vh !important;
  }
  /* Lore body text */
  #rec774333230 .tn-elem[data-elem-id="1723333188315"] .tn-atom {
    font-size: 13px !important;
    white-space: normal !important;
    line-height: 1.5 !important;
  }
}

@media screen and (max-width: 375px) {
  #rec774333230 .t396__artboard,
  #rec774333230 .t396__filter,
  #rec774333230 .t396__carrier {
    min-height: 240px !important;
    height: 45vh !important;
  }
}


/* ================================================================
   E6. BANNER BARS — rec785027444, rec844455478, rec844698158, rec844687905
   85px and 50px fixed height header/divider bars.
================================================================ */

@media screen and (max-width: 960px) {
  #rec785027444 .t396__artboard,
  #rec785027444 .t396__filter,
  #rec785027444 .t396__carrier,
  #rec844455478 .t396__artboard,
  #rec844455478 .t396__filter,
  #rec844455478 .t396__carrier,
  #rec844698158 .t396__artboard,
  #rec844698158 .t396__filter,
  #rec844698158 .t396__carrier,
  #rec844687905 .t396__artboard,
  #rec844687905 .t396__filter,
  #rec844687905 .t396__carrier {
    overflow: hidden;
    max-width: 100vw;
  }
}

@media screen and (max-width: 480px) {
  /* Banner heading text */
  #rec785027444 .tn-atom,
  #rec844455478 .tn-atom {
    font-size: 15px !important;
    white-space: nowrap;
  }
}

@media screen and (max-width: 375px) {
  #rec785027444 .tn-atom,
  #rec844455478 .tn-atom {
    font-size: 13px !important;
  }
}


/* ================================================================
   E7. NFT GALLERY / COMMUNITIES INVOLVED — rec763949130
   "NFT Blockchain Communities" section.
   Displays Solana, Ethereum, TON, BNB collections with
   combination counts. Has scroll-based animations (data-animate-sbs).

   Screens: 960,1200,1840,2560 — 100vh, min-height 1200px.
   Animation: data-animate-mobile="y" already set on blockchain icons
   → scroll animations continue to fire on mobile without JS changes.

   Element IDs:
     1718743085260 — Solana icon
     1718743327897 — Ethereum icon
     1718743382697 — TON icon
     1721090698146 — BNB icon
     1723526563760 — Summary text (35px default, 17px at 1199px)
     1723526540423 — BNB detail text
     1723526518471 — ETH detail text
     1723526400313 — SOL detail text
     1742361557240 — SOL variation text
     1742363274157 — ETH variation text
================================================================ */

@media screen and (max-width: 768px) {
  #rec763949130 .t396__artboard,
  #rec763949130 .t396__filter,
  #rec763949130 .t396__carrier {
    min-height: 600px !important;
    height: 70vh !important;
  }
}

@media screen and (max-width: 640px) {
  #rec763949130 .t396__artboard,
  #rec763949130 .t396__filter,
  #rec763949130 .t396__carrier {
    min-height: 420px !important;
    height: 55vh !important;
  }

  /* Pre-animation hidden elements must not cause horizontal overflow */
  #rec763949130 .t396__elem--anim-hidden {
    overflow: hidden;
    max-width: 100vw;
  }

  /* Blockchain icon images — cap at readable size */
  #rec763949130 .tn-elem[data-elem-id="1718743085260"] .tn-atom__img,
  #rec763949130 .tn-elem[data-elem-id="1718743327897"] .tn-atom__img,
  #rec763949130 .tn-elem[data-elem-id="1718743382697"] .tn-atom__img,
  #rec763949130 .tn-elem[data-elem-id="1721090698146"] .tn-atom__img {
    max-width: 120px !important;
    max-height: 120px !important;
    height: auto !important;
  }

  /* Summary text: 17px at 1199px → 13px at 640px */
  #rec763949130 .tn-elem[data-elem-id="1723526563760"] .tn-atom {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  /* Collection detail text blocks */
  #rec763949130 .tn-elem[data-elem-id="1723526540423"] .tn-atom,
  #rec763949130 .tn-elem[data-elem-id="1723526518471"] .tn-atom,
  #rec763949130 .tn-elem[data-elem-id="1723526400313"] .tn-atom,
  #rec763949130 .tn-elem[data-elem-id="1742361557240"] .tn-atom,
  #rec763949130 .tn-elem[data-elem-id="1742363274157"] .tn-atom {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }
}

@media screen and (max-width: 480px) {
  #rec763949130 .t396__artboard,
  #rec763949130 .t396__filter,
  #rec763949130 .t396__carrier {
    min-height: 350px !important;
    height: 50vh !important;
  }
  #rec763949130 .tn-elem[data-elem-id="1723526563760"] .tn-atom {
    font-size: 11px !important;
  }
}

@media screen and (max-width: 375px) {
  #rec763949130 .t396__artboard,
  #rec763949130 .t396__filter,
  #rec763949130 .t396__carrier {
    min-height: 280px !important;
    height: 45vh !important;
  }
  /* Summary text: minimum readable size */
  #rec763949130 .tn-elem[data-elem-id="1723526563760"] .tn-atom {
    font-size: 10px !important;
  }
  /* Blockchain icons capped smaller */
  #rec763949130 .tn-elem[data-elem-id="1718743085260"] .tn-atom__img,
  #rec763949130 .tn-elem[data-elem-id="1718743327897"] .tn-atom__img,
  #rec763949130 .tn-elem[data-elem-id="1718743382697"] .tn-atom__img,
  #rec763949130 .tn-elem[data-elem-id="1721090698146"] .tn-atom__img {
    max-width: 90px !important;
    max-height: 90px !important;
  }
}


/* ================================================================
   E8. FULL-PAGE CONTENT SECTIONS (100vh)
   rec779973848, rec779973708, rec779973854, rec779978765
   Screens: 960,1200,1840 — min-height varies 750–1120px.
================================================================ */

@media screen and (max-width: 768px) {
  #rec779973848 .t396__artboard,
  #rec779973848 .t396__filter,
  #rec779973848 .t396__carrier,
  #rec779973708 .t396__artboard,
  #rec779973708 .t396__filter,
  #rec779973708 .t396__carrier,
  #rec779973854 .t396__artboard,
  #rec779973854 .t396__filter,
  #rec779973854 .t396__carrier,
  #rec779978765 .t396__artboard,
  #rec779978765 .t396__filter,
  #rec779978765 .t396__carrier {
    min-height: 500px !important;
    height: 65vh !important;
  }
}

@media screen and (max-width: 480px) {
  #rec779973848 .t396__artboard,
  #rec779973848 .t396__filter,
  #rec779973848 .t396__carrier,
  #rec779973708 .t396__artboard,
  #rec779973708 .t396__filter,
  #rec779973708 .t396__carrier,
  #rec779973854 .t396__artboard,
  #rec779973854 .t396__filter,
  #rec779973854 .t396__carrier,
  #rec779978765 .t396__artboard,
  #rec779978765 .t396__filter,
  #rec779978765 .t396__carrier {
    min-height: 340px !important;
    height: 55vh !important;
  }
}

@media screen and (max-width: 375px) {
  #rec779973848 .t396__artboard,
  #rec779973848 .t396__filter,
  #rec779973848 .t396__carrier,
  #rec779973708 .t396__artboard,
  #rec779973708 .t396__filter,
  #rec779973708 .t396__carrier,
  #rec779973854 .t396__artboard,
  #rec779973854 .t396__filter,
  #rec779973854 .t396__carrier,
  #rec779978765 .t396__artboard,
  #rec779978765 .t396__filter,
  #rec779978765 .t396__carrier {
    min-height: 280px !important;
    height: 50vh !important;
  }
}


/* ================================================================
   E9. FULL-PAGE TEXT SECTION — rec787081549
   100vh / min-height 850px, screens: 960,1200,1840.
================================================================ */

@media screen and (max-width: 768px) {
  #rec787081549 .t396__artboard,
  #rec787081549 .t396__filter,
  #rec787081549 .t396__carrier {
    min-height: 500px !important;
    height: 65vh !important;
  }
}

@media screen and (max-width: 480px) {
  #rec787081549 .t396__artboard,
  #rec787081549 .t396__filter,
  #rec787081549 .t396__carrier {
    min-height: 360px !important;
    height: 55vh !important;
  }
  #rec787081549 .tn-elem[data-elem-id="1723968072089"] .tn-atom {
    font-size: 16px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
  }
}

@media screen and (max-width: 375px) {
  #rec787081549 .t396__artboard,
  #rec787081549 .t396__filter,
  #rec787081549 .t396__carrier {
    min-height: 300px !important;
    height: 50vh !important;
  }
  #rec787081549 .tn-elem[data-elem-id="1723968072089"] .tn-atom {
    font-size: 14px !important;
  }
}


/* ================================================================
   E10. TOKENOMICS — rec780151864
   1100px fixed height, screens: 960,1200.
   Contains chart image (1208px wide), description text, CTA buttons.
================================================================ */

@media screen and (max-width: 768px) {
  #rec780151864 .t396__artboard,
  #rec780151864 .t396__filter,
  #rec780151864 .t396__carrier {
    height: 700px !important;
    min-height: 700px !important;
  }
}

@media screen and (max-width: 480px) {
  #rec780151864 .t396__artboard,
  #rec780151864 .t396__filter,
  #rec780151864 .t396__carrier {
    height: 500px !important;
    min-height: 500px !important;
  }
}

@media screen and (max-width: 375px) {
  #rec780151864 .t396__artboard,
  #rec780151864 .t396__filter,
  #rec780151864 .t396__carrier {
    height: 430px !important;
    min-height: 430px !important;
  }
  /* Tokenomics chart: must not overflow */
  #rec780151864 .tn-elem[data-elem-id="1724353326462"] .tn-atom__img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Description text */
  #rec780151864 .tn-elem[data-elem-id="1724499631559"] .tn-atom {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}


/* ================================================================
   E11. CONTACT / SOCIAL — rec844663929
   550px fixed height, screens: 960,1200.
   Title 40px, description 20px. At 375px zoom 0.39 → 15px / 7.8px.
================================================================ */

@media screen and (max-width: 768px) {
  #rec844663929 .t396__artboard,
  #rec844663929 .t396__filter,
  #rec844663929 .t396__carrier {
    height: 420px !important;
    min-height: 420px !important;
  }
}

@media screen and (max-width: 480px) {
  #rec844663929 .t396__artboard,
  #rec844663929 .t396__filter,
  #rec844663929 .t396__carrier {
    height: 340px !important;
    min-height: 340px !important;
  }
  #rec844663929 .tn-elem[data-elem-id="1470209944682"] .tn-atom {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  #rec844663929 .tn-elem[data-elem-id="1735036891164"] .tn-atom {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

@media screen and (max-width: 375px) {
  #rec844663929 .t396__artboard,
  #rec844663929 .t396__filter,
  #rec844663929 .t396__carrier {
    height: 280px !important;
    min-height: 280px !important;
  }
  #rec844663929 .tn-elem[data-elem-id="1470209944682"] .tn-atom {
    font-size: 18px !important;
  }
  #rec844663929 .tn-elem[data-elem-id="1735036891164"] .tn-atom {
    font-size: 12px !important;
  }
}


/* ================================================================
   F. T720 NEWSLETTER COVER — rec758740853
   600px fixed height with email subscribe form.
================================================================ */

@media screen and (max-width: 640px) {
  #rec758740853 .t-cover,
  #rec758740853 .t-cover__carrier,
  #rec758740853 .t-cover__filter {
    height: 480px !important;
  }
  #rec758740853 .t-cover__wrapper {
    height: 480px !important;
  }
  #rec758740853 .t720__title.t-title_sm {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  #rec758740853 .t720__descr.t-descr_xl {
    font-size: 16px !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 480px) {
  #rec758740853 .t-cover,
  #rec758740853 .t-cover__carrier,
  #rec758740853 .t-cover__filter {
    height: 420px !important;
  }
  #rec758740853 .t-cover__wrapper {
    height: 420px !important;
  }
}

@media screen and (max-width: 375px) {
  #rec758740853 .t-cover,
  #rec758740853 .t-cover__carrier,
  #rec758740853 .t-cover__filter {
    height: 380px !important;
  }
  #rec758740853 .t-cover__wrapper {
    height: 380px !important;
  }
  #rec758740853 .t720__title.t-title_sm {
    font-size: 22px !important;
  }
  #rec758740853 .t720__descr.t-descr_xl {
    font-size: 14px !important;
  }
}


/* ================================================================
   G. T1036 SOCIAL LINKS — rec789636690
================================================================ */

@media screen and (max-width: 480px) {
  #rec789636690 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  #rec789636690 .t1036__btn.t-btn_md {
    height: 50px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media screen and (max-width: 375px) {
  #rec789636690 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}


/* ================================================================
   H. GLOBAL IMAGE OVERFLOW PROTECTION
================================================================ */

@media screen and (max-width: 960px) {
  .t-col img,
  .t-container img,
  .t-container_10 img,
  .t-container_8 img,
  .t-width img,
  .t336__img,
  .t-img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
  }

  /* GIF animations: proportional */
  .tn-atom__img {
    max-width: 100%;
    height: auto;
  }
}


/* ================================================================
   I. FORM MOBILE OPTIMISATION
   font-size: 16px on inputs prevents iOS Safari from auto-zooming
   the viewport when an input field receives focus.
================================================================ */

@media screen and (max-width: 640px) {
  .t-input,
  .t-form__inputsbox input,
  .t-form__inputsbox textarea,
  .t-form__inputsbox select {
    height: 50px !important;
    font-size: 16px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .t-submit,
  .t-form__submit .t-submit {
    height: 50px !important;
    font-size: 16px !important;
    min-width: 120px;
    width: 100%;
    margin-top: 10px;
    box-sizing: border-box;
    min-height: 50px;
  }

  .t-form__inputsbox {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

@media screen and (max-width: 375px) {
  .t-input,
  .t-form__inputsbox input,
  .t-form__inputsbox textarea,
  .t-form__inputsbox select {
    height: 48px !important;
    font-size: 15px !important;
  }
  .t-submit,
  .t-form__submit .t-submit {
    height: 48px !important;
    font-size: 15px !important;
    min-height: 48px;
  }
}


/* ================================================================
   J. LANDSCAPE PHONE HANDLING
   Phones in landscape: viewport height is 500px or less.
================================================================ */

@media screen and (orientation: landscape) and (max-height: 500px) {
  .t396__artboard {
    height: auto !important;
    min-height: 400px !important;
  }
  .t396__filter,
  .t396__carrier {
    height: 100% !important;
    min-height: 400px !important;
  }
  .t-cover,
  .t-cover__carrier,
  .t-cover__filter {
    height: 350px !important;
  }
  .t-cover__wrapper {
    height: 350px !important;
  }
  .t-rec {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}


/* ================================================================
   K. SAFE AREA SUPPORT (notched iPhones — X, 11, 12, 13, 14, 15)
   Requires viewport-fit=cover in <meta name="viewport">.
================================================================ */

@supports (padding: max(0px)) {
  @media screen and (max-width: 960px) {
    #allrecords {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
    /* First section: top safe area */
    #rec763455061 {
      padding-top: env(safe-area-inset-top);
    }
    /* Bottom of page */
    .t-tildalabel {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}


/* ================================================================
   L. PERFORMANCE — DISABLE PARALLAX & HEAVY EFFECTS ON MOBILE
   background-attachment: fixed is not supported on iOS and causes
   jank on Android. Disable below 960px.
================================================================ */

@media screen and (max-width: 960px) {
  .t396__carrier {
    background-attachment: scroll !important;
  }

  /* CSS parallax clip-path wrapper */
  .t396__carrier-wrapper {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .t-cover,
  .t396__artboard,
  .t396__elem,
  .r_anim {
    transition: none !important;
    animation: none !important;
  }
}