/* Tamiyouz Marketing — Responsive & Mobile Performance, 2026-10-23
 * Loaded last to override legacy desktop rules without changing analytics or CRM.
 */
html,body{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,video,svg{max-width:100%}
@media(max-width:900px){
  /* All section grids stay inside the viewport. */
  .hero>.container.hero-grid,
  .why-section>.container,
  .portfolio-tabs-section>.container,
  .growth-section>.container.growth-grid,
  .consult-section>.container.consult-grid,
  .cta-strip>.container.cta-box{min-width:0}
  .hero-content,.hero-media,.why-card,.portfolio-item,
  .growth-grid>*,.consult-grid>*,.consult-form,.consult-intro{min-width:0;max-width:100%}
  .hero .hero-content h1{overflow-wrap:break-word}
  .hero .hero-content h1 span{white-space:normal!important}
  .services-strip{overflow:hidden!important}
  .services-row{max-width:100%;min-width:0}
  .why-grid,.portfolio-grid,.growth-grid,.consult-grid{min-width:0}
  .consult-intro h2,.growth-copy h2{overflow-wrap:break-word}
  .consult-form .form-grid{min-width:0}
  .consult-form :is(input,select,textarea){max-width:100%;min-width:0}
  .hero-glow,.hero-media-glow{display:none!important;pointer-events:none}
  .hero-ring,.ring-one,.ring-two{animation:none!important;pointer-events:none}
}
@media(max-width:650px){
  .hero{padding-top:26px!important}
  .hero>.container.hero-grid{
    width:calc(100% - 32px)!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:16px!important;
    max-width:560px!important;
    margin-inline:auto!important;
  }
  .hero .hero-content{width:100%!important;padding:0!important;transform:none!important;text-align:right!important}
  .hero .hero-content h1{
    font-size:clamp(29px,8vw,40px)!important;
    line-height:1.36!important;letter-spacing:-.5px!important;
    width:100%!important;max-width:100%!important;margin:12px 0 14px!important;
    overflow-wrap:break-word!important;
  }
  .hero .hero-description{font-size:14px!important;line-height:1.85!important;margin:0!important}
  .hero .hero-badge{max-width:100%!important;font-size:12px!important;line-height:1.45!important;margin-bottom:16px!important}
  .hero .hero-actions{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;width:100%!important;margin-top:24px!important;
  }
  .hero .hero-actions .hero-btn{
    display:flex!important;width:100%!important;max-width:100%!important;
    min-height:54px!important;min-width:0!important;justify-content:center!important;
    padding:12px 15px!important;font-size:15px!important;border-radius:15px!important
  }
  .hero .hero-media{
    width:100%!important;max-width:100%!important;min-height:290px!important;
    margin:12px auto 8px!important;padding:0!important;
  }
  .hero .hero-media-card{max-width:100%!important;min-width:0!important}
  .hero .hero-main-image{display:block;max-width:100%!important;object-fit:cover}
  /* The old horizontal row hid items outside the viewport: show every service. */
  .services-strip{min-height:0!important;padding:13px 0!important;margin:0!important}
  .services-strip>.container.services-row{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:stretch!important;align-items:stretch!important;
    width:calc(100% - 28px)!important;max-width:540px!important;
    margin-inline:auto!important;padding:0!important;gap:9px!important;
    overflow:visible!important;transform:none!important;
  }
  .services-strip .service-separator{display:none!important}
  .services-strip .service-item{
    display:flex!important;align-items:center!important;
    gap:9px!important;width:100%!important;min-width:0!important;
    padding:11px 9px!important;border-radius:13px!important;
    border:1px solid rgba(233,191,116,.15);background:rgba(255,255,255,.03);
    font-size:11px!important;white-space:normal!important;
  }
  .services-strip .service-item:last-child{grid-column:1/-1;justify-content:center}
  .services-strip .service-icon{flex:0 0 32px;width:32px!important;height:32px!important}
  .services-strip .service-item>span{min-width:0;white-space:normal!important}
  /* Work examples, testimonials, and contact are legible and tappable. */
  .why-section>.container,.testimonials>.container,.portfolio-tabs-section>.container,
  .growth-section>.container,.consult-section>.container,.cta-strip>.container{
    width:calc(100% - 32px)!important;min-width:0!important;max-width:560px!important;
    margin-inline:auto!important;
  }
  .why-grid,.portfolio-grid,.growth-grid,.consult-grid,.form-grid{
    grid-template-columns:minmax(0,1fr)!important;
    min-width:0!important;width:100%!important;
  }
  .why-card,.testimonial-card,.portfolio-item,.consult-form,.consult-intro{max-width:100%!important;min-width:0!important}
  .portfolio-tabs{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;gap:8px!important;overflow:visible!important;
  }
  .portfolio-tabs button{width:100%!important;min-width:0!important;min-height:43px!important;white-space:normal!important}
  .portfolio-tabs-section .portfolio-grid{gap:14px!important}
  .consult-section .consult-grid{gap:24px!important}
  .consult-form{width:100%!important;padding:18px 14px!important}
  .consult-form .form-grid{gap:12px!important}
  .consult-form .form-group,.consult-form .form-group.full-width{grid-column:1/-1!important;width:100%!important;min-width:0!important}
  .consult-form .choice-group{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  .consult-form .choice-btn{min-width:0;white-space:normal}
  .cta-strip .cta-box{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:18px!important}
  .cta-strip .cta-box a{width:100%!important;min-width:0!important;justify-content:center!important;text-align:center!important}
  .hero .hero-ring,.hero .hero-glow{animation:none!important}
}
@media(max-width:359px){
  .hero .hero-content h1{font-size:29px!important;line-height:1.42!important}
  .services-strip .service-item{font-size:10px!important;padding:9px 7px!important}
  .services-strip .service-icon{flex-basis:29px;width:29px!important;height:29px!important}
  .portfolio-tabs{gap:6px!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-glow,.hero-ring,.hero-media-glow{animation:none!important}
}