/* CR8R LABS — V33 MOBILE / TABLET EXPERIENCE
   Mobile is treated as a primary experience, not a compressed desktop.
   No new imagery or 3D structures are introduced here.
*/
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
@media (max-width:1024px){
  .shell{width:min(calc(100% - 40px),1240px)}
}
@media (max-width:767px){
  .shell,.page-hero .shell{width:min(calc(100% - 32px),680px)}
  main{overflow:hidden}
  .hero{min-height:auto;padding:124px 0 54px}
  .hero h1{font-size:clamp(3.1rem,13vw,4.8rem);line-height:.91;letter-spacing:-.07em;margin:16px 0 20px;max-width:100%}
  .hero p{font-size:16px;line-height:1.58;max-width:620px}
  .eyebrow{font-size:9px;letter-spacing:.18em}

  /* Tighter vertical rhythm: enough air to feel premium, without the long-scroll gaps. */
  .section{padding:58px 0 64px}
  .section-tight{padding:42px 0 48px}
  .band{padding:58px 0 64px}
  .section-intro{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:30px;align-items:start}
  .section-intro h2{font-size:clamp(2.35rem,10vw,4rem);line-height:.94;letter-spacing:-.06em;margin:10px 0 0}
  .section-intro p{font-size:15px;line-height:1.58;max-width:650px;color:#d7dcd9}
  .statement{font-size:clamp(2.9rem,13vw,5.2rem);line-height:.91;letter-spacing:-.07em}

  /* Capabilities / loop flows become open editorial sequences, not cards. */
  .flow{display:block;border-top:0}
  .flow-item,.flow-item:nth-child(even){padding:22px 0 25px;border-left:0;border-bottom:1px solid rgba(255,255,255,.10);display:grid;grid-template-columns:42px 1fr;column-gap:15px}
  .flow-item:last-child{border-bottom:0}
  .flow-item .index-no{grid-column:1;grid-row:1 / span 3;padding-top:4px;font-size:9px}
  .flow-item h3{grid-column:2;font-size:22px;line-height:1.08;margin:0;letter-spacing:-.025em}
  .flow-item p{grid-column:2;font-size:14px;line-height:1.58;margin:9px 0 0;color:#aeb8c5;max-width:620px}

  .band .statement{max-width:680px}
  .band .shell>p:last-child{font-size:14px;line-height:1.58;margin-top:20px!important}

  /* Work becomes a clean case-study sequence. */
  .project-list{gap:0}
  .project{grid-template-columns:34px 1fr;gap:5px 13px;padding:23px 0 25px;align-items:start}
  .project:hover{padding-left:0;background:none}
  .project-meta{font-size:8px;letter-spacing:.12em;padding-top:5px}
  .project h3{font-size:23px;line-height:1.04;letter-spacing:-.035em;margin:0}
  .project p{grid-column:2;font-size:14px;line-height:1.58;margin:7px 0 0;color:#aeb8c5}
  .visit{grid-column:2;text-align:left;font-size:9px;letter-spacing:.13em;margin-top:6px}

  /* Principles / insights retain hierarchy without turning into stacked cards. */
  .principle-line{grid-template-columns:34px 1fr;gap:5px 13px;padding:23px 0 25px}
  .principle-line .index-no{grid-column:1;grid-row:1 / span 2;padding-top:4px}
  .principle-line h3{grid-column:2;font-size:22px;line-height:1.08}
  .principle-line p{grid-column:2;font-size:14px;line-height:1.58;color:#aeb8c5}

  .insight-row{grid-template-columns:34px 1fr;gap:5px 13px;padding:24px 0 26px}
  .insight-row .tag{grid-column:1;padding-top:5px;font-size:8px}
  .insight-row h3{grid-column:2;font-size:22px;line-height:1.08;letter-spacing:-.03em}
  .insight-row p{grid-column:2;font-size:14px;line-height:1.58;color:#aeb8c5}

  /* Studio: image and text become one calm, readable story. */
  .studio-lead{grid-template-columns:1fr;gap:30px;align-items:start}
  .studio-lead h2{font-size:clamp(2.7rem,12vw,4.8rem);line-height:.93;letter-spacing:-.07em;margin:12px 0 14px}
  .studio-lead p{font-size:15px;line-height:1.58}
  .portrait{width:min(100%,390px);margin:0 auto;border-radius:45% 55% 48% 52% / 20% 24% 76% 80%;}

  /* Contact is deliberately calm and thumb-friendly. */
  .form-shell{grid-template-columns:1fr;gap:38px}
  .contact-copy h2{font-size:clamp(2.7rem,11vw,4.6rem);line-height:.94;letter-spacing:-.065em;margin:12px 0 15px}
  .contact-copy p{font-size:15px;line-height:1.58}
  .form{gap:20px}
  .field{gap:7px}
  .field label{font-size:9px}
  .field input,.field textarea,.field select{font-size:16px;padding:12px 2px;min-height:44px}
  .field textarea{min-height:140px}
  .form-note{font-size:11px;line-height:1.55}
  .btn{min-height:46px;padding:13px 18px;font-size:11px}

  /* Footer becomes a compact information index. */
  .footer{padding:60px 0 24px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-logo{width:135px}
  .footer p,.footer a{font-size:12px;line-height:1.6}
  .footer-bottom{display:grid;gap:10px;margin-top:38px;padding-top:17px;font-size:8px;line-height:1.5}

  /* Floating actions stay clear of iPhone/Android safe areas. */

  /* Avoid accidental hover-only states on touch devices. */
  @media (hover:none){
    .btn:hover,.project:hover{transform:none;background:none}
  }
}

@media (min-width:768px) and (max-width:1024px){
  .hero{padding-top:145px;padding-bottom:72px}
  .hero h1{font-size:clamp(4.2rem,9vw,6.5rem)}
  .section{padding:78px 0 84px}
  .section-tight{padding:54px 0 60px}
  .band{padding:76px 0 82px}
  .section-intro{gap:42px;margin-bottom:44px}
  .flow-item{padding-right:24px}
  .flow-item:nth-child(even){padding-left:24px}
  .form-shell{gap:50px}
  .studio-lead{gap:48px}
}

@media (prefers-reduced-motion:reduce){
  nav{transition:none}
  nav .navlinks a:after{transition:none}
}

/* Homepage mobile refinement: preserve its existing mobile story while removing the
   compressed-card feeling and giving the content more editorial breathing room. */
@media (max-width:767px){
  .organic-home-main .oh-section{padding:78px 0 84px}
  .organic-home-main .oh-section-head{margin-bottom:32px;padding-bottom:14px}
  .organic-home-main .oh-split,.organic-home-main .oh-difference-lead,.organic-home-main .oh-build-intro,.organic-home-main .oh-ai-grid,.organic-home-main .oh-loop-lead,.organic-home-main .oh-value-content{display:grid;grid-template-columns:1fr;gap:22px}
  .organic-home-main .oh-section h2,.organic-home-main .oh-difference-lead h2,.organic-home-main .oh-build-intro h2,.organic-home-main .oh-ai h2,.organic-home-main .oh-loop-lead h2,.organic-home-main .oh-value-content h2{font-size:clamp(2.65rem,11vw,4.8rem);line-height:.9;letter-spacing:-.075em}
  .organic-home-main .oh-copy p,.organic-home-main .oh-difference-lead p,.organic-home-main .oh-build-intro p,.organic-home-main .oh-ai-grid p,.organic-home-main .oh-loop-lead p,.organic-home-main .oh-value-copy p,.organic-home-main .oh-close p{font-size:15px;line-height:1.58}
  .organic-home-main .oh-row,.organic-home-main .oh-build-item{grid-template-columns:38px 1fr;gap:5px 13px;padding:21px 0 24px}
  .organic-home-main .oh-row>b,.organic-home-main .oh-build-item span{grid-column:1;grid-row:1 / span 3;padding-top:4px}
  .organic-home-main .oh-row h3,.organic-home-main .oh-build-item strong{grid-column:2;font-size:21px;line-height:1.08}
  .organic-home-main .oh-row p,.organic-home-main .oh-build-item p{grid-column:2;font-size:14px;line-height:1.58}
  .organic-home-main .oh-build-item a{grid-column:2;text-align:left;margin-top:5px}
  .organic-home-main .oh-loop-steps{grid-template-columns:1fr;margin-top:38px;border-top:1px solid rgba(255,255,255,.11)}
  .organic-home-main .oh-loop-steps>div,.organic-home-main .oh-loop-steps>div+div{padding:22px 0 24px;border-left:0;border-bottom:1px solid rgba(255,255,255,.10);min-height:0}
  .organic-home-main .oh-loop-steps strong{margin-top:14px;font-size:1rem}
  .organic-home-main .oh-loop-steps p{max-width:none;font-size:14px;line-height:1.58}
  .organic-home-main .oh-ai-flow{display:grid;grid-template-columns:1fr;gap:15px;align-items:start}
  .organic-home-main .oh-ai-flow>i{display:none}
  .organic-home-main .oh-ai-flow>div{min-width:0;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.10)}
  .organic-home-main .oh-ai-statement{margin-top:42px;font-size:clamp(1.7rem,7vw,2.7rem);line-height:1}
  .organic-home-main .oh-value-strip{margin-top:38px;border-radius:0;padding:17px 0;justify-content:flex-start;overflow:visible}
  .organic-home-main .oh-close{min-height:0;padding:90px 0 100px}
  .organic-home-main .oh-close h2{font-size:clamp(3.7rem,16vw,6rem);line-height:.86}
  .home-v08 .mobile-panel{border:0;background:transparent;box-shadow:none;border-radius:0}
  .home-v08 .mobile-panel:before{display:none}
  .home-v08 .mobile-hero-visual{padding:22px 0 0;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);border-radius:0}
  .home-v08 .mobile-hero-core{width:218px;height:218px;max-width:none;padding:0;margin:30px auto 28px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 28%,rgba(65,120,255,.34),rgba(6,13,31,.88) 58%,rgba(26,8,39,.94));border:1px solid rgba(98,244,255,.18);box-shadow:0 0 80px rgba(31,102,255,.16),inset 0 0 55px rgba(240,34,185,.06)}
  .home-v08 .mobile-hero-core strong{font-size:1.55rem;margin:5px 0}
  .home-v08 .mobile-hero-steps{gap:0;border-top:1px solid rgba(255,255,255,.10)}
  .home-v08 .mobile-hero-step{padding:15px 0;border:0;border-bottom:1px solid rgba(255,255,255,.09);border-radius:0;background:none}
  .home-v08 .mobile-capabilities,.home-v08 .mobile-model,.home-v08 .mobile-studio{gap:0}
  .home-v08 .mobile-cap-card,.home-v08 .mobile-model-intro,.home-v08 .mobile-principle,.home-v08 .mobile-work-feature,.home-v08 .mobile-studio-card{padding:21px 0 24px;border:0;border-bottom:1px solid rgba(255,255,255,.10);border-radius:0;background:transparent;box-shadow:none}
  .home-v08 .mobile-cap-card strong,.home-v08 .mobile-model-intro strong,.home-v08 .mobile-principle strong,.home-v08 .mobile-studio-card strong{font-size:1.2rem}
  .home-v08 .mobile-work-feature{margin-top:34px}
  .home-v08 .mobile-work-point{padding:13px 0;border:0;border-top:1px solid rgba(255,255,255,.09);border-radius:0;background:none}
  .home-v08 .mobile-closing .mobile-panel{padding:0 0 10px;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
}