/* =====================================================================
   ROi — TABLET + PHONE REFINEMENTS (loaded last, overrides style.css / motion.css)
   Fixes: oversized pictures, banner gaps, long pages, small labels, small tap targets, alignment.
   ===================================================================== */

/* ---------- Tablet and below ---------- */
@media (max-width:1100px){
  html,body{overflow-x:clip}
  .split-media{width:100%;margin-inline:auto}
  .split-media img{height:auto}
  .split-media img:first-child{aspect-ratio:4/3}
  .split-media .accent-img{width:36%}
  .section-head{margin-bottom:44px}
  .hero3d{height:340vh}

  /* Touch devices (tablets and phones): comfortable tap targets and readable labels */
  .topbar-inner{min-height:44px}
  .topbar-contact a{min-height:44px;font-size:.82rem}
  .topbar-quote{min-height:44px;font-size:.78rem}
  .eyebrow,.fact span,.number>span,.proj-meta,.c-list b,.field label,.pd-facts dt,.tag-3d{font-size:.78rem}
  .link-arrow{padding:10px 0}
  .btn-sm{min-height:44px;font-size:.78rem}
  .crumbs a{padding:13px 0}
  .c-list a,.footer-contact a{display:inline-block;padding:7px 0}
  .footer-links li{margin-bottom:0}
  .footer-links a{display:inline-block;padding:8px 0}
  .to-top{padding:10px 0}
}

/* ---------- Phones ---------- */
@media (max-width:760px){
  :root{--gutter:20px}
  body{font-size:16px;line-height:1.65}
  .section{padding:60px 0}
  .section-head{margin-bottom:32px}
  .section-head h2,.split-text h2{font-size:clamp(1.8rem,8vw,2.2rem);margin-top:12px}
  .section-head--split{gap:18px}
  .section-head--split .btn{width:100%}

  /* Top bar + header: bigger, tidier tap targets */
  .topbar-quote{padding:0 16px}
  .header-inner{min-height:70px;gap:10px}
  .header-brochure{width:44px;height:44px;padding:0;flex:none}
  .menu-toggle{width:44px;height:44px;flex:none}
  .wm-letters{font-size:1.75rem}
  .wm-sub{font-size:.56rem;letter-spacing:.14em}

  /* Hero (scroll sequence): shorter scroll, tidy stacked buttons */
  .hero3d{height:310vh}
  .h3-chapters{min-height:250px}
  .h3-chap h2{font-size:2.15rem}
  .h3-chap p{font-size:1rem}
  .h3-actions{gap:10px;margin-top:22px}
  .h3-actions .btn{flex:1 1 100%;padding:15px 20px;font-size:.84rem}

  /* Pictures: never taller than they should be */
  .split{gap:52px}
  .split-media{max-width:none}
  .split-media img:first-child{aspect-ratio:4/3;width:100%;height:auto}
  .split-media .accent-img{width:40%;right:-4px;bottom:-24px;border-width:5px}
  .split-media::before{left:-8px;top:-8px}
  .about-intro .split-text,.split-text{padding-top:8px}
  .svc-card-img{aspect-ratio:16/9}
  .proj-info{padding:16px 18px}
  .proj-info h3{font-size:1.15rem}
  .proj-go{width:40px;height:40px}
  .tag-3d{top:12px;left:12px}
  .glow::after{filter:blur(18px);opacity:.32}
  .glow:hover::after{opacity:.4;filter:blur(18px)}

  /* Home: service list in two columns instead of eight tall rows */
  .svc-cards{gap:22px}
  .svc-card-body{padding:28px 24px 24px}
  .offerings{grid-template-columns:1fr 1fr;margin-top:36px}
  .offering{padding:18px 14px;gap:6px}
  .offering h4{font-size:.9rem;line-height:1.3}
  .proj-grid{gap:20px}
  .showreel{min-height:400px}
  .showreel-inner{padding:60px var(--gutter)}
  .numbers{row-gap:32px}
  .number{padding:6px 14px}
  .number:nth-child(odd){padding-left:0;border-left:0}
  .number b{font-size:3rem}

  /* Calls to action */
  .cta-inner{gap:26px}
  .cta h2{font-size:1.8rem}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1 1 100%}

  /* Inner-page banners: fill the box (no empty strip under the photo) and fit the title */
  .page-banner{padding:48px 0 40px;background-size:cover;background-position:center}
  .page-banner h1{font-size:clamp(1.9rem,8.4vw,2.5rem);line-height:1.1}
  .page-banner p{font-size:1rem;margin-top:14px}
  .crumbs{margin-bottom:14px;flex-wrap:wrap}
  .crumbs a{padding:6px 0}

  /* About */
  .values,.steps{gap:18px}
  .value{padding:26px 22px}
  .mv{gap:18px}
  .step{padding:0}
  .facts{margin:26px 0}

  /* Services page */
  .svc-row{gap:22px;padding-bottom:40px;margin-bottom:40px}
  .svc-row h3{font-size:1.55rem;margin:8px 0 12px}
  .svc-row .btn{width:100%}
  .ticks{margin:18px 0 22px}

  /* Projects page: swipeable filter row instead of three wrapped lines */
  .filters{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 calc(-1 * var(--gutter)) 28px;padding:2px var(--gutter) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none;min-height:42px;padding:0 18px;white-space:nowrap}

  /* Project detail */
  .pd-grid{gap:32px}
  .pd-facts{padding:4px 20px}
  .pd-facts div{padding:14px 0}
  .gallery{gap:10px}
  .gallery button:first-child{grid-column:1/-1;aspect-ratio:16/10}
  .video-slot.empty{padding:22px}
  .pd-nav{flex-direction:column;gap:6px;margin-top:48px;padding-top:28px}
  .pd-nav a{padding:12px 0}

  /* Contact */
  .contact-grid{gap:40px}
  .contact-info h2,.contact-form-wrap h2{font-size:1.7rem}
  .c-list{margin:22px 0}
  .c-list li{gap:14px;padding:16px 0}
  .field input,.field select,.field textarea{font-size:16px;padding:15px 14px}   /* 16px stops iOS zooming into fields */
  .form .btn{width:100%}
  .map{height:320px}

  /* Footer */
  .site-footer{padding-top:52px}
  .footer-grid{gap:34px;padding-bottom:36px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px}
  .mobile-menu nav a{padding:12px 0}
  .lb-btn{width:44px;height:44px}
}

/* Short phones (iPhone SE, small Androids): give the 3D tower more room */
@media (max-width:760px) and (max-height:700px){
  .h3-chapters{min-height:200px}
  .h3-chap h2{font-size:1.85rem}
  .h3-chap p{display:none}
  .h3-ui{padding-bottom:22px}
}

/* Very narrow phones (320px) */
@media (max-width:360px){
  :root{--gutter:16px}
  .topbar-contact a span{font-size:.78rem}
  .wm-letters{font-size:1.55rem}
  .h3-chap h2{font-size:1.9rem}
  .offerings{grid-template-columns:1fr}
  .numbers{grid-template-columns:1fr 1fr}
}